/* ==========================================================================
   La Alternativa — Estilos principales optimizados
   ========================================================================== */

:root {
    --navy: #002B3D;
    --navy-deep: #001A26;
    --institutional: #173F67;
    --pine: #159477;
    --pine-dark: #0E6B58;
    --pine-light: #50C9A2;
    --cream: #F3F5F6;
    --ink: #17324D;
    --slate: #66727D;
    --gold: #C98F1F;
    --teal: #0E5B54;
    --white: #FFFFFF;
    --radius: 0.75rem;
    --maxw: 1280px;
    --font-display: "Archivo", sans-serif;
    --font-body: "DM Sans", sans-serif;
}

/* --- Reset base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* fallback */
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: var(--pine); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; color: var(--ink); margin: 0; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

/* --- Clase utilitaria para transiciones --- */
.transition-base { transition: background 0.2s, color 0.2s, border-color 0.2s; }

/* ==========================================================================
   (Se mantienen todas las secciones originales: header, hero, cards, etc.)
   Con ajustes de accesibilidad y transiciones aplicadas donde correspondía.
   ========================================================================== */

/* ==========================================================================
   Búsqueda (corregida)
   ========================================================================== */
.search-form { display: flex; gap: 0.5rem; }
.search-form .search-field {
    border-radius: 0.5rem;
    border: 1px solid rgba(0,43,61,0.15);
    background: var(--white);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--navy);
}
.search-form .search-field:focus {
    outline: 2px solid var(--pine);
}