/* ============================================================
   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:var(--alto-ventana);
  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);min-height:calc(var(--alto-ventana) - 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)}
/* El desglose del finiquito viene en bloques: lo que corresponde al firmar
   y lo que sólo se obtiene reclamando. Sin este corte visual las dos cosas
   se leen como una sola suma, que es justo lo que no son. */
.result-grupo{padding:26px 3px 12px}
.result-grupo:first-child{padding-top:14px}
.result-grupo-t{margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro)}
.result-grupo small{display:block;margin-top:8px;color:var(--humo);font-size:11px;
  line-height:1.65;max-width:510px}
.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 POR PASOS (.wiz*) ───────────────────────────────────
   Barra de progreso, una pregunta por pantalla y botones
   «Atrás»/«Continuar». Hoy lo usa UNA calculadora: la de pensión de
   alimentos (public/calculadoras/alimentos/, dibujado por
   assets/alimentos.js).

   POR QUÉ ESTE BLOQUE VOLVIÓ
   -------------------------
   Nació para la calculadora de herencia. Cuando herencia pasó a ser un
   formulario de una pantalla, este bloque se borró entero —y alimentos,
   que reutilizaba las mismas clases justamente para no inventar un
   segundo lenguaje visual, se quedó sin ninguna de ellas.

   El síntoma no fue una página rota sino algo más silencioso: los
   botones de «Menor de 18 años», «Desde los 18 y antes de cumplir 21»,
   etc. quedaron con el estilo por defecto del navegador —grises, de
   6 px de padding, apretados en una fila— y la barra de progreso
   desapareció. La calculadora seguía funcionando y respondiendo bien;
   sólo no se veía como el resto del sitio.

   De ahí que aquí esté SÓLO lo que alimentos usa. El bloque original
   traía además contadores, listas de herederos, casillas y selectores
   que eran de herencia: restaurarlos sería volver a dejar CSS que
   ningún marcado toca, que es exactamente cómo empezó este problema.
   Si mañana otra calculadora necesita alguna de esas piezas, se
   recupera de git al agregarla y no antes.
   ============================================================ */
.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}

/* Los campos del asistente. `min-height:52px` no es estética: es el
   área táctil mínima cómoda, y el tamaño de fuente heredado evita que
   iOS haga zoom al enfocar un campo de menos de 16 px. */
.wiz input{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{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}

/* Las respuestas cerradas. Una por fila y alineadas a la izquierda: son
   frases —«Desde los 21 y antes de cumplir 28 años»— y en una grilla
   horizontal se cortan o se apilan de cualquier manera.

   El estado activo se lee de `aria-pressed`, que es el mismo atributo
   que alimentos.js ya escribe para el lector de pantalla. Así no hay
   una clase de estado que pueda quedar desincronizada del atributo que
   de verdad comunica el estado. */
.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-monto{display:grid;gap:14px;max-width:420px}
.wiz-monto .money-field b{z-index:1}
.wiz-monto .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-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}

/* ── CALCULADORA DE HERENCIA ───────────────────────────────────────
   Es un formulario de una pantalla con la misma estructura que el de
   finiquito —.form-grid en dos columnas—, y todo lo que no es
   obligatorio se despliega en su lugar en vez de ocupar un paso
   propio. El asistente por pasos que usaba antes está arriba, y hoy
   sirve a la calculadora de alimentos.

   Lo que sigue son sólo las piezas que finiquito no necesitaba: los
   desplegables de ayuda, el asistente de cuota y la tarjeta de
   resultado que va DEBAJO del formulario en vez de en otra vista. */

/* Ayudas plegables. Van en <details> nativo: se abren con teclado, se
   anuncian solas al lector de pantalla y no necesitan una línea de JS. */
.ayuda-inline{border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);
  padding:12px 15px;background:var(--superficie)}
.ayuda-inline summary{cursor:pointer;color:var(--oro);font-size:12.5px;font-weight:600;
  list-style:none}
.ayuda-inline summary::-webkit-details-marker{display:none}
.ayuda-inline summary:before{content:"+ ";font-weight:700}
.ayuda-inline[open] summary:before{content:"− "}
.ayuda-inline summary:hover{color:var(--champan)}
.ayuda-inline p,.ayuda-inline ul{margin:12px 0 0;color:var(--humo);font-size:12.5px;line-height:1.7}
.ayuda-inline:focus-within{border-color:rgba(var(--oro-rgb),.5)}

/* `flex-direction` y `align-items` van explícitos: .control declara
   `flex-direction:column`, y sin sobrescribirlo la nota se estiraba a
   lo alto y el enlace quedaba centrado bajo ella. */
.herencia-ayudas{display:flex;flex-flow:row wrap;align-items:flex-start;gap:14px}
.btn-ayuda{margin:0;font-size:12.5px;text-align:left}

