/* La página del tutor (rediseño del 2026-10-20).
 *
 * Va aparte de landing.css porque esa hoja la comparten la portada y la rama
 * profesional, y lo de acá no tiene que tocarlas. Lo compartido —la barra, los
 * botones, el formulario, las preguntas, el pie— sigue saliendo de landing.css.
 *
 * Tres decisiones que ordenan el archivo:
 *
 * 1. **El fondo es cálido.** El `--surface-page` del sistema es un blanco
 *    templado hacia el violeta, que es el de las pantallas de trabajo; esta
 *    página es la sala de espera y va hacia el durazno. Es un valor propio de la
 *    landing, como `--ancho-de-la-landing`, y no reemplaza a ningún token.
 * 2. **El CTA es violeta oscuro con texto blanco.** El naranja de marca no
 *    sirve de relleno: con blanco da 3.0:1, y con violeta oscuro encima se
 *    probó y no gustó (2026-10-20). El naranja queda para lo que no se lee:
 *    las franjas, la mancha, la mascota y los íconos.
 * 3. **Naranja para lo del tutor, violeta para lo de la veterinaria**, como en la
 *    app (`--owner-accent` / `--clinical-accent`). La sección de la veterinaria es
 *    la única franja lila.
 */

:root {
  --superficie-calida: #fffbf7;
}

body.pagina-tutor {
  --surface-page: var(--superficie-calida);
  --color-primary-fill: var(--wayka-violeta-oscuro);
  --color-primary-fill-hover: var(--wayka-oscuro);
  --color-primary-fill-fg: var(--text-inverse);
  /* landing.css lleva el primario fuerte del tutor al naranja claro, que sobre
     blanco da 3.0:1. En esta página el texto de acento va en violeta y el
     naranja queda para superficies y decoración. */
  --text-link: var(--wayka-naranja-oscuro);
  --text-link-hover: var(--wayka-violeta-oscuro);
  background: var(--superficie-calida);
}

.pagina-tutor .overline,
.pagina-tutor .franja-lila .overline {
  color: var(--wayka-violeta);
}

/* En la barra el relleno violeta desaparece contra el violeta: va invertido,
   blanco con texto violeta. */
.pagina-tutor .barra .boton--claro {
  color: var(--wayka-violeta-oscuro);
}

.t-centrada {
  text-align: center;
  margin-inline: auto;
}

.t-centrada h2 {
  max-width: 22ch;
  margin-inline: auto;
}

/* ===================================================================== hero */

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

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

/* Violeta y no naranja oscuro: sobre el fondo cálido el naranja da 4.32:1 y
   esto es texto de 15px. */
.t-categoria {
  font: var(--fw-bold) var(--fs-body) / var(--lh-normal) var(--font-sans);
  color: var(--wayka-violeta);
  margin: 0 0 var(--space-4);
}

.t-hero h1 {
  max-width: 14ch;
}

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

.t-form {
  margin-top: var(--space-8);
  max-width: 520px;
}

.t-form-nota {
  font: var(--text-body);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}

.t-form-fila {
  display: flex;
  gap: var(--space-3);
}

.t-form-fila .campo-correo {
  flex: 1;
  min-width: 0;
  height: var(--control-h-touch);
}

/* landing.css estira el botón del formulario a todo el ancho; en la fila del
   hero va al lado del campo. */
.t-form-fila .boton {
  flex: none;
  width: auto;
}

/* El aviso del hero vive fuera del form: queda cuando la confirmación lo
   reemplaza, y no suma alto mientras está vacío. */
.t-hero .aviso-de-formulario {
  max-width: 520px;
  margin-top: var(--space-3);
  min-height: 0;
}

.t-hero .confirmacion {
  max-width: 520px;
}

.t-confianza {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  font: var(--text-body-sm);
  color: var(--text-muted);
}

.t-confianza li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.t-confianza li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--wayka-naranja-claro);
}

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

/* --- la escena: la ficha en el teléfono y la mascota al lado --- */

.t-hero-escena {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: var(--space-6);
}

.t-mancha {
  position: absolute;
  inset: 0 2%;
  background: var(--color-primary-soft);
  border-radius: 62% 38% 46% 54% / 48% 44% 56% 52%;
}

/* El teléfono es un borde y un radio, nada más: la captura ya trae la pantalla.
   Se recorta por arriba —la ficha se entiende con la cabecera y las alertas— y
   así no ocupa una pantalla entera. */
.t-telefono {
  position: relative;
  width: min(300px, 70%);
  aspect-ratio: 9 / 14;
  border: 8px solid var(--wayka-violeta-oscuro);
  border-radius: 38px;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.t-telefono img {
  display: block;
  width: 100%;
  height: auto;
}

.t-hero-mascota {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(180px, 40%);
  height: auto;
}

/* ================================================================ problema */

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

.t-problemas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.t-problemas li {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-lg);
}

