:root {
    --white: #ffffff;
    --black: #0d0d0d;
    --gray-1: #f5f5f5;
    --gray-2: #e0e0e0;
    --gray-text: #6b6b6b;
    --brand-orange: #f4a000;
    --radius-card: 16px;
    --transition: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    /* sazonalidade corrente da seção = Carnaval (Bloquinho) —
       paleta oficial herdada do SEASONS.carnaval do index.html,
       mesmos nomes de variável usados no applySeason() do site
       principal, pra já nascer compatível se um dia essa seção
       for costurada dentro dele */
    --season-primary: #C2185B;
    --season-cta: #FF5722;
    --season-light: #FCE4EC;
    --season-mid: #FF4081;
    --season-badge: #FF1744;
    --season-label: #880E4F;
    --season-border: #C2185B;
    /* canais RGB separados (sem #, sem parênteses) — necessários
       porque rgba() não aceita hex direto; essas duas são
       atualizadas junto das outras em renderKit(), permitindo que
       sombras/bordas com opacidade (rgba(var(--x-rgb), 0.2)) também
       reajam à paleta do kit ativo */
    --season-primary-rgb: 194, 24, 91;
    --season-cta-rgb: 255, 87, 34;
    --season-mid-rgb: 255, 64, 129;
    --season-badge-rgb: 255, 23, 68;
    --season-label-rgb: 136, 14, 79;
}

/* ─── LOADER — fundo preto liso (ao contrário da LP, que usa
   branco + textura). Anel mantém o laranja da marca. z-index
   acima de TUDO nessa página, inclusive a foto em tela cheia
   (999) e os modais (999) — por isso 3000. ─── */
#inspira-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background-color: var(--black);
    /* mobile é o padrão (mobile-first) — tablet/desktop sobrescrevem
       abaixo. background-size em px explícito (não "cover") porque
       cada arte foi gerada numa resolução de referência própria
       (375x840 mobile / 768x1024 tablet / 1440x900 desktop) — o
       tamanho aqui precisa bater com essa referência pra exibir
       na densidade certa (as imagens são 2-3x maiores em pixel
       real, pensadas pra tela retina). background-repeat cobre
       só a sobra de borda em telas um pouco maiores que a
       referência — não é a estratégia principal, a imagem única
       já cobre a tela sozinha na maioria dos casos. */
    background-image: url('https://res.cloudinary.com/dzt1kqdbc/image/upload/v1790262975/INSPIRA_PAGE-LOADER_BACKGROUND-MOBILE_odfdte.webp');
    background-size: 375px 840px;
    background-position: top center;
    background-repeat: repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}

@media (min-width: 601px) and (max-width: 1024px) {
    #inspira-loader {
        background-image: url('https://res.cloudinary.com/dzt1kqdbc/image/upload/v1790262976/INSPIRA_PAGE-LOADER_BACKGROUND-TABLET_vdlx1p.webp');
        background-size: 768px 1024px;
    }
}

@media (min-width: 1025px) {
    #inspira-loader {
        background-image: url('https://res.cloudinary.com/dzt1kqdbc/image/upload/v1790262976/INSPIRA_PAGE-LOADER_BACKGROUND-DESKTOP_twzmmx.webp');
        background-size: 1440px 900px;
    }
}

#inspira-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none;
}

#inspira-loader.slide-out {
    transform: translateY(-100%);
}

.inspira-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 2;
    /* acima do véu escuro (::before, z-index:1) */
}

/* logo — começa fora da tela embaixo, sobe com fade-in */
.inspira-loader-logo {
    width: 140px;
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(65vh);
}

