/**
 * Mary Cagnin — design system (componentes globais)
 * Escopo: .mary-ui (catálogo, landing e futuras páginas da nova identidade)
 */

:root {
    --mary-offwhite: #f5f4f9;
    --mary-cream: #f5f4f9;
    --mary-purple: #6c2c7c;
    --mary-purple-mid: #59276d;
    --mary-purple-dark: #3f164f;
    --mary-pink: #cc0066;
    --mary-yellow: #ffcc33;
    --mary-yellow-hover: #f2b800;
    --mary-mage: #ffcc33;
    --mary-white: #ffffff;
    --mary-ink: #24162b;
    --mary-muted: #6f5f75;
    --mary-lilac: #ece4f1;
    --mary-line: rgba(108, 44, 124, .16);
    --mary-card: #ffffff;

    --mary-radius-sm: 4px;
    --mary-radius-md: 8px;
    --mary-radius-lg: 10px;
    --mary-radius-btn: 8px;
    --mary-radius-pill: 999px;

    --mary-container: 1220px;
    --mary-gutter: 20px;
    --mary-content: 1180px;
    --mary-font: 'Nunito Sans', sans-serif;
}

body.mary-site,
.mary-ui {
    --mary-surface: var(--mary-offwhite);
    --mary-card-surface: var(--mary-white);
}

.mary-section-block--cream {
    --mary-surface: var(--mary-cream);
    --mary-card-surface: var(--mary-white);
}

.mary-section-block--white {
    --mary-surface: var(--mary-white);
    --mary-card-surface: var(--mary-cream);
}

/* --- Base --- */

.mary-ui,
.mary-ui *,
.mary-ui *::before,
.mary-ui *::after {
    box-sizing: border-box;
}

.mary-ui {
    background: var(--mary-offwhite);
    color: var(--mary-ink);
    font-family: var(--mary-font);
    font-size: 18px;
    line-height: 1.45;
    overflow: hidden;
}

.mary-ui * {
    font-family: var(--mary-font);
}

.mary-ui a {
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.mary-ui h1,
.mary-ui h2,
.mary-ui h3,
.mary-ui h4,
.mary-ui strong {
    font-weight: 900;
}

/* --- Layout --- */

.mary-ui .mary-container,
.mary-ui .mc-container,
.mary-ui .curso-landing__container {
    width: min(var(--mary-container), calc(100% - 40px));
    max-width: var(--mary-container);
    margin: 0 auto;
    padding: 0 var(--mary-gutter);
}

.mary-ui .mary-section,
.mary-ui .mc-section,
.mary-ui .curso-landing__section {
    padding: 64px 0;
}

.mary-ui .mary-section--lg,
.mary-ui .curso-landing__section {
    padding: 104px 0;
}

/* --- Tipografia --- */

.mary-ui .mary-eyebrow,
.mary-ui .mc-eyebrow,
.mary-ui .curso-landing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--mary-purple);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mary-ui .mc-eyebrow {
    color: var(--mary-yellow);
}

.mary-ui .curso-landing__eyebrow::before {
    content: "\2726";
    color: var(--mary-pink);
    font-size: 18px;
    line-height: 1;
}

.mary-ui .mary-title-xl,
.mary-ui .mc-section-title,
.mary-ui .curso-landing h2 {
    margin: 0 0 18px;
    color: var(--mary-ink);
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.mary-ui .curso-landing h1 {
    margin: 0 0 24px;
    color: var(--mary-purple-dark);
    font-size: clamp(54px, 7vw, 104px);
    line-height: .94;
    letter-spacing: -0.06em;
}

.mary-ui .curso-landing h3 {
    margin: 0 0 12px;
    color: var(--mary-purple-dark);
    font-size: 22px;
    line-height: 1.12;
    font-weight: 850;
}

.mary-ui .mary-copy,
.mary-ui .mc-section-copy,
.mary-ui .curso-landing p {
    color: var(--mary-muted);
    font-size: 18px;
    line-height: 1.58;
}

.mary-ui .mc-section-copy {
    max-width: 720px;
    margin: 0 0 34px;
}

.mary-ui .curso-landing__subtitle {
    max-width: 980px;
    margin: 0 0 34px;
    color: var(--mary-ink);
    font-size: clamp(26px, 2.7vw, 38px);
    line-height: 1.22;
    font-weight: 800;
}

/* --- Botões --- */

.mary-ui .mary-btn,
.mary-ui .mc-btn,
body.mary-site .mary-btn,
body.mary-site .mary-search-form .mary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--mary-radius-btn);
    background: var(--mary-yellow);
    color: var(--mary-purple-dark) !important;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.mary-ui .mary-btn:hover,
