/* =========================================================
   KIVOR · Componentes UI (botones, cards, tabs, forms, etc.)
   Estilo sobrio, elegante y consistente con tokens
   ========================================================= */

/* ---------------- Botones ---------------- */
.btn {
    --btn-bg: var(--surface-1);
    --btn-fg: var(--text-800, var(--text-900));
    --btn-bd: var(--surface-border);
    --btn-shadow: var(--shadow-sm);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .68rem .95rem;
    /* -5% densidad */
    border-radius: var(--radius-md);
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    box-shadow: var(--btn-shadow);
    transition:
        transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        background var(--speed) var(--ease),
        border-color var(--speed) var(--ease),
        color var(--speed) var(--ease),
        opacity var(--speed) var(--ease);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Tamaños */
.btn--sm {
    padding: .5rem .78rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.btn--lg {
    padding: .85rem 1.15rem;
    border-radius: var(--radius-lg);
    font-weight: 800;
}

/* CTA primario */
.btn--primary {
    --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--brand-600) 80%, white), var(--brand-600));
    --btn-fg: #fff;
    --btn-bd: transparent;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.btn--primary:hover {
    --btn-bg: linear-gradient(180deg, var(--brand-500), var(--brand-650, var(--brand-600)));
}

/* Secundario */
.btn--secondary {
    --btn-bg: color-mix(in oklab, var(--brand-600) 10%, var(--surface-1));
    --btn-fg: color-mix(in oklab, var(--brand-600) 24%, var(--text-900));
    --btn-bd: color-mix(in oklab, var(--brand-600) 26%, var(--surface-border));
}

.btn--secondary:hover {
    --btn-bg: color-mix(in oklab, var(--brand-600) 16%, var(--surface-1));
}

/* Ghost legible en ambos temas */
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: color-mix(in oklab, var(--text-900) 86%, white);
    --btn-bd: color-mix(in oklab, var(--brand-600) 30%, var(--surface-border));
    box-shadow: none;
}

:root[data-theme="dark"] .btn--ghost {
    --btn-fg: #EAF1FA;
    --btn-bd: rgba(255, 255, 255, .28);
}

.btn--ghost:hover {
    --btn-bg: color-mix(in oklab, var(--brand-600) 12%, var(--surface-1));
}

/* Suave / chips grandes */
.btn--soft {
    --btn-bg: color-mix(in oklab, var(--brand-600) 12%, var(--surface-1));
    --btn-fg: color-mix(in oklab, var(--brand-600) 22%, var(--text-900));
    --btn-bd: color-mix(in oklab, var(--brand-600) 24%, var(--surface-border));
}

/* Énfasis de estado */
.btn--ok {
    --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--ok-500) 86%, white), var(--ok-500));
    --btn-fg: #fff;
    --btn-bd: transparent;
}

.btn--warn {
    --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--warn-500) 86%, white), var(--warn-500));
    --btn-fg: #111;
    --btn-bd: transparent;
}

.btn--danger {
    --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--err-500) 86%, white), var(--err-500));
    --btn-fg: #fff;
    --btn-bd: transparent;
}

/* Botón icónico */
.btn--icon {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    aspect-ratio: 1;
}

/* Estado loading */
.btn.is-loading {
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    inline-size: 1em;
    block-size: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin 800ms linear infinite;
    margin-left: .25rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Agrupador de botones */
.btn-group {
    display: inline-flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ---------------- Badges ---------------- */
.badge {
    --bdg-bg: var(--brand-600);
    --bdg-fg: #fff;
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.65rem;
    height: 1.65rem;
    padding-inline: .5rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
    line-height: 1;
    color: var(--bdg-fg);
    background: var(--bdg-bg);
    box-shadow: var(--shadow-sm);
}

.badge--ok {
    --bdg-bg: var(--ok-500);
}

.badge--warn {
    --bdg-bg: var(--warn-500);
}

.badge--err {
    --bdg-bg: var(--err-500);
}

.badge--soft {
    --bdg-bg: color-mix(in oklab, var(--brand-600) 14%, var(--surface-1));
    --bdg-fg: color-mix(in oklab, var(--brand-600) 24%, var(--text-900));
    border: 1px solid color-mix(in oklab, var(--brand-600) 26%, var(--surface-border));
    box-shadow: none;
}

/* ---------------- Cards ---------------- */
.card {
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    color: var(--text-900);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    overflow: clip;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.card--hover-raise:hover {
    transform: translateY(-5px);
}

.card__media {
    position: relative;
    background: #0e1c29;
}

.card__media>img,
.card>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
    /* mantiene proporción elegante */
}

.card__body {
    padding: 1rem;
    display: grid;
    gap: .45rem;
}

.card__title {
    font-weight: 800;
    color: var(--text-900);
}

.card__text {
    color: var(--text-700);
}

.card--horizontal {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width:780px) {
    .card--horizontal {
        grid-template-columns: .9fr 1fr;
    }

    .card--horizontal>img {
        aspect-ratio: 4 / 3;
        min-height: 200px;
    }
}

/* Tarjeta invertida */
.card--invert {
    background: var(--surface-2);
    color: var(--text-900);
    border-color: color-mix(in oklab, var(--surface-border) 70%, white);
}

/* ---------------- Project card ---------------- */
.project-card {
    border-radius: var(--radius-lg);
    overflow: clip;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    color: var(--text-900);
}

.project-card__media {
    aspect-ratio: 16/9;
    position: relative;
    background: #0e1c29;
}

.project-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35));
    pointer-events: none;
}

