/* ═══════════════════════════════════════════════════════════
   NODUS PROJECTS — sistema visual
   ═══════════════════════════════════════════════════════════

   Viene del <style> en línea de `nodus.html`: mismos tokens, mismas
   tipografías (Fraunces + Inter) y mismo acento cobre. Lo que se ha
   añadido es lo que pedía la nueva home tomando como referencia
   grupohabitazone.com: cabecera a sangre con fotografía, bloques de
   acceso a servicios con imagen y una sección de proyectos real.

   Este archivo será también la piel del ecosistema: las landings de
   las promociones pasarán a usarlo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Color ──
     NODUS es oscuro: fondo casi negro, texto claro y cobre como unico
     acento. Antes el sitio era claro con modo oscuro automatico; ahora
     el oscuro ES la marca, asi que los tokens valen para todos los
     navegadores y no dependen de la preferencia del sistema. */
  --bg:#0C0D0F;
  --surface:#131517;
  --surface-2:#191B1E;
  --ink:#F4F2EF;
  --ink-2:#A8A49E;
  /* Terciario: el más discreto que cumple 4,5:1 sobre todas las superficies. */
  --ink-3:#8C8780;
  --line:#26282C;
  --accent:#B8936A;
  --accent-hover:#CBA67C;
  --accent-soft:#1C1711;
  --on-accent:#0C0D0F;

  /* Las bandas son un escalon mas claro que el fondo: separan sin
     dibujar una caja. */
  --band:#141619;
  --band-ink:#F4F2EF;
  --band-ink-2:#A8A49E;
  --band-line:#2B2E33;

  /* Paleta de marca NODUS (confirmada por el cliente). Los tokens de
     arriba (--bg, --ink…) son los de las páginas interiores; estos, los
     de las secciones rediseñadas. */
  --ebano:#0a090a;  /* fondo de las secciones de marca */
  --carbon:#343433; /* filetes y separadores */
  --marfil:#f2eee6; /* texto principal sobre ébano */
  --marfil-claro:#f3efe8; /* botones claros (cápsula, salto al contenido) */
  --camel:#a98b6e;  /* acento: antetítulos, enlaces, botón principal */
  --camel-hover:#bc9f82; /* camel al pasar el cursor */
  --camel-suave:#c4a888; /* camel de titulares y enlaces sobre ébano */
  --topo:#8b7e73;   /* topo de marca (decorativo; no para texto pequeño) */
  --topo-claro:#a79d92; /* texto secundario legible sobre ébano */

  /* Curvas de movimiento: ease-out fuerte para respuesta inmediata,
     ease-in-out para lo que se desplaza en pantalla. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  --radius:4px;
  /* Retícula única: 1280 px de contenido con un margen lateral que crece
     con la pantalla (20 px en móvil, 48 en escritorio). */
  --maxw:1376px;
  --wrap-pad:clamp(20px,4vw,48px);
  --gutter:20px;
  /* Sobre fondo oscuro una sombra no se ve: lo que separa es el filete
     y el cambio de fondo. Se dejan muy suaves, solo para dar relieve. */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 2px 4px rgba(0,0,0,.45),0 20px 50px rgba(0,0,0,.45);

  /* Ritmo de seccion. La referencia respira mucho mas que la maqueta
     original, asi que el bloque crece con la pantalla. */
  --sect:clamp(72px,8.5vw,120px);
}

/* ---------- fuentes propias ----------
   Fraunces e Inter servidas desde la web (subconjuntos latin y
   latin-ext: español, catalán, francés). Sin peticiones a Google: no
   bloquean el pintado y no envían la IP del visitante a terceros. */
/* Fraunces latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:500;line-height:1.1;letter-spacing:-.015em}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none !important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)}

/* Antetítulo en versalitas muy espaciadas: el rasgo que más se repite
   en la referencia. */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.eyebrow.on-band{color:var(--accent)}

section{padding:var(--sect) 0}
.sec-head{max-width:760px;margin-bottom:44px}
h2{font-size:clamp(28px,4vw,44px);margin-bottom:16px}
.lede{font-size:clamp(16px,1.6vw,18px);color:var(--ink-2);max-width:62ch}

/* ---------- accesibilidad: salto al contenido ----------
   Invisible hasta que llega el foco del teclado; entonces aparece arriba
   a la izquierda, sobre la cápsula, en los colores de la marca. */
.salto{
  position:fixed;top:12px;left:12px;z-index:100;
  padding:12px 18px;border-radius:12px;
  background:var(--marfil-claro);color:#151515;font-size:14px;font-weight:600;text-decoration:none;
  transform:translateY(calc(-100% - 24px));transition:transform .2s ease-out;
}
.salto:focus{transform:none;outline:2px solid var(--camel);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.salto{transition:none}}
/* El destino del salto recibe el foco sin dibujar un contorno alrededor de toda la página. */
main:focus{outline:none}

/* Rótulos de grupo del porfolio: son h2 para la jerarquía, con el aspecto
   de antes. */
.sub-head h2{
  font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:600;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0;
}

/* ---------- carga diferida de fondos ----------
   Las fotos de fondo de secciones lejanas no se piden al abrir la página:
   el JS añade .bg-on a cada sección cuando se acerca a la pantalla. Solo
   con JS activo (clase .js en <html>); sin JS se cargan como siempre. */
.js .carr:not(.bg-on) .carr-fondo::before,
.js .ctl:not(.bg-on) .ctl-bg::before,.js .ctl:not(.bg-on) .ctl-bg::after,
.js .cob:not(.bg-on)::before,
.js .final:not(.bg-on)::before,
.js .ft:not(.bg-on) .ft-nodus{background-image:none !important}
/* La foto fija del hero solo se descarga si hace falta (sin vídeo). */
.js .hero:not(.no-video) .hero-media img{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--radius);border:1px solid transparent;
  font-size:15px;font-weight:600;font-family:inherit;text-decoration:none;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform 160ms var(--ease-out);
  line-height:1.2;text-align:center;
}
.btn svg{flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-ghost.on-band{color:var(--band-ink);border-color:var(--band-line)}
.btn-ghost.on-band:hover{border-color:var(--band-ink-2)}

.btn-block{width:100%}
.btn-lg{padding:17px 32px;font-size:16px}

/* ---------- nav ----------
   Cápsula flotante: logo | navegación | teléfono y «Hablamos». La
   cabecera sigue siendo sticky y transparente; lo que se ve es la
   cápsula (.nav), con un vidrio oscuro contenido. Sobre el hero es más
   ligera (se ve la escena detrás); fuera de él, algo más opaca. Al bajar
   se retira y al subir vuelve, como antes. */
header{
  position:sticky;top:0;z-index:60;padding-top:24px;
  background:transparent;pointer-events:none;
  transition:transform .35s cubic-bezier(.3,.7,.2,1);
}
header.oculta{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){header{transition:none}header.oculta{transform:none}}

header .nav{
  pointer-events:auto;position:relative;
  width:calc(100% - 64px);max-width:1400px;height:68px;margin:0 auto;padding:0 14px 0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-radius:20px;border:1px solid rgba(255,255,255,.12);
  background:rgba(18,20,21,.82);
  -webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  transition:background .3s,backdrop-filter .3s,-webkit-backdrop-filter .3s;
}
header.over-hero .nav{
  background:rgba(18,20,21,.5);
  -webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%);
}

/* Logotipo: el símbolo y, al lado, la marca con su bajada. La cápsula es
   siempre oscura, así que va el símbolo blanco. */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1.1;color:#fff;flex:none}
/* El PNG mide 512 px de lado: aquí se fija el tamaño por si alguna regla
   posterior fallara. */
.logo-sim{width:30px;height:30px;max-width:30px;max-height:30px;flex:none;object-fit:contain}
.logo-sim-color{display:none}
.logo-txt{display:flex;flex-direction:column;justify-content:center}
.logo-mark{display:block;font-family:Fraunces,serif;font-size:20px;font-weight:600;letter-spacing:.08em}
.logo-mark span{color:var(--accent)}
.logo-sub{
  display:none;margin-top:4px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);
}

.nav-links{display:none;gap:28px;font-size:13.5px;font-weight:450}
.nav-links a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-cta-wrap{display:flex;align-items:center;gap:20px;flex:none}
.nav-tel{display:none;font-size:13.5px;font-weight:450;color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
.nav-tel:hover{color:#fff}
/* El botón de la cabecera: claro y compacto. El botón cobre del hero
   sigue siendo el principal. */
.nav .btn-hablamos{
  height:40px;padding:0 18px;border-radius:12px;gap:8px;
  background:var(--marfil-claro);border-color:var(--marfil-claro);color:#151515;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  transition:background .2s,transform .2s;
}
.nav .btn-hablamos:hover{background:#fff;transform:translateY(-1px)}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--marfil-claro);outline-offset:3px;border-radius:6px}
.nav .btn-hablamos:focus-visible{border-radius:12px}

/* Botón de menú (solo móvil): círculo pequeño con dos trazos. */
.nav-menu{
  display:none;width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);
  position:relative;
}
.nav-menu span{
  position:absolute;left:12px;right:12px;height:1.5px;background:#fff;border-radius:1px;
  transition:transform 200ms var(--ease-out);
}
.nav-menu span:first-child{top:15px}
.nav-menu span:last-child{top:22px}
header.menu-abierto .nav-menu span:first-child{transform:translateY(3.5px) rotate(45deg)}
header.menu-abierto .nav-menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(min-width:900px){
  .nav-links{display:flex}
  .logo-sub{display:block}
  .logo-sim{width:32px;height:32px;max-width:32px;max-height:32px}
}
@media(min-width:1200px){.nav-tel{display:inline}}

/* Móvil: logo a la izquierda y menú a la derecha; la navegación se abre
   en un panel bajo la cápsula. «Hablamos» ya vive en la barra fija de
   abajo. */
@media(max-width:899px){
  header{padding-top:14px}
  header .nav{width:calc(100% - 28px);height:60px;padding:0 10px 0 16px;border-radius:18px}
  .nav-cta-wrap{display:none}
  .nav-menu{display:block}
  .nav-links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;gap:0;padding:8px;
    border-radius:16px;border:1px solid rgba(255,255,255,.12);
    /* Opaco: dentro de la cápsula (que ya desenfoca) el navegador no
       aplica un segundo desenfoque, y el titular del hero se transparentaba. */
    background:#121415;
    box-shadow:0 8px 30px rgba(0,0,0,.18);
  }
  header.menu-abierto .nav-links{display:flex}
  .nav-links a{padding:13px 14px;font-size:15px;border-radius:10px}
  .nav-links a:hover{background:rgba(255,255,255,.06)}
}

/* ---------- HERO a sangre ----------
   Fotografía (o vídeo) a pantalla completa, claim encima y, abajo, el
   rótulo del proyecto que se está viendo. Es el patrón de la referencia.
   Los colores del hero son fijos, no tokens: el texto siempre va sobre
   una imagen oscurecida, en modo claro y en modo oscuro. */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(130px,16vh,190px) 0 clamp(28px,4vh,46px);overflow:hidden;background:#15171B;
  /* La cabecera es sticky y va en el flujo, así que ocupa su altura por
     encima. Con este margen negativo el hero se mete por debajo y la
     fotografía llega de verdad hasta arriba, que es lo que pide el
     estado transparente de la cabecera. Son 72 px en móvil y 88 en
     escritorio, más el filete de 1 px. */
  margin-top:-74px;
}
@media(min-width:900px){.hero{margin-top:-92px}}
/* En un contenedor flex en columna, el `margin:0 auto` de .wrap anula el
   stretch y la caja se encoge al ancho de su contenido. Sin esto, el
   contenido del hero no ocupa los 1180 px de la retícula. */
