/* ============================================================
   NIEFERGOLD & CÍA. — hoja principal
   ------------------------------------------------------------
   Todo el color, la tipografía, las curvas y los tiempos vienen de
   /assets/tokens.css. Esta hoja no declara ni un solo hex: si falta
   un tono, se agrega allá.

   Proporción de color que sigue el sitio: ~60% neutro (ónix/marfil),
   ~30% base (grafito/tinta), ~10% oro. El oro es acento —nunca fondo
   de un bloque largo de texto.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--onix)}
/* La pila tipográfica del sitio entero se declara una sola vez, aquí.
   Todo lo demás la hereda: los controles de formulario con `font:inherit`
   unas líneas más abajo, y los encabezados a través de --font-display,
   que es la misma familia con la variante Display al frente. */
body{
  margin:0;min-height:100vh;
  color:var(--marfil);
  font-family:var(--font-texto);
  font-size:17px;line-height:1.6;
  letter-spacing:-.01em;
  background:var(--onix);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
img,svg{max-width:100%}

/* Una sola familia en todo el sitio (ver tokens.css). Los encabezados
   piden la variante Display de SF Pro, que es la misma pila con otro
   orden de preferencia: fuera de Apple, ambos tokens caen en Inter.
   El selector cubre h1–h6 para que ninguna regla nueva se escape.

   Cualquier regla que fije `font-family` más abajo debe usar
   var(--font-display) o var(--font-texto). No hay familias literales
   en ninguna hoja: si aparece una, es un error. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--peso-titular);
  letter-spacing:-.02em;
}

/* Foco de teclado siempre visible, en oro y con separación. */
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

/* ── Fondo ambiental ──────────────────────────────────────────────
   Antes eran orbes azules con blur. Ahora es un resplandor dorado muy
   tenue sobre ónix: presencia, no protagonismo. Se conservan las
   clases .orb/.grid porque el HTML ya las usa. */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;opacity:.5}
.orb-1{width:52vw;height:52vw;right:-20vw;top:-22vw;
  background:radial-gradient(circle,rgba(var(--oro-rgb),.10),transparent 66%)}
.orb-2{width:40vw;height:40vw;left:-18vw;top:46vh;
  background:radial-gradient(circle,rgba(var(--champan-rgb),.05),transparent 70%)}
.orb-3{width:28vw;height:28vw;right:6vw;bottom:-14vw;
  background:radial-gradient(circle,rgba(var(--oro-rgb),.06),transparent 70%)}
.grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 86%)}

/* ── Contenedor y barra superior ──────────────────────────────── */
.wrap{width:min(var(--max),calc(100% - 44px));margin-inline:auto;position:relative;z-index:1}
.topbar{height:78px;position:relative;z-index:5;
  border-bottom:1px solid var(--grafito-2);
  background:rgba(var(--onix-rgb),.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.topbar-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}

/* El logotipo es un SVG horizontal (viewBox 2388×408). Se fija la
   altura y el ancho se acomoda solo.

   34px sobre una barra de 78px: el logotipo gana presencia sin apretar
   los 22px de aire que quedan arriba y abajo. Si se sube más, hay que
   subir también la altura de .nav / .topbar. */
.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand-logo{height:34px;width:auto;display:block}
/* Dentro del menú lateral el logo mantiene su tamaño anterior: ahí
   compite con el botón de cerrar y no con una barra vacía. */
.drawer .brand-logo{height:24px}
.brand-mark{width:30px;height:30px;display:block;flex:none}

.top-link{font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--humo);display:flex;align-items:center;gap:10px;
  transition:color var(--t-micro) var(--e-soft)}
.top-link:hover{color:var(--marfil)}
.top-link span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea-fuerte);font-size:10px;color:var(--oro)}

/* ── Botones ──────────────────────────────────────────────────── */
.btn{border:0;border-radius:var(--radio-s);display:inline-flex;align-items:center;
  justify-content:center;gap:10px;cursor:pointer;font-family:var(--font-texto);
  font-weight:600;letter-spacing:.01em;
  transition:transform var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft),
             border-color var(--t-micro) var(--e-soft),box-shadow var(--t-micro) var(--e-soft),
             color var(--t-micro) var(--e-soft)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
