/* ═══════════════════════════════════════════
   BELTHIA — Applied Technology
   Paleta, tipografía y layout. Sin framework.
   Cambiar colores globales en :root
   ═══════════════════════════════════════════ */

:root{
  /* fondos */
  --bg:      #17171E;
  --bg2:     #1E1E27;
  --bg3:     #282833;
  --rule:    #363644;
  --rule-2:  #4A4A5C;

  /* texto */
  --text:    #F4F3F8;
  --mid:     #B0ADBD;
  --dim:     #8B889A;

  /* acentos de marca (degradado del logo) */
  --blue:    #4A8FE7;
  --blue-d:  #1E5FB8;
  --amber:   #E8943A;
  /* la plata de los iconos de sector */
  --plata:   #C3CAD6;
  --amber-l: #F5B26B;

  --grad: linear-gradient(120deg, var(--blue) 0%, #7B7BC8 45%, var(--amber) 100%);

  /* medidas */
  --max:     1240px;
  /* ancho comun del video y de la rejilla de fotos */
  --ancho-fotos: min(720px, 100%);
  --pad:     clamp(20px, 5vw, 64px);
  --r:       14px;
  --r-esquina:clamp(26px,4.4vw,72px);
  --ease:    cubic-bezier(.22,.61,.36,1);
  --suave:   cubic-bezier(.33,.02,.18,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

/* El color de fondo vive en <html> para que <body> pueda ser
   transparente y dejar ver la capa de la cinta. */
html{ background:var(--bg); }

body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:300; letter-spacing:-.02em; line-height:1.1; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--amber); color:#17171E; }

/* ─────────── FONDO ÚNICO ───────────
   Una sola capa fija con la cinta de marca detras de toda la pagina.
   No cambia al hacer scroll: lo que entra y sale son los elementos,
   siempre sobre este mismo fondo. */
.fondo{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url('../images/hero-cinta.webp') center/cover no-repeat;
  opacity:.42;
  filter:blur(9px) saturate(1.05);
  animation:drift 40s ease-in-out infinite alternate;
}
/* velo que baja la cinta lo justo para que el texto respire */
.fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(23,23,30,.30) 0%, rgba(23,23,30,.58) 30%, rgba(23,23,30,.68) 100%);
}

/* ─────────── NAV ─────────── */
nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:32px;
  padding:18px var(--pad);
  transition:background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
nav.stuck{
  background:rgba(23,23,30,.8);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--rule);
  padding-top:12px; padding-bottom:12px;
}

.nav-mark{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-mark img{ width:42px; height:42px; }
.nav-word{ font-size:14px; font-weight:600; letter-spacing:.22em; }

.nav-links{ display:flex; gap:10px; margin-left:auto; }
/* Los tres enlaces son botones, con la misma pastilla que el idioma y
   el sol/luna. La diferencia es que estos navegan, asi que llevan el
   azul de la marca en el borde; los otros dos no se tocan. */
.nav-links a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 17px; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--blue) 42%, var(--rule));
  font-size:13px; font-weight:500; color:var(--mid);
  transition:color .25s, border-color .25s, background .25s;
}
.nav-links a:hover{
  color:var(--text);
  border-color:var(--blue);
  background:color-mix(in srgb, var(--blue) 12%, transparent);
}

.nav-right{ display:flex; align-items:center; gap:18px; }

.lang{
  background:none; border:1px solid var(--rule); border-radius:100px;
  color:var(--dim); font-family:inherit; font-size:11px; font-weight:600;
  letter-spacing:.08em; padding:6px 12px; cursor:pointer;
  /* centrado en los dos ejes: en el movil la pastilla crece hasta los
     44px del dedo, y sin esto el ES/EN se quedaba arrimado a la
     esquina de arriba a la izquierda en vez de en el medio */
  display:flex; align-items:center; justify-content:center;
  line-height:1; gap:5px; transition:border-color .25s;
}
.lang:hover{ border-color:var(--rule-2); }
.lang i{ font-style:normal; opacity:.35; }
.lang .on{ color:var(--text); }

/* ─────────── BOTONES ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:14px 30px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:all .3s var(--ease); white-space:nowrap;
}
.btn-sm{ padding:9px 20px; font-size:13px; border-color:var(--rule-2); color:var(--text); }
.btn-sm:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

.btn-primary{ background:var(--text); color:#17171E; font-weight:600; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(232,148,58,.55); }

.btn-ghost{ border-color:var(--rule-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text); background:rgba(255,255,255,.04); }

/* ─────────── HERO ─────────── */
/* El contenedor alto y la pantalla pegada dentro: mientras el logotipo
   viaja a su sitio del nav, la pagina no se mueve. */
/* Largo a proposito: despues de que el titular se coloque queda mas de
   una pantalla de scroll con el quieto delante. Ese rato es el que hace
   que se lea, en vez de pasar de largo. */
.hero-largo{ position:relative; height:clamp(1600px,265vh,3200px); }
.hero{
  position:sticky; top:0;
  height:100vh;   /* reserva para navegadores sin svh */
  height:100svh;
  display:grid; place-items:center;
  padding:0 var(--pad);
  overflow:hidden;
}
@keyframes drift{ from{ transform:scale(1.12) translateX(-1%);} to{ transform:scale(1.2) translateX(1%);} }

.hero-veil{
  position:absolute; inset:0;
  /* termina transparente: debajo sigue la misma cinta, no hay corte */
  background:radial-gradient(105% 80% at 50% 40%,
             transparent 0%, rgba(23,23,30,.30) 60%, rgba(23,23,30,.55) 100%);
}

/* El logotipo y el titular ocupan LA MISMA celda: uno se va de ahi y el
   otro llega al mismo sitio, que es lo que hace que se lea como un
   relevo y no como dos cosas en dos lugares. */
.hero-inner{
  position:relative; width:100%; max-width:var(--max); margin:0 auto;
  display:grid; place-items:center; text-align:center;
}
.hero-inner > *{ grid-area:1 / 1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mid); margin:15px 0 0;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber); flex:0 0 auto;
  box-shadow:0 0 12px 2px rgba(232,148,58,.5);
  animation:pulse 3s cubic-bezier(.16,.68,.4,1) infinite;
}
/* la onda se abre hasta 17 px alrededor del punto */
@keyframes pulse{
  0%   { box-shadow:0 0 0 0    rgba(232,148,58,.5),  0 0 12px 2px rgba(232,148,58,.5); }
  75%  { box-shadow:0 0 0 17px rgba(232,148,58,0),   0 0 15px 3px rgba(232,148,58,.6); }
  100% { box-shadow:0 0 0 0    rgba(232,148,58,0),   0 0 12px 2px rgba(232,148,58,.5); }
}

.hero-title{
  font-size:clamp(2.5rem, 7vw, 5.2rem);
  font-weight:200; letter-spacing:-.035em;
  opacity:0; will-change:transform, opacity;
}
.hero-title span{ display:block; }
.hero-title .l2{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:300;
}

.hero-sub{
  max-width:56ch; margin:0 auto 16px; font-size:clamp(1rem,1.6vw,1.16rem);
  font-weight:300; color:var(--mid);
}

/* Velo local detras del texto del hero: la cinta se ve entera, pero
   el texto no compite con las zonas mas brillantes de la imagen. */
.hero-copy{ position:relative; z-index:0; }
.hero-copy::before{
  content:''; position:absolute; z-index:-1;
  inset:-40px -8vw -30px;
  background:radial-gradient(58% 62% at 50% 52%,
             rgba(23,23,30,.86) 0%, rgba(23,23,30,.66) 45%, transparent 78%);
  pointer-events:none;
}

.metric{ display:grid; justify-items:center; text-align:center; gap:16px; }
.metric b{
  display:block; font-size:clamp(2.6rem,5vw,3.8rem); font-weight:200;
  letter-spacing:-.04em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.metric span{ font-size:11.5px; color:var(--dim); letter-spacing:.16em; text-transform:uppercase; }

/* anillo alrededor de la cifra. Lo inyecta main.js: sin el, la
   cifra se ve igual, solo que sin circulo. */
/* Alto explicito en vez de aspect-ratio: si aspect-ratio no se
   aplicase, la caja quedaria sin altura, el SVG no se veria y la
   cifra saldria descentrada. Con height no depende de nada. */
.metric-ring{
  position:relative;
  width:clamp(260px,34vw,440px);
  height:clamp(260px,34vw,440px);
  display:grid; place-items:center;
}
.metric-ring svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform:rotate(-90deg); overflow:visible;
}
.metric-ring .pista{ fill:none; stroke:var(--rule); stroke-width:.8; }
.metric-ring .puntos{ fill:none; stroke:var(--rule-2); stroke-width:.7; opacity:.9; }
.metric-ring .marcas line{ stroke:var(--rule-2); stroke-width:.7; }
.metric-ring .giro{ transform-origin:50% 50%; animation:aro-gira 60s linear infinite; }
@keyframes aro-gira{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.metric-ring .arco{
  /* main.js pone el degradado en estilo en linea, con color de
     reserva detras por si la referencia url(#id) no resolviera. */
  fill:none; stroke:var(--amber); stroke-width:2.6; stroke-linecap:round;
  filter:drop-shadow(0 0 3px rgba(123,123,200,.55));
}

/* ─────────── SECCIONES ─────────── */
.section{ padding:clamp(90px,13vw,170px) var(--pad); max-width:var(--max); margin:0 auto; }

.section-work{ position:relative; }
.section-work > *{ position:relative; z-index:1; }

.section-head{ max-width:760px; margin-bottom:clamp(48px,7vw,80px); }

.kicker{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin-bottom:20px;
}
.section-head h2{ font-size:clamp(1.9rem,4.4vw,3.1rem); margin-bottom:24px; }
.lede{ font-size:clamp(.98rem,1.5vw,1.1rem); font-weight:300; color:var(--mid); max-width:60ch; }

/* ─────────── BANDA ───────────
   Traslucida: la foto se queda al 50% y los velos no funden a
   var(--bg), asi que por debajo se sigue viendo la misma cinta. No
   corta la pagina, la matiza.

   El nivel de traslucidez lo lleva --k, que escribe el JS con el
   scroll: ancha y traslucida al llegar, estrecha y opaca al pegarse. */
.band{ position:relative; }
.band-caja{
  position:absolute; inset:0 0 auto 0; overflow:hidden;
  display:grid; place-items:center;
}
.band-img{
  position:absolute; inset:0;
  background:url('../images/sec-taller.webp') center 42%/cover no-repeat;
  filter:saturate(.9);
}
/* solo difumina los bordes para que la banda no corte en seco */
.band-caja::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(23,23,30,.35) 0%, transparent 22%, transparent 78%, rgba(23,23,30,.35) 100%);
}
.band-quote{
  position:relative; z-index:2; text-align:center;
  /* claro en los dos modos: debajo hay una foto de taller, no el fondo
     de la pagina */
  color:#F4F3F8;
  font-size:clamp(1.2rem,3vw,2.1rem); font-weight:200; letter-spacing:-.02em;
  padding:0 var(--pad); max-width:20ch;
  text-shadow:0 2px 30px rgba(0,0,0,.8);
}

