/* ==========================================================================
   Dear Blanc · Capa editorial
   Traduce el deck de 12 láminas al sitio. Se carga DESPUÉS de styles.css y
   solo reescribe geometría, ritmo tipográfico y jerarquía: ningún token de
   color nuevo, ningún cambio de marcado estructural.

   Las cuatro decisiones que definen el deck y que aquí se replican:
   1. Esquina recta. Las láminas son papel cortado, no tarjetas de software.
   2. Filete de 1px en vez de sombra. La profundidad viene del aire, no del blur.
   3. Cintillo numerado por lámina ("05 · Estética dental") sobre una regla.
   4. Serif grande y muy apretada contra sans diminuta y muy espaciada.
   ========================================================================== */

:root {
  /* El deck no tiene una sola esquina redondeada. Los radios se conservan
     como variables para no romper nada que los use, pero valen casi cero. */
  --r-box: 2px;
  --r-sm:  2px;

  /* Altura del cintillo de lámina. */
  --slide-h: 2.75rem;

  /* Tracking de las etiquetas versalitas: el deck las abre muchísimo. */
  --track-label: .24em;
}

/* --------------------------------------------------------------------------
   1. Cintillo de lámina
   El deck rotula cada página con un número y un nombre sobre una regla fina.
   Se genera desde el atributo data-slide para no ensuciar el marcado con un
   <div> decorativo por sección. La regla mide exactamente la columna de
   contenido, en secciones .wrap y en las de ancho completo por igual.
   -------------------------------------------------------------------------- */
.section[data-slide] {
  position: relative;
  padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + var(--slide-h));
}
.section[data-slide]::before {
  content: attr(data-slide);
  position: absolute;
  top: 0;
  /* Alinea con la columna de 1200px sin importar el ancho de la ventana. */
  inset-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  height: var(--slide-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* En las secciones que ya son la columna, el inset es solo el gutter. */
.section.wrap[data-slide]::before { inset-inline: var(--gutter); }

/* Sobre fondos oscuros el cintillo se aclara. */

/* --------------------------------------------------------------------------
   2. Escala tipográfica
   El deck sube el display y baja el cuerpo: el contraste de tamaño hace casi
   todo el trabajo de jerarquía, así que no hace falta negrita en ningún lado.
   Tracking negativo en display, positivo en versalitas (regla de Apple: el
   tracking es específico del tamaño, nunca un valor único).
   -------------------------------------------------------------------------- */
h2 {
  font-size: clamp(2.05rem, 5vw, 3.35rem);
  line-height: 1.045;
  letter-spacing: -.021em;
}
h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -.006em;
}

/* La segunda línea del titular en tono menor: el deck la usa en casi todas
   las láminas ("Función + salud + estética", "Empieza por lo que buscas"). */
.head > .body,
.head > .lede { margin-top: 1.05rem; }
.head { margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }

.eyebrow {
  font-size: .625rem;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
}
/* El eyebrow dorado se reserva para los pasos del recorrido, no para todo. */
.head--center .eyebrow { color: var(--oak-ink); }

/* --------------------------------------------------------------------------
   3. Geometría: filete en vez de sombra
   Las tarjetas del deck son rectángulos de papel con un borde de un pelo.
   Quitar la sombra es lo que más acerca el sitio a la referencia.
   -------------------------------------------------------------------------- */
.card,
.quiz__item,
.tx__card,
.btn--primary {
  box-shadow: none;
}
.card:hover,
.quiz__item:hover {
  box-shadow: none;
  transform: none;              /* el deck es papel: no levita */
  border-color: var(--ink);     /* el filete se oscurece, eso basta */
  background: var(--surface);
}
.card, .quiz__item, .tx__card {
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Botones
   El deck usa rectángulos vino con versalitas muy abiertas. La píldora
   dorada del sitio original era el elemento más "web app" que quedaba.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 2px;
  padding: 1rem 1.6rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.btn--primary {
  background: var(--c-wine);
  color: var(--c-cream);
}
.btn--primary:hover {
  background: var(--c-wine-2);
  color: var(--c-cream);
}
.btn--ghost {
  border-color: var(--edge);
  background: transparent;
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); }
/* El pie y el cierre son vino: ahí el botón sólido se invierte a crema. */
.close .btn--primary { background: var(--c-gold-lt); color: var(--c-ink); }
.close .btn--primary:hover { background: var(--c-cream); }
/* Sobre el bloque dorado (.ritual) el vino sigue siendo el que contrasta. */
.ritual .btn--primary { background: var(--c-wine); color: var(--c-cream); }

/* --------------------------------------------------------------------------
   5. Rejilla de "¿Qué quieres transformar?"
   El deck la arma como mosaico de dos columnas: una viñeta cuadrada a la
   izquierda, el texto al centro, la flecha alineada al margen derecho.
   No hay fotografía por tratamiento en /assets, así que la viñeta es un
   recuadro con filete y el ícono de línea de la sección, con la misma
   proporción que el thumbnail del deck. Cuando existan fotos reales, se
   sustituye .quiz__thumb por un <img> de 1/1 y no cambia nada más.
   -------------------------------------------------------------------------- */
.quiz { gap: 0; border-top: 1px solid var(--line); }
.quiz__item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1.15rem var(--gutter) 1.15rem 0;
  background: transparent;
  align-items: center;
  gap: 1.1rem;
}
.quiz__item:hover { background: transparent; border-bottom-color: var(--ink); }
.quiz__text strong {
  font-family: "CMU Serif", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.quiz__text small { font-size: .78rem; letter-spacing: .01em; }
/* La flecha del deck es un trazo suelto, sin disco. */
.quiz__item .disc {
  border: 0;
  background: transparent;
  width: auto; height: auto;
  color: var(--ink-3);
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.quiz__item .disc svg { width: 18px; height: 18px; }
.quiz__item:hover .disc {
  background: transparent;
  border: 0;
  color: var(--ink);
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   6. "Nuestra diferencia" 01–06
   El deck la pone a dos columnas con el número en serif grande arriba de
   cada entrada y sin filete entre ellas: la numeración ya ordena.
   -------------------------------------------------------------------------- */
.diff { gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 5vw, 4rem); }
.diff__item { border-top: 0; padding-top: 0; }
.diff__num {
  font-style: normal;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  /* --oak sobre --paper-2 da 2.80:1 y no alcanza ni el mínimo de texto
     grande (3:1). --oak-ink es el tono de la misma familia pensado para
     texto y sí pasa. */
  color: var(--oak-ink);
  margin-bottom: .35rem;
  letter-spacing: -.02em;
}
.diff__item h3 { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   7. Tarjetas de experiencia
   El deck las reduce a una fila de íconos de línea con una etiqueta corta:
   sin caja, sin relleno, sin fondo. Es la lámina 11.
   -------------------------------------------------------------------------- */
.exp { gap: clamp(1.5rem, 3vw, 2.5rem); }
.card {
  border: 0;
  background: transparent;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}
.card:hover { border-color: transparent; border-top-color: var(--ink); background: transparent; }
.card .disc {
  border-color: var(--line-strong);
  background: transparent;
  border-radius: 2px;
}
.card h3 { margin-top: .85rem; font-size: 1.05rem; }
.card p { font-size: .875rem; }
/* La tarjeta "yeso" pierde su fondo: en el deck todas pesan igual. */
.card--plaster { background: transparent; }
.card--plaster::after { display: none; }

/* --------------------------------------------------------------------------
   8. Panel de tratamientos
   Las láminas 05–07 son una lámina por familia, con el titular grande a la
   izquierda y la lista de procedimientos en dos columnas debajo.
   -------------------------------------------------------------------------- */
.tx__card {
  background: var(--surface);
  border-radius: 2px;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
}
.tx__tab {
  border-radius: 2px;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .75rem 1.1rem;
}
.tx__kicker { letter-spacing: var(--track-label); font-size: .625rem; }
.tx__card h3 { font-size: clamp(1.75rem, 3.8vw, 2.4rem); line-height: 1.08; }
.tx__item h4 {
  font-family: "CMU Serif", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -.008em;
}

/* --------------------------------------------------------------------------
   9. Portada
   La lámina 01 pone el rótulo abajo a la izquierda, en bloque, sobre la
   foto a sangre. El sitio ya trae la estructura; aquí solo se aprieta la
   tipografía y se añade la firma de plaza que lleva la lámina.
   -------------------------------------------------------------------------- */
.hero__title { letter-spacing: -.028em; line-height: 1.02; }
.hero__eyebrow { font-size: .625rem; letter-spacing: var(--track-label); }
.hero__tag {
  font-family: "CMU Serif", Georgia, serif;
  font-style: italic;
}
.hero__link {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Claim y firma manuscrita
   "Tiene que sentirse tuya" es la única línea del deck en trazo suelto.
   No se añade una fuente manuscrita: traerla de un CDN rompería la regla de
   tipografías auto-hospedadas del proyecto y sumaría una petición bloqueante.
   La itálica de CMU Serif a tamaño grande hace el trabajo.
   -------------------------------------------------------------------------- */
.claim { letter-spacing: -.02em; line-height: 1.08; }
.signature {
  font-family: "CMU Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-gold-lt);
  margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   11. Ficha de contacto del cierre
   La lámina 12 cierra con WhatsApp, Instagram y plaza en una columna de
   versalitas con ícono. Sustituye a la fila suelta de logos sociales.
   -------------------------------------------------------------------------- */
.close__facts {
  display: grid;
  gap: .7rem;
  justify-content: start;   /* el cierre cuelga del margen izquierdo, la ficha también */
  margin-top: 1.9rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--c-cream) 82%, transparent);
}
.close__facts > * {
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-content: flex-start;
}
.close__facts svg { width: 15px; height: 15px; flex: none; color: var(--c-gold-lt); }
.close__facts a:hover { color: var(--c-cream); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   12. Marquesina
   El deck no tiene banda en movimiento. Se conserva porque es el único
   respiro entre la portada y el cuerpo, pero baja a filete y versalitas
   para que no compita con los cintillos numerados.
   -------------------------------------------------------------------------- */
.marquee { padding-block: .7rem; }
.marquee i { font-style: normal; font-family: "Instrument Sans", system-ui, sans-serif; font-size: .6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); padding-inline: 1.1rem; }
.marquee b { font-size: .5rem; }

/* --------------------------------------------------------------------------
   13. Reglas de dos columnas
   El deck es una rejilla de dos columnas en casi todas sus láminas.
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .quiz { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  /* Con dos columnas, el filete de cada fila no debe llegar al canal. */
  .quiz__item { padding-right: 0; }
}
@media (min-width: 1024px) {
  .diff { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   14. Movimiento
   El deck es papel: la única animación que le corresponde es la aparición.
   Se respeta prefers-reduced-motion desde styles.css; aquí solo se acorta
   el recorrido para que el revelado se lea como un cambio de lámina y no
   como un deslizamiento largo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { transition-duration: .55s; }
}

/* --------------------------------------------------------------------------
   15. Eje izquierdo
   Corrección sobre la referencia: en las doce láminas del deck no hay un solo
   bloque centrado. Todo cuelga del margen izquierdo y la columna de texto se
   corta antes de la mitad. El centrado del sitio original era lo que más lo
   alejaba del deck, por encima incluso de la paleta.
   -------------------------------------------------------------------------- */
.head--center {
  margin-inline: 0;
  text-align: left;
  max-width: 34rem;
}
.head--center .eyebrow { justify-content: flex-start; }
.head--center .body,
.head--center p { margin-inline: 0; }

.presenta__intro { text-align: left; margin-inline: 0; }
.presenta__lede  { margin-inline: 0; }

.claim { text-align: left; }

.ritual__quote { text-align: left; margin-inline: 0; max-width: 46rem; }
.close__box    { text-align: left; margin-inline: 0; max-width: 46rem; }
.close__box .lede { margin-inline: 0 !important; }
.close__actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   16. La lámina 09 es vino, no dorada
   "No tienes que saber qué tratamiento necesitas" es la única página a color
   pleno del deck, y ese color es el vino de marca. En dorado leía como un
   aviso publicitario en medio de un documento de papel.
   -------------------------------------------------------------------------- */
/* La sección dejó de tener fondo vino (sección 30): el texto vuelve a la
   tinta normal. Se quedó crema cuando cambió el fondo, así que durante un
   rato fue texto claro sobre arcilla clara, es decir, invisible. */
.ritual h2, .ritual h3 { color: var(--ink); }
.ritual .eyebrow { color: var(--oak-ink); }
.ritual__line   { color: var(--ink); }
.ritual__promise{ color: var(--ink-2); }

/* Aquí había un aro dorado de 60rem, dibujado cuando la sección tenía
   fondo vino: sobre el vino era una curva fina y elegante. Con la sección
   en arcilla clara quedaba un círculo a medio ver que no significaba nada.
   Fuera. Las reglas de botón en crema que venían con aquel fondo también
   sobran: aquí ya no hay ningún botón claro sobre oscuro. */
.ritual { position: relative; }
.ritual > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   17. Lista de la valoración
   La lámina 04 lista el contenido de la valoración con íconos de línea
   cuadrados, sin disco relleno.
   -------------------------------------------------------------------------- */
.checklist .disc--sm {
  border-radius: 2px;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--oak-ink);
}
.checklist li { align-items: flex-start; }

/* --------------------------------------------------------------------------
   18. Contención del bloque de tratamientos a 320px
   Las pestañas en versalitas son más anchas que las originales y, al ser
   hijas de una rejilla, su min-content arrastraba a todo el bloque por
   encima del ancho de la ventana: 36px de scroll horizontal a 320px.
   min-width:0 devuelve la contención; el desplazamiento lateral sigue
   viviendo donde debe, dentro de .tx__tabs.
   -------------------------------------------------------------------------- */
.tx, .tx > *, .tx__panels, .tx__panel, .tx__card { min-width: 0; }
.tx__tabs { min-width: 0; max-width: 100%; }

/* En pantallas muy angostas el botón en versalitas con tracking abierto no
   cabe en una línea dentro de la tarjeta. Se le permite partir: preferimos
   dos renglones a 7px de scroll horizontal. */
@media (max-width: 400px) {
  .btn {
    white-space: normal;
    padding-inline: 1.15rem;
    letter-spacing: .12em;
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   19. Modo noche
   En claro el botón sólido es vino sobre papel y contrasta de sobra. En
   noche el fondo de la página YA es vino, así que un botón vino sobre vino
   desaparece aunque su texto siga siendo legible. El relleno se invierte al
   dorado claro, que es lo que hace de "tinta" en las superficies oscuras.
   Se usan los tokens --c-* a propósito: son los que NO se invierten con el
   esquema, y son los únicos correctos sobre superficies siempre oscuras.
   -------------------------------------------------------------------------- */
/* (tema oscuro retirado: la paleta de la marca es una sola) */

/* ==========================================================================
   20. PLATAFORMA · Safari y Chrome en iOS, Android, macOS y Windows
   Va en este archivo y no en uno nuevo a propósito: el sitio no tiene paso
   de compilación, así que cada hoja extra es una petición bloqueante más en
   la primera pintura, y eso se paga justo en el móvil que queremos cuidar.
   ========================================================================== */

/* --- 20.1 Controles nativos de Safari -------------------------------------
   Safari (iOS y macOS) pinta input y textarea con su propio relleno,
   sombra interior y esquina redondeada, y eso gana sobre el diseño: el
   campo se ve "de sistema" junto a los demás controles del sitio.
   appearance:none es la única forma de recuperarlos. Sin esto el
   formulario se ve correcto en Chrome y mal en iPhone.
   -------------------------------------------------------------------------- */
.field input,
.field textarea,
.field select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--r-sm);   /* Safari impone el suyo si no se repite */
}
.field textarea {
  resize: vertical;             /* el horizontal rompe la rejilla en escritorio */
  min-height: 4.5rem;
}

/* Safari iOS hace zoom automático al enfocar un campo cuyo texto mida
   menos de 16px, y al salir deja la página desplazada y más grande. Hoy
   heredan 1rem y están bien; se fija de forma explícita para que un cambio
   futuro de tipografía no lo rompa sin que nadie se dé cuenta. */
.field input,
.field textarea,
.field select { font-size: max(1rem, 16px); }

/* --- 20.2 Objetivos táctiles ----------------------------------------------
   Apple pide 44x44 puntos y Android 48dp. Siete controles quedaban por
   debajo, dos de ellos introducidos por la ficha de contacto del cierre
   (21px de alto: una línea de texto suelta). Se agranda el área sin mover
   la posición visual, con min-height y centrado, no con margen.
   -------------------------------------------------------------------------- */
.close__facts > * { min-height: 44px; }
.close__facts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav__burger { width: 44px; height: 44px; }
.brand { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }
.hero__link { min-height: 44px; align-items: center; }
.foot address a,
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; }

/* --- 20.3 Windows: alto contraste -----------------------------------------
   En modo de contraste forzado el sistema reemplaza los colores. Todo el
   diseño descansa en filetes de 1px con color propio, y ahí desaparecen:
   las tarjetas y los campos quedan sin borde y el lienzo se vuelve ilegible.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .card, .quiz__item, .tx__card, .field input, .field textarea, .pick {
    border: 1px solid CanvasText;
  }
  .btn { border: 1px solid ButtonText; }
  /* Los íconos del sprite heredan currentColor y el sistema sí lo respeta. */
  .section[data-slide]::before { border-bottom: 1px solid CanvasText; }
  /* La curva decorativa de la lámina 09 no aporta nada sin color. */
  .ritual::after { display: none; }
}

/* --- 20.4 Transparencia y contraste reducidos -----------------------------
   iOS y macOS exponen estas preferencias y Safari las respeta. La barra
   traslúcida se vuelve sólida en vez de perder legibilidad.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .quiz__item, .tx__card { border-color: var(--ink); }
  .section[data-slide]::before { color: var(--ink); border-bottom-color: var(--ink); }
  .eyebrow { color: var(--ink-2); }
}

/* Los enlaces del menú de escritorio miden 32px de alto. Con ratón es de
   sobra (el puntero es preciso), pero una tableta o un portátil táctil
   ancho los recibe con el dedo. Se agrandan solo donde el puntero es
   grueso, para no engordar la barra de escritorio sin motivo. */
@media (pointer: coarse) {
  .nav__links a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   21. FOTOGRAFÍA REAL DEL ESTUDIO
   Las fotos salieron del PDF de marca (ADN CREATIVO & DEAR BLANC): son del
   consultorio real, recortadas para dejar fuera el texto de la campaña de
   apertura ("COMING SOON", "GRAN APERTURA"), que no puede ir en un sitio en
   vivo. Vienen a 432px de ancho porque el PDF las trae reducidas: alcanzan
   para estas cajas, pero conviene sustituirlas por los originales.
   ========================================================================== */

/* --- 21.1 Rejilla del estudio --------------------------------------------
   Sustituye a los .slot de relleno conservando exactamente sus proporciones,
   que es lo que pedía el README para cuando llegara la fotografía.
   -------------------------------------------------------------------------- */
.studio__shot {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  min-width: 0;
  max-width: 100%;
}
.studio__shot--tall { aspect-ratio: 3 / 4; }
.studio__shot--wide { aspect-ratio: 16 / 9; }
.studio__shot picture,
.studio__shot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Velo inferior: el rótulo va sobre la foto y necesita fondo propio, si no
   depende del azar de lo que haya en esa zona de la imagen. */
.studio__shot::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(30, 13, 19, .68), transparent);
  pointer-events: none;
}
.studio__shot span {
  position: relative; z-index: 1;
  margin: 1.1rem 1.25rem;
  font-family: "CMU Serif", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-cream);          /* token que NO se invierte: el velo es
                                     oscuro en claro y en noche por igual */
}

