@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* VARIABLES */
:root{
    --azul: #007BFF;
    --amarillo: #f1c40f;
    --blanco: #f9f9f9;
    --negro: #272727;
    --gris: #333;
}

/* Estilos globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
}

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--blanco);
    color: #333;
}

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}

.progress-bar {
    height: 2.5px;
    background: var(--amarillo);
    width: 0%;   
}

/* Estilos de la navegación */
.menu-toggle {
    display: none; /* Oculto en pantallas grandes */
    position: absolute;
    top: 15px; /* Ajusta la posición vertical */
    right: 20px; /* Ajusta la posición horizontal */
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    z-index: 10; /* Asegúrate de que esté por encima del resto del contenido */
}

.navbar {
    background-color: var(--negro);    
    height: 60px;
    position: fixed; 
    top: 0; 
    left: 0;
    right: 0;
    z-index: 1000; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor de la barra de progreso */
.progress-container {
    width: 100%; /* Ocupa todo el ancho */
    position: absolute; 
    top: 0; /* Posiciona la barra de progreso en la parte superior */
    left: 0;
}

/* Barra de progreso */
.progress-bar {
    height: 1.5px;
    background: var(--amarillo);
    width: 0%;   
}

.container-menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacia el logo y el menú */
    width: 100%; /* Hace que el contenedor ocupe todo el ancho */
    max-width: 1200px; /* Opcional: limita el ancho máximo */
}

.logo img {
    max-height: 200px; /* Ajusta la altura del logo para que esté centrado */
    width: auto; /* Mantiene la proporción del logo */
}

.logos img{
    display: none;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.nav-links a {
    color: var(--blanco);
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: color .10s ease; /* Agrega transiciones */
}

li {
    position: relative;
  }
  
li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--blanco);
    transform-origin: bottom right;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}
  
li:hover::before {
    transform-origin: bottom left;
    transform: scaleX(1);
}

/* Hero Section */
.hero {
    height: 100vh;
    background-color: var(--negro);
    color: var(--blanco);
    display: flex;    
    align-items: center;
    justify-content: center;
}

.animated-text{
    font-size: 34px;
    font-weight: 600;
    min-width: 280px;
}

.animated-text span{
    position: relative;
}

.animated-text span::before{
    content: "";
    color: var(--amarillo);
    animation: words 12s infinite;
}

.animated-text span::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color: var(--negro);
    border-left: 2px solid var(--amarillo);
    right: -5px;
    animation: cursor 1s infinite, typing 20s steps(50) infinite;
}

@keyframes cursor {
    to{
        border-left: 2px solid var(--negro);
    }
}

@keyframes words {
    0%, 33.33% {
        content: "ELÉCTRICAS";
    }
    33.34%, 66.66% {
        content: "TECNOLÓGICAS";
    }
    66.67%, 100% {
        content: "ENERGÉTICAS";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }
}

.hero-super {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
    height: 100%;
}

span{
    color: var(--amarillo);
}

.hero-content {
    flex: 1; 
}

.hero h1 {
    font-size: 40px;
    margin-bottom: 10px;
    margin-right: 500px;    
}

.hero p {
    font-size: 20px;
    margin-bottom: 40px;
    margin-right: 500px;
    line-height: 1.5;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 1px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.btn-primary {
    background-color: var(--azul);
    color: var(--blanco);
    transition: .5s, color .10s;
    -webkit-transition: .5s, color .10s;
    -moz-transition: .5s, color .10s;
}

.btn-primary:hover {
    background-color: var(--blanco);
    color: var(--azul);
    border-color: var(--azul);
    box-shadow: 0 5px 5px 0 #000000,0 5px 5px 0 #000000;
    transform: translate(5px,0px);
    -webkit-transform: translate(5px,0px);
    -moz-transform:translate(5px,0px);
}

.btn-secondary {
    background-color: var(--amarillo);
    color: var(--blanco);
    transition: .5s, color .10s;
    -webkit-transition: .5s, color .10s;
    -moz-transition: .5s, color .10s;
}

.btn-secondary:hover {
    background-color: var(--blanco);
    color: var(--amarillo);
    border-color: var(--amarillo);
    box-shadow: 0 5px 5px 0 var(--negro),0 5px 5px 0 var(--negro);
    transform: translate(5px,0px);
    -webkit-transform: translate(5px,0px);
    -moz-transform:translate(5px,0px);
}

.pentagon-wrapper {
    flex: 2; 
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    height: 100vh;
    overflow: hidden;
}
  
.pentagon-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}  

.pentagon-imagePhone{
    display: none;
}

/* Sección Nosotros */
.about {
    height: 100vh;
    padding: 100px 0; /* Ajustes para pantallas pequeñas */
    display: flex;
    align-items: center; /* Centra horizontalmente */
    background-color: var(--blanco);
}

.about-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */    
}

.about-logo{
    width: 100%;
}

.about-text {
    flex: 2;
    padding: 20px; /* Ajustes para pantallas pequeñas */
}

.about-text .btn {
    margin-top: 30px; 
}

.about-text h2 {
    font-size: 38px;
    margin-bottom: 20px;
    margin-right: 20px;
}

.about-text p {
    line-height: 1.5;
    font-size: 22px;
}

/* Sección de Servicios */
.services {
    height: 100vh;
    padding: 20px 20px;
    background-color: var(--negro);
    text-align: center;
    position: center;

    display: flex;    
    align-items: center;
    justify-content: center;
}

.services h2 {
    text-transform: uppercase;
    text-align: center;
    padding-top: 5%;
    margin-bottom: 5%;
    position: relative;
    font-size: 36px;
    color: var(--blanco);
}

.services h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: var(--amarillo);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajuste automático */
    grid-gap: 20px;
}

.service-item {
    padding: 25px 10px;
    text-align: center;
    border-radius: 5px;
    transition: transform .5s ease-in-out;
    cursor: pointer;
}

.service-item:hover {
    transform: scale(1.1);
    background: var(--gris);
}

.service-item h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--blanco);
}

.service-item p {
    color: var(--blanco);
}

.service-item img {
    max-width: 40px; 
    display: block;
    margin: 0 auto 20px;
}

/* Contenedor de botones sociales */
.social-buttons {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 10px;
}

/* Contenedor de íconos en una sola fila */
.icons-row {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

/* Estilo para cada botón social */
.social-button img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
    border-radius: 50%;
    padding: 5px;
}

/* Efecto hover para los íconos */
.social-button:hover img {
    transform: scale(1.5);
}

/* Contenedor del bloque de texto */
.contact-info {
    text-align: left;
    margin-top: 10px;
}

/* Estilos de texto */
.contact-info h3 {
    font-size: 18px;
    margin: 0;
    color: var(--negro);
}

.contact-info p {
    font-size: 18px;
    margin: 5px 0;
    color: var(--negro);
}

.slideshow {
    display: flex;
    height: 100vh;
    position: relative;
    max-width: 100%;
    margin: auto;
    padding: 50px 20px;
    text-align: Left;
    background-color: var(--blanco);    
}

.slideshow-container {
    flex: 1;
    position: relative;
    max-width: 600px; 
    margin: auto;
}

.mySlides {
    display: none; 
    font-size: 24px;
    color: #333;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 50px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.dot:hover {
    background-color: var(--amarillo); 
}

.active {
    background-color: var(--amarillo); 
}

.contact-form-container {
    flex: 2;
    background-color: var(--negro); 
    padding: 20px;
    margin-top: 30px;
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--blanco);
}

.contact-form-container h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.contact-form-container form {
    display: flex;
    flex-direction: column;
}

.contact-form-container label {
    margin: 10px 0 5px;
    font-weight: bold;
    text-align: left;
}

.contact-form-container input,
.contact-form-container textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 1px;
    font-size: 16px;
    width: 100%;
}

.contact-form-container button {
    background-color: var(--azul);
    color: var(--blanco);
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form-container button:hover {
    background-color: var(--blanco);
}

.privacy-policy {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--blanco); 
}

.privacy-policy a {
    color: var(--blanco);
}

.privacy-policy a:hover {
    color: #bbbbbb98;
}

/* Footer */
.pie {
    background-color: var(--blanco);
    color: var(--negro);
    padding: 20px 0;
    text-align: center;
}

