/* ZATO Autopilot Bot — CSS externalizado desde index.html
 * Externalizado 2026-04-19 por BILL (perf SEO)
 * Contiene: animaciones fade-in, backgrounds circuit, hover states,
 * scrollbar personalizado, mobile menu, nav scroll.
 */

* { font-family: 'Inter', sans-serif; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body { overflow-x: hidden; width: 100%; position: relative; }

/* fade-in: animacion CSS-only auto-ejecutada al cargar.
   Sin dependencia de IntersectionObserver. */
.fade-in {
    opacity: 1;
    transform: translateY(0);
    animation: zatoFadeIn 0.7s ease-out both;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
@keyframes zatoFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

.circuit-bg {
    position: relative;
    overflow: hidden;
}
.circuit-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,212,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,212,255,0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0,212,255,0.04) 0%, transparent 70%);
    z-index: 0;
}

.circuit-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
}

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,212,255,0.15);
}

.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,212,255,0.1);
}

.whatsapp-float {
    animation: wa-pulse 2s ease-in-out infinite;
}
@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #00d4ff; border-radius: 4px; box-shadow: 0 0 6px rgba(0,212,255,0.5); }
::-webkit-scrollbar-thumb:hover { background: #00eeff; }

#scroll-top-btn { transition: opacity 0.3s ease, transform 0.3s ease; }
#scroll-top-btn.visible { opacity: 1 !important; pointer-events: auto !important; transform: scale(1); }
#scroll-top-btn:hover { transform: scale(1.1) !important; }

.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
    transform: translateX(0);
}

.nav-scrolled {
    background: rgba(10,10,10,0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,212,255,0.1);
}

.service-icon-bg {
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,212,255,0.05));
}

/* ── Section Separators ── */
.section-sep {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.section-sep::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,212,255,0.15) 10%,
        rgba(0,212,255,0.75) 50%,
        rgba(0,212,255,0.15) 90%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(0,212,255,0.4);
}
.sep-shimmer {
    position: absolute;
    top: calc(50% - 3px);
    height: 6px;
    width: 240px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0,212,255,0.6) 20%,
        rgba(255,255,255,1) 50%,
        rgba(0,212,255,0.6) 80%,
        transparent);
    border-radius: 6px;
    filter: blur(1px);
    animation: sep-shimmer 6s linear infinite;
}
@keyframes sep-shimmer {
    0%   { left: -240px; }
    100% { left: calc(100% + 240px); }
}

/* Separador hero (inicio → nosotros): más visible porque ambos fondos son oscuros */
.section-sep-hero {
    height: 36px;
}
.section-sep-hero::before {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,212,255,0.2) 8%,
        rgba(0,212,255,0.9) 50%,
        rgba(0,212,255,0.2) 92%,
        transparent 100%);
    box-shadow: 0 0 18px rgba(0,212,255,0.55), 0 0 40px rgba(0,212,255,0.2);
}
.sep-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0,212,255,1), 0 0 28px rgba(0,212,255,0.6);
    z-index: 2;
    animation: sep-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes sep-dot-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,1), 0 0 28px rgba(0,212,255,0.6); transform: translate(-50%,-50%) scale(1); }
    50%       { box-shadow: 0 0 20px rgba(0,212,255,1), 0 0 50px rgba(0,212,255,0.8); transform: translate(-50%,-50%) scale(1.25); }
}

/* ── Pricing: todo blanco puro ── */
#precios [data-zato-catalog] *,
#precios .grid > div * {
    color: #ffffff !important;
}
/* Checkmarks en verde */
#precios [data-zato-catalog] .fa-check,
#precios .grid > div .fa-check {
    color: #4ade80 !important;
}
/* Primera letra de cada item en mayúscula */
#precios [data-zato-catalog] li > span::first-letter,
#precios .grid > div li > span::first-letter {
    text-transform: uppercase;
}

/* ── Desktop hero scale-up (≥ 1280px) — solo desktop, no toca mobile ── */
@media (min-width: 1280px) {
    /* Contenedor más ancho → ambas columnas (texto + video) crecen proporcionalmente */
    #inicio .max-w-7xl {
        max-width: 92rem;
    }

    /* Titular principal */
    #inicio h1 {
        font-size: 5.25rem;
        line-height: 1.06;
    }

    /* Párrafo descriptivo */
    #inicio p.leading-relaxed {
        font-size: 1.4rem;
        max-width: 42rem;
    }

    /* Badge "Agentes IA para PYMES" */
    #inicio span.text-xs {
        font-size: 0.9rem;
    }

    /* Botones CTA */
    #inicio a.inline-flex {
        font-size: 1.2rem;
        padding: 1.375rem 2.75rem;
    }
}