* { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      overflow-y: scroll;
      background: #000;
    }

    /* Fondo: capas ../01/Fondo.webp + ../02/Diablo.webp (referencia: 02/Fondo_Formulario, 1920×1080).
       Mismo escenario que el index: cubre la pantalla como object-fit: cover y cada capa
       se ubica con sus px del lienzo 1920×1080 (--x, --y, --w). */
    .bg-comp { position: fixed; inset: 0; z-index: 0; overflow: hidden;
               --fx: 50%; }   /* punto focal horizontal (equivale a object-position) */
    .bg-stage {
      position: absolute; top: 50%; left: var(--fx);
      /* 5% extra = ~45 px de margen por lado (en px del lienzo): ningún data-depth
         del parallax debe superarlo, o se verán los bordes del fondo */
      width: calc(max(100vw, 100vh * 16 / 9) * 1.05);
      aspect-ratio: 16 / 9;
      transform: translate(calc(-1 * var(--fx)), -50%);
    }
    .bg-stage img {
      position: absolute;
      left:  calc(var(--x) / 1920 * 100%);
      top:   calc(var(--y) / 1080 * 100%);
      width: calc(var(--w) / 1920 * 100%);
      height: auto; display: block;
      pointer-events: none; user-select: none;
    }

    /* Capa envuelta: el contenedor se ubica y recibe el parallax (transform); la imagen de
       adentro lleva su propio transform (el espejo) sin invertir la dirección del parallax */
    .bg-stage .bg-capa {
      position: absolute;
      left:  calc(var(--x) / 1920 * 100%);
      top:   calc(var(--y) / 1080 * 100%);
      width: calc(var(--w) / 1920 * 100%);
      pointer-events: none;
    }
    .bg-stage .bg-capa > img { position: static; width: 100%; }
    .bg-espejo > img { transform: scaleX(-1); }   /* ángel y aureola, en espejo a la derecha del diablo */

    /* Aureola del ángel: flota de arriba hacia abajo en loop (igual que en el index).
       Usa la propiedad translate (no transform) para sumarse al parallax, que mueve la
       capa con transform; ±5% de su alto ≈ ±7 px del lienzo */
    .bg-aureola { animation: aureola-flota 3.2s ease-in-out infinite; }
    @keyframes aureola-flota {
      0%, 100% { translate: 0 -5%; }
      50%      { translate: 0 5%; }
    }

        /* Lata en la mano derecha del diablo (02/Mano_Lata: la de 03 con la mano pasada a guante negro).
       Pulso suave como en el index; solo crece (nunca baja de scale 1) para no destapar el guante
       del diablo que queda detrás, y crece desde la muñeca para no despegarse de la manga */
    .bg-lata { animation: lata-pulse 2.6s ease-in-out infinite; transform-origin: 20% 85%; }
    @keyframes lata-pulse {
      0%, 100% { transform: scale(1);    }
      50%      { transform: scale(1.04); }
    }

    /* Humo: canvas dentro del escenario (lo dibuja humo.js) */
    .bg-humo {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none;
      animation: p1-fade 1.5s ease-out backwards;
    }

    /* Animaciones de entrada (fill-mode backwards: no dejan estilos pegados) */
    @keyframes p1-in    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes p1-fade  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes btn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

    /* ===== Elementos de Pagina_2 ===== */
    .p2-panel  { position: fixed; z-index: 1; top: 8%;    left: 54%;   width: 41%; height: 72%;
                 animation: p1-fade 0.8s ease-out 0.20s backwards; }
    .p2-titulo { position: fixed; z-index: 2; top: 11.5%; left: 16%;   width: 26.5%;
                 animation: p1-in 0.7s ease-out 0.35s backwards; }
    .p2-slogan { position: fixed; z-index: 2; top: 73%;   left: 17.5%; width: 21%;
                 animation: p1-in 0.7s ease-out 0.50s backwards; }
    .p2-panel img { display: block; width: 100%; height: 100%; }
    .p2-titulo img, .p2-slogan img { display: block; width: 100%; height: auto; }

    /* --- Botón ENVIAR (Boton_2) ---
       Capas: wrapper (posición + entrada) > pulso > botón (crossfade + press) */
    .p2-enviar {
      position: fixed; z-index: 3; top: 86%; left: 59%; width: 14.5%;
      animation: p1-in 0.7s ease-out 0.90s backwards;
    }
    .p2-enviar-pulse { animation: btn-pulse 2.6s ease-in-out infinite; }
    /* el pulso se DETIENE al poner el cursor encima */
    .p2-enviar:hover .p2-enviar-pulse { animation-play-state: paused; }

    /* Capa BASE = Boton_2_P (se revela al presionar).
       ::before = normal (Boton_2), ::after = M (Boton_2_M, hover).
       Al presionar se ocultan ambas capas de arriba → queda SOLO P,
       sin que M quede duplicado con P. */
    .p2-enviar-btn {
      position: relative; display: block; width: 100%; aspect-ratio: 254 / 70;
      border: none; padding: 0; cursor: pointer;
      background: url("../Pagina_2/Boton_2_P.svg") center / contain no-repeat;
      transition: transform 0.08s ease;
    }
    .p2-enviar-btn::before {   /* normal (Boton_2) */
      content: ""; position: absolute; inset: 0;
      background: url("../Pagina_2/Boton_2.svg") center / contain no-repeat;
      opacity: 1; transition: opacity 0.35s ease; pointer-events: none;
    }
    .p2-enviar-btn::after {    /* M (hover) con fundido suave */
      content: ""; position: absolute; inset: 0;
      background: url("../Pagina_2/Boton_2_M.svg") center / contain no-repeat;
      opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
    }
    .p2-enviar:hover .p2-enviar-btn::after { opacity: 1; }
    /* Al presionar: ocultar normal (::before) y M (::after) → solo se ve P (base) */
    .p2-enviar-btn:active::before { opacity: 0; transition: none; }
    .p2-enviar:hover .p2-enviar-btn:active::after { opacity: 0; transition: none; }
    .p2-enviar-btn:active { transform: translateY(2px) scale(0.98); }

    /* --- Botón BORRAR (Boton_3): entrada + press --- */
    .p2-borrar {
      position: fixed; z-index: 3; top: 86%; left: 75.5%; width: 14.5%; aspect-ratio: 254 / 70;
      border: none; padding: 0; cursor: pointer;
      background: url("../Pagina_2/Boton_3.svg") center / contain no-repeat;
      transition: transform 0.08s ease;
      animation: p1-in 0.7s ease-out 1.0s backwards;
    }
    .p2-borrar:active {
      background-image: url("../Pagina_2/Boton_3_P.svg");
      transform: translateY(2px) scale(0.98);
    }

    /* ===== Compartidos con la pantalla 1 ===== */
    .logo-ls {
      position: fixed; top: 3%; left: 1%; width: 14%;
      z-index: 4; cursor: pointer;
      animation: p1-in 0.7s ease-out 0.15s backwards;
    }
    .logo-ls img { display: block; width: 100%; height: auto; transition: transform 0.15s ease; }
    .logo-ls:hover img { transform: scale(1.04); }
    .p1-footer {
      position: fixed; left: 3%; bottom: 3.5%; z-index: 4;
      display: flex; flex-direction: column; gap: 10px;
      animation: p1-in 0.7s ease-out 1.1s backwards;
    }
    .p1-social { display: flex; gap: 14px; align-items: center; }
    .p1-social a { display: block; transition: transform 0.15s ease; }
    .p1-social a:hover { transform: scale(1.15); }
    .p1-social img { width: 2vw; height: auto; display: block; }
    .p1-legal  { display: flex; gap: 18px; align-items: flex-end; }
    .p1-legal img { height: 1.5vw; width: auto; display: block; }

    /* ===================== MOBILE (portrait) ===================== */
    @media (max-width: 768px) {
      /* Mobile: composición de 02/Mobile/Fondo_Formulario (1080×1920). Todo se mide en vw
         (px de la referencia / 1080 × 100), así escala con el ancho como un afiche, y va en
         position: absolute (no fixed) para que el fondo y los elementos se desplacen juntos
         si hay scroll. El alto mínimo (189.2vw + 14px) es el fin de los botones (170.7vw)
         + 4vw de aire + el pie (≈11.4vw + 14px) + 3vw de margen */
      html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
      html { background: #a1866e; }                /* color del techo de Fondo_Mobile, por si el scroll rebota */
      body { position: relative; min-height: max(100vh, calc(189.2vw + 14px)); background: transparent; }
      /* Fondo_Mobile ampliado al 122% (1318 px de ancho), recortado desde x 124, y 28 */
      .bg-comp { position: absolute;
                 background: #a76c45 url("../02/Fondo_Mobile.webp") -11.48vw -2.59vw / 122% auto no-repeat; }

      /* Personajes: bustos chicos sobre el título, cortados en y 385 (a mitad del título, que
         tapa el corte). El escenario pasa a ser una franja de 0–385 px con overflow hidden y
         cada capa se ubica con sus px de la referencia (--mx, --my, --mw). Sin humo: los
         personajes quedan casi enteros detrás del título */
      .bg-stage { top: 0; left: 0; width: 100vw; height: calc(385 / 1080 * 100vw);
                  aspect-ratio: auto; transform: none; overflow: hidden; }
      .bg-stage .bg-fondo, .bg-stage .bg-humo { display: none; }
      .bg-stage > img, .bg-stage .bg-capa {
        left:  calc(var(--mx) / 1080 * 100vw);
        top:   calc(var(--my) / 1080 * 100vw);
        width: calc(var(--mw) / 1080 * 100vw);
      }
      .bg-espejo > img { transform: none; }        /* en mobile el ángel va sin espejo */
      .capa-diablo  { --mx: 93;  --my: 51; --mw: 297.6; }
      .capa-angel   { --mx: 568; --my: 36; --mw: 461.1; }
      .capa-aureola { --mx: 830; --my: 20; --mw: 110.4; }
      .capa-lata    { --mx: 122; --my: 168; --mw: 124; }
      .logo-ls, .p2-titulo, .p2-panel, .p2-enviar, .p2-borrar, .p1-footer { position: absolute;}
      .p1-footer {display: none; }
      .logo-ls  { top: 3vw; left: 29.7vw; right: auto; margin: 0; width: 37.5vw; }   /* entre los dos personajes */
        
      /* Título (x 59, y 323, 950 px), recuadro (x 35, y 534, 996 px) y botones (y 1703) */
      .p2-titulo { left: 5.46vw; right: auto; margin: 0; top: 29.91vw; width: 87.96vw; }
      .p2-panel  { left: 3.24vw; right: auto; margin: 0; top: 49.44vw; width: 92.22vw;
                   height: auto; aspect-ratio: 580 / 644; }
      .p2-slogan { display: none; }                /* Haztodo: se oculta para no chocar con el recuadro */

      .p2-enviar { left: 1.30vw;  right: auto; top: 157.69vw; width: 47.22vw; }
      .p2-borrar { left: 50.37vw; right: auto; top: 157.69vw; width: 47.13vw; }

      .p1-footer { left: 0; right: 0; bottom: 3vw; gap: 14px; align-items: center; }
      .p1-social { gap: 22px; justify-content: center; }
      .p1-social img { width: 8vw; }
      .p1-legal  { gap: 4vw; justify-content: center; }
      .p1-legal img { height: 3.4vw; }
    }

.ta-upm-modal-header {
  display: none !important;
}

/* --- Contenedor del formulario (TrustArc) ---
   Escritorio: tarjeta fija a la derecha, centrada verticalmente y con ancho acotado
   para que no se estire en monitores grandes ni se pegue al borde superior.
   Si el formulario es más alto que la pantalla, hace scroll dentro de la tarjeta. */
#formulario {
  position: fixed;
  z-index: 3;
  top: 50%;
  right: 4vw;
  left: auto;
  width: clamp(400px, 36vw, 700px);
  max-height: 90vh;
  margin: 0 !important;
  transform: translateY(-50%);
  display: flex;
}

#formulario > div {
  width: 100%;
  max-height: 90vh;
  margin: auto;              /* centra si sobra alto; si no, el scroll empieza arriba */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .45) transparent;
}

#formulario > div::-webkit-scrollbar { width: 6px; }
#formulario > div::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .45); border-radius: 3px; }

/* Portátiles y tablets horizontales: un poco más estrecho para dejar sitio al título */
@media (min-width: 769px) and (max-width: 1199px) {
  #formulario { width: 44vw; right: 3vw; }
}

/* Monitores 4K a escala 100%: agranda la tarjeta para que no quede minúscula */
@media (min-width: 2400px) and (min-height: 1600px) {
  #formulario {
    transform: translateY(-50%) scale(1.3);
    transform-origin: right center;
  }
}

@media (max-width: 768px) {
  /* Móvil: vuelve al flujo normal (debajo del título) y deja que la página haga scroll.
     El margen superior escala con el ancho: el título mide 87.96vw y, por su viewBox
     (531.63x63.65), ocupa 10.53vw de alto y termina en 40.44vw. Se deja ~3.5vw de aire. */
  #formulario {
    position: static;
    width: 90% !important;
    max-height: none;
    transform: none;
    display: block;
    margin: calc(40.44vw + 3.5vw) auto 0 !important;
  }

  #formulario > div {
    max-height: none;
    overflow: visible;
    margin: 0;
  }
}

/* ===== Tarjeta y campos de TrustArc =====
   Se usan las clases estables (ta-upm-*) en vez de las clases con hash de emotion
   (css-xxxx-control, css-xxxx-singleValue), que cambian según la versión del
   formulario o del navegador. */
