/* ===========================================================
   PPF.com.ar — Home (Fase 1) · layout a escala real
   Reutiliza tokens + atoms de ppf-system.css.
   Piel principal B2 light crema; un solo bloque A2 dark.
   =========================================================== */

.app{padding-top:0;}
.home-wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
@media(max-width:720px){.home-wrap{padding:0 22px;}}

/* ---------- NAV ---------- */
.hnav{position:fixed;top:0;left:0;right:0;z-index:200;height:66px;
  background:rgba(250,250,247,0.82);backdrop-filter:saturate(140%) blur(20px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;}
.hnav .home-wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:26px;}
.hnav .brand{display:inline-flex;align-items:baseline;text-decoration:none;}
.hnav .brand .wm{font-size:1.32rem;}
.hnav .nav-mid{display:flex;align-items:center;gap:4px;}
.hnav .nav-mid a{font-size:0.94rem;font-weight:500;letter-spacing:-0.01em;color:var(--text-2);
  text-decoration:none;padding:8px 14px;border-radius:8px;transition:.16s;}
.hnav .nav-mid a:hover{color:var(--text);background:var(--surface-2);}
.hnav .nav-right{display:flex;align-items:center;gap:18px;}
.hnav .soy{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border:1px solid var(--border);border-radius:8px;
  padding:9px 13px;transition:.16s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.hnav .soy::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--muted);transition:.16s;}
.hnav .soy:hover{color:var(--text);border-color:var(--acc-line);}
.hnav .soy:hover::before{background:var(--acc-cta);}
@media(max-width:920px){.hnav .nav-mid{display:none;}}
@media(max-width:520px){.hnav .soy span{display:none;}}

/* ---------- SECTION SCAFFOLD ---------- */
.hsec{padding:104px 0;border-top:1px solid var(--border);}
.hsec.tight{padding:88px 0;}
.eyebrow{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--acc-cta);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc-cta);}
.hsec h2{font-weight:800;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.0;letter-spacing:-0.04em;
  max-width:20ch;text-wrap:balance;}
.hsec h2 .cy{color:var(--acc-cta);}
.hsec .lead{font-size:1.12rem;color:var(--muted);line-height:1.62;margin-top:20px;max-width:60ch;}
.softlink{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:600;
  font-size:1rem;letter-spacing:-0.015em;color:var(--acc-cta);text-decoration:none;
  border-bottom:1px solid var(--acc-line);padding-bottom:2px;transition:.16s;width:fit-content;}
.softlink .ar{font-family:var(--mono);}
.softlink:hover{gap:12px;border-color:var(--acc-cta);}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:148px 0 96px;border-top:none;}
.hero .glow-bg{position:absolute;top:-20%;right:-8%;width:54%;height:130%;
  background:radial-gradient(circle at 60% 40%,var(--glow),transparent 64%);pointer-events:none;}
.hero .home-wrap{position:relative;z-index:2;}
.hero h1{font-weight:800;font-size:clamp(2.7rem,6.2vw,5.1rem);line-height:0.95;
  letter-spacing:-0.046em;max-width:15ch;text-wrap:balance;}
.hero h1 .cy{color:var(--acc-cta);}
.hero .sub{font-size:1.22rem;color:var(--text-2);line-height:1.55;margin-top:26px;max-width:50ch;}
.hero .cta-row{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hero .btn{font-size:1rem;padding:15px 26px;border-radius:11px;}

/* honest mini-search */
.minisearch{margin-top:38px;max-width:680px;}
.minisearch .ms-card{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:end;
  background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:15px;
  box-shadow:0 30px 60px -44px rgba(20,30,35,0.4);}
.minisearch .ms-card .btn{height:46px;padding:0 22px;border-radius:10px;}
.minisearch .micro{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.04em;
  color:var(--muted);margin-top:14px;line-height:1.55;display:flex;align-items:flex-start;gap:9px;
  text-transform:none;}
.minisearch .micro::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc-cta);
  margin-top:6px;flex-shrink:0;}
@media(max-width:640px){.minisearch .ms-card{grid-template-columns:1fr;}.minisearch .ms-card .btn{width:100%;justify-content:center;}}

