/* --- VARIABLES DE DISEÑO --- */
:root {
    --oscuro-fondo: #0f172a;      /* Variable: Color de fondo principal (Azul muy oscuro) */
    --oscuro-secundario: #1e293b; /* Variable: Color secundario para tarjetas/nav (Gris azulado) */
    --verde-matech: #22c55e;      /* Variable: Color de acento (Verde vibrante) */
    --texto-blanco: #f8fafc;      /* Variable: Color de texto principal (Blanco casi puro) */
    --texto-gris: #94a3b8;        /* Variable: Color de texto secundario (Gris claro) */
}

/* --- ESTILOS GENERALES --- */
* {
    margin: 0;                    /* Elimina márgenes por defecto en todos los elementos */
    padding: 0;                   /* Elimina relleno por defecto en todos los elementos */
    box-sizing: border-box;       /* Incluye padding y border en el cálculo del ancho/alto total */
    font-family: 'Inter', sans-serif; /* Define la tipografía global */
}

body {
    background-color: var(--oscuro-fondo); /* Aplica el color de fondo definido en variables */
    color: var(--texto-blanco);            /* Aplica el color de texto principal */
    line-height: 1.6;                      /* Altura de línea para mejorar legibilidad */
    overflow-x: hidden;                    /* Evita el scroll horizontal */
}

/* --- FONDO CON PATRÓN DE CIRCUITO IMPRESO (PCB) --- */
body::before {
    content: "";                  /* Requerido para crear el pseudo-elemento */
    position: fixed;              /* Fijo en el fondo para que no se mueva al hacer scroll */
    top: 0;
    left: 0;
    width: 100vw;                 /* Ocupa todo el ancho de la pantalla */
    height: 100vh;                /* Ocupa todo el alto de la pantalla */
    z-index: -1;                  /* Lo envía detrás de absolutamente todo */
    
    /* Imagen de fondo desde tu galería */
    background-image: url("imagenes/background.png"); /* Reemplaza con el nombre real de tu archivo */
    
    background-size: cover;       /* Hace que la imagen se estire para cubrir toda la pantalla */
    background-position: center;  /* Centra la imagen de fondo */
    opacity: 0.3;                 /* Aumenta este valor (ej. 0.4, 0.6 o 1) para aclarar la imagen */
    pointer-events: none;         /* Evita que interfiera con los clics en la página */
}

/* --- NAVEGACIÓN --- */
nav {
    background-color: rgba(15, 23, 42, 0.95); /* Fondo semitransparente para la barra */
    padding: 0.1rem 5%;           /* Mínimo espaciado vertical para que el logo ocupe casi todo */
    display: flex;                /* Usa Flexbox para alinear elementos */
    justify-content: space-between; /* Separa logo y enlaces a los extremos */
    align-items: center;          /* Centra verticalmente los elementos */
    position: fixed;              /* Fija la barra en la parte superior al hacer scroll */
    width: 100%;                  /* Ocupa todo el ancho */
    top: 0;                       /* Posición superior 0 */
    z-index: 1000;                /* Asegura que esté por encima de otros elementos */
    border-bottom: 1px solid var(--oscuro-secundario); /* Línea sutil inferior */
}

.logo {
    display: flex;                /* Flexbox para alinear imagen y texto del logo */
    align-items: center;          /* Centrado vertical */
    gap: 15px;                    /* Espacio entre el logo y el eslogan */
}

/* Estilo para el logo subido */
.logo img {
    height: 65px;                 /* Achicamos el logo para reducir la altura total del menú */
    width: auto;                  /* Ancho automático proporcional */
}

.nav-links {
    display: flex;                /* Flexbox para poner los enlaces en fila */
    list-style: none;             /* Quita los puntos de la lista */
    gap: 20px;                    /* Espacio entre cada enlace */
}

.nav-links a {
    text-decoration: none;        /* Quita el subrayado de los enlaces */
    color: var(--texto-blanco);   /* Color blanco para el texto */
    font-weight: 500;             /* Grosor de fuente medio */
    transition: color 0.3s;       /* Suaviza el cambio de color al pasar el mouse */
    cursor: pointer;              /* Cambia el cursor a mano */
}

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

