/* =============================================================
   NEUHAUS REAL ESTATE — sistema visual
   Traducción digital del Manual de Marca (MARCA NEUHAUS).
   Paleta, tipografía, jerarquías y sistema de láminas: manual.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Paleta — manual 07. Cinco colores. No agregar ninguno. */
  --verde:            #689288;  /* institucional · fondos de impacto y títulos */
  --verde-profundo:   #34504A;  /* secundario · tinta de lectura y fondos con texto */
  --arena:            #C9A66B;  /* acento · texto sobre oscuros, relleno sobre claros */
  --parchment:        #F6F4EF;  /* fondo claro y láminas diferenciadas */
  --tinta:            #1E2A27;  /* tipografía sobre fondo claro */
  --blanco:           #FFFFFF;

  /* Derivados: sólo opacidades de los cinco. */
  --tinta-70: rgba(30,42,39,.70);
  --tinta-52: rgba(30,42,39,.52);
  --tinta-38: rgba(30,42,39,.38);
  --linea:    rgba(30,42,39,.15);
  --linea-2:  rgba(30,42,39,.28);
  --parch-72: rgba(246,244,239,.72);
  --parch-52: rgba(246,244,239,.52);
  --linea-clara: rgba(246,244,239,.20);
  --linea-clara-2: rgba(246,244,239,.42);

  /* Tipografía — manual 06. Una sola familia: Aptos.
     Scifly y Montserrat Thin son exclusivas del logotipo y del lockup. */
  --fuente: "Aptos", "Aptos Display", "Segoe UI Variable Text", "Segoe UI",
            Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI",
            Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fuente-lockup: "Montserrat", "Aptos", "Segoe UI", Arial, sans-serif;

  --t-display: clamp(2.75rem, 8.2vw, 8.5rem);
  --t-xxl:     clamp(2.25rem, 5.6vw, 5.25rem);
  --t-xl:      clamp(1.75rem, 3.6vw, 3.25rem);
  --t-l:       clamp(1.375rem, 2.2vw, 2rem);
  --t-lead:    clamp(1.0625rem, 1.35vw, 1.375rem);
  --t-base:    1.0625rem;
  --t-s:       .9375rem;
  --t-xs:      .8125rem;
  --t-kicker:  .6875rem;

  /* Ritmo */
  --gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --ancho:  1600px;
  --seccion: clamp(5.5rem, 12vw, 11rem);
  --seccion-s: clamp(3.5rem, 7vw, 6rem);

  /* Lámina: el radio grande de una sola esquina es el recurso gráfico
     del sistema de brochures. Se usa con criterio, no en todo. */
  --radio-lamina: clamp(2.5rem, 7vw, 7.5rem);
  --radio-chico: 2px;

  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .7s;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--parchment);
  color:var(--tinta);
  font-family:var(--fuente);
  font-size:var(--t-base);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.menu-abierto{ overflow:hidden; }

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
hr{ border:0; border-top:1px solid var(--linea); margin:0; }
::selection{ background:var(--verde); color:var(--blanco); }

:focus-visible{ outline:2px solid var(--verde-profundo); outline-offset:3px; border-radius:2px; }
.lam--verde :focus-visible,.lam--oscura :focus-visible,.lam--profunda :focus-visible{ outline-color:var(--arena); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--parchment); padding:.75rem 1.25rem;
}
.saltar:focus{ left:1rem; top:1rem; }

/* ---------- 3. LAYOUT ---------- */
.envoltorio{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.seccion{ padding-block:var(--seccion); }
.seccion--s{ padding-block:var(--seccion-s); }
.seccion--sin-top{ padding-top:0; }

.rejilla{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
@media (min-width:900px){
  .rejilla--12{ grid-template-columns:repeat(12,1fr); }
  .c-1-5{ grid-column:1/6; } .c-1-6{ grid-column:1/7; } .c-1-7{ grid-column:1/8; }
  .c-1-8{ grid-column:1/9; } .c-2-7{ grid-column:2/8; }
  .c-6-13{ grid-column:6/13; } .c-7-13{ grid-column:7/13; } .c-8-13{ grid-column:8/13; }
  .c-5-13{ grid-column:5/13; } .c-1-13{ grid-column:1/13; }
}

/* ---------- 4. LÁMINAS (manual 08) ---------- */
.lam--clara{ background:var(--parchment); color:var(--tinta); }
.lam--verde{ background:var(--verde); color:var(--blanco); }        /* sólo títulos y logo */
.lam--profunda{ background:var(--verde-profundo); color:var(--blanco); } /* texto de lectura sobre oscuro */
.lam--oscura{ background:var(--tinta); color:var(--parchment); }
.lam--verde a,.lam--profunda a,.lam--oscura a{ color:inherit; }

.lam--verde .kicker,.lam--profunda .kicker,.lam--oscura .kicker{ color:var(--arena); }
.lam--profunda .apagado,.lam--oscura .apagado{ color:var(--parch-72); }
.lam--profunda hr,.lam--oscura hr,.lam--verde hr{ border-top-color:var(--linea-clara); }

/* ---------- 5. TIPOGRAFÍA (manual 06) ----------
   Dos registros: rótulos y títulos en MAYÚSCULA con tracking;
   claims y cuerpo en caja baja. La mayúscula no se usa en frases largas. */
.kicker{
  display:block;
  font-size:var(--t-kicker);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--tinta-52);
  line-height:1.3;
}
.rotulo{
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:500;
}
.titulo-lamina{
  font-family:var(--fuente-titulo);
  font-size:var(--t-xl);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.titulo-lamina--caps{
  text-transform:uppercase;
  letter-spacing:.09em;   /* +9% · manual */
  font-weight:500;
}
.display{
  font-family:var(--fuente-titulo);
  font-size:var(--t-display);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.03em;
}
.claim{
  font-family:var(--fuente-titulo);
  font-size:var(--t-xxl);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.bajada{
  font-size:var(--t-lead);
  line-height:1.55;
  max-width:56ch;
  color:var(--tinta-70);
}
.lam--profunda .bajada,.lam--oscura .bajada{ color:var(--parch-72); }
.cuerpo{ max-width:64ch; }
.cuerpo p + p{ margin-top:1.1em; }
.nota{ font-size:var(--t-xs); color:var(--verde-profundo); line-height:1.5; }
.lam--profunda .nota,.lam--oscura .nota{ color:var(--parch-52); }
.apagado{ color:var(--tinta-52); }

/* ---------- 6. LOCKUP DE EDIFICIOS (manual 05) ----------
   neuhaus siempre en el arte del logo; la dirección debajo,
   en Montserrat Thin, mayúscula, con tracking al ancho del wordmark. */
.lockup{ display:inline-block; }
.lockup__marca{ display:block; width:100%; height:auto; }
.lockup__dir{
  display:block;
  margin-top:.5em;
  font-family:var(--fuente-lockup);
  font-weight:200;
  text-transform:uppercase;
  font-size:.72em;
  line-height:1.2;
  letter-spacing:.34em;
  text-indent:.34em;      /* compensa el tracking del último carácter */
  text-align:center;
  white-space:nowrap;
}
.lockup--sm{ width:clamp(150px,17vw,210px); }
.lockup--md{ width:clamp(190px,24vw,300px); }
.lockup--lg{ width:clamp(230px,34vw,430px); }

/* ---------- 7. ESTADO ---------- */
.estado{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--t-kicker); font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
}
.estado::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--arena); flex:none;
}
.estado--obra::before{ background:var(--verde); }
.estado--terminado::before{ background:var(--verde-profundo); }
.lam--verde .estado--terminado::before,
.lam--oscura .estado--terminado::before,
.lam--profunda .estado--terminado::before{ background:var(--parchment); }
.estado--proximamente::before{ background:transparent; box-shadow:inset 0 0 0 1px currentColor; }

