/* ============================================
   VS LEGAL S.A.S — Hoja de estilos principal
   Editar aquí cambia TODO el sitio
   ============================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ===== MARCA (dorado exacto) ===== */
  --gold:#C9A227;
  --gold-light:#b8911f;      /* hover del dorado sobre fondo CLARO: más oscuro, no más brillante */
  --gold-dim:#C9A2270f;
  --gold-border:#C9A22740;

  /* ===== CUERPO CLARO (hero, secciones, servicios) ===== */
  --bg:#ffffff;              /* fondo principal del cuerpo */
  --bg-soft:#f8f8f6;         /* tarjetas y bloques suaves */
  --bg-alt:#f3f2ee;          /* secciones alternas / CTA */
  --line:#e9e7e1;            /* bordes claros */
  --line2:#ddd9cf;           /* bordes claros un poco más marcados */
  --tx:#1a1a1a;              /* texto principal oscuro */
  --tx-mid:#5c5c5c;          /* texto secundario */
  --tx-soft:#8a8578;         /* texto terciario / etiquetas */

  /* ===== CHROME OSCURO (topbar, navbar, footer) ===== */
  --dk-deep:#050505;
  --dk:#0e0e0e;
  --dk-card:#141414;
  --dk-line:#1f1f1f;
  --dk-line2:#2a2a2a;
  --dk-tx:#f5eed8;
  --dk-tx-mid:#9a8d75;
  --dk-tx-dim:#5a5040;
  --dk-tx-ghost:#3a3228;

  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Outfit',sans-serif;
  --max-width:1240px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-light)}
img{max-width:100%;display:block}

.container{max-width:var(--max-width);margin:0 auto;padding:0 2.5rem}

/* ---------- TOPBAR (oscuro) ---------- */
.topbar{background:var(--dk-deep);border-bottom:.5px solid var(--dk-line)}
.topbar-inner{max-width:var(--max-width);margin:0 auto;padding:0 2.5rem;height:40px;display:flex;align-items:center;justify-content:space-between}
.topbar-left{font-size:11px;color:var(--dk-tx-dim);letter-spacing:.5px}
.topbar-right{display:flex;align-items:center;gap:3px}
.t-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:2px;color:var(--dk-tx-dim);font-size:16px;transition:color .2s,background .2s}
.t-icon:hover{color:var(--gold);background:var(--dk-line)}
.t-crm{display:flex;align-items:center;gap:5px;padding:5px 13px;border:.5px solid var(--dk-line2);border-radius:2px;font-size:11px;color:var(--dk-tx-dim);letter-spacing:1px;text-transform:uppercase;margin-right:6px;transition:all .2s}
.t-crm:hover{border-color:var(--gold);color:var(--gold)}
.t-pse{display:flex;align-items:center;gap:5px;padding:5px 13px;background:#C9A22718;border:.5px solid var(--gold-border);border-radius:2px;font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;transition:all .2s}
.t-pse:hover{background:#C9A22728;color:#e8bc3a}

/* ---------- NAVBAR (oscuro) ---------- */
.nav{background:var(--dk);border-bottom:.5px solid var(--dk-line2);position:sticky;top:0;z-index:200}
.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 2.5rem;height:72px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{width:48px;height:48px;object-fit:contain;border-radius:50%}
.nav-logo-name{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--gold);letter-spacing:3px;line-height:1}
.nav-logo-sub{font-size:9px;color:var(--dk-tx-ghost);letter-spacing:2px;margin-top:3px}

.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links>a,.nav-drop-trigger{font-size:11px;color:var(--dk-tx-mid);letter-spacing:2px;text-transform:uppercase;transition:color .2s;cursor:pointer;background:none;border:none;font-family:var(--font-body);display:flex;align-items:center;gap:5px}
.nav-links>a:hover,.nav-drop-trigger:hover{color:var(--gold)}

/* Dropdown de servicios (oscuro) */
.nav-drop{position:relative}
.nav-drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-8px);background:var(--dk-card);border:.5px solid var(--dk-line2);border-radius:3px;min-width:280px;padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.nav-drop:hover .nav-drop-menu,.nav-drop-menu:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:flex;align-items:flex-start;gap:10px;padding:.75rem .85rem;border-radius:2px;transition:background .2s}
.nav-drop-menu a:hover{background:#1e1e1e}
.nav-drop-menu i{font-size:17px;color:var(--gold);margin-top:2px;flex-shrink:0}
.nav-drop-title{font-size:13px;color:var(--dk-tx);letter-spacing:.3px;font-weight:400}
.nav-drop-desc{font-size:11px;color:var(--dk-tx-dim);margin-top:2px;line-height:1.4}

.nav-cta{background:var(--gold);color:#0e0e0e;font-family:var(--font-body);font-size:11px;font-weight:500;padding:11px 24px;border-radius:2px;letter-spacing:1.5px;text-transform:uppercase;transition:background .2s;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:#e8bc3a;color:#0e0e0e}

.nav-toggle{display:none;background:none;border:none;color:var(--gold);font-size:24px;cursor:pointer}

/* ---------- BOTONES ---------- */
.btn-gold{background:var(--gold);color:#0e0e0e;font-family:var(--font-body);font-size:12px;font-weight:500;padding:15px 36px;border-radius:2px;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .15s}
.btn-gold:hover{background:var(--gold-light);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--gold);font-family:var(--font-body);font-size:12px;padding:15px 36px;border-radius:2px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--gold-border);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.btn-outline:hover{border-color:var(--gold);background:var(--gold-dim);transform:translateY(-1px)}

/* ---------- HERO (claro) ---------- */
.hero{padding:7rem 0 5.5rem;text-align:center;border-bottom:.5px solid var(--line);position:relative;overflow:hidden;background:var(--bg)}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:500px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border),transparent)}
.hero-eyebrow{font-size:11px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:2rem;opacity:0;animation:fadeUp .8s ease forwards .2s}
.hero-title{font-family:var(--font-display);font-size:60px;font-weight:400;line-height:1.15;margin-bottom:1.75rem;max-width:760px;margin-inline:auto;color:var(--tx);opacity:0;animation:fadeUp .8s ease forwards .4s}
.hero-title em{color:var(--gold);font-style:normal}
.hero-sub{font-size:15px;color:var(--tx-mid);line-height:1.85;max-width:520px;margin:0 auto 3rem;opacity:0;animation:fadeUp .8s ease forwards .6s}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease forwards .8s}
.hero-stats{display:flex;justify-content:center;gap:4rem;margin-top:5rem;padding-top:3rem;border-top:.5px solid var(--line);flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease forwards 1s}
.stat-num{font-family:var(--font-display);font-size:40px;font-weight:400;color:var(--gold);line-height:1}
.stat-label{font-size:10px;color:var(--tx-soft);letter-spacing:2px;margin-top:6px;text-transform:uppercase}

