/*
Theme Name: Química 2026
Author: Facultad de Ciencias UBB
Description: Tema Departamento de Química 2026
Version: 0.3.0
Text Domain: quimica-2026
*/

:root {
    --q-navy: #062f52;
    --q-navy-2: #08446f;
    --q-blue: #087eb7;
    --q-cyan: #25a9ca;

    --q-purple: #74539b;

    --q-text: #20384c;
    --q-muted: #617688;
    --q-line: #dce6ec;

    --q-soft: #f5f9fb;
    --q-white: #fff;

    --q-width: 1260px;

    --q-radius: 8px;

    --q-shadow:
        0 15px 40px rgba(6,47,82,.09);

    --q-font-scale: 1;
}

* {
    box-sizing: border-box;
}

html {
    font-size: calc(16px * var(--q-font-scale));
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--q-text);
    background: #fff;
    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
    line-height: 1.58;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
}

.q-wrap {
    width: min(
        calc(100% - 42px),
        var(--q-width)
    );
    margin-inline: auto;
}

.q-section {
    padding: 62px 0;
}

.q-kicker {
    margin: 0 0 8px;
    color: var(--q-purple);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.q-heading {
    margin: 0 0 20px;
    color: var(--q-navy);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(1.85rem,3vw,2.75rem);
    line-height: 1.07;
}

.q-link {
    display: inline-block;
    margin-top: 13px;
    color: var(--q-purple);
    font-size: .8rem;
    font-weight: 800;
}

/* ========================================================
   TOP
======================================================== */

.q-top {
    background: var(--q-navy);
    color: rgba(255,255,255,.9);
    font-size: .75rem;
}

.q-top-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.q-top-left,
.q-top-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.q-access {
    display: flex;
}

.q-access button {
    border: 0;
    background: transparent;
    color: white;
    cursor: pointer;
    min-width: 29px;
    height: 28px;
}

/* ========================================================
   HEADER
======================================================== */

.q-header {
    position: relative;
    z-index: 100;
    background: white;
    border-bottom: 1px solid var(--q-line);
}

.q-header-inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.q-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

.q-brand-symbol {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid var(--q-cyan);
    border-radius: 50%;
    color: var(--q-blue);
    font-family: Georgia,serif;
    font-size: 1.8rem;
}

.q-brand-image {
    max-width: 76px;
    max-height: 62px;
    object-fit: contain;
}

.q-brand-copy {
    padding-left: 14px;
    border-left: 1px solid var(--q-line);
}

.q-brand-copy strong {
    display: block;
    color: var(--q-navy);
    font-family: Georgia,serif;
    font-size: 1.05rem;
    line-height: 1.05;
}

.q-brand-copy span {
    color: var(--q-muted);
    font-size: .69rem;
}

.q-nav {
    margin-left: auto;
}

.q-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-nav > ul {
    display: flex;
}

.q-nav li {
    position: relative;
}

.q-nav > ul > li > a {
    min-height: 91px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 3px solid transparent;
    color: #36526a;
    font-size: .79rem;
    font-weight: 650;
}

.q-nav > ul > li:hover > a,
.q-nav > ul > li.current-menu-item > a,
.q-nav > ul > li.current-menu-ancestor > a {
    color: var(--q-blue);
    border-bottom-color: var(--q-purple);
}

.q-nav .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 255px;
    padding: 8px;
    background: white;
    border: 1px solid var(--q-line);
    box-shadow: var(--q-shadow);
}

.q-nav li:hover > .sub-menu,
.q-nav li:focus-within > .sub-menu {
    display: block;
}

.q-nav .sub-menu a {
    display: block;
    padding: 10px 11px;
    border-radius: 4px;
    font-size: .78rem;
}

.q-nav .sub-menu a:hover {
    color: var(--q-blue);
    background: var(--q-soft);
}

.q-mobile {
    display: none;
    margin-left: auto;
    border: 1px solid var(--q-line);
    background: white;
    padding: 9px 12px;
}

/* ========================================================
   HERO
======================================================== */

.q-hero {
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            white 0%,
            white 50%,
            #edf6fa 50%,
            #edf6fa 100%
        );
}

.q-hero-grid {
    min-height: 525px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
}

.q-hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px 66px 65px 0;
}

.q-hero-copy::after {
    content: "θ";
    position: absolute;
    right: 15px;
    top: 8px;
    z-index: 0;
    color: rgba(8,126,183,.055);
    font-family: Georgia,serif;
    font-size: 18rem;
    line-height: 1;
}

.q-hero-copy > * {
    position: relative;
    z-index: 2;
}

.q-hero h1 {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--q-navy);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(3.1rem,5.2vw,5.4rem);
    line-height: .96;
    letter-spacing: -.045em;
}

.q-hero h1 span {
    color: var(--q-blue);
}

.q-hero-copy p {
    max-width: 600px;
    margin: 0 0 29px;
    color: #5a7083;
    font-size: 1.01rem;
}

.q-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.q-button {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    border: 1px solid var(--q-blue);
    border-radius: 5px;
    color: var(--q-blue);
    font-size: .79rem;
    font-weight: 800;
}

.q-button-primary {
    background: var(--q-blue);
    color: white;
}

.q-button-purple {
    color: var(--q-purple);
    border-color: var(--q-purple);
}

/* hero mosaic */

.q-mosaic {
    min-height: 525px;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    background: white;
}

.q-mosaic-item {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #b8dce9,
            #3c80a9
        );
}

.q-mosaic-item:first-child {
    grid-row: 1 / span 2;
}

.q-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.q-mosaic-item:hover img {
    transform: scale(1.025);
}

.q-mosaic-empty {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.65),
            transparent 18%
        ),
        linear-gradient(
            135deg,
            #b9dce9,
            #347da8
        );
}

/* ========================================================
   DIRECT LINKS
======================================================== */

.q-direct {
    background:
        linear-gradient(
            90deg,
            #f9fbfc,
            #edf6f9
        );
    border-bottom: 1px solid var(--q-line);
}

.q-direct-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.q-direct a {
    min-height: 95px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-right: 1px solid #cedde5;
}

.q-direct a:last-child {
    border-right: 0;
}

.q-direct strong {
    display: block;
    color: var(--q-navy);
    font-family: Georgia,serif;
    font-size: 1.08rem;
}

.q-direct span {
    color: var(--q-muted);
    font-size: .73rem;
}

.q-direct b {
    color: var(--q-purple);
    font-size: 1.4rem;
}

/* ========================================================
   INTRO / NEWS
======================================================== */

.q-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .78fr 1.12fr;
    gap: 18px;
}

.q-box {
    overflow: hidden;
    border: 1px solid var(--q-line);
    border-radius: var(--q-radius);
    background: white;
}

.q-box-padding {
    padding: 28px;
}

.q-box p {
    color: var(--q-muted);
    font-size: .88rem;
}

.q-box-photo {
    height: 160px;
    background: #dcecf3;
}

.q-box-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.q-quick {
    display: grid;
    gap: 5px;
}

.q-quick a {
    position: relative;
    padding: 10px 32px 10px 12px;
    background: #f8fafc;
    border: 1px solid #e4edf2;
    color: #36536c;
    font-size: .76rem;
    font-weight: 650;
}

.q-quick a::after {
    content: "›";
    position: absolute;
    right: 12px;
    color: var(--q-purple);
    font-size: 1.2rem;
}

.q-news-image {
    width: 100%;
    aspect-ratio: 16/7;
    object-fit: cover;
    border-radius: 5px;
}

.q-news h3 {
    margin: 13px 0 6px;
    color: var(--q-navy);
    font-family: Georgia,serif;
    font-size: 1.27rem;
    line-height: 1.15;
}

.q-news-date {
    color: var(--q-muted);
    font-size: .68rem;
}

.q-news-small {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--q-line);
}

.q-news-small a {
    display: block;
    padding: 6px 0;
    color: #36536c;
    font-size: .76rem;
}

/* ========================================================
   RESEARCH
======================================================== */

.q-research {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(37,169,202,.17),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            var(--q-navy-2),
            #042743
        );
    color: white;
}

.q-research::after {
    content: "θ";
    position: absolute;
    right: -20px;
    bottom: -150px;
    color: rgba(255,255,255,.035);
    font-family: Georgia,serif;
    font-size: 26rem;
}

.q-research .q-heading {
    color: white;
}

.q-research-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 28px;
}

.q-research-head p {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,.73);
}

.q-research-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.q-research-card {
    overflow: hidden;
    background: white;
    color: var(--q-text);
    border-radius: 6px;
}

.q-research-card-photo {
    height: 150px;
    background:
        linear-gradient(
            135deg,
            #b8dbe8,
            #4385a9
        );
}

.q-research-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.q-research-card-body {
    padding: 21px;
}

.q-research-card h3 {
    margin: 0 0 7px;
    color: var(--q-navy);
    font-family: Georgia,serif;
    font-size: 1.25rem;
}

.q-research-card p {
    margin: 0;
    color: var(--q-muted);
    font-size: .78rem;
}

/* ========================================================
   SPLIT SECTIONS
======================================================== */

.q-split {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 35px;
    align-items: center;
}

.q-split-reverse {
    grid-template-columns: 1.08fr .92fr;
}

.q-photo-large {
    min-height: 330px;
    overflow: hidden;
    border-radius: 7px;
    background:
        linear-gradient(
            135deg,
            #dcecf3,
            #84bad0
        );
}

.q-photo-large img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
}

