/* ==========================================================================
   NOBRE ORIQUE — CATÁLOGO DIGITAL — catalogo.css
   Stylesheet isolado (não importa style.css/mobile.css da Home). Composição,
   hierarquia, espaçamento e linguagem visual seguem os mockups aprovados em
   /referencias/catalogo/ (01 a 05). Cores base replicam os tokens já usados
   no resto do site (--bg/--gold/--gold2).
   Mobile-first: a experiência é desenhada para celular; no desktop, a mesma
   experiência fica centralizada num "app shell" de largura fixa.
   ========================================================================== */

:root{
  --bg:#070604;
  --panel:#151411;
  --panel2:#1c1a15;
  --gold:#c99627;
  --gold2:#f0c967;
  --gold-deep:#8a6215;
  --ink:#fff;
  --ink-dim:rgba(255,255,255,.68);
  --ink-faint:rgba(255,255,255,.46);
  --line:rgba(240,201,103,.32);
  --hairline:rgba(255,255,255,.08);
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,Montserrat,Arial,sans-serif;
  --mp:20px;
  --cw:1240px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--gold2); outline-offset:2px; border-radius:8px;
}
button{ font-family:inherit; }

#catalogApp{
  position:relative;
  min-height:100vh;
  max-width:480px;
  margin:0 auto;
  background:var(--bg);
  overflow-x:hidden;
  padding-bottom:32px;
}

.cat-screen[hidden]{ display:none !important; }

/* --------------------------------------------------------------------
   Ícone-chevron reutilizável (cards, ctas, banner)
   -------------------------------------------------------------------- */
