.planes-page .planes-currency-toggle .btn {
    font-weight: 600;
}

.planes-included {
    overflow-x: hidden;
}

.planes-included-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-muted, #6c757d);
}

.planes-included-item i {
    color: var(--accent-color, #88B9D7);
    opacity: 0.7;
    font-size: 0.85rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.planes-included-item span {
    min-width: 0;
    overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
    /* No achicar más el texto que en desktop: en pantallas chicas
       las frases son más largas relativas al ancho y deben seguir
       siendo legibles (min. ~14px). */
    .planes-included-item {
        font-size: 0.875rem;
    }

    .planes-included-item i {
        font-size: 0.875rem;
    }
}

.planes-card {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    overflow-wrap: break-word;
}

.planes-card:hover {
    transform: translateY(-2px);
}

.planes-card-featured {
    border: 2px solid var(--accent-color, #88B9D7);
}

.planes-featured-ribbon {
    background: var(--primary-color, #34678a);
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35rem 0;
}

.planes-badge {
    background-color: var(--accent-color, #88B9D7);
    color: #0b2436;
    font-weight: 600;
}

.planes-price {
    line-height: 1.3;
}

.planes-price-amount {
    font-family: var(--font-brand, 'Saira', sans-serif);
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color, #34678a);
}

.planes-price-strike {
    color: var(--text-muted, #6c757d);
    text-decoration: line-through;
    font-size: 0.95rem;
}

.planes-features li {
    padding: 0.25rem 0;
}

body.dark-mode .planes-card {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .planes-price-amount {
    color: var(--accent-color, #88B9D7);
}

body.dark-mode .planes-badge {
    color: #0b2436;
}

.planes-details-body {
    overflow-wrap: break-word;
}

.planes-details-body :first-child {
    margin-top: 0;
}

.planes-details-body :last-child {
    margin-bottom: 0;
}

.planes-details-body h1,
.planes-details-body h2,
.planes-details-body h3,
.planes-details-body h4,
.planes-details-body h5,
.planes-details-body h6 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.planes-details-body ul,
.planes-details-body ol {
    padding-left: 1.25rem;
}

.planes-details-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
}

.planes-details-body pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.planes-details-body img {
    max-width: 100%;
    height: auto;
}

/* El nav superior no es "fixed" pero tiene z-index muy alto (10000, por
   encima del z-index por defecto de un modal de Bootstrap), así que cuando
   el modal se abre con el usuario arriba de todo de la página, el margen
   superior por defecto de Bootstrap (1.75rem) no alcanza para que el header
   del modal quede debajo del nav en vez de tapado por él. */
.planes-page .modal .modal-dialog {
    margin-top: 6.5rem;
}

/* .modal-dialog-scrollable fija su altura en base al margen vertical total de
   Bootstrap (1.75rem arriba + 1.75rem abajo = 3.5rem); como acá el margen
   superior es mayor, hay que recalcularla para que el modal no se pase del
   viewport por abajo en pantallas bajas. */
.planes-page .modal .modal-dialog.modal-dialog-scrollable {
    height: calc(100% - 8.25rem);
}

@media (max-width: 767.98px) {
    .planes-price-amount {
        font-size: 1.6rem;
    }

    /* Scroll horizontal de tarjetas en mobile en vez de apilarlas */
    .planes-cards-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        scroll-padding-left: 0.25rem;
    }

    .planes-cards-row > .col {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: start;
    }

    .planes-cards-row::-webkit-scrollbar {
        height: 6px;
    }

    .planes-cards-row::-webkit-scrollbar-thumb {
        background: var(--accent-color, #88B9D7);
        border-radius: 3px;
    }

    /* Área táctil cómoda para "+ Detalles" (min. ~44px de alto) */
    .planes-details-btn {
        min-height: 44px;
        padding: 0.5rem 0.9rem;
        font-size: 0.9rem;
    }

    /* El modal de detalles no debe desbordar ni dejar poco margen en pantallas chicas.
       El nav colapsado en mobile es más bajo que en desktop, pero igual necesita
       margen superior de sobra para no quedar tapado (ver regla base más arriba). */
    .planes-page .modal .modal-dialog {
        margin-top: 4.5rem;
        margin-right: 0.75rem;
        margin-bottom: 0.75rem;
        margin-left: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    .planes-page .modal .modal-dialog.modal-dialog-scrollable {
        height: calc(100% - 5.25rem);
    }

    .planes-details-body {
        font-size: 0.95rem;
    }

    .planes-details-body table,
    .planes-details-body th,
    .planes-details-body td {
        font-size: 0.85rem;
    }
}