/* ═══════════════════════════════════════════════════════════════
   TOXIC LABORATORY · styles.css — hoja única para las 4 páginas
   ───────────────────────────────────────────────────────────────
   COLORES: cambia un valor aquí y se actualiza todo el sitio.
     --noir      basalto húmedo (fondos oscuros)
     --tinta     texto sobre claro
     --hueso     fondo claro principal
     --papel     fondo claro alterno
     --laton     acento metálico sobre claro
     --champana  acento metálico sobre oscuro
   TIPOGRAFÍAS: Italiana (títulos) · Archivo (texto) · Plex Mono (datos)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --noir:#14110C;
  --tinta:#26231E;
  --hueso:#EDE7DA;
  --papel:#F5F0E6;
  --laton:#9A7B45;
  --champana:#CFB37D;

  --linea:rgba(38,35,30,.16);
  --linea-clara:rgba(237,231,218,.22);
  --texto:rgba(38,35,30,.82);
  --texto-claro:rgba(237,231,218,.78);

  --display:'Italiana',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --margen:clamp(20px,5vw,84px);
  --suave:cubic-bezier(.22,.61,.36,1);
  --expo:cubic-bezier(.87,0,.13,1);
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.7;
  background:var(--hueso);color:var(--tinta);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.sin-scroll{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
::selection{background:var(--champana);color:var(--noir)}
:focus-visible{outline:2px solid var(--laton);outline-offset:3px}
.mono{font-family:var(--mono)}
.solo-pc{display:inline}
@media(max-width:700px){.solo-pc{display:none}}

/* Cejas de sección (etiqueta técnica con línea) */
.ceja{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--laton);display:flex;align-items:center;gap:14px;
}
.ceja::after{content:"";flex:0 0 46px;height:1px;background:var(--laton);opacity:.5}
.ceja--clara{color:var(--champana)}
.ceja--clara::after{background:var(--champana)}

/* Cabezas de sección */
.seccion__cabeza{padding:0 var(--margen);margin-bottom:clamp(40px,7vh,84px)}
.seccion__cabeza--doble{
  display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
}
.seccion__titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,6.4vw,86px);line-height:1.04;letter-spacing:.005em;
  margin-top:22px;
}
.seccion__titulo em{font-style:italic;color:var(--laton)}
.seccion__nota{margin-top:16px;max-width:46ch;color:var(--texto);font-size:15px}

/* Botones y enlaces */
.btn{
  display:inline-block;padding:17px 36px;border:1px solid transparent;
  font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  transition:background .45s var(--suave),color .45s var(--suave),transform .45s var(--suave);
}
.btn--claro{background:var(--hueso);color:var(--noir)}
.btn--claro:hover{background:var(--champana);transform:translateY(-2px)}
.btn--oscuro{background:var(--noir);color:var(--hueso)}
.btn--oscuro:hover{background:var(--laton);transform:translateY(-2px)}
.enlace-linea{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  position:relative;padding-bottom:5px;color:var(--tinta);
}
.enlace-linea::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:left;transition:transform .5s var(--expo);
}
.enlace-linea:hover::after{transform:scaleX(.35)}
.enlace-linea--claro{color:var(--hueso)}

/* ── Grano de película ────────────────────────────────────────── */
.grano{
  position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grano-mov 7s steps(6) infinite;
}
@keyframes grano-mov{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}
}

/* ── Pantalla de carga ────────────────────────────────────────── */
.cargador{
  position:fixed;inset:0;z-index:200;background:var(--noir);color:var(--hueso);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform 1.05s var(--expo) .1s;
}
.cargador--breve{gap:16px}
.cargador__logo{height:52px;width:auto;opacity:.9}
.cargador__marca{font-family:var(--display);font-size:clamp(26px,4vw,40px);letter-spacing:.04em}
.cargador__marca em{font-style:italic;color:var(--champana)}
.cargador__barra{width:min(220px,52vw);height:1px;background:var(--linea-clara);overflow:hidden}
.cargador__barra i{display:block;height:100%;width:0;background:var(--champana)}
.cargador__cifra{font-size:11px;letter-spacing:.34em;color:var(--texto-claro)}
body.cargado .cargador{transform:translateY(-101%);pointer-events:none}