/* Oro sólido sobre ónix: sí, es su lugar. El texto va en ónix para
   asegurar contraste. */
.btn-primary{background:var(--oro);color:var(--onix);box-shadow:var(--sombra-sm)}
.btn-primary:hover{background:var(--champan)}
.btn-lg{padding:16px 22px;font-size:14px}
.btn-ghost{background:transparent;border:1px solid var(--linea-fuerte);color:var(--marfil);padding:13px 18px}
.btn-ghost:hover{border-color:var(--oro);color:var(--oro)}
.btn-link{background:transparent;color:var(--humo);padding:12px}
.btn-link:hover{color:var(--marfil)}
.btn-block{width:100%}
.ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{min-height:610px;padding:92px 0 76px;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(250px,.6fr);gap:70px;align-items:end}
.hero-copy{max-width:790px}
.eyebrow{margin:0 0 18px;color:var(--oro);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
.hero h1{font-size:clamp(50px,7.4vw,94px);font-weight:var(--peso-titular);line-height:1;
  letter-spacing:-.035em;margin:0 0 28px;color:var(--marfil)}
/* La palabra destacada del titular: itálica en champán, no un degradé. */
.shine{font-style:italic;color:var(--champan)}
.lede{font-size:18px;line-height:1.7;color:var(--humo);max-width:660px;margin:0 0 32px}
.trust{display:flex;gap:24px;flex-wrap:wrap;padding:0;margin:26px 0 0;list-style:none;
  color:var(--humo);font-size:12px}
.trust li{display:flex;align-items:center;gap:8px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--verde-ok);
  box-shadow:0 0 0 4px rgba(var(--verde-ok-rgb),.12)}
.hero-note{border-left:1px solid var(--grafito-2);padding:10px 0 8px 26px;
  color:var(--humo);align-self:end;margin-bottom:18px}
.hero-note p{font-family:var(--font-display);font-size:18px;line-height:1.5;margin:18px 0 0;
  color:var(--marfil)}
.note-index{font-size:11px;letter-spacing:.15em;color:var(--oro)}

/* ── Catálogo de calculadoras ─────────────────────────────────── */
.catalog{padding:74px 0 110px}
.section-head{display:grid;grid-template-columns:1fr 350px;gap:60px;align-items:end;margin-bottom:40px}
.section-head h2,.workspace-head h2,.lead-copy h2,.done-card h2{
  font-size:clamp(38px,5vw,60px);font-weight:var(--peso-titular);line-height:1.05;
  letter-spacing:-.03em;margin:0;color:var(--marfil)}
.section-head>p,.workspace-head>p{color:var(--humo);font-size:14px;margin:0;line-height:1.7}

.calculator-grid{display:grid;grid-template-columns:repeat(12,1fr);
  border-top:1px solid var(--grafito-2);border-left:1px solid var(--grafito-2)}
.tool-card{grid-column:span 6;min-height:360px;padding:32px;position:relative;
  border-right:1px solid var(--grafito-2);border-bottom:1px solid var(--grafito-2);
  background:var(--grafito);overflow:hidden;display:flex;flex-direction:column;
  transition:background var(--t-micro) var(--e-soft),transform var(--t-micro) var(--e-soft),
             box-shadow var(--t-micro) var(--e-soft)}
.tool-card:hover{background:var(--grafito-2);transform:translateY(-5px);
  box-shadow:var(--sombra-sm);z-index:2}
.tool-featured{grid-column:span 7;min-height:440px;
  background:linear-gradient(150deg,var(--grafito-2),var(--grafito))}
.tool-featured:after{content:"";position:absolute;width:240px;height:240px;
  border:1px solid rgba(var(--oro-rgb),.16);border-radius:50%;right:-85px;bottom:-90px;
  box-shadow:0 0 0 38px rgba(var(--oro-rgb),.04),0 0 0 76px rgba(var(--oro-rgb),.02)}
