/* ============================================================================
   TAX SOLUTIONS - SMART TAXES · base.css (V3 "VERDE ROLEX + ORO", orden 0827-b)
   Sistema compartido de las 10 paginas. Mundo: despacho fiscal de Miami en
   estudio blanco frio + hero de presencia verde Rolex. Dwell-luxury.
   Componentes comunes SIEMPRE aqui (ley 0704-j 9a).
   LEY 0827-b: display SIEMPRE pulcra (cero filtros SVG en texto, cero textura
   estampada); presencia = tamano + oro + tracking.
   ========================================================================== */

/* ---------- fuentes locales ---------- */
@font-face{
  font-family:'Anton';
  src:url('/assets/fonts/anton-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

/* ---------- tokens (0827-a: superficies BLANCO frio, jamas crema) ---------- */
:root{
  --ink:#16231C;
  --ink-2:#141F19;
  --ink-soft:#22332A;
  --ink-footer:#121B16;
  --ink-display:#1E4034;
  --surface:#FFFFFF;
  --surface-2:#F5F7F6;
  --line-cold:#E4E9E6;
  --accent:#AA8445;
  --gold-2:#D8B469;
  --gold-3:#F4D88A;
  --emerald:#21865C;
  /* T12 (V3): el verde chillon #2FBB84 MURIO en todo el sitio; techo de
     saturacion = #21865C, familia profunda #1E4034 para superficies */
  --emerald-2:#21865C;
  --emerald-deep:#1E4034;
  --muted-dark:#9BA89D;
  --muted-light:#66706A;
  --hairline-dark:rgba(170,132,69,.35);
  --hairline-light:rgba(22,35,28,.12);
  --disp:'Anton','Arial Narrow',Impact,sans-serif;
  --ui:'Manrope',system-ui,sans-serif;
  --ease-house:cubic-bezier(.16,1,.3,1);
  --wrap:min(1720px,94vw);
  --pad-x:clamp(1rem,2.2vw,2.6rem);
  --sec-pad:clamp(3.5rem,5vw,6rem);
  --nav-inset:3%;
}

/* el display V3: Anton MAYUSCULAS LIMPIA Y NITIDA (T2/0827-b: la textura
   "peluda" del filtro stamp esta RECHAZADA por el dueño; pulcra, imponente) */
.disp{
  font-family:var(--disp);font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{
  font-family:var(--ui);
  font-weight:400;
  color:var(--ink);
  background:var(--surface);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* 0827-b: optimizeLegibility SOLO en display (en body cambia metricas de
   TODO el texto y mueve layouts ajenos; la ley pide display pulcra) */
.cta-h2,.foot-bleed span,.loader-sum,.mobile-menu a.mm-link{text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
strong{font-weight:700}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

::selection{background:var(--accent);color:#FFFFFF}

/* ---------- utilidades del sistema ---------- */
.wrap{width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}

.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ui);font-weight:800;
  font-size:clamp(.68rem,.85vw,.8rem);
  letter-spacing:.14em;text-transform:uppercase;
}
.kicker .up{width:.95em;height:.95em;flex:none}
.kicker .up path{stroke:var(--emerald);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* T17 (V4): TODA keyword lleva el MISMO gradiente dorado LUMINOSO del titular
   hero (luz arriba -> oro viejo abajo). El oro plano/marron apagado MURIO en
   las 10 paginas; .kw-deep queda como alias del mismo oro vivo.
   inline-block: en un span inline el fondo cubre la CAJA DE LINEA (mas alta
   que las mayusculas) y los glifos muestrean solo la mitad oscura del
   gradiente - inline-block abraza la caja del glifo, como el .h1-line del hero. */
.kw,.kw-deep{
  display:inline-block;
  background:linear-gradient(180deg,#F8E7AE 0%,var(--gold-3) 34%,var(--gold-2) 68%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* con background-clip:text Chrome pinta el text-shadow SOBRE el relleno
     recortado y ensucia el oro ~50% (causa raiz del "marron apagado" en los
     banners con sombra heredada): la keyword va SIN sombra, pulcra */
  text-shadow:none;
}

/* la doble regla contable: el tic firma del sitio (se enciende con .is-on) */
.tally{position:relative;display:block;height:8px;width:100%}
.tally::before,.tally::after{
  content:"";position:absolute;left:0;right:0;background:var(--accent);
  transform-origin:left center;
  transition:transform .24s var(--ease-house);
}
.tally::before{top:0;height:1px}
.tally::after{top:5px;height:2px;transition-delay:.06s}
.tally.is-on::before,.tally.is-on::after{transform:scaleX(1)}

/* mascaras de linea para titulares.
   F5 v3: headroom .14em (padding compensado con margen negativo, layout
   NET-CERO) - sin el, el overflow:hidden amputaba la virgulilla de la Ñ y
   las tildes altas de Anton ("DUEÑOS" se leia "DUENOS", familia del caso
   REMODELAMO o3). El estado inicial del mask-rise sube a 120% (main/interior)
   para que ningun diacritico asome por la ventana ampliada. */
.hl{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.hl-in{display:inline-block;will-change:transform}

/* numeros tabulares */
.tnum{font-variant-numeric:tabular-nums}

/* iconos line-art (oro monocromo, jamas emojis) */
.ico{width:1.6em;height:1.6em;flex:none}
.ico path,.ico circle,.ico rect,.ico line,.ico polyline{
  fill:none;stroke:var(--accent);stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

/* botones */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--ui);font-weight:800;font-size:clamp(.9rem,1vw,1.02rem);
  letter-spacing:.02em;border-radius:999px;
  padding:.95em 1.5em;white-space:nowrap;
  transition:none;
}
.btn .disc{
  width:1.9em;height:1.9em;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn .disc svg{width:.85em;height:.85em}
.btn .disc svg path{stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* T15 (V3): CTA DORADO LUMINOSO en las 10 paginas. Gradiente de luz arriba ->
   oro viejo abajo, borde oro, texto tinta. El "marron plano feo" MURIO.
   Hover = brillo via ::after (opacity only, jamas box-shadow/filter animados);
   GSAP sigue siendo dueño unico del transform del boton. */
.btn-gold{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#F8E7AE 0%,var(--gold-3) 26%,var(--gold-2) 58%,var(--accent) 100%);
  border:1px solid var(--accent);
  color:#231B07;
  box-shadow:0 10px 26px rgba(170,132,69,.32),inset 0 1px 0 rgba(255,247,222,.75);
}
.btn-gold::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,230,.85) 0%,rgba(255,240,196,.28) 55%,rgba(255,240,196,0) 100%);
  opacity:0;transition:opacity .25s var(--ease-house);
}
.btn-gold:hover::after,.btn-gold:focus-visible::after{opacity:.55}
.btn-gold .disc{background:rgba(35,27,7,.22)}
.btn-gold .disc svg path{stroke:#231B07}
.btn-ghost-dark{border:1px solid rgba(22,35,28,.42);color:var(--ink)}
.btn-ghost-light{border:1px solid rgba(255,255,255,.5);color:#FFFFFF}

/* chips glass (e3/0704-c6: solidas, se separan de un vistazo; V2 blanco frio) */
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line-cold);
  box-shadow:0 10px 30px rgba(16,24,15,.1);
  border-radius:999px;padding:.7em 1.1em;
  font-weight:600;font-size:clamp(.72rem,.85vw,.86rem);
  color:var(--ink);
}

/* ---------- reveals IO (patron barato 04 §8) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-house),transform .7s var(--ease-house);transition-delay:calc(var(--i,0)*90ms)}
.rv.is-in{opacity:1;transform:none}
.rv-pop{opacity:0;transform:scale(.92);transition:opacity .55s var(--ease-house),transform .55s var(--ease-house);transition-delay:calc(var(--i,0)*90ms)}
.rv-pop.is-in{opacity:1;transform:none}

/* ---------- motes canvas (regla en base SIEMPRE, gotcha 0704-j 9a) ---------- */
.motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- ghosts / deco ---------- */
.ghost-num{
  position:absolute;font-family:var(--disp);font-weight:400;line-height:.8;
  text-transform:uppercase;letter-spacing:-.01em;
  -webkit-text-stroke:1.5px currentColor;color:transparent;
  pointer-events:none;user-select:none;
}
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cinta de sumadora (deco firma; tira SVG de papel con numeros fantasma) */
.cinta{position:absolute;pointer-events:none;user-select:none;overflow:hidden}
.cinta svg{display:block;width:100%;height:auto}

/* ============================================================================
   NAV PILDORA ZILLOW (V2 0827-a: patron de menu aprobado por el dueño)
   logo full-color izq · pildora blanca central con activo en pildora tinta ·
   mini-pildora ES|EN + CTA oro derecha · byte-identica en las 10 paginas
   ========================================================================== */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:60;
  padding:clamp(.7rem,1.5vh,1.2rem) var(--nav-inset);
  transform:translateY(0);
}
.site-head.is-stuck{
  position:fixed;top:0;
  /* T3 (0827-b): sin backdrop-filter - el blur en un fixed repinta lo de
     detras en cada frame de scroll; solido casi-opaco = mismo look, 0 costo */
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 30px rgba(16,24,15,.1);
  transform:translateY(-100%);
  transition:transform .35s var(--ease-house);
  padding-block:.5rem;
}
.site-head.is-stuck.is-shown{transform:translateY(0)}

.nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:64px}
.nav-logo{display:inline-flex;align-items:center}
.nav-logo img{height:clamp(46px,4.3vw,60px);width:auto}
.site-head.is-stuck .nav-logo img{height:44px}

/* la PILDORA central, en el EJE REAL del viewport (0705-p1) */
.nav-links{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.15rem;
  background:#FFFFFF;border:1px solid var(--line-cold);
  border-radius:999px;padding:.3rem;
  box-shadow:0 8px 26px rgba(16,24,15,.08);
}
.nav-links a{
  border-radius:999px;
  font-weight:600;font-size:clamp(.88rem,.98vw,.95rem);
  letter-spacing:.01em;color:var(--ink);
  padding:.55em 1.15em;white-space:nowrap;
  transition:background-color .22s var(--ease-house);
}
.nav-links a:hover{background:var(--surface-2)}
.nav-links a.is-active,
.nav-links a.is-active:hover{background:#14231B;color:#FFFFFF}

.nav-right{display:flex;align-items:center;gap:clamp(.7rem,1.2vw,1.1rem)}

/* mini-pildora de idioma (misma familia que la pildora central) */
.lang-pill{
  display:inline-flex;background:#FFFFFF;
  border:1px solid var(--line-cold);
  border-radius:999px;overflow:hidden;padding:.18rem;
  font-weight:800;font-size:.72rem;letter-spacing:.1em;
  box-shadow:0 8px 26px rgba(16,24,15,.06);
}
.lang-pill a{padding:.42em .8em;border-radius:999px;color:var(--ink);transition:background-color .22s var(--ease-house)}
.lang-pill a:hover{background:var(--surface-2)}
.lang-pill a.is-on,
.lang-pill a.is-on:hover{background:#14231B;color:#FFFFFF}
.nav-cta{font-size:.85rem;padding:.8em 1.25em;box-shadow:0 8px 26px rgba(170,132,69,.34),inset 0 1px 0 rgba(255,247,222,.75)}

/* hamburguesa (<=1080) */
.nav-burger{
  display:none;position:relative;z-index:80;
  width:46px;height:46px;border-radius:12px;
  align-items:center;justify-content:center;
}
.nav-burger span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;
  background:var(--ink);transition:transform .3s var(--ease-house),opacity .25s,top .3s var(--ease-house);
}
.menu-open .nav-burger span{background:#FFFFFF}
.nav-burger span:nth-child(1){top:16px}
.nav-burger span:nth-child(2){top:22px}
.nav-burger span:nth-child(3){top:28px}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* overlay movil */
.mobile-menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease-house),visibility 0s linear .3s;
}
.menu-open .mobile-menu{visibility:visible;opacity:1;transition:opacity .3s var(--ease-house)}
.mobile-menu a.mm-link{
  display:block;font-family:var(--disp);font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.9rem,7vw,2.6rem);color:#FFFFFF;
  padding:.35em 0;border-bottom:1px solid rgba(170,132,69,.18);
  opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease-house),transform .3s var(--ease-house);
  transition-delay:calc(var(--i,0)*40ms);
}
.menu-open .mobile-menu a.mm-link{opacity:1;transform:none}
.mobile-menu a.mm-link sup{font-family:var(--ui);font-weight:800;font-size:.4em;color:var(--accent);margin-right:.5em;vertical-align:1.2em}
.mm-foot{margin-top:2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease-house) .24s,transform .3s var(--ease-house) .24s}
.menu-open .mm-foot{opacity:1;transform:none}
.menu-open{overflow:hidden}
/* ley l3: el nav sube de plano sobre el overlay (logo y X siguen visibles) */
.menu-open .site-head{z-index:90}

@media (max-width:1080px){
  .nav-links,.nav-right .nav-cta,.nav-right .lang-pill{display:none}
  .nav-burger{display:inline-flex}
}
@media (min-width:1081px){
  .mobile-menu{display:none}
}

/* ============================================================================
   LOADER "LA SUMA" (V3 re-concebido, solo Home, cada carga)
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:100;background:transparent;
  pointer-events:none;
  contain:strict;
}
.loader-telon{
  /* rendija 2px anti occlusion-culling (0714-c.1): con el telon opaco al 100%
     Chrome DIFIERE decode+raster+upload del hero y lo paga en pleno vuelo;
     2px de hero visibles abajo fuerzan el pipeline de texturas BAJO el loader */
  position:absolute;inset:0 0 2px 0;background:var(--ink);z-index:1;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.loader-cinta{
  position:absolute;left:50%;top:-12%;height:130%;width:240px;
  transform:translateX(-50%);opacity:.28;overflow:hidden;
}
.loader-cinta svg{width:100%;height:100%}
.loader-lock{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem;z-index:2}
.loader-emblema{width:clamp(84px,9vw,120px);height:auto}
.loader-sum{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.6rem,5vw,4rem);letter-spacing:.03em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  min-width:7ch;text-align:center;line-height:1;
}
.loader-tally{width:7ch;max-width:230px}
.loader-tally::before,.loader-tally::after{transform:scaleX(0)}
.loader-micro{
  font-weight:800;font-size:.7rem;letter-spacing:.16em;
  color:var(--muted-dark);text-transform:uppercase;opacity:0;
}
.loader-flecha{
  position:absolute;left:50%;top:50%;width:min(52vw,680px);height:auto;
  transform:translate(-50%,-50%);z-index:3;pointer-events:none;
}
.loader-flecha path{fill:none;stroke:var(--emerald);stroke-width:3;stroke-linecap:round}
/* toggle p5: venimos del cambio de idioma -> el loader no se pinta ni un frame */
.langswap .loader{display:none}

