/* -------------------------------------------------------------
   TIPOGRAFÍA
   Avenir Next es tipografía de sistema en macOS e iOS y se usa tal
   cual donde exista. En Windows y Android no está, así que se sirve
   Figtree — variable, 30 KB, alojada en el propio servidor: sin
   peticiones a terceros y sin depender de Google Fonts.
   ------------------------------------------------------------- */
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =============================================================
   CREANS + GROUP — hoja de estilos
   Identidad según MANUAL_MARCA_CREANS+ (2022):
   negro y blanco principales, gris #B2B2B2 y naranjo #FE5000
   secundarios. Sin esquinas redondeadas, sin sombras.
   1 Tokens · 2 Reset · 3 Utilidades · 4 Marca · 5 Componentes
   6 Secciones · 7 Ficha · 8 Efectos · 9 Responsive
   ============================================================= */

/* ---------------- 1 TOKENS ---------------- */
:root{
  --blanco:  #FFFFFF;
  --negro:   #000000;
  --gris:    #B2B2B2;          /* gris de marca — reglas y detalles */
  --naranjo: #FE5000;          /* Pantone Orange 021 C */

  --tinta:   #000000;
  --tinta-2: #1A1A1A;
  --tinta-3: #6B6B6B;          /* texto secundario legible sobre blanco */
  --velo:    #F4F4F4;

  --linea:        rgba(0,0,0,.14);
  --linea-suave:  rgba(0,0,0,.07);
  --linea-fuerte: rgba(0,0,0,.42);

  /* Una sola familia en todo el sitio, la misma del logotipo.
     Avenir Next es tipografía de sistema en macOS e iOS; en Windows y Android
     no existe, así que cae en Figtree, que comparte proporciones y eje.
     Si se compra la licencia web de Avenir Next, se declara aquí el @font-face
     y desaparece la sustitución. */
  --display: "Avenir Next","Avenir","Figtree","Nunito Sans",system-ui,sans-serif;
  --texto:   "Avenir Next","Avenir","Figtree","Nunito Sans",system-ui,sans-serif;
  --mono:    "Avenir Next","Avenir","Figtree","Nunito Sans",system-ui,sans-serif;

  --gut:  clamp(18px,4.4vw,64px);
  --rule: 1px;
  --cab:  66px;

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.25,.46,.45,.94);
}

/* ---------------- 2 RESET ---------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--cab) + 10px); }
body{
  background:var(--blanco); color:var(--tinta);
  font-family:var(--texto); font-size:16px; font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
/* El fondo de reserva va en los contenedores de fotografía, nunca en <img>:
   sobre un PNG transparente se vería como una caja gris tras el logotipo. */
.tarjeta-media,.cruz-obra,.ficha-galeria figure{ background:var(--velo); }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
::selection{ background:var(--naranjo); color:var(--blanco); }
:focus-visible{ outline:2px solid var(--naranjo); outline-offset:3px; }
*{ border-radius:0 !important; box-shadow:none !important; }

/* ---------------- 3 UTILIDADES ---------------- */
.salto{
  position:fixed; top:-120px; left:16px; z-index:9999;
  background:var(--negro); color:var(--blanco);
  padding:.7rem 1.1rem; font-family:var(--texto); font-size:12px;
}
.salto:focus{ top:16px; }

.meta,.sec-num,.sec-tag,.filtro,.tarjeta-num,.tarjeta-info,.franja,
.pie-grid,.pie-legal,.ficha-num,.nota,.campo label,.lista-idx-cab,
.dato dt,.splash-meta,.unidad-num,.cifra dd,figcaption,.credito{
  font-family:var(--texto); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
  font-variant-numeric:tabular-nums;
}

/* ---------------- 4 MARCA ---------------- */
/* El logotipo es artwork original de la oficina (Avenir + signo "+" en
   Helvetica Neue Ultralight). NO se compone con tipografía web ni se
   recolorea: se usa el archivo tal cual, sólo escalado. */
.marca{ display:inline-block; line-height:0; }
.marca img{ display:block; width:auto; }
.cabecera .marca img{ height:19px; }
.splash  .marca img{ height:clamp(30px,5.6vw,52px); }
.pie     .marca img{ height:20px; }
.cruz-logo img{ height:clamp(20px,2vw,26px); }

/* ---------------- 5 COMPONENTES ---------------- */
/* El logotipo se sitúa por su propio signo "+": está en el 51,67% de su
   ancho y el 37,67% de su alto (medido sobre el archivo). Así el signo cae
   exactamente donde después se cruzan los ejes, y al desvanecerse el
   logotipo el signo parece quedarse. */
.splash{ position:fixed; inset:0; z-index:1000; background:var(--blanco); }
.splash-logo{
  position:absolute; left:var(--cx); top:52%;
  width:clamp(230px,30vw,430px); height:auto;
  transform:translate(-51.67%,-37.67%) scale(1.015);
  opacity:0;
  animation:logoEntra .65s var(--ease) .12s forwards,
            logoSale  .55s var(--ease) 1.05s forwards;
}
@keyframes logoEntra{ to{ opacity:1; transform:translate(-51.67%,-37.67%) scale(1); } }
@keyframes logoSale { to{ opacity:0; transform:translate(-51.67%,-37.67%) scale(1.04); } }
.splash.fuera{ opacity:0; visibility:hidden; transition:opacity .5s var(--ease),visibility .5s; }
@media (max-width:719px){
  .splash-logo{ left:var(--gut); top:44%; transform:translate(calc(-51.67% + 11px),-37.67%) scale(1.015); }
  @keyframes logoEntra{ to{ opacity:1; transform:translate(calc(-51.67% + 11px),-37.67%) scale(1); } }
  @keyframes logoSale { to{ opacity:0; transform:translate(calc(-51.67% + 11px),-37.67%) scale(1.04); } }
}

