/* Landing de Wayka.
 *
 * El color, el espaciado y la tipografía salen de los tokens del design system
 * (css/*.css, copiados de frontend/design-system/tokens). Acá no se escribe
 * ningún hex, ni se redefine ningún token: si un color no está en el sistema,
 * no se usa.
 *
 * Cinco decisiones que ordenan el archivo:
 *
 * 1. El primario es el violeta del sistema y el naranja es acento, como en el
 *    producto. El naranja de marca no llega a AA sobre blanco (2.0:1, anotado
 *    en el propio design system), así que aparece donde el sistema lo permite:
 *    como texto sobre claro con --color-accent-strong, y como fondo lavado.
 *    Nunca como relleno de un botón ni de una franja entera.
 * 2. Un solo color de acción en toda la página: el relleno violeta. La acción
 *    secundaria es un enlace subrayado, no un segundo botón.
 * 3. Las secciones se cortan con curvas, no con líneas. Es lo que hace que la
 *    página se lea como la marca y no como un panel de administración.
 * 4. Ninguna captura flota como un rectángulo blanco sobre blanco: se apoya en
 *    una superficie de marca y se desvanece contra el borde.
 * 5. El movimiento es el del design system: 140/220/340 ms, un solo easing y un
 *    único desplazamiento de entrada de 6px (--motion-offset).
 */

/* --------------------------------------------------------------- estructura */

/* Todo lo que la página enlaza está en la propia página: el menú, los dos CTA de
   arriba y el del banner del tutor son anclas. Sin esto el salto es instantáneo y
   quien lo toca pierde el hilo de dónde venía; con esto, el recorrido se ve.
   `scroll-behavior` no lo apaga la regla de `prefers-reduced-motion` que hay más
   abajo —esa alcanza a transiciones y animaciones, no al scroll—, así que se
   apaga a mano en esa misma media query. */
html {
  scroll-behavior: smooth;
  /* La barra es sticky: sin este colchón, la sección aterriza debajo de ella. */
  scroll-padding-top: var(--space-12);
}

/* La barra de scroll también es de la página: el pulgar en el lila de marca
   sobre el fondo hundido, que son los mismos dos colores con los que se cortan
   las secciones. Va `thin` y no `auto` porque acá no es un control que alguien
   vaya a arrastrar: es una referencia de dónde está parado. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--surface-sunken);
}

/* Safari no implementa ninguna de las dos propiedades de arriba, y Chrome las
   prefiere sobre estos pseudo-elementos cuando están presentes: los dos motores
   toman uno de los dos bloques y ninguno los mezcla. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--surface-sunken);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border: 2px solid var(--surface-sunken);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-strong);
}

body {
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* El ancho de la página es más grande que el del producto y no hereda
   `--content-max`. Ese token vale 1160 y está pensado para pantallas de trabajo,
   donde lo que se lee son formularios y listas; acá el contenido es de dos
   columnas con un aparato al costado, y a 1160 la agenda quedaba apretada contra
   el texto. El token no se toca —es del design system— y se define uno propio.
   El de la lectura sigue siendo el de siempre: los párrafos tienen su `max-width`
   en `ch`, y estirar el marco no los estira a ellos. */
:root {
  --ancho-de-la-landing: 1280px;
  /* Duración del cambio de captura de la puesta en marcha. Está acá y no suelta
     en la regla para que se vea que es un valor propio de la landing y no del
     design system; el porqué está donde se usa. La curva sí es la del sistema. */
  --dur-escena: 520ms;
}

.env {
  width: 100%;
  max-width: var(--ancho-de-la-landing);
  margin-inline: auto;
  padding-inline: var(--gutter-page);
}

section {
  padding-block: var(--space-13);
}

.seccion-cabecera {
  max-width: 640px;
  margin-bottom: var(--space-10);
}

/* ---------------------------------------------------------- tipografía */

/* Parkinsans solo en titulares y en el CTA. Es una fuente de personalidad: en
   cuerpo largo cansa, y el cuerpo es de Satoshi como en el producto. */
h1,
h2,
h3,
.boton {
  font-family: var(--font-display);
  letter-spacing: var(--ls-heading);
}

h1 {
  font-weight: var(--fw-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  max-width: 14ch;
}

h2 {
  font-weight: var(--fw-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}

.overline {
  font: var(--fw-bold) var(--fs-overline) / var(--lh-normal) var(--font-display);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  /* El acento fuerte sobre blanco da 4.45:1, que es el valor que el propio
     design system acepta para este naranja como texto. */
  color: var(--color-accent-strong);
  display: block;
  margin-bottom: var(--space-4);
}

/* Sobre el lila de la franja el mismo naranja cae a 3.64:1, y esto es un texto
   de 11px: ahí vuelve al primario fuerte. La regla es el contraste, no el
   capricho de mantener un color a toda costa. */
.franja-lila .overline {
  color: var(--color-primary-strong);
}

.bajada {
  font: var(--fw-regular) var(--fs-body-lg) / var(--lh-relaxed) var(--font-sans);
  color: var(--text-muted);
  margin-top: var(--space-5);
  max-width: 52ch;
}

/* -------------------------------------------------------------- la barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-nav);
  padding-block: var(--space-4);
}

.barra > .env {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.barra img {
  height: var(--space-7);
  width: auto;
  display: block;
  /* El logo es monocromo y va blanco sobre el naranja de marca. */
  filter: var(--logo-on-nav-filter);
}

.barra nav {
  display: flex;
  gap: var(--space-7);
  margin-left: auto;
}

.barra nav a {
  font: var(--text-body-strong);
  color: var(--text-on-nav);
  opacity: 0.88;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.barra nav a:hover {
  opacity: 1;
  color: var(--text-on-nav);
  text-decoration: none;
}

/* ---------------------------------------------------------- las curvas */

/* El corte entre secciones. La pieza de marca no separa con líneas: un bloque
   de color cae sobre el siguiente con una curva ancha y baja. */
.curva {
  height: var(--space-10);
  margin-bottom: calc(var(--space-10) * -1);
  position: relative;
  z-index: 1;
}

.curva--nav {
  background: var(--surface-nav);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-bottom: 0;
}

.curva--lila {
  background: var(--color-primary-soft);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  margin-bottom: 0;
}

/* El lila ya no cae sobre el violeta de la sección de tutores: se cierra contra
   el fondo de la página. */
.curva--lila-cierre {
  background: var(--color-primary-soft);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-h-md);
  padding-inline: var(--space-7);
  border-radius: var(--radius-pill);
  border: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: var(--transition-control);
}

.boton--lg {
  height: var(--control-h-touch);
  padding-inline: var(--space-9);
  font-size: var(--fs-body-lg);
}

.boton--sm {
  height: var(--control-h-sm);
  padding-inline: var(--space-6);
}

.boton--primario {
  background: var(--color-primary-fill);
  color: var(--color-primary-fill-fg);
  box-shadow: var(--shadow-sm);
}

.boton--primario:hover {
  background: var(--color-primary-fill-hover);
  color: var(--color-primary-fill-fg);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

/* El CTA de la barra va invertido: sobre el naranja, el relleno naranja
   desaparece. */
.boton--claro {
  background: var(--surface-card);
  color: var(--color-primary-strong);
}

.boton--claro:hover {
  background: var(--surface-nav-deep);
  color: var(--text-on-nav);
  text-decoration: none;
}

/* La única acción secundaria del sitio. Es un enlace y no un segundo botón: dos
   rellenos compitiendo es exactamente lo que hace que no se lea ninguno. */
/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--space-12) var(--space-11);
  overflow: hidden;
}

.hero .env {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-10);
  align-items: center;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  margin-top: var(--space-9);
}

.hero-nota {
  font: var(--text-body-sm);
  color: var(--text-subtle);
  margin-top: var(--space-6);
}

/* La escena del hero: un collage de piezas reales de la aplicación, no una
   ventana entera. Una captura completa obliga a buscar dónde mirar; tres
   fragmentos a distinta altura se leen de un vistazo. Las medidas van en
   porcentaje sobre el contenedor para que la composición no se desarme al
   cambiar el ancho. */
.hero-escena {
  position: relative;
  aspect-ratio: 1 / 1;
}

.mancha {
  position: absolute;
  z-index: 0;
  top: 2%;
  right: 4%;
  width: 68%;
  aspect-ratio: 1;
  /* El primario pleno y no el suave: en la pieza de identidad la foto se apoya
     sobre un lila con presencia, no sobre un lavado. */
  background: var(--color-primary);
  /* La forma orgánica del one-pager: un círculo deformado, no un óvalo. */
  border-radius: 62% 38% 46% 54% / 48% 44% 56% 52%;
}

.hero-foto {
  position: absolute;
  z-index: 1;
  top: -4%;
  /* Sobresale del contenedor a propósito: el recorte de la foto termina en un
     canto recto, y ahí lo tapa el overflow del hero. */
  right: -14%;
  width: 62%;
  height: auto;
}

.pieza {
  position: absolute;
  z-index: 2;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-overlay);
}

.pieza img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.pieza--paciente {
  left: 0;
  top: 26%;
  width: 96%;
}

.pieza--criticos {
  left: 0;
  top: 65%;
  width: 74%;
  z-index: 3;
}

.pieza--medicacion {
  right: 0;
  bottom: 0;
  width: 44%;
  z-index: 4;
  overflow: visible;
}

/* La firma de quién registró cada cosa. Es la traducción del historial
   colaborativo a algo que se ve sin leer el texto de al lado. */
.firma {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font: var(--fw-semibold) var(--fs-caption) / 1 var(--font-sans);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.firma-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--wayka-oscuro);
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
}

.pieza--paciente .firma {
  bottom: calc(100% + var(--space-2));
  left: var(--space-6);
}

.pieza--medicacion .firma {
  top: calc(100% + var(--space-2));
  right: 0;
  background: var(--color-accent-strong);
}

.pieza--medicacion .firma .firma-inicial {
  background: var(--surface-card);
  color: var(--color-accent-strong);
}

