﻿:root {
    --font-inter-tight: "Inter";
    --color-primary-50: #F5F2FF;
    --color-primary-100: #ECE5FF;
    --color-primary-200: #D8C7FF;
    --color-primary-300: #C4A8FF;
    --color-primary-400: #9A64FF;
    --color-primary-500: #631FFE;
    --color-primary-600: #7c31f6;
    --color-secondary: #101045;
    --color-secondary-500: #fe712e;
    --color-white: #FFFFFF;
    --color-wp-green: #25D366;
    --text-white: #FFFFFF;
    --color-status-info: #1A4E68;
    --color-status-info-bg: #C6E8FA;
    --color-status-success: #2E7D32;
    --color-status-success-bg: #E8F5E9;
    --color-status-warning: #C2A100;
    --color-status-warning-bg: #c2a10012;
    --color-status-error: #A75203;
    --color-status-error-bg: #FFF9F3;
    --color-light-blue: #A8BCFf;
    --color-status-danger: #A80005;
    --color-status-danger-bg: #a800051a;
    --color-bs-danger: #ef5350;
    --color-btn-primary: #591CE5;
    --color-steps: #FFF7DE;
    --drop-shadow-2xl: 0 4px 12px rgba(0, 0, 0, 0.05);
    --bamai-background: #080926;
}

.bg-bamai {
    background-color: var(--bamai-background);
}

