/* --- ESTILO SAAS / UNTITLED UI --- */
.pricing-card {
    background: #fff;
    border: 1px solid #d1d3d7;
    border-radius: 12px;
    padding: 32px 24px;
    height: 100%;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    font-family: 'Host Grotesk', sans-serif;
}

/* Versión Destacada (Dark Mode para el ID 8) */
.pricing-card.featured {
    background: #101828; /* Gris Oxford muy oscuro */
    border-color: #101828;
    color: #ffffff;
}

/* Títulos y Etiquetas */
.plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: #68aa00; /* Tu verde original */
}
.pricing-card.featured .plan-name { color: #d9ff99; }

.popular-badge {
    float: right;
    background: #a2e13f;
    color: #111905;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid #b2ee54;
}

/* Precios */
.price-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #101828;
}
.pricing-card.featured .price-value { color: #ffffff; }

.price-currency {
    color: #667085;
    font-weight: 500;
}

.price-period {
    color: #667085;
    font-weight: 200;
}

.pricing-card.featured .price-currency { color: #98a2b3; }

/* Pastilla de Descuento (Limpia) */
.badge-off {
    background: #a2e13f;
    color: #111905;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.price-old {
    text-decoration: line-through;
    color: #667085;
    font-weight: 400;
}

/* Botón Estilizado */
.btn-pricing {
    background: #7ac800;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
}
.btn-pricing:hover {
    background-color: #5b9500; /* Un poco más oscuro */
    color: #ffffff; /* Un tono más oscuro del texto */
}

.btn-pricing:disabled {
    background-color: #999999 !important;
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 0.8;
    border: none;
}

/* Textos informativos */
.pricing-desc {
    font-size: 0.7rem;
    color: #667085;
}

.microcopy {
    font-size: 0.8rem;
    color: #667085;
}

.pricing-card.featured .pricing-desc, 
.pricing-card.featured .microcopy { color: #98a2b3; }

.features-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #101828;
}

.pricing-card .features-label {
    letter-spacing: 0.5px; /* Reducimos el espacio entre letras */
    white-space: nowrap; /* Fuerza a que se mantenga en una línea si el contenedor lo permite */
}

.pricing-card.featured .features-label { color: #fff; }

.feature-text { font-size: 0.95rem; color: #475467; }
.pricing-card.featured .feature-text { color: #eaecf0; }

/* Color para la card normal (blanca) */
.info-icon { 
    cursor: help; 
    font-size: 0.85rem; 
    color: #98a2b3; /* El gris suave que querías */
    transition: color 0.2s;
}

.no-break {
    white-space: nowrap;
}

/* Color para la card DESTACADA (oscura) */
.pricing-card.featured .info-icon { 
    color: #667085; /* Un gris que resalte un poco más sobre el fondo oscuro */
}

/* Efecto hover para ambas */
.info-icon:hover { 
    color: #7ac800 !important; 
}

/* 1. Alinea los botones (Ya lo tenías, lo mantenemos) */
.price-box-wrapper {
    height: 95px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 2. Alinea las líneas divisorias */
/* Forzamos que el microcopy ocupe siempre lo mismo (2 o 3 renglones) */
.microcopy {
    font-size: 0.8rem;
    color: #667085;
    /* 1. Aumentamos un poco el alto total para dar más espacio */
    min-height: 5.5rem; 
    display: flex;
    align-items: center; 
    justify-content: center;
    /* 2. El margen inferior es el que separa el texto de la línea */
    margin-bottom: 1.5rem !important; 
    margin-top: 1rem;
}

.pricing-features {
    /* 3. Aseguramos que la línea tenga su propio espacio interno */
    padding-top: 1.5rem !important;
    margin-top: 0 !important;
}

/* Cuando el texto no tiene check, le quitamos cualquier padding sobrante */
.feature-text.ps-0 {
    padding-left: 0 !important;
    color: #101828; /* Un poco más oscuro para que resalte */
    display: block;
    width: 100%;
}

.pricing-card.featured .feature-text.ps-0 {
    color: #ffffff;
}





/* --- DISEÑO DE 5 COLUMNAS PARA ADD-ONS (Escritorio) --- */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%; /* 100% dividido 5 productos */
    }
}

/* --- CARD DE ADICONALES --- */
.addon-card {
    background: #ffffff;
    border: 1px solid #d1d3d7;
    border-radius: 12px;
    padding: 20px 8px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Título e Info Icon */
.addon-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #68aa00;
    letter-spacing: -0.2px;
}

.info-icon-sm {
    font-size: 0.75rem;
    color: #98a2b3;
    cursor: help;
    transition: color 0.2s;
}

.info-icon-sm:hover {
    color: #7ac800;
}

/* Botón de Agregar (Estilo Minimalista) */
.btn-addon {
    background: #7ac800;
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-addon:hover {
    background: #5b9500 !important;
    color: #ffffff !important;
}

/* Botón especial para el de WhatsApp (si lo hubiera en adicionales) */
.btn-wa {
    background: #25D366 !important;
    color: white !important;
}

/* Ajustes de precios antiguos y badges */
.price-old-sm {
    text-decoration: line-through;
    color: #667085;
    font-size: 0.85rem;
}

.badge-off-sm {
    background: #a2e13f;
    color: #111905;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Descripción pequeña */
.addon-desc {
    font-size: 0.8rem;
    color: #667085;
    line-height: 1.4;
    margin-bottom: 15px;
}