/* ── Cursor personalizado (solo puntero fino) ─────────────────── */
.cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;left:0;top:0;z-index:300;pointer-events:none}
  .cursor__punto{
    position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
    background:var(--hueso);mix-blend-mode:difference;
  }
  .cursor__aro{
    position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(154,123,69,.55);
    display:flex;align-items:center;justify-content:center;
    transition:transform .4s var(--suave),background .4s var(--suave),border-color .4s var(--suave);
  }
  .cursor__texto{font-size:9px;letter-spacing:.2em;color:var(--noir);opacity:0;transition:opacity .3s}
  .cursor.cursor--ver .cursor__aro{transform:scale(1.65);background:var(--champana);border-color:var(--champana)}
  .cursor.cursor--ver .cursor__texto{opacity:1}
  .cursor.cursor--ver .cursor__punto{opacity:0}
}

/* ── Plomada de progreso (borde derecho, escritorio) ──────────── */
.plomada{
  position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--laton);transition:color .6s;
}
body.tema-oscuro .plomada{color:var(--champana)}
.plomada__riel{position:relative;width:1px;height:30vh;background:currentColor;opacity:.9}
.plomada__riel::before,.plomada__riel::after{
  content:"";position:absolute;left:-4px;width:9px;height:1px;background:currentColor;
}
.plomada__riel::before{top:0}.plomada__riel::after{bottom:0}
.plomada__gota{
  position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:currentColor;
}
.plomada__seccion{font-size:9px;letter-spacing:.3em;writing-mode:vertical-rl;transform:rotate(180deg)}
.plomada__cifra{font-size:9px;letter-spacing:.2em}
@media(max-width:1023px){.plomada{display:none}}

/* ── WhatsApp flotante ────────────────────────────────────────── */
.wa-flotante{
  position:fixed;right:24px;bottom:24px;z-index:75;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--laton);color:var(--noir);
  box-shadow:0 10px 30px rgba(20,17,12,.28);
  transition:background .4s,transform .4s var(--suave);
}
.wa-flotante:hover{background:var(--champana);transform:translateY(-3px)}

/* ── Navegación ───────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vh,24px) var(--margen);
  transition:background .5s,border-color .5s;
  border-bottom:1px solid transparent;color:var(--tinta);
}
.nav.desplazada{background:rgba(237,231,218,.9);backdrop-filter:blur(12px);border-bottom-color:var(--linea)}
.nav__marca{display:flex;align-items:center;gap:14px}
.nav__logos{position:relative;width:36px;height:38px}
.nav__logo{position:absolute;inset:0;height:38px;width:auto;transition:opacity .5s}
.nav__logo--claro{opacity:0}
.nav__id{display:flex;flex-direction:column;gap:3px}
.nav__nombre{font-family:var(--display);font-size:15px;letter-spacing:.22em}
.nav__sub{font-size:8px;letter-spacing:.3em;color:var(--laton)}
.nav__enlaces{display:flex;align-items:center;gap:clamp(22px,3.4vw,44px)}
.nav__enlaces a{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  position:relative;padding-bottom:4px;
}
.nav__enlaces a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--expo);
}
.nav__enlaces a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__enlaces a.activa{color:var(--laton)}
.nav__enlaces a.activa::after{transform:scaleX(1)}
.nav__cta{color:var(--laton)}

/* Nav sobre secciones oscuras */
.nav.nav--clara{color:var(--hueso)}
.nav.nav--clara.desplazada{background:rgba(20,17,12,.82);border-bottom-color:var(--linea-clara)}
.nav.nav--clara .nav__logo--claro{opacity:1}
.nav.nav--clara .nav__logo--oscuro{opacity:0}
.nav.nav--clara .nav__sub,.nav.nav--clara .nav__cta,
.nav.nav--clara .nav__enlaces a.activa{color:var(--champana)}

