/* Centro Educacional Cecibele — site institucional.

   A gramática visual vem do próprio prédio: o muro creme com placas em arco,
   cada uma com um desenho de linha dourado, o verde-sálvia do portão e das
   paredes, o rosa e o amarelo-manteiga dos murais da recepção. As cores foram
   tiradas das fotos; o arco das placas é a forma que se repete em toda a página. */

:root {
  --creme:        #fdf3e9;
  --creme-fundo:  #f6e9d9;
  --creme-linha:  #e9d9c3;
  --verde:        #3d5240;
  --verde-escuro: #0f4026;
  --verde-salvia: #8aa07c;
  --blush:        #f3cbb4;
  --blush-claro:  #fae3d6;
  --manteiga:     #f7e0b0;
  --ouro:         #b08520;
  --ouro-texto:   #8a6714;
  --ouro-claro:   #e3c169;
  --tinta:        #2b362a;
  --tinta-suave:  #58644f;

  --medida: 36rem;
  --topo-altura: 4.5rem;
  --largura: 70rem;
  --arco: 200px;

  --display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::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;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Com width/height no HTML, definir só a largura no CSS faz o navegador usar a
   altura do atributo e esticar a imagem. A altura automática evita isso. */
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--verde-escuro);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p, dd { margin: 0; text-wrap: pretty; }

a { color: var(--verde-escuro); }

:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--ouro);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: .7rem 1.1rem;
  background: var(--verde-escuro);
  color: var(--creme);
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s;
}
.pular:focus { top: 0; }

.interna, .faixa-interna {
  width: min(100% - 2rem, var(--largura));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .interna, .faixa-interna { width: min(100% - 4rem, var(--largura)); }
}

.chamada {
  max-width: var(--medida);
  margin-top: .9rem;
  color: var(--tinta-suave);
  font-size: 1.125rem;
}

/* ---------- Cabeçalho ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: .7rem 1rem;
  background: var(--creme);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topo.rolou { border-bottom-color: var(--creme-linha); }

@media (min-width: 48rem) {
  .topo { padding: .7rem 2rem; }
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}

.marca-brasao {
  width: 2.1rem;
  height: auto;
  mix-blend-mode: darken;
}

.marca-texto { display: grid; }

.marca-linha {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.marca-nome {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--verde-escuro);
  line-height: 1.05;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
}

.menu a {
  color: var(--tinta-suave);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--verde-escuro); border-bottom-color: var(--ouro-claro); }

.acessos { display: flex; gap: .5rem; }

.botao {
  display: inline-block;
  padding: .55rem 1.1rem .6rem;
  border: 1px solid var(--verde-escuro);
  border-radius: 9px;
  background: var(--verde-escuro);
  color: var(--creme);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.botao:hover { background: #0a3420; border-color: #0a3420; }

.botao-contorno {
  background: transparent;
  color: var(--verde-escuro);
}
.botao-contorno:hover { background: var(--creme-fundo); color: var(--verde-escuro); border-color: var(--verde-escuro); }

/* Em telas estreitas os dois acessos continuam no alto; as âncoras ficam
   acessíveis rolando a página. */
@media (max-width: 63.99rem) {
  .topo .menu { display: none; }
}

@media (max-width: 30rem) {
  .topo { flex-wrap: nowrap; gap: .5rem; padding: .5rem .75rem; }
  .marca-linha { display: none; }
  .marca-nome { font-size: 1.125rem; }
  .marca-brasao { width: 1.75rem; }
  .acessos { gap: .4rem; }
  .acessos .botao { font-size: .8125rem; padding: .45rem .7rem .5rem; }
}

/* ---------- Abertura ---------- */

.abertura {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: min(76vh, 40rem);
  align-content: end;
  overflow: hidden;
}

.abertura-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 52%;
}

/* No celular o texto não disputa espaço com a placa da escola: a foto fica
   inteira em cima e as palavras embaixo, no verde. */
@media (max-width: 48rem) {
  .abertura { display: block; min-height: 0; background: var(--verde-escuro); }
  .abertura::after { display: none; }
  .abertura-foto {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 62% 42%;
  }
  .abertura-texto { padding: 2.25rem 0 2.75rem; }
}

