/* AF Legal · extranjería */

.hero{padding:72px clamp(20px,4vw,48px) 64px}
.hero-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:48px;align-items:center}
.ht{display:flex;flex-direction:column;gap:30px}
.h1{display:flex;flex-direction:column;gap:22px;font-weight:400}
.display{display:block;font-family:var(--display);font-weight:400;font-size:clamp(42px,4.8vw,70px);line-height:1;letter-spacing:-.018em;color:var(--hd);text-wrap:balance}
.display em{font-style:italic;color:var(--acc)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--tx);max-width:34ch;text-wrap:pretty}
.note{font-size:14.5px;color:var(--mu)}

/* Mapa del recorrido */
.map{position:relative;width:560px;height:540px;max-width:100%;justify-self:center}
.map::before{content:'';position:absolute;inset:-10px -20px 0 -20px;background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse at 60% 50%,#000 30%,transparent 72%)}
.map svg{position:absolute;inset:0;width:560px;height:520px;overflow:visible}
.r-base{fill:none;stroke:var(--ln2);stroke-width:1.3;stroke-dasharray:2 7;stroke-linecap:round}
.r-draw{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round}
.r-pt{fill:var(--bg);stroke:var(--acc);stroke-width:1.5}
.r-pt.end{fill:var(--acc)}
.walker{position:absolute;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#E94762;box-shadow:0 0 0 6px rgba(233,71,98,.16);offset-path:path('M40,470 C110,462 140,402 180,380 S262,330 300,300 S362,222 400,200 S472,122 510,62');offset-rotate:0deg;offset-distance:0%;opacity:0}
.mk{position:absolute;display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:var(--card);border:1px solid var(--ln);border-radius:6px;white-space:nowrap;box-shadow:0 1px 2px rgba(11,13,17,.05)}
.mk b{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hd)}
.mk small{font-family:var(--display);font-style:italic;font-size:15.5px;color:var(--mu)}
.mk1{left:0;top:486px}
.mk2{left:196px;top:388px}
.mk3{left:318px;top:306px}
.mk4{left:150px;top:150px}
.mk5{left:338px;top:2px}
.coord{position:absolute;left:0;top:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.map-m{display:none}

/* Selector de punto de partida */
.game{display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.opt{display:flex;align-items:center;gap:16px;width:100%;min-height:60px;padding:0 18px;border:0;border-radius:8px;background:transparent;text-align:left;font:400 16.5px var(--sans);line-height:1.35;color:var(--mu);cursor:pointer;transition:background .3s,color .3s}
.opt i{font-style:normal;font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:14px;color:var(--mu);min-width:24px;transition:color .3s}
.opt span{flex:1}
.opt em{flex:0 0 auto;font-style:normal}
.opt:hover{color:var(--hd);background:var(--bg2)}
.res{display:none}
.res-k{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.res-t{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.12;color:var(--hd)}
.trail{position:relative;margin-top:34px;display:flex;flex-direction:column;gap:26px;padding-left:34px}
.trail::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--acc);transform-origin:top}
.trail li{position:relative;display:flex;flex-direction:column;gap:6px}
.trail li::before{content:'';position:absolute;left:-34px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--card);border:1.5px solid var(--acc)}
.trail li:last-child::before{background:var(--acc)}
.trail b{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hd)}
.trail p{font-size:16.5px;line-height:1.65;color:var(--tx);max-width:52ch}
.res-f{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:36px}
.miss{font-size:15px;line-height:1.55;color:var(--mu)}
.no-js .game{display:block;padding:8px}
.no-js .res{display:block;padding:20px 18px 28px}
.no-js .opt em{display:none}
@media (min-width:981px){
.js .game{grid-template-columns:minmax(320px,5fr) minmax(0,7fr);grid-template-rows:repeat(7,auto) 1fr;padding:14px 0 14px 14px}
.js .opt{grid-column:1}
.js .opt em{width:8px;height:8px;border-radius:50%;transition:background .3s}
.js .opt.cur{color:var(--hd);background:var(--bg2);font-weight:500}
.js .opt.cur i{color:var(--acc)}
.js .opt.cur em{background:var(--acc)}
.js .res{grid-column:2;grid-row:1 / -1;margin:-14px 0 -14px 14px;padding:44px clamp(24px,3.6vw,52px);min-height:652px;border-left:1px solid var(--ln)}
.js .res.cur{display:block}
.js .miss{grid-column:1;grid-row:-2 / -1;align-self:end;padding:18px 18px 8px}
}

