:root {
    --bg: #050814;
    --bg2: #08101f;
    --bg3: #0d1728;
    --bg4: #12203a;
    --border: rgba(255,255,255,.07);
    --border-h: rgba(37,99,235,.42);
    --text: #dde7f5;
    --text-muted: #6c7a96;
    --text-soft: #95a4c2;
    --primary: #123a8f;
    --primary-h: #2563eb;
    --primary-glow: rgba(37,99,235,.32);
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f39c12;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow: 0 18px 60px rgba(0,0,0,.48);
    --shadow-sm: 0 8px 22px rgba(0,0,0,.28);
    --font: 'Segoe UI', system-ui, sans-serif;
    --transition: all .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--text);
    background:
        radial-gradient(circle at top center, rgba(37,99,235,.12), transparent 24%),
        linear-gradient(180deg, var(--bg2) 0%, var(--bg) 42%, #04070f 100%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: #60a5fa; text-decoration: none; transition: color .18s ease; }
a:hover { color: #bfdbfe; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;
    padding: 0 1.5rem;
    background: rgba(5,8,20,.28);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: sticky;
    top: 0;
    z-index: 50;
}
.nav-brand {
    font-size: 1.08rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 35%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nav-auth { display: flex; align-items: center; gap: .75rem; }

.auth-shell {
    min-height: calc(100vh - 128px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 0 72px;
}
.auth-wrap {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(380px, 470px);
    gap: 2.5rem;
    align-items: center;
    padding: 1.5rem 0rem;
}
.auth-hero {
    padding-right: 1rem;
}
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .48rem .82rem;
    border-radius: 999px;
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.24);
    color: #93c5fd;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.15rem;
}
.auth-title {
    font-size: clamp(2.2rem, 5vw, 3.95rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
}
.auth-lead {
    max-width: 44ch;
    color: var(--text-soft);
    font-size: 1.04rem;
    margin-bottom: 1.6rem;
}
.auth-points {
    display: grid;
    gap: .95rem;
}
.auth-point {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    color: var(--text-soft);
}
.auth-point i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #eff6ff;
    background: linear-gradient(135deg, rgba(37,99,235,.30), rgba(18,58,143,.14));
    border: 1px solid rgba(37,99,235,.18);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.auth-card {
    background: linear-gradient(180deg, rgba(18,28,48,.92) 0%, rgba(8,12,22,.97) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
    padding: 1.7rem;
}
.auth-card-head {
    margin-bottom: 1.35rem;
}
.auth-card-title {
    font-size: 1.65rem;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: .35rem;
}
.auth-card-subtitle {
    color: var(--text-soft);
    font-size: .95rem;
}
.form-grid {
    display: grid;
    gap: 1rem;
}
.form-group {
    display: grid;
    gap: .48rem;
}
.form-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .94rem;
    font-weight: 700;
    color: var(--text);
}
.form-label i { color: #60a5fa; }
.form-input,
.form-select {
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: var(--text);
    padding: .95rem 1rem;
    outline: none;
    transition: var(--transition);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.form-input::placeholder { color: #7c8cab; }
.form-input:focus,
.form-select:focus {
    border-color: rgba(37,99,235,.55);
    background: rgba(37,99,235,.06);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
.form-help {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.45;
}
.alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 600;
}
.alert-success {
    background: rgba(46,204,113,.07);
    border: 1px solid rgba(46,204,113,.24);
    color: #4ade80;
}
.alert-error {
    background: rgba(231,76,60,.08);
    border: 1px solid rgba(231,76,60,.24);
    color: #fda4af;
}
.alert-info {
    background: rgba(37,99,235,.10);
    border: 1px solid rgba(37,99,235,.28);
    color: #93c5fd;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: .95rem 1.35rem;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none !important;
}
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-h) 0%, var(--primary) 100%);
    box-shadow: 0 10px 28px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 34px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-block { width: 100%; }
.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(.08);
}
.submit-wrap {
    display: grid;
    gap: .65rem;
    margin-top: .15rem;
}
.submit-note {
    text-align: center;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.4;
}
.turnstile-wrap {
    display: grid;
    gap: .55rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    overflow-x: auto;
}
.turnstile-wrap .cf-turnstile {
    min-height: 70px;
}
.turnstile-note {
    color: var(--text-muted);
    font-size: .79rem;
    line-height: 1.4;
}
.turnstile-status {
    display: none;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 700;
    color: #93c5fd;
}
.turnstile-status.is-visible {
    display: inline-flex;
}
.turnstile-status.is-error {
    color: #fda4af;
}
.auth-links {
    margin-top: 1.35rem;
    text-align: center;
    color: var(--text-soft);
    font-size: .94rem;
}
.footer {
    text-align: center;
    padding: 1.8rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .82rem;
}

@media (max-width: 940px) {
    .auth-wrap {
        grid-template-columns: 1fr;
        max-width: 580px;
        gap: 1.8rem;
    }
    .auth-hero {
        padding-right: 0;
        text-align: center;
    }
    .auth-lead {
        margin-inline: auto;
    }
    .auth-points {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .container { padding: 0 1rem; }
    .navbar { padding: 0 1rem; }
    .auth-shell { padding: 28px 0 44px; }
    .auth-card { padding: 1.15rem; border-radius: 20px; }
    .auth-title { font-size: 2rem; }
    .auth-card-title { font-size: 1.35rem; }
    .turnstile-wrap { padding: .8rem; }
}

.register-shell {
    min-height: calc(100vh - 128px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 0 72px;
}
.register-layout {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 480px);
    gap: 3.25rem;
    align-items: center;
    padding: 1.5rem 0rem;
}
.register-hero {
    padding-right: 1rem;
}
.register-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .48rem .9rem;
    border-radius: 999px;
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.24);
    color: #93c5fd;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 1.2rem;
}
.register-title {
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.045em;
    margin-bottom: 1.2rem;
    max-width: 8ch;
}
.register-lead {
    max-width: 42ch;
    color: var(--text-soft, #95a4c2);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.register-points {
    display: grid;
    gap: 1.15rem;
}
.register-point {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    color: var(--text-soft, #95a4c2);
}
.register-point-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #eff6ff;
    background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(18,58,143,.14));
    border: 1px solid rgba(37,99,235,.16);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    flex-shrink: 0;
}
.register-point strong {
    display: block;
    margin-bottom: .18rem;
    color: var(--text, #dde7f5);
    font-size: 1rem;
}
.register-card {
    background: linear-gradient(180deg, rgba(18,28,48,.94) 0%, rgba(8,12,22,.98) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    box-shadow: 0 22px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
    padding: 1.85rem;
}
.register-card-head {
    margin-bottom: 1.4rem;
}
.register-card-title {
    font-size: 1.85rem;
    line-height: 1.08;
    font-weight: 900;
    margin-bottom: .4rem;
}
.register-card-subtitle {
    color: var(--text-soft, #95a4c2);
    font-size: .97rem;
}
.register-form {
    display: grid;
    gap: 1rem;
}
.register-form-group {
    display: grid;
    gap: .48rem;
}
.register-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .95rem;
}
.register-form .form-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 0 !important;
}
.register-form .form-help {
    color: var(--text-muted, #6c7a96);
    font-size: .8rem;
    line-height: 1.45;
}
.register-turnstile-wrap {
    display: grid;
    gap: .55rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}
.register-turnstile-status {
    color: #93c5fd;
    font-size: .84rem;
    line-height: 1.45;
    font-weight: 700;
}
.register-turnstile-note {
    color: var(--text-muted, #6c7a96);
    font-size: .8rem;
    line-height: 1.45;
}
.register-submit-wrap {
    display: grid;
    gap: .6rem;
    margin-top: .1rem;
}
.register-submit-wrap .btn-submit {
    min-height: 54px;
    border-radius: 16px;
}
.register-submit-note {
    text-align: center;
    color: var(--text-muted, #6c7a96);
    font-size: .8rem;
    line-height: 1.45;
}
.register-links {
    margin-top: 1.3rem;
    text-align: center;
}
.register-links p {
    color: var(--text-soft, #95a4c2);
    font-size: .95rem;
}
.register-links .register-links-sub {
    margin-top: .45rem;
    color: var(--text-muted, #6c7a96);
    font-size: .82rem;
}
@media (max-width: 980px) {
    .register-layout {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 2rem;
    }
    .register-hero {
        padding-right: 0;
    }
    .register-title {
        max-width: none;
        font-size: 2.9rem;
    }
}
@media (max-width: 640px) {
    .register-shell {
        padding: 32px 0 48px;
    }
    .register-card {
        padding: 1.2rem;
        border-radius: 22px;
    }
    .register-form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .register-title {
        font-size: 2.35rem;
    }
}

.register-shell {
    padding: 44px 0 72px !important;
}

.register-layout {
    max-width: 1100px !important;
    grid-template-columns: minmax(340px, 1fr) minmax(410px, 450px) !important;
    gap: 2.75rem !important;
    align-items: center !important;
}

.register-hero {
    padding-right: .25rem !important;
    transform: translateY(-18px);
}

.register-kicker {
    margin-bottom: 1rem !important;
}

.register-title {
    font-size: clamp(2.45rem, 5.2vw, 4.2rem) !important;
    line-height: 1.02 !important;
    max-width: 8.4ch !important;
    margin-bottom: 1rem !important;
}

.register-lead {
    max-width: 38ch !important;
    font-size: 1rem !important;
    margin-bottom: 1.6rem !important;
}

.register-points {
    gap: 1rem !important;
}

.register-point {
    gap: .8rem !important;
}

.register-point-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
}

.register-card {
    width: 100% !important;
    max-width: 450px !important;
    padding: 1.5rem !important;
    border-radius: 26px !important;
}

.register-card-head {
    margin-bottom: 1.15rem !important;
}

.register-card-title {
    font-size: 1.6rem !important;
    margin-bottom: .3rem !important;
}

.register-card-subtitle {
    font-size: .93rem !important;
}

.register-form {
    gap: .9rem !important;
}

.register-form-group {
    gap: .42rem !important;
}

.register-form-row {
    gap: .75rem !important;
}

.register-turnstile-wrap {
    padding: .9rem !important;
    border-radius: 16px !important;
}

.register-submit-wrap {
    gap: .5rem !important;
}

.register-links {
    margin-top: 1.1rem !important;
}

@media (max-width: 980px) {
    .register-shell {
        padding: 34px 0 52px !important;
    }

    .register-layout {
        max-width: 620px !important;
        grid-template-columns: 1fr !important;
        gap: 1.7rem !important;
    }

    .register-hero {
        transform: none !important;
        padding-right: 0 !important;
    }

    .register-title {
        max-width: none !important;
        font-size: 2.9rem !important;
    }

    .register-card {
        max-width: 100% !important;
    }
}

/* =========================
   FRONTPAGE ONLY
   Agregar debajo del CSS de auth/register
   ========================= */

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.95rem;
}

.nav-link:hover {
    color: #fff;
}

/* HERO */
.hero-fullscreen {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 1.5rem;
    isolation: isolate;
}

.video-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 9, 15, 0.25) 0%, rgba(7, 9, 15, 0.72) 70%, var(--bg) 100%),
        radial-gradient(circle at center, rgba(29, 78, 216, 0.12), transparent 42%),
        rgba(7, 9, 15, 0.32);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 860px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-main-title {
    font-size: clamp(2.5rem, 6vw, 4.8rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg, #ffffff 40%, #bfdbfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-lead-text {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-soft);
    max-width: 65ch;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-outline {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-h);
}

.btn-outlinesmm {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    padding: 0.1rem 0.5rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--text-soft);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
}

/* STATS */
.stats-bar {
    background: rgba(12, 15, 26, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2rem 0;
    position: relative;
    z-index: 4;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1.2rem;
    text-align: center;
}

.stat-item {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 18px;
    padding: 1.2rem 1rem;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: .35rem;
}

/* FEATURES */
.features-section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.section-subtitle {
    color: var(--text-soft);
    font-size: 1.05rem;
    max-width: 64ch;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.feature-card {
    background: linear-gradient(180deg, rgba(17,21,32,.92) 0%, rgba(12,15,26,.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.feature-card:hover {
    border-color: var(--border-h);
    transform: translateY(-4px);
    background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(29, 78, 216, 0.15);
    border: 1px solid rgba(29, 78, 216, 0.3);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: #fff;
}

.feature-card p {
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* RATES */
.rates-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, transparent 0%, rgba(12, 15, 26, 0.5) 100%);
}

.rates-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.rates-list {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rate-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
}

.rate-row span {
    color: var(--text-soft);
}

.rate-row strong {
    color: #fff;
}

.rates-display-box {
    background: linear-gradient(135deg, rgba(21,26,44,.9) 0%, rgba(11,14,24,.95) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

.display-box-inner h3 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.display-box-inner ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.display-box-inner ul li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--text-soft);
    font-size: 0.95rem;
}

/* COMMUNITY */
.community-section {
    padding: 4rem 0 8rem;
}

.community-box {
    background: linear-gradient(90deg, rgba(15, 76, 156, 0.15) 0%, rgba(29, 78, 216, 0.05) 100%);
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 24px;
    padding: 3.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.community-box h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.community-box p {
    max-width: 60ch;
    color: var(--text-soft);
    margin-bottom: 1rem;
}

/* FOOTER */
.footer {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .82rem;
    background: #05070c;
}

/* ANIMACIONES */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}

@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* RESPONSIVE */
@media (max-width: 940px) {
    .nav-menu {
        display: none;
    }

    .rates-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hero-main-title {
        font-size: 2.3rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .features-section,
    .rates-section {
        padding: 4rem 0;
    }

    .community-box {
        padding: 2rem 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CSS UNIFICADO - Términos y Política
   Ambas vistas usan clases "tos-*"
   ======================================== */

.tos-page,
.nr-page {
  padding: 2rem 0 4rem;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin-bottom: .75rem;
  line-height: 1.08;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
}

.page-header p {
  margin-top: 0;
  line-height: 1.7;
  font-size: .875rem;
  color: var(--text-muted);
}

/* BANNER UNIFICADO */
.tos-banner,
.nr-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  background: rgba(29, 78, 216, .1);
  border: 1px solid rgba(29, 78, 216, .35);
  border-radius: var(--radius-lg);
  margin-bottom: 2.2rem;
  transition: var(--transition);
}

.tos-banner.danger,
.nr-banner.danger {
  background: rgba(231, 76, 60, .09);
  border: 1px solid rgba(231, 76, 60, .3);
}

.tos-banner-icon,
.nr-banner-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1.2;
}

.tos-banner-title,
.nr-banner-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .35rem;
  line-height: 1.35;
}

.tos-banner.danger .tos-banner-title,
.nr-banner.danger .nr-banner-title {
  color: #f87171;
}

.tos-banner-title {
  color: #bfdbfe;
}

.tos-banner.danger .tos-banner-title {
  color: #f87171;
}

.tos-banner-text,
.nr-banner-text {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.tos-banner-text strong,
.nr-banner-text strong {
  color: var(--text);
}

/* SECCIONS/CARDS UNIFICADAS */
.tos-section,
.nr-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.15rem;
  margin-bottom: 1.35rem;
  width: 100%;
  transition: var(--transition);
}

.tos-section:hover,
.nr-card:hover {
  border-color: rgba(29, 78, 216, .35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.tos-section-header,
.nr-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--border);
}

.tos-icon,
.nr-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg3);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #bfdbfe;
  border: 1px solid rgba(29, 78, 216, .18);
}

.tos-title,
.nr-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.2;
}

.tos-sub,
.nr-card-sub {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .22rem;
  line-height: 1.45;
}

/* LISTAS UNIFICADAS */
.tos-list,
.nr-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 0;
  margin: 0;
}

.tos-list li,
.nr-list li {
  display: flex;
  gap: .75rem;
  font-size: .875rem;
  color: var(--text-muted);
  align-items: flex-start;
  line-height: 1.8;
}

.tos-list li strong,
.nr-list li strong {
  color: var(--text);
}

.tos-dot,
.nr-list li .nr-dot {
  flex-shrink: 0;
  margin-top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-h);
}

.tos-dot.warn,
.nr-dot-warn {
  background: var(--warning) !important;
}

.tos-dot.danger {
  background: var(--danger) !important;
}

.tos-dot.soft,
.nr-dot-soft {
  background: #bfdbfe !important;
}

.tos-num {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  background: rgba(29, 78, 216, .2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 800;
  color: #bfdbfe;
  margin-top: .3em;
}

/* ALERTAS UNIFICADAS */
.tos-inner,
.nr-inner-alert {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  margin-top: 1.25rem;
  font-size: .85rem;
  line-height: 1.75;
}

.tos-inner.info,
.nr-inner-alert.info {
  background: rgba(29, 78, 216, .1);
  border: 1px solid rgba(29, 78, 216, .3);
  color: #bfdbfe;
}

.tos-inner.warn {
  background: rgba(243, 156, 18, .07);
  border: 1px solid rgba(243, 156, 18, .25);
  color: #fbbf24;
}

.tos-inner.danger,
.nr-inner-alert.danger {
  background: rgba(231, 76, 60, .07);
  border: 1px solid rgba(231, 76, 60, .25);
  color: #f87171;
}

.tos-inner strong,
.nr-inner-alert strong {
  color: inherit;
}

/* BLOCK FINAL UNIFICADO */
.tos-final,
.nr-accept-block {
  background: var(--bg2);
  border: 2px solid rgba(29, 78, 216, .45);
  border-radius: var(--radius-lg);
  padding: 2.8rem 2rem;
  text-align: center;
  margin-top: 2.4rem;
  box-shadow: 0 0 40px rgba(15, 76, 156, .18);
}

.tos-final h2,
.nr-accept-block h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: .9rem;
  line-height: 1.15;
  color: var(--text);
}

.tos-final p,
.nr-accept-block p {
  font-size: .875rem;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto 2rem;
  line-height: 1.8;
}

.tos-final p strong,
.nr-accept-block p strong {
  color: var(--text);
}

.tos-final .btn,
.nr-actions .btn {
  min-width: 190px;
}

.nr-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* META/FOOTER */
.tos-meta,
.nr-footer-note {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}

.tos-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.tos-meta p {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.nr-footer-note {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .tos-section,
  .nr-card,
  .tos-banner,
  .nr-banner,
  .tos-final,
  .nr-accept-block {
    padding: 1.2rem 1.1rem;
  }
  
  .tos-section-header,
  .nr-card-header {
    align-items: flex-start;
  }
  
  .tos-index {
    grid-template-columns: 1fr;
  }
  
  .tos-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nr-actions .btn,
  .tos-final .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ========================================
   FORZAR MISMO ESTILO EN AMBAS VISTAS
   Elimina cualquier diferencia de fondo/tamaño
   ======================================== */

/* Same container width */
.container.tos-page,
.container.nr-page {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 1.5rem 1.5rem !important;
  width: 100% !important;
}

/* Same page padding */
.tos-page,
.nr-page {
  padding: 2rem 0 4rem !important;
  min-height: auto !important;
}

/* Remove any shell/wrapper interference */
.auth-shell .tos-page,
.register-shell .tos-page,
.auth-shell .nr-page,
.register-shell .nr-page {
  padding: 0 !important;
  min-height: auto !important;
}

.container.tos-page,
.container.nr-page {
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: auto !important;
}

/* Same font size everywhere */
.tos-page *,
.nr-page * {
  font-size: inherit !important;
}

.page-header h1 {
  font-size: 2rem !important;
}

.page-header p {
  font-size: .875rem !important;
}

/* Same background for sections */
.tos-section,
.nr-card {
  background: var(--bg2) !important;
  padding: 2rem 2.15rem !important;
  margin-bottom: 1.35rem !important;
}

/* Same banner */
.tos-banner,
.nr-banner {
  background: rgba(29, 78, 216, .1) !important;
  padding: 1.4rem 1.6rem !important;
  margin-bottom: 2.2rem !important;
}

.tos-banner.danger,
.nr-banner.danger {
  background: rgba(231, 76, 60, .09) !important;
}

/* Same text colors */
.tos-page .tos-title,
.nr-page .nr-card-title,
.tos-page .tos-sub,
.nr-page .nr-card-sub {
  color: inherit !important;
}

.tos-page .tos-list li,
.nr-page .nr-list li {
  color: var(--text-muted) !important;
  font-size: .875rem !important;
}

.tos-page .tos-list li strong,
.nr-page .nr-list li strong {
  color: var(--text) !important;
}

/* Same inner alerts */
.tos-inner,
.nr-inner-alert {
  padding: 1rem 1.15rem !important;
  margin-top: 1.25rem !important;
  font-size: .85rem !important;
}

.tos-inner.info,
.nr-inner-alert.info {
  background: rgba(29, 78, 216, .1) !important;
  color: #bfdbfe !important;
}

.tos-inner.danger,
.nr-inner-alert.danger {
  background: rgba(231, 76, 60, .07) !important;
  color: #f87171 !important;
}

/* Same final block */
.tos-final,
.nr-accept-block {
  background: var(--bg2) !important;
  padding: 2.8rem 2rem !important;
  margin-top: 2.4rem !important;
}

.tos-final h2,
.nr-accept-block h2 {
  font-size: 1.3rem !important;
  color: var(--text) !important;
}

.tos-final p,
.nr-accept-block p {
  font-size: .875rem !important;
  color: var(--text-muted) !important;
}

/* Remove any gradient/background interference from shells */
.auth-shell,
.register-shell {
  background: transparent !important;
  min-height: auto !important;
  padding: 0 !important;
  display: block !important;
}