/* ============================================================================
   FACHADAS LLIÇÀ — Rehabilitación y revestimiento de fachadas
   Identidad de marca: ver marca/BRAND.md (carpeta hermana de esta, fuera de web/). Base negra, acento naranja #E25904.
   Tipografía Archivo. Los grises derivan del negro corporativo; no hay más colores.
   Los tokens editables están en :root. Nada de librerías externas.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Negro corporativo y grises derivados — base */
  --ink-950:#000000;
  --ink-900:#0A0A0A;
  --ink-850:#111111;
  --ink-800:#161616;
  --ink-700:#1F1F1F;
  --ink-600:#2B2B2B;
  --ink-500:#3D3D3D;
  --ink-400:#7E7E7E;   /* 5,17 de contraste sobre negro (WCAG AA) */
  --ink-300:#8A8A8A;
  --ink-200:#B0B0B0;
  --ink-100:#D6D6D6;

  /* Blanco y grises claros */
  --cal-50:#FFFFFF;
  --cal-100:#F4F4F4;
  --cal-200:#E4E4E4;
  --cal-300:#C4C4C4;
  --cal-400:#8A8A8A;   /* 6,08 de contraste sobre negro (WCAG AA) */

  /* Acento principal — naranja corporativo #E25904 (único acento de marca) */
  --terra-700:#963802;
  --terra-600:#B94502;
  --terra-500:#E25904;
  --terra-400:#F4762B;
  --terra-300:#F89C6A;

  /* Sin acento secundario: la marca tiene tres colores. Estos tonos quedan neutros. */
  --ochre-600:#8A8A8A;
  --ochre-500:#A6A6A6;
  --ochre-400:#C4C4C4;
  --ochre-200:#E4E4E4;

  /* Roles */
  --bg:var(--ink-950);
  --fg:var(--cal-100);
  --muted:var(--ink-300);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);
  --accent:var(--terra-500);

  /* Tipografía */
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Métrica */
  --shell:1420px;
  --pad:clamp(20px,4.2vw,64px);
  --nav-h:78px;
  --rail:clamp(0px,3vw,58px);

  /* Curvas */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.62,.05,.2,1);
}

/* ------------------------------------------------------------ 2. RESET/BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
/* El atributo hidden lo aplica el navegador con `display:none`, y cualquier
   `display` que pongamos nosotros lo anula sin avisar. Con esto, `hidden`
   significa oculto siempre. */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--terra-500);color:#fff}

:focus-visible{
  outline:2px solid var(--ochre-400);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed;left:14px;top:-70px;z-index:200;
  background:var(--terra-500);color:#fff;
  padding:12px 18px;font:500 13px/1 var(--mono);letter-spacing:.06em;
  transition:top .25s var(--ease);
}
.skip:focus{top:14px}

/* -------------------------------------------------------- 3. TIPOGRAFÍA UTIL */
.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.shell--wide{max-width:1720px}

.eyebrow{
  display:flex;align-items:center;gap:14px;
  font:500 clamp(10.5px,.62vw,12px)/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-300);
}
.eyebrow b{color:var(--terra-400);font-weight:500}
.eyebrow::after{
  content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{display:none}

.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--display);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.028em;
  font-stretch:104%;
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.15rem,5.1vw,4.85rem);line-height:.98;letter-spacing:-.034em}
.h-lg{font-size:clamp(2.2rem,4.6vw,4.1rem)}
.h-md{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.04}
.h-sm{font-size:clamp(1.15rem,1.4vw,1.42rem);line-height:1.12;letter-spacing:-.018em}

.lead{
  font-size:clamp(1.02rem,1.15vw,1.24rem);
  line-height:1.6;color:var(--ink-200);
  max-width:60ch;text-wrap:pretty;
}
.muted{color:var(--muted)}
.tag{
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ochre-400);
}
.accent{color:var(--terra-400)}

/* Titular con revelado por líneas */
.lines{display:block}
.lines .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lines .ln > i{display:block;font-style:normal;transform:translateY(112%);transition:transform 1.05s var(--ease) var(--d,0s)}
.is-in .lines .ln > i,.lines.is-in .ln > i{transform:translateY(0)}

/* --------------------------------------------------------------- 4. BOTONES */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;
  font:500 13.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn > span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}

.btn--solid{background:var(--terra-500);color:#fff;border-color:var(--terra-500)}
.btn--solid::before{background:var(--cal-50)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--ink-950);border-color:var(--cal-50)}

.btn--ghost{border-color:var(--line);color:var(--fg)}
.btn--ghost::before{background:var(--cal-50)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink-950);border-color:var(--cal-50)}

/* Fondo sólido, no solo borde. Este botón vive sobre la banda de terracota
   (--terra-600) y con el texto oscuro directamente sobre ese color se quedaba
   en 3,14 de contraste. No es cuestión de oscurecer más el texto: ni el negro
   puro llega a 4,5 sobre terracota. Con el botón en cal y el texto oscuro pasa
   de sobra, y además se lee como lo que es: la llamada principal. */
.btn--dark{background:var(--cal-50);border-color:var(--cal-50);color:var(--ink-950)}
.btn--dark::before{background:var(--ink-900)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--cal-50);border-color:var(--ink-900)}

.btn--sm{padding:13px 20px;font-size:12px}
.btn__ar{width:16px;height:16px;position:relative;z-index:2;transition:transform .45s var(--ease)}
.btn:hover .btn__ar{transform:translate(4px,-4px)}

.link{
  display:inline-flex;align-items:center;gap:10px;
  font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--terra-400);padding-bottom:6px;
  border-bottom:1px solid rgba(199,102,61,.35);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.link:hover{color:var(--cal-50);border-color:var(--cal-50);gap:16px}

/* --------------------------------------------------- 5. HUECOS DE IMAGEN .ph */
/* Sustituir por <img> dentro del mismo contenedor: el andamiaje se oculta solo. */
.ph{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--ratio,4/3);
  background:
    repeating-linear-gradient(134deg,rgba(255,255,255,.030) 0 1.5px,transparent 1.5px 10px),
    linear-gradient(158deg,var(--ink-700) 0%,var(--ink-850) 62%,var(--ink-900) 100%);
  border:1px solid var(--line);
  color:var(--ink-200);
  isolation:isolate;
}
.ph::before{
  content:"";position:absolute;inset:12px;
  border:1px dashed rgba(255,255,255,.12);
  pointer-events:none;
}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--terra-500) 0 34px,transparent 34px) 12px 12px/100% 1px no-repeat,
    linear-gradient(180deg,var(--terra-500) 0 34px,transparent 34px) 12px 12px/1px 100% no-repeat;
  opacity:.85;
}
.ph__tag{
  position:absolute;left:0;bottom:0;right:0;z-index:2;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding:26px 26px;
  font:500 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-200);
}
.ph__tag b{font-weight:500;color:var(--cal-100)}
.ph__tag span{color:var(--ink-400)}
.ph__ico{
  position:absolute;top:26px;right:26px;width:26px;height:26px;z-index:2;
  color:var(--ink-500);
}
.ph > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform 1.4s var(--ease),filter 1.4s var(--ease);
}
.ph:has(img){background:var(--ink-900)}
.ph:has(img)::before,.ph:has(img)::after,.ph:has(img) .ph__tag,.ph:has(img) .ph__ico{display:none}