/* --- SECCIONES --- */
section {
    padding: 100px 5% 60px;       /* Padding superior compensa el nav fixed (100px) */
    min-height: 100vh;            /* Altura mínima del 100% de la ventana */
    display: none;                /* Oculta todas las secciones por defecto (SPA) */
}

section.active {
    display: block;               /* Muestra solo la sección que tenga la clase .active */
}

/* --- CARRUSEL INICIO --- */
.carousel {
    position: relative;           /* Contexto de posicionamiento para los slides absolutos */
    height: 500px;                /* Altura fija del carrusel */
    width: 100%;                  /* Ancho total */
    overflow: hidden;             /* Oculta lo que se salga del contenedor */
    border-radius: 15px;          /* Bordes redondeados */
    margin-bottom: 40px;          /* Margen inferior */
}

.slide {
    position: absolute;           /* Posición absoluta para superponer slides */
    width: 100%;                  /* Ancho total */
    height: 100%;                 /* Alto total */
    opacity: 0;                   /* Invisible por defecto */
    transition: opacity 1s ease-in-out; /* Transición suave de opacidad */
    display: flex;                /* Flexbox para centrar contenido */
    align-items: center;          /* Centrado vertical */
    justify-content: center;      /* Centrado horizontal */
    text-align: center;           /* Texto centrado */
    background-size: cover;       /* La imagen cubre todo el fondo */
    background-position: center;  /* La imagen se centra */
}

.slide.active {
    opacity: 1;                   /* Hace visible el slide activo */
}

.slide-content {
    background: rgba(0, 0, 0, 0.6); /* Fondo semitransparente negro para leer texto */
    padding: 30px;                /* Espaciado interno */
    border-radius: 10px;          /* Bordes redondeados */
    max-width: 80%;               /* Ancho máximo del contenido */
}

.slide h2 {
    font-size: 2.5rem;            /* Tamaño grande para el título */
    color: var(--verde-matech);   /* Color verde de acento */
    margin-bottom: 10px;          /* Espacio debajo del título */
}

/* --- GRILLAS (PROYECTOS Y SERVICIOS) --- */
.grid {
    display: grid;                /* Activa CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas: mínimo 300px, máximo 1 fracción */
    gap: 25px;                    /* Espacio entre celdas */
    margin-top: 30px;             /* Margen superior */
}

.card {
    background: var(--oscuro-secundario); /* Fondo de la tarjeta */
    border-radius: 12px;          /* Bordes redondeados */
    overflow: hidden;             /* Recorta contenido que sobresalga (ej. imagen) */
    transition: transform 0.3s;   /* Transición para efecto hover */
    border: 3px solid transparent; /* Borde transparente inicial */
}

.card:hover {
    transform: translateY(-25px);  /* Mueve la tarjeta hacia arriba al pasar mouse */
    border-color: var(--verde-matech); /* Pone borde verde al pasar mouse */
}

.card img {
    width: calc(100% - 2rem); /* Reduce el ancho compensando 1rem izq + 1rem der */
    height: calc(200px - 2rem); /* Reduce el alto compensando 1rem arriba + 1rem abajo */
    object-fit: contain; /* Cambiado a contain para que muestre la imagen entera sin recortes */
    margin: 1rem; /* Separa la imagen de los bordes de la tarjeta */
    background-color: var(--oscuro-fondo);
    border-radius: 15px; /* Ajusta este valor a tu gusto (ej. 15px, 20px) */
}

/* Imágenes cuadradas: Fondo opaco ocupando el espacio rectangular */
.card img.img-cuadrada {
    background-color: var(--texto-blanco); /* Aplica un fondo claro */
    border-radius: 20px; /* Un redondeo más suave luce mejor al estar dentro de la tarjeta */
    width: calc(100% - 2rem); /* Reduce el ancho para compensar el margen */
    height: calc(200px - 2rem); /* Reduce el alto para no deformar la tarjeta */
    margin: 1rem; /* Separa la imagen de los bordes de la tarjeta */
    padding: 0; /* Eliminado para que la imagen alcance el límite superior/inferior exacto */
    object-fit: contain; /* Evita que la imagen cuadrada se recorte a los lados */
}