.mary-ui .mc-btn:hover {
    background: var(--mary-yellow-hover);
    color: var(--mary-purple-dark) !important;
    transform: translateY(-2px);
}

.mary-ui .mary-btn--secondary,
.mary-ui .mc-btn.secondary {
    background: var(--mary-white);
    color: var(--mary-purple-dark) !important;
}

.mary-ui .mary-btn--secondary:hover,
.mary-ui .mc-btn.secondary:hover {
    background: var(--mary-pink);
    color: var(--mary-white) !important;
}

.mary-ui .mary-btn--lilac,
body.mary-site .mary-btn--lilac {
    background: var(--mary-lilac);
    color: var(--mary-purple-dark) !important;
}

.mary-ui .mary-btn--lilac:hover,
body.mary-site .mary-btn--lilac:hover {
    background: var(--mary-purple);
    color: var(--mary-white) !important;
}

.mary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.mary-ui .mary-btn--lg {
    min-height: 84px;
    padding: 28px 72px;
    font-size: 22px;
}

.mary-ui .mary-btn--sm {
    min-height: 40px;
    padding: 10px 18px;
    font-size: 14px;
}

.mary-ui .mary-btn--block {
    width: 100%;
}

.mary-ui .mary-actions,
.mary-ui .mc-actions,
.mary-ui .curso-landing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* --- Badges --- */

.mary-ui .mary-badge,
.mary-ui .mc-badge,
.mary-ui .curso-landing__mini-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    margin: 0 0 16px;
    padding: 7px 12px;
    border-radius: var(--mary-radius-pill);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
}

.mary-ui .mary-badge--amarelo,
.mary-ui .mc-badge-amarelo,
.mary-ui .curso-landing__mini-badge--amarelo {
    background: var(--mary-yellow);
    color: var(--mary-purple-dark);
}

.mary-ui .mary-badge--pink,
.mary-ui .mc-badge-pink,
.mary-ui .curso-landing__mini-badge--pink {
    background: var(--mary-pink);
    color: var(--mary-white);
}

.mary-ui .mary-badge--roxo,
.mary-ui .mc-badge-roxo,
.mary-ui .curso-landing__mini-badge--roxo {
    background: var(--mary-purple);
    color: var(--mary-white);
}

.mary-ui .mary-badge--escuro,
.mary-ui .mc-badge-escuro,
.mary-ui .curso-landing__mini-badge--escuro {
    background: var(--mary-purple-dark);
    color: var(--mary-white);
}

/* --- Listas com estrela --- */

.mary-ui .mary-list,
.mary-ui .mc-list {
    margin: 18px 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.mary-ui .mary-list li,
.mary-ui .mc-list li {
    position: relative;
    padding-left: 18px;
    color: var(--mary-muted);
    font-size: 18px;
    line-height: 1.5;
}

.mary-ui .mary-list li::before,
.mary-ui .mc-list li::before {
    content: "\2726";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mary-pink);
    font-size: 12px;
}

/* --- Preço --- */

.mary-ui .mary-price,
.mary-ui .mc-price-row {
    display: grid;
    gap: 3px;
    align-items: start;
    justify-items: start;
    margin: 18px 0 22px;
}

.mary-ui .mary-price__from,
.mary-ui .mc-price-from,
.mary-ui .curso-landing__old-price {
    color: var(--mary-muted);
    font-size: 16px;
    line-height: 1.35;
}

