/* ============================================================
   VETERINARIA ANDRADE · secciones.css
   Las 13 secciones de la landing.
   ============================================================ */

/* ════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding-block: 7rem var(--e-xl);
  overflow: hidden;
}

.hero__foto {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__foto picture,
.hero__foto img,
.hero__foto video { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero__foto video,
.hero__foto img { filter: saturate(1.1) brightness(1.02); will-change: transform; }

/* Velo de contraste. Con el contenido centrado ya no hace falta
   el degradado lateral que empujaba la luz hacia la izquierda:
   ahora es simétrico, más denso arriba y abajo para que el texto
   se lea sobre cualquier frame del video. */
/* El mínimo es .72, no .62: con un frame oscuro del video el
   subtítulo caía a 4.25:1 y no pasaba AA. A .72 el peor caso
   posible (frame negro) da 4.88:1 en el subtítulo y 10.46:1 en
   el titular. Calculado, no estimado a ojo. */
.hero__foto::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(247,250,243,.88) 0%, rgba(247,250,243,.72) 40%, rgba(247,250,243,.78) 62%, rgba(247,250,243,.97) 100%),
    radial-gradient(75% 55% at 50% 48%, rgba(247,250,243,.42), transparent 75%);
}

/* Contenido centrado sobre el video */
.hero__contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* El logo del hero es la marca completa, no un emblema suelto:
   se dimensiona por ancho y con techo para que no compita con el
   titular. */
.hero__logo {
  width: clamp(230px, 42vw, 420px);
  height: auto;
  object-fit: contain;
  margin-bottom: var(--e-s);
  filter: drop-shadow(0 4px 14px rgba(44, 74, 27, .18));
}

.hero h1 { margin-top: var(--e-s); max-width: 17ch; margin-inline: auto; }
.hero h1 em {
  font-style: normal;
  /* --verde-vivo da 2.3:1 sobre fondo claro; el texto necesita
     --verde-medio. El vivo se queda solo para el subrayado, que
     es decorativo y no tiene que pasar contraste de texto. */
  color: var(--verde-medio);
  /* Subrayado orgánico, como una rama bajo la palabra */
  background-image: linear-gradient(90deg, var(--verde-vivo), var(--verde));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 5px;
  border-radius: 2px;
  padding-bottom: .04em;
}

.hero__sub {
  color: var(--texto-2);
  font-size: var(--t-3);
  max-width: 56ch;
  margin: var(--e-s) auto 0;
}

.hero__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--e-2xs); margin-top: var(--e-l); width: 100%; }
.hero__ctas .boton { width: 100%; }

.hero__stats {
  margin-top: var(--e-xl);
  padding-top: var(--e-m);
  border-top: 1px solid var(--linea);
  width: 100%;
}

/* Flecha de scroll */
.hero__flecha {
  position: absolute; left: 50%; bottom: var(--e-l);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  color: var(--texto-3);
}
.hero__flecha span {
  display: block; width: 26px; height: 42px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  position: relative;
}
.hero__flecha span::after {
  content: ''; position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--verde);
  animation: rueda 2s ease-in-out infinite;
}
@keyframes rueda {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(14px); opacity: .2; }
}

/* ════════════════════════════════════════════════════════
   2. POR QUÉ ELEGIRNOS
   ════════════════════════════════════════════════════════ */

.razones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-m); }

/* ════════════════════════════════════════════════════════
   3. ESPECIES
   ════════════════════════════════════════════════════════ */

.especies-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-s); }

/* ════════════════════════════════════════════════════════
   4. SERVICIOS
   ════════════════════════════════════════════════════════ */

.servicios-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-s); }

.servicio {
  display: flex; align-items: flex-start; gap: var(--e-s);
  /* La retícula las estira a la misma altura; sin esto el borde
     inferior quedaba a distinta distancia del texto en cada una. */
  height: 100%;
  padding: var(--e-m);
  border-radius: var(--r-m);
  border: 1px solid var(--linea);
  background: var(--panel);
  box-shadow: var(--s-1);
  transition: border-color var(--dur-2) var(--ease-suave),
              background-color var(--dur-2) var(--ease-suave),
              transform var(--dur-2) var(--ease-salida);
}
.servicio__ico {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-s);
  background: var(--ico-fondo, rgba(99,150,60,.16));
  color: var(--ico-tinta, var(--verde-medio));
  transition: background-color var(--dur-2) var(--ease-suave),
              transform var(--dur-2) var(--ease-hoja);
}
.servicios-grid > :nth-child(4n+2) {
  --ico-fondo: rgba(224,150,18,.18); --ico-tinta: #8A5A05;
}
.servicios-grid > :nth-child(4n+3) {
  --ico-fondo: rgba(27,74,143,.14);  --ico-tinta: #1B4A8F;
}
.servicios-grid > :nth-child(4n+4) {
  --ico-fondo: rgba(211,44,33,.13);  --ico-tinta: #A8221A;
}
.servicio h3 { font-size: var(--t-3); }
.servicio p  { color: var(--texto-2); font-size: var(--t-2); margin-top: 3px; }
@media (hover: hover) and (pointer: fine) {
  .servicio:hover { transform: translateY(-3px); border-color: var(--verde-claro); box-shadow: var(--s-2); }
  .servicio:hover .servicio__ico { transform: scale(1.08) rotate(-4deg); }
}

