/* =========================================================================
   La Coya: Código do Repulgue
   A borda da empanada é o código da casa. Cada recheio tem o seu repulgue,
   e o site se organiza por essa legenda: glifo de traço, foto recortada,
   borda franzida dividindo as seções. Celeste, branco e sol.
   ========================================================================= */

/* --- Fontes (servidas do próprio site) ----------------------------------- */

@font-face {
  font-family: 'Norican';
  src: url(../fonts/norican-latin.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chivo';
  src: url(../fonts/chivo-latin.woff2) format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chivo';
  src: url(../fonts/chivo-italic-latin.woff2) format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Campo e superfícies (identidade/design-guide.md) */
  --campo: #e6f0f7;        /* celeste claro, o chão da página */
  --ceu-fundo: #d3e5f4;    /* celeste de respiro */
  --lenco: #a9c8e8;        /* o azul do lenço da personagem */
  --lenco-forte: #94bcdf;
  --branco: #ffffff;

  /* Tinta */
  --tinta: #14335c;        /* texto, títulos e logo */
  --tinta-suave: #4d6582;  /* apoio sobre branco e celeste claro (5:1) */
  --tinta-lenco: #1f3d66;  /* apoio sobre o azul do lenço (6:1) */
  --link: #2c6fa8;
  --linha: #cadcec;

  /* Ação: o sol da bandeira. Só botão, nunca campo. */
  --sol: #f5c542;
  --sol-forte: #e0ac1f;
  --masa: #f5dfa0;

  --f-script: 'Norican', 'Brush Script MT', cursive;
  --f-texto: 'Chivo', 'Segoe UI', system-ui, sans-serif;

  /* Uma régua só */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
  --e6: 104px;

  --raio: 28px;
  --raio-foto: 6px;
  --largura: 1320px;
  --respiro: clamp(20px, 4vw, 56px);
  --topo: 76px;

  /* Sombras baixas e azuladas */
  --sombra: 0 1px 2px rgba(20, 51, 92, .05), 0 8px 24px rgba(20, 51, 92, .07);
  --sombra-alta: 0 2px 6px rgba(20, 51, 92, .06), 0 18px 40px rgba(20, 51, 92, .12);
  --pouso: drop-shadow(0 16px 18px rgba(20, 51, 92, .16)) drop-shadow(0 3px 4px rgba(20, 51, 92, .1));

  /* A trança deitada: o repulgue como fio divisor. */
  --tranca-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M0 9c-1-6 12.6-11 14 -2' fill='none' stroke='%2314335c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

  --saida: cubic-bezier(.16, 1, .3, 1);   /* expo out */
  --mola: cubic-bezier(.22, 1, .36, 1);    /* desaceleração longa, sem rebote */
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--lenco-forte) var(--campo);
}

body {
  margin: 0;
  background: var(--campo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: clamp(1.0625rem, .35vw + .98rem, 1.1875rem);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--link);
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }

::selection { background: var(--masa); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--campo); }
::-webkit-scrollbar-thumb {
  background: var(--lenco-forte);
  border: 3px solid var(--campo);
  border-radius: 999px;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--tinta); }

p { margin: 0 0 var(--e2); max-width: 64ch; }

.pular {
  position: absolute;
  left: -9999px;
  top: var(--e2);
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--sol);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: var(--e2); }

.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Tipografia ---------------------------------------------------------- */

/* Script cheia nos títulos, como pede o design-guide. Sem tracking: letra
   ligada não aceita espaço extra. A entrelinha é generosa porque os laços
   do L e do y precisam de ar para não encostar na linha de baixo. */
h1, h2, .script {
  font-family: var(--f-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 6.2vw, 6rem); }
h2 { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }

h3 {
  font-family: var(--f-texto);
  font-weight: 800;
  font-size: clamp(1.1875rem, .5vw + 1.05rem, 1.4375rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--e1);
  text-wrap: balance;
}

h2 + p, h1 + p { margin-top: var(--e3); }

.lead {
  font-size: clamp(1.1875rem, .6vw + 1rem, 1.4375rem);
  line-height: 1.5;
  max-width: 46ch;
}

.apoio { color: var(--tinta-suave); }

/* --- Estrutura ----------------------------------------------------------- */

.faixa {
  position: relative;
  padding: var(--e6) var(--respiro);
}

.miolo {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
}

.faixa--branca { background: var(--branco); }
.faixa--lenco { background: var(--lenco); }
.faixa--fundo { background: var(--ceu-fundo); }

/* Borda de repulgue: o topo da faixa sai franzido, como a beira de uma
   empanada fechada à mão. A máscara junta uma fileira de meias-luas com o
   corpo da faixa; a faixa sobe 12px para cobrir a de cima. */
