/* =====================================================================
   Multiservicios Costa del Sol — capa propia de diseño.

   Sobre el CSS original de Elementor y GeneratePress. Cubre la barra de
   navegación, el pie y todas las páginas que genera este proyecto
   (servicios, zonas, comarcas, nosotros, blog, cookies).

   Paleta de marca (la del kit original, no inventada):
     tinta    #1E1E1B   texto y barra superior
     ámbar    #FFBD59   color primario
     ocre     #E1982B   acento e interacción
     niebla   #F6F7F8   fondos suaves
     borde    #E6E5E1
   Tipografía: Livvic (incluida en assets/fonts).
   ===================================================================== */

:root {
  --tinta: #1e1e1b;
  --tinta-suave: #5f5e5a;
  --ambar: #ffbd59;
  --ocre: #e1982b;
  --dorado-claro: #ffd489;
  --dorado-oscuro: #b9762a;
  --niebla: #f6f7f8;
  --borde: #e6e5e1;
  --ancho: 1120px;
}

img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------- */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 60;
}

.inside-header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 20px !important;
}

.site-logo img { width: 300px !important; display: block; }

/* El hero original subía por detrás de la cabecera con márgenes
   negativos; se anulan para que la barra quede separada. */
.elementor-2 .elementor-element.elementor-element-fdbceee,
.elementor-288 .elementor-element.elementor-element-b833159 {
  --margin-top: 0px !important;
  margin-top: 0 !important;
}

.main-navigation { background: transparent !important; }

.main-navigation { width: 100%; }

/* El tema flota los <li> del menú, lo que impide centrarlos con flex. */
.main-navigation .main-nav > ul > li { float: none !important; }
.main-navigation .inside-navigation { width: 100%; }
.main-navigation .main-nav > ul { width: 100%; }

.main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation .main-nav ul li a {
  line-height: normal !important;
  padding: 11px 15px !important;
  font-size: 15px;
  color: var(--tinta) !important;
  text-decoration: none;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:focus-within > a {
  background: var(--niebla);
  color: var(--ocre) !important;
}

.menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
}

.menu-idiomas > a { margin-left: 6px; }

/* ---------------------------------------------------------------
   Desplegables
   --------------------------------------------------------------- */
.main-navigation .menu-item-has-children { position: relative; }

.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(30, 30, 27, 0.12);
  opacity: 0;
  visibility: hidden;
  z-index: 70;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.main-navigation .sub-menu li a {
  display: block;
  padding: 9px 12px !important;
  white-space: nowrap;
  font-size: 14.5px;
}

/* Mega-menú de zonas: el listado es largo, así que va en columnas
   agrupado por comarca, que es como la gente piensa el territorio. */
.menu-zonas { position: static !important; }

.main-navigation .main-nav { position: relative; width: 100%; }


.zonas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.zonas-col h3 { margin: 0 0 10px; font-size: 14px; }

.zonas-col h3 a {
  color: var(--ocre) !important;
  padding: 0 !important;
  font-weight: 600;
}

.zonas-col ul { list-style: none; margin: 0; padding: 0; }

.zonas-col li,
.sub-menu-zonas ul li { float: none !important; }

.sub-menu-zonas ul {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  background: none !important;
}

.zonas-col li a {
  padding: 4px 0 !important;
  font-size: 14px;
  white-space: normal;
  border-radius: 4px;
}

.zonas-todas {
  display: block;
  border-top: 1px solid var(--borde);
  padding: 13px 26px !important;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tinta) !important;
  text-decoration: none;
  background: var(--niebla);
  border-radius: 0 0 10px 10px;
}

.zonas-todas:hover { color: var(--ocre) !important; }

/* ---------------------------------------------------------------
   Botones y piezas comunes
   --------------------------------------------------------------- */
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

.pagina { padding: 64px 0 84px; }

.pagina h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--tinta);
  max-width: 22ch;
}

.pagina .entradilla {
  font-size: 18px;
  line-height: 1.7;
  color: var(--tinta-suave);
  max-width: 68ch;
  margin: 0 0 40px;
}

.pagina h2 { font-size: 25px; margin: 44px 0 14px; color: var(--tinta); }
.pagina h3 { font-size: 18px; margin: 28px 0 8px; color: var(--tinta); }
.pagina p { line-height: 1.75; color: var(--tinta-suave); max-width: 72ch; }
.pagina a { color: var(--ocre); }

/* ---------------------------------------------------------------
   Servicios
   --------------------------------------------------------------- */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
}

.tarjeta-servicio {
  display: block;
  background: #fff;
  padding: 30px 28px 32px;
  text-decoration: none;
  color: inherit;
}

.tarjeta-servicio:hover { background: var(--niebla); }

.tarjeta-servicio i {
  font-size: 22px;
  color: var(--ocre);
  display: block;
  margin-bottom: 16px;
}

.tarjeta-servicio h3 { margin: 0 0 8px; font-size: 19px; color: var(--tinta); }

.tarjeta-servicio p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.servicio-portada {
  background: var(--niebla);
  border-bottom: 1px solid var(--borde);
  padding: 56px 0;
}

.servicio-portada .contenedor { display: grid; gap: 26px; }
.servicio-portada i { font-size: 30px; color: var(--ocre); }
.servicio-portada h1 { margin: 0; }

.servicio-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
  padding: 56px 0 80px;
}

.lista-trabajos { list-style: none; margin: 0 0 30px; padding: 0; }

.lista-trabajos li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--borde);
  color: #3c3b37;
  line-height: 1.6;
}

.lista-trabajos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ambar);
}

.panel-lateral {
  background: var(--niebla);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 24px 26px;
  position: sticky;
  top: 90px;
}

.panel-lateral h3 { margin: 0 0 14px; font-size: 16px; }
.panel-lateral ul { list-style: none; margin: 0; padding: 0; }

.panel-lateral li a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
  color: #3c3b37;
  text-decoration: none;
  font-size: 15px;
}

.panel-lateral li:last-child a { border-bottom: 0; }
.panel-lateral li a:hover { color: var(--ocre); }

/* ---------------------------------------------------------------
   Zonas y comarcas
   --------------------------------------------------------------- */
.bloque-comarca { margin-bottom: 46px; }

.bloque-comarca-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ambar);
  padding-bottom: 9px;
  margin-bottom: 8px;
}

.bloque-comarca-cab h2 { margin: 0; font-size: 21px; }
.bloque-comarca-cab a { font-size: 14.5px; font-weight: 600; text-decoration: none; }
.bloque-comarca > p { margin: 0 0 16px; font-size: 15px; }

.bloque-comarca ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.bloque-comarca li a {
  display: block;
  padding: 10px 14px;
  background: var(--niebla);
  border-radius: 7px;
  text-decoration: none;
  font-size: 15px;
  color: var(--tinta);
}

.bloque-comarca li a:hover { background: var(--ambar); }

.comarca-portada {
  background: var(--tinta);
  color: #fff;
  padding: 64px 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.comarca-portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 27, 0.72);
}

.comarca-portada .contenedor { position: relative; }
.comarca-portada h1 { color: #fff; margin: 0 0 14px; }
.comarca-portada p { color: #dedcd6; max-width: 68ch; font-size: 17px; line-height: 1.7; }

.comarca-detalle { padding: 54px 0 20px; }
.comarca-detalle article { margin-bottom: 34px; max-width: 74ch; }
.comarca-detalle h2 { margin: 0 0 10px; font-size: 22px; }

/* ---------------------------------------------------------------
   Nosotros
   --------------------------------------------------------------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 34px 0;
  margin: 40px 0;
}

.cifra strong {
  display: block;
  font-size: 34px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.1;
}

.cifra span { font-size: 15px; color: var(--tinta-suave); }

.rejilla-ventajas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.ventaja img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

.ventaja h3 { margin: 0 0 6px; font-size: 17px; }
.ventaja p { margin: 0; font-size: 14.5px; }

/* ---------------------------------------------------------------
   Blog
   --------------------------------------------------------------- */
.rejilla-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.tarjeta-blog {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.tarjeta-blog img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

.meta-blog { font-size: 13.5px; color: var(--tinta-suave); }
.meta-blog .categoria { color: var(--ocre); font-weight: 600; }

.tarjeta-blog h3 {
  margin: 6px 0 8px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--tinta);
}

.tarjeta-blog:hover h3 { color: var(--ocre); }
.tarjeta-blog p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-suave); }

.articulo { max-width: 72ch; margin: 0 auto; }
.articulo img.portada { width: 100%; height: 340px; object-fit: cover; border-radius: 12px; margin: 26px 0 34px; }
.articulo h2 { font-size: 23px; margin: 38px 0 12px; }
.articulo p { font-size: 17px; line-height: 1.8; }

.volver { display: inline-block; margin-top: 40px; font-weight: 600; text-decoration: none; }

.aviso-vacio {
  background: var(--niebla);
  border: 1px dashed var(--borde);
  border-radius: 12px;
  padding: 44px 24px;
  text-align: center;
}

/* ---------------------------------------------------------------
   Llamada final
   --------------------------------------------------------------- */
.cta-final { background: var(--niebla); border-top: 1px solid var(--borde); padding: 56px 0; }
.cta-final h2 { margin: 0 0 10px; font-size: 27px; color: var(--tinta); }
.cta-final p { margin: 0 0 22px; color: var(--tinta-suave); max-width: 60ch; }

/* ---------------------------------------------------------------
   Botones flotantes
   --------------------------------------------------------------- */
/* Botones flotantes de contacto: siempre un círculo con el icono; al
   pasar el ratón se ensanchan para revelar el texto. Igual en escritorio
   y en móvil (ahí se abre al tocar, porque no hay hover real). */
.flotantes {
  position: fixed;
  right: 20px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 90;
}

.flotante {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  color: var(--tinta);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 4px rgba(122, 91, 34, .35),
    0 6px 18px rgba(30, 30, 27, .22);
  overflow: hidden;
  white-space: nowrap;
  transition: width .22s ease, transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease;
}

.flotante i { font-size: 22px; flex: 0 0 54px; text-align: center; }

.flotante-txt {
  max-width: 0;
  opacity: 0;
  transition: max-width .22s ease, opacity .18s ease;
}

.flotante:hover,
.flotante:focus-visible {
  width: 172px;
  transform: translateY(-2px);
  color: #fff;
  background: linear-gradient(180deg, var(--ocre) 0%, var(--dorado-oscuro) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 4px rgba(0, 0, 0, .25),
    0 10px 26px rgba(30, 30, 27, .3);
}

.flotante:hover .flotante-txt,
.flotante:focus-visible .flotante-txt {
  max-width: 120px;
  opacity: 1;
  padding-right: 18px;
}

@media (max-width: 900px) {
  .flotantes { right: 14px; bottom: 16px; gap: 10px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------
   Formulario
   --------------------------------------------------------------- */
.elementor-form .elementor-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  box-sizing: border-box;
}

.elementor-form .elementor-field-group { margin-bottom: 14px; }

.elementor-form .elementor-button {
  background: var(--tinta);
  color: #fff;
  border: 0;
  padding: 13px 30px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.elementor-form .elementor-button:hover { background: var(--ocre); color: var(--tinta); }

/* ---------------------------------------------------------------
   Cookies
   --------------------------------------------------------------- */
.aviso-cookies {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.aviso-cookies-caja {
  background: #fff;
  color: var(--tinta);
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  padding: 34px 32px 28px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  text-align: center;
}

.aviso-cookies-caja h2 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--tinta);
}

.aviso-cookies p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--tinta-suave); }
.aviso-cookies a { color: var(--ocre); font-weight: 600; }

.cookies-enlace-ajustes {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ocre);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.aviso-cookies-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.aviso-cookies button {
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  flex: 1 1 auto;
}

.cookies-aceptar {
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%);
  color: var(--tinta);
  order: -1;
}
.cookies-aceptar:hover { color: #fff; }
.cookies-rechazar,
.cookies-ajustes { background: transparent; color: var(--tinta); border: 1px solid var(--borde); }
.cookies-rechazar:hover,
.cookies-ajustes:hover { border-color: var(--ocre); color: var(--ocre); }

.cookies-modal {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 27, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 210;
  padding: 20px;
}

.cookies-modal[hidden] { display: none; }

.cookies-modal-caja {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 30px 32px;
}

.cookies-modal-caja h2 { margin: 0 0 10px; font-size: 22px; color: var(--tinta); }
.cookies-modal-intro { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--tinta-suave); }

.cookies-modal-cerrar {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #8a8984;
  cursor: pointer;
}

.cookies-cat { border-top: 1px solid var(--borde); padding: 16px 0; }

.cookies-cat-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cookies-cat h3 { margin: 0; font-size: 15.5px; color: var(--tinta); }
.cookies-cat p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: #6b6a66; }
.cookies-estado-fijo { font-size: 12.5px; font-weight: 600; color: #8a8984; white-space: nowrap; }

.cookies-interruptor { display: inline-flex; cursor: pointer; }
.cookies-interruptor input { position: absolute; opacity: 0; }

.cookies-interruptor span {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #d5d4d0;
  position: relative;
  transition: background 0.2s ease;
}

.cookies-interruptor span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.cookies-interruptor input:checked + span { background: var(--ambar); }
.cookies-interruptor input:checked + span::after { transform: translateX(20px); }

.cookies-modal-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--borde);
  padding-top: 20px;
  margin-top: 6px;
}

.cookies-modal-botones button {
  border: 0;
  border-radius: 7px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cookies-activar-todo { background: var(--ambar); color: var(--tinta); }
.cookies-guardar { background: var(--tinta); color: #fff; }
.cookies-rechazar-todo { background: transparent; color: var(--tinta); border: 1px solid var(--borde); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
.menu-toggle { display: none; }

@media (max-width: 1100px) {
  .servicio-cuerpo { grid-template-columns: 1fr; gap: 34px; }
  .panel-lateral { position: static; }
}

/* El botón de despliegue de Servicios/Zonas solo existe para el menú
   móvil: en escritorio se oculta por completo (sin esto, quedaba como
   un cuadro gris sin estilo junto a esos enlaces). */
.submenu-toggle { display: none; }

@media (max-width: 1200px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ambar);
    border: 0;
    border-radius: 8px;
    width: 46px;
    height: 46px;
    flex: 0 0 46px !important;
    font-size: 19px;
    cursor: pointer;
  }

  /* Cabecera móvil en una sola fila: logo a la izquierda, lupa y menú
     hamburguesa juntos a la derecha, en vez del logo centrado arriba
     con el botón suelto debajo. */
  .inside-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }

  .site-logo img { width: 170px !important; }
  .buscador-boton {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  .main-navigation { flex: 0 0 auto !important; width: auto !important; }
  .inside-navigation { display: flex !important; flex: 0 0 auto !important; width: auto !important; }

  /* El menú, al abrirse, flota sobre el contenido en vez de empujarlo:
     así solo se ve el menú, no lo que hay debajo. */
  .main-navigation .main-nav { display: none; width: 100%; }

  /* El <nav> tiene position:relative por los desplegables de escritorio;
     al abrir el menú móvil se anula para que el panel se ancle a la
     cabecera completa (el ancestro con position:sticky) y no al propio
     <nav>, que solo mide lo ancho del botón hamburguesa. */
  .main-navigation.toggled,
  .main-navigation.toggled .inside-navigation { position: static !important; }

  .main-navigation.toggled .main-nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--borde);
    box-shadow: 0 18px 38px rgba(30, 30, 27, .2);
    padding: 6px 20px 16px;
    z-index: 70;
  }

  .main-navigation .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-navigation .main-nav ul li a { padding: 13px 4px !important; border-bottom: 1px solid var(--borde); border-radius: 0; }

  /* Servicios, Zonas e idiomas empiezan siempre plegados en móvil: el
     usuario los despliega él mismo tocando la flecha. El enlace del
     propio título sigue llevando directamente a esa página. */
  .main-navigation .sub-menu-panel,
  .main-navigation .menu-idiomas .sub-menu {
    display: none !important;
  }

  .main-navigation .menu-item-has-children.submenu-abierto > .sub-menu-panel,
  .main-navigation .menu-idiomas.submenu-abierto > .sub-menu {
    display: block !important;
  }

  .main-navigation .menu-item-has-children { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
  .main-navigation .menu-item-has-children > a { flex: 1 1 auto; border-bottom: 0 !important; }
  .main-navigation .menu-item-has-children { border-bottom: 1px solid var(--borde); }
  .main-navigation .menu-item-has-children > .sub-menu-panel,
  .main-navigation .menu-item-has-children > .sub-menu { flex-basis: 100%; }

  .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
  }

  .submenu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--tinta-suave);
    border-bottom: 2px solid var(--tinta-suave);
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform .18s ease;
  }

  .submenu-abierto > .submenu-toggle::before { transform: translate(-50%, -35%) rotate(-135deg); }

  /* Para idiomas, el propio enlace de la bandera hace de interruptor */
  .menu-idiomas > a { cursor: pointer; }

  .main-navigation .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 14px !important;
    max-width: none;
  }

  .zonas-panel { padding: 0; }
  .zonas-grid { max-height: none; grid-template-columns: 1fr 1fr; }
  .zonas-todas { background: none; padding: 12px 4px !important; }
  .menu-item-has-children > a::after { margin-left: auto; }
}

@media (max-width: 640px) {
  .zonas-grid { grid-template-columns: 1fr; }
  .franja-urgencias-interior { justify-content: center; }
  .franja-urgencias .aviso { display: none; }
  .articulo img.portada { height: 220px; }
  .aviso-cookies { flex-direction: column; align-items: flex-start; padding-bottom: 84px; }
  .cookies-modal-botones button { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
   Página Nosotros
   --------------------------------------------------------------- */
.bloque { padding-top: 18px; margin-bottom: 54px; scroll-margin-top: 200px; }
.bloque > h2 { margin-top: 0; }

.rejilla-publicos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 22px;
}

.publico { background: #fff; padding: 26px 24px 28px; }
.publico i { font-size: 20px; color: var(--ocre); display: block; margin-bottom: 12px; }
.publico h3 { margin: 0 0 7px; font-size: 17px; color: var(--tinta); }
.publico p { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* Mapa de cobertura */
.mapa {
  height: 460px;
  margin: 26px 0 32px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  background: var(--niebla);
  z-index: 1;
}

.leaflet-container { font-family: inherit; }
.leaflet-popup-content a { color: var(--tinta); font-weight: 600; text-decoration: none; }

.rejilla-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.zona-lista h3 {
  margin: 0 0 10px;
  font-size: 15px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--ambar);
}

.zona-lista h3 a { color: var(--tinta); text-decoration: none; }
.zona-lista h3 a:hover { color: var(--ocre); }
.zona-lista ul { list-style: none; margin: 0; padding: 0; }

.zona-lista li a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  color: var(--tinta-suave);
  text-decoration: none;
}

.zona-lista li a:hover { color: var(--ocre); }

/* Nuestro compromiso, justo antes del pie */
.compromiso {
  background: var(--tinta);
  color: #fff;
  padding: 62px 0 68px;
}

.compromiso h2 { color: #fff; margin: 0 0 12px; font-size: 29px; }
.compromiso .entradilla { color: #c9c8c3; margin: 0 0 34px; max-width: 60ch; }

.rejilla-compromiso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  margin-bottom: 34px;
}

.punto { border-top: 3px solid var(--ambar); padding-top: 16px; }
.punto h3 { margin: 0 0 7px; font-size: 17px; color: #fff; }
.punto p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c9c8c3; }

@media (max-width: 640px) {
  .mapa { height: 340px; }
}

/* =====================================================================
   Capa de profundidad: fondos alternos, elevación y color por servicio.
   El sitio era muy plano porque todo iba sobre blanco; aquí se separan
   las secciones con color y se da relieve a las piezas clicables.
   ===================================================================== */

:root {
  --sombra-1: 0 1px 2px rgba(30, 30, 27, .06), 0 4px 14px rgba(30, 30, 27, .07);
  --sombra-2: 0 6px 14px rgba(30, 30, 27, .10), 0 18px 40px rgba(30, 30, 27, .13);
}

/* Franja de color bajo la cabecera, para que el contenido no arranque
   directamente en blanco sobre blanco. */
.site-header { border-bottom: 3px solid var(--ambar); }

/* --- Secciones alternas en Nosotros --- */
.bloque {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 34px 34px 30px;
  margin-bottom: 30px;
  box-shadow: var(--sombra-1);
}

.bloque:nth-of-type(even) { background: var(--niebla); }

.bloque > h2 {
  position: relative;
  padding-left: 16px;
  margin-bottom: 14px;
}

.bloque > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: var(--ambar);
}

/* --- Chip de icono con color propio --- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--acento, #e1982b) 14%, #fff);
  color: var(--acento, #e1982b);
  margin-bottom: 16px;
}

.chip i { font-size: 21px; color: inherit; display: block; margin: 0; }

/* --- Tarjetas de servicio --- */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 22px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.tarjeta-servicio {
  position: relative;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 28px 26px 30px;
  box-shadow: var(--sombra-1);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

.tarjeta-servicio::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--acento, var(--ocre));
}

.tarjeta-servicio:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}

.tarjeta-servicio i { margin-bottom: 0; }

/* --- Portada de servicio con su color --- */
.servicio-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 70px 0 76px;
}

.servicio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--acento, #1e1e1b) 92%, #000) 0%,
    rgba(30, 30, 27, .78) 100%);
}

