/* =====================================================================
   PRÉ-VISUALIZAÇÃO DE TEMAS — remover este arquivo e static/tema.js quando o rumo visual for decidido.
   Ative com ?tema=washi | indigo | kamon | padrao  (a escolha fica guardada no navegador).
   ===================================================================== */
.hanko { display: none; position: absolute; right: clamp(16px, 6vw, 72px); top: clamp(22px, 5vw, 56px); z-index: 2;
  width: 84px; height: 84px; place-items: center; background: var(--selo, #b8322a); color: #fff;
  font: 700 2.1rem/1 "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS Mincho", serif;
  border-radius: 7px; transform: rotate(-4deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.22); }
.hanko small { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%) rotate(4deg); font: 600 .62rem var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .8; white-space: nowrap; }
html[data-tema="washi"] .hanko, html[data-tema="kamon"] .hanko { display: grid; }
html[data-tema="washi"] .hanko small { color: var(--tinta); }
html[data-tema="kamon"] .hanko small { color: #e7c982; }
@media (max-width: 640px) { .hanko { width: 60px; height: 60px; font-size: 1.5rem; } }

.previa-tema { position: fixed; left: 12px; bottom: 12px; z-index: 90; background: #fff; border: 1px solid var(--linha);
  border-radius: 12px; box-shadow: var(--sombra); padding: 8px 10px; font: 600 .78rem var(--sans); display: flex; gap: 6px;
  align-items: center; flex-wrap: wrap; max-width: calc(100vw - 24px); }
.previa-tema span { color: var(--cinza); margin-right: 2px; }
.previa-tema a { text-decoration: none; padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--linha); color: var(--tinta); background: #fff; }
.previa-tema a[aria-current="true"] { background: #222; color: #fff; border-color: #222; }

/* ---- A · WASHI & SUMI: papel, tinta, um único vermelho de carimbo; padrão asanoha (folha de cânhamo) ---- */
html[data-tema="washi"] {
  --creme: #f4efe4; --papel: #fffdf8; --tinta: #1f1f1c; --cinza: #6a655a; --linha: #ddd5c2;
  --verde: #1f1f1c; --verde-2: #3b3a35; --folha: #b8322a; --folha-claro: #f4e3df; --selo: #b8322a; --ambar: #b8322a;
  --sombra: 0 1px 0 rgba(0,0,0,.05);
}
html[data-tema="washi"] .hero, html[data-tema="washi"] .pagina-topo {
  background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%231f1f1c' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M0 0L40 40M40 0L0 40M20 0V40M0 20H40M20 0L40 20L20 40L0 20Z'/%3E%3C/svg%3E");
  color: var(--tinta); border-bottom: 1px solid var(--linha); }
html[data-tema="washi"] .hero { padding-block: clamp(64px, 11vw, 120px); }
html[data-tema="washi"] .hero h1, html[data-tema="washi"] .pagina-topo h1 { color: var(--tinta); }
html[data-tema="washi"] .hero p.lead, html[data-tema="washi"] .pagina-topo p { color: #3b3a35; }
html[data-tema="washi"] .hero .selo { color: var(--folha); }
html[data-tema="washi"] .pagina-topo .eyebrow { color: var(--folha) !important; }
html[data-tema="washi"] .btn.claro { background: var(--tinta); border-color: var(--tinta); color: #fff; }
html[data-tema="washi"] .btn.claro:hover { background: var(--folha); border-color: var(--folha); color: #fff; }
html[data-tema="washi"] .btn.ghost { border-color: var(--tinta); color: var(--tinta); }
html[data-tema="washi"] .btn.ghost:hover { background: rgba(0,0,0,.05); color: var(--tinta); }
html[data-tema="washi"] .hero-trilha { stroke: #5e7b4a; opacity: .25; }
html[data-tema="washi"] .ico { background: #e6ecda; color: #4a6638; }
/* "une": linhas de plantio — rastro do campo nas faixas alternadas */
html[data-tema="washi"] .secao.alt { background: var(--papel) repeating-linear-gradient(0deg, transparent 0 13px, rgba(94,123,74,.11) 13px 14px); }
html[data-tema="washi"] .rodape { background: #171714; }
html[data-tema="washi"] .faixa-cta { border-color: #e8c7c2; }
html[data-tema="washi"] .marca { color: var(--tinta); }

/* ---- B · ÍNDIGO (ai-iro) & ONDAS (seigaiha): confiança sóbria, ouro velho de acento ---- */
html[data-tema="indigo"] {
  --creme: #f5f1e8; --verde: #1d2c54; --verde-2: #2c4079; --folha: #a9741a; --folha-claro: #f3e8cf; --selo: #a9741a;
}
html[data-tema="indigo"] .hero, html[data-tema="indigo"] .pagina-topo {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Ccircle cx='0' cy='24' r='24'/%3E%3Ccircle cx='0' cy='24' r='17'/%3E%3Ccircle cx='0' cy='24' r='10'/%3E%3Ccircle cx='48' cy='24' r='24'/%3E%3Ccircle cx='48' cy='24' r='17'/%3E%3Ccircle cx='48' cy='24' r='10'/%3E%3Ccircle cx='24' cy='12' r='24'/%3E%3Ccircle cx='24' cy='12' r='17'/%3E%3Ccircle cx='24' cy='12' r='10'/%3E%3C/svg%3E"),
              linear-gradient(160deg, #1d2c54 0%, #111b38 100%); }
html[data-tema="indigo"] .hero .selo { color: #d9a441; }
html[data-tema="indigo"] .hero p.lead, html[data-tema="indigo"] .pagina-topo p { color: #d6dcf0; }
html[data-tema="indigo"] .pagina-topo .eyebrow { color: #d9a441 !important; }
html[data-tema="indigo"] .ico { background: #e3eddf; color: #2f6a3d; }
html[data-tema="indigo"] .rodape { background: #111b38; }
html[data-tema="indigo"] .secao.escura { background: #1d2c54; }
html[data-tema="indigo"] .secao.escura .eyebrow { color: #d9a441; }

/* ---- C · KAMON & TERRA (shippo): brasão da família, terra e folha, mais calor ---- */
html[data-tema="kamon"] {
  --creme: #f3ead8; --papel: #fffaf0; --verde: #4a3426; --verde-2: #6a4a36; --folha: #5c7a3a; --folha-claro: #e6ecd3;
  --selo: #a8342a; --linha: #e0d3b8;
}
html[data-tema="kamon"] .hero, html[data-tema="kamon"] .pagina-topo {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23d9b66a' stroke-opacity='.16' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/svg%3E"),
              linear-gradient(160deg, #4a3426 0%, #2b1d14 100%); }
html[data-tema="kamon"] .hero-trilha { opacity: .55; stroke: #e7c982; border: 2px solid rgba(231,201,130,.55); border-radius: 50%;
  padding: 30px; width: min(300px, 46vw); right: 6%; bottom: 8%; }
html[data-tema="kamon"] .hero .selo { color: #e7c982; }
html[data-tema="kamon"] .pagina-topo .eyebrow { color: #e7c982 !important; }
html[data-tema="kamon"] .btn.claro { color: #4a3426; }
html[data-tema="kamon"] .rodape { background: #2b1d14; }
html[data-tema="kamon"] .secao.escura { background: #4a3426; }
html[data-tema="kamon"] .secao.escura .eyebrow { color: #e7c982; }
html[data-tema="kamon"] .ico { background: var(--folha-claro); color: #3f5a26; }

/* ---- D · SUMI & OURO: o selo "Ricardo Mikami" (preto e dourado, círculo enso, broto e linhas de plantio) ---- */
.selo-hero { display: none; position: absolute; right: clamp(8px, 5vw, 64px); top: 50%; transform: translateY(-50%);
  width: clamp(190px, 34vw, 380px); height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
html[data-tema="ouro"] .selo-hero { display: block; }
html[data-tema="ouro"] .hero-trilha { display: none; }
html[data-tema="ouro"] .hero h1, html[data-tema="ouro"] .hero p.lead { max-width: min(54%, 34ch); }
html[data-tema="ouro"] .hero p.lead { max-width: min(54%, 46ch); }
@media (max-width: 760px) {
  html[data-tema="ouro"] .selo-hero { position: static; transform: none; width: 150px; margin: 0 0 18px; }
  html[data-tema="ouro"] .hero h1, html[data-tema="ouro"] .hero p.lead { max-width: none; }
}
html[data-tema="ouro"] {
  --creme: #f5f0e4; --papel: #fffdf7; --verde: #15130f; --verde-2: #2a251c; --folha: #9c7424; --folha-claro: #f3ead0;
  --selo: #9c7424; --linha: #e3d9c0;
}
html[data-tema="ouro"] .hero, html[data-tema="ouro"] .pagina-topo {
  background: radial-gradient(900px 420px at 80% 40%, rgba(201,162,75,.16), transparent 62%), linear-gradient(160deg, #1b1812 0%, #0d0c09 100%); }
html[data-tema="ouro"] .hero .selo, html[data-tema="ouro"] .pagina-topo .eyebrow { color: #d9bb6a !important; }
html[data-tema="ouro"] .hero h1, html[data-tema="ouro"] .pagina-topo h1 { color: #f7edd2; }
html[data-tema="ouro"] .hero p.lead, html[data-tema="ouro"] .pagina-topo p { color: #d9d1bb; }
html[data-tema="ouro"] .btn { background: #c9a24b; border-color: #c9a24b; color: #15130f; }
html[data-tema="ouro"] .btn:hover { background: #dfbb63; border-color: #dfbb63; color: #15130f; }
html[data-tema="ouro"] .btn.sec { background: transparent; color: #15130f; border-color: #15130f; }
html[data-tema="ouro"] .btn.sec:hover { background: #f3ead0; }
html[data-tema="ouro"] .btn.claro { background: #c9a24b; color: #15130f; }
html[data-tema="ouro"] .btn.ghost { background: transparent; border-color: rgba(247,237,210,.5); color: #f7edd2; }
html[data-tema="ouro"] .btn.ghost:hover { background: rgba(247,237,210,.1); color: #f7edd2; }
html[data-tema="ouro"] .secao.escura { background: #15130f; }
html[data-tema="ouro"] .secao.escura .eyebrow { color: #d9bb6a; }
html[data-tema="ouro"] .rodape { background: #0d0c09; }
html[data-tema="ouro"] .ico { background: #efe6cc; color: #5b4a1a; }
html[data-tema="ouro"] .marca-ico { background: #15130f; }
html[data-tema="ouro"] .marca-ico svg { stroke: #d9bb6a; }
html[data-tema="ouro"] .marca { color: #15130f; }