/* =========================================================
   MORAIS FONSECA — Design system "Ateliê Claro"
   Loja de projetos arquitetônicos: fundo areia, cartões
   brancos, acento terracota, títulos em serifada elegante.
   =========================================================
   01. Tokens e base
   02. Botões, chips, badges, avisos
   03. Cabeçalho e rodapé
   04. Home: hero, busca, categorias, benefícios, depoimentos
   05. Cartão de projeto e grades
   06. Catálogo
   07. Página do projeto
   08. Checkout e pagamento
   09. Formulários
   10. Auth
   11. Painéis (cliente + admin)
   12. Dashboard admin
   13. Tabelas
   14. Avaliações em vídeo
   15. Responsivo
   ========================================================= */

/* ---------- 01. TOKENS E BASE ---------- */
:root {
    /* Superfícies */
    --areia:        #faf7f3;
    --areia-2:      #f4efe9;
    --areia-3:      #ede6dd;
    --branco:       #ffffff;
    --preto:        #1f1d1b;

    /* Texto */
    --tinta:        #22201e;
    --texto:        #3f3a35;
    --texto-suave:  #837a71;
    --texto-fraco:  #a79d93;

    /* Marca */
    --terracota:      #b65e3c;
    --terracota-forte:#9c4d2f;
    --terracota-suave:#faf0ea;
    --terracota-linha:#e8cdbe;
    --ouro:         #c9a227;
    --vermelho:     #c0392b;
    --verde:        #2f7d5b;
    --ambar:        #c08a1e;
    --azul:         #3f6fb5;

    /* Fios */
    --borda:        #eae3db;
    --borda-forte:  #ded4c8;
    --fio:          1px solid #eae3db;

    /* Geometria */
    --raio-grande:  12px;
    --raio-medio:   9px;
    --raio-pill:    999px;

    /* Sombras discretas */
    --sombra-card:  0 1px 2px rgba(34,32,30,.04), 0 6px 20px rgba(34,32,30,.045);
    --sombra-alta:  0 2px 4px rgba(34,32,30,.05), 0 16px 40px rgba(34,32,30,.09);

    /* Tipografia */
    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fonte-display: 'Playfair Display', 'EB Garamond', Georgia, serif;

    /* Ritmo */
    --largura: 1320px;
    --gutter: 32px;
    --transicao: 200ms cubic-bezier(.3,.7,.4,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--areia);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
svg { flex: none; }

h1, h2, h3, h4 { color: var(--tinta); font-weight: 600; line-height: 1.15; }
h1, h2 { font-family: var(--fonte-display); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
h1 { font-size: clamp(34px, 4vw, 54px); }
h2 { font-size: clamp(26px, 2.6vw, 38px); }
h3 { font-size: 17px; }

p { color: var(--texto-suave); }
strong { color: var(--tinta); font-weight: 600; }

.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--terracota);
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 14px;
}

.lead { font-size: 16.5px; color: var(--texto-suave); line-height: 1.7; max-width: 64ch; }
.muted-text { color: var(--texto-suave); font-size: 13.5px; line-height: 1.6; }
.readable { max-width: 74ch; }
.readable p { margin-bottom: 16px; font-size: 16px; line-height: 1.75; }

::selection { background: var(--terracota); color: #fff; }

/* Blocos e seções */
.section { max-width: var(--largura); margin: 0 auto; padding: 72px var(--gutter); }
.section.muted { max-width: none; background: var(--areia-2); border-block: var(--fio); }
.section.muted > * { max-width: var(--largura); margin-inline: auto; }

.section-heading { margin-bottom: 32px; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading p { font-size: 15px; max-width: 62ch; }

.section-heading.split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.page-hero { max-width: var(--largura); margin: 0 auto; padding: 56px var(--gutter) 32px; }
.page-hero h1 { margin-bottom: 14px; max-width: 20ch; }
.page-hero p { font-size: 16px; max-width: 62ch; }
.page-hero.compact-hero { padding-bottom: 24px; }

/* Migalhas */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--texto-fraco);
}
.breadcrumb a:hover { color: var(--terracota); }
.breadcrumb span.sep { color: var(--borda-forte); }
.breadcrumb .atual { color: var(--terracota); }

/* Link com seta */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--terracota);
    white-space: nowrap;
}
.link-seta::after { content: "→"; transition: transform var(--transicao); }
.link-seta:hover::after { transform: translateX(3px); }

/* ---------- 02. BOTÕES, CHIPS, BADGES, AVISOS ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: var(--raio-medio);
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    background: var(--branco);
    color: var(--tinta);
    border-color: var(--borda-forte);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transicao), color var(--transicao),
                border-color var(--transicao), box-shadow var(--transicao);
}

.button:hover { border-color: var(--terracota); color: var(--terracota); }
.button:disabled { opacity: .5; cursor: not-allowed; }

.button-primary {
    background: var(--terracota);
    border-color: var(--terracota);
    color: #fff;
    box-shadow: 0 1px 2px rgba(156,77,47,.18);
}
.button-primary:hover { background: var(--terracota-forte); border-color: var(--terracota-forte); color: #fff; }

.button-secondary {
    background: var(--branco);
    border-color: var(--terracota-linha);
    color: var(--terracota);
}
.button-secondary:hover { background: var(--terracota-suave); border-color: var(--terracota); }

.button-ghost { background: transparent; border-color: transparent; color: var(--texto-suave); padding-inline: 4px; }
.button-ghost:hover { color: var(--terracota); }

.button-small { padding: 8px 15px; font-size: 13px; }
.button-large { padding: 15px 30px; font-size: 15px; }
.button.full { width: 100%; }

.button-danger { color: var(--texto-suave); }
.button-danger:hover { border-color: var(--vermelho); color: var(--vermelho); background: #fdf2f0; }

/* Botão quadrado só com ícone */
.icon-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-medio);
    background: var(--branco);
    color: var(--texto-suave);
    cursor: pointer;
    transition: all var(--transicao);
}
.icon-btn:hover { border-color: var(--terracota); color: var(--terracota); background: var(--terracota-suave); }

/* Badges de status */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid transparent;
    border-radius: var(--raio-pill);
    font-size: 12px;
    font-weight: 500;
    background: var(--areia-2);
    color: var(--texto-suave);
    white-space: nowrap;
}

.badge-pago { background: #eaf6f0; color: var(--verde); border-color: #cfe9de; }
.badge-aguardando_pagamento { background: #fdf5e3; color: #a2740f; border-color: #f1e2bc; }
.badge-cancelado, .badge-recusado, .badge-expirado { background: #fdf0ee; color: var(--vermelho); border-color: #f3d5d0; }
.badge-reembolsado { background: #eef3fb; color: var(--azul); border-color: #d6e2f4; }

/* Selo sobre a foto do produto */
.project-badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 11px;
    border-radius: var(--raio-pill);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(34,32,30,.12);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta);
}
.project-badge.destaque { background: var(--terracota); color: #fff; }

/* Chips de filtro ativo */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: var(--fio);
    border-radius: var(--raio-pill);
    background: var(--branco);
    font-size: 12.5px;
    color: var(--texto);
}
.chip .x { color: var(--texto-fraco); font-size: 14px; line-height: 1; }
.chip:hover .x { color: var(--vermelho); }

/* Avisos */
.flash {
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: var(--largura);
    margin: 18px auto;
    padding: 13px 18px;
    border: var(--fio);
    border-left: 3px solid var(--texto-suave);
    border-radius: var(--raio-medio);
    background: var(--branco);
    box-shadow: var(--sombra-card);
    font-size: 14px;
    color: var(--texto);
}
.flash-success { border-left-color: var(--verde); }
.flash-error   { border-left-color: var(--vermelho); }
.flash-warning { border-left-color: var(--ambar); }
.flash-info    { border-left-color: var(--terracota); }

.empty-state {
    grid-column: 1 / -1;
    padding: 56px 24px;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-grande);
    background: var(--branco);
    text-align: center;
    color: var(--texto-suave);
    font-size: 14.5px;
}

/* Características (quartos, banheiros, m²) */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--texto-suave);
    white-space: nowrap;
}
.feature-chip .ic, .feature-chip svg { width: 15px; height: 15px; color: var(--terracota); opacity: .85; }
.feature-chip .ic-piscina { color: var(--azul); }
.feature-chip .ic-gourmet { color: var(--terracota); }

/* Estrelas */
.estrelas { display: inline-flex; gap: 2px; color: var(--ouro); }
.estrelas .ic, .estrelas svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }

/* ---------- 03. CABEÇALHO E RODAPÉ ---------- */
body.public-template { background: var(--areia); }
body.public-template > main { display: block; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--fio);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 76px;
}

/* Lockup da marca */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-logo { width: 40px; height: auto; object-fit: contain; }

.brand-nome { display: flex; flex-direction: column; gap: 3px; }
.brand-nome strong {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .16em;
    color: var(--tinta);
    text-transform: uppercase;
    line-height: 1;
}
.brand-nome span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--terracota);
    line-height: 1;
}
.brand-nome span::before, .brand-nome span::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--terracota-linha);
}

.site-nav { display: flex; align-items: center; gap: 30px; }

.site-nav a {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--texto);
    transition: color var(--transicao);
}
.site-nav a:hover { color: var(--terracota); }

.header-acoes { display: flex; align-items: center; gap: 20px; }

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--texto);
    transition: color var(--transicao);
}
.header-link:hover { color: var(--terracota); }
.header-link svg { width: 17px; height: 17px; }

.site-nav .nav-pill, .header-acoes .button {
    padding: 10px 22px;
    border-radius: var(--raio-medio);
    font-size: 13.5px;
    font-weight: 500;
}

.menu-toggle, .icon-button.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px; height: 40px;
    padding: 0 9px;
    border: var(--fio);
    border-radius: var(--raio-medio);
    background: var(--branco);
    cursor: pointer;
}
.menu-toggle span { display: block; height: 1.5px; background: var(--tinta); transition: transform var(--transicao), opacity var(--transicao); }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Rodapé */
.site-footer { background: var(--areia-2); border-top: var(--fio); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
    gap: 44px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 64px var(--gutter) 48px;
}

.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-brand > div { display: flex; align-items: center; gap: 11px; }
.footer-logo-img { width: 42px; height: auto; }
.footer-brand p { font-size: 13.5px; line-height: 1.65; max-width: 32ch; }

.footer-social { display: flex; gap: 14px; }
.footer-social a { color: var(--texto-suave); transition: color var(--transicao); }
.footer-social a:hover { color: var(--terracota); }

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col h4 { font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 4px; }
.footer-col h4.sub { margin-top: 20px; }
.footer-col a { font-size: 13.5px; color: var(--texto-suave); transition: color var(--transicao); }
.footer-col a:hover { color: var(--terracota); }

.footer-news p { font-size: 13.5px; margin-bottom: 14px; }
.footer-news form { display: flex; gap: 8px; }
.footer-news input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-medio);
    background: var(--branco);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--texto);
    outline: none;
}
.footer-news input:focus { border-color: var(--terracota); }
.footer-news button {
    display: grid;
    place-items: center;
    width: 42px;
    border: 1px solid var(--terracota);
    border-radius: var(--raio-medio);
    background: var(--terracota);
    color: #fff;
    cursor: pointer;
    transition: background var(--transicao);
}
.footer-news button:hover { background: var(--terracota-forte); }

.footer-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 20px var(--gutter);
    border-top: var(--fio);
}
.footer-base p { font-size: 12.5px; color: var(--texto-fraco); }

.pagamentos { display: flex; align-items: center; gap: 10px; }
.pagamentos span {
    padding: 5px 11px;
    border: var(--fio);
    border-radius: 5px;
    background: var(--branco);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--texto-suave);
}

/* ---------- 04. HOME ---------- */
.hero { background: var(--areia); }

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 40px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 56px var(--gutter) 0;
}

.hero-texto { max-width: 30ch; }
.hero h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.12; margin-bottom: 20px; max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--terracota); }
.hero-sub { font-size: 15.5px; line-height: 1.7; margin-bottom: 28px; max-width: 44ch; }

.hero-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }

.hero-video {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 13.5px;
    color: var(--texto);
}
.hero-video .play {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--terracota-linha);
    border-radius: 50%;
    background: var(--branco);
    color: var(--terracota);
    transition: all var(--transicao);
}
.hero-video:hover .play { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.hero-video small { display: block; color: var(--texto-fraco); font-size: 12px; }

.hero-foto { position: relative; }
.hero-foto img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: var(--raio-grande);
}
.hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--raio-grande);
    background: linear-gradient(100deg, var(--areia) 0%, rgba(250,247,243,.55) 16%, transparent 46%);
    pointer-events: none;
}

.hero-selo {
    position: absolute;
    top: 22px; right: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--raio-grande);
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    box-shadow: var(--sombra-card);
}
.hero-selo .ico {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--terracota-suave);
    color: var(--terracota);
}
.hero-selo strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.hero-selo a { font-size: 12.5px; color: var(--terracota); }

/* Barra de busca */
.busca-barra {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 0;
    max-width: var(--largura);
    margin: -34px auto 0;
    padding: 10px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-alta);
}

.busca-campo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    border-right: var(--fio);
    min-width: 0;
}
.busca-campo:nth-last-child(2) { border-right: 0; }
.busca-campo > svg { width: 19px; height: 19px; color: var(--terracota); opacity: .9; }
.busca-campo .campo-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.busca-campo .campo-rotulo { font-size: 11px; color: var(--texto-fraco); }
.busca-campo input, .busca-campo select {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tinta);
    outline: none;
    cursor: pointer;
}
.busca-campo input { cursor: text; }
.busca-campo input::placeholder { color: var(--texto-fraco); font-weight: 400; }
.busca-barra > .button { margin-left: 8px; padding-inline: 26px; }

/* Categorias */
.categorias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

.categoria-card {
    display: flex;
    flex-direction: column;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
    transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.categoria-card:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); border-color: var(--borda-forte); }
.categoria-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.categoria-info { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.categoria-info svg { width: 20px; height: 20px; color: var(--terracota); }
.categoria-info strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.categoria-info span { font-size: 11.5px; color: var(--texto-fraco); }

/* Benefícios */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
}

.benefit-card { display: flex; align-items: flex-start; gap: 14px; padding: 26px 24px; border-right: var(--fio); }
.benefit-card:last-child { border-right: 0; }
.benefit-card .check-icon, .benefit-card .ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border: 1px solid var(--terracota-linha);
    border-radius: 50%;
    background: var(--terracota-suave);
    color: var(--terracota);
    font-size: 15px;
}
.benefit-card h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.benefit-card p { font-size: 12.5px; line-height: 1.55; }

/* Passos numerados */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: passo; }
.steps article, .steps li {
    list-style: none;
    padding: 26px 24px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    counter-increment: passo;
}
.steps article::before, .steps li::before {
    content: "0" counter(passo);
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--terracota-suave);
    color: var(--terracota);
    font-size: 12.5px;
    font-weight: 600;
}
.steps h3 { font-size: 15px; margin-bottom: 6px; }

/* Faixa de confiança */
.trust-band {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    align-items: center;
    gap: 24px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 26px 28px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
}
.trust-band .destaque { display: flex; align-items: flex-start; gap: 14px; }
.trust-band .destaque svg { width: 30px; height: 30px; color: var(--terracota); }
.trust-band .destaque strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.trust-band .destaque p { font-size: 12px; line-height: 1.5; }
.trust-band > div:not(.destaque) { display: flex; align-items: center; gap: 11px; }
.trust-band > div:not(.destaque) svg { width: 22px; height: 22px; color: var(--terracota); }
.trust-band > div:not(.destaque) strong { display: block; font-size: 13px; font-weight: 600; }
.trust-band > div:not(.destaque) span { font-size: 11.5px; color: var(--texto-fraco); }

/* Depoimentos */
.depoimentos { display: grid; grid-template-columns: .8fr repeat(3, 1fr) .9fr; gap: 18px; align-items: start; }
.depoimentos-titulo h2 { margin-bottom: 10px; }

.depoimento-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 22px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
}
.depoimento-card p { font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.depoimento-autor { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.depoimento-autor img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.depoimento-autor strong { display: block; font-size: 13px; }
.depoimento-autor span { font-size: 11.5px; color: var(--texto-fraco); }

.nota-geral {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 22px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    text-align: center;
}
.nota-geral .valor { font-family: var(--fonte-display); font-size: 46px; line-height: 1; color: var(--tinta); }
.nota-geral p { font-size: 12px; }

/* Chamada final */
.contact-card {
    position: relative;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 48px 40px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
}
.contact-card h2 { margin-bottom: 10px; }
.contact-card p { font-size: 15px; max-width: 54ch; }
.contact-card strong { color: var(--terracota); }

/* ---------- 05. CARTÃO DE PROJETO E GRADES ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
.project-grid.linha-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.project-card {
    display: flex;
    flex-direction: column;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
    transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.project-card:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); border-color: var(--borda-forte); }

.project-image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--areia-2); }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.3,.7,.4,1); }
.project-card:hover .project-image img { transform: scale(1.04); }

.project-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.project-card-body h3 { font-family: var(--fonte-display); font-weight: 500; font-size: 18px; line-height: 1.25; }
.project-card-body h3 a { transition: color var(--transicao); }
.project-card:hover .project-card-body h3 a { color: var(--terracota); }

.project-summary {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-code { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }

.spec-grid.compact { display: flex; flex-wrap: wrap; gap: 5px 14px; }

.project-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.price-label { width: 100%; font-size: 11px; color: var(--texto-fraco); }
.project-price small { font-size: 12.5px; text-decoration: line-through; color: var(--texto-fraco); }
.project-price strong { font-size: 20px; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; }
.project-price.large strong { font-family: var(--fonte-display); font-size: 40px; font-weight: 500; }

.project-card-rodape { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.project-card-rodape .button { flex: 1; }

/* ---------- 06. CATÁLOGO ---------- */
.catalogo-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    gap: 40px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 34px var(--gutter) 30px;
}
.catalogo-topo h1 { margin-bottom: 12px; }
.catalogo-topo > div > p { font-size: 15px; max-width: 52ch; }

.aviso-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.aviso-card .topo { display: flex; align-items: flex-start; gap: 13px; }
.aviso-card .topo svg { width: 34px; height: 34px; color: var(--terracota); }
.aviso-card .topo p { font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.aviso-card .itens { display: flex; gap: 18px; padding-top: 15px; border-top: var(--fio); }
.aviso-card .itens > div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.35; color: var(--texto-suave); }
.aviso-card .itens svg { width: 18px; height: 18px; color: var(--terracota); }

.catalog-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--gutter) 72px;
}

.filter-panel {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
}

.filter-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: var(--fio);
}
.filter-title strong { font-size: 15px; font-weight: 600; }
.filter-title a { font-size: 12.5px; color: var(--terracota); }

.filtro-grupo { padding: 16px 20px; border-bottom: var(--fio); }
.filtro-grupo > h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fonte);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 13px;
}
.filtro-grupo > h4 svg { width: 16px; height: 16px; color: var(--terracota); }

.filter-panel label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11.5px;
    color: var(--texto-fraco);
}
.filter-panel label + label { margin-top: 11px; }

.filter-panel input, .filter-panel select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    background: var(--branco);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.filter-panel input:focus, .filter-panel select:focus { border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(182,94,60,.10); }
.filter-panel .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-panel .two-cols label + label { margin-top: 0; }
.filter-panel .rodape { padding: 16px 20px; border-bottom: 0; }

.catalog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}
.catalog-meta .esquerda { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.catalog-meta strong { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.catalog-meta .ordenar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-suave); }
.catalog-meta .ordenar select {
    padding: 9px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    background: var(--branco);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tinta);
    outline: none;
    cursor: pointer;
}

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.pagination a {
    display: grid;
    place-items: center;
    min-width: 38px; height: 38px;
    padding: 0 11px;
    border: var(--fio);
    border-radius: 7px;
    background: var(--branco);
    font-size: 13.5px;
    color: var(--texto);
    transition: all var(--transicao);
}
.pagination a:hover { border-color: var(--terracota); color: var(--terracota); }
.pagination a.active { background: var(--terracota); border-color: var(--terracota); color: #fff; }

/* ---------- 07. PÁGINA DO PROJETO ---------- */
.project-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr) 320px;
    align-items: start;
    gap: 28px;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 8px var(--gutter) 56px;
}

.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main-wrap { position: relative; }
.gallery-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raio-grande);
    background: var(--areia-2);
}
.gallery-main-wrap .project-badge { z-index: 2; }

.gallery-carousel { position: relative; }
.gallery-strip { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 1px; }
.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-thumb {
    flex: 0 0 92px;
    height: 68px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transicao), opacity var(--transicao);
    opacity: .82;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover, .gallery-thumb.ativa { opacity: 1; border-color: var(--terracota); }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: var(--fio);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: var(--sombra-card);
    color: var(--tinta);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: all var(--transicao);
}
.carousel-nav.prev { left: -10px; }
.carousel-nav.next { right: -10px; }
.carousel-nav:hover { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.gallery-carousel.sem-rolagem .carousel-nav { display: none; }

.project-video { margin-top: 14px; }
.project-video h3 { font-size: 13px; margin-bottom: 10px; }
.project-video video { width: 100%; border: var(--fio); border-radius: var(--raio-grande); background: #000; }

/* Coluna do meio */
.projeto-info > .eyebrow { margin-bottom: 8px; }
.projeto-info h1 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.12; margin-bottom: 12px; }
.projeto-info > p { font-size: 14px; line-height: 1.65; margin-bottom: 20px; }

.ficha-rapida {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 20px 0;
    border-block: var(--fio);
}
.ficha-item { display: flex; align-items: flex-start; gap: 10px; }
.ficha-item svg { width: 19px; height: 19px; color: var(--terracota); margin-top: 2px; }
.ficha-item span { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.ficha-item strong { font-size: 13.5px; font-weight: 600; }

.ajuda-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 18px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--areia-2);
}
.ajuda-card .ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--terracota-suave);
    color: var(--terracota);
}
.ajuda-card strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.ajuda-card p { font-size: 12.5px; margin-bottom: 8px; }

/* Cartão de compra */
.buy-box {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}

.compra-selo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: var(--fio);
    font-size: 12.5px;
    color: var(--verde);
}
.compra-selo svg { width: 17px; height: 17px; }

.buy-box .project-price { flex-direction: column; align-items: flex-start; gap: 2px; }
.compra-nota { font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.compra-nota b { color: var(--tinta); }

.confianca-lista { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: var(--fio); }
.confianca-item { display: flex; align-items: flex-start; gap: 11px; }
.confianca-item svg { width: 18px; height: 18px; color: var(--terracota); margin-top: 1px; }
.confianca-item strong { display: block; font-size: 12.5px; font-weight: 600; }
.confianca-item span { font-size: 11.5px; color: var(--texto-fraco); line-height: 1.45; }

.quick-specs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.secure-note { font-size: 12px; line-height: 1.5; color: var(--texto-fraco); }

/* Complementos */
.addons { display: flex; flex-direction: column; gap: 7px; padding-top: 16px; border-top: var(--fio); }
.addons-titulo { font-size: 13px; font-weight: 600; color: var(--tinta); }
.addons-sub { font-size: 12px; margin-bottom: 5px; }

.addon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: var(--fio);
    border-radius: 8px;
    background: var(--branco);
    cursor: pointer;
    transition: all var(--transicao);
}
.addon-item:hover { border-color: var(--borda-forte); }
.addon-item:has(.addon-check:checked) { border-color: var(--terracota); background: var(--terracota-suave); }

.addon-check {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 17px; height: 17px;
    border: 1.5px solid var(--borda-forte);
    border-radius: 4px;
    background: var(--branco);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all var(--transicao);
}
.addon-check:checked { background: var(--terracota); border-color: var(--terracota); }
.addon-check:checked::after {
    content: "";
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.addon-info { flex: 1; min-width: 0; }
.addon-nome { font-size: 13px; color: var(--texto); }
.addon-preco { font-size: 12.5px; font-weight: 600; color: var(--terracota); white-space: nowrap; }

.addons-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: var(--fio);
}
.addons-total span { font-size: 12.5px; color: var(--texto-suave); }
.addons-total strong { font-family: var(--fonte-display); font-size: 26px; font-weight: 500; }
.discount-line { font-size: 12px; color: var(--verde); }

.share-actions { display: flex; gap: 7px; }
.share-actions .button { flex: 1; padding: 9px 6px; font-size: 12px; }

/* Abas */
.abas { border-bottom: var(--fio); margin-bottom: 26px; }
.abas-nav { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.abas-nav::-webkit-scrollbar { display: none; }
.aba-btn {
    position: relative;
    padding: 0 0 13px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--texto-suave);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transicao);
}
.aba-btn::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 2px;
    background: var(--terracota);
    opacity: 0;
    transition: opacity var(--transicao);
}
.aba-btn:hover { color: var(--tinta); }
.aba-btn.ativa { color: var(--terracota); font-weight: 500; }
.aba-btn.ativa::after { opacity: 1; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.detail-grid h2 { font-size: 24px; margin-bottom: 16px; }
.detail-grid p { font-size: 14.5px; line-height: 1.75; }

.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 20px; }
.checklist span { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--texto); }
.checklist svg { width: 16px; height: 16px; color: var(--terracota); margin-top: 3px; }

.professional-warning {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid #f1e2bc;
    border-radius: var(--raio-medio);
    background: #fdf8ec;
    font-size: 13px;
    line-height: 1.6;
    color: #7d6420;
}

.spec-panel { padding: 24px; border: var(--fio); border-radius: var(--raio-grande); background: var(--branco); }
.spec-panel h2 { font-family: var(--fonte); font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.spec-list { display: flex; flex-direction: column; }
.spec-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: var(--fio); }
.spec-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list dt { font-size: 13.5px; color: var(--texto-suave); }
.spec-list dd { font-size: 13.5px; font-weight: 600; color: var(--tinta); text-align: right; }

/* Blocos "visualize o projeto" */
.visualize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.visualize-card { border: var(--fio); border-radius: var(--raio-grande); background: var(--branco); overflow: hidden; }
.visualize-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--areia-2); }
.visualize-card .corpo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.visualize-card strong { display: block; font-size: 13.5px; }
.visualize-card span { font-size: 11.5px; color: var(--texto-fraco); }

.included-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.included-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: var(--fio);
    border-radius: var(--raio-pill);
    background: var(--branco);
    font-size: 13px;
    color: var(--texto);
}
.included-grid span::before { content: "✓"; color: var(--terracota); font-size: 12px; }

/* ---------- 08. CHECKOUT E PAGAMENTO ---------- */
.buy-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px var(--gutter) 72px;
}

.buy-resumo, .buy-form-card {
    padding: 26px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.buy-resumo { position: sticky; top: 96px; }
.buy-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--raio-medio); margin-bottom: 18px; }
.buy-resumo h1 { font-size: 28px; margin: 6px 0 14px; }

.buy-inclui { margin-top: 20px; padding-top: 18px; border-top: var(--fio); }
.buy-inclui h3 { font-size: 13.5px; margin-bottom: 10px; }
.inclui-list { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.inclui-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--texto-suave); }
.inclui-list li::before { content: "✓"; color: var(--terracota); font-size: 12px; margin-top: 2px; }

.buy-form-card h2 { font-size: 22px; margin-bottom: 18px; }
.buy-form { display: flex; flex-direction: column; gap: 14px; }

.buy-form label:not(.checkbox-line):not(.addon-item) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--texto);
}

.buy-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: var(--branco);
    color: var(--tinta);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.buy-form input:focus { border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(182,94,60,.10); }
