@charset "UTF-8";

/* ===========================================================================
   Portalis Investimentos Imobiliarios
   Folha de estilo principal do site.

   Direcao visual
   --------------
   Leitura: site institucional de imobiliaria para quem quer morar ou investir
   no Rio de Janeiro, com linguagem urbana contemporanea apoiada em fotografia
   real. Sem framework: CSS nativo, sem dependencia externa.

   Paineis: DESIGN_VARIANCE 5, MOTION_INTENSITY 3, VISUAL_DENSITY 4.

   Paleta
   ------
   Extraida do logotipo oficial (tools/preparar-logos.ps1):
     azul institucional  #083F72
     vermelho da marca   #FF5757
   Os tons de texto e de apoio foram derivados para atender ao contraste
   minimo do WCAG AA. O vermelho da marca tem 3,11:1 sobre branco, portanto
   e usado apenas em elementos graficos e em texto grande e negrito.
   Para texto vermelho de tamanho normal existe --vermelho-texto (5,44:1).

   Raio de canto (regra unica do projeto)
   --------------------------------------
     imagens e cartoes .... 12px
     botoes e campos ...... 8px
     chips e etiquetas .... 999px (pilula)
   =========================================================================== */

/* ------------------------------------------------------------------ fontes */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Subconjunto estendido: cobre acentuacao fora do Latin-1 basico. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- variaveis */

:root {
  /* ---------------------------------------------------------------- marca */
  --azul: #083f72;
  --azul-escuro: #052c52;
  --azul-fundo: #06294a; /* secoes de respiro profundo */
  --azul-medio: #0d5296;
  --azul-tenue: #e9eff6;
  --vermelho: #ff5757;
  --vermelho-texto: #c0392b; /* 5,44:1 sobre branco, para texto pequeno */
  --vermelho-tenue: #fdecea;
  --whatsapp: #128c7e;

  /* --------------------------------------------------------------- neutros */
  --branco: #ffffff;
  --tinta: #101d2b;
  --tinta-suave: #5b6b7b;
  --tinta-fraca: #8695a3;
  --linha: #e4e9ee;
  --linha-forte: #ccd6df;
  --superficie: #f6f8fa;
  --superficie-2: #eef2f6;

  /* ------------------------------------------------------------ tipografia */
  --fonte: "Poppins", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala de leitura. O corpo fica em 17px: conforto de leitura sem
     recorrer a texto pequeno para parecer sofisticado. */
  --texto-2xs: 0.75rem;
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: 1.0625rem;
  --texto-lg: clamp(1.0625rem, 1.1vw, 1.1875rem);

  /* Escala de display, fluida e com limites claros. */
  /* O limite inferior foi calibrado para o título da abertura caber em poucas
     linhas a 360 px: com 31 px a segunda frase quebrava em três linhas. */
  /* Calibrado para o título da abertura caber em poucas linhas equilibradas na
     coluna de texto e ainda dominar sobre os títulos de seção (--display-2). */
  --display-1: clamp(1.6rem, 3vw, 2.45rem); /* abertura */
  --display-2: clamp(1.55rem, 2.8vw, 2.25rem); /* titulo de secao */
  --display-3: clamp(1.125rem, 1.7vw, 1.375rem); /* subtitulo */

  --altura-linha-apertada: 1.1;
  --altura-linha-titulo: 1.2;
  --altura-linha-texto: 1.68;

  /* --------------------------------------------------------------- espaco */
  /* Escala unica de espacamento, base 4px. */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --altura-cabecalho: 76px;

  /* Ritmo vertical. O intervalo entre seções é a SOMA do padding de baixo de
     uma com o de cima da seguinte, por isso o valor é contido: no desktop o
     encontro entre duas seções fica entre 128 e 176 px, e no celular entre
     80 e 112 px. */
  --secao: clamp(2.5rem, 5vw, 5.5rem);
  --secao-compacta: clamp(2rem, 3.5vw, 3.5rem);

  /* UM contêiner para o site inteiro: logotipo, navegação, abertura, títulos
     de seção, grades, conteúdo institucional e rodapé compartilham esta
     largura e esta margem. Nenhuma seção define a própria largura. */
  --largura-max: 1200px;
  --largura-texto: 62ch;
  --goteira: clamp(1.25rem, 4vw, 2.5rem);

  /* ----------------------------------------------------- bordas e raios */
  /* Regra unica do projeto: imagens e cartoes 14px, campos e botoes 10px,
     chips e etiquetas em pilula. */
  --raio-imagem: 14px;
  --raio-campo: 10px;
  --raio-pilula: 999px;
  --borda-fina: 1px solid var(--linha);

  /* -------------------------------------------------------------- sombras */
  /* Tingidas com o azul da marca, nunca preto puro. */
  --sombra-1: 0 1px 2px rgba(8, 47, 87, 0.05), 0 6px 18px -8px rgba(8, 47, 87, 0.12);
  --sombra-2: 0 16px 44px -18px rgba(8, 47, 87, 0.26);
  --sombra-cabecalho: 0 1px 0 rgba(8, 47, 87, 0.05), 0 10px 28px -16px rgba(8, 47, 87, 0.22);

  /* ------------------------------------------------------------ movimento */
  /* Curvas fortes: as nativas do CSS sao fracas demais e tiram a intencao. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 140ms; /* resposta ao toque */
  --dur-rapida: 180ms; /* cor, borda, foco */
  --dur-media: 240ms; /* entrada de paineis e popovers */
  --dur-painel: 320ms; /* menu e gavetas */
  --dur-entrada: 560ms; /* apresentacao da abertura */
  --dur-troca: 560ms; /* crossfade entre os imoveis da abertura */

  /* Apelidos mantidos para as regras que ja existiam. */
  --transicao: 200ms;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --sombra-baixa: var(--sombra-1);
  --sombra-media: var(--sombra-2);

  /* -------------------------------------------------------------- camadas */
  --z-base: 1;
  --z-fixo: 100;
  --z-cabecalho: 200;
  --z-menu: 300;
  --z-modal: 400;
  --z-flutuante: 500;
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  /* "clip" evita rolagem horizontal sem criar um contêiner de rolagem, que
     quebraria o cabeçalho fixo (position: sticky). */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
  height: auto;
}