/* Variante clara (sobre fondos de cal) */
.ph--light{
  background:
    repeating-linear-gradient(134deg,rgba(11,13,16,.045) 0 1.5px,transparent 1.5px 10px),
    linear-gradient(158deg,var(--cal-200) 0%,var(--cal-100) 70%);
  border-color:rgba(11,13,16,.14);
  color:var(--ink-500);
}
.ph--light::before{border-color:rgba(11,13,16,.16)}
.ph--light .ph__tag{color:var(--ink-500)}
.ph--light .ph__tag b{color:var(--ink-800)}
.ph--light .ph__tag span{color:var(--cal-400)}
.ph--light .ph__ico{color:var(--cal-400)}

/* ------------------------------------------------- 6. TEXTURA Y DECORACIONES */
/* Grano estático: la textura suma, el bucle infinito no. Antes se desplazaba
   con una animación permanente a pantalla completa; ahora está quieto, así que
   ya no necesita desbordar el viewport. */
.grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Barra de progreso de lectura */
.progress{
  position:fixed;left:0;top:0;right:0;height:2px;z-index:120;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--terra-600),var(--ochre-400));
  transform:scaleX(0);transform-origin:left;
}

/* Regla lateral tipo escalímetro (solo escritorio) */
.rail{
  position:fixed;left:calc(var(--pad) * .42);top:0;bottom:0;z-index:60;
  width:var(--rail);display:none;pointer-events:none;
  align-items:center;justify-content:center;
}
.rail__line{
  position:absolute;top:14vh;bottom:14vh;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-soft) 12%,var(--line-soft) 88%,transparent);
}
.rail__ticks{position:absolute;top:14vh;bottom:14vh;left:50%;width:9px}
.rail__ticks i{
  position:absolute;left:0;width:9px;height:1px;background:rgba(255,255,255,.16);
}
.rail__fill{
  position:absolute;top:14vh;left:50%;width:1px;height:0;
  background:linear-gradient(180deg,var(--terra-500),var(--ochre-500));
}
.rail__idx{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(14vh - 34px);
  font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--terra-400);
}
/* La regla solo numera secciones que están en el menú. En el hero, el
   manifiesto o la llamada final no hay número que mostrar: se apaga en vez
   de dejar colgado el de la sección anterior. */
.rail__idx,.rail__label{transition:opacity .4s var(--ease)}
.rail.is-off .rail__idx,.rail.is-off .rail__label{opacity:0}
.rail__label{
  position:absolute;left:50%;bottom:14vh;
  transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font:500 10.5px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-400);white-space:nowrap;
  padding-bottom:16px;
}

/* Separador estratigráfico entre secciones */
.strata{display:flex;flex-direction:column;gap:3px;padding-block:2px}
.strata i{display:block;height:1px;background:var(--line-soft)}
.strata i:nth-child(1){background:rgba(180,82,46,.30)}
.strata i:nth-child(2){opacity:.7}
.strata i:nth-child(3){opacity:.4}

/* ------------------------------------------------------------ 8. NAVEGACIÓN */
/* La cabecera es fija, así que sin esto toda sección a la que llega un enlace
   del menú aterriza DETRÁS de ella y su título queda tapado. Pasaba en las
   siete anclas, en escritorio y en móvil. El +18 es aire para que el rótulo no
   quede pegado al borde de la cabecera. */
section[id],
main[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}

.nav{
  position:fixed;left:0;right:0;top:0;z-index:110;
  height:var(--nav-h);display:flex;align-items:center;
  transition:height .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:64px;
  background:rgba(11,13,16,.78);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{transform:translateY(-100%);transition:transform .5s var(--ease),background-color .45s var(--ease)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}

/* LOGOTIPO — ver marca/BRAND.md (fuera de web/). Nombre en minúsculas + barra naranja debajo.
   La barra mide EXACTAMENTE el ancho del nombre: eso lo da el inline-flex en
   columna con align-items:stretch. No ponerle un ancho fijo nunca.
   Proporciones: alto de barra = 0,13 x cuerpo; separación = 0,19 x cuerpo. */
.brand{display:flex;align-items:center;text-decoration:none}
.brand__logo{display:inline-flex;flex-direction:column;align-items:stretch}
.brand__word{
  font-family:var(--display);font-weight:600;font-size:22px;
  letter-spacing:-.03em;font-stretch:100%;color:var(--cal-50);
  line-height:1;white-space:nowrap;
}
.brand__bar{
  height:2.9px;background:var(--terra-500);margin-top:4.2px;
  transition:background-color .45s var(--ease);
}
.brand:hover .brand__bar{background:var(--terra-400)}
/* Bajo el logotipo hubo un subtítulo, «REHABILITACIÓN DE FACHADAS». Retirado en
   escritorio y en móvil: la cabecera es la marca, y lo que hace la empresa ya lo
   dice el titular de cada página. En móvil además no cabía y se partía en dos
   líneas. Si vuelve algún día, tendrá que caber en 412px junto al botón y la
   hamburguesa. */

/* nowrap: si el menú se queda sin sitio, que se note al medir y no partiendo un
   rótulo por la mitad. El plegado a hamburguesa se encarga del caso estrecho. */
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px)}
.nav__links a{white-space:nowrap}
.nav__links a{
  position:relative;
  font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-200);padding:8px 0;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--terra-400);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--cal-50)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__end{display:flex;align-items:center;gap:16px}
/* flex:none en los dos hijos: sin él se encogían en silencio en vez de avisar.
   A 1201px el teléfono quedaba en 47px de ancho y partía «93 000 00 00» en
   cuatro líneas, y el botón en dos. Ahora, si algún día no cabe, se desborda
   y se ve — que es un fallo que se detecta, no uno que se disimula. */
.nav__end > *{flex:none;white-space:nowrap}
.nav__tel{
  display:flex;align-items:center;gap:9px;
  font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-100);
  transition:color .3s var(--ease);
}
.nav__tel:hover{color:var(--terra-300)}
.nav__tel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}

/* flex:none es obligatorio. Sin él, como hijo flexible de .nav__end el botón se
   encogía a 30px en móvil: las dos barras del icono (posicionadas a left:11px y
   22px de ancho) se salían por la derecha y las recortaba el overflow-x del
   body, y el área táctil se quedaba por debajo de los 44px de mínimo. */
.burger{display:none;width:44px;height:44px;flex:none;position:relative;margin-right:-10px}
/* En móvil el margen negativo la pegaba al borde de la pantalla: el icono
   quedaba a 2px del filo y se leía como cortado. Se le devuelve su sitio. */
@media (max-width:560px){
  .burger{margin-right:-4px}
}
/* Por debajo de 400px la cabecera no da de sí: marca, botón de visita técnica y
   hamburguesa piden 33px más de los que hay, y la hamburguesa se salía de la
   pantalla. Se retira el botón, que además es lo primero que aparece al abrir
   el menú — no se pierde la llamada a la acción, se mueve un toque. */
@media (max-width:400px){
  .nav__end .btn--sm{display:none}
}
.burger i{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--cal-50);
  transition:transform .45s var(--ease),opacity .3s;
}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:105;
  background:var(--ink-900);
  padding:calc(var(--nav-h) + 40px) var(--pad) 40px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease-io);
  visibility:hidden;
}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible}
/* El tamaño iba en 9vw y en un móvil de 412px daba 37px: «Preguntas
   frecuentes» se partía en dos líneas, los números de 12px quedaban tres veces
   más pequeños que su etiqueta y el cajón se salía 110px de la pantalla.
   Con 6.6vw se queda en ~27px: nada se parte, cabe entero y el número guarda
   proporción con la palabra. El área táctil la garantiza el min-height, no el
   tamaño de letra. */
.drawer__links{display:grid;gap:2px}
.drawer__links a{
  display:flex;align-items:baseline;gap:14px;min-height:44px;
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,6.6vw,2.1rem);
  letter-spacing:-.028em;line-height:1.18;color:var(--cal-50);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s);
}
.drawer__links a em{
  font:500 13px/1 var(--mono);font-style:normal;color:var(--terra-400);letter-spacing:.1em;
  min-width:22px;
}
.drawer.is-open .drawer__links a{opacity:1;transform:none}

/* Páginas que cuelgan de un apartado, igual que en los desplegables del menú de
   escritorio. Antes vivían en una tira de chips al final del cajón, separadas de
   su apartado: había que saber que «SATE» pertenecía a «Servicios» aunque
   estuvieran a media pantalla de distancia. */
.drawer__sub{
  display:grid;gap:0;
  margin:2px 0 8px 36px;
  border-left:1px solid var(--line);
}
.drawer__sub a{
  display:flex;align-items:center;min-height:38px;
  padding:2px 0 2px 16px;
  font:500 13px/1.35 var(--mono);letter-spacing:.06em;
  color:var(--ink-200);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s),color .3s var(--ease);
}
.drawer__sub a:hover{color:var(--terra-400)}
.drawer__sub a[aria-current="page"]{color:var(--terra-400)}
.drawer.is-open .drawer__sub a{opacity:1;transform:none}
.drawer__foot{display:grid;gap:18px;border-top:1px solid var(--line);padding-top:26px}
.drawer__foot p{font:500 12px/1.7 var(--mono);letter-spacing:.08em;color:var(--ink-300);text-transform:uppercase}

/* ------------------------------------------------------------------ 9. HERO */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:-8% 0 -8%;z-index:-2;will-change:transform}
.hero__bg .ph{width:100%;height:100%;aspect-ratio:auto;border:0}
.hero__bg .ph::before{inset:0;border:0}
.hero__bg .ph::after{display:none}
.hero__bg .ph__tag{
  bottom:auto;top:calc(var(--nav-h) + 34px);left:auto;right:var(--pad);
  padding:0;color:var(--ink-500);
  justify-content:flex-end;text-align:right;max-width:min(46ch,42vw);
}
.hero__bg .ph__ico{top:calc(var(--nav-h) + 34px);right:var(--pad);display:none}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,13,16,.86) 0%,rgba(11,13,16,.42) 34%,rgba(11,13,16,.80) 74%,var(--ink-950) 100%),
    linear-gradient(96deg,rgba(11,13,16,.92) 0%,rgba(11,13,16,.55) 46%,rgba(11,13,16,.18) 100%);
}
.hero__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);
}

.hero__body{padding-bottom:clamp(34px,5vh,58px)}
/* El rótulo sobre el titular del hero se retiró: repetía algo dicho a menos de
   una pantalla, se pusiera lo que se pusiera. Sus reglas iban aquí. */
/* Los saltos del titular están escritos a mano en el HTML (.ln): sin
   max-width, para que ninguna línea se parta por su cuenta. */
.hero h1{margin-bottom:clamp(20px,3.2vh,32px);max-width:none}
.hero h1 em{font-style:normal;color:var(--terra-400)}
.hero__cols{
  display:grid;gap:clamp(26px,3.4vw,58px);
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:end;
}
.hero__lead{max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.hero__seal{
  display:flex;align-items:flex-start;gap:18px;
  padding:24px 26px;
  border:1px solid var(--line);
  background:rgba(20,24,29,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  max-width:420px;margin-left:auto;
}
.hero__seal svg{width:34px;height:34px;flex:none;color:var(--terra-400)}
.hero__seal p{font-size:.94rem;line-height:1.55;color:var(--ink-100)}
.hero__seal b{display:block;font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em;color:var(--cal-50);margin-bottom:5px}

/* Cifras del hero */
.figures{
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.figures li{
  padding:clamp(20px,2.4vw,30px) clamp(14px,1.8vw,26px);
  border-right:1px solid var(--line-soft);
}
.figures li:last-child{border-right:0}
.figures .n{
  display:flex;align-items:baseline;gap:2px;
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.9rem,3.3vw,3rem);line-height:1;letter-spacing:-.035em;
  color:var(--cal-50);
}
.figures .n i{font-style:normal;color:var(--terra-400)}
.figures .k{
  display:block;margin-top:10px;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-300);
}

/* -------------------------------------------------------- 10. SECCIÓN BASE */
.sec{position:relative;padding-block:clamp(76px,10.5vw,150px)}
.sec--light{background:var(--cal-50);color:var(--ink-900)}
.sec--light .eyebrow{color:var(--cal-400)}
.sec--light .eyebrow b{color:var(--terra-600)}
.sec--light .eyebrow::after{background:linear-gradient(90deg,rgba(11,13,16,.18),transparent)}
.sec--light .lead{color:var(--ink-500)}
.sec--light .muted{color:var(--ink-400)}
.sec--light .tag{color:var(--ochre-600)}
.sec--light .accent{color:var(--terra-600)}

.sec__head{
  display:grid;gap:clamp(22px,3vw,54px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
  margin-bottom:clamp(44px,5.5vw,80px);
}
.sec__head .eyebrow{margin-bottom:26px}
.sec__head p{max-width:44ch}

/* ------------------------------------------------- 12. INTRO / MANIFIESTO */
.manifesto{
  display:grid;gap:clamp(30px,4vw,70px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
}
.manifesto__art{position:relative}
.manifesto__art .ph{--ratio:4/5}
.manifesto__badge{
  position:absolute;right:-18px;bottom:-18px;
  width:clamp(120px,13vw,164px);height:clamp(120px,13vw,164px);
  display:grid;place-items:center;text-align:center;gap:2px;
  background:var(--terra-500);color:#fff;
  padding:14px;
}
.manifesto__badge b{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(2.1rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.04em;
}
.manifesto__badge span{font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.manifesto__txt h2{margin-bottom:28px;max-width:16ch}
.manifesto__txt h2 em{font-style:normal;color:var(--terra-500)}
.manifesto__txt p + p{margin-top:18px}
.manifesto__list{
  display:grid;gap:0;margin-top:36px;
  border-top:1px solid rgba(11,13,16,.12);
}
.manifesto__list li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid rgba(11,13,16,.12);
}
.manifesto__list em{
  font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--terra-600);
}
.manifesto__list b{font-weight:600;color:var(--ink-900)}
.manifesto__list p{font-size:.94rem;color:var(--ink-500);margin-top:3px}

/* ----------------------------------------------- 13. SERVICIOS (PILA STICKY) */
.stack{display:grid;gap:clamp(22px,2.6vw,34px)}
.svc{
  position:sticky;
  top:calc(var(--nav-h) + clamp(10px,2vh,24px) + (var(--i) * 16px));
  background:var(--ink-900);
  border:1px solid var(--line);
  overflow:hidden;
  transition:box-shadow .5s var(--ease);
}
.svc__in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  min-height:min(560px,64vh);
}
.svc__art{position:relative;overflow:hidden;border-right:1px solid var(--line)}
.svc__art .ph{position:absolute;inset:0;aspect-ratio:auto;border:0}
.svc__num{
  position:absolute;left:0;top:0;z-index:3;
  padding:22px 26px;
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:clamp(3.4rem,6vw,5.4rem);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(240,235,226,.42);
}
.svc__body{
  padding:clamp(30px,3.4vw,54px);
  display:flex;flex-direction:column;justify-content:center;gap:22px;
}
.svc__kicker{
  display:flex;align-items:center;gap:12px;
  font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ochre-400);
}
.svc__kicker::before{content:"";width:26px;height:1px;background:var(--ochre-500)}
.svc__body h3{max-width:16ch}
.svc__body > p{max-width:52ch;color:var(--ink-200)}
.svc__feats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:2px 26px;
  border-top:1px solid var(--line);padding-top:22px;
}
.svc__feats li{
  position:relative;padding:8px 0 8px 24px;
  font-size:.925rem;color:var(--ink-100);
}
.svc__feats li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:9px;height:1px;background:var(--terra-500);
}
.svc__foot{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between}
.svc__meta{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}

