/* Yu Salon — ateliê de unhas, Hamamatsu. Minimalista e elegante: marfim, tinta, um toque de dourado.
   Telas cheias; a cliente rola livremente (sem travar em cada tela, pedido do Eduardo 03/10). */
:root {
  --marfim: #F6F2EC; --papel: #FBF9F5; --tinta: #161412; --cinza: #77706A; --linha: rgba(22, 20, 18, .12);
  --ouro: #A6895C; --serif: "Cormorant Garamond", "Shippori Mincho", serif; --mincho: "Shippori Mincho", serif;
  --sans: "Noto Sans JP", system-ui, sans-serif; --margem: clamp(22px, 4vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--marfim); }
body { font: 300 14.5px/1.95 var(--sans); color: var(--tinta); background: var(--marfim); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { animation: none !important; transition: none !important; } }

/* Uma tela por gesto */
.tela { position: relative; height: 100svh; overflow: hidden; }

.rotulo { font: 400 10.5px/1.6 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--cinza); }
.link-linha { display: inline-flex; gap: 12px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid currentColor;
  font: 400 13px/1 var(--mincho); letter-spacing: .24em; transition: gap .4s, opacity .3s; }
.link-linha span { font-family: var(--serif); letter-spacing: 0; }
.link-linha:hover { gap: 22px; }

/* ---------- marca e menu flutuante ---------- */
.marca { position: fixed; z-index: 30; top: calc(18px + env(safe-area-inset-top)); left: var(--margem);
  font: 400 19px/1 var(--serif); letter-spacing: .08em; color: var(--tinta); background: #FFFFFF; padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(22, 20, 18, .08); box-shadow: 0 8px 26px rgba(22, 20, 18, .10); }
.flutuante { position: fixed; z-index: 30; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(22, 20, 18, .08); box-shadow: 0 10px 34px rgba(22, 20, 18, .12); }
.flutuante a { padding: 10px 18px; border-radius: 999px; font: 400 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--cinza); transition: color .3s, background .3s; }
.flutuante a:hover, .flutuante a.ativo { color: var(--tinta); }
.flutuante a.ativo { background: rgba(22, 20, 18, .06); }

/* ---------- hero: catálogo (barra lateral, título grande sobre a mão) ---------- */
.hero { background: #EEEBE7; }
.lateral { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 64px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 34px 0 30px; }
.lateral-menu { display: flex; flex-direction: column; gap: 34px; }
.lateral-menu a, .lateral-marca { writing-mode: vertical-rl; transform: rotate(180deg); }
.lateral-menu a { font: 500 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--tinta); }
.lateral-marca { font: 400 22px/1 "Bodoni Moda", var(--serif); letter-spacing: .18em; text-transform: uppercase; }
.hero-topo { position: absolute; z-index: 3; top: 34px; right: var(--margem); display: flex; gap: 40px; font: 500 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
/* Foto inteira de fundo (modelo à direita, espaço livre à esquerda para o texto) */
.hero-foto { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; animation: entrar 1.6s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes entrar { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hero-texto { position: absolute; z-index: 2; left: calc(64px + var(--margem)); top: 50%; transform: translateY(-46%); max-width: 760px; }
.hero-nome { font: italic 400 clamp(26px, 2.4vw, 38px)/1 "Bodoni Moda", var(--serif); letter-spacing: .04em; color: var(--tinta); }
.hero h1 { font: 400 clamp(56px, 7vw, 108px)/.98 "Bodoni Moda", var(--serif); letter-spacing: .03em; text-transform: uppercase; margin: 22px 0 0; color: var(--tinta); }
.hero h1 span { display: block; }
.hero-prox { position: absolute; z-index: 3; right: var(--margem); bottom: 36px; font: 500 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; display: flex; gap: 12px; }
.hero-prox span { font-family: var(--serif); letter-spacing: 0; }
/* Na primeira tela a barra lateral faz o papel da marca e do menu */
body.no-hero .marca, body.no-hero .flutuante { opacity: 0; pointer-events: none; }
.marca, .flutuante { transition: opacity .5s; }

/* ---------- obras: texto | pôster | trilho ---------- */
/* Card do trabalho: texto à esquerda, pôster 4:5 na altura toda da tela, trilho fino à direita */
.obra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(56px, 64px); background: var(--papel); }
.obra-arte { display: grid; grid-template-rows: auto 1fr; padding: calc(84px + env(safe-area-inset-top)) var(--margem) 110px; min-height: 0; }
.obra-num { font: 400 10.5px/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--cinza); }
.obra-num b { color: var(--tinta); font-weight: 400; }
.obra-texto { align-self: center; display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.obra-texto::before { content: ""; width: 48px; height: 1px; background: var(--ouro); }
.letras { font: 300 clamp(40px, 4.4vw, 72px)/1.02 var(--serif); letter-spacing: .02em; }
.letras em { font-style: italic; color: var(--ouro); }
.obra-legenda { font: 400 14px/1.7 var(--mincho); letter-spacing: .12em; }
.obra-legenda small { display: block; font: 300 10.5px/1.9 var(--sans); letter-spacing: .18em; color: var(--cinza); }
.obra-reservar { display: none; }
.obra-foto { overflow: hidden; height: 100svh; aspect-ratio: 4 / 5; background: var(--tinta); }
.obra-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s cubic-bezier(.2, .7, .1, 1); }
.obra.visivel .obra-foto img { transform: none; }
.trilho { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 84px 0 96px; border-left: 1px solid var(--linha); background: var(--papel); }
.trilho-num { font: 300 24px/1 var(--serif); }
.trilho-txt { writing-mode: vertical-rl; font: 400 10px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--cinza); }
.trilho-link { writing-mode: vertical-rl; font: 400 12px/1 var(--mincho); letter-spacing: .3em; padding-left: 6px; border-left: 1px solid currentColor; }