.tool-featured+.tool-card{grid-column:span 5;min-height:440px}
.tool-wide{grid-column:span 12;min-height:270px}
.tool-number{position:absolute;right:26px;top:20px;font-family:var(--font-display);
  font-size:54px;color:rgba(var(--marfil-rgb),.07)}
.tool-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);margin-bottom:auto}
.tool-card h3{font-size:clamp(28px,3.2vw,42px);font-weight:var(--peso-titular);line-height:1.08;
  letter-spacing:-.025em;margin:36px 0 14px;max-width:520px;color:var(--marfil)}
.tool-card p{font-size:14px;color:var(--humo);max-width:540px;margin:0 0 28px}
.tool-open{align-self:flex-start;border:0;background:none;color:var(--marfil);
  padding:0 0 7px;cursor:pointer;border-bottom:1px solid rgba(var(--oro-rgb),.5);
  font-size:13px;font-weight:600;display:flex;gap:13px;
  transition:gap var(--t-micro) var(--e-soft),color var(--t-micro) var(--e-soft)}
.tool-open:hover{gap:19px;color:var(--oro)}
.tool-metric{position:absolute;right:34px;bottom:28px;width:115px;color:var(--humo);
  display:flex;flex-direction:column}
.tool-metric strong{font-family:var(--font-display);font-size:54px;font-weight:var(--peso-titular);
  line-height:1;color:var(--champan)}
.tool-metric span{font-size:10px;line-height:1.4}

.tax-group-head{grid-column:span 12;padding:36px 32px 30px;
  border-right:1px solid var(--grafito-2);border-bottom:1px solid var(--grafito-2);
  background:linear-gradient(100deg,rgba(var(--oro-rgb),.07),var(--grafito))}
.tax-group-head .eyebrow{margin-bottom:8px}
.tax-group-head h3{font-size:clamp(28px,4vw,42px);font-weight:var(--peso-titular);line-height:1.08;
  letter-spacing:-.025em;margin:0;color:var(--marfil)}
.tax-group-head>p:last-child{max-width:700px;margin:12px 0 0;color:var(--humo);font-size:13px}

/* ── Áreas de trabajo (formularios, resultado, lead) ──────────── */
.workspace,.result,.lead,.done{padding:50px 0 100px;min-height:calc(100vh - 78px)}
.back-hub{border:0;background:none;color:var(--humo);font-size:12px;letter-spacing:.04em;
  padding:0;cursor:pointer;display:flex;gap:9px;align-items:center;margin-bottom:40px;
  transition:color var(--t-micro) var(--e-soft)}
.back-hub:hover{color:var(--oro)}
.workspace-head{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;margin-bottom:36px}

/* `.glass` conserva su nombre por compatibilidad con el HTML y el panel,
   pero ya no es vidrio azul: es una superficie de grafito sobre ónix. */
.glass{background:var(--grafito);border:1px solid var(--grafito-2);box-shadow:var(--sombra)}

.calculator-form{border-radius:var(--radio);padding:40px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
.control{display:flex;flex-direction:column;gap:8px;color:var(--marfil);
  font-size:12px;font-weight:600}
.control-wide{grid-column:1/-1}
.control small{font-weight:400;color:var(--humo);font-size:11px;line-height:1.5}
.control-label{color:var(--marfil);font-size:12px;font-weight:600}
.control input,.control select,.control textarea{width:100%;min-height:52px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);background:var(--superficie);color:var(--marfil);
  padding:13px 15px;outline:none;
  transition:border-color var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft),
             box-shadow var(--t-micro) var(--e-soft)}
.control textarea{min-height:130px;resize:vertical;line-height:1.6}
.control input:focus,.control select:focus,.control textarea:focus{border-color:var(--oro);background:var(--superficie-2);
  box-shadow:0 0 0 4px rgba(var(--oro-rgb),.14)}
.control input::placeholder,.control textarea::placeholder{color:var(--piedra)}
.control input:disabled{opacity:.48;cursor:not-allowed;background:var(--superficie)}
.control select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.control option{background:var(--grafito)}

.money-field,.suffix-field{position:relative;display:block}
.money-field b{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--oro);z-index:1}
.money-field input{padding-left:34px}
.suffix-field b{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--humo)}
.suffix-field input{padding-right:42px}

