/* ============================================================
   HK BLUE GREEN · sistema de diseño compartido
   Una sola hoja para todo el sitio. Sin compilación, sin
   dependencias. Se edita aquí y cambia en todas las páginas.
   ============================================================ */

/* ============================================================
   HK BLUE GREEN
   Paleta sacada del metraje: hora azul, madera, travertino.
   ============================================================ */
:root{
  --canvas:#0E1A1C;
  --canvas-2:#122225;
  --panel:#16292C;
  --line:#22403F;
  --line-strong:#2F5A55;
  --accent:#3FBE8B;
  --accent-hover:#5AD3A2;
  --accent-muted:rgba(63,190,139,.20);
  --text-secondary:#9FB0AC;
  --text-primary:#F0E9DD;
  --glow:#E9C08A;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);

  --pad:clamp(20px,5vw,72px);
  --seam-x:clamp(14px,2.6vw,40px);
  --tshadow:0 1px 2px rgba(4,10,12,.95),0 3px 12px rgba(4,10,12,.78),0 10px 44px rgba(4,10,12,.8);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .9s var(--ease);
}
body.lit{opacity:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1}
p{margin:0}
button{font:inherit;color:inherit}

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

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#08110F;padding:12px 18px;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:12px;top:12px}

.wrap{width:min(1220px,100% - var(--pad) * 2);margin-inline:auto}

/* ---------- capa de ambiente fija ---------- */
.env{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse 92% 58% at 16% 6%,rgba(63,190,139,.055),transparent 62%),
    radial-gradient(ellipse 74% 52% at 88% 84%,rgba(233,192,138,.05),transparent 62%),
    var(--canvas);
}
.env::before{content:"";position:absolute;inset:-30% -60%;
  background:repeating-linear-gradient(102deg,rgba(233,192,138,.026) 0 2px,rgba(233,192,138,0) 2px 96px);
  animation:slats 96s linear infinite;animation-delay:-30s;
}
.env::after{content:"";position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes slats{from{transform:translateX(0)}to{transform:translateX(-96px)}}

.motes{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--glow);opacity:.05;
  animation:drift linear infinite}
@keyframes drift{
  from{transform:translate3d(0,12vh,0)}
  to{transform:translate3d(3vw,-108vh,0)}
}

/* ---------- el elemento firma: la costura del umbral ---------- */
.seam{position:fixed;left:var(--seam-x);top:0;bottom:0;width:1px;z-index:40;pointer-events:none}
.seam__core{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0,var(--line) 8%,var(--line-strong) 50%,var(--line) 92%,transparent 100%)}
.seam__travel{position:absolute;left:-1px;width:3px;height:16vh;border-radius:2px;
  top:calc(var(--pageP,0) * (100% - 16vh));
  background:linear-gradient(180deg,transparent,var(--accent) 22%,var(--accent-hover) 50%,var(--accent) 78%,transparent);
  box-shadow:0 0 14px 2px var(--accent-muted);opacity:.85}
.seam__bloom{position:absolute;left:-9px;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0,transparent 70%);opacity:0;
  transition:opacity .7s var(--ease)}
.seam__bloom.on{opacity:.55}
@media (max-width:720px){.seam{display:none}}

/* ---------- navegación ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:24px;
  padding:16px var(--pad);transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(11,21,23,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:30px;height:auto}
.brand b{font-family:var(--display);font-weight:400;font-size:1.16rem;letter-spacing:.01em}
.brand span{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--text-secondary);display:block;margin-top:2px}
.nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)}
.nav__links a:hover{color:var(--text-primary)}
@media (max-width:900px){.nav__links{display:none}}

/* ---------- menú de móvil ----------
   El botón solo existe donde los enlaces de la barra desaparecen. Las dos
   rayas se cruzan en aspa al abrir: es el mismo elemento, no dos iconos. */
.burger{display:none;position:relative;width:44px;height:44px;flex:none;
  background:none;border:1px solid var(--line-strong);border-radius:2px;
  cursor:pointer;padding:0}
.burger span{position:absolute;left:12px;width:20px;height:1.5px;background:var(--text-primary);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){.burger{display:block}}

/* El panel se mete por debajo de la barra, no por encima: si la tapara, la X
   quedaría escondida detrás y en un teléfono no habría manera de cerrar el
   menú —no hay tecla Escape—salvo pulsando un enlace. La barra sube por
   encima mientras está abierto y su botón de cita se retira, porque el panel
   ya lleva el suyo y dos seguidos no aportan nada. */
body.menu-abierto .nav{z-index:130;background:none;backdrop-filter:none;border-bottom-color:transparent}
body.menu-abierto .nav > .btn,
body.menu-abierto .nav__links{display:none}
.menu{position:fixed;inset:0;z-index:120;background:var(--canvas);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,6vh,56px);
  padding:calc(env(safe-area-inset-top,0px) + 92px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 32px);
  overflow-y:auto;opacity:0;transition:opacity .38s var(--ease)}
.menu[hidden]{display:none}
.menu.abierto{opacity:1}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,2.4vh,20px)}
.menu ul a{font-family:var(--display);font-size:clamp(2rem,9vw,3rem);line-height:1.06;
  text-decoration:none;color:var(--text-primary);display:inline-block;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu.abierto ul a{opacity:1;transform:none}
/* Cada enlace entra un poco después del anterior. Seis como mucho, que son los que hay. */
.menu.abierto li:nth-child(1) a{transition-delay:.06s}
.menu.abierto li:nth-child(2) a{transition-delay:.11s}
.menu.abierto li:nth-child(3) a{transition-delay:.16s}
.menu.abierto li:nth-child(4) a{transition-delay:.21s}
.menu.abierto li:nth-child(5) a{transition-delay:.26s}
.menu.abierto li:nth-child(6) a{transition-delay:.31s}
.menu ul a[aria-current="page"]{color:var(--accent)}
.menu__pie{border-top:1px solid var(--line);padding-top:clamp(20px,3vh,30px);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:2;color:var(--text-secondary)}
.menu__pie .btn{margin-bottom:20px}
.menu__pie a{color:var(--text-secondary);text-decoration:none}
.menu__pie .btn{color:#08110F}
.menu__dir{margin-top:10px;opacity:.7;text-transform:uppercase;font-size:.62rem;letter-spacing:.12em}
body.menu-abierto{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .menu,.menu ul a{transition:none}
  .menu ul a{opacity:1;transform:none}
}
@media (max-width:720px){
  .nav{padding:11px 16px;gap:12px}
  .nav.stuck{padding-block:9px}
  .nav .brand span span{display:none}
  .nav .brand b{font-size:1.02rem;white-space:nowrap}
  .nav .brand img{width:26px}
  .nav > .btn{padding:11px 13px;font-size:.64rem;letter-spacing:.1em;white-space:nowrap}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:2px;border:1px solid var(--accent);background:var(--accent);color:#08110F;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- héroe con scroll ---------- */
.hero{position:relative;height:720vh}
.stage{position:sticky;top:0;height:100svh;overflow:clip;background:var(--canvas)}
.poster{position:absolute;inset:0;background-size:cover;background-position:52% 50%}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,14,16,.74) 0%,rgba(6,14,16,.34) 8%,rgba(6,14,16,0) 17%),
    radial-gradient(ellipse 120% 92% at 62% 46%,rgba(6,14,16,0) 30%,rgba(6,14,16,.66) 100%)}

.ring{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);width:44px;height:44px;
  color:var(--accent);opacity:.9;transition:opacity .5s var(--ease)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}

.bands{position:absolute;inset:0}
.band{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  padding-top:clamp(110px,24vh,220px)}
.band::before{content:"";position:absolute;inset:-16% -10%;pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 56% 48% at 27% 50%,
    rgba(4,10,12,var(--sa,.66)) 0%,
    rgba(4,10,12,calc(var(--sa,.66) * .66)) 44%,
    rgba(4,10,12,0) 72%)}
.band__inner{position:relative;width:min(620px,50%);margin-left:clamp(28px,8vw,132px);text-shadow:var(--tshadow)}
.band h2{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.02;max-width:15ch}
.band p{margin-top:20px;color:var(--text-primary);opacity:.9;max-width:38ch;font-size:1.05rem}
/* Las frases del héroe son narrativa, no secciones del documento: van en <p>
   (y la última en <h1>) para que el índice de encabezados empiece donde debe.
   Esta regla les devuelve el aspecto que tenían siendo <h2>. */
.band .band__line{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.02;max-width:15ch;
  color:var(--text-primary);opacity:1}
.band .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;pointer-events:auto}
.band .btn{text-shadow:none}

.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:11px;margin-bottom:22px}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7;flex:none}

/* palabras y caracteres */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block}

.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
.e-weave .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)))}
.e-blur h2{position:relative}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none}
.e-blur .sharp{opacity:var(--k,0)}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 34px))}
.e-rise .sub{opacity:clamp(0,(var(--k,0) - .58) * 4,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .58) * 4,1)) * 16px))}
.e-rise .row{opacity:clamp(0,(var(--k,0) - .74) * 5,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .74) * 5,1)) * 14px))}

.cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);opacity:var(--cueO,1);transition:opacity .6s var(--ease);pointer-events:none}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent)}
@media (max-height:560px){.cue{display:none}}

/* Rótulo de naturaleza de la imagen. Discreto, pero legible y dentro de la
   propia pieza: presentar una visualización como obra ejecutada está
   prohibido por la regla de integridad visual del estudio, y en el pie de
   página no cuenta como rótulo. */
.rotulo-pieza{position:absolute;right:var(--pad);bottom:22px;max-width:min(46ch,64vw);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.7;color:var(--text-primary);opacity:.62;text-align:right;
  text-shadow:0 1px 3px rgba(4,10,12,.95);pointer-events:none}
.rotulo-pieza--fijo{position:static;margin-top:26px;text-align:left;max-width:44ch;opacity:.58}
@media (max-width:560px){.rotulo-pieza{font-size:.55rem;letter-spacing:.1em}}

/* ---------- héroe estático (móvil y movimiento reducido) ---------- */
.hero-static{display:none;position:relative;min-height:100svh;align-items:flex-end;overflow:clip}
.hero-static .bg{position:absolute;inset:0;background:url("hero-ending.jpg") center/cover}
.hero-static .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,18,.55) 0%,rgba(8,16,18,.25) 34%,rgba(8,16,18,.92) 100%)}
.hero-static .inner{position:relative;padding:0 var(--pad) clamp(48px,10vw,96px);width:100%;text-shadow:var(--tshadow)}
.hero-static h1{font-size:clamp(2.5rem,10vw,4rem);line-height:1.02;max-width:13ch}
.hero-static p{margin-top:18px;max-width:34ch;color:var(--text-primary);opacity:.92}
.hero-static .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-static .btn{text-shadow:none}

