/* =====================================================================
   Robledo & Quintana Abogados | Prediseño de home (tercera vuelta)
   Navy institucional, piedra fría y latón. Caslon para titulares,
   Public Sans para lectura. Sobrio, preciso y orientado a captar casos.
   Firma de movimiento: líneas de latón que se dibujan (áreas, cifras,
   proceso, firma del socio) y casos que se sellan al aparecer.
   ===================================================================== */
:root{
  --navy:#0E1A2B; --navy-2:#0A1320; --navy-3:#16263D;
  --stone:#EDEFF2; --stone-2:#E2E6EB; --white:#FFFFFF;
  --brass:#A8844F; --brass-2:#C9A978; --brass-3:#8C6C3D;
  --ink:#1A2333; --slate:#56606F; --line:rgba(14,26,43,.12); --line-l:rgba(255,255,255,.14);
  --serif:'Libre Caslon Display', Georgia, serif;
  --serif-t:'Libre Caslon Text', Georgia, serif;
  --sans:'Public Sans', system-ui, sans-serif;
  --pad:clamp(20px,4vw,56px); --max:1280px;
  --sec:clamp(80px,10vw,136px);
  --ease:cubic-bezier(.2,.75,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --sr-accent:#C9A978; --sr-font:'Public Sans', system-ui, sans-serif;
  --sr-bg:rgba(10,19,32,.97); --sr-radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; font:600 15px/1 var(--sans); letter-spacing:.01em; padding:17px 26px; border-radius:3px; border:0; cursor:pointer; transition:background .3s, color .3s, transform .35s var(--ease), box-shadow .3s}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-3)}