/* Hamburguesa */
.nav__hamb{display:none;width:40px;height:32px;position:relative;z-index:96}
.nav__hamb span{
  position:absolute;left:8px;right:8px;height:1px;background:currentColor;
  transition:transform .5s var(--expo),top .5s var(--expo);
}
.nav__hamb span:first-child{top:12px}
.nav__hamb span:last-child{top:20px}
body.menu-abierto .nav__hamb span:first-child{top:16px;transform:rotate(45deg)}
body.menu-abierto .nav__hamb span:last-child{top:16px;transform:rotate(-45deg)}
body.menu-abierto .nav{color:var(--hueso);background:transparent;border-bottom-color:transparent}
body.menu-abierto .nav .nav__logo--claro{opacity:1}
body.menu-abierto .nav .nav__logo--oscuro{opacity:0}
@media(max-width:900px){
  .nav__enlaces{display:none}
  .nav__hamb{display:block}
}

/* Menú móvil */
.menu{
  position:fixed;inset:0;z-index:88;background:var(--noir);color:var(--hueso);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--margen);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--expo);
}
body.menu-abierto .menu{clip-path:inset(0 0 0% 0)}
.menu__lista{display:flex;flex-direction:column}
.menu__lista a{
  font-family:var(--display);font-size:clamp(38px,10vw,64px);line-height:1.25;
  display:flex;align-items:baseline;gap:18px;
  padding:10px 0;border-bottom:1px solid var(--linea-clara);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--suave),transform .6s var(--suave);
}
.menu__lista a .mono{font-size:11px;letter-spacing:.2em;color:var(--champana)}
body.menu-abierto .menu__lista a{opacity:1;transform:none}
body.menu-abierto .menu__lista a:nth-child(1){transition-delay:.25s}
body.menu-abierto .menu__lista a:nth-child(2){transition-delay:.32s}
body.menu-abierto .menu__lista a:nth-child(3){transition-delay:.39s}
body.menu-abierto .menu__lista a:nth-child(4){transition-delay:.46s}
.menu__pie{margin-top:44px;font-size:10px;letter-spacing:.24em;color:var(--texto-claro)}

/* ── Marcos de fotografía ─────────────────────────────────────
   Cada foto vive dentro de un .marco-foto. Para cambiarla,
   edita el <img src="…"> en el HTML. Si el archivo no existe,
   aparece un marco elegante con el nombre esperado.           */
.marco-foto{position:relative;overflow:hidden;background:rgba(38,35,30,.06)}
.marco-foto picture{display:contents}
.marco-foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--suave);
}
[data-ampliable]{cursor:pointer}
.marco-foto.foto-vacia{border:1px dashed var(--linea)}
.marco-foto.foto-vacia::after{
  content:attr(data-etiqueta);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--laton);
  text-align:center;padding:16px;
}
/* Las imágenes que GSAP mueve cuadro a cuadro no llevan transición CSS */
img[data-parallax-hero],
.gal-panel__media img{transition:none}

/* Pie de fotografía (título + línea técnica) */
.pie-foto{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:14px}
.pie-foto__titulo{font-family:var(--display);font-size:clamp(18px,2vw,24px)}
.pie-foto__meta{font-size:9px;letter-spacing:.26em;color:var(--laton)}

