/*
Theme Name: Nota Dinámica BioBio
Theme URI: http://localhost:8080/wordpress/
Author: secea
Description: Tema modular con soporte para scrolltelling y galerías dinámicas.
Version: 1.0
*/

/* =========================================
   1. CONFIGURACIÓN GLOBAL
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    padding-top: 60px;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

h1, h2 {
    font-family: 'Merriweather', serif;
}

/* =========================================
   2. HEADER Y NAVEGACIÓN
   ========================================= */
body .header-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8) !important;
    transition: background-color 0.3s ease;
}

.contenedor-header {
    width: 100%;
    max-width: 1400px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo-sitio {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.imagen-logo {
    height: 25px;
    width: auto;
    transition: filter 0.3s ease;
}

.header-principal[data-tema="claro"] .imagen-logo { filter: none; }
.header-principal[data-tema="oscuro"] .imagen-logo { filter: brightness(0) invert(1); }

.redes-sociales {
    display: flex;
    gap: 20px;
    margin-left: auto;
}

.icono-red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-principal[data-tema="claro"] .icono-red,
.header-principal[data-tema="claro"] .icono-red:visited,
.header-principal[data-tema="claro"] .icono-red:hover {
    color: #000000;
    text-decoration: none;
}

.header-principal[data-tema="oscuro"] .icono-red,
.header-principal[data-tema="oscuro"] .icono-red:visited,
.header-principal[data-tema="oscuro"] .icono-red:hover {
    color: #ffffff;
    text-decoration: none;
}

.header-principal .icono-red:hover { transform: scale(1.2); }

/* Iconos estructurales del header (redes sociales, buscador, botón hamburguesa) según tema */
.header-principal[data-tema="claro"] .burger-btn,
.header-principal[data-tema="claro"] .search-icon,
.header-principal[data-tema="claro"] .rrss-menu a {
    color: #000000 !important;
}
.header-principal[data-tema="oscuro"] .burger-btn,
.header-principal[data-tema="oscuro"] .search-icon,
.header-principal[data-tema="oscuro"] .rrss-menu a {
    color: #ffffff !important;
}

.header-principal[data-tema="claro"] .header-divider { background: rgba(0, 0, 0, 0.2); }
.header-principal[data-tema="oscuro"] .header-divider { background: rgba(255, 255, 255, 0.2); }

body.wp-singular .header-principal,
body.single .header-principal,
body.logged-in .header-principal {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* =========================================
   3. BLOQUES ESTRUCTURALES
   ========================================= */
.contenido-principal {
    min-height: 100vh;
}

.seccion-parallax {
    position: relative;
    width: 100%;
    height: 80vh;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenido-seccion {
    max-width: 800px;
    text-align: center;
    z-index: 2;
}

.seccion-normal {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 300px;
    transition: color 0.3s ease;
}

body[data-tema="claro"] .seccion-normal { color: #1a1a1a; }
body[data-tema="oscuro"] .seccion-normal { color: #ffffff; }

.seccion-video-full {
    width: 100%;
    height: 100vh;
    position: relative;
    clip-path: inset(0);
    z-index: 1;
    overflow: hidden;
}

.seccion-video-full video,
.seccion-video-full iframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    display: block;
    z-index: -1;
    border: none;
    object-fit: cover;
}
.seccion-video-full iframe { transform: scale(1.3); }

/* =========================================
   4. DATO ANCLADO (IMAGEN - MODO FLEXBOX)
   ========================================= */
.seccion-pin-corregida {
    position: relative;
    width: 100%;
    min-height: 300vh;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
}

/* Solo para la versión de IMAGEN: Mantenemos el centrado Flex */
.seccion-pin-corregida:not(:has(video)) > .contenedor-del-cuadro {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 100vh;
    padding-bottom: 100vh;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* =========================================
   5. DATO ANCLADO VIDEO (MODO GRID EXCLUSIVO)
   ========================================= */

/* Solo si tiene video, activamos el Grid */
.seccion-pin-corregida:has(video) {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

/* Forzamos que tanto el Video como el Texto del bloque de video ocupen la misma celda */
.seccion-pin-corregida:has(video) > * {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* El Video en modo Video */
.seccion-pin-corregida:has(video) > :nth-child(1) {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 1 !important;
    background-color: #000;
}

/* El Contenedor del Texto en modo Video (Centrado por Flex dentro del Grid) */
.seccion-pin-corregida:has(video) > .contenedor-del-cuadro {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 100vh !important;
    padding-bottom: 100vh !important;
    pointer-events: none !important;
    z-index: 2 !important;
}


/* =========================================
   6. EL CUADRO FLOTANTE (Global para Imagen y Video)
   ========================================= */
.cuadro-flotante,
.wp-block-group.is-style-seccion-video-pin .cuadro-flotante {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(50vh - 150px) !important;
    font-family: 'Merriweather', serif;
    max-width: 800px;
    width: 90%;
    padding: 60px 50px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, color 0.3s ease;
    pointer-events: auto !important; 
    z-index: 3 !important;
}

body[data-tema="claro"] .cuadro-flotante { background-color: rgba(255, 255, 255, 0.95); color: #1a1a1a; }
body[data-tema="oscuro"] .cuadro-flotante { background-color: rgba(26, 26, 26, 0.95); color: #ffffff; }

.cuadro-flotante h3 { font-size: 2.2rem; margin-bottom: 25px; }
.cuadro-flotante p  { font-size: 1.2rem; line-height: 1.7; }

/* =========================================
   7. SISTEMA DE BLOQUES EDITORIALES
   ========================================= */
.bloque-editorial {
    width: 100%;
    margin: 60px auto;
    padding: 0 20px;
}

.bloque-editorial.variante-texto {
    max-width: 800px;
    font-size: 1.15rem;
    line-height: 1.8;
}

.bloque-editorial.variante-imagen { max-width: 1200px; }
.bloque-editorial.variante-imagen figure { margin: 0; width: 100%; }
.bloque-editorial.variante-imagen img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.bloque-editorial.variante-imagen figcaption {
    text-align: right;
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

.bloque-editorial.variante-mixto {
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.bloque-editorial.variante-mixto.texto-izquierda { flex-direction: row; }
.bloque-editorial.variante-mixto.texto-derecha   { flex-direction: row-reverse; }
.bloque-editorial.variante-mixto .mitad-texto    { flex: 1; }
.bloque-editorial.variante-mixto .mitad-media    { flex: 1; }
.bloque-editorial.variante-mixto .mitad-media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* =========================================
   8. REGLAS DE NEGOCIO
   ========================================= */
.filtro-imagen-bn    { filter: grayscale(100%); }
.filtro-imagen-sepia { filter: sepia(80%) contrast(1.1); }
.borde-suavizado     { border-radius: 16px; }
img { transition: filter 0.5s ease, border-radius 0.5s ease; }

.bloque-texto-libre {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    text-align: center;
    color: #130101;
    font-size: 1.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    transition: color 0.3s ease, background-color 0.3s ease, font-size 0.3s ease;
}
.bloque-texto-libre img { max-width: 100%; height: auto; }

.texto-negrita    { font-weight: bold; }
.texto-cursiva    { font-style: italic; }
.texto-subrayado  { text-decoration: underline; }

.modulo-flexible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto;
    padding: 30px 40px;
    border-radius: 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modulo-flexible.texto-izquierda { flex-direction: row; }
.modulo-flexible.texto-derecha   { flex-direction: row-reverse; }
.caja-texto { flex: 1; }

.comillas-gigantes {
    font-family: 'Merriweather', serif;
    font-size: 10rem;
    margin-bottom: 15px;
    color: #1a1a1a;
    line-height: 1;
    transition: color 0.3s ease;
}

.texto-modulo {
    font-size: 1.2rem;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.modulo-flexible[data-tema="oscuro"] .comillas-gigantes,
.modulo-flexible[data-tema="oscuro"] .texto-modulo { color: #ffffff; }

.caja-media {
    flex: 1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}
.caja-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease-out, filter 0.8s ease-out;
    will-change: transform;
}
.caja-media:hover img                        { transform: scale(1.08); filter: contrast(1.1) brightness(1.05); }
.caja-media:hover img.filtro-imagen-bn       { filter: grayscale(100%) contrast(1.1) brightness(1.05); }
.caja-media:hover img.filtro-imagen-sepia    { filter: sepia(80%) contrast(1.2) brightness(1.05); }

/* =========================================
   9. PERFIL PERIODISTA
   ========================================= */
.contenedor-perfil {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
}
.contenedor-perfil.alignleft, .contenedor-perfil.alinear-izq   { justify-content: flex-start; }
.contenedor-perfil.aligncenter, .contenedor-perfil.alinear-centro { justify-content: center; }
.contenedor-perfil.alignright, .contenedor-perfil.alinear-der  { justify-content: flex-end; }

.perfil-periodista-horizontal {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 30px 8px 8px;
    border-radius: 50px;
    margin-top: 15px;
    gap: 15px;
    text-shadow: none;
    transition: background-color 0.3s ease;
    max-width: 100%;
}

.foto-periodista {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.info-periodista {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.nombre-periodista, .info-periodista p:first-child, .info-periodista span:first-child {
    font-weight: bold; font-size: 1.15rem; white-space: nowrap; display: block; margin: 0; line-height: 1.2;
}

.perfil-periodista-horizontal[data-tema="claro"] .nombre-periodista { color: #1a1a1a; }
.perfil-periodista-horizontal[data-tema="oscuro"] .nombre-periodista { color: #ffffff; }

.medio-periodista, .info-periodista p:last-child, .info-periodista span:last-child {
    font-size: 0.9rem; display: block; margin: 0; line-height: 1.2;
}

.perfil-periodista-horizontal[data-tema="claro"] .medio-periodista { color: #777777; }
.perfil-periodista-horizontal[data-tema="oscuro"] .medio-periodista { color: #cccccc; }

/* Compatibilidad Gutenberg Perfil */
div.perfil-periodista-horizontal { display: inline-flex !important; width: max-content !important; }
.wp-block-group.perfil-periodista-horizontal {
    display: grid !important; grid-template-columns: 60px auto !important;
    grid-template-rows: auto auto !important; column-gap: 15px !important; row-gap: 2px !important;
    align-items: center !important; width: fit-content !important; border-radius: 50px !important;
    padding: 8px 30px 8px 8px !important;
}
.wp-block-group.perfil-periodista-horizontal > .wp-block-group__inner-container {
    display: inherit !important; grid-template-columns: inherit !important;
    grid-template-rows: inherit !important; column-gap: inherit !important; row-gap: inherit !important;
}
.wp-block-group.perfil-periodista-horizontal figure { grid-column: 1 !important; grid-row: 1 / 3 !important; margin: 0 !important; }
.wp-block-group.perfil-periodista-horizontal figure img { width: 60px !important; height: 60px !important; border-radius: 50% !important; }
.wp-block-group.perfil-periodista-horizontal p:nth-of-type(1) { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin: 0 !important; line-height: 1.2 !important; }
.wp-block-group.perfil-periodista-horizontal p:nth-of-type(2) { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin: 0 !important; line-height: 1.2 !important; }

/* =========================================
   10. EFECTOS Y GALERÍAS
   ========================================= */
.efecto-aparecer {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform;
}
.efecto-aparecer.visible { opacity: 1; transform: translateY(0); }

.wp-block-gallery.galeria-dinamica { width: 100%; margin-top: 20px; }
.wp-block-image.is-style-efecto-zoom { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: box-shadow 0.3s ease; margin: 0; }
.wp-block-image.is-style-efecto-zoom:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.wp-block-image.is-style-efecto-zoom img { width: 100%; display: block; object-fit: cover; transition: transform 0.6s ease; }
.wp-block-image.is-style-efecto-zoom:hover img { transform: scale(1.08); }
.wp-block-image.is-style-filtro-sepia img, .wp-block-image.filtro-sepia img { filter: sepia(100%); }
.wp-block-image.is-style-filtro-byn img, .wp-block-image.filtro-byn img { filter: grayscale(100%); }
.wp-block-image.efecto-zoom { overflow: hidden; }
.wp-block-image.efecto-zoom img { transition: transform 0.5s ease; }
.wp-block-image.efecto-zoom:hover img { transform: scale(1.08); }
.wp-block-image.foto-esquinas img { border-radius: 15px; }

/* Grid */
.wp-block-gallery.is-style-estilo-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.wp-block-gallery.is-style-estilo-grid .wp-block-image { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.wp-block-gallery.is-style-estilo-grid .wp-block-image img { height: 280px; width: 100%; object-fit: cover; }

/* Masonry */
.wp-block-gallery.is-style-estilo-masonry { display: block !important; column-count: 3; column-gap: 20px; }
.wp-block-gallery.is-style-estilo-masonry .wp-block-image { width: 100% !important; max-width: 100% !important; margin: 0 0 20px 0 !important; break-inside: avoid; display: block !important; }
.wp-block-gallery.is-style-estilo-masonry .wp-block-image img { height: auto; width: 100%; display: block; }

/* Carrusel */
.wp-block-gallery.is-style-estilo-carrusel { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 20px; padding: 10px 5px 30px 5px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.wp-block-gallery.is-style-estilo-carrusel::-webkit-scrollbar { height: 8px; }
.wp-block-gallery.is-style-estilo-carrusel::-webkit-scrollbar-track { background: transparent; }
.wp-block-gallery.is-style-estilo-carrusel::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 10px; }
.wp-block-gallery.is-style-estilo-carrusel .wp-block-image { flex: 0 0 400px; scroll-snap-align: center; }
.wp-block-gallery.is-style-estilo-carrusel .wp-block-image img { height: 350px; width: 100%; object-fit: cover; }

/* =========================================
   11. PORTADA DE IMPACTO Y FUNDIDOS
   ========================================= */
.wp-block-cover.seccion-parallax { display: flex !important; align-items: center !important; justify-content: center !important; }
.wp-block-cover.seccion-parallax .wp-block-cover__inner-container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; }
.wp-block-cover.is-style-portada-biobio { min-height: 100vh !important; background-attachment: fixed; background-position: center; background-size: cover; }
.wp-block-cover.is-style-portada-biobio .wp-block-cover__inner-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: left; }
.wp-block-cover.is-style-portada-biobio h1 { color: white; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); font-family: 'Merriweather', serif; }

.is-style-fundido-oscuro, .is-style-fundido-superior, .is-style-fundido-ambos { position: relative; }
.is-style-fundido-oscuro::after, .is-style-fundido-ambos::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 75%; background: linear-gradient(to bottom, rgba(26,26,26,0) 0%, rgba(26,26,26,0.4) 40%, rgba(26,26,26,0.8) 75%, rgba(26,26,26,1) 100%); z-index: 1; pointer-events: none; }
.is-style-fundido-superior::before, .is-style-fundido-ambos::before { 
    content: ""; 
    position: absolute; 
    top: -2px; 
    left: 0; 
    width: 100%; 
    height: 75px; /* O la altura que prefieras */
    background: linear-gradient(to bottom, rgba(26,26,26,1) 0%, rgba(26,26,26,0) 100%); 
    z-index: 1; 
    pointer-events: none; 
}
.is-style-fundido-oscuro > *, .is-style-fundido-superior > *, .is-style-fundido-ambos > * { position: relative; z-index: 2; }
.is-style-fundido-oscuro > .wp-block-cover__image-background, .is-style-fundido-oscuro > .wp-block-cover__video-background, .is-style-fundido-oscuro > .wp-block-cover__background { z-index: 0 !important; }

.is-style-fundido-oscuro > .wp-block-cover__image-background, .is-style-fundido-oscuro > .wp-block-cover__video-background, .is-style-fundido-oscuro > .wp-block-cover__background,
.is-style-fundido-superior > .wp-block-cover__image-background, .is-style-fundido-superior > .wp-block-cover__video-background, .is-style-fundido-superior > .wp-block-cover__background,
.is-style-fundido-ambos > .wp-block-cover__image-background, .is-style-fundido-ambos > .wp-block-cover__video-background, .is-style-fundido-ambos > .wp-block-cover__background { 
    z-index: 0 !important; 
}
/* =========================================
   12. FOOTER Y CRÉDITOS
   ========================================= */
.footer-biobio { display: flex; justify-content: center; align-items: center; padding: 20px; transition: background-color 0.3s ease; position: relative; z-index: 10; }
.footer-contenido { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin: 0; }
.logo-footer { height: 25px; width: auto; opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease; margin: 0; }
.footer-biobio[data-tema="claro"] .logo-footer { filter: none; }
.footer-biobio[data-tema="oscuro"] .logo-footer { filter: brightness(0) invert(1); }
.logo-footer:hover { opacity: 1; }
.texto-footer { text-align: center; font-size: 0.8rem; opacity: 0.6; margin: 0; transition: color 0.3s ease; }
.footer-biobio[data-tema="claro"] .texto-footer { color: #1a1a1a; }
.footer-biobio[data-tema="oscuro"] .texto-footer { color: #ffffff; }

.seccion-creditos { position: relative !important; display: block !important; width: 100% !important; padding: 60px 20px !important; background-color: #ffffff; z-index: 10 !important; }
.seccion-creditos h2 { color: #4a1c1c; margin-bottom: 30px; font-size: 1.5rem; }
.seccion-creditos p { 
    margin-bottom: 20px; 
    line-height: 1.4; 
    color: inherit; /* Hereda el color configurado en Gutenberg */
}
.seccion-creditos strong { 
    display: block; 
    margin-bottom: 5px; 
}

.seccion-creditos-final { width: 100% !important; max-width: 100% !important; padding: 80px 20px !important; margin: 0 !important; display: block !important; }
.seccion-creditos-final .wp-block-group { max-width: 800px; margin: 0 auto; }

/* =========================================
   13. COMPATIBILIDAD EDITOR WORDPRESS
   ========================================= */
.aviso-editor-biobio { display: none; }
.editor-styles-wrapper .aviso-editor-biobio { display: block; }

.editor-styles-wrapper .seccion-pin-corregida {
    min-height: auto !important; background-attachment: scroll !important; display: block !important; padding: 20px !important; isolation: auto !important;
}

/* Fix Editor: Cancelamos el Grid para que el periodista edite cómodo */
.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin,
.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin > .wp-block-group__inner-container {
    display: flex !important; flex-direction: column !important; isolation: auto !important;
}

.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin > :first-child:not(.wp-block-group__inner-container),
.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin > .wp-block-group__inner-container > :first-child {
    position: relative !important; height: 400px !important; z-index: 0 !important;
}

.editor-styles-wrapper .contenedor-del-cuadro,
.editor-styles-wrapper .seccion-pin-corregida > .contenedor-del-cuadro,
.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin > :nth-child(2):not(.wp-block-group__inner-container),
.editor-styles-wrapper .wp-block-group.is-style-seccion-video-pin > .wp-block-group__inner-container > :nth-child(2) {
    position: relative !important; margin-top: 0 !important; padding: 20px !important; min-height: auto !important; z-index: 10 !important;
}

.editor-styles-wrapper .cuadro-flotante { position: relative !important; top: auto !important; transform: none !important; pointer-events: auto !important; }
.editor-styles-wrapper .cuadro-flotante * { pointer-events: auto !important; }
.editor-styles-wrapper .seccion-video-full video { position: relative !important; height: 400px !important; z-index: 0 !important; }

/* =========================================
   14. RESPONSIVO MAESTRO
   ========================================= */
@media (max-width: 768px) {

    .header-principal { padding: 0; }
    
    /* Cambiamos justify-content a "center" para centrar el contenido */
    .contenedor-header { 
        height: 100%; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        padding: 0 15px; 
    }
    
    /* Aseguramos que el logo tome la posición central */
    .logo-sitio { 
        position: static; 
        transform: none; 
        margin: 0 auto; 
        display: flex; 
        align-items: center; 
    }
    .imagen-logo { height: 28px; width: auto; }
    
    /* Ocultamos las redes sociales en pantallas pequeñas */
    .redes-sociales { 
        display: none !important; 
    }
    .icono-red { width: 30px; height: 30px; font-size: 1.2rem; }

    .seccion-parallax { background-attachment: scroll; height: 60vh; }

    /* Fix Móvil: Dato Anclado (Imagen - Intacto) */
    .seccion-pin-corregida { min-height: 250svh; background-attachment: scroll; }
    .seccion-pin-corregida > .contenedor-del-cuadro { padding-top: 80svh; padding-bottom: 80svh; }

    /* Fix Móvil: Dato Anclado (Video) - bloque Gutenberg is-style-seccion-video-pin */
    .wp-block-group.is-style-seccion-video-pin > :first-child:not(.wp-block-group__inner-container),
    .wp-block-group.is-style-seccion-video-pin > .wp-block-group__inner-container > :first-child {
        height: 100svh !important;
    }

    .wp-block-group.is-style-seccion-video-pin > :nth-child(2):not(.wp-block-group__inner-container),
    .wp-block-group.is-style-seccion-video-pin > .wp-block-group__inner-container > :nth-child(2) {
        padding-top: 80svh !important; 
        padding-bottom: 80svh !important;
    }

    /* Fix Móvil: Dato Anclado (Video) - clase .seccion-pin-corregida:has(video)
       ESTA es la que faltaba: antes se quedaba con el 100vh/100vh de escritorio
       (con !important) porque el override mobile solo cubría la clase de arriba. */
    .seccion-pin-corregida:has(video) > :nth-child(1) {
        height: 100svh !important;
    }
    .seccion-pin-corregida:has(video) > .contenedor-del-cuadro {
        padding-top: 80svh !important;
        padding-bottom: 80svh !important;
    }

    .cuadro-flotante { top: 10svh !important; width: 92%; padding: 30px 20px; }
    .cuadro-flotante h3 { font-size: 1.6rem; }
    .cuadro-flotante p  { font-size: 1rem; }

    .contenido-seccion h1 { font-size: 2rem; }
    .seccion-normal { padding: 40px 20px; }
    .seccion-normal h2 { font-size: 1.6rem; }

    .modulo-flexible, .modulo-flexible.texto-derecha { flex-direction: column; text-align: center; gap: 20px; margin: 40px auto; }
    .comillas-gigantes { font-size: 6rem; }

    .contenedor-perfil.alinear-izq, .contenedor-perfil.alinear-der, .contenedor-perfil.alinear-centro { text-align: center; }
    .perfil-periodista-horizontal { padding: 5px 20px 5px 5px; }
    .foto-periodista { width: 50px; height: 50px; }
    .nombre-periodista { font-size: 1rem; white-space: normal; text-align: left; }

    .galeria-dinamica.estilo-masonry { column-count: 1; }
    .galeria-dinamica.estilo-carrusel .item-galeria { flex: 0 0 85%; }
    .galeria-dinamica.estilo-carrusel .item-galeria img { height: 280px; }
    .galeria-dinamica.estilo-carrusel::-webkit-scrollbar { display: none; }

    main.contenido-principal .seccion-video-full { height: 50vh; clip-path: none; overflow: hidden; }
    main.contenido-principal .seccion-video-full video, main.contenido-principal .seccion-video-full iframe { position: absolute; width: 100%; height: 100%; transform: scale(1.3); z-index: 1; }
    .bloque-editorial.variante-mixto.texto-izquierda, .bloque-editorial.variante-mixto.texto-derecha { flex-direction: column; }
}


/* =========================================================================
   15. PORTADA (SOLO PÁGINA DE INICIO) — TODO ESCOPADO BAJO body.home
   Nada de este bloque debe afectar notas ni ninguna otra página.
   ========================================================================= */

.home .portada-periodistica {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Grid Superior: Lead + Últimas Notas */
.home .grid-portada-principal {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 40px;
}

.home .columna-lead .imagen-lead img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    max-height: 420px;
}

.home .etiqueta-categoria {
    background-color: #005bb5;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin: 15px 0 10px 0;
}

.home .titulo-lead a {
    font-family: 'Merriweather', serif;
    font-size: 2.2rem;
    color: #ffffff !important;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.3s ease;
}
.home .titulo-lead a:hover { color: #66b3ff !important; }

.home .extracto-lead {
    font-size: 1.05rem;
    color: #cccccc !important;
    margin: 12px 0;
    line-height: 1.5;
}

.home .fecha-lead,
.home .fecha-item {
    font-size: 0.85rem;
    color: #cccccc !important;
    display: block;
    margin-top: 4px;
}

/* Sidebar de Últimas Notas */
.home .columna-ultimas-notas {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 30px;
}

.home .header-ultimas h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.3rem;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
    color: #ffffff;
}

.home .lista-ultimas {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home .item-ultima-nota {
    display: flex;
    gap: 15px;
    align-items: center;
}

.home .miniatura-ultima img {
    width: 80px;
    height: 65px;
    object-fit: cover;
    border-radius: 4px;
}

.home .texto-ultima h4 a {
    font-family: 'Merriweather', serif;
    font-size: 0.95rem;
    color: #ffffff !important;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.3s ease;
}
.home .texto-ultima h4 a:hover { color: #66b3ff !important; }

/* Sección de Publicidad */
.home .seccion-publicidad {
    margin: 40px 0;
    text-align: center;
}

.home .contenedor-ad {
    background-color: #f4f4f4;
    border: 2px dashed #cccccc;
    padding: 30px;
    border-radius: 8px;
    color: #777777;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Secciones por Categoría */
.home .seccion-categoria-bloque {
    margin-bottom: 50px;
}

.home .header-seccion-cat {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 3px solid #ffffff;
    padding-bottom: 8px;
    margin-bottom: 25px;
}

.home .header-seccion-cat h2 {
    font-family: 'Merriweather', serif;
    font-size: 1.6rem;
    color: #ffffff;
    margin: 0;
}

.home .ver-mas { color: #66b3ff !important; font-size: 0.9rem; font-weight: bold; text-decoration: none; }
.home .ver-mas:hover { color: #99ccff !important; text-decoration: underline; }

.home .grilla-categoria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Notas sin recuadro blanco (fondo oscuro de portada) */
.home .tarjeta-noticia,
.home .tarjeta-categoria-item,
.home .noticia-lead-principal {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.home .imagen-cat-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.home .contenido-cat-item {
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.home .contenido-cat-item h3 a {
    font-family: 'Merriweather', serif;
    font-size: 1.15rem;
    color: #ffffff !important;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.3s ease;
}
.home .contenido-cat-item h3 a:hover { color: #66b3ff !important; }

.home .contenido-cat-item p {
    font-size: 0.9rem;
    color: #cccccc !important;
    margin: 10px 0 15px 0;
    line-height: 1.4;
    flex-grow: 1;
}

/* Fondo general azul BioBio y estructura, SOLO portada */
.home,
.home .wp-site-blocks {
    background-color: #022c54 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.home header, .home .site-header, .home header div, .home header section, .home header aside,
.home footer, .home .site-footer, .home footer div, .home footer section, .home footer aside {
    background-color: #01162a !important;
    border: none !important;
}

.home .wp-site-blocks > header {
    margin-top: 0 !important;
    max-width: 100% !important;
}

.home header img, .home .custom-logo, .home .site-logo img {
    filter: brightness(0) invert(1) !important;
}

.home header, .home footer,
.home header p, .home footer p,
.home header a, .home footer a,
.home header span, .home footer span,
.home header li, .home footer li,
.home .site-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}
.home header svg, .home footer svg { fill: #ffffff !important; color: #ffffff !important; }
.home header i, .home footer i, .home header .fa, .home footer .fa, .home header .dashicons, .home footer .dashicons { color: #ffffff !important; }

.home .contenedor-grilla-header h2 { color: #ffffff !important; }

/* Efecto zoom en imágenes de portada (hover) */
.home .imagen-lead, .home .miniatura-ultima, .home .imagen-cat-item {
    overflow: hidden;
    border-radius: 6px;
    display: block;
}
.home .imagen-lead img, .home .miniatura-ultima img, .home .imagen-cat-item img {
    transition: transform 0.4s ease;
    display: block;
    width: 100%;
    object-fit: cover;
}
.home .noticia-lead-principal:hover .imagen-lead img,
.home .item-ultima-nota:hover .miniatura-ultima img,
.home .tarjeta-categoria-item:hover .imagen-cat-item img {
    transform: scale(1.08);
}

/* Responsivo de la portada */
@media (max-width: 900px) {
    .home .grid-portada-principal { grid-template-columns: 1fr; }
    .home .columna-ultimas-notas {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 30px;
    }
    .home .grilla-categoria { grid-template-columns: 1fr; }
}

/* =========================================
   17. NAVEGACIÓN Y CARRUSEL DE NOTAS SUGERIDAS
   Azul fijo del front-page — independiente del color que el
   periodista elija para el header/footer de la nota.
   ========================================= */

.botones-navegacion-final {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-regresar-home,
.btn-ir-biobio {
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-regresar-home {
    background-color: #01162a;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-regresar-home:hover {
    background-color: #022c54;
    transform: translateY(-2px);
}

.btn-ir-biobio {
    background-color: #005bb5;
}
.btn-ir-biobio:hover {
    background-color: #0072e0;
    transform: translateY(-2px);
}

/* Título "Revisa las últimas notas": siempre blanco, porque ahora vive
   dentro de .pie-nota-azul (fondo azul fijo), tanto en portada como en notas */
.text-revisa-los-ultimos {
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Merriweather', serif;
    color: #ffffff;
}

/* Pie de nota con azul fijo del front-page: envuelve botones, navegación
   anterior/siguiente y carrusel de sugeridas. Independiente del color
   que el periodista haya elegido para el header/footer de esa nota. */
.pie-nota-azul {
    background-color: #022c54;
    width: 100%;
    padding: 50px 0 40px 0;
}

/* Navegación anterior/siguiente dentro del pie azul */
.evento-nav-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto 10px auto;
    padding: 0 20px;
    flex-wrap: wrap;
}
.nav-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px 18px;
    max-width: 45%;
    transition: background-color 0.3s ease;
}
.nav-btn:hover { background-color: rgba(255, 255, 255, 0.12); }
.nav-btn .arrow { font-size: 1.4rem; font-weight: bold; flex-shrink: 0; }
.nav-btn .nav-text { display: flex; flex-direction: column; overflow: hidden; }
.nav-btn .label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.6; margin: 0; }
.nav-btn .nombre {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Merriweather', serif;
}
.nav-btn.next { flex-direction: row-reverse; text-align: right; margin-left: auto; }

@media (max-width: 768px) {
    .evento-nav-top { flex-direction: column; }
    .nav-btn { max-width: 100%; }
}

/* Carrusel de notas sugeridas (portada y notas) */
.evento-card-wrapper {
    background: #01162a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}
.evento-card-wrapper:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.evento-img-container {
    overflow: hidden;
    height: 180px;
    width: 100%;
}
.evento-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.evento-card-wrapper:hover .evento-img-container img {
    transform: scale(1.08);
}

.evento-nombre-texto {
    font-family: 'Merriweather', serif;
    font-size: 1rem;
    color: #ffffff !important;
    font-weight: bold !important;
    margin: 0;
    line-height: 1.3;
}

.evento-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.evento-texto-link {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.swiper-slide { height: auto; }

/* =========================================
   16. ESTILOS RESPONSIVOS DEL HEADER (SOCIALES)
   Aplica a todo el sitio (header compartido header.php)
   ========================================= */
@media (max-width: 768px) {
    /* Mostrar botón hamburguesa y ocultar redes/buscador de escritorio */
    .burger-btn {
        display: block !important;
    }
    .rrss-menu, .search-desktop, .search-icon, .header-divider {
        display: none !important;
    }
    /* Centrar logo en móvil cuando se usa hamburguesa */
    .logo-sitio {
        position: static !important;
        transform: none !important;
        margin: 0 auto;
    }
    .contenedor-header {
        justify-content: space-between !important;
    }
}