/* ============================================================
   CEMPROTECTA · componentes
   Portado del prototipo V2/V3 conservando los nombres de clase
   para que no haga falta traducir entre prototipo y WordPress.

   No incluye cabecera, pie ni barra móvil: esos se construyen
   sobre marcado de bloques en el paso 5.
   ============================================================ */

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--ff-b); font-size:15.5px; font-weight:500; line-height:1.2;
  padding:14px 22px; min-height:48px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-1{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-1:hover{background:var(--accent-h); border-color:var(--accent-h); color:var(--on-accent)}
.btn-2{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-2:hover{border-color:var(--ink-2); background:var(--surface); color:var(--ink)}
.btn-3{
  display:inline-flex; align-items:center; justify-content:flex-start; align-self:flex-start;
  min-height:44px; padding:0; text-align:left;
  color:var(--accent); font-weight:500; font-size:15.5px; border:none; background:none;
}
.btn-3::after{content:"→"; font-family:var(--ff-m); margin-left:8px; transition:transform .15s ease}
.btn-3:hover{color:var(--accent-h)}
.btn-3:hover::after{transform:translateX(4px)}
.btns{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}

.tel{
  font-family:var(--ff-m); font-size:15px; color:var(--ink); display:inline-flex;
  align-items:center; gap:8px; white-space:nowrap; min-height:44px;
}
.tel:hover{color:var(--accent)}
.tel svg{opacity:.55; flex:0 0 auto}

/* ---------- migas de pan ---------- */
.bc{
  font-family:var(--ff-m); font-size:11.5px; line-height:1.7; letter-spacing:.06em;
  color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s3);
}
.bc a{color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent}
.bc a:hover{color:var(--accent); border-bottom-color:var(--line-2)}
.bc .sep{opacity:.5}
.bc [aria-current]{color:var(--ink-2)}

/* ---------- placa fotográfica ---------- */
.ph{
  position:relative; border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--line) 55%,transparent) 9px 10px),
    var(--surface-2);
  display:flex; align-items:flex-end; padding:var(--s4); min-height:240px; overflow:hidden;
}
.ph span{
  font-family:var(--ff-m); font-size:11.5px; line-height:1.5; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  padding:8px 11px; max-width:46ch;
}
.ph.tall{min-height:380px}
/* max-width evita que la proporcion fija calcule un ancho mayor que su
   columna cuando la rejilla la estira en altura: sin esto la placa se sale
   de su pista y se solapa con el texto. */
.ph.portrait{aspect-ratio:4/5; min-height:0; max-width:100%}
.ph.real{padding:0; background:var(--surface-2)}
/* Punto focal por encima del centro: los retratos verticales entran en un
   hueco mas apaisado y el recorte centrado les cortaba la cabeza. */
.ph.real img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%}

/* ---------- filas de enlace · el componente más reutilizado ---------- */
.rows{border-top:1px solid var(--line-2)}
.row{
  display:grid; grid-template-columns:minmax(0,19rem) minmax(0,1fr) auto; gap:var(--s5);
  align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--line); color:var(--ink);
}
a.row:hover{text-decoration:none; color:var(--ink)}
a.row:hover .rt{color:var(--accent)}
.rt{font-family:var(--ff-d); font-size:19px; font-weight:500}
.rd{font-size:15px; color:var(--ink-2); line-height:1.55}
.ra{font-family:var(--ff-m); font-size:12px; color:var(--ink-3); overflow-wrap:anywhere}

/* ---------- listas de comprobación ----------
   Bloque con viñeta absoluta, no rejilla. En el prototipo el contenido de
   cada <li> iba envuelto en un <span> y la rejilla funcionaba; el bloque de
   lista de WordPress deja el texto suelto, y entonces cada <strong> se
   convierte en un elemento de rejilla propio y el renglón se parte. */
.ticks li{
  display:block; position:relative; padding:11px 0 11px calc(var(--s3) + 5px);
  border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-2); line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:19px; width:5px; height:5px;
  background:var(--accent); border-radius:1px;
}
.ticks li > span{display:inline}
.deliv{border-top:1px solid var(--line-2)}
.deliv li{border-bottom:1px solid var(--line)}

