/*
 * Una regla por sección de la landing, en el mismo orden en que aparecen
 * en front-page.php. Todo lo que se repite en más de una sección ya está
 * en components.css.
 */

/* --- Hero --- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: var(--c-header-alto);
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  /* El parallax lo desplaza hacia abajo: sin el extra de alto se vería el
     borde inferior del video al final del recorrido. */
  height: 115%;
  will-change: transform;
}

.hero__fondo img,
.hero__fondo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El poster es el primer cuadro exacto del video: mientras carga no hay
   salto, y si el video nunca arranca la foto queda como fondo válido. */
.hero__poster {
  position: absolute;
  inset: 0;
}

.hero__video {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms ease-out;
}

.hero__video.esta-listo {
  opacity: 1;
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    hsl(var(--c-texto-hsl) / 0.85) 0%,
    hsl(var(--c-texto-hsl) / 0.7) 50%,
    hsl(var(--c-texto-hsl) / 0.4) 100%
  );
}

/* Viñeta inferior: cose el hero con la sección blanca que sigue. */
.hero__velo::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8rem;
  background: linear-gradient(to top, hsl(var(--c-texto-hsl) / 0.6), transparent);
}

.hero__contenido {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  color: var(--c-sobre-oscuro);
  will-change: transform, opacity;
}

/* Todo el bloque de texto comparte un mismo ancho de lectura: el título, la
   bajada y la franja de confianza cortan en la misma vertical. */
.hero__texto {
  max-width: 42rem;
}

.hero__titulo {
  margin-block: 1.5rem;
  font-size: var(--c-txt-hero);
  font-weight: 600;
  line-height: 1.05;
}

/* Sigue en la misma línea que el resto del título: el remate no es un renglón
   aparte, arranca donde termina la frase. */
.hero__titulo em {
  color: var(--c-naranja-claro);
  font-style: italic;
  font-weight: 500;
}

.hero__bajada {
  margin-bottom: 2.5rem;
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.9);
  font-size: var(--c-txt-xl);
}

/* Apilados y a todo el ancho en mobile: los dos en fila no entran, y partirlos
   al medio se lee peor que uno abajo del otro. */
.hero__botones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero__botones {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Línea chica bajo los botones: "Respondemos en el día · dirección". */
.hero__micro {
  margin-top: 1rem;
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.75);
  font-size: var(--c-txt-sm);
}

/* Franja de confianza al pie de la columna de texto, no del hero entero: la
   línea que la separa mide lo mismo que el bloque que viene arriba. */
.hero__confianza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--c-sobre-oscuro-hsl) / 0.2);
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.85);
  font-size: var(--c-txt-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__confianza li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Separador entre ítems, no viñeta: por eso el primero no la lleva. */
.hero__confianza svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  fill: hsl(var(--c-naranja-claro-hsl) / 0.7);
}

@media (min-width: 768px) {
  .hero__velo {
    background: linear-gradient(
      to right,
      hsl(var(--c-texto-hsl) / 0.8) 0%,
      hsl(var(--c-texto-hsl) / 0.6) 50%,
      transparent 100%
    );
  }
}

