/* landing.css — landing web de PONS.
   Traslada docs/brochure/pons-brochure.html (v5.2) a la web: mismas reglas de color
   (navy = estructura, rosa = lo nuevo y el acento, firma = degradé, sin azul).
   Acá NO se definen colores propios: todo sale de pons-tokens.css.
   Unidades de impresión convertidas: 1 mm ≈ 3,78 px, 1 pt ≈ 1,333 px. */

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--pons-fuente-cuerpo); color:var(--pons-texto);
  font-size:1rem; line-height:1.55; background:var(--pons-superficie);
  text-align:left; overflow-wrap:break-word;
}
h1,h2,h3,.num{ font-family:var(--pons-fuente-titulos); letter-spacing:normal; }
em,i{ font-style:normal; }
a{ color:var(--pons-link); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ color:var(--pons-estructura); font-weight:700; }
p{ margin:0 0 .75rem; }
img{ max-width:100%; }

:focus-visible{ outline:3px solid var(--pons-acento-texto); outline-offset:3px; border-radius:2px; }
.btn:focus-visible{ outline-color:var(--pons-estructura); }

.saltar{
  position:absolute; left:.75rem; top:-4rem; z-index:20;
  background:var(--pons-estructura); color:var(--pons-sobre-primario);
  padding:.6rem 1rem; border-radius:var(--pons-radio); font-weight:700;
}
.saltar:focus{ top:.75rem; }

.contenedor{ width:100%; max-width:1040px; margin:0 auto; padding:0 1.25rem; }
@media (min-width:720px){ .contenedor{ padding:0 2.5rem; } }

/* ---------- header ---------- */
.cabecera{
  position:sticky; top:0; z-index:10; background:var(--pons-superficie);
  border-bottom:1px solid var(--pons-linea);
}
.cabecera .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem; }
.cabecera .marca{ display:flex; align-items:center; }
.cabecera .marca img{ height:2.4rem; width:auto; display:block; }
.cabecera .derecha{ display:flex; align-items:center; gap:1.5rem; }
.cabecera img.mi{ height:1.2rem; width:auto; display:none; }
@media (min-width:720px){ .cabecera img.mi{ display:block; } }
.cabecera .enlace-manual{ font-weight:600; font-size:.95rem; white-space:nowrap; }
@media (max-width:479px){ .cabecera .derecha{ gap:1rem; } }

a.btn{
  display:inline-block; white-space:nowrap; background:var(--pons-cta); color:var(--pons-sobre-cta);
  font-family:var(--pons-fuente-titulos); font-weight:700; font-size:1.1rem; line-height:1.2;
  padding:1rem 1.75rem; border-radius:var(--pons-radio);
}
a.btn:hover{ text-decoration:none; background:var(--pons-estructura); }
a.btn.chico{ font-size:.95rem; padding:.6rem 1.1rem; }
.disp{ margin-top:.8rem; font-size:.8rem; color:var(--pons-texto-terciario); }

/* ---------- secciones ---------- */
.seccion{ padding:4rem 0; }
.seccion + .seccion{ border-top:1px solid var(--pons-linea-suave); }
@media (min-width:720px){ .seccion{ padding:5.5rem 0; } }
.eyebrow{
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:800;
  color:var(--pons-acento-texto); margin:0 0 .75rem;
}
h2{ font-size:clamp(1.9rem, 5.5vw, 2.6rem); line-height:1.1; color:var(--pons-estructura); margin:0 0 1.25rem; font-weight:700; }
h2 .nuevo{ color:var(--pons-acento-texto); }
h3{ font-size:1.15rem; line-height:1.3; color:var(--pons-estructura); margin:0 0 .35rem; font-weight:700; }
.lead{ font-size:1.15rem; line-height:1.5; margin-bottom:2.5rem; max-width:40rem; }
.sello{
  display:inline-block; font-family:var(--pons-fuente-titulos); font-weight:700; font-size:.85rem;
  padding:.1rem .8rem; border-radius:var(--pons-radio-pill); background:var(--pons-estructura);
  color:var(--pons-sobre-primario); vertical-align:2px;
}
.sello.rosa{ background:var(--pons-acento-oscuro); }

/* ---------- portada ---------- */
.portada{ position:relative; padding:3.5rem 0 4rem; }
.portada .franja{ position:absolute; left:0; top:0; bottom:0; width:8px; background:var(--pons-firma); }
@media (min-width:720px){ .portada{ padding:5rem 0 5.5rem; } .portada .franja{ width:12px; } }
.portada .tag{ font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:800; color:var(--pons-acento-texto); margin:0; }
.portada h1{ font-size:clamp(2.2rem, 7vw, 3.7rem); line-height:1.05; color:var(--pons-estructura); margin:1.1rem 0 1.5rem; font-weight:700; max-width:52rem; }
.portada h1 .nuevo{ color:var(--pons-acento-texto); }
.portada .bajada{ font-size:clamp(1.15rem, 3.2vw, 1.35rem); line-height:1.45; color:var(--pons-estructura); max-width:38rem; margin:0; }
.kpis{ list-style:none; padding:0; margin:3rem 0 2.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .kpis{ grid-template-columns:repeat(3, 1fr); gap:1.25rem; } }
.kpi{ background:var(--pons-estructura); border-radius:var(--pons-radio); padding:1.4rem 1.4rem 1.5rem; }
.kpi.rosa{ background:var(--pons-acento-oscuro); }
.kpi .num{ font-size:clamp(2.6rem, 6vw, 3.2rem); font-weight:700; color:var(--pons-sobre-primario); line-height:1; display:block; }
.kpi small{ font-size:.95rem; color:var(--pons-sobre-primario); line-height:1.35; display:block; margin-top:.6rem; }

/* ---------- beneficios ---------- */
.beneficios{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:720px){ .beneficios{ grid-template-columns:1fr 1fr; gap:2.25rem 2.5rem; } }
.ben{ display:grid; grid-template-columns:3.5rem 1fr; gap:0 1.1rem; align-items:start; }
.ico{ width:3.5rem; height:3.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--pons-estructura); }
.ico.rosa{ background:var(--pons-acento-oscuro); }
.ico svg{ width:1.9rem; height:1.9rem; }
.ico svg *{ fill:none; stroke:var(--pons-sobre-primario); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ben p{ margin:0; font-size:1rem; line-height:1.5; }
.para{ margin-top:3rem; border-radius:var(--pons-radio); padding:1.4rem 1.6rem; background:var(--pons-fondo-neutro); border-top:3px solid var(--pons-estructura); }
.para p{ margin:0; font-size:1.05rem; color:var(--pons-estructura); }
.chips{ list-style:none; padding:0; margin:.8rem 0 0; display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ display:inline-block; border-radius:var(--pons-radio-pill); padding:.25rem .85rem; font-size:.9rem; font-weight:600; background:var(--pons-estructura); color:var(--pons-sobre-primario); }
.chip.rosa{ background:var(--pons-acento-oscuro); }

/* ---------- 3 pasos ---------- */
.pasos{ list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:760px){ .pasos{ grid-template-columns:repeat(3, 1fr); gap:1.4rem; } }
.pasog{ border-radius:10px; padding:1.6rem 1.4rem 1.8rem; }
@media (min-width:760px){ .pasog{ min-height:18rem; } }
.pasog.p1{ background:var(--pons-estructura); }
.pasog.p2{ background:var(--pons-firma); }
.pasog.p3{ background:var(--pons-acento-oscuro); }
.pasog .n{ font-family:var(--pons-fuente-titulos); font-size:clamp(3rem, 8vw, 4.5rem); font-weight:700; line-height:1; color:var(--pons-sobre-primario-acento); }
.pasog h3{ color:var(--pons-sobre-primario); font-size:1.3rem; margin:1.1rem 0 .7rem; }
.pasog p{ color:var(--pons-sobre-primario); font-size:1rem; margin:0; }

.flujo{ margin-top:3.5rem; display:grid; grid-template-columns:1fr; justify-items:stretch; gap:.4rem; }
@media (min-width:760px){ .flujo{ grid-template-columns:1fr 3.5rem 1fr 3.5rem 1fr; align-items:center; gap:0; } }
.flujo .nodo{
  border:2px solid var(--pons-estructura); border-radius:10px; padding:1.3rem 1rem; text-align:center;
  font-family:var(--pons-fuente-titulos); font-weight:700; font-size:1.2rem; color:var(--pons-estructura);
}
.flujo .nodo.pons{ border:none; background:var(--pons-firma); color:var(--pons-sobre-primario); display:flex; align-items:center; justify-content:center; gap:.75rem; }
.flujo .nodo.pons img{ height:2.2rem; width:auto; }
.flujo .nodo.red{ border-color:var(--pons-acento-oscuro); color:var(--pons-acento-texto); }
.flujo .nodo small{ display:block; font-family:var(--pons-fuente-cuerpo); font-weight:500; font-size:.85rem; color:var(--pons-texto-terciario); margin-top:.25rem; }
.flujo svg{ width:2.8rem; height:1.9rem; margin:auto; display:block; transform:rotate(90deg); }
@media (min-width:760px){ .flujo svg{ transform:none; } }
.flujo svg *{ fill:none; stroke:var(--pons-acento); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.nota-flujo{ margin-top:2rem; text-align:center; font-size:1rem; }

/* ---------- cierre ---------- */
.confianza{
  background:var(--pons-estructura); border-radius:10px; padding:2rem 1.75rem; color:var(--pons-sobre-primario);
  font-family:var(--pons-fuente-titulos); font-size:clamp(1.25rem, 3.6vw, 1.55rem); line-height:1.35; font-weight:600; margin:0;
}
@media (min-width:720px){ .confianza{ padding:2.25rem 2.4rem; } }
.confianza .nuevo{ color:var(--pons-sobre-primario-acento); }
.familia{ margin-top:2.25rem; display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:720px){ .familia{ grid-template-columns:1fr 1fr; gap:2rem; } }
.caja{ border-radius:var(--pons-radio); padding:1.4rem 1.6rem; border:1px solid var(--pons-linea); border-top:3px solid var(--pons-acento); }
.caja.navy{ border-top-color:var(--pons-estructura); }
.caja h3 img.mi-titulo{ height:1.4rem; width:auto; display:block; margin:.25rem 0 .5rem; }
.caja p{ margin:0; font-size:1rem; }

.cta-final{
  margin-top:2.75rem; display:grid; grid-template-columns:1fr; gap:1.25rem;
  border-radius:10px; padding:1.8rem 1.6rem; background:var(--pons-acento-fondo); scroll-margin-top:5.5rem;
}
@media (min-width:720px){ .cta-final{ grid-template-columns:1fr auto; align-items:center; gap:2rem; padding:2rem 2.25rem; } }
.cta-final h3{ font-size:1.55rem; margin:0 0 .3rem; }
.cta-final p{ margin:0; font-size:1rem; }
.cta-final .disp{ margin-top:0; }
.contacto{ margin-top:.6rem !important; color:var(--pons-estructura); font-weight:600; }
.contacto a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---------- pie ---------- */
.pie{ padding:0 0 2rem; }
.pie .contenedor > div{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem;
  border-top:1px solid; border-image:var(--pons-firma-horizontal) 1; padding-top:1rem;
  font-size:.85rem; color:var(--pons-texto-terciario);
}
.pie a{ color:var(--pons-link); font-weight:600; }