/* ═══════════════════════════════════════════════════════
   LANDING UPGRADES — archivo inyectado después de landing.css
   ═══════════════════════════════════════════════════════ */

/* ── Mouse-glow cursor ─────────────────────────────────── */
#cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0,255,136,.07) 0%, transparent 65%);
    transition: opacity .4s;
}

/* ── Scroll-reveal base ────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right { opacity:0; transform:translateX(40px);  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.revealed, .reveal-right.revealed { opacity:1; transform:translate(0); }
.reveal-d1  { transition-delay:.1s; }
.reveal-d2  { transition-delay:.2s; }
.reveal-d3  { transition-delay:.3s; }
.reveal-d4  { transition-delay:.4s; }
.reveal-d5  { transition-delay:.5s; }
.reveal-d6  { transition-delay:.6s; }

/* ── Sticky CTA bar ────────────────────────────────────── */
#sticky-cta {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(5,5,15,.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,255,136,.15);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(-100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 4px 30px rgba(0,0,0,.5);
}
#sticky-cta.visible { transform: translateY(0); }
#sticky-cta .sc-logo {
    font-size: .95rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--neon), #00bbff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#sticky-cta .sc-msg {
    font-size: .82rem;
    color: rgba(255,255,255,.5);
}
#sticky-cta a {
    padding: 8px 22px;
    background: linear-gradient(135deg, var(--neon), #00ccaa);
    color: #05050f;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
#sticky-cta a:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--neon-glow); }
@media (max-width:600px) { #sticky-cta .sc-msg { display:none; } }

/* ── Typewriter hero ───────────────────────────────────── */
#hero-type-word {
    display: inline-block;
    background: linear-gradient(135deg, var(--neon), #00bbff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 2ch;
}
.type-cursor {
    display: inline-block;
    width: 3px;
    height: .85em;
    background: var(--neon);
    margin-left: 3px;
    vertical-align: middle;
    border-radius: 2px;
    animation: blink .75s step-end infinite;
}
@keyframes blink { 50% { opacity:0; } }

/* ── Testimonios ───────────────────────────────────────── */
#testimonios {
    padding: 100px 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 60px;
}
.testi-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    transition: all .4s;
    backdrop-filter: blur(10px);
}
.testi-card::before {
    content: '"';
    position: absolute;
    top: 16px; left: 22px;
    font-size: 4rem;
    color: var(--neon);
    opacity: .18;
    line-height: 1;
    font-family: Georgia, serif;
}
.testi-card:hover {
    border-color: rgba(0,255,136,.25);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 30px var(--neon-dim);
}
.testi-text {
    color: rgba(233,240,255,.75);
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 20px;
    margin-top: 16px;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testi-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #05050f;
    flex-shrink: 0;
}
.testi-name { font-size: .88rem; font-weight: 700; color: #e9f0ff; }
.testi-role { font-size: .76rem; color: rgba(255,255,255,.4); }
.testi-stars {
    color: #fbbf24;
    font-size: .85rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* ── Dashboard preview bento ───────────────────────────── */
#dashboard-preview {
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.bento-wrap {
    position: relative;
    margin-top: 52px;
}
.bento-glow {
    position: absolute;
    inset: -60px;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,255,136,.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.bento-card {
    background: rgba(10,10,22,.85);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    padding: 24px;
    backdrop-filter: blur(10px);
    transition: all .4s;
    overflow: hidden;
    position: relative;
}
.bento-card:hover {
    border-color: rgba(0,255,136,.2);
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,255,136,.06);
    transform: translateY(-3px);
}
.bento-card.bento-wide { grid-column: span 2; }
.bento-card.bento-tall { grid-row: span 2; }
.bento-label {
    font-size: .65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    margin-bottom: 12px;
}
.bento-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: #e9f0ff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -1px;
}
.bento-value.accent { color: var(--neon); }
.bento-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 6px;
}
.bento-delta.up   { background: rgba(0,255,136,.1); color: var(--neon); }
.bento-delta.down { background: rgba(248,113,113,.1); color: #f87171; }
/* Mini bar chart */
.mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
    margin-top: 16px;
}
.mini-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: rgba(0,255,136,.15);
    transition: all .3s;
    position: relative;
}
.mini-bar.active { background: var(--neon); }
.mini-bar:hover { background: rgba(0,255,136,.45); }
/* Mini chat preview */
.bento-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.bento-msg {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .78rem;
    line-height: 1.4;
    max-width: 88%;
    animation: fadeSlideUp .5s ease;
}
.bento-msg.user {
    align-self: flex-end;
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.15);
    color: #c8ffe0;
    border-bottom-right-radius: 3px;
}
.bento-msg.bot {
    align-self: flex-start;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: #c4cdd8;
    border-bottom-left-radius: 3px;
}
/* Tag list */
.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.bento-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 700;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.08);
}
.bento-tag.g { background: rgba(0,255,136,.08); color: var(--neon); border-color: rgba(0,255,136,.15); }
.bento-tag.b { background: rgba(96,165,250,.08); color: #60a5fa; border-color: rgba(96,165,250,.15); }
.bento-tag.a { background: rgba(251,191,36,.08); color: #fbbf24; border-color: rgba(251,191,36,.15); }
/* Circle progress */
.bento-circle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.bento-circle {
    position: relative;
    width: 100px; height: 100px;
}
.bento-circle svg { transform: rotate(-90deg); }
.bento-circle-val {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 900;
    color: var(--neon);
}
.bento-circle-sub { font-size: .56rem; color: rgba(255,255,255,.4); font-weight: 600; }

@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr 1fr; }
    .bento-card.bento-wide { grid-column: span 2; }
    .bento-card.bento-tall { grid-row: span 1; }
}
@media (max-width: 480px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card.bento-wide { grid-column: span 1; }
}

