:root{
    --blue:#009dff;
}

*{
    margin:0; padding:0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    overflow-x: hidden;
    
}

section{
    padding:2rem;
    margin: 0 auto;
    max-width: 1200px;
}

.heading{
    text-align: center;
    font-size: 4rem;
    color:#333;
    padding:1rem;
    margin-top: 2rem; /* Reducido de 2rem a 1rem */
    margin-bottom: 2rem; /* Puedes ajustar este valor también si es necesario */
    background:rgba(0, 0, 0, 0.05);
}

.heading span{
    color:#4e59f1;
}

.btn-video-actualizar{
    display: inline-block;
    margin-top: 1rem;
    border-radius: 5rem;
    background:#333;
    color:#fff;
    padding:1rem 3rem;
    cursor: pointer;
    font-size: 1.8rem;
}

.btn-video-actualizar:hover{
    background:#4e59f1;
}

header{
    position: fixed;
    top:0; left:0; right:0;
    background:#ffffff;
    z-index: 1000;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

header .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}



   header .navbar a {
            font-size: 2rem;
            padding: 0 1.5rem;
            color: #666;
        
        }

        header .navbar a:hover, header .navbar a.active {
            color: #4e59f1; /* Color al pasar el mouse y cuando está activo */
        }

header .icons a{
    font-size: 2.5rem;
    color:#333;
    margin-left: 1.5rem;
}

header .icons a:hover{
    color:#4e59f1;
}

header #toggler{
    display: none;
}

header .fa-bars{
    font-size: 3rem;
    color:#333;
    border-radius: .5rem;
    padding:.5rem 1.5rem;
    cursor: pointer;
    border:.1rem solid rgba(0,0,0,.3);
    display: none;
}

.home-container{
    background:url(../images/home-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.home{
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.home .content{
    max-width: 55rem;
    margin-top: 35rem;
    margin-left: -135px;
}

.home .content h3{
    font-size: 6rem;
    color:#000000;
  
}

.home .content span{
    font-size: 3.5rem;
    color:#f2fe00;
    padding:1rem 0;
    line-height: 1.5;
}

.home .content p{
    font-size: 1.5rem;
    color:#ffffff;
    padding:1rem 0;
    line-height: 1.8;
    
}
.home .video-wrapper {
    position: absolute;
    top: 45%; /* Ajustar como sea necesario */
    left: 72%; /* Ajustar como sea necesario */
    transform: translate(-50%, -50%);
    width: 750px; /* Ancho fijo del video */
    height: 400px; /* Altura fija del video */
    box-shadow: 0 0 50px rgba(0, 0, 0, 1); /* Sombra con mismo tamaño que el video */
    z-index: 1; /* Para asegurarte de que el video queda debajo del contenido */
    overflow: hidden; /* Asegurarse de que cualquier video que se desborde sea recortado */
}

.home .video-wrapper video {
    width: 100%; /* Ancho del video al 100% del contenedor */
    height: 100%; /* Altura del video al 100% del contenedor */
    object-fit: cover; /* Cubre el área del contenedor sin perder la relación de aspecto */
}
.scroll-down-container {
    position: absolute; /* Se posiciona de forma absoluta respecto a su contenedor relativo más cercano */
    left: 50%; /* Centra el contenedor en el eje horizontal */
    bottom: 20px; /* Coloca el contenedor 20px arriba del borde inferior de su contenedor padre */
    transform: translateX(-50%); /* Ajusta el contenedor para que su centro esté exactamente en el medio */
  }
  
  /* Estilos para la flecha */
  .scroll-down-arrow {
    width: 60px; /* Ancho de la flecha */
    height: 60px; /* Altura de la flecha */
    border: 2px solid #FFD700; /* Borde sólido con un color dorado y 2px de grosor */
    border-radius: 50%; /* Hace que la flecha sea circular */
    position: relative; /* Posiciona la flecha de manera relativa a su posición original */
    overflow: hidden; /* Oculta cualquier contenido que se desborde de la caja de la flecha */
    cursor: pointer; /* Cambia el cursor a un puntero cuando pasa sobre la flecha */
    transition: all 0.3s ease; /* Efecto de transición suave para todos los cambios de estilo */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); /* Sombra alrededor de la flecha con un color dorado semitransparente */
    animation: bounce 2s infinite; /* Animación que hace que la flecha 'rebote' indefinidamente cada 2 segundos */
  }
  
  /* La parte de la flecha que crea la línea vertical */
  .scroll-down-arrow::before {
    content: ''; /* Requerido para generar una caja pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento de manera absoluta dentro de la flecha */
    top: 35%; /* Posiciona la línea vertical a un 35% desde la parte superior de la flecha */
    left: 50%; /* Centra la línea vertical horizontalmente dentro de la flecha */
    width: 2px; /* Grosor de la línea vertical */
    height: 15px; /* Altura de la línea vertical */
    background-color: #f1f1f1; /* Color dorado para la línea vertical */
    transform: translateX(-50%); /* Alinea la línea vertical exactamente en el centro horizontalmente */
  }
  
  /* La parte de la flecha que crea la punta en ángulo */
  .scroll-down-arrow::after {
    content: ''; /* Requerido para generar una caja pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento de manera absoluta dentro de la flecha */
    top: 50%; /* Posiciona la punta a un 50% desde la parte superior de la flecha */
    left: 50%; /* Centra la punta horizontalmente dentro de la flecha */
    width: 15px; /* Anchura de la base de la punta */
    height: 15px; /* Altura de la base de la punta */
    border-left: 2px solid #ffffff; /* Lado izquierdo del triángulo con un borde sólido dorado */
    border-bottom: 2px solid #ffffff; /* Lado inferior del triángulo con un borde sólido dorado */
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  /* Keyframes para la animación 'bounce' que hace que la flecha se mueva hacia arriba y hacia abajo */
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0); /* Posición inicial y final */
    }
    40% {
      transform: translateY(-20px); /* Mueve la flecha 20px hacia arriba */
    }
    60% {
      transform: translateY(-10px); /* Mueve la flecha 10px hacia arriba */
    }
  }
  
 /* Efecto al pasar el ratón sobre la flecha */
