/* ============================================================
   CEMPROTECTA · revisión UX/UI · 13.10.2026
   Evolución del sistema V2/V3, no rediseño: mismos colores,
   familias, radios, retícula y componentes. Solo corrige
   problemas concretos de lectura, jerarquía y recorrido.

   Se carga DESPUÉS de responsive.css (functions.php). Mientras
   dure la revisión se puede comparar con el estado anterior
   añadiendo ?ux=0 a cualquier URL (solo con sesión iniciada).
   ============================================================ */


/* ---------- 1 · legibilidad: suelo de tamaños ----------
   El cuerpo va a 17 px, pero muchos componentes bajaban a
   14,5-15 px en gris secundario, y las etiquetas mono a 11-11,5.
   Se sube un escalón sin tocar la escala de titulares. */

.eyebrow{font-size:12.5px}
.small,.note{font-size:15px}
.pick span{font-size:15.5px}
.pick .dest{font-size:12px; color:var(--ink-2)}
.flow h3{font-size:18px}
.flow p{font-size:15.5px; line-height:1.55}
.seq p,.rd,.row .rd.wp-block-post-excerpt,.incl-r p{font-size:16px}
.incl-f,.fig .k,.via-n{font-size:15.5px}
.faq .a,.ticks li{font-size:16px}
.bc,.spec .lbl,.ct,.ra{font-size:12.5px}
.form label,.form .hint{font-size:12.5px}
.cm-doc figcaption{font-size:14px}
.ft-g h2{font-size:12.5px; color:var(--ink-2)}
.ft-b,.ft-b p{font-size:12.5px}
.scope{font-size:13.5px}


/* ---------- 2 · cabecera: selector de idioma y franja superior ----------
   Las siglas ES · CA · EN medían unos 20 px de ancho: se amplía
   el área pulsable a 36 px sin cambiar su aspecto. */

.hd-top .tel{font-size:13.5px}
.lang{font-size:13px; gap:0}
.lang strong,.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; min-height:44px; padding:0 4px;
}
.lang a{color:var(--ink-2); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px}
.lang a:hover{text-decoration-color:currentColor}
/* Idioma actual: tinta y subrayado de acento, como el elemento activo del
   menu. Antes solo se distinguia por un gris algo mas oscuro. */
.lang strong{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:6px}


/* ---------- 3 · cabecera de página: el siguiente paso, a la vista ----------
   Con 96 px arriba y abajo más 48 px de relleno en la columna de
   texto, los botones del hero quedaban por debajo de la primera
   pantalla en un portátil (1440 × 800). Se recorta el aire sin
   cambiar la composición. Unifica además todas las cabeceras en
   el mismo valor. */

.hero{padding-top:var(--s8); padding-bottom:var(--s8)}
.hero .bleed > .txt{padding-block:var(--s5)}
.hero .txt > .btns,.hero .txt > .wp-block-buttons{margin-top:var(--s2)}

/* Orden de lectura en la cabecera: qué es (titular y entradilla), qué
   hacer (botones) y después el detalle. El párrafo secundario iba antes
   de los botones y los empujaba fuera de la pantalla. Solo cambia el
   orden visual: el párrafo no contiene enlaces, así que el orden de
   tabulación no se altera. */
.hero .txt > .btns,.hero .txt > .wp-block-buttons{order:1}
.hero .txt > .muted{order:2}
.hero .txt > .scope{order:3}


/* ---------- 4 · rutas técnicas en las filas de enlace ----------
   Las filas y las familias mostraban la ruta interna
   («/factores-de-riesgo/fisicos/») como pista de destino. Para
   quien no conoce la web es ruido técnico. functions.php marca
   esas rutas con .ra-ruta (y aria-hidden); aquí se sustituyen
   por una flecha. El texto de las demás .ra (p. ej. «Ver la
   ficha en baubiologie.es») no se toca. */

.ra-ruta{font-size:0 !important; line-height:1; white-space:nowrap}
.ra-ruta::before{
  content:"\2192"; font-family:var(--ff-m); font-size:17px; color:var(--ink-3);
  display:inline-block; transition:transform .15s ease,color .15s ease;
}
a:hover > .ra-ruta::before,.row:hover .ra-ruta::before{color:var(--accent); transform:translateX(4px)}


/* ---------- 4b · alineación de las listas numeradas ----------
   El reset de base.css solo anula el relleno de <ul>. Las fases del
   método son un <ol class="seq"> y conservaban los 40 px del navegador:
   la lista quedaba descolgada de la medida del título que la encabeza
   (y en móvil estrechaba el texto). */

ol.seq,ol.ticks,ol.deliv{padding-left:0; margin:0; list-style:none}


