/* REFINE — Home and Summer sections.
 * Extracted from prototipo/public/css/styles.css minus what already lives in base.css
 * (spec home-summer, D4): the missing components (btn-pill, icon-btn, mask-line), SECCIONES
 * 01–05 with both dialogs, MOTION and RESPONSIVE without the header and footer rules, and the
 * heros "brillo -83" block. Same selectors, same values. Loaded on the Home and on Summer.
 *
 * Block theme adjustments:
 * - No @layer, as in base.css: the prototype order components → sections → motion →
 *   responsive is kept by source order. Where a later layer (or the unlayered responsive
 *   block) beat a more specific rule only because of its layer, the rule is repeated with
 *   enough specificity and a comment saying so.
 * - url("../assets/img/…") → url("../img/…"), without ?v=.
 * Tokens: tokens.css.
 */

/* ═════════════════════════ COMPONENTES ═════════════════════════ */

/* — CTA pastilla Summer (ref) — */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.782em 1.36em 0.816em; /* -15% (2026-09-27) sobre 0.92/1.6/0.96 */
  border-radius: 999px;
  background: var(--summer-accent);
  color: var(--refine-cream);
  font-family: var(--font-display);
  font-weight: 400;
  /* 2026-09-25: un escalón más chico que la primera versión (pedido del usuario) */
  font-size: var(--t-btn);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out);
}
/* CTA de compra de Summer (ref Julie), en la landing y en la home: arena en itálica bold. El texto va en tinta: crema
   sobre arena daba ~1,5:1, tinta da ~10:1 (spec design-fixes, DF-9 / D11). */
.btn-pill--sand {
  background: var(--summer-pill);
  color: var(--refine-ink);
  font-style: italic;
  font-weight: 700;
  letter-spacing: var(--track-meta);
}
.btn-pill--sand:hover,
.btn-pill--sand:focus-visible { background: color-mix(in srgb, var(--summer-pill) 90%, var(--refine-ink)); }
/* La flecha no está en reposo: aparece en hover y entra deslizándose a la derecha */
.btn-pill__arrow {
  flex: none;
  width: 0;
  height: 0.52em;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-0.6em);
  transition:
    width var(--dur-base) var(--ease-out),
    margin-left var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
/* Hover: un tono apenas más oscuro y la flecha aparece deslizándose a la derecha */
.btn-pill:hover,
.btn-pill:focus-visible {
  background: color-mix(in srgb, var(--summer-accent) 91%, var(--refine-ink));
}
.btn-pill:hover .btn-pill__arrow,
.btn-pill:focus-visible .btn-pill__arrow {
  width: 1.3em;
  margin-left: 0.7em;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-pill { transition: background-color var(--dur-fast) linear; }
  .btn-pill__arrow { transition: none; }
}
/* Desktop: +10% (2026-09-28). En mobile el tamaño quedó como estaba. El alto lo fija
   min-height (el cálculo por padding da ~34px), así que sube junto con --t-btn. */
@media (min-width: 1024px) {
  .btn-pill { min-height: 48.4px; }
}

/* Variante grande (en el prototipo, en summer.css). Shared by Summer, the checkout button and
   Asesorías/Gracias, which load sections.css but not summer.css (spec consultations-thanks, D7). */
.btn-pill--xl {
  /* -15% (2026-09-27): padding y alto mínimo (60 → 51px, sigue > 44px táctil) */
  min-height: 51px;
  padding: 0.935em 1.785em 0.969em;
  font-weight: 500;
  font-size: var(--t-btn);
  letter-spacing: 0.04em;
}
/* Desktop: +10% junto al resto de los CTAs (2026-09-28) */
@media (min-width: 1024px) {
  .btn-pill--xl { min-height: 56.1px; }
}

/* — Botones de control (carruseles) — */
.icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  color: var(--refine-ink);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.icon-btn { width: 56px; }
.icon-btn svg { width: 26px; height: 12px; transition: transform var(--dur-fast) var(--ease-out); }
.icon-btn:hover { background: var(--header-bg-scrolled); }
.icon-btn:hover svg { transform: translateX(var(--nudge, 3px)); }
.icon-btn:first-child { --nudge: -3px; }

/* — Máscara de línea para títulos display — */
.mask-line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.12em 0.04em 0;
  margin: -0.08em -0.12em -0.04em 0;
}
.mask-line > span { display: inline-block; }

/* ═════════════════════════ SECCIONES ═════════════════════════ */

/* ── 01 SUMMER HERO ─────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 38fr 62fr;
  min-height: max(100svh, 680px);
  overflow: hidden;
  background: var(--photo-pearl);
  color: var(--text-on-photo);
}
.hero__media { grid-row: 1; grid-column: 2; position: relative; overflow: hidden; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La modelo está a la derecha del cuadro: así entra la cara. El filtro de la foto vive al
   final del archivo; el hero no lleva velos (::before / ::after). */
.hero__img { object-position: 64% 50%; }

/* 2026-09-27: el hero del home pasa a foto a sangre, igual que la landing (la franja perlada se
   quitó del marcado en la limpieza del 2026-10-09). */
.hero:not(.hero--landing) .hero__media { grid-column: 1 / -1; }

.hero__chapter {
  position: absolute;
  z-index: 2;
  left: calc(var(--gutter) + clamp(0px, 2vw, 40px));
  top: calc(var(--header-top) + var(--header-h) + clamp(40px, 9vh, 104px));
  display: grid;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(clamp(17px, 1.3vw, 25px) * var(--hero-type-scale));
  line-height: 1.05;
  letter-spacing: var(--track-meta);
}
.hero__chapter strong { font-weight: 600; }

