/* ==========================================================================
   layout.css — cabecalho, hero, trilha, rodape, botao flutuante
   ========================================================================== */

/* --- Cabecalho ----------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
@supports (backdrop-filter: blur(8px)) {
  .cabecalho { backdrop-filter: blur(10px); }
}
.cabecalho[data-rolado="sim"] {
  border-bottom-color: var(--c-linha);
  box-shadow: 0 6px 20px -18px rgba(23, 23, 26, 0.5);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--altura-header);
}

.marca {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--c-tinta);
  line-height: 1.1;
}
.marca__nome {
  font-family: var(--f-texto);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca__qualificador {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-marca-escura);
}

.navegacao { display: flex; align-items: center; gap: var(--e-4); }
.navegacao__lista {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.navegacao__lista li { margin: 0; }
.navegacao__lista a {
  display: inline-block;
  padding: 0.35rem 0;
  white-space: nowrap;
  color: var(--c-tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.navegacao__lista a:hover { color: var(--c-tinta); border-bottom-color: var(--c-marca); }

.abrir-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-right: -0.5rem;
  background: transparent;
  border: 1px solid var(--c-linha-2);
  border-radius: var(--r-sm);
  color: var(--c-tinta);
  cursor: pointer;
}
.abrir-menu svg { width: 22px; height: 22px; }
.abrir-menu .icone-fechar { display: none; }
.abrir-menu[aria-expanded="true"] .icone-abrir { display: none; }
.abrir-menu[aria-expanded="true"] .icone-fechar { display: block; }

@media (min-width: 72rem) {
  .cabecalho .botao--primario { white-space: nowrap; }
}

/* Com seis itens no menu, o hamburguer entra mais cedo do que antes. */
@media (max-width: 72rem) {
  .abrir-menu { display: inline-flex; }
  .navegacao {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-4);
    padding: var(--e-5) var(--gutter) var(--e-6);
    background: var(--c-papel);
    border-bottom: 1px solid var(--c-linha);
    box-shadow: var(--sombra-alta);
  }
  .navegacao[data-aberta="sim"] { display: flex; }
  .navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacao__lista a {
    padding: 0.9rem 0;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--c-linha);
  }
  .navegacao__lista a:hover { border-bottom-color: var(--c-linha); }
  .navegacao .botao { width: 100%; white-space: normal; }
}

/* --- Trilha (breadcrumb visivel) ----------------------------------------- */

.trilha { padding-top: var(--e-5); font-size: var(--t-xs); color: var(--c-tinta-3); }
.trilha--topo { padding-top: 0; margin-bottom: var(--e-6); }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.trilha li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.trilha li + li::before { content: "\203A"; color: var(--c-linha-2); }
.trilha a { color: var(--c-tinta-3); text-decoration: none; border-bottom: 1px solid var(--c-linha-2); }
.trilha a:hover { color: var(--c-tinta); }
.trilha [aria-current="page"] { color: var(--c-tinta-2); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--e-9); }

.hero__grade {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero h1 { margin-bottom: var(--e-5); }
.hero__texto p { font-size: var(--t-md); margin-bottom: var(--e-4); }
.hero__texto .grupo-botoes { margin-top: var(--e-6); }

.hero__assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--c-linha);
  font-size: var(--t-xs);
  color: var(--c-tinta-3);
}
.hero__assinatura span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__assinatura span:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--c-linha-2);
}

.hero__retrato { position: relative; }
.hero__retrato img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta);
  background: var(--c-papel-2);
}
@media (min-width: 60rem) {
  .hero__retrato::after {
    content: "";
    position: absolute;
    inset: auto -12px -12px auto;
    width: 60%; height: 60%;
    border-right: 2px solid var(--c-marca);
    border-bottom: 2px solid var(--c-marca);
    border-bottom-right-radius: var(--r-lg);
    opacity: 0.5;
    z-index: -1;
  }
}

/* --- Rodape -------------------------------------------------------------- */

.rodape {
  background: var(--c-tinta);
  color: #C9C9D2;
  padding-block: var(--e-8) var(--e-6);
}
.rodape h2, .rodape h3 { color: #FFFFFF; }
.rodape a { color: #E4E4EA; text-decoration: none; }
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }

.rodape__grade {
  display: grid;
  gap: var(--e-7);
  padding-bottom: var(--e-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 48rem) {
  .rodape__grade { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}

.rodape__marca .marca__nome { color: #FFFFFF; font-size: 1rem; }
.rodape__marca .marca__qualificador { color: #E8955C; }
.rodape__marca p { margin-top: var(--e-4); font-size: var(--t-sm); color: #A9A9B4; }

.rodape__titulo {
  margin-bottom: var(--e-4);
  color: #FFFFFF;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rodape__lista { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.rodape__lista li { margin-bottom: var(--e-1); }
.rodape__lista a,
.rodape__lista li {
  display: block;
  min-height: 40px;
  padding-block: 0.5rem;
}
.rodape__lista li:has(a) { padding-block: 0; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-4);
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  color: #8E8E99;
}
.rodape__base p { max-width: 44rem; }

/* --- Botao flutuante de WhatsApp ----------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.75rem 1.15rem;
  background: var(--c-tinta);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: background var(--mov-rapido), transform var(--mov-rapido);
}
.whatsapp-flutuante:hover { background: var(--c-marca-escura); color: #FFFFFF; transform: translateY(-2px); }
.whatsapp-flutuante svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 30rem) {
  .whatsapp-flutuante__rotulo { display: none; }
  .whatsapp-flutuante { padding: 0.85rem; }
}

/* --- Complemento do hero -------------------------------------------------- */

.hero__complemento { margin-top: var(--e-4); }

/* O botao flutuante ocupa cerca de 84px no canto inferior direito. O rodape
   reserva essa faixa em qualquer largura, de modo que nenhum link fique sob
   ele mesmo que o recolhimento por JavaScript nao rode. */
.rodape { padding-bottom: calc(var(--e-6) + 5.5rem); }


/* O botao flutuante e um atalho: se um CTA de WhatsApp ja esta visivel na
   tela, ele se recolhe para nao cobrir nada. Sem JS, permanece visivel. */
.whatsapp-flutuante[data-recolhido="sim"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mov-rapido), visibility var(--mov-rapido), transform var(--mov-rapido);
}