* {
    box-sizing: border-box;
  }

  ::selection {
    background-color: #fbeba9;
    color: #474747;
  }


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

 

 h1{
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 40px;
 }

 h2{
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  margin-top: -15px;
 }

 h3 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}


p {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

  body {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: #f8f4de; /* Color de fondo por defecto */
  }
  
  /* Degradado solo para la página de incendios */
  body.pagina-incendios {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #e2cdaf; /* Color de respaldo */
    background-image: linear-gradient(to bottom, #efc689 5%, #46341a00 500px, #f8f4de 600px, #f8f4de 50%) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
  }

  .nunito-uniquifier {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

 




/* Estructura principal */
.container > header {
  background-color: #1d1d1d;
  color: #ffffff;
  padding: 10px 0;
  text-align: center;
  position: relative;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Contenedor principal para la página de incendios */
.pagina-incendios .container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  position: relative;
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pagina-incendios .container > main {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Se eliminó el pseudo-elemento ::before que causaba conflicto con el degradado */

/* Contenedor principal */
.incendios-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

/* Contenido de la noticia */
.noticia {
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ================ */
/* Estilos Cabecera */
/* ================ */

header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    background-image: url('../img/textura3.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10;
}

.language-links {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 11;
}

.language-links a {
    text-decoration: none;
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: rgb(219, 219, 219);
    font-size: 12px;
}

.language-links a:first-child {
    border-bottom: 1px solid rgb(219, 219, 219);
}

.language-links a:nth-child(3) {
    opacity: 0.5;
}
  
  
  nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 1em;
    width: 100%;
    font-family: "Nunito", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:rgb(219, 219, 219);
    font-size: 13px;
  }


  nav#index a[href="index.html"]:after {
    content: "";
    display: block;
    border-bottom: 1px solid rgb(251, 235, 169);
  }

  nav#about a[href="about.html"]:after {
    content: "";
    display: block;
    border-bottom: 1px solid rgb(251, 235, 169);
  }

  nav#premios a[href="premios.html"]:after {
    content: "";
    display: block;
    border-bottom: 1px solid rgb(251, 235, 169);
  }

  nav#charlas a[href="charlas.html"]:after {
    content: "";
    display: block;
    border-bottom: 1px solid rgb(251, 235, 169);
  }

  nav#contacto a[href="contacto.html"]:after {
    content: "";
    display: block;
    border-bottom: 1px solid rgb(251, 235, 169);
  }




  
nav a:hover {
  background-color: #fbeba9;
  color: #333;
  transition: background-color 0.3s ease-in-out;
  padding-left: 0px;
  padding-right: 0px;
}
  

  
  .name {
    display: flex;
    flex-direction: column;
    text-align:center;
    color:rgb(255, 255, 255);
    margin-top: 10px;
  }




.name span{
  
  color: rgb(251, 235, 169, 1);
  padding: 0px 0px;
  transition: background-color 0.3s ease-in-out;
}
 

.name img {
  width: 420px;
  padding-top: 20px;
  padding-bottom: 15px;
  margin: 0 auto;
}



  .year {
    font-size: 16px;
  }



/*main*/

