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

    /* --- Video de fondo a pantalla completa --- */
    .bg-video {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;   /* cubre toda la pantalla sin deformar */
      z-index: 0;
    }

    /* Botón de mute/unmute */
    .sound-toggle {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 3;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(8px);
      color: #fff;
      font-size: 1.3rem;
      cursor: pointer;
      transition: background 0.2s ease;
      animation: p1-fade 0.6s ease-out 1s backwards;
    }
    .sound-toggle:hover { background: rgba(255,255,255,0.3); }

    /* --- 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(320px, 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("../img/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("../img/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("../img/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); }
    }

    .p1-fondo {           /* panel oscuro, mitad derecha, alto completo */
      position: fixed; top: 0; right: 0; height: 100%; width: auto;
      z-index: 1; pointer-events: none;
      animation: p1-fade 0.8s ease-out backwards;
    }
    .p1-sabatico { position: fixed; z-index: 2; pointer-events: none;
      top: 17%; right: 6%; width: 32.3%;
      animation: p1-in 0.7s ease-out 0.30s backwards; }
    .p1-ganar    { position: fixed; z-index: 2; pointer-events: none;
      top: 48%; right: 6%; width: 13.5%;
      animation: p1-in 0.7s ease-out 0.45s backwards; }
    .p1-dinero   { position: fixed; z-index: 2; pointer-events: none;
      top: 53.5%; right: 6%; width: 30.8%;
      animation: p1-in 0.7s ease-out 0.55s backwards; }
    .p1-almes    { position: fixed; z-index: 2; pointer-events: none;
      top: 68%; right: 6%; width: 17.3%;
      animation: p1-in 0.7s ease-out 0.65s backwards; }

    /* imágenes dentro de los wrappers */
    .p1-sabatico img, .p1-ganar img, .p1-dinero img, .p1-almes 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("../img/dinero.svg") center / contain no-repeat;
              mask: url("../img/dinero.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) {
      .bg-video { object-fit: cover; object-position: center; }  /* mobile: video a pantalla completa, centrado */
      .p1-fondo { display: none; }                 /* panel oscuro derecho: solo landscape */
      .logo-ls  { top: 2%; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 42%; }

      /* Llamados (textos) apilados, centrados y agrupados junto al botón */
      .p1-sabatico, .p1-ganar, .p1-dinero, .p1-almes {
        left: 0; right: 0; margin-left: auto; margin-right: auto;   /* centra sin transform */
      }
      .p1-sabatico { top: 13%; width: 82vw; }
      .p1-ganar    { top: 31%; width: 40vw; }
      .p1-dinero   { top: 36%; width: 78vw; }
      .p1-almes    { top: 45%; width: 54vw; }

      /* Botón participa: 20% más pequeño */
      .btn-wrap { top: 52%; bottom: auto; width: 67vw; }

      /* Footer centrado */
      .p1-footer { left: 0; right: 0; bottom: 2.5%; 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; }

      .sound-toggle { width: 46px; height: 46px; bottom: 16px; right: 16px; }
    }