/* ==========================================================================
   RE/MAX Casabella · base
   Reset, tipografia, containers, botões, cabeçalhos de seção, keyframes.
   Movimento copiado do tema do fineprop.com (fade-left, fade-up, fade-down,
   navAnimate, sellCta) e traduzido para a marca da Casabella.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--tamanho-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-acao); text-decoration: none; transition: color var(--t-rapida); }
a:hover { color: var(--navy); }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--linha); }

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--fonte-display);
  color: var(--navy);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
h1, .h1 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 300; }
h2, .h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 300; }
h3, .h3 { font-size: 1.375rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }
strong, b { font-weight: 700; }
.num { font-family: var(--fonte-display); font-variant-numeric: tabular-nums; }

.pular {
  position: absolute; left: -999px; top: 8px; z-index: 3000;
  background: var(--navy); color: #fff; padding: 8px 14px; border-radius: var(--radius);
}
.pular:focus { left: 8px; }

/* ---------- containers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container-texto { width: 100%; max-width: var(--container-texto); margin: 0 auto; padding-inline: var(--gutter); }
.secao { padding-block: clamp(48px, 6vw, 80px); }
.secao-apertada { padding-block: clamp(32px, 4vw, 48px); }
.fundo-navy { background: var(--navy); color: #fff; }
.fundo-navy h1, .fundo-navy h2, .fundo-navy h3 { color: #fff; }
.fundo-branco { background: #fff; }
.fundo-claro { background: var(--faixa-clara); }
.centro { text-align: center; }

/* Cabeçalho de seção (fineprop: h2 40px/300 + sublinhado 250x2px) */
.sec-head { text-align: center; margin-bottom: 2rem; }
.sec-head h1, .sec-head h2 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); font-weight: 300; }
.sec-head.sublinhado h2::after, .sec-head.sublinhado h1::after {
  content: ""; display: block; width: 250px; max-width: 60%; height: 2px;
  margin: 1.5rem auto 0; background: var(--secondary);
}
.fundo-navy .sec-head.sublinhado h2::after { background: rgba(255, 255, 255, 0.35); }
.sec-head p { max-width: 720px; margin: 0.75rem auto 0; font-size: 1.125rem; }
.eyebrow {
  display: block; font-family: var(--fonte-display); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vermelho); margin-bottom: 0.6rem;
}

/* ---------- botões (fineprop: outline 0.8px, 19px/500, 9px 20px, radius 0) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--fonte-display); font-weight: 500; font-size: 1.05rem; line-height: 1.4;
  padding: 10px 22px; border-radius: 0; border: 0.8px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
  white-space: nowrap;
}
.btn-outline-branco { color: #fff; border-color: #fff; background: transparent; }
.btn-outline-branco:hover { background: #fff; color: var(--navy); }
.btn-outline-navy { color: var(--navy); border-color: var(--navy); background: transparent; border-width: 1.6px; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-navy { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn-navy:hover { background: #081a32; color: #fff; }
.btn-vermelho { color: #fff; background: var(--vermelho); border-color: var(--vermelho); border-radius: var(--radius); font-weight: 700; }
.btn-vermelho:hover { background: #b9152a; color: #fff; }
/* verde-petróleo oficial do WhatsApp: branco sobre #128C7E passa o contraste AA (o #25D366 não passa) */
.btn-whatsapp { color: #fff; background: #0F7B6F; border-color: #0F7B6F; border-radius: var(--radius); font-weight: 600; } /* #128C7E dava contraste 4,1 (mínimo 4,5) */
.btn-whatsapp:hover { background: #0B5E54; color: #fff; }
.btn-grande { font-size: 1.2rem; padding: 16px 32px; }
.btn-bloco { width: 100%; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.link-upper {
  font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600;
  font-size: 0.9rem; color: var(--navy);
}
.link-upper:hover { color: var(--vermelho); }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--fonte-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--texto); background: #fff; border: 1px solid #D5D5D5; border-radius: var(--radius);
  padding: 12px 14px; width: 100%; transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb), 0.12); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--vermelho); }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grade .largo { grid-column: 1 / -1; }
.form-aviso { font-size: 0.9rem; color: var(--texto-suave); margin-top: 8px; }
.form-msg { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 0.95rem; display: none; }
.form-msg.ok { display: block; background: #E7F5EC; color: #1B5E20; }
.form-msg.erro { display: block; background: #FDECEC; color: #8A1521; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
@media (max-width: 640px) { .form-grade { grid-template-columns: 1fr; } }

/* ---------- utilidades ---------- */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 991px) { .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade-3, .grade-2 { grid-template-columns: 1fr; } }
.shadow { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.2); }

/* ---------- keyframes (fineprop) ---------- */
@keyframes fade-left { from { opacity: 0; transform: translate(-100px, 0); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes fade-up { from { opacity: 0; transform: translate(0, 100px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes fade-down { from { opacity: 0; transform: translate(0, -100px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes navAnimate { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes sellCta { from { transform: scale(0) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* AOS: fineprop usa transição de 1.2s */
[data-aos] { transition-duration: var(--t-aos) !important; }

/* Quem pediu menos movimento recebe a página pronta */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}