/* ==========================================================================
   TÍTULO: Variables de Diseño y Paleta de Colores
   DESCRIPCIÓN: Establece los colores corporativos y tipografía general del sitio.
   ========================================================================== */
:root {
    --color-principal: #172F51;      /* Color base oficial de la marca BIAD Corp */
    --color-activo: #0d1e36;         /* Color oscuro para identificar botones activos */
    --color-hover: #214373;          /* Color para efectos al pasar el cursor */
    --color-fondo-claro: #f4f6f9;    /* Fondo secundario neutro */
    --color-texto: #333333;          /* Color general para el texto principal */
    --color-blanco: #ffffff;         /* Color blanco estándar */
    --color-acento: #25d366;         /* Color para elementos de WhatsApp */
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía oficial */
}

/* ==========================================================================
   TÍTULO: Reset y Estilos Globales
   DESCRIPCIÓN: Normaliza los márgenes, rellenos y modelo de caja para todo el documento.
   ========================================================================== */
* {
    margin: 0;                       /* Elimina los márgenes por defecto */
    padding: 0;                      /* Elimina los rellenos por defecto */
    box-sizing: border-box;          /* Incluye bordes y rellenos en el tamaño total */
}

body {
    font-family: var(--fuente-principal); /* Aplica la fuente principal a la página */
    color: var(--color-texto);            /* Establece el color de texto por defecto */
    background-color: var(--color-blanco);/* Establece el fondo blanco del cuerpo */
    line-height: 1.6;                     /* Define una altura de línea legible */
}

/* ==========================================================================
   TÍTULO: Encabezado (Header) y Menú de Navegación
   DESCRIPCIÓN: Controla la apariencia de la barra superior fija y sus accesos.
   ========================================================================== */
.encabezado-principal {
    background-color: var(--color-principal); /* Fondo institucional #172F51 */
    padding: 7px 5%;                          /* 🟢 REDUCIDO: Espaciado interno superior e inferior */
    display: flex;                            /* Disposición en caja flexible */
    justify-content: space-between;           /* Separa el logo a la izquierda y el menú a la derecha */
    align-items: center;                      /* Alinea verticalmente los elementos */
    position: sticky;                         /* Fija la barra en la parte superior */
    top: 0;                                   /* Mantiene el encabezado pegado arriba */
    z-index: 1000;                            /* Prioridad de capa sobre otros elementos */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);   /* Sombra inferior sutil */
}

.contenedor-logo img {
    height: 32px;                             /* 🟢 REDUCIDO: Altura del logo más pequeña (antes 45px) */
    display: block;                           /* Elimina espacio inferior innecesario */
}

.menu-navegacion {
    display: flex;                            /* Mantiene los enlaces en línea horizontal */
    gap: 10px;                                /* Espacio entre cada botón de navegación */
}

.menu-navegacion a {
    color: var(--color-blanco);               /* Texto blanco para los botones */
    text-decoration: none;                    /* Elimina el subrayado por defecto */
    padding: 6px 14px;                        /* 🟢 REDUCIDO: Botones más delgados (antes 10px 18px) */
    border-radius: 4px;                       /* Esquinas redondeadas */
    font-weight: 600;                         /* Texto en negrita suave */
    transition: background 0.3s ease;         /* Transición suave en efectos hover */
}

.menu-navegacion a:hover {
    background-color: var(--color-hover);     /* Cambia fondo al pasar el cursor */
}

.menu-navegacion a.seccion-activa {
    background-color: var(--color-activo);    /* Resalta el botón de la página actual */
    border-bottom: 3px solid #ffffff;         /* Marca inferior para indicar la pestaña activa */
}

/* ==========================================================================
   TÍTULO: Secciones Banner Principal (Hero Compacto)
   DESCRIPCIÓN: Estilos ajustados para que el banner azul sea más delgado y uniforme.
   ========================================================================== */
.banner-principal {
    background-color: var(--color-principal);          /* Fondo con color oficial oscuro */
    color: var(--color-blanco);                        /* Texto en color blanco */
    padding: 25px 5%;                                  /* Espacio interno reducido arriba y abajo */
    display: flex;                                     /* Distribución en formato de columnas */
    align-items: center;                               /* Centra el contenido verticalmente */
    gap: 30px;                                         /* Separación entre el texto y la imagen */
    min-height: auto;                                  /* Altura automática ajustada al contenido */
}

.columna-banner-texto {
    flex: 1.2;                                         /* Da mayor proporción de espacio al texto */
}

.columna-banner-texto h1 {
    font-size: 1.5rem;                                 /* Tamaño de fuente más compacto para el título */
    margin-bottom: 25px;                                /* Espacio inferior reducido debajo del título */
    line-height: 1.2;                                  /* Altura de línea ajustada para textos largos */
}

.columna-banner-texto p {
    font-size: 0.95rem;                                /* Tamaño de texto descriptivo ajustado */
    margin-bottom: 50px;                               /* Espacio inferior reducido antes de los botones */
    opacity: 0.9;                                      /* Ligera transparencia para suavizar el texto */
}

.contenedor-botones-banner {
    display: flex;                                     /* Alinea los botones horizontalmente */
    gap: 50px;                                         /* Separación ajustada entre ambos botones */
}

.boton-banner {
    display: inline-block;                             /* Permite aplicar márgenes al enlace */
    padding: 8px 16px;                                 /* Relleno interno para hacer el botón más delgado */
    font-size: 0.88rem;                                /* Tamaño de letra adaptado al formato compacto */
    background-color: var(--color-activo);             /* Fondo del botón con color de acción */
    color: var(--color-blanco);                        /* Texto del botón en color blanco */
    text-decoration: none;                             /* Quita el subrayado predeterminado del enlace */
    border-radius: 5px;                                /* Bordes ligeramente redondeados */
    font-weight: bold;                                 /* Texto en negrita para resaltar */
    transition: transform 0.2s, background 0.2s;       /* Animación fluida al interactuar con el mouse */
}

.boton-banner:hover {
    transform: translateY(-2px);                       /* Efecto de sutil elevación al pasar el cursor */
    background-color: var(--color-hover);              /* Cambio de color de fondo al pasar el cursor */
}

.columna-banner-imagen {
    flex: 0.8;                                         /* Da menor proporción de espacio a la imagen */
    text-align: center;                                /* Centra la imagen horizontalmente en su columna */
}

.columna-banner-imagen img {
    max-width: 100%;                                   /* Evita que la imagen desborde el ancho disponible */
    max-height: 220px;                                 /* Limita la altura del gráfico para no inflar el banner */
    width: auto;                                       /* Ajuste automático del ancho */
    height: auto;                                      /* Mantiene la proporción original sin deformar */
    object-fit: contain;                               /* Asegura que la imagen completa se vea sin recortes */
    border-radius: 8px;                                /* Bordes suavizados en las esquinas de la imagen */
}
/* ==========================================================================
   TÍTULO: Grillas de Servicios y Tarjetas
   DESCRIPCIÓN: Estructura responsiva para la presentación de los servicios.
   ========================================================================== */
.contenedor-servicios {
    padding: 60px 5%;                          /* Margen interno general */
    text-align: center;                        /* Centra los títulos principales */
}

.titulo-seccion-bloque {
    background-color: var(--color-principal); /* Fondo azul oficial */
    color: var(--color-blanco);                /* Texto blanco */
    padding: 12px 20px;                        /* Relleno de la barra del título */
    border-radius: 6px;                        /* Redondeado de esquinas */
    margin-bottom: 40px;                       /* Espacio inferior */
    display: inline-block;                     /* Ajusta ancho al contenido */
    width: 100%;                               /* Ocupa todo el ancho si es contenedor */
}

