/* 
 * ==========================================
 *  SISTEMA DE DISEÑO: BEATRIZ LIZANA
 * ==========================================
 */

:root {
    /* Paleta de Colores */
    --color-azul-principal: #1C244B;
    --color-turquesa-acento: #19BAB1;
    --color-gris-neutro: #4a5568;
    --color-gris-fondo: #f7fafc;
    --header-h: 96px; 
}

/* Estilos base del cuerpo */
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-azul-principal);
    font-weight: 400; /* Peso normal para párrafos */
}

/* Clases de utilidad para títulos y fondos */
.hero-bg {
    background-color: var(--color-gris-fondo);
}

.section-title {
    font-size: 2.25rem; /* 36px (text-4xl) */
    font-weight: 700;
    color: var(--color-azul-principal);
}

.section-subtitle {
    font-size: 1.125rem; /* 18px (text-lg) */
    color: var(--color-gris-neutro);
    margin-top: 1rem;
    scroll-margin-top: 96px;
}

/* Componentes */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-turquesa-acento);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilos para contenido generado (ej. Markdown) */
.prose h3 {
    font-size: 1.5rem; /* 24px (text-2xl) para títulos en tarjetas */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.prose ul {
    list-style-position: inside;
    padding-left: 1rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

html { 
    scroll-padding-top: 96px; }


section[id] { scroll-margin-top: 96px; }