/* sitio.css — maquetación y coreografía de la demo ZIRIMIRI.
   Los valores base (colores, familias, display 172.8px/1.1, cuerpo 24px/1.5, contenedor)
   vienen de tokens.css, que es la ficha MEDIDA en tecnoarreda.it con la tipografía
   sustituida por el agente. Aquí sólo se escalan a fluido tomando 1920px como el viewport
   medido: 172.8px = 9vw · 230.4px = 12vw · 60px = 3.125vw · 24px = 1.25vw · margen 144px = 7.5vw. */

@font-face { font-family: 'Noto Serif Display'; src: url('fonts/noto-serif-display.woff2') format('woff2-variations'), url('fonts/noto-serif-display.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: 'Anek Bangla'; src: url('fonts/anek-bangla.woff2') format('woff2-variations'), url('fonts/anek-bangla.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Nothing You Could Do'; src: url('fonts/nothing-you-could-do.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --margen: clamp(20px, 7.5vw, 144px);
  --hueco: clamp(16px, 2.6vw, 50px);
  --t-hero: clamp(48px, 9vw, 172.8px);
  --t-gigante: clamp(58px, 12vw, 230.4px);
  --t-verbo: clamp(44px, 7.4vw, 142px);
  --t-frase: clamp(28px, 3.125vw, 60px);
  --t-cuerpo: clamp(17px, 1.25vw, var(--cuerpo-px));
  --t-enlace: clamp(20px, 1.82vw, 35px);
  --t-mano: clamp(18px, 1.46vw, 28px);
  --t-peq: clamp(13px, 0.83vw, 16px);
  --linea-fina: rgba(255, 255, 255, 0.22);
  --suave: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
.revela { overflow: hidden; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--cuerpo-tipo); font-weight: 300;
  font-size: var(--t-cuerpo); line-height: var(--cuerpo-interlineado);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 16px; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 1px solid var(--tinta); outline-offset: 4px; }

/* voces tipográficas */
.gigante, .portada-titular, .verbo-palabra, .gigante-medio, .logo-marca {
  font-family: var(--display); font-weight: 100; font-stretch: 78%;
  text-transform: uppercase; line-height: var(--display-interlineado); letter-spacing: var(--display-tracking);
}
.gigante { font-size: var(--t-gigante); }
.frase { font-family: var(--display); font-weight: 100; font-stretch: 85%; font-size: var(--t-frase); line-height: 1.15; }
.manuscrita { font-family: 'Nothing You Could Do', cursive; font-size: var(--t-mano); line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; }
.kicker { font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .12em; }
.linea { display: block; }
.enlace-flecha, .cab-servicios { text-decoration: none; text-transform: uppercase; font-size: var(--t-peq); letter-spacing: .08em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4vw;
  padding: 22px var(--margen); transition: background .4s var(--suave), padding .4s var(--suave);
}
.cabecera.con-fondo { background: rgba(13, 13, 13, .82); backdrop-filter: blur(10px); padding-top: 14px; padding-bottom: 14px; }
.logo { text-decoration: none; display: grid; line-height: 1; }
.logo-marca { font-size: clamp(22px, 1.9vw, 36px); letter-spacing: .06em; }
.logo-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .28em; margin-top: 6px; color: #d9d9d9; }
.cab-servicios { justify-self: start; }
.cab-der { display: flex; align-items: center; gap: 28px; font-size: var(--t-peq); }
.idiomas a { text-decoration: none; }
.idiomas a[aria-current] { border-bottom: 1px solid currentColor; }
.hamburguesa { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: grid; align-content: center; gap: 8px; padding: 0; }
.hamburguesa span:not(.oculto) { display: block; height: 1px; background: var(--tinta); transition: transform .4s var(--suave); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 40; background: var(--papel); display: grid; align-content: center; padding: 0 var(--margen); }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { font-family: var(--display); font-weight: 100; font-stretch: 78%; text-transform: uppercase; font-size: clamp(48px, 8vw, 150px); line-height: 1.05; text-decoration: none; }
.menu a:hover { font-style: italic; }
.menu-pie { margin-top: 40px; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .12em; color: #d9d9d9; }

/* 1 · portada */
.portada { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.portada-fondo { position: absolute; inset: 0; }
.portada-fondo picture, .portada-fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.25) 40%, rgba(13,13,13,.6) 100%); }
.portada-titular { position: absolute; inset: 0; font-size: var(--t-hero); pointer-events: none; }
.t-a { position: absolute; left: var(--margen); top: 17vh; }
.t-b { position: absolute; right: var(--margen); bottom: 9vh; text-align: left; }
.portada-lema { position: absolute; left: var(--margen); bottom: 9vh; font-family: var(--display); font-weight: 200; font-stretch: 85%; font-size: clamp(20px, 1.9vw, 36px); line-height: 1.2; }

