/* =========================================================
   PLANES — lenguaje visual compartido (2026-09-10)

   Una sola definición para la sección de planes de la landing
   (resources/views/landing.blade.php) y la pantalla "Mi plan"
   (resources/views/portal/inicio.blade.php). mextli.css la importa;
   la landing la enlaza directo porque no carga mextli.css.

   Colores: primero los de la landing (vienen de la configuración de
   diseño como --primario/--acento/--texto-suave), si no existen, los
   tokens de la app, y al final el valor literal de la marca.
   ========================================================= */

.plan-glifo {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: .5rem;
}

.plan-precio {
    margin: .8rem 0 .2rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--primario, var(--mextli-yohualli, #08213D));
    font-variant-numeric: tabular-nums;
}

.plan-precio-lista {
    margin-right: .25rem;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--texto-suave, var(--mextli-texto-secundario, #687385));
}

.plan-precio-periodo {
    font-size: .85rem;
    font-weight: 400;
    color: var(--texto-suave, var(--mextli-texto-secundario, #687385));
}

.plan-precio-lanzamiento {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--acento, var(--mextli-citlalli, #BB8640));
}

.plan-lista {
    margin: .9rem 0 1rem;
    padding: 0;
    list-style: none;
}

.plan-lista li {
    position: relative;
    padding: .22rem 0 .22rem 1.35rem;
    font-size: .9rem;
}

.plan-lista li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    font-weight: 800;
    color: var(--acento, var(--mextli-citlalli, #BB8640));
}

.plan-lista li.no {
    color: var(--texto-suave, var(--mextli-texto-secundario, #687385));
}

.plan-lista li.no::before {
    content: '\2014';
    color: var(--texto-suave, var(--mextli-texto-secundario, #687385));
}