.inspira-loader-logo.animating {
    animation: inspira-logo-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes inspira-logo-rise {
    from {
        transform: translateY(65vh);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* título — legenda abaixo da logo, acima do anel. Simples
   fade-in, acompanhando o assentamento da logo (sem beat de
   timing próprio, pra não alongar a sequência) */
.inspira-loader-title {
    width: 480px;
    max-width: 78vw;
    height: auto;
    display: block;
    /* imagem WebP (1440x690px, fundo transparente), substituindo
       o texto vivo — "Blueberry" é fonte comercial da biblioteca
       do Canva, que proíbe uso do arquivo fora da própria
       plataforma (checado no contrato de licença). 480px é o
       tamanho de exibição calculado (~5x o texto HTML anterior,
       já considerando o empilhamento em 2 linhas — largura de
       "Inspira" sozinha, não a soma com "Nyr"). max-width:78vw
       evita que ultrapasse a tela em celulares estreitos. */
    opacity: 0;
    margin-top: -4px;
}

.inspira-loader-title.animating {
    animation: inspira-title-fade 0.8s ease-out forwards;
}

@keyframes inspira-title-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inspira-loader-ring-wrap {
    width: 52px;
    height: 52px;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin-top: 6px;
}

.inspira-loader-ring-wrap.animating {
    opacity: 1;
}

.inspira-loader-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.inspira-loader-track {
    fill: none;
    stroke: rgba(244, 160, 0, 0.2);
    stroke-width: 2;
}

.inspira-loader-ring {
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 138.23;
    stroke-dashoffset: 138.23;
}

.inspira-loader-ring.animating {
    animation: inspira-draw-ring 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes inspira-draw-ring {
    from {
        stroke-dashoffset: 138.23;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* trava de animação — nenhuma animação contínua do site roda
   enquanto o body tiver essa classe (removida via JS só quando
   o loader termina). O confete (JS, não CSS) tem sua própria
   trava equivalente — ver 'nyr-loader-done' no script. */
.pre-load .hotspot::after,
.pre-load .fab-whatsapp::before {
    animation: none !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    /* o scroll horizontal da página é regido ora pelo <html>, ora
       pelo <body>, dependendo do navegador — aplicar só no body
       não é garantia; os dois juntos removem a ambiguidade */
}

body {
    font-family: 'Barlow', sans-serif;
    background: #f5f5f5;
    color: var(--black);
    overflow-x: hidden;
    width: 100%;
    /* contém elementos position:absolute que vazam pra fora da
       viewport (ex: as setas de navegação, que podem protuberar
       até ~88px pra fora do .inspira-grid em telas largas) — sem
       isso, esse vazamento gera barra de rolagem horizontal na
       página inteira */
}

img {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ═══════════════════════════════════════════════
   SEÇÃO
═══════════════════════════════════════════════ */
.inspira {
    background: #f7f6f6;
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
    /* overflow:hidden — contém o confete de fundo, que "cai" além
       dos limites verticais da seção (nasce um pouco acima do
       topo, morre um pouco abaixo da base, ver .inspira-confetti)
       position:relative — âncora pras setas de navegação (bordas
       da seção) e pra alavanca Acessórios/Decoração (canto
       superior direito) */
}

/* ─── CONFETE DE FUNDO — mesmo mecanismo da hero da LP: <canvas>
   desenhado via JS a cada frame (requestAnimationFrame,
   delta-time), física própria por peça (velocidade, rotação,
   fade-in no respawn), em vez do SVG+CSS-keyframe de antes.
   Só a paleta de cor muda pra se enquadrar no Carnaval — o resto
   do mecanismo (classe Piece, loop, resize) é o mesmo. ─── */
.inspira-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

.inspira .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    /* âncora das setas de navegação — não usamos .inspira-grid
       porque ela vira display:contents no mobile (perde a caixa).
       .container tem o mesmo retângulo que .inspira-grid em
       qualquer largura (grid não tem padding próprio), então
       trocar a referência não muda nada visualmente fora do
       mobile */
}

/* ─── CABEÇALHO DA SEÇÃO — fixo, nunca muda com a troca de kit ─── */
.inspira-header {
    text-align: center;
    margin-bottom: 40px;
}

.inspira-header-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--season-primary);
    display: block;
    margin-bottom: 12px;
    /* tamanhos replicados de .section-eyebrow (LP) — 15px base,
       17px em ≥1500px (ver media query lá embaixo) */
}

.inspira-header-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.05;
    color: var(--season-label);
    margin-bottom: 10px;
    /* tamanhos replicados de .section-title (LP) — mesmo clamp()
       exato, com bônus em ≥1500px (clamp(52px,3.33vw,64px)) */
}

.inspira-header-title em {
    color: var(--season-cta);
    font-style: normal;
    /* réplica de .section-title em — a "segunda cor" do título,
       igual ao "Produtos" laranja no exemplo da LP */
}

/* ─── ALAVANCA ACESSÓRIOS/DECORAÇÃO — canto superior direito da
   seção, grande, tipo switch de tema claro/escuro. Página inicia
   em Acessórios. ─── */
/* ─── ALAVANCA ACESSÓRIOS/DECORAÇÃO — canto superior direito da
   seção, acima do eyebrow (não mais na mesma faixa vertical, pra
   não sobrepor em telas estreitas). Página inicia em Acessórios.
   Pílula interna desliza via JS (updateModePill), medindo o botão
   ativo de verdade — mais robusto que calc() com gap de flex. ─── */
.inspira-mode-toggle {
    position: absolute;
    top: 14px;
    right: 32px;
    display: inline-flex;
    background: #ffffff;
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
    box-shadow:
        0 1px 2px rgba(var(--season-primary-rgb), 0.06),
        0 6px 16px rgba(var(--season-primary-rgb), 0.10),
        0 16px 32px rgba(var(--season-primary-rgb), 0.06);
    /* borda com leve gradiente em vez de linha sólida cinza-rosa —
       truque do duplo background (padding-box + border-box) */
    border: 1px solid transparent;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg, rgba(var(--season-primary-rgb), 0.35), rgba(var(--season-cta-rgb), 0.35));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    z-index: 6;
}

.inspira-mode-pill {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: 0;
    background: var(--season-cta);
    border-radius: 100px;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

.inspira-mode-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    font-family: 'Anton', sans-serif;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 100px;
    color: var(--season-primary);
    background: transparent;
    transition: color var(--transition);
    white-space: nowrap;
}

.inspira-mode-btn:not(.active):hover {
    color: var(--season-cta);
}

.inspira-mode-btn.active {
    color: #ffffff;
}

/* pontinho que só aparece no botão ativo — micro-detalhe que
   reforça o estado além da cor, com uma leve animação de entrada */
.mode-dot {
    width: 0;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    transform: scale(0.4);
    transition: width var(--transition), opacity var(--transition), transform var(--transition), margin var(--transition);
}

.inspira-mode-btn.active .mode-dot {
    width: 5px;
    opacity: 1;
    transform: scale(1);
    margin-right: 7px;
}

/* ─── VIEWS (Acessórios / Decoração) — troca com fade+slide sutil ─── */
.inspira-view {
    animation: inspiraViewIn 0.35s ease;
}

@keyframes inspiraViewIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── DECORAÇÃO — col-left (reaproveitada de Acessórios) + foto à
   direita, proporção 583:452 (~1.29:1) medida no protótipo ─── */
.decor-col-left {
    text-align: left;
}

.decor-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.29fr);
    gap: 36px;
    align-items: center;
    padding: clamp(20px, 3vw, 40px) 0 clamp(24px, 3vw, 36px);
}

.decor-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f2f2;
}

.decor-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.decor-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(var(--season-primary-rgb), 0.05);
    border: 1px dashed rgba(var(--season-primary-rgb), 0.3);
    color: rgba(var(--season-label-rgb), 0.55);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.decor-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--season-badge);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* legenda — largura total, cards verticais (foto em cima, depois
   título, depois descrição) — diferente dos product-callout de
   Acessórios, que são horizontais */
.decor-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}

.decor-legend-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--season-primary-rgb), 0.35);
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.decor-legend-item:hover {
    border-color: rgba(var(--season-primary-rgb), 0.6);
}

.decor-legend-item.hs-active {
    border-color: var(--season-cta);
    box-shadow: 0 0 0 2px rgba(var(--season-cta-rgb), 0.15);
}

.decor-legend-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    background: #f2f2f2;
}

.decor-legend-number {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--season-badge);
    color: #ffffff;
    font-family: 'Anton', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.decor-legend-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 14px 16px;
}

.decor-legend-name {
    font-family: 'Anton', sans-serif;
    font-size: 14px;
    color: var(--season-label);
    line-height: 1.15;
    margin-bottom: 0;
}

.decor-legend-desc {
    font-size: 12px;
    color: rgba(var(--season-label-rgb), 0.65);
    line-height: 1.4;
}

@media (max-width: 800px) {
    .decor-grid {
        grid-template-columns: 1fr;
    }

    .decor-marker {
        width: 20px;
        height: 20px;
        font-size: 10px;
        border-width: 1.5px;
    }
}

/* ─── ≤465px: decor-legend vira lista horizontal, igual
   col-right/product-callout de Acessórios (foto pequena ao lado
   do texto, não mais card vertical empilhado) — mesmo HTML
   (title-row/ref/video-btn já são os mesmos de product-callout,
   só decor-legend-item/photo/body mudam de eixo aqui) ─── */
@media (max-width: 465px) {
    .decor-legend {
        display: flex;
        flex-direction: column;
        gap: clamp(6.5px, 0.85vw, 9.1px);
    }

    .decor-legend-item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(6.5px, 1.04vw, 10.4px);
        padding: clamp(6.5px, 0.78vw, 9.1px);
    }

    .decor-legend-photo {
        width: clamp(72px, 9vw, 108px);
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        flex-shrink: 0;
        background: #ffffff;
        /* sem o cinza de fundo nessa faixa — fica branco puro,
           igual product-callout-photo (que nunca teve fundo próprio) */
    }

    .decor-legend-number {
        width: 20px;
        height: 20px;
        font-size: 10px;
        top: 6px;
        left: 6px;
    }

    .decor-legend-body {
        padding: 2px 0 0;
    }
}

