:root {
    /* Paleta Identitaria diCard */
    --dicard-blue: #2D3E74;
    /* El tono profundo del texto */
    --dicard-magenta: #E1308B;
    /* El rosa vibrante del inicio */
    --dicard-purple: #8E3E96;
    /* El tono medio de transición */
    --dicard-light-blue: #A3BCE1;
    /* El tono suave del final del trazo */

    /* Gradiente Maestro (Siguiendo la curva del logo) */
    --dicard-gradient: linear-gradient(45deg, var(--dicard-magenta), var(--dicard-purple), var(--dicard-blue));

    /* Sobreescritura de Bootstrap para vincular tu marca */
    --bs-primary: var(--dicard-blue);
    --bs-secondary: var(--dicard-magenta);
    --bs-link-color: var(--dicard-purple);
}


/* Ejemplo para tus botones */
.default-btn {
    background-color: var(--bs-primary);
    color: white;
    border: none;
    transition: 0.3s;
}

.default-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.default-btn:before {
    background: linear-gradient(90deg, var(--bs-pink) 0%, var(--bs-purple) 100%);
    transition: all 0.5s ease;

}

/* =========================================
   1. ANIMACIONES GLOBALES
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.animate {
    visibility: hidden;
    opacity: 0;
    will-change: transform, opacity;
}

/* =========================================
   2. NAVEGACIÓN Y ESTRUCTURA BASE
   ========================================= */
body {
    padding-top: 0;
    transition: padding-top 0.4s ease;
}

#mainNavbar {
    transition: all 0.4s ease;
    padding: 20px 0;
    position: relative;
    width: 100%;
    z-index: 1000;
}

#mainNavbar.is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    animation: slideDown 0.5s ease;
}

/* =========================================
   3. COMPONENTES (PRICING E INFO)
   ========================================= */
.single-pricing-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single-pricing-box:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.info>div {
    flex: 1;
    padding: 10px;
}

.info h3 {
    margin-bottom: 5px;
    font-size: 2rem;
    font-weight: bold;
}

/* =========================================
   4. SECCIÓN DE FAQ (PREGUNTAS FRECUENTES)
   ========================================= */
