/* =============================================================================
   PhotoPills · /experiences/ landing
   Page-specific styles. SOLO lo que el DS no cubre (layout grids, full-bleed
   positioning, accordion). Tipografía, espaciado y componentes vienen
   íntegros de common.css + style.css (home).

   Componentes DS usados (no se redeclaran aquí):
   - .hero-tagline, .section-title, .section-subtitle, .pitch-body
   - .editorial-stack (+ --start), .section-rule, .eyebrow-line
   - .cta-row, .btn-{primary,ghost,tertiary,m,l}
   - .tablist + .tablist__item, .prep-chips + .prep-chip
   - .captured-plans + .plan-slide + .ba-slider + .plans-pager + .pager
   - .author-credit, .badge, .quote-mark, .photo-credit, .hero-scroll-hint
   - .app-icon, .phone-mockup, .final-cta, .has-vignette
   - .section-stars, .reveal
   ========================================================================== */


/* =============================================================================
   Page-level overrides
   ========================================================================== */

/* Todos los .section-title de la página con el MISMO clamp que
   `.page-premium .section-title` (premium/style.css): display-md (64px) en
   desktop, encogiendo a heading-lg (40px) en móvil — como home y premium.
   Antes era `display-md` FIJO (64px sin clamp), lo que dejaba los títulos
   exageradamente grandes en móvil. Centraliza la jerarquía editorial para
   que todas las secciones (mission, ways, pursue, stories, tool, masters,
   movement, faqs) lean al mismo peso y ritmo. El hero tagline
   (`.hero-tagline`) y el final-cta h2 mantienen su recipe propio. */
.page-experiences .section-title {
  font-size: clamp(var(--text-heading-lg), 7vw, var(--text-display-md));
}


/* =============================================================================
   1 · HERO
   100svh full-bleed. Photo behind + content centered. Override mínimo:
   .hero-tagline a weight 300 (la nota del DS lo permite explícitamente
   para esta página, ver common.css :2950).
   ========================================================================== */
.exp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Asimetría justificada (regla 8 · heroes): igual recipe que `.home-hero`
     en home/style.css — padding-top `xl` reserva espacio bajo la nav fixed;
     padding-bottom más ajustado para que el centro óptico del bloque caiga
     en el tercio superior y el photo-credit quede dentro del 100svh fold. */
  padding-top: var(--section-pad-y-xl);
  padding-bottom: clamp(80px, 14vh, 160px);
  padding-left: 24px;
  padding-right: 24px;
  background: var(--bg-bold);
  isolation: isolate;
  overflow: hidden;
}

/* `.exp-hero__media` y `.exp-hero__content` van sin z-index a propósito.
   Razón: si el content crea un stacking context propio (vía z-index), el
   `backdrop-filter` de los `.btn-ghost` queda aislado y solo ve el interior
   del content (= nada), por eso los pills se veían lavados sobre la foto.
   `.exp-hero` ya tiene `isolation: isolate`, así que los dos hijos quedan
   en el mismo stacking context del section y el orden DOM (media → content)
   resuelve el apilado: media abajo, content arriba, blur de los botones
   ve la foto correctamente. */
.exp-hero__media {
  position: absolute;
  inset: 0;
}

.exp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Ken-Burns drift sutil · 20s · misma animación canónica `slowZoom`
     (definida en common.css) que usa el hero de home. Respeta
     prefers-reduced-motion vía el @media de abajo. */
  animation: slowZoom 20s var(--ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .exp-hero__media img { animation: none; }
}

/* Radial-dark anclado al bottom para legibilidad sin scrim plano
   (DIRECTION §8). */
.exp-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.exp-hero__content {
  position: relative;
  max-width: 960px;
}

/* Hero tagline · `.hero-tagline` canónico al 100% — Public Sans 500,
   clamp(heading-xl, 8vw, display-lg) (56-78px), igual que la home. Solo
   añadimos max-width + balance para controlar el line-break en pantallas
   medianas (el `<br>` fuerza el corte, pero balance evita huérfanos en
   viewports estrechos donde el primer verso se parta antes). */
.page-experiences .exp-hero .hero-tagline {
  max-width: 16ch;
  text-wrap: balance;
}

/* Móvil · un peldaño más pequeña (heading-xl 56 → heading-lg 40): la frase
   es más larga que el resto de heroes (dos versos) y a 56px se comía la
   pantalla. Solo móvil; desktop mantiene el clamp 56-78. */
@media (max-width: 720px) {
  .page-experiences .exp-hero .hero-tagline {
    font-size: var(--text-heading-lg);
  }
}

/* Eyebrow del hero · `.eyebrow-line` canónico (mono uppercase, yellow,
   weight 500, tracking 0.12em). Únicos overrides: font-size un peldaño
   por encima del mono-lg canónico (16 → 18px) para que tenga más
   presencia en este hero full-bleed, y el margen al título. */
.exp-hero__eyebrow {
  font-size: var(--text-body-md);
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}


/* =============================================================================
   2 · THE MISSION
   editorial-stack centrado + gradient-strong. Estructura: título + subtítulo
   + rule + manifiesto en body (.pitch-body) + frase de cierre en mono yellow.
   ========================================================================== */
.exp-mission {
  background: var(--bg-bold);
  padding: var(--section-pad-y-md) var(--gutter);
}

/* Manifiesto · `.pitch-body` ya lo dimensiona a 18-21px dentro del
   editorial-stack; solo añadimos separación entre los dos párrafos. */
.exp-mission .editorial-stack .pitch-body {
  margin-bottom: 1rem;
}

/* Frase de cierre · MISMO statement que la home — reusa `.statement-slide`
   + `.statement-headline` + `.word`. El `../script.js` global anima el
   reveal palabra-a-palabra (busca `.statement-slide`). Aquí neutralizamos
   el layout del statement-slide (100svh, padding, bg, flex) para que sea
   solo una línea dentro de la sección. El weight 600, el color blanco y el
   acento yellow de "Preparation" los hereda del DS; solo bajamos el tamaño
   (cap heading-lg en vez de display-lg). */
