/* Adaptación de estilo.css (vista previa) a los bloques de WordPress: mismas medidas, otras clases. */

body { margin: 0; }
/* El footer queda abajo aunque la página tenga poco contenido. */
.wp-site-blocks { padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
.header .contenedor { position: relative; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
.header__marca { padding: 16px 0 12px; margin: 0; }
.header__logo { margin: 0; }
.header__logo img { height: 60px; width: auto; display: block; }
.header__linea.wp-block-separator { border: 0; border-top: 3px solid var(--negro); opacity: 1; margin: 0; width: 100%; max-width: none; }
.menu-ificc { margin: 0; gap: 0; }
.menu-ificc .wp-block-navigation__container { gap: 0; }
/* WordPress fija color: inherit con .wp-block-navigation .x.x: se iguala esa especificidad para el gris del original. */
.menu-ificc.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--gris-menu); }
.menu-ificc.wp-block-navigation .has-child > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--negro); }
.menu-ificc.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--negro); font-weight: 700; }
.menu-ificc.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content { color: #616161; }
.menu-ificc .wp-block-navigation-item__content { display: flex; align-items: center; padding: 8px 36px 8px 16px; font: 400 20px/1.5 var(--texto); text-transform: uppercase; color: var(--gris-menu); text-decoration: none; }
.menu-ificc .has-child > .wp-block-navigation-item__content,
.menu-ificc .has-child > .wp-block-navigation-submenu__toggle { color: var(--negro); }
.menu-ificc .wp-block-navigation-submenu__toggle { padding: 0; margin-left: -30px; margin-right: 30px; }
.menu-ificc .current-menu-item > .wp-block-navigation-item__content { color: var(--negro); font-weight: 700; }
.menu-ificc .wp-block-navigation__submenu-container { min-width: 182px !important; border: 0 !important; border-radius: 8px; box-shadow: 0 5px 22px rgba(0,0,0,.12); padding: 8px 0; }
.menu-ificc .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 14px; color: #616161; padding: 10px 30px; }
.menu-ificc .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: #f5f5f5; }
.menu-ificc .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
/* Menú ☰ abierto, como ificc.cl: panel blanco de 300 px que entra por la derecha bajo el encabezado, el resto oscurecido,
   submenús abiertos con sangría y las redes al final (las redes solo se ven aquí, no en el menú de escritorio). */
.header .menu-ificc .wp-block-navigation-item:has(> .menu-ificc__redes) { display: none; }
.header .menu-ificc .is-menu-open .wp-block-navigation-item:has(> .menu-ificc__redes) { display: flex; }
.header { --alto-header: 98px; }
.header .menu-ificc.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  top: var(--alto-header); padding: 0; background: rgba(17, 25, 39, .75); animation: fondo-entra .3s ease-out both;
  overflow: clip;  /* al abrir, WordPress enfoca «Inicio» con el panel aún fuera de pantalla: con overflow auto el fondo se desplazaba y el panel temblaba */
}
/* El retraso deja pasar el trabajo de abrir el menú: sin él, el panel saltaba a su lugar sin verse el deslizamiento. */
.menu-ificc .is-menu-open .wp-block-navigation__responsive-close {
  width: 300px; max-width: 85vw; height: 100%; margin: 0 0 0 auto; background: var(--blanco); overflow-y: auto;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .08); animation: cajon-entra .35s cubic-bezier(0, 0, .2, 1) .06s both;
}
@keyframes cajon-entra { from { transform: translateX(100%); } }
@keyframes fondo-entra { from { background-color: transparent; } }
.menu-ificc .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; margin: 0; padding: 72px 16px 32px; }
.menu-ificc .is-menu-open .wp-block-navigation__responsive-container-close { top: 16px; right: 16px; color: var(--gris); }
.menu-ificc .is-menu-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content { padding: 0; align-items: stretch; gap: 40px; }
.header .menu-ificc .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 8px; align-items: stretch; }
.header .menu-ificc .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item { align-items: stretch; }
.menu-ificc.wp-block-navigation .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font-size: 16px; padding: 6px 12px; color: var(--gris-menu); font-weight: 400; }
.menu-ificc.wp-block-navigation .is-menu-open .has-child > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--tinta); justify-content: space-between; }
/* Acordeón (botón que agrega sitio.js): flecha ⌄ abierto, › plegado; el submenú se pliega con una transición de alto. */
.menu-ificc__acordeon { display: none; }
.menu-ificc .is-menu-open .has-child { position: relative; }
.menu-ificc .is-menu-open .menu-ificc__acordeon {
  display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; top: 0; right: 0; width: 48px; height: 36px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.menu-ificc__acordeon::before {
  content: ''; width: 6px; height: 6px; border: solid var(--gris); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s;
}
.menu-ificc .plegado > .menu-ificc__acordeon::before { transform: rotate(-45deg); }
.header .menu-ificc .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  display: grid; max-height: 200px; overflow: hidden; transition: max-height .25s ease, padding .25s ease;
}
.header .menu-ificc .is-menu-open .wp-block-navigation__responsive-container-content .plegado > .wp-block-navigation__submenu-container { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
.menu-ificc .is-menu-open .wp-block-navigation__submenu-container { min-width: 0 !important; box-shadow: none; border-radius: 0; padding: 4px 0 4px 28px !important; }
.header .menu-ificc .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { gap: 4px; }
.menu-ificc.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 8px 16px 8px 24px; color: var(--tinta); }
.menu-ificc.wp-block-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.home .menu-ificc.wp-block-navigation .is-menu-open .has-child:first-child > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--investigacion); }
.header .menu-ificc .is-menu-open .menu-ificc__redes { display: flex; align-self: stretch; justify-content: space-between; gap: 0; margin: 32px 0 0; padding: 0 8px; }
.menu-ificc .is-menu-open .menu-ificc__redes .wp-social-link svg { width: 25px; height: 25px; }

/* ---------- Footer ---------- */
.footer .footer__cuerpo { margin: 0 auto; gap: 0; }
.footer .footer__datos { flex: 0 0 420px !important; }
.footer__datos > * { margin: 0; }
.footer__logo { margin: 0 0 20px !important; }
.footer__logo img { width: 160px; }
.footer__datos p { font: 500 14px/2.14 var(--texto); }
.footer__datos a { color: inherit; text-decoration: none; }
.footer__redes.wp-block-social-links { max-width: 820px; margin: 0; }
.footer__redes .wp-social-link svg { width: 40px; height: 40px; }
.footer__redes .wp-social-link { color: #fff; }
.footer .footer__pie { margin: 0 48px; }

/* ---------- Contenido de páginas ---------- */
.pagina > * + * { margin-block-start: 0; }
.wp-block-post-content > * { max-width: none; }

/* Menú ☰ bajo 1100 px: el menú completo necesita ~1000 px y WordPress solo lo cambia bajo 600 px (en ventanas angostas
   de computador se cortaba). */
@media (max-width: 1099px) {
  .menu-ificc.wp-block-navigation { position: static; }
  .menu-ificc .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; position: absolute; top: 32px; right: 24px; }
  .menu-ificc .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 900px) {
  .footer .footer__datos { flex-basis: 100% !important; }
}
@media (max-width: 600px) {
  .header__logo img { height: 44px; }
  /* Botón ☰ a la derecha del logo, como en la vista previa. */
  .menu-ificc .wp-block-navigation__responsive-container-open:not(.always-shown) { top: 22px; right: 16px; }
  .header { --alto-header: 65px; }
  .footer .wp-block-column { margin-bottom: 24px; }
  .footer__redes .wp-social-link svg { width: 30px; height: 30px; }
  .footer .footer__pie { margin: 0 16px; }
}

/* Ficha genérica (single.html): imagen destacada centrada y acotada. */
.ficha__imagen { text-align: center; margin: 0 0 40px; }
.ficha__imagen img { max-width: min(600px, 100%); height: auto; }

/* Los formularios Clientify incrustados en la página cargan styles_regularembed_iframe.css, que fuerza en todo el documento
   body { font-size: 14px !important; color: #555 !important; font-family: Poppins !important } y p { color: #666 }.
   Se restituye la base de estilo.css con más especificidad; las reglas por clase del tema siguen ganando a "body p". */
html body { color: var(--tinta) !important; font-size: 16px !important; font-family: var(--texto) !important; }
body p { color: inherit; }