/* Sin el video no hay nada que parallaxear: dejamos el poster quieto. */
@media (prefers-reduced-motion: reduce) {
  .hero__fondo {
    height: 100%;
    transform: none !important;
  }

  .hero__contenido {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- Frase emotiva --- */

/* Respira menos que el resto de las secciones: es una pausa entre dos bloques
   grandes, no un bloque más. */
.emotiva {
  position: relative;
  padding-block: 4rem;
  background-color: var(--c-beige);
  overflow: hidden;
}

@media (min-width: 768px) {
  .emotiva { padding-block: 5rem; }
}

/* Decoración, no contenido: van con position absoluta y las tres posiciones
   se escriben a mano justamente para que no queden en línea. */
.emotiva__huella {
  position: absolute;
  color: hsl(var(--c-naranja-hsl) / 0.1);
  fill: currentColor;
}

.emotiva__huella:nth-of-type(1) {
  top: 2rem;
  left: 8%;
  width: 4rem;
  height: 4rem;
  transform: rotate(-12deg);
}

.emotiva__huella:nth-of-type(2) {
  bottom: 2.5rem;
  left: 16%;
  width: 2.5rem;
  height: 2.5rem;
  transform: rotate(6deg);
}

.emotiva__huella:nth-of-type(3) {
  right: 6%;
  bottom: -1rem;
  width: 5rem;
  height: 5rem;
  transform: rotate(12deg);
}

.emotiva__interior {
  position: relative;
  max-width: 48rem;
  margin-inline: auto;
}

.emotiva__frase {
  margin-bottom: 1.5rem;
  font-size: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  font-weight: 500;
  line-height: var(--c-txt-titulo-lh);
}

.emotiva__frase em {
  color: var(--c-naranja);
  font-style: italic;
}

.emotiva__texto {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
  color: hsl(var(--c-texto-hsl) / 0.8);
  font-size: var(--c-txt-lg);
}

/* Desde tablet el bloque se corre a la izquierda en vez de centrarse: el
   texto arranca donde el ojo ya venía leyendo el hero. */
@media (min-width: 768px) {
  .emotiva__interior {
    margin-left: 12%;
    margin-right: 0;
  }

  /* Alto de línea fijo de tablet para arriba: la frase es de una o dos líneas
     grandes y acá el aire lo pone el margen de abajo, no el interlineado. Es
     además lo que hace el original, donde el 2.5rem de su escalón de tablet
     sigue aplicando cuando la tipografía ya creció. */
  .emotiva__frase {
    line-height: 2.5rem;
  }
}

/* --- Servicios (bento) --- */

.servicios {
  background-color: var(--c-fondo);
}

/* El bento va un escalón más angosto que el contenedor y centrado: nueve cards
   a todo el ancho de la página se leen como una tabla. La cabecera sí arranca
   contra el margen, y ese desfasaje es del diseño original. */
.servicios__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 72rem;
  margin-inline: auto;
}

/* Son nueve cards leídas como conjunto, no de a una: van con un escalón menos
   de aire y de tipografía que el resto de las cards del sitio, si no la grilla
   se estira sin agregar información. */
.servicio {
  padding: 1.5rem;
}

.servicio .card__titulo {
  margin-bottom: 0.375rem;
  line-height: 1.55;
}

.servicio .card__texto {
  font-size: var(--c-txt-sm);
  line-height: 1.625;
}

/* La card destacada del bento: mismo fondo que las demás, pero con más aire,
   título más grande y una huella de agua atrás. El color pleno está reservado
   para ProVet y el CTA final; si esta también fuera naranja, la grilla tendría
   dos focos peleándose. */
.servicio--ancha {
  justify-content: flex-end;
  overflow: hidden;
}

.servicio--ancha .card__titulo {
  font-size: var(--c-txt-2xl);
}

.servicio__marca {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 6rem;
  height: 6rem;
  color: var(--c-naranja);
  fill: currentColor;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* Card de ProVet insertada en la grilla, con la paleta fría de la submarca. */
.servicio--provet {
  justify-content: flex-end;
  /* La huella asoma por la esquina inferior derecha: sin esto se sale de la
     card y en mobile arrastra el scroll horizontal de toda la página. */
  overflow: hidden;
  background: var(--c-provet-fondo);
  border-color: transparent;
  color: var(--c-provet-texto);
}

/* Es la única card de la grilla que va con el cuerpo de texto en tamaño base:
   no compite con ninguna vecina, la fila entera es suya. */
.servicio--provet .card__texto {
  font-size: var(--c-txt-base);
  color: hsl(var(--c-provet-texto-hsl) / 0.8);
}

.servicio--provet .badge {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  font-size: var(--c-txt-xs);
  background-color: hsl(var(--c-provet-hsl) / 0.35);
  color: var(--c-provet-texto);
}

.servicio--provet .enlace-flecha {
  margin-top: 1.25rem;
  color: var(--c-provet-texto);
}

/* El hover naranja de .card--enlazada no va sobre el violeta. */
.servicio--provet:hover {
  border-color: hsl(var(--c-provet-hsl) / 0.7);
}

.servicio--provet .card__titulo {
  font-size: var(--c-txt-2xl);
}

/* En esta card la huella es más grande y va abajo a la derecha: el texto
   está apoyado en el borde inferior izquierdo y así no se pisan. */
.servicio--provet .servicio__marca {
  top: auto;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 8rem;
  height: 8rem;
  color: var(--c-provet);
  opacity: 0.4;
  transform: rotate(12deg);
}

@media (min-width: 640px) {
  .servicios__grilla {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Recién con dos columnas conviene igualar el piso de altura: en una sola
     columna, estirar las cards cortas es puro vacío. */
  .servicio {
    min-height: 13rem;
  }

  .servicio--ancha,
  .servicio--provet {
    min-height: 18rem;
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .servicio--ancha,
  .servicio--provet {
    padding: 2rem;
  }

  .servicio--provet .card__titulo {
    font-size: var(--c-txt-3xl);
  }
}

@media (min-width: 1024px) {
  /* 6 columnas: los spans de data-servicios.php (2, 3, 4) encajan todos. */
  .servicios__grilla {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Con seis columnas el piso de altura sobra: cada fila ya se empareja sola
     por la card más alta, y forzarlo además estira la grilla entera. */
  .servicio,
  .servicio--ancha,
  .servicio--provet {
    min-height: 0;
  }

  .servicio--col-2 {
    grid-column: span 2;
  }

  .servicio--col-3 {
    grid-column: span 3;
  }

  .servicio--col-4 {
    grid-column: span 4;
  }

  .servicio--ancha,
  .servicio--provet {
    grid-column: span 4;
  }
}

/* --- ProVet --- */

.provet {
  position: relative;
  background-color: var(--c-provet-fondo);
  color: var(--c-provet-texto);
  overflow: hidden;
}

/* Dos manchas de luz y dos huellas: rompen el violeta plano sin competir con
   el texto. Va todo en un contenedor aparte para que `.contenedor` pueda
   quedar por encima con position: relative. */
.provet__textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.provet__brillo {
  position: absolute;
  display: block;
  background-color: hsl(var(--c-provet-hsl) / 0.25);
  border-radius: var(--c-radio-full);
  filter: blur(64px);
}

.provet__brillo--arriba {
  top: -8rem;
  right: -8rem;
  width: 24rem;
  height: 24rem;
}

.provet__brillo--abajo {
  bottom: -6rem;
  left: -6rem;
  width: 18rem;
  height: 18rem;
  background-color: hsl(var(--c-provet-hsl) / 0.15);
}

.provet__huella {
  position: absolute;
  color: var(--c-provet);
  fill: currentColor;
  opacity: 0.2;
}

.provet__huella--arriba {
  top: 3rem;
  right: 12%;
  width: 6rem;
  height: 6rem;
  transform: rotate(12deg);
}

.provet__huella--abajo {
  bottom: 4rem;
  left: 7%;
  width: 3.5rem;
  height: 3.5rem;
  transform: rotate(-12deg);
}

.provet .contenedor {
  position: relative;
}

/* El logo se pinta blanco puro, que es lo único legible sobre el violeta
   oscuro. Como el color del archivo nunca se ve, `provet.webp` guarda solo la
   silueta en blanco y pesa 18,5 KB en vez de 89,5 — el original en naranja
   está en ../../web-cuchachoco/src/assets/ si algún día hace falta a color.
   El alto sale solo de la proporción del archivo: fijarlo recortaría el ancho
   de la marca, que es lo que tiene que leerse. */
.provet__logo {
  width: 13rem;
  height: auto;
  margin-bottom: 2rem;
  filter: brightness(0) invert(1);
}

.provet__titulo {
  margin-bottom: 1.5rem;
  font-size: var(--c-txt-titulo);
  line-height: var(--c-txt-titulo-lh);
}

.provet__bajada {
  margin-bottom: 1rem;
  color: hsl(var(--c-provet-texto-hsl) / 0.8);
  font-size: var(--c-txt-lg);
  line-height: 1.625;
}

.provet__bajada:last-of-type {
  margin-bottom: 2rem;
}

.provet__bajada strong {
  color: var(--c-provet-texto);
}

.provet__beneficios {
  margin-bottom: 2.5rem;
}

/* Cada beneficio es un renglón suelto, no un párrafo: con el interlineado del
   cuerpo la lista se despega del texto que la introduce. */
.provet__beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
}

.provet__beneficios li + li {
  margin-top: 0.75rem;
}

/* El check va adentro de un disco del violeta de marca —el claro, no el del
   fondo—: es el único punto de color de la columna y lo que hace que la lista
   se lea como beneficios y no como viñetas. */
.provet__check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  /* Baja el disco los dos píxeles que lo alinean con la mayúscula del renglón
     en vez de con el alto de línea completo. */
  margin-top: 0.125rem;
  border-radius: var(--c-radio-full);
  background-color: var(--c-provet);
}

.provet__beneficios svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--c-provet-texto);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.provet__planes {
  display: grid;
  gap: 1.25rem;
  /* Apiladas, las cards son la segunda mitad de la sección: necesitan el mismo
     aire que separa las dos columnas cuando la grilla se abre. */
  margin-top: 3rem;
}

.plan {
  position: relative;
  padding: 1.75rem;
  background-color: hsl(var(--c-provet-texto-hsl) / 0.07);
  border: 1px solid hsl(var(--c-provet-texto-hsl) / 0.15);
  border-radius: var(--c-radio-xl);
  transition:
    background-color var(--c-trans),
    border-color var(--c-trans);
}

.plan:hover {
  background-color: hsl(var(--c-provet-texto-hsl) / 0.11);
  transform: translateY(-4px);
}

/* El plan recomendado va en violeta pleno en vez de translúcido: es la única
   diferencia de jerarquía entre los dos, así que tiene que verse de lejos. */
.plan--destacado {
  background-color: var(--c-provet);
  border-color: transparent;
}

.plan--destacado:hover {
  background-color: hsl(var(--c-provet-hsl) / 0.88);
}

.plan__badge {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
  background-color: var(--c-provet-texto);
  color: var(--c-provet-fondo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--c-txt-xs);
}

.plan__nombre {
  margin-bottom: 0.5rem;
  font-size: var(--c-txt-2xl);
}

.plan__texto {
  color: hsl(var(--c-provet-texto-hsl) / 0.75);
}

.plan--destacado .plan__texto {
  color: hsl(var(--c-provet-texto-hsl) / 0.9);
}

.provet__nota {
  color: hsl(var(--c-provet-texto-hsl) / 0.6);
  font-size: var(--c-txt-sm);
}

@media (min-width: 640px) {
  .provet__planes {
    grid-template-columns: repeat(2, 1fr);
  }

  /* La nota va debajo de las dos cards, no como tercera columna. */
  .provet__nota {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .provet__logo {
    width: 15rem;
  }

  .plan {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .provet__interior {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    /* Mismo ancho útil que el bento de servicios: las dos columnas de acá se
       leen enfrentadas con el resto de la página, no más anchas. */
    max-width: 72rem;
    margin-inline: auto;
  }

  .provet__planes {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  /* El escalonado del original: el destacado se corre hacia afuera para que
     la columna no quede como una pila prolija de dos rectángulos iguales. */
  .provet__planes .plan {
    margin-left: 1.5rem;
  }

  .provet__planes .plan--destacado {
    margin-right: 1.5rem;
    margin-left: 0;
  }

  .provet__nota {
    margin-left: 1.5rem;
  }
}

/* --- Últimos ingresos (teaser del petshop) ---
   La grilla y las cards salen de catalogo.css, que la home encola por esta
   sección. Acá va solo lo que cambia respecto del listado del petshop. */

/* Blanco y no crema: queda entre ProVet (violeta a sangre) y Nosotros
   (`--c-grad-calido`, beige). El crema contra ese beige borra el corte, y el
   blanco corta de los dos lados — es lo mismo que hace `.servicios`, que
   también lleva cards y se lee perfecto porque `.card` trae borde y sombra. */
.ultimos-ingresos {
  background-color: var(--c-fondo);
}

/* `auto-fit` y centrada, al revés que `.productos__grilla` del petshop. Allá
   una fila coja tiene que alinearse con las de arriba para que se lea como
   góndola; acá el conteo va de 1 a 6 según lo que haya cargado, y una card
   sola pegada al margen izquierdo se lee como error de maquetado. Mismo
   criterio que `.pacientes-grilla`.

   Las dos clases juntas no son adorno: catalogo.css se encola **después** de
   esta hoja, así que con una sola clase la regla de `.productos__grilla` gana
   por orden y la grilla vuelve a `auto-fill` de 16rem sin avisar. */
.productos__grilla.ultimos-ingresos__grilla {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  justify-content: center;
}

/* El tope es lo que le falta a `1fr`: con un solo producto cargado —que es la
   situación real mientras se arma el catálogo— esa card se estiraba a los
   1232px del contenedor.

   Va con un valor exacto y desde 1024, no antes: cuando el track tiene un
   máximo fijo, `auto-fit` cuenta cuántas columnas entran usando **ese máximo**
   y no el mínimo. Con 26rem daban dos columnas a 1440 y con cualquier tope
   abajo de 1024 daba una sola. 24rem es el número que deja tres columnas en
   desktop —los seis del tope en dos filas parejas— y dos a 1024. Debajo de eso
   la grilla se comporta igual que la del petshop, que ya está probada en
   mobile. */
@media (min-width: 1024px) {
  .productos__grilla.ultimos-ingresos__grilla {
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 24rem));
  }
}

.ultimos-ingresos__pie {
  margin-top: 2.5rem;
  text-align: center;
}

/* --- Nosotros --- */

.nosotros {
  position: relative;
  background: var(--c-grad-calido);
  overflow: hidden;
}

/* Huellitas de fondo, posicionadas a mano para que no queden en cuadrícula. */
.nosotros__huellas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nosotros__huellas svg {
  position: absolute;
  width: 3rem;
  height: 3rem;
  color: var(--c-texto);
  fill: currentColor;
  opacity: 0.09;
}

/* Las diez posiciones del camino. Van a mano y no en una fórmula porque lo
   que se busca es justamente que no se lea como una cuadrícula. */
.nosotros__huellas svg:nth-child(1) { top: 5%; left: 15%; transform: rotate(-15deg); }
.nosotros__huellas svg:nth-child(2) { top: 12%; left: 25%; transform: rotate(10deg) scale(0.8); }
.nosotros__huellas svg:nth-child(3) { top: 20%; left: 10%; transform: rotate(-5deg) scale(0.9); }
.nosotros__huellas svg:nth-child(4) { top: 28%; left: 30%; transform: rotate(20deg) scale(1.1); }
.nosotros__huellas svg:nth-child(5) { top: 38%; left: 8%; transform: rotate(-10deg) scale(0.85); }
.nosotros__huellas svg:nth-child(6) { top: 48%; left: 22%; transform: rotate(15deg); }
.nosotros__huellas svg:nth-child(7) { top: 58%; left: 5%; transform: rotate(-20deg) scale(0.9); }
.nosotros__huellas svg:nth-child(8) { top: 68%; left: 18%; transform: rotate(5deg) scale(0.95); }
.nosotros__huellas svg:nth-child(9) { top: 78%; left: 28%; transform: rotate(-8deg) scale(1.05); }
.nosotros__huellas svg:nth-child(10) { top: 88%; left: 12%; transform: rotate(12deg) scale(0.9); }

@media (min-width: 768px) {
  .nosotros__huellas svg {
    width: 4rem;
    height: 4rem;
  }
}

.nosotros__interior {
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
}

/* La única pieza del sitio con el radio más grande de la escala: es una foto a
   sangre y sus esquinas se leen más duras que las de una card del mismo ancho. */
.nosotros__foto {
  border-radius: var(--c-radio-2xl);
  box-shadow: var(--c-sombra-media);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* Contador flotante encima de la foto. */
.nosotros__contador {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.5rem;
  background-color: var(--c-sobre-oscuro);
  border-radius: var(--c-radio-xl);
  box-shadow: var(--c-sombra-media);
}

.nosotros__corazon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background-color: hsl(var(--c-naranja-claro-hsl) / 0.3);
  border-radius: var(--c-radio-full);
  font-size: 1.875rem;
  line-height: 1;
}

.nosotros__numero {
  color: var(--c-naranja);
  font-family: var(--c-fuente-titulo);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  /* Las cifras no cambian de ancho mientras el contador sube. */
  font-variant-numeric: tabular-nums;
}

.nosotros__etiqueta {
  margin-top: 0.4rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
  font-weight: 600;
}

/* Acá el título y sus dos párrafos son texto corrido, no una cabecera: llevan
   un escalón más de aire abajo del título y el interlineado suelto del cuerpo
   largo, en vez del más cerrado que usan las bajadas centradas. */
.nosotros__texto .seccion__titulo {
  margin-bottom: 1.5rem;
}

.nosotros__texto .seccion__bajada {
  line-height: 1.625;
}

.nosotros__cierre {
  margin-top: 1.5rem;
  color: var(--c-apagado);
  line-height: 1.625;
}

.nosotros__destacados {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Cada destacado es un renglón suelto: con el interlineado del cuerpo la lista
   se estira y se despega del texto que la introduce. */
.destacado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.5;
}

.destacado svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-naranja);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1024px) {
  .nosotros__interior {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .nosotros__media {
    position: relative;
  }

  .nosotros__contador {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    margin-top: 0;
  }
}

/* --- Pacientes (marquee) --- */

.pacientes {
  background-color: var(--c-fondo);
  /* El marquee sangra a los bordes: el padding lateral lo lleva solo la
     cabecera, no la pista. */
  overflow: hidden;
}

.pacientes__filas {
  display: grid;
  /* Mismo aire que separa las fotos dentro de cada pista: las dos filas tienen
     que leerse como una sola cinta que va y viene, no como dos bloques. */
  gap: 1rem;
}

.paciente-card {
  position: relative;
  flex-shrink: 0;
  width: 13rem;
  height: 13rem;
  border-radius: var(--c-radio-xl);
  overflow: hidden;
  box-shadow: var(--c-sombra-suave);
  transition: transform var(--c-trans);
}

/* La inclinación alternada es lo que da el aire de fotos apiladas. */
.paciente-card:nth-child(odd) {
  transform: rotate(1deg);
}

.paciente-card:nth-child(even) {
  transform: rotate(-1deg);
}

.paciente-card:hover {
  transform: rotate(0deg) scale(1.04);
}

.paciente-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paciente-card__nombre {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem 1rem 0.9rem;
  background: linear-gradient(to top, hsl(var(--c-texto-hsl) / 0.8), transparent);
  color: var(--c-sobre-oscuro);
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-lg);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 768px) {
  .paciente-card {
    width: 16rem;
    height: 16rem;
  }
}

/* Grilla de /pacientes: las mismas cards, quietas y sin inclinación.
   Columnas con tope y centradas en vez de `1fr`: con pocas fotos cargadas —o
   con un filtro de especie que deja tres— una fila a medio llenar quedaba
   pegada a la izquierda con medio ancho vacío al lado. */
.pacientes-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 17rem));
  justify-content: center;
  gap: 1.5rem;
}

