/* ============================================================
   AMIMOÊ — layout.css
   Cabeçalho, navegação, menu móvel, rodapé e avisos
   ============================================================ */

/* ============================================================
   1. BARRA DE AVISOS
   ============================================================ */
.avisos{
  background: var(--terracota-fundo);
  color: var(--creme);
  font-size: .74rem;
  letter-spacing: .045em;
  position: relative;
  z-index: 120;
}
.avisos__int{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
  padding-block: 8px;
}
.avisos__lista{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2vw, 26px);
}
.avisos__lista li{
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
}
.avisos__lista li + li::before{
  content: "";
  position: absolute;
  left: clamp(-13px, -1vw, -7px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(248, 241, 235, .38);
}
.avisos__lema{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  white-space: nowrap;
  color: rgba(248, 241, 235, .9);
}
.avisos .ico{ width: 17px; height: 17px; opacity: .9; }

/* ============================================================
   2. CABEÇALHO
   ============================================================ */
.cabecalho{
  position: sticky;
  top: 0;
  z-index: 110;
  background: rgba(252, 247, 243, .94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linha-fina);
  transition: box-shadow .4s ease;
  transform: translateZ(0);
  overflow-anchor: none;
}
.cabecalho.esta-reduzido{ box-shadow: 0 14px 34px -26px rgba(74, 48, 40, .45); }

.cabecalho__int{
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.4vw, 54px);
  padding-block: clamp(12px, 1.5vw, 20px);
  transition: padding-block .28s var(--curva);
}
.cabecalho.esta-reduzido .cabecalho__int{ padding-block: 9px; }

.cabecalho__marca{ display: block; flex: none; }
.cabecalho__marca img{
  height: clamp(40px, 3.6vw, 54px);
  width: auto;
  transition: height .28s var(--curva);
}
.cabecalho.esta-reduzido .cabecalho__marca img{ height: clamp(34px, 2.8vw, 42px); }

.cabecalho__dir{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.9vw, 32px);
  margin-left: auto;
}

/* Ações (buscar, conta, favoritos, carrinho) */
.acao{
  position: relative;
  flex-direction: column;
  gap: 6px;
}
.acao .ico{ width: 22px; height: 22px; }
.acao__rotulo{
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.selo{
  position: absolute;
  top: -7px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pilula);
  background: var(--terracota);
  color: var(--branco-quente);
  font-size: .62rem;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
  animation: pulsa .45s var(--curva);
}
@keyframes pulsa{
  0%{ transform: scale(.4); opacity: 0; }
  60%{ transform: scale(1.18); }
  100%{ transform: scale(1); opacity: 1; }
}

.cabecalho__hamburguer{ display: none; }
.cabecalho__hamburguer .ico{ width: 24px; height: 24px; }

/* ============================================================
   3. NAVEGAÇÃO
   ============================================================ */
.navegacao__lista{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.2vw, 36px);
}
.navegacao__link{
  position: relative;
  display: block;
  font-size: .735rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tinta-media);
  padding-block: 6px;
  transition: color .3s ease;
}
.navegacao__link::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--terracota);
  transform: translateX(-50%);
  transition: width .4s var(--curva);
}
.navegacao__link:hover{ color: var(--terracota); }
.navegacao__link:hover::after,
.navegacao__link.esta-ativo::after{ width: 100%; }
.navegacao__link.esta-ativo{ color: var(--terracota); }


/* ============================================================
   4. MENU MÓVEL
   ============================================================ */
.cortina{
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(74, 48, 40, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .4s ease;
}
.cortina.esta-visivel{ opacity: 1; }

.gaveta{
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: min(88vw, 360px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 26px calc(26px + env(safe-area-inset-bottom));
  background: var(--creme-claro);
  box-shadow: var(--sombra-g);
  transform: translateX(-102%);
  transition: transform .48s var(--curva);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.gaveta.esta-aberta{ transform: none; visibility: visible; }

.gaveta__topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gaveta__topo .ico{ width: 22px; height: 22px; }

.gaveta__nav ul{ display: flex; flex-direction: column; }
.gaveta__nav a{
  display: block;
  padding: 15px 0;
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--tinta);
  border-bottom: 1px solid var(--linha-fina);
  transition: color .3s ease, padding-left .3s var(--curva);
}
.gaveta__nav a:hover{ color: var(--terracota); padding-left: 8px; }

.gaveta__pe{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--linha-fina);
}
.gaveta__acao{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.gaveta__acao:hover{ color: var(--terracota); }
.gaveta__insta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--terracota);
}