/* ─── SEASON-TABS — trocam o kit exibido dentro da sazonalidade corrente ─── */
.inspira-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    flex-wrap: wrap;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.inspira-tab {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(var(--season-label-rgb), 0.55);
    background: #ffffff;
    border: 1.5px solid rgba(var(--season-primary-rgb), 0.5);
    padding: 10px 24px;
    border-radius: 100px;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.inspira-tab:hover {
    color: var(--season-label);
    border-color: rgba(var(--season-primary-rgb), 0.8);
}

.inspira-tab.active {
    color: #ffffff;
    background: var(--season-cta);
    border-color: var(--season-cta);
}

.inspira-grid {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(260px, 1fr) minmax(320px, 400px);
    grid-template-areas: "left model right";
    gap: 36px;
    align-items: center;
    /* position:relative removido — .inspira-grid não é mais o
       ancestral posicionado das setas (agora é .container, ver
       updateNavArrowPosition). Mantê-la position:relative aqui
       criava uma inconsistência: em ≤564px o JS calcula a
       posição relativa ao .container (grid vira display:contents
       e perde a caixa), mas em >564px o grid continuava sendo
       uma caixa real e MAIS PRÓXIMA que o container — o
       navegador ancorava ali, não no container que o JS estava
       presumindo, desalinhando as setas verticalmente */
}

.col-left {
    grid-area: left;
}

.col-model {
    grid-area: model;
}

.model-stack,
.decor-photo-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* agrupa .model-frame + .kit-switcher-indicator (ou o
       equivalente de decoração) num único filho, pra empilhar
       verticalmente sem depender da direção do flex do pai */
}

.col-right {
    grid-area: right;
}

/* ─── COLUNA 1 — Título + Monte Seu Kit ─── */
.col-left {
    text-align: left;
}

.inspira-eyebrow {
    font-family: 'Caveat', cursive;
    display: inline-flex;
    align-items: center;
    gap: clamp(5px, 0.68vw + 1.17px, 10px);
    font-size: clamp(13px, 0.54vw + 9.93px, 17px);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--season-primary);
    margin-bottom: clamp(2px, 0.27vw + 0.47px, 4px);
}

.inspira-eyebrow::before {
    content: '';
    width: clamp(11px, 2.04vw - 0.49px, 26px);
    height: 3px;
    background: var(--season-primary);
}

.inspira-title {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(40px, 4.35vw + 15.48px, 72px);
    line-height: 1.02;
    color: var(--season-label);
}

.inspira-sub {
    font-size: clamp(15px, 0.41vw + 12.70px, 18px);
    line-height: 1.5;
    color: rgba(var(--season-label-rgb), 0.7);
    margin: clamp(6px, 1.09vw - 0.13px, 14px) 0 clamp(3px, 0.41vw + 0.70px, 6px);
    text-align: left;
    /* explícito aqui, não só herdado de .col-left/.decor-col-left
       — em ≤564px, .col-left também vira display:contents, e
       herança de propriedade através de display:contents é
       historicamente instável entre navegadores. Deixar
       explícito na própria regra remove essa dependência por
       completo, pras duas abas, em qualquer largura. */
}

.kit-summary-card {
    background: rgba(var(--season-primary-rgb), 0.06);
    border: 1px solid rgba(var(--season-primary-rgb), 0.25);
    border-radius: 14px;
    padding: clamp(9px, 1.22vw + 2.10px, 18px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.06);
}

.kit-summary-label {
    display: inline-block;
    background: var(--season-cta);
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(8.5px, 0.34vw + 6.58px, 11px);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: clamp(2px, 0.27vw + 0.47px, 4px) clamp(6px, 0.54vw + 2.93px, 10px);
    border-radius: 100px;
    margin-bottom: clamp(6px, 1.09vw - 0.13px, 14px);
}

.kit-summary-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: clamp(3px, 0.41vw + 0.70px, 6px);
    margin-bottom: clamp(6px, 1.09vw - 0.13px, 14px);
}

.kit-summary-icons img {
    width: clamp(27px, 2.58vw + 12.44px, 46px);
    height: clamp(27px, 2.58vw + 12.44px, 46px);
    border-radius: 8px;
    object-fit: cover;
}

/* placeholder-swatch some com a borda tracejada só nesse contexto
   (ícone pequeno do resumo) — os placeholders maiores (foto de
   produto/cenário) continuam com a borda, não mencionados no
   pedido */
.kit-summary-icons .placeholder-swatch {
    border: none;
}

.kit-summary-icons span {
    font-family: 'Anton', sans-serif;
    font-size: clamp(10px, 0.68vw + 6.17px, 15px);
    color: rgba(var(--season-mid-rgb), 0.8);
}

/* swatch placeholder — usado enquanto não há foto real da peça */
.placeholder-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--season-primary-rgb), 0.05);
    border: 1px dashed rgba(var(--season-primary-rgb), 0.3);
    color: rgba(var(--season-label-rgb), 0.5);
    font-family: 'Barlow Condensed', sans-serif;
    text-align: center;
    line-height: 1.2;
}

/* variante de .placeholder-swatch pra quando já existe foto real —
   mesmo tamanho/formato (46x46, cantos arredondados), mas sem a
   borda tracejada/fundo tintado, já que ali dentro vai uma <img>
   de verdade, não mais texto */
.kit-summary-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.kit-summary-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kit-summary-card p {
    font-size: clamp(13px, 0.41vw + 10.70px, 16px);
    line-height: 1.5;
    color: rgba(var(--season-label-rgb), 0.7);
}

/* ─── COLUNA 2 — Foto + hotspots ───
   A imagem fica MAIOR que as colunas vizinhas de propósito: como é o
   único conteúdo alto dessa coluna, ela dita a altura da linha do
   grid inteira — o texto da col-left e os cards da col-right, que
   são mais curtos, ficam centralizados (align-items:center no
   .inspira-grid) e "sobram" espaço vazio acima/abaixo, dando a
   impressão de que a foto invade esse espaço. Continua contida
   dentro do padding da seção .inspira, não rompe a seção. */
.col-model {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    overflow: visible;
}

.model-frame {
    position: relative;
    width: fit-content;
    margin-left: clamp(-30px, -18.75vw + 330px, 30px);
    /* oscila de -30px em 1920px até +30px em 1600px (transição
       mais rápida que antes). Acima de 1920px trava em -30px;
       abaixo de 1600px trava em +30px, até a faixa fixa de
       -40px assumir em 1179px (ver media query abaixo) — de
       900px pra baixo, o breakpoint tablet assume e força
       margin-left:0 (regra já existente, não alterada aqui).
       height segue removida, a pedido */
}

.model-photo {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: opacity 0.25s ease;
}

/* ─── setas de navegação — ciclam entre os kits. Ancoradas nas
   bordas da SEÇÃO (.inspira), não mais coladas no modelo — porque
   trocar de kit muda tudo (foto, texto, produtos), não só a foto,
   então a navegação merece ser um controle de nível de seção.
   "top" é definido via JS (updateNavArrowPosition), pra alinhar
   verticalmente com o centro do .model-frame mesmo a seção
   inteira (com cabeçalho + rodapé) sendo mais alta que a foto. ─── */
.model-nav-arrow,
.decor-nav-arrow {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(var(--season-primary-rgb), 0.5);
    color: var(--season-primary);
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--season-primary-rgb), 0.1);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    z-index: 5;
}

.model-nav-arrow:hover,
.decor-nav-arrow:hover {
    background: var(--season-cta);
    color: #ffffff;
    border-color: var(--season-cta);
}

.model-nav-prev,
.model-nav-next {
    /* left/right calculados via JS (updateNavArrowGap) — usar
       right:100%+margin gerou confusão de sinal duas vezes
       seguidas; pixels diretos em JS são inequívocos */
}