.cat-chevron{ width:18px; height:18px; flex:0 0 auto; stroke:var(--gold2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cat-btn .cat-chevron{ stroke:currentColor; margin-left:auto; }

/* --------------------------------------------------------------------
   Banner persistente "Já tem um modelo em mente?" (Tipos/Listagem/
   Detalhe/Personalizar — mockups 01,02,03,04). Não aparece na Seleção.
   -------------------------------------------------------------------- */
.cat-banner{
  display:flex; align-items:center; gap:13px;
  margin:16px var(--mp) 0;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(240,201,103,.4);
  background:linear-gradient(135deg, #3d2b10, #6b4a1c 55%, var(--gold-deep));
}
.cat-banner-icon{ width:26px; height:26px; flex:0 0 auto; stroke:var(--gold2); fill:none; stroke-width:1.4; }
.cat-banner-body{ flex:1 1 auto; min-width:0; }
.cat-banner-title{ display:block; color:var(--ink); font-weight:700; font-size:13.5px; }
.cat-banner-desc{ display:block; color:rgba(255,255,255,.75); font-size:12px; margin-top:1px; }
.cat-banner .cat-chevron{ stroke:var(--gold2); }

/* --------------------------------------------------------------------
   Header — ícones soltos, sem fundo/borda, sem barra elevada (mockups
   mostram os ícones flutuando direto sobre o preto, sem "app bar").
   -------------------------------------------------------------------- */
.cat-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--mp) 6px;
  background:var(--bg);
  min-height:46px;
}
.cat-header-side{ display:flex; align-items:center; gap:16px; flex:0 0 auto; position:relative; z-index:1; }
.cat-header-icon{
  width:24px; height:24px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; background:none; border:0; padding:0; cursor:pointer;
}
.cat-header-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cat-header-logo-link{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  line-height:0;
}
.cat-header-logo{ width:112px; height:auto; display:block; }

/* O header institucional (public/catalogo/index.html) só deve aparecer no
   desktop — no mobile, a Nobre Orique já esconde esse mesmo header em
   troca de #mobileApp (regra inline no <head> de index.html, específica
   daquela página). Como esta página não tem #mobileApp, replicamos aqui
   apenas o toggle de visibilidade no mesmo breakpoint já usado em todo o
   site, para que o cat-header próprio do catálogo assuma no mobile. */
@media (max-width:768px){
  body > header.header{ display:none !important; }
}
/* No desktop (header institucional visível), a logo centralizada do
   cat-header interno passa a ser repetição pura (a marca já está no
   header institucional, junto do item "Catálogo") — some só nesse caso.
   No mobile ela continua com função real (é a única logo visível ali). */
@media (min-width:769px){
  .cat-header-logo-link{ display:none; }
}

/* Contenção da logo no header mobile (Tipos, Listagem, Detalhe, Seleção
   /s/:codigo e Personalização — todas reaproveitam .cat-header/.cat-banner).
   A logo (logo-mob.png, 354x236 — mais alta que larga) é centralizada por
   position:absolute dentro de .cat-header, que por padrão tem só ~46-48px
   de altura: a 112px de largura ela chega a ~75px de altura, quase o
   dobro da caixa do header, e por isso "vaza" pra fora dela — pra cima,
   invadindo/encostando no banner dourado (Tipos/Listagem/Detalhe/
   Personalização) ou sendo cortada pelo topo do viewport (Seleção, que
   não tem banner acima); e pra baixo, encostando no título/conteúdo
   seguinte. Correção comum: reduz a logo e dá altura própria ao header
   pra ela caber inteira, mais um respiro extra abaixo do banner nas
   telas que o têm. Sem efeito visual em Personalização (já usava estes
   mesmos valores, escopados) nem no header institucional (classes
   diferentes, .header, não .cat-header). */
@media (max-width:768px){
  .cat-banner{ margin-bottom:20px; }
  .cat-header{ min-height:72px; padding:16px var(--mp) 12px; }
  .cat-header-logo{ width:88px; }
}

.cat-search-bar{
  padding:0 var(--mp); max-height:0; overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
}
.cat-search-bar.is-open{ max-height:60px; padding:10px var(--mp) 4px; }
.cat-search-bar input{
  width:100%; height:44px; padding:0 16px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-size:14px; font-family:inherit;
}
.cat-search-bar input::placeholder{ color:var(--ink-faint); }

/* --------------------------------------------------------------------
   Bloco de título das telas (alinhado à esquerda em todas as telas)
   -------------------------------------------------------------------- */
.cat-hero{ padding:18px var(--mp) 4px; }
/* font-size/line-height com !important em .cat-hero-title e .cat-detail-name:
   style.css (header institucional, agora carregado nesta página) tem
   várias regras "h1{ font-size:clamp(...) !important }" — escritas só
   para o <h1> da Hero da Home — em breakpoints de largura (980px, 1180px,
   680px). Sem !important aqui, essas regras vencem qualquer <h1> do
   catálogo em qualquer largura onde alguma delas bater, independente de
   especificidade. Restaura exatamente os valores já aprovados. */
.cat-hero-title{ font-family:var(--serif); font-weight:600; font-size:27px !important; line-height:1.15 !important; margin:0 0 6px; letter-spacing:-.01em; }
.cat-hero-subtitle{ margin:0; color:var(--ink-dim); font-size:14px; line-height:1.4; }

/* --------------------------------------------------------------------
   TELA 1 — TIPOS
   -------------------------------------------------------------------- */
.cat-cards{ display:flex; flex-direction:column; gap:12px; padding:20px var(--mp) 6px; }

.cat-line-card{
  display:flex; align-items:center; gap:14px;
  padding:12px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.015);
}
.cat-line-card--featured{ border-color:var(--gold2); background:linear-gradient(160deg, rgba(240,201,103,.09), rgba(240,201,103,.015)); }
.cat-line-thumb{ position:relative; width:96px; height:96px; flex:0 0 auto; border-radius:12px; overflow:hidden; background:var(--panel2); }
.cat-line-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-line-body{ flex:1 1 auto; min-width:0; }
.cat-line-tag{
  display:inline-block; margin-bottom:6px; padding:3px 10px; border-radius:999px;
  border:1px solid rgba(240,201,103,.5); color:var(--gold2); font-size:9.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
/* line-height explícito em .cat-line-name/.cat-detail-name: sem ele, a
   regra global "h1,h2{line-height:.96}" de css/style.css (agora também
   carregado nesta página, para o header institucional real) vazaria
   para estes títulos — nenhuma outra propriedade do catálogo precisa
   disso porque já é sobrescrita explicitamente. */
/* font-size com !important: mesmo motivo do line-height acima — style.css
   tem "h2{font-size:clamp(...) !important}" em vários breakpoints (é um
   <h2> de verdade) que, sem isso, vaza e deixa o nome da linha enorme
   (chegou a 52px em telas largas) no Desktop Design Pass. */
.cat-line-name{ font-family:var(--serif); font-weight:600; font-size:19px !important; line-height:normal; margin:0; color:var(--ink); letter-spacing:-.01em; }
.cat-line-price{ display:block; margin-top:3px; font-size:13px; color:var(--ink-dim); }
.cat-line-price strong{ color:var(--gold2); font-size:16px; font-weight:800; margin-left:3px; }
.cat-line-tagline{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-faint); }
.cat-line-card .cat-chevron{ flex:0 0 auto; }

/* --------------------------------------------------------------------
   TELA 2 — LISTAGEM (sem filtros na V1 — a ficha de produto não tem
   material/acabamento garantidos, então não há o que filtrar por eles)
   -------------------------------------------------------------------- */
.cat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:18px var(--mp) 8px;
}
.cat-grid-item{
  display:block; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
}
.cat-grid-item[hidden]{ display:none; }
.cat-grid-photo{ position:relative; width:100%; aspect-ratio:5/4; background:var(--panel2); }
.cat-grid-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-grid-body{ padding:10px 12px 13px; }
.cat-grid-code{ display:block; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--ink); margin-bottom:2px; }
.cat-grid-name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:12.5px; color:var(--ink-faint); line-height:1.35;
}

.cat-empty{ padding:40px var(--mp); text-align:center; color:var(--ink-faint); font-size:13.5px; line-height:1.6; }

/* --------------------------------------------------------------------
   TELA 3 — DETALHE
   -------------------------------------------------------------------- */
.cat-gallery-wrap{ padding:6px var(--mp) 0; }
.cat-gallery{
  position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:18px; background:var(--panel);
}
.cat-gallery::-webkit-scrollbar{ display:none; }
.cat-gallery-slide{ flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4/3; position:relative; }
@media (max-width:680px){
  /* Imagem continua protagonista, mas com um teto de altura para não
     empurrar nome + CTAs para fora da primeira dobra em telas de
     celular mais estreitas/altas. */
  .cat-gallery-slide{ max-height:42vh; }
}
.cat-gallery-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-gallery-counter{
  position:absolute; right:12px; bottom:12px; z-index:3;
  padding:4px 11px; border-radius:999px; background:rgba(5,4,3,.72);
  color:#fff; font-size:11.5px; font-weight:700;
}
.cat-gallery-dots{
  display:flex; justify-content:center; gap:6px; padding:12px 0 4px;
}
.cat-gallery-dots i{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); font-style:normal;
}
.cat-gallery-dots i.is-active{ background:var(--gold2); }

.cat-detail-body{ padding:20px var(--mp) 0; }
.cat-detail-name{ font-family:var(--serif); font-weight:600; font-size:25px !important; line-height:normal !important; margin:0 0 6px; letter-spacing:-.01em; }
@media (max-width:680px){
  /* Ajuste mobile aprovado: um pouco maior que o desktop (25px), dentro
     de 30–36px conforme a largura, para manter identidade premium sem
     empurrar os CTAs para fora da primeira dobra. */
  .cat-detail-name{ font-size:clamp(30px,8vw,36px) !important; line-height:1.08 !important; }
}
.cat-detail-code{ display:block; font-size:12.5px; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:14px; }
.cat-detail-desc{ margin:0 0 18px; color:var(--ink-dim); font-size:14px; line-height:1.6; }
.cat-detail-divider{ height:1px; background:var(--line); border:0; margin:0 var(--mp) 18px; }