/* ------------------------------------------------------------------ franjas */

.franja-lila {
  background: var(--color-primary-soft);
  padding-top: var(--space-10);
  padding-bottom: var(--space-11);
}

/* ------------------------------------------------------- accesibilidad */

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------- cierre */

/* La franja de color con la tarjeta blanca encima es el remate del one-pager.
   Va el naranja de marca, que es el color con el que la pieza impresa cierra.
   Se puede justamente porque acá no hay texto sobre el naranja: todo lo que se
   lee vive adentro de la tarjeta blanca. */
/* El mismo lila que el banner de arriba: el cierre es la segunda mitad de un
   solo bloque, no otra franja. El naranja pleno que había acá era el único
   lugar de la página donde el acento ocupaba una pantalla entera, y competía
   con la tarjeta blanca que es lo que hay que leer. */
.cierre {
  background: var(--color-primary-soft);
  padding-top: var(--space-9);
}

/* La tarjeta deja de estar centrada y pasa a dos columnas: a la izquierda qué se
   llevan de la llamada —la pregunta que frena el clic es "¿qué me van a
   vender?"—, a la derecha el formulario. */
.tarjeta-de-cierre {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-9);
  box-shadow: var(--shadow-overlay);
}

.cierre-recap h2 {
  font-size: var(--fs-display-md);
  margin: 0;
}

.recap-lista {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font: var(--text-body-lg);
  color: var(--text-body);
}

/* Punto y tipografía, como manda el sistema: nada de glifos de tilde ni de
   franjas de color al costado. */
.recap-lista li {
  display: flex;
  gap: var(--space-4);
}

.recap-lista li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-strong);
}

.cierre-form {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-9);
}

.cierre-form h3 {
  font-size: var(--fs-h2);
  margin: 0;
}

.cierre-nota {
  font: var(--text-body);
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

#formulario-de-contacto {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

#correo {
  height: var(--control-h-lg);
  padding-inline: var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font: var(--text-body);
  color: var(--text-body);
  transition: var(--transition-control);
}

#correo::placeholder {
  color: var(--text-subtle);
}

#correo:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}

/* El campo se marca en rojo solo cuando el envío ya falló, no mientras la
   persona escribe: `novalidate` en el form y este atributo lo pone el JS. */
#correo[data-invalido] {
  border-color: var(--border-danger);
}

#formulario-de-contacto .boton {
  width: 100%;
}

/* Enviando: la receta de deshabilitado del sistema —superficie deshabilitada y
   texto apagado—, no el violeta de hover. El spinner es un borde girando. */
.boton[data-cargando] {
  background: var(--surface-disabled);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.boton[data-cargando] .boton-etiqueta::before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 14px;
  height: 14px;
  margin-right: var(--space-3);
  border: 2px solid var(--border-strong);
  border-top-color: var(--text-muted);
  border-radius: var(--radius-pill);
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* La finalidad, abajo del botón. Es lo más chico de la tarjeta y tiene que
   serlo: se lee antes de apretar, no compite con el botón, y el enlace es lo
   único que se destaca. */
.cierre-legal {
  font: var(--text-body-sm);
  color: var(--text-subtle);
  margin: 0;
}

.cierre-legal a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cierre-legal a:hover {
  /* `--text-link` sale de `--color-primary-strong`, que el tema del tutor
     reescribe al naranja oscuro: el renglón se pinta solo cuando la tarjeta
     cambia de audiencia. */
  color: var(--text-link);
}

.cierre-tutor {
  font: var(--text-body);
  color: var(--text-muted);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* Listo: la confirmación reemplaza al formulario. No queda un campo vacío al
   lado de un cartel de éxito. */
.confirmacion {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-7);
  margin-top: var(--space-7);
}

.confirmacion-titulo {
  font: var(--fw-bold) var(--fs-h3) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0;
}

.confirmacion p {
  font: var(--text-body);
  color: var(--neutral-700);
  margin: var(--space-3) 0 0;
}

.aviso-de-formulario {
  font: var(--text-body-sm);
  margin-top: var(--space-5);
  min-height: var(--space-6);
}

.aviso-de-formulario[data-estado='ok'] {
  color: var(--text-success);
}

.aviso-de-formulario[data-estado='error'] {
  color: var(--text-danger);
}

@media (max-width: 860px) {
  .tarjeta-de-cierre {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-8) var(--space-7);
  }

  .cierre-form {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding-left: 0;
    padding-top: var(--space-8);
  }
}

/* --------------------------------------------------------------------- pie */

footer {
  background: var(--surface-inverse);
  padding-block: var(--space-9);
}

footer .env {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  align-items: center;
}

footer img {
  height: var(--space-6);
  width: auto;
  filter: var(--logo-on-nav-filter);
}

footer p,
footer a {
  font: var(--text-body-sm);
  color: var(--text-on-immersive-muted);
}

footer a:hover {
  color: var(--text-inverse);
}

footer nav {
  display: flex;
  gap: var(--space-7);
  margin-left: auto;
}

