/* ==========================================================================
   Class Solutions Cowork — Design System
   Cores e tipografia conforme o manual da marca (book_class_solutions.pdf)
   ========================================================================== */

:root {
  /* Paleta oficial */
  --verde: #009966;            /* cor principal — Pantone 340C */
  --verde-80: #33ad85;         /* escala tonal 80% */
  --verde-60: #66c2a3;         /* escala tonal 60% */
  --verde-30: #b3e0d1;         /* escala tonal 30% */
  --verde-wash: #eef8f4;       /* lavagem clara para fundos de seção */
  --lima: #a0cc42;
  --oliva: #9cb226;
  --verde-noite: #00361a;
  --tinta: #00212e;            /* azul-escuro quase preto */
  --azul: #003e65;
  --cinza: #52565a;            /* Cool Gray 11C */
  --cinza-claro: #e9ecee;
  --branco: #ffffff;
  --whatsapp: #25d366;

  --fonte: "Merriweather Sans", Arial, sans-serif;
  --radius: 14px;
  --sombra: 0 10px 30px rgba(0, 33, 46, 0.10);
  --sombra-forte: 0 18px 44px rgba(0, 33, 46, 0.16);
  --largura: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte);
  font-weight: 300;
  color: var(--cinza);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { max-width: 100%; }

h1, h2, h3, h4 { color: var(--tinta); font-weight: 800; line-height: 1.15; }

a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

section { padding: 88px 0; }

.secao-titulo { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.secao-titulo .tag {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--verde); margin-bottom: 14px;
}
.secao-titulo h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.secao-titulo p { font-size: 17px; }

.alt { background: var(--verde-wash); }

/* Seções de cor forte: têm fundo próprio e ficam FORA do zebrado
   (ver ajustarAlternancia em site.js, que filtra por .secao-forte).
   Para promover uma seção a fundo forte basta somar esta classe mais um
   fundo — nada precisa mudar no JS. */
.secao-forte { color: var(--branco); }
.secao-forte .secao-titulo h2 { color: var(--branco); }
.secao-forte .secao-titulo p { color: rgba(255, 255, 255, 0.78); }
.secao-forte .secao-titulo .tag { color: var(--lima); }

/* Variante azul — usa o auxiliar #003e65 do manual para não repetir o
   verde-noite das outras duas faixas escuras. */
.forte-azul {
  background:
    radial-gradient(820px 400px at -8% -25%, rgba(0, 153, 102, 0.30), transparent 62%),
    linear-gradient(160deg, var(--azul) 0%, var(--tinta) 62%, #001721 100%);
}

/* --------------------------------------------------------------------------
   Skeletons de carregamento (usados pelo site e pelo painel admin)
   -------------------------------------------------------------------------- */
.skel {
  position: relative; overflow: hidden; display: block;
  background: #e8ecee; border-radius: 8px; color: transparent !important;
}
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: skel-brilho 1.4s infinite;
}
@keyframes skel-brilho { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
span.skel { display: inline-block; vertical-align: middle; }
.skel-linha { height: 14px; margin: 7px 0; }
.skel-titulo { height: 22px; width: 65%; margin-bottom: 10px; }
.skel-num { height: 30px; width: 90px; }
.skel-btn { height: 44px; border-radius: 999px; flex: 1; }
.skel-foto { width: 100%; aspect-ratio: 8 / 5; border-radius: 0; }
.skel-icone { width: 46px; height: 46px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--fonte); font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none !important;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn-primario { background: var(--verde); color: var(--branco); }
.btn-primario:hover { background: #00875a; }
.btn-contorno { border-color: var(--verde); color: var(--verde); background: transparent; }
.btn-contorno:hover { background: var(--verde); color: var(--branco); }
.btn-claro { background: var(--branco); color: var(--tinta); }
.btn-contorno-claro { border-color: rgba(255,255,255,0.7); color: var(--branco); background: transparent; }
.btn-contorno-claro:hover { background: rgba(255,255,255,0.12); }
.btn-mini { padding: 9px 18px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cinza-claro);
}
.topo-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.logo-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.logo-lockup img { height: 46px; width: auto; }
.logo-texto { display: flex; flex-direction: column; line-height: 1; }
.logo-texto .class { font-size: 12px; font-weight: 400; letter-spacing: 0.28em; color: var(--cinza); text-transform: uppercase; }
.logo-texto .solutions { font-size: 24px; font-weight: 700; color: #3a3f42; letter-spacing: -0.01em; }
.logo-texto .cowork { font-size: 11px; font-weight: 700; letter-spacing: 0.32em; color: var(--verde); text-transform: uppercase; margin-top: 3px; }
.topo .logo-lockup .logo-texto .solutions { color: #3a3f42; }

.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--tinta); font-size: 15px; font-weight: 400; }
.menu a:hover { color: var(--verde); text-decoration: none; }
.menu .btn { margin-left: 8px; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2.5px; background: var(--tinta); margin: 5px 0; border-radius: 2px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: var(--branco);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(0, 153, 102, 0.55), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0, 62, 101, 0.5), transparent 60%),
    linear-gradient(150deg, #002d3f 0%, var(--tinta) 55%, #001721 100%);
  padding: 0;
}
/* Atencao ao shorthand: usar "padding: 96px 0 104px" aqui zera o recuo
   lateral de 24px herdado de .container e cola o texto na borda no mobile. */
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 96px 24px 104px; }
.hero h1 { color: var(--branco); font-size: clamp(34px, 5.2vw, 56px); margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--verde-60); }
.hero p.sub { font-size: clamp(17px, 2vw, 20px); color: rgba(255, 255, 255, 0.82); max-width: 540px; margin-bottom: 34px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  background: rgba(160, 204, 66, 0.16); color: var(--lima);
  border: 1px solid rgba(160, 204, 66, 0.4); padding: 7px 16px; border-radius: 999px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); animation: pulsar 1.8s infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-arte { position: relative; display: flex; justify-content: center; }