.franzida {
  --dente: 26px;
  margin-top: -12px;
  padding-top: calc(var(--e6) + 12px);
  -webkit-mask:
    radial-gradient(circle at 50% 100%, var(--tinta) 10px, transparent 10.5px) 0 0 / var(--dente) 12px repeat-x,
    linear-gradient(var(--tinta) 0 0) 0 11px / 100% calc(100% - 11px) no-repeat;
  mask:
    radial-gradient(circle at 50% 100%, var(--tinta) 10px, transparent 10.5px) 0 0 / var(--dente) 12px repeat-x,
    linear-gradient(var(--tinta) 0 0) 0 11px / 100% calc(100% - 11px) no-repeat;
}

.cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e3) var(--e5);
  align-items: end;
  margin-bottom: var(--e5);
}
.cabeca p { margin-bottom: 0; }

/* --- Glifos de repulgue -------------------------------------------------- */

/* O traço vem daqui e herda para dentro do <use>. --desenho vai de 1 a 0
   quando o glifo se desenha na tela. */
.glifo {
  width: 96px;
  height: 64px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--desenho, 0);
  overflow: visible;
}
.glifo--p { width: 54px; height: 36px; stroke-width: 3; }


/* --- Ícones -------------------------------------------------------------- */

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- A marca ------------------------------------------------------------- */

/* O logo é a mesma silhueta da máscara do site atual, já pintada na tinta: uma
   cor só, como manda o design-guide. Entra como imagem de fundo e não como
   máscara porque o Chrome bloqueia máscara em página aberta com dois cliques
   (file://), e o logo sumia. */
.logo {
  display: block;
  width: 100%;
  aspect-ratio: 520 / 654;
  background: url(../img/la-coya-tinta.webp) no-repeat center / contain;
}

/* --- Botões -------------------------------------------------------------- */

.botao {
  --fundo: var(--sol);
  --tinta-botao: var(--tinta);
  --botao-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px var(--botao-px);
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--tinta-botao);
  font: 700 1rem/1.2 var(--f-texto);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color .2s var(--saida),
    border-color .2s var(--saida),
    transform .35s var(--mola),
    box-shadow .3s var(--saida);
}
.botao:hover {
  --fundo: var(--sol-forte);
  color: var(--tinta-botao);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 51, 92, .14);
}
.botao:active { transform: translateY(0); box-shadow: none; }

/* Ajuste óptico: o desenho do ícone não enche a caixa dele, então o botão com
   ícone na frente tira 3px do recuo do lado do ícone, seja qual for o recuo
   daquele botão, para o conjunto ficar no centro. */
.botao:has(> .ico:first-child) { padding-left: calc(var(--botao-px) - 3px); }

.botao--linha {
  --fundo: transparent;
  border-color: var(--lenco-forte);
}
.botao--linha:hover { --fundo: var(--branco); border-color: var(--tinta); box-shadow: none; }

.faixa--lenco .botao--linha,
.porta--negocio .botao--linha { border-color: var(--tinta); }
.faixa--lenco .botao--linha:hover,
.porta--negocio .botao--linha:hover { --fundo: rgba(255, 255, 255, .55); }

.botao[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
}

/* Link com seta: a seta anda quando o cursor chega. */
.seguir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1.5px solid var(--tinta);
  padding-bottom: 2px;
}
.seguir .ico { transition: transform .35s var(--mola); }
.seguir:hover { color: var(--tinta); }
.seguir:hover .ico { transform: translateX(4px); }

/* --- Topo ---------------------------------------------------------------- */

.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--topo);
  padding: 0 var(--respiro);
  display: flex;
  align-items: center;
  gap: var(--e4);
  view-transition-name: topo;
  transition: background-color .3s var(--saida), box-shadow .3s var(--saida);
}

.topo--solido,
html.menu-aberto .topo {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 var(--linha), 0 10px 30px rgba(20, 51, 92, .06);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta);
  text-decoration: none;
  view-transition-name: marca;
}
.topo__marca .logo { width: 44px; }
.topo__nome {
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.1;
}
.topo__nome small {
  display: block;
  font-weight: 500;
  font-size: .8125rem;
  color: var(--tinta-suave);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
  margin-left: auto;
}
.nav a {
  position: relative;
  color: var(--tinta);
  font-weight: 600;
  font-size: .9844rem;
  text-decoration: none;
  padding: 6px 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--saida);
}
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

/* Duas portas num botão só: as duas metades da mesma empanada, com a
   costura no meio. Vale no topo e na barra do celular. */
.par {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border-radius: 999px;
  background: var(--sol);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(20, 51, 92, .08);
}
.par a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  min-height: 46px;
  color: var(--tinta);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--saida);
}
.par a:hover { background: var(--sol-forte); }
.par__costura {
  width: 12px;
  color: var(--tinta);
  opacity: .55;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M2 0c6 0 8 4 4 10' fill='none' stroke='%2314335c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center top / 12px 10px repeat-y;
}

/* Na home as duas portas já estão na tela: o botão duplo do topo só entra
   quando o visitante passa delas e o topo fica sólido. */
