/* =========================================
   1. DESIGN TOKENS (Variables de Figma)
   ========================================= */
:root {
    /* --- Color Brand --- */
    --color-brand-primary: #072929;

    /* --- Color Action --- */
    --bg-surface-promotional: #DBFF00;

    /* --- Color Surface (Fondos) --- */
    --background-neutro-050: #FFFFFF;
    --background-neutro-100: #F3F7F6;
    --background-neutro-150: #F1F5F4;
    --background-neutro-200: #CED4D0;
    --background-neutro-300: #AEC8BB;
    --background-accent-tonal: #86AE3E;
    --background-accent-subtle: #CED7A4;

    /* --- Color Content (Textos) --- */
    --text-primary: #000000;
    --text-secondary: #49454F;
    --text-on-brand: #ffffff;

    /* --- Color Stroke (Contornos) --- */
    --color-stroke-light: #DEE2E6;

    /* --- Tipografías --- */
    --font-principal: 'DM Sans', sans-serif;

    /* =========================================
   2. BOOTSTRAP OVERRIDES (El puente)
   ========================================= */
    --bs-primary: var(--color-brand-primary);
    --bs-body-font-family: 'DM Sans', sans-serif;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--background-neutro-050);
}

/* =========================================
   3. COMPONENTES PERSONALIZADOS
   ========================================= */

/* A. Ajuste del Botón Primary (Oscuro) */
.btn-primary {
    background-color: var(--color-brand-primary);
    color: var(--text-on-brand);
    font-weight: 600;
    padding: .5rem 1rem;
    border-color: var(--color-brand-primary);
    border-radius: .5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
    background-color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
    color: var(--text-on-brand) !important;
    filter: brightness(1.3);
}

/* B. boton Secundario */
.btn-promo {
    background-color: var(--bg-surface-promotional);
    color: var(--color-brand-primary);
    font-weight: 700;
    border-color: var(--color-brand-primary);
    border-radius: .5rem;
    transition: all 0.3s ease;
}

.btn-promo:hover,
.btn-promo:focus {
    background-color: var(--bg-surface-promotional);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
    filter: brightness(0.95);
}

/* C. Tipografía Secundaria */
.font-alt {
    font-family: var(--font-principal);
    font-weight: 400;
    font-style: italic;
}

/* D. Badge */
.badge {
    padding: .5rem 1rem;
    font-size: 0.875rem;
    line-height: 150%;
    color: var(--color-brand-primary);
    background-color: var(--background-neutro-200);
    white-space: normal;
    text-align: start;
    border: 1px solid var(--color-brand-primary);
}

/* E. Card */
.card {
    border-radius: 1rem;
    border: 1px solid var(--color-stroke-light);
}

/* F. Accordion */
.accordion {
    --bs-accordion-bg: var(--background-neutro-100);
    --bs-accordion-border-color: var(--color-stroke-light);
    --bs-accordion-border-radius: 1rem;
    --bs-accordion-inner-border-radius: 1rem;
    --bs-accordion-btn-color: var(--color-brand-primary);
    --bs-accordion-active-color: var(--color-brand-primary);
    --bs-accordion-active-bg: var(--background-neutro-200);
}

.accordion-button {
    font-weight: 600;
    line-height: 150%;
}

.accordion-item {
    color: var(--text-secondary);
}

/* Evitar scroll horizontal */
html,
body {
    overflow-x: clip;
    width: 100%;
}

/* =========================================
   4. banner promocional
   ========================================= */

/* --- Header --- */
.header {
    background-color: var(--bg-surface-promotional);
    transition: all 0.3s ease;
    z-index: 1030;
}

.time-box {
    font-weight: 700;
    color: var(--color-brand-primary);
}

/* =========================================
   5. SECCIÓN HERO
   ========================================= */
#hero {
    background-color: var(--background-neutro-100);
}

#hero .discount p:first-child {
    font-size: 1.125rem;
    font-weight: bolder;
    color: var(--color-brand-primary);
}

#hero h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 120%;
    color: var(--color-brand-primary);
}

#hero .price {
    font-size: 1.125rem;
    font-family: var(--font-principal);
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    text-decoration: line-through;
}

#hero small {
    color: var(--text-secondary);
}

/* =========================================
   6. Datos de confianza
   ========================================= */
#datos-confianza h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-primary);
}

.bg-light-card {
    background-color: var(--background-neutro-150);
}

.bg-light-gray-card {
    background-color: var(--background-neutro-200);
}

.bg-neutro-card {
    background-color: var(--background-neutro-300);
}

.bg-accent-card {
    background-color: var(--background-accent-subtle);
}

.bg-light-card img,
.bg-accent-card img,
.bg-neutro-card img {
    width: 50%;
}

.data-card {
    border: 1px solid var(--color-brand-primary);
    text-align: left;
    overflow: hidden;
}

.data-card h3 {
    font-size: 2.5rem;
    color: var(--color-brand-primary);
}

.data-card p {
    font-size: 1rem;
    color: var(--text-primary);
}

.rating-stars {
    background-color: var(--background-neutro-050);
}

.rating-stars .star-icon {
    width: 24px;
    height: 24px;
}

/* =========================================
   7. problema que resuelvemos
   ========================================= */
#problema {
    padding-bottom: 250px;
}

#problema h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-primary);
}

#problema .subtitle {
    font-size: 1.125rem;
}

#problema .card-bg-light h3 {
    font-size: 1.125rem;
    color: #D81813;
}

#problema .card-bg-light .trailing-icon {
    background-color: var(--background-neutro-150);
    padding: 0.25rem;
    border-radius: 1rem;
}

#problema .card-bg-light .trailing-icon .container,
#problema .card-bg-dark .trailing-icon .container {
    background-color: var(--background-neutro-050);
    padding: .5rem;
    border-radius: 0.75rem;
}

#problema .card-bg-dark {
    background-color: var(--color-brand-primary);
}

#problema .card-bg-dark h3 {
    font-size: 1.125rem;
}

#problema .card-bg-dark .trailing-icon {
    background-color: var(--background-neutro-300);
    padding: 0.25rem;
    border-radius: 1rem;
}

.problem-list li {
    color: var(--text-secondary);
}

/* Estilo para las listas (Tradicional y Método) */
.problem-list li {
    font-size: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 150%;
}

/* Viñeta para la lista Tradicional (Problemas - Círculo o X simple) */
.problem-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    font-weight: bold;
}

/* Viñeta para la lista Método (Solución - Checkmark simple) */
.solution-check-icon {
    width: 24px;
    height: 24px;
}

#problema .paragraph {
    font-family: var(--font-principal);
    font-weight: 400;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 150%;
}

#problema .bg-image {
    position: absolute;
    z-index: 1;
    /* Asegura que la imagen esté sobre el fondo, pero debajo de las tarjetas si se superponen */
    /* Posición Mobile: Abajo y centrada */
    left: 50%;
    transform: translateX(-50%);
    /* Centrado horizontal */
    bottom: 4%;
    /* Ajusta este valor para que la imagen no se corte en el fondo */
    width: 150px;
    /* Tamaño móvil, ajusta a tu preferencia */
    height: auto;
}

/* =========================================
   8. SECCIÓN OFERTA DETALLADA
   ========================================= */
#oferta {
    background-color: var(--background-neutro-100);
}

#oferta .discount p:first-child {
    font-size: 1.125rem;
    color: var(--color-brand-primary);
}

#oferta h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-primary);
}

#oferta .card-offer {
    border: 1px solid var(--color-brand-primary);
}

#oferta .card-offer h3 {
    font-size: 1.125rem;
}

#oferta .card-offer .leading-icon {
    background-color: var(--background-neutro-200);
    padding: 0.25rem;
    border-radius: 1rem;
}

#oferta .card-offer .leading-icon .container,
#oferta .card-offer .leading-icon .container {
    background-color: var(--background-neutro-050);
    padding: .5rem;
    border-radius: 0.75rem;
}

#oferta .card-offer .title-description h4 {
    font-size: 1.125rem;
    line-height: 150%;
}

#oferta .card-offer .title-description small {
    color: var(--text-secondary);
    line-height: 150%;
}

#oferta .card-summary {
    background-color: var(--bg-surface-promotional);
    border: 1px solid var(--color-brand-primary);
}

#oferta .card-summary small,
#oferta .card-summary h3 {
    color: var(--color-brand-primary);
}

#oferta .card-summary h3 {
    font-size: 2rem;
}

#oferta .card-summary .card-price {
    border-top: 1px solid var(--color-brand-primary);
}

#oferta .bg-light-price-card {
    color: var(--color-brand-primary);
    background-color: var(--background-neutro-200);
    border: 1px solid var(--color-brand-primary);
}

#oferta .text-muted-custom {
    color: var(--text-secondary);
}

#oferta .text-muted-custom-secundary {
    font-family: var(--font-principal);
    font-weight: 400;
    font-style: italic;
    font-size: 1.125rem;
}

/* =========================================
   9. SECCIÓN PROCESO DE 3 PASOS
   ========================================= */

#pasos h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-primary);
}

#pasos h3 {
    font-size: 1.125rem;
    color: var(--color-brand-primary);
}

#pasos .small-text {
    color: var(--text-secondary);
}

#pasos .card-steps {
    border: 1px solid var(--color-stroke-light);
    background-color: var(--background-neutro-100);
    padding: 1rem;
}

/* =========================================
   10. SECCIÓN TESTIMONIOS Y DATOS DE CONFIANZA
   ========================================= */

#testimonios {
    background-color: var(--color-brand-primary);
    border-bottom: 0.5rem solid var(--bg-surface-promotional);
}

/* Badge Promocional (Fondo Amarillo) */
.badge-secondary-promotional {
    background-color: var(--bg-surface-promotional);
    border: 1px solid var(--color-brand-primary);
}

#testimonios h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Estilos de la tarjeta de testimonio (Fondo blanco) */
#testimonialCarousel .carousel-inner {
    background-color: var(--background-neutro-050);
    min-height: 400px;
}

#testimonialCarousel .carousel-inner .carousel-item .blockquote {
    min-height: 215px;
}

#testimonialCarousel .testimonial-rating {
    border-bottom: 1px solid var(--color-brand-primary);
}

/* Estilos de los botones del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    border: 1px solid var(--color-stroke-light);
    background-color: var(--background-neutro-050);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -20px;
}

/* Ajusta la posición fuera de la tarjeta */
.carousel-control-next {
    right: -20px;
}

/* Iconos de navegación del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-brand-primary);
    border-width: 0 2px 2px 0;
}

.carousel-control-prev-icon {
    transform: rotate(135deg);
    /* Flecha apuntando a la izquierda */
}

.carousel-control-next-icon {
    transform: rotate(-45deg);
    /* Flecha apuntando a la derecha */
}

/* =========================================
   11. SECCIÓN EQUIPO
   ========================================= */

#equipo h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

#equipo .subtitle {
    font-size: 1.125rem;
}

/* Estilo general para las tarjetas de equipo */
.card-team {
    background-color: var(--background-neutro-100);
    border: 1px solid var(--color-stroke-light);
}

.team-grid .card-team h4 {
    font-size: 1.125rem;
}

.team-img-horizontal {
    width: 100%;
    max-height: 225px;
    object-fit: cover;
}

.team-grid .card-team .text-muted-custom {
    font-size: 1rem;
    font-weight: 400;
}

/* Estilo para las etiquetas/tags de especialidad */
.tag {
    background-color: var(--background-neutro-200);
    color: var(--color-brand-primary);
    border-radius: 0.75rem;
}

.tag-small {
    font-size: 0.875rem;
    background-color: var(--background-neutro-050);
    border-radius: 0.5rem;
}


/* El texto secundario (e.g., • Psicóloga Clínica, Universidad) */
.text-muted-custom {
    color: var(--color-text-secondary);
}

/* =========================================
   12. SECCIÓN PREGUNTAS FRECUENTES (FAQ)
   ========================================= */

#faq h2 {
    font-size: 1.5rem;
}

#faq .paragraph {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

/* =========================================
   13. cta final
   ========================================= */

#final-cta h2 {
    font-size: 1.5rem;
    color: var(--color-brand-primary);
}

#final-cta .paragraph {
    font-size: 1.125rem;
}

.cta-image-box img {
    border-radius: 1rem 1rem 0 0;
}

.cta-main-content {
    background-color: var(--background-accent-subtle);
    border-radius: 0 0 1rem 1rem;
}

.cta-final-text {
    font-family: var(--font-principal);
    font-weight: 400;
    font-style: italic;
}

/* =========================================
   13. cta final
   ========================================= */
#footer {
    border-top: 1px solid var(--color-stroke-light);
}

.logo-container {
    /* Ajusta el tamaño del ícono del cerebro */
    max-width: 320px;
}

.footer-logo {
    width: 75%;
}

.footer-copyright p {
    color: var(--color-brand-primary);
}