.choice-stack{display:grid;align-content:end;gap:10px}
.switch-row,.check{display:flex;align-items:center;gap:11px;color:var(--marfil);
  font-size:12px;font-weight:500;cursor:pointer}
.switch-row{min-height:51px;padding:12px 15px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);background:var(--superficie);
  transition:border-color var(--t-micro) var(--e-soft)}
.switch-row:hover{border-color:rgba(var(--oro-rgb),.5)}
.switch-row input,.check input{accent-color:var(--oro);width:17px;height:17px;flex:none}
.unknown-choice{display:flex;align-items:flex-start;gap:9px;margin-top:3px;color:var(--humo);
  font-size:11px;font-weight:400;line-height:1.45;cursor:pointer}
.control .unknown-choice input{width:16px;min-height:16px;height:16px;flex:none;
  margin:1px 0 0;padding:0;accent-color:var(--oro)}

.legal-callout{margin-top:26px;padding:16px 18px;border-left:2px solid var(--oro);
  background:rgba(var(--oro-rgb),.06);color:var(--humo);font-size:12px;line-height:1.65}
.form-submit{margin-top:28px}
.form-error{min-height:20px;color:var(--rojo-alerta);font-size:12px;margin:14px 0 -10px}

/* ── Resultado ────────────────────────────────────────────────── */
.result-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.65fr);
  gap:26px;align-items:start}
.result-card{border-radius:var(--radio);padding:40px}
.result-card h2{font-size:clamp(36px,4vw,52px);line-height:1.08;font-weight:var(--peso-titular);
  letter-spacing:-.025em;margin:0 0 28px;color:var(--marfil)}
.total-box{padding:28px;border:1px solid rgba(var(--oro-rgb),.28);border-radius:var(--radio);
  background:linear-gradient(135deg,rgba(var(--oro-rgb),.10),transparent);margin-bottom:26px}
.total-label{margin:0;color:var(--humo);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* La cifra grande: variante Display + champán, como marca el kit. */
.total{font-family:var(--font-display);font-size:clamp(42px,6.5vw,72px);font-weight:var(--peso-titular);
  line-height:1;margin:10px 0;color:var(--champan);letter-spacing:-.03em}
.total-sub{font-size:12px;color:var(--humo);margin:0}
.result-lines{border-top:1px solid var(--grafito-2)}
.result-line{display:grid;grid-template-columns:1fr auto;gap:26px;padding:17px 3px;
  border-bottom:1px solid var(--grafito-2);font-size:13px}
.result-line>span{display:flex;flex-direction:column;color:var(--marfil)}
.result-line small{color:var(--humo);font-size:11px;font-weight:400;margin-top:3px;max-width:510px}
.result-line strong{color:var(--marfil);font-size:13px;font-weight:600}
.result-line-total{font-weight:700;color:var(--champan)}
.notes{list-style:none;padding:0;margin:24px 0}
.notes li{position:relative;padding-left:18px;color:var(--humo);font-size:11px;margin:9px 0}
.notes li:before{content:"";position:absolute;left:1px;top:8px;width:5px;height:5px;
  border:1px solid var(--oro);transform:rotate(45deg)}
.disclaimer{font-size:10px;color:var(--piedra);padding-top:18px;
  border-top:1px solid var(--grafito-2);margin:0;line-height:1.6}

.cta-card{position:sticky;top:24px;border-radius:var(--radio);padding:36px;overflow:hidden}
.cta-rule{position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--oro),transparent)}
.cta-card h3{font-size:32px;font-weight:var(--peso-titular);line-height:1.1;margin:0 0 15px;color:var(--marfil)}
.cta-card>p:not(.eyebrow){font-size:13px;color:var(--humo);margin:0 0 26px}
.cta-card .btn{width:100%;margin-bottom:6px}

/* ── Captación de contacto ────────────────────────────────────── */
.lead-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.lead-copy{padding-top:30px}
.lead-copy>p:not(.eyebrow){color:var(--humo);max-width:410px}
.lead-context{margin-top:30px;padding:18px;border-left:2px solid var(--oro);
  background:var(--superficie);font-size:12px;color:var(--humo)}