.q-content-list {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.q-content-list a {
    padding: 15px 17px;
    border-left: 3px solid var(--q-cyan);
    background: var(--q-soft);
    color: #36536c;
    font-size: .8rem;
    font-weight: 700;
}

.q-content-list a:nth-child(even) {
    border-left-color: var(--q-purple);
}

/* ========================================================
   PEOPLE
======================================================== */

.q-people {
    background: #f6f9fb;
}

.q-people-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
}

.q-people-preview {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.q-person-photo {
    overflow: hidden;
    min-height: 220px;
    background:
        linear-gradient(
            135deg,
            #ddebf1,
            #77adc4
        );
}

.q-person-photo img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* ========================================================
   CTA + FOOTER
======================================================== */

.q-cta {
    padding: 38px 0;
    background:
        linear-gradient(
            110deg,
            var(--q-navy-2),
            var(--q-navy)
        );
    color: white;
}

.q-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.q-cta h2 {
    margin: 0;
    font-family: Georgia,serif;
}

.q-cta p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.72);
}

.q-footer {
    padding: 42px 0 18px;
    background: #03253e;
    color: rgba(255,255,255,.77);
}

.q-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 45px;
}

.q-footer h3 {
    color: white;
    font-family: Georgia,serif;
}

.q-footer p,
.q-footer li {
    font-size: .76rem;
}

.q-footer ul {
    padding: 0;
    list-style: none;
}

.q-footer-bottom {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.11);
    font-size: .68rem;
}

/* ========================================================
   INTERNAL PAGES
======================================================== */

.q-page-head {
    padding: 54px 0 38px;
    background:
        linear-gradient(
            135deg,
            #eef6f9,
            white
        );
    border-bottom: 1px solid var(--q-line);
}

.q-page-head h1 {
    max-width: 1000px;
    margin: 0;
    color: var(--q-navy);
    font-family: Georgia,serif;
    font-size: clamp(2.3rem,5vw,4.3rem);
    line-height: 1;
}

.q-content {
    padding: 48px 0 70px;
}

.q-content article {
    max-width: 1000px;
}

.q-content h2,
.q-content h3,
.q-content h4 {
    color: var(--q-navy);
    font-family: Georgia,serif;
}

.q-content a {
    color: var(--q-blue);
    text-decoration: underline;
}

.q-content img {
    max-width: 100%;
    height: auto;
}

/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 1060px) {

    .q-brand-copy {
        display: none;
    }

    .q-nav > ul > li > a {
        padding-inline: 7px;
        font-size: .72rem;
    }

    .q-intro-grid {
        grid-template-columns: 1fr 1fr;
    }

    .q-news {
        grid-column: 1/-1;
    }
}

@media (max-width: 820px) {

    .q-top-left span:nth-child(n+2),
    .q-top-right > a {
        display: none;
    }

    .q-mobile {
        display: block;
    }

    .q-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: var(--q-shadow);
    }

    .q-nav.open {
        display: block;
    }

    .q-nav > ul {
        display: block;
        padding: 10px 20px;
    }

    .q-nav > ul > li > a {
        min-height: auto;
        padding: 11px 5px;
        border-bottom: 1px solid var(--q-line);
    }

    .q-nav .sub-menu {
        display: block;
        position: static;
        width: auto;
        border: 0;
        box-shadow: none;
        padding-left: 15px;
    }

    .q-hero {
        background: white;
    }

    .q-hero-grid {
        grid-template-columns: 1fr;
    }

    .q-hero-copy {
        padding: 55px 0;
    }

    .q-mosaic {
        min-height: 400px;
    }

    .q-direct-grid {
        grid-template-columns: 1fr 1fr;
    }

    .q-intro-grid,
    .q-research-grid,
    .q-split,
    .q-split-reverse {
        grid-template-columns: 1fr;
    }

    .q-news {
        grid-column: auto;
    }

    .q-research-head,
    .q-people-head,
    .q-cta-inner {
        display: block;
    }

    .q-people-preview {
        grid-template-columns: 1fr 1fr;
    }

    .q-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .q-wrap {
        width: calc(100% - 28px);
    }

    .q-header-inner {
        min-height: 74px;
    }

    .q-hero h1 {
        font-size: 2.75rem;
    }

    .q-mosaic {
        min-height: 340px;
    }

    .q-direct-grid {
        grid-template-columns: 1fr;
    }

    .q-direct a {
        border-right: 0;
        border-bottom: 1px solid #cedde5;
    }

    .q-people-preview {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ===== QUIMICA 2026 V03 REFERENCE ===== */

/*
 * REFERENCIA VISUAL:
 * - header compacto
 * - hero aprox. 390 px desktop
 * - más contenido visible en primer pantallazo
 * - Outfit para UI/texto
 * - Merriweather para titulares editoriales
 */

html {
    font-size: calc(15px * var(--q-font-scale));
}

body,
button,
input,
select,
textarea {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
}

/* ---------------------------------------------------------
   TOP BAR
--------------------------------------------------------- */

.q-top {
    font-family: 'Outfit', sans-serif;
}

.q-top-inner {
    min-height: 31px;
}

.q-top {
    font-size: 11.5px;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.q-header-inner {
    min-height: 68px;
}

.q-brand {
    gap: 12px;
}

.q-brand-image {
    max-width: 66px;
    max-height: 52px;
}

.q-brand-symbol {
    width: 43px;
    height: 43px;
    font-size: 1.45rem;
}

.q-brand-copy {
    padding-left: 12px;
}

.q-brand-copy strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.08;
}

.q-brand-copy span {
    font-size: 11px;
}

.q-nav > ul > li > a {
    min-height: 67px;
    padding: 0 10px;

    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.q-hero-grid {
    min-height: 385px;
    height: 385px;
}

.q-hero-copy {
    padding:
        38px
        47px
        38px
        0;
}

.q-hero-copy::after {
    font-size: 12rem;
    top: 13px;
    right: 13px;
}

.q-kicker {
    margin-bottom: 10px;

    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .16em;
}

.q-hero h1 {
    max-width: 590px;

    margin:
        0
        0
        14px;

    font-family:
        'Merriweather',
        Georgia,
        serif;

    /*
     * Mucho más cerca de la proporción
     * de la referencia.
     */
    font-size:
        clamp(
            38px,
            3.55vw,
            56px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -.032em;
}

.q-hero h1 span {
    color: var(--q-navy);
}

.q-hero-copy p {
    max-width: 520px;

    margin:
        0
        0
        18px;

    font-family: 'Outfit', sans-serif;

    font-size: 15px;
    line-height: 1.38;

    color: #5b6d82;
}

.q-buttons {
    gap: 9px;
}

.q-button {
    min-height: 39px;

    padding:
        0
        18px;

    font-family: 'Outfit', sans-serif;

    font-size: 12px;
    font-weight: 600;

    border-radius: 4px;
}

/* ---------------------------------------------------------
   MOSAICO HERO
--------------------------------------------------------- */

.q-mosaic {
    min-height: 385px;
    height: 385px;

    grid-template-columns:
        .95fr
        1.35fr
        .92fr;

    grid-template-rows:
        1fr
        1fr;
}

/*
 * Primera imagen: frasco alto.
 */
.q-mosaic-item:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/*
 * Segunda imagen: sector superior central.
 */
.q-mosaic-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/*
 * Tercera imagen: sector inferior central.
 */
.q-mosaic-item:nth-child(3) {
    grid-column: 2 / span 2;
    grid-row: 2;
}

/*
 * Se crea visualmente una cuarta columna/fondo
 * mediante el propio contenedor para evitar que
 * el mosaico quede excesivamente abierto.
 */
.q-mosaic::after {
    content: "θ";

    grid-column: 3;
    grid-row: 1;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            140deg,
            #e8f2f7,
            #d3e6ef
        );

    color:
        rgba(
            8,
            126,
            183,
            .38
        );

    font-family:
        Georgia,
        serif;

    font-size: 92px;
    font-style: italic;
}

.q-mosaic-item img {
    object-position: center;
}

/* ---------------------------------------------------------
   SECCIÓN INMEDIATA BAJO HERO
--------------------------------------------------------- */

.q-direct-grid {
    min-height: 108px;
}

.q-direct a {
    min-height: 108px;

    padding:
        16px
        20px;
}

.q-direct strong {
    font-family: 'Outfit', sans-serif;

    font-size: 15px;
    font-weight: 700;
}

.q-direct span {
    font-size: 11px;
    line-height: 1.35;
}

/* ---------------------------------------------------------
   TÍTULOS RESTO DE PORTADA
--------------------------------------------------------- */

.q-heading {
    font-family:
        'Merriweather',
        Georgia,
        serif;

    font-weight: 900;

    font-size:
        clamp(
            25px,
            2.2vw,
            34px
        );

    line-height: 1.08;
}

.q-news h3,
.q-research-card h3 {
    font-family: 'Outfit', sans-serif;
}

.q-section {
    padding:
        43px
        0;
}

/* ---------------------------------------------------------
   INVESTIGACIÓN
--------------------------------------------------------- */

.q-research {
    padding-top: 38px;
    padding-bottom: 38px;
}

.q-research .q-heading {
    font-size:
        clamp(
            27px,
            2.5vw,
            38px
        );
}

.q-research-card-photo {
    height: 130px;
}

.q-research-card-body {
    padding: 16px 18px;
}

/* ---------------------------------------------------------
   PÁGINAS INTERIORES
--------------------------------------------------------- */

.q-page-head {
    padding:
        38px
        0
        30px;
}

.q-page-head h1 {
    font-family:
        'Merriweather',
        Georgia,
        serif;

    font-size:
        clamp(
            32px,
            4vw,
            52px
        );

    font-weight: 900;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1080px) {

    .q-nav > ul > li > a {
        padding: 0 6px;
        font-size: 11px;
    }

    .q-hero h1 {
        font-size: 43px;
    }
}

@media (max-width: 820px) {

    .q-header-inner {
        min-height: 68px;
    }

    .q-hero-grid {
        height: auto;
        min-height: 0;
    }

    .q-hero-copy {
        padding:
            38px
            0
            32px;
    }

    .q-hero h1 {
        max-width: 620px;
        font-size: 42px;
    }

    .q-mosaic {
        min-height: 330px;
        height: 330px;
    }
}

@media (max-width: 520px) {

    .q-top-inner {
        min-height: 29px;
    }

    .q-header-inner {
        min-height: 64px;
    }

    .q-hero-copy {
        padding:
            31px
            0
            27px;
    }

    .q-hero h1 {
        font-size: 34px;
        line-height: 1.06;
    }

    .q-hero-copy p {
        font-size: 14px;
    }

    .q-mosaic {
        height: 270px;
        min-height: 270px;
    }

    .q-mosaic::after {
        font-size: 64px;
    }
}


/* ===== QUIMICA 2026 V04 PORTADA REFERENCIA ===== */

:root{
    --q-blue-strong:#0c5ebf;
}

body,
button,
input,
select,
textarea{
    font-family:'Outfit',sans-serif;
}

.q-heading,
.q-page-head h1,
.q-hero h1{
    font-family:'Merriweather',serif;
}

.q-home{
    background:#fff;
}

/* HERO */
.q-ref-hero{
    background:linear-gradient(90deg,#f8fbfe 0 50%,#eef6fb 50% 100%);
    overflow:hidden;
}
.q-ref-hero__grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    min-height:390px;
}
.q-ref-hero__copy{
    padding:28px 36px 26px 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}
.q-ref-hero__copy::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 26%, rgba(8,126,183,.08) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 38%, rgba(8,126,183,.08) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 48%, rgba(8,126,183,.08) 0 2px, transparent 3px),
        linear-gradient(rgba(8,126,183,.08),rgba(8,126,183,.08));
    background-size:120px 120px,120px 120px,120px 120px,1px 1px;
    opacity:.4;
    pointer-events:none;
}
.q-ref-hero__crumbs{
    margin-bottom:10px;
    color:#9aa8ba;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    position:relative;
    z-index:1;
}
.q-ref-hero__crumbs span{
    margin:0 8px;
}
.q-ref-hero__copy h1{
    margin:0 0 12px;
    max-width:610px;
    color:var(--q-navy);
    font-size:clamp(34px,3.9vw,58px);
    font-weight:900;
    line-height:1.06;
    letter-spacing:-.04em;
    position:relative;
    z-index:1;
}
.q-ref-hero__copy p{
    max-width:520px;
    margin:0 0 18px;
    color:#5f6f81;
    font-size:15px;
    line-height:1.45;
    position:relative;
    z-index:1;
}
.q-ref-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    position:relative;
    z-index:1;
}