/* ------------------------------------------- 14. COMPARADOR ANTES / DESPUÉS */
.ba{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  --pos:50%;
  touch-action:pan-y;
  cursor:ew-resize;
}
.ba__layer{position:absolute;inset:0}
.ba__layer .ph{position:absolute;inset:0;aspect-ratio:auto;border:0}
.ba__layer--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__badge{
  position:absolute;top:22px;z-index:4;
  padding:9px 16px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  background:rgba(11,13,16,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);
}
.ba__badge--l{left:22px;color:var(--cal-100)}
.ba__badge--r{right:22px;color:var(--terra-300);border-color:rgba(199,102,61,.4)}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:5;
  width:1px;background:var(--cal-50);transform:translateX(-.5px);
  pointer-events:none;
}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:var(--cal-50);color:var(--ink-900);
  display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.ba__grip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.ba__range{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;appearance:none;background:none;
}
.ba__range::-webkit-slider-thumb{appearance:none;width:60px;height:100%}
.ba__range::-moz-range-thumb{width:60px;height:100%;border:0}
.ba__cap{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  margin-top:16px;
  font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
}

/* ------------------------------------------------------------- 15. OBRAS */
.works{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);margin-top:clamp(46px,6vw,84px);
}
.work{
  position:relative;background:var(--ink-950);
  padding:0;overflow:hidden;
  transition:background-color .5s var(--ease);
}
.work .ph{--ratio:4/3;border:0}
.work__body{padding:26px clamp(20px,2vw,30px) 30px}
.work__body h3{
  font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.25;
  letter-spacing:-.015em;margin-bottom:14px;
}
.work__meta{display:flex;flex-wrap:wrap;gap:6px 16px}
.work__meta li{
  font:500 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400);
}
.work__meta li:first-child{color:var(--ochre-400)}
.work::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--terra-500);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.work:hover{background:var(--ink-850)}
.work:hover::after{transform:scaleX(1)}
.work:hover .ph > img{transform:scale(1.05)}

/* --------------------------------------------------------- 16. VENTAJAS */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.4vw,20px);
}
.card{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(11,13,16,.13);
  background:#fff;
  padding:clamp(26px,2.4vw,36px);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .55s var(--ease),border-color .55s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(180,82,46,.10),transparent 62%);
  transition:opacity .5s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:rgba(180,82,46,.34)}
.card:hover::before{opacity:1}
.card__ico{
  width:42px;height:42px;color:var(--terra-500);
  fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:square;
}
.card h3{
  font-family:var(--display);font-weight:600;font-size:1.16rem;
  letter-spacing:-.018em;line-height:1.22;color:var(--ink-900);
}
.card p{font-size:.94rem;line-height:1.6;color:var(--ink-500)}
.card__n{
  position:absolute;top:clamp(20px,2vw,28px);right:clamp(20px,2vw,28px);
  font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--cal-400);
}

.card--hero{
  grid-column:span 2;grid-row:span 2;
  background:var(--ink-900);border-color:var(--ink-700);
  color:var(--cal-100);justify-content:space-between;gap:30px;
  padding:clamp(30px,3.2vw,50px);
}
.card--hero::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(199,102,61,.16),transparent 62%)}
.card--hero:hover{border-color:var(--terra-600)}
.card--hero h3{color:var(--cal-50);font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.06;max-width:15ch;font-weight:700}
.card--hero p{color:var(--ink-200);font-size:1rem;max-width:46ch}
.card--hero .card__n{color:var(--ink-500)}
.card--hero .card__ico{color:var(--terra-400);width:48px;height:48px}

.warranty{
  display:grid;gap:0;border-top:1px solid var(--ink-700);
}
.warranty li{
  display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--ink-700);
  font-size:.93rem;color:var(--ink-100);
}
.warranty svg{width:20px;height:20px;color:var(--terra-400);fill:none;stroke:currentColor;stroke-width:1.6;margin-top:2px}

.card--ochre{background:var(--ink-900);border-color:var(--ink-700);color:var(--cal-100)}
.card--ochre h3{color:var(--cal-50)}
.card--ochre p{color:var(--ink-200)}
.card--ochre .card__ico{color:var(--ochre-400)}
.card--ochre .card__n{color:var(--ink-500)}
.card--ochre::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(192,139,62,.16),transparent 62%)}

/* --------------------------------------------------------- 17. PROCESO */
.steps-wrap{position:relative}
.steps{position:relative;display:grid;gap:0}
.steps::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line-soft);
}
.steps__prog{
  position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(180deg,var(--terra-500),var(--ochre-500));
}
.step{
  position:relative;
  display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,50px);align-items:start;
  padding:clamp(26px,3vw,42px) 0 clamp(26px,3vw,42px) clamp(26px,3vw,46px);
  border-bottom:1px solid var(--line-soft);
}
.step:first-child{border-top:1px solid var(--line-soft)}
.step::before{
  content:"";position:absolute;left:-4px;top:calc(clamp(26px,3vw,42px) + .5em);
  width:9px;height:9px;background:var(--ink-950);
  border:1px solid var(--ink-500);transform:rotate(45deg);
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.step.is-in::before{background:var(--terra-500);border-color:var(--terra-500)}
.step__n{
  font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--terra-400);
  padding-top:.4em;
}
.step h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.24rem,1.9vw,1.7rem);letter-spacing:-.02em;line-height:1.1;
}
.step p{color:var(--ink-200);font-size:.97rem;padding-top:.25em}
.step__tag{
  display:inline-block;margin-top:14px;padding:6px 12px;
  border:1px solid var(--line);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ochre-400);
}

/* -------------------------------------------- 17b. BANDA DE ITE EN PORTADA */
/* Banda, no sección: menos alto vertical y sin numerar en la regla, porque en
   el menú la ITE es una página y no un ancla de la portada. */
.sec--band{padding-block:clamp(46px,5.5vw,80px)}
.itebar{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,3.6vw,60px);align-items:center;
}
.itebar h2{max-width:19ch;margin:20px 0 18px}
.itebar p{max-width:52ch;color:var(--ink-200)}
.itebar .link{margin-top:22px}
/* Las cifras van apiladas, no en tres columnas: en media anchura «Decret
   67/2015» se partía en dos líneas y descuadraba las tres. */
.itebar .facts{grid-template-columns:1fr}
.itebar .facts li{border-right:0;border-bottom:1px solid var(--line-soft)}
.itebar .facts li:last-child{border-bottom:0}
@media (max-width:900px){.itebar{grid-template-columns:1fr}}
@media (max-width:720px){
  .sec--band{padding-block:42px}
  .itebar .facts li{padding-block:15px}
  .itebar h2{margin:16px 0 14px}
}

