/* ============================================================================
   A PAGINA /studios: os Studios do Cria ai!, venda e checkout juntos.
   Criado em 29/10/2026 (lancamento dos Studios, scratchpad/studios/CONTRATO-STUDIOS.md).
   Refeito em 29/10/2026 pelo DECK FINAL (scratchpad/ajustes/deck-final.md). A dona, ao ver as
   previas: "esse leyout ta totalmente desajustado" e "ajuste todas as versoes de mobile, desktop e
   tablet pra se ajustar automaticamente".

   POR QUE UM ARQUIVO POR CIMA DO extras.css, E NAO UMA COPIA DELE:
   A /studios usa o MESMO extras.js como motor e os MESMOS componentes da /extras (topo, letreiro,
   botoes, pacotes, perguntas, rodape, barra do polegar e o checkout inteiro). Aqui so mora o que
   muda: o TEMA CLARO dos Studios e as pecas que so existem nesta pagina (classes st-). Tudo no
   escopo body.st-pagina: a /extras nao carrega este arquivo.

   O LAYOUT E O MESMO SISTEMA DA /extras (extras.css, "O SISTEMA DE LAYOUT DO DECK FINAL"):
     - um container so (.ex-wrap): a mesma largura maxima (--ex-larg, 1120px) e a mesma calha
       fluida (--ex-calha, 16px no celular ate 40px no monitor) em TODAS as secoes;
     - um ritmo vertical so (--ex-ritmo) entre as secoes;
     - todo cabecalho de secao centrado do mesmo jeito (sobrelinha, titulo, apoio);
     - grades que dividem a largura inteira em colunas iguais, escolhidas para a ultima linha nunca
       ficar pela metade (4 destaques em 1/2/4, 3 passos em 1/3, 4 videos em 2/4, 3 pacotes em
       1/3), com cartoes de mesma altura na mesma linha;
     - imagens e videos com aspect-ratio (nada pula quando a midia chega) e tamanhos em clamp(),
       sem largura fixa que quebre entre os pontos de corte.
   Conferido com prints e medida de margem em 360, 390, 430, 768, 820, 1024, 1180, 1280, 1366,
   1440 e 1920 px (scratchpad/ajustes/studios/medir.mjs).

   O TEMA, em quatro cores (contrato, secao 6, "Cor dos Studios"):
     creme  #FBF1E1  o fundo da pagina
     azul   #1E3A8A  texto e titulos (9,3:1 sobre o creme, 8,2:1 sobre o bege)
     laranja #F28C28 SO preenchimento e destaque: adesivo, "+", pontos, marca-texto, bordas.
                     Nunca texto pequeno: 2,2:1 sobre o creme. O azul sobre o laranja da 4,2:1,
                     que so passa em letra grande ou negrito de 18,7px para cima (o adesivo).
     bege   #EFE3CC  as caixas
   Os tons de apoio do texto sao azuis solidos medidos pela formula da WCAG:
     #33498A  lead e texto corrido     7,6:1 creme, 6,7:1 bege, 8,5:1 branco
     #4B5B8C  notas, rotulos, apagados 5,9:1 creme, 5,2:1 bege, 6,6:1 branco
     #B42318  so erro de campo          5,9:1 creme, 6,6:1 branco

   A TROCA DOS TOKENS E O PULO DO GATO. No extras.css o --cream e cor de TEXTO e o --bg e fundo.
   Redefinindo os dois (e os outros do marca.css e do extras.css) no body, quase tudo vira claro
   sozinho. O que sobra e o contrario: os lugares onde o creme era texto SOBRE uma superficie escura
   (o "escolhido" azul do checkout, a legenda por cima dos videos, os selos laranja). Esses estao
   listados um a um, com o texto em branco ou em azul.
   ============================================================================ */

/* A RESERVA DA FREDOKA. Ate a fonte chegar (display=swap), o titulo sai numa fonte do aparelho.
   A Fredoka 700 e mais estreita que a Arial Bold no mesmo corpo (93%, medido em 29/10/2026 no
   Chrome): com o size-adjust de 93% o titulo nao muda de numero de linhas quando a fonte certa
   chega. Os overrides de altura sao os numeros da Fredoka divididos pelo size-adjust. */
@font-face {
  font-family: 'Fredoka-fb'; font-weight: 500 900; size-adjust: 93%;
  ascent-override: 104.3%; descent-override: 25.8%; line-gap-override: 0%;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
}