.scroll-down-arrow:hover {
    width: 70px; /* Aumenta el ancho al pasar el ratón */
    height: 70px; /* Aumenta la altura al pasar el ratón */
    border-width: 3px; /* Hace el borde más grueso al pasar el ratón */
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.75); /* Intensifica la sombra al pasar el ratón */
  }
  .btn-logout {
    position: relative;
    top: -2px; /* Posición ajustada para alineación */
    right: -10px; /* Ajuste de posición según necesidades de diseño */
    padding: 5px 10px; /* Más espacio interno para un aspecto más grande */
    background-color: #ff4e50; /* Un rojo más vibrante para captar la atención */
    color: white; /* Mantenemos el texto blanco para contraste */
    border: none; /* Sin bordes para un diseño más limpio */
    border-radius: 10px; /* Bordes más redondeados para un aspecto moderno */
    cursor: pointer; /* Cursor de mano para indicar acción */
    font-size: 1rem; /* Tamaño de texto estándar */
    font-weight: bold; /* Texto en negrita para destacar */
    text-transform: uppercase; /* Texto en mayúsculas para consistencia */
    margin: 5px; /* Margen para asegurar espacio alrededor del botón */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suavizada para color y transformación */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
}

.btn-logout:hover, .btn-logout:focus {
    background-color: #d32f2f; /* Rojo oscuro para el estado hover/focus */
    outline: none; /* Eliminamos el contorno en focus para limpieza */
    transform: translateY(-2px); /* Efecto de "levantarse" al pasar el mouse o enfocar */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover para efecto 3D */
}


/* Estilos para el contenedor de iconos y usuario */
.icons {
    /* Tus estilos existentes... */
    display: flex; /* Si quieres que todos los elementos estén en línea */
    align-items: center;
    gap: 5px; /* Espacio entre los elementos */
    
}
.user-info {
    display: flex;
    flex-direction: column; /* Apila el nombre y el estado en columna */
    align-items: flex-start; /* Alinea los elementos al inicio */
}

/* Estilo para el nombre de usuario */
.user-name {
    max-width: 120px; /* Ajusta según necesidades */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}


/* Estilo para el estado del usuario (en línea) */
.user-status {
    color: green;
    position:relative;
    top: -1px;
    left:1px;
}




/* Contenedor principal de productos */
.products .box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem; /* Espaciado entre cajas */
    margin: auto;
    max-width: 1200px; /* Ancho máximo del contenedor */
    padding: 2rem;
}

/* Caja individual de producto */
.products .box-container .box {
    position: relative;
    width: 320px;
    background: linear-gradient(135deg, #ffffff, #f9fafc); /* Fondo degradado suave */
    border-radius: 20px; /* Bordes más redondeados */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Sombra pronunciada */
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 500px; /* Altura ajustada */
    padding: 1.5rem;
    z-index: 0; /* Para efectos decorativos */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Efecto hover en la caja */
.products .box-container .box:hover {
    transform: translateY(-20px); /* Elevar la caja */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); /* Sombra más fuerte */
    background: linear-gradient(145deg, #e0e7ff, #ffffff); /* Cambio de fondo dinámico */
}

/* Decoraciones en el fondo */
.products .box-container .box::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(78, 89, 241, 0.4), transparent);
    border-radius: 50%;
    z-index: -1;
    transition: all 0.5s ease;
}

.products .box-container .box:hover::before {
    transform: scale(1.5) rotate(45deg);
}

/* Sección de la imagen */
.products .box-container .box .image {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.products .box-container .box .image img {
  width: 90%; /* Utiliza un ancho del 100% del contenedor de la imagen */
  height: 150px; /* Altura fija para todas las imágenes */
  object-fit: contain; /* Esto asegura que la imagen se ajuste dentro del contenedor sin distorsionarse */
  object-position: center; /* Centra la imagen dentro del contenedor */
}

/* Efecto hover en la imagen */
.products .box-container .box:hover .image img {
    transform: scale(1.15) rotate(5deg); /* Zoom y rotación */
}

/* Título del producto */
.products .box-container .box .content h3 {
    font-size: 1.8rem; /* Tamaño del título */
    color: #2c3e50; /* Color oscuro */
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    text-transform: uppercase; /* Texto en mayúsculas */
    transition: color 0.4s ease, transform 0.4s ease;
}

.products .box-container .box:hover .content h3 {
    color: #4e59f1; /* Color dinámico */
    transform: translateY(-5px); /* Movimiento hacia arriba */
}

/* Descripción del producto */
.products .box-container .box .content p {
    font-size: 1.2rem; /* Tamaño de fuente aumentado */
    color: #666; /* Color gris */
    line-height: 1.8; /* Más espacio entre líneas */
    margin-bottom: 2rem;
    padding: 0 1rem;
    text-align: center;
    font-weight: 400; /* Peso del texto */
    letter-spacing: 0.3px; /* Espaciado entre letras */
    font-family: 'Roboto', sans-serif; /* Tipografía moderna */
    transition: color 0.3s ease, opacity 0.3s ease;
}

.products .box-container .box:hover .content p {
    color: #333; /* Texto más oscuro en hover */
    opacity: 1;
}

/* Botón de acción */
.products .box-container .box .edit-button {
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #4e59f1, #6a7dfb);
    color: #fff;
    border-radius: 50px; /* Botón más llamativo */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 15px rgba(78, 89, 241, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

.products .box-container .box .edit-button:hover {
    transform: scale(1.1); /* Ampliación */
    box-shadow: 0 10px 20px rgba(78, 89, 241, 0.6);
    background: linear-gradient(135deg, #6a7dfb, #4e59f1);
}


.products .box-container .box:hover .edit-button::before {
    bottom: -15px;
    transform: scale(1.2);
    background: rgba(78, 89, 241, 0.3);
}



/* Estilo para el icono de añadir servicio */
.add-service-box .image i.fa-plus {
  color: #4e59f1; /* Color del icono */
  font-size: 5rem; /* Tamaño del icono */
  text-align: center; /* Centrado horizontal del icono */
  transition: transform 0.3s ease; /* Animación suave al cambiar el tamaño */
  margin-top: 250px; /* Añade margen en la parte superior para mover el icono hacia abajo */
}

.add-service-box:hover .image i.fa-plus {
  transform: scale(1.1); /* Aumenta el tamaño del icono ligeramente al pasar el mouse por encima */
}

/* Ajustes adicionales para el contenedor .image si es necesario */
.add-service-box .image {
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  height: 100px; /* Ajusta esto según tus necesidades */
}









/* Estilos para footer de la pagina */
.footer .credit{
    text-align: center;
    padding:1.5rem;
    margin-top: 1.5rem;
    padding-top: 2.5rem;
    font-size: 2rem;
    color:#333;
    border-top: .1rem solid rgba(0,0,0,.1);
    /* padding-bottom: 8rem; */
}



.footer .credit span{
    color:#4e59f1;
}
.brand-container {
    display: flex; /* Esto alinea horizontalmente los elementos */
    align-items: center; /* Esto centra los elementos verticalmente */
    background-color: #000; /* El color de fondo */
    color: #fff; /* El color del texto */
    padding: 0.5rem; /* Un poco de padding alrededor del texto y la imagen */
  }
  
  .brand-container .logo {
    height: 50px; /* Ajusta esto según el tamaño que necesites */
    margin-right: 0.5rem; /* Añade un poco de margen entre la imagen y el texto */
  }



/* ESTILOS NAVBAR Y USUARIOS  */
@media (max-width:991px){
    
    html{
        font-size: 55%;
    }

    .home{
        background-position: left;
    }

}



@media (max-width: 768px) {
    header .fa-bars {
        display: block;
    }

    header .navbar {
        position: absolute;
        top: 100%; 
        left: 0; 
        right: 0;
        background: #eee;
        border-top: .1rem solid rgba(0, 0, 0, .1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    header #toggler:checked ~ .navbar {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    header .navbar a {
        margin: 1.5rem;
        padding: 1.5rem;
        background: #fff;
        border: .1rem solid rgba(0, 0, 0, .1);
        display: block;
    }


}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {

    .icons {
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: space-between; /* Asegura que los elementos no se solapen */
    }

    .user-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Mantiene el nombre y el estado alineados */
        max-width: 100px; /* Fija un ancho máximo para el contenedor de la información del usuario */
    }

    /* Estilo para el nombre de usuario en móviles */
    .user-name {
        max-width: 32px; /* Limita el ancho del nombre de usuario */
        white-space: nowrap; /* Evita que el texto salte a la siguiente línea */
        overflow: hidden; /* Oculta el texto que sobrepasa el ancho */
        text-overflow: ellipsis; /* Añade "..." al final del nombre largo */
        display: inline-block;
        font-size: 0.9rem;
    }

    /* Estilo para el estado del usuario en móviles */
    .user-status {
        font-size: 0.8rem;
        color: green;
        position: relative;
        top: 0;
        left: 0;
    }

}




@media (max-width: 768px) {

    html{
        font-size: 50%;
    }

    .heading{
       
       
    }
    .home-container {
        display: none; /* Oculta la clase home-container */
    }

    .home .content {
        display: none; /* Oculta la clase content dentro de .home */
    }

    .home .video-wrapper {
        display: none; /* Oculta la clase video-wrapper dentro de .home */
    }

    .home .content span {
        display: none; /* Oculta los spans dentro de .content en .home */
    }

    .home .content p {
        display: none; /* Oculta los párrafos dentro de .content en .home */
    }
    
    .home .scroll-down-arrow {
        display: none; /* Oculta la flecha scroll-down-arrow dentro de .home */
    }
    
    .products {
    margin-top: 50px; /* Ajusta este valor según sea necesario */
}

}


@media (max-width: 1366px) {
    .home-container {
        background:url(../images/home-bg.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        max-width: 100vw; /* Asegura que ocupe todo el ancho de la pantalla */
        height: 100vh; /* Ajusta para ocupar el 100% del alto de la ventana visible */
    }

    .home {
        display: flex;
        align-items: center;
        min-height: 100vh;
    }

    .home .content {
        max-width: 55rem;
        margin-top: 30rem; /* Ajusta el margen superior para centrar mejor en pantallas más pequeñas */
        margin-left: 0; /* Ajuste para centrar mejor el contenido */
    }

    .home .content h3 {
        font-size: 5rem; /* Reducido para pantallas más pequeñas */
        color: #000000;
    }

    .home .content span {
        font-size: 3rem; /* Ajuste de tamaño de texto */
        color: #f2fe00;
        padding: 1rem 0;
        line-height: 1.5;
    }

    .home .content p {
        font-size: 1.3rem; /* Reducido para mejor legibilidad en pantallas más pequeñas */
        color: #ffffff;
        padding: 1rem 0;
        line-height: 1.8;
    }

    .home .video-wrapper {
        position: absolute;
        top: 42%; /* Ajusta la posición del video */
        left: 73%; /* Centra el video horizontalmente */
        transform: translate(-50%, -50%);
        width: 700px; /* Ajusta el ancho del video para pantallas más pequeñas */
        height: 350px; /* Ajusta la altura del video */
        box-shadow: 0 0 40px rgba(0, 0, 0, 1);
        z-index: 1;
        overflow: hidden;
    }

    .home .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}