/* ============================================================
   VETERINARIA ANDRADE · responsive.css

   Se carga EL ÚLTIMO, así que sus reglas ganan la cascada. Aquí
   solo van ajustes por tamaño de pantalla que necesitan pisar a
   layout.css, components.css o secciones.css.

   Los breakpoints normales (min-width) viven junto al componente
   que ajustan; este archivo es para lo que depende del hueco real
   de la pantalla, alto incluido.

   NOTA: hasta ahora este archivo NO estaba enlazado en el HTML y
   contenía reglas de la Fase 0 que apuntaban a clases ya
   inexistentes (.cabecera__nav, .servicios__grid, .contacto__grid,
   .hero__credibilidad, .sendero__linea). Se retiraron todas: no
   hacían nada y confundían al leer el proyecto.
   ============================================================ */

/* ════════════════════════════════════════════════════════
   HERO EN PANTALLAS PEQUEÑAS
   ════════════════════════════════════════════════════════ */

/* Medido en 360x640 (iPhone SE, Android de gama baja): los botones
   terminaban 146px por debajo del pliegue, así que nadie veía un
   CTA al entrar. En una clínica veterinaria eso es justo lo que no
   puede pasar: quien busca con una mascota enferma quiere el
   teléfono a la vista, no tras un scroll. */
@media (max-width: 900px) {
  /* El logo ya está en la barra fija, justo encima. Repetirlo
     dentro del hero costaba 88px de alto sin aportar nada nuevo. */
  .hero__logo { display: none; }

  .hero { padding-block: 5.5rem var(--e-l); }
  .hero__sub { margin-top: var(--e-xs); }
  .hero__ctas { margin-top: var(--e-m); }
}

/* Pantallas cortas (Android de gama media, iPhone SE moderno). */
@media (max-width: 900px) and (max-height: 700px) {
  .hero { padding-block: 5rem var(--e-m); }
  .hero h1 { margin-top: var(--e-2xs); }
  .hero__sub { font-size: var(--t-2); margin-top: var(--e-2xs); }
  .hero__ctas { margin-top: var(--e-s); gap: var(--e-3xs); }
  .hero__estado { margin-top: var(--e-2xs); }
}

/* Muy cortas (iPhone SE de primera generación, 320x568): medido,
   los CTA seguían asomando 34px por debajo. El subtítulo baja un
   escalón y pierde una línea; sigue siendo legible y a cambio el
   teléfono entra en pantalla. */
@media (max-width: 900px) and (max-height: 620px) {
  .hero { padding-block: 4.25rem var(--e-s); }
  .hero__sub {
    font-size: var(--t-1);
    line-height: 1.5;
    margin-top: var(--e-3xs);
  }
  .hero__ctas { margin-top: var(--e-xs); }
}

/* ════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   ════════════════════════════════════════════════════════ */

/* Medido en 360x640: el botón flotante caía encima del CTA de
   llamar del hero y tapaba 61px. Un toque en esa zona abría
   WhatsApp en lugar de marcar — justo el CTA que más convierte.
   Ahora entra al bajar, igual que la barra inferior; en el hero
   sobra, porque ahí ya hay un botón de WhatsApp a ancho completo. */
@media (max-width: 1023px) {
  .wa-flotante {
    opacity: 0;
    visibility: hidden;
    transform: scale(.7);
    transition: opacity var(--dur-2) var(--ease-suave),
                transform var(--dur-2) var(--ease-hoja),
                visibility var(--dur-2);
  }
  .wa-flotante--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════
   MÓVIL EN HORIZONTAL
   ════════════════════════════════════════════════════════ */

/* Con 390px de alto, tres botones apilados no caben de ninguna
   manera: quedaban 54px por debajo del pliegue. En horizontal sobra
   ancho, así que se ponen en fila y el hero deja de exigir la
   pantalla completa. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 0;
    padding-block: 4.5rem var(--e-m);
  }
  .hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-2xs);
    margin-top: var(--e-s);
  }
  .hero__ctas .boton { width: auto; flex: 0 1 auto; }

  /* El titular se dimensiona con vw, así que en horizontal salía a
     52px —tres líneas y 170px de alto— sin enterarse de que solo
     hay 390px de pantalla. Aquí manda la altura: cuerpo más
     contenido y medida más ancha, que lo deja en dos líneas. */
  .hero h1 {
    font-size: var(--t-5);
    max-width: 30ch;
    margin-top: var(--e-3xs);
  }
  .hero__sub {
    font-size: var(--t-1);
    line-height: 1.5;
    max-width: 60ch;
    margin-inline: auto;
  }
  /* Las estadísticas pueden esperar al scroll. */
  .hero__stats { margin-top: var(--e-m); }
}