/* =====================================
  VARIABLES CSS PARA PERSONALIZACIÓN
  ===================================== */
:root {
/* ------------------ Colores y Transparencias ------------------ */
  --color-fondo-degradado-superior: rgba(0, 15, 35, 0.85); /* Color superior del degradado de fondo. */
  --color-fondo-degradado-inferior: rgba(0, 40, 80, 0.85); /* Color inferior del degradado de fondo. */
  --color-fondo-principal: #001022; /* Color de fondo general si la imagen no carga. */
  --color-fondo-header: rgba(255, 255, 255, 0.95); /* Color de fondo del encabezado. */
  --color-fondo-footer: #003e8044; /* Color de fondo del pie de página. */
  --color-texto-principal: #ffffff; /* Color principal para la mayoría del texto. */
  --color-texto-secundario: #dddddd; /* Color para texto secundario como subtítulos o párrafos. */
  --color-enlace: #0d1643; /* Color de los enlaces de navegación. */
  --color-enlace-hover: #5c5d60; /* Color de los enlaces al pasar el cursor. */
  --color-boton: #0d1643; /* Color de fondo del botón. */
  --color-boton-hover: #5c5d60; /* Color de fondo del botón al pasar el cursor. */
  --color-boton-texto-hover: white; /* Color del texto del botón al pasar el cursor. */
  --color-sombra-header: rgba(0, 0, 0, 0.1); /* Color de la sombra del encabezado. */
  --color-sombra-boton: rgba(0, 0, 0, 0.2); /* Color de la sombra de los botones. */
  --color-bt-secondary-subtle: white; /* Color de fondo para cajas de servicios (Bootstrap) */

  /* ------------------ Tipografías y Espaciado de texto ------------------ */
  --fuente-principal: 'Montserrat', sans-serif; /* Define la fuente principal. */
  --tamano-texto: 1rem; /* Tamaño de fuente base. */
  --tamano-titulo: 2rem; /* Tamaño de fuente para títulos. */
  --tamano-subtitulo: 1.2rem; /* Tamaño de fuente para subtítulos. */
  --tamano-texto-movil: 1.2rem; /* Tamaño de fuente para el menú en móviles. */
  --peso-fuente-bold: 600; /* Peso de la fuente para negritas. */
  --espaciado-letras-menu: 1px; /* Espaciado entre letras del menú. */
  --line-height-parrafo: 1.6; /* Altura de línea para párrafos. */

  /* ------------------ Dimensiones y Espaciado ------------------ */
  --altura-header: 160px; /* Altura fija del encabezado. */
  --altura-footer: 50px; /* Altura fija del pie de página. */
  --ancho-maximo-sitio: 1200px; /* Ancho máximo del contenedor principal. */
  --ancho-logo: 260px; /* Ancho de la imagen del logo. */
  --alto-maximo-logo: 266px; /* Altura máxima de la imagen del logo. */
  --ancho-carrusel-movil: 400px; /* Ancho del carrusel en móviles. */
  --alto-carrusel-escritorio: 300px; /* Altura del carrusel en escritorio. */
  --alto-carrusel-movil: 400px; /* Altura del carrusel en móviles. */
  --espaciado-secciones: 2rem; /* Espaciado entre las secciones de la página. */
  --espaciado-gap: 2rem; /* Espaciado entre elementos del carrusel y el texto. */
  --padding-secciones: 1rem; /* Relleno general para las secciones. */
  --padding-general: 5px; /* Relleno del header y otros elementos. */
  --padding-enlaces: 0.5rem 1rem; /* Relleno de los enlaces del menú. */
  --padding-boton-flotante: 18px 30px; /* Relleno del botón flotante. */
  --margen-secciones: 0 auto; /* Margen para centrar elementos. */
  --margen-logo-izq: 2px; /* <--- AJUSTA ESTA VARIABLE PARA EL LOGO */
  --margen-menu-der: 2px; /* <--- NUEVA VARIABLE: AJUSTA ESTA VARIABLE PARA EL MENÚ */
  --margen-lista-movil: 1rem 0; /* Margen de la lista en el menú móvil. */
  --margen-inferior-titulo: 1rem; /* Margen inferior del título del carrusel. */
  --margen-inferior-subtitulo: 0.5rem; /* Margen inferior del subtítulo del carrusel. */
  --margen-inferior-hamburguesa: 5px; /* Margen entre las líneas del menú hamburguesa. */

  /* ------------------ Tiempos de Transición y Efectos ------------------ */
  --transicion-base: 0.3s ease-in-out; /* Velocidad de las transiciones estándar. */
  --transicion-logo: 300ms; /* Velocidad de la transición del logo. */
  --transicion-opacidad-carrusel: 1s ease-in-out; /* Velocidad de la transición del carrusel. */
  --filtro-fondo-header: blur(6px); /* Efecto de desenfoque en el header. */
  --transform-hover-boton-y: -3px; /* Desplazamiento vertical al pasar el cursor. */
  --transform-hover-boton-escala: 1.05; /* Aumento de tamaño al pasar el cursor. */

  /* ------------------ Bordes y Radios ------------------ */
  --borde-redondeado: 6px; /* Radio de borde estándar. */
  --borde-lineas-hamburguesa: 5px; /* Radio de borde de las líneas del menú hamburguesa. */

  /* ------------------ Z-Index y Posicionamiento ------------------ */
  --z-index-carrusel-inactivo: 0; /* Z-index para imágenes del carrusel no activas. */
  --z-index-carrusel-activo: 1; /* Z-index para la imagen activa del carrusel. */
  --z-index-header: 1000; /* Z-index para el encabezado. */
  --z-index-boton-flotante: 9999; /* Z-index para el botón flotante. */

  /* ------------------ Opacidad ------------------ */
  --opacidad-carrusel-inactivo: 0; /* Opacidad de las imágenes no activas. */
  --opacidad-carrusel-activo: 1; /* Opacidad de la imagen activa. */
  --opacidad-fondo-header: 0.95; /* Opacidad del fondo del header. */

  /* ------------------ Imágenes ------------------ */
  --imagen-fondo: url("../img/fondo.jpg"); /* Ruta de la imagen de fondo principal. */
}

