/**
 * ESTILOS GENERALES QUE SON DE USO CON GUTENBERG Y MÁS
 * 
 * 
 * 
 */



/** SELECTORES CUSTOM PARA LAS TIPOGRAFIAS */

@import url('typography.css');


/** CLASES UTILES **/

.float-right {
    float: right;
}

.clear-fix {
    clear: both;
}

.cursor-pointer {
    cursor: pointer;
}

.is-hidden {
    display: none !important; 
}

.is-visible {
    display: block !important;
}

.img-overlay {
    position: relative;
}

.img-overlay img {
    display: block;
}

.img-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
    linear-gradient(0deg, rgba(247, 237, 250, 0.05) 0%, rgba(247, 237, 250, 0.05) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    z-index: 1;
    pointer-events: none;
}


/** LAYOUT SECTION + DIV CONTAINERS*/

section.gb-container > div.gb-container {
    padding-right: 24px;
    padding-left: 24px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px){

    section.gb-container > div.gb-container {
        padding-right: 16px;
        padding-left: 16px;
    }
}


/** COMPONENTES DEL FIGMA */

.heading-badge{
    display: flex;
    padding: 8px 18px;
    align-items: flex-start;
    border-radius: 8px;
}

@media (max-width: 768px){

}

/**
 * ESTILO DE BOTONES
 */
.btn {
    display: inline-flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.btn-sm {
    display: inline-flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* En gutenberg el bloque con boton con icono tiene esta estructura
donde el button es .btn y dentro del btn está anidado un p y un span.gb-shape que es el icono
*/
.btn>:has(.gb-shape) {
    display: flex;
}

.btn-primary {
    border-radius: 12px;
    color: var(--white)!important;
    background: var(--mora-600, #551B67);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: var(--mora-700, #3A1147);
}

.btn-primary:disabled {
    color: var(--mora-25)!important;
    background: var(--mora-200, #CBA9D9);
}

.btn-secondary {
    color: var(--mora-900)!important;
    border-radius: 12px;
    background: var(--mora-200, #CBA9D9);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background: var(--mora-300, #AE82BF);
}

.btn-secondary:disabled {
    background: var(--mora-100, #DDC8E6);
}

.btn-tertiary {
    color: var(--mora-900)!important;
    border-radius: 12px;
    border: 1.5px solid var(--mora-300, #AE82BF);
    background: var(--white, #FFF);
}

.btn-tertiary:hover,
.btn-tertiary:active,
.btn-tertiary:focus {
    border: 1.5px solid var(--mora-300, #AE82BF);
    background: var(--mora-50, #ECDFF2);
}

.btn-tertiary:disabled {
    color: var(--gray-400)!important;
    border: 1.5px solid var(--mora-100, #DDC8E6);
    background: var(--mora-25, #F7EDFA);
}

.btn-link {
    color: var(--gray-500)!important;
    border-radius: 0!important;
    border-bottom: 2px solid var(--mora-600, #551B67);
    background: unset!important;
}

.btn-link:hover,
.btn-link:active,
.btn-link:focus {
    border-bottom: 2px solid var(--mora-600, #551B67);
}

.btn-link:disabled {
    color: var(--gray-300)
}


/* ======================================
 *  Botón con spinner de loading
 *  Uso: <button class="btn btn-primary btn-loading">Loading…</button>
 * ====================================== */

.btn-loading {
    position: relative;
    cursor: wait;
    pointer-events: none;
}

/* para el tamaño normal */
.btn.btn-loading {
    padding-left: 40px;
}

/* para btn-sm */
.btn-sm.btn-loading {
    padding-left: 32px;
}

/* spinner genérico – usa currentColor para adaptarse al botón */
.btn-loading::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: btn-spinner-rotate 0.8s linear infinite;
}

/* versión más chica para btn-sm */
.btn-sm.btn-loading::before {
    left: 12px;
    width: 14px;
    height: 14px;
}

/* si el botón ya tiene un icono .gb-shape, lo ocultamos mientras carga */
.btn-loading .gb-shape {
    opacity: 0;
}

@keyframes btn-spinner-rotate {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* HTML flat spinner: <div class="loader"></div> */
.loader {
  width: 24px;
  --b: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 5%,#fbf9fa) content-box;
  -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 10deg 1deg,#0000 21deg 44deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: l4 1s infinite steps(10);
}

@keyframes l4 {to{transform: rotate(1turn)}}


.arrow-btn {
    
    width: 100%;
    height: 100%;
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s;
    overflow: hidden;
    box-shadow: 0 12px 32px 0 rgba(6, 28, 61, 0.04);
}

.arrow-btn-small {
    display: inline-flex;
    padding: 12px;
    align-items: flex-start;
    gap: 0;
}

.arrow-btn svg {
    width: 32px;
    height: 32px;
    display: block;
}

.arrow-btn-small svg {
    width: 16;
    height: 16px;
    display: block;

}
/* Para usar nav buttons custom en swiper */
.custom-nav-btn::after,
.custom-nav-btn::before
 {
    content: none !important;
    display: none;
}

/* Animación del brillo pasando */
@keyframes stella-shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* Clase base para el contenedor de los botones de carga */
.stella-auth-placeholders {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* El estilo del botón falso */
.btn-placeholder {
    display: block;
    height: 45px;
    width: 140px;
    background: #f6f7f8;
    background-image: linear-gradient(
            to right,
            #f6f7f8 0%,
            #edeef1 20%,
            #f6f7f8 40%,
            #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    border-radius: 50px;
    animation: stella-shimmer 1.5s linear infinite forwards;
    border: none;
    pointer-events: none;
}