/* ---------- secuencia numerada · fases del método ---------- */
.seq{border-top:1px solid var(--line-2)}
.seq li{
  display:grid; grid-template-columns:5.5rem minmax(0,17rem) minmax(0,1fr); gap:var(--s5);
  padding:var(--s5) 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.seq .n{
  font-family:var(--ff-m); font-size:13px; color:var(--accent); letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.seq h3{font-size:19px}
.seq p{font-size:15.5px; color:var(--ink-2); line-height:1.55}

/* ---------- síntesis horizontal del proceso ---------- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); border-top:1px solid var(--line-2)}
.flow > div{padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.flow .n{font-family:var(--ff-m); font-size:12px; color:var(--accent); letter-spacing:.1em}
.flow h3{font-size:17px}
.flow p{font-size:14.5px; color:var(--ink-2); line-height:1.5}

/* ---------- familias de factores ---------- */
.fam{border-top:1px solid var(--line-2)}
.fam a{
  display:grid; grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto; gap:var(--s6);
  padding:var(--s5) 0; border-bottom:1px solid var(--line); align-items:baseline; color:var(--ink);
}
.fam a:hover{text-decoration:none; color:var(--ink)}
.fam a:hover .ft{color:var(--accent)}
.ft{
  font-family:var(--ff-d); font-size:23px; font-weight:500;
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
}
.ct{font-family:var(--ff-m); font-size:12px; color:var(--ink-3); letter-spacing:.05em}

/* ---------- selector de entrada ---------- */
.tabs{display:flex; gap:var(--s1); border-bottom:1px solid var(--line-2)}
.tab{
  font:inherit; font-size:16px; font-weight:500; background:none; border:none; cursor:pointer;
  color:var(--ink-3); padding:var(--s3) var(--s4); min-height:48px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab:hover{color:var(--ink)}
.panel{display:none}
.panel.on{display:block}

.pick{
  display:flex; flex-direction:column; gap:var(--s3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:var(--s5);
  color:var(--ink); transition:border-color .15s ease,background .15s ease;
}
.pick:hover{border-color:var(--accent); text-decoration:none; color:var(--ink)}
.pick svg{color:var(--accent)}
.pick strong{font-family:var(--ff-d); font-size:18px; font-weight:500; line-height:1.25}
.pick span{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.pick .dest{
  margin-top:auto; font-family:var(--ff-m); font-size:11px; color:var(--ink-3);
  letter-spacing:.03em; padding-top:var(--s3); border-top:1px solid var(--line);
  overflow-wrap:anywhere;
}

/* ---------- panel de inclusiones ---------- */
.incl{border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); overflow:hidden}
.incl-h{
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--ff-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.incl-r{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:var(--s6);
  padding:var(--s5) var(--s6); border-bottom:1px solid var(--line); align-items:baseline;
}
.incl-r h3{font-size:18px}
.incl-r p{font-size:15px; color:var(--ink-2); line-height:1.55}
.incl-f{padding:var(--s5) var(--s6); font-size:14.5px; color:var(--ink-2); background:var(--surface-2); line-height:1.55}

/* ---------- cifras de referencia ---------- */
.figs{display:flex; gap:var(--s5); flex-wrap:wrap}
.fig{
  flex:1 1 240px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); padding:var(--s5) var(--s6);
}
.fig .v{
  font-family:var(--ff-m); font-size:clamp(28px,3.2vw,38px); font-variant-numeric:tabular-nums;
  color:var(--accent); line-height:1.05; letter-spacing:-.02em;
}
.fig .k{font-size:14.5px; color:var(--ink-2); margin-top:var(--s2); line-height:1.5}

/* ---------- ámbito geográfico ---------- */
.countries{display:flex; gap:var(--s7); flex-wrap:wrap; align-items:baseline}
.countries span{font-family:var(--ff-d); font-size:clamp(26px,3.2vw,40px); font-weight:500}

/* ---------- preguntas frecuentes ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s5) var(--s6) var(--s5) 0; min-height:56px;
  font-family:var(--ff-d); font-size:19.5px; font-weight:500; line-height:1.3;
  position:relative; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:0; top:50%; width:26px; height:26px; margin-top:-13px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:
    linear-gradient(var(--accent),var(--accent)) center/11px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 11px no-repeat;
  transition:background-size .15s ease,border-color .15s ease;
}
.faq details[open] summary::after{background-size:11px 1.5px,1.5px 0}
.faq summary:hover{color:var(--accent)}
.faq summary:hover::after{border-color:var(--accent)}
.faq .a{padding:0 var(--s6) var(--s5) 0; max-width:62ch; color:var(--ink-2); font-size:15.5px; line-height:1.6}

/* ---------- banda de cierre ---------- */
.close{background:var(--accent); color:var(--on-accent)}
.close .wrap{padding-top:var(--s9); padding-bottom:var(--s9)}
.close h2,.close a,.close .tel{color:var(--on-accent)}
.close p{color:color-mix(in srgb,var(--on-accent) 88%,transparent)}
.close .tel svg{opacity:.75}
.close .btn-1{background:var(--on-accent); color:var(--accent); border-color:var(--on-accent)}
.close .btn-1:hover{background:color-mix(in srgb,var(--on-accent) 88%,transparent); color:var(--accent-h); border-color:transparent}
.close .btn-2{color:var(--on-accent); border-color:color-mix(in srgb,var(--on-accent) 45%,transparent)}
.close .btn-2:hover{background:color-mix(in srgb,var(--on-accent) 12%,transparent); border-color:var(--on-accent); color:var(--on-accent)}
.close :focus-visible{outline-color:var(--on-accent)}

/* ---------- diagrama ---------- */
.diagram{width:100%; height:auto; display:block; max-width:900px}
.dg-box{fill:var(--surface); stroke:var(--line-2)}
.dg-out{fill:var(--wash); stroke:var(--accent)}
.dg-t{font-family:var(--ff-b); font-size:13px; fill:var(--ink)}
.dg-l{stroke:var(--line-2); fill:none}
.dg-wide{display:block}
.dg-tall{display:none}
@media (max-width:679.98px){
  .dg-wide{display:none}
  .dg-tall{display:block}
}

/* ---------- ficha de datos ---------- */
.spec{
  border-bottom:1px solid var(--line); padding:var(--s4) 0; display:grid;
  grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:var(--s5); align-items:baseline;
}
.spec .lbl{font-family:var(--ff-m); font-size:11.5px; color:var(--ink-3); letter-spacing:.06em}
@media (max-width:679.98px){
  .spec{grid-template-columns:1fr; gap:var(--s2)}
}

/* ---------- formulario ---------- */
.form{display:flex; flex-direction:column; gap:var(--s5)}
.field{display:flex; flex-direction:column; gap:var(--s2)}
.f2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5)}
.form label{
  font-family:var(--ff-m); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2);
}
.form .req,.form .opt{text-transform:none; letter-spacing:0; color:var(--ink-3)}
.form .req::before,.form .opt::before{content:'· '}
.form input,.form select,.form textarea{
  font-family:var(--ff-b); font-size:16px; line-height:1.5; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-s);
  padding:11px 13px; width:100%; min-height:44px;
}
.form textarea{resize:vertical; min-height:120px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.form .hint{font-family:var(--ff-m); font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.check{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3); align-items:start}
.check input{width:24px; height:24px; min-height:0; margin-top:0; accent-color:var(--accent)}
.check label{
  font-family:var(--ff-b); font-size:15px; line-height:1.6; letter-spacing:0;
  text-transform:none; color:var(--ink-2);
}
.form button{align-self:flex-start}
@media (max-width:679.98px){
  .f2{grid-template-columns:1fr}
}


/* ============================================================
   PUENTE CON EL MARCADO DE BLOQUES
   WordPress envuelve todo en .wp-block-*. Estas reglas hacen que
   el marcado nativo herede el sistema, en lugar de traducirlo.
   ============================================================ */

/* El espaciado entre bloques lo dan nuestros contenedores flex y grid,
   no los margenes que WordPress pone entre hermanos. */
.stack > *, .duo > *, .bleed > *, .rows > *, .row > *,
.hgroup > *, .btns > *, .wrap > *, .incl > *{margin-block:0}

/* main sin relleno propio: cada seccion se ocupa del suyo */
.cm-main{padding:0; margin:0}

/* utilidades que en el prototipo eran estilos en linea */
.cm-end{align-self:end}
.cm-narrow{max-width:60ch}

/* placa fotografica: el editor produce un parrafo, no un span */
.ph > p{
  font-family:var(--ff-m); font-size:11.5px; line-height:1.5; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  padding:8px 11px; max-width:46ch; margin:0;
}
.ph.real > p{display:none}

/* botones nativos con el lenguaje de la casa */
.wp-block-buttons.btns{gap:var(--s3); align-items:center}
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--ff-b); font-size:15.5px; font-weight:500; line-height:1.2;
  padding:14px 22px; min-height:48px; border-radius:var(--r-s);
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  text-decoration:none; text-align:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.wp-block-button__link:hover{background:var(--accent-h); border-color:var(--accent-h); color:var(--on-accent); text-decoration:none}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--ink-2); background:var(--surface); color:var(--ink);
}
.close .wp-block-button__link{background:var(--on-accent); color:var(--accent); border-color:var(--on-accent)}
.close .wp-block-button__link:hover{background:color-mix(in srgb,var(--on-accent) 88%,transparent); color:var(--accent-h); border-color:transparent}