.card-body {
    padding: 1rem;                /* Espaciado interno del contenido */
}

.card-body h3 {
    color: var(--verde-matech);   /* Título en verde */
    margin-bottom: 10px;          /* Espacio inferior */
}

/* --- FOOTER --- */
.footer {
    background-color: rgba(15, 23, 42, 0.95); /* Mismo estilo semitransparente que el head */
    border-top: 1px solid var(--oscuro-secundario); /* Línea divisoria sutil */
    padding: 40px 5%;             /* Espaciado interno amplio */
    display: flex;                /* Flexbox para alinear en columnas */
    justify-content: space-between; /* Separa las columnas equitativamente */
    flex-wrap: wrap;              /* Permite que colapsen en pantallas chicas */
    gap: 30px;                    /* Espacio entre columnas */
    margin-top: 60px;             /* Separación de la sección anterior */
}

.footer-col {
    flex: 1;                      /* Las tres columnas ocupan partes iguales */
    min-width: 200px;             /* Ancho mínimo antes de pasar abajo en celulares */
    display: flex;
    flex-direction: column;       /* Contenido apilado hacia abajo */
    gap: 15px;                    /* Espacio entre renglones */
}

.footer-col img {
    height: 200px;                /* Aumentamos el tamaño del logo en el footer */
    width: auto;
    align-self: flex-start;       /* Alineado a la izquierda */
    margin-top: -30px;            /* Reduce el espacio transparente de arriba */
    margin-bottom: -20px;         /* Reduce el espacio transparente de abajo */
    margin-left: -15px;           /* Mueve la imagen a la izquierda para alinearla con los textos */
}

/* Eslogan debajo del logo en el footer */
.slogan-footer {
    color: var(--texto-gris);     /* Color gris para que sea sutil y acompañe al logo */
    font-size: 1.1rem;            /* Un tamaño un poco más grande que el texto normal */
    font-weight: 300;             /* Letra más fina */
    font-style: italic;           /* Letra en cursiva para darle un toque distintivo */
    margin-top: -15px;            /* Sube el texto para acercarlo al logo compensando el gap */
    margin-bottom: 0;             /* Elimina el margen por defecto del párrafo */
}

.footer-col h4 {
    color: var(--verde-matech);   /* Títulos de las columnas en verde */
    font-size: 1.2rem;
}

/* --- REDES SOCIALES FOOTER --- */
.social-icons {
    display: flex;                /* Acomoda los iconos en fila */
    gap: 15px;                    /* Espacio entre los iconos */
    margin-top: 10px;             /* Separación con el texto de arriba */
}

.social-icons a {
    display: inline-block;        /* Permite aplicar transformaciones al enlace */
    transition: transform 0.3s;   /* Suaviza el efecto hover */
}

.social-icons a:hover {
    transform: scale(1.15) translateY(-3px); /* Aumenta tamaño y sube ligeramente al pasar el cursor */
}

.social-icons img {
    width: 70px;                  /* Aumentamos el ancho de los loguitos */
    height: 70px;                 /* Aumentamos el alto de los loguitos */
    object-fit: contain;          /* Evita que se deformen */
}

