/* ===========================================================
   VITES & LEÓN ABOGADOS — sistema de diseño
   Paleta: negro + dorado + azul acero
   Tipografía: Playfair Display (display) + Inter (texto)
   =========================================================== */

:root{
  --black-950:#050506;
  --black-900:#0a0b0d;
  --black-850:#101215;
  --black-800:#16191e;
  --line-dark: rgba(201,162,39,0.16);

  --blue-700:#12274a;
  --blue-600:#1c3d6e;
  --blue-500:#2f6fbf;
  --blue-400:#5b93d6;

  --gold-600:#9c7a1c;
  --gold-500:#c9a227;
  --gold-400:#e0bb52;
  --gold-300:#ecd48a;

  --ivory-50:#f6f4ef;
  --ivory-100:#ece7db;
  --ink-900:#15161a;
  --slate-300:#c7cfda;
  --slate-400:#98a3b3;
  --slate-500:#6f7a8a;
  --white:#ffffff;

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --edge: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory-50);
  color:var(--ink-900);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 14px;
  color:var(--ink-900);
}
p{ margin:0 0 16px; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark p{ color:var(--white); }

.eyebrow{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-600);
  letter-spacing:0.02em;
  margin:0 0 8px;
  font-size:1.05rem;
}
.section--dark .eyebrow{ color:var(--gold-400); }
.rule{ width:64px; height:2px; background:var(--gold-500); margin:18px 0 28px; }

.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--dark{ background:var(--black-900); color:var(--slate-300); }
.section--navy{ background:var(--blue-700); color:var(--slate-300); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:2px; font-family:var(--font-body);
  font-weight:600; font-size:0.95rem; letter-spacing:0.02em;
  border:1px solid transparent; cursor:pointer; transition:all 0.2s ease;
}
.btn-gold{ background:var(--gold-500); color:var(--black-950); }
.btn-gold:hover{ background:var(--gold-400); transform:translateY(-1px); }
.btn-outline{ border-color:var(--gold-500); color:var(--gold-400); }
.btn-outline:hover{ border-color:var(--gold-400); color:var(--gold-300); background:rgba(201,162,39,0.08); }
.btn-outline-dark{ border-color:var(--black-800); color:var(--ink-900); }
.btn-outline-dark:hover{ border-color:var(--gold-600); color:var(--gold-600); }
.btn-blue{ background:var(--blue-500); color:var(--white); }
.btn-blue:hover{ background:var(--blue-400); }

/* ---------- topbar / nav ---------- */
.topbar{
  background:var(--black-950); color:var(--slate-400); font-size:0.85rem;
  padding:9px 0; border-bottom:1px solid var(--line-dark);
}
.topbar .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.topbar a{ color:var(--slate-300); }
.topbar a:hover{ color:var(--gold-400); }

.nav{
  background:var(--black-900); position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line-dark);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__brand img{ height:52px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{ color:var(--slate-300); font-size:0.95rem; font-weight:500; position:relative; padding:4px 0; }
.nav__links a:hover{ color:var(--gold-400); }
.nav__links a.active{ color:var(--gold-400); }
.nav__cta{ display:flex; align-items:center; gap:18px; }
.nav__toggle{ display:none; background:none; border:none; color:var(--gold-400); font-size:1.6rem; cursor:pointer; }

@media (max-width:900px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0; background:var(--black-900);
    flex-direction:column; align-items:flex-start; padding:22px var(--edge); gap:18px;
    border-bottom:1px solid var(--line-dark); display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__toggle{ display:block; }
  .nav__cta .btn{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--black-950);
}
.hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0.42; filter:grayscale(15%);
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,6,0.55) 0%, rgba(5,5,6,0.75) 55%, rgba(5,5,6,0.96) 100%);
}
.hero__grid{
  position:absolute; inset:0; opacity:0.25; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,162,39,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,0.14) 1px, transparent 1px);
  background-size:64px 64px;
}
.hero__content{ position:relative; z-index:2; padding:100px 0 72px; max-width:760px; }
.hero__content h1{ color:var(--white); font-size:clamp(2.4rem, 5vw, 3.6rem); }
.hero__content p{ color:var(--slate-300); font-size:1.12rem; max-width:56ch; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  background:var(--black-950); padding:44px 0;
}
.stats div{ text-align:center; }
.stats strong{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--gold-400); }
.stats span{ font-size:0.82rem; letter-spacing:0.06em; color:var(--slate-400); text-transform:uppercase; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; row-gap:28px; } }