body.st-pagina {
  /* ---- as cores dos Studios ---- */
  --st-creme: #FBF1E1;
  --st-creme-claro: #FFFBF3;   /* cartoes um tom acima do fundo */
  --st-logo-fundo: #FDF4E2;    /* o fundo das logos do POV e do UGC (medido no arquivo) */
  --st-logo-fundo-motion: #F6EBD8; /* o da logo do FLOW MOTION, um tom mais quente */
  --st-bege: #EFE3CC;
  --st-pessego: #FBE1C2;       /* o creme alaranjado dos destaques */
  --st-azul: #1E3A8A;
  --st-azul-2: #33498A;
  --st-azul-3: #4B5B8C;
  --st-laranja: #F28C28;
  --st-laranja-tinta: rgba(242, 140, 40, .2);
  --st-fio: rgba(30, 58, 138, .12);
  --st-erro: #B42318;
  --st-sombra: 0 16px 30px -20px rgba(30, 58, 138, .55);
  --st-raio: clamp(18px, 2vw, 26px);
  /* o espaco entre o cabecalho de uma secao e o conteudo dela: o mesmo em toda a pagina */
  --st-respiro: clamp(22px, 3vw, 40px);

  /* ---- os tokens do marca.css e do estilo.css, agora claros ---- */
  --bg: #FBF1E1;
  --surface: #F6EAD5;
  --surface2: #EFE3CC;
  --line: rgba(30, 58, 138, .16);
  --grafite: #1E3A8A;
  --orange: #F28C28;
  --orange-dim: #D9741A;
  --amber: #F28C28;
  --blue: #1E3A8A;
  --blue-vibe: #1E3A8A;
  --shopee: #1E3A8A;
  --cream: #1E3A8A;     /* ATENCAO: no extras.css e cor de TEXTO */
  --white: #1E3A8A;     /* a cor do texto do body no estilo.css */
  --muted: #4B5B8C;

  /* ---- as fontes: Fredoka nos titulos, Manrope no corpo ---- */
  --fonte-titulo: 'Fredoka', 'Fredoka-fb', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Manrope', 'Manrope-fb', system-ui, -apple-system, sans-serif;

  /* ---- os tokens do extras.css ---- */
  /* o botao forte e AZUL com letra branca (10,4:1): o laranja com letra branca reprova (2,5:1) */
  --ex-cta: linear-gradient(180deg, #2445A0, #1E3A8A);
  --ex-vidro: rgba(242, 140, 40, .14);
  --ex-borda: rgba(242, 140, 40, .6);
  --ex-caixa: linear-gradient(160deg, #FFFBF3, #FBF3E4);
  --ex-creme-90: #1E3A8A;
  --ex-creme-82: #33498A;
  --ex-creme-60: #4B5B8C;
  --ex-fio: rgba(30, 58, 138, .1);
  --ex-linha: rgba(30, 58, 138, .14);
  /* o bloco do checkout continua se destacando: folha bege, cartoes quase brancos, escolhido azul */
  --ex-claro-fundo: #EFE3CC;
  --ex-claro-cartao: #FFFBF3;
  --ex-claro-texto: #1E3A8A;
  --ex-claro-sec: #3B4F86;      /* 6,2:1 sobre o bege, 7,7:1 sobre o cartao */
  --ex-claro-destaque: #1E3A8A; /* era o vermelho-laranja da /extras: aqui o destaque e o azul */
  --ex-claro-fio: rgba(30, 58, 138, .18);
  --ex-claro-escolhido: #1E3A8A;

  /* o fundo nunca chapado (a regra do estilo.css), agora em luz quente sobre o creme */
  background:
    radial-gradient(ellipse 1100px 700px at 8% -10%, rgba(242, 140, 40, .08), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 100%, rgba(30, 58, 138, .05), transparent 65%),
    #FBF1E1;
  background-attachment: fixed;
  color: var(--st-azul);
  overflow-x: hidden;
}
/* O GRAO DO estilo.css (overlay a 5%) foi feito para o azul noite. Sobre o creme, em multiply e
   bem mais baixo, ele vira textura de papel, e nao sujeira. */
body.st-pagina::before { opacity: .035; mix-blend-mode: multiply; }

.st-pagina ::selection { background: rgba(242, 140, 40, .35); color: var(--st-azul); }

/* O VERSO DO LANCAMENTO (29/10/2026): .st-so-depois e o texto que so vale depois de 01/11. Ele mora
   logo depois de um [data-so-lancamento]; quando o extras.js esconde o do lancamento (a vitrine
   manda fimDoLancamento: null), o seguinte aparece. Sem JS ou durante o lancamento, so a versao do
   lancamento. O seletor de irmao ignora o texto entre os dois. */
.st-so-depois { display: none !important; }
[data-so-lancamento][hidden] + .st-so-depois { display: inline !important; }
/* depois de 02/11, antes da tabela chegar (extras.css, .ex-pos-lanc): o do lancamento ja some e o
   verso aparece no lugar, sem esperar a vitrine */
.ex-pos-lanc [data-so-lancamento] + .st-so-depois { display: inline !important; }
/* o "R$" pequeno fica fora do [data-preco] (data-formato="numero"): some junto com o numero */
.ex-pos-lanc .st-preco-num small, .ex-pos-lanc .st-fecho-preco b small { visibility: hidden; }
/* 30/10/2026: a frase de preco some inteira, e nao so o numero (extras.css, .ex-com-preco): os blocos
   de preco do topo, do fecho do par e do "tudo junto" ficam ocultos sem mudar de tamanho */
.ex-pos-lanc .st-preco, .ex-pos-lanc .st-fecho-ancora, .ex-pos-lanc .st-fecho-preco, .ex-pos-lanc .st-tudo-preco { visibility: hidden; }

/* ============================================================================
   TOPO. A logo do Cria ai! tem o "ria" em creme e sumia sobre o creme: ela ganha um selo azul
   por tras, do jeito que foi desenhada (sobre azul). Sem imagem nova.
   ============================================================================ */
.st-pagina .nav-logo {
  background: url("/fotos/marca/logo-horizontal.png") center / 84% auto no-repeat, var(--st-azul);
  border-radius: 12px;
  box-shadow: 0 6px 16px -8px rgba(30, 58, 138, .6);
}
.st-pagina .ex-topo .nav-logo { width: 112px; height: 40px; }
.st-pagina .ex-topo .nav-entrar { color: var(--st-azul-2); font-weight: 700; }
.st-pagina .ex-topo .nav-entrar:hover { color: var(--st-azul); }
.st-pagina .ex-topo-criaai { color: var(--st-azul-2); text-decoration-color: rgba(242, 140, 40, .75); }
.st-pagina .ex-topo-criaai:hover { color: var(--st-azul); }
.st-pagina .idioma-btn:hover { background: rgba(30, 58, 138, .06); border-color: rgba(242, 140, 40, .7); }
.st-pagina .idioma-btn:focus-visible { outline-color: var(--st-azul); }
.st-pagina .footer .idioma-btn { border-color: rgba(30, 58, 138, .3); color: var(--st-azul); }

/* ============================================================================
   O LETREIRO, claro: faixa bege, letra azul, as palavras fortes com marca-texto laranja e as
   faiscas em laranja (desenho, nao texto: o letreiro inteiro e aria-hidden)
   ============================================================================ */
.st-pagina .ex-letreiro.marquee.orange {
  background: var(--st-bege);
  border-top: 1px solid rgba(30, 58, 138, .08);
  border-bottom: 1px solid rgba(30, 58, 138, .14);
}
.st-pagina .ex-letreiro .track { color: var(--st-azul); }
.st-pagina .ex-letreiro.marquee.orange .track b {
  color: var(--st-azul); font-weight: 800;
  background: linear-gradient(transparent 58%, rgba(242, 140, 40, .45) 58%, rgba(242, 140, 40, .45) 92%, transparent 92%);
}
.st-pagina .ex-letreiro .st-sep { font-style: normal; color: var(--st-laranja); margin: 0 .5em; }

/* ============================================================================
   BOTOES. O forte e uma pilula AZUL com letra branca e o volume das letras da logo (a luz em
   cima, a sombra embaixo). Fredoka, sem caixa alta: a pagina fala baixo e com calor.
   ============================================================================ */
.st-pagina .ex-bt {
  font-family: var(--fonte-titulo) !important; font-weight: 600;
  font-size: 17px; letter-spacing: .01em; text-transform: none;
}
.st-pagina .ex-bt-forte {
  color: #fff;
  box-shadow: 0 14px 26px -14px rgba(30, 58, 138, .85), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(10, 20, 60, .22);
}
.st-pagina .ex-bt-forte:hover { filter: brightness(1.1); box-shadow: 0 16px 28px -14px rgba(30, 58, 138, .9), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -3px 0 rgba(10, 20, 60, .22); }
.st-pagina .ex-bt:focus-visible { outline: 3px solid var(--st-azul); outline-offset: 3px; }
.st-pagina .ex-bt-2l small { font-size: 12.5px; opacity: .92; letter-spacing: .02em; }
/* O PRECO DENTRO DO BOTAO e um <span data-preco> (o extras.js reescreve so ele). O texto e o preco
   moram juntos num .st-bt-txt, UM item so do flex: quando o botao aperta, ele quebra como frase, e o
   espaco entre "por" e o preco e o espaco de verdade (o gap de 10px do extras.css lia como duplo). */
.st-pagina .ex-bt, .st-pagina .ex-bt-l1 { gap: 0; }
.st-pagina .ex-bt-2l { gap: 3px; }
.st-bt-txt { min-width: 0; }
.st-pagina .ex-bt > [data-preco], .st-pagina .ex-bt-l1 > [data-preco] { margin-left: .28em; }
.st-pagina .ex-bt [aria-hidden="true"] { margin-left: .5em; }
/* a faisca de luz que atravessa o botao do topo (duas passadas e para, extras.css) */
.st-pagina .ex-bt-hero::after, .st-pagina .st-bt-hero::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: exBrilho 5s ease-in-out 1.2s 2;
}
.st-pagina .ex-link-um { color: var(--st-azul-2); text-decoration-color: rgba(30, 58, 138, .35); }
.st-pagina .ex-link-um:hover { color: var(--st-azul); text-decoration-color: var(--st-laranja); }
.st-pagina .ex-link-um:focus-visible { outline: 3px solid var(--st-azul); outline-offset: 2px; border-radius: 8px; }
.st-pagina .ex-micro { color: var(--st-azul-3); }
.st-pagina .ex-pular { background: var(--st-azul); color: #fff; }
/* O BLOCO DO BOTAO: sempre centrado, na mesma coluna de leitura, com o link EMBAIXO em todas as
   larguras (o extras.css poe o link ao lado no computador, e o par botao + link ficava com o botao
   puxado para a esquerda do eixo da pagina) */
.st-pagina .ex-cta-bloco { flex-direction: column; align-items: center; max-width: 460px; margin-left: auto; margin-right: auto; }
.st-pagina .ex-cta-bloco .ex-bt { width: 100%; min-width: 0; }
.st-pagina .ex-cta-bloco .ex-link-um { white-space: normal; text-align: center; }

/* ============================================================================
   S1. A PRIMEIRA DOBRA. Centrada em todas as larguras, como um lancamento: as duas logos (as
   protagonistas), o titulo, a frase de apoio e a oferta. Da tablet para cima a oferta vira um
   cartao; do notebook para cima, o preco a esquerda e o botao a direita.
   ============================================================================ */
.st-hero { position: relative; overflow: hidden; padding: clamp(10px, 2vw, 28px) 0 clamp(34px, 5vw, 72px); }
/* a luz do topo: laranja a direita, um azul quase nada a esquerda, apagando para baixo */
.st-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 380px 300px at 100% 10%, rgba(242, 140, 40, .22), transparent 70%),
    radial-gradient(ellipse 520px 380px at 0% 0%, rgba(30, 58, 138, .09), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.st-hero > .ex-wrap { position: relative; z-index: 1; }
.st-hero-grade { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

/* --- as duas logos, como adesivos ------------------------------------------------ */
/* o vao entre os dois e largo o bastante para o "+" morder so o creme da borda das logos */
.st-hero-logos {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 6vw, 60px); width: 100%; max-width: 860px;
  padding: 4px clamp(4px, 1vw, 10px) clamp(16px, 2vw, 24px);
}
.st-logo { position: relative; margin: 0; min-width: 0; }
.st-logo-moldura {
  display: block; overflow: hidden; border-radius: clamp(18px, 2.4vw, 28px);
  background: var(--st-logo-fundo);
  border: 1.5px solid rgba(30, 58, 138, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 30px -18px rgba(30, 58, 138, .55), 0 6px 12px -8px rgba(242, 140, 40, .45);
}
/* girados o bastante para parecer adesivo, e nunca a ponto de sair da calha */
.st-logo-pov .st-logo-moldura { transform: rotate(-2.2deg); }
.st-logo-ugc .st-logo-moldura { transform: rotate(2.2deg); }
/* recorte na faixa das letras (as letras ocupam de 24% a 79% da altura do quadrado) */
.st-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1254 / 780; object-fit: cover; }
/* a legenda de cada um, uma pilula azul mordendo a borda de baixo */
.st-logo figcaption {
  position: absolute; z-index: 2; left: 50%; bottom: -11px; transform: translateX(-50%);
  max-width: calc(100% + 16px); overflow: hidden; text-overflow: ellipsis;
  padding: 5px 11px; border-radius: 100px;
  background: var(--st-azul); color: #fff;
  font-family: var(--fonte-corpo); font-size: clamp(11.5px, 1.2vw + 7px, 14px); font-weight: 700; line-height: 1.25; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(30, 58, 138, .7);
}
/* O "+" LARANJA entre os dois: a oferta (os 2 juntos) desenhada antes de qualquer palavra. A
   cruz e feita de duas barras (o "+" da fonte nunca fica no centro exato do circulo); o
   caractere fica no HTML para quem le sem CSS. Tamanho fluido: --st-mais. */
.st-mais {
  --st-mais: clamp(38px, 4vw + 22px, 58px);
  position: absolute; z-index: 3; left: 50%; top: calc(50% - 6px);
  width: var(--st-mais); height: var(--st-mais); margin: calc(var(--st-mais) / -2) 0 0 calc(var(--st-mais) / -2); border-radius: 50%;
  background: var(--st-laranja); font-size: 0; color: transparent;
  box-shadow: 0 0 0 clamp(4px, .6vw, 6px) var(--st-creme), 0 12px 20px -8px rgba(242, 140, 40, .9), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.st-mais::before, .st-mais::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 3px; background: var(--st-azul);
  transform: translate(-50%, -50%);
}
.st-mais::before { width: 45%; height: 12%; }
.st-mais::after { width: 12%; height: 45%; }

/* --- a mensagem -------------------------------------------------------------------- */
.st-hero-msg { position: relative; width: 100%; max-width: 920px; padding-top: clamp(12px, 2.4vw, 30px); }
.st-selo {
  display: none; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px;
  font-family: var(--fonte-corpo); font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--st-azul-2);
}
.st-selo-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--st-laranja); box-shadow: 0 0 0 3px rgba(242, 140, 40, .25); flex: none; }
.st-h1 {
  margin: 0 auto; max-width: 20ch;
  font-family: var(--fonte-titulo) !important; font-weight: 700 !important;
  font-size: clamp(29px, 3.6vw + 16px, 62px); line-height: 1.04; letter-spacing: -.02em !important;
  color: var(--st-azul);
  text-wrap: balance;
}
/* a segunda metade do titulo com MARCA-TEXTO laranja: o laranja como preenchimento, nunca como
   letra, e acompanhando a quebra de linha */