.exp-mission__statement {
  min-height: 0;
  padding: 0;
  background: transparent;
  display: block;
  overflow: visible;
  margin-top: 3.5rem; /* más aire entre el manifiesto y la quote */
}

.exp-mission__outcome {
  font-size: clamp(var(--text-heading-sm), 3.5vw, var(--text-heading-lg));
  line-height: var(--lh-display); /* token DS (1.08), antes 1.05 del statement */
  margin: 0;
}

/* Interlineado entre las dos líneas de la quote · el statement base mete
   0.5em (20px) entre líneas, que aquí se veía exagerado. Lo bajamos a
   0.15em para un salto más ajustado. */
.exp-mission__outcome .statement-line-2 {
  margin-top: 0.15em;
}

/* Reveal diferido · el .statement-slide global tiene un IntersectionObserver
   que añade .is-visible al entrar el quote en el viewport. Pero la quote
   está visualmente ENCIMA de las stats, así que entra primero — antes de
   que las cifras terminen su count-up. Para que la quote anime DESPUÉS
   de las stats (+2s buffer), añadimos .is-pending-reveal en el HTML y
   suprimimos el reveal de las palabras mientras esa clase esté presente.
   experiences/script.js la quita en el momento correcto. Specificity
   0,2,1 igual que la regla base, y va declarada después → gana. */
.exp-mission__statement.is-pending-reveal .word {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(10px);
}


/* Stats dentro de Missions · 3 cifras (Missions / Countries / Moments).
   Centradas, en una sola fila de 3 columnas (desktop). En mobile colapsa
   a 1×3 stack — más legible con cifras grandes en pantallas estrechas. */
.exp-mission__stats {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: var(--max-content);
  text-align: center;
}

.exp-mission__stats .exp-stat {
  align-items: center;
}

@media (min-width: 720px) {
  .exp-mission__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* "The outcome is uncertain…" · un peldaño más grande en móvil
     (heading-sm 24 → heading-md 32, mismo escalón de categoría): a 24px
     se quedaba tímida frente a la fuerza del statement. */
  .exp-mission__outcome {
    font-size: var(--text-heading-md);
  }
  /* El grid base es de 2 columnas · con 3 stats el 3º (Moments Captured)
     quedaba solo en la fila 2 dejando un hueco a la derecha (grid coja).
     Que ocupe las 2 columnas y se centre → fila 2 equilibrada debajo. */
  .exp-mission__stats .exp-stat:last-child {
    grid-column: 1 / -1;
  }

  /* Reorden SOLO móvil (sin tocar el DOM · desktop intacto): el statement
     "The outcome is…" baja DEBAJO de los 3 datos, justo antes del CTA.
     `.editorial-stack` es bloque normal; lo pasamos a columna flex solo aquí
     para poder usar `order`. Los ítems sin order (título/subtítulo/rule/body)
     quedan primero en orden de fuente; luego stats → statement → CTA. */
  .exp-mission .editorial-stack {
    display: flex;
    flex-direction: column;
  }
  .exp-mission .editorial-stack .exp-mission__stats     { order: 1; }
  .exp-mission .editorial-stack .exp-mission__cta       { order: 2; }
  .exp-mission .editorial-stack .exp-mission__statement { order: 3; }
  /* Aire GENEROSO alrededor del statement reubicado para que datos,
     frase y CTA respiren y no queden apelmazados. */
  .exp-mission .editorial-stack .exp-mission__statement {
    margin-top: clamp(56px, 12vw, 88px);
  }
  .exp-mission .editorial-stack .exp-mission__cta {
    margin-top: clamp(56px, 12vw, 88px);
  }
}


/* CTA primary al cierre. */
.exp-mission__cta {
  margin-top: clamp(40px, 5vw, 64px);
  justify-content: center;
}


/* =============================================================================
   3 · FOUR WAYS IN
   editorial-stack header + 4-up grid de cards page-scoped (.exp-way-card —
   no hay card editorial genérica en el DS aún, candidato a promover).
   ========================================================================== */
.exp-ways {
  background: var(--gradient-subtle);
  padding: var(--section-pad-y-sm) var(--gutter);
}

/* Dos filas — row 1: texto + Expeditions featured. Row 2: 3 cards default.
   Wrapper común con max-width canónico (--max-wide). Gaps apretados
   (entre columnas dentro de row, y entre row 1 y row 2) para que la
   grid se sienta más compacta. */
.exp-ways__row {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}

.exp-ways__row + .exp-ways__row {
  /* Mismo gap que entre columnas (24px máx) para una grid uniforme. */
  margin-top: clamp(16px, 1.8vw, 24px);
}

/* Row 1 · 2 cols equal-width (desktop) · align-items: center para que el
   texto se centre verticalmente contra el card del Expeditions. */