/* Un solo eje vertical divide la página de arriba abajo, hasta el pie.
   Es la línea del "+" convertida en herramienta de composición: define
   una columna izquierda y una derecha para todas las secciones. */
.reglas{ display:none; }
main{ position:relative; }
.eje-global{
  position:absolute; left:var(--cx); top:0; bottom:0; width:1px;
  background:var(--negro); z-index:1; pointer-events:none; display:none;
}
:root{ --cx:46%; }
@media (min-width:960px){ .eje-global{ display:block; } }

.riel{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.riel i{ display:block; height:100%; width:0; background:var(--naranjo); }

.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:140; height:var(--cab);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--gut);
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:var(--rule) solid transparent;
  transition:border-color .4s var(--ease);
}
.cabecera.pegada{ border-bottom-color:var(--linea); }
/* En la portada la cabecera se retira: la composición del "+" queda limpia. */
.cabecera{ opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .4s var(--ease); }
.cabecera.visible{ opacity:1; transform:none; pointer-events:auto; }

.nav{ display:none; align-items:center; gap:2rem; }
.nav a{ position:relative; font-family:var(--texto); font-size:11px; letter-spacing:.13em; text-transform:uppercase; padding:.35rem 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--negro); transition:width .4s var(--ease); }
.nav a:hover::after,.nav a.activo::after{ width:100%; }
.nav a.activo{ color:var(--naranjo); }
.nav a.activo::after{ background:var(--naranjo); }
.nav .cta{ border:var(--rule) solid var(--negro); padding:.5rem .9rem; }
.nav .cta::after{ display:none; }
.nav .cta:hover{ background:var(--negro); color:var(--blanco); }

.hamb{ display:flex; flex-direction:column; gap:5px; width:26px; padding:8px 0; }
.hamb i{ display:block; height:1.5px; width:100%; background:var(--negro); transition:transform .35s var(--ease); }
.hamb[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.hamb[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

.nav-movil[hidden]{ display:none !important; }
.nav-movil{
  position:fixed; inset:var(--cab) 0 0; z-index:135; background:var(--blanco);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut) 12vh;
  border-top:var(--rule) solid var(--linea);
}
.nav-movil > a{
  font-family:var(--display); font-weight:500; letter-spacing:-.03em;
  font-size:clamp(30px,8.6vw,48px); line-height:1.28;
  border-bottom:var(--rule) solid var(--linea); padding:.3em 0;
}
.nav-movil > a:active{ color:var(--naranjo); }
.nav-movil-pie{ margin-top:2.2rem; display:flex; flex-direction:column; gap:.4rem;
  font-family:var(--texto); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--texto); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  padding:1rem 1.7rem; border:var(--rule) solid var(--negro);
  transition:background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease);
}
.btn-solido{ background:var(--negro); color:var(--blanco); }
.btn-solido:hover{ background:var(--naranjo); border-color:var(--naranjo); }
.btn-linea:hover{ background:var(--negro); color:var(--blanco); }
.btn-bloque{ width:100%; }

/* ---------------- 6 SECCIONES ---------------- */
.seccion{ position:relative; z-index:2; padding:clamp(56px,7vw,110px) var(--gut); border-top:var(--rule) solid var(--linea); }
.seccion-cab{ display:flex; align-items:baseline; gap:1.1rem; padding-bottom:clamp(24px,3vw,44px); color:var(--tinta-3); }
.sec-num{ color:var(--naranjo); }
.sec-tag{ color:var(--tinta); }

/* HERO */
.hero{ position:relative; z-index:2; padding:calc(var(--cab) + clamp(26px,5vw,54px)) var(--gut) 0;
  min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; }
.hero-grid{ display:grid; gap:clamp(28px,5vw,58px); padding-bottom:clamp(30px,4vw,50px); }
.hero-titulo{ margin:clamp(16px,2.4vw,26px) 0 0; }
.hero-linea{
  display:block; font-size:clamp(36px,7vw,94px); font-weight:600; letter-spacing:-.045em; line-height:.94;
  border-bottom:var(--rule) solid var(--linea); padding-bottom:.06em; margin-bottom:.06em;
}
.hero-linea--acento{ color:var(--naranjo); border-bottom-color:var(--naranjo); }
.hero-bajada{ max-width:48ch; margin-top:clamp(18px,2.4vw,28px); font-size:clamp(15px,1.5vw,18px); color:var(--tinta-2); }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(20px,2.4vw,30px); }
.hero-fig{ position:relative; }
.hero-fig-marco{ overflow:hidden; border:var(--rule) solid var(--negro); aspect-ratio:4/3; }
.hero-fig-marco img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero-fig figcaption{ margin-top:.7rem; color:var(--tinta-3); }
.franja{ display:flex; flex-wrap:wrap; gap:.9rem 1.8rem; padding:1.05rem 0; color:var(--tinta-3); border-top:var(--rule) solid var(--linea); }
.hero-scroll{ display:none; margin-left:auto; align-items:center; gap:.6rem; color:var(--tinta); }
.hero-scroll i{ display:block; width:1px; height:14px; background:var(--naranjo); animation:tic 1.9s var(--ease2) infinite; }
@keyframes tic{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(6px); opacity:.3 } }

