/* =============================================================================
   PhotoPills Premium — page styles
   Solo composición específica de /premium/.

   Componentes reusados (NO se redefinen aquí):
   - .editorial-stack (+ --start) · common.css
   - .btn (+ variants) · common.css
   - .badge (+ --inline-title) · common.css
   - .section-title / .section-subtitle / .section-rule / .pitch-body · common.css
   - .hero-scroll-hint · common.css
   - .info-tip (+ __bubble) · common.css
   - .author-credit · common.css
   - .eyebrow-line · common.css
   - .has-vignette · common.css
   - .store-price · common.css
   - .container · common.css

   - .captured-plans, .plans-carousel, .plan-slide, .ba-slider, .plan-story,
     .plan-quote, .plan-pager · vienen de mockup/style.css (home)
   - .final-cta, .statement-slide, .statement-headline, .section-stars,
     .final-cta-logo, .final-cta-buttons · vienen de mockup/style.css (home)
   - .pricing-choose, .pricing-intro, .plan-grid, .plan-card, .includes,
     .includes__inner/__head/__group, .feature-list, .trust-strip__list,
     .pricing-faq · viene de premium-pricing · .faq · common.css

   Padding vertical de sección · siempre simétrico var(--section-pad-y-md).
   Heroes son la única excepción (asimetría justificada).
   ========================================================================== */


.page-premium #main {
  padding-top: 0;
  padding-bottom: 0;
}

/* Todos los .section-title de la página al mismo techo — display-md (64px).
   Centraliza la jerarquía: el hero ya está en display-md, y el resto de
   secciones se igualan para una lectura cinematográfica continua.
   Clamp fluido (no 64px fijo): en móvil baja hasta heading-lg (40px) —
   a 64px fijos el H1 desbordaba viewports de 375-480px. */
/* Cap a display-md (64) para las section-titles de la página · EXCEPTO el
   título del hero, que usa el componente compartido `.pricing-intro__title-v2`
   (display-md → display-lg). El `:not()` evita que este cap (más específico)
   pise al componente. */
.page-premium .section-title:not(.pricing-intro__title-v2) {
  font-size: clamp(var(--text-heading-lg), 7vw, var(--text-display-md));
}

/* "You choose the shot. / We find the moment." — dos frases con <br>
   forzado. A heading-lg (40px) en columna de ~343px cada frase se parte en
   2 líneas → 4 líneas totales. Un peldaño abajo (heading-md 32px, misma
   categoría) hace que cada frase entre en UNA línea → 2 líneas limpias
   partidas por el <br>. Solo móvil. */
@media (max-width: 720px) {
  #premium-feature-align-title {
    font-size: var(--text-heading-md);
    line-height: 1.15;
  }
}


/* =============================================================================
   1 · HERO  ·  PhotoPills Premium Beta + product showcase
   Apple iPhone 17 Pro pattern: H1 (mirror exacto de premium-pricing
   intro V2) + subtitle blanco con medidas .product-copy + CTA, todo
   arriba; producto (Empire State 3D) debajo a tamaño grande con
   "cinematic uprise" (scale + rotateX scroll-driven). Asimetría
   justificada (regla 8): padding-top xl reserva nav y respira el
   título; padding-bottom md cierra la imagen contra la siguiente
   sección.
   ========================================================================== */
.premium-hero {
  position: relative;
  background: var(--gradient-soft);
  /* Padding SIMÉTRICO (antes xl arriba / md abajo). Bajado a lg arriba y
     abajo → menos aire arriba (se ve el mockup completo) y mismo espacio
     arriba/abajo. lg (96-180) despeja de sobra la nav fija (~48px). */
  padding: var(--section-pad-y-lg) var(--gutter);
  text-align: center;
  isolation: isolate;
  /* `overflow: clip` clipea visualmente sin crear scroll container. */
  overflow: clip;
}

/* Reset paddings del wrapper .pricing-intro reusado · el hero ya
   gestiona su propio padding-y. */
.premium-hero__intro {
  padding: 0;
}

/* El título del hero usa el componente COMPARTIDO `.pricing-intro__title-v2`
   (common.css) — mismo que Pricing. PERO premium carga la home style.css
   (con `.section-title { font-size: heading-lg }` en móvil) DESPUÉS de common,
   y por orden de carga pisa al componente → el título caía a 40. Lo fijamos
   con el id (gana por especificidad) usando el MISMO token compartido, así que
   Pricing y Premium siguen sincronizados por `--text-hero-title(-sm)`. */
.page-premium #premium-hero-title {
  font-size: var(--text-hero-title);
}
@media (max-width: 720px) {
  .page-premium #premium-hero-title {
    font-size: var(--text-hero-title-sm);
  }
}

/* CTA debajo del subtitle. */
.premium-hero__cta {
  margin-top: clamp(24px, 2.5vw, 32px);
  justify-content: center;
}

/* Product showcase — captura cinematográfica del planner 3D. Vive
   debajo del intro block, dentro del container 1240px. Margen top
   generoso para garantizar separación con el CTA incluso al máximo
   del parallax (mockup -60, CTA -90 → buffer adicional 30). */
.premium-hero__product {
  max-width: var(--max-wide);
  margin: clamp(80px, 10vh, 140px) auto 0;
  /* will-change reserva un layer GPU para el transform sin jank */
  will-change: transform;
}

/* Box-shadow · `--shadow-strong` del DS (canónico para devices). */
.premium-hero__product img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-strong);
}

