:root { --navy:#031d38; --navy-soft:#0b2a49; --gold:#cda95b; --cream:#f6f1e7; --ink:#102438; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }

.hero { min-height:100svh; position:relative; display:flex; flex-direction:column; overflow:hidden; color:var(--white); background:var(--navy); }
.hero-image { position:absolute; inset:0; background:url('fachada.jpeg') center 58%/cover no-repeat; opacity:0; transform:scale(1.055); animation:heroReveal 1.8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,17,33,.9) 0%,rgba(2,17,33,.62) 45%,rgba(2,17,33,.14) 76%),linear-gradient(0deg,rgba(1,13,26,.76) 0%,transparent 35%,rgba(1,13,26,.38) 100%); animation:fadeIn 1.4s ease-out forwards; }
.site-header { position:relative; z-index:2; min-height:104px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 5vw; border-bottom:1px solid rgba(255,255,255,.22); opacity:0; animation:riseIn .8s .35s ease-out forwards; }
.brand { display:inline-flex; align-items:center; gap:14px; width:fit-content; }
.brand-mark { width:48px; height:48px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-family:Georgia,serif; font-style:italic; font-size:18px; }
.brand-name { font-family:Georgia,serif; text-transform:uppercase; letter-spacing:.13em; font-size:15px; line-height:1.35; }
.brand-name small { display:block; font-family:Arial,sans-serif; font-size:8px; font-weight:400; letter-spacing:.24em; color:rgba(255,255,255,.68); }
nav { display:flex; gap:clamp(22px,3vw,48px); font-size:13px; letter-spacing:.06em; }
nav a { position:relative; padding:10px 0; color:rgba(255,255,255,.82); }
nav a::after { content:''; position:absolute; left:0; bottom:3px; width:0; height:1px; background:var(--gold); transition:width .25s ease; }
nav a:hover::after { width:100%; }
.header-cta { justify-self:end; font-size:12px; text-transform:uppercase; letter-spacing:.15em; display:flex; gap:12px; align-items:center; }
.header-cta span { color:var(--gold); font-size:17px; }
.hero-content { position:relative; z-index:1; width:min(850px,90vw); margin:auto 5vw; padding:72px 0 52px; }
.eyebrow { text-transform:uppercase; letter-spacing:.22em; font-size:11px; display:flex; align-items:center; gap:13px; opacity:0; animation:riseIn .8s .6s ease-out forwards; }
.eyebrow span { width:38px; height:1px; background:var(--gold); }
.hero h1 { margin:24px 0; max-width:900px; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(50px,7.2vw,104px); line-height:.96; letter-spacing:-.045em; opacity:0; animation:riseIn 1s .72s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 em,.intro h2 em { color:var(--gold); font-weight:400; }
.hero-copy { max-width:560px; font-size:clamp(15px,1.4vw,19px); line-height:1.7; color:rgba(255,255,255,.76); opacity:0; animation:riseIn .9s .9s ease-out forwards; }
.hero-actions { margin-top:34px; display:flex; align-items:center; gap:34px; opacity:0; animation:riseIn .9s 1.05s ease-out forwards; }
.primary-button { min-height:55px; display:inline-flex; align-items:center; justify-content:center; gap:28px; padding:0 25px; background:var(--gold); color:#0c2134; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; transition:transform .25s ease,background .25s ease; }
.primary-button:hover { transform:translateY(-2px); background:#ddbd74; }
.text-link { font-size:13px; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:7px; display:flex; gap:16px; }
.text-link span { color:var(--gold); }
.hero-foot { position:relative; z-index:1; display:flex; justify-content:space-between; padding:20px 5vw 22px; border-top:1px solid rgba(255,255,255,.18); font-size:10px; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.62); opacity:0; animation:fadeIn 1s 1.25s forwards; }
.hero-foot p { margin:0; }
.hero-foot span { color:var(--gold); padding:0 5px; }

.intro { padding:clamp(85px,11vw,155px) 7vw; display:grid; grid-template-columns:25% 1fr; gap:6vw; }
.section-label { font-size:11px; text-transform:uppercase; letter-spacing:.19em; display:flex; align-items:center; gap:13px; height:fit-content; }
.section-label span { color:var(--gold); }
.intro-copy { max-width:920px; }
.intro-lead { margin:0 0 28px; color:#617080; font-size:14px; }
.intro h2 { margin:0; font:400 clamp(36px,5vw,68px)/1.08 Georgia,serif; letter-spacing:-.035em; }
.body-copy { margin:40px 0 0 auto; max-width:580px; color:#526476; font-size:16px; line-height:1.8; }
.practice { background:var(--navy); color:white; padding:clamp(80px,10vw,140px) 7vw; display:grid; grid-template-columns:42% 1fr; gap:8vw; }
.section-label.light { color:rgba(255,255,255,.7); }
.practice-heading h2 { margin:45px 0 0; font:400 clamp(38px,4.5vw,63px)/1.1 Georgia,serif; }
.practice-list article { min-height:170px; border-top:1px solid rgba(255,255,255,.2); display:grid; grid-template-columns:60px 1fr auto; gap:18px; align-items:center; transition:padding .25s ease,border-color .25s ease; }
.practice-list article:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.practice-list article:hover { padding-left:8px; border-color:var(--gold); }
.practice-list article.featured-area { border-color:var(--gold); background:linear-gradient(90deg,rgba(205,169,91,.12),transparent 72%); padding-left:18px; padding-right:8px; }
.featured-label { display:block; margin-bottom:10px; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.area-number { color:var(--gold); font-size:11px; }
.practice-list h3 { margin:0 0 12px; font:400 27px/1.2 Georgia,serif; }
.practice-list p { margin:0; max-width:480px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.65; }
.practice-list article>span:last-child { color:var(--gold); font-size:22px; }
.contact { padding:clamp(85px,10vw,140px) 7vw; display:grid; grid-template-columns:1fr 38%; gap:8vw; }
.contact h2 { margin:45px 0 0; max-width:720px; font:400 clamp(42px,5.5vw,74px)/1.06 Georgia,serif; letter-spacing:-.035em; }
.contact-details { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px; }
.contact-link { font:400 25px Georgia,serif; color:var(--navy); }
.contact-link.email-link { font-size:20px; overflow-wrap:anywhere; }
.contact-details p { margin:0; color:#5d6e7c; line-height:1.7; }
.primary-button.dark { background:var(--navy); color:white; }
.primary-button.dark:hover { background:var(--navy-soft); }
footer { background:#02162a; color:rgba(255,255,255,.52); padding:28px 7vw; display:flex; justify-content:space-between; font-size:10px; text-transform:uppercase; letter-spacing:.16em; }

@keyframes heroReveal { to { opacity:1; transform:scale(1); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes riseIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:820px) {
  .site-header { min-height:86px; grid-template-columns:1fr auto; padding:0 6vw; }
  nav { display:none; }
  .brand-mark { width:42px; height:42px; }
  .brand-name { font-size:12px; }
  .header-cta { font-size:0; }
  .header-cta span { font-size:21px; }
  .hero-image { background-position:62% 50%; }
  .hero-shade { background:linear-gradient(90deg,rgba(2,17,33,.86),rgba(2,17,33,.38)),linear-gradient(0deg,rgba(1,13,26,.82),transparent 55%); }
  .hero-content { margin:auto 6vw; padding:72px 0 48px; }
  .hero h1 { font-size:clamp(48px,14vw,70px); }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:24px; }
  .hero-foot { padding-inline:6vw; gap:25px; }
  .hero-foot p:last-child { text-align:right; }
  .intro,.practice,.contact { grid-template-columns:1fr; gap:50px; padding-inline:7vw; }
  .intro h2 { font-size:42px; }
  .body-copy { margin-left:0; }
  .practice-list article { min-height:155px; grid-template-columns:42px 1fr auto; }
  .contact-details { padding-top:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; } }