/* ==========================================================================
   dariolezcano.com — sistema de componentes
   Paleta oro. Space Grotesk en todo. Mobile-first.
   ========================================================================== */

@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/SpaceGrotesk-var.woff2') format('woff2-variations'),
      url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

:root{
  --bg:#0a0a0d;
  --bg-elev:#131318;
  --oro:#C8A880;
  --oro-claro:#E8CFA0;
  --oro-oscuro:#8A6A44;
  --petroleo:#285060;
  --petroleo-claro:#4D8399;
  --texto:#fff;
  --texto-mute:rgba(255,255,255,.62);
  --texto-suave:rgba(255,255,255,.78);
  --borde:rgba(200,168,128,.18);
  --borde-fuerte:rgba(200,168,128,.38);
  --r-card:12px;
  --r-pill:999px;
  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--texto);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-weight:500;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:3px}
.salto{position:absolute;left:-9999px}
.salto:focus{left:12px;top:12px;z-index:200;background:var(--oro);color:#0a0a0d;padding:10px 18px;border-radius:var(--r-pill)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- tipografía ---------- */
.kicker{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--oro);
}
.h1{font-size:clamp(2.15rem,6vw,4.1rem);font-weight:700;letter-spacing:-.032em;line-height:1.03}
.h2{font-size:clamp(1.65rem,4vw,2.65rem);font-weight:700;letter-spacing:-.022em;line-height:1.08}
.h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--texto-suave);line-height:1.55}
.dato{font-size:.875rem;color:var(--texto-mute)}
.num{font-variant-numeric:tabular-nums}

/* ---------- barra de sección (guiño BEMCONNECT) ---------- */
.rule{height:2px;border:0;margin:0;background:linear-gradient(90deg,var(--oro) 0%,rgba(200,168,128,.35) 42%,rgba(200,168,128,0) 100%)}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(10,10,13,.86);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--borde);
}
.nav-in{
  display:flex;align-items:center;gap:16px;height:var(--nav-h);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.nav-logo{flex:0 0 auto}
.nav-logo img{height:34px;width:auto}
.nav-menu{display:none}
.nav-der{margin-left:auto;display:flex;align-items:center;gap:10px}

.nav-burger{
  margin-left:auto;width:42px;height:42px;display:grid;place-items:center;
  background:none;border:1px solid var(--borde);border-radius:var(--r-pill);cursor:pointer;color:var(--oro);
}
.nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
.nav-burger span::before{top:-5px}
.nav-burger span::after{top:5px}

/* panel mobile */
.nav-panel{
  display:none;border-top:1px solid var(--borde);background:var(--bg);
  padding:14px var(--gut) 26px;
}
.nav[data-abierto="true"] .nav-panel{display:block}
.nav-panel li + li{border-top:1px solid rgba(255,255,255,.055)}
.nav-panel a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 2px;font-size:1.02rem}
.nav-panel a span{font-size:.75rem;color:var(--texto-mute);letter-spacing:.06em}
.nav-panel a:hover,.nav-panel a:focus-visible{color:var(--oro)}
.nav-panel .btn{margin-top:18px;width:100%}