/* ESTUDIO / MANIFIESTO */
.manif-grid{ display:grid; gap:clamp(28px,4.5vw,64px); }
.declaracion{ font-family:var(--display); font-weight:500; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(25px,4.2vw,54px); max-width:21ch; }
.declaracion em{ font-style:normal; color:var(--naranjo); }
.manif-cuerpo{ display:grid; gap:1.15rem; max-width:62ch; }
.manif-cuerpo p{ font-size:clamp(15px,1.35vw,17px); color:var(--tinta-2); }

/* MARQUESINA */
.marquesina{ overflow:hidden; white-space:nowrap; border-top:var(--rule) solid var(--linea);
  border-bottom:var(--rule) solid var(--linea); padding:1rem 0; position:relative; z-index:2; background:var(--blanco); }
.marquesina-pista{ display:inline-flex; align-items:center; will-change:transform; animation:desfile 38s linear infinite; }
.marquesina-pista span{ padding:0 1.5rem; font-family:var(--texto); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.marquesina-pista i{ color:var(--naranjo); font-style:normal; }
@keyframes desfile{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* GRILLA DE OBRA */
.filtros{ display:flex; flex-wrap:wrap; gap:0; border-top:var(--rule) solid var(--linea); margin-bottom:clamp(24px,3.5vw,44px); }
.filtro{ padding:.9rem 1.1rem; border-bottom:var(--rule) solid var(--linea); border-right:var(--rule) solid var(--linea);
  color:var(--tinta-3); transition:background .3s var(--ease), color .3s var(--ease); }
.filtro sup{ font-size:8px; margin-left:.35em; opacity:.6; }
.filtro:hover{ color:var(--tinta); background:var(--velo); }
.filtro.activo{ background:var(--negro); color:var(--blanco); border-right-color:var(--negro); }

.obra{ display:grid; gap:clamp(26px,3.2vw,46px); }
.tarjeta{ position:relative; }
.tarjeta-hit{ position:absolute; inset:0; z-index:3; }
.tarjeta-media{ overflow:hidden; border:var(--rule) solid var(--negro); background:var(--velo); }
.tarjeta--ancha .tarjeta-media{ aspect-ratio:4/3; }
.tarjeta--alta  .tarjeta-media{ aspect-ratio:3/4; }
.tarjeta-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.001);
  transition:transform .95s var(--ease), filter .6s var(--ease); }
.tarjeta:hover .tarjeta-media img{ transform:scale(1.05); }
.tarjeta-meta{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .9rem; align-items:baseline; padding-top:.8rem; }
.tarjeta-num{ color:var(--naranjo); grid-row:span 2; }
.tarjeta-nombre{ font-family:var(--display); font-weight:500; letter-spacing:-.025em;
  font-size:clamp(18px,2.1vw,28px); line-height:1.12; transition:color .3s var(--ease); }
.tarjeta:hover .tarjeta-nombre{ color:var(--naranjo); }
.tarjeta-info{ color:var(--tinta-3); }
.tarjeta-info i{ font-style:normal; color:var(--naranjo); padding:0 .5em; }
.tarjeta.oculta{ display:none; }
.obra-vacia{ font-family:var(--texto); font-size:12px; color:var(--tinta-3); text-transform:uppercase; letter-spacing:.13em; }

.credito{ font-family:var(--texto) !important; font-weight:400; color:var(--tinta-3);
  border-left:2px solid var(--naranjo); padding:.1rem 0 .1rem 1rem;
  max-width:70ch; margin-bottom:clamp(24px,3vw,38px); text-transform:none; letter-spacing:0;
  font-size:14px; line-height:1.65; }

/* CIFRAS */
.cifras{ display:grid; gap:0; border-top:var(--rule) solid var(--linea); }
.cifra{ padding:1.2rem clamp(16px,2.4vw,36px) 1.2rem 0; border-bottom:var(--rule) solid var(--linea); }
.cifra dt{ font-family:var(--display); font-weight:600; font-size:clamp(34px,4.2vw,60px);
  letter-spacing:-.04em; line-height:.95; font-variant-numeric:tabular-nums; }
.cifra dd{ color:var(--tinta-3); margin-top:.6rem; }

/* ÍNDICE CRONOLÓGICO */
.idx{ border-top:var(--rule) solid var(--linea); }
.idx-anio{ display:grid; gap:.2rem 1.6rem; padding:clamp(16px,2vw,24px) 0; border-bottom:var(--rule) solid var(--linea); }
.idx-anio > h3{ font-family:var(--texto); font-weight:400; font-size:13px; letter-spacing:.14em; color:var(--naranjo); }
.idx-anio ul{ display:grid; gap:.28rem; }
.idx-anio li{ font-size:14px; color:var(--tinta-2); }
.idx-anio li b{ font-weight:400; color:var(--tinta); }
.idx-anio li span{ font-family:var(--texto); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); padding-left:.6em; }

/* UNIDADES / ÁREAS */
.unidades{ display:grid; gap:0; border-top:var(--rule) solid var(--linea); }
.unidad{ display:grid; gap:.5rem 1.6rem; padding:clamp(22px,2.8vw,38px) 0;
  border-bottom:var(--rule) solid var(--linea); transition:padding-left .5s var(--ease), background .5s var(--ease); }
.unidad:hover{ padding-left:clamp(10px,1.6vw,26px); background:var(--velo); }
.unidad-num{ color:var(--naranjo); }
.unidad-titulo{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(22px,3.2vw,42px); line-height:1.06; }
.unidad-titulo .mas{ font-weight:300; padding:0 .3em; color:var(--naranjo); }
.unidad-texto{ color:var(--tinta-2); max-width:58ch; font-size:15px; }
.unidad-servicios{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.35rem .55rem; }
.unidad-servicios li{ font-family:var(--texto); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); border:var(--rule) solid var(--linea); padding:.3rem .55rem; }

.tipologias{ margin-top:clamp(32px,4vw,56px); display:grid; gap:1rem; }
.tipologias ul{ display:flex; flex-wrap:wrap; gap:0; border-top:var(--rule) solid var(--linea); border-left:var(--rule) solid var(--linea); }
.tipologias li{ flex:1 1 150px; padding:1rem 1.1rem; border-bottom:var(--rule) solid var(--linea);
  border-right:var(--rule) solid var(--linea); font-family:var(--texto); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; transition:background .3s var(--ease), color .3s var(--ease); }
.tipologias li:hover{ background:var(--negro); color:var(--blanco); }

/* CONTACTO */
.contacto-grid{ display:grid; gap:clamp(34px,5vw,72px); }
.contacto-titulo{ font-family:var(--display); font-weight:500; letter-spacing:-.035em; line-height:1.04; font-size:clamp(28px,4.8vw,62px); }
.contacto-mail{ display:inline-block; margin-top:1.5rem; font-family:var(--display); font-weight:400;
  letter-spacing:-.03em; font-size:clamp(19px,2.5vw,31px); border-bottom:2px solid var(--linea-fuerte);
  padding-bottom:.08em; transition:color .3s var(--ease), border-color .3s var(--ease); overflow-wrap:anywhere; }
.contacto-mail:hover{ color:var(--naranjo); border-color:var(--naranjo); }
.dato{ margin-top:clamp(28px,4vw,50px); display:grid; gap:0; border-top:var(--rule) solid var(--linea); }
.dato > div{ display:grid; gap:.35rem; padding:1rem 0; border-bottom:var(--rule) solid var(--linea); }
.dato dt{ color:var(--tinta-3); }
.dato dd{ font-size:15px; color:var(--tinta-2); }
.dato dd a{ border-bottom:1px solid var(--linea-fuerte); margin-right:1.1rem; transition:color .3s var(--ease), border-color .3s; }
.dato dd a:hover{ color:var(--naranjo); border-color:var(--naranjo); }

.formulario{ display:grid; gap:1.15rem; align-content:start; }
.campo{ display:grid; gap:.5rem; }
.campo label{ color:var(--tinta-3); }
.campo input,.campo textarea{ font-family:var(--texto); font-size:16px; font-weight:400; color:var(--tinta);
  background:transparent; border:0; border-bottom:var(--rule) solid var(--linea-fuerte); padding:.6rem 0; width:100%;
  transition:border-color .3s var(--ease); }
.campo input:focus,.campo textarea:focus{ outline:none; border-bottom-color:var(--naranjo); }
.campo textarea{ resize:vertical; min-height:96px; }
.campo.malo input,.campo.malo textarea{ border-bottom-color:#B3261E; }
.nota{ font-size:10px; letter-spacing:.1em; color:var(--tinta-3); }
.nota.ok{ color:var(--naranjo); }
.nota.error{ color:#B3261E; }

/* PIE */
.pie{ position:relative; z-index:2; border-top:var(--rule) solid var(--negro);
  padding:clamp(32px,4vw,54px) var(--gut) clamp(22px,3vw,34px); }
.pie-grid{ display:grid; gap:.8rem clamp(18px,2.4vw,40px); color:var(--tinta-3); }
.pie-marca{ color:var(--tinta); font-family:var(--texto) !important; font-size:15px; text-transform:none; letter-spacing:-.01em; }
.pie-marca .mas{ color:var(--naranjo); font-weight:300; padding:0 .3em; }
.pie-grid a:hover{ color:var(--naranjo); }
.pie-legal{ margin-top:clamp(24px,3vw,42px); padding-top:1.1rem; border-top:var(--rule) solid var(--linea);
  display:grid; gap:.4rem; font-size:10px; letter-spacing:.1em; color:var(--tinta-3); }

/* ---------------- 7 FICHA DE PROYECTO ---------------- */
.ficha{ position:fixed; inset:0; z-index:200; }
.ficha-velo{ position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:opacity .45s var(--ease); }
.ficha-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(760px,100%); background:var(--blanco);
  border-left:var(--rule) solid var(--negro); overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(20px,3.2vw,44px); transform:translateX(100%); transition:transform .55s var(--ease);
}
.ficha.abierta .ficha-velo{ opacity:1; }
.ficha.abierta .ficha-panel{ transform:translateX(0); }
.ficha-cerrar{ position:sticky; top:0; margin-left:auto; display:flex; align-items:center; gap:.6rem;
  font-family:var(--texto); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--blanco); padding:.4rem 0 .9rem; z-index:2; }