/* --- 21.2 Bandas de imagen ------------------------------------------------
   El deck abre varias láminas con una foto a sangre antes del titular.
   Se reproduce como una banda de ancho completo y altura contenida.
   -------------------------------------------------------------------------- */
.band {
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.band img {
  width: 100%;
  height: clamp(190px, 30vw, 360px);
  object-fit: cover;
  object-position: center;
}
.band--tint { background: var(--paper-3); }
.band--tint img { height: clamp(220px, 34vw, 420px); object-position: center 35%; }

/* --- 21.3 Filosofía a dos columnas ----------------------------------------
   La lámina 02 del deck pone el texto a la izquierda y un panel vertical de
   imagen a la derecha, más angosto. En una columna (móvil) el panel iría
   antes del texto y robaría la entrada, así que ahí se oculta: la lámina
   funciona sin él y la foto ya aparece más abajo, en El estudio.
   -------------------------------------------------------------------------- */
.filo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
/* En el teléfono la foto va debajo del texto, en 4:5 y anclada arriba
   (ahí está lo que importa). Antes se apagaba por debajo de 900px. */
.filo__shot { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.filo__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; border-radius: 2px; }
.filo .claim { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

@media (min-width: 900px) {
  .filo { grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 260px); align-items: stretch; }
  .filo__shot { display: block; }
}

/* ==========================================================================
   30. Ritmo de superficies
   El fondo de la página ya es beige (styles.css): aquí solo se define la
   escala que separa una sección de la siguiente. Una sube hacia el hueso,
   la siguiente baja hacia la arcilla, y así el scroll tiene pulso sin que
   aparezca un bloque oscuro cada dos pantallas.

   El vino dejó de ser superficie. Vive en el texto, en los botones y en el
   cierre, que es el único momento oscuro de la página.
   ========================================================================== */
:root {
  /* Escala de superficies, toda de los neutros del manual. */
  --bone:      #FFFFFF;
  --clay:      #D0C7BD;
  --clay-ink:  #2F1116;
  --c-bone:      #FFFFFF;
  --c-clay-deep: #2F1116;
  --c-clay-2:    #2F1116;
}

.section--sand { background: var(--bone); }      /* sube */
.section--tint { background: var(--paper-2); }   /* baja */
.section--clay { background: var(--paper-3); }   /* baja más */

/* "No tienes que saberlo" pasa de bloque oscuro a arcilla con texto vino.
   Era el segundo muro oscuro de la página y no hacía falta. */
.ritual { background: var(--paper-3); color: var(--ink); }
.ritual .btn--primary { background: var(--c-wine); color: var(--c-cream); }

/* El cierre es el único bloque oscuro, y ahí sí el vino de la marca: llega
   después de toda la página en beige y funciona como punto final. */
.close { background: var(--c-wine); color: var(--c-cream); }
.close .btn--primary { background: var(--c-cream); color: var(--c-wine); }
.close .btn--primary:hover { background: var(--c-gold-lt); color: var(--c-wine); }

/* ==========================================================================
   31. Portada
   La foto nueva trae medio encuadre vacío a la izquierda: ahí va el
   titular. No hace falta ningún velo, así que la fotografía se ve tal cual
   y la chica nunca queda tapada por el texto.

   Móvil: texto arriba, foto debajo, entera.
   >= 900px: la foto ocupa la mitad derecha a sangre y el titular cae sobre
   el hueco vacío de la propia imagen.

   El fondo del archivo se tintó al beige de la página, así que la foto y el
   papel son el mismo color y no se ve el canto del rectángulo.
   ========================================================================== */
.hero {
  position: relative;
  background: var(--paper-3);
  margin-top: calc(-1 * var(--nav-h));
  min-height: 0;
  display: block; overflow: hidden;
  background: var(--paper);
  padding-block: calc(var(--nav-h) + 1.5rem) 0;
}
.hero::after { content: none; }            /* fuera el velo de vino */

.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.hero__inner { position: relative; z-index: 1; max-width: 46rem; }

.hero__bg {
  position: relative; display: block;
  margin-inline: calc(-1 * var(--gutter));   /* a sangre en móvil */
  /* La toma es apaisada con la chica a la derecha: en un teléfono, servida
     entera, media pantalla era fondo vacío. Se recorta a 4:3 y se encuadra
     sobre ella. */
  aspect-ratio: 4 / 3; overflow: hidden;
}
.hero__bg img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 68% bottom;
}
/* El canto de abajo se funde con el papel para que la foto no termine en
   una raya recta contra la marquesina. */
.hero__bg::before {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 1; height: 14%;
  background: linear-gradient(0deg, var(--paper) 0%, transparent 100%);  /* funde con la sección siguiente */
  pointer-events: none;
}

.hero__title { display: grid; gap: .04em; font-size: clamp(2.5rem, 10vw, 6.5rem); }
.hero__title > span {
  display: block;
  font-family: "CMU Serif", Georgia, serif;
  font-size: 1em; font-style: normal;
  color: var(--c-wine);
  opacity: 0; transform: translateY(.35em);
  animation: heroLinea .8s var(--ease) forwards;
}
.hero__title > span:nth-child(1) { animation-delay: .12s; }
.hero__title > span:nth-child(2) { animation-delay: .26s; }
.hero__title > span:nth-child(3) { animation-delay: .40s; color: var(--oak-ink); }
@keyframes heroLinea { to { opacity: 1; transform: none; } }

.hero__body { color: var(--ink-2); max-width: 34ch; }

@media (min-width: 56.25em) {
  /* La portada mide exactamente lo que la foto (1672x941). Antes era más
     alta, así que cover la estiraba y el vacío que la toma tiene abajo a la
     izquierda se convertía en una zona muerta enorme bajo el titular. Con
     la proporción de la imagen no sobra ni falta nada. */
  .hero {
    min-height: 0; aspect-ratio: 1390 / 695;   /* la del archivo: corte desde arriba y acercado por los lados, la sonrisa entera y con aire */
    display: block; padding-block: 0;
    position: relative;
  }
  .hero__grid { display: block; height: 100%; }

  .hero__bg { position: absolute; inset: 0; width: 100%; margin: 0; aspect-ratio: auto; }
  .hero__bg::after  { content: none; }
  .hero__bg::before { height: 14%; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

  /* El texto va en la mitad vacía del encuadre, centrado en vertical.
     Aquí había un velo radial de papel para "asegurar" el contraste: sobre
     una foto que ya es clara solo conseguía empañarla. El vino sobre el
     fondo de estudio da más de 10:1, así que no hace falta nada. */
  .hero__inner {
    position: absolute; z-index: 2;
    left: var(--gutter); top: 50%; transform: translateY(-50%);
    width: min(42%, 34rem); max-width: none;
    padding-bottom: 0;
  }
  .hero__inner::before { content: none; }

  .hero__title { font-size: clamp(2.6rem, 4vw, 3.9rem); }
  .hero__title > span { white-space: nowrap; }
  .hero__title > span:nth-child(2) { padding-left: .3em; }
  .hero__title > span:nth-child(3) { padding-left: .6em; }

  .hero__body { max-width: 28ch; margin-top: 1.25rem; font-size: 1rem; }
}

@media (min-width: 75em) {
  .hero__inner { left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); width: min(40%, 38rem); }
  .hero__title { font-size: clamp(3rem, 3.6vw, 4.4rem); }
}

/* MÓVIL. Antes eran dos bloques pegados: el texto arriba sobre papel y la
   foto debajo, que además no llegaba al borde derecho y dejaba un sobrante
   de beige al pie. Ahora la portada es la fotografía a sangre y el texto va
   encima, como en escritorio.

   El titular se apoya en la zona alta, que en esta toma es fondo
   desenfocado, y la cara queda libre. El velo de papel solo cubre esa
   franja alta y se apaga antes de llegar a la sonrisa. */
@media (max-width: 56.24em) {
  .hero {
    position: relative;
    min-height: min(88svh, 760px);
    /* El texto va abajo y no arriba: en esta toma la cara ocupa el tercio
       alto, así que ahí el titular le caía encima de la sonrisa. Abajo hay
       pelo y hombro, que es la zona tranquila del encuadre. */
    display: grid; align-content: end;
    padding-block: calc(var(--nav-h) + 1.25rem) clamp(2rem, 7vh, 3.5rem);
    overflow: hidden;
  }
  .hero__grid { display: block; }

  .hero__bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; margin: 0; aspect-ratio: auto;
  }
  .hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 64% center;
  }
  /* El fundido de abajo cose la portada con la marquesina. */
  .hero__bg::before { content: none; }   /* lo cose el velo del texto */

  .hero__inner {
    position: relative; z-index: 2;
    max-width: none; width: 100%;
    padding-bottom: 0;
  }
  /* Velo solo en la franja del texto. Se apaga al 62%, muy por encima de
     donde empieza la sonrisa. */
  /* El velo sube desde el pie y se apaga antes de llegar a la boca. */
  .hero__inner::before {
    content: ""; position: absolute; z-index: -1;
    inset: auto calc(-1 * var(--gutter)) -8rem;
    height: calc(100% + 14rem);
    background: linear-gradient(0deg,
      color-mix(in srgb, var(--paper) 94%, transparent)  0%,
      color-mix(in srgb, var(--paper) 88%, transparent) 42%,
      color-mix(in srgb, var(--paper) 46%, transparent) 72%,
      transparent 100%);
    pointer-events: none;
  }

  .hero__title { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .hero__body { max-width: 30ch; margin-top: 1rem; }
}
}

@media (prefers-reduced-motion: reduce) {
  .hero__title > span { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   32. Tarjetas de tratamiento
   La foto manda y el texto es una sola línea. En puntero, la línea y el
   botón suben desde abajo; en táctil van siempre visibles, porque ahí no
   hay hover y esconder el precio detrás de un gesto que no existe sería
   esconderlo y ya.
   ========================================================================== */
.svcs {
  display: grid; gap: clamp(.65rem, 1.6vw, 1rem);
  /* Dos columnas anchas, no tres angostas: el reverso tiene que caber con
     su descripción y el botón sin recortar. A 210px de ancho el texto se
     cortaba a media frase y "Consultar precio" quedaba fuera. */
  /* 228 y no 260: entre 1024 y 1071 px el panel de .tx se parte en dos
     columnas y la rejilla cae a 498 px, por debajo de los 536 que pedían
     dos columnas de 260. El resultado era una sola columna de tarjetas
     enormes con media pantalla vacía al lado, justo en el iPad apaisado. */
  grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr));
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  perspective: 1200px;      /* la fuga vive en la rejilla: todas las
                               tarjetas giran hacia el mismo punto */
}

/* --------------------------------------------------------------------------
   La tarjeta se voltea. Delante, la fotografía y el nombre; detrás, la
   descripción y el botón. Al entrar en pantalla el bloque hace una pasada:
   las tarjetas giran una tras otra, enseñan el reverso y vuelven. Después
   manda quien mira: el cursor en escritorio, el toque en móvil.

   Es la forma de que el servicio se explique sin escribir el texto en la
   página: la descripción existe, pero solo cuando se pide.
   -------------------------------------------------------------------------- */
.svc {
  /* 3:2 y no 16:9: la foto se recorta un poco por arriba y abajo, y a
     cambio el reverso gana el alto que necesita el botón. */
  position: relative; aspect-ratio: 3 / 2;
  opacity: 0; transform: translateY(14px);
  animation: svcEntra .55s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes svcEntra { to { opacity: 1; transform: none; } }

.svc__flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* .62s se sentía un golpe. A .95s el giro se lee como un gesto. */
  transition: transform 1.05s var(--ease);
}
.svc[data-flip] .svc__flip { transform: rotateY(180deg); }
/* El hover es CSS puro y no sabía nada de la cola del barrido, así que
   pasando el ratón durante la pasada se veían dos reversos a la vez. Solo
   manda cuando la rejilla ya no está barriendo. */
@media (hover: hover) and (pointer: fine) {
  .svcs:not([data-barriendo]) .svc:hover .svc__flip,
  .svcs:not([data-barriendo]) .svc:focus-within .svc__flip { transform: rotateY(180deg); }
}

.svc__face {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Cada cara es su propio contexto de apilado. Sin esto, la foto, el velo
     y el nombre del frente (que llevan z-index) escapaban del ocultamiento
     de la cara trasera en Safari y Chrome móvil, y se veían en espejo
     encima del reverso. */
  isolation: isolate;
}
/* Además, la cara que no toca se oculta de verdad a la mitad del giro
   (el giro dura 1.05 s), en vez de confiar solo en backface-visibility. */
.svc__front { transform: rotateY(0deg); visibility: visible; transition: visibility 0s linear .5s; }
.svc__back  { visibility: hidden; transition: visibility 0s linear .5s; }
.svc[data-flip] .svc__front { visibility: hidden; }
.svc[data-flip] .svc__back  { visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .svcs:not([data-barriendo]) .svc:hover .svc__front,
  .svcs:not([data-barriendo]) .svc:focus-within .svc__front { visibility: hidden; }
  .svcs:not([data-barriendo]) .svc:hover .svc__back,
  .svcs:not([data-barriendo]) .svc:focus-within .svc__back { visibility: visible; }
}

/* ---------- Cara delantera ---------- */
.svc__front {
  background:
    radial-gradient(120% 90% at 30% 20%, var(--c-bone) 0%, transparent 60%),
    linear-gradient(155deg, var(--clay) 0%, var(--paper-2) 55%, var(--bone) 100%);
  display: grid; align-items: end;
}
/* Sin fotografía, la inicial hace de marca de agua: la tarjeta se sostiene
   igual y no queda un hueco ni un icono de imagen rota. */
.svc__front:not([data-foto])::before {
  content: attr(data-ghost);
  position: absolute; inset: 0 0 34% 0; display: grid; place-items: center;
  font-family: "CMU Serif", Georgia, serif; font-size: clamp(2.5rem, 7vw, 3.75rem);
  line-height: 1; color: color-mix(in srgb, var(--clay-ink) 22%, transparent);
}
.svc__front picture { position: absolute; inset: 0; }
.svc__front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo de lectura bajo el nombre. Solo donde hay foto. */
/* Orden de capas explícito. ::before es el primer hijo, así que sin z-index
   queda por debajo de la <picture>. */
.svc__front picture    { z-index: 0; }
.svc__front::after     { z-index: 2; }

/* El velo iba en rgba(20,8,12): negro con una pizca de rojo, que no es un
   color de la marca, y llegaba hasta el 62% del alto, así que a media
   tarjeta todavía agrisaba la foto. Se veían un 26% más oscuras.

   Y al igualar las cuatro fotos de estudio con las nueve de lámina, las
   trece pasaron a ser imágenes claras sobre beige. Sobre eso, un nombre en
   crema no se lee por mucho velo oscuro que le eches encima, y el velo
   oscuro además pelea con la fotografía.

   Así que el velo se invierte: papel abajo y nombre en vino. Es lo que
   pide una fotografía clara, y el único acento sigue siendo el vino.
   Alcance 46% en vez de 62%: a media tarjeta la foto vuelve a su
   luminancia real. */
.svc__front[data-foto]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--paper) 95%, transparent)  0%,
    color-mix(in srgb, var(--paper) 88%, transparent) 14%,
    color-mix(in srgb, var(--paper) 36%, transparent) 30%,
    transparent 46%);
}
/* z-index 3 y no 1: el velo está en 2, así que con 1 el nombre quedaba
   pintado por debajo y se veía lavado. */
.svc__front .svc__name { position: relative; z-index: 3; padding: .8rem .85rem .85rem; }
.svc__front[data-foto] .svc__name { color: var(--ink); }

/* ---------- Cara trasera ---------- */
.svc__back {
  transform: rotateY(180deg);
  background: var(--surface);
  border-color: var(--oak-soft);
  padding: .85rem .9rem;
  display: grid; align-content: space-between; gap: .4rem;
}
.svc__back .svc__name { color: var(--oak-ink); }
.svc__desc {
  margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-2);
}

.svc__name {
  margin: 0; font-family: "CMU Serif", Georgia, serif;
  font-size: clamp(.9375rem, 2.2vw, 1.0625rem); line-height: 1.2; color: var(--ink);
}

.svc__cta {
  display: inline-flex; align-items: center; gap: .4rem; align-self: end;
  min-height: 44px;
  font-size: clamp(.625rem, 2.4vw, .6875rem); letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--oak-ink); text-decoration: none; font-weight: 500;
}
.svc__cta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.svc__cta span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* El botón invisible cubre la tarjeta y es lo que se toca para voltearla.
   Se retira cuando el reverso está a la vista, para que ahí el toque caiga
   sobre "Consultar precio" y no vuelva a girar la tarjeta. */
.svc__girar {
  position: absolute; inset: 0; z-index: 2;
  border: 0; background: none; cursor: pointer; padding: 0;
}
/* Con el reverso a la vista el botón baja por debajo de "Consultar precio"
   pero sigue cubriendo el resto: tocar el texto devuelve la tarjeta al
   frente y tocar el botón abre WhatsApp. Sin esto, en móvil la tarjeta se
   quedaba volteada sin forma de regresarla. */
.svc[data-flip] .svc__girar { z-index: 1; }
.svc__flip { z-index: 0; }
.svc__cta { position: relative; z-index: 3; }
@media (hover: hover) and (pointer: fine) {
  /* Con cursor el giro ya lo hace el hover; el botón solo estorbaría al
     enlace del reverso. Queda para el teclado, que sí lo necesita. */
  .svc__girar { pointer-events: none; }
  .svc__girar:focus-visible { pointer-events: auto; }
}

/* ==========================================================================
   33. Pestañas con subrayado que se desliza
   ========================================================================== */
.tx__tabs { position: relative; }
.tx__ink {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--oak); pointer-events: none;
  transition: transform .34s var(--ease), width .34s var(--ease);
}

/* ==========================================================================
   34. Valoración
   ========================================================================== */
