/* === LOGIN / LANDING PAGE === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --p:    #4f46e5;
  --p2:   #3730a3;
  --p3:   #6366f1;
  --ink:  #0f0e17;
  --ink2: #374151;
  --mute: #6b7280;
  --lite: #f9fafb;
  --bdr:  #e5e7eb;
  --white:#ffffff;
}
html { scroll-behavior: smooth; }
body  { font-family:'Plus Jakarta Sans',sans-serif; background:var(--white); color:var(--ink); }

/* ── NAV ── */
nav {
  position: sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 7vw; height:64px;
  background:rgba(15, 25, 35, 0.98);
  border-bottom:1px solid rgba(79,70,229,0.2);
  backdrop-filter:blur(14px);
}
.nav-logo { font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:-0.5px; }
.nav-logo sup {
  font-size:9px; font-weight:700; letter-spacing:1px;
  background:var(--p3); color:#fff;
  padding:2px 5px; border-radius:4px;
  vertical-align:super; margin-left:3px;
}
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-link { font-size:14px; color:rgba(255,255,255,0.85); text-decoration:none; padding:6px 12px; border-radius:8px; transition:all .18s; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav-btn {
  font-family:inherit; font-size:14px; font-weight:600;
  background:var(--p); color:#fff; border:none;
  padding:9px 20px; border-radius:10px; cursor:pointer;
  transition:all .18s;
}
.nav-btn:hover { background:var(--p2); transform:translateY(-1px); }

/* ── HERO ── */
.hero {
  background: linear-gradient(160deg, #1e1b4b 0%, #3730a3 45%, #4f46e5 100%);
  padding: 90px 7vw 100px;
  text-align:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(99,102,241,.35) 0%, transparent 70%);
  pointer-events:none;
}
.hero-inner { max-width:660px; margin:0 auto; position:relative; }
.hero-tag {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9); font-size:12px; font-weight:500; letter-spacing:.3px;
  padding:5px 14px; border-radius:50px; margin-bottom:28px;
}
.hero-tag i { font-size:11px; color:#a5b4fc; }
.hero h1 {
  font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800;
  line-height:1.08; letter-spacing:-2px;
  color:#fff; margin-bottom:20px;
}
.hero h1 em { font-style:normal; color:#a5b4fc; }
.hero-sub {
  font-size:1.05rem; color:rgba(255,255,255,.65);
  line-height:1.75; max-width:480px; margin:0 auto 36px;
}
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-hero-main {
  font-family:inherit; font-size:15px; font-weight:700;
  background:#fff; color:var(--p); border:none;
  padding:14px 28px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .2s; box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.btn-hero-main:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.25); }
.btn-hero-ghost {
  font-family:inherit; font-size:15px; font-weight:500;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:14px 24px; border-radius:12px; cursor:pointer;
  transition:all .2s;
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.18); }
.hero-note { font-size:12px; color:rgba(255,255,255,.4); margin-top:16px; }

/* ── STRIP ── */
.strip {
  background:var(--lite); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  padding:28px 7vw;
  display:flex; justify-content:center; gap:64px; flex-wrap:wrap;
}
.strip-item { text-align:center; }
.strip-num { font-size:1.6rem; font-weight:800; color:var(--p); letter-spacing:-1px; }
.strip-lbl { font-size:12px; color:var(--mute); margin-top:2px; }

/* ── SECTION BASE ── */
.sec { padding:80px 7vw; }
.sec-inner { max-width:960px; margin:0 auto; }
.sec-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--p); margin-bottom:12px; }
.sec-h {
  font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:800;
  letter-spacing:-1px; line-height:1.2; margin-bottom:14px;
}
.sec-sub { font-size:15px; color:var(--mute); line-height:1.7; max-width:520px; }

/* Pricing section alignment */
.sec-pricing .sec-inner { text-align: center; }
.sec-pricing .sec-sub { margin: 0 auto; }

/* ── FEATURES ── */
.sec-features { background:var(--lite); }
.feat-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px;
}
.feat-card {
  background:var(--white); border:1px solid var(--bdr); border-radius:16px;
  padding:24px; transition:all .22s;
}
.feat-card:hover { border-color:#c7d2fe; box-shadow:0 8px 28px rgba(79,70,229,.08); transform:translateY(-2px); }
.feat-icon {
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feat-icon i { font-size:16px; color:var(--p); }
.feat-card h3 { font-size:14px; font-weight:700; margin-bottom:6px; }
.feat-card p  { font-size:13px; color:var(--mute); line-height:1.65; }

/* ── TEMAS ── */
.topics-wrap {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:36px;
}
.topic {
  background:var(--white); border:1px solid var(--bdr); border-radius:50px;
  padding:8px 18px; font-size:13px; font-weight:500; color:var(--ink2);
  transition:all .18s; cursor:default;
}
.topic:hover { border-color:var(--p3); color:var(--p); background:#eef2ff; }
.topic.more { background:var(--p); color:#fff; border-color:var(--p); }

/* ── PRICING ── */
.sec-pricing { background:var(--lite); }
.plans-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:580px; margin:48px auto 0;
}
.plan-card {
  background:var(--white); border:1.5px solid var(--bdr);
  border-radius:20px; padding:28px; position:relative;
}
.plan-card.hot {
  border-color:var(--p);
  box-shadow:0 0 0 4px rgba(79,70,229,.1);
}
.hot-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--p); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:4px 14px; border-radius:20px;
  white-space:nowrap;
}
.plan-period-lbl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
.plan-amount {
  font-size:2.6rem; font-weight:800; letter-spacing:-2px; line-height:1;
  margin-bottom:4px;
}
.plan-cycle { font-size:12px; color:var(--mute); margin-bottom:22px; }
.plan-feats { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.plan-feats li { font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:9px; }
.plan-feats li::before {
  content:''; display:inline-block; width:16px; height:16px; border-radius:50%;
  background:#dcfce7; flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2316a34a' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.plan-cta {
  width:100%; padding:12px; border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.plan-cta.solid { background:var(--p); color:#fff; border:none; }
.plan-cta.solid:hover { background:var(--p2); transform:translateY(-1px); }
.plan-cta.ghost { background:transparent; color:var(--p); border:1.5px solid var(--p); }
.plan-cta.ghost:hover { background:#eef2ff; }
.pay-info {
  text-align:center; margin-top:22px;
  font-size:13px; color:var(--mute); line-height:1.7;
}
.pay-info a { color:var(--p); text-decoration:none; font-weight:500; }
.pay-info a:hover { text-decoration:underline; }

/* ── CTA BAND ── */
.cta-band {
  background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 100%);
  padding:80px 7vw; text-align:center;
}
.cta-band h2 {
  font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800;
  letter-spacing:-1px; color:#fff; margin-bottom:14px;
}
.cta-band p { font-size:15px; color:rgba(255,255,255,.6); margin-bottom:32px; }
.btn-cta-white {
  font-family:inherit; font-size:15px; font-weight:700;
  background:#fff; color:var(--p); border:none;
  padding:14px 32px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .2s; box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.btn-cta-white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.28); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--bdr);
  padding:24px 7vw;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  font-size:12px; color:var(--mute);
}
.foot-logo { font-weight:800; font-size:1.1rem; color:var(--ink); }
.foot-links { display:flex; gap:22px; }
.foot-links a { color:var(--mute); text-decoration:none; transition:color .18s; }
.foot-links a:hover { color:var(--ink); }

/* ── MODALS ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(15,14,23,.55); backdrop-filter:blur(8px);
  display:none; justify-content:center; align-items:center; z-index:1000;
}
.modal-overlay.open { display:flex; }
.modal {
  background:#fff; border-radius:20px;
  padding:36px 32px; width:92%; max-width:420px;
  position:relative; box-shadow:0 32px 80px rgba(0,0,0,.18);
  animation:popIn .22s ease;
}
@keyframes popIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.modal-x {
  position:absolute; top:14px; right:14px;
  background:var(--lite); border:none; width:30px; height:30px;
  border-radius:8px; cursor:pointer; font-size:13px; color:var(--mute);
  display:flex; align-items:center; justify-content:center; transition:all .18s;
}
.modal-x:hover { background:var(--bdr); color:var(--ink); }
.modal h2 {
  font-size:1.4rem; font-weight:800; letter-spacing:-.5px;
  text-align:center; margin-bottom:4px;
}
.modal-sub { text-align:center; font-size:13px; color:var(--mute); margin-bottom:22px; }
.modal-err {
  background:#fef2f2; border-left:3px solid #ef4444;
  color:#b91c1c; font-size:13px; padding:10px 12px;
  border-radius:8px; margin-bottom:14px; display:none; line-height:1.5;
}
.terms-note { font-size:11px; color:var(--mute); text-align:center; margin-bottom:18px; line-height:1.7; }
.terms-note a { color:var(--p); text-decoration:none; }
.gcenter { display:flex; justify-content:center; }

/* Modal tamaños específicos */
.modal-contact { max-width: 440px; }
.modal-contact h2 { margin-bottom: 6px; }
.modal-terms { max-width: 680px; }

/* ── CONTACT LIST ── */
.contact-list {
  display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
}
.contact-item {
  display: flex; align-items: center; gap: 14px;
  background: #f5f3ff; border: 1px solid #ede9fe;
  border-radius: 12px; padding: 14px 16px;
}
.contact-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: #4f46e5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-icon i { color: #fff; font-size: 15px; }
.contact-item a,
.contact-item span {
  font-size: 14px; color: #3730a3; font-weight: 500;
}
.contact-item a {
  text-decoration: none; word-break: break-all;
}

/* ── TABS ── */
.tabs-bar { display:flex; border-bottom:1.5px solid var(--bdr); margin-bottom:18px; }
.tab-btn {
  flex:1; padding:10px; background:none; border:none;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--mute); cursor:pointer;
}
.tab-btn.on { color:var(--p); border-bottom:2px solid var(--p); margin-bottom:-1.5px; }
.tab-pane { display:none; max-height:380px; overflow-y:auto; font-size:13px; color:var(--ink2); line-height:1.75; }
.tab-pane.on { display:block; }
.tab-pane h3 { color:var(--p); margin-bottom:12px; font-size:15px; }
.tab-pane p  { margin-bottom:10px; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .strip { gap:32px; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .plans-wrap { grid-template-columns:1fr; max-width:360px; }
  footer { flex-direction:column; }
  .nav-right .nav-link { font-size:12px; padding:5px 8px; }
}
@media(max-width:480px){
  .feat-grid { grid-template-columns:1fr; }
  .modal { padding:28px 20px; }
}