/* ---------- Tokens ---------- */
:root{
  --bg: #14110C;
  --bg-panel: #1E1A12;
  --bg-panel-2: #201B13;
  --yellow: #F5C518;
  --yellow-dim: #C9A100;
  --text: #F3EFE4;
  --muted: #B4AA95;
  --line: #2C271C;
  --radius: 4px;
  --maxw: 1140px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 600;
}
p{ margin: 0 0 1em; color: var(--muted); }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 3px; }

section{ position: relative; padding: 5rem 1.5rem; max-width: var(--maxw); margin: 0 auto; }
section > h2{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.section-lede{ max-width: 46ch; margin-top: -0.5rem; margin-bottom: 2.5rem; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: 1rem 1.5rem;
  background: rgba(20,17,12,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; color:var(--yellow); }
.logo-img{ height: 34px; width: auto; }
.main-nav{ display:none; gap:1.5rem; }
.main-nav a{ color: var(--text); font-size:0.95rem; }
.main-nav a:hover{ color: var(--yellow); }
.btn-wsp{
  display:none;
  background: var(--yellow); color:#14110C; font-weight:600;
  padding:0.6rem 1.1rem; border-radius: var(--radius); font-size:0.9rem;
  white-space:nowrap;
}
.btn-wsp:hover{ background: var(--yellow-dim); }
.nav-toggle{
  background:none; border:1px solid var(--line); border-radius: var(--radius);
  width:40px; height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.nav-toggle span{ width:18px; height:2px; background: var(--text); }

@media (min-width: 860px){
  .main-nav{ display:flex; }
  .btn-wsp{ display:inline-block; }
  .nav-toggle{ display:none; }
}

/* mobile dropdown */
.main-nav.open{
  display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0;
  background: var(--bg-panel); padding:1rem 1.5rem; border-bottom:1px solid var(--line);
}

/* ---------- Current line motif ---------- */
.current-line{
  position:absolute; top: 420px; right: 6%; width: 60px; height: calc(100% - 420px);
  z-index:0; pointer-events:none; display:none;
}
.current-line path{
  fill:none; stroke: var(--yellow); stroke-width: 1.5; opacity:0.35;
  stroke-dasharray: 6 10; stroke-linecap: round;
}
@media (min-width: 860px){ .current-line{ display:block; } }

/* ---------- Hero ---------- */
.hero{ padding-top: 4.5rem; padding-bottom: 4rem; position:relative; z-index:1; }
.hero-copy{ max-width: 640px; }
.hero-kicker{ color: var(--yellow); font-size:0.95rem; margin-bottom:0.75rem; }
.hero h1{ font-size: clamp(2rem, 5.4vw, 3.4rem); color: var(--text); }
.hero-lede{ font-size:1.05rem; max-width: 52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin: 1.75rem 0; }
.btn-primary{
  background: var(--yellow); color:#14110C; font-weight:600;
  padding:0.85rem 1.6rem; border-radius: var(--radius);
}
.btn-primary:hover{ background: var(--yellow-dim); }
.btn-primary--lg{ font-size:1.05rem; padding:1rem 2rem; display:inline-block; }
.btn-ghost{
  border:1px solid var(--line); padding:0.85rem 1.6rem; border-radius: var(--radius); color:var(--text);
}
.btn-ghost:hover{ border-color: var(--yellow); color: var(--yellow); }
.hero-badges{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.hero-badges span{
  border:1px solid var(--line); border-left: 3px solid var(--yellow);
  padding:0.4rem 0.8rem; font-size:0.85rem; color: var(--muted); border-radius: 2px;
}

/* ---------- Nosotros ---------- */
.about{ padding-top: 3rem; padding-bottom: 3rem; z-index:1; }
.about-grid{ display:grid; gap:1.5rem; }
@media (min-width: 720px){ .about-grid{ grid-template-columns: 1fr 1fr; } }
.about-item{
  border-left: 3px solid var(--yellow); padding: 0.25rem 0 0.25rem 1.25rem;
}
.about-item h3{ color: var(--text); font-size:1.1rem; }
.about-item p{ margin:0; }

/* ---------- Servicios ---------- */
.services{ z-index:1; }
.services-grid{ display:grid; gap:1.5rem; margin-top:2.5rem; }
.service-card{
  background: var(--bg-panel); border:1px solid var(--line); border-left: 3px solid var(--yellow);
  padding:1.75rem; border-radius: var(--radius);
}
.service-card h3{ color:var(--text); font-size:1.2rem; }
.service-card p{ margin:0; }
@media (min-width: 720px){
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .service-card--offset{ transform: translateY(1.75rem); }
}

/* ---------- Proyectos ---------- */
.projects{ z-index:1; }
.projects-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }
@media (min-width: 720px){ .projects-grid{ grid-template-columns: repeat(3,1fr); } }
.project-item{ margin:0; }
.project-img{
  aspect-ratio: 4/3; border-radius: var(--radius); border:1px solid var(--line);
  width:100%; object-fit: cover; display:block;
}
.project-item figcaption{ margin-top:0.5rem; font-size:0.85rem; color: var(--muted); }

/* ---------- Reseñas ---------- */
.reviews{ z-index:1; }
.reviews-track{ display:grid; gap:1.25rem; margin-top:2rem; }
@media (min-width: 720px){ .reviews-track{ grid-template-columns: repeat(3,1fr); } }
.review-card{
  background: var(--bg-panel); border:1px solid var(--line); padding:1.5rem; border-radius: var(--radius);
}
.review-card p{ color: var(--text); font-size:0.98rem; }
.review-name{ color: var(--yellow); font-size:0.85rem; margin:0; }

/* ---------- Contacto ---------- */
.contact{ text-align:center; z-index:1; }
.contact .section-lede{ margin-left:auto; margin-right:auto; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding: 3rem 1.5rem 2rem; }
.footer-main{
  max-width: var(--maxw); margin:0 auto; display:grid; gap:2rem;
}
@media (min-width: 720px){ .footer-main{ grid-template-columns: repeat(3,1fr); } }
.footer-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; color: var(--yellow); margin-bottom:0.4rem; }
.footer-contact p{ margin:0 0 0.3rem; font-size:0.9rem; }
.footer-social{ display:flex; gap:1rem; align-self:start; }
.footer-social a:hover{ color: var(--yellow); }
.footer-legal{ text-align:center; font-size:0.8rem; color: var(--muted); margin: 2rem 0 0; }

/* ---------- Floating WhatsApp ---------- */
.wsp-float{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:50;
  background: var(--yellow); color:#14110C; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.wsp-float:hover{ background: var(--yellow-dim); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}