.cat-spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:0 var(--mp); margin-bottom:20px; }
.cat-spec-box{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:14px 8px; border-radius:14px; border:1px solid var(--line);
}
.cat-spec-box svg{ width:22px; height:22px; stroke:var(--gold2); fill:none; stroke-width:1.4; }
.cat-spec-value{ font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink); line-height:1.25; }
.cat-spec-label{ font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }

.cat-cta-group{ display:flex; flex-direction:column; gap:10px; padding:0 var(--mp) 4px; }
.cat-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:12px 16px; border-radius:999px; font-size:13px; font-weight:800;
  letter-spacing:.01em; text-align:center; border:1px solid transparent; width:100%;
}
.cat-btn-primary{
  background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold-deep)); color:#120d05;
  box-shadow:0 14px 34px rgba(201,150,39,.28);
}
.cat-btn-secondary{ background:rgba(255,255,255,.03); color:#fff; border-color:rgba(240,201,103,.45); }
.cat-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; flex:0 0 auto; }
.cat-btn svg.cat-icon-fill{ stroke:none; fill:currentColor; }
.cat-btn span{ flex:0 1 auto; min-width:0; line-height:1.25; }

.cat-footnote{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:18px var(--mp) 4px; color:var(--ink-faint); font-size:12px;
}
.cat-footnote::before, .cat-footnote::after{ content:""; height:1px; width:26px; background:var(--line); }

/* --------------------------------------------------------------------
   Linhas com ícone (Personalização: passos e nota final) — bordered,
   ícone à esquerda, texto no meio, chevron opcional à direita.
   -------------------------------------------------------------------- */
.cat-rows{ display:flex; flex-direction:column; gap:12px; padding:20px var(--mp) 4px; }
.cat-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:16px; border:1px solid var(--line);
}
.cat-row-icon{ width:26px; height:26px; flex:0 0 auto; stroke:var(--gold2); fill:none; stroke-width:1.4; }
.cat-row-body{ flex:1 1 auto; min-width:0; }
.cat-row-title{ display:block; font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); }
.cat-row-desc{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-faint); line-height:1.4; }
.cat-row--info .cat-row-title{ font-family:var(--sans); font-size:14.5px; font-weight:700; }

/* Variante sem aparência de card/botão — conteúdo editorial, não uma ação
   (Personalização: os 3 itens informativos e a nota final). Sem borda,
   sem raio, sem seta; integra ao fundo da página, com um fio dourado
   discreto separando os itens consecutivos entre si. */
.cat-row--plain{ border:none; border-radius:0; padding:14px 0; background:transparent; }
.cat-row--plain + .cat-row--plain{ border-top:1px solid var(--line); }

/* --------------------------------------------------------------------
   PERSONALIZAÇÃO
   -------------------------------------------------------------------- */

/* Banner "Já tem um modelo em mente?" nesta tela: gradiente um pouco mais
   rico + brilho/sheen discreto, para dar destaque premium sem virar
   "anúncio". Escopado a #catPersonalizar (não mexe no banner das outras
   telas, que compartilham a mesma classe .cat-banner). */
#catPersonalizar .cat-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #3d2b10 0%, #6b4a1c 45%, #8a6215 75%, #6b4a1c 100%);
  box-shadow:0 10px 28px rgba(201,150,39,.18), inset 0 1px 0 rgba(240,201,103,.3), inset 0 -1px 0 rgba(0,0,0,.22);
}
#catPersonalizar .cat-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.14) 52%, rgba(255,255,255,.08) 56%, transparent 66%);
}
#catPersonalizar .cat-banner-icon,
#catPersonalizar .cat-banner-body,
#catPersonalizar .cat-banner .cat-chevron{ position:relative; z-index:1; }

/* Contenção da logo/respiro do banner: regra comum a todas as telas
   mobile do catálogo, ver comentário junto de .cat-header-logo. Nada
   específico de Personalização aqui (já herda o mesmo valor). */

.cat-personalizar-media{ margin:14px var(--mp) 0; border-radius:18px; overflow:hidden; aspect-ratio:4/3; position:relative; background:var(--panel); }
.cat-personalizar-media img,
.cat-personalizar-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat-personalizar-media .cat-personalizar-video--intro{ z-index:1; }
.cat-personalizar-media .cat-personalizar-video--intro.is-hidden{ opacity:0; }
.cat-personalizar-media .cat-personalizar-video--loop{ z-index:1; opacity:0; }
.cat-personalizar-media .cat-personalizar-video--loop.is-active{ opacity:1; }
.cat-personalizar-media .cat-personalizar-poster{ z-index:2; pointer-events:none; transition:opacity .25s ease; }
.cat-personalizar-media .cat-personalizar-poster.is-hidden{ opacity:0; }

.cat-ref-chip{
  margin:16px var(--mp) 0; padding:12px 15px; border-radius:14px;
  background:rgba(240,201,103,.07); border:1px solid var(--line);
  color:var(--ink-dim); font-size:12.5px; line-height:1.5;
}
.cat-ref-chip strong{ color:var(--gold2); font-weight:700; }

/* --------------------------------------------------------------------
   Pílula de destaque (ex.: "Seleção especial")
   -------------------------------------------------------------------- */
.cat-pill{
  display:flex; align-items:center; gap:8px; width:fit-content;
  margin:16px auto 4px; padding:9px 18px; border-radius:999px;
  border:1px solid rgba(240,201,103,.5); color:var(--gold2); font-size:13px; font-weight:700;
}
.cat-pill svg{ width:17px; height:17px; stroke:var(--gold2); fill:none; stroke-width:1.4; }

/* --------------------------------------------------------------------
   Toast de compartilhamento (feedback do fallback de copiar link —
   sem modal, some sozinho)
   -------------------------------------------------------------------- */
.cat-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100;
  background:rgba(20,17,10,.95); border:1px solid var(--line); color:var(--ink);
  padding:11px 20px; border-radius:999px; font-size:13px; font-weight:700;
  box-shadow:0 12px 30px rgba(0,0,0,.4); max-width:calc(100% - 40px); text-align:center;
}

/* ==========================================================================
   DESKTOP DESIGN PASS (≥769px)
   Composição própria — não é o mobile ampliado. Nada aqui é lido pelo
   @media(max-width:768px) aprovado (header/logo/banner incluídos), que
   permanece intocado. #catalogApp deixa de ser um "app shell" de 480px
   emoldurado e passa a se comportar como uma seção full-bleed do site
   institucional: cada bloco de topo de tela ganha seu próprio
   max-width:var(--cw) centralizado — mesma métrica do .container
   institucional (public/css/style.css, 1240px) — sem inventar um grid
   novo. Sem wrapper de HTML/JS novo em nenhuma tela, exceto
   Personalização (.cat-personalizar-layout, ver catalogo-app.js).
   ========================================================================== */
