/* ═══════════════════════════════════════════════════════
   LANDING PAGE — Clipper Studio (P2-J10)
   Paleta idéntica a login.html para coherencia de marca
   ═══════════════════════════════════════════════════════ */

:root {
    --bg-base: #09090b;
    --bg-surface: #111113;
    --bg-card: #18181b;
    --border: rgba(255,255,255,.08);
    --border-accent: rgba(234,88,12,.42);
    --text-primary: #f4f4f5;
    --text-secondary: #b4b7c2;
    --text-muted: #6e7485;
    --accent: #EA580C;
    --accent-hover: #C2410C;
    --accent-light: #FB923C;
    --accent-glow: rgba(234,88,12,.3);
    /* Chispa — tokens de marca (P2-P1) */
    --chispa-primary: #EA580C;
    --chispa-primary-hover: #C2410C;
    --chispa-accent: #F59E0B;
    --chispa-accent-hover: #D97706;
    --chispa-bg: #0D0D0D;
    --chispa-primary-dim: rgba(234,88,12,.14);
    --chispa-primary-glow: rgba(234,88,12,.32);
    --chispa-gradient: linear-gradient(135deg,#EA580C 0%,#F59E0B 100%);
    --success: #22c55e;
    --radius: 14px;
    --radius-sm: 8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg-base);
    color:var(--text-primary);
    line-height:1.6;
    min-height:100vh;
}

a{color:var(--accent-light);text-decoration:none}
a:hover{text-decoration:underline}

/* ── NAVEGACIÓN ─────────────────────────────────────── */
nav{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 5vw;
    background:rgba(9,9,11,.88);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
}
.nav-logo{
    display:flex;align-items:center;gap:10px;
    font-size:1.1rem;font-weight:700;color:var(--text-primary);
}
.nav-logo span{font-size:1.5rem}
.nav-links{display:flex;align-items:center;gap:20px}
.btn-nav-ghost{
    padding:8px 16px;border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:transparent;color:var(--text-secondary);
    cursor:pointer;font-size:.9rem;transition:.2s;
}
.btn-nav-ghost:hover{border-color:var(--border-accent);color:var(--text-primary)}
.btn-nav-primary{
    padding:8px 20px;border-radius:var(--radius-sm);
    background:var(--accent);color:#fff;
    border:none;cursor:pointer;font-size:.9rem;font-weight:600;
    transition:.2s;
}
.btn-nav-primary:hover{background:var(--accent-hover);box-shadow:0 0 0 3px var(--accent-glow)}