/* ============================================================================
   ⑤ CTA ATMOSFERICO INK (cierra las 10 paginas; se INSTANCIA, ley j9a)
   ========================================================================== */
.cta-final{
  position:relative;min-height:65vh;display:flex;align-items:center;
  color:var(--surface);overflow:clip;
  padding-block:clamp(4rem,9vh,6.5rem);
}
.cta-bg{position:absolute;inset:-8% 0;z-index:1}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-in{position:relative;z-index:3;max-width:820px;margin-inline:auto;text-align:center}
.cta-in .kicker{color:var(--gold-2);justify-content:center}
.cta-h2{
  font-family:var(--disp);font-weight:400;line-height:1.02;
  text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(2rem,3.6vw,3.4rem);margin-top:1rem;
}
.cta-in p{margin:1.1rem auto 0;max-width:56ch;color:var(--muted-dark);font-weight:600;font-size:clamp(.95rem,1.05vw,1.05rem)}
.cta-btns{display:flex;gap:1rem;justify-content:center;margin-top:1.8rem;flex-wrap:nowrap}
.cta-ghost{
  right:-1%;top:-8%;font-size:min(15vw,240px);color:rgba(155,168,157,.08);
}
.cta-final .cinta{left:3%;top:-10%;width:150px;opacity:.22;z-index:2}
@media (max-width:900px){
  .cta-btns{flex-wrap:wrap}
}

