/* Lina Martínez — herramientas. Sistema visual del libro de marca:
   mundo marfil de tema único (deliberado — la marca no tiene modo oscuro),
   Bodoni Moda para lo grande, Public Sans para el cuerpo, filetes finos
   en arena, sin sombras. Los nombres de clase son el contrato con las
   páginas y con el arnés de pruebas: no renombrar. */

@import url('./fonts.css');

:root{
  color-scheme: light;
  --marfil:#F2EDE3; --papel:#F7F3EA; --arena:#D9CBB2; --beige:#C4AE8F;
  /* --gris was #8C8273 (the brand's neutral-3). At 3.24:1 on ivory it fails
     WCAG AA for text, and it is used as a TEXT colour in seven places here —
     nav links, result labels, table headers, the currency prefix, the footer.
     axe never caught it: these pages send `script-src 'self'`, so the harness
     could not inject axe and the gate reported NOT-EXERCISED rather than FAIL.
     Now 6.64:1. The two decorative uses (input hover border, notice rule) just
     read slightly firmer. */
  --gris:#5C5142; --oliva:#6E6A4E; --espresso:#3E2E23; --negro:#1A1713;
  --terracota:#7D3B2D;
  --bg:var(--marfil); --surface:var(--papel); --surface-2:#EFE8DA;
  --ink:var(--espresso); --ink-2:#5C5142; --ink-3:#5C5142; /* was var(--gris) #8C8273 = 3.24:1 on ivory, fails AA */
  --line:var(--arena); --line-2:var(--beige);
  --brand:var(--oliva); --brand-ink:var(--marfil); --brand-soft:#E7E2D2;
  --amber:#8a6a2f; --amber-soft:#EDE4CE;
  --azure:var(--oliva); --azure-soft:#E7E7DB;
  --danger:var(--terracota);
  --r:2px;
  --serif:'Bodoni Moda','Iowan Old Style',Palatino,Georgia,serif;
  --sans:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased;
}
a{color:var(--oliva); text-decoration:underline; text-decoration-color:var(--arena); text-underline-offset:3px}
a:hover{text-decoration-color:var(--oliva)}
:focus-visible{outline:2px solid var(--oliva); outline-offset:2px}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- cabecera ---------- */
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--marfil) 94%,transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar-in{max-width:72rem; margin:0 auto; padding:1rem 1.25rem;
  display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap}
.brand{font:500 1.25rem/1 var(--serif); letter-spacing:.01em; color:var(--negro); text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{display:none}
.brand .sub{font:400 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gris); margin-left:.6rem}
.tabs{display:flex; gap:1.1rem; overflow-x:auto; scrollbar-width:none; margin-left:auto; padding:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap; font:600 .72rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); padding:.5rem 0; border-bottom:1px solid transparent; text-decoration:none}
.tab:hover{color:var(--espresso)}
.tab[aria-current="page"]{color:var(--espresso); border-bottom-color:var(--espresso)}

main{max-width:72rem; margin:0 auto; padding:3rem 1.25rem 5rem}
@media (max-width:40rem){ main{padding:2rem 1rem 7rem} }

/* ---------- cabecera de página con lámina ---------- */
.page-head{margin-bottom:2.75rem; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; align-items:end}
@media (min-width:56rem){ .page-head.has-art{grid-template-columns:minmax(0,1fr) 15rem} }
h1{font:500 clamp(2rem,1.4rem + 2.4vw,3.1rem)/1.08 var(--serif); letter-spacing:.005em;
  margin:0 0 .8rem; text-wrap:balance; color:var(--negro)}
.page-head p{margin:0; color:var(--ink-2); font-size:1.02rem; max-width:56ch}
.page-art{width:15rem; max-width:100%; aspect-ratio:1; object-fit:cover;
  border:1px solid var(--line); padding:.5rem; background:var(--papel); justify-self:end}
@media (max-width:56rem){ .page-art{display:none} }

/* ---------- columnas ---------- */
.split{display:grid; gap:1.75rem; align-items:start}
@media (min-width:62rem){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2.5rem}
  .sticky{position:sticky; top:5.5rem} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.6rem}
.card + .card{margin-top:1.1rem}
.card-title{font:600 .68rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gris); margin:0 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--line)}

/* ---------- formulario ---------- */
.field{margin-bottom:1.15rem}
.field:last-child{margin-bottom:0}
label{display:block; font:600 .8rem/1.4 var(--sans); color:var(--ink); margin-bottom:.45rem}
.hint{color:var(--ink-2); font-size:.8rem; line-height:1.55; margin-top:.45rem}
input[type=text],input[type=number],select{
  width:100%; font:400 1.05rem/1.4 var(--sans); font-variant-numeric:tabular-nums;
  color:var(--negro); background:var(--marfil); border:1px solid var(--line-2);
  border-radius:var(--r); padding:.7rem .8rem; transition:border-color .12s}
input:hover,select:hover{border-color:var(--gris)}
input:focus,select:focus{outline:none; border-color:var(--espresso)}
select{appearance:none; cursor:pointer; padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size:5px 5px,5px 5px; background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-repeat:no-repeat}
.prefix{position:relative}
.prefix span{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--gris); pointer-events:none}
.prefix input{padding-left:1.7rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.row-3{grid-template-columns:1fr 1fr 1fr; margin-top:.75rem}
@media (max-width:26rem){ .row,.row-3{grid-template-columns:1fr} }
.check{display:flex; align-items:flex-start; gap:.6rem; cursor:pointer}
.check input{width:1rem;height:1rem;margin:.25rem 0 0;accent-color:var(--oliva);flex:none;cursor:pointer}
.check span{font-size:.9rem; font-weight:600; color:var(--ink)}
.check-row[hidden],[hidden]{display:none !important}

/* ---------- resultado ---------- */
.result{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.75rem 1.6rem}
.result-label{font:600 .68rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--gris)}
.headline{font:500 clamp(2.6rem,1.8rem + 3.2vw,3.6rem)/1.05 var(--serif); letter-spacing:0;
  margin:.55rem 0 .15rem; font-variant-numeric:lining-nums tabular-nums; color:var(--negro)}
.headline.negative{color:var(--danger)}
.headline-sub{color:var(--ink-2); font-size:.92rem}

.bandbar{display:flex; height:14px; border-radius:0; overflow:hidden; margin:1.4rem 0 .6rem;
  background:var(--surface-2); border:1px solid var(--line)}
.bandbar div{position:relative; min-width:2px}
.bandbar div span{display:none}
.bandkey{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.78rem; color:var(--ink-2)}
.bandkey i{width:.6rem;height:.6rem;border-radius:0;display:inline-block;margin-right:.4rem;vertical-align:-1px}

.breakdown{margin-top:1.4rem; border-top:1px solid var(--line); padding-top:1rem}
.breakdown .line{display:flex; justify-content:space-between; gap:1rem; padding:.34rem 0;
  font-size:.9rem; color:var(--ink-2)}
.breakdown .line b{color:var(--negro); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.breakdown .line.total{border-top:1px solid var(--line); margin-top:.5rem; padding-top:.7rem;
  color:var(--negro); font-weight:600}
.breakdown .line.total b{font-family:var(--serif); font-size:1.05rem}

/* ---------- avisos y fuentes ---------- */
.notice{background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--gris);
  border-radius:var(--r); padding:.9rem 1.05rem; font-size:.88rem; color:var(--ink-2); margin-top:.7rem}
.notice.amber{border-left-color:var(--beige); background:var(--amber-soft)}
.notice.azure{border-left-color:var(--oliva); background:var(--azure-soft)}
.sources{margin-top:.2rem}
.source{display:flex; justify-content:space-between; gap:.8rem; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.86rem}
.source:last-of-type{border-bottom:0}
.source .when{color:var(--ink-2); font:400 .72rem/1.4 var(--mono); white-space:nowrap}
.source-note{color:var(--ink-2); font-size:.8rem; line-height:1.6; padding-top:.5rem}
.source-mt{margin-top:.6rem}

table.data{width:100%; border-collapse:collapse; font-size:.88rem}
table.data th,table.data td{padding:.55rem .4rem; border-bottom:1px solid var(--line); text-align:right}
table.data th:first-child,table.data td:first-child{text-align:left; padding-left:0}
table.data th:last-child,table.data td:last-child{padding-right:0}
table.data th{font:600 .66rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gris)}
table.data td.num{font-variant-numeric:tabular-nums}
table.data tr.hi td{background:var(--brand-soft)}
.scroll-x{overflow-x:auto}
.table-scroll{max-height:19rem; overflow-y:auto}
.mt{margin-top:1rem}.mt-lg{margin-top:1.5rem}
.faq h3{font:500 1.05rem/1.4 var(--serif); margin:1rem 0 .3rem; color:var(--negro)}
.faq p,.faq-p{margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.65}

.spark{display:flex; align-items:flex-end; gap:2px; height:70px; margin:.4rem 0 .7rem;
  border-bottom:1px solid var(--line); padding-bottom:1px}
.spark div{flex:1; min-width:1px; background:var(--oliva); opacity:.45}
.spark div:last-child{opacity:1}

.cta{margin-top:1.5rem; background:transparent; border:1px solid var(--espresso);
  border-radius:var(--r); padding:1.3rem 1.4rem; font-size:.92rem; color:var(--ink-2)}
.cta b{color:var(--negro)}

footer{max-width:72rem; margin:0 auto; padding:2.5rem 1.25rem 3.5rem; color:var(--gris);
  font-size:.82rem; line-height:1.7; border-top:1px solid var(--line)}

.mobile-total{position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  background:color-mix(in srgb,var(--marfil) 96%,transparent); backdrop-filter:blur(8px);
  border-top:1px solid var(--espresso); padding:.75rem 1.1rem;
  justify-content:space-between; align-items:baseline; gap:1rem}
.mobile-total .l{font:600 .66rem/1 var(--sans); text-transform:uppercase; letter-spacing:.2em; color:var(--gris)}
.mobile-total .v{font:500 1.45rem/1 var(--serif); font-variant-numeric:tabular-nums; color:var(--negro)}
@media (max-width:40rem){ .mobile-total{display:flex} }

.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.1rem; margin-top:2rem}
.tool-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.6rem; color:var(--ink); text-decoration:none; transition:border-color .15s}
.tool-card:hover{border-color:var(--espresso); text-decoration:none}
.tool-card .n{font:500 1.3rem/1.25 var(--serif); color:var(--negro); margin-bottom:.45rem}
.tool-card .d{color:var(--ink-2); font-size:.88rem; line-height:1.6}
.tool-card .go{margin-top:1rem; font:600 .7rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--oliva)}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }