/* ══════════════════════════════════════════════════════════════════════
   JV ARQUITECTURA · HOJA DE ESTILOS
   Derivada del manual de identidad v1.0. No editar sin revisar el manual.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#17191B;
  --papel:#F3F3F1;
  --concreto:#9CA09C;
  --cal:#DFDFDB;
  --cianotipo:#1D4E6F;
  --blanco:#FFFFFF;

  --p013:.5px; --p018:1px; --p025:1.5px;

  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --u:8px;                       /* módulo del manual */
  --medianil:24px;               /* 3 M */
  --ancho:1240px;
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--medianil)}
.datum{height:var(--p018);background:var(--tinta)}

.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinta);color:var(--papel);padding:var(--u) calc(var(--u)*2)}
.saltar:focus{left:0}
:focus-visible{outline:2px solid var(--cianotipo);outline-offset:3px}

/* ── marca ─────────────────────────────────────────────────────────── */
.iso{fill:none;stroke:var(--tinta);stroke-width:8;stroke-linecap:butt;stroke-linejoin:bevel;height:30px;width:auto}
.nav__marca{display:flex;align-items:center;gap:calc(var(--u)*1.75)}
.nav__rule{width:1px;align-self:stretch;background:var(--tinta);margin:2px 0}
.nav__word{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;white-space:nowrap}

/* ── tipografía ────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cianotipo);margin-bottom:calc(var(--u)*2)}
h1{font-size:clamp(34px,5.4vw,66px);font-weight:300;letter-spacing:-.03em;line-height:1.04}
h1 em{font-style:normal;color:var(--concreto)}
h2{font-size:clamp(26px,3.4vw,42px);font-weight:300;letter-spacing:-.024em;line-height:1.1;max-width:20ch}
h3{font-size:20px;font-weight:400;letter-spacing:-.012em}
p{max-width:62ch;color:#383D40}
.lede{font-size:clamp(17px,1.6vw,20px);font-weight:300;line-height:1.5;color:var(--tinta);max-width:56ch;margin-top:calc(var(--u)*2)}
.nota{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--concreto);letter-spacing:.02em;margin-top:calc(var(--u)*3);
      border-left:var(--p018) solid var(--cianotipo);padding-left:calc(var(--u)*2)}
p+p{margin-top:calc(var(--u)*2)}

/* ── botones ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--u);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:calc(var(--u)*1.75) calc(var(--u)*3);
  border:var(--p018) solid var(--tinta);background:transparent;cursor:pointer;
  transition:background .22s ease,color .22s ease;
}
.btn:hover{background:var(--tinta);color:var(--papel)}
.btn--lleno{background:var(--tinta);color:var(--papel)}
.btn--lleno:hover{background:var(--cianotipo);border-color:var(--cianotipo)}
.btn--fantasma{border-color:var(--concreto);color:#4A4F52}
.btn--fantasma:hover{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}

/* ══════════════════════════════════════════════ NAVEGACIÓN */
.nav{position:sticky;top:0;z-index:100;background:rgba(243,243,241,.94);backdrop-filter:blur(10px)}
.nav__in{max-width:var(--ancho);margin:0 auto;padding:0 var(--medianil);height:var(--nav-h);
         display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*3)}
.nav__links{display:flex;align-items:center;gap:calc(var(--u)*3.5)}
.nav__links a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
              display:flex;align-items:baseline;gap:calc(var(--u)*.75);padding:var(--u) 0;position:relative;color:#3C4144}
.nav__links a i{font-style:normal;font-size:9px;color:var(--cianotipo)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:var(--p018);background:var(--tinta);transition:width .28s ease}
.nav__links a:hover{color:var(--tinta)}
.nav__links a:hover::after{width:100%}
.nav__links a.activo{color:var(--tinta)}
.nav__links a.activo::after{width:100%;background:var(--cianotipo)}
.nav__cta{border:var(--p018) solid var(--tinta);padding:calc(var(--u)*1.25) calc(var(--u)*2.25)!important;color:var(--tinta)!important}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--tinta);color:var(--papel)!important}
.nav__burger{display:none;background:none;border:0;cursor:pointer;width:36px;height:36px;padding:8px}
.nav__burger span{display:block;height:var(--p018);background:var(--tinta);margin:6px 0;transition:transform .25s ease,opacity .25s ease}
.nav.abierto .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.abierto .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ══════════════════════════════════════════════ PORTADA */
.portada{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.portada__lienzo{position:absolute;inset:0;z-index:0}
.portada__lienzo .capa{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.portada__lienzo .capa.viva{opacity:1}
.portada__lienzo img{width:100%;height:100%;object-fit:cover}
.portada__lienzo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--papel) 0%,rgba(243,243,241,.94) 42%,rgba(243,243,241,.55) 72%,rgba(243,243,241,.35) 100%)}

.portada__texto{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;width:100%;padding:calc(var(--u)*8) var(--medianil) calc(var(--u)*7)}
.portada__bajada{margin-top:calc(var(--u)*3);max-width:46ch;font-size:16.5px}
.portada__acciones{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*4)}

/* cajetín */
.cajetin{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;width:100%;
         padding:0 var(--medianil);border-top:var(--p018) solid var(--tinta);
         display:flex;flex-wrap:wrap;align-items:stretch;background:rgba(243,243,241,.72)}
.cajetin__campo{padding:calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*2) 0;border-right:var(--p013) solid var(--cal);
                min-width:0;flex:1 1 auto}
.cajetin__campo:not(:first-child){padding-left:calc(var(--u)*3)}
.cajetin__campo span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto);margin-bottom:4px}
.cajetin__campo b{font-weight:400;font-size:13.5px;letter-spacing:-.008em;display:block}
.cajetin__campo--fin b{font-family:var(--mono);font-size:12px;color:var(--cianotipo)}
.cajetin__nav{display:flex;align-items:center;gap:var(--u);padding:calc(var(--u)*2) 0 calc(var(--u)*2) calc(var(--u)*3)}
.cajetin__nav button{width:26px;height:var(--p025);background:var(--cal);border:0;cursor:pointer;padding:0;
                     transition:background .25s ease}
.cajetin__nav button[aria-selected="true"]{background:var(--tinta)}

/* ══════════════════════════════════════════════ CIFRAS */
.cifras{border-bottom:var(--p018) solid var(--tinta)}
.cifras__in{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--medianil);padding-top:calc(var(--u)*6);padding-bottom:calc(var(--u)*6)}
.cifra b{display:block;font-size:clamp(30px,4vw,52px);font-weight:300;letter-spacing:-.035em;line-height:1}
.cifra u{text-decoration:none;font-size:.42em;color:var(--concreto);letter-spacing:0;margin-left:.35em}
.cifra span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto);margin-top:calc(var(--u)*1.5)}

/* ══════════════════════════════════════════════ BLOQUES */
.bloque{padding:calc(var(--u)*14) 0}
.bloque--claro{background:var(--blanco)}
.bloque--tinta{background:var(--tinta);color:var(--papel)}
.bloque--tinta p{color:#C6CACB}
.bloque--tinta .lede{color:var(--papel)}
.bloque--tinta .eyebrow{color:var(--concreto)}
.bloque__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(var(--u)*4);
             flex-wrap:wrap;padding-bottom:calc(var(--u)*3);border-bottom:var(--p018) solid var(--tinta);margin-bottom:calc(var(--u)*6)}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.75)}
.filtros button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
                padding:calc(var(--u)*1.1) calc(var(--u)*2);border:var(--p018) solid var(--cal);background:transparent;
                cursor:pointer;color:#4A4F52;transition:all .2s ease}
.filtros button:hover{border-color:var(--tinta);color:var(--tinta)}
.filtros button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}

