:root{
  --ink:#152431;
  --ink-soft:#3c4d59;
  --paper:#eef0ea;
  --paper-raised:#f6f7f2;
  --line:#c7c6b8;
  --green:#2f6b5b;
  --green-soft:#e2ebe4;
  --amber:#a9702c;
  --amber-soft:#f2e7d5;
  --max:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

h1,h2,h3{
  font-family:'Spectral', serif;
  font-weight:500;
  margin:0;
  color:var(--ink);
}

.num{font-family:'IBM Plex Mono', monospace;}

a{color:inherit;}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  padding:12px 18px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.skip-link:focus,
.skip-link:focus-visible{
  left:0;
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* ---------- header ---------- */
header{
  padding:32px 0 18px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
}
.brand-logo{
  display:block;
  height:38px;
  width:auto;
}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 56px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.hero h1{
  font-size:38px;
  line-height:1.2;
  letter-spacing:-0.01em;
}
.hero p.lede{
  margin-top:18px;
  font-size:17px;
  color:var(--ink-soft);
  max-width:46ch;
}
.hero-figure{
  display:flex;
  justify-content:center;
}
.hero-figure svg{width:100%; max-width:270px; height:auto;}

/* ---------- section shell ---------- */
section{padding:52px 0;}
section.divider{border-top:1px solid var(--line);}
.section-head{margin-bottom:28px; max-width:52ch;}
.section-head h2{font-size:25px;}
.section-head p{margin-top:10px; color:var(--ink-soft); font-size:15.5px;}

/* ---------- ledger table ---------- */
.ledger{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.ledger table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.ledger col.col-situ{width:46%;}
.ledger col.col-now{width:27%;}
.ledger col.col-then{width:27%;}
.ledger th,
.ledger td{
  padding:22px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.55;
}
.ledger th:not(:last-child),
.ledger td:not(:last-child){
  padding-right:28px;
}
.ledger tbody tr:last-child td{border-bottom:none;}
.ledger thead th{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  padding-top:14px;
  padding-bottom:16px;
  font-weight:400;
}
.ledger .situ{font-size:15px; color:var(--ink); line-height:1.5;}
.ledger .now{
  font-size:14px;
  color:var(--amber);
  line-height:1.55;
}
.ledger .then{
  font-size:14px;
  color:var(--green);
  font-weight:500;
  line-height:1.55;
}

/* ---------- timeline ---------- */
.timeline{
  position:relative;
  padding-left:30px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line);
}
.tl-item{
  position:relative;
  padding-bottom:30px;
}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";
  position:absolute;
  left:-30px;
  top:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--ink);
}
.tl-item.done::before{
  background:var(--green);
  border-color:var(--green);
}
.tl-item .tl-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.tl-item h3{font-size:17px; font-weight:500;}
.tl-item p{margin:6px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:50ch;}

/* ---------- pricing ---------- */
.pricing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.price-card{
  background:var(--paper-raised);
  padding:26px 24px;
}
.price-card .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.price-card .amount{
  font-family:'Spectral', serif;
  font-size:34px;
  margin-top:8px;
}
.price-card .unit{font-size:15px; color:var(--ink-soft); font-family:'IBM Plex Sans', sans-serif;}
.price-card .desc{margin-top:8px; font-size:13.5px; color:var(--ink-soft);}
.pricing-note{
  margin-top:18px;
  font-size:14px;
  color:var(--ink-soft);
  border-left:2px solid var(--line);
  padding-left:14px;
}

/* ---------- footer / cta ---------- */
footer{
  padding:52px 0 60px;
  border-top:1px solid var(--line);
}
footer h2{font-size:23px; max-width:24ch;}
footer p{color:var(--ink-soft); margin-top:12px; max-width:48ch;}
.cta-row{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.cta-btn{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14.5px;
  font-weight:500;
  padding:12px 22px;
  text-decoration:none;
  display:inline-block;
}
.cta-btn:focus-visible, a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}
.foot-url{font-family:'IBM Plex Mono', monospace; font-size:13.5px; color:var(--ink-soft);}

@media (max-width:680px){
  .hero{grid-template-columns:1fr; gap:28px;}
  .hero-figure{order:-1;}
  .hero-figure svg{max-width:170px;}
  .ledger thead{display:none;}
  .ledger col{display:none;}
  .ledger tbody tr{
    display:block;
    padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .ledger tbody tr:last-child{border-bottom:none;}
  .ledger td{
    display:block;
    padding:0;
    border-bottom:none;
  }
  .ledger td.situ{
    font-size:15px;
    margin-bottom:8px;
    line-height:1.5;
  }
  .ledger td.now::before{content:"Hoy — "; color:var(--ink-soft);}
  .ledger td.then::before{content:"Con Recoba — "; color:var(--green);}
  .ledger td.now,
  .ledger td.then{
    padding-top:6px;
    line-height:1.55;
  }
  .pricing{grid-template-columns:1fr;}
}