.grilla-servicios-3 {
    display: flex;                             /* Flexbox para 3 tarjetas */
    justify-content: space-between;            /* Distribución proporcional */
    gap: 30px;                                 /* Separación entre tarjetas */
    flex-wrap: wrap;                           /* Permite envolver en pantallas pequeñas */
}

.tarjeta-servicio-inicio {
    flex: 1;                                   /* Cada tarjeta ocupa el mismo ancho */
    min-width: 250px;                          /* Ancho mínimo responsivo */
    padding: 20px;                             /* Espaciado interno */
    display: flex;                             /* Flex en dirección columna */
    flex-direction: column;                    /* Organiza elementos verticalmente */
    align-items: center;                       /* Centra contenido */
}

.tarjeta-servicio-inicio img {
    width: 140px;                              /* Tamaño del logo circular */
    height: 140px;                             /* Mantiene proporción cuadrada */
    border-radius: 50%;                        /* Hace la imagen completamente circular */
    object-fit: cover;                         /* Ajusta el contenido dentro del círculo */
    margin-bottom: 20px;                       /* Margen inferior */
}

.grilla-servicios-2x2 {
    display: grid;                             /* Sistema de cuadrícula CSS Grid */
    grid-template-columns: repeat(2, 1fr);     /* Define exactamente 2 columnas iguales */
    gap: 40px;                                 /* Separación entre tarjetas */
    margin-top: 30px;                          /* Margen superior */
}

.tarjeta-servicio-detallada {
    border: 1px solid #e0e0e0;                 /* Borde sutil delimitador */
    padding: 30px;                             /* Relleno interno */
    border-radius: 8px;                        /* Bordes suavizados */
    text-align: left;                          /* Texto alineado a la izquierda */
    background: #fff;                          /* Fondo totalmente blanco */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);    /* Sombra de elevación */
}

.tecnologias-etiqueta {
    color: #555;                               /* Color gris oscuro para texto */
    font-weight: bold;                         /* Resalta el subtítulo */
    margin: 10px 0 5px 0;                      /* Márgenes superior e inferior */
}

.lista-servicios {
    list-style-type: disc;                     /* Utiliza viñetas circulares tradicionales */
    padding-left: 20px;                        /* Sangría para la lista */
    margin-top: 10px;                          /* Espacio superior */
}

/* ==========================================================================
   TÍTULO: Carrusel Infinito de Tecnologías
   DESCRIPCIÓN: Desplazamiento automático continuo de logotipos.
   ========================================================================== */
.contenedor-carrusel-tecnologias {
    overflow: hidden;                          /* Oculta imágenes fuera de la pantalla */
    background: var(--color-blanco);          /* Fondo blanco transparente libre de bordes */
    padding: 30px 0;                           /* Relleno vertical */
    position: relative;                        /* Posicionamiento para contexto */
}

.pista-carrusel {
    display: flex;                             /* Fila continua de imágenes */
    width: calc(200px * 10);                   /* Ancho dinámico del contenedor en movimiento */
    animation: desplazamientoCarrusel 20s linear infinite; /* Animación continua tipo loop */
}

.pista-carrusel img {
    width: 150px;                              /* Ancho estandarizado por logo */
    height: 80px;                              /* Altura fija */
    object-fit: contain;                       /* Evita deformaciones y mantiene la nitidez */
    margin: 0 25px;                            /* Espaciado lateral */
}

@keyframes desplazamientoCarrusel {
    0% { transform: translateX(0); }           /* Inicio de la pista */
    100% { transform: translateX(-50%); }      /* Desplaza la mitad para generar ciclo infinito */
}

/* ==========================================================================
   TÍTULO: Pie de Página (Footer) Corporativo
   DESCRIPCIÓN: Estructura de 3 bloques definida exactamente para todas las páginas.
   ========================================================================== */