/* ------------------------------------------------ 18b. PREGUNTAS FRECUENTES */
.faq{
  display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(28px,4vw,78px);align-items:start;
  --faq-indent:36px;
}
.faq__aside{position:sticky;top:calc(var(--nav-h) + 34px);display:grid;gap:24px}
.faq__aside h2{max-width:13ch}
.faq__aside .lead{max-width:38ch}
.faq__card{
  border:1px solid var(--line);background:var(--ink-900);
  padding:26px;display:grid;gap:14px;margin-top:6px;
}
.faq__card b{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.018em;color:var(--cal-50);
}
.faq__card p{font-size:.92rem;color:var(--ink-300);line-height:1.6}

.faq__list{display:grid;border-top:1px solid var(--line)}
.faq__it{border-bottom:1px solid var(--line)}
.faq__q{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:0 18px;align-items:start;
  padding:24px 0;cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__n{
  font:500 11px/1.85 var(--mono);letter-spacing:.14em;color:var(--terra-400);
}
.faq__t{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.3;letter-spacing:-.018em;
  color:var(--cal-50);transition:color .32s var(--ease);text-wrap:pretty;
}
.faq__ico{position:relative;width:20px;height:20px;margin-top:3px}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--terra-400);
  transition:transform .45s var(--ease),opacity .32s var(--ease);
}
.faq__ico::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.faq__ico::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.faq__it[open] .faq__ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq__it[open] .faq__t{color:var(--terra-300)}
.faq__q:hover .faq__t{color:var(--terra-300)}
.faq__q:focus-visible{outline:2px solid var(--ochre-400);outline-offset:4px}

.faq__a{padding:0 clamp(0px,3vw,44px) 26px var(--faq-indent)}
.faq__a p{color:var(--ink-200);font-size:.955rem;line-height:1.7;max-width:60ch}
.faq__a p + p{margin-top:12px}
.faq__a strong{color:var(--cal-100);font-weight:600}

/* Apertura animada donde el navegador lo permite; si no, abre de golpe */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq__it::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .5s var(--ease),content-visibility .5s allow-discrete;
  }
  .faq__it[open]::details-content{block-size:auto}
}

@media (max-width:1024px){
  .faq{grid-template-columns:1fr;--faq-indent:32px}
  .faq__aside{position:static}
  .faq__aside h2,.faq__aside .lead{max-width:none}
}
@media (max-width:720px){
  .faq{--faq-indent:0px}
  .faq__q{gap:0 14px;padding:20px 0}
  .faq__a{padding-right:0;padding-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .faq__it::details-content{transition:none}
}

.demo-flag{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);
}
.demo-flag::before{content:"";width:6px;height:6px;border:1px solid var(--ochre-500);transform:rotate(45deg)}

/* ------------------------------------------------------- 19. COBERTURA */
/* Dos columnas: sin el diagrama decorativo, las zonas ocupan todo el ancho */
.zones{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px,4.5vw,72px);
  border-top:1px solid rgba(11,13,16,.14);
}
@media (max-width:820px){.zones{grid-template-columns:1fr}}
.zone{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,34px);
  padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid rgba(11,13,16,.14);
}
.zone__n{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--terra-600);padding-top:.5em}
.zone h3{
  font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.42rem);
  letter-spacing:-.018em;margin-bottom:8px;
}
.zone p{font-size:.92rem;color:var(--ink-500);line-height:1.58}

/* -------------------------------------------------------- 20. CONTACTO */
.contact{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,4.5vw,84px);
}
.contact__aside{display:flex;flex-direction:column;gap:34px}
.contact__aside h2{max-width:13ch}
.contact__aside h2 em{font-style:normal;color:var(--terra-400)}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line)}
/* Nota para administradores y comunidades con junta a la vista. Antes era una
   sección naranja a toda anchura que repetía la llamada del formulario. */
.junta{
  border:1px solid rgba(199,102,61,.34);
  background:rgba(180,82,46,.09);
  padding:22px 24px;display:grid;gap:10px;
}
.junta b{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:-.018em;line-height:1.25;color:var(--cal-50);
}
.junta p{font-size:.93rem;line-height:1.6;color:var(--ink-200)}

/* OJO: tiene que ser `>`. Cada fila lleva dentro otro <div> con el título y la
   descripción; sin el hijo directo, ese div también recibía la rejilla de
   22px y partía el teléfono en una columna de 22 píxeles. */
.cinfo > a,.cinfo > div{
  display:grid;grid-template-columns:22px 1fr;gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line);
  transition:color .3s var(--ease);
}
.cinfo a:hover{color:var(--terra-300)}
.cinfo svg{width:20px;height:20px;color:var(--terra-400);fill:none;stroke:currentColor;stroke-width:1.5;margin-top:3px}
.cinfo b{display:block;font-weight:600;font-size:1rem}
.cinfo span{display:block;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);margin-top:4px}

.form{
  border:1px solid var(--line);background:var(--ink-900);
  padding:clamp(26px,3vw,46px);
  display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:1fr 1fr;
  align-content:start;
}
.form__head{grid-column:1/-1;margin-bottom:6px}
.form__head h3{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:-.02em}
.form__head p{font-size:.9rem;color:var(--ink-300);margin-top:8px}
.field{position:relative;display:block}
.field--full{grid-column:1/-1}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:0;border-bottom:1px solid var(--ink-600);
  padding:24px 0 11px;
  font-size:.98rem;color:var(--cal-50);
  transition:border-color .35s var(--ease);
  border-radius:0;
}
.field textarea{resize:vertical;min-height:104px}
.field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-300) 50%),linear-gradient(135deg,var(--ink-300) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 6px),calc(100% - 6px) calc(50% + 6px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--ink-800);color:var(--cal-50)}
.field span{
  position:absolute;left:0;top:24px;pointer-events:none;
  font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);
  transform-origin:left top;
  transition:transform .35s var(--ease),color .35s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--terra-500)}
.field input:focus + span,.field textarea:focus + span,.field select:focus + span,
.field input:not(:placeholder-shown) + span,.field textarea:not(:placeholder-shown) + span,
.field select.has-value + span{
  transform:translateY(-22px) scale(.86);color:var(--terra-400);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-bottom-color:var(--terra-400)}
/* El mensaje de error se oculta con display:none, no con opacity:0. Así el
   lector de pantalla no lo lee cuando el campo está correcto. */
.field em,.check em{
  display:none;font-style:normal;margin-top:7px;
  font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--terra-300);
}
.field.is-bad em{display:block}
.check em{grid-column:2;margin-top:9px}
.check.is-bad em{display:block}
.field__opt{text-transform:none;letter-spacing:.04em;color:var(--ink-400)}

/* Resumen de errores al enviar: role="alert", se anuncia al aparecer */
.form__err{
  grid-column:1/-1;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-top:4px;
  border:1px solid rgba(199,102,61,.45);background:rgba(180,82,46,.10);
  font:500 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--terra-300);
}
.form__err::before{content:"";flex:none;width:6px;height:6px;background:var(--terra-400);transform:rotate(45deg)}
.form__ok:focus-visible{outline:2px solid var(--ochre-400);outline-offset:4px}

/* WhatsApp */
.wa{color:var(--ochre-400)}
.foot__wa{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.96rem;color:var(--ink-100);
}
.foot__wa svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--ochre-400)}
.drawer__foot .btn--ghost{margin-top:10px}

.check{
  grid-column:1/-1;display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  font-size:.82rem;line-height:1.55;color:var(--ink-300);cursor:pointer;margin-top:4px;
}
.check input{
  appearance:none;width:20px;height:20px;margin:0;
  border:1px solid var(--ink-500);background:transparent;cursor:pointer;
  display:grid;place-content:center;transition:border-color .3s,background-color .3s;
}
.check input::before{
  content:"";width:9px;height:9px;background:var(--terra-500);
  transform:scale(0);transition:transform .25s var(--ease);
}
.check input:checked{border-color:var(--terra-500)}
.check input:checked::before{transform:scale(1)}
.check a{color:var(--ink-100);text-decoration:underline;text-underline-offset:3px}
.check.is-bad input{border-color:var(--terra-400)}
.form__submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px}
/* --ink-400 y no --ink-500: este texto va sobre fondo oscuro y con el 500
   quedaba en 1,89 de contraste. El 500 sigue siendo correcto en las secciones
   claras, que es donde se usa en el resto del archivo. */
.form__note{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.form__ok{
  grid-column:1/-1;display:none;gap:16px;align-items:center;
  padding:22px;border:1px solid rgba(199,102,61,.4);background:rgba(180,82,46,.10);
}
.form__ok svg{width:26px;height:26px;color:var(--terra-300);fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.form.is-sent .form__ok{display:flex}

/* ------------------------------------------------------------ 21. CTA/FOOT */
.cta{
  position:relative;overflow:hidden;
  padding-block:clamp(70px,9vw,120px);
  background:var(--terra-600);color:#fff;
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
}
.cta__in{position:relative;display:grid;gap:34px;justify-items:start}
.cta__acts{display:flex;flex-wrap:wrap;gap:14px}
.cta h2{max-width:18ch}
.cta p{max-width:52ch;color:rgba(255,255,255,.86)}
.cta .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.cta .btn--ghost::before{background:#fff}
.cta .btn--ghost:hover{color:var(--terra-700);border-color:#fff}

.foot{background:var(--ink-950);padding-top:clamp(56px,6vw,88px);padding-bottom:34px}
.foot__grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(26px,3vw,46px);
  padding-bottom:44px;border-bottom:1px solid var(--line-soft);
}
.foot__grid h4{
  font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:20px;
}
.foot__grid li + li{margin-top:11px}
/* :not(.btn) es imprescindible. Sin él, esta regla gana por especificidad al
   `color:#fff` de .btn--solid y el botón de visita técnica del pie quedaba con
   el texto gris sobre terracota: 2,24 de contraste, el peor de la página, y
   justo en la llamada a la acción. */
.foot__grid a:not(.btn),.foot__grid p{font-size:.94rem;color:var(--ink-200);transition:color .3s var(--ease)}
.foot__grid a:not(.btn):hover{color:var(--terra-300)}
.foot__about > p{max-width:32ch;color:var(--ink-300);font-size:.94rem;margin-top:18px}

/* El pie es donde se baja a buscar el teléfono: va destacado, no en una lista */
.foot__contact{
  display:grid;gap:7px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.foot__tel{
  font-family:var(--display);font-weight:600;font-stretch:104%;
  font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1;letter-spacing:-.022em;
  color:var(--cal-50);
}
.foot__contact a{transition:color .3s var(--ease)}
.foot__contact a:hover{color:var(--terra-300)}
.foot__mail{font-size:.96rem;color:var(--ink-100)}
.foot__hours{
  font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);margin-top:3px;
}
.foot__about .btn{margin-top:24px}
.foot__grid a[aria-current="page"]{color:var(--terra-400)}

.foot__bar{
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  padding-top:26px;
  /* --ink-400, no --ink-500: aquí viven los tres enlaces legales, que son
     obligatorios y con el 500 quedaban en 1,98 de contraste, casi invisibles
     sobre el negro del pie. */
  font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:14px 24px}
.foot__bar a:hover{color:var(--ink-100)}

/* ---------------------------------------------------------- 22. REVELADOS */
[data-rv]{
  opacity:0;transform:translateY(var(--ry,26px));
  transition:opacity .95s var(--ease) var(--d,0s),transform .95s var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
[data-rv].is-in{opacity:1;transform:none}
[data-rv="mask"]{
  opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease-io) var(--d,0s);
}
[data-rv="mask"].is-in{clip-path:inset(0 0 0 0)}
[data-rv="scale"]{opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.4s var(--ease) var(--d,0s)}
[data-rv="scale"].is-in{opacity:1;transform:none}
[data-rv="none"]{opacity:1;transform:none}

/* --------------------------------------------------------- 23. RESPONSIVE */
@media (min-width:1200px){
  .rail{display:flex}
  body{padding-left:0}
}
@media (max-width:1180px){
  .sec__head{grid-template-columns:1fr;align-items:start}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card--hero{grid-column:span 2;grid-row:auto}
  .works{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  /* El plegado del menú NO está aquí: vive en el bloque de 1200px, que es el
     ancho real que necesita. Tenerlo en dos sitios obligaba a sincronizarlos. */
  .hero__cols{grid-template-columns:1fr}
  .hero__seal{margin-left:0}
  .figures{grid-template-columns:repeat(2,1fr)}
  .figures li:nth-child(2){border-right:0}
  .figures li:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .svc__in{grid-template-columns:1fr}
  .svc__art{border-right:0;border-bottom:1px solid var(--line);min-height:300px;position:relative}
  .svc{position:relative;top:auto}
  .manifesto,.contact{grid-template-columns:1fr}
  /* Con una sola columna la imagen ocupa todo el ancho: si la placa mantiene
     el desplazamiento negativo, se sale del contenedor. */
  .manifesto__badge{right:0}
  .step{grid-template-columns:64px 1fr}
  .step > p:last-child{grid-column:2}
}
/* El teléfono es lo que sobra cuando la cabecera va justa. Medido con el
   teléfono forzado visible, mirando cuánto se sale el bloque de la derecha del
   límite de la caja de contenido:
       1240px → se sale 64px      1300px → se sale 16px
       1280px → se sale 32px      1330px → encaja exacto (holgura 0)
   Así que el teléfono no cabe hasta los 1.330px. Se muestra a partir de 1.340
   para no dejarlo al filo: portátiles de 1.366px lo ven con holgura; los de
   1.280px no, y es correcto que no lo vean.
   Por debajo de 1201px el menú ya está plegado en la hamburguesa y el teléfono
   vuelve a caber de sobra, así que solo se retira en esta banda.
   El teléfono sigue en el pie, en el apartado de contacto y a un toque desde el
   botón de visita técnica: no se pierde, se mueve.
   OJO con la métrica: `scrollWidth - innerWidth` NO sirve aquí, porque
   `body{overflow-x:hidden}` se traga el desbordamiento y siempre da 0. Hay que
   comparar el borde del último rótulo real contra el inicio del bloque de la
   derecha. */
@media (min-width:1201px) and (max-width:1339px){
  .nav__tel{display:none}
}
@media (max-width:860px){
  .nav__tel{display:none}
}
/* Pantallas bajas: el hero cabe entero, cifras incluidas */
@media (max-height:860px) and (min-width:1025px){
  .hero__body{padding-bottom:14px}
  .hero h1{margin-bottom:16px}
  .hero__actions{margin-top:20px}
  .figures li{padding-block:14px}
  .figures .k{margin-top:7px}
}

@media (max-width:720px){
  :root{--nav-h:64px}
  .hero{padding-top:calc(var(--nav-h) + 24px)}
  .hero__actions{margin-top:22px}
  .hero__seal{padding:18px;gap:14px}
  .hero__seal svg{width:26px;height:26px}
  .hero__seal p{font-size:.88rem}
  .hero__bg .ph__tag{max-width:70vw;font-size:9.5px}
  .form{grid-template-columns:1fr;padding:24px 20px}
  .works{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .card--hero{grid-column:span 1}
  .foot__grid{grid-template-columns:1fr}
  .ba{aspect-ratio:4/3}
  .ba__badge{top:14px;font-size:10px;padding:7px 11px}
  .ba__badge--l{left:14px}
  .ba__badge--r{right:14px}
  .manifesto__badge{right:-8px;bottom:-14px}
  .step{grid-template-columns:1fr;gap:10px;padding-left:24px}
  .step__n{padding-top:0}
  .ph__tag{padding:18px}
  .ph__ico{top:18px;right:18px}
}
@media (max-width:520px){
  .figures{grid-template-columns:repeat(2,1fr)}
  .figures li{padding:16px 14px;border-right:1px solid var(--line-soft)}
  .figures li:nth-child(2n){border-right:0}
  .figures li:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .figures .n{font-size:1.62rem}
  .figures .k{font-size:9.5px;letter-spacing:.12em;margin-top:8px}
  /* Los botones del cuerpo pasan a ancho completo en móvil. El de la cabecera
     NO: ahí width:100% lo estiraba a 216px —56 más que su ancho natural— y
     empujaba la hamburguesa 40px fuera de la pantalla, donde overflow-x:hidden
     la recortaba a 4px visibles. Se veía bien de casualidad porque flex-shrink
     lo devolvía a su sitio; al fijar flex:none en .nav__end quedó al aire.
     Afectaba de 400 a 520px: casi todos los móviles actuales. */
  .btn{width:100%;justify-content:center}
  .nav__end .btn{width:auto}
  .hero__actions .btn{width:auto;flex:1 1 auto}
}

/* --------------------------------------------- 24. MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .lines .ln > i{transform:none !important}
}

/* ------------------------------------- 25. PÁGINAS DE DOCUMENTO (legales/404) */
/* Las páginas internas usan la MISMA cabecera fija que la portada (.nav),
   así que hay que dejarle su altura libre arriba. */
.doc{padding-block:calc(var(--nav-h) + clamp(30px,4vw,54px)) clamp(60px,7vw,110px)}
.doc__head{
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(26px,3vw,42px);
  margin-bottom:clamp(32px,4vw,58px);
}
.doc__head h1{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.032em;
  margin-top:22px;
}
.doc__meta{
  display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:22px;
  font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);
}
.doc__body{
  display:grid;grid-template-columns:minmax(0,215px) minmax(0,1fr);
  gap:clamp(26px,4vw,72px);align-items:start;
}
.doc__toc{position:sticky;top:104px}
.doc__toc h2{
  font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:18px;
}
.doc__toc li + li{margin-top:2px}
.doc__toc a{
  display:flex;gap:12px;padding:8px 0;
  font-size:.88rem;color:var(--ink-200);
  border-bottom:1px solid var(--line-soft);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.doc__toc a em{font:500 10.5px/1.7 var(--mono);font-style:normal;color:var(--terra-400)}
.doc__toc a:hover{color:var(--cal-50);padding-left:6px}

.doc__main{max-width:74ch}
.doc__main > section + section{margin-top:clamp(34px,4vw,54px)}
.doc__main h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.02em;line-height:1.16;
  margin-bottom:16px;scroll-margin-top:104px;
}
.doc__main h2 em{
  font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.14em;
  color:var(--terra-400);display:block;margin-bottom:11px;
}
.doc__main h3{
  font-weight:600;font-size:1rem;margin:24px 0 10px;color:var(--cal-50);
}
.doc__main p,.doc__main li{color:var(--ink-200);font-size:.965rem;line-height:1.68}
.doc__main p + p{margin-top:14px}
.doc__main ul{margin-top:14px;display:grid;gap:9px}
.doc__main ul li{position:relative;padding-left:22px}
.doc__main ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--terra-500);
}
.doc__main a:not(.btn):not(.link){
  color:var(--cal-50);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(199,102,61,.6);
}
.doc__main a:not(.btn):not(.link):hover{color:var(--terra-300)}

/* Dato que la empresa debe completar antes de publicar */
.fill{
  font:500 .84em/1.4 var(--mono);
  background:rgba(192,139,62,.15);
  border-bottom:1px solid var(--ochre-500);
  color:var(--ochre-200);
  padding:1px 7px;white-space:nowrap;
}

.doc__note{
  margin-top:clamp(34px,4vw,54px);
  border:1px solid rgba(192,139,62,.34);
  background:rgba(192,139,62,.07);
  padding:22px 24px;
  display:grid;grid-template-columns:22px 1fr;gap:16px;align-items:start;
}
.doc__note svg{width:22px;height:22px;color:var(--ochre-400);fill:none;stroke:currentColor;stroke-width:1.5;margin-top:3px}
.doc__note p{font-size:.9rem;color:var(--ink-200);line-height:1.62}
.doc__note b{color:var(--cal-50)}

.ctable{width:100%;border-collapse:collapse;margin-top:18px;font-size:.9rem}
.ctable th,.ctable td{
  text-align:left;padding:13px 14px 13px 0;
  border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-200);
}
.ctable th{
  font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);border-bottom-color:var(--line);
}
.ctable td:first-child{color:var(--cal-50);font-weight:500;padding-right:22px}
.tscroll{overflow-x:auto}