.btn-brass{background:var(--brass); color:#fff}
.btn-brass:hover{background:var(--brass-3)}
.btn-line{color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn-line:hover{background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.btn-line:hover svg{transform:none}
.btn-full{width:100%}
.link-arrow{position:relative; display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--navy); padding-bottom:5px; white-space:nowrap; transition:gap .35s var(--ease)}
.link-arrow::before{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brass); transform-origin:right; transition:transform .5s var(--ease)}
.link-arrow:hover::before{animation:rqUnderline .7s var(--ease)}
@keyframes rqUnderline{0%{transform:scaleX(1); transform-origin:right}45%{transform:scaleX(0); transform-origin:right}46%{transform:scaleX(0); transform-origin:left}100%{transform:scaleX(1); transform-origin:left}}
.link-arrow::after{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.link-arrow:hover{gap:14px}
.link-arrow.light{color:#fff}
.link-arrow.light::before{background:var(--brass-2)}
.stars{color:var(--brass-2); letter-spacing:2px}

/* ---------- Cursor: pluma de latón ----------
   Aro finísimo de latón y punta de pluma (rombo). Sobre enlaces el aro se
   recoge en un subrayado; sobre botones se rellena levemente. Burbuja
   discreta en forma de etiqueta junto a la punta. */
html.cursor-abogados{
  --cur-dot:6px; --cur-dot-bg:var(--navy); --cur-dot-radius:1px;
  --cur-ring:36px; --cur-ring-radius:50%; --cur-ring-border:1px solid rgba(168,132,79,.85); --cur-ring-bg:transparent;
  --cur-link-scale:1; --cur-link-bg:transparent; --cur-link-dot:1;
  --cur-dark-dot:var(--navy); --cur-dark-ring:1px solid rgba(168,132,79,.85);
  --cur-light-dot:#C9A978; --cur-light-ring:1px solid rgba(201,169,120,.72);
  --cur-lerp:.2; --pluma:#A8844F; --pluma-fill:rgba(168,132,79,.12);
}
html.has-cur.cursor-abogados.cur-light{--pluma:#C9A978; --pluma-fill:rgba(201,169,120,.16)}
.cursor-abogados .cur-dot::before{rotate:45deg}
.cursor-abogados .cur-ring::after{content:""; position:absolute; left:-13px; top:14px; width:26px; height:1.5px; background:var(--pluma); opacity:0; transform:scaleX(0); transition:transform .4s var(--ease), opacity .2s}
html.has-cur.cursor-abogados.cur-link .cur-ring::before{transform:scale(.3); opacity:0}
html.has-cur.cursor-abogados.cur-link .cur-ring::after{opacity:1; transform:scaleX(1)}
html.has-cur.cursor-abogados.cur-link .cur-dot::before{transform:scale(1.1)}
html.has-cur.cursor-abogados.cur-btn .cur-ring::before{transform:scale(1.45); opacity:1; background:var(--pluma-fill)}
html.has-cur.cursor-abogados.cur-btn .cur-ring::after{opacity:0; transform:scaleX(0)}
html.has-cur.cursor-abogados.cur-down .cur-ring::before{transform:scale(.8)}
html.has-cur.cursor-abogados.cur-down .cur-ring::after{transform:scaleX(.55)}
html.has-cur.cursor-abogados.cur-down .cur-dot::before{transform:scale(.7)}
.cursor-abogados .cur-label{
  width:auto; height:auto; display:flex; align-items:center; gap:9px; padding:9px 14px 9px 12px; border-radius:2px;
  transform:translate(16px,16px) scale(.7); transform-origin:0 0;
  background:var(--navy); color:#fff; font:600 12.5px/1 var(--sans); letter-spacing:.02em;
  box-shadow:0 14px 30px -12px rgba(14,26,43,.55);
}
.cursor-abogados .cur-label::before{content:""; width:14px; height:1px; background:var(--brass-2)}
html.has-cur.cursor-abogados.cur-text .cur-label{transform:translate(16px,16px) scale(1); opacity:1}
html.has-cur.cursor-abogados.cur-text .cur-dot::before{opacity:1}
html.has-cur.cursor-abogados.cur-text .cur-ring::before{opacity:0; transform:scale(.3)}
html.has-cur.cursor-abogados.cur-text .cur-ring::after{opacity:0}
html.has-cur.cursor-abogados.cur-light .cur-label{background:var(--brass-2); color:var(--navy)}
html.has-cur.cursor-abogados.cur-light .cur-label::before{background:var(--navy)}

/* ---------- Barra superior ---------- */
.topbar{background:var(--navy-2); color:rgba(255,255,255,.78); font-size:13px}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px}
.topbar ul{display:flex; align-items:center; gap:26px}
.topbar a{display:inline-flex; align-items:center; gap:8px; transition:color .2s}
.topbar a:hover{color:#fff}
.topbar svg{width:15px; height:15px; fill:none; stroke:var(--brass-2); stroke-width:1.6}
.topbar .lang{gap:4px}
.topbar .lang a{padding:3px 7px; border-radius:2px; font-weight:600; font-size:12px}
.topbar .lang a.on{background:rgba(255,255,255,.1); color:#fff}
@media (max-width:1020px){ .topbar p{display:none} .topbar-in{justify-content:center} }
@media (max-width:640px){ .topbar li:nth-child(2){display:none} }

/* ---------- Cabecera ---------- */
.hd{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 10px 30px -18px rgba(14,26,43,.35)}
.hd-in{display:flex; align-items:center; gap:28px; height:88px; transition:height .3s}
.hd.is-scrolled .hd-in{height:74px}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.mono{display:flex; align-items:center; justify-content:center; white-space:nowrap; width:50px; height:50px; border:1px solid var(--navy); font-family:var(--serif); font-size:19px; color:var(--navy); letter-spacing:-.02em; transition:background .4s, color .4s}
.mono i{font-style:normal; color:var(--brass); margin:0 1px}
.brand:hover .mono{background:var(--navy); color:#fff}
.brand-txt b{display:block; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.05; color:var(--navy); letter-spacing:-.005em; white-space:nowrap}
.brand-txt small{display:block; font-size:11.5px; color:var(--slate); letter-spacing:.04em; margin-top:4px; white-space:nowrap}
.brand.light .mono{border-color:rgba(255,255,255,.5); color:#fff}
.brand.light:hover .mono{background:#fff; color:var(--navy)}
.brand.light .brand-txt b{color:#fff}
.brand.light .brand-txt small{color:rgba(255,255,255,.6)}

.nav{margin-left:auto}
.nav > ul{display:flex; align-items:center; gap:2px}
.nav > ul > li{position:relative}
.nav > ul > li > a{display:flex; align-items:center; gap:6px; white-space:nowrap; padding:12px 13px; font-size:15px; font-weight:500; color:var(--ink); position:relative; transition:color .2s}
.nav > ul > li > a::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav > ul > li:hover > a{color:var(--navy)}
.nav > ul > li:hover > a::after{transform:scaleX(1)}
.chev{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s}
.nav li:hover .chev{transform:rotate(180deg)}
.drop{position:absolute; top:100%; left:0; min-width:250px; background:#fff; border:1px solid var(--line); border-top:2px solid var(--brass); box-shadow:0 30px 60px -25px rgba(14,26,43,.35); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s}
.drop a{display:block; padding:11px 14px; font-size:15px; color:var(--ink); transition:background .2s, color .2s, padding .3s var(--ease)}
.drop a:hover{background:var(--stone); color:var(--navy); padding-left:20px}
.has-drop:hover .drop{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .3s var(--ease)}
.has-mega{position:static !important}
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--line); box-shadow:0 40px 70px -35px rgba(14,26,43,.45); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s}
.has-mega:hover .mega{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .3s var(--ease)}
.mega-in{max-width:var(--max); margin:0 auto; padding:36px var(--pad) 40px; display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:44px; align-items:stretch}
.mega-col h4{font-family:var(--serif); font-size:22px; color:var(--navy); padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.mega-col a{display:block; padding:12px 0; border-bottom:1px solid var(--line); transition:padding .3s var(--ease)}
.mega-col a b{display:block; font-weight:600; font-size:15.5px; color:var(--ink); transition:color .2s}
.mega-col a span{display:block; font-size:13.5px; color:var(--slate); margin-top:2px}
.mega-col a:hover{padding-left:8px}
.mega-col a:hover b{color:var(--brass-3)}
.mega-feat{position:relative; background:var(--navy); color:#fff; display:flex; flex-direction:column; overflow:hidden}
.mega-ph{height:170px; overflow:hidden}
.mega-ph img{width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.06); transition:transform 1.2s var(--ease)}
.has-mega:hover .mega-ph img{transform:none}
.mega-txt{padding:22px 24px 26px; display:flex; flex-direction:column; align-items:flex-start; flex:1}
.mega-txt p{font-family:var(--serif); font-size:22px; line-height:1.2}
.mega-txt span{display:block; color:rgba(255,255,255,.74); font-size:14.5px; margin:8px 0 18px}
.mega-txt .link-arrow{color:#fff; margin-top:auto}
.mega-txt .link-arrow::before{background:var(--brass-2)}

.hd-actions{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.hd-sr .sr-trigger{font-size:14px; font-weight:600; color:var(--navy); --sr-dot-ring:#fff; padding:.62em 1em .62em .85em}
.hd .btn{padding:15px 22px; font-size:14.5px}
.burger{display:none; width:48px; height:48px; border:1px solid var(--line); background:#fff; border-radius:3px; cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto}
.burger span{position:relative; width:20px; height:2px; background:var(--navy); transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy); transition:transform .3s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1380px){
  .hd-in{gap:20px} .brand-txt small{display:none}
  .nav > ul > li > a{padding:12px 10px; font-size:14.5px} .nav > ul > li > a::after{left:10px; right:10px}
  .nav-opt{display:none} .hd .btn{padding:14px 18px}
}
@media (max-width:1279px){
  .hd-in{gap:14px} .brand{gap:12px} .brand-txt b{font-size:20px} .mono{width:46px; height:46px; font-size:18px}
  .nav > ul > li > a{padding:10px 8px; font-size:14px} .nav > ul > li > a::after{left:8px; right:8px}
  .hd-sr .sr-trigger{font-size:13.5px} .hd-actions{gap:10px} .hd .btn{padding:13px 16px; font-size:14px}
}
@media (max-width:1199px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hd-actions{margin-left:auto}
}
@media (max-width:700px){ .hd-sr{display:none} }
@media (max-width:560px){ .hd .btn{display:none} .brand-txt b{font-size:19px} .mono{width:44px; height:44px; font-size:17px} .hd-in{height:76px} .hd.is-scrolled .hd-in{height:68px} }

/* ---------- Menú móvil ---------- */
.mmenu{position:fixed; inset:0; z-index:85; background:var(--navy); color:#fff; padding-top:140px; overflow:auto; overscroll-behavior:contain; transform:translateX(100%); transition:transform .5s var(--ease), visibility 0s .5s; visibility:hidden}
.menu-open .mmenu{transform:none; visibility:visible; transition:transform .5s var(--ease)}
.menu-open body{overflow:hidden}
.mmenu-in{padding:10px var(--pad) 50px; max-width:620px}
.macc{border-bottom:1px solid var(--line-l)}
.macc button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-family:var(--serif); font-size:26px; cursor:pointer}
.macc button:focus-visible{outline:2px solid var(--brass-2); outline-offset:2px}
.macc button svg{width:20px; height:20px; fill:none; stroke:var(--brass-2); stroke-width:1.8; transition:transform .3s}
.macc.is-open button svg{transform:rotate(180deg)}
.macc-panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.macc-panel a{display:block; padding:10px 0 10px 16px; color:rgba(255,255,255,.78); font-size:16px; border-left:1px solid var(--brass)}
.macc-panel a:last-child{margin-bottom:18px}
.mlink{display:block; padding:18px 0; font-family:var(--serif); font-size:26px; border-bottom:1px solid var(--line-l)}
.mbtn{margin-top:30px; width:100%}
.mphone{margin-top:14px; text-align:center; color:rgba(255,255,255,.72); font-size:15px}
.mphone a{color:#fff; font-weight:600}
.mmenu .srm{--srm-line:rgba(255,255,255,.14)}
@media (max-width:560px){ .mmenu{padding-top:124px} }

/* ---------- Hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--navy)}
.hero-bg{position:absolute; left:0; right:0; top:-10%; bottom:-10%; will-change:transform}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%; animation:heroZoom 18s ease-out both}
.hero.is-off .hero-bg img{animation-play-state:paused}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,19,32,.94) 0%, rgba(10,19,32,.82) 38%, rgba(10,19,32,.45) 70%, rgba(10,19,32,.35) 100%), linear-gradient(0deg, rgba(10,19,32,.6), transparent 40%)}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(36px,6vw,90px); align-items:center; padding-top:clamp(56px,4.8vw,76px); padding-bottom:clamp(56px,4.8vw,76px); min-height:calc(100vh - 130px)}
.hero-kicker{display:flex; align-items:center; gap:14px; font-size:14px; font-weight:500; letter-spacing:.05em; color:var(--brass-2); margin-bottom:26px}
.hero-kicker::before{content:""; width:44px; height:1px; background:var(--brass-2); transform-origin:left}
.hero h1{font-family:var(--serif); font-size:clamp(46px,5.9vw,88px); line-height:1.02; letter-spacing:-.015em; max-width:12ch}
.hero-sub{margin-top:28px; font-size:clamp(17px,1.35vw,20px); color:rgba(255,255,255,.84); max-width:540px; line-height:1.6}
.hero-checks{margin-top:30px; display:grid; gap:12px}
.hero-checks li{display:flex; align-items:center; gap:12px; font-size:16px; color:rgba(255,255,255,.92)}
.hero-checks li::before{content:""; flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--brass-2); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A978' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.hero-proof{position:relative; display:flex; align-items:center; gap:16px; margin-top:36px; padding-top:26px; max-width:540px}
.hero-proof::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line-l); transform-origin:left}
.avatars{display:flex; flex:0 0 auto}
.avatars img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--navy); margin-left:-10px; background:var(--navy-3)}
.avatars img:first-child{margin-left:0}
.hero-proof p{display:flex; flex-direction:column; gap:2px; font-size:14px; color:rgba(255,255,255,.76); line-height:1.4}
.proof-top{display:flex; align-items:center; gap:10px}
.hero-proof b{color:#fff; font-weight:600}

.eval{position:relative; background:#fff; color:var(--ink); padding:clamp(24px,2.5vw,34px); box-shadow:0 50px 90px -30px rgba(0,0,0,.6)}
.eval::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--brass); transform-origin:left}
.eval-head{margin-bottom:18px}
.eval h2{font-family:var(--serif); font-size:clamp(27px,2.3vw,33px); color:var(--navy); line-height:1.1}
.eval-head p{font-size:15px; color:var(--slate); margin-top:8px; line-height:1.5}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:13px; min-width:0}
.field label{font-size:13px; font-weight:600; color:var(--ink); line-height:1.3}
.field input,.field select,.field textarea{font:inherit; font-size:15px; line-height:1.4; color:var(--ink); background:var(--stone); border:1px solid transparent; border-radius:3px; padding:12px 14px; transition:border-color .2s, background .2s, box-shadow .2s; width:100%}
.field input,.field select{height:47px}
.field ::placeholder{color:#7A8392}
.field textarea{resize:vertical; min-height:74px; display:block}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass); background:#fff; box-shadow:0 0 0 3px rgba(168,132,79,.14)}
.select{position:relative}
.select select{appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer}
.select::after{content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:1.5px solid var(--brass-3); border-bottom:1.5px solid var(--brass-3); transform:rotate(45deg); pointer-events:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--slate); margin:3px 0 16px; line-height:1.45; cursor:pointer}
.check input{margin:2px 0 0; width:16px; height:16px; flex:0 0 auto; accent-color:var(--navy)}
.check a{text-decoration:underline; text-underline-offset:2px}
.check a:hover{color:var(--navy)}
.eval-who{display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.eval-who img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex:0 0 auto; background:var(--stone)}
.eval-who p{font-size:13px; line-height:1.45; color:var(--slate)}
.eval-who b{color:var(--ink); font-weight:600}

/* Secuencia de carga del hero: texto, formulario (1 s), prueba social y abogada */
@keyframes rqUp{from{opacity:0; transform:translate3d(0,18px,0)}to{opacity:1; transform:none}}
@keyframes rqLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rqForm{from{opacity:0; transform:translate3d(0,40px,0)}to{opacity:1; transform:none}}
@keyframes rqPop{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
html.js .hero-kicker{animation:rqUp .8s var(--ease) .05s both}
html.js .hero-kicker::before{animation:rqLine 1.1s var(--ease) .15s both}
html.js .hero-sub{animation:rqUp .9s var(--ease) .75s both}
html.js .hero-checks li{animation:rqUp .7s var(--ease) both}
html.js .hero-checks li:nth-child(1){animation-delay:.9s}
html.js .hero-checks li:nth-child(2){animation-delay:1s}
html.js .hero-checks li:nth-child(3){animation-delay:1.1s}
html.js .eval{animation:rqForm 1.2s cubic-bezier(.2,.75,.15,1) 1s both}
html.js .eval::before{animation:rqLine 1.1s var(--ease-io) 1.55s both}
html.js .hero-proof::before{animation:rqLine 1.2s var(--ease-io) 1.8s both}
html.js .avatars img{animation:rqPop .6s cubic-bezier(.3,1.35,.5,1) both}
html.js .avatars .av-1{animation-delay:2.05s}
html.js .avatars .av-2{animation-delay:2.17s}
html.js .avatars .av-3{animation-delay:2.29s}
html.js .hero-proof p{animation:rqUp .8s var(--ease) 2.4s both}
html.js .eval-who{animation:rqUp .8s var(--ease) 2.9s both}

@media (min-width:1021px) and (max-height:860px){
  .hero-in{padding-top:clamp(40px,5vh,56px); padding-bottom:clamp(48px,6vh,64px); min-height:0}
  .hero h1{font-size:clamp(46px,5.4vw,80px)}
  .hero-kicker{margin-bottom:20px}
  .hero-sub{margin-top:22px}
  .hero-checks{margin-top:24px}
  .hero-proof{margin-top:30px; padding-top:22px}
}
@media (max-width:1020px){
  .hero-in{grid-template-columns:minmax(0,1fr); min-height:0}
  .hero h1{max-width:13ch}
  .hero::after{background:linear-gradient(180deg, rgba(10,19,32,.9), rgba(10,19,32,.78) 60%, rgba(10,19,32,.95))}
  .eval{max-width:640px}
  html.js .eval{animation-delay:.9s}
}
@media (max-width:560px){
  .row2{grid-template-columns:1fr; gap:0}
  .hero-proof{align-items:flex-start}
  .hero-sub{margin-top:22px}
  .hero-checks li{font-size:15.5px; align-items:flex-start}
  .hero-checks li::before{margin-top:2px}
  .eval{padding:24px 20px}
}

/* ---------- Prensa ---------- */
.press{background:var(--stone); border-bottom:1px solid var(--line)}
.press-in{display:flex; align-items:center; gap:40px; min-height:104px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px}
.press-in p{font-size:14px; color:var(--slate); flex:0 0 auto}
.press ul{display:flex; flex:1; align-items:center; justify-content:space-between; gap:20px 36px; flex-wrap:wrap; color:#69727F}
.press li{white-space:nowrap; transition:color .3s}
.press li:hover{color:var(--navy)}
.m-pais{font-family:var(--serif); font-size:24px; letter-spacing:.02em}
.m-exp{font-family:var(--serif-t); font-style:italic; font-size:24px; font-weight:700}
.m-abc{font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:.06em}
.m-cinco{font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:-.02em}
.m-conf{font-family:var(--sans); font-size:18px; font-weight:600; letter-spacing:-.01em}
.m-rtve{font-family:var(--sans); font-size:22px; font-weight:800; letter-spacing:.02em}
@media (max-width:1180px){ .press-in{justify-content:center; text-align:center; gap:16px; padding-top:26px; padding-bottom:26px} .press ul{justify-content:center; flex:0 0 100%; gap:18px 40px} }
@media (max-width:430px){ .press ul{gap:16px 26px} .m-pais,.m-exp{font-size:21px} .m-abc{font-size:24px} .m-cinco{font-size:18px} .m-conf{font-size:16px} .m-rtve{font-size:19px} }

/* Contenedores que dibujan líneas: anulan la aparición por defecto y animan sus hijos */
html.js [data-reveal="draw"]{opacity:1; transform:none}
/* Revelado con cortinilla: el contenedor (sin recorte) es el que se observa y el recorte va en su hijo,
   porque Chromium no da por visible un elemento recortado al 100 % con clip-path */
.mask-in{position:absolute; inset:0; overflow:hidden}
html.js [data-reveal="mask"]{opacity:1; transform:none}
html.js [data-reveal="mask"] .mask-in{clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.77,0,.18,1) var(--reveal-delay,0ms)}
html.js [data-reveal="mask"].is-in .mask-in{clip-path:inset(0 0 0 0)}
html.js [data-reveal="mask"] .mask-in img{transform:scale(1.16); transition:transform 1.9s cubic-bezier(.2,.75,.15,1) var(--reveal-delay,0ms), opacity 1.8s ease}
html.js [data-reveal="mask"].is-in .mask-in img{transform:none}

/* ---------- Cifras (cuentan con una línea que crece) ---------- */
.stats{padding:clamp(60px,7vw,92px) 0 clamp(56px,6vw,84px)}
.stats-in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3.4vw,52px)}
.stat b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(48px,5vw,76px); line-height:1; color:var(--navy); letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:lining-nums}
.stat-line{position:relative; display:block; height:1px; background:var(--line); margin:24px 0 16px}
.stat-line::after{content:""; position:absolute; left:0; right:0; top:-.5px; height:2px; background:var(--brass); transform-origin:left; transition:transform 1.8s cubic-bezier(.33,1,.68,1) .05s}
html.js .stats-in:not(.is-in) .stat-line::after{transform:scaleX(0)}
.stat span{display:block; font-size:15.5px; line-height:1.55; color:var(--slate); max-width:24ch}
@media (max-width:900px){ .stats-in{grid-template-columns:1fr 1fr; row-gap:44px} }
@media (max-width:430px){ .stats-in{column-gap:20px} .stat b{font-size:44px} .stat span{font-size:15px} }

/* ---------- Encabezados de sección ---------- */
.sec-head{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; margin-bottom:clamp(44px,5vw,70px)}
.sec-head h2{font-family:var(--serif); font-size:clamp(36px,4.2vw,60px); line-height:1.06; color:var(--navy); letter-spacing:-.01em; max-width:17ch}
.sec-head p{font-size:17.5px; color:var(--slate); max-width:46ch}
.sec-head.center{grid-template-columns:1fr; text-align:center; justify-items:center; gap:20px}
.sec-head.center h2{max-width:none}
.sec-head.light h2{color:#fff}
.sec-head.light p{color:rgba(255,255,255,.72)}
.sec-head.split{grid-template-columns:1fr auto}
.sec-head.split .link-arrow{margin-bottom:10px}
@media (max-width:860px){ .sec-head,.sec-head.split{grid-template-columns:1fr; gap:18px} .sec-head.split .link-arrow{justify-self:start; margin-bottom:0} }

/* ---------- Áreas (líneas de latón que se dibujan) ---------- */
.areas{padding:clamp(72px,8.5vw,120px) 0 var(--sec); border-top:1px solid var(--line)}
.areas-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.area{position:relative; display:flex; flex-direction:column; padding:34px 28px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .45s var(--ease)}
@supports (grid-template-rows:subgrid){ .area{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0} }
.area::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:1px; background:var(--brass); transform-origin:left;
  transition-property:transform, height; transition-duration:1.1s, .3s; transition-timing-function:var(--ease-io), var(--ease); transition-delay:calc(var(--i,0) * 90ms + 120ms), 0s}
html.js .areas-grid:not(.is-in) .area::before{transform:scaleX(0)}
.area:hover{background:var(--stone)}
.area:hover::before{height:2px}
.area > svg{width:42px; height:42px; fill:none; stroke:var(--brass-3); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:26px}
.area > svg *{stroke-dasharray:1 1; stroke-dashoffset:0; transition:stroke-dashoffset 1.5s var(--ease-io) calc(var(--i,0) * 90ms + 350ms)}
html.js .areas-grid:not(.is-in) .area > svg *{stroke-dashoffset:1}
.area:hover > svg *{animation:rqDraw 1.1s var(--ease-io)}
@keyframes rqDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.area h3{font-family:var(--serif); font-size:25px; line-height:1.15; color:var(--navy)}
.area p{margin-top:12px; font-size:15.5px; color:var(--slate); line-height:1.6; flex:1}
.area .more{display:inline-flex; align-items:center; gap:8px; align-self:end; justify-self:start; margin-top:22px; font-size:14px; font-weight:600; color:var(--navy); opacity:.6; transition:opacity .3s}
.area .more svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .4s var(--ease)}
.area:hover .more{opacity:1}
.area:hover .more svg{transform:translateX(4px)}
@supports not (grid-template-rows:subgrid){ .area .more{align-self:flex-start} }
@media (max-width:1100px){ .areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .areas-grid{grid-template-columns:1fr}
  .area{display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto; grid-row:auto; column-gap:16px; padding:24px 20px 22px}
  .area > svg{grid-row:1 / span 3; width:38px; height:38px; margin:2px 0 0}
  .area > :not(svg){grid-column:2}
  .area h3{font-size:22px}
  .area p{margin-top:8px; font-size:15px}
  .area .more{margin-top:14px}
}

/* ---------- Por qué nosotros ---------- */
.why{background:var(--stone); padding:var(--sec) 0}
.why-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center}
.why-media{position:relative; margin:0}
.why-ph{position:relative; aspect-ratio:4/5}
.why-ph .mask-in{background:var(--stone-2)}
.why-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 1.8s ease}
.why-ph .ph-a{object-position:center 30%}
.why-ph .ph-b{object-position:center 45%; opacity:0}
.why-ph.is-alt .ph-a{opacity:0}
.why-ph.is-alt .ph-b{opacity:1}
.why-quote{position:absolute; right:-28px; bottom:40px; margin:0; max-width:350px; background:var(--navy); color:#fff; padding:28px 30px 24px; border-left:3px solid var(--brass); box-shadow:0 30px 60px -30px rgba(10,19,32,.6)}
.why-quote p{font-family:var(--serif-t); font-style:italic; font-size:19px; line-height:1.45}
.sig{width:172px; height:57px; margin:10px 0 -2px -10px; fill:none; stroke:var(--brass-2); stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round}
.sig path{stroke-dasharray:1 1; stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--ease-io) .95s}
.sig path:nth-child(2){transition-duration:2s; transition-delay:1.55s}
.sig path:nth-child(3){transition-duration:.7s; transition-delay:3.45s}
html.js .why-quote:not(.is-in) .sig path{stroke-dashoffset:1}
.why-quote cite{display:block; margin-top:6px; font-style:normal; font-size:13.5px; color:var(--brass-2)}
.why-copy h2{font-family:var(--serif); font-size:clamp(36px,4vw,56px); line-height:1.06; color:var(--navy); max-width:15ch; margin-bottom:34px}
.why-list li{position:relative; padding:22px 0 22px 34px}
.why-list li::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(14,26,43,.16); transform-origin:left; transition:transform 1s var(--ease-io) calc(var(--i,0) * 140ms)}
.why-list li::before{content:""; position:absolute; left:0; top:33px; width:16px; height:1px; background:var(--brass); transform-origin:left; transition:transform .7s var(--ease) calc(var(--i,0) * 140ms + 450ms)}
.why-list li > *{transition:opacity .8s var(--ease) calc(var(--i,0) * 140ms + 250ms), transform .8s var(--ease) calc(var(--i,0) * 140ms + 250ms)}
html.js .why-list:not(.is-in) li::after,html.js .why-list:not(.is-in) li::before{transform:scaleX(0)}
html.js .why-list:not(.is-in) li > *{opacity:0; transform:translate3d(0,10px,0)}
.why-list h3{font-family:var(--serif); font-size:24px; color:var(--navy); line-height:1.2}
.why-list p{margin-top:6px; font-size:16px; color:var(--slate)}
@media (max-width:960px){
  .why-in{grid-template-columns:minmax(0,1fr)}
  .why-media{max-width:640px}
  .why-ph{aspect-ratio:4/4.2}
  .why-quote{right:16px; left:16px; bottom:16px; max-width:none}
}
@media (max-width:560px){ .why-ph{aspect-ratio:4/5} .why-quote{padding:22px 22px 18px} .why-quote p{font-size:17.5px} .sig{width:140px; height:47px} }

/* ---------- Proceso ---------- */
.process{padding:var(--sec) 0}
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:28px}
.steps::before,.steps::after{content:""; position:absolute; top:29px; left:29px; right:calc((100% - 84px) / 4 - 29px); height:1px}
.steps::before{background:var(--line)}
.steps::after{background:var(--brass); transform-origin:left; transition:transform 1.7s var(--ease-io) .2s}
html.js .steps:not(.is-in)::after{transform:scaleX(0)}
.steps li{position:relative; display:flex; flex-direction:column}
@supports (grid-template-rows:subgrid){ .steps li{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0} }
.step-n{position:relative; z-index:1; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--navy); border:1px solid var(--navy); font-family:var(--serif); font-size:24px; color:#fff; transition:background .6s var(--ease), color .6s, border-color .6s; transition-delay:calc(var(--i,0) * 540ms + 200ms)}
html.js .steps:not(.is-in) .step-n{background:#fff; color:var(--navy); border-color:var(--brass)}
.steps em{display:block; margin:24px 0 8px; font-style:normal; font-size:13.5px; font-weight:600; color:var(--brass-3); letter-spacing:.02em}
.steps h3{font-family:var(--serif); font-size:24px; line-height:1.15; color:var(--navy)}
.steps p{margin-top:10px; font-size:15.5px; color:var(--slate); max-width:30ch}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; margin-bottom:-48px} .steps li{margin-bottom:48px} .steps::before,.steps::after{display:none} }
@media (max-width:560px){
  .steps{grid-template-columns:1fr; row-gap:34px; margin-bottom:0}
  .steps li{margin-bottom:0}
  .steps li{display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto; grid-row:auto; column-gap:20px; align-content:start}
  .step-n{grid-row:1 / span 3}
  .steps li > :not(.step-n){grid-column:2}
  .steps em{margin:4px 0 6px}
  .steps h3{font-size:22px}
  .steps li:not(:last-child)::after{content:""; position:absolute; left:29px; top:58px; bottom:-34px; width:1px; background:var(--brass); transform-origin:top; transition:transform .5s var(--ease-io); transition-delay:calc(var(--i,0) * 540ms + 300ms)}
  html.js .steps:not(.is-in) li::after{transform:scaleY(0)}
}

/* ---------- Casos de éxito (aparecen sellados) ---------- */
.results{position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:var(--sec) 0}
.res-sect{position:absolute; right:-3vw; top:-4%; pointer-events:none; font-family:var(--serif); font-size:clamp(380px,46vw,660px); line-height:1; color:rgba(201,169,120,.055)}
.res-sect > span{display:block; will-change:transform}
.results .wrap{position:relative; z-index:1}
.res-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; row-gap:0; padding-top:34px; margin-bottom:-64px}
.res{position:relative; display:flex; flex-direction:column; margin-bottom:64px; padding:clamp(28px,3vw,38px) clamp(24px,3vw,40px) 26px; border:1px solid var(--line-l); border-top-color:rgba(201,169,120,.55); transition:border-color .4s, background .4s}
@supports (grid-template-rows:subgrid){ .res{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0} }
.res::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(280px circle at var(--sx,50%) var(--sy,0%), rgba(201,169,120,.12), transparent 70%); opacity:0; transition:opacity .4s}
.res:hover{border-color:rgba(255,255,255,.24); border-top-color:var(--brass-2)}
.res:hover::after{opacity:1}
.res-area{font-size:14px; font-weight:600; color:var(--brass-2); letter-spacing:.02em}
.res-fig{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.7vw,54px); line-height:1.04; margin:16px 0 14px; color:#fff; text-wrap:balance}
.res p{font-size:16px; color:rgba(255,255,255,.78); max-width:44ch}
.res-exp{display:flex; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; align-self:end; margin-top:24px; padding-top:16px; border-top:1px solid var(--line-l); font-size:13.5px; color:rgba(255,255,255,.58)}
.stamp{position:absolute; top:-38px; right:22px; width:86px; height:86px; color:var(--brass-2); background:var(--navy); border-radius:50%; transform:rotate(-12deg); pointer-events:none; overflow:visible}
.stamp text{font-family:var(--serif); font-size:19px; fill:currentColor}
@keyframes rqStamp{
  0%{opacity:0; transform:rotate(-26deg) scale(1.9)}
  55%{opacity:1; transform:rotate(-10deg) scale(.9)}
  78%{transform:rotate(-12.5deg) scale(1.04)}
  100%{opacity:1; transform:rotate(-12deg) scale(1)}
}
html.js .res[data-reveal] .stamp{opacity:0}
html.js .res[data-reveal].is-in .stamp{animation:rqStamp .75s cubic-bezier(.2,.8,.3,1) calc(var(--reveal-delay,0ms) + 650ms) both}
.res-foot{display:flex; align-items:center; justify-content:space-between; gap:18px 30px; flex-wrap:wrap; margin-top:44px}
.res-note{font-size:13.5px; color:rgba(255,255,255,.55)}
@media (max-width:700px){ .res-grid{grid-template-columns:minmax(0,1fr); margin-bottom:-52px} .res{margin-bottom:52px; padding:30px 22px 22px} .stamp{width:72px; height:72px; top:-32px; right:16px} }

/* ---------- Equipo ---------- */
.team{padding:var(--sec) 0}
.team-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,2vw,28px); row-gap:0}
.person{display:flex; flex-direction:column; color:inherit}
@supports (grid-template-rows:subgrid){ .person{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0} }
.person .ph{position:relative; aspect-ratio:4/5}
.person .mask-in{background:var(--stone)}
.person .ph::before{content:""; position:absolute; left:0; right:0; bottom:0; z-index:2; height:2px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease)}
.person:hover .ph::before{transform:none}
.person img{width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(.94) contrast(1.02); transition:transform 1.2s var(--ease), filter .6s}
.person:hover img{transform:scale(1.045)}
html.js .person:hover .ph.is-in .mask-in img{transform:scale(1.045); transition:transform 1.2s var(--ease)}
.person h3{font-family:var(--serif); font-size:24px; line-height:1.2; color:var(--navy); margin-top:22px; transition:color .3s}
.person:hover h3{color:var(--brass-3)}
.person p{font-size:15px; line-height:1.5; color:var(--slate); margin-top:6px}
.person small{display:block; font-size:13px; font-weight:500; color:var(--brass-3); margin-top:8px; letter-spacing:.02em}
@media (max-width:960px){ .team-grid{grid-template-columns:1fr 1fr; margin-bottom:-44px} .person{margin-bottom:44px} }
@media (max-width:560px){ .team-grid{column-gap:14px; margin-bottom:-32px} .person{margin-bottom:32px} .person h3{font-size:19px; margin-top:14px} .person p{font-size:14px} .person small{font-size:12.5px} }