.pacientes-grilla .paciente-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform: none;
}

.pacientes-grilla .paciente-card:hover {
  transform: scale(1.03);
}

/* Pie del marquee de la home. No existe en el sitio de referencia: se suma acá
   porque la galería completa es una página nueva y sin este botón no habría
   forma de llegar. Solo aparece si esa página está creada. */
.pacientes__pie {
  margin-top: 2.5rem;
  text-align: center;
}

/* --- Novedades --- */

.novedades {
  background-color: var(--c-crema);
}

/* El `min(…, 100%)` no es adorno: un mínimo de 18rem a secas es rígido, y en una
   pantalla donde no entra, la columna no se achica —se sale del contenedor. A
   320px de teléfono la card llegaba al borde exacto de la pantalla mientras el
   resto de la sección respetaba su margen. Con el techo, la columna nunca pide
   más de lo que hay; arriba de 288px el cálculo es idéntico al de antes. */
.novedades__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1.75rem;
}

.novedad {
  padding: 0;
  overflow: hidden;
}

.novedad__figura {
  aspect-ratio: 16 / 10;
  background-color: var(--c-suave);
  overflow: hidden;
}

.novedad__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--c-trans-lenta);
}

.novedad:hover .novedad__figura img {
  transform: scale(1.05);
}

