/* Sistema visual del embudo (f2): variables y piezas compartidas por las pantallas del
   recorrido (portada, taquilla, correo, Epic, prueba y oferta). Cada pantalla tiene su
   hoja f2-<pantalla>.css; aquí solo va lo común. Todo usa propiedades lógicas para que
   el árabe (dir=rtl) se refleje solo, y respeta prefers-reduced-motion al final. */
:root{
  --f2-ink:#050b1a;--f2-deep:#07112a;--f2-panel:rgba(12,22,44,.78);--f2-panel-solid:#0d1830;--f2-raised:#14233f;
  --f2-stroke:rgba(141,229,255,.16);--f2-stroke-strong:rgba(141,229,255,.42);
  --f2-cyan:#8de5ff;--f2-cyan-hot:#38d6ff;--f2-blue:#3778ee;--f2-violet:#9b7bff;
  --f2-gold:#ffd166;--f2-gold-hot:#ffb020;--f2-mint:#79e0b7;--f2-rose:#ff8fa3;
  --f2-text:#f3f7ff;--f2-text-soft:#c6d3ea;--f2-text-dim:#93a7c6;
  --f2-radius-s:12px;--f2-radius-m:18px;--f2-radius-l:26px;--f2-radius-pill:999px;
  --f2-shadow-card:0 18px 50px rgba(2,8,23,.55);
  --f2-glow-cyan:0 0 0 1px rgba(141,229,255,.38),0 10px 34px rgba(56,214,255,.34);
  --f2-glow-gold:0 0 0 1px rgba(255,209,102,.45),0 10px 34px rgba(255,176,32,.36);
  --f2-ease:cubic-bezier(.2,.8,.2,1);--f2-fast:160ms;--f2-med:320ms;--f2-slow:640ms;
  --f2-safe-b:env(safe-area-inset-bottom,0px);
}

/* Tarjeta de vidrio */
.f2-card{background:var(--f2-panel);border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-l);box-shadow:var(--f2-shadow-card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* Botón principal: se suma a .btn; un solo CTA dominante por pantalla */
.f2-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:58px;padding-inline:26px;border:0;border-radius:16px;background:linear-gradient(180deg,#c3f3ff 0%,#6fdfff 55%,#45cdf5 100%);color:#04213a;font-weight:800;font-size:1.06rem;letter-spacing:.01em;text-decoration:none;box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;cursor:pointer;transition:transform var(--f2-fast) var(--f2-ease),box-shadow var(--f2-fast) var(--f2-ease),filter var(--f2-fast) var(--f2-ease);-webkit-tap-highlight-color:transparent}
.f2-cta::after{content:"";position:absolute;inset-block:0;inset-inline-start:-60%;inline-size:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:f2-shine 4.2s var(--f2-ease) infinite;pointer-events:none}
.f2-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.f2-cta:active{transform:translateY(1px) scale(.985)}
.f2-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.f2-cta[disabled],.f2-cta[aria-disabled="true"]{filter:saturate(.35) brightness(.75);box-shadow:none;cursor:not-allowed}
.f2-cta[disabled]::after,.f2-cta[aria-disabled="true"]::after{display:none}
.f2-cta--gold{background:linear-gradient(180deg,#ffe9a8 0%,#ffd166 50%,#ffb020 100%);color:#3a2300;box-shadow:var(--f2-glow-gold),inset 0 1px 0 rgba(255,255,255,.7)}
.f2-cta--block{display:flex;inline-size:100%}

/* Fichas y fila de confianza */
.f2-chip{display:inline-flex;align-items:center;gap:6px;min-block-size:30px;padding:4px 12px;border-radius:var(--f2-radius-pill);border:1px solid var(--f2-stroke);background:rgba(13,24,48,.72);color:var(--f2-text-soft);font-size:.8rem;font-weight:700;white-space:nowrap}
.f2-chip--ok{border-color:rgba(121,224,183,.45);color:var(--f2-mint)}
.f2-chip--gold{border-color:rgba(255,209,102,.5);color:var(--f2-gold)}
.f2-trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;padding:0;list-style:none}

/* Mascota */
.f2-mascot{display:block;inline-size:auto;block-size:var(--f2-mascot-h,140px);max-inline-size:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(2,8,23,.55));animation:f2-float 4.6s ease-in-out infinite;pointer-events:none;user-select:none}
.f2-mascot--still{animation:none}
/* Bocadillo junto a la mascota: una idea por bocadillo, frase corta */
.f2-bubble{position:relative;padding:12px 14px;border-radius:16px;border:1px solid var(--f2-stroke-strong);background:rgba(15,30,58,.92);color:var(--f2-text);font-size:.95rem;font-weight:600;line-height:1.35}
.f2-guide{display:flex;align-items:flex-end;gap:10px}
.f2-guide>.f2-mascot{flex:0 0 auto}
.f2-guide>.f2-bubble{flex:1 1 auto;margin-block-end:18px}

/* Escenario: fondo con foco, podio y hueco para el personaje */
.f2-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--f2-radius-l);background:var(--f2-deep) center bottom/cover no-repeat;border:1px solid var(--f2-stroke)}
.f2-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 46% at 50% 22%,rgba(141,229,255,.28),transparent 70%);animation:f2-spot 5.5s ease-in-out infinite alternate}
.f2-stage::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:34%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(5,11,26,.78))}