/* ---------- Testimonios (se alternan con fundido) ---------- */
.reviews{background:var(--stone); padding:var(--sec) 0}
.rev-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,96px); align-items:center}
.rev-side h2{font-family:var(--serif); font-size:clamp(34px,4vw,56px); line-height:1.06; color:var(--navy); max-width:14ch}
.rev-score{display:flex; align-items:center; gap:18px; margin:34px 0 30px; padding:24px 0; border-top:1px solid rgba(14,26,43,.16); border-bottom:1px solid rgba(14,26,43,.16)}
.rev-score > b{font-family:var(--serif); font-weight:400; font-size:72px; line-height:1; color:var(--navy)}
.rev-score p{font-size:14.5px; color:var(--slate); margin-top:4px}
.rev-score .stars{font-size:20px}
.rev-box{position:relative; background:#fff; padding:clamp(30px,4vw,56px); box-shadow:0 40px 80px -50px rgba(14,26,43,.4)}
.rev-box::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--brass)}
.rev-mark{width:44px; height:33px; fill:var(--brass-2); margin-bottom:26px}
.rev-stage{display:grid}
.rev{grid-area:1 / 1; margin:0; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s}
.rev.is-active{opacity:1; visibility:visible; transition:opacity .85s ease .4s, visibility 0s}
html:not(.js) .rev:first-child{opacity:1; visibility:visible}
.rev blockquote{margin:0; font-family:var(--serif-t); font-size:clamp(20px,1.85vw,26px); line-height:1.5; color:var(--ink); transform:translate3d(0,10px,0); transition:transform 1.2s var(--ease) .4s}
.rev.is-active blockquote{transform:none}
.rev figcaption{display:flex; align-items:center; gap:14px; margin-top:30px}
.rev figcaption > span:last-child{display:flex; flex-direction:column}
.ini{display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--navy); color:var(--brass-2); font-family:var(--serif); font-size:17px}
.rev figcaption b{font-weight:600; font-size:15.5px; line-height:1.3}
.rev figcaption small{font-size:14px; color:var(--slate)}
.rev-nav{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.rev-dots{display:flex; gap:6px}
.rev-dots button{all:unset; box-sizing:border-box; display:flex; align-items:center; width:42px; height:30px; cursor:pointer}
.rev-dots i{position:relative; display:block; width:100%; height:2px; background:var(--line); overflow:hidden}
.rev-dots i::after{content:""; position:absolute; inset:0; background:var(--brass); transform:scaleX(0); transform-origin:left}
.rev-dots button.is-active i::after{animation:rqBar var(--slider-interval,7000ms) linear forwards}
.rev-dots button:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@keyframes rqBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rev-arrows{display:flex; gap:8px}
.rev-arrows button{all:unset; box-sizing:border-box; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(14,26,43,.2); color:var(--navy); cursor:pointer; transition:background .3s, color .3s, border-color .3s}
.rev-arrows button:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.rev-arrows button:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.rev-arrows svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8}
@media (max-width:980px){ .rev-in{grid-template-columns:minmax(0,1fr)} .rev-side h2{max-width:18ch} .rev-score{margin:26px 0 22px} }
@media (max-width:560px){ .rev-box{padding:28px 22px} .rev-nav{gap:12px} .rev-dots{gap:4px} .rev-dots button{width:24px; height:44px} .rev-arrows button{width:44px; height:44px} .rev-score > b{font-size:60px} .rev figcaption{margin-top:24px} }

/* ---------- Preguntas frecuentes ---------- */
.faq{padding:var(--sec) 0}
.faq-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,100px); align-items:start}
.faq-side{position:sticky; top:120px}
.faq-side h2{font-family:var(--serif); font-size:clamp(36px,4vw,56px); line-height:1.05; color:var(--navy)}
.faq-side > p{margin-top:16px; color:var(--slate)}
.faq-card{margin-top:34px; padding:28px; background:var(--stone); border-left:3px solid var(--brass)}
.faq-who{display:flex; align-items:flex-start; gap:16px; margin-bottom:22px}
.faq-who img{width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:50% 18%; flex:0 0 auto; background:var(--stone-2)}
.faq-who b{display:block; font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.2; color:var(--navy)}
.faq-who span{display:block; margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--slate)}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; font-family:var(--serif); font-size:clamp(20px,1.8vw,24px); line-height:1.25; color:var(--navy); cursor:pointer; transition:color .3s}
.qa button:hover{color:var(--brass-3)}
.qa button:focus-visible{outline:2px solid var(--brass); outline-offset:4px}
.qa i{position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--brass); transition:background .3s, border-color .3s}
.qa i::before,.qa i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--brass-3); transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .3s}
.qa i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.is-open i{background:var(--navy); border-color:var(--navy)}
.qa.is-open i::before,.qa.is-open i::after{background:#fff}
.qa.is-open i::after{transform:translate(-50%,-50%) rotate(0)}
.qa-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.qa-a p{padding:0 50px 26px 0; color:var(--slate); font-size:16.5px; opacity:0; transform:translate3d(0,-6px,0); transition:opacity .4s, transform .5s var(--ease)}
.qa.is-open .qa-a p{opacity:1; transform:none; transition-delay:.1s}
@media (max-width:900px){ .faq-in{grid-template-columns:minmax(0,1fr)} .faq-side{position:static} }
@media (max-width:560px){ .qa button{padding:22px 0} .qa-a p{padding-right:0; font-size:16px} .faq-card{padding:22px} .faq-card .btn{width:100%; white-space:normal; text-align:center; line-height:1.3} }

/* ---------- Llamada final ---------- */
.final{position:relative; color:#fff; overflow:hidden; background:var(--navy-2)}
.final-bg{position:absolute; inset:0; overflow:hidden}
.final-bg img{position:absolute; left:0; top:-12%; width:100%; height:124%; object-fit:cover; filter:saturate(.8); will-change:transform}
.final::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,19,32,.95) 20%, rgba(10,19,32,.74) 62%, rgba(10,19,32,.55))}
.final-in{position:relative; z-index:2; padding-top:clamp(90px,11vw,160px); padding-bottom:clamp(90px,11vw,160px)}
.final h2{font-family:var(--serif); font-size:clamp(40px,5.4vw,78px); line-height:1.03; max-width:14ch}
.final-in > p{margin-top:24px; font-size:clamp(17px,1.4vw,19px); color:rgba(255,255,255,.84); max-width:520px}
.final-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}
.final-meta{display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:36px; font-size:14.5px; color:rgba(255,255,255,.72)}
.final-meta li{display:flex; align-items:center; gap:10px}
.final-meta svg{width:17px; height:17px; flex:0 0 auto; fill:none; stroke:var(--brass-2); stroke-width:1.6}
@media (max-width:560px){ .final::after{background:linear-gradient(180deg, rgba(10,19,32,.9), rgba(10,19,32,.82))} .final-cta .btn{flex:1 1 100%} .final-meta li{align-items:flex-start} .final-meta svg{margin-top:3px} }

/* ---------- Pie ---------- */
.ft{background:var(--navy-2); color:rgba(255,255,255,.7); font-size:15px; padding:clamp(60px,7vw,90px) 0 30px}
.ft-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-l)}
.ft-brand p{margin-top:22px; max-width:34ch; font-size:14.5px; line-height:1.6}
.ft-social{display:flex; gap:10px; margin-top:24px}
.ft-social a{display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line-l); border-radius:50%; transition:border-color .3s, background .3s, color .3s}
.ft-social a:hover{border-color:var(--brass-2); color:#fff; background:rgba(201,169,120,.1)}
.ft-social svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ft-col{padding-top:12px}
.ft h4{font-family:var(--serif); font-size:20px; line-height:1.2; color:#fff; margin-bottom:18px}
.ft ul{display:grid; gap:10px}
.ft a{transition:color .2s}
.ft a:hover{color:#fff}
.ft-contact p{margin-bottom:14px; line-height:1.6}
.ft-contact .hours{font-size:14px; color:rgba(255,255,255,.55)}
.ft-bot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 30px; padding-top:26px; font-size:13.5px; color:rgba(255,255,255,.55)}
.ft-bot nav{display:flex; gap:22px}
@media (max-width:980px){ .ft-top{grid-template-columns:1fr 1fr; row-gap:44px} .ft-col{padding-top:0} }
@media (max-width:560px){ .ft-top{grid-template-columns:1fr 1fr; column-gap:24px} .ft-brand,.ft-contact{grid-column:1 / -1} .ft-bot{flex-direction:column; align-items:flex-start} }

:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

@media (max-width:560px){ body{font-size:16px} .sec-head p{font-size:16.5px} }

/* ---------- Movimiento reducido: todo visible y estático ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero *, .hero *::before, .hero *::after, .eval::before{animation:none !important}
  .hero-bg img{animation:none}
  .stat-line::after, .area::before, .area > svg *, .why-list li::before, .why-list li::after, .why-list li > *, .sig path, .steps::after, .step-n, .steps li::after{transition:none !important}
  .area:hover > svg *{animation:none}
  html.js .res[data-reveal] .stamp{opacity:1; animation:none !important}
  html.js [data-reveal="mask"] .mask-in{clip-path:none; transition:none}
  html.js [data-reveal="mask"] .mask-in img{transform:none; transition:none}
  .rev, .rev.is-active, .rev blockquote{transition:none}
  .rev-dots button.is-active i::after{animation:none; transform:none}
  .link-arrow:hover::before{animation:none}
}
/* Cabecera en pantallas anchas: menú con "Honorarios" sin desbordar el contenedor */
@media (min-width:1381px){
  .hd-in{gap:14px}
  .nav > ul > li > a{padding:12px 8px; font-size:14.5px}
  .nav > ul > li > a::after{left:8px; right:8px}
  .nav .chev{flex:none}
  .hd .btn{padding:14px 18px}
}