.ficha-cerrar:hover{ color:var(--naranjo); }
.ficha-cab{ border-top:var(--rule) solid var(--linea); padding-top:1.2rem; }
.ficha-num{ color:var(--naranjo); }
.ficha-nombre{ font-family:var(--display); font-weight:600; letter-spacing:-.035em;
  font-size:clamp(26px,4.2vw,48px); line-height:1.02; margin:.5rem 0 .8rem; }
.ficha-resumen{ color:var(--tinta-2); max-width:48ch; font-size:clamp(15px,1.5vw,17px); }
.ficha-galeria{ margin:clamp(22px,3vw,34px) 0; display:grid; gap:10px; }
.ficha-galeria figure{ border:var(--rule) solid var(--negro); overflow:hidden; }
.ficha-galeria img{ width:100%; }
.ficha-cuerpo{ display:grid; gap:clamp(22px,3vw,36px); }
.ficha-texto p{ color:var(--tinta-2); margin-bottom:1rem; font-size:15px; }
.ficha-datos{ border-top:var(--rule) solid var(--linea); }
.ficha-datos > div{ display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; padding:.8rem 0; border-bottom:var(--rule) solid var(--linea); }
.ficha-datos dt{ font-family:var(--texto); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }
.ficha-datos dd{ font-size:14px; color:var(--tinta-2); }
body.bloqueado{ overflow:hidden; }
body.bloqueado .cabecera{ opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }

/* ---------------- 8 EFECTOS ---------------- */
.rev{ opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s); }
.rev.dentro{ opacity:1; transform:none; }
.no-js .rev{ opacity:1 !important; transform:none !important; }
html:not(.listo) .rev{ transition-delay:0s; }

/* ---------------- 9 RESPONSIVE ---------------- */
@media (min-width:720px){
  .hero-grid{ grid-template-columns:1fr; }

  .obra{ grid-template-columns:repeat(2,1fr); }
  .tarjeta--destacada{ grid-column:span 2; }
  .tarjeta--destacada .tarjeta-media{ aspect-ratio:16/9; }
  .pie-grid{ grid-template-columns:repeat(2,1fr); }
  .pie-legal{ grid-template-columns:1fr auto; }
  .pie-legal span:last-child{ text-align:right; }
  .unidad{ grid-template-columns:auto minmax(0,.95fr) minmax(0,1.25fr); align-items:start;
    column-gap:clamp(20px,2.6vw,40px); }


  .ficha-galeria{ grid-template-columns:1fr 1fr; }
  .ficha-galeria figure:first-child{ grid-column:span 2; }
}
@media (min-width:960px){
  :root{ --cab:76px; }
  .reglas{ display:grid; }
  .nav{ display:flex; }
  .hamb{ display:none; }
  .nav-movil{ display:none !important; }
  .hero-scroll{ display:flex; }
  /* La grilla del hero coincide con las 6 reglas estructurales del fondo:
     el borde de la imagen cae exactamente sobre la quinta línea. */
  .hero-grid{ grid-template-columns:repeat(6,1fr); column-gap:0; align-items:end; }
  .hero-grid > :first-child{ grid-column:1 / span 4; padding-right:var(--gut); }
  .hero-fig{ grid-column:5 / span 2; }
  .hero-fig-marco{ aspect-ratio:3/4; }
  .manif-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; }
  .obra{ grid-template-columns:repeat(3,1fr); }
  .tarjeta--ancha{ grid-column:span 2; }
  .tarjeta--alta{ grid-column:span 1; }
  .tarjeta--destacada{ grid-column:span 3; }
  .tarjeta--destacada .tarjeta-media{ aspect-ratio:2.35/1; }

  .pie-grid{ grid-template-columns:repeat(4,1fr); }
  .idx-anio ul{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1280px){ .obra{ gap:46px 40px; } }

@media (prefers-reduced-motion:reduce){
  .marquesina-pista{ animation:none; }
  .hero-scroll i{ animation:none; }
  html{ scroll-behavior:auto; }
}


/* =============================================================
   10 PORTADA — LA CRUZ
   El "+" de la marca deja de ser un signo y pasa a ser el sistema
   de coordenadas de la página: eje vertical = columna del sitio,
   eje horizontal = la obra. Las líneas son vectoriales, el texto
   es texto real y la imagen ocupa la columna derecha completa.
   --cx y --cy sitúan el cruce; todo lo demás se deduce de ahí.
   ============================================================= */
.cruz{
  --cy:52%;
  position:relative; z-index:2;
  height:100svh; min-height:520px;
  background:var(--blanco); overflow:hidden;
}

/* Ejes */
/* Los cuatro brazos nacen del signo "+" con la misma separación y nunca lo
   tocan. --brecha = medio signo + un canal de respiro.
   --cx se fija en píxeles enteros desde el JS: en porcentaje caía en medio
   píxel y el trazo vertical se veía más grueso que el horizontal. */