.campo-dica { display: block; font-size: 11.5px; font-weight: 400; color: var(--texto-fraco); }

.buy-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 0;
    border-block: var(--fio);
}
.buy-total > span { font-size: 13px; color: var(--texto-suave); }
.buy-total strong { font-family: var(--fonte-display); font-size: 30px; font-weight: 500; }

.term-aceite { font-size: 13px; line-height: 1.5; }
.term-aceite a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }

.payment-choice { display: flex; flex-direction: column; gap: 8px; }
.payment-choice > span { font-size: 12px; font-weight: 500; color: var(--texto); }
.payment-choice label {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: var(--fio);
    border-radius: 8px;
    background: var(--branco);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transicao);
}
.payment-choice label:has(input:checked) { border-color: var(--terracota); background: var(--terracota-suave); }
.payment-choice input { accent-color: var(--terracota); width: 16px; height: 16px; }

.buy-passos { margin-top: 20px; padding-top: 18px; border-top: var(--fio); }
.buy-passos h3 { font-size: 13.5px; margin-bottom: 10px; }
.buy-passos ol { padding-left: 17px; display: flex; flex-direction: column; gap: 7px; }
.buy-passos li { font-size: 13.5px; color: var(--texto-suave); }

.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 40px var(--gutter) 72px;
}

.term-document h1 { font-size: 32px; margin-bottom: 18px; }
.term-content {
    max-height: 440px;
    overflow-y: auto;
    padding: 24px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    font-size: 14px;
    line-height: 1.75;
    color: var(--texto-suave);
    white-space: pre-line;
}
.hash-line { margin-top: 12px; font-size: 11.5px; color: var(--texto-fraco); }
.hash-line code { font-family: ui-monospace, Menlo, monospace; }

.checkout-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.checkout-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--raio-medio); }
.checkout-card h2 { font-size: 20px; }
.checkout-card > strong { font-family: var(--fonte-display); font-size: 26px; font-weight: 500; }
.checkout-card code {
    display: block;
    padding: 9px 11px;
    border: var(--fio);
    border-radius: 7px;
    background: var(--areia-2);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--texto-suave);
}

.payment-panel > * + * { margin-top: 18px; }
.payment-panel h1 { font-size: 34px; margin-bottom: 12px; }
.payment-panel .spec-list {
    margin-top: 22px;
    padding: 8px 20px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
}
.payment-panel .copy-box { margin-top: 22px; font-size: 12.5px; font-weight: 500; color: var(--texto); }
.payment-panel .hero-actions { margin-top: 26px; padding-top: 22px; border-top: var(--fio); }

.pix-area { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0; }
.pix-qr { width: 190px; height: 190px; padding: 10px; border: var(--fio); border-radius: var(--raio-medio); background: #fff; }

.copy-box { display: flex; flex-direction: column; gap: 9px; }
.copy-box textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px;
    border: var(--fio);
    border-radius: var(--raio-medio);
    background: var(--branco);
    color: var(--texto-suave);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}
.copy-box textarea:focus { border-color: var(--terracota); }

.resumo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: var(--fio); font-size: 14px; }
.resumo-linha:last-child { border-bottom: 0; }
.resumo-linha.total { font-family: var(--fonte-display); font-size: 22px; padding-top: 14px; }
.checkout-resumo { display: flex; flex-direction: column; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 09. FORMULÁRIOS ---------- */
.premium-form, .admin-form { display: flex; flex-direction: column; gap: 16px; }

.premium-form label, .admin-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texto);
}

.premium-form input, .premium-form select, .premium-form textarea,
.admin-form input, .admin-form select, .admin-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: var(--branco);
    color: var(--tinta);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.premium-form input:focus, .premium-form select:focus, .premium-form textarea:focus,
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
    border-color: var(--terracota);
    box-shadow: 0 0 0 3px rgba(182,94,60,.10);
}
.premium-form textarea, .admin-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.premium-form input[type="file"], .admin-form input[type="file"] { padding: 9px; font-size: 13px; color: var(--texto-suave); max-width: 100%; }
.premium-form input[type="file"]::file-selector-button,
.admin-form input[type="file"]::file-selector-button {
    margin-right: 11px;
    padding: 7px 13px;
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--areia-2);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--texto);
    cursor: pointer;
}

.form-section {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 28px;
    align-items: start;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--gutter) 72px;
}
.form-section.single, .form-section.wide { grid-template-columns: minmax(0, 1fr); }
.form-section > form:not(:has(.table-card)) {
    padding: 28px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.form-section .contact-card { align-self: start; }
.form-section .contact-card strong { display: block; margin-top: 12px; font-size: 15px; }
.form-section .button { align-self: flex-start; }
.form-section .form-grid { align-items: start; }
.form-section .table-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 14px; }
.form-section .table-card > .eyebrow { margin-bottom: 0; }
.form-section .table-card h2 { font-size: 19px; }
.form-section .table-card .button { align-self: flex-start; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full, .form-grid .wide { grid-column: 1 / -1; }
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.three-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.four-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.checkbox-line {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--texto-suave) !important;
    cursor: pointer;
}
.checkbox-line input { width: 16px !important; height: 16px; flex: none; accent-color: var(--terracota); padding: 0 !important; }

/* ---------- 10. AUTH ---------- */
.auth-body { background: var(--areia); }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 48px clamp(28px, 6vw, 84px);
    background: var(--branco);
}
.auth-panel .brand { margin-bottom: 6px; }
.auth-panel h1 { font-size: 36px; }
.auth-panel .premium-form, .auth-panel .button { max-width: 400px; }
.auth-links { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--texto-suave); }
.auth-links a { color: var(--terracota); }
.auth-links a:hover { text-decoration: underline; }

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 48px clamp(28px, 5vw, 64px);
    background: linear-gradient(180deg, rgba(31,29,27,.18) 0%, rgba(31,29,27,.72) 78%),
                url('../img/hero-house-premium.png') center/cover no-repeat, var(--areia-2);
}
.auth-aside h1, .auth-aside p { color: #fff; }
.auth-aside h1 { font-size: 34px; max-width: 16ch; }
.auth-aside p { font-size: 15px; max-width: 46ch; opacity: .88; }
.auth-aside .eyebrow { color: #f0c8b2; }

/* ---------- 11. PAINÉIS ---------- */
.panel-body { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; background: var(--areia); }

.panel-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 22px 16px;
    border-right: var(--fio);
    background: var(--branco);
    overflow-y: auto;
}

.panel-sidebar .brand, .admin-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 18px; border-bottom: var(--fio); }
.admin-brand span:last-child { display: flex; flex-direction: column; gap: 3px; }
.admin-brand strong { font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.admin-brand small { font-size: 8px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota); }
.admin-sidebar .brand-logo, .panel-sidebar .brand-logo { width: 34px; }

.panel-nav { display: flex; flex-direction: column; gap: 2px; }
.panel-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--texto);
    transition: background var(--transicao), color var(--transicao);
}
.panel-nav a:hover { background: var(--areia-2); }
.panel-nav a.is-active { background: var(--terracota-suave); color: var(--terracota); font-weight: 500; }
.panel-nav a:last-child { margin-top: 12px; padding-top: 16px; border-top: var(--fio); border-radius: 0; }
.nav-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 9px; font-weight: 700; color: inherit; opacity: .8; }
.panel-nav a.is-active .nav-icon { opacity: 1; }

.sidebar-promo {
    margin-top: auto;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--areia-2);
    overflow: hidden;
}
.sidebar-promo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sidebar-promo .corpo { padding: 14px; }
.sidebar-promo strong { display: block; font-size: 13px; margin-bottom: 4px; }
.sidebar-promo p { font-size: 11.5px; line-height: 1.5; margin-bottom: 10px; }

.panel-main { display: flex; flex-direction: column; padding: 24px clamp(20px, 2.6vw, 36px) 56px; min-width: 0; }

.panel-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: var(--fio);
}
.panel-topbar .eyebrow { margin-bottom: 6px; }
.panel-topbar h1 { font-size: 32px; }
.panel-topbar p { font-size: 13.5px; }

.user-chip, .admin-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: var(--fio);
    border-radius: var(--raio-pill);
    background: var(--branco);
    font-size: 13px;
    color: var(--tinta);
}
.admin-user > span:first-child, .user-chip-avatar {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--terracota);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

.admin-top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-search { display: flex; align-items: center; gap: 6px; }
.admin-search input {
    width: 260px;
    padding: 9px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pill);
    background: var(--branco);
    font-family: inherit;
    font-size: 13px;
    color: var(--tinta);
    outline: none;
}
.admin-search input:focus { border-color: var(--terracota); }
.admin-search button {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    background: var(--branco);
    color: var(--texto-suave);
    cursor: pointer;
    transition: all var(--transicao);
}
.admin-search button:hover { border-color: var(--terracota); color: var(--terracota); }
.admin-date { font-size: 12.5px; color: var(--texto-fraco); }

.admin-module-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.admin-module-strip a { padding: 8px 15px; border: var(--fio); border-radius: var(--raio-pill); background: var(--branco); font-size: 12.5px; color: var(--texto); }
.admin-module-strip a:hover { border-color: var(--terracota); color: var(--terracota); }

