/* ===========================================================================
   JANA · IDENTIDAD 2026 · HOJA DE LA PORTADA
   ---------------------------------------------------------------------------
   Se carga DESPUES del <style> que index.html lleva dentro, y de ahi su poder:
   a igual especificidad gana la ultima declaracion, asi que esta hoja redefine
   el aspecto de la portada sin tocar las 1.870 lineas de abajo. Quitar la linea
   que la carga devuelve la portada anterior, intacta. Es el interruptor.

   El color NO esta aqui: la rampa oliva/mantequilla/neutro ya vivia en
   jana-ds.css y coincide hex por hex con el manual. Aqui estan la forma de la
   letra, el encabezado oliva y los bloques nuevos.

   Regla 90/9/1 — 90 % neutros, 9 % oliva, 1 % mantequilla. La mantequilla solo
   aparece sobre fondo oscuro: es su unico habitat legible.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · LA LETRA
   Las micro-etiquetas se abren a 0.22em y se tinen de oliva. Son el unico
   sitio donde la identidad usa mayusculas.
   --------------------------------------------------------------------------- */
/* El aire entre secciones. Eran 120 px arriba y 120 abajo por seccion: con once
   bloques eso solo ya son tres pantallas y media de nada. A 88 la pagina sigue
   respirando y se ahorra casi una pantalla entera. Solo afecta a la portada,
   que es la unica que carga esta hoja. */
:root{--e-seccion:clamp(56px,5.5vw,88px);}

.eyebrow,.mono{letter-spacing:.22em;font-weight:600;}
.eyebrow{font-size:13px;color:var(--oliva-600);text-transform:uppercase;}
.zona-oscura .eyebrow,.hero .eyebrow,.hero-eyebrow{color:var(--mant-300);}
.hero-eyebrow{letter-spacing:.22em;font-size:13px;}
.sec-title{font-weight:var(--peso-display);letter-spacing:-.02em;}
.sec-intro{font-weight:300;}

/* ---------------------------------------------------------------------------
   2 · EL ENCABEZADO, EN OLIVA
   Era una lamina de vidrio sobre el video. Ahora es una banda solida: la marca
   en blanco a la izquierda y el boton en mantequilla a la derecha.
   --------------------------------------------------------------------------- */
header{background:var(--oliva-700);backdrop-filter:none;border-bottom:1px solid var(--oliva-700);}
header[data-scroll="si"]{background:var(--oliva-700);box-shadow:0 1px 0 rgba(0,0,0,.18);border-bottom-color:var(--oliva-800);}
header .wrap{height:84px;}
.brand-link{border-right:1px solid rgba(255,255,255,.22);padding-right:clamp(14px,2vw,28px);}
.logo-mark{height:44px;}
nav.primary a.navlink{color:var(--oliva-100);font-size:15px;font-weight:400;letter-spacing:0;padding:8px 14px;}
nav.primary a.navlink:hover{background:rgba(255,255,255,.10);color:#fff;}
nav.primary .btn{background:var(--mant-300);color:var(--oliva-900);font-weight:600;padding:13px 20px;}
nav.primary .btn:hover{background:#fff;color:var(--oliva-900);box-shadow:none;transform:none;}
.menu-toggle span{background:#fff;}

/* ---------------------------------------------------------------------------
   3 · EL HERO, A COLOR
   El video en blanco y negro sale; entra la foto de Library Park a color, con
   el velo cargado a la izquierda para que el titular no pelee con la imagen.
   --------------------------------------------------------------------------- */
.hero{min-height:min(760px,calc(100vh - 84px));justify-content:center;}
.hero-media img{filter:none;}
.hero-media::after{background:linear-gradient(90deg,rgba(41,39,16,.94) 0%,rgba(41,39,16,.74) 46%,rgba(41,39,16,.10) 78%,rgba(41,39,16,0) 100%);}
.hero-grid{display:none;}
/* La maqueta pedia 96 px, pero su titular era "Del lote a las llaves" en una
   columna de 720. El nuestro tiene seis silabas mas: a 96 se partia en cinco
   lineas y se salia por abajo del hero. A 74, en una columna mas ancha, caben
   tres lineas y la foto vuelve a verse. */
.hero-headline{max-width:min(800px,94%);}
.hub-title{font-size:clamp(38px,5.2vw,74px);letter-spacing:-.03em;line-height:1.04;max-width:none;}
.hero-tagline{font-size:clamp(17px,1.5vw,21px);font-weight:300;color:var(--oliva-100);max-width:52ch;margin-top:28px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px;align-items:center;}
.hero .btn{padding:18px 28px;font-size:15px;font-weight:500;}
.hero .btn.acento{background:var(--mant-300);color:var(--oliva-900);}
.hero-credito{position:absolute;right:clamp(20px,5vw,40px);bottom:28px;z-index:2;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--oliva-200);}

/* ---------------------------------------------------------------------------
   4 · LA FRANJA DE CIFRAS
   Cuatro datos, cada uno comprobable. Es lo primero que se ve al bajar del
   hero: antes de cualquier argumento, el tamano de lo que hay detras.
   --------------------------------------------------------------------------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);background:var(--oliva-50);
  border-bottom:1px solid var(--oliva-200);}
.cifra{padding:clamp(28px,3.4vw,44px) clamp(18px,2.6vw,40px);border-right:1px solid var(--oliva-200);}
.cifra:last-child{border-right:0;}
.cifra .c-n{font-family:var(--fuente-display);font-weight:var(--peso-display);
  font-size:clamp(34px,4.2vw,52px);line-height:1;letter-spacing:-.02em;color:var(--n-900);}
.cifra .c-t{font-size:14px;font-weight:300;color:var(--n-600);margin-top:10px;line-height:1.45;}

/* ---------------------------------------------------------------------------
   5 · TARJETAS DE REGLA SUPERIOR
   El patron de la identidad: una regla de 1px arriba, el numero en oliva, el
   titulo en Regular y el cuerpo en gris. Sin caja, sin sombra, sin radio.
   --------------------------------------------------------------------------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);
  margin-top:clamp(40px,4.4vw,64px);}
.tarjeta{border-top:1px solid var(--n-900);padding-top:22px;}
.tarjeta b{display:block;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--oliva-500);}
.tarjeta h3{font-weight:var(--peso-h3);font-size:clamp(20px,2.1vw,24px);margin:12px 0 10px;
  letter-spacing:-.01em;}
.tarjeta p{font-size:16px;font-weight:300;line-height:1.6;color:var(--n-600);}

/* ---------------------------------------------------------------------------
   6 · EL INFORME DE SUELO, EN PANEL OLIVA
   Dos mitades: a la izquierda la propuesta y el buscador de verdad; a la
   derecha el caso de Chico Norte con las cuatro cifras que lo sostienen.
   --------------------------------------------------------------------------- */
#informe{background:var(--oliva-700);color:#fff;padding:0;}
#informe > .wrap{max-width:none;padding:0;}
.inf-2026{display:grid;grid-template-columns:1fr 1fr;}
.inf-izq{padding:clamp(56px,7vw,110px) clamp(20px,5vw,96px);}
.inf-der{padding:clamp(48px,7vw,110px) clamp(20px,5vw,96px);
  border-left:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:center;}
.inf-izq h2{font-weight:var(--peso-display);font-size:clamp(32px,4.4vw,60px);letter-spacing:-.02em;
  line-height:1.06;color:#fff;max-width:22ch;}
.inf-izq .sec-intro{color:var(--oliva-100);font-size:clamp(16px,1.4vw,20px);max-width:56ch;margin-top:26px;}
.inf-izq .inf-lista{list-style:none;margin-top:30px;display:grid;gap:14px;}
.inf-izq .inf-lista li{font-size:16px;font-weight:300;line-height:1.55;color:var(--oliva-100);
  padding-left:18px;position:relative;}
.inf-izq .inf-lista li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;
  background:var(--mant-300);}
.inf-izq .inf-lista li b{font-weight:500;color:#fff;}
.caso-cab{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.16em;color:var(--oliva-200);text-transform:uppercase;}
.caso-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px);margin-top:38px;}
.caso-dato .cd-n{font-family:var(--fuente-display);font-weight:var(--peso-display);
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.02em;white-space:nowrap;}
.caso-dato.destaca .cd-n{color:var(--mant-300);}
.caso-dato .cd-t{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-200);margin-top:8px;}
.caso-pie{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
  font-size:14px;font-weight:300;line-height:1.55;color:var(--oliva-200);}
.inf-precio{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);}
.inf-precio .ip-c{font-family:var(--fuente-display);font-weight:300;font-size:28px;color:#fff;}
.inf-precio .ip-p{font-size:14px;font-weight:300;color:var(--oliva-100);margin-top:4px;}
.inf-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
#informe .btn{padding:17px 26px;font-size:15px;font-weight:500;}
#informe .btn.acento{background:var(--mant-300);color:var(--oliva-900);}
#informe .btn.acento:hover{background:#fff;color:var(--oliva-900);}
#informe .btn.line{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;}
#informe .btn.line:hover{background:rgba(255,255,255,.12);color:#fff;}

/* ---------------------------------------------------------------------------
   7 · SERVICIOS — seis, en tres columnas
   Eran cuatro tarjetas con caja. El patron de la identidad es la regla
   superior, y a seis frentes entran en dos filas de tres.
   --------------------------------------------------------------------------- */
.svc-cuadricula{grid-template-columns:repeat(3,1fr);gap:clamp(34px,3.4vw,48px) clamp(24px,3vw,40px);}
.svc-tarjeta{border:0;border-top:1px solid var(--n-900);border-radius:0;background:none;
  padding:22px 0 0;box-shadow:none;}
.svc-tarjeta:hover{transform:none;box-shadow:none;}
.svc-tarjeta header{border:0;padding:0;background:none;display:flex;gap:12px;align-items:baseline;
  height:auto;}
.svc-tarjeta .svc-n{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--oliva-500);}
.svc-tarjeta .svc-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-400);}
.svc-tarjeta h3{font-weight:var(--peso-h3);font-size:clamp(20px,2.1vw,24px);margin:12px 0 10px;}
.svc-tarjeta p{font-size:16px;font-weight:300;line-height:1.6;color:var(--n-600);}

/* ---------------------------------------------------------------------------
   8 · METODO — las tres dimensiones
   3D blanco, 4D oliva claro, 5D oliva oscuro con la cifra en mantequilla: el
   degradado dice solo que son pasos de lo mismo.
   --------------------------------------------------------------------------- */
.dims-2026{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;}
.dim-t{padding:26px;background:var(--n-0);border:1px solid var(--oliva-200);}
.dim-t .d{font-family:var(--fuente-display);font-weight:var(--peso-display);font-size:clamp(34px,3.6vw,48px);
  line-height:1;color:var(--oliva-500);letter-spacing:-.02em;}
.dim-t .q{font-size:15px;font-weight:300;margin-top:10px;color:var(--n-700);}
.dim-t.media{background:var(--oliva-100);border-color:var(--oliva-200);}
.dim-t.media .d{color:var(--oliva-600);}
.dim-t.fuerte{background:var(--oliva-700);border-color:var(--oliva-700);}
.dim-t.fuerte .d{color:var(--mant-300);}
.dim-t.fuerte .q{color:var(--oliva-100);}

/* ---------------------------------------------------------------------------
   9 · LA TESIS
   Una sola frase a sangre completa sobre la foto de renovacion. Es lo unico de
   la pagina que no argumenta nada: solo dice para que existe la empresa.
   --------------------------------------------------------------------------- */
