html { scroll-behavior: smooth }

body {
    background: var(--bg); color: var(--text);
    font-family: var(--f-b); min-height: 100vh;
    overflow-x: hidden;
}

/* ── Header ── */
.planes-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem;
    background: var(--bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: .5px solid var(--border);
}
.planes-logo {
    font-family: var(--f-d); font-size: 1.1rem;
    font-weight: 900; color: var(--primary); letter-spacing: -.02em;
    text-decoration: none;
}
.planes-logo span { color: var(--grid); font-weight: 800 }
.header-actions { display: flex; align-items: center; gap: .5rem }
.btn-login {
    padding: .4rem .85rem; border-radius: 20px;
    border: 1px solid rgba(0,255,255,.3);
    background: var(--primary);
    color: var(--bg); font-size: .72rem; font-weight: 700;
    text-decoration: none; transition: all .2s;
}
.btn-login:hover { background: rgba(0,255,255,.18) }

/* ── Hero ── */
.hero {
    text-align: center; padding: 4rem 1.5rem 3rem;
    position: relative; overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(0,255,255,.06) 0%, transparent 70%);
    pointer-events: none;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem; border-radius: 20px;
    background: rgba(0,255,255,.08); border: .5px solid rgba(0,255,255,.2);
    color: var(--primary); font-size: .65rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.hero h1 {color:var(--primary);
    font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900;
    line-height: 1.1; margin-bottom: .75rem; letter-spacing: -.03em;
}
.hero h1 em { font-style: normal; color: var(--grid) }
.hero-sub {
    font-size: clamp(.85rem, 2.5vw, 1.05rem);
    color: var(--muted); max-width: 480px; margin: 0 auto 2rem;
    line-height: 1.6;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.75rem; border-radius: .65rem;
    background: var(--primary); color: var(--bg);
    font-weight: 800; font-size: .85rem; text-decoration: none;
    transition: all .2s; box-shadow: 0 0 24px rgba(0,255,255,.3);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0,255,255,.4) }

/* ── Planes grid ── */
.planes-section {
    padding: 2rem 1.25rem 3rem; max-width: 1100px; margin: 0 auto;
}
.planes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) { .planes-grid { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 520px) {
    .planes-grid { grid-template-columns: 1fr; gap: .75rem }
}

.plan-card {
    background: var(--surface-glass); border: .5px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
    transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;box-shadow: var(--shadow-box);
}
.plan-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
}
.plan-card:hover { transform: translateY(-4px) }

.plan-card.free   { border-color: rgba(107,127,160,.2) }
.plan-card.free::before { background: var(--muted) }

.plan-card.basic  { border-color: rgba(0,255,255,.2) }
.plan-card.basic::before { background: var(--primary) }
.plan-card.basic:hover { box-shadow: var(--glow-c) }

.plan-card.advanced { border-color: rgba(88,166,255,.2) }
.plan-card.advanced::before { background: var(--info) }
.plan-card.advanced:hover { box-shadow: 0 0 20px rgba(88,166,255,.2) }

