/* =========================================================
   UTILITIES.CSS
   ---------------------------------------------------------
   Este archivo contiene variables, clases utilitarias y
   estilos comunes que se usan en múltiples componentes.
   Al centralizar estos estilos reducimos la duplicación y
   facilitamos el mantenimiento.
   ========================================================= */

/* Variables de color (ya definidas en Tailwind, pero se
   exponen aquí para uso directo en CSS puro) */
:root {
    --color-brandBlue: #1e40af;
    --color-brandBlueDark: #1e3a8a;
    --color-brandOrange: #f97316;
    --color-brandOrangeDark: #ea580c;
    --color-brandDark: #111827;
    --color-brandLight: #f9fafb;
}

/* Clases utilitarias de color reutilizables */
.brand-blue-bg   { background-color: var(--color-brandBlue); }
.brand-blue-text { color: var(--color-brandBlue); }
.brand-blue-border { border-color: var(--color-brandBlue); }

.brand-orange-bg   { background-color: var(--color-brandOrange); }
.brand-orange-text { color: var(--color-brandOrange); }
.brand-orange-border { border-color: var(--color-brandOrange); }

/* Utilidades de tipografía */
.font-title { font-family: 'Montserrat', sans-serif; }
.font-body  { font-family: 'Open Sans', sans-serif; }

/* Utilidades de espaciado y layout comunes */
.container { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* Utilidades de botones reutilizables */
.btn-primary {
    @apply bg-brandOrange text-white font-title font-bold py-2 px-4 rounded-full hover:bg-brandOrangeDark transition-all;
}

/* Utilidades de tarjetas (beneficios, garantías, etc.) */
.card {
    @apply bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-lg transition-all;
}

/* Utilidades de hover para enlaces de navegación */
.nav-link-active {
    @apply;
}