/* ===== Estudio Lati · estilos ===== */
:root{
  --lime:#b0b454;        /* Pantone 15-0538 Green Oasis */
  --bg:#53565a;          /* Pantone Cool Gray 11 C (gris oscuro, reemplaza el negro) */
  --bg2:#494c50;         /* superficie un poco más oscura */
  --bg3:#3e4044;         /* tarjetas */
  --txt:#d7d2cb;         /* Pantone Warm Gray 1 C (gris claro, letras) */
  --mut:#c4c0b9;         /* texto secundario */
  --line:#666a6f;        /* bordes */
  --ink:#23252a;         /* tono muy oscuro para texto sobre el verde */
}
*{ box-sizing:border-box; margin:0; padding:0; min-width:0; }
html,body{ overflow-x:hidden; max-width:100%; }
html{ scroll-behavior:smooth; }
body{ font-family:'Nunito',system-ui,sans-serif; color:var(--txt); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Nunito',sans-serif; font-weight:800; letter-spacing:-.5px; line-height:1.1; overflow-wrap:break-word; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(30px,8vw,40px); }
.lime{ color:var(--lime); }

.btn{ display:inline-block; padding:14px 26px; border-radius:7px; font-weight:800; font-size:14px;
  text-decoration:none; cursor:pointer; border:none; font-family:inherit; transition:.16s; }
.btn-lime{ background:var(--lime); color:var(--ink); }
.btn-lime:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-ghost{ border:1.5px solid var(--mut); color:var(--txt); background:transparent; }
.btn-ghost:hover{ border-color:var(--lime); color:var(--lime); }

/* NAV */
nav{ position:sticky; top:0; z-index:50; background:rgba(62,64,68,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo{ font-size:28px; font-weight:900; letter-spacing:-1.5px; text-decoration:none; color:var(--txt); }
.logo b{ color:var(--lime); }
.nav-links{ display:flex; gap:30px; list-style:none; font-size:14px; font-weight:600; }
.nav-links a{ color:var(--mut); text-decoration:none; transition:.16s; }
.nav-links a:hover{ color:var(--txt); }
.nav-cta{ font-size:13px; padding:11px 20px; }
.nav-toggle{ display:none; background:none; border:none; color:var(--txt); font-size:26px; cursor:pointer; }
.nav-mobile{ list-style:none; border-top:1px solid var(--line); background:var(--bg); }
.nav-mobile li{ border-bottom:1px solid var(--line); }
.nav-mobile a{ display:block; padding:15px 28px; color:var(--txt); text-decoration:none; font-weight:600; }

/* HERO */
.hero{ position:relative; min-height:clamp(520px,88vh,640px); display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:-20px; background-image:url('/assets/banner.jpg');
  background-size:cover; background-position:center 40%; filter:blur(2px) brightness(.45); transform:scale(1.06); }
.hero-bg::after{ content:''; position:absolute; inset:0; background:rgba(25,26,29,.5); }
.hero-in{ position:relative; padding-top:60px; padding-bottom:60px; width:100%; }
.eyebrow{ font-size:clamp(11px,2.8vw,12px); letter-spacing:3px; text-transform:uppercase; color:var(--lime); font-weight:800; }
.brand-hero{ font-size:clamp(52px,15vw,74px); font-weight:900; letter-spacing:-2px; margin:14px 0 2px; line-height:.9; color:#fff; }
.hero-sub{ font-size:clamp(19px,5vw,24px); color:#eceae5; margin-bottom:20px; font-weight:600; }
.lead{ font-size:clamp(15px,4vw,16px); color:#e2dfd9; max-width:460px; margin-bottom:30px; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* VALORES */
.valores{ background:var(--lime); color:var(--ink); padding:44px 0; }
.valores-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.valor .n{ font-size:13px; font-weight:900; letter-spacing:2px; opacity:.5; }
.valor h2{ font-size:18px; margin:4px 0 5px; letter-spacing:-.3px; }
.valor p{ font-size:13px; color:#2c2e31; font-weight:600; }

/* SECCIONES */
section.blk{ padding-top:80px; padding-bottom:80px; }
.blk.alt{ background:var(--bg2); }
.head{ max-width:580px; margin-bottom:44px; }
.head .label{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--lime); font-weight:800; }
.head h2{ font-size:clamp(28px,6.5vw,40px); margin:10px 0; color:#fff; }
.head p{ color:var(--mut); }

/* SERVICIOS */
.serv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.serv{ background:var(--bg3); border:1px solid var(--line); border-radius:12px; padding:26px; transition:.18s; }
.serv:hover{ border-color:var(--lime); transform:translateY(-3px); }
.serv .ic{ width:44px; height:44px; border-radius:10px; background:var(--lime); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; margin-bottom:14px; }
.serv h3{ font-size:18px; margin-bottom:6px; color:#fff; }
.serv p{ font-size:13.5px; color:var(--mut); }

/* PROYECTOS */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.proj{ aspect-ratio:4/3; border-radius:12px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.proj .ov{ position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(0,0,0,.8)); display:flex; align-items:flex-end; padding:16px; }
.proj .ov span{ color:#fff; font-weight:700; font-size:14px; }
.proj.soon{ background:var(--bg3); display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--line); }
.proj.soon span{ color:#8b8e93; font-size:13px; font-weight:700; }

/* PROCESO */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.paso .num{ font-size:42px; font-weight:900; color:var(--lime); }
.paso h3{ font-size:17px; margin:6px 0; color:#fff; }
.paso p{ font-size:13px; color:var(--mut); }

/* EL ESTUDIO */
.sobre{ display:grid; grid-template-columns:.8fr 1.2fr; gap:46px; align-items:center; }
.sobre-img{ height:400px; border-radius:14px; background-image:url('/assets/eliana.jpg');
  background-size:cover; background-position:60% 25%; border:1px solid var(--line); }
.sobre h2{ font-size:36px; color:#fff; }
.sobre p{ color:#e2dfd9; margin-bottom:14px; font-size:15px; }

/* CONTACTO */
.contacto{ background:#393b3f; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:42px; }
.form-grid h2{ font-size:38px; margin-bottom:12px; color:#fff; }
.form-grid .sub{ color:var(--mut); margin-bottom:24px; }
.finfo{ font-size:14.5px; color:var(--txt); margin:11px 0; }
.finfo a{ color:var(--lime); text-decoration:none; }
.finfo b{ color:var(--lime); }
.field{ margin-bottom:14px; }
.field input,.field select,.field textarea{ width:100%; padding:13px; border-radius:8px;
  border:1px solid var(--line); background:#2f3134; color:var(--txt); font-family:inherit; font-size:14px; }
.field input::placeholder,.field textarea::placeholder{ color:#9b978f; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--lime); }
.field textarea{ resize:vertical; }
.form-card{ background:var(--bg2); padding:28px; border-radius:14px; border:1px solid var(--line); }

/* FOOTER */
footer{ background:#313337; color:#a7a39c; padding:34px 0; font-size:13px; text-align:center; }
footer .logo{ font-size:22px; display:inline-block; margin-bottom:8px; }
footer p{ color:#a7a39c; }

/* ===== RESPONSIVE ===== */
@media(max-width:880px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

@media(max-width:780px){
  section.blk{ padding-top:56px; padding-bottom:56px; }
  .valores{ padding:34px 0; }
  .valores-grid{ grid-template-columns:1fr 1fr; gap:24px 20px; }
  .serv-grid{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr 1fr; }
  .pasos{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .sobre{ grid-template-columns:1fr; gap:28px; }
  .sobre-img{ height:240px; }
  .form-grid{ grid-template-columns:1fr; gap:30px; }
  .form-grid h2,.sobre h2{ font-size:clamp(28px,7vw,36px); }
  .head{ margin-bottom:32px; }
  .cta-row .btn{ flex:1 1 auto; text-align:center; }
}

@media(max-width:430px){
  .valores-grid{ grid-template-columns:1fr; gap:18px; }
  .pasos{ gap:28px 16px; }
  .serv{ padding:22px; }
  .form-card{ padding:22px; }
  .cta-row{ flex-direction:column; }
  .cta-row .btn{ width:100%; }
}