/* ═══════════════════════════════════════════════════════════════════
   constructora ekla — Pitrufquén
   Dirección: "EL PLANO". Azul de plano profundo, gris hormigón y blanco
   tiza. Las líneas de cota y las tramas técnicas son el lenguaje
   gráfico: es lo que un cliente busca en una constructora chica y casi
   nunca encuentra — papeles al día y medidas escritas.

   TIPOGRAFÍA — el trío y por qué
   · Bai Jamjuree (display) — geométrica de terminales cuadradas, hecha
     para señalética técnica. Da ingeniería sin caer en la condensada
     industrial, que es justo la dirección de Forestal Robur (Big
     Shoulders) y no se puede repetir en la misma tanda.
   · Archivo (cuerpo) — grotesca neutra de alta legibilidad en tamaños
     chicos, que es donde vive la letra chica de un contrato.
   · JetBrains Mono (dato) — cifras tabulares, imprescindible para
     cotas, m², UF y fechas: en una tabla de pagos los números tienen
     que alinearse solos.
   Ninguna de las tres se usó en las demos anteriores (Newsreader,
   Familjen Grotesk, Petrona, Bodoni Moda, Big Shoulders).

   CONTRASTES MEDIDOS (WCAG, las dos direcciones)
     tiza F1F5F9 / plano-hondo 06182E ....... 16,3:1
     tiza-suave B9C6D4 / plano-hondo ........ 10,3:1
     cota 62B4EE / plano-hondo ...............  7,9:1
     faena E4622B / plano-hondo ..............  5,2:1
     faena-claro EE7A46 / plano 0C2A4A .......  5,2:1
     tinta 111820 / papel EDEFF1 ............. 15,5:1
     tinta-suave 4E5762 / papel ..............  6,4:1
     tinta-suave / papel-hondo DFE3E7 ........  5,7:1
     hormigon-papel 636A71 / papel ...........  4,8:1
     faena-texto B1420F / papel ..............  5,0:1
     cota-hondo 1B5E8C / papel ...............  6,0:1
     plano-hondo sobre botón faena ...........  5,2:1
     plano-hondo sobre botón cota ............  7,9:1
   Tiza sobre naranja da 3,2:1 — por eso el texto de los botones
   naranjos es azul profundo y nunca blanco.
   El fondo decide el tono: el gris hormigón y el naranja de marca están
   calibrados para el azul, y sobre papel hay que usar sus variantes o se
   caen a 2,6:1. Auditado sobre la página renderizada, no de memoria.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* azul de plano */
  --plano-hondo : #06182E;
  --plano       : #0C2A4A;
  --plano-medio : #15446F;
  --linea-plano : #1E5183;
  --cota        : #62B4EE;
  --cota-hondo  : #1B5E8C;

  /* tiza y hormigón */
  --tiza        : #F1F5F9;
  --tiza-suave  : #B9C6D4;
  --hormigon    : #8E959D;

  /* papel */
  --papel       : #EDEFF1;
  --papel-hondo : #DFE3E7;
  --tinta       : #111820;
  --tinta-suave : #4E5762;
  --linea-papel : #CBD1D7;

  /* faena — acento de urgencia y marcador de dato de ejemplo.
     Tres tonos porque el naranja de marca no pasa AA en todas partes:
     --faena sirve sobre el azul profundo (5,2:1) pero sobre el azul medio
     se queda en 4,2:1, y sobre papel hay que oscurecerlo. */
  --faena       : #E4622B;   /* sobre plano-hondo */
  --faena-claro : #EE7A46;   /* sobre plano medio  5,2:1 */
  --faena-texto : #B1420F;   /* sobre papel        5,0:1 */

  /* El gris hormigón está calibrado para fondo azul; sobre papel se queda
     en 2,6:1 y hay que bajarlo. */
  --hormigon-papel : #636A71;   /* sobre papel  4,8:1 */

  --display : "Bai Jamjuree", system-ui, sans-serif;
  --cuerpo  : "Archivo", system-ui, -apple-system, sans-serif;
  --dato    : "JetBrains Mono", ui-monospace, Menlo, monospace;

  --paso--1 : clamp(.78rem, .755rem + .1vw, .84rem);
  --paso-0  : clamp(1rem, .97rem + .16vw, 1.09rem);
  --paso-1  : clamp(1.16rem, 1.09rem + .32vw, 1.4rem);
  --paso-2  : clamp(1.4rem, 1.25rem + .72vw, 1.95rem);
  --paso-3  : clamp(1.75rem, 1.44rem + 1.5vw, 2.85rem);
  --paso-4  : clamp(2.25rem, 1.6rem + 2.95vw, 4.3rem);

  --ancho   : 1180px;
  --salida  : cubic-bezier(.16,1,.3,1);

  /* Del alto de la cabecera cuelgan el margen negativo de la portada —el
     que la mete debajo de la barra fantasma— y el scroll-margin de los
     anclajes. Por eso la cabecera lleva height fija y no min-height: si
     creciera un píxel aparecería una franja clara sobre el hero, y si
     encogiera, la portada se treparía encima de la banda de propuesta.
     Este número y el de la cabecera tienen que moverse juntos. */
  --alto-cab: 102px;   /* dos filas en móvil: 56 + 45 + borde */
}

@media (min-width:900px){
  :root{ --alto-cab:74px; }   /* una sola fila en escritorio */
}

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

