/* ==========================================================================
   Variações da tela "Aparência" (admin). Só visual.
   O <body> recebe classes como: deco-waves header-brand topbar-accent footer-light
   hero-tall hero-align-center cards-outline shadow-none h-upper no-shine
   As cores, fontes, cantos e espaçamentos chegam como variáveis CSS (:root).
   Sem classe nenhuma, o site fica exatamente como o tema original (roxo & amarelo).
   ========================================================================== */

/* ---------- títulos: fonte, peso, maiúsculas ---------- */
.slide__title, .h2, .cta__title, .hero__title, .page-hero__title, .card__title, .finder__title, .mode__title,
.features h3, .steps h3, .grade__sem, .footer__title, .brand__name, .price-card__list b, .stats dd, .pay__list b {
    text-transform: var(--h-transform); letter-spacing: var(--h-track);
}
.h-upper .slide__title, .h-upper .page-hero__title, .h-upper .hero__title, .h-upper .cta__title { line-height: 1.02; }
.h-upper .brand__name { text-transform: none; }

/* ---------- botões ---------- */
.no-shine .btn::after { display: none; }

/* ---------- sombras ---------- */
.shadow-none .card:hover, .shadow-none .mode:hover, .shadow-none .btn:hover { box-shadow: none; }
.shadow-none .finder__box, .shadow-none .price-card { box-shadow: 0 0 0 1px var(--line); }
.shadow-strong .card { box-shadow: var(--shadow); }
.shadow-strong .faq details, .shadow-strong .quotes li, .shadow-strong .grade__col { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }

/* ---------- formas pequenas seguem o estilo dos desenhos ---------- */
:root { --deco-shape: 50%; }
.deco-blobs { --deco-shape: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.deco-geometric, .deco-grid { --deco-shape: var(--r-sm); }
.deco-lines { --deco-shape: 4px; }
.deco-none { --deco-shape: var(--r-sm); }
.features__icon, .steps li::before, .quotes__initial, .done__mark, .faq__sign { border-radius: var(--deco-shape); }
.deco-geometric .features__icon, .deco-geometric .steps li::before { transform: rotate(45deg); }
.deco-geometric .features__icon > *, .deco-geometric .steps li::before { }
.deco-geometric .features__icon .icon { transform: rotate(-45deg); }

/* ==========================================================================
   DESENHOS DE FUNDO (banner sem foto, chamada final, cartões, topo das páginas)
   ========================================================================== */

/* --- nenhum --- */
.deco-none .slide__art, .deco-none .cta__art { display: none; }
.deco-none .page-hero { background: linear-gradient(120deg, var(--brand-deep), var(--brand)); }

/* --- formas orgânicas --- */
.deco-blobs .slide__art span:nth-child(1) { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: blob 18s ease-in-out infinite alternate; }
.deco-blobs .slide__art span:nth-child(2) { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; border-width: 0; background: color-mix(in srgb, var(--brand2) 70%, transparent); animation: blob 22s ease-in-out infinite alternate-reverse; }
.deco-blobs .slide__art span:nth-child(3) { width: 140px; border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; background: rgba(255, 255, 255, .14); opacity: 1; }
.deco-blobs .cta__art span { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.deco-blobs .cta__art span:nth-child(2) { border: 0; background: rgba(255, 255, 255, .12); }
@keyframes blob { 50% { border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; rotate: 12deg; } }
.deco-blobs .page-hero { background: radial-gradient(60% 80% at 95% 0%, color-mix(in srgb, var(--pop) 38%, transparent) 0 40%, transparent 41%), radial-gradient(40% 60% at 75% 120%, color-mix(in srgb, var(--brand2) 60%, transparent) 0 50%, transparent 51%), linear-gradient(120deg, var(--brand-deep), var(--brand)); }

/* --- ondas --- */
.deco-waves .slide__art span { border-radius: 0; translate: none; opacity: 1; border: 0;
    -webkit-mask: var(--wave) bottom / 100% 100% no-repeat; mask: var(--wave) bottom / 100% 100% no-repeat; }
.deco-waves { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 160c120 40 240 80 360 69s240-75 360-80 240 48 360 64 240-5 360-37v144H0z'/%3E%3C/svg%3E"); }
.deco-waves .slide__art span:nth-child(1) { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 34%; background: var(--pop); }
.deco-waves .slide__art span:nth-child(2) { left: 0; right: 0; top: auto; bottom: 6%; width: 100%; height: 38%; background: rgba(255, 255, 255, .14); }
.deco-waves .slide__art span:nth-child(3) { left: 0; right: 0; top: auto; bottom: 12%; width: 100%; height: 40%; background: color-mix(in srgb, var(--brand2) 55%, transparent); }
.deco-waves .slide--pop .slide__art span:nth-child(1) { background: var(--brand); }
.deco-waves .slide__in { padding-bottom: clamp(7rem, 12vw, 9rem); }
.deco-waves .cta__art span { border-radius: 0; border: 0; width: 100% !important; height: 45%; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    -webkit-mask: var(--wave) bottom / 100% 100% no-repeat; mask: var(--wave) bottom / 100% 100% no-repeat; }
.deco-waves .cta__art span:nth-child(1) { background: color-mix(in srgb, var(--pop) 85%, transparent); height: 30%; }
.deco-waves .cta__art span:nth-child(2) { background: rgba(255, 255, 255, .12); height: 42%; }
.deco-waves .page-hero { position: relative; background: linear-gradient(120deg, var(--brand-deep), var(--brand)); padding-bottom: calc(clamp(2.75rem, 6vw, 4rem) + 40px); }
.deco-waves .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: var(--bg);
    -webkit-mask: var(--wave) bottom / 100% 100% no-repeat; mask: var(--wave) bottom / 100% 100% no-repeat; }
@media (max-width: 760px) {
    .deco-waves .slide__art span:nth-child(1) { width: 100%; right: 0; top: auto; height: 22%; }
    .deco-waves .slide__art span:nth-child(2) { left: 0; top: auto; height: 26%; }
}

/* --- geométrico --- */
.deco-geometric .slide__art span { border-radius: 0; }
.deco-geometric .slide__art span:nth-child(1) { rotate: 45deg; width: clamp(280px, 34vw, 520px); right: 2%; background: linear-gradient(135deg, var(--pop), color-mix(in srgb, var(--pop) 65%, var(--brand2))); border-radius: var(--r-lg); }
.deco-geometric .slide__art span:nth-child(2) { border: 0; width: clamp(180px, 20vw, 300px); background: rgba(255, 255, 255, .14); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.deco-geometric .slide__art span:nth-child(3) { width: 110px; background: none; border: 3px solid rgba(255, 255, 255, .5); rotate: 18deg; opacity: 1; }
.deco-geometric .slide--pop .slide__art span:nth-child(1) { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-geometric .slide--pop .slide__art span:nth-child(3) { border-color: rgba(0, 0, 0, .25); }
.deco-geometric .cta__art span { border-radius: var(--r); rotate: 45deg; }
.deco-geometric .cta__art span:nth-child(2) { rotate: 20deg; }
.deco-geometric .page-hero { background: linear-gradient(135deg, transparent 0 68%, color-mix(in srgb, var(--pop) 30%, transparent) 68% 74%, transparent 74%), linear-gradient(120deg, var(--brand-deep), var(--brand)); }

/* --- pontilhado --- */
.deco-dots .slide__art span:nth-child(1) { background: radial-gradient(circle, var(--pop) 0 3px, transparent 3.5px) 0 0 / 22px 22px; opacity: .9; }
.deco-dots .slide__art span:nth-child(2) { border: 0; background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 2px, transparent 2.5px) 0 0 / 16px 16px; }
.deco-dots .slide__art span:nth-child(3) { width: 120px; border-radius: 50%; background: var(--pop); opacity: 1; }
.deco-dots .slide--pop .slide__art span:nth-child(1) { background: radial-gradient(circle, var(--brand) 0 3px, transparent 3.5px) 0 0 / 22px 22px; }
.deco-dots .slide--pop .slide__art span:nth-child(3) { background: var(--brand); }
.deco-dots .cta__art span:nth-child(1) { background: radial-gradient(circle, var(--pop) 0 3px, transparent 3.5px) 0 0 / 20px 20px; }
.deco-dots .cta__art span:nth-child(2) { border: 0; background: radial-gradient(circle, rgba(255, 255, 255, .35) 0 2px, transparent 2.5px) 0 0 / 14px 14px; }
.deco-dots .page-hero { background: radial-gradient(circle, rgba(255, 255, 255, .14) 0 1.5px, transparent 2px) 0 0 / 18px 18px, linear-gradient(120deg, var(--brand-deep), var(--brand)); }

/* --- listras diagonais --- */
.deco-lines .slide__art span:nth-child(1) { border-radius: 0; rotate: -20deg; width: clamp(300px, 40vw, 600px); height: 140%; aspect-ratio: auto; top: -20%; translate: none;
    background: repeating-linear-gradient(90deg, var(--pop) 0 18px, transparent 18px 46px); opacity: .9; }
.deco-lines .slide__art span:nth-child(2) { border: 0; border-radius: 0; rotate: -20deg; width: 70px; height: 160%; aspect-ratio: auto; right: 44%; top: -30%; bottom: auto; background: rgba(255, 255, 255, .1); }
.deco-lines .slide__art span:nth-child(3) { display: none; }
.deco-lines .slide--pop .slide__art span:nth-child(1) { background: repeating-linear-gradient(90deg, var(--brand) 0 18px, transparent 18px 46px); }
.deco-lines .cta__art span { border-radius: 0; rotate: -20deg; }
.deco-lines .cta__art span:nth-child(1) { background: repeating-linear-gradient(90deg, var(--pop) 0 14px, transparent 14px 34px); }
.deco-lines .cta__art span:nth-child(2) { border: 0; background: rgba(255, 255, 255, .1); }
.deco-lines .page-hero { background: repeating-linear-gradient(-70deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 40px), linear-gradient(120deg, var(--brand-deep), var(--brand)); }
@media (max-width: 760px) { .deco-lines .slide__art span:nth-child(1) { width: 220px; height: 120%; right: -60px; top: -10%; } }

/* --- quadriculado (estilo tecnologia) --- */
.deco-grid .slide__art { background:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px; }
.deco-grid .slide--pop .slide__art { background:
    linear-gradient(rgba(0, 0, 0, .08) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(0, 0, 0, .08) 1px, transparent 1px) 0 0 / 40px 40px; }
.deco-grid .slide__art span:nth-child(1) { background: radial-gradient(circle, color-mix(in srgb, var(--pop) 80%, transparent), transparent 65%); filter: blur(10px); opacity: .85; }
.deco-grid .slide__art span:nth-child(2) { border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--brand2) 90%, transparent), transparent 65%); filter: blur(14px); }
.deco-grid .slide__art span:nth-child(3) { display: none; }
.deco-grid .cta__box { background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(120deg, var(--brand-deep), var(--brand) 60%, var(--brand2));
    background-size: 36px 36px, 36px 36px, auto; }
