/* Primera etapa de la renovación visual. Mantiene tamaños y flujos del diseño existente. */
:root {
    --ing-azul: #163b58;
    --ing-azul-oscuro: #0c2b43;
    --ing-turquesa: #007e89;
    --ing-fondo: #edf3f6;
    --ing-borde: #d6e1e7;
}
body {
    background: var(--ing-fondo);
    color: #243a49;
    font-family: Arial, Helvetica, sans-serif;
}
#general {
    border: 1px solid var(--ing-borde);
    border-radius: 12px;
    box-shadow: 0 12px 38px rgba(17, 49, 70, .10);
}
#cabecera {
    background: #fff;
    border-bottom: 1px solid var(--ing-borde);
}
#logo img { max-width: 100%; height: auto; }
#links a:link, #links a:visited { color: var(--ing-azul); }
#links a:hover, #links a:focus-visible { color: var(--ing-turquesa); }
#menu {
    background: #f4f8fa;
    border: 1px solid var(--ing-borde);
    border-radius: 8px;
}
#menu .titulo, .titulo, .titulolink {
    background: var(--ing-azul);
    color: #fff;
}
#menu .item_menu {
    background: transparent;
    border-color: var(--ing-borde);
}
#menu .item_menu a.principal:link,
#menu .item_menu a.principal:visited {
    color: var(--ing-azul-oscuro);
}
#menu .item_menu a:hover,
#menu .item_menu a:focus-visible {
    color: var(--ing-turquesa);
}
#contenidos .noticia {
    border-bottom: 1px solid var(--ing-borde);
    padding-bottom: 1.1em;
}
#contenidos .titulo_not,
#contenidos .titulo_not a {
    color: var(--ing-azul-oscuro);
}
#contenidos img { max-width: 100%; }
.publicidad, .pub_content { border-color: var(--ing-borde); }
#pie { border-top: 1px solid var(--ing-borde); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ing-turquesa);
    outline-offset: 3px;
}
@media (max-width: 720px) {
    #general { border-radius: 0; box-shadow: none; }
    #cabecera { padding-bottom: .4em; }
}

/* Segunda etapa: legibilidad del contenido y acciones principales. */
#contenidos h1 {
    color: var(--ing-azul);
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 2px solid var(--ing-turquesa);
    padding-bottom: .45em;
    margin-bottom: .8em;
}
#contenidos h2 {
    color: var(--ing-azul);
    font-size: 1.18em;
    font-weight: 600;
    line-height: 1.35;
}
#contenidos .noticia {
    box-sizing: border-box;
    font-size: .86em;
    line-height: 1.5;
    margin: .75em 0;
    padding: 1em 1.1em;
    background: #fff;
    border: 1px solid var(--ing-borde);
    border-radius: 8px;
}
#contenidos .titulo_not { font-size: 1.08em !important; line-height: 1.4; }
#contenidos .button_link {
    display: inline-block;
    background: var(--ing-azul) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: .55em .9em;
    line-height: 1.35;
}
#contenidos .button_link:hover,
#contenidos .button_link:focus-visible {
    background: var(--ing-turquesa) !important;
}
@media (max-width: 720px) {
    #contenidos .noticia { padding: .8em; }
    #contenidos h1 { font-size: 1.3em; }
}

/* Propuesta visual: estructura más amplia y módulos diferenciados. */
:root {
    --ing-azul: #123854;
    --ing-azul-oscuro: #102d43;
    --ing-turquesa: #007a8a;
    --ing-fondo: #e7f0f4;
    --ing-borde: #d5e3eb;
}
body { background: linear-gradient(180deg, #d8eaf0 0, #f2f7f9 380px); }
#general {
    background: #f7fafb;
    border: 1px solid #d4e3e9;
    border-radius: 18px;
    box-shadow: 0 22px 65px rgba(13, 47, 68, .16);
}
#cabecera {
    box-sizing: border-box;
    padding: .65em 1.15em;
    background: #fff;
    border-bottom: 3px solid var(--ing-turquesa);
}
#cabecera #logo { padding: .4em .7em; }
#cabecera #links { padding: .6em .8em 0 !important; }
#imagen {
    box-sizing: border-box;
    background: #edf5f8;
    border-bottom: 1px solid var(--ing-borde);
}
#menu {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ing-borde);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(14, 49, 68, .06);
}
#menu .titulo,
.pub_content .titulo,
.pub_content .titulolink {
    background: var(--ing-azul);
    color: #fff;
    padding: .4em .5em;
    box-sizing: border-box;
}
#menu .item_menu { border-bottom: 1px solid #eaf0f4; padding: .35em .55em; }
#menu .item_menu a.principal { font-weight: 700; color: var(--ing-azul); }
#contenidos { box-sizing: border-box; min-height: 0; }
#contenidos h1 { font-size: 1.65em; margin-bottom: 1em; }
#contenidos .noticia { box-shadow: 0 5px 17px rgba(22, 59, 88, .055); }
.pub_content .publicidad {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ing-borde);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(14, 49, 68, .06);
    overflow: hidden;
}
#pie { background: #e7f0f4; padding: 1.2em 0; }
@media (min-width: 1100px) {
    #general { width: min(96%, 1280px) !important; }
    #menu { width: 21%; margin-left: 1.5%; }
    #contenidos { width: 54% !important; margin-left: 1.25%; margin-right: 0; padding: .15em 1em 2em; }
    .pub_content { float: right; width: 21%; margin-right: 1.25%; box-sizing: border-box; }
    .pub_content .publicidad { float: none !important; width: 100% !important; }
}
@media (max-width: 735px) {
    #general { border-radius: 0; }
    #cabecera { padding: .4em; }
    #contenidos { min-height: 0; }
    .pub_content { float: none; width: 100%; }
}
