/***** 😈 En este documento se escribirán los estilos personalizados 😈 *****/

:root {
    --color-background-negro: #000000;
    --color-background-blanco: #ffffff;
    --color-primario-oro: #BC8D40;
    --color-primario-naranja: #FF9D5F;
    --color-gris-descubre: #C6C6C8;
    /* Colores violeta */
    --color-primario-violeta-01: #FFC1E5;
    --color-primario-violeta-02: #FC9ED5;
    --color-primario-violeta-03: #EE7EC0;
    --color-primario-violeta-04: #D962A8;
    --color-primario-violeta-05: #CA4794;
    --color-primario-violeta-06: #BE2F82;
    --color-primario-violeta-07: #A70A66;
    --color-primario-violeta-08: #95095B;
    --color-primario-violeta-09: #890653;
    --color-primario-violeta-10: #740345;
    --color-primario-violeta-11: #5D0036;
    --color-primario-violeta-12: #2F001C;
    --color-primario-violeta-13: #1C0011;
    /* Colores menta */
    --color-secundario-menta-01: #ECFAF8;
    --color-secundario-menta-02: #D8F5F1;
    --color-secundario-menta-03: #C5F0EA;
    --color-secundario-menta-04: #B1EBE3;
    --color-secundario-menta-05: #8BE0D6;
    --color-secundario-menta-06: #64D6C8;
    --color-secundario-menta-07: #3DCCBA;
    --color-secundario-menta-08: #31A596;
    --color-secundario-menta-09: #257E72;
    --color-secundario-menta-10: #1A564F;
    --color-secundario-menta-11: #14433D;
    --color-secundario-menta-12: #0E2F2B;
    --color-secundario-menta-13: #081C19;
    /* Coolores neutrales */
    --color-neutral-gris-01: #343434;
    --color-neutral-gris-02: #6F7271;
    --color-neutral-gris-03: #98989A;
    --color-neutral-gris-04: #CAC9C9;
    --color-neutral-gris-05: #F0F0F0;
    --color-neutral-gris-06: #F7F7F7;
    --color-neutral-gris-07: #F8F9FE;
    --color-neutral-blanco-06: #FFFFFF;
    --color-neutral-azul-01: #EAF2FF;
    /* Colores de alertas */
    --color-alerta-verde: #007D00;
    --color-alerta-naranja: #FF9E00;
    --color-alerta-rojo: #CF0000;
    /* Colores Descubre */
    --color-titulo-pagina: #1F2024;
    --color-background-calendar-icon: #882DE7;
    --color-background-bell-icon: #164A99;
    --color-tab-details: #71727A;
}

/* ❗️Toda clase personalizada será iniciada con la palabra club,
    seguida de guión bajo con plabras que hagan referencia a lo
    que representa la clase. Ejemplo club_letras_negritas ❗️*/


/* * {
    color: var(--color-neutral-blanco-06);
} */

body {
    background-color: var(--color-background-blanco);
    color: var(--color-background-negro);
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    margin: 0;
}

p {
    margin-bottom: 0px;
}

.club_contenedor {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.club_contenedor_full_height {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(var(--calculated-vh) * 100);
}

/* #profileOtherPerson .club_contenedor_full_height {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
} */

.club_sub_contenedor {
    display: flex;
    /* flex-wrap: wrap; */
    width: 100%;
    height: 100%;
    flex-direction: column;
    /* justify-content: space-between; */
}

.club_margin_top_56 {
    margin-top: 56px;
}

.club_padding_top_26 {
    padding-top: 26px;
}

/* Colores de fondo oro  */

.club_bg_oro {
    background-color: var(--color-primario-oro) !important;
}

/* Colores de fondo blanco  */

.club_bg_blanco {
    background-color: var(--color-background-blanco);
}

/* Colores de fondo gris  */

.club_bg_gris_01 {
    background-color: var(--color-neutral-gris-01);
}

.club_bg_gris_02 {
    background-color: var(--color-neutral-gris-02);
}

.club_bg_gris_03 {
    background-color: var(--color-neutral-gris-03);
}

.club_bg_gris_04 {
    background-color: var(--color-neutral-gris-04);
}

.club_bg_gris_05 {
    background-color: var(--color-neutral-gris-05);
}

.club_bg_gris_06 {
    background-color: var(--color-neutral-gris-06);
}

.club_bg_gris_07 {
    background-color: var(--color-neutral-gris-07);
}

/* Colores de fondo negro  */

.club_bg_negro {
    background-color: var(--color-background-negro);
}

/* Colores de fondo violeta  */
.club_bg_violeta_01 {
    background-color: var(--color-primario-violeta-01);
}

.club_bg_violeta_02 {
    background-color: var(--color-primario-violeta-02);
}

.club_bg_violeta_03 {
    background-color: var(--color-primario-violeta-03);
}

.club_bg_violeta_04 {
    background-color: var(--color-primario-violeta-04);
}

.club_bg_violeta_05 {
    background-color: var(--color-primario-violeta-05);
}

.club_bg_violeta_06 {
    background-color: var(--color-primario-violeta-06);
}

.club_bg_violeta_07 {
    background-color: var(--color-primario-violeta-07);
}

.club_bg_violeta_08 {
    background-color: var(--color-primario-violeta-08);
}

.club_bg_violeta_09 {
    background-color: var(--color-primario-violeta-09);
}

.club_bg_violeta_10 {
    background-color: var(--color-primario-violeta-10);
}

.club_bg_violeta_11 {
    background-color: var(--color-primario-violeta-11);
}

.club_bg_violeta_12 {
    background-color: var(--color-primario-violeta-12);
}

.club_bg_violeta_13 {
    background-color: var(--color-primario-violeta-13);
}

/* Colores de fondo menta */
.club_bg_menta_01 {
    background-color: var(--color-secundario-menta-01);
}

.club_bg_menta_02 {
    background-color: var(--color-secundario-menta-02);
}

.club_bg_menta_03 {
    background-color: var(--color-secundario-menta-03);
}

.club_bg_menta_04 {
    background-color: var(--color-secundario-menta-04);
}

.club_bg_menta_05 {
    background-color: var(--color-secundario-menta-05);
}

.club_bg_menta_06 {
    background-color: var(--color-secundario-menta-06);
}

.club_bg_menta_07 {
    background-color: var(--color-secundario-menta-07);
}

.club_bg_menta_08 {
    background-color: var(--color-secundario-menta-08);
}

.club_bg_menta_09 {
    background-color: var(--color-secundario-menta-09);
}

.club_bg_menta_10 {
    background-color: var(--color-secundario-menta-10);
}

.club_bg_menta_11 {
    background-color: var(--color-secundario-menta-11);
}

.club_bg_menta_12 {
    background-color: var(--color-secundario-menta-12);
}

.club_bg_menta_13 {
    background-color: var(--color-secundario-menta-13);
}

/* Colores de letra neutros */

.club_color_fuente_negro {
    color: var(--color-background-negro) !important;
}

.club_color_fuente_blanco {
    color: var(--color-neutral-blanco-06) !important;
}

.club_color_fuente_oro {
    color: var(--color-primario-oro) !important;
}

.club_color_fuente_gris_01 {
    color: var(--color-neutral-gris-01) !important;
}

.club_color_fuente_gris_02 {
    color: var(--color-neutral-gris-02) !important;
}

.club_color_fuente_gris_03 {
    color: var(--color-neutral-gris-03) !important;
}

.club_color_fuente_rojo,
.error {
    color: var(--color-alerta-rojo) !important;
}

.club_color_fuente_violeta_01 {
    color: var(--color-primario-violeta-01) !important;
}

.club_color_fuente_violeta_02 {
    color: var(--color-primario-violeta-02) !important;
}

.club_color_fuente_violeta_03 {
    color: var(--color-primario-violeta-03) !important;
}

.club_color_fuente_violeta_04 {
    color: var(--color-primario-violeta-04) !important;
}

.club_color_fuente_violeta_05 {
    color: var(--color-primario-violeta-05) !important;
}

.club_color_fuente_violeta_06 {
    color: var(--color-primario-violeta-06) !important;
}

.club_color_fuente_violeta_07 {
    color: var(--color-primario-violeta-07) !important;
}

.club_color_fuente_violeta_08 {
    color: var(--color-primario-violeta-08) !important;
}

.club_color_fuente_violeta_09 {
    color: var(--color-primario-violeta-09) !important;
}

.club_color_fuente_violeta_10 {
    color: var(--color-primario-violeta-10) !important;
}

.club_color_fuente_violeta_11 {
    color: var(--color-primario-violeta-11) !important;
}

.club_color_fuente_violeta_12 {
    color: var(--color-primario-violeta-12) !important;
}

.club_color_fuente_menta_01 {
    color: var(--color-primario-menta-01) !important;
}

.club_color_fuente_menta_02 {
    color: var(--color-primario-menta-02) !important;
}

.club_color_fuente_menta_03 {
    color: var(--color-primario-menta-03) !important;
}

.club_color_fuente_menta_04 {
    color: var(--color-primario-menta-04) !important;
}

.club_color_fuente_menta_05 {
    color: var(--color-primario-menta-05) !important;
}

.club_color_fuente_menta_06 {
    color: var(--color-primario-menta-06) !important;
}

.club_color_fuente_menta_07 {
    color: var(--color-primario-menta-07) !important;
}

.club_color_fuente_menta_08 {
    color: var(--color-primario-menta-08) !important;
}

.club_color_fuente_menta_09 {
    color: var(--color-primario-menta-09) !important;
}

.club_color_fuente_menta_10 {
    color: var(--color-primario-menta-10) !important;
}

.club_color_fuente_menta_11 {
    color: var(--color-primario-menta-11) !important;
}

.club_color_fuente_menta_12 {
    color: var(--color-primario-menta-12) !important;
}

.club_color_fuente_menta_13 {
    color: var(--color-primario-menta-13) !important;
}

/* Estilos generales para títulos */
.club_titulo_largo_size_34 {
    font-size: 34px;
    line-height: 41px;
}

.club_titulo_1_size_28 {
    font-size: 28px;
    line-height: 34px;
}

.club_titulo_2_size_22 {
    font-size: 22px;
    line-height: 28px;
}

.club_titulo_3_size_20 {
    font-size: 20px;
    line-height: 25px;
}

.club_txt_titular {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.43%;
}

/* Estilos para textos  */

.club_txt_body {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.43%;
}

.club_txt_callout {
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.31%;
}

.club_txt_footnote {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.08%;
}

.club_txt_caption {
    font-size: 12px !important;
    line-height: 16px !important;
}

.club_txt_caption_2 {
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 0.06%;
}

/* Estilos generales para títulos peso de letra */

.club_font_regular {
    font-weight: 400;
}

.club_font_medium {
    font-weight: 500;
}

.club_font_semibold {
    font-weight: 600;
}

.club_font_bold {
    font-weight: 700;
}

.club_font_super_bold {
    font-weight: 900 !important;
}

club_border_input_campo {
    border: 1px solid var(--color-neutral-gris-02);
}

.club_border_input_campo_error {
    border: 1px solid var(--color-alerta-rojo);
}

/* Botones generales se escribe la clase del botón mas la clase de background del color deseado
    ejemplo: club_btn club_bg_violeta_08 */

.club_btn {
    display: flex;
    width: 100%;
    max-width: 138px;
    height: 50px;
    border-radius: 16px !important;
    color: var(--color-neutral-blanco-06);
    font: 'inter';
    font-weight: 500;
    line-height: 24px;
    align-items: center;
    justify-content: space-around;
}

.club_btn:disabled {
    color: #7a7a7a;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
}

.club_btn_borde_gris {
    background: transparent !important;
    border: 1px solid var(--color-neutral-gris-02) !important;
    color: var(--color-neutral-gris-02) !important;
}

.club_btn_borde_oro {
    background: transparent !important;
    border: 1px solid var(--color-primario-oro) !important;
    color: var(--color-background-negro) !important;
}

.club_btn_borde_oro_lyrics {
    background: transparent !important;
    border: 1px solid var(--color-primario-oro) !important;
    color: var(--color-primario-oro) !important;
}

.club_btn_borde_violeta {
    background: transparent !important;
    border: 1px solid var(--color-primario-violeta-08) !important;
    color: var(--color-primario-violeta-08) !important;
}

.club_btn_no_borde_gris {
    border: none !important;
    height: 40px !important;
    color: var(--color-neutral-gris-02) !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.club_btn_no_borde_violeta {
    border: none !important;
    height: 40px !important;
    color: var(--color-primario-violeta-08) !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.club_btn_no_borde_menta {
    border: none !important;
    height: 40px !important;
    color: var(--color-secundario-menta-06) !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.club_btn_control_back {
    width: 100%;
    max-width: 78px;
    height: 44px;
    padding: 11px 8px;
    border: none;
    background: transparent;
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.4px;
}

/* Estilos para barra de progreso */

.club_barra_progreso {
    display: flex;
    width: 100%;
    height: 10px;
    background: transparent;
}

.club_progreso {
    width: 100%;
    margin-right: 5px;
    background-color: var(--color-neutral-gris-04);
}

.club_progreso:first-child {
    border-radius: 50px 0px 0px 50px;
}

.club_progreso:last-child {
    margin-right: 0px;
    border-radius: 0px 50px 50px 0px;
}

.club_progreso.active {
    background-color: var(--color-primario-oro);
}

/* Estilos para los inputs */

.club_input {
    display: flex;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;
}

.club_input_label {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 8px;
    padding: 4px 16px 0px 0px;
    gap: 10px;
    color: var(--color-neutral-gris-01);
    font-family: Arial, Helvetica, sans-serif;
}

.club_input_contenedor {
    display: flex;
    width: 100%;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    flex-wrap: wrap;
}

#clubHome .club_input_contenedor {
justify-content: center;
}

.club_input_contenedor select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.club_input_icon_izq {
    position: absolute;
    color: var(--color-neutral-gris-01);
    left: 16px;
    /* Posiciona el ícono a la izquierda dentro del input */
    top: 50%;
    transform: translateY(-50%);
    /* Centra verticalmente el ícono */
}

.club_input_icon_der {
    position: absolute;
    color: var(--color-neutral-gris-01);
    right: 16px;
    /* Posiciona el ícono a la derecha dentro del input */
    top: 50%;
    transform: translateY(-50%);
    /* Centra verticalmente el ícono */
}

#clubHome .club_input_icon_der {
    right: 50px;
}

.club_input_campo {
    width: 335px;
    height: 45px;
    padding: 8px 56px 8px 26px;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.club_input_campo:focus {
    border-color: var(--color-neutral-gris-02);
    box-shadow: 0 0 5px var(--color-neutral-gris-02) !important;
    outline: none;
    background-color: transparent !important;
    border: 1px solid var(--color-neutral-gris-02);
}

.club_borde_menta .club_input_campo {
    border: 2px solid var(--color-secundario-menta-07);
}

.club_borde_menta .club_input_campo:focus {
    border: 2px solid var(--color-secundario-menta-07);
    border-color: var(--color-secundario-menta-07);
    box-shadow: 0 0 5px var(--color-secundario-menta-07) !important;
    outline: none;
    background-color: transparent !important;
}

.club_borde_rojo .club_input_icon_izq,
.club_borde_rojo .club_input_icon_der {
    color: var(--color-alerta-rojo);
}

.club_borde_rojo .club_input_campo {
    border: 2px solid var(--color-alerta-rojo);
}

.club_borde_rojo .club_input_campo:focus {
    border: 2px solid var(--color-alerta-rojo);
    border-color: var(--color-alerta-rojo);
    box-shadow: 0 0 5px var(--color-alerta-rojo) !important;
    outline: none;
    background-color: transparent !important;
}

.club_borde_gris .club_input_icon_izq,
.club_borde_gris .club_input_icon_der {
    color: var(--color-neutral-gris-03);
}

.club_borde_gris .club_input_campo {
    border: 2px solid var(--color-neutral-gris-03);
}

.club_input_span {
    width: 100%;
    font-size: 12px;
    font-family: 'inter';
    font-weight: 400;
    line-height: 18px;
    padding: 4px 16px 0px 16px;
    gap: 10px;
    color: var(--color-neutral-gris-02);
}

/* Estilos para Top Bar */

.club_top_bar {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    background-color: var(--color-background-negro);
    padding: 16px 24px;
    position: fixed;
    top: 0%;
    z-index: 3;
}

.club_btn_top_menu {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-blanco-06);
}

.club_btn_icon_help {
    width: 100%;
    max-width: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

/* Estilos para la barra de navegacion */

.club_nav_bar {
    background: var(--color-background-negro);
    width: 100%;
    height: 98px;
    position: fixed;
    bottom: 0;
}

.club_nav_opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 16px 24;
    height: 98px;
    color: var(--color-neutral-blanco-06);
}

.club_nav_opcion_icono {
    text-align: center;
}

.club_nav_opcion_icono div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 50px;
}

.club_nav_opcion_icono span {
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
}

/* Cuando el icono es active */

.club_nav_opcion_icono.active {
    position: relative;
    top: -37%;
}

.club_nav_opcion_icono.active div {
    width: 48px;
    height: 48px;
    background: var(--color-primario-violeta-05);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--color-neutral-blanco-06);
    margin: auto;
    margin-bottom: 11px;
    /* Borde con color blanco (del fondo del body) */
}

.club_nav_opcion_icono.active div svg {
    color: var(--color-neutral-blanco-06);
}

.club_nav_opcion_icono.active span {
    font-weight: 700;
}

/* Clases para iconos especiales */

.club-icono-eye-invisible {
    transform: rotateX(180deg);
}

.club_icon_help {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url(../../src/assets/images/icons/Vector.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

/* Estilos para carrucel */

.club_contenedor_diamante {
    width: 100%;
    height: 82%;
    /* clip-path: polygon(20% 0, 80% 0, 100% 30%, 50% 100%, 0 30%); */
    /* clip-path: polygon(20% 0, 80% 0, 115% 30%, 50% 100%, -15% 30%); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    /* max-height: calc(var(--calculated-vh) * 100); */
    max-height: 60vh;
    min-width: 300px;
    /* background-color: #343434; */
}

.club_contenedor_diamante .club_diamante_img {
    /* width: 100%;
    height: calc(var(--calculated-vh) * 100); */
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    padding-top: 20px;
}

.club_swiper_tache {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 28%;
    left: 0%;
    z-index: inherit;
    color: var(--color-neutral-gris-02);
    opacity: 0.7;
}

.club_swiper_corazon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 28%;
    right: 0%;
    z-index: inherit;
}

.club_swiper_corazon svg {
    color: var(--color-primario-violeta-07);
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    position: absolute;
    top: 0px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active.swiper-pagination-bullet-active-main {
    width: 11.26px;
    height: 11.26px;
    background-color: var(--color-neutral-blanco-06) !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active-prev,
.swiper-pagination-bullet.swiper-pagination-bullet-active-next {
    width: 11.26px;
    height: 11.26px;
    background-color: var(--color-neutral-blanco-06) !important;
    opacity: 0.6;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    display: none;
}

/* Estilos para la parte de Perfil ELLA */

.club_status-verified {
    padding: 10px;
    color: var(--color-primario-violeta-05);
}

.club_location-profile {
    font-weight: 400;
    font-size: 10px;
    line-height: 150%;
    vertical-align: middle;
    color: var(--color-background-negro);
}

#profileOtherPerson .club_onboarding_info h1 {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 150%;
    display: flex;
    align-items: center;
}

.club_about-me h2 {
    font-size: 18px !important;
    font-weight: 900;
    color: #1F2024;
    margin-bottom: 5px;
    text-align: left;
    margin-bottom: 29px;
}

.club_preferences {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-neutral-gris-01);
    /* margin-bottom: 330px; */
    margin-top: 25px;
    text-align: left;
}

.club_identity-h1 {
    font-size: 16px;
    color: var(--color-primario-menta-12);
    margin-bottom: 5px;
    margin-top: 15px;
}

.club_identity_icon_container {
    margin-bottom: 37px;
}

.club_identity-h2 {
    font-size: 12px !important;
    color: var(--color-primario-menta-12) !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    line-height: 100% !important;
}

.club_tag {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    background: #f3f3f3;
    border-radius: 20px;
    color: var(--color-primario-violeta-06);
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 10px !important;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}

/* Estilos para la parte de Perfil */

.club_contenedor_settings {
    padding: 10px;
}

.club_configuración_barra,
.club_perfil_barra {
    height: auto;
    min-height: 50px;
    position: fixed;
    top: 0%;
    width: 100%;
    display: flex;
    z-index: 2;
}

.club_margin_bar_40 {
    margin-top: 40px;
}

.club_margin_bar_20 {
    margin-top: 20px;
}

.club_margin_bar_10 {
    margin-top: 10px;
}

.club_contenedor_bg_borde_gris {
    background-color: var(--color-background-negro);
    border-top: 1px solid var(--color-neutral-gris-03);
    border-bottom: 1px solid var(--color-neutral-gris-03);
}

.club_titulo_config {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 0;
}

.club_seccion_titulo-container {
    display: flex;
    flex-direction: column-reverse;
    height: 48px;
    gap: 10px;
    padding-left: 16px;
}

.club_seccion_titulo {
    width: 376px;
    height: 25px;
    padding-bottom: 3px;
    border-bottom-width: 0.33px;
}

.club_seccion_titulo-letra {
    width: 13px;
    height: 22px;

    font-weight: 590;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.4px;
}

.club_config_btn_back {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.club_config_parrafo {
    margin-bottom: 0px !important;
    font-size: 14px;
    line-height: 14px;
}

.club_btn_padding_0 {
    padding: 0px;
}

.club_config_btn_arrow {
    color: var(--color-neutral-blanco-06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.club_config_verifica_perfil {
    color: var(--color-alerta-rojo);
}

.club_config_verifica_perfil .club_config_perfil_icon_warning {
    margin-right: 5px;
}

.club_config_perfil_icon_safe {
    position: relative;
    /* Necesario para que el pseudo-elemento ::before se posicione relativo al icono */
}

.club_config_perfil_icon_safe::before {
    content: '';
    /* Necesario para mostrar el ::before */
    position: absolute;
    top: -5px;
    /* Ajusta la posición vertical del círculo */
    right: -5px;
    /* Ajusta la posición horizontal del círculo */
    width: 10px;
    /* Ancho del círculo */
    height: 10px;
    /* Alto del círculo */
    background-color: red;
    /* Color de la "notificación" */
    border-radius: 50%;
    /* Hace que el cuadrado sea un círculo */
    border: 2px solid white;
    /* Si quieres agregar un borde alrededor del círculo, opcional */
    z-index: 1;
    /* Asegura que el círculo esté por encima del ícono */
}

.club_padding_right_0 {
    padding-right: 0px !important;
}

.club_padding_top_0 {
    padding-top: 0px !important;
}

.club_padding_bottom_0 {
    padding-bottom: 0px !important;
}

.club_padding_left_0 {
    padding-left: 0px !important;
}

.club_sub_contenedor_serttigs {
    padding: 10px;
    margin-left: 5px;
    border-bottom: 1px solid var(--color-neutral-gris-03);
}

.club_no_border_bottom {
    border-bottom: none;
}

.club_no_border_top {
    border-top: none;
}

.club_no_border_left {
    border-left: none;
}

.club_no_border_right {
    border-right: none;
}

.club_parrafo_margin_bottom_5 {
    margin-bottom: 5px;
}

.club_bg_premium {
    color: var(--color-background-negro);
    border-radius: 50px;
    padding: 0px 5px;
    background:
        radial-gradient(circle at 50% 0,
            rgba(255, 0, 0, 0.5),
            rgba(255, 0, 0, 0) 70.71%),
        radial-gradient(circle at 6.7% 75%,
            rgba(0, 0, 255, 0.5),
            rgba(0, 0, 255, 0) 70.71%),
        radial-gradient(circle at 93.3% 75%,
            rgba(0, 255, 0, 0.5),
            rgba(0, 255, 0, 0) 70.71%) beige;
}

/* Estilos para el splash */

.club_contenedor_splash {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--calculated-vh) * 100);
}

.club_contenedor_splash img,
.club_bienvenida_logo img {
    width: 318px;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Estilos para la parte de Bienvenida */

.club_bienvenida_logo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.club_bienvenida_info h1 {
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin-bottom: 50px;
}

.club_bienvenida_info p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    z-index: 2;
}

.club_cont_btns_full {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 16px;
}

.club_btn_full {
    width: 100% !important;
    max-width: 100% !important;
}

.club_cont_btns_full button:first-child {
    margin-bottom: 16px;
}

.club_btn_full_general {
    height: 50px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
}

.club_bienvenida_btns .club_btn_full_general {
    color: var(--color-neutral-blanco-06);
}

.club_bienbenida_bandera_img {
    position: relative;
    bottom: 35px;
}

.club_bienvenida_nav {
    /* position: absolute; */
    /* top: 0%; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 57px;
    background-color: var(--color-primario-violeta-08);
}

.club_bienvenida_footer,
.club_tipo_cuenta_footer {
    /* position: fixed;
    bottom: 0%; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.club_bienvenida_footer {
    height: 17px;
}

.club_bienvenida_footer span,
.club_tipo_cuenta_footer p {
    color: var(--color-neutral-gris-01);
    font-size: 11px;
    font-weight: 400;
    line-height: 16.5px;
}

.club_tipo_cuenta_footer p {
    /* color: var(--color-neutral-blanco-06) !important; */
    text-align: center;
}

.club_onboarding_img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.club_onboarding_info {
    margin-bottom: 40px;
    flex-grow: 1;
}

.club_onboarding_info h1 {
    width: 100%;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin-bottom: 24px;
}

.club_onboarding_info p {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    z-index: 2;
    margin-bottom: 0px !important;
}

.club_cont_btns_doble {
    display: flex;
    justify-content: space-around;
    padding-bottom: 16px;
}

.club_onboarding_bullets_cont {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px 0px;
}

.club_onboarding_bullet {
    border-radius: 50%;
    background-color: var(--color-neutral-gris-06);
    width: 8px;
    height: 8px;
    margin: 0px 4px;
}

.club_onboarding_bullet.active {
    background-color: var(--color-primario-oro);
}

/* Estilos para el tipo de cuenta */

.club_margin_top_63 {
    margin-top: 63px;
}

.club_cont_info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.club_cont_info_grow_1 {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    width: 100%;
    flex-grow: 1;
}

.club_cont_info .club_titulo_general {
    text-align: center;
}

.club_titulo_general {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
}

.club_tipo_cuenta_cont_btns,
.club_crear_cuenta_cont_btns {
    margin-top: 63px;
}

.club_tipo_cuenta_cont_btns .club_tipo_cuenta_btn {
    height: 105px;
    width: 100%;
    max-width: 353px;
    text-align: center;
    padding: 14px 40px;
    border-radius: 20px;
    border: 1px solid var(--color-background-negro);
    background-color: var(--color-neutral-blanco-06);
    color: var(--color-background-negro);
    margin: 10px 0px;
}

/* Estilos para Notificaciones */

.club_notific_info {
    margin-top: 93px;
}

.club_notificaciones_btns .club_btn_full_general {
    height: 50px;
}

.club_notificaciones_txt {
    margin-top: 40px;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    text-align: center;
}

.club_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    display: block !important;
}

.club_modal.fade:not(.show) {
    transition: opacity .15s linear;
}

.fade:not(.show) {
    transition: opacity .15s linear;
}

.modal-backdrop {
    z-index: 1056;
}

.club_modal .modal-dialog {
    top: 30%;
    transform: translate(0, -50%) !important;
}

.club_modal .modal-content {
    background-color: var(--color-background-blanco);
}

/* Estilos para Creacion de cuenta */

.club_btn_neutro {
    height: 50px;
    width: 100%;
    color: var(--color-background-negro);
    background-color: var(--color-neutral-blanco-06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 100px;
}

.club_btn_negro {
    height: 50px;
    width: 100%;
    color: var(--color-neutral-blanco-06);
    background-color: var(--color-background-negro);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 100px;
}

.club_crear_cuenta_cont_btns>button {
    margin-bottom: 12px;
}

.club_crear_cuenta_btn_top {
    display: flex;
    justify-content: start;
    width: 100%;
    padding: 14px 0;
    margin-bottom: 60px;
}

/* Estilos para la barra de progreso de completar perfil */

.club_cont_barra {
    width: 100%;
    padding: 16px 24px;
    background-color: var(--color-neutral-gris-01);
    border-radius: 16px;
}

.club_cont_barra>span {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-neutral-blanco-06);
}

.club_cont_barra .club_barra_progreso {
    margin-top: 8px;
}

#clubDatosPersonales .club_progreso.active {
    background-color: var(--color-primario-oro);
}

.club_input,
#clubDatosPersonales .club_input {
    margin-bottom: 15px;
}

.club_input_label,
#clubDatosPersonales .club_input_label {
    color: var(--color-background-negro);
}

.club_input_icon_der,
#clubDatosPersonales .club_input_icon_der {
    color: var(--color-background-blanco);
}

.club_input_campo,
#clubDatosPersonales .club_input_campo {
    background-color: var(--color-neutral-gris-01);
    color: var(--color-neutral-gris-03);

}

#clubDatosPersonales form {
    margin-bottom: 10%;
}

/* Estilos para el input de teléfono */

.club_input,
#clubCrearCuentaTel .club_input {
    margin-bottom: 15px;
}

.club_input_icon_der,
.club_input_label,
#clubCrearCuentaTel .club_input_icon_der,
#clubCrearCuentaTel .club_input_label {
    color: var(--color-neutral-blanco-06);
}

.club_input_campo,
#clubCrearCuentaTel .club_input_campo {
    background-color: var(--color-neutral-gris-01);
    color: var(--color-neutral-gris-03);
    display: flex;
    align-items: center;
}

#clubCrearCuentaTel .club_input_campo {
    padding-left: 15px;
}

.club_input_campo_tel {
    background: transparent;
    border: none;
    color: var(--color-neutral-gris-02);
}

input:focus,
input[type="tel"]:focus,
input[type="date"]:focus {
    border: none;
    /* Borde personalizado cuando está enfocado */
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: none;
    color: fieldtext !important;
}

input[type="date"] {
    display: inline;
    padding-right: 15px;
    appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background: 0 0;
    margin: 0;
    opacity: 0;
    pointer-events: auto;
}

.club_select_paises {
    background: none;
    border: none;
    color: var(--color-neutral-blanco-06);
}

#clubCrearCuentaTel .club_select_paises {
    color: var(--color-neutral-gris-02);
}

.react-tel-input .flag-dropdown {
    background-color: #f0f0f0;
}

.react-tel-input input {
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilos para el selector de opciones de configuracion de perfil */

.club_cont_opciones_check {
    width: 100%;
    display: flex;
    color: var(--color-neutral-blanco-06);
    border-radius: 16px;
    background-color: var(--color-neutral-gris-01);
    padding: 24px 16px;
    flex-wrap: wrap;
    margin-top: 10%;
    margin-bottom: 10%;
}

.club_titulo_opciones_check {
    width: 100%;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 3%;
}

.club_cont_lista_opciones_check {
    width: 100%;
    padding: 0px;
}

.club_lista_opciones_check {
    width: 100%;
    padding: 12px 18px 12px 24px;
    border: none;
    border-bottom: 1px solid var(--color-neutral-blanco-06);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--color-neutral-blanco-06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

/* Estilos nuevos para el contenedor del carruel */

.club_contenedor_tres_secciones {
    display: flex;
    flex-direction: column;
    height: calc(var(--calculated-vh) * 100);
    /* 100% de la altura de la pantalla */
}

.club_contenido_top {
    flex: 0 0 7%;
    flex-shrink: 0;
    flex-grow: 0;
    text-align: center;
    max-height: 56px;
}

.club_content_central {
    /* flex: 0 0 70%; */
    flex: 1;
    overflow: hidden !important;
    color: var(--color-neutral-blanco-06);
    padding-top: 3%;
    padding-bottom: 3%;
}

.club_contenido_bottom {
    flex: 0 0 11%;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    max-height: 98px;
}

#clubHome {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#clubHome .swiper {
    height: 100%;
    /* Ajusta la altura al 100% de su contenedor padre */
    width: 100%;
    /* Si también deseas que tome todo el ancho */
}

#clubHome .input-dinamico .club_input_label {
    color: var(--color-neutral-blanco-06);
}

#clubHome .input-dinamico .club_input_campo{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}

#clubHome .input-dinamico .club_input_campo,
#clubHome .input-dinamico .club_input_campo:focus {
    color: var(--color-neutral-gris-02) !important;
    background-color: var(--color-background-blanco) !important;
    border-bottom: 4px solid var(--color-primario-violeta-05);
}

#clubHome .input-dinamico .club_input_icon_der,
#clubHome .input-dinamico .club_input_icon_izq {
    color: var(--color-neutral-gris-02);
}

/* #clubHome .club_contenedor_diamante, */
#clubHome .club_swiper_corazon,
.club_centrar_pantalla {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#clubHome .club_swiper_corazon,
#clubHome .club_swiper_tache {
    position: absolute;
    top: 41%;
    transform: translateY(-50%);
}


.card {
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 10px 30px var(--color-primario-oro);
    overflow: hidden;
    text-align: center;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.pagination {
    margin-top: 10px;
    text-align: center;
}

.club_cont_tinder_swipe {
    width: 100%;
    /* margin: 0px auto; */
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: calc(var(--calculated-vh) * 100);
}

.club_centrar_swiper_tinder {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.club_centrar_swiper_tinder h3 {
    margin-bottom: 0;
}

.club_imagen_fondo {
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    height: 100%;
    object-fit: cover;
}

.club_bullets_imgs {
    width: 100%;
    display: flex;
    justify-content: center;
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    height: 15px !important;
}

/* Estilos para carrucel del perfil */

.club_perfil_cont_fotos {
    margin: 5% 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 12px;
    border: 1px solid var(--color-secundario-menta-07);
    -webkit-box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1);
    -moz-box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1);
    box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1);
    overflow: hidden;
}

/* .club_contenedor_foto_perfil {
    width: 100%;
    height: 82%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    max-height: calc(var(--calculated-vh) * 100);
    background-color: #343434;
} */

.club_carrusel_perfil {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: grid;
}

.club_carrusel_perfil .club_perfil_fotos_swiper {
    width: 100%;
    height: 530px;
}

.club_carrusel_perfil .club_perfil_fotos_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.club_carrusel_perfil .swiper-pagination-bullet {
    background: #ccc;
    /* Color por defecto */
}

.club_carrusel_perfil .swiper-pagination-bullet-active {
    background: var(--color-primario-oro);
    /* Color cuando está activo */
}

.club_carrusel_perfil .swiper-slide {
    padding-top: 0;
}

.club_datos_perfil {
    position: absolute;
    transform: translateY(50%);
    top: 71%;
    display: flex;
    justify-content: end;
    text-align: end;
    width: 100%;
    align-items: start;
    padding: 0px 15px;
    flex-wrap: wrap;
}

.club_perfil_completado,
.club_perfil_info {
    width: 100%;
}

.club_location_pronombre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
}

.club_location_pronombre span:first-child {
    margin-right: 10px;
}

.club_location_pronombre span svg {
    margin-right: 5px;
}

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gallery-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.club_cont_perfil_foto {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 10%;
}

.club_cont_perfil_img {
    width: 100px;
    height: 100px;
    display: flex;
    border-radius: 50%;
    border: 2px solid var(--color-background-negro);
    background-color: var(--color-neutral-gris-04);
    overflow: hidden;
    margin: 7% 0px;
    object-fit: cover;
    /* -webkit-box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1);
    -moz-box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1);
    box-shadow: 0px 0px 57px 2px rgba(167, 10, 102, 1); */
}

.club_cont_perfil_img img {
    width: 100%;
    display: flex;
    object-fit: cover;
}

.club_input_contenedor textarea {
    height: 200px !important;
}

.thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.thumbnail {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.club_btn_edit_foto_perfil {
    position: absolute;
    transform: translate(50%, 50%);
    top: 22%;
    left: 52%;
    color: var(--color-neutral-gris-06);
}

.club_no_wrap_desk {
    flex-wrap: wrap;
}

.club_info_personal_perfil {
    margin-bottom: 20px;
}

.club_lista_ul {
    list-style: none;
    text-decoration: none;
}

.club_lista_li {
    margin-top: 0px;
    text-decoration: none;
    list-style: none;
}

.club_lista_li.club_contenedor_bg_borde_gris {
    background-color: transparent;
}

input[type="file"] {
    opacity: 0;
    width: 60px;
    display: inline-block;
}

.club_icon_add_fotos {
    position: absolute;
    left: 0;
    z-index: -1;
}

.club_perfil_preferencias {
    width: auto !important;
    padding: 5px 15px !important;
    margin: 10px !important;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-blanco-06);
    border-radius: 50px !important;
    background: var(--color-primario-violeta-07);
    /* background: rgb(252, 158, 213);
    background: linear-gradient(0deg, rgba(252, 158, 213, 1) 0%, rgba(167, 10, 102, 0.7525385154061625) 35%); */
    /* -webkit-box-shadow: -1px 10px 11px 0px rgba(167,10,102,1);
    -moz-box-shadow: -1px 10px 11px 0px rgba(167,10,102,1);
    box-shadow: -1px 10px 11px 0px rgba(167,10,102,1); */
}

.club_texto_sombreado {
    font-size: 3rem;
    letter-spacing: -2px;
    line-height: 1.1;
    text-shadow: 0 0 10px #0006;
    color: #222;
}

.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

/* // Estilos del chat */

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(var(--calculated-vh) * 100);
}

.message-list {
    flex-grow: 1;
    overflow-y: scroll;
}

.message {
    padding: 10px;
    margin: 5px;
    border-radius: 20px;
    max-width: 60%;
}

.my-message {
    background-color: #dcf8c6;
    align-self: flex-end;
}

.other-message {
    background-color: #f1f1f1;
    align-self: flex-start;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-28 18:29:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}



.club_texto_sombreado_violeta_07 {
    line-height: 1.1;
    text-shadow: 0 0 10px var(--color-primario-violeta-07);
    color: var(--color-primario-violeta-07);
}

.club_texto_sombreado_gis_02 {
    line-height: 1.1;
    text-shadow: 0 0 10px var(--color-neutral-gris-02);
    color: var(--color-neutral-gris-02);
}

.club_texto_sombreado_blanco {
    line-height: 1.1;
    text-shadow: 0 0 10px var(--color-neutral-blanco-06);
    color: var(--color-neutral-blanco-06);
}

.club_texto_sombreado_negro {
    line-height: 1.1;
    /* text-shadow: 0 0 10px var(--color-background-negro); */
    color: var(--color-background-negro);
}

.club_perfil_pensamiento,
.club_perfil_preferencias {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-primario-violeta-11);
    padding: 10px 15px;
}

.club_perfil_pensamiento_titulo {
    text-align: center;
    margin-bottom: 0;
}

.club_perfil_pensamiento_texto {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-primario-violeta-11);
    text-align: start;
    font-size: 16px;
    background-color: var(--color-neutral-gris-02);
    margin-top: 10px;
    min-height: 30px;
    padding: 10px 15px;
}

.club_cont_data_perfil {
    margin-bottom: 24px;
}

.club_cont_data_perfil h3 {
    margin-bottom: 0px;
}

.club_cont_data_perfil li {
    margin-top: 3px;
    margin-bottom: 3px;
}

#perfilUsuario .club_cont_barra {
    background-color: transparent !important;
}

.club_carrucel_datos_persona {
    color: var(--color-background-negro);
}

/* Estilos para el componente de codigo de celilar  */

.club_cont_info_codigo {
    margin-top: 80px;
    display: flex;
}

.club_txt_titulo {
    font-size: 16px;
    font-weight: 900;
    line-height: 19.36px;
    letter-spacing: 0.005em;
    text-align: center;
}

.club_cont_inputs_codigo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#clubCodigoVerify .club_input_codigo {
    width: 48px;
    height: 48px;
    padding: 12px 16px 12px 16px;
    gap: 8px;
    border-radius: 12px;
    /* border: 1px solid #C5C6CC !important; */
    text-align: center;
}

#clubCodigoVerify .club_input_codigo:focus {
    border: 1px solid var(--color-primario-oro);
    color: var(--color-primario-oro);
    box-shadow: 0 0 3px var(--color-primario-oro);
}

#clubCodigoVerify .club_input_border_codigo {
    border: 1px solid #C5C6CC;
}

#clubCodigoVerify .club_input_border_codigo:focus {
    border: 1px solid var(--color-primario-oro);
}

#clubCodigoVerify .club_input_border_codigo_error {
    border: 1px solid var(--color-alerta-rojo);
}

#clubCodigoVerify .club_input_border_codigo_error:focus {
    border: 1px solid var(--color-primario-oro);
}

.club_navbar {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: calc(var(--calculated-vh) * 100);
    /* background-color: rgba(255, 255, 255, .6); */
    color: var(--color-background-negro);
    display: flex;
    justify-content: center;
    z-index: 1000;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.club_navbar_cont {
    width: 247px;
    border-radius: 0px 16px 16px 0px;
    /* background-color: var(--color-background-blanco); */
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(4px);
}

.club_navbar_list {
    list-style: none;
}

.club_navbar_list li {
    cursor: pointer;
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-align: start;
}

.club_navbar_list li:hover {
    background-color: #555;
}

.club_info_intereses_contenedor {
    background-color: var(--color-neutral-gris-06);
    padding: 24px 16px 24px 16px;
    border-radius: 16px;
}

.club_texto_capsula {
    padding: 5px 10px;
    border-radius: 12px;
    background-color: var(--color-neutral-blanco-06);
    color: var(--color-primario-oro);
    margin: 5px;
}

.cap_active {
    padding: 5px 10px;
    border-radius: 12px;
    background-color: var(--color-primario-oro);
    color: var(--color-neutral-blanco-06);
}

.club_cont_data_perfil>.club_txt_titular {
    margin-bottom: 10px;
}

.club_info_personal_perfil {
    padding: 15px 54px;
}

#perfilUsuario .club_titulo_config {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
}

/* Estilos para el Loader  */