/* ---------- 8. ENLACES ---------- */
.enlace{
  display:inline-flex; align-items:baseline; gap:.7em;
  font-size:var(--t-s); font-weight:600;
  text-transform:uppercase; letter-spacing:.13em;
  padding-block:.45em;
  position:relative;
}
.enlace::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.28;
  transform-origin:right; transform:scaleX(1);
  transition:transform .5s var(--ease-out), opacity .3s;
}
.enlace:hover::after,.enlace:focus-visible::after{ opacity:1; }
.enlace .flecha{ transition:transform .5s var(--ease-out); display:inline-block; }
.enlace:hover .flecha,.enlace:focus-visible .flecha{ transform:translateX(.45em); }

.enlace--sutil{ font-size:var(--t-xs); letter-spacing:.11em; font-weight:500; }

.boton{
  display:inline-flex; align-items:center; gap:.8em;
  padding:.95em 1.7em;
  font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  border:1px solid currentColor;
  border-radius:999px;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.boton .flecha{ transition:transform .5s var(--ease-out); }
.boton:hover{ background:var(--tinta); color:var(--parchment); border-color:var(--tinta); }
.boton:hover .flecha{ transform:translateX(.35em); }
.lam--verde .boton:hover,.lam--profunda .boton:hover,.lam--oscura .boton:hover{
  background:var(--parchment); color:var(--tinta); border-color:var(--parchment);
}
.boton--lleno{ background:var(--verde-profundo); color:var(--parchment); border-color:var(--verde-profundo); }
.boton--lleno:hover{ background:var(--tinta); border-color:var(--tinta); }

/* ---------- 9. MEDIA ---------- */
.media{ display:block; position:relative; overflow:hidden; background:rgba(30,42,39,.06); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--lamina{ border-radius:0 var(--radio-lamina) 0 0; }
.media--lamina-i{ border-radius:var(--radio-lamina) 0 0 0; }
.r-16-9{ aspect-ratio:16/9; }
.r-4-3{ aspect-ratio:4/3; }
.r-3-2{ aspect-ratio:3/2; }
.r-1-1{ aspect-ratio:1/1; }
.r-4-5{ aspect-ratio:4/5; }
.r-3-4{ aspect-ratio:3/4; }
.r-2-3{ aspect-ratio:2/3; }
.pie{ margin-top:.85rem; font-size:var(--t-xs); color:var(--tinta-52); }
.lam--profunda .pie,.lam--oscura .pie,.lam--verde .pie{ color:var(--parch-52); }

/* zoom sutil al hover, sólo donde el contenedor lo declara */
.media--zoom img{ transition:transform 1.1s var(--ease-out); }
a:hover .media--zoom img, .media--zoom:hover img{ transform:scale(1.045); }

/* ---------- 10. HEADER ---------- */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:clamp(68px,7vw,92px);
  transition:height .5s var(--ease);
}
.cabecera__marca{ position:relative; display:block; width:clamp(112px,11vw,148px); flex:none; }
.cabecera__marca img{ width:100%; height:auto; transition:opacity .4s var(--ease); }
.cabecera__marca .m-claro{ position:absolute; top:0; left:0; }

.nav{ display:none; }
@media (min-width:1000px){
  .nav{ display:flex; align-items:center; gap:clamp(1.5rem,2.6vw,2.9rem); }
}
.nav a{
  font-size:var(--t-xs); font-weight:500;
  text-transform:uppercase; letter-spacing:.13em;
  position:relative; padding-block:.4em;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:.05em; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]::after{ transform:scaleX(1); opacity:.45; }

/* cabecera sobre hero oscuro */
.cabecera--sobre{ color:var(--parchment); }
.cabecera--sobre .cabecera__marca .m-oscuro{ opacity:0; }
.cabecera:not(.cabecera--sobre) .cabecera__marca .m-claro{ opacity:0; }
.cabecera--fija{
  background:var(--parchment); color:var(--tinta);
  box-shadow:0 1px 0 var(--linea);
}
.cabecera--fija .cabecera__fila{ height:clamp(58px,5.4vw,70px); }
.cabecera--oculta{ transform:translateY(-100%); }
.cabecera{ transform:translateY(0); transition:transform .55s var(--ease), background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }

/* botón menú */
.menu-btn{
  display:flex; align-items:center; gap:.7em;
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.13em; font-weight:500;
}
@media (min-width:1000px){ .menu-btn{ display:none; } }
.menu-btn__barras{ display:block; width:22px; height:9px; position:relative; }
.menu-btn__barras::before,.menu-btn__barras::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s;
}
.menu-btn__barras::before{ top:0; } .menu-btn__barras::after{ bottom:0; }
body.menu-abierto .menu-btn__barras::before{ transform:translateY(4px) rotate(45deg); }
body.menu-abierto .menu-btn__barras::after{ transform:translateY(-4px) rotate(-45deg); }

/* panel móvil */
.panel{
  position:fixed; inset:0; z-index:80;
  background:var(--verde-profundo); color:var(--parchment);
  padding:calc(clamp(68px,7vw,92px) + 2rem) var(--gutter) 3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out);
  visibility:hidden;
}
body.menu-abierto .panel{ clip-path:inset(0 0 0 0); visibility:visible; }
.panel__nav{ display:flex; flex-direction:column; gap:.15em; }
.panel__nav a{
  font-family:var(--fuente-titulo);
  font-size:clamp(2rem,9vw,3rem); font-weight:500; line-height:1.24;
  letter-spacing:-.02em;
  opacity:0; transform:translateY(1.1rem);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.menu-abierto .panel__nav a{ opacity:1; transform:none; }
.panel__nav a:nth-child(1){ transition-delay:.16s } .panel__nav a:nth-child(2){ transition-delay:.21s }
.panel__nav a:nth-child(3){ transition-delay:.26s } .panel__nav a:nth-child(4){ transition-delay:.31s }
.panel__nav a:nth-child(5){ transition-delay:.36s } .panel__nav a:nth-child(6){ transition-delay:.41s }
.panel__pie{ display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-size:var(--t-s); color:var(--parch-72); }
@media (min-width:1000px){ .panel{ display:none; } }

/* ---------- 11. HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__fondo{ position:absolute; inset:0; z-index:0; }
.hero__fondo img{ width:100%; height:100%; object-fit:cover; }
.hero__velo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(30,42,39,.52) 0%, rgba(30,42,39,.12) 22%, rgba(30,42,39,.30) 40%, rgba(30,42,39,.62) 68%, rgba(30,42,39,.90) 100%);
}
.hero__cuerpo{ position:relative; z-index:2; width:100%; padding-block:clamp(3rem,7vw,5.5rem); color:var(--parchment); }
.hero__pie{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem 3rem; margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:1.4rem; border-top:1px solid var(--linea-clara-2);
}
/* Home: la frase va sola y justificada de punta a punta del ancho útil. */
.hero__pie--solo{ display:block; }
.hero__frase{
  margin:0; max-width:none;
  color:var(--parch-72); font-weight:400;
  text-align:justify; text-align-last:left; hyphens:auto;
}

/* hero de página interior */
.hero-int{ padding-top:clamp(8rem,14vw,12rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.hero-int .display{ font-size:var(--t-xxl); }

/* ---------- 12. ÍNDICE DE PROYECTOS (hover) ---------- */
.indice{ border-top:1px solid var(--linea); }
.lam--profunda .indice,.lam--oscura .indice{ border-top-color:var(--linea-clara); }
.indice__item{ border-bottom:1px solid var(--linea); position:relative; }
.lam--profunda .indice__item,.lam--oscura .indice__item{ border-bottom-color:var(--linea-clara); }
.indice__link{
  display:grid; align-items:center; gap:.35rem 2rem;
  padding-block:clamp(1.4rem,3.2vw,2.4rem);
  grid-template-columns:auto 1fr;
  transition:padding-left .6s var(--ease-out);
}
@media (min-width:900px){
  .indice__link{ grid-template-columns:3.2rem minmax(0,1fr) 12rem 9rem auto; }
  .indice__item:hover .indice__link{ padding-left:1.5rem; }
}
.indice__n{ font-size:var(--t-xs); letter-spacing:.1em; color:var(--tinta-38); font-variant-numeric:tabular-nums; }
.lam--profunda .indice__n,.lam--oscura .indice__n{ color:var(--parch-52); }
.indice__nombre{
  font-family:var(--fuente-titulo);
  font-size:clamp(1.5rem,3.6vw,2.85rem); font-weight:500; line-height:1.1;
  letter-spacing:-.02em;
}
.indice__meta{ font-size:var(--t-s); color:var(--tinta-52); }
.lam--profunda .indice__meta,.lam--oscura .indice__meta{ color:var(--parch-72); }
.indice__flecha{ font-size:1.25rem; transition:transform .6s var(--ease-out); opacity:.45; }
.indice__item:hover .indice__flecha{ transform:translateX(.5rem); opacity:1; }
.indice__mini{ margin-top:.75rem; grid-column:1/-1; display:block; }
@media (min-width:900px){
  .indice__mini{ display:none; }
  .indice__meta--oculta{ opacity:.55; transition:opacity .5s var(--ease); }
  .indice__item:hover .indice__meta--oculta{ opacity:1; }
}
/* imagen flotante que sigue al cursor (sólo puntero fino) */
.flotante{
  position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  width:clamp(230px,21vw,330px); aspect-ratio:3/4;
  border-radius:0 clamp(1.5rem,3vw,3rem) 0 0;
  overflow:hidden;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.92);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
  display:none;
}
@media (hover:hover) and (pointer:fine) and (min-width:900px){ .flotante{ display:block; } }
.flotante.activa{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.flotante img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--ease);
}
.flotante img.visible{ opacity:1; }

/* ---------- 13. FICHA DE DATOS ---------- */
.datos{ display:grid; gap:0; border-top:1px solid var(--linea); }
.lam--profunda .datos,.lam--oscura .datos{ border-top-color:var(--linea-clara); }
@media (min-width:700px){ .datos--2{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,5rem); } }
@media (min-width:1100px){ .datos--3{ grid-template-columns:repeat(3,1fr); column-gap:clamp(2rem,4vw,4rem); } }
.datos__fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding-block:.95rem; border-bottom:1px solid var(--linea);
}
.lam--profunda .datos__fila,.lam--oscura .datos__fila{ border-bottom-color:var(--linea-clara); }
.datos__k{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--tinta-52); flex:none; }
.lam--profunda .datos__k,.lam--oscura .datos__k{ color:var(--parch-52); }
.datos__v{ text-align:right; font-weight:500; }

/* cifras destacadas */
.cifras{ display:grid; gap:clamp(1.75rem,3.4vw,3rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:820px){ .cifras--4{ grid-template-columns:repeat(4,1fr); } .cifras--3{ grid-template-columns:repeat(3,1fr); } }
.cifra__n{
  font-family:var(--fuente-titulo);
  font-size:clamp(2.25rem,4.6vw,3.75rem); font-weight:500; line-height:1;
  letter-spacing:-.03em; display:block;
}
.cifra__t{ display:block; margin-top:.6rem; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--tinta-52); }
.lam--profunda .cifra__t,.lam--oscura .cifra__t,.lam--verde .cifra__t{ color:var(--parch-72); }

/* ---------- 14. LISTAS EDITORIALES ---------- */
.lista-linea > li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding-block:.9rem; border-bottom:1px solid var(--linea);
}
.lam--profunda .lista-linea > li,.lam--oscura .lista-linea > li{ border-bottom-color:var(--linea-clara); }
.lista-linea > li:first-child{ border-top:1px solid var(--linea); }
.lam--profunda .lista-linea > li:first-child,.lam--oscura .lista-linea > li:first-child{ border-top-color:var(--linea-clara); }

.lista-puntos > li{ position:relative; padding-left:1.5rem; padding-block:.35rem; }
.lista-puntos > li::before{
  content:""; position:absolute; left:0; top:.85em; width:6px; height:1px; background:var(--arena);
}