.hero > .wrap{width:100%}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;
}
.hero-media img{opacity:0;transition:opacity .6s}
.hero.no-video video{display:none}
.hero.no-video img{opacity:1}
/* Más luz en la imagen: el vídeo venía oscuro de origen, así que se
   levanta un poco antes de velarlo. */
.hero-media video,.hero-media img{filter:brightness(1.22) saturate(1.06)}

/* El claim va arriba y el pie abajo, así que el velo carga los dos
   extremos y deja respirar el centro de la imagen. Al subir el brillo
   del vídeo, el velo puede ser bastante más suave y aun así sostener
   el texto en blanco. */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(12,13,16,.72) 0%, rgba(12,13,16,.34) 32%, rgba(12,13,16,.14) 60%, rgba(12,13,16,.46) 100%),
    linear-gradient(to right, rgba(12,13,16,.56) 0%, rgba(12,13,16,.2) 54%, transparent 88%);
}
.hero-in{position:relative;z-index:2;color:#F3F1EE}

/* El claim a la izquierda y la nota al margen abajo a la derecha. En
   pantallas estrechas la nota pasa debajo del botón. */
.hero-grid{display:grid;gap:40px}
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
}

/* El claim: versalitas muy espaciadas y de peso ligero. Es el gesto
   tipográfico del hero, así que crece todo lo que da la pantalla.
   `.hero-dsp` en vez de `.hero h1` porque la escala y el tracking no
   tienen nada que ver con el resto de titulares del sitio. */
.hero-dsp{
  color:#fff;font-weight:400;
  font-size:clamp(32px,5.1vw,64px);
  letter-spacing:.04em;line-height:1.2;
  text-transform:uppercase;
  margin-bottom:clamp(20px,2.6vw,30px);
  text-wrap:balance;
}
.hero-sub{
  font-size:clamp(15px,1.5vw,18px);color:rgba(243,241,238,.85);
  max-width:46ch;margin-bottom:clamp(24px,3vw,36px);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Botón del hero en vidrio: el cobre se transparenta sobre el vídeo en
   lugar de taparlo. El borde claro y el brillo interior superior le dan
   el canto de cristal. */
/* Camel profundo y translúcido: el texto blanco mantiene 4,5:1 aunque
   pase por detrás un fotograma claro del vídeo. */
.hero-ctas .btn-primary{
  background:color-mix(in srgb, #87674a 74%, transparent);
  border-color:rgba(255,255,255,.4);
  color:#fff;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 24px rgba(12,13,16,.3);
}
/* Al pasar el cursor se hace más profundo, no más claro: gana contraste. */
.hero-ctas .btn-primary:hover{
  background:color-mix(in srgb, #806246 82%, transparent);
  border-color:rgba(255,255,255,.6);
}

/* Nota al margen en vidrio, a juego con el botón: oscura y translúcida,
   con el antetítulo en cobre. */
.hero-note{
  background:rgba(18,20,23,.42);padding:26px 30px;max-width:380px;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 32px rgba(12,13,16,.28);
}
.hero-note-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
.hero-note-title{font-size:19px;font-weight:600;color:#fff;margin-bottom:4px}
.hero-note-sub{font-size:14.5px;color:rgba(243,241,238,.72)}

/* Pie del hero: las cuatro claves en celdas separadas por filetes
   verticales. Sustituye a la banda `.trust` que iba debajo del hero. */
.hero-foot{
  position:relative;z-index:2;margin-top:clamp(40px,7vw,76px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 0;
}
@media(min-width:800px){.hero-foot{grid-template-columns:repeat(4,1fr)}}
.hero-cell{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;color:rgba(243,241,238,.74);text-decoration:none;
  padding-left:22px;border-left:1px solid rgba(255,255,255,.22);
  transition:color .2s;
}
/* La primera de cada fila no lleva filete: no hay nada a su izquierda. */
.hero-foot .hero-cell:nth-child(odd){padding-left:0;border-left:0}
@media(min-width:800px){
  .hero-foot .hero-cell:nth-child(odd){padding-left:22px;border-left:1px solid rgba(255,255,255,.22)}
  .hero-foot .hero-cell:first-child{padding-left:0;border-left:0}
}
.hero-cell:hover{color:#fff}
.hero-cell-end{justify-content:flex-start}
@media(min-width:800px){.hero-cell-end{justify-content:flex-end}}

/* Pausa del vídeo: círculo discreto, fuera de la retícula del texto. */
.hero-pause{
  position:absolute;left:clamp(16px,3vw,38px);bottom:clamp(16px,3vw,34px);z-index:3;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:rgba(255,255,255,.85);
  cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
.hero-pause:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.hero-pause .ico-play{display:none}
/* Pausado: el botón ofrece reanudar. */
.hero-pause[aria-pressed="true"] .ico-pause{display:none}
.hero-pause[aria-pressed="true"] .ico-play{display:block}
/* Sin vídeo (foto fija o movimiento reducido) no hay nada que pausar. */
.hero.no-video .hero-pause{display:none}

/* La banda `.trust` que iba bajo el hero se ha retirado: sus cuatro
   claves son ahora el pie del propio hero (`.hero-foot`). */
a.aud{display:flex;flex-direction:column;text-decoration:none;transition:border-color .2s,transform .2s}
a.aud p{flex:1;margin-bottom:16px}
a.aud:hover{border-color:var(--accent);transform:translateY(-3px)}

/* ---------- accesos a servicios (con imagen) ---------- */
.sec-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:38px}
.sec-head-row .sec-head{margin-bottom:0}
.link-arrow{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.link-arrow:hover{text-decoration:underline}

/* ---------- qué hacemos (home): galería serena ----------
   Jerarquía clara: titular, imagen principal grande, otra principal a su
   lado, una secundaria discreta y el índice de servicios. Mismo
   tratamiento tonal en las tres fotos (un velo uniforme muy suave), gaps
   finos y radios de 14 px. Todo bajo `.svx`; `.svc` sigue sirviendo a
   las páginas de servicio. */
.svx{background:var(--ebano);color:var(--marfil);padding:var(--sect) 0}
.svx-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)}

.svx-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(40px,5vw,64px)}
.svx .svx-eyebrow{font-size:11.5px;letter-spacing:.24em;color:var(--camel-suave);margin-bottom:clamp(16px,1.8vw,22px)}
.svx-t{
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(32px,3.7vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--marfil);margin:0;
}
.svx-t span{color:var(--camel-suave)}
.svx-link{
  display:inline-flex;align-items:center;gap:14px;padding-bottom:6px;
  font-size:14.5px;font-weight:500;color:var(--camel-suave);text-decoration:none;white-space:nowrap;
}
.svx-link i{display:block;width:56px;height:1px;background:currentColor;transform:scaleX(.715);transform-origin:left;transition:transform 260ms var(--ease-out)}
.svx-link:hover{color:var(--marfil)}
.svx-link:hover i{transform:none}
.svx-link:focus-visible{outline:2px solid var(--camel);outline-offset:4px;border-radius:2px}

/* La galería. Escritorio: principal grande a la izquierda; a la derecha,
   la otra principal arriba y la secundaria, más baja, debajo. */
.svx-gal{display:grid;gap:14px}
.svx-foto{position:relative;display:block;overflow:hidden;border-radius:14px;background:#141312}
.svx-foto img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(.96);
  transition:transform 300ms var(--ease-out),filter 300ms ease;
}
.svx-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,12,14,.18),rgba(10,12,14,.10));
}
.svx-foto:hover img,.svx:has(.svx-item[data-k="1"]:is(:hover,:focus-visible)) .svx-a img,
.svx:has(.svx-item[data-k="2"]:is(:hover,:focus-visible)) .svx-b img,
.svx:has(.svx-item[data-k="3"]:is(:hover,:focus-visible)) .svx-c img{
  transform:scale(1.02);filter:saturate(.9) contrast(.96) brightness(1.06);
}
.svx-a img{object-position:center 20%}
.svx-b img{object-position:center 62%}
.svx-c img{object-position:center 58%}
@media(min-width:1024px){
  .svx-gal{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);grid-template-rows:minmax(0,1.62fr) minmax(0,1fr);height:clamp(520px,44vw,640px)}
  .svx-a{grid-row:1 / 3}
}
/* Tablet: solo las dos principales, lado a lado. Móvil: apiladas. */
@media(max-width:1023px){
  .svx-c{display:none}
  .svx-gal{grid-template-columns:1fr 1fr}
  .svx-foto{aspect-ratio:4 / 5}
}
@media(max-width:639px){
  .svx-gal{grid-template-columns:1fr}
  .svx-foto{aspect-ratio:4 / 3}
}
@media(prefers-reduced-motion:reduce){.svx-foto img,.svx-link i{transition:none}}

/* El índice de servicios: cuatro columnas abiertas con un filete arriba;
   2x2 en tablet y una columna en móvil. */
.svx-lista{list-style:none;display:grid;gap:0 clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
@media(min-width:640px){.svx-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.svx-lista{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svx-item{
  display:flex;flex-direction:column;height:100%;
  padding:22px 0 26px;border-top:1px solid rgba(242,238,230,.14);
  color:inherit;text-decoration:none;transition:border-color .26s;
}
.svx-n{font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--camel);margin-bottom:12px}
.svx-item h3{
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(19px,1.5vw,22px);line-height:1.25;color:var(--marfil);margin-bottom:10px;transition:color .26s;
}
.svx-item p{font-size:14.5px;line-height:1.6;color:var(--topo-claro);margin-bottom:16px}
.svx-mas{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--camel-suave)}
.svx-mas svg{transition:transform .26s}
.svx-item:hover{border-top-color:var(--camel)}
.svx-item:hover h3{color:#fff}
.svx-item:hover .svx-mas svg{transform:translate(2px,-2px)}
.svx-item:focus-visible{outline:2px solid var(--camel);outline-offset:4px;border-radius:2px}

/* ---------- servicios: cuatro columnas a sangre ----------
   En reposo la columna está oscurecida y solo enseña número y nombre.
   Al pasar el cursor se aclara y sube el detalle. Es un bloque oscuro
   dentro de una página clara, así que los colores son fijos: no
   dependen del tema. */
/* A sangre, de borde a borde de la pantalla. */
.svc-wrap{width:100%}

/* ---------- bandas de alcance (páginas de servicio) ----------
   Fotografía a sangre y, encima, el título grande con su localización y
   un acceso a la derecha. Se usa en las páginas de servicio para contar
   qué incluye cada uno. Colores fijos: siempre sobre fotografía. */
.bandas{display:flex;flex-direction:column;gap:1px;background:#2A2E34}
.banda{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(300px,38vw,440px);padding:clamp(26px,3.4vw,44px);
  overflow:hidden;text-decoration:none;color:#fff;background:#15171B;
  isolation:isolate;
}
.banda-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 300ms var(--ease-out);
}
.banda:hover .banda-img{transform:scale(1.04)}
/* El degradado viene de la izquierda, que es donde se apoya el texto. */
.banda::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, rgba(10,11,13,.82) 0%, rgba(10,11,13,.5) 44%, rgba(10,11,13,.12) 80%),
    linear-gradient(to top, rgba(10,11,13,.5) 0%, transparent 46%);
}
.banda-in{position:relative;max-width:62ch;width:100%}