.footer-col ul {
    list-style: none;             /* Sin viñetas */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col ul li a {
    text-decoration: none;
    color: var(--texto-blanco);
    cursor: pointer;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: var(--verde-matech);   /* Hover verde en los accesos directos */
}

/* --- BOTÓN WHATSAPP --- */
.btn-ws {
    position: fixed;              /* Fijo en la pantalla */
    bottom: 30px;                 /* Distancia desde abajo */
    right: 30px;                  /* Distancia desde la derecha */
    background-color: #25d366;    /* Color verde WhatsApp */
    color: white;                 /* Icono blanco */
    width: 60px;                  /* Ancho del botón */
    height: 60px;                 /* Alto del botón */
    border-radius: 50%;           /* Círculo perfecto */
    display: flex;                /* Flex para centrar icono */
    align-items: center;          /* Centrado vertical */
    justify-content: center;      /* Centrado horizontal */
    font-size: 30px;              /* Tamaño del icono */
    text-decoration: none;        /* Sin subrayado */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra para dar profundidad */
    z-index: 2000;                /* Por encima de todo */
    transition: transform 0.3s;   /* Transición suave */
}

.btn-ws:hover {
    transform: scale(1.1);        /* Aumenta tamaño al pasar mouse */
}

.btn-ws img {
    width: 35px;                  /* Mismo ancho que el icono SVG anterior */
    height: 35px;                 /* Misma altura que el icono SVG anterior */
    object-fit: contain;          /* Evita que la imagen se deforme */
}

/* --- BOTONES --- */
.btn-primario {
    display: inline-block;        /* Comportamiento de bloque en línea */
    background: var(--verde-matech); /* Fondo verde */
    color: var(--oscuro-fondo);   /* Texto oscuro para contraste */
    padding: 10px 20px;           /* Relleno interno */
    border-radius: 6px;           /* Bordes redondeados */
    text-decoration: none;        /* Sin subrayado */
    font-weight: bold;            /* Texto en negrita */
    margin-top: 15px;             /* Margen superior */
    cursor: pointer;              /* Cursor de mano */
    border: none;                 /* Sin borde */
}

.hamburger {
    display: none;                /* Oculto en pantallas grandes (desktop) */
    cursor: pointer;              /* Cursor de mano */
}

.hamburger div {
    width: 25px;                  /* Ancho de las líneas */
    height: 3px;                  /* Alto de las líneas */
    background-color: var(--texto-blanco); /* Color blanco */
    margin: 5px;                  /* Espacio entre líneas */
    transition: all 0.3s ease;    /* Animación suave para transformación */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {       /* Estilos para pantallas menores a 768px (Tablets/Móviles) */
    .nav-links {
        position: fixed;          /* Menú fijo */
        right: 0px;               /* Pegado a la derecha */
        top: 80px;                /* Debajo de la barra de navegación */
        background-color: var(--oscuro-secundario); /* Fondo del menú móvil */
        display: flex;            /* Flexbox vertical */
        flex-direction: column;   /* Elementos en columna */
        align-items: center;      /* Centrados horizontalmente */
        width: 60%;               /* Ancho del menú desplegable */
        height: calc(100vh - 80px); /* Altura restante de la pantalla */
        transform: translateX(100%); /* Oculto fuera de la pantalla a la derecha */
        transition: transform 0.5s ease-in; /* Animación de entrada */
        list-style: none;         /* Sin viñetas */
        gap: 0;                   /* Sin gap (se usa padding en li) */
        padding: 0;               /* Sin padding contenedor */
    }

    .nav-links li {
        opacity: 0;               /* Invisible inicialmente para animación */
        width: 100%;              /* Ancho total */
        text-align: center;       /* Texto centrado */
    }

    .nav-links li a {
        display: block;           /* Ocupa todo el bloque */
        padding: 2rem;            /* Espaciado grande para tocar con el dedo */
        text-decoration: none;    /* Sin subrayado */
        color: var(--texto-blanco); /* Texto blanco */
        font-weight: 500;         /* Peso medio */
        transition: background-color 0.3s, color 0.3s; /* Transiciones */
    }

    .nav-links li a:hover {
        background-color: var(--verde-matech); /* Fondo verde al tocar */
        color: var(--oscuro-fondo); /* Texto oscuro al tocar */
    }

    .nav-active {
        transform: translateX(0%); /* Muestra el menú deslizándolo */
    }
    
    .nav-active li {
        opacity: 1;               /* Hace visibles los elementos */
        transition: opacity 0.5s ease-in 0.4s; /* Aparecen con retraso */
    }

    .hamburger {
        display: block;           /* Muestra el botón hamburguesa en móvil */
    }

    /* Animación del icono hamburguesa a X */
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px); /* Rota línea superior */
    }
    .toggle .line2 {
        opacity: 0;               /* Oculta línea del medio */
    }
    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px); /* Rota línea inferior */
    }

    .slide h2 { font-size: 1.8rem; } /* Reduce tamaño de fuente en carrusel móvil */
}