main {
  /* border: 1px solid #577387; */ /* linea para ver caja */
  padding: 1em;
  display: flex;
  flex-direction: wrap;
  justify-content: center;
  color:rgb(52, 52, 52);
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 auto;
  min-height: calc(100vh - 85px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}


.empresas {
  /*border-top: 1px solid #577387;*/
  display:flex;
  justify-content: center;
  text-align: center;
  width: 90%;
 /* padding-left: 5%; */
  font-size: 21px;
  padding-top: 1em;
  margin-top: 1em;
  color: #454545;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}



article {
  /* border: 1px solid #577387; */ /* linea para ver caja */
  border-radius: 0em;
  height: 100%;
  padding-top: 0.5em;
  text-align:center;
  width: 305px;
  margin: 5px 50px 20px 0;
  user-select: text;
}






/*
article:hover {
 background-color:rgb(249, 249, 249);
  box-shadow: 0 0 0px #577387; /* sombra
  border: 0px solid #577387; /* borde 
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;
}
*/





article:hover img {
  transform: scale(1.2);
  transition: transform 0.5s ease-in-out;
}

article:hover video {
  transform: scale(1.2);
  transition: transform 0.5s ease-in-out;
}

article .video {
  overflow: hidden;
  border-radius: 15px 15px 15px 0;
  height: 250px;
  width: 300px; 
}

article .img {
  overflow: hidden;
  border-radius: 15px 15px 15px 0;
  height:250px;
  width: 300px;
  position: relative;
  margin: 0 auto;
}

.premiossnd {
  position: relative;
  top: 10px;
  left: 130px;
  width: 50px;
  height: 24px;
  background-image: url('../img/premios/snd.png');
  background-size: cover;
  z-index: 1;
}

.premiossnd:hover:after {
  content: "award";
  position: absolute;
  top: 30px;
  left: 10px;
  padding: 00px;
  z-index: 1;
  color: #454545;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 14px;
}

.premiosmalofiej {
  position: relative;
  top: 10px;
  left: 110px;
  width: 90px;
  height: 24px;
  background-image: url('../img/premios/malofiej.png');
  background-size: cover;
  z-index: 1;
}

.premiosmalofiej:hover:after {
  content: "award";
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 00px;
  z-index: 1;
  color: #454545;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 14px;
}




article p {
  width: 290px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 5px;
  color: #161616;
  font-size: 16px;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

article h3 {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  color:rgb(0, 0, 0);
  font-size: 16px;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

article:hover h3 span {
  background-color:rgb(251, 235, 169);
  color: #333;
  padding: 0px 0px;
  transition: background-color 0.3s ease-in-out;
}


article .italic {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  color:rgb(0, 0, 0);
  font-size: 11px;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: regular;
  text-transform: uppercase;
  letter-spacing: 1px;
}



.articles1 {
  display:flex;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap; /* los elementos que no caben en el ancho, bajan abajo */
  max-width: 1790px;
  margin: 0 auto; /* centra el div en la pantalla */
}

.tags {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #949494;
  font-size: 12px;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}









/*about*/

mainabout {
  padding: 1em;
  color:rgb(52, 52, 52);
  flex-wrap: wrap;
}

.about {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
max-width: 1500px;
margin-top: 40px;
margin: 0 auto;
}

.about img {
  padding-top: 20px;
}


.textoabout {
max-width: 400px;
margin-left: 50px;
line-height: 1.7;
padding-bottom: 20px;
}

.foto {
  display: flex;
flex-direction: column;
flex-wrap: wrap;
}



.foto img {
  border-radius: 0 0 30px 0;
  max-width: 100%;
  max-height: 100vh; /* o cualquier otra altura que desees */
  width: auto;
  height: auto;
}


.clientes {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 1500px;
  text-align: center;
  border-top: 1px solid rgb(130, 130, 130);
  padding-top: 20px;
  padding-bottom: 20px;
  }


  .logosclientes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    align-items: center;
    max-width: 1500px;
  }

  .logosclientes img {
    height: auto;
    width: 100px;
    padding: 10px;
  }




/*premios*/

.premios {
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}



.textosobremi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.textosobremi p {
  margin-bottom: 10px;
  margin: 5px;
}

.premioindividual {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.individual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  line-height: 0.0;
  padding-bottom: 50px;
  padding-right: 10px;
}

.individual p, h3, h4 {
  margin-bottom: 5px;
}

.individual img {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 100px;
  width: 100px;
}




/*charlas*/

.charlasyenseñanza {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.jurado {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin-top: 40px;
}

.jurado img {
  display: flex;
  justify-content: center;
  height: 600px;
  margin: 0 auto;
}


.charlas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 795px;
  margin-top: 50px;
  text-align: center;
}

.miembrojurado {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 265px;
  padding: 15px;
  text-align: left;
}

.conferencias {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 265px;
  padding: 15px;
  text-align: left;
  border-left: 1px solid rgb(166, 166, 166);
  border-right: 1px solid rgb(166, 166, 166);
}

.clases {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 265px;
  padding: 15px;
  text-align: left;
}


.fotocharla {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.fotocharla img {
  border-radius: 0 0 30px 0;
  max-width: 100%;
  max-height: 100vh; /* o cualquier otra altura que desees */
  width: auto;
  height: auto;
}


/*contacto*/
.contacto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1700px;
  }


.formulario {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 10px;
}


.formulario a {
  padding: 5px;
}

.formulario a:hover {
  position:relative;
}

.formulario a:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: rgb(251, 235, 169);
}






/*footer*/

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  gap: 50px;
  width: 100%;
  flex-shrink: 0; /*para fijar el footer en parte baja*/
  color:rgb(255, 255, 255);
  background-image: url('../img/textura3.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

social{
  
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

footer img {
        width: 20px;
       }
 




 


/* Estilos para el popup */
.popup, .popup2, .popup3, .popup4, .popup5, .popup6, .popup7, .popup8, .popup9, .popup10, .popup11, .popup12, .popup13, .popup14, .popup15, .popup16, .popup17, .popup18, .popup19, .popup20, .popup21, .popup22, .popup23, .popup24, .popup25, .popup26, .popup27 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 2;
}


.img:hover {
  cursor: pointer;
}

.popup img, .popup2 img, .popup3 img, .popup4 img, .popup5 img, .popup6 img, .popup7 img, .popup8 img, .popup9 img, .popup10 img, .popup11 img, .popup12 img, .popup13 img, .popup14 img, .popup15 img, .popup16 img, .popup17 img, .popup18 img, .popup19 img, .popup20 img, .popup21 img, .popup22 img, .popup23 img, .popup24 img, .popup25 img, .popup26 img, .popup27 img {
  position: absolute;
  top: 10%;
  left: 20%;
  transform: none;
  max-width: 80%;
  max-height: 80%;
  
}

.cerrar-popup, .cerrar-popup2, .cerrar-popup3, .cerrar-popup4, .cerrar-popup5, .cerrar-popup6, .cerrar-popup7, .cerrar-popup8, .cerrar-popup9, .cerrar-popup10, .cerrar-popup11, .cerrar-popup12, .cerrar-popup13, .cerrar-popup14, .cerrar-popup15, .cerrar-popup16, .cerrar-popup17, .cerrar-popup18, .cerrar-popup19, .cerrar-popup20, .cerrar-popup21, .cerrar-popup22, .cerrar-popup23, .cerrar-popup24, .cerrar-popup25, .cerrar-popup26, .cerrar-popup27 {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}





      /* Estilos para móvil */
      @media (max-width: 768px) {
  
        article {
          /* border: 1px solid #577387; */ /* linea para ver caja */
          border-radius: 0em;
          height: 100%;
          padding-top: 0.5em;
          text-align:center;
          width: 305px;
          margin: 0px 0px 50px 0px;
          user-select: text;
        }
        
        .textoabout {
          max-width: 400px;
          margin: 20px;
          line-height: 1.7;
          padding-bottom: 20px;
          }
        
        .individual {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-wrap: wrap;
            text-align: center;
            line-height: 0.0;
            padding-bottom: 50px;
            transform: scale(0.8);
          }
        
        .conferencias {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            max-width: 265px;
            padding: 15px;
            text-align: left;
            border-top: 1px solid rgb(166, 166, 166);
            border-bottom: 1px solid rgb(166, 166, 166);
            border-left: 1px solid rgb(255, 255, 255);
            border-right: 1px solid rgb(255, 255, 255);
        }
        
        .name img {
          width: 420px;
          padding-top: 20px;
          padding-bottom: 15px;
          margin: 0 auto;
          transform: scale(0.8);
        }
        
        .popup img {
          position: absolute;
          top: 20%;
          left: 0%;
          transform: none;
          max-width: 100%;
          max-height: 100%;
        }
        
        article:hover img {
           transform: scale(1); 
            transition: transform 0.5s ease-in-out; 
        }
        
        } 
        



/*ESTILOS NOTICIA INCENDIOS*/
/* Noticia */
.noticia { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

/* Antetítulo con Nunito Sans Light a 24px, centrado y mismo ancho que titular */
.antetitulo {
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 300; /* Light */
  font-size: 24px;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  padding: 0; /* elimina padding interno */
  width: 100%; /* ocupa todo el ancho disponible */
  box-sizing: border-box; /* incluye padding y border en el ancho */
}
/* Titular con Nunito Sans Black a 67pt */
.titular {
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 900; /* Black */
  font-size: 67px;
  margin: 20px auto;
  line-height: 0.95; /* interlineado más pequeño */
}
.subtitulos h3 { font-size: 1rem; margin: 1rem 0 .25rem; color: #333; }
/* Subtítulos sin bullets y separados por líneas */
.subtitulos ul {
  margin: 0;
  padding: 0;
  list-style: none; /* quita los bullets */
}

.subtitulos li {
  
  padding: 10px;/* espacio entre elementos */
  position: relative; /* para posicionar las líneas */
}

.subtitulos li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0px; /* posición de la línea */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333; /* color del titular (ajusta si es diferente) */
}

.subtitulos ul { margin: 0 0 1rem 1.25rem; padding: 0; }


/* Metadatos con fecha y firma en líneas separadas */
.metadatos {
  display: flex;
  flex-direction: column;
  margin: 22px;
}

.metadatos time {
  font-weight: bold;
}

.metadatos .firma {
  font-weight: normal;
}

.metadatos .firma strong {
  font-weight: bold;
}


.compartir {
  display: flex;
  align-items: center;
  justify-content: center; /* centra horizontalmente */
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  max-width: 850px; /* mismo ancho que el titular */
  margin: 0 auto 1.25rem auto; /* centra el contenedor */
}
.compartir span { color: #333; font-weight: 600; }
/* Iconos de compartir con Font Awesome - tamaño ajustable */
.compartir a {
  color: #333;
  font-size: 20px; /* cambia este valor para ajustar el tamaño */
  transition: color 0.3s ease;
}
.compartir a:hover { color: rgb(161, 80, 56); /* color azul de LinkedIn */ }
.compartir a#share-fb:hover { color:rgb(161, 80, 56); /* color azul de Facebook */ }
.compartir a#share-x:hover { color: #000; /* color negro de X */ }



.container > main .bloque p {
  margin: 0 0 .75rem;
  line-height: 1.6;
  color: #222;
}



/* Forzar ancho de bloques - muy específico */
/* Solo los párrafos dentro de .bloque tendrán el ancho de 850px */
.container > main > article > section.bloque p {
  max-width: 850px !important;
 
  line-height: 1.6 !important;
  color: #736f6f !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* Embeds responsive */
.responsive-embed { position: relative; width: 100%; }
.responsive-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ==================== */
/* ESTILOS INCENDIOS 2025 */
/* ==================== */
.incendios-main {
    --color-texto: #333;
    --color-titular: #000;
    --color-separador: rgb(48, 51, 57);
    --espaciado: 20px;
    
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--espaciado);
}

.incendios-main .noticia {
    padding: 0;
    margin: 0;
}

/* Tipografía */
.incendios-main .antetitulo {
    color: var(--color-texto);
    font-size: 20px;
    margin: 50px 0 15px;
}

.incendios-main .titular {
    color: var(--color-titular);
    font-size: 50px;
    margin: 0 0 var(--espaciado);
    line-height: 1.2;
}

.incendios-main .subtitulos {
    margin: var(--espaciado) 0;
}

.incendios-main .subtitulos ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.incendios-main .subtitulos li {
    margin-bottom: 00px;
    line-height: 1.5;
    font-size: 18px;
}

/* Metadatos y firma */
.incendios-main .metadatos {
    display: flex;
    justify-content: space-between;
    margin: var(--espaciado) 0;
    color: #666;
    font-size: 0.9em;
}

.incendios-main .firma {
    font-weight: 600;
}

/* Elementos de interfaz */
.incendios-main .linea-separadora {
    border: none;
    height: 1px;
    background-color: var(--color-separador);
    margin: var(--espaciado) 0;
}

.incendios-main .compartir {
    display: flex;
    gap: 15px;
    margin: var(--espaciado) 0;
}

.incendios-main .share-btn {
    color: #555;
    font-size: 1.2em;
    transition: color 0.2s ease;
}

.incendios-main .share-btn:hover {
    color: #1a73e8;
}

/* Bloques de contenido */
.incendios-main .bloque {
    margin-bottom: 75px;
}

.incendios-main .bloque p {
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Embeds responsivos */
.incendios-main .responsive-embed {
    margin: var(--espaciado) 0;
    position: relative;
    width: 100%;
}

/* Gráfico de interfaz más ancho */
#grafico-interfaz {
    width: 100% !important;
    max-width: 837px !important;
    max-height: 800px !important;
    margin: 00px auto;
    padding: 0px 0 !important;
    display: block !important;
    position: relative !important;
    border: none !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* Contenido principal - por defecto 850px */
.incendios-main > *:not(.grafico-ancho) {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para el contenedor principal del artículo */
.incendios-main > article.noticia {
    max-width: 1200px !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Ancho por defecto para elementos directos del artículo */
.incendios-main > article.noticia > * {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Secciones con IDs específicos */
#seccion-antetitulo,
#seccion-titular,
#seccion-subtitulos,
#seccion-metadatos,
#seccion-compartir {
    max-width: 850px !important;
}

/* Gráficos */
#grafico-subtitulos {
    max-width: 900px !important;
    max-height: 1200px !important;
    margin-left: auto;
    margin-right: auto;
    border: none !important;
}

/* Asegurar que el iframe de este gráfico no herede alturas genéricas */
#grafico-subtitulos iframe {
    width: 100% !important;
    height: 790px !important;
    max-height: 1200px !important;
    display: block;
    border: 0;
}

/* Larouco: estilos específicos solo para este gráfico */
#incendio_larouco_detalle {
    max-width: 855px; /* contenedor centrado del tamaño del gráfico */
    margin-left: auto;
    margin-right: auto;
}
#incendio_larouco_detalle iframe {
    width: 855px !important; /* sobrescribe inline width del iframe solo aquí */
    display: block;
    margin: 0 auto;
}

/* Larouco mobile: full-bleed alineado con paddings del layout para evitar corte a la derecha */
@media (max-width: 837px) {
  #incendio_larouco_detalle {
    /* La página usa 15px (article) + var(--espaciado,20px) (main) de padding lateral */
    margin-left: calc(-1 * (15px + var(--espaciado, 20px)));
    margin-right: calc(-1 * (15px + var(--espaciado, 20px)));
    width: calc(100% + 2 * (15px + var(--espaciado, 20px)));
    max-width: none;
    padding: 0;
  }
  #incendio_larouco_detalle iframe {
    width: 100% !important;
    max-width: none !important;
    height: 450px !important; /* alto móvil específico */
    min-height: 450px !important;
    display: block;
  }
}

/* Altura específica para móvil */
@media (max-width: 767px) {
  #grafico-subtitulos iframe {
    height: 410px !important;
    min-height: 410px !important;
  }
}

/* Bloques de contenido */
#bloque-1,
#bloque-2,
#bloque-3 {
    max-width: 1200px !important;
}

