/* ==========================================================================
   TERRACONSTRUXIONS — sitio
   Lenguaje cinematográfico: escena a sangre, interfaz mínima en las esquinas,
   tipografía que entra despacio y cotas técnicas como firma gráfica.
   ========================================================================== */

/* ---------------------------------------------------------- lienzo firma */
/* ⚠ `100%` y no `100vw`. `100vw` **incluye el ancho de la barra de
   desplazamiento**, así que en cuanto la página tiene scroll vertical —siempre—
   este lienzo sobresale por la derecha justo esos píxeles y la página entera se
   puede desplazar en horizontal. Medido en un móvil de 390: el documento medía
   404 de ancho. Y no lo delata ningún elemento: al buscar quién se salía, no
   había ninguno sin recortar. El culpable era la unidad.
   En un elemento `position:fixed`, `100%` es el ancho visible sin la barra,
   que es justo lo que se quiere. */
#escena{ position:fixed; inset:0; z-index:0; width:100%; height:100%; will-change:filter; }

/* ------------------------------------------------------------------ velo
   La escena es de la portada. Pasada la portada estorba: detrás de una
   cuadrícula de tarjetas, una grúa y un edificio con sus cotas flotando compiten
   con el texto y no gana nadie. Este velo la retira —no la borra— para que el
   fondo siga teniendo profundidad pero deje de discutir con lo que hay que leer.

   Se pinta encima del lienzo y debajo del contenido, y sólo se le anima la
   opacidad, que es lo que el navegador mueve sin recalcular la página. */
#velo{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:
    radial-gradient(125% 95% at 64% 38%, rgba(var(--velo-rgb),.42), rgba(var(--velo-rgb),.97) 72%),
    var(--grafito);
  will-change:opacity;
}

/* Sombra de pie de portada: sube desde abajo lo justo para que el titular
   pequeño se lea sobre lo que pase por detrás. Sustituye al velo lateral, que
   con un titular anclado abajo tapaba escena sin proteger nada. */
#velo-pie{
  position:fixed; left:0; right:0; bottom:0; height:62vh; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(var(--velo-rgb),.50) 46%, rgba(var(--velo-rgb),.86));
  transition:opacity .8s var(--e-cine);
}
body.leyendo #velo-pie{ opacity:0; }

/* ------------------------------------------------------- fondo de vídeo
   Metraje a sangre tratado como lámina al principio —azul de plano, sin color,
   retícula encima— que se va limpiando conforme se baja. Las cuatro capas se
   animan sólo con `opacity`, `filter` y `transform`, que es lo que el navegador
   sabe mover sin volver a calcular la página. */
.fondo-v{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--grafito); }
.fondo-v > *{ position:absolute; inset:0; display:block; }
.fondo-v__cine{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.10); transform-origin:52% 46%;
  will-change:filter, transform;
}
/* El velo de plano: azul acero por encima del metraje, no un tinte del vídeo,
   para que las sombras no se laven. */
.fondo-v__azul{
  background:
    linear-gradient(180deg, rgba(19,18,15,.55) 0%, rgba(79,91,113,.30) 42%, rgba(19,18,15,.72) 100%),
    var(--acero-hi);
  mix-blend-mode:color; opacity:.88;
}
/* Retícula de replanteo, del mismo paso que las láminas técnicas del sitio. */
.fondo-v__reja{
  opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,  rgba(180,199,228,.30) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(180,199,228,.30) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(200,216,240,.60) 0 1px, transparent 1px 288px),
    repeating-linear-gradient(90deg, rgba(200,216,240,.60) 0 1px, transparent 1px 288px);
  -webkit-mask-image:radial-gradient(135% 105% at 50% 45%, #000 55%, transparent 96%);
          mask-image:radial-gradient(135% 105% at 50% 45%, #000 55%, transparent 96%);
}
/* Viñeta fija + la sombra que entra al pasar la portada, donde manda el texto. */
.fondo-v__sombra{
  opacity:.10;
  background:
    radial-gradient(130% 100% at 62% 42%, transparent 34%, rgba(19,18,15,.80) 100%),
    linear-gradient(90deg, rgba(19,18,15,.86) 0%, rgba(19,18,15,.40) 46%, transparent 74%),
    var(--grafito);
}
@media (max-width:900px){
  /* En estrecho el texto va encima del vídeo, no al lado: la sombra se reparte
     de arriba abajo en vez de pesar a la izquierda. */
  .fondo-v__sombra{
    background:
      radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(19,18,15,.82) 100%),
      linear-gradient(180deg, rgba(19,18,15,.80) 0%, rgba(19,18,15,.42) 40%, rgba(19,18,15,.86) 100%),
      var(--grafito);
  }
}

/* ------------------------------------------------------------- apertura */
#apertura{
  position:fixed; inset:0; z-index:300;
  background:var(--grafito);
  display:grid; place-items:center;
  transition:opacity 1.3s var(--e-cine), visibility 1.3s;
}
#apertura.fuera{ opacity:0; visibility:hidden; pointer-events:none; }
.apertura__caja{ width:min(460px, 80vw); }
.apertura__marca{
  font-family:var(--f-display);
  font-size:clamp(26px, 4.2vw, 44px);
  letter-spacing:.03em;
  color:var(--caliza);
  margin-bottom:6px;
}
.apertura__lema{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ocre); margin-bottom:30px;
}
.apertura__barra{ height:1px; background:rgba(26,24,21,.12); position:relative; }
#apertura-avance{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:var(--caliza); transition:transform .3s linear;
}
.apertura__pie{
  display:flex; justify-content:space-between; margin-top:12px;
  font-family:var(--f-cota); font-size:10px; letter-spacing:.2em; color:var(--tinta-3);
}
#apertura-pct{ color:var(--ocre-hi); }

