/* CONFIG GENERAL */
:root {
    --primary-color: #31316D;
    --soft-background: #EDEAE5; 
    --light-blue-color:#ACCEF4;
    --orange-color: #DC843C;
    --icon-color: #D9D9D9;
}
/* Estilos generales */
body {
    font-family: 'Inter', sans-serif;
    margin: 2rem;
    padding: 2rem;
    padding-top:0;
    background: #EDEAE5;
    color: var(--primary-color);
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}
html {
    scroll-behavior: smooth;
}

/* Estilos para los efectos de entrada */
.fade-in, .slide-in-left, .slide-in-right, .zoom-in {
    opacity: 0;
    transition: all 1s ease-out;
}

/* Efecto de fade-in (aparición gradual) */
.fade-in.visible {
    opacity: 1;
}

/* Efecto de slide-in desde la izquierda */
.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-left {
    transform: translateX(-50px);
}

/* Efecto de slide-in desde la derecha */
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    transform: translateX(50px);
}

/* Efecto de zoom-in (acercamiento) */
.zoom-in.visible {
    opacity: 1;
    transform: scale(1);
}

.zoom-in {
    transform: scale(0.9);
}

@media (max-width: 768px) {
    .fade-in, .slide-in-left, .slide-in-right, .zoom-in {
        transition-duration: 0.5s;
    }
}


/* .body{
    font-family: 'Inter', sans-serif;
    margin: 2rem;
    padding: 2rem;
    padding-top:0;
    background: #EDEAE5;
    color: var(--primary-color);
} */

/* Mini logo junto a "south mkt." */
.mini-logo {
    width: 17px;
    height: 17px;
    margin-bottom: 8px;
    vertical-align: middle;
}

/* Texto del "logo" en el navbar */
.logo-text {
    font-size: 1.2rem;
    font-weight: 500;
    /* text-decoration: underline #DC843C solid 3px; */
    color: var(--primary-color) !important;
    line-height: 1.2;
}

/* Navbar */
.navbar {
    background-color: transparent;
    padding-bottom: 1rem;
    padding-top: 0;
}



.nav-link {
    /* font-size:1.3rem;
     */
    font-size: clamp(1rem, 1.5vw, 1.5rem);

     /* font-size:1.2rem; */
    font-weight: lighter;
    color: var(--primary-color) !important;
    padding-right: 1.5rem !important;
    border-radius: 8px;
    opacity: 0.9;
    transition: color 0.3s ease;
    position: relative;
}

.navbar-nav{
    margin-left: 24vw !important;
}
/* Efecto de subrayado */
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Ajusta la posición de la línea */
    width: 0%;
    height: 2px;
    background-color: var(--primary-color); /* Color de la línea */
    transition: width 0.5s ease;
}

/* Expande la línea al hacer hover */
.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Hover principal para cambiar el color */
.navbar-nav .nav-link:hover {
    color: #DC843C; /* Color en hover */
    font-weight: 500;
}


/* .navbar-nav {
    margin-left: clamp(1rem, 1.5vw, 15rem);
} */
/* Sección de héroe */
.hero-section {
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    position: relative;
    padding: 2rem 1rem;
    min-height: 20vh;
}

.hero-content {
    flex: 1;
    max-width: 50%;
    padding-right: 2rem;
    margin-top:1rem;
}

/* Título en el header */
.hero-title {
    font-family: 'Inter', sans-serif;

    font-size: clamp(1rem, 5vw, 7rem); /* Ajustado para hacer más flexible */
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    text-underline-position: from-font;
    letter-spacing: 0.1rem;
}



