/* ========================================
   PRINCIPIA INFORMATICA — Stylesheet
   Versión: v.GV.2026.04.02
   ======================================== */


/* ========================================
   PALETA DE COLORES
   Variables centralizadas para consistencia
   y mantenimiento. Los ratios de contraste
   están calculados sobre --fondo (#111).
   ======================================== */

:root {
    --fondo:          #111111;
    --fondo-linea:    #1a1a1a;

    /* Rojo principal — texto funcional (nav, títulos, CTA)
       #dd4d4d sobre #111 = 4.71:1 → WCAG AA texto normal */
    --rojo-texto:     #dd4d4d;

    /* Rojo hover — estado interactivo */
    --rojo-hover:     #e56060;

    /* Rojo gráfico — elementos puramente decorativos
       (isotipo, numerales grandes). Sin requisito de contraste. */
    --rojo-grafico:   #8B1A1A;

    /* Rojo borde — bordes de CTA y acentos lineales
       #c83535 sobre #111 = 3.61:1 → WCAG AA non-text */
    --rojo-borde:     #c83535;

    /* Grises — texto y elementos secundarios */
    --gris-claro:     #dddddd;  /* 13.90:1 — logo, strong en propuesta */
    --gris-texto:     #cccccc;  /* 11.76:1 — color base del body */
    --gris-cuerpo:    #aaaaaa;  /*  8.13:1 — párrafos de contenido */
    --gris-label:     #999999;  /*  6.63:1 — etiquetas, subtítulos */
    --gris-meta:      #888888;  /*  5.33:1 — fechas, breadcrumb */
}


/* ========================================
   FUENTES — hosting local, formato WOFF2
   Sin dependencias externas.
   ======================================== */

/* Cinzel Variable (wght 400–900)
   Uso: logotipo, navegación, títulos, etiquetas.
   Dos subsets: latin cubre español completo;
   latin-ext cubre caracteres latinos adicionales.
   El navegador descarga solo lo que necesita. */

@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel-Variable-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel-Variable-latin-ext.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

/* Lato (static, latin + latin-ext fusionados)
   Uso: cuerpo de texto, párrafos, descripciones. */

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ========================================
   RESET
   ======================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ========================================
   BASE
   Lato como fuente base del documento.
   Cinzel se aplica explícitamente donde
   se necesita (nav, títulos, etiquetas).
   ======================================== */

body {
    background: var(--fondo);
    color: var(--gris-texto);
    font-family: 'Lato', sans-serif;
    min-height: 100vh;
}

::selection {
    background: var(--rojo-grafico);
    color: #eeeeee;
}


/* ========================================
   HEADER
   El header ocupa el ancho completo (fondo y borde).
   El padding dinámico alinea logo y nav con el contenido
   centrado de .site-main (max-width: 960px, padding: 0 48px).
   max() garantiza mínimo 48px en viewports ≤ 1056px.
   ======================================== */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(48px, calc((100% - 960px) / 2 + 48px));
    height: 68px;
    border-bottom: 1px solid var(--fondo-linea);
    position: sticky;
    top: 0;
    background: var(--fondo);
    z-index: 100;
}


/* ========================================
   LOGOTIPO
   ======================================== */

.site-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.isotipo-svg {
    display: block;
    flex-shrink: 0;
    max-height: 54px;
    /* dimensiones controladas por JS en proporción al bloque de texto.
       max-height previene desborde si las fuentes no cargan a tiempo. */
}

/* Logo vectorizado completo (alternativa al isotipo + spans) */
.logo-svg {
    display: block;
    height: 48px;
    width: auto;
}

.logo-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.08;
}

.logo-principia {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    color: var(--gris-claro);
    white-space: nowrap;
    display: block;
}

.logo-informatica {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    /* font-size fijado por JS para igualar exactamente el ancho de .logo-principia */
    letter-spacing: 0.15em;
    color: var(--gris-claro);
    white-space: nowrap;
    display: block;
}


/* ========================================
   NAVEGACIÓN SUPERIOR
   Rojo funcional --rojo-texto para
   legibilidad sobre --fondo.
   --rojo-grafico se reserva para elementos
   decorativos (isotipo, números).
   ======================================== */

.site-nav {
    display: flex;
    align-items: stretch;
    height: 68px;
}

.site-nav a {
    display: flex;
    align-items: center;
    padding: 0 28px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--rojo-texto);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.site-nav a:hover {
    color: var(--rojo-hover);
}

.site-nav a.activo {
    color: var(--rojo-hover);
    border-bottom-color: var(--rojo-texto);
}


/* ========================================
   CONTENIDO PRINCIPAL
   ======================================== */

.site-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 48px;
}


/* ========================================
   ETIQUETA DE SECCIÓN
   Cinzel a 12px (mínimo legible para
   display serif en pantalla).
   ======================================== */