.table-card {
    padding: 24px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
    margin-bottom: 20px;
}
.table-card h2 { font-size: 20px; margin-bottom: 14px; }
.table-card > p { font-size: 13.5px; }

.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.inline-search { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-search input, .inline-search select {
    padding: 9px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: var(--branco);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tinta);
    outline: none;
}
.inline-search input:focus { border-color: var(--terracota); }

.download-project { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: var(--fio); }
.download-project:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.download-project img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-medio); }
.download-project h2 { font-size: 22px; margin-bottom: 12px; }

.download-list { display: flex; flex-direction: column; gap: 8px; }
.download-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 44px 13px 16px;
    border: var(--fio);
    border-radius: 8px;
    background: var(--branco);
    font-size: 13.5px;
    transition: all var(--transicao);
}
.download-item:hover { border-color: var(--terracota); background: var(--terracota-suave); }
.download-item::after {
    content: "";
    position: absolute;
    right: 18px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -6px;
    border: solid var(--terracota);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.download-item span { flex: none; min-width: 42px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--terracota); }
.download-item strong { flex: 1; text-align: right; font-weight: 500; }

.download-term-modal {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: 22px;
    background: rgba(31,29,27,.5);
    backdrop-filter: blur(4px);
}
.download-term-modal[hidden] { display: none; }
.download-term-box {
    width: min(540px, 100%);
    padding: 30px;
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-alta);
}
.download-term-box h2 { font-size: 24px; margin-bottom: 10px; }
.download-term-box p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.download-term-box .hero-actions { margin-top: 20px; }

.settings-preview { margin-top: 10px; }
.settings-preview img { max-width: 250px; border: var(--fio); border-radius: var(--raio-medio); }

/* ---------- 12. DASHBOARD ADMIN ---------- */
.kpi-grid, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }

.kpi-card, .stat-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.kpi-card .kpi-ico, .stat-grid .kpi-ico {
    position: absolute;
    top: 18px; right: 18px;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--terracota-suave);
    color: var(--terracota);
}
.kpi-card.kpi-atencao .kpi-ico { background: #fdf5e3; color: #a2740f; }
.kpi-rotulo, .stat-grid span { font-size: 12.5px; color: var(--texto-suave); padding-right: 46px; }
.kpi-valor, .stat-grid strong { font-family: var(--fonte-display); font-size: 30px; font-weight: 500; color: var(--tinta); line-height: 1.15; }
.kpi-sub { font-size: 12px; color: var(--texto-fraco); }
.kpi-sub .sobe { color: var(--verde); font-weight: 500; }
.kpi-sub .desce { color: var(--vermelho); font-weight: 500; }

.dash-duas-colunas { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin-bottom: 20px; }

.dash-card {
    padding: 22px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    box-shadow: var(--sombra-card);
}
.dash-card-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dash-card-cabecalho h2 { font-size: 18px; margin-bottom: 3px; }
.dash-card-cabecalho p { font-size: 12.5px; }

.grafico-barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 12px; height: 200px; padding-top: 18px; }
.grafico-coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.grafico-valor { font-size: 11px; color: var(--texto-fraco); }
.grafico-barra {
    width: 100%;
    max-width: 74px;
    margin: 0 auto;
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--terracota) 0%, #e0a98e 100%);
    transition: filter var(--transicao);
}
.grafico-coluna:hover .grafico-barra { filter: brightness(1.06); }
.grafico-coluna:hover .grafico-valor { color: var(--terracota); }
.grafico-mes { font-size: 11px; color: var(--texto-fraco); }

.status-lista { display: flex; flex-direction: column; gap: 16px; }
.status-item { display: flex; flex-direction: column; gap: 7px; }
.status-info { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texto-suave); }
.status-info strong { margin-left: auto; color: var(--tinta); }
.status-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-ponto.pago { background: var(--verde); }
.status-ponto.pendente { background: var(--ambar); }
.status-ponto.outro { background: var(--texto-fraco); }
.status-trilha { height: 6px; border-radius: 3px; background: var(--areia-3); overflow: hidden; }
.status-progresso { height: 100%; border-radius: 3px; }
.status-progresso.pago { background: var(--verde); }
.status-progresso.pendente { background: var(--ambar); }
.status-progresso.outro { background: var(--texto-fraco); }

.acoes-rapidas { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: var(--fio); }
.acoes-rapidas h3 { font-size: 13.5px; margin-bottom: 6px; }
.acoes-rapidas a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: var(--fio);
    border-radius: 8px;
    background: var(--branco);
    font-size: 13.5px;
    color: var(--texto);
    transition: all var(--transicao);
}
.acoes-rapidas a:hover { border-color: var(--terracota); background: var(--terracota-suave); color: var(--terracota); }
.acoes-rapidas a span { margin-left: auto; color: var(--terracota); }

/* Complementos no admin */
.addon-admin-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.addon-admin-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: var(--fio); border-radius: 8px; background: var(--branco); font-size: 13.5px; }
.addon-admin-nome { flex: 1; }
.addon-pdf-ok { font-size: 11.5px; color: var(--verde); }
.addon-pdf-falta { font-size: 11.5px; color: var(--texto-fraco); }
.addon-add-pdf { font-size: 12px; }
.addon-admin-preco { font-weight: 600; color: var(--terracota); }
.addon-admin-excluir {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border: var(--fio); border-radius: 50%;
    background: var(--branco); color: var(--texto-fraco);
    cursor: pointer; font-size: 14px; line-height: 1;
    transition: all var(--transicao);
}
.addon-admin-excluir:hover { border-color: var(--vermelho); color: var(--vermelho); }
.addon-admin-add h3 { font-size: 13px; margin-bottom: 10px; }
.addon-add-form { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr auto; gap: 10px; align-items: end; }

.admin-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; border: var(--fio); }
.img-preview-atual { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.img-preview-atual img { width: 100px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-medio); border: var(--fio); }
.img-preview-atual span { font-size: 12px; color: var(--texto-fraco); }
.img-preview-novo { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 9px; }
.img-preview-novo img { width: 84px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-medio); border: 1px solid var(--terracota); }
.galeria-preview { display: flex; gap: 9px; flex-wrap: wrap; }
.galeria-preview img { width: 84px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-medio); }

.galeria-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 11px; }
.galeria-item { position: relative; border: var(--fio); border-radius: var(--raio-medio); overflow: hidden; background: var(--areia-2); }
.galeria-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.galeria-acoes {
    position: absolute; inset: auto 0 0 0;
    display: flex; gap: 6px; padding: 8px;
    background: linear-gradient(to top, rgba(31,29,27,.82), transparent);
    opacity: 0; transition: opacity var(--transicao);
}
.galeria-item:hover .galeria-acoes { opacity: 1; }
.ga-btn {
    flex: 1; padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 6px;
    background: rgba(255,255,255,.92);
    color: var(--tinta); font-size: 11px; cursor: pointer;
    transition: all var(--transicao);
}
.ga-btn:hover { background: #fff; }
.ga-excluir:hover { color: var(--vermelho); }
.ga-trocar:hover { color: var(--terracota); }
.galeria-item.ga-carregando { pointer-events: none; }
.galeria-item.ga-carregando img { opacity: .35; }
.galeria-item.ga-carregando::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border: 2px solid var(--borda-forte); border-top-color: var(--terracota);
    border-radius: 50%; animation: ga-spin .8s linear infinite;
}
@keyframes ga-spin { to { transform: rotate(360deg); } }
.video-preview-atual { margin-top: 9px; }
.video-preview-atual video { width: 100%; max-width: 320px; border-radius: var(--raio-medio); border: var(--fio); }

/* ---------- 13. TABELAS ---------- */
.responsive-table { width: 100%; overflow-x: auto; }
.responsive-table table { width: 100%; border-collapse: collapse; min-width: 620px; }
.responsive-table th {
    padding: 11px 12px;
    border-bottom: var(--fio);
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    white-space: nowrap;
}
.responsive-table td { padding: 13px 12px; border-bottom: var(--fio); font-size: 13.5px; color: var(--texto-suave); vertical-align: middle; }
.responsive-table td strong { color: var(--tinta); }
.responsive-table tbody tr { transition: background var(--transicao); }
.responsive-table tbody tr:hover { background: var(--areia); }
.responsive-table tbody tr:last-child td { border-bottom: 0; }
.responsive-table small { display: block; font-size: 11.5px; color: var(--texto-fraco); }