/* ════════════════════════════════════════════════════════
   5. CONOCE LA CLÍNICA
   ════════════════════════════════════════════════════════ */

.clinica-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); align-items: center; }
.clinica__lista { display: flex; flex-direction: column; gap: var(--e-xs); margin-top: var(--e-m); }
.clinica__lista li {
  display: flex; align-items: center; gap: var(--e-2xs);
  color: var(--texto-2);
  font-weight: var(--w-medio);
}
.clinica__lista svg { width: 20px; height: 20px; color: var(--verde); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   6. EQUIPO
   ════════════════════════════════════════════════════════ */

.equipo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-l); }

/* ════════════════════════════════════════════════════════
   7. CASOS
   ════════════════════════════════════════════════════════ */

.casos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-m); }

/* ════════════════════════════════════════════════════════
   8. TESTIMONIOS
   ════════════════════════════════════════════════════════ */

.testimonios-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-m); }

.resumen-google {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-m);
  padding: var(--e-m) var(--e-l);
  border-radius: var(--r-hoja);
  border: 1px solid var(--linea);
  background: var(--panel);
  box-shadow: var(--s-1);
  margin-bottom: var(--e-xl);
}
.resumen-google__nota {
  font-family: var(--f-display);
  font-variation-settings: var(--fraunces-ejes);
  font-size: var(--t-6); font-weight: var(--w-fuerte);
  color: var(--oro); line-height: 1;
}

/* ════════════════════════════════════════════════════════
   10. BLOG
   ════════════════════════════════════════════════════════ */

.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-m); }

/* ════════════════════════════════════════════════════════
   11. LLAMADA A LA ACCIÓN
   ════════════════════════════════════════════════════════ */

.cta-final {
  position: relative;
  padding-block: var(--e-4xl);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(143,212,78,.30), transparent 70%),
    var(--claro-3);
}
.cta-final h2 { max-width: 20ch; margin-inline: auto; }
.cta-final p { color: var(--texto-2); font-size: var(--t-4); max-width: 52ch; margin: var(--e-m) auto 0; }
.cta-final__botones {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-2xs); margin-top: var(--e-xl);
}
.cta-final__botones .boton { width: 100%; max-width: 340px; }
.cta-final__nota { margin-top: var(--e-m); font-size: var(--t-1); color: var(--texto-3); }

/* ════════════════════════════════════════════════════════
   12. CONTACTO
   ════════════════════════════════════════════════════════ */

.contacto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); }

.datos-lista { display: flex; flex-direction: column; gap: var(--e-m); margin-bottom: var(--e-l); }
.dato { display: flex; align-items: flex-start; gap: var(--e-s); }
.dato__ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-s);
  background: rgba(99,150,60,.12);
  border: 1px solid var(--linea);
  color: var(--verde-medio);
}
.dato h4 { font-size: var(--t-0); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
/* Los teléfonos y el correo son enlaces que se pulsan con el dedo,
   no texto corrido: sin este alto mínimo medían 19px. */
.dato a {
  /* flex y no inline-flex: en caja en línea el min-height lo gana
     la altura de línea y el enlace se quedaba en 42px. width
     fit-content evita que el área táctil abarque toda la columna. */
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
}
.dato a, .dato p, .dato address {
  color: var(--tinta); font-size: var(--t-3); font-weight: var(--w-medio);
  font-style: normal; text-decoration: none; margin-top: 2px;
}
.dato a:hover { color: var(--verde-medio); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */

@media (min-width: 560px) {
  .hero__ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hero__ctas .boton { width: auto; }
  .especies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-final__botones { flex-direction: row; justify-content: center; }
  .cta-final__botones .boton { width: auto; }
}

@media (min-width: 900px) {
  .especies-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clinica-grid { grid-template-columns: 1fr 1.1fr; }
  .contacto-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .hero__flecha { display: block; }
  .razones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .razones .tarjeta:first-child { grid-column: span 3; }
  .servicios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 10 = 3+3+3+1 · la décima se centra en vez de colgar sola */
  .servicios-grid > :last-child:nth-child(10) { grid-column: 2; }
}

@media (min-width: 1280px) {
  .razones .tarjeta:first-child { grid-column: span 1; }
  .razones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .servicios-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equipo-grid    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 10 = 4+4+2 · las dos últimas se centran bajo las cuatro */
  .servicios-grid > :nth-child(10):last-child { grid-column: auto; }
  .servicios-grid > :nth-child(9):nth-last-child(2) { grid-column: 2; }
}

/* ════════════════════════════════════════════════════════
   MOSAICO DE INSTALACIONES
   Todas las áreas visibles a la vez, sin botones. Tile grande
   a la izquierda y cuadrícula de cuatro a la derecha en
   escritorio; columna apilada en móvil.
   ════════════════════════════════════════════════════════ */

.mosaico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-s);
}