/* ── Portada (index) ──────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;background:var(--noir);color:var(--hueso);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* El padding superior reserva la zona de la barra fija: el titular
     nunca puede subir a competir con el logo, ni en pantallas bajas */
  padding:clamp(110px,16vh,170px) var(--margen) clamp(56px,10vh,120px);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,12,.55) 0%,rgba(20,17,12,.18) 42%,rgba(20,17,12,.82) 100%);
}
.he-plano{
  position:absolute;left:0;right:0;bottom:6vh;margin:auto;
  width:min(1100px,92vw);height:auto;color:var(--champana);opacity:.5;
  pointer-events:none;
}
.he-plano .trazo{stroke-dasharray:1200;stroke-dashoffset:0}
.he-plano__cotas{opacity:.8}
.hero__cuerpo{position:relative;z-index:2;max-width:1100px}
.hero__ceja{font-size:10px;letter-spacing:.3em;color:var(--champana);margin-bottom:26px}
.hero__titulo{
  font-family:var(--display);font-weight:400;
  /* min(7.4vw, 10.5vh): en pantallas anchas pero BAJAS (laptop 17")
     manda la altura y el titular se encoge solo; en monitores altos
     y en celular se comporta igual que antes */
  font-size:clamp(42px,min(7.4vw,10.5vh),108px);
  line-height:1.02;letter-spacing:.005em;
}
.hero__titulo em{font-style:italic;color:var(--champana)}
.linea{display:block;overflow:hidden;padding-bottom:.06em}
[data-linea]{display:block;will-change:transform}
.hero__bajada{margin-top:26px;max-width:56ch;color:var(--texto-claro);font-size:clamp(14px,1.6vw,17px)}
.hero__cta{display:flex;align-items:center;gap:34px;margin-top:38px;flex-wrap:wrap}
.hero__pie{
  position:relative;z-index:2;margin-top:clamp(40px,7vh,70px);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:9px;letter-spacing:.26em;color:var(--texto-claro);
}
.hero__desliza{display:flex;align-items:center;gap:10px}
.hero__desliza i{width:1px;height:34px;background:var(--champana);display:block;position:relative;overflow:hidden}
.hero__desliza i::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--hueso);animation:desliza 2.2s var(--expo) infinite;
}
@keyframes desliza{0%{top:-100%}60%{top:100%}100%{top:100%}}
@media(max-width:700px){
  .hero__pie span:last-child{display:none}
  .he-plano{opacity:.32}
}
/* Laptops anchas y bajas (p. ej. 17"): compactar el bloque para
   que respire lejos de la barra fija */
@media(min-width:701px) and (max-height:850px){
  .hero__ceja{margin-bottom:18px}
  .hero__bajada{margin-top:18px}
  .hero__cta{margin-top:26px}
  .hero__pie{margin-top:clamp(24px,4vh,44px)}
  .he-plano{width:min(820px,70vw)}
}

/* ── Cabecera de páginas interiores ───────────────────────────── */
.portada-pagina{
  position:relative;min-height:72svh;background:var(--noir);color:var(--hueso);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(120px,18vh,180px) var(--margen) clamp(60px,9vh,90px);
  overflow:hidden;
}
.portada-pagina--compacta{min-height:58svh}
.portada-pagina::after{           /* cotas de esquina, guiño de plano */
  content:"";position:absolute;right:var(--margen);bottom:clamp(60px,9vh,90px);
  width:34px;height:34px;
  border-right:1px solid var(--champana);border-bottom:1px solid var(--champana);
  opacity:.6;
}
.portada-pagina__ceja{font-size:10px;letter-spacing:.3em;color:var(--champana);margin-bottom:22px}
.portada-pagina__titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(58px,min(13vw,17vh),160px);line-height:.98;
}
.portada-pagina__bajada{margin-top:22px;max-width:56ch;color:var(--texto-claro);font-size:clamp(14px,1.6vw,17px)}