.st-h1 i, .st-pagina .ex-h2 i, .st-pagina .ex-h3 i, .st-junto-tit i {
  font-style: normal; color: var(--st-azul); text-decoration: none;
  background: linear-gradient(transparent 58%, rgba(242, 140, 40, .45) 58%, rgba(242, 140, 40, .45) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
}
.st-sub {
  margin: clamp(10px, 1.6vw, 18px) auto 0; max-width: 44em;
  font-size: clamp(14.5px, .5vw + 12.5px, 18px); line-height: 1.55; color: var(--st-azul-2);
  text-wrap: pretty;
}
.st-sub b { color: var(--st-azul); font-weight: 800; letter-spacing: .01em; }

/* --- a oferta: o preco como heroi --------------------------------------------------- */
.st-hero-oferta { position: relative; width: 100%; max-width: 460px; margin-top: clamp(12px, 2vw, 28px); }
.st-preco {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "ancora ancora" "agora adesivo";
  justify-content: center; align-items: end; column-gap: clamp(12px, 2vw, 22px); margin: 0;
}
.st-preco p { margin: 0; }
.st-rot {
  display: block; margin-bottom: 3px;
  font-family: var(--fonte-corpo); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--st-azul-3);
}
.st-preco-ancora { grid-area: ancora; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 6px !important; }
.st-preco-ancora .st-rot, .st-fecho-ancora .st-rot { display: inline; margin: 0; }
.st-preco-ancora s, .st-tudo-preco s, .st-fecho-ancora s {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(18px, 1vw + 14px, 22px); color: var(--st-azul-3);
  text-decoration-thickness: 2.5px; text-decoration-color: var(--st-laranja); white-space: nowrap;
}
.st-preco-agora { grid-area: agora; text-align: left; }
.st-preco-num, .st-fecho-preco b {
  display: flex; align-items: flex-start; white-space: nowrap;
  font-family: var(--fonte-titulo) !important; font-weight: 700;
  font-size: clamp(62px, 6vw + 40px, 104px); line-height: .86; letter-spacing: -.035em;
  color: var(--st-azul);
}
/* o "R$" pequeno no alto, como etiqueta de preco: o numero e o heroi */
.st-preco-num small, .st-fecho-preco b small {
  font-size: .34em; font-weight: 700; letter-spacing: 0; margin: .1em .08em 0 0;
}
/* O ADESIVO "2 pelo preco de 1": laranja com letra azul em negrito de 19px (texto grande na
   WCAG: 4,2:1 passa), girado como cartaz de loja. Some na virada (data-so-lancamento). */
.st-adesivo {
  grid-area: adesivo; justify-self: start; align-self: center;
  width: clamp(100px, 6vw + 80px, 128px); padding: 9px 8px 10px; border-radius: 16px;
  background: var(--st-laranja); color: var(--st-azul);
  font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(18.7px, .5vw + 17px, 21px); line-height: 1.05; letter-spacing: -.01em;
  text-align: center; text-wrap: balance;
  transform: rotate(-6deg);
  box-shadow: 0 12px 20px -10px rgba(242, 140, 40, .95), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(150, 70, 0, .18);
  animation: stAdesivo .6s var(--ex-mola) .45s both;
}
@keyframes stAdesivo {
  0% { transform: rotate(-16deg) scale(.4); opacity: 0; }
  70% { transform: rotate(-4deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}
/* A VIRADA DO PRECO, dita com todas as letras, com o ponto laranja na frente. Bloco, e nao
   flex: a frase tem pedacos que o extras.js reescreve, e no flex cada pedaco virava uma coluna. */
.st-faixa-lanc {
  position: relative; display: block; margin: 14px 0 0; padding: 9px 12px 9px 31px;
  border-radius: 14px; background: rgba(239, 227, 204, .9); border: 1px solid rgba(30, 58, 138, .12);
  font-size: 13.5px; line-height: 1.45; color: var(--st-azul-2); text-align: left; text-wrap: pretty;
}
.st-faixa-lanc::before {
  content: ""; position: absolute; left: 12px; top: 15px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-laranja); box-shadow: 0 0 0 3px rgba(242, 140, 40, .25);
}
.st-faixa-lanc b { color: var(--st-azul); font-weight: 800; white-space: nowrap; }
.st-bt-hero { width: 100%; min-height: 58px; margin-top: 14px; font-size: clamp(17px, .4vw + 15.5px, 19px); }
.st-hero-oferta .ex-link-um { display: block; text-align: center; }
.st-hero-oferta .ex-micro { margin-top: 2px; text-align: center; }

/* ============================================================================
   AS SECOES: a gramatica da /extras (sobrelinha, titulo, apoio, conteudo, botao) no tema claro,
   com o cabecalho SEMPRE centrado e o mesmo respiro ate o conteudo
   ============================================================================ */
.st-pagina .ex-sec-alt {
  background:
    radial-gradient(ellipse 760px 420px at 85% -10%, rgba(242, 140, 40, .1), transparent 60%),
    linear-gradient(180deg, #F6EAD5, #FBF1E1 120%);
  border-top: 1px solid rgba(30, 58, 138, .08);
}
.st-pagina .ex-eyebrow { color: var(--st-azul-2); }
.st-pagina .ex-h2 {
  font-weight: 700 !important; letter-spacing: -.015em !important;
  font-size: clamp(26px, 2.4vw + 18px, 46px); line-height: 1.08; color: var(--st-azul);
}
.st-pagina .ex-h3 { font-weight: 700; color: var(--st-azul); }
.st-pagina .ex-lead { color: var(--st-azul-2); margin-bottom: 0; }
.st-pagina .ex-nota { color: var(--st-azul-3); margin-top: 14px; }
.st-pagina .ex-lista li { color: var(--st-azul); }
.st-pagina .ex-lista li::before { color: var(--st-laranja); }

/* --- S2, S3 e S6: um Studio por secao ----------------------------------------------- */
/* as perguntas que a cena do POV responde, em baloes de conversa, centradas embaixo do apoio */
.st-duvidas { margin: 20px auto 0; text-align: center; }
.st-duvidas-tit {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--st-azul-3);
}
.st-baloes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.st-baloes li {
  padding: 9px 15px 10px; border-radius: 20px 20px 20px 6px;
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .16);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(15.5px, .4vw + 14px, 18px); line-height: 1.2; color: var(--st-azul);
  box-shadow: 0 10px 18px -14px rgba(30, 58, 138, .6);
}
.st-baloes li:nth-child(2) { background: var(--st-pessego); border-color: rgba(242, 140, 40, .55); transform: rotate(-2deg); }
.st-baloes li:nth-child(3) { border-radius: 20px 20px 6px 20px; }

