/* =========================================================
   Casa Iryna, minisite de links
   Tipografia e paleta do manual da marca:
   Erstoria nos títulos, JUST Sans no corpo.

   Os originais vieram da pasta da marca no Drive
   (Casa Iryna / 01. Identidade Visual / 07. Famílias
   Tipográficas) e foram convertidos para woff2 com subset
   latino: 15 a 20 KB cada, contra 106 a 116 KB do arquivo
   original. Cobertura conferida em ã õ ç á é í ó ú â ê ô à ü
   À Ç Ã, dígitos, ponto médio, traço médio, meia-risca, & % ª.
   Nenhuma das duas fontes tem a seta →, então a seta dos
   cartões é desenhada em SVG.
   ========================================================= */

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

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

:root{
  /* paleta do manual (Identidade Visual / 08. Paleta de Cores):
     FD5306 laranja · 0A5767 teal · DCC789 areia · 333233 grafite · F4E6D2 creme */
  --escuro:#0A5767;        /* teal da marca, superfície da página */
  --escuro-fundo:#073E48;  /* um passo abaixo, superfície do topo */
  --creme:#F4E6D2;         /* cartões e texto sobre escuro (6,65:1) */
  --areia:#DCC789;         /* tom sobre tom: segunda linha de título, chips (4,89:1 no teal) */
  --tinta:#333233;         /* grafite, texto sobre creme (10,39:1) */
  --tinta-fraca:#556A6E;   /* apoio sobre creme (4,65:1) */

  /* o laranja do manual reprova como texto nos dois fundos:
     2,66:1 sobre o creme e 2,49:1 sobre o teal. Fica só em
     preenchimento e peça gráfica; para texto entra a versão
     um passo mais escura, que dá 4,64:1 sobre o creme. */
  --laranja:#FD5306;
  --laranja-texto:#B83C05;

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

  --linha:rgba(244,230,210,.22);
  --linha-escura:rgba(51,50,51,.18);
  --raio:20px;
  --col:min(100% - 32px, 560px);
  --sombra:0 10px 30px -14px rgba(0,0,0,.55);
}

html{-webkit-text-size-adjust:100%}

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}

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

/* o topo fica um passo mais escuro que o corpo; a transição
   entre os dois é o degradê do ::before logo abaixo */
.corpo{
  position:relative;
  background:var(--escuro);
  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(10,87,103,0) 0%, rgba(10,87,103,.55) 55%, var(--escuro) 100%);
  pointer-events:none;
}
.corpo__col{width:var(--col);margin-inline:auto}

/* ---------------------------------------------------------
   logotipo (máscara: a cor vem do CSS, um arquivo só serve
   ao topo em creme e ao rodapé em creme apagado)
   --------------------------------------------------------- */