@media (min-width:1080px){
  .nav-burger,.nav-panel{display:none!important}
  .nav-menu{display:flex;align-items:center;gap:26px;margin-left:34px}
  .nav-menu > li > a,.drop-btn{font-size:.9rem;color:var(--texto-mute);transition:color .18s}
  .nav-menu > li > a:hover,.drop-btn:hover{color:var(--oro)}
  .drop{position:relative}
  .drop-btn{background:none;border:0;padding:0;font:inherit;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .drop-menu{
    position:absolute;top:calc(100% + 20px);left:-14px;min-width:246px;
    background:var(--bg-elev);border:1px solid var(--borde);border-radius:var(--r-card);
    padding:8px;box-shadow:0 22px 50px rgba(0,0,0,.65);display:none;
  }
  .drop[data-abierto="true"] .drop-menu{display:block}
  .drop-menu a{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:8px;font-size:.9rem}
  .drop-menu a span{color:var(--texto-mute);font-size:.75rem}
  .drop-menu a:hover{background:rgba(200,168,128,.08);color:var(--oro)}
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:.9375rem;font-weight:700;letter-spacing:.005em;
  padding:13px 25px;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .14s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 19px;font-size:.875rem}
.btn-oro{background:var(--oro);color:#0a0a0d;border-color:var(--oro)}
.btn-oro:hover{background:var(--oro-claro);border-color:var(--oro-claro)}
.btn-linea{background:rgba(10,10,13,.5);color:var(--oro);border-color:var(--borde-fuerte)}
.btn-linea:hover{border-color:var(--oro);background:rgba(200,168,128,.1)}
.btn-row{display:flex;flex-wrap:wrap;gap:11px}

/* ==========================================================================
   HERO — índice del holding
   ========================================================================== */
.hero{padding:clamp(52px,9vw,104px) 0 clamp(34px,5vw,58px)}
.hero .kicker{display:block;margin-bottom:20px}
.hero .h1{max-width:19ch;margin-bottom:22px}
.hero .lead{max-width:52ch}

.indice{margin-top:clamp(38px,5vw,58px);border-top:1px solid var(--borde)}
.indice-t{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--oro-oscuro);padding:16px 0 4px;
}
.indice-l{display:grid;grid-template-columns:1fr}
@media (min-width:760px){.indice-l{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,58px)}}
.indice-l a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 2px;border-top:1px solid rgba(255,255,255,.055);transition:color .18s;
}
.indice-l a:hover,.indice-l a:focus-visible{color:var(--oro)}
.indice-n{font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.indice-m{font-size:.75rem;color:var(--texto-mute);letter-spacing:.06em;white-space:nowrap;flex:0 0 auto}

/* ==========================================================================
   BLOQUE DE LÍNEA (modelo Tesla)
   ========================================================================== */
.lineas{display:grid;gap:clamp(16px,2.4vw,26px);padding:clamp(30px,5vw,54px) 0 clamp(46px,7vw,86px)}

.linea{
  position:relative;border:1px solid var(--borde);border-radius:var(--r-card);
  background:var(--bg-elev);overflow:hidden;
}
.linea-media{position:relative;isolation:isolate}
.linea-media > picture,.linea-media > picture img{display:block;width:100%}
.linea-media img{aspect-ratio:4/5;object-fit:cover;width:100%;height:100%}
@media (min-width:700px){.linea-media img{aspect-ratio:16/9}}

.linea-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,10,13,.97) 0%, rgba(10,10,13,.9) 26%,
    rgba(10,10,13,.6) 52%, rgba(10,10,13,.14) 78%, rgba(10,10,13,.05) 100%);
}
.linea-txt{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:clamp(22px,3.4vw,42px);
}
.linea-txt .kicker{display:block;margin-bottom:11px}
.linea-txt .h2{margin-bottom:10px;max-width:22ch}
.linea-txt .lead{max-width:44ch;margin-bottom:14px}
.linea-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:.8125rem;color:var(--texto-mute);margin-bottom:20px;
}
.linea-meta b{color:var(--oro);font-weight:700}
.linea-meta i{font-style:normal;color:var(--oro-oscuro)}

/* tira de otras unidades — deja claro que la foto es UNA de varias */
.linea-strip{
  display:flex;align-items:center;gap:14px;
  padding:14px clamp(18px,3vw,32px);border-top:1px solid var(--borde);
  background:rgba(255,255,255,.018);
}
.linea-strip-t{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--oro);
  flex:0 0 auto;max-width:8.5em;line-height:1.4;font-weight:700;
}
.linea-strip-l{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.linea-strip-l::-webkit-scrollbar{display:none}
.linea-strip-l img{
  width:74px;height:47px;object-fit:cover;border-radius:6px;
  border:1px solid var(--borde);flex:0 0 auto;opacity:.82;transition:opacity .18s;
}
.linea-strip-l img:hover{opacity:1}

/* variante sin foto: bloque tipográfico (jurídico) */
.linea--texto{padding:clamp(30px,5vw,58px) clamp(22px,3.4vw,42px)}
.linea--texto .kicker{display:block;margin-bottom:13px}
.linea--texto .h2{margin-bottom:12px;max-width:24ch}
.linea--texto .lead{max-width:52ch;margin-bottom:24px}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.areas li{
  font-size:.8125rem;padding:7px 14px;border:1px solid var(--borde);
  border-radius:var(--r-pill);color:var(--texto-suave);
}

/* variante pendiente de foto */
.linea--pendiente .linea-media{background:#0e0e13}
.pend{
  aspect-ratio:4/5;display:grid;place-content:center;gap:9px;text-align:center;
  padding:34px 24px;
  background:
    repeating-linear-gradient(135deg,rgba(200,168,128,.045) 0 12px,transparent 12px 24px);
}
@media (min-width:700px){.pend{aspect-ratio:16/9}}
.pend-t{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--oro-oscuro);font-weight:700}
.pend-d{font-size:.875rem;color:var(--texto-mute);max-width:34ch;margin-inline:auto}
.linea--pendiente .linea-txt{position:static;padding:clamp(22px,3.4vw,42px);border-top:1px solid var(--borde)}
.linea--pendiente .linea-scrim{display:none}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{border-top:1px solid var(--borde);padding:clamp(46px,7vw,86px) 0}
.contacto .kicker{display:block;margin-bottom:16px}
.contacto .h2{margin-bottom:14px;max-width:20ch}
.contacto .lead{max-width:46ch;margin-bottom:26px}
.contacto-datos{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:26px}
.contacto-datos a{color:var(--oro)}
.contacto-datos a:hover{text-decoration:underline}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{border-top:1px solid var(--borde);padding:40px 0 52px}
.foot-in{display:grid;gap:28px}
@media (min-width:780px){.foot-in{grid-template-columns:1.1fr 1fr 1fr}}
.foot img{height:30px;width:auto;margin-bottom:14px}
.foot-t{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--oro);margin-bottom:12px;font-weight:700}
.foot li{margin-bottom:8px}
.foot a:hover{color:var(--oro)}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.055);font-size:.8125rem;color:var(--texto-mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
.pg-hero{padding:clamp(40px,6vw,78px) 0 clamp(26px,4vw,42px)}
.pg-hero .kicker{display:block;margin-bottom:18px}
.pg-hero .h1{max-width:20ch;margin-bottom:20px;font-size:clamp(1.95rem,5vw,3.5rem)}
.pg-hero .lead{max-width:58ch}
.volver{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--texto-mute);margin-bottom:24px}
.volver:hover{color:var(--oro)}