/* --------------------------------------------------------- barra mínima */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:26px var(--margen);
  pointer-events:none;
}
.barra > *{ pointer-events:auto; }

.marca{ line-height:1.15; }
.marca__n{
  display:block; font-family:var(--f-display); font-size:19px;
  letter-spacing:.07em; color:var(--caliza);
}
.marca__p{
  display:block; font-family:var(--f-cota); font-size:8.5px;
  letter-spacing:.3em; color:var(--tinta-3); margin-top:3px;
}

.nav{ display:flex; gap:26px; align-items:center; }
.nav a{
  font-family:var(--f-cota); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3);
  transition:color .5s var(--e-cine);
}
.nav a:hover, .nav a.activo{ color:var(--caliza); }
.nav a.activo{ color:var(--ocre-hi); }

.barra__acc{ display:flex; align-items:center; gap:14px; }

/* ------------------------------------------------- cajetín de lectura
   Como el cajetín de una lámina: una franja a pie de página con el estado
   de la escena, la escala y el avance. Nunca se cruza con el contenido. */
.tablero{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:clamp(12px,2vw,30px);
  padding:10px var(--margen) 11px;
  background:linear-gradient(180deg, rgba(var(--velo-rgb),0), rgba(var(--velo-rgb),.9) 42%, rgba(var(--velo-rgb),.97));
  border-top:1px solid var(--linea-2);
  pointer-events:none;
  font-family:var(--f-cota); font-size:9px; letter-spacing:.2em; color:var(--tinta-3);
  transition:opacity .8s var(--e-cine), transform .8s var(--e-cine);
}
.tablero.retirada{ opacity:0; transform:translateY(100%); }
.tablero b{ color:var(--acero-hi); font-weight:400; }
.tablero .ocre{ color:var(--ocre-hi); margin-left:auto; }
.tablero__t{ color:var(--tinta-3); opacity:.6; }
.tablero__sep{ width:1px; height:12px; background:var(--linea); }

/* Secuencia de estados, en línea */
.estados{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); }
.estado{
  display:flex; align-items:center; gap:8px;
  color:var(--tinta-3); transition:color .8s var(--e-cine);
}
.estado i{
  width:10px; height:1px; background:currentColor; display:block;
  transition:width .8s var(--e-cine);
}
.estado.on{ color:var(--ocre-hi); }
.estado.on i{ width:26px; }
.estado.hecho{ color:var(--acero-hi); }

/* Etiquetas de cota proyectadas desde la escena 3D */
.cota-flotante{
  position:fixed; z-index:60; pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--f-cota); font-size:9.5px; letter-spacing:.16em;
  color:var(--acero-hi);
  padding:3px 8px;
  border:1px solid rgba(147,164,190,.28);
  background:rgba(var(--velo-rgb),.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .7s var(--e-cine);
}
.cota-flotante.ver{ opacity:1; }

/* ================================================================ layout */
main{ position:relative; z-index:10; }

.velo{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--velo-rgb),.72) 0%, rgba(var(--velo-rgb),.30) 22%,
    rgba(var(--velo-rgb),.30) 62%, rgba(var(--velo-rgb),.86) 100%);
}

.seccion{
  position:relative;
  padding:clamp(96px,15vh,180px) var(--margen);
}
.seccion--alta{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.seccion--solida{
  background:linear-gradient(180deg, rgba(var(--velo-rgb),.30), rgba(var(--velo-rgb),.62) 26%, rgba(var(--velo-rgb),.72));
}

.cab{ margin-bottom:clamp(40px,7vh,84px); }
.cab__fila{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.cab__fila .cota-linea{ width:clamp(40px,7vw,110px); }
.cab__t{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px,5.6vw,78px); line-height:1.02; letter-spacing:-.015em;
  color:var(--caliza); max-width:19ch;
}
.cab__t em{ font-style:italic; color:var(--ocre-hi); }
.cab__d{
  margin-top:24px; max-width:56ch;
  font-size:clamp(15px,1.25vw,17.5px); line-height:1.72; color:var(--tinta-2);
}

/* ------------------------------------------------------------- portada */
.portada{
  min-height:100vh;
  display:grid; grid-template-rows:1fr auto;
  padding:clamp(120px,20vh,220px) var(--margen) 34px;
}
.portada__centro{ display:flex; flex-direction:column; justify-content:center; max-width:1080px; }
.portada__fila{ display:flex; align-items:center; gap:16px; margin-bottom:30px; }
.portada__t{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(46px,9.6vw,152px); line-height:.94; letter-spacing:-.025em;
  color:var(--caliza);
}
.portada__t em{ font-style:italic; color:var(--ocre-hi); }
.portada__p{
  margin-top:30px; max-width:50ch;
  font-size:clamp(15px,1.35vw,19px); line-height:1.68; color:var(--tinta-2);
}
.portada__acc{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.portada__pie{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:26px; padding-top:24px; padding-right:180px; border-top:1px solid var(--linea-2);
}
.ciudades{ display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px); }
.ciudades span{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta-3);
}
.bajar{ display:flex; align-items:center; gap:12px; }
.bajar i{
  display:block; width:1px; height:38px;
  background:linear-gradient(180deg, var(--ocre), transparent);
  animation:cae 2.6s var(--e-cine) infinite;
}
@keyframes cae{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  51%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------------------------------------------------- ciclo / servicios */
.ciclo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
        background:var(--linea-2); border-top:1px solid var(--linea-2); border-left:1px solid var(--linea-2); }