/* ─── Reveal cinematográfico en cascada ──────────────────────────────────
   Stagger al cargar: title → subtitle → CTA → image (con scale-down +
   fade). Estado inicial declarado directamente en cada elemento (en vez
   de animation-fill-mode: both) para evitar el flash de los elementos
   antes de que el CSS aplique el delay — el browser podía pintarlos
   visibles en el primer frame y luego ocultarlos cuando arrancaba el
   delay. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.premium-hero .pricing-intro__title-v2 {
  opacity: 0;
  animation: hero-fade-up var(--dur-cinema) var(--ease-cinematic) 120ms forwards;
}

.premium-hero .pricing-intro--v2 .section-subtitle {
  opacity: 0;
  animation: hero-fade-up var(--dur-cinema) var(--ease-cinematic) 280ms forwards;
}

.premium-hero__cta {
  opacity: 0;
  animation: hero-fade-up var(--dur-cinema) var(--ease-cinematic) 440ms forwards;
}

/* Image fade-in al cargar — el "cinematic uprise" scroll-driven gestiona
   el scale/rotateX en el <img>. Aquí solo controlamos el fade del figure. */
@keyframes hero-product-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.premium-hero__product {
  opacity: 0;
  animation: hero-product-fade var(--dur-cinema) var(--ease-cinematic) 600ms forwards;
}

/* ─── Cinematic uprise · scroll-driven (sólo scale) ────────────────────
   El mockup empieza al 80% (scale 0.80) y se acerca al 100% conforme
   se hace scroll. Bidireccional. El JS aplica `easeOutCubic` al
   progress para suavizar la llegada al 100 %.
   `transform-origin: top center` garantiza que el TOP del mockup
   queda fijo al escalar — solo crece hacia abajo. Así el mockup
   NUNCA invade el espacio del CTA, sin importar el nivel de zoom. */
.premium-hero__product img {
  --uprise-progress: 0;
  --parallax-y: 0px;
  transform-origin: top center;
  transform:
    translate3d(0, var(--parallax-y), 0)
    scale(calc(0.80 + 0.20 * var(--uprise-progress)));
}

/* Parallax sutil al CTA-row del hero: cuando se hace scroll, el bloque
   del botón se mueve un poco hacia arriba en paralelo con la traslación
   del mockup. Refuerza visualmente la "distancia" creciente entre ambos.
   `--cta-parallax-y` lo controla el JS inline del hero. */
.premium-hero__cta {
  --cta-parallax-y: 0px;
  transform: translate3d(0, var(--cta-parallax-y), 0);
  will-change: transform;
}

/* Reduced motion: anular reveal stagger, parallax y uprise. */
@media (prefers-reduced-motion: reduce) {
  .premium-hero .pricing-intro__title-v2,
  .premium-hero .pricing-intro--v2 .section-subtitle,
  .premium-hero__cta,
  .premium-hero__product {
    opacity: 1 !important;
    animation: none !important;
  }
  .premium-hero__product img {
    --parallax-y: 0px !important;
    --uprise-progress: 1 !important;
  }
}


/* =============================================================================
   2 · MANIFESTO  ·  The journey.
   Grid 2-col: vídeo 1:1 a la izquierda + texto editorial a la derecha.
   Fondo negro. En mobile colapsa a stack (vídeo arriba, texto debajo).
   ========================================================================== */
.premium-manifesto {
  background: var(--bg-bold);
  padding: var(--section-pad-y-md) var(--gutter);
}

.premium-manifesto__grid {
  /* Mismo container width que la home (--max-wide = 1240px). */
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 1024px) {
  .premium-manifesto__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

/* Cap del texto editorial — mismo recipe que .product-copy de home
   (max-width 48ch). Hace que el cuerpo respire en líneas cómodas. */
.premium-manifesto__copy {
  max-width: 48ch;
}

.premium-manifesto__media {
  margin: 0; /* reset default <figure> margin */
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  background: var(--gradient-strong);
  /* isolation + transform crean un nuevo stacking context que fuerza
     al iframe (y al video) a respetar el border-radius del padre.
     Sin esto, algunos navegadores pintan el iframe SIN clipping. */
  isolation: isolate;
  transform: translateZ(0);
  margin: 0;
}

.premium-manifesto__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: var(--radius-l);
}

.premium-manifesto__copy .pitch-body + .pitch-body {
  margin-top: 1.25rem;
}


/* =============================================================================
   3 · FEATURES  ·  Editorial blocks alternados (text + visual)
   ========================================================================== */
.premium-feature {
  background: var(--bg-bold);
  padding: var(--section-pad-y-md) var(--gutter);
}

/* Fondos EXPLÍCITOS por sección (antes: alternancia nth-of-type que peleaba
   la especificidad con los modificadores). Cascada tonal final:
     On the desktop (--soft) ........ gradient-subtle   ← swap con 3D
     The world in 3D (--showcase) ... gradient-soft     ← swap con Desktop
     Everything in order (--organize) bg-bold           (base)
     Plan the sky (--explore) ....... gradient-subtle
     You choose (--dark) ............ bg-bold            (el más oscuro)
     Community (--map) .............. gradient-subtle
     Mobile app (--mobile-sync) ..... bg-bold            (base) */
.premium-feature--soft     { background: var(--gradient-subtle); }
.premium-feature--showcase { background: var(--gradient-soft); }
.premium-feature--explore  { background: var(--gradient-subtle); }
.premium-feature--map      { background: var(--gradient-subtle); }
/* "You choose the shot" · el fondo MÁS oscuro. Va DESPUÉS de --showcase
   (ambos van en esa sección) para ganarle → bg-bold. */
.premium-feature--dark     { background: var(--bg-bold); }

/* Showcase elimina el padding horizontal de la sección para que el track
   del carousel vaya a sangre (full-width). El header interior y los cards
   gestionan su propio padding. */