.q-ref-btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:4px;
    border:1px solid var(--q-blue);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:.18s ease;
}
.q-ref-btn:hover{
    opacity:.92;
}
.q-ref-btn--primary{
    background:var(--q-blue);
    color:#fff;
}
.q-ref-btn--ghost{
    background:#fff;
    color:var(--q-blue);
}

.q-ref-mosaic{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:4px;
    min-height:390px;
    background:#fff;
}
.q-ref-mosaic > div{
    overflow:hidden;
    background:#d9ebf4;
}
.q-ref-mosaic img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.q-ref-mosaic__a{
    grid-column:1;
    grid-row:1 / span 2;
}
.q-ref-mosaic__b{
    grid-column:2;
    grid-row:1;
}
.q-ref-mosaic__c{
    grid-column:3;
    grid-row:1;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#f7fbfe 0%,#dcebf3 100%);
}
.q-ref-mosaic__symbol{
    color:rgba(12,94,191,.28);
    font-family:'Merriweather',serif;
    font-size:108px;
    font-style:italic;
    line-height:1;
}
.q-ref-mosaic__d{
    grid-column:2;
    grid-row:2;
}
.q-ref-mosaic__e{
    grid-column:3;
    grid-row:2;
}

/* SUMMARY BAND */
.q-ref-summary{
    background:#fff;
    border-top:1px solid #e5edf3;
    border-bottom:1px solid #e5edf3;
}
.q-ref-summary__grid{
    display:grid;
    grid-template-columns:1fr 1.2fr 1.15fr;
}
.q-ref-summary__block{
    padding:24px 28px 22px;
    border-right:1px solid #dce8ef;
}
.q-ref-summary__block:last-child{
    border-right:0;
}
.q-ref-summary__head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}
.q-ref-summary__head h2{
    margin:0;
    color:var(--q-navy);
    font-size:16px;
    font-weight:800;
}
.q-ref-summary__icon{
    width:22px;
    height:22px;
    color:var(--q-blue);
}
.q-ref-summary__icon svg{
    width:100%;
    height:100%;
    display:block;
}

.q-ref-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
}
.q-ref-stat{
    padding-right:18px;
    margin-right:18px;
    border-right:1px solid #dce8ef;
}
.q-ref-stat:last-child{
    border-right:0;
    margin-right:0;
    padding-right:0;
}
.q-ref-stat__num{
    color:var(--q-navy);
    font-size:21px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:6px;
}
.q-ref-stat__label{
    color:#4d6b82;
    font-size:12px;
    line-height:1.35;
}
.q-ref-stat__small{
    color:#8a9caf;
    font-size:11px;
    line-height:1.3;
}

.q-ref-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 22px;
}
.q-ref-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#355a7a;
    font-size:12px;
    font-weight:600;
    padding:3px 0;
}
.q-ref-links a::after{
    content:"›";
    color:var(--q-blue);
    font-size:18px;
    line-height:1;
}

.q-ref-summary__text{
    margin:0 0 10px;
    color:#5a6d81;
    font-size:13px;
    line-height:1.45;
}
.q-ref-summary__more{
    color:var(--q-blue);
    font-size:13px;
    font-weight:700;
}

/* NEWS */
.q-ref-news{
    padding:18px 0 30px;
    background:#f7fafc;
}
.q-ref-news__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px;
}
.q-ref-news__top h2{
    margin:0;
    color:var(--q-blue);
    font-size:15px;
    font-weight:800;
    letter-spacing:.18em;
}
.q-ref-news__top a{
    color:var(--q-blue);
    font-size:13px;
    font-weight:700;
}
.q-ref-news__grid{
    display:grid;
    grid-template-columns:1.8fr .95fr;
    gap:18px;
}
.q-ref-news__featured{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    background:#fff;
    border:1px solid #e3ebf1;
    border-radius:8px;
    overflow:hidden;
}
.q-ref-news__featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:220px;
}
.q-ref-news__featured-copy{
    padding:18px 18px 14px;
}
.q-ref-news__tag{
    display:inline-block;
    margin-bottom:10px;
    padding:4px 8px;
    background:#1f80ff;
    color:#fff;
    font-size:10px;
    font-weight:800;
    border-radius:12px;
    letter-spacing:.08em;
}
.q-ref-news__featured-copy h3{
    margin:0 0 10px;
    color:var(--q-navy);
    font-size:18px;
    font-weight:800;
    line-height:1.25;
}
.q-ref-news__featured-copy h3 a{
    color:inherit;
}
.q-ref-news__featured-copy p{
    margin:0 0 18px;
    color:#5f7286;
    font-size:13px;
    line-height:1.5;
}
.q-ref-news__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.q-ref-news__meta span{
    color:#8b9caf;
    font-size:11px;
}
.q-ref-news__meta a{
    color:var(--q-blue);
    font-size:13px;
    font-weight:700;
}

.q-ref-news__list{
    display:grid;
    gap:10px;
}
.q-ref-news__item{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:10px;
    align-items:stretch;
}
.q-ref-news__thumb{
    border-radius:6px;
    overflow:hidden;
    min-height:72px;
    background:#dcebF5;
}
.q-ref-news__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.q-ref-news__item-copy{
    padding:2px 0;
}
.q-ref-news__micro{
    color:#a14fff;
    font-size:10px;
    font-weight:800;
    margin-bottom:4px;
    text-transform:uppercase;
}
.q-ref-news__item-copy h4{
    margin:0;
    color:var(--q-navy);
    font-size:14px;
    line-height:1.35;
    font-weight:700;
}