body:has(.portas) .topo:not(.topo--solido) .par {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.topo .par { transition: opacity .35s var(--saida), transform .35s var(--saida), visibility .35s; }

.topo__menu {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: 700 .9375rem/1 var(--f-texto);
  cursor: pointer;
}

/* --- Menu do celular ----------------------------------------------------- */

.gaveta {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  align-content: start;
  gap: var(--e1);
  padding: calc(var(--topo) + var(--e4)) var(--respiro) var(--e5);
  background: var(--branco);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .55s var(--saida), visibility 0s linear .55s;
}
html.menu-aberto .gaveta {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .55s var(--saida), visibility 0s;
}
.gaveta a:not(.botao) {
  font-family: var(--f-script);
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.15;
  color: var(--tinta);
  text-decoration: none;
}
.gaveta a[aria-current='page'] { color: var(--link); }
.gaveta .acoes { margin-top: var(--e3); }
.gaveta__rodape {
  margin-top: var(--e4);
  color: var(--tinta-suave);
  font-size: 1rem;
}

/* Barra de baixo no celular: as duas portas sempre à mão. */
.barra-portas {
  display: none;
  position: fixed;
  inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px;
  z-index: 50;
  transform: translateY(calc(100% + 24px));
  transition: transform .45s var(--saida);
}
.barra-portas.visivel { transform: none; }
.barra-portas .par {
  display: grid;
  width: 100%;
  box-shadow: 0 12px 30px rgba(20, 51, 92, .22);
}
.barra-portas .par a { min-height: 54px; font-size: 1rem; }

/* --- Abertura da home: as duas portas ------------------------------------ */

.portas {
  --esq: 1fr;
  --dir: 1fr;
  position: relative;
  display: grid;
  grid-template-columns: var(--esq) var(--dir);
  min-height: max(640px, 100svh);
  transition: grid-template-columns .8s var(--saida);
}
.portas:has(.porta--negocio:hover) { --esq: 1.14fr; --dir: .86fr; }
.portas:has(.porta--voce:hover) { --esq: .86fr; --dir: 1.14fr; }

/* O medalhão da casa pousa sobre a costura, no alto. É o h1 da home: o logo
   de uma cor só à vista, e o nome por extenso para leitor de tela e busca.
   Acompanha a costura quando uma porta alarga. */
.medalhao {
  position: absolute;
  z-index: 5;
  top: calc(var(--topo) + 14px);
  left: var(--corte, 50%);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0;
  border-radius: 50%;
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  color: var(--tinta);
  transition: left .8s var(--saida);
}
.medalhao .logo { width: 58px; }

/* Na home o medalhão já é a marca: o logo do topo só volta quando o topo
   fica sólido, depois das portas. */
.topo__marca { transition: opacity .35s var(--saida), visibility .35s; }
body:has(.portas) .topo:not(.topo--solido) .topo__marca { opacity: 0; visibility: hidden; }

.porta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--topo) + var(--e6)) clamp(24px, 4.5vw, 72px) var(--e5);
  overflow: hidden;
  isolation: isolate;
}
.porta--negocio { background: var(--lenco); view-transition-name: porta-negocio; }
.porta--voce { background: var(--branco); view-transition-name: porta-voce; }

.porta__texto { position: relative; z-index: 2; max-width: 30rem; }
.porta--voce .porta__texto { margin-left: auto; text-align: right; }
.porta--voce .acoes { justify-content: flex-end; }

.porta h2 { font-size: clamp(3rem, 4.9vw, 5.25rem); white-space: nowrap; }
.porta .status { font-size: .9375rem; }
.porta p { font-size: clamp(1.125rem, .5vw + 1rem, 1.3125rem); line-height: 1.5; }
.porta--negocio p { color: var(--tinta-lenco); }
.porta--voce p { color: var(--tinta-suave); margin-left: auto; }

.porta__quadro {
  position: relative;
  flex: 1;
  min-height: 260px;
  margin-top: var(--e3);
}

/* O leque de empanadas da porta do parceiro: a linha mostrando a borda. */
.leque img {
  position: absolute;
  width: var(--w, 34%);
  left: var(--x);
  top: var(--y);
  rotate: var(--r, 0deg);
  filter: var(--pouso);
  transition: translate .6s var(--mola), rotate .6s var(--mola);
}
.porta--negocio:hover .leque img { translate: 0 -8px; rotate: calc(var(--r, 0deg) * .5); }

.porta__aberta {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: min(92%, 560px);
  filter: var(--pouso);
  transition: translate .7s var(--mola), scale .7s var(--mola);
}
.porta--voce:hover .porta__aberta { translate: -12px -10px; scale: 1.03; }

/* A costura entre as portas: desenhada por JS na altura real; sem JS, cai
   no padrão repetido do CSS. */