.lead-form{border-radius:var(--radio);padding:36px;display:grid;gap:20px}
.lead-form .form-error{margin:0}
.check{align-items:flex-start;font-weight:400;color:var(--humo);line-height:1.5}
/* Honeypot: fuera de pantalla sin usar display:none, que los bots detectan. */
.hp{position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}

/* ── Confirmación ─────────────────────────────────────────────── */
.done{display:grid;place-items:center}
.done-card{border-radius:var(--radio);padding:56px;text-align:center;max-width:650px}
.done-card>p:not(.eyebrow){color:var(--humo);margin:20px auto 30px;max-width:480px}
.tick{width:65px;height:65px;margin:0 auto 25px}
.tick svg{width:100%;height:100%;fill:none;stroke:var(--verde-ok);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.tick circle{opacity:.22}
.tick path{stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw var(--t-base) var(--e-out) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── Pie ──────────────────────────────────────────────────────── */
.foot{position:relative;z-index:1;border-top:1px solid var(--grafito-2);padding:44px 0 48px}
.foot-in{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.foot-logo{height:24px;width:auto;display:block;margin-bottom:12px}
.foot p{font-size:11px;color:var(--humo);margin:5px 0 0;line-height:1.7}
.foot-sm{max-width:520px}
.foot-admin{color:var(--humo);border-bottom:1px solid var(--grafito-2);opacity:.7;
  transition:opacity var(--t-micro) var(--e-soft),color var(--t-micro) var(--e-soft)}
.foot-admin:hover,.foot-admin:focus-visible{opacity:1;color:var(--oro)}

/* ============================================================
   Asistente de herencia
   ============================================================ */
.wiz{display:block;padding:36px 38px 32px}
.wiz-top{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.wiz-track{flex:1;height:4px;border-radius:99px;background:var(--grafito-2);overflow:hidden}
.wiz-bar{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--bronce),var(--oro));
  transition:width var(--t-base) var(--e-inout)}
.wiz-count{margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--humo);white-space:nowrap}
.wiz-pregunta{margin:0 0 10px;font-family:var(--font-display);font-size:clamp(22px,3vw,30px);
  font-weight:var(--peso-titular);line-height:1.25;color:var(--marfil)}
.wiz-ayuda{margin:0 0 24px;color:var(--humo);font-size:13.5px;max-width:60ch;line-height:1.6}
.wiz input,.wiz select{width:100%;min-height:52px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);background:var(--superficie);color:var(--marfil);padding:13px 15px;
  outline:none;transition:border-color var(--t-micro) var(--e-soft),
  background var(--t-micro) var(--e-soft),box-shadow var(--t-micro) var(--e-soft)}
.wiz input:focus,.wiz select:focus{border-color:var(--oro);background:var(--superficie-2);
  box-shadow:0 0 0 4px rgba(var(--oro-rgb),.14)}
.wiz input::placeholder{color:var(--piedra)}
.wiz input:disabled{opacity:.4}
.wiz select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.wiz option{background:var(--grafito)}

.wiz-opciones{display:grid;gap:10px;max-width:640px}
.wiz-op{text-align:left;border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);
  background:var(--superficie);color:var(--marfil);padding:16px 20px;font-size:15px;cursor:pointer;
  transition:border-color var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft),
             transform var(--t-micro) var(--e-soft)}
.wiz-op:hover{border-color:rgba(var(--oro-rgb),.55);background:var(--superficie-2);transform:translateX(3px)}
.wiz-op[aria-pressed="true"]{border-color:var(--oro);background:rgba(var(--oro-rgb),.14);
  color:var(--champan);font-weight:600}
.wiz-fecha{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:10px;max-width:460px}
.wiz-contador{display:inline-flex;align-items:center;gap:22px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);background:var(--superficie);padding:10px 18px}
.wiz-paso-btn{width:42px;height:42px;border:1px solid var(--linea-fuerte);border-radius:50%;
  background:var(--superficie);color:var(--marfil);font-size:20px;line-height:1;cursor:pointer;
  transition:background var(--t-micro) var(--e-soft),border-color var(--t-micro) var(--e-soft)}
