/* RESET BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; outline: none; }

body { 
    background-color: #050505; 
    font-family: 'Inter', sans-serif; 
    color: #fff; 
    overflow: hidden; 
    width: 100%;
}

/* PRELOADER */
#preloader { position: fixed; inset: 0; background: #000; z-index: 10000; display: flex; justify-content: center; align-items: center; transition: opacity 1s; }
#canvas-preloader { position: absolute; inset: 0; z-index: 1; }
.preloader-content { position: relative; z-index: 10; text-align: center; }
.mccann-logo { font-size: clamp(40px, 8vw, 80px); font-weight: 900; text-transform: uppercase; color: #fff; }
.red-text { color: #d63c2b !important; }
.mccann-sub { color: #666; margin-top: 20px; opacity: 0; transition: 1s; }

/* NAVBAR ESCRITORIO */
.navbar { position: absolute; top: 0; width: 100%; padding: 40px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: 0.3s; }
.brand-logos { display: flex; align-items: center; }
.logo-main.primary { height: 54px; filter: drop-shadow(0 0 10px rgba(241,189,77,0.5)); }
.logo-main.secondary { height: 34px; opacity: 0.5; margin-left: 15px; }

.nav-tools { display: flex; gap: 12px; align-items: center; transition: 0.4s ease; }
.tool-link { 
    color: #fff !important; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; 
    letter-spacing: 1px; padding: 10px 18px; border-radius: 30px; 
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: 0.3s; backdrop-filter: blur(5px); white-space: nowrap;
}
.tool-link:hover, .tool-link.active { background: #d63c2b; border-color: #d63c2b; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(214, 60, 43, 0.4); }

.ubicacion { font-size: 0.65rem; font-weight: 900; color: #444; letter-spacing: 2px; }
.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 200; }
.hamburger span { width: 30px; height: 3px; background-color: #fff; border-radius: 3px; transition: 0.3s ease-in-out; }

/* LAYOUT PRINCIPAL */
.split-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; height: 100vh; width: 100vw; }
.visual-side { position: relative; overflow: hidden; background: radial-gradient(circle at 15%, #151515, #050505); display: flex; align-items: flex-end; }
.character-container { height: 90%; padding-left: 2%; display: flex; align-items: flex-end; z-index: 2; }
#scrib-giant { height: 100%; width: auto; object-fit: contain; }
#box-canvas { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

/* CONTENIDO ADOBE */
.content-side { padding: 0 8%; display: flex; align-items: center; background: rgba(5, 5, 5, 0.75); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10; }
.label { color: #f1bd4d; font-weight: 900; letter-spacing: 2px; font-size: 0.8rem; display: block; margin-bottom: 10px; }
.main-title { font-size: clamp(2.2rem, 5.5vw, 5rem); font-weight: 900; line-height: 0.85; letter-spacing: -3px; margin-bottom: 25px; }
.main-subtitle { font-size: 1.1rem; margin-bottom: 40px; color: #ccc; }
.services-list { border-left: 2px solid #d63c2b; padding-left: 25px; margin-bottom: 40px; }
.service-item { margin-bottom: 20px; }
.service-item h4 { color: #d63c2b; font-size: 0.85rem; font-weight: 900; margin-bottom: 5px; text-transform: uppercase; }
.service-item p { color: #aaa; font-size: 0.95rem; }

.social-footer a { display: block; color: #fff !important; font-weight: 900; margin-bottom: 8px; font-size: 1.1rem; }
.social-footer a:hover { color: #f1bd4d !important; }
.address { color: #555; font-size: 0.85rem; margin-top: 15px; }

.wa-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #25d366; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.wa-float img { width: 35px; }
.reveal { opacity: 0; transform: translateY(30px); transition: 1.2s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* =========================================
   CELULARES Y HAMBURGUESA
   ========================================= */
@media (max-width: 1024px) {
    body { overflow-y: auto; overflow-x: hidden; }
    
    .navbar { flex-direction: row; justify-content: space-between; padding: 15px 5%; background: rgba(5,5,5,0.95); position: fixed; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .logo-main.primary { height: 35px; }
    .logo-main.secondary { display: none; }
    .ubicacion { display: none; }
    
    .hamburger { display: flex; }
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: #d63c2b; }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: #d63c2b; }
    
    .nav-tools { 
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
        background: rgba(5, 5, 5, 0.98); backdrop-filter: blur(15px);
        flex-direction: column; justify-content: center; align-items: center; gap: 20px;
        opacity: 0; pointer-events: none; z-index: 150;
    }
    .nav-tools.active { opacity: 1; pointer-events: all; }
    .tool-link { font-size: 1.1rem; padding: 15px 30px; width: 80%; text-align: center; }

    .split-layout { display: flex; flex-direction: column; height: auto; padding-top: 80px; }
    .visual-side { height: 45vh; width: 100%; background: none; }
    .character-container { justify-content: center; padding-left: 0; }
    #scrib-giant { height: 100%; }
    
    .content-side { padding: 40px 8% 100px; text-align: center; background: transparent; backdrop-filter: none; }
    .services-list { border-left: none; padding-left: 0; gap: 25px; }
    .main-title { font-size: 2.8rem; letter-spacing: -1px; }
}