/* ---------- DIFERENCIAL (3 cols) ---------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
@media(max-width:780px){.tri{grid-template-columns:1fr;}}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;
  display:flex;flex-direction:column;gap:14px;transition:.18s;}
.tcard:hover{border-color:var(--acc-line);}
.tcard .tnum{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--acc-cta);}
.tcard .tic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.tcard .tic .g{width:18px;height:18px;border:2px solid var(--acc-cta);}
.tcard .tic .g.c{border-radius:50%;}
.tcard .tic .g.d{transform:rotate(45deg);}
.tcard h3{font-weight:700;font-size:1.28rem;letter-spacing:-0.03em;line-height:1.1;margin-top:4px;}
.tcard p{font-size:0.98rem;color:var(--muted);line-height:1.6;}

/* ---------- QUÉ ES EL PPF (split) ---------- */
.split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px;}}
.split .body{font-size:1.12rem;color:var(--text-2);line-height:1.72;margin-top:22px;max-width:48ch;}
.split .body b{color:var(--text);font-weight:600;}
.qsteps{display:flex;flex-direction:column;gap:0;}
.qstep{display:grid;grid-template-columns:40px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);}
.qstep:first-child{padding-top:0;}
.qstep:last-child{border-bottom:none;}
.qstep .qn{font-family:var(--mono);font-size:0.82rem;color:var(--acc-cta);letter-spacing:0.04em;}
.qstep .qh{font-weight:700;font-size:1.08rem;letter-spacing:-0.025em;margin-bottom:5px;}
.qstep .qp{font-size:0.96rem;color:var(--muted);line-height:1.55;}

/* ---------- TRES SERVICIOS ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
@media(max-width:780px){.svcs{grid-template-columns:1fr;}}
.svc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--text);transition:.18s;}
.svc-card:hover{border-color:var(--acc-line);transform:translateY(-3px);
  box-shadow:0 30px 50px -40px rgba(20,30,35,0.35);}
.svc-card .sv-ic{width:50px;height:50px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.svc-card .sv-ic .g{width:20px;height:20px;border:2px solid var(--acc-cta);}
.svc-card .sv-ic .g.c{border-radius:50%;}
.svc-card .sv-ic .g.d{transform:rotate(45deg);}
.svc-card h3{font-weight:700;font-size:1.3rem;letter-spacing:-0.03em;margin-top:6px;}
.svc-card p{font-size:0.98rem;color:var(--muted);line-height:1.58;flex:1;}
.svc-card .go{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--acc-cta);display:inline-flex;align-items:center;gap:7px;margin-top:4px;}
.svc-card:hover .go{gap:11px;}

/* ---------- GARANTÍA DIGITAL · A2 DARK ---------- */
.warranty{background:#0A0C0F;color:#F3F6F8;position:relative;overflow:hidden;
  border-top:1px solid #1F242C;border-bottom:1px solid #1F242C;}
.warranty::before{content:"";position:absolute;top:-30%;left:34%;width:48%;height:160%;
  background:radial-gradient(circle,rgba(51,212,226,0.16),transparent 62%);pointer-events:none;}
.warranty .home-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 0.86fr;
  gap:60px;align-items:center;padding-top:104px;padding-bottom:104px;}
