/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Sección Dirección CyT
   Layout: foto (izq) + descripción + botones (der) + separador dorado
   Referencia: MODELO_AUTORIDADES.pdf (páginas Articulación y Vinculación)
   ═══════════════════════════════════════════════════════════════════════════ */

.cyt-dir-seccion {
    max-width: 100%;
    margin: 0 auto;
    padding: 48px 48px 0;
    font-family: var(--cyt-font-cuerpo);
    position: relative;
}

/* Banner navy oscuro opcional (titulo de subseccion, ej "UNIDAD DE GESTIÓN...") */
.cyt-dir-banner {
    background: var(--cyt-dark, #0f2849);
    margin: 24px -48px 32px;
    padding: 28px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cyt-dir-banner::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 220px; height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%2300b8db' stroke-width='1.2' opacity='0.35'><path d='M -20 200 Q 80 100 200 200'/><path d='M -20 160 Q 80 60 200 160'/><path d='M -20 120 Q 80 20 200 120'/></g></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    opacity: 0.7;
    pointer-events: none;
}
.cyt-dir-banner-titulo {
    color: white;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* Grid de 2 columnas: persona + contenido */
.cyt-dir-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ─── COLUMNA IZQUIERDA: PERSONA (card unificado) ─── */
.cyt-dir-persona {
    text-align: center;
    background: #d9dfe7;
    border: 1px solid rgba(15,40,73,0.10);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15,40,73,0.08);
    padding: 0 0 20px;
}

/* Foto: proporcion cuadrada-vertical equilibrada */
.cyt-dir-foto {
    width: 100%;
    margin: 0 0 14px;
    overflow: hidden;
    background: #7d8a9d; /* fondo por defecto; con color elegido se setea inline */
    position: relative;
}
/* La imagen llena el ancho. Le damos una proporcion fija y la anclamos ABAJO
   con object-fit: cover, de modo que se recorta el sobrante transparente de
   ARRIBA (sobre la cabeza) y la persona queda apoyada abajo. Al estar en flujo
   normal (aspect-ratio sobre la propia img), no desborda sobre la info. */
.cyt-dir-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.2;
    height: auto;
    object-fit: cover;
    object-position: center bottom;
}
/* Placeholder sin foto: necesita un alto propio y centra el icono */
.cyt-dir-foto--placeholder {
    aspect-ratio: 1 / 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyt-dir-foto--redonda,
.cyt-dir-foto--cuadrada {
    border-radius: 0;
}

/* Placeholder cuando no hay foto */
.cyt-dir-foto--placeholder {
    color: rgba(255,255,255,0.4);
}
.cyt-dir-foto--placeholder svg {
    width: 35%; height: 35%;
}

/* Cargo (opcional, encima del nombre) */
.cyt-dir-cargo {
    font-size: 10.5px;
    color: var(--cyt-text-soft, #5a7088);
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 12px;
}

/* Nombre */
.cyt-dir-nombre {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cyt-dark, #0f2849);
    margin-bottom: 10px;
    line-height: 1.3;
    padding: 0 12px;
}

/* Contacto */
.cyt-dir-contacto {
    font-size: 12px;
    color: var(--cyt-text-soft, #5a7088);
    line-height: 1.5;
    padding: 0 12px;
}
.cyt-dir-contacto-label {
    font-weight: 700;
    color: var(--cyt-text, #0f2849);
    display: inline;
}
.cyt-dir-contacto a {
    color: var(--cyt-primary, #00b8db);
    text-decoration: none;
    word-break: break-all;
    transition: color .2s;
    display: block;
    margin-top: 2px;
}
/* Info libre debajo de la foto (telefono, direccion, horario, etc.) */
.cyt-dir-info {
    font-size: 13px;
    color: var(--cyt-text-soft, #5a7088);
    line-height: 1.6;
    padding: 0 12px;
    margin-top: 12px;
    text-align: center;
}
.cyt-dir-info p { margin: 0 0 12px; }
.cyt-dir-info p:last-child { margin-bottom: 0; }
.cyt-dir-info strong { color: var(--cyt-text, #0f2849); font-weight: 700; }
.cyt-dir-info a {
    color: var(--cyt-primary, #00b8db);
    text-decoration: none;
    word-break: break-word;
    transition: color .2s;
}
.cyt-dir-info a:hover { text-decoration: underline; }
.cyt-dir-contacto a:hover {
    color: var(--cyt-dark, #0f2849);
    text-decoration: underline;
}

/* ─── COLUMNA DERECHA: DESCRIPCIÓN + BOTONES ─── */
.cyt-dir-contenido {
    padding-top: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cyt-dir-descripcion {
    font-size: 17px;
    line-height: 1.75;
    color: var(--cyt-text, #1a2e44);
    text-align: justify;
    margin-bottom: 32px;
    width: 100%;
    max-width: 100%;
}
.cyt-dir-descripcion p {
    margin: 0 0 16px;
    width: 100%;
    max-width: 100%;
}
.cyt-dir-descripcion p:last-child {
    margin-bottom: 0;
}
.cyt-dir-descripcion strong {
    color: var(--cyt-strong, #0f2849);
    font-weight: 700;
}

/* Grid de botones: 3 por fila max, responsive */
.cyt-dir-botones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.cyt-dir-btn {
    background: var(--cyt-primary, #00b8db);
    color: white;
    padding: 14px 22px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 4px 12px rgba(0,184,219,0.25);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
.cyt-dir-btn:hover {
    background: var(--cyt-dark, #0f2849);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15,40,73,0.25);
    color: white;
}
.cyt-dir-btn:active {
    transform: translateY(-1px);
}

/* Separador dorado entre secciones */
.cyt-dir-separador {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #d4a017 20%, #d4a017 80%, transparent 100%);
    margin: 0 32px;
    opacity: 0.6;
}

/* Última sección no necesita separador */
.cyt-dir-seccion:last-of-type .cyt-dir-separador {
    display: none;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .cyt-dir-grid {
        grid-template-columns: 190px 1fr;
        gap: 22px;
    }
    .cyt-dir-descripcion {
        text-align: left;
        font-size: 15px;
    }
    .cyt-dir-botones {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .cyt-dir-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cyt-dir-persona {
        max-width: 240px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .cyt-dir-seccion {
        padding: 32px 18px 0;
    }
    .cyt-dir-banner {
        margin: 16px -18px 24px;
        padding: 22px 18px;
    }
    .cyt-dir-botones {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .cyt-dir-btn {
        padding: 12px 18px;
        font-size: 12px;
    }
}

/* Animación de entrada al scroll: usa .cyt-reveal del tema (header.php) */
.cyt-dir-seccion.cyt-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}
.cyt-dir-seccion.cyt-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .cyt-dir-seccion.cyt-reveal {
        opacity: 1; transform: none; transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Grid Facultades CyT
   Grid uniforme de 4 columnas con imagen + titulo overlay
   ═══════════════════════════════════════════════════════════════════════════ */

.cyt-fac-seccion {
    width: 100%;
    max-width: 100%;
    margin: 48px auto;
    padding: 0 48px;
    font-family: var(--cyt-font-cuerpo);
    box-sizing: border-box;
}

/* Banner titulo arriba (navy oscuro) */
.cyt-fac-titulo-banner {
    background: var(--cyt-dark, #0f2849);
    margin: 0 -48px 32px;
    padding: 28px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cyt-fac-titulo {
    color: white;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* Grid uniforme 4 columnas */
.cyt-fac-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Card individual */
.cyt-fac-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background: #1a3a5e;
    box-shadow: 0 4px 12px rgba(15,40,73,0.12);
    transition: transform .3s ease, box-shadow .3s ease;
    display: block;
    cursor: pointer;
}
.cyt-fac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15,40,73,0.2);
}

/* Imagen de fondo */
.cyt-fac-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cyt-fac-card:hover .cyt-fac-img {
    transform: scale(1.06);
}

/* Overlay oscuro para legibilidad del titulo */
.cyt-fac-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15,40,73,0.10) 0%,
        rgba(15,40,73,0.30) 50%,
        rgba(15,40,73,0.55) 100%);
    transition: background .3s ease;
    pointer-events: none;
}
.cyt-fac-card:hover .cyt-fac-overlay {
    background: linear-gradient(180deg,
        rgba(15,40,73,0.25) 0%,
        rgba(0,184,219,0.4) 50%,
        rgba(15,40,73,0.7) 100%);
}

/* Placeholder cuando no hay imagen */
.cyt-fac-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2a4a72 0%, #1a3a5e 100%);
}

/* Titulo overlay */
.cyt-fac-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    color: white;
    font-family: var(--cyt-font-cuerpo);
    font-size: clamp(15px, 1.6vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-shadow:
        0 0 1px rgba(0,0,0,0.8),
        0 2px 4px rgba(0,0,0,0.6),
        0 4px 12px rgba(0,0,0,0.7),
        0 6px 18px rgba(0,0,0,0.5);
    letter-spacing: 0;
    z-index: 2;
    transition: transform .3s ease;
}
.cyt-fac-card:hover .cyt-fac-label {
    transform: scale(1.05);
}

/* Card banner (Hacemos #CienciaEnLaUBA) - sin imagen, fondo cyan */
.cyt-fac-card--banner {
    background: var(--cyt-primary, #00b8db);
}
.cyt-fac-card--banner .cyt-fac-label {
    color: white;
    font-size: clamp(13px, 1.3vw, 17px);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cyt-fac-card--banner:hover {
    background: var(--cyt-dark, #0f2849);
}
.cyt-fac-card--banner:hover .cyt-fac-label {
    color: var(--cyt-primary, #00b8db);
}

/* Responsive */
@media (max-width: 1024px) {
    .cyt-fac-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}
@media (max-width: 768px) {
    .cyt-fac-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .cyt-fac-seccion {
        padding: 0 18px;
    }
    .cyt-fac-titulo-banner {
        margin: 0 -18px 24px;
        padding: 22px 18px;
    }
}
@media (max-width: 480px) {
    .cyt-fac-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Caja Lateral CyT (contenedor libre con titulo)
   ═══════════════════════════════════════════════════════════════════════════ */

.cyt-caja {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15,40,73,0.08);
    border: 1px solid var(--cyt-gray-200, #e2e6eb);
    font-family: var(--cyt-font-cuerpo);
    margin-bottom: 24px;
    background: white;
}
.cyt-caja-header {
    padding: 16px 20px;
    /* el background-color viene inline (atributo color) */
}
.cyt-caja-titulo {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}
/* Zona libre: contenido que mete el usuario (texto, links, imagenes, etc.) */
.cyt-caja-body {
    padding: 22px 24px 26px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--cyt-text, #1a2e44);
}
.cyt-caja-body > *:first-child { margin-top: 0; }
.cyt-caja-body > *:last-child { margin-bottom: 0; }
.cyt-caja-body p { margin: 0 0 14px; }
/* Los links de la barra lateral suelen ser listas largas de PDFs: se les da
   aire para que no queden apelmazados cuando el texto ocupa dos renglones. */
.cyt-caja-body a:not(.wp-block-button__link):not(.wp-element-button):not(.cyt-btn):not(.su-button) {
    color: var(--cyt-primary, #00b8db);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
    display: inline-block;
    margin-bottom: 2px;
}
.cyt-caja-body a:not(.wp-block-button__link):not(.wp-element-button):not(.cyt-btn):not(.su-button):hover {
    color: #0090ac;
    text-decoration: underline;
}
.cyt-caja-body ul, .cyt-caja-body ol {
    margin: 0 0 18px;
    padding-left: 20px;
}
.cyt-caja-body li {
    margin-bottom: 14px;
    line-height: 1.55;
}
.cyt-caja-body li:last-child { margin-bottom: 0; }
/* Subtitulos dentro de la caja (Instructivos, Contacto, etc.) */
.cyt-caja-body h2, .cyt-caja-body h3, .cyt-caja-body h4 {
    display: block;
    margin: 18px 0 8px;
}
.cyt-caja-body h2:first-child, .cyt-caja-body h3:first-child,
.cyt-caja-body h4:first-child { margin-top: 0; }
/* Un parrafo que es SOLO una negrita se trata como subtitulo (ej "Instructivos").
   OJO: no afecta la negrita dentro de links (a > strong), que sigue inline. */
.cyt-caja-body p > strong:only-child {
    display: block;
    margin: 24px 0 10px;
    color: var(--cyt-dark, #0f2849);
    font-size: 13.5px;
    line-height: 1.4;
}

/* --- Contenido viejo con clases "caja-borde / caja-descripcion" (listas de PDFs) --- */
.cyt-caja-body .caja-titulo {
    font-weight: 700;
    color: var(--cyt-dark, #0f2849);
    margin: 0 0 14px;
    font-size: 14px;
}
.cyt-caja-body .caja-descripcion { margin: 0; }
/* Los saltos dobles (<br><br>) del contenido viejo se reemplazan por margen */
.cyt-caja-body .caja-descripcion br { display: none; }
/* Subtitulos de seccion dentro del contenido viejo (negrita suelta):
   "Links relacionados", "Recursos SIGEVA-UBA", etc. Se separan bien de la
   seccion anterior para dar jerarquia. */
.cyt-caja-body .caja-descripcion > strong {
    display: block;
    margin: 26px 0 12px;
    color: var(--cyt-dark, #0f2849);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}
.cyt-caja-body .caja-descripcion > strong:first-child { margin-top: 0; }
/* Cada link (archivo o URL): icono + texto en la misma linea, con aire parejo */
.cyt-caja-body .caja-descripcion a[href] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    line-height: 1.5;
}
.cyt-caja-body .caja-descripcion a[href] strong { display: inline; font-weight: 600; }
.cyt-caja-body .caja-descripcion a[href]:last-child { margin-bottom: 0; }

/* CASO ESPECIAL: contenido viejo donde el subtitulo y TODA la lista de archivos
   quedaron metidos dentro de un <h2>/<h3> (ej: <h2><strong>Instructivos</strong>
   <br><a>...</a><br><a>...</a></h2>). Hay que:
   - tratar los <a> de adentro como items de lista (bloque, con aire), y
   - separar el rotulo en negrita del resto. */
.cyt-caja-body h2, .cyt-caja-body h3, .cyt-caja-body h4 {
    font-weight: 700;
}
.cyt-caja-body h2 br, .cyt-caja-body h3 br, .cyt-caja-body h4 br { display: none; }
.cyt-caja-body h2 > strong:first-child,
.cyt-caja-body h3 > strong:first-child,
.cyt-caja-body h4 > strong:first-child {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--cyt-dark, #0f2849);
}
.cyt-caja-body h2.wp-block-heading a[href]:not(.wp-block-button__link):not(.wp-element-button),
.cyt-caja-body h3.wp-block-heading a[href]:not(.wp-block-button__link):not(.wp-element-button),
.cyt-caja-body h4.wp-block-heading a[href]:not(.wp-block-button__link):not(.wp-element-button),
.cyt-caja-body h2 a[href]:not(.wp-block-button__link):not(.wp-element-button):not(.cyt-btn):not(.su-button),
.cyt-caja-body h3 a[href]:not(.wp-block-button__link):not(.wp-element-button):not(.cyt-btn):not(.su-button),
.cyt-caja-body h4 a[href]:not(.wp-block-button__link):not(.wp-element-button):not(.cyt-btn):not(.su-button) {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cyt-primary, #00b8db);
}
.cyt-caja-body h2 a[href] strong,
.cyt-caja-body h3 a[href] strong,
.cyt-caja-body h4 a[href] strong { display: inline; font-weight: 600; }
.cyt-caja-body h2 a[href]:last-child,
.cyt-caja-body h3 a[href]:last-child,
.cyt-caja-body h4 a[href]:last-child { margin-bottom: 0; }

.cyt-caja-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}
/* Iconos de archivo puestos a mano (una imagen sola en su propio parrafo):
   quedaban en un renglon aparte, arriba del link. El tema ya agrega su propio
   icono inline al lado del link de archivo, asi que ocultamos el manual. */
.cyt-caja-body p > img:only-child,
.cyt-caja-body p > a:only-child > img:only-child {
    display: none;
}
.cyt-caja-body p:empty { display: none; margin: 0; }
.cyt-caja-body h2, .cyt-caja-body h3, .cyt-caja-body h4 {
    color: var(--cyt-dark, #0f2849);
    margin: 14px 0 8px;
    font-size: 15px;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Botón CyT
   ═══════════════════════════════════════════════════════════════════════════ */
.cyt-boton-wrap { margin: 16px 0; }
.cyt-boton {
    display: inline-block;
    font-family: var(--cyt-font-cuerpo);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 100px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
}
.cyt-boton:hover { transform: translateY(-2px); }

/* Estilos */
.cyt-boton--navy {
    background: #1d2554;
    color: #fff;
    box-shadow: 0 4px 12px rgba(29,37,84,0.25);
}
.cyt-boton--navy:hover {
    background: #161d44;
    box-shadow: 0 8px 20px rgba(29,37,84,0.35);
    color: #fff;
}
.cyt-boton--cyan {
    background: var(--cyt-primary, #00b8db);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,184,219,0.25);
}
.cyt-boton--cyan:hover {
    background: #009bb9;
    box-shadow: 0 8px 20px rgba(0,184,219,0.35);
    color: #fff;
}
.cyt-boton--outline {
    background: transparent;
    color: #1d2554;
    border: 2px solid #1d2554;
}
.cyt-boton--outline:hover {
    background: #1d2554;
    color: #fff;
}

/* Tamaños */
.cyt-boton--chico  { padding: 9px 22px; font-size: 12.5px; }
.cyt-boton--medio  { padding: 13px 32px; font-size: 14px; }
.cyt-boton--grande { padding: 16px 44px; font-size: 15px; }

/* Alineación según align del bloque */
.wp-block-cyt-boton.aligncenter .cyt-boton-wrap,
.cyt-boton-wrap.aligncenter { text-align: center; }
.wp-block-cyt-boton.alignright .cyt-boton-wrap { text-align: right; }


/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Texto CyT (justificado + negritas cyan automáticas)
   ═══════════════════════════════════════════════════════════════════════════ */
.cyt-texto {
    font-family: var(--cyt-font-cuerpo);
    font-size: 16px;
    line-height: 1.8;
    color: var(--cyt-text, #1a2e44);
    max-width: 100%;
}
.cyt-texto--justify { text-align: justify; }
.cyt-texto--left { text-align: left; }

.cyt-texto p { margin: 0 0 18px; }
.cyt-texto p:last-child { margin-bottom: 0; }

/* Negritas en cyan automáticamente */
.cyt-texto strong,
.cyt-texto b {
    color: var(--cyt-strong, #0f2849);
    font-weight: 700;
}

/* Encabezados dentro del bloque */
.cyt-texto h2, .cyt-texto h3, .cyt-texto h4 {
    font-family: var(--cyt-font-cuerpo);
    color: var(--cyt-dark, #0f2849);
    font-weight: 700;
    margin: 28px 0 14px;
    text-align: left;
}
.cyt-texto h2 { font-size: 24px; }
.cyt-texto h3 { font-size: 20px; }
.cyt-texto h4 { font-size: 17px; }

/* Listas */
.cyt-texto ul, .cyt-texto ol { margin: 0 0 18px; padding-left: 24px; }
.cyt-texto li { margin-bottom: 8px; }

/* Links */
.cyt-texto a {
    color: var(--cyt-primary, #00b8db);
    text-decoration: underline;
    transition: color .2s;
}
.cyt-texto a:hover { color: #0090ac; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUE: Layout con Sidebar CyT
   Dos zonas: contenido principal (izq) + barra lateral (der)
   ═══════════════════════════════════════════════════════════════════════════ */
.cyt-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--cyt-sidebar-w, 320px);
    gap: 40px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

/* Las dos zonas son core/group con estas clases */
.cyt-layout-sidebar .cyt-layout-main {
    min-width: 0; /* permite que el contenido no desborde el grid */
}
.cyt-layout-sidebar .cyt-layout-aside {
    min-width: 0;
}

/* La barra lateral se "pega" al hacer scroll en desktop (opcional, sutil) */
@media (min-width: 901px) {
    .cyt-layout-sidebar .cyt-layout-aside {
        position: sticky;
        top: 110px;
    }
}

/* En el editor, mostrar las zonas con un borde guía suave */
.editor-styles-wrapper .cyt-layout-sidebar .cyt-layout-main,
.editor-styles-wrapper .cyt-layout-sidebar .cyt-layout-aside {
    outline: 1px dashed rgba(0,184,219,0.4);
    outline-offset: 8px;
    border-radius: 4px;
    min-height: 80px;
}
/* Etiqueta de cada zona en el editor (cuando estan vacias o no) */
.editor-styles-wrapper .cyt-layout-sidebar .cyt-layout-main::before {
    content: "CONTENIDO PRINCIPAL";
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(0,184,219,0.8);
    margin-bottom: 8px;
    font-family: var(--cyt-font-cuerpo);
}
.editor-styles-wrapper .cyt-layout-sidebar .cyt-layout-aside::before {
    content: "BARRA LATERAL";
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(0,184,219,0.8);
    margin-bottom: 8px;
    font-family: var(--cyt-font-cuerpo);
}

/* Responsive: en mobile/tablet el sidebar pasa abajo */
@media (max-width: 900px) {
    .cyt-layout-sidebar {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cyt-layout-sidebar .cyt-layout-aside {
        position: static;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICONOS AUTOMATICOS POR TIPO DE ARCHIVO
   Detecta la extension en el href y muestra un icono antes del link.
   Aplica en cajas laterales, contenido de paginas y bloques Texto CyT.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Contenedores donde aplica la deteccion */
.cyt-caja-body a[href]::before,
.cyt-pageib-main a[href]::before,
.cyt-page-content a[href]::before,
.cyt-texto a[href]::before {
    /* por defecto NO mostramos icono; solo cuando matchea una extension abajo */
    content: none;
}

/* Helper: estilo comun del icono */
.cyt-caja-body a[href$=".pdf"],
.cyt-caja-body a[href$=".PDF"],
.cyt-caja-body a[href$=".doc"],
.cyt-caja-body a[href$=".docx"],
.cyt-caja-body a[href$=".xls"],
.cyt-caja-body a[href$=".xlsx"],
.cyt-caja-body a[href$=".ppt"],
.cyt-caja-body a[href$=".pptx"],
.cyt-caja-body a[href$=".zip"],
.cyt-caja-body a[href$=".rar"],
.cyt-pageib-main a[href$=".pdf"],
.cyt-pageib-main a[href$=".doc"],
.cyt-pageib-main a[href$=".docx"],
.cyt-pageib-main a[href$=".xls"],
.cyt-pageib-main a[href$=".xlsx"],
.cyt-page-content a[href$=".pdf"],
.cyt-page-content a[href$=".doc"],
.cyt-page-content a[href$=".docx"],
.cyt-texto a[href$=".pdf"],
.cyt-texto a[href$=".doc"],
.cyt-texto a[href$=".docx"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Pseudo-elemento con el icono (fijamos tamano y posicion) */
.cyt-caja-body a[href$=".pdf"]::before,  .cyt-caja-body a[href$=".PDF"]::before,
.cyt-caja-body a[href$=".doc"]::before,  .cyt-caja-body a[href$=".docx"]::before,
.cyt-caja-body a[href$=".xls"]::before,  .cyt-caja-body a[href$=".xlsx"]::before,
.cyt-caja-body a[href$=".ppt"]::before,  .cyt-caja-body a[href$=".pptx"]::before,
.cyt-caja-body a[href$=".zip"]::before,  .cyt-caja-body a[href$=".rar"]::before,
.cyt-pageib-main a[href$=".pdf"]::before, .cyt-pageib-main a[href$=".doc"]::before, .cyt-pageib-main a[href$=".docx"]::before,
.cyt-pageib-main a[href$=".xls"]::before, .cyt-pageib-main a[href$=".xlsx"]::before,
.cyt-page-content a[href$=".pdf"]::before, .cyt-page-content a[href$=".doc"]::before, .cyt-page-content a[href$=".docx"]::before,
.cyt-texto a[href$=".pdf"]::before, .cyt-texto a[href$=".doc"]::before, .cyt-texto a[href$=".docx"]::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* PDF - icono rojo */
.cyt-caja-body a[href$=".pdf"]::before, .cyt-caja-body a[href$=".PDF"]::before,
.cyt-pageib-main a[href$=".pdf"]::before,
.cyt-page-content a[href$=".pdf"]::before,
.cyt-texto a[href$=".pdf"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6z' opacity='.15'/%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3Ctext x='12' y='17' font-size='6' font-weight='bold' fill='%23d32f2f' text-anchor='middle' font-family='Arial'%3EPDF%3C/text%3E%3C/svg%3E");
}

/* Word (doc/docx) - icono azul */
.cyt-caja-body a[href$=".doc"]::before, .cyt-caja-body a[href$=".docx"]::before,
.cyt-pageib-main a[href$=".doc"]::before, .cyt-pageib-main a[href$=".docx"]::before,
.cyt-page-content a[href$=".doc"]::before, .cyt-page-content a[href$=".docx"]::before,
.cyt-texto a[href$=".doc"]::before, .cyt-texto a[href$=".docx"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231565c0'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3Ctext x='12' y='17' font-size='5.5' font-weight='bold' fill='%231565c0' text-anchor='middle' font-family='Arial'%3EDOC%3C/text%3E%3C/svg%3E");
}

/* Excel (xls/xlsx) - icono verde */
.cyt-caja-body a[href$=".xls"]::before, .cyt-caja-body a[href$=".xlsx"]::before,
.cyt-pageib-main a[href$=".xls"]::before, .cyt-pageib-main a[href$=".xlsx"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3Ctext x='12' y='17' font-size='5.5' font-weight='bold' fill='%232e7d32' text-anchor='middle' font-family='Arial'%3EXLS%3C/text%3E%3C/svg%3E");
}

/* PowerPoint (ppt/pptx) - icono naranja */
.cyt-caja-body a[href$=".ppt"]::before, .cyt-caja-body a[href$=".pptx"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e64a19'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3Ctext x='12' y='17' font-size='5.5' font-weight='bold' fill='%23e64a19' text-anchor='middle' font-family='Arial'%3EPPT%3C/text%3E%3C/svg%3E");
}

/* Comprimidos (zip/rar) - icono gris */
.cyt-caja-body a[href$=".zip"]::before, .cyt-caja-body a[href$=".rar"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23616161'%3E%3Cpath d='M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3Ctext x='12' y='17' font-size='5.5' font-weight='bold' fill='%23616161' text-anchor='middle' font-family='Arial'%3EZIP%3C/text%3E%3C/svg%3E");
}

/* ============================================================
   SLIDER DE NOTICIAS CyT (bloque cyt/slider)
   Mismo diseno overlay que los banners, en formato carrusel.
   ============================================================ */
.cyt-slider { position: relative; width: 100%; margin: 0 auto; }
.cyt-slider-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cyt-gray-100, #f4f6f9);
    box-shadow: 0 4px 18px rgba(15,40,73,0.10);
}
.cyt-slider-slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.cyt-slider-slide.is-active { opacity: 1; visibility: visible; }
.cyt-slider-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyt-slider--contain .cyt-slider-img { object-fit: contain; }
.cyt-slider-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cyt-dark, #0f2849), #1a3a5e);
    color: rgba(255,255,255,0.3);
}
.cyt-slider-ph svg { width: 72px; height: 72px; }
.cyt-slider-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 78px 32px 26px;
    background: linear-gradient(to top, rgba(7,18,33,0.96) 0%, rgba(7,18,33,0.78) 32%, rgba(7,18,33,0.32) 70%, rgba(7,18,33,0) 100%);
    z-index: 2;
}
.cyt-slider-date {
    display: block;
    color: #8fd4ea;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 7px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.cyt-slider .cyt-slider-overlay .cyt-slider-title,
.cyt-slider-title {
    font-family: var(--cyt-font-cuerpo, 'Montserrat', sans-serif);
    color: #fff !important;
    font-size: clamp(19px, 2.2vw, 27px);
    font-weight: 800; line-height: 1.22;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.cyt-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.88);
    color: var(--cyt-dark, #0f2849);
    font-size: 26px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
    box-shadow: 0 2px 10px rgba(15,40,73,0.18);
}
.cyt-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.cyt-slider-prev { left: 16px; }
.cyt-slider-next { right: 16px; }
.cyt-slider-dots {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 9px; margin-top: 16px;
}
.cyt-slider-dot {
    width: 11px; height: 11px; padding: 0;
    border: none; border-radius: 50%;
    background: var(--cyt-gray-300, #d3dae3);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.cyt-slider-dot:hover { background: var(--cyt-gray-500, #8a91a4); }
.cyt-slider-dot.is-active { background: var(--cyt-primary, #00b8db); transform: scale(1.25); }
.cyt-slider-empty {
    padding: 60px 24px; text-align: center;
    color: var(--cyt-text-soft, #6b7280);
    background: var(--cyt-gray-100, #f4f6f9);
    border-radius: 14px;
    font-family: var(--cyt-font-cuerpo, 'Montserrat', sans-serif);
}
@media (max-width: 640px) {
    .cyt-slider-overlay { padding: 44px 18px 18px; }
    .cyt-slider-arrow { width: 38px; height: 38px; font-size: 22px; }
    .cyt-slider-prev { left: 10px; }
    .cyt-slider-next { right: 10px; }
}

/* ============================================================
   ESPACIADO DEL CONTENIDO (paginas normales, sidebar y 2 columnas)
   Arregla el amontonamiento cuando:
   - Titulos se cargaron como PARRAFO EN NEGRITA en vez de encabezado.
   - Las filas de pastillas (botones) quedan pegadas al titulo siguiente.
   Aplica a todos los contenedores de contenido, asi se replica en todas.
   ============================================================ */

/* Un parrafo que es SOLO una negrita se trata como subtitulo, con aire arriba.
   (No afecta negritas dentro de un texto ni dentro de links.) */
.cyt-page-content p:has(> strong:only-child),
.cyt-2c-content p:has(> strong:only-child) {
    margin-top: 26px;
    margin-bottom: 10px;
}
.cyt-page-content p:has(> strong:only-child) > strong,
.cyt-2c-content p:has(> strong:only-child) > strong {
    font-size: 1.05em;
    color: var(--cyt-dark, #0f2849);
    line-height: 1.35;
}

/* Filas de pastillas / botones: separacion pareja entre ellas (incluso cuando
   la fila se parte) y margen inferior para no pegarse al titulo que sigue. */
.cyt-page-content .wp-block-buttons,
.cyt-2c-content .wp-block-buttons {
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 26px;
}

/* Mas aire entre las pastillas y el titulo siguiente (encabezado o negrita). */
.cyt-page-content .wp-block-buttons + h2,
.cyt-page-content .wp-block-buttons + h3,
.cyt-page-content .wp-block-buttons + h4,
.cyt-page-content .wp-block-buttons + p:has(> strong:only-child),
.cyt-2c-content .wp-block-buttons + h2,
.cyt-2c-content .wp-block-buttons + h3,
.cyt-2c-content .wp-block-buttons + h4,
.cyt-2c-content .wp-block-buttons + p:has(> strong:only-child) {
    margin-top: 34px;
}

/* ============================================================
   BLOQUE: Grid de Imagenes CyT (cyt/grid-imagenes)
   Grilla uniforme; imagenes subidas desde WP con URL y titulo opcional.
   ============================================================ */
.cyt-imgrid-seccion { margin: 24px 0; }
.cyt-imgrid-titulo-banner {
    background: var(--cyt-dark, #0f2849);
    border-radius: 12px 12px 0 0;
    padding: 16px 22px;
}
.cyt-imgrid-titulo {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
}
.cyt-imgrid-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cyt-imgrid-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: var(--cyt-gray-100, #eef1f4);
    box-shadow: 0 2px 10px rgba(15,40,73,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cyt-imgrid-card[href]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15,40,73,.18);
}
.cyt-imgrid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cyt-imgrid-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #12304f, #0a1c33);
}
.cyt-imgrid-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(10,20,40,.82), rgba(10,20,40,0));
    pointer-events: none;
}
.cyt-imgrid-label {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    z-index: 2;
}
.cyt-imgrid-vacio {
    padding: 30px;
    text-align: center;
    color: #888;
    border: 2px dashed #cfd6de;
    border-radius: 12px;
    background: #f7f9fb;
}
@media (max-width: 900px) {
    .cyt-imgrid-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
    .cyt-imgrid-grid { grid-template-columns: 1fr !important; }
}