/* ── Marquesina ───────────────────────────────────────────────── */
.marquesina{
  background:var(--noir);color:var(--hueso);overflow:hidden;
  border-top:1px solid var(--linea-clara);border-bottom:1px solid var(--linea-clara);
  padding:20px 0;
}
.marquesina__pista{display:flex;width:max-content;will-change:transform}
.marquesina__pista span{
  font-family:var(--display);font-size:clamp(26px,3.6vw,44px);
  white-space:nowrap;padding-right:.4em;
}
.marquesina__pista{animation:marquesina 26s linear infinite}
@keyframes marquesina{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquesina__pista.js-viva{animation:none}

/* ── Manifiesto (index) ───────────────────────────────────────── */
.manifiesto{background:var(--hueso);padding:clamp(90px,16vh,170px) var(--margen)}
.manifiesto__ceja{font-size:11px;letter-spacing:.32em;color:var(--laton);margin-bottom:34px}
.manifiesto__texto{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.6vw,60px);line-height:1.22;max-width:22ch;
}
.manifiesto__texto .palabra{display:inline-block;white-space:pre-wrap}
.fichas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);
  margin-top:clamp(70px,12vh,120px);
}
.ficha{display:flex;flex-direction:column;gap:12px}
.ficha__cota{position:relative;height:9px;border-left:1px solid var(--laton);border-right:1px solid var(--laton)}
.ficha__cota::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--laton)}
.ficha__etiqueta{font-size:10px;letter-spacing:.28em;color:var(--laton)}
.ficha__valor{font-size:15px;line-height:1.6;color:var(--texto);max-width:30ch}
@media(max-width:800px){.fichas{grid-template-columns:1fr;gap:34px}}

/* ── Avance de obra (index) ───────────────────────────────────── */
.teaser{background:var(--hueso);padding:clamp(30px,6vh,70px) 0 clamp(90px,15vh,160px)}
.teaser__malla{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,3vw,44px);padding:0 var(--margen);
}
.teaser__pieza .marco-foto{aspect-ratio:4/3}
.teaser__pieza--ancha{grid-column:1/-1}
.teaser__pieza--ancha .marco-foto{aspect-ratio:21/9}
.teaser__pieza:hover .marco-foto img{transform:scale(1.06)}
@media(max-width:700px){
  .teaser__malla{grid-template-columns:1fr}
  .teaser__pieza--ancha .marco-foto{aspect-ratio:4/3}
}

/* ── Galería horizontal (proyectos) ───────────────────────────── */
.galeria{background:var(--noir);color:var(--hueso);position:relative}
.galeria .pie-foto__meta{color:var(--champana)}
.galeria__fijo{display:flex;align-items:center;overflow:hidden}
/* Durante el viaje horizontal la sección ocupa TODA la pantalla:
   sin franja clara debajo, obras centradas verticalmente
   (solo en modo mejorado; en móvil el carrete nativo no la necesita) */
body.mejorado-h .galeria__fijo{height:100svh}
.galeria__pista{
  display:flex;align-items:center;gap:clamp(36px,6vw,110px);
  padding:clamp(70px,10vh,110px) var(--margen);
  width:max-content;will-change:transform;
}
/* Respaldo táctil / sin efectos: deslizamiento horizontal nativo */
body:not(.mejorado-h) .galeria__pista{
  width:auto;max-width:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
body:not(.mejorado-h) .galeria__pista::-webkit-scrollbar{display:none}
body:not(.mejorado-h) .gal-panel,
body:not(.mejorado-h) .gal-intro,
body:not(.mejorado-h) .gal-cierre{scroll-snap-align:center}

.gal-intro{flex:0 0 auto;width:min(720px,82vw)}
.gal-intro__ceja{font-size:11px;letter-spacing:.32em;color:var(--champana);margin-bottom:26px}
.gal-intro__titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.6vw,78px);line-height:1.06;
}
.gal-intro__titulo em{font-style:italic;color:var(--champana)}
.gal-intro__pista{margin-top:40px;font-size:10px;letter-spacing:.3em;color:var(--texto-claro);display:flex;align-items:center;gap:12px}
.flecha-anim{display:inline-block;animation:flecha 1.8s var(--suave) infinite}
@keyframes flecha{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}