.novedad__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.novedad__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

.novedad__titulo {
  margin-bottom: 0.6rem;
  font-size: var(--c-txt-xl);
}

.novedad__resumen {
  color: var(--c-apagado);
  font-size: var(--c-txt-base);
}

/* El auto lo empuja al pie aunque los resúmenes tengan distinto largo. */
.novedad__cuerpo .enlace-flecha {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Una nota sin portada igual hereda el alto de sus vecinas, que sí la tienen.
   Centrar el texto disimula mejor que dejar el hueco entre resumen y enlace. */
.novedad:not(:has(.novedad__figura)) .novedad__cuerpo {
  justify-content: center;
}

.novedad:not(:has(.novedad__figura)) .novedad__cuerpo .enlace-flecha {
  margin-top: 1.25rem;
  padding-top: 0;
}

.novedades__pie {
  margin-top: 2.5rem;
  text-align: center;
}

/* --- Listado de novedades y galería --- */

.listado {
  background-color: var(--c-crema);
}

/* La nota más reciente ocupa la fila entera y se parte en dos columnas: es lo
   que rompe la grilla uniforme y hace que el listado no se lea como un blog. */
.novedad--destacada {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .novedad--destacada {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }

  /* El alto lo manda el texto, con un piso. Si lo mandara la foto, una cuadrada
     sacada del celular —que es lo que llega casi siempre— estiraría la card a
     más de 500px. Sacar la imagen del flujo es lo que evita que aporte altura:
     así queda libre para estirarse a la fila y recortar. */
  .novedad--destacada .novedad__figura {
    position: relative;
    aspect-ratio: auto;
    min-height: 22rem;
  }

  /* Un recorte tan apaisado sobre una foto cuadrada se come dos tercios del
     alto. Encuadrar arriba del centro salva la cara del animal, que es donde
     casi siempre está. */
  .novedad--destacada .novedad__figura img {
    position: absolute;
    inset: 0;
    object-position: center 30%;
  }

  .novedad--destacada .novedad__cuerpo {
    justify-content: center;
    padding: 2.5rem;
  }

  .novedad--destacada .novedad__titulo {
    font-size: var(--c-txt-2xl);
  }
}

/* --- Novedad abierta --- */

.novedad-single .contenedor {
  max-width: var(--c-ancho-texto);
}

.novedad-single__volver {
  margin-bottom: 1.5rem;
}

.novedad-single__portada {
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  border-radius: var(--c-radio-xl);
  margin-bottom: 2.5rem;
}

.novedad-single__titulo {
  margin-bottom: 1rem;
  font-size: var(--c-txt-titulo);
}

.novedad-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-sm);
}

/* La portada sangra un poco más ancha que el texto: el bloque de lectura se
   mantiene angosto sin que la foto quede miniatura. */
@media (min-width: 1024px) {
  .novedad-single__portada {
    width: calc(100% + 6rem);
    margin-inline: -3rem;
  }
}

.novedad-single__consulta {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: var(--c-radio-xl);
  background-color: var(--c-beige);
  text-align: center;
}

.novedad-single__consulta-texto {
  margin-bottom: 1.25rem;
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-xl);
  font-weight: 600;
}

/* --- Anterior / siguiente --- */

.novedad-nav {
  padding-bottom: var(--c-seccion-y);
  background-color: var(--c-fondo);
}

.novedad-nav__interior {
  display: grid;
  gap: 1rem;
  max-width: var(--c-ancho-texto);
  padding-top: 2rem;
  border-top: 1px solid var(--c-borde);
}

@media (min-width: 640px) {
  .novedad-nav__interior {
    grid-template-columns: 1fr 1fr;
  }

  /* Aunque sea la única, la "siguiente" se queda en la columna derecha: la
     posición dice para qué lado va sin necesidad de una flecha. */
  .novedad-nav__link--derecha {
    grid-column: 2;
    text-align: right;
  }
}

.novedad-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio-lg);
  background-color: var(--c-crema);
  transition: border-color var(--c-trans), transform var(--c-trans);
}

