:root {
    /* COLORES PRINCIPALES */
    --primary: #117d92;
    --primary-light: #199eb8;
    --primary-soft: rgba(17, 125, 146, 0.1);

    /* NEUTROS */
    --bg: #f8fafc;
    --card: #ffffff;
    --text: #1e293b;
    --text-soft: #64748b;

    /* BORDES */
    --border: rgba(15, 23, 42, 0.08);

    /* SOMBRAS */
    --shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    /* RADIOS */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;

    /* TRANSICIONES */
    --transition: all 0.25s ease;
}


/* CARDS */
.ds-card {
    background: var(--card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

    .ds-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

/* BOTONES */
.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}

/* Primario */
.ds-btn-primary {
    background: var(--primary);
    color: white;
}

    .ds-btn-primary:hover {
        background: var(--primary-light);
    }

/* Sutil (como tu botón de volver) */
.ds-btn-soft {
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border);
    color: var(--text-soft);
}

    .ds-btn-soft:hover {
        background: rgba(255,255,255,0.85);
        color: var(--primary);
    }

/* CHIPS */
.ds-chip {
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}

/* ICONOS */
.ds-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-icon {
    font-size: 1.2rem;
    color: var(--primary);
}

/* HERO */
.ds-hero {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
}

/* TITULOS */
.ds-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.ds-subtitle {
    color: var(--text-soft);
}