/* =========================================================
   Tucano Members — Landing Page
   ========================================================= */

/* ---------- Fontes (hospedadas no site; latin e latin-ext do Google Fonts) ---------- */
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2?v=2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/permanent-marker-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback com as métricas do Inter (uma face por peso, calibrada pela largura do texto): enquanto o Inter carrega,
   o texto quebra nas mesmas linhas, sem layout shift */
@font-face { font-family: "Inter Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"), local("Helvetica"); size-adjust: 106.64%; ascent-override: 90.84%; descent-override: 22.71%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"), local("Helvetica"); size-adjust: 107.67%; ascent-override: 89.97%; descent-override: 22.49%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 101.55%; ascent-override: 95.40%; descent-override: 23.85%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 102.51%; ascent-override: 94.50%; descent-override: 23.63%; line-gap-override: 0%; }

/* Fallback do Bricolage calibrado no tamanho do título do hero no celular (~40px) */
@font-face { font-family: "Bricolage Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"), local("Helvetica"); size-adjust: 103.0%; }
@font-face { font-family: "Bricolage Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 98.2%; }
@font-face { font-family: "Bricolage Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 99.5%; }
@font-face { font-family: "Bricolage Fallback"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"); size-adjust: 100.7%; }

/* @icons:start (gerado por tools/subset-icons.py) */
/* Remix Icon v4.9.1 (https://remixicon.com, Remix Icon License 1.0): só os ícones usados na página */
@font-face { font-family: "remixicon"; src: url("../fonts/remixicon.woff2?v=188") format("woff2"); font-display: block; }
[class^="ri-"], [class*=" ri-"] { font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ri-add-box-line:before { content: "\ea0f"; }
.ri-add-line:before { content: "\ea13"; }
.ri-arrow-down-circle-line:before { content: "\ea4a"; }
.ri-arrow-down-s-line:before { content: "\ea4e"; }
.ri-arrow-drop-left-line:before { content: "\ea52"; }
.ri-arrow-drop-right-line:before { content: "\ea54"; }
.ri-arrow-left-line:before { content: "\ea60"; }
.ri-arrow-left-right-line:before { content: "\ea62"; }
.ri-arrow-left-s-line:before { content: "\ea64"; }
.ri-arrow-right-line:before { content: "\ea6c"; }
.ri-arrow-right-up-line:before { content: "\ea70"; }
.ri-arrow-up-line:before { content: "\ea76"; }
.ri-attachment-2:before { content: "\ea84"; }
.ri-award-fill:before { content: "\ea89"; }
.ri-award-line:before { content: "\ea8a"; }
.ri-bank-card-line:before { content: "\ea92"; }
.ri-bar-chart-2-line:before { content: "\ea96"; }
.ri-bar-chart-box-line:before { content: "\ea98"; }
.ri-bar-chart-line:before { content: "\ea9e"; }
.ri-battery-fill:before { content: "\eaaf"; }
.ri-bold:before { content: "\ead1"; }
.ri-book-2-line:before { content: "\ead3"; }
.ri-book-open-line:before { content: "\eadb"; }
.ri-bookmark-line:before { content: "\eae5"; }
.ri-brain-line:before { content: "\f2f7"; }
.ri-briefcase-4-line:before { content: "\eaf1"; }
.ri-calendar-check-line:before { content: "\eb23"; }
.ri-calendar-event-line:before { content: "\eb25"; }
.ri-calendar-line:before { content: "\eb27"; }
.ri-calendar-schedule-line:before { content: "\f3f2"; }
.ri-camera-fill:before { content: "\eb2e"; }
.ri-camera-line:before { content: "\eb31"; }
.ri-certificate-2-line:before { content: "\f678"; }
.ri-chat-1-fill:before { content: "\eb4c"; }
.ri-chat-3-fill:before { content: "\eb50"; }
.ri-chat-3-line:before { content: "\eb51"; }
.ri-chat-quote-line:before { content: "\eb6b"; }
.ri-chat-smile-3-line:before { content: "\eb71"; }
.ri-check-double-line:before { content: "\eb79"; }
.ri-check-line:before { content: "\eb7b"; }
.ri-checkbox-blank-circle-line:before { content: "\eb7d"; }
.ri-checkbox-circle-fill:before { content: "\eb80"; }
.ri-checkbox-circle-line:before { content: "\eb81"; }
.ri-claude-fill:before { content: "\f5b1"; }
.ri-close-line:before { content: "\eb99"; }
.ri-code-s-slash-line:before { content: "\ebad"; }
.ri-compass-3-fill:before { content: "\ebbd"; }
.ri-compass-3-line:before { content: "\ebbe"; }
.ri-contrast-2-line:before { content: "\ebd4"; }
.ri-css3-line:before { content: "\ec04"; }
.ri-cursor-ai-fill:before { content: "\f67d"; }
.ri-cursor-fill:before { content: "\ec09"; }
.ri-cursor-line:before { content: "\ec0a"; }
.ri-customer-service-2-line:before { content: "\ec0c"; }
.ri-dashboard-line:before { content: "\ec14"; }
.ri-database-2-line:before { content: "\ec16"; }
.ri-delete-bin-line:before { content: "\ec2a"; }
.ri-download-line:before { content: "\ec5a"; }
.ri-edit-box-line:before { content: "\ec82"; }
.ri-eye-line:before { content: "\ecb5"; }
.ri-file-copy-line:before { content: "\ecd5"; }
.ri-file-download-line:before { content: "\ecd9"; }
.ri-file-edit-line:before { content: "\ecdb"; }
.ri-file-list-3-line:before { content: "\ecef"; }
.ri-file-search-line:before { content: "\ed05"; }
.ri-file-text-line:before { content: "\ed0f"; }
.ri-filter-3-line:before { content: "\ed25"; }
.ri-filter-line:before { content: "\ed27"; }
.ri-flag-line:before { content: "\ed3b"; }
.ri-flashlight-fill:before { content: "\ed3c"; }
.ri-flashlight-line:before { content: "\ed3d"; }
.ri-focus-3-line:before { content: "\ed4c"; }
.ri-folder-3-line:before { content: "\ed54"; }
.ri-fullscreen-line:before { content: "\ed9c"; }
.ri-gamepad-line:before { content: "\edab"; }
.ri-gift-line:before { content: "\edbb"; }
.ri-glasses-2-line:before { content: "\f40c"; }
.ri-google-fill:before { content: "\edd4"; }
.ri-graduation-cap-line:before { content: "\f333"; }
.ri-group-line:before { content: "\ede3"; }
.ri-heart-3-line:before { content: "\ee0b"; }
.ri-heart-line:before { content: "\ee0f"; }
.ri-home-4-line:before { content: "\ee1d"; }
.ri-home-5-line:before { content: "\ee1f"; }
.ri-image-line:before { content: "\ee4b"; }
.ri-infinity-line:before { content: "\f3b8"; }
.ri-information-line:before { content: "\ee59"; }
.ri-instagram-line:before { content: "\ee66"; }
.ri-italic:before { content: "\ee6b"; }
.ri-key-2-line:before { content: "\ee6f"; }
.ri-layout-left-line:before { content: "\ee94"; }
.ri-lightbulb-flash-line:before { content: "\eea8"; }
.ri-lightbulb-line:before { content: "\eea9"; }
.ri-line-chart-line:before { content: "\eeab"; }
.ri-links-line:before { content: "\eeb8"; }
.ri-live-line:before { content: "\eec0"; }
.ri-lock-2-fill:before { content: "\eecb"; }
.ri-lock-fill:before { content: "\eecd"; }
.ri-lock-line:before { content: "\eece"; }
.ri-lock-unlock-line:before { content: "\eed2"; }
.ri-logout-box-r-line:before { content: "\eeda"; }
.ri-mail-fill:before { content: "\eef3"; }
.ri-mail-line:before { content: "\eef6"; }
.ri-mail-send-line:before { content: "\eefc"; }
.ri-mail-unread-line:before { content: "\ef02"; }
.ri-map-pin-2-fill:before { content: "\ef09"; }
.ri-medal-line:before { content: "\ef28"; }
.ri-menu-line:before { content: "\ef3e"; }
.ri-meta-fill:before { content: "\f342"; }
.ri-mic-line:before { content: "\ef50"; }
.ri-moon-clear-fill:before { content: "\ef6e"; }
.ri-moon-clear-line:before { content: "\ef6f"; }
.ri-moon-line:before { content: "\ef75"; }
.ri-more-2-fill:before { content: "\ef76"; }
.ri-more-fill:before { content: "\ef78"; }
.ri-movie-2-line:before { content: "\ef7f"; }
.ri-music-2-fill:before { content: "\ef82"; }
.ri-music-fill:before { content: "\ef84"; }
.ri-notification-3-fill:before { content: "\ef93"; }
.ri-notification-3-line:before { content: "\ef94"; }
.ri-notification-line:before { content: "\ef9a"; }
.ri-openai-fill:before { content: "\f34a"; }
.ri-palette-line:before { content: "\efc5"; }
.ri-pause-fill:before { content: "\efd7"; }
.ri-pencil-line:before { content: "\efe0"; }
.ri-phone-fill:before { content: "\efe9"; }
.ri-phone-line:before { content: "\efec"; }
.ri-play-circle-line:before { content: "\f009"; }
.ri-play-fill:before { content: "\f00a"; }
.ri-play-mini-fill:before { content: "\f012"; }
.ri-plug-2-line:before { content: "\f017"; }
.ri-plug-line:before { content: "\f019"; }
.ri-price-tag-3-line:before { content: "\f023"; }
.ri-pushpin-2-fill:before { content: "\f036"; }
.ri-pushpin-line:before { content: "\f039"; }
.ri-question-answer-line:before { content: "\f043"; }
.ri-quill-pen-line:before { content: "\f04a"; }
.ri-refresh-line:before { content: "\f064"; }
.ri-replay-10-line:before { content: "\f352"; }
.ri-robot-2-line:before { content: "\f3d8"; }
.ri-scales-3-line:before { content: "\f0b7"; }
.ri-search-line:before { content: "\f0d1"; }
.ri-send-plane-2-line:before { content: "\f0d8"; }
.ri-settings-3-fill:before { content: "\f0e5"; }
.ri-shake-hands-line:before { content: "\f3aa"; }
.ri-share-forward-line:before { content: "\f0fd"; }
.ri-shield-check-fill:before { content: "\f0ff"; }
.ri-shield-check-line:before { content: "\f100"; }
.ri-shield-keyhole-line:before { content: "\f107"; }
.ri-shopping-bag-3-line:before { content: "\f116"; }
.ri-signal-tower-fill:before { content: "\f129"; }
.ri-signal-wifi-fill:before { content: "\f133"; }
.ri-smartphone-line:before { content: "\f15a"; }
.ri-sparkling-2-line:before { content: "\f36b"; }
.ri-stack-line:before { content: "\f181"; }
.ri-star-line:before { content: "\f18b"; }
.ri-sticky-note-line:before { content: "\f19b"; }
.ri-store-2-line:before { content: "\f1a5"; }
.ri-sun-cloudy-fill:before { content: "\f1ba"; }
.ri-sun-fill:before { content: "\f1bc"; }
.ri-sun-line:before { content: "\f1bf"; }
.ri-team-line:before { content: "\f1ee"; }
.ri-terminal-box-fill:before { content: "\f1f5"; }
.ri-terminal-box-line:before { content: "\f1f6"; }
.ri-thumb-up-fill:before { content: "\f206"; }
.ri-thumb-up-line:before { content: "\f207"; }
.ri-tiktok-fill:before { content: "\f372"; }
.ri-time-fill:before { content: "\f20e"; }
.ri-time-line:before { content: "\f20f"; }
.ri-tools-line:before { content: "\f21b"; }
.ri-trophy-line:before { content: "\f22f"; }
.ri-underline:before { content: "\f244"; }
.ri-user-3-line:before { content: "\f256"; }
.ri-user-add-line:before { content: "\f25e"; }
.ri-user-community-line:before { content: "\f59e"; }
.ri-user-follow-line:before { content: "\f261"; }
.ri-user-smile-line:before { content: "\f274"; }
.ri-user-star-line:before { content: "\f276"; }
.ri-verified-badge-fill:before { content: "\f3e7"; }
.ri-video-chat-line:before { content: "\f27e"; }
.ri-video-line:before { content: "\f282"; }
.ri-vidicon-line:before { content: "\f288"; }
.ri-vip-crown-line:before { content: "\f28e"; }
.ri-volume-up-fill:before { content: "\f2a1"; }
.ri-webhook-line:before { content: "\f51f"; }
.ri-whatsapp-line:before { content: "\f2bc"; }
.ri-wifi-fill:before { content: "\f2bf"; }
.ri-youtube-line:before { content: "\f2d5"; }
/* @icons:end */

:root {
  /* grafite quente, igual à plataforma */
  --bg: #19161b;
  --bg-2: #141117;
  --inset: #141117;
  --surface: #1f1c22;
  --surface-2: #25222a;
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #ffffff;
  --text-2: #c9ccd1;
  --muted: #8a9099;
  --muted-2: #5d626a;

  --orange: #ff6514;
  --red: #ff3d32;
  --pink: #ff126a;
  --amber: #fda512;
  --green: #22c55e;
  --grad: linear-gradient(100deg, #ff6514 0%, #ff3d32 47%, #ff126a 100%);
  --grad-soft: linear-gradient(100deg, rgba(255, 101, 20, .16), rgba(255, 18, 106, .16));

  --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; } /* com width/height no HTML (evita CLS), a altura segue a proporção quando o CSS só define a largura */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--orange); color: #fff; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.h1 { font-size: clamp(2.4rem, 5.6vw, 4.5rem); }
.h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.12; }
.h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dim { color: var(--muted-2); }
/* mantém as últimas palavras juntas (evita palavra sozinha na última linha) */
.nw { white-space: nowrap; }
/* quebra de linha manual para equilibrar leads longos (some no celular) */
@media (max-width: 640px) { .br-t { display: none; } }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--muted); line-height: 1.65; }
.lead strong, .copy strong { color: var(--text); font-weight: 500; }
.copy { color: var(--muted); }
.copy p + p, .lead + .lead { margin-top: 14px; }

/* Eyebrow with corner brackets */
/* Rótulo de seção: pílula com o logo num círculo em gradiente (linguagem da plataforma) */
.eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
  color: var(--text-2);
}
.eyebrow::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 299 329'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M189.174 0C249.432 0 298.119 49.12 298.12 109.521V125.233H221.298C247.331 148.873 263.682 183.061 263.682 221.083V328.584H217.562C102.487 328.584 8.409 238.767 .569 125.166H0V108.817L.073 108.313C1.407 51.892 40.221 3.107 92.604.092L92.995.067 189.174 0ZM34.548 125.802C42.637 220.328 121.714 294.684 217.562 294.684H229.828V219.293C228.875 167.509 186.709 125.803 135.215 125.802H34.548ZM108.123 33.957V62.481C108.123 78.45 121.044 91.333 136.727 91.333H262.062C253.948 58.353 224.282 33.901 189.174 33.9L108.123 33.957ZM73.368 39.698C55.597 48.641 41.261 67.279 36.009 91.287H80.886C76.141 82.258 73.368 72.143 73.368 61.459V39.698Z'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--grad);
  box-shadow: 0 4px 12px -4px rgba(255,61,50,.6);
}
.eyebrow::after, .eyebrow i { display: none; }

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: 0.8125rem;
  color: var(--text-2);
}
.badge b {
  padding: 3px 10px; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 600; font-size: .75rem;
}

/* ---------- Buttons ---------- */
/* Botão no padrão da LP: cápsula escura + pílula que se estende no hover */
.btn {
  --h: 60px;
  --inset: 5px;
  --panel: 56px;
  --logo: 22px;
  --fs: 1rem;
  --pad: 22px;
  --fill: var(--grad);
  --text-c: #111;
  --hover-text: #fff;
  --logo-filter: brightness(0) invert(1);
  --spring: cubic-bezier(.16, 1, .3, 1);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center;
  height: var(--h); padding: var(--inset) var(--panel) var(--inset) var(--inset);
  border-radius: 999px; background: #0f0d12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  font-weight: 700; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s, box-shadow .35s;
}
.btn-bg {
  position: absolute; z-index: 0; top: var(--inset); bottom: var(--inset); left: var(--inset); right: var(--panel);
  border-radius: 999px; background: var(--fill);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 3px 10px rgba(0,0,0,.08);
  transition: right .55s var(--spring);
}
.btn-action {
  position: relative; z-index: 2; flex: 1; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 var(--pad); color: var(--text-c);
  transition: transform .55s var(--spring), color .25s;
}
.btn-text { font-size: var(--fs); line-height: 1; }
.btn-slot { position: relative; flex-shrink: 0; width: var(--logo); height: var(--logo); }
.btn-arrow {
  position: absolute; top: 50%; left: 50%; width: calc(var(--logo) - 2px); height: calc(var(--logo) - 2px);
  fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter;
  transform: translate(-50%, -50%); transition: opacity .16s, transform .3s var(--ease);
}
.btn-swap {
  position: absolute; top: 50%; left: 50%; width: var(--logo); height: var(--logo); object-fit: contain;
  opacity: 0; transform: translate(-50%, -50%) scale(.72);
  transition: opacity .2s, filter .22s, transform .35s var(--ease);
}
.btn-side {
  position: absolute; z-index: 2; top: 50%; right: calc((var(--panel) - var(--logo)) / 2);
  width: var(--logo); height: var(--logo); object-fit: contain; pointer-events: none;
  transform: translateY(-50%); transition: opacity .18s, transform .38s var(--ease);
}
.btn:hover .btn-bg, .btn:focus-visible .btn-bg { right: var(--inset); }
.btn:hover .btn-action, .btn:focus-visible .btn-action { transform: translateX(calc((var(--panel) - var(--inset)) / 2)); color: var(--hover-text); }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(-8deg); }
.btn:hover .btn-swap, .btn:focus-visible .btn-swap { opacity: 1; filter: var(--logo-filter); transform: translate(-50%, -50%) scale(1); transition-delay: 70ms; }
.btn:hover .btn-side, .btn:focus-visible .btn-side { opacity: 0; transform: translateY(-50%) translateX(-10px) scale(.85); }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 30px -6px rgba(255,101,20,.4); }
.btn:active { transform: scale(.985); transition-duration: .12s; }
.btn:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; }
@media (hover: none) {
  .btn:hover .btn-bg { right: var(--panel); }
  .btn:hover .btn-action { transform: none; color: var(--text-c); }
  .btn:hover .btn-arrow { opacity: 1; transform: translate(-50%, -50%); }
  .btn:hover .btn-swap { opacity: 0; }
  .btn:hover .btn-side { opacity: 1; transform: translateY(-50%); }
}

.btn-primary { --fill: var(--grad); --text-c: #111; --hover-text: #fff; --logo-filter: brightness(0) invert(1); }
.btn-ghost { --fill: #fff; --text-c: #111; --hover-text: #111; --logo-filter: none; }
.btn-sm { --h: 50px; --inset: 4px; --panel: 46px; --logo: 20px; --fs: .95rem; --pad: 14px; }
.btn-block { display: flex; width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; }
.center .cta-row { justify-content: center; }

/* ---------- Header ----------
   Topo: transparente, alinhado à largura do conteúdo.
   Após o scroll: barra presa ao topo com "ombros" curvos nas laterais (padrão da LP). */
.header {
  --bar: #0f0d12;
  --bar-h: 76px;
  --lat: clamp(44px, calc(50vw - 640px), 120px);
  position: fixed; inset: 0 0 auto; z-index: 50;
  pointer-events: none;
}
.nav {
  pointer-events: auto; position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: calc(var(--container) + var(--gutter) * 2);
  height: 96px; margin: 0 auto; padding: 0 var(--gutter);
  transition: height .45s var(--ease);
}
.nav-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bar);
  transform: translateY(calc(-100% - 2px));
  transition: transform .45s var(--ease);
}
.nav-bg::before, .nav-bg::after {
  content: ""; position: absolute; top: 0; width: var(--lat); height: 100%;
  background: var(--bar);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66.79 0 105.907 70' preserveAspectRatio='none'%3E%3Cpath d='M66.79 0H172.697V70C158.564 70 145.091 64.019 135.612 53.536L103.063 17.543C93.773 7.27 80.639 1.311 66.79 1.086Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66.79 0 105.907 70' preserveAspectRatio='none'%3E%3Cpath d='M66.79 0H172.697V70C158.564 70 145.091 64.019 135.612 53.536L103.063 17.543C93.773 7.27 80.639 1.311 66.79 1.086Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.nav-bg::before { left: calc(1px - var(--lat)); }
.nav-bg::after { right: calc(1px - var(--lat)); transform: scaleX(-1); }
.header.scrolled .nav { height: var(--bar-h); }
.header.scrolled .nav-bg, .menu-open .nav-bg { transform: none; }
.nav-logo img { height: 38px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 12px; border-radius: 999px;
  font-size: .9rem; color: var(--text-2);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: #ff7a2e; }
.nav-links { align-items: center; }
.nav-links a.is-active, .nav-dd__btn.is-active { color: #ff7a2e; }
/* Plataforma: botão e painel em 3 colunas */
.nav-dd { position: static; }
.nav-dd__btn { display: inline-flex; align-items: center; gap: 3px; padding: 8px 10px 8px 12px; border-radius: 999px; font-size: .9rem; color: var(--text-2); transition: color .2s; }
.nav-dd__btn i { font-size: 1.05rem; transition: transform .3s var(--ease); }
.nav-dd__btn:hover, .nav-dd.open .nav-dd__btn { color: #ff7a2e; }
.nav-dd.open .nav-dd__btn i { transform: rotate(180deg); }
.nav-panel { position: absolute; left: 50%; top: calc(100% - 4px); width: min(860px, calc(100vw - 48px)); padding: 10px; border-radius: 22px; background: rgba(20,17,23,.98); border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd.open .nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-panel__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.nav-col { display: grid; align-content: start; gap: 2px; padding: 8px; }
.nav-col__t { margin: 0 0 6px 10px !important; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nav-links .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; font-size: inherit; color: var(--text); }
.nav-links .nav-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-item__ic { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(254,91,14,.1); border: 1px solid rgba(254,91,14,.22); color: #ff7a2e; font-size: 17px; transition: background .2s, color .2s; box-sizing: border-box; }
.nav-item:hover .nav-item__ic { background: var(--grad); border: 0; color: #fff; }
.nav-item b { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.nav-item small { display: block; font-size: .76rem; line-height: 1.35; color: var(--muted); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  place-items: center;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: #fff; position: relative; transition: .3s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: #fff; transition: .3s var(--ease); }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.menu-open .nav-toggle span { background: transparent; }
.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  pointer-events: auto;
  position: fixed; inset: 76px 16px auto; z-index: 49;
  padding: 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #141117;
  opacity: 0; transform: translateY(-8px) scale(.98); visibility: hidden;
  transition: .35s var(--ease);
}
.menu-open .mobile-menu { opacity: 1; transform: none; visibility: visible; }
.mobile-menu a:not(.btn) { display: block; padding: 14px 16px; border-radius: 12px; color: var(--text-2); font-weight: 500; }
.mobile-menu a:not(.btn):hover { background: rgba(255,255,255,.05); }
.mobile-menu .btn { margin-top: 8px; }
.mobile-menu { max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
/* barra de scroll fina no padrão da marca, afastada da borda arredondada */
@supports not selector(::-webkit-scrollbar) { .mobile-menu { scrollbar-width: thin; scrollbar-color: rgba(254,91,14,.55) transparent; } }
.mobile-menu::-webkit-scrollbar { width: 10px; }
.mobile-menu::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.mobile-menu::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: rgba(254,91,14,.55) padding-box; }
.mobile-menu::-webkit-scrollbar-thumb:hover, .mobile-menu::-webkit-scrollbar-thumb:active { background-color: #fe5b0e; }
.mm-group summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; color: var(--text-2); font-weight: 500; list-style: none; cursor: pointer; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary i { font-size: 1.2rem; transition: transform .3s var(--ease); }
.mm-group[open] summary { color: #ff7a2e; }
.mm-group[open] summary i { transform: rotate(180deg); }
.mm-group__in { margin: 0 4px 8px; padding: 4px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.03); }
.mm-group__t { margin: 10px 8px 4px !important; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mobile-menu .mm-group__in a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; font-size: .92rem; }
.mm-group__in a i { font-size: 1.05rem; color: #ff7a2e; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-head { max-width: 760px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .lead { margin-top: 20px; max-width: 60ch; margin-inline: auto; }
.section-head.left .lead { margin-inline: 0; }
.section-head.left { margin-left: 0; text-align: left; }

.divider {
  height: 1px; max-width: var(--container); margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---------- Hero ---------- */
.hero { padding: 132px 0 64px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Fundo premium: feixe de luz + auroras da marca, sem grade */
.hero-bg::after {
  content: ""; position: absolute; inset: auto 0 0; height: 260px;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-bg .beam {
  /* posição em px e deslocamento no transform: não depende da altura do hero, então não gera layout shift (CLS) */
  position: absolute; top: 0; left: 34%; width: 1400px; height: 1100px; transform: translate(-50%, var(--beam-y, -108px));
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, transparent 158deg,
    rgba(255,120,70,.13) 170deg, rgba(255,235,225,.11) 180deg, rgba(255,70,120,.13) 190deg,
    transparent 202deg, transparent 360deg);
  filter: blur(26px);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 10%, transparent 78%);
}
.hero-bg .aurora {
  position: absolute; border-radius: 50%; will-change: transform;
  animation: aurora 20s ease-in-out infinite alternate;
}
.hero-bg .a1 { width: 640px; height: 440px; left: -10%; top: 36px; background: radial-gradient(closest-side, rgba(255,101,20,.42), transparent); }
.hero-bg .a2 { width: 760px; height: 560px; right: -8%; top: -126px; background: radial-gradient(closest-side, rgba(255,18,106,.38), transparent); animation-duration: 26s; animation-delay: -8s; }
.hero-bg .a3 { width: 620px; height: 420px; left: 32%; top: 531px; background: radial-gradient(closest-side, rgba(150,20,90,.45), transparent); animation-duration: 30s; animation-delay: -14s; }
.hero-bg .horizon {
  position: absolute; left: 50%; top: 0; width: min(1100px, 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,150,110,.5), rgba(255,255,255,.6), rgba(255,90,140,.5), transparent);
  box-shadow: 0 0 40px 6px rgba(255,90,80,.25);
}
@media (max-width: 640px) { .hero-bg .beam { --beam-y: -150px; } .hero-bg .a3 { top: 900px; } }
@keyframes aurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 30px) scale(1.12); }
  100% { transform: translate(-40px, 50px) scale(.95); }
}

.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.hero-text { padding: 24px 0; }
.hero .badge { margin-bottom: 28px; }
.hero h1 { text-wrap: pretty; }
.hero .lead { max-width: 520px; margin-top: 22px; }
/* no celular o texto do hero tem 4 linhas: reserva a altura para nada abaixo pular quando a fonte troca */
@media (max-width: 640px) { .hero .lead { min-height: calc(4 * 1.65em); } }
.hero .lead + .lead { margin-top: 12px; }
.hero .cta-row { margin-top: 36px; }

.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; max-width: 520px; }
.avatars { display: flex; flex-shrink: 0; }
.avatars img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  border: 2px solid var(--bg); margin-left: -10px;
}
.avatars img:first-child { margin-left: 0; }
.hero-proof strong { color: var(--text); font-weight: 600; }
.hero-proof > span { text-wrap: balance; }
.hero-proof strong { white-space: nowrap; }

/* Painel visual (estilo card com recorte) */
.hero-panel {
  --notch: 124px;
  --r: 28px;
  position: relative;
  height: 640px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 60% at 85% 15%, rgba(255, 18, 106, .55), transparent 60%),
    radial-gradient(80% 70% at 20% 100%, rgba(255, 101, 20, .6), transparent 60%),
    linear-gradient(160deg, #2a0f0c 0%, #1a0a10 55%, #12080a 100%);
}
.panel-bg { position: absolute; inset: 0; z-index: -1; }
.panel-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 42%, transparent 55%),
    linear-gradient(115deg, transparent 52%, rgba(255,255,255,.04) 60%, transparent 68%);
}
.panel-bg .ring { position: absolute; left: 70%; top: 105%; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); transform: translate(-50%, -50%); }
.panel-bg .r1 { width: 380px; height: 380px; }
.panel-bg .r2 { width: 640px; height: 640px; border-color: rgba(255,255,255,.08); }
.panel-bg .r3 { width: 920px; height: 920px; border-color: rgba(255,255,255,.05); }

/* recorte no canto superior esquerdo */
.panel-notch {
  position: absolute; top: 22px; left: 22px; z-index: 5;
  width: var(--notch); height: var(--notch);
}
.panel-notch .seal-x { width: 100%; height: 100%; }

.hero-panel .browser {
  position: absolute; left: 48px; top: 120px; z-index: 1;
  width: 720px;
  border-radius: 18px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255,255,255,.08);
  transform: translateY(24px);
  transition: transform 1.2s var(--ease);
}
.hero-panel.in .browser { transform: none; }
.hero-panel .campus { grid-template-columns: 1fr; min-height: 560px; }
.hero-panel .campus-side { display: none; }
.hero-panel .campus-banner { height: 210px; }
.hero-panel .campus-banner h4 { max-width: 13ch; }
.browser-bar { display: flex; align-items: center; gap: 12px; padding: 4px 8px 10px; }
.dots { display: flex; gap: 6px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.url {
  flex: 0 1 300px; margin-left: 24px;
  padding: 5px 14px; border-radius: 8px;
  background: rgba(0,0,0,.4); color: var(--muted); font-size: .75rem; text-align: center;
}
.url b { color: var(--text-2); font-weight: 500; }

.phone.hero-phone {
  position: absolute; right: 24px; bottom: 28px; z-index: 3;
  width: 210px;
  transform: translateY(60px);
  transition: transform 1.3s var(--ease) .15s;
}
.hero-panel.in .hero-phone { transform: none; }
.ph-rank { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: .68rem; }
.ph-rank b { width: 12px; color: var(--muted); font-family: var(--font-display); }
.ph-rank img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.ph-rank span { flex: 1; }
.ph-rank em { font-style: normal; font-weight: 600; }
.ph-rank.me { background: var(--grad-soft); border-color: rgba(255,61,50,.35); }

.campus {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 520px;
  border-radius: 14px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  text-align: left;
}
.campus-side { padding: 20px 14px; border-right: 1px solid var(--line); background: var(--bg-2); }
.campus-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.campus-brand span { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; font-size: .8rem; }
.campus-nav li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; font-size: .8125rem; color: var(--muted);
}
.campus-nav li.on { background: rgba(255,255,255,.06); color: var(--text); }
.campus-nav li svg { width: 16px; height: 16px; opacity: .8; }
.campus-xp { margin: 22px 6px 0; padding: 14px; border-radius: 12px; background: var(--grad-soft); border: 1px solid rgba(255, 61, 50, .25); }
.campus-xp small { display: block; color: var(--text-2); font-size: .7rem; }
.campus-xp strong { display: block; font-family: var(--font-display); font-size: 1.1rem; margin: 2px 0 10px; }
.bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 60%); background: var(--grad); border-radius: inherit; }

.campus-main { padding: 20px; overflow: hidden; }
.campus-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.campus-search { flex: 1; max-width: 260px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted-2); font-size: .75rem; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
.campus-user { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--muted); }
.campus-user .coin { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(253,165,18,.12); color: var(--amber); font-weight: 600; }
.campus-user img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 20%; }

.campus-banner {
  position: relative; height: 190px; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(255,18,106,.55), transparent 45%),
    radial-gradient(circle at 60% 120%, rgba(255,101,20,.6), transparent 50%),
    linear-gradient(120deg, #1a0d0b, #120a12);
  padding: 26px; display: flex; flex-direction: column; justify-content: flex-end;
}
.campus-banner small { color: rgba(255,255,255,.7); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.campus-banner h4 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 14px; max-width: 16ch; }
.campus-banner .pill { align-self: flex-start; font-size: .72rem; font-weight: 600; padding: 7px 14px; border-radius: 99px; background: #fff; color: #111; }
.campus-banner .ring-x {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.25);
  display: grid; place-items: center;
}
.campus-banner .ring img { width: 64px; opacity: .9; }

.campus-row-title { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; font-size: .8125rem; font-weight: 600; }
.campus-row-title span { color: var(--muted); font-weight: 400; }
.covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cover {
  position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(.9); }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 55%); }
.cover span { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; font-size: .7rem; font-weight: 600; line-height: 1.3; }
.cover .bar { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; z-index: 1; }

/* floating chips around hero */
.float-chip {
  position: absolute; z-index: 4;
  white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgba(20,20,22,.8); border: 1px solid var(--line-strong);
  font-size: .8125rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  animation: floaty 6s ease-in-out infinite;
}
.float-chip .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad); }
.float-chip .ico svg { width: 18px; height: 18px; }
.float-chip small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.2; }
.float-chip strong { font-weight: 600; line-height: 1.2; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: var(--gap, 16px); width: max-content; animation: marquee var(--speed, 40s) linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap, 16px) / 2)); } }