.premium-feature--showcase {
  padding-left: 0;
  padding-right: 0;
}

.premium-feature--showcase .premium-feature__header {
  /* CENTRADO (diseño validado de desktop). El header centrado sobre el
     track full-bleed. (El left-align/cap que probé rompía el desktop.) */
  padding: 0 24px;
}

.premium-feature__grid {
  /* Mismo container width que la home (--max-wide = 1240px). */
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 1024px) {
  .premium-feature__grid {
    grid-template-columns: 1fr 1fr;
  }
  .premium-feature__grid--reverse .premium-feature__text {
    order: 2;
  }
  .premium-feature__grid--reverse .premium-feature__visual,
  .premium-feature__grid--reverse .the-map {
    order: 1;
  }
}

/* Cap del texto editorial — mismo recipe que .product-copy de home
   (max-width 48ch). Mantiene líneas cómodas independiente del ancho
   del column. */
.premium-feature__text {
  max-width: 48ch;
}

/* Tagline yellow — mismo estilo que .premium-hero__trust (mono-lg highlight) */
.premium-feature__tagline {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: 0.04em;
  color: var(--content-text-highlight);
  text-transform: none;
}

/* Visual placeholder — until real assets land. */
.premium-feature__visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--gradient-subtle);
  border: 1px solid var(--border-neutral-soft);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}

/* Cuando el visual contiene un device (laptop, phone), retiramos el
   chrome de tarjeta — el device tiene su propia carcasa y no necesita
   borde + fondo + padding wrapper. */
.premium-feature__visual--device {
  background: transparent;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
}

.premium-feature__placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  letter-spacing: 0.06em;
  color: var(--content-text-default-weak);
  text-transform: uppercase;
  padding: 0 1.5rem;
  text-align: center;
}


/* =============================================================================
   "The Map" · mockup real del planner para la sección
   "Step into the shared world". Reusa el visual canónico del producto
   con su browser chrome y los pins curados ya horneados en la imagen.
   ========================================================================== */
.the-map {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.the-map img {
  display: block;
  /* Inset horizontal para que la drop-shadow quepa dentro del viewport: en
     tablet/móvil el mockup iba de gutter a gutter y la sombra se salía por los
     lados, donde `body { overflow-x: clip }` la recortaba (arriba/abajo el
     overflow vertical es visible, por eso no). Con ~32px/lado + sombra más
     contenida (blur 22 < inset), la sombra cabe holgada por los 4 lados. */
  width: calc(100% - 64px);
  margin-inline: auto;
  height: auto;
  /* Por si algún overflow:clip a nivel de la propia <img> recortara el filtro. */
  overflow: visible;
  /* La imagen es un mockup de NAVEGADOR con esquinas redondeadas + sombra ya
     horneadas, sobre fondo transparente. `box-shadow`+`border-radius` se
     aplicaban al RECTÁNGULO de la <img> (con su margen transparente) → aro
     desalineado ("halo"). `drop-shadow` sigue la silueta real (la ventana). */
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42));
}

/* CTAs debajo del mockup, centrados respecto al ancho del column. */
.the-map__cta {
  margin-top: 0;
  justify-content: center;
}


/* =============================================================================
   "Apps compare" · tabla comparativa entre la app actual y la beta.
   Dos columnas con iconos de app (estilo squircle iOS) + nombres en mono
   en la cabecera, y debajo el tagline / lista de capacidades.
   ========================================================================== */

/* El grid hereda el `1fr 1fr` canónico de `.premium-feature__grid`,
   pero con un gap reducido entre el bloque editorial (left) y la tabla
   (right) para que el conjunto se lea más como un par compacto. */
@media (min-width: 1024px) {
  .premium-feature--mobile-sync .premium-feature__grid {
    gap: clamp(24px, 3vw, 48px);
  }
}

/* Dos bloques "app + sus datos" lado a lado (desktop) → apilados (móvil). */
.apps-compare {
  width: 100%;
  padding: clamp(20px, 2.5vw, 32px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Más separación entre las dos apps (estaban muy pegadas). */
  gap: clamp(64px, 8vw, 112px);
  align-items: start;
}

.apps-compare__app {
  display: flex;
  flex-direction: column;
}

/* Cabecera de la app · icono + nombre (+ badge en la beta), centrada. */
.apps-compare__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Más aire entre icono+nombre y la lista de checks. */
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Wrapper del icono · receta squircle+glass de `.app-icon` (common.css).
   26% (como el diseño original de desktop) — a 40% se veían demasiado
   grandes/redondeados. */
.apps-compare__icon-wrap {
  width: clamp(80px, 26%, 120px);
}

.apps-compare__app-name {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-family: var(--font-mono);
  /* Un paso más grande en la rampa mono (16→18). */
  font-size: var(--text-mono-xl);
  letter-spacing: 0.02em;
  color: var(--content-text-default);
  line-height: 1.3;
}

.apps-compare__badge {
  margin-top: clamp(4px, 0.5vw, 8px);
}

/* Badge fantasma (app 1) · reserva el hueco del badge real de la app 2 para
   que en DESKTOP las cabeceras midan igual y las listas arranquen alineadas.
   Invisible pero ocupa espacio. En móvil se quita (apiladas, no hace falta). */
.apps-compare__badge--ghost { visibility: hidden; }

/* Lista de features de cada app. */
.apps-compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}

.apps-compare__bullet {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 400;
  line-height: 1.4;
  color: var(--content-text-default);
  position: relative;
  padding-left: 1.75em;
}

.apps-compare__bullet::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--content-text-highlight);
  font-weight: 600;
  font-size: 1em;
}

/* Móvil · una app + sus datos, apiladas (nunca columnas mezcladas).
   La cabecera pasa a fila compacta (icono pequeño + nombre a su lado). */
@media (max-width: 720px) {
  .apps-compare {
    grid-template-columns: 1fr;
    /* Apiladas · aún más aire entre una app y la otra. */
    gap: clamp(84px, 20vw, 132px);
  }
  /* Sin badge fantasma en móvil (apiladas, no hay que alinear listas). */
  .apps-compare__badge--ghost { display: none; }
  /* La cabecera se queda IGUAL que en desktop: icono ARRIBA, nombre debajo
     (columna centrada). No la paso a fila. El icono usa el 26% de siempre. */
}


/* =============================================================================
   CAPTURED PLANS · padding simétrico md (override del home .captured-plans
   que viene con padding md ya — solo aseguramos que las paddings horizontales
   no se duplican y que la sección sigue la regla 8).
   ========================================================================== */
.page-premium .captured-plans {
  padding: var(--section-pad-y-md) 0;
}


/* =============================================================================
   THE DEAL · dos secciones independientes con fondos distintos del DS
   7a · "Why a paid beta?"  fondo `--gradient-strong` · logo a la izquierda
   7b · "What we ask of you" fondo `--gradient-soft`  · texto a la izquierda
   Cada una usa el grid 2-col canónico (1fr 1fr en desktop).
   ========================================================================== */
.premium-deal {
  padding: var(--section-pad-y-md) var(--gutter);
}

/* "Why" lleva el gradient soft (más claro, azulado) y "What" lleva el
   `--bg-bold` (negro absoluto) para diferenciarse claramente. */
.premium-deal--why  { background: var(--gradient-strong); }
.premium-deal--what { background: var(--bg-neutral-default); }

.premium-deal__grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 1024px) {
  .premium-deal__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* "Why a paid beta?" · lockup pequeño a la izquierda + copy ancho
     a la derecha (~33 / 67). */
  .premium-deal--why .premium-deal__grid {
    grid-template-columns: 1fr 2fr;
  }
}

/* Cap editorial del copy — mismo recipe que `.premium-feature__text`. */
.premium-deal__copy {
  max-width: 48ch;
}

/* En "Why a paid beta?" la columna del copy se amplía sobre el cap
   editorial canónico (48ch) hasta 60ch para que la sección no sea tan
   alta, manteniendo la legibilidad. */
.premium-deal--why .premium-deal__copy {
  max-width: 60ch;
}

.premium-deal__lead {
  font-size: clamp(var(--text-body-lg), 2.2vw, var(--text-lead));
  font-weight: 300;
  /* Unificado al interlineado editorial canónico (antes 1.3 ad-hoc). */
  line-height: var(--lh-body);
  margin-top: 1.5rem;
  color: var(--content-text-default);
}

.premium-deal__copy .pitch-body + .pitch-body {
  margin-top: 1.25rem;
}

.premium-deal__closing {
  margin-top: 1.5rem;
  font-weight: 500;
}

.premium-deal__signature {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--content-text-default-weak);
}

/* Brand lockup compuesto · icono SVG + "PhotoPills" wordmark + badge
   "Premium Beta" pill. Replica las proporciones reales del asset
   Logo+beta-badge.png (1313×996 → ratio 1.32):
     · icono     · 15.5 % W del lockup
     · wordmark  · 71 % W (font-size grande)
     · badge     · 73 % W (mismo orden visual que el wordmark)
     · gap 1→2   · 10.3 % H (más amplio)
     · gap 2→3   · 8.2 % H
   Tipografía: Gibson (wordmark, igual que el nav del DS), Public Sans
   (badge). Los gaps diferentes se aplican vía margin-top específico
   en cada elemento (no `gap` uniforme). */
.brand-lockup {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-lockup__icon {
  width: clamp(36px, 3.6vw, 60px);
  height: auto;
}

/* "PhotoPills" wordmark · token `--font-brand` del DS (Gibson con
   fallback a Public Sans), blanco sólido. */
.brand-lockup__name {
  margin: clamp(14px, 1.6vw, 26px) 0 0;
  font-family: var(--font-brand);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--content-text-default);
}

/* Badge "Premium Beta" · usa el componente `.badge` canónico del DS
   (mono uppercase + yellow outline pill). Excepción documentada: en
   este lockup editorial el badge default (--text-mono-sm = 12 px) queda
   muy pequeño bajo el wordmark "PhotoPills" (que es 36-60 px). Subimos
   al peldaño mayor de la rampa mono — `--text-mono-lg` (16 px) — con
   padding proporcional. Solo para este uso concreto. */
.brand-lockup__tier {
  margin-top: clamp(14px, 1.6vw, 24px);
  font-size: var(--text-mono-lg);
  padding: 8px 20px;
}

.brand-lockup__badge.reveal.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}


/* ─── Quote amarilla + feedback demo · sección "What we ask of you" ──── */

/* En "What we ask of you" todo el bloque visual va centrado:
   quote + botón + toast alineados al centro de su columna, y la
   columna entera centrada VERTICALMENTE para que se alinee en altura
   con el bloque editorial de la izquierda (que es más alto). */
.premium-deal__visual--feedback {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

/* Quote · mono (en lugar de sans light), centrada. */
.premium-deal__quote {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-body-lg), 2.4vw, var(--text-heading-sm));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--content-text-highlight);
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-style: normal;
}

