/* --- 1. Configuración Global y Variables --- */
:root {
    --color-azul-loyal: #005DFF; /* Azul principal */
    --color-azul-fondo-link: #EBF4FF; /* Fondo de los botones/links */
    --color-texto-principal: #222222;
    --color-texto-secundario: #555555;
    --color-borde: #DDE3EC;
    --color-fondo-pagina: #f4f4f4; /* Fondo gris claro de la página */
    --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- 2. Reseteo y Estilos Base --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100vh;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo-pagina);
    color: var(--color-texto-principal);
    line-height: 1.6;
    padding: 40px 20px; /* Espacio arriba y abajo */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3. Selector de Idioma --- */
.language-selector {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: 12px;
}

.language-selector a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-texto-secundario);
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.language-selector a:hover {
    background-color: #f0f0f0;
}

.language-selector a.active {
    background-color: var(--color-azul-loyal);
    color: #FFFFFF;
}

/* --- 4. Contenedor Principal del Portal --- */
.portal-container {
    width: 100%;
    max-width: 1200px; /* Ancho máximo del portal */
    background-color: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: 16px; /* Esquinas redondeadas como en la imagen */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 40px 50px; /* Espacio interno */
    margin: 30px auto; /* Margen auto para centrar */
}

/* --- 5. Estilos de Portada (index.html) --- */
.portal-container .logo {
    display: block;
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 10px auto 30px auto; /* Centrado automático */
    text-align: center; /* Asegura centrado por si acaso */
}

.portal-container h1 {
    font-size: 24px; /* 1.5rem */
    font-weight: 600;
    color: var(--color-texto-principal);
    margin-bottom: 16px;
    text-align: center;
}

.portal-container .subtitle {
    font-size: 18px; /* 1.125rem */
    color: var(--color-texto-secundario);
    max-width: 800px;
    margin: 0 auto 40px auto; /* Centrado y con espacio */
    text-align: center;
}

.blocks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 24px; /* Espacio entre las tarjetas */
    text-align: left;
}

.card {
    display: flex;
    flex-direction: column; /* Para alinear el botón abajo */
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid var(--color-borde);
    border-radius: 12px; /* Esquinas redondeadas de las tarjetas */
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.card h3 {
    font-size: 16px; /* 1rem */
    font-weight: 600;
    color: var(--color-texto-principal);
    text-transform: uppercase;
}

.card p {
    font-size: 15px; /* 0.95rem */
    color: var(--color-texto-secundario);
    margin: 12px 0 20px 0;
    flex-grow: 1; /* Empuja el botón al fondo */
}

.card-link {
    display: inline-block;
    align-self: flex-start; /* Alinea el botón a la izquierda */
    background-color: var(--color-azul-fondo-link);
    color: var(--color-azul-loyal);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.card:hover .card-link {
    background-color: #dbeaff; /* Un poco más oscuro al pasar el ratón */
}

/* --- 6. Pie de Página --- */
.site-footer {
    width: 100%;
    max-width: 800px;
    text-align: center;
    margin: 20px auto 0 auto; /* Centra el pie de página */
}

.site-footer p {
    font-size: 12px;
    color: #888888;
    line-height: 1.5;
    margin-bottom: 8px;
}


/* --- 7. ESTILOS PARA PÁGINAS INTERNAS (Faltaban antes) --- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 20px;
    margin-bottom: 30px;
    /* Quitamos el text-align: center del h1 de portada */
    text-align: left; 
}

.page-header h1 {
    margin: 0;
    text-align: right;
    font-size: 22px;
}

.back-link {
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-texto-secundario);
    transition: color 0.2s ease;
}

.back-link:hover {
    color: var(--color-azul-loyal);
}

.page-content {
    max-width: 800px; /* Ancho de lectura cómodo */
    margin: 0 auto; /* Centra el contenido */
    text-align: left;
}

.page-content .page-intro {
    font-size: 18px;
    color: var(--color-texto-secundario);
    margin-bottom: 30px;
    line-height: 1.7;
    text-align: center; /* Centra solo el párrafo de introducción */
}

.page-content h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-texto-principal);
    border-top: 1px solid var(--color-borde);
    padding-top: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.page-content p,
.page-content ol,
.page-content ul {
    font-size: 16px;
    color: var(--color-texto-secundario);
    margin-bottom: 20px;
    line-height: 1.7;
}

.page-content ol,
.page-content ul {
    padding-left: 25px; /* Espacio para los números o bullets */
}

.page-content li {
    margin-bottom: 10px;
}

.page-content strong {
    color: var(--color-texto-principal);
    font-weight: 600;
}

.image-placeholder {
    width: 100%;
    padding: 60px 20px;
    background-color: #f9f9f9;
    border: 2px dashed var(--color-borde);
    border-radius: 8px;
    text-align: center;
    margin-top: 10px;
}

.image-placeholder p {
    margin: 0;
    font-size: 14px;
    color: #999;
}

/* --- 8. ESTILOS NUEVOS PARA EL ACORDEÓN DE FAQs --- */

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--color-borde);
}

.faq-item {
    border-bottom: 1px solid var(--color-borde);
}

.faq-item summary {
    display: block; /* Para que ocupe todo el ancho */
    position: relative;
    padding: 24px 40px 24px 0; /* Espacio para el '+' */
    font-size: 18px;
    font-weight: 600;
    color: var(--color-texto-principal);
    cursor: pointer;
    list-style: none; /* Oculta la flecha por defecto */
    transition: color 0.2s ease;
}

.faq-item summary:hover {
    color: var(--color-azul-loyal);
}

.faq-item summary::-webkit-details-marker {
    display: none; /* Oculta la flecha en Safari/Chrome */
}

/* El icono '+' y '-' */
.faq-item summary::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    color: var(--color-azul-loyal);
}

.faq-item[open] summary::after {
    content: '–'; /* Cambia a un signo menos */
}

.faq-answer {
    padding: 0 10px 24px 0; /* Espaciado de la respuesta */
    color: var(--color-texto-secundario);
    font-size: 16px;
    line-height: 1.7;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
    margin-bottom: 15px;
}

.faq-answer ul,
.faq-answer ol {
    padding-left: 20px;
}

.faq-answer li {
    margin-bottom: 8px;
}


/* --- 9. Diseño Responsivo (Móvil) --- */
@media (max-width: 992px) {
    .blocks-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
    .portal-container {
        padding: 30px 25px;
    }
}

@media (max-width: 768px) {
    /* Mueve el selector de idioma para que no se solape */
    .language-selector {
        position: static; /* Lo saca del flujo absoluto */
        justify-content: center;
        margin: 0 auto 20px auto; /* Lo centra */
        width: fit-content; /* Se ajusta al contenido */
    }
    
    body {
        padding: 20px 10px;
    }

    .portal-container {
        margin-top: 0;
        padding: 20px;
    }

    .blocks-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
    
    .portal-container h1 {
        font-size: 20px;
    }
    
    .portal-container .subtitle {
        font-size: 16px;
    }

    /* Ajustes para páginas interiores en móvil */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .page-header h1 {
        text-align: left;
        font-size: 18px;
    }
    
    /* Ajustes para FAQs en móvil */
    .faq-item summary {
        font-size: 16px;
        padding-right: 30px; /* Más espacio para el icono en móvil */
    }

    .faq-answer {
        font-size: 15px;
    }
}