@charset "UTF-8";
/* ==========================================================================
   LaLigaIPTV — Sistema de diseño «Cinema Light»
   Interfaz clara y premium · tarjetas nítidas · acento incandescente
   Un único archivo: tokens, base, componentes y responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Tipografía */
  --f-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  /* Duración de las transiciones de hover. Un solo sitio que tocar. */
  --t-hover: .5s;

  --f-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Superficies claras */
  --s-000: #ffffff;
  --s-050: #fafafc;
  --s-100: #f4f4f9;
  --s-200: #ededf4;
  --s-300: #e3e3ee;
  --s-400: #d5d5e2;

  /* Tarjetas y filos */
  --card: #ffffff;
  --card-2: #fafafc;
  --edge: rgba(16, 16, 38, .10);
  --edge-2: rgba(16, 16, 38, .19);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);

  /* Texto */
  --t-hi: #0d0d1a;
  --t-md: rgba(13, 13, 26, .72);
  --t-lo: rgba(13, 13, 26, .60);

  /* Acento incandescente */
  --a-400: #ff8a3d;
  --a-500: #ff5a36;
  --a-600: #ee3a24;
  --a-700: #d81f36;
  --a-ink: #c2361c;
  --a-soft: rgba(255, 90, 54, .10);
  --a-line: rgba(255, 90, 54, .32);

  /* Señales */
  --live: #ef2b3a;
  --gold: #b4791a;
  --gold-soft: rgba(255, 176, 32, .13);
  --gold-line: rgba(196, 132, 20, .30);
  --wa: #25d366;
  --wa-dark: #1cb356;
  --ok: #12b981;

  /* Degradados */
  --g-a: linear-gradient(115deg, #ff8a3d 0%, #ff5a36 45%, #f5322f 100%);
  --g-a-soft: linear-gradient(115deg, rgba(255, 138, 61, .14), rgba(245, 50, 47, .08));
  --g-text: linear-gradient(100deg, #ff7a2f 0%, #f5322f 55%, #e01f5a 100%);
  --g-card: linear-gradient(165deg, #ffffff 0%, #fbfbfe 100%);
  --g-scrim: linear-gradient(to top, #ffffff 5%, rgba(255, 255, 255, .93) 34%, rgba(255, 255, 255, .74) 64%, rgba(255, 255, 255, .90) 100%);

  /* Radios amplios */
  --r-sm: 10px;
  --r: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Sombras y resplandores */
  --sh-1: 0 1px 2px rgba(16, 16, 38, .05), 0 6px 18px -12px rgba(16, 16, 38, .16);
  --sh-2: 0 4px 10px -4px rgba(16, 16, 38, .08), 0 20px 44px -22px rgba(16, 16, 38, .30);
  --sh-3: 0 10px 24px -10px rgba(16, 16, 38, .12), 0 40px 90px -40px rgba(16, 16, 38, .40);
  --glow-a: 0 10px 28px -12px rgba(245, 60, 45, .58);
  --glow-a-lg: 0 18px 42px -14px rgba(245, 60, 45, .66);

  /* Retícula */
  --shell: 1280px;
  --pad: 20px;
  --nav-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 34px);
  background: var(--s-000);
}

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--t-md);
  background: var(--s-000);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `display` de cualquier regla propia gana al `[hidden]` del navegador:
   sin esto, los paneles ocultos del conmutador seguían viéndose. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--f-display); color: var(--t-hi);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.035em;
}
strong, b { color: var(--t-hi); font-weight: 700; }

:focus-visible { outline: 2px solid var(--a-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--a-500); color: #fff; }

@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--s-100); }
  ::-webkit-scrollbar-thumb { background: var(--s-400); border-radius: 99px; border: 3px solid var(--s-100); }
  ::-webkit-scrollbar-thumb:hover { background: #bcbccd; }
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 400;
  background: var(--a-500); color: #fff; padding: 12px 20px;
  border-radius: var(--r); font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Retícula
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.shell--mid { max-width: 900px; }

.sec { position: relative; padding-block: 56px; }
@media (min-width: 700px) { .sec { padding-block: 76px; } }
@media (min-width: 1100px) { .sec { padding-block: 96px; } }
.sec--tight { padding-block: 40px; }
@media (min-width: 1100px) { .sec--tight { padding-block: 60px; } }

/* Bandas tintadas: dan ritmo alternando con el blanco puro. */
#ventajas, #deportes, #como-funciona, #opiniones {
  background: var(--s-050);
  border-block: 1px solid var(--edge);
}

/* Resplandores de fondo */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aura i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .75; }
.aura .a1 { width: 540px; height: 540px; top: -240px; right: -170px; background: radial-gradient(circle, rgba(255,138,61,.22), transparent 66%); }
.aura .a2 { width: 460px; height: 460px; bottom: -230px; left: -190px; background: radial-gradient(circle, rgba(224,31,90,.14), transparent 66%); }
.z { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   4. Tipografía de composición
   -------------------------------------------------------------------------- */
.t1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.0; letter-spacing: -0.045em; }
.t2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.04em; }
.t3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 1.6rem); line-height: 1.18; letter-spacing: -0.03em; }
.t4 { font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.32; letter-spacing: -0.02em; }

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.66; color: var(--t-md); }
.p { font-size: .9688rem; line-height: 1.72; color: var(--t-md); }
.p + .p { margin-top: 14px; }
.sm { font-size: .875rem; line-height: 1.6; }
.xs { font-size: .8125rem; line-height: 1.5; }
.lo { color: var(--t-lo); }
.hi { color: var(--t-hi); }
.mid { text-align: center; }

.grad {
  background: var(--g-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Rótulo de sección */
.kick {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--a-ink);
}
.kick::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-500); box-shadow: 0 0 10px rgba(255,90,54,.7); flex: none;
}