/* la banda de contacto es la misma pieza, solo que mas baja: hace de
   respiro antes del cierre, no de titulo */
.band-encargo .band-img{ background-image:url('../images/sec-encargo.webp'); }
/* Mas baja que las otras dos a proposito: esta no titula una seccion,
   hace una pregunta, y detras viene el formulario enseguida. */
/* La banda de contacto llega mas baja que las otras dos. No es capricho:
   todo lo que mide de mas hay que reservarlo debajo como hueco vacio
   para que no tape el formulario al llegar. */
:root{
  --ancha-contacto:clamp(170px,19vw,240px);
  /* valor plano y no un clamp(): el JS tiene que poder leerlo, y el
     navegador devuelve las variables sin resolver, tal cual se escriben */
  --viaje:78px;
  /* cuanto baja el formulario respecto al centro del hueco */
  --baja:44px;
}
@media (max-height:860px){ :root{ --viaje:52px; --baja:28px; } }
.band-contacto{ --ancha:var(--ancha-contacto); }
.band-contacto .band-img{ background-image:url('../images/sec-contacto.webp'); }

/* Aqui habia un bloque de 640px de cuando en el movil las cuatro
   tarjetas iban en una sola columna: redondeaba las dos esquinas de
   arriba de la primera y las dos de abajo de la ultima. Al volver al
   cuadro de dos por dos sobraban, y se veian dos redondeos sueltos en
   mitad del cuadrado. Lo que hacia de mas ya lo hace el bloque del
   movil del final del archivo. */

/* ─────────── PROYECTOS ─────────── */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:42px; }
/* display:flex le gana a [hidden] del navegador: sin esto, ocultar los
   filtros desde JS no hacia nada. */
.filters[hidden]{ display:none; }
.filter{
  background:none; border:1px solid var(--rule); border-radius:100px;
  color:var(--mid); font-family:inherit; font-size:13px; font-weight:400;
  padding:9px 20px; cursor:pointer; transition:all .28s var(--ease);
}
.filter:hover{ border-color:var(--rule-2); color:var(--text); }
.filter.is-active{ background:var(--text); border-color:var(--text); color:var(--bg); font-weight:600; }

/* ─────────── FILAS POR SECTOR ───────────
   La rejilla de fotos va centrada en la pantalla, del mismo ancho que
   el video de arriba. El icono del sector se queda a su izquierda, en
   el margen, grande y centrado bajo su nombre.

   Nada se oculta desde aqui: si main.js no corriera se verian las
   tres filas quietas y encendidas. El estado de partida lo pone JS
   con .animando. */
.pieza{
  position:relative; margin:0; aspect-ratio:1/1;
  perspective:900px;
  will-change:transform, opacity;
}
.pieza-giro{
  position:absolute; inset:0; padding:0; border:0; background:none;
  cursor:pointer; font:inherit; color:inherit;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  transition:transform .7s var(--suave);
}
.pieza[data-vuelta] .pieza-giro{ transform:rotateY(180deg); }
/* Con raton basta pasar por encima; al salir vuelve la foto. En tactil
   no hay hover, asi que ahi sigue valiendo el toque (data-vuelta). */
@media (hover:hover) and (pointer:fine){
  .pieza:hover .pieza-giro{ transform:rotateY(180deg); }
  .pieza:hover[data-vuelta] .pieza-giro{ transform:none; }
}
/* Con teclado no hay raton que pasar por encima: al tabular tambien
   se da la vuelta, o la descripcion seria inalcanzable. */
.pieza-giro:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.pieza:focus-within .pieza-giro{ transform:rotateY(180deg); }
.pieza-cara{
  position:absolute; inset:0; overflow:hidden;
  border-radius:clamp(12px,1.2vw,18px);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:block;
}
.pieza-frente{ background:var(--bg3); }
.pieza-frente img{ width:100%; height:100%; object-fit:cover; display:block; }
.pieza-nombre{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 9px 8px; text-align:left;
  font-size:10px; font-weight:500; line-height:1.25; color:#F4F3F8;
  background:linear-gradient(to top, rgba(14,13,18,.9) 0%, rgba(14,13,18,.5) 55%, transparent 100%);
}
.pieza-nombre em{ font-style:normal; color:rgba(244,243,248,.72); }

.pieza-dorso{
  transform:rotateY(180deg);
  background:var(--bg2); border:1px solid var(--rule);
  display:flex; flex-direction:column; justify-content:center;
  gap:7px; padding:12px 13px; text-align:left;
}
.pieza-dorso-nom{ font-size:11px; font-weight:600; color:var(--text); line-height:1.2; }
.pieza-dorso-txt{ font-size:10px; font-weight:300; color:var(--mid); line-height:1.45; }

/* Sin JS no hay giro posible: el boton no debe aparentar que lo hay */
html:not(.js-giro) .pieza-giro{ cursor:default; }

.work-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1px; background:var(--rule);
  border:1px solid var(--rule);
}

.work{
  border:0; border-radius:0; overflow:hidden;
  background:var(--bg2);
  /* el giro lo escribe main.js en cada fotograma de scroll */
  will-change:transform, opacity;
  transition:background .4s var(--ease);
}
/* Unidas no se pueden levantar al pasar el raton sin romper la junta:
   el realce va por fondo y por el zoom de la propia foto. */
.work:hover{ background:var(--bg3); }
.work[hidden]{ display:none; }

/* La animación de entrada se aplica SOLO al filtrar, desde JS.
   Nunca por defecto: si no llegara a ejecutarse, fill-mode dejaría
   las tarjetas en opacity:0 y el contenido desaparecería. */
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} }

.work-fig{
  margin:0; position:relative; aspect-ratio:3/2; overflow:hidden;
  background:var(--bg3);
  display:grid; place-items:center;
}

/* Relleno neutro para cualquier tarjeta que aun no tenga foto.
   Sin imagen de fondo: antes habia una por categoria que se
   descargaba en cada visita aunque quedase tapada por la foto real. */
.work-fig::before{
  content:''; position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.3; filter:saturate(.8);
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.work:nth-child(3n+1) .work-fig::before{ background-position:22% 38%; filter:saturate(.8) hue-rotate(-12deg); }
.work:nth-child(3n+2) .work-fig::before{ background-position:70% 55%; filter:saturate(.75) hue-rotate(10deg); }
.work:nth-child(3n+3) .work-fig::before{ background-position:45% 78%; transform:scale(1.12); }
.work:hover .work-fig::before{ opacity:.42; transform:scale(1.06); }

/* velo + inicial, para que se lea como pieza gráfica y no como foto de stock */
.work-fig::after{
  content:attr(data-mark); position:relative; z-index:1;
  font-size:5rem; font-weight:200; color:rgba(255,255,255,.16);
  letter-spacing:-.05em; line-height:1;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.work-fig{
  background-image:
    radial-gradient(90% 80% at 30% 20%, rgba(74,143,231,.18), transparent 60%),
    radial-gradient(80% 90% at 80% 90%, rgba(232,148,58,.16), transparent 60%);
}
.work-fig img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:2; transition:transform .7s var(--ease);
}
/* En cuanto exista la foto real del producto, el relleno desaparece solo.
   (Si no hay foto, el <img> se elimina desde el onerror del HTML.) */
.work-fig:has(img)::before,
.work-fig:has(img)::after{ content:none; background:none; }
.work:hover .work-fig img{ transform:scale(1.05); }

.work-body{ padding:24px 26px 28px; }
.work-cat{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px;
}
.work-body h3{ font-size:1.22rem; font-weight:400; margin-bottom:9px; }
.work-body h3 em{ font-style:normal; color:var(--mid); }
.work-body p{ font-size:.9rem; font-weight:300; color:var(--mid); }

/* ─────────── EL ENCARGO ───────────
   Cuatro fotos con el texto dentro. Cada una redondea la esquina que le
   toca segun donde este, de modo que las cuatro juntas dejan el bloque
   con las cuatro puntas de fuera redondeadas y las de dentro a escuadra. */
/* La banda de arriba mide poco en el flujo pero se pinta alta, asi que
   sobresale sobre el arranque de esta seccion. Este margen es el hueco
   que necesita para no comerse la primera fila de tarjetas. */
.section-encargo{
  position:relative;
  /* Arriba, el hueco que necesita la banda ancha para no comerse la
     primera fila, mas lo que hace falta para que el bloque acabe de
     montarse a media pantalla y no pegado al techo.
     Abajo, camino de sobra: cuando las cuatro han llegado queda scroll
     por delante, y asi la inercia del gesto muere en esta seccion en
     vez de arrastrar a la siguiente. */
  padding-top:clamp(150px,16vw,240px);
  padding-bottom:clamp(90px,11vw,170px);
}
.section-encargo > *{ position:relative; z-index:1; }
/* el envoltorio es mas alto que la rejilla; esa diferencia es el scroll
   que no mueve nada, con el bloque ya montado y quieto en pantalla */
/* La pausa es larga a proposito. Un empujon de trackpad recorre mil o
   dos mil pixeles antes de pararse, asi que para que la inercia muera
   con el bloque todavia delante hace falta al menos una pantalla
   entera de scroll que no mueva nada. */
/* Igual que el muro: un contenedor alto y la rejilla pegada dentro. El
   bloque se monta CON LA PAGINA QUIETA, no mientras sube. Esa es la
   diferencia: si la composicion se esta moviendo a la vez que se monta,
   la inercia se la lleva antes de que termine. */
.encargo-largo{ position:relative; height:clamp(1500px,250vh,2800px); }
/* la pantalla pegada, igual que la del muro: ocupa lo que queda bajo el
   nav y el rotulo, y centra el bloque en ese hueco */
.encargo-pega{
  position:sticky; top:calc(var(--nav,58px) + var(--fino));
  height:calc(100svh - var(--nav,58px) - var(--fino));
  display:grid; place-items:center;
}
/* el testigo no se ve; solo existe para tener que subirlo */
.encargo-testigo{
  position:absolute; z-index:0; pointer-events:none;
  left:0; width:100%; height:2px; top:0;
  background:transparent;
}
/* El ancho de la tarjeta sale del mas estrecho de los dos limites: lo
   que cabe de ancho entre dos, o lo que cabe de alto en dos filas. Sin
   la segunda cuenta, en un portatil bajo el bloque se salia por abajo.
   Lo de pegarse ya lo hace .encargo-pega; aqui sobraba. */
.encargo-grid{
  --junta:clamp(7px,.9vw,15px);
  --ancho:min(
    /* en vez de 100%, que aqui depende del propio ancho de la rejilla y
       hace que la cuenta se muerda la cola, se mide contra la ventana */
    (min(92vw, 1000px) - var(--junta)) / 2,
    ((100svh - var(--nav,58px) - var(--fino) - 46px - var(--junta)) / 2) * 1.6
  );
  display:grid; grid-template-columns:repeat(2, var(--ancho));
  justify-content:center; gap:var(--junta);
  background:none; border:0; margin:0 auto;
}
.encargo-card{
  position:relative; overflow:hidden; background:none;
  width:var(--ancho); aspect-ratio:16/10; display:block;
  will-change:transform, opacity;
}
/* solo se esconden si main.js esta vivo: si algo falla, se ven quietas
   en su sitio en vez de no verse nunca */
.js-anim .encargo-card{ opacity:0; }
.encargo-card:nth-child(1){ border-top-left-radius:var(--r-esquina); }
.encargo-card:nth-child(2){ border-top-right-radius:var(--r-esquina); }
.encargo-card:nth-child(3){ border-bottom-left-radius:var(--r-esquina); }
.encargo-card:nth-child(4){ border-bottom-right-radius:var(--r-esquina); }

/* la foto ya no manda el alto: es el fondo de la tarjeta */
.encargo-foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; aspect-ratio:auto;
  opacity:.6;
  filter:saturate(.9) brightness(.86);
}
/* el velo solo donde va el texto: por arriba la foto se queda limpia */
.encargo-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(10,10,14,.88) 0%, rgba(10,10,14,.55) 32%, transparent 62%);
}
.encargo-texto{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) clamp(18px,2.2vw,30px);
  display:flex; flex-direction:column; gap:7px;
}
/* dentro de la foto el texto va claro en los dos temas: debajo no esta
   el fondo de la pagina, esta una fotografia oscura */
