/* ==========================================================================
   TERRACONSTRUXIONS — Gestión Inmobiliaria & Construcciones
   Sistema base: grafito profundo y piedra caliza cálida como materia,
   con los dos colores del logotipo como marca —rojo TERRA #A5191C y azul
   pizarra #4F5B71—. La monoespaciada queda reservada a cotas y datos.
   ========================================================================== */

:root{
  /* --- Materia --- */
  --grafito:      #13120F;
  --grafito-2:    #1B1915;
  --grafito-3:    #26231D;
  --grafito-humo: #302C25;

  --caliza:       #E9E0CE;
  --caliza-2:     #D3C7B0;
  --caliza-3:     #B4A88F;

  /* Rojo TERRA y azul pizarra, muestreados del logotipo */
  --rojo:         #A5191C;
  --rojo-hi:      #D0272B;
  --rojo-dim:     rgba(165,25,28,.16);

  /* Familia cálida, tomada del registro de la referencia. No sustituye al rojo
     de la marca: convive con él y le pone tierra debajo. */
  --arena:        #D9C3A5;
  --arena-2:      #BEA890;
  --tabaco:       #64483F;
  --tabaco-2:     #3A2A25;
  --noche:        #181211;

  --acero:        #4F5B71;
  --acero-hi:     #93A4BE;
  --acero-dim:    rgba(79,91,113,.20);

  /* Alias heredados: el acento de marca es el rojo, no el ocre */
  --ocre:         var(--rojo);
  --ocre-hi:      var(--rojo-hi);
  --ocre-dim:     var(--rojo-dim);

  /* --- Texto --- */
  --tinta:        #EFE9DC;
  --tinta-2:      #A99F8C;
  --tinta-3:      #746D5F;

  /* --- Trazo --- */
  --linea:        rgba(233,224,206,.13);
  --linea-2:      rgba(233,224,206,.07);
  --linea-cota:   rgba(147,164,190,.46);

  /* --- Tipografía --- */
  --f-display: "Instrument Serif", Georgia, serif;
  --f-texto:   "Archivo", system-ui, sans-serif;
  --f-cota:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Métrica --- */
  /* Escala de display. Más grande y con menos interlineado que antes: en un
     serif de mucho contraste, apretar las líneas es lo que lo convierte en
     titular editorial en vez de en párrafo grande. */
  --d-1: clamp(38px, 6.2vw, 92px);
  --d-2: clamp(30px, 4.4vw, 62px);
  --d-3: clamp(23px, 2.9vw, 38px);
  --d-alto: 1.04;
  --d-track: -.012em;

  --margen: clamp(20px, 4.4vw, 74px);
  --trazo: 1px;
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;

  /* --- Movimiento: lento, dirigido, de cámara --- */
  --e-cine: cubic-bezier(.65,0,.35,1);
  --e-salida: cubic-bezier(.16,1,.3,1);
  --e-suave: cubic-bezier(.4,0,.2,1);
}

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

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

body{
  margin:0;
  background:var(--grafito);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.1; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
canvas{ display:block; }
img{ max-width:100%; display:block; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--rojo); color:#F6F1E7; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--grafito); }
::-webkit-scrollbar-thumb{ background:var(--grafito-humo); }
::-webkit-scrollbar-thumb:hover{ background:var(--ocre); }

/* ==========================================================================
   Átomos
   ========================================================================== */

/* Dato técnico / cota */
.cota{
  font-family:var(--f-cota);
  font-size:10px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--acero-hi);
}
.cota--ocre{ color:var(--ocre-hi); }
.cota--tenue{ color:var(--tinta-3); }

/* Título de sección: serif de gran tamaño, muy ligero */
.display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.04;
}

/* Línea de cota horizontal con topes, el gesto gráfico de la marca */
.cota-linea{
  position:relative; height:1px; background:var(--linea-cota); width:100%;
}
.cota-linea::before,
.cota-linea::after{
  content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--linea-cota);
}
.cota-linea::before{ left:0; }
.cota-linea::after{ right:0; }

/* Botón */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px;
  border:var(--trazo) solid var(--linea);
  border-radius:var(--r-0);
  font-family:var(--f-cota);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta);
  background:transparent;
  transition:background .5s var(--e-cine), color .5s var(--e-cine),
             border-color .5s var(--e-cine), transform .5s var(--e-cine);
}
.btn:hover{
  background:var(--caliza); color:var(--grafito); border-color:var(--caliza);
}
.btn--ocre{
  background:var(--rojo); border-color:var(--rojo); color:#F6F1E7; font-weight:500;
}
.btn--ocre:hover{ background:var(--rojo-hi); border-color:var(--rojo-hi); color:#fff; }
.btn__f{ transition:transform .5s var(--e-cine); }
.btn:hover .btn__f{ transform:translateX(5px); }

/* Enlace subrayado que crece */
.sub{
  position:relative; display:inline-block;
  font-family:var(--f-cota); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-2);
  transition:color .45s var(--e-cine);
}
.sub::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--e-cine);
}
.sub:hover{ color:var(--ocre-hi); }
.sub:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Retícula de plano sobre el fondo */
.trama{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(147,164,190,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147,164,190,.06) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 8%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 8%, transparent 72%);
}

/* Grano de papel: aleja el render digital y acerca la lámina impresa */
.grano{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Aparición dirigida */
.rev{
  opacity:0; transform:translateY(22px);
  transition:opacity 1.2s var(--e-cine), transform 1.35s var(--e-salida);
}
.rev.dentro{ opacity:1; transform:none; }
.rev[data-r="1"]{ transition-delay:.10s; }
.rev[data-r="2"]{ transition-delay:.20s; }
.rev[data-r="3"]{ transition-delay:.30s; }
.rev[data-r="4"]{ transition-delay:.40s; }
.rev[data-r="5"]{ transition-delay:.50s; }

/* Cortina: revela por máscara, como quien retira el papel de calco */
.cortina{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--e-cine);
}
.cortina.dentro{ clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .cortina{ clip-path:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mono{ font-family:var(--f-cota); }