/* entrada suave */
.obra-texto { opacity: 0; transform: translateY(14px); transition: opacity 1.2s, transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.visivel .obra-texto { opacity: 1; transform: none; }
.visivel .obra-texto { transition-delay: .25s; }

/* ---------- menu ---------- */
.menu-tela, .faq { display: grid; place-items: center; background: var(--marfim); }
.faq { background: var(--papel); }
.menu-caixa, .faq-caixa { width: min(620px, 100%); padding: 0 22px; }
.menu-tela h2, .faq h2 { font: 400 clamp(28px, 2.8vw, 44px)/1.55 var(--mincho); letter-spacing: .08em; margin: 20px 0 26px; }
.servicos { list-style: none; border-top: 1px solid var(--linha); }
.servicos li { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 2px; border-bottom: 1px solid var(--linha); }
.servicos span { font: 400 16px/1.6 var(--mincho); letter-spacing: .1em; }
.servicos small { font: italic 400 16px/1 var(--serif); color: var(--cinza); letter-spacing: .04em; }
.menu-tela .nota { text-align: left; margin-top: 22px; }

/* ---------- はじめての方へ ---------- */
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-of-type { border-top: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 17px 2px; font: 400 15px/1.7 var(--mincho); letter-spacing: .06em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--serif); color: var(--ouro); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 18px; color: var(--cinza); font-size: 13.5px; }