/* ---------- 5 · ámbito geográfico ----------
   «España · Portugal» en una línea y «Francia» sola debajo, con
   un hueco grande: se ajusta cuerpo y separación para que los
   tres países se lean como una sola línea. */

.countries{gap:var(--s3) var(--s6)}
.countries span{font-size:clamp(26px,2.6vw,34px)}


/* ---------- 6 · fotografía documental en Inicio ----------
   Tira de tres fotografías reales de mediciones bajo «Cómo
   trabajamos». Mismo tratamiento que .cm-doc de las guías:
   proporción fija, filete fino, sin efectos. */

.cm-fotos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); margin:0}
.cm-fotos > *{margin:0}
.cm-fotos figure{margin:0}
.cm-fotos 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);
}


/* ---------- 6b · fotografías reales en vertical (13.10.2026) ----------
   La foto de la comprobación de puesta a tierra (Sobre Cemprotecta) es
   vertical: con el punto focal general (30 %) el recorte apaisado cortaba
   la cabeza. Se sube el punto focal y, en móvil, la placa gana altura para
   que se vean a la vez la persona y el medidor. */

.ph.real img.wp-image-2532{object-position:50% 12%}
@media (max-width:979.98px){
  .ph.real:has(img.wp-image-2532){min-height:440px}
}


/* ---------- 7 · contacto: los dos canales como botones ---------- */

.btns .btn .tel-ico{opacity:.8; flex:0 0 auto}
.hero .btns.cm-gap6{gap:var(--s3)}


/* ---------- 7b · contorno de los controles secundarios ----------
   El botón secundario, el de llamada de la barra móvil y el de menú
   usaban el filete claro (#C2C9BE, 1,6:1 sobre el papel): el contorno
   apenas se veía. Se oscurece hasta 3,1:1 (mínimo WCAG para límites de
   componentes) mezclando dos colores de la propia paleta. */

.wp-block-button.is-style-outline .wp-block-button__link,.btn-2,
.mbar .icall,.hd .wp-block-navigation__responsive-container-open{
  border-color:color-mix(in srgb,var(--ink-3) 75%,var(--paper));
}


/* ---------- 8 · foco de teclado ----------
   El contorno general ya existe; se asegura en los elementos
   que lo perdían por su propio fondo o recorte. */

.pick:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.hd .wp-block-navigation-item__content:focus-visible{outline-offset:2px}
.mbar a:focus-visible{outline-offset:2px}


/* ---------- 9 · móvil ---------- */

@media (max-width:679.98px){

  /* Cabecera de página más compacta: el hueco de 64 px más 48 de
     relleno dejaba casi 120 px vacíos entre el menú y el antetítulo. */
  .hero{padding-top:var(--s6); padding-bottom:var(--s7)}
  .hero .bleed > .txt{padding-block:0}
  .hero .lead{font-size:17.5px; line-height:1.55}
  .hero .muted{font-size:16px}

  /* Barra de contacto fija. Vivía dentro del pie con position:sticky,
     así que nunca se pegaba al borde: solo aparecía al final de la
     página. Ahora acompaña todo el recorrido. El cuerpo reserva su
     altura para que no tape el final del pie. */
  .mbar{position:fixed; left:0; right:0; bottom:0; z-index:60}
  body{padding-bottom:calc(69px + env(safe-area-inset-bottom,0px))}
  .mbar .icall{font-size:20px}
  /* Mientras los botones de la cabecera de página están a la vista, la
     barra no los repite (barra-movil.js añade la clase). */
  .cm-cta-visible .mbar{display:none}

  /* El botón de preferencias de privacidad quedaba encima del texto
     y, con la barra fija, la habría tapado. Sube sobre la barra. */
  #cookie-law-info-again{bottom:calc(69px + env(safe-area-inset-bottom,0px)) !important}

  /* En Contacto la barra repetiría lo que ya ofrece la propia página. */
  .page-id-2333 .mbar,.page-id-2500 .mbar,.page-id-2501 .mbar{display:none}
  .page-id-2333,.page-id-2500,.page-id-2501{padding-bottom:0}

  /* Las rutas-flecha no aportan en una sola columna: el título ya es enlace. */
  .row .ra-ruta,.fam .ra-ruta{display:none}

  .cm-fotos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
  .cm-fotos > :nth-child(3){display:none}

  /* Menú desplegable: entradas con separación y área pulsable claras. */
  .hd .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:0; width:100%}
  .hd .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%; border-bottom:1px solid var(--line)}
  .hd .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{display:flex; min-height:56px; align-items:center; font-size:22px; padding:var(--s3) 0}
  .hd .wp-block-navigation__responsive-container-close{width:44px; height:44px; display:flex; align-items:center; justify-content:center}

  .countries span{font-size:26px}
}

@media (max-width:399.98px){
  .lang strong,.lang a{min-width:32px}
}