/* ═══════════════════════════════════════════
   CONALCRETOS SAS — Design system
   ═══════════════════════════════════════════ */

:root{
  /* brand — sobre fondo oscuro el verde de marca se aclara para el texto
     y se reserva el verde profundo para rellenos sólidos */
  --green:#8CC63F;
  --green-s:#33741A;
  --green-d:#1E4A0E;
  --green-l:#B4E07A;
  --green-soft:rgba(140,198,63,.13);
  --yellow:#FED501;
  --yellow-d:#FFE04D;

  /* neutrals — prueba 2026-08-15: toda la página adopta el verde profundo que
     antes sólo tenía alquiler (#081408). La rampa anterior, casi neutra, era:
     deep #050806 · paper #0B100D · paper-2 #101711 · surface #141C17 ·
     surface-2 #1A241D. Volver a esos cinco valores revierte la prueba. */
  --deep:#081408;
  --ink:#F2F6EF;
  --ink-2:#C3CEC4;
  --muted:#8B978D;
  /* filetes sobre lienzo oscuro — el hero los define y el resto de la página
     los hereda; al ser translúcidos se aclaran solos sobre las superficies */
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.22);
  --line:var(--hair);
  --line-2:rgba(255,255,255,.07);
  --paper:#0A180A;
  --paper-2:#0E1F0E;
  --surface:#122612;
  --surface-2:#182F18;

  /* ── verde de las secciones ──
     Un solo lienzo para toda la página: el mismo del hero, sin costuras. Se probó
     una alternancia claro/oscuro (--sec-b #0F240F, un peldaño real de ΔL* ≈ 7) y
     se descartó: rayaba la página en franjas. Para volver a ella basta devolverle
     su fondo a .sec--alt en el bloque SECTIONS. */
  --sec-a:#081408;  /* el mismo lienzo del hero */
  --sec-b:#0F240F;  /* peldaño claro — en reserva, hoy sin usar */
  /* halo verde: era exclusivo de alquiler y pasa a ser un motivo de todas las
     secciones. Van dos por sección en esquinas opuestas — el de abajo a la
     izquierda algo más tenue, para que la sección conserve un arriba y un abajo */
  --halo:radial-gradient(circle,rgba(140,198,63,.09),transparent 62%);
  --halo-2:radial-gradient(circle,rgba(140,198,63,.07),transparent 64%);
  /* superficies translúcidas: una tarjeta o un marco de foto se aclara solo por
     encima del lienzo que tenga debajo, en vez de llevar un verde fijo que habría
     que revisar cada vez que cambia el fondo de la sección */
  --lift:rgba(255,255,255,.045);
  --lift-2:rgba(255,255,255,.075);

  /* chrome claro — header y footer van sobre blanco para que el logo
     de marca (letras oscuras) se lea; el lienzo intermedio sigue oscuro */
  --light:#FFFFFF;
  --light-2:#F1F4EE;
  --on-light:#101711;
  --on-light-2:#525E53;
  --line-l:#DDE4D9;

  /* type */
  --ff:'Inter',system-ui,-apple-system,sans-serif;
  --ff-d:'Inter Tight','Inter',system-ui,sans-serif;

  /* layout */
  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --r:14px;
  /* el hero fija el radio grande en 16px: tarjetas y fotos lo siguen */
  --r-lg:16px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s var(--ease);
}

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

/* sin rebote al pasar el tope (ni el final): en Mac la página se arrastraba hacia
   abajo, dejaba ver el fondo y la foto del hero se iba para el otro lado */
html{scroll-behavior:smooth;scroll-padding-top:130px;-webkit-text-size-adjust:100%;overscroll-behavior:none}

body{
  margin:0;
  font-family:var(--ff);
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink-2);
  /* el lienzo baja al negro del hero para que no haya costura entre el hero
     y la primera sección; la alternancia se recorre un peldaño */
  background:var(--deep);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

::selection{background:var(--yellow);color:var(--deep)}

:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green-s);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* texto sólo para lectores de pantalla */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ─────────── typography ─────────── */
.h2{
  font-family:var(--ff-d);
  font-size:clamp(1.95rem,4.1vw,3.15rem);
  /* se acerca al ajuste del titular del hero (-.05em / .92) sin llegar tan lejos:
     a este cuerpo un interlineado de .92 se pisaría con las tildes */
  line-height:1;
  letter-spacing:-.042em;
  font-weight:600;
  color:#fff;
  margin:0 0 0;
  text-wrap:balance;
}

/* mismo registro tipográfico que la línea de meta del hero: versal fina muy
   espaciada en blanco, con el número en el tono apagado. Fuera el círculo amarillo. */
.label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-d);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 clamp(18px,2vw,26px);
}
.label span{
  /* el número en el amarillo de marca (2026-10-15: Juan pidió más amarillo) */
  color:var(--yellow);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.label--dark{color:#fff}
/* versal con filete debajo: repite exactamente la meta del hero */
.label--rule{
  padding-bottom:22px;
  border-bottom:1px solid var(--hair);
  margin-bottom:clamp(34px,4.4vw,52px);
}

/* primera mitad del titular atenuada — el recurso que fija el hero con
   .hero__h1-dim, aquí disponible para cualquier .h2 */
.dim{color:rgba(242,246,239,.42)}



/* ─────────── buttons ─────────── */
.btn{
  --bg:var(--green-s);
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-d);
  font-size:.938rem;font-weight:500;letter-spacing:-.01em;
  /* mismo calibre que los dos botones del hero */
  padding:16px 28px;
  border-radius:100px;
  background:var(--bg);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:var(--green-d);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn svg{width:16px;height:16px;position:relative;z-index:1;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px -14px rgba(140,198,63,.5)}
.btn:hover::before{transform:translateY(0)}
.btn:hover svg{transform:translateX(4px)}
/* al presionar, el botón cede un poco: confirma el toque antes de que abra WhatsApp */
.btn:active{transform:scale(.97);transition-duration:.12s}

.btn--sm{padding:11px 20px;font-size:.875rem}

/* amarillo de marca para la acción principal de cada bloque oscuro (2026-10-15:
   "le falta protagonismo al amarillo"). Sobre el lienzo verde es lo primero que se
   ve; el header sigue en verde porque el amarillo sobre blanco se pierde. */
.btn--y{--bg:var(--yellow);color:var(--deep);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn--y::before{background:#EBC400}
.btn--y:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px -14px rgba(254,213,1,.55)}

.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--deep);box-shadow:inset 0 0 0 1px var(--ink)}

/* ═══════════ HEADER ═══════════ */
/* El header ocupa siempre 96px en la página y se pega a -16px: al bajar, sus
   16px de arriba se esconden bajo el tope y queda una barra de 80. Antes se
   encogía cambiando su alto (96→80) y todo lo de abajo saltaba 16px —el
   "movimiento raro" entre el hero y servicios—, y cerca del tope podía entrar en
   bucle. Ahora el encogido es sólo visual y sigue al scroll (--hs, 0→16px, lo
   pone script.js): nada de la página cambia de sitio. */
.hd{
  position:sticky;top:-16px;z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .35s, box-shadow .35s;
}
/* fondo opaco en un pseudo-elemento: el blanco translúcido sobre el lienzo
   oscuro se ensucia y el logo necesita blanco puro detrás. */
.hd::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--light);
}
.hd.is-stuck{
  border-bottom-color:var(--line-l);
  box-shadow:0 10px 34px -24px rgba(0,0,0,.55);
}
/* logo + menú + botón forman un solo bloque centrado en la barra, con márgenes
   iguales a lado y lado en vez de repartirse a los extremos */
