* { 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: hidden;
      background: #000;
    }

    /* --- Fondo: composición de capas de ../01 (referencia: Fondo_Base, 1920×1080) ---
       El escenario cubre la pantalla como object-fit: cover; cada capa se ubica
       con sus coordenadas en píxeles 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 y la mesa */
      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;
    }

    /* Escenario mobile: capas de ../01/Mobile sobre un lienzo de 1080×1920
       (referencia: 01/Mobile/Fondo_Mobile). Solo se muestra en mobile */
    .bg-stage-m { display: none; }
    .bg-stage-m img {
      position: absolute;
      left:  calc(var(--x) / 1080 * 100%);
      top:   calc(var(--y) / 1920 * 100%);
      width: calc(var(--w) / 1080 * 100%);
      height: auto; display: block;
      pointer-events: none; user-select: none;
    }

    /* 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;
    }

    /* Aureola del ángel: flota de arriba hacia abajo en loop, centrada en su posición de
       Fondo_Base. Usa la propiedad translate (no transform) para sumarse al parallax, que
       mueve la capa con transform; ±5% de su alto ≈ ±6 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: pulso suave. Solo crece (nunca baja de scale 1) para no destapar lo que hay detrás */
    .bg-lata { animation: lata-pulse 2.6s ease-in-out infinite; }
    @keyframes lata-pulse {
      0%, 100% { transform: scale(1);    }
      50%      { transform: scale(1.04); }
    }

    /* --- Botón "Participa aquí" --- */
    /* Wrapper: posición fija + centrado + animación de entrada */
    .btn-wrap {
      position: fixed;
      left: 50%;
      bottom: 7%;
      transform: translateX(-50%);
      z-index: 3;
      width: min(360px, 62vw);     /* se adapta en mobile */
      animation: p1-in-btn 0.7s ease-out 0.9s backwards;
    }
    /* Capa de pulso suave continuo (separada para no chocar con hover/press) */
    .btn-pulse {
      animation: dinero-pulse 2.6s ease-in-out infinite;
    }
    .btn-participa {
      position: relative;          /* ancla las capas ::before/::after */
      display: block;
      width: 100%;
      aspect-ratio: 308 / 85;      /* mantiene la proporción */
      background: url("../Boton_1_P.svg") center / contain no-repeat; /* capa base = Pres (se ve al presionar) */
      border: none;
      padding: 0;
      cursor: pointer;
      transition: transform 0.08s ease;
    }
    /* Capas: base = Boton_1_Pres. ::before = normal (Boton_1), ::after = M (Boton_1_M).
       Al presionar se ocultan normal y M → queda solo Pres, sin superponerse. */
    .btn-participa::before,
    .btn-participa::after {
      content: "";
      position: absolute;
      inset: 0;
      background: center / contain no-repeat;
      pointer-events: none;
    }
    .btn-participa::before {   /* normal (Boton_1) */
      background-image: url("../Boton_1.svg");
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    /* HOVER: funde suavemente a Boton_1_M (se dispara desde el wrapper, caja estable) */
    .btn-participa::after {    /* M (Boton_1_M) */
      background-image: url("../Boton_1_M.svg");
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .btn-wrap:hover .btn-participa::after { opacity: 1; }
    /* PRESSED: ocultar normal y M → se ve solo Boton_1_Pres (la base) + se HUNDE */
    .btn-participa.is-pressed::before { opacity: 0; transition: none; }
    .btn-wrap:hover .btn-participa.is-pressed::after { opacity: 0; transition: none; }
    .btn-participa.is-pressed {
      transform: translateY(4px) scale(0.97);
    }

    /* ===== Página 1: elementos sobre el video ===== */
    /* Animaciones de entrada (fill-mode backwards: no dejan estilos pegados
       después, así el hover/pressed del botón sigue funcionando) */
    @keyframes p1-in {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes p1-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes p1-in-btn {   /* conserva el centrado translateX(-50%) del botón */
      from { opacity: 0; transform: translateX(-50%) translateY(30px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Bloque de textos: medidas de ../01/Texto/Fondo_Texto (1920×1080), donde el
       bloque ocupa x 1074–1822, y 618–1010 (borde inferior al 6.48%); aquí va subido un
       5% más. Se ancla abajo a la derecha para que no se salga de pantalla en formatos
       más anchos; cada texto usa sus px dentro del bloque. */
    .p1-textos {
      position: fixed; z-index: 2; pointer-events: none;
      right: 5.1%; bottom: 11.48%; width: 38.96%;
      aspect-ratio: 748 / 392;
    }
    .p1-textos > div {
      position: absolute;
      left:  calc(var(--x) / 748 * 100%);
      top:   calc(var(--y) / 392 * 100%);
      width: calc(var(--w) / 748 * 100%);
    }
    .p1-cambia { animation: p1-in 0.7s ease-out 0.30s backwards; }
    .p1-puntos { animation: p1-in 0.7s ease-out 0.45s backwards; }
    .p1-por    { animation: p1-in 0.7s ease-out 0.55s backwards; }
    .p1-lucas  { animation: p1-in 0.7s ease-out 0.65s backwards; }
    .p1-textos img { display: block; width: 100%; height: auto; }

    /* Parallax: se mueve con el mouse (offset lo aplica el JS) */
    .parallax {
      width: 100%;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); /* más suave/amortiguado */
      will-change: transform;
    }

    /* Dinero: pulso suave (agranda/achica) */
    .dinero-pulse {
      position: relative; width: 100%;
      animation: dinero-pulse 2.6s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes dinero-pulse {
      0%, 100% { transform: scale(1);    }
      50%      { transform: scale(1.06); }
    }

    /* Dinero: brillo que recorre de izquierda a derecha (enmascarado al número) */
    .shine {
      position: absolute; inset: 0; overflow: hidden; pointer-events: none;
      -webkit-mask: url("../01/Texto/Lucas.svg") center / contain no-repeat;
              mask: url("../01/Texto/Lucas.svg") center / contain no-repeat;
    }
    .shine::before {
      content: ""; position: absolute; top: -25%; left: -75%;
      width: 45%; height: 150%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
      transform: skewX(-18deg);
      animation: dinero-shine 3.4s ease-in-out infinite;
    }
    @keyframes dinero-shine {
      0%   { left: -75%; }
      55%  { left: 135%; }
      100% { left: 135%; }
    }

    /* Footer inferior izquierdo: redes + links legales */
    .p1-footer {
      position: fixed; left: 3%; bottom: 3.5%; z-index: 2;
      display: flex; flex-direction: column; gap: 10px;
      animation: p1-in 0.7s ease-out 0.85s 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; }

    /* --- Logo Limón Soda (esquina superior derecha) --- */
    .logo-ls {
      position: fixed;
      top: 3%;
      left: 1%;
      width: 14%;          /* TAMAÑO en % del ancho de pantalla (ajustable) */
      z-index: 4;
      cursor: pointer;     /* enlace al inicio */
      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); }

    /* ===================== MOBILE (portrait) ===================== */
    @media (max-width: 768px) {
      /* El escenario mobile (1080×1920) cubre la pantalla como object-fit: cover, centrado.
         --sw y --sh son su ancho y alto en pantalla; el logo, los textos, el botón y el pie
         se ubican con px de ese lienzo (X → 50% + (X/1080 − 0.5)·--sw; Y igual con 1920 y
         --sh) para que siempre calcen con los personajes */
      body { --vh: 1vh;
             --sw: max(100vw, var(--vh) * 100 * 9 / 16);
             --sh: max(var(--vh) * 100, 100vw * 16 / 9); }
      @supports (height: 1dvh) { body { --vh: 1dvh; } }   /* alto visible real en mobile */
      .bg-stage { display: none; }                   /* la composición horizontal es solo para desktop */
      .bg-stage-m { display: block; position: absolute; left: 50%; top: 50%;
                    width: var(--sw); height: var(--sh); transform: translate(-50%, -50%); }

      /* Logo: arriba a la derecha, junto a "CAMBIA TUS" (que termina en x 516) y sobre "PUNTOS PAES"
         (que parte en y 241); su borde derecho calza con el del bloque de textos (lienzo x 601–951, y 22–219) */
      .logo-ls  { left: calc(50% + (601 / 1080 - 0.5) * var(--sw)); right: auto; margin: 0;
                  top: calc(50% + (22 / 1920 - 0.5) * var(--sh)); width: calc(350 / 1080 * var(--sw)); }

      /* Bloque de textos: el mismo de desktop a escala 1.11 (lienzo x 121, y 162, 830 px de ancho) */
      .p1-textos { left: calc(50% + (121 / 1080 - 0.5) * var(--sw)); right: auto; bottom: auto; margin: 0;
                   top: calc(50% + (162 / 1920 - 0.5) * var(--sh)); width: calc(830.28 / 1080 * var(--sw)); }

      /* Botón participa: centro en x 560, arriba en y 1605, 527 px de ancho. En mobile se ve
         amarillo (Boton_1_M) como en Fondo_Mobile; al presionar sigue mostrando Boton_1_P */
      .btn-wrap { left: calc(50% + (560 / 1080 - 0.5) * var(--sw)); bottom: auto;
                  top: calc(50% + (1605 / 1920 - 0.5) * var(--sh)); width: calc(526.9 / 1080 * var(--sw)); }
      .btn-participa::before { background-image: url("../Boton_1_M.svg"); }

      /* Footer centrado bajo el botón, terminando en y 1905 del lienzo */
      .p1-footer { left: 0; right: 0; bottom: calc(50% - (1905 / 1920 - 0.5) * var(--sh));
                   gap: 8px; 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; }
    }