.pie-pagina-corporativo {
    background-color: var(--color-principal); /* Fondo azul institucional #172F51 */
    color: var(--color-blanco);                /* Texto en blanco */
}

.footer-bloque-1 {
    display: flex;                             /* Distribución flexible */
    justify-content: space-between;            /* Logo izquierda, texto centro, botón derecha */
    align-items: center;                       /* Alineación centrada vertical */
    padding: 20px 5%;                          /* Espaciado del bloque superior */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Línea divisoria sutil */
}

.footer-bloque-1 img {
    height: 40px;                              /* Tamaño reducido del logo */
}

.footer-bloque-2 {
    background-color: var(--color-blanco);    /* Segunda franja con fondo blanco puro */
    color: var(--color-texto);                 /* Texto oscuro para contraste */
    padding: 25px 5%;                          /* Relleno interno */
    display: flex;                             /* Disposición en fila */
    justify-content: space-between;            /* Distribución uniforme */
    align-items: center;                       /* Alineación alineada */
    flex-wrap: wrap;                           /* Responsivo para móviles */
}

.contacto-iconos, .redes-iconos {
    display: flex;                             /* Mantiene íconos agrupados */
    align-items: center;                       /* Centra íconos verticalmente */
    gap: 15px;                                 /* Separación horizontal entre íconos */
}

.icono-social {
    width: 28px;                               /* Ancho fijo para redes y contactos */
    height: 28px;                              /* Altura fija */
    transition: transform 0.2s;               /* Animación hover */
}

.icono-social:hover {
    transform: scale(1.15);                    /* Ampliación al interactuar */
}

.footer-bloque-3 {
    text-align: center;                        /* Centra el texto de derechos autor */
    padding: 15px 5%;                          /* Relleno reducido */
    background-color: var(--color-principal); /* Vuelve al fondo azul base */
    font-size: 0.9rem;                         /* Tamaño de fuente ligero */
}

/* ==========================================================================
   TÍTULO: Modales y Formularios
   DESCRIPCIÓN: Estilos para formularios desplegables, mensajes y contenedor oculto.
   ========================================================================== */
.seccion-sugerencias-desplegable {
    padding: 40px 5%;                          /* Relleno amplio */
    text-align: center;                        /* Centrado general */
    background-color: var(--color-fondo-claro);/* Fondo ligero diferenciador */
}

.formulario-oculto {
    display: none;                             /* Oculto por defecto según requerimiento */
    max-width: 600px;                          /* Ancho máximo legible */
    margin: 30px auto 0 auto;                  /* Centra horizontalmente */
    text-align: left;                          /* Texto interno alineado a la izquierda */
    background: #fff;                          /* Fondo blanco */
    padding: 25px;                             /* Espaciado interno */
    border-radius: 8px;                        /* Bordes suavizados */
    border: 1px solid #ccc;                    /* Borde exterior */
}

.campo-formulario {
    margin-bottom: 15px;                       /* Separación vertical de campos */
}

.campo-formulario label {
    display: block;                            /* Etiqueta ocupa línea propia */
    font-weight: bold;                         /* Texto en negrita */
    margin-bottom: 5px;                        /* Margen inferior */
}

.campo-formulario input, 
.campo-formulario select, 
.campo-formulario textarea {
    width: 100%;                               /* Ocupa el 100% de la caja */
    padding: 10px;                             /* Espacio de escritura */
    border: 1px solid #ccc;                    /* Borde fino */
    border-radius: 4px;                        /* Esquinas redondeadas */
}

/* ==========================================================================
   TÍTULO: Visor de Portafolio "Nuestro Trabajo"
   DESCRIPCIÓN: Estilos de tarjetas y modal iframe seguro para proyectos embebidos.
   ========================================================================== */
.grilla-trabajos {
    display: grid;                             /* Sistema Grid de 2x2 */
    grid-template-columns: repeat(2, 1fr);     /* Dos columnas */
    gap: 30px;                                 /* Espaciado intermedio */
    padding: 40px 5%;                          /* Relleno exterior */
}

