@font-face {
    font-family: 'HelveticaNeueLTPro-Bd'; /* Nombre que usarás en CSS */
    src: url('../fonts/HelveticaNeueLTPro-Bd.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaNeueLTPro-Hv';
    src: url('../fonts/HelveticaNeueLTPro-Hv.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaNeueLTPro-Roman';
    src: url('../fonts/HelveticaNeueLTPro-Roman.otf') format('opentype');
}

.encabezado{
	/* background: linear-gradient(darkred, red); */
	height: 150px;
	text-align: center;
	position: relative;
}

.logo-left {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 90px; /* Ajusta según necesites */
}

.logo-right {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 75px;
}

/*.encabezado {
	background-image: url('Encabezado.svg');
	background-repeat: ;
	background-size: cover; /* Ajusta el SVG para cubrir todo el contenedor */
	/*background-position: center; /* Centra la imagen */
	/*height: 150px; /* Altura del div */
	/*width: 100%; /* Abarca el ancho completo */
	/*margin: 0 auto;
}*/

.fotoAsesor{
	/*text-align: center;*/
	width: 150px; /* Ajusta el tamaño según tus necesidades */
    height: 150px;
    overflow: hidden;
    border-radius: 50%; /* Hace que los bordes sean redondeados */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin: 0 auto;
	margin-top: 50px;
}

.fotoPerfil{
	/*margin-top: 50px;*/
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-container-derecha {
    display: flex;
    justify-content: right;
    align-items: center;
}

.button-container-izquierda {
    display: flex;
    justify-content: left;
    align-items: center;
}

.round-button-email {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #8B0000, #A52A2A); /* Fondo con degradado basado en darkred */
    /*box-shadow: 4px 4px 8px #5A0000, -4px -4px 8px #C04040; /* Sombras con tonos oscuros y claros de darkred */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-email:active {
    box-shadow: inset 4px 4px 8px #5A0000, inset -4px -4px 8px #C04040; /* Efecto presionado con sombras internas */
}

.round-button-email:hover {
    background: linear-gradient(145deg, #A52A2A, #8B0000); /* Inversión del degradado en hover */
}

.round-button-whatsapp {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #25D366, #1DB954); /* Fondo con degradado basado en el verde de WhatsApp */
    /*box-shadow: 4px 4px 8px #1A9E4F, -4px -4px 8px #2EFE81; /* Sombras con tonos oscuros y claros del verde de WhatsApp */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-whatsapp:active {
    box-shadow: inset 4px 4px 8px #1A9E4F, inset -4px -4px 8px #2EFE81; /* Efecto presionado con sombras internas */
}

.round-button-whatsapp:hover {
    background: linear-gradient(145deg, #1DB954, #25D366); /* Inversión del degradado en hover */
}

.round-button-llamar {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #17A2B8, #138496); /* Fondo con degradado basado en el azul info de Bootstrap */
    /*box-shadow: 4px 4px 8px #138496, -4px -4px 8px #4DB8D6; /* Sombras con tonos oscuros y claros del azul info */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-llamar:active {
    box-shadow: inset 4px 4px 8px #138496, inset -4px -4px 8px #4DB8D6; /* Efecto presionado con sombras internas */
}

.round-button-llamar:hover {
    background: linear-gradient(145deg, #138496, #17A2B8); /* Inversión del degradado en hover */
}


.round-button-facebook {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #1877F2, #145DB1); /* Fondo con degradado basado en el azul de Facebook */
    /*box-shadow: 4px 4px 8px #145DB1, -4px -4px 8px #4A98F7; /* Sombras con tonos oscuros y claros del azul */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-facebook:active {
    box-shadow: inset 4px 4px 8px #145DB1, inset -4px -4px 8px #4A98F7; /* Efecto presionado con sombras internas */
}

.round-button-facebook:hover {
    background: linear-gradient(145deg, #145DB1, #1877F2); /* Inversión del degradado en hover */
}

.round-button-tiktok {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #343A40, #212529); /* Fondo con degradado basado en el azul de Facebook */
    /*box-shadow: 4px 4px 8px #145DB1, -4px -4px 8px #4A98F7; /* Sombras con tonos oscuros y claros del azul */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-tiktok:active {
    box-shadow: inset 4px 4px 8px #212529, inset -4px -4px 8px #4C565C; /* Efecto presionado con sombras internas */
}

.round-button-tiktok:hover {
    background: linear-gradient(145deg, #212529, #343A40); /* Inversión del degradado en hover */
}

.round-button-descarga {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #343A40, #212529); /* Fondo con degradado basado en el dark de Bootstrap */
    /*box-shadow: 4px 4px 8px #212529, -4px -4px 8px #4C565C; /* Sombras con tonos oscuros y claros del dark */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-descarga:active {
    box-shadow: inset 4px 4px 8px #212529, inset -4px -4px 8px #4C565C; /* Efecto presionado con sombras internas */
}

.round-button-descarga:hover {
    background: linear-gradient(145deg, #212529, #343A40); /* Inversión del degradado en hover */
}

.round-button-ubicacion {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: linear-gradient(145deg, #FFC107, #FF9F00); /* Fondo con degradado basado en el warning de Bootstrap */
    /*box-shadow: 4px 4px 8px #FF9F00, -4px -4px 8px #FFCE56; /* Sombras con tonos oscuros y claros del warning */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-ubicacion:active {
    box-shadow: inset 4px 4px 8px #FF9F00, inset -4px -4px 8px #FFCE56; /* Efecto presionado con sombras internas */
}

.round-button-ubicacion:hover {
    background: linear-gradient(145deg, #FF9F00, #FFC107); /* Inversión del degradado en hover */
}

.round-button-compartir {
    width: 75px; /* Tamaño del botón */
    height: 60px;
    border: none;
    border-radius: 25px; /* Hace el botón circular */
    background: #D67C1C; /* Naranja mate */
    /* box-shadow: 4px 4px 8px #8C4E12, -4px -4px 8px #F5A623; /* Sombras suaves */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Animación para hover */
}

.round-button-compartir:active {
    box-shadow: inset 4px 4px 8px #8C4E12, inset -4px -4px 8px #F5A623; /* Efecto presionado con sombras internas */
}

.round-button-compartir:hover {
    background: #C96F19; /* Un tono más oscuro para el hover */
}

/* Aseguramos que el HTML y el body ocupen toda la altura */
html, body {
    height: 100%; /* Altura completa de la página */
    margin: 0; /* Eliminar márgenes predeterminados */
}

/* Utilizamos flexbox en el body para que el footer se mantenga abajo */
body {
    display: flex;
    flex-direction: column;
}

/* El contenido de la página debe ocupar todo el espacio disponible */
.content {
    flex: 1; /* Hace que el contenido ocupe el espacio disponible */
}

/* Estilos básicos para el footer */
.footer {
    background-color: #343A40; /* Color de fondo oscuro */
    color: #FFFFFF; /* Color de texto blanco */
    padding: 10px 0; /* Espaciado */
    text-align: center; /* Centrar el contenido */
}

.footer .container {
    width: 80%; /* Contenedor con un ancho razonable */
    margin: 0 auto; /* Centrado del contenedor */
}

.footer h3 {
    font-size: 24px; /* Tamaño de la fuente del nombre */
    margin-bottom: 10px;
}

.footer p {
    font-size: 16px; /* Tamaño de la fuente para los párrafos */
    margin: 5px 0; /* Espaciado entre los párrafos */
}

.footer a {
    color: #17A2B8; /* Color de enlace */
    text-decoration: none; /* Eliminar subrayado */
}

.footer a:hover {
    text-decoration: underline; /* Subrayar al pasar el cursor */
}

.container-qr {
    display: flex; /* Activamos el contenedor flex */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    height: 200px; /* Altura del contenedor, ajusta según lo necesites */
    width: 100%; /* El ancho puede ser 100% o el que necesites */
}

.container-qr img {
    max-width: 100%; /* Limita el ancho máximo de la imagen */
    max-height: 100%; /* Limita la altura máxima de la imagen */
}

/* Colores personalizados para las NavTabs */
/*.nav-tabs .nav-link.active {
	color: white;
	background-color: darkred;
}

.nav-tabs .nav-link {
	color: darkred;
}

.nav-tabs .nav-link:hover {
	color: white;
}*/

/* Estilo de los inputs */
.input-contactar {
	border: 2px solid #ced4da; /* Borde suave */
	border-radius: 8px; /* Bordes redondeados */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
	transition: border-color 0.3s, box-shadow 0.3s; /* Efecto de transición */
}

/* Estilo al enfocar */
.input-contactar:focus {
	border-color: #007bff; /* Color azul al enfocar */
	box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Resplandor */
	/* text-transform: uppercase;*/
}

/* Estilo de las etiquetas */
label {
	font-weight: bold;
	color: #495057; /* Gris oscuro */
	margin-bottom: 5px;
}

/* Botón */
.btn-contactar {
	background: linear-gradient(145deg, #28a745, #218838); /* Gradiente */
	border: none;
	border-radius: 8px;
	color: white;
	font-weight: bold;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra */
	transition: background 0.3s, transform 0.2s;
}

/* Efecto hover en el botón */
.btn-contactar:hover {
	background: linear-gradient(145deg, #218838, #28a745); /* Invertir gradiente */
	transform: translateY(-2px); /* Efecto flotante */
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Más sombra */
}

/* Ajuste de márgenes */
.row.g-3 > .col {
	margin-bottom: 15px; /* Espaciado entre filas */
}