/* ---------- russian manicure ---------- */
.russa { display: grid; place-items: center; padding: 0 var(--margem); background: var(--tinta); color: var(--marfim); }
.russa-texto { width: min(560px, 100%); }
.russa .rotulo { color: rgba(246, 242, 236, .5); }
.russa h2, .artista h2, .reserva h2 { font: 400 clamp(28px, 2.8vw, 44px)/1.55 var(--mincho); letter-spacing: .08em; margin: 20px 0 22px; }
.russa h2 em { font: italic 300 1.15em/1 var(--serif); color: #D4BC90; letter-spacing: 0; }
.russa p { color: rgba(246, 242, 236, .7); max-width: 500px; }
.passos { list-style: none; margin-top: 30px; border-top: 1px solid rgba(246, 242, 236, .14); max-width: 500px; }
.passos li { display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 1px solid rgba(246, 242, 236, .14); }
.passos b { grid-row: span 2; font: italic 400 18px/1.4 var(--serif); color: #D4BC90; }
.passos span { font: 400 14.5px/1.6 var(--mincho); letter-spacing: .1em; }
.passos small { color: rgba(246, 242, 236, .5); font-size: 12px; }

/* ---------- artista ---------- */
.artista { display: grid; grid-template-columns: 40% 1fr; background: var(--marfim); }
.artista-foto { overflow: hidden; }
.artista-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.artista-texto { align-self: center; padding: 0 var(--margem); }
.artista dl { border-top: 1px solid var(--linha); max-width: 500px; }
.artista dl div { display: grid; grid-template-columns: 130px 1fr; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.artista dt { font: 400 10px/2.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--cinza); }
.artista dd { font: 400 14.5px/1.9 var(--mincho); letter-spacing: .06em; }
.idiomas { margin-top: 24px; font: italic 400 17px/1 var(--serif); color: var(--cinza); letter-spacing: .06em; }

/* ---------- reserva ---------- */
.reserva { display: grid; place-items: center; background: var(--papel); }
.reserva-caixa { text-align: center; padding: 0 22px; width: min(460px, 100%); }
.horarios { margin: 6px 0 38px; border-top: 1px solid var(--linha); }
.horarios p { display: flex; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--linha); font: 400 13.5px/1.6 var(--mincho); letter-spacing: .08em; }
.horarios b { font: 400 17px/1.3 var(--serif); letter-spacing: .06em; }
.acoes { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.botao { display: block; width: 100%; padding: 18px; background: var(--tinta); color: var(--marfim); font: 400 13px/1 var(--mincho); letter-spacing: .22em; transition: opacity .3s; }
.botao:hover { opacity: .85; }
.nota { margin-top: 26px; font-size: 12px; color: var(--cinza); letter-spacing: .04em; }
.rodape { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 24px var(--margem) calc(24px + env(safe-area-inset-bottom));
  font: 400 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--cinza); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .obra { grid-template-columns: minmax(0, 1fr) auto; }
  .obra .trilho { display: none; }
  .obra-foto { height: 100svh; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  body { font-size: 13.5px; }
  .marca { font-size: 19px; }
  .flutuante { width: calc(100% - 28px); justify-content: space-between; padding: 5px; }
  .flutuante a { padding: 11px 12px; font-size: 10px; letter-spacing: .14em; }


  .obra { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .obra-foto { height: auto; aspect-ratio: auto; background: var(--papel); padding: 0 0 calc(78px + env(safe-area-inset-bottom)); }
  .letras { white-space: nowrap; }
  .obra-foto img { object-fit: contain; }
  .obra-arte { grid-template-rows: auto auto; padding: calc(60px + env(safe-area-inset-top)) 22px 14px; gap: 12px; }
  .obra-num { text-align: right; margin-top: -34px; }
  .obra-texto { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; max-width: none; }
  .obra-texto::before { display: none; }
  .letras { font-size: 28px; }
  .obra-legenda { font-size: 11.5px; text-align: right; }
  .obra-texto { flex-wrap: wrap; }
  .obra-reservar { display: block; width: 100%; text-align: right; writing-mode: horizontal-tb; border: 0; padding: 0; font: 400 11.5px/1 var(--mincho); letter-spacing: .14em; color: var(--ouro); }
  .obra-legenda small { font-size: 9.5px; }
  .trilho { display: none; }

  .russa { padding: calc(64px + env(safe-area-inset-top)) 22px 86px; }
  .russa h2, .artista h2, .reserva h2 { font-size: 24px; margin: 10px 0 12px; }
  .russa p { font-size: 12.5px; }
  .passos { margin-top: 14px; }
  .passos li { padding: 8px 0; }

  .artista { grid-template-columns: 1fr; grid-template-rows: 44% 56%; }
  .artista-texto { padding: 20px 22px 86px; align-self: start; }
  .artista dl div { grid-template-columns: 104px 1fr; padding: 8px 0; }
  .artista dd { font-size: 13px; }
  .idiomas { margin-top: 12px; font-size: 15px; }

  .reserva-caixa { padding-bottom: 60px; }
  .menu-tela h2, .faq h2 { font-size: 24px; margin: 10px 0 14px; }
  .servicos li { padding: 12px 2px; }
  .servicos span { font-size: 14.5px; }
  .faq summary { padding: 13px 2px; font-size: 13.5px; }
  .faq details p { font-size: 12.5px; padding-bottom: 12px; }
  .menu-caixa, .faq-caixa { padding-bottom: 70px; }
  .rodape { display: none; }
}

/* ---------- hero no celular e em telas mais "quadradas" (tablet, janela estreita): foto em tela cheia,
   sombra suave embaixo e o nome em branco por cima (opção E escolhida pelo Eduardo, 03/10) ---------- */
@media (max-width: 760px), (max-aspect-ratio: 31/20) {
  .lateral, .hero-prox { display: none; }
  .hero-topo { top: calc(22px + env(safe-area-inset-top)); left: 24px; right: 24px; justify-content: space-between; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
  .hero-foto { object-position: 68% 0%; }
  .hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
    background: linear-gradient(180deg, rgba(22, 18, 15, 0) 0%, rgba(22, 18, 15, .62) 100%); }
  .hero-texto { left: 24px; right: 24px; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); transform: none; color: #FBF8F4; }
  .hero-nome { font-size: clamp(22px, 3.4vw, 32px); color: #FBF8F4; }
  .hero h1 { font-size: clamp(60px, 9vw, 96px); line-height: .95; margin: 10px 0 0; color: #FBF8F4; }
  /* aqui o menu flutuante aparece já na primeira tela */
  body.no-hero .flutuante { opacity: 1; pointer-events: auto; }
}

/* ---------- troca de idioma (JP · PT · EN) no topo do hero e no rodapé ---------- */
.idiomas-troca { display: flex; gap: 16px; }
.idiomas-troca button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 3px; cursor: pointer;
  font: inherit; letter-spacing: .24em; color: inherit; opacity: .55; transition: opacity .3s; }
.idiomas-troca button:hover { opacity: .85; }
.idiomas-troca button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
@media (max-width: 760px) {
  /* no celular o rodapé mostra só a troca de idioma, logo acima do menu flutuante */
  .rodape { display: flex; justify-content: center; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 0; }
  .rodape > span { display: none; }
}

/* ---------- celular com rolagem livre: cada seção tem o tamanho do conteúdo (sem sobras de tela cheia).
   Só o hero continua ocupando a tela inteira. ---------- */
@media (max-width: 760px) {
  .tela:not(.hero) { height: auto; overflow: visible; }
  .obra { display: block; padding-bottom: 28px; }
  .obra-arte { padding: 34px 22px 18px; }
  .obra-num { margin-top: 0; }
  .obra-foto { height: auto; padding: 0; }
  .obra-foto img { height: auto; transform: none; }
  .menu-tela, .faq, .reserva { display: block; padding: 64px 0 40px; }
  .russa { padding: 64px 22px 48px; }
  .artista { display: block; }
  .artista-foto { height: 62svh; }
  .artista-texto { padding: 26px 22px 48px; }
  .reserva { padding-bottom: 150px; }
  .reserva-caixa { margin: 0 auto; padding-bottom: 0; }
}

/* ---------- rolagem livre: seções de texto com o tamanho do conteúdo (sem sobras), também no computador ---------- */
.menu-tela, .russa, .faq, .reserva { height: auto; padding-top: 120px; padding-bottom: 120px; }
.artista { height: auto; min-height: 80svh; }
.reserva { padding-bottom: 130px; }
.servicos small:empty { display: none; }
@media (max-width: 760px) {
  .obra { padding-bottom: 36px; }
  .obra-arte { padding: 36px 22px 20px; }
  .menu-tela, .faq, .russa { padding-top: 72px; padding-bottom: 64px; }
  .reserva { padding-top: 72px; padding-bottom: 150px; }
  .artista { min-height: 0; }
  .artista-foto { height: 54svh; }
  .artista-texto { padding: 30px 22px 56px; }
  .menu-caixa, .faq-caixa { padding-bottom: 0; }
}
@media (max-width: 760px) {
  .marca { display: none; } /* no celular o menu flutuante já basta */
}