/* Casa do Celular — Brand UI (cores e tipografia oficiais) */
:root{
  --rosa:#f8bbeb;
  --lilas:#827efc;
  --preto:#2d2d2d;
  --bg:#ffffff;
  --bg-alt:#faf8ff;
  --texto:#2d2d2d;
  --muted:#6b6f7b;
  --linha:#ece9f6;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Changa", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--texto);
  background:var(--bg);
}

/* Header minimal */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(130,126,252,.15);
}
.nav{max-width:1140px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--preto)}
.brand img{height:36px;width:auto;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.brand span{font-weight:700;letter-spacing:.2px}
.nav-links{display:flex;gap:16px;align-items:center}
.nav-links a{text-decoration:none;color:var(--preto);opacity:.85;padding:8px 10px;border-radius:10px}
.nav-links a:hover{opacity:1;background:#f2ecff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;font-weight:700;border-radius:12px;text-decoration:none;transition:all .2s ease}
.btn-primary{background:linear-gradient(135deg, var(--lilas), var(--rosa));color:#111;box-shadow:0 12px 26px rgba(130,126,252,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{background:#fff;border:1px solid #e8e2f6;color:var(--preto)}
.btn-secondary:hover{background:#faf7ff}
.btn-outline{border:1px solid #e8e2f6;background:#fff;color:var(--preto)}

/* Hero com fundo da identidade */
.hero{
  background: linear-gradient(180deg, rgba(130,126,252,.18), rgba(248,187,235,.18)), url('assets/fundo_padrao.jpg') center/cover no-repeat;
  color:var(--preto);
}
.hero-inner{max-width:1140px;margin:0 auto;padding:80px 20px 92px}
.hero h1{font-size:44px;line-height:1.05;margin:6px 0 12px;letter-spacing:-.3px}
.hero .grad{background:linear-gradient(90deg, var(--lilas), var(--rosa));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:#3b3f4a;margin:0 0 16px}
.kpis{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.kpis li{padding:10px 12px;border:1px solid var(--linha);border-radius:12px;background:#fff;box-shadow:var(--shadow)}

/* Sections */
.section{max-width:1140px;margin:0 auto;padding:64px 20px}
.section.alt{background:var(--bg-alt)}
.section h2{font-size:30px;margin:0 0 14px;color:var(--preto)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{border:1px solid var(--linha);background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.item{border:1px dashed #e7ddf7;border-radius:var(--radius);padding:16px;background:#fff}
.item h4{margin:0 0 6px}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
blockquote{margin:0;padding:16px 16px 16px 18px;background:#fff;border:1px solid var(--linha);border-left:4px solid var(--lilas);border-radius:12px;color:#3e4353;box-shadow:var(--shadow)}
blockquote span{display:block;margin-top:8px;color:#6b6f7b;font-size:14px}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}
.map iframe{width:100%;height:260px;border:0;border-radius:14px;box-shadow:var(--shadow)}

.footer{background:#fbf9ff;border-top:1px solid var(--linha);margin-top:40px}
.footer-inner{max-width:1140px;margin:0 auto;padding:18px 20px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-inner img{height:30px}
.legal{text-align:center;color:#7a7f8b;padding:10px 20px 24px;margin:0}

@media (max-width:720px){
  .hero h1{font-size:34px}
  .nav-links{display:none}
}


/* --- Cocogoose (placeholder). Substitua assets/cocogoose.woff2 quando tiver a licença --- */
@font-face{
  font-family: 'Cocogoose';
  src: url('assets/cocogoose.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
h1,h2{
  font-family: 'Cocogoose', 'Changa', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: .2px;
}

/* Ícones dos cards (SVG inline) */
.icon{
  width:48px;height:48px;border-radius:50%;
  background: radial-gradient(100% 100% at 30% 20%, var(--rosa), var(--lilas));
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(130,126,252,.25);
  border:2px solid rgba(255,255,255,.8);
}

/* Banner de campanhas */
.campaign{
  background: linear-gradient(135deg, rgba(130,126,252,.2), rgba(248,187,235,.2)), url('assets/fundo_padrao.jpg') center/cover no-repeat;
  border-top:1px solid rgba(130,126,252,.15);
  border-bottom:1px solid rgba(130,126,252,.15);
}
.campaign-inner{max-width:1140px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
.campaign h3{margin:0;font-size:26px;color:var(--preto)}
.campaign p{margin:6px 0 0;color:#3b3f4a}
.campaign .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:860px){ .campaign-inner{grid-template-columns:1fr} }


/* --- Carrossel de avaliações (clean, não altera o tema) --- */
.reviews-carousel{position:relative;max-width:980px;margin:0 auto}
.reviews-carousel .track{display:flex;transition:transform .45s ease;will-change:transform}
.reviews-carousel .slide{min-width:100%;padding:6px}
.reviews-carousel .stars{color:#f8c531;font-size:18px;letter-spacing:2px;margin:0 0 6px 2px}
.reviews-carousel blockquote{font-size:18px;line-height:1.45}
@media (max-width:720px){.reviews-carousel blockquote{font-size:16px}}
.reviews-carousel .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  border:1px solid #e7ddf7;background:#fff;color:#333;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.08)
}
.reviews-carousel .prev{left:-6px}.reviews-carousel .next{right:-6px}
.reviews-carousel .nav:hover{background:linear-gradient(135deg,var(--lilas),var(--rosa));color:#111}
.reviews-carousel .dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.reviews-carousel .dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:#d9d1f7;transition:transform .2s ease,background .2s ease}
.reviews-carousel .dot.active{background:linear-gradient(135deg,var(--lilas),var(--rosa));transform:scale(1.2)}


/* === PATCH v2.3.1: Correção de centralização e overflow no carrossel === */
html, body { overflow-x: hidden; }

.reviews-carousel { position: relative; max-width: 980px; margin: 0 auto; overflow: hidden; }
.reviews-carousel .track { display: flex; transform: translateX(0); transition: transform .45s ease; will-change: transform; }
.reviews-carousel .slide { flex: 0 0 100%; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; justify-content: center; }

.reviews-carousel blockquote { width: min(680px, 100%); margin: 0 auto; font-size: 18px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.06); border-radius: 14px; }
@media (max-width: 720px) { .reviews-carousel blockquote { font-size: 16px; } }

.reviews-carousel .stars { text-align: center; margin: 0 0 8px 0; }

.reviews-carousel .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e7ddf7; background: #fff; color: #333; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.08); z-index: 2; }
.reviews-carousel .prev { left: 6px; } 
.reviews-carousel .next { right: 6px; }
.reviews-carousel .nav:hover { background: linear-gradient(135deg,var(--lilas),var(--rosa)); color:#111; }

.reviews-carousel .dots { display:flex; gap:8px; justify-content:center; margin: 12px auto 0 auto; width: 100%; }
.reviews-carousel .dot { width:8px; height:8px; border-radius:50%; border:none; cursor:pointer; background:#d9d1f7; transition:transform .2s ease, background .2s ease; }
.reviews-carousel .dot.active { background:linear-gradient(135deg,var(--lilas),var(--rosa)); transform:scale(1.2); }


/* === PATCH v2.3.2: Alinhamento do carrossel de avaliações === */
/* Garantir que cada slide organize conteúdo em coluna e centralize tudo */
.reviews-carousel .slide {
  display: flex;
  flex-direction: column;   /* estrelas acima, card abaixo */
  align-items: center;      /* centraliza horizontalmente */
  justify-content: center;  /* centraliza verticalmente */
  gap: 10px;                /* respiro entre estrelas e card */
  padding: 0 12px;
}
/* Espaçamento coerente das estrelas em relação ao card */
.reviews-carousel .stars {
  text-align: center;
  margin: 0;                /* zera para evitar deslocamentos */
  line-height: 1;
}
/* Card sempre centralizado e com largura estável */
.reviews-carousel blockquote {
  margin: 0 auto;
  width: min(640px, 100%);  /* ligeiramente menor para não encostar nas bordas */
}
/* Garante que o contêiner do carrossel não seja afetado por paddings externos */
#avaliacoes .reviews-carousel { margin-left: auto; margin-right: auto; }


/* === PATCH v2.3.3: Fonte menor + setas menores no mobile === */
@media (max-width: 430px){
  .reviews-carousel blockquote{ font-size:15.5px; }
  .reviews-carousel .nav{ width:30px; height:30px; }
}
@media (max-width: 380px){
  .reviews-carousel blockquote{ font-size:14.8px; }
}


/* === PATCH v2.3.4: Compactar espaçamento das avaliações (Opção 1) === */
.reviews-carousel .slide { gap: 4px; }
.reviews-carousel blockquote { margin-top: 2px; margin-bottom: 2px; }
.reviews-carousel .stars { margin-bottom: 2px; }
/* Compacta o espaço dos pontos também */
.reviews-carousel .dots { margin-top: 6px; }


/* === PATCH v2.3.5: Forçar centralização e evitar cortes das avaliações === */
#avaliacoes .reviews-carousel { overflow: hidden; padding: 0; margin-left:auto; margin-right:auto; }
#avaliacoes .reviews-carousel .track { display:flex; align-items:center; }
#avaliacoes .reviews-carousel .slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0;                 /* remove espaçamento que pode cortar borda */
  display: grid;              /* grid para centralizar fácil */
  grid-auto-rows: min-content;
  justify-items: center;      /* centro horizontal */
  align-items: center;        /* centro vertical */
  gap: 6px;
}
#avaliacoes .reviews-carousel .stars {
  width: auto;
  margin: 0;
  text-align: center !important;
  justify-self: center;       /* garante que não vá para a direita */
  align-self: center;
  line-height: 1;
}
#avaliacoes .reviews-carousel blockquote {
  margin: 0 auto;
  max-width: 620px;           /* ligeiramente menor */
  width: calc(100% - 24px);   /* não encostar nas laterais */
  text-align: left;
  box-sizing: border-box;
}
#avaliacoes .reviews-carousel .nav { z-index: 5; left: 8px; right: 8px; }
#avaliacoes .reviews-carousel .prev { left: 8px; }
#avaliacoes .reviews-carousel .next { right: 8px; }

/* Dots mais próximos e centralizados */
#avaliacoes .reviews-carousel .dots { margin-top: 6px; justify-content: center; }


/* === v2.4.0: Reviews estáticos (sem carrossel) === */
#avaliacoes .reviews-list{
  display:grid;
  gap:14px;
}
#avaliacoes .review-card{
  margin:0;
  padding:16px 18px;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
}
#avaliacoes .review-card .stars{
  color:#f8c531;
  letter-spacing:2px;
  font-size:18px;
  text-align:center;
  margin:0 0 6px 0;
}
#avaliacoes .review-card blockquote{
  margin:0;
  font-size:18px;
  line-height:1.5;
  text-align:center;
}
#avaliacoes .review-card figcaption{
  margin-top:8px;
  text-align:center;
  opacity:.8;
  font-weight:500;
}
#avaliacoes .reviews-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:16px;
}
/* Desktop: duas colunas elegantes */
@media (min-width: 920px){
  #avaliacoes .reviews-list{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:720px){
  #avaliacoes .review-card blockquote{ font-size:16px; }
}


/* === v2.4.2: Botões WhatsApp === */
.btn-success{
  background: #25d366;
  color: #fff !important;
}
.btn-success:hover{
  background: #1ebe5d;
  color:#fff !important;
}


/* === v2.4.3: Stack CTA buttons (incl. WhatsApp) vertically and center === */
#avaliacoes .reviews-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
#avaliacoes .reviews-cta .btn{
  width:min(520px, 100%);
  text-align:center;
}