/* La única puerta que queda. Antes eran cinco y apagaban el héroe con scroll en
   todo lo que fuera móvil o táctil, dejando el estático. Pero el viaje es la
   primera impresión de la marca, y en el teléfono —que es por donde entra la
   mayoría— no pasaba nada al abrir. Ahora el héroe con scroll es el de todos, y
   solo se cambia por el estático cuando el sistema pide menos movimiento, que
   es una preferencia real de accesibilidad y no una suposición sobre el aparato.
   Idéntico en JS: la constante GATES de index.html. */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .hero-static{display:flex}
}

/* ---------- el héroe en vertical ----------
   La composición original es apaisada: el texto ocupa la mitad izquierda y el
   oscurecido lo acompaña desde ese lado. En un teléfono en vertical esa mitad
   son 187 px y el texto sale en una columna de dos palabras. Aquí se rehace:
   el bloque pasa a ancho completo, baja al tercio inferior —donde el pulgar no
   lo tapa y donde la vista ya está acostumbrada a leer— y el degradado deja de
   venir del lado para venir de abajo. */
@media (orientation:portrait) and (max-width:900px){
  /* El recorrido se acorta: 720vh en un móvil son casi 6000 px de deslizar con
     el pulgar si alguien decide llevar el mando. El vídeo dura lo mismo, así
     que el descenso automático no cambia de ritmo, solo de longitud. */
  .hero{height:520vh}

  /* Un 16:9 recortado a vertical se queda con una franja estrecha del centro.
     Se encuadra igual que el póster, que sí está ajustado a mano. */
  .stage video{object-position:52% 50%}

  .band{align-items:flex-end;padding-top:0;padding-bottom:clamp(72px,14vh,132px)}
  /* `.band` es flex, así que un `width:auto` a secas encoge la caja al ancho
     del texto. Hace falta decirle que ocupe la fila. */
  .band__inner{flex:1 1 auto;width:auto;min-width:0;margin-left:0;margin-inline:var(--pad)}
  .band .band__line{font-size:clamp(2.1rem,8.6vw,3.2rem);max-width:13ch}
  .band p{max-width:32ch;font-size:1rem}

  /* El oscurecido deja de ser una elipse a la izquierda y pasa a ser una
     rampa desde abajo, que es donde ahora está el texto. */
  .band::before{inset:0;
    background:linear-gradient(180deg,
      rgba(4,10,12,0) 34%,
      rgba(4,10,12,calc(var(--sa,.66) * .72)) 68%,
      rgba(4,10,12,var(--sa,.66)) 100%)}
  .scrim{background:
    linear-gradient(180deg,rgba(6,14,16,.72) 0%,rgba(6,14,16,.28) 12%,rgba(6,14,16,0) 30%),
    linear-gradient(0deg,rgba(6,14,16,.58) 0%,rgba(6,14,16,0) 42%)}

  /* El anillo de carga y el "Baja" comparten sitio abajo en el centro, y con el
     texto ya ahí se pisaban. El anillo sube a la esquina. */
  .ring{left:auto;right:var(--pad);bottom:auto;top:calc(env(safe-area-inset-top,0px) + 84px);
    transform:none;width:34px;height:34px}
}

/* ---------- secciones ---------- */
section[id]{scroll-margin-top:90px}
.sec{position:relative;padding:clamp(84px,12vw,168px) 0}
.sec--alt{background:linear-gradient(180deg,transparent,var(--canvas-2) 14%,var(--canvas-2) 86%,transparent)}
.sec h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.04;max-width:18ch}
.lede{margin-top:22px;color:var(--text-secondary);max-width:56ch;font-size:1.08rem}

.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-top:14px}

/* entradas coreografiadas */
.up{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .up,.up.in{opacity:1;transform:none}
.in .up:nth-child(2){transition-delay:.09s}
.in .up:nth-child(3){transition-delay:.18s}
.in .up:nth-child(4){transition-delay:.27s}
.in .up:nth-child(5){transition-delay:.36s}
.done-stagger .up:nth-child(2),
.done-stagger .up:nth-child(3),
.done-stagger .up:nth-child(4),
.done-stagger .up:nth-child(5){transition-delay:0s !important}

/* ---------- manifiesto ---------- */
.manifesto{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px)}
@media (min-width:900px){.manifesto{grid-template-columns:1.05fr .95fr;align-items:start}}
.manifesto .body{color:var(--text-secondary);font-size:1.12rem;max-width:52ch}
.manifesto .body strong{color:var(--text-primary);font-weight:500}
.figure{position:relative;border:1px solid var(--line);overflow:hidden}
.figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.quote{margin:clamp(34px,4vw,54px) 0 0;padding:22px 0 22px 26px;border-left:1px solid var(--accent-muted);
  font-family:var(--display);font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.35;color:var(--text-primary);
  font-style:italic;max-width:26ch}
.quote cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.figure figcaption{position:absolute;left:0;bottom:0;right:0;padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,14,16,.9));
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}

