/*
 * Tokens de diseño. Portados de web-cuchachoco/src/index.css, que los tenía
 * como variables de Tailwind.
 *
 * Cada color vive dos veces: los canales sueltos (--x-hsl) y el color ya
 * resuelto (--x). Los canales son los que permiten hsl(var(--x-hsl) / .5)
 * sin declarar una variable nueva por cada nivel de transparencia — el sitio
 * original usaba muchísimos.
 *
 * No hay variante oscura: el sitio no tiene toggle de tema y las variables
 * .dark del original estaban muertas.
 */

:root {
  /* --- Paleta cálida --- */
  --c-fondo-hsl: 0 0% 100%;
  --c-fondo: hsl(var(--c-fondo-hsl));

  /* Marrón oscuro. Es el color de texto y también el del overlay del hero. */
  --c-texto-hsl: 25 35% 20%;
  --c-texto: hsl(var(--c-texto-hsl));

  /* Naranja principal. 38% de luminosidad, no 55%: así llega a 4.5:1 tanto
     con texto blanco encima como usado de texto sobre blanco (WCAG AA). */
  --c-naranja-hsl: 25 85% 38%;
  --c-naranja: hsl(var(--c-naranja-hsl));

  --c-naranja-claro-hsl: 35 80% 70%;
  --c-naranja-claro: hsl(var(--c-naranja-claro-hsl));

  --c-sobre-oscuro-hsl: 0 0% 100%;
  --c-sobre-oscuro: hsl(var(--c-sobre-oscuro-hsl));

  --c-beige-hsl: 35 30% 93%;
  --c-beige: hsl(var(--c-beige-hsl));

  --c-crema-hsl: 40 35% 97%;
  --c-crema: hsl(var(--c-crema-hsl));

  --c-suave-hsl: 35 20% 94%;
  --c-suave: hsl(var(--c-suave-hsl));

  /* Gris cálido para bajadas y textos secundarios. */
  --c-apagado-hsl: 25 20% 45%;
  --c-apagado: hsl(var(--c-apagado-hsl));

  /* Naranja muy lavado: fondo de los cuadraditos de íconos. */
  --c-acento-hsl: 35 80% 92%;
  --c-acento: hsl(var(--c-acento-hsl));

  --c-borde-hsl: 35 25% 88%;
  --c-borde: hsl(var(--c-borde-hsl));

  --c-marron-footer-hsl: 25 30% 18%;
  --c-marron-footer: hsl(var(--c-marron-footer-hsl));

  /* --- Submarca ProVet --- */
  /* El violeta es la única zona fría del sitio, a propósito: el corte con la
     paleta cálida es lo que hace que ProVet se lea como marca aparte. */
  --c-provet-hsl: 268 55% 48%;
  --c-provet: hsl(var(--c-provet-hsl));

  --c-provet-fondo-hsl: 268 45% 20%;
  --c-provet-fondo: hsl(var(--c-provet-fondo-hsl));

  --c-provet-texto-hsl: 0 0% 100%;
  --c-provet-texto: hsl(var(--c-provet-texto-hsl));

  /* --- WhatsApp (color de marca, no se toca) --- */
  --c-whatsapp: #25d366;
  --c-whatsapp-hover: #1da851;

  /* --- Gradientes --- */
  --c-grad-hero: linear-gradient(135deg, hsl(25 85% 55%) 0%, hsl(30 80% 60%) 100%);
  --c-grad-calido: linear-gradient(135deg, hsl(35 30% 95%) 0%, hsl(35 25% 92%) 100%);
  --c-grad-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(35 20% 98%) 100%);

  /* --- Sombras --- */
  /* Los botones de acción llevan sombra naranja y no marrón: es lo que los
     despega del fondo sin que parezca suciedad debajo. */
  --c-sombra-boton: 0 8px 30px -8px hsl(var(--c-naranja-hsl) / 0.4);
  --c-sombra-card: 0 2px 12px -2px hsl(var(--c-texto-hsl) / 0.06);
  --c-sombra-suave: 0 4px 20px -4px hsl(var(--c-texto-hsl) / 0.08);
  --c-sombra-media: 0 8px 30px -8px hsl(var(--c-texto-hsl) / 0.12);

  /* --- Radios ---
     Cinco escalones, los mismos del sitio de referencia: ahí Tailwind los
     deriva de un radio base de 12px sumándole 4 en cada paso, así que el salto
     de 16 a 24 pasa por 20 y no es redondo. Ese escalón intermedio es el que
     usan casi todas las piezas grandes —cards de servicio, planes, mapa,
     urgencia—, y sin él quedan visiblemente más blandas que el original. */
  --c-radio: 0.75rem;
  --c-radio-sm: 0.5rem;
  --c-radio-lg: 1rem;
  --c-radio-xl: 1.25rem;
  --c-radio-2xl: 1.5rem;
  --c-radio-full: 9999px;

  /* --- Tipografía --- */
  --c-fuente-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --c-fuente-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida. El clamp evita tener que declarar cada breakpoint a mano:
     el valor del medio es el que crece con el viewport. */
  --c-txt-xs: 0.75rem;
  --c-txt-sm: 0.875rem;
  --c-txt-base: 1rem;
  --c-txt-lg: 1.125rem;
  --c-txt-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --c-txt-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.5rem);
  --c-txt-3xl: clamp(1.75rem, 1.5rem + 1.2vw, 1.875rem);
  /* Los títulos de sección van por escalones y no por clamp: el original salta
     30 → 36 → 48px en los breakpoints de abajo y ninguna curva fluida pasa por
     los tres puntos. `--sm` es el escalón del FAQ, que se queda en 36 porque su
     título comparte fila con la lista de preguntas en vez de encabezarla. */
  --c-txt-titulo-sm: 1.875rem;
  --c-txt-titulo: 1.875rem;
  /* El interlineado también va por escalones, y no es un descuido del original:
     ahí conviven `leading-tight` y `text-4xl`/`text-5xl`, que traen su propio
     alto de línea. En mobile gana el 1.25 de `leading-tight`; de tablet para
     arriba gana el de la variante responsive —40px sobre 36, 48 sobre 48— que
     Tailwind emite después. Sin esto, los títulos de escritorio quedan un
     renglón más altos que los del sitio de referencia. */
  --c-txt-titulo-lh: 1.25;
  --c-txt-titulo-sm-lh: 1.25;
  --c-txt-hero: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  /* --- Ritmo vertical y contenedor --- */
  --c-ancho: 80rem;
  --c-ancho-texto: 42rem;
  --c-pad-lateral: 1rem;
  /* Interpola entre los dos escalones del diseño original —80px en mobile,
     96px de tablet para arriba— en vez de saltar de golpe en el breakpoint. */
  --c-seccion-y: clamp(5rem, 4rem + 3vw, 6rem);

  /* Alto del header fijo. Lo usan el scroll-margin de las secciones y el
     padding superior del hero, así que tiene que ser una sola fuente. */
  --c-header-alto: 4rem;

  /* --- Transiciones --- */
  --c-trans: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --c-trans-lenta: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Aire lateral: 16 → 20 → 24. El original usa `px-4` (16px) en todos los anchos,
   pero sobre las secciones a sangre —ProVet, el CTA final— 16px se leen como
   "esto no tiene margen". El escalón arranca a los 360px y no antes porque abajo
   de eso el ancho útil ya está justo para el contenido más rígido que hay: el
   logo del header con el nombre en una línea pide 272,8px, exactamente lo que
   sobra a 320 de pantalla con 16px de aire. Ahí un margen más ancho no es
   respiro sino desborde. */
@media (min-width: 22.5rem) {
  :root {
    --c-pad-lateral: 1.25rem;
  }
}

@media (min-width: 768px) {
  :root {
    --c-pad-lateral: 1.5rem;
    --c-header-alto: 5rem;
    --c-txt-titulo-sm: 2.25rem;
    --c-txt-titulo: 2.25rem;
    --c-txt-titulo-lh: 1.1111;
    --c-txt-titulo-sm-lh: 1.1111;
  }
}

@media (min-width: 1024px) {
  :root {
    --c-txt-titulo: 3rem;
    /* El escalón chico no sube acá —el FAQ se queda en 36px—, así que tampoco
       cambia su interlineado. */
    --c-txt-titulo-lh: 1;
  }
}

/* --- Animaciones --- */

/* El track del marquee lleva su contenido duplicado y recorre el 50%: al
   terminar está exactamente donde empezó, así que el loop no tiene costura. */
@keyframes cucha-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes cucha-flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes cucha-ping {
  75%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes cucha-aparecer {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}