/* ============================================================
   Tema exclusivo da OTOO 3D. Entra depois do app.css e troca só as
   variáveis e o que é da moldura e da página inicial dela.
   Manual da marca: fundo claro, preto #111111, Inter e o degradê
   laranja → coral → rosa só como destaque. Sem brilho, sem neon e
   sem sombra colorida.

   A página inicial tem dois jeitos:
   - parada (o padrão deste arquivo): tudo em fluxo normal, para quem pediu "menos movimento"
     no aparelho ou está sem JavaScript;
   - com movimento (html.otoo-anima, posta pelo script do <head>): a abertura e os filamentos
     viram cenas presas na tela, que andam com a rolagem (otoo.js).
   ============================================================ */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/layouts/otoo/fontes/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/layouts/otoo/fontes/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700 800; font-style: normal; font-display: swap;
  src: url("/static/layouts/otoo/fontes/inter-700.woff2") format("woff2"); }

:root {
  --bg:            #ffffff;
  --surface:       #f3f1ec;   /* o branco quente do manual, um tom abaixo para separar do fundo */
  --surface-2:     #e7e4dc;
  --text:          #111111;
  --muted:         #57554f;
  --border:        #dcd9d0;
  --primary:       #d93a0b;   /* o coral, escurecido para o texto passar no contraste */
  --primary-d:     #b82f07;
  --primary-l:     #fff0e9;
  --primary-soft:  #fff7f3;
  --card:          #ffffff;
  --appbar-bg:     #ffffff;
  --border-hover:  #bfbbb0;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --maxw: 1200px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .05);
  --shadow:    0 8px 22px rgba(17, 17, 17, .06);
  --shadow-lg: 0 16px 36px rgba(17, 17, 17, .10);

  --otoo-1: #fc7b00;
  --otoo-2: #fe5020;
  --otoo-3: #fa007e;
  --otoo-grad: linear-gradient(100deg, var(--otoo-1) 0%, var(--otoo-2) 52%, var(--otoo-3) 100%);
  --otoo-tinta: #111111;      /* o botão cheio e o rodapé */
  --otoo-papel: #ffffff;
  --otoo-noite: #141414;      /* o escuro das cenas (o mesmo fundo do vídeo do carretel) */
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:            #111111;   /* o grafite do manual */
  --surface:       #1a1a1a;
  --surface-2:     #232323;
  --text:          #f4f3f0;
  --muted:         #b3b1ab;
  --border:        #363432;
  --primary:       #ff7a4d;
  --primary-d:     #ff9470;
  --primary-l:     #34190f;
  --primary-soft:  #22130d;
  --card:          #181818;
  --appbar-bg:     #111111;
  --border-hover:  #55524d;
  --otoo-tinta: #f4f3f0;
  --otoo-papel: #111111;
  color-scheme: dark;
}

body.otoo, .otoo h1, .otoo h2, .otoo h3, .otoo h4,
.otoo input, .otoo button, .otoo select, .otoo textarea {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
.otoo h1, .otoo h2 { font-weight: 700; letter-spacing: -.03em; }
.otoo h3 { font-weight: 600; letter-spacing: -.01em; }
.otoo :focus-visible { outline: 3px solid var(--otoo-2); outline-offset: 3px; border-radius: 6px; }

/* O botão principal da loja toda é o preto do manual, não o coral. */
.otoo .btn--primary { background: var(--otoo-tinta); color: var(--otoo-papel); }
.otoo .btn--primary:hover { background: var(--otoo-tinta); opacity: .88; }
.otoo .avatar { background: var(--otoo-tinta); color: var(--otoo-papel); }
.otoo .badge-count { background: var(--otoo-2); }

/* ---------- O topo ---------- */
/* O topo acompanha a cena que está embaixo dele: na abertura, o claro do filme; quando a
   câmera entra na impressora e nos filamentos, o escuro; na loja, o fundo da página. Quem diz
   o tom é o otoo.js: data-tom (as cores do texto) e --topo-e (o quanto escureceu, igual ao
   filme). As variáveis de cor valem só aqui dentro. */
.otoo-topo {
  --topo-cor: var(--bg);
  background: var(--topo-cor); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Nas cenas, o fundo do topo é a mesma mistura do filme (claro → escuro, por --topo-e), sem
   transição, para andar junto com a rolagem. A borda fica da cor do fundo: assim o topo
   cobre um pixel da cena e não sobra risco claro entre os dois em tela com zoom de 125%. */
.otoo-topo[data-tom] { --topo-cor: #f6f1ee; border-bottom-color: var(--topo-cor); transition: none; }
.otoo-topo[data-tom="noite"] { --topo-cor: var(--otoo-noite); }    /* sem color-mix: troca de uma vez */
@supports (background: color-mix(in srgb, red, blue)) {
  .otoo-topo[data-tom] {
    --topo-cor: color-mix(in srgb, #f6f1ee, var(--otoo-noite) calc(var(--topo-e, 0) * 100%));
  }
}
.otoo-topo[data-tom="filme"] {
  --bg: #f6f1ee; --text: #111111; --muted: #57554f; --surface: #ebe4de; --surface-2: #e0d8d1;
  --border: #dcd6cf; --card: #ffffff; --primary: #d93a0b; --otoo-tinta: #111111; --otoo-papel: #ffffff;
}
.otoo-topo[data-tom="noite"] {
  --bg: #141414; --text: #f4f3f0; --muted: #b9b7b1; --surface: #262525; --surface-2: #323130;
  --border: #3a3836; --card: #1c1b1b; --primary: #ff7a4d; --otoo-tinta: #f4f3f0; --otoo-papel: #111111;
}
.otoo-topo .appbar__inner { gap: 20px; flex-wrap: nowrap; }
.otoo-topo.is-rolado:not([data-tom]) { box-shadow: var(--shadow); }
/* O logo oficial, em vetor. Só carrega o da cor do tema da página. A largura mínima do
   manual é 160 px; aqui a altura manda, com a zona de proteção nas margens. */
.otoo-logo {
  display: block; flex: none; width: 122px; height: 34px;
  background: url("/static/layouts/otoo/logo.svg") left center / contain no-repeat;
}
html[data-theme="dark"] .otoo-logo, .otoo-topo[data-tom="noite"] .otoo-logo,
.otoo-logo--rodape { background-image: url("/static/layouts/otoo/logo-escuro.svg"); }
.otoo-topo[data-tom="filme"] .otoo-logo { background-image: url("/static/layouts/otoo/logo.svg"); }
.otoo-nav { display: flex; gap: 2px; }
.otoo-nav a {
  padding: 8px 12px; border-radius: var(--r-pill); font-size: .92rem; font-weight: 600; white-space: nowrap;
  color: var(--muted); transition: color .15s ease, background-color .15s ease;
}
.otoo-nav a:hover { color: var(--text); background: var(--surface); }
/* os botões do topo: só o ícone, sem caixa; o fundo aparece ao passar o mouse */
.otoo-topo .icon-btn { background: transparent; border-color: transparent; border-radius: 50%; color: var(--text); }
.otoo-topo .icon-btn:hover { background: var(--surface); }
.otoo-topo .icon-btn .badge-count { border-color: transparent; }
.otoo-topo .appbar__actions { gap: 4px; }
.otoo-topo .avatar { width: 38px; height: 38px; margin-left: 6px; }
.otoo-busca-botao { display: none; }

/* A busca: a caixa e o painel que responde enquanto a pessoa digita. */
.otoo-busca { position: relative; flex: 1 1 260px; min-width: 0; max-width: 440px; margin-left: auto; }
.otoo-busca .search {
  flex: none; width: 100%; padding: 9px 12px 9px 16px; background: var(--surface);
  border: 1.5px solid transparent; transition: border-color .15s ease, background-color .15s ease;
}
.otoo-busca .search:focus-within, .otoo-busca.is-aberta .search { background: var(--card); border-color: var(--otoo-2); }
.otoo-busca .search input:focus-visible { outline: none; }
.otoo-busca .search input::-webkit-search-cancel-button { display: none; }
.otoo-busca__limpar {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer;
}
.otoo-busca__limpar[hidden] { display: none; }
.otoo-busca__limpar .icon { width: 13px; height: 13px; }
.otoo-busca__painel {
  position: absolute; z-index: 5; top: calc(100% + 10px); right: 0; width: max(100%, 440px);
  max-height: min(72vh, 580px); overflow: auto; padding: 10px; border-radius: var(--r);
  background: var(--card); color: var(--text); border: 1.5px solid var(--border); box-shadow: var(--shadow-lg);
}
.otoo-busca__painel[hidden] { display: none; }
.otoo-busca__titulo {
  margin: 8px 10px 8px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.otoo-busca__atalhos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 8px; }
.otoo-busca__atalho {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px;
  background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--text);
}
.otoo-busca__atalho img { display: block; border-radius: 10px; }
.otoo-busca__item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 14px; color: var(--text);
}
.otoo-busca__item:hover, .otoo-busca__atalho:hover, .otoo-busca__painel .is-ativo { background: var(--surface-2); }
.otoo-busca__item:hover, .otoo-busca__painel .otoo-busca__item.is-ativo { background: var(--surface); }
.otoo-busca__foto {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: #ffffff;
}
.otoo-busca__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.otoo-busca__foto:empty { background: var(--surface-2); }
.otoo-busca__nome { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.otoo-busca__nome small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.otoo-busca__nome mark { background: none; color: var(--primary); }
.otoo-busca__preco { font-size: .92rem; font-weight: 700; white-space: nowrap; text-align: right; }
.otoo-busca__preco s { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }
.otoo-busca__todos {
  display: block; margin: 8px 4px 2px; padding: 12px; border-radius: 12px; text-align: center;
  font-size: .9rem; font-weight: 700; background: var(--otoo-tinta); color: var(--otoo-papel);
}
.otoo-busca__vazio { display: grid; justify-items: center; gap: 8px; padding: 22px 16px 18px; text-align: center; }
.otoo-busca__vazio img { width: 64px; height: 64px; border-radius: 18px; }
.otoo-busca__vazio p { margin: 0; color: var(--muted); font-size: .92rem; }
.otoo-busca__vazio strong { color: var(--text); }

@media (max-width: 1100px) { .otoo-nav { display: none; } }
@media (max-width: 860px) {
  .otoo-logo { width: 100px; height: 28px; }
  .otoo-topo .appbar__inner { gap: 10px; flex-wrap: wrap; }
  .otoo-topo .appbar__actions { margin-left: auto; }
  /* No celular a busca abre pela lupa: o topo fica numa linha só e a abertura ganha a tela. */
  .otoo-busca-botao { display: grid; }
  .otoo-busca { display: none; order: 5; flex: 1 1 100%; max-width: none; margin: 0 0 12px; }
  .otoo-topo.is-buscando .otoo-busca { display: block; }
  .otoo-busca__painel { width: 100%; max-height: 62vh; }
  .otoo .nav-item .badge-count[hidden] { display: none; }
}

.otoo-pagina { padding-top: 22px; padding-bottom: 40px; }

/* ---------- Peças comuns ---------- */
.otoo-rotulo {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.otoo-rotulo::after {
  content: ""; display: block; width: 44px; height: 4px; margin-top: 10px;
  border-radius: 2px; background: var(--otoo-grad);
}
.otoo-cabeca { margin-bottom: 28px; max-width: 640px; }
.otoo-cabeca h2 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; }
.otoo-cabeca__texto { margin: 12px 0 0; color: var(--muted); font-size: 1.05rem; }

/* A pílula das artes da OTOO: sem fundo, com a borda no degradê (a borda é uma camada só
   com o contorno, para o botão servir em fundo claro e em fundo escuro). */
.otoo-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .98rem; color: var(--text);
  transition: transform .15s ease, opacity .15s ease, color .3s ease, background-color .3s ease;
}
.otoo-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--otoo-grad); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.otoo-btn:hover { transform: translateY(-1px); }
.otoo-btn--cheio { background: var(--otoo-tinta); color: var(--otoo-papel); }
.otoo-btn--cheio::before { content: none; }
.otoo-btn--cheio:hover { opacity: .9; }
.otoo-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- O filme da abertura ---------- */
/* Sempre claro no começo, nos dois temas: o fundo é o mesmo fundo do vídeo, para a emenda
   entre a foto e o vídeo não aparecer. As variáveis de cor valem só aqui dentro. */
.otoo-filme {
  --bg: #f6f1ee; --text: #111111; --muted: #57554f; --border: #dcd6cf; --card: #ffffff;
  --otoo-tinta: #111111; --otoo-papel: #ffffff;
  --p: 0; --z: 0; --e: 0; --v: 0; --l: 1; --k: 1.3;
  position: relative; background: #f6f1ee; color: var(--text);
}
/* a noite: quando a câmera entra na impressora, o texto passa a ser claro */
.otoo-filme[data-noite] {
  --bg: #141414; --text: #f4f3f0; --muted: #c2c0ba; --border: #3a3836;
  --otoo-tinta: #f4f3f0; --otoo-papel: #111111;
}
.otoo-filme__tela {
  position: relative; overflow: hidden; display: grid; max-width: var(--maxw); margin: 0 auto;
  padding: 44px 22px 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px;
  grid-template-areas: "titulo palco" "apoio palco" "vitrine vitrine"; align-items: center;
}
.otoo-filme__frente { display: contents; }
.otoo-filme__titulo { grid-area: titulo; align-self: end; }
.otoo-filme__apoio { grid-area: apoio; align-self: start; }
.otoo-filme__noite, .otoo-filme__letras, .otoo-filme__dica, .otoo-filme__cena, .otoo-filme__vidro { display: none; }

.otoo-filme__palco {
  grid-area: palco; position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center;
}
.otoo-filme__maquina { position: absolute; inset: 0; }
.otoo-filme__maquina img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* a sombra no chão, que o recorte da foto levou embora */
.otoo-filme__maquina::after {
  content: ""; position: absolute; left: 14%; right: 12%; bottom: 4.5%; height: 5%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 70%);
}