.hero__content {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: center;
  position: relative;
  z-index: 2;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-lg)) var(--gutter) var(--space-xl) var(--col-start);
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(var(--fs-display-xl) * var(--hero-type-scale) * var(--hero-title-scale));
  line-height: 0.8;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
  margin-left: -0.04em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em clamp(28px, 5.4vw, 104px);
  margin-top: clamp(16px, 1.8vw, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(18px, 1.74vw, 34px) * var(--hero-type-scale));
  line-height: 1;
  letter-spacing: var(--track-meta);
}
.hero__meta-kind {
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
}

.hero__lede {
  margin-top: clamp(22px, 2.6vw, 50px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--fs-lead) * var(--hero-type-scale));
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.hero__lede > span { display: block; }
/* Home, desktop: capítulo, meta y bajada +10% sobre --hero-type-scale (2026-09-27).
   El wordmark "summer" no cambia. */
@media (min-width: 1024px) {
  .hero:not(.hero--landing) .hero__chapter { font-size: calc(clamp(17px, 1.3vw, 25px) * var(--hero-type-scale) * 1.1); }
  .hero:not(.hero--landing) .hero__meta { font-size: calc(clamp(18px, 1.74vw, 34px) * var(--hero-type-scale) * 1.1); }
  .hero:not(.hero--landing) .hero__lede { font-size: var(--hero-copy-fs); }
  /* Mismo lugar que el bloque de la landing: bajo el centro, sin llegar al pie.
     +96px = alto aprox. de la fila de cards de la landing (--landing-card-h). */
  .hero:not(.hero--landing) .hero__content {
    align-self: end;
    padding-bottom: calc(var(--hero-block-bottom) + 96px);
  }
}

.hero .btn-pill { margin-top: clamp(26px, 2.6vw, 50px); }

/* ── 02 REFINELAB / BRAND BRIDGE ────────────────── */
.bridge {
  position: relative;
  display: grid;
  min-height: max(100svh, 680px);
  overflow: hidden;
  background: var(--photo-brand-wall);
  color: var(--text-on-photo);
}
.bridge__media { position: absolute; inset: 0; }
.bridge__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* 2026-09-27: más apagada para no saltar de golpe desde el hero oscuro (brillo 0.47).
     Suave: queda a mitad de camino, sigue leyéndose como sección clara. */
  filter: brightness(0.78) saturate(0.9);
}
/* Filtro suave para la legibilidad del texto crema: velo tenue general + refuerzo
   donde vive el texto (izquierda en desktop, abajo en mobile). Pedido del cliente. */
.bridge__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--text-veil-strong) 0%, var(--text-veil-soft) 42%, transparent 72%),
    var(--text-veil-base);
  pointer-events: none;
}
.bridge__content {
  position: relative;
  align-self: center;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-xl)) var(--gutter) var(--space-2xl) var(--col-start);
}
.bridge__logo { font-size: calc(clamp(54px, 4.6vw, 88px) * var(--type-display)); }
.bridge__statement {
  margin-top: clamp(20px, 2.1vw, 40px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.bridge__sub {
  margin-top: clamp(14px, 1.3vw, 26px);
  max-width: 48em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  margin-top: clamp(56px, 12vh, 150px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(38px, 4.75vw, 96px) * var(--type-display));
  line-height: 0.9;
  letter-spacing: var(--track-display-xl); word-spacing: var(--word-display-xl);
  text-transform: uppercase;
}
.bridge__arrow {
  width: 0.46em;
  height: 0.78em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.bridge__cta:hover .bridge__arrow { transform: translateY(0.12em); }
/* El salto solo existe en mobile (ver @media ≤767): en desktop el texto va en una línea. */
.bridge__cta-br { display: none; }

/* ── 03 THREE WAYS TO REFINE ────────────────────── */
.ways {
  /* Título y PRÓXIMAMENTE se posicionan solos (header absoluto + etiqueta absoluta), así que
     comparten estas medidas: la etiqueta se ubica SIEMPRE debajo del alto real del título. */
  --ways-pad-top: calc(var(--header-top) + var(--header-h) + clamp(14px, 3.4vh, 38px));
  --ways-head-gap: clamp(20px, 3vh, 36px);    /* del borde del bloque al título */
  --ways-title-fs: calc(clamp(24px, 2.15vw, 42px) * var(--type-mid));  /* line-height 1 → el alto es el font-size */
  --ways-status-fs: var(--t-sm);
  /* El hueco que se VE no es este valor: entre las dos cajas hay relleno estructural
     (el sobrante bajo la versalita del título + el medio interlineado de la etiqueta) y ese
     relleno escala con el cuerpo. Si el token va en vw, el aire visible se dispara en pantallas
     grandes y desaparece en chicas. Por eso se deriva de los dos cuerpos y se le resta el
     relleno: así el aire visible queda SIEMPRE en ~0.30 de la altura de versalita del título. */
  --ways-status-nudge: 0px;                    /* ajuste fino por breakpoint */
  --ways-status-gap: calc(var(--ways-title-fs) * 0.099 - var(--ways-status-fs) * 0.19 - var(--ways-status-nudge));
  position: relative;
  padding-top: var(--ways-pad-top);
  background: var(--bg-primary);
}
.ways__header {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: calc(var(--ways-pad-top) + var(--ways-head-gap));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.22vw, 6px);
  color: var(--text-on-photo);
  pointer-events: none;
}
.ways__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--ways-title-fs);
  line-height: 1;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
  text-transform: uppercase;
}
/* PRÓXIMAMENTE: etiqueta de texto debajo del título. Absoluta en todos los anchos:
   acompaña al título y se va con él al scrollear (antes en mobile era sticky). */
