/* Contenedor de las cards - ajusta la altura según cuántas cards quieres mostrar */
.cards-container {
    height: 470px; /* Ajustar según el diseño: altura para mostrar ~3 cards */
    position: relative;
} 

/* Contenedor interno que se desplaza */
.cards-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 470px;
}

/* Estilos opcionales para card */
.card {
    gap: 24px;
    /*min-height: 100px; */
    flex-shrink: 0;
    place-items: center;
    padding: 32px;
}

/* Sección que se fija durante el scroll */
.cards-section {
    position: relative;
        /*min-height: 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1024px){
    /* En móvil, el contenedor debe crecer según su contenido */
    .cards-container {
        height: 100% !important;
        overflow: visible !important;
    }
    
    .cards-inner {
        height: auto !important;
        transform: none !important; /* Anula transformaciones previas de GSAP si quedan residuos */
    }

    .cards-section {
        height: 100% !important; /* La sección no debe forzar 100vh en móvil */
        padding-bottom: 40px 0;
    }
    
    /* Aseguramos que las cards se vean */
    .card {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px){
    .card {
        min-height: 100px;
        padding: 16px;
        gap: 12px;
    }

    .cards-section {
        justify-content: flex-start;
    }

}
/**
* Seccion de FAQ's
*/

.wp-block-blocky-gutenberg-blocks-accordion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.wp-block-blocky-gutenberg-blocks-accordion-item{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    background: var(--lila-50);
    border-radius: 16px;
    border: 1.5px solid var(--crema-50);
    background: var(--crema-25);
    transition: all 200ms ease-in-out, gap 500ms ease-in;
}

.wp-block-blocky-gutenberg-blocks-accordion-item.accordion-active{
    background: var(--lila-50);
    gap: 24px;
}

.wp-block-blocky-gutenberg-blocks-accordion-item .accordion-toggle {
    background: unset;
    transform: rotate(0deg);
    display:flex;
    justify-content: center;
    align-items: center;
}

.wp-block-blocky-gutenberg-blocks-accordion-item.accordion-active .accordion-toggle{
    transform:rotate(180deg);
}
.wp-block-blocky-gutenberg-blocks-accordion-item-heading {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-radius:16px;
    gap: 16px;
}

.pin-spacer:has(#cards-section-one) {
    background-blend-mode: normal;
    background-image: linear-gradient(180deg, var(--crema-25) 0%, var(--white) 100%);
}
.pin-spacer:has(#cards-section-two) {
    background: var(--white);
}

.pin-spacer .cards-container {
  height: 100%;
  overflow: hidden;
}