:root {
    --bg-dark: #050505;
    --accent: #39FF14; /* Verde Neón */
    --white: #ffffff;
    --orange: #FF8C00;
    --green: #25D366;
    --red: #FF0000;
    --phone-bg: #000000;
    --phone-text: #FF4500; 
    --brand-orange: #FF4500; /* Naranja vibrante de la imagen */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; height: 100%; }

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-dark);
    color: var(--white);
    height: 100vh;
    width: 100vw;
}

.screen-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header */
.dynamic-header {
    min-height: 160px; 
    padding: 10px 1% 10px 0.5%; /* Casi al borde izquierdo */
    display: flex;
    justify-content: flex-start; /* Empujar todo a la izquierda */
    align-items: center; 
    background: transparent; 
    position: absolute;
    top: 0; width: 100%; z-index: 100;
}

.header-left { flex: 0 1 auto; display: flex; align-items: center; }
.header-center { flex: 0 1 auto; display: flex; justify-content: flex-start; align-items: center; text-align: left; margin-left: 40px; }
.header-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; padding-right: 15px; }

.logo-box { display: flex; align-items: center; }
.logo-box img { height: 145px; margin-right: 10px; filter: drop-shadow(0 0 12px var(--accent)); margin-top: -15px; }
.brand-info { display: flex; flex-direction: column; justify-content: center; }
#brand-title { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900; 
    font-size: 2.2rem; /* Reducido un poco para ajustar */
    letter-spacing: 0px; 
    line-height: 1; 
    color: #39FF14; 
    text-transform: uppercase;
    -webkit-text-stroke: 0;
    text-shadow: 2px 2px 0px rgba(0,0,0,1);
    margin-left: -5px; /* Más cerca del logo */
}
#brand-title span { 
    color: var(--brand-orange); 
    font-size: 1.1rem; 
    display: block; 
    margin-top: 5px; 
    font-weight: 800;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.header-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 0; 
    font-size: 1.1rem; 
    font-weight: 700;
    opacity: 0.9;
    line-height: 1.2;
}

#email-btn-final {
    color: #00D2FF; 
    text-decoration: none;
    background: transparent;
    border: none; 
    padding: 2px 0; 
    font-weight: 700;
    font-family: inherit;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 110;
}

#email-btn-final:hover {
    background: rgba(0, 210, 255, 0.1);
    transform: scale(1.05);
}
.header-details span { display: block; white-space: nowrap; }

/* FIXED LARGE CONTACT BUTTONS */
.contact-top { display: flex; flex-direction: column; gap: 15px; }

#phone-btn, #wa-header-btn {
    background: var(--phone-bg) !important;
    color: var(--phone-text) !important;
    text-decoration: none;
    padding: 18px 40px; 
    border: 3px solid var(--phone-text);
    border-radius: 10px;
    font-weight: 900;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.4);
    display: inline-block;
    line-height: 1;
    transition: transform 0.3s ease;
    text-align: center;
}

#wa-header-btn {
    color: var(--green) !important;
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

#phone-btn:hover, #wa-header-btn:hover { transform: scale(1.1); }

/* Slides */
.slides-wrapper { height: 100%; width: 100%; position: relative; }
.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    display: flex; align-items: center; justify-content: center;
}
.slide.active { opacity: 1; z-index: 1; }
.slide-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: brightness(0.4) saturate(1.2);
    transform: scale(1); 
}

@keyframes zoomInEffect {
    from { transform: scale(1); }
    to { transform: scale(1.25); }
}

.slide.active .slide-bg { 
    animation: zoomInEffect 14s linear forwards; 
}

.slide-content { 
    position: relative; 
    z-index: 2; 
    text-align: center; 
    max-width: 85%; 
    margin-top: -120px; /* Subir todo el bloque de texto significativamente */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espacio garantizado entre contenedores para evitar solapamientos */
}
.slide h2 { 
    font-family: 'Montserrat', sans-serif; 
    font-size: clamp(1.05rem, 3.4vw, 2.4rem); /* 25% más pequeño que antes */
    line-height: 1.2; 
    margin: 0;
    color: var(--white);
}
.slide h3 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: clamp(1.15rem, 2.5vw, 1.9rem); 
    color: var(--accent); 
    margin: 0;
    letter-spacing: 2px; 
    font-weight: 700; 
    line-height: 1.3; 
}
.slide p { 
    font-size: clamp(1.1rem, 1.6vw, 1.35rem); 
    font-weight: 600; 
    opacity: 1; 
    max-width: 850px; 
    margin: 0;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8); 
    line-height: 1.4; 
}

/* Progress Dots */
.slide-controls { position: absolute; right: 40px; top: 35%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; z-index: 100; }
.dot { width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.6); box-shadow: 0 0 15px var(--accent); }