.ways__status {
  /* Corrección óptica: la "T" itálica del título tiene mucho más prosa izquierda que la "P"
     de Mulish, así que a igual `left` la etiqueta sobresale. Se compensa con la diferencia
     real de prosas (≈0.095em del título − ≈0.06em de la etiqueta) para que los trazos
     arranquen en la misma vertical a cualquier tamaño. */
  --ways-optical: calc(var(--ways-title-fs) * 0.095 - var(--ways-status-fs) * 0.06);
  position: absolute;
  z-index: 3;
  left: calc(var(--gutter) + var(--ways-optical));
  top: calc(var(--ways-pad-top) + var(--ways-head-gap) + var(--ways-title-fs) + var(--ways-status-gap));
  margin: 0;
  color: var(--text-on-photo);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--ways-status-fs); /* +2px sobre el original (pedido del usuario) */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}

/* 3 cards fijas (sin carrusel): alto generoso, la modelo entera o casi. */
.ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.program {
  --program-color: var(--refine-cream);
  position: relative;
  /* foto completa (941×1672): sin recortar pies ni manos de la pose (PRD §15) */
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  container-type: inline-size;
}
.program[data-program="tone-flow"] { --program-color: var(--tone-flow); }
.program[data-program="lean-form"] { --program-color: var(--lean-form); }
.program[data-program="run-shape"] { --program-color: var(--run-shape); }

/* Velo por programa: oscuro detrás de los nombres claros (Tone, Run); Lean no lleva,
   su bordó ya contrasta sobre el fondo claro. Más un velo tenue arriba para el título crema. */
.program { --program-veil: var(--ways-veil-dark); }
.program[data-program="run-shape"] { --program-veil: var(--ways-veil-run); }
.program[data-program="lean-form"] { --program-veil: transparent; }

.program__inner { position: absolute; inset: 0; display: block; }
.program__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--ways-veil-top) 0%, transparent 24%),
    linear-gradient(180deg, transparent 34%, var(--program-veil) 58%, transparent 82%);
  pointer-events: none;
}
.program__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
  transition: transform 1400ms var(--ease-out);
  -webkit-user-drag: none;
}
.program__name {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 58%;
  translate: -50% -50%;
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  color: var(--program-color);
  font-family: var(--font-display);
  /* 2026-09-27: un escalón debajo del "summer" del hero (85%), sin pasarse del ancho
     de la card (15.5cqi es lo que entra: los nombres no se parten) */
  font-size: min(15.5cqi, calc(var(--hero-title-fs) * 0.85));
  line-height: 1;
  white-space: nowrap;
  transition: translate var(--dur-slow) var(--ease-out);
}
.program__name-strong { font-weight: 700; letter-spacing: var(--track-program); word-spacing: var(--word-program); }
.program__name-light { font-weight: 300; letter-spacing: var(--track-program); word-spacing: var(--word-program); }

.program:hover .program__img { transform: scale(1.035); }
.program:hover .program__name { translate: -50% calc(-50% - 8px); }


/* ── 04 THE REFINE METHOD ───────────────────────── */
/* Composición de la ref: la foto se ancla abajo a la derecha y la pared del estudio
   se extiende arriba/izquierda (colores muestreados del borde del asset), dejando aire para el texto. */
.method {
  position: relative;
  display: grid;
  min-height: max(100svh, 760px);
  overflow: hidden;
  color: var(--text-on-photo);
  background: linear-gradient(to bottom, #d4d0c8 0%, #c8c3bc 55%, #b4b1ab 100%);
}
.method__media {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 2400 / 1886;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
  mask-image: linear-gradient(to right, transparent 0%, #000 16%);
  pointer-events: none;
}
.method__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

/* Filtro suave de izquierda a derecha (mismo sistema que Summer y Brand Bridge):
   refuerza la columna de texto y se desvanece antes de la modelo. */
.method::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--text-veil-strong) 0%, var(--text-veil-soft) 45%, transparent 75%),
    var(--text-veil-base);
  pointer-events: none;
}
.method__content {
  position: relative;
  z-index: 2;
  display: grid;
  /* minmax(0,…): sin esto, un hijo con width:max-content estira la columna más allá del
     padding y los pasos se salen por la derecha (el gutter derecho desaparece). */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: clamp(36px, 7vh, 96px);
  padding: calc(var(--header-top) + var(--header-h) + var(--space-xl)) var(--gutter) var(--space-2xl);
}
.method__head {
  display: grid;
  /* Igual que en .method__content: la columna automática se dimensionaba por el max-content
     de la bajada y se salía de la caja, así que el `max-width: 100%` de la bajada no la
     frenaba (resolvía contra una columna ya desbordada). */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: end;
  gap: clamp(10px, 1vw, 18px);
  width: fit-content;
}
.method__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(56px, 5.9vw, 118px) * var(--type-display));
  line-height: 0.86;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
  text-transform: uppercase;
  /* 2026-09-27: en una sola línea (con la escala minimal, partido en dos no tenía sentido) */
  white-space: nowrap;
}
.method__title .mask-line { display: inline-block; }
.method__note {
  /* Las tres líneas ya vienen cortadas a mano con <br>: la caja se mide por la más larga
     para que ninguna se parta sola. El tope la contiene en pantallas chicas.
     Nada de 100vw acá: incluye la barra de scroll y deja la caja ~15px más ancha que el
     contenedor real, lo que empujaba la columna y comía el gutter derecho de los pasos. */
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.5em;
  font-family: var(--font-body);
  font-weight: 400;
  /* 2026-09-27: era --t-sm (tier de captions) y quedaba el texto más chico del sitio; es bajada de sección → cuerpo */
  font-size: var(--t-md);
  line-height: 1.35;
}