@media(max-width:860px){.warranty .home-wrap{grid-template-columns:1fr;gap:48px;}}
.warranty .eyebrow{color:#33D4E2;}
.warranty .eyebrow::before{background:#33D4E2;}
.warranty h2{font-weight:800;font-size:clamp(2rem,4vw,3.1rem);line-height:1.02;letter-spacing:-0.04em;
  max-width:18ch;text-wrap:balance;}
.warranty h2 .cy{color:#33D4E2;}
.warranty .wp{font-size:1.12rem;color:#C3CAD3;line-height:1.66;margin-top:22px;max-width:48ch;}
.warranty .wmeta{margin-top:28px;display:flex;flex-direction:column;gap:0;max-width:46ch;}
.warranty .wmeta .wm-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid #1F242C;}
.warranty .wmeta .wm-row:last-child{border-bottom:none;}
.warranty .wmeta .k{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.13em;text-transform:uppercase;color:#33D4E2;white-space:nowrap;}
.warranty .wmeta .v{font-size:0.96rem;color:#C3CAD3;line-height:1.45;}
.warranty .micro{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.04em;color:#6B7682;
  margin-top:26px;line-height:1.55;display:flex;align-items:flex-start;gap:9px;}
.warranty .micro::before{content:"";width:6px;height:6px;border-radius:50%;background:#33D4E2;
  margin-top:5px;flex-shrink:0;}
.warranty .phone-col{display:flex;justify-content:center;}

/* sample badge over the pass */
.pass-wrap{position:relative;}
.sample-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:8;
  font-family:var(--mono);font-size:0.54rem;letter-spacing:0.13em;text-transform:uppercase;
  color:#06171B;background:#33D4E2;border-radius:999px;padding:6px 13px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(51,212,226,0.6);}

/* ---------- PRESUPUESTOS (split + cost vis) ---------- */
.pricewhy-home{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
@media(max-width:860px){.pricewhy-home{grid-template-columns:1fr;gap:40px;}}
.pricewhy-home .body{font-size:1.1rem;color:var(--text-2);line-height:1.7;margin-top:22px;max-width:50ch;}
.pricewhy-home .body b{color:var(--text);font-weight:600;}
.costvis{display:flex;flex-direction:column;gap:14px;}
.costbar{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;}
.costbar .cb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.costbar .cb-n{font-weight:700;font-size:1.02rem;letter-spacing:-0.025em;}
.costbar .cb-t{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.costtrack{height:13px;border-radius:7px;background:var(--surface-2);overflow:hidden;display:flex;}
.costtrack .mat{background:var(--acc-cta);}
.costtrack .lab{background:var(--surface-3);}
.costleg{display:flex;gap:20px;margin-top:18px;font-family:var(--mono);font-size:0.56rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.costleg span{display:flex;align-items:center;gap:8px;}
.costleg .sq{width:11px;height:11px;border-radius:3px;}
.costleg .sq.mat{background:var(--acc-cta);}
.costleg .sq.lab{background:var(--surface-3);}
.costbar.note{background:var(--surface-2);border-style:dashed;}
.costbar.note p{font-size:0.92rem;color:var(--muted);line-height:1.55;}
.costbar.note p b{color:var(--text);font-weight:600;}

/* ---------- GUÍA (3 teasers) ---------- */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
@media(max-width:780px){.teasers{grid-template-columns:1fr;}}
.teaser{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;transition:.18s;}
.teaser:hover{border-color:var(--acc-line);transform:translateY(-3px);}
.teaser .t-img{aspect-ratio:16/10;}
.teaser .t-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:14px;flex:1;}
.teaser .t-kick{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--muted);}
.teaser h3{font-weight:700;font-size:1.18rem;letter-spacing:-0.03em;line-height:1.18;}
.teaser .go{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--acc-cta);display:inline-flex;align-items:center;gap:7px;margin-top:auto;}
.teaser:hover .go{gap:11px;}

/* ---------- CTA FINAL (acceso anticipado) ---------- */
.accbesso{background:var(--surface);border:1px solid var(--border);border-radius:22px;
  padding:64px;display:grid;grid-template-columns:1fr 0.9fr;gap:54px;align-items:center;
  position:relative;overflow:hidden;}
.accbesso::before{content:"";position:absolute;top:-40%;right:-6%;width:42%;height:170%;
  background:radial-gradient(circle,var(--glow),transparent 64%);pointer-events:none;}
.accbesso>*{position:relative;z-index:2;}
@media(max-width:820px){.accbesso{grid-template-columns:1fr;gap:36px;padding:44px 32px;}}
.accbesso h2{font-weight:800;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-0.04em;max-width:16ch;}
.accbesso .ab-p{font-size:1.12rem;color:var(--muted);line-height:1.6;margin-top:18px;max-width:42ch;}
.accform{display:flex;flex-direction:column;gap:14px;}
.accform .btn{height:50px;justify-content:center;font-size:1rem;border-radius:11px;}
.accform .micro{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.04em;color:var(--muted);
  line-height:1.55;margin-top:2px;}

/* ---------- FOOTER ---------- */
.hfoot{background:#0A0C0F;color:#F3F6F8;padding:88px 0 46px;border-top:1px solid #1F242C;}
.hfoot .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:48px;align-items:start;}
@media(max-width:860px){.hfoot .fgrid{grid-template-columns:1fr 1fr;gap:40px 32px;}}
@media(max-width:560px){.hfoot .fgrid{grid-template-columns:1fr;}}
.hfoot .fbrand .wm{font-size:2rem;color:#F3F6F8;}
.hfoot .fbrand .wm .d-ink{color:#F3F6F8;}
.hfoot .fbrand p{color:#8A93A0;font-size:0.96rem;line-height:1.6;margin-top:16px;max-width:34ch;}
.hfoot .fcol h4{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;
  color:#33D4E2;margin-bottom:16px;}
.hfoot .fcol ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.hfoot .fcol a{color:#C3CAD3;text-decoration:none;font-size:0.95rem;transition:.15s;}
.hfoot .fcol a:hover{color:#F3F6F8;}
.hfoot .fcol .eco-item{font-size:0.92rem;color:#C3CAD3;display:flex;align-items:baseline;gap:8px;}
.hfoot .fcol .eco-item .st{font-family:var(--mono);font-size:0.5rem;letter-spacing:0.1em;
  text-transform:uppercase;color:#6B7682;}
.hfoot .fcol .eco-item .st.live{color:#33D4E2;}
.hfoot .fbot{margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.09);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;}
.hfoot .fbot .lines{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:0.62rem;
  letter-spacing:0.06em;text-transform:uppercase;color:#6B7682;}
.hfoot .fbot .lines a{color:#C3CAD3;text-decoration:none;border-bottom:1px solid rgba(51,212,226,0.4);padding-bottom:1px;}
.hfoot .fbot .lines a:hover{color:#33D4E2;}
.hfoot .fbot .legal{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:#4A535E;}

/* shared image placeholder tone tweak for light */
.imgph.soft{min-height:0;}