/* ---------- obra ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,6vw,72px)}
.card{position:relative;grid-column:span 12;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);display:flex;flex-direction:column;--h:clamp(230px,58vw,340px)}
@media (min-width:860px){
  .card:nth-child(1){grid-column:span 7;--h:440px}
  .card:nth-child(2){grid-column:span 5;--h:440px}
  .card:nth-child(3){grid-column:span 6;--h:600px}
  .card:nth-child(4){grid-column:span 6;--h:600px}
  .card:nth-child(5){grid-column:span 7;--h:420px}
  .card:nth-child(6){grid-column:span 5;--h:420px}
}
.card .ph{position:relative;height:var(--h);overflow:hidden;background:var(--canvas-2)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,center 50%);
  transition:transform 1.3s var(--ease),filter 1.3s var(--ease);filter:saturate(.92) contrast(1.02)}
.card:nth-child(2) img{--op:center 62%}
.card:nth-child(3) img{--op:center 34%}
.card:nth-child(4) img{--op:center 46%}
.card:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.04)}
.card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 20px 20px;margin-top:auto}
.card h3{font-family:var(--display);font-size:1.5rem;line-height:1.1}
.card .meta p{color:var(--text-secondary);font-size:.94rem;margin-top:6px;max-width:42ch}
.tag{flex:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);padding:5px 9px;border-radius:2px;white-space:nowrap}
.tag--plan{color:var(--text-secondary);border-color:var(--line)}

/* ---------- servicios ---------- */
.svcs{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px);margin-top:clamp(40px,6vw,72px)}
@media (min-width:860px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc{position:relative;border:1px solid var(--line);background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .6s var(--ease),transform .6s var(--ease)}
.svc:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.svc__ph{position:relative;height:clamp(196px,21vw,252px);overflow:hidden;background:var(--canvas-2)}
.svc__ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,22,.10) 0%,rgba(10,20,22,0) 34%,rgba(22,41,44,.85) 100%)}
.svc__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.93) contrast(1.02);transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.svc:hover .svc__ph img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.svc__body{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px}
.svc h3{font-family:var(--display);font-size:1.85rem}
.svc p{color:var(--text-secondary);font-size:1rem}
.svc .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--text-secondary)}
/* Enlace al servicio completo. El texto del enlace describe el destino en
   vez de decir "ver más": es lo que lee el buscador para saber de qué trata
   la página a la que apunta. */
.svc__mas{margin-top:auto;padding-top:6px}
.svc__mas a{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;
  padding-bottom:2px;transition:border-color .4s var(--ease),color .4s var(--ease)}
.svc__mas a::after{content:" →"}
.svc__mas a:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}

/* ---------- tabla comparativa ----------
   Va dentro de su propio contenedor con scroll horizontal: la página nunca
   se desborda de lado, la tabla sí puede. En móvil se lee arrastrando. */
.comp__h{margin-top:clamp(56px,7vw,96px);font-family:var(--display);
  font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;max-width:22ch}
.comp__scroll{margin-top:clamp(24px,3vw,36px);overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.comp{width:100%;min-width:680px;border-collapse:collapse;text-align:left}
.comp caption{caption-side:bottom;padding-top:18px;font-family:var(--mono);
  font-size:.68rem;line-height:1.6;letter-spacing:.04em;color:var(--text-secondary);text-align:left}
.comp th,.comp td{padding:18px clamp(14px,1.6vw,24px);vertical-align:top;
  border-bottom:1px solid var(--line);font-weight:400}
.comp thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);padding-top:20px;padding-bottom:16px}
.comp thead th:last-child{color:var(--accent)}
.comp tbody th{font-family:var(--display);font-size:1.12rem;line-height:1.25;
  width:24%;padding-left:0}
.comp tbody td{color:var(--text-secondary);font-size:.98rem;line-height:1.6;width:38%}
/* La columna propia se marca con el filete de acento, no con negrita:
   la jerarquía en este sitio la dan el color y el aire, nunca el peso. */
.comp tbody td:last-child{color:var(--text-primary);
  box-shadow:inset 1px 0 0 var(--accent-muted)}
.comp thead th:first-child{padding-left:0}
.comp tr:last-child th,.comp tr:last-child td{border-bottom:none}
.comp tbody th a{color:var(--text-primary);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.comp tbody th a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- lista numerada de pasos ----------
   Una <ol> de verdad, no divs con un número dibujado: el orden es
   información, y así lo lee también quien no ve la página. */
.pasos{margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none;counter-reset:paso;
  max-width:66ch;display:grid;gap:2px}
.pasos li{counter-increment:paso;position:relative;padding:20px 0 22px 46px;
  border-bottom:1px solid var(--line);color:var(--text-secondary);line-height:1.7}
.pasos li:last-child{border-bottom:none}
.pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--accent)}
.pasos li b{color:var(--text-primary);font-weight:400;font-family:var(--display);
  font-size:1.14rem;display:block;margin-bottom:5px}
.pasos li a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted)}
.pasos li a:hover{border-bottom-color:var(--accent)}
.ficha-datos dd a{color:var(--text-primary);text-decoration:none;
  border-bottom:1px solid var(--line-strong);transition:color .35s var(--ease)}
.ficha-datos dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:0;transition:opacity .6s var(--ease)}
.svc:hover::after{opacity:.6}

/* ---------- proceso ---------- */
.steps{position:relative;margin-top:clamp(40px,6vw,72px);padding-left:clamp(34px,5vw,64px)}
.steps .line{position:absolute;left:0;top:6px;bottom:6px;width:22px}
.steps .line svg{width:22px;height:100%}
.steps .line path{fill:none;stroke:var(--line-strong);stroke-width:1}
.steps .line .lit{stroke:var(--accent);stroke-dasharray:1000;stroke-dashoffset:calc(1000 - var(--drawP,0) * 1000)}
.step{position:relative;padding:clamp(22px,3vw,32px) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:800px){.step{grid-template-columns:auto 1fr;gap:clamp(24px,4vw,60px);align-items:baseline}}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent);min-width:3ch}
.step h3,.step h2{font-family:var(--display);font-size:1.7rem;margin-bottom:8px}
.step p{color:var(--text-secondary);max-width:58ch}
.step::before{content:"";position:absolute;left:calc(-1 * clamp(34px,5vw,64px) + 6px);top:calc(clamp(22px,3vw,32px) + 10px);
  width:11px;height:11px;border:1px solid var(--line-strong);background:var(--canvas);
  transition:border-color .6s var(--ease),background .6s var(--ease),box-shadow .6s var(--ease)}