.hero-arte svg { width: min(380px, 80%); filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.35)); }

.hero-stats { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.hero-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 28px; padding-bottom: 34px; }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--branco); }
.stat span { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); }

.hero-local {
  display: flex; align-items: center; gap: 10px;
  color: var(--lima); font-weight: 700; font-size: 15.5px;
  margin: -14px 0 30px;
}
.hero-local svg { flex: none; width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Faixa de localização (destaque Augusta/Paulista)
   -------------------------------------------------------------------------- */
.faixa-local {
  background:
    radial-gradient(900px 420px at 110% -20%, rgba(160, 204, 66, 0.18), transparent 60%),
    linear-gradient(140deg, var(--verde-noite), #00594a 55%, var(--tinta));
  color: var(--branco);
}
.faixa-local .secao-titulo h2 { color: var(--branco); }
.faixa-local .secao-titulo p { color: rgba(255, 255, 255, 0.78); }
.faixa-local .secao-titulo .tag { color: var(--lima); }
.grade-local { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chip-local {
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius); padding: 26px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.chip-local:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.chip-local .chip-icone {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(160, 204, 66, 0.16); color: var(--lima); margin-bottom: 8px;
}
.chip-local .chip-icone svg { width: 28px; height: 28px; }
.chip-local b { font-size: 17px; font-weight: 800; color: var(--branco); }
.chip-local .chip-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); }
.faixa-local-cta { display: flex; justify-content: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Cards de espaços
   -------------------------------------------------------------------------- */
.card-espaco { flex: none; } /* largura definida pelo JS do carrossel */
.card-espaco {
  background: var(--branco); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--cinza-claro); position: relative;
}
.card-espaco:hover { transform: translateY(-4px); border-color: var(--verde-60); }
.card-espaco.destaque { border: 2px solid var(--verde); }
.selo-destaque {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--lima); color: var(--verde-noite); font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase;
}
.card-espaco .foto { aspect-ratio: 8 / 5; overflow: hidden; }
.card-espaco .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-espaco .corpo { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card-espaco h3 { font-size: 22px; margin-bottom: 4px; }
.card-espaco .slogan { font-size: 13.5px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.card-espaco p.desc { font-size: 15px; margin-bottom: 18px; flex: 1; }
.preco { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.preco b { font-size: 30px; font-weight: 800; color: var(--tinta); }
.preco small { font-size: 13px; color: var(--cinza); }
.preco .desde { font-size: 12.5px; color: var(--cinza); }

.rotulo-preco {
  display: inline-block; background: var(--verde-wash); color: var(--verde);
  border: 1px solid var(--verde-60); font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.06em; margin-top: 2px;
}
.rotulo-preco.tabela { margin-left: 8px; }

.disponibilidade { margin: 12px 0 20px; }
.disponibilidade .barra { height: 8px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden; }
.disponibilidade .barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--verde), var(--lima)); }
.disponibilidade span { font-size: 13px; font-weight: 400; color: var(--cinza); display: block; margin-top: 7px; }
.disponibilidade span b { color: var(--verde); font-weight: 800; }