/* el relleno superior crece con lo que se esconde: el contenido queda centrado
   en la parte visible de la barra sin que la barra cambie de alto */
.hd__in{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.8vw,44px);min-height:96px;padding-top:calc(var(--hs,0) * 1px)}

.hd__logo{display:flex;align-items:center;flex:none}
/* el logo pasa de su tamaño completo al de la barra pegada en esos mismos 16px */
.hd__logo img{
  width:auto;
  height:calc(clamp(46px,4.6vw,66px) - (clamp(46px,4.6vw,66px) - clamp(42px,3.8vw,54px)) * var(--hs,0) / 16);
}

.nav{margin:0}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__list>li{position:relative}
.nav__list>li>a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-d);font-size:.925rem;font-weight:500;letter-spacing:-.005em;
  padding:9px 13px;border-radius:100px;
  color:var(--on-light-2);
  transition:color .25s, background .25s;
}
.nav__list>li>a:hover,.nav__list>li>a[aria-current]{color:var(--green-s);background:rgba(51,116,26,.08)}
.nav__list>li.is-active>a{color:var(--green-s);background:rgba(51,116,26,.08)}
.chev{width:10px;height:6px;stroke-width:1.8;transition:transform .3s var(--ease)}
.has-sub:hover .chev{transform:rotate(180deg)}

.sub{
  position:absolute;top:calc(100% + 8px);left:0;min-width:224px;
  background:var(--light);border:1px solid var(--line-l);border-radius:var(--r);
  padding:8px;
  box-shadow:0 24px 48px -20px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{
  display:block;padding:9px 13px;border-radius:9px;
  font-size:.9rem;color:var(--on-light-2);transition:.22s;
}
.sub a:hover{background:var(--light-2);color:var(--green-s);padding-left:17px}

.hd__act{display:flex;align-items:center;gap:12px;flex:none}

/* llamar y escribir: sólo en móvil, junto a la hamburguesa y con su mismo calibre */
.hd__ico{display:none;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--light);border:1px solid var(--line-l);color:var(--green-s);transition:background .2s,color .2s}
.hd__ico svg{width:19px;height:19px;stroke-width:1.8}
.hd__ico:hover{background:var(--green-s);color:#fff}
.burger{display:none;width:44px;height:44px;border-radius:11px;position:relative;z-index:101;background:var(--light);border:1px solid var(--line-l)}
.burger span{
  position:absolute;left:12px;width:20px;height:1.7px;background:var(--on-light);border-radius:2px;
  transition:transform .38s var(--ease), opacity .28s;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
/* Opción A, elegida el 2026-10-15 (referencia: Foster + Partners). Una sola foto
   de obra a toda la pantalla y el titular abajo a la izquierda (el pie de foto
   de arriba a la derecha se quitó a pedido de Juan). Todo quieto: sin animación
   de entrada ni foto que se mueva con el scroll, también a pedido suyo. El hero anterior (titular a la izquierda, Tilatá
   enmarcada a la derecha) está en _respaldo-2026-10-15/. */
:root{--chrome:96px} /* el header: lo que queda del primer pantallazo (la franja de
                         arriba con teléfono y correo se quitó el 2026-10-15) */

.ha{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:max(600px,calc(100svh - var(--chrome)));
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--deep);color:#fff;
}
.ha__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ha__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
}
.ha__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* abajo termina en el verde exacto del lienzo: con .94 se adivinaba la foto y
     el borde inferior del hero quedaba marcado contra los clientes */
  background:
    linear-gradient(0deg,var(--deep) 0%,rgba(8,20,8,.94) 6%,rgba(8,20,8,.72) 34%,rgba(8,20,8,.12) 66%,rgba(8,20,8,.32) 100%),
    linear-gradient(90deg,rgba(8,20,8,.55) 0%,transparent 55%);
}
/* el bloque de texto se despega del borde inferior: sube ~70px respecto de la
   primera prueba, que lo dejaba casi pegado al final de la foto */
.ha__in{padding-bottom:clamp(64px,10vh,120px)}
.ha__meta{
  display:flex;gap:28px;margin:0 0 clamp(18px,2vw,26px);
  font-family:var(--ff-d);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.ha__meta span+span{color:rgba(255,255,255,.62);font-weight:500}
.ha__h1{
  margin:0;font-family:var(--ff-d);font-weight:600;
  font-size:clamp(3rem,8.4vw,6rem);line-height:.9;letter-spacing:-.04em;
}
.ha__h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ha__h1 .ln>span{display:block}
.ha__h1 .dim{color:rgba(242,246,239,.66)}
.ha__h1 em{font-style:normal;color:var(--green)}
.ha__row{
  display:grid;grid-template-columns:minmax(0,46ch) auto;justify-content:space-between;
  align-items:end;gap:28px 48px;
  margin-top:clamp(24px,2.6vw,34px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid rgba(255,255,255,.22);
}
.ha__lede{margin:0;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.62;color:rgba(242,246,239,.8)}
.ha__cta{display:flex;flex-wrap:wrap;gap:12px}
/* teléfono y correo debajo de los botones, a la vista apenas carga la página */
.ha__act{display:flex;flex-direction:column;gap:18px}
.ha__contact{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0}
.ha__contact a{
  display:inline-flex;align-items:center;gap:9px;padding:4px 0;
  font-size:.95rem;color:rgba(242,246,239,.88);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;
  transition:color .2s,text-decoration-color .2s;
}
.ha__contact a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.ha__contact svg{width:17px;height:17px;stroke:var(--yellow);stroke-width:1.9;flex:none}

/* ═══════════ CLIENTES ═══════════ */
.clients{padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,32px)}
.clients__t{
  margin:0 0 26px;font-family:var(--ff-d);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,246,239,.6);font-weight:600;
}
.marquee{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:clamp(48px,7vw,96px);
  width:max-content;
  animation:scroll 34s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
/* los logos de clientes son PNG de tinta oscura: se invierten a blanco */
.marquee__track img{
  height:clamp(40px,4.4vw,56px);width:auto;max-width:150px;object-fit:contain;flex:none;
  /* .42 los dejaba apagados sobre el verde (Juan, 2026-10-15: "más blancos") */
  opacity:.85;filter:grayscale(1) brightness(0) invert(1);
  transition:opacity .35s;
}
.marquee__track img:hover{opacity:1}

/* ── clientes + proyectos: un solo lienzo (2026-10-15) ──
   Antes los clientes eran una banda lisa y el halo de Proyectos empezaba con un
   corte horizontal justo debajo. Ahora el fondo y los dos halos son del bloque que
   los envuelve, y el de arriba arranca dentro del bloque (top:0): su borde ya es
   transparente cuando llega al corte con el hero. */
.prj-grp{position:relative;overflow:hidden;background:var(--sec-a)}
.prj-grp::before,.prj-grp::after{content:'';position:absolute;z-index:0;pointer-events:none}
.prj-grp::before{top:0;right:-13vw;width:52vw;height:52vw;background:var(--halo)}
.prj-grp::after{bottom:-14vw;left:-12vw;width:46vw;height:46vw;background:var(--halo-2)}
.prj-grp>.clients,.prj-grp>.sec{position:relative;z-index:1;background:none}
/* Proyectos ya no necesita su colchón completo: los clientes van en el mismo lienzo */
.prj-grp>.sec{overflow:visible;padding-top:clamp(52px,7vw,96px)}
.prj-grp>.sec::before,.prj-grp>.sec::after{display:none}

/* ═══════════ SECTIONS ═══════════ */
/* Un solo motivo de fondo para toda la página: el verde del hero + halo. .rent
   entra en el mismo juego porque el halo salió de ahí. */
.sec,.rent{position:relative;overflow:hidden}
.sec{padding:clamp(66px,9vw,124px) 0;background:var(--sec-a)}
/* Todas las secciones van sobre el mismo verde: lo que marca el cambio de sección
   es el halo y el aire, no un escalón de fondo. La clase se conserva en el markup
   para poder recuperar la alternancia con una sola línea:
   .sec--alt{background:var(--sec-b)} */
/* Dos halos por sección, en esquinas opuestas: entran y salen en diagonal, así el
   ojo baja la página en zigzag en vez de encontrar el mismo sello repetido. El de
   abajo pesa un poco menos (--halo-2, y algo más pequeño) para que la sección siga
   teniendo un arriba claro; con los dos al mismo peso la caja se ve simétrica y se
   apaga. Como cada sección recorta lo que le sobra, quedan medias lunas pegadas a
   la esquina. */
.sec::before,.rent::before,
.sec::after,.rent::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
}
/* Desplazamiento en vw, no en %: el % se resuelve contra la altura de la sección,
   así que Proyectos (muy alta) se comía el halo y Contacto (corta) lo mostraba
   entero. En vw todas las secciones muestran la misma porción del círculo. */