.deco-grid .cta__art span:nth-child(1) { background: radial-gradient(circle, var(--pop), transparent 65%); filter: blur(12px); }
.deco-grid .cta__art span:nth-child(2) { display: none; }
.deco-grid .page-hero { background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(120deg, var(--brand-deep), var(--brand)); }

/* ---------- arte dos cartões de curso (segue o desenho escolhido) ---------- */
.deco-none .card__media, .deco-none .card--m-ead .card__media, .deco-none .card--m-semipresencial .card__media { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-blobs .card__media { background: radial-gradient(55% 70% at 88% 12%, color-mix(in srgb, var(--pop) 90%, transparent) 0 55%, transparent 56%), radial-gradient(40% 50% at 8% 100%, color-mix(in srgb, var(--brand2) 80%, transparent) 0 60%, transparent 61%), linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-waves .card__media { background: radial-gradient(140% 55% at 50% 125%, color-mix(in srgb, var(--pop) 92%, transparent) 0 50%, transparent 51%), radial-gradient(140% 60% at 30% 118%, rgba(255, 255, 255, .14) 0 55%, transparent 56%), linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-geometric .card__media { background: linear-gradient(135deg, transparent 0 58%, color-mix(in srgb, var(--pop) 92%, transparent) 58% 70%, transparent 70%), linear-gradient(45deg, rgba(255, 255, 255, .1) 0 25%, transparent 25%), linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-dots .card__media { background: radial-gradient(circle, color-mix(in srgb, var(--pop) 85%, transparent) 0 2.5px, transparent 3px) 0 0 / 18px 18px, linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-lines .card__media { background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .09) 0 12px, transparent 12px 28px), linear-gradient(135deg, var(--brand), var(--brand-deep)); }
.deco-grid .card__media { background: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--pop) 70%, transparent), transparent 45%), linear-gradient(135deg, var(--brand), var(--brand-deep)); }

/* ---------- estilo dos cartões de curso ---------- */
.cards-simple .card__media { aspect-ratio: auto; height: 6px; }
.cards-simple .card__media > * { display: none; }
.cards-simple .card__body { padding-top: 1.4rem; }
.cards-outline .card { border: 2px solid var(--brand-line); }
.cards-outline .card:hover { border-color: var(--brand); }
.cards-outline .card__media { margin: .6rem .6rem 0; border-radius: calc(var(--r) - 6px); }

