/* ==========================================================================
   v8 — el revelado
   Los tokens vienen de base.css. Aquí sólo está lo que esta versión añade.
   ========================================================================== */

/* La escena va fija, detrás de todo, y **no la contiene la portada**: la portada
   sólo la deja ver. Así el mismo lienzo puede seguir vivo cuando se pasa a las
   secciones de abajo, en vez de arrancarse y volver a montarse. */
#escena{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}

/* ------------------------------------------------------------- precarga */
.precarga{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--grafito);
  transition:opacity .9s var(--e-salida);
}
/* **`pointer-events:none` y no `visibility:hidden`.** Con visibilidad, la capa
   sigue siendo visible para el navegador durante toda la transición —la
   propiedad no cambia hasta el final— y luego el elemento se queda otro segundo
   en el documento antes de que lo quiten. Resultado: durante segundo y medio
   después de "entrar", la portada entera está tapada por un rectángulo
   invisible y ningún clic llega. Se detectó pulsando el botón del asistente y
   viendo que no pasaba nada; leyendo el código no se ve. */
.precarga.fuera{ opacity:0; pointer-events:none; }
.precarga__centro{ width:min(420px, 72vw); text-align:left; }
.precarga__cifra{
  font-family:var(--f-display); font-size:clamp(56px,9vw,110px); line-height:1;
  color:var(--caliza); margin:18px 0 20px;
}
.precarga__cifra i{ font-family:var(--f-cota); font-style:normal; font-size:.22em; color:var(--tinta-3); margin-left:.35em; }
.precarga__barra{ height:1px; background:var(--linea); position:relative; overflow:hidden; }
.precarga__barra i{
  position:absolute; inset:0; background:var(--caliza);
  transform:scaleX(0); transform-origin:left;
}
.precarga__nota{ margin-top:14px; }

/* ---------------------------------------------------------------- barra */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:clamp(16px,3vw,42px);
  padding:clamp(16px,2.4vh,26px) var(--margen);
}
/* Antes esta barra iba con `mix-blend-mode:difference`, que resuelve muy bien la
   legibilidad sobre un cielo que cambia de color… **hasta que hay un logotipo**.
   La diferencia invierte los colores, así que el rojo de la marca salía verde
   sobre el cielo del amanecer. Se cambia por un velo degradado arriba: menos
   listo y mucho más predecible, y la marca conserva su color. */
.barra::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(19,18,15,.72) 0%, rgba(19,18,15,.34) 52%, transparent 100%);
}
.barra__marca{
  display:block; flex:none; line-height:0;
  text-decoration:none;
}
.barra__marca img{
  display:block; height:clamp(26px, 3.2vh, 38px); width:auto;
}
/* Si el logotipo no está —porque todavía no se ha copiado la carpeta `img/`—,
   en vez de dejar el icono de imagen rota se escribe el nombre. Un sitio sin
   logotipo se ve austero; un sitio con una imagen rota se ve abandonado. */
.barra__marca--texto::after{
  content:"TERRACONSTRUXIONS";
  font-family:var(--f-cota); font-size:11px; letter-spacing:.2em;
  color:var(--tinta); line-height:1;
}
.barra__nav{ display:flex; gap:clamp(12px,2vw,26px); margin-left:auto; }
.barra__nav a{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-2); text-decoration:none;
  transition:color .3s var(--e-cine);
}
.barra__nav a:hover{ color:var(--tinta); }
.barra__ctrl{ display:flex; gap:4px; }
.pastilla{
  font:inherit; font-family:var(--f-cota); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta);
  background:transparent; border:1px solid var(--linea); border-radius:var(--r-1);
  padding:7px 11px; cursor:pointer;
  transition:opacity .3s var(--e-cine), border-color .3s var(--e-cine);
}
.pastilla.off{ opacity:.34; }

/* ============================================================== la portada
   El mecanismo es el mismo de la v7 y no había razón para tocarlo: sección de
   ocho pantallas, capa `sticky` de una, y ocho divisores vacíos detrás. */
.cine{ position:relative; z-index:10; }
.cine__cap{ height:100svh; }
.cine__fijo{
  position:sticky; top:0; height:100svh; overflow:hidden;
  /* Transparente: la película está en el lienzo fijo que hay debajo. Ponerle
     fondo aquí es taparla, y es un fallo que cuesta un minuto encontrar y sólo
     si se mira la pantalla. Ya pasó en la v7. */
  background:transparent;
  pointer-events:none;         /* para que el ratón llegue a la obra */
}
.cine__fijo button, .cine__fijo a{ pointer-events:auto; }

/* El velo pesa **lo justo para que el texto se lea**, y ni una décima más. Aquí
   ya se pasó dos veces: en la v6 con un 94 % que borraba la obra, y en la
   primera prueba de ésta, donde el velo y la viñeta se sumaban y la casa
   desaparecía. Ahora el texto lleva su propia sombra —que oscurece sólo detrás
   de las letras— y el velo puede ser mucho más flojo. */
.cine__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,18,15,.30) 0%, transparent 26%, transparent 54%, rgba(19,18,15,.66) 100%),
    linear-gradient(90deg, rgba(19,18,15,.40) 0%, rgba(19,18,15,.08) 40%, transparent 64%);
}

.cine__texto{
  position:absolute; left:0; bottom:clamp(104px, 18vh, 200px);
  padding:0 var(--margen); max-width:min(46ch, 52vw);
  transition:opacity .34s var(--e-cine), transform .34s var(--e-cine);
}
.cine__texto.cambiando{ opacity:0; transform:translateY(10px); }
.cine__titulo{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(34px, 5.1vw, 76px); line-height:1.02; letter-spacing:-.02em;
  color:var(--caliza); margin:14px 0 0;
  text-shadow:0 2px 26px rgba(19,18,15,.7);
}
.cine__titulo em{ font-style:italic; color:var(--ocre-hi); }
.cine__pie{
  margin-top:16px; max-width:46ch;
  font-size:clamp(14.5px, 1.2vw, 17px); line-height:1.7; color:var(--tinta-2);
  text-shadow:0 1px 14px rgba(19,18,15,.85);
}

/* El hueco de la derecha —doscientos píxeles— es para los botones flotantes. Sin
   él, el contador «01 / 08» cae justo debajo del lanzador de TERRA y dos cosas
   superpuestas son cero cosas. Ya pasó en la v7 con el conmutador de motores. */
.cine__pie-barra{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:0 calc(var(--margen) + 200px) clamp(24px,4vh,42px) var(--margen);
}
.cine__barra{ flex:1 1 auto; height:1px; background:rgba(233,224,206,.18); position:relative; }
.cine__barra i{ position:absolute; inset:0; background:var(--caliza); transform:scaleX(0); transform-origin:left; }

.looks{ display:flex; gap:2px; flex:none; }
.looks button{
  font:inherit; font-family:var(--f-cota); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-3);
  background:rgba(19,18,15,.5); border:1px solid var(--linea-2); border-radius:var(--r-1);
  padding:7px 10px; cursor:pointer;
  transition:color .3s var(--e-cine), background .3s var(--e-cine), border-color .3s var(--e-cine);
}
.looks button:hover{ color:var(--tinta); }
.looks button.on{ color:var(--grafito); background:var(--caliza); border-color:var(--caliza); }

/* ============================================================== secciones */
.bloque{
  position:relative; z-index:10;
  background:var(--grafito);
  padding:clamp(80px,14vh,180px) 0;
}
.bloque--linea{ border-top:1px solid var(--linea); }
.bloque__caja{ padding:0 var(--margen); max-width:1200px; }
.parrafo{
  margin-top:26px; max-width:62ch;
  font-size:clamp(15px,1.25vw,18px); line-height:1.8; color:var(--tinta-2);
}
.parrafo--nota{ margin-top:48px; color:var(--tinta-3); max-width:56ch; }
h2.d-2{ font-family:var(--f-display); font-weight:400; font-size:var(--d-2);
        line-height:var(--d-alto); letter-spacing:var(--d-track); color:var(--caliza); margin:16px 0 0; }
h2.d-1{ font-family:var(--f-display); font-weight:400; font-size:var(--d-1);
        line-height:var(--d-alto); letter-spacing:var(--d-track); color:var(--caliza); margin:0; }

.cifras{ list-style:none; padding:0; margin:64px 0 0;
         display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
         background:var(--linea); border:1px solid var(--linea); }
.cifras li{ background:var(--grafito); padding:28px 22px; }
.cifras b{ display:block; font-family:var(--f-display); font-weight:400;
           font-size:clamp(32px,3.6vw,54px); line-height:1; color:var(--caliza); }
.cifras span{ display:block; margin-top:10px; }

.lista{ list-style:none; padding:0; margin:56px 0 0;
        display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
        background:var(--linea); border:1px solid var(--linea); }
.lista li{ background:var(--grafito); padding:28px 24px 32px; }
.lista b{ font-family:var(--f-cota); font-size:10px; letter-spacing:.16em; color:var(--acero-hi); }
.lista h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(20px,1.9vw,27px);
           color:var(--caliza); margin:12px 0 10px; }
.lista p{ font-size:14.5px; line-height:1.7; color:var(--tinta-3); margin:0; }

.cierre{
  position:relative; z-index:10; background:var(--grafito);
  border-top:1px solid var(--linea);
  min-height:82svh; display:grid; align-content:center;
  padding:clamp(60px,10vh,120px) 0;
}
.enlace-grande{
  display:inline-block; margin-top:36px;
  font-family:var(--f-cota); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta); text-decoration:none;
  border-bottom:1px solid var(--linea); padding-bottom:8px;
  transition:border-color .35s var(--e-cine), color .35s var(--e-cine);
}
.enlace-grande:hover{ color:var(--ocre-hi); border-color:var(--ocre-hi); }