/* Cabecera de área como bloques (Imagen + Grupo de párrafos). */
.cabecera-area > * { margin: 0; }
.cabecera-area figure { flex: none; }
/* Ficha de mención: el afiche es la imagen destacada. */
.ficha-mencion .wp-block-post-featured-image { margin: 0; }
.ficha-mencion .wp-block-post-title { margin-top: 0; }
/* Color del área en sus páginas (plantillas "Página de …"): lo usan la cabecera, los botones y la columna lateral. */
.area-investigacion { --c: var(--investigacion); }
.area-docencia { --c: var(--docencia); }
.area-extension { --c: var(--extension); }
/* Imágenes destacadas: WordPress les pone el alto real como atributo; el ancho lo fija el CSS y el alto debe seguirlo. */
img.wp-post-image { height: auto; }
/* Investigación: los nombres de nodo se guardan en minúsculas y se muestran en mayúsculas, como en el sitio actual. */
.nodos-relacionados { text-transform: uppercase; }
/* Ficha de workshop: el título se ve como el <h3> con que empezaba su contenido en el sitio actual. */
.contenido-rico .titulo-workshop { font: 700 16.7px var(--texto); margin: 24px 0 12px; }
.contenido-rico > .titulo-workshop + .wp-block-post-content { margin-top: 0; }
/* Ficha de artículo: la imagen destacada (figure) se ve como el afiche centrado de la vista previa. */
.ficha-articulo > .wp-block-post-featured-image img { display: block; width: auto; max-width: min(600px, 100%); margin: 24px auto; }
.ficha-articulo > .wp-block-post-featured-image { margin: 0; }
.ficha-articulo > .wp-block-post-content { margin-top: 0; }
.ficha-articulo > .wp-block-post-content > :last-child { margin-bottom: 0; }
/* Ficha de libro: la portada (imagen destacada) flota a la izquierda como en la vista previa. */
.ficha-libro > .wp-block-post-featured-image { float: left; width: 250px; margin: 0 28px 16px 0; }
.ficha-libro > .wp-block-post-featured-image img { width: 100%; }
@media (max-width: 900px) { .ficha-libro > .wp-block-post-featured-image { float: none; width: 200px; margin: 0 0 16px; } }
.ficha-libro > .wp-block-post-content { margin-top: 0; }
/* Ficha de persona: la foto (imagen destacada) a la derecha, en gris, como en la vista previa. */
.perfil > .perfil__foto { margin: 0; }
.perfil > .perfil__foto img { width: 100%; }
.perfil__texto > * { margin-block-start: 0; }
/* Columna lateral I/D/E: al pasar el cursor (o con el teclado) se ve el nombre completo del área (de aria-label) y el cuadro
   se corre a la izquierda. El nombre se dibuja encima, alineado a la derecha de la letra: no cambia el ancho de la columna
   (antes empujaba el contenido) ni se sale de la pantalla en notebooks de 1366 px. */
.lateral-areas a { position: relative; }
.lateral-areas a:hover, .lateral-areas a:focus-visible { color: transparent; }
.lateral-areas a:hover span, .lateral-areas a:focus-visible span { visibility: hidden; }
.lateral-areas a:hover::after, .lateral-areas a:focus-visible::after {
  content: attr(aria-label); position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding-left: 42px; color: var(--gris); background: linear-gradient(var(--c), var(--c)) left center / 12px 12px no-repeat;
}
.lateral-areas a[aria-current]::after { color: var(--tinta); }