/* Localización, con el punto de mapa, encima del título. */
.banda-loc{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:12px;
}
.banda-loc svg{flex:none;opacity:.9}
.banda h3{
  font-size:clamp(26px,3.6vw,44px);font-weight:400;color:#fff;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1;margin-bottom:12px;
}
.banda p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.84);max-width:52ch;margin-bottom:18px}

/* Fichas de datos: lo que define el alcance, en cajas pequeñas. */
.banda-datos{display:flex;flex-wrap:wrap;gap:8px}
.banda-dato{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;font-size:12.5px;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.banda-dato svg{flex:none;opacity:.85}

@media(min-width:900px){.banda-in{max-width:56%}}

/* ---------- vitrina de proyectos (home) ----------
   «Arquitectura vista a través de una capa de vidrio». Sobre una
   fotografía de fondo van dos piezas, cada una con su radio: a la
   izquierda la ficha, en vidrio cálido; a la derecha la promoción a
   sangre, que es la protagonista. La promoción es siempre Aixovall:
   las flechas y el indicador recorren sus vistas. Ninguna imagen va
   montada sobre otra: ni miniaturas sobre la foto ni dentro de la ficha.
   El vidrio se usa SOLO aquí (ficha, filtro y flechas): el resto del
   sitio sigue sobrio. */
.carr{padding-top:0;padding-bottom:clamp(64px,6.3vw,90px)}
/* La fila de las otras promociones va después de la vitrina. */
.carr .sub-head{margin-top:clamp(48px,5vw,72px);margin-bottom:32px}

/* El fondo de la sección: la fotografía tal cual, sin desenfocar. El
   único desenfoque es el del vidrio. El velo es mínimo, para no apagar
   la luz de la imagen. */
.carr-fondo{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(20px,3vw,44px) 0;
}
.carr-fondo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/andorra-aerea.webp") center/cover no-repeat;
}
.carr-fondo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(12,13,15,.14), rgba(12,13,15,.26));
}

/* Las dos piezas. En móvil van apiladas: la ficha arriba, la imagen
   debajo. */
.carr-wrap{
  position:relative;margin:0 auto;
  width:calc(100% - var(--gutter) * 2);max-width:1640px;
  display:flex;flex-direction:column;gap:14px;
}

/* ── La ficha, en vidrio cálido ── */
.carr-ficha{
  order:1;
  display:flex;flex-direction:column;
  padding:clamp(26px,6vw,40px);color:#171717;
  border-radius:22px;border:1px solid rgba(255,255,255,.55);
  background:rgba(247,242,233,.58);
  /* brightness(1.16) aclara lo que se ve a través del vidrio: sobre las
     zonas oscuras de la foto el panel quedaba gris y las etiquetas
     pequeñas perdían contraste. */
  -webkit-backdrop-filter:blur(17px) saturate(125%) brightness(1.16);
  backdrop-filter:blur(17px) saturate(125%) brightness(1.16);
  /* Sombra muy suave y un brillo fino en el canto superior. */
  box-shadow:0 14px 42px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.42);
}
.carr-ficha .eyebrow{color:#9A6B3F;font-size:11.5px;letter-spacing:.22em;margin-bottom:20px}
/* El titular: grande y editorial, en tres líneas. Va con el ancho de la
   pantalla porque la ficha también: a 3,4vw ocupa lo mismo que en la
   referencia. */
.carr-ficha-t{
  font-size:clamp(34px,3.4vw,68px);line-height:1.03;letter-spacing:-.018em;
  margin-bottom:clamp(16px,1.6vw,24px);color:#171717;
}
.carr-ficha-p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.6;color:rgba(23,23,23,.66);max-width:400px;margin-bottom:clamp(22px,2vw,28px)}
.carr-ficha-cta{
  align-self:flex-start;height:50px;padding:0 26px;border-radius:999px;
  font-size:14.5px;font-weight:500;
  background:#181818;color:#fff;border-color:#181818;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.carr-ficha-cta:hover{background:#000;border-color:#000}

/* Los datos de la promoción: número grande y etiqueta pequeña, con
   filetes verticales finos. */
.carr-datos{
  display:flex;flex-wrap:wrap;row-gap:10px;
  margin:clamp(24px,2.2vw,30px) 0 clamp(22px,2vw,28px);
  padding-top:clamp(22px,2vw,28px);border-top:1px solid rgba(23,23,23,.12);
}
.carr-dato{padding:0 clamp(12px,1.5vw,26px);border-left:1px solid rgba(23,23,23,.14);white-space:nowrap}
.carr-dato:first-child{padding-left:0;border-left:0}
.carr-dato:last-child{padding-right:0}
.carr-dato b{display:block;font-size:clamp(21px,2vw,30px);font-weight:500;line-height:1.15;color:#171717}
.carr-dato span{font-size:12px;color:rgba(23,23,23,.56)}

/* Controles: flechas pequeñas de vidrio y, a su derecha, el indicador,
   que se prolonga en una línea fina. */
.carr-nav{display:flex;align-items:center;gap:10px;margin-top:auto}
.carr-flecha{
  width:40px;height:40px;border-radius:50%;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.4);border:1px solid rgba(23,23,23,.14);color:#171717;
  transition:background .2s,color .2s,border-color .2s;
}
.carr-flecha:hover{background:#181818;border-color:#181818;color:#fff}
.carr-puntos{flex:1;display:flex;align-items:center;gap:6px;margin-left:14px}
.carr-puntos::after{content:"";flex:1;height:1px;background:rgba(23,23,23,.14);margin-left:6px}
.carr-punto{
  width:6px;height:6px;border-radius:999px;background:rgba(23,23,23,.22);
  transition:width .3s,background .3s;
}
.carr-punto.is-activo{width:24px;height:4px;background:#9A6B3F}

/* ── La fotografía ── */
.carr-escena{
  order:2;position:relative;overflow:hidden;
  border-radius:22px;background:#15171B;
  box-shadow:0 14px 42px rgba(0,0,0,.10);
}
.carr-panel{position:relative;display:block}
.carr-foto{
  display:block;width:100%;object-fit:cover;
  height:clamp(380px,70vw,560px);
}
.carr-foto[hidden]{display:none}
/* Al cambiar de foto: transición (se puede interrumpir si se pulsan las
   flechas seguidas), no keyframes, que reinician desde cero. */
.carr-foto.is-activa{opacity:1;transition:opacity 300ms var(--ease-out)}
@starting-style{.carr-foto.is-activa{opacity:.35}}
/* El texto va directamente sobre la imagen, sostenido por un degradado
   inferior muy suave. No hay caja negra. */
.carr-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 45%, transparent 75%);
}
.carr-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,3.2vw,52px);color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.carr-tipo{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.88);margin-bottom:12px;
}
.carr-info h3{font-size:clamp(28px,3.3vw,58px);color:#fff;line-height:1.05;margin-bottom:12px}
/* La descripción, dos líneas como mucho. */
.carr-texto{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);
  max-width:56ch;margin-bottom:22px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.carr-cta{
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 24px;border-radius:999px;
  background:rgba(255,255,255,.94);color:#171717;text-shadow:none;
  font-size:14px;font-weight:500;text-decoration:none;
  transition:background .2s;
}
.carr-cta:hover{background:#fff}
.carr-cta svg{transition:transform .2s}
.carr-cta:hover svg{transform:translateX(3px)}

/* Filtro por mercado: una cápsula marfil arriba a la derecha de la
   fotografía, con el activo en oscuro. */
.carr-filtro{
  position:absolute;top:clamp(14px,1.7vw,26px);right:clamp(14px,1.7vw,26px);z-index:4;
  display:flex;gap:2px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.65);
}
.carr-f{
  height:34px;padding:0 17px;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;
  color:#171717;background:transparent;
  transition:background .25s,color .25s;
}
.carr-f:hover{background:rgba(23,23,23,.07)}
.carr-f.is-activo{background:#181818;color:#fff}

/* Tableta: ficha 40 % / fotografía 60 %, una junto a otra. En el HTML
   la fotografía va primero, así que la columna de cada una se asigna a
   mano. */
@media(min-width:860px){
  .carr-wrap{display:grid;grid-template-columns:40% 1fr;gap:14px}
  .carr-ficha{
    grid-column:1;grid-row:1;border-radius:24px;padding:clamp(28px,3.4vw,40px);
    -webkit-backdrop-filter:blur(24px) saturate(125%) brightness(1.16);
    backdrop-filter:blur(24px) saturate(125%) brightness(1.16);
  }
  .carr-escena{grid-column:2;grid-row:1;border-radius:24px}
  .carr-panel{height:100%}
  .carr-foto{height:100%;min-height:clamp(520px,60vw,640px)}
}
/* Escritorio: ficha 34 % / fotografía 66 %. */
@media(min-width:1100px){
  .carr-wrap{grid-template-columns:34% 1fr;gap:16px;width:min(92%,1640px)}
  .carr-ficha{padding:clamp(34px,3.2vw,52px)}
  .carr-foto{min-height:clamp(560px,50vw,820px)}
}
/* Sin JavaScript se queda la vista principal: flechas y filtro sobran.
   `html` solo lleva `js-on` cuando main.js ha corrido. */
html:not(.js-on) .carr-nav,
html:not(.js-on) .carr-filtro{display:none}

/* ---------- otras promociones (home): tarjetas de solo imagen ----------
   En reposo, solo la fotografía y un control pequeño. La ficha del
   proyecto aparece al pasar el cursor, o al llegar con el teclado.
   Regla de la casa: en escritorio ninguna tarjeta enseña texto hasta
   entonces. Las clases .proj / .proj-rail siguen siendo las del porfolio
   y de la página de promotores: aquí no se usan. */
/* El contenedor es más ancho que la retícula del sitio (1180 px): las
   fotografías son las protagonistas. En escritorio coincide con los
   bordes del panel de Aixovall que tiene encima. */
.cat-wrap{width:calc(100% - var(--gutter) * 2);max-width:1520px;margin:0 auto}
/* El filtro «Catalunya» de la vitrina trae aquí: se deja un respiro arriba. */
#catalunya{scroll-margin-top:24px}
@media(min-width:1100px){.cat-wrap{width:min(92%,1520px)}}

/* Una columna en móvil, dos desde 768 px, tres desde 1200 px. El
   tamaño crece sobre todo en ancho y alto de tarjeta; la separación
   apenas cambia. */
.cat-rail{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:768px){
  .cat-rail{grid-template-columns:repeat(2,1fr);gap:22px}
  /* Con tres tarjetas en dos columnas, la tercera ocupa la fila entera. */
  .cat-rail .cat:nth-child(3){grid-column:1 / -1}
}
@media(min-width:1200px){
  .cat-rail{grid-template-columns:repeat(3,1fr)}
  .cat-rail .cat:nth-child(3){grid-column:auto}
}
.cat{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  height:clamp(260px,62vw,340px);
  border-radius:16px;border:1px solid rgba(255,255,255,.07);
  background:#15171B;color:#fff;text-decoration:none;
}
@media(min-width:768px){.cat{height:clamp(300px,34vw,380px)}}
@media(min-width:1200px){.cat{height:clamp(350px,28vw,390px)}}
@media(min-width:1440px){.cat{height:clamp(400px,28vw,440px)}}
.cat-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
/* El degradado que sostiene el texto: oscuro, no una caja. Entra a la
   vez que la ficha. */
.cat::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(8,10,12,.94) 0%, rgba(8,10,12,.68) 38%, rgba(8,10,12,.18) 72%, transparent 100%);
  opacity:0;transition:opacity .28s ease-out;
}
.cat-info{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px;
  opacity:0;transform:translateY(14px);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.cat-tag{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.cat-info h3{font-size:clamp(26px,2.2vw,34px);line-height:1.1;color:#F7F4F0;margin-bottom:10px}
.cat-info p{
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin-bottom:14px;max-width:46ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.cat-cta{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--accent)}

/* El control: un círculo pequeño con la flecha, discreto. */
.cat-ico{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,13,15,.42);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background .25s,color .25s,transform .25s;
}

.cat:hover .cat-img,.cat:focus-visible .cat-img{transform:scale(1.02)}
.cat:hover::after,.cat:focus-visible::after{opacity:1}
.cat:hover .cat-info,.cat:focus-visible .cat-info{opacity:1;transform:none}
.cat:hover .cat-ico,.cat:focus-visible .cat-ico{background:#fff;color:#15171B;transform:translate(2px,-2px)}

/* Con la tarjeta grande de escritorio: más margen interior, texto un
   punto mayor y el control algo más grande, sin dejar de ser discreto. */
@media(min-width:1200px){
  .cat-info{padding:clamp(28px,2vw,32px)}
  .cat-info h3{font-size:clamp(28px,2.2vw,34px)}
  .cat-info p{font-size:15px}
  .cat-ico{top:18px;right:18px;width:44px;height:44px}
  .cat-ico svg{width:16px;height:16px}
}

/* Sin cursor (móvil y tableta táctil) no hay forma de pasar por encima:
   la ficha se ve siempre, en compacto. */
@media(hover:none){
  .cat::after{
    opacity:1;
    background:linear-gradient(to top, rgba(8,10,12,.94) 0%, rgba(8,10,12,.8) 45%, rgba(8,10,12,.5) 70%, transparent 100%);
  }
  .cat-info{opacity:1;transform:none}
  .cat-info h3{font-size:24px}
  .cat-info p{-webkit-line-clamp:2;margin-bottom:10px}
}

/* ---------- proyectos ---------- */
.feat{
  display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--surface);text-decoration:none;
  transition:box-shadow .25s,border-color .25s;
}
.feat:hover{box-shadow:var(--shadow-lg);border-color:var(--ink-3)}
@media(min-width:900px){.feat{grid-template-columns:1.35fr .65fr}}
.feat-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.feat-img img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
.feat:hover .feat-img img{transform:scale(1.03)}
.feat-badge{
  position:absolute;left:16px;top:16px;z-index:2;
  padding:7px 12px;border-radius:var(--radius);
  background:rgba(12,13,16,.62);backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.feat-body{padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.feat-body .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.feat-body h3{font-size:clamp(22px,2.6vw,28px);margin:8px 0 10px}
.feat-body p{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.feat-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px;font-size:13px;color:var(--ink-3)}
.feat-facts b{color:var(--ink);font-weight:600}
.feat-more{font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px}

/* Los de fuera de Andorra: presentes, pero claramente secundarios.
   En móvil se convierten en un carril horizontal, como en la referencia. */
.sub-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
  margin:44px 0 18px;padding-top:22px;border-top:1px solid var(--line);
}
.sub-head p{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.proj-rail{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){
  .proj-rail{
    grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--wrap-pad) * -1);padding-inline:var(--wrap-pad);
    scrollbar-width:none;
  }
  .proj-rail::-webkit-scrollbar{display:none}
  .proj{scroll-snap-align:start}
}
.proj{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);
  text-decoration:none;display:block;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.proj:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink-3)}
