/* Quitamos cosas feas y ponemos todo bonito */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fondo súper oscuro como tormenta */
body {
    font-family: Arial, sans-serif;
    background-color: #0A0F0D;
    overflow-x: hidden;
    color: #D3D3D3;
    animation: slide-in 1s ease-out;
}

/* Animación de entrada (desde la derecha) */
@keyframes slide-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Animación de salida (hacia la izquierda) */
@keyframes slide-out {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}

/* El menú */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 5px 10px;
    align-items: center;
}

/* "Nitrox" en las páginas secundarias */
body:not(.index) nav .nitrox {
    color: #CCFF00;
    font-size: 24px;
    font-family: Arial, sans-serif;
    text-shadow: 
        0 0 5px #CCFF00,
        0 0 15px #CCFF00,
        0 0 30px #00CED1,
        0 0 50px #00CED1;
    animation: electrico 1s infinite;
    position: absolute;
    left: 20px;
    top: 1px;
    line-height: 1;
}

/* "Nitrox" grande en la página principal */
body.index .nitrox {
    color: #CCFF00;
    font-size: 80px;
    font-family: Arial, sans-serif;
    text-shadow: 
        0 0 5px #CCFF00,
        0 0 15px #CCFF00,
        0 0 30px #00CED1,
        0 0 50px #00CED1;
    animation: electrico 1s infinite;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: #ADFF2F;
    text-decoration: none;
    font-size: 18px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    text-shadow: 
        0 0 5px #ADFF2F,
        0 0 10px #ADFF2F;
}

nav ul li a:hover {
    color: #1B4D3E;
    text-shadow: none;
}

/* La sección principal (fondo con video, rayos o imagen) */
.hero {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Fondo específico para Servicios */
.servicios-bg {
    background: url('CONEJO.png') no-repeat center center;
    background-size: cover;
    background-color: #0A0F0D;
    height: 100vh;
}

/* Video de fondo */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Asegurar que esté detrás de todo */
    opacity: 0.8;
}