.sec-label {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--gris-label);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
}


/* ========================================
   PROPUESTA DE VALOR (Home)
   ======================================== */

.tagline {
    font-size: 22px;
    font-weight: 700;
    color: var(--gris-claro);
    line-height: 1.85;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 32px;
    text-align: center;
}

.propuesta {
    font-size: 22px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.85;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 44px;
}

.propuesta strong {
    font-weight: 700;
    color: var(--gris-claro);
}


/* ========================================
   MÓDULOS (servicios / especialidades)
   ======================================== */

.modulos {
    display: grid;
    gap: 2px;
    background: var(--fondo-linea);
    margin-bottom: 2px;
}

.modulos.col-1 { grid-template-columns: 1fr; }
.modulos.col-2 { grid-template-columns: 1fr 1fr; }
.modulos.col-3 { grid-template-columns: repeat(3, 1fr); }

.modulo {
    background: var(--fondo);
    padding: 32px 28px;
}

/* Módulo como enlace (listas de observatorio/laboratorio) */
a.modulo {
    display: block;
    text-decoration: none;
}

a.modulo:hover h3 {
    color: var(--rojo-hover);
}

/* Fecha dentro de un módulo-enlace */
.modulo .pub-fecha {
    display: block;
    margin-top: -2px;
    margin-bottom: 12px;
}

.modulo .num {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 28px;
    color: var(--rojo-borde);
    line-height: 1;
    margin-bottom: 14px;
}

.modulo h3 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.5px;
    color: var(--rojo-texto);
    line-height: 1.3;
    margin-bottom: 14px;
}

.modulo p {
    font-size: 18px;
    color: var(--gris-cuerpo);
    line-height: 1.75;
}


/* ========================================
   SEPARADOR
   ======================================== */

hr.sep {
    border: none;
    border-top: 1px solid var(--fondo-linea);
    margin: 32px 0;
}


/* ========================================
   CTA
   Borde subido a --rojo-borde para
   visibilidad suficiente (3.61:1 non-text).
   ======================================== */

.btn-cta {
    display: block;
    width: fit-content;
    margin: 36px auto 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--rojo-texto);
    text-decoration: none;
    background: transparent;
    border: 2px solid var(--rojo-borde);
    padding: 18px 48px;
    transition: border-color 0.3s, color 0.3s;
}

.btn-cta:hover {
    border-color: var(--rojo-texto);
    color: var(--rojo-hover);
}


/* ========================================
   DIRECTOR
   ======================================== */

.dir-nombre {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 4px;
    color: var(--rojo-texto);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
}

.dir-cargo {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gris-label);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 44px;
}

.dir-bio {
    font-size: 18px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.85;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
}

.dir-bio strong {
    font-weight: 700;
    color: var(--gris-texto);
}

/* Frase de cierre — rojo institucional */
.cierre {
    font-size: 18px;
    font-weight: 400;
    color: var(--rojo-texto);
    line-height: 1.85;
    max-width: 600px;
    margin: 36px auto 0;
}


/* ========================================
   TRAYECTORIA
   ======================================== */

.tray-subtitulo {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--gris-label);
    margin-bottom: 24px;
    margin-top: 40px;
}

.tray-item {
    display: flex;
    gap: 32px;
    padding: 18px 0;
    border-top: 1px solid var(--fondo-linea);
}

.tray-item:last-child {
    border-bottom: 1px solid var(--fondo-linea);
}

.tray-anio {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--gris-label);
    min-width: 88px;
    padding-top: 4px;
    flex-shrink: 0;
}

.tray-item p {
    font-size: 16px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.7;
}


/* ========================================
   CONTACTO DIRECTOR
   ======================================== */

.dir-contacto {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--fondo-linea);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.dir-contacto p {
    font-size: 16px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.85;
}

.dir-contacto a {
    color: var(--gris-label);
    text-decoration: none;
    transition: color 0.2s;
}

.dir-contacto a:hover {
    color: var(--gris-texto);
}

.contacto-inline {
    text-align: center;
}

.sep-dot {
    color: var(--rojo-borde);
    margin: 0 10px;
    font-weight: 700;
}

.site-footer .sep-dot {
    color: var(--rojo-borde);
}


/* ========================================
   PUBLICACIONES — LISTA
   ======================================== */

.pub-lista {
    display: block;
}

.pub-lista.oculta {
    display: none;
}

.pub-card {
    display: block;
    text-decoration: none;
    padding: 28px 0;
    border-top: 1px solid var(--fondo-linea);
    cursor: pointer;
}

.pub-card:last-child {
    border-bottom: 1px solid var(--fondo-linea);
}

.pub-card:hover .pub-titulo {
    color: var(--rojo-hover);
}