/* Ícones do conjunto local (assets/icons). O SVG chega sem width/height para
   poder herdar a cor do texto; o tamanho é definido aqui, em em, para
   acompanhar o tamanho da fonte do contexto. */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  stroke-width: 1.9;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--azul);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.15rem);
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

p {
  margin: 0 0 1rem;
  max-width: 68ch;
}

a {
  color: var(--azul);
  text-decoration-color: rgba(8, 63, 114, 0.3);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

ul,
ol {
  padding-left: 1.15rem;
}

/* Foco sempre visivel, inclusive sobre fundos coloridos. */
:focus-visible {
  outline: 3px solid var(--azul-medio);
  outline-offset: 2px;
  border-radius: 3px;
}

.sobre-azul :focus-visible,
.rodape :focus-visible {
  outline-color: var(--vermelho);
}

.salto-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--branco);
  color: var(--azul);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.salto-conteudo:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- estrutura */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.secao {
  padding-block: var(--secao);
}

.secao--suave {
  background: var(--superficie);
}

.secao--azul {
  background: var(--azul);
  color: var(--branco);
}

.secao--azul h2,
.secao--azul h3 {
  color: var(--branco);
}

.secao--azul p {
  color: rgba(255, 255, 255, 0.88);
}

.secao__cabecalho {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* Cabeçalho de seção com atalho à direita. No celular o atalho desce para
   baixo do título em vez de espremer a linha. */
.secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4) var(--e-6);
}

.secao__topo .secao__cabecalho {
  margin-bottom: 0;
  flex: 1 1 22rem;
}

.secao__topo + * {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.secao__atalho {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding-bottom: 0.35rem;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition:
    border-color var(--dur-rapida) var(--ease-out),
    color var(--dur-rapida) var(--ease-out);
}

.secao__atalho .icone {
  transition: transform var(--dur-rapida) var(--ease-out);
}

.secao__atalho:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .secao__atalho:hover {
    border-bottom-color: var(--vermelho);
  }

  .secao__atalho:hover .icone {
    transform: translateX(3px);
  }
}

.secao__cabecalho p {
  color: var(--tinta-suave);
  font-size: var(--texto-lg);
  margin-bottom: 0;
}

/* Sobrenome de secao: usado com parcimonia, no maximo um a cada tres blocos. */
.rotulo {
  display: inline-block;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vermelho-texto);
  margin-bottom: 0.6rem;
}

.secao--azul .rotulo {
  color: var(--vermelho);
}

.marca-texto {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--vermelho);
  margin-bottom: 1.15rem;
}

/* --------------------------------------------------------------- botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px; /* área de toque confortável */
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio-campo);
  font: inherit;
  font-weight: 600;
  font-size: var(--texto-base);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    color var(--dur-rapida) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

/* Resposta ao pressionar. A escala é discreta e mantém o rótulo legível,
   que é o ponto: confirmar que a interface ouviu o toque. */
.botao:active {
  transform: scale(0.97);
}

.botao--primario {
  background: var(--azul);
  color: var(--branco);
}

.botao--secundario {
  background: transparent;
  color: var(--azul);
  border-color: var(--linha-forte);
}

.botao--contorno-claro {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Chamada comercial principal. O vermelho da marca tem 3,11:1 sobre o branco,
   por isso aqui o texto é grande e negrito, atendendo ao critério de texto
   ampliado do WCAG AA. */
.botao--destaque {
  background: var(--vermelho);
  color: var(--branco);
  font-size: 1.1875rem;
  font-weight: 700;
}

.botao--whatsapp {
  background: var(--whatsapp);
  color: var(--branco);
}

@media (hover: hover) and (pointer: fine) {
  .botao--primario:hover {
    background: var(--azul-escuro);
  }

  .botao--secundario:hover {
    border-color: var(--azul);
    background: var(--azul-tenue);
  }

  .botao--contorno-claro:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--branco);
  }

  .botao--destaque:hover {
    background: #e94a4a;
  }

  .botao--whatsapp:hover {
    background: #0e7367;
  }
}

.botao--largo {
  width: 100%;
}

.botao--pequeno {
  padding: 0.55rem 1rem;
  font-size: var(--texto-sm);
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ------------------------------------------------------------- cabecalho */

/* Sentinela: fica fora do fluxo, no topo do documento, e informa ao script
   quando a página saiu do topo. Não ocupa espaço nem recebe toque. */
.sentinela-topo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  background: var(--branco);
  /* A borda é sempre a mesma; o que muda ao rolar é só a sombra, desenhada
     por um pseudo-elemento com opacidade animada. A altura nunca muda, então
     o conteúdo abaixo não se desloca. */
  border-bottom: 1px solid var(--linha);
}

.cabecalho::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(8, 47, 87, 0.11), rgba(8, 47, 87, 0));
  transition: opacity var(--dur-rapida) var(--ease-out);
}

.cabecalho--rolado::after {
  opacity: 1;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 76px;
}

.cabecalho__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: var(--raio-campo);
}

.cabecalho__logo img {
  width: auto;
  height: 44px;
}

.cabecalho__navegacao {
  margin-left: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  position: relative;
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  border-radius: var(--raio-campo);
  white-space: nowrap;
  transition: color var(--dur-rapida) var(--ease-out), background-color var(--dur-rapida) var(--ease-out);
}

/* Sublinhado que cresce a partir da esquerda. Só transform: não altera
   layout nem provoca recálculo. */
.menu a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rapida) var(--ease-out);
}

.menu a[aria-current="page"] {
  color: var(--azul);
  font-weight: 600;
}

.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .menu a:hover {
    color: var(--azul);
    background: var(--azul-tenue);
  }

  /* O mesmo sublinhado do item ativo antecipa o clique. */
  .menu a:hover::after {
    transform: scaleX(1);
  }
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-shrink: 0;
}

.idiomas {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: var(--texto-xs);
  font-weight: 600;
}

.idiomas a,
.idiomas span {
  padding: 0.3rem 0.45rem;
  border-radius: var(--raio-campo);
  text-decoration: none;
  color: var(--tinta-suave);
}

@media (hover: hover) and (pointer: fine) {
  .idiomas a:hover {
    color: var(--azul);
    background: var(--azul-tenue);
  }
}

.idiomas [aria-current="true"] {
  color: var(--azul);
  background: var(--azul-tenue);
}

.cabecalho__alternar {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-campo);
  cursor: pointer;
  color: var(--azul);
}

.cabecalho__alternar svg {
  width: 22px;
  height: 22px;
}

/* -------------------------------------------------------------- abertura */

/*
  Abertura em azul profundo.

  A fotografia fica DENTRO do contêiner, com limites definidos, em vez de
  escapar para a borda da janela. Texto e imagem dividem a mesma grade, então
  a abertura alinha com o cabeçalho, com os títulos das seções e com o rodapé.

  Uma segunda fotografia do MESMO imóvel se sobrepõe ao canto inferior
  esquerdo da principal. Ela mostra outro ambiente da unidade e dá à
  composição a profundidade que uma imagem só não teria. No celular ela
  desaparece, porque a essa largura só atrapalharia.

  A altura não é fixa em tela cheia: a seção termina logo abaixo do conteúdo,
  deixando a próxima seção aparecer e criando continuidade.
*/
.abertura {
  background: var(--azul-fundo);
  color: var(--branco);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--secao);
}

.abertura__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.abertura__texto {
  display: flex;
  flex-direction: column;
  padding-block: var(--e-3);
}

.abertura__rotulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0 0 clamp(1.25rem, 2.4vw, 1.9rem);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 8,4:1 sobre o azul profundo. */
  color: rgba(255, 255, 255, 0.76);
}

/* O detalhe vermelho da marca, uma vez só. */
.abertura__rotulo::before {
  content: "";
  width: 28px;
  height: 2px;
  flex-shrink: 0;
  background: var(--vermelho);
}

.abertura__titulo {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.5rem);
  font-size: var(--display-1);
  line-height: var(--altura-linha-apertada);
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--branco);
  text-wrap: balance;
}

.abertura__apoio {
  max-width: 42ch;
  margin: 0 0 clamp(1.6rem, 3vw, 2.25rem);
  font-size: var(--texto-lg);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
}

.abertura__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Sobre o azul, o botão principal inverte: fundo branco e texto azul. */
.abertura .botao--primario {
  background: var(--branco);
  color: var(--azul);
}

.abertura .botao--secundario {
  color: var(--branco);
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .abertura .botao--primario:hover {
    background: var(--azul-tenue);
  }

  .abertura .botao--secundario:hover {
    border-color: var(--branco);
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ------------------------------------------------------- mídia da abertura */

/*
  Área das fotografias: um imóvel por vez.

  A troca é um crossfade puro. A foto que entra é revelada por opacidade, por
  cima da que estava, e as duas nunca ficam semitransparentes ao mesmo tempo —
  é isso que evita o brilho piscar no meio da transição.

  O quadro tem altura definida por `aspect-ratio` e as fotos são posicionadas
  em absoluto dentro dele: trocar de imóvel nunca mexe no layout.
*/
.abertura__midia {
  position: relative;
  margin: 0;
}

.abertura__palco {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Reserva o gesto horizontal para o carrossel e deixa a rolagem vertical
     com o navegador, que é o que mantém a página utilizável no celular. */
  touch-action: pan-y;
}

.abertura__vinculo {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--raio-imagem);
}

.abertura__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: var(--raio-imagem);
}

/* A foto que entra fica por cima; a de baixo permanece opaca. */
.abertura__foto--entrando {
  opacity: 0;
  transition: opacity var(--dur-troca) var(--ease-out);
}

.abertura__palco[data-trocando] .abertura__foto--entrando {
  opacity: 1;
}

/* Fio claro que separa a foto do fundo azul sem escurecer a imagem. */
.abertura__palco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--raio-imagem);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/*
  A fotografia secundária é irmã do quadro dentro do palco, não filha dele:
  assim pode transbordar para fora da moldura sem ser cortada. O palco não tem
  `overflow: hidden` justamente por isso — o recorte das fotos é feito pelo
  `border-radius` de cada imagem.
*/
.abertura__secundaria {
  position: absolute;
  left: 0;
  bottom: calc(var(--e-6) * -1);
  z-index: 3;
  width: clamp(120px, 26%, 176px);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 5px solid var(--azul-fundo);
  background: rgba(255, 255, 255, 0.06);
}

.abertura__secundaria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Um imóvel sem segunda foto adequada esconde o detalhe sem mexer na altura:
   o espaço já está reservado pelo transbordo, que simplesmente não é usado. */
.abertura__secundaria[hidden] {
  display: none;
}

/* ------------------------------------------------------------ controles */

.abertura__controles {
  position: absolute;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--raio-pilula);
  /* Fundo sólido o bastante para garantir contraste sobre qualquer foto,
     clara ou escura. */
  background: rgba(6, 41, 74, 0.84);
}

.abertura__controle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--branco);
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-out);
}

.abertura__controle .icone {
  width: 17px;
  height: 17px;
}

.abertura__controle:active {
  background: rgba(255, 255, 255, 0.2);
}

.abertura__controle:focus-visible {
  outline: 2px solid var(--branco);
  outline-offset: 1px;
}

.abertura__pontos {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 2px;
}

/* O ponto visível tem 8 px, mas a área de toque tem 18: o alvo é o botão,
   não o círculo. */
.abertura__ponto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.abertura__ponto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.42);
  transition:
    background-color var(--dur-rapida) var(--ease-out),
    transform var(--dur-rapida) var(--ease-out);
}

.abertura__ponto[aria-current="true"]::before {
  background: var(--branco);
  transform: scale(1.25);
}

.abertura__ponto:focus-visible {
  outline: 2px solid var(--branco);
  outline-offset: -4px;
  border-radius: var(--raio-campo);
}

@media (hover: hover) and (pointer: fine) {
  .abertura__controle:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .abertura__ponto:hover::before {
    background: rgba(255, 255, 255, 0.72);
  }
}

/* -------------------------------------------------------------- legenda */

/*
  Duas camadas de texto sobrepostas, com altura reservada. A legenda troca por
  opacidade junto com as fotos, então o texto nunca fica em branco no meio da
  transição.
*/
.abertura__legenda {
  position: relative;
  min-height: 1.45em;
  margin: calc(var(--e-6) + var(--e-3)) 0 0;
  text-align: right;
  font-size: var(--texto-xs);
  color: rgba(255, 255, 255, 0.72);
}

.abertura__legenda-texto {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  transition: opacity var(--dur-troca) var(--ease-out);
}

.abertura__legenda-texto[data-visivel="nao"] {
  opacity: 0;
}

/* O código interno fica em segundo plano, mas ainda legível: 6,15:1. */
.abertura__legenda-ref {
  color: rgba(255, 255, 255, 0.6);
}

/* Sem JavaScript não há troca: os controles não teriam função. */
.sem-js .abertura__controles {
  display: none;
}
/* --------------------------------------------------------------- cartoes */

.grade-imoveis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.imovel-cartao {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}

.imovel-cartao__midia {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--superficie-2);
  overflow: hidden;
}

.imovel-cartao__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

/* Estados de ponteiro só existem onde há ponteiro preciso. Em telas de toque
   o navegador dispara :hover no toque e o estado fica preso no elemento. */
@media (hover: hover) and (pointer: fine) {
  .imovel-cartao:hover {
    border-color: var(--linha-forte);
    box-shadow: var(--sombra-1);
  }

  /* Zoom contido: precisa caber na área da imagem, sem escapar do recorte. */
  .imovel-cartao:hover .imovel-cartao__midia img {
    transform: scale(1.025);
  }
}

.imovel-cartao__sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  padding: 1rem;
  text-align: center;
}

.imovel-cartao__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.35rem;
}

.imovel-cartao__local {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.35rem;
}

.imovel-cartao__titulo {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.imovel-cartao__titulo a {
  text-decoration: none;
  color: inherit;
}

.imovel-cartao__titulo a:hover {
  color: var(--azul-medio);
}

.imovel-cartao__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.imovel-cartao__resumo {
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  margin-bottom: 1rem;
  flex: 1;
}

.imovel-cartao__rodape {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linha);
}

.imovel-cartao {
  position: relative;
}

.imovel-cartao__preco {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--azul);
}

.imovel-cartao__preco--consulte {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--tinta-suave);
}

.imovel-cartao__dados {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.9rem;
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  text-align: right;
}

/* Etiquetas sobre a imagem: apenas informacao de estado real. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: var(--raio-pilula);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--superficie-2);
  color: var(--tinta);
}

.imovel-cartao__etiquetas {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  z-index: var(--z-base);
}

.etiqueta--destaque {
  background: var(--vermelho);
  color: var(--branco);
  font-size: 0.875rem;
}

.etiqueta--disponivel {
  background: var(--azul);
  color: var(--branco);
}

.etiqueta--reservado {
  background: #b4791f;
  color: var(--branco);
}

.etiqueta--vendido {
  background: var(--tinta);
  color: var(--branco);
}

.etiqueta--a-confirmar {
  background: var(--branco);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
}

/* ----------------------------------------------------------- destaques */

/* Proporções consistentes entre os cartões: a assimetria da página vem da
   abertura, não de cartões de tamanhos diferentes na mesma grade. */
.destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* --------------------------------------------------------------- processo */

.processo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.processo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: etapa;
}

.processo__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1.1rem;
}

.processo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio-pilula);
  background: var(--azul-tenue);
  color: var(--azul);
  font-weight: 700;
}

.processo__item h3 {
  margin-bottom: 0.3rem;
  font-size: 1.0625rem;
}

.processo__item p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
}

/* --------------------------------------------------------------- percursos */

.percursos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.percurso {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--raio-imagem);
  background: var(--branco);
  border: 1px solid var(--linha);
}

.percurso h3 {
  font-size: 1.25rem;
}

.percurso p {
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  flex: 1;
}

.percurso ul {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
}

.percurso li {
  margin-bottom: 0.3rem;
}

/* -------------------------------------------------------------- imoveis */

.catalogo {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.filtros {
  position: sticky;
  top: 92px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  padding: 1.25rem;
}

.filtros__titulo {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.campo {
  margin-bottom: 1.1rem;
}

.campo label,
.campo__rotulo {
  display: block;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: var(--e-2);
}

/* O corpo do campo fica em 17px de propósito: abaixo de 16px o Safari do iOS
   dá zoom na página ao focar o campo, o que desalinha o layout inteiro. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="search"],
.campo input[type="password"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--texto-base);
  line-height: 1.4;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-campo);
  transition:
    border-color var(--dur-rapida) var(--ease-out),
    box-shadow var(--dur-rapida) var(--ease-out);
}

.campo textarea {
  min-height: 132px;
  resize: vertical;
}

.campo select {
  cursor: pointer;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(8, 63, 114, 0.15);
  outline: none;
}

/* Campo com erro: a borda muda de cor, mas o foco continua visível para quem
   navega por teclado. */
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--vermelho-texto);
  background: #fffbfa;
}

.campo input[aria-invalid="true"]:focus,
.campo select[aria-invalid="true"]:focus,
.campo textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

.campo__ajuda {
  display: block;
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin-top: 0.3rem;
}

.campo__erro {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--vermelho-texto);
  margin-top: 0.3rem;
}

.campo--linha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.campo--linha-dupla > div {
  min-width: 0;
}

.filtros__acoes {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.catalogo__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.catalogo__contagem {
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  margin: 0;
}

.catalogo__ordenacao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--texto-sm);
}

.catalogo__ordenacao select {
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: var(--texto-sm);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-campo);
  background: var(--branco);
}

.filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  list-style: none;
  padding: 0;
}

.filtros-ativos a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  border-radius: var(--raio-pilula);
  background: var(--azul-tenue);
  color: var(--azul);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--dur-rapida) var(--ease-out),
    color var(--dur-rapida) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.filtros-ativos a:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .filtros-ativos a:hover {
    background: var(--azul);
    color: var(--branco);
  }
}

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}

.paginacao a,
.paginacao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 0.6rem;
  border-radius: var(--raio-campo);
  border: 1px solid var(--linha);
  color: var(--azul);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.paginacao a:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .paginacao a:hover {
    border-color: var(--azul);
    background: var(--azul-tenue);
  }
}

.paginacao [aria-current="page"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

.estado-vazio {
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-imagem);
  text-align: center;
  background: var(--superficie);
}

.estado-vazio h3 {
  margin-bottom: 0.4rem;
}

.estado-vazio p {
  color: var(--tinta-suave);
  margin-inline: auto;
}

/* ------------------------------------------------------- ficha do imovel */

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}