/* ─── Demo del botón "Share feedback" · loop 6.5s ──────────────────────
   Secuencia: cursor entra desde arriba → se posa sobre el botón →
   click + cursor desaparece → label del botón se reemplaza por un
   check ✓ → toast "Thanks…" aparece debajo con pop → hold prolongado →
   toast desvanece + check desaparece (label vuelve) → loop.
   Margen reducido para que la quote y el botón queden visualmente
   acoplados. */
.feedback-demo {
  margin-top: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feedback-demo__stage {
  position: relative;
  display: inline-block;
  /* Padding simétrico: el botón queda centrado verticalmente en el
     stage → el cursor con top:50% + translate aterriza sobre el centro
     del botón. */
  padding: 44px 0 28px;
}

.feedback-demo__btn {
  transform-origin: center;
  /* Duración del loop = 7 × --dur-cinema (1100 ms) = 7700 ms ≈ 7.7 s,
     compuesta con tokens del DS en lugar de un valor suelto. */
  animation: feedback-btn calc(var(--dur-cinema) * 7) var(--ease-soft) infinite both;
}

.feedback-demo__cursor {
  position: absolute;
  /* Centrado sobre el botón como punto de referencia (top 50%, left 50%).
     La animación translada desde fuera (arriba) hasta este punto. */
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  pointer-events: none;
  animation: feedback-cursor calc(var(--dur-cinema) * 7) var(--ease-soft) infinite both;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--gray-black) 40%, transparent));
}

/* Toast · estilo dark mode: fondo oscuro translúcido, texto blanco,
   check verde. Encaja con el fondo del gradient-strong de la sección.
   Border 1px translúcido + backdrop-filter para el efecto glass.
   Shadow `--shadow-strong` del DS (canónico para popovers/toasts). */
.feedback-demo__toast {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  padding: 0.65em 1.1em 0.65em 0.7em;
  /* Near-black translúcido anclado al token --gray-10. */
  background: color-mix(in srgb, var(--gray-10) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--gray-white) 8%, transparent);
  border-radius: var(--radius-full);
  backdrop-filter: var(--glass-filter-strong);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  box-shadow: var(--shadow-strong);
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  letter-spacing: 0.01em;
  color: var(--content-text-default);
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  animation: feedback-toast calc(var(--dur-cinema) * 7) var(--ease-soft) infinite both;
}

.feedback-demo__toast-check {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  color: var(--green-5);
}

/* ─── Keyframes ──────────────────────────────────────────────────────── */

/* Cursor · entra desde arriba (cerca del botón, no muy alto), desciende
   hasta posarse en el CENTRO del botón al 28-44 %, "click" (scale-down)
   al 47 % e INMEDIATAMENTE desaparece para que el toast tome el
   protagonismo. Coordenadas: `top: 50%; left: 50%` + transform que
   centra la punta de la flecha del cursor en el centro del botón
   (translate -21% horizontal, -10% vertical → la punta del SVG está
   en (5, 2.5) del viewBox 24×24, lo que en 22 px es ~21 % / 10 %). */
@keyframes feedback-cursor {
  0%      { transform: translate(-21%, calc(-10% - 36px)) scale(1); opacity: 0; }
  8%      { transform: translate(-21%, calc(-10% - 36px)) scale(1); opacity: 1; }
  30%     { transform: translate(-21%, -10%) scale(1); opacity: 1; }
  44%     { transform: translate(-21%, -10%) scale(1); opacity: 1; }
  47%     { transform: translate(-21%, -10%) scale(0.82); opacity: 1; }
  49%     { transform: translate(-21%, -10%) scale(0.82); opacity: 0; }
  100%    { transform: translate(-21%, -10%) scale(0.82); opacity: 0; }
}

/* Botón · pulsa al 47 % (cuando el cursor lo clica) */
@keyframes feedback-btn {
  0%, 45% { transform: scale(1); filter: brightness(1); }
  47%     { transform: scale(0.96); filter: brightness(0.92); }
  53%     { transform: scale(1); filter: brightness(1); }
  100%    { transform: scale(1); filter: brightness(1); }
}

/* Toast · aparece con pop-in tras el click y se mantiene visible
   muchísimo más tiempo (≈ 3.3 s) — como un toast real de éxito. */
@keyframes feedback-toast {
  0%, 47% { opacity: 0; transform: translateY(8px) scale(0.92); }
  54%     { opacity: 1; transform: translateY(0) scale(1.04); }
  58%     { opacity: 1; transform: translateY(0) scale(1); }
  94%     { opacity: 1; transform: translateY(0) scale(1); }
  98%     { opacity: 0; transform: translateY(0) scale(0.96); }
  100%    { opacity: 0; transform: translateY(8px) scale(0.92); }
}

/* Reduced motion: estado final estático sin loop. */
@media (prefers-reduced-motion: reduce) {
  .feedback-demo__cursor,
  .feedback-demo__btn,
  .feedback-demo__toast {
    animation: none !important;
  }
  .feedback-demo__cursor { display: none; }
  .feedback-demo__toast  { opacity: 1; transform: translateY(0) scale(1); }
}


/* =============================================================================
   PRICING + FAQ · usan .pricing-choose / .pricing-faq de premium-pricing
   sin overrides. Solo aseguramos scroll-margin-top para el anchor #pricing.
   ========================================================================== */
.page-premium #pricing {
  scroll-margin-top: 80px; /* compensa la nav sticky */
  /* Padding-top simétrico md para abrir aire sobre la intro. El bottom
     ya lo aporta .includes__inner (también md) → simetría completa. */
  padding-top: var(--section-pad-y-md);
}


/* =============================================================================
   FINAL CTA · usa .final-cta + .statement-slide de home, sin overrides.
   El componente .premium-hero__trust se reusa para la línea de trust
   sobre el CTA final (mono yellow highlight).
   ========================================================================== */