.val { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.val__flag {
  display: flex; align-items: flex-start; gap: .75rem;
  margin: 1.25rem 0 0; padding: .9rem 1rem;
  background: var(--surface); border-left: 2px solid var(--oak);
  font-size: .9375rem; line-height: 1.5; color: var(--ink-2);
}
.val__flag strong { color: var(--ink); }
.val__flag .disc--sm { flex: 0 0 auto; }
.val .body { margin-top: 1.1rem; }
.val__quote {
  margin: 1.25rem 0 1.75rem;
  font-family: "CMU Serif", Georgia, serif; font-style: italic;
  font-size: 1.25rem; line-height: 1.35; color: var(--oak-ink);
}

/* La lista se llena de arriba abajo cuando entra en pantalla. */
.checklist--stagger li {
  opacity: 0; transform: translateX(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.checklist--stagger.is-in li { opacity: 1; transform: none; }

@media (min-width: 48em) {
  .val { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
}

/* ==========================================================================
   35. Experiencia: cuatro pasos, sin descripciones
   La línea que une los pasos se dibuja con scaleX cuando la fila entra.
   ========================================================================== */
.exp--flow {
  position: relative; list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  counter-reset: paso;
}
.exp__step { position: relative; text-align: center; counter-increment: paso; }
.exp__step .disc {
  margin: 0 auto; transition: transform var(--dur) var(--ease-pop), background-color var(--dur) var(--ease);
}
.exp__step h3 {
  margin-top: .85rem; font-size: 1rem;
  font-family: "CMU Serif", Georgia, serif; font-weight: 400;
}
.exp__step::before {
  content: counter(paso, decimal-leading-zero);
  display: block; margin-bottom: .5rem;
  font-size: .6875rem; letter-spacing: var(--track-label, .18em);
  color: var(--oak-ink);
}
.exp__step:hover .disc { transform: translateY(-4px) scale(1.06); }

@media (min-width: 48em) {
  .exp--flow { grid-template-columns: repeat(4, 1fr); gap: var(--exp-gap, 1rem); }
  /* Hilo de un disco al siguiente. Se dibuja por tramos, desde el centro de
     cada paso hasta el centro del que sigue: así cruza el hueco de la
     rejilla sin depender de porcentajes que el gap desalinea. */
  .exp__step::after {
    content: ""; position: absolute; z-index: 0;
    left: 50%; width: calc(100% + var(--exp-gap, 1rem));
    top: 3.55rem; height: 1px;
    background: var(--line-strong);
    transform: scaleX(0); transform-origin: left;
    transition: transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * 140ms + .2s);
  }
  .exp__step:last-child::after { display: none; }
  .exp__step.is-in::after { transform: scaleX(1); }
  .exp__step .disc { position: relative; z-index: 1; }
}

/* ==========================================================================
   36. Equipo
   Las tarjetas se apilan en la misma celda y se cruzan con un fundido
   corto. Sin foto se pinta el avatar con iniciales.
   ========================================================================== */
.team { margin-top: clamp(2rem, 5vw, 3rem); }
.team__stage { display: grid; min-height: 19rem; }
.team__card {
  grid-area: 1 / 1;
  display: grid; gap: 1rem; justify-items: center; text-align: center;
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.team__card[data-on] { opacity: 1; transform: none; pointer-events: auto; }

.team__shot {
  width: clamp(9rem, 26vw, 12rem); aspect-ratio: 1; overflow: hidden;
  border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(155deg, var(--clay) 0%, var(--bone) 70%);
  border: 1px solid var(--line);
}
.team__shot img { width: 100%; height: 100%; object-fit: cover; }
.team__ini {
  font-family: "CMU Serif", Georgia, serif; font-size: 2.5rem;
  color: var(--clay-ink); letter-spacing: .04em;
}
.team__meta h3 { margin: 0; font-size: 1.125rem; }
.team__meta p { margin: .3rem 0 0; font-size: .875rem; color: var(--ink-3); }
.team__meta .team__ced { margin-top: .2rem; font-size: .75rem; letter-spacing: .02em; }

.team__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.team__arrow {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--edge); background: transparent; color: var(--ink);
  cursor: pointer; transition: background-color var(--dur) var(--ease);
}
.team__arrow:hover { background: var(--bone); }
.team__arrow svg { width: 16px; height: 16px; }
.team__arrow[data-team="prev"] svg { transform: rotate(180deg); }

.team__dots { display: flex; gap: .5rem; }
/* El punto se ve de 7px pero el botón mide 44: el área táctil es todo el
   cuadro, el círculo solo es lo que se pinta. */
.team__dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.team__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--line-strong); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.team__dot[aria-selected="true"]::before { background: var(--oak); width: 18px; }

/* ==========================================================================
   37. Sin movimiento
   Todo lo de arriba que se mueve solo se apaga aquí. Las animaciones de
   entrada terminan en su estado final, no en el inicial: apagarlas sin
   más dejaría la portada y las tarjetas invisibles.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__title > span,
  .svc { animation: none; opacity: 1; transform: none; }
  .hero__bg img { animation: none; }
  .checklist--stagger li { opacity: 1; transform: none; transition: none; }
  .exp__step::after { transform: scaleX(1); transition: none; }
  .team__card { transition: none; }
  /* La tarjeta sigue teniendo dos caras, pero el giro es instantáneo: la
     descripción tiene que seguir siendo alcanzable sin animación. */
  .svc__flip, .svc__front, .svc__back { transition: none; }
}

/* A partir de 64em las pestañas se acomodan en vertical (una lista al lado
   del panel). Ahí un subrayado horizontal no significa nada: la pestaña
   activa ya se distingue por su fondo, así que el filete se retira. */
@media (min-width: 64em) {
  .tx__ink { display: none; }
}

/* La fotografía de Filosofía iba a un ancho fijo que no se correspondía con
   el alto del texto: en pantallas anchas quedaba una columna flaca y larga,
   y en las de 900 a 1100 px se estiraba deformando el encuadre. Ahora es una
   proporción fija y la imagen se recorta dentro, nunca se deforma. */
@media (min-width: 900px) {
  /* El panel sube de 340 a 420 px y se centra contra el texto: a 340 la
     foto se quedaba chica al lado de un bloque de tres párrafos. */
  /* La foto crece otra vez y se sale a sangre por la derecha: dentro del
     wrap flotaba como una tarjeta pegada al texto; llegando al borde de la
     pantalla se incorpora a la sección en vez de posarse encima. */
  .filo { grid-template-columns: minmax(0, 1fr) clamp(360px, 46vw, 720px); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
  .filo__shot {
    aspect-ratio: 4 / 5;
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--maxw)) / 2));
  }
  /* La imagen se saca del flujo con position:absolute. Si se queda dentro,
     su alto intrínseco (215x540, o sea muy vertical) manda sobre el
     aspect-ratio y la columna se estiraba a 836 px: una tira larga y flaca
     al lado de un texto de 500. Ahora el recuadro lo fija la proporción y
     la foto se recorta dentro. */
  .filo__shot { position: relative; aspect-ratio: 3 / 4; height: auto; overflow: hidden; }
    /* Anclada arriba: el arco, que es lo que vale de la foto, está en el
     tercio superior. Centrada, el recorte 3:4 dejaba solo muro liso. */
  .filo__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
}


/* ==========================================================================
   40. Las preguntas, con fotografía
   Eran seis filas de texto con una flecha. Ahora cada una es una tarjeta con
   su imagen arriba y la pregunta debajo, igual que los tratamientos: la
   sección se decide mirando, no leyendo.
   ========================================================================== */
/* Seis tarjetas. Con auto-fill caían cuatro arriba y dos abajo, y la
   segunda fila dejaba medio ancho vacío. Fijando tres columnas salen dos
   filas llenas; dos en tablet y una en móvil, que también son exactos. */
/* Seis tarjetas que son solo la imagen: la pregunta y la categoría vienen
   rotuladas dentro del archivo, en la tipografía de la marca. Tres columnas
   a partir de 62em, dos desde 40em y una por debajo: con seis, las tres
   reparten exacto y ninguna deja huecos. */
.quiz--fotos {
  display: grid; gap: clamp(.65rem, 1.6vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 40em) { .quiz--fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .quiz--fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quiz--fotos .quiz__item {
  display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface); text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quiz--fotos .quiz__item::after { content: none; }   /* fuera la flecha de la lista */
.quiz--fotos .quiz__item:hover,
.quiz--fotos .quiz__item:focus-visible { transform: translateY(-3px); border-color: var(--ink); }

.quiz--fotos picture { display: block; }
.quiz--fotos img {
  display: block; width: 100%; height: auto;
  transition: transform .7s var(--ease);
}
.quiz--fotos .quiz__item:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .quiz--fotos .quiz__item:hover img { transform: none; }
}

/* ==========================================================================
   41. El logotipo de verdad
   El sitio dibujaba "Dear Blanc" con una web font en CURSIVA. El
   logotipo real de la marca es vertical, de otra tipografía (TAN St Canard,
   p.9 del manual), y en las cinco aplicaciones del manual nunca es itálico.
   Ahora se usa el trazado vectorial extraído del propio manual, así que
   hereda el color del contexto con currentColor.
   ========================================================================== */
.brand { display: inline-flex; align-items: center; }
.brand__marca {
  display: block; height: auto;
  width: clamp(120px, 13vw, 158px);
  aspect-ratio: 470.6 / 115.9;
  fill: currentColor; color: var(--ink);
  transition: width var(--dur) var(--ease);
}
.nav[data-stuck] .brand__marca { width: clamp(108px, 11vw, 132px); }
.brand__marca--pie { color: var(--c-cream); width: clamp(140px, 15vw, 176px); }

/* El lockup ya no es texto, así que las reglas tipográficas que lo pintaban
   sobran; se dejan solo para la cortina de intro, que sí lo escribe. */
.intro__marca {
  display: block; width: min(56vw, 320px); height: auto;
  aspect-ratio: 470.6 / 115.9; fill: currentColor; color: var(--c-cream);
}

/* La barra flota sobre la portada y sus enlaces de la derecha caen sobre el
   pelo, que es lo más oscuro de la foto. Una banda de papel, sólida durante
   toda la altura de la barra y fundida después, les devuelve el fondo sin
   tapar la fotografía. Con un degradado desde el píxel cero no bastaba. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 3;
  height: calc(var(--nav-h) + 4rem);
  background: linear-gradient(180deg,
    var(--paper-3) 0%,
    var(--paper-3) calc(var(--nav-h) - 4px),
    color-mix(in srgb, var(--paper-3) 70%, transparent) 70%,
    transparent 100%);
  pointer-events: none;
}

/* ==========================================================================
   42. Cabeceras a dos columnas
   .head estaba limitada a 34rem (544px) dentro de un contenedor de 1120.
   Eso dejaba 576px de papel vacío a la derecha de casi todos los títulos,
   nueve veces al bajar. No era falta de aire: era aire mal puesto, en
   horizontal donde tocaba vertical.

   A partir de 62em el titular manda a la izquierda y la bajada se alinea
   abajo a la derecha, como un cabecero de revista. Sin HTML nuevo.
   ========================================================================== */
@media (min-width: 62em) {
  .section > .wrap > .head:not(.head--center) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: end;
  }
  .section > .wrap > .head:not(.head--center) > h2 { grid-column: 1; max-width: 18ch; }
  /* El cintillo no se limita: con el filete delante, 18ch lo partía en dos
     renglones ("EMPIEZA / POR TI"). */
  .section > .wrap > .head:not(.head--center) > .eyebrow { grid-column: 1; max-width: none; }
  .section > .wrap > .head:not(.head--center) > .body,
  .section > .wrap > .head:not(.head--center) > .lede {
    grid-column: 2; grid-row: 1 / span 3;
    align-self: end; margin-top: 0; max-width: 38ch;
    padding-bottom: .35em;      /* la bajada se apoya en la última línea base del h2 */
  }
}

/* ==========================================================================
   43. Jerarquía y ritmo
   Los trece h2 de la página medían exactamente lo mismo, 53.6px, y el h1
   solo un 10% más. Una página sin escala de tamaños se lee como una lista,
   no como una composición: eso era lo de "no se ve correctamente diseñado".
   ========================================================================== */
h2 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); line-height: 1.12; letter-spacing: -.016em; }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; }

/* Tres secciones ancla, y solo tres, con titular de portada interior. */
.section--hito h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); max-width: 14ch; }

/* El cintillo iba a 10px y era ilegible; era además lo único que podía dar
   entrada a cada sección. */
.eyebrow { font-size: .75rem; letter-spacing: .16em; color: var(--ink-2); font-weight: 500; }

/* Ritmo vertical en tres pasos. Antes las dieciséis secciones respiraban
   72px idénticos, sin una sola excepción. */
:root {
  /* Medido: con 7vw las secciones dejaban huecos de 164 a 226px entre una
     y otra. Bajado a 4.6vw quedan en ~118, y las tres anclas en ~140. */
  --sp-sec:       clamp(1.75rem, 3vw, 2.75rem);
  --sp-sec-tight: clamp(1.25rem, 2vw, 1.75rem);
  --sp-sec-loose: clamp(2.5rem, 4.2vw, 3.5rem);
}
.section       { padding-block: var(--sp-sec); }
.section--hito { padding-block: var(--sp-sec-loose); }
/* Dos secciones del mismo tono seguidas se leen como una sola: no hace
   falta sumar el doble de aire entre ellas. */
.section--tint + .section--tint,
.section--clay + .section--clay { padding-top: var(--sp-sec-tight); }
.band + .section { padding-top: var(--sp-sec-tight); }

/* Medida de lectura: 65ch de Instrument Sans se iba a 740px de línea. */
.body { font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 46ch; }

/* ==========================================================================
   44. Las columnas muertas que quedaban
   ========================================================================== */

/* El cierre era el hueco más visible de la página, 544px, porque además es
   el único bloque oscuro: todo apilado a la izquierda y medio muro vino
   vacío a la derecha. Ahora el mensaje ocupa su columna y los accesos la
   suya. */
@media (min-width: 62em) {
  .close > .wrap {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    column-gap: clamp(3rem, 6vw, 5.5rem); align-items: center;
    max-width: var(--maxw);
  }
  .close__box { max-width: none; }
  .close__aside { display: grid; gap: 1.75rem; align-content: center; }
  .close__actions { margin-top: 0; display: grid; gap: .75rem; justify-items: stretch; }
  .close__actions .btn { width: 100%; justify-content: center; }
  .close__facts {
    margin-top: 0; padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--c-cream) 24%, transparent);
  }
}

/* La checklist de la valoración eran siete líneas de 15px flotando sin
   masa, y dejaban 190px de vacío bajo la última. Convertida en panel. */
@media (min-width: 48em) {
  .val { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .val > .checklist {
    align-self: center;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--surface); border: 1px solid var(--line);
  }
  .val .checklist li { padding-block: .6rem; border-bottom: 1px solid var(--line); }
  .val .checklist li:last-child { border-bottom: 0; }
}

/* Cuatro discos de 44px repartidos en 1120: un 15% de tinta. Con filete y
   texto a la izquierda la fila pasa a tener estructura. */
@media (min-width: 48em) {
  .exp--flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .exp__step { text-align: left; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); }
  .exp__step:last-child { border-right: 1px solid var(--line); }
  .exp__step::after { display: none; }        /* el hilo lo hacen los filetes */
  .exp__step::before { text-align: left; }
  .exp__step .disc { margin: 0 0 1.1rem; width: 54px; height: 54px; }
  .exp__step .disc svg { width: 22px; height: 22px; }
  .exp__step h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
}

/* Las preguntas: el título se queda pegado mientras el acordeón ocupa la
   columna ancha. */
@media (min-width: 62em) {
  #preguntas > .wrap {
    display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(3rem, 6vw, 6rem); align-items: start;
  }
  #preguntas .head { grid-column: 1; margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
  #preguntas .faq { grid-column: 2; max-width: none; }
  #preguntas .faq summary { font-size: 1.0625rem; padding-block: 1.15rem; }
}

/* ==========================================================================
   45. Acentos de vino
   El vino es la tinta de toda la página, pero como tinta no se "ve": se
   lee. Faltaban momentos donde el color aparezca como color. Estos son, y
   son pocos a propósito: el manual dice paleta neutra, así que el vino
   marca, no decora.
   ========================================================================== */

/* Aquí había un filete delante de cada cintillo y otro sobre el titular de
   las secciones ancla. Se leían como guiones sueltos, así que fuera: el
   vino se queda donde es forma (discos, pestaña activa, numerales) y no
   donde es solo una raya. */
.head--center .eyebrow { justify-content: center; }

/* Los discos pasan de contorno tenue a vino sólido con el icono en crema.
   Son los puntos de la ficha de ubicación, la agenda y la experiencia. */
.disc {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--c-cream);
}
.disc--sm { background: transparent; color: var(--ink); }
.exp__step:hover .disc { background: var(--c-wine-2); }

/* La pestaña activa de tratamientos se marca con una barra de vino. */
.tx__tab[aria-selected="true"] { position: relative; }
@media (min-width: 64em) {
  .tx__tab[aria-selected="true"]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--ink);
  }
}

/* Los números de los pilares, en vino en vez de arena: se ven. */

/* El rótulo de categoría de cada pregunta y el botón de cada tratamiento. */
.quiz__nota { color: var(--ink); }
.svc__cta { color: var(--ink); }

/* Los rombos de la marquesina. */
.marquee b { color: var(--ink); }



/* La cita del ritual, entre comillas de vino grandes. */
.ritual__line { position: relative; }
.ritual__promise { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding-top: 1.25rem; }


/* ==========================================================================
   46. Los iconos de la valoración
   Cada punto lleva su propio dibujo en vez de siete palomitas iguales: la
   lista se recorre mirando los iconos y el texto queda de apoyo.
   ========================================================================== */
.val .checklist li { gap: .9rem; align-items: center; }
.val .checklist .disc--sm {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--paper);
  color: var(--ink);
}
.val .checklist .disc--sm svg { width: 18px; height: 18px; }

/* El texto de la valoración era mucho más corto que el panel de la lista y
   dejaba una columna medio vacía: se centra contra él. */
@media (min-width: 48em) {
  .val__intro { align-self: center; }
}

/* En las tarjetas de preguntas el titular ocupa una o dos líneas según la
   pregunta, y el rótulo de categoría quedaba a alturas distintas. Se ancla
   abajo para que la fila lea en línea. */
.quiz__texto { display: flex; flex-direction: column; height: 100%; }
.quiz__nota { margin-top: auto; padding-top: .35rem; }
.quiz--fotos .quiz__item { grid-template-rows: auto 1fr; }

/* El pie es ahora el único bloque oscuro de la página (el cierre de vino se
   retiró), así que va en el vino de la marca y no en el negro, que sobre
   toda una franja se lee frío. */
.foot { background: var(--c-wine); }

/* El horario, día por día. Dos columnas estrechas para que no se estire. */
.horario { margin: 0; display: grid; gap: .45rem; font-size: .8125rem; }
.horario > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; }
.horario dt { color: var(--c-cream); font-weight: 500; }
.horario dd { margin: 0; color: color-mix(in srgb, var(--c-cream) 72%, transparent); }

/* ==========================================================================
   47. La galería del consultorio
   Siete fotografías reales del estudio, a 4000x6000 de origen. Son las
   primeras imágenes propias del sitio: todo lo anterior salía recortado de
   las láminas de marca a 432 px.

   Va en columnas y no en rejilla porque siete no reparte en filas limpias:
   con tres columnas quedaban dos huecos en la última. El flujo por columnas
   las acomoda solo y respeta la proporción de cada toma, que no es la misma
   en todas (cinco verticales, dos apaisadas).
   ========================================================================== */
/* Nueve fotos, todas del mismo tamaño. Nueve sí reparte: tres filas de
   tres, exactas y sin huecos. Por debajo de 62em pasa a una tira que se
   desliza con el dedo, que tampoco deja huecos. */
.galeria {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(.5rem, 1.2vw, .85rem);
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.galeria::-webkit-scrollbar { display: none; }

@media (min-width: 40em) { .galeria { grid-auto-columns: 42%; } }
@media (min-width: 62em) {
  .galeria {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto; overflow: visible; scroll-snap-type: none;
  }
}

.galeria__foto {
  position: relative; overflow: hidden;
  /* 2:3, la proporción nativa de las nueve: a 4:5 la recepción perdía la
     lámpara del techo y parte del mostrador. Así no se recorta ninguna. */
  aspect-ratio: 2 / 3;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.galeria__foto picture { display: block; width: 100%; height: 100%; }
.galeria__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.galeria__foto:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .galeria__foto:hover img { transform: none; }
}

/* ==========================================================================
   48. Ubicación y pie
   ========================================================================== */

/* El enlace a Google Maps pasa de píldora con texto a un disco con el pin.
   Sobre una fachada que ya se explica sola, "Cómo llegar" era ruido. */
.map { position: relative; }
.map__pin {
  position: absolute; right: clamp(.9rem, 2.5vw, 1.5rem); bottom: clamp(.9rem, 2.5vw, 1.5rem);
  width: 62px; height: 62px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 2px 6px rgba(47,17,22,.16), 0 14px 32px -14px rgba(47,17,22,.45);
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur) var(--ease);
}
.map__pin svg { width: 30px; height: 30px; }
.map__pin:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 4px 10px rgba(47,17,22,.2), 0 20px 42px -16px rgba(47,17,22,.5); }
.map__pin:active { transform: scale(.97); transition-duration: var(--press); }

/* styles.css fija .map a 4:3 y la foto nueva es 3:2: sobraba una banda al
   pie de la caja. La caja pasa a la proporción de la foto. */
.map { aspect-ratio: 3 / 2; }
.map picture { display: block; width: 100%; height: 100%; }
.map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Las tres redes del pie, en disco. */
.redes { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; gap: .6rem; }
.redes a {
  width: 44px; height: 44px; border-radius: 999px;   /* mínimo táctil */
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-cream) 30%, transparent);
  color: var(--c-cream);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.redes a:hover { background: color-mix(in srgb, var(--c-cream) 14%, transparent); border-color: var(--c-cream); }
.redes svg { width: 18px; height: 18px; }

/* ==========================================================================
   49. El pie y la ubicación, medidos
   ========================================================================== */

/* styles.css declara tres columnas en .foot__grid y el HTML tiene dos hijos:
   la tercera pista nunca se llena y deja 358 px muertos, el 32% del ancho
   del pie. Eso era lo de "distribuye la información correctamente". */
@media (min-width: 40em) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }
  /* El horario a dos columnas: siete filas seguidas median 189 px contra un
     logotipo de 104 y el pie quedaba descompensado. Con cuatro se empareja. */
  .horario { grid-template-columns: repeat(2, max-content); column-gap: 2.75rem; }
  .horario > div { grid-template-columns: 5.5rem max-content; }
}
@media (min-width: 64em) { .foot__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 4.5rem; } }
.horario { row-gap: .5rem; }

/* Las redes: lo que se veía grande no era el icono de 18 px, era el aro de
   44 que lo rodeaba. Fuera el aro; el dibujo baja a 16 y el área táctil se
   queda en 44x44, que es lo que hay que respetar. */
.redes {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  justify-content: center; gap: .25rem;
  padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 16%, transparent);
}
.redes a { border: 0; background: transparent; color: color-mix(in srgb, var(--c-cream) 72%, transparent); }
.redes a:hover { background: transparent; color: var(--c-cream); }
.redes svg { width: 16px; height: 16px; }
.foot__legal { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); }

/* Ubicación. La foto no estaba mal proporcionada: el archivo mide 1.5018 y
   la caja 1.5000, o sea un 0.12% de recorte. Lo que fallaba era la
   alineación: con align-items:center la foto sobresalía 11.6 px por arriba
   y por abajo del bloque de texto, así que nada compartía línea. Con start,
   el borde superior cae en la altura de mayúscula del titular. */
.place { align-items: start; }
@media (min-width: 48em) {
  /* Y la fachada sube de 532 a 585 px: es el motivo de la sección y recibía
     exactamente el mismo peso que tres párrafos. */
  .place { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; }
}

/* El disco del pin ocupaba el 17.7% del ancho de la fachada en teléfono. */
.map__pin { width: 52px; height: 52px; }
.map__pin svg { width: 26px; height: 26px; }
@media (max-width: 47.99em) {
  .map__pin { width: 44px; height: 44px; }   /* mínimo táctil exacto */
  .map__pin svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   50. Las preguntas vuelven a foto + texto vivo
   Las fotos nuevas ya no traen el rótulo dentro. Y aunque lo trajeran: el
   texto en HTML se selecciona, se traduce, responde a Ctrl+F, crece cuando
   el lector sube el tamaño de letra y lo rasteriza el navegador a la
   densidad de la pantalla. Con el rótulo incrustado, subir el tamaño de
   letra encogía la pregunta, porque la tarjeta se estrecha y la imagen con
   ella.
   ========================================================================== */
.quiz--fotos .quiz__item {
  /* minmax(0,1fr) en la columna es obligatorio: sin él la columna "auto" se
     dimensiona por la proporción de la foto y deja una astilla de fondo. */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  padding: 0; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface); text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quiz--fotos picture { display: block; }
.quiz--fotos img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .7s var(--ease);
}

.quiz__texto {
  display: flex; flex-direction: column; align-self: stretch;
  padding: .9rem 1rem 1.05rem;
}
.quiz__titulo {
  font-family: "CMU Serif", Georgia, serif;
  font-size: 1.125rem; line-height: 1.25; color: var(--ink);
}
.quiz__nota {
  margin-top: auto; padding-top: .45rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}

/* ==========================================================================
   51. "Una clínica. Un equipo. Un plan para ti."
   Las tres frases, línea por línea y escalonadas como el titular de la
   portada. Y el párrafo partido en tres ideas, que de corrido eran cinco
   líneas seguidas que nadie lee entera.
   ========================================================================== */
.trio { display: grid; gap: .04em; max-width: none; }
.trio > span {
  display: block;
  font-family: "CMU Serif", Georgia, serif; font-weight: 400;
  font-size: 1em; line-height: 1.04;
}
.trio > span:nth-child(2) { padding-left: .5em; }
.trio > span:nth-child(3) { padding-left: 1em; color: var(--ink-2); }

/* Las tres ideas. Mismo lenguaje que la ficha de #airflow: celda de rótulo
   + frase, filete de 1px de --line cerrando arriba y entre celdas.

   El filete corto que había delante de cada párrafo medía 7.19x1 px de
   tinta plena (10.38:1 sobre arena, contra el 1.28:1 del filete de la casa):
   demasiado oscuro para ser un filete y demasiado corto para agrupar nada,
   así que las tres se leían como viñetas de lista.

   Y por debajo de 62em .ideas no recibía ningún margen, ni el de .body ni
   el de .head p, porque era un div: "Un plan para ti." y la primera idea
   quedaban a 0.0 px una de otra. Medido. Ahora hay 28. */
.ideas {
  display: grid;
  margin: clamp(1.75rem, 3.5vw, 2.25rem) 0 0;
  max-width: none;
  border-top: 1px solid var(--line);
}
.idea { padding-block: .95rem; border-bottom: 1px solid var(--line); }

/* El rótulo va en --ink-2 y no en --ink-3 como .af__dato dt: sobre arena,
   --ink-3 se queda en 4.22:1 y no llega al AA a 11 px. Aquí da 6.09:1. */
.idea dt {
  font-size: .6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-2);
}
/* Con el rótulo cargando el peso, la frase puede ir a tinta plena.
   text-wrap: balance reparte las dos líneas del móvil: sin él la primera
   idea cerraba con un muñón de 99 px. */
.idea dd {
  margin: .5rem 0 0;
  font-size: 1rem; line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 62em) {
  .section > .wrap > .head:not(.head--center) > .ideas {
    grid-column: 2; grid-row: 1 / span 3;
    align-self: end; margin-top: 0;
    padding-bottom: 0;   /* el .35em del bloque 42 dejaba la última línea
                            base 14.9 px por debajo de la del titular */
  }
}

/* De 992 a 1139 la columna derecha no da para una línea por idea y salían
   celdas de 98.4 / 74.4 / 98.4. Se cierra la medida para que las tres rompan
   igual, en dos líneas. Se cambia la medida, no el cuerpo. */
@media (min-width: 62em) and (max-width: 71.24em) {
  .section > .wrap > .head:not(.head--center) > .ideas { max-width: 24rem; }
}


/* ==========================================================================
   52. EMS AIRFLOW GBT PLUS
   Sustituye a "¿Qué hace diferente a Dear Blanc?".

   Dos piezas y nada más: la fotografía del equipo a sangre, y debajo una
   ficha de una sola retícula —datos a la izquierda, beneficios a la
   derecha— cerrada por filetes de 1px, sin huecos entre celdas.

   La foto mide 1100x733 (3:2). El equipo ocupa del 30% al 70% en
   horizontal y del 12% al 88% en vertical, y el rótulo "GBT PLUS AIRFLOW"
   vive dentro de la propia imagen, entre el 78% y el 88% de la altura. Por
   eso el recorte nunca pasa del 7% por arriba o por abajo: todos los
   formatos de abajo están calculados para que el rótulo no se pierda.
   ========================================================================== */

/* --- 52.1 La portada del equipo -----------------------------------------
   Una pantalla entera en vino, como el lanzamiento de un producto: el
   equipo recortado (fondo quitado, PNG/WebP con alfa) bajo un foco de luz
   cálida, grande, y el titular en crema. El aparato es blanco; sobre vino
   es lo más claro de la página y el ojo va ahí primero.

   Contraste: --c-cream sobre --c-wine es 15.6:1; la bajada al 80% de
   crema queda por encima de 9:1. El botón se invierte (crema con texto
   vino) porque el primario de la casa es vino y se perdería en el fondo.

   El recorte corta las mangueras con el borde inferior del cuadro: la
   máscara funde el último 12% para que salgan de la luz y no de una
   línea recta.
   ------------------------------------------------------------------------ */
.af.section { padding-top: 0; }

.af__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;              /* la máquina flota y se desplaza: nada empuja el scroll lateral */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h, 4rem) + clamp(1.25rem, 4vw, 2.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  color: var(--c-cream);
  background:
    /* foco: luz cálida detrás del equipo, abajo a la derecha en escritorio */
    radial-gradient(var(--af-foco-w, 90%) 55% at var(--af-foco-x, 50%) var(--af-foco-y, 58%),
      rgba(232, 218, 212, .20) 0%, rgba(232, 218, 212, .07) 42%, rgba(232, 218, 212, 0) 72%),
    /* viñeta: los bordes caen a casi negro, como un estudio */
    radial-gradient(130% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(12, 3, 6, .55) 100%),
    var(--c-wine);
}