/* 2 · manifiesto */
.manifiesto {
  display: grid; grid-template-columns: 30vw 1fr 22vw; grid-template-rows: auto auto auto;
  column-gap: var(--hueco); padding: 18vh var(--margen) 4vh;
}
.mf-foto-1 { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.mf-frase { grid-column: 2 / span 2; grid-row: 1; text-align: right; padding-left: 4vw; align-self: start; }
.mf-nota { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; margin: 8vh 2vw 0 0; }
.mf-foto-2 { grid-column: 3; grid-row: 2 / span 2; margin-top: 10vh; }
.nota { display: grid; justify-items: start; gap: 10px; }
.flecha { width: clamp(80px, 8vw, 150px); color: var(--tinta); }
.flecha-abajo { margin-left: 3vw; }

/* 3 · escena antes/después (momento firma) */
.escena { position: relative; height: 100svh; }
.escena-lienzo { position: absolute; inset: 0; overflow: hidden; }
.escena-capa { position: absolute; inset: 0; will-change: clip-path; }
.escena-capa picture, .escena-capa img { width: 100%; height: 100%; object-fit: cover; }
.escena-antes { clip-path: inset(12vh 58vw 12vh var(--margen)); }
.escena-despues { clip-path: inset(0 100% 0 0); }
.escena-linea { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--tinta); opacity: 0; box-shadow: 0 0 18px rgba(255,255,255,.6); }
.escena-sombra { position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,.55) 45%, rgba(13,13,13,.85) 100%); opacity: 0; pointer-events: none; }
.escena-etiqueta { position: absolute; top: 12vh; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .14em; padding: 8px 12px; background: rgba(13,13,13,.72); }
.e-antes { left: var(--margen); }
.e-despues { right: var(--margen); opacity: 0; }
.escena-titular { position: absolute; left: 0; bottom: 11vh; white-space: nowrap; transform: translateX(62vw); }
.escena-pie { position: absolute; left: var(--margen); bottom: 5vh; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .12em; opacity: 0; }