/* ------------------------------------------------------ salto al contenido */

/* Primer elemento enfocable de la página. No se ve hasta que se lo enfoca con
   el teclado, y ahí aparece sobre la barra. */
.salto-al-contenido {
  position: absolute;
  z-index: 20;
  left: var(--space-5);
  top: calc(var(--space-11) * -1);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-strong);
  font: var(--text-body-strong);
  transition: top var(--dur-fast) var(--ease-standard);
}

.salto-al-contenido:focus-visible {
  top: var(--space-4);
  text-decoration: none;
}

/* --------------------------------------------------------- las preguntas */

.preguntas {
  background: var(--surface-page);
}

/* La sección no tiene nada al costado, así que va centrada: una columna de 760
   pegada a la izquierda del ancho de la página deja un vacío que se lee como si
   faltara algo. Lo que no se centra es el texto de cada renglón —la pregunta y
   su respuesta siguen alineadas a la izquierda—, que es como se lee una lista. */
.preguntas .seccion-cabecera {
  margin-inline: auto;
  text-align: center;
}

.acordeon {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--border-subtle);
}

/* La respuesta vive en su propia caja para poder animarle el alto: el de un
   `<details>` no se puede transicionar, y el navegador esconde el contenido en el
   mismo cuadro en que se le saca `open`. La anima `js/acordeon.js`; sin JS, el
   `<details>` abre y cierra como siempre. */
.acordeon .respuesta {
  overflow: hidden;
}

.acordeon details {
  border-bottom: 1px solid var(--border-subtle);
}

.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) 0;
  cursor: pointer;
  font: var(--fw-semibold) var(--fs-h4) / var(--lh-normal) var(--font-sans);
  color: var(--text-strong);
  list-style: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.acordeon summary::-webkit-details-marker {
  display: none;
}

/* El signo lo dibuja el CSS y no un icono: es un carácter, gira, y no suma una
   dependencia por una cruz. */
.acordeon summary::after {
  content: '+';
  font: var(--fw-bold) var(--fs-h2) / 1 var(--font-sans);
  color: var(--color-accent-strong);
  transition: transform var(--dur-normal) var(--ease-standard);
}

.acordeon details[open] summary::after {
  transform: rotate(45deg);
}

.acordeon summary:hover {
  color: var(--color-accent-strong);
}

.acordeon details p {
  font: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding-bottom: var(--space-7);
  max-width: 68ch;
}

/* -------------------------------------------------------------- movimiento */

/* Entrada al entrar en pantalla. El estado inicial lo pone el JS (data-oculto)
   y no el CSS: si el script no corre, el contenido queda visible en vez de
   invisible para siempre. */
[data-oculto] {
  opacity: 0;
  transform: translateY(var(--motion-offset));
}