.wiz-paso-btn:hover{background:rgba(var(--oro-rgb),.16);border-color:var(--oro)}
.wiz-cifra{font-family:var(--font-display);font-size:32px;font-weight:var(--peso-titular);min-width:52px;
  text-align:center;color:var(--champan)}
.wiz-casillas{display:grid;gap:9px;max-width:640px}
.wiz-casilla{display:flex;align-items:center;gap:13px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-s);background:var(--superficie);padding:15px 19px;font-size:14.5px;
  cursor:pointer;transition:border-color var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft)}
.wiz-casilla:hover{border-color:rgba(var(--oro-rgb),.55)}
.wiz-casilla input{accent-color:var(--oro);width:18px;height:18px;min-height:0;flex:none;padding:0}
.wiz-casilla:has(input:checked){border-color:var(--oro);background:rgba(var(--oro-rgb),.12)}
.wiz-monto,.wiz-montos{display:grid;gap:14px;max-width:420px}
.wiz-monto .money-field b,.wiz-montos .money-field b,.wiz-item .money-field b{z-index:1}
.wiz-monto .money-field input,.wiz-montos .money-field input,.wiz-item .money-field input{padding-left:34px}
.wiz .unknown-choice{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--humo);cursor:pointer}
.wiz .unknown-choice input{width:16px;height:16px;min-height:0;flex:none;accent-color:var(--oro);padding:0}
.wiz-lista{display:grid;gap:16px;max-width:640px}
.wiz-item{border:1px solid var(--linea-fuerte);border-radius:var(--radio);background:var(--superficie);
  padding:20px 22px;display:grid;gap:14px}
.wiz-item-top{display:flex;align-items:center;justify-content:space-between}
.wiz-item-n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oro)}
.wiz-quitar{border:0;background:none;color:var(--humo);font-size:12px;cursor:pointer;text-decoration:underline}
.wiz-quitar:hover{color:var(--rojo-alerta)}
.wiz-agregar{justify-self:start}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--grafito-2)}
.wiz-nav .btn-link{margin:0}

/* ── Resultado de herencia ────────────────────────────────────── */
.her-card{padding:40px 42px 36px;border-radius:var(--radio);position:relative;overflow:hidden}
.her-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px}
.her-verde::before{background:linear-gradient(90deg,var(--verde-ok),transparent)}
.her-amarillo::before{background:linear-gradient(90deg,var(--ambar-aviso),transparent)}
.her-rojo::before{background:linear-gradient(90deg,var(--rojo-alerta),transparent)}
.her-titulo{margin:6px 0 12px;font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);
  font-weight:var(--peso-titular);line-height:1.2;color:var(--marfil)}
.her-intro{margin:0 0 26px;color:var(--humo);font-size:14.5px;max-width:68ch;line-height:1.65}
.her-tabla{margin:26px 0 6px;border:1px solid var(--grafito-2);border-radius:var(--radio);overflow:hidden}
.her-fila{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:12px;
  padding:15px 20px;align-items:center;font-size:14px;border-top:1px solid var(--grafito-2)}
.her-fila:first-child{border-top:0}
.her-cabecera{background:var(--superficie);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--humo)}
.her-fila>span:not(.her-quien){text-align:right;font-variant-numeric:tabular-nums}
.her-cabecera>span:not(:first-child){text-align:right}
.her-quien{display:flex;flex-direction:column;gap:3px}
.her-quien small{color:var(--humo);font-size:11.5px}
.her-imp{font-weight:600;color:var(--champan)}
.her-detalle{margin:20px 0 4px;border:1px solid var(--grafito-2);border-radius:var(--radio);overflow:hidden}
.her-detalle summary{padding:14px 20px;cursor:pointer;font-size:13px;font-weight:600;
  color:var(--oro);list-style:none}
.her-detalle summary::-webkit-details-marker{display:none}
.her-detalle summary::after{content:" ▾"}
.her-detalle[open] summary::after{content:" ▴"}
.her-detalle-body{padding:4px 20px 16px}
.her-bloque{margin-top:24px}
.her-bloque h4{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--humo)}
.her-lista{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--marfil);
  font-size:13.5px;line-height:1.55}