/* ---------- 15. TIPOLOGÍAS ---------- */
.tipologias{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; }
@media (min-width:720px){ .tipologias{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .tipologias--3{ grid-template-columns:repeat(3,1fr); } }
.tipo{ display:flex; flex-direction:column; gap:.9rem; }
.tipo__plano{ background:var(--verde); border-radius:var(--radio-chico); overflow:hidden; }
.tipo__plano img{ width:100%; }
.tipo__pie{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:.7rem; border-top:1px solid var(--linea); }
.lam--profunda .tipo__pie,.lam--oscura .tipo__pie{ border-top-color:var(--linea-clara); }
.tipo__nombre{ font-weight:600; }
.tipo__m2{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* tabla de tipologías (sin plano disponible) */
.tabla{ width:100%; border-collapse:collapse; font-size:var(--t-s); }
.tabla th,.tabla td{ text-align:left; padding:.95rem 1rem .95rem 0; border-bottom:1px solid var(--linea); vertical-align:baseline; }
.lam--profunda .tabla th,.lam--profunda .tabla td,
.lam--oscura .tabla th,.lam--oscura .tabla td{ border-bottom-color:var(--linea-clara); }
.tabla th{
  font-size:var(--t-kicker); text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; color:var(--tinta-52); white-space:nowrap;
}
.lam--profunda .tabla th,.lam--oscura .tabla th{ color:var(--parch-52); }
.tabla td:last-child,.tabla th:last-child{ text-align:right; padding-right:0; font-variant-numeric:tabular-nums; }
.tabla__marco{ overflow-x:auto; }

/* ---------- 16. GALERÍA ---------- */
.galeria{
  display:grid; gap:clamp(.75rem,1.4vw,1.25rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:900px){ .galeria{ grid-template-columns:repeat(6,1fr); } }
.galeria__i{ grid-column:span 1; }
@media (min-width:900px){
  .galeria__i{ grid-column:span 2; }
  .galeria__i--ancho{ grid-column:span 4; }
  .galeria__i--full{ grid-column:span 6; }
  .galeria__i--medio{ grid-column:span 3; }
}
.galeria button{ display:block; width:100%; overflow:hidden; }
.galeria img{ transition:transform 1s var(--ease-out), opacity .5s; }
.galeria button:hover img{ transform:scale(1.04); }

/* lightbox */
.visor{
  position:fixed; inset:0; z-index:120; background:rgba(30,42,39,.96);
  display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.visor.abierto{ opacity:1; visibility:visible; }
.visor img{ max-width:100%; max-height:86vh; width:auto; object-fit:contain; }
.visor__cerrar{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); color:var(--parchment); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em; }
.visor__nav{ position:absolute; bottom:clamp(1rem,3vw,2.2rem); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1.75rem; color:var(--parchment); font-size:var(--t-xs); letter-spacing:.12em; }
.visor__nav button{ padding:.5rem; opacity:.7; transition:opacity .3s; }
.visor__nav button:hover{ opacity:1; }
.visor__contador{ font-variant-numeric:tabular-nums; }

/* ---------- 17. LÍNEA DE TIEMPO ---------- */
.tiempo{ position:relative; }
.tiempo__linea{ position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--linea-clara); }
.tiempo__linea::after{ content:""; position:absolute; inset:0 0 auto 0; height:var(--avance,0%); background:var(--arena); transition:height .2s linear; }
.hito{ position:relative; padding-left:clamp(1.75rem,4vw,3.5rem); padding-block:clamp(1.75rem,4vw,3.25rem); }
.hito::before{
  content:""; position:absolute; left:-3px; top:calc(clamp(1.75rem,4vw,3.25rem) + .55em);
  width:7px; height:7px; border-radius:50%; background:var(--arena);
  transform:scale(0); transition:transform .5s var(--ease-out) .1s;
}
.hito.is-in::before{ transform:scale(1); }
.hito__anio{
  font-family:var(--fuente-titulo);
  font-size:clamp(2.5rem,6.5vw,5rem); font-weight:500; line-height:.9;
  letter-spacing:-.035em; display:block; margin-bottom:.55rem;
}
.hito__txt{ max-width:52ch; color:var(--parch-72); }
@media (min-width:900px){
  .hito{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
  .hito__anio{ margin-bottom:0; font-size:clamp(2.25rem,3.4vw,3.25rem); }
}

/* ---------- 18. ARCHIVO ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filtro{
  padding:.55em 1.15em; border:1px solid var(--linea-2); border-radius:999px;
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; font-weight:500;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.filtro:hover{ border-color:var(--tinta); }
.filtro[aria-pressed="true"]{ background:var(--verde-profundo); color:var(--parchment); border-color:var(--verde-profundo); }
.filtro__n{ font-variant-numeric:tabular-nums; opacity:.55; margin-left:.5em; }

.archivo{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--linea); }
.archivo__i{
  display:grid; gap:.15rem 1.5rem; grid-template-columns:1fr auto;
  padding-block:1rem; border-bottom:1px solid var(--linea);
  transition:opacity .4s var(--ease), background .4s var(--ease);
}
@media (min-width:820px){
  .archivo__i{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,10rem) 8rem; align-items:baseline; }
}
.archivo__i[hidden]{ display:none; }
.archivo__obra{ font-weight:500; }
.archivo__dato{ font-size:var(--t-s); color:var(--tinta-52); }
.archivo__anio{ font-size:var(--t-s); color:var(--tinta-52); font-variant-numeric:tabular-nums; }
.archivo__estado{ font-size:var(--t-kicker); text-transform:uppercase; letter-spacing:.13em; color:var(--tinta-52); text-align:left; }
@media (min-width:820px){ .archivo__estado{ text-align:right; } }
.archivo__vacio{ padding-block:3rem; color:var(--tinta-52); }

/* ---------- 19. DESTACADOS DEL ARCHIVO ---------- */
.obra{ display:grid; gap:1rem; }
.obra__meta{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; font-size:var(--t-xs); color:var(--tinta-52); }

/* ---------- 20. FORMULARIO ---------- */
.form{ display:grid; gap:clamp(1.25rem,2.4vw,1.75rem); }
@media (min-width:760px){ .form__par{ display:grid; grid-template-columns:1fr 1fr; gap:inherit; } }
.campo{ display:flex; flex-direction:column; gap:.5rem; }
.campo label{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--tinta-52); }
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:var(--t-base); color:inherit;
  background:transparent; border:0; border-bottom:1px solid var(--linea-2);
  padding:.6rem 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.campo textarea{ resize:vertical; min-height:6.5rem; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-bottom-color:var(--verde-profundo); }
.campo select{ appearance:none; cursor:pointer; }
.form__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }

/* ---------- 21. FOOTER ---------- */
.pie-sitio{ background:var(--tinta); color:var(--parchment); padding-block:clamp(3.5rem,7vw,6rem) clamp(2rem,4vw,3rem); }
.pie-sitio__top{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:900px){ .pie-sitio__top{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); } }
.pie-sitio a{ transition:opacity .35s var(--ease); }
.pie-sitio a:hover{ opacity:.62; }
.pie-sitio__col h3{ font-size:var(--t-kicker); text-transform:uppercase; letter-spacing:.16em; color:var(--arena); font-weight:600; margin-bottom:1.25rem; }
.pie-sitio__col li{ padding-block:.3rem; }
.pie-sitio__bajo{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
  margin-top:clamp(3rem,6vw,5rem); padding-top:1.5rem; border-top:1px solid var(--linea-clara);
  font-size:var(--t-xs); color:var(--parch-52);
}
.pie-sitio__marca{ width:clamp(150px,16vw,196px); margin-bottom:1.5rem; }
.pie-bnp{ display:inline-flex; align-items:center; gap:.9rem; }
.pie-bnp img{ width:clamp(96px,11vw,124px); opacity:.82; transition:opacity .35s; }
.pie-bnp:hover img{ opacity:1; }

