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

html, body { font-family:'Montserrat',sans-serif;
background: #000; color:#c6c6c6;
min-height:100vh; overflow-x:visible; }

/* HERO */
.hero { justify-content:center; background-size:cover;
display:flex; position:relative; align-items:center;
animation: cambiarfondo 40s linear infinite; }

@keyframes cambiarfondo {
0% { background-image:url("01.png"); }
8% { background-image:url("01.png"); }
16% { background-image:url("02.png"); }
24% { background-image:url("03.jpg"); } 
32% { background-image:url("04.jpg"); }
40% { background-image:url("05.jpg"); }
48% { background-image:url("06.jpg"); }
56% { background-image:url("07.jpg"); }
64% { background-image:url("06.jpg"); }
72% { background-image:url("05.jpg"); }
80% { background-image:url("04.jpg"); }
88% { background-image:url("03.jpg"); }
96% { background-image:url("02.png"); }
100% { background-image:url("01.png"); } }

/* HEADER */
.logo { width: auto; }

/*NETWORK FIJO DE FONDO*/
#network { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:1; pointer-events:none; }

/* SCANNER AI */
.scanner { position:absolute; width:100%; height:2px;
background:linear-gradient(90deg,transparent,#fff,transparent);
animation:scan 6s linear infinite; }

@keyframes scan { 0% { top:0 } 100% { top:100% } }

.container { position:relative; z-index:2; width:90%; max-width:1600px; text-align:center; }

/* TITULO HOLOGRAFICO */
.hologram { font-family:'Orbitron';
background:linear-gradient(90deg,rgba(255, 255, 255, 1),
rgba(255, 205, 131, 0.9),rgba(255, 153, 0, 1),
rgba(255, 205, 131, 0.9),rgba(255, 255, 255, 1));
background-size:200%; margin-bottom:5px; padding-top: 5px;
-webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:holo 6s linear infinite; }

h2 { margin-bottom:5px; opacity:1; font-style:italic; color:white; text-shadow: 0 0 10px rgba(255,180,70,.9); }

h4 { margin-bottom:5px; font-style:bold italic; opacity:1; color:white; text-shadow: 0 0 10px #ffbc00; }

h5 { margin-bottom:5px; font-style:bold italic; opacity:1; color:#000; text-shadow: 0 0 10px rgba(255,180,70,.9); }

h6 { color:rgba(0,255,255,0.9); text-shadow: 0 0 10px rgba(255,180,70,.9); }

.systems { letter-spacing:3px; margin-bottom:5px; opacity:.9; }

@keyframes holo { 0%{ background-position:0% } 100%{ background-position:200% } }

/* PANEL AI */
.ai-panel { justify-content:center; }

.metric { border-radius:10px; }

.metric span { color:#ffb347; font-family:'Orbitron'; }

/* TARJETAS */
.services { justify-content:center; }

.card { flex:1; color: #000; border-radius:10px; position:relative; cursor:pointer; transition:.3s; 
background:linear-gradient(180deg,transparent,rgba(255, 205, 131, 0.9),rgba(255, 153, 0, 1),rgba(255, 205, 131, 0.9));
box-shadow: 3px 3px 6px rgba(255,255,255,0.9); }

.card:hover { border-radius:10px;
    background:radial-gradient(circle at top center,rgba(255, 255, 255, 0.9),rgba(255, 205, 131, 0.9),rgba(255, 153, 0, 0.9));
    box-shadow:0 20px 60px rgba(255,170,80,.35); }

/* OVERLAY TARJETA */
.overlay-info { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.85);
padding:8px; font-size:.9rem; opacity:0; transition:.3s; font-style:bold; color:#ffb347; }

.card:hover .overlay-info { opacity:1; border-radius: 10px; }

/* DETALLE */
.service-detail { border-radius:10px; margin-top:15px; max-width:900px;
margin-left:auto; display:none;margin-right:auto; padding:20px;
background:linear-gradient(180deg,rgba(255, 255, 255, 0.8),rgba(0, 255, 94, 0.7)); border:2px solid rgba(0, 187, 255, 0.8); }

.parrafo { color: black; text-align: left; }

/* CTA */
.cta { margin-top:20px; }

.buttons { display:flex; gap:20px; justify-content:center; }

.btn { padding:10px 14px; border-radius:8px; font-weight:600; text-decoration:none; }

.primary { color:rgb(0, 64, 121); font-size: 1.4rem;
background:linear-gradient(90deg,rgba(255, 153, 0, 0.9),rgba(255, 205, 131, 0.9));
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); transition:.3s; }

.primary:hover { color:#ffbc00; text-shadow: 3px 0px 2px rgba(144, 72, 0, 1.5);
    box-shadow:0 0 10px #dd7a00; transform:scale(1.05);
    background:linear-gradient(90deg,transparent,rgba(255, 205, 131, 0.9),rgba(255, 153, 0, 0.9)) }

.whatsapp { background:#25D366; }

/* ANIMACION ESCRITURA DIGITAL */
#typeTitle { overflow:hidden; border-right:3px solid #ffb347; padding-right:6px; white-space:nowrap; }

/*ZONA CLICKABLE EN GIF*/
.gif-container{ position:relative; width:100%; }
.gif-container img{ width:100%; display:block; }

/* zonas clicables */
.zone{ position:absolute; top:0; height:100%; cursor:pointer; }

/* izquierda */
.zone-left{ left:0; width:62%; }

/* derecha */
.zone-right{ right:0; width:37%; }

/* TRANSICION CINEMATOGRAFICA TARJETAS */
.card { transform:scale(.96); opacity:.96; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, opacity .6s; }

.card:hover { opacity:1; transform:scale(1.05); filter:brightness(1.09) contrast(1.09); box-shadow: 0 0 20px rgba(255,180,90,.3), 0 30px 80px rgba(255,180,90,.25); }

/* EFECTO LUZ SUAVE */
.card::before { content:""; position:absolute; inset:0; background:linear-gradient( 120deg, transparent,
rgba(255,180,90,.15), transparent ); opacity:0; transition:.6s; }

.card:hover::before { opacity:1; }

/*footer*/
footer { text-align: center; color: #ccc; font-size: 1.1rem; font-weight: bold; }

/* BOTON FLOTANTE */
.floating-brochure { position: fixed; z-index: 860; transition:.3s; filter: 
    drop-shadow(0 0 10px rgba(255, 247, 0, 0.9)); }

.floating-whatsapp_down { position:absolute; 
background:rgba(0, 255, 94, 1); width:90px;
height:90px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:28px; color:white; text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.4); transition:.3s; }

.floating-whatsapp_top { position:fixed; 
background:rgba(0, 255, 94, 1); width:90px;
height:90px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:28px; color:white; text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.4); transition:.3s; }

/*FORMULARIO DE CONTACTO*/
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
align-items:center; justify-content:center; z-index:999; }

.modal-box { width:420px; background:#0b0f18; padding:35px;
border:1px solid rgba(0,255,255,0.3); animation:modalEnter .4s ease;
box-shadow: 0 0 25px rgba(0,255,255,.15), inset 0 0 10px rgba(0,255,255,.05); border-radius:8px; }

.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }

.modal-close { cursor:pointer; font-size:42px; }

.modal-box input, .modal-box select, 
.modal-box textarea { width:100%; margin-bottom:12px; padding:10px; background:#101827; border:1px solid rgba(255,255,255,.15); color:white; }

.btn-send { width:100%; padding:12px; font-weight:bold;background:linear-gradient(90deg,#00ffff,#0077ff); border:none;
 color:white; cursor:pointer; }

.success-panel { display:none; text-align:center; }

.btn-whatsapp { margin-top:15px; display:inline-block; padding:5vw 15vw; background:#25D366; color:white;text-decoration:none; }

@keyframes modalEnter { from { opacity:0; transform:translateY(30px); }to { opacity:1; transform:translateY(0); } }

/*IMAGENES DE SERVICIOS*/

.service-img{ width:100%; height:auto; display:flex;
justify-content:center; align-items:center; }

.service-img img{ width:100%; max-width:92vw; height:auto; border-radius:6px; 
object-fit:contain; box-shadow: 0 0 15px rgba(255,255,255,.7);
filter:brightness(0.96) contrast(0.96); transition:all .4s ease; }

.service-img img:hover{ transform:scale(1.05); box-shadow: 0 0 40px rgba(0,255,255,.4);  filter:brightness(1.02) contrast(1.02); }

/*EFECTOS DE REVELACIÓN DE DIVS*/

/* estado inicial oculto */
.reveal{ opacity:0; transform:translateY(40px);
transition: opacity .8s ease, transform .8s ease; will-change:transform, opacity; }

/* izquierda → derecha */
.reveal-left{ transform:translateX(-80px); }

/* derecha → izquierda */
.reveal-right{ transform:translateX(80px); }

/* estado visible */
.reveal.active{ opacity:1; transform:translateX(0) translateY(0); }

/*efecto reveal hud futurista*/
.reveal-hud{ opacity:0; transform:translateY(20px) scale(.95); box-shadow:none; }

.reveal.active.reveal-hud{ opacity:1; transform:translateY(0) scale(1); box-shadow:0 0 25px rgba(0,255,255,.2); }

/*efecto reveal rotación ligera*/
.reveal-rotate{ transform:rotate(-28deg) scale(.95); transition-delay:.4s; }

.reveal.active.reveal-rotate{ transform:rotate(0) scale(1); }

.reveal.active.reveal-rotate:hover{ transform:rotate(-42deg) scale(1.04); filter:brightness(1.28); transition-delay:.8s ease; }

/*efecto fade vertical*/
.reveal-fade-up{ opacity:0; transition:opacity .8s ease; transform:translateY(90px); }

.reveal.active.reveal-fade-up{ opacity:1; }

/*efecto fade zoom*/
.reveal-zoom{ transform:scale(.85); transition:transform .8s ease; }

.reveal.active.reveal-zoom{ transform:scale(1); }