/* ============================================================================
   FOOTER ⑥ (byte-identico en las 10 paginas)
   ========================================================================== */
.site-foot{
  position:relative;background:var(--ink-footer);color:var(--surface);
  overflow:clip;
}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(1.6rem,3vw,3.4rem);
  padding-block:clamp(3rem,5vw,4.6rem) clamp(2rem,3vw,2.6rem);
  position:relative;z-index:2;
}
.foot-brand img{height:56px;width:auto}
.foot-brand p{margin-top:1rem;color:var(--muted-dark);font-size:.92rem;max-width:34ch}
.foot-h{
  font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.site-foot nav a,.foot-contact a,.foot-contact p{
  display:block;padding:.28em 0;color:var(--muted-dark);font-size:.95rem;
  transition:color .25s;
}
.site-foot nav a:hover{color:#FFFFFF}
.foot-contact a:hover{color:#FFFFFF}
.foot-contact .tel-big{font-family:var(--disp);font-weight:400;letter-spacing:.03em;font-size:1.3rem;color:#FFFFFF}
.foot-hair{height:1px;background:rgba(170,132,69,.25);position:relative;z-index:2}
.foot-bleed{
  position:relative;height:clamp(90px,10vw,170px);z-index:1;
  pointer-events:none;user-select:none;overflow:visible;
}
.foot-bleed span{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,45%);
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;white-space:nowrap;
  font-size:min(17vw,300px);line-height:.8;color:rgba(170,132,69,.12);
}
.foot-doodle{
  position:absolute;right:4%;top:12%;width:min(26vw,340px);opacity:.06;
  pointer-events:none;z-index:1;
}
.foot-legal{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.1rem 1.3rem;
  font-size:.78rem;color:var(--muted-dark);
  border-top:1px solid rgba(170,132,69,.18);
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .foot-legal{flex-direction:column;gap:.3rem}
}

/* ============================================================================
   fluidez / accesibilidad
   ========================================================================== */
.cv-auto{content-visibility:auto;contain-intrinsic-width:auto 1px;contain-intrinsic-height:auto 700px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-pop,.mobile-menu,.mobile-menu a.mm-link,.mm-foot{transition:none!important}
  .rv,.rv-pop{opacity:1;transform:none}
  html{scroll-behavior:auto}
}