/* A costura entre as portas. O JS desenha a trança na altura real e a curva
   na direção da porta que alarga; sem JS, cai no padrão repetido do CSS. A
   faixa tem 220px para a curva caber; o fio corre no meio. --corte é a
   divisa das portas, gravada pelo JS (sem JS, o meio). */
.costura {
  position: absolute;
  z-index: 4;
  top: calc(var(--topo) + 70px);   /* nasce do centro do medalhão */
  bottom: 0;
  left: var(--corte, 50%);
  width: 220px;
  margin-left: -110px;
  color: var(--tinta);
  pointer-events: none;
  view-transition-name: costura;
  transition: left .8s var(--saida);
}
.costura svg { width: 220px; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.costura .preenchimento { stroke: none; }
.costura--css {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M5 0C19 -1 24 12.6 16 26.6' fill='none' stroke='%2314335c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center top / 26px 14px repeat-y;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--e3);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--campo);
  color: var(--tinta);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
}
.status::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tinta-suave);
  flex: none;
}
.status[data-aberto='sim']::before {
  background: #2f9e62;
  box-shadow: 0 0 0 0 rgba(47, 158, 98, .45);
  animation: pulso 2.4s var(--saida) infinite;
}
.status:empty { display: none; }

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 98, .45); }
  70% { box-shadow: 0 0 0 9px rgba(47, 158, 98, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 158, 98, 0); }
}

.links-delivery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: var(--e3);
  font-size: .9375rem;
  color: var(--tinta-suave);
}
.porta--voce .links-delivery { justify-content: flex-end; }
.links-delivery a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
  font-weight: 600;
}

/* --- Imprensa ------------------------------------------------------------ */

.imprensa {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: var(--e4) var(--e5);
  align-items: end;
}
.imprensa blockquote { margin: 0; }
.imprensa blockquote p {
  max-width: 34ch;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.625rem, 2.4vw, 2.375rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.imprensa blockquote p::before { content: '\201C'; margin-left: -.42em; color: var(--link); }
.imprensa blockquote p::after { content: '\201D'; color: var(--link); }
.imprensa figcaption { color: var(--tinta-suave); font-size: 1rem; }
.imprensa figcaption strong { display: block; color: var(--tinta); font-size: 1.0625rem; }
.imprensa figcaption .seguir { margin-top: var(--e2); }

/* --- O código: a legenda dos repulgues ----------------------------------- */

.codigo { overflow: hidden; }

/* Por padrão a legenda rola de lado com o dedo, o trackpad ou o teclado.
   Quando o movimento está ligado no desktop, o GSAP prende a seção e faz a
   legenda correr com a rolagem da página (.codigo--preso). */
.trilho {
  display: flex;
  gap: var(--e3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--respiro);
  padding: var(--e1) var(--respiro) var(--e3);
  margin-inline: calc(var(--respiro) * -1);
}
.trilho .sabor { flex: none; scroll-snap-align: start; }
.codigo--preso .trilho { width: max-content; overflow: visible; scroll-snap-type: none; }

/* Cada sabor da legenda da home é um verbete, não um cartão: o glifo grande
   abre, a foto pousa solta no campo e uma trança corrida faz a linha de base
   onde os nomes se apoiam, como a legenda impressa na caixa de empanada. */
.sabor {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(272px, 24vw, 344px);
  padding: 0 var(--e1) var(--e2);
}
.sabor__glifo { color: var(--tinta); width: 132px; height: 88px; stroke-width: 2; }
/* Altura fixa para a foto: assim o nome dos sabores fica na mesma linha em
   todos os cartões de uma fileira, com foto alta ou baixa. */
.sabor__foto {
  flex: none;
  display: grid;
  place-items: center;
  height: 210px;
  /* respiro largo embaixo: a foto gira um pouco com a rolagem e não pode
     encostar na trança de base */
  margin: var(--e2) 0 var(--e4);
}
.sabor__glifo--vazio { display: block; height: 64px; }
.sabor__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--pouso);
  transition: transform .7s var(--mola);
}
.sabor:hover .sabor__foto img { transform: translateY(-8px) rotate(-3deg); }
.sabor__nome {
  position: relative;
  padding-top: calc(var(--e3) + 6px);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0;
}
/* O trecho de trança de cada verbete cobre o vão até o próximo, e a linha de
   base corre inteira pela legenda. */
.sabor__nome::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--e1) * -1);
  right: calc((var(--e1) + var(--e3)) * -1);
  height: 14px;
  background: var(--tranca-x) left center / 14px 14px repeat-x;
}
.sabor__borda {
  margin: 4px 0 var(--e1);
  color: var(--link);
  font-weight: 600;
  font-size: .9375rem;
}
.sabor__ing { margin: 0; color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }

.codigo__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: var(--e4);
}
.codigo__dica { color: var(--tinta-suave); font-size: .9375rem; margin: 0; }

/* --- Do forno ao balcão -------------------------------------------------- */