.experts {
  --h: clamp(300px, 32vw, 470px);
  --card-w: clamp(200px, 15.5vw, 290px);
  --gap: 20px;
  --persp: 900px;
  padding: 72px 0 0; position: relative;
}
.experts-label { text-align: center; color: var(--muted); font-size: .875rem; margin-bottom: 8px; }

/* Anel 3D de experts (visto por dentro) */
.expert-ring {
  position: relative; z-index: 0; height: var(--h); margin-top: calc(var(--h) * -.14); overflow: hidden; isolation: isolate; contain: layout paint;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.expert-ring.dragging { cursor: grabbing; }
.er-scene { position: absolute; inset: 0; perspective: var(--persp); perspective-origin: 50% 42%; }
.er-ring { position: absolute; top: 46%; left: 50%; transform-style: preserve-3d; will-change: transform; }
.er-card { position: absolute; transform: rotateY(var(--slot)) translateZ(var(--r, 600px)) rotateY(180deg); transform-style: preserve-3d; }
.er-card-inner {
  position: absolute; width: var(--card-w); aspect-ratio: 4/5; transform: translate(-50%, -50%);
  border-radius: 16px; overflow: hidden; background: var(--surface);
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.er-card-inner img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.er-card-inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.1), transparent 30%); }

/* Tela de vídeo sobreposta ao anel */
.video-frame {
  position: relative; z-index: 2; max-width: 1120px; margin: calc(var(--h) * -.42) auto 0;
  aspect-ratio: 16/9; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -30px 80px -20px rgba(255,61,50,.35), 0 40px 120px rgba(0,0,0,.6);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster {
  position: absolute; inset: 0; width: 100%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: radial-gradient(70% 90% at 80% 10%, rgba(255,18,106,.55), transparent 60%), radial-gradient(60% 80% at 10% 100%, rgba(255,101,20,.6), transparent 60%), linear-gradient(135deg, #34141a, #1d1219);
}
.vp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); }
.vp-selo { position: absolute; top: 28px; left: 28px; width: 88px; height: 88px; }
.vp-play { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 20px 60px rgba(255,61,50,.5); transition: transform .4s var(--ease); }
.vp-play::before, .vp-play::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); animation: vpPulse 2.4s var(--ease) infinite; }
.vp-play::after { animation-delay: 1.2s; }
.vp-play svg { width: 34px; height: 34px; margin-left: 4px; }
.video-poster:hover .vp-play { transform: scale(1.08); }
.vp-label { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.85); }
@keyframes vpPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- Generic cards ---------- */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .4s, background .4s;
}
.card:hover { border-color: var(--line-strong); }
.card > * { position: relative; z-index: 1; }

.icon-box {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad-soft);
  border: 1px solid rgba(255, 61, 50, .28);
  color: #ff6a4d;
}
.icon-box svg { width: 22px; height: 22px; }

/* ---------- Segments ---------- */
.segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.segment { padding: 26px 22px; display: flex; flex-direction: column; gap: 40px; min-height: 190px; }
.segment h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; line-height: 1.25; margin-top: auto; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split.flip .split-media { order: -1; }
.split-text .eyebrow { margin-bottom: 22px; }
.split-text .h2 { margin-bottom: 24px; }
.split-text .copy { font-size: 1.0625rem; }
.split-text .cta-row { margin-top: 34px; }
.checks { display: grid; gap: 12px; margin-top: 28px; }
.checks li { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.checks li::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat, var(--grad);
}

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 61, 50, .14), transparent 60%),
    var(--bg-2);
  padding: clamp(20px, 3vw, 36px);
  overflow: hidden;
  min-height: 440px;
  display: flex; align-items: center; justify-content: center;
}
.media-frame .grid-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%);
}
.media-frame > *:not(.grid-bg) { position: relative; }

/* Personalização: página de curso real do campus + opções reais do admin */
.split-perso { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split-perso .media-frame { min-height: 0; padding: clamp(14px, 1.8vw, 22px); }
.custom-mock { --c: #fe5b0e; width: 100%; display: grid; gap: 14px; }
.ui-panel { border-radius: 16px; background: var(--inset); border: 1px solid var(--line-strong); padding: 16px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; outline: 1px solid var(--line-strong); cursor: pointer; transition: transform .2s; }
.swatches button.on { border-color: #fff; }
.swatches button:hover { transform: scale(1.1); }
.toggle { width: 28px; height: 16px; border-radius: 99px; background: var(--c); position: relative; flex-shrink: 0; transition: background-color .4s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .3s var(--ease); }
.toggle.off { background: rgba(255,255,255,.15); }
.toggle.off::after { left: 2px; }

/* mini-campus: página de curso do campus desenhada em 1920px com os valores reais
   (campus/assets/css/custom.css + owl-carousel.js) e reduzida pelo JS (--s) */
.cz { --p: var(--c); position: relative; height: calc(1500px * var(--s, .3)); border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: #18161b; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.cz-stage { width: 1920px; height: 1500px; transform: scale(var(--s, .3)); transform-origin: 0 0; font-family: "Geist", var(--font-body); font-size: 16px; color: #e8e8e8; }
.cz-stage * { box-sizing: border-box; }
.cz-bar { position: relative; display: flex; align-items: center; height: 56px; padding: 0 24px; background: #0e0c10; border-bottom: 1px solid rgba(255,255,255,.06); }
.cz-dots { display: flex; gap: 10px; }
.cz-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.14); }
.cz-url { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 28px; border-radius: 9px; background: #1c1d21; font-size: 17px; color: #cfccd4; }
.cz-url i { color: #8d8a93; }
.cz-app { display: grid; grid-template-columns: 68px minmax(0, 1fr); height: 1444px; }
.cz-rail { background: #131116; border-right: 1px solid #1f2225; }
.cz-logo { display: grid; place-items: center; height: 84px; border-bottom: 1px solid #1f2225; }
.cz-logo img { width: 46px; height: 46px; padding: 9px; border-radius: 12px; background: #0e0c10; border: 1px solid rgba(255,255,255,.1); }
.cz-rail nav { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 40px; font-size: 21px; color: #c9c6ce; }
.cz-main { min-width: 0; display: flex; flex-direction: column; }
.cz-top { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 84px; padding: 0 52px; background: #131116; border-bottom: 1px solid #1f2225; }
.cz-search { display: flex; align-items: center; gap: 10px; width: 560px; height: 40px; padding: 0 14px; border-radius: 8px; background: #1c1d21; border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #8d8a93; }
.cz-search i { font-size: 15px; }
.cz-acts { display: flex; align-items: center; }
.cz-painel { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a7a4ad; }
.cz-painel i { font-size: 18px; color: #c9c6ce; }
.cz-bell { margin: 0 26px 0 24px; font-size: 20px; color: #c9c6ce; }
.cz-ava { width: 68px; height: 68px; margin-right: 6px; }
.cz-hello { display: grid; gap: 6px; }
.cz-hello b { font-size: 13px; font-weight: 600; color: #fff; }
.cz-xp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; line-height: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--p) 14%, rgba(19,17,22,.92)), rgba(19,17,22,.92)); border: 1px solid color-mix(in srgb, var(--p) 32%, transparent); }
.cz-xp img { width: 13px; height: 13px; }
.cz-xp em { margin-right: -3px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--p); }
.cz-xp small { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: color-mix(in srgb, var(--p) 72%, rgba(255,255,255,.5)); }
.cz-scroll { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cz-scroll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, #18161b); pointer-events: none; }
.cz-page { transition: transform .8s var(--ease); }
.cz-banner { display: block; width: 100%; height: 384px; object-fit: cover; }
.cz-wrap { padding: 0 52px; }
/* progress-course */
.pc { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 47px; }
.pc-left { display: flex; align-items: center; gap: 24px; }
.pc-left img { width: 176px; height: 97px; object-fit: cover; border-radius: 6px; }
.pc-left h2 { margin: 0 0 4px; font-size: 19.2px; font-weight: 500; line-height: 1.35; color: #e6e7e8; }
.pc-left p { margin: 0; font-size: 16px; color: #8b8c8e; }
.pc-right { width: 270px; }
.pc-tot { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 16px; color: #8b8c8e; }
.pc-tot em { font-style: normal; color: var(--p); }
.pc-tot i { color: var(--p); vertical-align: -2px; }
.pc-bar { height: 6px; border-radius: 6px; background: #2a2d31; overflow: hidden; }
.pc-bar i { display: block; width: 15%; height: 100%; background: var(--p); }
/* continue assistindo */
.cz-keep { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease), opacity .4s; }
.cz-keep > div { min-height: 0; overflow: hidden; }
.no-keep .cz-keep { grid-template-rows: 0fr; opacity: 0; }
.kw-head { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; }
.kw-head h2 { margin: 0; font-size: 19px; font-weight: 400; color: var(--p); }
.cz-nav { display: flex; gap: 8px; }
.cz-nav i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: #191b1e; border: 1px solid #1f2225; font-size: 25px; font-style: normal; color: var(--p); }
.kw-row { display: flex; gap: 10px; padding-top: 16px; width: 1800px; }
.kw { flex: 0 0 402px; display: flex; flex-direction: column; min-height: 178px; padding: 16px 17.6px; border-radius: 15px; border: 1px solid #1f2225; background: #18161b; }
.kw-mod { display: flex; align-items: flex-start; gap: 5.6px; margin-bottom: 5.6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--p); white-space: nowrap; overflow: hidden; }
.kw-mod i { font-size: 15.2px; opacity: .88; }
.kw-title { display: flex; align-items: flex-start; gap: 4.8px; flex: 1 1 auto; margin: 0 0 12px; font-size: 15.2px; font-weight: 600; line-height: 1.35; color: #f0f0f0; }
.kw-title i { margin-top: 3px; font-size: 11px; opacity: .42; color: #9a9c9e; }
.kw-foot { display: flex; flex-direction: column; gap: 10.4px; margin-top: auto; }
.kw-cta { display: flex; align-items: center; justify-content: center; gap: 5.6px; padding: 8px 12px; border-radius: 10px; background: var(--pf, var(--p)); font-size: 14px; font-weight: 600; color: var(--po, #18161b); }
.kw-cta i { font-size: 17.6px; }
.kw-prog { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.kw-prog i { position: relative; flex: 1; height: 4px; border-radius: 4px; background: #2a2d31; overflow: hidden; }
.kw-prog i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--p); }
.kw-prog em { font-style: normal; font-size: 11.5px; color: #9a9c9e; }
/* divisor */
.dv { display: flex; align-items: center; margin-top: 48px; }
.dv .dv-h { display: inline-flex; align-items: center; min-height: 50px; margin: 0 16px 0 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -.01em; color: #e6e7e8; }
.dv-line { flex-grow: 1; height: 1px; margin-right: 20px; background: linear-gradient(to right, #2a2d31, transparent); opacity: .7; }
.is-grid .dv-line { margin-right: 0; }
.is-grid .dv .cz-nav { display: none; }
/* módulos: carrossel (owl 7 itens, margin 14, stagePadding 18) ou grid (7 colunas, gap 8) */
.cz-mods { display: flex; gap: 14px; padding-top: 16px; width: calc(100% + 18px); }
.cz-mods .mi { flex: 0 0 calc((100% - 18px * 2 - 14px * 7) / 7 + 2px); }
.is-grid .cz-mods { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cz-mods.relayout { animation: czIn .5s var(--ease); }
.mi { position: relative; border: 1px solid #1f2225; border-radius: 15px; overflow: hidden; }
.mi img { display: block; width: 100%; aspect-ratio: 5 / 9; object-fit: cover; transition: filter .5s var(--ease); }
.mi-check { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 2px 8px; border-radius: 7px; border: 1px solid #191b1e; background: #18161b; font-size: 24px; font-style: normal; color: #424547; }
.mi-check.checked { color: var(--p); transition: color .5s var(--ease); }
/* tema claro do campus (valores de campus/source/sass/atoms/_theme.sass) */
.cz.theming, .cz.theming *, .cz.theming *::before, .cz.theming *::after { transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, box-shadow .45s ease !important; }
.is-light .cz { --pt: color-mix(in srgb, var(--p) 68%, #000); background: #f4f5f7; border-color: rgba(255,255,255,.18); }
.is-light .cz-stage { color: #2a2e33; }
.is-light .cz-bar { background: #e9ebee; border-bottom-color: #e2e5e9; }
.is-light .cz-dots i { background: rgba(0,0,0,.14); }
.is-light .cz-url { background: #fff; color: #5b6168; }
.is-light .cz-url i { color: #858b91; }
.is-light .cz-rail, .is-light .cz-top { background: #fff; border-color: #e2e5e9; }
.is-light .cz-logo { border-color: #e2e5e9; }
.is-light .cz-rail nav, .is-light .cz-painel, .is-light .cz-painel i, .is-light .cz-bell { color: #5b6168; }
.is-light .cz-search { background: #f4f5f7; border-color: #e2e5e9; color: #6b7075; }
.is-light .cz-hello b { color: #111316; }
.is-light .cz-xp { background: linear-gradient(145deg, color-mix(in srgb, var(--p) 12%, #fff), #fff); }
.is-light .pc-left h2 { color: #111316; }
.is-light .cz-xp em, .is-light .pc-tot em, .is-light .pc-tot i, .is-light .kw-head h2, .is-light .kw-mod, .is-light .cz-nav i { color: var(--pt); }
.is-light .cz-xp small { color: color-mix(in srgb, var(--pt) 80%, #5b6168); }
.is-light .cz-scroll::after { background: linear-gradient(transparent, #f4f5f7); }
.is-light .pc-left p, .is-light .pc-tot, .is-light .kw-prog em { color: #6b7075; }
.is-light .pc-bar, .is-light .kw-prog i { background: #e2e5e9; }
.is-light .cz-nav i, .is-light .kw, .is-light .mi-check { background: #fff; border-color: #e2e5e9; }
.is-light .kw-title { color: #111316; }
.is-light .kw-title i { color: #858b91; }
.is-light .dv .dv-h { color: #111316; }
.is-light .dv-line { background: linear-gradient(to right, #e2e5e9, transparent); }
.is-light .mi { border-color: #e2e5e9; }
.is-light .mi-check { color: #c4c8cd; }
.is-light .mi-check.checked { color: var(--p); }
.cz-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.cz-theme i { font-size: .8rem; line-height: 1; }
@keyframes czIn { from { opacity: 0; transform: translateY(10px); } }

/* barra de opções (campos reais do admin) */
.cz-dock { display: grid; grid-template-columns: auto auto 1fr 1fr; border-radius: 12px; align-items: stretch; padding: 0; overflow: hidden; }
.cz-dock-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.cz-dock-head b { font-weight: 600; color: var(--text-2); }
.cz-dock-head i { font-size: .9rem; color: var(--c); transition: color .5s var(--ease); }
.cz-group { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 16px; border: 0; border-left: 1px solid var(--line); background: none; font: inherit; text-align: left; color: inherit; }
.cz-group:first-child { border-left: 0; }
.cz-gl { font-size: .68rem; line-height: 1.25; color: var(--text-2); }
.cz-tg { cursor: pointer; }
.cz-tg:hover .cz-gl { color: var(--text); }
.cz-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.cz-seg button { padding: 4px 9px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .66rem; color: var(--muted); cursor: pointer; transition: background-color .3s, color .3s; }
.cz-seg button.on { background: var(--c); font-weight: 700; color: #18161b; }
@media (max-width: 1100px) { .split-perso { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cz-dock { grid-template-columns: 1fr 1fr; }
  .cz-group:nth-child(3) { border-left: 0; }
  .cz-group:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .cz *, .cz-dock * { transition: none !important; animation: none !important; } }

/* ---------- Gamificação: telas reais do campus (estilos extraídos de Meu progresso, Ranking, Missões, Hall da Fama, Recompensas) ---------- */
.gm { font-family: var(--font-body); }
.gm .copy { max-width: 62ch; }
.gm > * { min-width: 0; display: flex; flex-direction: column; }
.b-prog { grid-column: span 6; }
.b-rank, .b-miss, .b-hall, .b-double { grid-column: span 2; grid-row: auto; }
.b-shop { grid-column: span 4; }
.gm-prog-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 56px); align-items: end; }
.gm-prog-head .copy { margin: 0; }
/* palco: a tela é montada no tamanho real (--w px) e reduzida com zoom pelo JS */
.tm-stage { --w: 720; margin-top: auto; padding-top: 24px; min-width: 0; }
.tm-stage[data-tm="prog"], .tm-stage[data-tm="shop"] { --w: 1160; }
.tm-stage[data-tm="hall"] { --w: 760; }
/* desktop: o card de progresso fica em duas colunas (texto | tela) para ocupar menos altura */
@media (min-width: 1101px) {
  .b-prog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: 0 clamp(32px, 4vw, 56px); align-items: center; }
  .b-prog .gm-prog-head { grid-template-columns: 1fr; align-items: start; }
  .b-prog .tm-stage { margin: 0; padding-top: 0; }
  .gm-shop-text { grid-template-columns: 1fr; }
  .tm-stage[data-tm="hall"] { --w: 600; }
  .tm-stage[data-tm="dbl"] { --w: 560; }
  /* sem buracos: cards em pares de altura parecida (ranking + missões, hall + double xp); loja larga como o progresso */
  .bento.gm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-prog { grid-column: 1 / -1; }
  .b-rank, .b-miss, .b-hall, .b-double { grid-column: span 1; }
  .tm-stage[data-tm="hall"] { --w: 640; }
  .tm-stage[data-tm="dbl"] { --w: 500; }
  .tm-stage[data-tm="miss"] { --w: 640; }
  .tm-stage[data-tm="rank"] { --w: 660; }
  .b-shop { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: 0 clamp(32px, 4vw, 56px); align-items: center; }
  .b-shop .tm-stage { margin: 0; padding-top: 0; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .bento.gm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento.gm > .b-prog, .bento.gm > .b-shop { grid-column: 1 / -1; }
  .bento.gm > .b-rank, .bento.gm > .b-miss, .bento.gm > .b-hall, .bento.gm > .b-double { grid-column: span 1; }
  .tm-stage[data-tm="miss"] { --w: 650; }
  .tm-stage[data-tm="dbl"] { --w: 570; }
}
/* XP padrão por ação (GamificationGuide::builtinActionPointDefaults) */
.gm-xp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.gm-xp li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 2px 7px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.gm-xp img { width: 20px; height: 20px; flex-shrink: 0; }
.gm-xp b { font-size: .85rem; font-weight: 700; color: #fe5b0e; white-space: nowrap; }
.gm-xp span { grid-column: 1 / -1; font-size: .76rem; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.gm-xp, .gm-xp-note { grid-column: 1 / -1; }
.gm-xp-note { margin: 10px 0 0; font-size: .76rem; color: var(--muted-2); }
@media (max-width: 640px) { .gm-xp, .gm-xp-note { display: none; } }
.tm-page { position: relative; width: calc(var(--w) * 1px); margin: 0 auto; padding: 24px; border-radius: 16px; background: #131116; border: 1px solid #1f2225; font-family: "Geist", var(--font-body); font-size: 16px; line-height: 1.5; color: #adb5bd; text-align: left; letter-spacing: 0; }
.tm-page--bare { padding: 20px; }
.tm-page p, .tm-page h4, .tm-page h5, .tm-page h6 { margin: 0; }
.tm-card { background: #191b1e; border: 1px solid #1f2225; border-radius: 16px; }
/* nav da gamificação */
.tm-nav { display: flex; gap: 6px; margin-bottom: 36px; overflow: hidden; box-shadow: inset 0 -1px 0 #2a2d31; }
.tm-nav__btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 12px; color: #9a9fa5; white-space: nowrap; }
.tm-nav__btn i { font-size: 15px; line-height: 1; }
.tm-nav__btn.on { color: #e6e7e8; font-weight: 600; box-shadow: inset 0 -2px 0 #fe5b0e; }
.tm-nav__btn.on i { color: #fe5b0e; }
/* cabeçalho da página */
.tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.tm-h1 { font-family: "Geist", var(--font-body); font-size: 20px; font-weight: 700; line-height: 24px; color: #e6e7e8; letter-spacing: 0; }
.tm-sub { margin-top: 2px !important; font-size: 14px; line-height: 1.6; color: #868e96; text-wrap: balance; }
.tm-link { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 16px; font-weight: 500; color: #fe5b0e; }
.tm-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; width: 200px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid #424547; background: #191b1e; font-size: 13px; color: #cbcccd; }
.tm-select i { font-size: 18px; color: #868e96; }
/* avatar + moldura (gamification-avatar-wrap) */
.tm-ava { position: relative; display: inline-flex; flex-shrink: 0; width: var(--s); height: var(--s); }
.tm-ava__ph { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #3a3d41; }
.tm-ava__ph em { font-style: normal; font-weight: 700; font-size: calc(var(--s) * .34); color: #f1f3f5; letter-spacing: -.01em; }
.tm-ava__ph img { width: 58%; height: 58%; object-fit: contain; }
/* foto de perfil da marca: logo nas cores originais sobre o fundo escuro do avatar */
.tm-ava__ph:has(> img) { background: #18161b; }
.tm-ava__fr { position: absolute; left: 50%; top: 50%; width: var(--f); height: var(--f); max-width: none; object-fit: contain; transform: translate(-50%, calc(-50% + var(--dy))); pointer-events: none; transition: opacity .5s var(--ease); }
/* selos de level e XP */
.tm-badges { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tm-lvl { display: inline-flex; align-items: center; padding: 3.2px 10.4px; border-radius: 6px; background: #fe5b0e; font-size: 13px; font-weight: 700; line-height: 16.9px; color: #18161b; white-space: nowrap; }
.tm-xpb { display: inline-flex; align-items: center; padding: 4px 10.4px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); font-size: 14px; font-weight: 600; line-height: 21px; color: #f3f4f6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-xpb img { margin-right: 4px; }
.tm-xpb span { transition: opacity .3s; }
/* Meu progresso */
.tm-snap { padding: 20px 24px; }
.tm-snap__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: center; }
.tm-k { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 12px; line-height: 18px; color: #868e96; }
.tm-k2 { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: #8b8c8e; }
.tm-k2 b { font-weight: 400; }
.tm-v { display: block; font-size: 18px; font-weight: 700; line-height: 40px; color: #cbcccd; font-variant-numeric: tabular-nums; }
.tm-v2 { display: block; font-size: 16px; font-weight: 400; line-height: 18px; color: #cbcccd; }
.tm-acc { color: #fe5b0e; }
.tm-snap hr { margin: 24px 0; border: 0; border-top: 1px solid #6c757d; opacity: .25; }
.tm-snap .tm-k2 { margin: 0 0 8px; }
.tm-bar { height: 8px; margin-bottom: 8px; border-radius: 6px; background: #343a40; overflow: hidden; }
.tm-bar--10 { height: 10px; margin-bottom: 0; }
.tm-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #fe5b0e; transition: width .6s var(--ease); }
.tm-ach { margin-top: 24px; }
.tm-ach__head { display: flex; align-items: center; gap: 8px; min-height: 57px; padding: 8px 16px; border-bottom: 1px solid #1f2225; }
.tm-ach__head i { font-size: 20px; color: #fe5b0e; }
.tm-ach__head h5 { font-family: "Geist", var(--font-body); font-size: 16px; font-weight: 700; color: #e6e7e8; letter-spacing: 0; }
.tm-ach__body { padding: 20px 16px 28px; }
.tm-tiers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 5.6px 0 0; list-style: none; }
.tm-tier { position: relative; display: flex; flex-direction: column; align-items: center; padding: 49.6px 8px 20px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); text-align: center; transition: border-color .5s, background-color .5s, box-shadow .5s; }
.tm-tier .tm-ava { margin: 10.4px 0 21.6px; }
.tm-tier__badge { position: absolute; top: 10.4px; left: 50%; transform: translateX(-50%); padding: 4.8px 10.4px; border-radius: 999px; font-size: 10.4px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.tm-tier__name { margin-top: 8px !important; font-size: 14px; line-height: 18px; color: #cbcccd; }
.tm-tier__xp { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px !important; font-size: 12px; line-height: 18px; color: #8b8c8e; white-space: nowrap; }
.tm-tier__xp img { width: 16px; height: 16px; }
.tm-tier.is-done { border-color: rgba(34,197,94,.22); }
.tm-tier.is-done .tm-tier__badge { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #86efac; }
.tm-tier.is-here { background: rgba(232,93,4,.07); border-color: rgba(232,93,4,.45); box-shadow: 0 0 0 1px rgba(232,93,4,.2), 0 10px 28px rgba(232,93,4,.1); }
.tm-tier.is-here .tm-tier__badge { background: rgba(232,93,4,.18); border-color: rgba(232,93,4,.45); color: #f4a261; }
.tm-tier.is-lock { opacity: 1; }
.tm-tier.is-lock .tm-ava__ph img { opacity: .45; filter: grayscale(.35); }
.tm-tier.pop { animation: gmPop .7s var(--ease); }
@keyframes gmPop { 40% { transform: scale(1.06); } }
/* aviso de XP (gamification-xp-notify) */
.tm-toast { position: absolute; right: 24px; top: 24px; z-index: 3; display: flex; align-items: flex-start; gap: 10.4px; padding: 8.8px 12px; border-radius: 10px; background: rgba(18,20,22,.94); border: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translate3d(-12px, 12px, 0); transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.tm-toast > img { width: 22px; height: 22px; flex-shrink: 0; }
.tm-toast span { display: grid; gap: 2px; }
.tm-toast b { font-size: 15px; font-weight: 700; line-height: 1.2; color: #fe5b0e; }
.tm-toast b em { font-style: normal; font-weight: 500; color: #cbcccd; }
.tm-toast small { font-size: 12px; line-height: 1.3; color: #cbcccd; }
.tm-toast.on, .tm-toast.is-static { opacity: 1; transform: none; }
.tm-toast.celebrate { border-color: rgba(254,91,14,.5); }
.tm-toast.is-static { position: static; }
/* Ranking */
.tm-tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 30px; }
.tm-tabs span { padding: 10px 22px 12px; font-size: 14px; font-weight: 400; line-height: 20px; color: #9a9fa5; transition: color .3s, box-shadow .3s; }
.tm-tabs .on { color: #e6e7e8; font-weight: 600; box-shadow: inset 0 -2px 0 #fe5b0e; }
.tm-podium { display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 16px 0 8px; margin-bottom: 24px; }
.tm-spot { flex: 0 1 200px; min-width: 0; }
.tm-spot--1 { flex-basis: 220px; }
.tm-spot__in { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 12px; }
.tm-player { width: 100%; text-align: center; }
.tm-player .tm-name { margin: 8px 0 !important; }
.tm-player .tm-badges { margin-bottom: 4px; }
.tm-name { font-size: 16px; line-height: 24.8px; color: #cbcccd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-ped { position: relative; display: flex; align-items: center; justify-content: center; width: 140px; max-width: 100%; height: 88px; border-radius: 12px 12px 6px 6px; background: linear-gradient(165deg, #e8ecef 0%, #9aa3ad 40%, #5c636a 100%); box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25); transform: perspective(600px) rotateX(4deg); overflow: hidden; }
.tm-ped span { font-size: 44px; font-weight: 800; line-height: 1; color: rgba(0,0,0,.35); }
.tm-spot--1 .tm-ped { height: 118px; background: linear-gradient(165deg, #f5d76e 0%, #c9a227 35%, #8b6914 100%); }
.tm-spot--1 .tm-ped span { font-size: 52px; }
.tm-spot--1 .tm-ped::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 200% 100%; animation: tmShine 4s ease-out infinite; }
@keyframes tmShine { 0% { background-position: 150% 0; } 30%, 100% { background-position: -50% 0; } }
.tm-spot--3 .tm-ped { height: 68px; background: linear-gradient(165deg, #e8a87c 0%, #b87333 45%, #6b3e12 100%); }
.tm-list { margin: 0; padding: 0; list-style: none; }
.tm-row { display: flex; align-items: center; gap: 13.6px; margin-bottom: 16px; }
.tm-row__rank { width: 40px; flex-shrink: 0; font-size: 20px; font-weight: 700; line-height: 27px; color: #f9fafb; }
.tm-row__body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10.4px 16px; }
.tm-row__body .tm-name { flex: 1; min-width: 0; }
.tm-row.is-me .tm-row__body { border-color: rgba(232,93,4,.45); box-shadow: 0 0 16px rgba(232,93,4,.18); }
.tm-foot { margin-top: 24px !important; font-size: 14px; line-height: 21.7px; color: #868e96; text-align: center; }
#gmRank.swap [data-v] { opacity: 0; }
/* Missões */
.tm-group { margin: 0 0 16px !important; font-family: "Geist", var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.3; color: #cbcccd; letter-spacing: 0; }
.tm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.tm-grid2:last-child { margin-bottom: 0; }
.tm-mis { padding: 16px; transition: border-color .4s; }
.tm-mis.is-complete { border-color: rgba(254,91,14,.35); }
.tm-mis__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tm-mis__top span { font-size: 14px; line-height: 18px; color: #8b8c8e; }
.tm-mis__top strong { flex-shrink: 0; font-size: 16px; font-weight: 700; line-height: 18px; color: #fe5b0e; }
.tm-mis__foot { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: #868e96; font-variant-numeric: tabular-nums; }
.tm-mis__foot i { font-size: 14px; color: #fe5b0e; }
/* Hall da Fama */
.tm-year { margin-bottom: 24px !important; font-size: 16px; line-height: 1.4; color: #8b8c8e; }
.tm-plaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.tm-plaque { display: flex; flex-direction: column; padding: 18px 16px 20px; border-radius: 12px; background: linear-gradient(165deg, rgba(212,175,55,.06) 0%, rgba(255,255,255,.02) 55%); border: 1px solid rgba(212,175,55,.22); }
.tm-plaque.is-current { background: rgba(255,255,255,.03); border-color: rgba(232,93,4,.35); box-shadow: 0 0 0 1px rgba(232,93,4,.12); }
.tm-plaque header { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 42px !important; min-height: 20px; margin-bottom: 12px; }
.tm-plaque h6 { font-family: "Geist", var(--font-body); font-size: 12px; font-weight: 600; line-height: 18px; color: #cbcccd; letter-spacing: 0; }
.tm-pill { padding: 3.2px 8px; border-radius: 999px; background: rgba(232,93,4,.18); border: 1px solid rgba(232,93,4,.45); font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: #f4a261; white-space: nowrap; }
.tm-plaque header .tm-pill { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .tm-plaque header .tm-pill { padding: 2.5px 6px; font-size: 8px; letter-spacing: .03em; } }
.tm-plaque__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tm-plaque__name { margin: 16px 0 8px !important; max-width: 100%; font-size: 12px; line-height: 15.6px; color: #cbcccd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-plaque__hint { margin-top: 8px !important; font-size: 10px; line-height: 13.5px; color: #868e96; }
/* Double XP (campus-double-xp-strip) */
.tm-strip { display: flex; align-items: center; gap: 13.6px 16px; padding: 13.6px 16px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, #fe5b0e 10%, rgba(19,17,22,.96)) 0%, rgba(19,17,22,.96) 100%); border: 1px solid color-mix(in srgb, #fe5b0e 28%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); }
.tm-strip__badge { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 12px; padding: 10.4px 13.6px 10.4px 11.2px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, #fe5b0e 16%, rgba(19,17,22,.94)) 0%, rgba(19,17,22,.94) 100%); border: 1px solid color-mix(in srgb, #fe5b0e 42%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.tm-ring { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, #fe5b0e 12%, transparent); border: 1px solid color-mix(in srgb, #fe5b0e 34%, transparent); }
.tm-ring i { font-size: 19.2px; line-height: 1; color: #fe5b0e; }
.tm-strip__bc { display: flex; flex-direction: column; gap: 4px; }
.tm-strip__bc small, .tm-ovc small { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.tm-strip__bc b, .tm-ovc b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; line-height: 1; color: #fe5b0e; }
.tm-strip__copy { flex: 1; min-width: 0; }
.tm-strip__title { font-size: 15px; font-weight: 700; line-height: 1.35; color: #f5f5f5; }
.tm-strip__desc { margin-top: 3.2px !important; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); text-wrap: pretty; }
.tm-strip__meta { margin-top: 2.4px !important; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, #fe5b0e 55%, rgba(255,255,255,.5)); }
.tm-strip__x { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid color-mix(in srgb, #fe5b0e 18%, rgba(255,255,255,.1)); color: rgba(255,255,255,.6); }
.tm-dbl-end { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: #191b1e; border: 1px solid #1f2225; }
.tm-dbl-end > span { font-size: 14px; color: #868e96; }
.tm-dbl-demo { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.countdown { display: flex; gap: 6px; flex-shrink: 0; }
.countdown span { min-width: 40px; padding: 6px 7px; border-radius: 8px; background: rgba(255,255,255,.06); font-family: "Geist", var(--font-body); font-weight: 500; font-size: 11px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.countdown b { margin-right: 1px; font-size: 16px; font-weight: 600; color: #f3f4f6; }
/* Recompensas */
.tm-balance { margin-bottom: 16px !important; font-size: 12px; line-height: 18px; color: #868e96; }
.tm-balance strong { color: #fe5b0e; font-weight: 700; }
.tm-rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm-rw { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.tm-rw__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255,255,255,.04); }
.tm-rw__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-type { position: absolute; left: 8.8px; top: 8.8px; z-index: 1; display: inline-flex; align-items: center; gap: 4.5px; padding: 4.8px 7.2px; border-radius: 6px; background: rgba(19,17,22,.78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.tm-type { border-color: rgba(254,91,14,.22); }
.tm-type i { font-size: 12px; color: #fe5b0e; }

.tm-rw__body { flex: 1; display: flex; flex-direction: column; padding: 15.2px 16px 16.8px; }
.tm-rw__body h6 { margin-bottom: 8px !important; font-family: "Geist", var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.35; color: #cbcccd; letter-spacing: 0; }
.tm-rw__body p { flex: 1; margin-bottom: 10.4px !important; font-size: 13px; line-height: 1.45; color: #9ca3af; }
.tm-rw__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.tm-cost { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1; color: #fe5b0e; }
.tm-cost img, .tm-ovc b img { width: 16px; height: 16px; }
.tm-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 4.8px 10.4px; border-radius: 10px; background: #fe5b0e; font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #18161b; white-space: nowrap; } /* .btn.btn-primary.bg-green.btn-sm do campus; texto grafite = CampusTheme::onAccent(#fe5b0e) */
.tm-rw.is-locked .tm-rw__body, .tm-rw.is-redeemed .tm-rw__body { opacity: .72; }
.tm-rw.is-redeemed .tm-rw__media > img { filter: grayscale(.15) brightness(.88); }
.tm-rw.is-locked .tm-rw__media > img { filter: grayscale(.22) brightness(.84); }
.tm-ov { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(19,17,22,.38) 0%, rgba(19,17,22,.68) 100%); backdrop-filter: blur(2px); }
.tm-ovb { display: inline-flex; align-items: center; gap: 12.8px; max-width: calc(100% - 24px); padding: 12.8px 16px 12.8px 13.6px; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, #fe5b0e 16%, rgba(19,17,22,.94)) 0%, rgba(19,17,22,.94) 100%); border: 1px solid color-mix(in srgb, #fe5b0e 42%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06); }
.tm-ovc { display: flex; flex-direction: column; gap: 4px; }
.is-redeemed .tm-ovc b { letter-spacing: .06em; text-transform: uppercase; }
/* responsivo: a largura natural de cada tela muda como no campus */
@media (max-width: 1100px) {
  .b-prog, .b-shop, .b-rank, .b-miss, .b-hall, .b-double { grid-column: span 2; }
  .gm-prog-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .b-rank, .b-miss, .b-hall, .b-double { grid-column: span 1; }
}
/* celular: os cards ficam um embaixo do outro, cada um na sua altura (sem carrossel) */
@media (max-width: 640px) {
  .bento.gm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bento.gm > * { min-width: 0; }
  .bento.gm .tm-stage { margin-top: 0; }
}
@media (max-width: 640px) {
  .b-prog, .b-rank, .b-miss, .b-hall, .b-double, .b-shop { grid-column: auto; }
  .tm-stage[data-tm] { --w: 460; }
  .tm-stage[data-tm="prog"], .tm-stage[data-tm="shop"] { --w: 520; }
  .tm-page { padding: 18px; }
  .tm-nav { margin: 0 -18px 28px; padding: 0 18px; }
  .tm-head { flex-direction: column; margin-bottom: 24px; }
  .tm-snap__row { grid-template-columns: 1fr 1fr; }
  .tm-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-tier:nth-child(n+7) { display: none; }
  .tm-toast { top: auto; bottom: 18px; right: 18px; }
  .tm-tabs { gap: 0; }
  .tm-podium { gap: 8px; }
  .tm-name { font-size: 14px; }
  .tm-badges { gap: 5px; }
  .tm-player .tm-badges { flex-direction: column; }
  .tm-ped { width: 100%; }
  .tm-grid2 { grid-template-columns: 1fr; }
  .tm-grid2 .tm-mis:nth-child(2) { display: none; }
  .tm-plaques { grid-template-columns: 1fr 1fr; }
  .tm-plaque:nth-child(3) { display: none; }
  .tm-strip { flex-wrap: wrap; }
  .tm-strip__copy { flex-basis: 100%; order: 3; }
  .tm-strip__x { margin-left: auto; }
  .tm-rewards { grid-template-columns: 1fr 1fr; }
  .tm-rw__body p { display: none; }
  .tm-rw__foot { flex-wrap: wrap; }
  .tm-cost { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .gm * { transition: none !important; animation: none !important; } }

/* ---------- AI ---------- */
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ai-card { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.ai-card .tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: .78rem; color: var(--text-2); margin-bottom: 22px; }
.ai-card .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--red); }
.ai-card h3 { margin-bottom: 14px; }
.ai-card .copy { margin-bottom: 30px; }
/* Context AI: painel real do Tucanete dentro da aula (campus/views/chat) */
.ctx, .mnd { position: relative; margin-top: auto; font-family: "Geist", var(--font-body); }
/* card da aula: mesmo desenho do "Continue assistindo" do campus */
.ctx-lesson { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 10px; border-radius: 15px; background: #18161b; border: 1px solid #1f2225; }
.ctx-l-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctx-l-mod { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: .66rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #fe5b0e; white-space: nowrap; overflow: hidden; }
.ctx-l-mod i { font-size: .8rem; opacity: .88; }
.ctx-l-title { display: flex; align-items: flex-start; gap: 4px; margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.35; color: #f0f0f0; }
.ctx-l-title i { margin-top: 2px; font-size: .62rem; opacity: .42; color: #9a9c9e; }
.ctx-l-prog { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ctx-l-prog i { position: relative; flex: 1; height: 4px; border-radius: 4px; background: #2a2d31; overflow: hidden; }
.ctx-l-prog i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: #fe5b0e; }
.ctx-l-prog em { font-style: normal; font-size: .62rem; color: #9a9c9e; }
.ctx-now { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, #fe5b0e 12%, transparent); border: 1px solid color-mix(in srgb, #fe5b0e 30%, transparent); font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fe5b0e; white-space: nowrap; }
.ctx-now i { width: 6px; height: 6px; border-radius: 50%; background: #fe5b0e; animation: ctxLive 1.6s ease-in-out infinite; }
@keyframes ctxLive { 0% { box-shadow: 0 0 0 0 rgba(254,91,14,.6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(254,91,14,0); } }
.ctx-win { display: flex; flex-direction: column; height: 400px; border-radius: 16px; overflow: hidden; background: #0f0f0f; box-shadow: 0 8px 32px rgba(0,0,0,.6); border: 1px solid #222; }
.ctx-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #2a2a2a; font-size: 14px; font-weight: 500; color: #e0e0e0; }
.ctx-head img { width: 28px; height: 28px; border-radius: 50%; }
.ctx-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: ctxPulse 2s infinite; }
.ctx-x { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; border: 1px solid #444; font-size: 16px; color: #e0e0e0; }
@keyframes ctxPulse { 50% { opacity: .5; } }
.ctx-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px; overflow: hidden; }
.ctx-first { display: flex; gap: 8px; margin-bottom: auto; font-size: 12px; line-height: 1.5; color: #888; }
.ctx-first span { font-size: 1.3em; line-height: 1.2; }
.ctx-msg, .ctx-typing { display: none; align-items: flex-start; gap: 8px; max-width: 82%; padding: 9px 13px; border-radius: 18px; animation: ctxIn .3s ease both; }
.ctx-msg.show, .ctx-typing.show { display: flex; }
.ctx-msg.me { align-self: flex-end; background: #3a3a3a; }
.ctx-msg.ai, .ctx-typing { align-self: flex-start; background: #1a1a1a; border: 1px solid #2a2a2a; }
.ctx-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: #2a2a2a; border: 1px solid #444; }
.ctx-ic img { width: 100%; height: 100%; object-fit: cover; }
/* foto do aluno sem a moldura de gamificação, como no .user-icon do chat da aula (24px redondo) */
.ctx-ic { width: 24px; height: 24px; }
.ctx-ic.ctx-user { display: grid; place-items: center; padding: 4px; background: #131116; border: 0; }
.ctx-ic.ctx-user img { object-fit: contain; }
.ctx-msg b { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: #e0e0e0; }
.ctx-msg p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #d0d0d0; }
.ctx-msg strong { color: #fff; font-weight: 600; }
/* "pensando": igual ao typing-indicator do campus/views/chat (ícone + 3 pontos de 8px que pulam 8px) */
.ctx-typing { align-items: center; gap: 8px; padding: 14px 18px; }
.ctx-dots { display: flex; gap: 4px; padding-top: 6px; }
.ctx-dots i { width: 8px; height: 8px; border-radius: 50%; background: #666; animation: ctxBounce 1.4s infinite; }
.ctx-dots i:nth-child(2) { animation-delay: .2s; }
.ctx-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ctxBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@keyframes ctxIn { from { opacity: 0; transform: translateY(10px); } }
.ctx-input, .mnd-input { padding: 12px 16px 12px; border-top: 1px solid #2a2a2a; }
.ctx-field { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 8px 0 14px; border-radius: 12px; background: #1f1f1f; border: 1px solid #fe5b0e; font-size: 13px; }
.ctx-ph { position: absolute; left: 14px; color: #8a8a8a; transition: opacity .15s; }
.typing-on .ctx-ph { opacity: 0; }
.ctx-typed { flex: 1; min-width: 0; color: #e0e0e0; white-space: nowrap; overflow: hidden; }
.typing-on .ctx-typed::after { content: ""; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; vertical-align: -3px; background: #e0e0e0; animation: dmBlink 1s steps(1) infinite; }
.ctx-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; opacity: .3; transition: background-color .2s, opacity .2s; }
.ctx-send svg { width: 18px; height: 18px; fill: #e0e0e0; transition: fill .2s; } /* igual ao .send-button do campus: avião preenchido */
.typing-on .ctx-send { opacity: 1; background: #fe5b0e; }
.typing-on .ctx-send svg { fill: #1a1a1a; }
.ctx-input p, .mnd-input p { margin: 7px 0 0 14px; font-size: 11px; color: #8a8a8a; }

/* Minds AI: página "Especialistas IA" e chat do Mind (campus/views/minds) */
.mnd { height: 466px; border-radius: 16px; overflow: hidden; background: #18161b; border: 1px solid rgba(255,255,255,.06); color: #e9e7ea; }
.mnd-view { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.mnd-list { padding: 22px 20px; }
.mnd-chat { margin: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
.mnd.in-chat .mnd-list { opacity: 0; transform: scale(.98); }
.mnd.in-chat .mnd-chat { opacity: 1; transform: none; }
.mnd-pill { display: flex; align-items: center; gap: 10px; }
.mnd-pill span { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #e6e7e8; }
.mnd-pill::after { content: ""; flex: 1; height: 1px; background: #2a2d31; }
.mnd-lead { margin: 12px 0 16px; font-size: 12px; color: #9a9fa5; }
.mnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mnd-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 15px; background: #191b1e; border: 1px solid #1f2225; }
.mnd-card > img, .mnd-ava { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; }
.mnd-ava { display: grid; place-items: center; background: linear-gradient(145deg, #2b2d31, #1c1d21); border: 1px solid rgba(255,255,255,.08); font-size: 22px; color: #a7a4ad; }
.mnd-card b { font-size: 14px; font-weight: 600; color: #e6e7e8; }
.mnd-card small { font-size: 11.5px; color: #cbcccd; }
.mnd-card p { margin: 4px 0 12px; font-size: 11px; line-height: 1.4; color: #9a9fa5; }
.mnd-cta { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: auto; border-radius: 8px; background: #1f2225; border: 1px solid #424547; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #e9e7ea; transition: transform .15s, background-color .2s; }
.mnd-cta i { font-size: 14px; }
.mnd-card { transition: transform .2s ease, border-color .2s ease; }
.mnd-card.hover:not(.locked), .mnd-card:not(.locked):hover { transform: translateY(-2px); }
.mnd-cta { transition: transform .15s, background-color .3s ease, color .2s ease, border-color .3s ease; }
.mnd-card.hover:not(.locked) .mnd-cta, .mnd-card:not(.locked):hover .mnd-cta { background: #fe5b0e; border-color: #fe5b0e; color: #18161b; }
.mnd-card.press .mnd-cta { transform: scale(.96); }
.mnd-card.locked { opacity: .92; }
.mnd-card.locked .mnd-cta { color: #8e8b93; }
.mnd-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: rgba(100,116,139,.95); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.mnd-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mnd-head > i { font-size: 18px; opacity: .75; }
.mnd-head img { width: 36px; height: 36px; border-radius: 50%; }
.mnd-head b { display: block; font-size: 13.5px; font-weight: 600; }
.mnd-head small { font-size: 11px; opacity: .75; }
.mnd-head span { display: flex; gap: 12px; margin-left: auto; font-size: 15px; opacity: .8; }
.mnd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; overflow: hidden; }
.mnd-msg { display: none; max-width: 86%; animation: ctxIn .3s ease both; }
.mnd-msg.show { display: flex; }
.mnd-msg p { margin: 0; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; }
.mnd-msg.me { align-self: flex-end; }
.mnd-msg.me p { background: rgba(34,197,94,.2); border-bottom-right-radius: 4px; }
.mnd-msg.ai p { background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; color: #e0dee3; }
.mnd-msg.ai strong { color: #fff; font-weight: 600; }
/* "pensando": igual ao minds-msg__bubble--typing do campus/views/minds (3 pontos de 6px, 1s, sobem 3px) */
.mnd-msg.typing p { display: inline-flex; align-items: center; gap: 4px; min-height: calc(1.5rem + 22px); padding: 11px 14px; color: #e0dee3; }
.mnd-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: mndTyping 1s infinite ease-in-out; }
.mnd-msg.typing span:nth-child(2) { animation-delay: .15s; }
.mnd-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mndTyping { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
.mnd-input .ctx-field { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.1); }
.mnd-input.typing-on .ctx-field { border-color: #fe5b0e; }
.mnd-cursor { position: absolute; left: 0; top: 0; z-index: 3; font-size: 22px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); opacity: 0; transform: translate(260px, 380px); transition: transform .8s var(--ease), opacity .3s; pointer-events: none; }
.mnd-cursor.on { opacity: 1; }
/* refinos: boas-vindas do Mind (campo "mensagem de boas-vindas"), degradê no topo dos chats e cabeçalho sem quebra */
.mnd-msg.mnd-welcome { display: flex; margin-bottom: auto; animation: none; }
.ctx-body, .mnd-body { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px); mask-image: linear-gradient(180deg, transparent, #000 14px); }
.mnd-head > div { min-width: 0; }
.mnd-head b, .mnd-head small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ai-points li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .74rem; color: var(--text-2); }
.ai-points i { color: var(--orange); font-size: .95rem; }
@media (max-width: 640px) {
  .ctx-win { height: 380px; }
  .ctx-now { display: none; }
  .mnd { height: 500px; }
  .mnd-grid { grid-template-columns: 1fr; }
  .mnd-card.locked { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ctx *, .mnd * { animation: none !important; transition: none !important; } }

.ai-analytics { margin-top: 20px; padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
.ai-analytics .copy { margin-top: 12px; }
.ai-an-list { display: grid; gap: 10px; margin-top: 22px; }
.ai-an-list li { display: flex; align-items: center; gap: 10px; text-wrap: pretty; font-size: .88rem; color: var(--text-2); }
.ai-an-list i { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--orange); font-size: .9rem; }

/* Mini painel de Insights (admin › Tucano AI › Insights), em versão escura */
.ins { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--inset); border: 1px solid var(--line-strong); font-family: "Geist", var(--font-body); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.ins-top, .ins-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-top b { display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 600; }
.ins-top b i { color: #34d399; }
.ins-bar { justify-content: flex-start; }
.ins-bar small { font-size: .7rem; color: var(--muted); }
.ins-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.ins-seg span, .ins-seg button { padding: 4px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.ins-seg button { cursor: pointer; transition: background-color .25s, color .25s; }
.ins-seg .on { background: rgba(52,211,153,.14); color: #6ee7b7; font-weight: 600; }
.ins-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ins-kpis > div { display: grid; align-content: start; gap: 3px; padding: 10px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.ins-kpis small { font-size: .68rem; color: var(--muted); }
.ins-kpis strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.ins-kpis em { font-style: normal; font-size: .62rem; line-height: 1.3; color: var(--muted); }
.ins-card { padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.ins-card h4 { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-size: .76rem; font-weight: 600; color: var(--text); }
.ins-card h4 i { color: var(--muted); font-size: .9rem; }
.ins-chart { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 62px; }
.ins-chart i { height: var(--h); min-height: 2px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #34d399, #14b8a6); transform-origin: bottom; transition: transform .6s var(--ease); }
.ins.swap .ins-chart i { transform: scaleY(.15); }
.ins-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: .6rem; color: var(--muted); }
.ins-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-duo ol, .ins-duo ul { display: grid; margin: 0; padding: 0; list-style: none; }
.ins-duo li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .72rem; color: var(--text-2); }
.ins-duo li:last-child { border-bottom: 0; }
/* Insights em recorte: números + perguntas mais frequentes (sem gráfico de horários e sem ranking de aulas) */
#insMock .ins-hours, #insMock .ins-duo > .ins-card:last-child { display: none; }
#insMock .ins-duo { grid-template-columns: 1fr; }
.ins-duo li span { min-width: 0; line-height: 1.35; }
.ins-duo li small { display: block; font-size: .62rem; color: var(--muted); }
.ins-duo ol li b { font-weight: 600; color: #34d399; }
.ins-duo ul li b { font-weight: 600; color: var(--text); }
.ins-pane { display: none !important; }
.ins[data-tab="context"] [data-for="context"], .ins[data-tab="minds"] [data-for="minds"] { display: grid !important; }
.ins[data-tab="context"] h4[data-for="context"], .ins[data-tab="minds"] h4[data-for="minds"] { display: flex !important; }
.ins [data-v], .ins-pane { transition: opacity .3s; }
.ins.swap [data-v], .ins.swap .ins-duo li { opacity: 0; }
@media (max-width: 640px) {
  .ins-top { flex-wrap: wrap; }
  .ins-kpis { grid-template-columns: 1fr 1fr; }
  .ins-duo { grid-template-columns: 1fr; }
}

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento > * { padding: clamp(22px, 2.6vw, 32px); }
.bento h3 { margin-bottom: 8px; }
.bento .copy { font-size: .95rem; }


/* ---------- Community ---------- */
.community { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.feed { display: grid; gap: 12px; }
.spaces { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.spaces span { font-size: .75rem; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); }
.spaces span.on { background: #fff; color: #111; border-color: #fff; font-weight: 600; }
.post { border-radius: 18px; background: var(--inset); border: 1px solid var(--line); padding: 18px; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .82rem; }
.post-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.post-head small { display: block; color: var(--muted); font-size: .72rem; }
.post-head .pin { margin-left: auto; font-size: .68rem; padding: 4px 10px; border-radius: 99px; background: var(--grad-soft); border: 1px solid rgba(255,61,50,.3); color: #ff8a6b; }
.post p { font-size: .88rem; color: var(--text-2); }
.post-actions { display: flex; gap: 18px; margin-top: 14px; font-size: .75rem; color: var(--muted); }
.post-actions span { display: inline-flex; align-items: center; gap: 6px; }
.post-actions svg { width: 15px; height: 15px; }
.poll { display: grid; gap: 8px; margin-top: 12px; }
.poll div { position: relative; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: .8rem; overflow: hidden; display: flex; justify-content: space-between; }
.poll div::before { content: ""; position: absolute; inset: 0; width: var(--p); background: rgba(255,61,50,.14); }
.poll div > * { position: relative; }
.poll div.win::before { background: var(--grad-soft); }
.comm-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.comm-feature { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.comm-feature strong { display: block; font-size: .95rem; margin: 12px 0 4px; font-weight: 600; }
.comm-feature span { font-size: .85rem; color: var(--muted); line-height: 1.5; display: block; }
.comm-feature .icon-box { width: 38px; height: 38px; border-radius: 11px; }
.comm-feature .icon-box svg { width: 18px; height: 18px; }

/* ---------- Acquisition tools ---------- */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tool { padding: 0; display: flex; flex-direction: column; }
.tool-visual { height: 220px; border-bottom: 1px solid var(--line); background: radial-gradient(100% 90% at 50% 0%, rgba(255,61,50,.14), transparent 70%), var(--inset); display: grid; place-items: center; padding: 22px; overflow: hidden; }
.tool-body { padding: 26px; }
.tool-body h3 { margin-bottom: 10px; }
.tool-body .copy { font-size: .95rem; }

.funnel-mock { width: 100%; max-width: 260px; display: grid; gap: 8px; }
.funnel-mock .step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); font-size: .75rem; }
.funnel-mock .step b { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: .7rem; }
.funnel-mock .step.on { border-color: rgba(255,61,50,.4); background: var(--grad-soft); }
.funnel-mock .step.on b { background: var(--grad); }
.funnel-mock .step em { margin-left: auto; font-style: normal; color: var(--green); font-size: .7rem; }

.webinar-mock { width: 100%; max-width: 280px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--inset); }
.webinar-mock .screen { position: relative; aspect-ratio: 16/9; background: url("../img/experts/pedro_frade.webp") center 25% / cover; }
.webinar-mock .screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 50%); }
.webinar-mock .live-tag { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: #e11d48; letter-spacing: .05em; }
.webinar-mock .live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.webinar-mock .viewers { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: .66rem; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); }
.webinar-mock .meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: .7rem; color: var(--muted); }
.webinar-mock .meta b { color: var(--text); }

.fake-mock { width: 100%; max-width: 270px; display: grid; gap: 8px; }
.fake-mock .cm { display: flex; gap: 8px; align-items: flex-start; font-size: .72rem; padding: 8px 10px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line); }
.fake-mock .cm i { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.12); }
.fake-mock .cm b { display: block; font-size: .7rem; }
.fake-mock .cm span { color: var(--muted); }
.fake-mock .offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 12px; background: var(--grad); font-size: .75rem; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(255,61,50,.7); animation: pop 4s var(--ease) infinite; }
.fake-mock .offer span { background: #fff; color: #111; padding: 5px 10px; border-radius: 99px; font-size: .68rem; }
@keyframes pop { 0%, 15% { transform: translateY(10px); opacity: 0; } 25%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

.note {
  margin-top: 20px;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
}
.note img { width: 44px; height: 44px; flex-shrink: 0; }
.note p { font-size: 1.0625rem; color: var(--text-2); }
.note strong { color: #fff; font-weight: 600; }

/* ---------- Mobile / Phone ---------- */
.phone {
  position: relative; width: 270px; aspect-ratio: 9/19; border-radius: 44px;
  padding: 10px; background: linear-gradient(160deg, #2a2a2e, #0e0e10);
  box-shadow: 0 40px 100px -30px rgba(255,61,50,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden; background: var(--bg); padding: 40px 14px 14px; }
.phone-screen::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 99px; background: #000; }
.ph-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: .72rem; }
.ph-top img { height: 18px; }
.ph-top .coin { color: var(--amber); font-weight: 600; }
.ph-banner { height: 120px; border-radius: 14px; background: radial-gradient(circle at 80% 20%, rgba(255,18,106,.6), transparent 50%), linear-gradient(130deg, #2a120c, #160a14); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 12px; }
.ph-banner strong { font-family: var(--font-display); font-size: .95rem; line-height: 1.15; }
.ph-banner small { font-size: .62rem; color: rgba(255,255,255,.7); }
.ph-label { font-size: .7rem; font-weight: 600; margin: 4px 0 8px; }
.ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ph-row .cover { aspect-ratio: 3/4; }
.ph-nav { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 10px; border-radius: 18px; background: rgba(30,30,33,.85); }
.ph-nav span { width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.18); }
.ph-nav span.on { background: var(--grad); }

.homescreen-tip {
  position: absolute; right: -10px; bottom: 90px; z-index: 2;
  width: 210px; padding: 14px; border-radius: 16px;
  background: rgba(24,24,27,.92); border: 1px solid var(--line-strong);
  font-size: .75rem; box-shadow: 0 20px 50px -20px #000;
  animation: floaty 6s ease-in-out infinite;
}
.homescreen-tip .row { display: flex; align-items: center; gap: 10px; }
.homescreen-tip img { width: 36px; height: 36px; border-radius: 10px; }
.homescreen-tip small { display: block; color: var(--muted); font-size: .68rem; }
.homescreen-tip .add { margin-top: 10px; text-align: center; padding: 8px; border-radius: 10px; background: #fff; color: #111; font-weight: 600; }

/* ---------- Notify: cápsula (notificação interna + push) e histórico de envios ---------- */
#notify .split-media { min-width: 0; }
.ntf { width: 100%; min-width: 0; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ntf-island { position: relative; flex-shrink: 0; width: 190px; height: 44px; margin: 21px 0; border-radius: 26px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 50px -18px rgba(0,0,0,.9); overflow: hidden; transition: width .55s cubic-bezier(.32,1.15,.4,1), height .55s cubic-bezier(.32,1.15,.4,1), margin .55s cubic-bezier(.32,1.15,.4,1), border-radius .55s, box-shadow .5s; }
.ntf-island::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(254,91,14,0); transition: box-shadow .5s; }
.ntf-island__mini, .ntf-island__full { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .3s, transform .45s cubic-bezier(.22,1,.36,1), filter .3s; }
.ntf-island__mini { gap: 9px; padding: 0 16px 0 7px; }
.ntf-island__bell { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #ff6514, #ff126a); color: #fff; font-size: 15px; }
.ntf-island__mini b { font-family: var(--font-display); font-size: .9rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ntf-island__dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.18); animation: blink 1.6s infinite; }
.ntf-island__full { gap: 13px; padding: 14px 16px 14px 14px; opacity: 0; transform: scale(.92); filter: blur(4px); align-items: flex-start; }
.ntf-island__full > img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; }
.ntf-island__body { flex: 1; min-width: 0; }
.ntf-island__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ntf-island__top small { font-size: .72rem; color: rgba(255,255,255,.45); }
.ntf-island__body strong { display: block; font-size: .92rem; font-weight: 600; color: #fff; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-island__body p { margin: 2px 0 0; font-size: .8rem; line-height: 1.35; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(254,91,14,.16); color: #ff8a4c; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ntf-tag i { font-size: .8rem; }
.ntf-tag.is-push { background: rgba(10,132,255,.16); color: #5eb0ff; }
.ntf.is-open .ntf-island { width: 100%; height: 86px; margin: 0; border-radius: 20px; }
.ntf.is-open .ntf-island::after { box-shadow: inset 0 0 0 1px rgba(254,91,14,.35); }
.ntf.is-open .ntf-island__mini { opacity: 0; transform: scale(.9); transition-duration: .15s; }
.ntf.is-open .ntf-island__full { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.ntf-log, .ntf-next { width: 100%; border-radius: 18px; background: rgba(24,22,27,.82); border: 1px solid var(--line-strong); box-shadow: 0 24px 48px -28px #000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ntf-log { padding: 14px 14px 6px; }
.ntf-log__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ntf-log__head small { font-size: .72rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.ntf-list { margin: 0; padding: 0; list-style: none; }
.ntf-list li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.ntf-list li:first-child { border-top: 0; }
.ntf-list li.is-new { animation: ntfIn .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes ntfIn { from { opacity: 0; transform: translateY(-10px); } }
.ntf-list img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; }
.ntf-list li > div { flex: 1; min-width: 0; }
.ntf-list strong { display: block; font-size: .84rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-list small { display: block; font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntf-ch { display: flex; gap: 4px; }
.ntf-ch i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text-2); font-size: .82rem; }
.ntf-next { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-style: dashed; }
.ntf-next__ic { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(254,91,14,.14); color: #fe5b0e; font-size: 1rem; }
.ntf-next small { display: block; font-size: .72rem; color: var(--muted); }
.ntf-next b { font-size: .88rem; font-weight: 600; color: var(--text); }
.ntf-chips { display: flex; gap: 6px; margin-left: auto; }
.ntf-chips em { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-style: normal; font-size: .7rem; font-weight: 500; color: var(--text-2); }
@media (max-width: 480px) {
  .ntf-island { margin: 18px 0; }
  .ntf.is-open .ntf-island { height: 80px; margin: 0; }
  .ntf-island__full > img { width: 40px; height: 40px; }
  .ntf-next { flex-wrap: wrap; }
  .ntf-chips { width: 100%; margin-left: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ntf-island, .ntf-island__mini, .ntf-island__full { transition: none; }
}

/* ---------- Score: Engagement Score real (admin · courses_metrics) com pilares, evolução e diagnóstico ---------- */
#score .split-media { min-width: 0; }
.sc { --ok: #22c55e; --mid: #f59e0b; --bad: #dc2626; position: relative; width: 100%; min-width: 0; max-width: 540px; display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(20,18,23,.9); border: 1px solid var(--line-strong); box-shadow: 0 40px 80px -36px #000; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 4px; }
.sc-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.sc-title i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(254,91,14,.15); color: #fe5b0e; font-size: .95rem; }
.sc-title em { font-style: normal; font-family: var(--font-body); font-size: .8rem; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.sc-seg { display: flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.sc-seg span { padding: 4px 9px; border-radius: 7px; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.sc-seg .is-on { background: rgba(255,255,255,.09); color: var(--text); font-weight: 600; }
.sc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.sc-gauge, .sc-pil, .sc-evo { border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.sc-gauge { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px; }
.sc-label { align-self: flex-start; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-gauge svg { width: 100%; max-width: 190px; margin-top: 8px; overflow: visible; }
.sc-gauge path { fill: none; stroke-width: 14; stroke-linecap: round; }
.sc-track { stroke: rgba(255,255,255,.07); }
.sc-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1) .2s; filter: drop-shadow(0 0 8px rgba(34,197,94,.25)); }
.sc.in .sc-arc { stroke-dashoffset: 23; }
.sc-val { margin-top: -44px; display: flex; align-items: baseline; gap: 2px; }
.sc-val b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
.sc-val small { font-size: .8rem; color: var(--muted); }
.sc-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(34,197,94,.12); color: var(--ok); font-size: .72rem; font-weight: 600; }
.sc-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.sc-legend { display: flex; gap: 10px; margin-top: 12px; font-size: .62rem; color: var(--muted-2); }
.sc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sc-legend span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.sc-legend .c::before { background: var(--bad); } .sc-legend .a::before { background: var(--mid); } .sc-legend .h::before { background: var(--ok); }
.sc-pil { display: grid; align-content: center; gap: 2px; margin: 0; padding: 8px 12px; list-style: none; }
.sc-pil li { --c: var(--ok); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto 4px; column-gap: 10px; row-gap: 7px; align-items: center; padding: 7px 0; }
.sc-pil li + li { border-top: 1px solid var(--line); }
.sc-pil li.is-mid { --c: var(--mid); }
.sc-pil__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-2); font-size: .85rem; }
.sc-pil__name { font-size: .8rem; font-weight: 500; line-height: 1.2; color: var(--text); white-space: nowrap; }
.sc-pil__name small { display: block; margin-top: 1px; font-size: .66rem; font-weight: 400; color: var(--muted-2); }
.sc-pil b { font-size: .82rem; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.sc-pil__bar { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.sc-pil__bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.sc.in .sc-pil__bar i { transform: none; }
.sc-pil li:nth-child(2) i { transition-delay: .1s; } .sc-pil li:nth-child(3) i { transition-delay: .2s; } .sc-pil li:nth-child(4) i { transition-delay: .3s; }
.sc-evo { padding: 12px 14px 10px; }
.sc-evo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-evo__head em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; letter-spacing: 0; text-transform: none; font-size: .74rem; color: var(--ok); }
.sc-evo svg { display: block; width: 100%; height: 64px; overflow: visible; }
.sc-line { fill: none; stroke: #fe5b0e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) .3s; }
.sc-area { opacity: 0; transition: opacity 1s 1.4s; }
.sc.in .sc-line { stroke-dashoffset: 0; }
.sc.in .sc-area { opacity: 1; }
.sc-evo__x { display: flex; justify-content: space-between; margin-top: 6px; font-size: .64rem; color: var(--muted-2); }
.sc-diag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; background: linear-gradient(100deg, rgba(254,91,14,.12), rgba(255,18,106,.05)); border: 1px solid rgba(254,91,14,.26); opacity: 0; transform: translateY(10px); transition: opacity .6s 1.4s, transform .7s cubic-bezier(.22,1,.36,1) 1.4s; }
.sc.in .sc-diag { opacity: 1; transform: none; }
/* diagnóstico em box flutuante sobre o canto do painel */
@media (min-width: 641px) {
  .sc { margin-bottom: 92px; }
  .sc-diag { position: absolute; right: -22px; bottom: -94px; z-index: 3; width: min(318px, 74%); grid-template-columns: 1fr; background: linear-gradient(150deg, rgba(254,91,14,.16), rgba(255,18,106,.06) 70%), #1a161c; border-color: rgba(254,91,14,.34); border-radius: 16px; box-shadow: 0 28px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset; }
  .sc-diag__next { border-left: 0; border-top: 1px solid rgba(254,91,14,.2); }
  .sc.in .sc-diag { animation: scDiagFloat 5s ease-in-out 2.2s infinite; }
}
@keyframes scDiagFloat { 50% { translate: 0 -6px; } }
/* telas médias: o painel fica mais estreito que o conteúdo mínimo, então os textos quebram */
@media (min-width: 641px) and (max-width: 1280px) {
  .sc-legend { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .sc-pil__name { white-space: normal; }
  .sc-pil li { column-gap: 8px; }
  .sc-seg span { padding: 4px 6px; }
  .sc-title em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sc.in .sc-diag { animation: none; } }
.sc-diag__col { min-width: 0; padding: 12px 14px; }
.sc-diag__next { border-left: 1px solid rgba(254,91,14,.2); }
.sc-diag small { display: flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ff8a4c; }
.sc-diag small i { font-size: .8rem; }
.sc-diag__st { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .86rem; font-weight: 600; color: var(--ok); }
.sc-diag__st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-diag p { margin: 4px 0 0; font-size: .76rem; line-height: 1.4; color: var(--text-2); text-wrap: balance; }
.sc-diag__next p:not(.sc-diag__note) { margin-top: 6px; font-size: .8rem; color: var(--text); }
.sc-diag p.sc-diag__note { font-size: .7rem; color: var(--muted); }
.sc-pil__name em { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(254,91,14,.16); color: #ff8a4c; font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
@media (max-width: 560px) {
  .sc { padding: 12px; }
  .sc-top { grid-template-columns: minmax(0, 1fr); }
  .sc-title em { display: none; }
  .sc-diag { grid-template-columns: minmax(0, 1fr); }
  .sc-diag__next { border-left: 0; border-top: 1px solid rgba(254,91,14,.2); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-arc, .sc-line, .sc-area, .sc-diag, .sc-pil__bar i { transition: none; }
}

/* ---------- More features ---------- */
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.more-item { display: flex; flex-direction: column; padding: 14px 14px 26px; }
.more-item h3 { margin: 22px 12px 8px; }
.more-item .copy { margin: 0 12px; font-size: .95rem; }
@media (max-width: 1100px) and (min-width: 901px) { .more { grid-template-columns: repeat(2, 1fr); } }
.more-item.highlight { background: var(--grad-soft); border-color: rgba(255,61,50,.3); }

/* E tem mais: cada card com uma mini-tela do recurso */
.mi-vis { position: relative; height: 184px; display: grid; place-items: center; padding: 18px; border-radius: 16px; overflow: hidden; background: radial-gradient(90% 80% at 50% 0%, rgba(255,101,20,.1), transparent 70%), #141117; border: 1px solid var(--line); font-size: .78rem; color: var(--text-2); }
.mi-vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 75%); }
.mi-vis > * { position: relative; z-index: 1; }
.highlight .mi-vis { background: rgba(20,17,23,.6); border-color: rgba(255,61,50,.2); }
.more-item .mi-vis > * { transition: transform .6s var(--ease); }
.more-item:hover .mi-vis > * { transform: translateY(-3px); }

.mi-site { width: 100%; max-width: 280px; border-radius: 10px; overflow: hidden; background: #18161b; border: 1px solid var(--line-strong); box-shadow: 0 16px 30px -18px #000; }
.mi-site__bar { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: #131116; border-bottom: 1px solid var(--line); }
.mi-site__bar img { width: 12px; height: 12px; margin-right: auto; }
.mi-site__bar i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.mi-site__bar em { margin-left: 4px; padding: 3px 7px; border-radius: 5px; background: var(--grad); font-style: normal; font-size: .52rem; font-weight: 700; color: #fff; }
.mi-site__hero { display: grid; gap: 2px; padding: 9px 10px; background: radial-gradient(120% 140% at 0% 0%, rgba(255,101,20,.28), transparent 60%); }
.mi-site__hero b { font-size: .7rem; font-weight: 700; color: #fff; }
.mi-site__hero span { font-size: .56rem; color: rgba(255,255,255,.6); }
.mi-site__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 8px 8px; }
.mi-site__row span { display: grid; gap: 4px; padding: 4px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.mi-site__row img { width: 100%; aspect-ratio: 341 / 168; object-fit: cover; border-radius: 4px; }
.mi-site__row em { font-style: normal; font-size: .56rem; font-weight: 700; color: #ff8a4c; }

.mi-quiz { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.mi-quiz__top { display: flex; align-items: center; justify-content: space-between; }
.mi-quiz__top span { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; color: var(--muted); }
.mi-quiz__bar { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.mi-quiz__bar i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ff7a2e 40%, rgba(255,255,255,.08) 40%); }
.mi-quiz__bar em { font-style: normal; font-size: .62rem; color: var(--muted); }
.mi-quiz small { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ff8a4c; }
.mi-quiz b { font-size: .8rem; font-weight: 600; color: var(--text); }
.mi-quiz ul { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.mi-quiz li { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .74rem; }
.mi-quiz li.is-ok { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); color: #4ade80; }
.mi-quiz li i { font-size: .9rem; }

.mi-cert { position: relative; width: 86%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 14px 18px; border-radius: 10px; background: linear-gradient(160deg, #221d22, #17141a); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 4px #17141a, inset 0 0 0 5px rgba(254,91,14,.35), 0 18px 30px -16px #000; text-align: center; }
.mi-cert small { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mi-cert b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); }
.mi-cert span { height: 4px; width: 70%; border-radius: 3px; background: rgba(255,255,255,.1); }
.mi-cert span + span { width: 50%; }
.mi-cert > i { position: absolute; right: -8px; bottom: -10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1.1rem; box-shadow: 0 8px 18px rgba(255,61,50,.35); }

.mi-hook { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
.mi-hook__ev, .mi-hook__res { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--text); white-space: nowrap; }
.mi-hook__ev i { color: #fe5b0e; font-size: .9rem; }
.mi-hook__line { position: relative; width: 2px; height: 34px; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 2px 100% no-repeat; }
.mi-hook__line i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fe5b0e; box-shadow: 0 0 10px #fe5b0e; animation: miPulse 1.8s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes miPulse { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
.mi-hook__res em { font-style: normal; font-weight: 700; color: #5eb0ff; }
.mi-hook__res b { padding: 2px 6px; border-radius: 5px; background: rgba(34,197,94,.15); color: #4ade80; font-weight: 700; }

.mi-pix { width: 100%; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mi-pix li { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .78rem; font-weight: 500; color: var(--text); }
.mi-pix li > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: .8rem; }
.mi-pix span { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: .68rem; color: #4ade80; }
.mi-pix span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(74,222,128,.15); }

.mi-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 260px; }
.mi-tags span { padding: 5px 10px; text-align: center; white-space: nowrap; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); font-size: .72rem; color: var(--text-2); }
.mi-tags span:nth-child(3n+1) { border-color: rgba(255,101,20,.35); color: #ffb08a; }
@media (prefers-reduced-motion: reduce) { .mi-hook__line i { animation: none; opacity: 0; } }

/* ---------- Integrations ---------- */
.integrations { overflow: hidden; }
.int-rows { display: grid; gap: 14px; margin-top: 8px; }
.int-logo {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 10px 18px 10px 10px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.int-logo img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.multi { margin-top: 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: clamp(28px, 4vw, 48px); }
.multi > * { min-width: 0; }
.multi h3 { margin-bottom: 12px; }
.multi .cta-row { margin-top: 26px; }
.gw-panel { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: rgba(20,17,23,.75); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -30px #000; }
.gateway-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; }
.gw-list { position: relative; z-index: 1; display: grid; gap: 8px; }
.gw-item { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 8px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--text); transition: border-color .4s, background .4s, box-shadow .4s; }
.gw-item img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.gw-ok { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(34,197,94,.14); color: #4ade80; font-size: .66rem; font-weight: 600; opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); white-space: nowrap; }
.gw-item.is-on { background: rgba(254,91,14,.07); border-color: rgba(254,91,14,.4); box-shadow: 0 0 0 3px rgba(254,91,14,.07); }
.gw-item.is-on .gw-ok { opacity: 1; transform: none; }
.gw-hubwrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gw-hubwrap small { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gw-hub { position: relative; width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; background: radial-gradient(90% 90% at 30% 20%, #2a1f22, #141117 70%); border: 1px solid rgba(255,122,46,.45); box-shadow: 0 24px 60px -20px rgba(255,80,20,.45); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.gw-hub img { width: 50px; }
.gw-hub > i { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255,122,46,.6); opacity: 0; }
.gw-hub.is-hit { transform: scale(1.05); box-shadow: 0 24px 70px -14px rgba(255,80,20,.7); }
.gw-hub.is-hit > i { animation: gwRing .9s cubic-bezier(.22,1,.36,1); }
@keyframes gwRing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
.gw-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gw-lines path { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; transition: stroke .3s; }
.gw-lines path.gw-flow { stroke: #ff7a2e; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 22 140; stroke-dashoffset: 22; opacity: 0; filter: drop-shadow(0 0 5px #ff7a2e); }
.gw-lines path.gw-flow.is-on { animation: gwPulse .85s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes gwPulse { 0% { stroke-dashoffset: 22; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.gw-event { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.gw-event.is-new { animation: gwIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes gwIn { from { opacity: 0; transform: translateY(8px); } }
.gw-event__av { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--grad); font-size: .7rem; font-weight: 700; color: #fff; }
.gw-event > div { flex: 1; min-width: 0; }
.gw-event b { display: block; font-size: .84rem; font-weight: 600; color: var(--text); }
.gw-event small { display: block; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-event em { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(34,197,94,.14); color: #4ade80; font-style: normal; font-size: .72rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .gw-lines path.gw-flow { display: none; } .gw-event.is-new { animation: none; } }
@keyframes dash { to { stroke-dashoffset: -20; } }

/* ---------- Support ---------- */

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px 26px 24px; }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.plan-name .save { font-size: .7rem; letter-spacing: .02em; text-transform: none; padding: 5px 10px; border-radius: 99px; background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.price { display: flex; align-items: baseline; gap: 6px; margin: 24px 0 8px; font-family: var(--font-display); }
.price .cur { font-size: 1.1rem; color: var(--muted); font-weight: 500; }
.price .val { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { color: var(--muted); font-size: .95rem; font-family: var(--font-body); }
.price .inst { font-size: 1.25rem; color: var(--text-2); font-weight: 600; margin-right: 2px; }
.plan-sub { color: var(--muted); font-size: .88rem; }
.plan-sub strong { color: var(--text); font-weight: 600; }
.plan-eq { margin: 24px 0; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.plan-eq__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-eq__top span { font-size: .76rem; color: var(--muted); }
.plan-eq__top b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-eq__bar { height: 6px; margin: 10px 0 9px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.plan-eq__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgba(255,255,255,.32); transition: width 1.1s cubic-bezier(.22,1,.36,1) .25s; }
.plan.in .plan-eq__bar i { width: var(--p); }
.plan-eq small { display: block; font-size: .76rem; color: var(--text-2); }
.plan .btn { margin: 0; }
.plan-feat { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-feat__t { margin-bottom: 14px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; margin-bottom: 26px; }
.plan-base li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-size: .84rem; line-height: 1.3; color: var(--text-2); }
.plan-base li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat, rgba(254,91,14,.14); }
.plan-sys { display: grid; }
.plan-sys li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.plan-sys li:first-child { border-top: 0; padding-top: 0; }
.plan-sys span { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: rgba(254,91,14,.1); border: 1px solid rgba(254,91,14,.22); color: #ff7a2e; }
.plan-sys svg { width: 15px; height: 15px; }
.plan-sys span i { font-size: 16px; line-height: 1; }
.plan-sys div { min-width: 0; }
.plan-sys strong { display: block; font-size: .86rem; font-weight: 600; color: var(--text); }
.plan-sys small { display: block; font-size: .76rem; line-height: 1.35; color: var(--muted); }
.plan.featured .plan-sys span { background: var(--grad); border: 0; color: #fff; }
.plan-more { display: none; }
.plan.featured {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,61,50,.22), transparent 60%),
    var(--surface);
  border-color: rgba(255,61,50,.45);
  box-shadow: 0 30px 80px -30px rgba(255,61,50,.5);
}
.plan.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan .ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 7px 16px; border-radius: 99px; background: var(--grad); white-space: nowrap; box-shadow: 0 8px 24px rgba(255,61,50,.4); }
.plan.featured { overflow: visible; }
.plan.featured .price .val { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.featured .plan-eq { background: rgba(254,91,14,.06); border-color: rgba(254,91,14,.22); }
.plan.featured .plan-eq__bar i { background: var(--grad); }
.plan.featured .plan-eq small { color: #4ade80; }
@media (min-width: 1025px) { .plan.featured { margin: -14px 0; padding-top: 44px; padding-bottom: 38px; } }

@media (prefers-reduced-motion: reduce) { .plan-eq__bar i { transition: none; } }

/* ---------- Founder CTA ---------- */
.founder {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 3.5vw, 40px); align-items: center;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
  background: radial-gradient(60% 140% at 0% 50%, rgba(255,61,50,.18), transparent 60%), radial-gradient(50% 120% at 100% 50%, rgba(236,30,90,.08), transparent 60%), var(--card);
}
.founder::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(110deg, rgba(255,122,46,.55), rgba(255,255,255,.06) 35%, rgba(255,255,255,.06) 70%, rgba(236,30,90,.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fd-av { position: relative; width: 112px; height: 112px; border-radius: 50%; padding: 3px; background: var(--grad); box-shadow: 0 24px 50px -20px rgba(255,61,50,.6); }
.fd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #141117; border: 3px solid #141117; }
.fd-av.is-logo img { padding: 24px; object-fit: contain; }
.fd-av.is-logo .seal { display: none; }
.fd-av .seal { position: absolute; right: -10px; bottom: -6px; width: 48px; height: 48px; }
.fd-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; margin-bottom: 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .74rem; font-weight: 600; color: var(--text-2); }
.fd-tag i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: fdLive 2s infinite; }
@keyframes fdLive { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } }
.founder h2 { margin-bottom: 8px; text-wrap: balance; }
.founder .copy { max-width: 62ch; text-wrap: balance; }
@media (max-width: 640px) { .fd-br { display: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fd-tag i { animation: none; } }

/* ---------- Testimonials ---------- */
/* Depoimentos: vídeos à esquerda, textos rolando à direita */
/* vídeos: carrossel de ponta a ponta, alinhado à grade no início */
.vrail { --pad: max(var(--gutter), calc((100vw - var(--container)) / 2)); --w: clamp(220px, 21vw, 290px); position: relative; margin-top: 8px; }
.vrail-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 12px var(--pad) 28px; scrollbar-width: none; overscroll-behavior-x: contain; }
.vrail-track::-webkit-scrollbar { display: none; }
.vcard { position: relative; flex: 0 0 var(--w); display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; transition: transform .5s var(--ease); }
.vmedia { position: relative; aspect-ratio: 640 / 847; }
.vcap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 6px; color: #fff; }
.vcap strong { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.vcap small { font-size: .85rem; font-weight: 400; color: rgba(255,255,255,.75); }
.vtag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(20,17,23,.32); border: 1px solid rgba(255,255,255,.28); font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.vtag i { font-size: .9rem; line-height: 1; }
.vcard:last-child { scroll-snap-align: end; }
.vcard:hover { transform: translateY(-6px); }
.vmedia iframe { position: absolute; inset: 3.2% 0 0; width: 100%; height: 100%; border: 0; border-radius: 20px; background: #000; box-shadow: 0 30px 60px -30px rgba(90,0,30,.7); }
.vtesti { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; text-align: left; filter: drop-shadow(0 26px 30px rgba(90,0,30,.45)); }
.vtesti img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.vtesti:hover img { transform: scale(1.02); }
.vt-play { position: absolute; z-index: 1; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,17,23,.55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; transition: transform .4s var(--ease), background .3s, border-color .3s; }
.vt-play svg { width: 22px; height: 22px; margin-left: 3px; }
.vtesti:hover .vt-play { background: var(--grad); border-color: transparent; transform: translate(-50%, -50%) scale(1.08); }

.vrail-ctrl { display: flex; align-items: center; gap: 24px; }
.vrail-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.vrail-bar i { display: block; height: 100%; width: var(--vw, 30%); margin-left: var(--vx, 0%); border-radius: inherit; background: #fff; transition: margin-left .25s linear, width .25s; }
.vrail-nav { display: flex; gap: 10px; }
.vr-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #141117; color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(90,0,30,.6); transition: transform .3s var(--ease), opacity .3s; }
.vr-btn svg { width: 20px; height: 20px; }
.vr-btn:hover { transform: scale(1.08); }
.vr-btn:disabled { opacity: .35; cursor: default; transform: none; }

/* textos: faixa horizontal contínua */
.reviews-grid { margin-top: 56px; columns: 3 300px; column-gap: 16px; }
.reviews-grid .testi { break-inside: avoid; margin: 0 0 16px; }
.testi-tag { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 99px; background: rgba(224,17,95,.08); color: #e0115f; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.testi mark { background: linear-gradient(transparent 58%, rgba(255,120,40,.28) 58%); color: inherit; font-weight: 600; padding: 0 1px; }
.testi { display: flex; flex-direction: column; margin: 0; padding: 26px 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.testi .quote-mark { display: none; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-author img, .testi-author .initials { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex-shrink: 0; border: 2px solid rgba(255,255,255,.08); }
.testi-author .initials { display: grid; place-items: center; background: var(--grad); font-weight: 700; font-size: .85rem; }
.testi-author strong { display: block; font-size: .98rem; line-height: 1.25; }
.testi-author small { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; line-height: 1.3; }
.testi-author .stars { margin-left: auto; }
.testi blockquote { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-2); }
.testi blockquote p + p { margin-top: 10px; }
.testi figcaption { order: -1; margin-bottom: 16px; }
.stars { margin-left: auto; color: var(--amber); letter-spacing: 2px; font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq-wrap .section-head { position: sticky; top: 120px; margin-bottom: 0; }
.faq-main { min-width: 0; }
.faq-list { display: grid; gap: 10px; }
.faq-item { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--card); transition: border-color .3s, background .3s; }
.faq-group { margin: 18px 0 2px 4px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.faq-group:first-child { margin-top: 0; }
.faq-item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); transform: scaleY(0); transition: transform .4s var(--ease); }
.faq-item.open { border-color: rgba(254,91,14,.3); background: var(--card-hover); }
.faq-item.open::before { transform: scaleY(1); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 22px 21px 24px; text-align: left; font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; transition: color .3s; }
.faq-q:hover { color: #fff; }
.faq-q .pm { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,.06); transition: background .3s, transform .4s var(--ease); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.faq-q .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.faq-item.open .pm { background: var(--grad); transform: rotate(180deg); }
.faq-item.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a .copy { padding: 0 24px 22px; font-size: .95rem; }
.faq-a .copy strong { color: var(--text); font-weight: 600; }
.faq-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.faq-logos img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.faq-logos span { margin-left: 4px; font-size: .78rem; color: var(--muted); }
@media (max-width: 640px) {
  .faq-q { font-size: .98rem; padding: 18px 18px 18px 20px; }
  .faq-a .copy { padding: 0 20px 20px; }
}

/* ---------- Final CTA ---------- */
.final { padding: clamp(56px, 7vw, 96px) 0; }
.final-box {
  position: relative; overflow: hidden;
  border-radius: 36px;
  padding: clamp(48px, 8vw, 100px) clamp(24px, 5vw, 64px);
  text-align: center;
  background: var(--surface);
  border: 1px solid rgba(255,61,50,.3);
}
.final-box::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 760px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,110,40,.22), rgba(255,110,40,.06) 60%, transparent);
  filter: blur(20px); pointer-events: none;
}
.final-box > * { position: relative; }
.final-box .h2 { max-width: none; margin: 0 auto; font-size: clamp(1.9rem, 3.9vw, 3.125rem); line-height: 1.1; text-wrap: balance; }
.final-box .lead { max-width: 640px; margin: 22px auto 36px; }
.final-box .seal-big { display: block; width: 120px; height: 120px; margin: 0 auto 28px; }
.final-box { padding-bottom: clamp(44px, 6vw, 72px); border-color: var(--line-strong); }
.final-box .lead { margin-bottom: 32px; }
.final-cta { justify-content: center; align-items: center; gap: 12px 22px; }
.final-talk { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); font-size: .95rem; font-weight: 600; color: var(--text); transition: border-color .3s, background .3s; }
.final-talk i { font-size: 1.15rem; color: #4ade80; }
.final-talk:hover { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.06); }
.final-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px; }
.final-trust li { display: flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--text-2); }
.final-trust i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(254,91,14,.14); color: #ff7a2e; font-size: .74rem; }
@media (max-width: 640px) {
  .final-cta { flex-direction: column; }
  .final-cta .btn, .final-talk { width: 100%; justify-content: center; }
  .final-trust { flex-direction: column; align-items: center; gap: 10px; }
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 72px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.footer-brand img { height: 36px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--muted); font-size: .9rem; max-width: 280px; }
.footer-tag { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-contact { display: inline-flex; align-items: center; gap: 8px; }
.footer-contact i { font-size: 1rem; color: #ff7a2e; }
.socials { display: flex; gap: 8px; margin-top: 22px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: background .3s, border-color .3s; }
.socials a:hover { background: var(--orange); border-color: transparent; }
.socials svg { width: 16px; height: 16px; }
.footer h4, .footer-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-bottom: 16px; font-weight: 600; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { color: var(--muted); font-size: .9rem; transition: color .2s; }
.footer ul a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: .82rem; }
.footer-word { margin-top: 48px; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 15vw, 13rem); letter-spacing: -.05em; line-height: .92; padding-bottom: .04em; text-align: center; background: linear-gradient(to bottom, rgba(255,255,255,.11), rgba(255,255,255,.025)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; box-shadow: 0 10px 30px -6px rgba(37,211,102,.6); transition: transform .3s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
/* Hero: anima só com CSS, sem esperar o JS. Título, texto e painel não somem (opacidade 1), para o LCP pintar já no primeiro frame */
.hero .reveal { opacity: 1; transform: none; transition: none; animation: heroIn .55s var(--ease) var(--d, 0s) both; }
.hero h1.reveal, .hero .lead.reveal, .hero-panel.reveal { animation-name: heroRise; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes heroRise { from { transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-panel .browser, .hero-phone { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .experts { --h: clamp(260px, 42vw, 400px); --card-w: clamp(170px, 23vw, 230px); --gap: 16px; --persp: 720px; }
  .video-frame { border-radius: 22px; }
}
@media (max-width: 640px) {
  .experts { --h: 300px; --card-w: 190px; --gap: 12px; --persp: 640px; padding-top: 72px; }
  .video-frame { margin-top: calc(var(--h) * -.34); }
  .er-card-inner { border-radius: 12px; }
    .video-frame { border-radius: 18px; }
  .vp-play { width: 68px; height: 68px; }
  .vp-play svg { width: 26px; height: 26px; }
  .vp-selo { width: 40px; height: 40px; top: 16px; left: 16px; }
  .vp-label { font-size: .875rem; bottom: 16px; }
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .segments { grid-template-columns: repeat(3, 1fr); }
  .hero-split { grid-template-columns: 1fr; }
  .hero-text { padding: 0; max-width: 680px; }
  .hero-panel { height: 580px; }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .split, .community, .faq-wrap, .ai-grid, .ai-analytics, .multi { grid-template-columns: 1fr; }
  .split.flip .split-media { order: 0; }
  .faq-wrap .section-head { position: static; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tools, .more, .plans { grid-template-columns: 1fr; }
  .plans { max-width: 480px; margin: 0 auto; }
  .plan.featured { order: -1; }
  .plan:not(.featured) .plan-feat { max-height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .plan.is-open .plan-feat { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .plan:not(.featured) .plan-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
  .plan.is-open .plan-more i { transform: rotate(180deg); }
  .founder { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .campus { grid-template-columns: 1fr; min-height: 0; }
  .campus-side { display: none; }
  .covers { grid-template-columns: repeat(3, 1fr); }
  .covers .cover:nth-child(n+4) { display: none; }
  .media-frame { min-height: 0; }
}

@media (max-width: 640px) {
  .testi { padding: 22px; }
  .vrail { --w: 62vw; }
  .vr-btn { width: 40px; height: 40px; }
  .reviews-grid { columns: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 36px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid { align-items: flex-start; }
  .reviews-grid .testi { flex: 0 0 84%; margin: 0; scroll-snap-align: start; }
  .reviews-grid.reveal { opacity: 1; transform: none; }
  :root { --gutter: 16px; }
  .header { --bar-h: 64px; }
  .nav { height: 72px; }
  .nav-bg { box-shadow: 0 1px 0 var(--line); }
  .nav-logo img { height: 32px; }
  .nav-actions .btn { display: none; }
  .hero { padding-top: 112px; }
  .hero .cta-row .btn { width: 100%; }
  .hero-proof { gap: 12px; font-size: .82rem; }
  .hero-panel { --notch: 92px; --r: 22px; height: 470px; border-radius: 24px; }
  .hero-panel .browser { left: 20px; top: 92px; width: 600px; padding: 6px; border-radius: 14px; }
  .browser-bar { padding: 2px 4px 8px; }
  .url { margin-left: 10px; }
  .phone.hero-phone { width: 150px; right: 14px; bottom: 16px; padding: 7px; border-radius: 32px; }
  .hero-phone .phone-screen { border-radius: 26px; }
  .hero-phone .phone-screen { padding-top: 32px; }
  .campus-main { padding: 12px; }
  .campus-search, .campus-user .coin { display: none; }
  .campus-banner { height: 150px; padding: 16px; }
  .campus-banner h4 { font-size: 1.15rem; }
  .campus-banner .ring-x { display: none; }
  .covers { gap: 8px; }
  .segments { grid-template-columns: 1fr 1fr; }
  .segment { min-height: 150px; gap: 24px; padding: 20px 18px; }
  .segment:last-child { grid-column: span 2; }
  .custom-mock { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: span 2; }
  .bento { grid-template-columns: 1fr; }
  .comm-features { grid-template-columns: 1fr; }
  .gateway-diagram { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
  .gw-hub { width: 76px; height: 76px; border-radius: 22px; }
  .gw-hub img { width: 36px; }
  .gw-hubwrap small { display: none; }
  .gw-ok { display: none; }
  .gw-panel { padding: 12px; }
  .gw-event { flex-wrap: wrap; }
  .gw-event > div { flex: 1 1 calc(100% - 46px); }
  .gw-event em { margin-left: 46px; }
  .note { flex-direction: column; text-align: center; }
  .phone { width: 240px; }
  .homescreen-tip { right: 0; bottom: 40px; width: 180px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .stars { display: none; }
  .btn { --h: 58px; --panel: 52px; --logo: 21px; --fs: clamp(.78rem, 3.5vw, .95rem); --pad: 12px; max-width: 100%; }
  .btn-action { gap: 7px; }
  .btn-sm { --h: 48px; --panel: 44px; }
  .cta-row .btn { flex: 1 1 auto; }
  .countdown { margin-left: 0; }
}

/* =========================================================
   Camada de marca — linguagem dos posts e criativos
   ========================================================= */

/* Títulos mais pesados e apertados, como nas peças */
.display { font-weight: 700; letter-spacing: -0.05em; line-height: .98; }
.h2 { font-size: clamp(2.1rem, 4.8vw, 3.75rem); }
/* Hero usa o mesmo título das seções (.display .h2): um tamanho só na página */
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.75rem); }

/* Começo "apagado" que acende até a parte em cor */
.dim {
  background: linear-gradient(100deg, rgba(255,255,255,.2), rgba(255,255,255,.62) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Marca-texto atrás das palavras (preenche ao entrar na tela) */
mark.hl {
  color: #fff; padding: 0 .1em; border-radius: .06em;
  background: var(--grad) no-repeat 0 62% / 0% 78%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s var(--ease) .35s, color .4s .55s;
}
.in mark.hl { background-size: 100% 78%; color: #120c10; }

/* Letra manuscrita */
.hand {
  display: inline-block; font-family: "Permanent Marker", cursive; font-weight: 400;
  letter-spacing: 0; text-transform: uppercase; font-size: .92em; line-height: 1;
  transform: rotate(-3deg); padding: .08em .05em 0;
  background: linear-gradient(100deg, #ff6514, #ff126a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Granulado sutil no fundo (sem overlay fixo, para não forçar repintura no scroll) */
body {
  background-color: var(--bg);
  background-image: url("../img/noise.webp?v=5");
}

/* Anéis concêntricos de fundo */
.rings {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 89px, rgba(255,120,60,.16) 90px, transparent 91px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 68%);
}

/* ---------- Depoimentos em cor chapada (rosa → laranja) ---------- */
.section-pop {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0;
  background: linear-gradient(180deg, #ee1478 0%, #ff3358 48%, #ff5a2a 100%);
}
.section-pop::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -18%; width: min(1200px, 120%); height: 60%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,226,196,.85), rgba(255,180,140,.35) 60%, transparent);
  filter: blur(20px);
}
.section-pop .rings { z-index: -1; background: repeating-radial-gradient(circle at 50% 60%, transparent 0 109px, rgba(255,255,255,.12) 110px, transparent 111px); }
.section-pop .container { position: relative; }
.watermark {
  position: absolute; z-index: -1; left: 50%; top: 56%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.07em; line-height: .8;
  font-size: clamp(8rem, 28vw, 26rem); color: rgba(255,255,255,.07); white-space: nowrap; pointer-events: none;
}
.section-pop .eyebrow { color: #fff; }
.section-pop .eyebrow { background: rgba(20,17,23,.28); border-color: rgba(255,255,255,.28); }
.section-pop .eyebrow::before { background-color: #141117; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 299 329'%3E%3Cpath fill='%23ff6514' fill-rule='evenodd' d='M189.174 0C249.432 0 298.119 49.12 298.12 109.521V125.233H221.298C247.331 148.873 263.682 183.061 263.682 221.083V328.584H217.562C102.487 328.584 8.409 238.767 .569 125.166H0V108.817L.073 108.313C1.407 51.892 40.221 3.107 92.604.092L92.995.067 189.174 0ZM34.548 125.802C42.637 220.328 121.714 294.684 217.562 294.684H229.828V219.293C228.875 167.509 186.709 125.803 135.215 125.802H34.548ZM108.123 33.957V62.481C108.123 78.45 121.044 91.333 136.727 91.333H262.062C253.948 58.353 224.282 33.901 189.174 33.9L108.123 33.957ZM73.368 39.698C55.597 48.641 41.261 67.279 36.009 91.287H80.886C76.141 82.258 73.368 72.143 73.368 61.459V39.698Z'/%3E%3C/svg%3E"); box-shadow: none; }
.section-pop .h2 { color: #fff; }
.section-pop .grad-text { background: linear-gradient(100deg, #ffe3c9, #ffc29a); -webkit-background-clip: text; background-clip: text; }
.section-pop .testi { background: rgba(255,255,255,.94); border: 0; box-shadow: 0 18px 40px -22px rgba(90,0,30,.55); }
.section-pop .testi blockquote { color: #3a3438; }
.section-pop .testi-author strong { color: #e0115f; }
.section-pop .testi-author small { color: #8a8287; }
.section-pop .btn { --fill: #fff; --text-c: #111; --hover-text: #111; --logo-filter: none; background: #141117; }

/* ---------- Integrações: hub escuro no centro, pílulas entram e saem dele ---------- */
.int-rows { position: relative; padding: 40px 0; }
.int-rows .marquee { position: relative; z-index: 1; --hole: 120px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 calc(50% - var(--hole) - 70px), transparent calc(50% - var(--hole)), transparent calc(50% + var(--hole)), #000 calc(50% + var(--hole) + 70px), #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 calc(50% - var(--hole) - 70px), transparent calc(50% - var(--hole)), transparent calc(50% + var(--hole)), #000 calc(50% + var(--hole) + 70px), #000 92%, transparent); }
.int-rows::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 320px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,91,14,.16), transparent); pointer-events: none; }
.int-hub { position: absolute; z-index: 2; left: 50%; top: 50%; width: 148px; height: 148px; transform: translate(-50%, -50%); pointer-events: none; }
.int-hub span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 40px; padding: 1.5px; background: linear-gradient(150deg, rgba(255,122,46,.9), rgba(255,18,106,.5) 45%, rgba(255,255,255,.08) 75%); box-shadow: 0 30px 70px -20px rgba(255,80,20,.45), 0 0 0 8px rgba(255,101,20,.05); }
.int-hub span::before { content: ""; position: absolute; inset: 1.5px; border-radius: 39px; background: radial-gradient(90% 90% at 30% 20%, #2a1f22, #141117 70%); }
.int-hub img { position: relative; width: 64px; height: auto; filter: drop-shadow(0 6px 18px rgba(255,90,20,.35)); }
.int-hub > i { position: absolute; inset: 0; border-radius: 40px; border: 1px solid rgba(255,122,46,.35); animation: intPulse 3.2s cubic-bezier(.22,1,.36,1) infinite; }
.int-hub > i + i { animation-delay: 1.6s; }
@keyframes intPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.int-cats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 8px auto 18px; }
.int-ask { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 7px; margin: 0 auto 56px; font-size: .92rem; color: var(--muted); text-align: center; }
.int-ask i { font-size: 1rem; color: #ff7a2e; }
.int-ask b { font-weight: 600; color: var(--text); }
.int-cats b { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 6px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); }
.int-cats em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.35rem; font-weight: 700; }
.int-cats span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: .82rem; color: var(--text-2); }
.int-cats span i { color: #ff7a2e; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .int-hub > i { animation: none; opacity: 0; } }

/* ---------- CTA final + assinatura ---------- */
.final-box .rings { z-index: 0; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 89px, rgba(255,120,60,.14) 90px, transparent 91px); -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 100%, #000 20%, transparent 70%); }

@media (max-width: 900px) {
  .int-hub { transform: translate(-50%, -50%) scale(.8); }
  .int-rows .marquee { --hole: 90px; }
}
@media (max-width: 640px) {
  .int-hub { transform: translate(-50%, -50%) scale(.62); }
  .int-rows .marquee { --hole: 60px; }
  .int-cats b { width: 100%; justify-content: center; margin: 0 0 4px; }
  .watermark { top: 40%; }
    }
@media (prefers-reduced-motion: reduce) {
  mark.hl { background-size: 100% 78%; color: #120c10; }
}

/* ---------- Luz contornando os botões ----------
   Desenhada na própria borda (border-box), que o navegador suaviza nas curvas. */
@property --btn-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn {
  --btn-surface: #0f0d12;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--btn-surface), var(--btn-surface)) padding-box,
    conic-gradient(from var(--btn-angle),
      rgba(255,255,255,.06) 0deg, rgba(255,255,255,.06) 250deg,
      rgba(255,18,106,.55) 290deg, #ff3d32 320deg, #ff6514 342deg, rgba(255,255,255,.06) 360deg) border-box;
  animation: btn-orbit 3.6s linear infinite;
}
.btn:hover { animation-duration: 1.8s; }
.section-pop .btn { --btn-surface: #141117; background: linear-gradient(var(--btn-surface), var(--btn-surface)) padding-box, conic-gradient(from var(--btn-angle), rgba(255,255,255,.08) 0deg, rgba(255,255,255,.08) 250deg, rgba(255,255,255,.5) 300deg, #fff 335deg, rgba(255,255,255,.08) 360deg) border-box; }
@keyframes btn-orbit { to { --btn-angle: 360deg; } }

/* ---------- Hero: campus real da plataforma (recriado a partir dos prints) ---------- */
.app {
  --p-bg: #18161b; --p-top: #131116; --p-card: #1f2225; --p-btn: #202327; --p-orange: #fe5b0e;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); height: 560px; overflow: hidden;
  border-radius: 10px; background: var(--p-bg); font-family: "Geist", var(--font-body); color: #e9e7ea;
}
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0; background: var(--p-bg); border-right: 1px solid rgba(255,255,255,.05); }
.app-logo { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: #0e0c10; border: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.app-rail span { position: relative; display: grid; place-items: center; width: 28px; height: 20px; border-radius: 4.5px; font-size: 13px; line-height: 1; color: #c9c6ce; }
/* campus-ui.css: página atual com fundo suave + barra lateral */
.app-rail span.on { color: var(--p-orange); background: color-mix(in srgb, var(--p-orange) 14%, transparent); }
.app-rail span.on::before { content: ""; position: absolute; left: -7px; top: 50%; width: 1.5px; height: 9px; border-radius: 0 1.5px 1.5px 0; background: var(--p-orange); transform: translateY(-50%); }

.app-main { min-width: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 34px; padding: 0 12px; background: var(--p-top); }
.app-search { display: flex; align-items: center; gap: 6px; width: 46%; height: 18px; padding: 0 8px; border-radius: 5px; background: #1c1d21; border: 1px solid rgba(255,255,255,.08); font-size: 6.5px; color: #8d8a93; }
.app-search i { font-size: 8px; }
.app-actions { display: flex; align-items: center; gap: 9px; }
.app-link { display: flex; align-items: center; gap: 3px; font-size: 6.5px; color: #a7a4ad; }
.app-link i { font-size: 9px; color: #c9c6ce; }
.app-bell { font-size: 10px; color: #c9c6ce; }
.app-avatar { width: 26px; height: 26px; margin-right: -4px; }
.app-hello { display: grid; gap: 2px; line-height: 1; }
.app-hello b { font-size: 6.5px; font-weight: 600; color: #fff; }
.app-xp { justify-self: start; display: inline-flex; align-items: center; gap: 2.5px; padding: 1.5px 4px; border-radius: 99px; line-height: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--p-orange) 14%, rgba(19,17,22,.92)), rgba(19,17,22,.92)); border: .5px solid color-mix(in srgb, var(--p-orange) 32%, transparent); }
.app-xp img { width: 6px; height: 6px; object-fit: contain; }
.app-xp em { font-style: normal; font-size: 5.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--p-orange); margin-right: -1px; }
.app-xp small { font-size: 4.3px; font-weight: 700; letter-spacing: .06em; color: color-mix(in srgb, var(--p-orange) 72%, rgba(255,255,255,.5)); }
.app-banner { width: 100%; aspect-ratio: 1488 / 311; object-fit: cover; }
.app-label { display: flex; align-items: center; gap: 8px; margin: 18px 22px 10px; }
/* campus-ui.css: título de seção sem a pílula, linha com opacidade .7 e setas do carrossel */
.app-label span { order: 0; font-size: 9px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #e6e7e8; white-space: nowrap; }
.app-label::after { content: ""; order: 1; flex: 1; height: 1px; background: #2a2d31; opacity: .7; }
.app-nav { order: 2; display: flex; gap: 4px; }
.app-nav i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: #191b1e; border: 1px solid #2a2d31; font-size: 11px; color: #cbcccd; }
.app-cat { margin: 14px 22px 0; }
.app-cat span { display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px; border-radius: 4.5px; background: #191b1e; border: 1px solid #2a2d31; font-size: 6.3px; font-weight: 600; line-height: 1; color: #e6e7e8; }
.app-cat i { font-size: 7.5px; }
.app-cat i:last-child { margin-right: -2px; color: #868e96; }
.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 0 22px; }
.ac-card { display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; border-radius: 7px; overflow: hidden; background: var(--p-card); border: 1px solid rgba(255,255,255,.04); text-align: center; }
.ac-card img { width: 100%; aspect-ratio: 341 / 168; object-fit: cover; }
.ac-prog { display: flex; align-items: center; gap: 5px; width: 100%; padding: 4px 7px; background: #141517; font-size: 4.5px; color: #8e8b93; }
.ac-prog > i { position: relative; flex: 1; height: 1.5px; border-radius: 2px; background: rgba(255,255,255,.08); }
.ac-prog > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 0; border-radius: inherit; background: var(--p-orange); }
.ac-prog .cert { padding: 1.5px 4px; border-radius: 2px; background: #22d3ee; color: #08323b; font-weight: 600; }
.ac-card strong { margin-top: 8px; padding: 0 6px; font-size: 7px; font-weight: 600; color: #e6e7e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ac-card small { margin-top: 4px; padding: 0 6px; font-size: 5px; color: #8e8b93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ac-btn { margin-top: 8px; width: 80%; padding: 5px 0; border-radius: 4px; background: var(--p-btn); border: 1px solid rgba(255,255,255,.08); font-size: 5.5px; font-weight: 700; letter-spacing: .02em; color: #e9e7ea; }
.ac-card em { margin-top: 5px; font-style: normal; font-size: 4.5px; color: #55525a; }

/* celular: home do aluno (print do app) */
.app-phone { display: flex; flex-direction: column; padding: 30px 0 0; background: #18161b; font-family: "Geist", var(--font-body); }
.ap-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 6px; background: #131116; }
.ap-logo { height: 18px; width: auto; }
.ap-acts { display: flex; align-items: center; gap: 7px; color: #c9c6ce; }
.ap-acts > i { font-size: 10px; }
.ap-acts span { display: flex; align-items: center; gap: 2px; font-size: 6px; color: #a7a4ad; }
.ap-acts span i { font-size: 9px; }
.ap-acts img { width: 24px; height: 24px; }
.ap-banner { width: 100%; height: 46px; object-fit: cover; }
.app-phone .app-label { margin: 10px 12px 8px; }
.app-phone .app-cat { margin: 10px 12px 0; }
.ap-card { margin: 0 10px 8px; flex-shrink: 0; }
.ap-card strong { font-size: 7.5px; }
.ap-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 4px 12px; background: #131116; border-top: 1px solid rgba(255,255,255,.06); }
.ap-nav span { display: grid; justify-items: center; gap: 3px; font-size: 5.5px; color: #a7a4ad; }
.ap-nav i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-style: normal; color: #c9c6ce; }
.ap-nav .on { color: #ff6a2a; }
.ap-nav .on i { background: #fe5b0e; color: #18161b; }

.ac-btn i, .ac-prog .cert i { font-size: 1.15em; vertical-align: -.15em; }

/* ---------- Selo moderno ---------- */
.seal-x { display: block; }
.seal-x svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 24px rgba(255,61,50,.28)); }
.seal-x .seal-ring { transform-box: view-box; transform-origin: center; animation: spin 24s linear infinite; }

/* ---------- Hero: painel sangrando até a borda direita ---------- */
.hero-panel {
  /* sangra até a borda; em telas ultrawide para em 360px (o mesmo de 1920) para o celular não se afastar do navegador */
  margin-right: calc(-1 * min(360px, max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2) + var(--gutter)));
  border-radius: 32px 0 0 32px;
}
.hero-panel .browser { width: 800px; }
.phone.hero-phone { right: 44px; }

/* recortes da plataforma flutuando */
.pf {
  position: absolute; z-index: 4; font-family: var(--font-body);
  border-radius: 12px; background: #1b1c20; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.75);
  animation: floaty 6s ease-in-out infinite;
}
.pf-continue { left: 24px; bottom: 34px; width: 214px; padding: 12px; display: grid; gap: 7px; }
.pf-continue small { font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: #ff6a2a; }
.pf-continue small i { vertical-align: -.1em; }
.pf-continue b { font-size: .74rem; font-weight: 600; line-height: 1.35; color: #e9e7ea; }
.pf-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; border-radius: 7px; background: #fe5b0e; font-size: .72rem; font-weight: 700; color: #18161b; }
.pf-bar { display: flex; align-items: center; gap: 8px; }
.pf-bar i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); }
.pf-bar em { font-style: normal; font-size: .58rem; color: #8e8b93; }
.pf-course { right: 24px; top: 26px; width: 300px; padding: 10px; display: flex; gap: 10px; align-items: center; animation-delay: -3s; }
.pf-course img { width: 84px; border-radius: 6px; }
.pf-info { flex: 1; min-width: 0; }
.pf-info b { display: block; font-size: .74rem; font-weight: 600; color: #ff6a2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-info small { font-size: .62rem; color: #8d8a93; }
.pf-prog { display: flex; justify-content: space-between; margin-top: 6px; font-size: .6rem; color: #8d8a93; }
.pf-prog em { font-style: normal; color: #ff6a2a; }
.pf-prog i { color: #ff5d0d; vertical-align: -.12em; }
.pf-line { height: 2px; margin-top: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.pf-line i { display: block; width: 15%; height: 100%; border-radius: inherit; background: #ff5d0d; }

@media (max-width: 640px) {
  .hero-panel { border-radius: 24px 0 0 24px; }
  .hero-panel .browser { width: 600px; }
  .phone.hero-phone { right: 18px; }
  .pf-continue { left: 12px; bottom: 16px; width: 156px; padding: 9px; gap: 5px; }
  .pf-continue b { font-size: .64rem; }
  .pf-btn { padding: 6px 0; font-size: .62rem; }
  .pf-course { display: none; }
}
@media (prefers-reduced-motion: reduce) { .seal-x .seal-ring { animation: none; } }

/* celular do hero: tela começa no topo (status bar na cor do header, sem faixa preta) */
.hero-phone .app-phone { padding: 0; }
.hero-phone .app-phone::before { z-index: 3; top: 8px; width: 64px; height: 18px; }
.ap-status { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 4px 18px 0 22px; background: #141117; color: #fff; }
.ap-status b { font-size: 8px; font-weight: 600; }
.ap-status span { display: flex; gap: 3px; font-size: 8px; }
.ap-top { padding-top: 2px; }
/* a tela é flex em coluna: sem isto a status bar encolhia e o header subia por baixo da ilha */
.ap-status, .ap-top { flex-shrink: 0; }
.ap-nav { padding-bottom: 16px; }
.ap-nav::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 64px; height: 3px; border-radius: 3px; transform: translateX(-50%); background: rgba(255,255,255,.55); }
.hero-panel .browser { top: 160px; }
@media (max-width: 640px) {
  .hero-panel .browser { top: 118px; }
  .ap-status { height: 24px; padding: 3px 12px 0 14px; }
  .hero-phone .app-phone::before { top: 6px; width: 48px; height: 14px; }
}

/* Recorte vazado de verdade: o painel é recortado (clip-path via JS), sem placa de fundo */
.hero-panel { --notch: 138px; --r: 28px; border-radius: 0; }
.panel-notch { top: 0; left: 0; width: calc(var(--notch) - 14px); height: calc(var(--notch) - 14px); }
@media (max-width: 640px) { .hero-panel { --notch: 100px; --r: 22px; } }

/* selo fora do recorte do painel */
.hero-visual { position: relative; min-width: 0; }
.hero-visual .panel-notch { position: absolute; top: 0; left: 0; z-index: 6; width: 124px; height: 124px; }
@media (max-width: 640px) { .hero-visual .panel-notch { width: 86px; height: 86px; } }

/* celular do hero mais moderno: borda fina, cantos menos arredondados, moldura metálica */
.phone.hero-phone {
  padding: 5px; border-radius: 30px;
  background: linear-gradient(145deg, #4a4850 0%, #1d1c21 30%, #121115 70%, #3a3940 100%);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(0,0,0,.6);
}
.phone.hero-phone::before, .phone.hero-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2c2b31; }
.phone.hero-phone::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 34px 0 #2c2b31; }
.phone.hero-phone::after { right: -2px; top: 28%; height: 13%; }
.hero-phone .phone-screen { border-radius: 25px; }
@media (max-width: 640px) {
  .phone.hero-phone { padding: 4px; border-radius: 22px; }
  .hero-phone .phone-screen { border-radius: 18px; }
}
.hero-visual .panel-notch { transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s; }
.hero-visual:has(.hero-panel:not(.in)) .panel-notch { opacity: 0; transform: scale(.85); }

/* Badge do hero: "Sem limites" com os itens ilimitados girando */
.badge b { display: inline-flex; align-items: center; gap: 4px; }
.badge b i { font-size: 1.05em; font-weight: 400; }
.badge em { font-style: normal; color: var(--text-2); }
.ticker { position: relative; display: inline-block; height: 1.35em; overflow: hidden; vertical-align: bottom; color: #fff; font-weight: 600; }
.ticker span { display: block; height: 1.35em; line-height: 1.35em; animation: ticker 6.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes ticker {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-100%); }
  50%, 70% { transform: translateY(-200%); }
  75%, 95% { transform: translateY(-300%); }
  100% { transform: translateY(-400%); }
}


/* Topo do mockup alinhado com a tag de limites */
@media (min-width: 1101px) {
  .hero-split { align-items: start; }
  .hero-visual { margin-top: var(--hero-text-pt, 24px); }
}

/* Hero cabe na primeira dobra: painel acompanha a altura do texto (topo = tag, base = rostos) */
@media (min-width: 1101px) {
  .hero { padding-top: 112px; }
  .hero-split { align-items: stretch; }
  .hero-visual { display: flex; flex-direction: column; margin: 24px 0; }
  .hero-panel { flex: 1; height: auto; min-height: 500px; }
}
@media (min-width: 1101px) {
  .hero-panel { container-type: size; }
  .phone.hero-phone { width: min(210px, (100cqh - 150px) * 9 / 19); bottom: 24px; }
}

/* ---------- Faixas cruzadas entre o hero e a segunda dobra ---------- */
.xbands { position: relative; z-index: 1; height: 160px; overflow-x: clip; overflow-y: visible; margin: -24px 0 -12px; }
.xband {
  position: absolute; left: -5%; width: 110%; top: 50%;
  padding: 13px 0; overflow: hidden;
}
.xband.front { z-index: 2; transform: translateY(-50%) rotate(-3deg); background: linear-gradient(90deg, #ff5d0d, #ff6514 40%, #ff3d32); box-shadow: 0 18px 60px -14px rgba(255,90,20,.45); }
.xband.back { z-index: 1; transform: translateY(-50%) rotate(2.4deg); background: #0f0d12; border-block: 1px solid rgba(255,255,255,.06); }
.xb-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: xb-left 48s linear infinite; }
.xband.back .xb-track { animation-name: xb-right; animation-duration: 56s; }
.xb-track span { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; line-height: 1; }
.xband.front span { font-size: clamp(1rem, 1.5vw, 1.3rem); color: #fff; }
.xband.back span { font-size: clamp(.9rem, 1.2vw, 1.05rem); color: rgba(255,255,255,.55); }
.xb-sep { width: 16px; height: 18px; flex-shrink: 0; }
.xband.front .xb-sep { filter: brightness(0) invert(1); opacity: .9; }
.xband.back .xb-sep { opacity: .8; }
.xbands:hover .xb-track { animation-play-state: paused; }
@keyframes xb-left { to { transform: translateX(-50%); } }
@keyframes xb-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
  .xbands { height: 150px; }
  .xband.front { transform: translateY(-50%) rotate(-6deg); }
  .xband.back { transform: translateY(-50%) rotate(5deg); }
  .xband { padding: 11px 0; }
  .xb-track { gap: 18px; }
  .xb-sep { width: 16px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .xb-track { animation: none !important; } }

/* fundo do hero some por máscara (sem faixa sólida que destoava do granulado) */
.hero-bg::after { display: none; }
.hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 280px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 280px), transparent); }

/* Card de progresso à esquerda (ao lado do selo) e celular maior/mais alto */
@media (min-width: 1101px) {
  .pf-course { right: auto; left: 148px; top: 22px; width: 264px; }
  .phone.hero-phone { width: min(236px, (100cqh - 56px) * 9 / 19); bottom: 22px; right: 36px; }
}
@media (min-width: 1101px) {
  .pf-course { width: min(264px, calc(100cqw - 148px - min(236px, (100cqh - 56px) * 9 / 19) - 52px)); }
  .pf-course img { width: clamp(60px, 30%, 84px); }
}
@media (min-width: 1101px) {
  .pf-course { left: 186px; width: min(264px, calc(100cqw - 186px - min(236px, (100cqh - 56px) * 9 / 19) - 44px)); }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .pf-course img { display: none; }
  .pf-course { padding: 10px 12px; }
}

/* "Imprimir certificado": ícone e texto centralizados, alinhado à barra de progresso */
.ac-prog .cert { display: inline-flex; align-items: center; gap: 2px; line-height: 1; padding: 2px 4px; white-space: nowrap; }
.ac-prog .cert i { display: block; font-size: 1.2em; line-height: 1; }
.ac-prog > span:first-child { line-height: 1; }

/* Rodapé: "tucano members" cabendo na largura do conteúdo */
.footer-word { font-size: clamp(2rem, 12.2vw, 10.8rem); white-space: nowrap; }

/* WhatsApp flutuante: mesmo padrão do site Ramon Lima (pulso + badge) */
.wa-float { right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; color: #fff; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .35s var(--ease); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.2s ease-out infinite; pointer-events: none; }
.wa-float svg { width: 30px; height: 30px; }
/* ícone e badge deixam o clique passar: o alvo é sempre o link #wpp-flutuante (acionador do GTM) */
.wa-float > * { pointer-events: none; }
/* botões e links de CTA: o clique sempre cai no próprio link, com o texto e a URL completos (acionadores do GTM: Click Text / Click URL) */
.btn *, .final-talk *, a[href*="api.whatsapp.com"] * { pointer-events: none; }
.wa-badge { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; background: #e53935; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 767px) { .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; } .wa-float svg { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; opacity: 0; } }

/* ---------- Para quem é (v2) ---------- */
#funcionalidades { padding-top: clamp(36px, 4.5vw, 64px); }
.seg-head { max-width: 940px; }
.nowrap { white-space: nowrap; }
.segments { gap: 16px; }
.segment { position: relative; gap: 0; min-height: 0; padding: 26px 22px 24px; overflow: hidden; transition: transform .45s var(--ease), border-color .3s; }
.segment::after { content: ""; position: absolute; inset: auto 22px 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .4s var(--ease); } /* abre do centro, como a barra do FAQ */
.segment:hover { transform: translateY(-4px); border-color: rgba(255,101,20,.35); }
.segment:hover::after { transform: scaleX(1); }
.seg-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 34px; color: #ff7a2e; font-size: 22px; background: rgba(255,101,20,.1); border: 0; box-shadow: inset 0 0 0 1px rgba(255,101,20,.28); transition: background .35s, color .35s, box-shadow .35s; }
.segment:hover .seg-ic { color: #fff; background: radial-gradient(circle at 30% 30%, #ff8a3d, #ff3d32 55%, #ff126a); box-shadow: inset 0 0 0 1px transparent, 0 10px 24px -10px rgba(255,61,50,.7); }
.segment h3 { margin: 0 0 8px; font-size: 1.125rem; }
.segment p { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted, rgba(255,255,255,.6)); }
@media (max-width: 640px) {
  .segment { padding: 20px 18px; }
  .seg-ic { width: 40px; height: 40px; font-size: 19px; margin-bottom: 22px; }
  .segment:last-child { grid-column: span 2; }
}
.seg-head { max-width: 1040px; }
@media (max-width: 900px) { .br-d { display: none; } }

/* Card flutuante de curso: igual à box da plataforma (capa + título em cima, progresso embaixo) */
.pf-course { display: block; padding: 12px 14px 14px; overflow: visible; z-index: 6; }
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-course .pf-top img { display: block; width: 46%; max-width: 132px; height: auto; aspect-ratio: 341 / 168; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.pf-course .pf-info { min-width: 0; padding: 0; display: block; }
.pf-course .pf-info b { white-space: normal; font-size: .8rem; line-height: 1.25; }
.pf-course .pf-info small { display: block; margin-top: 4px; font-size: .66rem; }
.pf-course .pf-prog { margin-top: 12px; align-items: center; font-size: .64rem; }
.pf-course .pf-prog > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pf-course .pf-prog i { display: block; font-size: 1.15em; line-height: 1; vertical-align: 0; }
.pf-course .pf-line { margin-top: 7px; height: 3px; }
@media (min-width: 1101px) {
  .pf-course { left: 172px; width: 300px; }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .pf-course { width: 270px; }
  .pf-course .pf-top img { display: block; }
}
/* Tablet / celular deitado: card ao lado do selo, à esquerda do celular (sem sobrepor) */
@media (min-width: 641px) and (max-width: 1100px) {
  .pf-course { left: 144px; right: auto; top: 22px; width: min(300px, calc(100% - 144px - 210px - 44px - 20px)); }
}
/* Celular: card de progresso compacto ao lado do selo, acima do celular (sem sobrepor) */
@media (max-width: 640px) {
  .pf-course { left: auto; right: 6px; top: 30px; width: min(232px, calc(100% - 112px)); padding: 9px 11px 10px; }
  .pf-course .pf-top { gap: 9px; }
  .pf-course .pf-top img { width: 84px; }
  .pf-course .pf-info b { font-size: .72rem; }
  .pf-course .pf-info small { margin-top: 2px; font-size: .6rem; }
  .pf-course .pf-prog { margin-top: 7px; font-size: .58rem; }
  .pf-course .pf-line { margin-top: 5px; }
}

/* Anel de experts: nome no card (as fotos ficam sem texto, fáceis de trocar) */
.er-card-inner img { object-position: 50% 20%; }
.er-card-inner::before { content: ""; position: absolute; inset: 52% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(16,13,18,.55) 45%, rgba(16,13,18,.92)); pointer-events: none; }
.er-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, 1.15vw, 1.15rem); letter-spacing: -.02em; color: #fff; text-align: center; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.er-name i { font-size: 1em; color: #ff6a2a; text-shadow: none; }
.video-frame { margin-top: calc(var(--h) * -.3); }
@media (max-width: 640px) { .video-frame { margin-top: calc(var(--h) * -.2); } }

/* =========================================================
   Demo da plataforma (quadro do vídeo)
   Telas reais capturadas em 1280×720 + camadas animadas.
   Canvas virtual 1280×720 escalado para caber no quadro (--s via JS)
   ========================================================= */
.video-frame { background: #18161b; }
.demo { --o: #ff5a0e; --s: .875; position: absolute; inset: 0; overflow: hidden; font-family: "Geist", var(--font-body); color: #e9e7ea; user-select: none; -webkit-user-select: none; }
.dm-canvas { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform: scale(var(--s)); transform-origin: 0 0; overflow: hidden; background: #18161b; }
/* cena: entra com leve aproximação + desfoque; a câmera (transform) dá zoom nos momentos-chave */
.dm-scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; scale: 1.045; filter: blur(5px); transform-origin: var(--cx, 50%) var(--cy, 50%); transition: opacity .45s ease, visibility 0s .45s, scale .6s cubic-bezier(.2, .8, .2, 1), filter .45s ease, transform .85s cubic-bezier(.5, 0, .2, 1); }
.dm-scene.on { opacity: 1; visibility: visible; scale: 1; filter: none; transition: opacity .45s ease, scale .7s cubic-bezier(.2, .8, .2, 1), filter .45s ease, transform .85s cubic-bezier(.5, 0, .2, 1); }
.dm-page { position: absolute; top: 0; left: 0; width: 1920px; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.dm-page > img { display: block; width: 1920px; height: auto; }
.demo.cut .dm-page { transition: none; }
/* cabeçalho e menu lateral fixos nas telas que rolam */
.dm-chrome::before, .dm-chrome::after { content: ""; position: absolute; top: 0; left: 0; background: var(--img) 0 0 / 1920px auto no-repeat; }
.dm-chrome::before { width: 1920px; height: 85px; z-index: 2; }
.dm-chrome::after { width: 68px; height: 1080px; z-index: 1; }
.dm-hot { position: absolute; pointer-events: none; }

/* destaque de card (hover) */
.dm-ring { position: absolute; border-radius: 14px; box-shadow: 0 0 0 2px rgba(255,90,14,0), 0 0 0 rgba(255,90,14,0); transition: box-shadow .35s ease; pointer-events: none; }
.dm-ring.hot { box-shadow: 0 0 0 2px rgba(255,90,14,.95), 0 18px 40px -8px rgba(255,90,14,.45); }
.dm-ring.gold.hot { animation: dmGlow 1.6s ease-in-out infinite; }
@keyframes dmGlow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,170,60,.9), 0 0 24px rgba(255,150,40,.25); } 50% { box-shadow: 0 0 0 2px rgba(255,190,80,1), 0 0 46px rgba(255,150,40,.55); } }

/* aula: player */
.dm-vid { position: absolute; left: 497px; top: 133px; width: 1371px; height: 771px; border-radius: 12px; overflow: hidden; }
.dm-vid img { width: 1371px; height: auto; display: block; transform-origin: 50% 38%; }
.dm-vid::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.66)); }
.playing .dm-vid img { animation: dmPan 9s ease-in-out forwards; }
@keyframes dmPan { 0% { transform: none; } 100% { transform: scale(1.08); } }
.dm-pplay { position: absolute; left: 1153px; top: 489px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #ff5a0e; color: #fff; font-size: 32px; box-shadow: 0 10px 26px -6px rgba(255,90,14,.6); transition: transform .25s, opacity .3s; }
.dm-pplay.hot { transform: scale(.9); }
.playing .dm-pplay { opacity: 0; }
.dm-pbar { position: absolute; left: 513px; top: 852px; width: 1339px; display: flex; align-items: center; gap: 18px; color: #fff; font-size: 26px; opacity: 0; transition: opacity .4s; }
.dm-pbar span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; }
.dm-pbar span i { position: absolute; inset: 0; background: #ff5a0e; transform: scaleX(.06); transform-origin: left; }
.dm-pbar small { font-size: 16px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.playing .dm-pbar { opacity: 1; }
.playing .dm-pbar span i { animation: dmProg 14s linear forwards; }
@keyframes dmProg { to { transform: scaleX(.42); } }
/* aula: botão concluir (estado antes do clique) */
.dm-undone { position: absolute; left: 1097px; top: 1008px; width: 170px; height: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #191b1e; font-size: 16px; line-height: 24px; color: #fe5b0e; transition: opacity .35s; }
.dm-undone i { font-size: 18px; color: #fe5b0e; }
.done .dm-undone { opacity: 0; }
/* aula: Tucanete */
.dm-chat { position: absolute; left: 1500px; top: 97px; width: 400px; height: 887px; border-radius: 16px; background: url(../img/plataforma/demo/tela-aula-chat.webp?v=5) -1500px -97px / 1920px auto; box-shadow: 0 8px 32px rgba(0,0,0,.6); transform-origin: 92% 100%; transform: scale(.4) translateY(40px); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .3s; }
.chat .dm-chat { transform: none; opacity: 1; }
.dm-chatx { position: absolute; left: 1830px; top: 990px; width: 80px; height: 82px; background: url(../img/plataforma/demo/tela-aula-chat.webp?v=5) -1830px -990px / 1920px auto; opacity: 0; transition: opacity .25s; }
.chat .dm-chatx { opacity: 1; }

/* progresso */
.dm-bar { position: absolute; left: 145px; top: 515px; width: 1698px; height: 10px; border-radius: 6px; background: #333a42; overflow: hidden; }
.dm-bar i { position: absolute; inset: 0; border-radius: 6px; background: #ff5a0e; transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.3, .7, .2, 1); }
.fill .dm-bar i { transform: scaleX(.012); }

/* ranking */
.dm-shine { position: absolute; border-radius: 8px; overflow: hidden; pointer-events: none; }
.dm-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); }
.shine .dm-shine::after { animation: dmShine 1.3s ease-in-out .2s 2; }
@keyframes dmShine { to { left: 120%; } }

/* comunidade */
.dm-like { position: absolute; left: 549px; top: 459px; width: 52px; height: 32px; display: flex; align-items: center; gap: 15px; padding-left: 2px; background: #1f2225; font-size: 16px; line-height: 16px; color: #868e96; }
.dm-like i { font-size: 16.8px; line-height: 1; transition: transform .3s, color .3s; }
.dm-like em { font-style: normal; font-variant-numeric: tabular-nums; }
@keyframes dmPop { 40% { transform: scale(1.45) rotate(-12deg); } }


/* Cursor, legenda e progresso (legenda/progresso fora do canvas, sem escala) */
.dm-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 40px; height: 40px; transform: translate(1350px, 900px); transition: transform .75s cubic-bezier(.45, .05, .25, 1); pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.dm-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #141117; stroke-width: 1.4; stroke-linejoin: round; }
.dm-cursor::after { content: ""; position: absolute; left: 2px; top: 1px; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid var(--o); opacity: 0; transform: scale(.3); }
.dm-cursor.click::after { animation: dmClick .5s ease-out; }
.dm-cursor.click svg { animation: dmPress .3s ease-out; }
@keyframes dmPress { 40% { transform: scale(.82); } }
@keyframes dmClick { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.dm-caption { position: absolute; left: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 36px); padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(20,17,23,.88); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); font-family: var(--font-display); font-size: clamp(.75rem, 1.4vw, 1rem); font-weight: 600; letter-spacing: -.01em; color: #fff; }
.dm-step { display: grid; place-items: center; width: 2.1em; height: 2.1em; flex-shrink: 0; border-radius: 50%; background: linear-gradient(100deg, #ff6514, #ff3d32 47%, #ff126a); font-size: .8em; }
.dm-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.dm-caption.swap .dm-text { opacity: 0; }
.dm-dots { position: absolute; right: 18px; top: 16px; z-index: 30; display: flex; gap: 6px; }
.dm-dots i { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; position: relative; }
.dm-dots i::after { content: ""; position: absolute; inset: 0; background: #ff6514; transform: scaleX(0); transform-origin: left; }
.dm-dots i.done::after { transform: none; }
.dm-dots i.run::after { animation: dmFill var(--dur, 6s) linear forwards; }
@keyframes dmFill { to { transform: none; } }
.dm-watch { position: absolute; right: 18px; bottom: 18px; z-index: 31; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 999px; background: linear-gradient(100deg, #ff6514, #ff3d32 47%, #ff126a); font: 600 .95rem var(--font-display); color: #fff; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(255,61,50,.7); }
.dm-watch i { font-size: 1.2em; }
@media (max-width: 640px) {
  .dm-caption { left: 10px; bottom: 10px; padding: 5px 12px 5px 5px; }
  .dm-dots { right: 10px; top: 10px; gap: 4px; }
  .dm-dots i { width: 14px; height: 3px; }
  .dm-watch { right: 10px; bottom: 10px; padding: 7px 12px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-cursor { display: none; } .dm-scene, .dm-scene.on { scale: 1; filter: none; transition: opacity .45s ease, visibility 0s .45s; } }
.dm-watch[hidden] { display: none; }
@media (max-width: 640px) { .dm-caption { font-size: .66rem; gap: 6px; padding: 4px 10px 4px 4px; left: 8px; bottom: 8px; max-width: calc(100% - 16px); } .dm-dots { top: 8px; right: 8px; } }
/* indicadores dentro da legenda (não cobrem o cabeçalho real) */
.dm-caption .dm-dots { position: static; display: flex; gap: 4px; margin-left: 4px; flex-shrink: 0; }
.dm-caption .dm-dots i { width: 16px; height: 3px; }
@media (max-width: 640px) { .dm-caption .dm-dots i { width: 8px; } }

/* ---- Demo: componentes reais do campus (views/chat/chat.css, gamification-xp-notify, header XP) ---- */
.demo { --green-light: #fe5b0e; }
/* chat da Tucanete */
.dm-msgs { position: absolute; top: 154px; left: 18px; right: 18px; display: flex; flex-direction: column; gap: 16px; }
.demo .dm-m { display: none; }
.demo .dm-m.show { display: flex; }
.demo .user-message, .demo .agent-message { max-width: 75%; border-radius: 18px; padding: 10px 14px; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(10px); animation: dmSlideIn .3s ease forwards; }
.demo .user-message { align-self: flex-end; background-color: #3a3a3a; }
.demo .agent-message { align-self: flex-start; background-color: #1a1a1a; border: 1px solid #2a2a2a; }
@keyframes dmSlideIn { to { opacity: 1; transform: translateY(0); } }
.demo .typing-indicator { align-self: flex-start; background-color: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 18px; padding: 14px 18px; align-items: center; gap: 8px; animation: dmSlideIn .3s ease forwards; opacity: 0; transform: translateY(10px); }
.demo .typing-dots { display: flex; gap: 4px; }
.demo .typing-dot { width: 8px; height: 8px; background-color: #666; border-radius: 50%; animation: dmTypingBounce 1.4s infinite; }
.demo .typing-dot:nth-child(2) { animation-delay: .2s; }
.demo .typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dmTypingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
.demo .agent-icon, .demo .user-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.demo .agent-icon { background-color: #2a2a2a; border: 1px solid #444; }
.demo .user-icon { background-color: #555; }
.demo .agent-icon img, .demo .user-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.demo .user-icon.is-logo { padding: 4px; background: #131116; }
.demo .user-icon.is-logo img { object-fit: contain; border-radius: 0; }
.demo .message-content { display: flex; flex-direction: column; gap: 4px; }
.demo .message-label { font-size: 11px; font-weight: 500; color: #e0e0e0; line-height: 1.2; }
.demo .message-text { margin: 0; font-size: 13px; color: #d0d0d0; line-height: 1.5; }
.dm-input { position: absolute; left: 37px; top: 803px; width: 290px; height: 21px; background: #1a1a1a; font-size: 14px; line-height: 21px; color: #e0e0e0; white-space: nowrap; overflow: hidden; display: none; }
.dm-input.on { display: block; }
.dm-input.on::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #e0e0e0; animation: dmBlink 1s steps(1) infinite; }
@keyframes dmBlink { 50% { opacity: 0; } }
.demo .dm-chat .send-button { position: absolute; left: 333px; top: 798px; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: var(--green-light); opacity: 0; transition: opacity .2s; }
.demo .dm-chat .send-button.active { opacity: 1; }
.demo .dm-chat .send-button svg { width: 18px; height: 18px; fill: #18161b; }
/* selo de XP do cabeçalho (inc/header.php + custom.css) */
.dm-xpchip { position: absolute; left: 1768px; top: 43px; z-index: 5; padding: 2px; border-radius: 999px; background: #131116; line-height: 1; transition: opacity .25s; }
.demo.zoomed .dm-xpchip { opacity: 0; }
.demo .campus-header__xp-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .62rem; border-radius: 999px; white-space: nowrap; line-height: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--green-light) 14%, rgba(19,17,22,.92)) 0%, rgba(19,17,22,.92) 100%); border: 1px solid color-mix(in srgb, var(--green-light) 32%, transparent); box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.demo .campus-header__xp-chip img { width: 13px; height: 13px; object-fit: contain; opacity: .98; }
.demo .campus-header__xp-amount { color: var(--green-light); font-size: .8125rem; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; line-height: 1; margin-right: -.2rem; }
.demo .campus-header__xp-suffix { color: color-mix(in srgb, var(--green-light) 72%, rgba(255,255,255,.5)); font-size: .625rem; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.dm-xpchip.pulse .campus-header__xp-chip { animation: dmXpPulse .65s ease-out; }
@keyframes dmXpPulse {
  0% { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
  40% { transform: scale(1.03); box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 12px color-mix(in srgb, var(--green-light) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.1); }
  100% { transform: scale(1); box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
}
/* toast de XP (gamification-xp-notify.js) */
.demo .gamification-xp-notify--toast { position: absolute; left: 16px; bottom: 24px; z-index: 6; width: max-content; opacity: 0; transform: translate3d(-12px, 12px, 0); transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1); }
.demo .gamification-xp-notify--toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.demo .gamification-xp-notify--toast.is-leaving { opacity: 0; transform: translate3d(-8px, -6px, 0); }
.demo .gamification-xp-notify__inner { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .75rem; background: rgba(18,20,22,.94); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.demo .gamification-xp-notify__icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.demo .gamification-xp-notify__body { display: flex; flex-direction: column; gap: .1rem; }
.demo .gamification-xp-notify__amount { color: var(--green-light); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.demo .gamification-xp-notify__label { color: #9ca3af; font-size: .8125rem; line-height: 1.35; }
.demo.toasting .dm-caption { opacity: 0; transform: translateY(6px); }
.dm-caption { transition: opacity .3s, transform .3s; }
/* curtir (Community::likeButton): só o ícone muda */
.liked .dm-like i { color: var(--green-light); }


/* ---------- Respiro entre as dobras de produto: depoimentos curtos ---------- */
.qstrip { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 80px) 0; background: linear-gradient(100deg, #ee1478 0%, #ff3358 50%, #ff5a2a 100%); }
.qstrip::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 120% at 50% 120%, rgba(255,226,196,.45), transparent 70%); }
.qs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.qs-item { display: flex; flex-direction: column; margin: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.qs-item.is-out { opacity: 0; transform: translateY(8px); }
.qs-item + .qs-item { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid rgba(255,255,255,.28); }
.qs-mark { font-family: var(--font-display); font-size: 3rem; line-height: .8; height: 30px; color: rgba(255,255,255,.7); }
.qs-item blockquote { flex: 1; margin: 6px 0 20px; }
.qs-item blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: #fff; }
.qs-item figcaption { display: flex; align-items: center; gap: 12px; }
.qs-item figcaption img, .qs-item figcaption .initials { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; border: 2px solid rgba(255,255,255,.5); }
.qs-item figcaption .initials { display: grid; place-items: center; background: #141117; color: #fff; font-size: .78rem; font-weight: 700; }
.qs-item figcaption strong { display: block; font-size: .88rem; line-height: 1.25; color: #fff; }
.qs-item figcaption small { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.3; color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
  .qs-grid { grid-template-columns: 1fr; gap: 28px; }
  .qs-item + .qs-item { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.28); }
}

/* ---------- Comunidade: feed real do campus (community.css), em escala ---------- */
.comm-frame { min-height: 0; padding: clamp(14px, 1.8vw, 22px); }
.comm-frame .tm-stage { width: 100%; margin: 0; padding: 0; }
.tm-stage[data-tm="comm"] { --w: 780; }
.tc-page { background: #18161b; color: #cbcccd; }
.tc-titlerow { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.tc-title-pill { font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -.01em; color: #e6e7e8; }
.tc-titlerow i { flex: 1; height: 1px; background: #2a2d31; }
.tc-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.tc-spaces { display: flex; flex-direction: column; gap: 4px; }
.tc-space { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 15.2px; line-height: 22.8px; color: #868e96; white-space: nowrap; }
.tc-space i { font-style: normal; font-size: 18.4px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.tc-space.is-active { background: #1f2225; color: #cbcccd; }
.tc-sep { height: 1px; margin: 6px 12px; background: rgba(255,255,255,.08); }
.tc-feed { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tc-composer { display: flex; align-items: center; gap: 12px; height: 56px; padding: 8px 16px 8px 10px; border-radius: 16px; background: #1f2225; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 1px 0 rgba(255,255,255,.02); font-size: 15.68px; color: #868e96; }
.tc-card { padding: 16px; border-radius: 16px; background: #1f2225; border: 1px solid rgba(255,255,255,.04); }
.tc-card.is-pinned { border-color: rgba(254,91,14,.42); box-shadow: 0 0 0 1px rgba(254,91,14,.1), 0 8px 28px rgba(254,91,14,.14); }
.tc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.tc-head .tm-ava { margin: 3px 0 4px; }
.tc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-who { display: flex; align-items: center; gap: 8px; }
.tc-who b { font-size: 16px; font-weight: 600; line-height: 24px; color: #fff; }
.tc-dot { width: 8px; height: 8px; border-radius: 50%; background: #09e3a6; box-shadow: 0 0 0 3px rgba(9,227,166,.22); }
.tc-handle { font-size: 12.48px; font-weight: 500; line-height: 15px; color: #868e96; }
.tc-sub { display: flex; align-items: center; gap: 8px; font-size: 12.8px; line-height: 19.2px; color: #868e96; }
.tc-chip { color: #fe5b0e; }
.tc-tools { display: flex; align-items: center; color: #868e96; }
.tc-tools i { display: grid; place-items: center; width: 32px; height: 32px; font-size: 16px; }
.tc-tools i.is-on { color: #fe5b0e; }
.tc-title { margin: 0 0 8px !important; font-size: 18.4px; font-weight: 700; line-height: 27.6px; color: #fff; }
.tc-body { color: #cbcccd; }
.tc-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; height: 24px; color: #868e96; }
.tc-act { display: inline-flex; align-items: center; gap: 6px; }
.tc-act i { font-size: 16px; }
.tc-activity { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.12px; white-space: nowrap; }
.tc-faces { display: flex; }
.tc-face { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid #1f2225; background: #32363b; }
.tc-face:first-child { margin-left: 0; }
.tc-face em { font-style: normal; font-size: 8px; font-weight: 600; color: #e8e8e8; }
.tc-keep { margin-left: auto; display: flex; gap: 14px; font-size: 16px; }
.tc-poll { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tc-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: #18161b; overflow: hidden; }
.tc-opt > span, .tc-opt > b { position: relative; z-index: 1; }
.tc-opt > b { font-weight: 600; color: #fff; }
.tc-bar { position: absolute; inset: 0 auto 0 0; width: var(--p); background: rgba(254,91,14,.16); transition: width 1.1s var(--ease); }
.tc-opt.is-voted { border-color: rgba(254,91,14,.38); }
.tc-opt.is-voted .tc-bar { background: rgba(254,91,14,.24); }
.tc-poll.is-idle .tc-bar { width: 0; }
@media (max-width: 640px) {
  .tc-layout { grid-template-columns: minmax(0, 1fr); }
  .tc-spaces { flex-direction: row; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tc-space { flex: 0 0 auto; }
  .tc-sep { width: 1px; height: auto; align-self: stretch; margin: 6px 4px; }
  .tc-activity { display: none; }
}

/* ---------- Comunidade: coluna de texto no padrão das outras dobras em split ---------- */
.split-comm { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; }
.comm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.comm-list li { display: flex; align-items: flex-start; gap: 14px; }
.comm-list .icon-box { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; }
.comm-list .icon-box svg { width: 18px; height: 18px; }
.comm-list strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.comm-list small { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) {
  .comm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split-comm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .comm-list { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Comunidade: caixa de criação de post flutuando (community-composer-dialog) ---------- */
.split-comm .split-media { position: relative; }
.tc-float { position: absolute; left: -36px; bottom: -132px; z-index: 2; width: 66%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.tc-float .tm-stage { margin: 0; padding: 0; }
.tm-stage[data-tm="composer"] { --w: 560; }
.tc-dialog { position: relative; width: calc(var(--w) * 1px); padding: 20px 22px 16px; border-radius: 16px; background: #1f2225; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(254,91,14,.18); font-family: "Geist", var(--font-body); font-size: 16px; line-height: 1.5; color: #cbcccd; text-align: left; letter-spacing: 0; }
.tc-dialog__close { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; font-size: 20px; color: #868e96; }
.tc-dialog__who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-right: 40px; }
.tc-dialog__who p { margin: 0; font-size: 15.2px; line-height: 1.35; color: #cbcccd; }
.tc-dialog__title { min-height: 1.25em; margin: 0 0 6px; padding: 4px 0 8px; font-size: 27.2px; font-weight: 500; line-height: 1.25; color: #f4f5f6; }
.tc-dialog__body { min-height: 96px; padding: 4px 0 12px; color: #f4f5f6; }
.tc-dialog__title.is-empty::before, .tc-dialog__body.is-empty::before { content: attr(data-ph); color: #8b8c8e; }
.tc-dialog.is-typing .is-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: #fe5b0e; animation: tcCaret 1s steps(1) infinite; }
@keyframes tcCaret { 50% { opacity: 0; } }
.tc-dialog__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.tc-dialog__tools { display: flex; align-items: center; gap: 4px; min-width: 0; color: #868e96; }
.tc-dialog__tools i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
.tc-dialog__fmt { display: flex; padding-right: 4px; margin-right: 2px; border-right: 1px solid rgba(255,255,255,.06); }
.tc-dialog__space { display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-left: 6px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: #18161b; font-size: 13.6px; color: #cbcccd; white-space: nowrap; }
.tc-dialog__space i { width: auto; height: auto; font-size: 16px; color: #868e96; }
.tc-dialog__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 10px; background: #fe5b0e; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #18161b; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s; }
.tc-dialog__btn i { font-size: 16px; }
.tc-dialog__btn.is-ready { box-shadow: 0 0 0 4px rgba(254,91,14,.22); transform: translateY(-1px); }
.tc-dialog__btn { transition: box-shadow .3s, transform .2s; }
.tc-dialog__btn.is-press { transform: scale(.95); }
.tc-dialog__title, .tc-dialog__body { transition: opacity .4s; }
.is-sent .tc-dialog__title, .is-sent .tc-dialog__body { opacity: 0; }
@media (max-width: 1100px) {
  .tc-float { left: -16px; width: 74%; }
}
@media (max-width: 900px) {
  .tc-float { position: relative; left: auto; bottom: auto; width: 88%; margin: -64px 0 0 auto; transform: translateX(8px); }
}
@media (max-width: 640px) {
  .tm-stage[data-tm="composer"] { --w: 520; }
  .tc-float { width: 94%; margin-top: -40px; transform: none; }
}

/* ---------- Quem usa: mural inclinado com as plataformas dos clientes ---------- */
.cw { position: relative; overflow: hidden; height: clamp(560px, 52vw, 720px); display: grid; place-items: center; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cw-wall { position: absolute; inset: 0; perspective: 1800px; pointer-events: none; }
.cw-wall::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 46% 40% at 50% 50%, rgba(10,9,12,.72), transparent 70%),
  linear-gradient(180deg, var(--bg-2) 0%, transparent 18%, transparent 82%, var(--bg-2) 100%),
  linear-gradient(90deg, var(--bg-2) 0%, transparent 14%, transparent 86%, var(--bg-2) 100%); }
.cw-plane { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(8, 300px); gap: 18px; height: 2400px; align-items: start; transform: translate(-50%, -50%) rotateX(42deg) rotateZ(-24deg) scale(1.05); transform-style: preserve-3d; }
.cw-col { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; animation: cwUp var(--t, 70s) linear infinite; will-change: transform; }
.cw-col--down { animation-direction: reverse; }
.cw-card { position: relative; flex-shrink: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #141217; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.cw-card img { display: block; width: 100%; height: auto; aspect-ratio: 1439 / 1022; object-fit: cover; }
.cw-card span { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(12,11,14,.78); border: 1px solid rgba(255,255,255,.1); font-size: .72rem; font-weight: 600; color: #f1f1f3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes cwUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--g, 18px) / 2)); } }
.cw .container { position: relative; z-index: 1; display: flex; justify-content: center; }
.cw-box { max-width: 640px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px); border-radius: var(--radius-lg); text-align: center; background: rgba(16,14,19,.62); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.cw-box .eyebrow { margin-bottom: 20px; }
.cw-box .lead { margin-top: 16px; }
.cw-box .grad-text { white-space: nowrap; }
@media (max-width: 900px) {
  .cw-plane { grid-template-columns: repeat(8, 220px); gap: 14px; height: 1800px; }
  .cw-col { gap: 14px; --g: 14px; }
}
@media (max-width: 640px) {
  .cw { height: 560px; }
  .cw-plane { grid-template-columns: repeat(8, 170px); gap: 10px; height: 1400px; transform: translate(-50%, -50%) rotateX(38deg) rotateZ(-22deg); }
  .cw-col { gap: 10px; --g: 10px; }
  .cw-card { border-radius: 10px; }
  .cw-card span { left: 6px; bottom: 6px; padding: 3px 7px; font-size: .62rem; }
  .cw .container { padding-inline: 16px; }
  .cw-wall::after { background: radial-gradient(ellipse 70% 34% at 50% 50%, rgba(10,9,12,.55), transparent 75%), linear-gradient(180deg, var(--bg-2) 0%, transparent 12%, transparent 88%, var(--bg-2) 100%); }
  .cw-box { padding: 26px 20px; background: rgba(16,14,19,.7); }
  .cw-box .lead { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-col { animation: none; }
}

/* ---------- Captação de leads: telas reais (funil, sala do webinar, FakeLive) dentro de uma janela ---------- */
.cap > * { min-width: 0; display: flex; flex-direction: column; }
.cap > * { grid-column: span 2; }
.cap .tm-stage { padding-top: 24px; }
.tm-stage[data-tm="funnel"], .tm-stage[data-tm="room"], .tm-stage[data-tm="fake"] { --w: 420; }

/* janela do navegador */
.cp-win { position: relative; width: calc(var(--w) * 1px); margin: 0 auto; border-radius: 14px; overflow: hidden; background: #18161b; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); font-family: "Geist", var(--font-body); font-size: 16px; line-height: 1.5; color: #fff; text-align: left; letter-spacing: 0; }
.cp-win__bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; background: #111013; border-bottom: 1px solid rgba(255,255,255,.06); }
.cp-win__bar > i { width: 11px; height: 11px; border-radius: 50%; background: #2c2a30; }
.cp-win__url { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0 auto; padding: 0 14px; border-radius: 8px; background: #1f1d22; font-size: 12.5px; color: #868e96; transform: translateX(-24px); }
.cp-win__url i { font-size: 12px; }
.cp-win__view { position: relative; height: 600px; overflow: hidden; }

/* Funnel: página de captura no formato "somente formulário" (funil · lp-access-form), com o preenchimento animado da apresentação */
.fx { position: relative; height: 100%; background: #18161b; }
.fx__strip { padding: 10px 18px; background: #fe5b0e; color: #18161b; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.fx__in { display: flex; flex-direction: column; padding: 18px 20px 0; }
.fx__k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff7a2e; }
.fx__k i { font-size: 14px; }
.fx__title { margin: 8px 0 12px !important; font-size: 23px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.fx__title span { color: #fe5b0e; }
.fx__ben { display: flex; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.fx__ben li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.86); }
.fx__ben i { font-size: 14px; color: #fe5b0e; }
.fx__form { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.fx__ft { margin: 0 0 4px !important; font-size: 13px; font-weight: 600; line-height: 1.35; color: #fff; text-wrap: balance; }
.fx__lbl { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #868e96; }
.fx__fld { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 10px; background: #141217; border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: #fff; }
.fx__fld > i { font-size: 16px; color: #fe5b0e; }
.fx__val { display: grid; flex: 1; min-width: 0; }
.fx__val > * { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; }
.fx__ph { color: #6b7078; }
.fx__ty { clip-path: inset(0 100% 0 0); }
.fx__ddi { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-right: 9px; border-right: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 600; }
.fx__flag { position: relative; display: inline-block; width: 20px; height: 14px; border-radius: 3px; background: #009c3b; overflow: hidden; }
.fx__flag::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #ffdf00; transform: scaleX(1.3) rotate(45deg) scale(.72); }
.fx__flag::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #002776; }
.fx__btn { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 8px; border-radius: 10px; background: #fe5b0e; color: #18161b; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.fx__cur, .wx__cur { position: absolute; right: 18%; bottom: -12px; font-size: 26px; color: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); opacity: 0; }
.fx__trust { display: flex; justify-content: center; gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); }
.fx__trust li { display: flex; align-items: center; gap: 5px; }
.fx__trust i { font-size: 13px; color: #fe5b0e; }
.fx__ok { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; background: rgba(20,18,23,.94); text-align: center; opacity: 0; pointer-events: none; }
.fx__ok-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: rgba(34,197,94,.14); color: #4ade80; font-size: 36px; }
.fx__ok b { font-size: 21px; font-weight: 700; color: #fff; }
.fx__ok small { font-size: 13px; color: #868e96; }
.fx__ok-bar { width: 160px; height: 4px; margin-top: 14px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.fx__ok-bar i { display: block; height: 100%; border-radius: inherit; background: #fe5b0e; transform: scaleX(0); transform-origin: left; }
/* ciclo de 9s: digita os três campos, clica no botão e libera o acesso */
.fx.is-run .fx__ty { animation: cpType .8s steps(14) var(--t) forwards; }
.fx.is-run .fx__ph { animation: cpHide 0s linear var(--t) forwards; }
.fx.is-run .fx__fld { animation: cpFocus 1.1s ease var(--t); }
.fx.is-run .fx__cur { animation: cpCursor 1.4s cubic-bezier(.22,1,.36,1) 3.4s forwards; }
.fx.is-run .fx__btn { animation: cpPress .3s ease 4.3s; }
.fx.is-run .fx__ok { animation: cpOk 3.6s ease 4.7s forwards; }
.fx.is-run .fx__ok-bar i { animation: cpFill 2.4s linear 5.1s forwards; }
@keyframes cpType { to { clip-path: inset(0 0 0 0); } }
@keyframes cpHide { to { opacity: 0; } }
@keyframes cpFocus { 0%, 100% { border-color: rgba(255,255,255,.1); } 15%, 80% { border-color: rgba(254,91,14,.7); box-shadow: 0 0 0 3px rgba(254,91,14,.14); } }
@keyframes cpCursor { 0% { opacity: 0; transform: translate(30px, 30px); } 40%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cpPress { 50% { transform: scale(.97); filter: brightness(1.15); } }
@keyframes cpOk { 0% { opacity: 0; } 10%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cpFill { to { transform: none; } }
.cp-toast { position: absolute; left: 50%; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px; background: rgba(18,20,22,.96); border: 1px solid rgba(254,91,14,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5); white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.cp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cp-toast__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(254,91,14,.18); color: #fe5b0e; font-size: 17px; }
.cp-toast b { display: block; font-size: 13.5px; color: #fff; line-height: 1.3; }
.cp-toast small { font-size: 12px; color: #868e96; }
.cp-toast em { font-style: normal; font-weight: 600; color: #fe5b0e; }

/* Webinar: sala ao vivo (live · liveclass) com o vídeo e o chat da apresentação e o botão de oferta da plataforma */
.wx { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px 18px 0; background: #18161b; }
.wx__top { display: flex; align-items: center; justify-content: space-between; }
.wx__logo { width: 92px; height: 28px; }
.wx__now { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,18,106,.14); color: #ff5c8a; font-size: 11px; font-weight: 700; }
.wx__now i { width: 7px; height: 7px; border-radius: 50%; background: #ff126a; animation: blink 1.4s infinite; }
.wx__title { margin: 12px 0 2px !important; font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff; text-align: center; }
.wx__sub { margin: 0 0 12px !important; font-size: 12px; font-weight: 300; line-height: 1.4; color: #cbcccd; text-align: center; text-wrap: balance; }
.wx__video, .cp-fl__video { container-type: inline-size; }
.wx__video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(60% 85% at 80% 35%, rgba(255,120,70,.3), transparent 62%), radial-gradient(55% 80% at 0% 100%, rgba(255,18,106,.22), transparent 60%), linear-gradient(160deg, #2c2331, #141117); }
.wx__board { position: absolute; left: 5cqw; top: 22cqw; width: 50cqw; }
.wx__board span { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 2.6cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff9a6a; }
.wx__board span i { font-size: 3.4cqw; }
.wx__board b { display: block; margin-top: 1.6cqw; font-size: 5.6cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.wx__board > i { display: block; width: 80%; height: 1.2cqw; margin-top: 2.2cqw; border-radius: 1cqw; background: rgba(255,255,255,.14); }
.wx__board > i + i { width: 60%; margin-top: 1.4cqw; }
/* apresentador simulado (o mesmo da apresentação), sem foto de ninguém */
.cp-pres { position: absolute; right: 7cqw; bottom: 0; width: 28cqw; height: 42cqw; transform-origin: 50% 100%; animation: cpTalk 3.4s ease-in-out infinite; }
.cp-pres::before { content: ""; position: absolute; left: 50%; top: 0; width: 12cqw; height: 12cqw; margin-left: -6cqw; border-radius: 50%; background: linear-gradient(160deg, #6b5a63, #3a3038); box-shadow: inset 0 -.6cqw 1.2cqw rgba(0,0,0,.3), 0 0 4cqw rgba(255,120,70,.25); }
.cp-pres::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28cqw; border-radius: 14cqw 14cqw 0 0; background: linear-gradient(180deg, #4a3d47, #2a2229); box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.08); }
@keyframes cpTalk { 0%, 100% { transform: none; } 30% { transform: rotate(-1.4deg) translateY(-.4cqw); } 65% { transform: rotate(1deg); } }
.wx__video::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.wx__tag { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; gap: 6px; }
.wx__tag span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(11,13,16,.72); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.wx__tag .is-live { background: #ff126a; }
.wx__tag .is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s steps(2) infinite; }
.wx__tag i { font-size: 13px; }
.wx__chat { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; gap: 5px; justify-items: end; }
.wx__chat span { padding: 5px 9px; border-radius: 10px 10px 3px 10px; background: rgba(15,13,18,.86); border: 1px solid rgba(255,255,255,.12); font-size: 11px; line-height: 1.3; color: #fff; opacity: 0; }
.wx__chat b { color: #ff9a6a; }
.wx__src { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: rgba(11,13,16,.72); font-size: 10.5px; font-weight: 600; color: #fff; }
.wx__src i { font-size: 13px; }
.wx__src em { font-style: normal; font-weight: 400; color: #868e96; }
.wx__agenda { display: grid; gap: 8px; margin-top: 12px; }
.wx__agenda > span { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.wx__agenda i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(254,91,14,.14); color: #fe5b0e; font-size: 15px; }
.wx__agenda .is-now i { background: rgba(255,18,106,.16); color: #ff5c8a; }
.wx__agenda b { font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; }
.wx__agenda em { font-style: normal; font-size: 11px; line-height: 1.3; color: #868e96; }
.wx__cta { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #141218; border: 1px solid rgba(254,91,14,.35); }
.wx__cta p { flex: 1; margin: 0 !important; font-size: 12px; line-height: 1.35; color: #cbcccd; text-wrap: balance; }
.wx__cta p b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff7a2e; }
.wx__btn { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(255,61,50,.8); }
.wx__cur { right: 14%; bottom: -14px; }
.wx__click { position: absolute; right: 12px; top: -14px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(18,20,22,.96); border: 1px solid rgba(254,91,14,.4); font-size: 11px; font-weight: 600; color: #fff; opacity: 0; }
.wx__click i { color: #fe5b0e; font-size: 13px; }
.wx__foot { display: flex; justify-content: center; gap: 14px; margin: auto 0 0 !important; padding: 12px 0 14px; font-size: 10.5px; color: #8b8c8e; }
/* ciclo de 10s: chat chegando, oferta liberada no tempo certo e o clique contado */
.wx.is-run .wx__chat span { animation: cpPop .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(.6s + var(--k) * 1s); }
.wx.is-run .wx__cta { animation: cpGlow 1.6s ease 3.4s; }
@keyframes cpGlow { 40% { border-color: rgba(254,91,14,.9); box-shadow: 0 0 0 4px rgba(254,91,14,.16); } }
.wx.is-run .wx__cur { animation: cpCursor 1.4s cubic-bezier(.22,1,.36,1) 5s forwards; }
.wx.is-run .wx__btn { animation: cpPress .3s ease 5.9s; }
.wx.is-run .wx__click { animation: cpOk 2.6s ease 6.1s forwards; }
@keyframes cpPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* AutoLive: sala com chat, aba de oferta e avisos de venda (liveclass · fake-live-chat) */
.cp-fl { position: relative; height: 100%; padding: 16px 18px; background: #18161b; }
.cp-fl__play { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.cp-fl__video { position: relative; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.cp-fl__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 38% 0 18px; background: radial-gradient(70% 90% at 0% 100%, rgba(254,91,14,.28), transparent 60%), radial-gradient(50% 60% at 100% 0%, rgba(240,35,95,.16), transparent 70%), #121014; }
.cp-fl__slide small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fe5b0e; }
.cp-fl__slide h5 { margin: 5px 0 10px !important; font-size: 17px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.cp-fl__slide h5 span { color: #fe5b0e; }
.cp-fl__slide ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cp-fl__slide li { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #cbcccd; }
.cp-fl__slide li b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 9px; color: #fff; }
.cp-fl__presence { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.cp-fl__live, .cp-fl__count { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cp-fl__live { background: rgba(220,38,38,.92); }
.cp-fl__live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
.cp-fl__count { background: rgba(11,13,16,.72); font-size: 11px; letter-spacing: 0; }
.cp-fl__count i { font-size: 13px; }
.cp-fl__count em { font-style: normal; font-variant-numeric: tabular-nums; }
.cp-fl__panel { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 12px; overflow: hidden; background: #0f0f0f; }
.cp-fl__tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-fl__tabs span { position: relative; flex: 1; display: grid; place-items: center; height: 38px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); transition: color .3s; }
.cp-fl__tabs span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fe5b0e; transform: scaleX(0); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cp-fl__tabs span.is-active { color: #fe5b0e; }
.cp-fl__tabs span.is-active::after { transform: none; }
.cp-fl__tabs span i { position: absolute; top: 10px; right: calc(50% - 30px); width: 6px; height: 6px; border-radius: 50%; background: #fe5b0e; opacity: 0; }
.cp-fl.has-offer .cp-fl__tabs span i { opacity: 1; animation: blink 1.4s infinite; }
.cp-fl__pane { position: absolute; inset: 39px 0 0; display: flex; flex-direction: column; transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.cp-fl__pane--offer { display: flex; flex-direction: column; padding: 14px; opacity: 0; transform: translateX(16px); pointer-events: none; }
.cp-fl.show-offer .cp-fl__pane--chat { opacity: 0; transform: translateX(-16px); }
.cp-fl.show-offer .cp-fl__pane--offer { opacity: 1; transform: none; }
.cp-fl__list { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-height: 0; margin: 0; padding: 8px 12px 10px; overflow: hidden; list-style: none; }
.cp-msg { display: flex; gap: 8px; flex-shrink: 0; animation: cpIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes cpIn { from { opacity: 0; transform: translateY(10px); } }
.cp-msg__av { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #3a3a3a; font-size: 10px; font-weight: 700; color: #fff; }
.cp-msg b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.4; }
.cp-msg p { margin: 1px 0 0 !important; font-size: 12.5px; line-height: 1.4; color: #d0d0d0; }
.cp-msg.is-sale { margin: 0 -6px; padding: 7px 6px; border-radius: 10px; background: rgba(245,158,11,.07); }
.cp-msg.is-sale .cp-msg__av { background: #b45309; }
.cp-msg.is-sale b { color: #fcd34d; }
.cp-msg small { font-size: 10px; font-weight: 400; color: #888; }
.cp-msg em { padding: 1px 7px; border-radius: 999px; background: rgba(245,158,11,.18); color: #fcd34d; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cp-fl__pane--offer img { width: 100%; flex: 1; min-height: 0; margin-bottom: 12px; object-fit: cover; border-radius: 10px; }
.cp-fl__otitle { font-size: 14px; font-weight: 700; line-height: 1.3; color: #f8fafc; }
.cp-fl__ometa { font-size: 11.5px; color: #94a3b8; }
.cp-fl__price { font-size: 19px; font-weight: 800; line-height: 1.2; color: #fe5b0e; }
.cp-fl__buy { margin-top: 12px; display: grid; place-items: center; height: 40px; border-radius: 8px; background: #fe5b0e; color: #18161b; font-size: 12.5px; font-weight: 700; text-transform: uppercase; box-shadow: 0 0 0 0 rgba(254,91,14,.4); animation: cpBuy 2.2s ease-in-out infinite; }
@keyframes cpBuy { 50% { box-shadow: 0 0 0 6px rgba(254,91,14,.18); } }
.cp-fl__toast { position: absolute; left: 30px; right: 30px; bottom: 16px; z-index: 3; display: flex; gap: 10px; padding: 10px 12px 13px 10px; border-radius: 12px; overflow: hidden; background: rgba(31,34,37,.95); border: 1px solid #424547; box-shadow: 0 18px 40px rgba(0,0,0,.45); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.cp-fl__toast.is-on { opacity: 1; transform: none; }
.cp-fl__toast-ic { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #b45309; color: #fcd34d; font-size: 19px; }
.cp-fl__toast b { display: block; font-size: 13px; color: #fcd34d; line-height: 1.3; }
.cp-fl__toast small { display: block; font-size: 11px; color: #8b8c8e; }
.cp-fl__toast p { margin: 2px 0 0 !important; font-size: 12px; color: #cbcccd; }
.cp-fl__toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fcd34d; transform-origin: left; transform: scaleX(0); }
.cp-fl__toast.is-on .cp-fl__toast-bar { animation: cpBar 3.6s linear forwards; }
@keyframes cpBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 900px) {
  .cap > * { grid-column: span 6; }
}
/* sem animação: mostra o estado final de cada tela */
@media (prefers-reduced-motion: reduce) {
  .fx__ty { clip-path: none; }
  .fx__ph { opacity: 0; }
  .wx__chat span { opacity: 1; transform: none; }
  .cp-pres { animation: none; }
  .cp-fl__buy { animation: none; }
}

/* ---------- Captação: painel de leads (estrutura de admin · funnel/control e lives/control, no visual escuro da LP) ---------- */
.cap > .cp-leads { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.cp-leads .tm-stage { --w: 860; padding-top: 0; }
.cp-leads__kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ff7a2e; }
.cp-leads__kicker i { font-size: 1rem; }
.cp-leads__copy h3 { text-wrap: balance; }
.cp-leads__copy .copy, .cp-steps small { text-wrap: pretty; }
.cp-steps { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: none; }
.cp-steps li { display: flex; gap: 14px; align-items: flex-start; }
.cp-steps b { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: rgba(254,91,14,.12); border: 1px solid rgba(254,91,14,.3); font-size: .78rem; color: #ff7a2e; }
.cp-steps strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; color: #fff; }
.cp-steps small { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.4; color: var(--muted); }

.cp-leads .cp-win__view { height: 560px; }
.cp-ad { position: relative; height: 100%; padding: 22px 24px; background: #141217; font-size: 14px; }
.cp-ad__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cp-ad__head h5 { display: flex; align-items: center; gap: 9px; margin: 0 !important; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.cp-ad__head h5 > i { font-size: 22px; color: #fe5b0e; }
.cp-ad__head p { display: flex; gap: 6px; margin: 4px 0 0 !important; font-size: 12.5px; color: #868e96; }
.cp-ad__head p i { font-style: normal; color: #4b4f55; }
.cp-ad__head p b { font-weight: 500; color: #cbcccd; }
.cp-ad__t { display: none; }
.cp-ad[data-v="funnel"] .cp-ad__t[data-v="funnel"], .cp-ad[data-v="room"] .cp-ad__t[data-v="room"] { display: inline; }
.cp-ad__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #0f0e11; border: 1px solid rgba(255,255,255,.06); }
.cp-ad__tabs span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #868e96; transition: background .3s, color .3s; }
.cp-ad__tabs span.is-on { background: rgba(254,91,14,.14); color: #fe5b0e; }

.cp-ad__pane { position: absolute; left: 24px; right: 24px; top: 92px; bottom: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1); }
.cp-ad[data-v="funnel"] .cp-ad__pane[data-v="funnel"], .cp-ad[data-v="room"] .cp-ad__pane[data-v="room"] { opacity: 1; transform: none; }
.cp-ad__card, .cp-ad__stat, .cp-ad__info { border-radius: 12px; background: #1b191f; border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.cp-ad__card-head { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.06); background: #1f1d23; }
.cp-ad h6 { display: flex; align-items: center; gap: 7px; margin: 0 !important; font-size: 14px; font-weight: 700; color: #fff; }
.cp-ad h6 i { color: #fe5b0e; font-size: 16px; }
.cp-ad__card-head p { margin: 3px 0 0 !important; font-size: 12px; line-height: 1.45; color: #868e96; }
.cp-ad__tool { display: flex; gap: 10px; padding: 12px 16px; }
.cp-ad__search { flex: 1; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; background: #141217; border: 1px solid rgba(255,255,255,.07); font-size: 12.5px; color: #6b7078; }
.cp-ad__per { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 8px; background: #141217; border: 1px solid rgba(255,255,255,.07); font-size: 12px; color: #868e96; }
.cp-ad__per b { color: #fff; font-weight: 600; }
.cp-ad__grid { display: grid; align-items: center; gap: 10px; padding: 0 16px; }
.cp-ad__grid--lead { grid-template-columns: 1.15fr 1.45fr 1.1fr .85fr; }
.cp-ad__grid--room { grid-template-columns: 1.3fr 1.1fr .8fr 1fr; }
.cp-ad__lh { height: 34px; background: #17151a; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7078; }
.cp-ad__rows { position: relative; height: 224px; overflow: hidden; }
.cp-ad__row { height: 45px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12.5px; font-weight: 500; color: #cbcccd; }
.cp-ad__row > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ad__row > span > i { flex-shrink: 0; font-size: 14px; color: #6b7078; }
.cp-ad__row > span:first-child { color: #fff; }
.cp-ad__row .is-wa i { color: #25d366; }
.cp-ad__row.is-new { animation: cpRowIn .6s cubic-bezier(.22,1,.36,1) both, cpRowGlow 2.4s ease-out both; }
@keyframes cpRowIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes cpRowGlow { from { background: rgba(254,91,14,.16); } to { background: transparent; } }
.cp-ad__row.is-new > span:first-child::after { content: "Novo"; flex-shrink: 0; padding: 1px 7px; border-radius: 999px; background: rgba(34,197,94,.14); color: #4ade80; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cp-ad__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; color: #868e96; }
.cp-ad__foot b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-ad__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: #fe5b0e; color: #18161b; font-size: 12px; font-weight: 700; }
.cp-ad__aside { display: grid; gap: 12px; }
.cp-ad__stat { display: flex; align-items: center; gap: 12px; padding: 14px; }
.cp-ad__stat-ic { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(254,91,14,.14); color: #fe5b0e; font-size: 19px; }
.cp-ad__stat small { display: block; font-size: 11.5px; color: #868e96; }
.cp-ad__stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
.cp-ad__info header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cp-ad__badge { padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,.14); color: #4ade80; font-size: 10.5px; font-weight: 700; }
.cp-ad__info dl { margin: 0; }
.cp-ad__info dl > div { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cp-ad__info dl > div:last-child { border-bottom: 0; }
.cp-ad__info dt { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7078; }
.cp-ad__info dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.35; color: #e0e0e0; }
.cp-ad__info dd.is-link { color: #fe5b0e; }
.cp-ad__hot { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; background: rgba(240,35,95,.16); color: #ff5c8a; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cp-ad__clk { gap: 9px !important; }
.cp-ad__clk i { position: relative; flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.cp-ad__clk b { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #fe5b0e, #ff126a); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.cp-ad__clk em { width: 14px; font-style: normal; font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.cp-ad__toast { position: absolute; left: 50%; top: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; background: rgba(18,20,22,.96); border: 1px solid rgba(254,91,14,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5); white-space: nowrap; opacity: 0; transform: translate(-50%, -10px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.cp-ad__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cp-ad__toast-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(254,91,14,.18); color: #fe5b0e; font-size: 18px; }
.cp-ad__toast b { display: block; font-size: 14px; color: #fff; line-height: 1.3; }
.cp-ad__toast small { font-size: 12.5px; color: #868e96; }
.cp-ad__toast em { font-style: normal; font-weight: 600; color: #fe5b0e; }

@media (max-width: 1100px) {
  .cap > .cp-leads { grid-template-columns: minmax(0, 1fr); }
  .cp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-steps li { flex-direction: column; gap: 10px; }
}
@media (max-width: 640px) {
  .cp-leads .tm-stage { --w: 520; }
  .cp-steps { grid-template-columns: minmax(0, 1fr); }
  .cp-steps li { flex-direction: row; }
  .cp-leads .cp-win__view { height: 620px; }
  .cp-ad { padding: 18px; font-size: 15px; }
  .cp-ad__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cp-ad__pane { left: 18px; right: 18px; top: 146px; bottom: 18px; grid-template-columns: minmax(0, 1fr); }
  .cp-ad__aside { display: none; }
  .cp-ad__grid--lead { grid-template-columns: 1.35fr 1.1fr .85fr; }
  .cp-ad__grid--lead > :nth-child(2) { display: none; }
  .cp-ad__grid--room { grid-template-columns: 1.3fr 1fr 1fr; }
  .cp-ad__grid--room > :nth-child(3) { display: none; }
  .cp-ad__row { height: 50px; font-size: 14px; }
  .cp-ad__rows { height: 199px; }
  #cpClicks { height: 249px; }
  .cp-ad__card-head p { font-size: 13px; }
  .cp-ad__toast { left: auto; right: 18px; top: 18px; transform: translateY(-10px); }
  .cp-ad__toast.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ad__row.is-new { animation: none; }
}

/* ---------- WebApp: iPhone com a área do aluno e o fluxo real do iOS (campus · modal-app) ---------- */
/* celular fora da caixa, solto em perspectiva */
.media-frame.pw-frame { display: grid; place-items: center; padding: clamp(72px, 7vw, 88px) 24px clamp(48px, 6vw, 72px); overflow: visible; border: 0; background: none; perspective: 1800px; }
.pw-frame .grid-bg { display: none; }
.pw-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(254,91,14,.22), rgba(224,17,95,.1) 55%, transparent); filter: blur(10px); pointer-events: none; }
.pw-frame::after { content: ""; position: absolute; left: 50%; bottom: clamp(18px, 3vw, 34px); width: 62%; height: 46px; transform: translateX(-46%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(8px); pointer-events: none; }
.pw-wrap { position: relative; z-index: 1; width: min(100%, 330px); transform-style: preserve-3d; transform: rotateY(var(--ry, 18deg)) rotateX(var(--rx, 6deg)) rotateZ(-2deg); transition: transform 1s cubic-bezier(.22,1,.36,1); animation: pwFloat 7s ease-in-out infinite; }
.pw-frame:hover .pw-wrap { --ry: 8deg; --rx: 3deg; }
@keyframes pwFloat { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .pw-wrap { animation: none; transition: none; } }
.pw-wrap .pw-url { transform: translateX(-50%) translateZ(50px); }
.pw-wrap .pw-done { transform: translate(-50%, 8px) translateZ(70px); }
.pw-wrap .tm-stage { margin: 0; padding: 0; }
.tm-stage[data-tm="webapp"] { --w: 403; }
.pw-phone { position: relative; width: 403px; padding: 4px; border-radius: 64px; background: linear-gradient(140deg, #6b6b70 0%, #2b2b2e 18%, #48484c 50%, #232325 82%, #5e5e63 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 50px 90px -25px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.7); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Geist", sans-serif; font-size: 16px; line-height: 1.4; color: #fff; text-align: left; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.pw-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2a2d, #67676c); }
.pw-btn--action { left: -3px; top: 132px; height: 32px; }
.pw-btn--up { left: -3px; top: 190px; height: 58px; }
.pw-btn--down { left: -3px; top: 262px; height: 58px; }
.pw-btn--power { right: -3px; top: 214px; height: 92px; background: linear-gradient(270deg, #2a2a2d, #67676c); }
.pw-screen { position: relative; height: 832px; border: 10px solid #050505; border-radius: 60px; overflow: hidden; background: #18161b; isolation: isolate; }
.pw-island { position: absolute; top: 11px; left: 50%; z-index: 20; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.pw-status { position: absolute; top: 0; left: 0; right: 0; z-index: 19; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 4px 30px 0 52px; color: #fff; pointer-events: none; }
.pw-status b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pw-status > span { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.pw-bars { display: flex; align-items: flex-end; gap: 1.6px; height: 12px; }
.pw-bars i { width: 3.2px; border-radius: 1px; background: #fff; }
.pw-bars i:nth-child(1) { height: 4px; } .pw-bars i:nth-child(2) { height: 6.5px; } .pw-bars i:nth-child(3) { height: 9px; } .pw-bars i:nth-child(4) { height: 12px; }
.pw-batt { position: relative; width: 26px; height: 13px; padding: 1.5px; border-radius: 4px; border: 1.2px solid rgba(255,255,255,.45); }
.pw-batt::after { content: ""; position: absolute; right: -4px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.45); }
.pw-batt i { display: block; width: 78%; height: 100%; border-radius: 2px; background: #fff; }
.pw-hi { position: absolute; left: 50%; bottom: 8px; z-index: 19; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: #fff; }

/* área do aluno (Safari ou app web) */
.pw-app { position: absolute; inset: 0; z-index: 2; background: #131116; transform-origin: var(--ox, 318px) var(--oy, 313px); transition: transform .55s cubic-bezier(.3,0,.2,1), opacity .45s, border-radius .55s; }
.pw-view { position: absolute; top: 54px; left: 0; right: 0; bottom: 96px; display: flex; flex-direction: column; overflow: hidden; background: #18161b; font-family: "Geist", var(--font-body); line-height: 1.5; color: #adb5bd; transition: bottom .4s; }
.pw-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 72px; padding: 0 12px; background: #131116; border-bottom: 1px solid rgba(255,255,255,.07); }
.pw-head img { width: 134px; height: 40px; }
.pw-head__r { display: flex; align-items: center; gap: 12px; color: #cbcccd; }
.pw-head__r > i { font-size: 20px; }
.pw-theme { position: relative; display: flex; align-items: center; justify-content: space-between; width: 56px; height: 30px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 12px; color: #868e96; }
.pw-theme em { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2f3338; color: #c7d2fe; font-size: 13px; }
.pw-panel { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #9a9fa5; }
.pw-panel i { font-size: 20px; color: #cbcccd; }
.pw-main { flex: 1; min-height: 0; overflow: hidden; padding: 28px 32px 0; }
/* campus-ui.css: botão "Categorias" (category-pills__toggle) */
.pw-filter { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 10px; background: #191b1e; border: 1px solid #2a2d31; font-size: 14px; font-weight: 600; line-height: 1; color: #e6e7e8; }
.pw-filter i { font-size: 16px; }
.pw-filter i:last-child { margin-right: -4px; color: #868e96; }
.pw-divisor { display: flex; align-items: center; margin: 28px 0 26px; }
.pw-divisor { gap: 16px; }
.pw-divisor::after { content: ""; flex: 1; height: 1px; background: #2a2d31; opacity: .7; }
.pw-divisor h6 { margin: 0 !important; padding: 0; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -.01em; color: #e6e7e8; }
.pw-card { margin-bottom: 16px; border-radius: 15px; overflow: hidden; background: #191b1e; border: 1px solid #1f2225; }
.pw-card__cover img { display: block; width: 100%; height: 163px; object-fit: cover; }
.pw-card__prog { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 45px; margin: -22px 20px 0; padding: 0 18px; border-radius: 10px; background: #18161b; font-size: 10px; color: #9a9fa5; }
.pw-card__prog > i { flex: 0 0 52px; height: 5px; border-radius: 6px; background: #1f2225; overflow: hidden; }
.pw-card__prog em { display: block; height: 100%; background: #fe5b0e; }
.pw-card__prog span:last-child { margin-left: auto; }
.pw-card__body { display: flex; flex-direction: column; align-items: center; padding: 14px 16px; text-align: center; }
.pw-card__body b { font-size: 18px; font-weight: 700; line-height: 1.3; color: #e6e7e8; }
.pw-card__body p { width: 100%; margin: 14px 0 8px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #9a9fa5; }
.pw-card__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 217px; height: 50px; margin: 8px 0; border-radius: 10px; background: #1f2225; border: 1px solid #424547; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #cbcccd; }
.pw-card__btn i { color: #8b8c8e; }
.pw-card__body small { font-size: 13px; color: #868e96; }
.pw-nav { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 66px; padding-top: 6px; background: #18161b; border-top: 1px solid rgba(255,255,255,.06); transition: height .4s; }
.pw-nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 500; color: #9ca3af; }
.pw-nav b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 19px; font-weight: 400; }
.pw-nav .is-active { color: #fe5b0e; }
.pw-nav .is-active b { width: 36px; height: 36px; margin: 2px 0; background: #fe5b0e; color: #18161b; }
.pw-safari { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 96px; padding: 0 14px; background: linear-gradient(transparent, rgba(10,9,12,.7) 55%); transition: transform .4s cubic-bezier(.3,0,.2,1); }
.pw-sbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pw-sb { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: rgba(44,44,48,.72); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.35); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); color: #fff; font-size: 26px; transition: background .2s; }
.pw-sb--url { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 6px; width: auto; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.pw-sb--url i { font-size: 12px; color: rgba(255,255,255,.6); }
.pw-sb--more { font-size: 24px; }
.pw-phone.is-menu .pw-sb--more { background: rgba(90,90,96,.8); }
.pw-shareico { display: inline-block; width: 21px; height: 21px; flex-shrink: 0; vertical-align: -4px; }
/* menu do ⋯ (vidro, abre a partir do botão) */
.pw-menu { position: absolute; right: 14px; bottom: 94px; z-index: 6; width: 262px; padding: 6px; border-radius: 26px; background: rgba(40,40,44,.86); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); transform-origin: calc(100% - 24px) calc(100% + 30px); transform: scale(.4); opacity: 0; visibility: hidden; transition: transform .35s cubic-bezier(.3,1.3,.5,1), opacity .25s, visibility 0s .35s; }
.pw-menu ul { margin: 0; padding: 0; list-style: none; }
.pw-menu li { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 14px; border-radius: 18px; font-size: 16px; color: #fff; transition: background .2s; }
.pw-menu li i { font-size: 20px; }
.pw-menu li .pw-shareico { margin-right: -1px; }
.pw-menu li.is-hit { background: rgba(255,255,255,.14); }
.pw-phone.is-menu .pw-menu { transform: none; opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.3,1.3,.5,1), opacity .25s; }
.pw-dots { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; margin: 0 2px; border-radius: 9px; background: rgba(255,255,255,.12); font-size: 9px; letter-spacing: 1px; line-height: 1; vertical-align: 1px; }
.pw-phone.is-standalone .pw-view { bottom: 0; }
.pw-phone.is-standalone .pw-nav { height: 86px; }
.pw-phone.is-standalone .pw-safari { transform: translateY(110%); }

/* modal real no iPhone: sem prévia e com os 3 passos */
.pw-ov { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; padding: 16px; background: rgba(0,0,0,.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.pw-modal { position: relative; width: 100%; padding: 22px 16px 20px; border-radius: 24px; overflow: hidden; background: linear-gradient(145deg, #1a1a22, #0f0f14); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 40px 100px rgba(255,122,0,.15); font-family: "Geist", var(--font-body); color: #fff; transform: translateY(15px) scale(.98); opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.pw-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #fe5b0e; }
.pw-modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 20px; }
/* preview do ícone, como no modal de instalação do campus (campus/inc/modal-app.php) */
.pw-prev { position: relative; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 52px); margin-bottom: 16px; padding: 12px 14px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.pw-prev::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); animation: pwShine 3s infinite; }
@keyframes pwShine { 0% { left: -100%; } 100% { left: 100%; } }
.pw-prev__ic { position: relative; flex-shrink: 0; }
.pw-prev__ic img { display: block; width: 52px; height: 52px; border-radius: 13px; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.1); }
.pw-prev__ic i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fe5b0e; border: 2px solid #0f0f14; color: #18161b; font-size: 12px; animation: pwPulse 2s ease infinite; }
@keyframes pwPulse { 50% { transform: scale(1.1); } }
.pw-prev b { display: block; margin-bottom: 3px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.pw-prev small { display: block; font-size: 12px; color: #8b8c8e; }
.pw-modal__t { margin: 0 0 10px !important; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.pw-modal__d { margin: 0 !important; padding-right: 36px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); }
.pw-steps { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.pw-steps p { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.85); }
.pw-steps b { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #fe5b0e; color: #18161b; font-size: 12px; }
.pw-steps .pw-shareico { width: 17px; height: 17px; margin: 0 2px; color: #fe5b0e; }
.pw-phone.is-modal .pw-ov { opacity: 1; visibility: visible; transition: opacity .35s; }
.pw-phone.is-modal .pw-modal { transform: none; opacity: 1; }

/* folha de compartilhar e "Adicionar à Tela de Início" */
.pw-sheet, .pw-add { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 18px 16px 40px; border-radius: 16px 16px 0 0; background: #1c1c1e; box-shadow: 0 -20px 60px rgba(0,0,0,.5); transform: translateY(102%); transition: transform .45s cubic-bezier(.3,0,.2,1); }
.pw-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pw-sheet__head img, .pw-add__box img { width: 48px; height: 48px; border-radius: 11px; }
.pw-sheet__head span, .pw-add__box span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pw-sheet__head b, .pw-add__box b { font-size: 16px; font-weight: 600; }
.pw-sheet__head small, .pw-add__box small { font-size: 13px; color: rgba(235,235,245,.6); }
.pw-sheet__head > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(118,118,128,.24); color: rgba(235,235,245,.6); font-size: 18px; }
.pw-sheet ul { margin: 0 0 14px; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; background: #2c2c2e; }
.pw-sheet li { display: flex; align-items: center; justify-content: space-between; height: 50px; margin-left: 16px; padding-right: 16px; border-bottom: .5px solid rgba(84,84,88,.65); font-size: 17px; transition: background .2s; }
.pw-sheet li:last-child { border-bottom: 0; }
.pw-sheet li i { font-size: 21px; }
.pw-sheet li.is-hit { margin-left: 0; padding-left: 16px; background: #3a3a3c; }
.pw-add { top: 60px; padding-top: 0; }
.pw-add__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; margin: 0 -2px 16px; font-size: 16px; }
.pw-add__bar span { color: #0a84ff; }
.pw-add__bar b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pw-add__bar .pw-add__ok { font-weight: 600; padding: 4px 6px; border-radius: 8px; transition: background .2s; }
.pw-add__bar .pw-add__ok.is-hit { background: rgba(10,132,255,.18); }
.pw-add__box { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: #2c2c2e; }
.pw-add__box img { width: 60px; height: 60px; border-radius: 14px; }
.pw-add__row { justify-content: space-between; font-size: 17px; }
.pw-switch { position: relative; width: 51px; height: 31px; border-radius: 16px; background: #30d158; }
.pw-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.pw-add__note { margin: 0 6px !important; font-size: 13px; line-height: 1.4; color: rgba(235,235,245,.6); }
.pw-phone.is-share .pw-sheet, .pw-phone.is-add .pw-add { transform: none; }

/* tela de início */
.pw-home { position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 55% at 15% 8%, #ff7a2f, transparent 60%), radial-gradient(80% 55% at 95% 45%, #e0245e, transparent 62%), radial-gradient(90% 60% at 30% 100%, #5b1a8c, transparent 65%), #1a0f1f; opacity: 0; transform: scale(1.06); transition: opacity .45s, transform .55s cubic-bezier(.3,0,.2,1); }
.pw-grid { display: grid; grid-template-columns: repeat(4, 62px); justify-content: space-between; row-gap: 24px; padding: 76px 25px 0; }
.pw-ico { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pw-ico > i, .pw-ico > img, .pw-dock i { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; background: var(--bg); color: var(--c, #fff); font-size: var(--s, 32px); font-style: normal; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 0 0 .5px rgba(255,255,255,.18); }
.pw-ico > i::before, .pw-dock i::before { display: block; line-height: 1; }
.pw-cal { display: flex !important; flex-direction: column; justify-content: flex-start; gap: 0; padding-top: 7px; background: #fff !important; color: #111 !important; }
.pw-ico .pw-cal small { font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; color: #ff3b30; text-shadow: none; }
.pw-cal b { margin-top: 1px; font-size: 33px; font-weight: 300; line-height: 1; }
.pw-photos { background: #fff !important; }
.pw-photos::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, #f43f5e, #f97316, #facc15, #84cc16, #22d3ee, #3b82f6, #a855f7, #ec4899, #f43f5e); -webkit-mask: radial-gradient(circle, transparent 0 5px, #000 5.5px), repeating-conic-gradient(#000 0 30deg, transparent 30deg 45deg); -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 0 5px, #000 5.5px) intersect, repeating-conic-gradient(#000 0 30deg, transparent 30deg 45deg); }
.pw-notes { background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(60,60,67,.18) 9px 10px) 0 22px / 100% calc(100% - 22px) no-repeat, linear-gradient(#ffd60a 0 18px, #fff 18px) !important; }
.pw-notes::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 3px; background: repeating-linear-gradient(90deg, #c7a500 0 2px, transparent 2px 5px); }
.pw-calc { display: grid !important; grid-template-columns: repeat(3, 12px); gap: 4px; align-content: center; justify-content: center; background: linear-gradient(#3a3a3c, #1c1c1e) !important; }
.pw-calc em { width: 12px; height: 12px; border-radius: 50%; background: #a5a5aa; }
.pw-calc em:nth-child(3n) { background: #ff9f0a; }
.pw-calc em:nth-child(7), .pw-calc em:nth-child(8) { background: #5a5a5f; }
.pw-ico small { font-size: 12px; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pw-ticon { opacity: 0; transform: scale(.3); transition: opacity .3s, transform .55s cubic-bezier(.34,1.56,.64,1); }
.pw-ticon img { object-fit: cover; transition: filter .15s, transform .15s; }
.pw-search { position: absolute; left: 50%; bottom: 128px; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; transform: translateX(-50%); border-radius: 15px; background: rgba(255,255,255,.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; font-weight: 500; }
.pw-dock { position: absolute; left: 10px; right: 10px; bottom: 12px; display: grid; grid-template-columns: repeat(4, 62px); justify-content: space-between; padding: 16px 15px; border-radius: 36px; background: rgba(255,255,255,.2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.pw-phone.is-home .pw-home { opacity: 1; transform: none; }
.pw-phone.is-home .pw-app { opacity: 0; transform: scale(.16); border-radius: 60px; }
.pw-phone.is-installed .pw-ticon { opacity: 1; transform: none; }
.pw-phone.is-press-icon .pw-ticon img { transform: scale(.9); filter: brightness(.7); }

/* toque */
.pw-tap { position: absolute; z-index: 18; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.75); opacity: 0; pointer-events: none; }
.pw-tap.is-on { animation: pwTap .55s ease-out; }
@keyframes pwTap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }

/* selos ao redor do celular */
.pw-url, .pw-done { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; background: rgba(18,16,22,.86); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .8rem; font-weight: 500; color: #e9e9ec; white-space: nowrap; }
.pw-url { top: -48px; left: 50%; transform: translateX(-50%); }
.pw-url i { color: #fe5b0e; }
.pw-done { bottom: 22%; left: 50%; opacity: 0; transform: translate(-50%, 8px); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); }
.pw-done i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fe5b0e; color: #18161b; font-size: 13px; }
.pw-wrap.is-done .pw-done { opacity: 1; transform: translate(-50%, 0) translateZ(70px); }

@media (max-width: 640px) {
  .pw-wrap { width: min(100%, 270px); --ry: 12deg; --rx: 4deg; }
  .pw-url { top: -42px; font-size: .72rem; }
  .pw-done { font-size: .72rem; }
}

/* ---------- Tucano MCP: conversa simulada com um assistente que usa as ferramentas reais do MCP ---------- */
.mc-clients { position: relative; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.mc-cl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; list-style: none; }
.mc-cl li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mc-cl__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(160deg, #221e24, #151217); border: 1px solid var(--line-strong); color: var(--c); font-size: 28px; box-shadow: 0 16px 30px -18px #000; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s; }
.mc-cl b { font-size: .8rem; font-weight: 500; color: var(--muted); transition: color .3s; }
.mc-cl li.is-on .mc-cl__ic { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--c) 55%, transparent); }
.mc-cl li.is-on b { color: var(--text); }
.mc-wires { display: block; width: 100%; height: 64px; margin-top: 4px; overflow: visible; }
.mc-wires path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mc-wires__base path { stroke: rgba(255,255,255,.1); }
.mc-wires__flow path { stroke: #ff7a2e; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: .35; animation: mcFlow 2.6s linear infinite; }
.mc-wires__flow path:nth-child(2) { animation-delay: -.5s; } .mc-wires__flow path:nth-child(3) { animation-delay: -1s; } .mc-wires__flow path:nth-child(4) { animation-delay: -1.5s; } .mc-wires__flow path:nth-child(5) { animation-delay: -2s; }
.mc-wires__flow path.is-on { opacity: 1; stroke-width: 2.5; filter: drop-shadow(0 0 4px #ff7a2e); }
@keyframes mcFlow { to { stroke-dashoffset: 0; } }
.mc-plug { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0 0 18px; padding: 0 16px 0 10px; border-radius: 999px; background: #18141a; border: 1px solid rgba(255,122,46,.4); box-shadow: 0 0 0 6px rgba(255,101,20,.06), 0 14px 30px -12px rgba(255,80,20,.45); font-size: .82rem; font-weight: 600; color: var(--text); }
.mc-plug img { width: 20px; }
/* janela no estilo dos apps (ChatGPT / Claude), com o tema trocando conforme o app */
.mc { --bg: #212121; --side: #181818; --bubble: #303030; --tx: #ececec; --mut: #a3a3a3; --ln: rgba(255,255,255,.08); --acc: #ffffff; --card: #2a2a2a;
  max-width: 1040px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #0f0f10; border: 1px solid var(--line-strong); box-shadow: 0 50px 100px -40px #000; font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--tx); }
.mc.is-claude { --bg: #262624; --side: #1f1e1d; --bubble: #141413; --tx: #f5f4ee; --mut: #a6a39b; --ln: rgba(255,255,255,.08); --acc: #d97757; --card: #30302e; }
.mc-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: #141415; border-bottom: 1px solid rgba(255,255,255,.06); }
.mc-dots { display: flex; gap: 6px; }
.mc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mc-dots i:nth-child(2) { background: #febc2e; } .mc-dots i:nth-child(3) { background: #28c840; }
.mc-url { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: #9b9b9b; }
.mc-url em { font-style: normal; }
.mc-state { margin-left: auto; font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8b8b8b; }
.mc-state.is-busy { color: #ff8a4c; }
.mc-tabs { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #141415; border-bottom: 1px solid rgba(255,255,255,.06); }
.mc-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); font-size: .8rem; font-weight: 500; color: #a3a3a3; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.mc-tab i { font-size: 1rem; }
.mc-tab[data-app="claude"] i { color: #d97757; }
.mc.is-gpt .mc-tab[data-app="gpt"], .mc.is-claude .mc-tab[data-app="claude"] { background: #f4f4f4; border-color: #f4f4f4; color: #111; }
.mc.is-claude .mc-tab[data-app="claude"] { background: #2c2b29; border-color: rgba(217,119,87,.55); color: #f5f4ee; }
.mc-linked { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .7rem; color: #8b8b8b; }
.mc-linked i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.mc-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 560px; background: var(--bg); transition: background .4s; }
.mc-side { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 14px 10px; background: var(--side); transition: background .4s; }
.mc-brand { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px; margin-bottom: 8px; color: var(--tx); }
.mc-brand > i { font-size: 1rem; color: var(--mut); }
.mc-brand__gpt i { font-size: 1.5rem; }
.mc-brand__claude { display: none; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; }
.mc.is-claude .mc-brand__gpt { display: none; }
.mc.is-claude .mc-brand__claude { display: block; }
.mc-nav { display: grid; gap: 2px; }
.mc-nav span { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: .8rem; color: var(--tx); }
.mc-nav i { font-size: 1rem; color: var(--mut); }
.mc-side__label { margin: 14px 8px 4px; font-size: .68rem; color: var(--mut); }
.mc-recent { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mc-recent li { height: 32px; padding: 0 8px; border-radius: 8px; font-size: .78rem; line-height: 32px; color: var(--tx); opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-recent li.is-on { background: rgba(255,255,255,.08); opacity: 1; }
.mc-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px; }
.mc-user span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1d181d; border: 1px solid rgba(255,122,46,.35); font-size: .66rem; font-weight: 700; color: #fff; }
.mc-user span img { width: 16px; }
.mc-user b { font-size: .78rem; font-weight: 500; line-height: 1.2; }
.mc-user small { display: block; font-size: .66rem; font-weight: 400; color: var(--mut); }
.mc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mc-head { display: flex; align-items: center; justify-content: space-between; height: 52px; flex-shrink: 0; padding: 0 20px; }
.mc-head b { display: inline-flex; align-items: center; gap: 2px; font-size: .98rem; font-weight: 600; }
.mc.is-claude .mc-head b { font-size: .86rem; font-weight: 500; }
.mc-head b i { font-size: 1rem; color: var(--mut); }
.mc.is-claude .mc-head b i { display: none; }
.mc-head > span { display: flex; gap: 14px; font-size: 1rem; color: var(--mut); }
.mc-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 20px 14px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.mc-msg { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; animation: mcIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes mcIn { from { opacity: 0; transform: translateY(8px); } }
.mc-msg.is-user { align-items: flex-end; }
.mc-msg.is-user p { max-width: 80%; margin: 0; padding: 10px 16px; border-radius: 20px; background: var(--bubble); font-size: .88rem; line-height: 1.45; }
.mc.is-claude .mc-msg.is-user p { border-radius: 14px; }
.mc-av { display: grid; place-items: center; width: 26px; height: 26px; font-size: 1.15rem; color: var(--tx); }
.mc.is-claude .mc-av { color: #d97757; font-size: 1.3rem; }
.mc-msg.is-thinking .mc-av i { animation: mcGpt 1.1s ease-in-out infinite; }
.mc.is-claude .mc-msg.is-thinking .mc-av i { animation: mcSpark 1.6s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes mcGpt { 50% { transform: scale(.78); opacity: .55; } }
@keyframes mcSpark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.82); } 100% { transform: rotate(360deg) scale(1); } }
.mc-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-body p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--tx); }
.mc.is-claude .mc-body p { font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: .92rem; }
.mc-body p b { font-weight: 600; }
.mc-tc { border-radius: 14px; background: var(--card); border: 1px solid var(--ln); overflow: hidden; font-size: .76rem; animation: mcIn .4s cubic-bezier(.22,1,.36,1) both; }
.mc-tc__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.mc-tc__top img { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: #18141a; }
.mc-tc__top b { font-weight: 600; }
.mc-tc__top small { margin-left: auto; font-size: .68rem; color: var(--mut); }
.mc-tc__label { display: flex; justify-content: space-between; padding: 2px 12px 8px; color: var(--mut); font-size: .72rem; border-bottom: 1px solid var(--ln); }
.mc-tc__call { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; }
.mc-tc__call code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--tx); }
.mc-tc__call > i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--acc); animation: mcSpin .8s linear infinite; }
.mc-tc.is-done .mc-tc__call > i { width: auto; height: auto; border: 0; animation: none; color: #34d399; font-size: .95rem; }
.mc-tc__res { display: none; margin: 0 10px 10px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.25); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-tc__res em { font-style: normal; margin-right: 8px; font-family: ui-sans-serif, system-ui, sans-serif; }
.mc-tc.is-done .mc-tc__res { display: block; animation: mcIn .35s both; }
@keyframes mcSpin { to { transform: rotate(360deg); } }
.mc-caret::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--tx); vertical-align: 1px; animation: blink 1s infinite; }
.mc-wait { display: inline-flex; gap: 4px; padding: 4px 0; }
.mc-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--mut); animation: mcDot 1.2s infinite; }
.mc-wait i:nth-child(2) { animation-delay: .15s; } .mc-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes mcDot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.mc-res { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--ln); animation: mcIn .4s cubic-bezier(.22,1,.36,1) both; }
.mc-res__ic { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(52,211,153,.14); color: #34d399; font-size: 1rem; }
.mc-res div { flex: 1; min-width: 0; }
.mc-res b { display: block; font-size: .84rem; font-weight: 600; }
.mc-res small { display: block; font-size: .72rem; color: var(--mut); }
.mc-res em { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; background: rgba(52,211,153,.14); color: #34d399; font-style: normal; font-size: .68rem; font-weight: 600; }
.mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; animation: mcIn .4s cubic-bezier(.22,1,.36,1) both; }
.mc-stats span { padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--ln); }
.mc-stats small { display: block; font-size: .68rem; color: var(--mut); }
.mc-stats b { display: block; margin-top: 2px; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.mc-stats em { font-style: normal; font-size: .68rem; font-weight: 600; color: #34d399; }
.mc-composer { width: calc(100% - 40px); max-width: 640px; margin: 0 auto; padding: 12px 12px 10px 16px; border-radius: 24px; background: var(--bubble); border: 1px solid var(--ln); transition: background .4s; }
.mc.is-claude .mc-composer { border-radius: 18px; background: #30302e; }
.mc-composer__txt { display: block; min-height: 22px; font-size: .88rem; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-ph { color: var(--mut); }
.mc-composer__row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mc-composer__row > i { font-size: 1.15rem; color: var(--mut); }
.mc-conn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 6px; border-radius: 999px; border: 1px solid var(--ln); font-size: .74rem; font-weight: 500; color: var(--tx); }
.mc-conn img { width: 16px; }
.mc-conn i { color: var(--mut); }
.mc-send { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: rgba(255,255,255,.18); color: #111; font-size: 1rem; transition: background .25s; }
.mc.is-claude .mc-send { border-radius: 9px; background: rgba(217,119,87,.4); color: #fff; }
.mc-composer.is-typing .mc-send { background: #f4f4f4; }
.mc.is-claude .mc-composer.is-typing .mc-send { background: #d97757; }
.mc-disc { margin: 8px 0 10px; text-align: center; font-size: .66rem; color: var(--mut); }
.mc-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 1040px; margin: 18px auto 0; }
.mc-strip small { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-bottom: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-strip small i { color: #ff7a2e; }
.mc-strip span { padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; color: var(--text-2); }
.mc-strip b { padding: 4px 10px; border-radius: 7px; background: rgba(254,91,14,.12); border: 1px dashed rgba(254,91,14,.45); font-size: .74rem; font-weight: 600; color: #ff9a62; }
.mc-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: .86rem; color: var(--muted); text-align: center; }
.mc-note i { color: #ff7a2e; }
@media (max-width: 860px) {
  .mc-app { grid-template-columns: minmax(0, 1fr); }
  .mc-side { display: none; }
}
@media (max-width: 480px) {
  .mc { border-radius: 16px; }
  .mc-app { height: 580px; }
  .mc-linked { display: none; }
  .mc-thread { padding: 6px 14px 12px; }
  .mc-composer { width: calc(100% - 24px); }
  .mc-msg.is-user p { max-width: 90%; }
  .mc-stats { gap: 6px; }
  .mc-stats span { padding: 8px; }
  .mc-stats b { font-size: .84rem; }
  .mc-cl__ic { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; }
  .mc-cl b { font-size: .62rem; text-align: center; }
  .mc-wires { height: 44px; }
  .mc-strip span { display: none; }
  .mc-res { flex-wrap: wrap; }
  .mc-res div { flex: 1 1 calc(100% - 46px); }
  .mc-res em { margin-left: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-wires__flow { display: none; }
  .mc-msg, .mc-tc, .mc-res, .mc-stats { animation: none; }
  .mc-msg.is-thinking .mc-av i { animation: none; }
}

/* ---------- Implementação e suporte: grupo do WhatsApp ao vivo (estilo iPhone, modo escuro) + treinamento ---------- */
#suporte .split-media { min-width: 0; }
.sp { position: relative; width: 100%; max-width: 400px; padding-bottom: 78px; }
.sp-chat { --wa-in: #1f2c34; --wa-out: #144d37; border-radius: 38px; overflow: hidden; background: #0b141a; border: 6px solid #121212; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -30px #000; font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; color: #e9edef; }
.sp-status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 6px 26px 0 30px; background: #111b21; font-size: .78rem; }
.sp-status b { font-weight: 600; }
.sp-status span { display: flex; gap: 5px; font-size: .9rem; }
.sp-head { display: flex; align-items: center; gap: 9px; padding: 6px 14px 10px 6px; background: #111b21; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-head > i { font-size: 1.6rem; color: #00a884; }
.sp-gav { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #1d181d; border: 1px solid rgba(255,122,46,.4); }
.sp-gav img { width: 19px; }
.sp-head > div { flex: 1; min-width: 0; }
.sp-head strong { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-head small { display: block; font-size: .7rem; color: #8696a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-head small.is-typing { color: #00a884; }
.sp-icons { display: flex; gap: 18px; font-size: 1.2rem; color: #00a884; }
.sp-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 372px; padding: 10px 12px 8px; overflow: hidden;
  background: #0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M48 12l6 10h-12z'/%3E%3Cpath d='M86 14c4-6 12-2 8 4l-8 8-8-8c-4-6 4-10 8-4z'/%3E%3Crect x='12' y='56' width='16' height='12' rx='3'/%3E%3Cpath d='M52 52q8 8 16 0'/%3E%3Ccircle cx='96' cy='62' r='3'/%3E%3Cpath d='M20 98l8-8 8 8'/%3E%3Cpath d='M60 92h14M67 85v14'/%3E%3Cpath d='M92 96a8 8 0 1 0 12 0'/%3E%3C/svg%3E") 0 0 / 120px 120px;
  -webkit-mask-image: linear-gradient(transparent, #000 36px); mask-image: linear-gradient(transparent, #000 36px); }
.sp-sys { align-self: center; max-width: 86%; margin: 2px 0 6px; padding: 5px 10px; border-radius: 8px; background: #182229; font-size: .66rem; line-height: 1.35; color: #ffd279; text-align: center; flex-shrink: 0; }
.sp-sys i { margin-right: 3px; }
.sp-day { align-self: center; margin: 0 0 4px; padding: 4px 10px; border-radius: 8px; background: #182229; font-size: .68rem; color: #8696a0; flex-shrink: 0; }
.sp-row { display: flex; align-items: flex-end; gap: 6px; flex-shrink: 0; margin-top: 5px; animation: spIn .35s cubic-bezier(.22,1,.36,1) both; }
.sp-row.cont { margin-top: 0; }
.sp-row.me { justify-content: flex-end; }
@keyframes spIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sp-av { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; font-size: .62rem; font-weight: 700; color: #0b141a; }
.sp-row.cont .sp-av { visibility: hidden; }
.sp-bub { position: relative; max-width: 80%; padding: 5px 8px 4px; border-radius: 9px; background: var(--wa-in); font-size: .82rem; line-height: 1.38; }
.sp-row:not(.cont) .sp-bub { border-bottom-left-radius: 2px; }
.sp-row:not(.cont):not(.me) .sp-bub::before { content: ""; position: absolute; left: -6px; bottom: 0; border-right: 7px solid var(--wa-in); border-top: 9px solid transparent; }
.sp-row.me .sp-bub { background: var(--wa-out); border-bottom-left-radius: 9px; border-bottom-right-radius: 2px; }
.sp-row.me .sp-bub::after { content: ""; position: absolute; right: -6px; bottom: 0; border-left: 7px solid var(--wa-out); border-top: 9px solid transparent; }
.sp-bub > b { display: block; margin-bottom: 1px; font-size: .74rem; font-weight: 600; }
.sp-bub > b em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: .68rem; color: #8696a0; }
.sp-t { float: right; margin: 7px 0 -3px 10px; font-size: .62rem; color: rgba(233,237,239,.55); white-space: nowrap; }
.sp-row.me .sp-t { color: rgba(233,237,239,.68); }
.sp-t i { margin-left: 2px; color: #53bdeb; font-size: .82rem; vertical-align: -2px; }
.sp-list { display: grid; gap: 5px; margin: 3px 0 1px; padding: 0; list-style: none; }
.sp-list li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #8696a0; transition: color .3s; }
.sp-list li i { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #3b4a54; font-size: .7rem; color: transparent; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.sp-list li.is-done { color: #e9edef; }
.sp-list li.is-done i { background: #00a884; border-color: #00a884; color: #0b141a; transform: scale(1.06); }
.sp-doc { display: flex; align-items: center; gap: 10px; min-width: 210px; margin: 2px 0 2px; padding: 8px 10px; border-radius: 7px; background: rgba(0,0,0,.22); }
.sp-doc > i { display: grid; place-items: center; width: 30px; height: 36px; flex-shrink: 0; border-radius: 4px; background: #c9463f; color: #fff; font-size: .62rem; font-style: normal; font-weight: 700; }
.sp-doc b { display: block; font-size: .78rem; font-weight: 500; }
.sp-doc small { display: block; font-size: .66rem; color: #8696a0; }
.sp-react { position: absolute; left: 8px; bottom: -13px; display: flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 999px; background: #1f2c34; border: 2px solid #0b141a; font-size: .74rem; animation: spPop .4s cubic-bezier(.34,1.56,.64,1) both; }
.sp-row.has-react { margin-bottom: 14px; }
@keyframes spPop { from { transform: scale(0); } }
.sp-typing { display: inline-flex; gap: 4px; padding: 6px 4px; }
.sp-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: mcDot 1.2s infinite; }
.sp-typing i:nth-child(2) { animation-delay: .15s; } .sp-typing i:nth-child(3) { animation-delay: .3s; }
.sp-input { display: flex; align-items: center; gap: 12px; padding: 8px 14px 16px 12px; background: #111b21; font-size: 1.25rem; color: #e9edef; }
.sp-field { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 10px 0 14px; border-radius: 18px; background: #1f2c34; font-size: .84rem; color: #8696a0; }
.sp-field i { font-size: 1.05rem; }
.sp-train { position: absolute; left: -28px; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; width: 300px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(24,20,26,.92); border: 1px solid var(--line-strong); box-shadow: 0 24px 50px -18px #000; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sp-train img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; object-fit: cover; object-position: 8% 30%; }
.sp-train > div { flex: 1; min-width: 0; }
.sp-train small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ff8a4c; }
.sp-train b { display: block; margin: 2px 0 7px; font-size: .86rem; font-weight: 600; color: var(--text); }
.sp-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.sp-bar i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--grad); }
.sp-train em { display: block; margin-top: 6px; font-style: normal; font-size: .7rem; color: var(--muted); }
@media (max-width: 900px) { .sp-train { left: 0; } }
@media (max-width: 480px) {
  .sp { padding-bottom: 0; }
  .sp-chat { border-radius: 30px; border-width: 5px; }
  .sp-train { position: relative; left: auto; width: 100%; margin-top: 12px; }
  .sp-body { height: 350px; }
  .sp-doc { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sp-row, .sp-react { animation: none; } }

/* switch de tema do header do campus (campus/assets/css/custom.css .campus-theme-switch), em em para caber em cada mockup */
.mts { position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-sizing: border-box; width: 3.7333em; height: 2em; padding: 0 .5333em; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); box-shadow: inset 0 1px 2px rgba(0,0,0,.18); font-style: normal; line-height: 1; transition: background-color .3s, border-color .3s; }
.mts > i { font-size: .8em; color: #868e96; opacity: .75; }
.mts em { position: absolute; top: .2em; left: .2em; width: 1.4667em; height: 1.4667em; border-radius: 50%; background: #2f3338; box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 12px rgba(199,210,254,.18); transform: translateX(1.6em); transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .3s, box-shadow .3s; }
.mts em i { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8667em; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.mts em i:first-child { color: #f59e0b; opacity: 0; transform: rotate(90deg) scale(.4); }
.mts em i:last-child { color: #c7d2fe; }
.is-light .mts { border-color: rgba(17,19,22,.1); background: rgba(17,19,22,.05); }
.is-light .mts em { transform: none; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.04); }
.is-light .mts em i:first-child { opacity: 1; transform: none; }
.is-light .mts em i:last-child { opacity: 0; transform: rotate(-90deg) scale(.4); }
.app-actions .mts { font-size: 7.5px; }
.ap-acts .mts { font-size: 6.5px; }
.cz-acts .mts { font-size: 15px; margin-right: 24px; }
/* troca de tema na demo: círculo abrindo a partir do switch, como no campus (View Transitions) */

/* XP por ação: no desktop a coluna de texto é estreita, então 2 colunas para cada ação caber numa linha */
@media (min-width: 1101px) { .gm-xp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* loja: tipos de produto, no mesmo desenho das pílulas Digital/Físico da loja */
.gm-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; grid-column: 1 / -1; }
.gm-kinds li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.gm-kinds i { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(254,91,14,.1); border: 1px solid rgba(254,91,14,.22); color: #fe5b0e; font-size: 17px; }
.gm-kinds span { display: grid; gap: 2px; min-width: 0; }
.gm-kinds b { font-size: .88rem; font-weight: 600; color: var(--text); }
.gm-kinds small { font-size: .78rem; color: var(--muted); }
@media (max-width: 640px) { .gm-kinds { display: none; } }

/* economia: informação discreta, só uma linha */
.plan-save { display: flex; align-items: center; gap: 7px; margin: 18px 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.plan-save i { font-size: 1rem; color: #4ade80; }
.plan-save b { font-weight: 600; color: #4ade80; }
.plan-save.is-ref i { color: var(--muted); }

/* Captação -> WebApp: a dobra do celular já tem respiro próprio (pílula da URL acima do aparelho) */
#mobile { padding-top: 16px; }

/* comunidade: recursos reais agrupados em três frentes */
.comm-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.comm-group { padding: 22px 22px 8px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border: 1px solid var(--line); }
.comm-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--text); }
.comm-group h3 span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 17px; }
.comm-group ul { display: grid; }
.comm-group li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.comm-group li:first-child { border-top: 0; }
.comm-group li > i { flex-shrink: 0; margin-top: 1px; font-size: 18px; color: #ff7a2e; }
.comm-group strong { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.comm-group small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) {
  .comm-groups { grid-template-columns: 1fr; }
  .comm-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .comm-group li:nth-child(2) { border-top: 0; }
}
@media (max-width: 640px) {
  .comm-group { padding: 18px 18px 4px; }
  .comm-group ul { grid-template-columns: 1fr; }
  .comm-group li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* fechamento: a régua de onde a área comum termina e a Tucano continua */
.fin-track { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: stretch; max-width: 920px; margin: 0 auto 40px; text-align: left; border-radius: 20px; background: rgba(10,9,12,.55); border: 1px solid var(--line); overflow: hidden; }
.fin-track small { display: block; margin-bottom: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fin-common { padding: 22px 22px 20px; }
.fin-common small { color: var(--muted); white-space: nowrap; }
.fin-common ul { display: grid; gap: 8px; }
.fin-common li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.fin-common li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.fin-mark { display: flex; flex-direction: column; align-items: center; width: 34px; padding: 14px 0; }
.fin-mark::before, .fin-mark::after { content: ""; flex: 1; border-left: 1px dashed rgba(255,255,255,.22); }
.fin-mark span { padding: 10px 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fin-tucano { padding: 22px; background: radial-gradient(120% 140% at 0% 50%, rgba(254,91,14,.14), transparent 60%); }
.fin-tucano small { color: #ff8a4c; }
.fin-tucano ul { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-tucano li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.35s + var(--i) * .06s); }
.fin-tucano li i { font-size: 1rem; color: #ff7a2e; }
.fin-tucano li.is-more { background: var(--grad); border: 0; padding: 8px 13px; color: #fff; font-weight: 600; }
.fin-tucano li.is-more i { color: #fff; }
.final-box.in .fin-tucano li { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .fin-track { grid-template-columns: 1fr; }
  .fin-common ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .fin-mark { flex-direction: row; width: auto; padding: 0 18px; }
  .fin-mark::before, .fin-mark::after { border-left: 0; border-top: 1px dashed rgba(255,255,255,.22); }
  .fin-mark span { padding: 0 10px; writing-mode: horizontal-tb; transform: none; }
  .fin-tucano { padding: 18px; }
  .fin-tucano li { font-size: .8rem; padding: 6px 10px; }
}

/* ---------- Performance: seções fora da tela não calculam estilo/layout até chegarem perto ----------
   content-visibility pula o trabalho das seções longe da tela. A altura reservada (contain-intrinsic-size, só o
   conteúdo, sem o padding) foi medida em cada faixa de largura; depois de aparecer, o navegador guarda a altura real.
   Se mudar muito o tamanho de uma seção, meça de novo (ou deixe: os links internos já renderizam tudo antes de rolar). */
main > section:not(.hero), .footer { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.cv-off main > section:not(.hero), .cv-off .footer { content-visibility: visible; }
@media (max-width: 640px) {
  #funcionalidades { contain-intrinsic-size: auto 1497px; }
  #personalizacao { contain-intrinsic-size: auto 1011px; }
  #clientes { contain-intrinsic-size: auto 558px; }
  #ia { contain-intrinsic-size: auto 3434px; }
  #gamificacao { contain-intrinsic-size: auto 1243px; }
  main > .qstrip { contain-intrinsic-size: auto 597px; }
  #comunidade { contain-intrinsic-size: auto 2494px; }
  #captacao { contain-intrinsic-size: auto 2326px; }
  #mobile { contain-intrinsic-size: auto 1282px; }
  #notify { contain-intrinsic-size: auto 979px; }
  #score { contain-intrinsic-size: auto 1487px; }
  #recursos { contain-intrinsic-size: auto 2540px; }
  #integracoes { contain-intrinsic-size: auto 1763px; }
  #mcp { contain-intrinsic-size: auto 1390px; }
  #suporte { contain-intrinsic-size: auto 1227px; }
  #depoimentos { contain-intrinsic-size: auto 718px; }
  #planos { contain-intrinsic-size: auto 3677px; }
  #avaliacoes { contain-intrinsic-size: auto 721px; }
  #faq { contain-intrinsic-size: auto 1882px; }
  main > .final { contain-intrinsic-size: auto 1354px; }
  .footer { contain-intrinsic-size: auto 976px; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  #funcionalidades { contain-intrinsic-size: auto 1594px; }
  #personalizacao { contain-intrinsic-size: auto 1305px; }
  #clientes { contain-intrinsic-size: auto 558px; }
  #ia { contain-intrinsic-size: auto 1858px; }
  #gamificacao { contain-intrinsic-size: auto 3247px; }
  main > .qstrip { contain-intrinsic-size: auto 201px; }
  #comunidade { contain-intrinsic-size: auto 1519px; }
  #captacao { contain-intrinsic-size: auto 948px; }
  #mobile { contain-intrinsic-size: auto 821px; }
  #notify { contain-intrinsic-size: auto 544px; }
  #score { contain-intrinsic-size: auto 634px; }
  #recursos { contain-intrinsic-size: auto 1448px; }
  #integracoes { contain-intrinsic-size: auto 1232px; }
  #mcp { contain-intrinsic-size: auto 1316px; }
  #suporte { contain-intrinsic-size: auto 671px; }
  #depoimentos { contain-intrinsic-size: auto 718px; }
  #planos { contain-intrinsic-size: auto 2283px; }
  #avaliacoes { contain-intrinsic-size: auto 2994px; }
  #faq { contain-intrinsic-size: auto 1365px; }
  main > .final { contain-intrinsic-size: auto 838px; }
  .footer { contain-intrinsic-size: auto 1026px; }
}
@media (min-width: 1200px) {
  #funcionalidades { contain-intrinsic-size: auto 1572px; }
  #personalizacao { contain-intrinsic-size: auto 601px; }
  #clientes { contain-intrinsic-size: auto 718px; }
  #ia { contain-intrinsic-size: auto 1821px; }
  #gamificacao { contain-intrinsic-size: auto 2786px; }
  main > .qstrip { contain-intrinsic-size: auto 220px; }
  #comunidade { contain-intrinsic-size: auto 1137px; }
  #captacao { contain-intrinsic-size: auto 1002px; }
  #mobile { contain-intrinsic-size: auto 848px; }
  #notify { contain-intrinsic-size: auto 559px; }
  #score { contain-intrinsic-size: auto 644px; }
  #recursos { contain-intrinsic-size: auto 1175px; }
  #integracoes { contain-intrinsic-size: auto 1304px; }
  #mcp { contain-intrinsic-size: auto 1360px; }
  #suporte { contain-intrinsic-size: auto 682px; }
  #depoimentos { contain-intrinsic-size: auto 832px; }
  #planos { contain-intrinsic-size: auto 2215px; }
  #avaliacoes { contain-intrinsic-size: auto 2521px; }
  #faq { contain-intrinsic-size: auto 1315px; }
  main > .final { contain-intrinsic-size: auto 860px; }
  .footer { contain-intrinsic-size: auto 698px; }
}

/* =========================================================
   Hero: telas no padrão novo do campus (medidas da home real em 1920 e 390)
   Proporção do card: --u = 1px do card real (425px no desktop, 326px no celular)
   ========================================================= */
.app { grid-template-columns: 36px minmax(0, 1fr); }
.app-rail { gap: 2.7px; padding: 0; border-right: 0; box-shadow: 2px 0 13px rgba(0,0,0,.12); }
.app-brand { display: grid; place-items: center; align-self: stretch; height: 50px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.app-logo { width: 24px; height: 24px; margin: 0; padding: 4px; border-radius: 7.5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.app-rail span { width: 26px; height: 25px; border-radius: 5.4px; font-size: 11.6px; color: #cbcccd; }
.app-rail span.on::before { left: -5px; width: 1.6px; height: 10.7px; }
.app-top { height: 45px; padding: 0 21px; }
.app-search { width: 300px; max-width: 46%; height: 21px; gap: 5px; padding: 0 7px; border-radius: 5.4px; background: #191b1e; border: 1px solid rgba(255,255,255,.14); font-size: 7.5px; color: #8d8a93; }
.app-search i { font-size: 8.5px; }
.app-actions { gap: 8.6px; }
.app-actions .mts { font-size: 8px; }
.app-link { gap: 2px; font-size: 8.6px; color: #cbcccd; }
.app-link i { font-size: 10.7px; }
.app-bell { font-size: 10.7px; }
.app-avatar { width: 35px; height: 35px; margin-right: -3px; }
.app-hello b { font-size: 7.5px; }
.app-xp { padding: 2px 5.3px; gap: 3.8px; border: 1px solid color-mix(in srgb, var(--p-orange) 32%, transparent); }
.app-xp img { width: 7px; height: 7px; }
.app-xp em { font-size: 7px; }
.app-xp small { font-size: 5px; }
.app-banner { aspect-ratio: 1839 / 383; }
.app-label { gap: 8.6px; margin: 26px 28px 16px; }
.app-label span { font-size: 10.7px; letter-spacing: -.01em; }
.app-label::after { background: #2a2d31; opacity: 1; }
.app-cards { gap: 13px; padding: 0 28px; align-items: start; }

.ac-card { --u: calc(100cqw / 425); container-type: inline-size; position: relative; padding-bottom: 0; border-radius: 8px; background: #191b1e; border: 1px solid #1f2225; }
.ac-card img { aspect-ratio: 423 / 231; background: #1b1f23; }
.ac-prog { position: relative; z-index: 1; align-self: stretch; width: auto; height: calc(var(--u) * 50); margin: calc(var(--u) * -25) calc(var(--u) * 20) 0; padding: 0 calc(var(--u) * 18); gap: 0; border-radius: calc(var(--u) * 10); background: #18161b; font-size: calc(var(--u) * 10); color: #9a9fa5; }
.ac-prog > span:first-child { margin-right: calc(var(--u) * 8); }
.ac-prog > span:last-child:not(.cert) { margin-left: calc(var(--u) * 8); }
.ac-prog > i { height: calc(var(--u) * 5); border-radius: calc(var(--u) * 6); background: #1f2225; overflow: hidden; }
.ac-prog > i::after { border-radius: 0; background: #fe5b0e; }
.ac-prog .cert { gap: calc(var(--u) * 6); height: calc(var(--u) * 20); margin-left: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 5); background: #1ae0fa; color: #18161b; font-size: calc(var(--u) * 11); font-weight: 400; }
.ac-card strong { margin-top: calc(var(--u) * 27); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 18); font-weight: 700; color: #e6e7e8; }
.ac-card small { margin-top: calc(var(--u) * 16); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 16); color: #9a9fa5; }
.ac-btn { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 7); width: calc(var(--u) * 341); height: calc(var(--u) * 50); margin-top: calc(var(--u) * 24); padding: 0; border-radius: calc(var(--u) * 10); background: #1f2225; border: 1px solid #424547; font-size: calc(var(--u) * 14); font-weight: 600; letter-spacing: .02em; color: #cbcccd; }
.ac-btn i { font-size: 1em; vertical-align: 0; color: #9a9fa5; }
.ac-card em { margin: calc(var(--u) * 8) 0 calc(var(--u) * 27); font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 18); color: #868e96; }

/* celular: tudo proporcional à largura da tela do celular (campus em 390px: logo 134x40, moldura do avatar 66, banner 81, cards com 32 de margem) */
.hero-phone .phone-screen { container-type: inline-size; }
.app-phone { --k: calc(100cqw / 390); }
.ap-top { height: calc(var(--k) * 78); padding: 0 calc(var(--k) * 10) 0 calc(var(--k) * 12); }
.ap-logo { height: calc(var(--k) * 40); }
.ap-acts { gap: calc(var(--k) * 12); }
.ap-acts > i { font-size: calc(var(--k) * 20); }
.ap-acts .mts { font-size: calc(var(--k) * 15); }
.ap-acts span i { font-size: calc(var(--k) * 20); }
.ap-acts img { width: calc(var(--k) * 66); height: calc(var(--k) * 66); margin-right: calc(var(--k) * -4); }
.ap-banner { height: calc(var(--k) * 81); }
.app-phone .app-label { gap: calc(var(--k) * 16); margin: calc(var(--k) * 44) calc(var(--k) * 32) calc(var(--k) * 28); }
.app-phone .app-label span { font-size: calc(var(--k) * 20); }
.ap-card { --u: calc(100cqw / 326); margin: 0 calc(var(--k) * 32) calc(var(--k) * 32); border-radius: calc(var(--k) * 15); }
.ap-card strong { font-size: calc(var(--u) * 18); }
.ap-card .ac-btn { width: calc(var(--u) * 242); }

/* WebApp: celular no padrão novo do campus (390px: logo 134x40, moldura 66, banner 81, sem Categorias) */
.pw-head { height: 88px; padding: 0 10px 0 12px; border-bottom: 0; }
.pw-ava { width: 66px; height: 66px; margin-right: -4px; object-fit: contain; }
.pw-banner { display: block; flex-shrink: 0; width: 100%; height: 81px; object-fit: cover; }
.pw-main { padding-top: 16px; }
.pw-divisor { margin: 28px 0 28px; }
.pw-card__prog > i { flex: 1 1 auto; }
.pw-cert { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 20px; margin-left: 8px; padding: 0 10px; border-radius: 5px; background: #1ae0fa; color: #18161b; font-size: 11px; white-space: nowrap; }
.pw-cert i { font-size: 12px; }
.pw-card__btn { width: 242px; text-transform: uppercase; }

/* "Imprimir certificado" no padrão novo do campus: contornado na cor de destaque (card: 20px de altura, cantos de 6, 11/600) */
.ac-prog .cert { gap: calc(var(--u) * 5); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); background: rgba(254,91,14,.14); border: 1px solid rgba(254,91,14,.45); color: #fe5b0e; font-weight: 600; }
.ac-prog .cert i { font-size: calc(var(--u) * 12); }
.pw-cert { gap: 5px; padding: 0 8px; border-radius: 6px; background: rgba(254,91,14,.14); border: 1px solid rgba(254,91,14,.45); color: #fe5b0e; font-weight: 600; }
/* Personalização: "Voltar aos cursos" acima do curso, como na página de módulos real (36px, borda #2a2d31, 13/500) */
.cz-back { display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-top: 47px; padding: 0 14px 0 10px; border-radius: 10px; background: #191b1e; border: 1px solid #2a2d31; font-size: 13px; font-weight: 500; line-height: 1; color: #868e96; }
.cz-back i { font-size: 18px; line-height: 1; }
.cz-back + .pc { margin-top: 14px; }
.is-light .cz-back { background: #fff; border-color: #e3e5e8; color: #6c757d; }
/* WebApp: cabeçalho com o respiro do campus em 390px (busca, light/dark 56x30, painel e avatar 66 separados) */
.pw-head .pw-head__r { gap: 0; }
.pw-head__r > i { margin-right: 16px; }
.pw-head .pw-theme { width: 56px; margin-right: 12px; }
.pw-head .pw-panel { margin-right: 14px; }
.pw-head img.pw-ava { width: 66px; height: 66px; margin-right: -6px; }