.ficha__cabecalho {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 1.5rem;
}

.ficha__referencia {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ficha__local {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  margin: 0.35rem 0 0;
}

.ficha__local svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ficha__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.galeria {
  margin-bottom: 2rem;
}

.galeria__principal {
  position: relative;
  border-radius: var(--raio-imagem);
  overflow: hidden;
  background: var(--superficie-2);
  aspect-ratio: 4 / 3;
}

.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria__abrir {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: var(--raio-campo);
  background: rgba(5, 44, 82, 0.86);
  color: var(--branco);
  font: inherit;
  font-size: var(--texto-xs);
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .galeria__abrir:hover {
    background: var(--azul-escuro);
  }
}

.galeria__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}

.galeria__miniaturas button {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--raio-campo);
  overflow: hidden;
  background: var(--superficie-2);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color var(--dur-rapida) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.galeria__miniaturas button:active {
  transform: scale(0.96);
}

.galeria__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria__miniaturas button[aria-current="true"] {
  border-color: var(--azul);
}

.galeria__contador {
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin-top: 0.5rem;
}

.ficha__caracteristicas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.ficha__caracteristicas li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--texto-sm);
  color: var(--tinta);
}

.ficha__caracteristicas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}

.painel {
  position: sticky;
  top: 92px;
  padding: 1.5rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  background: var(--branco);
  box-shadow: var(--sombra-baixa);
}

.painel__preco {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1.2;
}

.painel__preco--consulte {
  font-size: 1.125rem;
  color: var(--tinta-suave);
}

.painel__custos {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

.painel__custos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--linha);
}

.painel__custos li:last-child {
  border-bottom: 0;
}

.painel__custos strong {
  color: var(--tinta);
  font-weight: 600;
}

.painel__disponibilidade {
  margin: 1rem 0 1.25rem;
}

.painel__acoes {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.painel__nota {
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin: 0.85rem 0 0;
}

.dados-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.dado__rotulo {
  display: block;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: 0.2rem;
}

.dado__valor {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--azul);
}

/* -------------------------------------------------------- visualizador */

/*
  Visualizador ampliado.

  Abre e fecha com a mesma transição, então a saída conta a mesma história que
  a entrada. O fundo escurece junto com a opacidade, o que evita o salto de
  um retângulo preto aparecendo de uma vez.

  A imagem cresce a partir de 0.97: nada no mundo real surge do nada, e uma
  escala pequena já basta para o olho entender de onde veio.
*/
.visualizador {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  padding: clamp(1rem, 4vw, 2.5rem);

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(9, 20, 32, 0);
  opacity: 0;
  transition:
    opacity var(--dur-media) var(--ease-out),
    background-color var(--dur-media) var(--ease-out),
    display var(--dur-media) allow-discrete;
}

.visualizador[aberto] {
  display: flex;
  opacity: 1;
  background: rgba(9, 20, 32, 0.94);
}

@starting-style {
  .visualizador[aberto] {
    opacity: 0;
    background: rgba(9, 20, 32, 0);
  }
}

.visualizador__figura {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.97);
  transition: transform var(--dur-media) var(--ease-out);
}

.visualizador[aberto] .visualizador__figura {
  transform: none;
}

.visualizador__figura img {
  max-height: 76vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--raio-campo);
}

.visualizador__legenda {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--texto-sm);
  margin-top: 0.85rem;
  text-align: center;
}

.visualizador__controles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.visualizador__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio-pilula);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--branco);
  cursor: pointer;
  font: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .visualizador__botao:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

.visualizador__contagem {
  color: var(--branco);
  font-size: var(--texto-sm);
  min-width: 5rem;
  text-align: center;
}

/* ------------------------------------------------------------- conteudo */

.prosa {
  max-width: var(--largura-texto);
}

.prosa h2 {
  margin-top: 2rem;
}

.prosa h3 {
  margin-top: 1.5rem;
}

.prosa ul,
.prosa ol {
  color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}

.prosa li {
  margin-bottom: 0.4rem;
}

.prosa blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--vermelho);
  color: var(--tinta-suave);
  font-size: var(--texto-lg);
}

/* ---------------------------------------------------------------- blog */

.grade-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.artigo-cartao {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}

.artigo-cartao__midia {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--superficie-2);
  overflow: hidden;
}

.artigo-cartao__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .artigo-cartao:hover {
    border-color: var(--linha-forte);
    box-shadow: var(--sombra-1);
  }

  .artigo-cartao:hover .artigo-cartao__midia img {
    transform: scale(1.025);
  }
}

.artigo-cartao__corpo {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.artigo-cartao__categoria {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vermelho-texto);
  margin-bottom: 0.4rem;
}

.artigo-cartao__titulo {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.artigo-cartao__titulo a {
  text-decoration: none;
  color: inherit;
}

.artigo-cartao__titulo a:hover {
  color: var(--azul-medio);
}

.artigo-cartao__resumo {
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
  flex: 1;
  margin-bottom: 0.9rem;
}

.artigo-cartao__data {
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin: 0;
}

/* Cabeçalho e corpo do artigo compartilham a mesma medida de linha, para o
   texto e o título terminarem na mesma coluna. */
.artigo__cabecalho {
  max-width: var(--largura-texto);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

.artigo__imagem {
  border-radius: var(--raio-imagem);
  overflow: hidden;
  margin-bottom: 2rem;
  max-width: 62rem;
}

.artigo__navegacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}

.artigo__navegacao a {
  display: block;
  padding: 1rem 1.15rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  text-decoration: none;
  color: var(--tinta);
}

@media (hover: hover) and (pointer: fine) {
  .artigo__navegacao a:hover {
    border-color: var(--azul);
    background: var(--azul-tenue);
  }
}

.artigo__navegacao span {
  display: block;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: 0.3rem;
}

/* -------------------------------------------------------------- portfolio */

.grade-cases {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}

.case:nth-child(even) .case__midia {
  order: 2;
}

.case__midia {
  border-radius: var(--raio-imagem);
  overflow: hidden;
  background: var(--superficie-2);
}

.case__midia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.antes-depois {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.antes-depois figure {
  margin: 0;
}

.antes-depois img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-imagem);
}