/* enlace terciario como parrafo con clase */
p.btn-3{
  display:flex; align-items:center; justify-content:flex-start;
  min-height:44px; font-weight:500; font-size:15.5px;
}
p.btn-3 a{color:var(--accent); text-decoration:none; display:inline-flex; align-items:center}
/* La flecha la pone el enlace. Si tambien la pusiera el parrafo saldrian
   dos, porque .btn-3 ya la lleva para el caso en que la clase va en el <a>. */

p.btn-3::after{content:none}

p.btn-3 a::after{content:"\2192"; font-family:var(--ff-m); margin-left:8px; transition:transform .15s ease}
p.btn-3 a:hover{color:var(--accent-h); text-decoration:none}
p.btn-3 a:hover::after{transform:translateX(4px)}

/* fila como div con enlace extendido: el titulo lleva el enlace real
   -asi el nombre accesible es corto y el texto sigue siendo seleccionable-
   y un pseudoelemento cubre la fila para que toda ella sea pulsable. */
.row{position:relative}
.row .rt a{color:inherit; text-decoration:none}
.row .rt a::after{content:""; position:absolute; inset:0}
.row:hover .rt{color:var(--accent)}
.row:has(a:focus-visible){outline:2px solid var(--accent); outline-offset:4px}
/* Respaldo: si el navegador no soporta :has(), el foco quedaria invisible
   porque la regla de arriba nunca se aplicaria. Se devuelve el contorno
   al propio enlace. */
