/* ========================================
   WASTE MAGAZINE · PLANTILLA BASE MODERNIZADA
   CSS único ordenado
======================================== */

/* ========================================
   1. BASE
======================================== */
html{
  scroll-behavior:smooth;
}

body.waste-maqueta-2026{
  margin:0;
  background:#2a2c31;
}

.waste-maqueta-2026 img{
  max-width:100%;
  height:auto;
}

/* ========================================
   SEPARACION HR CON H1
======================================== */

.waste-maqueta-2026 hr{
    margin-top: 0;
    margin-bottom: 2px;
}

.waste-maqueta-2026 h1{
    margin-top: 0;
    margin-bottom: 2px;
    padding-top: 0;
}

/* ========================================
   2. COOKIES
======================================== */
#waste-cookie-banner{
  display:none;
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:99999;
  max-width:1100px;
  margin:0 auto;
  background:#1f2329;
  color:#e6e6e6;
  border:1px solid #4c534c;
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  padding:18px 20px;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

#waste-cookie-banner .waste-cookie-inner{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
}

#waste-cookie-banner .waste-cookie-text{
  flex:1 1 auto;
  font-size:14px;
  line-height:1.45;
}

#waste-cookie-banner .waste-cookie-text strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
}

#waste-cookie-banner .waste-cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:0 0 auto;
}

#waste-cookie-banner button{
  border:none;
  cursor:pointer;
  padding:10px 14px;
  font-size:13px;
  line-height:1;
}

#waste-cookie-accept{
  background:#e1cfab;
  color:#000;
}

#waste-cookie-reject{
  background:#4c534c;
  color:#fff;
}

#waste-cookie-banner a{
  color:#e1cfab;
  text-decoration:underline;
}

/* ========================================
   3. BOTÓN VOLVER ARRIBA
======================================== */
.boton-arriba{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

.boton-arriba.visible{
  opacity:1;
  pointer-events:auto;
}

.boton-arriba img{
  width:45px;
}

/* ========================================
   4. CABECERA Y MENÚ
======================================== */
.header h1 a{
  color:#e1cfab;
  text-decoration:none;
}

.header h1 a:hover,
.header h1 a:visited,
.header h1 a:active{
  color:#e1cfab;
  text-decoration:none;
}
.header-wrap{
  width:100%;
  background:#000;
  border-bottom:4px solid #7e7e7e;
  position:relative;
  z-index:2000;
  overflow:visible;
}

.header{
  max-width:1200px;
  margin:0 auto;
  min-height:70px;
  padding:0 15px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.header-brand{
  display:flex;
  align-items:baseline;
  gap:20px;
  min-width:0;
}


.header h1{
  margin:10px 0 10px 40px;
  font-family:'Oswald',sans-serif;
  font-size:30px;
  font-weight:500;
  color:#e1cfab;
}

.header h1 span{
  font-weight:300;
}

.header h4{
  margin:10px 0 10px 20px;
  font-family:'Oswald',sans-serif;
  font-size:16px;
  font-weight:300;
  color:#999;
}

.header-menu-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 0;
  background:none;
  border:none;
  color:#e6e6e6;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  font-weight:300;
  text-transform:uppercase;
}

.burger-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.burger-lines span{
  display:block;
  width:22px;
  height:2px;
  background:#e6e6e6;
}

.waste-menu-panel{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1200px;
  padding:0 15px 14px;
  box-sizing:border-box;
  z-index:2500;
  font-family:'Oswald',sans-serif;
}

.waste-menu-panel.is-open{
  display:block;
}

.menu-box{
  width:min(38vw,430px);
  min-width:290px;
  margin-left:auto;
  padding:8px 16px 12px;
  box-sizing:border-box;
  background:#4c534c;
  color:#e6e0d3;
}

.menu-box-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:2px;
}

.menu-close{
  padding:0;
  background:none;
  border:none;
  color:#e6e0d3;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:22px;
  font-weight:300;
  line-height:1;
}

.menu-close:hover{
  color:#fff;
}

.menu-root,
.submenu{
  margin:0;
  padding:0;
  list-style:none;
}

.menu-block{
  border-bottom:1px solid rgba(223,233,252,.22);
}

.menu-block:last-child{
  border-bottom:none;
}

.block-toggle{
  width:100%;
  padding:10px 0;
  background:none;
  border:none;
  color:#e6e0d3;
  text-align:left;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:15px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.submenu{
  display:none;
  padding:0 0 4px 10px;
}

.submenu.is-open{
  display:block;
}

.submenu-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 14px;
  align-items:center;
  column-gap:6px;
  width:100%;
}

.submenu-row a,
.submenu-row span,
.submenu > li > a{
  display:block;
  padding:6px 0;
  color:#e6e0d3;
  text-decoration:none;
  text-align:left;
  font-family:'Oswald',sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.1;
}

.submenu-row a,
.submenu-row span{
  justify-self:start;
}

.submenu-toggle-inner{
  width:14px;
  min-width:14px;
  margin:0;
  padding:0;
  background:none;
  border:none;
  color:#e6e0d3;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1;
  text-align:center;
}

.block-toggle:hover,
.submenu-row a:hover,
.submenu-row span:hover,
.submenu > li > a:hover,
.submenu-toggle-inner:hover{
  color:#fff;
}

/* ========================================
   5. LAYOUT PRINCIPAL MODERNO
======================================== */
.bloque-central-2col{
  max-width:1200px;
  margin:0 auto 60px;
  background:#4c4835;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.86fr) minmax(280px,1fr);
  align-items:start;
}

.caja1-2col,
.caja2-2col{
  min-width:0;
}

.caja1-2col{
  background:#efefef;
  color:#f3f2f0;
}

.caja1-2col a{
  color:#4c2600;
}

.caja1-2col h4{
  color:#666;
  font-family:'Oswald',sans-serif;
  font-size:12px;
}

.caja2-2col{
  padding:10px;
  box-sizing:border-box;
  background:#303331;
  color:#f3f2f0;
}

/* ========================================
   6. PORTADA / HERO
======================================== */
.portada-waste{
  position:relative;
  display:block;
  width:100%;
margin-top:-20px !important;
}

.receptor-contenido-1{
  width:100%;
}

.receptor-contenido-1 img{
  display:block;
  width:100%;
}

.receptor-contenido-2{
  display:inline-block;
  max-width:90%;
  padding:15px 20px;
  background:rgba(30,34,40,.85);
}

.receptor-contenido-2 h5{
  margin:0;
  font-size:14px;
  opacity:.85;
}

.receptor-contenido-2 h1{
  margin:5px 0 0;
  font-size:28px;
  line-height:1.1;
}

.cabecera-pagina-overlay{
  position:absolute;
  top:20px;
  left:20px;
  z-index:3;
  padding:10px 10px;
  background:rgba(0,0,0,.55);
}

.cabecera-pagina-overlay h1{
  margin:0;
  color:#fff;
  font-size:26px;
  line-height:-1.1;
font-weight:200;
}

.overlay-titulo{
  position:absolute;
  right:20px;
  bottom:40px;
  left:20px;
  z-index:2;
}


