/* =========================================================
   Mariposa Vilas, minisite de links
   Tipografia: Big Shoulders Display ExtraBold nos títulos,
   Degular Display no corpo (mesma dupla nos dois manuais).
   Paleta: manual da unidade (MANUAL DE MARCA - MARIPOSA
   PRAIA.pdf, 17/08/2026), que substituiu a da rede:
   terracota A83C35, âmbar F0A439, azul céu 4DABD3,
   verde tropical 2E7947, marinho 243D4F, areia F3EFE4.

   Os .otf/.ttf originais vieram da pasta da marca no Drive
   (SOCIAL MEDIA/FONTES MARIPOSA) e foram convertidos para
   woff2 com subset latino: 11 a 13 KB cada, contra 79 a 89 KB
   do arquivo original. Cobertura conferida em ã õ ç á é í ó ú
   â ê ô à ü À Ç Ã, dígitos, ponto médio, seta, traço médio,
   meia-risca, & % ª.
   ========================================================= */

@font-face{
  font-family:'Titulo';
  src:url('../assets/fonts/bigshoulders-extrabold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Corpo';
  src:url('../assets/fonts/degular-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Corpo';
  src:url('../assets/fonts/degular-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Corpo';
  src:url('../assets/fonts/degular-semibold.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}

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

:root{
  /* paleta do manual Mariposa Praia. Os nomes de papel
     ficaram, o valor de cada papel mudou de manual. */
  --escuro:#243D4F;        /* o azul escuro do manual, superfície da página
                              (areia sobre ele: 9,85:1) */
  --escuro-fundo:#1B2F3D;  /* um passo abaixo, para o topo (12:1) */
  --creme:#F3EFE4;         /* areia: superfície clara e texto sobre escuro */
  --verde:#2E7947;         /* verde tropical só nos botões de WhatsApp, que
                              vivem sobre cartões areia (branco: 5,33:1) */
  --verde-escuro:#245C37;
  --destaque:#A83C35;      /* terracota, acento sobre areia (5,44:1). Sobre o
                              azul dá 1,81:1, então nunca toca o fundo */
  --bege:#F0A439;          /* âmbar do manual: chips, botões, grafismo e texto
                              sobre o azul (5,43:1, passa até em corpo pequeno) */
  --bege-titulo:#F0A439;   /* sobre o azul o âmbar do manual passa direto;
                              a variável fica para o dia em que o fundo mudar */
  --ceu:#4DABD3;           /* azul claro: 4,36:1 sobre o fundo, entra como
                              grafismo (setas, divisor), não como texto corrido */
  --tinta:#243D4F;         /* o mesmo azul escuro como texto sobre areia */
  --tinta-fraca:#52626D;

  --titulo:'Titulo','Arial Narrow',sans-serif;
  --corpo:'Corpo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --linha:rgba(243,239,228,.22);
  --linha-escura:rgba(36,61,79,.20);
  --raio:20px;
  --col:min(100% - 32px, 560px);
  --sombra:0 10px 30px -14px rgba(0,0,0,.55);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--corpo);
  font-size:16px; line-height:1.55;
  color:var(--creme);
  background:var(--escuro-fundo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto é obrigatório: sem ele o atributo height="" do HTML
   vira hint de estilo e anula o aspect-ratio das imagens */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.vis-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}

.pular{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--creme);color:var(--tinta);padding:10px 16px;border-radius:0 0 12px 0
}
.pular:focus{left:0}

/* ---------------------------------------------------------
   fundo fixo: sem foto, com textura. Três camadas: um brilho
   que desce do topo, uma mariposa gigante em marca d'água
   (a mesma máscara do logo) e um grão de ruído em SVG inline,
   que não pesa nem faz requisição.
   --------------------------------------------------------- */
.fundo{
  position:fixed;inset:0;z-index:0;
  background:radial-gradient(130% 90% at 50% -12%, #2E4F66 0%, var(--escuro-fundo) 56%, #142430 100%);
}
.fundo::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.fundo__asa{
  position:absolute;left:50%;top:3vh;transform:translateX(-50%);
  width:min(96vw,640px);aspect-ratio:408/202;
  background:rgba(243,239,228,.05);
  -webkit-mask:url('../assets/img/borboleta.png') center/contain no-repeat;
          mask:url('../assets/img/borboleta.png') center/contain no-repeat;
}

/* ---------------------------------------------------------
   folha
   --------------------------------------------------------- */
.folha{position:relative;z-index:1}

/* o topo respira sobre a foto; daí para baixo a página vira
   superfície sólida, senão a foto fixa atravessa o conteúdo */
.corpo{
  position:relative;
  background:var(--escuro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px 180px;
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
}
.corpo::before{
  content:'';position:absolute;left:0;right:0;top:-150px;height:150px;
  background:linear-gradient(180deg, rgba(36,61,79,0) 0%, rgba(36,61,79,.55) 55%, var(--escuro) 100%);
  pointer-events:none;
}
.corpo__col{width:var(--col);margin-inline:auto}

/* ---------------------------------------------------------
   borboleta (máscara: a cor vem do CSS)
   --------------------------------------------------------- */
.borboleta{
  display:block;width:104px;aspect-ratio:408/202;
  background:currentColor;
  -webkit-mask:url('../assets/img/borboleta.png') center/contain no-repeat;
          mask:url('../assets/img/borboleta.png') center/contain no-repeat;
}

/* ---------------------------------------------------------
   topo
   --------------------------------------------------------- */
.topo{
  width:var(--col);margin-inline:auto;
  text-align:center;
  padding:clamp(30px,8.5vh,84px) 4px 6px;
}
.topo__marca{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.topo__marca .borboleta{color:var(--creme);width:clamp(88px,23vw,116px)}
.tipo{display:block;width:clamp(190px,52vw,250px)}
.tipo img{width:100%;height:auto}
.topo__unidade{
  font-family:var(--corpo);
  font-size:.72rem;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(243,239,228,.78);font-weight:600;padding-left:.3em
}

.topo__frase{
  font-family:var(--titulo);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(2.05rem,8.8vw,3.3rem);
  line-height:.94;letter-spacing:.005em;
  margin:24px auto 0;max-width:15ch;
  color:var(--creme);
}
.topo__frase span{display:block;color:var(--bege-titulo)}

.topo__status{
  /* 30% maior que a primeira versão, a pedido */
  display:inline-flex;align-items:center;gap:12px;
  margin:24px 0 0;padding:11px 23px 11px 19px;
  border:1px solid var(--linha);border-radius:999px;
  background:rgba(27,47,61,.55);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  font-size:1.12rem;font-weight:600;color:var(--creme);line-height:1.2
}
.ponto{width:10px;height:10px;border-radius:50%;background:#C7EFD4;flex:none;box-shadow:0 0 0 4px rgba(199,239,212,.22)}
.topo__status[data-aberto="nao"] .ponto{background:#F6C27A;box-shadow:0 0 0 4px rgba(246,194,122,.24)}

.topo__arroba{margin:18px 0 0;font-size:.9rem}

/* atalhos para as seções: é o que dá evidência ao que vive
   abaixo dos cartões */
.secoes{
  margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;
  /* a costura do .corpo (::before, 150px de degradê) é pintada por cima
     do fim do topo e apagava a fileira de baixo. As pílulas sobem na
     ordem de pintura para escapar dela. */
  position:relative;z-index:2;
}
/* fundo sólido de propósito: a versão translúcida com blur clareava
   ou apagava a pílula conforme o que houvesse atrás dela */
.secoes a{
  display:inline-block;padding:8px 14px;
  border:1px solid rgba(243,239,228,.38);border-radius:999px;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;
  background:var(--escuro-fundo);
  transition:background-color .2s ease,color .2s ease;
}
.secoes a:hover,.secoes a:focus-visible{background:var(--creme);color:var(--tinta)}
.secoes__quebra{flex-basis:100%;height:0}
.topo__arroba a{color:var(--creme);text-decoration:none;letter-spacing:.02em}
.topo__arroba a:hover,.topo__arroba a:focus-visible{color:var(--creme);text-decoration:underline}

/* ---------------------------------------------------------
   cartões de link
   --------------------------------------------------------- */
.links{margin-top:34px}
.links__grade{list-style:none;margin:0;padding:0;display:grid;gap:11px}

.cartao{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--creme);color:var(--tinta);
  border-radius:var(--raio);
  text-decoration:none;
  box-shadow:var(--sombra);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background-color .22s ease;
}
.cartao:hover,.cartao:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.62);
  background:#FAF7EE;
}
.cartao:active{transform:translateY(0)}

.cartao__ic{
  flex:none;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(36,61,79,.08);color:var(--tinta);
}
.cartao__ic svg{width:21px;height:21px}
.cartao--destaque .cartao__ic{background:rgba(168,60,53,.12);color:var(--destaque)}

.cartao__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.cartao__txt b{font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.cartao__txt i{font-style:normal;font-size:.84rem;color:var(--tinta-fraca);line-height:1.35;margin-top:1px}

.cartao__seta{flex:none;color:#6B6555;font-size:1.05rem;transition:transform .22s ease,color .22s ease}
.cartao:hover .cartao__seta,.cartao:focus-visible .cartao__seta{transform:translateX(3px);color:var(--destaque)}

/* ---------------------------------------------------------
   divisor
   --------------------------------------------------------- */
.divisor{
  display:flex;align-items:center;gap:16px;
  margin:44px 4px 8px;color:rgba(243,239,228,.45)
}
.divisor::before,.divisor::after{content:'';flex:1;height:1px;background:var(--linha)}
.divisor .borboleta{width:26px;color:var(--ceu)}

/* ---------------------------------------------------------
   cabeçalho de seção: rótulo em caixa + título condensado,
   o par que o manual usa nas pranchas
   --------------------------------------------------------- */
.bloco{margin-top:46px}

.rotulo{
  display:inline-block;margin:0;
  font-family:var(--corpo);font-size:.82rem;font-weight:500;
  color:var(--creme);
  border:1px solid var(--linha);
  padding:4px 12px 5px;
}
.rotulo--claro{color:var(--tinta);border-color:var(--linha-escura)}

.titulo{
  font-family:var(--titulo);
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,8vw,2.7rem);line-height:.94;
  margin:16px 0 0;color:var(--creme);
}
.titulo b{font-weight:800;color:var(--bege-titulo)}
.titulo--claro{color:var(--tinta)}
.titulo--claro b{color:var(--destaque)}

.nota{margin:18px 0 0;font-size:.86rem;color:rgba(243,239,228,.85)}
.nota a{color:var(--creme);text-underline-offset:3px}

/* agenda da semana */
.agenda{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.agenda__item{
  background:rgba(243,239,228,.065);
  border:1px solid var(--linha);
  border-radius:16px;padding:14px 16px;
}
.agenda__item b{display:block;font-size:1.02rem;font-weight:600;color:var(--creme);margin-top:8px}
.agenda__item i{display:block;font-style:normal;font-size:.86rem;color:rgba(243,239,228,.85);margin-top:2px}

.agenda__item--link{
  display:block;color:inherit;text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease;
}
.agenda__item--link:hover,.agenda__item--link:focus-visible{
  transform:translateY(-2px);border-color:rgba(243,239,228,.55)
}
.agenda__item--link .agenda__seta{color:var(--bege);font-weight:600}

.chip{
  display:inline-block;font-size:.7rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta);background:var(--bege);
  padding:3px 10px;border-radius:999px
}

/* cardápio */
.cozinha{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.cozinha li{padding:13px 2px;border-bottom:1px solid var(--linha)}
.cozinha li:first-child{border-top:1px solid var(--linha)}
.cozinha b{display:block;font-size:.98rem;font-weight:600;color:var(--creme)}
.cozinha i{display:block;font-style:normal;font-size:.86rem;color:rgba(243,239,228,.85);margin-top:2px}

/* botão */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-top:22px;width:100%;
  padding:14px 22px;border-radius:999px;
  background:var(--bege);color:var(--tinta);
  font-family:var(--corpo);font-weight:600;font-size:.96rem;text-decoration:none;
  transition:background-color .2s ease,transform .2s ease;
}
.botao:hover,.botao:focus-visible{background:var(--creme);transform:translateY(-1px)}
.botao--zap{background:var(--verde);color:#fff}
.botao--zap:hover,.botao--zap:focus-visible{background:var(--verde-escuro)}

/* ---------------------------------------------------------
   celebrar: bloco claro, separado do cardápio por respiro
   e por inversão de superfície
   --------------------------------------------------------- */
.celebrar{
  margin-top:64px;
  background:var(--creme);color:var(--tinta);
  border-radius:28px;
  padding:32px 22px 26px;
}
.celebrar__cartoes{display:grid;gap:14px;margin-top:26px}

.festa{
  background:rgba(36,61,79,.05);
  border:1px solid var(--linha-escura);
  border-radius:20px;padding:20px 18px 22px;
}
.festa__tag{
  margin:0;font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--destaque)
}
.festa__titulo{
  font-family:var(--titulo);
  font-weight:800;text-transform:uppercase;
  font-size:1.5rem;line-height:1;margin:10px 0 0;color:var(--tinta)
}
.festa__txt{margin:12px 0 0;font-size:.92rem;color:var(--tinta-fraca)}
.festa__txt b{color:var(--tinta);font-weight:600}
.festa .botao{margin-top:20px}

/* horários */
.horas{width:100%;border-collapse:collapse;margin-top:22px;font-size:.94rem}
.horas th,.horas td{padding:11px 2px;border-bottom:1px solid var(--linha);text-align:left}
.horas th{font-weight:400;color:rgba(243,239,228,.85)}
.horas td{text-align:right;color:var(--creme);font-variant-numeric:tabular-nums}
.horas tr[data-hoje] th,.horas tr[data-hoje] td{color:#fff;font-weight:600}
.horas tr[data-hoje] th::after{content:' · hoje';font-weight:400;font-size:.8em;opacity:.75}

/* rodapé */
.rodape{margin-top:56px;text-align:center;padding-top:32px;border-top:1px solid var(--linha)}
.rodape__ic{margin:0 auto 16px;width:34px;color:rgba(243,239,228,.48)}
.rodape__end{margin:0;font-size:.9rem;color:rgba(243,239,228,.85);line-height:1.65}
.rodape__redes{margin:16px 0 0;font-size:.9rem;display:flex;gap:10px;justify-content:center;color:var(--creme)}
.rodape__redes a{color:var(--creme);text-decoration:none;text-underline-offset:3px}
.rodape__redes a:hover,.rodape__redes a:focus-visible{text-decoration:underline}

.rodape__cortex{
  margin:30px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.78rem;color:var(--creme)
}
.rodape__cortex a{display:block;color:rgba(243,239,228,.72);transition:color .2s ease}
.rodape__cortex a:hover,.rodape__cortex a:focus-visible{color:var(--creme)}
.cortex{display:block;width:74px;height:auto}

/* whatsapp flutuante: areia com o glifo verde; verde sobre o
   fundo verde sumiria, o disco areia é o que o destaca */
.zap-flutua{
  position:fixed;z-index:5;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--creme);color:var(--verde);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
  transition:transform .2s ease,background-color .2s ease;
}
.zap-flutua svg{width:28px;height:28px}
.zap-flutua:hover,.zap-flutua:focus-visible{transform:scale(1.06);background:#fff}

/* foco visível */
a:focus-visible{outline:2px solid var(--bege);outline-offset:3px;border-radius:8px}
.celebrar a:focus-visible{outline-color:var(--destaque)}

/* ---------------------------------------------------------
   entrada
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
html:not(.js) .reveal{opacity:1;transform:none}

.borboleta--voo{animation:voo 5.5s ease-in-out infinite}
@keyframes voo{
  0%,100%{transform:translateY(0) scaleX(1)}
  50%{transform:translateY(-7px) scaleX(.965)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   telas maiores
   --------------------------------------------------------- */
@media (min-width:760px){
  :root{--col:min(100% - 64px, 760px)}
  .links__grade{grid-template-columns:1fr 1fr;gap:12px}
  .agenda{grid-template-columns:1fr 1fr}
  .cozinha{grid-template-columns:1fr 1fr;column-gap:28px}
  .cozinha li:nth-child(2){border-top:1px solid var(--linha)}
  .botao{width:auto;padding-inline:32px}
  .festa .botao{width:100%}
  .topo{padding-top:clamp(60px,15vh,120px)}
  .celebrar{padding:40px 34px 36px;margin-top:76px}
  .celebrar__cartoes{grid-template-columns:1fr 1fr;gap:16px}
  .cortex{width:86px}
}