/* LOWER CONTENT */
.q-ref-research{
    padding:28px 0;
    background:linear-gradient(135deg,#083a63,#072847);
    color:#fff;
}
.q-ref-research__grid{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr 1fr;
    gap:14px;
    align-items:stretch;
}
.q-ref-research__intro h2{
    margin:0 0 8px;
    font-family:'Merriweather',serif;
    font-size:42px;
    font-weight:900;
    line-height:1.05;
    color:#fff;
}
.q-ref-research__intro p{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.5;
}
.q-ref-card{
    background:#fff;
    color:var(--q-navy);
    border-radius:8px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.q-ref-card__icon{
    width:24px;
    height:24px;
    color:#6f47ff;
}
.q-ref-card__icon svg{
    width:100%;
    height:100%;
}
.q-ref-card strong{
    font-size:18px;
    line-height:1.2;
}
.q-ref-card span:last-child{
    color:#62768a;
    font-size:13px;
    line-height:1.45;
}

.q-ref-duo{
    padding:28px 0;
    background:#fff;
}
.q-ref-duo__grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr .9fr 1.1fr;
    gap:18px;
    align-items:center;
}
.q-ref-duo__col h2{
    margin:0 0 10px;
    color:var(--q-navy);
    font-size:31px;
    font-family:'Merriweather',serif;
    font-weight:900;
    line-height:1.08;
}
.q-ref-duo__col p{
    margin:0 0 14px;
    color:#5c7084;
    font-size:14px;
    line-height:1.5;
}
.q-ref-mini-links{
    display:grid;
    gap:10px;
}
.q-ref-mini-links a{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--q-blue);
    font-size:13px;
    font-weight:700;
}
.q-ref-mini-links a span{
    width:18px;
    height:18px;
    color:var(--q-blue);
}
.q-ref-mini-links svg{
    width:100%;
    height:100%;
}
.q-ref-duo__image{
    min-height:240px;
    background:#e7f1f7;
    border-radius:8px;
    overflow:hidden;
}
.q-ref-duo__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.q-ref-team{
    padding:8px 0 34px;
    background:#fff;
}
.q-ref-team__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
}
.q-ref-team__head h2{
    margin:0;
    color:var(--q-navy);
    font-size:30px;
    font-family:'Merriweather',serif;
    font-weight:900;
}
.q-ref-team__head a{
    color:var(--q-blue);
    font-size:13px;
    font-weight:700;
}
.q-ref-team__grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}
.q-ref-team__photo{
    min-height:150px;
    background:#eef4f8;
    border:1px solid #e1e9ef;
    border-radius:8px;
    overflow:hidden;
}
.q-ref-team__photo img{
    width:100%;
    height:170px;
    object-fit:cover;
}

/* FOOTER compact remains existing theme */

/* RESPONSIVE */
@media (max-width:1100px){
    .q-ref-summary__grid,
    .q-ref-news__grid,
    .q-ref-research__grid,
    .q-ref-duo__grid{
        grid-template-columns:1fr 1fr;
    }
    .q-ref-team__grid{
        grid-template-columns:repeat(3,1fr);
    }
}
@media (max-width:820px){
    .q-ref-hero__grid,
    .q-ref-summary__grid,
    .q-ref-news__grid,
    .q-ref-research__grid,
    .q-ref-duo__grid{
        grid-template-columns:1fr;
    }
    .q-ref-news__featured{
        grid-template-columns:1fr;
    }
    .q-ref-mosaic{
        min-height:300px;
    }
    .q-ref-team__grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media (max-width:520px){
    .q-ref-hero__copy{
        padding:24px 0 20px;
    }
    .q-ref-hero__copy h1{
        font-size:34px;
    }
    .q-ref-summary__block{
        padding:18px 16px;
    }
    .q-ref-stats{
        grid-template-columns:1fr;
        gap:12px;
    }
    .q-ref-stat{
        margin-right:0;
        padding-right:0;
        border-right:0;
        padding-bottom:12px;
        border-bottom:1px solid #dce8ef;
    }
    .q-ref-stat:last-child{
        border-bottom:0;
        padding-bottom:0;
    }
    .q-ref-links{
        grid-template-columns:1fr;
    }
    .q-ref-team__grid{
        grid-template-columns:1fr;
    }
}

/* ===== QUIMICA 2026 V05 INVESTIGACION ===== */

.q-invest {
    position: relative;
    overflow: hidden;

    padding:
        24px
        0
        26px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(3, 38, 68, .92),
            rgba(4, 53, 91, .86)
        ),
        url('assets/images/fondo_invest.png')
        center center / cover
        no-repeat;
}


/* ========================================================
   HEADER DEL BLOQUE
======================================================== */

.q-invest__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 16px;
}

.q-invest__intro {
    display: flex;
    align-items: baseline;

    gap: 24px;
}

.q-invest__intro h2 {
    margin: 0;

    font-family:
        'Merriweather',
        Georgia,
        serif;

    font-size: 33px;
    font-weight: 900;
    line-height: 1;

    color: #fff;
}

.q-invest__intro p {
    max-width: 480px;

    margin: 0;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 12px;
    line-height: 1.4;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );
}

.q-invest__all {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 9px;

    padding-bottom: 2px;

    color: #fff;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 11px;
    font-weight: 500;
}

.q-invest__all span {
    font-size: 17px;
}


/* ========================================================
   LAYOUT
======================================================== */

.q-invest__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 3.15fr)
        minmax(210px, .95fr);

    gap: 18px;
}

.q-invest__cards {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}


/* ========================================================
   CARDS
======================================================== */

.q-invest-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #fff;

    border-radius: 5px;

    box-shadow:
        0 4px 14px
        rgba(0, 15, 35, .12);

    color: var(--q-navy);
}

.q-invest-card__image {
    height: 142px;

    overflow: hidden;

    background: #dce9f2;
}

.q-invest-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.q-invest-card__body {
    min-height: 98px;

    display: grid;

    grid-template-columns:
        42px
        1fr
        31px;

    align-items: center;

    gap: 10px;

    padding:
        12px
        11px
        12px
        13px;
}

.q-invest-card__icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #974bff;
}

.q-invest-card__icon--blue {
    color: var(--q-blue);
}

.q-invest-card__icon svg {
    width: 38px;
    height: 38px;
}

.q-invest-card__copy {
    min-width: 0;
}

.q-invest-card__copy strong {
    display: block;

    margin-bottom: 4px;

    color: #092d6a;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.q-invest-card__copy span {
    display: block;

    color: #708196;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 10.5px;
    line-height: 1.35;
}

.q-invest-card__arrow {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e9f2fa;

    color: var(--q-blue);

    font-size: 16px;

    transition:
        transform .15s ease,
        background .15s ease;
}

.q-invest-card:hover
.q-invest-card__arrow {
    transform:
        translateX(2px);

    background: #dcecf8;
}


/* ========================================================
   PANEL DERECHO
======================================================== */

.q-invest__areas {
    padding:
        0
        4px
        0
        5px;
}

.q-invest__areas h3 {
    margin:
        0
        0
        7px;

    color: #fff;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 15px;
    font-weight: 700;
}

.q-invest__areas-line {
    height: 1px;

    margin-bottom: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.42),
            rgba(255,255,255,.05)
        );
}

.q-invest__areas ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.q-invest__areas li {
    display: grid;

    grid-template-columns:
        13px
        1fr
        13px;

    align-items: center;

    gap: 4px;

    min-height: 27px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    color:
        rgba(
            255,
            255,
            255,
            .9
        );

    font-family:
        'Outfit',
        sans-serif;

    font-size: 11px;
}

.q-invest__areas li span,
.q-invest__areas li b {
    color: #fff;

    font-size: 18px;
    font-weight: 400;

    line-height: 1;
}

.q-invest__areas li b {
    text-align: right;
}


/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 1000px) {

    .q-invest__layout {
        grid-template-columns: 1fr;
    }

    .q-invest__areas {
        padding-top: 7px;
    }

    .q-invest__areas ul {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        column-gap: 20px;
    }

}

@media (max-width: 760px) {

    .q-invest__top {
        display: block;
    }

    .q-invest__intro {
        display: block;
    }

    .q-invest__intro h2 {
        margin-bottom: 8px;
    }

    .q-invest__intro p {
        margin-bottom: 10px;
    }

    .q-invest__cards {
        grid-template-columns: 1fr;
    }

    .q-invest-card {
        display: grid;

        grid-template-columns:
            145px
            1fr;
    }

    .q-invest-card__image {
        height: 100%;
        min-height: 120px;
    }

    .q-invest__areas ul {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {

    .q-invest-card {
        display: block;
    }

    .q-invest-card__image {
        height: 155px;
    }

    .q-invest-card__body {
        min-height: 90px;
    }

}


/* ===== QUIMICA 2026 V06 DOCENCIA FOOTER ===== */


/* ==========================================================
   FONDO CLARO SUPERIOR / HERO
========================================================== */

.q-ref-hero {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.91) 0%,
            rgba(255,255,255,.88) 49.5%,
            rgba(255,255,255,0) 49.5%,
            rgba(255,255,255,0) 100%
        ),
        url('assets/images/top_fondo.png')
        left center / 52% 100%
        no-repeat,
        #f5f9fc;
}

.q-ref-hero__copy {
    background: transparent;
}

.q-ref-hero__copy::after {
    display: none;
}


/* ==========================================================
   DOCENCIA + INSTRUMENTACIÓN
========================================================== */

.q-di {
    position: relative;

    padding:
        25px
        0
        24px;

    background:
        linear-gradient(
            rgba(255,255,255,.86),
            rgba(255,255,255,.86)
        ),
        url('assets/images/top_fondo.png')
        center center / cover
        no-repeat;
}

.q-di__grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 0;
}

.q-di__block {
    min-width: 0;

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    align-items: stretch;

    min-height: 255px;
}

.q-di__block:first-child {
    padding-right: 21px;

    border-right:
        1px solid
        rgba(8,126,183,.15);
}

.q-di__block:last-child {
    padding-left: 22px;
}

.q-di__content {
    min-width: 0;

    padding:
        7px
        20px
        8px
        0;
}

.q-di__title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 12px;
}

