:root{ --ink:#111; --muted:rgba(17,17,17,.45); --faint:rgba(17,17,17,.3); --line:rgba(17,17,17,.08); --pad:24px; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'Jost', -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ color:#fff; background:#111; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; }
}
:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:30; background:#fff;
  padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  border:1px solid var(--line);
}
.wordmark{ font-size:clamp(22px,3vw,32px); font-weight:500; letter-spacing:-.03em; }
.site-nav{ display:flex; align-items:center; gap:28px; margin-left:auto; margin-right:28px; }
.site-nav a{
  font-size:11px; text-transform:lowercase; letter-spacing:.14em; font-weight:300;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{ border-color:currentColor; }
.contact-toggle{ font-size:26px; line-height:1; }
.contact-toggle:hover{ opacity:.6; }

@media (max-width:640px){
  .site-nav{ display:none; }
}

/* ---------- panel de contacto ---------- */
.contact-panel{
  position:fixed; inset:0; z-index:50; background:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.contact-panel.is-open{ opacity:1; visibility:visible; }
.contact-panel-close{ position:absolute; top:18px; right:var(--pad); font-size:26px; }
.contact-panel-close:hover{ opacity:.6; }
.contact-panel-inner{ text-align:center; padding:0 24px; }
.contact-panel-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 30px; }
.contact-panel ul{ list-style:none; margin:0; padding:0; }
.contact-panel li{ margin:18px 0; }
.contact-panel li a{ font-size:14px; letter-spacing:.06em; font-weight:300; }
.contact-panel li a:hover{ text-decoration:underline; text-underline-offset:.15em; }
.contact-panel-nav{ display:none; }

@media (max-width:640px){
  .contact-panel-nav{ display:block; margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
  .contact-panel-nav a{ display:block; font-size:13px; letter-spacing:.1em; margin:10px 0; }
}

/* ---------- carrusel (detalle de proyecto) ---------- */
.carrusel{ position:relative; width:100%; height:100%; overflow:hidden; background:#eee; }
.carrusel-slide{ position:absolute; inset:0; opacity:0; transition:opacity .35s; }
.carrusel-slide.is-activo{ opacity:1; }
.carrusel-slide img{ width:100%; height:100%; object-fit:cover; }
.carrusel--plano{ background:#fff; }
.carrusel--plano .carrusel-slide img{ object-fit:contain; }
.carrusel-prev, .carrusel-next{
  position:absolute; top:0; bottom:0; width:15%; z-index:2;
  display:flex; align-items:center; font-size:22px; color:#fff; opacity:0; transition:opacity .2s;
}
.carrusel:hover .carrusel-prev, .carrusel:hover .carrusel-next{ opacity:.85; }
.carrusel-prev{ left:0; justify-content:flex-start; padding-left:14px; }
.carrusel-next{ right:0; justify-content:flex-end; padding-right:14px; }
.carrusel-contador{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-size:11px; letter-spacing:.1em; color:var(--muted);
}

/* ---------- footer ---------- */
footer{ padding:60px var(--pad) 40px; text-align:center; }
.footer-icons{ display:flex; justify-content:center; gap:20px; margin-bottom:22px; }
.footer-icons a:hover{ opacity:.6; }
footer p{ margin:0; font-size:10px; letter-spacing:.06em; color:var(--muted); }