/* Variables de Colores Oficiales */
:root {
    --color-primary-blue: #1E2E4E; /* Azul Oscuro Oficial - Debe predominar [cite: 30, 33] */
    --color-gold: #CB9B50; /* Dorado Oficial [cite: 39] */
    --color-gold-light: #F5E27A; /* Dorado para Degradados/Acentos [cite: 43] */
    --color-white: #FFFFFF;
    --color-light-gray: #F8F8F8;
    --color-dark-gray: #333333;
    --color-text-light: #666666;
}

/* Base & Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Tipografía oficial para web: Open Sans [cite: 71] */
    font-family: 'Open Sans', sans-serif; 
    line-height: 1.6;
    color: var(--color-dark-gray);
    background-color: var(--color-white);
    overflow-x: hidden;
}

/* ... (El resto del CSS base y de contenedores es similar) ... */

/* Botones */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px; 
    font-weight: 600; /* Open Sans Semibold para botones [cite: 77] */
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    color: var(--color-white);
}

.nav .btn-bar {
    font-family: 'Open Sans', sans-serif;
    font-size: 110%;
    text-decoration: none;
}
.nav .btn-bar:hover {
    color: var(--color-primary-blue);
    text-decoration: underline
}

.btn-primary {
    background-color: var(--color-primary-blue);
    color: var(--color-white); /* Texto azul sobre dorado */
    border: 2px solid var(--color-primary-blue);
    border-radius: 60px;
}

.btn-primary:hover {
    background-color: #E0BE5A; /* Dorado ligeramente más claro */
    border-color: #E0BE5A;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-text-light);
    color: var(--color-white); 
    border: 2px solid var(--color-text-light);
    opacity: 0.7;
    border-radius: 60px;
}

.btn-secondary:hover {
    background-color: var(--color-gold);
    color: var(--color-primary-blue);
    transform: translateY(-2px);
}

/* Header */
.header {
    background-color: var(--color-white);
    padding: 8px 0; /* Padding ligeramente ajustado para más elegancia */
    border-bottom: 1px solid var(--color-light-gray);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
/* 2. Contenedor del Header (Alineación Vertical) */
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* ESTO CENTRA VERTICALMENTE el logo y la navbar */
}

/* 3. Tamaño del Logo en Header */
.header .logo img {
    /* Establecemos la altura y ancho que tendrá la imagen DENTRO de la caja de recorte.
       Debe ser mayor o igual que la caja de recorte (.header .logo) */
    height: auto; /* Ejemplo: El logo REAL es de 100px de alto */
    width: 130px; /* Ajusta el ancho automáticamente */
    object-fit:cover; /* Mantiene la proporción del logo */
    
    /* Reposicionar la imagen para mostrar la parte superior (0%) o inferior (100%) */
    object-position: 10% 50%; /* Posiciona la parte superior (0%) del logo al centro (50%) */
    overflow:hidden; /* Asegura que cubra el área sin deformarse, aunque aquí height:auto es mejor */
    
    /* Remueve las propiedades que causaban problemas */
    top: 0px;
    position:absolute;
    left: 0px;
    transform: translate(0, 0%);
}

/* 4. Alineación de la Navegación */
.header .nav {
    display: flex; /* Habilita Flexbox para alinear los enlaces */
    align-items: center; /* Alinea verticalmente los enlaces con el botón */
    justify-content: flex-end; /* Asegura que los elementos se agrupen a la derecha */
}

/* 5. Espaciado entre elementos de la Nav */
.header .nav a {
    margin-left: 25px; /* Espaciado entre elementos */
    color: var(--color-dark-gray);
    font-weight: 500;
}
/* 6. Espaciado del Botón */
.header .nav a.btn-primary {
    margin-left: 35px; /* Espaciado mayor para separar el botón de los enlaces */
    text-decoration-color: none;
}
/* 7. Tamaño del Logo en Footer */
.footer .logo img {
    height: 500px; /* Reducido para consistencia */
    width: auto;
    /* Este filtro es para que el logo se vea blanco sobre el fondo oscuro del footer */
    filter: brightness(30) grayscale(100%) invert(100%); 
    margin-bottom: 20px;
}

.herocontainer{
    object-position: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    z-index: 1; /* Asegura que el contenido esté encima del video */
}

.hero-title {
    font-size: 60px;
    font-weight: 3000;
    margin-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    opacity: 0.70;
    object-position: center;
    height: 70px;
    text-align: center;
    justify-content: center;
    justify-items: center;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 4000;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-bottom: -40px;
    opacity: 0.70;
    object-position: center;
    justify-content: center;
    justify-items: center;
    height: 70px;
    text-align: center;
}

/* ... (Resto del Header CSS) ... */

/* Hero Section (Ajustado para Video de Fondo) */
.hero-section {
    /* QUITAMOS EL COLOR DE FONDO AZUL AQUÍ, AHORA LO PONE EL VIDEO */
    background-color: #0A3D62; /* Se mantiene como fallback si el video no carga */
    color: var(--color-white);
    padding: 0 0;
    text-align:center;
    min-height: 70vh; 
    position: relative; /* Es esencial para que el video se posicione absolutamente */
    overflow: hidden;
    
    /* El contenido (texto) necesita un z-index para estar encima del video */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Centra el contenido verticalmente */
}

/* Estilos para el Video (Nuevo) */
#hero-video {
    position:absolute;
    top: fit-content;   
    left: fit-content;
    /* Truco para asegurar que el video siempre cubra el contenedor y se centre */
    min-width: auto;
    min-height: 100%;
    width: 102%;
    height: auto;
    transform: translate(0 , 0); 
    z-index: 0; /* Posiciónalo detrás de todo el contenido */
    object-fit:fill; /* Asegura que cubra sin deformarse (como background-size: cover) */
}

/* Oscurecer la imagen para que el texto blanco sea legible */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Capa oscura semitransparente */
    z-index: 0; /* Colócalo sobre el video pero debajo del texto */
}

/* Asegura que el contenido esté siempre encima del video y del oscurecimiento */
.hero-section .container {
    position: relative;
    z-index: 2; /* Mayor que el z-index de la capa oscura */
}

/* Secciones Generales Azul*/
.section-titleblue {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: var(--color-white);
    position: relative;
    padding-bottom: 15px;
    z-index: 2;
}

.section-titleblue::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--color-gold);
    border-radius: 2px;
    z-index: 2;
}

section {
    padding: 100px 0;
}

/* Secciones Generales */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: var(--color-primary-blue);
    position: relative;
    padding-bottom: 15px;
    z-index: 2;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--color-gold);
    border-radius: 2px;
    z-index: 2;
}

section {
    padding: 100px 0;
}

/* Card*/
/* From Uiverse.io by vamsidevendrakumar */ 
.card {
  width: 300px;
  height: 120px;
  perspective: 1000px;
  z-index: 2;
  display: grid;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
  z-index: 2;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
  z-index: 2;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  z-index: 2;
}

.card-front {
  background-color:var(--color-primary-blue);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  border: 10px solid var(--color-primary-blue);
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
  z-index: 2;
  opacity: 0.7;
}

.card-back {
  background-color: var(--color-gold);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  border: 10px solid var(--color-gold);
  border-radius: 10px;
  justify-content: center;
  font-size: 20px;
  transform: rotateY(180deg);
  z-index: 2;
  opacity: 0.7;
}

.solution-grid-hero {
    top: 50px;
    position:relative;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(100px, 2,1rem));
    grid-auto-flow: column;
    gap: 30px;
    opacity: 1;
    z-index: 2;
    margin-bottom: 0px;
}

.solution-card-hero, .service-card {
    background-color: var(--color-light-gray);
    opacity: 0.5;
    align-self: auto;
    color: var(--color-text-light);
    padding: 02px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    text-align:center;
    transition: transform 0.3s ease;
}

/* Descripción a cerca de nosotros */
.aboutgrid {
    /* Usamos CSS Grid para establecer la estructura 2x2 */
    display: grid;
    
    /* Define 2 columnas de igual ancho que se expanden para llenar el espacio */
    grid-template-columns: repeat(3, 2fr); 
    
    /* Espaciado entre las filas y columnas */
    gap: 50px; 
    
    /* Centra la cuadrícula horizontalmente (si el about-content tiene un ancho limitado) */
    justify-content: center; 
    
    /* Asegura que los elementos .aboutcard se centren dentro de su celda (si son más pequeños que 1fr) */
    justify-items:center; 
    align-items: start;
    
    /* Eliminamos las propiedades inválidas o problemáticas como 'position:sticky', 'display:table-column', etc. */
    margin-bottom: 30px;
    z-index: 2; /* Mantenemos el z-index si es necesario */
}

.aboutcard {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 326px;
    padding: 2px;
    border-radius: 24px;
    overflow: hidden;
    line-height: 1.6;
    transition: all 0.48s cubic-bezier(0.23,1,0.32,1);
}

.aboutcard-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 34px;
  border-radius: 22px;
  color: white;
  overflow: hidden;
  background: linear-gradient(to right, var(--color-gold), var(--color-gold-light));
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.aboutcard-content .about-heading {
  z-index: 1;
  opacity: 0.8;
  font-size: 21px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: 900;
}

.aboutcard-content .about-para {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: justify;
}

.aboutcard::before{
  content: "";
  display: flex;
  position: absolute;
  height: 160%;
  width: 160%;
  border-radius: inherit;
  background: var(--color-primary-blue);
  background: linear-gradient(to right, var(--color-primary-blue), #2E4676);
  transform-origin: center;
  animation: moving 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}
.aboutcard:hover::before{
  animation-play-state: running;
  z-index: -1;
  width: 20%;
}

.aboutcard:hover .aboutcard-content .about-heading,
.aboutcard:hover .aboutcard-content .about-para {
  color: var(--color-primary-blue);
}
.aboutcard:hover {
      box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
  scale: 1.05;
  color: var(--color-primary-blue);
}

@keyframes moving {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.center-button {
    /* 1. Habilita Flexbox */
    display: flex;
    
    /* 2. Centra horizontalmente el contenido */
    justify-content: center;
    
    /* 3. Opcional: Centra verticalmente si el div tiene altura */
    align-items: center; 
}

/* Solutions/Services Section */
.solutions-section {
    background-color: var(--color-light-gray);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 5fr));
    gap: 10px;
    margin-bottom: 100px;
}

.solution-card, .service-card {
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease;
}

.solution-card .icon, .service-card .icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
    color: var(--color-primary-blue); 
}

.solution-card h3, .service-card h3 {
    font-size: 1.6rem;
    color: var(--color-primary-blue);
    font-weight: 600;
}

.info-strategic {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
    padding: 40px;
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.info-strategic h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.info-strategic p {
    font-size: 1.1rem;
    opacity: 0.8;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}


/* CTA/Contact Section */
.cta-section {
    background: var(--color-primary-blue);
    color: var(--color-white);
    text-align: center;
    padding: 40px 0;
}

.cta-subtitle {
    font-size: 1.5rem;
    opacity: 0.8;
}

/* Contact Form*/ 
.form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.form {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 400px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 30px 30px -30px rgba(27, 26, 26, 0.315);
}

.form .title {
  color: var(--color-primary-blue);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form input {
  outline: 0;
  border: 1px solid rgb(219, 213, 213);
  padding: 8px 14px;
  border-radius: 8px;
  width: 100%;
  height: 50px;
}

.form textarea {
  border-radius: 8px;
  height: 100px;
  width: 100%;
  resize: none;
  outline: 0;
  padding: 8px 14px;
  border: 1px solid rgb(219, 213, 213);
}

.form button {
  align-self: flex-end;
  padding: 8px;
  outline: 0;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--color-primary-blue);
  color: #FFFFFF;
  cursor: pointer;
}
    

/* ... (Resto del Contact Form CSS similar, ajustando colores) ... */

/* Footer */
.footer {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
    padding: 40px 0 30px;
    font-size: 0.9rem;
}
.logofooter img {
    /* Establecemos la altura y ancho que tendrá la imagen DENTRO de la caja de recorte.
       Debe ser mayor o igual que la caja de recorte (.header .logo) */
    height: auto; /* Ejemplo: El logo REAL es de 100px de alto */
    width: 200px; /* Ajusta el ancho automáticamente */
    object-fit:cover; /* Mantiene la proporción del logo */
    
    /* Reposicionar la imagen para mostrar la parte superior (0%) o inferior (100%) */
    object-position: 10% 50%; /* Posiciona la parte superior (0%) del logo al centro (50%) */
    overflow:hidden; /* Asegura que cubra el área sin deformarse, aunque aquí height:auto es mejor */

    /* Remueve las propiedades que causaban problemas */
    top: 0px;
    left: 0px;
    transform: translate(0, 0%);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
    color: var(--color-gold);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a,
.footer-col ul li span {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

/* ... (El resto del Footer CSS similar) ... */

/* Responsive Design (sin cambios grandes) */
@media (max-width: 992px) {
    /* ... */
}

@media (max-width: 768px) {
    /* ... */
}

/* From Uiverse.io by PapaUiiss404 */ 
.socialsFooter {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 20px;
}

/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
}
/* instagram*/
.containerOne:hover {
  background-color: #d92e7f;
  transition-duration: .3s;
}
/* facebook*/
.containerTwo:hover {
  background-color: #3b5998;
  transition-duration: .3s;
}
/* linkdin*/
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Animaciones sutiles (igual que antes) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}
/* Estilos para el Aviso de Cookies (Cookie Banner) */
#cookie-banner {
    position: fixed; /* Mantiene la barra fija en la parte inferior */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-dark-gray); /* Fondo oscuro para destacar */
    color: var(--color-white);
    padding: 15px 0;
    z-index: 10000; /* Asegura que esté por encima de todo */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    /* Animación de entrada sutil (estilo Apple) */
    transform: translateY(100%); 
    transition: transform 0.5s ease-out;
}

#cookie-banner.visible {
    transform: translateY(0); /* Muestra el banner al cargar */
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

#cookie-banner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    flex-grow: 1; /* Permite que el texto ocupe el espacio principal */
}

.cookie-link {
    color: var(--color-gold) !important; /* El dorado como enlace de acento */
    font-weight: 600;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0; /* Evita que los botones se encojan */
}

/* Modificación de botones para que se vean bien en el banner */
#cookie-banner .btn-primary {
    /* El botón Aceptar será Dorado/Azul */
    padding: 10px 20px;
    font-size: 0.9rem;
}

#cookie-banner .btn-secondary {
    /* El botón Rechazar será de contorno blanco/gris para ser menos invasivo */
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    padding: 10px 20px;
    font-size: 0.9rem;
}

#cookie-banner .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    transform: none; /* Quitamos la animación de hover para este botón */
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    #cookie-banner p {
        margin-bottom: 15px;
    }
}