.servicio-hero .contenedor { position: relative; }
.servicio-hero-caja { max-width: 64ch; color: #fff; }
.servicio-hero-caja .chip { background: rgba(255, 255, 255, .16); color: #fff; }
.servicio-hero-caja h1 { color: #fff; margin: 0 0 12px; }
.servicio-hero-caja p { color: #e6e4de; font-size: 18px; margin: 0 0 24px; }

.servicio-portada { display: none; }

.lista-trabajos li::before { background: var(--acento, var(--ambar)); }

.panel-lateral {
  background: #fff;
  box-shadow: var(--sombra-1);
  border-radius: 16px;
}

.panel-lateral h3 {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ambar);
}

/* --- Zonas: tarjetas de comarca con imagen --- */
.bloque-comarca {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-1);
  padding: 28px 30px 30px;
  margin-bottom: 26px;
}

.bloque-comarca-cab { border-bottom: 3px solid var(--ambar); }

.bloque-comarca li a {
  background: var(--niebla);
  border: 1px solid var(--borde);
  transition: background .15s ease, border-color .15s ease;
}

.bloque-comarca li a:hover { background: var(--ambar); border-color: var(--ocre); }

/* --- Para quién trabajamos --- */
.rejilla-publicos {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: 20px;
}

.publico {
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-1);
  padding: 26px 24px 28px;
}

.publico:nth-child(1) { --acento: #2f7ea8; }
.publico:nth-child(2) { --acento: #5c7a5e; }
.publico:nth-child(3) { --acento: #e1982b; }
.publico:nth-child(4) { --acento: #6b5b7b; }

.publico i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--acento) 14%, #fff);
  color: var(--acento);
  font-size: 18px;
  margin-bottom: 14px;
}

/* --- Cifras como tarjetas --- */
.cifras {
  border: 0;
  padding: 0;
  gap: 18px;
  margin: 30px 0 0;
}

.cifra {
  background: #fff;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--ambar);
  border-radius: 14px;
  padding: 22px 22px 24px;
  box-shadow: var(--sombra-1);
}

.cifra strong { color: var(--ocre); }

/* --- Ventajas --- */
.ventaja {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ventaja:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.ventaja img { width: 100%; border-radius: 0; margin-bottom: 0; height: 150px; object-fit: cover; }
.ventaja h3 { margin: 16px 22px 6px; }
.ventaja p { margin: 0 22px 22px; }

/* --- Blog --- */
.tarjeta-blog {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform .18s ease, box-shadow .18s ease;
}

.tarjeta-blog:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.tarjeta-blog img { border-radius: 0; margin-bottom: 0; height: 180px; }
.meta-blog { display: block; margin: 18px 22px 0; }

.meta-blog .categoria {
  display: inline-block;
  background: var(--ambar);
  color: var(--tinta);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12.5px;
  margin-right: 8px;
}

.tarjeta-blog h3 { margin: 10px 22px 8px; }
.tarjeta-blog p { margin: 0 22px 24px; }

/* --- Mapa --- */
.mapa { box-shadow: var(--sombra-1); }

/* --- Zona de trabajo --- */
.zona-lista {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 20px 20px 22px;
  box-shadow: var(--sombra-1);
}

/* --- Compromiso --- */
.punto {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 4px solid var(--ambar);
  border-radius: 14px;
  padding: 22px 22px 24px;
}

/* --- Llamada final --- */
.cta-final {
  background: linear-gradient(180deg, var(--niebla) 0%, #fff 100%);
  border-top: 3px solid var(--ambar);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-servicio:hover,
  .tarjeta-blog:hover,
  .ventaja:hover { transform: none; }
}

@media (max-width: 640px) {
  .bloque { padding: 24px 20px 22px; border-radius: 14px; }
}

/* Las tarjetas de sección deben ocupar el ancho del contenedor; la
   medida de línea se limita solo en los párrafos, no en los bloques. */
.bloque { width: 100%; box-sizing: border-box; }
.bloque > p, .bloque .publico p, .bloque .ventaja p { max-width: 68ch; }
.pagina > .contenedor { width: 100%; }
.pagina h1 { max-width: 26ch; }

/* GeneratePress reserva ancho para una barra lateral aunque no exista,
   y deja el contenido en ~721px. Como estas páginas son a ancho
   completo, se libera ese espacio. */
.site-content, #primary, .content-area, main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================================
   Pie de página
   ===================================================================== */
.sitio-pie {
  background: var(--tinta);
  color: #fff;
  border-top: 4px solid var(--ambar);
}

.pie-interior {
  text-align: center;
  padding: 54px 20px 46px;
}

/* El logo de marca lleva texto oscuro, así que sobre el pie negro va
   dentro de una placa blanca en lugar de invertido. */
.pie-logo {
  display: inline-block;
  background: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 20px;
  line-height: 0;
}

.pie-logo img { width: 230px; max-width: 60vw; height: auto; display: block; }

.pie-eslogan {
  margin: 0 auto 28px;
  max-width: 60ch;
  color: #c9c8c3;
  font-size: 16px;
  line-height: 1.65;
}

.pie-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}

/* Botones de llamar y WhatsApp: mismo dorado con relieve que el resto */
.boton-brillante {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.boton-brillante i { font-size: 17px; }

.boton-llamar,
.boton-wa {
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%);
  color: var(--tinta) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 4px rgba(122, 91, 34, .35),
    0 4px 14px rgba(169, 127, 52, .35);
}

.boton-brillante:hover {
  transform: translateY(-2px);
  color: #fff !important;
  background: linear-gradient(180deg, var(--ocre) 0%, var(--dorado-oscuro) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 4px rgba(0, 0, 0, .25),
    0 8px 22px rgba(122, 91, 34, .45);
}

.pie-datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #b5b4af;
  font-size: 14.5px;
}

.pie-horario {
  display: inline-block;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 6px 18px;
  color: var(--ambar);
  font-weight: 600;
  margin-bottom: 6px;
}

.pie-legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: #8a8984;
}

.pie-legal .contenedor {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.pie-legal a { color: #b5b4af; text-decoration: none; }
.pie-legal a:hover { color: var(--ambar); }

@media (prefers-reduced-motion: reduce) {
  .boton-brillante::after { display: none; }
  .boton-brillante:hover { transform: none; }
}

@media (max-width: 640px) {
  .pie-botones { flex-direction: column; align-items: stretch; }
  .boton-brillante { justify-content: center; }
  .pie-legal .contenedor { justify-content: center; text-align: center; }
}

/* =====================================================================
   Tarjetas de servicio simplificadas.
   Se retira el color propio por servicio: quedaba demasiado contrastado
   frente al resto de la página. Ahora todas comparten el ámbar de la
   marca y se distinguen por el dibujo.
   ===================================================================== */
.tarjeta-servicio {
  border: 1.5px solid var(--ambar);
  box-shadow: none;
  text-align: center;
  padding: 30px 24px 32px;
}

.tarjeta-servicio::before { display: none; }

.tarjeta-servicio:hover {
  border-color: var(--ocre);
  background: #fffdf8;
  transform: none;
  box-shadow: 0 4px 16px rgba(225, 152, 43, .16);
}

.tarjeta-servicio .dibujo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}

.tarjeta-servicio h3 { margin: 0 0 7px; font-size: 18px; }
.tarjeta-servicio p { max-width: 30ch; margin: 0 auto; }

/* Dibujo sobre fondo oscuro, en la portada de cada servicio */
.dibujo-claro {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
  filter: invert(1);
}

/* La portada de servicio vuelve al tono de marca, sin color propio */
.servicio-hero::before {
  background: linear-gradient(100deg, rgba(30, 30, 27, .88) 0%, rgba(30, 30, 27, .72) 100%);
}

.lista-trabajos li::before { background: var(--ambar); }

/* =====================================================================
   Antetítulos, bloque de urgencia e índice por localidad
   ===================================================================== */
.eyebrow {
  display: inline-block;
  color: var(--ocre);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.servicio-hero-caja .eyebrow { color: var(--ambar); }

/* --- Bloque de urgencia, presente en todas las páginas --- */
.urgencia {
  background: var(--tinta);
  border-top: 4px solid var(--ambar);
}

.urgencia-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 44px;
  padding-bottom: 46px;
}

.urgencia-texto { flex: 1 1 360px; }

.urgencia-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ambar);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}

.urgencia-texto p {
  margin: 0 0 16px;
  color: #dedcd6;
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 52ch;
}

.urgencia-tel {
  display: block;
  color: #fff;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  line-height: 1.1;
}

.urgencia-tel:hover { color: var(--ambar); }

.urgencia-horario { display: block; margin-top: 6px; color: #9c9b96; font-size: 14.5px; }

.urgencia-botones {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 1 330px;
}

.urgencia-botones .boton-brillante { justify-content: center; font-size: 16.5px; }

/* --- Índice de servicios por localidad --- */
.indice-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.indice-col {
  background: #fff;
  border: 1.5px solid var(--ambar);
  border-radius: 14px;
  padding: 22px 22px 24px;
}

.indice-col h3 {
  margin: 0 0 12px;
  font-size: 17px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}

.indice-col h3 a { color: var(--tinta); text-decoration: none; }
.indice-col h3 a:hover { color: var(--ocre); }
.indice-col ul { list-style: none; margin: 0; padding: 0; }

.indice-col li a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--tinta-suave);
  text-decoration: none;
}

.indice-col li a:hover { color: var(--ocre); }

@media (max-width: 900px) {
  .urgencia-interior { flex-direction: column; align-items: stretch; gap: 26px; }
  .urgencia-botones { flex: 1 1 auto; }
}

/* =====================================================================
   Paneles desplegables a todo el ancho y selector de idioma con bandera
   ===================================================================== */

/* Los elementos con panel no posicionan el desplegable respecto a sí
   mismos, sino respecto a la barra, para poder ocupar todo el ancho. */
.main-navigation .menu-panel { position: static !important; }

.sub-menu-panel {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  box-shadow: 0 18px 34px rgba(30, 30, 27, .10);
}

.panel-li { list-style: none; float: none !important; }
.panel-grid > li { float: none !important; }

.panel-grid,
.zonas-grid {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 30px 20px 26px;
  display: grid;
  gap: 4px 30px;
}

.panel-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.zonas-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 30px;
  max-height: 62vh;
  overflow-y: auto;
}

/* El tema colapsa cualquier <ul> anidado (height:0) y solo lo revierte
   con :hover. Dentro de los paneles hay que anularlo siempre. */
.sub-menu-panel ul,
.sub-menu-panel ul li ul {
  position: static !important;
  left: auto !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  list-style: none;
  margin: 0;
}

.sub-menu-panel li { float: none !important; }

.panel-grid li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 10px !important;
  border-radius: 8px;
  font-size: 16px;
  color: var(--tinta) !important;
  white-space: normal;
}

.panel-grid li a img { width: 30px !important; height: 30px !important; object-fit: contain; flex: 0 0 auto; }
.panel-grid li a:hover { background: var(--niebla); color: var(--ocre) !important; }

.panel-pie {
  display: block;
  border-top: 1px solid var(--borde);
  background: var(--niebla);
  padding: 14px 20px !important;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta) !important;
}

.panel-pie:hover { color: var(--ocre) !important; }

/* Selector de idioma: solo la bandera en la barra */
.menu-idiomas > a {
  padding: 9px 12px !important;
  font-size: 20px;
  line-height: 1;
}

.bandera { font-size: 19px; line-height: 1; }
.menu-idiomas .sub-menu { min-width: 180px; left: auto; right: 0; }

.menu-idiomas .sub-menu li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

@media (max-width: 1200px) {
  .sub-menu-panel { border-top: 0; box-shadow: none; }
  .panel-grid, .zonas-grid { padding: 6px 0; max-height: none; }
  .panel-grid { grid-template-columns: 1fr; }
  .zonas-grid { grid-template-columns: 1fr 1fr; }
  .panel-pie { background: none; text-align: left; padding: 12px 4px !important; }
  .menu-idiomas > a { justify-content: flex-start; }
}

/* La regla genérica .sub-menu-panel ul tiene más peso que .panel-grid,
   así que la rejilla se refuerza aquí. */
.sub-menu-panel ul.panel-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 4px 26px !important;
  max-width: var(--ancho) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 26px 20px 22px !important;
}

.sub-menu-panel .zonas-grid {
  max-width: var(--ancho);
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .sub-menu-panel ul.panel-grid {
    grid-template-columns: 1fr !important;
    padding: 6px 0 !important;
  }
}

.sub-menu-panel .panel-pie {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  border-radius: 0 !important;
}

/* =====================================================================
   Ritmo vertical.
   Había huecos irregulares porque se sumaban el relleno de .pagina, el
   margen de los titulares y el relleno de las tarjetas. Aquí se unifica.
   ===================================================================== */
.pagina { padding: 56px 0 72px; }

/* El primer y el último elemento de una página o tarjeta no añaden
   margen propio: el relleno del contenedor ya lo aporta. */
.pagina > .contenedor > :first-child,
.bloque > :first-child,
.publico > :first-child,
.indice-col > :first-child { margin-top: 0; }

.pagina > .contenedor > :last-child,
.bloque > :last-child,
.publico > :last-child { margin-bottom: 0; }

.pagina .entradilla { margin-bottom: 32px; }

/* Titulares de sección dentro de una página larga */
.titulo-seccion { margin-top: 60px; }
.pagina h2 { margin: 38px 0 12px; }
.pagina h3 { margin: 24px 0 6px; }

/* Separaciones entre bloques de sección */
.bloque { margin-bottom: 26px; padding: 30px 32px; }
.bloque:last-of-type { margin-bottom: 0; }

.rejilla-servicios,
.rejilla-publicos,
.rejilla-ventajas,
.rejilla-blog,
.indice-rejilla,
.rejilla-zonas { margin-top: 26px; }

.cifras { margin: 26px 0 0; }
.bloque-comarca:last-of-type { margin-bottom: 0; }

/* La lista de una comarca no necesita margen extra bajo el texto */
.bloque-comarca > p { margin-bottom: 14px; }

/* Artículo del blog */
.articulo h2 { margin: 34px 0 10px; }
.articulo p { margin: 0 0 16px; }
.articulo img.portada { margin: 22px 0 28px; }

/* Servicio: el cuerpo ya lleva su propio relleno, no duplicar */
.servicio-cuerpo { padding: 52px 0 72px; }
.servicio-col > :first-child { margin-top: 0; }
.servicio-col h2 { margin-top: 44px; }
.servicio-col h2:first-child { margin-top: 0; }
.lista-trabajos { margin-bottom: 26px; }

/* Secciones oscuras consecutivas: sin doble borde ámbar */
.compromiso + .urgencia { border-top: 0; }
.cta-final + .urgencia { border-top-width: 3px; }

@media (max-width: 640px) {
  .pagina { padding: 40px 0 56px; }
  .bloque { padding: 22px 20px; }
  .titulo-seccion { margin-top: 44px; }
}

/* =====================================================================
   Ancho completo, banderas y panel plano de zonas
   ===================================================================== */

/* GeneratePress limitaba el contenedor a 1200px, lo que dejaba franjas
   blancas muy anchas. Se amplía, pero conservando un margen lateral:
   a pantalla completa el contenido queda estirado y se lee peor. */
/* Las secciones con imagen de fondo ocupan todo el ancho de la ventana;
   lo que se limita es el contenido interior, no el contenedor. Así el
   fondo llega de borde a borde y el texto queda centrado y legible. */
#page.grid-container,
#page.container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor .e-con.e-parent { max-width: 100% !important; }

/* La cabecera y las secciones oscuras siguen el mismo margen */
.site-header .inside-header,
.franja-urgencias-interior { max-width: 1240px; }

@media (max-width: 900px) {
  .elementor .e-con-boxed > .e-con-inner { padding-left: 20px; padding-right: 20px; }
}

/* El contenido interior sigue centrado y con medida legible */
.elementor .e-con-boxed > .e-con-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* El hueco bajo el hero de la portada */
.elementor .e-con.e-parent:first-of-type { margin-bottom: 0 !important; }

/* --- Banderas --- */
.bandera {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(30, 30, 27, .12);
  flex: 0 0 auto;
}

.menu-idiomas > a { padding: 10px 12px !important; }

/* --- Panel de zonas: rejilla plana de todas las localidades --- */
.sub-menu-panel ul.panel-grid-zonas {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 2px 26px !important;
}

.panel-grid-zonas li a {
  display: block !important;
  padding: 10px 10px !important;
  font-size: 15.5px;
}

@media (max-width: 1200px) {
  .sub-menu-panel ul.panel-grid-zonas { grid-template-columns: 1fr 1fr !important; }
}

/* =====================================================================
   Alineación dentro de las tarjetas.
   Los titulares y párrafos usaban márgenes laterales propios, que las
   reglas generales de .pagina pisaban y dejaban el texto desalineado.
   Ahora el relleno lo pone la tarjeta y los hijos no llevan margen.
   ===================================================================== */
.ventaja,
.publico,
.cifra,
.punto,
.zona-lista,
.indice-col,
.tarjeta-blog .meta-blog,
.tarjeta-blog h3,
.tarjeta-blog p { box-sizing: border-box; }

.ventaja {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
}

.ventaja i,
.publico i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 189, 89, .18);
  color: var(--ocre);
  font-size: 18px;
  margin: 0 0 14px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.pagina .ventaja h3,
.pagina .publico h3,
.pagina .punto h3,
.pagina .indice-col h3,
.pagina .zona-lista h3 { margin: 0 0 7px; }

.pagina .ventaja p,
.pagina .publico p,
.pagina .punto p { margin: 0; }

.pagina .cifra strong { margin: 0; }

.tarjeta-blog .meta-blog,
.tarjeta-blog h3,
.tarjeta-blog p { padding-left: 22px; padding-right: 22px; margin-left: 0; margin-right: 0; }

.pagina .tarjeta-blog h3 { margin: 8px 0; }
.pagina .tarjeta-blog p { margin: 0 0 22px; }

/* Mapa: si Leaflet no carga (sin conexión), no dejar un hueco vacío */
.mapa { position: relative; }

.mapa-respaldo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.6;
}

.mapa.cargado .mapa-respaldo { display: none; }

/* Mapa de cobertura: leyenda y etiquetas */
.mapa-figura {
  margin: 26px 0 32px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.mapa-figura .mapa {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mapa-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  border-top: 1px solid var(--borde);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}

.mapa-leyenda { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--tinta); }

.mapa-leyenda::before {
  content: "";
  width: 22px;
  height: 13px;
  border: 2px solid var(--ocre);
  background: rgba(255, 189, 89, .35);
  border-radius: 3px;
}

.leaflet-tooltip.mapa-etiqueta {
  background: var(--tinta);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.leaflet-tooltip.mapa-etiqueta::before { border-top-color: var(--tinta); }
.leaflet-container { cursor: default; }
.leaflet-interactive { cursor: pointer; }

/* Botones de contacto dentro del hero de la portada */
.hero-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.hero-botones .boton-brillante { font-size: 16px; }

@media (max-width: 560px) {
  .hero-botones { flex-direction: column; align-items: stretch; }
  .hero-botones .boton-brillante { justify-content: center; }
}

/* El bloque de teléfonos del hero ocupaba el 31% del ancho y tenía un
   icono de teléfono al lado. Al cambiarlo por botones, se le da todo el
   ancho de la fila y se retira ese icono, que ya no aporta nada. */
.elementor-element-eecf015 { display: none !important; }

.elementor-element-65bfa75 {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
}

.elementor-element-65bfa75 .elementor-heading-title { line-height: 1.4 !important; }

/* El CSS original de Elementor teñía de negro estas imágenes con
   filter: brightness(0), porque antes eran siluetas monocromas. Las
   ilustraciones actuales tienen color propio, así que se anula. */
.elementor img[src*="respuesta-inmediata"],
.elementor img[src*="profesionales-cualificados"],
.elementor img[src*="precios-claros"],
.elementor img[src*="amplia-cobertura"],
.elementor img[src*="/assets/img/foto-"] {
  filter: none !important;
}

/* El hero de la portada estaba fijado a 85vh, demasiado alto en
   pantallas normales. Se reduce a una altura más proporcionada. */
.elementor-element-fdbceee {
  --min-height: 46vh !important;
  min-height: 46vh !important;
}

@media (max-width: 1024px) {
  .elementor-element-fdbceee { --min-height: 40vh !important; min-height: 40vh !important; }
}

@media (max-width: 767px) {
  .elementor-element-fdbceee { --min-height: 0vh !important; min-height: 0 !important; }
}

/* =====================================================================
   Tarjetas "Nos diferenciamos por" (contenido heredado de WordPress).
   Se detectan por su firma de ajustes, no por ID, así el arreglo aplica
   estén donde estén: llevaban una insignia con badge degradado e imagen
   forzada a negro que quedaba borrosa. Ahora la insignia muestra el
   dibujo a color, sobre un fondo suave acorde al resto del sitio.
   ===================================================================== */
.tarjeta-valor {
  background: #fff !important;
  border: 1px solid var(--borde) !important;
  border-radius: 14px !important;
  box-shadow: var(--sombra-1) !important;
  transition: transform .18s ease, box-shadow .18s ease;
  padding-top: 28px !important;
}

.tarjeta-valor:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2) !important;
}

.insignia-valor {
  margin-top: -48px !important;
}

.insignia-valor .elementor-widget-container {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--borde) !important;
  border-radius: 16px !important;
  box-shadow: var(--sombra-1) !important;
  padding: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.insignia-valor img {
  filter: none !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
}

/* =====================================================================
   Preguntas frecuentes
   ===================================================================== */
.faq { background: var(--niebla); border-top: 1px solid var(--borde); }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 50px;
  padding-top: 64px;
  padding-bottom: 64px;
  align-items: start;
}

.faq-intro .eyebrow { display: block; }
.faq-intro h2 { margin: 0 0 14px; font-size: 32px; color: var(--tinta); }
.faq-intro p { margin: 0 0 22px; color: var(--tinta-suave); line-height: 1.7; }

.faq-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--ambar);
  padding-bottom: 3px;
}

.faq-enlace:hover { color: var(--ocre); }

.faq-lista { border-top: 1px solid var(--borde); }

.faq-item {
  border-bottom: 1px solid var(--borde);
  padding: 22px 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ocre);
  transition: background .15s ease, border-color .15s ease;
}

.faq-icono::before { content: "+"; }
.faq-item[open] .faq-icono { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.faq-item[open] .faq-icono::before { content: "\2212"; }
.faq-item summary:hover .faq-icono { border-color: var(--ocre); }

.faq-respuesta { padding-top: 14px; }
.faq-respuesta p { margin: 0; color: var(--tinta-suave); line-height: 1.75; max-width: 68ch; }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 46px; padding-bottom: 46px; }
  .faq-item summary { font-size: 16px; }
}

/* =====================================================================
   Botones de acción: dorado de marca con relieve, en todo el sitio.
   Letra negra en reposo; al pasar el ratón se aclara a blanco sobre un
   dorado más oscuro, para que el contraste se mantenga en ambos estados.
   Incluye los botones que vienen de las plantillas de Elementor, que
   tenían estilos propios distintos en cada página.
   ===================================================================== */
.boton,
.elementor .elementor-button,
.elementor-form .elementor-button {
  display: inline-block;
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%) !important;
  color: var(--tinta) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 4px rgba(122, 91, 34, .35),
    0 4px 14px rgba(169, 127, 52, .3) !important;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, background .16s ease !important;
}

.boton:hover,
.elementor .elementor-button:hover,
.elementor-form .elementor-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--ocre) 0%, var(--dorado-oscuro) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 4px rgba(0, 0, 0, .25),
    0 8px 22px rgba(122, 91, 34, .4) !important;
  color: #fff !important;
}

/* El botón fantasma mantiene su papel secundario, con el mismo giro
   negro -> blanco al pasar el ratón, pero sin relleno hasta entonces */
.boton-fantasma {
  background: transparent !important;
  border: 1.5px solid var(--ocre) !important;
  color: var(--tinta) !important;
  box-shadow: none !important;
}

.boton-fantasma:hover {
  background: linear-gradient(180deg, var(--ocre) 0%, var(--dorado-oscuro) 100%) !important;
  border-color: var(--dorado-oscuro) !important;
  color: #fff !important;
}

/* Enlace "Llamar ahora" que acompaña al botón principal */
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.enlace-llamar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ocre);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.enlace-llamar:hover { border-bottom-color: var(--ocre); }

/* En el hero oscuro de servicio, el enlace se aclara para que contraste */
.servicio-hero-caja .enlace-llamar { color: var(--ambar); }
.servicio-hero-caja .enlace-llamar:hover { border-bottom-color: var(--ambar); }

@media (max-width: 560px) {
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .boton { text-align: center; }
  .enlace-llamar { justify-content: center; }
}

/* =====================================================================
   Páginas de servicio: cabecera con foto enmarcada y rejilla de
   sub-servicios con tarjetas de borde dorado.
   ===================================================================== */
.serv-cabecera { padding: 56px 0 44px; background: #fff; }

.serv-cabecera-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.serv-cabecera-texto h1 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0 0 16px;
  max-width: 18ch;
}

.serv-cabecera-texto p {
  color: var(--tinta-suave);
  line-height: 1.75;
  font-size: 16px;
  margin: 0 0 24px;
  max-width: 58ch;
}

/* La foto va enmarcada en dorado, como en el diseño de referencia */
.serv-cabecera-foto {
  border-radius: 22px;
  padding: 5px;
  background: linear-gradient(135deg, #f3d9a4 0%, var(--ambar) 40%, var(--ocre) 100%);
  box-shadow: 0 14px 34px rgba(30, 30, 27, .16);
}

.serv-cabecera-foto img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 18px;
}

.serv-rejilla-seccion { padding: 10px 0 72px; background: #fff; }

.serv-rejilla-titulo {
  text-align: center;
  font-size: 28px;
  color: var(--tinta);
  margin: 0 0 32px;
}

.serv-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.tarjeta-sub {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border: 1.5px solid;
  border-image: linear-gradient(135deg, #e7c88a, var(--ocre)) 1;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fdfaf4 100%);
  box-shadow: 0 2px 10px rgba(30, 30, 27, .06);
  transition: transform .16s ease, box-shadow .16s ease;
}

/* border-image no admite radio: se usa un borde sólido de respaldo */
@supports (border-image: linear-gradient(red, red) 1) {
  .tarjeta-sub { border-image: none; border-color: #e8cf9c; }
}

.tarjeta-sub:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(225, 152, 43, .2);
}

.tarjeta-sub-icono {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 189, 89, .16);
  color: var(--ocre);
  font-size: 20px;
}

.tarjeta-sub h3 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta);
}

.tarjeta-sub p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.serv-otros {
  margin-top: 36px;
  border-top: 1px solid var(--borde);
  padding-top: 24px;
}

.serv-otros h3 { margin: 0 0 12px; font-size: 16px; color: var(--tinta); }

.serv-otros ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.serv-otros li a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #e8cf9c;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--tinta);
  text-decoration: none;
}

.serv-otros li a:hover { background: rgba(255, 189, 89, .18); color: var(--ocre); }

@media (max-width: 900px) {
  .serv-cabecera-grid { grid-template-columns: 1fr; gap: 28px; }
  .serv-cabecera-texto h1 { max-width: none; }
  .serv-cabecera-foto img { height: 230px; }
  .serv-cabecera { padding: 36px 0 28px; }
}

/* =====================================================================
   Página de localidad: zonas cercanas y rejilla de servicios.
   ===================================================================== */
.loc-zonas {
  background: var(--niebla);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 44px 0;
}

.loc-zonas h2 { margin: 6px 0 20px; font-size: 24px; color: var(--tinta); }

.loc-zonas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.loc-zonas-lista li a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--borde);
  color: var(--tinta);
  text-decoration: none;
  font-size: 14.5px;
}

.loc-zonas-lista li a:hover { border-color: var(--ocre); color: var(--ocre); }

.loc-servicios { padding: 52px 0 60px; }
.loc-servicios h2 { margin: 6px 0 10px; font-size: 26px; color: var(--tinta); }
.loc-servicios .entradilla { margin-bottom: 30px; }

/* Enlace "Ver detalle" dentro de la tarjeta de servicio ya existente */
.tarjeta-servicio-enlace {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ocre);
}

.tarjeta-servicio:hover .tarjeta-servicio-enlace { text-decoration: underline; }

/* =====================================================================
   Botón de búsqueda global y su panel.
   ===================================================================== */
.buscador-boton {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: #fff;
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 20;
  transition: border-color .15s ease, color .15s ease;
}

.buscador-boton:hover { border-color: var(--ocre); color: var(--ocre); }

.buscador-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 27, .55);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 20px 20px;
}

.buscador-caja {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}

.buscador-input-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borde);
  flex: 0 0 auto;
}

.buscador-input-fila i { color: var(--tinta-suave); font-size: 16px; }

.buscador-input-fila input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-family: inherit;
  color: var(--tinta);
}

.buscador-cerrar {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta-suave);
  cursor: pointer;
  padding: 2px 4px;
}

.buscador-cerrar:hover { color: var(--tinta); }

.buscador-resultados {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
}

.buscador-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--tinta);
  font-size: 14.5px;
}

.buscador-item:hover { background: var(--niebla); }

.buscador-item-cat {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ocre);
  background: rgba(255, 189, 89, .16);
  padding: 3px 8px;
  border-radius: 999px;
}

.buscador-vacio {
  padding: 22px 14px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 14.5px;
}

@media (max-width: 640px) {
  .buscador-overlay { padding: 74px 14px 14px; }
}

/* =====================================================================
   Secciones propias de la portada: servicios, por qué elegirnos, dónde
   trabajamos y cómo trabajamos. Sustituyen al contenido antiguo de
   WordPress, que quedaba anticuado y duplicaba páginas ya existentes.
   ===================================================================== */
.home-servicios { background: #fff; padding-top: 64px; }
.home-porque { background: var(--niebla); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }

.home-ver-todos { margin-top: 30px; text-align: center; }

.home-zonas {
  background: #fff;
  padding: 64px 0;
  text-align: center;
}

.home-zonas .entradilla { margin-left: auto; margin-right: auto; }

.pastillas-zonas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 26px;
}

.pastilla-zona {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--niebla);
  border: 1px solid var(--borde);
  color: var(--tinta);
  text-decoration: none;
  font-size: 14.5px;
}

.pastilla-zona:hover { background: var(--ambar); border-color: var(--ocre); }

.home-proceso { background: var(--niebla); border-top: 1px solid var(--borde); }

.rejilla-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  margin-top: 30px;
}

.paso {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 24px 22px 26px;
  position: relative;
}

.paso-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--ambar);
  -webkit-text-stroke: 1px var(--ocre);
  margin-bottom: 10px;
}

.paso h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--tinta); }
.paso p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }

@media (max-width: 640px) {
  .home-servicios, .home-zonas { padding: 44px 0; }
}

/* =====================================================================
   "Contacta con nuestros técnicos": teléfono, WhatsApp y correo, cada
   uno con su botón. Sustituye al bloque plano heredado de WordPress.
   ===================================================================== */
.contacto-directo {
  background: #fff;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 56px 0 60px;
}

.contacto-directo h1 {
  text-align: center;
  font-size: 28px;
  color: var(--tinta);
  margin: 0 0 40px;
}

.contacto-directo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}

.contacto-tarjeta {
  text-align: center;
  padding: 0 28px;
  border-left: 1px solid var(--borde);
}

.contacto-tarjeta:first-child { border-left: 0; }

.contacto-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%);
  color: var(--tinta);
  font-size: 22px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 4px rgba(122, 91, 34, .35);
}

.contacto-tarjeta h3 {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tinta);
}

.contacto-dato {
  margin: 0 0 18px;
  font-size: 15px;
  word-break: break-word;
}

.contacto-dato a { color: var(--ocre); text-decoration: none; font-weight: 600; }
.contacto-dato a:hover { text-decoration: underline; }

.contacto-tarjeta .boton { display: inline-block; font-size: 14px; padding: 11px 22px; }

@media (max-width: 700px) {
  .contacto-directo-rejilla { grid-template-columns: 1fr; gap: 30px; }
  .contacto-tarjeta { border-left: 0; border-top: 1px solid var(--borde); padding: 26px 10px 0; }
  .contacto-tarjeta:first-child { border-top: 0; padding-top: 0; }
}

/* =====================================================================
   Formulario de contacto: cabecera, tarjeta contenida y aviso legal.
   ===================================================================== */
.form-contacto-seccion { background: var(--niebla); padding: 60px 0 70px; }

.form-contacto-cab { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.form-contacto-cab h2 { margin: 0 0 10px; font-size: 27px; color: var(--tinta); }
.form-contacto-cab .entradilla { margin: 0 auto; }

.form-contacto-tarjeta {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
  padding: 36px 40px 34px;
}

.form-fila { margin-bottom: 18px; }

.form-fila-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-campo { display: flex; flex-direction: column; gap: 7px; }

.form-campo label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta);
}

.form-campo input,
.form-campo select,
.form-campo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: #fff;
}

