/* ======================================================================
   Moda Vibrante preset — component decorations
   Scoped to [data-mt24-preset="fashion_vibrant"] para no filtrar a otros
   presets. Aquí sólo va lo que los tokens no pueden expresar solos: forma,
   acentos de color vivo, micro-interacciones enérgicas. La contraparte de
   "Moda Elegante": donde aquella es hairline/print, esta es bloque/pop.
   ====================================================================== */

[data-mt24-preset="fashion_vibrant"] {

    /* Títulos — grotesca pesada, apretada, con presencia. ─────────────── */
    .mt24-section-header__title,
    .mt24-heading-md,
    .mt24-heading-lg,
    .mt24-heading-xl {
        font-weight: 800;
        letter-spacing: var(--mt24-letter-spacing-tight);
        line-height: 1.05;
    }

    /* Eyebrow: mayúsculas en color primario, look de "etiqueta de drop". */
    .mt24-section-header__eyebrow,
    .mt24-eyebrow {
        font-family: var(--mt24-font-heading);
        font-size: var(--mt24-font-size-xs);
        font-weight: 800;
        letter-spacing: var(--mt24-letter-spacing-wide);
        text-transform: uppercase;
        color: var(--mt24-primary);
    }

    /* Botones: sólidos, con cuerpo, sombra con glow del primario y lift al
       hover. Lo opuesto al botón hairline de Elegante. */
    .mt24-btn {
        font-weight: 700;
        letter-spacing: 0.01em;
        border-width: 0;
        transition: transform var(--mt24-duration) var(--mt24-ease),
                    box-shadow var(--mt24-duration) var(--mt24-ease),
                    background var(--mt24-duration) var(--mt24-ease);
    }
    .mt24-btn--primary {
        box-shadow: var(--mt24-shadow-primary);
    }
    .mt24-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px -8px rgba(var(--mt24-primary-rgb), 0.65);
    }
    .mt24-btn--outline {
        border-width: 2px;
    }
    .mt24-btn--outline:hover {
        background: var(--mt24-primary);
        border-color: var(--mt24-primary);
        color: #fff;
        transform: translateY(-2px);
    }

    /* Badges (sale / nuevo): pastilla viva, en color primario. */
    .mt24-badge,
    .mt24-prod-card__badge,
    .mt24-product-card__badge {
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        font-size: 0.65rem;
        padding: 0.28em 0.7em;
    }

    /* Product card (minimal): imagen que hace zoom y se eleva al hover;
       precio contundente. */
    .mt24-prod-card,
    .mt24-product-card {
        transition: transform var(--mt24-duration) var(--mt24-ease),
                    box-shadow var(--mt24-duration) var(--mt24-ease);
    }
    .mt24-prod-card:hover,
    .mt24-product-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--mt24-shadow-lg);
    }
    .mt24-prod-card__image img,
    .mt24-product-card__img--primary {
        transition: transform var(--mt24-duration-slow) var(--mt24-ease);
    }
    .mt24-prod-card:hover .mt24-prod-card__image img,
    .mt24-product-card:hover .mt24-product-card__img--primary {
        transform: scale(1.06);
    }
    .mt24-price--current {
        font-family: var(--mt24-font-heading);
        font-weight: 800;
        color: var(--mt24-text);
    }
    .mt24-price--old {
        color: var(--mt24-text-muted);
    }

    /* Countdown de ofertas: dígitos en cajas sólidas para máxima urgencia. */
    .mt24-countdown__unit,
    .mt24-countdown__value {
        font-family: var(--mt24-font-heading);
        font-weight: 800;
        border-radius: var(--mt24-radius-sm);
    }

    /* Section headers: acento de color en vez del hairline de Elegante. */
    .mt24-section-header {
        position: relative;
        padding-top: var(--mt24-space-sm);
    }
    .mt24-section-header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--mt24-primary);
    }

    /* Trust badges en cards: esquina redonda y sombra suave. */
    .mt24-trust-badge,
    .mt24-trust-badges__item {
        border-radius: var(--mt24-radius-lg);
    }

    /* Inputs: rellenos suaves con foco en color primario (no couture). */
    .mt24-input {
        border-radius: var(--mt24-radius);
        background: var(--mt24-surface-alt, rgba(0,0,0,0.03));
        border: 1.5px solid transparent;
    }
    .mt24-input:focus {
        background: var(--mt24-surface, #fff);
        border-color: var(--mt24-primary);
        box-shadow: 0 0 0 3px rgba(var(--mt24-primary-rgb), 0.15);
    }

    /* Footer: títulos en mayúsculas compactas. */
    .mt24-footer__title {
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: var(--mt24-font-size-xs);
        font-weight: 800;
    }
}