[data-revelar] {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* ----------------------------------------------------------------- angosto */

@media (max-width: 900px) {
  section {
    padding-block: var(--space-11);
  }

  .env {
    padding-inline: var(--gutter-mobile);
  }

  h1 {
    font-size: var(--fs-display-md);
    max-width: none;
  }

  h2 {
    font-size: var(--fs-h1);
  }

  .barra nav {
    display: none;
  }

  .barra .boton {
    margin-left: auto;
  }

  .curva {
    height: var(--space-8);
  }

  .hero .env {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-9);
  }

  /* --- hero: el absoluto se apaga --- */
  /* A 375px las tres piezas se pisan y la foto empuja el CTA fuera de la primera
     pantalla. En angosto el collage pasa a flujo vertical. */
  .hero-escena {
    aspect-ratio: auto;
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  .hero-escena .pieza,
  .pieza--medicacion {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
  }

  /* Reducidas a este ancho no se leen: la cabecera queda al 37% y la franja de
     críticos corta a mitad de palabra. Queda la medicación, que es lo que el
     titular promete, a escala real. */
  .pieza--paciente,
  .pieza--criticos {
    display: none;
  }

  .pieza--medicacion {
    overflow: hidden;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
  }

  .pieza--medicacion img {
    width: 560px;
    max-width: none;
  }

  /* A este ancho la foto es decoración que empuja el CTA fuera de pantalla. */
  .hero-foto {
    display: none;
  }

  .mancha {
    inset: 0 auto auto 40%;
    width: 120px;
    aspect-ratio: 1;
  }

  /* --- lo que cambia: dos turnos en vez de la grilla --- */
  /* La ventana de 620px no entra. A este ancho, un recorte a escala real muestra
     dos turnos completos —horario, paciente, tipo y profesional—, que es
     exactamente el argumento. Nada de scroll horizontal ni de achicar la
     captura. El alto y el encuadre están con el resto de las reglas de los
     aparatos, al final del archivo. */

  /* A 150px de ancho el recorte cortaba el valor de la alergia justo en
     "Pollo • mode". Pasa a ancho completo y arriba de la frase. */
  .nota-tutor {
    flex-direction: column;
    align-items: stretch;
  }

  .recorte-tutor {
    width: 100%;
    height: 112px;
  }

  .recorte-tutor img {
    margin: -580px 0 0 -25px;
  }

  /* --- las secciones nuevas --- */
  .nosotros h2,
  .cierre-recap h2 {
    font-size: var(--fs-h1);
  }

  /* Mínimo táctil: el campo y el botón del formulario. */
  #correo,
  #formulario-de-contacto .boton {
    height: var(--control-h-touch);
  }

  .banner-tutores .boton,
  .hero-acciones .boton {
    width: 100%;
  }

  .hero-acciones--apiladas {
    align-items: stretch;
  }

  .enlace-sutil {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  /* El scroll suave es movimiento y ahí molesta más que en ningún lado: la
     regla de arriba no lo alcanza, porque no es una transición. */
  html {
    scroll-behavior: auto;
  }

  [data-oculto] {
    opacity: 1;
    transform: none;
  }

  /* La línea del paso activo se dibuja llena y no se anima: la regla de arriba
     la dejaría en 1ms, que es un parpadeo. Sin animación tampoco hay avance
     automático —lo corta el JS—, así que el recorrido se hace tocando. */
  .paso[data-activo] .paso-boton::after {
    animation: none;
    transform: scaleX(1);
  }
}

/*
  El campo trampa se saca del layout y del foco, pero **no con `display: none`**:
  hay robots que descartan lo que esta oculto asi, y el campo dejaria de servir.
  Queda fuera de la pantalla y fuera del orden de tabulacion.
*/
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------- hero 3a (paso 1) */

/* Dice qué es Wayka antes del gancho. Va en el primario fuerte y no en el
   acento: es una línea de 15px y tiene que leerse como dato, no como etiqueta. */
.hero-categoria {
  font: var(--fw-bold) var(--fs-body) / var(--lh-normal) var(--font-sans);
  color: var(--color-primary-strong);
  margin: 0 0 var(--space-4);
}

/* Un solo botón gana el primer clic: el secundario baja a texto y cae debajo,
   no al lado. Dos acciones en la misma línea se leen como dos botones. */
.hero-acciones--apiladas {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.boton--xl {
  height: 54px;
  padding-inline: var(--space-9);
  font-size: 18px;
}

.enlace-sutil {
  font: var(--fw-medium) var(--fs-body) / var(--lh-normal) var(--font-sans);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

.enlace-sutil:hover {
  color: var(--text-strong);
  text-decoration-color: var(--text-strong);
}

/* El piloto deja de ser letra chica gris: es la razón para escribir hoy, así que
   tiene titular propio. Fondo del acento suave con texto violeta —el naranja
   pleno con texto encima da 2.0:1 y el design system no lo permite en cuerpo. */
.piloto {
  margin-top: var(--space-8);
  max-width: 44ch;
  padding: var(--space-6) var(--space-7);
  background: var(--color-accent-soft);
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-md);
}

.piloto-titulo {
  font: var(--fw-bold) var(--fs-h3) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0;
}

.piloto p {
  font: var(--text-body);
  color: var(--neutral-700);
  margin: var(--space-3) 0 0;
}

/* ------------------------------------------- lo que cambia (paso 2) */

.motivos {
  display: grid;
  /* La captura tiene un techo, no un ancho fijo: con 620px clavados, entre 980 y
     1200 la columna de texto quedaba tan angosta que la nota del tutor caía a una
     palabra por renglón. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
  grid-template-areas:
    'lista captura'
    'nota  captura';
  gap: var(--space-7) var(--space-10);
  align-items: start;
}

.motivo-lista {
  grid-area: lista;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.motivo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* El número es el orden de lectura, no una decoración: relleno sólido con el
   token de contenido encima, como cualquier superficie llena del sistema. */
.motivo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-fill);
  color: var(--color-primary-fill-fg);
  font: var(--fw-bold) var(--fs-body) / 1 var(--font-display);
}

.motivo h3 {
  font-size: var(--fs-h2);
  margin: 0;
}

.motivo p {
  font: var(--text-body-lg);
  color: var(--neutral-700);
  margin: var(--space-3) 0 0;
}

.nota-tutor {
  grid-area: nota;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-strong);
  font: var(--text-body);
  color: var(--neutral-700);
}

/* Los dos recortes. La captura va a su tamaño real y la ventana muestra el
   pedazo que importa: una captura entera reducida al 20% no comunica nada, que
   es justo lo que esta sección tenía antes. */
.recorte,
.recorte-tutor {
  display: block;
  overflow: hidden;
  background: var(--surface-card);
}

/* En escritorio la ficha del tutor la muestra el teléfono de al lado, y este
   recorte diría dos veces lo mismo con la misma captura. Vuelve en angosto,
   donde los aparatos no entran. */
.recorte-tutor {
  display: none;
  flex: none;
  width: 260px;
  height: 130px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.recorte-tutor img {
  width: 540px;
  max-width: none;
  height: auto;
  display: block;
  margin: -570px 0 0 -25px;
}

.captura-agenda {
  grid-area: captura;
  margin: 0;
}

/* Centrado bajo los aparatos: es el pie de una imagen, no un párrafo de la
   columna de al lado, y alineado a la izquierda se leía como si arrancara otro
   bloque de texto. El ancho se acota para que no se estire de punta a punta —una
   línea centrada muy larga obliga a buscar dónde empieza la siguiente. */
.captura-agenda figcaption {
  font: var(--text-body-sm);
  color: var(--text-subtle);
  margin-top: var(--space-4);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* ------------------------------------------------- los dos aparatos */

/* La captura de la agenda es lo único de la página que se ve entero en una
   computadora, y sin el aparato alrededor se lee como un recuadro mal medido.
   Al lado, el teléfono con la ficha: el mismo dato en los dos lados, que es el
   argumento de la sección puesto en una imagen.

   Los marcos son PNG recortados del mockup original —el fondo a cuadros pasó a
   transparencia y la pantalla quedó hueca—, y no una figura dibujada con CSS: un
   aparato de verdad tiene reflejos, biselado y espesor, que son justo lo que un
   `border-radius` no da. */
.dispositivos {
  position: relative;
  /* Sitio para el teléfono, que sobresale por abajo y por la derecha. */
  padding: 0 var(--space-8) var(--space-7) 0;
}

.laptop {
  position: relative;
}

.laptop-marco {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  /* La sombra del mockup no se conservó al recortarlo —reconstruirla desde una
     imagen aplanada deja un damero fantasma—, así que la pone el CSS. */
  filter: drop-shadow(0 18px 28px rgb(30 20 40 / 18%));
}

/* El hueco de la pantalla, medido sobre el propio PNG. La captura va detrás del
   marco, así que se cambia sin tocar la imagen del aparato. */
.laptop .recorte {
  position: absolute;
  left: 13.36%;
  top: 4.59%;
  width: 72.85%;
  height: 70.33%;
  z-index: 1;
}

/* El recorte arranca pegado al borde izquierdo de la pantalla, como una ventana
   de verdad: con margen negativo, el primer renglón queda cortado por el bisel y
   se lee como una captura mal pegada. */
/* El ancho va en porcentaje de la pantalla y no a escala real: a 1:1 la agenda
   se veía como si estuviera con la lupa puesta —dos renglones enormes y el resto
   afuera—. Al 150% entran cuatro citas con sus dos días, que es lo que la sección
   promete, y el texto sigue siendo legible. */
.laptop .recorte img {
  width: 150%;
  max-width: none;
  height: auto;
  display: block;
  margin: 0;
}

/* Encimado sobre la esquina de la laptop, no al lado: separados se leen como dos
   capturas sueltas; encimados, como el mismo producto en dos aparatos. */
.telefono {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 27%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgb(30 20 40 / 22%));
}

@media (max-width: 1080px) {
  .motivos {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'lista'
      'nota'
      'captura';
  }

  .captura-agenda,
  .laptop {
    width: 100%;
  }

  .laptop .recorte {
    height: 340px;
  }
}

/* ------------------------------------------- puesta en marcha (paso 3) */

/* El proceso se muestra con las capturas de la propia puesta en marcha: arriba
   la pantalla del paso activo, abajo los tres pasos. Cada uno lleva una línea
   que se llena mientras se muestra y, al llenarse, pasa al siguiente — la línea
   es el reloj y la navegación al mismo tiempo, así que no hace falta ni un
   contador ni unas flechas. */
.proceso {
  display: grid;
  gap: var(--space-9);
}

/* La ventana se queda con la parte de arriba de la captura: abajo hay pantalla
   vacía, que es lo que pasa en una aplicación de verdad y no lo que hay que
   mostrar acá. */
/* El marco —borde, esquinas, fondo y sombra— es de **cada captura** y no de la
   ventana que las contiene. Cuando era de la ventana, la que entraba dejaba a la
   izquierda una franja de fondo blanco enmarcada y con sombra: un borde alrededor
   de nada, que se notaba hasta que la animación terminaba de acomodarse. Ahora el
   marco viaja con la imagen y lo que se ve al costado es el lila de la sección,
   que es lo que corresponde.

   Por eso la ventana no recorta: recorta cada captura por su cuenta. Si recortara
   acá, se comería las sombras. */
.proceso-vista {
  position: relative;
  margin: 0;
  aspect-ratio: 1440 / 620;
}

/* El cambio de paso entra desde la derecha y el anterior sale hacia la izquierda:
   es el mismo sentido en el que avanza la línea de abajo, así que la escena y el
   reloj se mueven para el mismo lado.

   **La duración del desplazamiento se sale de la escala del design system**, y es
   la única excepción de la página. Esa escala —80/140/220/340— está pensada para
   controles: lo que se mueve es un botón, una pastilla, una tarjeta chica. Acá lo
   que se desplaza ocupa media pantalla, y a 340 ms un objeto de ese tamaño no
   viaja, salta. 520 ms con una curva que desacelera es lo que lo hace leerse como
   un movimiento y no como un corte. El desvanecido sí se queda en la escala.

   **La que sale se apaga antes de que aparezca la que entra**, y las dos se
   desplazan todo el tiempo. Cruzarlas superpuestas parecía lo natural, pero las
   dos capturas comparten barra lateral, cabecera y layout: superpuestas al 50%
   se ve el texto duplicado, que se lee como una imagen mal cargada y no como un
   movimiento. Apagando la primera rápido y encendiendo la segunda un pelo
   después, en cualquier momento hay una sola pantalla a la vista y lo único que
   se percibe es el desplazamiento. */
.proceso-captura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(9%);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-escena) var(--ease-standard);
  /* El navegador prepara la capa antes de que empiece: sin esto, el primer cuadro
     del desplazamiento es el que se salta. */
  will-change: opacity, transform;
}

/* La captura llena su marco y sobra por abajo: ahí es donde la ventana se queda
   con la parte de arriba de la pantalla. */
.proceso-captura img {
  display: block;
  width: 100%;
  height: auto;
}

/* Entra con el retraso de lo que tarda en irse la otra. */
.proceso-captura[data-activa] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-normal) var(--ease-standard) var(--dur-fast),
    transform var(--dur-escena) var(--ease-standard);
}

/* La que sale. Es un estado propio y no el de reposo porque el reposo está a la
   derecha: sin esto, la que se fue volvería a entrar desde el lado equivocado
   cuando el recorrido da la vuelta. */
.proceso-captura[data-saliente] {
  opacity: 0;
  transform: translateX(-9%);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-escena) var(--ease-standard);
}

/* Cuatro columnas, una por paso del asistente. Eran tres cuando el alta del
   veterinario y la agenda iban juntas; en el flujo son dos pantallas distintas y
   acá también. */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

/* El paso entero es el área táctil, no un enlace al final del texto: es la
   forma de saltar a un paso sin esperar a que la línea llegue. */
.paso-boton {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 2px solid var(--border-default);
  padding: var(--space-6) 0 0;
  cursor: pointer;
  position: relative;
  font: inherit;
  color: inherit;
}

/* La línea que se llena. Va sobre la regla apagada del borde y no la reemplaza:
   así el paso que todavía no llegó igual tiene su renglón, y el activo lo pinta
   encima. */
.paso-boton::after {
  content: '';
  position: absolute;
  inset: -2px auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-strong);
  transform: scaleX(0);
  transform-origin: left;
}

.paso[data-activo] .paso-boton::after {
  animation: llenar var(--duracion-del-paso, 7s) linear forwards;
}

/* Detenido: fuera de pantalla, con el puntero encima o con el foco adentro. Un
   contenido que se mueve solo tiene que poder pararse (WCAG 2.2.2), y además
   nadie quiere que la captura cambie justo cuando se puso a mirarla. */
.proceso[data-quieto] .paso-boton::after,
.proceso[data-detenido] .paso-boton::after {
  animation-play-state: paused;
}

@keyframes llenar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.paso-num {
  display: block;
  font: var(--fw-display) var(--fs-body) / 1 var(--font-display);
  color: var(--text-subtle);
  transition: color var(--dur-normal) var(--ease-standard);
}

/* El paso que no está mostrándose baja a `--text-subtle` y no a `--text-muted`:
   con el muted la diferencia contra el activo era de un tono y no se veía. Sobre
   el fondo de la página da 4.9:1, que para este tamaño de letra alcanza. */
.paso-titulo {
  display: block;
  font: var(--fw-bold) var(--fs-h2) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--text-subtle);
  margin-top: var(--space-4);
  transition: color var(--dur-normal) var(--ease-standard);
}

.paso-detalle {
  display: block;
  font: var(--text-body-lg);
  color: var(--neutral-700);
  margin-top: var(--space-4);
}

/* El paso activo se distingue por el texto y no por un fondo: la línea ya dice
   dónde está, y una tarjeta rellena convertiría tres renglones de texto en tres
   cajas compitiendo con la captura de arriba. */
.paso[data-activo] .paso-num,
.paso[data-activo] .paso-titulo {
  color: var(--text-strong);
}

.paso-boton:hover .paso-titulo,
.paso-boton:focus-visible .paso-titulo {
  color: var(--text-strong);
}

.paso-boton:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------- quiénes somos (paso 3) */

/* El fondo y el aire los pone .franja-lila: la seccion se corta con las mismas
   curvas que "lo que cambia", no con esquinas redondeadas. */

.nosotros > .env {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  align-items: start;
}

.nosotros h2 {
  font-size: var(--fs-display-md);
  max-width: 22ch;
}

.nosotros .bajada + .bajada {
  margin-top: var(--space-4);
}

.nosotros-cierre {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
  font: var(--text-body);
  color: var(--text-body);
  max-width: 44ch;
}

.compromisos {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.compromisos article {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-7);
}

.compromisos h3 {
  font-size: var(--fs-h3);
  margin: 0;
}

.compromisos p {
  font: var(--text-body-lg);
  color: var(--neutral-700);
  margin: var(--space-3) 0 0;
}

