/* REFINE — Landing de Summer.
 * Sale del css/summer.css del prototipo (spec home-summer, D4), mismos selectores y valores.
 * CHECKOUT, BIENVENIDA y su responsive viven en checkout.css. Se carga solo en /summer/,
 * después de sections.css.
 *
 * Ajustes del block theme:
 * - url("../assets/img/…") → url("../img/…"), sin ?v=.
 * - `.page-summer` (clase de body que agrega functions.php) queda solo con su propio selector:
 *   las páginas de checkout y bienvenida tienen sus estilos en checkout.css.
 * - En el prototipo este archivo iba sin capas y styles.css con capas, así que cualquier regla
 *   de acá le ganaba a cualquiera de allá. Sin capas, donde una regla de styles.css es más
 *   específica que la de acá, la regla se repite con especificidad suficiente y un comentario
 *   que lo explica.
 */


/* ═════════════ Base de página ═════════════ */
.page-summer section[id] { scroll-margin-top: calc(var(--header-top) + var(--header-h)); }
.page-summer { background: var(--bg-primary); }

.s-wrap {
  width: min(100% - 2 * var(--gutter), 1320px);
  margin-inline: auto;
}

/* ═════════════ Botones (variantes de la pastilla del home) ═════════════ */
.btn-pill--ink { background: var(--refine-ink); color: var(--refine-cream); }
.btn-pill--ink:hover,
.btn-pill--ink:focus-visible { background: color-mix(in srgb, var(--refine-ink) 86%, var(--refine-offwhite)); }
/* `.btn-pill--sand` (CTA de compra) vive en sections.css: lo usan Summer y la home (DF-10). */

.s-cta__meta {
  margin-top: 14px;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--summer-ink-soft);
}

/* Marca de sección (brief): "REFINE LAB / SUMMER 2026", arriba a la izquierda de cada sección */
.page-summer main > section { position: relative; }
.s-mark {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-top) + var(--header-h) + 18px);
  left: var(--gutter);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--summer-ink-soft);
  pointer-events: none;
}
.s-mark--light { color: var(--refine-cream); }
/* las secciones claras dejan lugar para la marca sobre el título */
.page-summer .s-exp,
.page-summer .s-results,
.page-summer .s-faq,
.page-summer .s-pass { padding-top: max(var(--space-2xl), calc(var(--header-top) + var(--header-h) + 76px)); }

.is-placeholder { font-style: italic; color: var(--summer-ink-soft); }

/* ═════════════ 1 — TRANSFORMACIÓN ═════════════
 * Reutiliza el hero del home (.hero: foto + pastilla). Acá se ajusta la escala para sumar
 * titular y cards de pilares. El filtro de la foto lo comparte con el home (final de
 * sections.css) y no lleva velos. */
.hero--landing .hero__img { object-position: 52% 35%; }
/* 2026-09-27: el hero de la landing deja el panel perlado gris y pasa a foto a sangre
   (en todos los anchos). */
@media (min-width: 1024px) {
  .hero--landing .hero__media { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hero--landing {
    --landing-card-h: clamp(92px, 10.5svh, 100px);
    --landing-pillar-row: var(--landing-card-h);
    grid-template-rows: auto var(--landing-pillar-row);
    min-height: 0;
    overflow: visible;
  }
  /* 2026-09-27: el bloque título + bajada + CTA baja hacia el pie (antes centrado en
     vertical). Queda apoyado sobre las cards con aire, no pegado. */
  .hero--landing .hero__content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--hero-block-bottom);
    min-height: max(calc(100dvh - var(--landing-pillar-row)), calc(680px - var(--landing-pillar-row)));
  }
  .hero--landing .btn-pill {
    align-self: flex-start;
    width: fit-content;
  }
}
.hero__headline {
  margin-top: clamp(14px, 1.4vw, 24px);
  max-width: 17em;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--hero-copy-fs); /* = bajada del home, desktop y mobile (tokens.css) */
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Una frase por línea. El markup ya trae cada una en su <span>; styles.css sólo las pasa
   a bloque abajo de 1024px, así que en desktop se acomodaban de a dos por renglón. */
.hero--landing .hero__headline > span { display: block; }
.hero--landing .hero__lede { max-width: 34em; font-size: calc(clamp(16px, 1.25vw, 21px) * var(--hero-type-scale)); line-height: 1.4; }
/* ═══════════ Pilares del hero: 3 cards acordeón (refs 2 y 3 de Julie) ═══════════
 * Van al pie del hero, sobre la foto. El hero pasa a 2 filas (contenido | cards) para que
 * al abrir una card el hero CREZCA en vez de recortarla: con `overflow: hidden` y altura
 * fija el panel abierto quedaba cortado. La foto y el perlado cruzan las dos filas. */
.hero--landing { grid-template-rows: 1fr auto; }
.hero--landing .hero__media { grid-row: 1 / -1; }
.hero--landing .hero__content { grid-row: 1; }

.pillars {
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.7vw, 22px);
  margin: 0;
  padding: 0 clamp(20px, 8.5vw, 72px) clamp(26px, 5.5vh, 56px);
}
/* En desktop arrancan en la columna editorial, como el resto del hero */
@media (min-width: 1024px) {
  .hero--landing {
    grid-template-rows: auto var(--landing-pillar-row);
  }
  .pillars {
    align-items: start;
    justify-content: space-between;
    grid-template-columns: repeat(3, minmax(0, 340px));
    gap: clamp(34px, 5vw, 84px);
    width: min(calc(100% - (2 * var(--gutter))), 1180px);
    height: var(--landing-pillar-row);
    min-height: 0;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 0;
    transform: translateY(50%);
  }
}
.pillars > li { display: grid; }

.pcard {
  --pc-title: clamp(12px, 3.15vw, 18px);
  --pc-body: clamp(11px, 2.7vw, 16px);
  --pc-num: clamp(30px, 8vw, 52px);
  --pc-pad: clamp(8px, 2.3vw, 16px);
  position: relative;
  background: var(--pillar-card);
  color: var(--refine-ink);
}
.pcard__head {
  display: block;
  padding: calc(var(--pc-num) * 0.6) var(--pc-pad) calc(var(--pc-pad) * 1.1);
  font-size: var(--pc-title);
  cursor: pointer;
  list-style: none;
}
/* Abierta, la card cuelga sobre la sección de abajo sin moverla: la sombra la despega
   del fondo para que se lea como una capa encima y no como parte del layout. */
.pcard { transition: box-shadow var(--dur-fast) var(--ease-out); }
/* Layer fix: in the prototype the rule above beat sections.css `.js [data-reveal]` (which
   transitions opacity/transform instead) because this file was unlayered. */
.js .pcard[data-reveal] { transition: box-shadow var(--dur-fast) var(--ease-out); }
.pcard[open],
.hero--landing .pillars__panel { box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35); }
.pcard__head::-webkit-details-marker { display: none; }
.pcard__head:focus-visible { outline: 2px solid var(--refine-cream); outline-offset: 3px; }

/* El número monta el borde superior de la card, como en la ref */
.pcard__num {
  position: absolute;
  top: -0.62em;
  left: 0.16em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--pc-num);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--refine-cream);
}
.pcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.pcard__title > span { display: block; }
.pcard__body { overflow: hidden; }
.pcard__body p {
  margin: 0;
  padding: 0 var(--pc-pad) calc(var(--pc-pad) * 1.4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--pc-body);
  line-height: 1.32;
}

