/* Layout concept: a night highway behind everything. The long exposure runs across the whole viewport as a fixed background, El Perro stands at the convergence point, and the reading column sits on shaded glass panels that swap sides so the road and the mascot are always in the open. */
:root{--black:#000;--brass:#C9A24A;--brass-hi:#E6CC8A;--ink:#F1EDE2;--muted:#B5B1A5;--line:rgba(201,162,74,.22);--wash:#0B0B0C;--panel:#101011;
--serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;--sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);
--g:clamp(16px,4vw,40px);--hdr:68px;--col:760px;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{font:400 17px/1.65 var(--sans);color:var(--ink);background:var(--black);overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--brass-hi)}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brass);color:#000;padding:10px 16px;z-index:100;font-weight:600}.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
#progress{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brass),var(--brass-hi));transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* header */
header.top{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(0,0,0,.55);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(201,162,74,.18);transition:background .3s,border-color .3s}
header.top.solid{background:rgba(0,0,0,.84);border-bottom-color:rgba(201,162,74,.3)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:600 20px/1 var(--serif);letter-spacing:.02em}
/* header medallion lockup: three brass tick rings around El Perro's head, turned by the scroll loop */
.hm{position:relative;width:46px;height:46px;flex:none;filter:drop-shadow(0 2px 8px rgba(201,162,74,.35))}
.hm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hm .rg{transform-origin:50% 50%;transform-box:view-box;will-change:transform}
.hm .tick.major{transition:stroke-opacity .35s,stroke-width .35s}
.hm .tick.major.lit{stroke-opacity:1;stroke-width:1.6}
.hm-head{position:absolute;left:50%;top:50%;width:70%;height:70%;translate:-50% -50%;object-fit:contain;object-position:50% 50%;background:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.brand small{display:block;font:500 10px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-hi);margin-top:4px}
nav#nav{display:flex;align-items:center;gap:26px}
nav#nav a{color:#E9E6DD;text-decoration:none;font-size:14px;font-weight:500;position:relative;padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
nav#nav a:not(.lang)::after{content:"";position:absolute;left:0;bottom:6px;height:1px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
nav#nav a:not(.lang):hover::after{transform:scaleX(1)}
nav#nav a.lang{border:1px solid var(--brass);color:var(--brass-hi);padding:6px 12px;border-radius:99px;font-size:13px;letter-spacing:.06em;min-height:36px}
nav#nav a.lang:hover{background:var(--brass);color:#000}
#menu-btn{display:none;background:none;border:1px solid rgba(201,162,74,.5);color:#fff;border-radius:8px;width:44px;height:44px;font-size:20px;cursor:pointer}

/* buttons: always opaque over the art */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:99px;font:600 16px/1 var(--sans);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s;border:1.5px solid transparent;cursor:pointer}
.btn-p{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#000;box-shadow:0 8px 28px -10px rgba(201,162,74,.7)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(201,162,74,.9)}
.btn-s{border-color:rgba(230,204,138,.7);color:var(--brass-hi);background:#0A0A0A}.btn-s:hover{background:#1a160d;transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}

/* ===== background layer: the long exposure fills the viewport; El Perro stands where the lanes meet ===== */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#000}
#trails{position:absolute;inset:0;width:100%;height:100%}
.fig{position:absolute;left:0;top:0;width:46vmin;aspect-ratio:809/832;transform:translate(60vw,20vh);will-change:transform;isolation:isolate;z-index:1}
.fig::before{content:"";position:absolute;left:50%;top:56%;width:124%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(230,204,138,.36),rgba(201,162,74,.12) 50%,transparent 72%);filter:blur(18px);z-index:-1}
.mascot{position:relative;width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.8))}
.bignum{position:absolute;left:56%;bottom:-10%;z-index:-1;font:italic 500 clamp(120px,24vmin,280px)/.85 var(--serif);color:var(--brass-hi);opacity:0;text-shadow:0 0 40px rgba(230,204,138,.45);transition:opacity .5s;pointer-events:none;letter-spacing:-.04em}
.bignum.on{opacity:.4}
.bg.flip .bignum{left:auto;right:56%}

