/* Una Marketing Digital — estilos das paginas reconstruidas
   Paleta e tipografia tiradas do site original do Wix. */

:root {
  --marrom: #6E3419;
  --marrom-escuro: #55270F;
  --bege: #E5D6C8;
  --bege-claro: #F5EDE6;
  --tan: #C9A27C;
  --texto: #222222;
  --texto-suave: #5A5048;
  --branco: #FFFFFF;
  --zap: #25D366;
  --largura: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--marrom);
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marrom); }

img { max-width: 100%; height: auto; display: block; }

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

/* ---------- cabecalho ---------- */

.cabecalho {
  background: var(--bege);
  position: sticky;
  top: 0;
  z-index: 500;
}

.cabecalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
}

.marca img { width: 172px; }

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.menu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-decoration: none;
  color: var(--marrom);
  padding: 6px 0 4px;
  border-top: 2px solid transparent;
  white-space: nowrap;
}

.menu a:hover { border-top-color: var(--tan); }
.menu a[aria-current="page"] { border-top-color: var(--marrom); }

/* ---------- hero ---------- */

.hero {
  background: var(--marrom) url("../images/hero-una.jpg") center/cover no-repeat;
  color: var(--branco);
  padding: 108px 0 116px;
}

.hero h1 {
  color: var(--branco);
  font-size: clamp(34px, 5vw, 58px);
  max-width: 15ch;
  margin-bottom: .35em;
}

.hero p {
  font-size: clamp(17px, 2vw, 22px);
  max-width: 32ch;
  margin-bottom: 2em;
}

/* faixa de titulo das paginas internas */
.faixa {
  background: var(--marrom);
  color: var(--bege);
  padding: 68px 0;
  text-align: center;
}

.faixa h1 {
  color: var(--tan);
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: .02em;
  margin: 0;
}

/* ---------- botoes ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 34px;
  border-radius: 2px;
  transition: transform .15s ease, background-color .15s ease;
}

.botao:hover { transform: translateY(-2px); }

.botao-claro { background: var(--bege); color: var(--marrom); }
.botao-claro:hover { background: var(--branco); }

.botao-marrom { background: var(--marrom); color: var(--branco); }
.botao-marrom:hover { background: var(--marrom-escuro); }

.botao-zap { background: var(--zap); color: #fff; border-radius: 999px; }
.botao-zap svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- secoes ---------- */

.secao { padding: 92px 0; }
.secao-bege { background: var(--bege-claro); }
.secao-marrom { background: var(--marrom); color: var(--bege); }
.secao-marrom h2 { color: var(--tan); }

.titulo-secao {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.titulo-secao h2 { font-size: clamp(28px, 3.6vw, 42px); }
.titulo-secao p { color: var(--texto-suave); }
.secao-marrom .titulo-secao p { color: var(--bege); }

.olho {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 12px;
}

/* ---------- manifesto ---------- */

.manifesto { text-align: center; max-width: 780px; margin: 0 auto; }

.manifesto blockquote {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.3;
  color: var(--marrom);
  margin: 0 0 32px;
}

.manifesto .assinatura {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  color: var(--marrom);
}

/* ---------- grades ---------- */

.grade {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.cartao {
  background: var(--branco);
  border: 1px solid rgba(110, 52, 25, .14);
  border-radius: 3px;
  padding: 34px 30px;
}

.cartao h3 { font-size: 22px; margin-bottom: .5em; }
.cartao p { color: var(--texto-suave); font-size: 15px; margin: 0; }

.secao-bege .cartao { background: var(--branco); }

/* ---------- equipe ---------- */

.equipe {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 64px;
}

.pessoa figure { margin: 0; }

.pessoa img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 3px;
}

.pessoa h3 { font-size: 24px; margin: 22px 0 2px; }

.pessoa .cargo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.texto-equipe { max-width: 760px; margin: 0 auto; }

/* ---------- depoimentos ---------- */

.depoimentos { display: grid; gap: 26px; }

.depoimentos img {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--branco);
  border: 1px solid rgba(110, 52, 25, .12);
}

/* ---------- clientes ---------- */

.clientes {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}

.clientes img {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  border-radius: 3px;
}

/* ---------- contato ---------- */

.contatos {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.contatos h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 14px;
}

.contatos a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201, 162, 124, .5); }
.contatos a:hover { border-bottom-color: currentColor; }

.contatos ul { list-style: none; margin: 0; padding: 0; }
.contatos li + li { margin-top: 8px; }

.sociais { display: flex; gap: 14px; flex-wrap: wrap; }

.sociais a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  border-bottom-width: 1px;
}

.sociais svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- rodape ---------- */

.rodape {
  background: var(--bege-claro);
  padding: 34px 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--texto-suave);
}

/* ---------- whatsapp flutuante ---------- */

.una-wpp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--zap);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.una-wpp-float svg { width: 34px; height: 34px; fill: #fff; }

/* ---------- telas menores ---------- */

@media (max-width: 720px) {
  .cabecalho .container { flex-direction: column; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .menu { gap: 18px; justify-content: center; }
  .hero { padding: 76px 0 84px; }
  .hero h1, .hero p { max-width: none; }
  .secao { padding: 64px 0; }
  .titulo-secao { margin-bottom: 40px; }
}