/* =====================================================================
   FROGS-PASS.CSS — la página del Frog's Pass
   =====================================================================
   Carlos (2026-07-28): "Frog's Pass hazlo como lo que ocultamos del
   proyecto anterior, el de la hamburguesa".

   Es la MISMA pieza que se ocultó en el home el 2026-07-22: la hamburguesa
   y el trago que se ARMAN con el scroll — 67 fotogramas WebP dibujados en
   un <canvas>, con el texto en HTML encima (⛔ nunca con <video>, ley D).
   El CSS y el JS salen de ahí tal cual; sólo se han sacado a archivo propio
   y se han cambiado las rutas a absolutas (/assets/…), como pide la
   arquitectura PHP.
   ===================================================================== */

.pass{position:relative;color:#fff;overflow:hidden;background:radial-gradient(120% 95% at 50% 45%, #06166a 0%, #020a44 52%, #00051e 100%);
  /* ── BANNER full-width (de lado a lado): sin tarjeta flotante, sin bordes redondeados ── */
  margin:0;border-radius:0;box-shadow:none}
.pass-frame{padding:0;background:#020a44}
.pass-inner{position:relative;z-index:2;padding:0;margin:0;max-width:none}
.pass-title{position:absolute;top:calc(clamp(10px,3vh,34px) + 100px);left:0;right:0;z-index:6;display:flex;justify-content:center;align-items:flex-start;height:clamp(32px,4.2vw,56px);margin:0;filter:drop-shadow(3px 4px 0 var(--rojo)) drop-shadow(0 5px 12px rgba(0,0,0,.28))}
.ptl{height:100%;width:auto;display:block}
/* 2026-08-02 · Carlos: "escálalo a lo alto en los dos" (sin la cabecera la
   escena abre la página y a 16:9 quedaba corta). El escenario llena el alto
   de la pantalla (el pin ancla a 40px del borde) y el fotograma se dibuja en
   COVER: llena sin deformar y recorta los lados que sobren — la hamburguesa
   vive al centro del cuadro. */
.pass-stage{position:relative;width:100%;height:calc(100svh - 40px);margin:0 auto}
.pass-col{max-width:248px;width:100%;justify-self:center;border-radius:22px;overflow:hidden;text-align:left;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 46px rgba(0,0,0,.34)}
.pcard-head{padding:15px 20px;text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.pass-col--mx .pcard-head{background:linear-gradient(135deg,#e0324a,#a3061f)}
.pass-col--usa .pcard-head{background:linear-gradient(135deg,#1a2650,#070b1c)}
/* ⚠️ 2026-07-28 · el título de la tarjeta pasó de <h3> a <h2> por la
   auditoría SEO (saltaba h1 → h3). La regla ya no depende de la etiqueta:
   así no se vuelve a romper si cambia el nivel. */
.pcard-head h2,.pcard-head h3{margin:0;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);letter-spacing:5px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.35)}
.pcard-list{list-style:none;padding:22px 22px 10px;display:flex;flex-direction:column;gap:15px}
/* 2026-08-02 · Carlos: los renglones (Appetizer…) van AL MEDIO de la tarjeta */
.pcard-list li{display:flex;align-items:center;justify-content:center;gap:12px;font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(15px,1.6vw,20px);letter-spacing:.5px;color:#fff;line-height:1.15}   /* Carlos: letra más grande */
.pcard-list svg{width:22px;height:22px;flex-shrink:0;color:var(--amarillo)}
.pcard-price{margin-top:6px;padding:16px 22px 22px;text-align:center;border-top:1px solid rgba(255,255,255,.13)}
/* 2026-08-04 · Carlos: cada tarjeta lleva su propio botón de compra, porque
   México y USA se venden en tiendas distintas. Va pegado al pie de la
   tarjeta, con el mismo aire que el precio. */
.pcard-price{padding-bottom:14px}
.pcard-btn{display:block;margin:0 22px 22px;text-align:center;text-decoration:none}
.pc-only{display:block;color:var(--amarillo);font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:3px;margin-bottom:2px}
.pc-amt{font-family:"Oswald",sans-serif;font-weight:700;color:#fff;font-size:clamp(32px,3.4vw,46px);line-height:1}
.pc-amt sup{font-size:.44em;vertical-align:.95em}
.pc-usd{font-family:"Oswald",sans-serif;font-weight:600;color:rgba(255,255,255,.82);font-size:16px;letter-spacing:1px;margin-left:4px}
.pass-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;object-fit:cover}
/* 2026-08-02 · Carlos: "los precios deben seguir a los lados en desktop".
   Las MISMAS tarjetas (buffer PHP) se imprimen sobre el lienzo Y en
   .fp-precios: aquí (escritorio) se ven las del lienzo, a los lados, y la
   sección de abajo no existe; el bloque móvil invierte el reparto. */
.pass-stage .pass-col--mx{position:absolute;left:calc(1.5% + 70px);top:calc(50% - 200px);z-index:3;margin:0}
.pass-stage .pass-col--usa{position:absolute;right:calc(1.5% + 70px);top:calc(50% - 200px);z-index:3;margin:0}
/* 2026-08-02 · Carlos: "el botón va más abajo, se monta sobre la hamburguesa".
   El bottom de 2.5%+95px era del escenario de 82svh; a pantalla completa
   pisaba el plato. Pegado al borde inferior del lienzo. */
.pass-buy{position:absolute;left:50%;bottom:calc(clamp(16px,2.5vh,28px) + 30px);transform:translateX(-50%);z-index:3;text-align:center;margin:0}   /* Carlos: "súbela 30px" */
.fp-precios{display:none}
.pass-buy .btn,.fp-precios__buy .btn{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--rojo);background:var(--amarillo);font-size:22px;height:50px;padding:0 52px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radio-btn-cuadrado);box-shadow:0 6px 0 var(--amarillo-osc),0 14px 26px rgba(0,0,0,.28);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s}
.pass-buy .btn:hover,.fp-precios__buy .btn:hover{transform:translateY(-3px);background:var(--amarillo-hover);box-shadow:0 9px 0 var(--amarillo-osc),0 20px 32px rgba(0,0,0,.32)}
.pass-buy .btn:active,.fp-precios__buy .btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--amarillo-osc),0 8px 16px rgba(0,0,0,.28)}
.pass-buy small{display:block;margin-top:14px;opacity:.82;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.fp-precios__buy{text-align:center;margin-top:clamp(24px,4vh,34px)}
.fp-precios__buy small{display:block;margin-top:14px;color:rgba(255,255,255,.85);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
/* ── lo propio de la PÁGINA (en el home vivía dentro del scroll) ───── */
.fp-cab{background:var(--azul);color:#fff;text-align:center;
  padding:clamp(96px,14vh,150px) 0 clamp(24px,4vh,44px);position:relative;overflow:hidden}
.fp-cab::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/620px auto repeat;opacity:.05}
.fp-cab__in{position:relative;z-index:1}
.fp-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:4px;font-size:13px;color:var(--amarillo);margin:0 0 10px}
.fp-sub{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.88);margin:16px auto 0;max-width:56ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.55}