.abertura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A placa da escola fica no alto, à direita; o texto fica embaixo, à esquerda.
     Por isso a sombra vem na diagonal: escurece o lado do texto e deixa a placa
     e as luzes do muro aparecendo. Em telas estreitas vale a vertical. */
  background-image:
    linear-gradient(102deg,
      rgba(8, 24, 14, .95) 0%,
      rgba(8, 24, 14, .9) 28%,
      rgba(8, 24, 14, .55) 52%,
      rgba(8, 24, 14, .12) 74%,
      rgba(8, 24, 14, 0) 88%),
    linear-gradient(to top,
      rgba(8, 24, 14, .9) 0%,
      rgba(8, 24, 14, .62) 26%,
      rgba(8, 24, 14, .18) 52%,
      rgba(8, 24, 14, 0) 74%);
}

.abertura-texto {
  width: min(100% - 2rem, var(--largura));
  margin-inline: auto;
  padding: 4rem 0 2.75rem;
  color: var(--creme);
}
@media (min-width: 48rem) {
  .abertura-texto { width: min(100% - 4rem, var(--largura)); padding-bottom: 3.5rem; }
}

.abertura h1 {
  max-width: 15ch;
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2.125rem, 6.2vw, 4.25rem);
  line-height: 1.05;
  color: var(--creme);
  margin: 0;
}

.abertura-frase {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: #f2e8db;
  font-size: 1.0625rem;
}

.pilares {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
}

.pilares li {
  min-width: 7.5rem;
  padding: 1.1rem .9rem .95rem;
  text-align: center;
  border: 1px solid rgba(227, 193, 105, .65);
  border-radius: 70px 70px 10px 10px;
  background: rgba(15, 38, 25, .42);
  color: var(--manteiga);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .05em;
  opacity: 0;
  animation: acender .5s ease-out forwards;
}
.pilares li:nth-child(1) { animation-delay: .35s; }
.pilares li:nth-child(2) { animation-delay: .55s; }
.pilares li:nth-child(3) { animation-delay: .75s; }

@keyframes acender {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pilares li { opacity: 1; animation: none; }
}

/* ---------- Os três quadros da recepção ---------- */

.quadros { padding: clamp(3rem, 8vw, 5rem) 0; }