.sec-pg{padding:clamp(38px,5.5vw,72px) 0;border-top:1px solid var(--borde)}
.sec-pg > .wrap > .kicker{display:block;margin-bottom:14px}
.sec-pg .h2{margin-bottom:16px;max-width:26ch}
.sec-pg .lead{max-width:62ch}

/* aviso destacado (reglas de reserva) */
.aviso{
  border:1px solid var(--borde);border-left:2px solid var(--oro);
  border-radius:var(--r-card);background:var(--bg-elev);
  padding:clamp(22px,3vw,32px);margin-top:26px;
}
.aviso .kicker{display:block;margin-bottom:12px}
.aviso-l{display:grid;gap:14px;margin-top:16px}
@media (min-width:700px){.aviso-l{grid-template-columns:1fr 1fr}}
.aviso-l div{border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
.aviso-n{font-size:1.5rem;font-weight:700;color:var(--oro);letter-spacing:-.02em;display:block}
.aviso-d{font-size:.875rem;color:var(--texto-mute)}

/* grilla de unidades */
.unidades{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media (min-width:640px){.unidades{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.unidades{grid-template-columns:repeat(3,1fr)}}
.unidad{
  border:1px solid var(--borde);border-radius:var(--r-card);background:var(--bg-elev);
  overflow:hidden;display:flex;flex-direction:column;
}
.unidad-foto{aspect-ratio:16/10;background:#0f0f14;border-bottom:1px solid var(--borde)}
.unidad-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.unidad-b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.unidad-sub{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--oro);margin-bottom:7px;font-weight:700}
.unidad-n{font-size:1.28rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:3px}
.unidad-a{font-size:.875rem;color:var(--texto-mute);margin-bottom:15px}
.specs{display:grid;gap:6px;margin-bottom:20px}
.specs li{font-size:.875rem;color:var(--texto-suave);padding-left:15px;position:relative;line-height:1.45}
.specs li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--oro)}
.unidad-f{margin-top:auto}
.unidad-f .btn{width:100%}
.badge-clasico{
  display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--petroleo-claro);border:1px solid rgba(77,131,153,.4);border-radius:var(--r-pill);
  padding:3px 10px;margin-left:8px;vertical-align:middle;font-weight:700;
}

/* bloques de texto / listas de valor */
.cols{display:grid;gap:clamp(18px,2.6vw,28px);grid-template-columns:1fr;margin-top:28px}
@media (min-width:760px){.cols{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.cols--3{grid-template-columns:repeat(3,1fr)}}
.tarj{border:1px solid var(--borde);border-radius:var(--r-card);padding:24px 22px;background:var(--bg-elev)}
.tarj .h3{margin-bottom:9px}
.tarj p{font-size:.9375rem;color:var(--texto-mute);line-height:1.55}

/* tabla de especificaciones */
.tspec{width:100%;border-collapse:collapse;margin-top:26px;font-size:.9375rem}
.tspec th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--oro);
  font-weight:700;padding:0 16px 12px 0;border-bottom:1px solid var(--borde);white-space:nowrap;
}
.tspec td{padding:15px 16px 15px 0;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;color:var(--texto-suave)}
.tspec td:first-child{color:var(--texto);font-weight:700;width:34%;min-width:150px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* franja CTA de cierre */
.cierre{border-top:1px solid var(--borde);padding:clamp(42px,6vw,78px) 0}
.cierre .h2{margin-bottom:14px;max-width:22ch}
.cierre .lead{max-width:48ch;margin-bottom:24px}

.foot-social{display:flex;gap:14px;margin-top:14px}
.foot-social a{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--borde);
  border-radius:var(--r-pill);color:var(--oro);
}
.foot-social a:hover{border-color:var(--oro);background:rgba(200,168,128,.08)}