.method__steps { width: min(43vw, 800px); }
.step {
  display: grid;
  grid-template-columns: clamp(64px, 5.4vw, 104px) 1fr;
  align-items: start;
  padding-block: clamp(14px, 1.9vh, 24px);
  border-top: 1px solid var(--hairline-on-photo);
}
.step:last-child { border-bottom: 1px solid var(--hairline-on-photo); }
.step__num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: calc(clamp(34px, 2.8vw, 56px) * var(--type-display));
  line-height: 0.82;
  letter-spacing: var(--track-title);
}
.step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(10px, 0.9vw, 18px);
}
.step__name,
.step__product {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 1.34vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.step__name { text-transform: uppercase; }
.step__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.step__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Jerarquía: DISPONIBLE es lo accionable → texto crema con más cuerpo y peso (sin pastilla,
   2026-09-25 a pedido del usuario); PRÓXIMAMENTE queda chico, liviano y tenue. */
.step[data-status="available"] .step__status {
  align-self: center; /* la fila alinea por baseline y la etiqueta colgaba */
  font-weight: 700;
  font-size: var(--t-xs);
  line-height: 1.2;
  letter-spacing: 0.18em;
}
.step[data-status="available"] .step__status::before { width: 7px; height: 7px; }
.step[data-status="coming-soon"] .step__status {
  gap: 6px;
  font-weight: 500;
  font-size: var(--t-2xs);
  letter-spacing: 0.16em;
  opacity: 0.55;
}
.step[data-status="coming-soon"] .step__status::before { width: 5px; height: 5px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.step__text {
  margin-top: 0.4em;
  max-width: 38em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ── 05 REFINERS ────────────────────────────────── */
.refiners {
  --img-w: clamp(280px, 29vw, 560px);   /* foto antes/después (10:9) */
  --cap-w: clamp(170px, 13.5vw, 260px); /* copy a la izquierda de la foto */
  --case-gap: clamp(80px, 8vw, 160px);
  position: relative;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-lg)) 0 calc(var(--space-2xl) + 24px);
  overflow: hidden;
  background: var(--photo-pearl);
  color: var(--text-on-photo);
}
.refiners__bg { position: absolute; inset: 0; }
.refiners__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Filtro suave de legibilidad (mismo sistema que las otras secciones): velo parejo
   porque el copy recorre todo el ancho, con refuerzo arriba detrás del título. */
.refiners__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--text-veil-soft) 0%, transparent 38%),
    var(--refiners-veil);
}

.refiners__header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline; /* la última línea del subtítulo apoya en la línea base de "refiners" */
  gap: var(--space-xs) clamp(22px, 2.2vw, 44px);
  padding-inline: var(--gutter);
}
.refiners__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(68px, 7.9vw, 158px) * var(--type-display));
  line-height: 0.82;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
}
.refiners__tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.refiners__marquee {
  position: relative;
  margin-top: clamp(64px, 11vh, 150px);
  touch-action: pan-y;
  user-select: none;
}
.refiners__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Cada cambio: copy a la izquierda + foto; todos del mismo tamaño */
.case {
  flex: none;
  display: grid;
  grid-template-columns: var(--cap-w) var(--img-w);
  align-items: end;
  column-gap: clamp(18px, 1.6vw, 32px);
  margin-right: var(--case-gap);
}
.case__caption {
  padding-bottom: clamp(4px, 0.4vw, 8px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-sm);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.case__title {
  margin-bottom: 0.6em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.case__frame {
  aspect-ratio: 10 / 9;
  border: clamp(3px, 0.24vw, 5px) solid rgb(246 243 238 / 0.9);
  background: var(--bg-primary);
}
.case__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.refiners__controls {
  display: flex;
  align-self: flex-end;
  gap: 2px;
  margin-left: auto;
  padding-bottom: 0.6em;
}

/* botón del caso: la foto entera es el disparador del modal */
button.case__frame {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  transition: filter var(--dur-fast) var(--ease-out);
}
button.case__frame:hover { filter: brightness(1.04); }

/* Modal de caso — minimal: el diálogo es transparente; el panel lleva fondo y scroll;
   la X vive fuera del panel (en mobile, arriba y afuera de la imagen). */
.case-modal {
  width: min(92vw, 1040px);
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--refine-ink);
  overflow: visible;
}
.case-modal::backdrop {
  background: rgb(34 34 34 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.case-modal[open] { animation: case-in var(--dur-base) var(--ease-out); }
@keyframes case-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Panel con el mismo lenguaje que el carrusel de Refiners: perlado + velo, copy crema,
   foto con marco crema. Desktop: copy a la izquierda de la foto. Mobile: copy debajo. */
.case-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(20px, 2.4vw, 40px);
  max-height: 90svh;
  padding: clamp(24px, 3vw, 44px);
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(var(--refiners-veil), var(--refiners-veil)),
    url("../img/pearl-1200.webp") center / cover no-repeat,
    var(--photo-pearl);
  color: var(--text-on-photo);
  box-shadow: 0 40px 100px -30px rgb(34 34 34 / 0.55);
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.case-modal__panel:focus { outline: none; }
.case-modal__panel::-webkit-scrollbar { width: 6px; }
.case-modal__panel::-webkit-scrollbar-track { background: transparent; margin-block: 18px; }
.case-modal__panel::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }
.case-modal__panel::-webkit-scrollbar-button { display: none; height: 0; }
.case-modal__caption {
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.case-modal__title {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: inherit;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.case-modal__text { margin: 0; }
.case-modal__frame {
  margin: 0;
  aspect-ratio: 10 / 9;
  max-height: calc(90svh - 2 * clamp(24px, 3vw, 44px));
  border: clamp(3px, 0.3vw, 5px) solid rgb(246 243 238 / 0.9);
  background: var(--bg-primary);
  justify-self: end;
}
.case-modal__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* X: sin círculo, liviana; fuera del panel */
.case-modal__close {
  position: absolute;
  top: -52px;
  right: -6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--refine-cream);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.case-modal__close svg { width: 20px; height: 20px; }
.case-modal__close:hover { opacity: 1; transform: rotate(90deg); }
.case-modal__close:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 50%; }
/* desktop: la X a la derecha del panel, afuera */
@media (min-width: 1024px) {
  .case-modal__close { top: -4px; right: -56px; }
}
@media (max-width: 767px) {
  .case-modal { width: calc(100vw - 32px); }
  .case-modal__panel {
    grid-template-columns: 1fr;
    row-gap: 14px;
    max-height: calc(100svh - 120px);
    padding: 14px 14px 18px;
  }
  .case-modal__frame { grid-row: 1; justify-self: stretch; max-height: none; }
  .case-modal__caption { grid-row: 2; padding: 0 4px; font-size: var(--t-md); }
}
@media (prefers-reduced-motion: reduce) { .case-modal[open] { animation: none; } }

/* — Modal de programa (próximamente) —
 * La foto del programa a pantalla completa y desenfocada, el nombre con la misma
 * tipografía y color que en la card, y la etiqueta debajo. */
.program-modal {
  --program-color: var(--refine-cream);
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg-inverse);
  overflow: hidden;
}
.program-modal[data-program="tone-flow"] { --program-color: var(--tone-flow); }
.program-modal[data-program="lean-form"] { --program-color: var(--lean-form); }
.program-modal[data-program="run-shape"] { --program-color: var(--run-shape); }
.program-modal::backdrop { background: rgb(34 34 34 / 0.62); }
.program-modal[open] { animation: case-in var(--dur-base) var(--ease-out); }
.program-modal__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
  /* scale: el blur deja los bordes transparentes si la imagen no desborda */
  transform: scale(1.12);
  filter: blur(26px) saturate(0.9) brightness(0.62);
}
.program-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  height: 100%;
  padding-inline: var(--gutter);
}
.program-modal__panel:focus { outline: none; }
.program-modal__name {
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  margin: 0;
  color: var(--program-color);
  font-family: var(--font-display);
  /* El nombre más ancho mide 5.08em con el tracking de programa: el ancho útil
     dividido 5.28 (~4% de margen) garantiza que entre siempre en una línea. */
  font-size: min(calc((100vw - 2 * var(--gutter)) / 5.28), calc(var(--hero-title-fs) * 1.1));
  line-height: 1;
  white-space: nowrap;
}
.program-modal__soon {
  margin: 0;
  color: var(--text-on-photo);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.program-modal__close {
  position: absolute;
  z-index: 2;
  top: var(--header-top);
  right: var(--gutter);
  color: var(--text-on-photo);
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.program-modal__close svg { width: 22px; height: 22px; }
.program-modal__close:hover { opacity: 1; transform: rotate(90deg); }
.program-modal__close:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .program-modal[open] { animation: none; } }


/* — Summer CTA 2 (home, entre método y refiners; spec design-fixes, DF-10) —
   Referencia de Fran: la foto de Summer como panel vertical a la izquierda, sobre el fondo de
   palmeras a sangre; el texto alineado a la derecha sobre la foto. Solo piezas del sitio: la
   fórmula del wordmark del hero (--hero-title-fs), .mask-line, data-reveal y .btn-pill (D9).
   Teléfono: solo la foto con el texto encima; el fondo es un background dentro del media query
   de escritorio, así que no se descarga (D10). El velo oscurece apenas la zona del texto para que
   el crema se lea sobre la piel.
   Fotos con el tratamiento del resto de la home (Fran, AJ-5): apagadas y cálidas como la foto del
   hero de Summer en el teléfono, más el velo general de Método. El fondo va en un ::before para
   que el filtro no toque el texto. */
.cta2 { --cta2-photo-filter: saturate(0.78) contrast(0.96) brightness(0.8) sepia(0.06); position: relative; overflow: hidden; isolation: isolate; }
.cta2__panel { position: relative; z-index: 1; isolation: isolate; }
.cta2__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 40%;
  filter: var(--cta2-photo-filter);
}
.cta2__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--text-veil-deep) 0%, var(--text-veil-soft) 42%, transparent 62%, var(--text-veil-soft) 100%),
    var(--text-veil-base);
  pointer-events: none;
}
.cta2__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: clamp(80px, 22%, 140px) var(--gutter) var(--space-lg);
  color: var(--text-on-photo);
}
.cta2__kicker {
  display: grid;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.25vw, 22px);
  line-height: 1.15;
  letter-spacing: var(--track-tight);
}
.cta2__title {
  margin-top: 0.06em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(var(--hero-title-fs) * 1.15);
  line-height: 0.8;
  letter-spacing: var(--track-display); word-spacing: var(--word-display);
  margin-right: -0.04em;
}
.cta2__mix {
  margin-top: 0.9em;
  font-family: var(--font-display);
  font-size: clamp(13px, 0.95vw, 17px);
  line-height: 1.2;
}
/* The buy CTA, the same as the Summer card's (Fran): text, checkout link, sand style, and full
   width on a phone as in .s-offer. It sits in .cta2__buy, with the price and the currency switcher. */
.cta2__btn { width: 100%; }
@media (min-width: 768px) {
  .cta2__btn { width: auto; }
}

@media (min-width: 1024px) {
  .cta2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(var(--text-veil-base), var(--text-veil-base)), url("../img/cta-summer-bg-1200.webp") 70% 50% / cover no-repeat;
    filter: var(--cta2-photo-filter);
  }
  .cta2__panel {
    width: min(37%, 640px);
    margin-left: var(--gutter);
  }
  .cta2__content { padding: 22% clamp(24px, 3vw, 56px) var(--space-lg); }
}
@media (min-width: 1366px) {
  .cta2::before { background-image: linear-gradient(var(--text-veil-base), var(--text-veil-base)), url("../img/cta-summer-bg-1672.webp"); }
}
@media (min-width: 1700px) {
  .cta2::before { background-image: linear-gradient(var(--text-veil-base), var(--text-veil-base)), url("../img/cta-summer-bg-2398.webp"); }
}

/* Selector de moneda bajo el CTA (spec summer-product, D5; design-fixes, DF-9 / D3). Lo usan la tarjeta de
 * Summer y el CTA de la Home (antes vivía en summer.css). No está en el prototipo. Discreto, para que mande el CTA: texto chico sin relleno; la activa con la línea
 * fija del menú de Mi cuenta y en negrita, el resto en tinta suave. Cada botón conserva ≥ 24 px
 * de área táctil (WCAG 2.2, 2.5.8). Sin JS no hace nada, así que no se muestra (queda ARS). */
html:not(.js) .currency-switch { display: none; }
.currency-switch {
  display: flex;
  gap: 18px;
  margin-top: 14px;
}
.currency-switch__btn {
  position: relative;
  min-width: 24px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--summer-ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-label);
  cursor: pointer;
}
.currency-switch__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.currency-switch__btn:hover { color: var(--text-primary); }
.currency-switch__btn:hover::after,
.currency-switch__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.currency-switch__btn[aria-pressed="true"] { color: var(--text-primary); font-weight: 700; }
.currency-switch__btn:focus-visible {
  outline: 2px solid var(--refine-ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .currency-switch__btn::after { transition: none; }
}

/* El CTA de la Home con precio y moneda (Fran, 2026-10-09): el botón va directo al checkout, que cobra en la
   moneda de la cookie de YayCurrency; sin el selector, quien llegaba por la Home pagaba en ARS. Las mismas
   piezas que la tarjeta de Summer (precio, botón, selector), en crema sobre la foto y alineadas a la derecha. */
.cta2__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 18%;
}
.cta2__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  letter-spacing: var(--track-title);
}
.cta2 .currency-switch { margin-top: 0; }
.cta2 .currency-switch__btn:focus-visible { outline-color: var(--text-on-photo); }
.cta2 .currency-switch__btn { color: rgb(255 254 234 / 0.78); }
.cta2 .currency-switch__btn:hover,
.cta2 .currency-switch__btn[aria-pressed="true"] { color: var(--text-on-photo); }

/* ═════════════════════════ MOTION ═════════════════════════ */
@keyframes hero-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
/* Zoom de entrada de la foto del hero: arranca apenas ampliada y se asienta en 12s */
.hero__img { animation: hero-settle 12s var(--ease-out) both; transform-origin: 60% 45%; }
/* Punto de DISPONIBLE: pulso suave, señal de "abierto ahora" */
/* El punto vive sobre la foto, no sobre la pastilla crema → halo crema */
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(255 254 234 / 0.45); }
  70%  { box-shadow: 0 0 0 7px rgb(255 254 234 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 254 234 / 0); }
}
.step[data-status="available"] .step__status::before { animation: status-pulse 2.2s var(--ease-out) infinite; }

/* Estados iniciales sólo con JS: sin JS todo es visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* El CTA combina su entrada (con stagger) con el hover (sin retardo) */
.js .btn-pill[data-reveal] {
  transition-property: opacity, transform, background-color;
  transition-duration: var(--dur-base), var(--dur-slow), var(--dur-base);
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s;
}

