/*
 * SC Servicios Informáticos — Base CSS
 * DS-003 / DS-004: Tipografía base y design tokens
 *
 * Fuentes cargadas:
 *   - Poppins (títulos, H1–H6)
 *   - Inter (cuerpo de texto)
 *
 * PERFORMANCE-001: autoalojadas localmente (static/fonts/), descargadas
 * directamente de fonts.gstatic.com (fuente oficial). Solo el subconjunto
 * "latin" — el único que el copy en español del sitio necesita; se
 * excluyeron cirílico/griego/vietnamita/devanagari deliberadamente. Licencia
 * SIL Open Font License para ambas familias, permite autoalojado.
 * PERFORMANCE-002: se retiró JetBrains Mono — el sitio nunca usa
 * code/kbd/pre/samp, así que la fuente no tenía ningún consumidor real.
 *
 * Este archivo define tokens base del Design System.
 * No aplica aún identidad visual completa a componentes.
 */

/* ------------------------------------------------------------------
   Fuentes autoalojadas (PERFORMANCE-001)
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Design Tokens
   ------------------------------------------------------------------ */

:root {
  /* Colores de marca */
  --color-primary: #143b60;
  --color-primary-deep: #0d2843;
  --color-primary-tint: #f2f5f8;
  --color-secondary: #c7ad63;
  --color-accent: #f97316;

  /* Colores semánticos */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* Escala de grises */
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;

  /* Texto */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-disabled: #9ca3af;
  --text-inverse: #ffffff;

  /* Fondos y superficies */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-section-alt: #f3f4f6;

  /* Tipografía */
  --font-headings: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  --font-size-h1: 3rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.375rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-body: 1rem;
  --font-size-small: 0.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --line-height-small: 1.5;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 1rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(2, 20, 43, 0.07);
  --shadow-soft: 0 4px 24px rgba(2, 20, 43, 0.06);
  --shadow-md: 0 10px 24px rgba(2, 20, 43, 0.12);
  /* MOTION-002 §3: paso intermedio entre soft y lg — el hover de tarjeta
     ya no salta directo al valor más fuerte del sistema. */
  --shadow-hover: 0 14px 32px rgba(2, 20, 43, 0.13);
  --shadow-lg: 0 20px 44px rgba(2, 20, 43, 0.18);

  /* Estados básicos */
  --state-hover-brightness: 0.92;
  --state-active-brightness: 0.85;
  --state-focus-ring-color: #143b60;
  --state-focus-ring-width: 3px;
  --state-focus-ring-offset: 2px;
  --state-disabled-opacity: 0.5;

  /* MOTION-002: sistema único de timing — mismas duraciones y curvas en
     todo el sitio, en vez de valores sueltos por componente. */
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-entrance: 0.6s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------
   Aplicación global base
   ------------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  overflow-x: clip;
}

main {
  /* FINAL-POLISH-001: solo padding-bottom — el padding-top generaba una
     franja blanca entre el header y la primera sección (el Hero, en Home)
     porque el fondo de esa sección empieza justo debajo de su propio borde,
     no del de <main>. padding-bottom se conserva sin cambios. */
  padding-bottom: clamp(var(--space-6), 7vw, var(--space-8));
}

main>section {
  padding-block: clamp(var(--space-5), 6vw, var(--space-7));
}

section>header,
article>header {
  margin-bottom: clamp(var(--space-4), 3vw, var(--space-6));
}

/* Ancho de lectura cómodo para las intros de sección (includes/section_header.html)
   — evita líneas de texto demasiado largas en pantallas anchas. */
main header.row p {
  max-width: 640px;
}

article {
  margin-bottom: var(--space-4);
}

article:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  color: var(--color-primary);
  margin: 0;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
  margin-bottom: var(--space-2);
}

small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

p,
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

ul,
ol {
  padding-left: var(--space-5);
}

/* UX-001 §4: un h3 que sigue justo a una lista (p.ej. "Calidad técnica"
   después de "Funciones reales" en la ficha de OneVet) quedaba pegado a
   ella, sin el aire que sí tienen los saltos entre secciones. */
