/* ============================================================
   mikescobar.com — TEMA CLARO (LIGHT)
   ------------------------------------------------------------
   Archivo INDEPENDIENTE. No modifica style.css ni afecta a
   ninguna página existente. Se carga DESPUÉS de style.css y
   todo va namespaced bajo `body.lp` para reutilizar el mismo
   HTML/JS del tema oscuro cambiando solo la estética.

   Se apoya en los tokens que style.css ya define para .lp:
     --ink #0A0A0B · --muted #5B6472 · --line #E8ECF2
     --surface #F5F8FC · --brand #0B82C4 · --accent #77E7FF
   ============================================================ */

/* ---- Selección de texto ---- */
body.lp ::selection { background: var(--accent); color: #0A0A0B; }

/* ---- Efecto scramble de titulares: el cian no contrasta sobre blanco ---- */
.lp .scramble-c { color: var(--brand); opacity: 0.55; }

/* ============================================================
   LOADER
   ============================================================ */
body.lp #loader { background: #ffffff; }
.lp .loader-num      { color: var(--brand); }
.lp .loader-num .pct { color: var(--accent); }
.lp .loader-label    { color: #9AA6B4; }

/* ============================================================
   NAV
   ============================================================ */
/* El hero de esta página lleva vídeo detrás del nav (a diferencia de
   web-para-autonomos.html, que arranca sobre fondo claro liso), así
   que aquí el nav lleva SIEMPRE una barra con transparencia + blur
   —una versión más sutil de la que ya aparece al hacer scroll—
   para que logo y enlaces no se peleen con el vídeo. Solo afecta a
   esta página: web-para-autonomos.html no carga light.css. */
.lp #main-nav {
    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.lp #main-nav .nav-link { color: var(--muted); }
.lp #main-nav .nav-link:hover { color: var(--brand); }
.lp #main-nav .logo-img { filter: none; }
.lp #main-nav .nav-cta {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 10px 24px -18px rgba(15,30,60,0.5);
    transition: background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.lp #main-nav .nav-cta:hover {
    background: var(--accent); border-color: var(--accent); color: #0A0A0B;
    box-shadow: 0 16px 34px -14px rgba(119,231,255,0.9);
}

/* ============================================================
   REEL DE SERVICIOS (hero) — versión clara
   ============================================================ */
.lp .reel { background: #ffffff; }
.lp .reel-video-bg video { opacity: 0.85; filter: saturate(0.75) contrast(1) brightness(1.04); }
/* Un único velo (el vídeo ya no lleva la segunda capa .reel-bg::after,
   que el tema oscuro también desactiva a propósito por redundante):
   casi transparente arriba para que se vea el vídeo, y solo se cierra
   abajo, donde vive el bloque de texto (título/desc/stats), para
   mantener el contraste ahí. */
.lp .reel-video-overlay {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.18) 35%,
        rgba(255,255,255,0.55) 62%,
        rgba(255,255,255,0.92) 100%
    );
}
/* La capa .reel-bg::after queda igual que en el tema oscuro: oculta.
   El vídeo ya trae su propio overlay (arriba); duplicarla lava el vídeo dos veces. */
.lp .reel-grain::after { opacity: 0.035; mix-blend-mode: multiply; }

/* El velo aquí arriba es casi transparente para dejar ver el vídeo
   (igual que el nav): mismo recurso de píldora con blur, en vez de
   una sombra de texto que no basta sobre un vídeo con tanto detalle. */
.lp .reel-section-tag {
    color: var(--muted);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
    padding: 0.5rem 0.9rem 0.5rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px -16px rgba(15,30,60,0.4);
}
.lp .reel-section-tag::before { background: var(--brand); }
.lp .reel-section-tag .dot { background: var(--brand); }

.lp .reel-num {
    color: transparent;
    -webkit-text-stroke: 1px rgba(11,130,196,0.16);
    mix-blend-mode: normal;
}
.lp .reel-title { color: var(--ink); }
.lp .reel-desc  { color: var(--muted); }

.lp .reel-tag {
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--line);
    color: var(--muted);
    box-shadow: 0 8px 20px -16px rgba(15,30,60,0.5);
}
.lp .reel-tag.tag-accent { background: var(--accent); border-color: var(--accent); color: #0A0A0B; }

.lp .reel-stat-v { color: var(--brand); }
.lp .reel-stat-l { color: #94A0B0; }

.lp .reel-ui { color: var(--muted); }
.lp .reel-counter { color: var(--ink); }
.lp .reel-counter .reel-curr  { color: var(--brand); }
.lp .reel-counter .reel-total { color: #A6B1BF; }
.lp .reel-btn {
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.85);
    color: var(--ink);
    box-shadow: 0 14px 30px -20px rgba(15,30,60,0.55);
}
.lp .reel-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.lp .reel-progress { background: rgba(10,10,11,0.06); }
.lp .reel-progress-bar { background: linear-gradient(90deg, var(--brand), var(--accent)); }

/* Palabra gigante de fondo de cada slide */
.lp .reel-word {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: rgba(11,130,196,0.06);
    font-size: clamp(4rem, 12vw, 14rem);
}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.lp .surface-band {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ---- Caso de estudio ---- */
.lp .case-visual {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: 0 50px 90px -55px rgba(15,30,60,0.55);
}
.lp .case-dot { background: #D8E0EA; }
.lp .case-dot.active { background: var(--brand); }

/* ---- Tarjetas de proyecto ---- */
.lp .proj-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: transform .5s cubic-bezier(0.19,1,0.22,1), box-shadow .5s, border-color .5s;
}
.lp .proj-card:hover {
    transform: translateY(-6px);
    border-color: rgba(119,231,255,0.75);
    box-shadow: 0 34px 64px -40px rgba(15,30,60,0.4);
}
.lp .proj-card img { transition: transform 1s cubic-bezier(0.19,1,0.22,1); }
.lp .proj-card:hover img { transform: scale(1.05); }

.lp .chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.3rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.lp .chip-accent { background: #EAF9FF; border-color: #C9EEFA; color: var(--brand); }

/* ---- Tarjetas de servicio ---- */
.lp .svc-card {
    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: 1.4rem;
}
.lp .svc-card::before {
    background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(119,231,255,0.20), transparent 42%);
}
.lp .svc-card:hover {
    border-color: rgba(119,231,255,0.8) !important;
    box-shadow: 0 34px 70px -46px rgba(15,30,60,0.42);
}

/* ---- Proceso ---- */
.lp .process-step { background: #fff; border: 1px solid var(--line); border-radius: 1.2rem; }
.lp .step-num { -webkit-text-stroke: 1px #D8E0EA; }
.lp .process-step:hover .step-num,
.lp .process-step.in-view .step-num {
    color: var(--brand);
    -webkit-text-stroke-color: var(--brand);
}

/* ---- Testimonios ---- */
.lp .quote-card {
    background: #fff; border: 1px solid var(--line); border-radius: 1.4rem;
    transition: transform .5s cubic-bezier(0.19,1,0.22,1), box-shadow .5s, border-color .5s;
}
.lp .quote-card:hover {
    transform: translateY(-5px);
    border-color: rgba(119,231,255,0.7);
    box-shadow: 0 34px 64px -44px rgba(15,30,60,0.38);
}
/* Comilla decorativa: el cian puro se pierde sobre blanco, se baja de tono */
.lp .quote-mark { color: #9DDDF2; opacity: 1; }
.lp .avatar { background: #EAF9FF; border: 1px solid #C9EEFA; color: var(--brand); }

/* ---- Stats / celdas de datos ---- */
.lp .stat-cell { background: #fff; border: 1px solid var(--line); }
.lp .stat-v { color: var(--brand); }
.lp .stat-l { color: #94A0B0; }

/* ---- Toolkit ---- */
.lp .tool-cell {
    background: #fff; border: 1px solid var(--line);
    transition: background .4s, border-color .4s;
}
.lp .tool-cell:hover { background: var(--surface); border-color: rgba(119,231,255,0.7); }

/* ---- Chips de skills ---- */
.lp .skill-chip {
    border: 1px solid var(--line); color: var(--muted); background: #fff;
    transition: border-color .35s, color .35s, background .35s;
}
.lp .skill-chip:hover { border-color: rgba(119,231,255,0.9); color: var(--ink); background: #F4FCFF; }

/* ---- Foto de perfil ---- */
.lp .about-photo { border: 1px solid var(--line); background: var(--surface); }
.lp .about-badge {
    background: var(--accent); color: #0A0A0B;
    box-shadow: 0 22px 44px -22px rgba(119,231,255,1);
}

/* ---- Marquee ---- */
.lp .marquee-band {
    background: var(--accent);
    color: #0A0A0B;
    border-top: 2px solid #0A0A0B;
    border-bottom: 2px solid #0A0A0B;
}
.lp .marquee-clients { color: rgba(10,10,11,0.26); transition: color .5s; }
.lp .marquee-clients:hover { color: rgba(10,10,11,0.55); }

/* ============================================================
   CONTACTO
   ============================================================ */
.lp .contact-shell {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2rem;
}
.lp .contact-glow { background: rgba(119,231,255,0.5); }

.lp .field input,
.lp .field textarea {
    color: var(--ink);
    border-bottom: 1.5px solid #AEB8C6;
    background: transparent;
    transition: border-color .3s, box-shadow .3s;
}
.lp .field input:hover,
.lp .field textarea:hover { border-bottom-color: #7C8899; }
.lp .field input:focus,
.lp .field textarea:focus { border-bottom-color: var(--brand); box-shadow: 0 1px 0 var(--brand); outline: none; }
.lp .field label { color: #94A0B0; }
.lp .field input:focus ~ label,
.lp .field textarea:focus ~ label { color: var(--brand); }

.lp .pill-check {
    border: 1px solid #C3CCD8; background: #fff; color: var(--muted);
    transition: background .3s, color .3s, border-color .3s;
}
.lp .peer:not(:checked) ~ .pill-check:hover { border-color: #7C8899; color: var(--ink); }
.lp .peer:checked ~ .pill-check {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.lp .social-pill {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    transition: background .35s, color .35s, border-color .35s;
}
.lp .social-pill:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.lp .state-ok  { border: 1px solid #BFE9CF; background: #F1FBF5; }
.lp .state-err { border: 1px solid #F3C9C9; background: #FDF3F3; }

/* ---- Footer legal ---- */
.lp .foot-legal { color: #94A0B0; border-top: 1px solid var(--line); }
.lp .foot-legal a:hover { color: var(--brand); }

/* ---- Mega texto del footer ---- */
.lp .mega-text {
    background-image: linear-gradient(to bottom, rgba(10,10,11,0.15), rgba(10,10,11,0));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    .lp .reel-video-overlay {
        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.80) 0%,
            rgba(255,255,255,0.88) 45%,
            rgba(255,255,255,0.97) 100%
        );
    }
}