/* ─── indicador de kit ativo (nome + dots), sincronizado com as tabs ─── */
.kit-switcher-indicator,
.decor-switcher-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.kit-switcher-label,
.decor-switcher-label {
    font-family: 'Anton', sans-serif;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 400;
    color: var(--season-label);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.kit-switcher-count,
.decor-switcher-count {
    opacity: 0.6;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
}

.kit-switcher-dots,
.decor-switcher-dots {
    display: flex;
    gap: 10px;
}

.kit-dot,
.decor-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(var(--season-primary-rgb), 0.25);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.kit-dot.active,
.decor-dot.active {
    background: var(--season-cta);
    transform: scale(1.3);
}

/* mantido apenas como referência de fallback, não é mais usado no momento */
.model-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    gap: 10px;
}

.model-placeholder svg {
    width: 46%;
    opacity: 0.28;
}

.model-placeholder-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    max-width: 180px;
    line-height: 1.4;
}

/* hotspot dots — posições em % ilustrativas, calibrar com a foto real */
.hotspot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--season-badge);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(var(--season-badge-rgb), 0.25);
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: pointer;
    /* clicável — pula até o card de produto correspondente, ver
       scrollToCard() no JS */
}

/* ─── SWIPE-ZONE — scroll-snap nativo usado como DETECTOR de
   gesto (não é um carrossel de slides de verdade — só 3 âncoras
   vazias). Mesma técnica já usada nos carrosséis da LP principal
   (SERVICES/PRODUCTS/REDE COMERCIAL), adaptada aqui porque nosso
   conteúdo troca por substituição (renderKit/renderDecorKit), não
   por múltiplas fotos pré-renderizadas lado a lado. z-index
   abaixo do hotspot(3)/decor-marker(2), então cliques neles
   continuam funcionando normalmente; deslizar em qualquer outro
   ponto da foto aciona a troca de kit — ver setupSwipeZone no JS. */
.swipe-zone {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    /* cada contexto liga a sua faixa de largura própria, nas
       media queries no fim do arquivo (≤900px Acessórios,
       ≤800px Decoração) */
}

.swipe-zone-track {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.swipe-zone-track::-webkit-scrollbar {
    display: none;
}

.swipe-zone-anchor {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
}

/* ─── FOTO EM TELA CHEIA — "promove" o próprio .model-frame /
   .decor-photo-frame que já existe (não é um modal com conteúdo
   duplicado) — mas hotspots/marcadores/swipe são desligados nesse
   estado (ver regras abaixo e JS), já que aqui é só visualização. ─── */
/* réplica de .service-ilustrativas da LP — mesmo texto/tipografia,
   reposicionado do canto inferior-DIREITO (onde fica lá) pro
   inferior-ESQUERDO aqui, porque a direita já é ocupada pelo botão de
   expandir a foto. Continua visível em tela cheia de propósito — é
   aviso informativo, não elemento interativo, e importa mais ainda
   quando a pessoa está olhando a foto de perto. */
.inspira-ilustrativa {
    position: absolute;
    bottom: 14px;
    left: 16px;
    z-index: 4;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.75);
    background: rgba(255, 255, 255, 0.75);
    padding: 4px 9px;
    border-radius: 100px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* fundo próprio (pílula) em vez de só sombra — texto preto sobre
       sombra clara ficava "ofuscado" dependendo do trecho da foto por
       trás (5 fotos de cenário bem diferentes entre si); um fundo
       sólido garante contraste sempre, não importa o que tem atrás */
    pointer-events: none;
}

/* versão de Acessórios — fora da foto (sobre a modelo cobria parte da
   imagem), em fluxo normal entre a foto e o indicador de posição,
   centralizada. Sem sombra: aqui não sobrepõe nenhuma imagem, senta
   direto no fundo claro da seção */
.inspira-ilustrativa-static {
    display: block;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.75);
    margin: 6px 0 2px;
}

.photo-expand-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    /* acima do swipe-zone(1)/decor-marker(2)/hotspot(3) — sempre
       clicável, mesmo se algum marcador cair perto do canto */
}

/* réplica de .modal-video-close da LP — 36px, sem borda, com blur,
   em vez do botão maior/com borda que tínhamos antes */
.photo-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s;
    z-index: 1001;
}

.photo-close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.is-photo-fullscreen .photo-close-btn {
    display: flex;
}

.is-photo-fullscreen .photo-expand-btn {
    display: none;
}

/* hotspots, marcadores e a faixa de swipe somem em tela cheia —
   aqui é só visualização, trocar de kit/produto não faz sentido
   dentro desse estado (e evita o bug de reposicionamento da
   swipe-zone ao redimensionar o frame — ver JS) */
.is-photo-fullscreen #hotspotsLayer,
.is-photo-fullscreen #decorMarkersLayer,
.is-photo-fullscreen #connectorSvg,
.is-photo-fullscreen .swipe-zone {
    display: none;
}

/* camada de fundo clicável — cobre tudo atrás da foto; clicar
   nela fecha o modo tela cheia (igual .modal-video-overlay da
   LP), sem interferir no clique na foto em si */
.photo-fullscreen-backdrop {
    display: none;
}

.is-photo-fullscreen .photo-fullscreen-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* especificidade de 2 classes (0-2-0) vence qualquer regra de
   media query que define largura/altura de .model-frame ou
   .decor-photo-frame (todas com especificidade 0-1-0) — não
   precisa de !important nem duplicar regra por breakpoint.
   Fundo replicando .modal-video-overlay da LP: preto da marca
   semi-transparente + blur, não mais preto quase opaco. */
.model-frame.is-photo-fullscreen,
.decor-photo-frame.is-photo-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: unset;
    margin: 0;
    background: rgba(13, 13, 13, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 24px;
    box-sizing: border-box;
}

.model-frame.is-photo-fullscreen .model-photo,
.decor-photo-frame.is-photo-fullscreen .decor-photo {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* contain, não cover — em tela cheia queremos ver a foto
       inteira, não cortada pra preencher a proporção do frame.
       overflow-y:auto entra só se, mesmo assim, a foto ainda não
       couber (proporção muito alta numa tela muito baixa) —
       nunca a página por trás rola, só a própria foto */
    overflow-y: auto;
}

.hotspot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--season-badge-rgb), 0.5);
    animation: hotspot-pulse 2.2s ease-out infinite;
}

@keyframes hotspot-pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* posições calibradas do Bloquinho original (foto antiga) foram
   removidas daqui — o sistema agora usa posição inline via style
   (left/top em %), gerada dinamicamente por placeholderHotspots()
   no JS, já que cada kit tem sua própria foto e contagem de peças */

/* ─── linhas conectoras (SVG overlay) ─── */
.connector-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.connector-svg path {
    fill: none;
    stroke: rgba(var(--season-badge-rgb), 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

/* ─── COLUNA 3 — cards de produto ─── */
.col-right {
    display: flex;
    flex-direction: column;
    gap: clamp(6.5px, 0.85vw, 9.1px);
}

.product-callout {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(var(--season-primary-rgb), 0.15);
    border-radius: 12px;
    padding: clamp(6.5px, 0.78vw, 9.1px);
    display: flex;
    gap: clamp(6.5px, 1.04vw, 10.4px);
    align-items: flex-start;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.08);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    /* sombra em duas camadas (perto/longe) — precisa se destacar
       mais agora que o fundo não é mais uma cor sólida contrastante
       (era rosa liso, virou cinza quase branco + confete) */
}

.product-callout:hover {
    border-color: var(--season-cta);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07), 0 16px 34px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.product-callout.hs-active {
    border-color: var(--season-cta);
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(var(--season-cta-rgb), 0.18);
    transition: border-color var(--transition), border-width var(--transition), box-shadow var(--transition);
    /* acende ao clicar no hotspot correspondente na foto — ver
       jump() no JS, que adiciona essa classe e some sozinha
       depois de alguns segundos */
}

.product-callout-photo {
    width: clamp(72px, 9vw, 108px);
    aspect-ratio: 1 / 1;
    /* aspect-ratio garante que a altura acompanhe a largura fluida
       na mesma proporção — nunca esprema/estique a imagem */
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.product-callout-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-callout-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.product-callout-title-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* dentro da legenda de Decoração especificamente, ref e nome vão
   cada um em sua própria linha — diferente de Acessórios, onde
   ficam lado a lado. Escopado só pra .decor-legend-body pra não
   afetar os product-callout de Acessórios, que usam essa mesma
   classe .product-callout-title-row */
.decor-legend-body .product-callout-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* ≤465px: ref+nome voltam a dividir a mesma linha, igual
   Acessórios — precisa vir DEPOIS da regra acima (mesma
   especificidade, 2 classes) pra vencer o empate; antes estava
   mais cedo no arquivo e por isso nunca aplicava, mesmo com a
   media query batendo — empate de especificidade é resolvido
   por ordem no arquivo, não por posição dentro/fora de @media */
@media (max-width: 465px) {
    .decor-legend-body .product-callout-title-row {
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }
}

.product-callout-ref {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(10.8px, 0.23vw + 9.50px, 12.5px);
    font-weight: 600;
    letter-spacing: 1.2px;
    color: rgba(var(--season-label-rgb), 0.45);
    flex-shrink: 0;
}

.product-callout-name {
    font-family: 'Anton', sans-serif;
    font-size: 15px;
    letter-spacing: 0.2px;
    color: var(--season-label);
    line-height: 1.22;
}

.product-callout-desc {
    font-family: 'Barlow', sans-serif;
    font-size: clamp(11.5px, 0.20vw + 10.35px, 13px);
    line-height: 1.45;
    color: rgba(var(--season-label-rgb), 0.65);
    margin-bottom: 7px;
}

.product-callout-video-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    margin-top: auto;
    /* align-self:flex-start — sem isso, dentro de
       .decor-legend-body (flex-column, stretch por padrão), o
       botão esticava pra 100% da largura do card. Título/desc
       continuam esticando normalmente (sem align-self), porque
       precisam da largura cheia pra quebrar linha certo — só o
       botão precisava sair do stretch */
    /* empurra o botão pro fundo do card — só tem efeito real
       dentro de .decor-legend-body (que é flex-column); em
       .product-callout-body (Acessórios, não é flex) isso não
       faz nada, comportamento inalterado lá */
    padding: clamp(3.25px, 0.39vw, 3.9px) clamp(5.85px, 0.65vw, 7.8px);
    border: 1.5px solid rgba(var(--season-primary-rgb), 0.3);
    border-radius: 100px;
    color: var(--season-primary);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(11.5px, 0.20vw + 10.35px, 13px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: border-color var(--transition), color var(--transition);
}

.product-callout-video-btn:hover {
    border-color: var(--season-cta);
    color: var(--season-cta);
}

.product-callout-video-btn svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ─── "Vídeo não disponível" — réplica exata do padrão já usado
   na seção Products da LP. Troca o botão inteiro (não é o mesmo
   .product-callout-video-btn com texto diferente) quando o
   produto não tem p.video cadastrado. Clicar nele revela uma
   mensagem inline por 2,5s — não abre modal nenhum, já que não
   há vídeo pra mostrar. ─── */
.product-callout-video-btn-no-video {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    margin-top: auto;
    padding: clamp(3.25px, 0.39vw, 3.9px) clamp(5.85px, 0.65vw, 7.8px);
    border: none;
    border-radius: 100px;
    background: rgba(var(--season-label-rgb), 0.12);
    color: rgba(var(--season-label-rgb), 0.6);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(11.5px, 0.20vw + 10.35px, 13px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--transition);
}

.product-callout-video-btn-no-video:hover {
    opacity: 0.65;
}

.product-callout-video-btn-no-video svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.no-video-msg {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--gray-text);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.no-video-msg.visible {
    max-height: 32px;
    opacity: 1;
    margin-top: 5px;
}

/* pontinho de origem da linha, do lado do card (coluna 3) */
.product-callout::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--season-badge);
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
}

/* ─── rodapé da seção: dica + cta ─── */
.inspira-footer {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(var(--season-primary-rgb), 0.15);
    padding-top: 28px;
}

.inspira-tip {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(var(--season-label-rgb), 0.7);
    max-width: 520px;
}

.inspira-tip strong {
    color: var(--season-label);
}

.inspira-btn {
    flex-shrink: 0;
    background: var(--season-cta);
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 100px;
    transition: transform var(--transition);
}

.inspira-btn:hover {
    transform: translateY(-2px);
}

/* ─── BÔNUS EM TELAS LARGAS (≥1500px) — replica o padrão da LP,
   que também dá um acréscimo de tamanho de fonte nessa faixa.
   Nosso clamp() trava em 1300px e não cresce mais sozinho; essa
   camada retoma o crescimento acima disso, só nos papéis que já
   estão alinhados à LP na base (os que ainda não foram alinhados,
   ou que a própria LP não bonifica em 1500px, ficam de fora por
   enquanto). ─── */
@media (min-width: 1500px) {
    .inspira-eyebrow {
        font-size: 17px;
        /* LP: .section-eyebrow em ≥1500px */
    }

    .product-callout-desc {
        font-size: 15px;
        /* LP: .card-desc em ≥1500px */
    }

    .inspira-header-eyebrow {
        font-size: 17px;
        /* LP: .section-eyebrow em ≥1500px */
    }

    .inspira-header-title {
        font-size: clamp(52px, 3.33vw, 64px);
        /* LP: .section-title em ≥1500px */
    }

    .inspira-sub {
        font-size: 20px;
    }

    .kit-summary-card p {
        font-size: 18px;
    }
}

/* ─── responsivo ─── */
/* faixa 901px–1179px: margin-left fixo em -40px (fora da
   oscilação -30↔30 de cima, e antes do breakpoint tablet
   assumir com margin-left:0 em ≤900px) */
@media (max-width: 1179px) and (min-width: 901px) {
    .model-frame {
        margin-left: -40px;
    }
}

/* ─── BREAKPOINT A (testando: 900px) — só a col-right quebra pra
   baixo; col-left e col-model continuam lado a lado. As linhas
   conectoras já desligam aqui, porque os cards deixam de estar ao
   lado da foto (ligar um hotspot a um card lá embaixo não faz
   sentido visualmente). col-right ocupa a largura toda embaixo. ─── */