.proj-img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform 300ms var(--ease-out)}
.proj:hover .proj-img img{transform:scale(1.04)}
.proj-body{padding:16px 18px 20px}
.proj-body .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.proj-body h3{font-size:18px;margin:6px 0 4px}
.proj-body p{font-size:13.5px;color:var(--ink-2)}

/* ---------- problema ---------- */
.band{background:var(--band);color:var(--band-ink)}
.band h2,.band h3{color:var(--band-ink)}
.band .lede{color:var(--band-ink-2)}
/* El problema: cinco tarjetas y un cierre. Antes era una rejilla con
   filetes de 1 px entre celdas, que se leía como una tabla; ahora son
   piezas separadas, con el número arriba y el mensaje apoyado abajo.
   Los colores son los de la casa: fondo algo más claro que el del
   sitio, tarjeta un punto por encima y el camel solo como acento. */
#problema{background:#111315}
#problema .sec-head{margin-bottom:clamp(60px,5.8vw,80px)}

.pain-grid{display:grid;gap:18px}
.pain-fila{display:grid;gap:18px;grid-template-columns:1fr}
/* Dos columnas: la tarjeta destacada y el cierre ocupan la fila entera. */
@media(min-width:700px){
  .pain-fila{grid-template-columns:repeat(2,1fr)}
  .pain-dest,.pain.cta-cell{grid-column:1 / -1}
}
/* Tres columnas. La primera fila abre con la 01 más ancha; la segunda
   cierra con el CTA más ancho. */
@media(min-width:1050px){
  .pain-fila{grid-template-columns:1.25fr 1fr 1fr}
  .pain-fila-b{grid-template-columns:1fr 1fr 1.25fr}
  .pain-dest,.pain.cta-cell{grid-column:auto}
}

.pain{
  display:flex;flex-direction:column;
  padding:clamp(27px,2.65vw,36px) clamp(24px,2.4vw,32px);
  background:#17191B;border:1px solid rgba(255,255,255,.05);border-radius:16px;
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
/* Con alto de sobra, el número se queda arriba y el texto baja. */
@media(min-width:700px){.pain{min-height:clamp(252px,23vw,300px)}}
.pain .n{
  display:block;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-hover);margin-bottom:36px;
}
.pain h3{
  margin-top:auto;font-size:clamp(22px,1.9vw,25px);line-height:1.15;
  color:#F4F2EF;margin-bottom:10px;
}
.pain p{font-size:15px;line-height:1.55;color:var(--band-ink-2);max-width:42ch}
/* La 01 abre la serie: un punto más de titular. */
.pain-dest h3{font-size:clamp(24px,2.3vw,28px)}

/* Al pasar el cursor: un punto más clara, filete camel muy tenue y dos
   píxeles hacia arriba. Nada más. */
.pain:not(.cta-cell):hover{
  background:#1C1F22;
  border-color:color-mix(in srgb,var(--accent) 25%,transparent);
  transform:translateY(-2px);
}

/* El cierre: la misma tarjeta, en camel sólido y con texto oscuro. */
.pain.cta-cell{background:var(--accent);border-color:var(--accent);padding:clamp(30px,2.9vw,40px) clamp(27px,2.7vw,36px)}
.pain.cta-cell h3{font-size:clamp(24px,2.2vw,28px);color:#111315}
.pain.cta-cell p{color:rgba(17,19,21,.8);margin-bottom:30px}
.pain.cta-cell .btn{
  align-self:flex-start;border-radius:999px;
  background:#111315;border-color:#111315;color:#F4F2EF;
}
.pain.cta-cell .btn:hover{background:#000;border-color:#000}

/* ---------- la solución ----------
   Sección editorial: mensaje a la izquierda, fotografía a la derecha y,
   debajo, un filete con los tres beneficios. Todo va bajo `.sol`, con
   sus propios colores, para no tocar nada fuera de esta sección.
     ébano  #0a090a  fondo           carbón #343433  filetes
     marfil #f2eee6  texto           topo   #8b7e73  texto secundario
     camel  #a98b6e  acento y botón */
.sol{background:var(--ebano);color:var(--marfil)}

.sol-top{display:grid;gap:clamp(32px,6vw,56px);align-items:center}
@media(min-width:900px){
  .sol-top{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,5.5vw,84px)}
}

.sol .sol-eyebrow{color:var(--camel);letter-spacing:.24em;margin-bottom:clamp(20px,2.2vw,30px)}
/* El titular va en la sans de la web y en peso ligero: destaca por
   tamaño y aire, no por negrita. Solo «interlocutor.» sube de peso y
   pasa a camel. Queda por debajo del titular del hero a propósito. */
.sol-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(38px,4.7vw,66px);line-height:1.04;letter-spacing:-.03em;
  color:var(--marfil);margin-bottom:clamp(22px,2.4vw,32px);
}
.sol-t strong{font-weight:600;color:var(--camel)}
.sol-p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--topo);max-width:36ch;margin-bottom:clamp(28px,3vw,40px)}
.sol .sol-cta{
  gap:12px;padding:16px 28px;border-radius:999px;
  background:var(--camel);border-color:var(--camel);color:var(--ebano);font-weight:600;
}
.sol .sol-cta:hover{background:#b99b7e;border-color:#b99b7e}
/* La flecha es diagonal: al pasar el cursor sube en diagonal, no hacia
   la derecha como en el resto de botones. */
.sol .sol-cta:hover svg{transform:translate(2px,-2px)}

/* La fotografía: amplia, con las esquinas suaves y nada encima. */
.sol-foto{margin:0;border-radius:18px;overflow:hidden;background:#141312}
.sol-foto img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;
  object-fit:cover;object-position:32% 50%;
}
@media(min-width:900px){.sol-foto img{aspect-ratio:5 / 4}}

/* Los beneficios, bajo un filete fino. En móvil van uno debajo de otro,
   separados por el mismo filete. */
.sol-benef{
  list-style:none;display:grid;gap:0;
  margin-top:clamp(48px,6.5vw,92px);border-top:1px solid var(--carbon);
}
.sol-benef li{padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--carbon)}
.sol-benef li:last-child{border-bottom:0;padding-bottom:0}
.sol-benef h3{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;
  font-size:clamp(18px,1.55vw,21px);line-height:1.3;letter-spacing:-.005em;
  color:var(--marfil);margin-bottom:8px;
}
.sol-n{color:var(--camel);font-weight:600;font-size:.72em;letter-spacing:.14em}
.sol-raya{color:var(--carbon);margin:0 .7em}
.sol-benef p{font-size:15px;line-height:1.55;color:var(--topo)}
@media(min-width:760px){
  .sol-benef{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,60px)}
  .sol-benef li{border-bottom:0;padding-bottom:0}
}

/* ---------- la diferencia (comparativa de la home) ----------
   Dos columnas abiertas, alineadas fila a fila, con solo filetes
   horizontales: sin caja exterior ni celdas. Sigue el fondo y la paleta
   de «La solución», y todo va bajo `.dif`.
   La tabla `.cmp` de más abajo es otra cosa: la usa la página de
   project management y no se toca.
     ébano  #0a090a  fondo        carbón #343433  filetes
     marfil #f2eee6  «con NODUS»   camel  #a98b6e  acento
     topo, aclarado para leerse bien sobre ébano:
       #a79d92 el texto de «sin NODUS», #9a8d81 su rótulo */
.dif{background:var(--ebano);color:var(--marfil);padding-top:0}

.dif-cab{margin-bottom:clamp(40px,5vw,72px)}
.dif .dif-eyebrow{color:var(--camel);letter-spacing:.24em;margin-bottom:clamp(18px,2vw,26px)}
/* Más contenido que el titular de «La solución»: misma sans ligera. */
.dif-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(25px,3.3vw,46px);line-height:1.14;letter-spacing:-.025em;color:var(--marfil);
}
.dif-t span{color:var(--camel)}

/* La cabecera de columnas solo existe en escritorio. */
.dif-enc{display:none}
.dif-lista{list-style:none;border-bottom:1px solid var(--carbon)}
.dif-fila{
  display:grid;gap:16px;
  padding:clamp(20px,2.1vw,26px) 0;border-top:1px solid var(--carbon);
}
.dif-sin,.dif-con{font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.45}
.dif-sin{color:var(--topo-claro)}
/* La columna que importa: peso medio y una marca de verificación. */
.dif-con{color:var(--marfil);font-weight:500}
.dif-v{display:flex;align-items:flex-start;gap:12px}
.dif-v svg{flex:none;margin-top:.26em;color:var(--camel)}
/* Rótulo de cada lado: en móvil va encima de su texto. */
.dif-et{
  display:block;margin-bottom:7px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9a8d81;
}
.dif-con .dif-et{color:var(--camel)}
/* La última pareja cierra la serie: algo más de aire y el beneficio en
   camel, apenas un punto mayor. */
.dif-fila-fin{padding:clamp(26px,3vw,38px) 0}
.dif-fila-fin .dif-con{color:var(--camel);font-weight:600;font-size:clamp(16.5px,1.4vw,19px)}

@media(min-width:720px){
  .dif-enc,.dif-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,84px)}
  .dif-enc{
    display:grid;padding-bottom:18px;
    font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9a8d81;
  }
  /* El rótulo de la derecha se alinea con el texto, no con la marca
     de verificación (15 px de marca + 12 px de separación). */
  .dif-enc span:last-child{color:var(--camel);padding-left:27px}
  .dif-fila{row-gap:0;align-items:start}
  /* Los rótulos de fila se ocultan a la vista, no a los lectores de
     pantalla: la cabecera de columnas ya los enseña. */
  .dif-et{
    position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* ---------- comparativa ---------- */
.cmp{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-row>div{padding:15px 18px;font-size:14.5px}
.cmp-row>div:first-child{color:var(--ink-3);border-right:1px solid var(--line)}
.cmp-head>div{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--surface-2)}
.cmp-head>div:last-child{color:var(--accent)}
.cmp-row>div:last-child{font-weight:500}

/* ---------- método ---------- */
/* El método NODUS (home): encabezado, fotografía en vertical y las siete
   fases en lista abierta. Mismo fondo y paleta que «La solución» y «La
   diferencia»; todo va bajo `.met`. Las reglas `.steps` / `.step` de
   más abajo son las de las páginas de servicio y no se tocan.
     ébano  #0a090a  fondo     carbón #343433  filetes
     marfil #f2eee6  texto     camel  #a98b6e  acento y números
     topo aclarado (#a79d92) en las descripciones, como en la comparativa */
/* Viene de otra sección con el mismo fondo, así que no repite el margen
   de arriba; el menú salta aquí, y `scroll-margin` le deja ese aire. */
.met{background:var(--ebano);color:var(--marfil);padding-top:0;scroll-margin-top:var(--sect)}

.met-cab{margin-bottom:clamp(40px,5vw,72px)}
.met .met-eyebrow{color:var(--camel);letter-spacing:.24em;margin-bottom:clamp(18px,2vw,26px)}
.met-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(25px,3.3vw,46px);line-height:1.14;letter-spacing:-.025em;color:var(--marfil);
  margin-bottom:clamp(16px,1.8vw,24px);
}
.met-t span{color:var(--camel)}
.met-p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--topo-claro);max-width:52ch}

.met-cuerpo{display:grid;gap:clamp(32px,6vw,48px)}

/* La fotografía. En móvil va apaisada, para no retrasar la lectura de
   las fases; en escritorio ocupa todo el alto de la lista. */
.met-foto{margin:0;border-radius:18px;overflow:hidden;background:#141312}
.met-foto img{
  display:block;width:100%;height:auto;aspect-ratio:16 / 10;
  object-fit:cover;object-position:34% 50%;
}

/* Las fases: lista abierta, con un filete entre una y otra. El número
   va en su propia columna, de ancho fijo, para que nombres y textos
   queden alineados en las siete. */
.met-fases{list-style:none;border-top:1px solid var(--carbon)}
.met-fase{
  display:grid;grid-template-columns:clamp(58px,6.4vw,86px) minmax(0,1fr);align-items:baseline;
  padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--carbon);
}
.met-n{font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--camel);white-space:nowrap}
.met-raya{color:var(--carbon);margin-left:.7em;letter-spacing:0}
.met-txt h3{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.3;letter-spacing:.14em;
  color:var(--marfil);margin-bottom:6px;
}
.met-txt p{font-size:clamp(15px,1.2vw,16.5px);line-height:1.5;color:var(--topo-claro)}

.met .met-cta{
  margin-top:clamp(28px,3.2vw,40px);
  gap:12px;padding:16px 28px;border-radius:999px;
  background:var(--camel);border-color:var(--camel);color:var(--ebano);font-weight:600;
}
.met .met-cta:hover{background:#b99b7e;border-color:#b99b7e}
.met .met-cta:hover svg{transform:translate(2px,-2px)}

@media(min-width:900px){
  .met-cuerpo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(44px,6.5vw,104px);align-items:stretch}
  /* La foto se estira al alto de la columna de la lista: su borde de
     arriba coincide con el filete de la primera fase y el de abajo con
     el final del bloque. La imagen llena ese hueco sin deformarse. */
  .met-foto{position:relative;min-height:440px}
  .met-foto img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}

/* ---------- control económico ----------
   Fotografía de fondo a todo el ancho y, encima, el mensaje y un panel
   de vidrio con los cuatro puntos. Todo va bajo `.ctl`.
     Versión clara: la escena arquitectónica se ve, el negro casi
     desaparece y el texto se apoya en una sombra suave a la izquierda.
     blanco cálido #f8f6f2  texto     camel cálido #cf9e79  acentos
     (colores muestreados de la referencia aprobada)

   El fondo. Hoy solo hay la foto vertical del patio (736×988). Para no
   ampliarla, va a su proporción natural y a toda la altura de la
   sección, centrada: se ven el árbol, el lucernario, el banco y el
   suelo. A los lados, la misma foto desenfocada hace de extensión.
   Cuando exista la versión horizontal ampliada:
     1. guárdala en assets/img/ y pon su ruta en --ctl-foto;
     2. añade la clase `ctl--horizontal` a la <section>.
   Con esa clase la foto pasa a `cover` y la extensión desaparece. */
.ctl{
  --ctl-foto:url("/assets/img/control-atrio.webp");
  /* Camel de la sección, un punto más luminoso que el muestreado (#cf9e79)
     para que los acentos lleguen al contraste AA sobre la foto y el vidrio. */
  --ctl-camel:#e2bb95;
  position:relative;isolation:isolate;overflow:hidden;
  /* Color de respaldo mientras llega la foto (o si falla): oscuro para
     que el texto se lea igual. */
  background:#4a4f53;color:#f8f6f2;
  padding:clamp(72px,6.4vw,120px) 0;
}
.ctl-bg{position:absolute;inset:0;z-index:-2}
/* La extensión lateral: la foto, a cubrir y muy desenfocada. Se
   amplía un poco solo para que el desenfoque no deje bordes claros;
   es relleno, no la imagen que se lee. */
.ctl-bg::before{
  content:"";position:absolute;inset:-60px;
  background:var(--ctl-foto) 50% 45% / cover no-repeat;
  filter:blur(38px) saturate(.85) brightness(1.08);
}
/* La foto, a su proporción: una caja a toda la altura, con el ancho que
   le da su relación de aspecto (736/988), centrada. Los bordes se
   funden con la extensión. */
.ctl-bg::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  height:100%;aspect-ratio:736 / 988;transform:translateX(-50%);
  background:var(--ctl-foto) 50% 50% / cover no-repeat;
  filter:brightness(1.24) contrast(.92) saturate(.9);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
/* Con la versión horizontal: la foto cubre, sin extensión ni máscara. */
/* El tono frío de la referencia: un azul multiplicado al 50 % sobre la
   foto. La capa va encima de ella. */
.ctl--horizontal .ctl-bg::before{
  display:block;inset:0;z-index:1;filter:none;background:rgb(199,219,255);
  mix-blend-mode:multiply;opacity:.5;
}
.ctl--horizontal .ctl-bg::after{left:0;right:0;width:auto;aspect-ratio:auto;transform:none;-webkit-mask-image:none;mask-image:none;background-position:center center;
  /* Más oscura que el archivo, como en la referencia. */
  filter:brightness(.8) contrast(.95) saturate(.9)}
/* En pantallas estrechas el recorte es mayor: se encuadra sobre el
   árbol, que está al 40 % del ancho de la foto. */
@media(max-width:1199px){.ctl--horizontal .ctl-bg::after{background-position:38% center}}

/* El velo: solo una sombra suave detrás del bloque izquierdo, para el
   titular. El resto de la escena queda a la vista, sin oscurecer ni
   fundir a negro arriba y abajo. */
.ctl::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(10,12,14,.52) 0%, rgba(10,12,14,.32) 26%, rgba(10,12,14,.12) 48%, rgba(10,12,14,.04) 65%, rgba(10,12,14,0) 100%);
}

/* El contenedor: más ancho que la retícula del sitio. */
.ctl-grid{
  position:relative;margin:0 auto;width:calc(100% - var(--gutter) * 2);
  display:grid;gap:clamp(36px,6vw,56px);align-items:center;
}

.ctl .ctl-eyebrow{color:var(--ctl-camel);letter-spacing:.26em;margin-bottom:clamp(22px,2.4vw,36px)}
.ctl-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(34px,4vw,76px);line-height:1.08;letter-spacing:-.028em;color:#f8f6f2;
  margin-bottom:clamp(24px,2.6vw,42px);
}
.ctl-t span{color:var(--ctl-camel)}
.ctl-p{
  font-size:clamp(18px,1.45vw,28px);font-weight:400;line-height:1.45;
  color:#f8f6f2;max-width:400px;
}
.ctl-txt{text-shadow:0 1px 2px rgba(14,16,18,.28),0 2px 22px rgba(14,16,18,.32)}

/* El panel de vidrio: claro y sobrio. La transparencia y el desenfoque
   van en el fondo, nunca en el contenedor, para que el texto quede
   nítido. Sin desenfoque, un gris piedra más denso. */