/* rejilla de proyectos */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--medianil)}
.tarjeta{border:var(--p013) solid var(--cal);background:var(--blanco);cursor:pointer;
         display:flex;flex-direction:column;text-align:left;padding:0;
         transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover{border-color:var(--tinta);transform:translateY(-3px)}
.tarjeta__img{aspect-ratio:4/3;overflow:hidden;background:var(--papel);position:relative}
.tarjeta__img img,.tarjeta__img svg{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover .tarjeta__img img{transform:scale(1.035)}
.tarjeta__lam{position:absolute;top:var(--u);right:var(--u);font-family:var(--mono);font-size:9px;letter-spacing:.16em;
              color:var(--cianotipo);background:rgba(243,243,241,.9);padding:3px 7px}
.tarjeta__cuerpo{padding:calc(var(--u)*2.5);display:flex;flex-direction:column;gap:var(--u);flex:1}
.tarjeta__cuerpo h3{font-size:19px}
.tarjeta__lugar{font-size:13.5px;color:var(--concreto);max-width:none}
.tarjeta__datum{height:var(--p018);background:var(--tinta);margin-top:auto}
.tarjeta__pie{display:flex;justify-content:space-between;gap:var(--u);font-family:var(--mono);font-size:9.5px;
              letter-spacing:.14em;text-transform:uppercase;color:var(--concreto);padding-top:var(--u)}
.tarjeta__pie b{font-weight:400;color:var(--tinta)}

/* ══════════════════════════════════════════════ SERVICIOS */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--medianil);margin-top:calc(var(--u)*8)}
.servicio{border-top:var(--p018) solid rgba(243,243,241,.35);padding-top:calc(var(--u)*2.5)}
.servicio__num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--concreto)}
.servicio h3{margin:calc(var(--u)*2) 0 calc(var(--u)*1.5);color:var(--papel);font-weight:400}
.servicio ul{list-style:none;margin-top:calc(var(--u)*3)}
.servicio li{position:relative;padding-left:calc(var(--u)*3);font-family:var(--mono);font-size:11.5px;
             letter-spacing:.03em;color:#C6CACB;margin-bottom:var(--u);line-height:1.7}
.servicio li::before{content:"";position:absolute;left:0;top:.72em;width:var(--u);height:var(--p018);background:var(--concreto)}

/* ══════════════════════════════════════════════ DESARROLLOS */
.desarrollo{border:var(--p013) solid var(--cal);background:var(--blanco);margin-top:calc(var(--u)*5);padding:calc(var(--u)*4)}
.desarrollo__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*3);flex-wrap:wrap;
                 padding-bottom:calc(var(--u)*2.5);border-bottom:var(--p018) solid var(--tinta)}
.etiqueta{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--papel);
          background:var(--cianotipo);padding:5px 10px;white-space:nowrap}
.desarrollo__tesis{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--cianotipo);margin-top:var(--u)}
.desarrollo__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin-top:calc(var(--u)*3)}
.desarrollo__dato{padding:calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*2) 0;border-right:var(--p013) solid var(--cal)}
.desarrollo__dato:last-child{border-right:0}
.desarrollo__dato span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto);margin-bottom:5px}
.desarrollo__dato b{font-weight:400;font-size:16px;letter-spacing:-.01em}
.desarrollo__pie{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*2);flex-wrap:wrap;margin-top:calc(var(--u)*4)}

.aviso{margin-top:calc(var(--u)*6);border-top:var(--p018) solid var(--cal);padding-top:calc(var(--u)*3)}
.aviso p{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--concreto);max-width:80ch;letter-spacing:.01em}
.aviso b{color:var(--tinta);font-weight:500}

/* ══════════════════════════════════════════════ DESPACHO */
.dos-col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:calc(var(--u)*9);align-items:start}
.ficha{border:var(--p013) solid var(--cal);background:var(--papel)}
.ficha__fila{display:flex;justify-content:space-between;gap:calc(var(--u)*2);padding:calc(var(--u)*2) calc(var(--u)*3);
             border-bottom:var(--p013) solid var(--cal);font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.ficha__fila:last-child{border-bottom:0}
.ficha__fila span{color:var(--concreto);text-transform:uppercase;font-size:9.5px;letter-spacing:.18em;padding-top:3px}
.ficha__fila b{font-weight:400;text-align:right}

/* ══════════════════════════════════════════════ CONTACTO */
.datos{margin-top:calc(var(--u)*5);display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.datos a,.datos p{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--papel);max-width:none}
.datos a{border-bottom:var(--p018) solid rgba(243,243,241,.3);padding-bottom:3px;width:fit-content;transition:border-color .2s}
.datos a:hover{border-color:var(--papel)}
.datos small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto);margin-bottom:4px}