@media (min-width: 1024px) {
  .pillars > li { display: block; min-width: 0; }
  /* 2026-09-27: más minimal (sección a sección, ref conceptbarre.com): título, número y
     texto más chicos; la card baja de alto para no quedar vacía. */
  .pcard {
    --pc-title: clamp(15px, 1vw, 17px);
    --pc-body: clamp(14px, 0.95vw, 16px);
    --pc-num: clamp(40px, 2.8vw, 48px);
    --pc-pad: clamp(24px, 1.8vw, 32px);
    width: 100%;
  }
  .hero--landing .pcard[data-reveal] {
    opacity: 1;
    transform: none;
  }
  .pcard__head {
    box-sizing: border-box;
    min-height: var(--landing-card-h);
    padding: calc(var(--pc-num) * 0.58) var(--pc-pad) calc(var(--pc-pad) * 0.9);
  }
  .pcard__title > span { display: block; }
  .pcard__body p {
    padding: calc(var(--pc-pad) * 0.15) var(--pc-pad) calc(var(--pc-pad) * 1.25);
  }
}

/* ── Mockup de teléfono real (aparato realista para desktop) ── */
.s-trio__frame {
  position: relative;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* El + cuelga por debajo de la card y es parte del área clickeable del summary */
.pcard__plus {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: 0.5em;
  width: clamp(13px, 3.6vw, 22px);
  aspect-ratio: 1;
  color: var(--refine-cream);
}
.pcard__plus::before,
.pcard__plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: max(2px, 0.14em);
  translate: 0 -50%;
  background: currentColor;
}
.pcard__plus::after {
  rotate: 90deg;
  transition: rotate var(--dur-fast) var(--ease-out);
}
/* Abierta, la barra vertical se acuesta sobre la horizontal: el + se convierte en −.
   Es el mismo recurso que ya usaba la versión mobile con .is-mobile-active. */
.pcard[open] .pcard__plus::after { rotate: 0deg; }
@media (prefers-reduced-motion: reduce) {
  .pcard__plus::after { transition: none; }
}
@media (min-width: 1024px) {
  .pcard__plus { width: 16px; }
}

/* ═════════════ 3 — ASÍ SE VIVE SUMMER ═════════════ */
/* Ancho de la columna de esta sección. El resto de la página topea en 1320px, pero acá
   la fila de mockups lo llena: pasado cierto ancho los teléfonos llegan a su tamaño
   máximo, la fila no puede crecer y el hueco entre mockups se achica en vez de agrandarse.
   En monitores grandes la columna se ensancha para que ese aire vuelva.
   La marca de la sección se posiciona contra esta misma variable, así que acompaña sola. */
.s-exp {
  --exp-col: 1320px;
  /* Columna ancha de la sección: la comparten el encabezado y la fila de mockups. Puede
     pasarse de --exp-col porque los mockups no entran en 1320px en pantallas grandes. */
  --trio-w: min(100vw - 2 * var(--gutter), 1440px);
  /* Cuerpo del wordmark: el MISMO tamaño que el "summer" del hero (pedido 2026-09-26).
     Replica las dos fórmulas de .hero__title en styles.css (desktop / ≤1023px), así que
     si cambia una de esas, cambiar también acá. */
  --exp-word: calc(var(--fs-display-xl) * var(--hero-type-scale) * var(--hero-title-scale));
}
@media (max-width: 1023px) {
  .s-exp { --exp-word: calc(min(24.2vw, 150px) * var(--hero-type-scale) * var(--hero-title-scale)); }
}
.s-exp .s-wrap { width: min(100% - 2 * var(--gutter), var(--exp-col)); }
@media (min-width: 1600px) {
  .page-summer .s-exp { --exp-col: clamp(1320px, 72vw, 1440px); }
}
/* Esta sección lleva mucho más padding arriba que el resto (el hero se le monta), así que
   la marca no puede quedar pegada al borde como en las demás: se le iría ~190px del
   titular. Se la baja para conservar la misma distancia al título que en el resto de la
   página (58px = la diferencia entre el +76 del contenido y el +18 de la marca). */
.page-summer .s-exp > .s-mark {
  top: calc(var(--exp-pad-top) - 58px);
  /* Alineada con la "A" de "Así": el titular vive en .s-wrap, que mide
     min(100% - 2*gutter, 1320px) centrado, así que su borde izquierdo NO es el gutter
     salvo en pantallas angostas. Esta es la misma cuenta, en % de la sección (no en vw,
     que incluiría la barra de scroll y la correría unos px). */
  left: max(var(--gutter), calc((100% - var(--exp-col)) / 2));
}
.s-exp {
  padding-block: var(--space-2xl);
  background: var(--exp-sand);
  /* Los titulares del trío desbordan su columna a propósito (así está en la ref).
     Se recortan en el borde de la sección para que nunca generen scroll horizontal. */
  overflow-x: clip;
}
@media (min-width: 1024px) {
  .page-summer .s-exp {
    --exp-pad-top: max(280px, calc(var(--header-top) + var(--header-h) + 76px));
    padding-top: var(--exp-pad-top);
  }
}
/* Las cards del hero se despliegan hacia abajo FLOTANDO sobre esta sección (van con
   z-index por encima): antes se agrandaba el padding de .s-exp al abrir una y toda la
   página saltaba. Ya no se toca el layout; ver .pcard[open] y .pillars__panel. */
/* Título principal de la sección + bajada (ref Julie) */
/* ── Encabezado de la sección ── ref: references/ref-exp-heading.jpg ──
 * Banda de perlado a sangre con el wordmark apoyado sobre su borde inferior; abajo sigue
 * la arena de la sección, así que el corte foto/arena de la referencia se arma solo, sin
 * costura. Proporciones medidas sobre el archivo (991x396 px):
 *   · la foto llega hasta el 74,5% del alto y la base de "summer" cae justo en ese corte;
 *   · la banda es 3,36 veces más ancha que alta  ->  alto = 0,2977 del ancho de columna;
 *   · el cuerpo del wordmark es el 62,4% del alto de la banda;
 *   · el kicker mide 0,087 de ese cuerpo y su base queda 0,10 em por encima.
 * El fondo es el mismo perlado del hero (muestreado: la foto de la ref promedia 198,195,188
 * y pearl-2400 da 196,194,189), así que el navegador ya lo tiene en caché de esta página.
 * En la ref el texto arranca al 21% del ancho; acá va al borde de la columna, alineado con
 * el mockup de Calendar, que es lo que ata la sección. */
.s-exp__banner {
  position: relative;
  width: 100%;
  /* el wordmark se sale por abajo: esto le devuelve ese alto al flujo */
  margin-bottom: calc(var(--exp-word) * 0.335);
}
/* La foto se recorta acá y no en .s-exp__banner, para que el texto pueda salirse */
.s-exp__banner-media {
  position: relative;
  width: 100%;
  height: calc(var(--exp-word) * 1.6);   /* 295/184 de la referencia */
  overflow: hidden;
}
.s-exp__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
/* Sin ancho: la caja se encoge al wordmark y se centra en la banda. Así el kicker queda
   alineado a la izquierda de "summer", como en la referencia, y no centrado aparte.
   El -0.055em compensa el interletrado negativo: con -0.11em la caja mide menos que la
   mancha de tinta, y al centrar el texto se corre medio espacio a la derecha. */