/* Error 404 */
.err{min-height:100svh;display:grid;place-content:center;text-align:center;gap:26px;padding:var(--pad)}
.err__code{
  font-family:var(--display);font-weight:700;font-stretch:118%;
  font-size:clamp(5rem,20vw,13rem);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(206,195,177,.26);
}
.err h1{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.028em;line-height:1.06}
.err p{color:var(--ink-200);max-width:46ch;margin-inline:auto}
.err__acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}

@media (max-width:900px){
  .doc__body{grid-template-columns:1fr}
  .doc__toc{position:static;border-bottom:1px solid var(--line);padding-bottom:22px}
}

/* --------------------------------------- 26. PÁGINAS INTERNAS (ITE, provincias) */
/* Aquí vivía un separador vertical que partía el menú en dos mitades: anclas de
   la portada a la izquierda, páginas propias a la derecha. Retirado. Ahora los
   siete rótulos son anclas de la portada en su orden de scroll, y las páginas
   propias cuelgan de los tres desplegables, así que no hay dos mitades que
   separar. */

.nav__links a[aria-current="page"]{color:var(--terra-400)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.drawer__links a[aria-current="page"]{color:var(--terra-400)}

/* Submenús "Servicios" y "Zonas".
   El rótulo es un ENLACE normal y lleva a su sección de la portada. La flecha
   de al lado es un botón aparte que abre el desplegable. Así se puede ir a la
   sección de un clic y a las páginas concretas por la flecha, y funciona igual
   con ratón, con el dedo y con teclado. */
.nav__drop{position:relative;display:flex;align-items:center;gap:5px}
.nav__drop.is-here > a{color:var(--terra-400)}
.nav__drop.is-here > a::after{transform:scaleX(1)}

.nav__dropbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:26px;color:var(--ink-300);
  transition:color .3s var(--ease);
}
.nav__dropbtn svg{width:9px;height:6px;transition:transform .35s var(--ease)}
.nav__drop:hover .nav__dropbtn,
.nav__dropbtn[aria-expanded="true"]{color:var(--cal-50)}
.nav__dropbtn[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav__dropmenu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:252px;display:grid;padding:6px;z-index:5;
  background:rgba(16,19,24,.97);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border:1px solid var(--line);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
}
/* Puente invisible para que el ratón pueda bajar sin que se cierre */
.nav__dropmenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__drop:hover .nav__dropmenu,
.nav__drop:focus-within .nav__dropmenu,
.nav__dropmenu.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* line-height 1.4, no 1: si un rótulo se parte en dos líneas tiene que
   quedar aire entre ellas o se leen pegadas. */
.nav__dropmenu a{
  padding:11px 14px;
  font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-100);
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.nav__dropmenu a::after{display:none}
.nav__dropmenu a:hover{background:var(--terra-500);color:#fff}
.nav__dropmenu a[aria-current="page"]{color:var(--terra-400)}
/* Aquí hubo una clase `is-otro` para meter «Precio y presupuesto» dentro del
   desplegable de Servicios separado por una línea. Se retiró: si un elemento
   necesita una raya para explicar que no pertenece a la lista, es que no
   pertenece a la lista. Cada desplegable contiene solo cosas de su especie. */

/* Punto de plegado del menú. Sin el teléfono —que se retira en la banda de
   arriba— los ocho rótulos caben desde 1.158 px, así que a 1.201 px sobra sitio.
   Aviso, por si vuelve a pasar: este número se midió una vez con SIETE rótulos y
   con el nombre antiguo, y se quedó viejo al añadir «Blog» y al pasar de «Por qué
   REVESA» a «Por qué Fachadas Lliçà» (192 px, más que Obras + Proceso + ITE +
   Blog juntos). Resultado: entre 1.201 y 1.263 px el menú se mostraba sin caber y
   el teléfono se partía en cuatro líneas. Hoy el rótulo es «Por qué nosotros»
   (140 px) y ese margen está holgado.
   Si se añade, se quita o se alarga un rótulo, hay que VOLVER A MEDIR los dos
   números: este y el de la banda del teléfono. */
@media (max-width:1200px){
  .nav__links{display:none}
  .burger{display:block}
}

/* Zonas dentro del menú móvil */
.drawer{overflow-y:auto}
/* Con ocho filas numeradas y tres bloques de chips, el cajón no cabía en una
   pantalla de 812px y el botón de visita técnica quedaba justo por debajo del
   pliegue. Se recorta el aire, no el contenido. */
.drawer{padding-block:calc(var(--nav-h) + 24px) 28px;gap:24px}
/* Aquí vivían los chips del final del cajón —Servicios, Zonas e ITE—. Se
   retiraron: cada página cuelga ahora de su apartado en la propia lista, que es
   como funciona el menú de escritorio. Tenerlas dos veces, y en sitios
   distintos, obligaba a saber que «SATE» pertenecía a «Servicios» aunque
   estuvieran a media pantalla de distancia. */

/* Al quitar los chips, el pie del cajón se queda con los dos botones y nada
   más: no necesita tanto aire por encima. */
.drawer__foot{gap:12px;padding-top:20px}

.phero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(34px,4.2vw,62px)) clamp(40px,4.6vw,68px);
  border-bottom:1px solid var(--line);
}
.phero__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,#000,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
}
.phero h1{margin:26px 0 24px;max-width:20ch}
.phero h1 em{font-style:normal;color:var(--terra-400)}
.phero__cols{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,3.5vw,62px);align-items:end;
}
.phero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.facts li{padding:clamp(18px,2vw,24px);border-right:1px solid var(--line-soft)}
.facts li:last-child{border-right:0}
.facts b{
  display:block;font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.45rem,2.3vw,2.05rem);line-height:1;letter-spacing:-.032em;
  color:var(--cal-50);
}
.facts span{
  display:block;margin-top:10px;
  font:500 10px/1.55 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-300);
}

/* Gravedad de las deficiencias de la ITE */
/* ----------------------------------------------------- ARTÍCULOS (.posts)
   Lista del blog. Vertical y no en rejilla a propósito: con pocas entradas una
   rejilla de tarjetas se ve medio vacía, y en vertical cada artículo ocupa una
   franja completa y se lee como una pieza, no como un hueco por llenar. */
.posts{display:grid;gap:0;border-top:1px solid var(--line);margin-top:clamp(30px,4vw,50px)}
.post{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:start;
  padding:clamp(26px,3.4vw,42px) 0;
  border-bottom:1px solid var(--line);
}
.post__meta{display:grid;gap:9px;align-content:start}
.post__meta b{
  font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra-400);font-weight:500;
}
.post__meta span{
  font:400 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--ink-400);
}
.post h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.16;letter-spacing:-.022em;
  margin:0 0 14px;max-width:26ch;text-wrap:balance;
}
.post h2 a{color:var(--cal-50);transition:color .3s var(--ease)}
.post h2 a:hover{color:var(--terra-400)}
.post p{color:var(--ink-200);font-size:.98rem;line-height:1.62;max-width:62ch;margin:0 0 16px}
@media (max-width:820px){
  .post{grid-template-columns:1fr;gap:14px}
}

/* ------------------------------------------------ LISTA DE PUNTOS (.points)
   Para enumerar criterios que NO son una secuencia: por eso no lleva números,
   que darían a entender un orden que no existe. Cada punto abre con un <b> que
   es el criterio y sigue con la explicación.
   OJO: no confundir con .check, que es la CASILLA del formulario y lleva una
   columna de 20px para el cuadro. Si se usa .check para una lista, el texto
   cae dentro de esos 20px y sale una palabra por línea. */
.points{
  display:grid;gap:0;
  border-top:1px solid var(--line);
  margin-top:clamp(26px,3.4vw,42px);
}
.points li{
  padding:clamp(15px,1.7vw,21px) 0;
  border-bottom:1px solid var(--line);
  max-width:92ch;color:var(--ink-200);
  font-size:clamp(.95rem,1.05vw,1.02rem);line-height:1.62;
}
.points b{color:var(--cal-50);font-weight:600}
.sec--light .points{border-top-color:rgba(11,13,16,.14)}
.sec--light .points li{border-bottom-color:rgba(11,13,16,.14);color:var(--ink-800)}
.sec--light .points b{color:var(--ink-950)}

.grav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
}
.grav li{background:var(--ink-950);padding:26px clamp(18px,1.8vw,26px) 30px}
.grav i{display:block;width:36px;height:3px;margin-bottom:20px}
.grav h3{
  font-family:var(--display);font-weight:600;font-size:1.06rem;
  letter-spacing:-.018em;line-height:1.2;margin-bottom:11px;
}
.grav em{
  display:block;font:500 10px/1.5 var(--mono);font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);margin-bottom:14px;
}
.grav p{font-size:.9rem;color:var(--ink-300);line-height:1.62}

/* Bloque de dos columnas texto + imagen, reutilizable */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(28px,4vw,72px);align-items:center;
}
.split--flip .split__art{order:-1}
.split__txt h2{margin-bottom:24px;max-width:17ch}
.split__txt p + p{margin-top:16px}
.split__art .ph{--ratio:4/3}

@media (max-width:900px){
  .phero__cols{grid-template-columns:1fr}
  .grav{grid-template-columns:repeat(2,1fr)}
  .split,.split--flip{grid-template-columns:1fr}
  .split--flip .split__art{order:0}
}
@media (max-width:600px){
  .facts{grid-template-columns:1fr}
  .facts li{border-right:0;border-bottom:1px solid var(--line-soft)}
  .facts li:last-child{border-bottom:0}
  .grav{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ 27. IMPRESIÓN */
@media print{
  .nav,.drawer,.grain,.rail,.progress,.cta,.doc__toc{display:none !important}
  .doc,.phero{padding-top:0}
  .doc__body{grid-template-columns:1fr}
  body{background:#fff;color:#000}
  .sec{padding-block:24px;break-inside:avoid}
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
}