/* El atributo hidden pierde contra cualquier regla con display: hay que
   declararlo o los elementos ocultos reaparecen. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:var(--paso-0);
  line-height:1.62;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

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

.saltar{
  position:absolute; left:.75rem; top:-4rem; z-index:120;
  background:var(--plano-hondo); color:var(--tiza);
  padding:.8rem 1.1rem; border-radius:3px; text-decoration:none;
  font-family:var(--dato); font-size:var(--paso--1);
  transition:top .2s ease;
}
.saltar:focus{ top:.75rem; }

/* ── área de toque de los enlaces sueltos ───────────────────────
   Un enlace dentro de un párrafo mide el alto de su renglón, catorce
   píxeles, y en un celular eso no se acierta. El padding vertical sobre
   un elemento EN LÍNEA agranda el blanco sensible al dedo sin empujar el
   renglón ni separar las líneas del párrafo: es transparente, así que no
   se ve, pero el dedo sí lo encuentra. */
.contacto__datos dd a,
.pie__txt a,
.dueno__firma a,
.serv__dato a{ padding-block:1rem; }

.caja{ width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto; }
.caja--angosta{ width:min(100% - 2.4rem, 760px); }

/* ── reveals ───────────────────────────────────────────────────
   La clase .revelar la pone main.js, nunca el HTML: si el script no
   carga, no queda nada escondido. */
.js .revelar{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--salida), transform .75s var(--salida);
}
.js .revelar.visible{ opacity:1; transform:none; }

/* ── marcador de dato de ejemplo ────────────────────────────────
   Todo lo que lleva .ej es relleno. Se ve a simple vista para poder
   decir en la reunión "esto se completa con sus datos"; se borra junto
   con la clase cuando el dato real llega. */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--faena) 55%, transparent);
  outline-offset:10px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-10px; right:-10px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faena-texto);
  background:var(--papel);
  padding:0 .4rem;
  pointer-events:none;
}
.ej--inline{
  outline:1px dashed color-mix(in srgb, var(--faena) 50%, transparent);
  outline-offset:3px;
  color:var(--faena-texto);
  font-weight:500;
}
/* La etiqueta se recorta contra el fondo de SU sección. */
.seccion--plano .ej::after,
.dueno .ej::after{ background:var(--plano-hondo); color:var(--faena); }
.seccion--plano .ej--inline,
.dueno .ej--inline{ color:var(--faena); }
.lamina .ej--inline{ color:var(--faena); }
.portada .ej--inline{ color:var(--faena); }

/* La cuadrícula de dibujo —retícula fina de 16 px con módulo grueso de
   96 px, dibujada con gradientes y cero KB de imagen— va escrita en cada
   sitio donde se usa: la portada, las láminas y las secciones de plano
   necesitan tamaños y máscaras distintos. */

/* ── botones ───────────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.6rem 1.25rem;
  font-family:var(--display); font-weight:600; font-size:var(--paso--1);
  letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; border-radius:3px;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.boton:hover{ transform:translateY(-1px); }

.boton--acento{ background:var(--faena); color:var(--plano-hondo); }
.boton--acento:hover{ background:#F0703A; }

.boton--fantasma{
  background:transparent; color:var(--tiza);
  border-color:color-mix(in srgb, var(--tiza) 45%, transparent);
}
.boton--fantasma:hover{ background:color-mix(in srgb, var(--tiza) 12%, transparent); border-color:var(--tiza); }

.boton--linea{ background:transparent; color:var(--tinta); border-color:var(--linea-papel); }
.boton--linea:hover{ background:var(--papel-hondo); }

/* Mismo criterio que la cabecera: el estado sólido es el piso, y la
   versión translúcida sólo aparece cuando el script está vivo. */
.boton--wsp{
  background:var(--cota); color:var(--plano-hondo); border-color:var(--cota);
  min-height:44px; padding:.4rem 1rem;
}
.js .cabecera:not(.cabecera--solida) .boton--wsp{
  background:color-mix(in srgb, var(--cota) 18%, transparent);
  color:var(--tiza);
  border-color:color-mix(in srgb, var(--cota) 55%, transparent);
}
.boton--wsp:hover{ background:var(--cota); color:var(--plano-hondo); }

.boton--alerta{ background:var(--faena); color:var(--plano-hondo); font-size:var(--paso-0); min-height:54px; padding:.8rem 1.6rem; }
.boton--alerta:hover{ background:#F0703A; }

/* ── banda de propuesta ────────────────────────────────────────── */
.propuesta{ background:var(--plano-hondo); color:var(--tiza-suave); border-bottom:1px solid var(--linea-plano); }
.propuesta__cinta{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.1rem;
  padding:.75rem 0;
  font-size:.82rem; line-height:1.5;
}
.propuesta__marca{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--plano-hondo);
  background:var(--cota); padding:.25rem .5rem; border-radius:2px;
  white-space:nowrap;
}
.propuesta__txt{ margin:0; flex:1 1 22rem; }
.propuesta__txt strong{ color:var(--tiza); font-weight:600; }
.propuesta__txt code{ font-family:var(--dato); color:var(--cota); }
.propuesta__link{
  font-family:var(--dato); font-size:.74rem; color:var(--faena);
  white-space:nowrap; min-height:44px; display:inline-flex; align-items:center;
}

/* ── cabecera fantasma ─────────────────────────────────────────
   Transparente sobre la portada. Al bajar se esconde entera; al subir
   vuelve con fondo sólido; en el tope vuelve a transparente. Las
   clases las mueve main.js. Sin JS queda fija, sólida y visible. */
/* El estado POR DEFECTO es la barra sólida, no la transparente, y eso es
   a propósito. Si main.js no llega, nadie le pone nunca la clase
   --solida: una barra transparente sobre las secciones de papel deja el
   menú en tiza sobre blanco, ilegible. Así que sólida es el piso, y la
   transparencia cuelga de .js —que el rescate de los 4 s quita si el
   script no apareció—. La clase .js la pone el <head>, antes del primer
   pintado, así que la portada nunca alcanza a ver la barra opaca. */
.cabecera{
  position:sticky; top:0; z-index:80;
  height:var(--alto-cab);
  background:color-mix(in srgb, var(--plano-hondo) 94%, transparent);
  border-bottom:1px solid var(--linea-plano);
  backdrop-filter:saturate(140%) blur(8px);
  transition:transform .3s var(--salida), background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.js .cabecera:not(.cabecera--solida){
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
}
.cabecera--oculta{ transform:translateY(-100%); }
/* Nunca esconderla con el foco dentro: si el usuario llegó tabulando,
   esconder la barra le arrebata el elemento enfocado de la pantalla. */
.cabecera:focus-within{ transform:none !important; }

.cabecera__fila{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:56px;
}

.marca{ display:flex; align-items:center; gap:.6rem; min-height:44px; text-decoration:none; color:var(--tiza); }
.marca__glifo{ width:30px; height:30px; color:var(--cota); flex:none; }
.marca__glifo svg{ width:100%; height:100%; }
.marca__txt{
  font-family:var(--display); font-weight:700; font-size:1.32rem;
  letter-spacing:.01em; line-height:1; display:flex; flex-direction:column;
}
.marca__sub{
  font-family:var(--dato); font-weight:400; font-size:.54rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--cota);
  margin-top:.22rem;
}

.nav{
  height:45px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-top:1px solid var(--linea-plano);
}
.nav::-webkit-scrollbar{ display:none; }
.js .cabecera:not(.cabecera--solida) .nav{
  border-top-color:color-mix(in srgb, var(--tiza) 12%, transparent);
}
.nav__lista{
  list-style:none; margin:0;
  padding:0 max(1.2rem, calc((100vw - var(--ancho)) / 2));
  display:flex; gap:.2rem; white-space:nowrap;
}
.nav__lista a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 .7rem; text-decoration:none;
  font-family:var(--dato); font-size:.74rem; letter-spacing:.04em;
  color:var(--tiza-suave);
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__lista a:hover{ color:var(--tiza); }
.nav__lista a[aria-current="true"]{ color:var(--cota); border-bottom-color:var(--cota); }

@media (min-width:900px){
  /* El padding vertical no es estético: fija el alto de la cabecera en
     ~74 px, que es el mismo número del que cuelgan el margen negativo de
     la portada y el scroll-margin de los anclajes. Sin él la barra mide
     45 px y la portada se sube encima de la banda de propuesta. */
  .cabecera{ display:flex; align-items:center; gap:1.4rem; }
  .nav{ height:auto; }
  /* En escritorio la fila deja de ser caja y sus hijos pasan a ser hijos
     directos de la cabecera: así marca, nav y botón quedan en una línea
     sin cambiar el orden del HTML. */
  .cabecera__fila{ display:contents; }
  .marca{ order:1; }
  .nav{ order:2; flex:1 1 auto; border-top:none; }

  .nav__lista{ padding:0; justify-content:center; }
  .cabecera__wsp{ order:3; flex:none; }
  /* Ocupa todo el ancho —el fondo sólido tiene que llegar a los bordes— y
     el contenido se centra con padding, no con una caja interior. */
  .cabecera{ padding-inline:max(1.2rem, calc((100vw - var(--ancho)) / 2)); }
}

/* Los anclajes no pueden quedar debajo de la cabecera. */
[id]{ scroll-margin-top:calc(var(--alto-cab) + 12px); }

/* ══ PORTADA ══════════════════════════════════════════════════
   Sólo @keyframes: ni observer ni rAF. */
.portada{
  position:relative;
  min-height:100svh;
  margin-top:calc(var(--alto-cab) * -1);
  padding:calc(var(--alto-cab) + clamp(2rem,7vh,4.5rem)) 0 clamp(3.5rem,10vh,6rem);
  display:flex; align-items:flex-end;
  background:var(--plano-hondo);
  color:var(--tiza);
  overflow:hidden;
  isolation:isolate;
}
.portada__foto{ position:absolute; inset:0; z-index:-3; }
.portada__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  animation:acercar 26s ease-out both; }
@keyframes acercar{ from{ transform:scale(1.09); } to{ transform:scale(1); } }

/* Velo medido: el render nocturno ya es oscuro, pero por el costado
   izquierdo baja a 86 % para que el titular tenga sus 16:1. */
.portada__velo{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg, rgba(6,24,46,.94) 0%, rgba(6,24,46,.86) 34%, rgba(6,24,46,.42) 62%, rgba(6,24,46,.55) 100%),
    linear-gradient(to top, rgba(6,24,46,.9) 0%, rgba(6,24,46,0) 45%);
}
.portada__trama{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(98,180,238,.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98,180,238,.15) 1px, transparent 1px),
    linear-gradient(to right, rgba(98,180,238,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98,180,238,.07) 1px, transparent 1px);
  background-size:110px 110px, 110px 110px, 18.33px 18.33px, 18.33px 18.33px;
  mask-image:radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
}