.js .mask-line > span {
  transform: translateY(108%);
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .mask-line.is-in > span { transform: none; }

/* El primer pantallazo ([data-reveal-load] en la sección) entra con la carga, por CSS: la misma
   entrada (duraciones, curva, escalonado) sin esperar a reveal.js, que llega con defer. Si esperaba,
   el texto del hero quedaba invisible ~2 s y era el LCP (Lighthouse, 2026-10-10). El escalonado
   viene escrito en el markup (`--i`); reveal.js deja estos elementos quietos. Siguen con reveal.js
   las .pcard de Summer (su aparición es otra, summer.css) y el formulario de Asesorías: visible desde
   el primer cuadro, se corría cuando intl-tel-input armaba el campo de teléfono (CLS 0,062). */
@keyframes refine-reveal-fade { from { opacity: 0; } }
@keyframes refine-reveal-rise { from { transform: translateY(28px); } }
@keyframes refine-mask-rise { from { transform: translateY(108%); } }
.js [data-reveal-load] [data-reveal]:not(.pcard, .as-form) {
  opacity: 1;
  transform: none;
  animation:
    refine-reveal-fade var(--dur-base) var(--ease-out) both,
    refine-reveal-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal-load] .mask-line > span {
  transform: none;
  animation: refine-mask-rise 1100ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .hero__img, .step__status::before { animation: none; }
  .js [data-reveal],
  .js .mask-line > span { opacity: 1; transform: none; transition: none; }
  .js [data-reveal-load] [data-reveal],
  .js [data-reveal-load] .mask-line > span { animation: none; }
  .program__img, .program__name { transition: none; }
}

/* ═════════════════════════ RESPONSIVE ═════════════════════════ */

/* ≥768 — en desktop la etiqueta va 1,5px más pegada al título (pedido del usuario). */
@media (min-width: 768px) {
  .ways { --ways-status-nudge: 1.5px; }
}

/* ≤1279 — laptop chico */
@media (max-width: 1279px) {
  .method__steps { width: min(46vw, 760px); }
}

/* ≤1023 — tablet y mobile: se reinterpreta cada sección */
@media (max-width: 1023px) {
  /* Hero responsive.
     Base común (home + landing): foto a pantalla completa, sin el panel perlado. */
  :root { --fs-display-xl: min(23.5vw, 150px); }
  .hero {
    /* minmax(0,…): si no, el título desborda la columna y ensancha el hero */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: max(100svh, 620px);
  }
  .hero__media { grid-row: 1; grid-column: 1; }
  .hero__img { object-position: 62% 50%; transform-origin: 62% 50%; }
  .hero__content { grid-row: 1; min-width: 0; }

  /* Landing Summer: la primera fila queda fija aunque se abran las cards. El acordeón
     suma altura debajo y nunca desplaza el copy hacia arriba. */
  .hero--landing {
    --landing-mobile-h: max(88svh, 580px);
    --landing-card-h: clamp(82px, 13svh, 92px);
    --landing-pillar-row: var(--landing-card-h);
    grid-template-rows: auto var(--landing-pillar-row);
    min-height: 0;
    overflow: visible;
  }
  .hero--landing .hero__content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: calc(var(--landing-mobile-h) - var(--landing-pillar-row));
    padding: calc(var(--header-top) + var(--header-h) + var(--space-xl)) clamp(24px, 14vw, 96px) clamp(64px, 11svh, 92px) var(--gutter);
    text-align: right;
  }
  .hero--landing .hero__title { width: 100%; margin-bottom: 0.04em; font-size: calc(min(24.2vw, 150px) * var(--hero-type-scale) * var(--hero-title-scale)); }
  .hero--landing .hero__headline { max-width: none; line-height: 1.12; } /* tamaño: summer.css */
  .hero--landing .hero__headline > span { display: block; }
  .hero--landing .hero__lede { font-size: calc(clamp(16px, 2.5vw, 22px) * var(--hero-type-scale)); line-height: 1.35; max-width: 34em; }
  .hero--landing .hero__lede > span { text-wrap: balance; }
  .hero--landing .hero__lede > span + span { margin-top: 0.3em; }

  /* ── Hero del home: composición de la ref mobile de Julie (SUMMER WEB MOVIL/1.png).
     Foto a pantalla completa (el filtro, al final del archivo), bloque de texto
     centrado en vertical, "4 semanas" al margen derecho, bajada en mayúsculas justificada
     con los dos conceptos en amarillo, y pastilla chica alineada a la derecha. */
  .hero:not(.hero--landing) .hero__content {
    /* ancho del bloque bajada + CTA: en la ref ocupa 269 de 375 y va centrado en la caja */
    --hero-col: min(72vw, 450px);
    align-self: center;
    /* el padding-bottom sube el bloque respecto del centro exacto,
       como en la ref (el aire de abajo es un poco menor que el de arriba) */
    padding: 0 clamp(18px, 10.4vw, 66px) 7px clamp(20px, 11.3vw, 72px);
  }

  .hero:not(.hero--landing) .hero__title {
    font-size: calc(min(24.2vw, 150px) * var(--hero-type-scale) * var(--hero-title-scale));
    margin-bottom: 0;
  }

  /* Fila 1: UN CHALLENGE · 4 semanas (a la derecha). Fila 2: entrenamiento + nutrición. */
  .hero:not(.hero--landing) .hero__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: clamp(16px, 5vw, 48px);
    row-gap: 0;
    margin-top: 15px;
    /* sin --hero-type-scale (en mobile quedaba en ~9px); +10% el 2026-09-27: apenas se leía */
    font-size: calc(clamp(14px, 4.18vw, 26px) * 1.21); /* +10% y otro +10% */
    /* 2026-09-25: la ref las tenía casi pegadas; +2,6px de aire entre las dos líneas */
    line-height: 1;
  }
  .hero__meta-kind { grid-area: 1 / 1; }
  .hero__meta-dur { grid-area: 1 / 2; justify-self: end; }
  .hero__meta-mix { grid-area: 2 / 1 / 2 / -1; font-size: 0.85em; }

  .hero:not(.hero--landing) .hero__lede {
    width: var(--hero-col);
    max-width: none;
    margin-top: 79px;
    margin-inline: auto;
    font-size: var(--hero-copy-fs); /* tokens.css: sin la escala (bajaba a ~7.7px), +10% y +10% */
    /* 2026-09-25: +2,2px por línea sobre el 1.02 medido en la ref */
    line-height: 1.22;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: justify;
    hyphens: none;
  }
  .hero:not(.hero--landing) .hero__lede > span { display: inline; text-wrap: wrap; }
  .hero:not(.hero--landing) .hero__lede > span + span { margin-top: 0; }
  .hero__lede-hi { color: var(--summer-highlight); }

  .hero__chapter {
    left: var(--gutter);
    top: calc(var(--header-top) + var(--header-h) + 32px); /* 2026-09-27: era 14px, quedaba pegado al nav */
    font-size: calc(clamp(12.5px, 3.4vw, 18px) * 1.21); /* ídem, +10% y +10% */
    letter-spacing: -0.09em;
    word-spacing: 0.14em;
  }

  /* Pastilla chica alineada al borde derecho del bloque de texto (como en la ref).
     El área táctil se agranda con un ::before invisible para no engordar la pastilla. */
  /* Proporciones de la pastilla: las del home mandan y la landing las comparte (2026-09-27).
     La posición (margin) es propia de cada hero. */
  .hero .btn-pill {
    position: relative;
    display: flex;
    width: fit-content;
    min-height: 0;
    font-size: var(--t-btn);
    /* Interletreado abierto (mín. 0,5px, pedido del usuario) en vez del cerrado de los títulos.
       Al abrirse ya no hace falta compensar el espacio entre palabras. */
    letter-spacing: max(0.5px, 0.04em);
    word-spacing: normal;
  }
  .hero:not(.hero--landing) .btn-pill { margin: 18px calc((100% - var(--hero-col)) / 2) 0 auto; }
  .hero .btn-pill::before {
    content: "";
    position: absolute;
    inset: -5px -6px;
  }

  /* Bridge: foto completa con el texto sobre el cuerpo (como la ref) */
  .bridge { min-height: max(100svh, 640px); }
  .bridge__media img { object-position: 46% 50%; }
  .bridge__content { align-self: end; padding-bottom: calc(var(--space-2xl) + 32px); }


  /* Method: texto sobre la pared, foto como franja inferior que continúa el color */
  .method { display: flex; flex-direction: column; min-height: 0; background: var(--photo-method-wall); }
  .method__content { order: 1; padding-bottom: var(--space-xl); }
  .method__media {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 2400 / 1886;
    /* La foto se DISUELVE en el fondo de la sección, no se tapa con un degradado encima.
       El degradado anterior se pintaba por arriba de .method::after, así que su color de pared
       quedaba sin velar mientras el fondo de arriba sí lo estaba: de ahí el escalón. Con máscara,
       el velo de la sección cae por igual sobre foto y fondo y el corte desaparece.
       El fundido termina al 30% del alto del bloque, que cae entero sobre pared vacía de la foto
       (la modelo recién aparece al 36%). Los pasos intermedios evitan la banda de Mach. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.25) 10%, rgb(0 0 0 / 0.72) 20%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 0.25) 10%, rgb(0 0 0 / 0.72) 20%, #000 30%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .method__media::before { content: none; }
  .method__media img { object-position: 60% 100%; }
  .method__steps { width: 100%; }
}

/* ≤767 — mobile */
@media (max-width: 767px) {
  /* Home: en pantallas muy angostas la bajada llega al piso de 10px y necesita más ancho
     para seguir entrando en 3 líneas como en la ref. */
  @media (max-width: 340px) {
    .hero:not(.hero--landing) .hero__content { --hero-col: 79vw; }
  }

  .bridge__media img { object-position: 63% 50%; }
  .bridge__media::after {
    background:
      linear-gradient(0deg, var(--text-veil-strong) 0%, var(--text-veil-soft) 45%, transparent 70%),
      var(--text-veil-base);
  }
  .bridge__statement { font-size: var(--t-lg); line-height: 1.3; }
  /* Dos líneas ("Descubrí" / "los programas ↓"): la flecha queda a la derecha de la segunda. */
  .bridge__cta { display: block; font-size: calc(clamp(34px, 10.6vw, 60px) * var(--type-display)); line-height: 1.02; }
  .bridge__cta-br { display: inline; }
  .bridge__arrow { display: inline-block; margin-left: 0.18em; vertical-align: -0.04em; }

  /* Three Ways: las 3 cards se apilan, formato 4:5 encuadrado en la modelo */
  .ways__status { text-shadow: 0 1px 10px rgb(34 34 34 / 0.35); }
  .ways__grid { grid-template-columns: 1fr; }
  /* Each card takes its photo's own ratio, so the whole model is visible with no crop
     (2026-10-06, Fran: centered, no cropping). Run/Tone are 941×1412, Lean is 941×1267. */
  .program { aspect-ratio: 941 / 1412; }
  .program[data-program="lean-form"] { aspect-ratio: 941 / 1267; }
  .program__img { object-position: 50% 50%; }

  /* Only PRÓXIMAMENTE stays pinned under the site header while the programs scroll; the
     title scrolls away as usual (2026-10-06, Fran). The status goes back into the flow as
     sticky, starting exactly where it was (under the title), with a negative bottom margin
     equal to its own box so it overlays the first card instead of pushing it down. It sticks
     inside .ways__stack, so it releases at the end of the section. */
  .ways {
    --ways-sticky-top: calc(var(--header-top) + var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
    --ways-status-lh: 1.2;
  }
  .ways__status {
    position: sticky;
    left: auto;
    top: calc(var(--ways-sticky-top) + var(--ways-head-gap));
    width: max-content;
    margin: calc(var(--ways-head-gap) + var(--ways-title-fs) + var(--ways-status-gap)) 0 calc(-1 * (var(--ways-head-gap) + var(--ways-title-fs) + var(--ways-status-gap) + var(--ways-status-fs) * var(--ways-status-lh))) calc(var(--gutter) + var(--ways-optical));
    line-height: var(--ways-status-lh);
  }
  /* +20% sobre el tamaño anterior (pedido 2026-09-27). El nombre más ancho mide 5.08em
     (métricas reales de Be Vietnam Pro 700/300 con el tracking y word-spacing de programa),
     así que el tope duro es 18.9cqi: ancho de card / 5.28 (~4% de margen) y nunca se recorta. */
  .program__name { font-size: min(18.9cqi, calc(var(--hero-title-fs) * 1.02)); }

  /* En una línea mide ~9.04em (métricas de Be Vietnam Pro Bold Italic con el tracking
     display): tope = ancho útil / 9.4 (~4% de margen) para que nunca se salga. */
  .method__title { font-size: min(calc(clamp(52px, 15vw, 80px) * var(--type-display)), calc((100vw - 2 * var(--gutter)) / 9.4)); }
  .step { grid-template-columns: 56px 1fr; }
  .step__status { margin-left: 0; flex-basis: 100%; }
  .step[data-status="available"] .step__status { max-width: max-content; margin-top: 4px; }
  /* Acá la etiqueta (DISPONIBLE / PRÓXIMAMENTE) baja a su propia línea y el copy le quedaba
     pegado: se separa para que se lea como bloque aparte del encabezado. */
  .step__text { margin-top: 1.05em; }

  /* Refiners: foto arriba y copy debajo (no entra al costado en 390 px) */
  .refiners { --img-w: 72vw; --cap-w: 72vw; --case-gap: 20px; }
  .case { grid-template-columns: var(--img-w); row-gap: var(--space-sm); align-items: start; }
  .case__caption { order: 2; }
}

/* ── 2026-09-27: heros con el "brillo -83" de Canva que usa Julie y SIN velos ──
   Medido sobre su referencia: la arena pasa de ~178 a ~89 de luminancia, o sea x0.5.
   2026-10-09 (limpieza): se borraron los filtros y velos viejos de sections.css y
   summer.css (los ::before / ::after del hero ya no existen), así que esta es la única
   fuente del filtro de la foto en el home y en la landing, en todos los anchos. */
/* + "Edición del color" sobre los marrones: medido, la arena queda un poco menos cálida
   (proporción de rojo 37.1% → 36.1%) y apenas más oscura que x0.5 → 0.47 + saturate 0.85. */
.hero .hero__img { filter: brightness(0.47) saturate(0.85); }