/* --- REEMPLAZADO: styles.css completo con orbis animados y efecto lightning --- */
/* Estilo oscuro en escala de grises con logo difuminado menos intenso */
:root{
    --bg: #050505;
    --panel: #0e0e10;
    --text: #f3f3f3;
    --muted: #bdbdbd;
    --accent: #2a2a2a;

    /* ruta del logo (usa url("/static/archivo.svg") o ajusta) */
    --logo-url: url("/static/logo_blanco.svg");

    /* logo marca de agua */
    --logo-opacity: 0.06;
    --logo-size: 60%;
    --logo-blur: 10px;

    /* orbis / luces */
    --orbis-color-1: rgba(255,160,60,0.14);
    --orbis-color-2: rgba(60,160,255,0.10);
    --lights-speed: 20s;

    /* lightning */
    --lightning-cycle: 9s;

    --glass: rgba(0,0,0,0.52);
    --container-width: 1100px;
}

/* RESET / base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}

/* NAV */
.navbar{
    height:64px;
    display:flex;
    align-items:center;
    padding:0 20px;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid rgba(255,255,255,0.02);
}
.logo-placeholder{width:40px; height:40px; margin-right:12px}

/* Nav links */
.nav-links{
    display:flex;
    gap:18px;
    list-style:none;
    margin:0;
    padding:0;
    align-items:center;
}
.nav-links li a{
    color:var(--muted);
    text-decoration:none;
    font-weight:600;
    font-size:0.95rem;
    padding:8px 10px;
    border-radius:6px;
    transition:color .15s ease, background .15s ease, transform .12s ease;
}
.nav-links li a:hover,
.nav-links li a:focus{
    color:var(--text);
    background:rgba(255,255,255,0.02);
    transform:translateY(-1px);
}

/* Burger (mobile) */
.burger{background:transparent;border:0;display:none;flex-direction:column;gap:4px;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px}

/* HERO */
.hero-section{
    position:relative;
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    background:linear-gradient(var(--glass), rgba(0,0,0,0.35));
    color:var(--text);
    overflow:hidden;
}

/* HERO: capas dinámicas
   - capa A y B: orbis/luces (radial gradients) en movimiento
   - capa C: logo (marca de agua) con drift
*/
.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    /* 3 capas: orbis1, orbis2, logo (logo definido como url en --logo-url) */
    background-image:
        radial-gradient(circle at 10% 20%, var(--orbis-color-1) 0%, rgba(255,160,60,0.06) 12%, transparent 30%),
        radial-gradient(circle at 80% 60%, var(--orbis-color-2) 0%, rgba(60,160,255,0.04) 10%, transparent 28%),
        var(--logo-url);
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* posiciones iniciales para las dos luces y el logo */
    background-position: 10% 20%, 80% 60%, center;
    background-size: 32% 32%, 28% 28%, var(--logo-size);
    opacity: 1; /* orbis usan su propia alfa, logo visual se controla vía filtro */
    filter: blur(var(--logo-blur)) grayscale(100%) contrast(1.02);
    pointer-events:none;
    z-index:1;
    /* animaciones: luces en movimiento + pequeño float del logo */
    animation:
      lights-move var(--lights-speed) linear infinite,
      logo-drift 28s ease-in-out infinite;
}

/* Overlay oscuro principal (para legibilidad) + lightning animado */
.hero-section::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.28));
    pointer-events:none;
    z-index:2;
    animation: lightning var(--lightning-cycle) linear infinite;
}

/* Contenido del hero (encima del background) */
.hero-content{position:relative; z-index:3; max-width:900px}

/* ACENTUAR TIPOGRAFÍA DEL HERO (solo esto cambia) */
.hero-content h1{
    /* tipografía más agresiva */
    font-family: 'Oswald','Bebas Neue', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(2.8rem, 6.5vw, 4.8rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    -webkit-text-stroke: 1.2px rgba(0,0,0,0.72);
    text-shadow:
      0 10px 36px rgba(0,0,0,0.75),
      0 3px 0 rgba(255,255,255,0.02),
      0 0 54px rgba(47,59,69,0.12);
    transform: skewX(-5deg);
    margin:0;
    padding:0 8px;
    will-change: transform, text-shadow;
}

.hero-content .sub{
    /* subtítulo con más presencia pero sin romper legibilidad */
    font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 1.6px;
    color: var(--muted);
    text-transform: none;
    text-shadow: 0 3px 14px rgba(0,0,0,0.55);
    margin:0 0 18px;
    opacity:0.98;
}

/* CTA: solo tipografía y peso (no toco colores, bordes ni tamaños) */
.btn-primary{
    display:inline-block;
    text-decoration:none;
    background:transparent;
    border:2px solid rgba(255,255,255,0.12);
    color:var(--text);
    padding:12px 20px;
    border-radius:6px;
    transition:all .18s ease;
    font-family: 'Oswald','Bebas Neue', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    font-size: 0.98rem;
}
.btn-primary:hover{background:rgba(255,255,255,0.04); transform:translateY(-2px)}

/* CTA flash sincronizada con lightning (clase .flash se puede añadir desde JS para sincronía) */
.hero-section.flash .btn-primary{
    animation: cta-flash var(--lightning-cycle) linear infinite;
}

/* CATALOGO / layout */
.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}
section{padding:36px 0}
h2.section-title{font-size:1.6rem;margin:0 0 18px;color:var(--text);letter-spacing:0.4px}