.card-espaco .acoes { display: flex; gap: 10px; }
.card-espaco .acoes .btn { flex: 1; padding: 12px 10px; font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Comodidades
   -------------------------------------------------------------------------- */
.grade-comodidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card-comodidade {
  background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: var(--radius);
  padding: 22px 20px; display: flex; align-items: center; gap: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-comodidade:hover { border-color: var(--verde-60); box-shadow: var(--sombra); }
.card-comodidade .icone {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--verde-wash); color: var(--verde);
}
.card-comodidade .icone svg { width: 24px; height: 24px; }
.card-comodidade span { font-size: 15px; font-weight: 400; color: var(--tinta); }

/* --------------------------------------------------------------------------
   Diferenciais
   -------------------------------------------------------------------------- */
.grade-diferenciais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card-diferencial { padding: 28px; border-radius: var(--radius); background: var(--branco); border: 1px solid var(--cinza-claro); box-shadow: var(--sombra); }
.card-diferencial .num { font-size: 14px; font-weight: 800; color: var(--verde); letter-spacing: 0.1em; }
.card-diferencial h3 { font-size: 19px; margin: 10px 0 8px; }
.card-diferencial p { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Planos (tabela comparativa)
   -------------------------------------------------------------------------- */
/* O "color" explícito é necessário: dentro de uma .secao-forte o cartão
   branco herdaria o texto branco da seção e as células sumiriam. */
.tabela-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--sombra); border: 1px solid var(--cinza-claro); background: var(--branco); color: var(--cinza); }
table.planos { width: 100%; border-collapse: collapse; min-width: 680px; }
table.planos th, table.planos td { padding: 16px 20px; text-align: center; font-size: 15px; border-bottom: 1px solid var(--cinza-claro); }
table.planos th { background: var(--tinta); color: var(--branco); font-weight: 700; font-size: 15.5px; }
table.planos th:first-child, table.planos td:first-child { text-align: left; }
table.planos td:first-child { font-weight: 400; color: var(--tinta); }
table.planos tr:last-child td { border-bottom: none; }
table.planos .sim { color: var(--verde); font-weight: 800; }
table.planos .nao { color: var(--cinza-claro); }
table.planos td.col-destaque { background: var(--verde-wash); }
table.planos th.col-destaque { background: var(--verde); color: var(--branco); }

/* --------------------------------------------------------------------------
   Adicionais (aluguel de equipamentos)
   -------------------------------------------------------------------------- */
/* As setas vivem em calhas laterais próprias — nunca sobrepõem os cards */
.carrossel { position: relative; padding: 0 56px; }
.carrossel.sem-rolagem { padding: 0; }
/* Janela do carrossel: overflow hidden (sem barra de rolagem, sem faixa de
   fundo) e largura ajustada via JS para exibir apenas cards INTEIROS. */
.grade-adicionais, .grade-espacos {
  display: flex; flex-wrap: nowrap; gap: 20px;
  overflow: hidden; margin: 0 auto;
  padding: 5px; /* respiro para a borda de destaque e o hover */
}
.grade-adicionais.sem-rolagem, .grade-espacos.sem-rolagem { justify-content: center; }
.carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--cinza-claro);
  background: var(--branco); color: var(--verde); font-size: 26px; line-height: 1;
  cursor: pointer; box-shadow: var(--sombra); display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.carrossel-seta:hover { background: var(--verde); color: var(--branco); }
.carrossel-seta.anterior { left: 0; }
.carrossel-seta.proxima { right: 0; }
.carrossel.sem-rolagem .carrossel-seta { display: none; }
.card-adicional {
  background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: var(--radius);
  padding: 26px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  flex: none; position: relative; /* largura definida pelo JS do carrossel */
}
.selo-adicional {
  position: absolute; top: 12px; right: 12px;
  background: var(--lima); color: var(--verde-noite); font-size: 11.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase;
}
.card-adicional:hover { transform: translateY(-4px); border-color: var(--verde-60); }
.card-adicional .icone {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--verde-wash); color: var(--verde); margin-bottom: 4px;
}
.card-adicional .icone svg { width: 24px; height: 24px; }
.card-adicional b { font-size: 16.5px; font-weight: 800; color: var(--tinta); }
.card-adicional p { font-size: 13.5px; flex: 1; }
.preco-adicional { font-size: 18px; font-weight: 800; color: var(--verde); }
.preco-adicional small { font-size: 12.5px; font-weight: 400; color: var(--cinza); }