/* ---------- barra do topo ---------- */
.topbar-hidden .topbar { display: none; }
.topbar-brand .topbar { background: var(--brand); }
.topbar-accent .topbar { background: var(--pop); color: var(--ink); }
.topbar-accent .topbar__links a:hover { color: var(--brand); }
.topbar-accent .pulse { background: var(--brand); }

/* ---------- cabeçalho ---------- */
.header-brand .header { background: var(--brand); }
.header-dark .header { background: color-mix(in srgb, var(--brand) 14%, #08060E); }
.header-brand .brand__name, .header-dark .brand__name { color: #fff; }
.header-brand .brand__mark, .header-dark .brand__mark { background: var(--pop); color: var(--brand-deep); }
.header-brand .burger, .header-dark .burger { background: rgba(255, 255, 255, .14); }
.header-brand .burger__bars, .header-brand .burger__bars::before, .header-brand .burger__bars::after,
.header-dark .burger__bars, .header-dark .burger__bars::before, .header-dark .burger__bars::after { background: #fff; }
.header-brand .burger[aria-expanded="true"] .burger__bars, .header-dark .burger[aria-expanded="true"] .burger__bars { background: transparent; }
@media (min-width: 1021px) {
    .header-brand .nav__links a, .header-dark .nav__links a { color: rgba(255, 255, 255, .82); }
    .header-brand .nav__links a:hover, .header-brand .nav__links a.is-here,
    .header-dark .nav__links a:hover, .header-dark .nav__links a.is-here { color: #fff; background: rgba(255, 255, 255, .14); }
    .header-brand .nav__actions .btn--ghost, .header-dark .nav__actions .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .45); }
    .header-brand .nav__actions .btn--ghost:hover, .header-dark .nav__actions .btn--ghost:hover { border-color: #fff; }
}
@media (max-width: 1020px) {
    body.header-brand .header { background: var(--brand); }
    body.header-dark .header { background: color-mix(in srgb, var(--brand) 14%, #08060E); }
}
/* logo para fundo escuro (opcional): troca automaticamente onde o fundo é escuro */
.brand__logo--dark { display: none; }
.header-brand .header .brand__logo--light.has-dark, .header-dark .header .brand__logo--light.has-dark { display: none; }
.header-brand .header .brand__logo--dark, .header-dark .header .brand__logo--dark { display: block; }
.footer:not(.footer--light-bg) .brand__logo--dark { display: block; }
.footer:not(.footer--light-bg) .brand__logo--light.has-dark { display: none; }

/* ---------- rodapé ---------- */
.footer-brand .footer { background: var(--brand); }
.footer-light .footer { background: var(--bg-2); color: var(--ink-2); border-top: 1px solid var(--line); }
.footer-light .footer a, .footer-light .footer__list a { color: var(--ink-2); }
.footer-light .footer a:hover { color: var(--brand); }
.footer-light .footer__title, .footer-light .brand--inverse .brand__name { color: var(--ink); }
.footer-light .brand--inverse .brand__mark { background: var(--brand); color: var(--pop); }
.footer-light .social a { border-color: var(--line); }
.footer-light .footer__legal { border-top-color: var(--line); color: var(--ink-2); }
.footer-light .footer .brand__logo--dark { display: none; }
.footer-light .footer .brand__logo--light.has-dark { display: block; }

/* ---------- banner: altura e alinhamento ---------- */
.hero-compact .slide { min-height: clamp(380px, 48vh, 470px); }
.hero-tall .slide { min-height: max(600px, calc(100vh - var(--header-h) - 38px)); }
.hero-align-center .slide__content { margin-inline: auto; justify-items: center; text-align: center; }
.hero-align-center .slide__content .actions { justify-content: center; }
.hero-align-center .slide__text { margin-inline: auto; }
.hero-align-center .hero__content { justify-items: center; text-align: center; margin-inline: auto; }
.hero-align-center .hero__in { grid-template-columns: 1fr; }
@media (max-width: 760px) { .hero-tall .slide, .hero-compact .slide { min-height: 520px; } }

@media (prefers-reduced-motion: reduce) { .deco-blobs .slide__art span { animation: none; } }

/* texto centralizado: desenhos ficam mais discretos para não atrapalhar a leitura */
.hero-align-center .slide__art span { opacity: .3 !important; }
.hero-align-center.deco-waves .slide__art span { opacity: 1 !important; }