.otoo-etapas { display: grid; }
.otoo-etapa { grid-area: 1 / 1; }
html:not(.otoo-anima) .otoo-etapa:not([data-etapa="0"]) { display: none; }
.otoo-etapa h1, .otoo-etapa__titulo {
  margin: 0; font-size: clamp(2.3rem, 4.5vw, 4.4rem); font-weight: 700; line-height: .98;
  letter-spacing: -.04em; color: var(--text); transition: color .3s ease;
}
.otoo-filme__apoio p {
  margin: 18px 0 0; max-width: 380px; color: var(--muted); font-size: 1.08rem; transition: color .3s ease;
}
.otoo-filme__apoio .otoo-acoes { margin-top: 24px; }
.otoo-filme .otoo-rotulo { transition: color .3s ease; }

/* A vitrine: os produtos de verdade da loja. O cartão é sempre branco. */
.otoo-filme__vitrine {
  grid-area: vitrine; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px;
  max-width: 720px;
}
.otoo-oferta {
  --text: #111111; --muted: #57554f; --otoo-tinta: #111111; --otoo-papel: #ffffff;
  display: flex; flex-direction: column; padding: 14px; border-radius: var(--r);
  background: #ffffff; color: #111111; box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.otoo-oferta__foto { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #ffffff; }
.otoo-oferta__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.otoo-oferta__texto { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 4px 2px; }
.otoo-selo {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #111111;
}
.otoo-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--otoo-grad); }
.otoo-oferta h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.otoo-oferta__preco { margin: 6px 0 0; font-size: 1.3rem; letter-spacing: -.02em; }
.otoo-oferta__preco s { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); }
.otoo-oferta__acoes { width: 100%; margin-top: 12px; gap: 8px; flex-direction: column; }
.otoo-oferta__acoes .otoo-btn { width: 100%; min-height: 40px; padding: 0 10px; font-size: .88rem; }

@media (max-width: 860px) {
  .otoo-filme__tela {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "palco" "apoio" "vitrine";
    padding: 28px 16px 40px;
  }
  .otoo-filme__palco { max-width: 440px; }
  .otoo-filme__apoio p { margin-top: 6px; }
  .otoo-filme__vitrine { gap: 10px; margin-top: 28px; }
  .otoo-oferta { padding: 10px; }
  .otoo-oferta h3 { font-size: .9rem; }
  .otoo-oferta__preco { font-size: 1.08rem; }
}

/* ----- o filme com movimento -----
   A seção fica alta e a tela fica presa (sticky). O otoo.js transforma a rolagem em:
     --p  o avanço do filme inteiro (0 a 1)        data-fase  a etapa do texto (0 a 3)
     --l  o quanto as letras gigantes aparecem     --z  o quanto a cena cresceu
     --e  o quanto escureceu (a noite)             --v  a entrada da vitrine
     --k  até que tamanho a cena cresce (medido pela altura da tela) */