.caminho {
  position: relative;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
  margin-top: var(--e5);
  counter-reset: passo;
}
.caminho::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 6%;
  right: 6%;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M0 9c-1-6 12.6-11 14 -2' fill='none' stroke='%2314335c' stroke-width='1.6' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") left center / 14px 14px repeat-x;
  transform-origin: left;
  transform: scaleX(var(--trajeto, 1));
}
.passo { position: relative; }
.passo__marca {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: var(--e3);
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra);
}
.passo__marca img { width: 86px; filter: drop-shadow(0 6px 8px rgba(20, 51, 92, .18)); }
.passo p { color: var(--tinta-lenco); max-width: 32ch; }

.viajante {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 0;
  width: 92px;
  filter: var(--pouso);
  pointer-events: none;
  display: none;
}

/* --- Loja ---------------------------------------------------------------- */

.loja {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: center;
}
.loja__foto { position: relative; }
.loja__foto .moldura {
  overflow: hidden;
  border-radius: var(--raio-foto);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-alta);
}
.loja__foto img { width: 100%; height: 100%; object-fit: cover; }
.credito {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: .8125rem;
  line-height: 1.4;
}
.credito a { color: inherit; }

.horario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: var(--e4) 0 0;
  max-width: 28rem;
  font-variant-numeric: tabular-nums;
}
.horario dt, .horario dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}
.horario dt { font-weight: 700; }
.horario dd { padding-left: var(--e3); text-align: right; color: var(--tinta-suave); }
.horario .hoje { color: var(--tinta); }
.horario dd.hoje { font-weight: 700; }
.horario dt.hoje::after {
  content: 'hoje';
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--masa);
  font-size: .75rem;
  font-weight: 700;
  vertical-align: 2px;
}

.endereco {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--e3);
  font-weight: 600;
}
.endereco .ico { margin-top: 3px; color: var(--link); }

.tambem {
  margin-top: var(--e3);
  color: var(--tinta-suave);
  font-size: 1rem;
}

/* --- Encomendas ---------------------------------------------------------- */

.encomenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--e5);
  align-items: center;
}
.encomenda__foto img { width: 100%; filter: var(--pouso); }

/* --- História ------------------------------------------------------------ */

.historia {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--e5);
  align-items: center;
}
.historia__marca { color: var(--tinta); width: min(100%, 300px); justify-self: center; }

/* --- Rodapé -------------------------------------------------------------- */

.rodape {
  background: var(--ceu-fundo);
  padding-bottom: var(--e5);
}
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--e4);
}
.rodape .logo { width: 108px; color: var(--tinta); margin-bottom: var(--e2); }
.rodape h3 { font-size: 1rem; margin-bottom: var(--e2); }
.rodape p, .rodape li { font-size: 1rem; color: var(--tinta-suave); }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: var(--tinta); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid var(--lenco-forte);
  color: var(--tinta-suave);
  font-size: .8125rem;
}
.rodape__fim p { margin: 0; max-width: none; }
.redes { display: flex; gap: 10px; margin-top: var(--e2); }
.redes a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--lenco-forte);
  transition: background-color .2s var(--saida), border-color .2s var(--saida);
}
.redes a:hover { background: var(--branco); border-color: var(--tinta); }

/* --- Abertura das páginas internas --------------------------------------- */

.abertura {
  position: relative;
  padding: calc(var(--topo) + var(--e6)) var(--respiro) var(--e6);
  overflow: hidden;
}
.abertura--lenco { background: var(--lenco); view-transition-name: porta-negocio; }
.abertura--branca { background: var(--branco); view-transition-name: porta-voce; }
.abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--e5);
  align-items: center;
}
.abertura--lenco p.lead { color: var(--tinta-lenco); }
.abertura__visual { position: relative; min-height: 360px; }
.abertura__visual img { filter: var(--pouso); }

/* --- Cardápio ------------------------------------------------------------ */

/* O cardápio é a legenda dos repulgues, como a que vem impressa na caixa de
   empanada: o glifo diz como reconhecer o sabor. No desktop a legenda é o
   índice e o sabor escolhido sobe para o palco ao lado; no celular, cada
   linha abre no próprio lugar. Sem JS, todas as linhas aparecem abertas. */
.legenda2 {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--e5);
  align-items: start;
}
.legenda2__grupo {
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: var(--e5) 0 var(--e2);
}
.legenda2__grupo:first-child { margin-top: 0; }
.legenda2__itens { list-style: none; margin: 0; padding: 0; }