/* Subtítulo en el header */
.hero-subtitle {
    font-size: clamp(1rem, 2.3vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    text-align: left;
    color: var(--primary-color);
    letter-spacing: 0.07rem;
margin-bottom: 2rem;
}

/* Descripción en el header */
.hero-description {
    font-size: clamp(0.6rem, 1.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--primary-color);
    max-width:85%;
}



/* Imagen de héroe en la parte derecha */
.hero-image {
    width: 45; /* Ajuste en porcentaje */
    max-width: 800px; /* Límite máximo de ancho para desktop */
    min-width: 300px; /* Límite mínimo para tabletas */
    height: auto;
    border-radius: 15px 0px 0px 0px;
    overflow: hidden;
    position: relative;
    opacity: 1;
    top:-5rem;
    margin-left: 2rem;
}
.hero-image img {
    width: 45vw; /* Ajusta el ancho deseado */
    height: auto; /* Mantiene la proporción */
}


/* Estilos para la sección de servicios */
/* Estilos generales para la sección de servicios */
.services-section {
    padding: 1rem 1rem;
}

/* Bloques de servicios */
.service-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    min-height: 250px; /* Asegura que todos los bloques tengan una altura mínima uniforme */
    padding: 1rem;
    justify-content: space-between; /* Distribuye el espacio entre ícono, título y descripción */
}

/* Estilo del ícono */
.service-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--icon-color);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.service-icon-1 {
    width: 30px;
    height: 30px;
}

/* Título del servicio */
.service-title {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 500;
    color: var(--primary-color);
    margin: 0.5rem 0;
    
}

/* Descripción del servicio */
.service-description {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    font-weight: 300;
    color: var(--primary-color);
    line-height: 1.3;
    max-width: 100%; /* Limita el ancho del texto */
    letter-spacing: 0.05rem;

}

/* Línea divisoria entre bloques */
.service-divider-container {
    width: 480px; /* Controla el ancho de la línea divisoria */
    display: flex;
    justify-content: center;
    margin-top:3rem;
}

