/* ============================================================
   CRAZY SOFT - Página Productos: Modalidades (tema claro)
   ============================================================ */

.mod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 12px;
}

.mod-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.mod-card.destacado { border: 2px solid var(--accent); position: relative; }
.mod-card.destacado .ribbon {
    position: absolute;
    top: 20px;
    right: -38px;
    transform: rotate(45deg);
    background: var(--accent);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 44px;
}

.mod-head { padding: 30px 32px 22px; border-bottom: 1px solid var(--border); }
.mod-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.mod-tag.estandar { background: var(--primary-soft); color: var(--primary-dark); }
.mod-tag.personalizado { background: var(--accent-light); color: var(--accent-dark); }
.mod-head h3 { font-size: 1.5rem; margin-bottom: 10px; }
.mod-head p { color: var(--gray); font-size: 0.98rem; }

.mod-body { padding: 26px 32px; flex: 1; }
.mod-body h4 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 14px;
}
.mod-body ul { list-style: none; display: grid; gap: 12px; }
.mod-body li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; font-weight: 600; }
.mod-body li span { font-weight: 400; color: var(--gray); }
.mod-body li svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 2px;
}
.mod-body li.personalizado svg { color: var(--accent); }

.mod-foot { padding: 24px 32px; background: var(--light); border-top: 1px solid var(--border); }
.mod-foot .btn { width: 100%; }