.etapa{
  position:relative;
  background:rgba(var(--velo-rgb),.86);
  padding:34px 30px 30px;
  transition:background .7s var(--e-cine);
}
.etapa:hover{ background:rgba(38,35,29,.94); }
.etapa::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ocre); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--e-cine);
}
.etapa:hover::after{ transform:scaleX(1); }
.etapa__c{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
.etapa__n{
  font-family:var(--f-display); font-size:26px; color:var(--caliza); margin-bottom:8px;
}
.etapa__s{
  font-size:14.5px; color:var(--ocre-hi); margin-bottom:14px; font-style:italic;
  font-family:var(--f-display); font-size:17px;
}
.etapa__b{ font-size:14.4px; line-height:1.66; color:var(--tinta-2); margin-bottom:20px; }
.etapa__e{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.etapa__e li{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--f-cota); font-size:10px; letter-spacing:.1em; color:var(--tinta-3);
}
.etapa__e li::before{ content:""; width:5px; height:1px; background:var(--acero); flex:none; }

/* ------------------------------------------------------------- proceso */
.proceso{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,48px); }
.paso{ position:relative; padding-top:26px; }
.paso::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--linea);
}
.paso::after{
  content:""; position:absolute; top:-3px; left:0; width:7px; height:7px;
  background:var(--ocre); transform:rotate(45deg);
}
/* ⚠ El número grande del paso llevaba `--grafito-humo`, que en oscuro era un
   gris apenas más claro que el fondo —discreto— y en claro pasó a ser arena
   pálida sobre papel: 1,45 sobre 1, invisible. Lo discreto se invierte igual
   que todo lo demás: en claro no se sube el blanco, se baja la tinta.
   (Y de paso: puse el color nuevo al principio de la regla y esta misma línea
   lo pisaba dos después. Una regla con dos `color` no avisa de nada.) */
.paso__n{
  font-family:var(--f-display); font-size:56px; line-height:1;
  color:var(--ink-3); margin-bottom:12px;
}
.paso__t{ font-family:var(--f-display); font-size:25px; color:var(--caliza); margin-bottom:6px; }
.paso__p{ font-family:var(--f-cota); font-size:9.5px; letter-spacing:.18em;
          text-transform:uppercase; color:var(--acero-hi); margin-bottom:14px; }
.paso__b{ font-size:14.4px; line-height:1.66; color:var(--tinta-2); }

/* -------------------------------------------------------------- cartera */
.filtros{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center;
  padding-bottom:22px; margin-bottom:34px; border-bottom:1px solid var(--linea-2);
}
.filtro-grupo{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.filtro-grupo > span{
  font-family:var(--f-cota); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-3); margin-right:8px;
}
.filtro{
  padding:8px 15px; border:1px solid var(--linea-2);
  font-family:var(--f-cota); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3);
  transition:color .45s var(--e-cine), border-color .45s var(--e-cine), background .45s var(--e-cine);
}
.filtro:hover{ color:var(--caliza); border-color:var(--linea); }
.filtro.on{ color:var(--grafito); background:var(--caliza); border-color:var(--caliza); }
.filtro-cuenta{ margin-left:auto; font-family:var(--f-cota); font-size:10px;
                letter-spacing:.16em; color:var(--acero-hi); }

.rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:clamp(16px,2vw,30px); }
@media (min-width:1240px){ .rejilla{ grid-template-columns:repeat(3,1fr); } }

.tarjeta{
  position:relative; text-align:left; width:100%;
  border:1px solid var(--linea-2);
  background:rgba(var(--velo-rgb),.72);
  overflow:hidden;
  transition:border-color .7s var(--e-cine), transform .7s var(--e-cine), background .7s var(--e-cine);
}
.tarjeta:hover{ border-color:rgba(165,25,28,.5); transform:translateY(-4px); background:rgba(30,27,22,.86); }
.tarjeta.oculta{ display:none; }
.tarjeta__l{ display:block; position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--grafito-2); }
.tarjeta__l svg, .tarjeta__l img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s var(--e-cine), opacity .7s; }
.tarjeta:hover .tarjeta__l svg, .tarjeta:hover .tarjeta__l img{ transform:scale(1.04); }
.tarjeta__etq{
  position:absolute; top:12px; left:12px;
  padding:4px 10px; background:rgba(var(--velo-rgb),.86);
  border:1px solid rgba(147,164,190,.24);
  font-family:var(--f-cota); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acero-hi);
}
.tarjeta__etq[data-e="en obra"]{ color:var(--ocre-hi); border-color:rgba(165,25,28,.4); }
/* 4A7A3A daba justo 4,50 sobre papel puro, pero la etiqueta va sobre una
   cartulina translúcida y medía 4,45. Un paso más de tinta. */