.text-secondary-white {
    color: color-mix(in oklab, #FFFFFF 60%, transparent);
}

.text-secondary-500 {
    color: var(--color-secondary-500);
}

.text-purple {
    color: var(--color-btn-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.div-shadow {
    box-shadow: var(--drop-shadow-2xl);
}

.min-width-\[150px\] {
    min-width: 150px;
}

.badge {
    /*  border-width: 1px;
    border-style: solid;
    border-color: var(--color-primary-100);
    color: var(--color-primary-100);
    background-color: transparent; */
    background-color: var(--color-primary-100);
    text-transform: none;
}

.badge-steps {
    background-color: var(--color-steps);
}

.invalid-form {
    border-color: var(--color-bs-danger);
}

.text-bs-danger {
    color: var(--color-bs-danger);
}

.overflow-visible {
    overflow: visible;
}

.bg-wp-green {
    background-color: var(--color-wp-green);
}

.bg-light-blue {
    background-color: var(--color-light-blue);
}

.border-circle {
    border-radius: 50%;
}

.min-h-\[350px\] {
    min-height: 350px;
}

.h-\[1052px\] {
    min-height: 1052px;
}

.col-span-center {
    grid-column: 6 / span 2;
}

/*sm only*/
@media (min-width: 40rem) {
}

/*Md only*/
@media (min-width: 48rem) {
    .md\:flex-wrap {
        flex-wrap: wrap;
    }

    .col-start-3 {
        grid-column-start: 3;
    }

    .col-start-7 {
        grid-column-start: 7;
    }

    .md\:text-\[14px\] {
        font-size: 14px;
    }

    .md\:text-\[22px\] {
        font-size: 22px;
    }

    .md\:text-\[36px\] {
        font-size: 36px;
    }

    .md\:hidden {
        display: none;
    }

    .md\:top-1\/2 {
        top: 50%;
    }
}

@media (min-width: 64rem) {
    .lg\:bg-transparent {
        background-color: #0000;
    }
}

.border-table {
    border-width: 1px;
    border-style: solid;
    border-color: #D1D5DB; /* Tailwind gray-300 */
}

.col-start-12 {
    grid-column-start: 12;
}


.bg-status-info {
    background-color: var(--color-status-info-bg);
}

.color-status-info {
    color: var(--color-status-info);
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-status-success {
    background-color: var(--color-status-success-bg);
}

.color-status-success {
    color: var(--color-status-success);
}

.bg-status-warning {
    background-color: var(--color-status-warning-bg);
}

.color-status-warning {
    color: var(--color-status-warning);
}

.bg-status-error {
    background-color: var(--color-status-error-bg);
}

.color-status-error {
    color: var(--color-status-error);
}

.bg-status-danger {
    background-color: var(--color-status-danger-bg);
}

.color-status-danger {
    color: var(--color-status-danger);
}

.me-8 {
    margin-inline-end: calc(var(--spacing) * 8);
}

.w-\[60\%\] {
    width: 60%;
}

/*Calendar Height*/
.height-calendar {
    height: 1400px;
}

@media (min-width: 640px) {
    .height-calendar {
        height: 850px;
    }
}

/***
====================================================================
   Segundas imagenes de verticales
====================================================================
***/
.img-detail {
    position: absolute;
    right: -25%;
    bottom: -30%;
}

.img-detail-1 {
    position: absolute;
    right: -60%;
    bottom: -10%;
}

.img-detail-2 {
    position: absolute;
    right: -10%;
    bottom: -30%;
}

.img-detail-3 {
    position: absolute;
    left: -12%;
    bottom: -4%;
}

.img-detail-4 {
    position: absolute;
    right: -40%;
    bottom: -45%;
}

.img-core-1 {
    position: absolute;
    z-index: 15;
    left: 2%;
    bottom: 20%;
}

.img-core-2 {
    position: absolute;
    z-index: 15;
    right: 8%;
    bottom: 0%;
}

.img-core-3 {
    position: absolute;
    z-index: 15;
    right: 3%;
    bottom: 35%;
}

/***
====================================================================
   Effecto ver mas (solo mobile)
====================================================================
***/
@media (max-width: 639px) {
    /* Hidden */
    .smooth-apparition {
        transition: max-height 0.3s ease, opacity 0.3s ease;
        max-height: 0em;
        opacity: 0;
        overflow: hidden;
        position: relative;
    }

    .first-row {
        opacity: 1;
        max-height: 14em;
    }
        /* Hidden translucent */
        .first-row::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3em;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
            pointer-events: none;
        }
    /* Expanded */
    .show {
        transition: max-height 0.3s ease, opacity 0.3s ease;
        opacity: 1;
        max-height: 500px;
    }

        .show::after {
            background: none;
        }

    .max-sm\:order-first {
        order: -9999;
    }

    .max-sm\:order-second {
        order: -9998;
    }

    .max-sm\:order-third {
        order: -9997;
    }
}

/***
====================================================================
   Buttons
====================================================================
***/
.btn {
    text-transform: none;
}

.btn-primary {
    background-color: var(--color-btn-primary) !important;
    color: var(--text-white);
}

@media (hover: hover) {
    .btn-primary {
        border: var(--color-btn-primary);
    }

    .hover\:btn-primary:hover {
        border-color: var(--color-btn-primary);
        background-color: var(--color-btn-primary) !important;
        color: var(--text-white);
        --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #1018280d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

        .hover\:btn-primary:hover:before {
            background-image: url("https://bamsites.blob.core.windows.net/bamcrm/images/common/chevron-right-white.svg");
        }
}

.btn-primary:before {
    background-image: url("https://bamsites.blob.core.windows.net/bamcrm/images/common/chevron-right-white.svg");
}

.btn-secondary {
    background-color: var(--color-white);
    border-color: var(--color-btn-primary);
    color: var(--color-btn-primary);
}

@media (hover: hover) {
    .btn-secondary {
        border-color: var(--color-btn-primary);
        color: var(--color-btn-primary);
    }
}

.btn-secondary:before {
    /*    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;*/
    background-image: url("https://bamsites.blob.core.windows.net/bamcrm/images/common/chevron-right-purple.svg");
}

.btn-link {
    background-color: transparent;
    color: var(--color-btn-primary);
    border: unset;
}

@media (hover: hover) {
    .btn-link {
    }
}

.btn-link:before {
    background-image: url("https://bamsites.blob.core.windows.net/bamcrm/images/common/chevron-right-purple.svg");
}

/*** 
====================================================================
   Support Cards 
====================================================================
***/
.support-card-1 {
    background-color: #FFFFFF;
    border: 8px solid #631FFE;
}

.support-card-2 {
    background-color: #FFFFFF;
    border: 8px solid #FE712E;
}

.support-card-3 {
    background-color: #FFFFFF;
    border: 8px solid #1B46FF;
}

/*** 
====================================================================
   CTA 
====================================================================
***/
.cta-background {
    background-image: url('https://bamsites.blob.core.windows.net/bamcrm/images/shared/cta-background.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/*** 
====================================================================
   Footer 
====================================================================
***/
.footer-link-v2 {
    color: var(--text-white);
}

/*** 
====================================================================
    Articulo de legal, Blogs y Accordions de faq para poder configurar con el cms
====================================================================
***/
/*.checkmarks li span {

}
    .checkmarks li span::before {
        content: "";
        display: inline-block;
        min-width: 18px;
        min-height: 18px;
        border-radius: 50%;
        margin-right: 8px;
        background: url("data:image/svg+xml;utf8,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8.31661 12.7561L13.7491 7.42144C14.0836 7.0959 14.0836 6.5697 13.7491 6.24416C13.4145 5.91861 12.8736 5.91861 12.539 6.24416L7.7116 10.9901L5.46096 8.78807C5.12636 8.46253 4.58554 8.46253 4.25095 8.78807C3.91635 9.11362 3.91635 9.63982 4.25095 9.96536L7.1066 12.7561C7.27347 12.9184 7.49253 13 7.7116 13C7.93067 13 8.14974 12.9184 8.31661 12.7561Z' fill='%23414144'/> </svg >") no-repeat center;
    }*/

.blog-details {
}

    .blog-details h2 {
        margin-bottom: calc(var(--spacing) * 3);
        font-size: var(--text-heading-5);
        line-height: var(--tw-leading, var(--text-heading-5--line-height));
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
    }

        .blog-details h2:not(:first-child) {
            margin-top: calc(var(--spacing) * 7);
        }

@media (min-width: 48rem) {
    .blog-details h2 {
        font-size: var(--text-heading-3);
        line-height: var(--tw-leading, var(--text-heading-3--line-height));
    }
}

@media (min-width: 64rem) {
    .blog-details h2:not(:first-child) {
        margin-top: 70px;
    }
}

.blog-details h3 {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-heading-2);
    line-height: var(--tw-leading, var(--text-heading-2--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
}

    .blog-details h3:not(:first-child) {
        margin-top: calc(var(--spacing) * 7);
    }

@media (min-width: 48rem) {
    .blog-details h3 {
        font-size: var(--text-heading-5);
        line-height: var(--tw-leading, var(--text-heading-5--line-height));
    }
}

@media (min-width: 64rem) {
    .blog-details h3:not(:first-child) {
        margin-top: 70px;
    }
}

.blog-details h4 {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
    margin-bottom: 16px;
    display: flex;
    justify-content: start;
    position: relative;
    align-items: center;
}

    .blog-details h4::before {
        content: "";
        display: inline-block;
        min-width: 18px;
        min-height: 18px;
        border-radius: 50%;
        margin-right: 8px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect width='18' height='18' fill='%23dedfe2'/><path d='M8.31661 12.7561L13.7491 7.42144C14.0836 7.0959 14.0836 6.5697 13.7491 6.24416C13.4145 5.91861 12.8736 5.91861 12.539 6.24416L7.7116 10.9901L5.46096 8.78807C5.12636 8.46253 4.58554 8.46253 4.25095 8.78807C3.91635 9.11362 3.91635 9.63982 4.25095 9.96536L7.1066 12.7561C7.27347 12.9184 7.49253 13 7.7116 13C7.93067 13 8.14974 12.9184 8.31661 12.7561Z' fill='%23414144'/></svg>") no-repeat center;
        background-size: contain;
    }
/*
    .blog-details h4 b {
        padding-left: calc(var(--spacing) * 2);
        padding-right: calc(var(--spacing) * 2);
        white-space: nowrap;
    }*/

.blog-details p {
    padding-bottom: calc(var(--spacing) * 6);
}

.blog-details h5 {
    padding-left: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
    margin-bottom: 16px;
    display: flex;
    justify-content: start;
    position: relative;
    align-items: center;
}

.details-body-legal {
}

    .details-body-legal h3 {
        margin-bottom: calc(var(--spacing) * 3);
        font-size: var(--text-heading-5);
        line-height: var(--tw-leading, var(--text-heading-5--line-height));
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
    }

        .details-body-legal h3:not(:first-child) {
            margin-top: calc(var(--spacing) * 7);
        }

@media (min-width: 48rem) {
    .details-body-legal h3 {
        font-size: var(--text-heading-4);
        line-height: var(--tw-leading, var(--text-heading-4--line-height));
    }
}

@media (min-width: 64rem) {
    .details-body-legal h3:not(:first-child) {
        margin-top: 70px;
    }
}

.details-body-legal h4 {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
    margin-bottom: 16px;
    display: flex;
    justify-content: start;
    position: relative;
    align-items: center;
}

    .details-body-legal h4::before {
        content: "";
        display: inline-block;
        min-width: 18px;
        min-height: 18px;
        border-radius: 50%;
        margin-right: 8px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect width='18' height='18' fill='%23dedfe2'/><path d='M8.31661 12.7561L13.7491 7.42144C14.0836 7.0959 14.0836 6.5697 13.7491 6.24416C13.4145 5.91861 12.8736 5.91861 12.539 6.24416L7.7116 10.9901L5.46096 8.78807C5.12636 8.46253 4.58554 8.46253 4.25095 8.78807C3.91635 9.11362 3.91635 9.63982 4.25095 9.96536L7.1066 12.7561C7.27347 12.9184 7.49253 13 7.7116 13C7.93067 13 8.14974 12.9184 8.31661 12.7561Z' fill='%23414144'/></svg>") no-repeat center;
        background-size: contain;
    }

    .details-body-legal h4:where(.dark, .dark *):before {
        content: var(--tw-content);
        background-color: var(--color-accent);
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect width='18' height='18' fill='%232f333b'/><path d='M8.31661 12.7561L13.7491 7.42144C14.0836 7.0959 14.0836 6.5697 13.7491 6.24416C13.4145 5.91861 12.8736 5.91861 12.539 6.24416L7.7116 10.9901L5.46096 8.78807C5.12636 8.46253 4.58554 8.46253 4.25095 8.78807C3.91635 9.11362 3.91635 9.63982 4.25095 9.96536L7.1066 12.7561C7.27347 12.9184 7.49253 13 7.7116 13C7.93067 13 8.14974 12.9184 8.31661 12.7561Z' fill='%23d3d4d6'/></svg>") no-repeat center;
        color: color-mix(in oklab, var(--color-accent) 60%, transparent);
    }

    .details-body-legal h4:where(.dark, .dark *) {
        color: color-mix(in oklab, var(--color-accent) 60%, transparent);
    }

        .details-body-legal h4:where(.dark, .dark *):before {
            content: var(--tw-content);
            background-color: var(--color-accent);
        }

.details-body-legal p {
    padding-bottom: calc(var(--spacing) * 6);
}

.details-body-legal h5 {
    padding-left: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
    margin-bottom: 16px;
    display: flex;
    justify-content: start;
    position: relative;
    align-items: center;
}

.accordion-content {
}

    .accordion-content h4 {
        margin-bottom: calc(var(--spacing) * 2);
        font-size: var(--text-tagline-1);
        line-height: var(--tw-leading, var(--text-tagline-1--line-height));
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
        margin-bottom: 16px;
        display: flex;
        justify-content: start;
        position: relative;
        align-items: center;
    }

        .accordion-content h4::before {
            content: "";
            display: inline-block;
            min-width: 18px;
            min-height: 18px;
            border-radius: 50%;
            margin-right: 8px;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect width='18' height='18' fill='%23dedfe2'/><path d='M8.31661 12.7561L13.7491 7.42144C14.0836 7.0959 14.0836 6.5697 13.7491 6.24416C13.4145 5.91861 12.8736 5.91861 12.539 6.24416L7.7116 10.9901L5.46096 8.78807C5.12636 8.46253 4.58554 8.46253 4.25095 8.78807C3.91635 9.11362 3.91635 9.63982 4.25095 9.96536L7.1066 12.7561C7.27347 12.9184 7.49253 13 7.7116 13C7.93067 13 8.14974 12.9184 8.31661 12.7561Z' fill='%23414144'/></svg>") no-repeat center;
            background-size: contain;
        }

    .accordion-content p {
        padding-bottom: calc(var(--spacing) * 6);
    }
