:root {
    --n: #B5C445;
    --c: #F6F8EB;
    --g: #b5c445;
    --b: #3d6050;
    --l: #c8d94e;
    --n2: #4a6a57;
    --g2: #96a438;
    --b2: #2d5040;
    --cd: #F6F8EB;
    --tx: #1a2e22;
    --mu: #4a5e55;
    --br: rgba(90, 122, 103, .18);
    --f-d: 'IBM Plex Sans', system-ui, sans-serif;
    /* --f-d: "IBM Plex Sans", sans-serif; */
    --f-b: "IBM Plex Mono", monospace;
    --e: cubic-bezier(.22, .68, 0, 1.2);
	
	 /* PRIMARY — escala azul */
  --primary-900: #001F3E;
  --primary-700: #12366C;
  --primary-500: #1E488E;
  --primary-300: #7696C6;
  --primary-100: #DCE6F4;

  /* PULSE — escala verde */
  --pulse-700: #74801F;
  --pulse-500: #B5C445;
  --pulse-300: #D2DC83;
  --pulse-100: #EFF3D2;

  /* NEUTRALES */
  --white: #FFFFFF;
  --cream: #F6F4EE;
  --surface-subtle: #E7EEE9;
  --neutral-200: #D8DFDA;
  --muted: #5F6F66;

  /* TEXTO */
  --text-primary: #001F3E;
  --text-secondary: #5F6F66;
  --text-tertiary: #78867E;
  --text-inverse: #FFFFFF;

  /* FONDOS Y SUPERFICIES */
  --background: #F6F8EB;
  --background-alt: #F6F4EE;
  --surface: #FFFFFF;
  --surface-soft: #E7EEE9;
  --surface-blue: #DCE6F4;
  --surface-pulse: #EFF3D2;

  /* BORDES */
  --border: #D8DFDA;
  --border-strong: #7696C6;
  --border-active: #1E488E;
	
	
}
body {
    /* font-family: 'Roboto', sans-serif; 
    font-family: 'Inter', sans-serif;*/
    font-family: var(--f-d);
    /* font-size: 21px; */
    line-height: 1.5;
    color: #333;
}
h1{
    font-size: 2em;
    margin-bottom: 0.5em;
    color: #2c3e50;
}
#header{
    background-color: rgba(246, 244, 238, 0);
}
.content-resources{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    padding: 20px;
    flex-flow: wrap;
}
.item-resources{
    width: 25%;
    max-width: 1200px;
    margin: 10px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 8px;
}

.place-center {
    display: grid;
    place-content: center;
}

.content-logo {
    position: relative;
}

.content-logo .navbar-toggler {
    border: 1px solid;
    border-radius: 15%;
}

.navbar-nav .menu-item {
    position: relative;
	z-index: 1;
}
.navbar-nav .menu-item {
    background-color: rgba(0, 51, 102, 0) !important;
    z-index: 0;
}
.navbar-nav .nav-link, .navbar-nav .dropdown-item {
    padding: 1rem 1.5rem !important;
}

.content-logo .header-img {
    width: 100%;
}

.limit-img-size {
    max-width: 280px;
    max-height: 75px;
}

.navbar {
    padding: 0;
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
}
#qtz-search-form{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#qtz-search-form input{
    margin: 0 10px;
}
#qtz-search-form input[type="text"]{
    width: 100%;
    max-width: 600px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
#qtz-search-form button{
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#qtz-search-form button:hover{
    background-color: #0056b3;
}
/* #qtz-search-results{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
} */

#wrapper > main {
    overflow-x: hidden;
    min-height: 100vh;
}

/* Estilos modal pdf Micrositio */

#img-pdf-modal {
    max-height: 70vh;
}

.pdf-modal-btn-close {
    border: none;
    box-shadow: none;
}

a.qtz-pdf-modal {
    cursor: pointer;
}

/* Estilos cards para categorias de Micrositio */

.qtz-card {
    border: none;
    padding-bottom: 20px;
}

.qtz-card-hidden-btn {
    border: none;
    background-color: inherit;
    padding: 0;
    text-align: left;
}

.qtz-card-img-container {
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #FFF;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: transform 300ms;
}

.qtz-card-img-container:hover {
    transform: scale(1.05);
}

.qtz-card-img-container > .qtz-card-hidden-btn {
    width: 100%;
    height: 100%;
}

.qtz-card-img-container .qtz-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.qtz-card-body {
    display: flex;
    flex-direction: column;
}

.qtz-card-title {
    color: #074490;
    font-size: 1.3rem;
    text-align: justify;
}

.qtz-card-title:hover {
    text-decoration: underline;
}

.qtz-card-desc {
    color: #7A7A7A;
}

.qtz-card-btn {
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #074490;
    color: #FFF;
    align-self: end;
    margin-top: auto;
}

.qtz-card-btn:hover {
    background-color: #DAA520;
}

#iframe-pdf-modal, #img-pdf-modal {
    width: 100% !important;
    height: 85vh !important;
}

#qtz-num-incidencias {
    color: #495057;
}

.user-session-section {
    border-top: 1px solid var(--l);
    background-color: var(--n);
    /*background-image: linear-gradient(to right, #073067, #0a4585);*/
}
/*
New
*/

nav#header{
	border-top: 2px solid var(--l);
}
.navbar-nav .menu-item:has(.active) .nav-link:after {
    content: '';
    background: var(--l);
    width: 80%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 12px;
    margin: 0 0 0 10%;
}
.tx1{
    display: block;
    font-weight: 800;
    font-style: normal;
    color: var(--b);
    letter-spacing: -.02em;
    font-family: var(--f-b);
    font-size: clamp(3.5rem, 6.5vw, 6.8rem);
}
.tx2{
    color: var(--g);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1.5rem, 2.6vw, 2.8rem);
    letter-spacing: -.02em;
}

.tx3{
    font-size: clamp(.9rem, 1.2vw, 1rem);
    color: var(--mu);
    max-width: 480px;
    line-height: 1.82;
    margin: 1.2rem 0 2.4rem;
    animation: fu .8s ease .26s both;
}

/* CCOIA - Header y Footer (guía de estilos v2) */

:root{
  --green-900:#243a2e;
  --green-700:#3e5a4a;
  --green-600:#5a7a67;
  --green-100:#e7eee9;
  --accent:#b0894e;
  --cream:#f6f4ee;
  --white:#ffffff;
  --ink:#1f2a24;
  --muted:#5f6f66;
  --line:rgba(31,42,36,.12);
  --radius:6px;
  --shadow:0 18px 50px rgba(36,58,46,.10);
}

.ccoia-container{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}

/* Topbar */
.topbar{background:var(--green-900);color:#dfe8e1;font-size:12.5px}
.topbar .ccoia-container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:12px;flex-wrap:wrap}
.topbar a{color:#dfe8e1;opacity:.85;font-family:'IBM Plex Mono',monospace;letter-spacing:.4px;text-decoration:none}
.topbar a:hover{opacity:1}
.topbar-links{display:flex;gap:22px;align-items:center}

/* Cabecera y navegación */
.site-header{position:sticky;top:0;z-index:999;background:rgba(246,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav{display:flex;align-items:center;justify-content:space-between;min-height:78px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .brand-logo{height:56px;width:auto;object-fit:contain}
.brand .brand-logo-invert{filter:invert(100%)}
.brand-text strong{font-family:'Spectral',serif;font-size:21px;font-weight:600;letter-spacing:.3px;display:block;color:var(--ink)}
.brand-text small{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);letter-spacing:.3px;display:block}

.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:15px;color:var(--ink);padding:6px 0;position:relative;text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--green-600);transition:width .2s ease}
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links .current-menu-item > a::after{width:100%}
.nav-links a.active,
.nav-links .current-menu-item > a{color:var(--green-700)}
.nav-cta{display:flex;align-items:center;gap:14px}

/* Botón institucional */
.cci-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:var(--radius);
  font-size:15px;font-weight:600;cursor:pointer;border:1.5px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
  text-decoration:none;
}
.cci-btn-outline{border-color:var(--green-600);color:var(--green-700);background:transparent}
.cci-btn-outline:hover{background:var(--green-100)}