.tarjeta__etq[data-e="en venta"]{ color:#3E6B30; border-color:rgba(62,107,48,.40); }
.tarjeta__c{ display:block; padding:22px 22px 26px; }
.tarjeta__n{ display:block; font-family:var(--f-display); font-size:26px; line-height:1.15;
             color:var(--caliza); margin-bottom:5px; }
.tarjeta__z{ display:block; font-family:var(--f-cota); font-size:9.5px; letter-spacing:.16em;
             text-transform:uppercase; color:var(--tinta-3); margin-bottom:14px; }
.tarjeta__r{ display:block; font-size:14px; line-height:1.62; color:var(--tinta-2); margin-bottom:18px; }
.tarjeta__d{ display:flex; gap:26px; padding-top:14px; border-top:1px solid var(--linea-2); }
.tarjeta__d > span{ display:block; }
.tarjeta__d b{ display:block; font-family:var(--f-cota); font-size:13px; color:var(--caliza); font-weight:400; }
.tarjeta__d span{ display:block; font-family:var(--f-cota); font-size:8.5px;
                  letter-spacing:.14em; line-height:1.4; color:var(--tinta-3); }
.tarjeta__ver{
  position:absolute; right:20px; bottom:22px;
  font-family:var(--f-cota); font-size:9.5px; letter-spacing:.16em; color:var(--ocre-hi);
  opacity:0; transform:translateX(-6px);
  transition:opacity .6s var(--e-cine), transform .6s var(--e-cine);
}
.tarjeta:hover .tarjeta__ver{ opacity:1; transform:none; }

.vacio{
  padding:60px 0; text-align:center;
  font-family:var(--f-cota); font-size:11px; letter-spacing:.2em; color:var(--tinta-3);
}

/* -------------------------------------------------------------- destacado */
.destacado{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
            gap:clamp(24px,4vw,66px); align-items:center; }
.destacado__l{ border:1px solid var(--linea-2); background:var(--grafito-2); margin:0; }
.destacado__l svg{ width:100%; height:auto; display:block; }
.destacado__ficha{ list-style:none; margin:26px 0 0; padding:0; }
.destacado__ficha li{
  display:flex; justify-content:space-between; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--linea-2);
  font-family:var(--f-cota); font-size:11px; letter-spacing:.06em;
}
.destacado__ficha b{ color:var(--caliza); font-weight:400; }
.destacado__ficha span{ color:var(--tinta-3); }

/* ---------------------------------------------------------- indicadores */
.indicadores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(20px,3vw,44px);
  padding:clamp(38px,6vh,66px) 0;
  border-top:1px solid var(--linea-2); border-bottom:1px solid var(--linea-2);
}
.ind b{
  display:block; font-family:var(--f-display); font-size:clamp(38px,5vw,68px);
  line-height:1; color:var(--caliza);
}
.ind b i{ font-style:normal; font-size:.42em; color:var(--ocre-hi); margin-left:4px; }
.ind span{
  display:block; margin-top:10px;
  font-family:var(--f-cota); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* --------------------------------------------------------- testimonios */
.testimonios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,42px); }
.testimonio{ padding-top:26px; border-top:1px solid var(--linea-2); }
.testimonio q{
  display:block; font-family:var(--f-display); font-size:clamp(19px,1.7vw,25px);
  line-height:1.42; color:var(--caliza); font-style:italic; margin-bottom:20px;
}
.testimonio q::before{ content:"«"; color:var(--ocre); margin-right:2px; }
.testimonio q::after{ content:"»"; color:var(--ocre); margin-left:2px; }
.testimonio b{ display:block; font-size:14.5px; color:var(--tinta); font-weight:500; }
.testimonio span{ font-family:var(--f-cota); font-size:9.5px; letter-spacing:.14em; color:var(--tinta-3); }

/* -------------------------------------------------------------- contacto */
.contacto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
           gap:clamp(28px,5vw,80px); align-items:start; }
.contacto__datos{ display:flex; flex-direction:column; gap:26px; }
.dato-bloque span{
  display:block; font-family:var(--f-cota); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:7px;
}
.dato-bloque a, .dato-bloque p{ font-size:16px; color:var(--caliza); margin:0; }
.dato-bloque a:hover{ color:var(--ocre-hi); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--f-cota); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-3);
}
.campo input, .campo select, .campo textarea{
  background:transparent; border:0; border-bottom:1px solid var(--linea);
  padding:11px 0; color:var(--tinta); font-size:15px; outline:none;
  transition:border-color .5s var(--e-cine);
  border-radius:0;
}
.campo textarea{ resize:vertical; min-height:92px; }
.campo select{ cursor:pointer; }
.campo select option{ background:var(--grafito-2); color:var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--ocre); }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--tinta-3); }
.campo.mal input, .campo.mal select, .campo.mal textarea{ border-color:#c9534a; }
.campo__err{
  font-family:var(--f-cota); font-size:9.5px; letter-spacing:.12em; color:#d9756c;
  min-height:13px; opacity:0; transition:opacity .35s;
}
.campo.mal .campo__err{ opacity:1; }

.form__pie{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
            justify-content:space-between; gap:16px; margin-top:8px; }
.form__nota{ font-family:var(--f-cota); font-size:9px; letter-spacing:.12em; color:var(--tinta-3); max-width:34ch; }
.form__ok{
  grid-column:1 / -1; padding:18px 20px; border:1px solid rgba(154,196,139,.4);
  background:rgba(154,196,139,.07); color:#bcd9ae; font-size:14.5px;
}
.form__ok[hidden]{ display:none; }

/* -------------------------------------------------------------- WhatsApp */
.wa{
  position:fixed; right:var(--margen); bottom:118px; z-index:90;
  display:flex; align-items:center; gap:11px;
  padding:12px 18px 12px 14px;
  background:var(--grafito-2); border:1px solid rgba(154,196,139,.34);
  transition:transform .6s var(--e-cine), border-color .6s, background .6s;
}
.wa:hover{ transform:translateY(-3px); border-color:#9ac48b; background:#1f2a1c; }
.wa svg{ width:19px; height:19px; color:#9ac48b; flex:none; }
.wa span{ font-family:var(--f-cota); font-size:9.5px; letter-spacing:.16em; color:var(--tinta-2); }

/* ------------------------------------------------------------------- pie */
/* ⚠ **El pie se queda oscuro, y eso obliga a escribir sus colores.**
   Una página de papel entera cansa si no tiene un remate: el pie oscuro cierra
   el documento y separa el contenido de los avisos legales, que es exactamente
   lo que hace el pie de una revista.

   Pero entonces **no puede usar las variables del tema**: al pasar el sitio a
   claro, `--caliza` y `--tinta-*` se volvieron tinta oscura y el pie entero se
   quedó en negro sobre negro. Medido, los enlaces daban 2,28 sobre 1 y el aviso
   de copyright 3,25. Aquí abajo van escritos. */
.pie{
  position:relative; z-index:10;
  padding:52px var(--margen) 62px;
  border-top:1px solid rgba(233,224,206,.10);
  background:rgba(13,12,10,.96);
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; justify-content:space-between;
}
.pie__m{ font-family:var(--f-display); font-size:26px; color:#E9E0CE; }
.pie__m span{ display:block; font-family:var(--f-cota); font-size:8.5px;
              letter-spacing:.28em; color:rgba(233,224,206,.62); margin-top:5px; }
.pie__nav{ display:flex; flex-wrap:wrap; gap:20px; }
.pie .sub{ color:rgba(233,224,206,.80); }
.pie .sub:hover{ color:#E9E0CE; }
.pie .sub::after{ background:rgba(233,224,206,.55); }
.pie__l{ font-family:var(--f-cota); font-size:9.5px; letter-spacing:.16em; color:rgba(233,224,206,.62); text-align:right; }

/* ------------------------------------------------------------------ ficha */
.ficha{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,44px);
  background:rgba(9,8,7,.90);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; visibility:hidden;
  /* ⚠ **`pointer-events` además de `visibility`, y no en lugar de.**

     `visibility` está en la transición, y una transición de `visibility` no se
     interpola: mantiene el valor de partida hasta el final. Así que al **cerrar**
     la ficha, esta capa de pantalla completa sigue siendo visible —y por tanto
     clicable— durante los seiscientos milisegundos que dura el cierre. Durante
     ese rato la página de debajo no responde a nada.

     Es un fallo que no deja rastro: no hay error, y para cuando el visitante
     vuelve a pulsar ya funciona. Sólo se nota como «a veces el primer clic no
     va». `pointer-events` no está en la transición, así que se apaga en el acto. */
  pointer-events:none;
  transition:opacity .6s var(--e-cine), visibility .6s;
}
.ficha.abierta{ opacity:1; visibility:visible; pointer-events:auto; }
.ficha__caja{
  width:min(1180px, 100%); max-height:92vh; overflow-y:auto;
  background:var(--grafito-2); border:1px solid var(--linea);
  transform:translateY(20px); transition:transform .7s var(--e-salida);
}
.ficha.abierta .ficha__caja{ transform:none; }
.ficha__cerrar{
  position:sticky; top:0; margin-left:auto; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:14px 18px; background:var(--grafito-2);
  font-family:var(--f-cota); font-size:10px; letter-spacing:.18em; color:var(--tinta-3);
}
.ficha__cerrar:hover{ color:var(--ocre-hi); }
.ficha__cuerpo{ padding:0 clamp(20px,3.2vw,46px) clamp(28px,4vw,50px); }
.ficha__cab{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
             gap:18px; padding-bottom:22px; border-bottom:1px solid var(--linea-2); margin-bottom:26px; }
.ficha__n{ font-family:var(--f-display); font-size:clamp(30px,3.6vw,50px); color:var(--caliza); }
.ficha__z{ font-family:var(--f-cota); font-size:10px; letter-spacing:.18em;
           text-transform:uppercase; color:var(--acero-hi); margin-top:8px; }
.ficha__galeria{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
                 gap:14px; margin-bottom:30px; }
.ficha__lam{ border:1px solid var(--linea-2); background:var(--grafito); }
.ficha__lam svg, .ficha__lam img{ width:100%; height:auto; display:block; }
.ficha__lam figcaption{
  padding:9px 12px; border-top:1px solid var(--linea-2);
  font-family:var(--f-cota); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3);
}
.ficha__cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
              gap:clamp(22px,3.4vw,52px); }
.ficha__tabla{ list-style:none; margin:0; padding:0; }
.ficha__tabla li{ display:flex; justify-content:space-between; gap:16px;
                  padding:12px 0; border-bottom:1px solid var(--linea-2);
                  font-family:var(--f-cota); font-size:11.5px; }
.ficha__tabla b{ color:var(--caliza); font-weight:400; }
.ficha__tabla span{ color:var(--tinta-3); }
.ficha__acc{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ------------------------------------------------------------ logotipos */
.marca{ display:block; line-height:1.15; }
.marca__logo{ display:block; height:30px; width:auto; max-width:none; }
.marca__p{ margin-top:5px; }
.apertura__logo{ display:block; width:100%; max-width:400px; height:auto; margin-bottom:16px; }
.pie__m{ display:block; }
.pie__logo{ display:block; height:30px; width:auto; max-width:none; margin-bottom:9px; }

/* ----------------------------------------------------------- tipologías */
.tipologias{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--linea-2);
  border-top:1px solid var(--linea-2); border-left:1px solid var(--linea-2);
}
.tipo{
  background:rgba(var(--velo-rgb),.86); padding:28px 24px 26px;
  transition:background .7s var(--e-cine);
}
.tipo:hover{ background:rgba(38,35,29,.94); }
.tipo__n{ font-family:var(--f-display); font-size:25px; color:var(--caliza); margin:12px 0 8px; }
.tipo__c{ font-size:14px; line-height:1.6; color:var(--tinta-2); margin:0; }

/* ----------------------------------------------------------- estándares */
.estandares{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,2.6vw,40px); margin-top:clamp(34px,5vh,60px);
}
.estandar{ padding-top:22px; border-top:1px solid var(--linea-2); }
.estandar__s{
  display:block; font-family:var(--f-cota); font-size:20px; letter-spacing:.12em;
  color:var(--rojo-hi); font-weight:400; margin-bottom:4px;
}
.estandar__n{
  display:block; font-family:var(--f-cota); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acero-hi); margin-bottom:12px;
}
.estandar__c{ font-size:14px; line-height:1.62; color:var(--tinta-2); margin:0; }