.loader_index {
    position: fixed;
    top: 0%;
    right: 0%;
    height: calc(var(--calculated-vh) * 100);
    width: 100%;
    background: #0000004f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader, .loader:before, .loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
    color: var(--color-primario-oro);
    font-size: 7px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

.loader:before {
    left: -3.5em;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

@keyframes bblFadInOut {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em
    }

    40% {
        box-shadow: 0 2.5em 0 0
    }
}

/* Estilos para los cards de suscribete */

.container {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.image-section {
    position: relative;
}

.background-image {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    text-align: center;
}

.overlay-text h2 {
    margin: 0;
    font-size: 20px;
}

.overlay-text p {
    margin: 5px 0;
    font-size: 14px;
}

.subscription-section {
    display: flex;
    justify-content: space-between;
    margin: 20px 10px;
}

.plan {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 8px;
    width: 31%;
    /* height: 100px; */
}

.plan-title {
    font-size: 20px;
    font-weight: regular;
}

.plan-price {
    font-size: 13px;
    margin-top: 5px;
}

.plan-price span {
    font-size: 11px;
    color: #bbb;
}

.plan.selected {
    border: 2px solid var(--color-primario-violeta-05);
    /* O el color que prefieras */
    /* -webkit-box-shadow: -1px 0px 23px 0px rgba(255,158,0,0.81);
    -moz-box-shadow: -1px 0px 23px 0px rgba(255,158,0,0.81);
    box-shadow: -1px 0px 23px 0px rgba(255,158,0,0.81); */
}

.continue-button {
    display: block;
    background-color: #d4af37;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin: 20px auto;
    text-transform: uppercase;
}

.continue-button:hover {
    background-color: #c39530;
}

.footer-text {
    font-size: 12px;
    color: #666;
    margin: 10px 20px 20px;
}

.club_intereses_bg_negro {
    background-color: var(--color-neutral-gris-01);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

/* Estilos checkbox */

.club_checkbox_wrapper_1 *,
.club_checkbox_wrapper_1 ::after,
.club_checkbox_wrapper_1 ::before {
    box-sizing: border-box;
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style {
    margin: 0;
    width: 0;
    height: 0;
    display: inline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style+label:before {
    content: "";
    display: inline-block;
    vertical-align: top;
    height: 1.15em;
    width: 1.15em;
    margin-right: 0.6em;
    color: rgba(0, 0, 0, 0.275);
    border: solid 0.06em;
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;
    border-radius: 0.2em;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;
    background-size: 0;
    will-change: color, border, background, background-size, box-shadow;
    transform: translate3d(0, 0, 0);
    transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:enabled:active+label:before,
.club_checkbox_wrapper_1 [type=checkbox].club_check_style:enabled+label:active:before {
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em var(--color-primario-oro) inset;
    background-color: var(--color-background-blanco);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:checked+label:before {
    background-color: var(--color-primario-oro);
    background-size: 0.75em;
    color: rgba(0, 0, 0, 0.075);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:checked:enabled:active+label:before,
.club_checkbox_wrapper_1 [type=checkbox].club_check_style:checked:enabled+label:active:before {
    background-color: var(--color-primario-oro);
    color: rgba(0, 0, 0, 0.275);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:focus+label:before {
    box-shadow: 0 0 3px var(--color-primario-oro);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:focus:active+label:before,
.club_checkbox_wrapper_1 [type=checkbox].club_check_style:focus+label:active:before {
    box-shadow: 0 0 3px var(--color-primario-oro);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style:disabled+label:before {
    opacity: 0.5;
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark+label:before {
    color: rgba(255, 255, 255, 0.275);
    background-color: #222;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark:enabled:active+label:before,
.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark:enabled+label:active:before {
    background-color: #444;
    box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(255, 255, 255, 0.1) inset;
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark:checked+label:before {
    background-color: #a97035;
    color: rgba(255, 255, 255, 0.075);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark:checked:enabled:active+label:before,
.club_checkbox_wrapper_1 [type=checkbox].club_check_style.dark:checked:enabled+label:active:before {
    background-color: #c68035;
    color: rgba(0, 0, 0, 0.275);
}

.club_checkbox_wrapper_1 [type=checkbox].club_check_style+label {
    -webkit-user-select: none;
    user-select: none;
}

#clubNotifications .club_notific_info_2 {
    margin-top: 28px;
}

.club_btn_close_float {
    position: absolute;
    z-index: 2;
    margin: 5%;
}

.club_modal_suscribe .modal-content {
    background-color: var(--color-neutral-gris-01);
    color: var(--color-neutral-blanco-06);
    border: 2px solid var(--color-primario-oro);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    border-radius: 20px;
    padding: 0 5px;
}

.club_modal_suscribe .modal-footer {
    border-top: none;
    padding-top: 0;
}

.club_modal_suscribe .club_txt_body_suscribe {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Estilos carrucel de suscripciones  */

#Suscriptions .club_carrusel_perfil .club_perfil_fotos_img {
    border-radius: 0px;
}

#Suscriptions .club_carrusel_perfil .club_perfil_fotos_swiper {
    height: 488px;
}

/* Actualizacion de estilos para el configurador de perfil */

#setupPerfil {
    background-color: var(--color-background-negro);
    color: var(--color-neutral-blanco-06);
    height: calc(var(--calculated-vh) * 100);
    text-align: justify;
}

#setupPerfil .club_contenedor_settings {
    margin-left: 10px;
    margin-right: 10px;
}

/* Estilos para la barra de botones dinamicos */

.club_nav_btn_dynamic {
    width: 100%;
    background: var(--color-neutral-azul-01);
    border-radius: 15px;
    padding: 0px 5px;
    height: 39px;
    display: flex;
    align-items: center
}

.club_nav_btn_dynamic_btn {
    background-color: transparent;
    color: #71727A;
    height: 31px;
}

.club_nav_btn_dynamic_btn.active {
    background-color: var(--color-primario-oro) !important;
    color: var(--color-neutral-blanco-06) !important;
    border-radius: 15px !important;
}

/* Estilos para las anclas */

.club_links {
    text-decoration: none;
}

#chatsBox .club_contenido_top.club_cont_info>div,
#friendsBox .club_contenido_top.club_cont_info>div,
#alertsBox .club_contenido_top.club_cont_info>div,
#chatBoxPrivate .club_contenido_top.club_cont_info>div {
    width: 100%;
    display: contents;
}

/* Estilos para seccion de likes */

.club_content {
    display: flex;
    width: 100%;
    /* width: 375px; */
    height: 500px;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    border-radius: 16px;
    background: var(--color-neutral-gris-06, #F7F7F7);
    /* Dropdown Shadow */
    box-shadow: 0px 4px 11px 0px rgba(151, 151, 151, 0.25);
}

.club_icon-container {
    width: 80px;
    height: 80px;
    margin-top: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.club_message-title {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px 0;
    color: var(--color-neutral-gris-01);
}

club_onboarding_info p {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    z-index: 2;
}

.club_message-description {
    font-size: 14px;
    color: var(--color-neutral-gris-01);
    margin: 0 20px 20px;
    text-align: center;
}

.club_action-button {
    background-color: var(--color-primario-oro);
    color: var(--color-neutral-blanco-06);
    border: none;
    font-size: 14px !important;
    border-radius: 12px !important;
    cursor: pointer;
    display: flex;
    width: 217px;
    height: 40px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.club_icon_card_no_notifications {
    width: 85px;
    height: 85px;
    color: var(--color-primario-oro);
}

/* Estilos de alerta estatica */

/* #setupPerfil {
    margin-top: 40px;
} */

#setupPerfil .club_configuración_barra {
    padding: 0px 10px;
}

#setupPerfil .club_titulo_config {
    line-height: 25px;
}

.club_alert_static {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
    padding: 10px 0;
}

.club_center_content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;
    text-align: center;
}

.club_no_decoration_list {
    list-style: none !important;
}

.club_list_separation {
    margin-left: 5px;
}

.club_list_separation:first-child {
    margin-left: 0px;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    /* background-color: var(--color-neutral-gris-04) !important; */
    border: 1px solid var(--color-neutral-gris-02) !important;
    color: var(--color-neutral-gris-02) !important;
}

#chatBoxPrivate .club_input_contenedor textarea {
    height: auto !important;
    padding: 8px 25px;
    background: var(--color-neutral-gris-07);
    border: 1px solid var(--color-gris-descubre);
}

.club_scroll_y {
    overflow-y: scroll;
}

.club_requqest_content_photo {
    margin-right: 10px;
}

.club_new_request .club_cont_perfil_img {
    height: 50px;
    width: 50px;
    min-width: 50px;
    border: 2px solid var(--color-primario-violeta-04);
    object-fit: cover;
}

.club_friends_name {
    font-size: 17px !important;
    color: var(--color-primario-oro);
    margin-bottom: 0px !important;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 77vh;
    padding: 10px 0;
    width: 100%;
}

.message {
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
}

.sent {
    align-self: flex-end;
    background-color: #DCF8C6;
    /* Verde claro (como WhatsApp) */
    color: #000;
}

.received {
    align-self: flex-start;
    background-color: #EAEAEA;
    /* Gris claro */
    color: #000;
}

.club_write_chat_fixed {
    position: fixed;
    bottom: 0%;
}

.club_force_scroll_y {
    overflow-y: scroll !important;
}

#chatsBox .club_cont_perfil_img {
    height: 50px;
    width: 50px;
}

.club_content_scroll {
    display: flex;
    width: 100%;
    height: calc(75vh - 60px);
    /* height: 600px; */
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 10px 0px;
}

#chatBoxPrivate .club_input_label {
    color: var(--color-background-negro);
}

.message_chat_dest {
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    position: relative;
    color: var(--color-background-negro);
    background: var(--color-neutral-gris-07);

    &::after {
        --size: 10px;
        content: "";
        display: block;
        width: var(--size);
        height: var(--size);
        position: absolute;
        background: var(--color-neutral-gris-07);
        top: calc(var(--size)* -0.5);
        clip-path: polygon(0% 0%, 100% 50%, 0% 50%);
    }
}

.message_chat_rem {
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    position: relative;
    background: var(--color-primario-oro);
    color: var(--color-background-blanco) !important;

    &::after {
        --size: 10px;
        content: "";
        display: block;
        width: var(--size);
        height: var(--size);
        position: absolute;
        background: var(--color-primario-oro);
        bottom: calc(var(--size)* -0.7);
        right: calc(var(--size)* 1);
        clip-path: polygon(0% 0%, 100% 15%, 100% 100%);
    }
}

.club_chat_name {
    color: #71727A;
    font-size: 12px;
    font-weight: 700;
}

.message_chat_rem .club_chat_name {
    color: var(--color-background-blanco);
}

.club_time_stamp {
    font-size: 8px;
    color: #71727A;
}

.message_chat_rem .club_time_stamp {
    color: var(--color-background-blanco) !important;
}

.club_message_content {
    padding: 3px 0px;
}

.club_bienvenida_btns .club_btn_full_general,
.club_crear_cuenta_cont_btns .club_btn_full_general {
    height: 50px;
}

#homeHelena .club_input {
    margin-bottom: 0px;
}

#homeHelena .club_input label {
    display: none;
}

.notification-badge {
    position: absolute;
    top: -4px;
    /* right: -8px; */
    background: red;
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 12px;
}

.club_img_notify {
    height: 50px;
    width: 50px;
    border: 2px solid var(--color-primario-oro);
}

.Toastify__toast-theme--light {
    background-color: var(--color-background-negro) !important;
    color: var(--color-neutral-blanco-06) !important;
}

.Toastify__progress-bar-theme--light {
    background: var(--color-primario-oro) !important;
}

.club_info_me>h3 {
    margin-bottom: 0px !important;
}

.club_info_me li {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    height: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.club_info_me li span {
    margin: 0px !important;
    padding: 0px !important;
}

.club_info_span_card_discover {
    white-space: pre-line;
    font-size: 12px;
    color: var(--color-neutral-gris-02);
    margin: 10px 0px 16px;
}

.club_no_img_profile {
    height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.helena_toast_alert {
    width: 342px;
    height: 100px;
    opacity: 1;
    border-radius: 16px;
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    gap: 8px;
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    top: 20px;
    color: var(--color-neutral-blanco-06);
    justify-content: center;
    align-items: center;
}

.club_text_error_codigo {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: middle;
    padding: 8px;
    margin: 24px 0px;
}

.btn_create_group {
    /* display: flex;
    justify-content: flex-end;
    width: 100%; */
    position: fixed;
    bottom: calc(20% - 30px);
    right: calc(11% - 15px);
}

.btn_create_group > button {
    width: 163px;
    height: 48px;
    display: flex;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
}

.club_input_help_text {
    font-weight: 700;
    font-style: Bold;
    font-size: 12px !important;
    line-height: 150%;
    letter-spacing: 0%;
    font-family: Arial, Helvetica, sans-serif;
}

.calc_height {
    height: calc(80vh - 60px);
}

.club_bg_btn_close {
    width: 30px;
    height: 30px;
    background-color: var(--color-neutral-gris-02);
    opacity: 0.7;
    border-radius: 100%;
}

.club_wrap_input_chat {
    padding: 15px 0px 30px 0px;
}

.club_likes_content {
    margin-bottom: 10px;
    border-radius: 15px;
    padding: 3px 15px 3px 0px;
}


/* Dispositivos X-Small (teléfonos verticales, menos de 576 px)
No hay consulta de medios para `xs` ya que este es el valor predeterminado en Bootstrap  */

/* Dispositivos pequeños (teléfonos horizontales, 576 px y superiores) */

@media (max-width: 360px) {

    .club_titulo_general {
        font-size: 22px;
    }

    .club_tipo_cuenta_cont_btns {
        margin-top: 10px;
    }

    .club_contenedor_diamante {
        width: 76vw;
        height: 46vh;
        max-width: 255px;
        max-height: 300px;
        min-width: 255px;
        min-height: 300px;
    }
}

@media (max-width: 380px) {

    .club_titulo_general {
        font-size: 22px;
    }

    .club_tipo_cuenta_cont_btns {
        margin-top: 10px;
    }

    .club_contenedor_diamante {
        width: 76vw;
        height: 46vh;
        max-width: 255px;
        max-height: 300px;
        min-width: 255px;
        min-height: 300px;
    }

    .club_content_scroll {
        height: calc(80vh - 70px);
    }

    .btn_create_group {
        bottom: calc(25% - 30px);
    }

    .calc_height {
        height: calc(75vh - 55px);
    }

    .club_content {
        height: auto;
    }
}

/* Dispositivos pequeños (teléfonos horizontales, 576 px y superiores) */
@media (min-width: 576px) {
    .club_contenedor_diamante {
        /* width: 85vw;
        height: 62vh; */
        width: 62vw;
        height: 60vh;
        max-width: 371px !important;
        max-height: 416px !important;
        min-width: 371px !important;
        min-height: 416px !important;
    }

    .club_swiper_corazon {
        top: 29%;
    }

    .club_swiper_tache {
        top: 29%;
    }

    .club_content_scroll {
        height: calc(80vh - 70px);
    }

    .btn_create_group {
        bottom: calc(20% - 10px);
    }

    .calc_height {
        height: calc(-45px + 75vh);
    }
}

/* Dispositivos medianos (tabletas, 768 px y superiores) */
@media (min-width: 768px) {
    .club_contenedor_diamante {
        width: 44vw;
        height: 55vh;
    }

    .club_perfil_cont_fotos {
        max-width: 600px;
    }

    .club_carrusel_perfil .club_perfil_fotos_swiper {
        height: 720px;
    }

    .club_no_wrap_desk {
        flex-wrap: nowrap;
    }
}

/* Dispositivos grandes (computadoras de escritorio, 992 px y superiores) */
@media (min-width: 992px) {
    .club_contenedor {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .club_contenedor_diamante {
        width: 43vw;
        height: 55vh;
    }
}

/* Dispositivos X-Large (escritorios grandes, 1200 px y más) */
@media (min-width: 1200px) {
    .club_contenedor_diamante {
        width: 34vw;
        height: 53vh;
    }
}

/* Dispositivos XX-Large (escritorios más grandes, 1400 px y más) */
@media (min-width: 1400px) {
    .club_contenedor_diamante {
        width: 21vw;
        height: 52vh;
    }
}