.iryna{
  display:block;width:230px;aspect-ratio:600/258;
  background:currentColor;
  -webkit-mask:url('../assets/img/iryna-tipo.png') center/contain no-repeat;
          mask:url('../assets/img/iryna-tipo.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:16px}
.topo__marca .iryna{color:var(--creme);width:clamp(190px,56vw,264px)}
.topo__slogan{
  font-family:var(--corpo);
  font-size:.72rem;letter-spacing:.30em;text-transform:uppercase;
  color:var(--areia);font-weight:600;padding-left:.3em
}

.topo__status{
  display:inline-flex;align-items:center;gap:12px;
  margin:30px 0 0;padding:11px 23px 11px 19px;
  border:1px solid var(--linha);border-radius:999px;
  background:rgba(7,62,72,.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:#8FD3A6;flex:none;box-shadow:0 0 0 4px rgba(143,211,166,.20)}
.topo__status[data-aberto="nao"] .ponto{background:var(--laranja);box-shadow:0 0 0 4px rgba(253,83,6,.22)}

.topo__arroba{margin:18px 0 0;font-size:.9rem}
.topo__arroba a{color:rgba(244,230,210,.86);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:#FAF0E1;
}
.cartao:active{transform:translateY(0)}

.cartao__ic{
  flex:none;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(51,50,51,.08);color:var(--tinta);
}
.cartao__ic svg{width:21px;height:21px}
.cartao--destaque .cartao__ic{background:rgba(253,83,6,.14);color:var(--laranja-texto)}

.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(--laranja-texto)}

/* ---------------------------------------------------------
   divisor
   --------------------------------------------------------- */
.divisor{
  display:flex;align-items:center;gap:16px;
  margin:44px 4px 8px;color:rgba(244,230,210,.45)
}
.divisor::before,.divisor::after{content:'';flex:1;height:1px;background:var(--linha)}
.divisor svg{width:27px;height:33px;display:block;color:var(--areia)}

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

.rotulo{
  display:inline-block;margin:0;
  font-family:var(--corpo);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--creme);
  border:1px solid var(--linha);
  padding:6px 12px 5px;
}
.rotulo--claro{color:var(--tinta);border-color:var(--linha-escura)}

.titulo{
  font-family:var(--titulo);
  font-weight:400;text-transform:uppercase;
  font-size:clamp(1.85rem,7.6vw,2.6rem);line-height:1;
  letter-spacing:.01em;
  margin:16px 0 0;color:var(--creme);
}
.titulo b{font-weight:400;color:var(--areia)}
.titulo--claro{color:var(--tinta)}
.titulo--claro b{color:var(--laranja-texto)}

.nota{margin:18px 0 0;font-size:.86rem;color:rgba(244,230,210,.82)}
.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(244,230,210,.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(244,230,210,.76);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(244,230,210,.55)
}
/* nem Erstoria nem JUST Sans têm a seta →, então aqui ela é
   desenhada, igual à dos cartões de link */
.agenda__item--link .agenda__seta{display:inline-block;vertical-align:-.12em;color:var(--areia);transition:transform .22s ease}
.agenda__item--link .agenda__seta svg{width:16px;height:16px;display:block}
.agenda__item--link:hover .agenda__seta,.agenda__item--link:focus-visible .agenda__seta{transform:translateX(3px)}

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

/* 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(--areia);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:#E7D6A2;transform:translateY(-1px)}
.botao--zap{background:var(--escuro);color:var(--creme)}
.botao--zap:hover,.botao--zap:focus-visible{background:var(--escuro-fundo)}

/* ---------------------------------------------------------
   celebrar: bloco claro, separado da lista da semana 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(51,50,51,.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(--laranja-texto)
}
.festa__titulo{
  font-family:var(--titulo);
  font-weight:400;text-transform:uppercase;
  font-size:1.45rem;line-height:1.05;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: duas jornadas por dia, almoço e jantar */
.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(244,230,210,.82)}
.horas td{text-align:right;color:var(--creme);font-variant-numeric:tabular-nums}
.horas tr[data-hoje] th,.horas tr[data-hoje] td{color:var(--areia);font-weight:600}
.horas tr[data-hoje] th::after{content:' · hoje';font-weight:400;font-size:.8em;opacity:.75}
.horas td span{white-space:nowrap}
.horas td span + span::before{content:' · ';opacity:.5}

/* rodapé: só a assinatura da agência. O endereço saiu daqui a pedido
   do Iuri e continua no cartão "Como chegar" e no JSON-LD da página */
.rodape{margin-top:56px;text-align:center;padding-top:34px;padding-bottom:6px;border-top:1px solid var(--linha)}

.rodape__cortex{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.86rem;letter-spacing:.02em;color:rgba(244,230,210,.86)
}
.rodape__cortex a{display:block;color:var(--creme);transition:opacity .2s ease;opacity:.9}
.rodape__cortex a:hover,.rodape__cortex a:focus-visible{opacity:1}
.cortex{display:block;width:132px;height:auto}

/* whatsapp flutuante no verde do próprio app (#25D366), com o
   glifo branco, do jeito que o WhatsApp desenha. O verde dá 4,79:1
   sobre o teal da página, então se separa sem precisar de aro. */
.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:#25D366;color:#FFFFFF;
  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}

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

/* ---------------------------------------------------------
   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}

/* a taça do logotipo enche devagar, como a fonte de Aperol */
.taca__vinho{animation:encher 6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes encher{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-1.5px) scaleY(1.06)}
}

@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}
  /* numero impar de cartoes: o ultimo sobra sozinho na linha final.
     Ocupa as duas colunas para poder ser centralizado, mas mantem a
     largura de uma, senao destoa dos outros */
  .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}
}