/* Homepage pública -- reutiliza las variables de color de style.css, pero
   con su propio layout de landing page (hero, features, precios), sin las
   restricciones de ancho del juego (#app) ni del panel (.panel-app). */

#app.homepage{max-width:none; width:100%;}

.hp-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.4rem; max-width:1080px; margin:0 auto;
}
.hp-nav .hp-logo{font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:.4rem;}
.hp-nav a{color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:.92rem;}

.hp-hero{
  text-align:center; padding:2.5rem 1.4rem 3rem; max-width:720px; margin:0 auto;
}
.hp-hero .hp-emoji{font-size:3.5rem;}
.hp-hero h1{font-size:2rem; margin:.4rem 0 .8rem;}
.hp-hero p{color:var(--ink-soft); font-size:1.05rem; max-width:52ch; margin:0 auto 1.6rem;}
.hp-hero-ctas{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;}

.hp-section{max-width:1080px; margin:0 auto; padding:2.4rem 1.4rem;}
.hp-section h2{font-size:1.4rem; text-align:center; margin-bottom:.4rem;}
.hp-section-sub{text-align:center; color:var(--ink-soft); max-width:56ch; margin:0 auto 1.8rem;}

.hp-features{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem;}
.hp-feature{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem; box-shadow:var(--shadow);
}
.hp-feature .hp-feature-icon{font-size:1.8rem;}
.hp-feature h3{font-size:1rem; margin:.5rem 0 .3rem;}
.hp-feature p{color:var(--ink-soft); font-size:.9rem; margin:0;}

.hp-planes{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.1rem; align-items:stretch;}
.hp-plan{
  background:var(--card); border:2px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.7rem;
}
.hp-plan h3{font-size:1.05rem; margin:0;}
.hp-plan .hp-plan-precio{font-size:1.7rem; font-weight:800; color:var(--grass-dark);}
.hp-plan .hp-plan-precio span{font-size:.85rem; font-weight:600; color:var(--ink-soft);}
.hp-plan .hp-plan-limite{color:var(--ink-soft); font-size:.9rem;}
.hp-plan button{margin-top:auto;}

.hp-como{display:flex; flex-direction:column; gap:1rem; max-width:640px; margin:0 auto;}
.hp-paso{display:flex; gap:.9rem; align-items:flex-start;}
.hp-paso-num{
  width:32px; height:32px; border-radius:50%; background:var(--grass); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.hp-paso h3{font-size:.98rem; margin:0 0 .2rem;}
.hp-paso p{color:var(--ink-soft); font-size:.9rem; margin:0;}

.hp-footer{text-align:center; padding:2rem 1.4rem 3rem; color:var(--ink-soft); font-size:.85rem;}
.hp-footer a{color:var(--ink-soft);}

.hp-modal-overlay{
  position:fixed; inset:0; background:rgba(22,48,36,.55); display:flex; align-items:center;
  justify-content:center; padding:1rem; z-index:20;
}
.hp-modal-card{
  background:var(--card); border-radius:var(--radius); padding:1.6rem; max-width:400px; width:100%;
  max-height:90vh; overflow-y:auto;
}