.forma{display:flex;flex-direction:column;gap:calc(var(--u)*2.5)}
.campo{display:flex;flex-direction:column;gap:var(--u)}
.campo label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto)}
.campo input,.campo select,.campo textarea{
  background:transparent;border:0;border-bottom:var(--p018) solid rgba(243,243,241,.35);
  color:var(--papel);padding:calc(var(--u)*1.25) 0;font-size:15px;border-radius:0;transition:border-color .2s ease}
.campo select{appearance:none;cursor:pointer}
.campo select option{background:var(--tinta);color:var(--papel)}
.campo textarea{resize:vertical;min-height:96px;font-family:var(--sans)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--papel)}
.campo.mal input,.campo.mal textarea{border-bottom-color:#C4705A}
.forma .btn{align-self:flex-start;margin-top:var(--u);background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.forma .btn:hover{background:var(--cianotipo);border-color:var(--cianotipo);color:var(--papel)}
.forma__estado{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;min-height:1.2em;color:var(--concreto)}
.forma__estado.ok{color:var(--papel)}
.forma__estado.mal{color:#D08C77}

/* ══════════════════════════════════════════════ PIE */
.pie{padding-bottom:calc(var(--u)*5)}
.pie__in{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*3);
         flex-wrap:wrap;padding-top:calc(var(--u)*3)}
.pie__legal{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--concreto);max-width:none}

/* ══════════════════════════════════════════════ VISOR DE PROYECTO */
.visor{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--u)*4) var(--medianil)}
.visor[hidden]{display:none}
.visor__fondo{position:absolute;inset:0;background:rgba(23,25,27,.72);backdrop-filter:blur(3px);animation:aparece .3s ease}
.visor__hoja{position:relative;background:var(--papel);max-width:960px;width:100%;max-height:100%;overflow-y:auto;
             border:var(--p018) solid var(--tinta);animation:sube .38s cubic-bezier(.2,.7,.3,1)}
.visor__x{position:sticky;top:0;float:right;margin:var(--u);z-index:3;width:38px;height:38px;font-size:22px;line-height:1;
          background:var(--papel);border:var(--p018) solid var(--tinta);cursor:pointer}
.visor__x:hover{background:var(--tinta);color:var(--papel)}
.visor__cuerpo{padding:calc(var(--u)*5)}
.visor__cab{padding-bottom:calc(var(--u)*3);border-bottom:var(--p018) solid var(--tinta)}
.visor__cab h2{max-width:none;margin-top:var(--u)}
.visor__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:calc(var(--u)*3)}
.visor__meta div{padding-right:calc(var(--u)*3);border-right:var(--p013) solid var(--cal)}
.visor__meta div:last-child{border-right:0}
.visor__meta span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto);margin-bottom:4px}
.visor__meta b{font-weight:400;font-size:14.5px}
.visor__galeria{display:grid;gap:calc(var(--u)*2);margin-top:calc(var(--u)*4)}
.visor__galeria img,.visor__galeria svg{width:100%;border:var(--p013) solid var(--cal)}
.visor__texto{margin-top:calc(var(--u)*4)}