.s-exp__heading {
  position: absolute;
  left: 50%;
  bottom: calc(var(--exp-word) * -0.3345);
  translate: -50% 0;
  margin: 0 0 0 calc(var(--exp-word) * -0.055);
  font-weight: 400;
  white-space: nowrap;
}
.s-exp__heading-kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  /* Piso de 10px: al achicar el wordmark (tokens.css) en mobile bajaba a ~4.7px */
  /* +4px sobre el cálculo original (pedido 2026-09-27): se leía muy chico sobre el wordmark */
  font-size: calc(max(10px, var(--exp-word) * 0.087) + 4px);
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--exp-ink);
}
/* Mobile/tablet: el wordmark quedaba casi pegado a "NO. 01 CALENDAR"; +24px de aire */
@media (max-width: 1023px) {
  .s-exp__banner { margin-bottom: calc(var(--exp-word) * 0.335 + 44px); } /* +24 → +44 */
  /* Tamaño fijo en mobile: 11px seguía costando leerse sobre la foto → 13px y peso 500 */
  .s-exp__heading-kicker { font-size: 17px; font-weight: 500; } /* 13 + 4 */
}
.s-exp__heading-word {
  display: block;
  /* -0.107em: en la referencia las cajas de línea se montan, el kicker no "empuja" al
     wordmark; con eso su base queda 0.652em por encima de la de "summer", como en la ref. */
  margin: -0.107em 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--exp-word);
  line-height: 0.8;
  letter-spacing: var(--track-display);
  word-spacing: var(--word-display);
  color: var(--refine-cream);
}

/* ═══════════ 3 — ASÍ SE VIVE SUMMER: los 3 móviles al lado ═══════════
 * Ref: assets/summer/assets nuevos/referencia-desktop.png ("me gusta mucho más esta idea
 * de que estén los tres móviles al lado") + los tres prototipo-mobile-*.png para el apilado.
 * Los marcos de los teléfonos se dibujan en CSS: los mocks son sólo la pantalla. */
/* ═══════════ 3 — ASÍ SE VIVE SUMMER: los 3 bloques en flujo vertical (mobile) / horizontal (desktop) ═══════════
 * Ref mobile: prototipo-calendar.jpg (con deco), prototipo-mobile-menu.png (composite), prototipo-mobile-telegram.png (pantalla en marco)
 * Tipografía: Títulos en Archivo Narrow uppercase, bajadas/kicker en IBM Plex Mono. */
.s-trio {
  --phone-r: clamp(24px, 6.5vw, 36px);
  --phone-pad: clamp(6px, 1.8vw, 10px);
  --phone-w: clamp(225px, 62vw, 290px);
  --kicker-fs: clamp(12px, 3.2vw, 14.5px);
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 13vw, 84px);
  width: 100%;
  margin: clamp(36px, 8vw, 64px) auto 0;
}

.s-trio__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.s-trio__head {
  width: 100%;
  text-align: left;
  padding: 0;
  margin-bottom: clamp(14px, 3.5vw, 20px);
  min-width: 0;
}

.s-trio__title {
  margin: 0;
  font-family: var(--font-narrow);
  font-weight: 700;
  font-size: calc(clamp(38px, 10.8vw, 56px) * var(--type-mid));
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--exp-ink);
}

.s-trio__kicker {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--kicker-fs);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--exp-ink);
  white-space: normal;
}

/* 01 Calendar: kicker arriba, titular abajo */
.s-trio__item--01 .s-trio__kicker {
  margin-bottom: 8px;
}

/* 02 y 03: titular arriba, kicker abajo con separación */
.s-trio__item--02 .s-trio__kicker,
.s-trio__item--03 .s-trio__kicker {
  margin-top: 10px;
}

.s-trio__kicker--end {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.s-trio__kicker--end > span:last-child {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

/* Número encerrado en la elipse dibujada a mano de Julie */
.s-trio__no {
  position: relative;
  display: inline-block;
  flex: none;
  padding: 0.55em 1.1em;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--kicker-fs);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--exp-ink);
  vertical-align: 0.15em;
}
.s-trio__no::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("../img/summer-num-ring-600.webp") center / 100% 100% no-repeat;
  mask: url("../img/summer-num-ring-600.webp") center / 100% 100% no-repeat;
}

/* Base de los mockups en mobile */
.s-trio__phone {
  position: relative;
  margin: 0;
  padding: var(--phone-pad);
  aspect-ratio: 9 / 19;
  border-radius: var(--phone-r);
  background: var(--phone-frame);
  box-shadow:
    -4px 8px 12px -4px rgb(60 47 31 / 0.14),
    -20px 20px 24px -8px rgb(60 47 31 / 0.20),
    -42px 38px 36px -14px rgb(60 47 31 / 0.13);
}

.s-trio__screen {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--phone-r) - var(--phone-pad));
  background: var(--phone-screen);
}
.s-trio__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* 01 Calendar: teléfono a la derecha + recurso deco encima */
.s-trio__item--01 .s-trio__phone {
  width: var(--phone-w);
  align-self: flex-end;
}
.s-trio__deco {
  position: absolute;
  left: -38%;
  /* +34px (2026-09-27): en mobile/tablet quedaba muy abajo. Desktop lo pisa en ≥1024px. */
  bottom: calc(-4% + 34px);
  width: 112%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 14px 26px rgb(42 33 24 / 0.18));
}

/* 02 Menú y recetas: composite flotante a sangre sobre la arena, sin marco */
.s-trio__item--02 .s-trio__phone {
  align-self: center;
  width: min(100%, 420px);
  aspect-ratio: auto;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.s-trio__item--02 .s-trio__screen {
  background: none;
  border-radius: 0;
  overflow: visible;
  height: auto;
}
.s-trio__item--02 .s-trio__screen img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  translate: none;
  filter: drop-shadow(0 16px 28px rgb(42 33 24 / 0.15));
}

/* 03 Guía diaria: teléfono a la derecha con captura de Telegram */
.s-trio__item--03 .s-trio__phone {
  width: var(--phone-w);
  align-self: flex-end;
}
.s-trio__phone--device .s-trio__screen {
  background: rgb(230 219 202);
}
.s-trio__phone--device .s-trio__frame {
  display: none;
}
.s-trio__phone--device::before {
  display: none;
}

/* ═══════════ DESKTOP (1024px+): Variante B horizontal ═══════════ */
@media (min-width: 1024px) {
  .s-trio {
    /* TODO el trío es proporcional a SU PROPIO ancho, nunca al viewport: así la fila se ve
       igual en una notebook que en un monitor de 27". Antes --phone-h salía de `78svh`, o
       sea de la ALTURA de la ventana: en una pantalla alta los teléfonos llegaban al tope
       de 704px dentro de una fila que sigue midiendo 1440, y se comían todo el aire (medido:
       19,9% del ancho de fila por teléfono en la notebook contra 23,2% en el monitor).
       El tope en svh queda sólo como red para ventanas muy bajas. */
    --phone-h: clamp(300px, min(calc(var(--trio-w) * 0.415), 82svh), 704px);
    --phone-w: calc(var(--phone-h) * 9 / 19);
    --trio-gap: clamp(10px, 1.2vw, 24px);
    /* Los textos también salen del ancho de fila, por el mismo motivo: con 0.84vw el kicker
       topeaba en 15,2px en el monitor y quedaba en 13,3px en la notebook. */
    --kicker-fs: clamp(10px, calc(var(--trio-w) * 0.0094), 15.2px);
    /* Sobrante real de la fila: el ancho menos los 3 teléfonos y los dos bloques de texto
       (~16% del ancho de fila, medido). De acá sale el corrimiento de 02, así que se apaga
       solo cuando no queda aire, en vez de empujar hasta encimar los mockups. */
    --trio-slack: max(0px, calc(var(--trio-w) - 3 * var(--phone-w) - var(--trio-w) * 0.16));
    display: grid;
    grid-template-columns: var(--phone-w) auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    column-gap: var(--trio-gap);
    row-gap: 0;
    width: var(--trio-w);
    align-items: start;
    margin-top: clamp(48px, 6vw, 112px);
    margin-inline: calc((100% - var(--trio-w)) / 2);
  }
  .page-summer .s-exp { padding-bottom: clamp(56px, 7vh, 110px); }

  /* El recurso de Calendar también va en desktop: montado sobre el ángulo inferior derecho
     del teléfono y saliéndose hacia el aire que queda entre 01 y 02. Medido sobre la marca
     de Julie: arranca al 31% del ancho del teléfono y mide 140% de ese ancho. El `bottom`
     lo sube hasta que su borde superior queda justo debajo de la fila de celdas blancas
     del mockup (esas celdas terminan al 34% del alto del teléfono). Cada 1% son ~5,7px:
     bajar el valor la baja. OJO con el giro: el PNG ya trae +3,1deg horarios escaneados
     (medido ajustando una recta al borde superior del alfa), así que el `rotate` arranca
     desde ahí: -8deg dan una inclinación real de ~-4,9deg hacia la izquierda. */
  .s-trio__deco {
    display: block;
    left: 31%;
    bottom: 12%;
    width: 140%;
    rotate: -8deg;
  }

  .s-trio__item { display: contents; }
  .s-trio__head { width: max-content; margin-bottom: 0; padding-bottom: clamp(7px, 0.8vw, 15px); }
  .s-trio__title {
    font-size: calc(calc(var(--kicker-fs) * var(--title-ratio, 2.8) * var(--type-mid)));
    white-space: nowrap;
  }
  .s-trio__kicker { white-space: nowrap; }

  .s-trio__item--01 { --title-ratio: 3.203; }
  .s-trio__item--02 { --title-ratio: 2.9562; }
  .s-trio__item--03 { --title-ratio: 3.2943; }

  .s-trio__item--01 .s-trio__head  { grid-area: 1 / 1; justify-self: start; }
  .s-trio__item--01 .s-trio__phone { grid-area: 2 / 1; width: var(--phone-w); align-self: start; }

  /* Título arriba y bajada debajo (como 02). `align-self: end` mantiene el bloque
     apoyado sobre el teléfono aunque el head de 01 sea más alto. */
  .s-trio__item--03 .s-trio__head  {
    grid-area: 1 / 3;
    justify-self: end;
    align-self: end;
    display: flex;
    flex-direction: column;
  }
  .s-trio__item--03 .s-trio__phone { grid-area: 2 / 3; align-self: start; }

  /* Item 02 en desktop forma el par teléfono + texto */
  /* Como el deco de 01 ocupa el aire entre 01 y 02, el par de 02 se corre a la derecha:
     achica el espacio contra 03 y ensancha el de 01. `justify-content: space-between`
     reparte el sobrante en partes iguales, así que el desplazamiento se hace acá.
     El corrimiento nunca supera el 22% del sobrante real de la fila (--trio-slack), así que
     en pantallas chicas o con los teléfonos en su tope se apaga solo. */
  .s-trio__item--02 {
    translate: min(calc(var(--phone-w) * 0.2), calc(var(--trio-slack) * 0.22)) 0;
    display: grid;
    grid-area: 2 / 2;
    grid-template-columns: auto auto;
    align-items: center;
    /* Aire entre el bloque de texto y el teléfono de 02. Sale del ancho de fila, como el
       resto del trío, para que la separación se vea igual en cualquier pantalla. */
    column-gap: clamp(14px, calc(var(--trio-w) * 0.024), 36px);
  }
  .s-trio__item--02 .s-trio__phone {
    grid-area: auto;
    width: var(--phone-w);
    aspect-ratio: 9 / 19;
    background: var(--phone-frame);
    border-radius: var(--phone-r);
    padding: var(--phone-pad);
    box-shadow:
      -4px 8px 12px -4px rgb(60 47 31 / 0.14),
      -20px 20px 24px -8px rgb(60 47 31 / 0.20),
      -42px 38px 36px -14px rgb(60 47 31 / 0.13);
  }
  .s-trio__item--02 .s-trio__screen {
    background: var(--menu-screen);
    border-radius: calc(var(--phone-r) - var(--phone-pad));
    overflow: hidden;
    height: 100%;
    position: relative;
  }
  /* En lugar del beige sólido, la foto de Summer nítida y oscurecida, para que la pantalla
     pese como la de Calendar. Va en un ::before y no en el contenedor para no arrastrar
     al composite, que queda encima y en su tono original. */
  .s-trio__item--02 .s-trio__screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/summer-02-1000.webp") center / cover no-repeat;
  }
  /* Velo oscuro en la tinta cálida de la sección: baja la foto de un promedio de 138 a ~83,
     el rango en el que vive la pantalla de Calendar, y deja que manden las tarjetas. */
  .s-trio__item--02 .s-trio__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(42 33 24 / 0.52);
  }
  .s-trio__item--02 .s-trio__screen img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 6%;
    width: 88%;
    height: auto;
    translate: 0 -50%;
    filter: none;
  }
  .s-trio__item--02 .s-trio__head {
    grid-area: auto;
    justify-self: start;
    align-self: center;
    padding: 0;
    max-width: 26ch;
    margin-top: calc(var(--phone-h) * -0.0255);
    translate: 0 calc(var(--phone-h) * 0.10);
  }
  .s-trio__item--02 .s-trio__title { white-space: normal; }

  /* Item 03 aparato realista en desktop */
  .s-trio__item--03 .s-trio__phone--device {
    position: relative;
    height: calc(var(--phone-h) / 0.9354);
    width: auto;
    aspect-ratio: 941 / 1672;
    margin-top: calc(var(--phone-h) * -0.0345);
    margin-inline: calc(var(--phone-h) * -0.0473) calc(var(--phone-h) * -0.0518);
    justify-self: center;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .s-trio__phone--device::before {
    content: "";
    display: block;
    position: absolute;
    left: 8.7%;
    top: 3.5%;
    width: 82.4%;
    height: 93%;
    border-radius: 16.8% / 8.4%;
    background: none;
    box-shadow:
      -4px 6px 8px -4px rgb(32 26 20 / 0.22),
      -40px 38px 32px -10px rgb(32 26 20 / 0.34),
      -72px 66px 52px -18px rgb(32 26 20 / 0.24);
  }
  .s-trio__phone--device .s-trio__frame {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
  .s-trio__phone--device .s-trio__screen {
    position: absolute;
    left: 12.11%;
    top: 5.26%;
    width: 75.56%;
    height: 89.42%;
    border-radius: 7% / 3.3%;
    background: rgb(230 219 202);
  }
  .s-trio__phone--device .s-trio__screen img {
    position: absolute;
    left: 0;
    top: 4.5%;
    translate: none;
    width: 100%;
    height: 95%;
    object-fit: cover;
    object-position: 50% 100%;
  }
}

/* ═════════════ Motion de entrada del trío: la historia 01 → 02 → 03 ═════════════
 * Se monta sobre el sistema de la página ([data-reveal] + la clase .is-in que pone el
 * IntersectionObserver de assets/js/reveal.js). Acá sólo se redefinen el desplazamiento y los retardos.
 *
 * El data-reveal estaba en los <article>, que son `display: contents`: sobre esos elementos
 * opacity y transform no tienen efecto, así que los mockups nunca animaron. Ahora vive en
 * el encabezado y en el teléfono de cada bloque.
 *
 * Lectura: entra el teléfono, 60ms después su texto, y el número cierra como acento.
 * Entre bloque y bloque, 160ms. */
.js .s-trio [data-reveal] { transition-delay: var(--d, 0ms); }
.js .s-trio__phone[data-reveal] { transform: translateY(40px) scale(0.96); }
.js .s-trio__phone[data-reveal].is-in { transform: none; }

.s-trio__item--01 .s-trio__phone { --d: 0ms; }
.s-trio__item--01 .s-trio__head  { --d: 60ms; }
.s-trio__item--02 .s-trio__phone { --d: 160ms; }
.s-trio__item--02 .s-trio__head  { --d: 220ms; }
.s-trio__item--03 .s-trio__phone { --d: 320ms; }
.s-trio__item--03 .s-trio__head  { --d: 380ms; }

/* La elipse del número entra última, con un golpe corto de escala */
.js .s-trio__head[data-reveal] .s-trio__no {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 260ms);
}
.js .s-trio__head[data-reveal].is-in .s-trio__no { opacity: 1; transform: none; }