/* Cabecera de bloque */
.blockhead { display: grid; gap: 18px; }
@media (min-width: 860px) {
  .blockhead { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
}
.blockhead__t { margin-top: 16px; }
.blockhead__d { margin-top: 14px; max-width: 52ch; }

/* --------------------------------------------------------------------------
   5. Iconos
   -------------------------------------------------------------------------- */
.i {
  width: 1em; height: 1em; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.13em;
}

.pod {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--r); font-size: 21px;
  background: var(--a-soft); border: 1px solid var(--a-line);
  color: var(--a-600);
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
}
.pod--hot { background: var(--g-a); border-color: transparent; color: #fff; box-shadow: var(--glow-a); }
.pod--sm { width: 38px; height: 38px; border-radius: var(--r-sm); font-size: 17px; }

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding-inline: 26px; border-radius: var(--r);
  font-family: var(--f-body); font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--t-hover) cubic-bezier(.2,.8,.3,1), box-shadow var(--t-hover), background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
}
.btn .i { font-size: 18px; }
.btn:active { transform: translateY(1px) scale(.99); transition-duration: .08s; }

.btn--hot { background: var(--g-a); color: #fff; box-shadow: var(--glow-a); }
.btn--hot:hover { transform: translateY(-2px); box-shadow: var(--glow-a-lg); filter: saturate(1.08); }

.btn--glass {
  background: var(--card); color: var(--t-hi);
  border: 1px solid var(--edge-2); box-shadow: var(--sh-1);
}
.btn--glass:hover { transform: translateY(-2px); border-color: var(--t-hi); box-shadow: var(--sh-2); }

.btn--wa { background: var(--wa); color: #06210f; box-shadow: 0 12px 30px -14px rgba(37,211,102,.75); }
.btn--wa:hover { transform: translateY(-2px); background: var(--wa-dark); color: #04170b; }

.btn--light { background: var(--t-hi); color: #fff; }
.btn--light:hover { transform: translateY(-2px); background: #1e1e33; box-shadow: var(--sh-2); }

.btn--sm { height: 42px; padding-inline: 18px; font-size: .875rem; border-radius: var(--r-sm); }
.btn--lg { height: 58px; padding-inline: 32px; font-size: 1rem; border-radius: var(--r-md); }
.btn--full { width: 100%; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 700; color: var(--t-hi);
  transition: color var(--t-hover), gap var(--t-hover);
}
.tlink .i { font-size: 16px; color: var(--a-600); transition: transform var(--t-hover); }
.tlink:hover { color: var(--a-ink); gap: 12px; }

.ilink {
  color: var(--a-ink); font-weight: 600;
  border-bottom: 1px solid var(--a-line);
  transition: color var(--t-hover), border-color var(--t-hover);
}
.ilink:hover { color: var(--a-ink); border-color: currentColor; }

/* --------------------------------------------------------------------------
   7. Tarjetas, píldoras y señales
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--g-card);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.glass--flat { box-shadow: none; }
.glass--hover { transition: transform var(--t-hover) cubic-bezier(.2,.8,.3,1), border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover); }
.glass--hover:hover {
  transform: translateY(-5px); border-color: var(--edge-2); box-shadow: var(--sh-2);
}
.glass--hover:hover .pod { background: var(--g-a); border-color: transparent; color: #fff; box-shadow: var(--glow-a); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 700; letter-spacing: -0.005em;
  background: var(--card); border: 1px solid var(--edge);
  color: var(--t-hi); box-shadow: var(--sh-1);
}
.pill .i { font-size: 15px; color: var(--a-600); }
.pill--hot { background: var(--a-soft); border-color: var(--a-line); color: var(--a-ink); }
.pill--hot .i { color: var(--a-600); }
.pill--gold { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }
.pill--gold .i { color: var(--gold); }
.pill--solid { background: var(--g-a); border-color: transparent; color: #fff; box-shadow: var(--glow-a); }
.pill--solid .i { color: #fff; }

.onair {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(239,43,58,.09); border: 1px solid rgba(239,43,58,.30);
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #c81d2b;
}
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
.dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--live);
  animation: throb 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes throb { 70%, 100% { transform: scale(2.8); opacity: 0; } }

/* --------------------------------------------------------------------------
   8. Reveals
   -------------------------------------------------------------------------- */
/* Se anima `translate` (propiedad independiente) y no `transform`: así los
   desplazamientos de hover y de composición siguen funcionando. */
.js [data-reveal] {
  opacity: 0; translate: 0 16px;
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), translate .7s cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; translate: none; }

/* El bloque de arriba usa `transition` en forma abreviada y con más
   especificidad (0,2,0) que `.glass--hover` o `.tier` (0,1,0), así que
   borraba su transición de hover: las tarjetas que además se revelan al
   entrar en pantalla hacían el realce de golpe, sin suavizado.

   Aquí se declaran las dos cosas juntas. Los conjuntos de propiedades son
   disjuntos —el revelado anima `opacity` y `translate`; el hover anima
   `transform`, bordes, sombra y fondo— y el retardo escalonado se aplica por
   propiedad, solo a las del revelado: si se aplicara a todas, pasar el ratón
   por una tarjeta con `--d: 350ms` esperaría ese tercio de segundo antes de
   reaccionar. */
.js .glass--hover[data-reveal],
.js .tier[data-reveal] {
  transition:
    opacity .7s cubic-bezier(.2,.8,.3,1) var(--d, 0ms),
    translate .7s cubic-bezier(.2,.8,.3,1) var(--d, 0ms),
    transform var(--t-hover) cubic-bezier(.2,.8,.3,1),
    border-color var(--t-hover),
    box-shadow var(--t-hover),
    background var(--t-hover);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .strip__track, .vrail__track, .dot::after, .wall { animation: none !important; }
  /* Con la animación detenida el contenido quedaría fuera de alcance:
     la cinta pasa a poder desplazarse a mano. */
  .strip { overflow-x: auto; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   9. Navegación: isla flotante
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset-inline: 0; top: 14px; z-index: 200;
  padding-inline: var(--pad);
  transition: top .35s cubic-bezier(.2,.8,.3,1);
}
.nav__in {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--shell); margin-inline: auto;
  height: var(--nav-h); padding: 0 12px 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--edge);
  box-shadow: var(--sheen), var(--sh-1);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.nav.is-stuck .nav__in { background: rgba(255, 255, 255, .96); border-color: var(--edge-2); box-shadow: var(--sheen), var(--sh-2); }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand__n {
  font-family: var(--f-display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: -0.04em; color: var(--t-hi); line-height: 1;
}
.brand__k {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--a-ink); margin-top: 3px;
}

.nav__links { display: none; align-items: center; gap: 2px; margin-inline: auto; }
@media (min-width: 1060px) { .nav__links { display: flex; } }
.nav__links a {
  position: relative; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: .9062rem; font-weight: 600; color: var(--t-md);
  transition: color var(--t-hover), background var(--t-hover);
}
.nav__links a:hover { color: var(--t-hi); background: var(--s-100); }
.nav__links a.on { color: var(--t-hi); background: var(--s-100); }
.nav__links a.on::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px;
  border-radius: 2px; background: var(--g-a); transform: translateX(-50%);
}

.nav__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1060px) { .nav__end { margin-left: 0; } }
.nav__wa { display: none; }
@media (min-width: 640px) { .nav__wa { display: inline-flex; } }
.nav__cta { display: none; }
@media (min-width: 420px) { .nav__cta { display: inline-flex; } }

.iconbtn {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: var(--r-pill); font-size: 19px;
  background: var(--s-100); border: 1px solid var(--edge); color: var(--t-hi);
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.iconbtn:hover { background: var(--s-200); border-color: var(--edge-2); }
@media (min-width: 1060px) { .burger { display: none; } }

/* Panel móvil: sube desde abajo */
.sheet {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
}
.sheet__scrim {
  position: absolute; inset: 0; background: rgba(13, 13, 26, .34);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .35s;
}
.sheet__panel {
  position: relative; margin: 12px; padding: 12px 20px 24px;
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--edge);
  box-shadow: var(--sh-3);
  transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.85,.3,1);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.sheet.is-open { pointer-events: auto; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: none; }
body.locked { overflow: hidden; }

.sheet__grab { width: 42px; height: 4px; border-radius: 99px; background: var(--s-300); margin: 0 auto 18px; }
.sheet__nav { display: grid; }
.sheet__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 4px; border-bottom: 1px solid var(--edge);
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--t-hi);
  transition: color var(--t-hover), padding-left var(--t-hover);
}
.sheet__nav a:hover { color: var(--a-ink); padding-left: 8px; }
.sheet__nav a .i { font-size: 17px; color: var(--t-lo); }
.sheet__cta { margin-top: 22px; display: grid; gap: 10px; }
.sheet__note { margin-top: 16px; text-align: center; font-size: .8125rem; color: var(--t-lo); }

