:root {
    --white: #fff;
    --primary-blue: #3fabf3;
    --primary-blue-hover: #308eb7;
    --primary-red: #dc3545;
    --primary-ocean: #0d6efd;
    --primary-ocean-dark: #152e4d;
    --primary-yellow: #ffc107;
    --primary-yellow-hover: #ca9a08;
    --text-sm-responsive: clamp(1rem, 4vw, 1.3rem);
    --fs-xl: clamp(1.78rem, 1.5rem + 1.25vw, 2.85rem);
    --padding-header: min(5.5rem, 5rem + 1.25vw);
    --py-lg: clamp(2rem, 1.5rem + 1.25vw, 2.85rem);
    --fs-600: 1.5rem;
    --fs-400: 1.25rem;
    --fs-200: 0.9rem;
    --text-xs-size: 0.75rem;
    --text-xs-line: 1rem;
    --text-sm-size: 0.875rem;
    --text-sm-line: 1.25rem;
    --text-base-size: 1rem;
    --text-base-line: 1.5rem;
    --text-lg-size: 1.125rem;
    --text-lg-line: 1.75rem;
    --text-xl-size: 1.25rem;
    --text-xl-line: 1.75rem;
    --text-2xl-size: 1.5rem;
    --text-2xl-line: 2rem;
    --text-3xl-size: 1.875rem;
    --text-3xl-line: 2.25rem;
    --text-4xl-size: 2.25rem;
    --text-4xl-line: 2.5rem;
    --text-h2-line: 2.8rem;
    --color-black: #000;
    --color-gray: #767676;
    --color-gray-light: #f7f7f7;
    --color-blue: #3fabf3;
    --color-blue-hover: #3186be;
    --color-red: #f33a3a;
}

.modal-close-button {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    position: absolute;
    /* top: 1.2rem;
    right: 1.5rem; */
    color: red;
    background: none;
    border: none !important;
    opacity: 0.6;
    transition: 0.2s all ease-in-out;
    font-size: var(--text-lg-size);
}

.modal-close-button:focus {
    outline: none !important;
}

.modal-close-button:hover {
    opacity: 1;
}

a:hover {
    color: red !important;
}

.scaem-btn--dimension {
    max-width: 160px;
    width: 160px;
    padding: 10px;
    text-align: center;
    border: none;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: capitalize;
    transition: 0.2s opacity ease-in-out;
}

.scaem-btn--dimension:hover {
    opacity: 0.8;
}

.scaem-btn--dimension:focus {
    outline: none;
}

.modal-content {
    height: 100%;
}


.swal2-actions {
    margin-top: clamp(1rem, 5vw, 3rem);
}

.swal2-actions,
.swal2-html-container {
    padding-inline: clamp(1rem, 5vw, 3rem);
}

.foto-tarjeta--width-flexible {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    max-width: clamp(8rem, 30vw, 8.5rem);
}