.cruz{ --marca:22px; --brecha:calc(var(--marca) / 2 + var(--canal)); }
.cruz-eje-v,.cruz-eje-h{ position:absolute; background:var(--negro); z-index:3; }
.cruz-eje-v{ left:var(--cx); width:1px; }
.cruz-eje-h{ top:var(--cy); height:1px; }
.cruz-eje-v--sup{ top:0; height:calc(var(--cy) - var(--brecha)); transform-origin:bottom; }
.cruz-eje-v--inf{ top:calc(var(--cy) + var(--brecha)); bottom:0; transform-origin:top; }
.cruz-eje-h--izq{ left:0; width:calc(var(--cx) - var(--brecha)); transform-origin:right; }
/* El brazo derecho no existe: la línea moriría sobre la fotografía. */
.cruz-eje-h--der{ display:none; }
.cruz-mas{
  position:absolute; left:var(--cx); top:var(--cy); z-index:5;
  width:var(--marca); height:var(--marca); transform:translate(-50%,-50%);
}
.cruz-mas::before,.cruz-mas::after{ content:""; position:absolute; background:var(--negro); }
.cruz-mas::before{ left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; }
.cruz-mas::after{ top:50%; left:0; right:0; height:1px; margin-top:-.5px; }

/* Imagen: columna derecha completa, el eje horizontal la cruza por encima */
/* Columna derecha completa, despegada del eje vertical la misma distancia
   que el resto de la composición. */
.cruz-obra{
  position:absolute;
  left:calc(var(--cx) + var(--canal));
  top:0; right:0; bottom:0;
  z-index:2; margin:0; overflow:hidden;
}
.cruz-obra img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }

/* Navegación: alineada por su derecha contra el eje vertical */
.cruz-nav{
  position:absolute; right:calc(100% - var(--cx) + var(--canal)); top:clamp(22px,4vh,46px);
  z-index:4; display:grid; gap:.55rem; text-align:right;
}
.cruz-nav a{
  font-family:var(--texto); font-weight:500; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta); transition:color .3s var(--ease);
}
.cruz-nav a:hover{ color:var(--naranjo); }

/* Crédito de la imagen: espejo de la navegación, abajo y contra el mismo eje */
.cruz-credito{
  position:absolute; right:calc(100% - var(--cx) + var(--canal)); bottom:clamp(22px,4vh,46px);
  z-index:4; text-align:right; width:min(34ch,26vw);
  font-family:var(--texto); font-weight:400; font-size:11px; letter-spacing:.03em;
  line-height:1.7; color:var(--tinta-3); text-transform:none;
}
.cruz-credito b{ font-weight:400; color:var(--tinta); display:block; }

/* Logotipo y señal de descenso, en el cuadrante vacío */
.cruz-logo{ position:absolute; left:var(--gut); top:clamp(22px,4vh,46px); z-index:4; }
.cruz-baja{
  position:absolute; left:var(--gut); bottom:clamp(22px,4vh,46px); z-index:4;
  font-family:var(--texto); font-weight:500; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); display:flex; align-items:center; gap:.5rem;
}
.cruz-baja i{ display:block; width:1px; height:13px; background:var(--naranjo);
  animation:tic 1.9s var(--ease2) infinite; }

/* Entrada: las líneas se dibujan */
.cruz-eje-v{ transform:scaleY(0); transition:transform 1s var(--ease) .2s; }
.cruz-eje-h{ transform:scaleX(0); transition:transform 1s var(--ease) .35s; }
.cruz.dibujada .cruz-eje-v{ transform:scaleY(1); }
.cruz.dibujada .cruz-eje-h{ transform:scaleX(1); }
.cruz-mas{ opacity:0; transition:opacity .35s var(--ease); }
.cruz-nav,.cruz-credito,.cruz-logo,.cruz-baja,.cruz-obra{
  opacity:0; transition:opacity 1s var(--ease) .85s; }
.cruz.dibujada :is(.cruz-mas,.cruz-nav,.cruz-credito,.cruz-logo,.cruz-baja,.cruz-obra){ opacity:1; }
.no-js .cruz-eje-v,.no-js .cruz-eje-h{ transform:none !important; }
.no-js .cruz :is(.cruz-mas,.cruz-nav,.cruz-credito,.cruz-logo,.cruz-baja,.cruz-obra){ opacity:1 !important; }

/* Móvil: lógica propia, no una reducción. El eje vertical se retira y la
   imagen pasa a ser una banda inferior bajo el eje horizontal. */
@media (max-width:719px){
  .cruz{ --cx:0%; --cy:44%; }
  .cruz-eje-v{ display:none; }
  .cruz-mas{ left:var(--gut); }
  .cruz-obra{ left:0; top:calc(var(--cy) + var(--canal)); bottom:0; }
  .cruz-eje-h--izq{ width:calc(var(--gut) + var(--marca) / 2 - var(--brecha)); }
  .cruz-eje-h--der{ left:calc(var(--gut) + var(--marca) / 2 + var(--brecha)); }
  .cruz-eje-v--sup,.cruz-eje-v--inf{ display:none; }
  /* La navegación se apila a la izquierda; nunca se sale de pantalla. */
  .cruz-nav{ position:absolute; right:auto; left:var(--gut);
    top:clamp(88px,13vh,116px); bottom:auto; text-align:left; gap:.45rem; }
  .cruz-nav a{ font-size:12px; }
  /* El crédito queda sobre el blanco, encima del eje: siempre legible. */
  .cruz-credito{ right:auto; left:var(--gut); width:auto; max-width:32ch;
    bottom:calc(100% - var(--cy) + 14px); text-align:left; }
  .cruz-logo{ top:clamp(20px,4vh,34px); }
  .cruz-baja{ display:none; }
}

