/*
Theme Name: Rehacted
Theme URI: https://rehacted.com/
Description: Tema a medida para Rehacted (Rehabilitación y Actuación de Edificios, S. L.), Málaga. Página de una sola sección, privacidad por diseño (no carga recursos de terceros), formulario de presupuesto gestionado en PHP con registro del consentimiento, y textos legales conformes al RGPD, la LOPDGDD y la LSSI. Colores tomados del logotipo (azul cian y blanco).
Author: Rehacted
Version: 4.7.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rehacted
*/

/* ====================================================================
   SISTEMA DE DISEÑO — colores del logotipo (azul cian + blanco)
   ==================================================================== */
:root{
  --azul-claro:#54B4E4;   /* azul claro del logo: acento sobre fondo oscuro */
  --azul:#1C90CC;          /* azul medio: líneas, foco, marcadores */
  --azul-fuerte:#0E6699;   /* azul intenso: botones y texto sobre blanco */
  --marino:#0A3A57;        /* azul oscuro: fondos oscuros */
  --marino-2:#114A6B;
  --marino-linea:#1E5B7E;
  --tinte:#E9F4FB;         /* azul muy tenue: fondo de secciones claras */
  --papel:#FFFFFF;
  --linea:#D0E4F0;         /* líneas finas sobre blanco */
  --tinta:#0C2A3B;         /* texto principal */
  --gris:#566B79;          /* texto secundario */

  --display:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed","Liberation Sans Narrow",system-ui,sans-serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;

  --ancho:1120px;
  --paso:clamp(56px,8vw,104px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--tinte);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--azul-fuerte);}
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px;}

h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0;font-stretch:condensed;}
h1{font-size:clamp(42px,8.2vw,86px);}
h2{font-size:clamp(30px,4.6vw,50px);}
h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:.04em;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.cota{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.cota::after{content:"";flex:1;height:1px;background:var(--linea);}
.cota span{color:var(--tinta);}

/* Accesibilidad */
.saltar{position:absolute;left:-9999px;top:0;background:var(--azul-fuerte);color:#fff;padding:12px 18px;z-index:200;font-weight:700;}
.saltar:focus{left:0;}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;}

/* ---------- Cabecera (blanca, para el logotipo real) ---------------- */
header.barra{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--linea);}
.barra .contenedor{display:flex;align-items:center;gap:24px;min-height:74px;}
.marca{display:inline-flex;align-items:center;text-decoration:none;}
.marca img{height:44px;width:auto;}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center;}
.menu a,.menu li a{font-size:14px;text-decoration:none;color:var(--tinta);letter-spacing:.04em;padding:6px 0;border-bottom:2px solid transparent;}
.menu a:hover{color:var(--azul-fuerte);border-bottom-color:var(--azul-claro);}
.menu ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.tel-barra{font-family:var(--mono);font-size:14px;text-decoration:none;background:var(--azul-fuerte);color:#fff;padding:9px 16px;font-weight:700;white-space:nowrap;}
.tel-barra:hover{background:#0b5686;color:#fff;}
.abrir-menu{display:none;background:none;border:1px solid var(--linea);color:var(--tinta);padding:8px 12px;font-family:var(--mono);font-size:13px;margin-left:auto;cursor:pointer;}

@media (max-width:900px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--linea);box-shadow:0 12px 24px rgba(12,42,59,.08);}
  .menu.abierto{display:flex;}
  .menu ul{flex-direction:column;gap:0;width:100%;}
  .menu a,.menu li a{padding:13px 0;border-bottom:1px solid var(--linea);width:100%;display:block;}
  .abrir-menu{display:block;}
  .tel-barra{display:none;}
}

/* ---------- Portada ------------------------------------------------- */
.portada{background:var(--marino);color:#fff;position:relative;overflow:hidden;padding:clamp(64px,10vw,120px) 0 clamp(48px,6vw,72px);}
.portada::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:linear-gradient(#54B4E4 1px,transparent 1px),linear-gradient(90deg,#54B4E4 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 90% at 78% 10%,#000 0%,transparent 72%);mask-image:radial-gradient(120% 90% at 78% 10%,#000 0%,transparent 72%);}
.portada .contenedor{position:relative;}
.portada .cota{color:#8FB6D6;margin-bottom:26px;}
.portada .cota span{color:var(--azul-claro);}
.portada .cota::after{background:var(--marino-linea);}
.portada h1 em{font-style:normal;color:var(--azul-claro);}
.entradilla{max-width:56ch;font-size:clamp(17px,2vw,20px);color:#C6D8E7;margin-top:26px;}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;border:2px solid var(--azul);font-family:var(--texto);cursor:pointer;}
.btn-solido{background:var(--azul-fuerte);color:#fff;border-color:var(--azul-fuerte);}
.btn-solido:hover{background:#0b5686;border-color:#0b5686;color:#fff;}
.btn-linea{background:transparent;color:#fff;border-color:#3C5C82;}
.btn-linea:hover{border-color:var(--azul-claro);color:var(--azul-claro);}

.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:#1B4269;margin-top:clamp(44px,6vw,72px);border:1px solid #1B4269;}
.cifras div{background:var(--marino);padding:20px 22px;}
.cifras b{display:block;font-family:var(--display);font-size:34px;letter-spacing:.02em;color:#fff;text-transform:uppercase;}
.cifras small{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FB6D6;}

/* ---------- Secciones ----------------------------------------------- */
section{padding:var(--paso) 0;}
.claro{background:var(--tinte);}
.blanco{background:var(--papel);}
.intro-seccion{max-width:62ch;color:var(--gris);font-size:18px;margin-top:20px;}

.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--linea);margin-top:44px;border:1px solid var(--linea);}
.servicio{background:var(--papel);padding:30px 28px 34px;}
.servicio h3{margin-bottom:12px;}
.servicio p{color:var(--gris);font-size:16px;}
.servicio .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--azul-fuerte);display:block;margin-bottom:16px;}

.ficha{margin-top:44px;border-top:2px solid var(--tinta);}
.ficha .fila{display:grid;grid-template-columns:1fr auto;gap:8px 32px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--linea);}
.ficha .concepto{font-weight:600;font-size:17px;}
.ficha .concepto small{display:block;font-weight:400;color:var(--gris);font-size:14.5px;margin-top:4px;}
.ficha .dato{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-align:right;color:var(--tinta);white-space:nowrap;}
.ficha .dato u{text-decoration:none;box-shadow:inset 0 -8px 0 rgba(84,180,228,.5);}
@media (max-width:640px){.ficha .fila{grid-template-columns:1fr;}.ficha .dato{text-align:left;white-space:normal;}}

.garantias{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin-top:44px;}
.garantia{border-top:3px solid var(--azul);padding-top:18px;}
.garantia h3{font-size:19px;margin-bottom:10px;}
.garantia p{color:var(--gris);font-size:16px;}

/* ---------- Presupuesto (oscuro) ------------------------------------ */
.presupuesto{background:var(--marino);color:#fff;}
.presupuesto .cota{color:#8FB6D6;}
.presupuesto .cota span{color:var(--azul-claro);}
.presupuesto .cota::after{background:var(--marino-linea);}
.rejilla-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);margin-top:40px;align-items:start;}
@media (max-width:860px){.rejilla-form{grid-template-columns:1fr;}}

.campo{margin-bottom:20px;}
.campo label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#B5C7D6;margin-bottom:8px;}
.campo input,.campo textarea,.campo select{width:100%;background:#0A2743;border:1px solid var(--marino-linea);color:#fff;padding:13px 14px;font-family:var(--texto);font-size:16px;border-radius:0;}
.campo textarea{min-height:130px;resize:vertical;}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--azul-claro);}
.req{color:var(--azul-claro);}
.trampa{position:absolute!important;left:-9999px!important;height:1px;width:1px;overflow:hidden;}

.consentimiento{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:15px;color:#C6D8E7;}
.consentimiento input{margin-top:5px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--azul);}
.consentimiento label{font-size:15px;letter-spacing:0;text-transform:none;color:#C6D8E7;margin:0;font-family:var(--texto);}
.consentimiento a{color:var(--azul-claro);}

.aviso-basico{border:1px solid var(--marino-linea);padding:24px;font-size:14.5px;color:#B5C7D6;background:var(--marino-2);}
.aviso-basico h3{color:#fff;font-size:17px;margin-bottom:16px;}
.aviso-basico dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;}
.aviso-basico dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro);padding-top:3px;}
.aviso-basico dd{margin:0;}
.aviso-basico a{color:#fff;}
@media (max-width:520px){.aviso-basico dl{grid-template-columns:1fr;gap:4px 0;}.aviso-basico dd{margin-bottom:10px;}}

.estado-form{margin:0 0 22px;padding:14px 16px;font-size:15px;border-left:4px solid var(--azul-claro);background:#0A2743;}
.estado-form.error{border-left-color:#FF8A7A;color:#FFD8D1;}
.estado-form.ok{border-left-color:var(--azul-claro);color:#DCF0FB;}

.datos-contacto{margin-top:32px;font-size:16px;color:#C6D8E7;}
.datos-contacto a{color:#fff;}
.datos-contacto .linea{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--marino-linea);}
.datos-contacto .et{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8FB6D6;min-width:96px;padding-top:3px;}

/* ---------- Bloque legal -------------------------------------------- */
.legal details{border-bottom:1px solid var(--linea);}
.legal details:first-of-type{border-top:2px solid var(--tinta);}
.legal summary{cursor:pointer;padding:22px 0;font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.04em;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.legal summary::-webkit-details-marker{display:none;}
.legal summary::after{content:"+";font-family:var(--mono);color:var(--azul-fuerte);font-size:24px;}
.legal details[open] summary::after{content:"−";}
.legal .cuerpo{padding-bottom:30px;max-width:78ch;font-size:16px;color:#39454F;}
.legal .cuerpo h4{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);color:var(--tinta);margin:26px 0 10px;}
.legal .cuerpo ul{padding-left:20px;margin:0 0 1em;}
.legal .cuerpo li{margin-bottom:7px;}
.legal .cuerpo table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:15px;}
.legal .cuerpo th,.legal .cuerpo td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top;}
.legal .cuerpo th{background:var(--tinte);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.actualizado{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:26px;}

/* ---------- Página genérica (Páginas de WordPress) ------------------ */
.pagina{padding:var(--paso) 0;background:#fff;}
.pagina .cuerpo{max-width:78ch;font-size:17px;color:#39454F;}
.pagina .cuerpo h2{margin:34px 0 12px;}
.pagina .cuerpo h3{margin:26px 0 10px;}
.pagina .cuerpo a{color:var(--azul-fuerte);}

/* ---------- Pie ----------------------------------------------------- */
footer.pie{background:var(--marino);color:#8FB6D6;padding:56px 0 28px;font-size:15px;}
footer.pie a{color:#C6D8E7;}
.pie-marca{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.pie-marca img{height:46px;width:auto;}
.pie-marca b{font-family:var(--display);font-size:26px;text-transform:uppercase;color:#fff;letter-spacing:.06em;}
.pie-marca b em{font-style:normal;color:var(--azul-claro);}
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px;}
footer.pie h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px;}
footer.pie ul{list-style:none;padding:0;margin:0;}
footer.pie li{margin-bottom:9px;}
.pie-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--marino-linea);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;}
.boton-texto{background:none;border:none;color:#C6D8E7;font:inherit;text-decoration:underline;cursor:pointer;padding:0;}

/* ---------- Aviso de cookies ---------------------------------------- */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;background:var(--papel);border:2px solid var(--tinta);box-shadow:0 14px 40px rgba(12,42,59,.28);max-width:640px;margin-inline:auto;padding:24px;}
.cookies[hidden]{display:none;}
.cookies h3{font-size:20px;margin-bottom:10px;}
.cookies p{font-size:15px;color:#39454F;}
.cookies .botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.cookies .btn{font-size:13.5px;padding:12px 18px;}
.cookies .btn-linea{color:var(--tinta);border-color:var(--tinta);}
.cookies .btn-linea:hover{border-color:var(--azul-fuerte);color:var(--azul-fuerte);background:var(--tinte);}
.panel-cookies{margin-top:18px;border-top:1px solid var(--linea);padding-top:16px;font-size:15px;}
.panel-cookies[hidden]{display:none;}
.panel-cookies .opcion{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.panel-cookies input{margin-top:4px;width:19px;height:19px;accent-color:var(--azul);}
.panel-cookies small{display:block;color:var(--gris);}

/* ---------- Aparición al desplazar ---------------------------------- */
.revelar{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.revelar.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.revelar{opacity:1;transform:none;transition:none;}*{animation:none!important;}}

/* ====================================================================
   MULTIPÁGINA — cabecera de página, tarjetas de inicio, CTA, prosa legal
   ==================================================================== */

/* Menú: página activa */
.menu .current-menu-item > a,
.menu a[aria-current="page"]{color:var(--azul-fuerte);border-bottom-color:var(--azul-claro);}

/* Cabecera superior de cada página interior */
.hero-pagina{background:var(--marino);color:#fff;position:relative;overflow:hidden;padding:clamp(48px,7vw,88px) 0 clamp(30px,4vw,44px);}
.hero-pagina::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:linear-gradient(#54B4E4 1px,transparent 1px),linear-gradient(90deg,#54B4E4 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 120% at 82% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(120% 120% at 82% 0%,#000 0%,transparent 70%);}
.hero-pagina .contenedor{position:relative;}
.hero-pagina h1{font-size:clamp(36px,6vw,66px);}
.hero-pagina .cota{color:#8FB6D6;}
.hero-pagina .cota a{color:#8FB6D6;text-decoration:none;}
.hero-pagina .cota a:hover{color:var(--azul-claro);}
.hero-pagina .cota span{color:var(--azul-claro);}
.hero-pagina .cota::after{background:var(--marino-linea);}
.hero-pagina .entradilla{color:#C6D8E7;max-width:64ch;margin-top:22px;font-size:clamp(16px,1.8vw,19px);}

/* Tarjetas de la página de inicio */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--linea);margin-top:44px;border:1px solid var(--linea);}
.resumen .tarjeta{background:var(--papel);padding:30px 28px 30px;text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;transition:background .2s ease;}
.resumen .tarjeta:hover{background:#F4FAFE;}
.resumen .tarjeta .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--azul-fuerte);display:block;margin-bottom:16px;}
.resumen .tarjeta h3{margin-bottom:10px;}
.resumen .tarjeta p{color:var(--gris);font-size:16px;flex:1;}
.resumen .tarjeta .mas{margin-top:18px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--azul-fuerte);font-weight:700;}
.resumen .tarjeta:hover .mas{text-decoration:underline;}

/* Franja de llamada a la acción */
.cta{background:var(--tinte);}
.cta-caja{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--marino);color:#fff;padding:clamp(30px,4vw,44px) clamp(28px,4vw,48px);}
.cta-caja h2{font-size:clamp(26px,3.4vw,38px);}
.cta-caja p{color:#C6D8E7;margin:8px 0 0;max-width:52ch;}
.cta-caja .btn{white-space:nowrap;}

/* Texto legal / prosa en páginas */
.prosa{max-width:78ch;font-size:16.5px;color:#39454F;}
.prosa h4{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);color:var(--tinta);margin:30px 0 10px;}
.prosa h4:first-child{margin-top:0;}
.prosa ul{padding-left:20px;margin:0 0 1em;}
.prosa li{margin-bottom:7px;}
.prosa a{color:var(--azul-fuerte);}
.prosa table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:15px;}
.prosa th,.prosa td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top;}
.prosa th{background:var(--tinte);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
@media (max-width:640px){.prosa table,.prosa thead,.prosa tbody,.prosa tr,.prosa th,.prosa td{display:block;}.prosa thead{display:none;}.prosa td{border-top:none;}.prosa tr{margin-bottom:14px;border:1px solid var(--linea);}}

/* ====================================================================
   CONTENIDO EDITABLE (editor de bloques) — v2
   ==================================================================== */

/* Contenido de página: prosa cómoda de leer */
.prosa > *{max-width:78ch;}
.prosa > h2{font-size:clamp(26px,3.6vw,40px);margin:38px 0 14px;}
.prosa > h2:first-child{margin-top:0;}
.prosa > h3{margin:30px 0 10px;font-size:clamp(18px,2.1vw,22px);}
.prosa > h3:first-child{margin-top:0;}
.prosa > p,.prosa > ul,.prosa > ol{color:#39454F;}
.prosa strong{color:var(--tinta);}

/* Los bloques del tema ocupan todo el ancho disponible */
.prosa > .servicios,.prosa > .ficha,.prosa > .resumen,.prosa > .cifras,
.prosa > .datos-contacto,.prosa > .cta-caja,.prosa > .bloque-form,
.prosa > .wp-block-shortcode{max-width:none;}
.prosa > .servicios,.prosa > .ficha,.prosa > .resumen{margin-top:34px;margin-bottom:34px;}

/* Alineaciones de Gutenberg */
.prosa .alignwide{max-width:var(--ancho);}
.prosa .alignfull{max-width:none;}
.prosa .wp-block-image img{height:auto;}
.prosa figure{margin:24px 0;}
.prosa .wp-block-table{margin:16px 0 24px;overflow-x:auto;}
.prosa .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px;}
.prosa .wp-block-table th,.prosa .wp-block-table td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top;}
.prosa .wp-block-table th{background:var(--tinte);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.prosa .wp-block-quote{border-left:3px solid var(--azul);padding-left:18px;margin:24px 0;color:var(--gris);font-style:normal;}
.prosa .wp-block-button__link{background:var(--azul-fuerte);color:#fff;border-radius:0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:15px 26px;}

/* Piezas del tema que deben salir a sangre (ancho completo) dentro del contenido */
.sangrado{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* Franja de presupuesto dentro del contenido */
.cta-caja.sangrado{padding:clamp(30px,4vw,44px) max(24px, calc(50vw - var(--ancho)/2 + 24px));margin-top:clamp(44px,6vw,72px);}

/* Panel oscuro del formulario dentro del contenido */
.bloque-form{background:var(--marino);color:#fff;padding:clamp(40px,6vw,72px) 0;margin-top:0;}
.bloque-form .contenedor{padding-inline:24px;}
.bloque-form .rejilla-form{margin-top:0;}
.bloque-form a{color:var(--azul-claro);}

/* Cuando el formulario es lo primero de la página, pega con la cabecera azul */
.prosa > .bloque-form:first-child{margin-top:calc(-1 * var(--paso));}

/* Cuadrícula de acreditaciones/servicios sin doble borde dentro de prosa */
.prosa .servicios{border:1px solid var(--linea);}

/* ====================================================================
   CORRECCIONES v2.1
   ==================================================================== */

/* 1. El texto de los botones dentro del contenido se volvía del mismo color
      que su fondo (la regla .prosa a tenía más peso que .btn-solido). */
.prosa a.btn,
.prosa a.btn-solido,
.cta-caja a.btn-solido,
a.btn-solido{color:#fff;}
.prosa a.btn-solido:hover,
.cta-caja a.btn-solido:hover,
a.btn-solido:hover{color:#fff;background:#0b5686;border-color:#0b5686;}
.prosa a.btn-linea,
a.btn-linea{color:#fff;}
.prosa a.btn-linea:hover,
a.btn-linea:hover{color:var(--azul-claro);}
.cookies a.btn-linea,.cookies button.btn-linea{color:var(--tinta);}

/* 2. Las rejillas y fichas ocupan todo el ancho disponible de la página,
      no solo el ancho de lectura del texto. */
.prosa .servicios,
.prosa .ficha,
.prosa .resumen,
.prosa .cifras,
.prosa .datos-contacto,
.prosa .cta-caja,
.prosa .bloque-form,
.prosa .wp-block-shortcode{max-width:none;width:100%;}

/* 3. Tarjetas de servicio: misma altura y contenido bien repartido. */
.servicios{grid-auto-rows:1fr;}
.servicio{display:flex;flex-direction:column;}
.servicio h3{margin-bottom:12px;}
.servicio p{margin-top:auto;}

/* En pantallas anchas, tres columnas limpias */
@media (min-width:1000px){
  .servicios{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:700px) and (max-width:999px){
  .servicios{grid-template-columns:repeat(2,1fr);}
}

/* ====================================================================
   CORRECCIONES v2.1.0 — refuerzo
   ==================================================================== */

/* El texto de los botones nunca puede quedar del color de su fondo,
   por muy anidado que esté dentro del contenido del editor. */
.prosa .cta-caja .btn-solido,
.prosa .btn-solido,
.cta .btn-solido,
.portada .btn-solido{color:#fff;}
.prosa .cta-caja .btn-solido:hover,
.prosa .btn-solido:hover{color:#fff;}

/* El ancho de lectura (78ch) se aplica SOLO al texto, no a las rejillas
   ni a los bloques de diseño, que deben ocupar toda la página. */
.prosa > *{max-width:none;}
.prosa > p,
.prosa > h1,
.prosa > h2,
.prosa > h3,
.prosa > h4,
.prosa > ul,
.prosa > ol,
.prosa > blockquote,
.prosa > .wp-block-list,
.prosa > .wp-block-paragraph,
.prosa > .wp-block-heading{max-width:78ch;}

/* Rejillas y fichas siempre a todo el ancho del contenedor */
.servicios,.ficha,.resumen,.cifras{width:100%;max-width:none;}

/* Tarjetas de servicio: misma altura y descripción alineada abajo */
.servicios{grid-auto-rows:1fr;}
.servicio{display:flex;flex-direction:column;}
.servicio p{margin-top:auto;}

/* Franja de presupuesto: el botón siempre visible y separado del texto */
.cta-caja{gap:24px;}
.cta-caja .btn{flex:0 0 auto;}
@media (max-width:700px){
  .cta-caja{flex-direction:column;align-items:flex-start;}
  .cta-caja .btn{width:100%;text-align:center;}
}

/* ====================================================================
   v2.3.0 — MAQUETACIÓN DEL CONTENIDO (sustituye al truco de ancho 100vw)
   --------------------------------------------------------------------
   El método anterior (.sangrado con width:100vw) provocaba desbordamiento
   horizontal cuando había barra de desplazamiento, y eso descolocaba toda
   la página. Ahora .prosa ocupa el ancho completo y es cada bloque el que
   se centra a sí mismo, que es la forma robusta de hacerlo.
   ==================================================================== */

/* Neutralizar el truco antiguo allá donde siguiera aplicándose */
.sangrado{width:auto!important;margin-left:0!important;margin-right:0!important;}
/* Sustituida en v4.3.0 por overflow-x:clip (ver final del archivo) */

/* --- El contenedor de contenido ocupa todo el ancho --- */
.prosa{width:100%;max-width:none;padding:0;margin:0;}

/* --- Texto: ancho de lectura cómodo, centrado --- */
.prosa > p,
.prosa > h1,.prosa > h2,.prosa > h3,.prosa > h4,.prosa > h5,.prosa > h6,
.prosa > ul,.prosa > ol,.prosa > dl,
.prosa > blockquote,
.prosa > pre,
.prosa > hr,
.prosa > .wp-block-image,
.prosa > .wp-block-buttons,
.prosa > .wp-block-embed{
  width:calc(100% - 48px);
  max-width:min(78ch, var(--ancho));
  margin-inline:auto;
  box-sizing:border-box;
}

/* --- Tablas: algo más anchas que el texto, siguen legibles --- */
.prosa > .wp-block-table,
.prosa > figure.wp-block-table,
.prosa > table{
  width:calc(100% - 48px);
  max-width:var(--ancho);
  margin-inline:auto;
  box-sizing:border-box;
}

/* --- Rejillas y fichas del tema: todo el ancho del contenedor --- */
.prosa > .servicios,
.prosa > .ficha,
.prosa > .resumen,
.prosa > .cifras,
.prosa > .datos-contacto{
  width:calc(100% - 48px);
  max-width:var(--ancho);
  margin-inline:auto;
  box-sizing:border-box;
}

/* --- Piezas a todo el ancho de la pantalla --- */
.prosa > .cta-franja,
.prosa > .bloque-form{
  width:100%;
  max-width:none;
  margin-inline:0;
}

/* Párrafos vacíos que deja el editor alrededor de los bloques */
.prosa > p:empty{display:none;margin:0;}

/* ====================================================================
   FRANJA DE PRESUPUESTO
   ==================================================================== */
.cta-franja{background:var(--marino);color:#fff;width:100%;margin-top:clamp(44px,6vw,72px);}
.cta-franja:last-child{margin-bottom:0;}
.cta-caja{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding-block:clamp(32px,4.5vw,52px);
  background:none;
}
.cta-caja h2{color:#fff;font-size:clamp(26px,3.4vw,38px);}
.cta-caja p{color:#C6D8E7;margin:10px 0 0;max-width:52ch;}
.cta-caja .btn{flex:0 0 auto;}
.cta-franja .btn-solido{background:var(--azul-fuerte);border-color:var(--azul-fuerte);color:#fff;}
.cta-franja .btn-solido:hover{background:#0b5686;border-color:#0b5686;color:#fff;}
@media (max-width:760px){
  .cta-caja{flex-direction:column;align-items:flex-start;}
  .cta-caja .btn{width:100%;text-align:center;}
}

/* ====================================================================
   FORMULARIO A TODO EL ANCHO
   ==================================================================== */
.bloque-form{background:var(--marino);color:#fff;width:100%;padding-block:clamp(40px,6vw,72px);}
.bloque-form .rejilla-form{margin-top:0;}
.prosa > .bloque-form:first-child{margin-top:calc(-1 * var(--paso));}

/* ====================================================================
   TARJETAS DE SERVICIO — legibles y ordenadas
   --------------------------------------------------------------------
   Antes la descripción se empujaba al fondo de la tarjeta (margin-top:auto)
   y quedaban huecos enormes bajo los títulos cortos. Ahora el texto va
   justo debajo del título.
   ==================================================================== */
.servicios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);
  grid-auto-rows:auto;
}
.servicio{background:var(--papel);padding:28px 26px 30px;display:block;}
.servicio .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--azul-fuerte);display:block;margin-bottom:14px;
}
.servicio h3{margin:0 0 10px;font-size:19px;line-height:1.15;}
.servicio p{margin:0;color:var(--gris);font-size:15.5px;line-height:1.6;}

/* Tres columnas limpias en pantallas anchas */
@media (min-width:1000px){
  .servicios{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .servicios{grid-template-columns:1fr;}
}

/* ====================================================================
   BÚSQUEDA Y TEXTO SENCILLO
   ==================================================================== */
.texto{max-width:78ch;}
.texto h3{margin:0 0 8px;}
.texto p{color:var(--gris);}

/* ====================================================================
   v2.4.0 — ACABADO PROFESIONAL
   --------------------------------------------------------------------
   Tipografías propias (Barlow Condensed + Inter), jerarquía más firme,
   espaciado más generoso y estados de interacción cuidados.
   ==================================================================== */

:root{
  --display:'Barlow Condensed','Arial Narrow','Helvetica Neue Condensed',system-ui,sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --sombra-sutil:0 1px 2px rgba(12,42,59,.06), 0 4px 12px rgba(12,42,59,.05);
  --sombra-media:0 4px 12px rgba(12,42,59,.10), 0 12px 32px rgba(12,42,59,.08);
  --transicion:180ms cubic-bezier(.2,.6,.3,1);
}

body{
  font-family:var(--texto);
  font-size:17px;line-height:1.7;
  letter-spacing:-.005em;
  text-rendering:optimizeLegibility;
}

/* --- Titulares: Barlow Condensed, sin necesidad de font-stretch --- */
h1,h2,h3,h4{font-family:var(--display);font-stretch:normal;}
h1{font-weight:700;letter-spacing:-.01em;line-height:1.03;}
h2{font-weight:700;letter-spacing:-.005em;line-height:1.06;}
h3{font-weight:600;letter-spacing:.01em;line-height:1.15;}

/* --- Portada: más aire y jerarquía --- */
.portada{padding-block:clamp(72px,11vw,132px) clamp(56px,7vw,84px);}
.portada h1{font-size:clamp(44px,8.4vw,92px);}
.entradilla{line-height:1.65;}

/* Botones: más presencia y respuesta al pasar el ratón */
.btn{
  font-family:var(--texto);font-weight:600;font-size:14.5px;
  letter-spacing:.08em;padding:16px 30px;
  transition:background var(--transicion),border-color var(--transicion),
             transform var(--transicion),box-shadow var(--transicion);
}
.btn-solido{box-shadow:var(--sombra-sutil);}
.btn-solido:hover{transform:translateY(-1px);box-shadow:var(--sombra-media);}
.btn-solido:active{transform:translateY(0);box-shadow:var(--sombra-sutil);}
.btn-linea:hover{transform:translateY(-1px);}

/* --- Franja de datos destacados: separadores más finos --- */
.cifras b{font-weight:700;letter-spacing:0;}
.cifras small{font-weight:500;}

/* --- Cabecera: sombra al desplazar y logo con más margen --- */
header.barra{transition:box-shadow var(--transicion);}
header.barra.desplazada{box-shadow:0 1px 0 var(--linea),0 6px 20px rgba(12,42,59,.07);}
.barra .contenedor{min-height:80px;}
.marca img{height:46px;}
.menu a,.menu li a{font-weight:500;font-size:14.5px;letter-spacing:.01em;transition:color var(--transicion),border-color var(--transicion);}
.tel-barra{
  font-family:var(--texto);font-weight:600;letter-spacing:.02em;
  transition:background var(--transicion);
}

/* --- Tarjetas de servicio: elevación al pasar el ratón --- */
.servicio{
  position:relative;transition:box-shadow var(--transicion),transform var(--transicion);
  border-top:3px solid transparent;
}
.servicio:hover{
  box-shadow:var(--sombra-media);
  border-top-color:var(--azul-claro);
  z-index:2;
}
.servicio h3{font-size:20px;color:var(--tinta);}
.servicio .num{font-weight:600;}

/* --- Tarjetas de sección (inicio) --- */
.resumen .tarjeta{
  transition:background var(--transicion),box-shadow var(--transicion);
  border-top:3px solid transparent;
}
.resumen .tarjeta:hover{
  background:#fff;box-shadow:var(--sombra-media);
  border-top-color:var(--azul-claro);z-index:2;
}
.resumen .tarjeta .mas{transition:gap var(--transicion);}

/* --- Ficha de acreditaciones: filas con respuesta al pasar --- */
.ficha .fila{transition:background var(--transicion);padding-inline:12px;margin-inline:-12px;}
.ficha .fila:hover{background:var(--tinte);}
.ficha .concepto{font-weight:600;}
.ficha .dato{font-weight:600;}

/* --- Formulario: campos más cómodos --- */
.campo label{font-weight:600;}
.campo input,.campo textarea,.campo select{
  transition:border-color var(--transicion),background var(--transicion);
  font-family:var(--texto);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  background:#0d2f4d;outline:none;
}
.bloque-form .btn-solido{background:var(--azul);border-color:var(--azul);}
.bloque-form .btn-solido:hover{background:var(--azul-claro);border-color:var(--azul-claro);color:var(--marino);}

/* --- Cabecera de página interior: un punto más contenida --- */
.hero-pagina{padding-block:clamp(56px,7.5vw,96px) clamp(34px,4.5vw,52px);}
.hero-pagina h1{font-size:clamp(38px,6.2vw,70px);}

/* --- Texto de contenido: lectura más cómoda --- */
.prosa > p{margin-bottom:1.15em;}
.prosa > h2{margin-top:clamp(40px,5vw,60px);}
.prosa > h3{margin-top:clamp(30px,3.6vw,42px);color:var(--tinta);}
.prosa > ul,.prosa > ol{margin-bottom:1.3em;}
.prosa > ul li,.prosa > ol li{margin-bottom:.5em;}

/* --- Tablas legales: encabezado más claro y filas alternas --- */
.prosa .wp-block-table tbody tr:nth-child(even){background:#F7FBFE;}
.prosa .wp-block-table th{font-weight:600;color:var(--tinta);}

/* --- Pie: separación más generosa --- */
footer.pie{padding-block:64px 30px;}
footer.pie h4{font-weight:600;}
footer.pie a{transition:color var(--transicion);}
footer.pie a:hover{color:#fff;}

/* --- Aviso de cookies: sombra más suave y entrada --- */
.cookies{box-shadow:var(--sombra-media);border-width:1px;border-top:3px solid var(--azul);}

/* --- Selección de texto con el color de la marca --- */
::selection{background:var(--azul-claro);color:var(--marino);}

/* --- Desplazamiento con margen para la cabecera fija --- */
:target{scroll-margin-top:100px;}

/* ====================================================================
   OBRAS REALIZADAS
   ==================================================================== */
.obras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(24px,3vw,36px);
  margin-block:clamp(34px,4vw,48px);
}
@media (min-width:1000px){ .obras{grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){ .obras{grid-template-columns:1fr;} }

.obra{
  background:var(--papel);
  border:1px solid var(--linea);
  display:flex;flex-direction:column;
  transition:box-shadow var(--transicion),transform var(--transicion);
}
.obra:hover{box-shadow:var(--sombra-media);transform:translateY(-2px);}

.obra-foto{
  aspect-ratio:4/3;overflow:hidden;background:var(--tinte);
  border-bottom:1px solid var(--linea);
}
.obra-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms cubic-bezier(.2,.6,.3,1);}
.obra:hover .obra-foto img{transform:scale(1.04);}

/* Marcador cuando aún no hay fotografía */
.obra-foto-vacia{
  background:
    linear-gradient(135deg, rgba(84,180,228,.14) 0%, rgba(10,58,87,.10) 100%),
    repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(28,144,204,.07) 12px,rgba(28,144,204,.07) 24px);
}

.obra-texto{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.obra-tipo{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-fuerte);font-weight:600;display:block;margin-bottom:12px;
}
.obra h3{font-size:20px;margin:0 0 10px;color:var(--tinta);}
.obra p{color:var(--gris);font-size:15.5px;margin:0;line-height:1.6;}
.obra-meta{
  margin-top:16px!important;padding-top:14px;border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--gris);text-transform:uppercase;
}

/* Dentro del contenido de una página */
.prosa > .obras{
  width:calc(100% - 48px);max-width:var(--ancho);
  margin-inline:auto;box-sizing:border-box;
}

/* ====================================================================
   v2.5.0 — ALINEACIÓN: TODO CON EL MISMO MARGEN IZQUIERDO
   --------------------------------------------------------------------
   PROBLEMA: los títulos y párrafos se limitaban a 78ch y se centraban
   con margin-inline:auto, mientras que las rejillas se centraban a un
   ancho mayor (1120px). Al tener anchos distintos y estar ambos
   centrados, sus bordes izquierdos NO coincidían y se veía un escalón
   entre el título y el contenido de debajo.

   SOLUCIÓN: una rejilla de maquetación con una columna central del
   mismo ancho que .contenedor. Todos los bloques se colocan en esa
   columna, así que comparten borde izquierdo. El texto sigue limitado
   a 78ch, pero ALINEADO A LA IZQUIERDA, no centrado.
   ==================================================================== */

.prosa{
  display:grid;
  grid-template-columns:
    [full-start] 1fr
    [ancho-start] min(100% - 48px, calc(var(--ancho) - 48px))
    [ancho-end] 1fr
    [full-end];
  width:100%;max-width:none;padding:0;margin:0;
}

/* Todo el contenido va en la columna central, con el mismo borde izquierdo
   que el título de la cabecera azul y que el logotipo de la cabecera. */
.prosa > *{
  grid-column:ancho;
  width:auto;
  max-width:none;
  margin-inline:0;
}

/* El texto conserva un ancho de lectura cómodo, pero alineado a la
   izquierda para que arranque justo donde arrancan las rejillas. */
.prosa > p,
.prosa > h1,.prosa > h2,.prosa > h3,.prosa > h4,.prosa > h5,.prosa > h6,
.prosa > ul,.prosa > ol,.prosa > dl,
.prosa > blockquote,
.prosa > pre,
.prosa > .wp-block-list,
.prosa > .wp-block-paragraph,
.prosa > .wp-block-heading{
  max-width:78ch;
  margin-inline:0;
}

/* Rejillas, fichas y tablas: todo el ancho de la columna central. */
.prosa > .servicios,
.prosa > .ficha,
.prosa > .resumen,
.prosa > .obras,
.prosa > .cifras,
.prosa > .datos-contacto,
.prosa > .wp-block-table,
.prosa > figure.wp-block-table,
.prosa > table,
.prosa > .wp-block-image,
.prosa > .wp-block-buttons,
.prosa > .wp-block-embed,
.prosa > hr{
  max-width:none;
  margin-inline:0;
  box-sizing:border-box;
}

/* Piezas que ocupan toda la pantalla: se salen de la columna central. */
.prosa > .cta-franja,
.prosa > .bloque-form,
.prosa > .alignfull{
  grid-column:full;
  max-width:none;
  margin-inline:0;
}

/* Bloques anchos de Gutenberg */
.prosa > .alignwide{grid-column:ancho;max-width:none;}

/* Imágenes centradas del editor: se respetan */
.prosa > .wp-block-image.aligncenter,
.prosa > figure.aligncenter{margin-inline:auto;}

/* Los párrafos vacíos del editor no deben ocupar una fila de la rejilla */
.prosa > p:empty{display:none;}

/* --------------------------------------------------------------------
   La cabecera azul y el contenido comparten borde izquierdo
   -------------------------------------------------------------------- */
.hero-pagina .entradilla{max-width:78ch;}
.portada .entradilla{max-width:64ch;}

/* --------------------------------------------------------------------
   Alineación interna de los bloques
   -------------------------------------------------------------------- */

/* Ficha de acreditaciones: el sangrado del hover ya no descuadra la fila */
.ficha .fila{padding-inline:0;margin-inline:0;}
.ficha .fila:hover{background:transparent;}
.ficha .fila:hover .concepto{color:var(--azul-fuerte);}

/* Tarjetas: el número, el título y el texto arrancan en la misma vertical */
.servicio .num,.servicio h3,.servicio p,
.resumen .tarjeta .num,.resumen .tarjeta h3,.resumen .tarjeta p,.resumen .tarjeta .mas,
.obra-tipo,.obra h3,.obra p{margin-left:0;padding-left:0;}

/* Título y entradilla de sección con el mismo arranque */
.intro-seccion{margin-left:0;}

/* ====================================================================
   v2.7.0 — IMÁGENES: sellos, fotografía de portada y servicios con foto
   ==================================================================== */

/* --------------------------------------------------------------------
   PORTADA CON FOTOGRAFÍA
   La foto va de fondo con una capa oscura encima, para que el texto
   blanco se lea siempre bien independientemente de la imagen.
   -------------------------------------------------------------------- */
.portada-con-foto{
  background-color:var(--marino);
  background-image:
    linear-gradient(rgba(10,58,87,var(--hero-oscuro,.62)), rgba(10,58,87,var(--hero-oscuro,.62))),
    var(--hero-foto);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Con foto, la trama de plano estorba: se atenúa */
.portada-con-foto::before{opacity:.06;}
.portada-con-foto .entradilla{color:#DDE9F2;}

/* --------------------------------------------------------------------
   BANDA DE SELLOS OFICIALES
   -------------------------------------------------------------------- */
.sellos{margin-block:clamp(34px,4.5vw,52px);}
.sellos-titulo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin:0 0 22px;
  display:flex;align-items:center;gap:14px;
}
.sellos-titulo::after{content:"";flex:1;height:1px;background:var(--linea);}

.sellos-fila{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(18px,2.5vw,32px);
  align-items:start;
}
.sello{
  margin:0;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:12px;
}
.sello img{
  max-height:78px;width:auto;max-width:100%;object-fit:contain;
  /* Los sellos suelen llegar con fondo blanco: se integran mejor así */
  mix-blend-mode:multiply;
  filter:saturate(.95);
  transition:transform var(--transicion);
}
.sello:hover img{transform:scale(1.04);}
.sello figcaption{
  font-size:12.5px;line-height:1.45;color:var(--gris);
  max-width:22ch;
}
/* Sobre fondo oscuro, la mezcla no funciona: se desactiva */
.portada .sello img,.presupuesto .sello img,.bloque-form .sello img{mix-blend-mode:normal;}

/* --------------------------------------------------------------------
   SELLO DENTRO DE LA FICHA DE ACREDITACIONES
   -------------------------------------------------------------------- */
.ficha .fila.con-sello{
  grid-template-columns:88px 1fr auto;
  gap:8px 24px;align-items:center;
}
.fila-sello{display:flex;align-items:center;justify-content:center;}
.fila-sello img{
  max-width:88px;max-height:62px;width:auto;height:auto;
  object-fit:contain;mix-blend-mode:multiply;
}
@media (max-width:640px){
  .ficha .fila.con-sello{grid-template-columns:64px 1fr;}
  .ficha .fila.con-sello .dato{grid-column:1 / -1;text-align:left;}
  .fila-sello img{max-width:64px;max-height:48px;}
}

/* --------------------------------------------------------------------
   SERVICIOS CON FOTOGRAFÍA
   -------------------------------------------------------------------- */
.servicio{padding:0;display:flex;flex-direction:column;}
.servicio-texto{padding:28px 26px 30px;display:block;}
.servicio:not(.con-imagen) .servicio-texto{padding-top:28px;}

.servicio-foto{
  aspect-ratio:16/10;overflow:hidden;background:var(--tinte);
  border-bottom:1px solid var(--linea);
}
.servicio-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 400ms cubic-bezier(.2,.6,.3,1);
}
.servicio.con-imagen:hover .servicio-foto img{transform:scale(1.04);}

/* --------------------------------------------------------------------
   IMÁGENES DENTRO DEL CONTENIDO
   -------------------------------------------------------------------- */
.prosa > .sellos{max-width:none;margin-inline:0;}
.prosa .wp-block-image img{max-width:100%;height:auto;}
.prosa figure.wp-block-image{margin-block:28px;}
.prosa figcaption{
  font-size:14px;color:var(--gris);margin-top:10px;
  padding-left:14px;border-left:2px solid var(--linea);
}

/* Impresión: los sellos deben salir con sus colores reales */
@media print{
  .sello img,.fila-sello img{mix-blend-mode:normal;filter:none;}
}

/* ====================================================================
   MAPA DE LA OFICINA (carga bajo demanda)
   --------------------------------------------------------------------
   El mapa de Google no se carga hasta que el visitante pulsa el botón.
   Mientras tanto se ve un recuadro con la dirección y el aviso.
   ==================================================================== */
.mapa{margin-block:clamp(34px,4.5vw,52px);}
.mapa-titulo{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin:0 0 20px;
  display:flex;align-items:center;gap:14px;
}
.mapa-titulo::after{content:"";flex:1;height:1px;background:var(--linea);}

.mapa-caja{
  position:relative;width:100%;height:var(--mapa-alto,420px);
  border:1px solid var(--linea);background:var(--tinte);overflow:hidden;
}

/* Recuadro previo, con la trama de plano de la marca */
.mapa-aviso{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,40px);text-align:center;
  background-color:var(--marino);
  background-image:
    linear-gradient(rgba(84,180,228,.10),rgba(84,180,228,.10)),
    linear-gradient(#54B4E4 1px,transparent 1px),
    linear-gradient(90deg,#54B4E4 1px,transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
}
.mapa-aviso-texto{max-width:52ch;}
.mapa-direccion{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,3vw,30px);line-height:1.1;color:#fff;
  margin:0 0 16px;letter-spacing:.01em;
}
.mapa-nota{font-size:14.5px;line-height:1.6;color:#C6D8E7;margin:0 0 22px;}
.mapa-botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.mapa-aviso .btn-solido{background:var(--azul);border-color:var(--azul);color:#fff;}
.mapa-aviso .btn-solido:hover{background:var(--azul-claro);border-color:var(--azul-claro);color:var(--marino);}
.mapa-aviso .btn-linea{color:#fff;border-color:#3C5C82;}
.mapa-aviso .btn-linea:hover{border-color:var(--azul-claro);color:var(--azul-claro);}

/* El mapa ya cargado */
.mapa-marco{width:100%;height:100%;border:0;display:block;}
.mapa-cargado .mapa-caja{background:var(--papel);}

/* Dentro del contenido de una página */
.prosa > .mapa{max-width:none;margin-inline:0;}

/* Sobre fondo oscuro (página de presupuesto) */
.bloque-form .mapa-titulo{color:#8FB6D6;}
.bloque-form .mapa-titulo::after{background:var(--marino-linea);}

@media (max-width:640px){
  .mapa-caja{height:min(var(--mapa-alto,420px), 340px);}
  .mapa-botones .btn{width:100%;text-align:center;}
}


/* ====================================================================
   v2.9.0 — REJILLAS SIN HUECOS VISIBLES
   --------------------------------------------------------------------
   Antes las rejillas pintaban las líneas con el fondo del contenedor y
   un hueco de 1px. Si el número de tarjetas no llenaba la última fila,
   las celdas sobrantes dejaban ver ese fondo y parecían cajas vacías.
   Ahora cada tarjeta lleva su propio borde y el contenedor es
   transparente, así que los huecos son invisibles.
   ==================================================================== */

.resumen,
.servicios{
  background:transparent;
  border:0;
  gap:0;
}

/* Bordes por tarjeta, superpuestos para que no se dupliquen */
.resumen .tarjeta,
.servicio{
  border:1px solid var(--linea);
  margin:0 -1px -1px 0;
}

/* La línea de color al pasar el ratón sustituye al borde superior */
.resumen .tarjeta{border-top:3px solid var(--linea);}
.resumen .tarjeta:hover{border-top-color:var(--azul-claro);}
.servicio{border-top:3px solid var(--linea);}
.servicio:hover{border-top-color:var(--azul-claro);}

/* La ficha de acreditaciones no se ve afectada, pero se asegura */
.ficha{background:transparent;}


/* ====================================================================
   v3.0.0 — MAPA DE CARGA DIRECTA
   El mapa se muestra cargado desde el principio. Ya no hay recuadro
   previo, así que se retira su estilo y se añade el pie con la
   dirección y el enlace de cómo llegar.
   ==================================================================== */
.mapa-aviso{display:none;}

.mapa-directo .mapa-caja{background:var(--papel);border:1px solid var(--linea);}
.mapa-directo .mapa-marco{width:100%;height:100%;border:0;display:block;}

.mapa-pie{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:20px 22px;
  background:var(--tinte);
  border:1px solid var(--linea);border-top:0;
}
.mapa-pie-dir{
  margin:0;font-weight:600;color:var(--tinta);font-size:16px;line-height:1.5;
}
.mapa-pie .btn{flex:0 0 auto;}

/* Sobre el panel oscuro del formulario */
.bloque-form .mapa-pie{background:var(--marino-2);border-color:var(--marino-linea);}
.bloque-form .mapa-pie-dir{color:#fff;}

@media (max-width:600px){
  .mapa-pie{flex-direction:column;align-items:flex-start;}
  .mapa-pie .btn{width:100%;text-align:center;}
}

/* ====================================================================
   v3.1.0 — CONTACTO RÁPIDO, TIPOGRAFÍA DE ACREDITACIONES Y ANIMACIONES
   ==================================================================== */

/* --------------------------------------------------------------------
   1. BOTÓN FLOTANTE DE CONTACTO
   -------------------------------------------------------------------- */
.cr{position:fixed;right:20px;bottom:20px;z-index:110;}
.cr-con-cookies{bottom:calc(20px + var(--cr-desplazado,220px));}

.cr-boton{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--azul-fuerte);color:#fff;border:0;cursor:pointer;
  padding:14px 20px;border-radius:999px;
  font-family:var(--texto);font-weight:600;font-size:15px;letter-spacing:.02em;
  box-shadow:0 6px 20px rgba(12,42,59,.25);
  transition:background var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.cr-boton:hover{background:#0b5686;transform:translateY(-2px);box-shadow:0 10px 28px rgba(12,42,59,.3);}
.cr-boton:active{transform:translateY(0);}

.cr-icono,.cr-cerrar{display:inline-flex;align-items:center;justify-content:center;}
.cr-cerrar{display:none;}
.cr-abierto .cr-icono{display:none;}
.cr-abierto .cr-cerrar{display:inline-flex;}
.cr-abierto .cr-boton{background:var(--marino);}

@media (max-width:520px){
  .cr{right:16px;bottom:16px;}
  .cr-etiqueta{display:none;}
  .cr-boton{padding:16px;border-radius:50%;}
}

/* Panel */
.cr-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:min(92vw,340px);
  background:var(--papel);border:1px solid var(--linea);
  border-top:3px solid var(--azul);
  box-shadow:0 16px 44px rgba(12,42,59,.22);
  overflow:hidden;
  animation:cr-entrar 220ms cubic-bezier(.2,.7,.3,1);
}
.cr-panel[hidden]{display:none;}
@keyframes cr-entrar{
  from{opacity:0;transform:translateY(10px) scale(.985);}
  to{opacity:1;transform:none;}
}

.cr-cabecera{padding:20px 20px 14px;border-bottom:1px solid var(--linea);}
.cr-titulo{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:19px;line-height:1.15;color:var(--tinta);margin:0 0 8px;letter-spacing:.01em;
}
.cr-texto{margin:0;font-size:14px;line-height:1.55;color:var(--gris);}

.cr-opciones{list-style:none;margin:0;padding:0;}
.cr-opcion{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;text-decoration:none;color:var(--tinta);
  border-bottom:1px solid var(--linea);
  transition:background var(--transicion);
}
.cr-opcion:hover{background:var(--tinte);}
.cr-op-icono{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tinte);color:var(--azul-fuerte);
}
.cr-wa .cr-op-icono{background:#E7F6EC;color:#1E8E3E;}
.cr-op-texto{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cr-op-texto strong{font-size:15px;font-weight:600;line-height:1.25;}
.cr-op-texto small{font-size:13px;color:var(--gris);}

.cr-pie{
  margin:0;padding:14px 20px;font-size:12px;line-height:1.5;
  color:var(--gris);background:var(--tinte);
}

/* --------------------------------------------------------------------
   2. TIPOGRAFÍA DE LA PÁGINA DE ACREDITACIONES
   La fuente monoespaciada del sistema desentonaba con Barlow e Inter.
   Ahora los datos usan Inter con cifras de ancho fijo, que alinea los
   números en columna sin recurrir a una monoespaciada.
   -------------------------------------------------------------------- */
.ficha .dato{
  font-family:var(--texto);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:16.5px;font-weight:700;letter-spacing:.01em;
  color:var(--tinta);
}
.ficha .dato u{
  box-shadow:inset 0 -9px 0 rgba(84,180,228,.42);
  padding:0 2px;
}
.ficha .concepto{
  font-family:var(--texto);font-weight:600;font-size:17.5px;
  line-height:1.35;letter-spacing:-.005em;
}
.ficha .concepto small{
  font-family:var(--texto);font-weight:400;font-size:14.5px;
  line-height:1.55;color:var(--gris);letter-spacing:0;margin-top:5px;
}
.ficha .fila{padding-block:22px;}

/* La etiqueta superior de sección, con Inter espaciada en vez de mono */
.cota,.sellos-titulo,.mapa-titulo,.obra-meta,.obra-tipo,.num,.et{
  font-family:var(--texto);
  font-weight:600;
}
.cota{letter-spacing:.16em;font-size:11.5px;}
.servicio .num,.resumen .tarjeta .num{letter-spacing:.14em;font-size:11.5px;}
.datos-contacto .et{letter-spacing:.1em;font-size:11px;}
.cifras small{font-family:var(--texto);letter-spacing:.1em;}
.aviso-basico dt{font-family:var(--texto);letter-spacing:.08em;}
.prosa .wp-block-table th,.legal .cuerpo th{font-family:var(--texto);letter-spacing:.06em;}

/* --------------------------------------------------------------------
   3. ANIMACIONES DE APARICIÓN
   -------------------------------------------------------------------- */
.anim{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.6,.3,1),
             transform .55s cubic-bezier(.2,.6,.3,1);
  will-change:opacity,transform;
}
.anim.visible{opacity:1;transform:none;}

/* Las tarjetas suben un poco más, para que el escalonado se note */
.servicio.anim,.resumen .tarjeta.anim,.obra.anim,.sello.anim{transform:translateY(22px);}
.ficha .fila.anim{transform:translateY(12px);}

/* Entrada de la portada y de las cabeceras de página */
.portada .cota,.portada h1,.portada .entradilla,.portada .acciones,.portada .cifras,
.hero-pagina .cota,.hero-pagina h1,.hero-pagina .entradilla{
  opacity:0;transform:translateY(18px);
}
.entrada .cota,.entrada h1,.entrada .entradilla,.entrada .acciones,.entrada .cifras{
  animation:subir .7s cubic-bezier(.2,.6,.3,1) forwards;
}
.entrada .cota{animation-delay:.05s;}
.entrada h1{animation-delay:.14s;}
.entrada .entradilla{animation-delay:.26s;}
.entrada .acciones{animation-delay:.36s;}
.entrada .cifras{animation-delay:.46s;}

@keyframes subir{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

/* Sin animación si el sistema pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  .anim,.anim.visible{opacity:1!important;transform:none!important;transition:none!important;}
  .portada .cota,.portada h1,.portada .entradilla,.portada .acciones,.portada .cifras,
  .hero-pagina .cota,.hero-pagina h1,.hero-pagina .entradilla{opacity:1;transform:none;}
  .entrada .cota,.entrada h1,.entrada .entradilla,.entrada .acciones,.entrada .cifras,
  .cr-panel{animation:none;}
}


/* El aviso de cookies siempre por encima del botón flotante */
.cookies{z-index:130;}
.cr{z-index:110;}

/* En pantallas pequeñas, el botón se aparta del aviso de cookies */
@media (max-width:760px){
  .cr-con-cookies{bottom:calc(20px + 300px);}
}

/* ====================================================================
   v3.2.0 — TRANSICIONES VISUALES
   Todo se apoya en transform y opacity, que el navegador anima sin
   recalcular la maquetación. Al final del bloque se anula todo para
   quien tenga activada la reducción de movimiento.
   ==================================================================== */

/* --------------------------------------------------------------------
   1. ENTRADA Y SALIDA DE PÁGINA
   -------------------------------------------------------------------- */
/* La entrada es una animación CSS pura: si el JavaScript fallara o
   estuviera desactivado, la página se ve igualmente. Nunca depende del JS
   para ser visible. */
body{animation:entradaPagina .4s ease both;}
@keyframes entradaPagina{from{opacity:0;}to{opacity:1;}}

/* La salida sí la controla el JS, y solo atenúa algo ya visible */
body.pagina-saliendo{opacity:0;transition:opacity .22s ease;}

/* --------------------------------------------------------------------
   2. BARRA DE PROGRESO DE LECTURA
   -------------------------------------------------------------------- */
.progreso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:transparent;pointer-events:none;
}
.progreso-relleno{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--azul-fuerte),var(--azul-claro));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;
}

/* --------------------------------------------------------------------
   3. CABECERA: COMPACTA AL BAJAR Y SE APARTA
   -------------------------------------------------------------------- */
header.barra{
  transition:transform .32s cubic-bezier(.2,.7,.3,1),
             box-shadow var(--transicion),
             background var(--transicion);
}
header.barra .contenedor{transition:min-height .3s cubic-bezier(.2,.7,.3,1);}
.marca img{transition:height .3s cubic-bezier(.2,.7,.3,1);}

header.barra.compacta .contenedor{min-height:64px;}
header.barra.compacta .marca img{height:36px;}
header.barra.oculta{transform:translateY(-100%);}

/* El menú, con subrayado que crece desde la izquierda */
.menu a,.menu li a{position:relative;border-bottom-color:transparent!important;}
.menu a::after,.menu li a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--azul-claro);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover::after,
.menu a[aria-current="page"]::after,
.menu .current-menu-item > a::after{transform:scaleX(1);}

/* --------------------------------------------------------------------
   4. BOTONES: BRILLO AL PASAR
   -------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.btn:hover::before{transform:translateX(120%);}

/* --------------------------------------------------------------------
   5. ENLACES DEL CONTENIDO: SUBRAYADO QUE CRECE
   -------------------------------------------------------------------- */
.prosa a:not(.btn):not(.tarjeta),
.datos-contacto a,
footer.pie a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .3s cubic-bezier(.2,.7,.3,1),color var(--transicion);
}
.prosa a:not(.btn):not(.tarjeta):hover,
.datos-contacto a:hover,
footer.pie a:hover{background-size:100% 1px;}

/* --------------------------------------------------------------------
   6. TARJETAS: LA FLECHA AVANZA
   -------------------------------------------------------------------- */
.resumen .tarjeta .mas{
  display:inline-flex;align-items:center;gap:7px;
  transition:gap .28s cubic-bezier(.2,.7,.3,1),color var(--transicion);
}
.resumen .tarjeta:hover .mas{gap:13px;text-decoration:none;}

/* Filas de acreditaciones: el valor se desplaza levemente */
.ficha .fila .dato{transition:transform var(--transicion);}
.ficha .fila:hover .dato{transform:translateX(-3px);}

/* Sellos: elevación suave */
.sello{transition:transform var(--transicion);}
.sello:hover{transform:translateY(-3px);}

/* --------------------------------------------------------------------
   7. FORMULARIO: CAMPOS CON FOCO MARCADO
   -------------------------------------------------------------------- */
.campo{position:relative;}
.campo input,.campo textarea,.campo select{
  transition:border-color var(--transicion),background var(--transicion),
             box-shadow var(--transicion);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  box-shadow:0 0 0 3px rgba(84,180,228,.22);
}
.campo label{transition:color var(--transicion);}
.campo:focus-within label{color:var(--azul-claro);}

/* Casillas de consentimiento */
.consentimiento{transition:opacity var(--transicion);}
.consentimiento input{transition:transform var(--transicion);}
.consentimiento input:checked{transform:scale(1.1);}

/* --------------------------------------------------------------------
   8. BOTÓN DE VOLVER ARRIBA
   -------------------------------------------------------------------- */
.subir{
  position:fixed;left:20px;bottom:20px;z-index:105;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--marino);color:#fff;border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(12,42,59,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),
             visibility .3s,background var(--transicion);
}
.subir.visible{opacity:1;visibility:visible;transform:none;}
.subir:hover{background:var(--azul-fuerte);transform:translateY(-3px);}

@media (max-width:520px){
  .subir{left:16px;bottom:16px;width:42px;height:42px;}
}

/* --------------------------------------------------------------------
   9. IMÁGENES Y SECCIONES
   -------------------------------------------------------------------- */
.obra-foto img,.servicio-foto img{transition:transform .5s cubic-bezier(.2,.6,.3,1);}
.prosa .wp-block-image img{transition:transform .5s cubic-bezier(.2,.6,.3,1);}

/* El mapa entra con una atenuación al cargar */
.mapa-marco{opacity:0;animation:aparecer .6s ease .2s forwards;}
@keyframes aparecer{to{opacity:1;}}

/* Franja de presupuesto: leve realce al pasar */
.cta-franja{transition:background var(--transicion);}

/* --------------------------------------------------------------------
   10. MENÚ MÓVIL DESPLEGABLE
   -------------------------------------------------------------------- */
@media (max-width:900px){
  .menu{
    display:flex;
    max-height:0;overflow:hidden;
    padding-block:0;
    border-bottom-width:0;
    opacity:0;visibility:hidden;
    transition:max-height .34s cubic-bezier(.2,.7,.3,1),
               padding .34s cubic-bezier(.2,.7,.3,1),
               opacity .28s ease,
               visibility .34s;
  }
  .menu.abierto{
    max-height:70vh;overflow-y:auto;
    padding-block:8px 20px;
    border-bottom-width:1px;
    opacity:1;visibility:visible;
  }
  .abrir-menu{transition:background var(--transicion),color var(--transicion);}
}

/* --------------------------------------------------------------------
   11. RESPETO A LA REDUCCIÓN DE MOVIMIENTO
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body{animation:none!important;opacity:1!important;}
  body.pagina-saliendo{opacity:1!important;transition:none!important;}
  .progreso{display:none;}
  header.barra.oculta{transform:none;}
  .btn::before{display:none;}
  .mapa-marco{opacity:1;animation:none;}
  .subir{transition:opacity .01ms;}
  .menu{transition:none;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ====================================================================
   v3.3.0 — FONDO ANIMADO DE LA PORTADA Y LAS CABECERAS
   --------------------------------------------------------------------
   Capas superpuestas con temática de plano de obra. Todo se anima con
   transform y opacity, que el navegador resuelve en la tarjeta gráfica
   sin recalcular la maquetación, de modo que no penaliza el rendimiento.
   ==================================================================== */

.portada,.hero-pagina{position:relative;isolation:isolate;overflow:hidden;}
.portada .contenedor,.hero-pagina .contenedor{position:relative;z-index:3;}

/* La trama estática anterior se retira: ahora la aporta el fondo animado */
.portada::before,.hero-pagina::before{display:none;}

.fondo-anim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;color:var(--azul-claro);
}
.fondo-anim > span{position:absolute;display:block;}

/* --------------------------------------------------------------------
   1. REJILLAS DE PLANO EN DERIVA (dos capas a distinta velocidad)
   -------------------------------------------------------------------- */
.fa-rejilla,.fa-rejilla2{
  inset:-60% -60%;
  background-image:
    linear-gradient(var(--azul-claro) 1px,transparent 1px),
    linear-gradient(90deg,var(--azul-claro) 1px,transparent 1px);
  will-change:transform;
}
.fa-rejilla{
  background-size:64px 64px;
  opacity:.14;
  animation:fa-derivar 34s linear infinite;
}
.fa-rejilla2{
  background-size:224px 224px;
  opacity:.10;
  animation:fa-derivar2 52s linear infinite;
}
@keyframes fa-derivar{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-64px,-64px,0);}
}
@keyframes fa-derivar2{
  from{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(112px,56px,0) scale(1.04);}
  to{transform:translate3d(0,0,0) scale(1);}
}

/* --------------------------------------------------------------------
   2. LUCES QUE RESPIRAN
   -------------------------------------------------------------------- */
.fa-aurora{
  border-radius:50%;
  filter:blur(70px);
  will-change:transform,opacity;
}
.fa-aurora1{
  width:56vw;height:56vw;max-width:760px;max-height:760px;
  right:-12%;top:-24%;
  background:radial-gradient(circle,rgba(84,180,228,.50) 0%,transparent 68%);
  animation:fa-flotar1 19s ease-in-out infinite;
}
.fa-aurora2{
  width:44vw;height:44vw;max-width:620px;max-height:620px;
  left:-14%;bottom:-30%;
  background:radial-gradient(circle,rgba(28,144,204,.42) 0%,transparent 70%);
  animation:fa-flotar2 24s ease-in-out infinite;
}
.fa-aurora3{
  width:34vw;height:34vw;max-width:480px;max-height:480px;
  left:42%;top:16%;
  background:radial-gradient(circle,rgba(143,211,242,.26) 0%,transparent 72%);
  animation:fa-flotar3 29s ease-in-out infinite;
}
@keyframes fa-flotar1{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85;}
  50%{transform:translate3d(-70px,54px,0) scale(1.14);opacity:1;}
}
@keyframes fa-flotar2{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7;}
  50%{transform:translate3d(80px,-62px,0) scale(1.18);opacity:.95;}
}
@keyframes fa-flotar3{
  0%,100%{transform:translate3d(0,0,0) scale(.95);opacity:.5;}
  50%{transform:translate3d(-56px,-40px,0) scale(1.2);opacity:.8;}
}

/* --------------------------------------------------------------------
   3. HAZ DE LUZ QUE BARRE EN DIAGONAL
   -------------------------------------------------------------------- */
.fa-haz{
  inset:-50%;
  background:linear-gradient(
    104deg,
    transparent 38%,
    rgba(143,211,242,.13) 47%,
    rgba(255,255,255,.10) 50%,
    rgba(143,211,242,.13) 53%,
    transparent 62%
  );
  transform:translate3d(-60%,0,0);
  animation:fa-barrer 11s cubic-bezier(.5,0,.5,1) infinite;
  will-change:transform;
}
@keyframes fa-barrer{
  0%{transform:translate3d(-70%,0,0);}
  55%,100%{transform:translate3d(70%,0,0);}
}

/* --------------------------------------------------------------------
   4. PARTÍCULAS EN ASCENSO (polvo de obra)
   -------------------------------------------------------------------- */
.fa-particulas{
  inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(143,211,242,.5) 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.6px);
  background-size:190px 190px, 310px 310px, 250px 250px;
  background-position:0 0, 90px 130px, 170px 60px;
  opacity:.5;
  animation:fa-ascender 26s linear infinite;
  will-change:transform;
}
@keyframes fa-ascender{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-24px,-310px,0);}
}

/* --------------------------------------------------------------------
   5. PLANO DEL EDIFICIO QUE SE DIBUJA SOLO
   -------------------------------------------------------------------- */
.fa-plano{
  position:absolute;right:2%;bottom:-4%;
  width:min(46vw,560px);height:auto;
  color:var(--azul-claro);opacity:.30;
}
.fa-plano-trazo path{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:fa-dibujar 4.5s cubic-bezier(.35,.1,.25,1) forwards,
            fa-latir 7s ease-in-out 5s infinite;
}
/* Escalonado del trazado, para que se dibuje como una mano */
.fa-plano-trazo path:nth-child(1){animation-delay:.3s,5s;}
.fa-plano-trazo path:nth-child(2){animation-delay:.6s,5.2s;}
.fa-plano-trazo path:nth-child(3){animation-delay:.85s,5.4s;}
.fa-plano-trazo path:nth-child(4){animation-delay:1s,5.6s;}
.fa-plano-trazo path:nth-child(5){animation-delay:1.15s,5.8s;}
.fa-plano-trazo path:nth-child(6){animation-delay:1.35s,6s;}
.fa-plano-trazo path:nth-child(7){animation-delay:1.6s,6.2s;}
.fa-plano-trazo path:nth-child(8){animation-delay:1.75s,6.4s;}
.fa-plano-trazo path:nth-child(9){animation-delay:1.9s,6.6s;}
.fa-plano-trazo path:nth-child(n+10){animation-delay:2.1s,6.8s;}

@keyframes fa-dibujar{ to{stroke-dashoffset:0;} }
@keyframes fa-latir{
  0%,100%{opacity:1;}
  50%{opacity:.45;}
}
.fa-plano-cotas path{
  stroke-dasharray:4 5;
  opacity:.55;
  animation:fa-cotas 3s linear infinite;
}
@keyframes fa-cotas{ to{stroke-dashoffset:-36;} }

/* --------------------------------------------------------------------
   6. VARIANTE DISCRETA PARA LAS CABECERAS DE PÁGINA
   -------------------------------------------------------------------- */
.fondo-pagina .fa-rejilla{opacity:.11;}
.fondo-pagina .fa-rejilla2{opacity:.07;}
.fondo-pagina .fa-aurora1{width:44vw;height:44vw;top:-40%;}
.fondo-pagina .fa-aurora2{opacity:.6;}
.fondo-pagina .fa-aurora3{display:none;}
.fondo-pagina .fa-particulas{opacity:.32;}
.fondo-pagina .fa-haz{animation-duration:15s;}

/* Con fotografía de fondo, las capas se atenúan para no ensuciarla */
.portada-con-foto .fa-rejilla,
.portada-con-foto .fa-rejilla2{opacity:.06;}
.portada-con-foto .fa-aurora{opacity:.35;}
.portada-con-foto .fa-plano{opacity:.14;}
.portada-con-foto .fa-particulas{opacity:.25;}

/* --------------------------------------------------------------------
   7. PARALAJE SUAVE CON EL RATÓN (lo activa el JavaScript)
   -------------------------------------------------------------------- */
.fondo-anim{
  transform:translate3d(
    calc(var(--fa-x,0) * 1px),
    calc(var(--fa-y,0) * 1px),
    0
  );
  transition:transform 900ms cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------
   8. MENOS MOVIMIENTO: fondo estático, sin animación
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fa-rejilla,.fa-rejilla2,.fa-aurora,.fa-haz,.fa-particulas,
  .fa-plano-trazo path,.fa-plano-cotas path{animation:none!important;}
  .fa-plano-trazo path{stroke-dashoffset:0;}
  .fa-haz{opacity:.35;transform:none;}
  .fondo-anim{transition:none;transform:none;}
}

/* En móvil se aligera: menos capas, menos consumo de batería */
@media (max-width:640px){
  .fa-plano{display:none;}
  .fa-aurora3{display:none;}
  .fa-particulas{opacity:.3;}
  .fa-haz{animation-duration:14s;}
}

/* ====================================================================
   v3.4.0 — BLOQUE DE RESEÑAS
   ==================================================================== */
.resenas{
  background:var(--tinte);
  border-top:1px solid var(--linea);
  padding-block:clamp(44px,6vw,72px);
}
.resenas-caja{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(28px,5vw,60px);flex-wrap:wrap;
}
.resenas-texto{flex:1 1 380px;min-width:0;}

.resenas-estrellas{
  display:inline-flex;gap:3px;color:#F2A73B;margin-bottom:14px;
}
.resenas-estrellas svg{display:block;}

.resenas h2{
  font-size:clamp(26px,3.4vw,38px);color:var(--tinta);margin:0 0 12px;
}
.resenas p{
  color:var(--gris);font-size:16.5px;line-height:1.65;
  max-width:56ch;margin:0 0 24px;
}
.resenas-btn{white-space:nowrap;}

/* Código QR */
.resenas-qr{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.resenas-qr a{display:block;text-decoration:none;}
.resenas-qr-marco{
  display:block;padding:14px;background:var(--papel);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-sutil);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.resenas-qr a:hover .resenas-qr-marco{
  transform:translateY(-3px);
  box-shadow:var(--sombra-media);
}
.resenas-qr-marco svg{display:block;width:152px;height:152px;}
.resenas-qr-pie{
  margin:0!important;font-size:13px;color:var(--gris);text-align:center;
  max-width:20ch;line-height:1.45;
}

/* En pantallas estrechas el QR pierde sentido: se está mirando desde el móvil */
@media (max-width:700px){
  .resenas-caja{flex-direction:column;align-items:flex-start;}
  .resenas-qr{display:none;}
  .resenas-btn{width:100%;text-align:center;}
}

/* En la página de presupuesto el bloque va sobre fondo blanco */
.page-presupuesto .resenas{background:var(--papel);}

/* ====================================================================
   v3.5.0 — FONDO DE LA PORTADA MÁS VISIBLE
   --------------------------------------------------------------------
   La versión anterior era demasiado discreta y podía pasar inadvertida.
   Se sube la opacidad de todas las capas, se aceleran los movimientos y
   se añaden dos elementos nuevos: líneas de nivel que recorren la
   pantalla y un pulso de luz que late desde el centro.
   ==================================================================== */

/* --- Rejillas: más marcadas y con más recorrido --- */
.fondo-portada .fa-rejilla{
  opacity:.30;
  animation-duration:18s;
}
.fondo-portada .fa-rejilla2{
  opacity:.22;
  animation-duration:30s;
}

/* --- Luces: más intensas y más amplias --- */
.fondo-portada .fa-aurora{filter:blur(58px);}
.fondo-portada .fa-aurora1{
  background:radial-gradient(circle,rgba(84,180,228,.80) 0%,transparent 66%);
  animation-duration:13s;
}
.fondo-portada .fa-aurora2{
  background:radial-gradient(circle,rgba(28,144,204,.70) 0%,transparent 68%);
  animation-duration:16s;
}
.fondo-portada .fa-aurora3{
  background:radial-gradient(circle,rgba(143,211,242,.52) 0%,transparent 70%);
  animation-duration:19s;
}

/* --- Haz de luz: más brillante y más frecuente --- */
.fondo-portada .fa-haz{
  background:linear-gradient(
    104deg,
    transparent 34%,
    rgba(143,211,242,.30) 45%,
    rgba(255,255,255,.24) 50%,
    rgba(143,211,242,.30) 55%,
    transparent 66%
  );
  animation-duration:7s;
}

/* --- Partículas: más presentes y ascenso más rápido --- */
.fondo-portada .fa-particulas{
  opacity:.95;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1.3px, transparent 2px),
    radial-gradient(circle, rgba(143,211,242,.85) 1.8px, transparent 2.6px),
    radial-gradient(circle, rgba(255,255,255,.7) 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(143,211,242,.6) 1px, transparent 1.7px);
  background-size:150px 150px, 240px 240px, 195px 195px, 300px 300px;
  background-position:0 0, 70px 110px, 140px 45px, 30px 200px;
  animation-duration:15s;
}

/* --- Plano del edificio: más nítido y se redibuja en bucle --- */
.fondo-portada .fa-plano{opacity:.52;}
.fondo-portada .fa-plano-trazo path{
  stroke-width:2;
  animation:fa-redibujar 14s cubic-bezier(.35,.1,.25,1) infinite;
}
@keyframes fa-redibujar{
  0%{stroke-dashoffset:1400;}
  22%,72%{stroke-dashoffset:0;}
  94%,100%{stroke-dashoffset:-1400;}
}

/* --- NUEVO: líneas de nivel que recorren la pantalla --- */
.fondo-portada::before,
.fondo-portada::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(143,211,242,.85) 22%,
    rgba(255,255,255,.95) 50%,
    rgba(143,211,242,.85) 78%,
    transparent);
  box-shadow:0 0 14px rgba(143,211,242,.65);
  opacity:0;
  pointer-events:none;
}
.fondo-portada::before{animation:fa-nivel 9s ease-in-out infinite;}
.fondo-portada::after{animation:fa-nivel 9s ease-in-out 4.5s infinite;}

@keyframes fa-nivel{
  0%{top:14%;opacity:0;transform:scaleX(.4);}
  12%{opacity:.9;transform:scaleX(1);}
  50%{opacity:.55;}
  88%{opacity:.85;transform:scaleX(1);}
  100%{top:88%;opacity:0;transform:scaleX(.4);}
}

/* --- NUEVO: pulso de luz que late desde el centro --- */
.portada .fa-pulso{
  position:absolute;left:50%;top:50%;
  width:min(120vw,1400px);height:min(120vw,1400px);
  margin-left:calc(min(120vw,1400px) / -2);
  margin-top:calc(min(120vw,1400px) / -2);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(84,180,228,.20) 0%,
    rgba(84,180,228,.07) 38%,
    transparent 64%);
  animation:fa-latido 6s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes fa-latido{
  0%,100%{transform:scale(.82);opacity:.5;}
  50%{transform:scale(1.06);opacity:1;}
}

/* --- El texto siempre por encima y bien legible --- */
.portada .contenedor{z-index:4;}
.portada h1,.portada .entradilla{
  text-shadow:0 2px 22px rgba(6,32,50,.5);
}

/* Con fotografía de fondo se rebaja todo para no ensuciarla */
.portada-con-foto .fa-rejilla{opacity:.12;}
.portada-con-foto .fa-rejilla2{opacity:.08;}
.portada-con-foto .fa-aurora{opacity:.45;}
.portada-con-foto .fa-particulas{opacity:.4;}
.portada-con-foto .fa-plano{opacity:.2;}
.portada-con-foto .fa-pulso{opacity:.35;}
.portada-con-foto.fondo-portada::before,
.portada-con-foto.fondo-portada::after{opacity:0;animation:none;}

/* Móvil: se mantiene vistoso pero sin las capas más costosas */
@media (max-width:640px){
  .fondo-portada .fa-particulas{opacity:.7;}
  .fondo-portada .fa-aurora{filter:blur(46px);}
  .fa-pulso{display:none;}
}

/* Menos movimiento: todo quieto */
@media (prefers-reduced-motion:reduce){
  .fondo-portada::before,.fondo-portada::after{animation:none;opacity:0;}
  .fa-pulso{animation:none;opacity:.5;}
  .fondo-portada .fa-plano-trazo path{animation:none;stroke-dashoffset:0;}
}

/* ====================================================================
   v3.6.0 — CABECERAS DE LAS PÁGINAS INTERIORES CON EL MISMO EMPUJE
   --------------------------------------------------------------------
   Antes la variante de página era muy discreta y contrastaba con la
   portada. Ahora comparten intensidad, ajustada a que estas cabeceras
   son más bajas y el texto debe seguir leyéndose con holgura.
   ==================================================================== */

/* --- Rejillas --- */
.fondo-pagina .fa-rejilla{
  opacity:.28;
  animation-duration:20s;
}
.fondo-pagina .fa-rejilla2{
  opacity:.20;
  animation-duration:32s;
}

/* --- Luces --- */
.fondo-pagina .fa-aurora{filter:blur(54px);}
.fondo-pagina .fa-aurora1{
  width:52vw;height:52vw;max-width:700px;max-height:700px;
  right:-10%;top:-46%;
  background:radial-gradient(circle,rgba(84,180,228,.72) 0%,transparent 66%);
  animation-duration:14s;
}
.fondo-pagina .fa-aurora2{
  width:42vw;height:42vw;max-width:560px;max-height:560px;
  left:-12%;bottom:-46%;
  background:radial-gradient(circle,rgba(28,144,204,.62) 0%,transparent 68%);
  animation-duration:17s;
}
.fondo-pagina .fa-aurora3{
  display:block;
  width:30vw;height:30vw;max-width:420px;max-height:420px;
  left:46%;top:-10%;
  background:radial-gradient(circle,rgba(143,211,242,.44) 0%,transparent 70%);
  animation-duration:21s;
}

/* --- Haz de luz --- */
.fondo-pagina .fa-haz{
  background:linear-gradient(
    104deg,
    transparent 34%,
    rgba(143,211,242,.26) 45%,
    rgba(255,255,255,.20) 50%,
    rgba(143,211,242,.26) 55%,
    transparent 66%
  );
  animation-duration:8s;
}

/* --- Partículas --- */
.fondo-pagina .fa-particulas{
  opacity:.85;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 1.2px, transparent 1.9px),
    radial-gradient(circle, rgba(143,211,242,.8) 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(255,255,255,.6) 1.1px, transparent 1.8px);
  background-size:160px 160px, 250px 250px, 205px 205px;
  background-position:0 0, 80px 100px, 130px 50px;
  animation-duration:17s;
}

/* --- Plano del edificio, ajustado a una cabecera más baja --- */
.fondo-pagina .fa-plano{
  width:min(34vw,400px);
  right:3%;bottom:-14%;
  opacity:.40;
}
.fondo-pagina .fa-plano-trazo path{
  stroke-width:1.9;
  animation:fa-redibujar 15s cubic-bezier(.35,.1,.25,1) infinite;
}

/* --- Líneas de nivel también aquí --- */
.fondo-pagina::before,
.fondo-pagina::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(143,211,242,.8) 22%,
    rgba(255,255,255,.9) 50%,
    rgba(143,211,242,.8) 78%,
    transparent);
  box-shadow:0 0 12px rgba(143,211,242,.6);
  opacity:0;pointer-events:none;
}
.fondo-pagina::before{animation:fa-nivel-pagina 10s ease-in-out infinite;}
.fondo-pagina::after{animation:fa-nivel-pagina 10s ease-in-out 5s infinite;}

@keyframes fa-nivel-pagina{
  0%{top:8%;opacity:0;transform:scaleX(.4);}
  14%{opacity:.85;transform:scaleX(1);}
  50%{opacity:.5;}
  86%{opacity:.8;transform:scaleX(1);}
  100%{top:92%;opacity:0;transform:scaleX(.4);}
}

/* --- Pulso de luz, más contenido que en la portada --- */
.hero-pagina .fa-pulso{
  position:absolute;left:50%;top:50%;
  width:min(110vw,1200px);height:min(110vw,1200px);
  margin-left:calc(min(110vw,1200px) / -2);
  margin-top:calc(min(110vw,1200px) / -2);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(84,180,228,.16) 0%,
    rgba(84,180,228,.05) 38%,
    transparent 64%);
  animation:fa-latido 7s ease-in-out infinite;
  will-change:transform,opacity;
}

/* --- El texto siempre legible sobre el movimiento --- */
.hero-pagina .contenedor{z-index:4;}
.hero-pagina h1,.hero-pagina .entradilla{
  text-shadow:0 2px 20px rgba(6,32,50,.5);
}

/* Móvil: se aligera igual que la portada */
@media (max-width:640px){
  .fondo-pagina .fa-plano{display:none;}
  .fondo-pagina .fa-aurora3{display:none;}
  .fondo-pagina .fa-particulas{opacity:.6;}
  .fondo-pagina .fa-aurora{filter:blur(42px);}
}

/* Menos movimiento: todo quieto */
@media (prefers-reduced-motion:reduce){
  .fondo-pagina::before,.fondo-pagina::after{animation:none;opacity:0;}
  .hero-pagina .fa-pulso{animation:none;opacity:.45;}
  .fondo-pagina .fa-plano-trazo path{animation:none;stroke-dashoffset:0;}
}

/* ====================================================================
   v3.7.0 — MEJORAS: IMPRESIÓN, ACCESIBILIDAD Y RENDIMIENTO
   ==================================================================== */

/* --------------------------------------------------------------------
   1. HOJA DE IMPRESIÓN
   Un administrador de fincas imprimirá la página de acreditaciones para
   llevarla a la junta de propietarios. Debe salir limpia y con los
   datos de contacto visibles.
   -------------------------------------------------------------------- */
@media print{
  /* Fuera todo lo que no aporta en papel */
  header.barra,.cr,.subir,.progreso,.cookies,.fondo-anim,
  .cta-franja,.resenas-qr,.mapa,.abrir-menu,.saltar{display:none!important;}

  body{background:#fff;color:#000;font-size:11.5pt;line-height:1.5;}
  .portada,.hero-pagina{background:#fff!important;color:#000;padding:0 0 12pt;}
  .portada h1,.hero-pagina h1{color:#000;text-shadow:none;font-size:22pt;}
  .portada .entradilla,.hero-pagina .entradilla{color:#333;}
  .portada .cota,.hero-pagina .cota{color:#555;}

  .presupuesto,.bloque-form{background:#fff!important;color:#000;}
  .campo label,.aviso-basico,.aviso-basico dt,.datos-contacto,.datos-contacto .et{color:#000;}
  .aviso-basico{background:#fff;border:1px solid #999;}

  .servicios,.ficha,.resumen{page-break-inside:avoid;}
  .servicio,.ficha .fila,.obra{page-break-inside:avoid;border-color:#999;}
  h1,h2,h3{page-break-after:avoid;}

  /* Las direcciones web se imprimen junto al enlace */
  .prosa a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}

  /* Pie de página con los datos de la empresa en cada hoja */
  footer.pie{background:#fff!important;color:#000;border-top:1px solid #999;padding:12pt 0 0;}
  footer.pie a,footer.pie h4{color:#000;}
  .pie-marca img{filter:grayscale(1);}
}

/* --------------------------------------------------------------------
   2. ACCESIBILIDAD
   -------------------------------------------------------------------- */

/* Foco siempre visible y con contraste suficiente, también en oscuro */
:focus-visible{
  outline:3px solid var(--azul-claro);
  outline-offset:3px;
  border-radius:2px;
}
.portada :focus-visible,.hero-pagina :focus-visible,
.bloque-form :focus-visible,footer.pie :focus-visible{
  outline-color:#fff;
}

/* Si el sistema pide más contraste, se refuerzan bordes y textos */
@media (prefers-contrast:more){
  body{color:#000;}
  .servicio p,.resumen .tarjeta p,.obra p,.prosa > p,.intro-seccion{color:#33424D;}
  .linea,.servicio,.resumen .tarjeta,.obra,.ficha .fila{border-color:#7C99AC;}
  .btn{border-width:3px;}
  .entradilla{color:#EAF4FB;}
}

/* Área táctil mínima cómoda en móvil */
@media (max-width:640px){
  .menu a,.menu li a{min-height:48px;display:flex;align-items:center;}
  footer.pie li a{display:inline-block;padding-block:4px;}
}

/* --------------------------------------------------------------------
   3. RENDIMIENTO
   El navegador no dibuja las secciones que quedan fuera de pantalla,
   lo que acelera la carga en páginas largas como Servicios.
   -------------------------------------------------------------------- */
.servicios,.obras,.resenas,.ficha{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* Reserva de espacio para las imágenes: evita que la página dé saltos
   mientras cargan */
.obra-foto,.servicio-foto{contain:layout paint;}

/* ====================================================================
   v3.8.0 — AVISO DE COOKIES CON PRESENTACIÓN PROFESIONAL
   ==================================================================== */

.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:130;
  max-width:520px;margin-inline:auto;padding:0;
  background:var(--papel);
  border:1px solid var(--linea);
  border-top:3px solid var(--azul);
  box-shadow:0 18px 50px rgba(12,42,59,.26);
  overflow:hidden;
  animation:ck-entrar .34s cubic-bezier(.2,.7,.3,1);
}
@keyframes ck-entrar{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}

.cookies-cabecera{
  display:flex;align-items:center;gap:12px;
  padding:20px 22px 0;
}
.cookies-icono{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tinte);color:var(--azul-fuerte);
}
.cookies h3{
  margin:0;font-size:19px;letter-spacing:.02em;color:var(--tinta);
}

.cookies > p{
  margin:12px 0 0;padding:0 22px;
  font-size:14.5px;line-height:1.6;color:var(--gris);
}

.cookies .botones{
  display:flex;flex-wrap:wrap;gap:9px;
  padding:18px 22px;
}
.cookies .btn{
  font-size:13.5px;padding:12px 18px;flex:1 1 auto;text-align:center;
  letter-spacing:.05em;
}
.cookies .btn-solido{background:var(--azul-fuerte);border-color:var(--azul-fuerte);color:#fff;}
.cookies .btn-linea{color:var(--tinta);border-color:var(--linea);}
.cookies .btn-linea:hover{border-color:var(--azul-fuerte);color:var(--azul-fuerte);background:var(--tinte);}

/* --- Panel de detalle --- */
.panel-cookies{
  padding:0 22px 4px;margin:0;
  border-top:1px solid var(--linea);
  background:#FBFDFF;
}
.panel-cookies[hidden]{display:none;}
.panel-cookies-intro{
  margin:18px 0 12px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gris);
}

/* Ficha de la cookie, en filas de etiqueta y valor */
.ck-ficha{border-top:1px solid var(--linea);}
.ck-fila{
  display:grid;grid-template-columns:88px 1fr;gap:4px 14px;
  padding:11px 0;border-bottom:1px solid var(--linea);
  align-items:start;
}
.ck-et{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--gris);padding-top:2px;
}
.ck-val{font-size:14px;line-height:1.5;color:var(--tinta);}
.ck-val code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;background:var(--tinte);padding:2px 7px;
  border-radius:3px;color:var(--azul-fuerte);
}
.ck-marca{
  display:inline-block;margin-top:5px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  background:#E7F6EC;color:#0F7B3D;padding:3px 9px;border-radius:3px;
}

.panel-cookies-nota{
  margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--gris);
}
.panel-cookies .botones{padding:16px 0 18px;}
.panel-cookies .btn{flex:0 0 auto;}

/* --- Pie con los enlaces legales --- */
.cookies-pie{
  margin:0;padding:13px 22px;
  background:var(--tinte);border-top:1px solid var(--linea);
  font-size:12.5px;color:var(--gris);
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
}
.cookies-pie a{color:var(--azul-fuerte);text-decoration:none;font-weight:600;}
.cookies-pie a:hover{text-decoration:underline;}

@media (max-width:520px){
  .cookies{left:10px;right:10px;bottom:10px;max-height:88vh;overflow-y:auto;}
  .cookies .btn{flex:1 1 100%;}
  .ck-fila{grid-template-columns:1fr;gap:2px;}
}

@media (prefers-reduced-motion:reduce){
  .cookies{animation:none;}
}

/* ====================================================================
   v3.9.0 — SELLOS OFICIALES EN LA PÁGINA DE ACREDITACIONES
   --------------------------------------------------------------------
   Los logotipos llegan como JPG con fondo blanco. La mezcla "multiply"
   los integra con el fondo de la página en lugar de dejar un recuadro
   blanco recortado alrededor.
   ==================================================================== */

/* --- Banda superior de sellos --- */
.sellos-fila{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  align-items:end;
  gap:clamp(20px,3vw,40px);
}
.sello{
  justify-content:flex-end;
  padding:18px 16px 0;
}
.sello img{
  max-height:72px;width:auto;max-width:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.sello figcaption{
  max-width:24ch;font-size:12.5px;color:var(--gris);
  padding-top:12px;border-top:1px solid var(--linea);
  width:100%;
}

/* --- Sello dentro de cada fila de la ficha --- */
.ficha .fila.con-sello{
  grid-template-columns:96px 1fr auto;
  gap:10px 26px;
  align-items:center;
}
.fila-sello{
  display:flex;align-items:center;justify-content:center;
  min-height:54px;
}
.fila-sello img{
  max-width:96px;max-height:54px;width:auto;height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform var(--transicion);
}
.ficha .fila:hover .fila-sello img{transform:scale(1.06);}

/* Las filas sin sello se alinean con las que sí lo tienen */
.ficha .fila:not(.con-sello) .concepto{padding-left:calc(96px + 26px);}

@media (max-width:760px){
  .ficha .fila.con-sello{grid-template-columns:72px 1fr;}
  .ficha .fila.con-sello .dato{grid-column:1 / -1;text-align:left;padding-left:calc(72px + 26px);}
  .fila-sello img{max-width:72px;max-height:44px;}
  .ficha .fila:not(.con-sello) .concepto{padding-left:calc(72px + 26px);}
}
@media (max-width:520px){
  .ficha .fila.con-sello{grid-template-columns:1fr;}
  .ficha .fila.con-sello .dato,
  .ficha .fila:not(.con-sello) .concepto{padding-left:0;}
  .fila-sello{justify-content:flex-start;margin-bottom:6px;}
}

/* En impresión, los sellos con sus colores reales */
@media print{
  .sello img,.fila-sello img{mix-blend-mode:normal;}
  .sellos{display:block!important;}
}

/* ====================================================================
   v4.0.0 — CARRUSEL DE SELLOS (estilo patrocinadores)
   --------------------------------------------------------------------
   Los logotipos se desplazan en bucle continuo. El truco: la cinta
   contiene dos tandas idénticas y se desplaza exactamente un 50%, de
   modo que al reiniciarse el salto es imperceptible.
   ==================================================================== */

.sellos-carrusel .sellos-pista{
  position:relative;
  overflow:hidden;
  padding-block:6px 4px;
  /* Los sellos se desvanecen en los bordes en lugar de cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}

.sellos-cinta{
  display:flex;
  align-items:flex-end;
  gap:clamp(34px,5vw,72px);
  width:max-content;
  animation:sellos-desfilar var(--sellos-vel,32s) linear infinite;
  will-change:transform;
}

@keyframes sellos-desfilar{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* Al pasar el ratón se detiene, para poder leer un sello concreto */
.sellos-carrusel .sellos-pista:hover .sellos-cinta,
.sellos-carrusel .sellos-pista:focus-within .sellos-cinta{
  animation-play-state:paused;
}

/* Cada sello dentro de la cinta */
.sellos-cinta .sello{
  flex:0 0 auto;
  width:clamp(150px,17vw,210px);
  padding:0;
  margin:0;
  text-align:center;
  align-items:center;
  gap:10px;
}
.sellos-cinta .sello img{
  max-height:66px;
  filter:grayscale(1);
  opacity:.75;
  transition:filter .35s ease,opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
/* Recuperan su color al pasar por encima: el gesto habitual en bandas
   de patrocinadores, que además unifica el aspecto en reposo */
.sellos-cinta .sello:hover img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.06);
}
.sellos-cinta .sello figcaption{
  border-top:0;
  padding-top:0;
  font-size:12px;
  line-height:1.4;
  max-width:22ch;
  color:var(--gris);
}

/* Sobre fondo oscuro, los sellos se aclaran para no ensuciarse */
.presupuesto .sellos-cinta .sello img,
.bloque-form .sellos-cinta .sello img,
.portada .sellos-cinta .sello img{
  mix-blend-mode:normal;
  filter:grayscale(1) brightness(1.9);
}
.presupuesto .sellos-cinta .sello:hover img,
.bloque-form .sellos-cinta .sello:hover img,
.portada .sellos-cinta .sello:hover img{filter:grayscale(0) brightness(1);}

@media (max-width:640px){
  .sellos-cinta{gap:34px;}
  .sellos-cinta .sello{width:140px;}
  .sellos-cinta .sello img{max-height:54px;}
  .sellos-cinta .sello figcaption{font-size:11.5px;}
}

/* Sin movimiento: la cinta se detiene y se muestra como una fila normal */
@media (prefers-reduced-motion:reduce){
  .sellos-cinta{
    animation:none;
    flex-wrap:wrap;
    width:100%;
    justify-content:center;
  }
  .sellos-carrusel .sellos-pista{
    -webkit-mask-image:none;mask-image:none;
  }
  /* La segunda tanda es una copia: sin animación, sobra */
  .sellos-cinta .sello[aria-hidden="true"]{display:none;}
  .sellos-cinta .sello img{filter:grayscale(0);opacity:1;}
}

/* En impresión: sin carrusel, todos visibles y a color */
@media print{
  .sellos-cinta{animation:none;flex-wrap:wrap;width:100%;}
  .sellos-carrusel .sellos-pista{-webkit-mask-image:none;mask-image:none;overflow:visible;}
  .sellos-cinta .sello[aria-hidden="true"]{display:none;}
  .sellos-cinta .sello img{filter:none;opacity:1;}
}

/* ====================================================================
   v4.3.0 — CORRECCIÓN DE DESPLAZAMIENTO HORIZONTAL
   --------------------------------------------------------------------
   PROBLEMA: la página se podía desplazar en horizontal y el titular
   quedaba cortado por la izquierda.

   CAUSAS:
   1. "overflow-x:hidden" en <body> convierte al cuerpo en contenedor de
      desplazamiento, lo que ROMPE la cabecera fija (position:sticky) y
      en algunos navegadores móviles no impide el desplazamiento lateral.
      Se sustituye por "overflow-x:clip" aplicado solo a <html>, que
      recorta sin crear contenedor de desplazamiento.
   2. Los elementos de rejilla y flex no encogen por debajo de su
      contenido salvo que se les indique (min-width:0). Un titular muy
      largo podía por tanto ensanchar la página.
   ==================================================================== */

/* CORRECCIÓN v4.5.0 — muy importante:
   "overflow-x" se aplica ÚNICAMENTE a <html>. Al ponerlo en <html>, el
   navegador lo traslada al área de visualización y no crea ningún contexto
   de recorte, de modo que los elementos fijos (botón de contacto, volver
   arriba, barra de progreso y aviso de cookies) siguen viéndose.

   Ponerlo en <body> era el error: tanto "hidden" como "clip" en el cuerpo
   recortan los elementos con position:fixed y hacen que desaparezcan de la
   esquina. */
html{
  overflow-x:hidden;
  max-width:100%;
}
body{
  max-width:100%;
  /* Sin overflow ni position aquí: recortaría los elementos fijos. */
}

/* Los contenedores de rejilla y flex deben poder encoger */
.contenedor,
.prosa,
.servicios,.resumen,.ficha,.obras,.cifras,
.rejilla-form,.cta-caja,.resenas-caja,.pie-rejilla,
.servicio,.tarjeta,.obra,.garantia,
.hero-pagina .contenedor,.portada .contenedor{
  min-width:0;
}

/* Nada dentro del contenido puede sobresalir del ancho disponible */
.prosa img,.prosa video,.prosa iframe,.prosa pre,
.servicio img,.obra img,.sello img{
  max-width:100%;
}

/* Titulares: se parten con elegancia en lugar de ensanchar la página */
h1,h2,h3{
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}
.portada h1,.hero-pagina h1{
  max-width:100%;
  text-wrap:balance;
}
/* En pantallas estrechas se anulan los saltos de línea forzados del
   titular, que son los que provocaban líneas demasiado largas */
@media (max-width:820px){
  .portada h1 br{display:none;}
  .portada h1 em{display:inline;}
}

/* Las capas del fondo nunca deben generar barra de desplazamiento */
.portada,.hero-pagina{max-width:100%;}
.fondo-anim{max-width:100%;overflow:hidden;}

/* Las tablas largas se desplazan dentro de su caja, no en la página */
.prosa .wp-block-table,.prosa table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.prosa .wp-block-table > table{display:table;width:100%;}


/* ====================================================================
   v4.5.0 — GARANTIZAR LA VISIBILIDAD DE LOS ELEMENTOS DE ESQUINA
   ==================================================================== */

/* Botón de contacto: siempre visible en la esquina inferior derecha */
.cr{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:120;
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.cr-boton{
  display:inline-flex!important;
  visibility:visible;
}

/* Volver arriba, en la esquina opuesta para no estorbar */
.subir{position:fixed;left:20px;bottom:20px;z-index:115;}

/* El aviso de cookies, por encima de ambos */
.cookies{z-index:140;}

/* Barra de progreso, pegada al borde superior */
.progreso{position:fixed;top:0;left:0;right:0;z-index:200;}

/* Mientras el aviso de cookies está abierto, el botón sube para no taparse */
.cr-con-cookies{bottom:calc(20px + 230px);}
@media (max-width:760px){
  .cr-con-cookies{bottom:calc(16px + 320px);}
}

/* En móvil, el botón se reduce a un círculo pero sigue en su sitio */
@media (max-width:520px){
  .cr{right:16px;bottom:16px;}
  .subir{left:16px;bottom:16px;}
}

/* Al imprimir sí desaparecen: en papel no sirven de nada */
@media print{
  .cr,.subir,.progreso{display:none!important;}
}

/* ====================================================================
   v4.7.0 — AVISO DE COOKIES: VISIBILIDAD DETERMINISTA
   --------------------------------------------------------------------
   A lo largo de las versiones se acumularon varias reglas ".cookies"
   que competían entre sí. El aviso podía quedar oculto a la vista pero
   presente en la página, interceptando los clics del botón de contacto
   que hay debajo.

   Solución: el aviso está OCULTO por defecto y solo se muestra cuando el
   JavaScript le añade la clase ".ck-visible". Estas reglas van al final
   del archivo, así que prevalecen sobre todas las anteriores.
   ==================================================================== */

.cookies{
  display:none;
  pointer-events:none;
}
.cookies.ck-visible{
  display:block;
  pointer-events:auto;
}
/* Doble seguridad: con el atributo hidden nunca se muestra */
.cookies[hidden]{display:none!important;pointer-events:none!important;}

/* --------------------------------------------------------------------
   BOTÓN DE CONTACTO: SIEMPRE OPERATIVO
   Se aparta solo cuando el aviso está visible y podría taparlo, y se
   controla desde el cuerpo de la página, no observando al aviso.
   -------------------------------------------------------------------- */
.cr{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:150;              /* por encima del aviso, nunca queda bloqueado */
  pointer-events:auto;
  transition:bottom .3s cubic-bezier(.2,.7,.3,1);
}
.cr-boton{pointer-events:auto;}

/* En pantallas anchas el aviso está centrado y no llega a la esquina:
   el botón no necesita moverse. */
@media (min-width:900px){
  body.con-aviso-cookies .cr{bottom:20px;}
}

/* En pantallas estrechas el aviso ocupa todo el ancho: el botón sube. */
@media (max-width:899px){
  body.con-aviso-cookies .cr{bottom:calc(16px + 62vh);}
}

/* El aviso queda por debajo del botón de contacto */
.cookies{z-index:140;}

/* Volver arriba, en la esquina contraria */
.subir{position:fixed;left:20px;bottom:20px;z-index:115;}
body.con-aviso-cookies .subir{opacity:0;visibility:hidden;}