/* ================================
   Hotsite Crisoft — CSS minimalista
   Performance-first · Sem frameworks
   ================================ */

:root{
  --bg:#0b0b0d;
  --fg:#f5f7fa;
  --muted:#b8c0cc;
  --line:#1a1e25;
  --brand:#24d366;     /* WhatsApp */
  --cta:#2563eb;       /* Botões */
  --cta-2:#0ea5e9;     /* Links secundários */
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 6px 24px rgba(0,0,0,.25);
  --maxw:1120px;
  --pad:clamp(16px, 2.5vw, 28px);
  --pad-lg:clamp(20px, 4vw, 40px);
  --fs:16px;
}

*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:var(--fs)/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Acessibilidade básica */
:focus{outline:2px solid var(--cta); outline-offset:2px}
:focus:not(:focus-visible){outline:none}
a{color:var(--cta-2); text-decoration:none}
a:hover{text-decoration:underline}

/* Utilitárias */
.container{width:min(100%, var(--maxw)); margin-inline:auto; padding-inline:var(--pad)}
.center{text-align:center}

/* Botão WhatsApp flutuante */
.whats-float{
  position:fixed; right:16px; bottom:16px; z-index:40;
  display:inline-flex; gap:8px; align-items:center;
  background:var(--brand); color:#062e16; font-weight:700;
  padding:12px 16px; border-radius:999px; box-shadow:var(--shadow);
  transition:transform .15s ease, filter .15s ease;
}
.whats-float img{width:20px; height:20px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.whats-float:hover{transform:translateY(-1px); text-decoration:none}

/* HERO — reserva de espaço para evitar CLS usando aspect-ratio */
.hero{position:relative; isolation:isolate; background:linear-gradient(180deg, #0b0b0d 0%, #0f1218 100%)}
.hero-inner{position:relative; width:100%; max-width:1800px; margin:0 auto}
.hero picture, .hero img{display:block; width:100%}
.hero img{
  aspect-ratio:16/9;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.02);
}

/* Caixa de cópia sobreposta */
.hero-copy{
  position:absolute; inset:auto 5% 8% 5%;
  background:linear-gradient( to right, rgba(0,0,0,.55), rgba(0,0,0,.35) );
  backdrop-filter:saturate(1.2) blur(2px);
  padding:18px clamp(16px, 3vw, 28px);
  border-radius:var(--radius-lg);
  max-width:min(860px, 90%);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero-copy h1{margin:0 0 .5rem; font-size:clamp(26px, 4.2vw, 46px); line-height:1.15}
.hero-copy p{margin:.25rem 0 .75rem; color:var(--muted)}
.bullets{display:flex; gap:10px; flex-wrap:wrap; margin:.25rem 0 0; padding:0}
.bullets li{list-style:none; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--muted); font-size:.95rem}

/* Botões */
.btn-primary,.btn-ghost,.btn-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none;
}
.btn-primary{background:var(--cta); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.05); text-decoration:none}
.btn-ghost{border:1px solid rgba(255,255,255,.25); color:var(--fg)}
.btn-ghost:hover{background:rgba(255,255,255,.06); text-decoration:none}
.btn-link{padding:0; border-radius:0; color:var(--cta-2); font-weight:600}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:.6rem 0 .2rem}