@media (max-width: 860px) {
  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  /* En angosto la captura de una pantalla de escritorio entra al 24%: no se lee
     una palabra, y una captura ilegible es peor que ninguna. Se va, y con ella el
     recorrido —sin la animación de la línea no hay avance, porque es de ahí de
     donde el JS toma el tiempo—. Quedan los tres pasos como lista, que es como
     estaban antes de la escena. */
  .proceso-vista {
    display: none;
  }

  /* Los dos selectores, y no solo el primero: el del paso activo pesa más y si
     no se lo nombra sigue animando su línea sola. */
  .paso .paso-boton::after,
  .paso[data-activo] .paso-boton::after {
    animation: none;
    transform: scaleX(1);
  }

  .paso .paso-num,
  .paso .paso-titulo {
    color: var(--text-strong);
  }

  .nosotros > .env {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------- el tema del tutor */

/* `data-theme="tutor"` es el mecanismo del design system para intercambiar
   primario y acento: donde la página le habla al tutor, el naranja pasa a ser el
   color de la acción y el violeta el del acento. Es el mismo código que la
   aplicación, y por eso no se explica en ningún lado: quien vio la app lo
   reconoce, y quien no, igual ve que ese bloque es otro.

   No hace falta ninguna regla acá: `.boton--primario` ya pinta con
   `--color-primary-fill` sobre `--color-primary-fill-fg`, y el tema los resuelve
   al naranja de marca con blanco encima.

   **Ese par da 2.0:1 y está por debajo de AA**, como anota el propio token. Es la
   decisión de marca del sistema (Agus, 28/08) y la landing la sigue tal cual, que
   es lo que pide que el color se lea igual acá y en la app. La landing lo tuvo un
   rato con texto oscuro —9:1— y se volvió atrás a propósito: la coherencia con el
   producto ganó. Si algún día la marca revisa ese par, se revisa en el design
   system y esta página lo hereda sin tocar una línea. */

/* -------------------------------------------- banner de tutores */

/* El bloque del tutor: la pregunta y su acción, sobre el mismo lila que el
   cierre. Tuvo fondo propio —el naranja lavado del tema— y se volvió atrás: dos
   fondos seguidos obligan a una curva entre ellos para que no quede una franja
   del color de la página en el medio, y esa curva separa dos bloques que son la
   misma pieza. El color de la audiencia lo lleva el botón, que es donde se toca. */
/* El fondo es el mismo lila que el del cierre, y por eso sale del **acento**:
   bajo `data-theme="tutor"` el primario es el naranja y el acento el violeta, así
   que `--color-accent-soft` es el lila de siempre. El bloque comparte fondo con
   el formulario y lo que marca la audiencia es la acción, que es naranja. */
.banner-tutores {
  background: var(--color-accent-soft);
  padding-block: var(--space-9);
}

.banner-tutores > .env {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.banner-tutores > .env > div {
  flex: 1 1 520px;
  min-width: 0;
}

.banner-titulo {
  font: var(--fw-bold) var(--fs-h2) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
  margin: 0;
}

.banner-bajada {
  font: var(--text-body-lg);
  color: var(--neutral-700);
  margin: var(--space-3) 0 0;
  max-width: 64ch;
}

@media (max-width: 720px) {
  .banner-tutores .boton {
    width: 100%;
  }
}

/* ------------------------------------------------- CTA fijo en angosto */

/* Oculto por defecto y en escritorio: lo muestra el JS cuando el hero salió de
   pantalla. Degradado de protección desde el fondo de página, no una cápsula
   flotante. */
.cta-fijo {
  display: none;
}

@media (max-width: 900px) {
  .cta-fijo {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    padding: var(--space-8) var(--gutter-mobile) var(--space-5);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-page) 42%);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-medium) var(--ease-standard),
      visibility var(--dur-medium) var(--ease-standard);
  }

  .cta-fijo[data-visible] {
    opacity: 1;
    visibility: visible;
  }

  .cta-fijo .boton {
    width: 100%;
    box-shadow: var(--shadow-md);
  }

  /* Que no tape el final de la página ni el propio formulario. */
  footer {
    padding-bottom: var(--space-13);
  }
}

/* Los aparatos, en angosto */

@media (max-width: 900px) {
  /* Se van, y no es una simplificación: una laptop de 330px muestra una franja
     de la agenda donde no entra un renglón entero, y el teléfono encimado no
     tiene dónde encimarse. Vuelve la ventana que sangra por la derecha —el corte
     dice que la grilla sigue— y el recorte chico de la app del tutor, que en
     escritorio lo muestra el teléfono. */
  .dispositivos {
    padding: 0;
  }

  .laptop-marco,
  .telefono {
    display: none;
  }

  .laptop .recorte {
    position: static;
    width: 100%;
    height: 190px;
    border: 1px solid var(--border-default);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  /* Sin marco y con 190px de alto entran la cabecera del día y una cita entera.
     Con margen negativo, la primera quedaba cortada por arriba. */
  /* En angosto vuelve a escala real: la ventana mide 350px y ahí una captura
     reducida no se lee. */
  .laptop .recorte img {
    width: 1192px;
    margin: 0 0 0 -16px;
  }

  .recorte-tutor {
    display: block;
  }
}