/* ------------------------------------------------- marca de demostración */
.tarjeta__demo{
  position:absolute; top:12px; right:12px;
  padding:4px 9px; background:rgba(165,25,28,.92);
  font-family:var(--f-cota); font-size:7.5px; letter-spacing:.2em; color:#F6F1E7;
}
.aviso-demo{
  margin-top:20px; max-width:60ch;
  padding:12px 16px; border-left:2px solid var(--rojo);
  background:rgba(165,25,28,.07);
  font-family:var(--f-cota); font-size:10.5px; letter-spacing:.05em;
  line-height:1.75; color:var(--tinta-2);
}
.aviso-demo code{ color:var(--acero-hi); }
.aviso-demo b{ color:var(--caliza); font-weight:400; }
.pendiente{ color:var(--tinta-3); }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 1080px){
  .destacado, .contacto, .ficha__cols{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .esquina--ai{ display:none; }
  .portada__pie{ padding-right:0; }
}
@media (max-width: 720px){
  .marca__logo{ height:22px; }
  .apertura__logo{ max-width:280px; }
  .tablero__sep, .tablero > span:not(.ocre){ display:none; }
  .tablero .estado:not(.on){ display:none; }
  .tablero{ font-size:8.5px; }
  .portada__pie{ flex-direction:column; align-items:flex-start; gap:14px; }
  .portada{ padding-bottom:168px; }
  .ciudades{ gap:12px; }
  .ciudades span{ font-size:9px; }
  .bajar{ display:none; }
  .form{ grid-template-columns:1fr; }
  .wa{ bottom:104px; padding:11px 14px; }
  .wa span{ display:none; }
  .cota-flotante{ display:none; }
  .portada{ padding-top:130px; }
}


/* ==========================================================================
   Registro editorial  ·  v2
   --------------------------------------------------------------------------
   El mismo sitio con la voz de la portada nueva: titulares más grandes, líneas
   más apretadas y una cursiva cálida para la palabra que lleva el peso. Es el
   ajuste que quita el salto entre la puerta y lo que hay detrás.
   ========================================================================== */

.cab__t{
  font-size:var(--d-2);
  line-height:var(--d-alto);
  letter-spacing:var(--d-track);
}
.cab__t em{ font-style:italic; color:var(--ocre); }

.portada__titulo,
.hero__t{
  font-size:var(--d-1);
  line-height:var(--d-alto);
  letter-spacing:var(--d-track);
}

.cab__d{ max-width:58ch; }

/* Un filete de arena bajo el ojo de sección: pequeño, pero es lo que ata la
   sección con la puerta. */
.seccion__cab .cota-linea,
.cab__fila .cota-linea{ background:linear-gradient(90deg, var(--arena-2), transparent); }

.seccion--solida{ background-image:linear-gradient(180deg, rgba(100,72,63,.05), transparent 40%); }

/* ==========================================================================
   v3 · AFINADO VISUAL
   Lo de aquí abajo no añade elementos: le da cuerpo a los que ya había. El
   sitio tenía buena estructura y poca materia —todo era tinta sobre grafito—,
   y sobre un fondo tan oscuro las superficies necesitan que la luz venga de
   algún sitio para que se lean como superficies y no como huecos.
   ========================================================================== */

/* --------------------------------------------------- superficie de tarjeta
   Un degradado vertical muy corto y una raya de luz arriba: es lo mínimo para
   que una caja parezca un plano iluminado desde arriba en vez de un recorte.
   Nada de sombras exteriores, que sobre negro sólo ensucian. */
.etapa,
.estandar,
.tarjeta,
.tipo,
.paso{
  background-image:linear-gradient(180deg, rgba(26,24,21,.045), rgba(26,24,21,0) 38%);
}
.etapa{ background-color:rgba(var(--velo-rgb),.90); }
.etapa::before,
.tipo::before,
.tarjeta::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(26,24,21,.22) 22%, rgba(26,24,21,.05) 70%, transparent);
  pointer-events:none;
}
.tarjeta, .tipo{ position:relative; }
.etapa{ transition:background-color .7s var(--e-cine), transform .7s var(--e-cine); }
.etapa:hover{ background-color:rgba(38,35,29,.96); transform:translateY(-2px); }

/* ------------------------------------------------------- ritmo de sección
   Una línea de canto arriba de cada sección y un lavado cálido alterno. Con el
   fondo tridimensional retirado, las secciones se pegaban unas a otras y la
   página parecía un solo bloque larguísimo. */