.step.lit::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 14px 1px var(--accent-muted)}

/* ---------- el umbral, momento interactivo ---------- */
.threshold{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--canvas-2);
  margin-top:clamp(40px,6vw,64px)}
.thr__stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas)}
@media (max-width:700px){.thr__stage{aspect-ratio:4/5}}
/* La foto y el trazo comparten origen, encuadre y ajuste, así que encajan
   pixel a pixel: el trazo son los bordes reales de esta misma imagen. */
/* las dos imágenes solo se piden cuando la sección se acerca: 264 KB que no
   pesan en la primera carga. La clase .in la pone el observador de entrada. */
.thr__photo{position:absolute;inset:0;background:center/cover no-repeat;
  opacity:var(--hold,0);transform:scale(calc(1.035 - .035 * var(--hold,0)))}
.threshold.in .thr__photo{background-image:url("umbral-obra.jpg")}
.thr__plan{position:absolute;inset:0;opacity:calc(1 - var(--hold,0) * 1.12);
  background:linear-gradient(158deg,#0A1618,#0E2023 58%,#0A1618)}
.thr__cad{position:absolute;inset:0;width:100%;height:100%}
.thr__cad path,.thr__cad circle,.thr__cad ellipse{fill:none;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.thr__cad .w0{stroke:var(--accent);stroke-width:.7;opacity:.42}
.thr__cad .w1{stroke:var(--accent);stroke-width:1.1;opacity:.6}
.thr__cad .w2{stroke:var(--accent);stroke-width:1.7;opacity:.84}
.thr__cad .w3{stroke:var(--accent);stroke-width:3;opacity:1}
.thr__cad .e{stroke-dasharray:9 7;opacity:.42}
.thr__cad path.tramaH{fill:url(#pHormigon);stroke:none;opacity:.55}
.thr__cad path.tramaM{fill:url(#pMadera);stroke:none;opacity:.5}
.thr__cad .cota path,.thr__cad .cota circle{stroke:var(--accent);stroke-width:1.1;opacity:.72}
.thr__cad .relleno{fill:var(--accent);stroke:none;opacity:.85}
.thr__cad .pt{fill:var(--accent);stroke:none;opacity:.6}
.thr__cad .eje path{stroke:var(--accent);stroke-width:.9;opacity:.34;stroke-dasharray:20 6 3 6}
.thr__cad .eje circle{stroke:var(--accent);stroke-width:1.1;opacity:.5;fill:none}
.thr__cad text{font-family:var(--mono);font-size:15px;fill:var(--accent);opacity:.78;
  letter-spacing:.1em}
.thr__cad .ejeTxt text{font-size:19px;opacity:.62}
.thr__cad .caja text{font-size:16px;opacity:.9}
/* en pantalla estrecha el recorte parte los rotulos largos a media palabra */
@media (max-width:760px){.thr__cad .larga,.thr__cad .caja{display:none}}
/* el botón, una vez cruzado, invita a volver */
.hold--listo i{opacity:.3}
/* la costura del umbral: una línea fina que se enciende, no un lavado que tape la foto */
.thr__door{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(233,192,138,calc(.18 + .55 * var(--hold,0))) 22%,
    rgba(233,192,138,calc(.18 + .55 * var(--hold,0))) 78%,transparent);
  box-shadow:0 0 calc(10px + var(--hold,0) * 46px) rgba(233,192,138,calc(.06 + .26 * var(--hold,0)));
  pointer-events:none}
.thr__ui{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,30px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:linear-gradient(180deg,transparent,rgba(6,14,16,.86))}
.hold{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border:1px solid var(--line-strong);background:rgba(8,16,18,.6);backdrop-filter:blur(8px);
  border-radius:2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;touch-action:none;user-select:none;transition:border-color .4s var(--ease)}
.hold:hover{border-color:var(--accent)}
.hold i{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left;
  transform:scaleX(var(--hold,0));background:var(--accent-muted);pointer-events:none}
.hold span{position:relative}
.thr__hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--text-secondary);
  opacity:calc(1 - var(--hold,0))}
@media (max-width:700px){.thr__hint{display:none}}
.promises{display:grid;grid-template-columns:1fr;gap:0;margin-top:0;border-top:1px solid var(--line)}
@media (min-width:800px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{padding:clamp(20px,3vw,30px);border-bottom:1px solid var(--line);
  opacity:.2;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (min-width:800px){
  .promise{border-bottom:none;border-right:1px solid var(--line)}
  .promise:last-child{border-right:none}
}
.threshold.open .promise{opacity:1;transform:none}
.threshold.open .promise:nth-child(2){transition-delay:.16s}
.threshold.open .promise:nth-child(3){transition-delay:.32s}
.promise b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;margin-bottom:6px}
.promise span{color:var(--text-secondary);font-size:.95rem}

/* ---------- preguntas ---------- */
.faq{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:clamp(20px,2.6vw,28px) 44px clamp(20px,2.6vw,28px) 0;
  position:relative;font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.25;
  transition:color .4s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:currentColor;opacity:.7}
.qa summary::before{content:"";position:absolute;right:14px;top:50%;width:1px;height:13px;background:currentColor;
  opacity:.7;transform:translateY(-50%);transition:transform .45s var(--ease),opacity .45s var(--ease)}
.qa[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.qa .a{padding:0 0 clamp(22px,2.6vw,30px);color:var(--text-secondary);max-width:66ch}

/* ---------- equipo ---------- */
.team{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.team{grid-template-columns:.9fr 1.1fr}}
.team .body{color:var(--text-secondary);font-size:1.08rem;max-width:52ch}
.sign{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--display);font-size:1.3rem}
.sign small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:7px}
.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);margin-top:30px}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--accent)}
.stat span{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}

/* ---------- ficha del estudio ----------
   El párrafo de respuesta directa y la tabla de datos verificables. Es el
   bloque que los buscadores y los motores de IA leen para saber quién es
   esta empresa, así que se lee igual de bien sin CSS que con él. */
.nugget{margin-top:28px;max-width:62ch;font-size:clamp(1.12rem,1.02rem + .5vw,1.35rem);
  line-height:1.6;color:var(--text-primary)}
.ficha-datos{display:grid;grid-template-columns:1fr;gap:0;margin:clamp(36px,5vw,56px) 0 0;
  border-top:1px solid var(--line)}
@media (min-width:640px){.ficha-datos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.ficha-datos{grid-template-columns:repeat(3,1fr)}}
.ficha-datos > div{padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){
  .ficha-datos > div{padding:22px clamp(20px,2.2vw,32px) 24px;border-bottom:none;
    border-left:1px solid var(--line)}
  .ficha-datos > div:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (min-width:980px){
  .ficha-datos > div:nth-child(2n+1){border-left:1px solid var(--line);padding-left:clamp(20px,2.2vw,32px)}
  .ficha-datos > div:nth-child(3n+1){border-left:0;padding-left:0}
}
.ficha-datos dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:9px}
.ficha-datos dd{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.3}

/* ---------- formulario ---------- */
.cta{position:relative}
.form{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:1fr;gap:18px;max-width:720px}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1 / -1}}
.field label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--panel);color:var(--text-primary);
  border:1px solid var(--line-strong);border-radius:2px;padding:13px 14px;font:inherit;font-size:1rem;
  transition:border-color .35s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#6E807C}
.form .send{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.note{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary);max-width:44ch;line-height:1.7}
.ok{grid-column:1 / -1;padding:16px 18px;border:1px solid var(--accent);background:var(--accent-muted);
  font-size:.98rem;display:none}
.ok.on{display:block}

/* ---------- pie ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 40px}
.foot__top{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
@media (min-width:800px){.foot__top{grid-template-columns:1.2fr 1fr 1fr}}
.foot h4,.foot .foot__h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:var(--text-primary);text-decoration:none;transition:color .35s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot__bot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--text-secondary);line-height:1.9}
.foot__bot p{max-width:64ch}

/* ---------- elemento vivo por sección ---------- */
.pulse{position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0,transparent 68%);opacity:0}
.alive .pulse{animation:breathe 7.5s var(--ease-soft) infinite;animation-delay:-2.4s}
@keyframes breathe{0%,100%{opacity:.05;transform:scale(1)}50%{opacity:.12;transform:scale(1.14)}}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .up{opacity:1;transform:none}
  .svc .draw{stroke-dashoffset:0}
  .steps .line .lit{stroke-dashoffset:0}
  .step::before{border-color:var(--accent);background:var(--accent)}
  .threshold .promise{opacity:1;transform:none}
  .thr__photo{opacity:1;transform:none;background-image:url("umbral-obra.jpg")}
  .thr__plan{opacity:0}
  .env::before{display:none}
  .motes{display:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   PÁGINAS INTERIORES
   Todo lo que no existe en la portada cinematográfica.
   ============================================================ */

/* ---------- cabecera de página interior ---------- */
.pagehead{position:relative;padding:clamp(120px,17vh,190px) 0 clamp(56px,8vw,96px);overflow:clip}
/* En la página de Obra la primera fila de miniaturas tiene que entrar en
   pantalla: quien pulsa "Obra" viene a ver, y cada píxel de aire entre el
   titular y la primera fotografía es un peaje. El resto de páginas conservan
   la respiración larga, porque ahí lo primero que hay que leer es el titular. */
.pagehead--corta{padding-bottom:clamp(28px,3.5vw,48px)}
.sec--sube{padding-top:clamp(24px,3vw,44px)}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent 70%)}
.pagehead h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:1;letter-spacing:-.02em;max-width:15ch}
.pagehead .lede{margin-top:24px;max-width:54ch}
.pagehead__bg{position:absolute;inset:0;z-index:-1;opacity:.30;
  background-size:cover;background-position:center;filter:saturate(.8) contrast(1.02)}
.pagehead__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,26,28,.86) 0%,rgba(14,26,28,.62) 42%,var(--canvas) 100%)}