/* ---------- split / frame ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split img{ width:100%; height:auto; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:36px; } }
.frame{ position:relative; padding:14px; }
.frame::before{
  content:''; position:absolute; inset:0; border:1px solid var(--gold-500); transform:translate(12px,12px);
  z-index:0;
}
.frame img{ position:relative; z-index:1; }

/* ---------- áreas de práctica ---------- */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .areas{ grid-template-columns:1fr; } }
.area-card{
  background:var(--black-900); border:1px solid var(--line-dark); padding:36px 30px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.area-card:hover{ transform:translateY(-4px); border-color:var(--gold-500); }
.area-card__icon{ width:46px; height:46px; margin-bottom:20px; color:var(--gold-400); }
.area-card h3{ color:var(--white); font-size:1.4rem; margin-bottom:10px; }
.area-card p{ color:var(--slate-400); font-size:0.96rem; margin-bottom:18px; }
.area-card a{ color:var(--gold-400); font-size:0.9rem; font-weight:600; }
.area-card a:hover{ color:var(--gold-300); }

/* ---------- valores / lista con check ---------- */
.check-list{ display:grid; gap:16px; }
.check-list li{ display:flex; gap:14px; align-items:flex-start; }
.check-list li svg{ flex:none; width:22px; height:22px; color:var(--gold-500); margin-top:2px; }

/* ---------- cta whatsapp ---------- */
.cta-wa{
  background:linear-gradient(120deg, var(--blue-700), var(--black-950));
  padding:64px 0; text-align:center;
}
.cta-wa h2{ color:var(--white); }
.cta-wa p{ color:var(--slate-300); max-width:52ch; margin-left:auto; margin-right:auto; }

/* ---------- footer ---------- */
.footer{ background:var(--black-950); color:var(--slate-400); padding:64px 0 28px; border-top:1px solid var(--line-dark); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
@media (max-width:800px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
.footer__brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer__brand img{ height:44px; }
.footer h5{ color:var(--white); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; }
.footer ul li{ margin-bottom:10px; }
.footer a:hover{ color:var(--gold-400); }
.footer__bottom{ border-top:1px solid var(--line-dark); padding-top:24px; font-size:0.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; transition-delay:var(--reveal-delay, 0s); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- página interior: encabezado ---------- */
.page-hero{
  background:var(--black-950); padding:120px 0 64px; text-align:center; position:relative; overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; inset:0; opacity:0.18; pointer-events:none;
  background-image:linear-gradient(rgba(201,162,39,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,39,0.14) 1px, transparent 1px);
  background-size:60px 60px;
}
.page-hero h1{ color:var(--white); position:relative; z-index:1; }
.page-hero p{ color:var(--slate-300); max-width:60ch; margin:0 auto; position:relative; z-index:1; }

/* ---------- servicios detallados ---------- */
.service-block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:64px 0; border-bottom:1px solid var(--ivory-100); }
.service-block:nth-child(even) .service-block__text{ order:2; }
@media (max-width:860px){ .service-block{ grid-template-columns:1fr; } .service-block:nth-child(even) .service-block__text{ order:0; } }
.service-block__icon{ width:56px; height:56px; color:var(--gold-600); margin-bottom:18px; }

/* ---------- modal de acceso ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,5,6,0.75); z-index:210;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--ivory-50); max-width:420px; width:100%; padding:34px 30px; position:relative;
  border-top:3px solid var(--gold-500);
}
.modal h3{ margin-bottom:6px; }
.modal p.hint{ color:var(--slate-500); font-size:0.88rem; margin-bottom:20px; }
.modal__close{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.3rem; cursor:pointer; color:var(--slate-500); }
.modal input, .modal textarea, .modal select{
  width:100%; padding:11px 13px; border:1px solid #d8cfa9; margin-bottom:14px; font-family:var(--font-body);
}
.btn-block{ width:100%; justify-content:center; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  background:var(--black-950); color:var(--gold-300); border:1px solid var(--gold-600);
  padding:12px 22px; border-radius:6px; font-size:0.9rem; opacity:0; pointer-events:none;
  transition:all 0.25s ease; z-index:200;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- admin: edición de textos ---------- */
body.admin-mode [data-edit]{ outline:1px dashed var(--gold-500); outline-offset:3px; cursor:text; }
body.admin-mode [data-edit]:hover{ background:rgba(201,162,39,0.07); }
body.admin-mode [data-edit]:focus{ outline:2px solid var(--gold-500); background:rgba(201,162,39,0.1); }

.admin-toggle{
  position:fixed; left:18px; bottom:18px; z-index:90;
  background:transparent; border:1px solid var(--gold-600); color:var(--gold-500);
  padding:9px 16px; border-radius:20px; font-size:0.78rem; opacity:0.55; cursor:pointer;
}
.admin-toggle:hover{ opacity:1; }
body.admin-mode .admin-toggle{ opacity:1; background:var(--gold-500); color:var(--black-950); border-color:var(--gold-500); }

.admin-bar{
  display:none; position:fixed; left:18px; bottom:118px; z-index:90;
  background:var(--black-950); border:1px solid var(--gold-600); color:var(--gold-300);
  padding:10px 16px; border-radius:8px; font-size:0.8rem; max-width:240px;
}
body.admin-mode .admin-bar{ display:block; }

.save-content-btn{
  position:fixed; left:18px; bottom:70px; z-index:85;
  display:none; align-items:center; gap:8px;
}
body.admin-mode .save-content-btn{ display:inline-flex; }

.bgedit-btn{
  display:none; position:absolute; top:16px; right:16px; z-index:6;
  background:var(--black-950); color:var(--gold-400); border:1px solid var(--gold-600);
  font-size:0.78rem; letter-spacing:0.03em; padding:9px 16px; border-radius:20px; cursor:pointer;
}
.bgedit-btn:hover{ background:var(--gold-500); color:var(--black-950); border-color:var(--gold-500); }
.bgedit-btn:disabled{ opacity:0.6; cursor:wait; }
body.admin-mode .bgedit-btn{ display:inline-flex; align-items:center; }
.bgedit-btn--inline{ position:static; margin-left:10px; padding:6px 12px; font-size:0.7rem; }
.bgedit-input{ display:none; }

/* utilitarios */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }