/* =========================================================
   Shimon Pérez Silva — Abogado laboralista
   Paleta: azul noche + negro, acento oro, grises con sesgo azul
   ========================================================= */

:root{
  /* Fondos oscuros */
  --ink:        #080C14;
  --navy-900:   #0C1526;
  --navy-800:   #12203A;
  --navy-700:   #1B2E4E;

  /* Fondos claros */
  --paper:      #F4F6FA;
  --paper-2:    #E8EDF5;

  /* Texto */
  --on-dark:    #EDF1F8;
  --on-dark-mu: #9AA7BF;
  --on-light:   #0C1526;
  --on-light-mu:#55627A;

  /* Acento */
  --gold:       #E9B949;
  --gold-deep:  #C79427;
  --gold-glow:  rgba(233,185,73,.14);

  /* Bordes */
  --line-dark:  rgba(237,241,248,.13);
  --line-light: rgba(12,21,38,.12);

  /* Tipografía */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Medidas */
  --wrap: 1140px;
  --pad: clamp(20px, 5vw, 40px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--on-light);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0; line-height:1.15; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:12px 18px;
  font-weight:600; text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.eyebrow--dark{ color:var(--gold-deep); }

.ico{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(8,12,20,.86);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line-dark);
  color:var(--on-dark);
}
.topbar__in{ display:flex; align-items:center; gap:24px; height:66px; }

.brand{ text-decoration:none; display:flex; flex-direction:column; line-height:1.2; margin-right:auto; }
.brand__name{ font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--on-dark); }
.brand__role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); }

.nav{ display:none; gap:26px; }
.nav a{
  text-decoration:none; font-size:.9rem; color:var(--on-dark-mu);
  padding-block:6px; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--on-dark); border-bottom-color:var(--gold); }

.topbar__tel{
  display:none; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.86rem; letter-spacing:.02em;
  text-decoration:none; color:var(--ink); background:var(--gold);
  padding:9px 15px; border-radius:2px; font-weight:500;
  transition:background .18s;
}
.topbar__tel:hover{ background:#F2C558; }

@media (min-width:900px){
  .nav{ display:flex; }
  .topbar__tel{ display:inline-flex; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 15% 0%, var(--navy-800) 0%, var(--navy-900) 55%, var(--ink) 100%);
  color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
}
.hero__in{
  display:grid; gap:44px;
  padding-block:clamp(48px,8vw,86px) clamp(48px,8vw,80px);
}
.hero h1{
  font-size:clamp(2.15rem,5.4vw,3.5rem);
  letter-spacing:-.015em;
  margin-bottom:22px;
  color:#fff;
}
.lead{
  font-size:clamp(1.05rem,2.1vw,1.22rem);
  color:var(--on-dark-mu);
  max-width:56ch;
  margin-bottom:32px;
}
.lead strong{ color:var(--on-dark); font-weight:600; }

.creds{
  display:flex; flex-direction:column; gap:9px;
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line-dark);
  font-size:.86rem; color:var(--on-dark-mu);
}
.creds li{ display:flex; gap:11px; align-items:baseline; }
.creds li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:.5em;
  background:var(--gold); transform:rotate(45deg);
}

/* Móvil: chapa de identidad compacta arriba de todo */
.hero__photo{
  order:-1; margin:0;
  display:flex; align-items:center; gap:15px;
  padding-bottom:26px; border-bottom:1px solid var(--line-dark);
}
.hero__photo img{
  width:78px; height:78px; flex:none;
  border-radius:50%; object-fit:cover;
  border:2px solid rgba(233,185,73,.5);
}
.hero__photo figcaption{
  display:flex; flex-direction:column;
  font-family:var(--serif); font-size:1.02rem; color:var(--on-dark);
}
.hero__photo figcaption span{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-dark-mu); margin-top:3px;
}