.linha { border-bottom: 1px solid var(--linha); }
.linha:first-child { border-top: 1px solid var(--linha); }
.linha__cabeca {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: 'glifo nome' 'glifo borda';
  column-gap: var(--e2);
  align-items: center;
  width: 100%;
  margin: 4px 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--saida);
}
.linha__cabeca .glifo { grid-area: glifo; width: 58px; height: 39px; }
.linha__nome { grid-area: nome; font-weight: 800; font-size: 1.125rem; line-height: 1.2; }
.linha__borda { grid-area: borda; color: var(--link); font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.linha--sem-foto .linha__borda { color: var(--tinta-suave); font-weight: 500; }
.linha__cabeca:hover,
.linha__cabeca[aria-expanded='true'] { background: var(--campo); }
.linha__cabeca[aria-expanded='true'] .linha__nome { color: var(--tinta); }

.linha__corpo { padding: 0 12px var(--e3) 92px; }
.linha__corpo img { width: min(100%, 360px); filter: var(--pouso); margin-bottom: var(--e1); }
.linha__corpo p { margin: 0; color: var(--tinta-suave); }
.legenda2--viva .linha__corpo[hidden] { display: none; }

/* Sabor sem repulgue documentado: o glifo é só o contorno, tracejado. */
.glifo--tracejado { stroke-dasharray: .035 .028; color: var(--tinta-suave); }

.palco { display: none; }
.legenda2--viva .palco {
  display: block;
  position: sticky;
  top: calc(var(--topo) + var(--e3));
  min-height: 560px;
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--campo);
}
.palco__glifo { width: 132px; height: 88px; color: var(--tinta); stroke-width: 2.2; }
.palco__quadro {
  display: grid;
  place-items: center;
  height: 290px;
  margin: var(--e2) 0 var(--e3);
}
.palco__quadro img { width: 100%; height: 100%; object-fit: contain; filter: var(--pouso); }
.palco__quadro .glifo { width: min(78%, 360px); height: auto; aspect-ratio: 3 / 2; stroke-width: 1.4; color: var(--lenco-forte); }
.palco__nome { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.5rem, 3.6vw, 3.5rem); line-height: 1.05; margin: 0; }
.palco__borda { margin: 6px 0 var(--e2); color: var(--link); font-weight: 700; }
.palco__ing { color: var(--tinta-suave); }
.palco .acoes { margin-top: var(--e3); }

@media (min-width: 900px) {
  .legenda2--viva .linha__corpo { display: none !important; }
}
@media (max-width: 899px) {
  .legenda2 { grid-template-columns: minmax(0, 1fr); }
  .legenda2--viva .palco { display: none; }
  .linha__corpo { padding-left: 12px; }
}

/* --- Parceiros: argumentos, seleção, formulário, perguntas ---------------- */

.motivos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--e5);
}
/* Cada argumento começa num trecho de trança: o repulgue no papel de fio
   divisor. Glifo de sabor aqui não entra: um glifo é um recheio. */
.motivo {
  padding: calc(var(--e3) + 14px) 0 var(--e4);
  background: var(--tranca-x) left top / 14px 14px repeat-x;
}
.motivo p { margin: 0; color: var(--tinta-lenco); }

.escolha {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}

.opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.opcoes legend { margin-bottom: var(--e2); font-weight: 700; padding: 0; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao label {
  display: grid;
  justify-items: start;
  gap: 6px;
  height: 100%;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1.5px solid var(--linha);
  background: var(--branco);
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  transition: border-color .2s var(--saida), background-color .2s var(--saida), transform .35s var(--mola);
}
.opcao label:hover { border-color: var(--tinta); transform: translateY(-2px); }
.opcao input:focus-visible + label { outline: 2px solid var(--tinta); outline-offset: 3px; }
.opcao input:checked + label { background: var(--masa); border-color: var(--tinta); }
.opcao label .marcado {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--branco);
  transform: scale(0);
  transition: transform .35s var(--mola);
}
.opcao label .marcado .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.opcao input:checked + label .marcado { transform: scale(1); }

.ficha {
  position: sticky;
  top: calc(var(--topo) + var(--e3));
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
.ficha h3 { font-size: 1.5rem; }
.selecionados {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  margin: var(--e2) 0 var(--e3);
  padding: 0;
  list-style: none;
}
.selecionados li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--masa);
  font-size: .875rem;
  font-weight: 600;
}
.selecionados li.vazio { background: none; padding-left: 0; color: var(--tinta-suave); font-weight: 400; }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.campo { display: grid; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-weight: 700; font-size: .9375rem; }
.campo label span { font-weight: 400; color: var(--tinta-suave); }
.entrada {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-foto);
  background: var(--branco);
  color: var(--tinta);
  font: 400 1rem/1.4 var(--f-texto);
  transition: border-color .2s var(--saida), box-shadow .2s var(--saida);
}
.entrada::placeholder { color: var(--tinta-suave); opacity: .9; }
.entrada:hover { border-color: var(--lenco-forte); }
.entrada:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(169, 200, 232, .55); }
.entrada[aria-invalid='true'] { border-color: #b4462f; }
select.entrada {
  appearance: none;
  padding-right: 42px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314335c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 14px 9px no-repeat;
  cursor: pointer;
}
textarea.entrada { min-height: 96px; resize: vertical; }

.aviso {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--raio-foto);
  background: #fdf0ec;
  color: #8a3320;
  font-size: .9375rem;
}
.aviso[hidden] { display: none; }
.aviso--ok { background: #eaf6ef; color: #1d6b41; }

.ficha .botao { width: 100%; margin-top: var(--e3); }
.ficha__nota { margin: var(--e2) 0 0; font-size: .875rem; color: var(--tinta-suave); }

.perguntas { display: grid; gap: 0; max-width: 56rem; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: clamp(1.125rem, .4vw + 1rem, 1.3125rem);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary .ico { transition: transform .4s var(--mola); color: var(--link); }
.pergunta[open] summary .ico { transform: rotate(45deg); }
.pergunta p { padding-bottom: var(--e3); color: var(--tinta-suave); }


/* Sobre o azul do lenço, o texto de apoio usa a tinta do lenço (6:1); o
   cinza-azulado de apoio cai para 3,5:1 ali. */
.faixa--lenco :is(.apoio, .canal p, .credito, .motivo p) { color: var(--tinta-lenco); }

.abertura--campo { background: var(--campo); }

.canal .seguir { margin-top: var(--e1); }


/* --- Contato ------------------------------------------------------------- */

.mapa {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--raio-foto);
  background: var(--campo);
  box-shadow: var(--sombra);
}

.canais {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e4);
}
.canal {
  padding-top: calc(var(--e3) + 14px);
  background: var(--tranca-x) left top / 14px 14px repeat-x;
}
.canal h3 { display: flex; align-items: center; gap: 10px; }
.canal .ico { width: 24px; height: 24px; color: var(--link); }
.canal p { color: var(--tinta-suave); font-size: 1rem; }

.noite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: center;
}
.noite .moldura { overflow: hidden; border-radius: var(--raio-foto); box-shadow: var(--sombra-alta); }

/* --- Fecho com as duas portas -------------------------------------------- */

.fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.fecho > div { padding: clamp(32px, 5vw, 64px); }
.fecho__negocio { background: var(--lenco); }
.fecho__voce { background: var(--branco); }
.fecho h2 { font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
.fecho p { color: var(--tinta-suave); }
.fecho__negocio p { color: var(--tinta-lenco); }

/* --- Transição entre páginas --------------------------------------------- */

/* A troca de página usa a View Transitions entre documentos: a porta que o
   visitante escolheu vira a abertura da página nova, e o resto da página
   sobe como massa saindo da mesa. Navegador sem suporte troca normal. */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: .35s cubic-bezier(.4, 0, 1, 1) both sair; }
::view-transition-new(root) { animation: .6s cubic-bezier(.16, 1, .3, 1) .12s both entrar; }
::view-transition-old(porta-negocio),
::view-transition-new(porta-negocio),
::view-transition-old(porta-voce),
::view-transition-new(porta-voce) { height: 100%; object-fit: cover; object-position: top; }

@keyframes sair { to { opacity: 0; transform: translateY(-24px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(40px); } }

/* A empanada se abre. Quando a página nova não tem a porta (ou a costura),
   a porta antiga sai pelo lado dela e a costura se desfaz de baixo para
   cima, como a borda sendo aberta; na volta para a home, as portas entram
   de lado e a costura se faz de novo. A porta escolhida não sai: ela vira a
   abertura da página nova (as regras acima). */
::view-transition-old(porta-negocio):only-child { animation: .7s cubic-bezier(.65, 0, .35, 1) both porta-sai-esq; }
::view-transition-old(porta-voce):only-child { animation: .7s cubic-bezier(.65, 0, .35, 1) both porta-sai-dir; }
::view-transition-new(porta-negocio):only-child { animation: .85s cubic-bezier(.16, 1, .3, 1) both porta-entra-esq; }
::view-transition-new(porta-voce):only-child { animation: .85s cubic-bezier(.16, 1, .3, 1) both porta-entra-dir; }
::view-transition-old(costura) { animation: .5s cubic-bezier(.4, 0, 1, 1) both costura-desfaz; }
::view-transition-new(costura) { animation: 1.1s cubic-bezier(.16, 1, .3, 1) .2s both costura-faz; }

@keyframes porta-sai-esq { to { transform: translateX(-102%); } }
@keyframes porta-sai-dir { to { transform: translateX(102%); } }
@keyframes porta-entra-esq { from { transform: translateX(-102%); } }
@keyframes porta-entra-dir { from { transform: translateX(102%); } }
@keyframes costura-desfaz { to { clip-path: inset(0 0 100% 0); } }
@keyframes costura-faz { from { clip-path: inset(0 0 100% 0); } }

/* --- Movimento: estados iniciais --------------------------------------- */

/* Sem JS, tudo aparece. O <head> marca <html class="anima"> quando o sistema
   aceita movimento, e só a abertura fica recolhida até o movimento.js gravar
   o estado de partida (ou até o próprio <head> liberar, se ele não carregar).
   Os glifos só esperam para se desenhar quando a animação está rodando. */
.anima:not(.anima-pronta) :is(.medalhao, .leque, .porta__aberta, .costura, .abertura__visual) { opacity: 0; }
.movimento-ativo .desenha .glifo:not(.glifo--tracejado) { --desenho: 1; }

/* Legenda presa na tela enquanto corre de lado: tudo precisa caber numa
   altura de tela, então a faixa encolhe o respiro e os cartões. */
.codigo--preso {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(40px, 6vh, 72px);
}
.codigo--preso .cabeca { margin-bottom: clamp(24px, 4vh, 48px); }
.codigo--preso .sabor__foto { height: min(210px, 24vh); }

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

/* --- Telas médias -------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav { display: none; }
  .topo .par { margin-left: auto; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Celular e tablet em pé ---------------------------------------------- */

@media (max-width: 860px) {
  :root { --topo: 64px; --raio: 18px; }

  .topo { gap: var(--e2); }
  .topo .par { display: none; }
  .topo__menu { display: inline-flex; }
  .topo__nome small { display: none; }
  .topo__marca .logo { width: 36px; }

  .barra-portas { display: block; }

  .faixa { padding-block: var(--e5); }
  .franzida { padding-top: calc(var(--e5) + 12px); }

  .cabeca,
  .imprensa,
  .loja,
  .encomenda,
  .historia,
  .abertura__grade,
  .escolha,
  .noite,
  .fecho { grid-template-columns: minmax(0, 1fr); }
  .cabeca { margin-bottom: var(--e4); }

  /* As duas portas cabem juntas na primeira tela, uma sobre a outra, com a
     mesma área visível cada uma (a de cima desconta o topo). A costura
     deita entre elas e o medalhão pousa nela, do lado das fotos. */
  .portas { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .portas:has(.porta:hover) { --esq: 1fr; --dir: 1fr; }
  .porta {
    justify-content: center;
    min-height: calc(50svh - var(--topo) / 2);
    padding: 18px var(--respiro);
  }
  .porta--negocio { min-height: calc(50svh + var(--topo) / 2); padding-top: calc(var(--topo) + 14px); }
  .porta--voce::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: var(--tranca-x) left center / 14px 14px repeat-x;
  }
  .porta__texto { max-width: none; }
  .porta__texto > :is(h2, p:not(.status)) { max-width: 64%; }
  .porta--voce .porta__texto { margin-left: 0; text-align: left; }
  .porta--voce .acoes,
  .porta--voce .links-delivery { justify-content: flex-start; }
  .porta--voce p { margin-left: 0; }
  .porta h2 { font-size: 2.35rem; white-space: normal; }
  .porta p { font-size: .9688rem; line-height: 1.45; }
  .porta h2 + p { margin-top: 10px; }
  .porta .acoes { margin-top: 14px; }
  .porta .seguir { display: none; }
  .porta .links-delivery { margin-top: 10px; gap: 4px 12px; font-size: .8125rem; }
  .porta .status { margin-top: 10px; padding: 5px 12px 5px 10px; font-size: .8125rem; }
  .porta .botao { --botao-px: 18px; width: auto; min-height: 46px; padding-block: 11px; font-size: .9375rem; }
  .porta__quadro {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 4%;
    width: 48%;
    height: 62%;
    min-height: 0;
    margin: 0;
    flex: none;
  }
  /* No celular cada porta mostra uma empanada só, do mesmo tamanho: a inteira
     com trança no parceiro, a partida com recheio no consumidor. */
  .porta .leque img { display: none; }
  .porta .leque img:last-child {
    display: block;
    left: auto;
    top: auto;
    right: 0;
    bottom: 22%;
    width: 100%;
  }
  .porta__aberta { right: 0; bottom: 10%; width: 112%; }
  .costura { display: none; }
  .medalhao {
    top: calc(50svh + var(--topo) / 2);
    left: auto;
    right: 14px;
    translate: 0 -50%;
    width: 74px;
    height: 74px;
  }
  .medalhao .logo { width: 40px; }

  .trilho { scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }

  .caminho { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .caminho::before { display: none; }
  .passo { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e3); align-items: start; }
  .passo__marca { width: 84px; height: 84px; margin: 0; grid-row: span 2; }
  .passo__marca img { width: 66px; }

  .motivos { grid-template-columns: minmax(0, 1fr); }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .ficha { position: static; padding: var(--e3); }
  .historia__marca { width: 180px; justify-self: start; }
  .loja__foto .moldura { aspect-ratio: 4 / 3; }
  .abertura { padding-bottom: var(--e5); }
  .abertura__visual { min-height: 260px; }
  .rodape { padding-bottom: calc(var(--e5) + 84px); }
}

@media (max-width: 520px) {
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .canais { grid-template-columns: minmax(0, 1fr); }
  .botao { width: 100%; }
  .acoes .seguir { margin-inline: auto; }
}