/* Cotas sobre el render. Decorativas; el hero avisa que son de ejemplo. */
.cotas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; color:var(--cota);
  opacity:.85;
}
.cotas path{ fill:none; stroke:currentColor; vector-effect:non-scaling-stroke; }
.cotas__linea{ stroke-width:1.2; stroke-dasharray:400; stroke-dashoffset:400; animation:trazar 1.5s .9s var(--salida) forwards; }
.cotas__linea--dos{ stroke-dasharray:230; stroke-dashoffset:230; animation-delay:1.15s; }
.cotas__pata{ stroke-width:1.2; opacity:0; animation:aparecer .5s 2.1s ease forwards; }
.cotas__pata--dos{ animation-delay:2.3s; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }
@keyframes aparecer{ to{ opacity:1; } }

.cotas__valor{
  position:absolute; z-index:1; margin:0;
  font-family:var(--dato); font-size:.66rem; letter-spacing:.1em;
  color:var(--cota); background:var(--plano-hondo);
  padding:.1rem .4rem; opacity:0;
  animation:aparecer .6s 2.4s ease forwards;
  pointer-events:none;
}
.cotas__valor--h{ left:50%; bottom:calc(8% - .55rem); transform:translateX(-50%); }
.cotas__valor--v{ right:.4rem; top:50%; transform:translateY(-50%); }
@media (max-width:719px){
  .cotas__valor--v{ display:none; }
  .cotas__linea--dos, .cotas__pata--dos{ display:none; }
}

.portada__caja{ position:relative; z-index:2; width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto; }
.portada .ojo{ animation:subir .8s .1s var(--salida) both; }
.portada h1{
  font-size:var(--paso-4); font-weight:700; letter-spacing:-.035em;
  max-width:16ch; margin:0 0 1.3rem;
  animation:subir .9s .22s var(--salida) both;
}
.portada__bajada{
  max-width:46ch; color:var(--tiza-suave); font-size:var(--paso-1);
  line-height:1.5; margin-bottom:1.9rem;
  animation:subir .9s .38s var(--salida) both;
}
.portada__acciones{
  display:flex; flex-wrap:wrap; gap:.7rem;
  animation:subir .9s .52s var(--salida) both;
}
.portada__nota{
  margin-top:1.2rem; font-family:var(--dato); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--hormigon);
  animation:subir .9s .66s var(--salida) both;
}
@keyframes subir{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

.portada__baja{
  position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:1.5rem; z-index:2;
  margin:0; display:flex; align-items:center; gap:.6rem;
  font-family:var(--dato); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hormigon);
  animation:aparecer .8s 1.6s ease both;
}
.portada__baja span{
  width:1px; height:34px; background:linear-gradient(var(--cota), transparent);
  animation:latir 2.6s 2s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ transform:scaleY(1); opacity:1; } 50%{ transform:scaleY(.55); opacity:.45; } }
@media (max-width:719px){ .portada__baja{ display:none; } }

.ojo{
  font-family:var(--dato); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cota-hondo);
  margin:0 0 1rem;
}
.ojo--claro{ color:var(--cota); }
.ojo--alerta{ color:var(--faena); }