.otoo-anima .otoo-filme { height: 215vh; }
.otoo-anima .otoo-filme__tela {
  position: sticky; top: var(--appbar-h); display: block; max-width: none; padding: 0;
  height: calc(100vh - var(--appbar-h)); height: calc(100dvh - var(--appbar-h));
}
.otoo-anima .otoo-filme__noite {
  display: block; position: absolute; inset: 0; background: var(--otoo-noite); opacity: var(--e);
}
/* a frase da marca, enorme, na faixa de cima: passa por trás do topo da impressora */
.otoo-anima .otoo-filme__letras { display: block; position: absolute; inset: 0; opacity: var(--l); }
.otoo-filme__letras > div {
  position: absolute; left: 0; top: 3.5%; display: flex; gap: .32em; white-space: nowrap;
  font-size: min(18vw, 25vh); font-weight: 700; line-height: .84; letter-spacing: -.055em;
  color: var(--otoo-2); user-select: none; will-change: transform;
  transform: translate3d(calc(7% - var(--p) * 92%), 0, 0);
}
.otoo-anima .otoo-filme__palco {
  /* A impressora encosta na margem direita do conteúdo (dentro do quadro da foto, ela vai até
     83% da largura). Quando a câmera entra, a cena vem para o meio da tela. */
  --lado: min(86vh, 50vw, 820px);
  --x0: calc(50% + min(578px, 50vw - 22px) - var(--lado) * .333);
  position: absolute; z-index: 2; top: 50%;
  left: calc(var(--x0) * (1 - var(--z)) + 53% * var(--z) - 6% * var(--v));
  width: var(--lado); max-width: none; will-change: transform;
  transform: translate(-50%, -50%) scale(calc((1 + (var(--k) - 1) * var(--z)) * (1 - .3 * var(--v))));
}
/* cena A: os quadros do vidro, por cima da foto */
.otoo-anima .otoo-filme__vidro {
  display: block; position: absolute; left: 18%; top: 34%; width: 42.44%; height: 58.78%; opacity: 0;
}
.otoo-anima .otoo-filme__palco.is-viva .otoo-filme__vidro { opacity: 1; }
/* cena B: o quadro inteiro. As bordas se desfazem no fundo, cada vez mais conforme cresce. */
.otoo-anima .otoo-filme__cena {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  --fx: calc(5% + 12% * var(--z)); --fy: calc(2% + 7% * var(--z));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
                      linear-gradient(180deg, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
              linear-gradient(180deg, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.otoo-anima .otoo-filme__palco.is-cena .otoo-filme__cena { opacity: 1; }
.otoo-anima .otoo-filme__palco.is-cena .otoo-filme__maquina { visibility: hidden; }

.otoo-anima .otoo-filme__frente {
  position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; padding-top: 5vh; pointer-events: none;
}
.otoo-anima .otoo-filme__frente a { pointer-events: auto; }
.otoo-anima .otoo-filme__titulo, .otoo-anima .otoo-filme__apoio {
  align-self: flex-start; width: min(430px, 34vw); transition: opacity .3s ease, visibility 0s linear 0s;
}
/* enquanto a câmera entra na impressora, o texto sai da frente; volta quando escurece */
.otoo-anima .otoo-filme[data-zoom] :is(.otoo-filme__titulo, .otoo-filme__apoio) {
  opacity: 0; visibility: hidden; transition-delay: 0s, .3s;
}
.otoo-anima .otoo-etapa {
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.otoo-anima .otoo-filme[data-fase="0"] [data-etapa="0"], .otoo-anima .otoo-filme[data-fase="1"] [data-etapa="1"],
.otoo-anima .otoo-filme[data-fase="2"] [data-etapa="2"], .otoo-anima .otoo-filme[data-fase="3"] [data-etapa="3"] {
  opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s;
}
/* a vitrine entra de baixo, um cartão depois do outro, e fica flutuando */
.otoo-anima .otoo-filme__vitrine {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); margin: 0;
  display: flex; align-items: flex-start; gap: 16px; opacity: var(--v); visibility: hidden;
}
.otoo-anima .otoo-filme[data-fase="3"] .otoo-filme__vitrine { visibility: visible; }
.otoo-anima .otoo-oferta {
  width: clamp(190px, 15.5vw, 224px);
  transform: translateY(calc((1 - var(--v)) * (70px + var(--n) * 70px)));
  animation: otoo-flutua 5s ease-in-out calc(var(--n) * -2.5s) infinite alternate;
}
.otoo-anima .otoo-oferta:nth-child(2) { margin-top: 48px; }
@keyframes otoo-flutua { from { translate: 0 -5px; } to { translate: 0 5px; } }
.otoo-anima .otoo-filme__dica {
  display: block; position: absolute; left: 50%; bottom: 22px; margin: 0; transform: translateX(-50%);
  font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  opacity: calc(1 - var(--p) * 40);
}
.otoo-filme__dica span { display: inline-block; animation: otoo-desce 1.6s ease-in-out infinite; }
@keyframes otoo-desce { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

@media (max-width: 860px) {
  /* no celular: o texto em cima, a cena embaixo (acima da barra de navegação) */
  .otoo-anima .otoo-filme { height: 215vh; }
  /* as letras passam atrás dos rolos de filamento, no topo da impressora (a 14% da altura dela) */
  .otoo-filme__letras > div {
    top: auto; font-size: min(30vw, 15vh);
    bottom: calc(70px + min(96vw, calc(100vh - var(--appbar-h) - 300px)) * .86 - .42em);
    bottom: calc(70px + min(96vw, calc(100dvh - var(--appbar-h) - 300px)) * .86 - .42em);
  }
  .otoo-anima .otoo-filme__palco {
    left: 50%; top: auto; bottom: 70px;
    width: min(96vw, calc(100vh - var(--appbar-h) - 300px)); width: min(96vw, calc(100dvh - var(--appbar-h) - 300px));
    transform: translate(-50%, calc(var(--sobe, -60%) * var(--v)))
               scale(calc((1 + (var(--k) - 1) * var(--z)) * (1 - (1 - var(--mingua, .8)) * var(--v))));
  }
  .otoo-anima .otoo-filme__frente { justify-content: flex-start; padding: 18px 16px 0; }
  .otoo-anima .otoo-filme__titulo, .otoo-anima .otoo-filme__apoio { width: 100%; }
  .otoo-filme .otoo-rotulo { margin-bottom: 10px; font-size: .7rem; }
  .otoo-filme .otoo-rotulo::after { margin-top: 7px; }
  .otoo-etapa h1, .otoo-etapa__titulo { font-size: 2.15rem; }
  .otoo-etapa h1 br, .otoo-etapa__titulo br { display: none; }
  .otoo-filme__apoio p { margin-top: 8px; font-size: .95rem; }
  .otoo-filme__apoio .otoo-acoes { margin-top: 14px; gap: 8px; }
  .otoo-filme__apoio .otoo-btn { flex: 1 1 130px; min-height: 44px; padding: 0 10px; font-size: .88rem; white-space: nowrap; }
  /* com a vitrine na tela, o texto de apoio sai para o robô caber entre o título e os cartões */
  .otoo-anima .otoo-filme[data-fase="3"] .otoo-filme__apoio { opacity: 0; visibility: hidden; transition-delay: 0s, .3s; }
  .otoo-anima .otoo-filme__vitrine {
    left: 16px; right: 16px; top: auto; bottom: 74px; transform: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch;
  }
  .otoo-anima .otoo-oferta { width: auto; }
  .otoo-anima .otoo-oferta:nth-child(2) { margin-top: 0; }
  .otoo-anima .otoo-oferta__foto { aspect-ratio: auto; height: 88px; }
  .otoo-anima .otoo-oferta h3 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .otoo-anima .otoo-filme__dica { bottom: 74px; font-size: .8rem; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .otoo-anima .otoo-oferta__foto { height: 64px; }
  .otoo-anima .otoo-oferta__acoes .otoo-btn:not(.otoo-btn--cheio) { display: none; }
}

/* ---------- Os filamentos ---------- */
/* Sempre escuro, nos dois temas: o fundo é o mesmo do vídeo do carretel. */
.otoo-fios {
  --bg: #141414; --text: #f4f3f0; --muted: #b9b7b1; --border: #34322f;
  --otoo-tinta: #f4f3f0; --otoo-papel: #111111;
  position: relative; background: var(--otoo-noite); color: var(--text);
  scroll-margin-top: var(--appbar-h);
}
.otoo-fios__tela {
  display: grid; max-width: var(--maxw); margin: 0 auto; padding: 64px 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px;
  grid-template-areas: "titulo palco" "lista palco"; align-items: center;
}
.otoo-fios__frente { display: contents; }
.otoo-fios__titulo { grid-area: titulo; align-self: end; }
.otoo-fios__titulo h2 { margin: 0; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.otoo-fios__titulo p:not(.otoo-rotulo) { margin: 14px 0 22px; color: var(--muted); font-size: 1.05rem; }
.otoo-fios__palco { grid-area: palco; position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
/* as bordas do vídeo se desfazem no fundo (o chão dele é um pouco mais claro que a seção) */
.otoo-fios__palco img, .otoo-fios__palco canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                      linear-gradient(180deg, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
              linear-gradient(180deg, #000 89%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.otoo-fios__palco canvas { opacity: 0; }
.otoo-fios__palco.is-viva canvas { opacity: 1; }
.otoo-fios__palco.is-viva img { visibility: hidden; }
.otoo-fios__lista { grid-area: lista; align-self: start; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.otoo-fios__lista a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; color: var(--text);
  transition: color .25s ease, background-color .25s ease;
}
.otoo-fios__lista a:hover { background: rgba(255, 255, 255, .07); }
.otoo-fios__bolinha {
  width: 16px; height: 16px; border-radius: 50%; background: var(--cor, #8d9096);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.otoo-fios__nome { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.otoo-fios__preco { font-size: .95rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 860px) {
  .otoo-fios__tela { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "palco" "lista"; padding: 44px 16px; }
  .otoo-fios__palco { max-width: 380px; }
}

/* ----- os filamentos com movimento: o carretel gira com a rolagem e troca de cor ----- */
.otoo-anima .otoo-fios { height: 190vh; }
.otoo-anima .otoo-fios__tela {
  position: sticky; top: var(--appbar-h); display: block; max-width: none; padding: 0; overflow: hidden;
  height: calc(100vh - var(--appbar-h)); height: calc(100dvh - var(--appbar-h));
}
.otoo-anima .otoo-fios__palco {
  position: absolute; left: 50%; top: 50%; width: min(72vh, 46vw, 660px); max-width: none;
  transform: translate(-50%, -50%);
}
.otoo-anima .otoo-fios__frente { display: block; position: relative; height: 100%; }
.otoo-anima .otoo-fios__titulo {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: min(360px, 27vw);
}
.otoo-anima .otoo-fios__lista {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: min(350px, 28vw);
}
.otoo-anima .otoo-fios__lista a { color: #8a8882; }
.otoo-anima .otoo-fios__lista li.is-ativo a { color: var(--text); background: rgba(255, 255, 255, .08); }
@media (max-width: 860px) {
  .otoo-anima .otoo-fios { height: 190vh; }
  .otoo-anima .otoo-fios__palco { top: 52%; width: min(92vw, 46vh); width: min(92vw, 46dvh); }
  .otoo-anima .otoo-fios__titulo { left: 16px; right: 16px; top: 18px; transform: none; width: auto; }
  .otoo-fios__titulo h2 br { display: none; }
  .otoo-anima .otoo-fios__titulo p:not(.otoo-rotulo) { margin: 8px 0 0; font-size: .95rem; }
  .otoo-anima .otoo-fios__titulo .otoo-btn { display: none; }
  /* no celular só o filamento da vez aparece, embaixo do carretel */
  .otoo-anima .otoo-fios__lista { left: 16px; right: 16px; top: auto; bottom: 78px; transform: none; width: auto; }
  .otoo-anima .otoo-fios__lista li:not(.is-ativo) { display: none; }
}

/* ---------- O fio e as seções ---------- */
/* O fio desce em zigue-zague pelas margens (o otoo.js desenha o caminho num SVG por cima
   das seções). --pad é a margem de cada lado, --fx a distância do fio até a borda, --no o
   tamanho do anel e --cruza a altura em que o fio cruza de um lado para o outro. */
.otoo-home { overflow-x: clip; }
/* A trilha é um pouco mais larga que o resto da página: o fio corre por fora e o conteúdo
   fica com a mesma largura. Entre o fio e o conteúdo sobram --pad menos --fx. */
.otoo-trilha {
  --pad: clamp(72px, 8vw, 112px); --fx: 28px; --no: 26px; --cruza: 64px;
  position: relative; z-index: 0; max-width: calc(var(--maxw) + 96px); padding: 0 var(--pad) 72px;
}
.otoo-fio { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.otoo-fio path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.otoo-fio__trilho { stroke: var(--border); stroke-width: 2; }
.otoo-fio__linha { stroke: url(#otoo-fio-g); stroke-width: 4; }
.otoo-secao { position: relative; padding-top: 128px; scroll-margin-top: calc(var(--appbar-h) - 64px); }
/* O anel de cada seção: um "O" da marca que acende quando o fio chega. Fica em cima do fio,
   do lado por onde ele desce. */
.otoo-no {
  position: absolute; z-index: 3; top: 130px; left: calc(var(--fx) - var(--pad) - var(--no) / 2);
  width: var(--no); height: var(--no); border-radius: 50%;
  border: calc(var(--no) * .27) solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(var(--border-hover), var(--border-hover)) border-box;
  transition: transform .3s ease;
}
.otoo-secao.is-direita > .otoo-no { left: auto; right: calc(var(--fx) - var(--pad) - var(--no) / 2); }
.otoo-secao.is-ativa > .otoo-no {
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--otoo-grad) border-box;
  transform: scale(1.12);
}

/* A seção aparece no lugar, sem se mexer: só a opacidade, quando entra na tela. */
/* (só com o movimento e com o script ligado: sem eles, nada fica escondido) */
.otoo-anima.otoo-js [data-imprime] { opacity: 0; transition: opacity .8s ease; }
.otoo-anima.otoo-js [data-imprime].is-impressa { opacity: 1; }

/* A faixa escura: uma seção de ponta a ponta no preto do manual, para dar contraste e ritmo.
   As variáveis mudam só dentro dela, e tudo o que está dentro acompanha. */
.otoo-secao--faixa {
  --bg: #111111; --text: #f4f3f0; --muted: #b9b7b1; --surface: #1d1d1d; --card: #1d1d1d;
  --border: #34322f; --border-hover: #55524d; --otoo-tinta: #f4f3f0; --otoo-papel: #111111;
  color: var(--text); padding-top: 172px; padding-bottom: 72px;
}
.otoo-secao--faixa::before {
  content: ""; position: absolute; z-index: -1; top: 104px; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%); background: var(--bg);
}
.otoo-secao--faixa > .otoo-no { top: 174px; }
html[data-theme="dark"] .otoo-secao--faixa { --bg: #1c1c1c; --surface: #262626; --card: #262626; }

@media (max-width: 860px) {
  .otoo-trilha { --pad: 34px; --fx: 9px; --no: 18px; --cruza: 44px; padding-bottom: 40px; }
  .otoo-fio__linha { stroke-width: 3; }
  .otoo-secao { padding-top: 88px; }
  .otoo-no { top: 90px; }
  .otoo-secao--faixa { padding-top: 120px; padding-bottom: 48px; }
  .otoo-secao--faixa::before { top: 72px; }
  .otoo-secao--faixa > .otoo-no { top: 122px; }
}

/* ---------- Os motivos ---------- */
/* Cada cartão tem um ícone 3D que sai pela borda de cima, para dar profundidade. Os ícones
   foram gerados no degradê da marca e ficam na pasta do tema (a loja troca depois). */
.otoo-motivos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 46px; }
.otoo-motivo {
  position: relative; padding: 78px 22px 24px; border-radius: var(--r); background: var(--card);
  border: 1.5px solid var(--border); transition: transform .25s ease, border-color .25s ease;
}
.otoo-motivo:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.otoo-motivo h3 { margin: 0 0 6px; font-size: 1.05rem; }
.otoo-motivo p { margin: 0; color: var(--muted); font-size: .92rem; }
.otoo-motivo__icone {
  position: absolute; left: 16px; top: -46px; width: 108px; height: 108px; object-fit: contain;
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.otoo-motivo:hover .otoo-motivo__icone { transform: translateY(-6px) rotate(-5deg) scale(1.06); }
@media (max-width: 1020px) { .otoo-motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 58px; } }
@media (max-width: 480px) {
  .otoo-motivos { gap: 12px; row-gap: 50px; }
  .otoo-motivo { padding: 62px 16px 18px; }
  .otoo-motivo__icone { width: 88px; height: 88px; top: -40px; left: 10px; }
}

/* ---------- Os produtos (o cartão é o do padrão, com o acabamento da OTOO) ---------- */
.otoo .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1020px) { .otoo .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .otoo .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.otoo .product-card { border-radius: var(--r); border: 1.5px solid var(--border); }
.otoo .product-card__media { background: var(--surface); height: auto; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
/* a foto do produto inteira, no fundo branco dela, e um zoom leve ao passar o mouse */
.otoo .product-card__media:has(img) { background: #ffffff; }
.otoo .product-card__media img { object-fit: contain; padding: 4%; transition: transform .45s ease; }
.otoo .product-card:hover .product-card__media img { transform: scale(1.06); }
/* sem foto: o anel da marca no lugar do emoji do padrão */
.otoo .product-card__media > span { font-size: 0; }
.otoo .product-card__media > span::before {
  content: ""; display: block; width: 56px; height: 56px; border-radius: 50%;
  border: 14px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--otoo-grad) border-box;
}
.otoo .product-card__meta { display: none; }
.otoo .price-old { display: block; margin: 0 0 2px; }
.otoo .product-card__cat { color: var(--primary); }
.otoo .price { font-weight: 700; }

.otoo-pilulas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; }
.otoo-pilula {
  flex: none; padding: 9px 16px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.otoo-pilula.is-active { background: var(--otoo-tinta); color: var(--otoo-papel); border-color: var(--otoo-tinta); }

/* ---------- As categorias ---------- */
/* Blocos sempre escuros (no claro e no escuro), com o banner 3D da categoria por trás e o
   nome por cima, à esquerda. Sem imagem, fica o anel da marca. */
.otoo-categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.otoo-categoria {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 280px; padding: 24px; border-radius: var(--r-lg); overflow: hidden;
  background: #111111; color: #ffffff; transition: transform .25s ease;
}
html[data-theme="dark"] .otoo-categoria { box-shadow: inset 0 0 0 1px var(--border); }
.otoo-categoria:hover { transform: translateY(-4px); }
.otoo-categoria img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%;
  transition: transform .6s ease;
}
.otoo-categoria:hover img { transform: scale(1.05); }
/* um véu escuro à esquerda, para o nome ter leitura por cima da imagem */
.otoo-categoria::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .35) 46%, rgba(17, 17, 17, 0) 70%);
}
.otoo-categoria__anel {
  position: absolute; right: -34px; top: -34px; width: 150px; height: 150px; border-radius: 50%;
  border: 34px solid transparent;
  background: linear-gradient(#111111, #111111) padding-box, var(--otoo-grad) border-box;
  transition: transform .5s ease;
}
.otoo-categoria:hover .otoo-categoria__anel { transform: rotate(60deg) scale(1.05); }
.otoo-categoria__nome { position: relative; z-index: 1; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.otoo-categoria__ver { position: relative; z-index: 1; margin-top: 6px; font-size: .9rem; font-weight: 600; opacity: .8; }
.otoo-categoria__ver::before {
  content: ""; display: block; width: 36px; height: 4px; margin-bottom: 12px; border-radius: 2px;
  background: var(--otoo-grad);
}
@media (max-width: 860px) {
  .otoo-categorias { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .otoo-categoria { min-height: 190px; padding: 18px; }
  .otoo-categoria__anel { width: 96px; height: 96px; border-width: 22px; right: -22px; top: -22px; }
  .otoo-categoria__nome { font-size: 1.2rem; }
}

/* ---------- Marcas, sobre, avaliações e Instagram ---------- */
/* o título da seção com um botão ao lado (Ver no Google, Seguir a OTOO) */
.otoo-topo-secao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.otoo-topo-secao .otoo-cabeca { margin-bottom: 0; }
.otoo-nota { margin: 14px 0 0; font-size: .8rem; font-weight: 600; color: var(--muted); }

.otoo-marcas { display: flex; flex-wrap: wrap; gap: 14px; }
.otoo-marcas span {
  display: grid; gap: 2px; padding: 20px 30px; border-radius: var(--r); border: 1.5px solid var(--border);
  background: var(--surface);
}
.otoo-marcas strong { font-size: 1.3rem; letter-spacing: -.02em; }
.otoo-marcas small { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }

.otoo-sobre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.otoo-sobre p { margin: 0 0 12px; color: var(--muted); font-size: 1.08rem; max-width: 520px; }
.otoo-sobre .otoo-cabeca h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.otoo-sobre p.otoo-sobre__frase { margin-top: 22px; color: var(--text); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
/* o mascote acenando: a arte tem fundo preto, e o "lighten" some com ele na faixa escura */
.otoo-sobre__mascote { justify-self: center; width: min(100%, 400px); }
.otoo-sobre__mascote img { width: 100%; height: auto; display: block; mix-blend-mode: lighten; }

.otoo-avaliacoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.otoo-avaliacao {
  display: flex; flex-direction: column; margin: 0; padding: 24px; border-radius: var(--r);
  background: var(--card); border: 1.5px solid var(--border);
}
.otoo-estrelas { font-size: 1.15rem; letter-spacing: .12em; color: var(--otoo-2); }
.otoo-avaliacao blockquote { margin: 12px 0 20px; font-size: 1.05rem; line-height: 1.45; }
.otoo-avaliacao figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.otoo-avaliacao figcaption > span:last-child { display: grid; }
.otoo-avaliacao small { color: var(--muted); font-size: .8rem; }
.otoo-avaliacao__inicial {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--otoo-tinta); color: var(--otoo-papel); font-weight: 700;
}

.otoo-instagram { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.otoo-post { display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--surface); }
.otoo-post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.otoo-post:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
  .otoo-sobre { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .otoo-avaliacoes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .otoo-avaliacao { padding: 18px; }
  .otoo-instagram { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .otoo-post { border-radius: 12px; }
  .otoo-marcas span { padding: 16px 22px; }
}

/* ---------- O showroom e o mapa ---------- */
.otoo-showroom {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end;
  margin-bottom: 28px;
}
.otoo-showroom .otoo-cabeca { margin-bottom: 0; }
.otoo-showroom p { margin: 0 0 8px; color: var(--muted); font-size: 1.05rem; max-width: 520px; }
.otoo-showroom .otoo-acoes { margin-top: 16px; }
.otoo-showroom__endereco { color: var(--text) !important; font-weight: 600; }
/* O mapa: os dois fios entram pelos lados na altura do meio. A capa, da cor do fundo, cobre
   o que eles ainda não "imprimiram" e some quando os dois chegam ao pino. */
.otoo-mapa { position: relative; height: 380px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.otoo-mapa__ruas {
  position: absolute; inset: 0;
  background:
    linear-gradient(118deg, transparent 0 46.5%, var(--card) 46.5% 49%, transparent 49%),
    linear-gradient(62deg, transparent 0 68%, var(--card) 68% 69.6%, transparent 69.6%),
    repeating-linear-gradient(0deg, transparent 0 62px, var(--card) 62px 70px),
    repeating-linear-gradient(90deg, transparent 0 104px, var(--card) 104px 112px);
}
.otoo-mapa__capa { display: none; position: absolute; top: 0; bottom: 0; left: var(--capa, 0px); right: var(--capa, 0px); background: var(--bg); }
.otoo-anima.otoo-js .otoo-mapa:not(.is-pronto) .otoo-mapa__capa { display: block; }
.otoo-mapa__pino {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; border: 13px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, var(--otoo-grad) border-box;
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.otoo-mapa__placa {
  position: absolute; left: 50%; top: calc(50% + 38px); transform: translateX(-50%);
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--otoo-tinta); color: var(--otoo-papel); font-size: .85rem; font-weight: 600;
  transition: opacity .3s ease .2s;
}
.otoo-anima.otoo-js .otoo-mapa:not(.is-pronto) .otoo-mapa__pino { transform: scale(0); }
.otoo-anima.otoo-js .otoo-mapa:not(.is-pronto) .otoo-mapa__placa { opacity: 0; }
.otoo-mapa__nota { position: absolute; right: 14px; bottom: 10px; font-size: .72rem; font-weight: 600; color: var(--muted); }
@media (max-width: 860px) {
  .otoo-showroom { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .otoo-mapa { height: 260px; }
  .otoo-mapa__placa { font-size: .78rem; padding: 7px 12px; }
}

/* ---------- O carrossel dos mais vendidos ---------- */
/* Uma fileira que rola para o lado, com as setas no alto. O último cartão aparece cortado,
   para mostrar que tem mais. */
.otoo-setas { display: flex; gap: 8px; }
.otoo-seta {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text); cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.otoo-seta:hover:not(:disabled) { border-color: var(--text); }
.otoo-seta:disabled { opacity: .35; cursor: default; }
.otoo-carrossel__trilho {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 2px 12px; overscroll-behavior-x: contain;
}
.otoo-carrossel__trilho::-webkit-scrollbar { display: none; }
.otoo-carrossel__item { position: relative; flex: 0 0 calc((100% - 3 * 18px) / 4.25); scroll-snap-align: start; }
.otoo-carrossel__item .card-wrap, .otoo-carrossel__item .product-card { height: 100%; }
.otoo-carrossel__posicao {
  position: absolute; z-index: 2; left: 14px; top: 14px; display: grid; place-items: center;
  min-width: 36px; height: 26px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--otoo-tinta); color: var(--otoo-papel); font-size: .78rem; font-weight: 700;
}
@media (max-width: 1020px) { .otoo-carrossel__item { flex-basis: calc((100% - 2 * 18px) / 3.2); } }
@media (max-width: 860px) {
  .otoo-setas { display: none; }
  .otoo-carrossel__trilho { gap: 12px; }
  .otoo-carrossel__item { flex-basis: calc((100% - 12px) / 2.15); }
}

/* ---------- A faixa do orçamento ---------- */
/* Um bloco escuro, com a frase e a foto das artes da marca. */
.otoo-convite {
  --bg: #111111; --text: #f4f3f0; --muted: #b9b7b1; --otoo-tinta: #f4f3f0; --otoo-papel: #111111;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg);
  overflow: hidden; background: #111111; color: var(--text);
}
html[data-theme="dark"] .otoo-convite { box-shadow: inset 0 0 0 1px var(--border); }
.otoo-convite__texto { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4.5vw, 60px); }
.otoo-convite h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.02; letter-spacing: -.035em; }
.otoo-convite p:not(.otoo-rotulo) { margin: 16px 0 24px; max-width: 400px; color: var(--muted); font-size: 1.08rem; }
.otoo-convite__foto img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .otoo-convite { grid-template-columns: minmax(0, 1fr); }
  .otoo-convite__foto { order: -1; }
  .otoo-convite__foto img { min-height: 0; aspect-ratio: 4 / 3; }
  .otoo-convite h2 br { display: none; }
}

/* ---------- O chat ---------- */
/* O robô da marca num balão de conversa, no canto: abre o WhatsApp da loja. */
.otoo-chat {
  position: fixed; z-index: 25; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px;
  transition: transform .2s ease, opacity .25s ease;
}
.otoo-chat img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .24)); }
.otoo-chat:hover, .otoo-chat:focus-visible { transform: translateY(-3px); }
.otoo-chat__fala {
  padding: 9px 14px; border-radius: var(--r-pill); background: #111111; color: #ffffff;
  font-size: .86rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.otoo-chat:hover .otoo-chat__fala, .otoo-chat:focus-visible .otoo-chat__fala { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .otoo-chat { right: 14px; bottom: 86px; }       /* acima da barra de baixo */
  .otoo-chat img { width: 54px; height: 54px; }
  .otoo-chat__fala { display: none; }
  /* nas cenas presas (o filme e os filamentos), o chat sai da frente */
  html[data-otoo-cena] .otoo-chat { opacity: 0; pointer-events: none; }
}

/* ---------- O rodapé ---------- */
.otoo-rodape { margin-top: 0; background: #111111; color: #a5a39d; font-size: .92rem; }
html[data-theme="dark"] .otoo-rodape { background: #0a0a0a; border-top: 1px solid var(--border); }
.otoo-rodape__grade {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
  padding-top: 52px; padding-bottom: 40px;
}
.otoo-logo--rodape { width: 136px; height: 38px; }
.otoo-rodape__frase { margin: 16px 0 0; max-width: 300px; color: inherit; }
.otoo-rodape__redes { display: flex; gap: 10px; margin-top: 18px; }
.otoo-rede {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22); transition: border-color .15s ease, background-color .15s ease;
}
.otoo-rede:hover { border-color: #ffffff; background: rgba(255, 255, 255, .08); }
.otoo-rodape__assina { display: inline-flex; align-items: center; gap: 10px; }
.otoo-rodape__assina img { display: block; border-radius: 8px; }
.otoo-rodape h4 {
  margin: 0 0 14px; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: #ffffff; font-weight: 700;
}
.otoo-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.otoo-rodape p { margin: 0; line-height: 1.65; }
.otoo-rodape a { color: inherit; transition: color .15s ease; }
.otoo-rodape a:hover, .otoo-rodape__redes a { color: #ffffff; }
.otoo-rodape__fim { border-top: 1px solid rgba(255, 255, 255, .12); }
.otoo-rodape__fim-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 18px; padding-bottom: 18px; font-size: .82rem;
}
@media (max-width: 860px) {
  .otoo-rodape__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-top: 36px; }
  .otoo-rodape__grade > :first-child { grid-column: 1 / -1; }
  .otoo-rodape { padding-bottom: 76px; }  /* a barra de baixo do celular */
}

/* ---------- Menos movimento: a página parada não tem transição ---------- */
html:not(.otoo-anima) :is(.otoo-btn, .otoo-categoria, .otoo-categoria img, .otoo-categoria__anel, .otoo-no,
  .otoo-mapa__pino, .otoo-mapa__placa, .otoo .product-card__media img, .otoo-fios__lista a,
  .otoo-motivo, .otoo-motivo__icone, .otoo-post img, .otoo-chat, .otoo-chat__fala) { transition: none; }
html:not(.otoo-anima) .otoo-filme__dica span { animation: none; }