/* ============================================================
   thalesgomes.com, base + header + hero + footer
   Mobile-first · tema claro · accent azul TG
   ============================================================ */

/* ------------------------------------------------------------
   fontes locais (variáveis, sem requisição externa)
   Outfit 100-900 · DM Sans 100-1000 · latin + latin-ext
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/outfit-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;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/outfit-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(../fonts/dmsans-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;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(../fonts/dmsans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #f4f4f4;
    --light: #ffffff;
    --dark: #0d0d0d;
    --soft: #4d4d4d;
    --muted: #808080;
    --accent: #1283c4;
    --accent-deep: #0a5a8a;
    --accent-soft: rgba(18, 131, 196, .12);
    --line: rgba(0, 0, 0, .1);

    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    --frame: 70px;
    --t-md: .4s cubic-bezier(0, 0, .36, 1);
    --t-lg: .6s cubic-bezier(0, 0, .36, 1);
}

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

html,
body {
    width: 100%;
    overflow-x: hidden !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--soft);
    background-color: var(--bg);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.tg-link-accent {
    color: var(--accent);
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--dark);
    font-weight: 600;
    line-height: 1.1;
}

h1 {
    font-size: clamp(46px, 9vw, 75px);
    letter-spacing: -.02em;
}

h2 {
    font-size: clamp(30px, 5vw, 50px);
    letter-spacing: -.01em;
}

.tg-thin {
    font-weight: 200;
}

.tg-accent {
    color: var(--accent);
}

.tg-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 24px;
}

.tg-section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ------------------------------------------------------------
   preloader
   ------------------------------------------------------------ */
.tg-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark);
    transition: opacity .6s ease, visibility .6s ease;
}

.tg-preloader.tg-hide {
    opacity: 0;
    visibility: hidden;
}

.tg-preloader-inner {
    text-align: center;
    font-family: var(--font-display);
    color: var(--light);
}

.tg-preloader-line {
    font-size: clamp(22px, 5vw, 38px);
    font-weight: 500;
    overflow: hidden;
}

.tg-preloader-line span {
    display: inline-block;
    animation: tg-rise .7s cubic-bezier(0, 0, .36, 1) both;
}

.tg-preloader-line span:nth-child(2) {
    animation-delay: .12s;
    color: var(--accent);
}

.tg-preloader-line span:nth-child(3) {
    animation-delay: .24s;
}

.tg-preloader-brand {
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    animation: tg-fade .8s .5s both;
}

@keyframes tg-rise {
    from {
        opacity: 0;
        transform: translateY(110%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tg-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ------------------------------------------------------------
   barra de progresso
   ------------------------------------------------------------ */
.tg-progress-track {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1200;
    background-color: transparent;
}

.tg-progress {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

/* ------------------------------------------------------------
   header
   ------------------------------------------------------------ */
.tg-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--frame);
    z-index: 1100;
    transition: background-color var(--t-md), box-shadow var(--t-md);
}

.tg-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tg-header.tg-scrolled {
    background-color: rgba(244, 244, 244, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--line);
}

body.tg-menu-open .tg-header {
    background-color: var(--dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.tg-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-logo-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.tg-logo-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--dark);
    letter-spacing: .01em;
}

.tg-logo-text em {
    font-style: normal;
    font-weight: 200;
}

.tg-menu-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1101;
}

.tg-menu-btn span,
.tg-menu-btn span::before,
.tg-menu-btn span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: var(--dark);
    transition: transform var(--t-md), background-color var(--t-md), top var(--t-md);
}

.tg-menu-btn span {
    top: 50%;
    transform: translate(-50%, -4px);
}

.tg-menu-btn span::before {
    top: 8px;
    transform: translateX(-50%);
}

.tg-menu-btn span::after {
    display: none;
}

body.tg-menu-open .tg-menu-btn span,
body.tg-menu-open .tg-menu-btn span::before {
    background-color: var(--light);
}

body.tg-menu-open .tg-menu-btn span {
    transform: translate(-50%, 0) rotate(45deg);
}

body.tg-menu-open .tg-menu-btn span::before {
    top: 0;
    transform: translateX(-50%) rotate(-90deg);
}

body.tg-menu-open .tg-logo-text,
body.tg-menu-open .tg-logo-text em {
    color: var(--light);
}

/* ------------------------------------------------------------
   menu fullscreen
   ------------------------------------------------------------ */
.tg-menu {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background-color: var(--dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-lg), visibility var(--t-lg);
    overflow-y: auto;
}

body.tg-menu-open .tg-menu {
    opacity: 1;
    visibility: visible;
}

body.tg-menu-open {
    overflow: hidden;
}

.tg-menu-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
    padding: calc(var(--frame) + 40px) 24px 60px;
    max-width: 1280px;
    margin: 0 auto;
}

.tg-menu-nav li {
    overflow: hidden;
}

.tg-menu-nav a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-family: var(--font-display);
    font-size: clamp(34px, 7vw, 60px);
    font-weight: 500;
    color: var(--light);
    padding: 10px 0;
    transform: translateY(110%);
    transition: transform .6s cubic-bezier(0, 0, .36, 1), color var(--t-md);
}

body.tg-menu-open .tg-menu-nav a {
    transform: translateY(0);
}

body.tg-menu-open .tg-menu-nav li:nth-child(1) a { transition-delay: .1s; }
body.tg-menu-open .tg-menu-nav li:nth-child(2) a { transition-delay: .18s; }
body.tg-menu-open .tg-menu-nav li:nth-child(3) a { transition-delay: .26s; }
body.tg-menu-open .tg-menu-nav li:nth-child(4) a { transition-delay: .34s; }

.tg-menu-nav a:hover,
.tg-menu-nav .tg-active a {
    color: var(--accent);
}

.tg-menu-num {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .35);
}

.tg-menu-aside {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.tg-menu-block .tg-aside-label {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 14px;
    padding: 0;
}

.tg-menu-block a,
.tg-menu-block p {
    display: block;
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
    padding: 4px 0;
    transition: color var(--t-md);
}

.tg-menu-block a:hover {
    color: var(--accent);
}

/* ------------------------------------------------------------
   hero
   ------------------------------------------------------------ */
.tg-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tg-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: linear-gradient(160deg, #fcfcfc 0%, var(--bg) 45%, #e9edf0 100%);
}

/* vídeo de fundo: full-bleed, cover, center center, sem repeat (toca 1x e congela) */
.tg-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* imagem estática de fundo do hero (substitui o vídeo em /precos e /parceiros) */
.tg-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* hero como sequência de frames controlada pelo scroll (canvas + scrub).
   poster e canvas se comportam igual ao vídeo antigo: cover, center top.
   as molduras (1280x720) batem com o canvas, então object-fit faz o crop. */
.tg-hero-seq {
    position: absolute;
    inset: 0;
}

.tg-hero-seq .tg-seq-poster,
.tg-hero-seq .tg-seq-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.tg-hero-seq .tg-seq-poster {
    transition: opacity .4s ease;
}

.tg-hero-seq .tg-seq-canvas {
    opacity: 0;
    transition: opacity .4s ease;
}

.tg-hero-seq .tg-seq-canvas.is-ready {
    opacity: 1;
}

/* mobile: mostra o frame inteiro encostado no topo (largura cheia, altura
   natural) e dissolve os 20% de baixo com uma máscara em degradê, pra não
   ficar a linha dura onde a imagem termina. Fade pra transparente, então
   encaixa com qualquer fundo. Tudo em CSS, sem editar os arquivos. */
@media (max-width: 767px) {
    .tg-hero-seq .tg-seq-poster,
    .tg-hero-seq .tg-seq-canvas {
        inset: 0 auto auto 0;   /* encosta no topo; solta base e direita */
        width: 100%;
        height: auto;
        object-fit: contain;    /* a caixa já tem o aspecto do frame */
        -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    }
}

/* a sequência roda pra todos (decisão de produto), inclusive com
   prefers-reduced-motion: o movimento é guiado pelo scroll, não é autoplay.
   Por isso NÃO escondemos mais o canvas nesse modo. O bail por save-data fica
   no JS (hero-seq.js), aí sim cai no poster. */

/* sobreposição branca mobile: 100% embaixo -> 0% aos 75% da altura */
.tg-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #f4f4f4 0%, rgba(244, 244, 244, 0) 75%);
    pointer-events: none;
}

.tg-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(13, 13, 13, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 13, 13, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(85% 70% at 50% 38%, #000 0%, transparent 78%);
    mask-image: radial-gradient(85% 70% at 50% 38%, #000 0%, transparent 78%);
}


.tg-hero-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding-top: calc(var(--frame) + 24px);
}

.tg-hero-text {
    text-align: center;
    padding: 24px 0 0;
}

.tg-hero-greeting {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.tg-hero-suptitle {
    max-width: 460px;
    margin: 26px auto 30px;
    font-size: 17px;
    color: var(--soft);
}

.tg-hero-suptitle strong {
    color: var(--dark);
}

.tg-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--dark);
    letter-spacing: .02em;
}

.tg-arrow-link svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    transition: transform var(--t-md);
}

.tg-arrow-link:hover svg {
    transform: translateX(8px);
}

/* par de CTAs do hero (software + mentoria) */
.tg-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 28px 0 4px;
}

.tg-hero-ctas .tg-button {
    height: 58px;
    padding: 0 10px 0 28px;
    font-size: 14px;
}

.tg-hero-ctas .tg-button > svg {
    width: 38px;
    height: 38px;
    margin-left: 16px;
    padding: 10px;
}

.tg-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 36px;
    margin-top: 36px;
}

.tg-hero-stats li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #242424;
}

.tg-hero-stats span {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--dark);
}

/* painel inferior (faixa), boxed */
.tg-hero-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: calc(100% - 48px);
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 36px 24px;
    border-radius: 24px;
    /* glass effect: vidro fosco sobre a paisagem da hero */
    background-color: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
            backdrop-filter: blur(20px) saturate(135%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 -10px 34px rgba(0, 0, 0, .04),
        0 24px 64px rgba(0, 0, 0, .10);
}

.tg-panel-title {
    font-size: clamp(21px, 2.6vw, 28px);
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.tg-panel-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.tg-social {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    height: 58px;
    background-color: rgba(13, 13, 13, .55);
    border-radius: 58px;
}

.tg-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--light);
    transition: color var(--t-md), background-color var(--t-md);
}

.tg-social a:hover {
    color: var(--light);
    background-color: var(--accent);
}

.tg-social svg {
    width: 19px;
    height: 19px;
}

/* botão principal (com seta interna em selo, padrão ashley) */
.tg-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 12px 0 36px;
    border: none;
    border-radius: 64px;
    background-color: var(--accent);
    color: var(--light);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .04em;
    overflow: hidden;
    transition: transform var(--t-md), background-color var(--t-md), box-shadow var(--t-md);
}

.tg-button span {
    white-space: nowrap;
}

.tg-button > svg {
    width: 42px;
    height: 42px;
    margin-left: 22px;
    padding: 11px;
    border-radius: 50%;
    background-color: var(--light);
    color: var(--accent-deep);
    flex-shrink: 0;
    transition: transform var(--t-md);
}

.tg-button:hover {
    transform: scale(1.03);
    background-color: var(--accent-deep);
    box-shadow: 0 14px 34px rgba(18, 131, 196, .35);
}

.tg-button:hover > svg {
    transform: scale(1.15);
}

/* shimmer sweep */
.tg-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: tg-shimmer 3.2s ease-in-out infinite;
}

@keyframes tg-shimmer {
    0% {
        left: -80%;
    }

    55%, 100% {
        left: 130%;
    }
}

/* botão secundário (contorno), sem shimmer, pra o 2º CTA do hero */
.tg-button-ghost {
    background-color: transparent;
    color: var(--dark);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .14);
}

.tg-button-ghost > svg {
    background-color: rgba(0, 0, 0, .06);
    color: var(--accent-deep);
}

.tg-button-ghost::after {
    display: none;
}

.tg-button-ghost:hover {
    background-color: var(--dark);
    color: var(--light);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.tg-button-ghost:hover > svg {
    background-color: var(--light);
}

/* ------------------------------------------------------------
   prova social (faixa escura)
   ------------------------------------------------------------ */
.tg-suptitle {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.8;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 60px;
}

.tg-suptitle-dark {
    color: var(--muted);
}

.tg-prova {
    position: relative;
    overflow: hidden;
    background-color: var(--dark);
    padding: 90px 0 0;
}

.tg-deco-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tg-deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

/* brilhos invertidos de lado (sup. esquerda / inf. direita): o corte diagonal
   da banda clara abaixo fica no lado sem brilho, senão o blur morre com
   corte seco na borda da seção */
.tg-deco-1 {
    width: 420px;
    height: 420px;
    left: -120px;
    top: -140px;
    background: radial-gradient(circle, rgba(18, 131, 196, .25) 0%, rgba(18, 131, 196, 0) 70%);
}

.tg-deco-2 {
    width: 320px;
    height: 320px;
    right: -100px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(10, 90, 138, .3) 0%, rgba(10, 90, 138, 0) 70%);
}

.tg-counters {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
    padding-bottom: 90px;
}

.tg-counter-num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(44px, 6vw, 68px);
    font-weight: 600;
    line-height: 1;
    color: var(--light);
    margin-bottom: 10px;
}

.tg-counter-num .tg-count {
    color: var(--light);
}

.tg-counter p {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* marquee de cases */
.tg-marquee {
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 28px 0;
}

.tg-marquee-track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: tg-marquee-roll 30s linear infinite;
}

.tg-marquee-track span {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
}

.tg-marquee-track i {
    font-style: normal;
    font-size: 14px;
    color: var(--accent);
}

@keyframes tg-marquee-roll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   o que eu faço + caminhos (estilo service.html ashley, dark + acordeões)
   ------------------------------------------------------------ */
.tg-servicos {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background-color: var(--dark);
}

/* vídeo de capa da seção (cover, igual ao hero) */
.tg-servicos-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.tg-servicos-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 767px) {
    .tg-servicos-video,
    .tg-servicos-bg .tg-servicos-end {
        object-position: calc(50% + 50px) top;
    }
}

/* frame final retocável: cobre o vídeo com fade quando ele termina */
.tg-video-end {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
}

.tg-video-end.tg-on {
    opacity: 1;
}

/* degradê por cima do vídeo, mobile: simétrico, 100% nos dois lados -> 0% no meio */
.tg-servicos-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 50%),
        linear-gradient(270deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 50%);
    pointer-events: none;
}

/* desktop: invertido, faixa esquerda 30% + direita 100% -> 0% no meio (atrás dos acordeões) */
@media (min-width: 768px) {
    .tg-servicos-bg::after {
        background:
            linear-gradient(90deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 30%),
            linear-gradient(270deg, #0d0d0d 0%, rgba(13, 13, 13, 0) 50%);
    }
}

.tg-servicos .tg-container {
    position: relative;
    z-index: 1;
}

/* grid 50/50: esquerda livre (vídeo aparece), acordeões na direita */
.tg-servicos-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.tg-servicos-empty {
    display: none;
}

.tg-h1 {
    font-size: clamp(40px, 7vw, 75px);
}

.tg-servicos-head {
    margin-bottom: 56px;
}

.tg-servicos h2 {
    color: var(--light);
}

.tg-servicos-head .tg-h1 {
    font-size: clamp(36px, 4.5vw, 56px);
}

.tg-servicos-sub {
    margin-top: 22px;
    font-size: 15px;
    color: rgba(255, 255, 255, .5);
}

/* dodecaedro com linha clara (pra seção escura) */
.tg-anim-light .tg-pentagon div {
    border-top-color: var(--light);
}

.tg-anim-3 {
    top: 80px;
    right: -90px;
}

/* acordeões (padrão service.html) */
.tg-price-number {
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 500;
    line-height: .7;
    color: var(--light);
    flex-shrink: 0;
}

.tg-price-number .tg-thin {
    font-weight: 200;
    font-size: 18px;
    color: rgba(255, 255, 255, .4);
    margin-right: 6px;
}

.tg-price-number .tg-num {
    color: var(--accent);
}

/* painel glass dos acordeões: blur leve do vídeo atrás + véu mínimo na cor do degradê */
.tg-acc-glass {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(13, 13, 13, .15);
    border: 1px solid rgba(255, 255, 255, .03);
    border-radius: 20px;
    padding: 4px 26px;
}

.tg-accordion-group {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.tg-accordion-group:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* dentro do glass, a moldura do painel substitui as bordas externas */
.tg-acc-glass .tg-accordion-group:first-child {
    border-top: none;
}

.tg-acc-glass .tg-accordion-group:last-child {
    border-bottom: none;
}

.tg-accordion-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 34px 0;
    cursor: pointer;
}

.tg-accordion-head {
    flex: 1;
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    color: var(--light);
    transition: color var(--t-md);
}

.tg-accordion-menu:hover .tg-accordion-head {
    color: var(--accent);
}

.tg-symbol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .1);
    color: var(--light);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 300;
    flex-shrink: 0;
}

.tg-symbol .tg-plus,
.tg-symbol .tg-minus {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-accordion-content {
    overflow: hidden;
}

.tg-accordion-content p {
    max-width: 680px;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 24px;
}

.tg-accordion-content .tg-arrow-link {
    margin-bottom: 40px;
}

.tg-arrow-link-light {
    color: var(--light);
}
/* ------------------------------------------------------------
   depoimentos
   ------------------------------------------------------------ */
.tg-depo {
    position: relative;
    overflow: hidden;
    background-color: var(--light);
    padding: 100px 0;
}

.tg-depo-title {
    text-align: center;
    margin-bottom: 50px;
}

/* dodecaedro 3D (efeito ashley) */
.tg-anim-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: tg-jump 10s linear infinite;
}

.tg-anim {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: .14;
}

.tg-anim-1 {
    top: 60px;
    right: -80px;
}

.tg-anim-2 {
    bottom: -60px;
    left: 4%;
}

@media screen and (max-width: 1200px) {
    .tg-anim-2 {
        display: none;
    }
}

.tg-dodecahedron {
    position: relative;
    left: 100px;
    top: 40px;
    width: 100px;
    height: 223px;
    transform-style: preserve-3d;
    animation: tg-dod-rotate 100s infinite linear;
}

.tg-pentagon {
    position: absolute;
    width: 100px;
}