/* Brand Container */
.brand-container { position: absolute; bottom: 100px; width: 100%; z-index: 100; background: rgba(0,0,0,0.4); padding: 15px 0; }
.brand-heading { text-align: center; color: var(--white); font-size: 1.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; font-family: 'Orbitron', sans-serif; }
.brand-tape { background: #000; padding: 15px 0; border-top: 2px solid rgba(255,0,0,0.5); border-bottom: 2px solid rgba(255,0,0,0.5); overflow: hidden; width: 100%; }
.tape-track { display: flex; width: max-content; white-space: nowrap; animation: scroll-tape 120s linear infinite; }
.tape-track span { display: inline-block; color: var(--red); font-weight: 900; font-size: 1.8rem; padding-right: 5rem; font-family: 'Montserrat', sans-serif; letter-spacing: 2px; text-shadow: 0 0 15px rgba(255,0,0,0.4); }

@keyframes scroll-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Urgent Hook - CLEAN NO BACKGROUND */
.urgent-hook {
    position: absolute;
    bottom: 280px; /* Bajado para dar espacio al contenido central */
    width: 100%;
    text-align: center;
    z-index: 100;
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    font-size: 2.2rem;
    letter-spacing: 5px;
    text-shadow: 2px 2px 20px rgba(0,0,0,1);
    background: transparent; 
    padding: 0;
    border: none;
}

/* Contact Actions (XXL) */
.floating-contact {
    position: absolute;
    bottom: 30px; width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
    z-index: 100;
}

.btn-main, .btn-wa {
    padding: 22px 65px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.4rem;
    border: 4px solid;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.btn-main { background: #000; color: var(--orange); border-color: var(--orange); animation: attention-shake 4s infinite 0s; }
.btn-wa { background: var(--green); color: var(--white); border-color: var(--white); animation: attention-shake 4s infinite 2s; }

/* Shake Animation */
@keyframes attention-shake {
    0%, 80%, 100% { transform: scale(1) rotate(0); }
    82% { transform: scale(1.08) rotate(3deg); }
    84% { transform: scale(1.08) rotate(-3deg); }
    86% { transform: scale(1.08) rotate(3deg); }
    88% { transform: scale(1.08) rotate(-3deg); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    * { box-sizing: border-box; }
    html, body { overflow-x: hidden; width: 100%; }

    .screen-container { 
        height: auto; 
        min-height: 100vh; 
        display: flex; 
        flex-direction: column; 
        overflow-y: auto; 
        background: #000;
    }

    /* Header centrado y fluido */
    .dynamic-header { 
        position: relative; 
        width: 100%;
        padding: 20px 5%; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: var(--bg-dark);
    }
    .header-left, .header-center, .header-right { flex: none; width: 100%; display: block; }
    .header-center { margin: 15px 0; }
    .logo-box { flex-direction: column; align-items: center; }
    .logo-box img { height: 118px; margin-right: 0; margin-bottom: 10px; }
    
    #brand-title { font-size: 1.5rem; line-height: 1.2; width: 100%; }
    .services-text { font-size: 0.9rem; margin-top: 10px; display: block; line-height: 1.3; color: var(--brand-orange); }
    .mobile-br { display: block; } /* Forzar 3 líneas */

    .header-details { 
        margin-top: 15px; 
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #email-btn-final { 
        background: transparent; border: none; color: #00D2FF; 
        font-weight: 700; cursor: pointer; font-family: inherit; 
        font-size: 1rem !important; margin-bottom: 10px;
    }

    .schedule-box { display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; }

    .header-right { display: flex; justify-content: center; width: 100%; }
    .contact-top { width: 90%; margin: 20px auto 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: center; }
    #phone-btn, #wa-header-btn { font-size: 1.1rem; padding: 15px; width: 100%; border-radius: 50px; text-align: center; }

    /* Canvas de Animaciones (Contenedor estricto) */
    .slides-wrapper { 
        height: 520px; /* Aumentado para dar más aire */
        position: relative; 
        width: 100%;
        margin-top: 10px;
        background: #000;
        overflow: hidden;
    }
    .slide-content { 
        position: absolute;
        top: 45%; /* Un poco más arriba del centro */
        left: 50%;
        transform: translate(-50%, -45%);
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Espacio coherente entre elementos */
    }
    .slide h2 { 
        font-size: 2.1rem; 
        margin: 0; 
        line-height: 1.1; 
        width: 100%;
    }
    .slide h3 { 
        font-size: 1.1rem; 
        margin: 0; 
        text-transform: uppercase; 
        letter-spacing: 2px;
        line-height: 1.3;
    }
    .slide p { 
        font-size: 1rem; 
        margin: 10px 0 0 0; 
        line-height: 1.4; 
        max-width: 280px; 
    }

    /* Los puntos del carrusel */
    .slide-controls { 
        right: 15px; 
        top: 50%; 
        transform: translateY(-50%); 
        gap: 12px;
    }

    /* Elementos fuera del canvas */
    .urgent-hook { 
        position: relative; 
        margin: 10px auto 20px auto; /* Reducido drásticamente para ganar espacio */
        width: 92%;
        font-size: 1.05rem; 
        padding: 15px 10px;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        text-align: center;
        bottom: auto; 
        line-height: 1.3;
    }

    .brand-container { 
        position: relative; 
        width: 100%;
        margin: 100px 0 20px 0; /* Aumentado drásticamente para evitar solapamientos */
        padding: 15px 0;
        background: #050505;
    }
    .brand-heading { font-size: 0.95rem; margin-bottom: 10px; }
    .tape-track span { font-size: 1.1rem; }

    /* Botonera final integrada en el flujo */
    .floating-contact { 
        position: relative; 
        width: 90%;
        margin: -50px auto 20px auto; /* Centrado y subido */
        padding: 10px;
        display: flex;
        gap: 10px;
        background: transparent;
        z-index: 10;
    }
    .btn-main, .btn-wa { 
        flex: 1;
        height: 50px;
        font-size: 0.85rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 5px;
    }
        font-size: 0.9rem;
        border-radius: 12px;
    }
}

/* Ocultar saltos de línea móviles en escritorio */
@media (min-width: 769px) {
    .mobile-br { display: none; }
}