/* Avatar Harden — estilos base soberanos (sin frameworks, sin CDN).
   Las fuentes van en fonts.css (auto-hospedadas). Los estilos de layout
   viven inline en cada página (fieles al diseño); aquí solo lo global y
   los estados interactivos (:hover/:focus-within) que antes resolvía el runtime. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #faf7f2;
  color: #434652;
  font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #003178; text-decoration: none; }
a:hover { color: #C8102E; }
input::placeholder { color: #6b7280; }
img { max-width: 100%; }

/* Campo de dirección: resalta el borde al enfocar (antes style-focus-within) */
.field:focus-within { border-color: #003178 !important; }

/* Botón CTA: oscurece al pasar el cursor (antes style-hover).
   color:#fff para los CTA que son <a> (si no, a:hover los pondría rojos). */
.cta { transition: background .15s; }
.cta:hover { background: #C8102E !important; color: #fff !important; }

/* Ambigrama AVA↔VAV: gira 180° al pasar el cursor (antes style-hover) */
.ambi { transition: transform 1.1s cubic-bezier(.7,0,.3,1); }
.ambi:hover { transform: rotate(180deg); }

/* Enlace de botón del nav (borde) — conserva color de marca en hover */
.nav-cta:hover { border-color: #C8102E; color: #C8102E; }