/* Alpha Supplements - Estilos principales */

:root {
    --primary-color: #3E5F90;
    --secondary-color: #669BEC;
    --accent-color: #F39C12;
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --bg-light: #F8F9FA;
    --bg-main: rgb(221, 222, 223);
}

html {
    min-width: 320px;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Merriweather Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--md-background);
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

.body-text-color {
    color: var(--text-dark)!important;
}

/* Navegación */
.navbar {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
}

.navbar-brand-custom {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color) !important;
    display: flex;
    align-items: center;
    width: 250px;
    height: 26px;
}

.nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: white!important;
    background-color: var(--primary-color)!important;
}

/* Footer */

footer {
    min-width: 320px;
}

.li-list-footer {
    margin-bottom: 8px!important;
}

.li-list-footer > a:hover {
    text-decoration: underline!important;
}

.footer-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white!important;
    display: flex;
    align-items: center;
    width: 230px;
    height: 24px;
}

.rrss-logo {
    width: 36px;
    height: 36px;
    padding: 8px;
}

.rrss-logo-wrapper {
    background-color: rgba(var(--bs-dark-rgb), 0.5) !important;
    border-radius: 999px;
}

/* Botones */
.btn-primary {
    background: var(--primary-color);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Secciones */
.hero-section {
    color: white;
    padding: 5rem 0;
}

.img-hero {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

.img-wrapper-hero {
    aspect-ratio: 4/3!important;
    overflow: hidden!important;
    position: relative!important;
    border-radius: 12px;
}

@media (max-width: 576px) {
    .btn-sm-100 {
    width: 100%;
    }
    .navbar-brand-custom {
        font-size: 1.2rem;
        height: 24px;
        width: 224px;
    }
    .footer-brand {
        font-size: 1.2rem;
        height: 21px;
        width: 200px;
    }
    main {
    margin-top: 72px!important;
    }
    .rrss-logo {
    width: 32px;
    height: 32px;
    padding: 8px;
    }
}

@media (max-width: 1399px) {
    main {
    margin-top: 72px!important;
    }
}


.section-padding {
    padding: 5rem 0;
}

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    background-color: white;
}

.card:hover {
    transform: translateY(-5px);
}

/* Footer */
footer {
    background: var(--text-dark);
    color: white;
    padding: 3rem 0 2rem 0;
}

footer h5 {
    display: flex;
    align-items: center;
}

footer img {
    opacity: 0.9;
}

.g-reviews-footer {
    width: fit-content;
    background: rgba(102, 155, 236, 0.5);
}

.g-reviews-footer-wrapper {
    display: flex;
    width: fit-content;
}

@media (max-width: 1399px) {
    .g-reviews-footer {
    width: 240px;
    }
}

/* Estilo para los íconos de redes sociales */
.social-icon {
  color: #fff;  /* Color blanco */
  transition: transform 0.3s ease, color 0.3s ease; /* Transición para transformaciones y color */
}

.social-icon:hover {
  color: #1DA1F2;  /* Cambia el color de los íconos al azul de Twitter al pasar el mouse */
  transform: scale(1.1);  /* Aumenta el tamaño del ícono al hacer hover */
}

/* Estilo adicional para las redes sociales */
.social-icon i {
  font-size: 2rem; /* Tamaño de los íconos */
  transition: transform 0.3s ease; /* Transición de los íconos */
}



/* Main content */
main {
    margin-top: 82px;
    min-width: 320px;
}

/* Componentes específicos */
.hero-leaf {
    font-size: 12rem;
    opacity: 0.2;
}

.circle-icon {
    width: 80px;
    height: 80px;
}

.circle-icon-small {
    width: 60px;
    height: 60px;
}

.circle-avatar {
    width: 50px;
    height: 50px;
}

/* Tarjetas de profesionales - Nueva estructura */
.professional-card {
    height: 100%;
    padding: 1.5rem;
    border-radius: 16px;
}

.professional-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.professional-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.professional-content {
    text-align: left;
}

.professional-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.professional-role {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.professional-quote {
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.professional-rating {
    display: flex;
    gap: 2px;
}

.professional-rating i {
    color: #ffc107;
    font-size: 1rem;
}

.w-mobile-review-name {
        max-width: 164px;
    }

/* Contenedor de scroll horizontal con drag */
.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-container:active {
    cursor: grabbing;
}

/* Estilos desktop - por defecto */
.scroll-x-group-mobile {
    overflow-x: visible;
    overflow-y: visible;
}

/* Carruseles con drag (móvil) */
@media (max-width: 767px) {
    .professional-card {
        padding: 0.5rem;
    }
    
    .no-max-w-mobile-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Sección de profesionales */
    .scroll-x-group-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        width: max-content !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        cursor: grab;
        padding-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .scroll-x-group-mobile::-webkit-scrollbar {
        display: none;
    }
    
    .scroll-x-group-mobile:active {
        cursor: grabbing;
    }
    
    .scroll-x-group-mobile.row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    /* Sección de reseñas */
    #googleReviews {
        overflow: hidden !important;
    }
    
    #googleReviews .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .reviews-carousel-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100%;
        max-width: 100%;
        position: relative;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        cursor: grab;
    }
    
    .reviews-carousel-container::-webkit-scrollbar {
        display: none;
    }
    
    .reviews-carousel-container:active {
        cursor: grabbing;
    }
    
    .reviews-carousel-container .scroll-x-group-mobile {
        padding-bottom: 0;
    }
    
    /* Sección de profesionales */
    .professionals-carousel-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100%;
        max-width: 100%;
        position: relative;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        cursor: grab;
    }
    
    .professionals-carousel-container::-webkit-scrollbar {
        display: none;
    }
    
    .professionals-carousel-container:active {
        cursor: grabbing;
    }
    
    .professionals-carousel-container .scroll-x-group-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        padding-bottom: 0;
    }
    
    .max-w-250-card-mobile {
        max-width: 250px;
        min-width: 250px;
        flex-shrink: 0;
        margin-bottom: 0 !important;
    }
    
    .review-card-snap .card {
        height: auto;
        min-height: fit-content;
    }
    
    .w-mobile-review-name {
        max-width: 124px;
    }
}