/* Título centrado en todas las páginas (valor base) */
.titulo {
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 50%; /* Base para otras páginas */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* Clase específica para Acerca de */
.titulo-acerca {
    top: calc(50% - 56px); /* Subido 2 cm (56px) */
    z-index: 2; /* Sobre el GIF */
}

/* Contenedor para mensajes animados en Acerca de */
.message-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Mensajes animados */
.message {
    position: absolute;
    width: 100%;
    opacity: 0;
    color: #00CED1;
    font-size: 24px;
    text-shadow: 
        0 0 5px #00CED1,
        0 0 10px #00CED1,
        0 0 20px #00CED1;
    background-color: #0A0F0D;
    padding: 20px;
    border-radius: 5px;
    z-index: 5;
    animation: fade-message 16s infinite;
    left: 0;
    top: 0;
}

.message[data-index="0"] { animation-delay: 0s; }
.message[data-index="1"] { animation-delay: 4s; }
.message[data-index="2"] { animation-delay: 8s; }
.message[data-index="3"] { animation-delay: 12s; }

@keyframes fade-message {
    0% { opacity: 0; }
    6% { opacity: 1; }
    25% { opacity: 1; }
    31% { opacity: 0; }
    100% { opacity: 0; }
}

/* "Servicios y reparaciones" y textos similares */
.subtitulo {
    color: #00CED1;
    font-size: 24px;
    text-shadow: 
        0 0 5px #00CED1,
        0 0 10px #00CED1,
        0 0 20px #00CED1;
    animation: brillo-azul 1.5s infinite;
}

/* Animación de los puntitos en "Cargando..." */
.dots {
    display: inline-block;
    width: 30px;
    text-align: left;
}

.dots::after {
    content: "...";
    animation: dots 1.5s infinite steps(4);
}

@keyframes dots {
    0% { opacity: 0; }
    25% { opacity: 1; }
    50% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* Animación para el efecto eléctrico de "Nitrox" */
@keyframes electrico {
    0% { text-shadow: 0 0 5px #CCFF00, 0 0 15px #CCFF00, 0 0 30px #00CED1, 0 0 50px #00CED1; }
    50% { text-shadow: 0 0 10px #CCFF00, 0 0 25px #CCFF00, 0 0 40px #00CED1, 0 0 70px #00CED1; }
    100% { text-shadow: 0 0 5px #CCFF00, 0 0 15px #CCFF00, 0 0 30px #00CED1, 0 0 50px #00CED1; }
}

/* Animación para el brillo azul */
@keyframes brillo-azul {
    0% { text-shadow: 0 0 5px #00CED1, 0 0 10px #00CED1, 0 0 20px #00CED1; }
    50% { text-shadow: 0 0 10px #00CED1, 0 0 20px #00CED1, 0 0 30px #00CED1; }
    100% { text-shadow: 0 0 5px #00CED1, 0 0 10px #00CED1, 0 0 20px #00CED1; }
}

/* Contenedor para los rayos (solo en Proyectos) */
.rayos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Estilo base de los rayos con efecto de raíces */
.rayo1, .rayo2, .rayo3, .rayo4, .rayo5, .rayo6, .rayo7 {
    position: absolute;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #87CEEB, #00CED1);
    opacity: 0;
    animation: relampago 4s infinite;
    box-shadow: 
        0 0 10px #00CED1,
        2px 0 5px #87CEEB,
        -2px 0 5px #87CEEB,
        4px 0 8px #00CED1,
        -4px 0 8px #00CED1;
}

/* Posiciones y retrasos para que caigan sin parar */
.rayo1 { left: 5%; animation-delay: 0s; }
.rayo2 { left: 20%; animation-delay: 0.5s; }
.rayo3 { left: 35%; animation-delay: 1s; }
.rayo4 { left: 50%; animation-delay: 1.5s; }
.rayo5 { left: 65%; animation-delay: 2s; }
.rayo6 { left: 80%; animation-delay: 2.5s; }
.rayo7 { left: 95%; animation-delay: 3s; }

/* Keyframes para los relámpagos */
@keyframes relampago {
    0% {
        transform: translateY(-100%);
        opacity: 0;
        box-shadow: 0 0 10px #00CED1, 2px 0 5px #87CEEB, -2px 0 5px #87CEEB;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: 0.7;
        box-shadow: 
            0 0 15px #00CED1,
            4px 0 10px #87CEEB,
            -4px 0 10px #87CEEB,
            6px 0 12px #00CED1,
            -6px 0 12px #00CED1;
    }
    30% {
        opacity: 0.9;
    }
    40% {
        opacity: 0.4;
        transform: translateY(100%);
        box-shadow: 
            0 0 20px #00CED1,
            6px 0 15px #87CEEB,
            -6px 0 15px #87CEEB,
            8px 0 18px #00CED1,
            -8px 0 18px #00CED1;
    }
    50% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Estilos para los íconos de contacto */
.contact-info {
    font-size: 18px;
    line-height: 2;
    color: #00CED1;
    text-shadow: 
        0 0 5px #00CED1,
        0 0 10px #00CED1;
}

/* Iconos grandes y centrados en Contacto */
.contact-icon {
    width: 100px; /* Grandes en escritorio */
    height: 100px;
    margin: 20px; /* Espaciado entre íconos */
    transition: transform 0.3s ease;
}

.contact-icon:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
}

/* Contenedor para centrar los íconos en Contacto */
.contact-icons-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 2;
}

/* Estilo para los enlaces de contacto */
.contact-link {
    text-decoration: none;
}

/* Estilos del conejito */
.conejito-link {
    position: absolute;
    bottom: 10px; /* Pegado al fondo en escritorio */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%);
    z-index: 1; /* Debajo de la caja de texto */
}

.conejito-boton {
    width: 300px; /* Tamaño en escritorio */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.conejito-boton:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Menú lateral en Servicios */
.menu-btn {
    position: fixed;
    top: 30px; /* Posición en escritorio */
    left: 10px;
    z-index: 4;
    width: 35px; /* Tamaño en escritorio */
    height: 35px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.menu-btn:hover {
    transform: scale(1.1);
}

.menu-close-btn {
    position: absolute;
    bottom: 10px; /* Abajo del menú lateral */
    right: 10px; /* Pegado al borde derecho */
    width: 35px; /* Mismo tamaño que menu-btn */
    height: 35px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.menu-close-btn:hover {
    transform: scale(1.1);
}

.menu-lateral {
    position: fixed;
    top: 32px; /* Al ras del nav */
    left: -300px; /* Escondido por defecto */
    width: 300px;
    height: calc(100vh - 32px); /* Hasta el borde inferior sin tapar nav */
    background-color: #1B4D3E; /* Negro verdoso */
    z-index: 2; /* Debajo del nav (z-index: 3) */
    transition: left 0.3s ease;
    padding: 20px;
    visibility: hidden; /* Oculto por defecto */
}

.menu-lateral.active {
    left: 0; /* Desplegado */
    visibility: visible; /* Visible solo cuando está activo */
}

.menu-lateral ul {
    list-style: none;
    padding: 0;
}

.menu-lateral li {
    margin-bottom: 30px;
}

.menu-lateral a {
    color: #00CED1;
    text-decoration: none;
    font-size: 18px;
    font-family: Arial, sans-serif;
    text-shadow: 
        0 0 5px #00CED1,
        0 0 10px #00CED1,
        0 0 20px #00CED1;
    animation: brillo-azul 1.5s infinite;
}

.menu-lateral a:hover {
    color: #ADFF2F;
    text-shadow: none;
}

/* Estilos para el formulario de registro */
.registro-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 90%;
    max-width: 400px;
}

.registro-form h2 {
    margin-bottom: 20px;
}

.registro-form label {
    display: block;
    color: #00CED1;
    font-size: 18px;
    margin: 10px 0 5px;
    text-shadow: 
        0 0 5px #00CED1,
        0 0 10px #00CED1;
}

.registro-form input,
.registro-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #00CED1;
    background-color: #0A0F0D;
    color: #D3D3D3;
    font-size: 16px;
    border-radius: 5px;
}

.registro-form button {
    background-color: #ADFF2F;
    color: #0A0F0D;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.registro-form button:hover {
    background-color: #1B4D3E;
    color: #D3D3D3;
}

/* Mensaje de confirmación solo para móviles */
@media (max-width: 480px) {
    .form-confirmation {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #1B4D3E;
        color: #ADFF2F;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        z-index: 5;
        font-size: 16px;
        box-shadow: 0 0 10px #00CED1;
    }
    .form-confirmation.visible {
        display: block;
    }
}

/* Diseño adaptable para móviles */
@media (max-width: 768px) {
    nav {
        padding: 5px;
    }
    nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    nav ul li {
        margin: 0 5px;
    }
    nav ul li a {
        font-size: 14px;
        padding: 2px 5px;
    }
    body:not(.index) nav .nitrox {
        display: none;
    }
    body.index .nitrox {
        font-size: 40px;
    }
    .subtitulo {
        font-size: 20px;
    }
    .message-container {
        width: 95%;
        max-width: 700px;
    }
    .message {
        font-size: 16px;
        padding: 10px;
    }
    .contact-info {
        font-size: 16px;
        line-height: 2.2;
        position: relative;
        top: -20px;
        text-align: center;
    }
    .contact-icon {
        width: 80px; /* Ajustado para tablets */
        height: 80px;
        margin: 15px;
    }
    .servicios-bg {
        background: url('CONEJO2.png') no-repeat 80% 80%;
        background-size: 150% auto;
    }
    .dots::after {
        content: "...";
        animation: dots 2s infinite steps(3);
    }
    .titulo {
        top: 50%; /* Restaurado para tablets */
    }
    .titulo-acerca {
        top: calc(50% - 56px); /* Subido 2 cm */
    }
    .conejito-link {
        bottom: 10px; /* Pegado al fondo */
        left: 50%; /* Centrado */
        transform: translateX(-50%);
    }
    .conejito-boton {
        width: 150px; /* Tamaño intermedio para tablets */
    }
    .menu-btn {
        top: 25px; /* Posición en tablets */
        width: 30px; /* Más pequeña */
        height: 30px;
    }
    .menu-close-btn {
        width: 30px;
        height: 30px;
        right: 10px; /* Pegado al borde derecho */
    }
    .menu-lateral {
        top: 32px; /* Al ras del nav */
        width: 250px;
        left: -250px;
        height: calc(100vh - 32px);
        visibility: hidden; /* Oculto por defecto */
    }
    .menu-lateral.active {
        left: 0;
        visibility: visible;
    }
    .menu-lateral a {
        font-size: 16px;
    }
    .registro-form {
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    nav ul li a {
        font-size: 12px;
        padding: 2px 4px;
    }
    body.index .nitrox {
        font-size: 30px;
    }
    body:not(.index) nav .nitrox {
        display: none;
    }
    .subtitulo {
        font-size: 18px;
    }
    .message-container {
        width: 95%;
    }
    .message {
        font-size: 14px;
        padding: 8px;
    }
    .contact-info {
        font-size: 14px;
        line-height: 2;
        position: relative;
        top: -15px;
        text-align: center;
    }
    .contact-icon {
        width: 60px; /* Grandes en móviles */
        height: 60px;
        margin: 10px;
    }
    .servicios-bg {
        background: url('CONEJO2.png') no-repeat 80% 80%;
        background-size: 150% 102%; /* Alargado 2 mm hacia abajo */
    }
    .dots::after {
        content: "...";
        animation: dots 2s infinite steps(3);
    }
    .titulo {
        top: 50%; /* Restaurado para móviles */
    }
    .titulo-acerca {
        top: calc(50% - 56px); /* Subido 2 cm */
    }
    .conejito-link {
        bottom: 5px; /* Pegado al fondo */
        left: 50%; /* Centrado */
        transform: translateX(-50%);
    }
    .conejito-boton {
        width: 200px; /* Reducido en móviles */
    }
    .menu-btn {
        top: 25px; /* Bajado 2.5 mm desde 20px */
        left: 5px; /* Movido 2.5 mm a la izquierda desde 10px */
        width: 25px; /* Más pequeña */
        height: 25px;
    }
    .menu-close-btn {
        width: 25px;
        height: 25px;
        right: 10px; /* Pegado al borde derecho */
    }
    .menu-lateral {
        top: 29px; /* Subido 1 mm desde 32px */
        width: 200px;
        left: -200px;
        height: calc(100vh - 29px);
        visibility: hidden; /* Oculto por defecto */
    }
    .menu-lateral.active {
        left: 0;
        visibility: visible;
    }
    .menu-lateral a {
        font-size: 14px;
    }
    .registro-form {
        max-width: 300px;
    }
}