/* Cada halo se desvanece antes de llegar al borde de su sección (máscara en vw,
   igual que el desplazamiento). Sin esto el borde los cortaba en seco y entre
   sección y sección quedaba una línea horizontal: la costura que Juan vio entre
   clientes y proyectos (2026-10-15) se repetía en todos los cambios de sección. */
.sec::before,.rent::before{
  top:-15vw;right:-13vw;width:52vw;height:52vw;background:var(--halo);
  -webkit-mask-image:linear-gradient(180deg,transparent 15vw,#000 27vw);
          mask-image:linear-gradient(180deg,transparent 15vw,#000 27vw);
}
.sec::after,.rent::after,.prj-grp::after{
  -webkit-mask-image:linear-gradient(0deg,transparent 14vw,#000 26vw);
          mask-image:linear-gradient(0deg,transparent 14vw,#000 26vw);
}
.sec::after,.rent::after{
  bottom:-14vw;left:-12vw;width:46vw;height:46vw;background:var(--halo-2);
}
/* el contenido sube por encima de los dos halos: el ::after va después en el árbol,
   así que sin z-index se pintaría por encima del texto */
.sec>.wrap,.rent>.wrap{position:relative;z-index:1}

/* El filete ya no va encima de la cabecera: vive en .label--rule, debajo de la
   versal, igual que en el hero y en los comps de nosotros/servicios. */
.sec__hd{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);
  align-items:end;margin-bottom:clamp(40px,5vw,68px);
}
.sec__hd-note{margin:0;color:var(--muted);font-size:1.02rem;max-width:52ch}
.sec__hd--dark .sec__hd-note{color:rgba(255,255,255,.6)}
.sec__hd--dark .h2{color:var(--ink)}

/* ─────────── nosotros ─────────── */
/* Titular a la izquierda en columna ancha, párrafos a la derecha: el peso lo
   lleva la frase, no la foto. Las tres tomas van debajo, a todo el ancho. */
.about{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:start;
}
.about__h{
  font-size:clamp(2.05rem,4.6vw,3.4rem);
  /* texto claro sobre fondo oscuro pide algo más de aire que el 1 de .h2 */
  line-height:1.04;
  text-wrap:pretty;
}
.about__copy{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.about__copy p{
  /* apilado (≤960px) la columna se va a todo el ancho y la línea llegaría a ~85
     caracteres: el tope la deja en el rango legible */
  margin:0;max-width:66ch;font-size:1.03rem;line-height:1.68;
  /* mismo tono del lede del hero, más legible que --muted */
  color:rgba(242,246,239,.66);
}
.about__copy strong{color:#fff;font-weight:500}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pills li{
  font-size:.8rem;letter-spacing:.02em;padding:9px 16px;border-radius:100px;
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:color .28s,box-shadow .28s,transform .28s;
}
.pills li:hover{
  color:var(--green);box-shadow:inset 0 0 0 1px var(--green);
  transform:translateY(-2px);
}

/* ─────────── servicios ───────────
   Opción B elegida el 2026-10-15 (recorrido horizontal).
   Referencia: los recorridos horizontales pegajosos de los sitios premiados en
   Awwwards. La sección se queda quieta bajo el header y las siete fichas pasan de
   derecha a izquierda mientras se hace scroll; un contador y una barra marcan por
   dónde va. La última ficha es la llamada a cotizar. */
#servicios.sb-sec{overflow:clip;padding:0}
.sb{position:relative}
.sb__stick{
  position:sticky;top:80px;height:calc(100svh - 80px);min-height:560px;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3.4vh,38px);
  overflow:hidden;padding-block:clamp(20px,3vh,36px);
}
.sb__hd{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 48px}
.sb__hd .label{margin-bottom:14px}
.sb__hd .h2{max-width:18ch}
.sb__meter{display:flex;flex-direction:column;align-items:flex-end;gap:12px;min-width:180px}
.sb__count{font-family:var(--ff-d);font-size:.9rem;font-weight:500;color:rgba(242,246,239,.55);font-variant-numeric:tabular-nums}
.sb__count b{color:#fff;font-weight:600;font-size:1.6rem;letter-spacing:-.02em}
.sb__bar{width:180px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.sb__bar i{display:block;height:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.sb__track{
  display:flex;gap:clamp(12px,1.4vw,18px);width:max-content;
  padding-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));
  will-change:transform;
}
.sb__c{
  position:relative;flex:none;margin:0;
  width:clamp(270px,27vw,390px);height:clamp(330px,50vh,500px);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
}
.sb__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.sb__c:hover img{transform:scale(1.06)}
.sb__c::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(8,20,8,.4) 0%,transparent 22%,rgba(8,20,8,.15) 38%,rgba(8,20,8,.78) 62%,rgba(8,20,8,.96) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.sb__c figcaption{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,1.8vw,26px)}
.sb__n{font-family:var(--ff-d);font-size:.78rem;font-weight:600;letter-spacing:.16em;color:#fff}
.sb__c h3{margin:0 0 10px;font-family:var(--ff-d);font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:-.03em;font-weight:600;color:#fff}
.sb__c p{margin:0;font-size:.92rem;line-height:1.55;color:rgba(242,246,239,.78)}
/* ficha final: el amarillo de marca, la única superficie amarilla de la sección */
.sb__c--cta{background:var(--yellow);color:var(--deep);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.2vw,32px)}
.sb__c--cta::after{display:none}
.sb__c--cta img{display:none}
.sb__c--cta h3{color:var(--deep);font-size:clamp(1.6rem,2.3vw,2.2rem)}
.sb__c--cta p{color:rgba(8,20,8,.75);font-size:1rem}
.sb__c--cta .btn{--bg:var(--deep);align-self:flex-start}
.sb__c--cta .btn::before{background:var(--green-s)}
.sb__c--cta .sb__n{color:var(--deep)}

/* ─────────── alquiler (dark) ─────────── */
/* en la versión oscura este bloque se diferencia con un verde profundo */
/* el verde se rebaja para no romper la sobriedad que fija el hero: pasa de ser
   un bloque de color a un tinte apenas perceptible */
/* el verde y el halo de esta sección pasaron a ser los de toda la página: aquí
   ya no queda ningún valor propio (ver el bloque SECTIONS) */
.rent{background:var(--sec-a);color:rgba(255,255,255,.75);padding:clamp(66px,9vw,124px) 0}
/* Cinco fichas, una por máquina. auto-fill en vez de un número fijo de columnas:
   con cinco elementos cualquier retícula fija deja un hueco distinto en cada
   ancho, y así la fila se recompone sola (5 · 3 · 2 · 1) sin media queries. */
.rent__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.rent__c{
  display:flex;flex-direction:column;
  background:var(--lift);
  border-radius:var(--r-lg);overflow:hidden;
  /* anillo interior en vez de borde: no suma al ancho ni se corta en el radio */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .5s var(--ease),box-shadow .4s;
}
.rent__c:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--hair-2)}
.rent__c figure{
  margin:0;aspect-ratio:4/3;overflow:hidden;
  background:var(--lift-2);border-bottom:1px solid rgba(255,255,255,.1);
}
.rent__c figure img{
  width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:transform .9s var(--ease),opacity .5s,filter .5s;
}
.rent__c:hover figure img{transform:scale(1.06);opacity:1}
.rent__b{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px}
.rent__b h3{
  font-family:var(--ff-d);font-size:1.25rem;line-height:1.14;font-weight:600;
  letter-spacing:-.03em;color:#fff;margin:0;
}
/* modelo, año y unidad: el dato que distingue una máquina de la de al lado */
.rent__meta{
  margin:0;font-size:.813rem;line-height:1.5;
  color:rgba(242,246,239,.55);font-variant-numeric:tabular-nums;
}

/* ── disponible / en obra ──
   El punto de color es el refuerzo; la palabra es el mensaje. Quien no distingue
   el verde del gris, o lee una impresión en blanco y negro, igual se entera. */
.rent__st{
  display:flex;align-items:center;gap:8px;
  margin:10px 0 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--ff-d);font-size:.781rem;font-weight:500;letter-spacing:.02em;
  color:var(--green);
}
.rent__dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  /* el halo del punto lo hace leerse como un piloto encendido */
  box-shadow:0 0 0 3px rgba(140,198,63,.16);
}