.lista-checks { display: flex; flex-direction: column; gap: 8px; }
.check-adicional {
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinta);
  font-weight: 400; cursor: pointer; padding: 8px 12px; border: 1.5px solid var(--cinza-claro);
  border-radius: 10px; transition: border-color 0.15s ease, background 0.15s ease;
}
.check-adicional:hover { border-color: var(--verde-60); }
.check-adicional:has(input:checked) { border-color: var(--verde); background: var(--verde-wash); }
.check-adicional input { accent-color: var(--verde); width: 16px; height: 16px; }
.check-adicional small { color: var(--cinza); }

/* --------------------------------------------------------------------------
   Depoimentos
   -------------------------------------------------------------------------- */
.grade-depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card-depoimento { background: var(--branco); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--sombra); border: 1px solid var(--cinza-claro); display: flex; flex-direction: column; }
.card-depoimento .aspas { font-size: 46px; font-weight: 800; color: var(--verde-60); line-height: 1; margin-bottom: 8px; }
.card-depoimento p { font-size: 15px; font-style: italic; flex: 1; }
.card-depoimento .autor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cinza-claro); }
.card-depoimento .autor b { display: block; color: var(--tinta); font-weight: 700; font-size: 15px; }
.card-depoimento .autor span { font-size: 13px; }

/* --------------------------------------------------------------------------
   Localização
   -------------------------------------------------------------------------- */
.local-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: stretch; }
.local-info h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.local-info .endereco { font-size: 17px; font-weight: 700; color: var(--tinta); margin: 18px 0 4px; }
.local-info ul { list-style: none; margin-top: 20px; }
.local-info li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 15px; }
.local-info li svg { flex: none; width: 20px; height: 20px; color: var(--verde); margin-top: 3px; }
.local-mapa { border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); min-height: 380px; border: 1px solid var(--cinza-claro); }
.local-mapa iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-size: 16px; font-weight: 700; color: var(--tinta); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--verde); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 20px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Conversão / formulários
   -------------------------------------------------------------------------- */
.conversao { background: linear-gradient(150deg, var(--verde-noite), var(--tinta)); color: var(--branco); }
.conversao .secao-titulo h2 { color: var(--branco); }
.conversao .form-card h3 { color: var(--tinta); }
.conversao .secao-titulo p { color: rgba(255, 255, 255, 0.75); }
.conversao .secao-titulo .tag { color: var(--lima); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 980px; margin: 0 auto; }
.form-card { background: var(--branco); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--sombra-forte); color: var(--cinza); }
.form-card h3 { font-size: 21px; margin-bottom: 6px; }
.form-card > p { font-size: 14.5px; margin-bottom: 22px; }
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--cinza-claro); border-radius: 10px;
  font-family: var(--fonte); font-size: 15px; color: var(--tinta); background: var(--branco);
  transition: border-color 0.15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); }
.campo textarea { resize: vertical; min-height: 90px; }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card .btn { width: 100%; margin-top: 6px; }
.form-msg { display: none; margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 400; }
.form-msg.ok { display: block; background: var(--verde-wash); color: var(--verde-noite); border: 1px solid var(--verde-60); }
.form-msg.erro { display: block; background: #fdeeee; color: #8a2020; border: 1px solid #eebbbb; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape { background: var(--tinta); color: rgba(255, 255, 255, 0.72); padding: 64px 0 0; }
.rodape-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.rodape .logo-lockup img { height: 44px; }
.rodape .logo-texto .class { color: rgba(255, 255, 255, 0.6); }
.rodape .logo-texto .solutions { color: var(--branco); }
.rodape .logo-texto .cowork { color: var(--verde-60); }
.rodape p, .rodape li, .rodape a { font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.rodape h4 { color: var(--branco); font-size: 15px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.04em; text-transform: uppercase; }
.rodape ul { list-style: none; }
.rodape li { padding: 5px 0; }
.rodape a:hover { color: var(--branco); }
.rodape .marca-desc { margin-top: 18px; max-width: 320px; }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; }
.rodape-base .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rodape-base span { font-size: 13px; color: rgba(255, 255, 255, 0.45); }

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */
.zap-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp);
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.zap-flutuante:hover { transform: scale(1.08); }
.zap-flutuante svg { width: 32px; height: 32px; fill: #fff; }

/* --------------------------------------------------------------------------
   Página de detalhe do espaço
   -------------------------------------------------------------------------- */
.detalhe-hero { background: linear-gradient(150deg, var(--verde-noite), var(--tinta)); color: var(--branco); padding: 64px 0; }
.detalhe-hero .crumb { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; }
.detalhe-hero .crumb a { color: var(--verde-60); }
.detalhe-hero h1 { color: var(--branco); font-size: clamp(30px, 4.4vw, 44px); }
.detalhe-hero .slogan { color: var(--lima); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; margin-top: 10px; }

.detalhe-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.galeria { display: grid; gap: 14px; }
.galeria .principal { border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); }
.galeria .principal img { width: 100%; display: block; }
.galeria .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galeria .thumbs img { border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s ease; display: block; width: 100%; }
.galeria .thumbs img.ativa, .galeria .thumbs img:hover { border-color: var(--verde); }

.painel-info { background: var(--branco); border: 1px solid var(--cinza-claro); border-radius: var(--radius); box-shadow: var(--sombra); padding: 30px 28px; position: sticky; top: 96px; }
.painel-info .preco { flex-wrap: wrap; }
.painel-info .preco .desde { flex-basis: 100%; }
.painel-info .preco b { font-size: 34px; }
.painel-info ul.infos { list-style: none; margin: 18px 0; border-top: 1px solid var(--cinza-claro); }
.painel-info ul.infos li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cinza-claro); font-size: 14.5px; }
.painel-info ul.infos li b { color: var(--tinta); font-weight: 700; }
.painel-info .btn { width: 100%; margin-top: 8px; }

.lista-beneficios { list-style: none; margin-top: 8px; }
.lista-beneficios li { display: flex; gap: 12px; padding: 9px 0; font-size: 15.5px; align-items: flex-start; }
.lista-beneficios svg { flex: none; width: 20px; height: 20px; color: var(--verde); margin-top: 3px; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grade-comodidades { grid-template-columns: repeat(3, 1fr); }
  .grade-local { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; padding: 72px 24px 80px; }
  .hero-arte { display: none; }
}

@media (max-width: 860px) {
  section { padding: 64px 0; }
  .grade-diferenciais, .grade-depoimentos { grid-template-columns: 1fr; }
  .grade-comodidades { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .local-grid { grid-template-columns: 1fr; }
  .detalhe-grid { grid-template-columns: 1fr; }
  .painel-info { position: static; }
  .hero-stats .container { grid-template-columns: repeat(2, 1fr); }
  .rodape-grid { grid-template-columns: 1fr; gap: 28px; }

  .menu {
    position: fixed; inset: 76px 0 auto 0; background: var(--branco);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 22px;
    border-bottom: 1px solid var(--cinza-claro); box-shadow: var(--sombra);
    display: none;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--cinza-claro); }
  .menu a:last-of-type { border-bottom: none; }
  .menu .btn { margin: 12px 0 0; }
  .menu-toggle { display: block; }
}