@media (min-width:769px){
  #catalogApp{
    max-width:none;
    margin:0;
    min-height:0;
    padding-bottom:0;
    border:0; border-radius:0; box-shadow:none; overflow:visible;
  }

  /* Container editorial compartilhado (sem wrapper novo — aplicado direto
     em cada bloco de topo já existente de cada tela). */
  .cat-banner,
  .cat-header,
  .cat-hero,
  .cat-cards,
  .cat-grid,
  #catDetalheBody,
  .cat-personalizar-layout,
  #catSelecaoBody{
    max-width:var(--cw);
    margin-left:auto;
    margin-right:auto;
  }

  /* ---- Header do catálogo (voltar/buscar/compartilhar) ----
     A logo já some (regra existente logo acima) — a marca já está no
     header institucional. Vira uma linha utilitária discreta e estática
     (nem o header institucional é sticky hoje — ver style.css .header),
     não um segundo header fixo. */
  .cat-header{
    position:static;
    min-height:0;
    padding:16px 24px 0;
  }

  /* ---- Banner "Já tem um modelo em mente?" — faixa compacta ----
     Ajuste Fase "Escala desktop": margem superior reduzida (24px -> 16px)
     só para recuperar espaço vertical na primeira dobra — mesmo texto,
     mesmo padding interno, mesma identidade. */
  .cat-banner{
    margin-top:16px; margin-bottom:0;
    padding:14px 24px;
    gap:16px;
  }
  .cat-banner-title{ font-size:14px; }
  .cat-banner-desc{ font-size:12.5px; }

  /* ----------------------------------------------------------------
     TELA 1 — TIPOS: composição editorial (título largo + grid, uma
     linha em destaque por largura de coluna, não por altura — evita
     depender de contagem de linhas/dados para o grid-row funcionar).
     Ajuste Fase "Escala desktop": .cat-hero (título com padding-top
     40px->28px) é compartilhado por Tipos/Listagem/Detalhe — reduzir
     aqui recupera espaço vertical nas três telas de uma vez, sem
     redesenhar nada (mesmo título, mesma fonte, mesmo alinhamento).
     ---------------------------------------------------------------- */
  .cat-hero{ padding:28px 24px 8px; }
  .cat-hero-title{ font-size:clamp(32px,3vw,44px) !important; }
  .cat-hero-subtitle{ font-size:16px; }

  .cat-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
    padding:20px 24px 40px;
  }
  .cat-line-card{
    flex-direction:column; align-items:stretch; gap:0; padding:0;
    position:relative;
  }
  /* Fotos mais baixas (altura fixa por vh, não mais aspect-ratio) para
     mostrar o conjunto de categorias sem rolar tanto — mesmo
     border-radius/overflow/object-fit, card Essenciais (--featured)
     continua distinto (mais alto que os demais), só que também mais
     compacto que antes. */
  .cat-line-thumb{
    width:100%; aspect-ratio:auto; height:clamp(150px,18vh,190px);
    border-radius:16px 16px 0 0; flex:none;
  }
  .cat-line-name{ font-size:21px !important; }
  .cat-line-card--featured{ grid-column:span 2; }
  .cat-line-card--featured .cat-line-thumb{ aspect-ratio:auto; height:clamp(170px,22vh,220px); }
  .cat-line-card--featured .cat-line-name{ font-size:26px !important; }
  .cat-line-body{ padding:14px 18px 16px; }
  .cat-line-card .cat-chevron{
    position:absolute; top:14px; right:14px; z-index:1;
    width:30px; height:30px; padding:6px; box-sizing:border-box;
    background:rgba(5,4,3,.55); border-radius:50%;
  }

  /* ----------------------------------------------------------------
     TELA 2 — LISTAGEM: 4 colunas fixas no desktop (não mais auto-fit —
     o objetivo explícito é sempre 4 por linha aqui, e depender de
     minmax() pra isso é frágil: qualquer ajuste futuro de gap/padding
     pode fazer o navegador cair para 3 ou subir para 5 colunas sem
     aviso). Fotos com altura fixa por vh (não mais aspect-ratio) —
     é a mudança que mais recupera altura: de ~500-600px pra
     ~190-260px, permitindo a primeira linha inteira já na primeira
     dobra em 1366-1920px de largura.
     ---------------------------------------------------------------- */
  .cat-grid{
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    padding:8px 24px 40px;
  }
  .cat-grid-photo{ aspect-ratio:auto; height:clamp(190px,24vh,260px); }
  .cat-grid-body{ padding:12px 14px 14px; }
  .cat-grid-code{ font-size:13px; }
  .cat-grid-name{ font-size:13.5px; }

  /* Busca deixa de ser um dropdown do header (padrão mobile) e fica
     sempre aberta, integrada abaixo do título — mesmo input/lógica de
     filtro já existentes (catalogo-app.js), só a apresentação muda. */
  .cat-search-bar{
    max-height:none; overflow:visible;
    max-width:var(--cw); margin:0 auto;
    padding:0 24px 16px;
  }
  #catSearchToggle{ display:none; }

  /* ----------------------------------------------------------------
     TELA 3 — DETALHE: split ~58/42, 100% CSS Grid (sem wrapper novo).
     .cat-gallery-wrap é o único filho posicionado explicitamente na
     coluna 1 (grid-row com folga generosa — o excesso é descartado
     pelo próprio Grid, não cria linhas vazias visíveis); os demais
     blocos (.cat-detail-body, spec-grid opcional, cta-group, footnote)
     são fixados individualmente na coluna 2 pelo próprio seletor de
     classe — não por ordem/auto-flow, então um bloco novo inserido no
     futuro só precisa de uma linha "grid-column:2" própria, sem
     depender da posição dos outros.
     ---------------------------------------------------------------- */
  /* Ajuste Fase "Escala desktop": coluna da imagem cai de 58% para 54%
     (mais espaço pra nome/descrição/CTAs na coluna 2) e o padding
     vertical do bloco encolhe (32/56 -> 24/40) — mesmo split conceitual
     em duas colunas, só menos generoso nas margens. */
  #catDetalheBody{
    display:grid;
    grid-template-columns:54% 1fr;
    column-gap:48px;
    align-items:start;
    padding:24px 24px 40px;
  }
  .cat-gallery-wrap{
    grid-column:1; grid-row:1 / span 12;
    padding:0; position:sticky; top:24px;
  }
  /* QA de escala (notebooks 1366x768/1440x800/1920x800 etc.) mostrou que
     travar a ALTURA com a largura da coluna fixa (54%) fazia o
     object-fit:cover cortar a foto: a proporção 4/5 vencia pela largura,
     não pela altura, então em telas baixas a foto crescia verticalmente
     até estourar o teto e ser cortada por cima/baixo. Corrigido invertendo
     quem manda: a altura disponível define o teto, a largura é DERIVADA
     dela — sem recorte e sem precisar de outro breakpoint de largura (o
     min() abaixo já cobre tela alta-estreita e larga-baixa com a mesma
     conta). display:inline-flex é o que permite a largura encolher junto
     com aspect-ratio em vez de sempre ocupar 100% da coluna.
     min() escolhe o menor teto entre:
       - calc(100vh - 232px): orçamento vertical da 1ª dobra medido no
         navegador (topo da galeria fica a ~219px do topo do viewport,
         soma de header institucional + banner + linha utilitária +
         padding do bloco — constante em qualquer largura) + ~13px de
         respiro antes do fim da tela;
       - calc(0.675 * (min(100vw,1240px) - 48px)): a altura que a foto
         teria se ocupasse a coluna inteira (54% do miolo do bloco, teto
         --cw:1240px) na proporção 4/5 (0.54 * 1.25 = 0.675) — em telas
         altas (1920x1080) é este teto que limita, deixando a imagem
         crescer até preencher a coluna, como antes.
     Como a largura final (altura * 0.8) nunca ultrapassa a coluna (a
     conta acima garante isso por construção), a imagem 4:5 sempre aparece
     inteira — nunca cortada, nunca distorcida, e sem barra preta artificial
     dentro do quadro (só sobra espaço ao LADO da imagem, dentro da coluna,
     nas telas mais baixas). */
  .cat-gallery{
    display:inline-flex;
    aspect-ratio:4/5;
    height:min(calc(100vh - 232px), calc(0.675 * (min(100vw,1240px) - 48px)));
    width:auto;
    max-width:100%;
  }
  /* A base (mobile) usa aspect-ratio:4/3 no slide — sem sobrescrever aqui
     para bater com o 4/5 do .cat-gallery, o slide (flex-basis:100%) cai
     num fallback de sizing que usa a própria aspect-ratio em vez de
     acompanhar a largura do container, e estoura pro lado (4/3 é mais
     largo que 4/5 pra mesma altura). */
  .cat-gallery-slide{ aspect-ratio:4/5; }
  #catDetalheBody .cat-detail-body{ grid-column:2; padding:0 0 8px; }
  #catDetalheBody .cat-detail-divider{ grid-column:2; margin:0 0 18px; }
  #catDetalheBody .cat-spec-grid{ grid-column:2; padding:0; margin-bottom:0; }
  #catDetalheBody .cat-cta-group{ grid-column:2; padding:0; max-width:360px; }
  #catDetalheBody .cat-footnote{ grid-column:2; margin:16px 0 0; justify-content:flex-start; }
  #catDetalheBody .cat-footnote::before{ display:none; }
  .cat-detail-name{ font-size:clamp(32px,2.6vw,42px) !important; line-height:1.08 !important; }

  /* ----------------------------------------------------------------
     PERSONALIZAÇÃO: wrapper estrutural próprio (.cat-personalizar-layout),
     ver catalogo-app.js — duas áreas nomeadas (mídia / conteúdo), não
     posicionamento por ordem dos filhos.
     ---------------------------------------------------------------- */
  /* Split 58/42 mantido (pedido explícito) — só o padding vertical do
     bloco encolhe, mesmo ajuste do Detalhe. */
  .cat-personalizar-layout{
    display:grid;
    grid-template-columns:58% 1fr;
    column-gap:56px;
    align-items:start;
    padding:24px 24px 40px;
  }
  .cat-personalizar-media-col{ grid-column:1; grid-row:1; position:sticky; top:24px; }
  .cat-personalizar-content-col{ grid-column:2; grid-row:1; }
  /* Mídia menor sem tocar em proporção 4:3/vídeo/poster: a proporção é
     do container (aspect-ratio:4/3 na regra base, não redefinida aqui)
     — só damos a ele um teto de largura menor que a coluna inteira
     (~659px hoje), então a altura encolhe junto, na mesma proporção,
     sem cortar nem esticar o vídeo. */
  .cat-personalizar-media-col .cat-personalizar-media{ margin:0; max-width:480px; }
  .cat-personalizar-content-col .cat-ref-chip{ margin-left:0; margin-right:0; }
  .cat-personalizar-content-col .cat-rows{ padding-left:0; padding-right:0; }
  .cat-personalizar-content-col .cat-cta-group{ padding-left:0; padding-right:0; max-width:420px; }

  /* ----------------------------------------------------------------
     SELEÇÃO (/s/:codigo): continua isolada (sem header institucional/
     footer), mas larga — mesmo grid fluido da Listagem.
     ---------------------------------------------------------------- */
  #catSelecaoBody{ padding:32px 24px 56px; }
  #catSelecaoBody .cat-grid{ max-width:none; margin:0; padding:0 0 32px; }
  .cat-pill{ margin:8px 0 24px; }
  #catSelecaoBody .cat-rows{ max-width:560px; }
  #catSelecaoBody .cat-cta-group{ max-width:360px; }
}

@media (prefers-reduced-motion:reduce){
  * { transition:none !important; }
}

/* --------------------------------------------------------------------
   Rodapé institucional — entra naturalmente depois de #catalogApp
   (nunca position:fixed); mesmo texto do footer real do site.
   -------------------------------------------------------------------- */
.cat-footer{ padding:20px var(--mp) 28px; }
.cat-footer-copy{ margin:0; color:var(--ink-faint); font-size:10.5px; line-height:1.6; text-align:center; }
.cat-footer-copy a{ color:var(--ink-dim); text-decoration:underline; }

/* Rodapé institucional completo (novo bloco em public/catalogo/index.html,
   só existe nessa página — /s/index.html não tem). Regra absoluta: nunca
   os dois rodapés visíveis ao mesmo tempo. Escondido por padrão (mobile);
   no desktop troca de lugar com .cat-footer. */
footer.footer{ display:none; }
@media (min-width:769px){
  footer.footer{ display:block; }
  .cat-footer{ display:none; }
}