@media (max-width: 768px) {

  .caja1-2col .bloque-inicio-cabecera {
    margin-top: 35px !important;
  }

  .portada-waste .overlay-titulo .receptor-contenido-2 h1,
  .portada-waste .overlay-titulo .receptor-contenido-2 h1 a,
  .portada-waste .overlay-titulo .receptor-contenido-2 h1 span {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

}


/* ========================================
   8. BLOQUE REUTILIZABLE: SECCIONES WASTE MAGAZINE
   Tarjetas visuales de acceso a secciones principales
   Bloque común reutilizable de Waste Magazine
======================================== */

.bloque-secciones-waste{
  background:#efefef;
  padding:25px 0 30px 0;
  clear:both;
  box-sizing:border-box;
}

.bloque-secciones-waste .bloque-titulo{
  width:80%;
  margin:0 auto 12px auto;
  text-align:left;
  color:cadetblue;
  font-family:'Oswald', Arial, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0.5px;
}

.bloque-secciones-waste .bloque-titulo strong,
.bloque-secciones-waste .bloque-titulo b{
  font-weight:700;
}

.bloque-secciones-waste .grid-secciones{
  width:80%;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}

.bloque-secciones-waste .card-seccion{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:10px;
  text-decoration:none;
  color:#ffffff !important;
}

.bloque-secciones-waste .card-seccion img{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
  transition:transform .35s ease;
}

.bloque-secciones-waste .card-seccion .texto{
  position:absolute;
  right:10px;
  bottom:10px;
  left:10px;
  z-index:2;
  color:#ffffff !important;
}

.bloque-secciones-waste .card-seccion h3{
  margin:0;
  color:#ffffff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  font-family:'Oswald', Arial, sans-serif !important;
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:0.3px;
}

.bloque-secciones-waste .card-seccion h4{
  margin:2px 0 0;
  color:#ffffff !important;
  opacity:.95;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  font-family:'Oswald', Arial, sans-serif !important;
  font-size:12px;
  font-weight:400;
  line-height:1.1;
}

.bloque-secciones-waste .card-seccion:hover img{
  transform:scale(1.06);
}

@media (max-width:768px){
  .bloque-secciones-waste .grid-secciones,
  .bloque-secciones-waste .bloque-titulo{
    width:90%;
  }

  .bloque-secciones-waste .card-seccion img{
    height:110px;
  }
}

/* ========================================
   9. COLUMNA LATERAL
======================================== */
.botones-socialmedia-lateral{
  width:75%;
  margin:20px auto 0;
}

.botones-socialmedia-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.botones-socialmedia-lateral a{
  display:inline-block;
  padding:6px 10px;
  border-radius:4px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
}

.btn-x{
  background:#34454f;
}

.btn-fb-share,
.btn-fb-page{
  background:#3e515d;
}

.video-extraido-bloque{
  width:85%;
  margin:0 auto;
}

.video-extraido-bloque .video-receptor{
  width:100%;
  box-sizing:border-box;
}

.video-receptor{
  margin-top:20px;
  padding:10px;
  border-radius:10px;
  background:#091c2f;
  box-shadow:0 0 15px rgba(0,0,0,.5);
  color:#eee;
  text-align:center;
  font-family:sans-serif;
  transition:opacity .5s ease;
}

.video-receptor.loading{
  opacity:.5;
}

small.status{
  display:block;
  margin-top:12px;
  color:#aaa;
  font-size:.85rem;
}

.promo-banner{
  width:100%;
}

.promo-banner img{
  display:block;
  width:100%;
  max-width:300px;
  margin:0 auto;
}

.promo-banner-text{
  margin-top:10px;
  color:#e6e2e0;
  text-align:center;
}

.promo-banner-text h1{
  margin:5px 0;
  font-size:18px;
  font-weight:400;
}

.promo-banner-text p{
  margin:2px 0;
  font-size:12px;
  line-height:1.4;
}

.promo-banner a{
  color:inherit;
  text-decoration:none;
}

/* ========================================
   10. SIDEBAR / FOOTER INTERNO
======================================== */
.waste-page-layout{
  width:100%;
  color:#e6e2e0;
  font-family:Arial,sans-serif;
}

.waste-block{
  width:75%;
  margin:0 auto;
}

.waste-block h1{
  margin:12px 0 6px;
  font-size:20px;
  font-weight:400;
}

.waste-block h4{
  margin:10px 0;
  font-size:14px;
  font-weight:400;
}

.waste-block h6{
  margin:6px 0;
  font-size:14px;
  font-weight:400;
  line-height:1.6;
}

.waste-block p,
.footer-description{
  margin:6px 0 12px;
  color:#e6e2e0;
  font-size:11px;
  line-height:1.6;
}

.waste-block a{
  color:#e6e2e0;
  text-decoration:none;
}

.sidebar .block-inner{
  padding-bottom:20px;
}

.footer-logo-box{
  margin-bottom:15px;
  padding:20px 10px;
  background:#000;
  text-align:center;
}

.footer-logo-box h1{
  margin:0;
  color:#e6e2e0;
  font-size:22px;
}

.warning{
  color:#e6e2e0;
  font-weight:700;
}

/* ========================================
   11. DIVISORES
======================================== */
.botones-socialmedia-lateral hr,
.video-extraido-bloque hr,
.promo-banner hr,
.waste-block hr{
  margin:12px 0;
  border:none;
  border-top:4px solid #444;
}

/* ========================================
   12. RESPONSIVE
======================================== */
@media (max-width:768px){
  #waste-cookie-banner{
    left:10px;
    right:10px;
    bottom:10px;
    padding:14px;
  }

  #waste-cookie-banner .waste-cookie-inner{
    flex-direction:column;
  }

  #waste-cookie-banner .waste-cookie-actions{
    width:100%;
  }

  #waste-cookie-banner button{
    width:100%;
  }

  .header{
    padding:0 10px;
  }

  .header h1{
    margin-left:0;
    font-size:24px;
  }

  .header h4,
  .burger-text{
    display:none;
  }

  .waste-menu-panel{
    padding:0 10px 12px;
  }

  .menu-box{
    width:min(88vw,360px);
    min-width:auto;
  }

  .bloque-central-2col{
    grid-template-columns:1fr;
  }

  .cabecera-pagina-overlay h1{
    font-size:22px;
  }
}


/* ========================================
   BLOQUE CABECERA FIJA DE PÁGINA
======================================== */

.imagen-cabecera-bloque{
  width:100%;
  height:auto;
  display:block;

}

/* ========================================
   BLOQUE VÍDEO CENTRAL EN CONTENIDO
======================================== */

.contenedor-videos-con-minis{
  border-radius:10px;
  width:90%;
  background:#101b38;
  padding:0;
  color:#ccc;
  margin-left:auto;
  margin-right:auto;
}

.video-bloque-titulo{
  font-size:16px;
  color:#ccc !important;
  margin-left:4%;
  padding-top:5px;
}

.video-bloque-creditos{
  font-size:14px;
  color:#ccc !important;
  margin-left:4%;
  bottom:3px;
}

.v-container{
  position:relative;
  padding-bottom:56.25%;
  padding-top:25px;
  height:0;
}

.v-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.imagen-texto-ancho{
  width:100%;
  height:auto;
  display:block;
}


/* ========================================
   BLOQUE CABECERA FIJA 1200 DE PÁGINA
   Imagen superior a ancho completo dentro de .bloque-central-2col
======================================== */

.bloque-inicio-cabecera-1200{
  grid-column:1 / -1;
  width:100%;
}

.imagen-cabecera-bloque-1200{
  width:100%;
  max-width:1200px;
  height:auto;
  display:block;
margin-top:-10px;
}

/* ========================================
   13. CONTENIDO PRINCIPAL WASTE MAGAZINE
   Base común para contenidos migrados
======================================== */