.encargo-card span{
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.66);
}
.encargo-card b{
  font-size:clamp(.95rem,1.35vw,1.2rem); font-weight:300; line-height:1.45;
  color:#fff; text-shadow:0 1px 16px rgba(0,0,0,.6);
}

/* ─────────── CONTACTO ─────────── */
.section-contact{ position:relative; }
.section-contact > *{ position:relative; z-index:1; }


/* ─────────── FOOTER ─────────── */
footer{
  border-top:1px solid var(--rule);
  /* mas aire debajo que encima: el pie acaba justo donde acaba el
     documento, y sin este margen la ultima linea queda pegada al borde
     de la ventana y parece que falta algo por ver */
  padding:38px var(--pad) clamp(44px,6vh,72px);
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:18px;
  align-items:center; justify-content:space-between;
}
.foot-mark{ display:flex; align-items:center; gap:11px; }
.foot-mark img{ width:22px; height:22px; opacity:.85; }
.foot-mark span{ font-size:12.5px; font-weight:600; letter-spacing:.2em; }
.foot-mark i{ font-style:normal; font-weight:300; letter-spacing:.08em; color:var(--dim); }
.foot-legal{ font-size:12.5px; color:var(--dim); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width:860px){
  .nav-links{ display:none; }
  .hero{ min-height:auto; padding-top:120px; padding-bottom:20px; }
}
@media (max-width:520px){
  .nav-word{ display:none; }
  .work-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
}

/* ─────────── ACCESIBILIDAD ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ═══════════════════════════════════════════
   MEDIDOR DE SECTORES
   Sin desplazamientos: la fila va centrada siempre. Los iconos
   nacen con ancho cero y al abrirse empujan hacia la derecha,
   de modo que el aro se corre solo hacia la izquierda y el
   conjunto queda centrado en todo momento.
   ═══════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   MODO DÍA MANUAL
   Se aplica cuando el visitante lo fuerza con el boton:
   <html data-theme="light">. Mas abajo estan las mismas
   reglas para cuando lo pide el sistema operativo.
   ═══════════════════════════════════════════ */
:root[data-theme="light"]{
  --bg:      #FBFAFC;
  --bg2:     #F4F2F7;
  --bg3:     #EBE8F0;
  --rule:    #E0DDE7;
  --rule-2:  #C9C5D4;

  --text:    #14131A;
  --mid:     #56525F;
  --dim:     #85808F;

  --blue:    #2C6FD1;
  --amber:   #C97A18;
  --plata:   #8E97A8;
}

/* En claro la cinta se aclara y el velo pasa a blanco */
:root[data-theme="light"] .sector-marca{ color:#8A909E; }
:root[data-theme="light"] .fondo{ opacity:.40; filter:blur(9px) saturate(.85) brightness(1.25); }
:root[data-theme="light"] .fondo::after{ background:linear-gradient(to bottom, rgba(251,250,252,.32) 0%, rgba(251,250,252,.60) 30%, rgba(251,250,252,.70) 100%); }
/* el velo del texto del hero tambien invierte: claro sobre claro */
:root[data-theme="light"] .hero-copy::before{
  background:radial-gradient(58% 62% at 50% 52%,
             rgba(251,250,252,.92) 0%, rgba(251,250,252,.74) 45%, transparent 78%);
}
:root[data-theme="light"] .hero-veil{
    background:radial-gradient(105% 80% at 50% 40%, transparent 0%, rgba(251,250,252,.35) 60%, rgba(251,250,252,.6) 100%);
  }

/* Botón primario: en claro no puede ser blanco */
:root[data-theme="light"] .btn-primary{ background:#14131A; color:#FBFAFC; }
:root[data-theme="light"] .btn-sm{ color:var(--text); }
:root[data-theme="light"] .btn-sm:hover{ background:#14131A; color:#FBFAFC; border-color:#14131A; }

/* Tarjetas: la foto de relleno es oscura, se baja mucho */
:root[data-theme="light"] .lockup-mark{
  filter:drop-shadow(0 10px 24px rgba(40,44,60,.22))
         drop-shadow(0 -1px 0 rgba(255,255,255,.9));
}
:root[data-theme="light"] .band-caja::after{ background:linear-gradient(to bottom, rgba(251,250,252,.4) 0%, transparent 22%, transparent 78%, rgba(251,250,252,.4) 100%); }
:root[data-theme="light"] .work-fig::before{ opacity:.16; }
:root[data-theme="light"] .work:hover .work-fig::before{ opacity:.26; }
:root[data-theme="light"] .work-fig::after{ color:rgba(20,19,26,.22); text-shadow:none; }
:root[data-theme="light"] .work-fig{
  background-image:
    radial-gradient(90% 80% at 30% 20%, rgba(44,111,209,.14), transparent 60%),
    radial-gradient(80% 90% at 80% 90%, rgba(201,122,24,.14), transparent 60%);
}

:root[data-theme="light"] nav.stuck{ background:rgba(251,250,252,.85); }
:root[data-theme="light"] ::selection{ background:var(--amber); color:#fff; }

/* ═══════════════════════════════════════════
   BLOQUE DE MARCA + INTRO
   El logotipo del hero ES el del intro: nunca se duplica
   ni se desplaza. El velo solo se desvanece por detras.
   ═══════════════════════════════════════════ */
.lockup{
  position:relative;
  display:grid; justify-items:center;
  will-change:transform, opacity;
  transform:translateY(var(--lock-y, 0px));
}
/* Sin halo detras. Se puso para separar el logotipo del fondo, pero se
   lee como un manchon oscuro y le quita justo lo que tiene que tener:
   que parezca una pieza de metal apoyada en la pantalla, no un dibujo
   con una sombra pegada. */
.lockup-mark{
  width:clamp(176px,19vw,264px); height:auto;
  /* Nada de resplandores anchos: eso emborrona. Una sombra corta que lo
     asiente y un reflejo de un pixel arriba, como tiene el metal
     pulido. El brillo de verdad va en el degradado del propio SVG. */
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))
         drop-shadow(0 -1px 0 rgba(255,255,255,.35));
}
.lockup-word{
  display:flex; margin-top:24px;
  font-size:clamp(1.05rem,2.2vw,1.7rem); font-weight:300;
  letter-spacing:.44em; text-indent:.44em; color:var(--text);
}
.lockup-word span{ display:inline-block; }
/* Las letras entran una a una, cuando el logotipo ya ha llegado. Entran
   creciendo, igual que el, no por desvanecido: es la misma manera de
   contar la llegada. El retardo de cada una lo pone el JS. */
.js-anim .lockup-word span{
  opacity:0; transform:scale(.35);
  transition:opacity .45s var(--ease),
             transform .65s cubic-bezier(.18,.9,.24,1);
}
.lockup-word[data-in] span{ opacity:1; transform:none; }

/* ── velo ── */
#intro{
  position:fixed; inset:0; z-index:800;
  background:var(--bg);
  opacity:1; pointer-events:none;
  transition:opacity .7s var(--ease);
}
#intro[hidden]{ display:none; }
#intro[data-out]{ opacity:0; }

/* el logotipo nace desde cero, asi que su punto de crecimiento es su
   propio centro */
.lockup{ transform-origin:center; }

/* La barra de arriba no esta al llegar: aparece con el primer scroll,
   a la vez que el logotipo grande empieza a irse. */
.js-anim nav{
  opacity:0; pointer-events:none;
  transition:opacity .7s var(--ease);
}
body[data-nav="on"] nav{ opacity:1; pointer-events:auto; }

@keyframes rise-slow{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}
@keyframes fade-slow{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* entrada del propio logotipo */
#intro[data-run] ~ * .lockup-mark,

@keyframes mark-in{
  0%  { opacity:0; transform:scale(.80);
        filter:drop-shadow(0 10px 46px rgba(74,143,231,0)) drop-shadow(0 6px 30px rgba(232,148,58,0)); }
  60% { opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
/* El fotograma final tiene que ser explicito. Si solo se declara
   "from", el navegador toma el valor del propio elemento como final,
   y ese valor es opacity:0 durante el intro: la letra animaba de
   invisible a invisible y solo aparecia al terminar la secuencia. */
@keyframes letter-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  #intro{ display:none !important; }
  .js-anim nav{ opacity:1 !important; pointer-events:auto !important; }
  .lockup{ transform:none !important; }
  .hero-title{ opacity:1 !important; transform:none !important; }
}

/* ─────────── BOTON MODO CLARO / OSCURO ─────────── */
.theme-btn{
  display:grid; place-items:center;
  width:34px; height:34px; padding:0;
  background:none; border:1px solid var(--rule); border-radius:100px;
  color:var(--mid); cursor:pointer;
  transition:border-color .25s, color .25s;
}
.theme-btn:hover{ border-color:var(--rule-2); color:var(--text); }
.theme-btn svg{ width:16px; height:16px; grid-area:1/1; transition:opacity .3s, transform .4s var(--ease); }
/* en oscuro se ofrece el sol; en claro, la luna */
.ic-moon{ opacity:0; transform:rotate(-40deg) scale(.7); }
:root[data-theme="light"] .ic-sun { opacity:0; transform:rotate(40deg) scale(.7); }
:root[data-theme="light"] .ic-moon{ opacity:1; transform:none; }

@media (prefers-color-scheme: light){
  /* MODO DÍA AUTOMÁTICO — generado a partir del bloque manual. */
  :root:not([data-theme="dark"]){
    --bg:      #FBFAFC;
    --bg2:     #F4F2F7;
    --bg3:     #EBE8F0;
    --rule:    #E0DDE7;
    --rule-2:  #C9C5D4;

    --text:    #14131A;
    --mid:     #56525F;
    --dim:     #85808F;

    --blue:    #2C6FD1;
    --amber:   #C97A18;
    --plata:   #8E97A8;
  }
  :root:not([data-theme="dark"]) .sector-marca{ color:#8A909E; }
  :root:not([data-theme="dark"]) .fondo{ opacity:.40; filter:blur(9px) saturate(.85) brightness(1.25); }
  :root:not([data-theme="dark"]) .fondo::after{ background:linear-gradient(to bottom, rgba(251,250,252,.32) 0%, rgba(251,250,252,.60) 30%, rgba(251,250,252,.70) 100%); }
  :root:not([data-theme="dark"]) .hero-copy::before{
    background:radial-gradient(58% 62% at 50% 52%,
               rgba(251,250,252,.92) 0%, rgba(251,250,252,.74) 45%, transparent 78%);
  }
  :root:not([data-theme="dark"]) .hero-veil{
    background:radial-gradient(105% 80% at 50% 40%, transparent 0%, rgba(251,250,252,.35) 60%, rgba(251,250,252,.6) 100%);
  }
  :root:not([data-theme="dark"]) .btn-primary{ background:#14131A; color:#FBFAFC; }
  :root:not([data-theme="dark"]) .btn-sm{ color:var(--text); }
  :root:not([data-theme="dark"]) .btn-sm:hover{ background:#14131A; color:#FBFAFC; border-color:#14131A; }
  :root:not([data-theme="dark"]) .lockup-mark{
    filter:drop-shadow(0 10px 24px rgba(40,44,60,.22))
           drop-shadow(0 -1px 0 rgba(255,255,255,.9));
  }
  :root:not([data-theme="dark"]) .band-caja::after{ background:linear-gradient(to bottom, rgba(251,250,252,.4) 0%, transparent 22%, transparent 78%, rgba(251,250,252,.4) 100%); }
  :root:not([data-theme="dark"]) .work-fig::before{ opacity:.16; }
  :root:not([data-theme="dark"]) .work:hover .work-fig::before{ opacity:.26; }
  :root:not([data-theme="dark"]) .work-fig::after{ color:rgba(20,19,26,.22); text-shadow:none; }
  :root:not([data-theme="dark"]) .work-fig{
    background-image:
      radial-gradient(90% 80% at 30% 20%, rgba(44,111,209,.14), transparent 60%),
      radial-gradient(80% 90% at 80% 90%, rgba(201,122,24,.14), transparent 60%);
  }
  :root:not([data-theme="dark"]) nav.stuck{ background:rgba(251,250,252,.85); }
  :root:not([data-theme="dark"]) ::selection{ background:var(--amber); color:#fff; }
  :root:not([data-theme="dark"]) .ic-sun { opacity:0; transform:rotate(40deg) scale(.7); }
  :root:not([data-theme="dark"]) .ic-moon{ opacity:1; transform:none; }
}

/* ─────────── VÍDEO DESTACADO ─────────── */
.feature{
  /* mismo ancho que la rejilla de fotos de abajo, y centrado en la
     pantalla igual que ella */
  position:relative; margin:0 auto 52px;
  width:100%; max-width:var(--ancho-fotos);
  border:1px solid var(--rule); border-radius:clamp(14px,1.4vw,22px); overflow:hidden;
  background:var(--bg3); aspect-ratio:16/9; max-height:62vh;
  display:grid; place-items:center;
}
.feature-poster{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), opacity .7s var(--ease);
}
/* Orden de capas del destacado: iframe 1, poster 2, degradado 3,
   escudo 4 y rotulo 5. El poster va por encima del iframe a proposito,
   para tapar el arranque del reproductor. */
.feature::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(23,23,30,.92) 0%, rgba(23,23,30,.28) 45%, rgba(23,23,30,.12) 100%);
}
.feature:hover .feature-poster{ transform:scale(1.03); }

/* Escudo: se come el raton para que no asomen los controles de YouTube
   ni se pueda pausar. Va por encima del iframe. */
.feature-escudo{ position:absolute; inset:0; z-index:4; cursor:default; }

/* Pegado al borde de abajo: cuanto menos alto ocupe el bloque, menos
   imagen tapa. El aire de los lados se queda como estaba; el de arriba
   y abajo se recorta. */
.feature-meta{
  position:absolute; z-index:5; left:0; right:0; bottom:0;
  padding:0 clamp(20px,3vw,38px) clamp(14px,1.8vw,22px);
  text-align:left;
}
/* el nombre baja mas que la descripcion: se le quita casi todo el hueco
   que los separaba, y los dos quedan como un solo pie */
.feature-title{ font-size:clamp(1.3rem,3vw,2.1rem); font-weight:300; margin-bottom:2px; color:#F4F3F8; }
.feature-title em{ font-style:normal; color:rgba(244,243,248,.6); }
/* en una linea: sin el tope de 46ch la frase no parte */
.feature-desc{
  font-size:.92rem; font-weight:300; color:rgba(244,243,248,.72);
  max-width:none; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* Al arrancar solo se va el poster, y con un fundido. El rotulo y su
   degradado se quedan: como el video ya no para nunca, si tambien
   desaparecieran el producto se quedaria sin nombre para siempre. */
.feature[data-playing] .feature-poster{ opacity:0; pointer-events:none; }
/* El video llena el marco. Ya no hace falta el recorte que escondia la
   barra de YouTube: un <video> sin atributo controls no pinta ninguna. */
.feature-video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  border:0; pointer-events:none;
}

@media (max-width:520px){
  .feature-desc{ display:none; }
}

/* ═══════════════════════════════════════════
   APARICIONES AL HACER SCROLL
   Solo se ocultan si main.js esta vivo (.js-anim en <html>).
   Sin JS, todo se ve: nada depende de que la animacion corra.
   ═══════════════════════════════════════════ */
/* Se ocultan por selector directo para que ya esten ocultos en el
   primer pintado. Si se hiciera con [data-reveal], que lo pone
   main.js al final, se verian aparecer y desvanecerse. */
.js-anim .section-head,
.js-anim .feature{
  opacity:0;
  transform:translate3d(var(--from-x, 0px), var(--from-y, 20px), 0);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
}
.js-anim [data-in]{ opacity:1 !important; transform:none !important; }

.js-anim .feature{ transform:translateY(28px) scale(.99); }

/* las cifras, en tabular para que no bailen al contar */
.metric b{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .js-anim *{ opacity:1 !important; transform:none !important; }
}

/* ─────────── TARJETA DE PROYECTO CON ENLACE ─────────── */
.work-link{ display:block; color:inherit; }
.work-more{
  display:block; margin-top:14px; font-size:.82rem; color:var(--amber);
  letter-spacing:.01em; transition:opacity .3s;
}
.work:hover .work-more{ opacity:.75; }

/* segunda linea del hero: el alcance, en tono mas discreto */
.hero-scope{
  font-size:clamp(.82rem,1.15vw,.94rem); font-weight:400;
  letter-spacing:.06em; color:var(--dim);
  margin:0 auto;
}
/* ─────────── FORMULARIO GUIADO ───────────
   No es un formulario largo con diez campos: son preguntas cortas que
   solo aparecen cuando la anterior las hace pertinentes. */
/* Todo el formulario dentro de un recuadro, y en apaisado: las
   preguntas a la izquierda y el sitio para escribir y enviar a la
   derecha. En una sola columna no cabia en pantalla. */
.brief{
  margin-top:0; max-width:1360px;
  background:var(--bg2); border:1px solid var(--rule); border-radius:var(--r);
  padding:clamp(16px,2vw,26px);
}
@media (min-width:900px){
  .brief{
    display:grid; align-items:start;
    /* la columna de escribir pide mas sitio que la de marcar */
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    column-gap:clamp(22px,2.6vw,42px);
  }
  .brief-cabecera{ grid-column:1 / -1; grid-row:1; }
  .brief-paso[data-paso="1"]{ grid-column:1; grid-row:2; }
  .brief-paso[data-paso="2"]{ grid-column:1; grid-row:3; }
  .brief-paso[data-paso="3"]{ grid-column:1; grid-row:4; }
  .brief-paso[data-paso="5"]{ grid-column:1; grid-row:5; }
  /* el contacto directo se va a la columna corta: en la de escribir
     sumaba al alto de todo el recuadro, y aqui sobra sitio */
  .brief-directo{ grid-column:1; grid-row:6; }
  /* el bloque de escribir ocupa toda la columna de al lado, y el contacto
     directo va dentro de el: una fila mas en la rejilla sumaria al alto
     de TODO el recuadro, no solo al de su columna */
  .brief-paso[data-paso="4"]{ grid-column:2; grid-row:2 / span 4; }
}
/* Cuatro preguntas apiladas hacen el recuadro demasiado alto. Con sitio
   de sobra se reparten en dos columnas de dos, y el bloque de escribir
   ocupa la tercera: ninguna columna lleva ya mas de dos preguntas. */
@media (min-width:1150px){
  .brief{ grid-template-columns:minmax(0,.82fr) minmax(0,.82fr) minmax(0,1.36fr); }
  .brief-paso[data-paso="3"]{ grid-column:2; grid-row:2; }
  .brief-paso[data-paso="5"]{ grid-column:2; grid-row:3; }
  .brief-directo{ grid-column:1 / span 2; grid-row:4; }
  .brief-paso[data-paso="4"]{ grid-column:3; grid-row:2 / span 3; }
}
.brief textarea, .brief input[type="text"], .brief input[type="email"]{ background:var(--bg); }
.brief-paso:last-of-type{ margin-bottom:0; }
/* Las tres preguntas estan a la vista desde el principio. Se probo a
   irlas abriendo segun se contestaba y era peor: cada respuesta movia
   todo lo de debajo, y el visitante nunca sabia cuanto le quedaba. */
.brief-paso{ margin-bottom:clamp(10px,1.2vw,14px); }
.brief-paso:last-of-type{ margin-bottom:0; }
.brief-cuerpo{ display:contents; }

.brief-preg{
  font-size:clamp(.92rem,1.3vw,1.02rem); font-weight:300;
  color:var(--text); margin-bottom:7px;
}
.brief-ops{ display:flex; flex-wrap:wrap; gap:6px; }

.brief-op{
  background:none; color:var(--mid); cursor:pointer;
  border:1px solid var(--rule); border-radius:100px;
  padding:7px 14px; font:inherit; font-size:.82rem;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background-color .25s var(--ease);
}
.brief-op:hover{ border-color:var(--rule-2); color:var(--text); }
.brief-op[aria-pressed="true"]{
  border-color:var(--amber); color:var(--text); background:rgba(232,148,58,.12);
}

.brief textarea, .brief input[type="text"], .brief input[type="email"]{
  width:100%; background:var(--bg2); color:var(--text);
  border:1px solid var(--rule); border-radius:var(--r);
  padding:11px 14px; font:inherit; font-size:.92rem; font-weight:300;
  transition:border-color .25s var(--ease);
}
/* el alto lo manda el min-height, no el rows del HTML. Y no se puede
   arrastrar: el recuadro esta medido para caber en pantalla. */
.brief textarea{ resize:none; min-height:56px; height:auto; }
.brief textarea:focus, .brief input:focus{ outline:none; border-color:var(--rule-2); }
.brief ::placeholder{ color:var(--dim); }

/* Solo el nombre y el correo: el mercado es dato del proyecto, no de la
   persona, y mezclarlos hacia que la fila no dijera nada. */
.brief-datos{
  /* uno encima del otro: asi los dos campos son largos de verdad, que es
     lo que un correo necesita para leerse entero */
  display:grid; grid-template-columns:1fr;
  gap:10px; margin-top:11px;
}
@media (max-width:560px){ .brief-datos{ grid-template-columns:1fr; } }
.brief-datos label{ display:flex; flex-direction:column; gap:5px; }
.brief-datos label > span{
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}

.brief-ok{
  display:flex; gap:10px; align-items:flex-start; margin-top:12px;
  font-size:.82rem; font-weight:300; color:var(--mid); line-height:1.45;
}
.brief-ok input{ margin-top:3px; accent-color:var(--amber); flex:0 0 auto; }
.brief-ok a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }

/* el campo trampa: invisible para una persona, tentador para un robot */
.brief-tarro{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.brief-enviar{
  margin-top:14px; cursor:pointer; font:inherit; font-size:.9rem;
  background:var(--text); color:var(--bg); border:none;
  border-radius:100px; padding:14px 34px;
  transition:opacity .25s var(--ease);
}
.brief-enviar:hover{ opacity:.82; }
.brief-enviar[disabled]{ opacity:.45; cursor:default; }
/* el aviso no reserva sitio mientras no dice nada: son treinta pixeles
   de nada al final del formulario */
.brief-aviso{ font-size:.85rem; font-weight:300; color:var(--mid); }
.brief-aviso:not(:empty){ margin-top:12px; }
.brief-aviso[data-mal]{ color:var(--amber-l); }
/* El "recibido" tiene que verse: es la unica confirmacion de que el
   mensaje ha salido. Naranja y en negrita, como se pidio, pero en
   pastilla y con su marca: los avisos de error tambien son naranjas, y
   como simple linea de texto el exito y el fallo se leian igual. */
.brief-aviso[data-bien]{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:100px;
  font-size:.98rem; font-weight:600; color:var(--amber);
  background:color-mix(in srgb, var(--amber) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 48%, transparent);
  animation:aviso-in .55s var(--ease) both;
}
.brief-aviso[data-bien]::before{ content:'\2713'; font-weight:700; }
@keyframes aviso-in{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ─────────── CONTACTO: LA PREGUNTA LA HACE LA BANDA ─────────── */
/* la banda de contacto arranca mas baja que las otras: es una pregunta,
   no un titulo de seccion, y detras viene el formulario enseguida */

/* La banda de arriba sobresale sobre el arranque de la seccion mientras
   es ancha. Sin este hueco, tapa la primera pregunta y los pulsadores, y
   parece que la banda no se estrecha cuando lo que pasa es que esta
   encima de lo que quieres ver. */
/* El margen de arriba es exactamente lo que la banda ancha sobresale
   por debajo de su hueco (--ancha menos --fino), ni un pixel mas: de
   sobrar, es hueco muerto entre la banda y el recuadro. */
.section-contact{
  /* la pantalla fija de dentro ya descuenta el nav y el rotulo: aqui no
     hace falta reservar nada */
  /* Ni arriba ni abajo: la pantalla pegada de dentro ya descuenta el nav
     y el rotulo, y el pie vive dentro de ella. Cualquier relleno aqui es
     espacio vacio al final del documento, y se nota como un scroll de
     mas cuando ya has llegado. */
  padding-top:0; padding-bottom:0;
  /* mas ancha que el resto de secciones a proposito: con tres columnas
     apretadas en 1240 el texto envolvia mas y el recuadro salia MAS alto
     que con dos. El ancho es lo que compra el alto. */
  max-width:min(1460px, 96vw);
}
.brief-preg-oculta{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* el formulario ya no necesita margen propio: quien reparte el alto es
   el bloque que lo contiene */
.section-contact .section-head{ margin-top:clamp(56px,8vw,96px); }

/* la linea que abre el formulario: la pregunta ya la hace la banda, esto
   es el gesto de sentarse a ayudar */
/* Encabeza el formulario entero, sola en su linea y con aire debajo. No
   es el titulo de los primeros botones: eso ya lo dice la pregunta. */
.brief-cabecera{
  display:flex; align-items:center; gap:9px;
  font-size:1rem; font-weight:300; color:var(--mid);
  padding-bottom:clamp(14px,1.8vh,22px);
  margin-bottom:clamp(16px,2.2vh,26px);
  border-bottom:1px solid var(--rule);
}
.brief-cabecera span[aria-hidden]{ font-size:1.1rem; line-height:1; }

/* ─────────── EL MURO ───────────
   Contenedor largo de alto FIJO; dentro, una pantalla que se queda
   quieta con sticky. Las piezas no cambian de tamano ni de sitio en el
   flujo: solo de transform y opacity, que es lo unico que se puede
   animar sin recalcular la pagina. */
/* mas recorrido que antes: ahora el video entra, se queda quieto un
   buen rato y se va, y todo eso antes de que empiece el muro */
.muro-largo{ position:relative; height:620vh; }
.muro-pega{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  /* el hueco de arriba es el que ocupan el nav y la banda pegada: sin
     el, la primera fila de fichas queda por debajo del rotulo */
  padding-top:calc(var(--nav,58px) + var(--fino));
  padding-bottom:clamp(14px,3vh,34px);
}
.muro-rejilla{
  /* El lado de la pieza sale del mas estrecho de los dos limites: el
     ancho disponible entre 7, o el alto disponible entre 4. Asi el muro
     cabe entero pase lo que pase, sin depender de la pantalla. */
  --junta:clamp(5px,.6vw,10px);
  --col:7; --fila:4;
  --lado:min(
    (min(1180px, 92vw) - var(--ancho-rail) - (var(--col) - 1) * var(--junta)) / var(--col),
    (92svh - var(--nav,58px) - var(--fino) - (var(--fila) - 1) * var(--junta)) / var(--fila)
  );
  display:grid; gap:var(--junta); justify-content:center;
  grid-template-columns:repeat(var(--col), var(--lado));
}
/* las fichas del muro son las mismas que giraban abajo: la cara de
   delante es la foto y la de detras la descripcion */
.muro-rejilla .pieza{
  width:var(--lado); aspect-ratio:1/1; margin:0;
  opacity:0; will-change:transform, opacity;
}
/* el video abre la seccion y se va con el scroll */
/* centrado en la zona util, no en la pantalla: arriba manda la banda
   pegada y abajo el medidor, y sin descontarlos el video quedaba alto */
.muro-video{
  position:absolute; z-index:4; left:0; right:0;
  top:calc(var(--nav,58px) + var(--fino)); bottom:clamp(14px,3vh,34px);
  display:grid; place-items:center; pointer-events:none;
}
.muro-video .feature{ width:min(1080px,92vw); margin:0; will-change:transform; }
@media (max-width:900px){ .muro-rejilla{ --col:5; --fila:6; } }
@media (max-width:560px){ .muro-rejilla{ --col:4; --fila:7; } }
/* sin sitio para el gesto, el muro no aporta: se queda la rejilla quieta */
@media (max-height:560px){ .muro-largo{ height:auto; } .muro-pega{ position:static; height:auto; padding:80px 0; } }
@media (prefers-reduced-motion: reduce){
  .muro-largo{ height:auto; }
  .muro-pega{ position:static; height:auto; padding:80px 0; }
  .muro-pieza{ opacity:1 !important; transform:none !important; }
  }

/* ─────────── BANDAS QUE SE QUEDAN ARRIBA ───────────
   La clave de que esto no de tirones: la banda ocupa SIEMPRE el alto
   estrecho en el flujo de la pagina, de principio a fin. Lo que se
   estrecha es la caja de dentro, que va absoluta y por tanto fuera del
   flujo: cambiarla de alto no recalcula nada ni mueve nada de sitio.
   Al principio la caja sobresale y tapa el arranque de la seccion; al
   estrecharse lo va destapando, que es justo el efecto buscado.

   --k va de 0 (ancha) a 1 (estrecha) y lo escribe el JS con el scroll.
   Al ir pegado al scroll y no a un reloj, no hay disparo, no hay estado
   y no hay nada que pueda entrar en bucle. */
.pegado{ position:relative; }
.pega-marca{ position:absolute; top:0; left:0; width:1px; height:1px; }
.band-pega{
  position:sticky; top:var(--nav,58px); z-index:4;
  height:var(--fino);
}
.band-pega .band-caja{
  height:calc(var(--fino) + (var(--ancha) - var(--fino)) * (1 - var(--k,0)));
}
.band-pega .band-img{
  /* ni al pegarse se cierra del todo: 90% como techo, para que siga
     leyendose como un velo y no como una barra */
  opacity:calc(.30 + .10 * var(--k,0));
  transform:scale(calc(1.05 - .05 * var(--k,0)));
}
/* fondo solido, que entra con la misma rampa: sin el, el contenido se
   transparentaria por detras del rotulo */
.band-pega .band-caja::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--bg); opacity:calc(.4 * var(--k,0));
}
.band-pega .band-caja{ box-shadow:inset 0 -1px 0 rgba(255,255,255,.07); }
.band-pega .band-quote{
  /* Tamano fijo. Antes encogia con la banda, interpolando entre
     --quote-max y 1.05rem segun --k. El rotulo es el mismo texto de
     principio a fin: que la banda se estreche no lo convierte en algo
     menos importante, y verlo menguar distraia de lo que si se estaba
     moviendo. Cabe en la banda estrecha de sobra: 92px de alto para una
     linea de 2.1rem como mucho. */
  font-size:var(--quote-max);
  max-width:none;
  text-shadow:0 2px 26px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.55);
}
:root{
  /* El rotulo pegado tambien mira el alto de la pantalla: en un portatil
     bajo, 148px son un quinto de todo lo que hay, y lo que viene debajo
     se queda sin sitio. */
  --fino:clamp(92px, min(12vw, 15vh), 148px);
  --ancha:clamp(240px,34vw,420px);
  --quote-max:clamp(1.2rem,3vw,2.1rem);
}
@media (prefers-reduced-motion: reduce){
  .band-pega{ position:static; height:var(--ancha); }
  .band-pega .band-caja{ height:var(--ancha); }
}

/* ─────────── LOS SECTORES, AL LADO DEL MURO ───────────
   Una columna estrecha de iconos alineados en un eje. El nombre no
   cuenta para el ancho: sale flotando a la derecha de su icono, y por
   eso la columna se puede arrimar al muro sin que los nombres largos
   la ensanchen.

   Donde se coloca (altura y distancia al muro) lo escribe el JS, porque
   depende de donde haya quedado la rejilla. */
:root{ --ancho-rail:clamp(40px,4.2vw,54px); }
.muro-medidor{
  position:absolute; z-index:3; pointer-events:none;
  left:0; top:0; width:var(--ancho-rail);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.4vh,18px);
}
.muro-medidor .medidor-iconos{
  display:flex; flex-direction:column; align-items:center; width:100%;
}
.muro-medidor .medidor-iconos li{
  position:relative; width:100%;
  display:flex; justify-content:center;
  opacity:0; will-change:transform, opacity;
}
.rail-btn{
  pointer-events:auto; cursor:pointer; background:none; border:0; padding:0;
  font:inherit; display:block; border-radius:8px;
  position:relative;
  transition:background-color .3s var(--ease);
}
/* sin mancha gris detras del icono al pasar por encima: el aviso ya lo
   dan el tamano y la etiqueta */
/* al doble, y por delante de sus vecinos mientras dura */
.rail-btn:hover .sector-ico,
.rail-btn:focus-visible .sector-ico{ transform:scale(2); }
.rail-btn:hover, .rail-btn:focus-visible{ z-index:3; }
/* Trazo plano del color del texto: negro en el modo dia. En el de noche
   toma el claro que le toca, porque negro sobre fondo negro no se ve.
   Antes era plata con una rampa de reflejos dentro del propio SVG; al
   pintarlo de un solo tono esa rampa sobra y se anula aqui. */
.muro-medidor .sector-ico{
  display:block; width:clamp(28px,2.9vw,38px); color:var(--text);
  transform-origin:center;
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.muro-medidor .sector-ico svg{
  width:100%; height:auto; display:block;
  stroke:currentColor; stroke-width:1.3;
}
/* El nombre ya no esta puesto: sale al pasar por encima. Once nombres
   escritos a la vez era una lista de palabras compitiendo con las
   fotos, y el mas largo —"Proteccion contra incendios"— obligaba a
   reservar una franja de texto que en pantallas medianas no cabia. */
.muro-medidor .sector-nom{
  /* justo encima del icono y centrado con el. Los nombres largos no
     caben en una linea a este ancho, asi que parten en dos y siguen
     centrados: es lo que mantiene el globo dentro de la pantalla, con
     la columna viviendo tan a la derecha. */
  /* montada sobre el propio icono: arranca a dos tercios de su alto,
     asi que le pisa el tercio de abajo */
  position:absolute; left:50%; top:67%; bottom:auto;
  transform:translateX(-50%) translateY(-4px);
  /* por delante del icono, que al ampliarse al doble se pone en 3 */
  z-index:4;
  max-width:170px; width:max-content;
  padding:5px 10px; border-radius:12px;
  background:rgba(23,23,30,.82); border:1px solid var(--rule);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:clamp(9px,.7vw,11px); line-height:1.25; text-align:center;
  white-space:normal; color:var(--text); letter-spacing:.01em;
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .3s var(--ease);
}
.rail-btn:hover .sector-nom,
.rail-btn:focus-visible .sector-nom,
.muro-medidor li[data-sel] .sector-nom{
  opacity:1; transform:translateX(-50%) translateY(0);
}
/* Todos debajo, el ultimo tambien. La seccion recorta lo que se sale
   por abajo, asi que el hueco que queda bajo el muro es el que le tiene
   que caber a esa etiqueta. */
.muro-medidor li[data-sel] .sector-ico{ color:var(--amber); }
/* En claro el globo va al reves: fondo claro y letra oscura.
   Encerrado a proposito en el ancho de escritorio. Estas dos reglas
   llevan :root delante, asi que pesan mas que las del bloque del movil,
   y sin la reja de min-width le devolvian el fondo a la etiqueta justo
   donde se habia mandado quitarlo: en el movil, y solo en modo dia. */
@media (min-width:901px){
  :root[data-theme="light"] .muro-medidor .sector-nom{
    background:rgba(251,250,252,.85);
  }
}
@media (prefers-color-scheme: light) and (min-width:901px){
  :root:not([data-theme="dark"]) .muro-medidor .sector-nom{
    background:rgba(251,250,252,.85);
  }
}
@media (max-width:760px){ :root{ --ancho-rail:50px; } }

/* Al elegir un sector, el muro apaga lo que no es de ese sector. El
   apagado va en la cara interior de la ficha, no en la ficha: fuera
   mandan la entrada del muro y el giro, y no deben pisarse. */
.muro-rejilla[data-filtro] .pieza-giro{
  opacity:.05; pointer-events:none;
  transition:opacity .45s var(--suave), transform .7s var(--suave);
}
.muro-rejilla[data-filtro] .pieza[data-on] .pieza-giro{ opacity:1; pointer-events:auto; }
/* Aqui estaba el ultimo recurso de esconder los nombres cuando la
   columna no cabia. Ya no hace falta: el nombre no ocupa sitio, sale
   flotando solo cuando el raton se para encima. */

/* Aqui estaba el relieve metalico de los iconos: una sombra de un pixel
   sin difuminar que les daba volumen de plata. Con el trazo plano y
   negro sobra, y encima al ampliarlos al doble ese pixel se convertia
   en dos y se leia como una linea sucia debajo del dibujo. */
/* al elegirlo, el metal se calienta en vez de cambiar de color a secas */
.muro-medidor li[data-sel] .sector-ico svg{
  filter:drop-shadow(0 0 7px rgba(232,148,58,.6));
}

/* Correo y telefono, dentro del recuadro y con el mismo peso que una
   respuesta mas: quien no quiera marcar nada, escribe o llama. Antes
   eran dos cajas aparte, mas anchas y desalineadas con el formulario. */
.brief-directo{
  display:flex; flex-wrap:wrap; gap:8px clamp(20px,3vw,44px);
  margin-top:clamp(14px,2vh,22px); padding-top:clamp(13px,1.8vh,19px);
  border-top:1px solid var(--rule);
}
.brief-directo a{
  display:flex; flex-direction:column; gap:3px;
  color:inherit; text-decoration:none;
}
.brief-directo span{
  font-size:9.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.brief-directo b{
  font-size:.92rem; font-weight:300; color:var(--text);
  transition:color .25s var(--ease);
}
.brief-directo a:hover b{ color:var(--amber); }
/* la segunda pregunta dentro del bloque de escribir va mas discreta:
   no abre bloque, remata el de arriba */
.brief-preg-min{
  font-size:.86rem !important; color:var(--mid) !important;
  margin-top:clamp(11px,1.6vh,16px); margin-bottom:6px !important;
}


/* ─────────── PANTALLAS BAJAS ───────────
   En un portatil de 660px de alto, entre el nav y el rotulo pegado
   quedan menos de 500 para trabajar. En vez de encoger el formulario
   para todo el mundo, se aprieta solo donde hace falta. */
/* El formulario va compacto SIEMPRE en pantalla grande. No es solo por
   caber: cuanto menos alto mide, mas se le puede bajar sin que quede
   pegado al borde de abajo, y bajarlo era lo que se buscaba. */
@media (min-width:900px){
  .brief{ padding:clamp(8px,1vw,13px); }
  .brief-paso{ margin-bottom:9px; }
  .brief-preg{ font-size:.92rem; margin-bottom:5px; }
  .brief-preg-min{ margin-top:8px; margin-bottom:4px !important; }
  .brief-op{ padding:6px 12px; font-size:.79rem; }
  .brief-ops{ gap:5px; }
  .brief textarea{ min-height:34px; }
  .brief textarea, .brief input[type="text"], .brief input[type="email"]{ padding:9px 12px; }
  .brief-cabecera{ padding-bottom:9px; margin-bottom:10px; font-size:.92rem; }
  .brief-datos{ gap:8px; margin-top:8px; }
  .brief-ok{ margin-top:5px; }
  .brief-enviar{ margin-top:6px; padding:8px 22px; }
  .brief-directo{ margin-top:10px; padding-top:9px; }
}

/* el mercado va suelto, encima de los datos personales y separado de
   ellos por una linea: lo de arriba es el encargo, lo de abajo quien lo
   manda */
.brief-campo{ display:flex; flex-direction:column; gap:5px; margin-top:9px; }
.brief-campo > span{
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.brief-datos{
  padding-top:clamp(9px,1.2vh,13px);
  border-top:1px solid var(--rule);
}
/* el enviar, a la derecha del bloque */
.brief-enviar{ display:block; margin-left:auto; }

/* el icono de cada pregunta, en el color de marca: da un punto de
   entrada a la vista y distingue lo que se marca de lo que se escribe */
.brief-ico{
  display:inline-flex; width:clamp(15px,1.4vw,18px); flex:0 0 auto;
  color:var(--blue);
}
.brief-ico svg{ width:100%; height:auto; display:block; }
.brief-preg{ display:flex; align-items:center; gap:8px; }

.brief-datos label i{ font-style:normal; color:var(--dim); font-weight:400; letter-spacing:0; }
/* el recuadro entero entra de una pieza cuando el rotulo empieza a
   estrecharse; antes entraban los pulsadores uno a uno y era mucho ruido
   para algo que se lee de un vistazo */
/* nace fuera de sitio, no transparente: sube opaco */
.js-anim .brief{ will-change:transform; }

/* En pantallas bajas el nombre y el correo vuelven a ir en paralelo: dos
   campos largos son mas comodos, pero no a costa de que el recuadro no
   quepa y el recorte se lo coma. */
@media (max-height:820px) and (min-width:900px){
  .brief-datos{ grid-template-columns:1fr 1fr; }
  :root{ --baja:22px; }
}

/* ─────────── LA PANTALLA DEL FORMULARIO ───────────
   Un contenedor alto y el formulario pegado dentro, centrado en lo que
   queda libre bajo el nav y el rotulo. Con overflow oculto: mientras el
   recuadro sube desde abajo, lo que sobresale se recorta, y por eso
   puede viajar media pantalla sin tapar nada. */
/* lo justo para que el recuadro suba entero y se deje ver; mas alla
   de eso es scroll que no mueve nada */
/* mas recorrido que antes: con 288 px de rango el formulario no tenia
   sitio para terminar de subir antes de que la pantalla se soltara */
.contacto-largo{ position:relative; height:clamp(1200px,175vh,2400px); }
.contacto-pega{
  position:sticky; top:calc(var(--nav,58px) + var(--fino));
  height:calc(100svh - var(--nav,58px) - var(--fino));
  display:grid; place-items:stretch; overflow:hidden;
}
@media (max-width:900px){
  .contacto-largo{ height:auto; }
  .contacto-pega{ position:static; height:auto; display:block; overflow:visible;
    padding:clamp(30px,5vw,60px) 0; }
}

/* Los dos botones de salida: el de WhatsApp es la via rapida y el de
   enviar la formal. El de WhatsApp va en secundario a proposito, para
   que no parezca que el formulario no sirve. */
.brief-botones{
  display:flex; align-items:center; justify-content:flex-end;
  gap:clamp(8px,1.2vw,16px); flex-wrap:wrap; margin-top:14px;
}
.brief-wa{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; font:inherit; font-size:.86rem; font-weight:300;
  background:none; color:var(--mid);
  border:1px solid var(--rule); border-radius:100px;
  padding:10px 18px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.brief-wa:hover{ border-color:#25D366; color:var(--text); }
.brief-wa-ico{ width:17px; display:block; color:#25D366; flex:0 0 auto; }
.brief-wa-ico svg{ width:100%; height:auto; display:block; }
.brief-enviar{ margin-top:0; margin-left:0; }
/* apagados mientras falte aceptar la privacidad */
.brief-wa[disabled]{ opacity:.4; cursor:default; border-color:var(--rule); }
.brief-wa[disabled]:hover{ border-color:var(--rule); color:var(--mid); }
.brief-botones{ position:relative; }

/* ─────────── PAGINAS LEGALES ───────────
   Sin animaciones ni efectos: aqui se viene a leer, normalmente porque
   hay una duda concreta. Columna estrecha y texto grande. */
.legal{
  max-width:760px; margin:0 auto;
  padding:calc(var(--nav,58px) + clamp(50px,8vw,100px)) var(--pad) clamp(50px,7vw,90px);
}
.legal h1{
  font-size:clamp(1.8rem,4vw,2.6rem); font-weight:200; letter-spacing:-.02em;
  margin-bottom:10px;
}
.legal-fecha{ font-size:.85rem; color:var(--dim); margin-bottom:clamp(30px,4vw,46px); }
.legal h2{
  font-size:clamp(1.05rem,1.8vw,1.25rem); font-weight:400;
  margin:clamp(30px,4vw,44px) 0 12px;
}
.legal p, .legal li{
  font-size:.97rem; font-weight:300; line-height:1.7; color:var(--mid);
}
.legal p{ margin-bottom:13px; }
.legal ul{ margin:0 0 13px; padding-left:20px; }
.legal li{ margin-bottom:5px; }
.legal b{ font-weight:600; color:var(--text); }
.legal a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--amber); }
.legal-vuelta{ margin-top:clamp(40px,5vw,60px); padding-top:22px; border-top:1px solid var(--rule); }
.legal-vuelta a{ text-decoration:none; font-size:.92rem; }
.foot-legal a{ color:var(--dim); text-decoration:none; transition:color .25s var(--ease); }
.foot-legal a:hover{ color:var(--text); }

/* la pantalla del hero recorta: el titular sube desde fuera del borde */
.hero{ overflow:hidden; }

/* ─────────── LA ULTIMA PANTALLA, DE UNA PIEZA ───────────
   El formulario, la sede y el pie no son tres cosas que se van viendo al
   pasar la pagina: son una sola pantalla que sube junta. El pie deja de
   estar "debajo" y pasa a formar parte del cierre. */
/* El bloque ocupa toda la pantalla y reparte: el formulario arriba y el
   cierre abajo del todo. Asi la separacion entre los dos es la maxima
   que da la pantalla, en vez de un margen fijo que hay que ir ajustando
   a mano cada vez. */
.contacto-todo{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center;
  /* este hueco de arriba es lo unico que baja el formulario: el cierre
     no se entera, porque va pegado al fondo con margen automatico */
  padding:clamp(40px,7.4vh,72px) 0 0;
  will-change:transform;
}
/* el margen automatico se come todo el hueco libre y empuja el cierre al
   fondo: mas fiable que repartir, porque no depende de como se resuelva
   el alto del contenedor */
/* el margen automatico se come el hueco libre y baja el cierre; el de
   abajo evita que quede pegado al canto de la pantalla */
/* El margen automatico se come el hueco libre y baja el cierre; el de
   abajo lo despega del canto de la pantalla. Ese margen es lo que se ve
   como aire al final, y sale del hueco libre: el pie sube justo eso. */
.contacto-cierre{ width:100%; margin-top:auto; margin-bottom:clamp(28px,4.6vh,52px); }
.contacto-todo footer{
  width:100%; margin-top:clamp(8px,1.1vh,14px);
  padding:clamp(11px,1.5vh,19px) var(--pad) 0;
}

/* En pantalla baja la separacion se recorta: el bloque entero tiene que
   caber, y de nada sirve el aire si el pie queda cortado. Va al final
   del archivo a proposito: si fuera antes, las reglas de arriba —que
   tienen la misma especificidad— ganarian por orden. */
@media (max-height:820px) and (min-width:900px){
  .contacto-todo footer{ margin-top:6px; padding-top:10px; }
  .brief{ padding:clamp(9px,1.1vw,14px); }
  .brief-paso{ margin-bottom:7px; }
  .brief-preg{ margin-bottom:4px; }
}


/* La columna de escribir es la mas alta y la que marca el alto de todo
   el recuadro: aqui se recorta para hacerle sitio al hueco que baja el
   formulario. Al final del archivo a proposito: si fuera antes, las
   reglas generales —misma especificidad— ganarian por orden. */
@media (min-width:900px){
  .brief textarea{ min-height:26px; }
  .brief-campo{ margin-top:5px; gap:2px; }
  .brief-datos{ padding-top:6px; margin-top:6px; gap:6px; }
  .brief-datos label{ gap:2px; }
  .brief-ok{ margin-top:3px; line-height:1.3; }
  .brief-botones{ margin-top:5px; }
  .brief-directo{ margin-top:6px; padding-top:6px; }
  .brief-preg{ margin-bottom:5px; }
  .brief-ops{ gap:5px; }
}

/* ═══════════ MOVIL ═══════════
   En una pantalla de mano el scroll es el dedo, y las pantallas fijas
   —que en el ordenador son lo que sostiene todo el relato— aqui estorban:
   el alto util cambia al aparecer y desaparecer la barra del navegador,
   y lo que en el escritorio se queda quieto, en el movil baila.

   Asi que por debajo de 900px la web se recorre de arriba abajo, sin
   nada pegado y sin nada que dependa de cuanto scroll se ha hecho. Las
   piezas se quedan en su posicion final desde el principio.

   Va al final del archivo a proposito: estas reglas tienen que ganar a
   todas las de arriba. */
@media (max-width:900px){

  /* ── se sueltan los contenedores largos y sus pantallas fijas ── */
  .hero-largo, .muro-largo, .encargo-largo, .contacto-largo{ height:auto; }
  .hero, .muro-pega, .encargo-pega, .contacto-pega{
    position:static; height:auto; overflow:visible;
    display:block; padding-top:0; padding-bottom:0;
  }
  /* En el escritorio el logotipo y el titular comparten celda a
     proposito: uno se va y el otro llega al mismo sitio. En el movil no
     hay relevo que valga —no hay pantalla fija— asi que compartir celda
     es solo superponerse. Cada uno con su pantalla. */
  .hero{ min-height:0; display:block; padding:0 var(--pad); }
  .hero-inner{ display:block; }
  .hero-inner > *{ grid-area:auto; }
  .lockup{
    min-height:100svh; display:grid; place-items:center; align-content:center;
    padding:var(--nav,58px) 0 0;
  }
  .hero-title{
    min-height:100svh; display:grid; place-items:center; align-content:center;
    text-align:center; padding-bottom:6vh;
  }

  /* ── lo que el JS ya no va a mover, se queda puesto ── */
  .muro-rejilla .pieza,
  .medidor-iconos li,
  .encargo-card,
  .hero-title,
  .contacto-todo,
  .brief{ opacity:1 !important; transform:none !important; }

  /* ── el video: uno mas de la pagina, ni fijo ni encogiendo ── */
  /* al soltarlo de su posicion fija se queda sin ancho propio: hay que
     devolverselo, o se encoge a lo que ocupe su contenido (nada) */
  .muro-video{
    position:static; width:100%;
    opacity:1 !important; transform:none !important;
    visibility:visible !important; pointer-events:auto;
    margin:0 auto clamp(30px,7vw,52px);
  }
  .muro-video .feature{ width:100%; }

  /* ── las bandas: altas y quietas, sin estrecharse ── */
  .band-pega{ position:static; height:var(--ancha); }
  .band-pega .band-caja{ height:var(--ancha); }
  .band-pega .band-img{ opacity:.5; transform:none; }
  .band-pega .band-caja::before{ opacity:0; }
  .band-pega .band-quote{ font-size:clamp(1.15rem,5.4vw,1.7rem); }

  /* ── el muro: tres columnas, fichas que se ven ── */
  .muro-pega{ padding:clamp(24px,6vw,44px) var(--pad); }
  .muro-rejilla{
    --lado:auto; --junta:clamp(6px,1.8vw,10px);
    grid-template-columns:repeat(3,1fr);
    width:100%; justify-content:stretch;
  }
  /* en tableta caben cuatro: con tres, cada ficha salia a 224px y el
     muro dejaba de leerse como un muro */
  @media (min-width:520px){ .muro-rejilla{ grid-template-columns:repeat(4,1fr); } }
  @media (min-width:700px){ .muro-rejilla{ grid-template-columns:repeat(5,1fr); } }

  .muro-rejilla .pieza{ width:auto; }

  /* ── los sectores, en fila debajo del muro ── */
  .muro-medidor{
    position:static; width:auto; margin-top:clamp(22px,6vw,38px);
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    gap:clamp(10px,3vw,18px);
  }
  .muro-medidor .medidor-iconos{
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    gap:clamp(12px,3.4vw,20px); width:100%;
  }
  .muro-medidor .medidor-iconos li{ width:auto; }
  /* en el movil no hay raton que se pare encima: el nombre va escrito
     debajo del icono, sin globo */
  .muro-medidor .sector-nom{
    position:static; transform:none; display:block;
    opacity:1; padding:0; background:none; border:0;
    /* la sombra y el redondeo tambien: sin ellos ya no es un globo
       flotando, es texto debajo del icono y se acabo */
    box-shadow:none; border-radius:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    color:var(--mid);
    font-size:9px; text-align:center; margin-top:5px;
    white-space:normal; max-width:none;
  }
  .muro-medidor li[data-sel] .sector-nom{ color:var(--text); }
  .rail-btn{ flex-direction:column; align-items:center; }
  .muro-medidor .sector-ico{ width:26px; margin:0 auto; }

  /* ── el encargo: una tarjeta debajo de otra ── */
  /* En el movil el rotulo no se estrecha ni vuela sobre la seccion, asi
     que el hueco que reservaba el escritorio sobra entero. */
  .section-encargo{ padding-top:clamp(16px,4vw,28px); }
  .encargo-largo{ padding:0 0 clamp(26px,7vw,50px); }
  /* el mismo cuadro de dos por dos que en el escritorio, solo que mas
     pequeno: en una columna se perdia la figura de las cuatro esquinas */
  .encargo-grid{
    grid-template-columns:1fr 1fr; --ancho:auto;
    width:100%; justify-content:stretch;
    gap:clamp(5px,1.6vw,10px);
  }
  .encargo-card{ width:auto; aspect-ratio:16/11; }
  :root{ --r-esquina:clamp(18px,7vw,40px); }
  .encargo-texto{ padding:clamp(11px,3.4vw,18px); gap:4px; }
  .encargo-card span{ font-size:8.5px; letter-spacing:.13em; }
  .encargo-card b{ font-size:clamp(.74rem,2.9vw,.92rem); line-height:1.35; }

  /* ── el contacto: sin bloque pegado, y el pie al final ── */
  .contacto-todo{ height:auto; padding:0; }
  .contacto-cierre{ margin-top:clamp(30px,8vw,54px); margin-bottom:0; }
  .section-contact{ padding-top:clamp(30px,8vw,56px); padding-bottom:clamp(26px,7vw,44px); }

}

/* ─────────── EL MENU DE MOVIL ───────────
   Tres rayas que abren un panel bajo la barra. En el escritorio no
   existe: alli los enlaces caben y se ven. */
.menu-btn{ display:none; }
@media (max-width:900px){
  /* Tres rayas sueltas sobre la portada no se veian: la barra es
     transparente arriba del todo y el fondo es una foto. Ahora es una
     pastilla como las demas, con el borde de la marca, y se lee como
     boton desde el primer vistazo. */
  .menu-btn{
    display:flex; flex-direction:column; justify-content:center;
    align-items:stretch; gap:4.5px;
    width:44px; height:38px; padding:0 11px; margin-left:auto;
    background:none; cursor:pointer;
    border:1px solid color-mix(in srgb, var(--blue) 42%, var(--rule));
    border-radius:100px;
    transition:border-color .25s, background .25s;
  }
  body[data-menu="on"] .menu-btn{
    border-color:var(--blue);
    background:color-mix(in srgb, var(--blue) 12%, transparent);
  }
  .menu-btn span{
    display:block; height:1.5px; background:var(--text); border-radius:2px;
    transition:transform .3s var(--ease), opacity .25s var(--ease);
  }
  /* las tres rayas se convierten en un aspa al abrir */
  body[data-menu="on"] .menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  body[data-menu="on"] .menu-btn span:nth-child(2){ opacity:0; }
  body[data-menu="on"] .menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .nav-links{
    display:flex !important; flex-direction:column; gap:0;
    position:fixed; left:0; right:0; top:var(--nav,58px);
    background:var(--bg2); border-bottom:1px solid var(--rule);
    padding:6px var(--pad) 14px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  body[data-menu="on"] .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  /* en el panel son los mismos botones, uno debajo de otro y a lo ancho */
  .nav-links{ gap:9px; }
  .nav-links a{ padding:14px 18px; font-size:1rem; }

  /* el nav se aprieta para dejarle sitio al boton */
  nav{ gap:12px; padding:14px var(--pad); }
  .nav-mark img{ width:34px; height:34px; }
  .nav-word{ font-size:11.5px; }
  .nav-right{ gap:8px; }
}

/* ─────────── TAMAÑO PARA EL DEDO ───────────
   Nada pulsable por debajo de 44px: es el minimo con el que un dedo
   acierta sin tener que apuntar. En el raton sobra, pero en el movil es
   la diferencia entre usar la web y pelearse con ella. */
@media (max-width:900px){
  .brief-op{ padding:12px 17px; font-size:.88rem; }
  .brief-ops{ gap:9px; }
  .theme-btn, .lang{ min-width:44px; min-height:44px; }
  .lang{ padding:0 12px; }
  .nav-mark{ min-height:44px; }
  .rail-btn{ min-width:56px; min-height:56px; justify-content:center; }
  .brief-wa, .brief-enviar{ min-height:46px; }
  .brief textarea, .brief input[type="text"], .brief input[type="email"]{
    padding:13px 14px; font-size:16px;   /* 16px evita que el movil haga zoom al escribir */
  }
  .brief-ok input[type="checkbox"]{ width:22px; height:22px; }
  .brief-directo a{ padding:6px 0; }
  .foot-legal a{ display:inline-block; padding:12px 4px; }
  .menu-btn{ width:46px; height:44px; }
  /* el enlace a la privacidad va dentro de una frase: no puede crecer
     sin romper la linea, asi que se marca mas para que se vea que lo es */
  .brief-ok a{ padding:4px 0; text-decoration-thickness:1.5px; }
}

/* ═══════════════════════════════════════════
   APARICIONES DEL MOVIL
   Va al final del archivo a proposito: tiene que ganar al bloque de
   arriba que fuerza el estado final con !important, y a igualdad de
   peso manda el ultimo. Solo se oculta bajo .movil-anim, que pone el
   modulo 'movimiento': sin JS todo se ve desde el primer pintado.
   ═══════════════════════════════════════════ */
@media (max-width:900px){
  .movil-anim .muro-rejilla .pieza,
  .movil-anim .medidor-iconos li,
  .movil-anim .encargo-card,
  .movil-anim .brief{
    opacity:0 !important;
    transition:opacity .75s var(--ease), transform 1.05s var(--ease);
  }
  /* Las piezas de los bordes arrancan fuera de su rejilla. Sin esto
     asoman por el lado y aparece barra horizontal. overflow-x:clip y no
     hidden: asi el eje vertical sigue visible y no se corta ninguna
     sombra ni se crea un contenedor de scroll. */
  .movil-anim .muro-rejilla,
  .movil-anim .encargo-grid{ overflow-x:clip; }

  /* --desde-x lo pone el modulo 'movimiento' segun la columna */
  .movil-anim .muro-rejilla .pieza{
    transform:translate3d(var(--desde-x,0px),44px,0) scale(.86) !important;
  }
  .movil-anim .medidor-iconos li{
    transform:translate3d(0,26px,0) scale(.82) !important;
  }
  /* Sin escala. Las cuatro son fotos que llenan la tarjeta: al llegar
     al final el navegador pasaba de la version escalada a la de tamano
     real y se veia el salto, justo en el ultimo tramo. Moviendose solo,
     la imagen no se remuestrea y el viaje acaba liso. */
  .movil-anim .encargo-card{
    transform:translate3d(var(--desde-x,0px),54px,0) !important;
  }
  .movil-anim .brief{ transform:translate3d(0,64px,0) !important; }

  /* Solo a estas cinco se les avisa al navegador. A las 26 piezas del
     muro no: reservar una capa para cada una gasta mas memoria de la
     que arregla en un telefono. */
  .movil-anim .encargo-card,
  .movil-anim .brief{ will-change:transform, opacity; }

  /* El destino es un translate3d en cero y no "none": con none el
     elemento deja de tener transformacion, el navegador le retira la
     capa que le habia dado para animarlo y ese cambio se nota como un
     tiron en el ultimo fotograma. */
  .movil-anim .muro-rejilla .pieza[data-in],
  .movil-anim .medidor-iconos li[data-in],
  .movil-anim .encargo-card[data-in],
  .movil-anim .brief[data-in]{
    opacity:1 !important;
    transform:translate3d(0,0,0) !important;
  }
}

/* ═══════════════════════════════════════════
   LA BARRA EN EL MOVIL
   Aqui vivia un parche para que el "Hablemos" de la barra no se comiera
   el sitio del sol/luna: el bloque de 520px lo estiraba a todo el ancho.
   Ya no hace falta, porque ese boton se ha quitado: decia lo mismo que
   el enlace de Contacto, y tener las dos cosas era repetirse.
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   LA BARRA, EN EL MOVIL, EXISTE DESDE EL PRINCIPIO
   En el escritorio la barra no esta al llegar: aparece con el primer
   scroll, y quien la enciende es el modulo 'entrada' poniendo
   data-nav="on" en el body. Ese modulo no corre en el movil —alli el
   hero lo coloca el CSS— asi que nadie encendia nunca la barra: se
   quedaba con opacity:0 y pointer-events:none para siempre. El menu,
   el idioma y el sol/luna estaban ahi, invisibles y sin responder al
   dedo. Aqui se enciende sin depender de nadie.
   ═══════════════════════════════════════════ */
@media (max-width:900px){
  .js-anim nav{ opacity:1; pointer-events:auto; }
}

/* Aqui se probo dos veces el encaje de pantallas del movil
   (scroll-snap) y las dos veces devolvia la pagina hacia atras. No se
   vuelve a intentar: el scroll del movil se queda como lo da el
   telefono. */

/* ═══════════════════════════════════════════
   LA BARRA DE LAS PAGINAS SUELTAS
   Privacidad, aviso legal y datos de facturacion llevan una barra con
   solo la marca, con la clase .marca, que nunca tuvo estilo: el simbolo
   salia a su tamaño natural y el nombre debajo. Es la misma pieza que
   .nav-mark de la portada, en pequeño.
   ═══════════════════════════════════════════ */
nav .marca{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text); }
nav .marca img{ width:42px; height:42px; }
nav .marca span{ font-size:14px; font-weight:600; letter-spacing:.22em; }