/* Grupo REU Law Firm — colores del quetzal */
:root{
  --selva:#0e3b2c; --selva-2:#0a2d21; --jade:#3f9a6a; --pluma:#9ad7ad;
  --papel:#f7f2e8; --papel-2:#efe7d7; --tinta:#15201b; --gris:#56625b;
  --rojo:#b8321f; --rojo-2:#9c2817;
  --linea:rgba(21,32,27,.13); --linea-c:rgba(247,242,232,.16);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ---------- barra de utilidades ---------- */
.util{background:var(--selva-2);color:rgba(247,242,232,.72);font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}
.util-d{display:flex;gap:18px;align-items:center}
.util a{text-decoration:none;color:var(--papel)}
.idioma{border:1px solid var(--linea-c);padding:3px 10px;border-radius:99px}
.idioma:hover{background:var(--papel);color:var(--selva)!important}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.cab.on{border-bottom-color:var(--linea);box-shadow:0 6px 24px -18px rgba(14,59,44,.5)}
.cab .wrap{display:flex;align-items:center;gap:28px;height:78px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.pluma-mini{width:30px;height:54px;flex:none}
.mt{display:flex;flex-direction:column;line-height:1.02}
.mt b{font-family:var(--serif);font-weight:500;font-size:25px;letter-spacing:-.01em;color:var(--selva)}
.mt small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.menu{display:flex;gap:28px}
.menu a{text-decoration:none;font-size:15px;color:var(--gris);font-weight:500;transition:color .2s}
.menu a:hover{color:var(--selva)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-2)}
.btn-verde{background:var(--selva);color:var(--papel)}
.btn-verde:hover{background:var(--tinta)}
.btn-claro{background:var(--papel);color:var(--selva)}
.btn-claro:hover{background:#fff}
.btn-linea{border-color:rgba(247,242,232,.45);color:var(--papel)}
.btn-linea:hover{border-color:var(--papel);background:rgba(247,242,232,.08)}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;background:var(--selva);color:var(--papel);
  padding:clamp(80px,12vw,150px) 0 clamp(70px,9vw,110px);isolation:isolate}
.portada::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(60% 70% at 85% 30%,rgba(63,154,106,.35),transparent 70%),
             radial-gradient(40% 50% at 10% 100%,rgba(10,45,33,.9),transparent 70%)}
.pluma-grande{position:absolute;z-index:-1;right:max(-80px,calc(50% - 760px));top:-30px;
  height:calc(100% + 60px);width:auto;overflow:visible}
.kicker{margin:0 0 22px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--pluma);font-weight:600}
.portada h1{font-family:var(--serif);font-weight:400;margin:0;max-width:14ch;
  font-size:clamp(46px,7.4vw,98px);line-height:1;letter-spacing:-.025em}
.portada h1 em{font-style:italic;color:var(--pluma)}
.lead{margin:28px 0 0;max-width:48ch;font-size:clamp(17px,1.6vw,20px);color:rgba(247,242,232,.8)}
.acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.sellos{list-style:none;padding:0;margin:48px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;
  font-size:14px;color:rgba(247,242,232,.75)}
.sellos li{display:flex;align-items:center;gap:9px}
.sellos li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rojo)}

/* la pluma aparece y se mece despacio */
.pluma-grande .pl1,.pluma-grande .pl2{transform-box:fill-box;transform-origin:10% 100%}
.pluma-grande .pl1{animation:entra 1.6s cubic-bezier(.2,.7,.2,1) both, mece 9s ease-in-out 1.6s infinite}
.pluma-grande .pl2{animation:entra 1.9s cubic-bezier(.2,.7,.2,1) .15s both, mece 11s ease-in-out 2s infinite reverse}
@keyframes entra{from{opacity:0;transform:translateY(40px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes mece{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.4deg)}}

/* ---------- encabezados de seccion ---------- */
.kick{margin:0 0 14px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--rojo)}
h2{font-family:var(--serif);font-weight:400;margin:0;font-size:clamp(32px,4.4vw,54px);line-height:1.06;letter-spacing:-.02em;max-width:20ch}

/* ---------- servicios ---------- */
.servicios{padding:clamp(80px,10vw,130px) 0}
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(40px,6vw,90px);margin-top:56px}
.col-t{font-family:var(--serif);font-weight:500;font-style:italic;font-size:26px;margin:0 0 6px;color:var(--selva)}
.lista{list-style:none;padding:0;margin:0}
.lista li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--linea)}
.lista .n{font-family:var(--serif);font-size:15px;color:var(--jade);padding-top:3px;font-variant-numeric:tabular-nums}
.lista b{font-weight:600;font-size:18px}
.lista p{margin:3px 0 0;color:var(--gris);font-size:15.5px}
.servicios .cols>div:first-child .lista{columns:2;column-gap:36px}
.servicios .cols>div:first-child .lista li{break-inside:avoid}

/* ---------- cita ---------- */
.cita{background:var(--papel-2);padding:clamp(70px,9vw,120px) 0;border-block:1px solid var(--linea)}
blockquote{margin:0 auto;max-width:22ch;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.6vw,60px);line-height:1.12;letter-spacing:-.02em;color:var(--selva)}
blockquote em{color:var(--rojo)}
blockquote::before{content:"“";display:block;font-size:1.6em;line-height:.6;color:var(--jade);margin-bottom:.15em}

/* ---------- nosotros ---------- */
.nosotros{padding:clamp(80px,10vw,130px) 0}
.nosotros .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,7vw,110px);align-items:start}
.hist p{margin:0 0 18px;color:var(--gris)}
.hist .grande{font-family:var(--serif);font-size:clamp(22px,2.2vw,27px);line-height:1.45;color:var(--tinta)}
.gente{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.per{border-top:2px solid var(--selva);padding-top:18px}
.mono{width:64px;height:64px;border-radius:50%;background:var(--selva);color:var(--pluma);
  display:grid;place-items:center;font-family:var(--serif);font-size:24px;font-style:italic;margin-bottom:16px}
.per:first-child .mono{background:var(--rojo);color:#fff}
.per h3{margin:0;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2}
.per p{margin:6px 0 0;font-size:14.5px;color:var(--gris)}

/* ---------- recursos ---------- */
.recursos{background:var(--selva);color:var(--papel);padding:clamp(80px,10vw,130px) 0}
.recursos .kick{color:var(--pluma)}
.r-sub{max-width:56ch;color:rgba(247,242,232,.72);margin:18px 0 0}
.recs{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px}
.rec{grid-column:span 2;display:flex;flex-direction:column;gap:10px;padding:26px;text-decoration:none;
  border:1px solid var(--linea-c);border-radius:18px;background:rgba(247,242,232,.04);
  transition:background .25s,border-color .25s,transform .25s}
.rec:nth-child(4),.rec:nth-child(5){grid-column:span 3}
.rec:hover{background:rgba(247,242,232,.09);border-color:rgba(154,215,173,.5);transform:translateY(-3px)}
.rec svg{width:34px;height:34px;fill:none;stroke:var(--pluma);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.rec h3{margin:0;font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2}
.rec p{margin:0;color:rgba(247,242,232,.72);font-size:15.5px;flex:1}
.ir{margin-top:8px;font-weight:600;font-size:14.5px;color:var(--pluma);display:inline-flex;gap:6px}
.ir i{font-style:normal;transition:transform .25s}
.rec:hover .ir i{transform:translate(2px,-2px)}

/* ---------- contacto ---------- */
.contacto{padding:clamp(80px,10vw,130px) 0}
.contacto .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:stretch}
.c-sub{color:var(--gris);margin:18px 0 0;max-width:44ch}
.datos{margin:34px 0 0}
.datos div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--linea)}
.datos dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600;padding-top:2px}
.datos dd{margin:0}
.datos a{color:var(--selva);font-weight:500;text-underline-offset:3px}
.mapa{border-radius:22px;overflow:hidden;border:1px solid var(--linea);min-height:420px;background:var(--papel-2)}
.mapa iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:saturate(.75)}

