/* Fuente y configuración general */
body {
/* font-family: 'Be Vietnam Pro', sans-serif; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
background-color: #fff;
padding-top: 40px;
}
/***************************************************************************************************************/
/***************************************************************************************************************/
/* General Header Styles */
header {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
backdrop-filter: blur(10px); /* Efecto de desenfoque */
position: fixed; /* Fijo al tope */
top: 0; /* Posición en la parte superior */
width: 100%; /* Ocupa todo el ancho */
z-index: 1000; /* Siempre por encima del contenido */
transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
height: 40px; /* Ajuste del tamaño del header */
}
/* Contenedor principal */
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
padding: 10px 20px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 20px;
}
.logo a {
display: inline-block;
cursor: pointer; /* Cambia el cursor a una manito */
}
/***************************************************************************************************************/
/***************************************************************************************************************/
h2 {
display: block;
/* font-size: 2em; */
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
unicode-bidi: isolate;
/* color: #5A189A; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #ab54ff;
font-size: 3em;
margin-top: 3.5rem;
}
h3 {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
}
h4 {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
}
.about-content {
text-align: center; /* Centra el contenido horizontalmente */
margin-top: 2.5rem;
}
.about-content h4 {
font-size: 1.45rem;
font-weight: 500;
}
.about-content_half {
/* margin: 3rem 0rem 0rem 0rem; */
padding: 30px 30px 30px 30px;
/* line-height: 1.6; */
color: #333;
}
/* Responsive */
@media (max-width: 905px) {
header {
padding: 5px 5px;
}
.header-container {
padding: 2px 5px;
}
}
/***************************************************************************************************************/
/***************************************** INICIO MENU *********************************************************/
/***************************************************************************************************************/
/* Menú de navegación */
.nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
flex: 1;
justify-content: center;
}
.nav-links li a {
color: #333;
text-decoration: none;
font-weight: 400;
font-size: 0.85rem;
transition: color 0.3s ease;
}
/* Idiomas en la derecha */
.nav-links li.language-selector {
display: flex;
gap: 10px;
margin-left: auto;
}
.nav-links li.language-selector button {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
padding: 5px;
transition: opacity 0.3s ease;
}
.nav-links li.language-selector button:hover {
opacity: 0.7;
}
.nav-links li {
position: relative;
}
/* Efecto de subrayado animado, más suave y delgado */
.nav-links li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; /* Ajuste de posición más cerca del texto */
width: 0;
height: 1px; /* Línea más delgada para un efecto más suave */
background-color: #612d91; /* Color del subrayado */
transition: width 0.5s ease; /* Aumenta el tiempo de transición */
}
/* Hover en formato pantalla grande */
.nav-links li a:hover::after {
width: 100%; /* Expande el subrayado a todo el ancho del enlace */
}
/* Estilo para el enlace activo */
.nav-links li a.active {
color: #a24afb;
}
.nav-links li a.active::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; /* Posición del subrayado */
width: 100%; /* Subrayado completo para el activo */
height: 1px; /* Línea delgada */
background-color: #612d91; /* Color del subrayado */
transition: width 0.5s ease; /* Suavidad del efecto */
}
.nav-links a.active {
/* font-weight: bold; */
color: #5a189a;
}
/****************************************************************************************************************/
/*************************************** INICIO MENU HAMBURGUESA ************************************************/
/****************************************************************************************************************/
/* Ocultar el menú hamburguesa en pantallas grandes */
/* .menu-icon {
display: none;
font-size: 28px;
cursor: pointer;
margin-left: auto;
} */
/* Menú hamburguesa (oculto en pantallas grandes) */
.menu-icon {
display: none; /* Ocultar en pantallas grandes */
cursor: pointer;
font-size: 30px;
transition: transform 0.3s ease, color 0.3s ease;
margin-left: 10px;
color: #6406c3; /* Color inicial */
z-index: 1000; /* Encima del menú móvil */
position: fixed; /* Fijo para que no desaparezca */
top: 5px;
right: 10px;
}
/* Icono de hamburguesa cambia de color cuando se despliega el menu*/
.menu-icon.active {
color: #ffffff;
}
/* Estilo del menú móvil - Fondo ocupa todo el ancho de la pantalla */
.mobile-menu {
display: none; /* Oculto por defecto */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Ocupa toda la pantalla */
background-color: #6e07d5;
z-index: 999; /* Encima de todo */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
}
.mobile-menu button {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
}
.mobile-menu button:hover {
opacity: 1;
}
/* Enlaces del menú móvil, fondo toda la pantalla */
.mobile-menu a {
color: #ffffff;
text-decoration: none;
font-size: 1.5em; /* Tamaño más grande para mejor visibilidad */
margin: 15px 0; /* Espacio entre los enlaces */
font-weight: 400;
padding: 10px 20px; /* Espacio alrededor del texto */
border-radius: 8px; /* Bordes redondeados para el fondo */
transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
text-align: center;
}
.mobile-menu a:last-child {
border-bottom: none;
}
/* Efecto hover: cambio de color de fondo y subrayado animado */
.mobile-menu a:hover {
background-color: #fff; /* Fondo blanco */
color: #333; /* Texto oscuro */
border-radius: 15px;
font-weight: 600;
}
/* Mostrar el menú cuando tiene la clase active */
.mobile-menu.active {
display: flex;
font-weight: 500;
}
/* Responsive */
@media (max-width: 905px) {
.menu-icon {
display: block;
padding-right: 1rem;
color: #6406c3;
transition: color 0.3s ease;
}
.menu-icon.active {
color: #ffffff !important; /* Fuerza el color blanco */
padding: 0px 16px 0px 0px;
}
.nav-links {
display: none; /* Ocultar navegación y botones de idioma en pantallas pequeñas */
}
.mobile-language-selector {
display: flex; /* Mostrar botones de idioma en móviles */
justify-content: center;
}
}
/*************************************************************************************************************/
/************************************ Adaptación para dispositivos móviles ***********************************/
/*************************************************************************************************************/
section {
max-width: 1200px; /* Ancho máximo para pantallas grandes */
margin: 0 auto; /* Centra la sección en la página */
padding: 0 20px; /* Asegura espacio a la izquierda y derecha en pantallas pequeñas */
}
/*************************************************************************************************************/
/******************************************* botones de idiomas *********************************************/
/*************************************************************************************************************/
/* pantallas grandes */
/* Iconos de idioma para pantallas grandes */
.language-selector {
display: flex; /* Visible por defecto en pantallas grandes */
align-items: center; /* Alinea verticalmente */
gap: 10px; /* Espaciado entre los iconos */
margin-left: 20px; /* Espacio entre el menú y los iconos */
}
.language-selector button {
background: none;
border: none;
cursor: pointer;
font-size: 1.5rem; /* Tamaño de los iconos */
line-height: 1;
padding: 5px;
transition: opacity 0.3s ease; /* Suavidad al cambiar opacidad */
opacity: 0.5; /* Reducir opacidad */
}
.language-selector button:hover {
opacity: 0.7; /* Cambia la opacidad al pasar el mouse */
transform: scale(1.2); /* Aumenta ligeramente el tamaño al pasar el mouse */
background: #80808036;
/* border-radius: 50%; */
}
/* Ocultar botones de idioma grandes en móviles */
@media screen and (max-width: 905px) {
.language-selector {
display: none; /* Se ocultan en móviles */
}
}
/* moviles */
/* Botones de idioma para móviles */
.mobile-language-selector {
display: flex; /* Ocultos por defecto en pantallas grandes */
position: relative;
/* Debajo del header */
/* top: 70px; */
width: 100%; /* Centrado horizontalmente */
text-align: center; /* Centra los botones */
z-index: 1000; /* Encima del menú móvil */
gap: 10px; /* Espacio entre botones */
justify-content: center; /* Centra horizontalmente */
/* margin-top: 20px; */
}
.mobile-language-selector button {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
opacity: 0.7; /* Reducida para que resalten menos */
transition: opacity 0.3s, transform 0.2s;
}
.mobile-language-selector button:hover {
opacity: 1; /* Resalta al pasar el cursor */
}
/* Estado activo de los botones de idioma */
.language-selector button.active,
.mobile-language-selector button.active {
opacity: 1; /* Opacidad máxima */
transform: scale(1.1); /* Aumenta ligeramente el tamaño */
color: #5a189a; /* Color distintivo */
}
/* Mostrar botones de idioma móviles en pantallas pequeñas */
@media screen and (max-width: 905px) {
.mobile-language-selector {
display: flex; /* Se muestran solo en móviles */
}
}
/* Ocultar botones de idioma móviles en pantallas grandes */
@media (min-width: 906px) {
.mobile-language-selector {
display: none;
}
}
/********************************************************************************************************/
/************************************************ footer ************************************************/
/********************************************************************************************************/
/* Estilo del footer */
.footer {
/* background-color: #5A189A; */
/* background-color: #3C096C; */
/* background-color: #7644ba; */
background-color: #6406c3;
color: #ffffff;
padding: 1.2rem 1rem;
text-align: center;
font-size: 0.8em;
margin-top: 4rem;
position: relative; /* Se mantiene en su lugar */
}
.footer-container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Información de la empresa */
.footer-info h3 {
font-size: 1.5em;
margin-bottom: 0.5rem;
color: #ffffff;
}
.footer-info p {
margin: 0.3rem 0;
color: #d1c4e9; /* Texto secundario */
}
/* Redes sociales */
.footer-social h4 {
font-size: 1.2em;
margin-bottom: 0.5rem;
color: #e0bbe4;
}
/* Contenedor de íconos sociales */
.social-icons {
display: flex;
justify-content: center;
gap: 1rem;
}
/* Estilo para los íconos sociales */
.social-icons a img {
width: 24px; /* Tamaño ajustado para los iconos */
height: 24px;
transition: transform 0.3s ease, filter 0.3s ease;
display: inline-block;
margin: 0 10px;
}
/* Efecto hover para los íconos sociales */
.social-icons a:hover img {
transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
filter: brightness(0.8); /* Oscurece ligeramente para resaltar el efecto */
}
/* Footer email */
.footer-email {
color: #00d3d5; /* Color del texto del correo electrónico */
font-size: 0.9rem;
font-weight: 500;
text-decoration: none; /* Sin subrayado por defecto */
}
/* Efecto hover para el correo electrónico */
.footer-email:hover {
text-decoration: underline;
color: #05cdd9; /* Color más intenso al pasar el mouse */
}
.footer-countries {
margin-top: 20px;
text-align: center; /* Centra el contenido dentro del contenedor */
}
.footer-countries h4 {
font-size: 1.2rem;
color: #e0bbe4;
margin-bottom: 1.2rem;
}
.footer-countries ul {
list-style: none; /* Elimina los puntos del listado */
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center; /* Centra los elementos del listado */
}
.footer-countries ul li {
margin: 0;
}
.footer-countries ul li a {
color: #ffffff; /* Color blanco para el texto */
text-decoration: none;
font-size: 0.9rem;
padding: 5px 10px;
background: linear-gradient(to right, #5b00f7, #ba62fc);
border-radius: 15px;
transition: background-color 0.3s ease, transform 0.2s ease;
display: block;
}
.footer-countries ul li a:hover {
background: linear-gradient(to right, #f2416b, #ba62fc); /* Cambiar degradado */
transform: scale(1.05);
}
/* Responsividad */
@media (max-width: 480px) {
.social-icons a img {
width: 28px; /* Ajusta el tamaño en pantallas más pequeñas */
height: 28px;
}
}
/*******************************************************************************************************/
/************************************************ LATAM PAGE *******************************************/
/*******************************************************************************************************/
.subtitle-latam {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
font-size: 1.30rem;
font-weight: 500;
margin-top: 3rem;
}
.subtitle-2-latam {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.30rem;
font-weight: 500;
color:#333;
margin: 1rem 0rem 0rem 0rem;
}
.link-list-latam {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #038ff7;
font-weight: 500;
text-decoration:
underline;
font-size: 1rem;
margin-top: 1rem;
display: inline-block;
}
.split-text_title-latam h1 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
/* font-size: 2em; */
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
/* color: #5A189A; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
}
.split-text_title-latam h2 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
/* font-size: 2em; */
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
/* color: #5A189A; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
}
.about-content-latam {
text-align: center; /* Centra el contenido horizontalmente */
margin-top: 2.5rem;
}
.about-content-latam h4 {
font-size: 1.25rem;
font-weight: 500;
}
/* Estilos para el contenedor del mapa */
.map-section {
text-align: center;
margin: 40px auto;
padding: 20px;
max-width: 800px; /* Ajusta el ancho máximo de la sección */
}
.map-section h3 {
font-size: 1.8em;
margin-bottom: 20px;
color: #333;
}
/* Contenedor de la imagen del mapa */
.map-container img {
width: 90%;
height: auto;
border-radius: 25px; /* Bordes redondeados para la imagen */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para darle un efecto elevado */
/* background-color: #f9f9f9; */
background-color: #F0F0F0;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
}
/* Columna del mapa */
.map-container {
position: relative;
width: 60%;
display: inline-block;
vertical-align: top;
}
/* Imagen del mapa */
.map-image {
width: 100%;
display: block;
}
/* Estilos para la lista de países */
.countries-list {
width: 30%;
display: inline-block;
vertical-align: top;
margin-right: 20px;
}
.countries-list h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.countries-list ul {
list-style: none;
padding: 0;
}
.countries-list li {
background-color: #754ab5;
color: white;
padding: 8px 12px;
margin: 5px 0;
border: none;
cursor: pointer;
text-align: center;
border-radius: 25px;
transition: background-color 0.3s;
font-size: 16px;
}
.countries-list li:hover {
background-color: #180029;
}
.countries-list li a {
display: block; /* Asegura que ocupe todo el área del botón */
text-decoration: none; /* Elimina el subrayado del enlace */
color: inherit; /* Usa el color del contenedor padre (el ) */
width: 100%; /* Ocupa todo el ancho del */
height: 100%; /* Ocupa todo el alto del */
}
/* Divs de overlay para cada país */
.country-overlay {
position: absolute;
cursor: pointer;
background-color: transparent;
border-radius: 50%; /* Hover redondo */
transition: background-color 0.3s;
}
.country-overlay:hover {
/* background-color: rgba(0, 0, 0, 0.3); */
}
.coverage-section {
display: flex;
gap: 20px;
margin-top: 5rem;
margin-bottom: 5rem;
}
.countries-list {
width: 40%;
}
/* Imagen del mapa */
.interactive-map {
width: 100%;
background-color: white;
position: relative;
border: 2px solid #ddd;
}
/* Estilo del popup */
.popup {
position: absolute;
padding: 10px;
background-color: rgba(0, 0, 0, 0.75);
color: white;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-size: 0.9em;
}
.hidden {
display: none;
}
/* Contenedor de ambas columnas */
.main-container {
display: flex;
flex-direction: row; /* Muestra las columnas en línea */
justify-content: space-between;
align-items: flex-start;
}
/* Columna de la lista de países */
.countries-list {
width: 40%;
padding-right: 20px;
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 500px) {
.main-container {
flex-direction: column; /* Cambia a disposición en columna */
align-items: center; /* Centra los elementos */
}
.map-container {
width: 100%; /* Ocupa todo el ancho */
padding-right: 0; /* Elimina el padding derecho en la lista */
margin-top: 20px;
}
.countries-list {
width: 30%;
display: contents;
vertical-align: top;
margin-right: 20px;
}
}
@media (max-width: 900px) {
.main-container {
flex-direction: column;
align-items: center;
}
.countries-list {
width: 30%;
display: contents;
vertical-align: top;
margin-right: 20px;
}
.map-container {
position: relative;
width: 90%;
display: inline-block;
vertical-align: top;
}
.map-container img {
width: 100%;
height: auto;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
background-color: #F0F0F0;
margin-top: 1rem;
}
}
/*********************************/
/***** Estilo para el botón *****/
/*********************************/
.btn-talk-latam {
display: inline-block; /* Se asegura de que sea tratada como un elemento de línea */
margin-top: 1rem; /* Espaciado superior */
padding: 0.75rem 1.5rem; /* Tamaño del botón */
font-size: 1rem; /* Tamaño del texto */
font-weight: 500; /* Negrita */
color: #fff; /* Color del texto */
background: linear-gradient(to right, #5b00f7, #ba62fc); /* Degradado del botón */
border: none;
border-radius: 25px; /* Bordes redondeados */
text-decoration: none; /* Elimina el subrayado del enlace */
text-align: center; /* Centra el texto dentro del botón */
transition: all 0.3s ease; /* Animación para hover */
box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.1);
}
/* Efecto hover */
.btn-talk-latam:hover {
background: linear-gradient(to right, #f2416b, #ba62fc, #5b00f7); /* Cambia el degradado al pasar el cursor */
transform: scale(1.05); /* Aumenta ligeramente el tamaño */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
}
/* Efecto clic */
.btn-talk-latam:active {
transform: scale(0.95); /* Reduce el tamaño ligeramente */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Simula un "hundimiento" */
}
/* Estilo del popup del mapa */
.popup-latam {
position: absolute;
display: none;
padding: 8px;
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
font-size: 0.9rem;
color: #333;
white-space: nowrap;
z-index: 10;
pointer-events: none;
transform: translate(-50%, -100%);
}
/**********************************************************************************************/
/**************************************** INDEX PAGINA ****************************************/
/**********************************************************************************************/
/************************************** HERO IMAGE INDEX **************************************/
.full-width-image {
margin-right: 0;
margin-left: 0;
padding: 0;
margin-top: 2rem;
margin-bottom: 1rem;
width: 100vw; /* Asegura que abarque todo el ancho de la ventana */
}
.full-width-image_container {
margin-right: 0;
margin-left: 0;
padding: 0;
margin-top: 2rem;
margin-bottom: 1rem;
width: 100vw; /* Asegura que abarque todo el ancho de la ventana */
}
.full-width-image img {
width: 100vw; /* Abarca todo el ancho de la ventana */
height: auto; /* Mantiene la proporción */
display: block; /* Elimina espacios en blanco adicionales */
object-fit: cover; /* Cubre el contenedor */
}
.full-width-background {
background-color: #f5f5f7;
margin-top: 2rem;
margin-bottom: 1rem;
padding: 30px 0px 0px 0px;
width: 100vw; /* Asegura que abarque todo el ancho de la ventana */
/* Ajusta la altura según lo necesario */
/* height: 300px; */
/* background-image: url('img/your-image-name.jpg'); */
background-size: cover; /* La imagen se adapta al contenedor */
background-position: center; /* Centra la imagen horizontal y verticalmente */
background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/* CONTAINER IMAGE AND TEXT */
.split-container {
display: flex;
flex-wrap: wrap; /* Permite que los elementos se reorganicen en varias líneas */
width: 100%; /* Ocupa todo el ancho del contenedor padre */
margin: 0; /* Elimina cualquier margen */
height: auto; /* Ajusta automáticamente según el contenido */
}
.split-image {
flex: 1; /* Toma la mitad del ancho */
max-width: 50%; /* Limita a un máximo del 50% del contenedor en pantallas grandes */
margin: 0; /* Sin margen para alinearlo perfectamente al borde */
padding: 0;
}
.split-image img {
width: 100%;
height: auto; /* Asegura que la altura se ajuste automáticamente */
object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
display: block;
}
.split-text {
flex: 1;
max-width: 50%;
padding: 0rem 2rem 2rem 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start; /* Alinea el contenido al inicio (superior) */
text-align: left;
}
.split-text h2 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 2.5rem; /* Ajusta según lo necesario */
font-weight: 500;
background: linear-gradient(to right,#0090f7,#ba62fc,#f2416b); /* Degradado de izquierda a derecha */
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
/* color: #9e0acb;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 500; */
padding-top: 1.5rem;
}
.split-text p {
font-size: 1.25rem;
line-height: 1.6;
color: #6c6c6c;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 400;
}
.split-text_title h2 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #eb45fbd1);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 4.25em;
margin-top: 3rem;
margin-bottom: 1px;
}
.split-text_title h1 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #eb45fbd1);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 4.25em;
margin-top: 3rem;
margin-bottom: 1px;
}
.subtitle-h2 {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
padding: 0rem 1rem 0rem 1rem;
font-size: 1.45rem;
font-weight: 500;
}
.subtitle-h2-black {
color: #1d1d1f;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 500;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 2.5rem;
margin-top: 1.5rem;
}
.p-black {
color: #6c6c6c;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.25rem;
padding: 0rem 2rem 0rem 2rem;
line-height: 1.6;
}
.split-text-more-info {
color: #038ff7;
font-weight: 500;
text-decoration: underline;
font-size: 1rem;
margin-top: 1rem;
display: inline-block;
}
/* Testimonials Section */
.testimonials-section {
background-color: #f5f5f7;
padding: 2rem 2rem 4rem 2rem;
text-align: center;
width: 100vw; /* Ocupa todo el ancho de la pantalla */
box-sizing: border-box; /* Incluye el padding dentro del ancho */
margin-top: 3rem;
margin-bottom: 2rem;
}
.testimonials-section h2 {
font-size: 3rem;
color: #7f07f7;
margin-bottom: 3rem;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 500;
margin-bottom: 4rem;
margin-top: 2.5rem;
}
.testimonials-section h4 {
color: #777777;
margin-top: 0rem;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
/* Testimonials Grid */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 1200px; /* Ancho máximo para el contenido */
margin: 0 auto; /* Centra el contenido dentro de la sección */
}
/* Individual Testimonial */
.section-testimonials {
margin: 0;;
}
.testimonial {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.testimonial img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
}
.testimonial h3 {
font-size: 1.25rem;
color: #333;
margin-bottom: 10px;
}
.testimonial p {
font-size: 1rem;
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
/* Stars */
.stars {
color: #ffc107; /* Amarillo para las estrellas */
font-size: 1.2rem;
margin-bottom: 2rem;
margin-top: 1.5rem;
}
/****************************************************************************************/
/**************************************** QUERYS ****************************************/
/****************************************************************************************/
/* tablets */
@media screen and (max-width: 932px) {
.split-container {
flex-direction: column; /* Cambia la dirección de los elementos a vertical */
}
.split-image,
.split-text {
max-width: 100%; /* Ambos toman el 100% del ancho */
}
.split-text {
padding: 1rem; /* Ajusta el padding para pantallas pequeñas */
text-align: center; /* Centra el texto */
}
.split-image img {
margin-top: 1rem; /* Añade un poco de espacio entre el texto y la imagen */
}
.about-content {
line-height: 1.2;
}
.full-width-image img {
height: 300px; /* Aumenta la altura para dispositivos móviles */
object-fit: cover; /* Recorta los lados para ajustarse al contenedor */
object-position: center; /* Centra la imagen recortada */
}
}
/* celulares */
@media screen and (max-width: 480px) {
.split-text_title h1 {
padding: 0px 2px 0px 2px;
}
.split-text h2 {
font-size: 2rem; /* Reduce el tamaño del título en pantallas muy pequeñas */
line-height: 1;
padding: 0px 2px 0px 2px;
}
.split-text p {
font-size: 1.25rem; /* Ajusta el tamaño del texto del párrafo */
}
.about-content {
line-height: 1;
}
.about-content_half {
padding: 5px;
}
}
/**********************************************************************************************/
/******************************** Estilo para el botón contact ********************************/
/**********************************************************************************************/
.btn-talk {
display: inline-block; /* Se asegura de que sea tratada como un elemento de línea */
margin-top: 1rem; /* Espaciado superior */
padding: 0.8rem 1.75rem; /* Tamaño del botón */
font-size: 1rem; /* Tamaño del texto */
font-weight: 600; /* Negrita */
color: #fff; /* Color del texto */
/* background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #8A2BE2); /* Degradado del botón */
border: none;
border-radius: 25px; /* Bordes redondeados */
text-decoration: none; /* Elimina el subrayado del enlace */
text-align: center; /* Centra el texto dentro del botón */
transition: all 0.4s ease; /* Animación para hover */
margin-bottom: 1rem;
box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.1);
}
/* Efecto hover */
.btn-talk:hover {
background: linear-gradient(to right, #f2416b, #ba62fc, #5b00f7); /* Cambia el degradado al pasar el cursor */
transform: scale(1.05); /* Aumenta ligeramente el tamaño */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
}
/* Efecto clic */
.btn-talk:active {
transform: scale(0.95); /* Reduce el tamaño ligeramente */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Simula un "hundimiento" */
}
/*******************************************************************************************************/
/******************************************* WIDGET TRUST US *******************************************/
/*******************************************************************************************************/
/* Widget Container */
.widget-container-trust {
display: grid;
/* 4 columnas en total */
/* grid-template-columns: repeat(4, 1fr); */
grid-template-rows: auto auto; /* Dos filas automáticas */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
margin-top: 1.5rem;
}
/* Widget Styles */
.widget-trust {
/* background-color: #f5f5f7; */
/* background-color: #00CED1; */
/* background-color: #8f1fff; */
background-color: #7f07f7;
border-radius: 30px;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
}
.widget-trust:hover {
/* transform: translateY(-1px); */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
/* Widget Sizes */
.widget-large-trust {
grid-column: span 3; /* Ocupa tres columnas */
grid-row: span 1; /* Una sola fila */
}
/* Específicos para posición */
#why-trust-us {
grid-column: span 3; /* Primera fila, ocupa 3 columnas */
grid-row: 1;
padding-bottom: 2.5rem;
}
/* Typography */
.widget-trust h2 {
font-size: 2.5em;
font-weight: 500;
/* color: #5A189A; */
color: #8c35fa;
margin-bottom: 0.5rem;
margin-top: 2rem;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.widget-trust h3 {
font-size: 1.75em;
/* color: #0077C8; */
/* color: #932cdf; */
/* color: #7f28f9; */
color: #00eef1;
margin-bottom: 2rem;
margin-top: 2rem;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: bold;
}
.widget-trust h4 {
font-size: 1.3em;
color: #555;
margin-bottom: 10px;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.widget-trust p {
font-size: 1.25em;
/* color: #666; */
color: #ededed;
line-height: 1.6;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
@media (max-width: 905px) {
.widget-container-trust {
display: flex; /* Cambia a flexbox */
/* flex-direction: column; */
gap: 20px; /* Espacio entre los widgets */
}
.widget-trust {
width: 100%; /* Cada widget ocupa todo el ancho del contenedor */
}
}
/**********************************************************************************************/
/****************************************** SERVICES ******************************************/
/**********************************************************************************************/
.subtitle-services {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
font-size: 1.45rem;
font-weight: 500;
}
.split-text_title-services h2 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
/* font-size: 2em; */
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
/* color: #5A189A; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
margin-bottom: 2.5rem;
}
.split-text_title-services h1 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(48deg, #502ba5, #d05bf4); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
/* font-size: 2em; */
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
/* color: #5A189A; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
margin-bottom: 2.5rem;
}
.about-content-services {
text-align: center; /* Centra el contenido horizontalmente */
margin-top: 2.5rem;
}
.about-content-services h2 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.about-content-services h4 {
font-size: 1.25rem;
font-weight: 500;
}
/************************************************/
/**************** CARDS SERVICES ****************/
/************************************************/
/* Sección de servicios */
.services-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Contenedor de las tarjetas */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas grandes */
gap: 1.5rem; /* Espaciado entre las tarjetas */
margin: 2rem 0; /* Separación vertical */
}
/* Estilos de tarjetas */
.service-card-1 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-decoration: none;
color: #000000;
overflow: hidden; /* Evita contenido fuera de los bordes */
/* background-color: #f9f9f9; */
background-color: #7f07f7;
border-radius: 30px; /* Bordes redondeados */
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.1);
position: relative;
/* height: 220px; */
min-height: 220px;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.4rem;
padding: 20px;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}
/* Títulos en las tarjetas */
.service-card-1 h3 {
font-size: 1.2em;
margin: 0;
padding: 0.5rem 1rem;
/* text-align: center; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #a736fb; */
/* color: #f9f9f9; */
background: linear-gradient(to right, #ffffff, #ff9dfa, #f2416b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.service-card-1 p {
font-size: 0.75em;
margin: 0.5rem 0rem 2rem 0rem;
padding: 0 1rem;
text-align: start;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
letter-spacing: .011em;
color: #ededed;
/* color: #323232; */
}
/* Hover para resaltar el borde */
.service-card-1:hover {
border-color: rgba(160, 50, 255, 0.5); /* Cambia el color del borde */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
transform: scale(1.01); /* Efecto de zoom sutil */
}
.service-card-2 {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-decoration: none;
color: #000000;
overflow: hidden; /* Evita contenido fuera de los bordes */
background-color: #f9f9f9; /* Fondo por defecto */
border-radius: 30px; /* Bordes redondeados */
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.1);
position: relative;
/* height: 220px; */
min-height: 220px;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.4rem;
padding: 20px;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
border-top: 0.5px solid #dfdfdf;
border-left: 0.5px solid #dfdfdf;
}
/* Imagen en las tarjetas */
.service-card img {
width: 100%; /* Ocupa el ancho del contenedor */
height: auto; /* Mantiene la proporción original */
object-fit: cover; /* Ajusta para cubrir todo el área visible */
border-radius: 20px;
}
/* Títulos en las tarjetas */
.service-card-2 h3 {
font-size: 1.2em;
margin: 0;
padding: 0.5rem 1rem;
/* text-align: center; */
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
color: #a736fb;
}
.service-card-2 p {
font-size: 0.75em;
margin: 0.5rem 0rem 2rem 0rem;
padding: 0 1rem;
text-align: start;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
letter-spacing: .011em;
color: #323232;
}
/* Hover para resaltar el borde */
.service-card-2:hover {
border-color: rgba(159, 50, 255, 0.246); /* Cambia el color del borde */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
transform: scale(1.01); /* Efecto de zoom sutil */
}
/* Hover para las tarjetas */
/* .service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
} */
/* Ajuste para iconos en tarjetas de servicio */
.service-icon {
width: 100px; /* Aumenta el tamaño del icono */
height: auto;
margin: 0; /* Elimina el centrado automático */
margin-bottom: 5px; /* Más espacio entre icono y título */
align-self: flex-start; /* Alineación al inicio (izquierda) */
padding-top: 1.5rem;
padding-left: 0.5rem;
}
/********** QUERIES CARDS SERVICES **********/
/* Responsive */
@media (max-width: 942px) {
.services-grid {
grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
gap: 2rem;
}
}
@media (max-width: 700px) {
.services-grid {
grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
gap: 2rem;
}
.service-card img {
width: 100%; /* Ocupa el ancho del contenedor */
height: auto; /* Mantiene la proporción original */
object-fit: cover; /* Ajusta para cubrir todo el área visible */
border-radius: 20px;
}
.service-icon {
/* align-self: center; */
}
.service-card-1 {
display: flex;
flex-direction: column;
/* justify-content: center;
align-items: center; */
margin: 1rem;
}
.service-card-2 {
display: flex;
flex-direction: column;
/* justify-content: center;
align-items: center; */
margin: 1rem;
}
.service-card-1 p {
/* text-align: center; */
}
.service-card-2 p {
/* text-align: center; */
}
}
/***********************************************/
/********* WHY CHOOSE SECTION SERVICES *********/
/***********************************************/
.why-choose-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 1rem;
text-align: center;
}
.why-choose-section h2 {
color: #1d1d1f;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 500;
margin: 7rem 3rem 3rem 3rem;
font-size: 2.5rem;
}
.why-choose-title {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 2rem;
color: #5a189a;
font-family: 'SF Pro Display', Helvetica, Arial, sans-serif;
}
/* Column Layout */
.why-choose-columns {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns for large screens */
gap: 5rem;
text-align: left; /* Align text to the left inside each column */
}
/* Individual Column */
.why-choose-column h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #7f07f7;
font-weight: 600;
}
.why-choose-column p {
font-size: 1rem;
color: #666;
line-height: 1.6;
}
/* Divider Line Below h3 */
.divider {
width: 100%; /* Toma todo el ancho de la columna */
height: 1px; /* Altura de la línea */
background-color: #7f07f7; /* Color de la línea */
margin: 0.5rem 0 1rem 0; /* Espaciado: arriba, derecha, abajo, izquierda */
border-radius: 5px; /* Bordes redondeados para una línea suave */
}
/* Responsive Design */
@media (max-width: 768px) {
.why-choose-columns {
grid-template-columns: 1fr; /* Single column on smaller screens */
gap: 1.5rem;
padding: 3rem;
}
}
/************************************************************************************************/
/****************************************** ABOUT PAGE ******************************************/
/************************************************************************************************/
.subtitle-about {
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #333232; */
color: #777777;
font-size: 1.45rem;
font-weight: 500;
}
.split-text_title-about h2 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(38deg, #bd03ff, #ddbaff); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
}
.split-text_title-about h1 {
/* Degradado de izquierda a derecha */
/* background: linear-gradient(38deg, #bd03ff, #ddbaff); */
background: linear-gradient(to right, #5b00f7, #ba62fc, #f2416b);
-webkit-background-clip: text; /* Aplica el degradado solo al texto */
-webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el degradado */
background-clip: text; /* Compatibilidad para navegadores que no usan -webkit */
text-fill-color: transparent; /* Compatibilidad adicional */
display: block;
margin-block-start: 0.83em;
/* margin-block-end: 0.83em; */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: 500;
unicode-bidi: isolate;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* color: #ab54ff; */
font-size: 3.5em;
margin-top: 4rem;
}
.about-content-about {
text-align: center; /* Centra el contenido horizontalmente */
margin-top: 2.5rem;
margin-bottom: 1rem;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.about-content-about h2 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.about-content-about h4 {
font-size: 1.25rem;
font-weight: 500;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
/*****************************/
/********** QUERYS **********/
/****************************/
/* tablets */
@media screen and (max-width: 800px) {
.about-content-about {
line-height: 1.2;
}
}
/* celulares */
@media screen and (max-width: 480px) {
.about-content-about {
line-height: 1;
}
}
/****************************/
/***** Widget Container *****/
/****************************/
.widget-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Dos columnas */
grid-template-rows: auto auto; /* Dos filas automáticas */
gap: 1.5rem;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
margin-top: 1.5rem;
}
/* Widget Styles */
.widget {
/* background-color: #f9f9f9; */
background-color: #F0F0F0;
border-radius: 15px;
box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: left;
transition: transform 0.3s, box-shadow 0.3s;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
}
.widget:hover {
/* transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); */
}
/* Widget Sizes */
.widget-large {
grid-column: span 1; /* Ocupa una columna */
}
.widget-medium,
.widget-small {
grid-column: span 1; /* Ocupa una columna */
}
/* Orden de los widgets */
#mission {
grid-column: 1; /* Columna izquierda */
grid-row: 1;
}
#summary {
grid-column: 2; /* Columna derecha */
grid-row: 1;
}
#what-we-do {
grid-column: 1; /* Debajo de Our Mission */
grid-row: 2;
}
#mtp {
grid-column: 2; /* Debajo de Our Value */
grid-row: 2;
}
/* Typography */
.widget h3 {
font-size: 1.5em;
color: #a952fc;
margin-bottom: 10px;
}
.widget p {
font-size: 1em;
color: #666;
line-height: 1.6;
}
/* Responsive para móvil */
@media (max-width: 768px) {
.widget-container {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
margin: 1rem;
}
.widget {
width: 100%;
margin: 5px 25px 5px 25px;
padding: 12px
}
}
.styled-list {
list-style: none;
padding-left: 0;
}
.styled-list li {
font-size: 16px;
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
color: #434343;
font-weight: 500;
}
.styled-list li::before {
content: "•"; /* Punto de viñeta */
font-size: 30px;
font-weight: bold;
color: #a952fc; /* Color personalizado */
}
/**************************************************************************************************/
/****************************************** CONTACT PAGE ******************************************/
/**************************************************************************************************/
/* Estilos para las columnas de contacto */
.contact-columns {
display: flex;
flex-wrap: wrap;
gap: 2rem;
padding: 50px 20px; /* Reduce el padding general */
}
/* Columna izquierda */
.left-column {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: #7f07f7;
border-radius: 25px;
padding: 1.5rem; /* Reduce el padding interno */
min-height: 200px;
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
flex-direction: column; /* Alineación en columna */
text-align: center; /* Centra el texto */
}
.left-column h2 {
font-size: 2em;
color: #5A189A;
text-align: center;
margin: 0 0 2rem 0; /* Agrega un margen inferior */
}
.left-column h3 {
font-size: 1em;
color: #ffffff;
margin: 0;
font-weight: 500;
}
/* Columna derecha */
.right-column {
flex: 1;
background-color: #fff;
border-radius: 25px;
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
min-height: 200px; /* Altura mínima más pequeña */
border-top: 0.5px solid #dfdfdf;
}
/* Formulario de contacto en la columna derecha */
.right-column form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.right-column form label {
font-size: 0.8em;
color: #333;
}
.right-column form input,
.right-column form textarea {
/* width: 100%; */
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 0.9em;
}
.right-column form button {
padding: 0.7rem;
background-color: #7f07f7;
color: #fff;
border: none;
border-radius: 15px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.right-column form button:hover {
background-color: #7E22CE;
}
/* Responsivo */
@media (max-width: 768px) {
.contact-columns {
flex-direction: column; /* Columnas apiladas */
align-content: center;
flex: none;
/* width: 100%; */
}
.left-column,
.right-column {
flex: none; /* Elimina el ajuste automático */
/* Ocupa todo el ancho del contenedor */
/* width: 100%; */
padding: 1.5rem; /* Ajusta el padding para pantallas pequeñas */
}
.left-column h2,
.left-column h3 {
text-align: center; /* Centra los textos en dispositivos móviles */
}
.right-column form input,
.right-column form textarea,
.right-column form button {
/* Asegura que los elementos se adapten */
/* width: 100%; */
}
}
/* Estilos para el formulario de contacto más compacto y centrado */
.contact-form {
padding: 1.5rem;
background-color: #ffffff;
max-width: 450px; /* Ancho reducido */
margin: 2rem auto; /* Centrar y agregar espacio arriba */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.contact-form h2 {
font-size: 1.8em;
text-align: center;
margin-bottom: 1rem;
color: #333;
}
.contact-form label {
display: block;
font-weight: 500;
color: #333;
margin-top: 0.8rem;
}
.contact-form input,
.contact-form textarea {
width: calc(100% - 2rem); /* Ajuste para que no quede pegado al borde */
padding: 0.7rem;
margin: 0.3rem 1rem; /* Margen izquierdo y derecho */
border: 1px solid #ddd;
border-radius: 5px;
font-size: 0.95em;
color: #333;
}
/**********************************************************************************************/
/*************************************** CHAT CONTAINER ***************************************/
/**********************************************************************************************/
#chat-container {
display: none; /* Oculto por defecto */
flex-direction: column;
position: fixed;
bottom: 70px; /* Ajuste para que no solape el botón */
right: 20px;
width: 300px;
background-color: white;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000; /* Por encima del botón */
border-radius: 15px;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
#chat-header {
background-color: #b15afb;
color: white;
padding: 10px;
text-align: center;
font-size: 18px;
font-weight: 500;
position: relative;
border-radius: 15px 15px 0px 0px;
}
#chat-close {
position: absolute;
/* top: 5px; */
right: 10px;
cursor: pointer;
font-size: 18px;
color: white;
}
#chat-messages {
flex: 1;
padding: 10px;
overflow-y: auto;
max-height: 300px;
border-bottom: 1px solid #ddd;
display: flex;
flex-direction: column;
gap: 8px; /* Espacio entre mensajes */
}
.message {
max-width: 70%;
padding: 8px 12px;
border-radius: 10px;
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
}
.message.user {
align-self: flex-end;
background-color: #dcf8c6; /* Verde claro de WhatsApp */
color: black;
border-bottom-right-radius: 0px; /* Similar a WhatsApp */
}
.message.ai {
align-self: flex-start;
background-color: #f1f0f0; /* Gris claro */
color: black;
border-bottom-left-radius: 0px; /* Similar a WhatsApp */
}
#chat-input {
display: flex; /* Alinea los elementos en fila */
align-items: center; /* Alinea verticalmente los elementos */
padding: 10px;
gap: 10px; /* Espaciado entre el textarea y el botón */
}
#chat-input textarea {
flex: 1; /* El área de texto ocupa todo el espacio disponible */
padding: 10px;
border: 0.5px solid #ccc;
border-radius: 5px;
resize: none;
font-size: 16px;
font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
#chat-input button {
background-color: #25D366; /* Verde de WhatsApp */
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%; /* Botón circular */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 20px; /* Tamaño del icono */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para realce */
margin: 0; /* Elimina el margen extra */
}
#chat-input button:hover {
background-color: #20b956; /* Color más oscuro al pasar el mouse */
}
#chat-button {
background-color: #25D366; /* Verde de WhatsApp */
color: white;
border: none;
padding: 15px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 24px;
z-index: 999; /* Por debajo del chat */
}
#send {
margin-left: 10px;
background-color: #25D366;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}