/* ---------- 14. AVALIAÇÕES EM VÍDEO ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review-card {
    display: flex; flex-direction: column;
    border: var(--fio); border-radius: var(--raio-grande);
    background: var(--branco); overflow: hidden;
    transition: box-shadow var(--transicao), transform var(--transicao);
}
.review-card:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); }

.review-video { position: relative; display: block; width: 100%; aspect-ratio: 16/10; padding: 0; border: 0; background: var(--areia-2); cursor: pointer; overflow: hidden; }
.review-video:disabled { cursor: default; }
.review-video img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.3,.7,.4,1); }
.review-card:hover .review-video:not(:disabled) img { transform: scale(1.04); }

.review-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    display: grid; place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: var(--sombra-card);
    color: var(--terracota);
    transition: all var(--transicao);
}
.review-play .ic { width: 17px; height: 17px; }
.review-card:hover .review-play { background: var(--terracota); color: #fff; }

.review-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }
.review-stars { display: flex; gap: 2px; color: var(--ouro); }
.review-stars .ic { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
.review-quote { font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.review-author { display: flex; flex-direction: column; gap: 1px; margin-top: auto; }
.review-author strong { font-size: 13px; }
.review-author span { font-size: 11.5px; color: var(--texto-fraco); }

.video-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(31,29,27,.72); backdrop-filter: blur(6px); }
.video-modal-content { position: relative; width: min(940px, 100%); border-radius: var(--raio-grande); background: #000; overflow: hidden; box-shadow: var(--sombra-alta); }
.video-modal-frame { aspect-ratio: 16/9; }
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-close {
    position: absolute; top: -42px; right: 0;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--tinta); font-size: 18px; line-height: 1; cursor: pointer;
}
.video-modal-close:hover { background: #fff; }

/* ---------- 15. UTILIDADES E RESPONSIVO ---------- */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100vh; padding: 36px; text-align: center; }
.error-page .brand { margin-bottom: 8px; }
.error-page .brand-logo { width: 56px; }
.error-page h1 { font-size: clamp(34px, 5vw, 60px); }
.error-page p { font-size: 15px; max-width: 46ch; }

:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1240px) {
    :root { --gutter: 24px; }
    .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .project-grid.linha-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .busca-barra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .busca-barra > .button { grid-column: 1 / -1; margin: 8px 0 0; }
    .busca-campo { border-right: 0; border-bottom: var(--fio); }
    .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-detail { grid-template-columns: minmax(0, 1fr) 320px; }
    .project-detail .gallery { grid-column: 1 / -1; }
    .trust-band { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
    .site-nav { display: none; }
    .header-acoes .header-link { display: none; }
    .menu-toggle, .icon-button.menu-toggle { display: flex; }
    .site-nav[data-menu] {
        position: fixed;
        inset: 76px 0 auto 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px var(--gutter) 20px;
        background: var(--branco);
        border-bottom: var(--fio);
        box-shadow: var(--sombra-alta);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transicao), transform var(--transicao);
    }
    .site-nav[data-menu] a { padding: 14px 0; border-bottom: var(--fio); font-size: 15px; }
    .site-nav[data-menu].is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .hero-inner { grid-template-columns: minmax(0, 1fr); }
    .hero-texto { max-width: none; }
    .hero-foto::after { display: none; }
    .catalogo-topo { grid-template-columns: minmax(0, 1fr); }
    .catalog-shell { grid-template-columns: minmax(0, 1fr); }
    .filter-panel { position: static; }
    .project-detail, .checkout-shell, .buy-shell, .detail-grid, .form-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .buy-box, .buy-resumo { position: static; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .benefit-grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefit-card { border-right: 0; border-bottom: var(--fio); }
    .benefit-card:nth-child(odd) { border-right: var(--fio); }
    .dash-duas-colunas { grid-template-columns: minmax(0, 1fr); }
    .auth-shell { grid-template-columns: minmax(0, 1fr); }
    .auth-aside { display: none; }
    .visualize-grid, .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .addon-add-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .panel-body { grid-template-columns: minmax(0, 1fr); }
    .panel-sidebar { position: static; height: auto; border-right: 0; border-bottom: var(--fio); }
    .panel-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .panel-nav a { padding: 8px 12px; border: var(--fio); border-radius: var(--raio-pill); font-size: 12.5px; }
    .panel-nav a:last-child { margin-top: 0; padding-top: 8px; border-radius: var(--raio-pill); }
    .sidebar-promo { display: none; }
    .grafico-valor { display: none; }
}

@media (max-width: 680px) {
    :root { --gutter: 18px; }
    .section { padding: 48px var(--gutter); }
    .header-inner { height: 66px; }
    .site-nav[data-menu] { inset-block-start: 66px; }
    .hero-inner { padding-top: 36px; }
    .hero-selo { position: static; margin-top: 14px; }
    .busca-barra { grid-template-columns: minmax(0, 1fr); }
    .categorias, .project-grid, .project-grid.linha-5,
    .benefit-grid, .steps, .depoimentos, .visualize-grid, .reviews-grid,
    .trust-band, .two-cols, .three-cols, .four-cols, .form-grid,
    .footer-grid, .addon-add-form, .checklist, .ficha-rapida, .kpi-grid, .stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .benefit-card, .benefit-card:nth-child(odd) { border-right: 0; }
    .section-heading.split { flex-direction: column; align-items: flex-start; gap: 14px; }
    .download-project { grid-template-columns: minmax(0, 1fr); }
    .admin-search input { width: 100%; }
    .admin-top-actions { width: 100%; }
    .share-actions { flex-direction: column; }
    .contact-card { padding: 32px 22px; }
    .catalog-meta { flex-direction: column; align-items: flex-start; }
}

@media print {
    body { background: #fff; }
    .site-header, .site-footer, .panel-sidebar, .share-actions, .button { display: none !important; }
}

/* ---------- 16. AJUSTES DE COMPOSIÇÃO ---------- */

/* Hero: foto maior sangrando à direita, texto com mais respiro */
.hero { overflow: hidden; }
.hero-inner {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    padding-bottom: 54px;
    gap: 48px;
}
.hero-texto { max-width: 100%; }
.hero h1 { max-width: 15ch; font-size: clamp(36px, 4.1vw, 58px); }
.hero-sub { max-width: 46ch; }

.hero-foto { margin-right: calc((100vw - var(--largura)) / -2 - var(--gutter)); }
.hero-foto img { aspect-ratio: 16 / 10.5; border-radius: var(--raio-grande) 0 0 var(--raio-grande); }
.hero-foto::after { border-radius: var(--raio-grande) 0 0 var(--raio-grande); }
.hero-selo { top: 26px; right: 34px; }

/* Grades que se ajustam à quantidade real de itens */
.categorias { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.categoria-card img { aspect-ratio: 16 / 11; }
.project-grid.linha-5 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

/* Depoimentos */
.depoimentos { grid-template-columns: minmax(220px, .85fr) repeat(3, minmax(0, 1fr)) minmax(170px, .7fr); gap: 16px; }
.depoimentos-titulo h2 { font-size: clamp(24px, 2.2vw, 32px); }
.depoimento-card p { font-size: 13.5px; }
.depoimento-autor { align-items: center; }
.depoimento-autor > div { min-width: 0; }
.depoimento-autor .ver-video { display: block; color: var(--terracota); font-size: 11px; }

.depoimento-play {
    position: relative;
    width: 42px; height: 42px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--areia-2);
    cursor: pointer;
    aspect-ratio: auto;
}
.depoimento-play img { width: 100%; height: 100%; object-fit: cover; }
.depoimento-play .review-play {
    width: 22px; height: 22px;
    background: rgba(255,255,255,.9);
    box-shadow: none;
}
.depoimento-play .review-play .ic { width: 11px; height: 11px; }
.depoimento-play:hover .review-play { background: var(--terracota); color: #fff; }

.reviews-section .section-heading { margin-bottom: 26px; }

@media (max-width: 1240px) {
    .hero-foto { margin-right: calc(var(--gutter) * -1); }
    .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .depoimentos-titulo { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .hero-foto { margin-right: 0; }
    .hero-foto img, .hero-foto::after { border-radius: var(--raio-grande); }
}

/* Categorias mantêm largura de cartão mesmo com poucas categorias */
.categorias { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.categoria-card img { aspect-ratio: 16 / 10; }

/* Fusão da foto do hero com o fundo areia */
.hero-foto::after {
    background: linear-gradient(96deg, var(--areia) 0%, rgba(250,247,243,.92) 8%, rgba(250,247,243,.35) 26%, transparent 52%);
}
.hero-video .play { box-shadow: 0 1px 3px rgba(34,32,30,.10); }

/* Abas: sem JS todos os painéis continuam visíveis */
.aba-painel[hidden] { display: none; }
.abas-secao { padding-top: 0; }
.compra-selo { justify-content: center; }

/* Catálogo: quatro colunas em telas largas, como na referência */
.catalog-shell .project-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }

/* Página do projeto: galeria com mais presença */
.project-detail { grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr) 316px; }
.gallery-main { aspect-ratio: 4 / 3.05; }
.gallery-thumb { flex-basis: 86px; height: 64px; }

@media (max-width: 1240px) {
    .project-detail { grid-template-columns: minmax(0, 1fr) 316px; }
}
.sidebar-promo .corpo { display: block; }
.sidebar-promo .link-seta { font-size: 12px; }

/* Algarismos alinhados na fonte de display */
h1, h2, .kpi-valor, .stat-grid strong, .project-price strong, .addons-total strong,
.buy-total strong, .nota-geral .valor, .checkout-card > strong, .resumo-linha.total,
.catalog-meta strong, .responsive-table td, .spec-list dd {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1;
}

/* Formas de pagamento continuam em linha dentro do checkout */
.buy-form .payment-choice label {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 400;
    color: var(--texto);
}
.buy-form .payment-choice > span { font-size: 12px; font-weight: 500; color: var(--texto); }
.buy-form .addon-item { flex-direction: row; align-items: center; }

@media (max-width: 680px) {
    /* Setas da galeria ficam dentro da área visível no celular */
    .carousel-nav.prev { left: 4px; }
    .carousel-nav.next { right: 4px; }
    .gallery-strip { padding-inline: 2px; }
}

/* ---------- 17. RESPONSIVO FINAL (vem depois dos ajustes acima) ---------- */
@media (max-width: 1240px) {
    .hero-foto { margin-right: calc(var(--gutter) * -1); }
    .project-detail { grid-template-columns: minmax(0, 1fr) 316px; }
    .project-detail .gallery { grid-column: 1 / -1; }
    .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .depoimentos-titulo { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 46px; }
    .hero-texto { max-width: none; }
    .hero h1 { max-width: 100%; }
    .hero-foto { margin-right: 0; }
    .hero-foto img, .hero-foto::after { border-radius: var(--raio-grande); }
    .hero-foto::after { display: none; }
    .project-detail { grid-template-columns: minmax(0, 1fr); }
    .catalog-shell .project-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 680px) {
    .header-inner { gap: 12px; }
    .brand-logo { width: 34px; }
    .brand-nome strong { font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
    .brand-nome span { font-size: 7px; letter-spacing: .16em; }
    .header-acoes { gap: 10px; }
    .header-acoes .button { padding: 9px 16px; font-size: 13px; }

    .hero-inner { padding-top: 32px; }
    .hero h1 { font-size: clamp(30px, 8.6vw, 38px); }
    .hero-sub { font-size: 15px; }
    .hero-acoes { flex-direction: column; align-items: stretch; gap: 14px; }
    .hero-acoes .button { width: 100%; }
    .hero-video { justify-content: center; }
    .hero-selo { position: static; margin-top: 14px; }
    .eyebrow { font-size: 10.5px; letter-spacing: .12em; }

    .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-grid, .project-grid.linha-5, .catalog-shell .project-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .project-card-body { padding: 13px; gap: 6px; }
    .project-card-body h3 { font-size: 16px; }
    .project-card-rodape { flex-direction: column; align-items: stretch; }
    .project-card-rodape .icon-btn { width: 100%; height: 36px; }

    .depoimentos { grid-template-columns: minmax(0, 1fr); }
    .visualize-grid, .reviews-grid, .benefit-grid, .steps, .trust-band, .ficha-rapida, .checklist { grid-template-columns: minmax(0, 1fr); }
    .aviso-card .itens { flex-direction: column; gap: 12px; }
    .buy-box { padding: 18px; }
    .abas-nav { gap: 18px; }
}

@media (max-width: 400px) {
    .categorias, .project-grid, .project-grid.linha-5, .catalog-shell .project-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Coluna lateral dos painéis com fundo contínuo em páginas longas */
.panel-body { background: linear-gradient(to right, var(--branco) 0 258px, var(--areia) 258px 100%); }
.admin-form h3, .table-card h3 { font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--tinta); margin-top: 6px; }
.buy-inclui h3, .buy-passos h3, .addons-titulo, .acoes-rapidas h3,
.project-video h3, .addon-admin-add h3, .filtro-grupo > h4 { margin-top: 0; }

@media (max-width: 860px) {
    .panel-body { background: var(--areia); }
}

/* Aceites do checkout */
.aceites { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: var(--fio); border-radius: var(--raio-medio); background: var(--areia); }
.aceites .checkbox-line { align-items: flex-start; }
.aceites .checkbox-line input { margin-top: 2px; }
.aceite-nota { font-size: 12px; line-height: 1.5; color: var(--texto-fraco); padding-left: 26px; }

/* Termo de licença pendente na área de downloads */
.licenca-pendente {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--terracota-linha);
    border-radius: var(--raio-medio);
    background: var(--terracota-suave);
}
.licenca-cabecalho { display: flex; align-items: flex-start; gap: 11px; }
.licenca-cabecalho svg { color: var(--terracota); margin-top: 2px; }
.licenca-cabecalho strong { display: block; font-size: 14.5px; }
.licenca-cabecalho span { font-size: 12.5px; color: var(--texto-suave); }
.licenca-pendente .term-content { max-height: 260px; background: var(--branco); font-size: 13px; }
.licenca-pendente form { display: flex; flex-direction: column; gap: 12px; }
.licenca-pendente .button { align-self: flex-start; }
.licenca-ok { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; color: var(--verde); }
.licenca-ok svg { color: var(--verde); }

/* Páginas legais: termos em blocos expansíveis */
.documentos-legais { display: flex; flex-direction: column; gap: 14px; max-width: 940px; }
.documento-legal { border: var(--fio); border-radius: var(--raio-grande); background: var(--branco); overflow: hidden; }
.documento-legal > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
}
.documento-legal > summary::-webkit-details-marker { display: none; }
.documento-legal summary strong { display: block; font-size: 16px; margin-bottom: 3px; }
.documento-legal summary small { font-size: 12.5px; color: var(--texto-suave); }
.documento-seta { color: var(--terracota); transition: transform var(--transicao); }
.documento-legal[open] .documento-seta { transform: rotate(180deg); }
.documento-legal .term-content { margin: 0 24px 24px; max-height: 460px; }

/* Formulários longos (personalizado e suporte) */
.form-titulo {
    font-family: var(--fonte);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--terracota);
    margin-top: 8px;
    padding-bottom: 10px;
    border-bottom: var(--fio);
}
.form-section .premium-form > .form-titulo:first-child { margin-top: 0; }

.passos-lista { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; padding-left: 18px; }
.passos-lista li { font-size: 13.5px; color: var(--texto-suave); }
.passos-lista strong { display: block; font-size: 14px; }
.passos-lista span { font-size: 12.5px; }

/* Ações em linha nas tabelas do admin */
.acoes-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acoes-linha form { margin: 0; }
.detail-grid.painel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
@media (max-width: 1024px) { .detail-grid.painel { grid-template-columns: minmax(0, 1fr); } }

/* Pré-visualização da planta humanizada no admin */
.humanizada-preview {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border: var(--fio);
    border-radius: var(--raio-medio);
    margin: 10px 0 12px;
}

/* Planta humanizada na página do projeto */
.planta-humanizada {
    margin-top: 18px;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
}
.planta-humanizada figcaption { padding: 18px 20px 14px; }
.planta-humanizada figcaption .eyebrow { margin-bottom: 6px; }
.planta-humanizada figcaption h3 { font-family: var(--fonte-display); font-weight: 500; font-size: 20px; }
.planta-humanizada img { width: 100%; height: auto; display: block; background: var(--areia-2); }

.ajuda-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Identificação da empresa no rodapé */
.footer-empresa {
    max-width: var(--largura);
    margin: 0 auto;
    padding: 20px var(--gutter) 0;
    border-top: var(--fio);
}
.footer-empresa p { font-size: 12.5px; line-height: 1.7; color: var(--texto-suave); }
.footer-empresa strong { color: var(--texto); font-weight: 600; }
.footer-empresa a { color: var(--terracota); }
.site-footer .footer-base { border-top: 0; padding-top: 14px; }

/* Planta humanizada: ocupa a largura da galeria + informações */
.project-detail .planta-humanizada { grid-column: 1 / 3; margin-top: 4px; }
.planta-humanizada figcaption { padding: 20px 24px 16px; border-bottom: var(--fio); }
.planta-humanizada figcaption h3 { font-size: 22px; }

@media (max-width: 1240px) {
    .project-detail .planta-humanizada { grid-column: 1 / -1; }
}

/* Marca do rodapé não quebra em duas linhas */
.footer-brand .brand-nome strong { font-size: 14px; letter-spacing: .13em; white-space: nowrap; }
.footer-brand .brand-nome span { font-size: 7.5px; }

/* Marca na lateral dos painéis não quebra em duas linhas */
.admin-brand strong, .panel-sidebar .brand-nome strong { font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; }
.admin-brand small, .panel-sidebar .brand-nome span { font-size: 7.5px; letter-spacing: .16em; }
.admin-sidebar .brand-logo, .panel-sidebar .brand-logo { width: 30px; }

/* ---------- 18. AJUSTES DESTA VERSÃO ---------- */

/* Faixa de destaque do projeto personalizado (home) */
.faixa-personalizado {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
    box-shadow: var(--sombra-card);
}
.faixa-foto { position: relative; min-height: 240px; }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; }
.faixa-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, var(--branco) 100%);
}
.faixa-texto { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px 44px; }
.faixa-texto h2 { font-size: clamp(24px, 2.4vw, 34px); }
.faixa-texto p { font-size: 15.5px; max-width: 54ch; }
.faixa-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 10px; }

/* Espaço abaixo da galeria quando não há planta humanizada */
.project-detail .entrega-resumo {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 0;
    border: var(--fio);
    border-radius: var(--raio-grande);
    background: var(--branco);
    overflow: hidden;
}
.entrega-texto { padding: 26px 28px; }
.entrega-texto h3 { font-family: var(--fonte-display); font-weight: 500; font-size: 21px; margin-bottom: 16px; }
.entrega-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.entrega-itens span { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--texto); }
.entrega-itens svg { color: var(--terracota); }

.entrega-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 28px;
    background: var(--areia-2);
    border-left: var(--fio);
}
.entrega-cta svg { color: var(--terracota); margin-bottom: 4px; }
.entrega-cta strong { font-size: 15px; line-height: 1.3; }
.entrega-cta p { font-size: 13px; line-height: 1.55; margin-bottom: 8px; }