ul + h3,
ol + h3 {
  margin-top: var(--space-6);
}

footer {
  margin-top: var(--space-6);
  background-color: var(--color-primary);
  border-top: none;
  color: rgba(255, 255, 255, 0.9);
}

footer section {
  margin-bottom: var(--space-4);
}

footer h2,
footer h3 {
  color: var(--text-inverse);
}

footer h2 {
  font-size: var(--font-size-h4);
  margin-bottom: var(--space-3);
}

footer h3 {
  font-size: var(--font-size-h6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

footer p,
footer address,
footer li {
  color: rgba(255, 255, 255, 0.9);
}

footer address {
  font-style: normal;
  line-height: var(--line-height-body);
}

footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

footer li+li {
  margin-top: var(--space-2);
}

footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

footer a:hover,
footer a:focus {
  color: var(--color-secondary);
  text-decoration: underline;
  filter: none;
}

footer .row.pt-3 {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: var(--space-4);
  padding-top: var(--space-4) !important;
}

footer .row.pt-3 p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  footer {
    text-align: center;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}

a {
  color: var(--color-primary);
}

a:hover,
a:focus {
  color: var(--color-primary);
  filter: brightness(var(--state-hover-brightness));
}

a:focus-visible,
.btn:focus-visible {
  outline: var(--state-focus-ring-width) solid var(--state-focus-ring-color);
  outline-offset: var(--state-focus-ring-offset);
}

/* UX-001 §7: el foco navy es invisible sobre fondos navy (navbar, Hero,
   CTA final, footer) — no es un color de marca nuevo, es el mismo
   indicador de foco adaptado para seguir siendo visible ahí. */
.navbar a:focus-visible,
.navbar .btn:focus-visible,
.hero a:focus-visible,
.hero .btn:focus-visible,
.section-cta a:focus-visible,
.section-cta .btn:focus-visible,
footer a:focus-visible {
  outline-color: #fff;
}

.navbar {
  background-color: var(--color-primary);
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-3);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--text-inverse);
  filter: none;
}

.navbar-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

.navbar-nav {
  gap: var(--space-1);
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--color-secondary);
  background-color: rgba(255, 255, 255, 0.1);
  filter: none;
}

.navbar .nav-link:active,
.navbar .nav-link.active {
  color: var(--color-secondary);
  background-color: rgba(255, 255, 255, 0.15);
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  padding: var(--space-2);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
  margin-top: var(--space-3);
}