/* ======================================================= texto que entra
   Cada línea en su caja con `overflow:hidden`, y el interior desplazado hacia
   abajo: el texto asoma desde detrás de un borde en vez de encenderse. El
   escalón entre líneas es `--i`, que pone el JavaScript. */
.linea{ display:block; overflow:hidden; }
.linea__i{
  display:block;
  transform:translateY(102%);
  opacity:0;
  transition:transform .92s var(--e-salida), opacity .7s var(--e-salida);
  transition-delay:calc(var(--i) * 85ms);
}
.dentro .linea__i, .linea__i.dentro{ transform:translateY(0); opacity:1; }

/* Lo que no se parte en líneas entra entero, más discreto. */
[data-revelar]:not(.partido){
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--e-salida), transform .8s var(--e-salida);
}
[data-revelar]:not(.partido).dentro{ opacity:1; transform:none; }

/* ======================================================== botón de WhatsApp
   Va **encima** del lanzador de TERRA, no al lado: apilados verticalmente en el
   mismo borde se leen como dos maneras de hablar con la misma empresa; puestos
   en esquinas distintas se leen como dos cosas sin relación.

   Es un enlace de verdad —`wa.me`—, no un botón que llama a JavaScript: así
   funciona con el clic central, se puede copiar la dirección y sigue estando ahí
   si algún script falla. */
.flota-wa{
  position:fixed; right:var(--margen); bottom:108px; z-index:95;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px 10px 12px;
  background:var(--grafito-2); color:var(--tinta);
  border:1px solid var(--linea); border-radius:var(--r-1);
  text-decoration:none;
  transition:transform .5s var(--e-cine), border-color .4s var(--e-cine), color .4s var(--e-cine);
}
.flota-wa:hover{ transform:translateY(-3px); color:var(--caliza); border-color:rgba(233,224,206,.3); }
.flota-wa svg{ width:18px; height:18px; flex:none; color:var(--ocre-hi); }
.flota-wa b{
  font-family:var(--f-cota); font-size:10px; letter-spacing:.18em;
  font-weight:400; text-transform:uppercase;
}
/* Mientras el panel del asistente está abierto, el de WhatsApp estorba: son la
   misma decisión y sólo hace falta una a la vez. */
body.terra-abierto .flota-wa{ opacity:0; pointer-events:none; transform:translateY(8px); }

@media (max-width:900px){
  /* En estrecho no caben los dos con texto. WhatsApp se queda en icono. */
  .flota-wa{ bottom:96px; padding:11px; }
  .flota-wa b{ display:none; }
}

/* ============================================================ el cursor */
html.con-cursor, html.con-cursor *{ cursor:none !important; }
.cursor{ position:fixed; inset:0; z-index:300; pointer-events:none;
         transition:opacity .3s var(--e-cine); }
.cursor--fuera{ opacity:0; }
.cursor__anillo{
  position:fixed; top:0; left:0; width:34px; height:34px;
  border:1px solid rgba(233,224,206,.55); border-radius:50%;
  transition:border-color .35s var(--e-cine), background .35s var(--e-cine);
  will-change:transform;
}
.cursor__punto{
  position:fixed; top:0; left:0; width:4px; height:4px;
  background:var(--caliza); border-radius:50%;
  will-change:transform;
}
.cursor--iman .cursor__anillo{ border-color:var(--ocre-hi); background:rgba(208,39,43,.10); }
.cursor--pieza .cursor__anillo{ border-color:var(--acero-hi); }

.cursor__etiqueta{
  position:fixed; top:0; left:0;
  font-family:var(--f-cota); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafito); background:var(--acero-hi);
  padding:5px 9px; border-radius:var(--r-1);
  opacity:0; transform-origin:left top;
  transition:opacity .25s var(--e-cine);
  white-space:nowrap;
}
.cursor--pieza .cursor__etiqueta{ opacity:1; }

/* ============================================================== estrecho */
@media (max-width:900px){
  .cine__texto{ max-width:none; bottom:clamp(128px,21vh,210px); }
  .cine__velo{ background:linear-gradient(180deg, rgba(19,18,15,.55) 0%, transparent 28%, rgba(19,18,15,.92) 100%); }
  .barra__nav{ display:none; }
  /* Seis botones de look no caben en un móvil. Se dejan los tres que más
     cambian la imagen: el resto se elige solo, por capítulo. */
  .looks button:nth-child(n+4){ display:none; }
  .looks button{ padding:6px 8px; font-size:9px; }
}

/* ============================================== quien pidió menos movimiento
   Se apagan las transiciones y el texto aparece puesto. El postprocesado se
   queda: no es movimiento, es cómo se ve la imagen, y quitarlo empeoraría la
   página sin resolver nada de lo que la persona pidió. */
@media (prefers-reduced-motion: reduce){
  .linea__i{ transform:none; opacity:1; transition:none; }
  [data-revelar]:not(.partido){ opacity:1; transform:none; transition:none; }
  .cine__texto{ transition:none; }
  html.con-cursor, html.con-cursor *{ cursor:auto !important; }
  .cursor{ display:none; }
}