/* Botón hamburguesa */
.menu-toggle{
  display:none;width:48px;height:48px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;padding:0;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:transform .25s ease,opacity .2s ease}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .25s ease}
.menu-toggle span::before{top:-7px}
.menu-toggle span::after{top:7px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* Footer */
.site-footer{background:var(--green-900);color:#c9d6cd;padding:60px 0 30px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-col h4,
.footer-brand h4,
.site-footer h4{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:#9fb4a6 !important;margin-bottom:16px;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer ul li{font-size:14px !important;color:#c9d6cd !important;letter-spacing:0 !important}
.site-footer a{color:#c9d6cd;text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .footer-brand p{color:#9fb4a6;margin-top:14px;max-width:260px}
.site-footer .footer-brand img{display:block;object-fit:contain}
.site-footer .footer-brand .wp-block-gallery .wp-block-image img{width:auto !important;height:48px !important;object-fit:contain}
.site-footer .social-list{flex-direction:row;gap:14px}
.site-footer .social-list a{font-size:20px}
.site-footer .social-list a i{font-size:20px}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:#9fb4a6;font-family:'IBM Plex Mono',monospace;font-size:12px;
}

/* Responsive */
@media (max-width:1023px){
  .ccoia-container{padding:0 26px}
  .menu-toggle{display:flex}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:8px 26px 18px;box-shadow:var(--shadow);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .3s ease,opacity .25s ease;
  }
  .nav-links.open{max-height:420px;opacity:1;visibility:visible}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;min-height:48px;display:flex;align-items:center}
  .nav-links a::after{display:none}
  .nav-cta .cci-btn-outline{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .ccoia-container{padding:0 20px}
  .topbar-links a:not(:last-child){display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px}
}


.class474unam img {
    width: 46% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: -41px auto -32px !important;
    padding: 0;
}
:where(.wp-block-columns) {
    margin-bottom: 0 !important;
}
figure.wp-block-image img {
    margin-right: auto !important;
}
.wp-block-image {
    margin: 0;
}
/*****************
#ccoia-integrantes-2 ul.ccoia-integrantes__grid > li.ccoia-integrantes__item{
    width: 100% !important;
    min-width: 40% !important;
}
**/

/* div#ccoia-integrantes-2 .ccoia-integrantes__grid, div#ccoia-integrantes-2 ul.ccoia-integrantes__grid {
    gap: 11%;
}

div#ccoia-integrantes-2 li.ccoia-integrantes__item {
    flex: min-content;
    width: inherit;
    max-width: min-content;
    margin: inherit !important;
    padding: inherit  !important;
    min-width: inherit;
    list-style: inherit !important;
    box-sizing: border-box;
}  */
div#ccoia-integrantes-2 .ccoia-integrantes__grid, div#ccoia-integrantes-2 ul.ccoia-integrantes__grid {
    gap: 5%;
}
div#ccoia-integrantes-2 li.ccoia-integrantes__item {
    flex: min-content;
    width: inherit;
    margin: inherit !important;
    padding: inherit !important;
    min-width: inherit;
    list-style: inherit !important;
    box-sizing: border-box;
    max-width: max-content;
}