/* ══ CREDENCIALES ══ */
.credenciales{ background:var(--plano); color:var(--tiza); border-block:1px solid var(--linea-plano); }
.credenciales__lista{
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
  list-style:none; padding:1.6rem 0; margin-block:0;
  display:grid; gap:1.3rem 1.8rem;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.credenciales__lista li{ display:flex; flex-direction:column; gap:.15rem; }
.credenciales__lista b{ font-family:var(--display); font-size:var(--paso-1); font-weight:600; color:var(--tiza); }
.credenciales__lista span{ font-size:var(--paso--1); color:var(--tiza-suave); }
/* Recuadros de ejemplo pegados: con el desfase de 10 px por defecto los de
   dos columnas vecinas se tocan. Acá van más ajustados. */
.credenciales .ej{ outline-offset:7px; }
.credenciales .ej::after{ top:-7px; right:-7px; background:var(--plano); color:var(--faena); }

/* ══ LÁMINAS A SANGRE ══ */
.lamina{
  position:relative; min-height:88svh;
  display:flex; align-items:center;
  padding:clamp(4rem,10vh,7rem) 0;
  color:var(--tiza); background:var(--plano-hondo);
  overflow:hidden; isolation:isolate;
}
.lamina__foto{ position:absolute; inset:0; z-index:-3; }
.lamina__foto img{ width:100%; height:100%; object-fit:cover; }
.lamina__velo{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(95deg, rgba(6,24,46,.95) 0%, rgba(6,24,46,.88) 32%, rgba(6,24,46,.45) 66%, rgba(6,24,46,.62) 100%);
}
.lamina--der .lamina__velo{
  background:linear-gradient(265deg, rgba(6,24,46,.95) 0%, rgba(6,24,46,.88) 32%, rgba(6,24,46,.45) 66%, rgba(6,24,46,.62) 100%);
}
.lamina__trama{
  position:absolute; inset:0; z-index:-1; opacity:.4;
  background-image:
    linear-gradient(to right, rgba(98,180,238,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98,180,238,.14) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(90deg, #000 0%, transparent 70%);
}
.lamina--der .lamina__trama{ mask-image:linear-gradient(270deg, #000 0%, transparent 70%); }

.lamina__caja{
  position:relative; z-index:1;
  width:min(100% - 2.4rem, var(--ancho)); margin-inline:auto;
}
.lamina h2{
  font-size:var(--paso-3); font-weight:600; max-width:18ch;
  margin:0 0 1.1rem;
}
.lamina p{ max-width:44ch; color:var(--tiza-suave); margin-bottom:1.6rem; }
.lamina .ojo{ margin-bottom:.8rem; }
/* La lámina alternada sólo se voltea en escritorio: en el celular el
   texto va siempre a la izquierda, alineado con el resto de la página. */
@media (min-width:900px){
  .lamina--der .lamina__caja{ text-align:right; }
  .lamina--der h2,
  .lamina--der p{ margin-left:auto; }
}

/* ══ SECCIONES ══ */
.seccion{ padding:clamp(3.5rem,9vh,6.5rem) 0; }
.seccion--papel{ background:var(--papel); color:var(--tinta); }
.seccion--plano{ background:var(--plano-hondo); color:var(--tiza); position:relative; isolation:isolate; }
.seccion--plano::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(98,180,238,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98,180,238,.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(98,180,238,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98,180,238,.045) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 16px 16px, 16px 16px;
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 25%, transparent 80%);
}

.titulo{ font-size:var(--paso-3); margin:0 0 1.2rem; max-width:20ch; }
.titulo--claro{ color:var(--tiza); }
.entrada{ max-width:56ch; color:var(--tinta-suave); font-size:var(--paso-1); line-height:1.55; margin-bottom:clamp(2rem,5vh,3.2rem); }
.entrada--clara{ color:var(--tiza-suave); }
.letra-chica{
  margin-top:2.2rem; max-width:62ch;
  font-size:var(--paso--1); color:var(--tinta-suave); line-height:1.55;
}
.letra-chica--claro{ color:var(--hormigon); }

/* ══ SERVICIOS ══ */
.rejilla-serv{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--linea-papel);
  border:1px solid var(--linea-papel);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.serv{ background:var(--papel); display:flex; flex-direction:column; }
.serv__foto{ aspect-ratio:16/10; overflow:hidden; background:var(--papel-hondo); }
.serv__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--salida); }
.serv:hover .serv__foto img{ transform:scale(1.045); }
.serv__txt{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.serv h3{
  font-size:var(--paso-1); margin:0 0 .6rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--linea-papel);
}
.serv p{ color:var(--tinta-suave); font-size:var(--paso--1); line-height:1.6; }
.serv__dato{
  margin-top:auto; padding-top:1rem;
  font-family:var(--dato); font-size:.7rem; letter-spacing:.03em;
  color:var(--cota-hondo) !important;
}
.serv__dato a{ text-decoration:none; }
.serv__dato a:hover{ text-decoration:underline; }
.serv .ej{ outline-offset:6px; }
.serv .ej::after{ top:-6px; right:-6px; }

/* La tarjeta oscura (modelado 3D) va ENTERA acá abajo, después de las
   reglas base de .serv. Estaba arriba y perdía: `.serv p` y
   `.serv--destacado p` tienen la misma especificidad, así que ganaba la
   última escrita y el párrafo de la tarjeta oscura terminaba con la tinta
   gris de fondo claro sobre azul profundo — 2,4:1, ilegible. */
.serv--destacado{ background:var(--plano-hondo); color:var(--tiza); }
.serv--destacado h3{ color:var(--tiza); border-bottom-color:var(--linea-plano); }
.serv--destacado p{ color:var(--tiza-suave); }
.serv--destacado .serv__dato,
.serv--destacado .serv__dato a{ color:var(--cota) !important; }
.serv--destacado .ej::after{ background:var(--plano-hondo); color:var(--faena); }

/* ══ PROYECTO 3D ══ */
.comparador{ margin:0 0 clamp(2rem,5vh,3rem); }
.comparador__marco{
  position:relative; overflow:hidden;
  aspect-ratio:1360/765;
  border:1px solid var(--linea-plano);
  background:var(--plano);
  --corte:50%;
}
.comparador__base,
.comparador__encima{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; margin:0;
}
/* El recorte se mueve con la variable. Ojo: un elemento recortado a área
   cero jamás dispara IntersectionObserver — por eso el reveal se observa
   sobre .comparador, no sobre esta imagen. */
.comparador__encima{ clip-path:inset(0 calc(100% - var(--corte)) 0 0); }
.comparador__riel{
  position:absolute; top:0; bottom:0; left:var(--corte);
  width:2px; margin-left:-1px; background:var(--tiza);
  box-shadow:0 0 0 1px rgba(6,24,46,.35);
  pointer-events:none;
}
.comparador__tirador{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--tiza); box-shadow:0 4px 18px rgba(6,24,46,.45);
}
.comparador__tirador::before,
.comparador__tirador::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-block:6px solid transparent;
}
.comparador__tirador::before{ left:12px; transform:translateY(-50%); border-right:8px solid var(--plano-hondo); }
.comparador__tirador::after{ right:12px; transform:translateY(-50%); border-left:8px solid var(--plano-hondo); }

.comparador__rotulo{
  position:absolute; top:.9rem; z-index:2;
  font-family:var(--dato); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tiza);
  background:rgba(6,24,46,.72); padding:.28rem .6rem; border-radius:2px;
  pointer-events:none;
}
.comparador__rotulo--a{ left:.9rem; }
.comparador__rotulo--b{ right:.9rem; }

