/* Puig & Arnau · gestoría ficticia. Papel cálido, tinta azul noche, azul real para lo importante. */
:root{
  --paper:#f2efe8; --paper2:#fbfaf6; --ink:#12172b; --mute:#565a66; --mute-on-ink:#a9adbb;
  --line:rgba(18,23,43,.13); --acc:#2342d6; --acc-text:#2342d6; --on-acc:#fff;
  --fd:'Source Serif 4',Georgia,serif; --fd-weight:600; --fd-track:-.02em; --radius:2px; --foot-size:13vw;
}
.logo span{font-size:22px}
.hero{padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,5vw,80px);align-items:end}
.hero .h-display{font-size:clamp(3rem,7.6vw,7.4rem);max-width:12ch}
.hero-side{margin-top:30px}
.deadline{border-top:3px solid var(--ink);padding-top:18px}
.deadline small{display:block;color:var(--mute);font-size:15px}
.deadline b{display:block;font-size:clamp(5rem,11vw,9rem);line-height:.9;margin:8px 0 2px;color:var(--acc-text);font-variant-numeric:tabular-nums}
.deadline span{font-weight:600}
.deadline p{color:var(--mute);font-size:15px;margin:14px 0 0}

/* del caos al orden */
.or-pin{height:100svh;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);padding-top:clamp(20px,4vh,48px);overflow:hidden}
.or-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.or-say{display:grid;max-width:18ch;margin:0}
.or-say .say{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.or-say .say.on{opacity:1;transform:none}
.or-count{text-align:right;flex:none}
.or-count b{display:block;font-size:clamp(3.4rem,7vw,6rem);line-height:1;color:#8ea2ff;font-variant-numeric:tabular-nums}
.or-count span{color:var(--mute-on-ink);font-size:15px}
.or-stage{position:relative;flex:1;margin:clamp(12px,3vh,32px) var(--gut) 0;max-width:var(--max);width:calc(100% - 2*var(--gut));align-self:center}
.or-cols{position:absolute;inset:auto 0 0 0;height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,28px)}
.or-cols span{border-left:1px solid var(--line-on-ink);padding:8px 0 0 10px;font-family:var(--fd);font-weight:600;font-size:clamp(1.2rem,2vw,1.8rem);color:var(--mute-on-ink);opacity:0;transition:opacity .4s}
.or-stage.sorted .or-cols span{opacity:1}
.paper{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);background:#fbfaf6;color:#12172b;border-radius:2px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:11px;line-height:1.3;will-change:transform}
.paper b{display:block;font-weight:600;font-size:12px}
.paper i{display:block;height:3px;background:#d8d5cc;margin-top:6px;border-radius:2px}
.paper i:nth-of-type(2){width:70%}
.paper em{position:absolute;right:8px;bottom:6px;font-style:normal;font-weight:600}
.paper.m{background:#e6eaff}
.or-done{position:absolute;left:50%;bottom:22px;transform:translate(-50%,0) scale(.9);background:var(--acc);color:#fff;font-weight:600;padding:14px 22px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .4s,transform .4s}
.or-stage.sorted .or-done{opacity:1;transform:translate(-50%,0) scale(1)}

/* cuotas */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:40px}
.plans article{border-top:3px solid var(--ink);padding-top:20px}
.plans article.pick{border-color:var(--acc)}
.plans h3{font-size:1.2rem;margin:0}
.price{font-size:clamp(2.8rem,5vw,4rem);line-height:1;margin:14px 0 18px}
.price small{font-family:var(--ft);font-size:16px;font-weight:500;color:var(--mute);margin-left:4px}
.plans ul{list-style:none;margin:0;padding:0}
.plans li{padding:10px 0;border-top:1px solid var(--line);color:var(--mute)}

/* consulta */
.res-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.estimate{margin-top:34px;border-top:2px solid var(--ink);padding-top:20px}
.estimate small{display:block;color:var(--mute);font-size:15px}
.estimate b{margin:8px 0;color:var(--acc-text)}
.estimate span{color:var(--mute);font-size:15px}

/* casos, equipo */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:40px}
.cases article{border-top:1px solid var(--line-on-ink);padding-top:18px}
.cases b{display:block;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;color:#8ea2ff}
.cases p{color:var(--mute-on-ink);margin:12px 0 0}
.people{list-style:none;margin:36px 0 0;padding:0;border-top:2px solid var(--ink)}
.people li{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line)}
.people b{font-family:var(--fd);font-weight:600;font-size:1.5rem}
.people span{color:var(--mute);align-self:center}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:48px}
.quotes blockquote{margin:0}
.quotes p{margin:0 0 12px;font-family:var(--fd);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3}
.quotes cite{font-style:normal;color:var(--mute);font-size:15px}
.close .h-display{font-size:clamp(3rem,7vw,6.6rem);max-width:14ch}

@media (max-width:1020px){
  .hero-grid,.res-grid{grid-template-columns:minmax(0,1fr)}
  .plans,.cases{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .or-pin{height:calc(100svh - 64px)}
  .or-head{flex-direction:column;align-items:flex-start;gap:6px}
  .or-say{font-size:1.9rem}
  .or-count{text-align:left;display:flex;align-items:baseline;gap:10px}
  .or-count b{font-size:2.6rem}
  .paper{font-size:9px;padding:5px 6px}
  .paper b{font-size:9.5px}
  .paper em{display:none}
  .or-done{white-space:normal;width:86%;text-align:center;font-size:14px}
  .people li,.quotes{grid-template-columns:minmax(0,1fr)}
}