/* Jiménez Trejo – Styles */
:root{
  --navy:#0C1E3A;
  --deep:#122545;
  --gold:#CFA045;
  --gold-200:#FFE2A8;
  --gold-700:#9F7A2B;
  --white:#FFFFFF;
  --smoke:#BFC6CF;
  --ink:#0B1222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--white);
  background:
    radial-gradient(1200px 900px at 80% -10%, rgba(207,160,69,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 10%, rgba(255,226,168,.12), transparent 60%),
    linear-gradient(180deg, #0C1E3A 0%, #0C1E3A 30%, #122545 100%);
  overflow-x:hidden;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; gap:.75rem;
  align-items:center; justify-content:center;
  padding:.5rem .75rem;
  background:linear-gradient(90deg, rgba(14,26,48,.92), rgba(18,37,69,.92));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(8px);
  flex-wrap:wrap;
}
.topbar a{display:flex; align-items:center; gap:.35rem; color:var(--smoke); text-decoration:none; font-size:.92rem}
.topbar a:hover{color:var(--white)}
.ico{width:16px; height:16px; display:inline-block}
.ico-wa{background: conic-gradient(from 0deg at 50% 50%, var(--gold-200), var(--gold)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 0 0-8.94 14.59L2 22l5.59-1.59A10 10 0 1 0 12 2Zm0 2a8 8 0 0 1 6.32 12.9l-.25.32-.21.18-3.64 1.04.99-3.42.1-.27.2-.25A6 6 0 1 0 12 4Z"/></svg>') center/contain no-repeat;}
.ico-mail{background: linear-gradient(180deg, var(--gold-200), var(--gold)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>') center/contain no-repeat;}
.ico-fb{background: linear-gradient(180deg, var(--gold-200), var(--gold)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M13 22V12h3l1-4h-4V6c0-1.1.9-2 2-2h2V0h-3a5 5 0 0 0-5 5v3H6v4h3v10h4Z"/></svg>') center/contain no-repeat;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem;
  background:rgba(12,30,58,.6);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:.75rem; align-items:center}
.brand img{width:56px; height:56px; border-radius:8px; object-fit:cover; box-shadow:0 0 0 1px rgba(207,160,69,.35), 0 6px 16px rgba(0,0,0,.35)}
.brand-text strong{font-family:"Cormorant Garamond", serif; font-weight:700; letter-spacing:.3px; font-size:1.05rem}
.brand-text span{display:block; font-size:.85rem; color:var(--smoke)}

.nav-toggle{display:none; width:40px; height:40px; background:transparent; border:0; position:relative}
.nav-toggle span, .nav-toggle:before, .nav-toggle:after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:var(--white); border-radius:2px; transition:.3s
}
.nav-toggle span{top:19px}
.nav-toggle:before{top:11px}
.nav-toggle:after{top:27px}
.nav-menu{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.nav-menu a{color:var(--smoke); text-decoration:none; font-weight:500}
.nav-menu a:hover{color:var(--white)}

.cta-floating{
  margin-left:.5rem;
  padding:.5rem .85rem;
  text-decoration:none;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold-200), var(--gold));
  color:var(--ink);
  font-weight:700;
  box-shadow:0 0 0 1px rgba(207,160,69,.35), 0 10px 30px rgba(207,160,69,.25);
  transition:transform .2s ease;
}
.cta-floating:hover{transform:translateY(-1px)}

/* Hero */
.hero{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center;
  padding:6rem 1rem 4rem;
  overflow:hidden;
}
.hero-bg:before{
  content:"";
  position:absolute; inset:-10%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1200"><defs><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="2" stitchTiles="stitch"/></filter></defs><rect width="100%" height="100%" filter="url(%23n)" opacity=".025" fill="black"/></svg>') center/cover no-repeat,
    radial-gradient(1200px 700px at 20% 15%, rgba(255,226,168,.18), transparent 55%),
    radial-gradient(1000px 800px at 80% 15%, rgba(207,160,69,.14), transparent 55%);
}
.scales{position:absolute; width:min(80vmin,800px); height:auto; right:-4vw; bottom:-6vh; transform:rotate(-6deg)}
.hero-content{max-width:1000px; text-align:center}
.hero h1{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  margin:.5rem 0;
  letter-spacing:.3px;
}
.sub{color:var(--smoke); font-size:1.05rem; max-width:900px; margin:0 auto 1.25rem}
.hero-cta{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}
.btn{cursor:pointer; border:0; border-radius:12px; padding:.9rem 1.15rem; font-weight:700; letter-spacing:.4px}
.btn-gold{
  color:#0D0F14;
  background:linear-gradient(100deg, var(--gold-200), var(--gold) 55%, var(--gold-700));
  position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(207,160,69,.45), 0 10px 28px rgba(207,160,69,.28);
}
.btn-gold:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform:translateX(-100%);
  animation:shimmer 3.2s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.btn-ghost{
  color:var(--gold-200); background:transparent; border:1.5px solid rgba(207,160,69,.65);
  box-shadow:inset 0 0 0 1px rgba(207,160,69,.25);
}
.badges{display:flex; gap:.8rem; list-style:none; padding:0; margin:1rem 0 0; justify-content:center; flex-wrap:wrap; color:var(--smoke)}
.mini-ico{display:inline-block; margin-right:.35rem; color:var(--gold-200)}

/* Sections */
.section{padding:4rem 1rem}
.section-head{max-width:1050px; margin:0 auto 1.25rem; text-align:center}
.section-head h2{
  font-family:"Cormorant Garamond", serif; font-size:clamp(1.6rem, 3vw, 2.2rem);
  margin:.25rem 0 .5rem 0;
}
.grid-cards{
  --w: 320px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--w), 1fr));
  gap:1rem; max-width:1100px; margin:0 auto;
}
.card{
  padding:1.2rem; border-radius:18px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(207,160,69,.3);
  backdrop-filter: blur(12px);
}
.card h3{margin:.5rem 0 .25rem 0; font-family:"Cormorant Garamond", serif}
.card p{color:var(--smoke); margin:.1rem 0 .75rem}
.mini-cta{color:var(--gold-200); text-decoration:none; font-weight:700}
.mini-cta:hover{text-decoration:underline}

/* simple icons */
.icon{width:42px; height:42px; border-radius:12px; background:linear-gradient(160deg, var(--gold-200), var(--gold)); box-shadow:0 6px 18px rgba(207,160,69,.25); -webkit-mask:center/28px 28px no-repeat}
.i-penal{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2h10v2H7zm3 4h4v5h5l-7 7-7-7h5z"/></svg>')}
.i-civil{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16v2H4zm2 4h12v2H6zm-2 4h16v2H4zm2 4h12v2H6z"/></svg>')}
.i-familiar{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z"/></svg>')}
.i-laboral{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 2h4v4h5v2H5V6h5zm-6 8h16v10H4z"/></svg>')}
.i-corporativo{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 13h18v8H3zM6 3h12v8H6z"/></svg>')}
.i-mercantil{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>')}

/* Especialidades */
.especialidades .list-h{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.85rem; max-width:1100px; margin:0 auto}
.tile{
  padding:1rem 1.1rem; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(207,160,69,.35);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  text-align:center;
}

/* Elegirnos */
.elegirnos{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03))}
.glow-line{position:absolute; top:0; left:50%; transform:translateX(-50%); width:86%; height:3px; background:linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow:0 0 14px rgba(207,160,69,.75)}
.reasons{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; max-width:1100px; margin:0 auto}
.reason{padding:1.3rem; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06)}
.reason-ico{width:44px; height:44px; border-radius:12px; background:linear-gradient(160deg, var(--gold-200), var(--gold)); box-shadow:0 6px 18px rgba(207,160,69,.25); -webkit-mask:center/28px 28px no-repeat}
.i-diploma{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m12 2 9 5-9 5-9-5 9-5Zm0 7 7.03-3.9L12 3.2 4.97 5.1 12 9Zm-6 3 6 3 6-3v5l-6 3-6-3v-5Z"/></svg>')}
.i-diagrama{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 3h18v2H3zm2 4h6v6H5zm8 0h6v10h-6zM5 15h6v6H5z"/></svg>')}
.i-chat{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16v10H5.17L4 15.17V4Zm0 12h14v4H6l-2 2v-6Z"/></svg>')}

/* Servicios acordeón */
.accordion{max-width:900px; margin:0 auto}
details{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(207,160,69,.3);
  border-radius:14px;
  padding:.6rem .9rem;
  margin-bottom:.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; font-weight:700}
summary::-webkit-details-marker{display:none}
summary span{font-family:"Cormorant Garamond", serif; font-size:1.15rem}
details[open]{background:rgba(255,255,255,.05)}
details ul{margin:.5rem 0 .2rem 1rem; color:var(--smoke)}
.hint{color:var(--smoke); margin-top:-.4rem}

/* CTA final */
.cta-final{ text-align:center }
.cta-final h2{
  font-family:"Cormorant Garamond", serif; font-size:clamp(1.6rem,3vw,2.4rem);
  margin:0 0 1rem 0;
}
.cta-buttons{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* Footer */
.site-footer{
  position:relative; background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    linear-gradient(180deg, #0C1E3A, #0C1E3A 40%, #122545 100%);
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:2rem;
}
.footer-inner{max-width:1100px; margin:0 auto; padding:2rem 1rem 3rem; display:grid; grid-template-columns:1fr; gap:1.2rem}
.gold-strip{height:3px; width:100%; background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.f-brand{display:flex; gap:.9rem; align-items:center}
.f-brand img{width:54px; height:54px; border-radius:10px; object-fit:cover; box-shadow:0 0 0 1px rgba(207,160,69,.35), 0 8px 18px rgba(0,0,0,.35)}
.f-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.f-col h4{margin:.2rem 0 .5rem; font-family:"Cormorant Garamond", serif}
.f-col a{color:var(--smoke); text-decoration:none}
.f-col a:hover{color:var(--white)}

/* Modal */
.modal{border:none; border-radius:16px; padding:0; background:rgba(12,30,58,.7); color:var(--white)}
.modal::backdrop{background:rgba(0,0,0,.55); backdrop-filter:blur(2px)}
.modal-inner{padding:1rem 1.2rem; min-width:min(92vw, 460px)}
.mail-links{display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 1rem}

/* Animations on scroll */
[data-anim="in"]{opacity:0; transform:translateY(36px); transition:opacity .6s ease, transform .6s ease}
[data-anim="in"].seen{opacity:1; transform:none}

/* Responsive */
@media (max-width: 960px){
  .nav-toggle{display:block}
  .nav-menu{position:absolute; right:1rem; top:64px; background:rgba(12,30,58,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:.75rem; display:none; flex-direction:column}
  .nav-menu.open{display:flex}
}