/* ==========================================================================
   Solmais Engenharia — página Obras
   Implementação do frame "v1" (327:99, 1920px) e do "Mobile" (327:658,
   420px) da seção Obras do Figma. Carregado depois de style.css: usa os
   mesmos tokens e componentes (abertura, cabeçalho, menu, pills, botões,
   título grande, controles dos carrosséis e Rodapé).
   ========================================================================== */

/* ==========================================================================
   ABERTURA (base em style.css): texto centralizado no pé
   ========================================================================== */
/* Recorte do Figma: a foto cobre a largura e mostra a faixa a 38,8% da altura */
.abertura__foto {
  object-position: 50% 38.8%;
}

/* Sombras do Figma, de cima para baixo: base, tom da marca e o brilho claro
   no canto superior esquerdo */
.abertura__sombra {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.85) 100%),
    linear-gradient(180deg, rgba(2, 41, 78, 0.44) 0%, rgba(1, 18, 36, 0.56) 100%),
    linear-gradient(-56.48deg, rgba(255, 255, 255, 0) 73.605%, rgba(255, 255, 255, 0.595) 99.632%);
}

/* ==========================================================================
   GALERIA DE OBRAS
   Filtro (360px, fixo ao rolar) + resultados. Até 1280px o filtro vai para
   cima e vira uma faixa de pílulas
   ========================================================================== */
.galeria {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  column-gap: 48px;
  margin-top: clamp(56px, 6.4583vw, 124px); /* 124px em 1920 */
  scroll-margin-top: 24px; /* ao trocar o filtro lá embaixo, volta para cá */
}

.galeria__lateral {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tipo de obra ---------------------------------------------------------- */
.filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 16px 16px;
  border-radius: 20px;
  background: var(--cor-branco);
}

