/* styles.css */
html {
    scroll-behavior: smooth;
    /* Evital desbordamiento horizontal que a veces causan las animaciones antes de aparecer */
    overflow-x: hidden;
}

body {
    /* Poppins como fuente principal, con fallback a sans-serif */
    font-family: 'Poppins', 'Inter', Arial, sans-serif;
    color: #374151; /* gris-700 */
    background-color: #ffffff; /* blanco */
    /* Evital desbordamiento horizontal que a veces causan las animaciones antes de aparecer */
    overflow-x: hidden;
}

/* Regla general para que todos los encabezados tengan el estilo deseado */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Asegura Poppins */
    font-weight: 700; /* Bold por defecto para todos los encabezados */
    background-image: linear-gradient(to right, #3b82f6, #d946ef); /* Degradado principal */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.04em; /* Un tracking más ajustado por defecto para encabezados */
    line-height: 1.2; /* Altura de línea consistente para encabezados */
}

/* Clase paralementos que necesiten un peso de fuente más grueso, como el claim principal */
.font-poppins-black {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Puedes cambiar a 900 si tienes ese peso importado y lo deseas más grueso */
    text-transform: none;
    /* El letter-spacing y line-height serán heredados de la regla general de h1, o puedes especificarlos aquí si son diferentes */
}

.tracking-poppins-tighter { /* Clase de utilidad si se necesita un tracking específico diferente al de los h */
    letter-spacing: -0.04em;
}

.text-gradient {
    background-image: linear-gradient(to right, #3b82f6, #d946ef);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: inherit; /* Mantiene el peso de la fuente del elemento padre o de la etiqueta h */
}

/* .text-gradient-alt ahora usará el mismo degradado que .text-gradient */
.text-gradient-alt {
    background-image: linear-gradient(to right, #3b82f6, #d946ef); /* Mismo degradado que .text-gradient */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: inherit; /* Mantiene el peso de la fuente del elemento padre o de la etiqueta h */
}

.rotated-badge-fuchsia {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    font-size: 0.80rem;
    font-weight: 700; /* Poppins bold */
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #c026d3;
    color: white;
}
.static-badge-blue {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600; /* Poppins semibold */
    border-radius: 0.375rem;
    background-color: #3b82f6;
    color: white;
}

.product-card {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}
.product-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.product-card-features-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}
.product-card-features {
    display: inline-block;
    text-align: left;
}

/* .section-title aplicará estilos adicionales a los h, el degradado ya viene de la regla h1-h6 */
.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Coincide con la regla general de h, puede ser más específico si es necesario (e.g. 900) */
    letter-spacing: -0.04em; /* Coincide con la regla general de h */
    display: block;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    line-height: 1.2; /* Coincide con la regla general de h */
    /* El degradado de texto se hereda de la regla h1-h6 */
}

.nav-link { color: #4b5563; }
.nav-link:hover { color: #2563eb; }

.hero-bg-light { background-color: #f0f9ff; }

.responsive-iframe-container { position: relative; overflow: hidden; padding-top: 56.25%; }
.responsive-iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.benefit-box {
    padding: 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.benefit-box-content {
    flex-grow: 1;
}
.benefit-box-icon {
    margin-bottom: 1rem;
    color: #d946ef;
}
/* .benefit-box-title es un h3, heredará el degradado de la regla general h1-h6 */
.benefit-box-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Coincide con la regla general de h */
    letter-spacing: -0.04em; /* Coincide con la regla general de h */
    font-size: 1.25rem; /* Tamaño específico para este título */
    margin-bottom: 0.5rem;
    color: #2563eb; /* Este color será ignorado si el degradado se aplica correctamente */
}

/* Estilos para los párrafos dentro de .benefit-box y sus etiquetas strong */
.benefit-box p {
    font-family: 'Poppins', sans-serif;
}

.benefit-box p strong {
    font-family: inherit;
    font-weight: bold;
    background-image: linear-gradient(to right, #3b82f6, #d946ef);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.map-container {
    position: relative;
    overflow: hidden;
    padding-top: 40%;
    height: 0;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.floating-buttons-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
}

.floating-btn {
    color: white;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.floating-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-btn:hover {
    transform: scale(1.1);
}

.whatsapp-btn {
     background-color: #25D366;
     width: auto;
     padding: 0 1.5rem;
     border-radius: 2rem;
}
.whatsapp-btn:hover {
    background-color: #1DAE52;
}

.back-to-top-specific {
    background-color: #2563eb;
}
.back-to-top-specific:hover {
    background-color: #1d4ed8;
}

@keyframes breathing {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}
.animate-breathing {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes soft-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.animate-soft-blink {
    animation: soft-blink 2s ease-in-out infinite;
}

/* Estilos para las tarjetas de beneficios de el Club */
.community-benefit-card {
    background-color: #fff;
    border: 1px solid #fbcfe8;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

/* .community-benefit-card h4 heredará el degradado de la regla general h1-h6 */
/* Se mantiene font-weight: 600 para hacerlo semibold en lugar de bold */
.community-benefit-card h4 {
    color: #2563eb; /* Este color será ignorado si el degradado se aplica correctamente */
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Semibold para los títulos de estas tarjetas, anulal font-weight: 700 de la regla general h4 */
}

.community-benefit-card p {
    font-family: 'Poppins', sans-serif;
}


/* --- Estilos para la animación de scroll --- */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.66s ease-out, transform 0.66s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .whatsapp-btn {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 9999px;
        padding: 0;
    }

    .whatsapp-text {
        display: none;
    }
}

#webinar-banner {
            position: fixed;
            top: 80px; /* Ajustado para estar debajo del menú */
            right: 1.5rem; /* Alineado con el contenedor (px-6) */
            background-color: #e53935;
            color: white;
            padding: 10px 15px;
            border-radius: 0 0 8px 8px;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 12px;
            text-decoration: none;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            animation: fadeInDown 0.5s ease-out;
            text-align: right;
        }

        #webinar-banner:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }

        #webinar-banner strong {
            font-weight: 900;
            font-size: 14px;
        }

        /* Estilos para móvil */
        @media (max-width: 768px) {
            #webinar-banner {
                top: 75px;
                right: 1.5rem; /* Alineado con el contenedor (px-6) */
                padding: 8px 12px;
                font-size: 11px;
            }
            #webinar-banner strong {
                font-size: 13px;
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }