/* La portada pública (parallevarpy.site): lo que ve quien no tiene la app y lo que revisa Meta. */
:root{--fondo:#0E1117;--sup:#161B26;--tinta:#F4F6FA;--apagado:#9CA6BA;--linea:rgba(255,255,255,.1);
  --marca:#FB7318;--grad:linear-gradient(135deg,#FF9A3C 0%,#F26A0F 100%);--sobre:#1A0D06;
  --letra:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color-scheme:dark}
@media (prefers-color-scheme:light){:root{--fondo:#F2F3F6;--sup:#FFFFFF;--tinta:#12151C;--apagado:#5F6878;--linea:rgba(16,24,40,.1);color-scheme:light}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--letra);line-height:1.55;font-size:16.5px}
a{color:inherit}
.caja{max-width:980px;margin:0 auto;padding:0 20px}
header.sup{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-.01em}
.marca i{font-style:normal;opacity:.7;font-weight:600}
.marca svg{flex:none}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:26px 0 46px}
.hero h1{font-size:clamp(32px,6vw,52px);line-height:1.05;letter-spacing:-.025em;margin:0 0 16px}
.hero p{margin:0 0 24px;font-size:18px;color:var(--apagado);max-width:34em}
.hero img{width:100%;max-width:340px;height:auto;justify-self:center;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.botones{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:15px;font-weight:700;font-size:16.5px;text-decoration:none;font-family:inherit}
.btn--marca{background:var(--grad);color:var(--sobre);box-shadow:0 12px 26px -8px rgba(251,115,24,.6)}
.btn--linea{border:1.5px solid var(--linea);background:var(--sup)}
h2{font-size:clamp(24px,4vw,32px);letter-spacing:-.02em;margin:0 0 20px}
section{padding:34px 0}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;counter-reset:p}
.pasos li{background:var(--sup);border:1px solid var(--linea);border-radius:20px;padding:20px;counter-increment:p}
.pasos li::before{content:counter(p);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:var(--sobre);font-weight:800;margin-bottom:12px}
.pasos b{display:block;font-size:18px;margin-bottom:4px}
.pasos span{color:var(--apagado);font-size:15.5px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dos .tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:20px;padding:22px}
.dos h3{margin:0 0 6px;font-size:19px}
.dos p{margin:0 0 14px;color:var(--apagado);font-size:15.5px}
.dato{background:var(--sup);border:1px solid var(--linea);border-radius:20px;padding:22px;display:grid;gap:6px;font-size:16px}
.dato b{font-weight:700}
footer{border-top:1px solid var(--linea);margin-top:30px;padding:24px 0 40px;color:var(--apagado);font-size:14.5px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
/* páginas de texto (privacidad, términos) */
.texto{max-width:720px;padding:10px 0 40px}
.texto h1{font-size:clamp(28px,5vw,38px);letter-spacing:-.02em;margin:10px 0 6px}
.texto h2{font-size:21px;margin:30px 0 8px}
.texto p,.texto li{color:var(--tinta);opacity:.9}
.texto .fecha{color:var(--apagado);font-size:14.5px;margin:0 0 20px}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;text-align:left;padding-top:8px}
  .hero img{max-width:230px;order:-1;justify-self:start}
  .pasos,.dos{grid-template-columns:1fr}
  .botones .btn{flex:1 1 100%}
}