/* ============================================================
   CEMPROTECTA · layout
   Retícula, ritmo vertical de secciones, composición a sangre
   lateral y los siete cortes responsive del prototipo V2/V3.
   ============================================================ */

/* ---------- contenedor de consulta ----------
   WordPress envuelve todo el contenido de plantilla en .wp-site-blocks.
   Declararlo como contenedor permite medir la sangre lateral en cqw, que
   es el ancho de maquetación real, sin la barra de desplazamiento. */
.wp-site-blocks{container-type:inline-size}

/* ---------- medida y secciones ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

.sec{padding:var(--secY) 0; border-top:1px solid var(--line)}
.sec.first{border-top:none}
.sec.flush{border-top:none}
.sec.tight{--secY:var(--s8)}
.sec.band{background:var(--surface-2)}

/* ---------- composición a sangre lateral ----------
   La fotografía llega al borde físico de la ventana por un lado
   mientras el texto sigue alineado a la medida del resto de la página.
   El lado alterna entre secciones: es lo que da ritmo a una página larga. */
.bleed{display:grid; align-items:stretch; gap:var(--s8)}
.bleed > .txt{align-self:center; padding-block:var(--s7)}

.bleed.right{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
.bleed.right > .txt{padding-left:var(--inset); padding-right:var(--s5)}

.bleed.left{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.bleed.left > .txt{padding-right:var(--inset); padding-left:var(--s5)}

.bleed .ph{border-block:none}
.bleed.right .ph{border-right:none}
.bleed.left .ph{border-left:none}

/* ---------- dos columnas editoriales dentro de la medida ---------- */
.duo{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--s8); align-items:start;
}
.duo.tight{gap:var(--s7)}

/* ---------- rejillas auxiliares ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.cols2{columns:2; column-gap:var(--s8)}
.cols2 li{break-inside:avoid}

/* ---------- cabecera de página ---------- */
/* El aire superior del hero baja de --s10 a --s9: con la cabecera ya bien
   medida, 128px abrian un hueco muerto entre el menu y el antetitulo. */
.hero{position:relative; padding:var(--s9) 0 var(--s9); overflow:hidden; border-top:none}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(to bottom,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/72px 72px;
  mask-image:radial-gradient(115% 75% at 72% 12%,#000 0%,transparent 66%);
}
.hero .bleed{position:relative}