@media (max-width: 900px) {
    .inspira-grid {
        grid-template-columns: minmax(200px, 240px) 1fr;
        grid-template-areas:
            "left model"
            "right right";
        row-gap: 32px;
    }

    .col-right {
        width: 100%;
    }

    /* modelo passa a ser dimensionado pela LARGURA disponível da
       coluna (não mais pela altura via vw) — cresce pra preencher
       o espaço ao lado da col-left em vez de sobrar vão vazio.
       aspect-ratio trava a proporção (800:1536), então a altura
       sempre acompanha corretamente, nunca esprememdo/esticando.
       Calibrado: 280px em 564px de viewport (piso, ver breakpoint
       B) até 480px em 900px de viewport (teto) */
    .model-frame {
        width: clamp(280px, 59.5vw - 56px, 480px);
        height: auto;
        aspect-ratio: 800 / 1536;
        margin-left: 0;
    }

    .col-model {
        justify-content: center;
        /* centraliza o modelo dentro da célula — a coluna (1fr)
           costuma ser mais larga que o frame, então sobra espaço
           nas laterais; sem isso ele ficaria colado à esquerda
           (herda flex-start do desktop) */
    }

    .connector-svg {
        display: none;
    }

    .product-callout::before {
        display: none;
    }

    /* CAUSA RAIZ do toggle sobrepondo o cabeçalho: .container
       ganhou position:relative numa rodada anterior (pra âncora
       das setas), e virou o ancestral posicionado mais próximo do
       toggle — antes era .inspira (topo da seção, 80px ACIMA de
       onde o cabeçalho começa, dava folga de sobra). Agora o
       topo do .container já coincide quase com o início do
       cabeçalho, então top:14px (relativo ao container) sobra
       quase nada de folga. -66px = 14px (folga original,
       relativa à seção) − 80px (padding-top da seção, "gasto"
       antes do container começar) — restaura a MESMA folga
       visual de antes, só que recalculada pro novo ancestral.
       Só nessa faixa: em desktop, o toggle relativo ao container
       é o efeito que você gostou, não mexi lá. */
    .inspira-mode-toggle {
        top: -66px;
    }
}

/* ─── esconder as setas na faixa intermediária (900px → 565px) —
   layout tablet, sem necessidade de navegação por seta aqui;
   os dots do kit-switcher-indicator continuam disponíveis ─── */
/* ─── esconder as setas de Acessórios abaixo de 1240px (volta só
   no mobile, ≤564px, onde tem regra própria de tamanho reduzido
   mais abaixo) — faixa estendida de 900px pra 1239px a pedido ─── */
@media (max-width: 1239px) and (min-width: 565px) {
    .model-nav-arrow {
        display: none;
    }
}

/* ─── esconder as setas de Decoração só na faixa 801-1239px —
   ficam visíveis tanto em desktop (≥1240px) quanto no "tablet"
   de Decoração (565-800px, onde a grid já é 1 coluna) e no
   mobile (≤564px, sem essa restrição aqui — a pedido) ─── */
@media (max-width: 1239px) and (min-width: 801px) {
    .decor-nav-arrow {
        display: none;
    }
}

/* ─── swipe-zone: liga por contexto, larguras diferentes a
   pedido (Acessórios ≤900px, Decoração ≤800px) ─── */
@media (max-width: 900px) {
    #kitSwipeZone {
        display: block;
    }
}

@media (max-width: 800px) {
    #decorSwipeZone {
        display: block;
    }
}

/* ─── BREAKPOINT B (564px — recalculado, não é mais 535px) —
   col-left e col-model já não cabem mais lado a lado; tudo
   empilha numa coluna só. O valor 564px não é arredondamento
   livre: é o ponto exato em que o orçamento de espaço fecha com
   o novo piso de 280px do modelo (280 + 200 col-left + 36 gap +
   48 padding = 564px) — abaixo disso, o modelo não cabe mais no
   mínimo definido, então empilha. ─── */
@media (max-width: 564px) {

    /* ─── REORDENAÇÃO MOBILE — "achata" a hierarquia (header → grid
       → col-left) numa única sequência via display:contents, pra
       poder intercalar itens que hoje vivem em níveis de
       aninhamento diferentes. Ordem final: rótulo pequeno → título
       grande → subtítulo → tabs → peças do kit → foto → cards. ─── */
    .inspira .container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* itens achatados via display:contents não colapsam
           margem entre si (diferente do fluxo de bloco normal) —
           por isso zero as margens individuais de cada item logo
           abaixo, deixando esse gap como ÚNICA fonte de
           espaçamento (evita que margem própria + gap se somem e
           fiquem exagerados) */
    }

    .inspira-header,
    #inspira-view-acessorios:not([hidden]),
    .inspira-grid,
    .col-left {
        display: contents;
        /* "some" da árvore visual sem sumir do DOM — os filhos
           passam a competir direto pela ordem do .container.
           IMPORTANTE: usar o id #inspira-view-acessorios (não a
           classe .inspira-view) — a classe é compartilhada com a
           view "Decoração", que fica escondida via atributo
           [hidden]; regra de autor com mesma especificidade SEMPRE
           vence [hidden] (que é regra do navegador), então usar a
           classe revelava o conteúdo escondido junto.
           BUG ENCONTRADO DEPOIS: mesmo usando o ID, a especificidade
           de ID (1-0-0-0) TAMBÉM vencia o [hidden] (0-0-1-0) do
           PRÓPRIO elemento quando Decoração estava ativa — ou seja,
           Acessórios vazava mesmo escondido. O :not([hidden]) força
           essa regra a simplesmente não bater quando o atributo
           estiver presente, cedendo pro comportamento nativo do
           navegador nesse caso. */
    }

    .inspira-header-eyebrow {
        order: 1;
        margin-bottom: 0;
    }

    .inspira-header-title {
        order: 2;
        margin-bottom: 0;
    }

    .inspira-sub {
        order: 3;
        text-align: left;
        margin: 0;
    }

    .inspira-tabs {
        order: 4;
        margin-top: 0;
        display: none;
        /* pedido explícito: tabs somem abaixo de 565px nas duas
           abas (Acessórios e Decoração) — o order acima fica sem
           efeito prático agora, mas não atrapalha, então deixei */
    }

    .kit-summary-card {
        order: 5;
        display: none;
        /* mesmo pedido — some nas duas abas (classe compartilhada
           entre .col-left e .decor-col-left) */
    }

    .col-model {
        order: 6;
    }

    .col-right {
        order: 7;
    }

    .inspira-footer {
        order: 8;
    }

    /* #inspira-view-decoracao NÃO é display:contents (fica como
       bloco normal, ao contrário de #inspira-view-acessorios) —
       então ELE MESMO é item direto do flex de .container, e
       precisa de order próprio. Sem isso, cai no padrão order:0
       do flexbox e passa na frente do eyebrow(1)/título(2) do
       cabeçalho, empurrando o cabeçalho pra baixo da página —
       bug visto depois do fix do vazamento.
       CORRIGIDO DE order:3 PRA order:9: as .inspira-tabs também
       são filhas de .inspira-header (sempre achatadas, mesmo em
       Decoração) e têm order:4 — com o decor-view em order:3
       (menor), ele vinha ANTES das tabs, empurrando as tabs pro
       fim de tudo. order:9 garante que o decor-view sempre vem
       depois do eyebrow/título/tabs, não importa o que mais
       exista achatado no meio (inclusive os order 1-8 já usados
       por Acessórios, que nunca coexistem com Decoração de
       qualquer forma, já que só uma view fica visível por vez). */
    #inspira-view-decoracao {
        order: 9;
    }

    /* .inspira-eyebrow ("Sugestão de Kit") + .inspira-title (nome
       do kit) saem do fluxo — viram legenda sobreposta no canto
       superior esquerdo da foto, aproveitando o vão vazio que já
       existe ali (margem transparente do PNG antes das penas).
       ESCOPADO só pra dentro de Acessórios — sem o prefixo
       #inspira-view-acessorios, essas classes (reaproveitadas por
       .decor-col-left) também viravam absolute em Decoração, sem
       nenhum sentido lá (não existe a mesma margem transparente
       de foto pra "encaixar" a legenda) */
    #inspira-view-acessorios .inspira-eyebrow,
    #inspira-view-acessorios .inspira-title {
        position: absolute;
        top: -4px;
        left: 12px;
        max-width: 58%;
        text-align: left;
        z-index: 3;
    }

    #inspira-view-acessorios .inspira-eyebrow {
        font-size: 10px !important;
        /* teto próprio pro contexto de legenda sobreposta — o
           clamp() geral (13-17px) foi pensado pra coluna de
           texto normal (tablet/desktop) e vazava pra cá também,
           ficando grande demais em cima da foto */
    }

    #inspira-view-acessorios .inspira-title {
        top: 18px;
        line-height: 0.95;
        font-size: 24px !important;
        /* mesmo motivo do eyebrow acima — o clamp() geral
           (40-72px) é grande demais pra caber em 58% da largura
           do frame sem sobrepor a máscara/rosto da modelo */
    }

    .col-right {
        text-align: center;
        align-items: stretch;
    }

    .decor-grid {
        gap: 18px;
        /* reduzido de 36px só nessa faixa — pedido explícito */
    }

    .kit-summary-icons {
        justify-content: center;
        /* text-align:center do pai não afeta um flex row —
           os ícones ficavam colados à esquerda sem isso */
    }

    .product-callout-body {
        text-align: left;
        /* sobrescreve o text-align:center herdado do .col-right —
           o card em si fica centralizado na coluna, mas o texto
           dentro dele continua alinhado à esquerda */
    }

    .col-model {
        justify-content: center;
    }

    .model-frame {
        height: auto;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .model-photo {
        height: auto;
        width: 100%;
    }

    .inspira-tab {
        font-size: 11px;
        padding: 7px 16px;
    }

    .model-nav-arrow,
    .decor-nav-arrow {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
}

/* ─── FAB (WhatsApp + Instagram) — réplica exata do .fab-group da
   LP. Cores fixas da marca (não --season-*), já que é elemento
   utilitário/transacional, não temático por kit. ─── */
.fab-group {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    cursor: pointer;
    border: none;
}

.fab:hover {
    transform: scale(1.1);
}

.fab svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
}