/* ---------- pie ---------- */
.pie{background:var(--selva-2);color:rgba(247,242,232,.7);padding:56px 0 34px;font-size:14.5px}
.pie-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:28px;border-bottom:1px solid var(--linea-c)}
.marca-pie{margin-right:0}
.marca-pie .mt b{color:var(--papel)}
.marca-pie .mt small{color:rgba(247,242,232,.55)}
.pie nav,.redes{display:flex;gap:22px}
.pie a{text-decoration:none}
.pie nav a:hover,.redes a:hover,.copy a:hover{color:var(--papel)}
.legal{margin:26px 0 8px;max-width:80ch;font-size:13px;color:rgba(247,242,232,.55)}
.copy{margin:0;font-size:13px;color:rgba(247,242,232,.5)}

/* ---------- WhatsApp flotante ---------- */
.wa-flot{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#0b2e17;display:grid;place-items:center;box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
  transition:transform .2s}
.wa-flot:hover{transform:scale(1.06)}
.wa-flot svg{width:29px;height:29px}

/* ---------- responsivo ---------- */
@media(max-width:980px){
  .menu{display:none}
  .cols,.nosotros .wrap,.contacto .wrap{grid-template-columns:1fr}
  .gente{grid-template-columns:1fr 1fr 1fr}
  .recs{grid-template-columns:1fr 1fr}
  .rec,.rec:nth-child(4),.rec:nth-child(5){grid-column:span 1}
  .rec:nth-child(5){grid-column:span 2}
  .pluma-grande{opacity:.42;right:-120px}
}
@media(max-width:640px){
  body{font-size:16px}
  .util .wrap>span:first-child{display:none}
  .util .wrap{justify-content:flex-end}
  .cab .wrap{height:68px;gap:14px}
  .cab .btn{padding:10px 15px;font-size:13.5px}
  .mt b{font-size:21px}
  .mt small{font-size:9.5px}
  .servicios .cols>div:first-child .lista{columns:1}
  .gente{grid-template-columns:1fr}
  .recs{grid-template-columns:1fr}
  .rec:nth-child(5){grid-column:span 1}
  .datos div{grid-template-columns:1fr;gap:4px}
  .pluma-grande{opacity:.28;right:-170px}
  .acc .btn{width:100%}
}
@media(max-width:400px){
  .cab .btn{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pluma-grande .pl1,.pluma-grande .pl2{animation:none}
}

/* ---------- franja de urgencia ---------- */
.urgente{background:var(--rojo);color:#fff}
.urgente .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;flex-wrap:wrap}
.urgente p{margin:0;font-size:16.5px}
.urgente b{font-weight:600}
.urgente .btn{background:#fff;color:var(--rojo);font-variant-numeric:tabular-nums}
.urgente .btn:hover{background:var(--papel)}
.sellos li:first-child{color:var(--papel);font-weight:600}
@media(max-width:640px){.urgente .btn{width:100%}}

/* ---------- solo inmigracion: una lista en tres columnas ---------- */
.lista-sola{columns:3;column-gap:40px;margin-top:52px}
.lista-sola li{break-inside:avoid}
@media(max-width:980px){.lista-sola{columns:2}}
@media(max-width:640px){.lista-sola{columns:1}}

/* ---------- precio de la consulta ---------- */
.precio{margin:30px 0 0;max-width:52ch;font-size:16px;color:rgba(247,242,232,.8);
  border-left:3px solid var(--rojo);padding-left:14px}
.precio b{color:var(--papel);font-weight:600}
.datos .precio-dd b{font-weight:600}