/* El reset de styles.css no alcanza a estas reglas (pesan más), así que va el suyo */
@media (prefers-reduced-motion: reduce) {
  .js .s-trio__phone[data-reveal],
  .js .s-trio__head[data-reveal] .s-trio__no {
    opacity: 1;
    transform: none;
    transition: none;
  }
}





/* ═════════════ 4 — RESULTADOS ═════════════ */
.s-results {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: hidden;
}
.s-results__bg,
.s-pass__bg { position: absolute; inset: 0; }
.s-results__bg img,
.s-pass__bg img { width: 100%; height: 100%; object-fit: cover; }
/* perlado aclarado: texto en tinta con buen contraste */
.s-results__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--results-veil);
}
.s-results .s-wrap { position: relative; }

/* Manifiesto (opción B): los beneficios son el protagonista tipográfico */
.s-manifesto {
  /* 2026-09-27: Julie pide más minimal, -15% a los títulos de la sección (como el hero).
     Aplica al titular y a los ítems; no al párrafo ni a los números. */
  --manifesto-type-scale: var(--type-display); /* antes 0.85: ahora sigue la escala global */
  /* Ítems de la derecha: otro -15% encima (0.85 × 0.85 ≈ 0.72), pedido el mismo día. */
  /* ítems: misma relación con el título que se aprobó (0.72 / 0.85) */
  --manifesto-item-scale: calc(var(--type-display) * 0.847);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  align-items: start;
}
.s-manifesto__head { display: grid; gap: clamp(20px, 2vw, 32px); }
.s-manifesto__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(38px, 3.6vw, 64px) * var(--manifesto-type-scale));
  line-height: 0.98;
  letter-spacing: var(--track-heading); word-spacing: var(--word-heading);
  /* misma tinta que el resto de los titulares de la página */
  color: var(--exp-ink);
  text-wrap: balance;
}
.s-manifesto__intro {
  max-width: 30em;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--summer-ink-soft);
}
.s-manifesto__list { border-bottom: 1px solid var(--manifesto-line); }
.s-manifesto__item {
  display: grid;
  grid-template-columns: clamp(52px, 5vw, 84px) 1fr;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 24px);
  padding-block: clamp(14px, 1.4vw, 22px);
  border-top: 1px solid var(--manifesto-line);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: calc(clamp(28px, 2.8vw, 48px) * var(--manifesto-item-scale));
  line-height: 1.08;
  letter-spacing: var(--track-meta);
  color: var(--exp-ink);
}
.s-manifesto__item--strong { font-weight: 700; font-size: calc(clamp(38px, 4.4vw, 78px) * var(--manifesto-item-scale)); }
.s-manifesto__n {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: var(--track-tight);
  color: var(--summer-accent);
}

.s-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  margin-top: var(--space-xl);
}
.s-case__frame {
  aspect-ratio: 10 / 9;
  border: clamp(3px, 0.24vw, 5px) solid rgb(246 243 238 / 0.9);
  background: var(--bg-primary);
}
.s-case__frame img { width: 100%; height: 100%; object-fit: cover; }
.s-case__quote { margin-top: var(--space-md); max-width: 36em; }
.s-case__quote p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-md);
  line-height: 1.45;
}

/* ═════════════ 5 — SUMMER PASS + OFERTA ═════════════
 * Izquierda: foto de la mano a sangre (toda la columna) + tarjeta que gira en 3D.
 * Derecha: perlado con filtro celeste + oferta. La foto se funde con el perlado en el borde. */
.s-pass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  --sec-h: max(100svh, 820px);
  --access-title-fs: calc(clamp(26px, 2.6vw, 42px) * var(--type-mid));
  --access-gap: clamp(12px, 1.2vw, 18px);
  min-height: var(--sec-h);
  overflow: hidden;
}
.page-summer .s-pass { padding-top: 0; }
.s-pass__bg { grid-column: 1 / -1; grid-row: 1; }
.s-pass__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, var(--summer-tint-solid) 0%, var(--summer-tint-mid) 55%, transparent 100%),
    var(--text-veil-base);
}

.s-access {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  place-items: center;
}
.s-access__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  /* integración sutil: el borde derecho se funde con el perlado de la columna derecha */
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.s-access__content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--access-gap);
  width: min(78%, 500px);
  padding: calc(var(--header-top) + var(--header-h) + 18%) 0 var(--space-xl);
}
.s-access__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--access-title-fs);
  line-height: 1;
  letter-spacing: var(--track-heading); word-spacing: var(--word-heading);
  color: var(--refine-cream);
  text-shadow: 0 2px 18px rgb(34 34 34 / 0.2);
}
.s-access__title strong { font-weight: 700; }
/* Desktop: título a mitad de mano (ref de Julie) en cualquier pantalla. La posición se ancla a la FOTO:
   --rh = alto con que se dibuja la foto (object-fit: cover, 1100×1373 → 1.248 de alto por ancho);
   --hand = el 20% de la foto (mitad de la mano), descontando el recorte superior de object-position 12%. */