.ctl-panel{
  border-radius:clamp(24px,2.2vw,30px);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(84,92,100,.72);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  padding:clamp(28px,3.4vw,64px);
  text-shadow:0 1px 2px rgba(14,16,18,.25);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ctl-panel{
    /* Medido contra la referencia: su vidrio es un gris piedra más
       profundo que rgba(84,92,100,.18); este es el que mejor la iguala. */
    background:rgba(46,52,58,.56);
    -webkit-backdrop-filter:blur(16px) saturate(110%);backdrop-filter:blur(16px) saturate(110%);
  }
}
/* Los puntos: sin tarjetas ni filetes, solo espacio. */
.ctl-pts{list-style:none;display:grid;gap:clamp(30px,4vw,80px) clamp(28px,3vw,56px)}
.ctl-pt h3{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;
  font-size:clamp(24px,1.55vw,30px);line-height:1.25;letter-spacing:-.01em;
  color:var(--ctl-camel);margin-bottom:clamp(12px,1.5vw,28px);
}
.ctl-pt p{font-size:clamp(16px,1.28vw,25px);font-weight:400;line-height:1.4;color:#f8f6f2}

@media(min-width:560px){.ctl-pts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Escritorio: el contenedor al 88 % (unos 110 px de margen a 1880 px),
   columnas del 46 % y el 42 %, y el resto de separación. El alto mínimo
   es el de la foto (2,13:1), para que `cover` no la recorte. */
@media(min-width:1200px){
  .ctl{min-height:min(46.9vw,900px);display:flex;align-items:center}
  .ctl-grid{width:88%;max-width:1680px;grid-template-columns:44% 47%;justify-content:space-between;gap:0}
}
/* Desde 1440 px hay sitio para el reparto definitivo: 46 % y 42 %. */
@media(min-width:1440px){
  .ctl-grid{grid-template-columns:46% 42%}
}

/* Por debajo de 1200 px se apila. Alto automático, la foto cubre (la pantalla ya es
   estrecha) y el velo va por alturas, denso donde está el titular. */
@media(max-width:1199px){
  .ctl-bg::before{display:none}
  .ctl-bg::after{left:0;right:0;width:auto;aspect-ratio:auto;transform:none;background-position:42% 30%;-webkit-mask-image:none;mask-image:none}
  /* El texto ocupa todo el ancho: la sombra va arriba, donde está el
     titular, y se abre hacia el panel. */
  .ctl::before{background:linear-gradient(to bottom, rgba(14,16,18,.64) 0%, rgba(14,16,18,.56) 38%, rgba(14,16,18,.26) 62%, rgba(14,16,18,.22) 100%)}
}
@media(max-width:1199px) and (min-width:1px){
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .ctl-panel{-webkit-backdrop-filter:blur(13px) saturate(110%);backdrop-filter:blur(13px) saturate(110%)}
  }
}

/* ---------- para quién (home) ----------
   Encabezado a dos lados y tres perfiles en columnas abiertas: sin cajas
   ni fondos, solo la foto, el texto y un filete al pie. Todo va bajo
   `.pq`; la clase `.aud` de más abajo es la de las páginas de servicio.
     ébano  #0a090a  fondo        carbón #343433  filetes
     marfil #f2eee6  texto        camel  #a98b6e  acentos y enlaces
     topo aclarado (#a79d92) en las descripciones, como en el resto */
.pq{background:var(--ebano);color:var(--marfil)}

.pq-cab{display:grid;gap:clamp(18px,2.4vw,28px);margin-bottom:clamp(40px,5vw,72px)}
@media(min-width:900px){
  .pq-cab{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:clamp(40px,6vw,96px)}
}
.pq .pq-eyebrow{color:var(--camel);letter-spacing:.24em;margin-bottom:clamp(18px,2vw,26px)}
.pq-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(28px,3.3vw,46px);line-height:1.14;letter-spacing:-.025em;color:var(--marfil);
}
.pq-t span{color:var(--camel)}
.pq-apoyo{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--topo-claro);max-width:36ch}

/* Tres columnas iguales. Cada una es una columna flexible para que, con
   textos de largo distinto, los enlaces y los filetes queden a la misma
   altura en las tres. */
.pq-grid{list-style:none;display:grid;gap:clamp(44px,6vw,56px)}
@media(min-width:960px){.pq-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px)}}
.pq-item{display:flex;flex-direction:column;padding-bottom:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--carbon)}

/* La foto: 6:5, esquinas suaves, nada encima. Al pasar el cursor por la
   columna, un zoom muy leve que no sale de su marco. */
.pq-foto{margin:0 0 clamp(22px,2.4vw,30px);border-radius:16px;overflow:hidden;background:#141312}
.pq-foto img{
  display:block;width:100%;height:auto;aspect-ratio:6 / 5;object-fit:cover;
  transition:transform 300ms var(--ease-out);
}
.pq-item:hover .pq-foto img,.pq-item:focus-within .pq-foto img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){
  .pq-foto img{transition:none}
  .pq-item:hover .pq-foto img,.pq-item:focus-within .pq-foto img{transform:none}
}

.pq-n{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--camel);margin-bottom:12px}
.pq-item h3{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;
  font-size:clamp(20px,1.65vw,25px);line-height:1.25;letter-spacing:-.01em;
  color:var(--marfil);margin-bottom:10px;
}
.pq-item p{font-size:clamp(15px,1.15vw,16.5px);line-height:1.55;color:var(--topo-claro);max-width:40ch;margin-bottom:20px}
.pq-enlace{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:var(--camel);text-decoration:none;
  border-radius:4px;
}
.pq-enlace svg{transition:transform .2s}
.pq-enlace:hover{color:#c4a582}
.pq-enlace:hover svg{transform:translate(2px,-2px)}
.pq-enlace:focus-visible{outline:2px solid var(--camel);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.pq-enlace:hover svg{transform:none}}
/* Tableta: una columna, pero cada perfil en horizontal (foto a la
   izquierda, texto a la derecha), para que la foto no ocupe una pantalla
   entera. En móvil vuelve a ir apilado. */
@media(min-width:640px) and (max-width:959px){
  .pq-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(24px,4vw,40px);align-items:start}
  .pq-foto{grid-column:1;grid-row:1 / span 4;margin-bottom:0}
  .pq-n,.pq-item h3,.pq-item p,.pq-enlace{grid-column:2}
  .pq-enlace{align-self:end}
}

/* ---------- para quién ---------- */
.aud-grid{display:grid;gap:16px}
@media(min-width:850px){.aud-grid{grid-template-columns:repeat(3,1fr)}}
.aud{padding:30px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.aud h3{font-size:19px;margin-bottom:10px}
.aud p{font-size:14.5px;color:var(--ink-2)}

/* ---------- el primer paso (home) ----------
   Dos columnas: el mensaje con tres beneficios y una tarjeta con la
   duración del estudio, los datos prácticos y el botón. Todo va bajo
   `.est`, con la paleta de las secciones anteriores.
     ébano  #0a090a  fondo        carbón #343433  filetes
     marfil #f2eee6  texto        camel  #a98b6e  acentos y botón
     topo aclarado (#a79d92) en los textos secundarios */
.est{background:var(--ebano);color:var(--marfil)}
.est-grid{display:grid;gap:clamp(44px,6vw,64px);align-items:center}
@media(min-width:960px){.est-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(56px,8vw,128px)}}

.est .est-eyebrow{color:var(--camel);letter-spacing:.24em;margin-bottom:clamp(18px,2vw,26px)}
.est-t{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(28px,3.3vw,46px);line-height:1.14;letter-spacing:-.025em;color:var(--marfil);
  margin-bottom:clamp(18px,2vw,26px);
}
.est-t span{color:var(--camel)}
.est-p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--topo-claro);max-width:44ch;margin-bottom:clamp(28px,3vw,40px)}

/* Los beneficios: verificación camel y un filete fino entre uno y otro. */
.est-benef{list-style:none;border-top:1px solid var(--carbon);max-width:520px}
.est-benef li{
  display:flex;align-items:baseline;gap:14px;
  padding:clamp(14px,1.5vw,18px) 0;border-bottom:1px solid var(--carbon);
  font-size:clamp(15.5px,1.2vw,17px);line-height:1.45;color:var(--marfil);
}
.est-benef svg{flex:none;color:var(--camel);position:relative;top:2px}

/* La tarjeta: carbón oscuro y sólido, filete marfil muy tenue. */
.est-card{
  background:#141314;border:1px solid rgba(242,238,230,.12);border-radius:24px;
  padding:clamp(28px,3.4vw,48px);
}
.est-card-et{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--camel);margin-bottom:clamp(14px,1.6vw,20px)}
/* «30» destaca, pero sin hacer de titular: «minutos» a su lado, menor. */
.est-dur{
  display:flex;align-items:baseline;gap:10px;line-height:1;
  font-size:clamp(17px,1.4vw,20px);font-weight:400;color:var(--marfil);
}
.est-dur strong{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;
  font-size:clamp(30px,2.9vw,42px);letter-spacing:-.03em;color:var(--marfil);
}
.est-nota{font-size:15px;color:var(--topo-claro);margin-top:10px}

/* Los datos: etiqueta a la izquierda y valor a la derecha; en pantallas
   estrechas se apilan. */
.est-datos{margin:clamp(24px,2.6vw,32px) 0;border-top:1px solid var(--carbon)}
.est-datos div{
  display:grid;gap:4px 24px;
  padding:clamp(14px,1.4vw,17px) 0;border-bottom:1px solid var(--carbon);
}
.est-datos dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--topo-claro)}
.est-datos dd{font-size:clamp(15px,1.15vw,16px);line-height:1.45;color:var(--marfil)}
@media(min-width:420px){
  .est-datos div{grid-template-columns:minmax(96px,auto) 1fr;align-items:baseline}
  .est-datos dd{text-align:right}
}

/* El botón: ancho, camel, texto ébano. Puede partir en dos líneas. */
.est .est-cta{
  width:100%;justify-content:center;gap:12px;
  padding:17px 24px;border-radius:14px;white-space:normal;
  background:var(--camel);border-color:var(--camel);color:var(--ebano);font-weight:600;font-size:15px;
  transition:background .2s,border-color .2s;
}
.est .est-cta:hover{background:var(--camel-hover);border-color:var(--camel-hover)}
.est .est-cta:hover svg{transform:translate(2px,-2px)}
.est .est-cta:focus-visible{outline:2px solid var(--marfil);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.est .est-cta:hover svg{transform:none}}
.est-pie{margin-top:14px;text-align:center;font-size:14px;color:var(--topo-claro)}

/* ---------- parroquias / cobertura (home) ----------
   Franja baja y panorámica. La foto del patio cubre toda la sección; un
   degradado lateral oscurece solo el lado del texto y deja ver la
   arquitectura a la derecha. Todo va bajo `.cob`. */
.cob{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ebano);color:var(--marfil);
  padding:clamp(32px,3vw,44px) 0;
}
/* La foto, con un ajuste leve: algo menos de saturación, algo más de
   contraste y las sombras un punto más hondas. */
.cob::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("/assets/img/cobertura-patio.webp") center 60% / cover no-repeat;
  filter:saturate(.86) contrast(1.06) brightness(.94);
}
/* El tramo oscuro llega justo hasta donde acaba el texto (--cob-fin: el
   borde de la columna de 700 px más un margen) y desde ahí se aclara
   hacia la derecha; con porcentajes fijos el párrafo caía sobre la parte
   clara de la foto en pantallas medianas. */
