/* ============================================================================
   EnglishMAX Online · LANDING PAGE PREMIUM
   Animaciones, mockups, efectos visuales de alto nivel
   ============================================================================ */

/* ============ ANNOUNCEMENT BAR (estilo sescolar - gradiente azul animado) ============ */
.announcement-bar {
    position: relative; z-index: 999;
    background: linear-gradient(270deg, #0c1929, #1e3a5f, #0a4f8a, #1565c0, #0d47a1, #1a237e, #0c1929);
    background-size: 300% 100%;
    animation: announcementGradient 12s ease infinite;
    color: #fff; padding: 12px 48px; text-align: center; font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 20px rgba(0,86,179,0.15);
}

@keyframes announcementGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Capa superior de brillo que se desplaza */
.announcement-bar::before {
    content:''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,0.2) 50%, transparent 100%);
    animation: shimmer 5s infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Partículas sutiles de fondo */
.announcement-bar::after {
    content:''; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 1px, transparent 2px),
        radial-gradient(circle at 80% 30%, rgba(96,165,250,0.1) 1px, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(255,255,255,0.04) 1px, transparent 2px);
    background-size: 150px 150px, 200px 200px, 180px 180px;
    pointer-events: none;
    opacity: 0.6;
}

.announcement-bar .pill {
    display: inline-block;
    background: linear-gradient(135deg, #F4D06F, #D4A845);
    padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 11px;
    margin-right: 10px; letter-spacing: 1px; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255,45,85,0.4);
    position: relative; z-index: 2;
}

.announcement-bar strong { position: relative; z-index: 2; }

.announcement-close {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; cursor: pointer; opacity: 0.7; font-size: 14px;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    transition: all 200ms;
    z-index: 3;
}
.announcement-close:hover {
    opacity: 1; background: rgba(255,255,255,0.2); transform: translateY(-50%) rotate(90deg);
}

@media (max-width: 640px) {
    .announcement-bar { padding: 10px 40px 10px 16px; font-size: 12px; }
    .announcement-bar .pill { font-size: 10px; }
}

/* ============ MEGA HERO ============ */
.mega-hero {
    position: relative; padding: 160px 24px 120px; overflow: hidden;
    background: #fff;
}

.hero-bg-mesh {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 800px 600px at 10% 10%, rgba(23,54,93,.15), transparent 50%),
        radial-gradient(ellipse 700px 500px at 90% 20%, rgba(77,208,225,.20), transparent 55%),
        radial-gradient(ellipse 600px 500px at 50% 90%, rgba(244,208,111,.15), transparent 50%),
        radial-gradient(ellipse 900px 700px at 80% 80%, rgba(138,205,136,.18), transparent 55%),
        radial-gradient(ellipse 500px 400px at 30% 60%, rgba(74,144,226,.12), transparent 50%);
}

.hero-noise {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.4; z-index: 1;
    background-image:
        repeating-linear-gradient(90deg, rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0, rgba(0,0,0,.015) 1px, transparent 1px, transparent 3px);
}

.hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 60px; text-align: center; } }

.hero-text-col { position: relative; }
.hero-eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
@media (max-width: 1024px) { .hero-eyebrow-row { justify-content: center; } }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
    font-size: 13px; font-weight: 600; color: var(--ios-blue);
    background: rgba(0,122,255,.08); border: 1px solid rgba(0,122,255,.2);
    border-radius: 999px;
}

.hero-rating { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-tertiary); }
.hero-rating .stars { color: var(--ios-orange); letter-spacing: 2px; }

.hero-mega-title {
    font-size: clamp(48px, 7vw, 88px); font-weight: 900; line-height: 1.02;
    letter-spacing: -0.04em; margin: 0 0 24px; color: var(--text-primary);
}
.hero-mega-title .highlight {
    position: relative; display: inline-block;
    background: linear-gradient(135deg, #17365D 0%, #4A90E2 25%, #4DD0E1 50%, #8ACD88 75%, #F4D06F 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradient-shift 8s ease infinite; background-size: 200% 200%;
}
@keyframes gradient-shift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.hero-mega-title .highlight::after {
    content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12'%3E%3Cpath d='M0 6 Q75 0 150 6 T300 6' stroke='%234DD0E1' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hero-sub-large {
    font-size: clamp(18px, 2vw, 22px); color: var(--text-secondary);
    line-height: 1.5; max-width: 560px; margin-bottom: 36px;
}
@media (max-width: 1024px) { .hero-sub-large { margin-left: auto; margin-right: auto; } }

.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
@media (max-width: 1024px) { .hero-cta-row { justify-content: center; } }

.btn-mega {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 20px 36px; font-size: 17px; font-weight: 700;
    border-radius: 999px; transition: all 300ms var(--ease-ios);
    letter-spacing: -0.01em; border: 0; cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
}
.btn-mega-primary {
    background: linear-gradient(135deg, #17365D 0%, #4A90E2 50%, #4DD0E1 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #fff;
    box-shadow: 0 8px 28px rgba(23,54,93,.4), inset 0 1px 0 rgba(255,255,255,.2);
    transition: background-position 500ms ease, transform 300ms, box-shadow 300ms;
}
.btn-mega-primary::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left 600ms;
}
.btn-mega-primary:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 14px 36px rgba(77,208,225,.45), inset 0 1px 0 rgba(255,255,255,.3);
    color: #fff;
}
.btn-mega-primary:hover::before { left: 100%; }

.btn-mega-ghost {
    background: rgba(255,255,255,.7); backdrop-filter: blur(10px);
    color: var(--text-primary); border: 1.5px solid var(--separator);
}
.btn-mega-ghost:hover {
    background: #fff; border-color: var(--ios-blue);
    color: var(--ios-blue); transform: translateY(-2px);
}

.hero-trust-signals { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; color: var(--text-tertiary); font-size: 14px; }
@media (max-width: 1024px) { .hero-trust-signals { justify-content: center; } }
.hero-trust-signals .item { display: flex; align-items: center; gap: 6px; }
.hero-trust-signals i { color: var(--ios-green); font-size: 18px; }

/* ===== HERO VISUAL: Animated chat mockup ===== */
.hero-visual-col { position: relative; perspective: 1000px; }

.hero-mockup-stack { position: relative; }

.hero-mockup {
    background: linear-gradient(135deg, #F8F8FB, #EDEDF2);
    border-radius: 32px; padding: 24px 20px;
    box-shadow: 0 40px 80px rgba(0,0,0,.15), 0 20px 40px rgba(0,122,255,.1);
    border: 1px solid rgba(255,255,255,.8);
    transform: rotate3d(0,1,0.1,-8deg);
    transition: transform 800ms var(--ease-ios);
}
.hero-mockup:hover { transform: rotate3d(0,1,0.1,-4deg) translateY(-8px); }

.mockup-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 16px; }
.mockup-chat-head .avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #007AFF, #5856D6);
    display: grid; place-items: center; color: #fff; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,122,255,.35);
}
.mockup-chat-head .info { flex: 1; }
.mockup-chat-head .name { font-size: 15px; font-weight: 700; }
.mockup-chat-head .sub { font-size: 12px; color: var(--text-tertiary); }
.mockup-chat-head .status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--ios-green);
    box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,.6); }
    50% { box-shadow: 0 0 0 8px rgba(52,199,89,0); }
}