@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════ REVELADO */
.rev{opacity:0;transform:translateY(16px)}
.rev.visto{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

/* ══════════════════════════════════════════════ RESPONSIVO */
@media(max-width:960px){
  :root{--medianil:20px}
  .dos-col{grid-template-columns:1fr;gap:calc(var(--u)*5)}
  .servicios{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .cifras__in{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .cifra{display:flex;align-items:baseline;gap:calc(var(--u)*2);justify-content:space-between}
  .cifra span{margin-top:0}
}
@media(max-width:820px){
  .nav__burger{display:block}
  .nav__links{position:absolute;inset:100% 0 auto;background:var(--papel);flex-direction:column;
              align-items:flex-start;gap:0;padding:0 var(--medianil);border-bottom:var(--p018) solid var(--tinta);
              max-height:0;overflow:hidden;transition:max-height .35s ease}
  .nav.abierto .nav__links{max-height:70vh}
  .nav__links a{width:100%;padding:calc(var(--u)*2.25) 0;border-bottom:var(--p013) solid var(--cal);font-size:13px}
  .nav__links a:last-child{border-bottom:0}
  .nav__cta{border:0;padding:calc(var(--u)*2.25) 0!important}
  .portada__texto{padding-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*6)}
  .portada__lienzo::after{background:linear-gradient(180deg,rgba(243,243,241,.97) 0%,rgba(243,243,241,.9) 60%,rgba(243,243,241,.75) 100%)}
  .cajetin{flex-direction:column}
  .cajetin__campo{border-right:0;border-bottom:var(--p013) solid var(--cal);padding-left:0!important;width:100%}
  .cajetin__nav{padding-left:0}
  .bloque{padding:calc(var(--u)*9) 0}
  .rejilla{grid-template-columns:1fr}
  .visor__cuerpo{padding:calc(var(--u)*3)}
  .visor{padding:0}
  .visor__hoja{border:0;min-height:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rev{opacity:1;transform:none}
}

@media print{
  .nav,.visor,.portada__lienzo,.filtros,.forma{display:none}
  body{background:#fff}
  .bloque--tinta{background:#fff;color:#17191B}
}

/* ══════════════════════════════════════════════════════════════════════
   LENGUAJE DEL MANUAL DE IDENTIDAD
   Cajetines, marca de portada y jerarquía de plumilla.
   ══════════════════════════════════════════════════════════════════════ */

/* marca grande en la portada, como la lámina MI-00 del manual */
.iso--grande{height:clamp(56px,7vw,88px);margin-bottom:calc(var(--u)*4)}

/* cajetín de lámina: el mismo del manual, al cierre de cada sección */
.lamina{
  display:flex;align-items:stretch;margin-top:calc(var(--u)*8);
  border-top:var(--p018) solid currentColor;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
}
.lamina>div{padding:calc(var(--u)*1.75) calc(var(--u)*2.5);border-right:var(--p013) solid var(--cal)}
.lamina>div:first-child{padding-left:0}
.lamina>div:last-child{border-right:0;margin-left:auto;padding-right:0;color:var(--cianotipo)}
.lamina b{font-weight:500}
.lamina__dim{color:var(--concreto)}
.bloque--tinta .lamina>div{border-right-color:rgba(243,243,241,.22)}
.bloque--tinta .lamina>div:last-child{color:var(--concreto)}
.bloque--tinta .lamina__dim{color:var(--concreto)}

/* retícula de fondo, muy tenue, solo en la banda de cifras */
.cifras{
  background-image:
    linear-gradient(90deg,var(--cal) var(--p013),transparent var(--p013));
  background-size:var(--medianil) 100%;
}
.cifras__in{background:linear-gradient(90deg,rgba(243,243,241,.86),rgba(243,243,241,.86))}

/* rótulos con regla, como los h3 del manual */
.rotulo{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:var(--u);border-bottom:var(--p018) solid currentColor;margin-bottom:calc(var(--u)*2.5);
}

@media(max-width:820px){
  .lamina{flex-wrap:wrap;font-size:8.5px;margin-top:calc(var(--u)*5)}
  .lamina>div{padding:var(--u) calc(var(--u)*1.5)}
  .iso--grande{margin-bottom:calc(var(--u)*3)}
}


/* ══════════════════════════════════════════════════════════════════════
   CUBIERTA · la lámina MI-00 del manual, como portada del sitio
   ══════════════════════════════════════════════════════════════════════ */

.cubierta{
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--papel);position:relative;overflow:hidden;
}
.cubierta__in{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:calc(var(--u)*4.5);padding:calc(var(--u)*10) var(--medianil) calc(var(--u)*6);
}
.cubierta .iso{height:clamp(84px,12vw,164px)}
.cubierta__rule{width:min(520px,70%);height:var(--p018);background:var(--tinta)}
.cubierta__nombre{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(12px,1.7vw,16px);letter-spacing:.42em;text-transform:uppercase;
  padding-left:.42em;line-height:1.4;
}
.cubierta__sub{
  font-family:var(--mono);font-size:clamp(9.5px,1.1vw,11px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--concreto);max-width:none;
}

/* señal de continuar */
.cubierta__baja{
  display:flex;flex-direction:column;align-items:center;gap:var(--u);
  padding-bottom:calc(var(--u)*4);color:var(--concreto);
}
.cubierta__baja span{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase}
.cubierta__baja i{display:block;width:var(--p018);height:36px;background:var(--cal);position:relative;overflow:hidden}
.cubierta__baja i::after{
  content:"";position:absolute;inset:0;background:var(--tinta);
  animation:cae 2.4s cubic-bezier(.6,.05,.3,1) infinite;
}
.cubierta__baja:hover{color:var(--tinta)}
@keyframes cae{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}
.cubierta .lamina{margin-top:0;padding-bottom:calc(var(--u)*2.5)}

/* la nav queda debajo de la cubierta y se pega al llegar arriba */
.nav{border-bottom:0}
main section[id],.cubierta{scroll-margin-top:var(--nav-h)}

/* el hero de proyectos ya no es la primera pantalla */
.portada__tesis{
  font-size:clamp(30px,4.6vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.06;
  color:var(--tinta);max-width:none;
}
.portada__tesis em{font-style:normal;color:var(--concreto)}
.portada__texto{padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*8)}

@media(max-width:820px){
  .cubierta__in{gap:calc(var(--u)*3.5);padding-top:calc(var(--u)*8)}
  .cubierta__baja{padding-bottom:calc(var(--u)*3)}
  .portada__texto{padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*6)}
}
@media(prefers-reduced-motion:reduce){
  .cubierta__baja i::after{animation:none;transform:none;opacity:.4}
}

/* ══════════════════════════════════════════════════════════════════════
   ENTRADA · la marca en negativo que revela la cubierta
   Secuencia: isotipo blanco sobre negro → vuelco a papel → regla,
   nombre, menú y, al final, los proyectos al fondo.
   ══════════════════════════════════════════════════════════════════════ */

@keyframes isoEntra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes aPapel{to{background-color:var(--papel)}}
@keyframes aTinta{to{stroke:var(--tinta)}}
@keyframes reglaAbre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes surge{to{opacity:1}}

.cubierta{background-color:var(--tinta);animation:aPapel .8s ease 1.05s forwards}
.cubierta .iso{
  stroke:var(--papel);opacity:0;
  animation:isoEntra .85s cubic-bezier(.2,.7,.3,1) .15s forwards,
            aTinta   .80s ease 1.05s forwards;
}
.cubierta__rule{transform:scaleX(0);transform-origin:center;
  animation:reglaAbre .75s cubic-bezier(.2,.7,.3,1) 1.6s forwards}
.cubierta__nombre{opacity:0;animation:sube .7s ease 1.85s forwards}
.cubierta__sub{opacity:0;animation:sube .7s ease 2s forwards}
.cubierta .lamina,.cubierta__baja{opacity:0;animation:surge .7s ease 2.2s forwards}
.nav{opacity:0;animation:surge .7s ease 2.2s forwards}

/* fondo de proyectos: entra al final, velado para no competir con la marca */
.cubierta__lienzo{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;
  animation:surge 1.6s ease 2.4s forwards}
.cubierta__lienzo .capa{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.cubierta__lienzo .capa.viva{opacity:1}
.cubierta__lienzo img,.cubierta__lienzo svg{width:100%;height:100%;object-fit:cover}
.cubierta__lienzo::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(243,243,241,.84)}
.cubierta__in,.cubierta__baja,.cubierta>.contenedor{position:relative;z-index:2}

@media(prefers-reduced-motion:reduce){
  .cubierta{background-color:var(--papel);animation:none}
  .cubierta .iso{opacity:1;stroke:var(--tinta);animation:none}
  .cubierta__rule{transform:none;animation:none}
  .cubierta__nombre,.cubierta__sub,.cubierta .lamina,
  .cubierta__baja,.nav,.cubierta__lienzo{opacity:1;animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   MÉTODO · qué cambia en la práctica
   ══════════════════════════════════════════════════════════════════════ */

.servicios{grid-template-columns:repeat(4,1fr)}
.ventajas{margin-top:calc(var(--u)*10)}
.ventajas__rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--medianil)}
.ventaja{border-top:var(--p013) solid rgba(243,243,241,.22);padding-top:calc(var(--u)*2)}
.ventaja h4{font-size:15.5px;font-weight:400;letter-spacing:-.01em;color:var(--papel);margin-bottom:var(--u)}
.ventaja p{font-size:14px;line-height:1.62}

/* ══════════════════════════════════════════════════════════════════════
   INVERSIÓN · estándar del vehículo
   ══════════════════════════════════════════════════════════════════════ */

.estandar{margin-top:calc(var(--u)*9)}
.estandar__intro{max-width:72ch;margin-bottom:calc(var(--u)*3)}
.estandar__tabla{border-top:var(--p018) solid var(--tinta)}
.estandar__fila{
  display:grid;grid-template-columns:minmax(130px,.9fr) minmax(150px,1fr) minmax(0,2fr);
  gap:calc(var(--u)*2);padding:calc(var(--u)*2.25) 0;
  border-bottom:var(--p013) solid var(--cal);align-items:baseline;
}
.estandar__fila span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--concreto)}
.estandar__fila b{font-weight:400;font-size:15.5px;letter-spacing:-.008em}
.estandar__fila i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--concreto);line-height:1.65}
.estandar__fila.pendiente b{color:var(--cianotipo);border-bottom:var(--p018) dashed var(--cianotipo);
  padding-bottom:3px;display:inline-block}

@media(max-width:1080px){
  .servicios,.ventajas__rejilla{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .servicios,.ventajas__rejilla{grid-template-columns:1fr}
  .ventajas{margin-top:calc(var(--u)*6)}
  .estandar__fila{grid-template-columns:1fr;gap:var(--u);padding:calc(var(--u)*2) 0}
  .estandar__fila.pendiente b{display:inline-block}
}

/* ══════════════════════════════════════════════════════════════════════
   AIRE · separaciones que faltaban
   ══════════════════════════════════════════════════════════════════════ */

/* Inversión: el estándar se despega del bloque de desarrollos y se
   anuncia con su propia regla, como una lámina nueva. */
.estandar{
  margin-top:calc(var(--u)*13);
  padding-top:calc(var(--u)*6);
  border-top:var(--p018) solid var(--tinta);
}
.estandar__intro{margin-bottom:calc(var(--u)*4)}
#desarrollos>.contenedor>.lede{margin-bottom:calc(var(--u)*2)}
#desarrollos-lista{margin-bottom:calc(var(--u)*2)}

/* Despacho: párrafos más aireados y la ficha alineada con el texto. */
#despacho p+p{margin-top:calc(var(--u)*3.5)}
#despacho .lede+p,#despacho h2+p{margin-top:calc(var(--u)*3)}
#despacho .dos-col{gap:calc(var(--u)*11)}
#despacho .rotulo{margin-top:calc(var(--u)*6)}

@media(max-width:820px){
  .estandar{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*4)}
  #despacho .dos-col{gap:calc(var(--u)*6)}
  #despacho .rotulo{margin-top:0}
}

/* ── Aire bajo los títulos de sección ─────────────────────────────────
   h2 no traía margen inferior porque casi siempre vive dentro de
   .bloque__cab, que ya lo aporta. Donde va suelto hacía falta.        */
h2+p{margin-top:calc(var(--u)*3)}
h2+.lede{margin-top:calc(var(--u)*3.5)}
#despacho h2+p{margin-top:calc(var(--u)*4.5)}
#contacto h2+.lede{margin-top:calc(var(--u)*3.5)}
.visor__cab h2+.visor__meta{margin-top:calc(var(--u)*3)}

/* Programa del proyecto, dentro del visor */
.visor__programa{margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*4);border-top:var(--p018) solid var(--tinta)}
.visor__programa ul{list-style:none;columns:2;column-gap:calc(var(--u)*5);max-width:none}
.visor__programa li{break-inside:avoid;position:relative;padding-left:calc(var(--u)*3);
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:#3A3F42;margin-bottom:calc(var(--u)*1.5)}
.visor__programa li::before{content:"";position:absolute;left:0;top:.72em;width:var(--u);height:var(--p018);background:var(--cianotipo)}
@media(max-width:820px){.visor__programa ul{columns:1}}

/* financiamiento */
.socios{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--medianil);margin-top:calc(var(--u)*6);border-top:var(--p018) solid var(--tinta);padding-top:calc(var(--u)*3)}
.socio h4{font-size:15.5px;font-weight:400;letter-spacing:-.01em;color:var(--tinta);margin-bottom:var(--u)}
.socio p{font-size:14px;line-height:1.62;color:var(--concreto)}
.socios__acciones{margin-top:calc(var(--u)*5)}
@media (max-width:760px){.socios{grid-template-columns:1fr}}