@supports not selector(:has(a)){
  .row .rt a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
}

/* listas nativas: el li lleva el texto directamente, sin span */
.ticks{padding:0; margin:0}


/* ============================================================
   PUENTE BLOQUES DINAMICOS
   Titulo, extracto y terminos son bloques de nucleo: envuelven el
   texto en su propio contenedor. Aqui se les hace heredar la
   tipografia del componente que los aloja, en vez de duplicar reglas.
   ============================================================ */

.bc > *{margin-block:0}

.bc .wp-block-post-terms,
.bc .wp-block-post-title{font:inherit; letter-spacing:inherit}

.bc .wp-block-post-title{color:var(--ink-2)}

.lead.wp-block-post-excerpt,
.rd.wp-block-post-excerpt{margin-block:0}

.wp-block-post-excerpt__excerpt{margin:0; font:inherit; color:inherit}

.wp-block-post-excerpt__more-text{display:none}

.row .rt.wp-block-post-title,
.row .rt.wp-block-post-terms{font-family:var(--ff-d); font-size:19px; font-weight:500; margin-block:0}

.row .rd.wp-block-post-excerpt{font-size:15px; color:var(--ink-2); line-height:1.55}

.rows.wp-block-query{border-top:1px solid var(--line-2)}

/* El bucle de consulta envuelve cada resultado en un <li>: se anula la
   lista para que las filas conserven su reticula y sus filetes. */

.rows .wp-block-post-template{list-style:none; margin:0; padding:0}

.rows .wp-block-post-template > li{margin:0; padding:0}

/* Un titulo de seccion puede enlazar a su propia pagina sin dejar de
   leerse como titulo: conserva el color de texto y solo vira al pasar. */

.hgroup h1 a, .hgroup h2 a, .hgroup h3 a{color:inherit; text-decoration:none}

.hgroup h1 a:hover, .hgroup h2 a:hover, .hgroup h3 a:hover{color:var(--accent)}

/* Alinear al centro las dos columnas de una franja compacta. */

.cm-mid{align-items:center}

/* Tres utilidades que en el prototipo eran estilos en linea. Se nombran
   para que el editor no tenga que escribir CSS dentro del contenido. */

