/* RUTA 24 · estilos base
   Reglas: escala, no peso · un solo color y lo tiene la materia · líneas finas, no cajas
   El color no vive aquí: --bg/--fg/--line los interpola app.js con el scroll (hueso → tinta). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --vh:1vh; /* unidad de viewport parametrizable: el modo dev la fija para capturas altas */

  /* interpolados por scroll — valores de arranque (espacio profundo) */
  --bg:#05060C;
  --fg:#DEDDD6;
  --fg-2:#888C9E;
  --fg-3:#565A6E;
  --line:#1E2130;
  --azul:#607CFF;
  --stroke:rgba(222,221,214,.28);
  --halo-2:rgba(96,124,255,.13);

  --f-display:'Archivo',sans-serif;
  --f-body:'Switzer','Archivo',system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(16px,3vw,48px);
  --nav-h:64px;
  --wm-top:clamp(84px,calc(var(--vh) * 13),150px);
  --wm-h:200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{background:#05060C;color:var(--fg)}
/* El fondo del viaje: capas sólidas apiladas que se descubren por opacity.
   Animar el color de fondo repinta toda la página en cada cuadro; esto no repinta nada. */
.fondo{position:fixed;inset:0;z-index:0;pointer-events:none;background:#05060C}
.fondo > i{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;will-change:opacity}
.fondo .f1{background:#080B1A}
.fondo .f2{background:#0E1634}
.fondo .f3{background:#162046}
.fondo .f4{background:#2C2E5A}
.fondo .f5{background:#524C7A}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{font-family:var(--f-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:var(--azul);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400}

.mono{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.45}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400}
.u{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.dim{color:var(--fg-3)}

/* ---------- capas de profundidad ----------
   0  atmósfera + polvo (detrás del contenido)
   1  contenido
   2  viñeta + grano
   4  la materia (delante del contenido)
   5  wordmark · 6 nav · 100 umbral                                        */
/* EL CIELO · el descenso: espacio → atmósfera (auroras) → nubes.
   Nada de esto repinta por frame: los gradientes son estáticos, las capas se
   cruzan por opacity y el vaivén son keyframes de transform. */
.cielo{position:fixed;inset:-14%;z-index:0;pointer-events:none;will-change:transform}
.capa{position:absolute;inset:0;display:block}
/* apagada: ni se compone ni se anima (una capa a opacidad 0 sigue costando) */
.capa.apagada,.aurora.apagada{visibility:hidden}
.capa.apagada,.capa.apagada > i,.aurora.apagada > i{animation-play-state:paused}
.capa-espacio{background:
    radial-gradient(58% 42% at 50% 16%,rgba(34,48,124,.34) 0%,transparent 66%),
    radial-gradient(92% 62% at 80% 104%,rgba(10,14,40,.72) 0%,transparent 72%)}
/* LA ENTRADA A LA TIERRA · el limbo del planeta visto desde la órbita: la curva
   oscura abajo, el domo verde siguiendo el borde y una franja violeta encima.
   Los tres arcos son la MISMA elipse a distintas fracciones del radio, por eso
   son concéntricos. En viewport: centro 130%, radio vertical 90%; una banda a la
   fracción f cae en y = 130% − f·90%.
   La capa mide 3 viewports de alto (inset -100%): al desplazarse con el scroll,
   una capa del tamaño de la pantalla se saldría de su propia caja y dejaría de
   pintar la parte baja. Por eso la elipse va en coordenadas del elemento
   (centro 76.667%, radio 30%). No puede ir dentro de .cielo: sus márgenes
   negativos sacan los arcos de la pantalla. */
.aurora{position:fixed;inset:-100% 0;z-index:0;pointer-events:none;opacity:0;will-change:transform}
.aurora > i{position:absolute;inset:0;display:block}
.aurora > .arco,.aurora > .arco-alto{inset:0 -3%} /* se mecen de lado ±1.5 %: sin sobrante asoma su borde */
.limbo{background:
    radial-gradient(150% 30% at 50% 76.667%,rgba(3,6,16,.98) 0%,rgba(3,6,16,.96) 70%,rgba(7,12,30,.72) 76%,rgba(10,16,38,.3) 81%,transparent 87%)}
/* El verde apenas se insinúa: alfas bajas y caídas muy largas, para que sea el
   aire encendido sobre el borde y no una banda dibujada. */
.arco{will-change:transform;background:
    radial-gradient(150% 30% at 50% 76.667%,transparent 64%,rgba(72,255,178,.145) 78.5%,rgba(72,255,178,.05) 87%,transparent 97%),
    radial-gradient(150% 30% at 50% 76.667%,transparent 71%,rgba(150,255,215,.05) 79.5%,transparent 92%);
  animation:domo 21s ease-in-out infinite alternate}
.arco-alto{will-change:transform;background:
    radial-gradient(152% 30.7% at 50% 76.667%,transparent 77%,rgba(150,104,246,.08) 88%,rgba(96,132,255,.035) 93%,transparent 100%);
  animation:domo2 29s ease-in-out infinite alternate}
@keyframes domo{from{transform:translate3d(-1%,.15%,0) scaleY(.995)}to{transform:translate3d(1.5%,-.15%,0) scaleY(1.006)}}
@keyframes domo2{from{transform:translate3d(1.5%,-.1%,0) scaleY(1.008)}to{transform:translate3d(-1.5%,.2%,0) scaleY(.992)}}
.nubes{opacity:0;background:
    radial-gradient(56% 32% at 26% 78%,rgba(152,142,212,.44) 0%,transparent 68%),
    radial-gradient(64% 36% at 74% 94%,rgba(108,120,202,.42) 0%,transparent 70%),
    radial-gradient(46% 28% at 52% 58%,rgba(178,160,222,.26) 0%,transparent 66%);
  animation:nub 34s ease-in-out infinite alternate}
@keyframes nub{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.09)}}
#polvo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vineta{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.66;
  background:radial-gradient(118% 88% at 50% 46%,transparent 42%,#000 100%)}
.grano{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
#materia{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
/* escalones de calidad: app.js baja el nivel si el equipo no sostiene el cuadro */
html[data-calidad="1"] .grano,html[data-calidad="2"] .grano,html[data-calidad="3"] .grano{display:none}
html[data-calidad="2"] .arco-alto,html[data-calidad="3"] .arco-alto{display:none}

main{position:relative;z-index:1}
section{position:relative;padding:clamp(96px,calc(var(--vh) * 14),200px) var(--gutter)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:24px}
.eyebrow{grid-column:1/3;color:var(--fg-3)}
h2{grid-column:4/13;font-size:clamp(36px,5vw,92px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
h2 .serif{font-size:1.02em}
.gigante{font-size:clamp(44px,7.6vw,152px);line-height:.96;letter-spacing:-.045em}
.lead{grid-column:4/10;font-size:clamp(17px,1.35vw,22px);line-height:1.45;color:var(--fg-2);max-width:60ch}
h3{font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:500}

/* palabras partidas (tesis, contacto) */
.w-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.w{display:inline-block;will-change:transform}

/* ---------- 00 · umbral ---------- */
.umbral{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--gutter);color:var(--fg)}
.umbral-n{font-size:clamp(48px,9vw,140px);letter-spacing:-.02em;line-height:.85;font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:var(--fg);pointer-events:none}
.nav > *{pointer-events:auto}
.nav-logo{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:20px;line-height:.85;visibility:hidden}
.nav-links{display:flex;gap:10px;align-items:center;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav.nav-hide .nav-links{opacity:0;transform:translateY(-10px);pointer-events:none}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links span{opacity:.4}

/* ---------- wordmark ---------- */
.wordmark{position:fixed;top:var(--wm-top);left:var(--gutter);z-index:5;font-family:var(--f-display);font-weight:900;font-stretch:125%;font-size:200px;line-height:.85;white-space:nowrap;letter-spacing:0;transform-origin:0 0;will-change:transform;color:var(--fg);pointer-events:none;clip-path:inset(0 0 100% 0)}
.wm-ruta,.wm-24,.wm-sp{display:inline-block;vertical-align:top}
.wm-sp{width:.25em}
.wm-24{color:transparent;-webkit-text-stroke:1px var(--stroke)}
.wordmark.docked .wm-24{color:currentColor;-webkit-text-stroke:0}


/* ---------- 01 · hero ---------- */
.hero{min-height:calc(var(--vh) * 100);padding:0 var(--gutter)}
.hero-label{position:absolute;left:52%;top:calc(var(--wm-top) + var(--wm-h) + 20px);color:var(--fg);max-width:48ch}
.hero-contacto{position:absolute;left:var(--gutter);bottom:var(--gutter);display:flex;flex-direction:column;gap:6px}
.hero-contacto .dim{margin-top:14px}
.hero-scroll{position:absolute;right:var(--gutter);bottom:var(--gutter);display:flex;align-items:flex-end;gap:28px;color:var(--fg-3)}
.flecha{position:relative;width:1px;height:34px;background:currentColor;display:block;animation:flecha 2.2s var(--ease) infinite}
.flecha::before,.flecha::after{content:"";position:absolute;bottom:0;left:0;width:1px;height:9px;background:currentColor;transform-origin:bottom center}
.flecha::before{transform:rotate(45deg)}
.flecha::after{transform:rotate(-45deg)}
@keyframes flecha{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
html.js .intro{opacity:0}

/* ---------- 02 · tesis ---------- */
.tesis .lead{grid-column:4/9}
.marquee{margin-top:clamp(64px,calc(var(--vh) * 10),140px);margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.marquee-track{display:flex;gap:clamp(48px,6vw,112px);white-space:nowrap;font-size:clamp(28px,4.5vw,84px);letter-spacing:-.03em;line-height:1;will-change:transform;width:max-content}

/* ---------- 03 · showroom ----------
   Seis salas en fila (.sh-track) dentro de un contenedor que se queda fijo (.sh-pin).
   El ancho de cada sala es --sw, el ancho útil de la pantalla (app.js lo mide sin la barra
   de scroll: 100vw la incluye y cortaría el borde derecho de cada sala). */
.showroom{padding-bottom:0}
.sh-head{padding-bottom:clamp(32px,calc(var(--vh) * 5),72px)}
/* los márgenes negativos van en el marco: ScrollTrigger mide el ancho del ancla sin ellos y la dejaría angosta */
.sh-marco{margin:0 calc(-1 * var(--gutter))}
.sh-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.sh-track{display:flex;height:100%;width:max-content;will-change:transform}
.sala{flex:0 0 var(--sw,100vw);width:var(--sw,100vw);height:100%;display:grid;grid-template-columns:8fr 4fr;column-gap:clamp(24px,3.2vw,56px);align-items:center;padding:calc(var(--nav-h) + 8px) var(--gutter) 104px}
.sala-escena{position:relative;width:100%;aspect-ratio:16/10;max-height:100%;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;background:#0b0d18;
  box-shadow:0 0 0 1px var(--line),0 40px 90px -40px rgba(0,0,0,.7)}
.sala-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.sala-pista{position:absolute;left:18px;bottom:16px;z-index:3;color:#fff;padding:7px 12px;border-radius:999px;background:rgba(6,8,18,.55);opacity:0;transition:opacity .6s var(--ease)}
.sala.dentro .sala-pista{opacity:.9}
.sala.avanzo .sala-pista{opacity:0}
.sala-info{display:flex;flex-direction:column;gap:14px;min-width:0} /* sin min-width:0 la fila de espacios (una sola línea en teléfono) ensancha la columna */
.sala-num{color:var(--fg-3)}
.sala-nombre{font-size:clamp(34px,3.6vw,64px);line-height:1;letter-spacing:-.03em;font-weight:400}
.sala-que{color:var(--fg-2);max-width:34ch}
.sala-para{color:var(--fg-3);max-width:34ch;line-height:1.75}
.sala-para span{display:block;color:var(--fg-2)}
.sala-obra{color:var(--fg-3);margin-top:6px}
.sala-obra::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px}

/* barra: flechas a los costados, cuenta, nombre de la sala y avance del recorrido */
.sh-barra{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,calc(var(--vh) * 3),34px);z-index:2;display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}
.sh-flecha{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--fg);transition:border-color .35s var(--ease),background .35s var(--ease),opacity .35s var(--ease)}
.sh-flecha:hover{border-color:var(--fg)}
.sh-flecha:disabled{opacity:.25;cursor:default;border-color:var(--line)}
.sh-cuenta{color:var(--fg-3);white-space:nowrap}
.sh-cuenta b{font-weight:500;color:var(--fg)}
.sh-nombre{font-size:clamp(20px,1.7vw,26px);white-space:nowrap;min-width:9.5em}
.sh-linea{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.sh-linea i{position:absolute;inset:0;background:var(--fg);transform-origin:left center;transform:scaleX(0)}

/* 02 · mapa vivo: imagen y svg recortan igual (cover = xMidYMid slice), así los contornos caen en su edificio.
   Mientras la sala está a la vista los edificios laten apenas (solo opacidad de un relleno tenue, desfasados);
   el contorno se dibuja y el nombre aparece al pasar el cursor, o al tocar en teléfono (.on). */
.mapa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mapa-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.zona{cursor:pointer;fill:rgba(96,124,255,0);transition:fill .45s var(--ease)}
.zona-g.on .zona{fill:rgba(96,124,255,.2)}
.zona-pulso{fill:rgba(170,186,255,.3);opacity:0;pointer-events:none;animation:pulso 3.6s ease-in-out infinite;animation-play-state:paused}
.sala.dentro .zona-pulso{animation-play-state:running}
.zona-g.on .zona-pulso{animation:none;opacity:0}
@keyframes pulso{0%,100%{opacity:0}50%{opacity:1}}
.zona-trazo{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;pointer-events:none;
  transition:stroke-dashoffset .5s var(--ease)}
.zona-g.on .zona-trazo{stroke-dashoffset:0;transition-duration:1s}
.zona-nombre{font-family:var(--f-serif);font-style:italic;font-size:42px;fill:#fff;paint-order:stroke;stroke:rgba(6,8,18,.4);stroke-width:4px;stroke-linejoin:round;
  text-anchor:middle;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.zona-g.on .zona-nombre{opacity:1;transition-delay:.18s}
/* marcador al centro de cada edificio: punto con aro que se expande (el lenguaje de los puntos de la visita) */
.zona-marca{cursor:pointer;transition:opacity .35s var(--ease)}
.zona-punto{fill:#fff;stroke:rgba(6,8,18,.32);stroke-width:8px;paint-order:stroke}
.zona-aro{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:aro 2.4s var(--ease) infinite;animation-play-state:paused}
.sala.dentro .zona-aro{animation-play-state:running}
@keyframes aro{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.5);opacity:0}}
.zona-g.on .zona-marca{opacity:0}
@media (hover:hover){ /* en teléfono el :hover se queda pegado tras tocar; ahí manda .on */
  .zona-g:hover .zona{fill:rgba(96,124,255,.2)}
  .zona-g:hover .zona-pulso{animation:none;opacity:0}
  .zona-g:hover .zona-trazo{stroke-dashoffset:0;transition-duration:1s}
  .zona-g:hover .zona-nombre{opacity:1;transition-delay:.18s}
  .zona-g:hover .zona-marca{opacity:0}
}

/* 03 · visita guiada: puntos que aparecen en su tramo de la secuencia */
.visita-puntos{position:absolute;inset:0;pointer-events:none;z-index:2}
.punto{position:absolute;left:0;top:0;opacity:0;transform:scale(.85);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.punto.on{opacity:1;transform:scale(1)}
.punto i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.punto.on i{animation:latido 2.4s var(--ease) infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.18)}50%{box-shadow:0 0 0 11px rgba(255,255,255,0)}}
.punto span{position:absolute;left:0;bottom:16px;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;padding:6px 11px;border-radius:999px;background:rgba(6,8,18,.72)}
.punto.abajo span{bottom:auto;top:16px}
.punto.on i,.punto.on span{pointer-events:auto;cursor:pointer}
.punto.sel span{background:var(--fg);color:#05060C}
.punto.sel i{background:var(--azul);box-shadow:0 0 0 6px rgba(96,124,255,.3)}
/* botones de espacios: te llevan al cuadro de cada uno, como la lista de la página de Granados 60.
   .on = a la vista en el cuadro actual; .sel = el que elegiste */
.espacios{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.espacio{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1;white-space:nowrap;color:var(--fg-2);
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
.espacio .mono{font-size:10px;line-height:1;color:var(--fg-3);transition:color .35s var(--ease)}
@media (hover:hover){.espacio:hover{border-color:var(--fg);color:var(--fg)}}
.espacio.on{color:var(--fg);border-color:rgba(96,124,255,.6)}
.espacio.on .mono{color:var(--azul)}
.espacio.sel{background:var(--fg);border-color:var(--fg);color:#05060C}
.espacio.sel .mono{color:#05060C}

/* 04 · dos tiempos: la de día se recorta hasta la línea */
.tiempos{touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.t-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.t-dia{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.t-linea{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.t-asa{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.t-asa::before,.t-asa::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border:solid #0b0d18;border-width:0 0 1.5px 1.5px}
.t-asa::before{left:13px;transform:rotate(45deg)}
.t-asa::after{right:13px;transform:rotate(-135deg)}
.t-et{position:absolute;top:16px;z-index:2;color:#fff;padding:7px 12px;border-radius:999px;background:rgba(6,8,18,.55)}
.t-et-a{left:16px}
.t-et-b{right:16px}

/* 05 · maqueta viva */
.maqueta{background:radial-gradient(ellipse 70% 60% at 50% 45%,#1f2640 0%,#0b0d18 75%)}
.maqueta model-viewer{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-color:rgba(255,255,255,.4)}

/* 06 · materia 24: la materia escribe dentro de esta escena */
.materia-escena{background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(96,124,255,.14) 0%,transparent 70%),#0b0d18}
.marca{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);width:min(340px,82%)}
.marca input{width:100%;padding:14px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(6,8,18,.6);color:#fff;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;outline:none;transition:border-color .35s var(--ease)}
.marca input::placeholder{color:rgba(255,255,255,.5)}
.marca input:focus{border-color:#fff}

/* ---------- 04 · clientes ---------- */
.proyectos{margin-top:clamp(56px,calc(var(--vh) * 9),120px);display:flex;flex-direction:column;gap:clamp(80px,calc(var(--vh) * 14),180px)}
.proyecto[hidden]{display:none}
.proyecto-enlace{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--gutter);align-items:center}
.proyecto:nth-child(even) .proyecto-enlace{grid-template-columns:7fr 5fr}
.proyecto:nth-child(even) .proyecto-info{order:2}
.proyecto-info{display:flex;flex-direction:column;gap:14px}
.proyecto-info > .mono:first-child{color:var(--fg-3)}
.proyecto-info h3{font-size:clamp(44px,5.6vw,104px);line-height:.92;letter-spacing:-.04em;font-weight:400}
.proyecto-info p{color:var(--fg-2);max-width:38ch}
.proyecto-tipo{color:var(--fg-3)}
.proyecto-ir{margin-top:12px;display:inline-flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;color:var(--fg)}
.proyecto-ir b{font-weight:400;color:var(--fg-3);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;transition:color .4s var(--ease)}
/* la ventana: la página del cliente se recorre por dentro con el scroll (app.js mueve la imagen) */
.ventana{position:relative;aspect-ratio:16/10;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;background:var(--line);
  box-shadow:0 0 0 1px var(--line),0 40px 90px -40px rgba(0,0,0,.7);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.ventana-img{display:block;width:100%;height:auto;will-change:transform}
.proyecto-enlace:hover .ventana{transform:scale(1.015);box-shadow:0 0 0 1px var(--fg-3),0 50px 110px -40px rgba(0,0,0,.8)}
.proyecto-enlace:hover .proyecto-ir b{color:var(--fg)}
.proyecto-enlace:focus-visible{outline:none}
.proyecto-enlace:focus-visible .ventana{box-shadow:0 0 0 2px var(--fg),0 40px 90px -40px rgba(0,0,0,.7)}

/* ---------- 05 · laboratorio ---------- */
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(48px,calc(var(--vh) * 7),96px)}
.lab-card{position:relative;border-top:1px solid var(--line);padding:24px 0 0;min-height:260px;display:flex;flex-direction:column;gap:14px}
.lab-card > .mono{color:var(--fg-3)}
.lab-card p{color:var(--fg-2);font-size:16px;max-width:32ch}
.lab-card .tag{margin-top:auto;align-self:flex-start;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--fg)}

/* ---------- 06 · método ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:clamp(64px,calc(var(--vh) * 10),140px)}
.paso{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px;min-height:calc(var(--vh) * 34)}
.paso .mono{color:var(--fg-3)}
.paso p{color:var(--fg-2);font-size:16px;max-width:28ch}

/* ---------- 07 · alcance ---------- */
.servicios{margin-top:clamp(48px,calc(var(--vh) * 7),96px);border-top:1px solid var(--line)}
.servicio{display:grid;grid-template-columns:2fr 5fr 5fr;column-gap:var(--gutter);align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.servicio .mono{color:var(--fg-3)}
.servicio h3{font-size:clamp(24px,2.6vw,44px);letter-spacing:-.025em;font-weight:400}
.servicio p{color:var(--fg-2);max-width:40ch}
.viene{margin-top:clamp(64px,calc(var(--vh) * 10),140px);display:grid;grid-template-columns:2fr 5fr 5fr;column-gap:var(--gutter);align-items:baseline}
.viene .mono{color:var(--fg-3)}
.viene h3{font-size:clamp(40px,5vw,92px);letter-spacing:-.02em;line-height:1;font-weight:400}
.viene p{color:var(--fg-2);max-width:40ch}

/* ---------- 08 · contacto ---------- */
.contacto{min-height:calc(var(--vh) * 100);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:28px}
.contacto .gigante{font-size:clamp(64px,14vw,280px);letter-spacing:-.05em}
.contacto .lead{text-align:center}
.contacto-links{display:flex;gap:28px;font-size:clamp(17px,1.4vw,22px)}

/* ---------- 09 · pie ---------- */
.pie{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;padding:24px var(--gutter);border-top:1px solid var(--line);color:var(--fg-2)}
.pie b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.pie-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:.2em}

/* ---------- reveals ---------- */
html.js .reveal{opacity:0}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;row-gap:16px}
  .eyebrow,h2,.lead,.tesis .lead{grid-column:auto}
  .lab-grid,.pasos{grid-template-columns:1fr}
  /* showroom en teléfono: escena 4:3 arriba, info abajo; la barra deja fuera la línea de avance */
  .sala{grid-template-columns:1fr;align-content:center;row-gap:18px;padding:calc(var(--nav-h) + 4px) var(--gutter) 84px}
  .sala-escena{aspect-ratio:4/3}
  .sala-info{gap:8px}
  .sala-nombre{font-size:32px}
  .sala-que{font-size:15px}
  .sala-para{font-size:10px;line-height:1.6}
  .sh-linea{display:none}
  .sh-nombre{flex:1;min-width:0;font-size:19px}
  .sh-flecha{width:42px;height:42px}
  .marca input{font-size:16px} /* menos de 16 px y el iPhone hace zoom al enfocar */
  .punto span{font-size:9.5px;padding:5px 9px}
  /* los espacios van en una sola fila que se desliza de lado, a sangre hasta los bordes */
  .espacios{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .espacios::-webkit-scrollbar{display:none}
  .espacio{padding:7px 12px 7px 10px;font-size:12px}
  .zona-nombre{font-size:52px}
  .zona-marca-in{transform:scale(1.9)} /* en teléfono la imagen se ve a ~0.3×: el punto crece para seguir siendo tocable */
  .proyecto-enlace,.proyecto:nth-child(even) .proyecto-enlace{grid-template-columns:1fr;row-gap:28px}
  .proyecto:nth-child(even) .proyecto-info{order:0}
  .paso{min-height:auto;padding-bottom:16px}
  .servicio,.viene{grid-template-columns:1fr;row-gap:8px}
  .hero-label{left:var(--gutter);right:var(--gutter);max-width:none}
  .marquee-track{gap:36px}
  .contacto-links{flex-direction:column;gap:12px}
  .pie{justify-content:flex-start}
  /* en teléfono los cuatro enlaces no caben junto al logo: sin diagonales y un punto más chicos */
  .nav-links{gap:12px;font-size:10px;letter-spacing:.04em}
  .nav-links span{display:none}
  .grano{display:none}
}

@media (max-width:380px){ .nav-links a[href="#metodo"]{display:none} } /* teléfonos angostos: fuera el enlace menos urgente */

@media (prefers-reduced-motion:reduce){
  .flecha{animation:none}
  .cielo{transform:none}
  .aurora > i,.nubes{animation:none}
}