/* ============================================================
   CEMPROTECTA · cabecera, pie y barra móvil
   Portado del prototipo V2/V3 sobre el marcado del bloque de
   navegación de WordPress, que aporta el menú desplegable móvil,
   el foco y el ARIA sin que tengamos que reescribirlos.
   ============================================================ */

/* ---------- cabecera ---------- */
.hd{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.admin-bar .hd{top:32px}
@media (max-width:782px){ .admin-bar .hd{top:46px} }

.hd-in{
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--pad); max-width:1280px; margin:0 auto;
}

/* El grupo de bloques reparte su separacion con un margen superior en todo
   hijo salvo el primero. En una fila flexible eso descoloca verticalmente a
   todos menos al primero: la separacion la da el gap, no el margen. */

.hd-in > *{margin-block:0}
.hd-top{border-bottom:1px solid var(--line); background:var(--surface-2)}
.hd-top .hd-in{justify-content:flex-end; gap:var(--s5)}
.hd-top .tel{font-size:13px; min-height:44px}
.hd-main .hd-in{padding-top:var(--s3); padding-bottom:var(--s3)}

.logo{
  font-family:var(--ff-d); font-size:20px; font-weight:600; letter-spacing:.04em;
  color:var(--ink); white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.logo:hover{text-decoration:none; color:var(--ink)}
.logo em{font-style:normal; color:var(--accent)}

.lang{
  display:flex; gap:5px; font-family:var(--ff-m); font-size:12px;
  color:var(--ink-3); white-space:nowrap; align-items:center;
}
.lang b{color:var(--ink); font-weight:500}

/* menú principal · bloque de navegación de WordPress */
.hd .wp-block-navigation{flex:1 1 auto; min-width:0; justify-content:center}
.hd .wp-block-navigation__container{gap:18px}
.hd .wp-block-navigation-item__content{
  color:var(--ink-2); font-family:var(--ff-b); font-size:14.5px;
  white-space:nowrap; padding:11px 0; text-decoration:none;
}
.hd .wp-block-navigation-item__content:hover{color:var(--ink); text-decoration:none}
.hd .current-menu-item > .wp-block-navigation-item__content{
  color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);
}

/* botón hamburguesa del bloque de navegación */
.hd .wp-block-navigation__responsive-container-open{
  border:1px solid var(--line-2); border-radius:var(--r-s);
  width:44px; height:44px; display:none;
  align-items:center; justify-content:center; color:var(--ink); background:none;
}
/* El bloque de navegación pinta el desplegable en blanco puro con una regla
   más específica que la nuestra; se iguala al papel del sitio. */
.hd .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--paper); color:var(--ink); padding:var(--s7) var(--pad);
}
.hd .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--ff-d); font-size:23px; color:var(--ink); padding:var(--s3) 0;
}
.hd .wp-block-navigation__responsive-container-close{color:var(--ink)}

/* CTA de cabecera */
.hd-main .wp-block-button__link{
  white-space:nowrap; padding:11px 18px; min-height:42px; font-size:14.5px;
}

/* ---------- pie ---------- */
.ft-w{background:var(--surface-2); border-top:1px solid var(--line); padding:var(--s8) 0 var(--s6)}
.ft-g{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s6)}
.ft-g h2{
  font-family:var(--ff-m); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:var(--s3);
}
.ft-g a{color:var(--ink-2); font-size:15px; text-decoration:none}
.ft-g a:hover{color:var(--accent)}
.ft-g p{font-size:15px; color:var(--ink-2)}
.ft-g .wp-block-navigation__container{flex-direction:column; gap:0; align-items:flex-start}
.ft-g .wp-block-navigation-item__content{
  color:var(--ink-2); font-size:15px; min-height:44px; display:flex; align-items:center; text-decoration:none;
}
.ft-g .wp-block-navigation-item__content:hover{color:var(--accent)}
.ft-b{
  margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font-family:var(--ff-m); font-size:11.5px; color:var(--ink-3);
}
.ft-b p{font-family:var(--ff-m); font-size:11.5px; color:var(--ink-3)}

/* ---------- barra fija móvil ---------- */
.mbar{
  display:none; position:sticky; bottom:0; z-index:50; background:var(--surface);
  border-top:1px solid var(--line-2); gap:10px; align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 24px color-mix(in srgb,var(--ink) 8%,transparent);
}
.mbar .wp-block-buttons{flex:1 1 auto; min-width:0; margin:0}
.mbar .wp-block-button{width:100%}
.mbar .wp-block-button__link{width:100%; padding:13px 12px; font-size:14.5px; min-height:48px}
.mbar .icall{
  flex:0 0 auto; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r-s); color:var(--ink); text-decoration:none;
}
.mbar .icall:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- selector de idioma (23.09.2026) ----------
   Solo aparece cuando existe al menos una traduccion publicada de la
   pagina actual. El idioma actual va en <strong>; los demas, enlazados. */
.lang strong{color:var(--ink); font-weight:500}
.lang a{color:var(--ink-3); text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.lang a:hover{color:var(--accent)}
.screen-reader-text{border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important}