.fab-instagram {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    box-shadow: 0 4px 20px rgba(220, 39, 67, 0.4);
}

.fab-whatsapp {
    background: #25D366;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
}

.fab-whatsapp::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.4);
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* ─── FORMULÁRIO DE CONTATO (modal-wa) — réplica do da LP.
   Coleta Razão Social + CNPJ de verdade antes de montar a
   mensagem final do WhatsApp; compartilhado por todos os
   gatilhos de contato (fab-whatsapp, inspira-btn,
   modal-video-wa-btn). ─── */
.modal-wa {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-wa[hidden] {
    display: none;
}

.modal-wa-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-wa-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(244, 160, 0, 0.2);
    animation: modal-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-wa-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #666;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.modal-wa-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #0d0d0d;
}

.modal-wa-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.modal-wa-icon {
    width: 40px;
    height: 40px;
    fill: #25D366;
    flex-shrink: 0;
}

.modal-wa-title {
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.1;
}

.modal-wa-sub {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 4px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    background: #f5f5f5;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    color: #0d0d0d;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #f4a000;
    background: #ffffff;
}

.form-input::placeholder {
    color: #b0b0b0;
}

.form-input.error {
    border-color: #e53935;
}

.field-error {
    display: block;
    font-size: 11px;
    color: #e53935;
    margin-top: 5px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-height: 0;
}

.field-error.visible {
    opacity: 1;
    transform: translateY(0);
}

.modal-form-submit {
    width: 100%;
    padding: 15px;
    background: #25D366;
    color: #ffffff;
    font-family: 'Anton', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    margin-top: 8px;
}

.modal-form-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.modal-form-submit svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    flex-shrink: 0;
}

.modal-form-note {
    font-size: 11px;
    color: #b0b0b0;
    text-align: center;
    margin-top: 12px;
}

/* ─── MODAL DE VÍDEO (modal-video) — réplica da LP, com
   conteúdo dinâmico por produto (nome/descrição) e um
   placeholder no lugar do vídeo real, que ainda não existe ─── */
.modal-video {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-video[hidden] {
    display: none;
}

.modal-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-video-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
}

.modal-video-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.modal-video-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.modal-video-card {
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    animation: modal-video-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-video-in {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* placeholder no lugar do <iframe> da LP — ainda não temos vídeo
   real pra cada produto */
.modal-video-media {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-video-media iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.modal-video-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    padding: 0 24px;
}

.modal-video-info {
    padding: 24px 22px 28px;
    background: #ffffff;
}

.modal-video-product-ref {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(13, 13, 13, 0.5);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.modal-video-product-name {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0d0d0d;
    line-height: 1.1;
    margin-bottom: 10px;
}

.modal-video-product-desc {
    font-size: 13px;
    color: #6b6b6b;
    line-height: 1.65;
    margin-bottom: 20px;
}

.modal-video-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s;
}

.modal-video-wa-btn:hover {
    opacity: 0.88;
}

.modal-video-wa-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ─── RODAPÉ LEGAL — dentro da .inspira, então herda a paleta do kit
   ativo (--season-*) e fica integrado ao fundo/confete da seção ─── */
.inspira:has(.inspira-legal) {
    padding-bottom: 0;
}

.inspira-legal {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1132px;
    margin: 44px auto 0;
    padding: 12px 24px 14px;
    border-top: 1px solid rgba(var(--season-primary-rgb), 0.18);
}

.inspira-legal-item,
.inspira-legal-link {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(var(--season-label-rgb), 0.7);
}

.inspira-legal-link {
    text-decoration: none;
    transition: color var(--transition);
}

.inspira-legal-link:hover {
    color: var(--season-cta);
}

.inspira-legal-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--season-primary-rgb), 0.35);
    flex-shrink: 0;
}

.modal-form-note a {
    color: inherit;
    text-decoration: underline;
}

/* ─── MODAL POLÍTICA DE PRIVACIDADE ──────── */
.modal-privacy {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-privacy[hidden] {
    display: none;
}

.modal-privacy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-privacy-card {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: 20px;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.40);
}

.modal-privacy-close {
    position: sticky;
    top: 16px;
    float: right;
    margin: 16px 16px 0 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.07);
    color: #666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    z-index: 2;
}

.modal-privacy-close:hover {
    background: rgba(0, 0, 0, 0.14);
}

.modal-privacy-content {
    padding: 8px 36px 36px;
}

.modal-privacy-title {
    font-family: 'Anton', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 4px;
    clear: both;
}

.modal-privacy-updated {
    font-size: 12px;
    color: var(--gray-text);
    margin-bottom: 24px;
}