.cm-filete{border-top:1px solid var(--line-2); padding-top:var(--s5)}

.cm-mono{font-family:var(--ff-m); line-height:1.9; color:var(--ink-2)}

.cm-cursiva{font-style:italic}

/* Medidas de lectura puntuales que en el prototipo eran max-width en linea. */

.cm-w68{max-width:68ch}

.cm-w72{max-width:72ch}

.cm-gap6{gap:var(--s6)}


/* ---------- saltar al contenido ---------- */
.skip-link{
  position:absolute; top:0; left:0; z-index:100;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  font-family:var(--ff-m); font-size:12px; letter-spacing:.06em;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:0 0 var(--r-s) 0; text-decoration:none;
}
.skip-link:focus{width:auto; height:auto; overflow:visible; clip-path:none}


/* ============================================================
   MODO DEMOSTRACION
   Los rotulos internos de produccion ([PENDIENTE DE VALIDAR], las
   placas de FOTOGRAFIA y la del FORMULARIO) siguen literalmente en el
   contenido de cada pagina: aqui solo se ocultan en presentacion.
   Anadiendo ?marcadores=1 a cualquier URL el <body> recibe la clase
   .con-marcadores y vuelven a verse todos.
   ============================================================ */
.sin-marcadores .pend{display:none}
.sin-marcadores .ph:not(.real){display:none}

/* Al desaparecer la placa, la composicion a sangre se resuelve en una
   sola columna dentro de la medida, en lugar de dejar medio hueco muerto. */
@media (min-width:980px){
  .sin-marcadores .bleed:has(> .ph:not(.real)){
    grid-template-columns:minmax(0,1fr);
    max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  }
  .sin-marcadores .bleed:has(> .ph:not(.real)) > .txt{padding-inline:0; max-width:66ch}
}

/* ---------- destino todavia no publicado ----------
   El enlace se ha convertido en texto en el servidor: la fila conserva su
   titulo, su descripcion y su diseno, pero no lleva a un 404. Vuelve a ser
   enlace solo el dia que la pagina exista. */
.cm-pendiente{cursor:default}
.row.cm-pendiente .rt,
.row .rt .cm-pendiente{color:var(--ink-2)}
.row.cm-pendiente .ra,
.pick.cm-pendiente .dest{color:var(--ink-3)}
.pick.cm-pendiente{background:var(--surface-2); border-color:var(--line)}
.pick.cm-pendiente strong{color:var(--ink-2)}

/* ---------- via de contacto disponible ----------
   Sustituye a la placa del formulario mientras no este conectado: no
   simula un envio, ofrece las dos vias que si funcionan hoy. */