/* Catálogo: oculto inicialmente para efecto 'revelar' */
.catalogo-section{transition:all 600ms cubic-bezier(.2,.9,.2,1); margin:0 auto}
.catalogo-section.hidden{opacity:0; height:0; padding:0 20px; overflow:hidden; pointer-events:none}
.catalogo-section.visible{opacity:1; height:auto; padding:40px 20px; pointer-events:auto}

.productos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.producto-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    padding:16px; border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.6); text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
    display:flex;
    flex-direction:column;
    gap:10px;
    cursor:pointer; /* tarjeta clicable */
}
.producto-card:focus, .producto-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.producto-card img{width:100%; height:180px; object-fit:cover; border-radius:6px; filter:grayscale(100%) contrast(.95) brightness(.95)}
.producto-card h3{margin:0; color:var(--text); font-size:1.05rem}
.producto-card .precio{color:var(--muted); margin-top:auto}

/* Botones dentro de tarjetas */
.btn-vermas{display:inline-block; text-decoration:none; padding:8px 12px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); color:var(--text)}
.btn-vermas:hover{background:rgba(255,255,255,0.03)}

/* Contacto */
.contact-section .container{max-width:760px}
.contact-section form{display:block;gap:8px}
.contact-section h2{margin-bottom:14px}
input, textarea{width:100%; padding:10px; margin:8px 0; border:1px solid rgba(255,255,255,0.06); border-radius:6px; background: rgba(255,255,255,0.02); color:var(--text); transition:box-shadow .12s ease, border-color .12s ease}
input:focus, textarea:focus{outline:none; box-shadow:0 6px 18px rgba(0,0,0,0.45); border-color:rgba(255,255,255,0.12)}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,0.45)}
button[type="submit"]{padding:10px 16px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); background:transparent; color:var(--text); cursor:pointer}

/* Sobre nosotros */
.about-section{background:transparent}
.about-section p{color:var(--muted); line-height:1.6; max-width:780px}

/* Mensajes flash */
.flash-messages{position:fixed; right:20px; bottom:20px; background: #0b0b0b; color:var(--text); border:1px solid rgba(255,255,255,0.03); padding:10px 14px; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.7); display:none}

/* Footer */
footer{padding:20px 0; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,0.02)}

/* Accesibilidad y foco */
:focus{outline:2px solid rgba(255,255,255,0.06); outline-offset:3px}

/* ----------------- ANIMATIONS ----------------- */

/* Movimiento de las dos luces/orbis (modifica posiciones de las dos primeras capas) */
@keyframes lights-move{
    0%{
        background-position: 8% 18%, 82% 62%, center;
        background-size: 34% 34%, 26% 26%, var(--logo-size);
    }
    25%{
        background-position: 24% 30%, 68% 40%, center;
        background-size: 30% 30%, 30% 30%, calc(var(--logo-size) * 1.02);
    }
    50%{
        background-position: 38% 10%, 58% 72%, center;
        background-size: 36% 36%, 22% 22%, var(--logo-size);
    }
    75%{
        background-position: 18% 48%, 74% 22%, center;
        background-size: 28% 28%, 30% 30%, calc(var(--logo-size) * 0.98);
    }
    100%{
        background-position: 8% 18%, 82% 62%, center;
        background-size: 34% 34%, 26% 26%, var(--logo-size);
    }
}

/* movimiento sutil del logo para dar vida */
@keyframes logo-drift{
    0%{ transform: translateY(0) scale(1) }
    50%{ transform: translateY(2%) scale(1.01) }
    100%{ transform: translateY(0) scale(1) }
}

/* Efecto lightning: breves destellos blancos y aumento de brillo */
@keyframes lightning{
    0%, 86%{
        background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.28));
        filter: none;
    }
    87%{
        background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.06));
        filter: brightness(1.25) contrast(1.08);
    }
    89%{
        background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.12));
        filter: brightness(1.6) contrast(1.12);
    }
    92%{
        background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.02));
        filter: brightness(1.02) contrast(1.02);
    }
    100%{
        background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.28));
        filter: none;
    }
}

/* sincronizar glow del CTA durante flash */
@keyframes cta-flash{
    0%,86%{ box-shadow:none; transform:none }
    87%{ box-shadow: 0 8px 30px rgba(255,255,255,0.04); transform:translateY(-2px) }
    89%{ box-shadow: 0 14px 80px rgba(255,255,255,0.08); transform:translateY(-3px) }
    92%{ box-shadow:none; transform:none }
}

/* Aplica animación al botón si el hero recibe la clase .flash desde JS */
.hero-section.flash .btn-primary{ animation: cta-flash var(--lightning-cycle) linear infinite }

/* ----------------- RESPONSIVE ----------------- */
@media (max-width:880px){
    .nav-links{display:none}
    .burger{display:flex}
    .catalogo-section.visible{padding:20px}
    .hero-content h1{font-size:1.8rem}
    /* reducir efecto orbis en mobile para rendimiento */
    .hero-section::before{
        background-image:
            radial-gradient(circle at 12% 18%, rgba(255,160,60,0.12) 0%, transparent 24%),
            radial-gradient(circle at 80% 62%, rgba(60,160,255,0.08) 0%, transparent 22%),
            var(--logo-url);
        background-size: 44% 44%, 36% 36%, 80%;
        filter: blur(calc(var(--logo-blur) * 0.9)) grayscale(100%) contrast(1.02);
        animation-duration: calc(var(--lights-speed) * 0.8), 28s;
    }
}
@media (min-width:768px){
    .hero-content h1{font-size:3.2rem}
}