/* ---------- 22. WHATSAPP ---------- */
.wa{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:70;
  width:52px; height:52px; border-radius:50%;
  background:var(--verde-profundo); color:var(--parchment);
  display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(30,42,39,.22);
  transition:transform .45s var(--ease-out), background .35s var(--ease);
}
.wa:hover{ transform:translateY(-3px); background:var(--tinta); }
.wa svg{ width:24px; height:24px; fill:currentColor; }
@media (max-width:640px){
  .wa{ width:46px; height:46px; }
  .wa svg{ width:21px; height:21px; }
}

/* ---------- 23. REVEALS ---------- */
[data-reveal]{ opacity:0; transform:translateY(1.35rem); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="mascara"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-out); }
[data-reveal="mascara"].is-in{ clip-path:inset(0 0 0 0); }
[data-reveal="escala"]{ opacity:0; transform:none; }
[data-reveal="escala"] img{ transform:scale(1.09); transition:transform 1.5s var(--ease-out); }
[data-reveal="escala"].is-in{ opacity:1; }
[data-reveal="escala"].is-in img{ transform:scale(1); }
[data-stagger] > *{ opacity:0; transform:translateY(1.1rem); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
[data-stagger].is-in > *{ opacity:1; transform:none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:0s }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.07s }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.14s }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.21s }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.28s }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.35s }
[data-stagger].is-in > *:nth-child(7){ transition-delay:.42s }
[data-stagger].is-in > *:nth-child(8){ transition-delay:.49s }

/* texto por palabras */
/* La caja recorta la palabra mientras sube. El padding deja aire para las
   descendentes (p, q, g), que con line-height .94 quedarían cortadas. */
.pal{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.22em; margin-bottom:-.22em; }
.pal > i{ display:inline-block; font-style:inherit; transform:translateY(140%); transition:transform 1s var(--ease-out); }
.is-in .pal > i, .pal.is-in > i{ transform:none; }

/* parallax */
[data-parallax]{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal],[data-stagger] > *{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-reveal="escala"] img{ transform:none !important; }
  .pal > i{ transform:none !important; }
  [data-parallax]{ transform:none !important; }
  .flotante{ display:none !important; }
}