@media (max-width: 600px) {
  /* Alem do recuo lateral restaurado, o titulo perde alguns pontos para
     nao ocupar a largura inteira em telas estreitas. */
  .hero-inner { padding-top: 56px; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(28px, 8.4vw, 38px); line-height: 1.18; margin: 16px 0 16px; }
  .hero p.sub { font-size: 16px; margin-bottom: 28px; }
  .hero-local { font-size: 14.5px; align-items: flex-start; margin: -8px 0 26px; }
  .hero-local svg { margin-top: 2px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
  /* Longhand de proposito: "padding: 0 20px" aqui venceria o .hero-inner
     (mesma especificidade, regra posterior) e zeraria o recuo superior do
     hero, colando o conteudo no cabecalho. Ver regra 10 do CLAUDE.md. */
  .container { padding-left: 20px; padding-right: 20px; }
  .grade-comodidades { grid-template-columns: 1fr; }
  .grade-local { grid-template-columns: 1fr; }
  .carrossel { padding: 0 40px; }
  .carrossel-seta { width: 34px; height: 34px; font-size: 21px; }
  .campo-linha { grid-template-columns: 1fr; }
  .card-espaco .acoes { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Avaliacoes — estrelas nos cards e formulario publico de envio
   -------------------------------------------------------------------------- */
.estrelas { display: block; font-size: 17px; letter-spacing: 2px; color: #f0a500; margin-bottom: 10px; }
.estrelas .vazia { color: var(--cinza-claro); }

.avaliacao-cta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin-top: 40px; text-align: center;
}
.avaliacao-cta p { font-size: 15.5px; margin: 0; }

.form-avaliacao {
  max-width: 720px; margin: 26px auto 0; background: var(--branco);
  border: 1px solid var(--cinza-claro); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--sombra);
}
.form-avaliacao .dica-avaliacao { font-size: 13.5px; color: var(--cinza); margin: 4px 0 18px; }
.acoes-avaliacao { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

.estrelas-entrada { display: flex; gap: 4px; }
.estrelas-entrada .estrela {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-size: 30px; line-height: 1; color: var(--cinza-claro);
  transition: color 0.12s ease, transform 0.12s ease;
}
.estrelas-entrada .estrela.cheia { color: #f0a500; }
.estrelas-entrada .estrela:hover { transform: scale(1.12); }
.estrelas-entrada .estrela:focus-visible { outline: 2px solid var(--verde); border-radius: 4px; }

@media (max-width: 600px) {
  .avaliacao-cta { flex-direction: column; gap: 10px; }
  .avaliacao-cta .btn { width: 100%; }
  .form-avaliacao { padding: 22px 18px; }
  .acoes-avaliacao { flex-direction: column-reverse; }
  .acoes-avaliacao .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Seletor de adicionais do formulario (colapsavel, com busca e chips)
   -------------------------------------------------------------------------- */
.seletor-adicionais { position: relative; }

.seletor-topo {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--branco); border: 1.5px solid var(--cinza-claro); border-radius: 10px;
  padding: 13px 16px; cursor: pointer; font-family: var(--fonte);
  font-size: 15px; font-weight: 400; color: var(--tinta); text-align: left;
  transition: border-color 0.15s ease;
}
.seletor-topo:hover { border-color: var(--verde-60); }
.seletor-adicionais.aberto .seletor-topo { border-color: var(--verde); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.seletor-seta { color: var(--verde); font-size: 13px; transition: transform 0.15s ease; }
.seletor-adicionais.aberto .seletor-seta { transform: rotate(180deg); }

.seletor-painel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--branco); border: 1.5px solid var(--verde); border-top: none;
  border-radius: 0 0 10px 10px; padding: 12px; box-shadow: var(--sombra-forte);
}
.seletor-busca {
  width: 100%; margin-bottom: 10px; padding: 10px 12px; font-family: var(--fonte); font-size: 14.5px;
  border: 1.5px solid var(--cinza-claro); border-radius: 8px; color: var(--tinta);
}
.seletor-busca:focus { outline: none; border-color: var(--verde); }
.seletor-painel .lista-checks { max-height: 260px; overflow-y: auto; }
.seletor-vazio { font-size: 14px; color: var(--cinza); font-style: italic; padding: 10px 4px; margin: 0; }

.seletor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seletor-chips:empty { margin-top: 0; }
.chip-adicional {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--verde-wash); border: 1px solid var(--verde-60); color: var(--verde-noite);
  border-radius: 999px; padding: 5px 8px 5px 14px; font-size: 13.5px; font-weight: 700;
}
.chip-remover {
  background: none; border: none; cursor: pointer; color: var(--verde);
  font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.chip-remover:hover { color: #8a2020; }

@media (max-width: 600px) {
  .seletor-painel .lista-checks { max-height: 220px; }
  .chip-adicional { font-size: 13px; }
}

/* Widget do captcha (Cloudflare Turnstile) */
/* O widget do Turnstile tem largura fixa (300px) e não acompanha o campo.
   Centralizar deixa o bloco alinhado com o resto do formulário sem depender
   de escala por CSS, que borraria o conteúdo do iframe. */
.captcha-wrap { display: flex; justify-content: center; margin: 4px 0 18px; }
.captcha-wrap:empty { display: none; }
.captcha-wrap iframe { max-width: 100%; }