/* Provas/Cases */
.proofs{padding:var(--pad-lg) var(--pad)}
.proofs h2{margin:0 0 .8rem; font-size:clamp(22px, 3.2vw, 32px); text-align:center}
.mini-cases{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
  width:min(100%, var(--maxw)); margin:12px auto 0;
}
.case{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.case img{width:100%; border-radius:10px; margin-bottom:10px}
.case h3{margin:.4rem 0 .3rem; font-size:1.05rem}
.case p{margin:0; color:var(--muted)}

/* Cidades foco */
.cities{padding:var(--pad-lg) var(--pad); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cities h2{text-align:center; margin:0 0 .6rem}
.city-list{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:0; margin:0
}
.city-list li{
  list-style:none; padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--muted); border:1px dashed rgba(255,255,255,.12)
}

/* Texto SEO */
.seo-text{padding:var(--pad-lg) var(--pad)}
.seo-text h2, .seo-text h3{margin:.2rem 0 .6rem}
.seo-text p{margin:0 0 1rem; color:var(--fg)}
.seo-text ol{margin:0; padding-left:1.2rem}
.seo-text li{margin:.4rem 0}

/* FAQ */
.faq{padding:var(--pad-lg) var(--pad); background:linear-gradient(180deg, #0f1218 0%, #0b0b0d 100%)}
.faq h2{text-align:center; margin:0 0 .8rem}
.faq details{
  width:min(100%, var(--maxw)); margin:10px auto; padding:12px 14px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--radius);
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:.6rem 0 0; color:var(--muted)}

/* Rodapé */
.footer{padding:20px var(--pad); border-top:1px solid var(--line); color:var(--muted); text-align:center}
.footer a{color:var(--muted)}
address{font-style:normal; margin-bottom:.4rem}

/* Layout responsivo */
@media (max-width: 980px){
  .hero-copy{inset:auto 3% 6% 3%}
  .mini-cases{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .btn-primary,.btn-ghost{width:100%}
  .whats-float{right:12px; bottom:12px; padding:10px 14px}
}

/* Prefere menos animação */
@media (prefers-reduced-motion: reduce){
  .whats-float, .btn-primary{transition:none}
}
/* CENTRALIZAÇÃO GLOBAL */
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* LOGO/BRAND CENTRALIZADO */
.brand { padding: clamp(16px, 3vw, 28px) var(--pad); }
.brand-logo { display:block; margin: 0 auto 8px; width:min(220px, 60vw); height:auto; }
.brand-sub { color: var(--muted); margin: 0; }

/* HERO (já central, mas reforçamos) */
.hero .cta-row { justify-content: center; }
.bullets.center { justify-content: center; }

/* GALERIA DE IMAGENS CHAMATIVAS */
.gallery { padding: var(--pad-lg) var(--pad); border-top:1px solid var(--line); }
.gallery h2 { margin: 0 0 .4rem; font-size: clamp(22px, 3.2vw, 32px); }
.gallery .muted { color: var(--muted); margin: 0 0 1rem; }

.gallery-grid {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.gallery-grid figure {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.gallery-grid figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: .95rem;
}

/* Responsivo */
@media (max-width: 980px){
  .gallery-grid { grid-template-columns: 1fr; }
}
:root{
  --bg:#ffffff;         /* fundo branco */
  --fg:#222222;         /* texto principal escuro */
  --muted:#555555;      /* texto secundário */
  --line:#dddddd;       /* linhas / bordas */
  --brand:#24d366;      /* WhatsApp */
  --cta:#2563eb;        /* botões */
  --cta-2:#0ea5e9;      /* links secundários */
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 6px 24px rgba(0,0,0,.1); /* sombra mais leve */
  --maxw:1120px;
  --pad:clamp(16px, 2.5vw, 28px);
  --pad-lg:clamp(20px, 4vw, 40px);
  --fs:16px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:var(--fs)/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* HERO: tira degradê escuro e usa branco */
.hero{
  position:relative;
  isolation:isolate;
  background:#ffffff;
}
.hero-copy{
  position:absolute; inset:auto 5% 8% 5%;
  background:rgba(255,255,255,0.85);  /* caixa translúcida clara */
  backdrop-filter:saturate(1.2) blur(2px);
  padding:18px clamp(16px, 3vw, 28px);
  border-radius:var(--radius-lg);
  max-width:min(860px, 90%);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

/* FAQ também fundo branco */
.faq{
  padding:var(--pad-lg) var(--pad);
  background:#f9f9f9;
}
.faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.faq p{ color:var(--muted); }

/* Footer claro */
.footer{
  padding:20px var(--pad);
  border-top:1px solid var(--line);
  color:var(--muted);
  background:#fafafa;
  text-align:center;
}
.footer a{ color:var(--cta-2); }
.seo-text ol {
  list-style:none;      /* remove numeração */
  padding-left:0;       /* remove recuo */
}
.seo-text li {
  margin:.4rem 0;
}
.footer {
  background: #fafafa;      /* fundo claro */
  color: #222;              /* texto escuro */
}

.footer a {
  color: #0056b3;           /* azul forte, alto contraste */
  font-weight: 600;         /* ajuda na legibilidade */
  text-decoration: underline; /* reforça que é link */
}

.footer a:hover {
  color: #003d80;           /* tom ainda mais escuro no hover */
}
/* ===== MOBILE-FIRST PARA O HERO ===== */
@media (max-width: 1024px){
  /* Banner no topo, sem corte e sem overlay por cima */
  .hero { background:#fff; }
  .hero-inner { display:block; }

  .hero picture,
  .hero img{
    display:block;
    width:100%;
    height:auto;          /* deixa a imagem fluir */
    aspect-ratio:auto;    /* ignora o 16:9 no mobile */
    object-fit:contain;   /* mostra 100% da arte no celular */
    object-position:center;
  }

  /* Texto deixa de ser sobreposto */
  .hero-copy{
    position:static;      /* sai do overlay */
    inset:auto;           /* limpa offsets */
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
    max-width:var(--maxw);
    padding:var(--pad);
    margin-inline:auto;
    text-align:center;
  }

  /* Centralização dos CTAs e bullets */
  .hero .cta-row{ justify-content:center; }
  .bullets{ justify-content:center; }
}