/* Asegurar que los párrafos dentro de bloques respeten el ancho */
.bloque p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Líneas separadoras */
#linea-separadora-1 {
    max-width: 100% !important;
    margin: 2rem auto !important;
}

/* Estilos para el gráfico ancho */
.grafico-ancho {
    width: 100%;
    max-width: 1200px !important;
    margin: 20px auto !important;
    padding: 20px 0;
    background: #f9f9f9;
    position: relative;
    display: block;
    box-sizing: border-box;
}

/* Asegurar que el iframe ocupe todo el ancho */
.grafico-ancho iframe {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    border: 1px solid blue !important; /* Solo para depuración */
}

/* Asegurar que el contenedor principal no tenga overflow y esté centrado */
.incendios-main {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
    box-sizing: border-box;
}

#grafico-interfaz {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: transparent;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

#grafico-interfaz > div {
    position: relative;
    width: 100%;
    padding-bottom: 120%; /* Proporción más vertical para móviles */
    height: 0;
    overflow: hidden;
}

#grafico-interfaz iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    border: none !important;
    box-sizing: border-box;
}

/* Ajustes para móviles */
@media (max-width: 599px) {
    .incendios-main {
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    #grafico-interfaz {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        height: auto !important;
        display: block;
        position: relative;
    }
    
    #grafico-interfaz > div {
        position: relative !important;
        width: 100% !important;
        padding-bottom: 95% !important; /* Aumentado para dar más altura */
        height: 0 !important;
        overflow: visible;
        min-height: 700px; /* Altura mínima para asegurar que sea visible */
    }
    
    #grafico-interfaz iframe {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 700px; /* Asegura que el iframe tenga suficiente altura */
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    /* Asegurar que el SVG no tenga escalado */
    #grafico-interfaz iframe svg {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
    }
    
    .noticia {
        padding: 1rem 10px;
    }
}

