:root{
  --ink:#14213D;
  --paper:#F6F4EE;
  --paper-raised:#FBFAF6;
  --line:#D9D0BE;
  --teal:#1F6F54;
  --teal-deep:#154F3C;
  --amber:#C97D25;
  --muted:#5B6472;
  --danger:#A23B32;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Lora', serif; font-weight:600; margin:0; color:var(--ink);}
a{color:var(--teal-deep);}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  box-shadow:0 0 0 rgba(20,33,61,0);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{
  box-shadow:0 6px 18px -12px rgba(20,33,61,.35);
  border-bottom-color:transparent;
}
.logo{font-family:'Lora', serif; font-weight:600; font-size:1.15rem; letter-spacing:.01em; text-decoration:none; color:var(--ink);}
.logo span{color:var(--teal-deep);}
nav{display:flex; gap:26px; font-size:.94rem;}
nav a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;}
nav a:hover{border-bottom-color:var(--ink);}
nav a.current{border-bottom-color:var(--teal-deep); color:var(--teal-deep);}

/* hero (home page) */
.hero{padding:76px 0 56px; display:grid; grid-template-columns:1.1fr .8fr; gap:48px; align-items:center;}
.hero h1{font-size:2.6rem; line-height:1.18; max-width:12.5em;}
.hero p.lede{font-size:1.08rem; color:var(--muted); max-width:34em; margin-top:18px;}
.trust-line{margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; color:var(--muted);}
.trust-line strong{color:var(--ink); font-family:'IBM Plex Mono', monospace; font-weight:600;}

.receipt-preview{background:var(--paper-raised); border:1px solid var(--line); padding:26px 24px; font-family:'IBM Plex Mono', monospace; font-size:.82rem;}
.receipt-preview .rp-title{font-family:'Lora', serif; font-size:.95rem; font-style:italic; color:var(--muted); margin-bottom:16px;}
.receipt-preview .rp-line{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); color:var(--ink);}
.receipt-preview .rp-line:last-child{border-bottom:none;}
.receipt-preview .rp-total{display:flex; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:1px solid var(--ink); font-weight:600; color:var(--teal-deep);}

/* generic page intro (used by calculators, hub, articles) */
.page-intro{padding:56px 0 8px; max-width:38em;}
.page-intro h1{font-size:2.2rem; line-height:1.2;}
.page-intro p{color:var(--muted); margin-top:14px; font-size:1.02rem;}

/* calculator section */
.calc-section{padding:20px 0 90px;}
.calc-intro{border-top:1px solid var(--line); padding-top:44px; max-width:36em;}
.calc-intro h2{font-size:1.7rem;}
.calc-intro p{color:var(--muted); margin-top:10px;}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:38px; align-items:start;}

form{display:flex; flex-direction:column; gap:18px;}
fieldset{border:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
legend{
  font-family:'Lora', serif; font-style:italic; font-size:1.05rem;
  color:var(--teal-deep); padding:0 0 10px; width:100%;
  border-bottom:1px solid var(--line); margin-bottom:2px;
}
.field label{display:block; font-size:.86rem; color:var(--ink); margin-bottom:6px; font-weight:500;}
.field .hint{display:block; font-size:.78rem; color:var(--muted); margin-top:4px;}
.field input, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  background:var(--paper-raised); font-family:'IBM Plex Sans', sans-serif;
  font-size:.95rem; color:var(--ink);
}
.field input:focus, .field select:focus{border-color:var(--teal-deep);}
.field input.input-error, .field select.input-error{border-color:var(--danger);}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.checkbox-field{display:flex; align-items:flex-start; gap:10px; font-size:.88rem;}
.checkbox-field input{width:auto; margin-top:3px;}
#aviso-field{display:none;}

button.calc-btn{
  margin-top:6px; background:var(--teal-deep); color:#fff; border:none;
  padding:13px 20px; font-family:'IBM Plex Sans', sans-serif; font-size:.95rem;
  font-weight:500; cursor:pointer; transition:background .15s ease; position:relative;
}
button.calc-btn:hover{background:var(--ink);}
button.calc-btn.is-loading{opacity:.85; cursor:progress;}

/* result ledger */
.ledger{background:var(--paper-raised); border:1px solid var(--line); padding:30px 28px; min-height:320px; display:flex; flex-direction:column;}
.ledger .empty-state{margin:auto; text-align:center; color:var(--muted); font-size:.92rem; max-width:20em;}
.ledger .ledger-head{font-family:'Lora', serif; font-style:italic; font-size:1rem; color:var(--muted); margin-bottom:6px;}
.ledger .ledger-sub{font-size:.8rem; color:var(--muted); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.ledger-group-title{font-family:'Lora', serif; font-style:italic; font-size:.95rem; color:var(--muted); margin:18px 0 4px;}
.ledger-group-title:first-child{margin-top:0;}
.ledger-item{padding:11px 0; border-bottom:1px dashed var(--line); font-size:.92rem; opacity:0; transform:translateY(4px); animation:reveal .35s ease forwards;}
.ledger-item .li-row{display:flex; justify-content:space-between; gap:12px;}
.ledger-item .li-label{color:var(--ink);}
.ledger-item .li-note{display:block; font-size:.76rem; color:var(--muted); margin-top:2px;}
.ledger-item .li-value{font-family:'IBM Plex Mono', monospace; white-space:nowrap; font-weight:500;}
.li-bar-track{height:3px; background:var(--line); margin-top:9px; overflow:hidden;}
.li-bar-fill{height:100%; width:0; background:var(--teal); transition:width .7s cubic-bezier(.16,.8,.3,1);}
@keyframes reveal{ to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .ledger-item{animation:none; opacity:1; transform:none;} .li-bar-fill{transition:none;} }

.ledger-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:2px solid var(--ink);}
.ledger-total .lt-label{font-family:'Lora', serif; font-size:1.05rem;}
.ledger-total .lt-value{font-family:'IBM Plex Mono', monospace; font-size:1.5rem; font-weight:600; color:var(--teal-deep); font-variant-numeric:tabular-nums;}
.ledger-caveat{margin-top:20px; font-size:.76rem; color:var(--muted); line-height:1.6;}

/* FAQ */
.faq-section{border-top:1px solid var(--line); padding-top:44px; margin-top:10px;}
.faq-section h2{font-size:1.5rem;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 4px; margin:0;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:'Lora', serif; font-weight:600; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-icon{font-family:'IBM Plex Mono', monospace; color:var(--teal-deep); font-size:1.1rem; flex-shrink:0; transition:transform .2s ease;}
.faq-item[open] summary .faq-icon{transform:rotate(45deg);}
.faq-item p{color:var(--muted); margin:0; padding:0 4px 20px; max-width:44em; font-size:.94rem;}

/* article hub */
.article-list{display:flex; flex-direction:column; margin-top:38px; border-top:1px solid var(--line);}
.article-card{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
}
.article-card .ac-num{font-family:'IBM Plex Mono', monospace; color:var(--teal-deep); font-size:.85rem;}
.article-card .ac-title{font-family:'Lora', serif; font-size:1.25rem; font-weight:600;}
.article-card .ac-teaser{color:var(--muted); font-size:.94rem; margin-top:8px; max-width:42em;}
.article-card .ac-meta{color:var(--muted); font-size:.78rem; margin-top:10px; font-family:'IBM Plex Mono', monospace;}
.article-card:hover .ac-title{color:var(--teal-deep);}

/* article page */
.article-page{padding:52px 0 30px; max-width:42em;}
.article-page .kicker{font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--teal-deep); text-transform:uppercase; letter-spacing:.06em;}
.article-page h1{font-size:2.1rem; line-height:1.22; margin-top:10px;}
.article-page .article-meta{color:var(--muted); font-size:.85rem; margin-top:14px;}
.article-body{max-width:42em; padding-bottom:20px; font-size:1.02rem;}
.article-body h2{font-size:1.3rem; margin-top:38px; margin-bottom:12px;}
.article-body p{color:var(--ink); margin:0 0 18px;}
.article-body ul, .article-body ol{color:var(--ink); padding-left:22px; margin:0 0 18px;}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--teal-deep);}
.callout{
  background:var(--paper-raised); border:1px solid var(--line); border-left:3px solid var(--teal-deep);
  padding:18px 20px; margin:26px 0; font-size:.94rem; color:var(--ink);
}
.callout strong{display:block; font-family:'Lora', serif; font-style:italic; color:var(--teal-deep); margin-bottom:4px;}
.cta-box{
  background:var(--teal-deep); color:#fff; padding:26px 28px; margin:38px 0 10px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.cta-box .cta-text{max-width:28em;}
.cta-box .cta-text strong{display:block; font-family:'Lora', serif; font-size:1.1rem; margin-bottom:4px;}
.cta-box .cta-text span{color:#D9E8DE; font-size:.88rem;}
.cta-box a.cta-btn{
  background:#fff; color:var(--teal-deep); text-decoration:none; font-weight:600;
  padding:11px 18px; white-space:nowrap; font-size:.92rem;
}
.related-links{border-top:1px solid var(--line); margin-top:40px; padding-top:24px; max-width:42em;}
.related-links h3{font-size:1rem; margin-bottom:12px;}
.related-links a{display:block; padding:8px 0; font-size:.94rem;}

footer{border-top:1px solid var(--line); padding:34px 0 50px;}
footer p{font-size:.82rem; color:var(--muted); max-width:40em;}
footer .footer-links{margin-top:14px; display:flex; gap:18px;}
footer .footer-links a{font-size:.8rem; color:var(--teal-deep); text-decoration:none;}
footer .footer-links a:hover{text-decoration:underline;}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:48px;}
  .hero h1{font-size:2.1rem; max-width:none;}
  .calc-grid{grid-template-columns:1fr;}
  .page-intro h1{font-size:1.8rem;}
  .article-page h1{font-size:1.7rem;}
  nav{gap:14px; font-size:.84rem;}
  .article-card{grid-template-columns:1fr;}
  .cta-box{flex-direction:column; align-items:flex-start;}
}