/* ---------- SECCIONES (claro) ---------- */
.section{padding:5.5rem 0;border-bottom:.5px solid var(--line);background:var(--bg)}
.s-eye{font-size:10px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:.75rem}
.s-title{font-family:var(--font-display);font-size:38px;font-weight:400;color:var(--tx);margin-bottom:.5rem}
.s-div{width:36px;height:1px;background:var(--gold);margin:.75rem 0 1.75rem}
.s-sub{font-size:13px;color:var(--tx-mid);margin-bottom:3rem;line-height:1.7;max-width:620px}

/* ---------- GRID DE SERVICIOS (claro) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-card{background:var(--bg-soft);padding:2.25rem 1.75rem;transition:background .2s,box-shadow .2s;display:flex;flex-direction:column}
.svc-card:hover{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.svc-card:hover .svc-icon{color:var(--gold-light)}
.svc-icon{font-size:28px;color:var(--gold);margin-bottom:1.25rem;transition:color .2s}
.svc-name{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--tx);margin-bottom:.6rem;line-height:1.25}
.svc-desc{font-size:12.5px;color:var(--tx-mid);line-height:1.75;flex-grow:1;margin-bottom:1.25rem}
.svc-link{font-size:11px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.svc-link i{font-size:14px;transition:transform .2s}
.svc-card:hover .svc-link i{transform:translateX(3px)}

/* ---------- POR QUÉ (claro) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}
.why-card{padding:1.75rem 1.5rem;border:.5px solid var(--line2);border-radius:2px;transition:border-color .2s,box-shadow .2s;background:var(--bg-soft)}
.why-card:hover{border-color:var(--gold-border);box-shadow:0 8px 30px rgba(0,0,0,.05)}
.why-num{font-family:var(--font-display);font-size:42px;font-weight:300;color:var(--gold);line-height:1}
.why-title{font-size:11px;font-weight:500;color:var(--tx);margin:.75rem 0 .4rem;letter-spacing:2px;text-transform:uppercase}
.why-text{font-size:12px;color:var(--tx-mid);line-height:1.7}

/* ---------- CTA (claro alterno) ---------- */
.cta-sec{background:var(--bg-alt);padding:6rem 0;text-align:center;border-bottom:.5px solid var(--line)}
.cta-title{font-family:var(--font-display);font-size:48px;font-weight:400;margin-bottom:.75rem;color:var(--tx)}
.cta-sub{font-size:14px;color:var(--tx-mid);margin-bottom:2.5rem;line-height:1.7}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- PÁGINA INTERIOR (servicios, claro) ---------- */
.page-hero{padding:5rem 0 4rem;border-bottom:.5px solid var(--line);position:relative;overflow:hidden;background:var(--bg-soft)}
.page-hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:400px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-border),transparent)}
.breadcrumb{font-size:11px;color:var(--tx-soft);letter-spacing:1px;margin-bottom:1.5rem;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--tx-mid)}
.breadcrumb a:hover{color:var(--gold)}
.page-icon{font-size:36px;color:var(--gold);margin-bottom:1.25rem;display:block}
.page-title{font-family:var(--font-display);font-size:52px;font-weight:400;line-height:1.15;margin-bottom:1.25rem;max-width:760px;color:var(--tx)}
.page-title em{color:var(--gold);font-style:normal}
.page-lead{font-size:16px;color:var(--tx-mid);line-height:1.85;max-width:640px;margin-bottom:2.5rem}

.prose{max-width:760px}
.prose h2{font-family:var(--font-display);font-size:30px;font-weight:400;color:var(--tx);margin:2.75rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--tx);margin:2rem 0 .5rem}
.prose p{font-size:14px;color:var(--tx-mid);line-height:1.9;margin-bottom:1.1rem}
.prose ul{list-style:none;margin:1rem 0 1.5rem}
.prose ul li{font-size:14px;color:var(--tx-mid);line-height:1.8;padding-left:1.5rem;position:relative;margin-bottom:.6rem}
.prose ul li::before{content:'';position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--gold)}
.prose strong{color:var(--tx);font-weight:600}

.callout{border-left:2px solid var(--gold);background:var(--bg-soft);padding:1.5rem 1.75rem;margin:2rem 0;border-radius:0 2px 2px 0}
.callout p{margin-bottom:0;color:var(--tx-mid);font-size:13.5px}
.callout strong{color:#8a6d10}

.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.25rem;margin:2rem 0}
.step{padding:1.5rem 1.25rem;border:.5px solid var(--line2);border-radius:2px;background:var(--bg-soft)}
.step-num{font-family:var(--font-display);font-size:30px;color:var(--gold);line-height:1;margin-bottom:.6rem}
.step-title{font-size:12px;color:var(--tx);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.4rem}
.step-text{font-size:12px;color:var(--tx-mid);line-height:1.7}

.faq-item{border-bottom:.5px solid var(--line2);padding:1.25rem 0}
.faq-q{font-size:14px;color:var(--tx);font-weight:500;margin-bottom:.5rem;display:flex;gap:10px;align-items:flex-start}
.faq-q i{color:var(--gold);font-size:16px;margin-top:1px;flex-shrink:0}
.faq-a{font-size:13.5px;color:var(--tx-mid);line-height:1.85;padding-left:26px}