.t-problemas h3 {
  font: var(--fw-bold) var(--fs-h4) / var(--lh-snug) var(--font-display);
}

.t-problemas p {
  font: var(--text-body);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.t-icono {
  flex: none;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--wayka-naranja-oscuro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La libreta va en una tarjeta del mismo blanco que el fondo del video: sobre
   el durazno, el rectángulo del póster se veía recortado. */
.t-libreta {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--neutral-25);
  box-shadow: var(--shadow-md);
}

/* ============================================================ cómo funciona */

.t-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.t-pasos-seccion {
  padding-top: var(--space-12);
}

.t-paso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.t-paso-num {
  display: inline-grid;
  place-items: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--wayka-violeta-oscuro);
  font: var(--fw-display) var(--fs-h3) / 1 var(--font-display);
  margin-bottom: var(--space-5);
}

.t-paso p {
  font: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* Las tres capturas se alinean abajo aunque los textos tengan distinto largo. */
.t-telefono--chico {
  width: min(240px, 100%);
  margin-top: auto;
  align-self: center;
  aspect-ratio: 9 / 13;
  border-width: 7px;
  border-radius: 32px;
  box-shadow: var(--shadow-md);
}

.t-paso p + .t-telefono--chico {
  margin-top: var(--space-8);
}

/* ============================================================ la veterinaria */

.curva--vet,
.curva--vet-cierre {
  background: var(--wayka-lila-claro);
}

.curva--vet {
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  margin-bottom: 0;
}

.curva--vet-cierre {
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-bottom: 0;
}

.t-vet {
  background: var(--wayka-lila-claro);
  padding-top: var(--space-10);
  padding-bottom: var(--space-11);
}

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

.t-vet-mascota {
  width: 100%;
  max-width: 260px;
  height: auto;
  justify-self: center;
}

.t-vet-texto .bajada {
  color: var(--neutral-700);
}

/* Sin caja: una nota debajo de una línea fina, en el mismo plano que el texto.
   La tarjeta blanca con el borde de color al costado se leía como plantilla. */
.t-vet-piloto {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--wayka-lila);
  max-width: 60ch;
}

.t-vet-piloto-titulo {
  font: var(--fw-bold) var(--fs-h4) / var(--lh-snug) var(--font-display);
  color: var(--text-strong);
}