/* Ocultar secciones inicialmente */
.hidden {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 480px) {
    /*Inicio de Navegación*/
    /* Barra de navegación */
    .navbar {
        width: 100%; /* Asegura que ocupe todo el ancho */
        background-color: var(--negro); /* Fondo oscuro para contraste */
        padding: 10px 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .logo img{
        display: none;
    }

    /* Logo */
    .logos img {
        display: flex;
        margin-top: 10px;
        margin-left: 10px;
        max-height: 45px; /* Ajusta la altura del logo para que esté centrado */
        width: auto; /* Mantiene la proporción del logo */
        transition: transform 0.3s ease-in-out; /* Transición suave al hacer hover */
    }

    .logos img:hover {
        transform: scale(1.1); /* Efecto de zoom suave al pasar el cursor */
    }

    /* Contenedor del menú */
    .container-menu {
        display: flex;
        justify-content: space-between; /* Alinea el logo y el menú */
        align-items: center;
    }

    /* Menú de navegación */
    .nav-links {
        display: none; /* Esconde los enlaces inicialmente */
        flex-direction: column; /* Enlaces apilados */
        background-color: var(--negro); /* Fondo oscuro para el menú */
        width: 100%; /* Ancho completo */
        padding: 20px 0;
        position: absolute; /* El menú se posiciona sobre el contenido */
        top: 100%; /* Justo debajo de la barra de navegación */
        left: 0;
        z-index: 100; /* Para asegurarse de que el menú esté por encima */
        opacity: 0; /* Inicialmente invisible */
        transition: opacity 0.3s ease; /* Transición suave para la aparición */
    }

    /* Enlaces en el menú */
    .nav-links li {
        text-align: left;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Separador sutil entre los enlaces */
    }

    .nav-links a {
        color: var(--blanco); /* Color blanco para los enlaces */
        text-decoration: none; /* Eliminar subrayado */
        font-size: 16px; /* Tamaño adecuado */
        display: block;
        transition: color 0.3s ease; /* Transición suave para color */
    }

    .nav-links a:hover {
        color: var(--azul); /* Color al pasar el mouse */
    }

    /* Icono del menú */
    .menu-toggle {
        display: block; /* Asegura que el icono de menú sea visible */
        font-size: 28px; /* Aumenta el tamaño del icono */
        color: var(--blanco); /* Color del icono */
        cursor: pointer;
        transition: transform 0.3s ease; /* Transición suave para el icono */
    }

    .menu-toggle:hover {
        transform: rotate(90deg); /* Efecto de giro suave al hacer hover */
    }

    /* Estado activo del menú */
    .nav-links.active {
        display: flex; /* Muestra los enlaces cuando se activa el menú */
        opacity: 1; /* Hace visible el menú */
    }
    /* Fin de navegación */
    /* Inicio de sección principal*/
    .pentagon-wrapper{
        margin-right: 10px;
        width: 80%;
        height: 50%;
    }
    
    .pentagon-image{
        display: none;
    };
    
    .pentagon-imagePhone {
        display: block; /* Asegura que esté visible */
    }

    .pentagon-imagePhone {
        display: block;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    } 

    .hero h1 {
        font-size: 30px; /* Reduce el tamaño del título */
        margin-right: 20px;
    }

    .hero p {
        font-size: 15px; /* Reduce el tamaño del texto */
        margin-right: 20px;
    }

    .hero .btn {
        padding: 10px 20px; /* Ajusta el tamaño de los botones */
        font-size: 12px;
    }
    /*Fin de sección principal*/
    /*Inicio de sección nosotros*/
    #nosotros{
        display: flex;
        flex-direction: column; /* Cambia a columna */
        gap: 10px;
    }

    .about-text{
        margin-left: auto;
        display: flex;
        flex-direction: column; /* Cambia a columna */
        gap: 10px;
        
    }

    .about-text h2{
        font-size: 26px; /* Reduce el tamaño del título */
        margin-right: 20px;
        text-align: right;
    }

    .about-text p {
        font-size: 18px; /* Reduce el tamaño del texto */
        margin-right: 20px;
        text-align: right;
    }

    .about-text .btn {
        margin-top: 30px; 
        margin-left: auto;
        margin-right: 20px;
        font-size: 12px;
    }
    

    /*Fin de sección nosotros*/
    /*Inicio de sección servicios*/
    .services {
        height: auto; /* Permitir que la altura crezca según el contenido */
        padding: 15px 10px; /* Reducir el relleno para dispositivos pequeños */
        background-color: var(--negro); /* Mantener el color de fondo */
        text-align: center; /* Centrar el contenido */
        
        display: flex;
        flex-direction: column; /* Cambiar a columna para apilar los elementos */
        align-items: center;
        justify-content: flex-start; /* Ajustar elementos hacia el inicio */
        gap: 20px; /* Añadir espacio entre los elementos */
    }
    .services h2{
        font-size: 26px; /* Reduce el tamaño del título */
        margin-right: 20px;
    }
    /*Fin de sección servicios*/
    /*Inicio de sección contacto*/
    #contacto {
        padding: 10px;
        height: auto;
        margin-top: 50px;
    }
    .contact-form-container {
        padding: 15px;
        max-width: 100%; /* Asegura que no se desborde */
    }    
    .about-content {
        display: flex;
        flex-direction: row; /* Cambia a columna */
        gap: 10px;
    }

    .mySlides p{
        font-size: 17px;
    }

    .contact-info p{
        font-size: 17px;
    }

    /*Fin de sección contacto*/

    .pie {
        background-color: var(--blanco); /* Mantener el color de fondo */
        color: var(--negro); /* Mantener el color del texto */
        padding: 15px 10px; /* Reducir el padding para pantallas pequeñas */
        text-align: center; /* Centrar el texto */
        font-size: 14px; /* Ajustar el tamaño de fuente para dispositivos pequeños */
        line-height: 1.4; /* Mejorar la legibilidad */
        word-wrap: break-word; /* Asegurarse de que el texto largo no se desborde */
    }

    .pie p{
        font-size: 12px;
    }

    #backToTop{
        display: none;
    }

}