.tg-pentagon:nth-child(1) { transform: rotateY(.2turn) translateZ(69px) rotateX(26.5deg); }
.tg-pentagon:nth-child(2) { transform: rotateY(.4turn) translateZ(69px) rotateX(26.5deg); }
.tg-pentagon:nth-child(3) { transform: rotateY(.6turn) translateZ(69px) rotateX(26.5deg); }
.tg-pentagon:nth-child(4) { transform: rotateY(.8turn) translateZ(69px) rotateX(26.5deg); }
.tg-pentagon:nth-child(5) { transform: rotateY(1turn) translateZ(69px) rotateX(26.5deg); }
.tg-pentagon:nth-child(6) { bottom: 0; transform: rotateY(.2turn) translateZ(-69px) rotateX(206.5deg); }
.tg-pentagon:nth-child(7) { bottom: 0; transform: rotateY(.4turn) translateZ(-69px) rotateX(206.5deg); }
.tg-pentagon:nth-child(8) { bottom: 0; transform: rotateY(.6turn) translateZ(-69px) rotateX(206.5deg); }
.tg-pentagon:nth-child(9) { bottom: 0; transform: rotateY(.8turn) translateZ(-69px) rotateX(206.5deg); }
.tg-pentagon:nth-child(10) { bottom: 0; transform: rotateY(1turn) translateZ(-69px) rotateX(206.5deg); }
.tg-pentagon:nth-child(11) { transform: translateZ(69px) rotateX(-90deg); }
.tg-pentagon:nth-child(12) { bottom: 0; transform: translateZ(-69px) rotateX(90deg); }

.tg-pentagon div {
    position: absolute;
    width: 100px;
    height: 69px;
    transform-origin: bottom;
    border-top: 1px solid var(--dark);
}

.tg-pentagon div:nth-child(1) { transform: rotate(.2turn); }
.tg-pentagon div:nth-child(2) { transform: rotate(.4turn); }
.tg-pentagon div:nth-child(3) { transform: rotate(.6turn); }
.tg-pentagon div:nth-child(4) { transform: rotate(.8turn); }
.tg-pentagon div:nth-child(5) { transform: rotate(1turn); }

@keyframes tg-dod-rotate {
    from { transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
    to { transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg); }
}

@keyframes tg-jump {
    0%, 100% { transform: translateY(-30px); }
    50% { transform: translateY(30px); }
}

/* paginação com avatares (placeholder: iniciais, trocar por fotos dos clientes) */
.tg-depo-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
}

.tg-depo-pagination .swiper-pagination-bullet {
    width: auto;
    height: auto;
    background: transparent;
    opacity: 1;
    margin: 0 !important;
}

.tg-depo-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--accent-soft);
    color: var(--accent-deep);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    opacity: .45;
    overflow: hidden;
    transition: opacity var(--t-md), transform var(--t-md), background-color var(--t-md), color var(--t-md);
    cursor: pointer;
}

.tg-depo-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(85%);
    transition: filter var(--t-md);
}

.swiper-pagination-bullet-active .tg-depo-dot {
    opacity: 1;
    transform: scale(1.18);
    background-color: var(--accent);
    color: var(--light);
    box-shadow: 0 0 0 2px var(--accent);
}

.swiper-pagination-bullet-active .tg-depo-dot img {
    filter: none;
}

/* slide */
.tg-depo-frame {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.tg-quote-icon {
    width: 46px;
    height: 46px;
    color: var(--accent);
    margin: 0 auto 28px;
    display: block;
}

.tg-reviews-slider {
    overflow: hidden;
}

.tg-review-stars {
    font-size: 16px;
    letter-spacing: .3em;
    color: var(--accent);
    margin-bottom: 24px;
}

.tg-review-text {
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.7;
    color: var(--soft);
    margin-bottom: 30px;
}

.tg-review-name {
    font-family: var(--font-display);
    color: var(--dark);
    font-weight: 600;
    line-height: 1.1;
    font-size: 18px;
    margin-bottom: 6px;
}

.tg-review-role {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* setas do slider */
.tg-depo-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
}

.tg-slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .05);
    color: var(--dark);
    cursor: pointer;
    transition: background-color var(--t-md), color var(--t-md), transform var(--t-md);
}

.tg-slider-arrow svg {
    width: 20px;
    height: 20px;
}

.tg-slider-arrow:hover {
    background-color: var(--accent);
    color: var(--light);
    transform: scale(1.08);
}

@media (min-width: 1100px) {
    .tg-depo {
        padding: 120px 0;
    }

    .tg-depo-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 200px);
        justify-content: space-between;
        margin-top: 0;
        pointer-events: none;
    }

    .tg-slider-arrow {
        pointer-events: auto;
    }
}

/* ------------------------------------------------------------
   footer
   ------------------------------------------------------------ */
.tg-footer {
    position: relative;
    overflow: hidden;
    background-color: var(--dark);
    color: rgba(255, 255, 255, .6);
    padding: 40px 0 0;
}

.tg-footer .tg-container {
    position: relative;
    z-index: 1;
}

/* dodecaedro no canto inferior direito do rodapé */
.tg-anim-4 {
    top: auto;
    bottom: -40px;
    right: -70px;
}

.tg-footer-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, .1);
}

.tg-footer-grid {
    display: grid;
    /* mobile: brand em cima, Navegação + Contato lado a lado, Projetos embaixo centralizado */
    grid-template-columns: 1fr 1fr;
    gap: 44px 16px;
    justify-items: center;
    text-align: center;
    padding: 70px 0 50px;
}

.tg-footer-brand {
    grid-column: 1 / -1;
    order: 0;
}

/* Navegação (2º filho) e Contato (4º) na primeira linha */
.tg-footer-col:nth-child(2) {
    order: 1;
}

.tg-footer-col:nth-child(4) {
    order: 2;
}

/* Projetos (3º filho) na linha de baixo, centralizado */
.tg-footer-col:nth-child(3) {
    order: 3;
    grid-column: 1 / -1;
}

.tg-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tg-footer-brand img {
    width: 173px;
    height: auto;
    margin-bottom: 18px;
}

.tg-footer-col {
    text-align: center;
}

.tg-footer-tag {
    font-size: 10px;
    letter-spacing: .26em;
    color: rgba(255, 255, 255, .55);
}

.tg-footer-col .tg-aside-label {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 18px;
}

.tg-footer-col li {
    padding: 5px 0;
    font-size: 15px;
}

.tg-footer-col a {
    transition: color var(--t-md);
}

.tg-footer-col a:hover {
    color: var(--accent);
}

.tg-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 26px 0 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.tg-footer-motto {
    font-family: var(--font-display);
    color: rgba(255, 255, 255, .75);
}

.tg-footer-motto span {
    color: var(--accent);
}

.tg-footer-legal {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.tg-footer-legal a {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    transition: color var(--t-md);
}

.tg-footer-legal a + a::before {
    content: '•';
    margin: 0 10px;
    color: rgba(255, 255, 255, .25);
}

.tg-footer-legal a:hover {
    color: rgba(255, 255, 255, .8);
}

/* ============================================================
   tablet (768px+)
   ============================================================ */
@media (min-width: 768px) {
    :root {
        --frame: 84px;
    }

    .tg-container {
        padding-inline: 40px;
    }

    .tg-counters {
        grid-template-columns: repeat(4, 1fr);
    }

    .tg-suptitle {
        text-align: right;
    }

    .tg-prova {
        padding-top: 110px;
    }

    .tg-servicos {
        padding: 120px 0 110px;
    }

    /* desktop: 50/50, esquerda vazia pro vídeo, acordeões na direita */
    .tg-servicos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .tg-servicos-empty {
        display: block;
    }

    .tg-hero-panel {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 40px;
        height: 150px;
        width: calc(100% - 80px);
    }

    .tg-panel-title {
        text-align: left;
        max-width: 380px;
    }

    .tg-panel-right {
        flex-direction: row;
        gap: 24px;
    }

    .tg-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }

    /* desktop/tablet: desfaz a reordenação e a centralização do mobile */
    .tg-footer-brand,
    .tg-footer-col:nth-child(2),
    .tg-footer-col:nth-child(3),
    .tg-footer-col:nth-child(4) {
        order: 0;
        grid-column: auto;
    }

    .tg-footer-grid {
        justify-items: start;
        text-align: left;
    }

    .tg-footer-col {
        text-align: left;
    }

    .tg-footer-brand {
        align-items: flex-start;
    }

    .tg-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 28px;
        flex-wrap: wrap;
    }

    .tg-menu-aside {
        flex-direction: row;
        gap: 90px;
    }
}

@media (max-width: 767px) {
    /* prova social centralizada no mobile */
    .tg-prova .tg-suptitle,
    .tg-counter {
        text-align: center;
    }

    /* deixa o card "Software de verdade" vazar pra fora do hero e sobrepor a
       seção 2: solta o overflow e sobe o hero no empilhamento (o pin do GSAP
       cria stacking context, então o z-index precisa ir no hero, não no card). */
    .tg-hero {
        overflow: visible;
        z-index: 2;
        padding-bottom: 20px;
    }

    .tg-arrow-link {
        display: none;
    }

    .tg-hero-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: calc(100% - 32px);
        margin: 30px auto -10px;
        padding: 22px 16px;
        border-radius: 20px;
    }

    .tg-panel-title {
        order: 1;
        width: auto;
        text-align: left;
        font-size: clamp(16px, 4.5vw, 20px);
        line-height: 1.2;
    }

    .tg-panel-right {
        order: 2;
        width: auto;
        align-items: flex-end;
    }

    .tg-social {
        gap: 2px;
        height: 42px;
        padding: 0 6px;
    }

    .tg-social a {
        width: 32px;
        height: 32px;
    }

    .tg-panel-right .tg-button {
        width: auto;
    }

    .tg-hero-grid {
        justify-content: flex-start;
        /* sobe o bloco 20px (era +320px): mais respiro até o fim do hero */
        padding-top: calc(var(--frame) + 300px);
    }

    /* teste mobile: tag abaixo do titulo. Remova este bloco para voltar. */
    .tg-hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tg-hero-text h1 {
        order: 1;
        font-size: clamp(39px, 8.4vw, 64px);
    }

    .tg-hero-greeting {
        order: 2;
        margin: 18px 0 0;
    }

    /* -5px entre o título e o subtítulo (base é 26px) */
    .tg-hero-suptitle {
        order: 3;
        font-size: 15px;
        margin: 14px auto 16px;
    }

    .tg-hero-ctas {
        order: 4;
        width: 100%;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 0 4px;
    }

    .tg-hero-ctas .tg-button {
        min-width: 0;
        gap: 6px;
        padding-inline: 0;
        font-size: clamp(12px, 3.6vw, 14px);
    }

    .tg-hero-ctas a:first-child {
        flex: 0 1 60%;
    }

    .tg-hero-ctas a:last-child {
        flex: 0 1 40%;
    }

    .tg-hero-ctas .tg-button > svg {
        width: 32px;
        height: 32px;
        margin-left: 0;
        padding: 8px;
    }

    .tg-hero-stats {
        order: 5;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: clamp(8px, 2.4vw, 12px);
        width: 100%;
        max-width: 360px;
        margin: 24px auto 0;
    }

    .tg-hero-stats li {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: clamp(9px, 2.4vw, 10px);
        line-height: 1.15;
        text-align: center;
    }

    .tg-hero-stats span {
        font-size: clamp(18px, 5vw, 21px);
        line-height: 1;
    }

    .tg-hero-bg::after {
        background: linear-gradient(
            to top,
            #f4f4f4 0%,
            #f4f4f4 20%,
            rgba(244, 244, 244, .94) 36%,
            rgba(244, 244, 244, .45) 54%,
            rgba(244, 244, 244, 0) 72%
        );
    }
}

/* mobile largo/estreito: reduz o h1 pra manter o bloco mais compacto */
@media (max-width: 480px) {
    .tg-hero-text h1 {
        font-size: clamp(31px, 9.0vw, 40px);
    }
}

/* iPhones largos: impede o flex da hero de abrir um vao antes do painel. */
@media (min-width: 421px) and (max-width: 480px) {
    .tg-hero-grid {
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) {
    .tg-hero-bg::after {
        background:
            /* fade branco à esquerda: legibilidade do texto do hero */
            linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .6) 26%, rgba(244, 244, 244, 0) 56%);
    }
}

/* ============================================================
   desktop (1100px+)
   ============================================================ */
@media (min-width: 1100px) {
    .tg-hero {
        height: 900px;
        min-height: 0;
    }

    .tg-hero-grid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
        padding-top: var(--frame);
        /* compensa a altura da faixa pra centralizar no espaço visível */
        padding-bottom: 178px;
    }

    .tg-hero-text {
        text-align: left;
        flex: 0 1 55%;
        max-width: 55%;
        min-width: 0;
        padding: 0;
    }

    /* hero h1 ~15% menor que o global (75px -> 64px) pra fechar em 2 linhas */
    .tg-hero-text h1 {
        font-size: clamp(39px, 7.6vw, 64px);
    }

    .tg-hero-suptitle {
        font-size: 18px;
        max-width: 480px;
        margin: 30px 0 34px;
        padding-left: 22px;
        border-left: 2px solid var(--accent);
    }

    .tg-hero-ctas {
        justify-content: flex-start;
    }

    .tg-hero-stats {
        justify-content: flex-start;
        gap: 18px 40px;
        margin-top: 44px;
    }


    .tg-hero-panel {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 28px;
        margin: 0;
        width: calc(100% - 80px);
        max-width: 1280px;
        height: 150px;
        padding: 0 56px;
    }

    .tg-menu-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        padding: calc(var(--frame) + 40px) 40px 60px;
    }

    .tg-menu-aside {
        flex-direction: column;
        gap: 44px;
    }
}

/* ============================================================
   páginas legais (privacidade, cookies, termos)
   ============================================================ */
.tg-legal-page {
    padding-top: calc(var(--frame) + 48px);
    padding-bottom: 100px;
    min-height: 100vh;
}

.tg-legal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.tg-legal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--soft);
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--light);
    transition: border-color var(--t-md), color var(--t-md);
}

.tg-legal-back:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.tg-legal-back svg {
    width: 14px;
    height: 14px;
}

.tg-legal-tabs {
    display: flex;
    gap: 4px;
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
}

.tg-legal-tab {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 7px;
    color: var(--muted);
    transition: background var(--t-md), color var(--t-md);
}

.tg-legal-tab:hover {
    color: var(--dark);
    background: rgba(0, 0, 0, .05);
}

.tg-legal-tab.tg-active {
    background: var(--accent);
    color: #fff;
}

.tg-legal-hero {
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 20px;
}

.tg-legal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.tg-legal-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 600;
    color: var(--dark);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 14px;
}

.tg-legal-intro {
    font-size: 15px;
    line-height: 1.75;
    color: var(--soft);
    max-width: 720px;
    margin-bottom: 24px;
}

.tg-legal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.tg-legal-meta-item {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
}

.tg-legal-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.tg-legal-meta-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
}

.tg-legal-meta-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.tg-legal-meta-email {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    margin-top: 4px;
    transition: opacity var(--t-md);
}

a.tg-legal-meta-email:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.tg-legal-meta-email svg {
    width: 13px;
    height: 13px;
}

.tg-legal-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-legal-card {
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 24px;
}

.tg-legal-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.tg-legal-card-title svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.tg-legal-card-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--soft);
}

.tg-legal-card-body p + p {
    margin-top: 10px;
}

.tg-legal-card-body ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-legal-card-body li {
    display: flex;
    gap: 10px;
}

.tg-legal-card-body li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 9px;
}

/* ------------------------------------------------------------
   pagina 404
   ------------------------------------------------------------ */
.tg-error-page {
    background: var(--light);
}

.tg-error-hero {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(var(--frame) + 70px) 0 90px;
}

.tg-error-content {
    max-width: 620px;
}

.tg-error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 26px;
}

.tg-error-content h1 {
    margin: 12px 0 18px;
    font-size: clamp(42px, 8vw, 78px);
    line-height: .95;
    letter-spacing: 0;
    color: var(--dark);
}

.tg-error-content p:not(.tg-section-label) {
    max-width: 480px;
    margin-bottom: 30px;
    font-size: clamp(16px, 2.2vw, 18px);
    line-height: 1.75;
    color: var(--soft);
}

.tg-obrigado-briefing {
    margin: 4px 0 28px;
    padding: 20px 24px;
    border-radius: 10px;
    border-left: 3px solid var(--accent);
    background: rgba(0, 0, 0, .04);
}

.tg-obrigado-briefing-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
}

.tg-obrigado-briefing p {
    max-width: none;
    margin-bottom: 18px;
    font-size: clamp(14px, 2vw, 16px);
}

@media (min-width: 768px) {
    .tg-legal-page {
        padding-top: calc(var(--frame) + 64px);
        padding-bottom: 120px;
    }

    .tg-legal-hero {
        padding: 36px 40px;
    }

    .tg-legal-card {
        padding: 26px 32px;
    }
}

/* ============================================================
   página de preços (/precos) + parceiros (/parceiros)
   ============================================================ */

/* helpers de seção reaproveitados na página */
.tg-section-head {
    max-width: 720px;
    margin-bottom: 40px;
}

.tg-section-head .tg-section-label {
    margin-bottom: 10px;
}

.tg-section-head h2 {
    margin-top: 4px;
}

.tg-section-sub {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
}

/* ------------------------------------------------------------
   hero curto (com vídeo, igual home)
   ------------------------------------------------------------ */
.tg-phero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 76svh;
    padding: calc(var(--frame) + 56px) 0 64px;
}

/* /precos e /parceiros usam imagem estática 1920x500 no lugar do vídeo:
   hero em formato banner pra imagem encaixar sem cortar os aparelhos */
@media (min-width: 768px) {
    .tg-phero-prices-hero,
    .tg-phero-parc-hero {
        min-height: clamp(440px, 52svh, 540px);
    }
}

.tg-phero-inner {
    position: relative;
    z-index: 1;
}

.tg-phero-text {
    max-width: 600px;
}

.tg-phero .tg-section-label {
    margin-bottom: 16px;
}

.tg-phero h1 {
    font-size: min(clamp(40px, 7vw, 64px), calc((100vw - 48px) / 11.2));
}

.tg-phero-sub {
    margin: 24px 0 28px;
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.7;
    color: var(--soft);
    max-width: 620px;
}

.tg-phero-sub strong {
    color: var(--dark);
}

.tg-phero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tg-pill {
    padding: 9px 16px;
    border-radius: 50px;
    background: var(--light);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.tg-phero-parc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--accent-deep);
    transition: gap var(--t-md);
}

.tg-phero-parc svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    transition: transform var(--t-md);
}

.tg-phero-parc:hover svg {
    transform: translateX(6px);
}

@media (min-width: 768px) {
    .tg-phero-sub {
        padding-left: 22px;
        border-left: 2px solid var(--accent);
    }
}

/* ------------------------------------------------------------
   política de pagamento
   ------------------------------------------------------------ */
.tg-pay {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 9vw, 100px) 0;
    background: var(--bg);
}

.tg-pay .tg-container {
    position: relative;
    z-index: 1;
}

/* dodecaedro decorativo no canto esquerdo */
.tg-anim-pay {
    top: 70px;
    left: -120px;
}

.tg-pay-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.tg-pay-card {
    position: relative;
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
}

.tg-pay-num {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--accent);
}

.tg-pay-title {
    font-size: 22px;
    margin: 10px 0 10px;
}

.tg-pay-rule {
    font-size: 14px;
    color: var(--soft);
    margin-bottom: 12px;
}

.tg-pay-rule strong {
    color: var(--dark);
}

.tg-pay-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.tg-pay-note {
    margin-top: 22px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--soft);
    background: var(--accent-soft);
    border: 1px solid rgba(18, 131, 196, .25);
    border-radius: 14px;
}

.tg-pay-note strong {
    color: var(--accent-deep);
}

/* ------------------------------------------------------------
   grids de planos
   ------------------------------------------------------------ */
.tg-plans {
    padding: 0 0 clamp(60px, 9vw, 100px);
    background: var(--bg);
}

.tg-plan-group {
    margin-bottom: clamp(48px, 7vw, 80px);
}

.tg-plan-group:last-child {
    margin-bottom: 0;
}

.tg-plan-group-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.tg-plan-group-intro {
    max-width: 680px;
}

.tg-carousel-nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.tg-plan-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.tg-plan-group-title {
    font-size: clamp(26px, 4vw, 40px);
    margin-bottom: 14px;
}

.tg-plan-group-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
}

/* carrossel de planos, loop infinito, slide central em destaque, peek nas laterais */
.tg-plan-carousel {
    overflow: hidden;
    padding-block: 18px;
}

.tg-plan-carousel .swiper-wrapper {
    align-items: stretch;
}

.tg-plan-carousel .swiper-slide {
    width: clamp(264px, 80vw, 346px);
    height: auto;
    opacity: .45;
    transform: scale(.9);
    transition: transform .5s cubic-bezier(0, 0, .36, 1), opacity .5s cubic-bezier(0, 0, .36, 1);
}

.tg-plan-carousel .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.tg-plan-carousel .swiper-slide > .tg-plan-card {
    height: 100%;
}

/* dentro do carrossel o card não levanta no hover (o destaque é o slide central) */
.tg-plan-carousel .tg-plan-card:hover {
    transform: none;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .09);
}

.tg-plan-card {
    display: flex;
    flex-direction: column;
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px;
    transition: transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md);
}

.tg-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .09);
    border-color: rgba(18, 131, 196, .4);
}

.tg-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.tg-plan-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 6px 12px;
    border-radius: 50px;
}

.tg-plan-prazo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.tg-plan-prazo svg {
    width: 15px;
    height: 15px;
}

.tg-plan-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.tg-plan-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--soft);
    margin-bottom: 22px;
}

.tg-plan-bottom {
    margin-top: auto;
}

/* bloco de preço */
.tg-price {
    margin-bottom: 18px;
}

.tg-price-prefix,
.tg-price-ref {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.tg-price-ref s {
    color: var(--muted);
}

.tg-price-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 42px);
    font-weight: 600;
    line-height: 1;
    color: var(--dark);
}

.tg-price-cur {
    font-size: 18px;
    font-weight: 500;
    color: var(--soft);
}

.tg-price-note {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}

.tg-price-note strong {
    color: var(--accent-deep);
}

.tg-badge-off {
    align-self: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--light);
    background: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
}

.tg-price-parc .tg-price-main {
    color: var(--accent-deep);
}

/* cta do card */
.tg-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    border-radius: 50px;
    border: 1.5px solid var(--dark);
    background: transparent;
    color: var(--dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--t-md), color var(--t-md), border-color var(--t-md);
}

.tg-card-cta svg {
    width: 18px;
    height: 18px;
    transition: transform var(--t-md);
}

.tg-card-cta:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--light);
}

.tg-card-cta:hover svg {
    transform: translateX(5px);
}

/* no modo parceiro o cta já vem em accent */
.tg-plan-card:has(.tg-price-parc) .tg-card-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--light);
}

.tg-plan-card:has(.tg-price-parc) .tg-card-cta:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* ------------------------------------------------------------
   recorrência (faixa escura)
   ------------------------------------------------------------ */
.tg-retainer {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    color: rgba(255, 255, 255, .7);
    padding: clamp(60px, 9vw, 100px) 0;
}

.tg-retainer .tg-container {
    position: relative;
    z-index: 1;
}

.tg-retainer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

.tg-retainer-text h2 {
    color: var(--light);
    margin: 12px 0 18px;
}

.tg-retainer-sub {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 30px;
    max-width: 520px;
}

.tg-retainer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-retainer-list li {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .6);
}

.tg-retainer-list li span {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 4px;
}

/* preço do Google Ads (recorrência, faixa escura) */
.tg-gads-price {
    margin-bottom: 24px;
}

.tg-gads-value {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 52px);
    font-weight: 600;
    line-height: 1;
    color: var(--light);
}

.tg-gads-value span {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, .5);
}

.tg-gads-note {
    margin-top: 10px;
    max-width: 430px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}

.tg-gads-proof {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}

/* imagem de capa da seção Google Ads: cover, center, 70% sobre o fundo escuro (que fica por baixo) */
.tg-gads-bg {
    position: absolute;
    inset: 0;
    background-image: url(../images/bg-google-ads.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .7;
    pointer-events: none;
}

/* título "Google" na paleta oficial */
.tg-google {
    font-weight: 600;
    letter-spacing: -.01em;
}

.tg-gc-blue { color: #4285F4; }
.tg-gc-red { color: #EA4335; }
.tg-gc-yellow { color: #FBBC05; }
.tg-gc-green { color: #34A853; }

/* ------------------------------------------------------------
   serviços avulsos
   ------------------------------------------------------------ */
.tg-avulsos {
    padding: clamp(60px, 9vw, 100px) 0;
    background: var(--bg);
}

.tg-avulsos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.tg-avulso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 22px;
    transition: border-color var(--t-md), transform var(--t-md);
}

.tg-avulso:hover {
    border-color: rgba(18, 131, 196, .4);
    transform: translateY(-2px);
}

.tg-avulso-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--dark);
}

.tg-avulso-info {
    min-width: 0;
}

.tg-avulso-meta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}

.tg-avulso-price {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--accent-deep);
    white-space: nowrap;
}

.tg-avulso-price s {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

/* ------------------------------------------------------------
   mentoria
   ------------------------------------------------------------ */
.tg-mentoria {
    padding: 0 0 clamp(60px, 9vw, 100px);
    background: var(--bg);
}

.tg-mentoria-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #eef6fc 100%);
    border: 1px solid rgba(18, 131, 196, .25);
    border-radius: 24px;
    padding: clamp(28px, 5vw, 48px);
}

.tg-mentoria-info h2 {
    margin: 10px 0 14px;
}

.tg-mentoria-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--soft);
}

.tg-mentoria-buy .tg-button {
    margin-top: 18px;
}

/* ------------------------------------------------------------
   faq
   ------------------------------------------------------------ */
.tg-faq {
    padding: clamp(60px, 9vw, 100px) 0 clamp(80px, 10vw, 120px);
    background: var(--bg);
}

.tg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}

.tg-faq-item {
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.tg-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 20px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(16px, 2.2vw, 19px);
    color: var(--dark);
    list-style: none;
}

.tg-faq-item summary::-webkit-details-marker {
    display: none;
}

.tg-faq-ico {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tg-faq-ico::before,
.tg-faq-ico::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: transform var(--t-md), opacity var(--t-md);
}

.tg-faq-ico::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.tg-faq-item[open] .tg-faq-ico::after {
    opacity: 0;
}

.tg-faq-body {
    padding: 0 24px 22px;
}

.tg-faq-body p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--soft);
}

/* ------------------------------------------------------------
   modal de bloqueio (parceiros)
   ------------------------------------------------------------ */
.tg-gate {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 10, 14, .8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tg-gate-toggle:checked ~ .tg-gate {
    display: none;
}

.tg-gate-card {
    width: 100%;
    max-width: 440px;
    background: var(--light);
    border-radius: 24px;
    padding: clamp(28px, 5vw, 40px);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    animation: tg-gate-in .4s cubic-bezier(0, 0, .36, 1) both;
}

@keyframes tg-gate-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.tg-gate-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.tg-gate-lock svg {
    width: 26px;
    height: 26px;
}

.tg-gate-card h2 {
    font-size: clamp(24px, 4vw, 30px);
    margin: 6px 0 12px;
}

.tg-gate-sub {
    font-size: 15px;
    line-height: 1.7;
    color: var(--soft);
    margin-bottom: 24px;
}

.tg-gate-sub strong {
    color: var(--accent-deep);
}

.tg-gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-gate-form input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--dark);
    text-align: center;
    letter-spacing: .04em;
    transition: border-color var(--t-md), box-shadow var(--t-md);
}

.tg-gate-form input::placeholder {
    color: var(--muted);
    letter-spacing: 0;
}

.tg-gate-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.tg-gate-form input[aria-invalid="true"] {
    border-color: #d9534f;
}

.tg-gate-form .tg-button {
    width: auto;
    align-self: center;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
}

.tg-gate-error {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #d9534f;
}

.tg-gate-skip {
    display: inline-block;
    margin-top: 22px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--t-md);
}

.tg-gate-skip:hover {
    color: var(--dark);
}

.tg-gate-foot {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.tg-gate-foot a {
    color: var(--accent);
    font-weight: 600;
}

/* botão flutuante pra reabrir o modal depois de dispensar */
.tg-gate-reopen {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1290;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 50px;
    background: var(--dark);
    color: var(--light);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.tg-gate-toggle:checked ~ .tg-gate-reopen {
    display: inline-flex;
}

.tg-gate-reopen svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* ------------------------------------------------------------
   responsivo da página de preços
   ------------------------------------------------------------ */
@media (min-width: 600px) {
    .tg-plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tg-avulsos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .tg-pay-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .tg-phero-text {
        width: 50%;
        max-width: none;
    }

    .tg-retainer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .tg-mentoria-card {
        grid-template-columns: 1.5fr 1fr;
        gap: 48px;
    }

    .tg-mentoria-buy {
        padding-left: 48px;
        border-left: 1px solid var(--line);
    }
}

@media (min-width: 980px) {
    .tg-plan-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* títulos que devem caber em 1 linha só no desktop */
@media (min-width: 1100px) {
    .tg-nowrap-lg {
        white-space: nowrap;
    }
}

/* mobile: hero ancorado embaixo + esconde tag opcional */
@media (max-width: 767px) {
    .tg-phero {
        align-items: flex-end;
        /* desce mais o texto: encosta perto da próxima seção sem mudar a altura */
        padding-bottom: 0px;
    }

    .tg-phero-prices-hero,
    .tg-phero-parc-hero {
        min-height: 85svh;
    }

    .tg-phero-prices-hero .tg-hero-video,
    .tg-phero-prices-hero .tg-hero-img,
    .tg-phero-prices-hero .tg-hero-end,
    .tg-phero-parc-hero .tg-hero-video,
    .tg-phero-parc-hero .tg-hero-img,
    .tg-phero-parc-hero .tg-hero-end {
        object-position: top center;
    }

    .tg-phero-prices-hero + .tg-pay {
        padding-top: 42px;
    }

    .tg-phero h1 .tg-thin {
        display: block;
    }

    .tg-pill-hide-mobile {
        display: none;
    }

    /* cabeçalho do grupo empilha: setas abaixo do título */
    .tg-plan-group-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    /* carrossel sangra até a borda da tela: 1 card inteiro + pedacinho do próximo à direita,
       sem peek à esquerda (só uma pequena calha) */
    .tg-plan-carousel {
        margin-inline: -24px;
        padding-left: 24px;
        padding-right: 0;
    }

    .tg-plan-carousel .swiper-slide {
        width: 79vw;
        /* sem o fade dos inativos: todos os cards nítidos no mobile (desktop mantém) */
        opacity: 1;
    }
}

/* ============================================================
   base de página escura: body + header invertidos
   (usada por agendar, avaliação e blog; o restante do CSS da
   antiga página software vive em 02-sites-lps/legado/css/)
   ============================================================ */
body.tg-dark-page {
    background-color: var(--dark);
    color: rgba(255, 255, 255, .65);
}

body.tg-dark-page .tg-logo-text,
body.tg-dark-page .tg-logo-text em {
    color: var(--light);
}

body.tg-dark-page .tg-menu-btn span,
body.tg-dark-page .tg-menu-btn span::before {
    background-color: var(--light);
}

body.tg-dark-page .tg-header.tg-scrolled {
    background-color: rgba(13, 13, 13, .82);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

/* ============================================================
   checkout no site (modal Pagar.me)
   ============================================================ */
.tg-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 13, 13, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-md), visibility var(--t-md);
}

.tg-checkout-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.tg-checkout-modal {
    position: relative;
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 22px;
    background: var(--light);
    box-shadow: 0 40px 90px -20px rgba(13, 27, 42, .45), 0 0 0 1px rgba(0, 0, 0, .05);
    transform: translateY(16px) scale(.99);
    transition: transform var(--t-md);
}

.tg-checkout-overlay.is-open .tg-checkout-modal {
    transform: translateY(0) scale(1);
}

.tg-checkout-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    color: var(--soft);
    background: rgba(0, 0, 0, .05);
    cursor: pointer;
    transition: background-color var(--t-md), color var(--t-md);
}

.tg-checkout-close:hover {
    background: rgba(0, 0, 0, .1);
    color: var(--dark);
}

.tg-checkout-close svg {
    width: 17px;
    height: 17px;
}

/* grid de duas colunas: resumo (aside) + pagamento (main) */
.tg-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 343px) minmax(0, 1fr);
    align-items: stretch;
}

/* ----- coluna esquerda: resumo ----- */
.tg-co-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 26px;
    background: linear-gradient(165deg, #f5f8fc 0%, #e9eef5 100%);
    border-right: 1px solid rgba(0, 0, 0, .07);
}

.tg-co-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 30px;
}

.tg-checkout-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.tg-checkout-eyebrow:empty {
    display: none;
}

.tg-checkout-title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--dark);
}

.tg-checkout-sub {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--soft);
}

/* sanfona "adicionar segundo serviço" */
.tg-co-addon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-co-addon-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1.5px dashed rgba(0, 0, 0, .2);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color var(--t-md), background-color var(--t-md);
}

.tg-co-addon-toggle:hover {
    border-color: var(--accent);
}

.tg-co-addon.is-open .tg-co-addon-toggle {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tg-co-addon-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.tg-co-addon-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.2;
}

.tg-co-addon-label em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent);
}

.tg-co-addon-chev {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform var(--t-md);
}

.tg-co-addon.is-open .tg-co-addon-chev {
    transform: rotate(180deg);
}

.tg-co-addon-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 2px 0;
}

.tg-co-addon-body[hidden] {
    display: none;
}

.tg-co-addon-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
}

.tg-co-addon-field select {
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid rgba(0, 0, 0, .14);
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--dark);
    cursor: pointer;
}

.tg-co-addon-field select:focus {
    outline: none;
    border-color: var(--accent);
}

.tg-co-addon-note {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
}

.tg-co-addon-note[hidden] {
    display: none;
}

.tg-co-addon-remove {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 11.5px;
    text-decoration: underline;
    cursor: pointer;
}

.tg-co-addon-remove:hover {
    color: var(--dark);
}

/* Seletor de parcelas do cartão (só aparece quando o produto parcela) */
.tg-co-installments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
}

.tg-co-installments[hidden] {
    display: none;
}

.tg-co-installments select {
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid rgba(0, 0, 0, .14);
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--dark);
    cursor: pointer;
}

.tg-co-installments select:focus {
    outline: none;
    border-color: var(--accent);
}

/* planos empilhados */
.tg-co-plans {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-co-plans .tg-plan {
    cursor: pointer;
}

.tg-co-plans .tg-plan[hidden] {
    display: none;
}

.tg-co-plans .tg-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tg-co-plans .tg-co-plan-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1.5px solid rgba(0, 0, 0, .12);
    border-radius: 13px;
    background: #fff;
    transition: border-color var(--t-md), box-shadow var(--t-md), background-color var(--t-md);
}

.tg-co-plans .tg-plan-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    min-width: 0;
}

.tg-co-plans .tg-plan-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.tg-co-plans .tg-plan-note {
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted);
}

.tg-co-plans .tg-plan-amount {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.tg-co-plans .tg-plan-price {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    text-align: right;
}

.tg-co-plans .tg-plan-price .tg-val {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
}

.tg-co-plans .tg-plan-price .tg-cur {
    align-self: flex-start;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 700;
}

.tg-co-plans .tg-plan-price .tg-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

.tg-co-plans .tg-plan-price .tg-suf {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
}

.tg-co-plans .tg-plan-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 5px;
    color: var(--accent);
    opacity: 0;
    transform: scale(.5);
    transition: opacity var(--t-md), transform var(--t-md);
}

.tg-co-plans .tg-plan:has(input:checked) .tg-co-plan-card {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}

.tg-co-plans .tg-plan:has(input:checked) .tg-plan-check {
    opacity: 1;
    transform: scale(1);
}

/* total */
.tg-co-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.tg-co-total-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--soft);
}

.tg-co-total-label em {
    font-style: normal;
    color: var(--muted);
}

.tg-co-total-value {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1;
    color: var(--dark);
    white-space: nowrap;
}

.tg-co-total-value .tg-val {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.tg-co-total-value .tg-cur {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
}

.tg-co-total-value .tg-num {
    font-size: 30px;
    letter-spacing: -.01em;
}

/* selo de confiança */
.tg-co-trust {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tg-co-trust-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--soft);
}

.tg-co-trust-line svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #16a34a;
}

.tg-card-brands {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tg-card-brands svg {
    height: 20px;
    width: auto;
}

/* ----- coluna direita: pagamento ----- */
.tg-co-main {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 30px 28px;
}

/* segmented control Pix / Cartão */
.tg-co-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #eef1f5;
    border: 1px solid rgba(0, 0, 0, .06);
}

.tg-co-seg label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 9px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--soft);
    cursor: pointer;
    transition: background-color var(--t-md), color var(--t-md), box-shadow var(--t-md);
}

.tg-co-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tg-co-seg label:has(input:checked) {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 4px rgba(13, 27, 42, .14);
}

.tg-co-seg label span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tg-choice-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* nota do método */
.tg-checkout-method-note {
    display: flex;
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent-deep);
}

.tg-checkout-method-note:empty {
    display: none;
}

/* campos */
.tg-co-fields {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.tg-checkout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tg-checkout-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dark);
    min-width: 0;
}

.tg-checkout-form input {
    height: 44px;
    padding: 0 13px;
    border: 1.5px solid rgba(0, 0, 0, .13);
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--dark);
    background: #fff;
    width: 100%;
    min-width: 0;
    transition: border-color var(--t-md), box-shadow var(--t-md);
}

.tg-checkout-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* bloco do cartão */
.tg-card-secure {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px;
    border: 1.5px solid rgba(0, 0, 0, .1);
    border-radius: 13px;
    background: #f7f9fb;
}

.tg-card-secure[hidden] {
    display: none;
}

.tg-card-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--soft);
}

.tg-card-secure-note svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #16a34a;
}

.tg-card-secure input {
    background: #fff;
}

.tg-checkout-row--card-id {
    grid-template-columns: 1fr 1fr;
}

.tg-field {
    position: relative;
    display: block;
}

.tg-field input {
    padding-right: 40px;
}

.tg-field-ico {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #16a34a;
    pointer-events: none;
}

.tg-checkout-row--expiry {
    grid-template-columns: 1fr 1fr;
}

.tg-checkout-row--cep-addr {
    grid-template-columns: 4fr 6fr;
}

.tg-checkout-row--address {
    grid-template-columns: 7fr 3fr;
}

/* honeypot */
.tg-checkout-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* turnstile */
.tg-turnstile:empty {
    display: none;
}

/* erro */
.tg-checkout-error {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(192, 57, 43, .08);
    font-size: 12.5px;
    font-weight: 600;
    color: #c0392b;
}

.tg-checkout-error[hidden] {
    display: none;
}

/* botão */
.tg-checkout-submit {
    height: 54px;
    margin-top: 1px;
    padding: 0 24px;
    width: 100%;
    border-radius: 14px;
    font-size: 15px;
    cursor: pointer;
}

.tg-checkout-submit:hover {
    transform: translateY(-1px);
    background-color: var(--accent-deep);
    box-shadow: 0 12px 28px rgba(18, 131, 196, .32);
}

.tg-checkout-submit:disabled {
    opacity: .6;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

/* esconde os campos quando o resultado (Pix/confirmação) aparece */
.tg-co-main:has(.tg-checkout-result:not([hidden])) > .tg-co-seg,
.tg-co-main:has(.tg-checkout-result:not([hidden])) > .tg-checkout-method-note,
.tg-co-main:has(.tg-checkout-result:not([hidden])) > .tg-co-fields,
.tg-co-main:has(.tg-checkout-result:not([hidden])) > .tg-turnstile {
    display: none;
}

/* depois do pagamento gerado, trava a escolha de plano (só UX; o valor já foi enviado).
   reage ao estado do DOM: se o Pix falha e o resultado some, destrava sozinho. */
.tg-checkout-form:has(.tg-checkout-result:not([hidden])) .tg-co-plans {
    pointer-events: none;
    opacity: .55;
}

/* resultado */
.tg-checkout-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-checkout-result[hidden] {
    display: none;
}

.tg-checkout-result h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--dark);
}

.tg-checkout-result p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--soft);
}

.tg-checkout-copy {
    height: 48px;
    width: 100%;
    border-radius: 12px;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
}

/* estado do Pix */
.tg-pix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-pix-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tg-pix-head svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.tg-pix-head h4 {
    margin: 0;
}

.tg-pix-qr-card {
    align-self: center;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.tg-checkout-qr {
    display: block;
    width: 180px;
    height: 180px;
}

.tg-pix-code {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #f7f9fb;
}

.tg-pix-code code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--dark);
    word-break: break-all;
}

.tg-pix-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .04);
    font-size: 12.5px;
    color: var(--soft);
}

.tg-spinner {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: tg-spin .7s linear infinite;
}

@keyframes tg-spin {
    to { transform: rotate(360deg); }
}

/* estado confirmado */
.tg-checkout-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    text-align: center;
}

.tg-checkout-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(22, 163, 74, .14);
    color: #16a34a;
}

.tg-checkout-done-icon svg {
    width: 27px;
    height: 27px;
}

.tg-checkout-done h4 {
    margin: 0;
}

/* ----- responsivo ----- */
@media (max-width: 720px) {
    .tg-co-grid {
        grid-template-columns: 1fr;
    }

    .tg-co-aside {
        gap: 13px;
        padding: 26px 22px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }

    .tg-co-total {
        margin-top: 4px;
    }

    .tg-co-main {
        padding: 20px 22px 24px;
    }
}

@media (max-width: 480px) {
    .tg-checkout-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .tg-checkout-modal {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
    }

    .tg-checkout-overlay.is-open .tg-checkout-modal {
        transform: translateY(0);
    }

    .tg-checkout-row--name-doc,
    .tg-checkout-row--contact,
    .tg-checkout-row--card-id {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   typeform do site (formulário dinâmico fullscreen)
   ============================================================ */
.tg-tf-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    background: #0c0c0d;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-md), visibility var(--t-md);
}

.tg-tf-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.tg-tf-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, .1);
}

.tg-tf-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: width var(--t-md);
}

.tg-tf-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: background-color var(--t-md);
}

.tg-tf-close:hover {
    background: rgba(255, 255, 255, .18);
}

.tg-tf-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-tf-step {
    width: 100%;
    max-width: 640px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease, transform .4s ease;
}

.tg-tf-step.is-in {
    opacity: 1;
    transform: translateY(0);
}

.tg-tf-eyebrow,
.tg-tf-count {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.tg-tf-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
}

.tg-tf-q {
    font-family: var(--font-display);
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
    color: #fff;
}

.tg-tf-opt {
    font-size: .6em;
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
}

.tg-tf-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    margin: 14px 0 28px;
    max-width: 540px;
}

.tg-tf-sub-highlight {
    font-weight: 700;
    color: var(--accent);
}

.tg-tf-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}

.tg-tf-option {
    text-align: left;
    padding: 18px 22px;
    border: 1.5px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, .03);
    transition: border-color var(--t-md), background-color var(--t-md), transform var(--t-md);
}

.tg-tf-option:hover,
.tg-tf-option.is-sel {
    border-color: var(--accent);
    background: rgba(18, 131, 196, .14);
    transform: translateX(4px);
}

.tg-tf-input {
    width: 100%;
    margin-top: 22px;
    padding: 14px 4px;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    font-family: inherit;
    font-size: clamp(18px, 3vw, 24px);
    color: #fff;
    background: transparent;
    transition: border-color var(--t-md);
}

textarea.tg-tf-input {
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
}

.tg-tf-input::placeholder {
    color: rgba(255, 255, 255, .3);
}

.tg-tf-input:focus {
    outline: none;
    border-color: var(--accent);
}

.tg-tf-input + .tg-tf-input {
    margin-top: 16px;
}

.tg-tf-error {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #ff7a7a;
}

.tg-tf-step .tg-button {
    margin-top: 28px;
    padding: 0 36px;
}

.tg-tf-step [data-tg-turnstile] {
    margin-top: 20px;
}

.tg-tf-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 64px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

.tg-tf-back {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--t-md);
}

.tg-tf-back:hover {
    color: #fff;
}

.tg-tf-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
}

@media (max-width: 767px) {
    .tg-tf-foot {
        height: 56px;
    }

    .tg-tf-hint {
        display: none;
    }
}

/* ============================================================
   BANDAS COM CORTE (ritmo preto/branco da home)
   .tg-band-light: fundo claro com trama quadriculada sutil.
   .tg-band-cut: corte diagonal em S (mesmo recorte do syntaxlab).
   .tg-cutbg: wrapper que pinta os vãos do clip-path com a cor
   das seções vizinhas (--cut-top / --cut-bottom).
   ============================================================ */

.tg-band-light {
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(13, 13, 13, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 13, 13, .025) 1px, transparent 1px);
    background-size: 44px 44px;
}

.tg-band-cut {
    --cut: clamp(22px, 3.5vw, 48px);
    clip-path: polygon(
        0 var(--cut),
        54% var(--cut),
        60% 0,
        100% 0,
        100% calc(100% - var(--cut)),
        60% calc(100% - var(--cut)),
        54% 100%,
        0 100%
    );
}

.tg-cutbg {
    background: linear-gradient(
        180deg,
        var(--cut-top, var(--dark)) 0%,
        var(--cut-top, var(--dark)) 50%,
        var(--cut-bottom, var(--dark)) 50%,
        var(--cut-bottom, var(--dark)) 100%
    );
}

/* ============================================================
   HOME (tg-hm-*): curso low ticket, mentoria e pré-venda.
   Estética: cards claros de raio generoso, sombra longa e suave,
   kicker em pill e azul só como destaque (referência ryodesign).
   ============================================================ */

/* ---- cabeçalho de seção ---- */
.tg-hm-head {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
}

.tg-hm-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--dark);
    text-wrap: balance;
    margin: 18px 0 16px;
}

.tg-hm-head-dark h2 {
    color: var(--light);
}

/* Logos no lugar dos títulos dos produtos. Ambos mantêm a mesma largura visual. */
.tg-hm-war-logo svg,
.tg-hm-sites-logo svg {
    display: block;
    width: min(403px, 90%);
    height: auto;
    margin: 0 auto;
}

.tg-hm-blue {
    color: var(--accent);
}

.tg-hm-lead {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    color: var(--soft);
    text-wrap: pretty;
}

.tg-hm-head-dark .tg-hm-lead {
    color: rgba(255, 255, 255, .64);
}

/* ---- kicker em pill ---- */
.tg-hm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border: 1px solid rgba(13, 13, 13, .12);
    border-radius: 999px;
    background: var(--light);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--soft);
    box-shadow: 0 10px 26px rgba(13, 13, 13, .06);
}

.tg-hm-kicker i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.tg-hm-kicker-dark {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .72);
    box-shadow: none;
}

/* ---- seção do curso (banda clara) ---- */
.tg-hm-curso {
    position: relative;
    padding: calc(96px + clamp(22px, 3.5vw, 48px)) 0 calc(110px + clamp(22px, 3.5vw, 48px));
}

/* passos como colunas editoriais: fio no topo, numeral gigante fantasma,
   nada de caixa. O fio azul cresce no hover, o numeral acende. */
.tg-hm-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 56px);
    margin-bottom: clamp(56px, 7vw, 84px);
}

.tg-hm-step {
    position: relative;
    padding: 24px 0 0;
    border-top: 1px solid rgba(13, 13, 13, .16);
}

.tg-hm-step::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--accent);
    transition: width var(--t-md);
}

.tg-hm-step:hover::before {
    width: 82px;
}

.tg-hm-step-ix {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(42px, 4.4vw, 56px);
    font-weight: 200;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgba(13, 13, 13, .18);
    margin-bottom: 18px;
    transition: color var(--t-md);
}

.tg-hm-step:hover .tg-hm-step-ix {
    color: var(--accent);
}

.tg-hm-step h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dark);
    margin-bottom: 10px;
}

.tg-hm-step p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--soft);
}

/* ---- oferta: lista aberta à esquerda, buy box à direita ---- */
.tg-hm-offer {
    position: relative;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

/* halo atrás do buy box: ancora o olhar sem virar mais um card */
.tg-hm-offer::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -170px;
    width: 620px;
    height: 620px;
    background: radial-gradient(closest-side, rgba(18, 131, 196, .12), transparent);
    pointer-events: none;
}

.tg-hm-includes {
    padding-top: 4px;
}

.tg-hm-includes h3 {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.2vw, 25px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dark);
    margin-bottom: 6px;
}

.tg-hm-includes ul {
    list-style: none;
}

.tg-hm-includes li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid rgba(13, 13, 13, .08);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--dark);
}

.tg-hm-includes li svg {
    width: 17px;
    height: 17px;
    color: var(--accent);
    margin-top: 4px;
}

.tg-hm-bonus {
    margin-top: 26px;
}

.tg-hm-bonus h4 {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.tg-hm-bonus li:last-child {
    border-bottom: 0;
}

/* ---- buy box: o único card da seção. Escuro, com grão fino, aurora
   interna, fio de luz percorrendo a borda e Liquid Ether ---- */
@property --tg-beam {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.tg-hm-price {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 36px 30px;
    border: 1px solid rgba(120, 200, 255, .2);
    border-radius: 26px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(130% 90% at 50% -10%, rgba(18, 131, 196, .38), transparent 58%),
        linear-gradient(180deg, #121a22, #0b0f14 62%);
    box-shadow: 0 40px 90px rgba(9, 42, 63, .32);
}

/* fio de luz girando na borda */
.tg-hm-price::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--tg-beam),
        transparent 0deg 286deg,
        rgba(125, 208, 255, .95) 322deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: tg-beam-spin 7s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes tg-beam-spin {
    to {
        --tg-beam: 360deg;
    }
}

/* o mesmo fluido WebGL do card da pré-venda, mais sutil aqui;
   o conteúdo sobe pra z1 pra ficar acima do canvas */
.tg-hm-price .tg-liquid-ether {
    opacity: .5;
}

.tg-hm-price > :not(.tg-liquid-ether) {
    position: relative;
    z-index: 1;
}

.tg-hm-price-tag {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(150, 214, 255, .92);
    margin-bottom: 14px;
}

/* logo do curso em branco (cópia própria do SVG, sem estilo interno,
   pra não vazar cor pro logo preto do topo da seção) */
.tg-hm-price-logo {
    display: block;
    margin: 2px 0 14px;
}

.tg-hm-price-logo svg {
    display: block;
    width: 208px;
    height: auto;
}

.tg-hm-price-value {
    font-family: var(--font-display);
    font-size: clamp(50px, 6vw, 64px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--light);
}

.tg-hm-price-mult {
    font-size: .44em;
    font-weight: 300;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .78);
    margin-right: 9px;
}

.tg-hm-price-cur {
    font-size: .36em;
    font-weight: 600;
    vertical-align: .95em;
    margin-right: 4px;
    color: rgba(255, 255, 255, .55);
}

.tg-hm-price-cents {
    font-size: .55em;
}

.tg-hm-price-note {
    font-size: 14px;
    color: rgba(255, 255, 255, .55);
    margin: 12px 0 26px;
}

.tg-hm-price-note strong {
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}

.tg-hm-price-cta {
    width: auto;
    max-width: 100%;
    align-self: center;
}

.tg-hm-price-garantia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 13.5px;
    font-weight: 600;
    color: #45e0a1;
}

.tg-hm-price-garantia svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* selos de confiança, mesmo vocabulário do checkout */
.tg-hm-price-trust {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.tg-hm-price-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    line-height: 1.35;
}

.tg-hm-price-trust svg {
    width: 19px;
    height: 19px;
    color: rgba(140, 208, 255, .95);
    margin-bottom: 4px;
}

.tg-hm-price-trust strong {
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.tg-hm-price-trust small {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
}

.tg-hm-price-req {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .42);
}

/* ---- mentoria war room (banda preta) ---- */
.tg-hm-mentoria {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    background-color: var(--dark);
}

/* marca d'água oni no fundo da seção (branca, sutil, vazando pela esquerda) */
.tg-hm-war-bgicon {
    position: absolute;
    top: 50px;
    left: -180px;
    width: clamp(260px, 30vw, 460px);
    color: var(--light);
    opacity: .025;
    pointer-events: none;
}

.tg-hm-war-bgicon svg,
.tg-hm-war-bgicon img {
    display: block;
    width: 100%;
    height: auto;
}

/* conteúdo acima da marca d'água (absoluto pinta por cima de estático) */
.tg-hm-mentoria .tg-container {
    position: relative;
    z-index: 1;
}

.tg-hm-war {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

.tg-hm-war-card {
    padding: 30px 28px 32px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
    transition: transform var(--t-md), border-color var(--t-md), background-color var(--t-md);
}

.tg-hm-war-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 131, 196, .45);
    background: rgba(255, 255, 255, .06);
}

/* chip com o ícone war room (espadas cruzadas) no lugar do número */
.tg-hm-war-ix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    border: 1px solid rgba(18, 131, 196, .3);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 18px;
}

.tg-hm-war-ix svg {
    width: 26px;
    height: 26px;
}

.tg-hm-war-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--light);
    margin-bottom: 10px;
}

.tg-hm-war-card p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .62);
}

.tg-hm-war-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.tg-hm-war-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgba(255, 255, 255, .62);
}

.tg-hm-war-price strong {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--light);
}

.tg-hm-war-price-sub {
    line-height: 1.4;
}

/* ---- depoimentos com corte (compensa o recorte) ---- */
.tg-depo.tg-band-cut {
    padding: calc(100px + clamp(22px, 3.5vw, 48px)) 0;
}

/* ---- pré-venda vibe coding ---- */
.tg-hm-pre {
    position: relative;
    overflow: hidden;
    padding: 110px 0 130px;
    background-color: var(--dark);
}

/* brilho no topo-esquerdo (não no centro): o corte da banda clara acima
   revela o vão escuro nesse lado, e o blur preenche em vez de cortar seco */
.tg-hm-pre-glow {
    position: absolute;
    top: -220px;
    left: -180px;
    width: 900px;
    height: 520px;
    background: radial-gradient(closest-side, rgba(18, 131, 196, .16), transparent);
    pointer-events: none;
}

.tg-hm-pre-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 60px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(18, 131, 196, .2), transparent 52%),
        rgba(255, 255, 255, .03);
    text-align: center;
}

/* Liquid Ether adaptado para WebGL nativo. O radial acima permanece como
   fallback quando WebGL ou movimento animado não estão disponíveis. */
.tg-liquid-ether {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    opacity: .82;
}

.tg-liquid-ether::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 10, 16, .08), rgba(5, 10, 16, .38)),
        radial-gradient(circle at 50% 15%, transparent 0, rgba(7, 12, 18, .18) 64%, rgba(7, 12, 18, .42) 100%);
}

.tg-liquid-ether canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.tg-hm-pre-card > :not(.tg-liquid-ether) {
    position: relative;
    z-index: 1;
}

.tg-hm-pre-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--light);
    text-wrap: balance;
    margin: 18px 0 14px;
}

.tg-hm-pre-card .tg-hm-lead {
    color: rgba(255, 255, 255, .64);
    max-width: 640px;
    margin: 0 auto;
}

.tg-hm-pre-offer {
    max-width: 640px;
    margin: 18px auto 34px;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

.tg-hm-pre-offer strong {
    color: var(--light);
}

/* o form em si abre no overlay do typeform; o card fica só com o CTA */
.tg-hm-pre-cta {
    margin-top: 6px;
}

.tg-hm-pre-note {
    margin-top: 16px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .45);
}

/* ---- responsivo ---- */
@media (max-width: 1024px) {
    .tg-hm-war {
        grid-template-columns: 1fr 1fr;
    }

    .tg-hm-offer {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .tg-hm-offer::before {
        display: none;
    }

    .tg-hm-price {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    /* passos empilhados: numeral à esquerda, texto à direita */
    .tg-hm-steps {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 48px;
    }

    .tg-hm-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 18px;
        padding: 20px 0;
    }

    .tg-hm-step-ix {
        grid-row: 1 / span 2;
        font-size: 38px;
        margin: 4px 0 0;
    }

    .tg-hm-step h3 {
        margin-bottom: 6px;
    }
}

@media (max-width: 640px) {
    .tg-hm-pre-glow {
        top: auto;
        bottom: -220px;
    }

    .tg-hm-head {
        margin-bottom: 40px;
    }

    .tg-hm-war {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tg-hm-price {
        padding: 36px 20px 26px;
    }

    .tg-hm-pre-cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-liquid-ether {
        display: none;
    }

    .tg-hm-price::before {
        display: none;
    }
}

/* âncoras da home: compensa o header fixo no scroll até a seção */
#curso,
#mentoria,
#depoimentos,
#vibe-coding {
    scroll-margin-top: 84px;
}