.mockup-messages { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow: hidden; }
.mockup-msg { max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; animation: msg-in 600ms var(--ease-ios) both; }
.mockup-msg.ai { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); align-self: flex-start; border-bottom-left-radius: 4px; }
.mockup-msg.user { background: linear-gradient(135deg, #17365D, #4A90E2); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px rgba(23,54,93,.25); }
.mockup-msg.ai.typing::after {
    content: '●●●'; display: inline-block;
    animation: typing-dots 1.4s infinite; letter-spacing: 2px;
    color: var(--text-tertiary);
}
@keyframes typing-dots {
    0%,20% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mockup-msg.ai:nth-child(1) { animation-delay: 0.2s; }
.mockup-msg.user:nth-child(2) { animation-delay: 0.8s; }
.mockup-msg.ai:nth-child(3) { animation-delay: 1.4s; }
.mockup-msg.user:nth-child(4) { animation-delay: 2s; }

/* Floating badges around the mockup */
.hero-float-badge {
    position: absolute; background: #fff;
    padding: 14px 18px; border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
    animation: float 4s ease-in-out infinite;
}
.hero-float-badge.xp { top: -20px; right: -20px; color: var(--brand-gold-dark); animation-delay: -1s; border: 2px solid var(--brand-gold); }
.hero-float-badge.streak { bottom: 40px; left: -40px; color: var(--brand-teal-dark); animation-delay: -2s; border: 2px solid var(--brand-teal); }
.hero-float-badge.level { top: 40%; right: -50px; color: var(--brand-green-dark); animation-delay: -3s; border: 2px solid var(--brand-green); }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.hero-float-badge i { font-size: 20px; }
.hero-float-badge .label { display: block; font-size: 11px; color: var(--text-tertiary); font-weight: 500; margin-top: -2px; }
@media (max-width: 1024px) {
    .hero-float-badge.streak { left: auto; right: 20px; bottom: 100px; }
    .hero-float-badge.level { right: 10px; }
}

/* ============ STATS BAND — minimalista compacto ============ */
.stats-hero-band {
    padding: 64px 24px;
    position: relative;
    color: #fff;
    background: #0A0E1A;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stats-hero-band::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 1000px 400px at 50% 50%, rgba(77,208,225,0.05), transparent 70%);
    pointer-events: none;
}

.stats-grid-big {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .stats-grid-big { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
}

.stat-big {
    text-align: center;
    padding: 0 24px;
    position: relative;
}

.stat-big + .stat-big::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
    .stat-big + .stat-big::before { display: none; }
    .stat-big { padding: 0 16px; }
}

.stat-big-accent {
    width: 20px;
    height: 2px;
    margin: 0 auto 14px;
    border-radius: 2px;
    opacity: 0.9;
}
.stat-big:nth-child(1) .stat-big-accent { background: #4DD0E1; }
.stat-big:nth-child(2) .stat-big-accent { background: #8ACD88; }
.stat-big:nth-child(3) .stat-big-accent { background: #F4D06F; }
.stat-big:nth-child(4) .stat-big-accent { background: #4A90E2; }

.stat-big-num {
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: #F5F8FF;
    font-variant-numeric: tabular-nums;
}
.stat-big-num span { font-weight: 500; font-size: 0.55em; margin-left: 2px; letter-spacing: 0; }

.stat-big-lbl {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin-top: 10px;
    font-weight: 500;
}

.stat-big-sub {
    font-size: 12.5px;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
    font-weight: 400;
}

.stat-big-icon, .stat-big-divider { display: none; }

/* ============ TRUSTED BY / AS SEEN ============ */
.trusted-bar { padding: 60px 24px; background: #FAFAFA; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); }
.trusted-title {
    text-align: center; font-size: 13px; font-weight: 600;
    color: var(--text-tertiary); letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 32px;
}
.marquee-wrapper { overflow: hidden; position: relative; }
.marquee-wrapper::before, .marquee-wrapper::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(90deg, #FAFAFA, transparent); }
.marquee-wrapper::after { right: 0; background: linear-gradient(270deg, #FAFAFA, transparent); }

.marquee { display: flex; gap: 64px; animation: marquee 40s linear infinite; white-space: nowrap; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 700; color: var(--text-secondary);
    opacity: .5; transition: opacity 300ms;
}
.marquee-item:hover { opacity: 1; }
.marquee-item i { font-size: 26px; }

/* ============ PROBLEM / SOLUTION ============ */
.problem-section {
    padding: 120px 24px; background: #fff;
    text-align: center;
}
.problem-quote-big {
    font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.02em; max-width: 860px; margin: 0 auto 40px;
    color: var(--text-primary);
}
.problem-quote-big em {
    font-style: normal; color: var(--ios-red); font-weight: 800;
    position: relative; display: inline-block;
}
.problem-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 1100px; margin: 40px auto 0; }
.problem-item {
    background: #fafafa; border-radius: 20px; padding: 28px;
    text-align: left; position: relative;
}
.problem-item::before {
    content: '✗'; position: absolute; top: 20px; right: 24px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,59,48,.12); color: var(--ios-red);
    display: grid; place-items: center; font-weight: 700; font-size: 18px;
}
.problem-item h4 { font-size: 17px; margin-bottom: 8px; padding-right: 40px; }
.problem-item p { color: var(--text-tertiary); font-size: 14px; margin: 0; line-height: 1.5; }

/* ============ BIG FEATURE ROWS ============ */
.feature-big-row {
    padding: 100px 24px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
    max-width: 1200px; margin: 0 auto;
}
.feature-big-row.reversed { direction: rtl; }
.feature-big-row.reversed > * { direction: ltr; }
@media (max-width: 900px) { .feature-big-row, .feature-big-row.reversed { grid-template-columns: 1fr; direction: ltr; gap: 48px; } }

.feature-big-text .eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 700;
    border-radius: 999px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;
}
.feature-big-text h2 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 20px; letter-spacing: -0.03em; }
.feature-big-text p { font-size: 18px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
.feature-big-list { list-style: none; padding: 0; margin: 0; }
.feature-big-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--text-secondary); }
.feature-big-list li i { color: var(--ios-green); font-size: 22px; flex-shrink: 0; margin-top: -2px; }

.feature-big-visual { position: relative; }

/* Visual mockups for each feature */
.mockup-phone {
    width: 320px; height: 620px;
    background: #1C1C1E; border-radius: 48px; padding: 12px;
    box-shadow: 0 40px 80px rgba(0,0,0,.15);
    position: relative; margin: 0 auto;
    border: 1px solid rgba(0,0,0,.1);
}
.mockup-phone::before {
    content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 26px; background: #000; border-radius: 20px;
    z-index: 10;
}
.mockup-phone-screen {
    width: 100%; height: 100%; background: #fff; border-radius: 36px;
    overflow: hidden; position: relative;
}

.mockup-smart-daily {
    padding: 60px 20px 24px;
    background: linear-gradient(135deg, #17365D 0%, #4A90E2 50%, #4DD0E1 100%);
    color: #fff; height: 100%;
    display: flex; flex-direction: column;
}
.mockup-smart-daily .time-label { font-size: 13px; opacity: .85; margin-bottom: 4px; }
.mockup-smart-daily h3 { color: #fff; font-size: 28px; margin-bottom: 24px; }
.msd-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 24px; }
.msd-dot { height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.msd-dot.done { background: #fff; }
.msd-card { background: rgba(255,255,255,.15); backdrop-filter: blur(10px); padding: 20px; border-radius: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.msd-word { font-size: 36px; font-weight: 800; margin-bottom: 6px; }
.msd-trans { font-size: 18px; opacity: .85; margin-bottom: 16px; }
.msd-example { font-size: 13px; opacity: .75; font-style: italic; }

.mockup-vocab {
    padding: 60px 20px 24px; background: #fff; height: 100%;
}
.vocab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.vocab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.vocab-stat { background: #F2F2F7; padding: 12px 8px; border-radius: 14px; text-align: center; }
.vocab-stat-num { font-size: 20px; font-weight: 800; color: var(--ios-blue); line-height: 1; }
.vocab-stat-lbl { font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.flashcard-mockup {
    background: linear-gradient(135deg, #00C7BE, #30B0C7);
    color: #fff; padding: 32px 20px; border-radius: 22px;
    text-align: center;
}
.flashcard-mockup .word { font-size: 36px; font-weight: 800; margin-bottom: 8px; }
.flashcard-mockup .phonetic { font-size: 14px; opacity: .8; margin-bottom: 16px; }
.flashcard-mockup .trans { font-size: 18px; }

.mockup-toeic {
    padding: 60px 0 0; background: #FAFAFA; height: 100%; display: flex; flex-direction: column;
}
.mockup-toeic .header { background: linear-gradient(135deg, #F4D06F, #D4A845); color: #0F2447; padding: 24px 20px; }
.mockup-toeic .header h3 { color: #0F2447; margin: 0; font-size: 20px; }
.mockup-toeic .score-big {
    font-size: 64px; font-weight: 900; text-align: center; padding: 24px 0;
    background: linear-gradient(135deg, #17365D, #4A90E2, #4DD0E1);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mockup-toeic .subscore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; }
.mockup-toeic .subscore { background: #fff; padding: 16px; border-radius: 14px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.mockup-toeic .subscore-val { font-size: 24px; font-weight: 800; }
.mockup-toeic .subscore-lbl { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ============ INTERACTIVE DEMO ============ */
.demo-section {
    padding: 120px 24px;
    background: linear-gradient(180deg, #fff 0%, #F8F8FB 100%);
}
.demo-container {
    max-width: 800px; margin: 0 auto;
    background: #fff; border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,.08);
    border: 1px solid var(--separator);
    overflow: hidden;
}
.demo-header {
    background: linear-gradient(135deg, #17365D 0%, #4A90E2 50%, #4DD0E1 100%);
    color: #fff; padding: 28px;
    display: flex; align-items: center; gap: 16px;
    position: relative; overflow: hidden;
}
.demo-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(138,205,136,.3), transparent 50%),
                radial-gradient(ellipse at 20% 80%, rgba(244,208,111,.25), transparent 50%);
}
.demo-header > * { position: relative; z-index: 1; }
.demo-header .avatar { width: 48px; height: 48px; background: rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.demo-header h3 { color: #fff; margin: 0; font-size: 18px; }
.demo-header p { color: rgba(255,255,255,.85); margin: 0; font-size: 13px; }

.demo-body { padding: 24px; min-height: 300px; max-height: 400px; overflow-y: auto; }
.demo-msg { display: flex; gap: 10px; margin-bottom: 16px; }
.demo-msg.user { flex-direction: row-reverse; }
.demo-msg .bubble { max-width: 75%; padding: 12px 18px; border-radius: 20px; font-size: 15px; line-height: 1.5; }
.demo-msg.ai .bubble { background: #F2F2F7; border-bottom-left-radius: 4px; }
.demo-msg.user .bubble { background: linear-gradient(135deg, #17365D, #4A90E2); color: #fff; border-bottom-right-radius: 4px; }

.demo-suggestions { padding: 16px 24px; background: #FAFAFA; border-top: 1px solid var(--separator); }
.demo-suggestions-title { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.demo-sugg-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-sugg-pill {
    background: #fff; border: 1px solid var(--separator); padding: 8px 14px;
    border-radius: 999px; font-size: 13px; color: var(--text-primary); cursor: pointer;
    font-weight: 500; transition: all 200ms;
}
.demo-sugg-pill:hover {
    background: rgba(0,122,255,.05); border-color: var(--ios-blue); color: var(--ios-blue);
    transform: translateY(-1px);
}

/* ============ HOW IT WORKS TIMELINE ============ */
.howit-section { padding: 120px 24px; background: #fff; }
.howit-grid { max-width: 1100px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; position: relative; }
.howit-grid::before {
    content: ''; position: absolute; top: 32px; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, var(--ios-blue), var(--ios-indigo), var(--ios-purple), var(--ios-pink));
    opacity: 0.2;
}
@media (max-width: 768px) { .howit-grid::before { display: none; } }
.howit-step { position: relative; text-align: center; }
.howit-num {
    width: 64px; height: 64px; margin: 0 auto 20px;
    background: #fff; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 800;
    box-shadow: 0 4px 16px rgba(0,122,255,.2);
    border: 2px solid var(--ios-blue); color: var(--ios-blue);
    position: relative; z-index: 1;
}
.howit-step h4 { font-size: 18px; margin-bottom: 8px; }
.howit-step p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 0; }

/* ============ SCENARIOS — minimalista compacto v6 ============ */
.scenarios-showcase {
    padding: 80px 24px;
    position: relative;
}

.scenarios-carousel {
    max-width: 1280px; margin: 40px auto 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* ===== Scenario card — minimalista refinado ===== */
.scenario-tile {
    --c1: #4DD0E1;
    position: relative;
    background: #0F1525;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 300ms, border-color 300ms, transform 300ms;
}
.scenario-tile:hover {
    background: #12182E;
    border-color: rgba(77,208,225,0.25);
    transform: translateY(-2px);
    color: inherit;
}

/* Acento color top (misma línea que stats) */
.scenario-tile .scenario-accent {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--c1);
    opacity: 0.9;
    margin-bottom: 4px;
}

/* Meta top: Category · Level */
.scenario-tile .scenario-meta-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}
.scenario-tile .scenario-meta-top .dot {
    width: 3px; height: 3px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
}

/* Título */
.scenario-tile .title {
    font-size: 17px;
    font-weight: 600;
    color: #F5F8FF;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0;
}

/* Descripción compacta */
.scenario-tile .desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* Footer con meta + arrow */
.scenario-tile .scenario-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.scenario-tile .scenario-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.scenario-tile .scenario-meta i {
    color: var(--c1);
    font-size: 14px;
}
.scenario-tile .scenario-arrow {
    color: rgba(255,255,255,0.35);
    font-size: 16px;
    transition: transform 300ms, color 300ms;
}
.scenario-tile:hover .scenario-arrow {
    color: var(--c1);
    transform: translateX(3px);
}

/* Remove elementos antiguos */
.scenario-tile .scenario-header,
.scenario-tile .scenario-body,
.scenario-tile .scenario-icon,
.scenario-tile .level-pill,
.scenario-tile .scenario-category,
.scenario-tile > .noise,
.scenario-tile > .stripe { display: none !important; }

/* Overrides para modo claro */
:root:not([data-theme="dark"]) .scenario-tile {
    background: linear-gradient(145deg, #ffffff 0%, #F8FAFD 100%);
    border-color: rgba(23,54,93,0.08);
    box-shadow:
        0 4px 12px rgba(23,54,93,0.05),
        0 20px 40px rgba(23,54,93,0.08);
}
:root:not([data-theme="dark"]) .scenario-tile .title { color: #17365D; }
:root:not([data-theme="dark"]) .scenario-tile .desc { color: rgba(23,54,93,0.55); }
:root:not([data-theme="dark"]) .scenario-tile .level-pill {
    background: rgba(23,54,93,0.06);
    border-color: rgba(23,54,93,0.1);
    color: rgba(23,54,93,0.7);
}
:root:not([data-theme="dark"]) .scenario-tile .scenario-footer {
    border-top-color: rgba(23,54,93,0.06);
}
:root:not([data-theme="dark"]) .scenario-tile .scenario-meta { color: rgba(23,54,93,0.5); }

/* ============ COMPARISON TABLE ============ */
.compare-section { padding: 120px 24px; background: #fff; }
.compare-table-wrap { max-width: 960px; margin: 60px auto 0; overflow-x: auto; }
.compare-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.compare-table th, .compare-table td { padding: 16px; text-align: center; border-bottom: 1px solid var(--separator); }
.compare-table th { background: #FAFAFA; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.compare-table td { font-size: 14px; color: var(--text-secondary); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; font-weight: 500; color: var(--text-primary); }
.compare-table .emx-col { background: linear-gradient(180deg, rgba(0,122,255,.04), rgba(175,82,222,.02)); border-left: 2px solid var(--ios-blue); border-right: 2px solid var(--ios-blue); position: relative; }
.compare-table th.emx-col { color: var(--ios-blue); font-size: 16px; position: relative; }
.compare-table th.emx-col::before {
    content: '★ BEST'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #F4D06F, #D4A845); color: #fff;
    padding: 3px 10px; border-radius: 999px; font-size: 10px; letter-spacing: 1px;
}
.compare-table .check { color: var(--ios-green); font-size: 20px; }
.compare-table .cross { color: var(--gray-3); font-size: 20px; }

/* ============ CASE STUDIES ============ */
.case-section { padding: 120px 24px; background: #FAFAFA; }
.case-grid { max-width: 1200px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.case-card {
    background: #fff; border-radius: 24px; padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    border: 1px solid var(--separator);
    transition: all 400ms var(--ease-ios);
}
.case-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.1); }

.case-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--separator); }
.case-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(77,208,225,0.25);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.case-name { font-size: 16px; font-weight: 700; }
.case-role { font-size: 13px; color: var(--text-tertiary); }

.case-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 20px 0; }
.case-score { background: #F2F2F7; padding: 14px; border-radius: 14px; text-align: center; }
.case-score.after { background: linear-gradient(135deg, rgba(52,199,89,.1), rgba(0,199,190,.1)); border: 1px solid rgba(52,199,89,.2); }
.case-score .lbl { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.case-score .val { font-size: 26px; font-weight: 800; margin-top: 4px; color: var(--text-primary); }
.case-score.after .val { color: var(--ios-green); }
.case-arrow { color: var(--ios-green); font-size: 20px; }

.case-quote { font-size: 15px; color: var(--text-secondary); font-style: italic; line-height: 1.6; }

/* ============ LIVE ACTIVITY FEED — mismo fondo que CTA mega ============ */
.activity-feed {
    padding: 120px 24px;
    color: #fff;
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse 1000px 600px at 10% 20%, rgba(77,208,225,0.25), transparent 50%),
        radial-gradient(ellipse 900px 500px at 90% 30%, rgba(138,205,136,0.18), transparent 55%),
        radial-gradient(ellipse 800px 500px at 50% 90%, rgba(244,208,111,0.15), transparent 55%),
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(74,144,226,0.22), transparent 55%),
        linear-gradient(180deg, #0F2447 0%, #0A0E1A 100%);
}

.activity-feed::before,
.activity-feed::after { display: none; }

.activity-feed-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative; z-index: 1;
}

.activity-feed-inner .sect-hdr h2 {
    color: #F5F8FF;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -0.03em;
}

.activity-feed-inner .sect-hdr p {
    color: rgba(232,236,244,0.65);
    font-size: 18px;
}

/* Pulse dot en el eyebrow */
.activity-feed-inner .sect-eyebrow {
    position: relative;
    padding-left: 24px !important;
}
.activity-feed-inner .sect-eyebrow::before {
    content: '';
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    background: #5EE589;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(94,229,137,0.7);
    animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(94,229,137,0.7); }
    50%      { box-shadow: 0 0 0 10px rgba(94,229,137,0); }
}

/* Lista con max-width y gap perfecto */
.activity-list {
    display: flex; flex-direction: column;
    gap: 14px;
    max-width: 780px;
    margin: 50px auto 0;
    position: relative;
}

/* Línea vertical decorativa a la izquierda (conexión) */
.activity-list::before {
    content: '';
    position: absolute;
    left: 34px; top: 20px; bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        rgba(77,208,225,0.4) 15%,
        rgba(138,205,136,0.4) 50%,
        rgba(244,208,111,0.3) 85%,
        transparent);
    pointer-events: none;
    z-index: 0;
}

/* === Activity Item premium === */
.activity-item {
    background: linear-gradient(145deg,
        rgba(30,40,65,0.85) 0%,
        rgba(20,28,48,0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 18px 22px;
    border-radius: 16px;
    display: flex; align-items: center;
    gap: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    animation: slide-in 600ms var(--ease-spring) both;
    position: relative;
    overflow: hidden;
    transition: all 400ms;
    z-index: 1;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        0 8px 24px rgba(0,0,0,0.2);
}

.activity-item::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg,
        rgba(77,208,225,0.08),
        transparent 40%);
    opacity: 0;
    transition: opacity 400ms;
    pointer-events: none;
}

.activity-item:hover {
    transform: translateX(4px);
    border-color: rgba(77,208,225,0.3);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.4),
        0 12px 32px rgba(0,0,0,0.3),
        0 0 30px rgba(77,208,225,0.15);
}
.activity-item:hover::before { opacity: 1; }

@keyframes slide-in {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Avatar con foto real */
.activity-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(77,208,225,0.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background: #0F1525;
    z-index: 2;
    position: relative;
}

/* Halo pulsante de la primera actividad (la más reciente) */
.activity-item:first-child .activity-avatar::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid #4DD0E1;
    animation: halo-pulse 2s infinite;
    pointer-events: none;
}
@keyframes halo-pulse {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

.activity-text {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(232,236,244,0.85);
}
.activity-text strong {
    font-weight: 700;
    color: #F5F8FF;
}

/* Badge de XP/acción destacado */
.activity-text span[style*="color"] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 8px;
    background: rgba(94,229,137,0.12);
    border: 1px solid rgba(94,229,137,0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.activity-emoji {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.activity-time {
    font-size: 11.5px;
    color: rgba(232,236,244,0.4);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.activity-time::before {
    content: '';
    width: 4px; height: 4px;
    background: rgba(94,229,137,0.6);
    border-radius: 50%;
    animation: live-pulse-small 2s infinite;
}
@keyframes live-pulse-small {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@media (max-width: 640px) {
    .activity-list::before { display: none; }
    .activity-item { padding: 14px 16px; gap: 12px; }
    .activity-avatar { width: 38px; height: 38px; font-size: 14px; }
    .activity-text { font-size: 13px; }
}

/* ============ MOBILE APP PREVIEW ============ */
.mobile-preview-section {
    padding: 120px 24px; background: linear-gradient(135deg, #F8F8FB, #fff);
    overflow: hidden;
}
.mobile-preview-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .mobile-preview-grid { grid-template-columns: 1fr; } }

.mobile-preview-phones { display: flex; justify-content: center; gap: 20px; perspective: 1200px; }
.mini-phone {
    width: 200px; height: 400px; background: #1C1C1E;
    border-radius: 32px; padding: 8px;
    box-shadow: 0 30px 60px rgba(0,0,0,.15);
}
.mini-phone:nth-child(1) { transform: rotate3d(0,1,0,12deg) translateX(30px); }
.mini-phone:nth-child(2) { transform: translateY(-20px); z-index: 2; }
.mini-phone:nth-child(3) { transform: rotate3d(0,1,0,-12deg) translateX(-30px); }
.mini-phone-screen {
    width: 100%; height: 100%; background: #fff;
    border-radius: 24px; overflow: hidden;
    padding: 20px;
}

.qr-code-box {
    background: #fff; border-radius: 20px; padding: 20px;
    box-shadow: var(--shadow-md); display: inline-flex;
    align-items: center; gap: 20px; margin-top: 24px;
}
.qr-code-img { width: 80px; height: 80px; background: #000; }

/* ============ BIG CTA FINAL ============ */
.cta-mega {
    padding: 150px 24px;
    background:
        radial-gradient(ellipse at top left, rgba(77,208,225,.35), transparent 55%),
        radial-gradient(ellipse at top right, rgba(138,205,136,.25), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(244,208,111,.25), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(74,144,226,.3), transparent 55%),
        linear-gradient(180deg, #0F2447 0%, #17365D 100%);
    color: #fff; text-align: center;
    position: relative; overflow: hidden;
}
.cta-mega::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    opacity: 0.5;
}
.cta-mega-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta-mega h2 {
    color: #fff; font-size: clamp(40px, 6vw, 68px); font-weight: 900;
    line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px;
}
.cta-mega p { color: rgba(255,255,255,.75); font-size: 20px; margin-bottom: 40px; }

/* ============ SECTION HEADER ============ */
.sect-hdr { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.sect-hdr .sect-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 999px; margin-bottom: 20px;
}
.sect-hdr h2 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 16px; letter-spacing: -0.03em; font-weight: 800; }
.sect-hdr p { font-size: 19px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ============ TESTIMONIAL V2 ============ */
.testis-pro { padding: 120px 24px; background: #fff; }
.testis-pro-grid { max-width: 1200px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.testi-pro {
    background: linear-gradient(180deg, #fff 0%, #FAFAFA 100%);
    border-radius: 24px; padding: 32px;
    border: 1px solid var(--separator);
    transition: all 400ms;
    position: relative;
}
.testi-pro:hover { box-shadow: 0 20px 50px rgba(0,0,0,.08); transform: translateY(-4px); border-color: rgba(0,122,255,.3); }
.testi-pro::before {
    content: '"'; position: absolute; top: 8px; right: 24px;
    font-size: 100px; color: rgba(0,122,255,.1); line-height: 1;
    font-family: Georgia, serif;
}
.testi-pro .stars { color: var(--ios-orange); letter-spacing: 3px; margin-bottom: 16px; font-size: 18px; }
.testi-pro-quote { font-size: 17px; line-height: 1.6; color: var(--text-primary); margin-bottom: 24px; font-weight: 500; }
.testi-pro-user { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--separator); }
.testi-pro-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(77,208,225,0.25); box-shadow: 0 4px 12px rgba(0,0,0,0.2); flex-shrink: 0; }
.testi-pro-name { font-size: 15px; font-weight: 700; }
.testi-pro-role { font-size: 13px; color: var(--text-tertiary); }
.testi-pro-flag { margin-left: auto; font-size: 24px; }

/* ============ PRICING V2 ============ */
.pricing-v2-section { padding: 120px 24px; background: linear-gradient(180deg, #FAFAFA 0%, #fff 100%); }
.pricing-toggle-v2 { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 40px auto 48px; font-size: 16px; font-weight: 500; }
.pricing-toggle-switch { position: relative; width: 56px; height: 32px; }
.pricing-toggle-switch input { opacity: 0; width: 0; height: 0; }
.pricing-toggle-slider { position: absolute; inset: 0; background: var(--gray-5); border-radius: 999px; cursor: pointer; transition: 200ms; }
.pricing-toggle-slider::before { content: ''; position: absolute; width: 26px; height: 26px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: 200ms; }
.pricing-toggle-switch input:checked + .pricing-toggle-slider { background: var(--ios-blue); }
.pricing-toggle-switch input:checked + .pricing-toggle-slider::before { transform: translateX(24px); }
.save-chip { background: linear-gradient(135deg, #34C759, #00C7BE); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; margin-left: 4px; }

.pricing-v2-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.pricing-v2-card {
    background: #fff; border-radius: 28px; padding: 40px 28px;
    border: 2px solid var(--separator); position: relative;
    transition: all 400ms var(--ease-ios); display: flex; flex-direction: column;
}
.pricing-v2-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.1); }
.pricing-v2-card.featured {
    border-color: transparent;
    background:
        linear-gradient(180deg, rgba(0,122,255,.06), rgba(175,82,222,.04) 50%, #fff 100%);
    box-shadow: 0 0 0 2px var(--ios-blue), 0 30px 60px rgba(0,122,255,.15);
    transform: scale(1.04);
}
.pricing-v2-card.featured::before {
    content: '🔥 MÁS POPULAR'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #F4D06F, #D4A845); color: #fff;
    padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
    box-shadow: 0 6px 16px rgba(255,45,85,.35);
}

.pricing-v2-icon { font-size: 32px; margin-bottom: 8px; }
.pricing-v2-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.pricing-v2-desc { font-size: 14px; color: var(--text-tertiary); min-height: 40px; margin: 8px 0 28px; line-height: 1.5; }
.pricing-v2-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.pricing-v2-currency { font-size: 20px; color: var(--text-tertiary); font-weight: 500; }
.pricing-v2-amount { font-size: 64px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--text-primary); }
.pricing-v2-period { color: var(--text-tertiary); font-size: 14px; margin-bottom: 28px; }

.pricing-v2-features { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; }
.pricing-v2-features li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.pricing-v2-features li i { color: var(--ios-green); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.pricing-v2-features li.disabled { color: var(--text-quaternary); }
.pricing-v2-features li.disabled i { color: var(--gray-4); }
.pricing-v2-features li strong { color: var(--text-primary); font-weight: 700; }

/* Pricing table comparison */
.pricing-table-full {
    max-width: 1000px; margin: 60px auto 0;
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.pricing-table-full table { width: 100%; border-collapse: collapse; }
.pricing-table-full th, .pricing-table-full td { padding: 16px 20px; border-bottom: 1px solid var(--separator); font-size: 14px; }
.pricing-table-full th { background: #FAFAFA; font-weight: 700; text-align: center; }
.pricing-table-full th:first-child, .pricing-table-full td:first-child { text-align: left; }
.pricing-table-full .check { color: var(--ios-green); font-size: 18px; text-align: center; }
.pricing-table-full .cross { color: var(--gray-3); font-size: 18px; text-align: center; }
.pricing-table-full .group-hdr { background: linear-gradient(90deg, rgba(0,122,255,.04), transparent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ios-blue); padding: 20px; }

/* ============ GUARANTEE ============ */
.guarantee-banner {
    padding: 90px 24px;
    background: linear-gradient(135deg, #8ACD88 0%, #5EAB5A 50%, #4DD0E1 100%);
    color: #fff; text-align: center;
    position: relative; overflow: hidden;
}
.guarantee-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.15), transparent 60%),
                radial-gradient(ellipse at bottom, rgba(244,208,111,0.2), transparent 60%);
    pointer-events: none;
}
.guarantee-inner { max-width: 720px; margin: 0 auto; }
.guarantee-icon { width: 100px; height: 100px; margin: 0 auto 20px; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); border-radius: 24px; display: grid; place-items: center; font-size: 48px; }
.guarantee-banner h2 { color: #fff; font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }
.guarantee-banner p { color: rgba(255,255,255,.9); font-size: 18px; line-height: 1.6; }

/* ============ FAQ V2 ============ */
.faq-section-v2 { padding: 120px 24px; background: #fff; }
.faq-grid {
    max-width: 900px; margin: 60px auto 0;
    background: #FAFAFA; border-radius: 24px; padding: 12px; border: 1px solid var(--separator);
}
.faq-item-v2 { border-radius: 14px; background: #fff; margin-bottom: 8px; transition: all 300ms; box-shadow: 0 1px 3px rgba(0,0,0,.02); }
.faq-item-v2:last-child { margin-bottom: 0; }
.faq-item-v2.open { box-shadow: 0 4px 16px rgba(0,122,255,.08); }
.faq-q {
    padding: 20px 24px; cursor: pointer; font-size: 16px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; user-select: none;
}
.faq-q-icon {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(0,122,255,.08);
    color: var(--ios-blue); display: grid; place-items: center; flex-shrink: 0; transition: 300ms;
}
.faq-item-v2.open .faq-q-icon { background: var(--ios-blue); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; padding: 0 24px; color: var(--text-secondary); transition: 300ms var(--ease-ios); font-size: 15px; line-height: 1.6; }
.faq-item-v2.open .faq-a { max-height: 500px; padding-bottom: 20px; }

/* ============ COUNTRIES ============ */
.countries-strip {
    padding: 80px 24px; background: #fff;
    border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator);
    text-align: center;
}
.countries-strip h3 { font-size: 20px; margin-bottom: 30px; color: var(--text-secondary); font-weight: 600; }
.countries-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.country-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #FAFAFA; padding: 10px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    border: 1px solid var(--separator); transition: all 200ms;
}
.country-chip:hover { border-color: var(--ios-blue); background: rgba(0,122,255,.04); }
.country-chip .flag { font-size: 22px; }

/* ============ MISC UTILITIES ============ */
.kbd {
    background: #F2F2F7; border: 1px solid var(--separator);
    border-bottom-width: 2px; padding: 2px 8px; border-radius: 6px;
    font-size: 12px; font-family: monospace;
}

.shine-on-hover { position: relative; overflow: hidden; }
.shine-on-hover::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    transition: left 600ms;
}
.shine-on-hover:hover::after { left: 100%; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 800ms var(--ease-ios); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Countdown */
.countdown-row { display: flex; justify-content: center; gap: 16px; margin: 24px 0; }
.countdown-cell { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); padding: 16px 20px; border-radius: 14px; min-width: 80px; }
.countdown-num { font-size: 36px; font-weight: 800; line-height: 1; }
.countdown-lbl { font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }

/* Flag icons customization */
.fi {
    display: inline-block;
    width: 1.4em; height: 1em;
    background-size: cover; background-position: center;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    vertical-align: -2px;
    margin-right: 2px;
}
.marquee-item .fi { width: 28px; height: 20px; border-radius: 3px; vertical-align: -4px; margin-right: 6px; }
.country-chip .fi { width: 24px; height: 18px; border-radius: 3px; vertical-align: -3px; }
.testi-pro-flag .fi { width: 32px; height: 24px; border-radius: 4px; vertical-align: middle; }

/* Feature wrap alternation */
.feature-wrap { background: var(--bg-primary); }
.feature-wrap-alt1 { background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); }
.feature-wrap-alt2 { background: var(--bg-primary); }

/* ===========================================================================
   DARK MODE — Landing page overrides
   =========================================================================== */

[data-theme="dark"] .mega-hero { background: var(--bg-primary); }

[data-theme="dark"] .hero-bg-mesh {
    background:
        radial-gradient(ellipse 800px 600px at 10% 10%, rgba(10,132,255,.22), transparent 50%),
        radial-gradient(ellipse 700px 500px at 90% 20%, rgba(191,90,242,.18), transparent 55%),
        radial-gradient(ellipse 600px 500px at 50% 90%, rgba(255,55,95,.12), transparent 50%),
        radial-gradient(ellipse 900px 700px at 80% 80%, rgba(50,215,75,.1), transparent 55%);
}

[data-theme="dark"] .hero-noise { opacity: 0.15; }

[data-theme="dark"] .hero-mega-title { color: var(--text-primary); }

[data-theme="dark"] .hero-eyebrow {
    background: rgba(10,132,255,.15); border-color: rgba(10,132,255,.35); color: var(--ios-blue);
}

[data-theme="dark"] .btn-mega-ghost {
    background: rgba(28,28,36,.7); border-color: var(--separator-opaque); color: var(--text-primary);
}
[data-theme="dark"] .btn-mega-ghost:hover {
    background: var(--bg-tertiary); border-color: var(--ios-blue); color: var(--ios-blue);
}

[data-theme="dark"] .hero-mockup {
    background: linear-gradient(135deg, #1C1C24, #12121A);
    border-color: rgba(255,255,255,.05);
    box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 20px 40px rgba(10,132,255,.15);
}

[data-theme="dark"] .mockup-chat-head { border-bottom-color: var(--separator); }
[data-theme="dark"] .mockup-msg.ai { background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

[data-theme="dark"] .hero-float-badge {
    background: var(--bg-tertiary);
    box-shadow: 0 12px 28px rgba(0,0,0,.5);
    border: 1px solid var(--separator);
}

[data-theme="dark"] .stats-hero-band { background: #000; }

[data-theme="dark"] .trusted-bar {
    background: var(--bg-primary);
    border-color: var(--separator);
}
[data-theme="dark"] .marquee-wrapper::before { background: linear-gradient(90deg, var(--bg-primary), transparent); }
[data-theme="dark"] .marquee-wrapper::after { background: linear-gradient(270deg, var(--bg-primary), transparent); }
[data-theme="dark"] .marquee-item { color: var(--text-secondary); }

[data-theme="dark"] .problem-section { background: var(--bg-primary); }
[data-theme="dark"] .problem-quote-big { color: var(--text-primary); }
[data-theme="dark"] .problem-item { background: var(--bg-tertiary); }
[data-theme="dark"] .problem-item::before { background: rgba(255,69,58,.2); }

[data-theme="dark"] .feature-big-row { background: transparent; }
[data-theme="dark"] section[style*="linear-gradient"] { background: var(--bg-primary) !important; }

[data-theme="dark"] .mockup-phone { background: #000; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .mockup-phone-screen { background: var(--bg-tertiary); }
[data-theme="dark"] .mockup-vocab { background: var(--bg-tertiary); }
[data-theme="dark"] .vocab-stat { background: var(--bg-elevated); }
[data-theme="dark"] .mockup-toeic { background: var(--bg-secondary); }
[data-theme="dark"] .mockup-toeic .subscore { background: var(--bg-tertiary); box-shadow: 0 2px 6px rgba(0,0,0,.3); }

[data-theme="dark"] .demo-section {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
[data-theme="dark"] .demo-container {
    background: var(--bg-tertiary);
    border-color: var(--separator);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
[data-theme="dark"] .demo-msg.ai .bubble { background: var(--bg-elevated); color: var(--text-primary); }
[data-theme="dark"] .demo-suggestions {
    background: var(--bg-secondary);
    border-top-color: var(--separator);
}
[data-theme="dark"] .demo-sugg-pill {
    background: var(--bg-tertiary); border-color: var(--separator); color: var(--text-primary);
}
[data-theme="dark"] .demo-sugg-pill:hover {
    background: rgba(10,132,255,.12); border-color: var(--ios-blue); color: var(--ios-blue);
}

[data-theme="dark"] .howit-section { background: var(--bg-primary); }
[data-theme="dark"] .howit-num {
    background: var(--bg-tertiary);
    box-shadow: 0 4px 16px rgba(10,132,255,.25);
}

[data-theme="dark"] .scenarios-showcase {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
}

[data-theme="dark"] .compare-section { background: var(--bg-primary); }
[data-theme="dark"] .compare-table {
    background: var(--bg-tertiary);
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
[data-theme="dark"] .compare-table th { background: var(--bg-elevated); color: var(--text-primary); }
[data-theme="dark"] .compare-table td { color: var(--text-secondary); }
[data-theme="dark"] .compare-table td:first-child { color: var(--text-primary); }
[data-theme="dark"] .compare-table .emx-col { background: rgba(10,132,255,.08); border-color: var(--ios-blue); }
[data-theme="dark"] .compare-table th.emx-col { color: var(--ios-blue); background: rgba(10,132,255,.12); }

[data-theme="dark"] .case-section { background: var(--bg-secondary); }
[data-theme="dark"] .case-card {
    background: var(--bg-tertiary); border-color: var(--separator);
}
[data-theme="dark"] .case-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.4); }
[data-theme="dark"] .case-header { border-bottom-color: var(--separator); }
[data-theme="dark"] .case-score { background: var(--bg-elevated); }
[data-theme="dark"] .case-score .val { color: var(--text-primary); }

[data-theme="dark"] .activity-feed { background: #000; }
[data-theme="dark"] .activity-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }

[data-theme="dark"] .testis-pro { background: var(--bg-primary); }
[data-theme="dark"] .testi-pro {
    background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-color: var(--separator);
}
[data-theme="dark"] .testi-pro:hover { border-color: rgba(10,132,255,.4); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
[data-theme="dark"] .testi-pro::before { color: rgba(10,132,255,.15); }
[data-theme="dark"] .testi-pro-user { border-top-color: var(--separator); }

[data-theme="dark"] .countries-strip {
    background: var(--bg-primary);
    border-color: var(--separator);
}
[data-theme="dark"] .country-chip {
    background: var(--bg-tertiary); border-color: var(--separator); color: var(--text-primary);
}
[data-theme="dark"] .country-chip:hover { background: rgba(10,132,255,.1); border-color: var(--ios-blue); }

[data-theme="dark"] .pricing-v2-section {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
[data-theme="dark"] .pricing-v2-card {
    background: var(--bg-tertiary);
    border-color: var(--separator);
}
[data-theme="dark"] .pricing-v2-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,.5); }
[data-theme="dark"] .pricing-v2-card.featured {
    background: linear-gradient(180deg, rgba(10,132,255,.08), rgba(191,90,242,.04) 50%, var(--bg-tertiary) 100%);
    box-shadow: 0 0 0 2px var(--ios-blue), 0 30px 60px rgba(10,132,255,.2);
}
[data-theme="dark"] .pricing-v2-amount { color: var(--text-primary); }

[data-theme="dark"] .pricing-table-full {
    background: var(--bg-tertiary);
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
[data-theme="dark"] .pricing-table-full th { background: var(--bg-elevated); color: var(--text-primary); }
[data-theme="dark"] .pricing-table-full td { border-color: var(--separator); color: var(--text-secondary); }

[data-theme="dark"] .guarantee-banner { background: linear-gradient(135deg, #007A45, #006B8E); }

[data-theme="dark"] .mobile-preview-section {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}
[data-theme="dark"] .mini-phone { background: #000; }
[data-theme="dark"] .mini-phone-screen { background: var(--bg-tertiary); }
[data-theme="dark"] .qr-code-box {
    background: var(--bg-tertiary);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .faq-section-v2 { background: var(--bg-primary); }
[data-theme="dark"] .faq-grid { background: var(--bg-secondary); border-color: var(--separator); }
[data-theme="dark"] .faq-item-v2 { background: var(--bg-tertiary); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .faq-item-v2.open { box-shadow: 0 4px 16px rgba(10,132,255,.15); }
[data-theme="dark"] .faq-q-icon { background: rgba(10,132,255,.15); color: var(--ios-blue); }

[data-theme="dark"] .cta-mega { background:
    radial-gradient(ellipse at top, rgba(10,132,255,.3), transparent 50%),
    radial-gradient(ellipse at bottom, rgba(191,90,242,.25), transparent 50%),
    #000;
}

/* Announcement bar queda oscura en ambos modos por diseño */
/* Footer queda oscuro en ambos modos */

/* ============================================================================
   MEJORAS PREMIUM DARK MODE (v2) — colores intensos de marca, depth visual
   ============================================================================ */

/* Body de la landing siempre oscuro */
.landing-page body,
html.landing-page body { background: #0A0E1A !important; color: #E8ECF4; }

/* === HERO: mismo fondo cinematográfico que CTA mega === */
[data-theme="dark"] .mega-hero {
    position: relative;
    background:
        radial-gradient(ellipse 1000px 600px at 10% 20%, rgba(77,208,225,0.3), transparent 50%),
        radial-gradient(ellipse 900px 500px at 90% 30%, rgba(138,205,136,0.22), transparent 55%),
        radial-gradient(ellipse 800px 500px at 50% 90%, rgba(244,208,111,0.18), transparent 55%),
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(74,144,226,0.28), transparent 55%),
        linear-gradient(180deg, #0F2447 0%, #0A0E1A 100%);
    overflow: hidden;
}

[data-theme="dark"] .hero-bg-mesh { display: none; }
[data-theme="dark"] .hero-noise { display: none; }

[data-theme="dark"] .hero-mega-title {
    color: #F5F8FF;
    background: none;
    -webkit-text-fill-color: #F5F8FF;
}

[data-theme="dark"] .hero-mega-title .highlight {
    background: linear-gradient(135deg, #4DD0E1 0%, #8ACD88 35%, #F4D06F 65%, #FFAA55 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(77,208,225,0.3));
}

[data-theme="dark"] .hero-mega-title .highlight::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12'%3E%3Cpath d='M0 6 Q75 0 150 6 T300 6' stroke='%234DD0E1' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E") no-repeat center / contain;
}

[data-theme="dark"] .hero-sub-large { color: rgba(232,236,244,0.75); }

[data-theme="dark"] .hero-rating { color: rgba(232,236,244,0.6); }

[data-theme="dark"] .hero-mockup {
    background: linear-gradient(145deg, rgba(28,36,55,0.9), rgba(15,20,35,0.95));
    border: 1px solid rgba(77,208,225,0.2);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.6),
        0 10px 30px rgba(77,208,225,0.1),
        inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .mockup-chat-head {
    border-bottom-color: rgba(77,208,225,0.15);
}

[data-theme="dark"] .mockup-chat-head .name { color: #F5F8FF; }
[data-theme="dark"] .mockup-chat-head .sub { color: rgba(232,236,244,0.55); }

[data-theme="dark"] .mockup-msg.ai {
    background: rgba(40,50,75,0.8);
    color: #E8ECF4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .hero-float-badge {
    background: linear-gradient(145deg, rgba(30,40,65,0.95), rgba(20,28,48,0.95));
    backdrop-filter: blur(20px);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.5),
        0 0 20px rgba(77,208,225,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

[data-theme="dark"] .hero-float-badge .label { color: rgba(232,236,244,0.5); }
[data-theme="dark"] .hero-float-badge.xp { color: #FCDD7A; border-color: rgba(244,208,111,0.4); }
[data-theme="dark"] .hero-float-badge.streak { color: #5EE5F5; border-color: rgba(77,208,225,0.4); }
[data-theme="dark"] .hero-float-badge.level { color: #9EE09C; border-color: rgba(138,205,136,0.4); }

/* === Trusted bar más elegante === */
[data-theme="dark"] .trusted-bar {
    background: linear-gradient(180deg, #0A0E1A 0%, #0F1528 100%);
    border-color: rgba(77,208,225,0.1);
}

[data-theme="dark"] .trusted-title {
    color: rgba(77,208,225,0.7);
    letter-spacing: 2.5px;
}

[data-theme="dark"] .marquee-item {
    color: rgba(232,236,244,0.7);
    opacity: 0.85;
}
[data-theme="dark"] .marquee-item:hover { color: #4DD0E1; opacity: 1; }

[data-theme="dark"] .marquee-wrapper::before {
    background: linear-gradient(90deg, #0F1528, transparent);
}
[data-theme="dark"] .marquee-wrapper::after {
    background: linear-gradient(270deg, #0F1528, transparent);
}

/* === Problem section mucho mejor === */
[data-theme="dark"] .problem-section {
    background:
        radial-gradient(ellipse at top, rgba(74,144,226,0.08), transparent 50%),
        #0A0E1A;
    padding: 140px 24px;
}

[data-theme="dark"] .problem-quote-big {
    color: #F5F8FF;
    font-weight: 800;
}
[data-theme="dark"] .problem-quote-big em {
    color: #FF6B7D;
    background: linear-gradient(135deg, #FF6B7D, #F4A855);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
    position: relative;
}

[data-theme="dark"] .problem-item {
    background: linear-gradient(145deg, rgba(30,40,65,0.7) 0%, rgba(20,28,48,0.7) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 300ms var(--ease-ios);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .problem-item::before {
    background: linear-gradient(135deg, rgba(255,107,125,0.2), rgba(244,168,85,0.1));
    color: #FF6B7D;
    width: 36px; height: 36px;
    top: 24px; right: 24px;
    font-size: 16px;
    border: 1px solid rgba(255,107,125,0.3);
    box-shadow: 0 0 20px rgba(255,107,125,0.2);
}

[data-theme="dark"] .problem-item:hover {
    transform: translateY(-4px);
    border-color: rgba(77,208,225,0.25);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.4),
        0 0 30px rgba(77,208,225,0.1);
}

[data-theme="dark"] .problem-item h4 { color: #F5F8FF; font-size: 18px; }
[data-theme="dark"] .problem-item p { color: rgba(232,236,244,0.65); }

/* === Feature rows wrap oscuros === */
[data-theme="dark"] .feature-wrap,
[data-theme="dark"] .feature-wrap-alt1,
[data-theme="dark"] .feature-wrap-alt2 { background: #0A0E1A; }

[data-theme="dark"] .feature-big-text h2 { color: #F5F8FF; }
[data-theme="dark"] .feature-big-text p { color: rgba(232,236,244,0.7); }
[data-theme="dark"] .feature-big-list li { color: rgba(232,236,244,0.75); }
[data-theme="dark"] .feature-big-list li i { color: #8ACD88; }

[data-theme="dark"] .feature-big-text .eyebrow {
    background: rgba(77,208,225,0.15) !important;
    color: #6BDDEA !important;
    border: 1px solid rgba(77,208,225,0.3);
}

/* === Demo section === */
[data-theme="dark"] .demo-section {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(23,54,93,0.3), transparent 60%),
        #0A0E1A;
}

[data-theme="dark"] .demo-container {
    background: linear-gradient(145deg, rgba(30,40,65,0.85), rgba(20,28,48,0.95));
    border: 1px solid rgba(77,208,225,0.2);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.5),
        0 0 0 1px rgba(77,208,225,0.1);
}

[data-theme="dark"] .demo-msg.ai .bubble {
    background: rgba(40,50,75,0.8);
    color: #E8ECF4;
}

[data-theme="dark"] .demo-suggestions {
    background: rgba(15,21,40,0.6);
    border-top-color: rgba(77,208,225,0.1);
}

[data-theme="dark"] .demo-suggestions-title { color: rgba(77,208,225,0.8); }

[data-theme="dark"] .demo-sugg-pill {
    background: rgba(40,50,75,0.7);
    border: 1px solid rgba(77,208,225,0.25);
    color: #E8ECF4;
}
[data-theme="dark"] .demo-sugg-pill:hover {
    background: rgba(77,208,225,0.15);
    border-color: rgba(77,208,225,0.5);
    color: #4DD0E1;
}

/* === How it works === */
[data-theme="dark"] .howit-section {
    background:
        radial-gradient(ellipse at bottom, rgba(74,144,226,0.1), transparent 60%),
        #0A0E1A;
}

[data-theme="dark"] .howit-grid::before {
    background: linear-gradient(90deg, #17365D, #4A90E2, #4DD0E1, #8ACD88, #F4D06F);
    opacity: 0.4;
    box-shadow: 0 0 20px rgba(77,208,225,0.3);
}

[data-theme="dark"] .howit-num {
    background: linear-gradient(145deg, rgba(30,40,65,0.95), rgba(20,28,48,0.95));
    border: 2px solid #4DD0E1;
    color: #4DD0E1;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.4),
        0 0 30px rgba(77,208,225,0.3);
}

[data-theme="dark"] .howit-step h4 { color: #F5F8FF; }
[data-theme="dark"] .howit-step p { color: rgba(232,236,244,0.65); }

/* === Scenarios showcase: fondo estilo CTA mega === */
[data-theme="dark"] .scenarios-showcase {
    position: relative;
    background:
        radial-gradient(ellipse 1000px 600px at 10% 20%, rgba(77,208,225,0.25), transparent 50%),
        radial-gradient(ellipse 900px 500px at 90% 30%, rgba(138,205,136,0.18), transparent 55%),
        radial-gradient(ellipse 800px 500px at 50% 90%, rgba(244,208,111,0.15), transparent 55%),
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(74,144,226,0.22), transparent 55%),
        linear-gradient(180deg, #0F2447 0%, #0A0E1A 100%);
    overflow: hidden;
}

[data-theme="dark"] .scenarios-showcase > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .scenario-tile {
    box-shadow:
        0 8px 20px rgba(0,0,0,0.4),
        0 24px 48px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.15);
}
[data-theme="dark"] .scenario-tile:hover {
    box-shadow:
        0 12px 28px rgba(0,0,0,0.5),
        0 40px 80px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 0 60px rgba(77,208,225,0.2);
}

/* === Comparison table premium === */
[data-theme="dark"] .compare-section {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(74,144,226,0.08), transparent 50%),
        #0A0E1A;
}

[data-theme="dark"] .compare-table {
    background: linear-gradient(145deg, rgba(30,40,65,0.95), rgba(20,28,48,0.95));
    border: 1px solid rgba(77,208,225,0.15);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(77,208,225,0.05);
}
[data-theme="dark"] .compare-table th {
    background: linear-gradient(180deg, rgba(40,50,75,0.95), rgba(30,40,65,0.95));
    color: #F5F8FF;
    border-bottom-color: rgba(77,208,225,0.2);
}
[data-theme="dark"] .compare-table td {
    border-bottom-color: rgba(255,255,255,0.06);
    color: rgba(232,236,244,0.75);
}
[data-theme="dark"] .compare-table td:first-child { color: #F5F8FF; font-weight: 500; }
[data-theme="dark"] .compare-table tr:hover td { background: rgba(77,208,225,0.03); }

[data-theme="dark"] .compare-table .emx-col {
    background: linear-gradient(180deg, rgba(77,208,225,0.08), rgba(74,144,226,0.05)) !important;
    border-left-color: #4DD0E1;
    border-right-color: #4DD0E1;
}
[data-theme="dark"] .compare-table th.emx-col {
    color: #4DD0E1;
    background: linear-gradient(180deg, rgba(77,208,225,0.15), rgba(74,144,226,0.1)) !important;
}
[data-theme="dark"] .compare-table .check { color: #8ACD88; }
[data-theme="dark"] .compare-table .cross { color: rgba(255,255,255,0.15); }

/* === Case studies premium === */
[data-theme="dark"] .case-section {
    background:
        radial-gradient(ellipse at 80% 40%, rgba(138,205,136,0.1), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(244,208,111,0.08), transparent 55%),
        #0A0E1A;
}

[data-theme="dark"] .case-card {
    background: linear-gradient(145deg, rgba(30,40,65,0.85), rgba(20,28,48,0.95));
    border: 1px solid rgba(77,208,225,0.15);
    backdrop-filter: blur(10px);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.3),
        0 0 0 1px rgba(77,208,225,0.05);
    padding: 36px 32px;
}
[data-theme="dark"] .case-card:hover {
    transform: translateY(-8px);
    border-color: rgba(77,208,225,0.4);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.5),
        0 0 40px rgba(77,208,225,0.15);
}
[data-theme="dark"] .case-header { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .case-name { color: #F5F8FF; }
[data-theme="dark"] .case-role { color: rgba(232,236,244,0.55); }
[data-theme="dark"] .case-score {
    background: rgba(20,28,48,0.7);
    border: 1px solid rgba(255,255,255,0.05);
}
[data-theme="dark"] .case-score .lbl { color: rgba(232,236,244,0.5); }
[data-theme="dark"] .case-score .val { color: #F5F8FF; }
[data-theme="dark"] .case-score.after {
    background: linear-gradient(135deg, rgba(138,205,136,0.15), rgba(77,208,225,0.1));
    border-color: rgba(138,205,136,0.3);
    box-shadow: 0 0 20px rgba(138,205,136,0.1);
}
[data-theme="dark"] .case-score.after .val { color: #9EE09C; }
[data-theme="dark"] .case-arrow { color: #8ACD88; }
[data-theme="dark"] .case-quote { color: rgba(232,236,244,0.75); font-size: 16px; line-height: 1.7; }

/* === Testimonials premium === */
[data-theme="dark"] .testis-pro {
    background:
        radial-gradient(ellipse at center, rgba(23,54,93,0.15), transparent 60%),
        #0A0E1A;
}

[data-theme="dark"] .testi-pro {
    background: linear-gradient(145deg, rgba(30,40,65,0.85) 0%, rgba(20,28,48,0.95) 100%);
    border: 1px solid rgba(77,208,225,0.15);
    backdrop-filter: blur(10px);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.3),
        0 0 0 1px rgba(77,208,225,0.05);
}
[data-theme="dark"] .testi-pro:hover {
    border-color: rgba(77,208,225,0.4);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(77,208,225,0.15);
}
[data-theme="dark"] .testi-pro::before { color: rgba(77,208,225,0.15); font-size: 120px; }
[data-theme="dark"] .testi-pro-quote { color: #F5F8FF; font-size: 17px; line-height: 1.6; }
[data-theme="dark"] .testi-pro-user { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .testi-pro-name { color: #F5F8FF; }
[data-theme="dark"] .testi-pro-role { color: rgba(232,236,244,0.55); }
[data-theme="dark"] .testi-pro .stars { color: #F4D06F; }

/* === Countries strip === */
[data-theme="dark"] .countries-strip {
    background: #0A0E1A;
    border-color: rgba(77,208,225,0.1);
}
[data-theme="dark"] .countries-strip h3 { color: rgba(232,236,244,0.75); }

[data-theme="dark"] .country-chip {
    background: linear-gradient(145deg, rgba(30,40,65,0.85), rgba(20,28,48,0.95));
    border: 1px solid rgba(77,208,225,0.2);
    color: #E8ECF4;
    font-weight: 600;
    transition: all 300ms;
}
[data-theme="dark"] .country-chip:hover {
    border-color: #4DD0E1;
    background: linear-gradient(145deg, rgba(77,208,225,0.15), rgba(23,54,93,0.6));
    color: #4DD0E1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77,208,225,0.2);
}

/* === Pricing premium === */
[data-theme="dark"] .pricing-v2-section {
    background:
        radial-gradient(ellipse at top, rgba(23,54,93,0.3), transparent 55%),
        radial-gradient(ellipse at bottom, rgba(77,208,225,0.1), transparent 60%),
        #0A0E1A;
}

[data-theme="dark"] .pricing-v2-card {
    background: linear-gradient(145deg, rgba(30,40,65,0.8), rgba(20,28,48,0.9));
    border: 1px solid rgba(77,208,225,0.15);
    backdrop-filter: blur(10px);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.3),
        0 0 0 1px rgba(77,208,225,0.05);
}
[data-theme="dark"] .pricing-v2-card:hover {
    transform: translateY(-8px);
    border-color: rgba(77,208,225,0.4);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(77,208,225,0.2);
}
[data-theme="dark"] .pricing-v2-card.featured {
    background: linear-gradient(180deg, rgba(77,208,225,0.15) 0%, rgba(74,144,226,0.08) 50%, rgba(30,40,65,0.9) 100%);
    border: 2px solid #4DD0E1;
    box-shadow:
        0 0 0 1px #4DD0E1,
        0 20px 60px rgba(77,208,225,0.25),
        0 0 80px rgba(77,208,225,0.15);
}
[data-theme="dark"] .pricing-v2-name { color: #F5F8FF; }
[data-theme="dark"] .pricing-v2-desc { color: rgba(232,236,244,0.6); }
[data-theme="dark"] .pricing-v2-amount { color: #F5F8FF; }
[data-theme="dark"] .pricing-v2-currency, [data-theme="dark"] .pricing-v2-period { color: rgba(232,236,244,0.6); }
[data-theme="dark"] .pricing-v2-features li { color: rgba(232,236,244,0.8); }
[data-theme="dark"] .pricing-v2-features li.disabled { color: rgba(232,236,244,0.25); }
[data-theme="dark"] .pricing-v2-features li.disabled i { color: rgba(255,255,255,0.15); }

/* === Toggle pricing === */
[data-theme="dark"] .pricing-toggle-v2 { color: rgba(232,236,244,0.85); }
[data-theme="dark"] .pricing-toggle-slider {
    background: rgba(40,50,75,0.8);
    border: 1px solid rgba(77,208,225,0.2);
}
[data-theme="dark"] .pricing-toggle-switch input:checked + .pricing-toggle-slider { background: #4DD0E1; }

/* === Guarantee banner más premium === */
.guarantee-banner {
    background: linear-gradient(135deg, #0F7A56 0%, #16A0A0 50%, #4DD0E1 100%);
}
[data-theme="dark"] .guarantee-banner {
    background: linear-gradient(135deg, #0A5E4A 0%, #117B85 50%, #2DA4B5 100%);
    position: relative;
}
[data-theme="dark"] .guarantee-banner::before {
    background:
        radial-gradient(ellipse at top, rgba(255,255,255,0.1), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(244,208,111,0.25), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(138,205,136,0.2), transparent 55%);
}

/* === Mobile preview === */
[data-theme="dark"] .mobile-preview-section {
    background:
        radial-gradient(ellipse at 80% 30%, rgba(23,54,93,0.2), transparent 55%),
        #0A0E1A;
}
[data-theme="dark"] .mini-phone {
    background: linear-gradient(145deg, #1a1d2e, #0d0f1a);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.6),
        0 0 30px rgba(77,208,225,0.15);
}
[data-theme="dark"] .qr-code-box {
    background: linear-gradient(145deg, rgba(30,40,65,0.95), rgba(20,28,48,0.95));
    border: 1px solid rgba(77,208,225,0.2);
}

/* === FAQ premium === */
[data-theme="dark"] .faq-section-v2 {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(23,54,93,0.15), transparent 60%),
        #0A0E1A;
}
[data-theme="dark"] .faq-grid {
    background: rgba(20,28,48,0.5);
    border: 1px solid rgba(77,208,225,0.1);
    backdrop-filter: blur(10px);
}
[data-theme="dark"] .faq-item-v2 {
    background: linear-gradient(145deg, rgba(30,40,65,0.7), rgba(20,28,48,0.8));
    border: 1px solid rgba(255,255,255,0.05);
}
[data-theme="dark"] .faq-item-v2.open {
    background: linear-gradient(145deg, rgba(77,208,225,0.08), rgba(30,40,65,0.85));
    border-color: rgba(77,208,225,0.3);
    box-shadow: 0 4px 20px rgba(77,208,225,0.15);
}
[data-theme="dark"] .faq-q { color: #F5F8FF; }
[data-theme="dark"] .faq-a { color: rgba(232,236,244,0.7); line-height: 1.7; }
[data-theme="dark"] .faq-q-icon { background: rgba(77,208,225,0.15); color: #4DD0E1; }
[data-theme="dark"] .faq-item-v2.open .faq-q-icon { background: #4DD0E1; color: #0A0E1A; }

/* === CTA mega más épico === */
[data-theme="dark"] .cta-mega {
    padding: 180px 24px;
    background:
        radial-gradient(ellipse 1000px 600px at 10% 20%, rgba(77,208,225,0.4), transparent 50%),
        radial-gradient(ellipse 900px 500px at 90% 30%, rgba(138,205,136,0.25), transparent 55%),
        radial-gradient(ellipse 800px 500px at 50% 90%, rgba(244,208,111,0.2), transparent 55%),
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(74,144,226,0.3), transparent 55%),
        linear-gradient(180deg, #0F2447 0%, #0A0E1A 100%);
}

[data-theme="dark"] .countdown-cell {
    background: rgba(30,40,65,0.7);
    border: 1px solid rgba(77,208,225,0.25);
    box-shadow:
        0 8px 24px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
}

/* Animación gentle de partículas flotantes decorativas */
.hero-mockup-stack::before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle, #F4D06F, transparent);
    border-radius: 50%;
    top: 15%; left: -25px;
    animation: particleFloat 8s ease-in-out infinite;
    pointer-events: none;
}
.hero-mockup-stack::after {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: radial-gradient(circle, #8ACD88, transparent);
    border-radius: 50%;
    bottom: 25%; right: -10px;
    animation: particleFloat 6s ease-in-out infinite reverse;
    pointer-events: none;
}
@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50%      { transform: translate(20px, -20px) scale(1.5); opacity: 1; }
}

/* Anti-flickers de text fill */
.hero-mega-title { text-rendering: optimizeLegibility; }

/* ============================================================================
   BACK TO TOP — botón flotante elegante
   ============================================================================ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 997;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(77,208,225,0.3);
    background: linear-gradient(145deg, rgba(30,40,65,0.9), rgba(15,21,40,0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #4DD0E1;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 20px;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        0 0 20px rgba(77,208,225,0.15),
        inset 0 1px 0 rgba(255,255,255,0.1);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition:
        opacity 400ms var(--ease-ios),
        transform 400ms var(--ease-spring),
        box-shadow 300ms,
        border-color 300ms,
        background 300ms;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.back-to-top:hover {
    border-color: rgba(77,208,225,0.6);
    background: linear-gradient(145deg, rgba(40,55,90,0.95), rgba(20,28,48,0.98));
    color: #6BDDEA;
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.4),
        0 0 30px rgba(77,208,225,0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.back-to-top:active {
    transform: translateY(-2px) scale(0.98);
}

.back-to-top i {
    transition: transform 300ms var(--ease-spring);
}
.back-to-top:hover i {
    transform: translateY(-3px);
}

/* Anillo progresivo alrededor (progreso de scroll) */
.back-to-top::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #4DD0E1 0%,
        #4DD0E1 calc(var(--scroll-progress, 0%) * 1%),
        transparent calc(var(--scroll-progress, 0%) * 1%)
    );
    mask: radial-gradient(circle, transparent 56%, black 58%, black 62%, transparent 64%);
    -webkit-mask: radial-gradient(circle, transparent 56%, black 58%, black 62%, transparent 64%);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 300ms;
}
.back-to-top:hover::before { opacity: 1; }

/* Responsive */
@media (max-width: 640px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px; height: 44px;
        font-size: 18px;
    }
}

/* Evitar colisión con el online-widget cuando widget está oculto */
.online-widget.visible ~ .back-to-top,
.back-to-top {
    /* el back-to-top está a la derecha, online-widget a la izquierda — no colisionan */
}

/* ============================================================================
   USERS ONLINE WIDGET — trust signal flotante
   ============================================================================ */
.online-widget {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 998;
    background: linear-gradient(145deg, rgba(15,21,40,0.95), rgba(10,14,26,0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(94,229,137,0.3);
    border-radius: 999px;
    padding: 10px 18px 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #F5F8FF;
    font-size: 13px;
    font-weight: 500;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4),
        0 0 20px rgba(94,229,137,0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 500ms var(--ease-spring);
    cursor: default;
    user-select: none;
}
.online-widget.visible { opacity: 1; transform: translateY(0); }

.online-widget-dot {
    position: relative;
    width: 10px; height: 10px;
    background: #5EE589;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(94,229,137,0.6);
}
.online-widget-dot::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #5EE589;
    animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}

.online-widget-count {
    font-weight: 700;
    color: #5EE589;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: transform 300ms;
}
.online-widget-count.bump { transform: scale(1.08); }

.online-widget-label {
    color: rgba(245,248,255,0.75);
    font-weight: 500;
}

.online-widget-close {
    background: none;
    border: none;
    color: rgba(245,248,255,0.4);
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    font-size: 14px;
    transition: color 200ms;
    line-height: 1;
}
.online-widget-close:hover { color: rgba(245,248,255,0.9); }

@media (max-width: 640px) {
    .online-widget {
        bottom: 16px; left: 16px;
        font-size: 12px;
        padding: 8px 14px 8px 12px;
    }
    .online-widget-label { display: none; }
    .online-widget-count::after { content: ' online'; color: rgba(245,248,255,0.65); font-weight: 500; }
}

/* ============ INDICADOR ONLINE EN HERO ============ */
.hero-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(94,229,137,0.1);
    border: 1px solid rgba(94,229,137,0.25);
    border-radius: 999px;
    font-size: 12.5px;
    color: #5EE589;
    font-weight: 600;
}
.hero-online-pill::before {
    content: '';
    width: 6px; height: 6px;
    background: #5EE589;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(94,229,137,0.8);
    animation: onlinePulseDot 2s infinite;
}
@keyframes onlinePulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}
.hero-online-pill strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}