/* corte de línea controlado en el H1 de la home */
.h1 .bl{display:block}

/* tabla comparativa de 3 columnas */
.tspec--3 td:first-child{width:26%}
.tspec--3 td:nth-child(2),.tspec--3 td:nth-child(3){width:37%}
.tspec--3 th:nth-child(2),.tspec--3 th:nth-child(3){color:var(--oro)}
.tspec--3 td:nth-child(3){border-left:1px solid var(--borde);padding-left:16px}
.tspec--3 th:nth-child(3){border-left:1px solid var(--borde);padding-left:16px}
.tspec b{color:var(--oro);font-weight:700}

/* ==========================================================================
   BLOQUE DE PRODUCTO (foto recortada sobre el fondo, no full-bleed)
   ========================================================================== */
.linea--producto{background:var(--bg-elev)}
.linea--producto .linea-cuerpo{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,40px);align-items:center;
  padding:clamp(26px,3.4vw,44px);
}
@media (min-width:820px){.linea--producto .linea-cuerpo{grid-template-columns:1.05fr .95fr}}
.linea--producto .linea-txt{position:static;padding:0}
.producto-foto{
  position:relative;display:grid;place-items:center;min-height:230px;
  background:radial-gradient(ellipse at 50% 62%, rgba(200,168,128,.11), rgba(200,168,128,0) 66%);
}
.producto-foto img{max-height:min(46vh,400px);width:auto;object-fit:contain}
@media (min-width:820px){.producto-foto{order:2}.linea--producto .linea-txt{order:1}}

/* grilla de chalecos */
.chalecos{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media (min-width:600px){.chalecos{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.chalecos{grid-template-columns:repeat(3,1fr)}}
.chaleco{
  border:1px solid var(--borde);border-radius:var(--r-card);background:var(--bg-elev);
  display:flex;flex-direction:column;overflow:hidden;
}
.chaleco-foto{
  display:grid;place-items:center;padding:22px 18px 6px;min-height:250px;
  background:radial-gradient(ellipse at 50% 60%, rgba(200,168,128,.09), rgba(200,168,128,0) 70%);
}
.chaleco-foto img{max-height:230px;width:auto;object-fit:contain}
.chaleco-b{padding:6px 20px 22px;display:flex;flex-direction:column;flex:1}
.chaleco-cod{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);
  font-weight:700;margin-bottom:6px;font-variant-numeric:tabular-nums;
}
.chaleco-n{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.22;margin-bottom:4px}
.chaleco-a{font-size:.875rem;color:var(--texto-mute);margin-bottom:14px;line-height:1.45}
.chaleco-f{margin-top:auto}
.chaleco-f .btn{width:100%}
.nota{
  border:1px solid var(--borde);border-left:2px solid var(--petroleo-claro);
  border-radius:var(--r-card);background:var(--bg-elev);padding:20px 22px;margin-top:28px;
}
.nota p{font-size:.9rem;color:var(--texto-mute);line-height:1.6;margin:0}
.nota strong{color:var(--texto-suave)}

/* ---------- botones de icono en el navbar ---------- */
.ico-btn{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--borde);border-radius:var(--r-pill);color:var(--oro);
  transition:border-color .18s,background .18s,color .18s;
}
.ico-btn:hover{border-color:var(--oro);background:rgba(200,168,128,.09)}
.ico-btn--oro{background:var(--oro);border-color:var(--oro);color:#0a0a0d}
.ico-btn--oro:hover{background:var(--oro-claro);border-color:var(--oro-claro);color:#0a0a0d}
.nav-der{gap:8px}
/* en pantallas chicas el WhatsApp va como icono para que entre todo */
.nav-wa-txt{display:none}
.nav-wa-ico{display:grid}
@media (min-width:560px){
  .nav-wa-txt{display:inline-flex}
  .nav-wa-ico{display:none}
}
@media (max-width:400px){.nav-logo img{height:30px;width:auto}}