/* Progreso por fases (crear → conectar → jugar) */
.f2-phases{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0;padding:0;list-style:none}
.f2-phase{display:grid;gap:6px;color:var(--f2-text-dim);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.f2-phase::before{content:"";block-size:6px;border-radius:var(--f2-radius-pill);background:rgba(141,229,255,.14)}
.f2-phase[data-state="done"]{color:var(--f2-mint)}
.f2-phase[data-state="done"]::before{background:var(--f2-mint)}
.f2-phase[data-state="current"]{color:var(--f2-text)}
.f2-phase[data-state="current"]::before{background:linear-gradient(90deg,var(--f2-cyan-hot) var(--f2-phase-fill,50%),rgba(141,229,255,.2) var(--f2-phase-fill,50%))}

/* Barra fija inferior para el CTA en móvil */
.f2-sticky{position:sticky;inset-block-end:0;z-index:30;display:grid;gap:8px;margin-inline:calc(var(--f2-sticky-bleed,0px)*-1);padding:12px 14px calc(12px + var(--f2-safe-b));background:linear-gradient(180deg,rgba(5,11,26,0),rgba(5,11,26,.92) 32%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Confeti (solo CSS; BotF2.confetti crea las piezas) */
.f2-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.f2-confetti>i{position:absolute;inset-block-start:-12px;inset-inline-start:var(--x,50%);inline-size:8px;block-size:14px;border-radius:2px;background:var(--c,var(--f2-gold));opacity:0;animation:f2-fall var(--d,1.8s) var(--f2-ease) var(--t,0s) 1 forwards}

/* Hueco de la tarjeta de «tu bot»: lo rellena la taquilla; vacío no ocupa sitio */
[data-f2-botcard]:empty{display:none}

/* Entrada de bloques */
.f2-rise{animation:f2-rise var(--f2-med) var(--f2-ease) both;animation-delay:var(--f2-delay,0ms)}

@keyframes f2-shine{0%,62%{inset-inline-start:-60%}100%{inset-inline-start:130%}}
@keyframes f2-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes f2-spot{from{opacity:.7}to{opacity:1}}
@keyframes f2-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes f2-fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(var(--y,420px)) rotate(var(--r,540deg))}}
@keyframes f2-pulse{0%{box-shadow:0 0 0 0 rgba(141,229,255,.5)}100%{box-shadow:0 0 0 16px rgba(141,229,255,0)}}

@media (prefers-reduced-motion:reduce){
  .f2-cta::after,.f2-mascot,.f2-stage::before,.f2-rise,.f2-confetti>i{animation:none!important}
  .f2-cta,.f2-cta:hover,.f2-cta:active{transition:none;transform:none}
  .f2-confetti{display:none}
}