/* o que a influenciadora faz em cena, em pilulas com o ponto laranja, centradas */
.st-formato { list-style: none; margin: 20px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.st-formato li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 100px;
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .14);
  font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--st-azul);
}
.st-formato li::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-laranja); box-shadow: 0 0 0 3px rgba(242, 140, 40, .22);
}

/* O CORPO DO STUDIO: a logo e os destaques. No celular e na tablet em pe, a logo numa faixa (o
   recorte das letras) e os destaques embaixo; do notebook para cima, lado a lado, com a logo da
   MESMA altura dos destaques (a imagem preenche a caixa em contain, sobre o mesmo creme do
   arquivo, entao nenhuma proporcao corta letra). */
.st-studio-corpo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 24px);
  margin-top: var(--st-respiro);
}
.st-studio-logo {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden;
  border-radius: var(--st-raio);
  background: var(--st-logo-fundo); border: 1.5px solid rgba(30, 58, 138, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--st-sombra);
}
.st-motion .st-studio-logo { background: var(--st-logo-fundo-motion); }
.st-studio-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1254 / 760; object-fit: cover; }

/* os 4 destaques: 1 coluna no celular, 2 da tablet em diante; a ultima linha nunca fica pela metade */
.st-destaques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.st-destaque {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding: clamp(14px, 1.6vw, 20px); border-radius: 18px;
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .1);
  box-shadow: 0 12px 26px -22px rgba(30, 58, 138, .6);
}
.st-destaque svg {
  grid-row: 1 / span 2; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 12px;
  background: var(--st-pessego); fill: none; stroke: var(--st-azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.st-destaque h3 { margin: 1px 0 4px; font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(17px, .4vw + 15.5px, 19px); line-height: 1.2; color: var(--st-azul); text-wrap: balance; }
.st-destaque p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--st-azul-2); text-wrap: pretty; }

/* "combina com", centrado embaixo do corpo */
.st-combina { max-width: 64ch; margin: var(--st-respiro) auto 0; text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--st-azul-2); text-wrap: balance; }
.st-combina span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--st-azul-3); }

/* o NOFACE ainda nao tem logo: o nome em letra, nas cores dos outros (desenho, aria-hidden) */
.st-noface-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1254 / 760; max-width: 620px; margin-top: var(--st-respiro); }
.st-noface-nome { display: flex; flex-wrap: wrap; justify-content: center; max-width: 80%; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(44px, 9vw, 76px); line-height: .92; letter-spacing: -.02em; }
.st-noface-nome span:nth-child(1) { color: var(--st-azul); }
.st-noface-nome span:nth-child(2) { color: var(--st-laranja); }
.st-noface-nome span:nth-child(3) { flex-basis: 100%; text-align: center; color: var(--st-azul); }

/* --- S4. a esteira -------------------------------------------------------------------- */
/* os passos: numero no circulo laranja, titulo e uma linha. 1 coluna no celular, 3 lado a lado da
   tablet em diante (cartoes da mesma altura) */
.st-passos { list-style: none; margin: var(--st-respiro) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.st-passos li {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding: clamp(14px, 1.6vw, 20px); border-radius: 18px;
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .1);
  box-shadow: 0 12px 26px -22px rgba(30, 58, 138, .6);
}
.st-passos b {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--st-laranja); color: var(--st-azul);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; line-height: 1;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 8px 14px -8px rgba(242, 140, 40, .9);
}
.st-passos h3 { margin: 1px 0 4px; font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(17px, .4vw + 15.5px, 19px); line-height: 1.2; color: var(--st-azul); }
.st-passos p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--st-azul-2); text-wrap: pretty; }

/* os 4 tipos de video de uma imagem: 2 colunas no celular, 4 na largura */
.st-saidas-tit { margin-top: clamp(36px, 5vw, 64px); margin-bottom: 0; }
.st-saidas { list-style: none; margin: var(--st-respiro) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.st-saidas li {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(12px, 1.4vw, 18px); border-radius: 18px;
  background: var(--st-azul); color: #fff;
  box-shadow: 0 16px 30px -20px rgba(30, 58, 138, .8);
}
/* 29/10/2026: block, e nao flex com wrap. No flex a estrela virava item proprio e, quando o titulo
   nao cabia numa linha, ficava sozinha em cima ("chamada para comprar") */
.st-saidas b {
  display: block;
  font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(15px, .6vw + 13px, 18px); line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.st-saidas b::before { content: "\2726"; margin-right: 6px; color: var(--st-laranja); font-size: .8em; }
/* o selo "no UGC": letra pequena, entao azul sobre branco (azul sobre laranja dava 4,22:1) */
.st-saidas small {
  display: inline-block; margin-left: 6px; vertical-align: 2px;
  padding: 2px 8px; border-radius: 100px; background: #fff; color: var(--st-azul);
  font-family: var(--fonte-corpo); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.st-saidas span { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
/* ABAIXO DE 380px (29/10/2026, pente fino L4): "DEMONSTRAÇÃO" em caixa alta passava da caixa azul a
   320 e a 340. Sem o espacamento e a 13px, a palavra cabe inteira com folga. */
@media (max-width: 379px) {
  .st-saidas b { font-size: 13px; letter-spacing: 0; }
}

/* a fala: uma caixa larga, centrada, com o balao desenhado */
.st-fala {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  max-width: 860px; margin: var(--st-respiro) auto 0; padding: clamp(16px, 2vw, 24px);
  border-radius: var(--st-raio); background: var(--st-pessego); border: 1.5px solid rgba(242, 140, 40, .55);
}
.st-fala svg { width: 48px; height: 48px; padding: 10px; box-sizing: border-box; border-radius: 14px; background: var(--st-creme-claro); fill: none; stroke: var(--st-azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-fala h3 { margin: 2px 0 4px; font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(19px, .8vw + 16px, 23px); line-height: 1.2; color: var(--st-azul); }
.st-fala p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--st-azul-2); text-wrap: pretty; }
.st-esteira-fecho { max-width: 52ch; margin: 18px auto 0; text-align: center; font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(16px, .5vw + 14px, 19px); line-height: 1.4; color: var(--st-azul); text-wrap: balance; }

/* --- S5. o pacote do lancamento --------------------------------------------------------- */
.st-par {
  position: relative; container-type: inline-size;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 48px);
  max-width: 760px; margin: var(--st-respiro) auto 0;
}
.st-par-card {
  display: flex; flex-direction: column; margin: 0; min-width: 0; overflow: hidden; border-radius: var(--st-raio);
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12);
  box-shadow: var(--st-sombra); text-align: center;
}
.st-par-logo {
  display: block; width: 100%; height: auto; aspect-ratio: 1254 / 760; object-fit: cover;
  background: var(--st-logo-fundo); border-bottom: 1px solid rgba(30, 58, 138, .08);
}
.st-par-txt { flex: 1 1 auto; margin: 0; padding: 12px 12px 4px; font-size: clamp(13.5px, .3vw + 12.5px, 15px); line-height: 1.45; color: var(--st-azul-2); text-wrap: balance; }
.st-par-preco { margin: 0; padding: 0 12px 14px; font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(20px, 1vw + 17px, 26px); color: var(--st-azul); white-space: nowrap; }
/* o "+" no meio da altura das logos (nao do cartao): a conta usa a largura da propria grade
   (unidade cqw; navegador sem ela fica com os 22%) */
.st-mais-par { top: 22%; top: calc((100cqw - clamp(24px, 5vw, 48px)) / 2 * 760 / 1254 / 2 + 6px); }
/* o fecho: o nome do pacote, o "separados", o preco-heroi, o adesivo e a virada, numa caixa so */
.st-fecho {
  display: flex; flex-direction: column; align-items: center; max-width: 560px; margin: var(--st-respiro) auto 0;
  padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2.4vw, 32px); text-align: center;
  border-radius: var(--st-raio); background: #fff; border: 2px solid var(--st-laranja);
  box-shadow: 0 22px 44px -28px rgba(30, 58, 138, .55), 0 8px 18px -14px rgba(242, 140, 40, .55);
}
.st-fecho p { margin: 0; }
.st-fecho-rot { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--st-azul-3); }
.st-fecho-ancora { display: flex; align-items: baseline; gap: 8px; margin-top: 8px !important; }
.st-fecho-preco { display: flex; flex-direction: column; align-items: center; margin-top: 6px !important; }
.st-fecho-preco .st-rot { margin-bottom: 4px; }
.st-fecho-preco b { justify-content: center; }
.st-adesivo.st-adesivo-fecho { width: auto; margin-top: 14px !important; padding: 9px 16px 10px; animation: none; }
.st-faixa-lanc.st-faixa-centro { margin-top: 16px; }

/* --- S6. o FLOW MOTION ---------------------------------------------------------------- */
/* o corpo: a logo e o "como funciona" lado a lado do notebook para cima */
.st-motion-como { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); min-width: 0; }
.st-passos.st-passos-coluna { margin: 0; grid-template-columns: minmax(0, 1fr); }
.st-pagina .ex-destaque-cel { max-width: none; margin: 0; background: var(--st-pessego); border-color: rgba(242, 140, 40, .55); color: var(--st-azul); }
.st-pagina .ex-destaque-cel svg { stroke: var(--st-azul); }
/* o par antes e depois, centrado embaixo do corpo */
.st-pagina .ex-motion-par { max-width: 520px; margin: var(--st-respiro) auto 0; }
.st-pagina .ex-motion-v { background: var(--st-bege); border-color: rgba(30, 58, 138, .14); box-shadow: 0 18px 34px -22px rgba(30, 58, 138, .7); }
.st-pagina .ex-motion-q-res .ex-motion-v { border: 2px solid var(--st-laranja); }
.st-pagina .ex-motion-q figcaption { color: var(--st-azul-2); font-weight: 700; }
.st-pagina .ex-motion-seta { color: var(--st-laranja); }
.st-pagina .ex-motion { border-top: 1px solid rgba(30, 58, 138, .08); }

/* --- os pacotes em uma linha (#motion) e em cartao (#pacotes), no tema claro ----------- */
.st-pagina .ex-pacote-linha { background: #fff; border: 2px solid var(--st-laranja); box-shadow: 0 14px 30px -18px rgba(30, 58, 138, .45); }
.st-pagina .ex-pacote-linha-nome, .st-pagina .ex-pacote-linha-preco { color: var(--st-azul); font-weight: 700; }
.st-pagina .ex-pacote-linha-preco b { font-weight: 700; }
.st-pagina .ex-pacote-sep { color: var(--st-azul-3); }
.st-pagina .ex-pacote-sep s { text-decoration-color: var(--st-laranja); }
/* os selos eram laranja com letra creme (2,2:1): aqui azul com letra branca */
.st-pagina .ex-adesivo-mini, .st-pagina .ex-pacote-selo { background: var(--st-azul); color: #fff; }
/* o "o mais completo" e letra pequena: azul com letra branca e contorno laranja (azul sobre laranja
   dava 4,22:1, abaixo dos 4,5:1 do texto pequeno) */
.st-pagina .ex-pacote-selo-claro { background: var(--st-azul); color: #fff; box-shadow: inset 0 0 0 2px var(--st-laranja); }
.st-pagina .ex-pacote { background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12); box-shadow: var(--st-sombra); }
.st-pagina .ex-pacote-destaque { border: 2px solid var(--st-laranja); box-shadow: 0 18px 40px -22px rgba(242, 140, 40, .75); }
.st-pagina .ex-pacote-nome, .st-pagina .ex-pacote-preco { font-weight: 700; color: var(--st-azul); }
.st-pagina .ex-pacote-itens { color: var(--st-azul-3); }
.st-pagina .ex-pacotes-pe { color: var(--st-azul-2); }
.st-pagina .ex-pacotes-pe a { color: var(--st-azul); text-decoration-color: rgba(242, 140, 40, .85); }
/* QUATRO pacotes, como na /extras (29/10/2026: entrou o Pack + Agente): 1 coluna no celular, 2 da
   tablet em diante e 4 a partir de 1100px. Nenhuma linha fica pela metade. */
.st-pagina .st-pacotes { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.8vw, 20px); margin-top: calc(var(--st-respiro) + 6px); }
.st-pagina .st-pacotes .ex-pacote { padding-top: 26px; }

/* --- S7. para ir alem ------------------------------------------------------------------- */
.st-junto-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); margin-top: var(--st-respiro); }
/* no plano B (Pack fechado) sobra so o Agente: um cartao no meio, e nao meia linha vazia */
.st-junto-grade:has(> .st-junto-card[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
.st-junto-card {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2vw, 26px); border-radius: var(--st-raio);
  background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12);
  box-shadow: var(--st-sombra);
}
.st-junto-card[hidden] { display: none; }
.st-junto-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px dashed rgba(30, 58, 138, .2); }
.st-junto-nome { font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(15.5px, .4vw + 14px, 18px); line-height: 1.2; letter-spacing: .02em; color: var(--st-azul); }
.st-junto-preco { font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(22px, .8vw + 19px, 28px); line-height: 1; color: var(--st-azul); white-space: nowrap; }
.st-junto-tit { margin: 14px 0 6px; font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(21px, 1vw + 17px, 28px); line-height: 1.12; letter-spacing: -.01em; color: var(--st-azul); text-wrap: balance; }
.st-junto-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--st-azul-2); text-wrap: pretty; }
.st-junto-leg { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--st-azul-3); text-align: center; }
.st-junto-miuda { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--st-azul-3); text-wrap: pretty; }
.st-junto-guia { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--st-pessego); border: 1px solid rgba(242, 140, 40, .55); font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--st-azul); text-wrap: pretty; }
/* o link do pe do cartao: sempre no fundo, para os dois cartoes terminarem na mesma linha */
/* padding-bottom (29/10/2026, pente fino L8): o link media 35px de altura; com 9px chega aos 44 */
.st-junto-link {
  align-self: flex-start; margin-top: auto; padding-top: 14px; padding-bottom: 9px;
  font-weight: 800; font-size: 15px; color: var(--st-azul);
  text-decoration: underline; text-decoration-color: var(--st-laranja); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.st-junto-link:hover { color: var(--st-azul-2); }
.st-junto-link:focus-visible { outline: 3px solid var(--st-azul); outline-offset: 3px; border-radius: 6px; }
/* OS 3 VIDEOS REAIS DO PACK (#exTrio, montado pelo extras.js). Tres colunas iguais, 9:16. Os 2
   videos do agente que o motor poe ali enquanto a vitrine nao manda os efeitos (.ex-dupla-hero,
   .ex-um-hero) nao entram nesta pagina: escondidos, nem baixam. */
.st-pagina .st-junto-videos { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); }
.st-pagina .st-junto-videos.ex-dupla-hero, .st-pagina .st-junto-videos.ex-um-hero, .st-pagina .st-junto-videos:empty { display: none; }
.st-pagina .st-junto-videos .ex-tile { aspect-ratio: 9 / 16; border-radius: 14px; }
.st-pagina .st-junto-videos .ex-tile-nome { padding: 30px 8px 8px; font-size: clamp(11.5px, .3vw + 10.5px, 13.5px); }
/* so o nome do efeito: a divisao cortava no meio no quadro estreito */
.st-pagina .st-junto-videos .ex-tile-sub { display: none; }
.st-pagina .st-junto-videos .ex-chip { font-size: 11px; padding: 2px 6px; left: 5px; top: 5px; }
.st-pagina .st-junto-videos:empty + .st-junto-leg, .st-pagina .st-junto-videos.ex-dupla-hero + .st-junto-leg,
.st-pagina .st-junto-videos.ex-um-hero + .st-junto-leg { display: none; }
/* as 5 funcoes do agente, numeradas como no cartaz da dona */
.st-funcoes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.st-funcoes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: var(--st-azul); }
.st-funcoes li { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
.st-funcoes b {
  display: grid; place-items: center; height: 24px; border-radius: 8px; background: var(--st-pessego);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; line-height: 1; color: var(--st-azul);
}
/* o pacote "todos os extras", centrado embaixo dos dois cartoes */
.st-tudo {
  display: flex; flex-direction: column; align-items: center; max-width: 640px; margin: var(--st-respiro) auto 0;
  padding: clamp(16px, 2vw, 24px); border-radius: var(--st-raio); text-align: center;
  background: var(--st-bege); border: 1.5px dashed rgba(30, 58, 138, .28);
}
.st-tudo[hidden] { display: none; }
.st-tudo-txt { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(16px, .5vw + 14px, 19px); line-height: 1.4; color: var(--st-azul); text-wrap: balance; }
.st-tudo-preco { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; }
.st-tudo-preco .st-rot { display: inline; margin: 0; }
.st-tudo-preco b { font-family: var(--fonte-titulo) !important; font-weight: 700; font-size: clamp(28px, 1.4vw + 23px, 36px); letter-spacing: -.02em; color: var(--st-azul); white-space: nowrap; }
.st-tudo-bt { width: 100%; max-width: 420px; margin-top: 14px; min-height: 54px; }

/* --- S8. para quem e -------------------------------------------------------------------- */
.st-quem-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.8vw, 20px); margin-top: var(--st-respiro); }
.st-quem-card { padding: clamp(18px, 2vw, 26px); border-radius: var(--st-raio); background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12); box-shadow: var(--st-sombra); }
.st-quem-card.st-quem-muda { background: var(--st-pessego); border-color: rgba(242, 140, 40, .55); }
.st-quem-card h3 { margin: 0 0 14px; font-family: var(--fonte-titulo) !important; font-weight: 700 !important; font-size: clamp(19px, .6vw + 17px, 23px); line-height: 1.2; color: var(--st-azul); }
.st-quem-card .ex-lista li { font-size: 15px; line-height: 1.5; }

/* --- S9. antes de pagar ----------------------------------------------------------------- */
.st-pagina .ex-antes-grade { margin-top: var(--st-respiro); }
.st-pagina .ex-antes-card { background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12); }
.st-pagina .ex-antes-card svg { stroke: var(--st-laranja); }
.st-pagina .ex-antes-card h3 { font-weight: 700 !important; color: var(--st-azul); }
.st-pagina .ex-antes-card p { color: var(--st-azul-2); }
.st-pagina .ex-antes-card a { color: var(--st-azul); text-decoration-color: rgba(242, 140, 40, .85); }
.st-pagina .ex-antes-card.ex-antes-legal { border-color: rgba(242, 140, 40, .7); background: linear-gradient(165deg, var(--st-pessego), var(--st-creme-claro) 70%); }

/* --- S12. perguntas --------------------------------------------------------------------- */
.st-pagina .ex-faq { margin-top: var(--st-respiro); }
.st-pagina .ex-faq-q { font-weight: 600 !important; font-size: 17px; color: var(--st-azul); }
.st-pagina .ex-faq-q::after { color: var(--st-azul-3); }
.st-pagina .ex-faq-q:focus-visible, .st-pagina .ex-faq-ver:focus-visible { outline-color: var(--st-azul); }
.st-pagina .ex-faq-a p { color: var(--st-azul-2); }
.st-pagina .ex-faq-a a { color: var(--st-azul); font-weight: 700; text-decoration-color: rgba(242, 140, 40, .85); }
.st-pagina .ex-faq-ver { border-color: rgba(30, 58, 138, .3); color: var(--st-azul); }
.st-pagina .ex-faq-ver:hover { border-color: var(--st-azul); background: rgba(30, 58, 138, .04); }

/* --- convite e rodape ------------------------------------------------------------------- */
.st-pagina .ex-criaai { background: rgba(239, 227, 204, .6); border-top: 1px solid rgba(30, 58, 138, .1); }
.st-pagina .ex-criaai-txt { color: var(--st-azul-2); }
.st-pagina .ex-criaai-ir { color: var(--st-azul); text-decoration-color: rgba(242, 140, 40, .85); }
.st-pagina .ex-rodape { border-top: 1px solid rgba(30, 58, 138, .12); }
.st-pagina .ex-rodape .nav-logo { width: 186px; height: 64px; border-radius: 16px; margin-bottom: 16px; }
.st-pagina .footer p { color: var(--st-azul-3); }
.st-pagina .footer a { color: var(--st-azul); }
.st-pagina .footer-legal a { color: var(--st-azul-2); }
.st-pagina .footer-legal a:hover { color: var(--st-azul); }
.st-pagina .ex-rodape .ex-ident { color: var(--st-azul-2); }
.st-pagina .ex-rodape .ex-ident a { color: var(--st-azul); }
.st-pagina .ex-rodape .ex-isencao { color: var(--st-azul-3); }
/* o versiculo do estilo.css vem com opacity .6: sobre o creme o azul apagado reprovava */
.st-pagina .versiculo { opacity: 1; }
.st-pagina .vers-texto, .st-pagina .vers-ref { color: var(--st-azul-3); }

/* ============================================================================
   OS QUADROS DE VIDEO (extras.js, quadroDeVideo). A legenda, o selo "IA no Flow" e o "play" ficam
   POR CIMA do video, sobre o escuro: ali o --cream (azul nesta pagina) sumia. Letra branca.
   ============================================================================ */
.st-pagina .ex-tile { background: var(--st-bege); border: 1px solid rgba(30, 58, 138, .14); box-shadow: 0 16px 30px -20px rgba(30, 58, 138, .7); }
.st-pagina .ex-chip { color: #fff; }
.st-pagina .ex-chip::before { color: var(--st-laranja); }
.st-pagina .ex-tile-nome { color: #fff; }
.st-pagina .ex-tile-sub { color: rgba(255, 255, 255, .82); }
.st-pagina .ex-play:focus-visible { outline-color: var(--st-laranja); }
.st-pagina .ex-tile.ex-parado .ex-play::after { border-color: transparent transparent transparent #fff; }

/* ============================================================================
   A BARRA DO POLEGAR, clara: creme quase opaco, fio e sombra azuis por cima
   ============================================================================ */
@media (max-width: 780px) {
  .st-pagina .ex-barra {
    background: rgba(251, 241, 225, .97);
    border-top: 1px solid rgba(30, 58, 138, .14);
    box-shadow: 0 -12px 30px -16px rgba(30, 58, 138, .45);
  }
  .st-pagina .ex-barra-sep { color: var(--st-azul-3); }
  .st-pagina .ex-barra-ancora s { color: var(--st-azul-3); text-decoration-color: var(--st-laranja); }
  .st-pagina .ex-barra-ancora b { color: var(--st-azul); }
  .st-pagina .ex-barra-rot { color: var(--st-azul-2); }
  /* a sugestao de combo (extras.js) era laranja: aqui azul em negrito, com o ponto laranja */
  .st-pagina .ex-barra-rot.ex-barra-sug { color: var(--st-azul); }
  .st-pagina .ex-barra-val { font-weight: 700; color: var(--st-azul); }
  /* 15px (29/10/2026, pente fino L1): com 16.5px "quero os 3 Studios →" nao cabia na pilula. O botao
     nunca encolhe (extras.css, fim da barra); abaixo de 360px ele vai a 13px (fim deste arquivo) */
  .st-pagina .ex-barra-bt {
    font-weight: 600; font-size: 15px; letter-spacing: .01em; text-transform: none;
    box-shadow: 0 10px 20px -10px rgba(30, 58, 138, .8), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(10, 20, 60, .22);
  }
  .st-pagina .ex-barra-bt:focus-visible { outline-color: var(--st-azul); }
  .st-pagina .ex-barra-up { color: var(--st-azul); text-decoration-color: var(--st-laranja); text-decoration-thickness: 2px; }
  .st-pagina .ex-barra-up:focus-visible { outline-color: var(--st-azul); }
}

/* ============================================================================
   O CHECKOUT NO TEMA CLARO. A secao #comprar e a copia literal da /extras: aqui so mora o desenho
   dela nesta pagina. A folha bege com cantos redondos sobre o creme, os cartoes quase brancos, o
   escolhido azul. A borda da folha bate com a borda do conteudo das outras secoes (extras.css, o
   mesmo sistema). A maior parte vem dos tokens --ex-claro-* do topo deste arquivo; aqui ficam os
   lugares em que o extras.css escreve o texto em var(--cream) SOBRE o escolhido (que aqui viraria
   azul sobre azul), as cores soltas do vermelho-laranja da /extras e o cartao do item em grade.
   ============================================================================ */
.st-pagina .ex-comprar {
  border: 1.5px solid rgba(30, 58, 138, .12);
  box-shadow: 0 -18px 50px -24px rgba(242, 140, 40, .45), 0 26px 60px -34px rgba(30, 58, 138, .45);
}
/* a lingueta laranja no alto da folha: o "aqui se paga" visto de longe */
.st-pagina .ex-comprar::before {
  content: ""; position: absolute; left: 50%; top: -1.5px; width: 120px; height: 6px; margin-left: -60px;
  border-radius: 0 0 8px 8px; background: var(--st-laranja);
}
.st-pagina .ex-comprar .ex-h2 i { background: linear-gradient(transparent 58%, rgba(242, 140, 40, .45) 58%, rgba(242, 140, 40, .45) 90%, transparent 90%); }
.st-pagina .ex-comprar .ex-lead { margin-bottom: 20px; }

/* etapas */
.st-pagina .ex-etapas li.atual .ex-et-num { background: var(--st-azul); color: #fff; }
.st-pagina .ex-etapas li.feita { color: #fff; }
.st-pagina .ex-etapas li.feita .ex-et-num { background: rgba(255, 255, 255, .2); color: #fff; }
.st-pagina .ex-et-num { background: rgba(30, 58, 138, .08); }

/* --- os cartoes dos itens (montados pelo extras.js em #exItens) ------------------------------ */
.st-pagina .ex-item input { border-color: rgba(30, 58, 138, .5); }
/* marcada, a borda some no azul (a linha de cima pesa o mesmo que o :checked do extras.css e ganhava) */
.st-pagina .ex-item input:checked { border-color: var(--st-azul); }
.st-pagina .ex-item input::after { border-color: #fff; }
.st-pagina .ex-item input:focus-visible { outline-color: var(--st-azul); }
.st-pagina .ex-item-nome { font-weight: 700; }
.st-pagina .ex-item-preco { font-weight: 700; }
.st-pagina .ex-item-preco.ex-item-preco-embreve { background: rgba(30, 58, 138, .07); }
/* os Studios (o destaque desta pagina) com a borda laranja; marcado, qualquer cartao fica com a
   borda e o anel azuis do "escolhido" */
.st-pagina .ex-item-destaque { border-color: rgba(242, 140, 40, .6); }
.st-pagina .ex-item.marcado { border-color: var(--st-azul); box-shadow: 0 0 0 1px var(--st-azul), 0 12px 26px -12px rgba(30, 58, 138, .45); background: #fff; }
/* o selo "lançamento" no cartao do POV e do UGC (extras.js poe .ex-item-tag): azul com a faisca */
.st-pagina .ex-item-tag { background: var(--st-azul); color: #fff; }
/* o "no seu pedido" do cartao marcado */
.st-pagina .ex-item-no-pedido { color: var(--st-azul); }

/* O CARTAO EM GRADE. No extras.css o cartao e uma fila (caixinha, imagem, texto, preco), e no
   celular de 390px o texto ficava com ~158px entre a imagem e o preco. Aqui o nome e o preco
   dividem a primeira linha, e a frase, o ganho e a condicao descem para baixo dos dois, com a
   largura do preco de volta para o texto. Nenhuma classe nem id muda: o .ex-item-info vira
   display: contents e os filhos dele entram direto na grade.
   --st-mini acompanha o tamanho da imagem pequena do extras.css (48, 42 ate 480px, 40 ate 374px). */
.st-pagina .ex-itens { --st-mini: 48px; }
.st-pagina .ex-item {
  display: grid; grid-template-columns: 28px var(--st-mini) minmax(0, 1fr) auto;
  column-gap: 10px; row-gap: 0; align-items: start; align-content: center;
}
/* item sem imagem pequena (o NOFACE, enquanto nao tem logo): sem a coluna dela */
.st-pagina .ex-item:not(.ex-item-com-mini) { grid-template-columns: 28px minmax(0, 1fr) auto; }
.st-pagina .ex-item-info { display: contents; }
.st-pagina .ex-item > input { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin-top: calc((var(--st-mini) - 28px) / 2); }
.st-pagina .ex-item:not(.ex-item-com-mini) > input { margin-top: 0; }
.st-pagina .ex-item-mini { grid-column: 2; grid-row: 1 / span 6; align-self: start; width: var(--st-mini); height: var(--st-mini); }
.st-pagina .ex-item .ex-item-nome { grid-column: -3; grid-row: 1; align-self: center; }
.st-pagina .ex-item .ex-item-preco { grid-column: -2; grid-row: 1; align-self: center; }
.st-pagina .ex-item .ex-item-info > :not(.ex-item-nome) { grid-column: -3 / -1; margin-top: 3px; }
.st-pagina .ex-item .ex-item-info > .ex-item-unid { margin-top: 5px; }
/* a logo dos Studios e mais larga que alta: o fundo creme da propria logo, sem o bege em volta */
.st-pagina .ex-item-com-mini .ex-item-mini { background: var(--st-logo-fundo); border-color: rgba(30, 58, 138, .14); }

/* COM O PIX ABERTO, SO O QUE ESTA SENDO PAGO: os cartoes nao marcados saem, e o titulo dos grupos
   tambem. O extras.js tira a classe .pagando no "trocar o que marquei", e tudo volta. */
.st-pagina .ex-comprar.pagando .ex-item:not(.marcado),
.st-pagina .ex-comprar.pagando .ex-itens-grupo { display: none; }
.st-pagina .ex-comprar.pagando .ex-item.travado { opacity: .85; }

/* --- a mensagem viva ------------------------------------------------------------------------ */
.st-pagina .ex-vivo { background: var(--st-creme-claro); }
.st-pagina .ex-vivo.um { border-color: rgba(242, 140, 40, .65); }
/* COM TUDO MARCADO a caixa vira o azul do escolhido (o fundo creme da linha de cima tem o mesmo
   peso do .ex-vivo.combo do extras.css e ganhava dele) */
.st-pagina .ex-vivo.combo { background: var(--st-azul); border-color: var(--st-azul); }
.st-pagina .ex-vivo.combo .ex-vivo-txt { color: #fff; }
.st-pagina .ex-vivo-bt { font-weight: 600; text-transform: none; letter-spacing: .01em; font-size: 16px; color: #fff; box-shadow: 0 12px 24px -12px rgba(30, 58, 138, .85); }
.st-pagina .ex-vivo-nao { border-color: rgba(30, 58, 138, .35); color: var(--st-azul); font-weight: 600; }
.st-pagina .ex-vivo-nao:hover { border-color: rgba(30, 58, 138, .7); }
.st-pagina .ex-vivo-nao:focus-visible { outline-color: var(--st-azul); }

/* o resumo */
.st-pagina .ex-resumo { border-color: rgba(30, 58, 138, .28); }
.st-pagina .ex-resumo-linhas { border-bottom-color: rgba(30, 58, 138, .2); }
/* align-self: com o nome do combo em 2 linhas, o valor esticava e o marca-texto caia embaixo dele */
.st-pagina .ex-resumo-linhas li.desconto span:last-child { align-self: flex-start; background: linear-gradient(transparent 55%, rgba(242, 140, 40, .45) 55%); padding: 0 2px; }
.st-pagina .ex-resumo-total b { font-weight: 700; }

/* o formulario */
.st-pagina .ex-form, .st-pagina .ex-pix { box-shadow: 0 18px 48px -20px rgba(30, 58, 138, .3); border-color: rgba(30, 58, 138, .08); }
.st-pagina .ex-sessao { background: rgba(30, 58, 138, .05); }
/* a borda do campo branco: 4,2:1 contra o branco (WCAG 1.4.11 pede 3:1) */
.st-pagina .ex-campo { border-color: #6E7BA5; }
.st-pagina .ex-campo::placeholder { color: #5A6992; }
.st-pagina .ex-campo:focus { border-color: var(--st-azul); box-shadow: 0 0 0 3px rgba(242, 140, 40, .4); }
.st-pagina .ex-campo[readonly] { background: rgba(30, 58, 138, .05); }
.st-pagina .ex-campo.valido { border-color: rgba(30, 58, 138, .55); }
/* o erro e o UNICO vermelho da pagina: o destaque daqui e azul, e erro em azul nao parece erro */
.st-pagina .ex-campo.invalido { border-color: var(--st-erro); }
.st-pagina .ex-erro-campo { color: var(--st-erro); }
.st-pagina .ex-sugestao-bt:focus-visible, .st-pagina .ex-falta-bt:focus-visible { outline-color: var(--st-azul); }
.st-pagina .ex-falta-bt { text-decoration-color: rgba(30, 58, 138, .35); }
.st-pagina .ex-metodo { border-color: rgba(30, 58, 138, .25); }
.st-pagina .ex-metodo.escolhido { color: #fff; border-color: var(--st-azul); }
.st-pagina .ex-metodo.escolhido small { color: rgba(255, 255, 255, .85); }
.st-pagina .ex-metodo:focus-visible { outline-color: var(--st-azul); }
.st-pagina .ex-cartao { background: #F7EEDD; }
/* a dica do mesmo email (pedido da dona, 29/10/2026): a caixa azul clara, com o envelope */
.st-pagina .ex-dica-email { background: rgba(242, 140, 40, .12); border-color: rgba(242, 140, 40, .6); }

/* a caixa de ciencia: o tom laranja como fundo e borda, o texto azul */
.st-pagina .ex-ciencia { border-color: rgba(242, 140, 40, .7); background: rgba(242, 140, 40, .12); }
.st-pagina .ex-cb-etiqueta { color: var(--st-azul); }
.st-pagina .ex-cb-porque { color: var(--st-azul-2); }
.st-pagina .ex-cc { border-top-color: rgba(242, 140, 40, .45); }
.st-pagina .ex-cc input { accent-color: var(--st-azul); }
.st-pagina .ex-cc input:focus-visible { outline-color: var(--st-azul); }

/* o botao de pagar: desligado e a instrucao, legivel (5,5:1); ligado e o azul forte */
.st-pagina .ex-bt-pagar { font-size: 17.5px; }
.st-pagina .ex-comprar .ex-bt-pagar[disabled] { background: #E2D5BC; color: #3B4F86; font-size: 15px; }
.st-pagina .ex-msg { background: rgba(242, 140, 40, .1); border-color: rgba(242, 140, 40, .6); }
.st-pagina .ex-msg.neutra { background: rgba(30, 58, 138, .05); border-color: var(--ex-claro-fio); }
.st-pagina .ex-depois { background: rgba(30, 58, 138, .04); }
.st-pagina .ex-depois-lista b { color: #fff; }

/* o Pix */
.st-pagina .ex-pix-status { background: rgba(30, 58, 138, .05); }
.st-pagina .ex-pix-status i { background: var(--st-laranja); }
/* PAGO: azul com letra branca (o fundo claro da linha de cima pesa o mesmo e ganhava) */
.st-pagina .ex-pix-status.pago { background: var(--st-azul); color: #fff; }
.st-pagina .ex-pix-trocar.confirmar { color: var(--st-azul); border-color: rgba(242, 140, 40, .7); background: rgba(242, 140, 40, .1); }

/* o foco no bloco do checkout: o anel escuro da /extras (#14131A) vira o azul */
.st-pagina .ex-comprar .ex-bt:focus-visible, .st-pagina .ex-itens-de-novo:focus-visible, .st-pagina .ex-comprar .ex-vivo-bt:focus-visible,
.st-pagina .ex-pix-trocar:focus-visible, .st-pagina .ex-sessao-sair:focus-visible, .st-pagina .ex-comprar a:focus-visible,
.st-pagina .ex-falta-bt:focus-visible, .st-pagina .ex-comprar summary:focus-visible { outline-color: var(--st-azul); }

/* as faiscas de quando o conjunto fecha */
.st-pagina .ex-faisca { color: var(--st-laranja); }

/* ============================================================================
   AS LARGURAS. Primeiro o celular (acima); daqui para baixo, so o que muda de coluna. Os tamanhos
   ja sao fluidos (clamp): os pontos de corte so trocam o numero de colunas.
   ============================================================================ */
/* O TOPO ABAIXO DE 390px: logo, "conheça o Cria aí!", o globo e o "entrar" passavam da tela. A logo
   encolhe e os vaos apertam; o alvo de toque de 44px fica. Em 320px o convite sai do topo. */
@media (max-width: 389px) {
  .st-pagina .ex-topo { padding: 0 12px; }
  .st-pagina .ex-topo .nav-logo { width: 94px; height: 34px; border-radius: 10px; }
  .st-pagina .ex-topo-criaai { margin-right: 4px; font-size: 12px; }
  .st-pagina .ex-topo .idioma-btn { padding: 9px 8px; min-width: 44px; }
  .st-pagina .ex-topo .nav-entrar { padding: 0 4px; letter-spacing: .08em; }
}
@media (max-width: 339px) {
  .st-pagina .ex-topo .nav-links a.ex-topo-criaai { display: none; }
}
/* a imagem pequena do cartao encolhe junto com a do extras.css (42px ate 480, 40px ate 374) */
@media (max-width: 480px) {
  .st-pagina .ex-itens { --st-mini: 42px; }
}
@media (max-width: 429px) {
  .st-logo figcaption { padding: 4px 9px; font-size: 11px; letter-spacing: 0; }
}
@media (max-width: 374px) {
  .st-pagina .ex-itens { --st-mini: 40px; }
  .st-pagina .ex-item { column-gap: 8px; }
  .st-preco-num { font-size: 58px; }
}

/* 560px: os destaques em 2 colunas (4 = 2 linhas inteiras), os passos ainda em 1 */
@media (min-width: 560px) {
  .st-destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 640px (tablet pequena em pe): o selo do topo volta, a oferta vira cartao, as caixas de "para
   quem e" ficam lado a lado */
@media (min-width: 640px) {
  .st-selo { display: inline-flex; }
  .st-pagina .ex-topo .nav-logo { width: 130px; height: 46px; border-radius: 13px; }
  .st-hero-oferta {
    max-width: 560px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 3vw, 30px);
    border-radius: 30px; background: var(--st-creme-claro); border: 1.5px solid rgba(30, 58, 138, .12);
    box-shadow: 0 26px 50px -30px rgba(30, 58, 138, .55), 0 8px 18px -14px rgba(242, 140, 40, .5);
  }
  .st-quem-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 720px (tablet em pe, 768 e 820): os 3 passos lado a lado, e os pacotes em 2 colunas */
@media (min-width: 720px) {
  .st-passos:not(.st-passos-coluna) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-passos:not(.st-passos-coluna) li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .st-passos:not(.st-passos-coluna) b { grid-row: auto; }
  .st-pagina .st-pacotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .st-pagina .st-pacotes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 760px: o Pack e o Agente lado a lado, da mesma altura */
@media (min-width: 760px) {
  .st-junto-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ate 1000px os dois cartoes tem alturas bem diferentes: cada um com a sua, sem buraco no Pack */
@media (min-width: 760px) and (max-width: 999px) {
  .st-junto-grade { align-items: start; }
}

/* 900px (tablet deitada, 1024 e 1180, e notebook): os 4 tipos de video numa linha; a oferta do
   topo vira duas colunas, o preco e a virada a esquerda, o botao, o "so um" e a micro a direita */
@media (min-width: 900px) {
  .st-pagina .ex-topo .nav-logo { width: 150px; height: 52px; border-radius: 14px; }
  .st-saidas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-hero-oferta {
    max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-auto-flow: row dense;
    column-gap: clamp(24px, 3vw, 40px); align-items: center; text-align: left;
  }
  .st-preco, .st-hero-oferta .st-faixa-lanc { grid-column: 1; }
  .st-preco { justify-content: start; }
  .st-preco-ancora { justify-content: flex-start; }
  .st-bt-hero, .st-hero-oferta .ex-link-um, .st-hero-oferta .ex-micro { grid-column: 2; }
  .st-bt-hero { min-height: 64px; margin-top: 0; align-self: end; }
  .st-hero-oferta .ex-link-um { align-self: start; padding-bottom: 4px; }
  .st-hero-oferta .ex-micro { align-self: start; }
  .st-hero-oferta .st-faixa-lanc { align-self: start; }
}

/* 1000px: a logo do Studio ao lado dos destaques, da MESMA altura deles; no UGC, do outro lado. A
   logo preenche a caixa em contain sobre o creme do proprio arquivo: nenhuma letra corta. */
@media (min-width: 1000px) {
  .st-studio-corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .st-studio-inverso .st-studio-logo { order: 2; }
  /* no UGC a logo vai para a direita: as colunas trocam junto (antes os destaques ficavam com a
     coluna estreita e quebravam uma palavra por linha) */
  .st-studio-inverso .st-studio-corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .st-studio-logo { max-width: none; min-height: 300px; }
  .st-studio-logo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: contain; transform: scale(1.06); }
  .st-motion-corpo { align-items: stretch; }
}

/* ============================================================================
   QUEM PEDIU MENOS MOVIMENTO no aparelho nao leva adesivo pulando nem brilho no botao
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .st-adesivo { animation: none; }
  .st-pagina .st-bt-hero::after { animation: none; display: none; }
}

/* A BARRA DO POLEGAR A 320 (29/10/2026, pente fino L1): o 13px do extras.css perdia para o 15px do
   .st-pagina .ex-barra-bt (este arquivo carrega depois). Aqui, no fim, ele ganha. */
@media (max-width: 359px) {
  .st-pagina .ex-barra-bt { font-size: 13px; }
}