.project-card__body {
    padding: .9rem;
    display: grid;
    gap: .35rem;
}

.project-card__title {
    font-weight: 800;
}

.project-card__meta {
    color: var(--text-500);
    font-size: .95rem;
}

/* ---------------- Skeleton ---------------- */
.skeleton {
    --sh: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 60%);
    background: linear-gradient(0deg, #d9e2ef, #d9e2ef) padding-box, var(--sh) border-box;
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
    width: 100%;
    height: 100%;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* ---------------- Tabs / Chips ---------------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.tabs__btn {
    padding: .45rem .85rem;
    border-radius: .9rem;
    background: color-mix(in oklab, var(--brand-600) 10%, var(--surface-1));
    color: var(--text-700);
    border: 1px solid color-mix(in oklab, var(--brand-600) 18%, var(--surface-border));
    cursor: pointer;
    font-weight: 800;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.tabs__btn:hover {
    background: color-mix(in oklab, var(--brand-600) 18%, var(--surface-1));
    transform: translateY(-1px);
}

.tabs__btn.is-active {
    background: color-mix(in oklab, var(--brand-600) 26%, var(--surface-1));
    color: color-mix(in oklab, white 88%, var(--brand-600));
    border-color: color-mix(in oklab, var(--brand-600) 35%, var(--surface-border));
}

/* ---------------- Formularios ---------------- */
.form {
    display: grid;
    gap: .9rem;
}

.form__group {
    display: grid;
    gap: .32rem;
}

.input,
.select__input,
.textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: .68rem .9rem;
    border-radius: .75rem;
    border: 1px solid var(--surface-border);
    background: var(--surface-1);
    color: var(--text-900);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
    color: color-mix(in oklab, var(--text-500) 80%, white);
}

.input:focus,
.select__input:focus,
.textarea:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: color-mix(in oklab, var(--brand-600) 50%, white);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-600) 20%, white);
    outline: none;
}

/* Estados de validación */
.is-invalid {
    border-color: color-mix(in oklab, var(--err-500) 70%, white) !important;
}

.is-valid {
    border-color: color-mix(in oklab, var(--ok-500) 70%, white) !important;
}

.form__error {
    color: var(--err-500);
    font-size: .9rem;
    display: none;
}

.form__error.is-visible {
    display: block;
}

.form__check {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* accent-color moderno */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-600);
}

.form__actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

.form__note {
    font-size: .9rem;
    color: var(--text-500);
}

/* Inputs con icono */
.input--with-icon,
.select--with-icon {
    position: relative;
}

.input--with-icon svg,
.select--with-icon svg {
    position: absolute;
    inset-inline-end: .75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .7;
    font-size: 1rem;
}

/* ---------------- Acordeón (con <details>) ---------------- */
.accordion__item {
    border: 1px solid var(--surface-border);
    border-radius: .9rem;
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
    color: var(--text-900);
    overflow: hidden;
}

.accordion__item+.accordion__item {
    margin-top: .65rem;
}

.accordion__item>summary {
    list-style: none;
    cursor: pointer;
    padding: .9rem 1rem;
    font-weight: 800;
    position: relative;
}

.accordion__item>summary::-webkit-details-marker {
    display: none;
}

.accordion__item>summary::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    inline-size: .6rem;
    block-size: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .7;
    transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.accordion__item[open]>summary {
    color: var(--brand-600);
}

