:root {
    /* Paleta de colores principal */
    --primary-red: #dc2626;       /* Rojo principal */
    --primary-blue: #1e3a8a;      /* Azul principal */
    --primary-white: #ffffff;     /* Blanco principal */

    /* Variaciones de rojo */
    --red-light: #fecaca;         /* Rojo claro */
    --red-hover: #b91c1c;         /* Rojo hover */
    
    /* Variaciones de azul */
    --blue-light: #bfdbfe;        /* Azul claro */
    --blue-hover: #1e40af;        /* Azul hover */
    
    /* Tonos neutros */
    --neutral-50: #f8fafc;        /* Casi blanco */
    --neutral-100: #f1f5f9;       /* Gris muy claro */
    --neutral-200: #e2e8f0;       /* Gris claro */
    --neutral-800: #1e293b;       /* Gris oscuro */

    /* Variables de uso específico */
    --text-primary: var(--primary-blue);
    --text-secondary: var(--primary-red);
    --background-primary: var(--neutral-50);
    --background-secondary: var(--neutral-100);
    --link-color: var(--primary-blue);
    --link-hover: var(--primary-red);

    /* Variables de transición */
    --header-height: 144px;       /* Altura inicial del header (9rem) */
    --header-height-scroll: 80px; /* Altura del header al hacer scroll (5rem) */
    --header-transition: all 0.3s ease-in-out;
}

/* Estilos base */
body {
    background-color: var(--background-primary);
    color: var(--text-primary);
    font-family: "chivo", system-ui, sans-serif;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Estilos de navegación */
.nav-link {
    color: var(--link-color);
    transition: color 0.2s ease-in-out;
}

.nav-link:hover {
    color: var(--link-hover);
}

/* Gradientes y efectos */
.gradient-bg {
    background: linear-gradient(135deg, 
        rgba(var(--blue-light), 0.95), 
        rgba(var(--primary-white), 0.95));
}

/* Títulos y textos */
.title-primary {
    color: var(--text-primary);
    font-weight: bold;
}

.title-secondary {
    color: var(--text-secondary);
}

/* Botones */
.btn-primary {
    background-color: var(--primary-blue);
    color: var(--primary-white);
    transition: background-color 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--blue-hover);
}

.btn-secondary {
    background-color: var(--primary-red);
    color: var(--primary-white);
    transition: background-color 0.2s ease-in-out;
}

.btn-secondary:hover {
    background-color: var(--red-hover);
}

/* Cards y contenedores */
.card {
    background-color: var(--primary-white);
    border: 1px solid var(--neutral-200);
}

/* Efectos de fondo */
.gradient-overlay {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-blue), 0.15),
        rgba(var(--primary-white), 0)
    );
}

.top_image {
background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%, 
            rgb(250, 250, 245) 100%
          ),
          url('https://pub-e0843711b8494a68b8b33ffd5308a0e5.r2.dev/pan_fondo.png');
height: 320px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: rgb(0, 18, 97);
}

.information{
background: rgb(245, 245, 245)
}

.card_button {
background:  rgb(210, 224, 147);
color: rgb(56, 56, 56);
}

.card_button:hover{
background-color: rgb(222, 248, 106);
}

#about {
scroll-margin-top: 100px; /* Ajusta el valor según necesites */
}

@media (prefers-reduce-motion: reduce){
    html{
        scroll-behavior: auto;
    }
}

/* Header y navegación */
.site-header {
    height: var(--header-height);
    transition: var(--header-transition);
}

.site-header.scrolled {
    height: var(--header-height-scroll);
}

.site-header .logo-container {
    height: calc(var(--header-height) - 16px);
    transition: var(--header-transition);
}

.site-header.scrolled .logo-container {
    height: calc(var(--header-height-scroll) - 16px);
}

.site-header .site-title {
    font-size: 1.25rem;
    transition: var(--header-transition);
}

.site-header.scrolled .site-title {
    font-size: 1rem;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    :root {
        --header-height: 120px;
        --header-height-scroll: 64px;
    }

    .site-header .nav-menu {
        display: none;
    }

    .site-header .mobile-menu-button {
        display: block;
    }

    .mobile-menu {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--primary-white);
        padding: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu.active {
        display: block;
    }

    .mobile-menu .nav-link {
        display: block;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--neutral-200);
    }

    .mobile-menu .nav-link:last-child {
        border-bottom: none;
    }
}