.plan-card.ultimate {
    border-color: rgba(255,215,0,.3);
    background: linear-gradient(135deg, var(--surface), rgba(255,215,0,.04));
}
.plan-card.ultimate::before { background: linear-gradient(90deg, var(--grid), #ff8c00) }
.plan-card.ultimate:hover { box-shadow: var(--glow-g) }

.plan-mult {
    font-size: 2.5rem; font-weight: 900; line-height: 1;
    font-family: var(--f-d);
}
.free     .plan-mult { color: var(--muted) }
.basic    .plan-mult { color: var(--primary) }
.advanced .plan-mult { color: var(--info) }
.ultimate .plan-mult { color: var(--grid) }

.plan-name {
    font-size: .65rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.plan-desc {
    font-size: .72rem; color: var(--muted); line-height: 1.5; flex: 1;
}
.plan-threshold {
    display: flex; align-items: center; gap: .4rem;
    font-size: .65rem; color: var(--muted);
    padding: .4rem .6rem; border-radius: .4rem;
    background: rgba(255,255,255,.04); border: .5px solid var(--border);
}
.plan-threshold strong { color: var(--text) }

.plan-features {
    list-style: none; display: flex; flex-direction: column; gap: .35rem;
}
.plan-features li {
    font-size: .68rem; color: var(--muted);
    display: flex; align-items: center; gap: .4rem;
}
.plan-features li::before { content: '✓'; color: var(--success); font-weight: 700 }
.plan-features li.locked::before { content: '🔒'; font-size: .6rem }
.plan-features li.locked { opacity: .5 }

.plan-btn {
    display: flex; align-items: center; justify-content: center;
    padding: .65rem; border-radius: .6rem; font-size: .75rem;
    font-weight: 700; text-decoration: none; cursor: pointer;
    border: none; transition: all .2s; width: 100%;
}
.free .plan-btn {
    background: rgba(255,255,255,.06); color: var(--text);
    border: .5px solid var(--border);
}
.free .plan-btn:hover { background: rgba(255,255,255,.1) }
.basic .plan-btn {
    background: rgba(0,255,255,.1); color: var(--primary);
    border: 1px solid rgba(0,255,255,.3);
}
.basic .plan-btn:hover { background: rgba(0,255,255,.2) }
.advanced .plan-btn {
    background: rgba(88,166,255,.1); color: var(--info);
    border: 1px solid rgba(88,166,255,.3);
}
.advanced .plan-btn:hover { background: rgba(88,166,255,.2) }
.ultimate .plan-btn {
    background: rgba(255,215,0,.12); color: var(--grid);
    border: 1px solid rgba(255,215,0,.35);
}
.ultimate .plan-btn:hover { background: rgba(255,215,0,.22) }

/* ── Cómo funciona ── */
.how-section {
    padding: 3rem 1.25rem; max-width: 800px; margin: 0 auto;
    text-align: center;
}
.how-title {
    font-size: 1.5rem; font-weight: 900; margin-bottom: .5rem;
    letter-spacing: -.02em;color:var(--primary);
}
.how-sub { font-size: .85rem; color: var(--muted); margin-bottom: 2.5rem }
.how-steps {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
}
@media (max-width: 600px) { .how-steps { grid-template-columns: repeat(2,1fr) } }

.how-step {
    background: var(--surface-glass); border: .5px solid var(--border);box-shadow: var(--shadow-box);
    border-radius: .75rem; padding: 1.25rem .85rem; text-align: center;
}
.how-step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,255,255,.1); border: 1px solid rgba(0,255,255,.2);
    color: var(--primary); font-weight: 900; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem;
}
.how-step-icon { font-size: 1.5rem; margin-bottom: .5rem }
.how-step-label { font-size: .72rem; font-weight: 700; margin-bottom: .25rem }
.how-step-desc  { font-size: .62rem; color: var(--muted); line-height: 1.5 }

/* ── City banner ── */
.city-banner {
    margin: 0 1.25rem 3rem; border-radius: var(--radius);
    background: var(--bg);
    border: none;
    padding: 2rem 1.5rem; text-align: center;
}
.city-title {
    font-family: :var(--f-d);font-size: 1.25rem; font-weight: 900; margin-bottom: .4rem;
    letter-spacing: -.02em;color:var(--primary);
}
.city-title span { color: var(--grid) }
.city-desc { font-size: .78rem; color: var(--muted); margin-bottom: 1.25rem; max-width: 420px; margin-left: auto; margin-right: auto }
.city-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.4rem; border-radius: .6rem;
    border: 1px solid var(--tier-basic);
    background: var(--primary);
    color: var(--bg); font-size: .78rem; font-weight: 700;
    text-decoration: none; transition: all .2s;box-shadow: var(--shadow-box);
}
.city-btn:hover { border:none; }
.mono{font-family: :var(--f-b);}
/* ── FAQ mini ── */
.faq-section {
    padding: 0 1.25rem 3rem; max-width: 680px; margin: 0 auto;
}
.faq-title { font-size: 1.1rem; font-weight: 900; margin-bottom: 1rem; letter-spacing: -.02em }
.faq-item {
    border-bottom: .5px solid var(--border); padding: .85rem 0; cursor: pointer;
}
.faq-q {
    font-size: .78rem; font-weight: 700; display: flex;
    justify-content: space-between; align-items: center; gap: .5rem;
}
.faq-q span { transition: transform .2s }
.faq-a {
    font-size: .7rem; color: var(--muted); line-height: 1.6;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.faq-item.open .faq-a { max-height: 200px; padding-top: .5rem }
.faq-item.open .faq-q span { transform: rotate(180deg) }
/* ── AphyllaBox section ── */
.aphyBox-section { max-width: 680px; margin: 2rem auto; padding: 1.5rem; background: var(--surface-raised); border-radius: 1rem; border: .5px solid rgba(0,224,144,.15) }
.aphyBox-title { font-size: 1.1rem; font-weight: 900; margin-bottom: .75rem; letter-spacing: -.02em; color: var(--primary) }
.aphyBox-intro { font-size: .78rem; color: var(--muted); line-height: 1.7; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: .5px solid var(--border-subtle) }
.aphyBox-item { border-bottom: .5px solid var(--border-subtle); padding: .75rem 0; cursor: pointer; -webkit-user-select: none;user-select: none }
.aphyBox-q { font-size: .82rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center }
.aphyBox-q span { transition: transform .2s }
.aphyBox-a { font-size: .75rem; color: var(--muted); line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding-top .2s }
.aphyBox-item.open .aphyBox-a { max-height: 200px; padding-top: .5rem }
.aphyBox-item.open .aphyBox-q span { transform: rotate(180deg) }