/* máquina ocupada: la foto pierde el color y la ficha baja un peldaño, pero el
   texto se queda legible — una ficha apagada sigue siendo información útil */
.rent__c--out figure img{filter:grayscale(1);opacity:.62}
.rent__c--out:hover figure img{opacity:.72}
.rent__c--out .rent__st{color:rgba(242,246,239,.52)}
.rent__c--out .rent__dot{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.rent__c--out h3{color:rgba(255,255,255,.82)}
.rent__foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:clamp(30px,3.6vw,44px);padding-top:26px;
  border-top:1px solid var(--hair);
}
.rent__foot p{margin:0;font-size:.938rem;color:rgba(242,246,239,.55)}
.rent__foot .btn{white-space:nowrap;flex:none}

/* ─────────── proyectos ─────────── */
/* Desde 2026-10-15 Proyectos usa las franjas de obra (ver "franjas de obra" más
   abajo). Las filas con foto alternada que había antes están en el respaldo. */

/* ─────────── por qué ─────────── */
/* El comp 6B rompe la retícula de seis celdas: el argumento va a la izquierda con
   su llamada a la acción y los pilares se apilan a la derecha, separados por
   filetes. Misma familia que Proyectos: fila con hairline en vez de tarjeta. */
.why{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(30px,4.6vw,64px);align-items:start;
}
.why__lead .h2{
  /* la columna es más estrecha que el ancho completo de una cabecera de sección:
     el titular baja un peldaño para no romper en cinco líneas */
  font-size:clamp(1.8rem,3.6vw,2.85rem);
  line-height:1.02;margin-bottom:clamp(18px,2vw,26px);
}
.why__p{
  margin:0 0 clamp(26px,3vw,36px);
  font-size:1.063rem;line-height:1.66;color:rgba(242,246,239,.64);max-width:44ch;
}

.why__list{counter-reset:w;display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.why__list li{
  counter-increment:w;display:grid;gap:12px;
  padding:clamp(24px,2.8vw,30px) 0;
  border-top:1px solid var(--hair);
}
.why__list li:last-child{border-bottom:1px solid var(--hair)}
/* número + guion de 20px sin markup extra: el filete es un degradado de un solo
   tono anclado al borde derecho de la caja del contador */
.why__list li::before{
  content:counter(w,decimal-leading-zero);
  width:max-content;padding-right:34px;
  font-family:var(--ff-d);font-size:.75rem;font-weight:500;letter-spacing:.16em;
  line-height:1;color:var(--green);font-variant-numeric:tabular-nums;
  background:linear-gradient(var(--hair-2),var(--hair-2)) right center/20px 1px no-repeat;
}
.why__list h3{
  font-family:var(--ff-d);font-size:clamp(1.32rem,2.1vw,1.75rem);font-weight:600;
  letter-spacing:-.032em;line-height:1.12;color:#fff;margin:0;text-wrap:pretty;
}
.why__list p{margin:0;font-size:1rem;line-height:1.64;color:rgba(242,246,239,.6);max-width:52ch}

/* ─────────── la cara de la empresa ─────────── */
/* Cierra "Sobre nosotros" en vez de ser sección propia: un solo retrato al lado
   del texto, separado por filete como las filas de Proyectos y Por qué. */
.face{
  display:grid;grid-template-columns:clamp(200px,24%,300px) 1fr;
  gap:clamp(24px,4vw,52px);align-items:center;
  margin-top:clamp(44px,6vw,72px);
  padding-top:clamp(34px,4.6vw,56px);
  border-top:1px solid var(--hair);
}
.face__shot{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/4.6;
  /* el retrato viene recortado sobre blanco de estudio: el panel se queda claro y
     multiply funde ese fondo con el panel en vez de dejar un rectángulo blanco */
  background:#E7EEE1;
}
.face__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  mix-blend-mode:multiply;
}
.face__b{max-width:62ch}
.face__role{
  margin:0 0 10px;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:600;
}
.face__b h3{
  font-family:var(--ff-d);font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:600;
  letter-spacing:-.034em;line-height:1.06;color:#fff;margin:0 0 16px;
}
.face__d{margin:0 0 14px;font-size:1.03rem;line-height:1.68;color:rgba(242,246,239,.66)}
.face__d:last-child{margin-bottom:0}

/* ═══════════ FOOTER ═══════════ */
.ft{background:var(--light);border-top:1px solid var(--line-l);color:var(--on-light-2);padding:clamp(56px,7vw,88px) 0 clamp(26px,3vw,36px);font-size:.93rem}
.ft__top{display:grid;grid-template-columns:.85fr 2.15fr;gap:clamp(32px,4vw,56px);padding-bottom:clamp(38px,5vw,56px)}
.ft__brand p{margin:0;max-width:32ch;line-height:1.65}
/* WhatsApp, Instagram y Facebook como íconos en la línea final, a la derecha: en la
   columna de Contacto la alargaban, y bajo la descripción alargaban la de la marca */
.ft__soc{display:flex;gap:8px}
.ft__soc a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  color:var(--on-light-2);box-shadow:inset 0 0 0 1px var(--line-l);
  transition:background .25s,color .25s,box-shadow .25s,transform .25s var(--ease);
}
.ft__soc a svg{width:17px;height:17px;fill:currentColor;stroke:none}
.ft__soc a:hover{background:var(--green-s);color:#fff;box-shadow:none;transform:translateY(-2px)}
.ft__logo{display:block;margin:0 0 18px}
.ft__logo img{height:66px;width:auto}
.ft__nav{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ft__nav div{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ft__k{
  margin:0 0 6px;font-family:var(--ff-d);font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-s);
}
.ft__nav a{transition:color .25s,transform .25s var(--ease)}
.ft__nav a:hover{color:var(--on-light);transform:translateX(3px)}

.ft__btm{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;
  padding-top:20px;border-top:1px solid var(--line-l);
  font-size:.85rem;color:#5E6B60; /* #8A968B daba 3.1:1 sobre blanco */
}
.ft__btm p{margin:0}

/* ═══════════ REVEAL ═══════════
   Hidden state applies only when JS is active. If the observer never
   delivers, script.js drops the .js class so nothing stays invisible. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1080px){
  .ft__top{grid-template-columns:1fr}
  .ft__nav{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:960px){
  /* sin menú visible el bloque centrado pierde sentido: logo a un lado, burger al otro */
  .hd__in{justify-content:space-between}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);
    background:var(--light);border-left:1px solid var(--line-l);
    padding:88px 22px 32px;margin:0;
    transform:translateX(101%);visibility:hidden;
    transition:transform .48s var(--ease),visibility .48s var(--ease);
    overflow-y:auto;z-index:99;
    box-shadow:-30px 0 60px -26px rgba(0,0,0,.45);
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__list>li>a{padding:13px 14px;font-size:1.02rem;border-radius:11px;justify-content:space-between}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:2px 0 8px 14px;min-width:0;
    border-left:1px solid var(--line-l);margin-left:14px;
  }
  .has-sub .chev{display:none}
  .burger{display:block}
  .hd__act .btn--sm{display:none}
  .hd__ico{display:grid}
  .hd__act{gap:8px}
  .body-lock{overflow:hidden}
  .body-lock::before{content:'';position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.6)}

  /* apilado: los botones bajan debajo del párrafo */
  .ha__row{grid-template-columns:1fr}
  /* ── hero apilado (tablet y celular) ──
     El velo de escritorio sólo oscurece la franja de abajo, porque allá el texto
     vive abajo a la izquierda. Apilado, el bloque sube hasta el 60–80% de la
     altura y el titular caía sobre el cielo y los paneles blancos de la cubierta,
     donde el velo apenas llegaba al 12–20%. Aquí cubre todo el alto del texto y
     deja respirar sólo el borde superior de la foto. */
  .ha__veil{
    background:linear-gradient(0deg,var(--deep) 0%,rgba(8,20,8,.93) 10%,rgba(8,20,8,.8) 42%,rgba(8,20,8,.64) 72%,rgba(8,20,8,.5) 100%);
  }
  /* la foto tiene zonas blancas sueltas: una sombra difusa del mismo verde del
     lienzo asegura el borde de cada letra sin que se note como efecto */
  .ha__h1{text-shadow:0 1px 22px rgba(8,20,8,.55)}

  .sec__hd{grid-template-columns:1fr;align-items:start}
  .about{grid-template-columns:1fr;gap:26px}
  /* servicios: el contador baja debajo del título */
  .sb__hd{grid-template-columns:1fr}
  .sb__meter{align-items:flex-start}
  /* .rent__grid ya no se fuerza a una columna: con cinco fichas el auto-fill da
     3 · 2 · 1 solo, y la foto la gobierna su aspect-ratio, no una altura fija. */
  .rent__foot{flex-direction:column;align-items:flex-start;gap:20px}
  /* el argumento pasa a ser cabecera de los pilares en vez de columna paralela */
  .why{grid-template-columns:1fr;gap:clamp(26px,4vw,38px)}
}

/* el listado de servicios se parte en dos líneas antes de los 860px: cede el
   espacio a los datos de contacto */
@media(max-width:860px){
  /* servicios en táctil: sin pegajoso, las fichas se deslizan con el dedo */
  .sb{height:auto!important}
  .sb__stick{position:static;height:auto;min-height:0;padding-block:clamp(66px,9vw,96px)}
  .sb__track{
    transform:none!important;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);padding-inline:var(--gut);scrollbar-width:none;
  }
  .sb__track::-webkit-scrollbar{display:none}
  .sb__c{scroll-snap-align:start;width:min(78vw,340px);height:clamp(380px,62vh,460px)}
  .sb__meter{display:none}

}

@media(max-width:720px){
  /* los dos botones del mismo ancho: apilados con anchos distintos se leían
     como dos piezas sueltas */
  .ha__cta{flex-direction:column}
  .ha__cta .btn{justify-content:center}
  /* el encabezado ya trae los botones de llamar y escribir en todos los anchos
     de móvil: aquí repetían lo mismo justo debajo y estiraban el bloque hacia
     la zona clara de la foto */
  .ha__contact{display:none}
  .ft__nav div{gap:0}
  .ft__nav a{padding:9px 0}
  .ft__nav{grid-template-columns:1fr 1fr}
  /* apilado el retrato se iría a todo el ancho y pesaría más que el texto */
  .face{grid-template-columns:1fr;gap:24px}
  .face__shot{max-width:240px}

}