.service-divider {
    border-top: 2px solid var(--primary-color);
    width: 100%; /* Hace que la línea ocupe todo el ancho del contenedor */
    opacity: 0.5;
    margin: 0;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .services-section .d-flex {
        flex-direction: column;
    }

    .service-divider {
        border-left: none;
        border-top: 2px solid var(--primary-color);
        height: 0;
        width: 100px !important;
        margin: 1rem auto;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
        /* Ajuste para mostrar las líneas divisorias en móviles */
        .service-divider-container {
            display: flex !important; /* Mostrar la línea en móviles */
            width: 100%; /* Ancho completo en móviles */
            justify-content: center;
            align-items: center;
            margin: 1rem 0; /* Espacio alrededor de la línea */
            text-align: center;
        }
}




/* Fondo de la sección About */
/* Fondo de la sección About */
.about-section {
    position: relative;
    padding: 3rem 0 !important;
    margin-left: calc(50% - 50vw); /* Extiende el fondo a todo el ancho */
    width: 100vw;
    overflow: hidden;

}
/* Bloque con gradiente hacia la derecha */
.about-block {
    width: 100vw;
    margin-left: calc(50% - 50vw); 
}

/* Fondo del bloque derecho */
.about-gradient-right {
    position: absolute;
    top: 0;
    right: 0; /* Alineado a la derecha */
    width: 100%; /* Cubre todo el ancho */
    height: 100%; /* Cubre todo el alto del bloque */
    background: radial-gradient(
        circle at 80% 50%, /* Gradiente centrado en la derecha */
        rgba(172, 206, 244, 1) 0%, 
        rgba(237, 234, 229, 0.3) 50%, 
        transparent 100%
    );
    z-index: -1; /* Envía el gradiente detrás del contenido */
}

/* Fondo del bloque izquierdo */
.about-gradient-left {
    position: absolute;
    top: 0;
    left: 0; /* Alineado a la izquierda */
    width: 100%; /* Cubre todo el ancho */
    height: 100%; /* Cubre todo el alto del bloque */
    background: radial-gradient(
        circle at 20% 50%, /* Gradiente centrado en la izquierda */
        rgba(172, 206, 244, 1) 0%, 
        rgba(237, 234, 229, 0.3) 50%, 
        transparent 100%
    );
    z-index: -1; /* Envía el gradiente detrás del contenido */
}

/* Margen negativo para subir el contenido */
.content-with-margin {
    margin-top: -10rem; /* Ajusta según tus necesidades */
    position: relative;
    z-index: 2; /* Mantén el contenido encima de los gradientes */
}

/* Ajustes generales */
.about-block {
    position: relative; /* Crea un contexto para los gradientes */
    z-index: 1; /* Asegura que el contenido esté encima de los gradientes */
}


/* Fondo con desenfoque */




/* Opcional: Para evitar bordes recortados en móviles */
.about-block.about-gradient-right, 
.about-block.about-gradient-left {
    overflow: hidden; /* Oculta cualquier desbordamiento del gradiente */
}



.about-title {
    font-size: clamp(1.8rem, 4vw, 4.2rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    text-align: inherit; /* Alineación heredada de la columna */
}

.about-description {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.6;
    text-align: inherit; /* Alineación heredada de la columna */
}
/* Limitar el ancho del contenedor de texto */
.text-container {
    max-width: 80%; /* Ajusta el porcentaje según el ancho deseado */
    margin: 0 0; /* Centra el texto dentro de la columna */
}
/* Contenedor del texto con gradiente radial */

/* Alineación específica para cada lado */
.text-end .text-container {
    margin-left: auto; /* Alinea el texto derecho */
    padding-bottom:3rem
}

.text-start .text-container {
    margin-right: auto; /* Alinea el texto izquierdo */
    padding-top:1rem;
}
/* Alineación vertical y ajuste de la sección */
.about-block .row {
    display: flex;
    align-items: center; /* Alinea el texto verticalmente con la imagen */
}

/* Estilo de las imágenes */
.img-fluid {
    position: relative; /* Asegura que no interfiera con el fondo */
    z-index: 2; /* Mantiene la imagen sobre el fondo */
    border-radius: 15px;
    width: 100%;
    height: auto;
    margin-right: 1rem;
}


.img-left{
    padding-right:2rem;
}
.img-right{
    padding-left:2rem;
}
/* Responsive adjustments */
/* Responsive adjustments para móviles */
@media (max-width: 768px) {
    .about-title {
        font-size: 1.8rem; /* Ajuste de tamaño para móvil */
    }
    
    .about-description {
        font-size: 1rem;
    }
    
    /* Ajustes para apilar contenido en móviles */
    .about-block .row {
        display: flex;
        flex-direction: column-reverse; /* Coloca primero el texto y luego la imagen en móviles */
        align-items: center; /* Centra ambos elementos */
        text-align: center;
    }
        /* Cambiar el orden para que el texto aparezca primero */
        .about-block .col-md-6 {
            order: unset; /* Restablecer orden por defecto para que el primer texto esté arriba */
        }

        .text-start, .text-end {
            order: 1 !important; /* Asegura que el texto aparezca primero en móvil */
            text-align: center !important;
        }
        .text-start{
            padding-top:5rem;
        }

    /* Centrado de imagen y texto en móvil */
    .img-left, .img-right {
        order:2 !important;
        padding: 0; /* Elimina los paddings laterales en móvil */
    }

    /* Contenedor de texto centrado y alineado */
    .text-container {
        max-width: 90%; /* Reduce el ancho en móvil */
        margin: 0 auto; /* Centra el texto en el contenedor */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el texto en el eje horizontal */
        justify-content: center; /* Centra el texto en el eje vertical */
        padding: 3rem 0; /* Espacio interno para mejorar el diseño */
    }


    .content-with-margin {
        margin-top: 0rem; /* Ajusta según tus necesidades */

        
    }
        /* Fondo del bloque derecho */
        .about-gradient-right {
            top:300px;


        }
    
        /* Fondo del bloque izquierdo */
        .about-gradient-left {
            top:-300px;

        }


    /* Ajuste de padding para que no quede demasiado espacio en móvil */
    .about-block {
        padding: 2rem 1rem; /* Ajusta el padding en móvil */
        padding-top:1rem !important;
    }

}














/* Estilos responsivos */

@media (max-width: 1240px) {
    .navbar-nav{
        margin-left:20vw !important;
    }
}


@media (max-width: 1072px) {
    .hero-content {

        margin-top:0rem;
    }
    



    .hero-image {
        width: 50%;
        height: auto;
    } 
    .navbar-nav{
        margin-left:15vw !important;
    }
}


/* Ajustes para pantallas medianas (tabletas) */
@media (max-width: 992px) {
    .hero-content {
        max-width: 60%;
        margin-top:-1rem;
    }

    .services-section{
        max-width:100%;
    }



    .hero-image {
        width: 50%;
        height: auto;
    }
    .navbar-nav{
        margin-left:9vw !important;
    }
    /* .about-gradient-left {
        margin-top: -8rem;
    } */    
     
    .content-with-margin {
        margin-top: -7rem; /* Ajusta según tus necesidades */

    }
}

/* Ajustes para pantallas pequeñas (móviles) */
/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    /* Navbar en el centro sin margen adicional */
    .navbar-nav {
        margin-left: 0 !important;
        justify-content: center;
    }

    /* Hero Section */
    .hero-section {
        flex-direction: column;
        align-items: center !important;
        text-align: center !important;
        padding: 0rem 1rem; /* Ajuste de padding para pantallas pequeñas */
        margin-top:2rem;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 1rem; /* Espacio inferior entre el texto y la imagen */
        padding-right: 0;

    }

    .hero-title {
        font-size: 2.5rem; /* Ajusta el tamaño de la fuente para móviles */
        letter-spacing: 0.05rem;
        text-align: center;

    }

    .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 0.03rem;
        text-align: center;

    }

    .hero-description {
        font-size: 0.875rem;
        max-width: 100%; /* Limita el ancho para facilitar la lectura */
        text-align: center;

    }

    /* Imagen de héroe */
    .hero-image {
        width: 100%;
        max-width: 350px; /* Tamaño máximo en móviles */
        height: auto;
        top:0;
        margin-left:0;
        margin-bottom:3rem;

    }
    .hero-image img {
        width: 75vw; /* Ajusta el ancho deseado */
        height: auto; /* Mantiene la proporción */
    }

    .services-section .d-flex {
        flex-direction: column;
    }



}

    /* Opcional: Ocultar la imagen en móviles si no es necesaria */
    /* .hero-image {
        display: none;
    } */

    body{
        padding:1rem;
        margin:1rem;
    }



    /* Estilos generales para la sección de citas */