@media (min-width: 992px) {
  .navbar-collapse {
    margin-top: 0;
  }

  .navbar-nav {
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  .navbar-logo {
    height: 34px;
  }

  .navbar-brand {
    gap: var(--space-1);
    font-size: 0.95rem;
  }
}

.btn {
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
  /* MOTION-002 §4: una sola definición de timing para las tres variantes
     (primary/outline-primary/outline-secondary) — todas heredan de aquí. */
  transition:
    transform var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* MOTION-002 §5: microinteracción del ícono de flecha dentro de un botón —
   se desliza levemente en la dirección de la acción. Nada más se mueve. */
.btn .icon {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.btn:hover .icon-arrow-right,
.btn:focus-visible .icon-arrow-right {
  transform: translateX(3px);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  filter: brightness(var(--state-hover-brightness));
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active,
.btn-primary.active {
  filter: brightness(var(--state-active-brightness));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  filter: brightness(var(--state-active-brightness));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--gray-900);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
  filter: brightness(var(--state-active-brightness));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn:disabled,
.btn.disabled {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.card {
  height: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
  will-change: transform;
}

/* MOTION-002 §5: el ícono decorativo de la tarjeta se eleva un poco más
   que la tarjeta misma — una sensación de profundidad muy leve, sin
   agregar ningún elemento nuevo. */
.card .icon {
  transition: transform var(--duration-base) var(--ease-standard);
}

.card:hover .icon,
.card:focus-within .icon {
  transform: translateY(-2px);
}

/* Tratamiento diferenciado para el producto real destacado (OneVet) —
   misma familia visual, pero con jerarquía propia: superficie con tinte
   navy, acento dorado discreto y más aire interno que una tarjeta genérica. */
.card-featured {
  background-color: var(--color-primary-tint);
  border: 1px solid rgba(20, 59, 96, 0.12);
  border-left: 3px solid var(--color-secondary);
}

.card-featured .card-body {
  padding: var(--space-6);
}

.card:hover,
.card:focus-within {
  /* MOTION-001 §13 -> MOTION-002 §3: -8px, luego -4px, ahora -3px con una
     sombra intermedia (antes saltaba directo a --shadow-lg) — la elevación
     se siente como un ajuste, no como un salto. */
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(20, 59, 96, 0.18);
}

.card-body {
  padding: var(--space-5);
}

@media (hover: none) {
  .card:hover,
  .card:focus-within,
  .btn:hover,
  .btn:focus {
    transform: none;
  }
}

label {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
}

input,
textarea,
select,
.form-control,
.form-select {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  padding: var(--space-2) var(--space-3);
  box-shadow: none;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

textarea,
textarea.form-control {
  min-height: 120px;
}

/* ------------------------------------------------------------------
   ANIM-001: Animaciones On-Scroll
   ------------------------------------------------------------------ */

/**
 * Keyframes para fade-in + slide-up (estilo Apple)
 * Transición suave: 0% opacidad y translateY(20px) → 100% opacidad y translateY(0)
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Keyframes para fade-in (sin movimiento)
 * Respeta prefers-reduced-motion: reduce (sin transform)
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/**
 * Estado inicial: elementos con data-animate no mostrados
 * opacity: 0, transform: translateY(20px) - será animado por JS
 */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
}

/**
 * Estado animado: aplicado por JavaScript vía IntersectionObserver
 * Duración: 0.6s, timing: ease-out, sin delay por defecto
 */
[data-animate].animated {
  /* MOTION-002 §2/§7: misma curva "premium" que el resto del sitio en vez
     de ease-out — la aparición se siente menos mecánica, sin durar más. */
  animation: fadeInUp var(--duration-entrance) var(--ease-premium) forwards;
  /* MOTION-001: stagger genérico — cada contenedor de tarjetas asigna
     --stagger-i por elemento vía JS (scroll-animations.js), en vez de
     reglas nth-of-type fijas limitadas a 3 hijos. */
  animation-delay: calc(var(--stagger-i, 0) * 90ms);
}

/* MOTION-001: entrada de la sección CTA final — mismo lenguaje de
   movimiento, con una escala muy leve (0.98 → 1) además de opacity. */
@keyframes ctaFadeInScale {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.section-cta[data-animate].animated {
  animation: ctaFadeInScale var(--duration-entrance) var(--ease-premium) forwards;
}

/**
 * Respetar preferencia de usuario por animaciones reducidas
 * Mostrar todo el contenido directamente, sin animar ni desplazar.
 */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].animated,
  .hero header > *,
  .hero nav {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Fondos de secciones Home — FINAL-VISUAL-001 / VISUAL-REFINEMENT-002
   Sin fotografías: superficies planas alternadas (blanco / gris claro)
   para Benefits/Sectores, y navy sólido para el Hero/CTA que enmarca
   la página. La separación entre secciones es solo espacio y cambio de
   tono — sin líneas divisorias duras entre ellas.
   ------------------------------------------------------------------ */

.section-benefits,
.section-sectors {
  background-color: var(--color-surface);
}

.section-solutions {
  background-color: var(--color-background);
}

/* Pausa más generosa alrededor del producto real destacado — es el
   momento de la página que merece más aire, no otro bloque más. */
.section-products {
  padding-block: clamp(var(--space-7), 8vw, var(--space-8));
}

.section-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: var(--text-inverse);
}

.section-cta h2,
.section-cta h3,
.section-cta h4,
.section-cta h5,
.section-cta h6 {
  color: var(--text-inverse);
}

.section-cta p {
  color: rgba(255, 255, 255, 0.9);
}

.section-cta .btn-outline-secondary {
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}

.section-cta .btn-outline-secondary:hover,
.section-cta .btn-outline-secondary:focus {
  color: var(--color-primary);
  border-color: var(--text-inverse);
  background-color: var(--text-inverse);
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--text-muted);
}

input:hover,
textarea:hover,
select:hover,
.form-control:hover,
.form-select:hover {
  border-color: var(--gray-500);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  outline: var(--state-focus-ring-width) solid var(--state-focus-ring-color);
  outline-offset: var(--state-focus-ring-offset);
  box-shadow: none;
}

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled {
  background-color: var(--gray-100);
  color: var(--text-disabled);
  border-color: var(--gray-200);
  opacity: 1;
  cursor: not-allowed;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-error);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  outline-color: var(--color-error);
}

.hero {
  /* FINAL-VISUAL-001: fondo plano (degradado navy sutil), sin fotografía.
     Altura definida por el contenido + padding, no por un min-height de
     viewport pensado para una imagen a pantalla completa. */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  padding-block: clamp(4rem, 10vw, 7rem);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* MOTION-001 §3/§7: único acento decorativo con movimiento del sitio —
   un resplandor muy tenue (gradiente radial, sin imagen ni SVG) que se
   desplaza unos pocos píxeles con el scroll. Puramente ambiental, nunca
   compite con el texto ni se mueve por sí solo (parallax vía JS, sin
   animación continua). */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: min(50vw, 640px);
  height: min(50vw, 640px);
  background: radial-gradient(circle, rgba(199, 173, 99, 0.16) 0%, rgba(199, 173, 99, 0) 70%);
  pointer-events: none;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

.hero h1,
.hero p {
  color: #fff;
  position: relative;
}

.hero header,
.hero nav {
  position: relative;
}

/* MOTION-001 §3: entrada escalonada del Hero (eyebrow -> H1 -> subtítulo
   -> CTAs). Corre en la carga de la página vía CSS puro — el Hero está
   siempre en el viewport inicial, así que no depende del IntersectionObserver
   usado para el resto de las secciones (evita una doble animación). */
.hero header > p:first-child,
.hero header > h1,
.hero header > p:last-child,
.hero nav {
  opacity: 0;
  transform: translateY(16px);
  /* MOTION-002 §1: misma duración que antes (sin alargarla), solo la curva
     premium compartida con el resto del sitio. */
  animation: fadeInUp var(--duration-entrance) var(--ease-premium) forwards;
}

/* MOTION-002 §1/§7: mismo intervalo de 90ms que el stagger de tarjetas
   (scroll-animations.js), en vez de valores sueltos — y el conjunto
   termina antes (H1 visible a los 90ms, no 160ms) para que la lectura
   empiece de inmediato. */
.hero header > p:first-child {
  animation-delay: 0ms;
}

.hero header > h1 {
  animation-delay: 90ms;
}

.hero header > p:last-child {
  animation-delay: 180ms;
}

.hero nav {
  animation-delay: 270ms;
}

/* ------------------------------------------------------------------
   UI-002: Responsive spacing refinements
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  main {
    /* FINAL-POLISH-001: solo padding-bottom, mismo motivo que la regla base. */
    padding-bottom: var(--space-6);
  }

  main>section {
    padding-block: var(--space-5);
  }

  .card-body {
    padding: var(--space-3);
  }

  /* UX-001 §6: .card-featured .card-body (2 clases) le ganaba en
     especificidad a esta regla, así que nunca se achicaba en mobile —
     se quedaba en el padding de escritorio (--space-6) y apretaba el
     contenido, provocando que el botón de la tarjeta partiera texto en
     dos líneas en pantallas angostas. */
  .card-featured .card-body {
    padding: var(--space-3);
  }
}

@media (max-width: 767.98px) {
  main {
    /* FINAL-POLISH-001: solo padding-bottom, mismo motivo que la regla base. */
    padding-bottom: var(--space-5);
  }

  main>section {
    padding-block: var(--space-4);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

.hero p {
  max-width: 700px;
}

/* FINAL-VISUAL-001: esta sección duplicaba (y contradecía — pisaba el fondo
   navy de .section-cta definido arriba con un overlay casi blanco) las
   reglas de fondo ya limpiadas. Se conserva únicamente el padding extra
   real del CTA, sin ninguna imagen. */
.section-cta {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}