.antes-depois figcaption {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------- depoimentos */

.grade-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.depoimento {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  background: var(--branco);
}

.depoimento__texto {
  font-size: var(--texto-lg);
  color: var(--tinta);
  margin-bottom: 1.25rem;
  flex: 1;
}

.depoimento__autor {
  font-weight: 600;
  color: var(--azul);
  margin: 0;
}

.depoimento__contexto {
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
  margin: 0;
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: grid;
  gap: 0.6rem;
  max-width: 52rem;
}

.faq__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  background: var(--branco);
}

.faq__item[open] {
  border-color: var(--linha-forte);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  list-style: none;
}

.faq__pergunta::-webkit-details-marker {
  display: none;
}

.faq__pergunta::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg);
  transition: transform var(--transicao) var(--curva);
  margin-top: -5px;
}

.faq__item[open] .faq__pergunta::after {
  transform: rotate(-135deg);
  margin-top: 5px;
}

.faq__resposta {
  padding: 0 1.25rem 1.25rem;
  color: var(--tinta-suave);
}

.faq__resposta p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- contato */

.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.lista-contato {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1.1rem;
}

.lista-contato li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.lista-contato__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--raio-pilula);
  background: var(--azul-tenue);
  color: var(--azul);
}

.lista-contato__icone svg {
  width: 20px;
  height: 20px;
}

.lista-contato strong {
  display: block;
  font-size: var(--texto-sm);
}

.lista-contato span,
.lista-contato a {
  font-size: var(--texto-sm);
  color: var(--tinta-suave);
}

.formulario {
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio-imagem);
  background: var(--branco);
}

.formulario__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}

.armadilha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso {
  padding: 0.9rem 1.1rem;
  border-radius: var(--raio-campo);
  font-size: var(--texto-sm);
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.aviso--sucesso {
  background: #eaf6ee;
  border-color: #b7ddc4;
  color: #1d6b37;
}

.aviso--erro {
  background: var(--vermelho-tenue);
  border-color: #f2c2bd;
  color: #8f2b20;
}

.aviso--info {
  background: var(--azul-tenue);
  border-color: #bed2e6;
  color: var(--azul-escuro);
}

.aviso--atencao {
  background: #fdf4e3;
  border-color: #eed9ab;
  color: #7a5410;
}

/* --------------------------------------------------------------- rodape */

/* Rodapé em azul profundo. A hierarquia vem do tamanho e do espaço, não de
   linhas divisórias em cada item. */
.rodape {
  background: var(--azul-fundo);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2rem);
}

.rodape a {
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .rodape a:hover {
    color: var(--branco);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.rodape__logo {
  height: 48px;
  width: auto;
  margin-bottom: var(--e-5);
}

.rodape__sobre {
  font-size: var(--texto-sm);
  line-height: 1.7;
  max-width: 36ch;
  margin-bottom: 0;
}

.rodape h2,
.rodape h3 {
  color: var(--branco);
  font-size: var(--texto-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--e-4);
}

.rodape ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-3);
  font-size: var(--texto-sm);
}

.redes {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio-pilula);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--branco);
  transition:
    background-color var(--dur-rapida) var(--ease-out),
    border-color var(--dur-rapida) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.redes a:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .redes a:hover {
    background: rgba(255, 255, 255, 0.14);
  }
}

.redes svg {
  width: 20px;
  height: 20px;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--e-5);
  font-size: var(--texto-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

.rodape__base p {
  margin: 0;
}

.rodape__base p:last-child {
  max-width: 52ch;
}

/* --------------------------------------------------- botao flutuante */

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-flutuante);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--raio-pilula);
  background: var(--whatsapp);
  color: var(--branco);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(5, 44, 82, 0.28);
  transition: background-color var(--transicao) var(--curva), transform var(--transicao) var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-flutuante:hover {
    background: #0e7367;
  }
}

.whatsapp-flutuante:active {
  transform: translateY(1px);
}

.whatsapp-flutuante svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Em telas estreitas fica apenas o icone, para nao cobrir conteudo. */
@media (max-width: 560px) {
  .whatsapp-flutuante__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .whatsapp-flutuante {
    padding: 0.85rem;
  }
}

/* ---------------------------------------------------------- utilidades */

.grade-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.linha-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
}

.trilha li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--linha-forte);
}

.trilha a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.trilha a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.lista-simples {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-simples li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--texto-sm);
}

.lista-simples li:last-child {
  border-bottom: 0;
}

.cta-final {
  background: var(--azul);
  color: var(--branco);
  border-radius: var(--raio-imagem);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem;
  align-items: center;
}

.cta-final h2 {
  color: var(--branco);
  margin-bottom: 0.5rem;
}

.cta-final p {
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

/* Ação isolada no fim de uma seção, separada do bloco de conteúdo. */
.acao-secao {
  margin-top: var(--e-6);
}

/* ----------------------------------------------------------- comparador */

/*
  Antes e depois no mesmo enquadramento.

  A foto do depois fica numa camada por cima, cortada por `clip-path` conforme
  a posição do controle. Nada de rolagem artificial nem de arrasto com
  JavaScript: o controle é um `input[type=range]` de verdade, então funciona
  com teclado, com leitor de tela e com o dedo, sem código de arrasto próprio.

  A altura é fixa pela proporção, então arrastar nunca mexe no layout.
*/
.comparador {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio-imagem);
  background: var(--superficie-2);
  --posicao: 50%;
}

.comparador__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparador__camada {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--posicao)) 0 0);
}

/* A linha que marca a divisão entre os dois estados. */
.comparador::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--posicao);
  width: 2px;
  margin-left: -1px;
  background: var(--branco);
  box-shadow: 0 0 0 1px rgba(8, 47, 87, 0.2);
  pointer-events: none;
}