.q-di__title-icon {
    flex: 0 0 auto;

    width: 27px;
    height: 27px;

    color: var(--q-blue);
}

.q-di__title-icon svg {
    width: 100%;
    height: 100%;

    display: block;
}

.q-di__title h2 {
    margin: 0;

    color: var(--q-navy);

    font-family:
        'Outfit',
        sans-serif;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.15;
}

.q-di__intro {
    margin:
        0
        0
        15px;

    color: #687b8f;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 11.5px;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   DOCENCIA LINKS
---------------------------------------------------------- */

.q-di__links {
    display: grid;

    gap: 12px;
}

.q-di__links a {
    display: grid;

    grid-template-columns:
        33px
        1fr;

    align-items: center;

    gap: 8px;

    color: var(--q-blue);
}

.q-di__link-icon {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    padding: 5px;

    border-radius: 50%;

    background:
        rgba(8,126,183,.07);

    color: var(--q-blue);
}

.q-di__link-icon svg {
    width: 100%;
    height: 100%;
}

.q-di__links strong {
    display: block;

    margin-bottom: 2px;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 12.5px;
    font-weight: 700;
}

.q-di__links small {
    display: block;

    color: #7d8fa1;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 9.5px;
    line-height: 1.3;
}


/* ----------------------------------------------------------
   IMÁGENES
---------------------------------------------------------- */

.q-di__photo {
    position: relative;

    overflow: hidden;

    min-height: 245px;

    border-radius: 4px;

    background: #e9f2f7;
}

.q-di__photo img {
    width: 100%;
    height: 100%;

    min-height: 245px;

    display: block;

    object-fit: cover;
}

.q-di__photo-link {
    position: absolute;

    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        7px
        11px;

    background:
        rgba(255,255,255,.94);

    color: var(--q-blue);

    font-family:
        'Outfit',
        sans-serif;

    font-size: 10px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   HPLC
---------------------------------------------------------- */

.q-di__hplc {
    margin-bottom: 2px;

    color: #103589;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 25px;
    font-weight: 800;

    line-height: 1;
}

.q-di__hplc-sub {
    margin-bottom: 12px;

    color: #123c80;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 10.5px;
    font-weight: 600;

    line-height: 1.25;
}

.q-di__button {
    min-height: 35px;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    padding:
        0
        15px;

    border-radius: 3px;

    background: var(--q-blue);

    color: #fff;

    font-family:
        'Outfit',
        sans-serif;

    font-size: 11px;
    font-weight: 700;
}


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

.q-footer {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(2,35,62,.94),
            rgba(3,48,82,.88)
        ),
        url('assets/images/pie_pagina.png')
        center center / cover
        no-repeat;

    color:
        rgba(
            255,
            255,
            255,
            .88
        );
}

.q-footer::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(1,28,50,.2),
            rgba(1,28,50,.08)
        );
}

.q-footer > * {
    position: relative;
    z-index: 1;
}

.q-footer h3 {
    color: #fff;
}

.q-footer a {
    color:
        rgba(
            255,
            255,
            255,
            .88
        );
}

.q-footer a:hover {
    color: #fff;
}


/*
 * Si existe bloque CTA anterior al footer,
 * usamos la misma imagen para hacer la transición
 * visual como en la referencia.
 */
.q-cta {
    background:
        linear-gradient(
            90deg,
            rgba(3,48,82,.92),
            rgba(5,78,128,.82)
        ),
        url('assets/images/pie_pagina.png')
        center top / cover
        no-repeat;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .q-di__grid {
        grid-template-columns: 1fr;
    }

    .q-di__block:first-child {
        padding-right: 0;

        padding-bottom: 24px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(8,126,183,.15);
    }

    .q-di__block:last-child {
        padding:
            24px
            0
            0;
    }

}

@media (max-width: 700px) {

    .q-di__block {
        grid-template-columns: 1fr;
    }

    .q-di__content {
        padding:
            5px
            0
            20px;
    }

    .q-di__photo {
        min-height: 250px;
    }

    .q-di__photo img {
        min-height: 250px;
    }

    .q-di__hplc {
        font-size: 23px;
    }

}


/* ===== QUIMICA 2026 V07 HERO FONDO ===== */

/*
 * La imagen top_fondo.png ya es muy clara.
 * Por eso NO debe cubrirse con una máscara blanca fuerte.
 */

.q-ref-hero {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,.20) 35%,
            rgba(255,255,255,.34) 48%,
            rgba(238,246,251,0) 50%,
            rgba(238,246,251,0) 100%
        ),
        url('assets/images/top_fondo.png')
        left center / 50% 100%
        no-repeat,
        #eef6fb;
}


/*
 * El bloque izquierdo queda transparente.
 * Antes visualmente se percibía como una caja blanca.
 */

.q-ref-hero__copy {
    background: transparent !important;
}


/*
 * No agregar otra capa blanca sobre la imagen.
 */

.q-ref-hero__copy::after {
    display: none !important;
}


/*
 * Un poco más de definición para que texto y fondo
 * convivan sin volver a tapar la gráfica molecular.
 */

.q-ref-hero__copy h1 {
    position: relative;
    z-index: 2;

    text-shadow:
        0 1px 0 rgba(255,255,255,.20);
}

.q-ref-hero__copy p,
.q-ref-hero__crumbs,
.q-ref-hero__actions {
    position: relative;
    z-index: 2;
}


/*
 * Dejamos visible especialmente el margen izquierdo
 * y la zona detrás/alrededor del encabezado.
 */

@media (min-width: 821px) {

    .q-ref-hero {
        background-size:
            50% 100%,
            50% 100%,
            auto;
    }

}


/*
 * En móvil la imagen puede ocupar todo el ancho,
 * pero sigue siendo muy tenue.
 */

@media (max-width: 820px) {

    .q-ref-hero {
        background:
            linear-gradient(
                rgba(255,255,255,.25),
                rgba(255,255,255,.25)
            ),
            url('assets/images/top_fondo.png')
            center center / cover
            no-repeat;
    }

}


/* ===== QUIMICA 2026 V08 TYPOGRAPHY ===== */


/* ==========================================================
   BASE
========================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family:
        'Manrope',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

body {
    font-weight: 400;

    letter-spacing: -.006em;
}


/* ==========================================================
   HERO PRINCIPAL
========================================================== */

.q-ref-hero__copy h1 {
    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-weight: 700;

    letter-spacing: -.038em;

    line-height: 1.025;
}


/*
 * La palabra "Química" conserva el color
 * pero no necesita una fuente diferente.
 */

.q-ref-hero__crumbs {
    font-family:
        'Manrope',
        sans-serif;

    font-weight: 700;

    letter-spacing: .145em;
}

.q-ref-hero__copy p {
    font-family:
        'Manrope',
        sans-serif;

    font-weight: 400;

    letter-spacing: -.012em;
}

.q-ref-btn {
    font-family:
        'Manrope',
        sans-serif;

    font-weight: 700;

    letter-spacing: -.01em;
}


/* ==========================================================
   NAVEGACIÓN
========================================================== */

.q-nav > ul > li > a,
.q-nav .sub-menu a {
    font-family:
        'Manrope',
        sans-serif;

    font-weight: 600;

    letter-spacing: -.012em;
}

.q-brand-copy strong,
.q-brand-copy span {
    font-family:
        'Manrope',
        sans-serif;
}


/* ==========================================================
   TÍTULOS GENERALES
========================================================== */

.q-heading,
.q-page-head h1,
.q-invest__intro h2,
.q-ref-research__intro h2,
.q-ref-duo__col h2,
.q-ref-team__head h2 {
    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-weight: 700;

    letter-spacing: -.025em;
}


/* ==========================================================
   TÍTULOS FUNCIONALES
========================================================== */

.q-ref-summary__head h2,
.q-news h3,
.q-ref-news__featured-copy h3,
.q-ref-news__item-copy h4,
.q-invest-card__copy strong,
.q-di__title h2,
.q-di__hplc,
.q-ref-card strong {
    font-family:
        'Manrope',
        sans-serif;
}


/* ==========================================================
   INVESTIGACIÓN
========================================================== */

.q-invest__intro h2 {
    font-size: 34px;

    line-height: 1;

    letter-spacing: -.027em;
}

.q-invest-card__copy strong {
    font-weight: 700;

    letter-spacing: -.015em;
}

.q-invest__areas h3,
.q-invest__areas li {
    font-family:
        'Manrope',
        sans-serif;
}


/* ==========================================================
   DOCENCIA / INSTRUMENTACIÓN
========================================================== */

.q-di__title h2 {
    font-weight: 700;

    letter-spacing: -.018em;
}

.q-di__hplc {
    font-weight: 800;

    letter-spacing: -.035em;
}

.q-di__hplc-sub,
.q-di__intro,
.q-di__links strong,
.q-di__links small {
    font-family:
        'Manrope',
        sans-serif;
}


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

.q-footer,
.q-footer h3,
.q-footer a,
.q-footer p,
.q-footer li {
    font-family:
        'Manrope',
        sans-serif;
}


/* ==========================================================
   PÁGINAS INTERIORES
========================================================== */

.q-page-head h1 {
    line-height: 1.04;

    letter-spacing: -.032em;
}

.q-content {
    font-family:
        'Manrope',
        sans-serif;
}

.q-content h2,
.q-content h3,
.q-content h4 {
    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-weight: 700;

    letter-spacing: -.02em;
}


/* ===== QUIMICA 2026 V09 TEAM ===== */