/* ===== Celular (≤ 600 px): ajustes para acercarse al sitio actual (ificc.cl) en teléfonos, revisado página por página. ===== */
@media (max-width: 600px) {
  /* Encabezado: logo más chico y sin la línea negra (el sitio actual no la muestra en celular). */
  .header__marca img { height: 30px; }
  .header__linea { display: none; }
  .interior, .contenedor.pagina { padding-top: 36px; }
  .inicio-hero { padding-top: 32px; }

  /* Inicio: las tres áreas arriba (íconos chicos), luego el arte y el texto. */
  .inicio-hero { display: flex; flex-direction: column; }
  .inicio-hero .areas { order: -1; padding: 8px 8px 24px; justify-content: space-around; }
  .area__icono img { width: 56px; }
  .area__icono span { font-size: 12px; }

  /* Títulos de página más chicos, como en el sitio actual. */
  .pagina__titulo { font-size: 24px; }
  .titulo-listado { font-size: 24px; }
  .titulo-press { font-size: 24px; }
  .subtitulo-press { font-size: 20px; }
  .contenedor.pagina { padding-left: 32px; padding-right: 32px; }
  .contenedor.pagina--press { padding-left: 16px; padding-right: 16px; }

  /* Cabecera de área justificada y, debajo, la fila "■ I  ■ D  ■ E" (en escritorio es la columna lateral). La columna
     se lleva entre la cabecera y el contenido: el contenedor pasa a columna y el contenido "se abre" (display: contents). */
  .cabecera-area__texto, .intro-listado { text-align: justify; }
  .interior { display: flex; flex-direction: column; gap: 0; }
  .interior__principal { display: contents; }
  .interior__principal > .cabecera-area { order: -2; margin-bottom: 0; }
  .lateral-areas { display: flex; order: -1; flex-direction: row; justify-content: space-between; gap: 0; padding: 40px 16px 40px; }
  .lateral-areas a { gap: 36px; font: 400 13px var(--texto); }
  .lateral-areas span { width: 6px; height: 6px; }
  .lateral-areas a:hover, .lateral-areas a:focus-visible { color: inherit; }
  .lateral-areas a:hover span, .lateral-areas a:focus-visible span { visibility: visible; }
  .lateral-areas a::after { display: none; }
  .interior:not(:has(.cabecera-area)) .lateral-areas { display: none; }  /* fichas de nodo: el sitio actual no la muestra */

  /* Listados (cursos, diplomados, series): afiche centrado, texto con margen, botón al centro y línea negra entre filas. */
  .programa { border-bottom: 2px solid var(--negro); padding-bottom: 32px; }
  .programa__afiche, .programa--ancho .programa__afiche { margin: 0 auto 24px; width: 200px; }
  .programa__texto { padding: 0 16px; }
  .programa__texto .boton-borde, .serie-resumen .boton-borde, .workshop .boton-borde { align-self: center; }
  .programa--ancho .programa__texto p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .serie-cabecera__fila p { font-size: 16px; padding: 0 16px; }
  .area-docencia .boton-borde { color: var(--tinta); }
  .footer__logo { width: 100px; }
  .footer__redes svg { width: 36px; height: 36px; }

  /* Publicaciones: letra más grande y el botón PDF en su propia línea. */
  .anio { font-size: 24px; }
  .lista-publicaciones li { font-size: 17.6px; line-height: 1.7; margin-bottom: 24px; }

  /* Pestañas de texto (Editorial): más grandes y pegadas al texto. */
  .pestana-texto--editorial { font-size: 17px; }
  .pestanas-texto:has(.pestana-texto--editorial) { margin-bottom: 0; }
  .lista-publicaciones .chip { display: table; margin: 10px 0 0; padding: 4px 12px; }

  /* Artículo de Extensión: afiche chico y centrado. */
  .ficha-articulo > .wp-block-post-featured-image img { max-width: 150px; }

  /* Persona: nombre, foto centrada y luego el CV. */
  .perfil { display: flex; flex-direction: column; gap: 0; }
  .perfil__texto { display: contents; }
  .perfil__texto > .wp-block-post-title { order: -2; }
  .perfil > .perfil__foto { order: -1; width: 160px; margin: 0 auto 32px; }

  /* Libro: portada chica a la izquierda con título y datos al lado; la descripción abajo. */
  .ficha-libro > .wp-block-post-featured-image { float: left; width: 130px; margin: 0 16px 16px 0; }
  .ficha-libro h1 { font: 400 16px/1.5 var(--texto); border: 0; padding: 0; }
  .ficha-libro h2 { font: 400 14px var(--texto); margin: 12px 0; }
  .ficha-libro > .wp-block-post-content { clear: both; padding-top: 16px; }

  /* Librería: libros destacados como tarjeta vertical (portada arriba). */
  .libro-destacado { grid-template-columns: 1fr; }
  .libro-destacado img { width: 200px; margin: 0 auto; }

  /* Quiénes somos: pestañas que se deslizan de lado (dos a la vista), con íconos grandes, sin textos encimados. */
  .pestanas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
  .pestana { flex: 0 0 50%; scroll-snap-align: start; font-size: 16px; gap: 16px; }
  .pestana img { width: 56px; height: 56px; }
}