.comparador__selo {
  position: absolute;
  top: var(--e-3);
  padding: 0.25rem 0.7rem;
  border-radius: var(--raio-pilula);
  background: rgba(6, 41, 74, 0.78);
  color: var(--branco);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.comparador__selo--antes {
  left: var(--e-3);
}

.comparador__selo--depois {
  right: var(--e-3);
}

/* O controle cobre a área toda. Invisível: quem aparece é a linha. */
.comparador__alcance {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* O foco precisa aparecer, mesmo com o controle invisível. */
.comparador:has(.comparador__alcance:focus-visible) {
  outline: 3px solid var(--azul-medio);
  outline-offset: 3px;
}

.comparador__ajuda {
  margin: calc(var(--e-3) * -1) 0 var(--e-5);
  color: var(--tinta-suave);
  font-size: var(--texto-sm);
}

/* ---------------------------------------------------------------- sobre */

/*
  Página institucional em quatro tempos: abertura, três aspectos do trabalho,
  grade de acabamentos e transparência.

  A abertura repete a divisão título/texto de uma página de revista. As colunas
  das pontas na seção de aspectos descem alguns pixels: é o que dá ritmo sem
  precisar alternar o layout de cada bloco.
*/
.sobre__abertura {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.sobre__cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.sobre__cabecalho-titulo h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.sobre__lead {
  max-width: 40ch;
  margin: 0;
  font-size: var(--texto-lg);
  line-height: 1.55;
  font-weight: 500;
  color: var(--azul);
}

.sobre__intro .prosa {
  margin-top: var(--e-5);
}

.sobre__intro .prosa > :last-child {
  margin-bottom: 0;
}

/* Três aspectos do trabalho. */
.sobre__aspectos-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

/* Número e fio: o fio atravessa a coluna até a margem, de modo que os três
   se leem como uma sequência e não como três blocos independentes. */
.sobre__aspecto-numero {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0 0 var(--e-4);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--vermelho-texto);
}

.sobre__aspecto-numero::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha-forte);
}

.sobre__aspecto-foto {
  margin: 0 0 var(--e-5);
  border-radius: var(--raio-imagem);
  overflow: hidden;
  background: var(--superficie-2);
}

.sobre__aspecto-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sobre__aspecto h2 {
  margin-bottom: var(--e-2);
  font-size: var(--display-3);
}

.sobre__aspecto p {
  margin: 0;
  font-size: var(--texto-sm);
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Acabamentos: cada foto nomeia a unidade de onde veio. */
.sobre__acabamentos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.sobre__acabamento {
  margin: 0;
}

.sobre__acabamento img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-imagem);
  background: var(--superficie-2);
}

.sobre__acabamento figcaption {
  margin-top: var(--e-3);
  font-size: var(--texto-sm);
  line-height: 1.5;
}

.sobre__acabamento-nome {
  display: block;
  font-weight: 500;
  color: var(--tinta);
}

.sobre__acabamento-ref {
  display: block;
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  color: var(--tinta-fraca);
}

/* Transparência, em azul profundo. */
.sobre__transparencia {
  max-width: 54rem;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--raio-imagem);
  background: var(--azul-fundo);
  color: var(--branco);
}

.sobre__transparencia h2 {
  color: var(--branco);
  font-size: var(--display-2);
}

.sobre__transparencia p {
  max-width: 58ch;
  margin: 0;
  font-size: var(--texto-lg);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

/* A chamada final já tem peso próprio: não precisa do respiro cheio acima. */
.sobre__final {
  padding-top: 0;
}

@media (max-width: 1080px) {
  .sobre__acabamentos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .sobre__cabecalho {
    grid-template-columns: 1fr;
    gap: var(--e-5);
  }

  .sobre__aspectos-grade {
    grid-template-columns: 1fr;
    gap: var(--e-7);
  }

  .sobre__aspecto-foto img {
    aspect-ratio: 4 / 3;
  }
}

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

/* =============================================================== movimento */

/*
  Duas camadas de movimento, ambas com o mesmo princípio: o conteúdo existe
  por padrão e a animação apenas acrescenta. Nada depende de JavaScript para
  ficar visível.

  1. .surgir  entrada em cascata, para a abertura. É uma animação de CSS, roda
              na primeira pintura e não precisa de observador.
  2. .revelar revelação ao entrar na tela. Só o estado inicial deslocado
              depende da classe `com-revelacao`, aplicada pelo JavaScript.
              Sem JavaScript, ou se ele falhar, o bloco aparece normalmente.

  Só opacity e transform são animados: nenhuma das duas etapas de layout é
  recalculada durante a animação.
*/

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.surgir {
  animation: surgir 520ms var(--ease-out) backwards;
  animation-delay: calc(var(--ordem, 0) * 65ms);
}

/*
  `.com-revelacao` é aplicada no elemento <html> pelo JavaScript antes de
  montar o observador. É ela que cria o estado inicial escondido — nunca o
  contrário. Assim, uma falha de JavaScript deixa a página inteira visível.
*/
.com-revelacao .revelar {
  opacity: 0;
  transform: translateY(18px);
  /* Transição, não keyframes: se o elemento for revelado e escondido
     rapidamente, a animação é reaproveitada em vez de reiniciar do zero. */
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}

.com-revelacao .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* Cascata curta dentro de uma mesma grade. */
.com-revelacao .revelar[style*="--ordem"] {
  transition-delay: calc(var(--ordem, 0) * 70ms);
}

/*
  Cartões animam borda e sombra no hover, e a regra acima declara `transition`
  por inteiro: pela especificidade ela venceria e a borda trocaria de uma vez
  só, sem transição. Aqui as quatro propriedades convivem.

  O atraso da cascata fica apenas em opacidade e deslocamento. Borda e sombra
  respondem em 0 ms, senão o hover chegaria atrasado até 140 ms.
*/
.com-revelacao .imovel-cartao.revelar,
.com-revelacao .artigo-cartao.revelar {
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out),
    border-color var(--dur-media) var(--ease-out),
    box-shadow var(--dur-media) var(--ease-out);
}

.com-revelacao .imovel-cartao.revelar[style*="--ordem"],
.com-revelacao .artigo-cartao.revelar[style*="--ordem"] {
  transition-delay:
    calc(var(--ordem, 0) * 70ms),
    calc(var(--ordem, 0) * 70ms),
    0ms,
    0ms;
}

/* ------------------------------------------------- respostas estreitas */

