/* ==========================================================
   SHEKINAH \ ESTILOS COMPARTIDOS
   Lo usan index.html y brokers.html. Un cambio aca impacta
   en las dos paginas: es justamente el objetivo.
   ========================================================== */

/* ============================================================
   SHEKINAH CONSTRUCCIONES
   Paleta del logo: naranja #D3782E + gris pizarra #5F6567.
   ============================================================ */
:root{
  --bg:#0D0D0E;
  --bg-2:#141416;
  --surface:#1A1A1D;
  --line:#2A2A2E;
  --text:#F0EBE4;
  --muted:#9C958C;
  --brand:#D3782E;
  --brand-2:#B8641F;
  --slate:#5F6567;
  /* Texto de párrafo. --muted (6,56:1) alcanza para etiquetas sueltas
     pero cansa en textos largos; este llega a 10,89:1 y sigue leyéndose
     como secundario frente al blanco de los títulos. */
  --text-2:#C8C1B8;
  --maxw:1200px;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

::selection{background:var(--brand);color:#0D0D0E}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#31312f;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--brand-2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- Tipografía de sección ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--brand);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brand);opacity:.7}
h2.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4.1rem);
  line-height:1.06;letter-spacing:-.015em;margin:22px 0 0;
}
h2.display em{font-style:italic;color:var(--brand)}
.lede{color:var(--text-2);max-width:58ch;margin-top:24px;font-size:1.06rem}

section{padding:clamp(88px,11vw,150px) 0;position:relative}
/* Respaldo por si se entra directo con la URL terminada en #obras:
   sin esto el header fijo tapa el arranque de la sección. */
section[id]{scroll-margin-top:90px}

/* ---------- Navegación ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:18px 0;transition:padding .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
header.stuck{
  padding:10px 0;
  background:rgba(13,13,14,.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
/* IMPORTANTE: backdrop-filter convierte al header en el marco de
   referencia de sus hijos position:fixed. Con el menú abierto, ese
   "inset:0" del nav pasaba a significar "la caja del header" (66px)
   en vez de "la pantalla", y la lista quedaba recortada e inalcanzable.
   Mientras el menú está abierto se apaga el desenfoque. */
header.menu-open{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Sin velo arriba, la legibilidad del nav sobre la foto la da la sombra.
   Se apaga en cuanto el header toma su propio fondo con blur. */
header:not(.stuck) .navbar{text-shadow:0 1px 16px rgba(0,0,0,.65),0 0 4px rgba(0,0,0,.4)}
header:not(.stuck) .brand img{filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
header.stuck .navbar{text-shadow:none}
/* El logo es solo isotipo, así que el nombre va como firma al lado */
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{height:52px;width:auto;transition:height .45s var(--ease)}
header.stuck .brand img{height:42px}
/* Grotesca en caja alta, en el espíritu del "SKH" del logo original:
   el isotipo es geométrico y una serif le competía. */
.wordmark{display:flex;flex-direction:column;line-height:1;padding-left:15px;border-left:1px solid var(--line)}
.wordmark b{
  font-family:var(--sans);font-weight:500;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
}
/* La bajada sí queda en mayúsculas: replica el lockup del logo real,
   que dice "ARQ & CONSTRUCCION" en caja alta. Pero de 8,5px pasa a 10
   y con menos espaciado, que a ese tamaño era ilegible. */
.wordmark span{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brand);margin-top:7px;white-space:nowrap;
}
.foot .wordmark b{font-size:17px}
.foot .wordmark span{font-size:10.5px}

nav{display:flex;align-items:center;gap:clamp(18px,2.1vw,30px)}
nav a{
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);font-weight:400;position:relative;padding:6px 0;
  transition:color .3s var(--ease);
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--brand);transition:width .4s var(--ease);
}
nav a:hover{color:var(--text)}
nav a:hover::after{width:100%}
nav a.solo-movil{display:none}