@media (min-width: 1024px) {
  .exp-ways__row--top {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Row 2 · 3 cols (desktop) · 2 cols (tablet) · 1 col (mobile). */
@media (min-width: 720px) {
  .exp-ways__row--bottom { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .exp-ways__row--bottom { grid-template-columns: repeat(3, 1fr); }
}

.exp-ways__header {
  margin: 0;
}

/* Apilado · el header `--start` (left) se centra SOLO en móvil (≤720). En
   tablet vertical (721-1024) se queda a la IZQUIERDA (petición Irene). */
@media (max-width: 720px) {
  .exp-ways__header.editorial-stack--start,
  .exp-ways__header.editorial-stack--start .section-subtitle {
    text-align: center;
  }
}

/* =============================================================================
   3b · OVERLAY — layout viewport-fit (desktop ≥1024px).
   · Row 1: columna de texto = 1/3 (mismo ancho que una card de abajo, grid de
     3 cols con el texto en col 1); Expeditions ocupa las cols 2-3 → crece.
     Fila más BAJA de las dos.
   · Row 2: las 3 cards, fila más ALTA.
   · Las cards llenan la altura de su fila (aspect-ratio: auto + height 100%)
     en vez de su 4/3 natural → controlamos el alto y la sección entera cabe
     en un viewport (~92svh).
   ========================================================================== */
/* Padding vertical = nivel Editorial (`md`), igual que la sección Missions.
   Las filas miden 90svh de contenido (ver más abajo); este padding queda
   por encima/debajo, fuera de la vista del viewport, como margen entre
   secciones. */
.exp-ways--overlay {
  background: var(--gradient-soft);
  padding-block: var(--section-pad-y-md);
}

@media (min-width: 1024px) {
  .exp-ways--overlay .exp-ways__row--top {
    grid-template-columns: repeat(3, 1fr);
    /* `minmax(0, 1fr)`: la fila llena la altura fija del contenedor en vez
       de crecer al tamaño natural de la foto (que es vertical → desbordaba). */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    /* Las DOS filas tienen el MISMO alto: (90svh − gap) / 2. Así, sumadas
       con el gap, el contenido llena el 90% del viewport. El gap usa el
       mismo clamp que el margin entre filas (24px máx). El padding queda
       fuera de vista a propósito. Min 300px para que el texto no se recorte
       en ventanas muy bajas. */
    height: max(300px, calc((90svh - clamp(16px, 1.8vw, 24px)) / 2));
  }
  .exp-ways--overlay .exp-ways__row--top .exp-ways__header {
    grid-column: 1;
    align-self: center; /* texto centrado vertical contra Expeditions */
  }
  .exp-ways--overlay .exp-way-card--featured {
    grid-column: 2 / 4; /* Expeditions ocupa las 2 columnas restantes */
  }

  /* Fila de abajo · MISMO alto que la de arriba (ver nota allí) → las dos
     iguales y el contenido suma 90svh. */
  .exp-ways--overlay .exp-ways__row--bottom {
    grid-template-rows: minmax(0, 1fr);
    height: max(300px, calc((90svh - clamp(16px, 1.8vw, 24px)) / 2));
  }

  /* Cards (featured + las 3 de abajo) llenan la altura de su fila. La
     specificity (0,3,0) gana al `aspect-ratio: 4/3` del overlay base. */
  .exp-ways--overlay .exp-way-card,
  .exp-ways--overlay .exp-way-card__link {
    height: 100%;
  }
  .exp-ways--overlay .exp-way-card--overlay .exp-way-card__media {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
  }
}

.exp-way-card { margin: 0; }

.exp-way-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-soft) var(--ease-out);
}

.exp-way-card__link:hover { transform: translateY(-4px); }

.exp-way-card__media {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--gradient-subtle);
}

.exp-way-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-glide) var(--ease-soft);
}

.exp-way-card__link:hover .exp-way-card__media img { transform: scale(1.04); }

.exp-way-card__name {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--content-text-default);
}

.exp-way-card__tagline {
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 300;
  line-height: 1.3;
  color: var(--content-text-default);
}

.exp-way-card__copy {
  margin: 0 0 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--content-text-default-weak);
}

.exp-way-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--content-text-highlight);
}

.exp-way-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-instant) var(--ease-out);
}

.exp-way-card__link:hover .exp-way-card__cta svg { transform: translateX(3px); }

/* Móvil · TODAS las cards igualan la tipografía de la featured (Expeditions):
   name a heading-md (32) y tagline a body-lg (22) — antes solo Expeditions
   era grande y las otras tres quedaban un peldaño por debajo, descompensadas.
   Y el CTA (textlink) sube un paso (body-sm 16 → body-md 18) para más
   presencia táctil. */
@media (max-width: 720px) {
  .exp-way-card--overlay .exp-way-card__name {
    font-size: var(--text-heading-md);
  }
  .exp-way-card--overlay .exp-way-card__tagline {
    font-size: var(--text-body-lg);
  }
  .exp-way-card__cta {
    font-size: var(--text-body-md);
  }
  /* Un poco más de aire bajo el textlink (el overlay va anclado abajo, así
     que padding-bottom = espacio entre el CTA y el borde inferior de la card). */
  .exp-way-card--overlay .exp-way-card__overlay {
    padding-bottom: clamp(30px, 7vw, 42px);
  }
}

/* Featured variant · Expeditions en row 1 (columna derecha junto al texto).
   Foto 16:9 cinematic + cap `max-height: 50svh` para que el card no se
   descontrole en columnas anchas. Tipografía un peldaño más grande que la
   default para marcar jerarquía visual frente a las 3 cards de row 2. */
.exp-way-card--featured .exp-way-card__media {
  aspect-ratio: 16 / 9;
  max-height: 50svh;
}

.exp-way-card--featured .exp-way-card__name {
  font-size: var(--text-heading-md);
}

.exp-way-card--featured .exp-way-card__tagline {
  font-size: var(--text-body-lg);
}

.exp-way-card--featured .exp-way-card__copy {
  font-size: var(--text-body-md);
}

/* OVERLAY variant · texto DENTRO de la foto. Aspect 4/3 fijo, todo el
   card es la imagen + bottom gradient para legibilidad. El bloque de
   texto (.exp-way-card__overlay) va absolute al bottom, padding generoso.
   Si se combina con `--featured` la foto pierde el cap de 50svh (el
   overlay define su propio sizing) pero conserva la tipografía grande
   del featured. */
.exp-way-card--overlay .exp-way-card__link {
  position: relative;
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-bold);
}

.exp-way-card--overlay .exp-way-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  max-height: none;
  border-radius: 0;
}

/* Bottom-anchored gradient · sin scrim plano (DIRECTION §8). Empieza
   transparente desde el 30% top y termina opaco en bottom. */
.exp-way-card--overlay .exp-way-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0.45) 60%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
}

/* Bloque de texto overlay · absolute anclado al bottom del card. Crece
   hacia ARRIBA cuando el copy se expande (CTA queda fijo en el bottom).
   Layout visual (orders): name (1) · tagline (2) · copy (3, hover only) ·
   cta (4, bottom siempre). */