/* Estilos generales para la sección de citas */
.quote-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-color: transparent; /* Fondo transparente */
}

.quote-container {
    position: relative;
    max-width: 80%;
    text-align: center;
    color: var(--primary-color);
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    padding: 2rem 1rem; /* Espacio alrededor para centrado */
}

/* Comillas decorativas grandes */
.quote-text::before, 
.quote-text::after {
    color: var(--orange-color); /* Color de las comillas */
    font-size: 10rem; /* Tamaño grande para las comillas */
    position: absolute;
    font-weight: 400;
}

.quote-text::before {
    content: "“";
    left: -1.5rem; /* Ajuste de posición para centrar mejor */
    top: -2rem; /* Posición superior */
}

.quote-text::after {
    content: "”";
    right: -1.5rem; /* Ajuste de posición para centrar mejor */
    bottom: -6rem; /* Posición inferior */
}

/* Línea divisoria en el centro */
.quote-container::before {
    content: "";
    position: absolute;
    top: 0%; /* Centra verticalmente en el contenedor */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px; /* Ancho de la línea divisoria */
    border-top: 5px solid var(--orange-color); /* Color de la línea */
}


/* Texto de la cita */
.quote-text {
    padding: 3rem 2rem;
    font-size: clamp(0.85rem, 1.4vw, 1rem); /* Tamaño de fuente adaptable */
    width: 100%; /* Control de ancho para mantener dos líneas */
    margin: 0 auto;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.03;
    overflow: hidden; /* Oculta cualquier texto extra fuera del contenedor */
    max-width:50rem;
}

/* Ajustes específicos en dispositivos móviles */
@media (max-width: 768px) {
    /* Ajuste de tamaño de fuente y márgenes para móviles */
    .quote-text {
        font-size: 1rem; /* Reducido pero legible en móvil */
        padding: 2.5rem 1rem; /* Espacio alrededor */
        margin-top:1rem;
    }

    /* Comillas decorativas más pequeñas */
    .quote-text::before, 
    .quote-text::after {
        font-size: 8rem; /* Tamaño reducido para comillas en móvil */
    }

    .quote-container::before {
        width: 100px; /* Línea más corta en móvil */
        top: -05%; /* Ajuste de posición */
    }

    /* Centrado general en el contenedor */
    .quote-container {
        max-width: 95%;
        padding: 1rem;
    }

    .quote-section{
        margin-top:2rem;
    }
}


/* General Styles for Contact Section */
.contact-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background-color: #23236D; /* Fondo azul oscuro */
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    min-height: 30rem;
    margin-left: calc(50% - 50vw);
    overflow: hidden; /* Oculta cualquier desbordamiento */
    width: 100vw;
    flex-direction: column;
    padding-bottom:0;
}

.contact-container {
    display: flex;
    max-width: 100%;
    width: 100%;
    color: #ffffff;
    position: relative;
    margin-bottom:3rem;
}

.contact-left, .contact-right {
    padding: 2rem;
}

/* Bloque izquierdo (Logo y redes sociales) */
.contact-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 3rem;
    position: relative;
    margin-left:3rem;
}

.contact-logo {
    width: 28px; /* Tamaño del logo */
    height: auto;
    margin-bottom:1.5rem;
}

.contact-left h2 {
    font-size: clamp(1.8rem, 3.5vw, 4.2rem);

    font-weight: 400;
    margin: 0.5rem 0 1.5rem 0;
    letter-spacing: 0.03;
}

/* Iconos de redes sociales debajo del título */
.social-icons {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    margin-left:3rem;
}

.social-icons i {
    font-size: 1.8rem;
    color: #ffffff;
}
/* Bloque derecho (Formulario de contacto) */
.contact-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
    position: relative;
    top: 5rem; /* Ajusta hacia abajo */
    left: 10px; /* Ajusta hacia la derecha */
    max-width: 50%;
}

.contact-right h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    gap: 5rem;
}

.form-group input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    padding: 0rem;
    font-size: 1rem;
    padding-bottom:1.5rem;
    max-width:30%;
}

.contact-form input[type="email"] {
    border: none;
    border-bottom: 1px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    padding: 0rem;
    font-size: 1rem;
    padding-bottom:1.5rem;
    max-width:60%;
}

.contact-form input::placeholder {
    color: #ffffff;
    opacity: 0.7;
}

.submit-button {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 20px;
    padding: 0;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width:8.5rem;
    margin-top:3rem;
}

.submit-button:hover {
    background-color: #ffffff;
    color: #23236D;
}

/* Logo y título en una línea */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Ajustes para vista móvil */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        padding: 1rem;
    }

    .contact-left, .contact-right {
        padding: 1rem;
        text-align: center;
        position: static; /* Quita la posición relativa en móviles */
    }

    .contact-left {
        align-items:center;
        margin:0;
        top: 0;
        left: 0;
        margin-bottom: 2rem;
    }

    .contact-right {
        top: 0;
        padding-left: 0;
        padding-top:2rem;
        max-width: 100%; /* Ocupa todo el ancho en móvil */
    }

    .contact-right h3{

        text-align: left;
    }

    .form-group {
        flex-direction: column; /* Apila los inputs en una columna */
        gap: 1rem;
    }

    .form-group input {
        max-width: 70%; /* Ancho completo en móvil */
    }
    .contact-form input[type="email"] {

        max-width:100%;
    }

    .submit-button {
        align-self: center; /* Centra el botón en móvil */
        padding:0.4rem;
    }

    .contact-left h2 {
        font-size: 2rem; /* Ajusta el tamaño en móvil */
        margin-bottom: 0;
    }

    .social-icons i {
        font-size: 1rem; /* Reduce el tamaño de los íconos en móvil */

    }
    .social-icons{
        justify-content: center;
        margin-left:0;
    }

    .contact-logo{
        margin-bottom:0;
    }
}




/* Powered by */
#powered-by {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    font-size: 0.8rem; /* Ajusta el tamaño para que sea visible pero discreto */
    color: white;
    margin-top:3rem;
}

#powered-by p {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

#powered-by img {
    height: 2.5rem; /* Ajusta esto según el tamaño que quieras para tu logo */
    margin-left: 0.5rem;
    margin-top: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: grayscale(100%); /* Convierte la imagen a blanco y negro */
}

#powered-by a:hover #logo {
    transform: scale(1.1); /* Hace que el logo crezca un poco al hacer hover */
    filter: grayscale(0); /* Quita el filtro de blanco y negro, mostrando el logo en color */
}

#powered-by a:hover p {
    color: #5590C9; /* Cambia el color del texto en hover (puedes ajustar el color según tu paleta) */
    transition: color 0.3s ease;
}