.comparador__oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* El mando cubre el marco entero: se arrastra desde cualquier punto y con
   las flechas del teclado. Es un <input type="range"> de verdad, así que
   la accesibilidad viene de fábrica. */
.comparador__mando{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  background:transparent; border:none; cursor:ew-resize;
}
.comparador__mando::-webkit-slider-runnable-track{ background:transparent; height:100%; }
.comparador__mando::-moz-range-track{ background:transparent; height:100%; }
.comparador__mando::-webkit-slider-thumb{
  -webkit-appearance:none; width:56px; height:56px;
  background:transparent; border:none; cursor:ew-resize;
}
.comparador__mando::-moz-range-thumb{
  width:56px; height:56px; background:transparent; border:none; cursor:ew-resize;
}
.comparador__mando:focus-visible{ outline:3px solid var(--faena); outline-offset:-3px; }
.comparador figcaption{
  margin-top:.8rem; font-size:var(--paso--1); color:var(--hormigon); max-width:56ch;
}

.td-rejilla{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-bottom:clamp(2rem,5vh,3rem);
}
.td-pieza{ margin:0; }
.td-pieza img{ width:100%; border:1px solid var(--linea-plano); }
.td-pieza figcaption{
  margin-top:.6rem; font-family:var(--dato); font-size:.68rem;
  letter-spacing:.05em; color:var(--cota);
}

.td-entrega{
  list-style:none; margin:0 0 1rem; padding:0;
  display:grid; gap:1px; background:var(--linea-plano);
  border:1px solid var(--linea-plano);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.td-entrega li{ background:var(--plano-hondo); padding:1.2rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; }
.td-entrega__n{ font-family:var(--dato); font-size:.68rem; color:var(--cota); letter-spacing:.12em; }
.td-entrega b{ font-family:var(--display); font-size:var(--paso-0); font-weight:600; color:var(--tiza); }
.td-entrega li > span:last-child{ font-size:var(--paso--1); color:var(--tiza-suave); line-height:1.5; }

/* ══ LAS 5 ETAPAS ══ */
.cinta-cotas{
  width:100%; height:auto; color:var(--cota-hondo);
  margin-bottom:2.4rem;
  display:none;
}
@media (min-width:760px){ .cinta-cotas{ display:block; } }
.cinta-cotas path,.cinta-cotas rect,.cinta-cotas line{ vector-effect:non-scaling-stroke; }
.cinta-cotas__num text{ font-family:var(--display); font-weight:700; font-size:26px; fill:var(--cota-hondo); }
.cinta-cotas__txt text{ font-family:var(--dato); font-size:17px; fill:var(--tinta-suave); }
.cinta-cotas__total{ letter-spacing:.06em; }

.etapas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--linea-papel);
  border:1px solid var(--linea-papel);
}
/* Cinco tarjetas nunca cierran parejas en una rejilla de dos o cuatro
   columnas: sobra un hueco. Sobre seis columnas sí cuadran —tres de dos
   arriba, dos de tres abajo— y en dos columnas la última se estira a lo
   ancho. Sin esto queda un rectángulo gris en medio del proceso, que es
   justo la pieza que tiene que verse ordenada. */
@media (min-width:760px){
  .etapas{ grid-template-columns:repeat(2,1fr); }
  .etapa--ancha{ grid-column:auto; }
  .etapa:last-child{ grid-column:1 / -1; }
}
@media (min-width:1080px){
  .etapas{ grid-template-columns:repeat(6,1fr); }
  .etapa{ grid-column:span 2; }        /* 01, 02 y 03 → primera fila */
  .etapa--ancha{ grid-column:span 3; } /* 04 y 05 → segunda fila */
  /* Y se deshace el ancho completo que la última necesitaba en dos
     columnas: acá cabe al lado de la cuarta. */
  .etapa:last-child{ grid-column:span 3; }
}
.etapa{ background:var(--papel); display:flex; gap:0; }
.etapa__cota{
  flex:none; width:34px; position:relative;
  border-right:1px dashed var(--linea-papel);
}
/* Línea de cota vertical dibujada en CSS: la barra con sus dos patas.
   Es la versión de bolsillo de la cinta de cotas de arriba, y es la que
   se ve en el celular. */
.etapa__cota::before{
  content:""; position:absolute; left:50%; top:18px; bottom:18px;
  width:1px; background:var(--cota-hondo); transform:translateX(-50%);
}
.etapa__cota::after{
  content:""; position:absolute; left:50%; top:18px;
  width:13px; height:1px; background:var(--cota-hondo);
  transform:translateX(-50%);
  box-shadow:0 0 0 0 transparent;
}
.etapa__cota span{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--dato); font-size:.66rem; letter-spacing:.1em;
  color:var(--cota-hondo); background:var(--papel);
  padding:.35rem 0; white-space:nowrap;
}
.etapa__cuerpo{ position:relative; padding:1.5rem 1.4rem 1.6rem; flex:1; }
.etapa__n{
  font-family:var(--dato); font-size:.7rem; letter-spacing:.14em;
  color:var(--faena-texto);
}
.etapa h3{ font-size:var(--paso-2); margin:.3rem 0 .9rem; padding-right:56px; }
.etapa__glifo{
  position:absolute; top:1.4rem; right:1.3rem;
  width:44px; height:44px; color:var(--cota-hondo); opacity:.9;
}
.etapa p{ color:var(--tinta-suave); font-size:var(--paso--1); line-height:1.6; }
.etapa__dl{ margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--linea-papel); }
.etapa__dl dt{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hormigon-papel); margin-bottom:.25rem;
}
.etapa__dl dd{ margin:0 0 .9rem; font-size:var(--paso--1); color:var(--tinta); line-height:1.55; }
.etapa__dl dd:last-child{ margin-bottom:0; }
.etapa__pago{ font-family:var(--dato); font-weight:700; font-size:.86rem; color:var(--tinta); }

/* ══ MURAL DE OBRAS ══ */
.mural{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem 1rem; align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.mural__pieza{ margin:0; }
.mural__pieza--ancha{ grid-column:span 2; }
@media (max-width:559px){ .mural__pieza--ancha{ grid-column:auto; } }
/* Alto fijo en vez de proporción: con proporciones distintas la pieza
   ancha queda el doble de alta que sus vecinas y los pies de foto de una
   misma fila terminan a alturas distintas. Con el alto igual, la ancha
   sólo es más ancha y la fila cierra pareja. */
.mural__pieza img{
  width:100%; height:clamp(180px, 17vw, 250px); object-fit:cover;
  border:1px solid var(--linea-papel);
  transition:transform .6s var(--salida);
}
.mural__pieza:hover img{ transform:scale(1.02); }
.mural__pieza p{
  margin:.55rem 0 0; font-family:var(--dato); font-size:.7rem;
  letter-spacing:.04em; color:var(--tinta);
}
.mural__pieza p span{ color:var(--hormigon-papel); }

/* ══ ESTIMACIÓN ══ */
.est{
  display:grid; gap:1px; background:var(--linea-plano);
  border:1px solid var(--linea-plano);
}
@media (min-width:900px){ .est{ grid-template-columns:1.15fr .85fr; } }

.est__form{
  background:var(--plano-hondo); padding:clamp(1.4rem,3vw,2.2rem);
  display:grid; gap:1.1rem;
}
@media (min-width:620px){
  .est__form{ grid-template-columns:1fr 1fr; }
  .campo--ancho, .campo--m2, .est__enviar, .est__aviso{ grid-column:1 / -1; }
}
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo label{
  font-family:var(--dato); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cota);
}
.campo__unidad{ color:var(--hormigon); text-transform:none; letter-spacing:.05em; }
.campo input[type="text"],
.campo input[type="number"],
.campo select,
.campo textarea{
  font-family:var(--cuerpo); font-size:var(--paso-0); color:var(--tiza);
  background:var(--plano); border:1px solid var(--linea-plano);
  border-radius:3px; padding:.65rem .75rem; min-height:46px;
  width:100%; -webkit-appearance:none; appearance:none;
}
.campo select{
  background-image:linear-gradient(45deg, transparent 50%, var(--cota) 50%),
                   linear-gradient(135deg, var(--cota) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
.campo textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.campo ::placeholder{ color:var(--hormigon); opacity:1; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{ outline:3px solid var(--faena); outline-offset:1px; border-color:var(--faena); }
.campo__par{ display:grid; grid-template-columns:110px 1fr; gap:.8rem; align-items:center; }
.campo__pista{ margin:0; font-size:.74rem; color:var(--hormigon); }

.campo__deslizador{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; background:transparent; cursor:pointer;
}
.campo__deslizador::-webkit-slider-runnable-track{ height:3px; background:var(--linea-plano); border-radius:2px; }
.campo__deslizador::-moz-range-track{ height:3px; background:var(--linea-plano); border-radius:2px; }
.campo__deslizador::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-11.5px;
  border-radius:50%; background:var(--cota); border:3px solid var(--plano-hondo); cursor:grab;
}
.campo__deslizador::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:var(--cota); border:3px solid var(--plano-hondo); cursor:grab;
}
.campo__deslizador:focus-visible{ outline:3px solid var(--faena); outline-offset:2px; }

.est__enviar{ margin-top:.4rem; width:100%; }
.est__aviso{ margin:0; font-size:.74rem; color:var(--hormigon); }

.est__panel{ background:var(--plano); padding:clamp(1.4rem,3vw,2.2rem); }
.est__rotulo{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cota); margin:0 0 .7rem;
}
.est__resumen{
  font-family:var(--display); font-size:var(--paso-1); font-weight:500;
  color:var(--tiza); line-height:1.35; margin-bottom:1.6rem;
}
.est__rango{ padding:1.1rem 0; border-block:1px solid var(--linea-plano); margin-bottom:1.4rem; }
.est__rango-rotulo{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hormigon); margin:0 0 .4rem;
}
.est__uf{
  font-family:var(--dato); font-weight:700; font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);
  color:var(--cota); margin:0 0 .2rem; letter-spacing:-.01em;
}
.est__pesos{ font-family:var(--dato); font-size:var(--paso--1); color:var(--tiza-suave); margin:0 0 .6rem; }
.est__nota{ margin:0; font-size:.76rem; color:var(--hormigon); line-height:1.5; }
.est__desglose{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.5rem; }
.est__desglose li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:var(--paso--1); color:var(--tiza-suave);
  border-bottom:1px dotted var(--linea-plano); padding-bottom:.35rem;
}
.est__desglose b{ font-family:var(--dato); color:var(--tiza); font-weight:500; }
.est__letra{ margin:0; font-size:.74rem; color:var(--hormigon); line-height:1.55; }
.est__panel .ej::after{ background:var(--plano); color:var(--faena); }

/* ══ CONTACTO ══ */
.contacto{ display:grid; gap:2rem; }
@media (min-width:720px){ .contacto{ grid-template-columns:1fr auto; align-items:start; } }
.contacto__datos{ margin:0; }
.contacto__datos dt{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hormigon-papel); margin-bottom:.2rem;
}
.contacto__datos dd{ margin:0 0 1.1rem; font-size:var(--paso-1); font-family:var(--display); font-weight:500; }
/* Subrayado por text-decoration y no con border-bottom: el borde se iría
   al fondo del padding de toque y quedaría flotando bajo el número. */
.contacto__datos dd a{
  text-decoration:underline; text-decoration-color:var(--cota-hondo);
  text-decoration-thickness:1px; text-underline-offset:4px;
}
.contacto__acciones{ display:flex; flex-direction:column; gap:.7rem; }

/* ══ PARA EL DUEÑO ══ */
.dueno{
  background:var(--plano-hondo); color:var(--tiza);
  padding:clamp(3.5rem,9vh,6rem) 0;
  border-top:3px solid var(--faena);
  position:relative; isolation:isolate;
}
.dueno::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(228,98,43,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228,98,43,.09) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 55%);
}
.dueno__titulo{ font-size:var(--paso-2); color:var(--tiza-suave); font-weight:500; margin:0 0 .4rem; }
.dueno__fecha{
  display:flex; align-items:baseline; gap:.1em;
  font-family:var(--dato); font-weight:700;
  font-size:clamp(3.2rem, 1.4rem + 9vw, 8rem);
  line-height:.95; letter-spacing:-.04em;
  color:var(--faena); margin:0 0 .5rem;
}
.dueno__fecha i{ font-style:normal; color:var(--linea-plano); }
.dueno__cuenta{
  font-family:var(--dato); font-size:var(--paso-1); color:var(--tiza);
  margin:0 0 clamp(2rem,5vh,3rem);
  padding-left:.9rem; border-left:3px solid var(--faena);
}
.dueno__rejilla{
  display:grid; gap:1px; background:var(--linea-plano);
  border:1px solid var(--linea-plano);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.dueno__bloque{ background:var(--plano-hondo); padding:1.5rem 1.4rem; }
.dueno__bloque h3{
  font-size:var(--paso-1); margin:0 0 .8rem; color:var(--tiza);
  padding-bottom:.6rem; border-bottom:1px solid var(--linea-plano);
}
.dueno__bloque p{ color:var(--tiza-suave); font-size:var(--paso--1); line-height:1.62; }
.dueno__bloque strong{ color:var(--tiza); }
.dueno__bloque code{ font-family:var(--dato); color:var(--cota); }
.dueno__403{
  font-family:var(--dato); background:var(--plano);
  border:1px solid var(--linea-plano); border-left:3px solid var(--faena);
  padding:.85rem 1rem; display:flex; flex-direction:column; gap:.25rem;
}
.dueno__403 b{ color:var(--faena-claro); font-size:var(--paso-0); }
.dueno__403 span{ color:var(--hormigon); font-size:.74rem; }
.dueno__lista{ margin:0; padding-left:1.1rem; color:var(--tiza-suave); font-size:var(--paso--1); line-height:1.6; }
.dueno__lista li{ margin-bottom:.45rem; }
.dueno__cierre{ margin-top:clamp(2rem,5vh,3rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.8rem; }
.dueno__firma{ margin:0; font-size:var(--paso--1); color:var(--hormigon); }
.dueno__firma a{ color:var(--cota); }

/* ══ PIE ══ */
.pie{ background:var(--plano); color:var(--tiza-suave); padding:2.5rem 0; border-top:1px solid var(--linea-plano); }
.pie__marca{ font-family:var(--display); font-weight:700; font-size:var(--paso-1); color:var(--tiza); margin:0 0 .3rem; letter-spacing:.02em; }
.pie__txt{ margin:0 0 1rem; font-size:var(--paso--1); }
.pie__txt a{ color:var(--cota); }
.pie__demo{ margin:0; font-size:.74rem; color:var(--hormigon); max-width:62ch; }

/* ══ MOVIMIENTO REDUCIDO ══════════════════════════════════════
   Se apaga lo intrusivo —el acercamiento de la portada, el latido de la
   flecha, el zoom de las fotos al pasar el cursor— y se dejan los
   fundidos y los cambios de color: si se apaga todo, el sitio se ve
   muerto, que es peor que se vea movido. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .portada__foto img{ animation:none; }
  .portada__baja span{ animation:none; }
  .cotas__linea{ stroke-dashoffset:0; animation:none; }
  .cotas__pata,.cotas__valor{ opacity:1; animation:none; }
  .serv:hover .serv__foto img,
  .mural__pieza:hover img{ transform:none; }
  .boton:hover{ transform:none; }
  .portada .ojo,.portada h1,.portada__bajada,.portada__acciones,.portada__nota{
    animation-duration:.45s; animation-name:fundir;
  }
  @keyframes fundir{ from{ opacity:0; } to{ opacity:1; } }
  .js .revelar{ transform:none; transition:opacity .45s ease; }
  /* La cabecera sigue escondiéndose, pero de golpe: el barrido es lo que
     molesta, no el hecho de que se quite. */
  .cabecera{ transition-duration:1ms; }
}