.cob::after{
  content:"";position:absolute;inset:0;z-index:-1;
  --cob-fin:calc(max(0px, (100% - var(--maxw)) / 2) + var(--wrap-pad) + 730px);
  background:linear-gradient(90deg,
    rgba(7,9,10,.90) 0%,rgba(7,9,10,.80) calc(var(--cob-fin) * .5),
    rgba(7,9,10,.70) var(--cob-fin),rgba(7,9,10,.40) calc(var(--cob-fin) + 14%),
    rgba(7,9,10,.18) 100%);
}
.cob .sec-head{max-width:700px;margin-bottom:clamp(20px,2vw,28px)}
.cob h2{color:var(--marfil);margin-bottom:12px}
.cob .lede{color:#cfc8bd}

.par-grid{display:flex;flex-wrap:wrap;gap:10px}
.par{
  padding:10px 17px;border:1px solid rgba(242,238,230,.22);border-radius:var(--radius);
  background:rgba(10,9,10,.5);color:var(--marfil);
  font-size:14.5px;font-weight:500;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
.par:hover{border-color:var(--camel);color:#e2cbb2}
.par.pri{background:var(--camel);border-color:var(--camel);color:var(--ebano)}
.par.pri:hover{background:var(--camel-hover);border-color:var(--camel-hover);color:var(--ebano)}
.par:focus-visible{outline:2px solid var(--marfil);outline-offset:3px}

/* Tablet: la misma lógica, la foto un poco más a la derecha. */
@media(max-width:959px){
  .cob{padding:28px 0}
  .cob::before{background-position:62% 50%}
}
/* Móvil: el texto ocupa todo el ancho, así que el degradado cubre más y
   la foto se desplaza para dejar la arquitectura detrás del final. */
@media(max-width:640px){
  .cob{padding:clamp(40px,10vw,56px) 0}
  .cob::before{background-position:78% 50%}
  .cob::after{background:linear-gradient(180deg,rgba(7,9,10,.86) 0%,rgba(7,9,10,.78) 55%,rgba(7,9,10,.62) 100%)}
}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-size:16.5px;font-weight:600;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:6px;top:18px;font-size:21px;font-weight:400;color:var(--accent);
}
details[open] summary::after{content:"−"}
details p{padding:0 40px 22px 0;font-size:15px;color:var(--ink-2);max-width:78ch}

/* ---------- faq (home) ----------
   Pausa visual: fondo liso, titular serif, filas abiertas separadas solo
   por filetes finos y los signos + / − en camel. Todo bajo `.fq`; las
   reglas generales de details/summary de arriba siguen sirviendo a las
   páginas de servicio. */
.fq{
  background:#0d0f11;color:#f4f1eb;border-top:0;
  padding:var(--sect) 0;
  interpolate-size:allow-keywords;
}
.fq-cab{max-width:820px;margin-bottom:clamp(40px,5vw,64px)}
.fq .fq-eyebrow{font-size:11.5px;font-weight:500;letter-spacing:.24em;color:var(--camel);margin-bottom:clamp(18px,2vw,24px)}
.fq-t{
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.02em;
  color:#f4f1eb;margin:0;
}
.fq-t span{color:var(--camel-suave)}

/* Filas abiertas: un filete arriba de la lista y uno bajo cada pregunta. */
.fq-lista{border-top:1px solid rgba(255,255,255,.12)}
.fq details{border-bottom:1px solid rgba(255,255,255,.12);transition:border-color .25s}
.fq details:hover{border-bottom-color:rgba(255,255,255,.2)}
.fq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(20px,2vw,27px) 0;
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(19px,1.75vw,25px);line-height:1.3;letter-spacing:-.01em;color:#f4f1eb;
  transition:color .25s;
}
.fq summary::after{
  position:static;flex:none;
  font-family:Inter,system-ui,sans-serif;font-weight:300;
  font-size:clamp(22px,1.8vw,26px);line-height:1;color:var(--camel);
  transition:color .25s;
}
.fq summary:hover{color:#fff}
.fq summary:hover::after{color:#c9a986}
.fq summary:focus-visible{outline:2px solid var(--camel);outline-offset:4px;border-radius:2px}

.fq details p{
  padding:0 0 clamp(26px,2.4vw,32px);max-width:820px;
  font-size:clamp(15px,1.15vw,16px);line-height:1.6;color:rgba(255,255,255,.68);
}
/* Al abrir: la respuesta aparece con un fundido y un desplazamiento
   mínimo. Donde el navegador lo permite, la altura también se anima al
   abrir y al cerrar. */
.fq details[open] p{animation:fq-in .26s ease-out}
@keyframes fq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .26s ease,content-visibility .26s allow-discrete;
}
.fq details[open]::details-content{block-size:auto}
@media(prefers-reduced-motion:reduce){
  .fq details[open] p{animation:none}
  .fq details::details-content{transition:none}
}

/* ---------- formulario ---------- */
.formcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-lg);
}
.formcard h3{font-size:21px;margin-bottom:6px}
.formcard .sub{font-size:14px;color:var(--ink-2);margin-bottom:20px}
.field{margin-bottom:14px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:16px;
}
/* 16 px: con menos, Safari en iPhone amplía la página al tocar el campo. */
input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{border-color:#e0907a}
.f-err{font-size:13px;line-height:1.4;color:#b5452c;margin-top:6px}
.form-editar{
  display:inline-block;margin-top:12px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
}
@media (pointer:coarse){.form-editar{min-height:44px}}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.row2{grid-template-columns:1fr}}
.form-note{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.form-ok{
  display:none;padding:18px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--radius);font-size:14.5px;color:var(--ink);
}

/* ---------- CTA final ----------
   Sección del formulario con el interior de fondo. La foto (desenfocada
   2 px) y la capa oscura van en pseudoelementos, así el desenfoque no
   toca el texto. La foto es muy clara: la capa tiene que ser densa para
   que el marfil se lea, también detrás del panel translúcido. */
.final{
  position:relative;isolation:isolate;overflow:hidden;
  padding:64px 0;background:#141619;
}
.final::before{
  content:"";position:absolute;inset:-12px;z-index:-2;
  background:url("/assets/img/final-interior.webp") center 58% / cover no-repeat;
  filter:blur(2px);
}
.final::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,9,10,.80) 0%,rgba(10,9,10,.62) 45%,rgba(10,9,10,.58) 100%);
}
.final-grid{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.final-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.final .lede{color:#d6d0c6}
.final .eyebrow.on-band{color:#cdb08f}
.alt-contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.final .btn-ghost.on-band{color:var(--marfil);border-color:rgba(242,238,230,.35);background:rgba(10,9,10,.25)}
.final .btn-ghost.on-band:hover{border-color:var(--marfil)}

/* Formulario translúcido: la transparencia va solo en los fondos (nunca
   opacity en el contenedor), así los textos y los campos conservan su
   color pleno. */
.final .formcard{
  width:100%;margin:0;padding:36px;border-radius:20px;
  background:rgba(242,238,230,.10);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(242,238,230,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.final .formcard h3,.final .formcard .sub,.final .formcard label,.final .form-note{color:var(--marfil)}
/* «(opcional)» lleva su color en línea: se iguala al resto. */
.final .formcard label span{color:rgba(242,238,230,.75) !important}
.final .row2{gap:0 16px}
.final .field{margin-bottom:20px}
.final .formcard input,.final .formcard select,.final .formcard textarea{
  background:rgba(10,9,10,.2);border:1px solid rgba(242,238,230,.28);color:var(--marfil);border-radius:10px;
}
.final .formcard input,.final .formcard select{height:55px;padding-top:0;padding-bottom:0}
.final .formcard textarea{height:100px;min-height:100px;resize:vertical}
/* La lista desplegable del select es nativa y opaca: fondo oscuro para
   que las opciones marfil se lean. */
.final .formcard select option{background:#141619;color:var(--marfil)}
/* Sobre el fondo oscuro el error va en un coral claro, legible y sin
   romper la paleta; el borde del campo lo repite. */
.final .f-err{color:#f2b8a6}
.final .formcard [aria-invalid]{border-color:#f2b8a6}
.final .formcard .btn-primary{background:var(--camel);color:var(--ebano);border-radius:10px}
.final .formcard .btn-primary:hover{background:var(--camel-hover)}
.final .formcard .btn-primary:focus-visible{outline:2px solid var(--marfil);outline-offset:3px}
@media(max-width:1023px){
  .final::before{background-position:center 62%}
  .final::after{background:linear-gradient(180deg,rgba(10,9,10,.74) 0%,rgba(10,9,10,.66) 100%)}
}
@media(max-width:640px){.final .row2{grid-template-columns:1fr}}

/* ---------- áreas táctiles (pantallas táctiles) ----------
   Con dedo, cada control ofrece al menos 44 px de alto (y de ancho los
   botones redondos). Se amplía la zona pulsable, no el dibujo: los
   enlaces de texto ganan alto con min-height y los huecos se recolocan
   para que la composición no se infle ni se solapen áreas vecinas. Con
   ratón no cambia nada. Los enlaces dentro de un párrafo quedan fuera
   (excepción «en línea» de WCAG 2.5.8). */
@media (pointer: coarse){
  /* Cabecera */
  .logo{min-height:44px}
  .nav-menu{width:44px;height:44px}
  .nav-menu span{left:13px;right:13px}
  .nav-menu span:first-child{top:17px}
  .nav-menu span:last-child{top:24px}
  /* Hero: pausa y pie */
  .hero-pause{width:44px;height:44px}
  .hero-foot{row-gap:0}
  .hero-cell{min-height:44px}
  /* Enlaces de sección con flecha */
  .svx-link,.link-arrow,.pq-enlace{display:inline-flex;align-items:center;min-height:44px}
  .svx-link{padding-bottom:0}
  /* Carrusel de proyectos */
  .carr-f{height:44px}
  .carr-flecha{width:44px;height:44px}
  /* Migas de pan de las páginas interiores */
  .crumbs{gap:0 6px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  /* Footer: filas de 44 px, sin margen extra entre ellas */
  .ft-cols a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
  .ft-cols p{line-height:1.7}
  .ft-h{margin-bottom:4px}
  .ft-legal a{display:inline-flex;align-items:center;min-height:44px}
  .ft-base{padding-top:10px}
}

/* Enlace de cierre en las páginas de servicio: lleva a lo general de la home. */
.svc-mas{margin-top:28px;font-size:15px;color:var(--ink-2)}
.svc-mas .link-arrow{margin-left:6px}

/* ---------- estés donde estés (páginas de servicio) ----------
   Para el propietario no residente: titular a la izquierda y los cuatro
   mecanismos en filas abiertas con filete, en la paleta de la home. */
.dist{background:var(--ebano);color:var(--marfil)}
.dist-grid{display:grid;gap:clamp(36px,5vw,64px)}
@media(min-width:1024px){.dist-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.dist-t{
  font-family:Inter,system-ui,sans-serif;font-weight:300;
  font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.025em;color:var(--marfil);
  margin-bottom:clamp(16px,2vw,24px);
}
.dist-t span{color:var(--camel-suave)}
.dist-p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--topo-claro);max-width:40ch}
@media(min-width:1024px){.dist-cab{position:sticky;top:120px}}
.dist-lista{list-style:none;border-top:1px solid var(--carbon)}
.dist-lista li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--carbon)}
.dist-n{font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--camel);padding-top:5px}
.dist-lista h3{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.3;color:var(--marfil);margin-bottom:6px}
.dist-lista p{font-size:15.5px;line-height:1.6;color:var(--topo-claro);max-width:52ch}

/* Datos del estudio inicial en el formulario de las páginas de servicio. */
.fc-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 22px;padding:14px 0;border-top:1px solid rgba(242,238,230,.18);border-bottom:1px solid rgba(242,238,230,.18)}
.fc-datos dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d6d0c6;margin-bottom:4px}
.fc-datos dd{font-size:14px;line-height:1.35;color:var(--marfil)}
@media(max-width:480px){.fc-datos{grid-template-columns:1fr;gap:8px}.fc-datos div{display:flex;justify-content:space-between;gap:12px}.fc-datos dt{margin:0}}

/* ---------- páginas de servicio en el lenguaje de la home ----------
   Bajo .svc-page (solo las 4 páginas de servicio) los tokens generales
   pasan a la paleta de marca y los componentes antiguos (tarjetas grises
   de 4 px) se convierten en filas abiertas con filete, como en la home.
   La home no lleva esta clase y no cambia. */
.svc-page{
  --bg:var(--ebano);--surface:#121112;--surface-2:#141314;
  --ink:var(--marfil);--ink-2:var(--topo-claro);--line:var(--carbon);
  --accent:var(--camel);--accent-hover:var(--camel-hover);--on-accent:var(--ebano);
  --band:var(--ebano);--band-ink:var(--marfil);--band-ink-2:var(--topo-claro);--band-line:var(--carbon);
  --radius:14px;
  background:var(--ebano);
}
/* Secciones separadas por un filete fino en lugar de cambios de fondo. */
.svc-page main > section + section:not(.final):not(.dist){border-top:1px solid var(--carbon)}
.svc-page .svc-sep{background:none}
/* «Otros servicios» llevaba padding-top:0 en línea (pensado para seguir a
   las FAQ, ya retiradas): tras el bloque oscuro necesita su propio aire. */
.svc-page .dist + section{padding-top:clamp(56px,6vw,88px) !important}

/* Hero: imagen con el radio de la casa, botones redondeados. */
.svc-page .page-hero-img{border-radius:18px}
.svc-page .btn{border-radius:12px}
/* El botón del hero de servicio no va sobre vídeo: camel sólido, sin vidrio
   ni sombra ancha, como los botones de la home. */
.svc-page .hero-ctas .btn-primary{background:var(--camel);border-color:var(--camel);color:var(--ebano);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.svc-page .hero-ctas .btn-primary:hover{background:var(--camel-hover);border-color:var(--camel-hover)}

/* «Qué hacemos»: lista numerada en filas abiertas. */
.svc-page .incl{gap:0 clamp(28px,4vw,56px);background:none;border:0;border-radius:0;overflow:visible}
.svc-page .incl-item{background:none;padding:clamp(20px,2.2vw,26px) 0;border-top:1px solid var(--carbon)}
.svc-page .incl-item .n{font-family:Inter,system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.16em;padding-top:4px}
.svc-page .incl-item b{font-weight:500;font-size:clamp(16px,1.3vw,18px);color:var(--marfil)}
.svc-page .incl-item span{font-size:15px;line-height:1.6}

/* Comparativa: dos columnas en líneas, sin caja. */
.svc-page .cmp{border:0;border-radius:0;background:none;overflow:visible;border-top:1px solid var(--carbon)}
.svc-page .cmp-row{border-bottom:1px solid var(--carbon)}
.svc-page .cmp-row:last-child{border-bottom:1px solid var(--carbon)}
.svc-page .cmp-row>div{padding:clamp(16px,1.8vw,20px) 0;font-size:15.5px}
.svc-page .cmp-row>div:first-child{border-right:0;padding-right:24px}
.svc-page .cmp-head>div{background:none;font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--ink-3)}
.svc-page .cmp-head>div:last-child{color:var(--camel)}
.svc-page .cmp-row>div:last-child{color:var(--marfil)}

/* «Para quién»: tres columnas abiertas con filete arriba. */
.svc-page .aud-grid{gap:0 clamp(28px,3.4vw,52px)}
.svc-page .aud{border:0;border-radius:0;background:none;padding:clamp(20px,2.2vw,26px) 0 8px;border-top:1px solid var(--carbon)}
.svc-page .aud h3{font-family:Inter,system-ui,sans-serif;font-weight:400;font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--marfil)}
.svc-page .aud p{font-size:15px;line-height:1.6}

/* Proyecto destacado: sin caja, foto con radio. */
.svc-page .feat{border:0;background:none;gap:clamp(20px,3vw,40px);overflow:visible}
.svc-page .feat:hover{box-shadow:none}
.svc-page .feat-img{border-radius:16px}
.svc-page .feat-body{padding:8px 0}

/* Otros servicios: enlaces en línea con filete, no cajas. */
.svc-page .other-svc{gap:0 clamp(24px,3vw,44px)}
.svc-page .other-svc a{border:0;border-radius:0;background:none;border-top:1px solid var(--carbon);padding:18px 0;font-weight:500}
.svc-page .other-svc a:hover{color:var(--camel-suave)}

/* ---------- movimiento e interacción ----------
   Pulsación: todo lo que se pulsa se hunde un 3 % (160 ms, ease-out).
   Con dedo, los zooms y desplazamientos de :hover no se aplican: un toque
   dejaría la foto ampliada. El panel del menú móvil entra desde el botón
   (arriba a la derecha) en 200 ms y sale al instante. */
.btn:active,.nav-menu:active,.carr-f:active,.carr-flecha:active,.hero-pause:active,
.ft .ft-btn:active,.est .est-cta:active,.final .formcard .btn-primary:active{transform:scale(.97)}
.nav-menu,.carr-f,.carr-flecha,.hero-pause{transition:transform 160ms var(--ease-out),background .2s ease,border-color .2s ease,color .2s ease}
@media (hover:none),(pointer:coarse){
  .svx-foto:hover img,.banda:hover .banda-img,.feat:hover .feat-img img,.proj:hover .proj-img img,
  .pq-item:hover .pq-foto img,.cat:hover .cat-img,.proj:hover,a.aud:hover,.pain:not(.cta-cell):hover,
  .nav .btn-hablamos:hover{transform:none}
}
@media (max-width:899px){
  .nav-links{transform-origin:top right;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
  @starting-style{
    header.menu-abierto .nav-links{opacity:0;transform:translateY(-6px) scale(.98)}
  }
}
@media (prefers-reduced-motion:reduce){
  .btn:active,.nav-menu:active,.carr-f:active,.carr-flecha:active,.hero-pause:active,
  .ft .ft-btn:active,.est .est-cta:active,.final .formcard .btn-primary:active{transform:none}
  .nav-links{transition:opacity 150ms ease}
  @starting-style{header.menu-abierto .nav-links{transform:none}}
  .carr-foto.is-activa{transition:none}
}

/* ---------- footer ----------
   Llamada a contacto y columnas compactas arriba; debajo, «NODUS»
   monumental con la foto del interior recortada dentro de las letras
   (background-clip:text); al pie, copyright y legales. Paleta de marca:
   ébano, carbón, topo (aclarado para leerse), camel y marfil. */
.ft{background:var(--ebano);color:var(--topo-claro);padding:clamp(64px,8vw,112px) 0 28px;font-size:14.5px}
.ft-top{display:grid;gap:48px;padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid var(--carbon)}
@media(min-width:1024px){.ft-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:end}}
.ft-t{
  font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--marfil);
  margin-bottom:clamp(24px,2.6vw,32px);
}
.ft-t span{color:var(--camel)}
.ft .ft-btn{
  background:var(--camel);border-color:var(--camel);color:var(--ebano);border-radius:999px;padding:15px 26px;
}
.ft .ft-btn svg{transition:transform .2s}
.ft .ft-btn:hover{background:var(--camel-hover);border-color:var(--camel-hover)}
.ft .ft-btn:hover svg{transform:translate(2px,-2px)}
.ft .ft-btn:focus-visible{outline:2px solid var(--marfil);outline-offset:3px}

.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
@media(min-width:640px){.ft-cols{grid-template-columns:repeat(4,minmax(0,auto));justify-content:space-between}}
@media(max-width:359px){.ft-cols{grid-template-columns:1fr}}
.ft-h{
  font-family:Inter,system-ui,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--camel);margin-bottom:14px;line-height:1.4;
}
.ft-cols p{line-height:1.7}
.ft-cols a,.ft-legal a{
  display:block;width:fit-content;margin-bottom:8px;color:var(--marfil);text-decoration:none;
  border-radius:2px;transition:color .2s;overflow-wrap:anywhere;
}
.ft-cols a:hover,.ft-legal a:hover{color:#c9ad8e}
.ft-cols a:focus-visible,.ft-legal a:focus-visible{outline:2px solid var(--camel);outline-offset:3px}

/* La marca: el tamaño sale del ancho del contenedor (cqi) para que
   «NODUS» ocupe casi todo el ancho sin cortarse nunca. Sin soporte de
   background-clip:text, las letras quedan en camel. */
.ft-marca{container-type:inline-size;padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,40px)}
.ft-nodus{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;
  font-size:22vw;font-size:28.6cqi;line-height:.8;letter-spacing:-.045em;
  text-align:center;color:var(--camel);margin:0;white-space:nowrap;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ft-nodus{
    background:url("/assets/img/final-interior.webp") 42% 56% / cover no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
.ft-sub{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:clamp(16px,2vw,24px);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
}
.ft-sub span:first-child{color:var(--marfil);font-weight:600;letter-spacing:.42em}
.ft-sub span:last-child{color:var(--topo-claro)}

.ft-base{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  padding-top:22px;border-top:1px solid var(--carbon);font-size:13px;color:var(--topo-claro);
}
.ft-legal{display:flex;gap:20px}
.ft-legal a{margin:0}

/* ---------- barra fija en móvil ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.sticky .btn{flex:1;padding:14px 12px;font-size:14.5px}
@media(min-width:900px){.sticky{display:none}}
@media(max-width:899px){body{padding-bottom:74px}}

/* Nota de brief: solo se ve en local, se retira antes de publicar */
.note{
  display:inline-block;margin-top:14px;font-size:12px;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--radius);padding:7px 11px;
}

/* ---------- páginas interiores (servicios, legales) ---------- */
.page-hero{padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px)}
.page-hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.page-hero-grid{grid-template-columns:1.1fr .9fr;gap:56px}}
.page-hero h1{font-size:clamp(32px,4.8vw,54px);margin-bottom:20px;color:var(--band-ink)}
.page-hero .lede{margin-bottom:28px}
.page-hero-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.page-hero-img img{width:100%;height:100%;object-fit:cover}
.crumbs{font-size:12.5px;color:var(--band-ink-2);margin-bottom:26px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none;color:var(--band-ink-2)}
.crumbs a:hover{color:var(--band-ink)}
.crumbs span[aria-current]{color:var(--band-ink)}