/* La explicación de qué valor ingresar va visible, no plegada: es la
   duda de todo el mundo y esconderla obliga a abrir un desplegable
   antes de poder escribir el primer campo. */
.nota-valor{flex:1 1 320px;margin:0;max-width:640px;
  color:var(--humo);font-size:12.5px;line-height:1.7}

/* Acordeón: mismo <details> pero para bloques grandes. */
.acordeon{border:1px solid var(--linea-fuerte);border-radius:var(--radio-s);
  padding:16px 18px;background:var(--superficie)}
.acordeon+.acordeon{margin-top:12px}
.acordeon summary{cursor:pointer;color:var(--marfil);font-size:13.5px;font-weight:600;list-style:none}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:before{content:"+ ";color:var(--oro);font-weight:700}
.acordeon[open] summary:before{content:"− "}
.acordeon[open]{border-color:rgba(var(--oro-rgb),.4)}
.acordeon-intro{margin:14px 0 0;color:var(--humo);font-size:12.5px;line-height:1.7}
.acordeon .form-grid{margin-top:18px;gap:18px 20px}
.acordeon .choice-stack{margin-top:16px}
.acordeon .btn{margin-top:18px}

/* Asistente de cuota. Es una tarjeta aparte y no un modal: un modal
   taparía el formulario que la persona está tratando de completar. */
.asistente{margin-top:22px;padding:26px 28px}
.asistente-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.asistente-cab h3{margin:0;font-family:var(--font-display);font-size:clamp(19px,2.4vw,24px);
  font-weight:var(--peso-titular);color:var(--marfil)}
.btn-cerrar-asistente{border:0;background:none;cursor:pointer;color:var(--humo);
  width:32px;height:32px;flex:none;border-radius:50%;padding:6px}
.btn-cerrar-asistente:hover{color:var(--marfil);background:var(--superficie-2)}
.btn-cerrar-asistente svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}
.asistente-vias{display:grid;gap:0}

/* La advertencia de supuestos. Va dentro de la opción y arriba de los
   campos: describe bajo qué condiciones la estimación tiene sentido, y
   leerla después de calcular no le sirve a nadie. */
.advertencia{margin:16px 0 0;padding:14px 16px;border-radius:var(--radio-s);
  border:1px solid rgba(var(--oro-rgb),.35);background:rgba(var(--oro-rgb),.08)}
.advertencia p{margin:0 0 10px;color:var(--marfil);font-size:12.5px;line-height:1.7}
.advertencia p:last-child{margin:0}
.advertencia strong{color:var(--champan)}

/* Salida para quien no calza con los supuestos: no se le deja sin
   camino, se le ofrece la revisión. */
.nota-otro-caso{margin:18px 0 6px;color:var(--humo);font-size:12.5px;line-height:1.7}
/* .asistente-vias es un grid: sin `justify-self` el botón se estira de
   borde a borde y su texto queda centrado, como si fuera la acción
   principal. Y sin quitarle el padding de .btn-link queda desalineado
   del párrafo que lo introduce. */
.asistente-vias .btn-ayuda{justify-self:start;padding-left:0}

/* Aviso pegado a un campo: confirma qué se acaba de rellenar. */
.aviso-inline{margin:8px 0 0;padding:10px 13px;border-radius:var(--radio-s);
  border:1px solid rgba(var(--oro-rgb),.35);background:rgba(var(--oro-rgb),.10);
  color:var(--champan);font-size:12.5px;line-height:1.6}
.aviso-motivo{margin:0 0 10px;color:var(--marfil);font-size:13px;line-height:1.65;font-weight:600}
#via-b-aviso{margin-top:16px;padding:16px 18px;border-radius:var(--radio-s);
  border:1px solid var(--linea-fuerte);background:var(--superficie-2)}
#via-b-aviso p{margin:0 0 10px;color:var(--humo);font-size:12.5px;line-height:1.7}

/* Un campo con error se marca, además del mensaje al pie: en un
   formulario de tres campos, un mensaje suelto obliga a adivinar cuál. */
.control-error input,.control-error select,.control-error .money-field input{
  border-color:var(--rojo-alerta)}

/* ── Resultado, debajo del formulario ───────────────────────────── */
.resultado-herencia{margin-top:24px;padding:32px 34px}
.resultado-total{padding:26px 28px;margin-bottom:24px;border-radius:var(--radio);
  border:1px solid rgba(var(--oro-rgb),.28);
  background:linear-gradient(135deg,rgba(var(--oro-rgb),.10),transparent)}
