/* Imóveis Criciúma: a mesa de luz da curadoria. Gerado por scripts/gerar-imovcriciuma.mjs */
:root {
  --fundo: #ffffff; --tinta: #202339; --suave: #565a72; --linha: #dfe3ec; --cartao: #ffffff;
  --marca: #5B63A7; --marca-2: #4D589F; --ferrugem: #B75326; --mesa: #f6f8fc;
  --fonte-titulo: "Poppins", system-ui, sans-serif; --fonte-texto: "Poppins", system-ui, sans-serif; --mono: "Red Hat Mono", ui-monospace, monospace;
  --raio: 6px;
}
body { font-size: clamp(15px, 1vw, 17px); }
h1, h2, h3 { letter-spacing: -0.015em; }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.topo__marca img { width: 150px; height: auto; }
.topo__menu { display: flex; gap: 22px; margin-left: auto; font-size: 15px; font-weight: 500; }
.topo__menu a { padding: 8px 0; border-bottom: 2px solid transparent; }
.topo__menu a:hover { border-color: var(--marca); }
.topo__wa { padding: .8em 1.2em; font-size: 14px; }
.topo__menu-botao { display: none; }

/* Abertura: frase e busca (a barra com borda e botão ferrugem do site atual, agora com tipo, quartos e valor) */
.abertura__texto { text-align: center; padding: clamp(36px, 5vw, 64px) 0 26px; }
.abertura h1 { font-size: clamp(30px, 4.2vw, 58px); font-weight: 700; line-height: 1.08; max-width: 18ch; margin-inline: auto; }
.abertura__texto p { margin-top: 14px; color: var(--suave); font-size: clamp(16px, 1.3vw, 19px); }
.busca { display: grid; grid-template-columns: 2.2fr 1fr .8fr 1fr auto; gap: 0; border: 1.5px solid var(--tinta); border-radius: 10px; background: #fff; overflow: hidden; margin-bottom: clamp(28px, 4vw, 44px); }
.busca__campo { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-right: 1px solid var(--linha); min-width: 0; }
.busca__campo span { font-size: 12px; font-weight: 600; color: var(--suave); }
.busca__campo input, .busca__campo select { border: 0; padding: 4px 0; background: transparent; font-size: 15px; outline: none; min-width: 0; width: 100%; }
.busca__botao { display: flex; align-items: center; gap: 10px; padding: 0 28px; border: 0; background: var(--ferrugem); color: #fff; font-weight: 600; cursor: pointer; }
.busca__botao svg { width: 22px; height: 22px; }
.busca__botao:hover { background: #9d4520; }

/* Mesa de luz */
.mesa { position: relative; padding: clamp(30px, 4vw, 52px) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(ellipse 62% 58% at 50% 46%, #ffffff 0%, #fdfdff 34%, #eef2f9 70%, #dfe5f0 100%);
  border-block: 10px solid transparent; border-image: linear-gradient(180deg, #e6e9ef, #b9bfca 45%, #d9dde5) 1; }
.mesa::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(91 99 167 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(91 99 167 / .045) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 95%); }
.mesa > .wrap { position: relative; }
.mesa__cabeca { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 22px; margin-bottom: 22px; }
.mesa__cabeca h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; }
.mesa__cabeca p { color: var(--suave); }
.mesa__todos, .folha__todos { font-weight: 600; color: var(--marca-2); white-space: nowrap; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.mesa__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }

/* Cromo de 35 mm */
.cromo { position: relative; display: flex; flex-direction: column; padding: 0 16px 16px; border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f9f9fb); color: var(--tinta);
  box-shadow: 0 0 0 1px rgb(32 35 57 / .07), 0 1px 0 rgb(255 255 255) inset, 0 10px 22px -14px rgb(32 35 57 / .45); }
.cromo__topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 34px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.cromo__cod { color: var(--ferrugem); font-weight: 600; }
.cromo__janela { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; background: #1b1d2b;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 4px #f1f2f6, 0 0 0 5px rgb(32 35 57 / .08); }
.cromo__janela img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.cromo__janela:hover img { filter: brightness(1.06) saturate(1.05); }
.cromo__etiqueta { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; padding-right: 44px; }
.cromo h3 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.cromo h3 a:hover { color: var(--marca-2); }
.cromo__lugar { font-size: 13px; color: var(--suave); }
.cromo__tipo-m { display: none; }
.cromo__valor { margin-top: 6px; font-weight: 700; font-size: 16px; }
.cromo__valor small { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cromo__ficha { font: 400 12px/1.45 var(--mono); color: var(--suave); }
.cromo__wa { position: absolute; right: 12px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--marca); box-shadow: 0 0 0 1.5px currentColor inset; }
.cromo__wa:hover { background: var(--marca); color: #fff; }
.cromo__wa svg { width: 20px; height: 20px; }

/* Conta-fios sobre o primeiro destaque: anel preto com aro metálico e a foto ampliada dentro */
.contafios { position: absolute; z-index: 2; right: -16px; top: 46px; width: 52%; aspect-ratio: 1; border-radius: 50%;
  background-size: 290%; background-position: 46% 52%; background-repeat: no-repeat;
  border: 9px solid #15161f; pointer-events: none;
  box-shadow: 0 0 0 2px #a7adb9, 0 0 0 4px #2a2c38, inset 0 0 0 2px rgb(255 255 255 / .35), inset 0 0 22px rgb(0 0 0 / .35), 0 22px 30px -12px rgb(20 22 40 / .55); }
.contafios::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgb(255 255 255 / .38), transparent 42%); }

/* Seções */
.secao__titulo { font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; line-height: 1.18; max-width: 26ch; }
.regioes, .planta { padding: clamp(56px, 7vw, 96px) 0 clamp(20px, 3vw, 40px); }
.regioes .secao__titulo { margin-bottom: clamp(26px, 3vw, 40px); }
.planta { padding-top: clamp(24px, 3vw, 40px); }

/* Folha de arquivo de cromos: plástico translúcido, bolsos soldados, três furos de fichário, tarja de etiqueta */
.folha { position: relative; margin-bottom: clamp(28px, 3.4vw, 44px); padding: 22px 22px 22px 64px; border-radius: 10px;
  background: linear-gradient(115deg, rgb(255 255 255 / .7) 0%, rgb(255 255 255 / .0) 30%, rgb(255 255 255 / .0) 55%, rgb(255 255 255 / .5) 64%, rgb(255 255 255 / 0) 76%), #e7ebf4;
  box-shadow: 0 0 0 1px rgb(91 99 167 / .16), 0 18px 34px -26px rgb(32 35 57 / .5); }
.folha__furos { position: absolute; left: 22px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.folha__furos i { width: 18px; height: 18px; border-radius: 50%; background: var(--fundo); box-shadow: inset 0 2px 3px rgb(32 35 57 / .28), 0 0 0 1px rgb(91 99 167 / .22); }
.folha__tarja { display: grid; grid-template-columns: minmax(200px, 300px) 1fr auto; align-items: center; gap: 8px 28px; margin-bottom: 18px; padding: 14px 18px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgb(32 35 57 / .08); }
.folha__tarja h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.2; }
.folha__tarja p { color: var(--suave); font-size: 14.5px; }
.folha__tarja .folha__fala { grid-column: 2; font-size: 14px; color: var(--tinta); }
.folha__tarja .folha__todos { grid-column: 3; grid-row: 1; }
.folha__bolsos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 6px; overflow: hidden;
  background: rgb(255 255 255 / .38); box-shadow: 0 0 0 2px rgb(255 255 255 / .9) inset; }
.folha__bolsos > .cromo { margin: 14px; }
.folha__bolsos > * { position: relative; }
/* linhas de solda entre os bolsos e a boca de cada bolso no topo */
.folha__bolsos { --solda: #ffffff; }
.folha__bolsos > .cromo::before { content: ""; position: absolute; left: -14px; right: -14px; top: -14px; height: 3px; background: var(--solda); box-shadow: 0 1px 0 rgb(91 99 167 / .22), 0 -1px 0 rgb(91 99 167 / .1); }
.folha__bolsos > .cromo::after { content: ""; position: absolute; top: -14px; bottom: -14px; right: -15px; width: 3px; background: var(--solda); box-shadow: 1px 0 0 rgb(91 99 167 / .22), -1px 0 0 rgb(91 99 167 / .1); }
.folha__bolsos > .cromo:nth-child(4n)::after { display: none; }

/* Estoque por tipo e cidade */
.estoque { padding: clamp(40px, 5vw, 72px) 0; }
.estoque__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.estoque__cidades { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; color: var(--suave); font-size: 15px; }
.estoque__cidades b { font: 600 14px var(--mono); color: var(--tinta); }
.tipos ul { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tinta); }
.tipos button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--linha); background: transparent; cursor: pointer; text-align: left; font-size: 16px; font-weight: 500; }
.tipos button b { font: 600 15px var(--mono); color: var(--ferrugem); }
.tipos button:hover span { color: var(--marca-2); }

/* Quem somos e o cromo de título */
.sobre { padding: clamp(56px, 7vw, 96px) 0; background: var(--mesa); }
.sobre__grade { display: grid; grid-template-columns: 1.5fr minmax(240px, 300px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sobre__texto p { margin-top: 16px; max-width: 60ch; }
.sobre__texto .secao__titulo { margin-bottom: 8px; }
.sobre__fecho { font-weight: 600; }
.sobre__creci { font: 500 13px var(--mono); color: var(--suave); }
.sobre__creci a { color: var(--marca-2); text-decoration: underline; text-underline-offset: 3px; }
.cromo--titulo { padding-bottom: 18px; }
.cromo__pelicula { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: 4px; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 40%, #6c74b6, var(--marca) 55%, #3f4889);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18), 0 0 0 4px #f1f2f6, 0 0 0 5px rgb(32 35 57 / .08); }
.cromo__pelicula b { font-size: 46px; line-height: 1; font-weight: 700; }
.cromo__pelicula span { font: 500 12px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cromo__pelicula small { font-size: 13px; opacity: .9; }
.cromo--titulo .cromo__etiqueta { padding: 12px 0 0; }
.cromo--titulo .cromo__lugar { font-weight: 600; color: var(--marca-2); }

/* Venda seu imóvel e contato */
.vender, .contato { padding: clamp(56px, 7vw, 96px) 0; }
.contato { border-top: 1px solid var(--linha); }
.vender__grade, .contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.vender__texto > p, .contato__sub { margin-top: 16px; color: var(--suave); max-width: 56ch; }
.passos { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--linha); }
.passos li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.passos b { font: 600 15px/1.6 var(--mono); color: var(--ferrugem); }
.form { padding: clamp(20px, 2.4vw, 30px); border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 20px 40px -30px rgb(32 35 57 / .5); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--suave); }
.campo--largo { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea { padding: 12px 14px; border: 1px solid #c9cedb; border-radius: 6px; background: #fff; font-weight: 400; font-size: 15px; color: var(--tinta); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--marca); outline-offset: 0; border-color: transparent; }
.contato__dados { margin: 26px 0 0; }
.contato__dados div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.contato__dados dt { font: 500 12px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.contato__dados dd { margin: 0; }
.contato__dados a { color: var(--marca-2); text-decoration: underline; text-underline-offset: 3px; }

/* Rodapé */
.rodape { padding: 48px 0 40px; background: var(--tinta); color: #e8e9f1; }
.rodape__grade { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px 48px; }
.rodape__logo { display: inline-block; padding: 12px 14px; background: #fff; border-radius: 6px; }
.rodape__logo img { width: 170px; }
.rodape__marca p { margin-top: 14px; font-size: 14px; opacity: .85; }
.rodape__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; align-content: start; font-size: 14px; }
.rodape__links a { padding: 6px 0; opacity: .9; }
.rodape__links a:hover { opacity: 1; text-decoration: underline; }
.rodape__nota { grid-column: 1 / -1; font: 400 12.5px var(--mono); opacity: .7; }

/* Telas médias */
@media (max-width: 1100px) {
  .topo__menu { gap: 16px; font-size: 14px; }
  .topo__wa span { display: none; }
  .mesa__grade, .folha__bolsos { grid-template-columns: repeat(2, 1fr); }
  .folha__bolsos > .cromo:nth-child(4n)::after { display: block; }
  .folha__bolsos > .cromo:nth-child(2n)::after { display: none; }
  .folha__tarja { grid-template-columns: 1fr auto; }
  .folha__tarja p, .folha__tarja .folha__fala { grid-column: 1 / -1; }
  .folha__tarja .folha__todos { grid-column: 2; }
}
@media (max-width: 900px) {
  .topo__menu { position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0; padding: 8px 20px 18px; background: #fff; border-bottom: 1px solid var(--linha); transform: translateY(-120%); visibility: hidden; transition: transform .35s, visibility .35s; }
  .menu-aberto .topo__menu { transform: none; visibility: visible; }
  .topo__menu a { padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .topo__menu-botao { display: grid; place-items: center; gap: 6px; width: 46px; height: 46px; margin-left: auto; border: 0; background: transparent; cursor: pointer; }
  .topo__menu-botao span { display: block; width: 24px; height: 2px; background: var(--tinta); transition: transform .3s; }
  .menu-aberto .topo__menu-botao span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-aberto .topo__menu-botao span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .topo__wa { display: none; }
  .busca { grid-template-columns: 1fr 1fr 1fr; }
  .busca__campo--q { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--linha); }
  .busca__botao { grid-column: 1 / -1; justify-content: center; min-height: 52px; }
  .estoque__grade, .sobre__grade, .vender__grade, .contato__grade, .rodape__grade { grid-template-columns: 1fr; }
  .cromo--titulo { max-width: 300px; }
}
@media (max-width: 640px) {
  .topo__linha { min-height: 64px; }
  .topo__menu { inset: 64px 0 auto 0; }
  .topo__marca img { width: 124px; }
  .abertura__texto { padding-top: 28px; }
  .busca { grid-template-columns: 1fr 1fr; }
  .busca__campo { padding: 9px 12px; }
  .busca__campo:nth-of-type(3) { border-right: 0; }
  .busca__campo:nth-of-type(4) { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--linha); }
  .mesa__cabeca { grid-template-columns: 1fr auto; }
  .mesa__cabeca p { grid-column: 1 / -1; grid-row: 2; }
  .mesa__todos, .folha__todos { display: inline-flex; align-items: center; min-height: 44px; border: 0; text-decoration: underline; text-underline-offset: 3px; }
  .mesa__grade { gap: 12px; }
  .cromo { padding: 0 9px 10px; }
  .cromo__topo { min-height: 30px; font-size: 12px; letter-spacing: .02em; }
  .cromo__topo .cromo__tipo { display: none; }
  .cromo__tipo-m { display: inline; }
  .cromo__valor small { font-size: 12px; letter-spacing: .02em; }
  .busca__campo input, .busca__campo select { min-height: 44px; }
  .cromo__etiqueta { padding: 10px 0 0; }
  .cromo h3 { font-size: 13.5px; }
  .cromo__lugar { font-size: 12px; }
  .cromo__valor { font-size: 14px; }
  .cromo__ficha, .cromo__wa { display: none; }
  .contafios { width: 60%; right: -8px; top: 34px; border-width: 6px; }
  .folha { padding: 54px 10px 12px; }
  .folha__furos { left: 0; right: 0; top: 16px; bottom: auto; flex-direction: row; justify-content: center; gap: 22%; }
  .folha__furos i { width: 14px; height: 14px; }
  .folha__tarja { grid-template-columns: 1fr; padding: 12px 14px; }
  .folha__tarja .folha__todos { grid-column: 1; grid-row: auto; justify-self: start; }
  .folha__bolsos > .cromo { margin: 8px; }
  .folha__bolsos > .cromo::before { left: -8px; right: -8px; top: -8px; }
  .folha__bolsos > .cromo::after { top: -8px; bottom: -8px; right: -9px; }
  .campos { grid-template-columns: 1fr; }
  .contato__dados div { grid-template-columns: 1fr; gap: 2px; }
  .rodape__links { grid-template-columns: 1fr; }
}