@media (max-width: 1080px) {
  .destaques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .destaques .imovel-cartao:first-child {
    grid-column: span 2;
  }

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

@media (max-width: 960px) {
  /* A abertura empilha: texto primeiro, fotografia depois. As duas já estão
     dentro do mesmo contêiner, então não há recuo extra a aplicar. */
  .abertura__interno {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  .abertura {
    padding-block: clamp(2rem, 5vw, 3rem) var(--secao);
  }

  .abertura__texto {
    padding-block: 0;
  }

  .abertura__palco {
    aspect-ratio: 16 / 11;
  }

  .processo,
  .ficha,
  .contato-grade,
  .catalogo,
  .case,
  .percursos {
    grid-template-columns: 1fr;
  }

  .case:nth-child(even) .case__midia {
    order: 0;
  }

  .painel,
  .filtros {
    position: static;
  }

  .cta-final {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  /* Navegacao passa a ser um painel suspenso controlado por JavaScript. */
  .cabecalho__alternar {
    display: inline-flex;
  }

  /*
    Painel suspenso do menu.

    `display` não é animável; `transition-behavior: allow-discrete` faz a troca
    acontecer no FIM da transição em vez de instantaneamente. O quadro de origem
    vem de `@starting-style`, sem precisar de JavaScript para isso.

    Navegadores sem suporte descartam a declaração `transition` inteira e o menu
    abre e fecha na hora, sem animação. Nada quebra.
  */
  .cabecalho__navegacao {
    position: fixed;
    inset: var(--altura-cabecalho) 0 auto 0;
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-2);
    padding: var(--e-4) var(--goteira) var(--e-5);
    max-height: calc(100dvh - var(--altura-cabecalho));
    overflow-y: auto;

    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity var(--dur-painel) var(--ease-out),
      transform var(--dur-painel) var(--ease-out),
      display var(--dur-painel) allow-discrete;
  }

  .cabecalho__navegacao[aberto] {
    display: block;
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .cabecalho__navegacao[aberto] {
      opacity: 0;
      transform: translateY(-10px);
    }
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .menu a {
    padding: 0.8rem 0.6rem;
    font-size: var(--texto-base);
    border-bottom: 1px solid var(--linha);
    border-radius: 0;
  }

  .menu a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--vermelho);
    padding-left: 0.9rem;
  }
}

/* Em telas estreitas o cabeçalho precisa caber em 360 px. A chamada de
   WhatsApp vira um botão de ícone: o rótulo continua disponível para leitores
   de tela e o botão flutuante segue visível. */
@media (max-width: 700px) {
  .cabecalho__interno {
    gap: 0.6rem;
  }

  .cabecalho__logo img {
    height: 34px;
  }

  .cabecalho__acoes {
    gap: 0.4rem;
  }

  .cabecalho__acoes .botao--whatsapp {
    padding: 0.55rem 0.7rem;
  }

  .cabecalho__acoes .botao--whatsapp span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .idiomas a,
  .idiomas span {
    padding: 0.3rem 0.35rem;
  }
}

/*
  Celular: a composição simplifica.

  A foto secundária sai de cena, porque sobreposta a uma imagem que já ocupa
  a largura toda ela não teria função, só competiria por atenção. Sem ela, a
  reserva de espaço embaixo do quadro deixa de existir.
*/
@media (max-width: 640px) {
  .abertura__secundaria {
    display: none;
  }

  .abertura__palco {
    aspect-ratio: 4 / 3;
  }

  /* Sem a secundária não há transbordo a compensar. */
  .abertura__legenda {
    margin-top: var(--e-4);
  }

  /* Controles um pouco menores para não disputar espaço com a foto. */
  .abertura__controle {
    width: 34px;
    height: 34px;
  }

  .abertura__ponto {
    width: 16px;
    height: 34px;
  }
}

/* O botão flutuante do WhatsApp fica fixo no canto inferior direito. Esta
   folga garante que, ao chegar ao fim da página, ele pouse sobre espaço vazio
   do rodapé em vez de cobrir o texto. */
@media (max-width: 640px) {
  .rodape__base {
    padding-bottom: var(--e-8);
  }
}

@media (max-width: 720px) {
  .destaques,
  .grade-imoveis,
  .grade-artigos,
  .grade-depoimentos {
    grid-template-columns: 1fr;
  }

  .destaques .imovel-cartao:first-child {
    grid-column: span 1;
  }

  .rodape__grade {
    grid-template-columns: 1fr;
  }

  .ficha__caracteristicas {
    grid-template-columns: 1fr;
  }

  .antes-depois {
    grid-template-columns: 1fr;
  }

  .antes-depois img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .campo--linha-dupla {
    grid-template-columns: 1fr;
  }

  .grupo-botoes .botao {
    width: 100%;
  }

  .imovel-cartao__rodape {
    flex-direction: column;
    align-items: flex-start;
  }

  .imovel-cartao__dados {
    justify-content: flex-start;
    text-align: left;
  }
}

/* --------------------------------------------------------- preferencias */

/*
  Movimento reduzido não é ausência de movimento.

  O que sai: deslocamento, escala e qualquer animação de posição, porque são
  elas que causam desconforto. O que fica: transições de opacidade, cor e
  borda, que ajudam a entender que algo mudou de estado.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* A cascata de entrada vira aparecimento direto, sem deslocamento. */
  .surgir {
    animation: none;
  }

  .com-revelacao .revelar {
    transform: none;
    transition: opacity 200ms ease;
  }

  .com-revelacao .revelar[style*="--ordem"] {
    transition-delay: 0ms;
  }

  /* Elementos que se movem sob o ponteiro deixam de se mover. */
  .imovel-cartao:hover .imovel-cartao__midia img,
  .artigo-cartao:hover .artigo-cartao__midia img,
  .case:hover .case__midia img {
    transform: none;
  }

  .botao:active,
  .whatsapp-flutuante:active,
  .redes a:active,
  .paginacao a:active,
  .filtros-ativos a:active,
  .galeria__miniaturas button:active {
    transform: none;
  }

  /* Painéis abrem sem deslizar: só a opacidade muda. */
  .cabecalho__navegacao,
  .visualizador__figura {
    transform: none;
  }

  /* A troca de imóvel na abertura vira corte seco. O JavaScript também
     desliga a reprodução automática quando esta preferência está ativa. */
  .abertura__foto--entrando,
  .abertura__legenda-texto {
    transition-duration: 1ms;
  }

  .abertura__ponto::before {
    transition: none;
  }
}

/* ------------------------------------------------------------- impressao */

@media print {
  .cabecalho,
  .rodape,
  .whatsapp-flutuante,
  .filtros,
  .painel__acoes {
    display: none;
  }

  body {
    color: #000;
  }

  .galeria__principal img {
    max-height: 12cm;
  }
}