.ta-upm-modal-content {
  background-color: rgba(0, 0, 0, .5) !important;
  border-radius: 2rem !important;
  color: #fff;
}

.ta-upm-label {
  font-weight: bold;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Campos de texto */
.ta-upm-input {
  background-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ta-upm-form-group {
  margin-bottom: 1rem !important;
}

/* ===== Selects (react-select) =====
   Fondo oscuro propio para que el valor blanco se vea siempre, incluso si Safari
   pinta el control con un fondo claro por defecto. */
.ta-upm-select__control {
  background-color: rgba(0, 0, 0, .45) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ta-upm-select__control:hover {
  background-color: rgba(0, 0, 0, .55) !important;
}

.ta-upm-select__control--is-focused,
.ta-upm-select__control--menu-is-open {
  background-color: rgba(0, 0, 0, .60) !important;
  border-color: #fff !important;
  box-shadow: none !important;
}

.ta-upm-select__value-container,
.ta-upm-select__single-value,
.ta-upm-select__input-container,
.ta-upm-select__input {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

.ta-upm-select__placeholder {
  color: rgba(255, 255, 255, .65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .65) !important;
}

.ta-upm-select__indicator { color: #fff !important; }
.ta-upm-select__indicator svg { fill: #fff !important; color: #fff !important; }
.ta-upm-select__indicator-separator { background-color: rgba(255, 255, 255, .45) !important; }

/* Menú desplegable: fondo oscuro y opciones blancas (legible en cualquier motor) */
.ta-upm-select__menu {
  background-color: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
}

.ta-upm-select__menu-list {
  background-color: #1c1c1c !important;
}

.ta-upm-select__option {
  background-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  cursor: pointer;
}

.ta-upm-select__option--is-focused {
  background-color: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.ta-upm-select__option--is-selected {
  background-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
  font-weight: 600;
}

.ta-upm-select__option--is-disabled {
  color: rgba(255, 255, 255, .35) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .35) !important;
  cursor: default;
}

.ta-upm-select__no-options-message {
  color: rgba(255, 255, 255, .75) !important;
}

/* Evita fondos grises/amarillos del autofill de Safari y fuerza controles oscuros */
#formulario { color-scheme: dark; }

#formulario input:-webkit-autofill,
#formulario input:-webkit-autofill:hover,
#formulario input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, .9) inset !important;
  caret-color: #fff;
  transition: background-color 9999s ease-out;
}

/* Fecha de nacimiento */
.ta-upm-date-picker-container {
  border: 1px solid #fff !important;
  border-radius: 0 !important;
}

.ta-upm-date-field-container .react-datepicker-wrapper .react-datepicker__input-container input {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#isPasted { color: #fff !important; }
#isPasted span { color: #fff !important; }

/* ===== Botones del formulario ===== */
/* Enviar: mismo lenguaje visual que el botón "Participa" (azul + relieve + hover amarillo) */
#ab58aa09-fb72-471b-885d-004a7cd7fa3a-submit,
.ta-upm-modal-footer .ta-upm-button__primary {
  background-color: #0000f4 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 6px 8px 0 0 #00089e !important;
  margin-right: 0 !important;
  font-family: "Arial Black", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  line-height: 1.1 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 34px !important;
  min-width: 180px;
  min-height: 50px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, color .15s ease;
}

#ab58aa09-fb72-471b-885d-004a7cd7fa3a-submit:hover,
.ta-upm-modal-footer .ta-upm-button__primary:hover {
  background-color: #fce300 !important;
  color: #0000f4 !important;
  box-shadow: 6px 8px 0 0 #7f731d !important;
}

#ab58aa09-fb72-471b-885d-004a7cd7fa3a-submit:active,
.ta-upm-modal-footer .ta-upm-button__primary:active {
  transform: translate(6px, 8px);
  box-shadow: 0 0 0 0 #00089e !important;
}

#ab58aa09-fb72-471b-885d-004a7cd7fa3a-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Borrar: oculto */
#ab58aa09-fb72-471b-885d-004a7cd7fa3a-reset,
.ta-upm-modal-footer .ta-upm-button__secondary {
  display: none !important;
}

.rojo {
  margin-left: 4px;
  color: rgb(217, 52, 43);
}