.via{border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); overflow:hidden}
.via-h{
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--ff-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.via-b{padding:var(--s5) var(--s6) var(--s6); display:flex; flex-direction:column; gap:var(--s4)}
.via-b .spec:last-of-type{border-bottom:none; padding-bottom:0}
.via-n{font-size:14.5px; color:var(--ink-2); line-height:1.55}

/* La columna Legal del pie solo contiene, hoy, una nota de trabajo:
   en modo demostracion desaparece entera y la rejilla se recompone. */
.sin-marcadores .ft-g > div:has(> .pend){display:none}

/* Una columna cuyo unico contenido eran marcadores de trabajo se queda
   vacia al ocultarlos: desaparece entera y la seccion se resuelve a una
   sola columna, en vez de dejar media banda en blanco. */
.sin-marcadores .cm-solo-marcadores{display:none}
@media (min-width:980px){
  .sin-marcadores .duo:has(> .cm-solo-marcadores){grid-template-columns:minmax(0,1fr)}
  .sin-marcadores .duo:has(> .cm-solo-marcadores) > div{max-width:74ch}
}

/* Doce guias tienen el bloque 3 (Como influye) sin fuente todavia: solo
   contiene el marcador y la regla editorial del brief. En demostracion la
   seccion entera desaparece, en vez de mostrar un titulo con una nota
   interna debajo. El contenido sigue intacto: ?marcadores=1 lo devuelve. */
.sin-marcadores .cm-bloque-3:has(.pend){display:none}

/* Estado de una ficha todavia no publicada. Ocupa el lugar de la ruta en
   la fila y se lee como un estado, no como un enlace roto. */
.cm-estado > span{
  display:inline-block; font-family:var(--ff-m); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  padding:3px 8px; white-space:nowrap;
}
.pick.cm-pendiente .dest{font-style:normal}

/* La ultima fila del pie de una guia lleva a su familia: se despega del
   resto para que se lea como salida de seccion y no como una guia mas. */
.cm-fila-familia{border-top:1px solid var(--line-2)}
.cm-fila-familia .rt{font-family:var(--ff-m); font-size:13px; letter-spacing:.04em; text-transform:uppercase}

/* ---------- la placa fotografica dentro del editor ----------
   En el front la imagen se posiciona en absoluto contra .ph y se recorta.
   En el editor cada bloque va dentro de un envoltorio propio que colapsa a
   cero de alto, asi que esa imagen absoluta no se veia y el hueco aparecia
   vacio. Dentro del editor la imagen se coloca en flujo y se ve entera;
   el recorte real sigue siendo el del front. */
.editor-styles-wrapper .ph.real{display:block; min-height:0; aspect-ratio:auto; padding:0}
.editor-styles-wrapper .ph.real figure{margin:0}
.editor-styles-wrapper .ph.real img{position:static; display:block; width:100%; height:auto}

/* Las placas todavia sin fotografia si deben verse en el editor, con su
   texto: son el marcador de trabajo. */
.editor-styles-wrapper .ph:not(.real){min-height:240px}

/* ---------- composicion a sangre sin fotografia ----------
   Dos bandas se han resuelto sin foto por decision editorial: el hero de
   Contacto y la banda Profundizar de Factores de riesgo. Al no haber placa,
   la rejilla de dos columnas dejaria media banda vacia, asi que se resuelve
   a una sola columna dentro de la medida. Por debajo de 980 px mandan las
   reglas responsive de siempre. */
@media (min-width:980px){
  .bleed.cm-sin-foto{
    grid-template-columns:minmax(0,1fr);
    max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  }
  .bleed.cm-sin-foto > .txt{padding-inline:0; max-width:66ch}
}

/* ---------- fotografia documental en las guias (23.09.2026) ----------
   Fotografias reales de mediciones de Cemprotecta dentro del bloque
   «¿Cómo se evalúa?». Son material documental, no imagen promocional:
   tamaño contenido, filete fino y pie descriptivo. */
.cm-doc{margin:var(--s5) 0 0; max-width:560px}
.cm-doc img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2)}
.cm-doc figcaption{margin:var(--s2) 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-3); text-align:left}


/* ---------- Fotografía en las tarjetas del selector (13.10.2026) ----------
   La imagen es decorativa (alt vacío): el título de la tarjeta ya nombra el destino.
   Cuando hay foto, el icono se oculta para no duplicar la señal. */

.pick .pick-img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  object-position:50% 50%; border-radius:calc(var(--r) * .6); background:var(--surface-2);
  margin-bottom:var(--s1);
}

.pick .pick-img ~ svg{display:none}

.pick.cm-pendiente .pick-img{opacity:.78; filter:saturate(.7)}


/* ---------- Formulario de contacto (13.10.2026) ---------- */

.cm-hp{position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden}

.wpcf7-form{display:flex; flex-direction:column; gap:var(--s4)}
.wpcf7-form p{margin:0}
.wpcf7-form label{display:block; font-size:14.5px; color:var(--ink-2)}
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form select, .wpcf7-form textarea{
  width:100%; margin-top:var(--s2); padding:12px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.wpcf7-form textarea{min-height:160px; resize:vertical}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.wpcf7-form .cm-form-nota, .wpcf7-form .cm-form-info{font-size:13.5px; color:var(--ink-3); line-height:1.5}
.wpcf7-form .cm-form-consent{font-size:14.5px; color:var(--ink-2)}
.wpcf7-form .wpcf7-list-item{margin:0}
.wpcf7-form input[type=submit]{
  align-self:flex-start; padding:14px 22px; font:inherit; font-weight:500; cursor:pointer;
  color:var(--surface); background:var(--accent); border:1px solid var(--accent); border-radius:var(--r);
}
.wpcf7-form input[type=submit]:hover{filter:brightness(1.08)}
.wpcf7-not-valid-tip{font-size:13px; margin-top:var(--s1)}
.wpcf7 form .wpcf7-response-output{margin:0; padding:var(--s3) var(--s4); border-radius:var(--r); font-size:14.5px}