.accordion__item[open]>summary::after {
    transform: translateY(-50%) rotate(45deg);
    opacity: 1;
}

.accordion__panel {
    padding: 0 1rem .9rem;
    color: var(--text-700);
}

/* ---------------- Divisor ---------------- */
.divider {
    border: 0;
    margin: .75rem 0;
    border-top: 1px solid var(--surface-border);
}

/* ---------------- Listas ---------------- */
.list {
    padding-left: 1.1rem;
}

.list--checks {
    list-style: none;
    padding: 0;
}

.list--checks li {
    padding-left: 1.4rem;
    position: relative;
}

.list--checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ok-500);
    font-weight: 800;
}

.list--steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
}

.list--steps li {
    counter-increment: step;
    padding-left: 1.5rem;
    position: relative;
}

.list--steps li::before {
    content: counter(step) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-600);
    font-weight: 800;
}

/* ---------------- Breadcrumbs ---------------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    color: var(--text-500);
    font-size: var(--step--1);
}

.breadcrumbs a {
    color: var(--text-700);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--brand-600);
    text-decoration: underline;
}

.breadcrumbs span[aria-current="page"] {
    color: var(--text-900);
    font-weight: 700;
}

/* ---------------- Paginador simple ---------------- */
.pager {
    display: flex;
    align-items: center;
    gap: .7rem;
    justify-content: center;
}

.pager__info {
    color: var(--text-500);
    font-size: .95rem;
}

/* ---------------- Switch de tema (sol/luna) ---------------- */
.theme-switch {
    --w: 56px;
    --h: 28px;
    position: relative;
}

.theme-switch__input {
    position: absolute;
    inset: 0;
    width: var(--w);
    height: var(--h);
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.theme-switch__label {
    width: var(--w);
    height: var(--h);
    border-radius: 999px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 6px;
    padding: 0 8px;
    background: linear-gradient(180deg, var(--bg-200), var(--bg-100));
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-sm) inset;
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.theme-switch__label::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: calc(var(--h) - 6px);
    height: calc(var(--h) - 6px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform var(--speed) var(--ease), background var(--speed) var(--ease);
}

.theme-switch__label .sun {
    color: #FFD367;
}

.theme-switch__label .moon {
    color: #E8EEFF;
}

.theme-switch__input:checked+.theme-switch__label {
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
    border-color: color-mix(in oklab, var(--brand-600) 30%, white);
}

.theme-switch__input:checked+.theme-switch__label::after {
    transform: translateX(calc(var(--w) - var(--h)));
}

.topbar .theme-switch {
    margin-left: .4rem;
}

/* ---------------- Navegación ---------------- */
.nav__menu a {
    display: inline-block;
    padding: .4rem .3rem;
    color: var(--text-700);
    font-weight: 600;
    border-radius: .5rem;
    transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.nav__menu a:hover {
    color: var(--text-100);
    background: color-mix(in oklab, var(--brand-600) 16%, transparent);
}

.nav__menu a.is-active {
    color: color-mix(in oklab, white 92%, var(--brand-600));
    background: color-mix(in oklab, var(--brand-600) 26%, transparent);
}

/* Evita deformación del logo */
.brand__logo {
    inline-size: auto;
    max-height: none;
    object-fit: contain;
}

/* ---------------- Utilidades extra ---------------- */
.kivor-shadow-raise:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.kivor-border-gradient {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
        linear-gradient(180deg, color-mix(in oklab, var(--brand-600) 20%, transparent), color-mix(in oklab, var(--brand-600) 0%, transparent)) border-box;
    border-radius: var(--radius-lg);
}

/* =========================================================
   Industries – Tarjeta vertical (imagen arriba, layout limpio)
   ========================================================= */
.ind-card {
    --media-h: clamp(160px, 22vw, 220px);
    display: grid;
    grid-template-rows: var(--media-h) 1fr;
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    overflow: clip;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.ind-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.ind-card__media {
    position: relative;
    overflow: hidden;
    background: #0e1c29;
}

.ind-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.0);
    transition: transform .7s var(--ease), filter .7s var(--ease);
    filter: saturate(.95) contrast(1.03);
}

.ind-card:hover .ind-card__media img {
    transform: scale(1.04);
}

.ind-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .9rem 1rem 1rem;
    color: var(--text-900);
}

.ind-card__title {
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    hyphens: none;
    word-break: normal;
    overflow-wrap: anywhere;
}

.ind-card__lead {
    color: var(--text-700);
}