/* --------------------------------------------------------------------------
   10. Escenario (hero)
   -------------------------------------------------------------------------- */
.stage {
  position: relative; overflow: hidden;
  min-height: 600px;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 56px); padding-bottom: 52px;
  background: var(--s-050);
}
@media (min-width: 900px) { .stage { min-height: 700px; padding-bottom: 64px; } }
@media (min-width: 1400px) { .stage { min-height: 760px; } }

.wall {
  position: absolute; inset: -6% -2% -2%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  z-index: 0; opacity: .30;
  transform: rotate(-4deg) scale(1.14);
  animation: drift 46s ease-in-out infinite alternate;
}
@media (min-width: 900px) { .wall { grid-template-columns: repeat(9, 1fr); } }
@keyframes drift { to { transform: rotate(-4deg) scale(1.14) translateY(-3%); } }
.wall img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px;
  filter: saturate(1.05);
}
.wall__scrim { position: absolute; inset: 0; z-index: 1; background: var(--g-scrim); }
.wall__vig {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 78% 62% at 22% 62%, rgba(255,255,255,.94), rgba(255,255,255,.28) 72%);
}
/* En móvil el texto ocupa todo el ancho: el muro se atenúa para no competir. */
@media (max-width: 1023px) {
  .wall { opacity: .20; }
  .wall__vig { background: linear-gradient(to bottom, rgba(255,255,255,.72) 0%, rgba(255,255,255,.90) 45%, #ffffff 94%); }
}

.stage__grid { display: grid; gap: 40px; width: 100%; }
@media (min-width: 1024px) {
  .stage__grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: center; gap: 52px; }
}
.stage h1 { margin-top: 20px; }
.stage__d { margin-top: 20px; max-width: 44ch; }
.stage__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .stage__cta { display: grid; } }

.stage__meta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.score { display: flex; align-items: center; gap: 11px; }
.score img { height: 19px; width: auto; }
.score__n { font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; color: var(--t-hi); line-height: 1; letter-spacing: -0.04em; }
.score__l { font-size: .75rem; color: var(--t-lo); line-height: 1.3; margin-top: 3px; }
.bar { width: 1px; height: 30px; background: var(--edge-2); }

/* Mosaico del hero: tres columnas de carátulas en movimiento continuo,
   con dos tarjetas de cifras flotando sobre las esquinas. */
.mosaic { position: relative; }
.mosaic__cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  height: 380px; overflow: hidden; border-radius: var(--r-lg);
  mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}
@media (min-width: 560px) { .mosaic__cols { height: 440px; gap: 14px; } }
@media (min-width: 1024px) { .mosaic__cols { height: 470px; } }
@media (min-width: 1300px) { .mosaic__cols { height: 510px; } }

.vrail { min-width: 0; }
.vrail__track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
@media (min-width: 560px) { .vrail__track { gap: 14px; } }
.vrail--up .vrail__track { animation: vslide-up var(--dur, 54s) linear infinite; }
.vrail--down .vrail__track { animation: vslide-down var(--dur, 62s) linear infinite; }
@keyframes vslide-up { from { transform: translateY(0); } to { transform: translateY(-33.3333%); } }
@keyframes vslide-down { from { transform: translateY(-33.3333%); } to { transform: translateY(0); } }
.is-paused .vrail__track, .vrail__track.is-paused { animation-play-state: paused; }

.vrail figure {
  border-radius: var(--r); overflow: hidden; background: var(--s-200);
  box-shadow: 0 6px 18px -10px rgba(16, 16, 38, .45);
}
.vrail img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

/* Tarjetas de cifras sobre el mosaico */
.mosaic__chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px 13px 15px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--edge);
  box-shadow: 0 12px 30px -12px rgba(16, 16, 38, .30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mosaic__chip--tl { top: 26px; left: -14px; }
.mosaic__chip--br { bottom: 26px; right: -14px; }
@media (max-width: 559px) {
  .mosaic__chip { padding: 10px 14px 10px 12px; gap: 10px; }
  .mosaic__chip--tl { left: -6px; top: 16px; }
  .mosaic__chip--br { right: -6px; bottom: 16px; }
}
.mosaic__chip .i { font-size: 22px; color: var(--a-600); flex: none; }
.mosaic__n {
  font-family: var(--f-display); font-size: 1.125rem; font-weight: 800;
  letter-spacing: -0.035em; color: var(--t-hi); line-height: 1.1;
}
.mosaic__l { font-size: .8125rem; color: var(--t-lo); margin-top: 2px; }
@media (max-width: 559px) { .mosaic__n { font-size: 1rem; } .mosaic__l { font-size: .75rem; } }

/* --------------------------------------------------------------------------
   11. Cintas horizontales
   -------------------------------------------------------------------------- */
.strip {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.strip__track { display: flex; width: max-content; gap: 12px; padding-block: 6px; }
@media (min-width: 700px) { .strip__track { gap: 16px; } }
.strip--l .strip__track { animation: slide-l var(--dur, 80s) linear infinite; }
.strip--r .strip__track { animation: slide-r var(--dur, 80s) linear infinite; }
@keyframes slide-l { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes slide-r { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
.strip__track > * { flex: none; }
.is-paused .strip__track, .strip__track.is-paused { animation-play-state: paused; }

.tile {
  position: relative; width: 156px; border-radius: var(--r-md); overflow: hidden;
  background: var(--s-200); border: 1px solid var(--edge); box-shadow: var(--sh-1);
  transition: transform var(--t-hover) cubic-bezier(.2,.8,.3,1), border-color var(--t-hover), box-shadow var(--t-hover);
}
@media (min-width: 700px) { .tile { width: 184px; } }
.tile:hover { transform: translateY(-6px) scale(1.02); border-color: var(--edge-2); box-shadow: var(--sh-2); }
.tile img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.tile__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 30px 12px 12px;
  background: linear-gradient(to top, rgba(10,10,20,.92), transparent);
  font-size: .75rem; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}

/* Rejilla de logotipos */
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logos--8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 620px) { .logos--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .logos--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.logo {
  display: grid; place-items: center; aspect-ratio: 5 / 3; padding: 14px;
  border-radius: var(--r); background: var(--card); border: 1px solid var(--edge);
  overflow: hidden;
  transition: background var(--t-hover), border-color var(--t-hover), transform var(--t-hover), box-shadow var(--t-hover);
}
.logo:hover { border-color: var(--edge-2); transform: translateY(-3px); box-shadow: var(--sh-1); }
.logo img {
  max-height: 28px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .58; transition: opacity var(--t-hover), filter var(--t-hover);
}
.logo:hover img { opacity: 1; filter: none; }

/* Plataformas, competiciones y dispositivos se muestran en color. Diez de los
   veinticuatro logotipos de marca son monocromos en origen (Apple, Samsung,
   LG, Sony…), así que la rejilla mezcla color y negro: es como son esas
   marcas, no un fallo. */
.logos--color .logo img { filter: none; opacity: 1; }
.logos--color .logo:hover { border-color: var(--a-line); }

/* Los escudos son verticales: con el mismo tope de altura que los logotipos
   apaisados se veían diminutos. Se les deja crecer; los anchos siguen
   limitados por max-width. */
.logos--tall .logo img { max-height: 34px; }
@media (min-width: 620px) { .logos--tall .logo img { max-height: 44px; } }
@media (min-width: 1100px) { .logos--tall .logo img { max-height: 52px; } }

/* --------------------------------------------------------------------------
   12. Métricas
   -------------------------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.metric { padding: 24px 22px; overflow: hidden; }
@media (min-width: 700px) { .metric { padding: 28px 26px; } }
.metric::after {
  content: ''; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,138,61,.20), transparent 70%);
  opacity: 0; transition: opacity var(--t-hover); pointer-events: none;
}
.metric:hover::after { opacity: 1; }
.metric__n {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(1.85rem, 4.4vw, 2.5rem);
  background: var(--g-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.metric__l { margin-top: 12px; font-size: .875rem; font-weight: 700; color: var(--t-hi); }
.metric__d { margin-top: 6px; font-size: .8125rem; line-height: 1.5; color: var(--t-lo); }

/* --------------------------------------------------------------------------
   13. Ventajas
   -------------------------------------------------------------------------- */
.perks { display: grid; gap: 14px; }
@media (min-width: 700px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perk { padding: 28px 26px; }
.perk h3 { margin-top: 20px; font-size: 1.0625rem; }
.perk p { margin-top: 10px; font-size: .9062rem; line-height: 1.66; color: var(--t-md); }

/* --------------------------------------------------------------------------
   14. Tarifas
   -------------------------------------------------------------------------- */
.switchwrap { display: grid; justify-items: center; gap: 12px; }
.switchwrap__l {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-lo);
}
.switch {
  display: inline-flex; padding: 5px; border-radius: var(--r-pill);
  background: var(--s-100); border: 1px solid var(--edge);
}
.switch button {
  padding: 10px 24px; border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 700; color: var(--t-md);
  transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
}
.switch button:hover { color: var(--t-hi); }
.switch button[aria-selected="true"] { background: var(--g-a); color: #fff; box-shadow: var(--glow-a); }

.tiers { display: grid; gap: 18px; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }

.tier {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 32px 28px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--edge); box-shadow: var(--sh-1);
  transition: transform var(--t-hover) cubic-bezier(.2,.8,.3,1), box-shadow var(--t-hover), border-color var(--t-hover);
}
.tier:hover { transform: translateY(-5px); border-color: var(--edge-2); box-shadow: var(--sh-2); }

/* Plan recomendado: fondo con el acento del tema en su tono profundo, para que
   el texto en blanco mantenga contraste suficiente. */
.tier--star {
  background: linear-gradient(160deg, #c8391d 0%, #a2210f 58%, #8a1a12 100%);
  border-color: transparent; color: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 60px -26px rgba(200, 57, 29, .62);
}
.tier--star:hover { box-shadow: 0 32px 74px -26px rgba(200, 57, 29, .7); }

.tier__badge {
  align-self: flex-start; margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--a-soft); border: 1px solid var(--a-line); color: var(--a-ink);
}
.tier__badge .i { font-size: 14px; }
.tier--star .tier__badge {
  background: linear-gradient(120deg, #ffd166, #ffb020); border-color: transparent;
  color: #4a2a00; box-shadow: 0 8px 20px -10px rgba(255, 176, 32, .8);
}

.tier__name {
  font-family: var(--f-display); font-size: 1.125rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--t-hi);
}
.tier--star .tier__name { color: #fff; }

.tier__price {
  margin-top: 18px;
  font-family: var(--f-display); font-size: clamp(2.4rem, 4.4vw, 2.9rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1;
  background: var(--g-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tier--star .tier__price {
  background: linear-gradient(120deg, #ffe08a, #ffb020);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.tier__term { margin-top: 12px; font-size: .9062rem; color: var(--t-md); }
.tier--star .tier__term { color: rgba(255, 255, 255, .78); }
.tier__term s { color: var(--t-lo); margin-left: 6px; }
.tier--star .tier__term s { color: rgba(255, 255, 255, .55); }

.tier__dev {
  align-self: flex-start; margin-top: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--r);
  background: var(--s-100); border: 1px solid var(--edge);
  font-size: .875rem; font-weight: 600; color: var(--t-hi);
}
.tier__dev .i { font-size: 17px; color: var(--a-600); }
.tier--star .tier__dev {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff;
}
.tier--star .tier__dev .i { color: #ffd166; }

.tier__rule { margin: 26px 0 0; border: 0; border-top: 1px solid var(--edge); }
.tier--star .tier__rule { border-color: rgba(255, 255, 255, .18); }

.tier__inc { margin-top: 24px; display: grid; gap: 13px; }
.tier__inc li {
  display: grid; grid-template-columns: auto 1fr; gap: 13px;
  font-size: .9062rem; line-height: 1.5; color: var(--t-md);
}
.tier__inc .i { font-size: 17px; color: var(--a-600); margin-top: 2px; }
.tier--star .tier__inc li { color: rgba(255, 255, 255, .88); }
.tier--star .tier__inc .i { color: #ffd166; }

.tier__foot { margin-top: auto; padding-top: 30px; }
.tier__safe {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .8125rem; color: var(--t-lo);
}
.tier__safe .i { font-size: 15px; color: var(--a-600); }
.tier--star .tier__safe { color: rgba(255, 255, 255, .7); }
.tier--star .tier__safe .i { color: #ffd166; }

.second {
  margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .8125rem; font-weight: 600; color: var(--t-lo); transition: color var(--t-hover);
}
.second:hover { color: var(--a-ink); }
.second .i { font-size: 15px; }
.tier--star .second { color: rgba(255, 255, 255, .72); }
.tier--star .second:hover { color: #ffd166; }

.btn--gold {
  background: linear-gradient(120deg, #ffd166 0%, #ffb020 100%); color: #4a2a00;
  box-shadow: 0 12px 30px -12px rgba(255, 176, 32, .75);
}
.btn--gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 40px -14px rgba(255, 176, 32, .85); }

.pays { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pays li {
  display: grid; place-items: center; width: 56px; height: 36px; padding: 0 8px;
  border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--edge);
}
.pays img { max-height: 17px; max-width: 100%; width: auto; object-fit: contain; }

/* Plan de por vida — franja horizontal */
/* Tarjeta de por vida.
   Móvil y escritorio son dos composiciones distintas, no una encogida:
   en móvil es una ficha vertical centrada con cinta de esquina; a partir de
   1080 px pasa a tres franjas con el abanico de carteles en medio. */
.forever {
  position: relative; overflow: hidden;
  display: grid; gap: 22px; justify-items: center; text-align: center;
  padding: 36px 22px 26px; border-radius: var(--r-lg);
  background: linear-gradient(155deg, #c8391d 0%, #a2210f 55%, #8a1a12 100%);
  color: rgba(255, 255, 255, .86);
  box-shadow: 0 26px 64px -28px rgba(200, 57, 29, .6);
}

/* Cinta de esquina. En móvil no hay sitio para el distintivo en línea y la
   oferta tiene que verse antes de leer nada. */
.forever__ribbon {
  position: absolute; top: 26px; right: -54px; z-index: 3;
  width: 200px; padding: 7px 0; text-align: center; transform: rotate(45deg);
  background: linear-gradient(90deg, #ffd166, #ffb020); color: #4a2a00;
  font-family: var(--f-display); font-size: .6875rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}

.forever__head { order: 1; display: grid; gap: 13px; justify-items: center; }
.forever__mark {
  display: grid; place-items: center; width: 74px; height: 74px;
  border-radius: 50%; font-size: 34px; color: #ffd166;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .24);
}
.forever .pill--gold { display: none; }
.forever h3 {
  color: #fff; font-size: clamp(1.45rem, 5.4vw, 1.9rem); line-height: 1.12;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.forever__d { max-width: 40ch; font-size: .9062rem; line-height: 1.62; color: rgba(255,255,255,.76); }

/* En móvil el precio va antes que las ventajas, como en una ficha de tarifa;
   `display: contents` deshace la caja de compra para poder intercalarlas. */
.forever__buy { display: contents; }
.forever__price { order: 2; display: grid; gap: 8px; justify-items: center; }
.forever__inc   { order: 3; }
.forever__cta   { order: 4; }
.forever__art   { order: 5; display: none; }

.forever__save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: linear-gradient(120deg, #ffd166, #ffb020); color: #4a2a00;
  font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.forever__save .i { font-size: 15px; color: #4a2a00; }
.forever__was { font-size: .9375rem; color: rgba(255,255,255,.58); text-decoration: line-through; }
.forever__p {
  display: flex; align-items: flex-start; justify-content: center; gap: 1px;
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; line-height: .92;
  background: linear-gradient(120deg, #ffe08a, #ffb020);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.forever__int { font-size: clamp(3.1rem, 12vw, 4rem); }
.forever__dec { font-size: clamp(1.35rem, 5vw, 1.65rem); padding-top: .22em; }
.forever__cur { font-size: clamp(1.5rem, 5.6vw, 1.9rem); padding-top: .16em; margin-left: 5px; }
.forever__note { font-size: .8438rem; color: rgba(255,255,255,.74); }

/* Lista limpia en móvil: las fichas con borde a ancho completo pesaban
   demasiado en una columna. Vuelven a ser fichas en escritorio. */
.forever__inc { display: grid; gap: 13px; width: 100%; max-width: 390px; text-align: left; }
.forever__inc li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .9062rem; color: rgba(255, 255, 255, .93);
}
.forever__inc .i { font-size: 19px; color: #ffd166; flex: none; margin-top: 1px; }

.forever__cta { display: grid; gap: 12px; justify-items: center; width: 100%; max-width: 390px; }
.forever__safe {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .75rem; color: rgba(255, 255, 255, .62);
}
.forever__safe .i { font-size: 14px; color: #8ce0a8; }
.forever .second { color: rgba(255, 255, 255, .72); }
.forever .second:hover { color: #ffd166; }

/* Los métodos de pago, junto al botón: en móvil la fila de la sección queda
   fuera de pantalla justo cuando se decide. */
.forever__pays {
  margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 9px 14px;
  padding: 12px 18px; border-radius: var(--r-pill); background: #fff;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .5);
}
.forever__pays img { height: 18px; width: auto; display: block; }

@media (min-width: 700px) { .forever { padding: 40px 34px 30px; } }

/* -------- Escritorio: tres franjas -------- */
@media (min-width: 1080px) {
  .forever {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .6fr) minmax(276px, .78fr);
    align-items: center; justify-items: stretch; text-align: left;
    gap: 30px; padding: 42px 44px;
  }
  .forever__ribbon, .forever__mark, .forever__pays { display: none; }
  .forever .pill--gold { display: inline-flex; }

  .forever__head { order: 0; justify-items: start; gap: 15px; }
  .forever h3 { text-transform: none; font-size: clamp(1.55rem, 3vw, 2.05rem); }

  .forever__inc {
    order: 0; grid-column: 1; grid-template-columns: 1fr 1fr;
    gap: 10px; max-width: none; margin-top: 16px;
  }
  .forever__inc li {
    align-items: center; padding: 10px 15px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20);
    font-size: .8438rem; font-weight: 600;
  }
  .forever__inc .i { font-size: 17px; margin-top: 0; }

  /* La cabecera y las ventajas comparten la primera columna. */
  .forever__head { grid-column: 1; grid-row: 1; align-self: end; }
  .forever__inc  { grid-column: 1; grid-row: 2; align-self: start; }
  .forever__art  { grid-column: 2; grid-row: 1 / span 2; display: grid;
                   grid-template-columns: 1fr; place-items: center; min-height: 240px; }

  /* La caja de compra vuelve a ser una sola pieza. */
  .forever__buy {
    display: grid; gap: 14px; grid-column: 3; grid-row: 1 / span 2;
    padding: 24px 22px; border-radius: var(--r);
    background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22);
  }
  .forever__price, .forever__cta { max-width: none; }

  .forever__art img {
    grid-area: 1 / 1; width: 132px; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
  }
  .forever__art img:nth-child(1) { transform: translate(-58px, -12px) rotate(-9deg); }
  /* La imagen de LaLiga es menos alargada (0,80) que las carátulas (0,67):
     con la proporción de cartel se recortaría por arriba y por abajo. */
  .forever__art img:nth-child(2) {
    transform: translateY(8px) scale(1.1); z-index: 2;
    aspect-ratio: 4 / 5; object-position: center 28%;
  }
  .forever__art img:nth-child(3) { transform: translate(58px, -4px) rotate(8deg); }
}

/* --------------------------------------------------------------------------
   15. Pasos — escalera
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } }
.step { padding: 28px 26px; }
@media (min-width: 900px) {
  .step:nth-child(2) { margin-top: 34px; }
  .step:nth-child(3) { margin-top: 68px; }
}
.step__n {
  font-family: var(--f-display); font-size: 3.25rem; font-weight: 800; line-height: .85;
  letter-spacing: -0.06em;
  background: var(--g-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { margin-top: 18px; font-size: 1.125rem; }
.step p { margin-top: 10px; font-size: .9062rem; line-height: 1.68; color: var(--t-md); }
.step__i { margin-top: 20px; }

/* --------------------------------------------------------------------------
   16. Opiniones — barra de valoración + carrusel
   -------------------------------------------------------------------------- */
.stars { display: inline-flex; gap: 3px; color: #f5a623; font-size: 17px; }
.stars .i { fill: currentColor; stroke: none; }
.stars--sm { font-size: 13px; }

.ratebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 18px 24px; border-radius: var(--r-lg);
  background: var(--g-card); border: 1px solid var(--edge); box-shadow: var(--sh-1);
}
.ratebar__n {
  font-family: var(--f-display); font-size: 2.25rem; font-weight: 800;
  line-height: 1; letter-spacing: -0.05em; color: var(--t-hi);
}
.ratebar__n small { font-size: 1rem; font-weight: 700; color: var(--t-lo); }
.ratebar img { height: 20px; width: auto; }
.ratebar__sep { width: 1px; height: 26px; background: var(--edge); }
@media (max-width: 699px) { .ratebar__sep { display: none; } }
.ratebar__cta { margin-left: auto; }

/* Cinta continua de opiniones: mismo mecanismo que las filas de carátulas.
   Se detiene al pasar el ratón o al recibir el foco para poder leerlas. */
.strip--pause:hover .strip__track,
.strip--pause:focus-within .strip__track { animation-play-state: paused; }

.quote {
  width: 292px; padding: 24px 22px; display: flex; flex-direction: column;
}
@media (min-width: 700px) { .quote { width: 330px; } }
.quote__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote__t { margin-top: 14px; font-size: .9062rem; line-height: 1.68; color: var(--t-md); flex: 1; }
.quote__who { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--edge); display: flex; align-items: center; gap: 12px; }
.quote__av {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--a-soft); border: 1px solid var(--a-line); color: var(--a-ink);
  font-family: var(--f-display); font-weight: 800; font-size: .9375rem;
}
.quote__n { font-family: var(--f-display); font-size: .9375rem; font-weight: 700; color: var(--t-hi); letter-spacing: -0.02em; }
.quote__c { font-size: .75rem; color: var(--t-lo); margin-top: 2px; }
.quote__shot { margin-top: 16px; width: 100%; height: 96px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--edge); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.qa { overflow: hidden; transition: border-color .35s, background .35s, box-shadow .35s; }
.qa.open { border-color: var(--a-line); background: linear-gradient(165deg, rgba(255,138,61,.07), #ffffff 60%); box-shadow: var(--sh-2); }
.qa__b {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 20px 24px; text-align: left;
}
.qa__q { font-family: var(--f-display); font-size: 1rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-hi); }
@media (min-width: 700px) { .qa__b { padding: 22px 26px; } .qa__q { font-size: 1.0625rem; } }
.qa__s {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--s-100); border: 1px solid var(--edge);
  color: var(--t-hi); font-size: 16px;
  transition: background .3s, border-color .3s, color .3s, transform .35s;
}
.qa.open .qa__s { background: var(--g-a); border-color: transparent; color: #fff; transform: rotate(180deg); box-shadow: var(--glow-a); }
.qa__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.3,1); }
.qa.open .qa__body { grid-template-rows: 1fr; }
.qa__in { overflow: hidden; }
.qa__in > div { padding: 0 24px 24px; font-size: .9375rem; line-height: 1.74; color: var(--t-md); }
@media (min-width: 700px) { .qa__in > div { padding: 0 26px 26px; padding-right: 64px; } }

/* --------------------------------------------------------------------------
   18. Contacto y cierre
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: 16px; }
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 1fr; gap: 20px; } }
.channel { padding: 32px 28px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 700px) { .channel { padding: 40px 36px; } }
.channel__v { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.035em; color: var(--t-hi); }
.channel--wa { background: linear-gradient(165deg, rgba(37,211,102,.10), #ffffff 60%); border-color: rgba(28,179,86,.28); }
.channel--wa .pod { background: rgba(37,211,102,.12); border-color: rgba(28,179,86,.3); color: var(--wa-dark); }

.slab {
  position: relative; overflow: hidden; padding: 48px 26px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(255,138,61,.16) 0%, rgba(224,31,90,.09) 48%, rgba(255,255,255,.6) 100%), var(--card);
  border: 1px solid var(--a-line);
  box-shadow: var(--sh-2);
}
@media (min-width: 900px) { .slab { padding: 72px 64px; } }
.slab h2 { max-width: 16ch; }
.promises { margin-top: 34px; display: grid; gap: 12px; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--r); background: rgba(255,255,255,.78);
  border: 1px solid var(--edge); font-size: .875rem; font-weight: 600; color: var(--t-hi);
}
.promises .i { font-size: 18px; color: var(--a-600); }

/* --------------------------------------------------------------------------
   19. Páginas editoriales
   -------------------------------------------------------------------------- */
.phead {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + 62px); padding-bottom: 56px;
  background: var(--s-050); border-bottom: 1px solid var(--edge);
}
@media (min-width: 900px) { .phead { padding-top: calc(var(--nav-h) + 84px); padding-bottom: 76px; } }
.phead__grid { display: grid; gap: 36px; }
@media (min-width: 1024px) { .phead__grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 56px; align-items: center; } }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--t-lo); }
.crumbs a { transition: color var(--t-hover); }
.crumbs a:hover { color: var(--a-ink); }
.crumbs .i { font-size: 14px; opacity: .55; }
.crumbs [aria-current] { color: var(--t-hi); }

.snapshot { padding: 14px; box-shadow: var(--sh-2); }
.snapshot__art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.snapshot__art img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r); }
.snapshot__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.snapshot__tiles span {
  display: grid; place-items: center; height: 68px; padding: 12px; border-radius: var(--r);
  background: var(--s-050); border: 1px solid var(--edge);
}
.snapshot__tiles img { max-height: 24px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.snapshot__list { margin-top: 14px; display: grid; gap: 8px; }
.snapshot__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center;
  padding: 11px 13px; border-radius: var(--r); background: var(--s-050);
  border: 1px solid var(--edge); font-size: .8125rem; font-weight: 600; color: var(--t-hi);
}
.snapshot__list .i { font-size: 16px; color: var(--a-600); }

.doc { display: grid; gap: 14px; max-width: 940px; margin-inline: auto; }
.docitem { padding: 26px 24px; }
@media (min-width: 700px) { .docitem { padding: 32px 34px; } }
.docitem__k { font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--a-ink); }
.docitem h2 { margin-top: 10px; font-size: 1.3rem; letter-spacing: -0.03em; }
.docbody { margin-top: 16px; }
.docbody p { font-size: .9688rem; line-height: 1.78; color: var(--t-md); }
.docbody p + p { margin-top: 14px; }
.docbody ul { margin-top: 14px; display: grid; gap: 10px; }
.docbody ul li { position: relative; padding-left: 22px; font-size: .9688rem; line-height: 1.7; color: var(--t-md); }
.docbody ul li::before {
  content: ''; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--g-a);
}
.docbody ol { margin-top: 14px; display: grid; gap: 11px; counter-reset: paso; list-style: none; }
.docbody ol li {
  position: relative; padding-left: 36px; font-size: .9688rem; line-height: 1.7;
  color: var(--t-md); counter-increment: paso;
}
.docbody ol li::before {
  content: counter(paso); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--g-a);
  color: #fff; font-family: var(--f-display); font-size: .75rem; font-weight: 800;
  display: grid; place-items: center;
}
.docbody .clist li { padding-left: 0; }
.docbody .clist li::before { display: none; }

.more { display: grid; gap: 14px; }
@media (min-width: 760px) { .more { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.more a { padding: 24px 22px; display: grid; gap: 10px; align-content: start; }
.more__t { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; color: var(--t-hi); letter-spacing: -0.02em; }
.more__d { font-size: .875rem; line-height: 1.6; color: var(--t-md); }

/* --------------------------------------------------------------------------
   20. Pie
   -------------------------------------------------------------------------- */
.foot { position: relative; border-top: 1px solid var(--edge); background: var(--s-100); }
.foot__grid { display: grid; gap: 32px; padding-block: 52px; }
@media (min-width: 640px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr .9fr; gap: 40px; padding-block: 68px; } }
.foot h3 { font-family: var(--f-body); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--t-lo); }
.foot__links { margin-top: 18px; display: grid; gap: 11px; }
.foot__links a { font-size: .9062rem; color: var(--t-md); transition: color var(--t-hover), padding-left var(--t-hover); }
.foot__links a:hover { color: var(--a-ink); padding-left: 5px; }
.foot__about { margin-top: 18px; max-width: 40ch; font-size: .9062rem; line-height: 1.7; color: var(--t-md); }
.foot__c { margin-top: 20px; display: grid; gap: 10px; }
.foot__c a, .foot__c span { display: inline-flex; align-items: center; gap: 11px; font-size: .9062rem; color: var(--t-md); transition: color var(--t-hover); }
.foot__c a:hover { color: var(--a-ink); }
.foot__c .i { font-size: 17px; color: var(--a-600); }
.foot__bar {
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
  padding-block: 22px; border-top: 1px solid var(--edge); font-size: .8125rem; color: var(--t-lo);
}
@media (min-width: 700px) { .foot__bar { flex-direction: row; justify-content: space-between; text-align: left; } }

/* --------------------------------------------------------------------------
   21. Flotantes
   -------------------------------------------------------------------------- */
.wafab {
  position: fixed; right: 16px; bottom: 16px; z-index: 190;
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding-inline: 16px; border-radius: var(--r-pill);
  background: var(--wa); color: #06210f; font-size: .9062rem; font-weight: 700;
  box-shadow: 0 14px 34px -14px rgba(37,211,102,.75);
  transition: background var(--t-hover), transform var(--t-hover);
}
.wafab .i { font-size: 22px; }
.wafab span { display: none; }
@media (min-width: 560px) { .wafab span { display: inline; } .wafab { right: 24px; bottom: 24px; } }
.wafab:hover { background: var(--wa-dark); transform: translateY(-3px); }

.ping {
  position: fixed; left: 16px; bottom: 16px; z-index: 185;
  width: min(19rem, calc(100vw - 96px));
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.3,1);
}
.ping.on { opacity: 1; transform: none; }
@media (min-width: 560px) { .ping { left: 24px; bottom: 24px; } }
@media (max-height: 700px) { .ping { display: none; } }
.ping__box {
  position: relative; pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 13px 32px 13px 14px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--edge); box-shadow: var(--sh-2);
}
.ping__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(18,185,129,.12); color: var(--ok); font-size: 17px; }
.ping__n { font-family: var(--f-display); font-size: .875rem; font-weight: 700; color: var(--t-hi); letter-spacing: -0.02em; }
.ping__p { margin-top: 2px; font-size: .75rem; color: var(--t-md); }
.ping__p b { color: var(--a-ink); }
.ping__m { margin-top: 3px; font-size: .625rem; color: var(--t-lo); }
.ping__x {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; color: var(--t-lo); font-size: 13px;
  transition: background var(--t-hover), color var(--t-hover);
}
.ping__x:hover { background: var(--s-100); color: var(--t-hi); }

/* --------------------------------------------------------------------------
   22. Checkout y 404
   -------------------------------------------------------------------------- */
.solo {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 28px 20px; position: relative; overflow: hidden; background: var(--s-050);
}
.solo__in { position: relative; z-index: 2; width: 100%; max-width: 470px; }
.solo__card { padding: 34px 28px; box-shadow: var(--sh-2); }
.meter { margin-top: 24px; height: 5px; border-radius: 99px; background: var(--s-200); overflow: hidden; }
.meter__b { height: 100%; width: 0; border-radius: 99px; background: var(--g-a); transition: width .2s linear; }
.checks { margin-top: 24px; display: grid; gap: 9px; }
.checks li {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center;
  padding: 12px 14px; border-radius: var(--r); background: var(--s-050);
  border: 1px solid var(--edge); font-size: .8438rem; font-weight: 600; color: var(--t-hi);
}
.checks .i { font-size: 17px; color: var(--a-600); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-flex; padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--edge);
  font-size: .875rem; font-weight: 600; color: var(--t-hi); box-shadow: var(--sh-1);
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover), transform var(--t-hover);
}
.chips a:hover { background: var(--a-soft); border-color: var(--a-line); color: var(--a-ink); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   23. Utilidades
   -------------------------------------------------------------------------- */
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
@media (max-width: 479px) { .row--stack { display: grid; } .row--stack .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   24. Pantallas estrechas
   -------------------------------------------------------------------------- */
@media (max-width: 619px) { .logo { padding: 10px; } }

@media (max-width: 420px) {
  :root { --pad: 14px; }
  .nav { top: 10px; }
  .nav__in { padding: 0 8px 0 12px; }
  .brand img { width: 34px; height: 34px; }
  .brand__n { font-size: .95rem; }
  .t1 { font-size: 2.4rem; }
  .tile { width: 132px; }
  .metric, .perk, .step, .quote { padding: 22px 18px; }
  .tier { padding: 24px 20px; }
  .solo__card, .channel { padding: 20px 18px 22px; }
  .forever { padding: 24px 20px; }
  .slab { padding: 34px 20px; }
  .qa__b { padding: 18px 18px; }
  .qa__in > div { padding: 0 18px 20px; }
  .wafab { height: 48px; }
}