/* ---------- 24. UTILIDADES ---------- */
.oculto-visual{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mt-s{ margin-top:clamp(1rem,2vw,1.5rem); }
.mt-m{ margin-top:clamp(1.75rem,3.4vw,2.75rem); }
.mt-l{ margin-top:clamp(2.75rem,6vw,5rem); }
.mt-xl{ margin-top:clamp(4rem,9vw,8rem); }
.centro{ margin-inline:auto; text-align:center; }
.medida{ max-width:62ch; }
.medida-corta{ max-width:44ch; }
.fila{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.fila--entre{ justify-content:space-between; }
.pila{ display:flex; flex-direction:column; }
.gap-s{ gap:clamp(.5rem,1vw,.85rem); } .gap-m{ gap:clamp(1rem,2vw,1.75rem); } .gap-l{ gap:clamp(2rem,4vw,3.5rem); }
.sangria-borde{ padding-top:1.25rem; border-top:1px solid var(--linea); }
.lam--profunda .sangria-borde,.lam--oscura .sangria-borde,.lam--verde .sangria-borde{ border-top-color:var(--linea-clara); }

/* ---------- 25. BLOQUE DE PROYECTO (índice de proyectos) ---------- */
.grupo{ padding-block:clamp(3rem,7vw,6rem); }
.grupo__cab{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--linea);
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.lam--profunda .grupo__cab,.lam--oscura .grupo__cab{ border-bottom-color:var(--linea-clara); }
.grupo__t{ font-size:var(--t-s); text-transform:uppercase; letter-spacing:.16em; font-weight:600; }
.grupo__n{ font-size:var(--t-xs); color:var(--tinta-38); font-variant-numeric:tabular-nums; }
.lam--profunda .grupo__n,.lam--oscura .grupo__n{ color:var(--parch-52); }

.proy{ display:grid; gap:clamp(1.5rem,3vw,3.5rem); align-items:center; }
.proy + .proy{ margin-top:clamp(4rem,9vw,8rem); }
@media (min-width:900px){
  .proy{ grid-template-columns:repeat(12,1fr); }
  .proy__media{ grid-column:1/8; grid-row:1; }
  .proy__info{ grid-column:9/13; grid-row:1; }
  .proy--inv .proy__media{ grid-column:6/13; }
  .proy--inv .proy__info{ grid-column:1/5; }
}
.proy__media{ display:block; }
.proy__nombre{
  font-family:var(--fuente-titulo);
  font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:500; line-height:1.1; letter-spacing:-.02em;
}
.proy__lugar{ font-size:var(--t-s); color:var(--tinta-52); margin-top:.35rem; }
.lam--profunda .proy__lugar,.lam--oscura .proy__lugar{ color:var(--parch-72); }
.proy__datos{ margin-top:clamp(1.25rem,2.4vw,1.75rem); }
.proy__datos .datos__fila{ padding-block:.7rem; }

/* ---------- 26. TEASER (próximamente) ---------- */
.teaser{
  position:relative; overflow:hidden;
  border-radius:0 var(--radio-lamina) 0 0;
  background:var(--verde);
  color:var(--blanco);
  padding:clamp(3rem,9vw,7rem) clamp(1.75rem,6vw,5rem);
  min-height:min(70svh,540px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.teaser__marca{ width:clamp(180px,26vw,340px); }
.teaser__pulso{
  position:absolute; right:-12%; top:-28%;
  width:min(62vw,620px); aspect-ratio:1; border-radius:50%;
  background:rgba(246,244,239,.09);
  animation:pulso 9s ease-in-out infinite;
}
@keyframes pulso{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:.5 } }

/* ---------- 27. ETAPAS DE OBRA ---------- */
.etapas{ display:grid; gap:0; }
.etapa{
  display:grid; gap:.2rem 1.5rem; grid-template-columns:auto 1fr;
  padding-block:1rem; border-bottom:1px solid var(--linea);
  align-items:baseline;
}
.lam--profunda .etapa,.lam--oscura .etapa{ border-bottom-color:var(--linea-clara); }
.etapa:first-child{ border-top:1px solid var(--linea); }
.lam--profunda .etapa:first-child,.lam--oscura .etapa:first-child{ border-top-color:var(--linea-clara); }
.etapa__marca{
  width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px var(--linea-2); align-self:center;
}
.lam--profunda .etapa__marca,.lam--oscura .etapa__marca{ box-shadow:inset 0 0 0 1px var(--linea-clara-2); }
.etapa--hecha .etapa__marca{ background:var(--verde-profundo); box-shadow:none; }
.lam--profunda .etapa--hecha .etapa__marca,.lam--oscura .etapa--hecha .etapa__marca{ background:var(--parchment); }
.etapa--actual .etapa__marca{ background:var(--arena); box-shadow:0 0 0 4px rgba(201,166,107,.22); }
.etapa__t{ font-weight:500; }
.etapa--pendiente .etapa__t{ color:var(--tinta-38); }
.lam--profunda .etapa--pendiente .etapa__t,.lam--oscura .etapa--pendiente .etapa__t{ color:var(--parch-52); }

/* ---------- 28. PENDIENTE DE CONTENIDO ---------- */
.pendiente{
  border:1px dashed var(--linea-2); border-radius:var(--radio-chico);
  padding:clamp(1.5rem,3vw,2.25rem);
  color:var(--tinta-52);
}
.lam--profunda .pendiente,.lam--oscura .pendiente{ border-color:var(--linea-clara-2); color:var(--parch-72); }
.pendiente .kicker{ margin-bottom:.6rem; }

/* ---------- 29. CARRIL HORIZONTAL ---------- */
.carril{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(78vw,1fr);
  gap:clamp(.75rem,1.5vw,1.25rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  scrollbar-width:thin;
}
@media (min-width:760px){ .carril{ grid-auto-columns:minmax(38vw,1fr); } }
@media (min-width:1200px){ .carril{ grid-auto-columns:minmax(30vw,1fr); } }
.carril > *{ scroll-snap-align:start; }

/* ---------- 30. HERO PARTIDO (obra entregada) ---------- */
.hero-part{ padding-top:clamp(7.5rem,13vw,11rem); padding-bottom:clamp(2rem,5vw,4rem); }
.hero-part__img{ margin-top:clamp(2rem,4vw,0rem); }
@media (min-width:900px){
  .hero-part{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,4vw,4.5rem); align-items:end; }
  .hero-part__txt{ grid-column:1/7; padding-bottom:clamp(1rem,3vw,3rem); }
  .hero-part__img{ grid-column:7/13; margin-top:0; }
}
.sello{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.55em 1.1em; border-radius:999px;
  background:var(--verde-profundo); color:var(--parchment);
  font-size:var(--t-kicker); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
}

/* ---------- 31. CABECERA CON EL MENÚ ABIERTO ----------
   El panel es verde profundo: el logotipo va en blanco (manual 02). */
body.menu-abierto .cabecera{
  background:transparent; box-shadow:none; color:var(--parchment);
  transform:none;
}
body.menu-abierto .cabecera .cabecera__marca .m-oscuro{ opacity:0; }
body.menu-abierto .cabecera .cabecera__marca .m-claro{ opacity:1; }

/* ---------- 32. MOSAICO DE PROYECTOS (inicio) ----------
   Mismo lenguaje que las oportunidades de Inversión: imagen, nombre y estado.
   Cinco columnas en desktop; se pliega de a poco en pantallas menores. */
.mosaico{ display:grid; gap:clamp(1.1rem,2vw,1.75rem); grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .mosaico{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1080px){ .mosaico{ grid-template-columns:repeat(5,1fr); } }
.mosaico__i{ min-width:0; }
.mosaico__link{ display:block; }
.mosaico__pie{
  display:flex; flex-direction:column; gap:.5rem;
  margin-top:.95rem; padding-top:.85rem; border-top:1px solid var(--linea);
  transition:border-color .5s var(--ease);
}
.lam--profunda .mosaico__pie,.lam--oscura .mosaico__pie{ border-top-color:var(--linea-clara); }
.mosaico__link:hover .mosaico__pie{ border-top-color:var(--tinta); }
.mosaico__nombre{
  font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; line-height:1.35;
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
}
.mosaico__nombre .flecha{ opacity:0; transform:translateX(-.35rem); transition:opacity .45s var(--ease), transform .5s var(--ease-out); flex:none; }
.mosaico__link:hover .mosaico__nombre .flecha,
.mosaico__link:focus-visible .mosaico__nombre .flecha{ opacity:1; transform:none; }

/* ---------- 33. PLANTAS DE TIPOLOGÍAS ----------
   Todas las plantas se dibujan a una misma escala: el ancho de cada una se
   calcula a partir de sus píxeles reales (--pw) por un factor común (--k).
   Cambiar --k reescala el conjunto sin romper la comparación entre unidades. */
.plantas{ --k:.28; display:grid; gap:clamp(1.75rem,3.5vw,3rem); }
@media (min-width:600px){  .plantas{ --k:.34; } }
@media (min-width:900px){  .plantas{ --k:.42; } }
@media (min-width:1200px){ .plantas{ --k:.50; } }

.plantas__grupo{
  min-width:0;
  background:var(--verde-profundo); color:var(--parchment);
  border-radius:0 var(--radio-lamina) 0 0;
  padding:clamp(1.5rem,3.5vw,3rem) clamp(1.25rem,3vw,2.75rem) clamp(1.75rem,3.5vw,2.75rem);
}
.plantas__grupo + .plantas__grupo{ border-radius:var(--radio-lamina) 0 0 0; }
.plantas__cab{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem 2rem; padding-bottom:1rem; margin-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--linea-clara);
}
.plantas__cab .kicker{ color:var(--arena); }
.plantas__cab span:last-child{ font-size:var(--t-xs); color:var(--parch-52); }

/* La fila desborda con scroll sólo si hace falta: la escala nunca se sacrifica. */
.plantas__fila{
  min-width:0;
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(1.5rem,3vw,2.75rem);
  overflow-x:auto; scrollbar-width:thin;
}
.planta{ min-width:9.5rem; flex:none; }
.planta__niveles{ display:flex; align-items:flex-end; gap:clamp(.85rem,1.8vw,1.5rem); }
.planta__nivel{ width:calc(var(--pw) * var(--k) * 1px); flex:none; }
.planta__nivel img{ width:100%; height:auto; }
.planta__nivel button{ display:block; width:100%; }
.planta__nivel button img{ transition:opacity .4s var(--ease); }
.planta__nivel button:hover img{ opacity:.72; }
.planta__nivel-t{
  display:block; margin-top:.5rem;
  font-size:var(--t-kicker); text-transform:uppercase; letter-spacing:.13em;
  color:var(--parch-52);
}
.planta__pie{
  margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--linea-clara);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.planta__t{ font-weight:600; font-size:var(--t-s); }
.planta__m2{ font-variant-numeric:tabular-nums; white-space:nowrap; font-size:var(--t-s); }
.planta__uf{ display:block; margin-top:.35rem; font-size:var(--t-xs); color:var(--parch-52); }

/* ---------- 34. BROCHURE ---------- */
.brochure{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 2rem;
  padding-block:clamp(1rem,2vw,1.35rem);
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.lam--profunda .brochure,.lam--oscura .brochure{ border-color:var(--linea-clara); }
.brochure__t{ font-size:var(--t-lead); }
.brochure__peso{ font-size:var(--t-xs); color:var(--tinta-52); }
.lam--profunda .brochure__peso,.lam--oscura .brochure__peso{ color:var(--parch-52); }

/* ---------- 35. TEASER CON FOTO DEL SITIO ----------
   El velo verde mantiene el contraste del lockup en blanco (manual 02). */
.teaser--foto{ background:var(--verde-profundo); }
.teaser__fondo{ position:absolute; inset:0; z-index:0; }
.teaser__fondo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.teaser__velo{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(52,80,74,.62) 0%, rgba(52,80,74,.74) 45%, rgba(30,42,39,.90) 100%);
}
.teaser--foto > *:not(.teaser__fondo):not(.teaser__velo){ position:relative; z-index:2; }

/* Numeración de etapas (proceso de inversión). */
.etapa__n{
  display:inline-block; margin-right:.85em;
  font-size:var(--t-xs); font-variant-numeric:tabular-nums;
  letter-spacing:.1em; color:var(--parch-52);
}
.lam--clara .etapa__n{ color:var(--tinta-38); }

/* Aviso de desplazamiento: los dúplex ocupan dos niveles y, por debajo del
   escritorio, la fila se recorre en horizontal antes que romper la escala. */
.plantas__desliz{ display:block; margin-top:.9rem; font-size:var(--t-xs); color:var(--parch-52); }
@media (min-width:1200px){ .plantas__desliz{ display:none; } }

/* ---------- 36. VIDEO DEL HERO ----------
   El material es vertical (2160x3840). En mobile se usa tal cual; en escritorio
   se rota 90 grados en sentido horario para que llene la pantalla apaisada.
   Al rotar, el ancho del elemento pasa a ser el alto en pantalla y viceversa:
   por eso width toma la medida vertical y height la horizontal. */
.hero__fondo--video{ overflow:hidden; }
.hero__video{
  display:block; width:100%; height:100%;
  object-fit:cover; background:var(--tinta);
}
@media (min-width:900px){
  .hero__video{
    position:absolute; top:50%; left:50%;
    width:100svh; height:100vw;
    transform:translate(-50%,-50%) rotate(90deg);
    transform-origin:center center;
  }
}

/* ---------- 37. INTERIORES POR TIPOLOGÍA ----------
   Pares de renders bajo el rótulo de su tipología. Comparte el visor y el
   zoom al hover con la galería; sólo cambia la grilla. */
.interiores{ display:grid; gap:clamp(1.75rem,3.5vw,2.75rem); grid-template-columns:1fr; }
@media (min-width:900px){ .interiores{ grid-template-columns:1fr 1fr; } }
.interiores__par{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.5rem,1vw,.85rem); }
.interiores button{ display:block; width:100%; }
.interiores button img{ transition:transform 1s var(--ease-out); }
.interiores button:hover img{ transform:scale(1.04); }

/* ---------- 38. TIPOLOGÍAS DESPLEGABLES ---------- */
/* --k = escalar compartido: mantiene las plantas proporcionales entre sí.
   Está calibrado para que la planta ocupe alrededor de un tercio del panel
   y quede lugar al costado para los renders. Cada proyecto se dibujó a otra
   escala, así que cada uno lleva su propio --k. */
.tipos{ border-top:1px solid var(--linea); }

.tipos--716{ --k:.10; --pwmax:2660; }
@media (min-width:600px){  .tipos--716{ --k:.13; } }
@media (min-width:900px){  .tipos--716{ --k:.17; } }
@media (min-width:1200px){ .tipos--716{ --k:.22; } }

.tipos--1290{ --k:.07; --pwmax:2947; }
@media (min-width:600px){  .tipos--1290{ --k:.09; } }
@media (min-width:900px){  .tipos--1290{ --k:.12; } }
@media (min-width:1200px){ .tipos--1290{ --k:.155; } }

.tipos--1302{ --k:.08; --pwmax:2487; }
@media (min-width:600px){  .tipos--1302{ --k:.10; } }
@media (min-width:900px){  .tipos--1302{ --k:.14; } }
@media (min-width:1200px){ .tipos--1302{ --k:.18; } }

.tipos--740{ --k:.14; --pwmax:1444; }
@media (min-width:600px){  .tipos--740{ --k:.17; } }
@media (min-width:900px){  .tipos--740{ --k:.24; } }
@media (min-width:1200px){ .tipos--740{ --k:.31; } }


.tipo-item{ border-bottom:1px solid var(--linea); }

.tipo-item > summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  align-items:center;
  gap:.2rem 1.5rem;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding-block:clamp(1.1rem,2.4vw,1.6rem);
  transition:padding-left .5s var(--ease-out);
}
.tipo-item > summary::-webkit-details-marker{ display:none; }
.tipo-item > summary::marker{ content:""; }
.tipo-item > summary:focus-visible{ outline:2px solid var(--verde-profundo); outline-offset:4px; }

/* El número manda: es el nombre de la tipología */
.tipo-item__n{
  font-family:var(--fuente-titulo);
  font-weight:500;
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  line-height:.95;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--tinta);
  transition:color .45s var(--ease);
}
.tipo-item[open] .tipo-item__n,
.tipo-item:hover .tipo-item__n{ color:var(--verde-profundo); }

