/* ============================================================
   index.html — landing pública de presentación/ventas (Fase 1, a pedido
   y confirmado por el usuario). Página nueva, secciones propias — a
   diferencia de login/signup/etc. (tarjeta chica centrada), esta es una
   página larga con scroll. Reutiliza variables de color/tipografía de
   brand-theme.css (--cream/--cacao/--raspberry/etc., ya en :root) y
   componentes genéricos de base.css (.btn, .card) — nada de eso se
   redefine acá, solo el layout de las secciones nuevas.
   El selector de idioma con banderas NO tiene CSS propia acá: reusa
   .auth-lang-switcher/.auth-lang-opt/etc. de auth-theme.css (linkeado
   también desde index.html solo por eso, ver comentario en ese archivo).
   ============================================================ */

body{ overflow-x:hidden; }

.landing-lang-bar{
  display:flex; justify-content:center; padding:18px 16px 0;
}
.landing-lang-bar .auth-lang-switcher{ max-width:320px; }

/* ---- Hero ---- */
.landing-hero{
  max-width:720px; margin:0 auto; padding:20px 20px 36px; text-align:center;
}
.landing-hero .auth-logo{ margin-bottom:18px; }
.landing-hero-img{
  width:100%; max-width:520px; border-radius:20px; display:block; margin:0 auto 22px;
}
.landing-hero-tagline{
  font-size:1.05rem; color:var(--cacao-soft); line-height:1.55; max-width:560px; margin:0 auto 26px;
}
.landing-hero-ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.landing-hero-ctas .btn{ min-width:190px; }

/* ---- Qué resuelve ---- */
.landing-features{
  background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:40px 20px;
}
.landing-features h2{ text-align:center; margin:0 0 28px; font-size:1.5rem; }
.landing-features-grid{
  max-width:960px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.landing-feature-card{
  background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:20px;
}
.landing-feature-icon{ font-size:1.7rem; margin-bottom:8px; }
.landing-feature-card h3{ font-size:1.05rem; margin:0 0 6px; }
.landing-feature-card p{ font-size:.86rem; color:var(--cacao-soft); line-height:1.5; margin:0; }

/* ---- Planes ---- */
.landing-plans{ max-width:900px; margin:0 auto; padding:44px 20px; }
.landing-plans h2{ text-align:center; margin:0 0 28px; font-size:1.5rem; }
.landing-plans-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.landing-plan-card{
  background:var(--white); border:1px solid var(--line); border-radius:18px; padding:26px 22px;
  display:flex; flex-direction:column;
}
.landing-plan-card-highlight{ border-color:var(--raspberry); box-shadow:0 6px 20px rgba(55,167,167,.12); }
.landing-plan-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.2rem; color:var(--cacao); }
.landing-plan-sub{ font-size:.82rem; color:var(--cacao-soft); margin-bottom:14px; }
.landing-plan-price{ font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--caramel); margin-bottom:14px; }
.landing-plan-card ul{ list-style:none; margin:0 0 20px; padding:0; flex:1; }
.landing-plan-card li{
  font-size:.86rem; color:var(--cacao); padding:6px 0 6px 22px; position:relative;
}
.landing-plan-card li::before{ content:'✓'; position:absolute; left:0; color:var(--raspberry-deep); font-weight:700; }
.landing-plan-card .btn{ width:100%; text-align:center; }

/* ---- Footer ---- */
.landing-footer{ text-align:center; padding:10px 20px 34px; }

@media(max-width:720px){
  .landing-features-grid, .landing-plans-grid{ grid-template-columns:1fr; }
  .landing-hero-ctas{ flex-direction:column; align-items:center; }
  .landing-hero-ctas .btn{ width:100%; max-width:280px; }
}