/* ── HERO ───────────────────────────────────────────── */
.hero{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:100px 5vw 80px;
    background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(234,88,12,.18) 0%,transparent 70%);
}
.hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 14px;border-radius:20px;
    border:1px solid var(--border-accent);
    color:var(--accent-light);font-size:.82rem;margin-bottom:24px;
}
.hero h1{
    font-size:clamp(2.2rem,6vw,4rem);
    font-weight:900;line-height:1.1;
    max-width:760px;margin-bottom:20px;
    background:linear-gradient(135deg,#fff 40%,var(--accent-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p.hero-sub{
    font-size:1.15rem;color:var(--text-secondary);
    max-width:520px;margin-bottom:36px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-primary{
    padding:14px 28px;border-radius:var(--radius-sm);
    background:var(--accent);color:#fff;
    border:none;cursor:pointer;font-size:1rem;font-weight:700;
    transition:.2s;
}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 0 4px var(--accent-glow)}
.btn-secondary{
    padding:14px 28px;border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:transparent;color:var(--text-primary);
    cursor:pointer;font-size:1rem;transition:.2s;
}
.btn-secondary:hover{border-color:var(--border-accent);background:rgba(234,88,12,.06)}

/* ── CARRUSEL HORIZONTAL DE ESTADÍSTICAS ────────────── */
.stats-carousel-section{
    padding:48px 5vw;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.stats-scroll-container{
    max-width:1200px;margin:0 auto;
    overflow-x:auto;overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
.stats-scroll-container::-webkit-scrollbar{height:4px}
.stats-scroll-container::-webkit-scrollbar-track{background:transparent}
.stats-scroll-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.stats-scroll{
    display:flex;gap:16px;padding:0;
    min-width:min-content;scroll-snap-type:x mandatory;
}
.stat-card{
    flex:0 0 240px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-sm);padding:24px 20px;
    text-align:center;scroll-snap-align:start;
    transition:.2s;
}
.stat-card:hover{border-color:var(--border-accent);box-shadow:0 0 0 1px var(--border-accent)}
.stat-card-inner{display:flex;flex-direction:column;gap:12px}
.metric-val{font-size:2rem;font-weight:900;color:var(--text-primary);letter-spacing:-.02em}
.metric-val .unit{font-size:1rem;font-weight:600;color:var(--accent-light)}
.metric-label{font-size:.75rem;color:var(--text-muted);line-height:1.4;margin:0}
.metric-live{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:.7rem;color:var(--success)}
.metric-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* ── CÓMO FUNCIONA ──────────────────────────────────── */
.section{padding:80px 5vw;max-width:1100px;margin:0 auto}
.section-label{font-size:.8rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.section-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;margin-bottom:14px}
.section-sub{font-size:1rem;color:var(--text-secondary);max-width:540px;margin-bottom:48px}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:32px 28px;
    transition:.25s;
}
.step-card:hover{border-color:var(--border-accent);box-shadow:0 0 0 1px var(--border-accent)}
.step-num{
    width:44px;height:44px;border-radius:50%;
    background:rgba(234,88,12,.15);border:1px solid var(--border-accent);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;font-weight:800;color:var(--accent-light);
    margin-bottom:20px;
}
.step-card h3{font-size:1.1rem;font-weight:700;margin-bottom:10px}
.step-card p{font-size:.93rem;color:var(--text-secondary)}

/* ── CASOS DE USO ───────────────────────────────────── */
.cases-section{padding:80px 5vw;background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cases-inner{max-width:1100px;margin:0 auto}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.case-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);overflow:hidden;
}
.case-thumb{
    width:100%;aspect-ratio:16/9;background:var(--bg-surface);
    display:flex;align-items:center;justify-content:center;
    font-size:3rem;border-bottom:1px solid var(--border);
}
.case-body{padding:20px}
.case-tag{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.case-title{font-size:1rem;font-weight:700;margin-bottom:8px}
.case-desc{font-size:.88rem;color:var(--text-secondary)}

/* ── PRECIOS ────────────────────────────────────────── */
.pricing-section{padding:80px 5vw;max-width:1100px;margin:0 auto;text-align:center}
.pricing-toggle{display:inline-flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;gap:4px;margin-bottom:48px}
.pricing-toggle button{
    padding:8px 20px;border-radius:6px;border:none;
    background:transparent;color:var(--text-secondary);
    cursor:pointer;font-size:.88rem;transition:.2s;
}
.pricing-toggle button.active{background:var(--accent);color:#fff;font-weight:600}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
@media(max-width:1100px){.plans-grid{grid-template-columns:repeat(2,1fr)}}
.plan-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:28px 22px;
    display:flex;flex-direction:column;gap:16px;
    transition:.2s;
}
.plan-card.popular{
    border-color:var(--border-accent);
    box-shadow:0 0 0 1px var(--border-accent),0 8px 32px rgba(234,88,12,.18);
}
.plan-badge{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
.plan-name{font-size:1.2rem;font-weight:800}
.plan-price{font-size:2rem;font-weight:900}
.plan-price span{font-size:.9rem;font-weight:400;color:var(--text-muted)}
.plan-desc{font-size:.85rem;color:var(--text-secondary)}
.plan-features{list-style:none;font-size:.88rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:8px;flex:1}
.plan-features li::before{content:'✓ ';color:var(--success);font-weight:700}
.plan-features li.plan-feature-sub{margin-top:-4px;font-size:0.82rem;color:var(--text-muted,#a1a1aa);padding-left:16px;border-left:2px solid var(--accent,#EA580C)}
.plan-features li.plan-feature-sub::before{content:''}
.plan-cta{
    padding:11px 0;border-radius:var(--radius-sm);
    text-align:center;font-weight:700;font-size:.95rem;
    cursor:pointer;transition:.2s;border:none;
}
.plan-cta-ghost{background:transparent;border:1px solid var(--border);color:var(--text-primary)}
.plan-cta-ghost:hover{border-color:var(--border-accent)}
.plan-cta-primary{background:var(--accent);color:#fff}
.plan-cta-primary:hover{background:var(--accent-hover)}
.plan-cta{width:100%;display:block}
.plan-card a{display:block}

/* P2-J14: badge tier-específico arriba de cada card de plan + celdas tabla.
   El SVG (28-32px) viene inyectado por _renderTierBadge desde tier_badges.js;
   el wrapper sólo le da centrado y aire respecto al `<div class="plan-name">`. */
.plan-card-badge{
    display:flex;align-items:center;justify-content:center;
    width:100%;margin-bottom:6px;line-height:0;
}
.plan-card-badge svg{display:block}
.compare-table th .plan-card-badge{display:inline-flex;margin:0 auto 4px}
.compare-table th .plan-card-badge svg{width:28px;height:28px}

/* P2-J14: CTA downgrade — visualmente atenuado para no competir con el upgrade
   primario (#EA580C). Se aplica vía clase en spRenderGrid; los estilos inline
   refuerzan en navegadores donde la clase no llegue (ej. carga parcial). */
.plan-cta-downgrade{
    background:transparent;
    border:1px solid rgba(255,255,255,.08);
    color:var(--text-muted, #b4b7c2);
    opacity:.85;
}
.plan-cta-downgrade:hover{opacity:1;border-color:rgba(255,255,255,.16)}

/* ── VIDEO PROMOCIONAL ─────────────────────────────── */
.video-showcase{text-align:center}
.video-player-container{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);overflow:hidden;
    max-width:900px;margin:48px auto 0;
}
.video-player{
    width:100%;background:#000;
    aspect-ratio:16/9;
}
.video-player video{width:100%;height:100%;display:block}
.video-controls{
    padding:16px 20px;background:var(--bg-surface);
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--border);
}
.video-btn{
    padding:8px 16px;border-radius:6px;
    background:transparent;border:1px solid var(--border);
    color:var(--text-secondary);cursor:pointer;
    font-size:.82rem;font-weight:600;transition:.2s;
}
.video-btn:hover{
    border-color:var(--border-accent);
    color:var(--text-primary);
    background:rgba(234,88,12,.08);
}
.video-chapters{display:flex;gap:8px;flex-wrap:wrap}
.chapter-marker{
    padding:6px 14px;border-radius:6px;
    background:transparent;border:1px solid var(--border);
    color:var(--text-secondary);cursor:pointer;
    font-size:.75rem;font-weight:500;transition:.2s;
}
.chapter-marker:hover,
.chapter-marker.active{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(234,88,12,.1);
}

/* ── CASOS CON CAROUSEL ─────────────────────────────── */
.cases-carousel-container{position:relative}
.cases-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;margin-top:48px;
}
.carousel-nav{
    display:flex;justify-content:center;gap:16px;
    margin-top:32px;
}
.carousel-btn{
    width:44px;height:44px;border-radius:50%;
    background:var(--bg-card);border:1px solid var(--border);
    color:var(--text-primary);cursor:pointer;
    font-size:1.2rem;font-weight:400;
    display:flex;align-items:center;justify-content:center;
    transition:.2s;
}
.carousel-btn:hover{
    border-color:var(--border-accent);
    background:rgba(234,88,12,.08);
    color:var(--accent);
}

/* ── PRICING STUDIO FOOTER ──────────────────────────── */
.pricing-studio-footer{
    display:flex;align-items:center;justify-content:center;
    gap:8px;padding:20px;margin-top:32px;
    background:rgba(234,88,12,.06);border:1px solid var(--border-accent);
    border-radius:var(--radius-sm);
    font-size:.88rem;text-align:center;flex-wrap:wrap;
}
.pricing-studio-footer strong{color:var(--accent)}
.pricing-studio-footer a{
    color:var(--accent);font-weight:600;
    border-bottom:1px solid var(--accent);
    transition:.2s;
}
.pricing-studio-footer a:hover{
    color:var(--accent-hover);
    border-bottom-color:var(--accent-hover);
}

/* ── CTA FINAL ──────────────────────────────────────── */
.cta-final{
    padding:100px 5vw;text-align:center;
    background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(234,88,12,.15) 0%,transparent 70%);
    border-top:1px solid var(--border);
}
.cta-final h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:16px}
.cta-final p{font-size:1rem;color:var(--text-secondary);margin-bottom:32px}
.cta-note{font-size:.82rem;color:var(--text-muted);margin-top:14px}

/* ── FOOTER ─────────────────────────────────────────── */
footer{
    padding:36px 5vw;
    border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:16px;
}
.footer-brand{font-size:.9rem;color:var(--text-muted)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:.85rem;color:var(--text-muted)}
.footer-links a:hover{color:var(--text-secondary);text-decoration:none}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px){
    .steps-grid,.plans-grid{grid-template-columns:1fr}
    .cases-grid{grid-template-columns:repeat(2,1fr)}
    .metrics-bar{flex-direction:column;align-items:center;gap:32px}
    .metric-item+.metric-item{border-left:none;border-top:1px solid var(--border);padding-top:32px}
    .nav-links .btn-nav-ghost{display:none}
}
@media(max-width:600px){
    .hero{padding:72px 5vw 60px}
    .hero h1{font-size:2rem}
    .section,.pricing-section{padding:56px 5vw}
}