/* Asegurar que en desktop no hay animación */
@media (min-width: 768px) {
    .scroll-x-group-mobile {
        animation: none !important;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .no-max-w-mobile-container {
        max-width: 100%!important;
    }
    .yes-max-w-mobile-container {
        max-width: 540px!important;
    }
}


/* Utilidades para casos especiales */
.bg-primary-10 {
    background: rgba(45, 90, 135, 0.1);
}

.bg-normal {
    background: var(--md-background);
}

.bg-custom-primary {
    background: var(--primary-color);
}

.bg-custom-secondary {
    background: var(--secondary-color);
}

.bg-custom-dark {
    background-color: #f1f1f1;
}

.text-custom-primary {
    color: var(--primary-color);
}

/* Formularios */
.form-section-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title i {
    background: var(--bg-light);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(102, 155, 236, 0.25);
}

.form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(102, 155, 236, 0.25);
}

/* Responsividad */
@media (max-width: 768px) {
    .img-wrapper-hero {
    display: none;
    }
    
    .circle-icon {
        width: 60px;
        height: 60px;
    }
    
    .navbar-brand-custom {
        font-size: 1.2rem;
    }
    
    .navbar-brand-custom img {
        width: 216px;
        height: 23px;
    }
    
    footer h5 img {
        width: 20px;
        height: 20px;
    }
    
    /* Profesionales en móvil */
    .professional-content {
        text-align: center;
    }
    
    .professional-name {
        font-size: 1.1rem;
    }
    
    .professional-quote {
        font-size: 0.9rem;
    }
    
    .professional-rating {
        justify-content: center;
    }
    
    /* Formularios en móvil */
    .form-section-title {
        font-size: 1.1rem;
    }
    
    .form-section-title i {
        width: 35px;
        height: 35px;
    }
} 

@media (max-width: 991px) {
    .img-wrapper-hero {
        aspect-ratio: 16/9!important;
    }
}

/* Carrusel logos */
    .ticker-carrousel {
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
    padding-top: 0;
    max-width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 48px;
    }
 
    .ticker-track {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: unset;
    flex-grow: 0;
    flex-shrink: 0;
    animation: ticker 60s linear infinite;
    }

    .ticker-img {
    width: auto;
    height: 50px;
    padding-right: 100px;
    padding-left: 100px;
    color: var(--bg-light);
    opacity: 85%;
    }

    .ticker-img-big {
    width: auto;
    height: 40px;
    padding-right: 100px;
    padding-left: 100px;
    color: var(--bg-light);
    opacity: 85%;
    }

    @media (max-width: 768px) {
    .ticker-img {
    padding-right: 60px;
    padding-left: 60px;
    }
    .ticker-carrousel {
    margin-top: 0px;
    }
    .ticker-img-big {
    padding-right: 60px;
    padding-left: 60px;
    }
    } 

    @keyframes ticker {
                0% {
                    transform: translateX(0%);
                }

                100% {
                    transform: translateX(-100%)
                }
            }

/* Hero texto animado */

.animated-text{
    min-width: 280px;
}

.animated-text span{
    position: relative;
}

.animated-text span::before{
    content: "honestidad.";
    color: #fff;
    animation: words 20s infinite;
}

.animated-text span::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color: var(--secondary-color);
    border-left: 2px solid #fff;
    right: -8px;
    animation: cursor .8s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor {
    to{
        border-left: 2px solid var(--secondary-color);
    }
}

@keyframes words {
    0%,20%{
        content: "honestidad.";
    }
    21%,40%{
        content: "evidencia.";
    }
    41%,60%{
        content: "rigor.";
    }
    61%,80%{
        content: "experiencia.";
    }
    81%,100%{
        content: "ética.";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }
}


/* Pasos */

.row-steps {
  position: relative;
}

.row-steps::before {
  content: '';
  position: absolute;
  top: 50%; /* Empieza a mitad de la altura de la fila */
  left: 10%;
  width: 80%; /* Cubre todo el ancho de la fila */
  height: 2px;
  background-color: var(--secondary-color); /* Color de la línea */
  transform-origin: center center;
  z-index: 0;
}

.step-box {
    background-color: white;
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    height: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .row-steps::before {
    top: 10%; /* Empieza desde la parte superior */
    left: 50%; /* Centra la línea en el medio de la fila */
    width: 2px; /* Hace que la línea sea vertical */
    height: 80%; /* Cubre toda la altura de la fila */
    }
    .div-step-box {
    margin-bottom: 48px!important;
    }
}

.pulse-animation {
  position: relative;
  padding: 20px;
  border: 2px solid rgba(102, 155, 236, 1); /* Borde inicial con color #669BEC */
  border-radius: 8px; /* Bordes redondeados si es necesario */
  overflow: hidden; /* Evita que el borde se salga del contorno del div */
  animation: pulseOut 2s ease-out infinite; /* Aplicamos la animación */
}

@keyframes pulseOut {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 155, 236, 0.5); /* Sin sombra al principio */
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(102, 155, 236, 0.8); /* Expansión del borde hacia afuera con color #669BEC */
  }
  75% {
    box-shadow: 0 0 0 0 rgba(102, 155, 236, 0); /* Desaparece la sombra completamente */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 155, 236, 0); /* Mantiene la sombra oculta hasta el siguiente ciclo */
  }
}
    
/* Catálogo */

.div-w-catalog {
    width: 100%;
    display: flex;
    justify-content: center;
}

.w-catalog {
    width: 40%;
    margin-top: 48px;
}

@media (max-width: 768px) {
    .w-catalog {
    width: 100%;
    }
} 

/* Planes */

.tab-mobile-center {
    margin-right: auto;
    margin-left: auto;
}

.card-planes {
    display: flex;
    flex-direction: row;
    padding: 24px;
    max-width: 992px;
    min-height: 332px;
    margin-right: auto;
    margin-left: auto;
}

.img-planes {
    border-radius: 8px;
    width: 40%;
    max-width: 350px;
    max-height: 284px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .img-planes {
    display: none;
    }
} 



/* ==============================================
   LOGOUT BUTTON STYLES
   ============================================== */

/* Estilos para el botón de logout en dropdowns */
.logout-btn {
    background: none !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.375rem 1rem !important;
    color: inherit !important;
    text-decoration: none !important;
}

.logout-btn:hover {
    background-color: var(--bs-dropdown-link-hover-bg) !important;
    color: var(--bs-dropdown-link-hover-color) !important;
}