/* Hasta 1399.98px => el nav actúa colapsado (hamburguesa) */
@media (max-width: 1399.98px) {

    /* Ocultar el menú inline */
    #header.navbar-expand-lg .navbar-collapse,
    #header .navbar-collapse {
        display: none !important;
        flex-basis: auto;
        flex-grow: 1;
    }

    /* Solo el menú abierto por el toggler se muestra */
    #header .navbar-collapse.show,
    #header .navbar-collapse.collapsing {
        display: block !important;
    }
	    
    /* Mostrar el botón hamburguesa aunque d-lg-none lo oculte */
    #header ~ * .navbar-toggler,
    .content-header .navbar-toggler {
        display: block !important;
    }
}

/* Desde 1400px => menú horizontal, sin hamburguesa */
@media (min-width: 1400px) {
    .content-header .navbar-toggler {
        display: none !important;
    }
    #header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* ===== Breakpoint custom: hamburguesa hasta 1399px ===== */

@media (max-width: 1399.98px) {

    /* 1) Mostrar el WRAPPER del botón (es el que tiene d-lg-none) */
    .content-logo .col-2.d-lg-none,
    .content-logo .place-center.d-lg-none {
        display: block !important;
    }

    /* 2) El menú inline debe comportarse como colapsado */
    #header .navbar-collapse {
        display: none !important;
    }
    #header .navbar-collapse.show,
    #header .navbar-collapse.collapsing {
        display: block !important;
    }

    /* 3) Asegurar que el botón sea visible */
    .content-logo .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Desde 1400px: menú horizontal, sin hamburguesa */
@media (min-width: 1400px) {

    /* Ocultar el wrapper del botón */
    .content-logo .col-2.d-lg-none,
    .content-logo .place-center.d-lg-none {
        display: none !important;
    }

    /* Menú expandido */
    #header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* ================== BREAKPOINT CUSTOM: hamburguesa hasta 1399px ================== */

/* El contenedor del logo ya es position:relative (lo tenías), nos sirve de ancla */
.content-logo { position: relative; }

@media (max-width: 1399.98px) {
    .navbar-toggler i{
        color: #ffffff !important;
    }
    /* ---- 1) Botón hamburguesa: visible ---- */
    .content-logo .col-2.d-lg-none,
    .content-logo .place-center.d-lg-none {
        display: block !important;
    }
    .content-logo .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ---- 2) El wrapper del menú NO debe ocupar espacio en el grid ---- */
    .content-logo .row > [class*="order-5"] {
        flex: 0 0 0 !important;
        max-width: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
        overflow: visible !important;   /* permitimos que el dropdown salga */
        position: static !important;
    }

    /* El <nav> y su .container tampoco deben ocupar caja */
    #header.navbar {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    #header > .container {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* ---- 3) El menú abierto se posiciona absoluto debajo del header ---- */
    #header .navbar-collapse {
        display: none;
    }
    #header .navbar-collapse.show,
    #header .navbar-collapse.collapsing {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;

        background: #F6F8EB;
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 14px 28px rgba(0,0,0,.10);
        padding: 8px 24px 16px;
        margin: 0;
    }

    /* ---- 4) Resetear la lista: sin bullets, vertical, con separadores ---- */
    #header .navbar-nav {
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        width: 100%;
    }
    #header .navbar-nav .menu-item {
        width: 100%;
    }
    #header .navbar-nav .nav-link,
    #header .navbar-nav .dropdown-item {
        display: block;
        padding: .85rem .25rem !important;
        border-bottom: 1px solid rgba(0,0,0,.08);
        color: #1f2a24;
    }
    #header .navbar-nav .menu-item:last-child .nav-link {
        border-bottom: 0;
    }

    /* El botón de cerrar (mismo toggler) ya no debe quedar tapado */
    .content-logo { z-index: 1060; }
}

/* ================== DESDE 1400px: menú horizontal normal ================== */
@media (min-width: 1400px) {

    .content-logo .col-2.d-lg-none,
    .content-logo .place-center.d-lg-none {
        display: none !important;
    }
    #header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
    }

    #header .navbar-nav {
        flex-direction: row !important;
    }
    #header .navbar-nav .nav-link {
        border-bottom: 0 !important;
    }
}