/* Aviso de migração pendente no painel */
.aviso-migracao {
    margin-bottom: 22px;
    padding: 20px 24px;
    border: 1px solid #f1d9b8;
    border-left: 3px solid var(--ambar);
    border-radius: var(--raio-grande);
    background: #fdf8ee;
}
.aviso-migracao-topo { display: flex; align-items: flex-start; gap: 12px; }
.aviso-migracao-topo svg { color: #a2740f; margin-top: 2px; flex: none; }
/* Só o título do aviso vira bloco — negrito dentro de frase continua na linha */
.aviso-migracao-topo > div > strong { display: block; font-size: 15px; margin-bottom: 4px; }
.aviso-migracao p { font-size: 13.5px; line-height: 1.6; color: #7d6420; }
.aviso-migracao p strong,
.aviso-migracao-como strong { display: inline; font-size: inherit; margin: 0; }
.aviso-migracao-como { margin-top: 14px; }
.aviso-migracao-comando {
    display: block;
    margin-top: 10px;
    padding: 11px 14px;
    border: 1px solid #eadcc2;
    border-radius: var(--raio-medio);
    background: #fffdf8;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    color: #6b5518;
    overflow-x: auto;
}
.aviso-migracao-itens { margin-top: 12px; font-size: 12px; color: #8b7433; }
.aviso-migracao code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* Aviso de Mercado Pago sem credenciais (mesma caixa, acento terracota) */
.aviso-pagamento {
    border-color: #f0d9cf;
    border-left-color: var(--terracota);
    background: var(--terracota-suave);
}
.aviso-pagamento .aviso-migracao-topo svg { color: var(--terracota-forte); }
.aviso-pagamento p { color: #7c4a34; }
.aviso-pagamento .aviso-migracao-comando {
    border-color: #eccfc1;
    background: #fffaf7;
    color: #8a4c31;
}
.aviso-pagamento .aviso-migracao-itens { color: #a06a51; }

/* Modo demonstração na tela de pagamento */
.aviso-demo {
    margin: 22px 0 6px;
    padding: 20px 22px;
    border: 1px solid #f0d9cf;
    border-left: 3px solid var(--terracota);
    border-radius: var(--raio-grande);
    background: var(--terracota-suave);
}
.aviso-demo-topo { display: flex; align-items: flex-start; gap: 12px; }
.aviso-demo-topo svg { color: var(--terracota-forte); margin-top: 2px; flex: none; }
/* Só o título vira bloco; negrito no meio da frase continua na linha */
.aviso-demo-topo > div > strong { display: block; font-size: 15px; margin-bottom: 5px; color: var(--tinta); }
.aviso-demo p { font-size: 13.5px; line-height: 1.6; color: #7c4a34; }
.aviso-demo p strong,
.aviso-demo-como strong { display: inline; font-size: inherit; margin: 0; color: inherit; }
.aviso-demo-como { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: #7c4a34; }
.aviso-demo .aviso-migracao-comando {
    border-color: #eccfc1;
    background: #fffaf7;
    color: #8a4c31;
}

/* Lista dos meios de pagamento aceitos */
.meios-pagamento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.meios-pagamento li {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: var(--fio);
    border-radius: var(--raio-medio);
    background: var(--branco);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta);
}
.meios-pagamento li svg { color: var(--terracota); flex: none; }
.meios-pagamento li small {
    width: 100%;
    padding-left: 27px;
    font-size: 12px;
    font-weight: 400;
    color: var(--texto-suave);
}

/* Código PIX de teste fica recolhido para não confundir com cobrança real */
.demo-pix { margin-top: 18px; }
.demo-pix > summary {
    cursor: pointer;
    padding: 10px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--texto-suave);
}
.demo-pix > summary:hover { color: var(--terracota); }
.demo-pix[open] > summary { margin-bottom: 8px; }

@media (max-width: 1240px) {
    .project-detail .entrega-resumo { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .faixa-personalizado { grid-template-columns: minmax(0, 1fr); }
    .faixa-foto { min-height: 180px; }
    .faixa-foto::after { background: linear-gradient(180deg, transparent 45%, var(--branco) 100%); }
    .faixa-texto { padding: 28px 24px; }
    .project-detail .entrega-resumo { grid-template-columns: minmax(0, 1fr); }
    .entrega-cta { border-left: 0; border-top: var(--fio); }
}

@media (max-width: 680px) {
    .entrega-itens { grid-template-columns: minmax(0, 1fr); }
    .faixa-acoes { flex-direction: column; align-items: stretch; }
    .faixa-acoes .button { width: 100%; }
}

/* O cartão de compra ocupa as duas linhas: a humanizada sobe e o vão some */
.project-detail > .buy-box { grid-row: 1 / span 2; }
.project-detail > .planta-humanizada,
.project-detail > .entrega-resumo { grid-row: 2; align-self: start; }

@media (max-width: 1240px) {
    .project-detail > .buy-box { grid-row: auto; }
    .project-detail > .planta-humanizada,
    .project-detail > .entrega-resumo { grid-row: auto; }
}

/* Retomar o pagamento no Mercado Pago */
.retomar-pagamento {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid var(--terracota-linha);
    border-radius: var(--raio-grande);
    background: var(--terracota-suave);
}
.retomar-pagamento > svg { color: var(--terracota); }
.retomar-pagamento div { flex: 1; min-width: 220px; }
.retomar-pagamento strong { display: block; font-size: 15px; margin-bottom: 3px; }
.retomar-pagamento p { font-size: 13.5px; line-height: 1.55; }

/* Campo de senha com botão de mostrar */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px !important; }
.ver-senha {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-fraco);
    cursor: pointer;
    transition: color var(--transicao), background var(--transicao);
}
.ver-senha:hover, .ver-senha.ativo { color: var(--terracota); background: var(--terracota-suave); }

/* E-mail travado quando o cliente já está logado */
.buy-form input[readonly] { background: var(--areia-2); color: var(--texto-suave); cursor: not-allowed; }
.buy-form .campo-dica a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   TELA MERCADO PAGO (admin)
   ========================================================================== */
.mp-bloco { margin-bottom: 22px; }
.mp-bloco > h2 { margin-bottom: 6px; }

.mp-status { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mp-status li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: var(--fio);
    border-left: 3px solid var(--borda-forte);
    border-radius: var(--raio-medio);
    background: var(--branco);
}
.mp-status li.ok    { border-left-color: var(--verde); }
.mp-status li.aviso { border-left-color: var(--ambar); }
.mp-status li.falta { border-left-color: var(--vermelho); }
.mp-marca { display: grid; place-items: center; flex: none; margin-top: 1px; }
.mp-status li.ok    .mp-marca { color: var(--verde); }
.mp-status li.aviso .mp-marca { color: var(--ambar); }
.mp-status li.falta .mp-marca { color: var(--vermelho); }
.mp-status strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.mp-status p { font-size: 13.5px; line-height: 1.6; color: var(--texto-suave); }
.mp-status code, .mp-passos code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--areia-2);
    color: var(--tinta);
}

.mp-form-teste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: var(--fio);
}
.mp-form-teste small { font-size: 12.5px; color: var(--texto-suave); }

/* Resultado do teste */
.mp-resultado { border-left: 3px solid var(--borda-forte); }
.mp-resultado.mp-ok   { border-left-color: var(--verde); }
.mp-resultado.mp-erro { border-left-color: var(--vermelho); }
.mp-resultado-topo { display: flex; align-items: flex-start; gap: 12px; }
.mp-resultado-topo h2 { margin: 0 0 4px; font-size: 18px; }
.mp-resultado-topo p { font-size: 13.5px; line-height: 1.6; color: var(--texto-suave); }
.mp-ok   .mp-resultado-topo .mp-marca { color: var(--verde); }
.mp-erro .mp-resultado-topo .mp-marca { color: var(--vermelho); }
.mp-conta { margin-top: 18px; }
.mp-confere { margin-top: 10px; font-size: 13px; color: var(--texto-suave); }
.mp-subtitulo { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.mp-dicas { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.mp-dicas li { font-size: 13.5px; line-height: 1.6; color: var(--texto); }

/* Passo a passo numerado */
.mp-passos { margin: 18px 0 0; padding-left: 0; list-style: none; counter-reset: mp; display: grid; gap: 22px; }
.mp-passos > li { counter-increment: mp; position: relative; padding-left: 44px; }
.mp-passos > li::before {
    content: counter(mp);
    position: absolute;
    left: 0; top: 0;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--terracota);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.mp-passos h3 { margin: 4px 0 7px; font-size: 15.5px; }
.mp-passos p { font-size: 13.8px; line-height: 1.65; color: var(--texto); margin-bottom: 9px; }
.mp-passos a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.mp-passos .aviso-migracao-comando { margin: 4px 0 11px; }
.mp-alerta {
    padding: 11px 14px;
    border-radius: var(--raio-medio);
    background: var(--terracota-suave);
    color: #7c4a34 !important;
}

@media (max-width: 640px) {
    .mp-passos > li { padding-left: 0; padding-top: 40px; }
    .mp-form-teste .button { width: 100%; justify-content: center; }
}

/* Formulário de colar a chave do Mercado Pago */
.mp-form-chave { margin-top: 18px; }
.mp-form-chave .campo-senha input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.mp-form-chave select { max-width: 220px; }
.campo-opcional { font-weight: 400; font-size: 12px; color: var(--texto-fraco); }
.mp-nota-seguranca {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--texto-suave);
}
.mp-bloco .cuidado { margin-top: 14px; }