.ind-card .list--checks {
    margin-top: .2rem;
}

.ind-card .list--checks li+li {
    margin-top: .2rem;
}

.ind-card__actions {
    margin-top: auto;
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}

/* Grid para industrias con alto homogéneo */
.grid--industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(.9rem, 2vw, 1.4rem);
    align-items: stretch;
}

/* En home puedes usarlo también */
body[data-page="home"] #industries-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(.9rem, 2vw, 1.4rem);
    align-items: stretch;
}

/* Normaliza posibles horizontales antiguas */
.grid--cards .card.card--horizontal {
    display: grid;
    grid-template-rows: clamp(160px, 22vw, 220px) 1fr;
}

.grid--cards .card.card--horizontal>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid--cards .card.card--horizontal .card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.grid--cards .card.card--horizontal .card__title {
    hyphens: none;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* =========================================================
   MODO OSCURO – Elevación real (overlays + bordes claros)
   ========================================================= */
:root[data-theme="dark"] {
    --elev-bg-1: color-mix(in oklab, var(--surface-1) 90%, white 10%);
    --elev-bg-2: color-mix(in oklab, var(--surface-2) 88%, white 12%);
    --elev-border: color-mix(in oklab, white 14%, var(--surface-1));
    --elev-ring: rgba(255, 255, 255, .06);
    --elev-ambient: 0 18px 40px rgba(0, 0, 0, .55);
    --elev-topline: 0 1px 0 rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .ind-card,
:root[data-theme="dark"] .accordion__item {
    background: var(--elev-bg-1);
    border-color: var(--elev-border);
    box-shadow: var(--elev-topline), 0 0 0 1px var(--elev-ring) inset, var(--elev-ambient);
}

:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .project-card:hover,
:root[data-theme="dark"] .ind-card:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .10) inset, 0 24px 60px rgba(0, 0, 0, .65);
}

/* Tabs/chips */
:root[data-theme="dark"] .tabs__btn {
    background: color-mix(in oklab, var(--brand-600) 20%, var(--elev-bg-1));
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
    color: color-mix(in oklab, white 88%, var(--text-700));
}

:root[data-theme="dark"] .tabs__btn.is-active {
    background: color-mix(in oklab, var(--brand-500) 32%, var(--elev-bg-1));
    border-color: rgba(255, 255, 255, .14);
    color: white;
}

/* Inputs/Selects */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select__input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--elev-bg-2);
    border-color: var(--elev-border);
    color: color-mix(in oklab, white 92%, var(--text-900));
}

:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .select__input:focus,
:root[data-theme="dark"] .textarea:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .04), 0 0 0 4px color-mix(in oklab, var(--brand-600) 24%, transparent);
}

/* Navegación en oscuro */
:root[data-theme="dark"] .nav__menu a:hover {
    color: white;
    background: color-mix(in oklab, var(--brand-500) 22%, transparent);
}

:root[data-theme="dark"] .nav__menu a.is-active {
    color: white;
    background: color-mix(in oklab, var(--brand-600) 28%, transparent);
}

/* Skeleton en dark */
:root[data-theme="dark"] .skeleton {
    --sh: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .20) 50%, rgba(255, 255, 255, 0) 60%);
    background: linear-gradient(0deg, #1c2733, #1c2733) padding-box, var(--sh) border-box;
}

/* Botón primario con relieve */
:root[data-theme="dark"] .btn--primary {
    box-shadow: 0 10px 28px color-mix(in oklab, var(--brand-500) 34%, black), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

/* Badges suaves legibles en oscuro */
:root[data-theme="dark"] .badge--soft {
    --bdg-bg: color-mix(in oklab, var(--brand-600) 22%, var(--elev-bg-1));
    --bdg-fg: color-mix(in oklab, white 88%, var(--text-700));
}

/* =========================================================
   Feature → Card reutilizable
   ========================================================= */
.feature--card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--text-900);
    padding: 2rem 1rem 1.15rem;
    /* -10% top */
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.feature--card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.feature--card>.badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 1;
}

.feature--card h3 {
    margin: 0 0 .2rem 0;
    font-weight: 800;
    letter-spacing: -.01em;
}

.feature--card p {
    color: var(--text-700);
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce) {

    .feature--card,
    .feature--card:hover,
    .btn,
    .btn:hover,
    .card,
    .card:hover,
    .ind-card,
    .ind-card:hover {
        transition: none;
        transform: none;
    }

    .skeleton {
        animation: none;
    }
}