.seccion + .seccion{ border-top:1px solid var(--linea-2); }
.seccion:nth-of-type(even){
  background-image:linear-gradient(180deg, rgba(100,72,63,.055), transparent 46%);
}

/* --------------------------------------------------- avance de lectura
   Un pelo rojo arriba del todo. Es la única cosa de la interfaz que dice
   cuánto queda, y cuesta un elemento y una transformación. */
#avance-linea{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--ocre), var(--ocre-hi));
  pointer-events:none;
}

/* ------------------------------------------------------------- flotantes
   WhatsApp y TERRA se quedan, pero dejan de gritar cuando hay texto detrás:
   caían justo encima de la última columna de tarjetas. Al acercar el ratón
   vuelven enteros. */
.wa, .terra-lanza{ transition:opacity .5s var(--e-cine), transform .5s var(--e-cine); }
body.leyendo .wa,
body.leyendo .terra-lanza{ opacity:.55; }
body.leyendo .wa:hover,
body.leyendo .terra-lanza:hover,
body.leyendo .wa:focus-visible,
body.leyendo .terra-lanza:focus-visible{ opacity:1; }

/* El cajetín describe la escena; con la escena retirada, sobra. */
.tablero.dormida{ opacity:0; transform:translateY(100%); }

/* --------------------------------------------------- cabecera a dos columnas
   En pantalla ancha el titular ocupaba la izquierda y a la derecha quedaba un
   agujero de media pantalla, con el párrafo colgando debajo en una columna
   estrecha. Puesto al lado, el bloque se lee como una portada de revista: el
   titular manda, el texto acompaña, y ya no sobra sitio.

   `align-items:end` es lo que lo hace funcionar: las dos columnas se alinean
   por la línea base de abajo, no por arriba, que es como se compone un titular
   grande junto a un párrafo pequeño. */
@media (min-width:1100px){
  .cab{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.82fr);
    column-gap:clamp(40px,6vw,110px);
    align-items:end;
  }
  .cab__fila{ grid-column:1 / -1; }
  .cab__t{ grid-column:1; margin:0; max-width:none; }
  .cab__d{
    grid-column:2; margin-top:0; max-width:46ch;
    padding-bottom:.45em;
  }
  .cab__d + .cab__d{ grid-column:2; margin-top:18px; padding-bottom:0; }
  /* Un filete que separa las dos columnas sin dibujar una raya entera. */
  .cab__d:first-of-type{
    border-left:1px solid var(--linea-2);
    padding-left:clamp(22px,2.4vw,38px);
  }
  .cab__d + .cab__d{ padding-left:clamp(22px,2.4vw,38px); }
}

/* ==========================================================================
   v6 · LA PORTADA CEDE SITIO A LA ANIMACIÓN
   --------------------------------------------------------------------------
   El titular ocupaba media pantalla a ciento cincuenta y dos píxeles, y detrás
   pasaba un viaje que nadie podía mirar. En una portada donde lo que cuenta es
   una casa levantándose, la tipografía tiene que hacer de pie de foto y no de
   cartel: decir quién es, dejar el paso, y estar donde no estorbe.

   Lo que se hace, por orden de lo que más se nota:
     · El titular baja de tamaño y se ancla **abajo a la izquierda**, en una
       esquina, en vez de plantarse en el centro del cuadro.
     · El párrafo largo desaparece de la portada. Lo que decía está entero dos
       pantallas más abajo, en «Identidad», que es donde alguien lo va a leer.
     · Y durante el primer acto —la casa vista desde arriba entre nubes— **el
       texto se aparta**: baja a un tercio de tinta y vuelve en cuanto se
       empieza a bajar. Tres segundos de imagen limpia.
   ========================================================================== */

.portada{
  /* De rejilla de dos filas a bloque anclado abajo: el centro del cuadro se
     queda para la escena. */
  align-content:end;
  padding-top:clamp(90px,16vh,150px);
}
.portada__centro{ max-width:min(52ch, 46vw); }
.portada__fila{ margin-bottom:18px; }
.portada__t{
  font-size:clamp(38px, 5.4vw, 84px);
  line-height:.98; letter-spacing:-.02em;
}
/* El párrafo de la portada sobra en pantalla ancha: es el mismo texto que abre
   la sección de identidad. En estrecho se queda, porque allí no hay escena que
   proteger —la casa se va al tercio de abajo— y el titular solo se queda corto. */
@media (min-width:900px){
  .portada__p{ display:none; }
  .portada__acc{ margin-top:26px; }
}
.portada__acc .btn{ padding:13px 20px; font-size:12px; }

/* El texto se aparta mientras se mira la casa desde arriba. Es opacidad y nada
   más: ni se mueve ni se reordena, porque cualquier desplazamiento en la
   portada se lee como un salto de maquetación. */
/* Se apaga **el titular, no los botones**. La opacidad de un padre no se puede
   deshacer desde un hijo, así que se apagan las piezas una por una: si se
   apagara el bloque entero, la llamada a la acción bajaría a un tercio de tinta
   durante los tres primeros segundos, que es justo cuando alguien decide si se
   queda. Y la pista de «desplazar» se queda como está: es la única instrucción
   de la pantalla. */
.portada__fila, .portada__t, .ciudades, .tablero{
  transition:opacity 1.1s var(--e-cine);
}
body.mirando .portada__fila,
body.mirando .portada__t{ opacity:.26; }
body.mirando .ciudades{ opacity:.45; }
body.mirando .tablero{ opacity:.35; }