.q-team {
    padding:
        22px
        0
        30px;

    background: #fff;
}

.q-team__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;

    padding-bottom: 9px;

    border-bottom:
        1px solid
        #e1e9ef;
}

.q-team__head h2 {
    margin: 0;

    color: var(--q-navy);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: -.025em;
}

.q-team__head-links {
    display: flex;
    gap: 18px;
}

.q-team__head-links a {
    color: var(--q-blue);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 12px;
    font-weight: 700;
}

.q-team__grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}

.q-team-card {
    min-height: 86px;

    display: grid;

    grid-template-columns:
        62px
        1fr;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border:
        1px solid
        #e2eaf0;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f7fafc
        );
}

.q-team-card__avatar {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #e3f1f8,
            #c7e3f0
        );

    color: var(--q-blue);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 18px;
    font-weight: 800;
}

.q-team-card__content h3 {
    margin:
        0
        0
        3px;

    color: var(--q-navy);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;
}

.q-team-card__content p {
    margin: 0;

    color: #708196;

    font-family:
        'Manrope',
        sans-serif;

    font-size: 10.5px;
    line-height: 1.35;
}


/* que el séptimo quede bien distribuido */

.q-team-card:last-child {
    grid-column: auto;
}


@media (max-width: 1000px) {

    .q-team__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 580px) {

    .q-team__head {
        display: block;
    }

    .q-team__head-links {
        margin-top: 8px;
    }

    .q-team__grid {
        grid-template-columns: 1fr;
    }

}


/* ===== QUIMICA 2026 V10 EQUIPO ===== */

.q-team-v10 {
    padding:
        25px
        0
        30px;

    background: #fff;
}

.q-team-v10__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 13px;
}

.q-team-v10__head h2 {
    margin: 0;

    color: var(--q-navy);

    font-family:
        'Source Serif 4',
        serif;

    font-size: 30px;
    font-weight: 700;

    line-height: 1;
}

.q-team-v10__head > a {
    color: var(--q-blue);

    font-size: 12px;
    font-weight: 700;
}

.q-team-v10__tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 13px;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        #dde8ef;
}

.q-team-v10__tab {
    padding:
        7px
        12px;

    border: 0;

    border-radius: 4px;

    background: #f0f5f8;

    color: #536e83;

    cursor: pointer;

    font-family:
        'Manrope',
        sans-serif;

    font-size: 11px;
    font-weight: 700;
}

.q-team-v10__tab.is-active {
    background: var(--q-blue);
    color: #fff;
}

.q-team-v10__panel {
    display: none;
}

.q-team-v10__panel.is-active {
    display: block;
}

.q-team-v10__cards {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 10px;
}

.q-team-v10__card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        56px
        minmax(0,1fr);

    gap: 11px;

    align-items: start;

    padding: 11px;

    border:
        1px solid
        #e0e9ef;

    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fafc
        );
}

.q-team-v10__avatar {
    width: 54px;
    height: 62px;

    display: grid;
    place-items: center;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #dff0f8,
            #c9e5f1
        );

    color: var(--q-blue);

    font-size: 17px;
    font-weight: 800;
}

.q-team-v10__data {
    min-width: 0;
}

.q-team-v10__data h3 {
    margin:
        0
        0
        3px;

    color: var(--q-navy);

    font-size: 12.5px;
    font-weight: 800;

    line-height: 1.25;
}

.q-team-v10__role {
    min-height: 26px;

    margin:
        0
        0
        6px;

    color: #738497;

    font-size: 9.7px;
    line-height: 1.35;
}

.q-team-v10__email,
.q-team-v10__phone {
    display: block;

    overflow: hidden;

    color: var(--q-blue);

    font-size: 9.5px;
    font-weight: 600;

    line-height: 1.45;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.q-team-v10__phone {
    color: #5d7287;
}

@media (max-width: 1050px) {

    .q-team-v10__cards {
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media (max-width: 560px) {

    .q-team-v10__head {
        display: block;
    }

    .q-team-v10__head > a {
        display: inline-block;
        margin-top: 9px;
    }

    .q-team-v10__cards {
        grid-template-columns: 1fr;
    }

}


/* ===== QUIMICA 2026 V10B EQUIPO ===== */

.q-team-v10 {
    padding: 24px 0 30px;
    background: #fff;
}

.q-team-v10__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 13px;
}

.q-team-v10__head h2 {
    margin: 0;
    color: var(--q-navy);
    font-family: 'Source Serif 4', serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
}

.q-team-v10__head-links {
    display: flex;
    gap: 18px;
}

.q-team-v10__head-links a {
    color: var(--q-blue);
    font-size: 11px;
    font-weight: 700;
}

.q-team-v10__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dde8ef;
}

.q-team-v10__tab {
    padding: 7px 12px;
    border: 0;
    border-radius: 4px;
    background: #f0f5f8;
    color: #536e83;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.q-team-v10__tab.is-active {
    background: var(--q-blue);
    color: #fff;
}

.q-team-v10__panel {
    display: none;
}

.q-team-v10__panel.is-active {
    display: block;
}

.q-team-v10__cards {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 10px;
}

.q-team-v10__card {
    min-width: 0;
    display: grid;
    grid-template-columns:
        55px minmax(0,1fr);
    gap: 11px;
    align-items: start;
    padding: 11px;
    border: 1px solid #e0e9ef;
    border-radius: 6px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fafc
        );
}

.q-team-v10__avatar {
    width: 54px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background:
        linear-gradient(
            145deg,
            #dff0f8,
            #c9e5f1
        );
    color: var(--q-blue);
    font-size: 17px;
    font-weight: 800;
}

.q-team-v10__data {
    min-width: 0;
}

.q-team-v10__data h3 {
    margin: 0 0 3px;
    color: var(--q-navy);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
}

.q-team-v10__role {
    min-height: 26px;
    margin: 0 0 6px;
    color: #738497;
    font-size: 9.7px;
    line-height: 1.35;
}

.q-team-v10__email,
.q-team-v10__phone {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.45;
}

.q-team-v10__email {
    color: var(--q-blue);
}

.q-team-v10__phone {
    color: #5d7287;
}

@media (max-width: 1050px) {

    .q-team-v10__cards {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media (max-width: 560px) {

    .q-team-v10__head {
        display: block;
    }

    .q-team-v10__head-links {
        margin-top: 9px;
    }

    .q-team-v10__cards {
        grid-template-columns: 1fr;
    }
}


/* ===== QUIMICA 2026 V11 GLOBAL SCALE ===== */

:root {
    --q-global-scale: 1;
}

/*
 * Escala visual completa:
 * texto, iconos, botones, paddings,
 * tarjetas y demás contenido.
 *
 * A diferencia de cambiar sólo font-size,
 * esto reproduce mejor el comportamiento
 * que se buscó en DMAT.
 */

body {
    zoom: var(--q-global-scale);
}


/*
 * Firefox no implementa zoom de la misma forma.
 * Fallback con escala completa.
 */

@supports not (zoom: 1) {

    body {
        zoom: initial;

        transform:
            scale(
                var(--q-global-scale)
            );

        transform-origin:
            top left;

        width:
            calc(
                100%
                /
                var(--q-global-scale)
            );
    }
}


/* Botones accesibilidad */

.q-access button {
    min-width: 31px;

    padding: 0 6px;

    font-size: 12px;
    font-weight: 700;

    border-radius: 3px;

    transition:
        background .15s ease,
        opacity .15s ease;
}

.q-access button:hover {
    background:
        rgba(
            255,
            255,
            255,
            .12
        );
}

.q-access button:disabled {
    opacity: .35;
    cursor: default;
}


/* ===== QUIMICA 2026 V11B GLOBAL SCALE ===== */

:root {
    --q-global-scale: 1;
}

/*
 * El cambio afecta TODO:
 * texto, imágenes, tarjetas, botones,
 * espacios, iconos, header, footer, etc.
 */

body {
    zoom: var(--q-global-scale);
}


/*
 * Firefox: fallback.
 */

@supports not (zoom: 1) {

    body {
        zoom: initial;

        transform:
            scale(
                var(--q-global-scale)
            );

        transform-origin:
            top left;
    }
}


/*
 * Botones superiores.
 * No dependemos de la clase HTML actual.
 */

[data-q-font-control] {
    transition:
        background .15s ease,
        opacity .15s ease;
}

[data-q-font-control]:hover {
    background:
        rgba(255,255,255,.14) !important;
}

[data-q-font-control]:disabled {
    opacity: .32 !important;
    cursor: default !important;
}


/* ===== QUIMICA 2026 V12 EDITORIAL MOSAIC ===== */


/* ==========================================================
   GRID
========================================================== */

.q-editorial-mosaic {
    position: relative;

    display: grid;

    grid-template-columns:
        1.05fr
        .94fr
        .83fr;

    grid-template-rows:
        1fr
        1fr;

    gap: 4px;

    height: 100%;
    min-height: 390px;

    background: #fff;
}


/*
 * Grande izquierda.
 */
.q-editorial-mosaic__main {
    grid-column: 1;
    grid-row: 1 / span 2;
}


/*
 * Superior central.
 */
.q-editorial-mosaic__top {
    grid-column: 2;
    grid-row: 1;
}


/*
 * Inferior central.
 */
.q-editorial-mosaic__bottom {
    grid-column: 2;
    grid-row: 2;
}


/*
 * Inferior derecha.
 */
.q-editorial-mosaic__side {
    grid-column: 3;
    grid-row: 2;
}


/*
 * θ fija arriba derecha.
 */
.q-editorial-mosaic__theta {
    grid-column: 3;
    grid-row: 1;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #e8f4fa,
            #cce4f1
        );
}

.q-editorial-mosaic__theta span {
    color:
        rgba(
            8,
            126,
            183,
            .35
        );

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: 92px;
    font-weight: 600;

    font-style: italic;

    line-height: 1;
}


/* ==========================================================
   ITEMS CLICKEABLES
========================================================== */

.q-editorial-mosaic__item {
    position: relative;

    overflow: hidden;

    display: block;

    min-width: 0;

    background:
        linear-gradient(
            135deg,
            #d8eaf3,
            #9fc9db
        );

    color: #fff;

    text-decoration: none;
}

.q-editorial-mosaic__item img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.001);

    transition:
        transform .45s ease,
        filter .35s ease;
}