.incl{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:760px){.incl{grid-template-columns:repeat(2,1fr)}}
.incl-item{background:var(--surface);padding:24px 22px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.incl-item .n{grid-row:span 2;font-family:Fraunces,serif;font-size:15px;color:var(--accent);padding-top:2px}
.incl-item b{font-size:16px}
.incl-item span{font-size:14.5px;color:var(--ink-2)}

.other-svc{display:grid;gap:12px}
@media(min-width:760px){.other-svc{grid-template-columns:repeat(3,1fr)}}
.other-svc a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  text-decoration:none;font-weight:600;font-size:15px;transition:border-color .2s,color .2s;
}
.other-svc a:hover{border-color:var(--accent);color:var(--accent)}

.legal{max-width:760px}
.legal h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 10px}
.legal p{color:var(--ink-2);margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2)}
.legal li{margin-bottom:8px}
.legal li strong{color:var(--ink);font-weight:500}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-fecha{font-size:14px}
/* Datos de la empresa aún sin rellenar: no publicar mientras queden */
.hueco{background:#f5d76e;color:#0a090a;padding:0 4px;border-radius:3px}
.pending{
  padding:18px 20px;border:1px dashed var(--accent);border-radius:var(--radius);
  background:var(--accent-soft);font-size:14.5px;color:var(--ink);margin-bottom:28px;
}

/* Las notas de brief solo se ven en local (main.js marca html.dev) */
.note{display:none}
.dev .note{display:inline-block}

/* ---------- entrada al hacer scroll ---------- */
.js-on .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.js-on .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js-on .rv{opacity:1;transform:none}
}