/* Sin mayúsculas forzadas: las etiquetas de los botones son largas
   ("Hablemos de tu proyecto", "Consultar por esta propiedad") y en caja
   alta se pierde la silueta de la palabra, que es lo que permite
   reconocerla de un vistazo. En caja normal y un punto más grande se
   leen bastante más rápido, que es justo lo que querés en un botón. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid var(--brand);
  font-size:13.5px;letter-spacing:.03em;font-weight:500;
  color:var(--brand);background:transparent;cursor:pointer;font-family:var(--sans);
  transition:background .4s var(--ease),color .4s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--brand);color:#0D0D0E;transform:translateY(-2px)}
.btn.solid{background:var(--brand);color:#0D0D0E}
.btn.solid:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:1.5px;background:var(--text);transition:.3s var(--ease)}

/* ---------- HERO — vídeo scroll-driven ---------- */
/* 250vh: el vídeo de 10 s se recorre a lo largo de 150vh de scroll.
   Más alto = más lento. 200vh es el mínimo razonable; 420vh era el
   arranque y a Gabriel le resultaba demasiado lento. */
.hero{height:250vh;position:relative}
.hero-sticky{
  position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;
  display:flex;align-items:flex-end;padding:0 0 clamp(60px,9vh,110px);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,
.hero-media video{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
/* Arriba: velo CERO. El cielo nocturno de la foto ya da todo el
   contraste que el nav necesita, y cualquier capa oscura ahí se lee
   como un bloque negro. La legibilidad del nav la resuelve el
   text-shadow de más abajo, que no dibuja ninguna forma.
   El degradado sólo existe en la mitad inferior, donde sí hace
   falta para que se lea el titular. */
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(13,13,14,0)   0%,
      rgba(13,13,14,0)   38%,
      rgba(13,13,14,.22) 58%,
      rgba(13,13,14,.70) 81%,
      rgba(13,13,14,.96) 100%),
    radial-gradient(120% 80% at 12% 90%,rgba(211,120,46,.14),transparent 60%);
}
.hero-copy{position:relative;z-index:2;width:100%;will-change:transform,opacity}
.hero-credit{
  position:absolute;left:0;bottom:34px;z-index:3;width:100%;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hero-credit b{color:var(--brand);font-weight:500}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.9rem,7.6vw,6.4rem);
  line-height:.98;letter-spacing:-.025em;margin:26px 0 0;max-width:15ch;
}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero p{color:#CFC8C0;max-width:46ch;margin-top:26px;font-size:1.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

.scroll-hint{
  position:absolute;bottom:34px;right:28px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.scroll-hint i{display:block;width:1px;height:52px;background:linear-gradient(180deg,var(--brand),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Barra de métricas ---------- */
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);padding:0}
.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.metric{padding:clamp(44px,6vw,72px) 28px;text-align:center;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric .num{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.8rem,6vw,4.6rem);line-height:1;color:var(--brand);
  display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.metric .num .plus{font-size:.5em;color:var(--muted)}
.metric .lbl{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:16px}

/* ---------- Estudio ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:center}
.figure{position:relative;overflow:hidden}
.figure img{width:100%;height:clamp(420px,58vw,620px);object-fit:cover;will-change:transform}
.figure::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(13,13,14,.5));pointer-events:none}
.figure .tag{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--brand);color:#0D0D0E;
  padding:14px 22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.quote{
  border-left:2px solid var(--brand);padding:6px 0 6px 24px;margin-top:34px;
  font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.4;color:var(--text);
}

/* ---------- Equipo ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:64px;border:1px solid var(--line)}
.member{background:var(--bg);padding:34px 26px 38px;transition:background .45s var(--ease)}
.member:hover{background:var(--surface)}
.face{width:100%;max-width:128px;height:auto;border-radius:50%;transition:transform .6s var(--ease)}
.member:hover .face{transform:translateY(-6px) scale(1.04)}
/* Foto real: recorte circular, encuadre un poco arriba del centro
   porque en un retrato la cara nunca está en el medio geométrico.
   El grading la alinea con el resto de las imágenes del sitio. */
.face.foto{
  aspect-ratio:1;object-fit:cover;object-position:center 22%;
  filter:saturate(.9) contrast(1.03);
  border:1px solid var(--line);
}
/* Si la foto cargó, se esconde la ilustración; si el archivo no existe,
   el onerror borra el <img> y la ilustración queda a la vista. */
.member.con-foto svg.face{display:none}
.member h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-top:26px;letter-spacing:-.01em}
.member .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* ---------- Servicios ---------- */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:70px;border:1px solid var(--line)}
.service{
  background:var(--bg);padding:clamp(36px,4.6vw,60px);position:relative;overflow:hidden;
  transition:background .5s var(--ease),transform .5s var(--ease);
}
/* Para una tarjeta que ocupa la fila entera (hoy, la quinta). */
.service.full{grid-column:1/-1}
.service::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--brand);
  transition:height .55s var(--ease);
}
.service:hover{background:var(--surface)}
.service:hover::before{height:100%}
.service .idx{font-family:var(--serif);font-size:1.1rem;color:var(--brand);letter-spacing:.1em}
.service h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.2rem);margin:18px 0 16px;letter-spacing:-.01em}
.service p{color:var(--text-2);font-size:.98rem;max-width:44ch}
.service ul{list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.service li{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:6px 12px}

/* ---------- Obras ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:70px}
.obra{position:relative;overflow:hidden;background:var(--surface)}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s var(--ease);filter:saturate(.8)}
.obra:hover img{transform:scale(1.07);filter:saturate(1)}
.obra::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(13,13,14,.9));
  opacity:.75;transition:opacity .6s var(--ease);
}
.obra:hover::after{opacity:.95}
.obra .meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;transform:translateY(10px);opacity:.92;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.obra:hover .meta{transform:translateY(0);opacity:1}
.obra .meta h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.01em}
.obra .meta .sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin-top:8px}
/* Tag de categoría: dice de un vistazo que no todo son casas. */
.obra .tag-cat{
  position:absolute;top:0;left:0;z-index:3;
  background:rgba(13,13,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;transition:background .5s var(--ease),color .5s var(--ease);
}
.obra:hover .tag-cat{background:var(--brand);color:#0D0D0E;border-color:var(--brand)}
.obra .tag-cat.pend{color:var(--brand);border-style:dashed}
.obra:hover .tag-cat.pend{background:rgba(13,13,14,.72);color:var(--brand)}

/* Contador de fotos: sólo aparece si la obra tiene más de una. */
.obra .shots{
  position:absolute;top:0;right:0;z-index:3;display:none;align-items:center;gap:7px;
  background:rgba(13,13,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--muted);font-size:11px;letter-spacing:.12em;padding:9px 13px;
  transition:color .5s var(--ease);
}
.obra.tiene-ficha .shots{display:flex}
.obra.tiene-ficha{cursor:pointer}
.obra:hover .shots{color:var(--brand)}
.obra .shots svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}

/* Franja a todo el ancho, para una obra que merece abrir la galería. */
.obra.wide{grid-column:span 6;aspect-ratio:21/9}
/* Si el archivo de la foto todavía no existe, en vez de un ícono roto
   se muestra un recuadro punteado avisando que falta. */
.obra.sin-foto{background:var(--bg-2);border:1px dashed rgba(211,120,46,.45)}
.obra.sin-foto img{display:none}
.obra.sin-foto::before{
  content:"Falta la foto de esta obra";
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  color:var(--brand);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:20px;
}
.obra.big{grid-column:span 4;aspect-ratio:16/10}
.obra.small{grid-column:span 2;aspect-ratio:4/5}
.obra.half{grid-column:span 3;aspect-ratio:3/2}
.obra.third{grid-column:span 2;aspect-ratio:1/1}

/* ---------- SKH Brokers ---------- */
.brokers{border-top:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.brokers-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center}
.brokers-mark{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:clamp(40px,6vw,70px);border:1px solid var(--line);background:var(--bg);
}
.brokers-mark img{height:clamp(90px,11vw,140px);width:auto;opacity:.92}
.brokers-mark .wordmark{
  border-left:0;padding-left:0;align-items:center;text-align:center;
  border-top:1px solid var(--line);padding-top:20px;
}
.brokers-mark .wordmark b{font-size:19px}
.brokers-mark .wordmark span{font-size:11px;margin-top:9px}
@media (max-width:1000px){
  .brokers-inner{grid-template-columns:1fr}
  .brokers-mark{order:-1}
}

/* ---------- Ficha de obra ----------
   Mismo esqueleto que la ficha de propiedad de Brokers, para que las
   dos páginas se sientan el mismo sistema. Pero acá el contenido no es
   una planilla de venta: es una historia. Por eso el texto pesa más
   que los números y la tabla técnica va arriba, corta y al costado. */
.obf{
  position:fixed;inset:0;z-index:300;display:none;overflow-y:auto;
  background:rgba(8,8,9,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s var(--ease);
}
.obf.on{display:block}
.obf.vis{opacity:1}
.obf-caja{
  max-width:1180px;margin:0 auto;min-height:100%;
  display:grid;grid-template-columns:1.2fr .8fr;
  background:var(--bg);border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.obf-x{
  position:fixed;top:22px;right:26px;z-index:5;width:44px;height:44px;
  background:rgba(13,13,14,.85);border:1px solid var(--line);color:var(--text);
  cursor:pointer;font-size:22px;line-height:1;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;transition:.35s var(--ease);
}
.obf-x:hover{border-color:var(--brand);color:var(--brand)}

.obf-fotos{background:var(--bg-2)}
.obf-principal{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.obf-principal img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03)}
.obf-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  background:rgba(13,13,14,.62);border:1px solid var(--line);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.35s var(--ease);
}
.obf-nav:hover{background:var(--brand);border-color:var(--brand);color:#0D0D0E}
.obf-nav.prev{left:16px}
.obf-nav.next{right:16px}
.obf-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.obf-contador{
  position:absolute;bottom:0;right:0;z-index:2;font-size:11px;letter-spacing:.14em;
  color:var(--muted);background:rgba(13,13,14,.8);padding:8px 13px;border-left:1px solid var(--line);
}
.obf-tiras{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:6px}
.obf-tiras button{
  aspect-ratio:4/3;padding:0;border:1px solid transparent;background:none;cursor:pointer;
  opacity:.45;transition:.35s var(--ease);overflow:hidden;
}
.obf-tiras button img{width:100%;height:100%;object-fit:cover}
.obf-tiras button.on{opacity:1;border-color:var(--brand)}
.obf-tiras button:hover{opacity:.85}

.obf-datos{padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column}
.obf-tag{
  align-self:flex-start;border:1px solid var(--line);color:var(--text);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;
}
.obf-datos h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);
  line-height:1.1;letter-spacing:-.015em;margin-top:18px;
}
.obf-zona{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}

/* El hito: la historia que vende sola. Va destacado y arriba de todo. */
.obf-hito{
  margin-top:24px;padding:18px 20px;border-left:2px solid var(--brand);
  background:rgba(211,120,46,.07);color:var(--text);
  font-family:var(--serif);font-size:1.16rem;line-height:1.45;
}

.obf-tabla{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:26px}
.obf-tabla div{background:var(--bg);padding:14px 16px}
.obf-tabla dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.obf-tabla dd{font-family:var(--serif);font-size:1.2rem;margin-top:7px}

.obf-bloque{margin-top:28px}
.obf-bloque h3{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
}
.obf-bloque p{color:var(--text-2);font-size:1rem;line-height:1.75;margin-top:12px}

.obf-cta{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:12px}
.obf-cta .btn{justify-content:center}
.obf-aviso{font-size:11.5px;color:var(--muted);line-height:1.6}

@media (max-width:1000px){ .obf-caja{grid-template-columns:1fr} }
@media (max-width:760px){
  .obf-x{top:12px;right:14px}
  .obf-nav{width:38px;height:38px}
  .obf-nav.prev{left:8px}
  .obf-nav.next{right:8px}
  .obf-tabla{grid-template-columns:1fr}
}

/* ---------- Visor de fotos ---------- */
.viewer{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(8,8,9,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .4s var(--ease);
}
.viewer.on{display:block}
.viewer.vis{opacity:1}
.viewer-top{
  position:absolute;top:0;left:0;width:100%;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;
}
.viewer-title{font-family:var(--serif);font-size:1.5rem;line-height:1.2}
.viewer-title small{
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-top:7px;
}
.viewer-count{font-size:11px;letter-spacing:.2em;color:var(--muted);flex-shrink:0}
.viewer-x{
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;font-family:var(--sans);transition:.35s var(--ease);
}
.viewer-x:hover{border-color:var(--brand);color:var(--brand)}
.viewer-stage{
  position:absolute;inset:96px 26px 92px;display:flex;align-items:center;justify-content:center;
}
.viewer-stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  opacity:0;transition:opacity .35s var(--ease);
}
.viewer-stage img.vis{opacity:1}
.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;background:rgba(13,13,14,.6);border:1px solid var(--line);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);
}
.viewer-nav:hover{background:var(--brand);border-color:var(--brand);color:#0D0D0E}
.viewer-nav.prev{left:26px}
.viewer-nav.next{right:26px}
.viewer-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.viewer-thumbs{
  position:absolute;bottom:0;left:0;width:100%;z-index:2;
  display:flex;gap:9px;padding:20px 26px;overflow-x:auto;justify-content:center;
}
.viewer-thumbs button{
  flex:0 0 auto;width:62px;height:44px;padding:0;border:1px solid var(--line);
  background:none;cursor:pointer;opacity:.4;transition:.35s var(--ease);
}
.viewer-thumbs button img{width:100%;height:100%;object-fit:cover}
.viewer-thumbs button:hover{opacity:.8}
.viewer-thumbs button.on{opacity:1;border-color:var(--brand)}
body.no-scroll{overflow:hidden}

@media (max-width:760px){
  .viewer-stage{inset:88px 12px 84px}
  .viewer-nav{width:42px;height:42px}
  .viewer-nav.prev{left:8px}
  .viewer-nav.next{right:8px}
  .viewer-title{font-size:1.2rem}
  .viewer-thumbs{justify-content:flex-start}
}

/* ---------- Reseñas ---------- */
.resenas{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* ---------- Reseñas: carrusel ----------
   Se ven 3 a la vez y el resto se alcanza deslizando. Es scroll nativo
   con scroll-snap, no una librería: anda con el dedo en el celular, con
   el trackpad, con las flechas del teclado y con los botones de al lado.
   Agregar la reseña número 4 no pide tocar nada: entra en la fila y las
   flechas se encienden solas. */
.reviews-wrap{margin-top:70px}
.reviews{
  display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews::-webkit-scrollbar{display:none}
/* El cursor de mano sólo donde hay mouse: en táctil no existe y además
   el arrastre por JS está desactivado ahí. */
@media (pointer:fine){ .reviews{cursor:grab} }
.reviews:focus-visible{outline:1px solid var(--brand);outline-offset:3px}
/* Los 2px que se descuentan son los dos separadores de 1px entre las
   tres tarjetas visibles. Sin eso la tercera queda cortada. */
.reviews>.review{flex:0 0 calc((100% - 2px)/3);scroll-snap-align:start}

/* Flechas. Se ocultan solas cuando no hay nada para deslizar: el JS les
   pone .off. En pantalla táctil sobran, pero no molestan. */
.reviews-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.reviews-nav.off{display:none}
.rev-arrow{
  width:46px;height:46px;border:1px solid var(--line);background:transparent;
  color:var(--text);cursor:pointer;display:grid;place-items:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.rev-arrow:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.rev-arrow:disabled{opacity:.28;cursor:default}
.rev-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.review{
  background:var(--bg);padding:clamp(34px,4.2vw,54px);display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:background .5s var(--ease);
}
.review::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--brand);
  transition:height .55s var(--ease);
}
.review:hover{background:var(--surface)}
.review:hover::before{height:100%}
.review .mark{font-family:var(--serif);font-size:3.4rem;line-height:.55;color:var(--brand);opacity:.55}
.review .text{font-family:var(--serif);font-size:1.32rem;line-height:1.45;margin-top:26px;flex:1}
.review .who{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.review .who .name{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.review .who .where{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* Link a la reseña original en Google: es lo que la hace verificable. */
.review .who .where a{color:var(--muted);border-bottom:1px solid rgba(211,120,46,.45);transition:color .3s var(--ease)}
.review .who .where a:hover{color:var(--brand)}
.reviews-note{
  margin-top:34px;font-size:12.5px;color:var(--muted);line-height:1.7;
  border-left:2px solid var(--brand);padding-left:18px;max-width:70ch;
}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);margin-top:64px}
.info-row{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.info-row .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);width:110px;flex-shrink:0;padding-top:5px}
.info-row .v{font-family:var(--serif);font-size:1.45rem;line-height:1.3;letter-spacing:-.01em}
.info-row .v a{transition:color .3s var(--ease)}
.info-row .v a:hover{color:var(--brand)}
.info-row .v small{display:block;font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-top:6px;letter-spacing:0}

form{display:flex;flex-direction:column;gap:0}
.field{position:relative;border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.field:focus-within{border-color:var(--brand)}
.field label{
  position:absolute;left:0;top:22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;transition:.35s var(--ease);
}
.field input,.field textarea{
  width:100%;background:transparent;border:0;outline:0;color:var(--text);
  font-family:var(--sans);font-size:1rem;font-weight:300;padding:34px 0 14px;resize:none;
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:6px;font-size:11px;color:var(--brand)}

/* El <select> siempre muestra un valor, así que la etiqueta va fija
   arriba en vez de flotar como en los inputs. */
.field-select label{top:6px;font-size:11px;color:var(--brand)}
.field-select select{
  width:100%;background:transparent;border:0;outline:0;color:var(--text);
  font-family:var(--sans);font-size:1rem;font-weight:300;padding:34px 22px 14px 0;
  appearance:none;-webkit-appearance:none;cursor:pointer;color-scheme:dark;
}
.field-select select:invalid{color:var(--muted)}
.field-select select option{background:var(--surface);color:var(--text)}
.field-select::after{
  content:"";position:absolute;right:5px;bottom:23px;pointer-events:none;
  width:7px;height:7px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:rotate(45deg);transition:border-color .35s var(--ease);
}
.field-select:focus-within::after{border-color:var(--brand)}
form .btn{margin-top:34px;align-self:flex-start;justify-content:center}
.form-note{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.6}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--bg)}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.foot .brand img{height:64px}
.socials{display:flex;gap:12px}
.socials a{
  width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:.4s var(--ease);
}
.socials a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:currentColor}
.copy{font-size:12px;color:var(--muted);letter-spacing:.04em;width:100%;padding-top:30px;margin-top:30px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ---------- Placeholder visible ---------- */
.ph{color:var(--brand);background:rgba(211,120,46,.1);border:1px dashed rgba(211,120,46,.45);padding:0 6px;font-family:var(--sans);font-size:.82em;letter-spacing:.04em;white-space:nowrap}
.ph-block{
  display:block;color:var(--brand);background:rgba(211,120,46,.07);
  border:1px dashed rgba(211,120,46,.4);padding:14px 16px;
  font-family:var(--sans);font-size:.78rem;line-height:1.6;letter-spacing:.03em;font-style:normal;
}

/* ---------- Animaciones de scroll ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.94);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal-s.in{opacity:1;transform:none}
.mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.25s var(--ease)}
.mask.in{clip-path:inset(0 0 0 0)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr)}
  /* Dos por pantalla en tablet, una en celular: con tres tarjetas de
     1/3 el texto de la reseña queda en una columna ilegible. */
  .reviews>.review{flex:0 0 calc((100% - 1px)/2)}
  .contact-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  .obra.big,.obra.small,.obra.half,.obra.third,.obra.wide{grid-column:span 1;aspect-ratio:4/3}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  nav{
    position:fixed;inset:0;background:rgba(13,13,14,.97);backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;
    justify-content:center;
    justify-content:safe center;   /* si no entra, no recorta arriba */
    gap:clamp(16px,3vh,30px);
    padding:100px 20px 44px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .55s var(--ease);
  }
  nav.open{transform:none}
  nav a{font-size:15px;letter-spacing:.2em}
  nav a.solo-movil{display:block}
  nav .btn{margin-top:14px}
  .burger{display:flex;z-index:120}
  .burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .brand img{height:48px}
  header.stuck .brand img{height:40px}
  .metrics-grid{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}
  .team{grid-template-columns:1fr}
  .reviews>.review{flex:0 0 100%}
  .gallery{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .scroll-hint{display:none}
  .info-row{flex-direction:column;gap:8px}
  .info-row .k{width:auto}
  /* En táctil el pin molesta: el hero vuelve a una pantalla.
     Alto automático con mínimo de una pantalla, así el contenido nunca
     queda recortado arriba si los dos botones apilados lo hacen crecer. */
  .hero{height:auto}
  /* El base usa align-items:flex-end para apoyar el texto abajo. Ese
     patrón, cuando el contenido crece, lo empuja hacia ARRIBA y termina
     metiéndose debajo del header fijo — se comía el "Más de 30 años".
     Acá se reemplaza por columna + margin-top:auto en el contenido:
     si sobra espacio el texto baja igual, y si no sobra arranca justo
     debajo del padding, sin poder invadir nunca la zona del header. */
  .hero-sticky{
    position:relative;height:auto;min-height:100svh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:100px 0 clamp(44px,7vh,72px);
  }
  .hero-copy{margin-top:auto}
  .hero-credit{display:none}
  .hero h1{font-size:clamp(2.3rem,8.6vw,3.4rem);margin-top:20px;max-width:none}
  .hero p{margin-top:18px;font-size:1rem}
  .hero-cta{margin-top:28px;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1;transform:none}
  .mask{clip-path:none}
  .hero{height:100svh}
  .hero-sticky{position:relative}
}