.exp-way-card--overlay .exp-way-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(20px, 2.5vw, 32px);
  color: var(--gray-white);
  display: flex;
  flex-direction: column;
}

.exp-way-card--overlay .exp-way-card__name {
  margin: 0;
  color: var(--gray-white);
  order: 1;
}

.exp-way-card--overlay .exp-way-card__tagline {
  margin: 0.25rem 0 0;
  color: var(--gray-white);
  order: 2;
}

/* Copy · collapsed por defecto. En hover se expande con transición
   fluida (dur-glide 600ms + ease-soft, más cinematic que el dur-soft
   default). Line-height 1.4 — entre el `--lh-heading` (1.18) y el
   `--lh-body` (1.47) del DS, apropiado para body corto editorial. */
.exp-way-card--overlay .exp-way-card__copy {
  order: 3;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
  transition:
    max-height var(--dur-glide) var(--ease-soft),
    opacity var(--dur-glide) var(--ease-soft),
    margin var(--dur-glide) var(--ease-soft);
}

.exp-way-card--overlay .exp-way-card__link:hover .exp-way-card__copy,
.exp-way-card--overlay .exp-way-card__link:focus-visible .exp-way-card__copy {
  max-height: 200px;
  opacity: 1;
  margin: 0.75rem 0 0;
}

/* CTA · order 4 (bottom), siempre visible. Margen superior para
   separarlo del tagline (default) o del copy (cuando expande). */
.exp-way-card--overlay .exp-way-card__cta {
  order: 4;
  margin: 0.75rem 0 0;
  color: var(--content-text-highlight);
}

/* Image · hover combina zoom 1.04 + brightness 0.55 (oscurecimiento
   global de la foto) → los textos del overlay quedan mucho más
   legibles sobre la imagen atenuada. Mismas duración/easing que el
   copy reveal para que todo se mueva al unísono. */
.exp-way-card--overlay .exp-way-card__media img {
  transition:
    transform var(--dur-glide) var(--ease-soft),
    filter var(--dur-glide) var(--ease-soft);
}

.exp-way-card--overlay .exp-way-card__link:hover {
  transform: none;
}

.exp-way-card--overlay .exp-way-card__link:hover .exp-way-card__media img,
.exp-way-card--overlay .exp-way-card__link:focus-visible .exp-way-card__media img {
  transform: scale(1.04);
  filter: brightness(0.55);
}

/* Táctil (sin hover) · el reveal en hover no dispara nunca en móvil/tablet
   táctil → el copy quedaba inaccesible. Aquí el estado "hover" pasa a ser el
   ESTADO POR DEFECTO: el párrafo se muestra siempre desplegado. Usamos
   `@media (hover: none)` (capacidad real del dispositivo) en vez de un ancho,
   así el desktop con ratón conserva su reveal cinematográfico intacto.
   Como la foto no se atenúa (eso solo pasa en hover), reforzamos el scrim
   inferior para que todo el bloque de texto se lea sobre la imagen. */
@media (hover: none) {
  .exp-way-card--overlay .exp-way-card__copy {
    max-height: none;
    opacity: 1;
    margin: 0.75rem 0 0;
    transition: none;
  }
  /* Proporción más vertical (4/5 vs 4/3) para que el bloque de texto
     desplegado quepa con foto de sobra encima y no se recorte el nombre.
     Solo aplica <1024: a ≥1024 la regla min-width (altura fija de fila,
     aspect-ratio:auto) es más específica y gana. */
  .exp-way-card--overlay .exp-way-card__media {
    aspect-ratio: 4 / 5;
  }
  .exp-way-card--overlay .exp-way-card__media::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 12%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.95) 100%
    );
  }
}

/* Reduced motion · sin transitions ni hover effects. El copy queda
   siempre visible (más útil que un trigger inanimado); la foto sin
   filter (mejor que un cambio brusco). */
@media (prefers-reduced-motion: reduce) {
  .exp-way-card--overlay .exp-way-card__copy {
    transition: none;
    max-height: none;
    opacity: 1;
    margin: 0.75rem 0 0;
  }
  .exp-way-card--overlay .exp-way-card__media img,
  .exp-way-card--overlay .exp-way-card__link:hover .exp-way-card__media img {
    transition: none;
    transform: none;
    filter: none;
  }
}


/* =============================================================================
   4 · WHAT WE PURSUE  ·  Restaurado al patrón de la compañera (28-abr).
   Header centered + 4 tabs `.tablist` canónica del DS + grid de chips foto
   cuadrada + label overlay bottom + CTA "See all" debajo.
   Chips son page-scoped (`.exp-pursue__chip`): visual con foto+label que no
   encaja en `.prep-chips` (text-only) del DS. Si otra página adopta el mismo
   patrón → promover al DS.
   ========================================================================== */
.exp-pursue {
  background: var(--bg-bold);
  padding: var(--section-pad-y-md) var(--gutter);
}

