/* ============================================================
   VETERINARIA ANDRADE · base.css
   Reset, tipografía por defecto, foco y accesibilidad.
   Mobile first.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100dvh;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  font-weight: var(--w-normal);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Red de seguridad frente a las capas decorativas fijas (rayos
     del dosel, hojas), que son intencionalmente más anchas que el
     viewport y están recortadas por su contenedor. El layout del
     contenido en sí no desborda: se verificó elemento por elemento. */
  overflow-x: clip;
}

img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video, iframe { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
input:not([type='checkbox']):not([type='radio']), select, textarea, button[type='submit'] {
  min-height: var(--tap-min);
  font-size: max(16px, var(--t-2)); /* <16px provoca zoom en iOS */
}
button { background: none; border: none; cursor: pointer; }

p, li { overflow-wrap: break-word; }

/* Los titulares NO se parten a media palabra: antes "no
   convencionales" quedaba como "convencional / es". Se permite
   solo el corte silábico con guion, y únicamente si la palabra
   no cabe de ninguna forma. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

/* ── Tipografía ───────────────────────────────────────────
   Fraunces se reserva a h1/h2 y a .display. En todo lo demás,
   Karla: una serif repartida por toda la página es justo lo
   que hace que un sitio se lea como plantilla. */

h1, h2, .display {
  font-family: var(--f-display);
  font-variation-settings: var(--fraunces-ejes);
  font-weight: var(--w-fuerte);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h1 { font-size: var(--t-8); }
h2 { font-size: var(--t-6); }

h3, h4, h5, h6 {
  font-family: var(--f-texto);
  font-weight: var(--w-fuerte);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  text-wrap: balance;
}
h3 { font-size: var(--t-4); }
h4 { font-size: var(--t-3); }

p { text-wrap: pretty; }
p, li { max-width: var(--medida); }
small { font-size: var(--t-1); }
strong, b { font-weight: var(--w-negro); color: var(--texto); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2xs);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-negro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--verde-medio);
}

/* Punto de hoja antes del eyebrow: micro-detalle de marca */
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 0 100% 0 100%;
  background-color: currentColor;
  flex-shrink: 0;
}

.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }

a {
  color: var(--verde-medio);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--dur-1) var(--ease-suave);
}
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--verde-hondo); }
}

/* ── Foco ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background-color: var(--verde-vivo); color: var(--verde-hondo); }

/* ── Accesibilidad ────────────────────────────────────────── */
.salta-al-contenido {
  position: absolute;
  top: var(--e-s); left: var(--e-s);
  z-index: 200;
  padding: var(--e-xs) var(--e-m);
  background-color: var(--verde);
  color: #FFFFFF;
  font-weight: var(--w-fuerte);
  border-radius: var(--r-s);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--e-l)));
  transition: transform var(--dur-2) var(--ease-salida);
}
.salta-al-contenido:focus { transform: translateY(0); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a[href^='tel:'], a[href*='wa.me'], button, [role='button'] { min-height: var(--tap-min); }
nav ul a, .pie__col ul a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* ── Movimiento reducido ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}