.mosaico__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-hoja);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--claro-3);
  box-shadow: var(--s-1);
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

.mosaico__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.96);
  transition: transform var(--dur-4) var(--ease-salida), filter var(--dur-3) var(--ease-suave);
}

/* Velo verde de selva de abajo hacia arriba, para que la
   etiqueta se lea sobre cualquier foto. */
.mosaico__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,36,12,0) 38%,
    rgba(20,36,12,.34) 66%,
    rgba(16,28,10,.86) 100%);
  transition: background var(--dur-3) var(--ease-suave);
}

.mosaico__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--e-m);
}
.mosaico__et {
  display: inline-block;
  font-family: var(--f-display);
  font-variation-settings: var(--fraunces-ejes);
  font-weight: var(--w-fuerte);
  font-size: var(--t-4);
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(16,28,10,.5);
}
.mosaico__item figcaption p {
  color: rgba(255,255,255,.9);
  font-size: var(--t-1);
  margin-top: 2px;
  max-width: 40ch;
}

/* Detalle de selva: marca de hoja en la esquina, siempre visible
   pero discreta; se enciende al pasar el cursor. */
.mosaico__hoja {
  position: absolute; top: var(--e-s); left: var(--e-s);
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 0 100% 0 100%;
  background: var(--verde-vivo);
  opacity: .85;
  transform: rotate(0deg);
  box-shadow: 0 2px 10px rgba(16,28,10,.35);
  transition: transform var(--dur-2) var(--ease-hoja);
}

@media (hover: hover) and (pointer: fine) {
  .mosaico__item:hover img { transform: scale(1.05); filter: saturate(1.06); }
  .mosaico__item:hover::after {
    background: linear-gradient(180deg,
      rgba(62,102,36,.24) 20%,
      rgba(20,36,12,.5) 62%,
      rgba(16,28,10,.9) 100%);
  }
  .mosaico__item:hover .mosaico__hoja { transform: rotate(-18deg) scale(1.1); }
}

.clinica__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-m);
  margin-top: var(--e-xl);
  padding-top: var(--e-l);
  border-top: 1px solid var(--linea);
}

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

@media (min-width: 1000px) {
  /* Mosaico bento: el tile grande ocupa 2×2 y los otros cuatro
     completan la cuadrícula de la derecha (4 columnas, 2 filas). */
  .mosaico {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 232px;
  }
  .mosaico__item { aspect-ratio: auto; }
  .mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
  .mosaico__item--grande .mosaico__et { font-size: var(--t-5); }
}

/* ════════════════════════════════════════════════════════
   RESEÑAS · cierre con botón de Google
   ════════════════════════════════════════════════════════ */

.resenas__cierre {
  display: flex;
  justify-content: center;
  margin-top: var(--e-xl);
}

/* Si el navegador bloquea la reproducción o el archivo falla, se
   oculta el <video> y queda su poster de fondo: nunca un
   rectángulo negro en mitad del hero. */
.hero__foto video.video-bloqueado { opacity: 0; }
.hero__foto video { background: var(--claro-3) center/cover no-repeat; }

/* Nota bajo la retícula de servicios */
.servicios__nota {
  margin-top: var(--e-l);
  padding: var(--e-m);
  border-radius: var(--r-m);
  border: 1px dashed var(--linea-fuerte);
  background: rgba(99,150,60,.06);
  color: var(--texto-2);
  font-size: var(--t-2);
  max-width: none;
}

/* ════════════════════════════════════════════════════════
   MARCAS · alimento y accesorios
   ════════════════════════════════════════════════════════ */

.marcas-grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-m);
}

.marcas-grupo {
  padding: var(--e-l);
  border-radius: var(--r-hoja);
  border: 1px solid var(--linea);
  background: var(--panel);
  box-shadow: var(--s-1);
}
.marcas-grupo h3 {
  display: flex; align-items: center; gap: var(--e-2xs);
  font-size: var(--t-3);
}
.marcas-grupo h3 svg { color: var(--verde-medio); }
.marcas-grupo > p {
  color: var(--texto-2);
  font-size: var(--t-2);
  margin-top: var(--e-2xs);
}

.marcas-lista {
  display: flex; flex-wrap: wrap; gap: var(--e-2xs);
  margin-top: var(--e-m);
}
.marca-chip {
  padding: var(--e-2xs) var(--e-s);
  border-radius: var(--r-pill);
  border: 1px solid var(--linea-fuerte);
  background: rgba(99,150,60,.08);
  color: var(--verde-hondo);
  font-size: var(--t-2);
  font-weight: var(--w-fuerte);
  transition: background-color var(--dur-1) var(--ease-suave),
              transform var(--dur-1) var(--ease-hoja);
}
@media (hover: hover) and (pointer: fine) {
  .marca-chip:hover { background: rgba(99,150,60,.16); transform: translateY(-2px); }
}

@media (min-width: 800px) {
  .marcas-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Referencia de ubicación bajo la dirección */
.dato__ref {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--t-1);
  font-weight: var(--w-normal);
  color: var(--texto-3);
}