@media(max-width:560px){
  /* las dos versales en una sola línea: apiladas sumaban dos renglones de
     mayúsculas espaciadas antes del titular. Con menos tracking caben juntas;
     si en un teléfono muy angosto no caben, bajan enteras al renglón siguiente
     en vez de partirse a la mitad */
  .ha__meta{flex-wrap:wrap;gap:4px 14px;font-size:.7rem;letter-spacing:.13em}
  .ha__meta span{white-space:nowrap}
}

/* por debajo de ~438px el correo —que no tiene por dónde partirse— ya no cabe en
   media columna. Como cada celda de una rejilla mide por defecto al menos su
   contenido mínimo, estiraba las dos columnas del mapa del sitio y con ellas
   toda la fila, sacando el footer del viewport. */
@media(max-width:480px){
  .ft__top>*,.ft__nav>div{min-width:0}
  /* contacto ocupa la fila entera: así el correo cabe de una pieza */
  .ft__nav>div:last-child{grid-column:1/-1}
  .ft__nav a{overflow-wrap:anywhere}
}

@media(max-width:420px){
  /* el titular parte «lo que perdura.» en dos líneas y con .9 la «q» tocaba la «d» */
  .ha__h1{line-height:1}
  .btn{padding:14px 22px}
}

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

}

/* ═══════════════════════════════════════════
   ELEMENTOS NUEVOS — 2026-10-15
   Ideas de STC (cinta, palabras en contorno), Santorini (franjas, calado,
   barra de avance) y de Magic UI / Aceternity (texto que se enciende, foco en
   tarjetas, foto que sigue al cursor, retícula con linterna), pasadas al verde y
   amarillo de Conalcretos. Para revertir: _respaldo-2026-10-15/.
   ═══════════════════════════════════════════ */

/* ── barra de avance ── */
.hd__prog{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;z-index:2;
  background:var(--green);
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  pointer-events:none;
}

/* ── cinta de obra ── */
.tape{
  position:relative;overflow:clip;
  height:clamp(150px,17vw,230px);
  background:var(--sec-a);
}
.tape__band{
  position:absolute;left:-6%;width:112%;top:50%;
  display:flex;overflow:hidden;
  padding-block:clamp(12px,1.3vw,18px);
}
.tape__band--a{
  background:var(--yellow);color:var(--deep);
  transform:translateY(-50%) rotate(-3.2deg);
  box-shadow:0 18px 30px -18px rgba(0,0,0,.7);
  z-index:1;
}
.tape__band--b{
  background:var(--green-s);color:rgba(255,255,255,.92);
  transform:translateY(-50%) rotate(2.6deg);
}
.tape__track{
  display:flex;align-items:center;flex:none;
  gap:clamp(18px,2.2vw,34px);padding-right:clamp(18px,2.2vw,34px);
  will-change:transform;
}
.tape__track span{
  font-family:var(--ff-d);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.8rem);letter-spacing:-.01em;line-height:1;
  white-space:nowrap;
}
.tape__band--b .tape__track span{font-weight:600;font-size:clamp(.9rem,1.6vw,1.35rem);letter-spacing:.02em}
.tape__track img{width:clamp(24px,2.4vw,34px);height:auto;flex:none}
.tape__track i{
  width:9px;height:9px;flex:none;background:var(--yellow);transform:rotate(45deg);
}

/* ── franjas de obra ── */
.strip{
  display:flex;gap:10px;
  height:clamp(340px,38vw,500px);
  margin-top:clamp(44px,6vw,72px);
}
.strip__i{
  position:relative;flex:1 1 0;min-width:0;margin:0;
  border-radius:var(--r);overflow:hidden;background:var(--lift-2);
  cursor:pointer;outline-offset:3px;
  transition:flex-grow .8s var(--ease);
}
.strip__i.is-on{flex-grow:7}
/* toda la franja es el enlace a la ficha de la obra (encima de foto y rótulo) */
.strip__a{position:absolute;inset:0;z-index:2;border-radius:inherit}
.strip__a:focus-visible{outline:0}
.strip__i:has(.strip__a:focus-visible){outline:2px solid var(--yellow);outline-offset:3px}
/* "Ver proyecto": píldora amarilla en la franja abierta */
.strip__go{
  display:none;align-self:flex-start;align-items:center;gap:8px;margin-top:16px;
  padding:10px 16px 10px 18px;border-radius:100px;
  background:var(--yellow);color:var(--deep);
  font-family:var(--ff-d);font-size:.85rem;font-weight:600;letter-spacing:-.005em;line-height:1.2;
}
.strip__i.is-on .strip__go{display:inline-flex}
.strip__go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .strip__i.is-on:hover img{transform:scale(1.03)}
  .strip__i.is-on:hover .strip__go svg{transform:translateX(3px)}
}
.strip__i img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) brightness(.7);
  transition:filter .7s var(--ease),transform 1.2s var(--ease);
}
.strip__i.is-on img{filter:none}
.strip__i::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(8,20,8,.82));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.strip__i figcaption{
  position:absolute;z-index:1;left:0;bottom:0;
  display:flex;flex-direction:column;gap:4px;
  padding:clamp(18px,2vw,28px);
  white-space:nowrap;
}
.strip__t{font-family:var(--ff-d);font-size:clamp(1.3rem,2vw,1.9rem);font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1.05}
/* plegada: el rótulo gira en vertical y sólo queda el nombre */
.strip__i:not(.is-on) figcaption{
  writing-mode:vertical-rl;transform:rotate(180deg);
  left:50%;bottom:0;padding:20px 0;translate:-50% 0;
}
.strip__i:not(.is-on) .strip__t{font-size:.95rem;letter-spacing:.02em;font-weight:500;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.75)}
.strip__i:not(.is-on) img{filter:saturate(.5) brightness(.58)}

/* en Proyectos: más altas, sin margen arriba (lo da la cabecera) y la abierta
   más ancha. Desde 2026-10-15 cada franja lleva sólo el título y el botón
   amarillo: lo demás está en la ficha de la obra */
.strip--prj{height:clamp(440px,44vw,580px);margin-top:0;container-type:inline-size}
.strip--prj .strip__i.is-on{flex-grow:8}
.strip--prj .strip__i::after{background:linear-gradient(180deg,transparent 30%,rgba(8,20,8,.5) 55%,rgba(8,20,8,.94) 100%)}
/* la ficha nace con el ancho final de la franja abierta —con 8 franjas, 8 de 15
   partes del ancho libre, descontados los 7 huecos de 10px— y entra cuando la
   franja ya va abierta. Si se ajustara al ancho mientras la franja crece, el texto
   se reacomodaría en cada cuadro de la transición. --n (cuántas franjas hay) lo
   pone tools/proyectos.py en el markup */