/* =====================================
  AJUSTES BÁSICOS DEL HTML Y BODY
  ===================================== */
html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente-principal);
  color: var(--color-texto-principal);
  background:
    linear-gradient(to bottom, var(--color-fondo-degradado-superior), var(--color-fondo-degradado-inferior)),
    var(--imagen-fondo) no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color-fondo-principal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.main-content {
  flex: 1 0 auto;
  margin-top: var(--altura-header);
  margin-bottom: var(--altura-footer);
  padding: var(--padding-secciones);
}

/* =====================================
  HEADER FIJO SUPERIOR
  ===================================== */
.header {
  background-color: var(--color-fondo-header);
  box-shadow: 0 2px 6px var(--color-sombra-header);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: var(--z-index-header);
  height: var(--altura-header);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  backdrop-filter: var(--filtro-fondo-header);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: var(--ancho-maximo-sitio);
  margin: var(--margen-secciones);
  padding-left: var(--padding-general);
  padding-right: var(--padding-general);
 
}

.header-logo {

  width: 250px;
  cursor: pointer;
  transition-duration: var(--transicion-logo);
}

.logo img {
  margin-left: auto;
  width: var(--ancho-logo);
  height: auto;
  max-height: var(--alto-maximo-logo);
  display: block;
}

/* =====================================
  MENÚ DE NAVEGACIÓN
  ===================================== */
.nav-menu {
  margin-left: auto;
  margin-right: auto;

}

.nav-menu ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.nav-menu ul li {
  margin-left: var(--espaciado-pequeno);
  margin-right: var(--espaciado-pequeno);
  position: relative;
  display: inline-block;
  transition: all var(--transicion-base);
}

.nav-menu ul li a {
  display: inline-block;
  text-decoration: none;
  font-weight: var(--peso-fuente-bold);
  font-family: var(--fuente-principal);
  padding: var(--padding-enlaces);
  border-radius: var(--borde-redondeado);
  background-color: transparent;
  color: var(--color-enlace);
  transition: background-color var(--transicion-base), color var(--transicion-base);
  font-size: var(--tamano-texto);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras-menu);
  text-align: center;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
  background-color: var(--color-enlace-hover);
  color: var(--color-boton-texto-hover);
  border-color: var(--color-enlace-hover);
  box-shadow: 0 4px 8px var(--color-sombra-boton);
}

/* =====================================
  SECCIÓN PRINCIPAL (HERO)
  ===================================== */
.Text_y_carrusel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--espaciado-secciones);
  gap: var(--espaciado-gap);
  height: calc(100vh - var(--altura-header) - var(--altura-footer));
  box-sizing: border-box;
}

.Text_y_contenido {
  flex: 1 1 50%;
  text-align: left;
}

.Titulo-carrusel {
  font-size: var(--tamano-titulo);
  color: var(--color-texto-principal);
  font-weight: bold;
  padding-bottom: var(--margen-inferior-titulo);
}

.Subtitulo-carrusel {
  font-size: var(--tamano-subtitulo);
  color: var(--color-texto-secundario);
  padding-bottom: var(--margen-inferior-subtitulo);
}

.Parrafo-carrusel {
  font-size: var(--tamano-texto);
  color: var(--color-texto-secundario);
  line-height: var(--line-height-parrafo);
}

.imagen-aliado {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-end;
}

.imagen {
  position: relative;
  width: 100%;
  height: var(--alto-carrusel-escritorio);
  overflow: hidden;
}

.imagen img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--opacidad-carrusel-inactivo);
  transition: opacity var(--transicion-opacidad-carrusel);
  z-index: var(--z-index-carrusel-inactivo);
}

.imagen img.img-activa {
  opacity: var(--opacidad-carrusel-activo);
  z-index: var(--z-index-carrusel-activo);
}

/* =====================================
  MENÚ HAMBURGUESA (Móviles)
  ===================================== */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 25px;
  background: var(--color-enlace);
  margin-bottom: var(--margen-inferior-hamburguesa);
  border-radius: var(--borde-lineas-hamburguesa);
}


/* Estilos responsivos */
@media (max-width: 768px) {
  .Text_y_carrusel {
    flex-direction: column;
    text-align: center;
    height: auto;
  }

  .Text_y_contenido,
  .imagen-aliado {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

  .nav-menu {
    position: fixed;
    top: var(--altura-header);
    right: -100%;
    width: 250px;
    height: var(--largo-caja-header-movil);
    background-color: var(--color-fondo-header);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--padding-secciones);
    box-shadow: -2px 0 8px var(--color-sombra-boton);
    transition: right var(--transicion-base);
    color: var(--color-enlace);
  }

  .nav-menu.show {
    right: 0;
  }

  .nav-menu ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-menu ul li {
    margin: var(--margen-lista-movil);
    width: 100%;
  }

  .nav-menu ul li a {
    width: 100%;
    font-size: var(--tamano-texto-movil);
  }

  .hamburger {
    display: flex;
  }

  .imagen {
    width: var(--ancho-carrusel-movil);
    height: var(--alto-carrusel-movil);
    margin: var(--margen-secciones);
  }

  .imagen img {
    object-fit: cover;
  }
}

/* =====================================
  BOTÓN FLOTANTE
  ===================================== */
.btn-flotante {
  font-size: var(--tamano-texto);
  font-weight: bold;
  color: var(--color-boton-texto-hover);
  background: var(--color-boton);
  border-radius: var(--borde-redondeado);
  padding: var(--padding-boton-flotante);
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: var(--z-index-boton-flotante);
  box-shadow: 0 8px 15px var(--color-sombra-boton);
  transition: all var(--transicion-base);
}

.btn-flotante:hover {
  background: var(--color-boton-hover);
  box-shadow: 0 10px 20px var(--color-sombra-boton);
  transform: translateY(var(--transform-hover-boton-y)) scale(var(--transform-hover-boton-escala));
}

/* =====================================
  NUEVOS ESTILOS PARA BOTONES DE SERVICIO
  ===================================== */
.btn-servicio-personalizado {
    /* Estilos del estado inicial */
    display: flex; /* Utiliza flexbox para alinear el icono y el texto */
    flex-direction: column; /* Coloca el icono arriba del texto */
    align-items: center; /* Centra el contenido horizontalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    
    background: var(--color-boton); /* Fondo azul */
    color: var(--color-boton-texto-hover); /* Texto blanco */
    border-radius: var(--borde-redondeado); /* Bordes redondeados */
    box-shadow: 0 8px 15px var(--color-sombra-boton); /* Sombra */
    transition: all var(--transicion-base); /* Transición suave para todos los cambios */
    text-decoration: none; /* Elimina el subrayado del enlace */
    padding: 2rem 1rem; /* Espaciado interno */
    
    font-size: var(--tamano-subtitulo); /* Tamaño de texto de los títulos */
    font-weight: bold;
    letter-spacing: 1px;
}

/* Estado al pasar el cursor (hover) */
.btn-servicio-personalizado:hover {
    background: var(--color-boton-hover); /* Cambia a gris al pasar el cursor */
    box-shadow: 0 6px 12px var(--color-sombra-boton); /* Sombra más suave */
    transform: translateY(var(--transform-hover-boton-y)) scale(var(--transform-hover-boton-escala)); /* Efecto de elevación */
}

/* Estilo para el icono dentro del botón */
.btn-servicio-personalizado i {
    font-size: 3rem; /* Tamaño del icono */
    margin-bottom: 0.5rem; /* Espacio entre el icono y el texto */
    color: var(--color-texto-principal); /* Color del icono */
}

/* Estilo para el texto dentro del botón */
.btn-servicio-personalizado span {
    color: var(--color-texto-principal); /* Color del texto */
}


/* =====================================
  FOOTER
  ===================================== */
footer {
  width: 100%;
  height: var(--altura-footer);
  background-color: var(--color-fondo-footer);
  color: var(--color-texto-principal);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
}