.gal-panel{flex:0 0 auto;position:relative}
.gal-panel__media{width:min(760px,84vw);aspect-ratio:3/2;max-height:62vh}
.gal-panel__media img{transform:scale(1.15)}   /* margen para el parallax interno */
.gal-panel__indice{
  position:absolute;top:-.52em;left:-.24em;z-index:3;
  font-size:clamp(72px,9vw,128px);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--champana);
  pointer-events:none;
}
.gal-panel .pie-foto{margin-top:16px}
.gal-panel .pie-foto__titulo{font-size:clamp(20px,2.2vw,27px)}
.gal-panel:hover .gal-panel__media img{transform:scale(1.08)}

.gal-cierre{flex:0 0 auto;width:min(560px,80vw);padding-right:var(--margen)}
.gal-cierre__texto{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);line-height:1.15}
.gal-cierre__nota{margin-top:22px;font-size:10px;letter-spacing:.26em;line-height:2;color:var(--champana)}

/* ── Servicios (index) ────────────────────────────────────────── */
.servicios{background:var(--hueso);padding:clamp(90px,16vh,170px) 0}
.serv-lista{border-top:1px solid var(--linea)}
.serv{border-bottom:1px solid var(--linea)}
.serv__cabeza{
  width:100%;display:grid;grid-template-columns:64px 1fr 1fr 40px;
  align-items:baseline;gap:clamp(14px,3vw,40px);text-align:left;
  padding:clamp(26px,4.5vh,42px) var(--margen);
}
.serv__num{font-size:11px;letter-spacing:.2em;color:var(--laton)}
.serv__nombre{
  font-family:var(--display);font-size:clamp(30px,4.4vw,58px);line-height:1;
  transition:transform .55s var(--expo),color .45s;
}
.serv__resumen{font-size:14px;color:var(--texto);justify-self:end;text-align:right;max-width:26ch}
.serv__mas{font-size:20px;justify-self:end;transition:transform .5s var(--expo);color:var(--laton)}
.serv:hover .serv__nombre{transform:translateX(14px);color:var(--laton)}
.serv.abierta .serv__mas{transform:rotate(45deg)}
.serv__cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--expo)}
.serv.abierta .serv__cuerpo{grid-template-rows:1fr}
.serv__interior{overflow:hidden;padding:0 var(--margen)}
.serv__interior p{max-width:58ch;color:var(--texto);margin-bottom:22px}
.serv__interior .enlace-linea{margin-bottom:clamp(28px,4.5vh,46px);display:inline-block}
.serv__movil{display:none}
@media(max-width:900px){
  .serv__cabeza{grid-template-columns:44px 1fr 30px}
  .serv__resumen{display:none}
  .serv__movil{display:block;aspect-ratio:3/2;max-width:520px;margin:4px 0 24px}
}

/* Vista previa flotante que sigue al cursor */
.serv-flotante{display:none}
@media(hover:hover) and (pointer:fine){
  .serv-flotante{
    display:block;position:fixed;left:0;top:0;z-index:60;pointer-events:none;
    width:min(330px,26vw);aspect-ratio:4/3;opacity:0;
    transition:opacity .4s var(--suave);
    box-shadow:0 30px 80px rgba(20,17,12,.35);
  }
  .serv-flotante.visible{opacity:1}
  .serv-flotante__img{position:absolute;inset:0;background-size:cover;background-position:center}
}

/* ── Equipo (nosotros) ────────────────────────────────────────── */
.equipo{background:var(--hueso);padding:clamp(90px,15vh,160px) 0 clamp(40px,7vh,80px)}
.equipo__malla{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,90px);
  padding:0 var(--margen);align-items:start;
}
.equipo__statement{
  font-family:var(--display);font-size:clamp(26px,3.4vw,44px);
  line-height:1.22;margin-top:26px;max-width:18ch;
}
.equipo__copy p{max-width:58ch;color:var(--texto);margin-bottom:20px}
@media(max-width:900px){.equipo__malla{grid-template-columns:1fr;gap:34px}}

/* ── Método (nosotros) ────────────────────────────────────────── */
.metodo{background:var(--hueso);padding:clamp(60px,10vh,110px) 0 clamp(100px,16vh,180px)}
.metodo__cuadro{position:relative;padding:0 var(--margen)}
.metodo__linea{
  position:absolute;left:var(--margen);right:var(--margen);top:0;height:1px;
  background:var(--laton);transform-origin:left;
}
.pasos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.6vw,54px);
  padding-top:clamp(34px,5vh,54px);
}
.paso{position:relative}
.paso::before{
  content:"";position:absolute;top:calc(-1 * clamp(34px,5vh,54px));left:0;
  width:1px;height:12px;background:var(--laton);
}
.paso__num{font-size:11px;letter-spacing:.24em;color:var(--laton)}
.paso__titulo{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);margin:14px 0 12px}
.paso__texto{font-size:14px;line-height:1.75;color:var(--texto)}
@media(max-width:900px){
  .pasos{grid-template-columns:1fr;gap:44px;padding-top:0;padding-left:34px}
  .metodo__linea{left:var(--margen);right:auto;top:6px;bottom:0;width:1px;height:auto;transform-origin:top}
  .paso::before{top:8px;left:-34px;width:12px;height:1px}
}

/* ── Entregas recientes (proyectos) ───────────────────────────── */
.obras{background:var(--papel);padding:clamp(90px,16vh,170px) 0}
.obras__malla{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,44px);padding:0 var(--margen);
}
.obra{display:flex;flex-direction:column}
.obra__media{aspect-ratio:4/3;width:100%}
.obra__media img{transform:scale(1.06)}
.obra:hover .obra__media img{transform:scale(1.12)}
.obra .pie-foto__titulo{font-size:17px}
/* Ritmo editorial: la columna central baja medio paso en escritorio.
   (margin y no transform: GSAP usa transform para los revelados) */
@media(min-width:901px){.obra:nth-child(3n-1){margin-top:56px}}
@media(max-width:900px){.obras__malla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.obras__malla{grid-template-columns:1fr}.obra__media{aspect-ratio:3/2}}

/* ── Filosofía (index y nosotros) ─────────────────────────────── */
.filosofia{
  position:relative;min-height:88svh;background:var(--noir);color:var(--hueso);
  display:flex;align-items:center;overflow:hidden;
}
.filosofia__media{position:absolute;inset:0}
.filosofia__velo{position:absolute;inset:0;background:rgba(20,17,12,.66)}
.filosofia__cuerpo{position:relative;z-index:2;padding:clamp(90px,14vh,150px) var(--margen);max-width:1000px}
.filosofia__cita{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.4vw,56px);line-height:1.25;margin-top:30px;
}
.filosofia__firma{margin-top:34px;font-size:10px;letter-spacing:.3em;color:var(--champana)}

/* ── Contacto (contacto.html) ─────────────────────────────────── */
.contacto{background:var(--hueso);padding:clamp(80px,13vh,140px) 0 clamp(100px,15vh,170px)}
.contacto__malla{
  display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,7vw,110px);
  padding:0 var(--margen);align-items:start;
}
@media(max-width:900px){.contacto__malla{grid-template-columns:1fr;gap:70px}}

.formulario .ceja{margin-bottom:44px}
.campo{margin-bottom:34px}
.campo--doble{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:560px){.campo--doble{grid-template-columns:1fr}}
.campo__etiqueta{
  display:block;font-size:10px;letter-spacing:.26em;color:var(--laton);margin-bottom:10px;
}
.campo__control{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--linea);
  padding:12px 0;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--tinta);
  border-radius:0;transition:border-color .4s;
}
.campo__control::placeholder{color:rgba(38,35,30,.35)}
.campo__control:focus{outline:none;border-bottom-color:var(--laton)}
textarea.campo__control{resize:vertical;min-height:96px}
select.campo__control{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A7B45' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.formulario .btn{margin-top:10px}
.formulario__nota{margin-top:18px;font-size:9px;letter-spacing:.3em;color:var(--laton)}

.datos .ceja{margin-bottom:30px}
.datos__fila{
  display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--linea);
}
.datos__etiqueta{font-size:10px;letter-spacing:.26em;color:var(--laton)}
.datos__valor{font-size:15px;line-height:1.6}
a.datos__valor:hover{color:var(--laton)}
.datos__valor--mono{font-size:11px;letter-spacing:.14em}
.datos__nota{margin-top:30px;font-size:14px;color:var(--texto);max-width:34ch}