.tesis{position:relative;min-height:min(640px,78vh);display:grid;place-items:center;
  text-align:center;overflow:hidden;color:#fff;}
.tesis-media{position:absolute;inset:0;z-index:0;}
.tesis-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.tesis-media::after{content:'';position:absolute;inset:0;background:rgba(29,28,22,.72);}
.tesis-cuerpo{position:relative;z-index:1;padding:clamp(56px,8vw,110px) clamp(20px,8vw,200px);
  max-width:1100px;}
.tesis h2{font-weight:var(--peso-display);font-size:clamp(34px,5.6vw,76px);line-height:1.05;
  letter-spacing:-.025em;margin-top:24px;color:#fff;text-transform:none;}
.tesis h2 em{font-style:normal;color:var(--mant-300);}
.tesis p{font-size:clamp(16px,1.4vw,20px);font-weight:300;color:var(--n-200);margin-top:26px;
  max-width:56ch;margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------------------------------
   10 · COMO TRABAJAMOS — las dos modalidades
   Una clara y una oliva. La diferencia de fondo dice cuanto se delega.
   --------------------------------------------------------------------------- */
.modalidades{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(40px,4.4vw,56px);}
.moda{padding:clamp(32px,3.6vw,48px);background:var(--n-0);border:1px solid var(--oliva-200);}
.moda b{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--oliva-500);}
.moda h3{font-weight:300;font-size:clamp(26px,3vw,36px);margin:14px 0;letter-spacing:-.02em;}
.moda p{font-size:17px;font-weight:300;line-height:1.6;color:var(--n-600);}
.moda .pie{border-top:1px solid var(--n-200);margin-top:28px;padding-top:18px;font-size:15px;
  font-weight:500;color:var(--oliva-700);}
.moda.delegada{background:var(--oliva-700);border-color:var(--oliva-700);color:#fff;}
.moda.delegada b{color:var(--mant-300);}
.moda.delegada h3{color:#fff;}
.moda.delegada p{color:var(--oliva-100);}
.moda.delegada .pie{border-top-color:rgba(255,255,255,.25);color:var(--mant-300);}

/* ---------------------------------------------------------------------------
   11 · EL CIERRE
   Mas oscuro que el resto (oliva-900, no el negro neutro): el ultimo bloque de
   la pagina es de la marca, no del sistema.
   --------------------------------------------------------------------------- */
.contact{background:var(--oliva-900);}
.contact h2{font-weight:var(--peso-display);font-size:clamp(34px,5.4vw,70px);line-height:1.04;
  letter-spacing:-.025em;}
.contact .lead-copy{font-weight:300;font-size:clamp(16px,1.4vw,20px);color:var(--n-200);}
.contact .cd-v{font-weight:300;font-size:22px;}
.contact .cd-k{font-size:12px;letter-spacing:.2em;color:var(--oliva-300);}
footer{background:var(--oliva-900);}

/* El lockup pasó de 4:1 a 2,4:1 — ahora CONSTRUCCIONES va debajo, no al lado.
   Donde el tamaño lo fijaba el ANCHO, la pieza crecería 1,7 veces de alto. Se
   acota por alto y el ancho sale solo. */
.contact-brand{height:clamp(84px,7.5vw,108px);width:auto;max-width:none;margin-bottom:28px;}
.footer-brand img{height:clamp(68px,6vw,88px);width:auto;max-width:none;}

/* Las bandas claras alternan papel y oliva-50, no gris. */
#modalidades-sec{background:var(--oliva-50);}
#porque,#modalidades-sec{padding:var(--e-seccion) 0;}

/* Los tres casos de ejemplo del buscador van plegados: el que llega con un lote
   escribe su direccion y no los mira nunca. */
details.tool-ejemplos>summary{cursor:pointer;list-style:none;}
details.tool-ejemplos>summary::-webkit-details-marker{display:none;}
details.tool-ejemplos>summary:hover{color:var(--mant-300);}

/* ---------------------------------------------------------------------------
   12 · PANTALLAS ESTRECHAS
   --------------------------------------------------------------------------- */
@media (max-width:1080px){
  .cifras{grid-template-columns:repeat(2,1fr);}
  .cifra:nth-child(2){border-right:0;}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--oliva-200);}
  .svc-cuadricula,.tarjetas{grid-template-columns:repeat(2,1fr);}
  .inf-2026{grid-template-columns:1fr;}
  .inf-der{border-left:0;border-top:1px solid rgba(255,255,255,.18);}
}
@media (max-width:760px){
  .cifras{grid-template-columns:1fr;}
  .cifra{border-right:0;border-bottom:1px solid var(--oliva-200);}
  .cifra:last-child{border-bottom:0;}
  .svc-cuadricula,.tarjetas,.modalidades,.dims-2026,.caso-rejilla{grid-template-columns:1fr;}
  header .wrap{height:72px;}
  .logo-mark{height:36px;}
  .hero-credito{display:none;}
  /* El velo del hero carga a la izquierda, que en escritorio deja ver el
     edificio a la derecha. En un telefono no hay derecha: la bajada se cruza
     con la parte clara de la foto. Aqui el velo se endereza y cae de arriba
     abajo, que es como se lee la columna. */
  .hero-media::after{background:linear-gradient(180deg,rgba(41,39,16,.80) 0%,rgba(41,39,16,.88) 55%,rgba(41,39,16,.94) 100%);}
}