/* 4 · misión */
.mision { display: grid; grid-template-columns: 40fr 30fr 30fr; gap: var(--hueco); padding: 20vh var(--margen) 14vh; align-items: start; }
.mi-texto { color: #e8e8e8; }
.mi-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mi-puntos li { display: grid; gap: 4px; border-top: 1px solid var(--linea-fina); padding-top: 14px; }
.mi-puntos strong { font-weight: 500; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .1em; }
.mi-puntos span { color: #d9d9d9; font-size: clamp(15px, 1vw, 19px); }

/* 5 · verbos */
.verbos { position: relative; padding: 10vh var(--margen) 18vh; }
.verbos ul { list-style: none; margin: 0; padding: 0; }
.verbo { display: flex; align-items: center; gap: 3vw; cursor: default; }
.verbo-palabra { font-size: var(--t-verbo); transition: opacity .45s var(--suave), font-style .2s; }
.verbos.con-foco .verbo-palabra { opacity: .22; }
.verbos.con-foco .verbo.activo .verbo-palabra { opacity: 1; font-style: italic; }
.verbo-desc { order: 3; margin-left: auto; max-width: 21em; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .1em; line-height: 1.6; color: #cfcfcf; text-align: right; transition: opacity .45s var(--suave); }
.verbos.con-foco .verbo:not(.activo) .verbo-desc { opacity: .22; }
.verbo-foto { display: none; order: 2; }
.verbo-flotante { position: fixed; left: 0; top: 0; width: 26vw; aspect-ratio: 3 / 2; pointer-events: none; z-index: 5; opacity: 0; transform: translate(-50%, -50%) scale(.9); overflow: hidden; }
.verbo-flotante img { width: 100%; height: 100%; object-fit: cover; }

/* 6 · equipo */
.equipo { display: grid; grid-template-columns: 34vw 1fr; grid-template-rows: auto auto; column-gap: 6vw; row-gap: 10vh; padding: 12vh var(--margen) 16vh; }
.eq-foto { grid-column: 1; grid-row: 1; position: relative; }
.eq-firma { position: absolute; right: 8%; bottom: 7%; font-size: clamp(30px, 3vw, 58px); text-transform: none; transform: rotate(-6deg); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.eq-texto { grid-column: 2; grid-row: 1; align-self: start; display: grid; gap: 36px; justify-items: start; padding-top: 6vh; }
.eq-texto p { max-width: 36em; }
.eq-nota { grid-column: 1; grid-row: 2; justify-self: end; align-self: center; }
.eq-planos { grid-column: 2; grid-row: 2; width: min(34vw, 100%); justify-self: start; }

/* 7 · obras (galería fijada) */
.obras { position: relative; overflow: hidden; }
.obras-pista { display: flex; align-items: flex-start; gap: 3vw; padding: 16vh var(--margen) 12vh; width: max-content; }
.obras-cabeza { width: 38vw; align-self: stretch; display: grid; align-content: space-between; }
.obras-cabeza .kicker { max-width: 22em; }
.obra { width: 24vw; display: grid; gap: 10px; }
.obra h3 { font-family: var(--display); font-weight: 100; font-stretch: 85%; font-size: var(--t-enlace); margin-top: 10px; }
.obra p { font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .1em; color: #d9d9d9; }
.obra img { transition: transform .9s var(--suave); }
.obra:hover img { transform: scale(1.04); }
.obra picture { overflow: hidden; }
.obra-cierre { width: 18vw; aspect-ratio: 3 / 4; align-self: flex-start; border: 1px solid var(--linea-fina); display: grid; place-content: center; text-align: center; text-decoration: none; font-family: var(--display); font-weight: 100; font-stretch: 85%; font-size: var(--t-enlace); }
.obra-cierre:hover { background: var(--fondo-1); }

/* 8 · contacto */
.contacto { display: grid; grid-template-columns: 1fr 34vw; gap: 6vw; padding: 18vh var(--margen) 16vh; border-top: 1px solid var(--linea-fina); }
.gigante-medio { font-size: var(--t-hero); }
.ct-lado { display: grid; gap: 34px; align-content: start; padding-top: 2vh; }
.ct-form { display: grid; gap: 18px; }
.ct-form label { display: grid; gap: 6px; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .1em; }
.ct-form input, .ct-form select { font: inherit; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--linea-fina); padding: 10px 0; border-radius: 0; }
.ct-form select option { background: var(--papel); }
.ct-form input:focus, .ct-form select:focus { outline: none; border-bottom-color: var(--tinta); }
.boton { justify-self: start; margin-top: 10px; font: inherit; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .12em; color: var(--papel); background: var(--tinta); border: 1px solid var(--tinta); padding: 16px 28px; cursor: pointer; transition: background .3s, color .3s; }
.boton:hover { background: transparent; color: var(--tinta); }
.ct-aviso { font-size: var(--t-peq); color: #d9d9d9; min-height: 1.4em; }

/* pie */
.pie { display: grid; grid-template-columns: auto 1fr; gap: 24px 6vw; padding: 60px var(--margen) 50px; background: var(--fondo-1); }
.pie-marca { display: grid; }
.pie-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-self: end; font-size: var(--t-peq); text-transform: uppercase; letter-spacing: .1em; }
.pie-enlaces a { text-decoration: none; }
.pie-demo { grid-column: 1 / -1; font-size: 13px; color: #b5b5b5; border-top: 1px solid var(--linea-fina); padding-top: 22px; }

/* estados de entrada (sólo si el JS de coreografía está activo: .js-mov) */
.js-mov .revela { clip-path: inset(0 0 0 100%); }
.js-mov .revela[data-desde="izq"] { clip-path: inset(0 100% 0 0); }
.js-mov [data-aparecer] { opacity: 0; transform: translateY(24px); }

/* ——— tableta y móvil ——— */
@media (max-width: 1023px) {
  .cab-servicios { display: none; }
  .cabecera { grid-template-columns: auto 1fr; }
  .cab-der { justify-self: end; }
  .t-a { top: 15vh; } .t-b { bottom: 22vh; }
  .portada-lema { bottom: 7vh; }
  .manifiesto { grid-template-columns: 1fr; row-gap: 7vh; padding-top: 12vh; }
  .mf-foto-1, .mf-frase, .mf-nota, .mf-foto-2 { grid-column: 1; grid-row: auto; }
  .mf-foto-1 { width: 72%; }
  .mf-frase { text-align: left; padding-left: 0; }
  .mf-nota { justify-self: start; margin: 0; }
  .mf-foto-2 { width: 62%; justify-self: end; margin-top: 0; }
  .mision { grid-template-columns: 1fr; padding-top: 12vh; }
  .verbo { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 38px; }
  .verbo-foto { display: block; width: 62%; }
  .verbo-desc { margin-left: 0; text-align: left; order: 2; }
  .verbo-flotante { display: none; }
  .equipo { grid-template-columns: 1fr; row-gap: 6vh; }
  .eq-foto, .eq-texto, .eq-nota, .eq-planos { grid-column: 1; grid-row: auto; }
  .eq-planos { width: 72%; justify-self: end; }
  .eq-nota { justify-self: start; }
  .obras-pista { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8vh; -webkit-overflow-scrolling: touch; }
  .obras-cabeza { width: 78vw; flex: none; }
  .obra { width: 72vw; flex: none; scroll-snap-align: start; }
  .obra-cierre { width: 50vw; flex: none; }
  .contacto { grid-template-columns: 1fr; }
  .pie { grid-template-columns: 1fr; }
  .pie-enlaces { justify-self: start; }
  .escena-antes { clip-path: inset(18vh 22vw 26vh var(--margen)); }
  .escena-titular { bottom: 16vh; }
  .e-despues { top: calc(12vh + 44px); right: auto; left: var(--margen); }
}

/* movimiento reducido: todo visible y quieto, el antes/después en dos fotos seguidas */
@media (prefers-reduced-motion: reduce) {
  .escena { height: auto; }
  .escena-lienzo { position: relative; display: grid; gap: 2px; }
  .escena-capa { position: relative; clip-path: none !important; aspect-ratio: 16 / 9; }
  .escena-linea, .escena-sombra { display: none; }
  .e-despues { opacity: 1; top: calc(50% + 16px); left: var(--margen); right: auto; }
  .escena-titular { position: relative; transform: none; padding: 6vh var(--margen) 0; white-space: normal; bottom: auto; }
  .escena-pie { position: relative; opacity: 1; padding: 2vh var(--margen) 8vh; bottom: auto; left: auto; }
  .escena-etiqueta { top: 16px; }
  * { transition: none !important; }
}