/* Ajustes para tablets */
@media (min-width: 600px) and (max-width: 899px) {
    #grafico-interfaz > div {
        padding-bottom: 90%;
    }
}

/* Contenedor principal */
#grafico-interfaz {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: visible;
}

/* Contenedor del iframe */
.incendios-main .responsive-embed {
    width: 100%;
    min-height: 830px;
    position: relative;
    margin: 0 0 2rem 0;
    padding: 0;
    display: block;
    z-index: 1;
    overflow: visible;
}

/* Estilos del iframe */
.incendios-main .responsive-embed iframe {
    width: 100%;
    height: 830px;
    min-height: 830px;
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Ajustes para móvil */
@media (max-width: 767px) {
    .incendios-main .responsive-embed {
        min-height: 450px;
    }
}

/* Ajustes para tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .incendios-main .responsive-embed {
        min-height: 700px;
    }
}

/* Ajustes responsivos */
@media (min-width: 768px) {
  .noticia { padding: 2rem; }
}

/* Noticia sin fondo y a 850px */
.container > main,
.noticia,
.cabecera-noticia {
  background: transparent;
  max-width: 100%;
  margin: 0 auto;
}

.noticia {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 15px;
  box-sizing: border-box;
}

/* Anula el ancho forzado del selector global 'article' en móvil */
@media (max-width: 768px) {
  .noticia {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    padding: 1rem 1.25rem;
    text-align: left; /* evita centrado heredado de article */
  }
}

/* Fondo único con degradado en la página (40px) */
body {
  background: linear-gradient(to bottom, #e2cdaf 0 40px, #f8f4de 40px) !important;
  background-image: none !important; /* por si persiste una textura previa en body */
}

/* Asegurar que el contenido no tenga fondos que lo tapen */
.container > main {

  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.noticia {
  background: transparent !important;
}

html, body {
  background-color: #f8f4de !important;
  background-image: none !important;
}

/* Fondo de página: degradado 400px + color base */
html, body { min-height: 100%; }

body {
  margin: 0;
  background: linear-gradient(to bottom, #e2cdaf 0 400px, #f8f4de 400px);
  background-color: #f8f4de;
  background-image: none;
}


.linea-separadora {
  border: 0;
  height: 1px;
  background-color: #000;
  margin: 0 auto 20px auto; /* 0 arriba, 20px abajo, auto izquierda y derecha */
  max-width: 850px; /* mismo ancho que el titular */
  width: 100%;
}

/* Ajustes para móvil */
@media (max-width: 767px) {
  /* Evitar espacio en blanco bajo el footer: no usar background fijo en móvil */
  body.pagina-incendios {
    background-attachment: scroll !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
  }
  
  /* Evitar encadenamiento de scroll (solo scroll del documento) */
  html, body {
    overscroll-behavior: none;
  }

  /* Quitar alturas mínimas que pueden generar espacio extra */
  .pagina-incendios .container,
  .pagina-incendios .container > main {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important; /* evitar que el flex limite el alto en móvil */
  }

  /* Reset general */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* el documento maneja el scroll normalmente */
    position: relative !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  
  /* Evitar resets globales agresivos que afectan al layout */
  /* En su lugar, ajustar solo los elementos de embeds/secciones */
  .responsive-embed,
  #grafico-interfaz,
  section.bloque {
    overflow: visible !important;
    height: auto !important;
    position: relative !important;
  }
  
  /* Contenedores principales (excluir header/footer y contenedor raíz) */
  .container > main,
  .incendios-main,
  article.noticia,
  section.bloque,
  .grafico-container,
  .mapa-container,
  #grafico-interfaz {
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* El embed no debe tener padding lateral en móvil */
  .responsive-embed {
    padding: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Hacer que el embed llegue a los bordes del viewport dentro de .bloque */
  .bloque > .responsive-embed {
    margin-left: -10px !important; /* compensa el padding de .bloque */
    margin-right: -10px !important;
  }

  /* Contenedor raíz a ancho completo sin padding lateral */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Asegurar solo el header a ancho completo sin padding lateral */
  header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Iframes */
  iframe {
    overflow: hidden !important;
    max-height: 100% !important;
    position: relative !important;
    display: block !important;
  }
  
  /* Secciones */
  section.bloque {
    padding: 15px 0 !important;
    margin: 0 !important;
    clear: both;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
  }
  
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  main {
    padding: 0.5em;
  }
  
  .bloque {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  
  #grafico-interfaz {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0px !important;
    overflow: visible !important;
  }
  
  #grafico-interfaz iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Overrides fuertes y consistentes para el bloque del gráfico en móvil */
  #grafico-interfaz > div {
    position: static !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    height: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  #grafico-interfaz iframe {
    position: static !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 0 !important;
    border: none !important;
    display: block !important;
    overflow: hidden !important;
  }
  
  /* Asegurar que el header no cause desplazamiento */
  header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Ajustar el logo en móviles */
  .name img {
    max-width: 90%;
    height: auto;
  }
  
  /* Ajustar la navegación en móviles */
  nav {
    flex-wrap: wrap;
    padding: 0.5em;
  }
  
  nav a {
    font-size: 12px;
    padding: 0 5px;
  }
}

/* Estilos para la animación de incendios */
#animacion-incendios object {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  pointer-events: none;
  /* Forzar la reproducción del GIF */
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* Control de visualización para móviles y escritorio */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

/* Mostrar solo la versión móvil en pantallas pequeñas */
@media (max-width: 500px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
}

/* Asegurar que no haya efectos de hover en el contenedor */
#animacion-incendios figure:hover object,
#animacion-incendios figure:hover img {
  transform: none !important;
  transition: none !important;
}

/* Estilos para el contenedor del título y subtítulo */
.contenedor-titulo {
  max-width: 900px;
  margin: 0 auto 0.5rem;
  text-align: center;
  padding: 0 15px;
}

/* Estilos para el título de la sección */
#animacion-incendios .titulo-seccion {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.3;
  margin: 0 auto 0.5rem;
  color: #333;
  max-width: 600px;
  width: 100%;
  text-align: center;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Ajustes para móviles */
@media (max-width: 767px) {
  #animacion-incendios .titulo-seccion {
    max-width: 350px;
    font-size: 22px;
  }
  
  #animacion-incendios .subtitulo-seccion {
    max-width: 350px;
    font-size: 15px;
  }
}

/* Estilos para el subtítulo de la sección */
#animacion-incendios .subtitulo-seccion {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  color: #666;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  text-align: center !important;
  padding: 0 15px;
  box-sizing: border-box;
  line-height: 1.5;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
  .titulo-seccion {
    font-size: 22px;
  }
  
  .subtitulo-seccion {
    font-size: 15px;
  }
}