/* ===== reading flow on top ===== */
.flow{position:relative;z-index:1;padding-top:var(--hdr)}
.flow section{padding:clamp(48px,6vw,88px) 0}
.panel{position:relative;max-width:var(--col);background:rgba(0,0,0,.68);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,40px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-width:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{background:rgba(0,0,0,.88)}}
section[data-side="right"] .panel{margin-left:auto}
section[data-side="left"] .panel{margin-right:auto}

/* hero copy */
.hero{position:relative;min-height:calc(100svh - var(--hdr));display:flex;align-items:center}
.hero .wrap{width:100%}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:18px}
.hero h1{font:500 clamp(40px,5.2vw,68px)/1.04 var(--serif);letter-spacing:-.01em;font-optical-sizing:auto}
.hero h1 em{font-style:italic;color:var(--brass-hi)}
.ln{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
.hero .sub{font-size:clamp(18px,2vw,22px);color:#E4E0D4;margin:22px 0 30px;max-width:30em;line-height:1.5}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.mx{margin-top:16px;font-size:14.5px;color:var(--brass-hi);max-width:32em}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(201,162,74,.28)}
.proof>div{min-width:0}
.proof b{display:block;font:600 15px/1.3 var(--serif);color:var(--brass-hi);margin-bottom:4px}.proof span{font-size:13.5px;color:#BDB9AD;line-height:1.45;display:block}
.hero-legal{margin-top:24px;font-size:12.5px;color:#9A968A;max-width:44em}

/* sections */
.kick{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
h2{color:#F6F2E7;font:500 clamp(30px,4.2vw,52px)/1.1 var(--serif);letter-spacing:-.01em;max-width:18em}
.lead{color:var(--muted);margin-top:16px;max-width:42em}
.note{margin-top:28px;font-size:13.5px;color:var(--muted);border-left:2px solid var(--brass);padding-left:12px}
.stack{display:grid;gap:18px;margin-top:40px}
.card{background:rgba(16,16,17,.78);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,36px);position:relative;min-width:0;min-height:40vh;display:flex;flex-direction:column;justify-content:center;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.card:hover,.card.on{border-color:var(--brass)}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(201,162,74,.45)}
.card .n{font:italic 500 clamp(56px,6vw,88px)/1 var(--serif);color:var(--brass);display:block;margin-bottom:18px;opacity:.45;transition:opacity .4s,text-shadow .4s}
.card.on .n{opacity:1;text-shadow:0 0 30px rgba(230,204,138,.45)}
.card h3{color:#F6F2E7;font:600 clamp(22px,2.4vw,30px)/1.2 var(--serif);margin-bottom:10px}.card p{color:var(--muted);font-size:clamp(15.5px,1.3vw,17.5px);max-width:40em}

/* cursor spotlight panels */
.spot{--mx:50%;--my:50%;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--brass-hi),rgba(201,162,74,.08) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(201,162,74,.16),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::before,.spot:hover::after{opacity:1}
.spot>*{position:relative;z-index:1}

/* Cómo trabajamos: cards + Mi Caso button beside the meridian wireframe */
.como-panel{max-width:960px;position:relative;overflow:hidden}
.como-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:center}
.como-grid>*{min-width:0}
.como-grid .card{background:rgba(6,6,6,.66)}
.meridian{position:absolute;inset:0;z-index:0;pointer-events:none}

.meridian canvas{position:absolute;inset:0;width:100%;height:100%}


@media (min-width:1000px){
 .como-grid{grid-template-columns:minmax(0,1fr)}
 .como-grid>div:first-child{max-width:560px}
}


/* process: six vertical steps, the road turns at each */
.steps{margin-top:40px;border-bottom:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3.5vw,44px);align-items:center;min-height:48vh;padding:28px 0;border-top:1px solid var(--line)}
.step .num{font:italic 500 clamp(72px,8.5vw,150px)/.9 var(--serif);color:var(--brass);opacity:.3;min-width:1.1ch;text-align:center;transition:opacity .45s,text-shadow .45s}
.step.on .num{opacity:1;text-shadow:0 0 36px rgba(230,204,138,.5)}
.step h3{color:#F6F2E7;font:600 clamp(24px,2.6vw,34px)/1.2 var(--serif);margin-bottom:8px}.step p{color:var(--muted);max-width:36em;font-size:clamp(15.5px,1.3vw,17.5px)}

/* cases: five wide rows, the road swings for each */
.crows{margin-top:40px;border-bottom:1px solid var(--line)}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3.5vw,44px);align-items:center;min-height:44vh;padding:28px 0;border-top:1px solid var(--line);text-decoration:none;color:#fff;position:relative;transition:padding-left .4s var(--ease)}
.crow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--brass-hi),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.crow.on::after,.crow:hover::after{transform:scaleX(1)}
.crow:hover{padding-left:10px}
.crow .idx{font:italic 500 clamp(64px,8vw,136px)/.9 var(--serif);color:var(--brass);opacity:.3;min-width:1.1ch;text-align:center;transition:opacity .45s,text-shadow .45s}
.crow.on .idx{opacity:1;text-shadow:0 0 36px rgba(230,204,138,.5)}
.crow h3{font:500 clamp(30px,3.6vw,50px)/1.04 var(--serif);color:var(--brass-hi);max-width:12em;transition:color .3s}
.crow:hover h3{color:#fff}
.crow p{font-size:clamp(15px,1.3vw,18px);color:#CFCBBE;margin-top:8px;max-width:36em}
.crow .more{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--brass)}

/* faq */
.faq{margin-top:44px;max-width:52em}
details{border-bottom:1px solid var(--line)}summary{color:#F6F2E7;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:600 19px/1.35 var(--serif);min-height:44px}
summary::-webkit-details-marker{display:none}summary::after{content:"+";font:300 30px/1 var(--sans);color:var(--brass);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 24px;color:var(--muted);max-width:42em}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}details[open]::details-content{block-size:auto}}

/* firm facts + referral + contact */
.firm{display:grid;gap:clamp(24px,4vw,48px);align-items:start;margin-top:8px}
.firm>*{min-width:0}
.facts{display:grid;margin:0;border-top:1px solid var(--line)}.facts div{display:grid;grid-template-columns:11em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font:600 12px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}.facts dd{margin:0;color:var(--ink)}
.refer{display:grid;gap:28px;align-items:center}
.refer>*{min-width:0}
.contact h2{color:#fff}.contact .lead{color:#CFCBBE}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:start}
.cgrid>*{min-width:0}
.cinfo{display:grid;gap:18px;font-size:16px;margin:0}.cinfo dt{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}.cinfo dd{margin:0;color:#E4E0D4}.cinfo a{color:var(--brass-hi)}
footer{position:relative;z-index:1;background:#050505;border-top:1px solid var(--line);color:#A9A598;padding:44px 0 110px;font-size:13px}footer p{max-width:62em}footer a{color:var(--brass-hi)}
.ftnav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px}
.fl{display:flex;gap:20px;margin-top:16px;flex-wrap:wrap;align-items:center}
.linkbtn{background:none;border:0;padding:0;color:var(--brass-hi);font:inherit;text-decoration:underline;cursor:pointer}

/* mobile call bar */
#callbar{visibility:hidden;position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(201,162,74,.4);transform:translateY(110%);opacity:0;transition:transform .4s var(--ease),opacity .4s,visibility 0s .4s}
#callbar.show{visibility:visible;transform:none;opacity:1;transition-delay:0s}#callbar .btn{flex:1;min-height:48px;padding:0 12px;font-size:15px}

/* motion: line reveals, scroll-driven where supported; the resting state is always visible */
@media (prefers-reduced-motion:no-preference){
 .js .hero .ln>span{animation:rise 1.1s var(--ease) both}
 .js .hero .ln:nth-child(2)>span{animation-delay:.14s}
 .js .hero .sub,.js .hero .ctas,.js .hero .mx,.js .hero .proof,.js .hero .hero-legal,.js .hero .eyebrow{animation:fade 1s ease .45s both}
 .js .hero .eyebrow{animation-delay:.05s}
 .js .fig{animation:fade 1.4s ease .2s both}
 @supports (animation-timeline:view()){
  .js .rv,.js h2{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
 }
}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lift{from{opacity:.5;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-duration:.01ms!important}#trails{opacity:.55}.panel{background:#050505;backdrop-filter:none;-webkit-backdrop-filter:none}.bignum{display:none}.hm .rg{transform:none!important}}

/* responsive */
@media (max-width:999px){
 .flow section{padding:36px 0}
 .panel{max-width:none;padding:22px 18px}
 .hero{min-height:0;padding:28px 0 40px}
 .hero .panel{margin-top:40vmin}
 .fig{width:52vmin}
 .bignum{font-size:clamp(90px,26vmin,160px)}
 .card{min-height:0;padding:22px 20px}
 .step{min-height:0;padding:22px 0;gap:18px}.step .num{font-size:56px}
 .crow{min-height:0;padding:22px 0;gap:18px}.crow .idx{font-size:52px}
 .cgrid{grid-template-columns:1fr}.facts div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:820px){
 .hm{width:40px;height:40px}
 #menu-btn{display:block}nav#nav{position:fixed;inset:var(--hdr) 0 auto 0;max-height:calc(100dvh - var(--hdr));overflow-y:auto;background:rgba(0,0,0,.97);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--g) 22px;display:none}nav#nav.open{display:flex}nav#nav a{padding:14px 0;font-size:17px;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}nav#nav a.lang{margin-top:14px;width:auto;border:1px solid var(--brass);padding:8px 16px}
 #callbar{display:flex}html{scroll-padding-bottom:96px}
}
@media (min-width:1000px) and (max-width:1180px){nav#nav{gap:16px}nav#nav a{font-size:13px}.brand small{display:none}}
@media (max-width:640px){.eyebrow{letter-spacing:.14em;font-size:11px}body{font-size:16.5px}.proof{grid-template-columns:1fr;gap:14px}.ctas .btn{width:100%}.step{grid-template-columns:1fr;gap:6px}.step .num{text-align:left;font-size:44px}.crow{grid-template-columns:1fr;gap:6px}.crow .idx{text-align:left;font-size:44px}}

/* consent banner (track.js) */
.cb{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;margin:0 auto;max-width:980px;display:grid;grid-template-columns:1fr auto;gap:4px 28px;align-items:center;background:#0E0E0F;border:1px solid var(--brass);border-radius:18px;padding:18px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);font-size:14px;line-height:1.5;color:#E4E0D4}
.cb strong{grid-column:1;font:600 16px/1.3 var(--serif);color:var(--brass-hi)}.cb p{grid-column:1;margin:0;color:#C9C5B8}.cb a{color:var(--brass-hi)}
.cb-b{grid-column:2;grid-row:1/3;display:flex;gap:10px}.cb-b .btn{min-height:44px;padding:0 22px;font-size:15px}
.cb .sm{display:none}
@media (max-width:820px){.cb{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:none;grid-template-columns:1fr;padding:12px 14px;border-radius:14px;font-size:13px}.cb strong{display:none}.cb .lg{display:none}.cb .sm{display:inline}.cb-b{grid-column:1;grid-row:auto;margin-top:8px}.cb-b .btn{flex:1;min-height:40px;padding:0 12px;font-size:14px}}