/* =========================================
   FAB de WhatsApp
   ========================================= */

/* Botón flotante personalizado */
.whatsapp-fab {
    position: fixed;
    right: max(12px, calc((100vw - 100%) / 2 + 14px));
    bottom: 16px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16%;
    background: #25D366;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.whatsapp-fab img {
    width: 56px;
    height: 56px;
    display: block;
}

/* Si hay un banner inferior (cookies, barra), usa esta clase en <body> para empujar el FAB arriba */
.with-bottom-banner .whatsapp-fab {
    bottom: 72px;
}

/* =========================================
   Breakpoints Customizados
   ========================================= */

/* =========================================
   Landscape Phones (608px)
   ========================================= */

@media (min-width: 608px) {}

/* =========================================
    Tablets (768px)
   ========================================= */

@media (min-width: 768px) {
    .data-card {
        min-height: 250px;
        height: 100%;
    }

    #testimonialCarousel .carousel-inner .carousel-item .blockquote {
        min-height: 120px;
    }

    .alejandra-img {
        width: 46%;
    }

    .cta-main-content {
        border-radius: 1rem 0 0 1rem;
    }

    .cta-image-box img {
        border-radius: 0 1rem 1rem 1rem;
    }

    .whatsapp-fab {
        bottom: 80px;
    }
}

/* =========================================
    Desktops (992px)
   ========================================= */

@media (min-width: 992px) {

    .bg-light-card,
    .bg-accent-card {
        min-height: 340px;
    }

    .bg-light-gray-card,
    .bg-neutro-card {
        min-height: 230px;
    }

    .bg-light-card img {
        width: 100%;
    }

    .bg-neutro-card img {
        width: 85%;
    }

    .bg-accent-card img {
        width: 75%;
    }

    #testimonialCarousel .carousel-inner .carousel-item .blockquote {
        min-height: 215px;
    }

    .card-team {
        padding: 1.5rem !important;
    }

    /* Imagen del profesional en el diseño horizontal */
    .team-img-horizontal {
        width: 35%;
        max-height: 160px;
    }

    .team-content-horizontal {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .alejandra-img {
        width: 100%;
    }
}

/* =========================================
    Large Desktops (1200px)
   ========================================= */

@media (min-width: 1200px) {
    .team-img-horizontal {
        width: 50%;
        max-height: 256px;
    }

    .cta-main-content {
        padding: 3.75rem !important;
    }
}

/* =========================================
    Larger Desktops (1400px)
   ========================================= */

@media (min-width: 1400px) {
    #hero .discount p:first-child {
        font-size: 1.5rem;
    }

    #hero h1 {
        font-size: 3.75rem;
    }

    #hero .paragraph {
        font-size: 1.5rem;
    }

    .badge {
        border-radius: 1rem;
    }

    #datos-confianza {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #datos-confianza h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    .bg-light-card img,
    .bg-neutro-card img {
        width: 60%;
    }

    .bg-accent-card img {
        width: 50%;
    }

    #problema {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #problema h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    #problema .bg-image {
        left: 5%;
        bottom: 5%;
    }

    #oferta {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #oferta h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    #pasos {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #pasos h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    #testimonios {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #testimonios h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    #testimonialCarousel .carousel-inner .carousel-item .blockquote {
        min-height: 120px;
    }

    #equipo {
        padding-top: 5rem !important;
    }

    #equipo h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    .team-content-horizontal small {
        margin-bottom: 1rem !important;
    }

    #faq {
        padding-top: 5rem !important;
    }

    #faq h2 {
        font-size: 2.25rem;
        line-height: 150%;
    }

    #faq .paragraph {
        font-size: 1.25rem;
    }

    .whatsapp-fab img {
        width: 72px;
        height: 72px;
    }

    #final-cta {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    #final-cta h2 {
        font-size: 3.75rem;
        margin-bottom: 2rem !important;
    }

    #final-cta .paragraph {
        margin-bottom: 2rem !important;
    }

    #final-cta .paragraph,
    #final-cta .cta-final-text {
        font-size: 1.25rem;
    }

    #final-cta .cta-final-text {
        margin-top: 2rem !important;
    }

    .cta-image-box img {
        object-fit: cover;
        /* Ajustamos el max-height para controlar la altura total de la sección */
        max-height: 700px;
    }

    .whatsapp-fab {
        bottom: 32px;
    }
}