/* ═══ PASOS · SLIDER (arriba de todo) ══════════════════════════════════
   2026-08-02 · Carlos: "los pasos a seguir en la parte de arriba con algún
   efecto de slider — que aprietes siguiente y venga el que viene". Una
   tarjeta a la vista sobre el azul de marca; la que sale viaja hacia un
   lado con un giro leve y la que llega entra del lado contrario ([data-dir]
   invierte el sentido cuando se navega hacia atrás). */
.fp-slider{background:var(--azul);color:#fff;text-align:center;position:relative;overflow:hidden;
  padding:clamp(96px,14vh,150px) 0 clamp(40px,6vh,64px)}
.fp-slider::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/welcome-pattern.png") center 0/620px auto repeat;opacity:.05}
.fp-slider__in{position:relative;z-index:1}
/* el rótulo de la página, heredando la sombra roja de las letras que
   vivían sobre el lienzo (Carlos: "ponle título y quítalo del efecto") */
.fp-slider__h1{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;
  font-size:clamp(42px,8vw,96px);line-height:1;margin:0 0 clamp(16px,2.5vh,24px);
  text-transform:uppercase;color:#fff;text-shadow:3px 4px 0 var(--rojo);padding:.08em 0}
.fp-slider__titulo{color:#fff;text-align:center;margin:0 0 clamp(22px,3.5vh,34px)}
.fps-viewport{position:relative;max-width:560px;margin:0 auto}
.fps-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:clamp(24px,4vh,36px) clamp(20px,3vw,44px);border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(var(--sombra-navy-rgb),.35);
  opacity:0;pointer-events:none;user-select:none;
  transform:translateX(72px) rotate(2.5deg) scale(.94);
  transition:transform .5s cubic-bezier(.22,.9,.3,1.18),opacity .38s}
.fps-card.fuera{transform:translateX(-72px) rotate(-2.5deg) scale(.94)}
.fps-viewport[data-dir="prev"] .fps-card{transform:translateX(-72px) rotate(-2.5deg) scale(.94)}
.fps-viewport[data-dir="prev"] .fps-card.fuera{transform:translateX(72px) rotate(2.5deg) scale(.94)}
.fps-card.activo{opacity:1;pointer-events:auto;transform:none}
.fps-card h3{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  color:#fff;font-size:clamp(19px,2vw,24px);margin:0 0 8px;letter-spacing:.5px}
.fps-card p{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;
  color:rgba(255,255,255,.88);font-size:15px;line-height:1.55;margin:0;max-width:40ch}
.fps-ui{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);margin-top:clamp(20px,3vh,28px)}
/* flechas y puntos: el patrón de la galería de locaciones (mínimo táctil 44px) */
.fps-nav{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s}
.fps-nav svg{width:18px;height:18px;pointer-events:none}
.fps-nav:hover{background:var(--rojo);border-color:var(--rojo);transform:scale(1.06)}
.fps-nav:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}
.fps-dots{display:flex;gap:8px}
.fps-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  position:relative;background:rgba(255,255,255,.34);transition:background .25s,width .25s}
.fps-dot::after{content:'';position:absolute;inset:-17.5px}   /* área táctil de 44px */
.fps-dot.activo{background:var(--amarillo);width:24px;border-radius:999px}
.fps-dot:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px}