/*
 * Oscurecimiento estable abajo.
 * Así el texto sigue siendo legible
 * independientemente de la fotografía.
 */

.q-editorial-mosaic__shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,26,47,.03) 30%,
            rgba(2,26,47,.22) 58%,
            rgba(2,26,47,.84) 100%
        );

    transition:
        background .25s ease;
}


/* ==========================================================
   TEXTO
========================================================== */

.q-editorial-mosaic__caption {
    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    padding:
        14px
        14px
        13px;

    color: #fff;
}

.q-editorial-mosaic__category {
    display: inline-block;

    margin-bottom: 5px;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );

    font-family:
        'Manrope',
        sans-serif;

    font-size: 8.5px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.q-editorial-mosaic__caption strong {
    display: -webkit-box;

    overflow: hidden;

    max-width: 92%;

    color: #fff;

    font-family:
        'Manrope',
        sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.26;

    letter-spacing: -.01em;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.q-editorial-mosaic__main
.q-editorial-mosaic__caption {
    padding:
        18px
        17px
        16px;
}

.q-editorial-mosaic__main
.q-editorial-mosaic__category {
    font-size: 9px;
}

.q-editorial-mosaic__main
.q-editorial-mosaic__caption strong {
    max-width: 94%;

    font-size: 15px;

    line-height: 1.28;
}

.q-editorial-mosaic__arrow {
    position: absolute;

    right: 13px;
    bottom: 12px;

    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .16
        );

    color: #fff;

    font-size: 14px;

    opacity: 0;

    transform:
        translateX(-5px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.q-editorial-mosaic__item:hover img,
.q-editorial-mosaic__item:focus-visible img {
    transform:
        scale(1.045);

    filter:
        saturate(1.05);
}

.q-editorial-mosaic__item:hover
.q-editorial-mosaic__shade,
.q-editorial-mosaic__item:focus-visible
.q-editorial-mosaic__shade {
    background:
        linear-gradient(
            180deg,
            rgba(2,26,47,.04) 23%,
            rgba(2,26,47,.30) 53%,
            rgba(2,26,47,.90) 100%
        );
}

.q-editorial-mosaic__item:hover
.q-editorial-mosaic__arrow,
.q-editorial-mosaic__item:focus-visible
.q-editorial-mosaic__arrow {
    opacity: 1;

    transform:
        translateX(0);

    background:
        rgba(
            255,
            255,
            255,
            .22
        );
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.q-editorial-mosaic__empty {
    background:
        linear-gradient(
            145deg,
            #dcecf4,
            #aacddb
        );
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .q-editorial-mosaic {
        min-height: 330px;
    }

    .q-editorial-mosaic__caption strong {
        font-size: 11px;
    }

    .q-editorial-mosaic__main
    .q-editorial-mosaic__caption strong {
        font-size: 14px;
    }

}


@media (max-width: 620px) {

    .q-editorial-mosaic {
        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            1.25fr
            .9fr
            .9fr;

        min-height: 620px;
    }

    .q-editorial-mosaic__main {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .q-editorial-mosaic__top {
        grid-column: 1;
        grid-row: 2;
    }

    .q-editorial-mosaic__theta {
        grid-column: 2;
        grid-row: 2;
    }

    .q-editorial-mosaic__bottom {
        grid-column: 1;
        grid-row: 3;
    }

    .q-editorial-mosaic__side {
        grid-column: 2;
        grid-row: 3;
    }


    /*
     * En móvil no depender de hover:
     * flecha siempre disponible.
     */

    .q-editorial-mosaic__arrow {
        opacity: 1;
        transform: none;
    }

}


@media (prefers-reduced-motion: reduce) {

    .q-editorial-mosaic__item img,
    .q-editorial-mosaic__arrow {
        transition: none;
    }

    .q-editorial-mosaic__item:hover img,
    .q-editorial-mosaic__item:focus-visible img {
        transform: none;
    }

}


/* ===== QUIMICA 2026 V14 LOGO SCROLL ===== */

/* ----------------------------------------------------------
   LOGO
---------------------------------------------------------- */

.q-brand-image {
    width: 76px !important;
    height: 76px !important;

    max-width: 76px !important;
    max-height: 76px !important;

    object-fit: contain !important;

    flex: 0 0 76px;

    display: block;
}

.q-brand {
    gap: 14px;
}

.q-header-inner {
    min-height: 88px;
}


/*
 * El logo ya incluye texto interno,
 * pero mantenemos el texto lateral por ahora.
 */

.q-brand-copy strong {
    font-size: 17px;
    line-height: 1.05;
}

.q-brand-copy span {
    font-size: 12px;
}


/* ----------------------------------------------------------
   SCROLL
---------------------------------------------------------- */

/*
 * Sólo html controla el scroll vertical.
 * body no debe crear una segunda barra.
 */

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow: visible !important;
    width: 100%;
    min-height: 100%;
}


/*
 * El wrapper escalado no crea su propio scroll.
 */

.q-global-scale-shell {
    overflow: visible !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .q-brand-image {
        width: 62px !important;
        height: 62px !important;

        max-width: 62px !important;
        max-height: 62px !important;

        flex-basis: 62px;
    }

    .q-header-inner {
        min-height: 76px;
    }

}


/* ===== QUIMICA 2026 V15 HEADER MENU ===== */


/* ==========================================================
   LOGO
   76 px -> 106 px ≈ +40%
========================================================== */

.q-brand-image {
    width: 106px !important;
    height: 106px !important;

    max-width: 106px !important;
    max-height: 106px !important;

    flex: 0 0 106px !important;

    object-fit: contain !important;
}


/* ==========================================================
   TEXTO JUNTO AL LOGO
========================================================== */

/*
 * Antes aprox. 17 px.
 * +40% = 23.8 px.
 */

.q-brand-copy strong {
    font-size: 24px !important;

    line-height: 1.02 !important;

    font-weight: 700;
}


/*
 * Antes aprox. 12 px.
 * +40% = 16.8 px.
 */

.q-brand-copy span {
    font-size: 17px !important;

    line-height: 1.25 !important;

    margin-top: 5px;
}


/*
 * Separación entre logo y textos.
 */

.q-brand {
    gap: 17px !important;
}


/*
 * Damos altura suficiente al header
 * para el logo de 106 px sin recortarlo.
 */

.q-header-inner {
    min-height: 122px !important;
}


/* ==========================================================
   MENÚ PRINCIPAL
   SOLO AUMENTAMOS LAS LETRAS
========================================================== */

.q-nav > ul > li > a {
    font-size: 15.5px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;
}


/*
 * Los submenús también conservan coherencia,
 * pero ligeramente menores que el menú principal.
 */

.q-nav .sub-menu a {
    font-size: 14px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .q-brand-image {
        width: 92px !important;
        height: 92px !important;

        max-width: 92px !important;
        max-height: 92px !important;

        flex-basis: 92px !important;
    }

    .q-brand-copy strong {
        font-size: 21px !important;
    }

    .q-brand-copy span {
        font-size: 15px !important;
    }

    .q-nav > ul > li > a {
        font-size: 14px !important;
    }

    .q-header-inner {
        min-height: 108px !important;
    }
}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 700px) {

    .q-brand-image {
        width: 72px !important;
        height: 72px !important;

        max-width: 72px !important;
        max-height: 72px !important;

        flex-basis: 72px !important;
    }

    .q-brand-copy strong {
        font-size: 18px !important;
    }

    .q-brand-copy span {
        font-size: 13px !important;
    }

    .q-header-inner {
        min-height: 88px !important;
    }
}


/* ===== QUIMICA 2026 V16 INVESTIGATION LINKS ===== */

.q-invest__areas li {
    display: block !important;

    min-height: 0 !important;

    padding: 0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);
}

.q-invest__area-link {
    display: grid;

    grid-template-columns:
        14px
        1fr
        14px;

    align-items: center;

    gap: 5px;

    min-height: 34px;

    width: 100%;

    padding:
        4px
        2px;

    color:
        rgba(
            255,
            255,
            255,
            .92
        );

    text-decoration: none;

    transition:
        background .16s ease,
        padding-left .16s ease,
        color .16s ease;
}

.q-invest__area-link:hover,
.q-invest__area-link:focus-visible {
    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color: #fff;

    padding-left: 6px;
}

.q-invest__area-left,
.q-invest__area-right {
    color: #fff;

    font-size: 18px;

    line-height: 1;
}

.q-invest__area-right {
    text-align: right;

    transition:
        transform .16s ease;
}

.q-invest__area-link:hover
.q-invest__area-right,
.q-invest__area-link:focus-visible
.q-invest__area-right {
    transform:
        translateX(2px);
}

.q-invest__area-text {
    min-width: 0;

    font-family:
        'Manrope',
        sans-serif;

    font-size: 11px;

    line-height: 1.25;
}


/* ===== QUIMICA 2026 V16B INVESTIGATION MENU ===== */

/*
 * Restaurar proporciones compactas del menú derecho.
 * Toda la fila continúa siendo clickeable.
 */

.q-invest__areas {
    min-width: 0;
}

.q-invest__areas h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 7px !important;
}