@media (min-width: 1024px) {
  /* La columna izquierda mide 50vw y la foto se dibuja con relación 1.248 de alto por ancho,
     así que el ancla de la mano se puede calcular desde la sección (sin container queries) y
     compartirla con la columna derecha: las dos tarjetas arrancan a la misma altura. */
  .s-pass {
    --rh: max(var(--sec-h), 62.4vw);
    --hand: calc(0.2 * var(--rh) - (var(--rh) - var(--sec-h)) * 0.12);
    --pass-top: calc(var(--hand) - clamp(16px, 1.6vw, 26px));
  }
  .s-access { place-items: start center; }
  .s-access__content { padding-top: var(--pass-top); }
}

.s-pass__offer {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  align-self: center;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-lg)) var(--gutter) var(--space-xl) clamp(24px, 4vw, 72px);
}
/* Desktop: la tarjeta de precio arranca a la misma altura que la tarjeta que gira
   (el ancla de la mano + el alto del título + su gap). */
@media (min-width: 1024px) {
  .s-pass__offer {
    align-self: start;
    padding-top: calc(var(--pass-top) + var(--access-title-fs) + var(--access-gap));
  }
}

/* Tarjeta: frente / reverso con giro 3D suave (único giro 3D del sitio, decisión aprobada) */
.pass {
  display: block;
  width: 100%;
  aspect-ratio: 1.5;
  padding: 0;
  perspective: 1600px;
  cursor: pointer;
  text-align: left;
}
.pass__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1000ms var(--ease-inout);
}
.pass.is-flipped .pass__inner { transform: rotateY(180deg); }
/* Después de la transición, para poder pisarla (antes estaba arriba y nunca se aplicaba). */
@media (prefers-reduced-motion: reduce) {
  .pass__inner { transition: none; }
}
.pass__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.6vw, 24px);
  /* mismo radio que la card de precio de al lado (.s-offer), para que el par se lea parejo */
  border-radius: 28px;
  background: var(--pass-card);
  color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 34px 70px -34px var(--mock-shadow);
}
.pass__back { transform: rotateY(180deg); }
.pass__hint {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--refine-cream);
  text-shadow: 0 1px 10px rgb(34 34 34 / 0.3);
}
.pass__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.02em;
  color: #fff;
}
.pass__row--end { justify-content: flex-end; }
.pass__brand { display: grid; justify-items: center; gap: 4px; color: #fff; }
.pass__brand .logo { font-size: calc(clamp(52px, 5.6vw, 86px) * var(--type-display)); }
.pass__product {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: var(--track-tight);
}
.pass__back-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(22px, 2vw, 30px) * var(--type-mid));
  line-height: 1;
  letter-spacing: var(--track-heading); word-spacing: var(--word-heading);
  color: #fff;
}
.pass__list { display: grid; gap: 8px; }
.pass__item { display: grid; grid-template-columns: 5.6em 1fr; align-items: center; gap: 10px; }
.pass__item .k {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pass__item .v {
  padding: 5px 9px;
  border-radius: 0;
  background: var(--refine-cream);
  color: var(--refine-ink);
  font-family: var(--font-display);
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.3;
}
.pass__list { gap: 6px; }
.pass__item { grid-template-columns: 6.2em 1fr; gap: 8px; }

.s-offer {
  padding: clamp(28px, 3.4vw, 56px);
  border-radius: 28px;
  background: var(--offer-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -40px var(--mock-shadow);
}
.s-offer__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(26px, 2.4vw, 40px) * var(--type-mid));
  line-height: 1;
  letter-spacing: var(--track-heading); word-spacing: var(--word-heading);
  text-transform: uppercase;
}
.s-offer__desc { margin-top: 10px; font-size: var(--t-md); color: var(--summer-ink-soft); }
.s-offer__price {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(52px, 5.4vw, 96px) * var(--type-display));
  line-height: 1;
  letter-spacing: var(--track-title);
}
.s-offer .btn-pill { margin-top: var(--space-md); }

/* El selector de moneda (.currency-switch) vive en sections.css: lo usan Summer y el CTA de la Home. */

/* ═════════════ 6 — FAQs ═════════════ */
/* FAQs (ref Julie): foto a sangre, título crema itálico, filas gris-celeste translúcidas
 * separadas por líneas finas que dejan ver la foto. */
.s-faq {
  /* Every text size of the section is multiplied by this factor: -12% (spec content-fixes, D5).
     0.88 rather than 0.90 so rounding never leaves a reduction under 10%. */
  --faq-type: 0.88;
  position: relative;
  /* clip, not hidden: it cuts the blurred ::before the same way but does not make the section a
     scroll container, so the photo can stick to the viewport on desktop (spec content-fixes, D1) */
  overflow: clip;
  padding-bottom: var(--space-xl);
  background: var(--photo-pearl);
}
/* costados: la misma foto, desenfocada y oscurecida, para que el cuadro no flote sobre un plano */
.s-faq::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: url("../img/summer-faq-800.webp") center / cover no-repeat;
  filter: blur(36px) brightness(0.72) saturate(0.9);
}
.s-faq__frame {
  position: relative;
  width: min(100% - 2 * var(--gutter), 760px);
  min-height: calc(min(100vw - 2 * var(--gutter), 760px) * 1.2055); /* proporción de la foto (2784×3356) */
  margin-inline: auto;
  overflow: clip; /* see .s-faq */
  box-shadow: 0 40px 90px -40px var(--mock-shadow);
}
.s-faq__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.s-faq__layout {
  position: relative;
  padding: 12% 5% 16%; /* el panel arranca a ~1/4 del cuadro y tapa el torso */
}
.s-faq__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(clamp(30px, 3vw, 46px) * var(--type-display) * var(--faq-type));
  line-height: 1;
  letter-spacing: var(--track-heading); word-spacing: var(--word-heading);
  text-transform: uppercase;
  color: var(--refine-cream);
}
/* bajada bajo el título y encabezado de cada bloque: mismo color que el título (crema sobre la foto) */
.s-faq__lede {
  max-width: 42em;
  margin-top: var(--space-xs);
  font-size: calc(var(--t-md) * var(--faq-type));
  line-height: 1.5;
  color: var(--refine-cream);
}
.s-faq__group {
  /* 16px from the heading to its first question: this margin plus the 3px row gap of the block */
  margin-bottom: calc(var(--space-sm) - 3px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--t-xs) * var(--faq-type));
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--refine-cream);
}
.s-faq__list {
  display: grid;
  gap: var(--space-lg); /* between groups: more air than heading → rows, so each heading reads with its own rows */
  width: 100%; /* ref: el panel cubre el torso; se ve la foto arriba, abajo y en las líneas entre filas */
  margin-top: clamp(18px, 1.8vw, 28px);
}
/* one group: its heading and its rows, 3px apart like before (the lines that let the photo through) */
.s-faq__block {
  display: grid;
  gap: 3px;
}
.faq {
  background: var(--faq-row);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.faq:hover,
.faq[open] { background: var(--faq-row-open); }
.faq summary {
  display: grid;
  grid-template-columns: 2.6em 1fr 20px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px clamp(16px, 1.6vw, 24px);
  cursor: pointer;
  list-style: none;
  /* a question reached with Tab is never left under the fixed header */
  scroll-margin-top: calc(var(--header-top) + var(--header-h) + var(--space-sm));
}
.faq summary::-webkit-details-marker { display: none; }
.faq__n { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--t-sm) * var(--faq-type)); color: var(--summer-deep); }
.faq__q { font-family: var(--font-body); font-weight: 700; font-size: calc(var(--t-md) * var(--faq-type)); line-height: 1.35; color: var(--refine-ink); }
.faq__icon { position: relative; width: 14px; height: 14px; justify-self: end; color: var(--refine-ink); }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon::after { transform: rotate(0deg); }

/* ═════════════ FAQ en desktop: dos columnas ═════════════
 * Mitad foto, mitad panel de preguntas sobre la textura de asset-refiner-background.
 * Abajo de 1024 se deja el cuadro vertical de siempre (la foto con el panel encima).
 * El markup no cambia: la foto deja de estar en posición absoluta y pasa a ser la primera
 * columna de la grilla. */
@media (min-width: 1024px) {
  /* A sangre: sin gutter, sin radio y sin la sombra del cuadro. También sin el padding
     de arriba, que dejaba una franja del fondo de sección sobre la foto y ahí quedaba
     colgada la marca. */
  .page-summer .s-faq { padding-top: 0; padding-bottom: 0; }
  /* la marca pasa a ir SOBRE la foto (es la variante --light, así que se lee bien) */
  .s-faq > .s-mark { top: calc(var(--header-top) + var(--header-h) + 18px); }
  /* el fondo desenfocado existía para que el cuadro no flotara sobre un plano; con la
     sección a sangre no hay costados que rellenar. Queda sólo para responsive. */
  .s-faq::before { display: none; }
  .s-faq__frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }
  /* Invertido respecto del markup: preguntas a la izquierda, foto a la derecha.
     La fila va explícita en los dos. El auto-placement de grid es "sparse": como la foto
     viene primera en el markup y se la manda a la columna 2, el cursor queda pasado y el
     panel, al pedir la columna 1, no puede volver atrás y se iba a una segunda fila —
     dejando la columna izquierda vacía. */
  .s-faq__layout { grid-column: 1; grid-row: 1; }
  .s-faq__photo {
    grid-column: 2;
    grid-row: 1;
    position: static;
    width: 100%;
    height: 100%;
    object-position: 50% 30%;
  }
  /* la marca acompaña a la foto: es la variante --light (crema) y sobre el panel claro
     de las preguntas no se leería */
  .s-faq > .s-mark { left: auto; right: var(--gutter); }
  .s-faq__layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 3.4vw, 64px);
    /* image-set para que en pantallas 2x no se vea blanda: el panel llega a ~960 css px,
       o sea 1920 reales. */
    background: image-set(
      url("../img/summer-faq-bg-1400.webp") 1x,
      url("../img/summer-faq-bg-2000.webp") 2x
    ) center / cover no-repeat;
    background-color: var(--photo-pearl);
  }
  /* El titular era crema porque iba sobre la foto oscura; acá cae sobre la textura clara. */
  .s-faq__title,
  .s-faq__lede,
  .s-faq__group { color: var(--exp-ink); }
}

/* ═════════════ FAQ en desktop: la foto queda fija (spec content-fixes, D1) ═════════════
 * The questions scroll with the page and the photo stays pinned under the header, filling its
 * column. It lets go by itself when the grid row ends with the last question, and the page goes
 * on to the footer: no inner scroll, no scroll listeners. Below 560px of height the photo would
 * be a thin strip, so it stays stretched to the column as before. */
@media (min-width: 1024px) and (min-height: 560px) {
  .s-faq__photo {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
    align-self: start;
    height: calc(100svh - var(--header-top) - var(--header-h) - var(--wp-admin--admin-bar--height, 0px));
  }
}

/* el espacio inferior va en el <p> para que la animación de altura (summer.js) arranque desde 0 */
.faq__a { padding: 0 clamp(16px, 1.6vw, 24px) 0 calc(clamp(16px, 1.6vw, 24px) + 2.6em + 12px); }
.faq__a p,
.faq__a ul { padding-bottom: 20px; max-width: 42em; font-size: calc(var(--t-md) * var(--faq-type)); line-height: 1.6; color: var(--summer-ink-soft); }
.faq__a ul { padding-left: 1.25em; list-style: disc; }
.faq__a li + li { margin-top: calc(var(--space-xs) / 2); }
.faq__a li::marker { color: var(--summer-deep); }