/* ═══ MX y USA · precios (tras el efecto) ═════════════════════════════
   2026-08-02 · Carlos: "colócale rojo al fondo, no uses esa crema" —
   el radial rojo de la casa (el de #platillos en locaciones). */
.fp-precios{color:#fff;padding:clamp(50px,8vh,90px) 0;background-color:var(--rojo);
  background-image:radial-gradient(120% 100% at 50% 0%,#d81b3d 0%,var(--rojo) 55%,#8d0620 100%)}
.fp-precios__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,248px));
  justify-content:center;gap:clamp(20px,3vw,40px);margin-top:clamp(24px,4vh,38px)}
/* sobre el rojo la tarjeta va sólida en azul-noche, con la sombra de la casa */
.fp-precios .pass-col{background:linear-gradient(165deg,#0e2a5c,#071838);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(80,4,18,.45)}

/* el número del paso (lo usa la tarjeta del slider) */
.fp-paso__n{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 14px;background:var(--rojo);color:#fff;
  font-family:"Oswald",sans-serif;font-weight:700;font-size:22px;
  box-shadow:0 8px 20px rgba(189,8,41,.32)}

/* preguntas · MORADO: encima crema, debajo el pie rojo */
.fp-faq{background:#0a0620;color:#fff;padding:clamp(50px,8vh,90px) 0}
.fp-faq .sec-titulo{color:var(--amarillo);text-align:center;margin:0 0 clamp(22px,3vh,34px)}
.fp-faq__lista{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.fp-q{border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.04)}
.fp-q summary{cursor:pointer;list-style:none;padding:16px 20px;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.6px;font-size:14px;color:#fff}
.fp-q summary::-webkit-details-marker{display:none}
.fp-q summary::after{content:'+';font-family:"Oswald",sans-serif;font-size:22px;
  color:var(--amarillo);line-height:1;flex:0 0 auto;transition:transform .2s}
.fp-q[open] summary::after{transform:rotate(45deg)}
.fp-q summary:focus-visible{outline:3px solid var(--amarillo);outline-offset:-3px}
.fp-q p{margin:0;padding:0 20px 18px;font-family:"Museo Sans Rounded",sans-serif;
  font-weight:300;color:rgba(255,255,255,.84);font-size:15px;line-height:1.6}

@media (max-width:900px){
  /* ═══ 2026-08-01 · Carlos: "revisa mobile la de Frogs Pass" — estaba ROTA:
     la escena es una composición de ESCRITORIO (tarjetas en píxeles absolutos
     sobre un lienzo 16:9) y no tenía layout móvil: en 390px todo se apilaba
     — precios encimados, botón sobre la hamburguesa, texto ilegible.
     En móvil la escena se DESPLIEGA EN VERTICAL y en flujo:
       título → lienzo (la hamburguesa se arma con el scroll, igual)
       → tarjeta MX → tarjeta USA → botón de compra.
     El escritorio no se toca: su composición absoluta sigue intacta. */
  .pass-inner{display:flex;flex-direction:column;align-items:center;
    padding:18px 0 30px;gap:14px}
  /* las letras del rótulo son PNG a tamaño natural: sin alto fijo medían
     400px apiladas. Contenidas a la franja de siempre. */
  .pass-title{position:static;height:auto;filter:drop-shadow(2px 3px 0 var(--rojo));
    flex-wrap:nowrap;justify-content:center}
  .pass-title .ptl{height:30px}   /* la letra manda: 10 letras caben en 390px */
  /* ⚠️ las tarjetas y el botón viven DENTRO del stage y el canvas absoluto
     (z-index:1) las tapaba. El stage pasa a COLUMNA: el lienzo vuelve al
     flujo con su 16:9 y las piezas caen debajo, cada una entera. */
  .pass-stage{display:flex;flex-direction:column;align-items:center;gap:14px;
    aspect-ratio:auto;max-height:none;height:auto}
  /* 2026-08-02 · Carlos: a 16:9 en 390px el lienzo medía ~220px ("no se ve
     bien"), y a 56svh pidió MÁS: 78svh — casi pantalla completa bajo la
     app-nav. El dibujo va en COVER: recorta los lados sin deformar, con la
     hamburguesa centrada. */
  .pass-canvas{position:static;width:100%;height:78svh;aspect-ratio:auto;object-fit:cover;order:1}
  /* Carlos: "¿por qué tiene un margen superior e inferior el efecto?" — era
     el relleno del contenedor, herencia de cuando el título y las tarjetas
     vivían dentro. El lienzo va de corte a corte. */
  .pass-inner{padding:0;gap:0}
  /* en móvil las tarjetas van ABAJO (.fp-precios): las del lienzo no existen */
  .pass-stage .pass-col,.pass-stage .pass-buy{display:none}
  .fp-precios{display:block}

  /* pasos-slider y precios en pantalla chica */
  .fp-slider{padding:clamp(88px,13vh,120px) 0 36px}
  .fps-card p{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .fps-nav{width:44px;height:44px}               /* mínimo táctil del sistema */
  /* precios como el carrusel de combos móvil: tarjeta ancha, la siguiente
     asomada, snap al centro y puntitos (Carlos 2026-08-02) */
  .fp-precios__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding:4px 24px 6px;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;scrollbar-width:none;justify-content:flex-start}
  .fp-precios__grid::-webkit-scrollbar{display:none}
  .fp-precios .pass-col{flex:0 0 86vw;max-width:340px;margin:0;scroll-snap-align:center}
  .fp-precios .pcard-list li{font-size:17px}   /* Carlos: letra más grande — la tarjeta móvil es ancha y aguanta */
  .fp-precios__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .fp-precios__dots .fps-dot{background:rgba(255,255,255,.4)}   /* sobre rojo */
  .fp-precios__dots .fps-dot.activo{background:var(--amarillo)}
  .fp-precios__buy .btn{font-size:18px;height:48px;padding:0 36px}

  .fp-cab{padding:clamp(88px,13vh,120px) 0 22px}
  .fp-sub{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .fp-paso p{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
  .fp-q p{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)}
}