.filtro__rotulo {
  padding: 0 8px 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

/* "Arraste →" só aparece com as pílulas */
.filtro__dica {
  display: none;
}

.filtro__opcoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filtro__opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filtro__opcao:hover {
  background: rgba(2, 41, 78, 0.03);
}

.filtro__opcao:has(:checked) {
  background: rgba(2, 41, 78, 0.06);
  font-weight: 600;
  color: var(--cor-azul);
}

.filtro__opcao:has(:focus-visible) {
  outline: 2px solid var(--cor-preto);
  outline-offset: 2px;
}

/* O rádio de verdade fica invisível por cima da opção: clique, teclado
   (setas) e leitores de tela funcionam como num grupo de rádios comum */
.filtro__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.filtro__radio {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}

.filtro__entrada:checked + .filtro__radio {
  box-shadow: none;
  background: url("../assets/icons/radio-ativo.svg") center / 100% 100% no-repeat;
}

.filtro__nome {
  flex: 1;
  min-width: 0;
}

.filtro__contagem {
  flex: none;
  padding: 2px 8px;
  border-radius: 60px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

.filtro__opcao:has(:checked) .filtro__contagem {
  background: var(--cor-amarelo);
  color: var(--cor-azul);
}

/* Sobre esta categoria (troca com o filtro) ----------------------------- */
.categoria {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background: var(--cor-azul);
  color: var(--cor-branco);
}

.categoria__rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.categoria__rotulo .ponto {
  width: 9px;
  height: 9px;
}

.categoria__texto {
  font-family: var(--fonte-poppins);
  font-size: 17px;
  line-height: 27px;
}

/* Nota da câmera */
.galeria__nota {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1px 8px;
  font-family: var(--fonte-poppins);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

/* O ícone tem 14 × 11,5 no Figma; o SVG inclui a espessura do traço */
.galeria__nota img {
  flex: none;
  width: 15.3px;
  height: 12.8px;
  margin: -0.65px;
}

/* Resultados ------------------------------------------------------------ */
.galeria__resultados {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.resultados__titulo-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.resultados__titulo {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}

.resultados__contagem {
  font-family: var(--fonte-poppins);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

/* Mosaico | Grade */
.visualizacao {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 4px;
  border-radius: 60px;
  background: var(--cor-branco);
}

.visualizacao__opcao {
  padding: 8px 16px;
  border-radius: 60px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.visualizacao__opcao:hover {
  color: var(--cor-preto);
}

.visualizacao__opcao[aria-pressed="true"] {
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Sem JS não há filtro, visualização nem "carregar mais": todas as fotos
   aparecem */
html:not(.js) .filtro,
html:not(.js) .visualizacao,
html:not(.js) .carregar {
  display: none;
}

/* Mosaico ---------------------------------------------------------------
   Grade de 6 colunas e 16px de vão. As alturas acompanham a largura do
   mosaico, como no Figma em 1272px: linha 320, coluna 272 (a foto grande
   ocupa duas colunas, 560). Por padrão cada foto é uma "linha" de três;
   no modo Mosaico, o CSS desenha os blocos pela posição de cada foto entre
   as visíveis (:nth-child(... of :not([hidden]))) */
.mosaico {
  --vao: 16px;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

.obra-foto {
  --altura-linha: calc((100cqw - 2 * var(--vao)) / 3 * 0.774194);
  --altura-coluna: calc((100cqw - 2 * var(--vao)) / 3 * 0.658065);

  position: relative;
  grid-column: span 2;
  height: var(--altura-linha);
}

@media (min-width: 768px) {
  /* Bloco destaque: a 1ª de cada 12 fica grande à esquerda, com a 2ª e a
     3ª empilhadas à direita; a 7ª fica grande à direita, com a 8ª e a 9ª
     à esquerda. As outras seis formam duas linhas de três */
  .mosaico:not(.is-grade) > .obra-foto:nth-child(12n+1 of :not([hidden])) {
    grid-column: 1 / span 4;
    grid-row: span 2;
    height: auto;
  }

  .mosaico:not(.is-grade) > .obra-foto:is(:nth-child(12n+2 of :not([hidden])), :nth-child(12n+3 of :not([hidden]))) {
    grid-column: 5 / span 2;
    height: var(--altura-coluna);
  }

  .mosaico:not(.is-grade) > .obra-foto:nth-child(12n+7 of :not([hidden])) {
    grid-column: 3 / span 4;
    grid-row: span 2;
    height: auto;
  }

  .mosaico:not(.is-grade) > .obra-foto:is(:nth-child(12n+8 of :not([hidden])), :nth-child(12n+9 of :not([hidden]))) {
    grid-column: 1 / span 2;
    height: var(--altura-coluna);
  }

  /* Sobras no fim (as fotos andam de três em três): uma foto sozinha ocupa
     a linha inteira; duas dividem a linha ao meio (628px no Figma) */
  .mosaico:not(.is-grade) > .obra-foto:nth-child(3n+1 of :not([hidden])):nth-last-child(1 of :not([hidden])) {
    grid-column: 1 / -1;
    grid-row: auto;
    height: var(--altura-linha);
  }

  .mosaico:not(.is-grade) > .obra-foto:nth-child(3n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])),
  .mosaico:not(.is-grade) > .obra-foto:nth-child(3n+2 of :not([hidden])):nth-last-child(1 of :not([hidden])) {
    grid-column: span 3;
    grid-row: auto;
    height: var(--altura-linha);
  }
}

/* A foto é um link para a versão grande (sem JS abre o arquivo; com JS,
   a foto ampliada) */
.obra-foto__link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #dbdbdb;
}

.obra-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Estado hover do Figma: sombra na base, a categoria e o botão de ampliar */
.obra-foto__link::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  content: "";
}

.obra-foto__categoria,
.obra-foto__ampliar {
  position: absolute;
  bottom: 16px;
  z-index: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.obra-foto__categoria {
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 60px;
  background: var(--cor-branco);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--cor-preto);
  white-space: nowrap;
}

.obra-foto__categoria img {
  flex: none;
  width: 7px;
  height: 7px;
}

.obra-foto__ampliar {
  right: 16px;
  width: 44px;
  height: 44px;
}

.obra-foto__link:focus-visible::after,
.obra-foto__link:focus-visible .obra-foto__categoria,
.obra-foto__link:focus-visible .obra-foto__ampliar {
  opacity: 1;
  transform: none;
}

/* Hover só com mouse (no toque, a foto abre direto) */
@media (hover: hover) {
  .obra-foto__link:hover::after,
  .obra-foto__link:hover .obra-foto__categoria,
  .obra-foto__link:hover .obra-foto__ampliar {
    opacity: 1;
    transform: none;
  }
}

/* Carregar mais --------------------------------------------------------- */
.carregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
}

.carregar__texto {
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.carregar__progresso {
  width: 240px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.carregar__barra {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--cor-azul);
  transition: width 0.4s ease;
}

/* Botão secundário (contorno) */
.botao--secundario {
  padding: 14px 28px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 17px;
  line-height: 22px;
  color: var(--cor-preto);
}

.botao--secundario:hover {
  background: var(--cor-preto);
  color: var(--cor-branco);
}

.botao--secundario[hidden] {
  display: none;
}

/* ==========================================================================
   O QUE NÃO APARECE NA FOTO
   ========================================================================== */
.nao-aparece {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 120px;
  margin-top: var(--espaco-secao);
  padding: 80px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Quadros no canto superior esquerdo (o desenho do Figma girado 180°) */
.nao-aparece__quadros {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 418px;
  height: 418px;
  pointer-events: none;
}

.nao-aparece__quadros img {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: rotate(180deg);
}

.nao-aparece__titulo-bloco {
  display: flex;
  flex: 0 0 620px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.nao-aparece .pill--escura {
  padding-inline: 20px;
}

.nao-aparece__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.nao-aparece__texto {
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.88);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.etiquetas li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
}

.etiquetas li::before {
  flex: none;
  width: 20px;
  height: 20px;
  background: url("../assets/icons/check-etiqueta.svg") center / 100% 100% no-repeat;
  content: "";
}

/* Rodapé: 20px abaixo do Fechamento, como em Serviços. No celular vale o
   espaço entre seções de style.css */
@media (min-width: 768px) {
  .rodape {
    margin-top: 20px;
  }
}

/* ==========================================================================
   FOTO AMPLIADA (lightbox)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 32px 28px;
  border: 0;
  background: rgba(1, 18, 36, 0.98);
  color: var(--cor-branco);
  overflow: hidden;
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
}

.lightbox::backdrop {
  background: transparent;
}

/* Trava a rolagem da página com a foto aberta */
html.lightbox-aberta {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-entra 0.25s ease;
  }
}

@keyframes lightbox-entra {
  from {
    opacity: 0;
  }
}

.lightbox button:focus-visible {
  outline: 2px solid var(--cor-amarelo-vivo);
  outline-offset: 3px;
  box-shadow: none;
}

.lightbox__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* A mesma pílula de categoria do hover das fotos */
.lightbox__categoria {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 60px;
  background: var(--cor-branco);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--cor-preto);
}

.lightbox__categoria img {
  flex: none;
  width: 7px;
  height: 7px;
}

.lightbox__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.lightbox__fechar:hover {
  transform: rotate(90deg);
}

.lightbox__fechar img {
  width: 44px;
  height: 44px;
}

/* O JS dá à foto a maior medida que cabe no palco */
.lightbox__palco {
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: pan-y;
}

/* A foto (e não o <picture> em volta) é o item centralizado */
.lightbox__palco > picture {
  display: contents;
}

.lightbox__foto {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox__foto.is-carregada {
  opacity: 1;
}

.lightbox__controles {
  width: min(100%, 480px);
  margin-inline: auto;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* Notebooks pequenos e tablet: filtro em cima, em pílulas que rolam para o
   lado (até a borda da tela), e os resultados na largura toda */
@media (max-width: 1280px) {
  .galeria {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .galeria__lateral {
    position: static;
    gap: 20px;
  }

  .galeria__nota {
    display: none;
  }

  .filtro {
    gap: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .filtro__rotulo {
    padding: 0;
  }

  /* 4px de folga em cima e embaixo para o contorno de foco não ser cortado */
  .filtro__opcoes {
    flex-direction: row;
    gap: 8px;
    margin: -4px calc(-1 * var(--margem));
    padding: 4px 0 4px var(--margem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .filtro__opcoes::-webkit-scrollbar {
    display: none;
  }

  /* Respiro no fim da rolagem, até a borda da tela */
  .filtro__opcoes::after {
    flex: 0 0 calc(var(--margem) - 8px);
    content: "";
  }

  /* Pílula de 42px (a ativa ganha a borda na própria cor, para não mudar de
     tamanho ao trocar) */
  .filtro__opcao {
    flex: none;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 60px;
    background: var(--cor-branco);
    font-size: 15px;
    line-height: 20px;
    color: var(--cor-preto);
    white-space: nowrap;
  }

  .filtro__opcao:hover {
    border-color: rgba(0, 0, 0, 0.25);
    background: var(--cor-branco);
  }

  .filtro__opcao:has(:checked) {
    border-color: var(--cor-azul);
    background: var(--cor-azul);
    color: var(--cor-branco);
  }

  .filtro__radio {
    display: none;
  }

  .filtro__nome {
    flex: none;
  }

  .filtro__contagem {
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 11px;
    line-height: 14px;
  }

  /* O que não aparece na foto: título em cima do texto */
  .nao-aparece {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 60px 40px;
  }

  .nao-aparece__titulo-bloco,
  .nao-aparece__corpo {
    flex: none;
    max-width: 800px;
  }
}

@media (max-width: 960px) {
  .filtro__dica {
    display: inline;
  }

  .nao-aparece {
    padding: 40px var(--margem-card);
  }
}

/* ==========================================================================
   LAYOUT MOBILE (Figma: Obras › Mobile, 420px) — até 767px
   Cards escuros a 8px da borda, conteúdo a 20px e 72px entre as seções
   ========================================================================== */
@media (max-width: 767px) {
  /* Abertura: texto alinhado à esquerda e a sombra de leitura do Figma ----- */
  .abertura__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.495) 0%, rgba(2, 41, 78, 0.135) 22%, rgba(1, 18, 36, 0.495) 50%, rgba(0, 0, 0, 0.828) 78%);
  }

  /* Galeria -------------------------------------------------------------- */
  .galeria {
    margin-top: var(--espaco-secao);
  }

  .filtro__rotulo {
    font-size: 11px;
    line-height: 14px;
  }

  .categoria {
    gap: 10px;
    padding: 20px;
    border-radius: 16px;
  }

  .categoria__rotulo {
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
  }

  .categoria__rotulo .ponto {
    width: 8px;
    height: 8px;
  }

  .categoria__texto {
    font-size: 15px;
    line-height: 24px;
  }

  .galeria__resultados {
    gap: 16px;
  }

  .resultados {
    padding: 8px 0 12px;
  }

  .resultados__titulo-bloco {
    flex: 1;
    justify-content: space-between;
  }

  .resultados__titulo {
    font-size: 22px;
    line-height: 28px;
  }

  .resultados__contagem {
    font-size: 13px;
    line-height: 18px;
  }

  /* No celular o mosaico é sempre o do Figma */
  .visualizacao {
    display: none;
  }

  /* Mosaico em duas colunas e 10px de vão. Por padrão, pares de 185 × 185
     (em 380px). A 1ª e a 6ª de cada 12 ocupam a largura (380 × 250), menos
     quando sobram só elas duas no fim: aí formam um par. A 11ª sozinha no
     fim também fica grande, e a 4ª ou a 9ª sozinhas ficam na largura toda,
     na altura do par */
  .mosaico {
    --vao: 10px;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .obra-foto {
    grid-column: auto;
    height: calc((100cqw - var(--vao)) / 2);
  }

  .obra-foto:is(:nth-child(12n+1 of :not([hidden])), :nth-child(12n+6 of :not([hidden]))):not(:nth-last-child(2 of :not([hidden]))),
  .obra-foto:nth-child(12n+11 of :not([hidden])):nth-last-child(1 of :not([hidden])) {
    grid-column: 1 / -1;
    height: calc(100cqw * 250 / 380);
  }

  .obra-foto:is(:nth-child(12n+4 of :not([hidden])), :nth-child(12n+9 of :not([hidden]))):nth-last-child(1 of :not([hidden])) {
    grid-column: 1 / -1;
  }

  .obra-foto__link {
    border-radius: 14px;
  }

  .carregar {
    gap: 12px;
    padding-top: 12px;
  }

  .carregar__texto {
    font-size: 13px;
    line-height: 18px;
  }

  .carregar__progresso {
    width: 200px;
  }

  .carregar .botao--secundario {
    align-self: stretch;
    font-size: 16px;
  }

  /* Fecho da página: os dois cards juntos, 12px entre eles ---------------- */
  .nao-aparece {
    gap: 20px;
    width: auto;
    margin-inline: 8px;
    padding: 40px 20px;
    border-radius: 20px;
  }

  .nao-aparece__quadros {
    display: none;
  }

  .nao-aparece__titulo-bloco,
  .nao-aparece__corpo {
    gap: 20px;
  }

  .nao-aparece .pill--escura {
    padding-inline: 14px;
  }

  /* O título corre contínuo, sem a quebra antes de "na foto" */
  .nao-aparece .titulo-grande br {
    display: none;
  }

  .nao-aparece__texto {
    font-size: 15px;
    line-height: 25px;
  }

  .etiquetas {
    gap: 8px;
  }

  .etiquetas li {
    gap: 8px;
    padding: 8px 14px 8px 12px;
    font-size: 14px;
    line-height: 18px;
  }

  .etiquetas li::before {
    width: 18px;
    height: 18px;
    background-image: url("../assets/icons/check-etiqueta-18.svg");
  }

  /* Foto ampliada: setas de 40px e a barra fina dos carrosséis no celular */
  .lightbox {
    padding: 16px 16px 20px;
  }

  .lightbox .seta,
  .lightbox .seta img,
  .lightbox .seta--esquerda img {
    position: static;
    width: 40px;
    height: 40px;
    transform: none;
  }

  .lightbox .barra {
    height: 4px;
    margin-top: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
  }
}