/* La distribución baja a registro de rótulo para no competir con el número */
.tipo-item__nombre{
  font-size:var(--t-s);
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--tinta-70);
  line-height:1.3;
}
.tipo-item__meta{ grid-column:2; grid-row:2; font-size:var(--t-xs); color:var(--tinta-52); }
.tipo-item__m2{
  grid-column:3; grid-row:2;
  font-size:var(--t-s); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--tinta-70);
}
.tipo-item__signo{ grid-column:3; grid-row:1; position:relative; width:14px; height:14px; justify-self:end; }
.tipo-item__signo::before,
.tipo-item__signo::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor;
  transition:transform .45s var(--ease-out), opacity .3s var(--ease);
}
.tipo-item__signo::after{ transform:rotate(90deg); }
.tipo-item[open] .tipo-item__signo::after{ transform:rotate(0deg); opacity:0; }

@media (min-width:820px){
  .tipo-item > summary{ grid-template-columns:4.5rem minmax(0,1fr) 11rem 5.5rem 1.5rem; }
  .tipo-item:hover > summary{ padding-left:1rem; }
  .tipo-item__meta{ grid-column:3; grid-row:1; }
  .tipo-item__m2{ grid-column:4; grid-row:1; }
  .tipo-item__signo{ grid-column:5; grid-row:1; }
}

/* Contenedor del deslizamiento: el JS le anima la altura.
   overflow:hidden crea un BFC, así el margen inferior del panel entra en offsetHeight. */
.tipo-panel__cont{ overflow:hidden; }

.tipo-panel{
  background:var(--verde-profundo);
  color:var(--parchment);
  border-radius:0 var(--radio-lamina) 0 0;
  padding:clamp(1.5rem,3.5vw,2.75rem);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(1.5rem,3vw,2.5rem);
}
.tipo-item[open] .tipo-panel{ animation:tipoAbrir .55s var(--ease-out) both; }
@keyframes tipoAbrir{ from{ opacity:0 } to{ opacity:1 } }