.strip--prj .strip__i.is-on figcaption{
  width:calc((100cqw - (var(--n,8) - 1) * 10px) * 8 / (var(--n,8) + 7));white-space:normal;gap:6px;
  animation:stripIn .55s var(--ease) .32s both;
}
.strip--prj .strip__t{font-size:clamp(1.4rem,2.2vw,2.1rem);text-wrap:balance}
@keyframes stripIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── titular que se enciende con el scroll ── */
.wl-ready .w{color:rgba(242,246,239,.13);transition:color .5s var(--ease)}
.wl-ready .w.on{color:inherit}

/* ── foco en alquiler: la ficha bajo el cursor se queda, las otras se apagan ── */
@media(hover:hover) and (pointer:fine){
  .rent__c{transition:transform .5s var(--ease),box-shadow .4s,opacity .45s var(--ease),filter .45s var(--ease)}
  /* sin saturate(): el color es ahora la marca de disponibilidad, y apagarlo al
     pasar el cursor hacía que una máquina libre se leyera como ocupada */
  .rent__grid:hover .rent__c:not(:hover){opacity:.42;filter:blur(1.5px)}
}


/* ── cierre calado (dentro del footer) ── */
/* El título de sostenibilidad —lo que quedó de la franja del bosque— calado sobre
   una foto de helechos (Sebastian Hans, Unsplash, licencia libre), centrado y
   entre filetes, justo encima de la línea del ©. Va sobre el blanco del footer:
   sobre el verde oscuro ninguna foto de naturaleza terminaba de leerse. Quieta. */
.ft__claim{
  padding:clamp(40px,5.5vw,72px) 0;
  border-top:1px solid var(--line-l);
  overflow:clip;
}
.ft__claim-t{
  /* la caja —y con ella la foto— mide lo que mide el texto, para que la foto se
     encuadre en las letras y no en todo el ancho de la página */
  width:fit-content;max-width:22ch;margin:0 auto;text-align:center;text-wrap:balance;
  font-family:var(--ff-d);font-weight:700;
  /* dos líneas en escritorio (~64px en 1280): la versión anterior, de ~98px y tres
     líneas, se comía media pantalla */
  font-size:clamp(1.9rem,3.6vw + 1rem,4.4rem);
  /* con aire entre líneas: la «p» y la «y» no pueden tocar las letras altas de abajo */
  line-height:1.15;letter-spacing:-.035em;
  /* la foto sólo pinta dentro de la caja: el relleno cubre la tilde de la «ñ» y
     los trazos bajos de la última línea */
  padding:.04em .02em .12em;
  color:var(--green-s); /* sin soporte de texto calado */
  background:url("https://images.unsplash.com/photo-1563365488-1e365499ba88?w=2000&q=80&auto=format&fit=crop") 50% 50% / cover no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media(max-width:720px){
  .ft__claim-t{background-image:url("https://images.unsplash.com/photo-1563365488-1e365499ba88?w=1000&q=80&auto=format&fit=crop")}
}

/* ── responsive de los elementos nuevos ── */
@media(max-width:960px){
  /* las franjas pasan a carrusel horizontal: todas abiertas, con imán. Desde
     tablet (≤960), no sólo en móvil: a ese ancho la franja abierta queda muy
     angosta para la ficha de una obra y el texto de Tilatá se salía */
  .strip{
    height:auto;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .strip::-webkit-scrollbar{display:none}
  .strip__i,.strip__i.is-on{flex:0 0 min(78%,420px);aspect-ratio:4/5;scroll-snap-align:start}
  .strip__i img,.strip__i:not(.is-on) img{filter:none}
  .strip__i:not(.is-on) figcaption{writing-mode:horizontal-tb;transform:none;translate:none;left:0;padding:18px}
  .strip__i:not(.is-on) .strip__t{font-size:1.3rem;font-weight:600}
  /* proyectos: tarjetas 4:5 con el título y su "Ver proyecto" abajo */
  .strip--prj .strip__i figcaption,.strip--prj .strip__i.is-on figcaption{right:0;width:auto;white-space:normal;padding:20px;animation:none}
  .strip--prj .strip__i .strip__go{display:inline-flex;margin-top:12px}
}
@media(max-width:720px){
  /* a este ancho la inclinación casi no separa las cintas: se abren a mano */
  .tape__band{left:-10%;width:120%}
  .tape__band--b{top:36%;transform:translateY(-50%) rotate(4deg)}
  .tape__band--a{top:62%;transform:translateY(-50%) rotate(-4deg)}
}

@media(prefers-reduced-motion:reduce){
  .tape__track{transform:none!important}
  .wl-ready .w{color:inherit}
}

/* ═══════════════════════════════════════════
   FICHA DE PROYECTO — 2026-10-15
   La misma ficha (article.pj) vive en dos sitios: en su página propia
   (/proyectos/slug/, la que se indexa y se comparte) y, desde la portada, dentro
   de una ventana (dialog.pjm) que trae esa misma página y cambia la URL. A la
   izquierda el álbum, a la derecha qué se hizo, la ficha técnica y la llamada.
   ═══════════════════════════════════════════ */
.pj{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  background:var(--paper);color:var(--ink-2);
}

/* ── álbum ── */
/* la foto va entera (contain) sobre una copia suya desenfocada: las fotos de obra
   vienen en todos los formatos y recortarlas para llenar el marco se comía la obra */
.pj__album{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:#040A04}
.pj__bg{
  position:absolute;inset:-60px;z-index:-1;
  background:center/cover no-repeat;
  filter:blur(38px) saturate(1.15) brightness(.4);
  transition:background-image .5s var(--ease);
}
.pj__stage{position:relative;flex:1;min-height:0;display:flex}
.pj__track{
  flex:1;min-width:0;display:flex;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;
}
.pj__track::-webkit-scrollbar{display:none}
.pj__track:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px;border-radius:0}
.pj__ph{--pad:clamp(14px,2vw,28px);position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.pj__ph img{
  position:absolute;top:var(--pad);left:var(--pad);
  width:calc(100% - var(--pad) * 2);height:calc(100% - var(--pad) * 2);
  object-fit:contain;
}
.pj__nav{
  position:absolute;top:50%;z-index:2;margin-top:-23px;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(8,20,8,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .2s,color .2s,box-shadow .2s,opacity .2s,transform .16s var(--ease);
}
.pj__nav svg{width:18px;height:18px;stroke-width:1.8}
.pj__nav--prev{left:16px}
.pj__nav--next{right:16px}
.pj__nav:hover{background:var(--yellow);color:var(--deep);box-shadow:none}
.pj__nav:active{transform:scale(.94)}
.pj__nav:disabled{opacity:0;pointer-events:none}
.pj__count{
  position:absolute;left:16px;bottom:16px;z-index:2;margin:0;
  padding:7px 12px;border-radius:100px;
  background:rgba(8,20,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--ff-d);font-size:.8rem;line-height:1;font-weight:500;
  color:rgba(242,246,239,.72);font-variant-numeric:tabular-nums;
}
.pj__count b{color:#fff;font-weight:600}
.pj__thumbs{display:flex;gap:8px;padding:2px clamp(14px,2vw,28px) clamp(14px,2vw,22px);overflow-x:auto;scrollbar-width:none}
.pj__thumbs::-webkit-scrollbar{display:none}
.pj__th{
  flex:none;width:78px;height:56px;padding:0;border-radius:8px;overflow:hidden;
  opacity:.5;transition:opacity .2s,box-shadow .2s;
}
.pj__th img{width:100%;height:100%;object-fit:cover}
.pj__th:hover{opacity:.85}
.pj__th[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--yellow)}

/* ── texto: sólo título, párrafo y el botón amarillo (Juan, 2026-10-15: "el resto
   de info aparte de las fotos sobra") ── */
.pj__info{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;
  min-height:0;padding:clamp(32px,3.6vw,52px);
}
.pj__t{
  margin:0;font-family:var(--ff-d);font-weight:600;color:#fff;
  /* 1.1: en dos líneas, una tilde de la segunda no puede tocar una «g» de la primera */
  font-size:clamp(1.9rem,2.9vw,2.75rem);line-height:1.1;letter-spacing:-.035em;text-wrap:balance;
}
.pj__body p{margin:0 0 1em;font-size:1.03rem;line-height:1.7;color:rgba(242,246,239,.76);max-width:52ch;text-wrap:pretty}
.pj__body p:last-child{margin-bottom:0}
.pj__cta{margin-top:6px}

/* ── ventana (portada) ── */
html.pjm-open{overflow:hidden}
.pjm{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(12px,3vw,40px);border:0;
  background:transparent;color:inherit;overflow:hidden;
}
/* sólo abierta: el display propio no puede pisar el display:none de la cerrada */
.pjm[open]{display:grid;place-items:center}
.pjm::backdrop{background:rgba(2,6,2,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pjm[open]::backdrop{animation:pjmFade .28s ease-out}
.pjm.is-out::backdrop{animation:pjmFadeOut .18s ease forwards}
.pjm__box{
  position:relative;width:min(1200px,100%);height:min(780px,100%);
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  animation:pjmIn .36s cubic-bezier(.23,1,.32,1);
}
/* filete interior: separa la caja oscura del fondo oscuro */
.pjm__box::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);z-index:4}
.pjm.is-out .pjm__box{animation:pjmOut .18s ease forwards}
@keyframes pjmIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes pjmOut{to{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes pjmFade{from{opacity:0}}
@keyframes pjmFadeOut{to{opacity:0}}
.pjm__body{height:100%}
.pjm .pj{height:100%;animation:pjmFade .3s ease-out}
.pjm .pj__info{overflow-y:auto;overscroll-behavior:contain} /* sólo red de seguridad: el texto cabe */
.pjm__x{
  position:absolute;top:14px;right:14px;z-index:5;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(8,20,8,.6);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .2s,color .2s,transform .12s var(--ease);
}
.pjm__x svg{width:18px;height:18px;stroke-width:1.8}
.pjm__x:hover{background:#fff;color:var(--deep)}
.pjm__x:active{transform:scale(.94)}

/* ── página propia ── */
.pjp{padding:clamp(22px,3vw,36px) 0 clamp(66px,9vw,110px)}
.pjp__crumbs{margin:0 0 16px}
.pjp__crumbs a{
  display:inline-flex;align-items:center;gap:9px;padding:8px 0;
  font-family:var(--ff-d);font-size:.92rem;font-weight:500;color:rgba(242,246,239,.78);
  transition:color .2s;
}
.pjp__crumbs a svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.pjp__crumbs a:hover{color:#fff}
.pjp__crumbs a:hover svg{transform:translateX(-3px)}
.pjp .pj{border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.pjp .pj__album{height:min(720px,calc(100svh - 190px));min-height:440px}

/* ── móvil y tableta: el álbum arriba y el texto debajo ── */
@media(max-width:860px){
  .pj{grid-template-columns:1fr}
  .pj__album,.pjp .pj__album{height:auto;min-height:0}
  .pj__thumbs{padding-top:12px}
  .pjp .pj__stage{flex:none;aspect-ratio:4/3.3}

  /* la ventana ocupa la pantalla entera y no se desliza: el texto toma lo que
     necesita y la foto se acomoda en el resto (nunca menos de un tercio) */
  .pjm{padding:0}
  .pjm__box{width:100%;height:100%;border-radius:0}
  .pjm__box::after{display:none}
  .pjm .pj{grid-template-rows:minmax(32%,1fr) minmax(0,auto)}
  .pjm .pj__info{gap:14px;padding:22px 20px max(22px,env(safe-area-inset-bottom))}
  .pjm__x{position:fixed;top:12px;right:12px}
}
/* teléfono acostado: no hay alto para apilar, foto y texto lado a lado */
@media(max-width:960px) and (orientation:landscape) and (max-height:520px){
  .pjm .pj{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr}
  .pjm .pj__thumbs{display:none}
  .pjm .pj__t{font-size:1.5rem}
  .pjm .pj__body p{font-size:.92rem;line-height:1.55}
}
@media(max-width:560px){
  /* la foto casi de borde a borde: en un teléfono cada píxel de ancho cuenta */
  .pj__ph{--pad:8px}
  .pj__thumbs{display:none}
  .pj__t{font-size:clamp(1.5rem,6.4vw,1.9rem)}
  .pj__body p{font-size:.95rem;line-height:1.6}
  .pj__cta{align-self:stretch;justify-content:center}
}
/* teléfonos bajitos (iPhone SE y similares): el texto más largo de una ficha
   tiene que caber sin desplazar la ventana */
@media(max-width:560px) and (max-height:620px){
  .pjm .pj__info{gap:10px;padding:16px 18px max(16px,env(safe-area-inset-bottom))}
  .pjm .pj__t{font-size:1.4rem}
  .pjm .pj__body p{font-size:.875rem;line-height:1.5}
  .pjm .pj__cta{padding-block:13px}
}
/* en táctil se pasa con el dedo: las flechas sobran */
@media(hover:none){
  .pj__nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pjm__box,.pjm .pj,.pjm[open]::backdrop{animation:none}
}

/* ── página 404 (la genera tools/proyectos.py) ── */
.e404{padding:clamp(80px,12vw,160px) 0;min-height:62vh}
.e404 .h2{max-width:16ch}
.e404__p{margin:22px 0 34px;font-size:1.05rem;line-height:1.65;color:rgba(242,246,239,.72);max-width:46ch}
.e404__cta{display:flex;flex-wrap:wrap;gap:12px}

/* botón de cotizar dentro del menú: sólo en el desplegable del móvil, donde el
   del header no cabe */
.nav__cta{display:none}
@media(max-width:960px){
  .nav__cta{display:block;margin-top:16px}
  .nav__list>li.nav__cta>a{display:flex;justify-content:center;padding:15px 22px;border-radius:100px;font-size:.95rem;color:var(--deep)}
  .nav__list>li.nav__cta>a:hover{background:var(--bg);color:var(--deep)}
}