.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus {
  outline: 0;
  border-color: var(--ocre);
  box-shadow: 0 0 0 3px rgba(255, 189, 89, .25);
}

.form-campo textarea { resize: vertical; min-height: 90px; }

/* Casilla de consentimiento: obligatoria, con los enlaces bien visibles */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 22px;
  cursor: pointer;
}

.form-check input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--ocre);
}

.form-check span { font-size: 13.5px; line-height: 1.55; color: var(--tinta-suave); }
.form-check a { color: var(--ocre); font-weight: 600; text-decoration: underline; }
.form-check a:hover { color: var(--tinta); }

.form-enviar { display: block; width: 100%; text-align: center; margin-top: 4px; }

.form-aviso-envio { margin: 14px 0 0; font-size: 14px; text-align: center; }
.form-aviso-ok { color: #2e7d32; }
.form-aviso-error { color: #c0392b; }

/* Aviso básico de protección de datos, discreto, bajo el botón */
.form-legal {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  line-height: 1.6;
  color: #666666;
}

.form-legal-tit { margin: 0 0 8px; font-weight: 700; color: #555555; }

.form-legal ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.form-legal li { margin-bottom: 4px; }
.form-legal li strong { color: #4a4a4a; }

.form-legal p { margin: 0; }
.form-legal a { color: var(--ocre); text-decoration: underline; }
.form-legal a:hover { color: var(--tinta); }

@media (max-width: 640px) {
  .form-contacto-tarjeta { padding: 26px 22px 24px; }
  .form-fila-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* =====================================================================
   "Tu equipo de confianza 24/7": sustituye a la antigua sección
   "Empresa de multiservicios..." heredada de WordPress.
   ===================================================================== */
.intro-equipo {
  background: linear-gradient(180deg, #fffaf0 0%, #fff 220px);
  padding: 60px 0;
}

.intro-equipo-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}

.intro-equipo-texto .eyebrow { display: block; margin-bottom: 8px; }

.intro-equipo-texto h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  color: var(--tinta);
  margin: 0 0 14px;
}

.intro-equipo-texto .entradilla { margin-bottom: 24px; }

.intro-equipo-puntos {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intro-equipo-puntos li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.4;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(30, 30, 27, .04);
}

.intro-equipo-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--dorado-claro) 0%, var(--ambar) 55%, var(--ocre) 100%);
  color: var(--tinta);
  font-size: 12px;
}

.intro-equipo-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.intro-equipo-foto {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(30, 30, 27, .16);
}

.intro-equipo-foto > img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }

@media (max-width: 900px) {
  .intro-equipo-grid { grid-template-columns: 1fr; gap: 28px; }
  .intro-equipo-foto { order: -1; }
  .intro-equipo-foto img { aspect-ratio: 16/10; }
}

/* Las rejillas de "Por qué elegirnos" y "Para quién trabajamos" tienen
   siempre 4 tarjetas: columnas fijas para que quepan todas en una fila
   en escritorio, con su propio ajuste progresivo en pantallas menores. */
@media (max-width: 900px) {
  .rejilla-ventajas,
  .rejilla-publicos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .rejilla-ventajas,
  .rejilla-publicos { grid-template-columns: 1fr; }
}

/* El contenedor original de Elementor que envuelve estos botones traía
   un ancho fijo (% de su padre) distinto entre el árbol en español y
   el árbol en inglés, así que en inglés el contenedor quedaba muy
   estrecho y los botones se apilaban en vez de ir en fila. El ancho
   real viene del propio widget (.elementor-widget), no de sus
   contenedores internos, así que se anula ahí. */
.elementor-widget:has(.hero-botones) {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* =====================================================================
   Cabecera de las tres páginas legales (aviso, privacidad, cookies).
   ===================================================================== */
.legal-cabecera { padding: 50px 0 10px; }
.legal-cabecera h1 { font-size: clamp(24px, 3vw, 32px); color: var(--tinta); margin: 0 0 8px; }

.legal-aviso-idioma {
  display: inline-block;
  background: #fff7e6;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--tinta-suave);
  margin: 6px 0 0;
}

/* =====================================================================
   Cuerpo del texto de las tres páginas legales (aviso, privacidad,
   cookies): tipografía legible para un documento largo.
   ===================================================================== */
.legal-cuerpo {
  max-width: 820px;
  padding: 10px 0 60px;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1.75;
}

.legal-cuerpo h3 {
  color: var(--tinta);
  font-size: 20px;
  margin: 40px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.legal-cuerpo h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.legal-cuerpo h4 { color: var(--tinta); font-size: 16.5px; margin: 26px 0 10px; }
.legal-cuerpo p { margin: 0 0 14px; }
.legal-cuerpo ul { margin: 0 0 14px; padding-left: 22px; }
.legal-cuerpo li { margin-bottom: 8px; }
.legal-cuerpo a { color: var(--ocre); text-decoration: underline; }
.legal-cuerpo strong { color: var(--tinta); }

.legal-tabla-scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }

.legal-cuerpo .tabla-cookies {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 13.5px;
}
.legal-cuerpo .tabla-cookies th,
.legal-cuerpo .tabla-cookies td {
  border: 1px solid var(--borde);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-cuerpo .tabla-cookies th { background: var(--niebla); color: var(--tinta); white-space: nowrap; }

@media (max-width: 640px) {
  .legal-cuerpo { font-size: 14.5px; }
  .legal-cuerpo h3 { font-size: 18px; }
}

/* Dos teléfonos en una sola píldora, separados por " - " */
.boton-dobletel { cursor: default; flex-wrap: wrap; justify-content: center; }
.boton-dobletel, .boton-dobletel a, .boton-dobletel a:visited { color: var(--tinta) !important; text-decoration: none; }
.boton-dobletel a:hover { text-decoration: underline; }
.urgencia-tel a { color: inherit; text-decoration: none; }
.urgencia-tel a:hover { color: var(--ambar); }
@media (max-width: 480px) {
  .boton-dobletel { font-size: 14px !important; padding-left: 14px; padding-right: 14px; white-space: nowrap; flex-wrap: nowrap; }
  .hero-botones .boton-dobletel { font-size: 14px; }
}

/* "Conoce dónde trabajamos" en el hero */
.enlace-zonas, .enlace-zonas:visited { color: var(--tinta) !important; text-decoration: none; }
.enlace-zonas strong { text-decoration: underline; text-decoration-color: var(--ambar); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.enlace-zonas:hover strong { color: var(--ambar); }
.elementor-widget:has(.enlace-zonas) { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
@media (max-width: 480px) { .elementor-widget:has(.enlace-zonas) { max-width: 100% !important; } }

/* ---------------------------------------------------------------
   Indicador de carga: sierra circular amarilla girando.
   Se oculta al terminar la carga (clase "cargado" en <html>) y,
   por si el script no llegara a ejecutarse, desaparece solo.
   --------------------------------------------------------------- */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  /* oculto por defecto: solo aparece si la carga tarda más de ~0,4 s */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
html.cargando-visible:not(.cargado) .cargando {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cargando-sierra {
  width: clamp(96px, 22vw, 150px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 189, 89, .35));
  animation: sierra-giro .9s linear infinite;
}
@keyframes sierra-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cargando-sierra { animation-duration: 2.4s; }
}

/* Formularios: avisos y errores por campo */
.form-aviso { margin: 14px 0 0; font-size: 14px; text-align: center; grid-column: 1 / -1; }
.form-aviso.form-aviso-ok { color: #2e7d32; }
.form-aviso.form-aviso-error { color: #c0392b; }
.form-error { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: #c0392b; }
.campo-invalido { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important; }
.form-campo input[type="file"] {
  width: 100%; padding: 10px 12px; border: 1px dashed var(--borde); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; color: var(--tinta-suave);
}
.form-campo input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--ambar); color: var(--tinta); font-weight: 600; cursor: pointer;
}
.form-check + .form-error { margin: 2px 0 14px; }