/* ── Section separators ────────────────────────────────── */
.section-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,136,.12), transparent);
    max-width: 900px;
    margin: 0 auto;
}

/* ── Noise texture overlay ─────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: .02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ── Ambient light orbs ────────────────────────────────── */
.ambient-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    animation: orbDrift 20s ease-in-out infinite;
}
.orb-1 {
    width: 600px; height: 600px;
    top: -200px; right: -100px;
    background: radial-gradient(circle, rgba(0,100,255,.06), transparent 65%);
    animation-delay: 0s;
}
.orb-2 {
    width: 500px; height: 500px;
    bottom: 20%; left: -150px;
    background: radial-gradient(circle, rgba(0,255,136,.05), transparent 65%);
    animation-delay: -7s;
}
.orb-3 {
    width: 400px; height: 400px;
    bottom: -100px; right: 20%;
    background: radial-gradient(circle, rgba(120,80,255,.05), transparent 65%);
    animation-delay: -14s;
}
@keyframes orbDrift {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(30px,-40px) scale(1.05); }
    66%       { transform: translate(-20px,30px) scale(.95); }
}

/* ── Improved particles ────────────────────────────────── */
.particle {
    border-radius: 50%;
    background: var(--neon);
    opacity: 0;
    animation: particleDrift linear infinite;
}
@keyframes particleDrift {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: .4; }
    90%  { opacity: .2; }
    100% { transform: translateY(-100vh) scale(.5); opacity: 0; }
}

/* ── Step cards improved ───────────────────────────────── */
.step-card {
    transition: border-color .4s, transform .4s, box-shadow .4s;
}
.step-card:hover .step-icon { animation: iconBounce .5s ease; }
@keyframes iconBounce {
    0%,100% { transform: translateY(0); }
    40%      { transform: translateY(-8px); }
}

/* ── Plan card shimmer ─────────────────────────────────── */
.plan-card { overflow: hidden; }
.plan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.03) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.plan-card:hover::after { transform: translateX(100%); }

/* Badge visible dentro de overflow:hidden — extra padding arriba + badge dentro */
.plan-popular,
.plan-empresa {
    padding-top: 48px;
}
.plan-popular .plan-badge,
.plan-empresa .plan-badge {
    top: 16px;
}

/* Reemplazar scale(1.03) por translateY para que no invada la card de Básico */
.plan-popular {
    transform: translateY(-8px) !important;
}
.plan-popular:hover {
    transform: translateY(-14px) !important;
}

/* ── FAQ improved (click to open) ─────────────────────── */
.faq-item { cursor: pointer; }
.faq-item.open {
    background: rgba(0,255,136,.03);
    border-color: rgba(0,255,136,.2);
}
.faq-item.open .faq-answer {
    max-height: 300px;
    opacity: 1;
    margin-top: 16px;
}
.faq-item.open .faq-arrow {
    color: #05050f;
    background: var(--neon);
    transform: rotate(180deg);
}
.faq-item.open::before { transform: scaleY(1); }

/* ── Hero highlight band ───────────────────────────────── */
.hero-highlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,255,136,.06);
    border: 1px solid rgba(0,255,136,.15);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .8rem;
    color: var(--neon);
    font-weight: 700;
    margin-top: 20px;
    opacity: .8;
}