/* ---------- índice de obra ---------- */
.obras{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(36px,5vw,64px)}
@media (min-width:760px){.obras{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.obras{grid-template-columns:repeat(3,1fr)}}
.obra{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  background:var(--panel);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .6s var(--ease),transform .6s var(--ease)}
.obra:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.obra__ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas-2)}
.obra__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.02);transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.obra:hover .obra__ph img{transform:scale(1.05);filter:saturate(1) contrast(1.04)}
.obra__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.obra__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.obra h2{font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1.1}
.obra p{color:var(--text-secondary);font-size:.94rem;max-width:40ch}
.obra__go{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.obra:hover .obra__go{opacity:1;transform:none}

/* ---------- ficha de proyecto ---------- */
.proj__hero{position:relative;aspect-ratio:16/9;max-height:74vh;overflow:hidden;
  border:1px solid var(--line);background:var(--canvas-2)}
@media (max-width:700px){.proj__hero{aspect-ratio:4/3}}
.proj__hero img{width:100%;height:100%;object-fit:cover}
.proj__facts{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(34px,5vw,56px);
  border-top:1px solid var(--line)}
@media (min-width:760px){.proj__facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:20px 0;border-bottom:1px solid var(--line)}
/* El filete va a la IZQUIERDA de cada dato, igual que en .rasgo: así el
   primero arranca a ras del título y los demás no nacen pegados a la línea
   del anterior. */
@media (min-width:760px){
  .fact{padding:22px 0 24px 0;border-bottom:none;
    border-left:1px solid var(--line);
    padding-left:clamp(20px,2.2vw,32px);padding-right:clamp(20px,2.2vw,32px)}
  .fact:nth-child(4n+1){border-left:0;padding-left:0}
}
.fact dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:9px}
.fact dd{margin:0;font-family:var(--display);font-size:1.28rem;line-height:1.2}
.proj__body{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);margin-top:clamp(44px,6vw,80px)}
@media (min-width:900px){.proj__body{grid-template-columns:1.05fr .95fr;align-items:start}}
.proj__body .body{color:var(--text-secondary);font-size:1.08rem;max-width:54ch}
.proj__gal{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(44px,6vw,80px)}
@media (min-width:760px){.proj__gal{grid-template-columns:repeat(2,1fr)}}
.proj__gal figure{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--canvas-2)}
.proj__gal img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02)}
.proj__nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:clamp(48px,7vw,90px);padding-top:26px;border-top:1px solid var(--line)}
.proj__nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;transition:color .4s var(--ease)}
.proj__nav a:hover{color:var(--accent)}

/* ---------- rasgos numerados ---------- */
.rasgos{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line)}
@media (min-width:700px){.rasgos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.rasgos{grid-template-columns:repeat(4,1fr)}}
.rasgo{padding:clamp(24px,3vw,34px) 0 clamp(28px,3.4vw,40px) 0;
  border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .rasgo{border-left:1px solid var(--line);
    padding-left:clamp(22px,2.4vw,34px);padding-right:clamp(22px,2.4vw,34px)}
  .rasgo:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (min-width:1100px){
  .rasgo:nth-child(2n+1){border-left:1px solid var(--line);padding-left:clamp(22px,2.4vw,34px)}
  .rasgo:nth-child(4n+1){border-left:0;padding-left:0}
}
.rasgo b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--accent);margin-bottom:14px;font-weight:400}
.rasgo h3{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.15;margin-bottom:10px}
.rasgo p{color:var(--text-secondary);font-size:.95rem;text-align:justify;
  hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
@media (max-width:520px){.rasgo p{text-align:left}}

/* ---------- servicio extendido ---------- */
.svc-full{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);
  padding:clamp(44px,6vw,84px) 0;border-top:1px solid var(--line)}
@media (min-width:900px){
  .svc-full{grid-template-columns:.95fr 1.05fr;align-items:center}
  .svc-full:nth-of-type(even) .svc-full__ph{order:2}
}
.svc-full__ph{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);
  background:var(--canvas-2)}
.svc-full__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.93) contrast(1.02)}
.svc-full h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.06}
.svc-full .body{color:var(--text-secondary);margin-top:20px;max-width:52ch;font-size:1.06rem}
.svc-full ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:52ch}
.svc-full li{position:relative;padding-left:26px;color:var(--text-secondary);font-size:1rem}
.svc-full li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:1px;background:var(--accent)}
.svc-full .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--accent);
  margin-bottom:16px;display:block}

/* ---------- texto legal ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:clamp(38px,5vw,60px)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--text-secondary);margin-top:16px}
.legal ul{padding-left:22px;margin:0}
.legal a{color:var(--accent)}

/* ---------- formulario a página completa ---------- */
.form--full{max-width:820px}
.form--full .field{grid-column:1 / -1}
@media (min-width:700px){.form--full .field.half{grid-column:span 1}}
.fieldnote{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--text-secondary);
  margin-top:8px;line-height:1.7}
.aviso{margin-top:clamp(30px,4vw,44px);padding:22px 24px;border:1px solid var(--line);
  background:var(--panel);color:var(--text-secondary);font-size:.97rem;max-width:64ch}
.aviso b{color:var(--text-primary);font-weight:500}

/* ---------- mapa ---------- */
.mapa{margin-top:clamp(36px,5vw,60px);border:1px solid var(--line);overflow:hidden;
  aspect-ratio:16/8;background:var(--canvas-2)}
@media (max-width:700px){.mapa{aspect-ratio:4/3}}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.05) brightness(.86)}

/* ---------- datos de contacto ---------- */
.datos{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);margin-top:clamp(36px,5vw,60px)}
@media (min-width:760px){.datos{grid-template-columns:repeat(3,1fr)}}
.dato h3,.dato h2{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:400;margin-bottom:12px}
.dato a,.dato p{font-family:var(--display);font-size:1.3rem;line-height:1.35;text-decoration:none;
  transition:color .4s var(--ease)}