/* Escritorio: retrato grande a la derecha */
@media (min-width:900px){
  .hero__in{ grid-template-columns:1.25fr .85fr; align-items:center; gap:64px; }
  .hero__photo{
    order:0; position:relative; max-width:420px;
    display:block; padding-bottom:0; border-bottom:0;
  }
  .hero__photo img{
    width:100%; height:auto; aspect-ratio:760/1091;
    border-radius:3px; border:0;
    filter:grayscale(.18) contrast(1.04);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  .hero__photo figcaption{
    margin-top:16px; padding-left:14px;
    border-left:2px solid var(--gold);
    font-size:1rem;
  }
  .hero__photo figcaption span{ font-size:.68rem; letter-spacing:.09em; margin-top:4px; }
}

/* ---------- Botones ---------- */
.cta{ display:flex; flex-wrap:wrap; gap:13px; }
.cta--center{ justify-content:center; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:2px;
  font-size:.96rem; font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:#F2C558; }
.btn--line{ border-color:rgba(233,185,73,.45); color:var(--gold); background:transparent; }
.btn--line:hover{ border-color:var(--gold); background:var(--gold-glow); }

/* ---------- Dos caminos ---------- */
.paths{ background:var(--paper); }
.paths__in{ display:grid; gap:1px; padding-block:0; background:transparent; }
.path{
  padding:clamp(34px,5vw,52px) 0;
  border-bottom:1px solid var(--line-light);
}
.path:last-child{ border-bottom:0; }
.path__tag{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px;
}
.path h2{
  font-size:clamp(1.35rem,3vw,1.75rem);
  margin-bottom:14px; max-width:22ch;
}
.path p{ color:var(--on-light-mu); max-width:56ch; margin-bottom:18px; }

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; text-decoration:none;
  color:var(--on-light); border-bottom:2px solid var(--gold);
  padding-bottom:3px; transition:gap .18s, color .18s;
}
.link:hover{ gap:13px; color:var(--gold-deep); }

@media (min-width:860px){
  .paths__in{ grid-template-columns:1fr 1fr; gap:0 56px; }
  .path{ border-bottom:0; }
  .path + .path{ border-left:1px solid var(--line-light); padding-left:56px; }
}

/* ---------- Encabezado de sección ---------- */
.shead{ margin-bottom:clamp(30px,4vw,46px); }
.shead__title{
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  letter-spacing:-.01em; color:var(--on-light);
}
.shead__title--light{ color:#fff; }

/* ---------- Áreas ---------- */
.areas{ background:var(--paper-2); padding-block:clamp(56px,8vw,92px); }
.areas__block + .areas__block{ margin-top:clamp(40px,5vw,58px); }
.areas__label{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-light); padding-bottom:12px; margin-bottom:22px;
  border-bottom:2px solid var(--gold);
  display:inline-block;
}
.grid{ display:grid; gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.grid li{ background:var(--paper); padding:24px; }
.grid h4{ font-size:1.05rem; margin-bottom:8px; }
.grid p{ font-size:.9rem; color:var(--on-light-mu); }

@media (min-width:640px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Perfil ---------- */
.profile{
  background:var(--navy-900); color:var(--on-dark);
  padding-block:clamp(56px,8vw,92px);
}
.profile__in{ display:grid; gap:44px; }
.profile h2{
  font-size:clamp(1.7rem,3.6vw,2.4rem); color:#fff; margin-bottom:20px;
}
.profile__copy p{ color:var(--on-dark-mu); max-width:58ch; }
.profile__copy p + p{ margin-top:16px; }

.facts{ display:flex; flex-direction:column; }
.facts > div{
  display:grid; grid-template-columns:minmax(90px,110px) 1fr; gap:18px;
  padding:16px 0; border-top:1px solid var(--line-dark);
}
.facts > div:last-child{ border-bottom:1px solid var(--line-dark); }
.facts dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); padding-top:4px;
}
.facts dd{ margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--on-dark); }
.facts dd span{
  display:block; font-family:var(--sans); font-size:.82rem; color:var(--on-dark-mu); margin-top:2px;
}

@media (min-width:900px){
  .profile__in{ grid-template-columns:1.15fr .85fr; gap:70px; align-items:start; }
}

/* ---------- Proceso ---------- */
.process{ background:var(--paper); padding-block:clamp(56px,8vw,92px); }
.steps{ display:grid; gap:28px; counter-reset:s; }
.steps li{
  padding-top:22px; border-top:2px solid var(--line-light);
  position:relative;
}
.steps__n{
  display:block; font-family:var(--mono); font-size:.8rem; font-weight:500;
  color:var(--gold-deep); letter-spacing:.1em; margin-bottom:12px;
}
.steps h3{ font-size:1.2rem; margin-bottom:9px; }
.steps p{ font-size:.94rem; color:var(--on-light-mu); }

@media (min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); gap:38px; } }

/* ---------- Preguntas ---------- */
.faq{ background:var(--ink); color:var(--on-dark); padding-block:clamp(56px,8vw,92px); }
.faq__in{ max-width:820px; }

.acc__item{
  border-top:1px solid var(--line-dark);
}
.acc__item:last-child{ border-bottom:1px solid var(--line-dark); }
.acc__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.02rem,2.2vw,1.15rem); font-weight:600;
  color:var(--on-dark); transition:color .18s;
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary:hover{ color:var(--gold); }
.acc__item summary i{
  flex:none; width:16px; height:16px; position:relative;
}
.acc__item summary i::before,
.acc__item summary i::after{
  content:""; position:absolute; background:var(--gold);
  top:50%; left:0; width:100%; height:2px; margin-top:-1px;
  transition:transform .22s ease;
}
.acc__item summary i::after{ transform:rotate(90deg); }
.acc__item[open] summary i::after{ transform:rotate(0deg); }
.acc__body{ padding:0 0 22px; }
.acc__body p{ color:var(--on-dark-mu); font-size:.96rem; max-width:62ch; }

/* ---------- CTA final ---------- */
.final{
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:var(--on-dark);
  padding-block:clamp(56px,8vw,90px);
  text-align:center;
  border-top:1px solid var(--line-dark);
}
.final__in{ max-width:680px; }
.final h2{ font-size:clamp(1.8rem,4vw,2.6rem); color:#fff; margin-bottom:14px; }
.final__lead{ color:var(--on-dark-mu); margin-bottom:30px; }

/* ---------- Pie ---------- */
.foot{ background:var(--ink); color:var(--on-dark-mu); padding-block:44px 34px; }
.foot__in{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center;
  padding-bottom:26px; border-bottom:1px solid var(--line-dark);
}
.foot__name{ font-family:var(--serif); font-size:1.1rem; color:var(--on-dark); }
.foot__sub{ font-size:.84rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:22px; font-size:.9rem; }
.foot__links a{ text-decoration:none; border-bottom:1px solid transparent; transition:color .18s, border-color .18s; }
.foot__links a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

.foot__legal{ margin-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.foot__legal p{ font-size:.76rem; line-height:1.6; max-width:66ch; color:#6E7B94; }
.foot__copy{ font-family:var(--mono); }

/* ---------- Barra fija móvil ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-dark);
  border-top:1px solid var(--line-dark);
  transform:translateY(105%);
  transition:transform .28s ease;
}
.dock.is-on{ transform:translateY(0); }
.dock__btn{
  display:flex; align-items:center; justify-content:center;
  padding:16px 10px; text-decoration:none;
  background:var(--navy-800); color:var(--on-dark);
  font-weight:600; font-size:.95rem;
}
.dock__btn--gold{ background:var(--gold); color:var(--ink); }

@media (min-width:900px){ .dock{ display:none; } }
body{ padding-bottom:0; }
@media (max-width:899px){ body{ padding-bottom:58px; } }

/* ---------- Aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}