/* ==========================================================================
   HAPPY SUMO — Restaurante Japonês, Estrada de Santa Eulália, Albufeira
   Desenho: «A roda do sumo». Preto do letreiro, vermelho do SUMO, amarelo do
   happy. O ornamento da casa é o símbolo desenhado para ela (§7.6-B do
   contrato): a roda do lutador, o mar em três ondas e a peça de sushi.
   ========================================================================== */

:root {
  --tinta: #141416;
  --tinta-2: #1e1e21;
  --tinta-3: #2a2a2e;
  --sumo: #d42a3f;
  --sumo-escuro: #a81d30;
  --happy: #e4c65f;
  --papel: #f7f2e7;
  --papel-2: #efe7d7;
  --pedra: #b9b4a8;
  --linha: rgba(20, 20, 22, .16);
  --linha-clara: rgba(247, 242, 231, .18);
  --sombra: 0 18px 50px -22px rgba(20, 20, 22, .55);
  --serifa: "Marcellus", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --simbolo: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2064%22%20fill=%22none%22%20aria-hidden=%22true%22%3E%3C%21--%20a%20roda%20do%20sumo,%20a%20mesma%20do%20selo%20da%20casa%20--%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%2229.2%22%20stroke=%22#fff%22%20stroke-width=%221.5%22/%3E%3Ccircle%20cx=%2232%22%20cy=%2232%22%20r=%2224.4%22%20stroke=%22#fff%22%20stroke-width=%220.9%22%20opacity=%22.45%22/%3E%3C%21--%20ondas:%20o%20alto%20mar%20--%3E%3Cpath%20d=%22M12%2030.5c3.4-3.2%206.6-3.2%2010%200s6.6%203.2%2010%200%206.6-3.2%2010%200%206.6%203.2%2010%200%22%20stroke=%22#fff%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M12%2038.6c3.4-3.2%206.6-3.2%2010%200s6.6%203.2%2010%200%206.6-3.2%2010%200%206.6%203.2%2010%200%22%20stroke=%22#fff%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M14.5%2046.4c3-2.7%205.8-2.7%208.8%200s5.8%202.7%208.8%200%205.8-2.7%208.8%200%205.8%202.7%208.8%200%22%20stroke=%22#fff%22%20stroke-width=%221.3%22%20stroke-linecap=%22round%22%20opacity=%22.7%22/%3E%3C%21--%20a%20pe%C3%A7a%20de%20sushi:%20arroz%20em%20baixo,%20peixe%20em%20cima%20--%3E%3Cpath%20d=%22M22.4%2020.6h19.2c1.5%200%202.6%201.2%202.6%202.7v2.3c0%201.5-1.1%202.7-2.6%202.7H22.4c-1.5%200-2.6-1.2-2.6-2.7v-2.3c0-1.5%201.1-2.7%202.6-2.7Z%22%20stroke=%22#fff%22%20stroke-width=%221.5%22/%3E%3Cpath%20d=%22M20.6%2018.4c1.6-2.4%204.3-3.8%2011.4-3.8s9.8%201.4%2011.4%203.8%22%20stroke=%22#fff%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M29.6%2018.9v4.6M34.4%2018.9v4.6%22%20stroke=%22#fff%22%20stroke-width=%220.85%22%20opacity=%22.55%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.62 var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serifa); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--sumo); color: #fff; padding: .7rem 1.1rem; border-radius: 3px;
  font: 600 .95rem/1 var(--sans); text-decoration: none; transition: top .18s ease;
}
.saltar:focus-visible { top: 12px; }

.envol { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ------------------------------- ornamento -------------------------------- */
/* O símbolo é do negócio: roda do sumo, ondas e peça de sushi. Por máscara,
   para herdar a cor do texto e deixar passar o fundo (§7.6-B, ponto 5). */
.orn {
  display: inline-block; flex: none;
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--simbolo) center / contain no-repeat;
  mask: var(--simbolo) center / contain no-repeat;
  vertical-align: -.16em;
}
@media (max-width: 650px) { .orn { width: 18px; height: 18px; } }

/* --------------------------------- cabeçalho ------------------------------ */
.cab {
  position: fixed; inset: 0 0 auto; z-index: 900;
  padding: .55rem 0;
  background: rgba(20, 20, 22, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--linha-clara);
  color: var(--papel);
}
.cab__linha { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); min-height: 48px; }

.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; min-height: 44px; padding-block: .2rem; }
.marca__sinal { color: var(--papel); display: block; }
.marca__sinal svg { display: block; }
.marca__nome { display: flex; flex-direction: column; line-height: 1; }
.marca__principal { font-family: var(--serifa); font-size: clamp(1.12rem, 2.4vw, 1.42rem); letter-spacing: .01em; }
.marca__principal b { color: var(--sumo); font-weight: 400; }
.marca__assinatura { font: 500 .56rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(247,242,231,.62); margin-top: .32rem; }

.cab__nav { display: flex; gap: clamp(12px, 1.7vw, 24px); }
.cab__nav a {
  text-decoration: none; font: 500 .84rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(247,242,231,.82); padding: .55rem 0; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s;
}
.cab__nav a:hover, .cab__nav a:focus-visible { color: #fff; border-bottom-color: var(--sumo); }

.cab__acao {
  text-decoration: none; font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .72rem 1.05rem; border: 1px solid rgba(212,42,63,.7); border-radius: 2px;
  color: #fff; background: var(--sumo); transition: background .18s, border-color .18s;
}
.cab__acao:hover, .cab__acao:focus-visible { background: var(--sumo-escuro); border-color: var(--sumo-escuro); }

.idioma {
  text-decoration: none; font: 600 .76rem/1 var(--sans); letter-spacing: .14em;
  border: 1px solid var(--linha-clara); padding: .6rem .62rem; border-radius: 2px; color: rgba(247,242,231,.85);
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
}
.idioma:hover, .idioma:focus-visible { border-color: var(--happy); color: #fff; }

.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linha-clara);
  background: transparent; border-radius: 2px; cursor: pointer;
}
.menu-btn__linhas, .menu-btn__linhas::before, .menu-btn__linhas::after {
  display: block; width: 18px; height: 1.5px; background: var(--papel); margin: 0 auto; position: relative;
}
.menu-btn__linhas::before, .menu-btn__linhas::after { content: ""; position: absolute; left: 0; }
.menu-btn__linhas::before { top: -6px; }
.menu-btn__linhas::after { top: 6px; }

.gaveta { display: none; }

@media (max-width: 900px) {
  .cab__nav, .cab__acao { display: none; }
  .menu-btn { display: block; }
  .gaveta {
    position: fixed; inset: 60px 0 auto; z-index: 899;
    background: var(--tinta-2); border-bottom: 1px solid var(--linha-clara);
    display: none; padding: .4rem 0 1.1rem;
  }
  [data-menu="aberto"] .gaveta { display: block; }
  .gaveta nav { display: flex; flex-direction: column; }
  .gaveta a {
    text-decoration: none; font: 500 .95rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
    color: var(--papel); padding: 1rem clamp(18px, 4vw, 40px); border-top: 1px solid rgba(247,242,231,.09);
  }
  .gaveta a:first-child { border-top: 0; }
  .gaveta__acao { color: var(--happy) !important; }
}

/* ---------------------------------- herói --------------------------------- */
.heroi {
  position: relative; background: var(--tinta); color: var(--papel);
  padding: clamp(84px, 11vw, 128px) 0 0; overflow: hidden;
}
.heroi::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(212,42,63,.20), transparent 58%),
    radial-gradient(90% 70% at 92% 8%, rgba(228,198,95,.12), transparent 62%);
  pointer-events: none;
}
.heroi__grade {
  position: relative; display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center; padding-bottom: clamp(40px, 6vw, 72px);
}
.heroi__selo {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 500 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--happy); border: 1px solid rgba(228,198,95,.4); border-radius: 2px; padding: .5rem .8rem;
}
.heroi h1 {
  font-size: clamp(2.35rem, 6.1vw, 4.15rem); margin: 1.05rem 0 0; letter-spacing: -.005em;
}
.heroi h1 em { font-style: normal; color: var(--sumo); }
.heroi__sub {
  margin-top: 1.05rem; max-width: 46ch; color: rgba(247,242,231,.8); font-size: clamp(1rem, 1.35vw, 1.1rem);
}
.heroi__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.botao {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font: 600 .84rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.25rem; border-radius: 2px; border: 1px solid transparent; transition: background .18s, border-color .18s, color .18s;
}
.botao--cheio { background: var(--sumo); color: #fff; }
.botao--cheio:hover, .botao--cheio:focus-visible { background: var(--sumo-escuro); }
.botao--vazio { border-color: rgba(247,242,231,.32); color: var(--papel); }
.botao--vazio:hover, .botao--vazio:focus-visible { border-color: var(--happy); color: #fff; }

.heroi__prova { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.15rem; margin-top: 1.6rem; font-size: .88rem; color: rgba(247,242,231,.72); }
.heroi__prova b { color: var(--papel); font-weight: 600; }
.heroi__nota { display: inline-flex; align-items: center; gap: .42rem; text-decoration: none; color: inherit; }
.estrelas { color: var(--happy); letter-spacing: .06em; font-size: .95rem; }

.heroi__fotos { position: relative; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.heroi__fotos figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: var(--tinta-3); }
.heroi__fotos img { width: 100%; height: 100%; object-fit: cover; }
.heroi__fotos .f1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.heroi__fotos .f2, .heroi__fotos .f3 { aspect-ratio: 4 / 3; }
.heroi__fotos figcaption {
  position: absolute; inset: auto 0 0; padding: .5rem .65rem;
  font: 500 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(247,242,231,.9); background: linear-gradient(to top, rgba(20,20,22,.82), transparent);
}

/* faixa de palavras da casa */
.faixa {
  position: relative; background: var(--sumo); color: #fff; overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18);
}
.faixa__linha {
  display: flex; width: max-content; align-items: center; gap: 1.05rem;
  padding: .72rem 0; animation: correr 42s linear infinite;
}
.faixa__linha span {
  display: inline-flex; align-items: center; gap: 1.05rem;
  font: 500 .82rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
}
.faixa__linha .orn { width: 20px; height: 20px; color: rgba(255,255,255,.92); }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .faixa__linha { animation: none; } }

/* --------------------------------- secções -------------------------------- */
.secao { padding: clamp(58px, 8vw, 104px) 0; }
.secao--papel { background: var(--papel); }
.secao--escura { background: var(--tinta-2); color: var(--papel); }
.secao--pedra { background: var(--papel-2); }

.rotulo {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .72rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--sumo);
}
.secao--escura .rotulo { color: var(--happy); }
.rotulo .orn { width: 18px; height: 18px; }

.titulo { font-size: clamp(1.9rem, 4.1vw, 3rem); margin: .85rem 0 0; }
.secao__cabeca { max-width: 62ch; }
.secao__cabeca p { margin-top: .95rem; color: rgba(20,20,22,.74); }
.secao--escura .secao__cabeca p { color: rgba(247,242,231,.76); }

/* a casa */
.casa__grade { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; margin-top: clamp(28px, 4vw, 46px); }
.casa__fotos { display: grid; gap: 10px; grid-template-columns: 1.25fr .75fr; }
.casa__fotos img { border-radius: 2px; width: 100%; height: 100%; object-fit: cover; }
.casa__fotos figure { margin: 0; }
.casa__fotos .alta { aspect-ratio: 3 / 4; }
.casa__fotos .baixa { aspect-ratio: 3 / 4; align-self: end; }
.casa__texto p + p { margin-top: 1rem; }
.casa__texto p { color: rgba(20,20,22,.78); }
.casa__lista { margin-top: 1.5rem; display: grid; gap: .62rem; }
.casa__lista li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: rgba(20,20,22,.82); }
.casa__lista .orn { width: 18px; height: 18px; color: var(--sumo); margin-top: .3rem; }

/* rodízio — três passos */
.rodizio__passos { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: clamp(30px, 4vw, 48px); }
.passo { border: 1px solid var(--linha-clara); border-radius: 2px; padding: clamp(20px, 2.6vw, 30px); background: rgba(247,242,231,.03); }
.passo__num { font-family: var(--serifa); font-size: 1.6rem; color: var(--sumo); line-height: 1; }
.passo h3 { font-size: 1.22rem; margin: .7rem 0 .5rem; }
.passo p { font-size: .93rem; color: rgba(247,242,231,.72); }

/* carta */
.carta__grupos { display: grid; gap: clamp(26px, 3.4vw, 44px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(30px, 4vw, 48px); align-items: start; }
.grupo { border-top: 2px solid var(--tinta); padding-top: 1.1rem; }
.grupo__titulo { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.grupo__titulo .orn { width: 20px; height: 20px; color: var(--sumo); }
.grupo__itens { margin-top: 1.1rem; display: grid; gap: .95rem; }
.item { display: grid; gap: .18rem; }
.item__nome { font: 500 1.02rem/1.32 var(--sans); letter-spacing: .005em; }
.item__det { font-size: .88rem; color: rgba(20,20,22,.66); }
.grupo--largo { grid-column: 1 / -1; }
.grupo--largo .grupo__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; }
.nota-carta {
  margin-top: 1.6rem; padding: 1rem 1.15rem; border-left: 2px solid var(--sumo);
  background: rgba(212,42,63,.05); font-size: .9rem; color: rgba(20,20,22,.74);
}
.nota-carta .orn { width: 18px; height: 18px; color: var(--sumo); margin-right: .45rem; }

/* opiniões */
.opinioes__grade { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: clamp(30px, 4vw, 48px); }
.opiniao { border: 1px solid var(--linha-clara); border-radius: 2px; padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: .7rem; background: rgba(247,242,231,.03); }
.opiniao__nota { color: var(--happy); font-size: .92rem; letter-spacing: .08em; }
.opiniao p { font-size: .95rem; color: rgba(247,242,231,.85); }
.opiniao__autor { margin-top: auto; font: 500 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(247,242,231,.5); }

/* visita */
.visita__grade { display: grid; gap: clamp(24px, 3.6vw, 48px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); margin-top: clamp(28px, 4vw, 46px); }
.visita__foto { margin: 0; position: relative; }
.visita__foto img { border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.visita__foto figcaption { margin-top: .6rem; font: 500 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(20,20,22,.55); }
.dados { display: grid; gap: 1.35rem; }
.dado h3 { display: flex; align-items: center; gap: .5rem; font: 600 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--sumo); }
.dado h3 .orn { width: 16px; height: 16px; }
.dado p, .dado address { margin-top: .45rem; font-style: normal; font-size: 1rem; color: rgba(20,20,22,.82); }
.dado a { text-decoration: none; border-bottom: 1px solid rgba(20,20,22,.25); }
.dado a:hover, .dado a:focus-visible { border-bottom-color: var(--sumo); }
.horario-lista { margin-top: .5rem; display: grid; gap: .28rem; font-size: .95rem; }
.horario-lista li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--linha); padding-bottom: .28rem; color: rgba(20,20,22,.78); }
.horario-lista b { font-weight: 600; color: var(--tinta); }
.visita__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.visita .botao--vazio { border-color: rgba(20,20,22,.28); color: var(--tinta); }
.visita .botao--vazio:hover, .visita .botao--vazio:focus-visible { border-color: var(--sumo); color: var(--sumo-escuro); }

/* rodapé */
.rodape { background: var(--tinta); color: rgba(247,242,231,.7); padding: clamp(44px, 6vw, 70px) 0 0; }
.rodape__grade { display: grid; gap: clamp(24px, 3vw, 42px); grid-template-columns: 1.4fr 1fr 1fr; }
.rodape__marca { display: flex; align-items: center; gap: .6rem; color: var(--papel); }
.rodape__marca svg { display: block; }
.rodape__marca .marca__assinatura { color: rgba(247,242,231,.55); }
.rodape p { margin-top: .9rem; font-size: .92rem; max-width: 34ch; }
.rodape h3 { font: 600 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--happy); }
.rodape ul { margin-top: .85rem; display: grid; gap: .5rem; font-size: .93rem; }
.rodape a { text-decoration: none; color: rgba(247,242,231,.78); }
.rodape a:hover, .rodape a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__base {
  margin-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--linha-clara);
  padding: 1.1rem 0 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .8rem; color: rgba(247,242,231,.5);
}

/* -------------------------------- telemóvel -------------------------------- */
@media (max-width: 980px) {
  .heroi__grade { grid-template-columns: 1fr; }
  .heroi__fotos .f1 { aspect-ratio: 16 / 9; }
  .casa__grade, .visita__grade { grid-template-columns: 1fr; }
  .rodizio__passos { grid-template-columns: 1fr; }
  .opinioes__grade { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .grupo--largo .grupo__itens { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .carta__grupos { grid-template-columns: 1fr; }
  .opinioes__grade { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; }
  .casa__fotos { grid-template-columns: 1fr 1fr; }
  .heroi__acoes .botao { flex: 1 1 auto; justify-content: center; }
  .horario-lista li { font-size: .92rem; }
}

@media print {
  .cab, .gaveta, .faixa, .tarja, .heroi__acoes { display: none !important; }
  body { background: #fff; color: #000; }
}