/* 369 View — sistema visual medido en referencia/medidas.md */

/* ---------- fuentes (autoalojadas, @fontsource) ---------- */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-grotesk-latin-400-normal.woff2) format("woff2"); 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-grotesk-latin-ext-400-normal.woff2) format("woff2"); 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; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-ext-500-normal.woff2) format("woff2"); 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; }

/* ---------- tokens ---------- */
:root {
  --gw: 2.0833333vw;          /* margen exterior: 30px en 1440 */
  --bar: .3em;                /* barras: 3.6px en 1440 */
  --bg: #090909;              /* fondo medido (oscuro) */
  --fg: #ece4b4;              /* texto, trazos, bordes */
  --mute: #4f4d3c;            /* barras inactivas, fondo de progreso */
  --ease-io: cubic-bezier(.66, 0, .34, 1);
  --ease-theme: cubic-bezier(.14, 1, .34, 1);
  --t-theme: 1.7s;
  --video-veil: .3;           /* opacidad del velo plano del color de fondo sobre los videos */
  --wm: 19.444vw;             /* wordmark */
  --cnt: 15.972vw;            /* contador */
  --logo-s: 2.916vw;          /* logo pequeno */
  --view: 2.916vw;            /* VIEW bajo las cifras */
  --lead: 2.222vw;            /* parrafo grande */
  --h2: 1.111vw;              /* texto destacado 16px */
  --cap: .73em;               /* caja recortada a la altura de las cifras de Space Grotesk (0.714em) */
  --capl: .74em;
}
html[data-theme="light"] { --bg: #edeeef; --fg: #37373c; --mute: #cfced0; }

html { font-size: .833vw; background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
@media (min-width: 1920px) { html { font-size: 15.6px; } }
@media (min-width: 1680px) and (max-width: 1919px) { html { font-size: 14.1px; } }
@media (min-width: 1680px) { :root { --wm: clamp(280px, 19.444vw, 45.569vh); --cnt: clamp(230px, 15.972vw, 37.974vh); } }
@media (max-width: 1380px) { html { font-size: 11.4px; } }
@media (orientation: portrait), (max-width: 1024px) { :root { --gw: 30px; --bar: 6px; --wm: 15.972vw; --cnt: 15.972vw; --logo-s: 4.444vw; --view: 4.444vw; --lead: 4.444vw; } }
@media (max-width: 900px) and (orientation: landscape), (max-width: 700px) { html { font-size: 13px; } :root { --gw: 20px; --wm: 11.111vw; --cnt: 11.111vw; --logo-s: 11.111vw; --view: 11.111vw; --lead: 13px; --h2: 13px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1; text-transform: uppercase; letter-spacing: 0; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
html[data-theme="light"] body { font-weight: 500; }
html.is-l, html.is-l a, html.is-l body, html.is-l .hr div, html.is-l .sidenav-li .b, html.is-l .ui-progress div { transition: background-color var(--t-theme) var(--ease-theme), color var(--t-theme) var(--ease-theme), border-color var(--t-theme) var(--ease-theme); }
html.is-l svg * { transition: fill var(--t-theme) var(--ease-theme), stroke var(--t-theme) var(--ease-theme); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-transform: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: -100%; left: var(--gw); z-index: 200; padding: 1em; background: var(--bg); border: 1px solid var(--fg); }
.skip:focus { top: var(--gw); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: .3em; }

/* ---------- iconos ---------- */
.i { display: inline-block; width: .9em; height: .9em; transform: scale(.8); vertical-align: top; fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: square; }
.i.fill { fill: var(--fg); stroke: none; }
.i-more circle { fill: var(--fg); stroke: none; }
.i-play path, .i-moon path, .i-sun .core { fill: var(--fg); stroke: none; }
.i-sun line { stroke: var(--fg); }
.i-moon circle { fill: none; stroke: var(--fg); }

/* ---------- rodillos de filas (patron unico de la interfaz) ---------- */
.rl { display: inline-block; position: relative; overflow: hidden; height: .9em; line-height: 1em; vertical-align: top; white-space: nowrap; }
.rl .r { display: block; height: .9em; line-height: 1em; transition: transform .8s; }
.rl .r + .r { position: absolute; top: 100%; left: 0; width: 100%; }
.rl .r .l { display: inline-block; }
.rl .r .i { position: absolute; top: -.05em; right: 0; }
.rl .r.has-i { padding-right: 1.65em; }
/* estado 2 (hover / conmutado) */
.rl.is-2 .r, .js-hv:hover .rl .r, .js-hv.is-hv .rl .r { transform: translateY(-100%); }
.rl.is-3 .r { transform: translateY(-200%) !important; transition-duration: .75s !important; }
/* letras: cascada de opacidad al hover */
.w span { display: inline-block; opacity: 1; transition: opacity .3s; }
a:hover .w span, .js-hv:hover .w span, .is-hv .w span { opacity: .6; }
/* enlace de interfaz: padding 1em vertical */
.ui-a { display: inline-block; padding: 1em 0; line-height: 1; }
.ui-a .rl { vertical-align: top; }
/* estado activo: circulo relleno */
.ui-a .i-more { display: none; }
.ui-a.is-active .i-more, .ui-a[aria-current] .i-more { display: inline-block; }

/* ---------- cabecera ---------- */
.ui-head { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; pointer-events: none; }
.ui-head a, .ui-head button { pointer-events: auto; }
.logo { position: fixed; top: var(--gw); left: var(--gw); display: block; }
.logo-big { margin-top: -.3rem; font-size: var(--wm); letter-spacing: -.04em; line-height: .56em; }
.logo-big .neo { display: inline-block; overflow: hidden; height: var(--cap); line-height: var(--capl); margin-left: -.06em; vertical-align: top; }
.logo-big .col { display: inline-block; overflow: hidden; height: var(--cap); position: relative; vertical-align: top; }
.logo-big .col .stk { display: block; will-change: transform; }
.logo-big .col .x { display: block; height: var(--cap); line-height: var(--capl); }
.logo-big .col:last-child .x { padding-left: .02em; }
.logo-view { display: block; margin-top: .35em; font-size: var(--view); letter-spacing: -.04em; line-height: .56em; }
.logo-view .neo { display: inline-block; overflow: hidden; height: var(--cap); line-height: var(--capl); margin-left: -.06em; }
.logo-view .x { display: block; height: var(--cap); line-height: var(--capl); }
.logo-small { font-size: var(--logo-s); letter-spacing: -.04em; line-height: .56em; }
.logo-small .neo { display: inline-block; overflow: hidden; height: var(--cap); line-height: var(--capl); margin-left: -.06em; }
.logo-small .x { display: block; height: var(--cap); line-height: var(--capl); }
.logo-small .alt { text-indent: -9999px; display: inline-block; width: 0; height: 0; overflow: hidden; }
/* estado inicial (oculto por CSS; JS anima con gsap.to) */
html.js .logo-view .x, html.js .logo-small .x { transform: translateY(120%); }

.ui-navi { position: fixed; top: calc(var(--gw) * .6); right: var(--gw); }
.ui-navi ul { display: flex; gap: 2em; }
.ui-navi li { display: flex; overflow: hidden; }
.ui-navi .ui-a { display: block; }
.ui-navi .ui-a .rl .r { padding-right: 1.65em; }
.ui-navi .lang { display: flex; gap: 1em; }
html.js .ui-navi .ui-a { transform: translateY(3.5em); transition: transform .8s; }
html.js.is-l .ui-navi .ui-a { transform: translateY(0); }
@media (max-width: 700px) { .ui-navi ul { flex-direction: column; align-items: flex-end; gap: 0; } .ui-navi { top: calc(var(--gw) * 1.4 + .5em); } .ui-navi .ui-a { padding: .45em 0; } .ui-navi .lang { justify-content: flex-end; } }

/* texto de presentacion */
.intro { position: fixed; top: var(--gw); left: calc(50vw - var(--gw)); width: 16em; line-height: .8em; z-index: 99; }
.intro .o { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; margin-bottom: -.05em; vertical-align: top; }
.intro .t { display: block; height: 1em; line-height: 1em; }
html.js .intro .t { transform: translateY(1.2em); }
@media (max-width: 700px) {
  .logo { top: calc(var(--gw) * 2); }
  .logo-big { margin-top: 0; }
  .logo-view { display: inline-block; margin: 0 0 0 .25em; vertical-align: top; }
  .intro { left: var(--gw); top: calc(var(--gw) * 2 + var(--logo-s) * .73 + 1.6em); width: 11em; font-size: 11px; }
}

/* ---------- barra inferior ---------- */
.ui-bottom { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; pointer-events: none; }
.ui-bottom a, .ui-bottom button { pointer-events: auto; }
.ui-ig { position: fixed; left: var(--gw); bottom: calc(var(--gw) * .6); margin-top: .1em; }
.ui-ig .r { transition-duration: .75s; }
.ui-explore { position: fixed; left: 50%; bottom: calc(var(--gw) * .6); transform: translateX(-50%); text-align: center; }
.ui-control { position: fixed; right: calc(var(--gw) * 3); bottom: calc(var(--gw) * .6); display: flex; gap: 2em; }
.ui-control .ui-a { position: relative; }
.ui-control .rl { width: 1.75em; }
.ui-control .rl .r .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-control .rl .r .i { position: absolute; left: 50%; top: 0; margin-left: -.45em; right: auto; }
.ui-control .ui-a.is-2 .rl .r { transform: translateY(-100%); transition-duration: .6s; }
.ui-sw { position: fixed; right: 0; bottom: 0; padding: var(--gw); display: flex; }
.ui-sw .rl { width: 1em; height: 1em; }
.ui-sw .rl .r { height: 1em; }
.ui-sw .rl .r .i { position: static; }
.ui-sw.is-on .rl .r { transform: translateY(-100%); }
html.js .ui-ig, html.js .ui-explore, html.js .ui-control, html.js .ui-sw, html.js .ui-sidenav, html.js .counter, html.js .ui-progress { opacity: 0; transition: opacity .8s; }
html.js.is-l .ui-ig, html.js.is-l .ui-explore, html.js.is-l .ui-control, html.js.is-l .ui-sw, html.js.is-l .ui-sidenav, html.js.is-l .counter, html.js.is-l .ui-progress { opacity: 1; }
@media (max-width: 700px) {
  .ui-ig { bottom: calc(var(--gw) * 1.35); } .ui-explore { bottom: calc(var(--gw) * 1.35); }
  .ui-sw { padding: calc(var(--gw) * 2) var(--gw); }
  .ui-control { right: var(--gw); bottom: calc(var(--gw) * 4.3); }
}

/* ---------- INICIO: pisos ---------- */
html[data-page="home"], html[data-page="home"] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.floors { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
.floor { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.floor.is-on { pointer-events: auto; }
.floor .media { position: absolute; inset: 0; overflow: hidden; }
.floor .media img, .floor .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floor .media video { opacity: 0; transition: opacity 1.2s var(--ease-io); }
.floor .media video.is-playing { opacity: 1; }
/* velo plano del color de fondo (sala de proyeccion): mantiene legible el texto sobre el video en ambos temas */
.floor .media::after, .hero::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--video-veil); pointer-events: none; }
html.is-l .floor .media::after, html.is-l .hero::after { transition: background-color var(--t-theme) var(--ease-theme); }
.floor.is-paused .media video { opacity: 1; }
html.js .floors { opacity: 0; transition: opacity 1.2s var(--ease-io); }
html.js.is-c .floors { opacity: 1; }

.counter { position: fixed; top: 50%; right: var(--gw); transform: translateY(-50%); text-align: right; pointer-events: none; z-index: 99; font-size: var(--cnt); letter-spacing: -.04em; line-height: .56em; white-space: nowrap; }
.counter .neo { display: inline-block; overflow: hidden; height: var(--cap); line-height: var(--capl); margin-left: -.06em; vertical-align: top; }
.counter .n .o { width: .61em; position: relative; display: inline-block; height: var(--cap); overflow: hidden; }
.counter .n .d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: var(--capl); text-align: right; will-change: transform; }
.counter .s, .counter .m { display: inline-block; }
.counter .s .x, .counter .m .x { display: block; height: var(--cap); line-height: var(--capl); }
html.js .counter .s .x, html.js .counter .m .x { transform: translateY(103%); }
@media (max-width: 700px) {
  .counter { right: auto; left: var(--gw); text-align: center; width: 1em; }
  .counter .neo { display: block; margin-left: -.06em; }
  .counter .n .o { display: block; }
  .counter .s .x { padding: .04em 0; }
}

.ui-sidenav { position: fixed; right: calc(var(--gw) + var(--bar)); bottom: calc(var(--gw) * 3); z-index: 99; display: flex; flex-direction: column; align-items: flex-end; }
.ui-sidenav a { display: flex; justify-content: flex-end; align-items: center; width: calc(var(--gw) * 2.4); height: var(--bar); padding: 1px 0; box-sizing: content-box; transition: height .3s; }
.ui-sidenav a .b { width: var(--bar); height: 100%; background: var(--mute); transition: background-color .2s, transform .2s; }
.ui-sidenav a.is-active { height: 2em; }
.ui-sidenav a.is-active .b { background: var(--fg); }
.ui-sidenav:hover a { height: 2em; }
@media (max-width: 700px) { .ui-sidenav { display: none; } }

.titles { position: fixed; left: var(--gw); bottom: calc(var(--gw) * .6 + 2.9em); z-index: 99; height: 1em; overflow: hidden; width: 24em; pointer-events: none; }
.titles a { pointer-events: auto; }
.titles .ft { position: absolute; top: 0; left: 0; width: 100%; height: 1em; line-height: 1em; will-change: transform; }
.titles .ft .i { margin-left: .75em; position: relative; top: -.05em; }
@media (max-width: 700px) { .titles { bottom: calc(var(--gw) * 4.3 + .8em); } }

/* ---------- paginas interiores ---------- */
.page { position: relative; z-index: 1; }
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.hero img, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero video { opacity: 0; transition: opacity 1.2s var(--ease-io); }
.hero video.is-playing { opacity: 1; }
html.js .hero { opacity: 0; transition: opacity 1.2s var(--ease-io); }
.hero-t { position: absolute; left: var(--gw); bottom: calc(var(--gw) * .6 + 2.9em); z-index: 2; }
.hero-t .rl .r { transform: translateY(120%); }
html.is-l .hero-t .rl .r { transform: translateY(0); }
@media (max-width: 700px) { .hero-t { bottom: calc(var(--gw) * 4.3 + .8em); } }
html.js.is-c .hero { opacity: 1; }

.body { padding: calc(var(--gw) * 4 + 1em) var(--gw); }
.body.center { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.s-block { margin-bottom: 4em; }
.s-th { display: block; margin-bottom: 1em; }
.hr { width: 100%; height: 1px; margin-bottom: 1em; opacity: .3; }
.hr div { width: 100%; height: 100%; background: var(--fg); transform-origin: center left; transition: transform .8s var(--ease-io); }
html.js .hr div { transform: scaleX(0); }
html.js .hr.is-shown div, html.no-js .hr div { transform: scaleX(1); }
.lead { font-size: var(--lead); line-height: 1; text-transform: none; max-width: 24em; margin-bottom: 1.5em; }
.lead-s { font-size: var(--h2); line-height: 1.2; text-transform: none; max-width: 40em; margin-bottom: 2em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); gap: 2em 2.5em; }
.grid .cell h3 { margin-bottom: .6em; }
.grid .cell p { text-transform: none; line-height: 1.25; }
.row { display: flex; flex-wrap: wrap; gap: 1em 3em; align-items: center; margin-bottom: 2em; }
.row .lbl { margin-right: -2em; }
.opts { display: flex; gap: 1.5em; }
.opts .ui-a { padding: 0; }
.opts .ui-a .rl .r { padding-right: 1.65em; }
/* enlace de accion: contorno 1px, sin relleno, sin radio */
.btn { display: inline-block; border: 1px solid var(--fg); padding: 1em 1.75em; line-height: 1; }
.btn .rl .r { padding-right: 1.65em; }
.variant-photo { margin: 0 0 2em; }
.variant-photo img { width: 100%; height: auto; }
@media (min-width: 701px) { .variant-photo { max-width: 50%; } }

.gallery figure { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery figure + figure { margin-top: 0; }

.foot { padding: calc(var(--gw) * 4) var(--gw) calc(var(--gw) * 4 + 2em); display: flex; flex-wrap: wrap; gap: 1em 3em; align-items: baseline; }
.foot .ui-a { padding: 0; }
.foot .ui-a .rl .r { padding-right: 1.65em; }
.foot .copy { margin-left: auto; opacity: .6; }

/* palabras enmascaradas (revelacion) */
.cw .o { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; vertical-align: top; margin-bottom: -.05em; }
.cw .o .t { display: block; height: 1em; line-height: 1em; }
html.js .cw .o .t { transform: translateY(1.2em); }
/* lineas enmascaradas (revelacion) */
.cl { display: block; line-height: 1em; }
.cl .o { display: block; overflow: hidden; height: 1em; margin-bottom: -.05em; }
.cl .o .t { display: block; height: 1em; line-height: 1em; }
html.js .cl .o .t { transform: translateY(1.2em); }
.rv { opacity: 0; transition: opacity .8s; }
html.no-js .rv, .rv.is-shown { opacity: 1; }

.ui-progress { position: fixed; left: 0; bottom: 0; width: 100%; height: calc(var(--bar) * 2); z-index: 98; pointer-events: none; }
.ui-progress div { position: absolute; left: 0; top: var(--bar); width: 100%; height: var(--bar); }
.ui-progress .bg { background: var(--mute); }
.ui-progress .now { background: var(--fg); transform-origin: center left; transform: scaleX(0); }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--gw) * 4) var(--gw); }
.nf .lead { margin-bottom: 1em; }

/* ---------- accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .logo-view .x, html.js .logo-small .x, html.js .ui-navi .ui-a, html.js .intro .t, html.js .cl .o .t, html.js .cw .o .t, html.js .counter .s .x, html.js .counter .m .x { transform: none; }
  html.js .ui-ig, html.js .ui-explore, html.js .ui-control, html.js .ui-sw, html.js .ui-sidenav, html.js .counter, html.js .ui-progress, html.js .floors, html.js .hero, .rv { opacity: 1; }
  html.js .hr div { transform: scaleX(1); }
  .floor .media video, .hero video { display: none; }
}