/* ===== Cores e base ===== */
:root{
  --bg: #4b0706;      /* vinho escuro */
  --ink: #b40f0f;     /* vermelho do texto/ícones */
  --ink-soft:#c21b1b; /* hover */
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;              /* tela única */
  position: relative;
  min-height: 100svh;            /* viewport estável em mobile */
}

/* ===== Topo ===== */
.brand{
  position: fixed;
  top: 22px;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: clamp(12px, 1.4vw, 16px);
  text-transform: uppercase;
  opacity: .9;
  user-select: none;
}
.brand-left  { left: 28px; }
.brand-right { right: 28px; }

/* ===== Símbolo ===== */
#logoWrap{
  position: fixed;               /* relativo ao viewport */
  left: 50%;
  top: 50%;                      /* centro no desktop */
  transform: translate(-50%, -50%);
  z-index: 2;
}
#logo{
  width: 80px;                   /* tamanho pedido */
  height: auto;
  display: block;
}

/* ===== Rodapé (4 colunas fixo) ===== */
.footer{
  position: fixed;
  left: 0; right: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 48px;
  align-items: start;
}

.footer h3{
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  font-size: clamp(10px, 1.05vw, 12px);
}

.footer p,
.footer li,
.footer a{
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  opacity: .9;
}

.footer ul{
  margin: 0;
  padding: 0;
  list-style: none;              /* sem bullets */
}

.

/* tablet */
@media (max-width: 900px){
  .footer{ gap: 32px; padding: 0 22px; }
}

/* mobile */
@media (max-width: 640px){
  .brand-left{ left: 18px; }
  .brand-right{ right: 18px; }

  /* logo sobe */
  #logoWrap{
    top: 20svh;
    transform: translate(-50%, 0);
  }

  /* grid especial: Sobre ocupa a linha inteira, as demais ficam juntas */
  .footer{
    gap: 22px;
    padding: 0 18px;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 colunas para as últimas seções */
    grid-template-areas:
      "sobre sobre sobre"
      "servicos clientes contato";
  }

  /* mapeando as áreas */
  .footer .col:nth-child(1){ grid-area: sobre; }
  .footer .col:nth-child(2){ grid-area: servicos; }
  .footer .col:nth-child(3){ grid-area: clientes; }
  .footer .col:nth-child(4){ grid-area: contato; }

  /* tipografia maior no mobile */
  .footer h3{ font-size: 12px; }
  .footer p, .footer li, .footer a{ font-size: 14px; line-height: 1.55; }
}

/* telas muito estreitas: só reduz tipografia e gap */
@media (max-width: 380px){
  .footer{ gap: 14px; }
  .footer h3{ font-size: 12px; }
  .footer p, .footer li, .footer a{ font-size: 12px; }
}