.modal-privacy-content h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-orange);
    margin: 20px 0 8px;
}

.modal-privacy-content p {
    font-size: 14px;
    color: var(--gray-text);
    line-height: 1.7;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .modal-privacy {
        padding: 12px;
    }

    .modal-privacy-card {
        max-height: calc(100vh - 24px);
    }

    .modal-privacy-content {
        padding: 8px 22px 28px;
    }
}

/* ZOOM-INSPIRA — telas baixas (notebooks 1366x768 etc.): mesma estratégia da LP.
   Só a seção .inspira recebe zoom (0.9 até 770px de altura, 0.85 até 680px);
   o texto fica em 97% / 95% do tamanho original (--nv-k) pra não encolher
   demais. Modais, loader, FABs e rodapé ficam fora do zoom. Abaixo de 1024px
   de largura nada muda. */
@media (min-width: 1024px) and (max-height: 770px) {
    .inspira {
        --nv-z: 0.9;
        --nv-k: 0.97;
        zoom: var(--nv-z);
        font-size: calc(16px * var(--nv-k) / var(--nv-z));
    }

    .model-frame.is-photo-fullscreen,
    .decor-photo-frame.is-photo-fullscreen {
        zoom: calc(1 / var(--nv-z));
    }
}

@media (min-width: 1024px) and (max-height: 680px) {
    .inspira {
        --nv-z: 0.85;
        --nv-k: 0.95;
        zoom: var(--nv-z);
        font-size: calc(16px * var(--nv-k) / var(--nv-z));
    }

    .model-frame.is-photo-fullscreen,
    .decor-photo-frame.is-photo-fullscreen {
        zoom: calc(1 / var(--nv-z));
    }
}

@media (min-width: 1024px) and (max-height: 770px) {
    .inspira-header-eyebrow {
        font-size: calc((15px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-header-title {
        font-size: calc((clamp(32px, 5vw, 52px)) * var(--nv-k) / var(--nv-z));
    }

    .inspira-mode-btn {
        font-size: calc((clamp(12px, 1vw, 14px)) * var(--nv-k) / var(--nv-z));
    }

    .decor-photo-placeholder {
        font-size: calc((13px) * var(--nv-k) / var(--nv-z));
    }

    .decor-marker {
        font-size: calc((13px) * var(--nv-k) / var(--nv-z));
    }

    .decor-legend-number {
        font-size: calc((12px) * var(--nv-k) / var(--nv-z));
    }

    .decor-legend-name {
        font-size: calc((14px) * var(--nv-k) / var(--nv-z));
    }

    .decor-legend-desc {
        font-size: calc((12px) * var(--nv-k) / var(--nv-z));
    }

    @media (max-width: 800px) {
        .decor-marker {
            font-size: calc((10px) * var(--nv-k) / var(--nv-z));
        }
    }

    @media (max-width: 465px) {
        .decor-legend-number {
            font-size: calc((10px) * var(--nv-k) / var(--nv-z));
        }
    }

    .inspira-tab {
        font-size: calc((14px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-eyebrow {
        font-size: calc((clamp(13px, 0.54vw + 9.93px, 17px)) * var(--nv-k) / var(--nv-z));
    }

    .inspira-title {
        font-size: calc((clamp(40px, 4.35vw + 15.48px, 72px)) * var(--nv-k) / var(--nv-z));
    }

    .inspira-sub {
        font-size: calc((clamp(15px, 0.41vw + 12.70px, 18px)) * var(--nv-k) / var(--nv-z));
    }

    .kit-summary-label {
        font-size: calc((clamp(8.5px, 0.34vw + 6.58px, 11px)) * var(--nv-k) / var(--nv-z));
    }

    .kit-summary-icons span {
        font-size: calc((clamp(10px, 0.68vw + 6.17px, 15px)) * var(--nv-k) / var(--nv-z));
    }

    .kit-summary-card p {
        font-size: calc((clamp(13px, 0.41vw + 10.70px, 16px)) * var(--nv-k) / var(--nv-z));
    }

    .model-nav-arrow,
    .decor-nav-arrow {
        font-size: calc((26px) * var(--nv-k) / var(--nv-z));
    }

    .kit-switcher-label,
    .decor-switcher-label {
        font-size: calc((clamp(18px, 1.8vw, 24px)) * var(--nv-k) / var(--nv-z));
    }

    .model-placeholder-label {
        font-size: calc((11px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-ilustrativa {
        font-size: calc((10px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-ilustrativa-static {
        font-size: calc((10px) * var(--nv-k) / var(--nv-z));
    }

    .photo-expand-btn {
        font-size: calc((16px) * var(--nv-k) / var(--nv-z));
    }

    .photo-close-btn {
        font-size: calc((24px) * var(--nv-k) / var(--nv-z));
    }

    .product-callout-ref {
        font-size: calc((clamp(10.8px, 0.23vw + 9.50px, 12.5px)) * var(--nv-k) / var(--nv-z));
    }

    .product-callout-name {
        font-size: calc((15px) * var(--nv-k) / var(--nv-z));
    }

    .product-callout-desc {
        font-size: calc((clamp(11.5px, 0.20vw + 10.35px, 13px)) * var(--nv-k) / var(--nv-z));
    }

    .product-callout-video-btn {
        font-size: calc((clamp(11.5px, 0.20vw + 10.35px, 13px)) * var(--nv-k) / var(--nv-z));
    }

    .product-callout-video-btn-no-video {
        font-size: calc((clamp(11.5px, 0.20vw + 10.35px, 13px)) * var(--nv-k) / var(--nv-z));
    }

    .no-video-msg {
        font-size: calc((10.5px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-tip {
        font-size: calc((13.5px) * var(--nv-k) / var(--nv-z));
    }

    .inspira-btn {
        font-size: calc((14px) * var(--nv-k) / var(--nv-z));
    }

    @media (min-width: 1500px) {
        .inspira-eyebrow {
            font-size: calc((17px) * var(--nv-k) / var(--nv-z));
        }

        .product-callout-desc {
            font-size: calc((15px) * var(--nv-k) / var(--nv-z));
        }

        .inspira-header-eyebrow {
            font-size: calc((17px) * var(--nv-k) / var(--nv-z));
        }

        .inspira-header-title {
            font-size: calc((clamp(52px, 3.33vw, 64px)) * var(--nv-k) / var(--nv-z));
        }

        .inspira-sub {
            font-size: calc((20px) * var(--nv-k) / var(--nv-z));
        }

        .kit-summary-card p {
            font-size: calc((18px) * var(--nv-k) / var(--nv-z));
        }
    }

    @media (max-width: 564px) {
        #inspira-view-acessorios .inspira-eyebrow {
            font-size: calc((10px) * var(--nv-k) / var(--nv-z)) !important;
        }

        #inspira-view-acessorios .inspira-title {
            font-size: calc((24px) * var(--nv-k) / var(--nv-z)) !important;
        }

        .inspira-tab {
            font-size: calc((11px) * var(--nv-k) / var(--nv-z));
        }

        .model-nav-arrow,
        .decor-nav-arrow {
            font-size: calc((18px) * var(--nv-k) / var(--nv-z));
        }
    }

    .inspira-legal-item,
    .inspira-legal-link {
        font-size: calc((11px) * var(--nv-k) / var(--nv-z));
    }
}