.novedad-nav__link:hover {
  border-color: hsl(var(--c-naranja-hsl) / 0.35);
  transform: translateY(-2px);
}

.novedad-nav__etiqueta {
  color: var(--c-apagado);
  font-size: var(--c-txt-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.novedad-nav__titulo {
  font-family: var(--c-fuente-titulo);
  font-size: var(--c-txt-lg);
  font-weight: 600;
}

/* --- FAQ --- */

/* Respira un escalón menos que el resto: son preguntas cortas, no un bloque
   de contenido, y estirarlas deja la columna del título flotando sola. */
.faq {
  padding-block: 4rem;
  background-color: var(--c-beige);
}

@media (min-width: 768px) {
  .faq {
    padding-block: 5rem;
  }
}

/* Título a la izquierda y acordeón a la derecha: la columna angosta le da
   al bloque de preguntas un ancho de lectura cómodo sin centrarlo. */
.faq__grilla {
  display: grid;
  gap: 2.5rem;
  max-width: 64rem;
}

@media (min-width: 1024px) {
  .faq__grilla {
    grid-template-columns: 1fr 2fr;
  }
}

/* --- Contacto --- */

/* Blanco, no crema: contacto cierra la página y el degradado cálido queda
   para el CTA que viene justo antes. */
.contacto {
  background-color: var(--c-fondo);
}

/* Acá el título respira un escalón más que en el resto de las secciones: la
   bajada es una sola línea y con el margen de siempre se le pega. */
.contacto .seccion__titulo {
  margin-bottom: 1.5rem;
}

/* La única cabecera que no achica su aire de abajo en pantallas chicas: lo que
   sigue son cuatro tarjetas de datos apiladas, y con el margen escalonado del
   resto arrancan pegadas al texto que las presenta. */
.contacto .seccion__cabecera {
  margin-bottom: 4rem;
}

/* Las cards y el bloque de abajo comparten un ancho más angosto que el resto
   de la página: son datos sueltos y se leen mejor sin estirarse tanto. */
.contacto__grilla,
.contacto__abajo {
  max-width: 72rem;
  margin-inline: auto;
}

.contacto__grilla {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Ícono a la izquierda y los tres datos apilados a la derecha. Estas cards
   son datos, no ofertas: van planas sobre el acento, sin borde ni sombra. */
.contacto-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: hsl(var(--c-acento-hsl) / 0.5);
  border: 0;
  border-radius: var(--c-radio-lg);
  box-shadow: none;
  transition: background-color var(--c-trans);
}

.contacto-card.card--enlazada:hover {
  background-color: var(--c-acento);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.contacto-card .icono-caja {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0;
  background-color: hsl(var(--c-naranja-hsl) / 0.1);
  /* Más chico que el de las cards de servicio, y con un escalón menos de radio
     para que la proporción se mantenga. */
  border-radius: var(--c-radio);
}

/* El hover ya lo hace la card entera; el ícono se queda quieto. */
.contacto-card.card--enlazada:hover .icono-caja {
  background-color: hsl(var(--c-naranja-hsl) / 0.1);
  color: var(--c-naranja);
}

.contacto-card .icono-caja svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Sin `min-width: 0` a propósito: el mail no tiene espacios y con el mínimo
   automático del flex la columna se estira hasta que entra en un renglón, que
   es lo que mantiene las cuatro cards de la misma altura. Se come dos píxeles
   del padding derecho y no se nota. */

/* Los tres renglones van casi del mismo tamaño y se distinguen por peso y
   color: son datos de contacto, no titulares, y agrandarlos hincha la card.
   El interlineado de párrafo tampoco corresponde acá: son etiquetas de una o
   dos líneas y con el 1.6 del cuerpo la card crece sin ganar legibilidad. Va
   en rem y no como factor porque es la escala del sitio de referencia, donde
   cada tamaño chico trae su propio alto de línea fijo: 20px sobre 14 y 16
   sobre 12. */
.contacto-card__titulo {
  margin-bottom: 0.25rem;
  color: var(--c-texto);
  font-size: var(--c-txt-sm);
  font-weight: 600;
  line-height: 1.25rem;
}

.contacto-card__dato {
  /* `break-word` y no `anywhere`: los dos cortan una palabra que no entra,
     pero solo `anywhere` achica el ancho mínimo del bloque, y eso volvería a
     partir el mail aunque haya lugar de sobra. */
  overflow-wrap: break-word;
  color: var(--c-texto);
  font-size: var(--c-txt-sm);
  font-weight: 500;
  line-height: 1.25rem;
}

.contacto-card__detalle {
  color: var(--c-apagado);
  font-size: var(--c-txt-xs);
  line-height: 1rem;
}

/* Mapa y urgencias comparten fila. El alto lo fija el mapa (350px) y la card
   de urgencias se estira sola con el stretch de la grilla: darle un min-height
   propio la dejaría medio vacía cuando las dos se apilan en mobile. */
.contacto__abajo {
  display: grid;
  gap: 1.5rem;
}

.contacto__mapa {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: var(--c-radio-xl);
  box-shadow: var(--c-sombra-suave);
}

/* Card de urgencias: marrón pleno, para que no se confunda con las demás. */
.urgencia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  overflow: hidden;
  background-color: var(--c-texto);
  border-radius: var(--c-radio-xl);
  color: var(--c-sobre-oscuro);
  text-align: center;
}

/* Decoración: se sale de la card por dos esquinas y queda casi transparente,
   así no compite con el botón. */
.urgencia__deco {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 7rem;
  height: 7rem;
  opacity: 0.2;
  pointer-events: none;
}

.urgencia__cuerpo {
  position: relative;
  max-width: 24rem;
}

.urgencia__titulo {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.urgencia__texto {
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.85);
  font-size: var(--c-txt-sm);
  line-height: 1.45;
}

.urgencia .boton {
  position: relative;
}

@media (min-width: 640px) {
  .contacto__grilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .contacto__abajo {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contacto__grilla {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- CTA final --- */

/* La sección más aireada de la página: es el cierre y conviene que respire más
   que las que vienen antes, sobre todo en mobile. */
.cta-final {
  position: relative;
  padding-block: clamp(6rem, 5rem + 3vw, 7rem);
  background: var(--c-grad-hero);
  color: var(--c-sobre-oscuro);
  text-align: center;
  overflow: hidden;
}

/* Tres huellas de distinto tamaño repartidas al fondo. Igual que en nosotros,
   las coordenadas van acá y el partial solo emite los tres SVGs. */
.cta-final__huellas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-final__huella {
  position: absolute;
  color: var(--c-sobre-oscuro);
  fill: currentColor;
  opacity: 0.1;
}

.cta-final__huella:nth-child(1) {
  top: -1.5rem;
  left: 10%;
  width: 7rem;
  height: 7rem;
  transform: rotate(-12deg);
}

.cta-final__huella:nth-child(2) {
  bottom: 2rem;
  left: 30%;
  width: 4rem;
  height: 4rem;
  transform: rotate(6deg);
}

.cta-final__huella:nth-child(3) {
  right: 8%;
  bottom: -2.5rem;
  width: 9rem;
  height: 9rem;
  transform: rotate(12deg);
}

/* El contenedor va por encima de las huellas. */
.cta-final .contenedor {
  position: relative;
}

.cta-final__interior {
  max-width: 48rem;
  margin-inline: auto;
}

.cta-final__titulo {
  margin-bottom: 1rem;
  font-size: var(--c-txt-titulo);
  line-height: var(--c-txt-titulo-lh);
}

.cta-final__bajada {
  max-width: 38rem;
  margin: 0 auto 2rem;
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.9);
  font-size: var(--c-txt-lg);
}

.cta-final__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* El único botón del sitio que invierte la marca: blanco sobre el degradado
   naranja, con el texto en el marrón del cuerpo. */
.cta-final .boton--primario {
  background-color: var(--c-sobre-oscuro);
  color: var(--c-texto);
}

.cta-final .boton--primario:hover {
  background-color: hsl(0 0% 94%);
}

/* Acá el ícono no puede ir en currentColor: sobre blanco es la única vez que
   el verde de WhatsApp se lee, y es lo que hace reconocible al botón. */
.cta-final .boton--primario .boton__icono {
  fill: var(--c-whatsapp);
}

.cta-final__micro {
  margin-top: 1.5rem;
  color: hsl(var(--c-sobre-oscuro-hsl) / 0.75);
  font-size: var(--c-txt-sm);
}

/* --- Páginas internas --- */

/* Fuera de la portada no hay hero atrás del header fijo: sin este colchón se
   comería el título de la página. */
body:not(.home) #contenido {
  padding-top: var(--c-header-alto);
}

.pagina__contenido {
  max-width: var(--c-ancho-texto);
  margin-inline: auto;
}

/* --- 404 y archivos vacíos --- */

.vacio {
  padding-block: clamp(5rem, 4rem + 6vw, 9rem);
  text-align: center;
}

.vacio__huella {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  color: var(--c-naranja);
  fill: currentColor;
  opacity: 0.5;
}

.vacio__titulo {
  margin-bottom: 1rem;
  /* Sin el salto de escritorio: es un aviso de que todavía no hay contenido,
     no el título de una sección que exista de verdad. */
  font-size: var(--c-txt-titulo-sm);
}

.vacio__texto {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--c-apagado);
  font-size: var(--c-txt-lg);
}

.vacio__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}