/* Fila superior: tipo + fecha */
.pub-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.pub-tipo {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--gris-label);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.pub-fecha {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--gris-meta);
    letter-spacing: 1px;
}

.pub-titulo {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--rojo-texto);
    line-height: 1.5;
    margin-bottom: 10px;
    transition: color 0.2s;
}

.pub-resumen {
    font-size: 16px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.65;
    max-width: 580px;
}


/* ========================================
   ARTÍCULO EXPANDIDO (inline, sin página propia)
   ======================================== */

.pub-articulo {
    display: none;
}

.pub-articulo.activo {
    display: block;
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pub-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gris-meta);
    cursor: pointer;
    margin-bottom: 40px;
    transition: color 0.2s;
}

.pub-back::before {
    content: '←';
    font-size: 12px;
}

.pub-back:hover {
    color: var(--gris-cuerpo);
}


/* ========================================
   BREADCRUMB (páginas de artículo)
   ======================================== */

.art-breadcrumb {
    margin-bottom: 36px;
}

.art-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gris-meta);
    text-decoration: none;
    transition: color 0.2s;
}

.art-breadcrumb a::before {
    content: '←';
    font-size: 12px;
}

.art-breadcrumb a:hover {
    color: var(--gris-cuerpo);
}


/* ========================================
   ARTÍCULO — CABECERA
   ======================================== */

.art-tipo {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--gris-label);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.art-titulo {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--rojo-texto);
    line-height: 1.35;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}


/* ========================================
   ARTÍCULO — CUERPO
   Spacing entre párrafos subido a 22px
   para separación visual clara entre
   bloques de texto a 18px/1.85.
   ======================================== */

.art-cuerpo h2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 2px;
    line-height: 1.4;
    color: var(--rojo-texto);
    max-width: 600px;
    margin: 48px auto 14px;
    text-transform: uppercase;
}

.art-cuerpo p {
    font-size: 18px;
    font-weight: 400;
    color: var(--gris-cuerpo);
    line-height: 1.85;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}

.art-cuerpo p strong {
    font-weight: 700;
    color: var(--gris-texto);
}

/* Links inline dentro de artículos */
.art-cuerpo a {
    color: var(--rojo-texto);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.art-cuerpo a:hover {
    color: var(--rojo-hover);
}


/* ========================================
   REFERENCIAS BIBLIOGRÁFICAS
   ======================================== */

.art-refs {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--fondo-linea);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.art-refs p {
    font-size: 13px;
    font-weight: 400;
    color: var(--gris-meta);
    line-height: 1.9;
    max-width: 600px;
    margin-bottom: 0;
}


/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 48px;
    border-top: 1px solid var(--fondo-linea);
}

.site-footer p {
    font-size: 12px;
    font-weight: 400;
    color: var(--gris-meta);
    letter-spacing: 0.5px;
    line-height: 1.8;
    text-align: center;
}

.site-footer a {
    color: var(--gris-meta);
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--gris-cuerpo);
}


/* ========================================
   RESPONSIVE — Tablet (≤ 1024px)
   El padding del header usa la misma lógica max()/calc()
   ajustada al padding de .site-main en tablet (32px).
   ======================================== */

@media (max-width: 1024px) {
    .site-header {
        padding: 0 max(32px, calc((100% - 960px) / 2 + 32px));
    }

    .site-main {
        padding: 64px 32px;
    }

    .site-nav a {
        padding: 0 20px;
    }

    .modulos.col-3 {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer {
        padding: 32px 32px;
    }
}


/* ========================================
   RESPONSIVE — Mobile (≤ 680px)
   Nav: letter-spacing y padding reducidos para que los
   ítems quepan en portrait sin scroll horizontal.
   ======================================== */

@media (max-width: 680px) {
    .site-header {
        padding: 18px 20px 0;
        height: auto;
        flex-wrap: wrap;
        position: static;
    }

    .site-logo {
        margin-bottom: 14px;
    }

    .logo-svg {
        height: 36px;
    }

    .site-nav {
        width: 100%;
        height: auto;
        border-top: 1px solid var(--fondo-linea);
    }

    .site-nav a {
        padding: 12px 14px;
        height: auto;
        font-size: 12px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .site-main {
        padding: 40px 20px;
    }

    .tagline {
        font-size: 18px;
    }

    .propuesta {
        font-size: 18px;
    }

    .dir-bio {
        font-size: 16px;
    }

    .art-cuerpo p {
        font-size: 16px;
    }

    .modulo p,
    .tray-item p,
    .pub-resumen,
    .dir-contacto p {
        font-size: 15px;
    }

    .modulos.col-2,
    .modulos.col-3 {
        grid-template-columns: 1fr;
    }

    .tray-item {
        flex-direction: column;
        gap: 4px;
    }

    .tray-anio {
        min-width: auto;
    }

    .site-footer {
        padding: 24px 20px;
    }
}