/* ═════════════ Barra fija mobile (precio + CTA) ═════════════ */
.s-sticky { display: none; }

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width: 1023px) {

  /* El espacio inferior queda reservado desde el estado cerrado. Al abrirse, cada card
     crece hacia abajo y la fila superior conserva exactamente su posición. */
  .hero--landing .pillars {
    position: relative;
    z-index: 5;
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(6px, 2.4vw, 18px);
    width: calc(100% - (2 * var(--gutter)));
    height: var(--landing-pillar-row);
    min-height: 0;
    box-sizing: border-box;
    margin-inline: auto;
    padding: 0;
    transform: translateY(50%);
  }
  .hero--landing .pillars > li { display: block; min-width: 0; }
  .hero--landing .pcard {
    width: 100%;
    opacity: 1;
    transform: none;
  }
  .hero--landing .pcard__head {
    box-sizing: border-box;
    min-height: var(--landing-card-h);
  }
  .page-summer .s-exp {
    /* 2026-09-27: 190 → 140. El panel de la card abierta puede apoyarse apenas sobre la
       banda de "summer" (pedido del usuario: no molesta). */
    --exp-pad-top: max(140px, calc(var(--header-top) + var(--header-h) + 76px));
    padding-top: var(--exp-pad-top);
  }
  /* Antes la marca se bajaba 80px a mano cuando había una card del hero abierta, porque
     quedaba muy separada del titular. Ahora la marca se posiciona contra --exp-pad-top,
     o sea que ya acompaña al titular en los dos estados: ese empujón sobra y, sumado,
     la tiraba encima de "Así se vive Summer". */

  /* Pass en tablet/mobile: foto arriba (a sangre, se funde abajo con el perlado), oferta debajo */
  .s-pass { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .s-pass__bg { grid-row: 1 / -1; }
  .s-access { grid-row: 1; min-height: min(128vw, 900px); }
  .s-access__photo {
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .s-access__content { width: min(88%, 460px); padding: calc(var(--header-top) + var(--header-h) + 26vw) 0 var(--space-lg); }
  .s-pass__offer { grid-column: 1; grid-row: 2; padding: 0 var(--gutter) var(--space-xl); }

  .s-manifesto { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* Sin reserva para la barra fija: iba en el <body>, así que los 88px quedaban DEBAJO del
     footer como una banda off-white. La barra se esconde sola cuando el footer entra en
     pantalla (initSticky en summer.js), así que al final del scroll no tapa nada. */
  .hero--landing {
    /* 2026-09-27: -12px aprox. El título (2 líneas) ya entraba; sobraba aire abajo */
    --landing-card-h: clamp(52px, 7.2svh, 58px);
    --landing-pillar-row: var(--landing-card-h);
  }
  .hero--landing .pcard {
    --pc-title: clamp(9.75px, 2.75vw, 12px);
    --pc-pad: 3px;
  }
  .hero--landing .pcard__head {
    min-height: var(--landing-card-h);
    padding: calc(var(--pc-num) * 0.48) var(--pc-pad) 8px;
  }
  .hero--landing .pcard__title { letter-spacing: -0.055em; }
  .hero--landing .pcard__title > span { white-space: nowrap; }
  .js .hero--landing .pcard__body { display: none; }
  .hero--landing .pcard.is-mobile-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--refine-cream) 78%, transparent);
  }
  .hero--landing .pcard.is-mobile-active .pcard__plus::after { rotate: 0deg; }
  .hero--landing .pillars__panel {
    position: absolute;
    z-index: 4;
    top: calc(100% + (var(--landing-pillar-row) * 0.5) + 28px);
    left: var(--gutter);
    right: var(--gutter);
    box-sizing: border-box;
    min-height: auto;
    padding: 16px 18px 18px;
    background: var(--pillar-card);
    color: var(--refine-ink);
  }
  .hero--landing .pillars__panel[hidden] { display: none; }
  .js .hero--landing .pillars__panel {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .js .hero--landing .pillars__panel.is-open {
    opacity: 1;
    transform: none;
  }
  /* Mismo cuerpo que el título de las cards (.pcard en mobile): el panel repite ese título,
     así que no debe verse más grande que el original. */
  .pillars__panel-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(9.75px, 2.75vw, 12px);
    line-height: 1.12;
    letter-spacing: -0.055em;
    text-transform: uppercase;
  }
  .pillars__panel-copy {
    max-width: 34em;
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: clamp(9.75px, 2.75vw, 12px); /* igual que el título: la diferencia la marca el peso */
    font-weight: 300;
    line-height: 1.4;
  }
  /* 2026-09-28: tarjeta más baja y con más aire adentro. Lo que cede para que el dorso
     entre en una línea es el cuerpo del valor, no el padding (ver .pass__item .v). */
  .pass { aspect-ratio: 1.34; }
  .pass__face { padding: 24px; gap: 8px; }
  /* +20% (2026-09-28): el wordmark y la bajada de la tarjeta se leían chicos en el teléfono. */
  .pass__brand .logo { font-size: calc(62.4px * var(--type-display)); }
  .pass__product { font-size: 20.4px; }
  .pass__item { grid-template-columns: 6em 1fr; gap: 6px; }
  /* Ningún valor del dorso puede partirse en dos líneas. El más largo ("6 menús / apto sin
     tacc y veggie") mide 15.87em con las métricas reales de Be Vietnam Pro 400, así que el
     cuerpo se ata al ancho libre: card (88vw, con tope de 460px) menos 160px de cromo
     (2×24 de padding de la cara + 90 de la columna de etiquetas + 6 de gap + 16 del propio
     relleno), dividido 16.5 (~4% de margen). El tope sigue siendo 12px. */
  .pass__item .v { font-size: min(12px, calc((88vw - 160px) / 16.5)); padding: 4px 8px; }
  /* Card de precio: bajada y línea de confianza en un solo renglón. El cuerpo se calcula
     contra el ancho útil de la card (cqi), no del viewport. Medido con las métricas de
     Mulish 400: la bajada mide 19.87em (cabe hasta 5.03cqi) y la meta, sin tracking,
     22.81em (cabe hasta 4.38cqi); se deja ~4% de margen. Con vw a 390px se pasaban por
     fracciones de px y partían.
     2026-10-08: en el iPhone de Fran seguían partiendo. Ahora no pueden partirse (nowrap), sin
     piso (en pantallas angostas se achican en vez de salirse) y con un valor en vw antes del
     cqi para el Safari que no lo entiende: la card mide 100vw − 40 y su ancho útil 100vw − 96. */
  .s-offer { container-type: inline-size; }
  .s-offer__desc,
  .s-offer .s-cta__meta { white-space: nowrap; }
  .s-offer__desc { font-size: min(16px, calc((100vw - 96px) / 20.7)); font-size: min(16px, 4.85cqi); }
  .s-offer .s-cta__meta { font-size: min(14px, calc((100vw - 96px) / 23.8)); font-size: min(14px, 4.2cqi); letter-spacing: 0; }
  .s-offer .btn-pill { width: 100%; }

  .s-cases { grid-template-columns: 1fr; }

  .faq__a { padding: 0 16px; }
  .faq__a p,
  .faq__a ul { padding-bottom: 18px; }
  
  .s-sticky {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    background: var(--sticky-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -20px var(--mock-shadow);
    transform: translateY(160%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .s-sticky.is-visible { transform: none; }
  /* refine-core's cookie card moves up while this bar is visible: the bar (52px) plus a 10px gap
     (spec legal-alignment, T1c). */
  html:has(.s-sticky.is-visible) .rf-consent { translate: 0 -62px; }
  /* Más minimal y con la moneda (Fran, 2026-10-09): precio más chico, a su derecha la moneda en un menú chico con
     banderas, botón más bajo. */
  .s-sticky__info { display: flex; align-items: center; gap: 10px; }
  .s-sticky__price { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.1; color: var(--refine-cream); letter-spacing: var(--track-tight); }
  .s-sticky .btn-pill { min-height: 40px; padding: 0.6em 1.1em; background: var(--refine-cream); color: var(--refine-ink); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; }

  /* Menú de moneda (inc/content.php, refine_the_currency_menu): solo bandera, moneda y flecha, sin borde (Fran); la
     lista abre hacia arriba. */
  .currency-menu { position: relative; }
  .currency-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px; /* ≥ 24 px de área táctil (WCAG 2.2, 2.5.8) */
    padding: 0 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--track-label);
    color: var(--refine-cream);
    cursor: pointer;
  }
  .currency-menu__chevron { width: 8px; height: 5px; transition: transform var(--dur-fast) var(--ease-out); }
  .currency-menu__toggle[aria-expanded="true"] .currency-menu__chevron { transform: rotate(180deg); }
  .currency-menu__list {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    display: grid;
    gap: 2px;
    width: max-content; /* el contenedor es tan angosto como el botón: sin esto la lista se aplastaba */
    min-width: 100%;
    padding: 4px;
    border-radius: 14px;
    background: var(--sticky-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -20px var(--mock-shadow);
  }
  .currency-menu__list[hidden] { display: none; }
  .currency-menu__opt {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--track-label);
    white-space: nowrap;
    color: rgb(255 254 234 / 0.72);
    cursor: pointer;
  }
  .currency-menu__opt:hover { color: var(--refine-cream); }
  .currency-menu__opt[aria-pressed="true"] { color: var(--refine-cream); background: rgb(255 254 234 / 0.1); }
  .currency-menu__flag { flex: none; font-size: 13px; line-height: 1; }
  .currency-menu__toggle:focus-visible,
  .currency-menu__opt:focus-visible { outline: 2px solid var(--refine-cream); outline-offset: 2px; }
}
/* Sin JS el menú no hace nada: no se muestra (queda la moneda base, como el selector). */
html:not(.js) .currency-menu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .s-sticky,
  .currency-switch__btn,
  .currency-menu__chevron { transition: none; }
}