/* =========================================================
   Portal do Imbuí, minisite de links
   Tipografia do manual: Petrona nos títulos (SemiBold, Bold
   e Italic), Nunito Sans no corpo (Regular e SemiBold). Os
   .ttf vieram da pasta da identidade e foram convertidos
   para woff2 com subset latino: 21 KB a Petrona, 11 KB a
   Nunito. A Nunito não tem a seta →, então a seta é SVG.
   Paleta do manual (MANUAL ID PORTAL DO IMBUÍ.pdf):
   vermelho 8A2B2B, laranja C04C36, bege ECE4DB, ouro D4AD67.
   A marca nunca vai sobre o laranja; aqui o laranja nem entra.
   ========================================================= */

@font-face{font-family:'Titulo';src:url('../assets/fonts/petrona-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Titulo';src:url('../assets/fonts/petrona-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Titulo';src:url('../assets/fonts/petrona-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Corpo';src:url('../assets/fonts/nunito-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Corpo';src:url('../assets/fonts/nunito-semibold.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

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

:root{
  --escuro:#8A2B2B;        /* vermelho Portal, superfície da página (bege sobre ele: 6,78:1) */
  --escuro-fundo:#6F2222;  /* um passo abaixo, para o topo (8,66:1) */
  --creme:#ECE4DB;         /* bege Portal: cartões e texto sobre vermelho */
  --ouro:#D4AD67;          /* ouro Portal: segunda linha de título (4,05:1, só texto grande),
                              chips e botões, sempre com tinta escura por cima (6,6:1) */
  --destaque:#8A2B2B;      /* o vermelho como acento sobre bege (6,78:1) */
  --tinta:#3A2323;         /* texto sobre bege (11,5:1) */
  --tinta-fraca:#5E4B4B;   /* apoio sobre bege (6,46:1) */
  --zap:#25D366;           /* verde do WhatsApp, só no botão flutuante */

  --titulo:'Titulo',Georgia,'Times New Roman',serif;
  --corpo:'Corpo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --linha:rgba(236,228,219,.22);
  --linha-escura:rgba(58,35,35,.18);
  --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;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}

.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, no desenho do Mariposa: um brilho que desce do
   topo, o símbolo da marca em marca d'água e um grão de ruído
   em SVG inline
   --------------------------------------------------------- */
.fundo{position:fixed;inset:0;z-index:0;background:radial-gradient(130% 90% at 50% -12%, #9E3838 0%, var(--escuro-fundo) 56%, #561A1A 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__simbolo{
  position:absolute;left:50%;top:-6vh;transform:translateX(-50%);
  width:min(92vw,560px);aspect-ratio:1;
  background:rgba(236,228,219,.05);
  -webkit-mask:url('../assets/img/simbolo.svg') center/contain no-repeat;
          mask:url('../assets/img/simbolo.svg') center/contain no-repeat;
}

.folha{position:relative;z-index:1}
.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(138,43,43,0) 0%, rgba(138,43,43,.55) 55%, var(--escuro) 100%);pointer-events:none}
.corpo__col{width:var(--col);margin-inline:auto}

/* símbolo como máscara: a cor vem do CSS */
.simbolo{display:block;width:40px;aspect-ratio:1;background:currentColor;-webkit-mask:url('../assets/img/simbolo.svg') center/contain no-repeat;mask:url('../assets/img/simbolo.svg') 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 img{width:clamp(210px,58vw,290px);height:auto}
.topo__unidade{font-size:.72rem;letter-spacing:.30em;text-transform:uppercase;color:rgba(236,228,219,.85);font-weight:600;padding-left:.3em}

.topo__frase{
  font-family:var(--titulo);font-weight:600;
  font-size:clamp(1.9rem,7.6vw,2.7rem);line-height:1.04;letter-spacing:-.005em;
  margin:22px auto 0;max-width:18ch;color:var(--creme);
}
.topo__frase span{display:block;color:var(--ouro);font-style:italic;font-weight:400}

.topo__status{
  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(111,34,34,.55);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  font-size:1.08rem;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:var(--ouro);box-shadow:0 0 0 4px rgba(212,173,103,.24)}

.topo__arroba{margin:18px 0 0;font-size:.9rem}
.topo__arroba a{color:var(--creme);text-decoration:none;letter-spacing:.02em}
.topo__arroba a:hover,.topo__arroba a:focus-visible{text-decoration:underline}

.secoes{margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;position:relative;z-index:2}
.secoes a{
  display:inline-block;padding:8px 14px;border:1px solid rgba(236,228,219,.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)}

/* ---------------------------------------------------------
   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:#F5EFE7}
.cartao:active{transform:translateY(0)}
.cartao__ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(58,35,35,.08);color:var(--tinta)}
.cartao__ic svg{width:21px;height:21px}
.cartao--destaque .cartao__ic{background:rgba(138,43,43,.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;display:grid;place-items:center;color:var(--tinta-fraca);transition:transform .22s ease,color .22s ease}
.cartao__seta svg{width:17px;height:17px}
.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:var(--ouro)}
.divisor::before,.divisor::after{content:'';flex:1;height:1px;background:var(--linha)}
.divisor .simbolo{width:30px}

/* ---------------------------------------------------------
   cabeçalho de seção: rótulo em caixa e título em Petrona
   --------------------------------------------------------- */
.bloco{margin-top:46px}
.rotulo{display:inline-block;margin:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);border:1px solid var(--linha);padding:5px 12px}
.rotulo--claro{color:var(--tinta);border-color:var(--linha-escura)}
.titulo{font-family:var(--titulo);font-weight:600;font-size:clamp(1.8rem,7.2vw,2.5rem);line-height:1.04;margin:16px 0 0;color:var(--creme);letter-spacing:-.005em}
.titulo b{font-weight:400;font-style:italic;color:var(--ouro)}
.titulo--claro{color:var(--tinta)}
.titulo--claro b{color:var(--destaque)}
.nota{margin:18px 0 0;font-size:.86rem;color:rgba(236,228,219,.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(236,228,219,.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(236,228,219,.85);margin-top:2px}
.chip{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta);background:var(--ouro);padding:3px 10px;border-radius:999px}

/* cardápio */
.cozinha{list-style:none;margin:22px 0 0;padding: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(236,228,219,.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(--ouro);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(--escuro);color:var(--creme)}
.botao--zap:hover,.botao--zap:focus-visible{background:var(--escuro-fundo);color:var(--creme)}

/* ---------------------------------------------------------
   celebrar: bloco bege, superfície invertida
   --------------------------------------------------------- */
.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(138,43,43,.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:600;font-size:1.45rem;line-height:1.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(236,228,219,.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:40px;color:rgba(236,228,219,.5)}
.rodape__end{margin:0;font-size:.9rem;color:rgba(236,228,219,.85);line-height:1.65}
.rodape__redes{margin:16px 0 0;font-size:.9rem;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;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;flex-direction:column;align-items:center;gap:12px;font-size:.86rem;letter-spacing:.02em;color:rgba(236,228,219,.86)}
.rodape__cortex a{display:block;color:var(--creme);opacity:.9;transition:opacity .2s ease}
.rodape__cortex a:hover,.rodape__cortex a:focus-visible{opacity:1}
.cortex{display:block;width:132px;height:auto}

/* whatsapp flutuante no verde do app, como o Iuri pediu no Casa Iryna */
.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(--zap);color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
  transition:transform .2s ease,background-color .2s ease;
}
.zap-flutua svg{width:29px;height:29px}
.zap-flutua:hover,.zap-flutua:focus-visible{transform:scale(1.06);background:#1EBE5A}

a:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:8px}
.celebrar a:focus-visible{outline-color:var(--destaque)}

.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}

@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}
}

@media (min-width:760px){
  :root{--col:min(100% - 64px, 760px)}
  .links__grade{grid-template-columns:1fr 1fr;gap:12px}
  .links__grade > li:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 6px);margin-inline:auto}
  .agenda{grid-template-columns:1fr 1fr}
  .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:152px}
}