.premium-hero__trust {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  letter-spacing: 0.04em;
  color: var(--content-text-highlight);
  text-align: center;
  text-transform: none;
}

.page-premium .final-cta .premium-hero__trust {
  margin: clamp(20px, 2.5vw, 32px) auto clamp(20px, 2.5vw, 32px);
}

/* ─── Override del `.pricing-choose__hero` cuando se reusa dentro de
   la página premium · `premium-pricing/style.css` lo define con
   `min-height: 100vh` y padding clamp(96px, 12vh, 140px) (porque allí es
   la sección principal de la página). Aquí no debe ocupar todo el
   viewport ni añadir aire extra — homologamos el padding con el resto
   de secciones del premium. */
.page-premium .pricing-choose__hero {
  min-height: 0;
  padding: 0;
}

/* El scroll-hint "What you get" pertenece al hero de premium-pricing,
   no a esta sección — lo ocultamos aquí. */
.page-premium .pricing-choose__hero .hero-scroll-hint {
  display: none;
}


/* =============================================================================
   FEATURE HEADER · header editorial centrado, usado por features que llevan
   el contenido (cards, icons) debajo del bloque editorial.
   ========================================================================== */
.premium-feature__header {
  margin: 0 auto clamp(40px, 5vw, 64px);
}


/* =============================================================================
   EXPLORE STAGE · contenedor swappeable de pantallas (Sky pattern)
   Solo el .is-active se muestra. El control vive en .explore-tablist abajo.
   ========================================================================== */
/* Stage que contiene las pantallas swappeables. Solo la activa se muestra.
   Fondo negro (--bg-bold) para que el "fade-to-black" entre transiciones
   sea limpio: la saliente cae a 0 opacity, vemos el fondo negro durante
   ~250ms, y la entrante aparece desde 0 con un transition-delay. */
.explore-screen-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.explore-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Fade-out por defecto · `--dur-instant` (200ms) del DS. */
  transition: opacity var(--dur-instant) var(--ease-soft);
}

.explore-screen.is-active {
  opacity: 1;
  /* La pantalla entrante espera lo que tarda la saliente en desaparecer
     antes de empezar su fade-in → vemos un breve "negro" entre las dos
     = barrido a negro suave. Tokens del DS: `--dur-soft` (fade-in,
     320ms) + delay `--dur-instant` (200ms, igual al fade-out anterior). */
  transition: opacity var(--dur-soft) var(--ease-soft) var(--dur-instant);
}

/* Wrapper del mockup + tabs debajo (Sky pattern).
   Tabs SEPARADOS del mockup, no dentro. El phone-frame tiene un
   max-width acotado para que no domine la columna. */
.explore-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}

.explore-device .phone-mockup {
  /* Un pelín más grande (era 220–300). */
  width: clamp(248px, 40vw, 340px);
}

/* Segmented control · ahora vive en common.css como .tablist /
   .tablist__item (componente reusable). No duplicar overrides aquí. */

/* Stage dentro del .phone-screen. Las screenshots ocupan todo el slot
   y se cambian con el tablist. */
.phone-screen .explore-screen-stage {
  position: absolute;
  inset: 0;
}

.phone-screen .explore-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =============================================================================
   SHOWCASE CARDS · cards grandes Apple-style (3D World, Alignments)
   Sin chrome de tarjeta — solo imagen con border-radius + texto debajo.
   Full-width: el track va a sangre. La PRIMERA card aparece centrada
   en el viewport — el usuario hace scroll horizontal para ver el resto.
   Scroll-snap sobre el centro de cada card.
   ========================================================================== */
.showcase-cards {
  position: relative;
  width: 100%;
  /* Alto del visual (una sola fuente); el ancho de la card se deriva de él a 4:3.
     `--card-w` también calcula el padding lateral del track para centrar la 1ª/última. */
  --vis-h: 74vh;
  --card-w: clamp(280px, 100vw, calc(var(--vis-h) * 4 / 3));
}

/* Tablet HORIZONTAL / viewports cortos (alto ≤900): galería un poco MENOS alta. */
@media (max-height: 900px) {
  .showcase-cards { --vis-h: 64vh; }
}

/* Tablet VERTICAL (721-1024): en vez de card a full-screen, card más estrecha
   para ver UNA + PARTE de la siguiente (peek), como en horizontal. Visual 4:3
   (alto derivado del ancho, no el 74vh que la hacía casi cuadrada y altísima). */
@media (min-width: 721px) and (max-width: 1024px) {
  .showcase-cards { --card-w: 80vw; }
  /* especificidad extra: la regla base de `.showcase-card__visual` va DESPUÉS
     en el archivo y, a igual specificity, ganaría por orden. */
  .showcase-cards .showcase-card__visual { height: auto; aspect-ratio: 4 / 3; }
}

.showcase-cards__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* Padding lateral = (viewport - card width) / 2 → la primera card
     queda centrada cuando scrollLeft = 0. La última también queda
     centrada cuando scrollLeft = max. */
  padding-inline: max(24px, calc((100% - var(--card-w)) / 2));
  gap: clamp(20px, 3vw, 40px);
  -webkit-overflow-scrolling: touch;
}

.showcase-cards__track::-webkit-scrollbar { display: none; }

.showcase-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  width: var(--card-w);
}

/* Imagen grande con border-radius l. Apple "Pixel Perfect" pattern.
   Aspect 4:3, alto = 62vh — domina pero deja paginador a la vista. */