@media (prefers-reduced-motion: reduce){
  .portada__fila, .portada__t, .ciudades, .tablero{ transition:none; }
  body.mirando .portada__fila,
  body.mirando .portada__t,
  body.mirando .ciudades{ opacity:1; }
}


/* ==========================================================================
   v6 · LA OBRA SE SIGUE VIENDO MIENTRAS SE LEE
   --------------------------------------------------------------------------
   Antes, el fondo de sección era casi opaco y el velo llegaba al 94%: en cuanto
   entraba el primer bloque de texto, la casa desaparecía. Ahora el fondo de
   sección es medio velo y **la legibilidad se resuelve donde toca**, debajo de
   cada bloque de texto, no apagando la pantalla entera.

   Es la diferencia entre bajar la luz de la habitación y encender un flexo.
   ========================================================================== */
/* ⚠ **El halo se queda sólo donde hay imagen detrás.**
   Existía para que el texto se leyera sobre la escena tridimensional cuando el
   sitio era oscuro. Con el sitio en papel, todos estos bloques —cabeceras,
   cuerpos de tarjeta, indicadores— van sobre un fondo liso y el halo no hace
   nada: sobra.

   Y en uno hacía daño. `.banda__d` va **sobre el vídeo de fondo**, con texto
   claro; al convertir el halo al color del papel quedó un resplandor blanco
   alrededor de cada letra clara, que se ve como un desenfoque mal hecho. Ahí el
   halo tiene que ser oscuro, como antes, porque el texto sigue siendo claro. */
.banda__d{
  text-shadow:0 1px 12px rgba(12,11,9,.92), 0 0 3px rgba(12,11,9,.85);
}
.cab{
  position:relative;
}
.cab::before{
  content:""; position:absolute; z-index:-1;
  inset:-26px -34px -30px -34px;
  background:radial-gradient(120% 100% at 20% 50%, rgba(var(--velo-rgb),.78), rgba(var(--velo-rgb),0) 76%);
  pointer-events:none;
}
/* Las tarjetas sí llevan fondo propio: encima de ellas hay listas y cotas
   pequeñas, y eso no se lee sobre una obra en movimiento por mucho halo. */
.etapa{ background-color:rgba(var(--velo-rgb),.93); }
.tarjeta{ background-color:rgba(var(--velo-rgb),.90); }
.estandar, .paso{ background-color:rgba(var(--velo-rgb),.55); padding-left:16px; padding-right:16px; }

/* --------------------------------------------------------- barra sobre obra
   Con el fondo apagado al 94% la barra se leía sobre negro y no hacía falta
   nada. Ahora que la construcción se sigue viendo, el logotipo y la navegación
   se cruzan con un tejado o con una nube, y una barra de navegación que a veces
   se lee y a veces no es peor que no tenerla.

   Un degradado corto que baja de la parte de arriba: no se ve como una banda
   —no tiene canto— y sube el contraste justo donde hay texto fijo. */
/* ⚠ **La cabecera cambia de bando al salir de la portada.**
   La portada es un vídeo a sangre; una franja de papel encima le corta la
   imagen por arriba y se lee como un error de maquetación. Y al revés: pasada
   la portada, sobre papel, una franja oscura sería una mancha.

   Así que por defecto —dentro de la portada— la cabecera es un velo oscuro con
   la tipografía clara, igual que el resto de la portada; y con `body.leyendo`,
   que es la clase que se pone al dejar atrás la portada, pasa a papel con
   tipografía de tinta.

   El umbral de esa clase estaba en «3,4 pantallas», que caía **en mitad** de una
   portada de ocho. Se corrigió en `sitio.js` para que sea el final real de la
   sección: si no, la cabecera se volvía papel encima del vídeo a media
   portada. */
.barra::before{
  content:""; position:absolute; inset:0 0 auto; height:150%;
  background:linear-gradient(180deg, rgba(12,11,9,.72) 0%, rgba(12,11,9,.34) 45%, transparent 100%);
  pointer-events:none; z-index:-1;
  transition:background .45s var(--e-cine);
}
body.leyendo .barra::before{
  background:linear-gradient(180deg, rgba(var(--velo-rgb),.94) 0%, rgba(var(--velo-rgb),.72) 45%, transparent 100%);
}
.barra{ isolation:isolate; }

/* Las dos versiones del logotipo ocupan el mismo hueco; se cruzan en opacidad
   al mismo ritmo que el fondo de la cabecera, así que el cambio no se ve como
   un salto. La segunda va superpuesta y por eso la primera marca el tamaño. */
.marca{ position:relative; display:inline-block; }
.marca__logo{ transition:opacity .45s var(--e-cine); }
.marca__logo--oscuro{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:left center; opacity:0;
}
body.leyendo .marca__logo--claro{ opacity:0; }
body.leyendo .marca__logo--oscuro{ opacity:1; }

/* Sobre la portada, la navegación va clara. Al pasar a papel, tinta. */
.barra a, .barra .sub{ color:rgba(233,224,206,.82); transition:color .45s var(--e-cine); }
.barra a:hover, .barra a.activo{ color:#F2ECDF; }
body.leyendo .barra a, body.leyendo .barra .sub{ color:var(--ink-2); }
body.leyendo .barra a:hover, body.leyendo .barra a.activo{ color:var(--ocre); }

/* El cajetín de abajo, por lo mismo. */
.tablero{
  background:linear-gradient(180deg, rgba(var(--velo-rgb),0), rgba(var(--velo-rgb),.86) 42%, rgba(var(--velo-rgb),.96));
}