.dato a:hover{color:var(--accent)}

/* ---------- botón flotante de WhatsApp ---------- */
.wa{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:70;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#08110F;text-decoration:none;
  box-shadow:0 10px 30px rgba(4,12,14,.5);
  transition:transform .4s var(--ease),background .4s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.04);background:var(--accent-hover)}
.wa svg{width:27px;height:27px;fill:currentColor}
@media (max-width:720px){.wa{width:50px;height:50px}}

/* la sección que sigue a una cabecera de página no necesita todo el respiro */
.pagehead + .sec{padding-top:clamp(48px,6vw,84px)}

/* ---------- objetivos táctiles ----------
   En pantalla táctil todo lo pulsable llega a 44px de alto, sin mover el diseño. */
@media (pointer:coarse){
  .brand{min-height:44px}
  .proj__nav a{min-height:44px;display:inline-flex;align-items:center}
  .foot ul a{min-height:44px;display:inline-flex;align-items:center}
  .dato a{min-height:44px;display:inline-flex;align-items:center}
  .qa summary{min-height:44px}
}

/* ---------- galería de proyecto ----------
   Clic en la imagen para avanzar, tira de miniaturas para saltar. */
.gal{margin-top:clamp(44px,6vw,80px)}
.gal__stage{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);
  background:var(--canvas-2);cursor:pointer;user-select:none}
@media (max-width:700px){.gal__stage{aspect-ratio:4/3}}
.gal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.gal__img.is-on{opacity:1}
.gal__nav{position:absolute;top:0;bottom:0;width:clamp(52px,8%,90px);display:grid;place-items:center;
  border:0;padding:0;background:transparent;color:var(--text-primary);cursor:pointer;
  opacity:0;transition:opacity .4s var(--ease)}
.gal__stage:hover .gal__nav,.gal__nav:focus-visible{opacity:.9}
.gal__nav--prev{left:0}
.gal__nav--next{right:0}
.gal__nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;
  filter:drop-shadow(0 2px 10px rgba(4,10,12,.95))}
@media (pointer:coarse){.gal__nav{opacity:.75;width:60px}}
.gal__count{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.16em;color:var(--text-primary);background:rgba(8,16,18,.62);
  backdrop-filter:blur(8px);padding:6px 11px;border-radius:2px;pointer-events:none;
  border:1px solid rgba(96,96,126,.28)}
.gal__strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:6px}
.gal__t{flex:0 0 auto;width:clamp(88px,11vw,128px);aspect-ratio:16/9;padding:0;
  border:1px solid var(--line);background:var(--canvas-2);cursor:pointer;overflow:hidden;
  opacity:.45;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.gal__t.is-on{opacity:1;border-color:var(--accent)}
.gal__t:hover{opacity:.85}
.gal__t img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.gal__img{transition:none}}

/* la ficha de la portada ahora es un enlace entero */
a.card{text-decoration:none;color:inherit}
a.card:hover h3{color:var(--accent);transition:color .4s var(--ease)}


/* ---------- coste: el cálculo vivo de la portada ---------- */
.tasa{margin-top:clamp(36px,5vw,60px);padding:clamp(24px,3.4vw,44px);
  border:1px solid var(--line-strong);border-radius:2px;background:var(--panel);
  max-width:840px}
.tasa__cab{display:flex;flex-direction:column;gap:12px;
  margin-bottom:clamp(22px,3vw,34px)}
.tasa__fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%}
.tasa__et{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);min-width:72px}
.tasa__ctrl{display:flex;gap:4px;flex:none}
.tasa__b{min-height:44px;padding:11px 18px;cursor:pointer;background:transparent;
  color:var(--text-secondary);border:1px solid var(--line);border-radius:2px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.tasa__b:hover{color:var(--text-primary);border-color:var(--line-strong)}
.tasa__b.is-on{color:var(--canvas);background:var(--accent);border-color:var(--accent)}
.tasa__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tasa__nota{flex:none;max-width:62ch;font-size:.78rem;color:var(--text-secondary);
  line-height:1.5;margin:2px 0 0}

.tasa__cifra{font-family:var(--display);font-weight:400;line-height:1;margin:0;
  font-size:clamp(2rem,6vw,3.6rem);color:var(--text-primary);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .38em}
.tasa__cifra i{font-style:normal;font-size:.34em;color:var(--text-secondary)}
.tasa__m2{font-family:var(--mono);font-size:.78rem;color:var(--text-secondary);margin:12px 0 0}
.tasa__m2 b{color:var(--accent);font-weight:400}

.tasa__barra{display:flex;height:8px;border-radius:2px;overflow:hidden;
  margin:clamp(22px,3vw,32px) 0 12px;background:var(--canvas)}
.tasa__s{display:block;height:100%;transition:width .55s var(--ease)}
.tasa__s--c{background:#2E7CBF}
.tasa__s--g{background:var(--text-secondary)}
.tasa__s--a{background:var(--accent)}
.tasa__ley{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.tasa__ley li{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--text-secondary)}
.tasa__ley i{width:9px;height:9px;border-radius:1px;flex:none}
.tasa__ley b{font-family:var(--mono);color:var(--text-primary);font-weight:400}

.tasa__pie{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;
  margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line)}
.tasa__pie p{flex:1 1 260px;font-size:.74rem;color:var(--text-secondary);
  line-height:1.55;margin:0;opacity:.85}
@media (prefers-reduced-motion:reduce){.tasa__s{transition:none}}