/* ── Cierre ───────────────────────────────────────────────────── */
.cierre{
  background:var(--noir);color:var(--hueso);text-align:center;
  padding:clamp(110px,18vh,200px) var(--margen) clamp(90px,14vh,150px);
}
.cierre--breve{padding:clamp(80px,12vh,140px) var(--margen)}
.cierre .ceja{justify-content:center}
.cierre .ceja::before{content:"";flex:0 0 46px;height:1px;background:var(--champana);opacity:.5}
.cierre__titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(72px,17vw,220px);line-height:.95;letter-spacing:.01em;
  margin:26px 0 30px;
}
.cierre__titulo--medio{font-size:clamp(40px,7.6vw,96px);line-height:1.05;margin:0 0 34px}
.cierre__texto{max-width:52ch;margin:0 auto;color:var(--texto-claro)}
.cierre__cta{display:flex;align-items:center;justify-content:center;gap:36px;margin-top:46px;flex-wrap:wrap}
.cierre--breve .cierre__cta{margin-top:0}
.cierre__nota{margin-top:54px;font-size:9px;letter-spacing:.3em;color:var(--champana)}

/* ── Pie ──────────────────────────────────────────────────────── */
.pie{background:var(--noir);color:var(--hueso);border-top:1px solid var(--linea-clara)}
.pie__sup{
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  padding:clamp(34px,6vh,54px) var(--margen);
}
.pie__marca{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:20px}
.pie__marca em{font-style:italic;color:var(--champana)}
.pie__marca img{height:34px;width:auto}
.pie__nav{display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.pie__nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-claro)}
.pie__nav a:hover{color:var(--champana)}
.pie__inf{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px var(--margen) 26px;border-top:1px solid var(--linea-clara);
  font-size:9px;letter-spacing:.22em;color:var(--texto-claro);
}
.pie__inf a:hover{color:var(--champana)}

/* ── Visor de fotografías ─────────────────────────────────────── */
.visor{
  position:fixed;inset:0;z-index:150;background:rgba(20,17,12,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s var(--suave),visibility 0s .5s;
}
.visor.abierto{opacity:1;visibility:visible;transition:opacity .5s var(--suave)}
.visor__figura{max-width:min(1280px,90vw);text-align:center}
.visor__img{
  max-width:90vw;max-height:80svh;width:auto;height:auto;margin:0 auto;
  object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.5);
}
.visor__pie{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:18px;color:var(--hueso)}
.visor__titulo{font-family:var(--display);font-size:clamp(17px,2vw,22px)}
.visor__contador{font-size:10px;letter-spacing:.26em;color:var(--champana)}
.visor__cerrar{
  position:absolute;top:18px;right:26px;z-index:2;
  font-size:38px;font-weight:200;color:var(--hueso);line-height:1;padding:10px;
  transition:color .3s,transform .3s;
}
.visor__cerrar:hover{color:var(--champana);transform:rotate(90deg)}
.visor__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  font-size:26px;color:var(--hueso);padding:22px;
  transition:color .3s,transform .3s var(--suave);
}
.visor__flecha--izq{left:12px}
.visor__flecha--der{right:12px}
.visor__flecha--izq:hover{color:var(--champana);transform:translateY(-50%) translateX(-6px)}
.visor__flecha--der:hover{color:var(--champana);transform:translateY(-50%) translateX(6px)}
@media(max-width:700px){.visor__flecha{display:none}} /* en móvil: desliza con el dedo */

/* ── Accesibilidad: movimiento reducido ───────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .marquesina__pista{animation:none}
}