.exp-pursue__header {
  max-width: var(--max-content);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* Tabs wrapper · centra horizontalmente la `.tablist` (que es inline-flex).
   En mobile permite scroll horizontal sin scrollbar visible para que la
   píldora no rompa el viewport cuando los 4 labels no caben en una línea. */
.exp-pursue__tabs {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* Cambio de tab INSTANTÁNEO · la transición global de color/fondo del
   `.tablist__item` (200ms) hacía que el tab recién seleccionado tardara en
   volverse amarillo y, durante esos 200ms, pareciera deshabilitado (gris
   sobre transparente). Para un segmented control, la selección debe ser
   inmediata. Scoped a los tabs de pursue (no toca el componente global). */
.exp-pursue__tabs .tablist__item {
  transition: none;
}

/* Móvil · los 4 labels (ya sin "By") caben en UNA fila horizontal como
   4 columnas iguales. Scoped a exp-pursue → el componente `.tablist` del DS
   queda intacto en otras páginas. */
@media (max-width: 720px) {
  /* Tabs en UNA fila horizontal (sin "By" ya caben los 4): 4 columnas
     iguales, padding y fuente ajustados para que "Destination" entre en
     una línea sin desbordar. La cápsula (radius-full) se mantiene. */
  .exp-pursue__tabs {
    text-align: center;
  }
  .exp-pursue__tabs .tablist {
    display: flex;
    width: 100%;
    gap: 2px;
  }
  .exp-pursue__tabs .tablist__item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 10px 4px;
    font-size: var(--text-body-xs);
    white-space: nowrap;
  }
  /* Margen INTERNO real = padding del label dentro de cada chip (distancia
     del borde de la card al texto "Milky Way", etc.). Se reduce: laterales
     1.4→1rem y fondo 1.6→1rem. El scrim superior (gradiente) se mantiene
     para legibilidad. El gap ENTRE cards se queda en 16px (base). */
  .exp-pursue__chip .exp-pursue__chip-label {
    padding: 3.25rem 1rem 1rem;
  }
}

/* Panels container · stack absoluto para que los paneles no-activos no
   reserven espacio y el cambio de tab no haga "jump" del layout. */
.exp-pursue__panels {
  position: relative;
  max-width: var(--max-wide);
  margin: 0 auto;
}

/* Panel grid · 6 cols desktop default. Paneles con ≤6 chips (sky, subject,
   place) pasan a 3 cols con aspect 3/2 (landscape) para no oversize las
   fotos. Month tiene 12 → 6 cols con fotos verticales (5/7) para igualar
   el alto total de fila y no saltar al cambiar de tab.
   Tablet: 3 cols. Mobile: 2 cols. */
.exp-pursue__panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.6vw, 20px);
  opacity: 0;
  transition: opacity var(--dur-instant) var(--ease-out);
  pointer-events: none;
}

@media (min-width: 1025px) {
  .exp-pursue__panel:not(:has(.exp-pursue__chip:nth-child(7))) {
    grid-template-columns: repeat(3, 1fr);
  }
  .exp-pursue__panel:not(:has(.exp-pursue__chip:nth-child(7))) .exp-pursue__chip-media {
    aspect-ratio: 3 / 2;
  }
  /* Month (≥7 chips, 6 cols) · fotos verticales 5/7. A 1240px de
     contenedor el alto de fila ≈ 266px = mismo que los paneles de 6
     chips (3 cols, 3/2) → 2 filas iguales, sin salto de altura. */
  .exp-pursue__panel:has(.exp-pursue__chip:nth-child(7)) .exp-pursue__chip-media {
    aspect-ratio: 5 / 7;
  }
}

@media (max-width: 1024px) {
  .exp-pursue__panel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .exp-pursue__panel { grid-template-columns: repeat(2, 1fr); }
}

.exp-pursue__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.exp-pursue__panel:not(.is-active) {
  position: absolute;
  inset: 0;
}

/* Chip · receta visual de .prep-tile (Plan Every Shot home) PERO
   manteniendo el alto/aspect-ratio del .chip-media original (que
   varía por sección · 1/1 default, 3/2 para paneles ≤6 chips en
   desktop, 5/7 para Month). Sin línea de autor/master en mono.

   Estructura:
     .exp-pursue__chip          → wrapper redondeado · clip + radius
       .exp-pursue__chip-media  → define alto vía aspect-ratio
         <img>                  → foto
       .exp-pursue__chip-label  → label absolute + gradient bottom

   El chip clipea con border-radius + overflow:hidden, pero NO impone
   aspect-ratio · ese sigue viviendo en .chip-media para no romper
   los overrides de breakpoint que ya teníamos. */
.exp-pursue__chip {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--gray-white);
  border-radius: clamp(16px, 1.6vw, 24px); /* mismo recipe que .prep-tile */
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-subtle);
  transition:
    transform var(--dur-instant) var(--ease-out),
    box-shadow var(--dur-instant) var(--ease-out);
}

.exp-pursue__chip:hover,
.exp-pursue__chip:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

/* .exp-pursue__chip-media · DEFINE EL ALTO del chip vía aspect-ratio.
   Default 1/1 (cuadrada) · los breakpoints arriba lo sobreescriben
   a 3/2 y 5/7 sin tocar este selector. */
.exp-pursue__chip-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}

.exp-pursue__chip-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-glide) var(--ease-soft);
}

.exp-pursue__chip:hover .exp-pursue__chip-media img,
.exp-pursue__chip:focus-visible .exp-pursue__chip-media img {
  transform: scale(1.04);
}

/* Label · mismo recipe que .prep-tile-title (sans 600, body-lg) sobre
   un gradient profundo en la parte baja del chip — clipeado por el
   border-radius del chip padre. Sin línea mono debajo. */
.exp-pursue__chip-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4rem 1.4rem 1.6rem;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--gray-white);
  /* Gradient profundo · scrim de transparencia → negro absoluto en el
     borde inferior. Mismo recipe que .prep-tile figcaption. */
  background: linear-gradient(
    to top,
    var(--gray-black) 0%,
    rgba(0, 0, 0, 0.92) 25%,
    rgba(0, 0, 0, 0.7)  55%,
    rgba(0, 0, 0, 0)    100%
  );
}

/* CTA · margen generoso debajo del grid. */
.exp-pursue__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}


/* True Stories usa el componente captured-plans CANÓNICO tal cual: foto ARRIBA
   + historia debajo (spotlight centrado), igual que home/app/premium — decisión
   Irene 2026-08: unificar el componente en todas las páginas. Se retiraron el
   layout foto-izquierda ≥721 y el override de `--case-col`, que eran exclusivos
   de esta página (revierte QA #104). Solo se conservan los añadidos propios:
   fondo, full-bleed en móvil y la spec-line de cámara (abajo). */

/* =============================================================================
   5 · TRUE STORIES
   Reusa íntegramente .captured-plans del home. Solo añadimos el spec-line
   (cámara/mm/f/s/ISO) y la signature de cierre.
   ========================================================================== */
