/* Degustação de sakes · Kaizen
   Página lida no celular, na mesa, pelo QR. Escuro e quente, dourado como acento. */

:root {
  --laca: #15120f;        /* fundo: preto de laca, quente */
  --laca-2: #1f1a15;      /* blocos levemente levantados */
  --arroz: #f2e9d8;       /* texto principal: papel de arroz */
  --areia: #b9a88c;       /* texto de apoio */
  --ouro: #c9a24e;        /* acento */
  --ouro-escuro: #8f7030; /* linhas, números */
  --tinta: #1a1510;       /* texto sobre fundo claro */

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;

  --gutter: 20px;
  --medida: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--laca);
  color: var(--arroz);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; }
p { margin: 0; }

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

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

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

.topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 0;
}

.topo__logo { width: 112px; height: auto; opacity: 0.92; }

/* Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}

.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(21,18,15,0.55) 0%, rgba(21,18,15,0) 28%, rgba(21,18,15,0) 42%, rgba(21,18,15,0.92) 72%, var(--laca) 100%);
}

.hero__caminho {
  position: absolute;
  top: calc(22px + env(safe-area-inset-top));
  right: var(--gutter);
  z-index: 2;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  color: var(--ouro);
  opacity: 0.85;
}

.hero__texto {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 48px;
  max-width: var(--medida);
  animation: surgir 900ms ease-out both;
}

.hero h1 {
  font-size: clamp(2.5rem, 10.5vw, 3.6rem);
  line-height: 1.02;
}

.hero__linha {
  margin-top: 20px;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--arroz);
  max-width: 30ch;
}

.hero__preco {
  margin-top: 26px;
  font-size: 1.35rem;
  color: var(--ouro);
}

.hero__preco .preco { font-size: 1.65rem; font-weight: 500; }

.hero__dica { margin-top: 6px; color: var(--areia); font-size: 1.1rem; }

@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Blocos ---------------------------------------------------------- */

.bloco {
  padding: 64px var(--gutter);
  max-width: calc(var(--medida) + 2 * var(--gutter));
  margin: 0 auto;
}

.bloco h2 {
  font-size: clamp(2rem, 7.5vw, 2.5rem);
}

.bloco__intro {
  margin-top: 16px;
  color: var(--areia);
  font-size: 1.2rem;
  max-width: 34ch;
}

/* O caminho: quatro passos ---------------------------------------- */

.passos {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  position: relative;
}

.passos::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, var(--ouro-escuro), var(--ouro), var(--ouro-escuro));
  opacity: 0.7;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding-bottom: 34px;
}

.passo:last-child { padding-bottom: 0; }

.passo__n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--laca);
  border: 1px solid var(--ouro);
  color: var(--ouro);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
}

.passo h3 { font-size: 1.45rem; padding-top: 4px; }

.passo p { margin-top: 6px; color: var(--areia); }

.caminho__fecho {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(201,162,78,0.35);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--arroz);
}

/* Sommelier: vídeo + texto ---------------------------------------- */

.sommelier { padding-top: 24px; }

.sommelier__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--laca-2);
}

.sommelier__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.sommelier__som {
  position: absolute;
  right: 14px;
  bottom: 14px;
  appearance: none;
  border: 1px solid rgba(242,233,216,0.6);
  background: rgba(21,18,15,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--arroz);
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.sommelier__som[aria-pressed="true"] {
  background: var(--arroz);
  color: var(--tinta);
  border-color: var(--arroz);
}

.sommelier__texto {
  position: relative;
  padding: 32px 28px 36px;
  border: 1px solid rgba(201,162,78,0.4);
  border-top: 0;
  overflow: hidden;
}

.sommelier__kanji {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mincho);
  font-size: 5rem;
  line-height: 1;
  color: var(--ouro);
  opacity: 0.12;
  writing-mode: vertical-rl;
  white-space: nowrap;
  pointer-events: none;
}

.sommelier__texto h2 { font-size: 1.9rem; }

.sommelier__texto p { margin-top: 16px; color: var(--areia); max-width: 30ch; }

.sommelier__texto strong { color: var(--arroz); font-weight: 500; }

/* Dúvidas --------------------------------------------------------- */

.duvidas { background: var(--laca-2); max-width: none; }

.duvidas > * { max-width: var(--medida); margin-inline: auto; }

.perguntas { margin: 32px auto 0; }

.pergunta + .pergunta {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(201,162,78,0.25);
}

.pergunta dt {
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--arroz);
}

.pergunta dd { margin: 10px 0 0; color: var(--areia); }

/* Fecho ----------------------------------------------------------- */

.fecho { text-align: center; padding-top: 72px; padding-bottom: 72px; }

.fecho__preco {
  margin-top: 18px;
  color: var(--ouro);
  font-size: 1.4rem;
}

.fecho__preco .preco { font-size: 3.2rem; font-weight: 500; line-height: 1; }

.fecho__por { display: block; margin-top: 2px; }

.fecho__linha { margin: 18px auto 0; max-width: 28ch; color: var(--arroz); font-size: 1.2rem; }

.fecho__dica { margin: 22px auto 0; padding-top: 22px; border-top: 1px solid rgba(201,162,78,0.35); color: var(--areia); max-width: 30ch; }

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

.rodape {
  padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(201,162,78,0.2);
  color: var(--areia);
  font-size: 0.95rem;
  text-align: center;
}

.rodape__logo { width: 96px; margin: 0 auto 16px; opacity: 0.7; }

/* Desktop ---------------------------------------------------------- */

@media (min-width: 900px) {
  :root { --gutter: 48px; --medida: 38rem; }

  body { font-size: 1.1875rem; }

  .topo__logo { width: 136px; }

  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }

  .hero__foto {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    height: 100vh;
    z-index: 0;
  }

  .hero__foto img { object-position: 50% 50%; }

  .hero__foto::after {
    background: linear-gradient(90deg, var(--laca) 0%, rgba(21,18,15,0.25) 30%, rgba(21,18,15,0) 60%);
  }

  .hero__caminho { top: 50%; transform: translateY(-50%); right: auto; left: calc(51% + 36px); font-size: 1.05rem; opacity: 0.75; }

  .hero__texto {
    grid-column: 1;
    grid-row: 1;
    padding: 120px var(--gutter) 80px calc(var(--gutter) + 4vw);
    max-width: 40rem;
  }

  .hero h1 { font-size: clamp(3.4rem, 5.2vw, 4.6rem); }

  .hero__linha { font-size: 1.3rem; max-width: 32ch; }

  .bloco { padding: 96px var(--gutter); }

  .caminho {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 64px;
    max-width: 64rem;
  }
  .caminho h2 { grid-column: 1; }
  .caminho .bloco__intro { grid-column: 1; }
  .caminho .passos { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; }
  .caminho__fecho { grid-column: 1; align-self: end; margin-top: 40px; }

  .sommelier {
    max-width: 64rem;
    padding-top: 32px;
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: stretch;
  }

  .sommelier__midia { aspect-ratio: 9 / 16; }

  .sommelier__texto {
    border: 1px solid rgba(201,162,78,0.4);
    border-left: 0;
    padding: 56px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sommelier__texto h2 { font-size: 2.3rem; }

  .sommelier__texto p { max-width: 36ch; font-size: 1.25rem; }

  .sommelier__kanji { font-size: 6.5rem; right: 32px; }

  .duvidas > * { max-width: 40rem; }

  .fecho { padding-bottom: 120px; }
}

/* Movimento reduzido ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__texto { animation: none; }
}