.t-vet-piloto p + p {
  font: var(--text-body);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.t-vet-piloto a {
  color: var(--wayka-violeta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ================================================================== el club */

.t-club .env {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-10);
  align-items: center;
}

/* La credencial es un dibujo, no una captura: el código es de mentira y por
   eso va `aria-hidden`. Lo que sí es verdad es que vence a los 10 minutos
   (Modelo de Negocio, 3). */
.t-credencial {
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(300px, 100%);
  padding: var(--space-7);
  background: var(--surface-card);
  border: 1px solid var(--owner-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
}

.t-credencial-etiqueta {
  font: var(--fw-bold) var(--fs-overline) / var(--lh-normal) var(--font-display);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--wayka-violeta);
}

.t-credencial-titulo {
  font: var(--fw-display) var(--fs-h2) / var(--lh-snug) var(--font-display);
  color: var(--text-strong);
}

.t-credencial-codigo {
  margin-block: var(--space-5);
  padding-block: var(--space-5);
  border-block: 2px dashed var(--owner-border);
  text-align: center;
  font: var(--fw-display) var(--fs-display-md) / 1 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--wayka-naranja-oscuro);
}

.t-credencial-pie {
  font: var(--text-body-sm);
  color: var(--text-muted);
}

/* =================================================================== gratis */

.t-gratis .compromisos {
  max-width: 960px;
  margin-inline: auto;
}

/* ================================================================ el cierre */

.curva--oscura {
  background: var(--wayka-violeta-oscuro);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  margin-bottom: 0;
}

/* El cierre pasa a ser la franja oscura de la marca, la misma del pie, y la
   tarjeta blanca se apoya encima con la mascota echada sobre su borde. */
.t-cierre {
  background: var(--wayka-violeta-oscuro);
  padding-top: var(--space-13);
  padding-bottom: var(--space-10);
}

.t-cierre-marco {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
}

.t-cierre-mascota {
  position: absolute;
  z-index: 1;
  top: 0;
  right: var(--space-9);
  width: 220px;
  height: auto;
  /* Echada sobre el borde de la tarjeta, entera: la sombra del dibujo cae en
     la línea del borde. */
  transform: translateY(-95%);
}

.t-cierre .tarjeta-de-cierre {
  position: relative;
  z-index: 2;
  box-shadow: none;
  border: none;
}

.t-cruce {
  margin-top: var(--space-9);
  text-align: center;
  font: var(--text-body);
  color: var(--text-on-immersive-muted);
}

.t-cruce a {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pagina-tutor footer {
  border-top: 1px solid var(--border-on-immersive);
}

/* Anotado: el CTA fijo ya no tiene a dónde llevar. */
body[data-anotado] .cta-fijo {
  display: none;
}

/* ================================================================ la mascota */

/* Un perro tranquilo, en los colores de la marca. Las formas son del SVG y el
   color sale de acá, de los tokens, para que el dibujo siga a la paleta. */
.m-cuerpo {
  fill: var(--wayka-naranja-claro);
}

/* Las patas van un tono más claro que el cuerpo y las orejas uno más oscuro:
   con el naranja de marca en #D3813C, --wayka-naranja (#D97B47) ya no se
   distinguía del cuerpo. */
.m-pata {
  fill: var(--color-primary-hover);
}

.m-oreja {
  fill: var(--wayka-naranja-oscuro);
}

.m-crema {
  fill: var(--color-primary-soft);
}

.m-tinta {
  fill: var(--wayka-violeta-oscuro);
}

.m-trazo {
  fill: none;
  stroke: var(--wayka-violeta-oscuro);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m-collar {
  fill: var(--wayka-lila);
}

.m-chapita {
  fill: var(--surface-card);
  stroke: var(--wayka-violeta);
  stroke-width: 2;
}

.m-sombra {
  fill: var(--wayka-violeta-oscuro);
  opacity: 0.08;
}

/* Sobre la franja oscura la sombra no se ve, y la crema necesita contraste. */
.t-cierre .m-sombra {
  opacity: 0;
}

.mascota .m-ojos,
.mascota .m-cola,
.mascota .m-cabeza {
  transform-box: fill-box;
}

.mascota .m-ojos {
  transform-origin: center;
}

/* La cola gira desde donde se une al cuerpo: el borde izquierdo de su caja. */
.mascota--sentada .m-cola {
  transform-origin: 0% 100%;
}

.mascota--echada .m-cola {
  transform-origin: 0% 100%;
}

.mascota--mira .m-cabeza {
  transform-origin: 50% 100%;
  transform: rotate(-9deg);
}

/* El movimiento es poco y lento a propósito: un parpadeo y un meneo cada seis
   segundos. Fuera de pantalla queda en pausa: lo marca js/mascota.js con
   `data-en-pantalla`, y sin JS no se anima, que es la falla correcta. */
@media (prefers-reduced-motion: no-preference) {
  .mascota:not([data-en-pantalla]) * {
    animation-play-state: paused !important;
  }

  .mascota .m-ojos {
    animation: parpadear 6s var(--ease-standard) infinite;
  }

  .mascota .m-cola {
    animation: menear 6s var(--ease-standard) infinite;
  }

  .t-vet-mascota .m-ojos {
    animation-delay: -2s;
  }

  .t-cierre-mascota .m-ojos,
  .t-cierre-mascota .m-cola {
    animation-delay: -4s;
  }

  /* Anotado: la cola festeja una vez, y vuelve a lo de siempre. */
  body[data-anotado] .mascota .m-cola {
    animation: festejar 1.2s var(--ease-out) 1, menear 6s var(--ease-standard) 1.2s infinite;
  }
}

@keyframes parpadear {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

@keyframes menear {
  0%,
  70%,
  100% {
    transform: rotate(0deg);
  }
  76% {
    transform: rotate(-12deg);
  }
  82% {
    transform: rotate(6deg);
  }
  88% {
    transform: rotate(-8deg);
  }
  94% {
    transform: rotate(0deg);
  }
}

@keyframes festejar {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15%,
  45%,
  75% {
    transform: rotate(-16deg);
  }
  30%,
  60%,
  90% {
    transform: rotate(10deg);
  }
}

/* ================================================================== angosto */

@media (max-width: 900px) {
  .t-hero {
    padding-block: var(--space-8) var(--space-10);
  }

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

  .t-bajada {
    margin-top: var(--space-5);
    font-size: var(--fs-body);
  }

  .t-form {
    margin-top: var(--space-7);
  }

  .t-form-fila {
    flex-direction: column;
  }

  /* En columna, el `flex: 1` de la fila aplastaba el alto del campo. */
  .t-form-fila .campo-correo {
    flex: none;
  }

  .t-form-fila .boton {
    width: 100%;
  }

  .t-hero-escena {
    padding-block: var(--space-4) 0;
  }

  .t-telefono {
    width: 62%;
  }

  .t-hero-mascota {
    width: 38%;
  }

  /* La libreta es una escena de escritorio: en angosto no se baja el video ni
     se muestra el póster, igual que antes en el hero. */
  .t-libreta {
    display: none;
  }

  .t-pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-11);
  }

  .t-telefono--chico {
    width: 64%;
  }

  .t-vet-mascota {
    max-width: 150px;
  }

  .t-cierre {
    padding-top: var(--space-12);
  }

  .t-cierre-mascota {
    width: 170px;
    right: var(--space-5);
  }

  .t-cierre .cierre-recap h2 {
    font-size: var(--fs-h1);
  }
}