.af__grid {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-areas: "top" "maq" "copy";
  justify-items: center;
  text-align: center;
}

.af__top { grid-area: top; }
.af__top .eyebrow {
  margin: 0;
  justify-content: center;
  color: color-mix(in srgb, var(--c-cream) 80%, transparent);
}
.af__top h2 {
  margin: .9rem auto 0;
  color: var(--c-cream);
  /* El titular es la portada: más grande que el resto de h2 "hito".
     9vw en teléfono deja "limpiezas dentales" en una línea de 360 a 430
     y el balance reparte las otras dos sin palabras sueltas. */
  font-size: clamp(2.125rem, 9vw, 2.75rem);
  line-height: 1.06;
  max-width: 18ch;
  text-wrap: balance;
}

/* --- El equipo ---------------------------------------------------------- */
.af__maq {
  grid-area: maq;
  position: relative;
  margin: clamp(1.25rem, 4vw, 2rem) 0 0;
  /* 936/1029: la máquina es más alta que ancha. En teléfono se queda con
     el 76% del ancho (así el botón queda dentro de la primera pantalla); la altura de la pantalla manda en escritorio. */
  width: min(76vw, 26rem);
}
.af__maq picture { display: contents; }
.af__maq img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 82%, transparent 98%);
}

/* Sombra de contacto y reflejo: un óvalo de luz en el "piso" bajo la base
   con un núcleo oscuro encima. No flota con la máquina, se queda en el
   suelo; por eso vive en la figura y no en .af__flota. */
.af__maq::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%; right: 8%;
  bottom: 2%;
  height: 16%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(8, 2, 4, .55) 0%, rgba(8, 2, 4, 0) 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(253, 249, 244, .16) 0%, rgba(253, 249, 244, 0) 100%);
  transform: scaleX(1.25);
}
/* Halo detrás del aparato: late muy despacio (ver 52.1b). */
.af__maq::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 4% -18% 14%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(253, 249, 244, .14) 0%, rgba(253, 249, 244, 0) 70%);
  pointer-events: none;
}

.af__flota, .af__para { position: relative; }
.af__para { transform: translate3d(0, var(--af-y, 0px), 0); }

/* Destello: una franja de luz que cruza el equipo de izquierda a derecha.
   La máscara es el propio recorte, así que la luz solo toca la máquina,
   nunca el fondo. Se mueve el hijo (transform), la máscara se queda. */
.af__brillo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url("/assets/img/gbt-maquina.png?v=72decb71") center / 100% 100% no-repeat;
          mask: url("/assets/img/gbt-maquina.png?v=72decb71") center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
}
.af__brillo > span {
  position: absolute;
  inset: -10% auto -10% 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%);
}

/* --- Texto y botón ------------------------------------------------------ */
.af__copy {
  grid-area: copy;
  margin-top: clamp(1.25rem, 4vw, 2rem);
  max-width: 34rem;
}
.af__intro {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-cream) 82%, transparent);
  text-wrap: pretty;
}
.af__acciones { margin-top: 1.5rem; }
/* En teléfono el botón sube por encima de la bajada: con titular y
   máquina grandes, así cae dentro de la primera pantalla. */
@media (max-width: 61.99em) {
  .af__copy { display: flex; flex-direction: column; }
  .af__acciones { order: -1; margin: 0 0 1.25rem; }
}
.af__stage .btn--primary {
  background: var(--c-cream);
  color: var(--c-wine);
}
.af__stage .btn--primary:hover { background: #fff; color: var(--c-wine); }
.af__stage .btn--primary:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 3px; }
@media (max-width: 39.99em) {
  .af__acciones .btn { width: 100%; }
}

/* Tableta: algo más de máquina y titular. */
@media (min-width: 40em) {
  .af__top h2 { font-size: clamp(2.75rem, 6.4vw, 3.5rem); }
  .af__maq { width: min(62vw, 28rem); }
}

/* Escritorio: portada a dos columnas. Titular, bajada y botón a la
   izquierda; la máquina a la derecha, tan alta como deje la pantalla
   (1029/936 = 1.1; 11rem es lo que ocupan barra y márgenes). */
@media (min-width: 62em) {
  .af__stage { --af-foco-w: 60%; --af-foco-x: 70%; --af-foco-y: 52%; }
  .af__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-rows: auto auto;
    grid-template-areas: "top maq" "copy maq";
    column-gap: clamp(2rem, 5vw, 5rem);
    justify-items: start;
    align-items: end;
    text-align: left;
  }
  .af__top { align-self: end; }
  .af__top .eyebrow { justify-content: flex-start; }
  .af__top h2 {
    margin-left: 0;
    /* "limpiezas dentales" tiene que caber en una línea de la columna:
       así quedan tres renglones parejos y ninguna palabra sola. */
    font-size: clamp(3rem, 4.2vw, 4.25rem);
    max-width: none;
  }
  .af__copy { align-self: start; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); max-width: 30rem; }
  .af__intro { font-size: 1.125rem; }
  .af__maq {
    justify-self: center;
    align-self: center;
    margin: 0;
    width: min(100%, 40rem, calc((100vh - 11rem) / 1.1));
    width: min(100%, 40rem, calc((100svh - 11rem) / 1.1));
  }
}

/* --- 52.1b Movimiento ----------------------------------------------------
   1. Entrada: la máquina sube 56 px desde el 92% de tamaño mientras
      aparece; más lenta que el texto (1.4 s) para que sea el momento de
      la sección. Curva --ease de la casa, sin rebote.
   2. Reposo: flota 6 px arriba y abajo en un ciclo de 6.5 s, y el halo
      respira a la par. Empieza cuando ya terminó la entrada.
   3. Destello: una pasada de luz a los 2.4 s de entrar (con la máquina ya
      posada) y luego cada 9 s.
   Solo transform y opacity. Con movimiento reducido nada de esto corre. */
.af__maq.rv {
  transform: translateY(56px) scale(.92);
  transform-origin: 50% 85%;
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
}
.af__maq.rv.is-in { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .af__maq.is-in .af__flota { animation: af-flota 6.5s ease-in-out 1.4s infinite alternate; }
  .af__maq.is-in::after     { animation: af-halo 6.5s ease-in-out 1.4s infinite alternate; }
  .af__maq.is-in .af__brillo { animation: af-brillo-capa 9s linear 2.4s infinite; }
  .af__maq.is-in .af__brillo > span { animation: af-brillo 9s cubic-bezier(.45, 0, .25, 1) 2.4s infinite; }
}
@keyframes af-flota { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes af-halo  { from { opacity: .75; } to { opacity: 1; } }
/* La franja cruza en el primer 18% del ciclo (1.6 s) y descansa el resto. */
@keyframes af-brillo {
  0%        { transform: translateX(-120%); }
  18%, 100% { transform: translateX(260%); }
}
@keyframes af-brillo-capa {
  0%        { opacity: 0; }
  3%, 15%   { opacity: .7; }
  18%, 100% { opacity: 0; }
}

/* Sin JS nadie añade .is-in: aquí el contenido no se esconde. */
@media (scripting: none) {
  #airflow .rv { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .af__maq.rv { transform: none; }
  .af__para { transform: none; }
  .af__flota, .af__maq::after, .af__brillo, .af__brillo > span { animation: none; }
  .af__brillo { display: none; }
}

/* --- 52.1c Bajada larga, debajo de la portada -------------------------- */
.af__bajada {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.af__bajada .body { margin: 0; color: var(--ink-2); }
.af__lead {
  margin: 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
}
@media (min-width: 62em) {
  .af__bajada {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}
.af__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (max-width: 39.99em) {
  .af__cta .btn { width: 100%; }
}

.af__ficha {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Datos. Cada fila es etiqueta + valor; el filete los separa. */
.af__datos { margin: 0; display: grid; }
.af__dato {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}
.af__dato:last-child { border-bottom: 0; }
.af__dato dt {
  font-size: .6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.af__dato dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink);
}

/* Beneficios. Lista sin viñetas, celdas pegadas, filete entre ellas. */
.af__benes { list-style: none; margin: 0; padding: 0; display: grid; }
.af__bene {
  padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.af__bene .disc { margin-bottom: .9rem; }
.af__bene h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.af__bene p {
  margin: .4rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}

/* Dos beneficios por fila en cuanto hay ancho, ya sin hueco entre celdas. */
@media (min-width: 40em) {
  .af__benes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af__bene:nth-child(even) { border-left: 1px solid var(--line); }
}

/* Escritorio: datos y beneficios comparten una sola retícula. El filete
   vertical central es el único separador; las cuatro filas de datos se
   reparten la altura de la columna para que no quede un filete flotando. */
@media (min-width: 62em) {
  .af__ficha {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 0;
  }
  .af__datos {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    border-right: 1px solid var(--line);
  }
  .af__dato { align-content: center; }
  .af__bene:nth-child(-n+2) { border-top: 0; }
  .af__bene .disc { width: 46px; height: 46px; }
  .af__bene .disc svg { width: 17px; height: 17px; }
}


/* ==========================================================================
   Calificación de Google en la portada
   Una línea discreta bajo la frase: la G de colores es lo único que no va
   en la paleta, porque sin ella no se reconoce como Google.
   ========================================================================== */
.g-rating {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  min-height: 44px;
  font-size: .8125rem;
  color: var(--ink-2);
  text-decoration: none;
}
.g-rating__g { width: 18px; height: 18px; flex: none; }
.g-rating__stars { color: #E8A93B; letter-spacing: .08em; font-size: .9375rem; line-height: 1; }
.g-rating__txt { white-space: nowrap; }
.g-rating:hover .g-rating__txt { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .g-rating { margin-top: .9rem; }
}