/* B232 — estilos compartilhados do site. Ver brandbook/BRANDBOOK.md para as regras de uso. */
:root{
  --black:#111111;
  --off-white:#F5F3EE;
  --yellow:#FFC400;
  --beige:#E6E1D6;
  --pad: clamp(20px, 6vw, 48px);
  --space-lg: clamp(48px, 9vw, 96px);
  --space-md: clamp(28px, 5vw, 48px);
}
*{box-sizing:border-box;}
html{ overflow-x:hidden; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--off-white);
  color:var(--black);
}
header{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:10px 24px;
  padding:20px var(--pad);
}
.logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:clamp(19px,3vw,22px); text-decoration:none; color:var(--black); }
.logo span{ color:var(--yellow); }
.logo-mark{ width:28px; height:28px; color:var(--black); flex-shrink:0; }
nav{ display:flex; flex-wrap:wrap; gap:8px 24px; }
nav a{ color:var(--black); text-decoration:none; font-size:14px; }

.hero{
  position:relative;
  padding:var(--space-lg) var(--pad) var(--space-md);
  background:linear-gradient(180deg, var(--beige) 0%, var(--off-white) 100%);
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
  max-width:1200px; margin:0 auto;
}
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.1fr 1fr; gap:56px; }
}
.hero h1{ font-size:clamp(2.1rem, 5.2vw, 3.4rem); line-height:1.1; margin:0 0 20px 0; max-width:680px; }
/* Realce "marca-texto": mantém o texto legível (preto) e usa o amarelo como destaque atrás,
   em vez de contorno sobre a letra — evita artefato visual quando o destaque quebra linha. */
.hero h1 .accent{
  background-image:linear-gradient(var(--yellow), var(--yellow));
  background-repeat:no-repeat;
  background-size:100% 0.32em;
  background-position:0 92%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero p{ font-size:clamp(16px,2.2vw,18px); max-width:520px; color:#333; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.cta{
  display:inline-block; margin-top:20px; padding:14px 28px;
  background:var(--black); color:var(--off-white); font-weight:700;
  text-decoration:none; border-radius:4px; width:fit-content;
}
.cta:hover{ background:var(--yellow); color:var(--black); }
.cta-ghost{
  display:inline-block; text-decoration:none;
  background:transparent; color:var(--black); border:2px solid var(--black);
  padding:12px 26px;
}
.cta-ghost:hover{ background:var(--black); color:var(--off-white); }

/* Bloco de foto placeholder — trocar por <img> real quando houver fotografia do espaço.
   Canto discreto usa o motivo "blocos 2-3-2" da marca (brandbook, elemento 2) — sutil, não uma textura cheia. */
.photo-placeholder{
  position:relative;
  background-color:var(--beige);
  background-image:
    linear-gradient(#00000014, #00000014),
    linear-gradient(#00000014, #00000014),
    linear-gradient(#00000014, #00000014);
  background-repeat:no-repeat;
  background-size:11px 11px, 11px 11px, 11px 11px;
  background-position:18px 18px, 32px 18px, 25px 31px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#8a8271; font-weight:700; letter-spacing:.5px; font-size:12px; text-transform:uppercase;
  padding:12px;
}
.photo-placeholder.tall{ aspect-ratio:4/5; }
.photo-placeholder.wide{ aspect-ratio:16/9; }
.media-caption{ display:block; margin-top:10px; font-size:13px; color:#666; text-align:center; }

/* Fotografia real — mesmos raios/proporções do placeholder que substitui */
.hero-photo{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px; display:block; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block; }
.location-photo{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; }

.section-title{
  text-align:center; font-size:clamp(1.35rem,3vw,1.75rem);
  margin:var(--space-md) auto clamp(24px,4vw,40px) auto;
  padding:0 var(--pad);
}
.lede{
  text-align:center; color:#555; font-size:clamp(14px,2vw,16px);
  max-width:520px; margin:calc(-1 * clamp(16px,3vw,28px)) auto clamp(24px,4vw,40px) auto;
  padding:0 var(--pad);
}
.cards{
  display:grid; grid-template-columns:1fr; gap:20px;
  padding:0 var(--pad) var(--space-lg) var(--pad);
  max-width:1200px; margin:0 auto;
}
.card{ background:#fff; border:1px solid var(--beige); border-radius:8px; padding:24px 20px; }
.card .bar{ width:36px; height:4px; background:var(--yellow); margin-bottom:16px; }
.card h3{ font-size:16px; letter-spacing:1px; margin:0 0 8px 0; }
.card p{ font-size:14px; color:#555; margin:0; }

.quote-block{ background:var(--black); color:var(--off-white); padding:var(--space-lg) var(--pad); text-align:center; }
.quote-block p{ font-size:clamp(18px,3vw,22px); max-width:640px; margin:0 auto; }
.quote-block span{ display:block; margin-top:16px; font-size:14px; color:var(--yellow); }

/* Galeria "Conheça o B232" — placeholders até haver fotos reais do espaço */
.gallery{
  display:grid; grid-template-columns:1fr; gap:16px;
  padding:0 var(--pad) var(--space-lg) var(--pad);
  max-width:1200px; margin:0 auto;
}
.gallery figure{ margin:0; position:relative; }
.gallery .photo-placeholder{ aspect-ratio:4/3; width:100%; }
.gallery figcaption{
  position:absolute; left:12px; bottom:12px;
  background:var(--black); color:var(--off-white);
  font-size:12px; font-weight:600; letter-spacing:.3px;
  padding:5px 12px; border-radius:4px; text-transform:none;
}

/* Escolha seu jeito de trabalhar */
.plans{
  display:grid; grid-template-columns:1fr; gap:20px;
  padding:0 var(--pad) var(--space-lg) var(--pad);
  max-width:1200px; margin:0 auto;
}
.plan-card{
  background:#fff; border:1px solid var(--beige); border-radius:8px;
  padding:28px 24px; display:flex; flex-direction:column; gap:10px;
}
.plan-card h3{ margin:0; font-size:17px; letter-spacing:1px; }
.plan-card p{ margin:0; font-size:14px; color:#555; flex:1; }
.plan-card .cta-ghost{ margin-top:8px; text-align:center; padding:10px 20px; font-size:14px; }

/* Manifesto "Não precisa ser em casa" */
.manifesto{ background:var(--black); color:var(--off-white); padding:var(--space-lg) var(--pad); text-align:center; }
.manifesto-lead{ font-size:clamp(1.8rem,5vw,3rem); font-weight:800; color:var(--yellow); margin:0 0 clamp(24px,5vw,40px) 0; }
.manifesto-compare{
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(24px,5vw,40px);
}
.manifesto-compare ul{ list-style:none; margin:0; padding:0; font-size:clamp(1rem,2.5vw,1.3rem); font-weight:700; }
.manifesto-compare .fades-out li{ color:#666; text-decoration:line-through; margin-bottom:10px; }
.manifesto-compare .fades-in li{ color:var(--off-white); margin-bottom:10px; }
.manifesto-compare .arrow{ color:var(--yellow); font-size:2rem; }
.manifesto-close{ font-size:clamp(1.2rem,3vw,1.6rem); margin:0 0 24px 0; }

/* Localização */
.location{ padding:var(--space-lg) var(--pad); max-width:1200px; margin:0 auto; }
.location-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; margin-bottom:32px; }
@media (min-width:900px){ .location-grid{ grid-template-columns:1fr 1fr; gap:56px; } }
.location-copy h2{ font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 16px 0; }
.location-copy p{ color:#444; font-size:15px; margin:0 0 16px 0; }
.location-copy .address{ font-weight:700; color:var(--black); margin-bottom:28px; }
.map-embed{ border-radius:8px; overflow:hidden; line-height:0; }
.map-embed iframe{ width:100%; height:340px; border:0; display:block; }

/* Um dia no B232 */
.timeline{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px;
  padding:0 var(--pad) var(--space-lg) var(--pad);
  max-width:1000px; margin:0 auto;
}
.timeline-item{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:90px; }
.timeline-item .time{ font-weight:800; font-size:13px; color:#666; }
.timeline-item .emoji{ font-size:28px; }
.timeline-item p{ margin:0; font-size:14px; font-weight:600; }

/* Prova social */
.testimonials{ padding-bottom:var(--space-lg); }
.testimonial-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  padding:0 var(--pad); max-width:1000px; margin:0 auto;
}
@media (min-width:700px){ .testimonial-grid{ grid-template-columns:repeat(3,1fr); } }
.testimonial{ background:#fff; border:1px solid var(--beige); border-radius:8px; padding:24px; margin:0; }
.testimonial p{ font-size:15px; color:#333; margin:0 0 14px 0; }
.testimonial footer{ font-size:13px; font-weight:700; }
.testimonial footer span{ font-weight:400; color:#777; }

footer{ text-align:center; padding:var(--space-lg) var(--pad); }
footer h2{ font-size:clamp(1.6rem,4vw,2rem); margin-bottom:20px; }
.footer-ctas{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:center; }
.legal-link{ margin-top:28px; }
.legal-link a{ color:#888; font-size:13px; text-decoration:underline; }

/* Barra de CTA fixa — só no mobile, onde chega a maior parte do tráfego de campanha */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--black); color:var(--off-white);
  padding:12px var(--pad);
}
.sticky-cta span{ font-size:14px; font-weight:600; }
.sticky-cta .cta{ margin:0; padding:10px 20px; font-size:14px; background:var(--yellow); color:var(--black); }
body.has-sticky-cta{ padding-bottom:64px; }
@media (min-width:900px){
  .sticky-cta{ display:none; }
  body.has-sticky-cta{ padding-bottom:0; }
}

/* Banner de cookies (LGPD) — fica acima da barra de CTA no mobile, no rodapé no desktop */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:64px; z-index:60;
  background:var(--black); color:var(--off-white);
  padding:16px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
}
.cookie-banner p{ margin:0; font-size:13px; max-width:520px; color:var(--off-white); }
.cookie-banner a{ color:var(--yellow); }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner button{ font:inherit; cursor:pointer; font-size:13px; padding:8px 18px; border-radius:4px; }
.cookie-banner button.cta{ margin:0; border:none; background:var(--yellow); color:var(--black); }
.cookie-banner button.cta-ghost{ margin:0; border-color:var(--off-white); color:var(--off-white); }
.cookie-banner button.cta-ghost:hover{ background:var(--off-white); color:var(--black); }
@media (min-width:900px){
  .cookie-banner{ bottom:0; }
}

/* Páginas de texto legal (privacidade) */
.legal{ max-width:760px; margin:0 auto; padding:var(--space-lg) var(--pad); }
.legal h1{ font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 24px 0; }
.legal h2{ font-size:1.1rem; margin:32px 0 12px 0; }
.legal p, .legal li{ font-size:15px; color:#333; line-height:1.6; }
.legal ul{ padding-left:20px; margin:0; }
.legal .updated{ color:#777; font-size:13px; margin-bottom:32px; }

@media (min-width:600px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  .cards{ grid-template-columns:repeat(4,1fr); }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}