/* Cómo trabajo */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.steps3 li{display:flex;flex-direction:column;gap:14px;padding:34px 30px 36px;background:var(--card);border:1px solid var(--ln);border-radius:10px}
.rn{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:30px;line-height:1;color:var(--acc)}
.steps3 h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;color:var(--hd)}
.steps3 p{font-size:16.5px;line-height:1.6;color:var(--mu)}

/* Servicios por objetivo */
.goals{border-top:1px solid var(--ln)}
.goal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:18px 64px;padding:38px 0;border-bottom:1px solid var(--ln)}
.g-h{display:flex;align-items:baseline;gap:20px}
.g-n{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:14px;color:var(--acc);min-width:26px}
.g-h h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.1;color:var(--hd)}
.g-b{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.g-b p{font-size:17px;line-height:1.6;color:var(--mu);max-width:54ch}
.g-l{display:flex;flex-wrap:wrap;gap:10px}
.g-l li{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--ln2);border-radius:999px;background:var(--card);font-size:15px;font-weight:500;color:var(--hd)}

/* Artículos */
.arts{border-top:1px solid var(--ln)}
.art{display:grid;grid-template-columns:1fr 140px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--ln)}
.art h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.3;color:var(--hd);transition:color .3s}
.art span{justify-self:end;font-size:14px;color:var(--mu)}
.art:hover h3{color:var(--acc)}

/* Movimiento */
.motion .h1 .eyebrow{animation:up .9s var(--e) both}
.motion .display{animation:up 1s .08s var(--e) both}
.motion .lead{animation:up .9s .16s var(--e) both}
.motion .ht .ctas{animation:up .9s .22s var(--e) both}
.motion .note{animation:up .9s .28s var(--e) both}
.motion .r-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s .2s cubic-bezier(.65,0,.35,1) forwards}
.motion .walker{animation:walk 7s 2.6s cubic-bezier(.65,0,.35,1) infinite}
.motion .mk{animation:pop .7s var(--e) both}
.motion .mk1{animation-delay:.3s}
.motion .mk2{animation-delay:.7s}
.motion .mk3{animation-delay:1.1s}
.motion .mk4{animation-delay:1.5s}
.motion .mk5{animation-delay:1.9s}
.motion .res-k,.motion .res-t,.motion .res-f{animation:up .7s var(--e) both}
.motion .res-t{animation-delay:.05s}
.motion .trail::before{animation:grow 1s .1s var(--e) both}
.motion .trail li{animation:up .7s var(--e) both}
.motion .trail li:nth-child(1){animation-delay:.12s}
.motion .trail li:nth-child(2){animation-delay:.24s}
.motion .trail li:nth-child(3){animation-delay:.36s}
.motion .res-f{animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes walk{0%{offset-distance:0%;opacity:0}6%{opacity:1}80%{offset-distance:100%;opacity:1}92%,100%{offset-distance:100%;opacity:0}}

@media (max-width:980px){
.hero{padding:48px 20px 40px}
.map{display:none}
.map-m{position:relative;display:flex;flex-direction:column;gap:16px;padding-left:30px}
.map-m::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--acc)}
.map-m li{position:relative;display:flex;flex-direction:column;gap:2px}
.map-m li::before{content:'';position:absolute;left:-30px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--acc)}
.map-m li:last-child::before{background:var(--acc)}
.map-m b{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hd)}
.map-m span{font-family:var(--display);font-style:italic;font-size:16px;color:var(--mu)}
.game{padding:6px}
.opt{min-height:64px;padding:10px 14px;gap:14px}
.js .opt em::before{content:'+';display:block;font-size:26px;font-weight:300;line-height:1;color:var(--acc)}
.js .opt.open{color:var(--hd);font-weight:500}
.js .opt.open i{color:var(--acc)}
.js .opt.open em::before{content:'\2212'}
.res{margin:0 0 6px;padding:18px 16px 24px;background:var(--bg2);border-radius:8px}
.js .res.open{display:block}
.js .res-k,.js .res-t{display:none}
.trail{margin-top:4px}
.trail li::before{background:var(--bg2)}
.trail li:last-child::before{background:var(--acc)}
.res-f{margin-top:28px}
.miss{padding:14px 14px 10px}
.goal{grid-template-columns:minmax(0,1fr);padding:30px 0}
.art{grid-template-columns:1fr;gap:6px}
.art span{justify-self:start}
}