.her-lista li{padding-left:2px}
.her-motivos{border-left:2px solid var(--rojo-alerta);padding-left:18px}
.her-motivos h4{color:var(--rojo-alerta)}
.her-supuestos{border-left:2px solid var(--oro);padding-left:18px}
.her-pendientes{border-left:2px solid var(--ambar-aviso);padding-left:18px}
.her-pendientes h4{color:var(--ambar-aviso)}
.her-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
#herencia-salida .back-hub{margin-bottom:18px}

/* ── WhatsApp ─────────────────────────────────────────────────── */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--wa);color:var(--marfil);border:0;border-radius:99px;font-weight:600;
  cursor:pointer;transition:background var(--t-micro) var(--e-soft),transform var(--t-micro) var(--e-soft)}
.btn-wa:hover{background:var(--wa-hover);transform:translateY(-1px)}
.ico-wa{width:19px;height:19px;fill:currentColor;flex:none}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;
  gap:10px;padding:14px 20px 14px 16px;border-radius:99px;background:var(--wa);color:var(--marfil);
  font-weight:600;font-size:14px;box-shadow:var(--sombra-sm);
  transition:transform var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft)}
.wa-float:hover{transform:translateY(-2px);background:var(--wa-hover)}
.wa-float svg{width:24px;height:24px;fill:currentColor;flex:none}

/* ── Adaptación a pantallas chicas ────────────────────────────── */
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:68px 0 55px}
  .hero-note{display:none}
  .section-head,.workspace-head,.lead-layout{grid-template-columns:1fr;gap:20px}
  .section-head>p,.workspace-head>p{max-width:580px}
  .tool-card,.tool-featured,.tool-featured+.tool-card,.tool-wide{grid-column:span 12;min-height:330px}
  .tool-featured{min-height:400px}
  .result-layout{grid-template-columns:1fr}
  .cta-card{position:relative;top:auto}
  .lead-copy{padding-top:0}
  .foot-in{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
  .wrap{width:min(100% - 28px,var(--max))}
  .topbar{height:66px}
  /* La barra baja a 66px en móvil: el logo baja en la misma proporción. */
  .brand-logo{height:27px}
  .drawer .brand-logo{height:22px}
  .top-link{font-size:0}
  .hero{padding-top:55px}
  .hero h1{font-size:46px}
  .lede{font-size:15px}
  .trust{display:grid;gap:10px}
  .catalog{padding:45px 0 75px}
  .section-head h2,.workspace-head h2,.lead-copy h2,.done-card h2{font-size:38px}
  .tool-card{padding:24px;min-height:310px}
  .tool-featured{min-height:390px}
  .tool-card h3{font-size:31px}
  .tool-metric{display:none}
  .workspace,.result,.lead,.done{padding:32px 0 70px}
  .back-hub{margin-bottom:28px}
  .calculator-form,.result-card,.lead-form,.cta-card{padding:22px;border-radius:var(--radio)}
  .form-grid{grid-template-columns:1fr;gap:19px}
  .control-wide{grid-column:auto}
  .result-line{grid-template-columns:1fr;gap:6px}
  .result-line strong{font-size:15px}
  .total{font-size:46px}
  .done-card{padding:36px 22px}
  .foot-in{gap:14px}
  .wiz{padding:26px 20px 24px}
  .wiz-fecha{grid-template-columns:1fr}
  .her-card{padding:28px 22px 26px}
  .her-fila{grid-template-columns:1fr auto;gap:6px 12px}
  .her-cabecera{display:none}
  .her-fila>span:not(.her-quien){text-align:right}
  .her-quien{grid-column:1/-1;margin-bottom:4px}
  .her-acciones .btn{width:100%}
  .wa-float{right:14px;bottom:14px;padding:14px}
  .wa-float-t{display:none}
}

/* ── Movimiento reducido ──────────────────────────────────────────
   Si el sistema lo pide, nada se anima: se salta directo al estado
   final. Va al final de la hoja para ganarle a cualquier regla previa. */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
