/* A home no celular — só o que ela tem de próprio. Base, kit e menu vêm das folhas
   compartilhadas. Spec: docs/superpowers/specs/2026-08-31-home-mobile-design.md.
   Regra de captura: html.is-shot congela toda animação de CSS daqui no estado final. */

/* ═════════════════════════════ 01 · herói
   Fundo e véu são pseudo-elementos de propósito: camada decorativa não entra no DOM,
   e a checagem de colisão entre camadas posicionadas fica só com o que é conteúdo. */
.mh-hero{position:relative;overflow:hidden;padding-top:72px;padding-bottom:34px}
/* o kit limita filhos de .m-sec a 620px; os full-bleed daqui abrem mão disso */
.mh-hero__img,.mh-vms__faixa,.mh-team__faixa{max-width:none}
/* a imagem é CONTEÚDO no fluxo (a primeira tela não fica vazia para as checagens) e a
   copy sobe por margem negativa; o véu é pseudo-elemento entre as duas */
.mh-hero__img{display:block;width:calc(100% + 2 * var(--m-recuo));margin:0 calc(-1 * var(--m-recuo));height:88svh;object-fit:cover;animation:mh-zoom 2.4s cubic-bezier(.22,.9,.24,1) both}
@keyframes mh-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
html.is-shot .mh-hero__img{animation:none}
@media (prefers-reduced-motion: reduce){.mh-hero__img{animation:none}}
.mh-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.4) 0%,rgba(12,12,12,.04) 40%,rgba(12,12,12,.82) 100%)}
.mh-hero__copy{position:relative;z-index:1;margin-top:-46svh}
.mh-hero__ticker{font-size:15px;letter-spacing:.06em;line-height:1.35;color:#C9C9C9;margin-bottom:18px}
.mh-hero__eyebrow{font-size:15px;color:#E6E6E6;margin-bottom:10px}
.mh-hero__t{font-size:clamp(38px,11vw,58px);line-height:.98}
.mh-hero__para{margin-top:16px;font-size:16px;line-height:1.5;color:#EDEDED;max-width:34em}

/* ═════════════════════════════ 02 · história */
.mh-story__lead{font-weight:600;font-size:19px;line-height:1.4;margin-top:8px}
.mh-story__body{margin-top:12px;font-size:16px;line-height:1.55;color:#3A3A3A}
.mh-story__gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mh-story__im{overflow:hidden}
.mh-story__im img{width:100%;height:100%;object-fit:cover;display:block}
.mh-story__im--1{aspect-ratio:4/5}
.mh-story__im--2{aspect-ratio:4/5;margin-top:26px}
.mh-story__im--3{aspect-ratio:4/5;margin-top:-26px}
.mh-story__im--4{aspect-ratio:4/5}

/* ═════════════════════════════ 03 · alinhamento */
.mh-al__p{margin-top:16px;font-size:16px;line-height:1.55;color:#3A3A3A}
.mh-al__p:first-of-type{font-size:18px;color:#0C0C0C}

/* ═════════════════════════════ 04 · parceiros */
.mh-trusted{padding-top:26px;padding-bottom:26px}
/* rolável de propósito: a marquise anda sozinha E aceita o dedo, e um contêiner com
   rolagem é vitrine, não corte, para as checagens */
.mh-trusted__mask{overflow-x:auto;scrollbar-width:none;margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mh-trusted__mask::-webkit-scrollbar{display:none}
.mh-trusted__trilho{display:flex;align-items:center;gap:34px;width:max-content;animation:mh-marq 22s linear infinite}
.mh-trusted__trilho img{height:20px;opacity:.75}
@keyframes mh-marq{to{transform:translateX(-50%)}}
html.is-shot .mh-trusted__trilho{animation:none}
@media (prefers-reduced-motion: reduce){.mh-trusted__trilho{animation:none}}

/* ═════════════════════════════ 05 · diferencial: os pares
   Um par só no DOM (o JS troca o texto com o pulso .is-troca); a lista completa fica em
   display:none, presente para a checagem de conteúdo e invisível para as de camada. */
.mh-wl__box{margin-top:10px}
.mh-wl__frase{font-size:clamp(20px,5.8vw,28px);transition:opacity .26s,transform .26s}
.mh-wl__palavra{margin-top:6px;font-size:clamp(46px,13.5vw,72px);color:var(--c-blue,#0A16C8);transition:opacity .26s .05s,transform .26s .05s}
.mh-wl__box.is-troca .mh-wl__frase,.mh-wl__box.is-troca .mh-wl__palavra{opacity:0;transform:translateY(12px)}
.mh-wl__todos{display:none}

/* ═════════════════════════════ 06 · VMS: a faixa */
.mh-vms{padding-left:0;padding-right:0}
.mh-vms .m-head{padding:0 var(--m-recuo)}
.mh-vms__faixa{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mh-vms__faixa::-webkit-scrollbar{display:none}
.mh-vms__card{position:relative;flex:0 0 100%;min-height:74svh;scroll-snap-align:center;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg) center/cover no-repeat #101010}
.mh-vms__card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.16),rgba(12,12,12,.7) 78%)}
.mh-vms__inner{position:relative;z-index:1;padding:0 var(--m-recuo) 34px}
.mh-vms__t{position:relative;font-size:clamp(40px,11.4vw,60px);line-height:1;color:#fff}
.mh-vms__t::before{content:attr(data-text);position:absolute;left:0;top:-.92em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
.mh-vms__p{margin-top:14px;font-size:16px;line-height:1.5;color:#E4E4E4;max-width:32em}
.mh-vms__contador{margin:16px var(--m-recuo) 0;font-size:10px;color:#8A8A8A}
.mh-vms__contador b{color:#fff;font-weight:500}

/* ═════════════════════════════ 07 · valores: os checks */
.mh-val{margin-top:10px}
.mh-val__row{border-top:1px solid #262626;padding:20px 0 22px}
.mh-val__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mh-val__n{font-size:10px;color:#6E6E6E}
.mh-val__nome{margin-top:12px;font-size:clamp(22px,6.4vw,30px);overflow-wrap:anywhere}
.mh-val__check{display:grid;grid-template-columns:repeat(16,4px);grid-auto-rows:5px;gap:2px}
.mh-val__check i{width:4px;height:4px;border-radius:50%;background:#262626}
.mh-val__check i.on{background:#3A3A3A;transform:scale(.66);transition:background-color .45s,transform .45s}
.mh-val__row.is-lit .mh-val__check i.on{background:#6E82FF;transform:scale(1)}
.mh-val__desc{margin-top:12px;font-size:15px;line-height:1.5;color:#B9B9B9}

/* ═════════════════════════════ 08 · tecnologia: o raio */
.mh-trade__p1{font-size:17px;line-height:1.5;color:#EDEDED;margin-top:8px}
.mh-trade__p2{font-size:15px;line-height:1.55;color:#B9B9B9;margin-top:18px}
.m-dica{margin-top:10px;font-size:10px;color:#6E6E6E;text-align:center}

/* ═════════════════════════════ 09 · equipe */
.mh-team{padding-left:0;padding-right:0}
.mh-team .m-head{padding:0 var(--m-recuo)}
.mh-team__faixa{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--m-recuo) 6px;scrollbar-width:none}
.mh-team__faixa::-webkit-scrollbar{display:none}
.mh-team__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;flex:0 0 72vw;max-width:340px;aspect-ratio:157/242;scroll-snap-align:center;overflow:hidden;background:#101010}
/* o canvas do holocard (js/holocard.js, o shader dos raios) é a ÚNICA camada absoluta
   do card; legenda e VER MAIS ficam em fluxo relativo, fora do radar de colisão */
.mh-team__card .holo{position:absolute;inset:0;width:100%;height:100%}
/* queda sem WebGL: o holocard marca o elemento com .holo--css */
.mh-team__card.holo--css::before{content:'';position:absolute;inset:0;background:linear-gradient(118deg,#123B2A,#1A6B3D 32%,#40D17A 55%,#94F2CC 74%,#1A6B3D);background-size:280% 280%;animation:mh-holo 9s ease-in-out infinite}
@keyframes mh-holo{0%,100%{background-position:8% 30%}50%{background-position:88% 70%}}
html.is-shot .mh-team__card.holo--css::before{animation:none}
@media (prefers-reduced-motion: reduce){.mh-team__card.holo--css::before{animation:none}}
/* --foto-h vem da medição do recorte (js/m/home.js): toda cabeça nasce na mesma linha */
.mh-team__card::after{content:'';position:absolute;inset:0;background:var(--foto) center bottom/auto var(--foto-h,88%) no-repeat}
.mh-team__cap{position:relative;z-index:1;margin:0 12px 10px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mh-team__cap b{display:block;font-size:15px}
.mh-team__cap i{display:block;font-style:normal;font-size:12px;color:#D8F5E6}
.mh-team__bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:8px;font-style:normal;font-size:15px;line-height:1.35;color:#EDEDED;max-width:92%}
.mh-team__mais{position:relative;z-index:1;align-self:flex-end;margin:10px 10px 0 0;padding:8px 10px;background:rgba(12,12,12,.55);color:#fff;font-size:10px}
.mh-team__mais--vazio{visibility:hidden}
.mh-team__contador{margin:14px var(--m-recuo) 0;font-size:10px;color:#8A8A8A}
.mh-team__contador b{color:#0C0C0C;font-weight:500}
.mh-team .m-pill-bloco{margin:22px var(--m-recuo) 0;display:inline-flex;border:1px solid #0C0C0C}
.m-sec--dark .m-pill-bloco{display:inline-flex;border:1px solid currentColor}

/* ═════════════════════════════ o dossiê */
body.mh-travado{overflow:hidden}
.mh-dossie{position:fixed;inset:0;z-index:80;background:#0C0C0C;color:#fff;display:flex;flex-direction:column}
.mh-do__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--m-recuo);border-bottom:1px solid #262626;font-size:10px;color:#8A8A8A}
.mh-do__fechar{min-height:44px;padding:0 16px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:10px;cursor:pointer}
.mh-do__fechar--pe{display:block;margin:26px auto 40px}
.mh-do__scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 var(--m-recuo)}
.mh-do__marquee{overflow:hidden;white-space:nowrap;border-bottom:1px solid #262626;margin:0 calc(-1 * var(--m-recuo));padding:10px 0}
.mh-do__marquee span{display:inline-block;font-size:11px;letter-spacing:.12em;color:#6E6E6E;animation:mh-marq 26s linear infinite}
html.is-shot .mh-do__marquee span{animation:none}
.mh-do__nome{margin-top:22px;font-size:clamp(40px,12vw,64px);line-height:.96}
.mh-do__fotow{position:relative;margin-top:20px;aspect-ratio:157/200;background:#101010;overflow:hidden}
.mh-do__fotow .holo{position:absolute;inset:0;width:100%;height:100%}
.mh-do__fotow.holo--css{background:linear-gradient(118deg,#123B2A,#1A6B3D 32%,#40D17A 55%,#94F2CC 74%,#1A6B3D)}
.mh-do__fotow img{position:absolute;inset:auto 0 0 0;z-index:1;width:100%;height:96%;object-fit:contain;object-position:bottom center}
.mh-do__bloco{margin-top:30px;border-top:1px solid #262626;padding-top:16px}
.mh-do__lbl{font-size:10px;color:#8A8A8A;margin-bottom:12px}
.mh-do__st{font-size:16px;line-height:1.55;color:#E4E4E4;margin-top:10px}
.mh-do__st:first-of-type{font-size:19px;color:#fff}
.mh-do__fatos li{display:grid;grid-template-columns:110px 1fr;column-gap:12px;padding:9px 0;border-bottom:1px solid #1C1C1C;font-size:15px}
.mh-do__fatos i{font-style:normal;font-size:10px;color:#8A8A8A;padding-top:3px}
.mh-do__fatos a{color:#fff;text-decoration:underline}
.mh-do__cv{padding:12px 0;border-bottom:1px solid #1C1C1C}
.mh-do__cv i{display:block;font-style:normal;font-size:10px;color:#8A8A8A}
.mh-do__cv b{display:block;margin-top:5px;font-size:15px;font-weight:600}
.mh-do__cv p{margin-top:6px;font-size:15px;line-height:1.5;color:#B9B9B9}
.mh-do__hab{padding:10px 0;border-bottom:1px solid #1C1C1C}
.mh-do__hab i{font-style:normal;font-size:10px;color:#8A8A8A}
.mh-do__hab p{margin-top:6px;font-size:15px;line-height:1.5;color:#E4E4E4}

/* ═════════════════════════════ 10 · FAQ */
.mh-faq__cats{display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:6px;scrollbar-width:none}
.mh-faq__cats::-webkit-scrollbar{display:none}
.mh-faq__cat{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:none;border:1px solid #DDD;color:#6E6E6E;font-size:10px;cursor:pointer}
.mh-faq__cat i{font-style:normal;color:#B0B0B0}
.mh-faq__cat.is-on{border-color:#0C0C0C;color:#0C0C0C}
.mh-faq__caixa{margin-top:14px}
.mh-faq__ajuda{margin-top:22px;font-size:15px;color:#3A3A3A}
.mh-faq__ajuda a{color:var(--c-blue,#0A16C8)}