.contenedor-texto-principal{
  padding:0 20px 20px 20px;
  box-sizing:border-box;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphenate-limit-chars:6 4 2;
  hyphenate-limit-chars:6 4 2;
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px;
  line-height:1.4;
  letter-spacing:-0.3px;
  font-weight:300;
  color:#222;
}

.contenedor-texto-principal p{
  font-family:'Source Serif 4', Georgia, serif;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.1px;
  margin-bottom:1.2em;
  font-weight:300;
  color:#222;
}

.contenedor-texto-principal h1{
  font-family:'Oswald', Arial, sans-serif;
  font-weight:400;
  line-height:1.2;
  margin-top:1.6em;
  margin-bottom:.6em;
  hyphens:none;
  -webkit-hyphens:none;
  -ms-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.contenedor-texto-principal h2{
  font-family:'Arial Narrow', Arial, Helvetica, sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:1.4;
  margin-top:1em;
  margin-bottom:.3em;
  hyphens:none;
  -webkit-hyphens:none;
  -ms-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.contenedor-texto-principal h3{
  font-family:'Source Serif 4', Georgia, serif;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-0.1px;
  margin-bottom:1.2em;
  font-weight:300;
  color:#222;
}

.contenedor-texto-principal h4,
.contenedor-texto-principal h5,
.contenedor-texto-principal h6{
  font-family:'Oswald', Arial, sans-serif;
  font-weight:400;
  line-height:1.3;
  color:#333;
}

.contenedor-texto-principal h4{ font-weight:300; }

.contenedor-texto-principal h5,
.contenedor-texto-principal h6{
  hyphens:none;
  -webkit-hyphens:none;
  -ms-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.contenedor-texto-principal a{
  color:#3857a7;
  text-decoration:none;
}

.contenedor-texto-principal a:hover{
  text-decoration:underline;
}

.contenedor-texto-principal strong{
  font-weight:600;
  color:#3a3a3a;
}

.contenedor-texto-principal b{
  color:inherit;
}

.contenedor-texto-principal hr{
  width:100%;
  border:none;
  border-top:1px solid #b8b8b8;
  margin:14px 0;
  clear:both;
}

/* Blindaje del HTML heredado que se incorpore durante la migración */
.contenedor-texto-principal *,
.contenedor-texto-principal *::before,
.contenedor-texto-principal *::after{
  box-sizing:border-box;
}

.contenedor-texto-principal div,
.contenedor-texto-principal table,
.contenedor-texto-principal tbody,
.contenedor-texto-principal tr,
.contenedor-texto-principal td,
.contenedor-texto-principal blockquote,
.contenedor-texto-principal center{
  max-width:100% !important;
}

.contenedor-texto-principal table{
  width:100% !important;
}

.contenedor-texto-principal img,
.contenedor-texto-principal iframe{
  max-width:100% !important;
  height:auto;
}

/* ========================================
   14. AJUSTES RECUPERADOS / COMPONENTES WASTE MAGAZINE
======================================== */

/* Fondo dividido para evitar el gris heredado del sistema antiguo de 12000px */
.bloque-central-2col{
  background:linear-gradient(
    to right,
    #efefef 0%,
    #efefef 65%,
    #303331 65%,
    #303331 100%
  );
}

@media (max-width:768px){
  .bloque-central-2col{
    background:#efefef;
  }

  .caja2-2col{
    background:#303331;
  }
}

/* Cabecera de imagen fija dentro del bloque principal */
.bloque-inicio-cabecera img{
  width:100%;
  height:auto;
  display:block;
}

/* Cabecera 1200 a ancho completo antes de las columnas */
.bloque-inicio-cabecera-1200{
  grid-column:1 / -1;
  width:100%;
}

.imagen-cabecera-bloque-1200{
  width:100%;
  max-width:1200px;
  height:auto;
  display:block;
}

/* Vídeo integrado en el contenido principal */
.contenedor-videos-con-minis{
  border-radius:10px;
  width:90%;
  background:#101b38;
  color:#ccc;
  margin-left:auto;
  margin-right:auto;
  padding:10px 0;
}

.contenedor-videos-con-minis h5,
.video-bloque-titulo{
  font-size:16px;
  color:#ccc !important;
  margin-left:4%;
  padding-top:5px;
}

.contenedor-videos-con-minis h6,
.video-bloque-creditos{
  font-size:14px;
  color:#ccc !important;
  margin-left:4%;
}

.v-container{
  position:relative;
  padding-bottom:56.25%;
  height:0;
}

.v-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#contenedor-minis{
  max-width:640px;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
}

.mini img{
  max-width:180px;
  height:120px;
  border-radius:7px;
  margin:7px 9px;
}

.mini h6{
  max-width:160px;
  color:#f5d72e;
  font-family:Oswald, sans-serif;
  font-size:14px;
  margin-left:15px;
  margin-top:-30px;
}

.mini a{
  color:#ccc;
}

.imagen-texto-ancho{
  width:100%;
  height:auto;
  display:block;
}

/* ========================================
   LISTADO DE NOTICIAS WASTE
======================================== */

/* LISTADO NOTICIAS */



ul.listado-noticias{
  margin:0;
  padding-left:0;
  list-style:none;
}

ul.listado-noticias li{
  position:relative;
  margin:0 0 6px 0;
  padding:0 0 0 24px;
  color:rgb(56,87,167);
}

ul.listado-noticias li::before{
  content:"▸";   /* triángulo fino para listados */
  position:absolute;
  left:0;
  top:1px;
  color:#616fa3;
  font-size:18px;
  font-weight:bold;
  line-height:1;
}

ul.listado-noticias h3{
  margin:0 !important;
  padding:0 !important;
  font-size:18px;
  line-height:1.25;
  font-weight:normal;
}

ul.listado-noticias li h3 a,
ul.listado-noticias li h3 a:link,
ul.listado-noticias li h3 a:visited{
  color:rgb(56,87,167) !important;
  text-decoration:none;
}

ul.listado-noticias li h3 a:hover,
ul.listado-noticias li h3 a:focus{
  color:#5d89fc !important;
  text-decoration:underline;
}

ul.listado-noticias li h3 a strong{
  color:inherit !important;
  font-weight:600;
}
/* =========================
   SEPARADOR ENTRE NOTICIAS
========================= */

.linea-separador{
  border:none;
  height:1px;
  background:#6b6b6b;;
  margin:0 0 3px 0;
}

.separador-noticias{
  width:100%;
  background:#adadad;
  color:#ffffff;
  padding:3px 0 3px 20px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1;
  font-weight:bold;
}
/* ============================= */
/* SEPARADORES DE BLOQUES WASTE MAGAZINE */
/* ============================= */

h2.bloque-separador{
  margin: 14px 0 10px 0 !important;
  padding: 2px 12px 2px 12px !important;

  background: #636b74 !important;
  border-top: 2px solid #8b8f95 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  box-sizing: border-box !important;

  text-align: left !important;

  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1.1 !important;

  color: #ffffff !important;
}

h2.bloque-separador .separador-titulo{
  flex: 1 !important;

  display: flex;
  align-items: center;

  text-align: left !important;

  color: #ffffff !important;
  font-weight: normal !important;
}

h2.bloque-separador .separador-flecha{
  margin-right: 8px;

  color: #d8dce2 !important;
  font-size: 15px;
}

h2.bloque-separador .volver-inicio{
  margin-left: auto !important;

  color: #ffffff !important;
  text-decoration: none !important;

  font-size: 20px !important;
  font-weight: normal !important;
  line-height: 1 !important;

  display: flex;
  align-items: center;

  transform: translateY(-1px);
}

h2.bloque-separador .volver-inicio:hover{
  color: #e1cfab !important;
}


/* ============================= */
/* GALERÍAS DE FOTOS EN MOSAICO · WASTE MAGAZINE */
/* ============================= */


.galeria-fotos-waste {
  max-width: 980px;
  margin: 25px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.galeria-fotos-waste a {
  display: block;
  overflow: hidden;
  background: #000;
}

.galeria-fotos-waste img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  transition: opacity 0.25s ease;
}

.galeria-fotos-waste img:hover {
  opacity: 0.78;
}

.lightbox-waste {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.92);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.lightbox-waste img {
  max-width: 95%;
  max-height: 90vh;
  border: 1px solid #333;
}

.cerrar-lightbox-waste {
  position: fixed;
  top: 18px;
  right: 28px;
  color: #fff;
  font-size: 42px;
  line-height: 42px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 800px) {
  .galeria-fotos-waste {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .galeria-fotos-waste {
    grid-template-columns: 1fr;
  }
}




/* ============================= */
/* GALERÍAS DE FOTOS EN VISOR · WASTE MAGAZINE */
/* ============================= */



.visor-galeria-waste {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 25px auto;
  background: #000;
}

.visor-imagen-activa {
  width: 100%;
  height: auto;
  display: block;
}

.visor-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  font-size: 34px;
  width: 42px;
  height: 58px;
  cursor: pointer;
  z-index: 2;
}

.visor-prev {
  left: 0;
}

.visor-next {
  right: 0;
}

.visor-flecha:hover {
  background: rgba(0,0,0,0.75);
}

.visor-ampliar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid #999;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.visor-ampliar:hover {
  background: rgba(0,0,0,0.9);
}

.visor-lightbox-waste {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.93);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.visor-lightbox-waste img {
  max-width: 95%;
  max-height: 92vh;
}

.visor-cerrar-waste {
  position: fixed;
  top: 18px;
  right: 28px;
  color: #fff;
  font-size: 42px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}



/* ========================================
   COMPATIBILIDAD CON MAQUETAS ANTIGUAS
   Neutraliza floats y porcentajes heredados
   cuando .bloque-central-2col funciona como grid
======================================== */

.bloque-central-2col{
  width:100%;
  box-sizing:border-box;
}

.bloque-central-2col > .caja1-2col,
.bloque-central-2col > .caja2-2col{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  float:none !important;
  box-sizing:border-box;
}

.bloque-central-2col > .caja1-2col{
  grid-column:1;
}

.bloque-central-2col > .caja2-2col{
  grid-column:2;
}

.caja2-2col .container{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

.contenedor-columna-derecha{
  text-align:left;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

@media (max-width:768px){
  .bloque-central-2col > .caja1-2col,
  .bloque-central-2col > .caja2-2col{
    grid-column:1;
    width:100% !important;
  }
}

/* =========================================================
   WASTE MAGAZINE 2026 · COLUMNAS ABIERTAS DEFINITIVAS DE PRUEBA
   ========================================================= */

:root{
  --waste-fondo-principal:#eeeeee;
  --waste-fondo-secundario:#495d69;
}

/* Fondo de pantalla completo, manteniendo el contenido central en 1200px */
.waste-fondo-columnas{
  width:100%;
  box-sizing:border-box;
  margin-top:0 !important;
  background:linear-gradient(
    to right,
    var(--waste-fondo-principal) 0,
    var(--waste-fondo-principal) calc(50% + 180.42px),
    var(--waste-fondo-secundario) calc(50% + 180.42px),
    var(--waste-fondo-secundario) 100%
  );
}

/* El contenedor central no dibuja caja ni borde propio */
.waste-fondo-columnas .bloque-central-2col{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin-top:0 !important;
}

/* Las columnas reciben visualmente el color del plano exterior */
.waste-fondo-columnas .bloque-central-2col > .caja1-2col,
.waste-fondo-columnas .bloque-central-2col > .caja2-2col{
  background:transparent !important;
}

/* Hasta 1200px la división sigue proporcionalmente el grid actual */
@media (max-width:1200px){
  .waste-fondo-columnas{
    background:linear-gradient(
      to right,
      var(--waste-fondo-principal) 0,
      var(--waste-fondo-principal) 65.035%,
      var(--waste-fondo-secundario) 65.035%,
      var(--waste-fondo-secundario) 100%
    );
  }
}

/* Móvil: una sola columna, principal primero y secundaria después */
@media (max-width:768px){
  .waste-fondo-columnas{
    margin-top:0 !important;
    background:transparent !important;
  }

  .waste-fondo-columnas .bloque-central-2col{
    display:grid;
    grid-template-columns:1fr;
    margin-top:0 !important;
    background:transparent !important;
  }

  .waste-fondo-columnas .bloque-central-2col > .caja1-2col{
    grid-column:1 !important;
    grid-row:1 !important;
    background:var(--waste-fondo-principal) !important;
  }

  .waste-fondo-columnas .bloque-central-2col > .caja2-2col{
    grid-column:1 !important;
    grid-row:2 !important;
    background:var(--waste-fondo-secundario) !important;
  }
}


/* =========================================================
   WASTE 2026 · FRANJA FOTO GRANDE INDEPENDIENTE
   Estructura: MENÚ -> FOTO -> COLUMNAS
   ========================================================= */

.waste-franja-foto{
  width:100%;
  margin:0;
  padding:0;
  background:#101722;
  box-sizing:border-box;
}

.waste-franja-foto-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* Neutraliza ajustes heredados que desplazaban la foto */
.waste-franja-foto .bloque-inicio-cabecera-1200,
.waste-franja-foto .portada-waste,
.waste-franja-foto .portada-fija-waste,
.waste-franja-foto .imagen-cabecera-bloque-1200{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.waste-franja-foto .bloque-inicio-cabecera-1200,
.waste-franja-foto .portada-waste,
.waste-franja-foto .portada-fija-waste{
  width:100%;
  max-width:1200px;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
}

.waste-franja-foto .imagen-cabecera-bloque-1200{
  display:block;
  width:100%;
  max-width:1200px;
  height:auto;
  padding:0;
}

/* La sección de columnas comienza inmediatamente después de la foto */
.waste-franja-foto + .waste-fondo-columnas{
  margin-top:0 !important;
}

@media (max-width:768px){
  .waste-franja-foto,
  .waste-franja-foto-inner,
  .waste-franja-foto .bloque-inicio-cabecera-1200,
  .waste-franja-foto .portada-waste,
  .waste-franja-foto .portada-fija-waste,
  .waste-franja-foto .imagen-cabecera-bloque-1200{
    width:100%;
    max-width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ============================================================
   bloque secciones GUÍAS DE BIODIVERSIDAD
   Componente común Waste Magazine 2026
   Origen del contenido: index.html
   ============================================================ */


/* CONTENEDOR GENERAL 1200 PX */

.waste-guias-biodiversidad {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #e9edf4;
    overflow: hidden;
    box-sizing: border-box;
}


/* Evita diferencias de cálculo por padding y bordes */

.waste-guias-biodiversidad *,
.waste-guias-biodiversidad *::before,
.waste-guias-biodiversidad *::after {
    box-sizing: border-box;
}


/* ============================================================
   TRES COLUMNAS PRINCIPALES
   ============================================================ */

.waste-guias-columnas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    align-items: stretch;
}

.waste-guias-columna {
    min-width: 0;
    background: #e9edf4;
}


/* ============================================================
   DOS GUÍAS DENTRO DE CADA COLUMNA
   ============================================================ */

.waste-guias-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 100%;
}

.waste-guias-item {
    min-width: 0;
    text-align: left;
    color: #1a0d00;
}


/* ============================================================
   TÍTULO GENERAL: GUÍAS DE BIODIVERSIDAD
   ============================================================ */

.waste-guias-titulo {
    margin: 0;
    padding: 8px 5% 10px 5%;
    color: #1a0d00 !important;
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 600;
}


/* Compensa el espacio ocupado por el título general
   en la primera columna */

.waste-guias-columna-secundaria {
    padding-top: 32px;
}


/* ============================================================
   TITULARES DE CADA GUÍA
   ============================================================ */

.waste-guias-item h6 {
    margin: 0;
    padding: 0 10%;
    color: #1a0d00 !important;
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 600;
}


/* ============================================================
   PÁRRAFOS
   ============================================================ */

.waste-guias-item p {
    margin-top: 8px;
    margin-bottom: 14px;
    padding: 0 10%;
    color: #1a0d00 !important;
    font-size: 16px;
    line-height: 1.35;
}


/* ============================================================
   ENLACES
   ============================================================ */

.waste-guias-biodiversidad a {
    color: #490000;
}

.waste-guias-biodiversidad a:hover {
    text-decoration: underline;
}


/* ============================================================
   IMÁGENES
   ============================================================ */

.waste-guias-item img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 3% 15px 3%;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 780px) {

    /* Las tres columnas principales pasan
       a colocarse una debajo de otra */

    .waste-guias-columnas {
        grid-template-columns: 1fr;
    }

    /* Ya no necesitamos compensar el título */

    .waste-guias-columna-secundaria {
        padding-top: 0;
    }

    /* Se mantienen dos guías por fila */

    .waste-guias-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Móviles estrechos */

@media (max-width: 480px) {

    .waste-guias-item p {
        font-size: 16px;
        line-height: 1.35;
    }

    .waste-guias-item h6,
    .waste-guias-titulo {
        font-size: 14px !important;
    }
}

/* ============================================================
   LAYOUT DEFINITIVO WASTE 2026 · V3
   Orden físico HTML:
   1. columna izquierda
   2. bloque dinámico
   3. columna derecha

   Escritorio:
   izquierda | derecha
   dinámico  | dinámico

   Móvil:
   izquierda
   dinámico
   derecha
   ============================================================ */

.waste-franja-foto {
    margin-bottom: 8px;
}

.waste-fondo-columnas {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Escritorio: colocación explícita por filas y columnas */
.waste-maqueta-2026 .bloque-central-2col {
    display: grid !important;
    grid-template-columns: minmax(0,1.86fr) minmax(280px,1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

.waste-maqueta-2026 .bloque-central-2col > .caja1-2col {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.waste-maqueta-2026 .bloque-central-2col > .caja2-2col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.waste-maqueta-2026 .bloque-central-2col > .waste-franja-dinamica-piedepaginas {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: relative;
    width: 100% !important;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #e9edf4 !important;
    box-sizing: border-box;
    isolation: isolate;
}

/* Fondo claro extendido a todo el ancho de la ventana */
.waste-maqueta-2026 .bloque-central-2col > .waste-franja-dinamica-piedepaginas::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #e9edf4;
}

.waste-bloque-dinamico-piedepaginas-receptor {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.waste-franja-dinamica-piedepaginas .waste-guias-biodiversidad {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    background: #e9edf4;
    overflow: hidden;
    box-sizing: border-box;
}

/* MÓVIL: orden inequívoco izquierda -> dinámico -> derecha */
@media (max-width: 768px) {

    .waste-maqueta-2026 .bloque-central-2col {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .waste-maqueta-2026 .bloque-central-2col > .caja1-2col {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        background: var(--waste-fondo-principal) !important;
    }

    .waste-maqueta-2026 .bloque-central-2col > .waste-franja-dinamica-piedepaginas {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .waste-maqueta-2026 .bloque-central-2col > .caja2-2col {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        background: var(--waste-fondo-secundario) !important;
    }
}


/* ============================================================
   COLUMNA DERECHA MODULAR · WASTE 2026
   Fondo general: #495d69
   ============================================================ */

.waste-maqueta-2026 .caja2-2col,
.waste-maqueta-2026 .contenedor-columna-derecha {
    color: #eef1ef;
}

/* Redes: discretas, en la misma gama pizarra */
.waste-maqueta-2026 .botones-socialmedia-lateral {
    width: 86%;
    margin: 18px auto 14px;
}

.waste-maqueta-2026 .botones-socialmedia-inner {
    gap: 7px;
}

.waste-maqueta-2026 .botones-socialmedia-lateral a {
    color: #f2f4f1 !important;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
    font-weight: 400;
}

.waste-maqueta-2026 .btn-x {
    background: #34454f !important;
}

.waste-maqueta-2026 .btn-fb-share {
    background: #3b4e59 !important;
}

.waste-maqueta-2026 .btn-fb-page {
    background: #405560 !important;
}

.waste-maqueta-2026 .botones-socialmedia-lateral a:hover {
    background: #2f4049 !important;
    color: #fff !important;
}

/* Estructura común de módulos */
.waste-lateral-modulo {
    width: 86%;
    margin: 0 auto;
    padding: 18px 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(242,244,241,.18);
    color: #ecefeb;
}

.waste-lateral-modulo:first-of-type {
    margin-top: 0;
}

.waste-lateral-dinamico {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.waste-lateral-extra:empty,
.waste-lateral-extra .waste-lateral-dinamico:empty {
    display: none;
}

/* Módulo 2: foto + texto principal de portada */
.waste-lateral-portada-principal img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.waste-lateral-portada-principal h1,
.waste-lateral-portada-principal h2,
.waste-lateral-portada-principal h3,
.waste-lateral-portada-principal h4,
.waste-lateral-portada-principal h5,
.waste-lateral-portada-principal h6 {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #f0f2ef !important;
    font-family: Oswald, Arial, sans-serif;
    font-size: 20px !important;
    line-height: 1.18;
    font-weight: 400 !important;
}

.waste-lateral-portada-principal p {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    color: #e4e8e3 !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
}

.waste-lateral-portada-principal a {
    color: #f1f3ef !important;
}

/* Módulo 3: textos / avances procedentes de portada */
.waste-lateral-enlaces,
.waste-lateral-enlaces * {
    color: #e8ece7 !important;
}

.waste-lateral-enlaces h1,
.waste-lateral-enlaces h2,
.waste-lateral-enlaces h3,
.waste-lateral-enlaces h4,
.waste-lateral-enlaces h5,
.waste-lateral-enlaces h6 {
    margin: 10px 0 5px !important;
    padding: 0 !important;
    color: #f2f4f1 !important;
    font-family: Oswald, Arial, sans-serif;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.waste-lateral-enlaces h1 {
    font-size: 20px !important;
}

.waste-lateral-enlaces h6 {
    font-size: 15px !important;
}

.waste-lateral-enlaces p,
.waste-lateral-enlaces div,
.waste-lateral-enlaces span {
    font-size: 15px !important;
    line-height: 1.42 !important;
}

.waste-lateral-enlaces p {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.waste-lateral-enlaces a {
    color: #f0f3ed !important;
    text-decoration: none;
}

.waste-lateral-enlaces a:hover {
    color: #fff !important;
    text-decoration: underline;
}

.waste-lateral-enlaces hr,
/* Módulo 4: no deja hueco mientras esté vacío */
.waste-lateral-extra {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
}

@media (max-width: 768px) {
    .waste-lateral-modulo,
    .waste-maqueta-2026 .botones-socialmedia-lateral {
        width: 90%;
    }

    .waste-lateral-portada-principal p,
    .waste-lateral-enlaces p,
    .waste-lateral-enlaces div,
    .waste-lateral-enlaces span {
        font-size: 16px !important;
    }
}

/* ============================================================
   FOOTER LATERAL FIJO WASTE MAGAZINE 2026
   ============================================================ */

.waste-footer-lateral-fijo {
    width: 86%;
    margin: 0 auto;
    padding: 20px 0 28px;
    box-sizing: border-box;
    color: #e3e7e2;
    border-top: 1px solid rgba(255,255,255,.18);
}

.waste-footer-lateral-marca {
    margin-bottom: 14px;
}

.waste-footer-lateral-marca h2 {
    margin: 0;
    padding: 0;
    font-family: Oswald, Arial, sans-serif;
    font-size: 18px !important;
    line-height: 1.2;
    font-weight: 400 !important;
}

.waste-footer-lateral-marca a {
    color: #f1f3ef !important;
    text-decoration: none;
}

.waste-footer-lateral-contenido {
    color: #e3e7e2;
}

.waste-footer-lateral-contenido p {
    margin: 0 0 12px;
    padding: 0;
    color: #e3e7e2 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}

.waste-footer-lateral-legal p {
    font-size: 12px !important;
    line-height: 1.42 !important;
}

.waste-footer-lateral-seccion {
    margin-top: 18px;
}

.waste-footer-lateral-seccion h4 {
    margin: 0 0 7px;
    padding: 0;
    color: #f1f3ef !important;
    font-family: Oswald, Arial, sans-serif;
    font-size: 14px !important;
    line-height: 1.2;
    font-weight: 400 !important;
}

.waste-footer-lateral-fijo a {
    color: #f0f3ed !important;
    text-decoration: none;
}

.waste-footer-lateral-fijo a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .waste-footer-lateral-fijo {
        width: 90%;
    }

    .waste-footer-lateral-contenido p {
        font-size: 14px !important;
    }

    .waste-footer-lateral-legal p {
        font-size: 12px !important;
    }
}