/* Variables de color de la marca */
:root {
    --color-navy: #0a192f;
    --color-orange: #ff6b00;
    --color-light-gray: #e0e0e0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-light-gray);
    color: #333333;
}

/* Clases utilitarias personalizadas */
.bg-navy { background-color: var(--color-navy); }
.text-navy { color: var(--color-navy); }
.bg-light-gray { background-color: var(--color-light-gray); }
.text-orange { color: var(--color-orange); }

/* Estilo para los iconos sociales de la barra superior */
.topbar-icons a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    font-size: 1.5rem;
}
.topbar-icons a:hover {
    color: var(--color-orange);
}

/* Tipografía especial para títulos grandes */
.font-poppins {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Ajuste sutil al hover del enlace Área de Clientes */
.area-clientes:hover {
    color: var(--color-orange) !important;
}


.img-3-4 {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover; /* Evita que la imagen se estire o se aplaste, recortándola simétricamente si es necesario */
    background-color: #ffffff; /* Fondo de respaldo si la imagen tarda en cargar */
}


/* Estandariza las miniaturas a una proporción 16:9 (estilo video/noticia) */
.img-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: #e9ecef; /* Color de fondo mientras carga */
}

/* Un pequeño detalle para separar las letras de la fecha */
.tracking-wide {
    letter-spacing: 0.06em;
}

#modalGaleriaGlobal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}


.btn-outline-navy {
  color: #000080; /* Color del texto y borde */
  border-color: #000080;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus,
.btn-outline-navy:active {
  color: #fff;
  background-color: #000080;
  border-color: #000080;
}