/* =============================================================
   11 PROYECTOS EN EL EJE HORIZONTAL
   La obra avanza hacia la derecha sobre la línea horizontal del "+".
   ============================================================= */
.tira-marco{ position:relative; margin:0 calc(var(--gut) * -1); padding:0 var(--gut); }
.tira-marco::before{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 26px);
  height:1px; background:var(--linea); z-index:0;
}
.tira{
  position:relative; z-index:1;
  display:flex; gap:clamp(18px,2.4vw,34px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-left:var(--gut);
  padding-bottom:14px; scrollbar-width:thin;
}
.tira::-webkit-scrollbar{ height:2px; }
.tira::-webkit-scrollbar-thumb{ background:var(--negro); }
.tira::-webkit-scrollbar-track{ background:var(--linea-suave); }
.tira .tarjeta{ flex:0 0 clamp(230px,30vw,400px); scroll-snap-align:start; }
.tira .tarjeta.oculta{ display:none; }
.tira .tarjeta-media{ aspect-ratio:3/4 !important; border:0; }
.tira .tarjeta--destacada,.tira .tarjeta--ancha,.tira .tarjeta--alta{ grid-column:auto; }

.tira-mando{ display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.tira-mando button{
  font-family:var(--texto); font-size:15px; line-height:1; padding:.5rem .7rem;
  border:1px solid var(--linea); color:var(--tinta);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tira-mando button:hover:not(:disabled){ background:var(--negro); color:var(--blanco); border-color:var(--negro); }
.tira-mando button:disabled{ color:var(--gris); cursor:default; }
.tira-pista{ height:1px; background:var(--linea); margin-top:16px; position:relative; }
.tira-pista i{ position:absolute; left:0; top:0; height:1px; background:var(--naranjo); width:0; }

/* La unidad Build lleva su propio color, sólo aquí */
.unidad--build:hover{ background:#003E49; }
.unidad--build:hover :is(.unidad-titulo,.unidad-texto){ color:var(--blanco); }
.unidad--build:hover .unidad-num{ color:var(--blanco); }
.unidad--build:hover .unidad-servicios li{ color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.3); }
.unidad-logo img{ height:clamp(19px,2.4vw,30px); width:auto; display:block; }
.unidad--build:hover .unidad-logo img[data-negro]{ display:none; }
.unidad--build .unidad-logo img[data-blanco]{ display:none; }
.unidad--build:hover .unidad-logo img[data-blanco]{ display:block; }

/* Título accesible: la portada es composición, pero el documento necesita un H1 */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Un área de trabajo no es una variante de marca: se distingue del logotipo */
.unidad-area{ font-weight:400; letter-spacing:-.02em; color:var(--tinta-2); }


/* =============================================================
   12 EL PLIEGO
   La página funciona como un libro abierto: el eje vertical es el
   lomo. Hay una página izquierda y una derecha, con un canal de
   respiro a cada lado del eje. Ningún contenido cruza la línea.
   ============================================================= */
/* --canal es la única distancia de respiro del sitio: separa el contenido
   del eje en las secciones, separa los brazos del "+" en la portada y
   despega la imagen de la línea central. Cambiarla mueve todo a la vez. */
:root{ --canal:clamp(20px,2.4vw,38px); }

.pliego{ display:grid; gap:clamp(22px,3vw,34px) 0; }
/* min-width:0 fuera de la consulta de medios: sin esto, en móvil la tira
   de proyectos estira su columna y aparece scroll horizontal en la página. */
.pliego > *{ min-width:0; }

@media (min-width:960px){
  .pliego{
    grid-template-columns:
      calc(var(--cx) - var(--gut) - var(--canal))   /* página izquierda */
      calc(var(--canal) * 2)                        /* canal, el eje al centro */
      1fr;                                          /* página derecha */
    gap:0;
    align-items:start;
  }
  .pliego > .izq{ grid-column:1; padding-right:var(--canal); }
  .pliego > .der{ grid-column:3; }
}

/* Toda sección es un pliego: rótulo a la izquierda, contenido a la derecha */
.seccion{ display:grid; gap:clamp(22px,3vw,34px) 0; }
.seccion > *{ min-width:0; }
@media (min-width:960px){
  .seccion{
    grid-template-columns:
      calc(var(--cx) - var(--gut) - var(--canal))
      calc(var(--canal) * 2)
      1fr;
    gap:0; align-items:start;
  }
  .seccion > *{ grid-column:3; min-width:0; }
  .seccion > .izq{ grid-column:1; padding-right:var(--canal); }
  .seccion > .ancho{ grid-column:1 / -1; }
  .seccion-cab{ padding-bottom:clamp(20px,2.4vw,32px); }
}

/* =============================================================
   13 NOSOTROS Y ALIANZAS
   Las secciones se apoyan en el eje: rótulo a la izquierda,
   contenido a la derecha.
   ============================================================= */
.nosotros-marca{ line-height:0; }
.nosotros-marca img{ height:clamp(26px,3.4vw,42px); width:auto; }
.nosotros-texto{ display:grid; gap:1.1rem; max-width:60ch; }
.nosotros-texto p{ font-size:clamp(15px,1.4vw,17px); color:var(--tinta-2); }

.unidades{ margin-top:clamp(34px,4.5vw,64px); display:grid; gap:0;
  border-top:var(--rule) solid var(--linea); }
.unidad{ padding:clamp(24px,3vw,42px) 0; border-bottom:var(--rule) solid var(--linea); transition:none; }
.unidad:hover{ background:transparent; }
.unidad-logo{ margin:0; line-height:0; }
.unidad-logo img{ height:clamp(21px,2.6vw,32px); width:auto; display:block; }

/* Creans + Build lleva el verde petróleo de su propia identidad.
   El bloque sale a sangre completa y el eje lo cruza en blanco, para que
   la línea siga dividiendo la página sin interrumpirse. */
.unidad--build{ position:relative; background:#003E49; color:var(--blanco);
  margin:0 calc(var(--gut) * -1); padding:clamp(30px,3.6vw,50px) var(--gut); }
.unidad--build::after{ content:""; position:absolute; left:var(--cx); top:0; bottom:0;
  width:1px; background:rgba(255,255,255,.34); pointer-events:none; display:none; }
@media (min-width:960px){ .unidad--build::after{ display:block; } }
.unidad--build .unidad-num{ color:rgba(255,255,255,.6); }
.unidad--build .unidad-texto{ color:rgba(255,255,255,.88); }
.unidad--build .unidad-servicios li{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.28); }












/* Cifras e índice, dentro de la página derecha */
.cifras{ display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--rule) solid var(--linea); }
.idx-anio{ display:grid; gap:.5rem 0; padding:clamp(16px,2vw,24px) 0;
  border-bottom:var(--rule) solid var(--linea); }
.idx-anio ul{ display:grid; gap:.3rem; }
@media (min-width:720px){ .idx-anio ul{ grid-template-columns:repeat(2,1fr); gap:.3rem 1.8rem; } }
.contacto-grid{ display:grid; gap:clamp(30px,4vw,52px); }


/* La tira de proyectos nace en el eje y se va hacia la derecha, saliendo
   del margen: la obra avanza sobre el eje horizontal del "+". */
.seccion--tira .tira-marco{ margin:0 calc(var(--gut) * -1) 0 0; padding:0; }
.seccion--tira .tira-marco::before{ display:none; }
.seccion--tira .tira{ padding-right:var(--gut); }
.seccion--tira .tira-mando{ margin:clamp(20px,2.6vw,32px) 0 0; }
.seccion--tira .filtros{ margin-bottom:0; }
.seccion--tira .credito{ margin-bottom:clamp(20px,2.4vw,30px); }
@media (max-width:959px){
  .seccion--tira .tira-marco{ margin:0 calc(var(--gut) * -1); }
  .seccion--tira .tira{ padding-left:var(--gut); }
}

/* En el índice, el rótulo del año se alinea con la línea de base de las obras */
.idx-anio > h3{ padding-top:.15rem; }


/* -------------------------------------------------------------
   CARRUSEL DE ALIADOS
   Logotipos homologados a un solo gris y a una misma altura. La
   pista se duplica sola cuando hay suficientes para llenar el
   ancho; con pocos queda quieta y alineada al eje.
   ------------------------------------------------------------- */
.alianzas-texto{ display:grid; gap:1rem; max-width:62ch; }
.alianzas-texto p{ font-size:clamp(15px,1.4vw,17px); color:var(--tinta-2); }

.carrusel{
  margin-top:clamp(30px,4vw,52px); overflow:hidden;
  padding:clamp(6px,1vw,12px) 0;
}
.carrusel-pista{ display:flex; align-items:center; gap:clamp(34px,5vw,72px); width:max-content; }
.carrusel-pista.rueda{ animation:rodar 30s linear infinite; }
.carrusel:hover .carrusel-pista.rueda{ animation-play-state:paused; }
@keyframes rodar{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.carrusel .aliado{ flex:0 0 auto; padding:0; border:0; }
/* --e equilibra ópticamente logotipos de proporciones distintas:
   un lockup alto se ve más chico que uno ancho a la misma altura. */
.carrusel .aliado img{
  height:calc(clamp(26px,2.6vw,38px) * var(--e,1)); width:auto; opacity:.9;
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.carrusel .aliado a:hover img{ opacity:1; filter:brightness(.55); }

@media (prefers-reduced-motion:reduce){ .carrusel-pista.rueda{ animation:none; } }


/* -------------------------------------------------------------
   La imagen de portada baja hasta Nosotros
   Va al final del archivo a propósito: la declaración por defecto
   de .cruz aparece más abajo en la cascada y anularía este valor
   si estuviera antes.
   ------------------------------------------------------------- */
/* La portada no lleva regla de cierre: el corte lo marca el propio
   cambio de campo entre la fotografía y el blanco. */
#nosotros{ border-top:0; }