.showcase-card__visual {
  width: 100%;
  /* Alto vía variable (--vis-h); al mantener 4:3, la card crece también en ancho. */
  height: var(--vis-h);
  background: var(--gradient-subtle);
  border-radius: var(--radius-l);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 720px) {
  .showcase-cards {
    /* Más ancha (92vw · casi a sangre) — antes 78vw se quedaba pequeña. */
    --card-w: 92vw;
  }
  .showcase-card__visual {
    height: auto;
    /* Más alta: cuadrado (era 4:3 apaisado). */
    aspect-ratio: 1 / 1;
  }

  /* Header de galería a la IZQUIERDA solo en móvil (en desktop se queda
     centrado, que es el diseño validado). Replica el efecto de
     `editorial-stack--start` sin tocar el markup. */
  .premium-feature--showcase .premium-feature__header {
    text-align: left;
  }
  .premium-feature--showcase .premium-feature__header .section-subtitle,
  .premium-feature--showcase .premium-feature__header .section-rule,
  .premium-feature--showcase .premium-feature__header .pitch-body {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

.showcase-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-card__body {
  padding: 0 4px;
}

.showcase-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-text-highlight);
  margin: 0 0 8px;
}

.showcase-card__copy {
  font-size: var(--text-body-lg);
  font-weight: 300;
  /* Unificado al interlineado editorial canónico (antes 1.3 ad-hoc) para
     coherencia con `.pitch-body` del resto del sitio. */
  line-height: var(--lh-body);
  color: var(--content-text-default);
  margin: 0;
}

/* Paginador debajo — usa el componente .pager de common.css con
   .pager--md. Centrado, con margen superior generoso. */
.showcase-cards__pager {
  margin: clamp(28px, 4vw, 48px) auto 0;
  justify-content: center;
}


/* =============================================================================
   PREMIUM ORGANIZE · texto izquierda + iconos derecha (en columna)
   Pattern de .exp-header de la home (copy a la izquierda, items a la
   derecha — distinto ritmo del 50/50 grid de .premium-feature). En mobile
   colapsa a stack: texto arriba, iconos debajo.
   ========================================================================== */
.premium-organize {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* Cap del texto editorial (mismo recipe 48ch que el resto de columnas
   editoriales de la página). Sin esto el texto se estiraba por toda
   la columna izquierda en pantallas grandes. */
.premium-organize__copy {
  max-width: 48ch;
}

@media (min-width: 1024px) {
  .premium-organize {
    /* Columna derecha más ancha (×1.5: 360→540) para alojar la animación
       escalada sin clip. */
    grid-template-columns: 1.1fr minmax(0, 540px);
    gap: clamp(48px, 6vw, 112px);
  }
}


/* =============================================================================
   ORGANIZE MOTION · "Everything in order" motion graphic
   4 chinchetas aparecen sobre la carpeta y CAEN dentro de ella.
   La solapa se abre (translateY hacia arriba + escala) cuando cada marker
   entra, y se cierra después. Un toast verde ✓ "Saved" aparece arriba
   como feedback visual. Loop 12s, CSS-only. Markers escalonados con
   animation-delay 0/3/6/9s.
   ========================================================================== */
.organize-motion {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Escala x1.5 sobre el tamaño anterior (460→690) para que la
     animación domine más la columna derecha. */
  max-width: 690px;
  margin: 0 auto;
}

/* Carpeta + label · agrupados, centrados */
.organize-motion__folder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--gray-black) 50%, transparent));
}

.organize-motion__folder svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Label "My Stuff" debajo de la carpeta — mono, pequeño, separado.
   ABSOLUTA (fuera de flujo): así el `.folder` NO cuenta la etiqueta en su
   altura y centra SOLO el SVG en el contenedor. Como los pines caen al
   centro del contenedor (translate -50%,-50%), aterrizan en el CENTRO de
   la carpeta (antes caían más abajo, sobre la etiqueta). */
.organize-motion__label {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  letter-spacing: 0.08em;
  color: var(--content-text-default-weak);
  text-align: center;
}

/* Solapa frontal: se abre y cierra de forma fluida coincidiendo con
   la entrada de cada marker. 4 aperturas sutiles por cycle. Apertura:
   scaleY(0.92) translateY(-3%) — apenas un guiño para que el marker
   pueda "entrar". Tokens del DS: 11 × --dur-cinema = 12.1 s · --ease-soft. */
.organize-motion__folder-flap {
  transform-origin: 50% 100%;
  animation: flapOpen calc(var(--dur-cinema) * 8) var(--ease-soft) infinite;
}

@keyframes flapOpen {
  /* Cycle 12s · 4 aperturas a 21.7/38.4/55/71.7 %. Apertura sutil:
     scaleY(0.92) + translateY(-3%) ≈ la solapa apenas se acorta. */
  0%, 18%, 27%, 35%, 44%, 52%, 61%, 68%, 78%, 100% {
    transform: scaleY(1) translateY(0);
  }
  21.7% { transform: scaleY(0.92) translateY(-3%); }
  38.4% { transform: scaleY(0.92) translateY(-3%); }
  55%   { transform: scaleY(0.92) translateY(-3%); }
  71.7% { transform: scaleY(0.92) translateY(-3%); }
}

/* Markers · cada uno parte de un lado superior distinto (custom prop
   --start-x define el offset horizontal). Caen en DIAGONAL hacia la
   carpeta. Solape: 4 markers en 12s con stagger 2s · cada uno visible
   ~3.5s → 2 markers a la vez la mayor parte del tiempo. */