.mary-ui .mary-price__main,
.mary-ui .mc-price-main,
.mary-ui .curso-landing__cash-price {
    color: var(--mary-pink);
    font-size: clamp(24px, 3vw, 35px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.mary-ui .mary-price__installments,
.mary-ui .mc-price-installments,
.mary-ui .curso-landing__installments {
    color: var(--mary-pink);
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* --- Cards / superfícies --- */

.mary-ui .mary-surface,
.mary-ui .curso-landing__card,
.mary-ui .curso-landing__panel {
    background: var(--mary-card-surface);
    border-radius: var(--mary-radius-sm);
}

.mary-ui .mary-quote,
.mary-ui .mc-proof-card,
.mary-ui .curso-landing__testimonial-card {
    position: relative;
    background: var(--mary-card-surface);
    border-radius: var(--mary-radius-sm);
    padding: 34px 32px 32px;
    overflow: hidden;
}

.mary-ui .mary-quote::before,
.mary-ui .mc-proof-card::before,
.mary-ui .curso-landing__testimonial-card::before {
    content: "\201C";
    display: block;
    margin: 0 0 8px;
    color: var(--mary-purple);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: .72;
    font-weight: 700;
}

.mary-ui .mary-quote p,
.mary-ui .mc-proof-card p,
.mary-ui .curso-landing__testimonial-card p {
    margin: 0;
    color: var(--mary-muted);
    font-size: 18px;
    line-height: 1.58;
}

.mary-ui .mary-quote__name,
.mary-ui .mc-proof-card strong,
.mary-ui .curso-landing__testimonial-name {
    display: block;
    margin-top: 24px;
    color: var(--mary-purple-dark);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --- Faixas / hero escuro --- */

.mary-ui .mary-band-dark,
.mary-ui .mc-hero,
.mary-ui .curso-landing__hero,
.mary-ui .curso-landing__final {
    background: var(--mary-purple-dark);
    color: var(--mary-white);
}

.mary-ui .mc-final {
    background: var(--mary-purple-mid);
    color: var(--mary-white);
}

.mary-ui .mary-band-pink,
.mary-ui .mc-benefits {
    background: var(--mary-pink);
}

.mary-ui .mary-promo-note,
.mary-ui .mc-promo-note {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--mary-radius-md);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
}

/* --- Filtros --- */

.mary-ui .mary-filter,
.mary-ui .mc-filter {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--mary-radius-btn);
    background: var(--mary-white);
    color: var(--mary-purple-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mary-ui .mary-filter.is-active,
.mary-ui .mc-filter.is-active {
    background: var(--mary-purple-dark);
    color: var(--mary-white);
}

/* --- Imagem placeholder --- */

.mary-ui .mary-image,
.mary-ui .mc-catalog-image {
    background: linear-gradient(135deg, rgba(108, 44, 124, .10), rgba(204, 0, 102, .08)), var(--mary-lilac);
    display: grid;
    place-items: center;
    color: var(--mary-purple);
    font-weight: 850;
    text-align: center;
}

.mary-ui .mary-image img,
.mary-ui .mc-catalog-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mary-ui .mary-image.has-image,
.mary-ui .mc-catalog-image.has-image {
    padding: 0;
}

/* --- Responsivo global --- */

.mary-ui .mary-copy a,
.mary-ui .mary-article__content a,
body.mary-site .mary-copy a {
    color: var(--mary-purple);
    font-weight: 800;
    text-decoration: none !important;
}

.mary-ui .mary-copy a:hover,
.mary-ui .mary-article__content a:hover,
body.mary-site .mary-copy a:hover {
    color: var(--mary-pink);
}

/* Mídia embutida no conteúdo editorial (blog, portfólio, publicações) */
.mary-ui .mary-article__content .wp-block-image,
.mary-ui .mary-article__content .wp-block-gallery,
.mary-ui .mary-article__content .wp-block-embed,
.mary-ui .mary-article__content .wp-block-video,
.mary-ui .mary-copy .wp-block-image,
.mary-ui .mary-copy .wp-block-gallery,
.mary-ui .mary-copy .wp-block-embed,
.mary-ui .mary-copy .wp-block-video {
    overflow: hidden;
    border-radius: var(--mary-radius-md);
}

.mary-ui .mary-article__content .wp-block-embed__wrapper,
.mary-ui .mary-copy .wp-block-embed__wrapper {
    overflow: hidden;
    border-radius: var(--mary-radius-md);
}

.mary-ui .mary-article__content :is(img, video, iframe),
.mary-ui .mary-copy :is(img, video, iframe) {
    border-radius: var(--mary-radius-md);
}

.mary-ui .mary-article__content .wp-block-gallery .blocks-gallery-item,
.mary-ui .mary-copy .wp-block-gallery .blocks-gallery-item {
    overflow: hidden;
    border-radius: var(--mary-radius-md);
}

@media (max-width: 640px) {
    .mary-ui .mary-container,
    .mary-ui .mc-container,
    .mary-ui .curso-landing__container {
        width: min(100% - 28px, var(--mary-container));
    }

    .mary-ui .mary-actions,
    .mary-ui .mc-actions,
    .mary-ui .curso-landing__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mary-ui .mary-btn,
    .mary-ui .mc-btn {
        width: 100%;
    }

    .mary-ui .mary-article__content .wp-block-button__link {
        width: auto;
    }
}