/* ============================================================
   5. RODAPÉ
   ============================================================ */
.rodape{
  position: relative;
  overflow: hidden;
  background: var(--creme-claro);
  padding-top: clamp(44px, 5vw, 72px);
}

.rodape__grade{
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  padding-bottom: clamp(30px, 3.6vw, 48px);
}

/* --- Marca --- */
.rodape__marca{
  display: flex;
  align-items: center;          /* a logo sozinha centraliza na altura da linha */
  align-self: stretch;
}
.rodape__logo{ width: clamp(150px, 13vw, 190px); height: auto; }

/* --- Colunas --- */
.rodape__titulo{
  font-family: var(--fonte-texto);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}
.rodape__grade > *{ min-width: 0; }
.rodape__lista{ display: flex; flex-direction: column; gap: 2px; }
.rodape__lista a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 7px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta-media);
  transition: color .28s ease, transform .28s var(--curva);
}
.rodape__lista a:hover{ color: var(--terracota); transform: translateX(3px); }
.rodape__lista .ico{ width: 18px; height: 18px; color: var(--terracota); flex: none; }
.rodape__lista a{ overflow-wrap: anywhere; }

/* --- Traçado orgânico (inspirado na referência) --- */
.rodape__traco{
  position: relative;
  height: clamp(46px, 4.6vw, 66px);
}
.rodape__traco-linha{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rodape__traco-coracao{
  position: absolute;
  left: clamp(6%, 8%, 10%);
  top: 56.7%;                 /* a linha passa exatamente nesta altura aqui */
  width: clamp(16px, 1.5vw, 21px);
  height: auto;
  transform: translate(-50%, -100%);
}
.rodape__traco-ramo{
  position: absolute;
  right: clamp(52px, 6vw, 88px);
  bottom: 34%;
  width: clamp(38px, 3.6vw, 52px);
  height: auto;
}

/* --- Barra legal --- */
.rodape__base{
  position: relative;
  border-top: 1px solid var(--linha-fina);
}
.rodape__base-int{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-block: clamp(16px, 1.8vw, 24px);
  padding-right: 104px;           /* reserva o canto do botão flutuante do WhatsApp */
}
.rodape__direitos{
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.rodape__legais{ display: flex; flex-wrap: wrap; gap: 8px 26px; }
.rodape__legais a{
  font-size: .84rem;
  color: var(--tinta-suave);
  transition: color .28s ease;
}
.rodape__legais a:hover{ color: var(--terracota); }

/* ============================================================
   6. AVISO FLUTUANTE (toast)
   ============================================================ */
.aviso-flutuante{
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 4vw, 36px);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pilula);
  background: var(--marrom-escuro);
  color: var(--creme);
  font-size: .78rem;
  letter-spacing: .1em;
  box-shadow: var(--sombra-g);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .4s ease, transform .45s var(--curva);
  max-width: calc(100vw - 40px);
  text-align: center;
}
.aviso-flutuante.esta-visivel{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   7. BOTÃO FLUTUANTE DO WHATSAPP
   ============================================================ */
.zap{
  position: fixed;
  right: clamp(16px, 2.5vw, 30px);
  bottom: clamp(16px, 2.5vw, 30px);
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 18px;
  border-radius: var(--r-pilula);
  background: var(--marrom-choc);
  color: var(--creme);
  box-shadow: 0 16px 38px -14px rgba(74, 48, 40, .55);
  transition: background-color .35s ease, transform .45s var(--curva),
              box-shadow .45s var(--curva), gap .45s var(--curva);
}
.zap:hover,
.zap:focus-visible{
  background: var(--marrom-escuro);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -14px rgba(74, 48, 40, .6);
  gap: 11px;
}
.zap__ico{
  width: 25px;
  height: 25px;
  flex: none;
  position: relative;
  z-index: 1;
}
/* O rótulo abre no hover, sem empurrar nada na página */
.zap__texto{
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  opacity: 0;
  transition: max-width .45s var(--curva), opacity .3s ease;
}
.zap:hover .zap__texto,
.zap:focus-visible .zap__texto{
  max-width: 190px;
  opacity: 1;
}
/* Anel discreto que respira */
.zap__pulso{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--rosa-nude);
  opacity: 0;
  animation: respira 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes respira{
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Sai da frente do aviso flutuante no celular */
@media (max-width: 640px){
  .zap{
    height: 54px;
    padding: 0 15px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .zap__ico{ width: 23px; height: 23px; }
  .zap:hover .zap__texto,
  .zap:focus-visible .zap__texto{ max-width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .zap__pulso{ animation: none; }
}

/* ============================================================
   8. RESPONSIVO
   ============================================================ */

/* --- Rótulos das ações somem antes --- */
@media (max-width: 1240px){
  .acao__rotulo{ display: none; }
  .acao{ gap: 0; }
}

/* --- Tablets: menu vira gaveta --- */
@media (max-width: 1100px){
  html{ scroll-padding-top: 88px; }
  .cabecalho__hamburguer{ display: inline-flex; order: -1; }
  .navegacao{ display: none; }
  .cabecalho__dir{ gap: 16px; }
  .cabecalho__marca{ margin-inline: auto; }
  .cabecalho__int{ gap: 12px; }
}

/* Avisos: no celular vira um item por vez */
@media (max-width: 900px){
  .avisos__lema{ display: none; }
  .avisos__int{ justify-content: center; }
  .avisos__lista{ justify-content: center; flex-wrap: nowrap; }
  .avisos__lista li{ display: none; }
  .avisos__lista li.esta-visivel{ display: flex; animation: surge .5s var(--curva); }
  .avisos__lista li + li::before{ display: none; }
  .avisos{ font-size: .68rem; }
}
@keyframes surge{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}



/* --- Rodapé em telas médias: marca em cima, 3 colunas embaixo --- */
@media (max-width: 1000px){
  .rodape__grade{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 40px) clamp(20px, 3vw, 40px);
  }
  .rodape__marca{ grid-column: 1 / -1; align-self: auto; }
}

/* --- Celulares --- */
@media (max-width: 640px){
  .avisos{ font-size: .655rem; }
  .avisos__int{ min-height: 40px; }

  /* Aviso flutuante sobe para não bater no botão do WhatsApp */
  .aviso-flutuante{ bottom: calc(84px + env(safe-area-inset-bottom)); }

  .cabecalho__dir{ gap: 12px; }
  .cabecalho__dir .acao--conta{ display: none; }   /* fica na gaveta */
  .acao .ico{ width: 21px; height: 21px; }

  /* Rodapé empilhado */
  .rodape__grade{ grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .rodape__marca{ justify-content: center; }
  .rodape__logo{ width: min(56vw, 190px); }
  .rodape__lista{ align-items: center; }
  .rodape__lista a{ padding-block: 9px; }   /* alvo de toque confortável */

  .rodape__traco-ramo{ width: 34px; right: 10px; }
  .rodape__traco-coracao{ left: 12%; }

  .rodape__base-int{
    flex-direction: column; gap: 10px; text-align: center;
    padding-top: 20px; padding-bottom: 84px; padding-right: 0;
  }
  .rodape__legais{ justify-content: center; gap: 6px 20px; }
  .rodape__direitos{ font-size: .66rem; letter-spacing: .13em; }
}

/* --- Telas muito estreitas --- */
@media (max-width: 380px){
  .cabecalho__marca img{ height: 36px; }
}