.tarjeta-trabajo {
    border: 1px solid #ddd;                    /* Borde gris */
    border-radius: 8px;                        /* Esquinas curvas */
    overflow: hidden;                          /* Recorta desbordamientos */
    cursor: pointer;                           /* Indica que es ejecutable al hacer clic */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);     /* Sombra elegante */
    transition: transform 0.3s;                /* Efecto suave */
}

.tarjeta-trabajo:hover {
    transform: translateY(-5px);               /* Elevación visual */
}

.previsualizacion-trabajo {
    height: 250px;                             /* Altura para el marco de vista previa */
    background-color: #eee;                    /* Fondo gris mientras carga */
    display: flex;                             /* Flex para centrado */
    align-items: center;                       /* Centra texto si no hay imagen */
    justify-content: center;                   /* Centra horizontalmente */
}

.modal-iframe-seguro {
    display: none;                             /* Oculto hasta que se active un trabajo */
    position: fixed;                           /* Fijo sobre toda la pantalla */
    top: 0; left: 0;                           /* Esquina superior izquierda */
    width: 100%; height: 100%;                 /* Ocupa toda la ventana */
    background: rgba(0,0,0,0.8);               /* Oscurece el fondo */
    z-index: 2000;                             /* Capa superior absoluta */
    justify-content: center;                   /* Centra el modal */
    align-items: center;                       /* Centra el modal */
}

.contenido-modal-iframe {
    width: 90%;                                /* Ancho del visor */
    height: 85%;                               /* Altura del visor */
    background: #fff;                          /* Marco blanco */
    position: relative;                        /* Posición para botón de cierre */
    border-radius: 8px;                        /* Bordes suavizados */
}

.boton-cerrar-modal {
    position: absolute;                        /* Botón flotante */
    top: -15px; right: -15px;                  /* Esquina superior derecha fuera de la caja */
    background: red;                           /* Fondo rojo visible */
    color: white;                              /* Cruz en blanco */
    border: none;                              /* Sin bordes */
    border-radius: 50%;                        /* Forma circular */
    width: 35px; height: 35px;                 /* Tamaño */
    cursor: pointer;                           /* Mano interactiva */
    font-weight: bold;                         /* Texto grueso */
}

/* ==========================================================================
   AJUSTES PARA PANTALLAS MÓVILES (CELULARES)
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. Encabezado y Menú: Se acomodan horizontalmente y se centran */
  .encabezado-principal {
    flex-direction: column !important;
    padding: 15px 10px !important;
  }

  .menu-navegacion {
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 15px !important;
    gap: 10px !important;
  }

  /* 2. Banner Principal: El texto va arriba y la imagen pasa abajo en grande */
  .banner-principal {
    flex-direction: column !important;
    text-align: center !important;
    padding: 30px 5% !important;
  }

  .columna-banner-texto, 
  .columna-banner-imagen {
    width: 100% !important;
    flex: none !important;
  }

  .columna-banner-imagen {
    margin-top: 25px !important;
  }

  .columna-banner-imagen img {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important; /* Libera el tamaño para que se vea bien en celular */
  }

  .contenedor-botones-banner {
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
  }

  /* 3. Servicios y Trabajos: Todo pasa a UNA SOLA COLUMNA para no aplastarse */
  .grilla-servicios-3,
  .grilla-servicios-2x2,
  .grilla-trabajos {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 20px !important;
  }

  .tarjeta-servicio-inicio,
  .tarjeta-servicio-detallada,
  .tarjeta-trabajo {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Footer: Se centra todo en móviles */
  .footer-bloque-1, 
  .footer-bloque-2 {
    flex-direction: column !important;
    text-align: center !important;
    gap: 15px !important;
  }

  .contacto-iconos, 
  .redes-iconos {
    justify-content: center !important;
  }
}