.quadros-lista {
  width: min(100% - 2rem, var(--largura));
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 40rem) {
  .quadros-lista { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
@media (min-width: 48rem) {
  .quadros-lista { width: min(100% - 4rem, var(--largura)); }
}

.quadro {
  padding: 2rem 1.5rem 1.75rem;
  background: var(--creme-fundo);
  border: 1px solid var(--creme-linha);
  border-radius: 14px;
  text-align: center;
}

.quadro .icone { width: 3rem; height: 3rem; }

.placa .icone { width: 3.5rem; height: 3.5rem; }

.quadro h3 {
  margin-top: .85rem;
  font-size: 1.375rem;
}

.quadro p {
  margin-top: .5rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* ---------- Faixas verdes ---------- */

.nova-fase, .fecho {
  background: var(--verde);
  color: var(--creme);
  padding: clamp(3.25rem, 8vw, 5.5rem) 0;
}

.fecho { background: var(--verde-escuro); }

.nova-fase h2, .fecho h2 { color: var(--creme); }

.nova-fase h2 {
  font-size: clamp(1.875rem, 5vw, 2.75rem);
}

.palavra {
  margin: 1.5rem 0 0;
  max-width: 44rem;
  border-left: 2px solid var(--ouro-claro);
  padding-left: clamp(1rem, 3vw, 1.75rem);
}

.palavra p {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: #f4ece0;
}

.palavra footer {
  margin-top: .9rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ouro-claro);
}

.selo {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 1.9rem 1rem;
  background: var(--blush);
  color: #4d2c1b;
  border-radius: 44px 44px 10px 10px;
  font-size: .9375rem;
  font-weight: 700;
}

.fecho h2 { font-size: clamp(2rem, 6vw, 3.25rem); max-width: 18ch; }

.fecho p {
  max-width: var(--medida);
  margin-top: 1.25rem;
  color: #e9ddcc;
  font-size: 1.125rem;
}

.fecho .agradecimento {
  font-family: var(--display);
  font-style: italic;
  font-optical-sizing: auto;
  font-size: 1.5rem;
  color: var(--ouro-claro);
  margin-top: 1.75rem;
}

/* ---------- Objetivo ---------- */

.objetivo { padding: clamp(3.25rem, 8vw, 5.5rem) 0; }

.objetivo h2, .projetos h2, .espacos h2, .jardim h2, .fardamento h2 {
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
}

.frentes {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
@media (min-width: 40rem) {
  .frentes { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

.frente {
  padding: 1.6rem 1.7rem 1.7rem;
  background: var(--creme-fundo);
  border: 1px solid var(--creme-linha);
  border-radius: 14px;
}

.frente h3 { font-size: 1.3125rem; }

.frente h3::after {
  content: '';
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: .65rem;
  background: var(--blush);
}
.frente:nth-child(2) h3::after { background: var(--verde-salvia); }
.frente p { margin-top: .6rem; color: var(--tinta-suave); }

.arremate {
  margin-top: 2rem;
  max-width: 44rem;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.1875rem, 2.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--verde-escuro);
}

/* ---------- As placas do muro ---------- */

.projetos {
  /* o mural fecha a seção: nada de faixa vazia embaixo dele */
  padding: clamp(3.25rem, 8vw, 5.5rem) 0 0;
  background: var(--creme-fundo);
}

.placas {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
  align-items: start;
}
@media (min-width: 38rem) {
  .placas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .placas { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.placa {
  background: var(--creme);
  border: 1px solid var(--creme-linha);
  border-radius: var(--arco) var(--arco) 14px 14px;
  overflow: hidden;
}

.placa[open] {
  background: #fff;
  border-color: var(--ouro-claro);
}

.placa summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2.25rem 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.placa summary::-webkit-details-marker { display: none; }

.placa summary:hover .placa-nome { color: var(--ouro-texto); }

.placa-nome {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--verde-escuro);
  text-wrap: balance;
}

.placa > p {
  margin: 0 1.5rem 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--creme-linha);
  color: var(--tinta-suave);
  font-size: .9375rem;
  text-align: center;
}

/* ---------- Ursinhos ---------- */

/* O ursinho é montado em partes para cada um ganhar a sua cor em --u, no mesmo
   tom dos murais pintados nas paredes da escola. */
.u-corpo  { fill: var(--u, #8aa07c); }
.u-pata   { fill: #fbf1e4; }
.u-orelha { fill: #f3cbb4; }
.u-traco  { fill: #4a3a28; }
.u-linha  { fill: none; stroke: #4a3a28; stroke-width: 2.2; stroke-linecap: round; }

/* O muro das placas termina num mural, como o muro da fachada termina
   nos canteiros. */
.mural { margin-top: 2.75rem; }

.mural svg {
  display: block;
  width: 100%;
  height: clamp(140px, 19vw, 240px);
}

.m-sol       { fill: #f7e0b0; }
.m-sol-raio  { fill: none; stroke: #e0bd77; stroke-width: 5; stroke-linecap: round; }
.m-morro-a   { fill: #dfe6d4; }
.m-morro-b   { fill: #c6d3b7; }
.m-chao      { fill: none; stroke: #b08520; stroke-width: 2.5; opacity: .5; }
.m-planta    { fill: #8aa07c; stroke: #8aa07c; stroke-width: 2.5; stroke-linejoin: round; }

.urso-rodape {
  width: 1.6rem;
  height: 1.9rem;
  vertical-align: -.35rem;
  margin-right: .3rem;
}

/* ---------- Galeria ---------- */

.espacos { padding: clamp(3.25rem, 8vw, 5.5rem) 0; }

.galeria {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
@media (min-width: 46rem) {
  .galeria { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .foto-larga { grid-column: 1 / -1; }
}

.foto { margin: 0; }

.foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--creme-linha);
}

.foto-larga img { aspect-ratio: 16 / 8; object-fit: cover; object-position: center 58%; }

/* As duas fotos menores dividem a linha: a mesma proporção alinha as legendas. */
.galeria .foto:not(.foto-larga) img { aspect-ratio: 4 / 3; object-fit: cover; }

.foto figcaption {
  margin-top: .7rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* ---------- Jardim ---------- */

.jardim {
  padding: clamp(3.25rem, 8vw, 5.5rem) 0;
  background: var(--creme-fundo);
}

.jardim-grade, .fardamento-grade {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .jardim-grade { grid-template-columns: 1fr 1.15fr; gap: 3rem; }
  .fardamento-grade { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.jardim-rotulo {
  margin-top: 2rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--verde-escuro);
}

.plaquinhas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
}

.plaquinhas li {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1rem .45rem .7rem;
  background: var(--creme);
  border: 1px solid var(--creme-linha);
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--verde-escuro);
}

.plaquinhas .icone { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }

/* ---------- Fardamento ---------- */

.fardamento { padding: clamp(3.25rem, 8vw, 5.5rem) 0; }

.pecas { margin: 2rem 0 0; }

.pecas > div + div {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--creme-linha);
}

.pecas dt {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--verde-escuro);
}

.pecas dd {
  margin: .3rem 0 0;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* ---------- Portal ---------- */

.portal {
  padding: clamp(3.25rem, 8vw, 5.5rem) 0;
  background: var(--creme-fundo);
}

.portal h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }

.portas {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
@media (min-width: 42rem) {
  .portas { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

.porta {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 1.9rem 1.7rem 1.8rem;
  background: var(--creme);
  border: 1px solid var(--creme-linha);
  border-radius: 14px;
}

.porta .icone { width: 3rem; height: 3rem; }

.porta h3 { margin-top: .8rem; font-size: 1.3125rem; }

.porta p {
  margin-top: .55rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
  max-width: 30ch;
}

.porta .botao { margin-top: auto; padding-top: .6rem; padding-bottom: .65rem; }
.porta p { margin-bottom: 1.5rem; }

.portal-nota {
  margin-top: 1.75rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 2.25rem 0 2.75rem;
  background: var(--creme);
  border-top: 1px solid var(--creme-linha);
}

.rodape-grade { display: grid; gap: .3rem; }

.rodape-marca {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--verde-escuro);
}

.rodape-local { color: var(--tinta-suave); font-size: .9375rem; }

/* O cabeçalho é fixo no topo, então todo alvo de âncora começa abaixo dele. */
[id] { scroll-margin-top: calc(var(--topo-altura) + 1.5rem); }

/* ---------- O projeto de reforma ---------- */

.reforma { padding: clamp(3.25rem, 8vw, 5.5rem) 0; }

.reforma h2 { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }

.reforma-grandes,
.reforma-grade {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
@media (min-width: 46rem) {
  .reforma-grandes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 40rem) {
  .reforma-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .reforma-grade { grid-template-columns: repeat(3, 1fr); }
}

.comparar { margin: 0; }

/* As duas fotos ficam uma sobre a outra; a de cima é cortada na posição da
   barra. Quem arrasta mexe num range invisível por cima — assim funciona no
   dedo, no mouse e no teclado. */
.cmp-palco {
  position: relative;
  overflow: hidden;
  cursor: ew-resize;
  /* O navegador fica com o gesto vertical (rolar a página) e nos deixa o
     horizontal (arrastar a divisória). Sem isto, no celular só dá para tocar. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 1px solid var(--creme-linha);
  background: var(--creme-fundo);
}

.comparar-larga .cmp-palco { aspect-ratio: 4 / 3; }

.cmp-palco img {
  position: absolute;
  -webkit-user-drag: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmp-depois { clip-path: inset(0 0 0 var(--p)); }

.cmp-rotulo {
  position: absolute;
  top: .7rem;
  padding: .3rem .7rem .35rem;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  pointer-events: none;
}

.cmp-r-antes  { left: .7rem;  background: var(--verde-escuro); color: var(--creme); }
.cmp-r-depois { right: .7rem; background: var(--blush); color: #4d2c1b; }

.cmp-linha {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: var(--creme);
  pointer-events: none;
}

.cmp-puxa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 2px solid var(--creme);
  border-radius: 50%;
  background: rgba(15, 38, 25, .55);
}

.cmp-puxa svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--creme);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmp-controle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  /* Quem atende dedo e mouse é o palco; o range fica só para o teclado. */
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.cmp-controle::-webkit-slider-thumb { -webkit-appearance: none; width: 2.5rem; height: 100%; }
.cmp-controle::-moz-range-thumb { width: 2.5rem; height: 100%; border: 0; }

.cmp-controle:focus-visible { outline: none; }
.cmp-controle:focus-visible ~ .cmp-linha .cmp-puxa { border-color: var(--ouro-claro); box-shadow: 0 0 0 3px var(--ouro-claro); }

.comparar figcaption { padding-top: .9rem; }

.comparar figcaption h3 { font-size: 1.1875rem; }

.comparar figcaption p {
  margin-top: .35rem;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

.reforma .arremate { margin-top: 2.75rem; }