.q-invest__areas ul {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.q-invest__areas li {
    display: block !important;

    width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
}


/*
 * La fila completa es el enlace.
 */

.q-invest__area-link {
    display: grid !important;

    grid-template-columns:
        12px
        minmax(0, 1fr)
        12px !important;

    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;
    min-height: 29px !important;

    margin: 0 !important;

    padding:
        4px
        2px !important;

    font-size: 11px !important;
    line-height: 1.2 !important;

    font-weight: 400 !important;

    color:
        rgba(
            255,
            255,
            255,
            .92
        ) !important;

    text-decoration: none !important;
}


/*
 * Texto: una línea cuando exista espacio.
 * Si realmente no cabe, puede usar máximo dos.
 */

.q-invest__area-text {
    display: block !important;

    min-width: 0 !important;

    font-family:
        'Manrope',
        sans-serif !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    white-space: normal !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}


/*
 * Flechas discretas.
 */

.q-invest__area-left,
.q-invest__area-right {
    display: block !important;

    font-size: 14px !important;
    line-height: 1 !important;

    font-weight: 400 !important;

    color: #fff !important;
}

.q-invest__area-right {
    text-align: right !important;
}


/*
 * Hover muy sutil.
 */

.q-invest__area-link:hover,
.q-invest__area-link:focus-visible {
    padding-left: 5px !important;

    background:
        rgba(
            255,
            255,
            255,
            .07
        ) !important;
}


/*
 * Evitar que reglas globales de enlaces o navegación
 * agranden este menú.
 */

.q-invest__areas a,
.q-invest__areas a:link,
.q-invest__areas a:visited {
    font-size: 11px !important;
    line-height: 1.2 !important;
}


/* Móvil */

@media (max-width: 760px) {

    .q-invest__area-link,
    .q-invest__area-text,
    .q-invest__areas a {
        font-size: 11.5px !important;
    }

    .q-invest__area-link {
        min-height: 32px !important;
    }
}


/* ===== QUIMICA 2026 V17 FINAL ===== */


/* ==========================================================
   INVESTIGACIÓN
========================================================== */

.q-invest__areas li {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);
}

.q-invest__area-link {
    display: grid !important;

    grid-template-columns:
        12px
        minmax(0,1fr)
        12px;

    align-items: center;

    gap: 5px;

    width: 100%;

    min-height: 29px;

    padding: 4px 2px;

    color:
        rgba(255,255,255,.92);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2;

    text-decoration: none;
}

.q-invest__area-link span:nth-child(2) {
    min-width: 0;

    font-size: 11px !important;

    line-height: 1.2;

    word-break: normal;
}

.q-invest__area-link:hover,
.q-invest__area-link:focus-visible {
    background:
        rgba(255,255,255,.07);

    padding-left: 5px;
}


/* ==========================================================
   EVENTOS / EXTENSIÓN
========================================================== */

.q-events-v17 {
    margin:
        26px
        0
        34px;
}

.q-events-v17__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.q-events-v17__head h2 {
    margin: 0;
}

.q-events-v17__head > a {
    color: var(--q-blue);

    font-size: 12px;
    font-weight: 700;
}

.q-events-v17__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 16px;
}

.q-events-v17__card {
    overflow: hidden;

    border:
        1px solid
        #dfe8ee;

    border-radius: 7px;

    background: #fff;
}

.q-events-v17__image {
    display: block;

    height: 175px;

    overflow: hidden;

    background: #edf4f7;
}

.q-events-v17__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .25s ease;
}

.q-events-v17__card:hover
.q-events-v17__image img {
    transform:
        scale(1.025);
}

.q-events-v17__body {
    padding:
        14px
        15px
        16px;
}

.q-events-v17__date {
    margin-bottom: 6px;

    color: #788b9c;

    font-size: 10px;

    text-transform: uppercase;
}

.q-events-v17__body h3 {
    margin:
        0
        0
        11px;

    font-size: 15px;
    line-height: 1.25;
}

.q-events-v17__body h3 a {
    color: var(--q-navy);

    text-decoration: none;
}

.q-events-v17__more {
    color: var(--q-blue);

    font-size: 11px;
    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .q-events-v17__grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media (max-width: 580px) {

    .q-events-v17__grid {
        grid-template-columns:
            1fr;
    }

    .q-events-v17__head {
        display: block;
    }

    .q-events-v17__head > a {
        display: inline-block;

        margin-top: 8px;
    }
}


/* ===== QUIMICA 2026 V18 EDITABLE ===== */


/* ==========================================================
   EQUIPO - FOTO FUTURA
========================================================== */

.q-team-v10__avatar {
    overflow: hidden;
}

.q-team-v10__avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   INVESTIGACIÓN - PÁGINA INTERIOR
========================================================== */

.q-invest-page {
    margin-top: 28px;
}

.q-invest-page__cards {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 18px;

    margin-bottom: 48px;
}

.q-invest-page-card {
    overflow: hidden;

    display: block;

    border:
        1px solid
        #dce6ed;

    border-radius: 8px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.q-invest-page-card:hover,
.q-invest-page-card:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:
        0 9px 28px
        rgba(7,42,76,.10);
}

.q-invest-page-card__image {
    height: 210px;

    overflow: hidden;

    background: #e8f1f6;
}

.q-invest-page-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .3s ease;
}

.q-invest-page-card:hover
.q-invest-page-card__image img {
    transform:
        scale(1.025);
}

.q-invest-page-card__body {
    padding:
        18px
        19px
        20px;
}

.q-invest-page-card__body h2 {
    margin:
        0
        0
        8px;

    color: var(--q-navy);

    font-size: 20px;
}

.q-invest-page-card__body p {
    min-height: 44px;

    margin:
        0
        0
        15px;

    color: #667b8d;

    font-size: 13px;

    line-height: 1.5;
}

.q-invest-page-card__body span {
    color: var(--q-blue);

    font-size: 12px;

    font-weight: 700;
}


/* ==========================================================
   INVESTIGACIÓN RECIENTE
========================================================== */

.q-invest-page__news {
    padding-top: 29px;

    border-top:
        1px solid
        #dce6ed;
}

.q-invest-page__news-head {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 22px;

    margin-bottom: 18px;
}

.q-invest-page__news-head span {
    display: block;

    margin-bottom: 4px;

    color: var(--q-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.q-invest-page__news-head h2 {
    margin: 0;
}

.q-invest-page__news-head > a {
    color: var(--q-blue);

    font-size: 12px;

    font-weight: 700;
}

.q-invest-page__news-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 16px;
}

.q-invest-news-card {
    overflow: hidden;

    border:
        1px solid
        #e0e8ee;

    border-radius: 7px;

    background: #fff;
}

.q-invest-news-card__image {
    display: block;

    height: 155px;

    overflow: hidden;

    background: #e8f1f6;
}

.q-invest-news-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.q-invest-news-card__body {
    padding:
        13px
        14px
        15px;
}

.q-invest-news-card__date {
    margin-bottom: 6px;

    color: #7d8e9d;

    font-size: 9.5px;
}

.q-invest-news-card h3 {
    margin: 0;

    font-size: 14px;

    line-height: 1.35;
}

.q-invest-news-card h3 a {
    color: var(--q-navy);

    text-decoration: none;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px) {

    .q-invest-page__cards,
    .q-invest-page__news-grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:600px) {

    .q-invest-page__cards,
    .q-invest-page__news-grid {
        grid-template-columns:
            1fr;
    }

    .q-invest-page__news-head {
        display: block;
    }

    .q-invest-page__news-head > a {
        display: inline-block;

        margin-top: 8px;
    }
}


/* ===== QUIMICA 2026 V20 TEAM PAGES ===== */

.q-team-page-group {
    margin:
        32px
        0
        45px;
}

.q-team-page-group > h2 {
    margin-bottom: 18px;
}

.q-team-page-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 16px;
}

.q-team-page-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

    padding:
        15px;

    border:
        1px solid
        #dce6ed;

    border-radius:
        8px;

    background:
        #fff;
}

.q-team-page-avatar {
    flex:
        0 0
        66px;

    width:
        66px;

    height:
        66px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e7f3f8;

    color:
        var(--q-navy);

    font-size:
        20px;

    font-weight:
        700;
}

.q-team-page-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.q-team-page-info {
    min-width:
        0;
}

.q-team-page-info h3 {
    margin:
        0
        0
        4px;

    color:
        var(--q-navy);

    font-size:
        15px;

    line-height:
        1.25;
}

.q-team-page-role {
    margin-bottom:
        5px;

    color:
        #61778a;

    font-size:
        11px;
}

.q-team-page-contact {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--q-blue);

    font-size:
        10.5px;

    line-height:
        1.4;

    text-overflow:
        ellipsis;

    text-decoration:
        none;
}

@media(max-width:900px) {

    .q-team-page-grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:580px) {

    .q-team-page-grid {
        grid-template-columns:
            1fr;
    }
}