.exp-field-stories {
  background: var(--gradient-subtle);
  padding: var(--section-pad-y-md) var(--gutter);
}

/* Móvil · sin padding lateral en la sección para que el photo-slider haga
   full-bleed como en home/app (el .container interior mantiene sus 32px para
   el header; el track-wrapper del carousel escapa esos 32px y llega al borde).
   Antes los 24px de la sección lo dejaban más estrecho que el resto. */
@media (max-width: 720px) {
  .exp-field-stories {
    padding-left: 0;
    padding-right: 0;
  }
}

.exp-field-stories .section-header { margin-bottom: clamp(40px, 5vw, 64px); }

.exp-field-stories__spec {
  margin: 0.9rem 0 0;                 /* pegado a la quote, con un pequeño respiro (~14px) */
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--content-text-default-weak);
}
/* La spec de cámara va DEBAJO DE LA QUOTE (columna derecha del grid), no bajo el
   head, y PEGADA a ella. Solo en ≥721 (donde el .plan-story es 2-col): el head
   ocupa las dos filas, la quote se ancla al fondo de la fila 1 y el spec al alto
   de la fila 2 → se tocan en el borde de fila, sin el hueco que metía el
   centrado. En móvil (1-col) apila natural con el margen de arriba. */
@media (min-width: 721px) {
  .exp-field-stories .plan-story { grid-template-rows: auto auto; }
  .exp-field-stories .plan-story .plan-story-head { grid-row: 1 / 3; }
  .exp-field-stories .plan-story .plan-quote { grid-column: 2; grid-row: 1; align-self: end; }
  .exp-field-stories .plan-story .exp-field-stories__spec {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

/* La signature de cierre ("The photograph is what sometimes happens…")
   se promovió a sección propia `.statement-slide--bridge` entre esta
   sección y The Tool — ver el HTML. El CSS de `.exp-field-stories__signature`
   se retiró por quedar huérfano. Page-tweaks del bridge: */

/* Headline · ancho de texto contenido (22ch), como el statement de la home.
   Tamaño capado a display-md (un peldaño por debajo del display-lg por
   defecto del statement). */
.statement-slide--bridge .statement-headline {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(var(--text-heading-lg), 6.5vw, var(--text-display-md));
}

/* Alto NATURAL (no forzado a 100svh como el statement base) + márgenes
   verticales nivel Statement (lg). */
.statement-slide--bridge {
  min-height: 0;
  padding-block: var(--section-pad-y-lg);
}

/* Logo PhotoPills · studio-mark debajo del headline (el base
   `.statement-logo` trae margin-bottom para uso "arriba"; aquí lo
   invertimos a margin-top porque va debajo del título). */
.statement-slide--bridge .statement-logo {
  display: inline-block;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
}


/* =============================================================================
   6 · THE TOOL
   2-col split desktop (4fr/6fr). editorial-stack--start canónica + .app-icon
   + .phone-mockup. Layout glue solo.
   ========================================================================== */
.exp-tool {
  background: var(--gradient-subtle);
  padding: var(--section-pad-y-md) var(--gutter);
}

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

@media (min-width: 1024px) {
  .exp-tool__grid { grid-template-columns: 4fr 6fr; }
}

/* Móvil · el CTA del copy se desbordaba ~32px de su fila del grid (el
   `align-items: center` base dimensiona la fila sin contar el margin-top del
   botón) y quedaba pegado a los mockups. Empujamos el bloque visual hacia
   abajo para garantizar una separación clara y estable a cualquier ancho. */
@media (max-width: 720px) {
  .exp-tool__visual {
    margin-top: clamp(32px, 8vw, 48px);
  }
}

.exp-tool__copy { max-width: 48ch; }

/* Separación entre los dos párrafos del body (el editorial-stack los deja
   con margin 0). */
.exp-tool__copy .pitch-body {
  margin-bottom: 1rem;
}

/* Espacio tras el texto, antes del botón. */
.exp-tool__cta {
  margin-top: 2rem;
}

.exp-tool__icon {
  width: clamp(64px, 6vw, 84px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* Visual · los dos mockups (.app-showcase, reusado de index>The App).
   El tamaño de los phones lo da device-mockups.css (clamp 170-240px). */
.exp-tool__visual {
  display: flex;
  justify-content: center;
}


/* =============================================================================
   7 · THE MASTERS — DOS VARIANTES para comparar:
   A (.exp-masters--cards): 2-col (rejilla 2×2 izq + copy der). Cada retrato
     revela una bio corta al hover (oscurece la foto + fade-in del texto).
   B (.exp-masters--strip): copy arriba + filmstrip horizontal de retratos
     verticales que se desliza (escalable a más Masters).
   Caption (name + meta) compartido entre ambas.
   ========================================================================== */
.exp-masters {
  background: var(--bg-bold);
  padding: var(--section-pad-y-md) var(--gutter);
  /* Ambas variantes ocupan un viewport, con el contenido centrado. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.exp-masters__cta { justify-content: flex-start; margin-top: 2rem; }

.exp-masters__name {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--content-text-default);
}
.exp-masters__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--content-text-default-weak);
}

/* ── Variante A · rejilla 2×2 + copy ─────────────────────────────────── */
.exp-masters--cards .exp-masters__layout {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 1025px) and (max-width: 1199px) {
  /* TABLET HORIZONTAL (1025-1199): copy ARRIBA centrado + los 4 masters en UNA
     FILA debajo. Desktop (≥1200) NO usa esto — vuelve al diseño original 2×2. */
  .exp-masters--cards .exp-masters__layout {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 64px);
    align-items: stretch;
    width: 100%;   /* el `margin:0 auto` base encogía el flex item a su contenido */
  }
  /* copy ARRIBA, CENTRADO y con el mismo ancho/centro que 'The moments we
     pursue' (~980). */
  .exp-masters--cards .exp-masters__layout .exp-masters__statement {
    order: -1;
    width: 100%;                    /* el margin:auto en flex encogía al contenido */
    max-width: 980px;               /* mismo ancho que el header de 'The moments we pursue' */
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  /* Centrar los hijos: el editorial-stack--start fija text-align:left explícito
     en subtítulo/párrafo/filete, hay que ganarle con más especificidad. */
  .exp-masters--cards .exp-masters__layout .exp-masters__statement .section-subtitle,
  .exp-masters--cards .exp-masters__layout .exp-masters__statement .pitch-body,
  .exp-masters--cards .exp-masters__layout .exp-masters__statement .section-rule {
    text-align: center;
    margin-inline: auto;
  }
  /* CTA DEBAJO de las cards (ya es el último hijo del layout), centrado. El aire
     lo da el gap del layout → sin margin-top propio. */
  .exp-masters--cards .exp-masters__cta {
    justify-content: center;
    margin-top: 0;
  }
}

/* Las 4 master cards en UNA FILA en TABLET (721-1199); en móvil (≤720) 2×2 y en
   desktop (≥1200) vuelven a 2×2 con el diseño original. Como la fila va en
   táctil (sin hover), la bio SIEMPRE visible aquí para que se lea todo el texto. */
@media (min-width: 721px) and (max-width: 1199px) {
  .exp-masters--cards .exp-masters__layout .exp-masters__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .exp-masters--cards .exp-master-card__bio {
    max-height: 12em;
    opacity: 1;
    margin-top: 0.5rem;
  }
}

.exp-masters--cards .exp-masters__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

/* DESKTOP (≥1200) · diseño ORIGINAL de masters: rejilla 2×2 a la IZQUIERDA (6fr)
   + copy (título/párrafo/CTA) a la DERECHA (4fr), ajustado a un viewport. Los
   cambios de tablet (4-en-fila, copy centrado, fotos 3:4, bio siempre visible)
   NO aplican aquí — se revierten a lo original. El CTA vive fuera del statement
   (por tablet), así que aquí se recoloca en la columna derecha, bajo el copy. */
@media (min-width: 1200px) {
  .exp-masters--cards .exp-masters__layout {
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-template-rows: 1fr auto auto 1fr;   /* espaciadores arriba/abajo → copy+cta centrados */
    grid-template-areas: "cards ." "cards copy" "cards cta" "cards .";
    column-gap: clamp(40px, 5vw, 72px);
    height: calc(100svh - 2 * var(--section-pad-y-md));
    max-width: var(--max-wide);
    margin: 0 auto;
    width: auto;
  }
  .exp-masters--cards .exp-masters__grid {
    grid-area: cards;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
    order: 0;
  }
  .exp-masters--cards .exp-masters__statement {
    grid-area: copy;
    align-self: end;
    order: 0;
    width: auto;
    max-width: none;
    margin: 0;
    text-align: left;
    align-items: flex-start;
  }
  .exp-masters--cards .exp-masters__statement .section-subtitle,
  .exp-masters--cards .exp-masters__statement .pitch-body,
  .exp-masters--cards .exp-masters__statement .section-rule {
    text-align: left;
    margin-inline: 0;
  }
  .exp-masters--cards .exp-masters__cta {
    grid-area: cta;
    align-self: start;
    order: 0;
    justify-content: flex-start;
    margin-top: 1.25rem;
  }
  .exp-masters--cards .exp-master-card { min-height: 0; height: 100%; }
  .exp-masters--cards .exp-master-card__media {
    aspect-ratio: auto;          /* la card llena la celda (viewport-fit), como el original */
    height: 100%;
    margin-bottom: 0;
  }
  .exp-masters--cards .exp-master-card__media img { object-position: center; }
  .exp-masters--cards .exp-master-card__caption {
    padding: clamp(40px, 6vw, 64px) clamp(16px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  }
}

.exp-masters--cards .exp-masters__statement { max-width: 48ch; }

/* Móvil · reorden: título → subtítulo → párrafo → GRID de masters → CTA.
   El statement (editorial-stack) se aplana con display:contents para que sus
   hijos (title/subtitle/rule/body/cta) sean items del layout flex y podamos
   intercalar la rejilla con `order`. gap:0 preserva el ritmo interno del
   editorial-stack (sus propios márgenes); la rejilla aporta su aire con
   margin propio y el CTA conserva su margin-top.
   Aplica hasta ≤1024 (petición Irene): tablet vertical usa el MISMO diseño
   que móvil (copy → grid 2×2 → CTA en columna única). */
@media (max-width: 1024px) {
  .exp-masters--cards .exp-masters__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .exp-masters--cards .exp-masters__statement {
    display: contents;
  }
  .exp-masters--cards .exp-masters__grid {
    order: 2;
    margin: clamp(36px, 7vw, 56px) 0;
  }
  .exp-masters--cards .exp-masters__cta {
    order: 3;
  }
}

.exp-master-card { margin: 0; }

.exp-master-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;          /* más rectangular que 4:5 → más alto = menos recorte de cabezas */
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--gradient-subtle);
}

.exp-master-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* preserva la cabeza (recorta por abajo, no por arriba) */
  display: block;
  transition:
    transform var(--dur-glide) var(--ease-soft),
    filter var(--dur-glide) var(--ease-soft);
}

/* Caption DENTRO de la foto · anclada al pie, alineada a la izquierda, sobre
   un degradado permanente que garantiza legibilidad sobre cualquier imagen.
   La bio va al final (debajo de nombre+meta) y se revela al hover. */
.exp-master-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  /* laterales y abajo = MISMO margen que las way-cards overlay (Expeditions/Camp):
     clamp(20,2.5vw,32). Arriba se mantiene grande por el fundido del degradado. */
  padding: clamp(40px, 6vw, 64px) clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 38%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}
.exp-master-card__name {
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--content-text-default);
}
.exp-master-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--content-text-default-weak);
}