.resultado-etiqueta{margin:0;color:var(--humo);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.resultado-monto{font-family:var(--font-display);font-size:clamp(40px,6vw,66px);
  font-weight:var(--peso-titular);line-height:1;margin:10px 0 6px;color:var(--champan);letter-spacing:-.03em}
.resultado-equivalente{margin:0;font-size:12.5px;color:var(--humo)}
/* El caso exento no lleva cifra gigante: la noticia es la frase, y un
   «$0» de 66 píxeles se lee como un error de la calculadora. */
.resultado-titulo{margin:0 0 10px;font-family:var(--font-display);
  font-size:clamp(24px,3.4vw,34px);font-weight:var(--peso-titular);color:var(--champan);line-height:1.15}
.resultado-bajada{margin:0;color:var(--marfil);font-size:14px;line-height:1.65}

.revisiones{margin-top:26px;padding:20px 22px;border-radius:var(--radio-s);
  border:1px solid var(--linea-fuerte);background:var(--superficie)}
.revisiones h4{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.revisiones-lista{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.revisiones-lista strong{display:block;color:var(--marfil);font-size:13.5px;margin-bottom:5px}
.revisiones-lista p{margin:0;color:var(--humo);font-size:12.5px;line-height:1.7}

.resultado-cta{margin-top:24px;padding-top:22px;border-top:1px solid var(--grafito-2)}
.resultado-cta p{margin:0 0 16px;color:var(--marfil);font-size:13.5px;line-height:1.7}

/* ── 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}

/* ── Resultado de la calculadora de alimentos ─────────────────── */
/* Mismo lenguaje que el resultado de herencia: tarjeta oscura con una
   línea de acento arriba que distingue una estimación (oro) de un caso
   que se deriva a revisión jurídica (ámbar). El color nunca es el único
   indicio: el título y el texto dicen lo mismo con palabras. */
.ali-portada{margin-top:6px}
.ali-card{padding:40px 42px 34px;border-radius:var(--radio);position:relative;overflow:hidden}
.ali-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px}
.ali-estimacion::before{background:linear-gradient(90deg,var(--oro),transparent)}
.ali-revision::before{background:linear-gradient(90deg,var(--ambar-aviso),transparent)}
.ali-titulo{margin:6px 0 26px;font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);
  font-weight:var(--peso-titular);line-height:1.2;color:var(--marfil)}
.ali-titulo:focus-visible{outline:2px solid var(--oro);outline-offset:6px}

.ali-cifras{display:grid;gap:14px;margin-bottom:26px}
.ali-cifra{padding:22px 24px;border:1px solid rgba(var(--oro-rgb),.28);border-radius:var(--radio);
  background:linear-gradient(180deg,rgba(var(--oro-rgb),.07),transparent)}
.ali-cifra-t{margin:0 0 8px;color:var(--humo);font-size:11.5px;line-height:1.5;
  letter-spacing:.02em;max-width:56ch}
.ali-monto{margin:0;font-family:var(--font-display);font-size:clamp(30px,4.6vw,44px);
  font-weight:var(--peso-titular);line-height:1.05;letter-spacing:-.02em;color:var(--champan)}
.ali-utm{margin:6px 0 0;color:var(--humo);font-size:12.5px;font-variant-numeric:tabular-nums}

.ali-texto{display:grid;gap:12px;margin-bottom:26px}
.ali-texto p{margin:0;color:var(--marfil);font-size:14.5px;line-height:1.65;max-width:68ch}

/* Las advertencias no se pliegan detrás de un «ver más»: si hay algo que
   la persona debe saber antes de decidir, se lee completo. */
.ali-aviso{margin-top:26px;padding-left:18px;border-left:2px solid var(--oro);
  display:grid;gap:10px}
.ali-aviso p{margin:0;color:var(--humo);font-size:13.5px;line-height:1.6;max-width:68ch}
.ali-aviso .btn{justify-self:start;margin-top:6px}
.ali-aviso-alerta{border-left-color:var(--ambar-aviso)}
.ali-aviso-alerta .ali-bloque-t{color:var(--ambar-aviso)}
.ali-bloque-t{margin:0;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--oro)}

.ali-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ali-base{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--grafito-2);
  color:var(--piedra);font-size:11px;line-height:1.6}
#alimentos-salida .back-hub{margin-bottom:18px}
#alimentos-salida .btn-link{margin-top:14px;padding-left:0}

/* Campos que una calculadora agrega al formulario compartido. */
.lead-extra{display:grid;gap:16px}

/* ── 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:calc(20px + var(--seguro-der));
  bottom:calc(20px + var(--seguro-abajo));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}
  /* En móvil la pantalla se desplaza, pero NO se convierte en un
     cuestionario por pasos: una columna, todo a la vista. */
  .asistente{padding:20px 18px}
  .resultado-herencia{padding:24px 20px}
  .herencia-ayudas{flex-direction:column;align-items:stretch}
  .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:calc(14px + var(--seguro-der));bottom:calc(14px + var(--seguro-abajo));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;
  }
}