.tipo-panel__plano{ flex:0 1 auto; min-width:0; max-width:100%; overflow-x:auto; }
/* Los niveles de un dúplex se apilan si no entran, en vez de desbordar */
.tipo-panel__niveles{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(.85rem,1.8vw,1.5rem); }
.tipo-panel__nivel{ width:calc(var(--pw) * var(--k) * 1px); flex:none; }
.tipo-panel__nivel img{ width:100%; height:auto; }
.tipo-panel__nivel button{ display:block; width:100%; position:relative; }
.tipo-panel__nivel button img{ transition:opacity .4s var(--ease); }
.tipo-panel__nivel button:hover img{ opacity:.72; }
.tipo-panel__nivel-t{
  display:block; margin-top:.5rem;
  font-size:var(--t-kicker); text-transform:uppercase; letter-spacing:.13em;
  color:var(--parch-72);
}

/* En el teléfono la planta se lee sola, sin renders al lado: ocupa todo el
   ancho disponible y el panel casi pierde el margen lateral, para que el
   dibujo entre lo más grande posible. Se sacrifica la escala compartida,
   que sólo se sostiene de 820px para arriba. */
@media (max-width:819px){
  .tipo-panel{ padding-inline:clamp(.75rem,3vw,1.25rem); }
  .tipo-panel__plano{ flex:1 1 100%; overflow-x:visible; }
  .tipo-panel__niveles{ gap:clamp(1rem,4vw,1.5rem); }
  /* La planta más grande del proyecto ocupa todo el ancho y el resto queda
     en proporción: se agrandan al máximo sin romper la escala común. */
  .tipo-panel__nivel{ width:calc(var(--pw) / var(--pwmax) * 100%); }
}

/* De 820px para arriba la planta convive con los renders y conviene avisar
   que se puede ampliar: lupa dibujada con los dos pseudoelementos del botón. */
@media (min-width:820px){
  .tipo-panel__nivel button::before,
  .tipo-panel__nivel button::after{
    content:""; position:absolute; pointer-events:none;
    opacity:.65; transition:opacity .35s var(--ease), transform .35s var(--ease-out);
  }
  .tipo-panel__nivel button::before{        /* lente */
    right:.85rem; bottom:.95rem;
    width:15px; height:15px; border-radius:50%;
    border:2px solid var(--parchment);
  }
  .tipo-panel__nivel button::after{         /* mango */
    right:.7rem; bottom:.75rem;
    width:8px; height:2px; background:var(--parchment);
    transform:rotate(45deg); transform-origin:right center;
  }
  .tipo-panel__nivel button:hover::before,
  .tipo-panel__nivel button:focus-visible::before{ opacity:1; transform:scale(1.12); }
  .tipo-panel__nivel button:hover::after,
  .tipo-panel__nivel button:focus-visible::after{ opacity:1; }
}

.tipo-panel__vistas{ flex:1 1 320px; min-width:0; display:grid; gap:clamp(.6rem,1.2vw,1rem); grid-template-columns:1fr; }
@media (min-width:1100px){ .tipo-panel__vistas{ grid-template-columns:1fr 1fr; } }
.tipo-panel__vistas button{ display:block; width:100%; }
.tipo-panel__vistas button img{ transition:transform 1s var(--ease-out); }
.tipo-panel__vistas button:hover img{ transform:scale(1.04); }

/* Ficha y superficies sobre verde profundo: todo el texto en parchment (manual §04) */
.tipo-panel__datos{ flex:1 1 100%; display:grid; gap:clamp(1.25rem,2.6vw,2.25rem); }
@media (min-width:820px){ .tipo-panel__datos{ grid-template-columns:1fr 1fr; align-items:start; } }

.tipo-panel__datos .datos{ border-top-color:var(--linea-clara); }
.tipo-panel__datos .datos__fila{ border-bottom-color:var(--linea-clara); }
.tipo-panel__datos .datos__k{ color:var(--parch-72); }
.tipo-panel__datos .datos__v{ color:var(--parchment); }

/* Mismo alto de fila que .datos, para que las dos columnas queden renglón a renglón */
.tipo-sup{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea-clara); }
.tipo-sup__i{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding-block:.95rem;
  border-bottom:1px solid var(--linea-clara);
}
.tipo-sup__k{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--parch-72); flex:none; }
.tipo-sup__v{ text-align:right; font-weight:500; color:var(--parchment); font-variant-numeric:tabular-nums; }
.tipo-sup__i--total .tipo-sup__k{ color:var(--parchment); }

.tipo-panel__nota{
  grid-column:1/-1;
  font-size:var(--t-xs); line-height:1.6; color:var(--parch-72); max-width:64ch; margin:0;
}

@media (prefers-reduced-motion:reduce){
  .tipo-item[open] .tipo-panel{ animation:none; }
  .tipo-item > summary,
  .tipo-item__n,
  .tipo-item__signo::before,
  .tipo-item__signo::after{ transition:none; }
}

/* ---------- 39. ANUNCIO DE PREVENTA (temporal) ----------
   Bloque de vida limitada. Se retira junto con:
   · la sección "ANUNCIO DE PREVENTA" de proyectos/centenera-716.html
   · el bloque .hero__anuncio de index.html
   cuando termine la 1.ª preventa. */

/* Franja de la ficha del proyecto: un solo renglón, título a la izquierda
   y atajos de contacto a la derecha, repartidos en todo el ancho. */
.anuncio__fila{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2.5rem;
  padding-block:clamp(1.75rem,4vw,3.25rem);
}
.anuncio__t{
  margin:0; flex:0 1 auto; min-width:0;
  font-family:var(--fuente-titulo); font-weight:600;
  font-size:clamp(1.35rem,3.2vw,2.75rem);
  line-height:1.05; letter-spacing:-.03em;
  white-space:nowrap;
}
.anuncio__medios{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 2rem; }

/* Anuncio sobre el video del hero de la home */
.hero__anuncio{
  /* z-index 3: .hero__cuerpo también es 2 y va después en el DOM, así que
     lo tapaba y se comía el clic del enlace. */
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; text-align:center;
  padding-inline:var(--gutter);
  color:var(--parchment);
  /* velo suave y sin bordes para que el texto se lea sobre cualquier cuadro */
  background:radial-gradient(ellipse 70% 42% at 50% 48%, rgba(30,42,39,.58), rgba(30,42,39,0) 100%);
  pointer-events:none;
}
.hero__anuncio > *{ pointer-events:auto; }
.hero__anuncio-k{ color:var(--arena); }
.hero__anuncio-t{
  margin:0; max-width:20ch;
  font-family:var(--fuente-titulo); font-weight:700;
  font-size:clamp(1.9rem,5.2vw,4.5rem);
  line-height:1.03; letter-spacing:-.03em;
  text-wrap:balance;
}
@media (prefers-reduced-motion:reduce){
  .anuncio__t,.hero__anuncio-t{ transition:none; }
}