.faq-area {
    background-color: #f8f8ff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.faq-area .section-title p {
    font-size: 15px;
    max-width: 600px;
    margin-top: 21px;
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion.accordion {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.faq-accordion.accordion .accordion-item {
    border-radius: 5px;
    margin-bottom: 15px;
    color: var(--blackColor);
    background-color: var(--whiteColor);
    --bs-accordion-btn-icon-width: 1.1rem;
}

.faq-accordion.accordion .accordion-item .accordion-button {
    color: var(--blackColor);
    padding: 18px 25px;
    font-size: 17px;
    padding-right: 40px !important;
    position: relative;
    white-space: normal;
    word-wrap: break-word;
}

.faq-accordion.accordion .accordion-item .accordion-button:after {
    top: 50%;
    right: 25px;
    position: absolute;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.faq-accordion.accordion .accordion-item .accordion-button.open:after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion.accordion .accordion-item .accordion-collapse {
    display: none;
}

.faq-accordion.accordion .accordion-item .accordion-collapse.open {
    display: block;
}

.faq-accordion.accordion .accordion-item .accordion-collapse .accordion-body {
    margin-top: -6px;
    padding: 0 25px 20px;
}

.faq-accordion.accordion .accordion-item .accordion-collapse .accordion-body p {
    font-size: 15px;
}

.faq-accordion.accordion .accordion-item .accordion-collapse .accordion-body p strong {
    font-weight: 700;
    color: var(--blackColor);
}

.faq-accordion.accordion .accordion-item .accordion-collapse .accordion-body p a {
    color: var(--primaryColor);
}

.faq-accordion.accordion .accordion-item:last-child {
    margin-bottom: 0;
}

/* =========================================
   5. RESPONSIVE (MEDIA QUERIES)
   ========================================= */

/* --- Móvil (Hasta 767px) --- */
@media only screen and (max-width: 767px) {
    .faq-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .faq-area .section-title p {
        font-size: 14px;
        max-width: 100%;
        margin-top: 13px;
    }

    .faq-accordion.accordion .accordion-item .accordion-button {
        padding: 12px 15px;
        font-size: 15px;
    }

    .faq-accordion.accordion .accordion-item .accordion-button:after {
        right: 15px;
    }

    .faq-accordion.accordion .accordion-item .accordion-collapse .accordion-body {
        margin-top: 0;
        padding: 0 15px 15px;
    }
}

/* --- Tablet y Móvil (Hasta 991px) --- */
@media (max-width: 991px) {

    /* Navbar Flotante corregido */
    .navbar {
        position: relative;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--whiteColor, #ffffff);
        z-index: 1050;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        padding: 15px;
        border-radius: 0 0 10px 10px;
    }

    .navbar>.default-btn {
        display: none;
    }

    /* FAQ Tablet */
    .faq-accordion.accordion {
        max-width: 100%;
    }

    .faq-accordion.accordion .accordion-item .accordion-button {
        padding: 15px 20px;
        font-size: 16px;
    }
}

/* --- Desktop Pequeño (992px a 1199px) --- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .faq-accordion.accordion {
        max-width: 800px;
    }
}



.single-pricing-box {
    transition: all 0.4s ease-in-out;
    border: 2px solid #f4f4f4 !important;
}

.card-business:hover {
    border-color: #2D3E74 !important;
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(45, 62, 116, 0.1) !important;
}

.card-care:hover {
    border-color: #E1308B !important;
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(225, 48, 139, 0.1) !important;
}

.card-vet:hover {
    border-color: #8E3E96 !important;
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(142, 62, 150, 0.1) !important;
}



/* Efecto al pasar el mouse para que brillen sobre el negro */
.single-features-box:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.single-features-box i {
    transition: transform 0.3s ease;
}

.single-features-box:hover i {
    transform: scale(1.1);
}



.footer-area:before {
    inset: 0;
    z-index: -1;
    content: "";
    /* Bajamos un poco la opacidad para que el negro del fondo (si hay) ayude al contraste */
    opacity: .98;
    position: absolute;
    /* Usamos el azul profundo diCard hacia el púrpura oscuro */
    background: linear-gradient(135deg, var(--dicard-blue) 0%, #1a254d 100%);
    /* Opcional: una sutil textura o borde superior para separar */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/*PARA EL ULTIMO */
/*
.col-xl-4:nth-child(3) .single-pricing-box .default-btn {
    box-shadow: 0 10px 15px rgba(142, 62, 150, 0.15);
    background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple));
    border: none;
}

.col-xl-4:nth-child(3) .single-pricing-box .default-btn:before {
    background: linear-gradient(91.43deg, var(--bs-purple) 1.22%, var(--bs-primary) 98.84%);
}
    */



.single-pricing-box .popular {
    left: 35px;
    top: -12px;
    font-size: 13px;
    position: absolute;
    border-radius: 30px;
    padding: 4px 13px 2px;
    color: var(--bs-white);
    /* Usamos el degradado magenta-púrpura de diCard */
    background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple));
    font-weight: 600;
}

.single-pricing-box.custom-license h3 {
    margin-bottom: 15px;
}

.single-pricing-box.most-popular {
    z-index: 1;
    /* Añadimos un borde sutil para que destaque sobre las otras cajas */
    border: 2px solid var(--bs-pink);
    border-radius: var(--bs-border-radius-lg);
}

.single-pricing-box.most-popular:before {
    inset: 0;
    z-index: -1;
    content: "";
    position: absolute;
    border-radius: inherit;
    /* Un fondo muy sutil para que la tarjeta "brille" */
    background: var(--bs-primary-bg-subtle);
    opacity: 0.3;
}