.organize-motion__marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: auto;
  --start-x: 0%;
  transform: translate(calc(-50% + var(--start-x)), -180%) scale(0.7);
  opacity: 0;
  /* Tokens del DS: 11 × --dur-cinema = 12.1 s · --ease-out (idéntico
     al cubic-bezier(0.4, 0, 0.2, 1) que tenía antes). */
  animation: markerDrop calc(var(--dur-cinema) * 8) var(--ease-out) infinite both;
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--gray-black) 55%, transparent));
  pointer-events: none;
  z-index: 2;
}

.organize-motion__marker--1 { animation-delay: 0s; }
.organize-motion__marker--2 { animation-delay: calc(var(--dur-cinema) * 2); }
.organize-motion__marker--3 { animation-delay: calc(var(--dur-cinema) * 4); }
.organize-motion__marker--4 { animation-delay: calc(var(--dur-cinema) * 6); }

/* 12s cycle · UN solo movimiento continuo: el marker aparece en su
   --start-x con opacity 0, fade-in rápido al aparecer, vuela en línea
   recta hasta la carpeta, y se desvanece al entrar. CSS interpola los
   valores intermedios automáticamente — sin paradas ni hovers. */
@keyframes markerDrop {
  /* Estado inicial: arriba en su esquina, invisible */
  0% {
    transform: translate(calc(-50% + var(--start-x)), -180%) scale(0.85);
    opacity: 0;
  }
  /* Aparece (fade-in rápido sin moverse todavía) */
  4% {
    transform: translate(calc(-50% + var(--start-x)), -180%) scale(1);
    opacity: 1;
  }
  /* Llega a la carpeta · CSS interpola la trayectoria 4%-22% en línea
     recta · diagonal continua desde --start-x hasta el centro */
  22% {
    /* MEDIDO: el CUADRADO de la carpeta (ignorando la pestaña de arriba)
       tiene su centro a 57% del contenedor → −22% deja el centro del pin
       justo ahí (barrido: −50%→50%, −22%→57%). Proporcional → igual en
       desktop y móvil. */
    transform: translate(-50%, -22%) scale(0.5);
    opacity: 1;
  }
  /* Desaparece al entrar (último 3%) */
  25% {
    transform: translate(-50%, -22%) scale(0.3);
    opacity: 0;
  }
  /* Espera invisible el resto del cycle */
  25.01%, 100% {
    transform: translate(calc(-50% + var(--start-x)), -180%) scale(0.85);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .organize-motion__marker,
  .organize-motion__folder-flap {
    animation: none;
  }
  /* Sin animación (Reduce Motion activo, típico en móvil): estado FINAL
     estático — un pin DENTRO de la carpeta, en el bolsillo (-25%), tal como
     acaba la animación. Antes se mostraban los 4 markers en fila arriba, que
     no se parecía en nada al resultado animado del desktop. */
  .organize-motion__marker { opacity: 0; }
  .organize-motion__marker--1 {
    opacity: 1;
    transform: translate(-50%, -22%) scale(0.5);
  }
}




/* =============================================================================
   Responsive — narrow tweaks
   ========================================================================== */
@media (max-width: 720px) {
  .premium-feature__visual {
    aspect-ratio: 16 / 10;
  }

  /* (1/parallax) Hero mockup · en móvil SIN el escalado por scroll (crecía
     a saltos), pero SÍ el parallax vertical sutil (lo pediste). Solo
     translate, sin scale. */
  .premium-hero__product img {
    transform: translate3d(0, var(--parallax-y), 0);
  }

  /* (2) "The journey" · en móvil el TEXTO va arriba y el vídeo DEBAJO
     (el orden del DOM es vídeo→texto para el grid 2-col de desktop). */
  .premium-manifesto__media { order: 2; }

  /* (3) "On the desktop" · el laptop lleva la base al 112% (más ancha que la
     pantalla) y se salía por los laterales en móvil. Acotamos el mockup para
     que la base entre dentro de los márgenes. */
  .premium-feature--soft .laptop-mockup {
    width: 86%;
  }

  /* (5) "Everything in order" · menos aire ARRIBA (gap) y ABAJO (margin-bottom
     negativo tira de la sección siguiente). No toco la animación interna →
     los pines siguen convergiendo al centro de la carpeta. */
  .premium-organize { gap: 12px; }
  .organize-motion { margin-bottom: clamp(-44px, -6vw, -24px); }

  /* (6) Features · un pelín más de aire entre la frase amarilla y el visual
     (plan-the-sky se veía justo). Distancia estándar apilado = 44px. */
  .premium-feature__grid { gap: 44px; }

  /* Párrafos a PARED en móvil: quitamos el cap de 48ch de las columnas
     editoriales. A anchos de móvil grandes el 48ch dejaba el texto corto
     frente a los headers de galería (que van a sangre). Ahora TODOS los
     párrafos ocupan el ancho de móvil. Títulos/subtítulos van dentro de la
     misma columna, así que también se sueltan (no pasa nada, son cortos). */
  .premium-feature__text,
  .premium-manifesto__copy,
  .premium-organize__copy,
  .premium-deal__copy {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .premium-hero,
  .premium-manifesto,
  .premium-feature,
  .premium-deal {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* El header de galería NO lleva padding propio en ≤480: hereda el gutter
     de la sección (16px). Antes: sección 16 + header 16 = 32 (doble) → por
     eso 3D World tenía márgenes más anchos que el resto. */
  .premium-feature--showcase .premium-feature__header {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Botones · un escalón más bajos en móvil · btn-l (62px) → medidas de btn-m
   (52px). Patrón del DS (precedente home/missions): el btn-l a ancho completo
   pesa demasiado frente a los títulos en el teléfono. Solo afecta a ≤720. */
@media (max-width: 720px) {
  .btn-l { height: 52px; padding: 14px 22px; }
}