:root{
  --bg-900:#0e1117;
  --bg-800:#121722;
  --card-700:#1a1f2e;
  --line:#2a3142;

  --txt-100:#e6e9f0;
  --txt-200:#c8cede;

  --brand:#1a1f36;
  --accent:#ff7f50;
}

/* Base */
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg-900);color:var(--txt-100);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6;}
a{color:#9ecbff;text-decoration:none;} a:hover{opacity:.9;}
.container{width:min(1120px,92%);margin-inline:auto;}

/* Topbar */
.topbar{background:var(--bg-800);border-bottom:1px solid var(--line);}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--txt-100);}
.brand__logo{height:28px;width:auto;display:block;}
.brand__title{font-weight:800;letter-spacing:.3px;}
.brand__tag{color:var(--txt-200);font-size:.92rem;}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0;}
.nav a{padding:.45rem .6rem;border-radius:8px;color:var(--txt-100);}
.nav a:hover{background:#0f1320;}

/* ==== Hero en grid (texto + imagen) ==== */
.hero{ padding:clamp(48px,8vw,96px) 0; }
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}
.hero__content{ text-align:left; }
.hero__title{ font-weight:900; font-size:clamp(28px,4.5vw,42px); }
.hero__subtitle{ color:var(--txt-200); margin:1rem 0 1.2rem; max-width:50ch; }
.hero__note{ color:#aeb7cc; font-size:.95rem; margin-top:.5rem; }
.hero__image img{ width:100%; height:auto; border-radius:12px; }

/* Responsive */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__content{ text-align:center; }
  .hero__image{ margin-top:1.5rem; }
}

/* Secciones */
.section{padding:clamp(36px,6vw,72px) 0;}
.section__title{font-weight:900;font-size:clamp(22px,3.6vw,30px);margin-bottom:1rem;}

/* Pilares */
.pillars{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));}
.pillar{background:var(--card-700);border:1px solid var(--line);border-radius:14px;padding:1rem;}
.pillar__icon{font-size:28px;margin-bottom:.35rem;}
.pillar__title{margin:.2rem 0 .35rem;}
.pillar__text{color:var(--txt-200);}

/* Selector de audiencia */
.audience-switch{display:flex;gap:.6rem;margin:.6rem 0 1rem;flex-wrap:wrap;}
.chip{background:#0f1322;color:var(--txt-100);border:1px solid var(--line);padding:.5rem .8rem;border-radius:999px;cursor:pointer;font-weight:700;}
.chip:hover{background:#141a2d;}
.chip.is-active{background:var(--accent);color:#111;border-color:transparent;}

/* Tabla de planes */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--card-700);display:none;}
.table-wrap.is-visible{display:block;}
.plans-table{width:100%;border-collapse:collapse;min-width:760px;}
.plans-table th,.plans-table td{padding:.9rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;}
.plans-table thead th{background:#0f1322;color:var(--txt-100);position:sticky;top:0;text-align:left;}
.plans-table tbody tr:hover td{background:#161c2b;}
.paycell{white-space:nowrap;}
.pay-btn{display:inline-block;margin:.25rem .25rem 0 0;padding:.55rem .8rem;border-radius:9px;border:0;font-weight:800;background:var(--brand);color:#fff;}
.pay-btn:hover{background:var(--accent);color:#111;}

/* Nota ética */
.ethic-note{margin-top:1rem;padding:.7rem .9rem;border-left:4px solid #e8a48e;background:#2a1d1a;color:#ffd7cb;border-radius:8px;}

/* ===== Secciones generales ===== */
.section {
  padding: 40px 0; /* antes usabas hasta 72px */
}
.section__title {
  margin-bottom: .8rem; /* menos separación */
}

/* ===== Contacto ===== */
.contact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr; /* más estrecho */
  max-width: 860px;   /* ancho máximo reducido */
  margin: 0 auto;     /* centrado */
}

.contact-form,
.contact-box {
  background: var(--card-700);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  max-width: 400px;   /* ahora no ocupan todo el ancho */
  margin: 0 auto;
}

.contact-form .fld {
  margin-bottom: .6rem; /* menos separación */
}

input,
textarea {
  width: 100%;
  background: #0f1322;
  color: var(--txt-100);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .7rem; /* más compacto */
  font-size: .95rem;
}
textarea { min-height: 100px; }

/* ===== Footer ===== */
.footer__inner {
  padding: 14px 0; /* menos alto */
  text-align: center;
}


/* Footer */
.footer{background:var(--bg-800);border-top:1px solid var(--line);}
.footer__inner{padding:22px 0;text-align:center;}
.footer__legal{color:var(--txt-200);font-size:.95rem;}

/* WhatsApp flotante */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:1000;background:#22c55e;color:#111;font-weight:900;text-decoration:none;padding:.75rem 1rem;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.25);}
.wa-float:hover{filter:brightness(.95);}

/* @media */
@media (max-width:1024px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pillars{grid-template-columns:1fr;}
  .plans-table{min-width:620px;}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.25rem;
  border-radius:12px;border:1px solid transparent;
  font-weight:800;letter-spacing:.2px;cursor:pointer;
}
.btn--primary{
  background:var(--accent);
  color:#111;
}
.btn--primary:hover{ filter:brightness(.95); }
/* ==== Métodos de pago (instrucciones) ==== */
.pay-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(3,1fr);
}
.pay-method{
  background:var(--card-700);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1rem;
  text-align:center;
}
.pay-method h3{ margin:.2rem 0 .6rem; }
.pay-method p{ color:var(--txt-200); font-size:.95rem; }
.pay-img{
  max-width:180px;
  margin-top:.8rem;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Responsive */
@media(max-width:900px){
  .pay-grid{ grid-template-columns:1fr; }
}
.section { padding: 30px 0; }
.footer__support {
  margin-top: .6rem;
  font-size: .95rem;
  color: var(--txt-200);
}
.footer__support a {
  color: #25d366; /* verde oficial de WhatsApp */
  font-weight: 600;
}
.footer__support a:hover {
  text-decoration: underline;
}