/* Bio · oculta en reposo; al hover se despliega DEBAJO del nombre/meta.
   El bloque está anclado abajo, así que al crecer empuja nombre+meta hacia
   arriba y la bio aparece justo debajo. */
.exp-master-card__bio {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 300;
  line-height: 1.4;
  color: var(--content-text-default);
  transition:
    max-height var(--dur-glide) var(--ease-soft),
    opacity var(--dur-glide) var(--ease-soft),
    margin-top var(--dur-glide) var(--ease-soft);
}

.exp-master-card:hover .exp-master-card__bio,
.exp-master-card:focus-within .exp-master-card__bio {
  max-height: 10em;
  opacity: 1;
  margin-top: 0.5rem;
}

.exp-master-card:hover .exp-master-card__media img,
.exp-master-card:focus-within .exp-master-card__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .exp-master-card__media img,
  .exp-master-card:hover .exp-master-card__media img {
    transition: none;
    transform: none;
    filter: none;
  }
  .exp-master-card__bio { transition: none; }
}


/* =============================================================================
   8 · THE MOVEMENT
   Banda statement (gradient-strong + viñeta) con intro editorial centrada y
   una galería de "momentos" (rejilla de fotos con pie mono). Sin foto hero.
   ========================================================================== */
.exp-movement {
  position: relative;
  padding: var(--section-pad-y-lg) var(--gutter);
  background: var(--gradient-strong);
  isolation: isolate;
}

/* Grid 2-col · copy izquierda + galería derecha (mismo recipe que el
   manifesto "Stop guessing" de App). En móvil colapsa a 1-col. */
.exp-movement__grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 1024px) {
  /* La galería pesa más que el copy (5fr/7fr) → foto más grande. */
  .exp-movement__grid { grid-template-columns: 5fr 7fr; }
}

/* Columna de copy · cap editorial canónico para líneas cómodas. */
.exp-movement__copy { max-width: 48ch; }

/* Galería · UNA foto a la vez + paginador `.pager`. La foto activa hace un
   zoom-in lento con el `slowZoom` canónico del DS (mismo gesto que los heroes
   y, ahora, todas las galerías de slideshow). Ver `.gallery-zoom` en common.css. */
.exp-movement__gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

.exp-movement__slides {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--gradient-subtle);
}

.exp-movement__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-glide) var(--ease-soft);
}
.exp-movement__slide.is-active { opacity: 1; }

.exp-movement__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pie dentro de la foto · hora+lugar en mono + micro-historia en sans,
   abajo a la izquierda sobre un degradado de legibilidad. */
.exp-movement__slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(48px, 7vw, 76px) clamp(18px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%);
  pointer-events: none;
}
.exp-movement__slide-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-text-highlight);
}
.exp-movement__slide-story {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-body-sm), 1.6vw, var(--text-body-lg));
  font-weight: 300;
  line-height: 1.25;
  color: var(--content-text-default);
  max-width: 32ch;
}

/* El paginador se centra bajo la foto. */
.exp-movement__gallery .pager { justify-content: center; }

/* CTA · debajo del copy, alineado a la izquierda (cta-row--start). */
.exp-movement__cta {
  justify-content: flex-start;
  margin-top: 2rem;
}

/* Móvil · el CTA baja DEBAJO de la galería (antes quedaba entre el copy y las
   fotos). El copy (editorial-stack) se aplana con display:contents para poder
   intercalar la galería con `order`: copy-texto → galería → CTA. */
@media (max-width: 720px) {
  .exp-movement__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .exp-movement__copy {
    display: contents;
  }
  .exp-movement__gallery {
    order: 2;
    margin-top: clamp(32px, 6vw, 48px);
  }
  .exp-movement__cta {
    order: 3;
    justify-content: center;
  }
}


/* =============================================================================
   9 · FAQs
   editorial-stack header + acordeón nativo (<details>/<summary>) agrupado.
   Page-scoped — accordion no está aún en el DS.
   ========================================================================== */
.exp-faqs {
  background: var(--gradient-strong);
  padding: var(--section-pad-y-md) var(--gutter);
}

.exp-faqs__header { margin-bottom: clamp(40px, 5vw, 64px); }

/* Section title override · alineado con .pricing-faq__title (premium-pricing):
   el H2 de FAQ baja de display grande a heading-md (32px) para que la sección
   se sienta como un cierre conversacional, no un statement editorial. */
.exp-faqs .section-title {
  font-size: var(--text-heading-md);
}

.exp-faqs__inner {
  max-width: var(--max-article);   /* 720px · columna de lectura canónica */
  margin: 0 auto;
}

.exp-faq-group { margin: 0 0 clamp(32px, 4vw, 48px); }

.exp-faq-group__label {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-text-default-weak);
}

/* FAQ items · componente canónico `.faq` de common.css (auditoría
   2026-07 — antes había aquí una copia espejo `.exp-faq`). Solo quedan
   los ajustes page-scoped: la question baja un peldaño a body-md
   (sección de lectura densa) y el primer item de cada grupo lleva
   borde superior para cerrar el bloque visualmente. */
.exp-faq-group .faq:first-of-type {
  border-top: 1px solid var(--border-neutral-soft);
}

/* Override de tamaño retirado (2026-07): la question usa el body-lg
   canónico del componente .faq — mismo tamaño en TODAS las páginas. */

.exp-faqs__contact {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
}

.exp-faqs__contact a {
  color: var(--content-link-default);
  text-decoration: underline;
}


/* =============================================================================
   Responsive · narrow paddings (mobile)
   ========================================================================== */
@media (max-width: 480px) {
  .exp-hero,
  .exp-mission,
  .exp-ways,
  .exp-pursue,
  .exp-tool,
  .exp-masters,
  .exp-faqs {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  /* .exp-field-stories a 0 (full-bleed · ver bloque ≤720). */
  /* .exp-field-stories queda a 0 (full-bleed del slider) · ver bloque ≤720. */
  .exp-hero__credit { left: 16px; }
}

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