/* ---------- FOOTER (oscuro) ---------- */
.footer{background:var(--dk-deep);padding:4.5rem 0 2rem}
.ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:.5px solid var(--dk-line)}
.ft-col-title{font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:1.25rem;display:flex;align-items:center;gap:6px}
.ft-links{list-style:none}
.ft-links li{margin-bottom:8px}
.ft-links a{font-size:12px;color:#7a7060;display:flex;align-items:center;gap:6px;line-height:1.45;transition:color .2s}
.ft-links a:hover{color:var(--gold)}
.ft-links i{font-size:12px;flex-shrink:0;opacity:.6}
.badge-new{font-size:9px;background:#C9A22718;color:var(--gold);padding:2px 6px;border-radius:2px;letter-spacing:1px;border:.5px solid var(--gold-border)}
.ft-brand-logo{width:52px;height:52px;object-fit:contain;border-radius:50%;margin-bottom:1rem}
.ft-brand-line{width:24px;height:1px;background:var(--gold);margin:12px 0}
.ft-brand-info{font-size:12px;color:#6a6050;line-height:2.2}
.ft-socials{display:flex;gap:12px;margin-top:1.75rem}
.ft-socials a{color:#5a5040;font-size:19px;transition:color .2s}
.ft-socials a:hover{color:var(--gold)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.ft-copy{font-size:11px;color:var(--dk-tx-ghost)}
.ft-bottom-links{display:flex;gap:1.5rem}
.ft-bottom-links a{font-size:11px;color:var(--dk-tx-ghost)}
.ft-bottom-links a:hover{color:var(--gold)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{position:fixed;bottom:24px;right:24px;width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:300;transition:transform .2s}
.wa-float:hover{transform:scale(1.08);color:#fff}

/* ---------- FORMULARIO (claro) ---------- */
input,select,textarea{width:100%;background:#fff;border:.5px solid var(--line2);color:var(--tx);font-family:var(--font-body);font-size:14px;padding:13px 16px;border-radius:2px;outline:none;transition:border-color .2s;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--tx-soft)}
select option{background:#fff;color:var(--tx)}
label{display:block;font-size:11px;color:var(--tx-mid);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.form-wrap{max-width:720px;margin:0 auto;padding:4rem 2.5rem}
.form-section{margin-bottom:2.5rem}
.form-section-title{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--tx);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:.5px solid var(--line2);display:flex;align-items:center;gap:10px}
.form-section-title i{font-size:18px;color:var(--gold)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field{margin-bottom:1rem}
.form-field.full{grid-column:1/-1}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1rem}
.opt{position:relative}
.opt input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.opt-label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:1rem .75rem;border:.5px solid var(--line2);border-radius:2px;cursor:pointer;transition:all .2s;text-align:center;background:#fff}
.opt-label i{font-size:20px;color:var(--tx-soft);transition:color .2s}
.opt-label span{font-size:11px;color:var(--tx-soft);letter-spacing:1px;text-transform:uppercase;transition:color .2s;line-height:1.3}
.opt input[type=radio]:checked+.opt-label{border-color:var(--gold);background:#C9A2270f}
.opt input[type=radio]:checked+.opt-label i,.opt input[type=radio]:checked+.opt-label span{color:#8a6d10}
.opt-label:hover{border-color:var(--gold-border)}
.hor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem}
.hor-label{display:flex;align-items:center;justify-content:center;padding:10px;border:.5px solid var(--line2);border-radius:2px;cursor:pointer;font-size:12px;color:var(--tx-soft);transition:all .2s;text-align:center;background:#fff}
.opt input[type=radio]:checked+.hor-label{border-color:var(--gold);background:#C9A2270f;color:#8a6d10}
.hor-label:hover{border-color:var(--gold-border);color:var(--gold)}
.btn-submit{width:100%;background:var(--gold);color:#1a1208;font-family:var(--font-body);font-size:13px;font-weight:600;padding:16px;border:none;border-radius:2px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .15s;margin-top:1.5rem}
.btn-submit:hover{background:var(--gold-light);color:#fff;transform:translateY(-1px)}
.success-msg{display:none;background:#C9A2270f;border:.5px solid var(--gold-border);border-radius:2px;padding:1.25rem 1.5rem;text-align:center;margin-top:1rem}
.success-msg p{font-size:14px;color:#8a6d10;line-height:1.7}
.success-msg strong{color:#6b5408}
.wa-alt{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:1.5rem;padding:1rem;border:.5px solid var(--line2);border-radius:2px;flex-wrap:wrap;background:var(--bg-soft)}
.wa-alt p{font-size:13px;color:var(--tx-mid)}
.wa-alt a{display:inline-flex;align-items:center;gap:5px;font-size:13px}

/* ---------- ANIMACIONES ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .nav-links{position:fixed;top:112px;left:0;right:0;background:var(--dk-card);border-bottom:.5px solid var(--dk-line2);flex-direction:column;align-items:stretch;gap:0;padding:1rem 0;display:none}
  .nav-links.open{display:flex}
  .nav-links>a,.nav-drop-trigger{padding:.9rem 2.5rem;width:100%;justify-content:flex-start}
  .nav-drop-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;min-width:0;padding:0 2.5rem 1rem;display:none}
  .nav-drop.open .nav-drop-menu{display:block}
  .nav-toggle{display:block}
  .nav-cta{display:none}
}
@media(max-width:768px){
  .container,.topbar-inner,.nav-inner{padding-inline:1.25rem}
  .topbar-left{display:none}
  .hero{padding:4rem 0 3.5rem}
  .hero-title{font-size:34px}
  .hero-stats{gap:2rem;margin-top:3rem}
  .stat-num{font-size:30px}
  .page-title{font-size:34px}
  .s-title,.cta-title{font-size:28px}
  .form-grid{grid-template-columns:1fr}
  .form-wrap{padding:2.5rem 1.25rem}
  .prose h2{font-size:24px}
}