/* O portfólio no celular e no tablet em pé (até 820 px). As cinco cenas continuam deslizando de lado (arrastar, setas e contador),
   mas cada uma vira uma coluna que rola na vertical. O retrato da capa e as cartas da Sobre entram na própria cena
   (assets/celular.js?v=8d7f2514 move os dois e devolve no desktop), o menu vira um botão com painel e a galeria do Método vira
   uma faixa no alto. A classe .cel no palco liga tudo; nada daqui vale acima de 820 px. */

.cel-menu-bt, .cel-menu, .cel-base { display: none; }

[data-stage].cel { height: 100% !important; --nav-cel: 60px; --base-cel: 80px; }
[data-stage].cel > section[data-screen-label] { height: 100% !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; }
[data-stage].cel > section[data-screen-label]::-webkit-scrollbar { display: none; }
/* o "cabe" encolhe os blocos para caber numa tela só; aqui a cena rola, então nada encolhe */
[data-stage].cel [data-cabe] > * { zoom: 1 !important; }

/* ── menu: logo à esquerda, botão "menu" à direita, sobre vidro (o conteúdo rola por baixo) ── */
[data-stage].cel [data-nav] { padding: 10px 14px 10px 16px !important; background: rgba(241, 232, 211, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background .4s ease; }
[data-stage].cel.escuro [data-nav] { background: rgba(22, 20, 16, .58); }
[data-stage].cel [data-nav] > div { display: none !important; }
[data-stage].cel [data-logo-nav] { height: 36px !important; }
[data-stage].cel .cel-menu-bt { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid currentColor; background: none; color: #26241F; cursor: pointer; font: 500 12px/1 'IBM Plex Mono', monospace;
  letter-spacing: 1.6px; text-transform: uppercase; margin-left: auto; }
[data-stage].cel.escuro .cel-menu-bt { color: #F6F0E1; }
.cel-menu-bt i { position: relative; width: 16px; height: 10px; display: block; }
.cel-menu-bt i::before, .cel-menu-bt i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor; }
.cel-menu-bt i::before { top: 0; } .cel-menu-bt i::after { bottom: 0; right: 5px; }

/* o painel do menu: as cinco cenas em letra grande, a da vez com o marca-texto amarelo, e o PT/EN embaixo */
[data-stage].cel .cel-menu { display: flex; position: absolute; inset: 0; z-index: 80; flex-direction: column; padding: 14px 16px 28px;
  background: #F1E8D3; color: #26241F; opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .32s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s; }
[data-stage].cel.escuro .cel-menu { background: #1C1A16; color: #F6F0E1; }
[data-stage].cel .cel-menu.aberto { opacity: 1; visibility: visible; transform: none; transition: opacity .32s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.cel-menu-topo { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.cel-menu-topo img { height: 36px; display: block; }
.cel-menu-fecha { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 18px; border-radius: 999px; border: 1px solid currentColor;
  background: none; color: inherit; cursor: pointer; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: 1.6px; text-transform: uppercase; }
.cel-menu-fecha svg { width: 14px; height: 14px; }
.cel-menu ol { list-style: none; margin: auto 0; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; }
.cel-menu ol button { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 8px 4px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.cel-menu ol .n { font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: 1.6px; opacity: .6; min-width: 22px; }
.cel-menu ol .nome { font: 500 44px/1.05 'Cormorant Garamond', serif; letter-spacing: -.5px; padding: 0 6px 0 2px;
  background-image: linear-gradient(transparent 58%, #F2C40F 58%, #F2C40F 90%, transparent 90%); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .45s cubic-bezier(.22, 1, .36, 1); }
.cel-menu ol button[aria-current="true"] .nome { background-size: 100% 100%; font-style: italic; }
.cel-menu-pe { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.cel-menu-pe small { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: 1.6px; opacity: .6; }

/* ── a faixa de baixo: contador e setas sobre vidro; a dica de "role · arraste" sai (o gesto aqui é deslizar) ── */
[data-stage].cel .cel-base { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: var(--base-cel); z-index: 49; pointer-events: none;
  background: rgba(241, 232, 211, .74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: background .4s ease; }
[data-stage].cel.escuro .cel-base { background: rgba(22, 20, 16, .58); }
[data-stage].cel [data-hint] { display: none !important; }
[data-stage].cel > div:has(> [data-counter]) { left: 18px !important; bottom: 30px !important; gap: 12px !important; }
[data-stage].cel [data-dot] { width: 14px !important; }
[data-stage].cel > div:has(> [data-prev]) { right: 16px !important; bottom: 16px !important; }
[data-stage].cel [data-prev], [data-stage].cel [data-next] { width: 48px !important; height: 48px !important; }

/* ── Home: o retrato no alto, o texto centrado embaixo ── */
[data-stage].cel [data-hero-pad] { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px !important;
  height: auto !important; min-height: 100%; padding: calc(var(--nav-cel) + 10px) 20px calc(var(--base-cel) + 36px) !important; }
[data-stage].cel [data-hero-pad] > div:empty { display: none; }
[data-stage].cel [data-hero-portrait] { position: relative !important; left: auto !important; top: auto !important; transform: none !important;
  width: min(54vw, 230px) !important; opacity: 1 !important; order: -1; flex: none; margin: 0 auto; z-index: 2; }
[data-stage].cel [data-hero-col] { max-width: 440px !important; align-items: center; text-align: center; justify-self: auto !important; gap: 14px !important; }
[data-stage].cel [data-hero-col] > div { justify-content: center; }
[data-stage].cel [data-hero-col] h1 { font-size: 38px !important; }
[data-stage].cel [data-hero-col] p { font-size: 16px !important; }
[data-stage].cel [data-logo-hero] { width: 180px !important; margin: 0 auto; }

/* ── Sobre: as cartas no alto (no vão que já existia na grade), o texto embaixo ── */
[data-stage].cel { --h-carta: min(66vw, 40vh, 300px); }
[data-stage].cel section[data-screen-label="Sobre"] > [data-cabe] { display: flex !important; flex-direction: column; gap: 22px !important; height: auto !important;
  min-height: 100%; padding: calc(var(--nav-cel) + 34px) 20px calc(var(--base-cel) + 36px) !important; }
[data-stage].cel section[data-screen-label="Sobre"] > [data-cabe] > div:first-child { display: flex; justify-content: center; padding: 6px 0 4px; }
[data-stage].cel [data-sobre-portrait] { position: relative !important; left: auto !important; top: auto !important; margin: 0 !important;
  transform: none !important; opacity: 1 !important; z-index: 2 !important; }
[data-stage].cel section[data-screen-label="Sobre"] h2 { font-size: 34px !important; letter-spacing: -.5px !important; }
[data-stage].cel section[data-screen-label="Sobre"] p { font-size: 16px !important; }
[data-stage].cel section[data-screen-label="Sobre"] [data-md] > div[style*="gap: 3vw"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px !important; margin-top: 4px !important; }
[data-stage].cel section[data-screen-label="Sobre"] [data-md] > div[style*="gap: 3vw"] span[style*="font-size: 3vw"] { font-size: 36px !important; }

/* ── Método: só a caixa das etapas (título, abas 01 a 05 e as entregas). A galeria não carrega no celular
   (assets/exposicao.js?v=072ebeb0) e nada aqui se mexe sozinho ── */
[data-stage].cel .mt-cel .mt-fundo { display: none; }
[data-stage].cel .mt-cel .mt { height: auto; min-height: 100%; justify-content: flex-start;
  padding: calc(var(--nav-cel) + 26px) 16px calc(var(--base-cel) + 32px) !important; }
[data-stage].cel .mt-cel .mt-cab { grid-template-columns: minmax(0, 1fr); gap: 18px; }
[data-stage].cel .mt-cel .mt-titulo h2 { font-size: 34px; }
[data-stage].cel .mt-cel .mt-placa { padding: 16px 16px 18px; }
[data-stage].cel .mt-cel .mt-dica svg { animation: none; }

/* ── Portfólio: a cena inteira rola (não só a lista), duas polaroides por linha ── */
[data-stage].cel .port { display: block !important; height: auto !important; min-height: 100%;
  padding: calc(var(--nav-cel) + 20px) 16px calc(var(--base-cel) + 30px) !important; }
[data-stage].cel .port-cab { gap: 12px; }
[data-stage].cel .port-chips { margin: 6px -16px 0; padding: 2px 16px 6px; }
[data-stage].cel .port-grade { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 22px 2px 10px; gap: 22px 14px; }
[data-stage].cel .port-card b { font-size: 14px; }

/* ── Contato: o texto começa logo abaixo do menu ── */
[data-stage].cel [data-contato-pad] { height: auto !important; min-height: 100%; justify-content: center !important;
  padding: calc(var(--nav-cel) + 30px) 22px calc(var(--base-cel) + 36px) !important; }
[data-stage].cel [data-contato-h2] { font-size: 42px !important; }
[data-stage].cel [data-contato-cta] a { padding: 16px 24px !important; }

/* os círculos e grafismos soltos passam por trás do texto (no desktop alguns voam na frente, com a tela larga
   eles não cruzam o que se lê; na coluna estreita cruzariam) */
[data-stage].cel > [data-deco] { z-index: 1 !important; opacity: .6; }
@media (max-width: 359px) { [data-stage].cel [data-dot] { width: 9px !important; } [data-stage].cel > div:has(> [data-dot]) > div { gap: 5px !important; } }

/* no tablet em pé cabem três polaroides por linha */
@media (min-width: 600px) { [data-stage].cel .port-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; } }