/* ==== Tokens ==== */
:root {
	--ugv-navy: #132d5c;
	--ugv-navy-dark: #091d41;
	--ugv-royal: #083991;
	--ugv-blue-mid: #1652b3;
	--ugv-blue-hover: #5270a5;
	--ugv-yellow: #ffbb24;
	--ugv-green: #52bd30;
	--ugv-border: #ebebeb;
	--ugv-overlay: #132d5cc9;
	--container: 1140px;
	--font-titulo: "Plus Jakarta Sans", sans-serif;
	--font-texto: "Inter", sans-serif;
}
/* ==== Reset (equivalente ao reset do hello-elementor usado em prod) ==== */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.5; color: #333; background: #fff; }
img { max-width: 100%; height: auto; border-style: none; }
a { background-color: transparent; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ==== Layout ==== */
.ugv-container { max-width: var(--container); margin-inline: auto; }
@media (max-width: 1024px) { .ugv-container { padding-inline: 20px; } }
/* Botão pill base (padrão dos botões do site — ref-global §1.3/§2) */
.ugv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-texto); font-size: 16px; line-height: 1; border-radius: 1000px; padding: 16px 32px; border: 1px solid transparent; transition: all .3s; }
.ugv-btn svg { width: 1em; height: auto; }
/* ==== Carrossel (base) ==== */
.ugv-carousel { position: relative; overflow: hidden; }
.ugv-carousel__track { display: flex; }
.ugv-carousel.is-static .ugv-carousel__prev,
.ugv-carousel.is-static .ugv-carousel__next,
.ugv-carousel.is-static .ugv-carousel__dots { display: none; }
/* ==== Header (ref-global §2) ==== */
.ugv-header { background: var(--ugv-navy); }
.ugv-header__inner { min-height: 100px; display: flex; justify-content: space-between; align-items: center; }
.ugv-header__logo { width: 180px; height: auto; }
.ugv-header__acoes { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
/* Botao royal (bg #083991, Inter 16 w500 branco, icone bars amarelo) */
.ugv-btn--royal { background: var(--ugv-royal); border-color: var(--ugv-royal); color: #fff; font-weight: 500; }
.ugv-btn--royal .ugv-icone { color: var(--ugv-yellow); }
.ugv-btn--royal:hover, .ugv-btn--royal:focus { background: transparent; border-color: var(--ugv-royal); color: #fff; }
/* Botao ghost (borda royal, icone chevron a direita azul-medio) */
.ugv-btn--ghost { background: transparent; border-color: var(--ugv-royal); color: #fff; font-weight: 500; gap: 6px; padding: 17px 32px; }
.ugv-btn--ghost .ugv-icone { color: var(--ugv-blue-mid); position: relative; top: 1px; font-size: .8em; }
.ugv-btn--ghost:hover, .ugv-btn--ghost:focus { background: var(--ugv-royal); border-color: var(--ugv-royal); color: #fff; }
.ugv-header__hamburguer { display: none; }
@media (max-width: 1024px) {
	.ugv-header__logo { width: 150px; }
}
@media (max-width: 767px) {
	.ugv-header__inner { padding: 20px 35px; flex-wrap: nowrap; }
	.ugv-header__logo { width: 130px; }
	.ugv-header__todos, .ugv-header__voltar { display: none; }
	.ugv-header__hamburguer { display: inline-flex; font-size: 20px; border-radius: 10px; padding: 12px 12px 10px; }
}
/* ==== Footer (ref-global §3) ==== */
.ugv-footer { background: var(--ugv-navy); }
.ugv-footer__principal { min-height: 135px; display: flex; justify-content: space-between; align-items: center; }
.ugv-footer__logo { width: 180px; height: auto; }
.ugv-footer__social { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ugv-footer__social p { margin: 0; font-family: var(--font-texto); font-size: 16px; font-weight: 400; color: #fff; }
.ugv-footer__icones { display: flex; gap: 5px; }
.ugv-footer__icones a { display: inline-flex; padding: .2em; color: #fff; transition: transform .3s; }
.ugv-footer__icones a:hover, .ugv-footer__icones a:focus { transform: scale(1.1); }
.ugv-footer__icones .ugv-icone { width: 22px; height: 22px; }
.ugv-footer__copy { background: var(--ugv-navy-dark); padding: 20px 0; font-family: var(--font-texto); font-size: 14px; font-weight: 400; color: #fff; text-align: center; }
@media (max-width: 1024px) {
	.ugv-footer__logo { width: 150px; }
}
@media (max-width: 767px) {
	.ugv-footer__principal { padding: 20px; flex-wrap: wrap; }
	.ugv-footer__logo { width: 120px; }
	.ugv-footer__social { width: 100%; justify-content: center; }
	.ugv-footer__copy { padding: 20px; }
}
/* ==== Drawer de cursos (ref-global §4-popup) ==== */
body.ugv-no-scroll { overflow: hidden; }
/* Com um dialog aberto (popup de interesse / drawer), esconde os fixos p/ o pulso
   do whatsapp e a barra nao vazarem sob o overlay translucido. */
body.ugv-no-scroll .ugv-barra-fixa,
body.ugv-no-scroll .ugv-whats-flutuante { visibility: hidden; }
/* visibility vira 'visible' NA HORA ao abrir (senao o focus() do ugv.js falha) e so esconde depois do fade ao fechar */
.ugv-dialog { position: fixed; inset: 0; z-index: 9999; background: var(--ugv-overlay); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.ugv-dialog.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.ugv-drawer { display: flex; justify-content: flex-end; align-items: flex-start; }
.ugv-drawer__painel { position: relative; width: 640px; max-width: 90vw; height: 100vh; background: #fff; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); padding: 50px; overflow-y: auto; transform: translateX(100%); transition: transform .3s; }
.ugv-drawer.is-open .ugv-drawer__painel { transform: translateX(0); }
.ugv-drawer__fechar { position: absolute; top: 20px; right: 20px; padding: 0; line-height: 1; font-size: 16px; color: #1f2124; }
.ugv-drawer__fechar .ugv-icone { width: 1em; height: 1em; display: block; }
/* Titulo "Cursos > Cidade": prod renderiza ~11px entre o titulo e o 1o item (medido no browser) — 6px aqui + 5px de padding do link */
.ugv-drawer__titulo { margin: 0 0 6px; max-width: 575px; font-family: var(--font-titulo); font-size: 16px; font-weight: 400; text-transform: uppercase; line-height: 1em; color: var(--ugv-navy); }
.ugv-drawer__lista { list-style: none; margin: 0 0 20px; padding: 0 0 0 24px; }
/* Ritmo vertical medido em prod: passo de 24px por item (texto 14px + 2x5px) */
.ugv-drawer__lista a { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-family: var(--font-titulo); font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 1em; color: var(--ugv-navy); transition: color .3s; }
.ugv-drawer__lista a:hover, .ugv-drawer__lista a:focus { color: var(--ugv-blue-hover); }
.ugv-drawer__lista .ugv-icone { font-size: .6em; width: 1em; height: 1em; flex: none; }
@media (max-width: 1024px) {
	.ugv-drawer__titulo { font-size: 20px; }
}
@media (max-width: 767px) {
	.ugv-drawer__painel { width: 90vw; padding: 35px; }
	.ugv-drawer__titulo { font-size: 16px; }
}
/* ==== Home (ref-global §4) ==== */
/* Faixa-titulo "Cursos em {Cidade}" */
.ugv-home-faixa { background: var(--ugv-royal); padding: 90px 0; }
.ugv-home-faixa h2 { width: 100%; text-align: center; font-family: var(--font-titulo); font-size: 36px; font-weight: 400; line-height: 1; color: #fff; text-wrap: balance; }
.ugv-home-faixa h2 b { font-weight: 700; }
/* Grade de cursos (3/2/1 colunas) */
.ugv-home-grade { padding: 90px 0; }
.ugv-home-grade__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* Card de curso: <a> inteiro, imagem de header mobile + titulo */
.ugv-card-curso { display: flex; flex-direction: column; border: 1px solid var(--ugv-border); border-radius: 20px; padding: 10px 10px 20px; transition: transform .4s; }
.ugv-card-curso img { width: 100%; height: 200px; object-fit: cover; object-position: top center; border-radius: 10px; transition: filter .4s; }
.ugv-card-curso h3 { margin-top: 20px; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; color: var(--ugv-navy); }
.ugv-card-curso:hover { transform: translateY(-5px); }
.ugv-card-curso:hover img { filter: brightness(110%); }
@media (max-width: 1024px) {
	.ugv-home-faixa { padding: 45px 0; }
	.ugv-home-faixa h2 { font-size: 32px; }
	.ugv-home-grade { padding: 45px 0; }
	.ugv-home-grade__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.ugv-home-faixa h2 { font-size: 24px; }
	.ugv-home-grade__grid { grid-template-columns: 1fr; }
	.ugv-card-curso img { height: 150px; }
	.ugv-card-curso h3 { font-size: 20px; }
}
/* ==== Single: hero (ref-single §1.1/§5) ==== */
/* bg-image (banner_desktop/banner_mobile) vem do <style id="ugv-curso-vars"> do head */
.ugv-hero { position: relative; display: flex; min-height: 595px; background-color: var(--curso-fundo-escuro); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.ugv-hero__espaco { width: 50%; } /* coluna vazia que deixa o banner aparecer */
.ugv-hero__painel { position: relative; z-index: 200; width: 50%; display: flex; flex-direction: column; justify-content: center; background: var(--curso-fundo-escuro); border-radius: 0 0 0 100px; padding: 50px; }
/* gap 20px = espaçamento entre widgets medido em produção (default do e-con) */
.ugv-hero__conteudo { display: flex; flex-direction: column; gap: 20px; width: 510px; max-width: 100%; }
.ugv-hero h1 { max-width: 510px; font-family: var(--font-titulo); font-size: 56px; font-weight: 700; color: var(--curso-destaque); }
.ugv-hero__headline { max-width: 510px; font-family: var(--font-texto); font-size: 18px; font-weight: 400; line-height: 1.5em; color: var(--curso-texto-escuro); }
.ugv-hero__headline p:last-child { margin-bottom: 0; }
/* padding-block 30px do widget divider de prod vira margin no <hr> (mesmo espaçamento) */
.ugv-hero__divisor { width: 100%; margin: 30px 0; border: 0; border-top: 1px solid var(--curso-texto-claro); }
.ugv-hero__infos { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; width: 510px; max-width: 100%; font-family: var(--font-texto); font-size: 16px; font-weight: 400; line-height: 1; color: var(--curso-texto-escuro); }
.ugv-hero__infos > span { display: inline-flex; align-items: center; gap: 8px; }
.ugv-hero__infos .ugv-icone { width: 20px; height: 20px; flex: none; color: var(--curso-destaque); }
.ugv-hero__infos .ugv-icone--graduation-cap { width: 24px; height: 24px; }
.ugv-hero__infos .ugv-icone--hourglass-half { width: 18px; height: 18px; }
/* sub-linha "Presencial em {Cidade}": gap 5px + margem extra do ícone = 10px ícone→texto */
.ugv-hero__modalidade { align-items: flex-end; gap: 5px; flex-wrap: wrap; }
.ugv-hero__modalidade > .ugv-icone { margin-right: 5px; }
.ugv-hero__cidade { color: #fff; }
.ugv-hero__cidade a { color: #fff; font-weight: 700; }
.ugv-hero__cidade a:hover, .ugv-hero__cidade a:focus { text-decoration: underline; }
/* Barra de botões: absoluta no rodapé do hero, vidro escuro com blur (fica ABAIXO do painel z-200, como em prod) */
.ugv-hero__barra { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 150px; display: flex; align-items: center; background: #00000021; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ugv-hero__barra .ugv-container { width: 100%; display: flex; align-items: center; gap: 20px; }
/* Botões de curso (usados também na Mensalidade/Infos/barra fixa das tasks 7/11/14) */
.ugv-btn--destaque { background: var(--curso-destaque); border-color: var(--curso-destaque); color: var(--curso-fundo-escuro); font-weight: 600; }
/* hover "float" do Elementor medido em prod: translateY(-8px), transform .3s ease-out */
.ugv-btn--destaque:hover, .ugv-btn--destaque:focus { transform: translateY(-8px); }
/* seta ↗ dos botões de destaque (escopado em .ugv-btn: o drawer usa a mesma seta RETA) */
.ugv-btn .ugv-icone--arrow-right { font-size: .8em; transform: rotate(-45deg); position: relative; top: 2px; }
/* vidro escuro fosco + texto branco: sobre a foto do hero o texto na cor-destaque
   ficava com leitura ruim (baixo contraste). Mantem a borda na cor do curso. */
.ugv-btn--vidro { background: rgba(0, 0, 0, .4); border-color: var(--curso-destaque); color: #fff; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 1024px) {
	.ugv-hero { background-position: top center; }
	/* painel 53% (nao 60%) p/ os 2 botoes da barra caberem lado a lado sem serem
	   cobertos pelo painel neste breakpoint (decisao do usuario; produção empilha) */
	.ugv-hero__espaco { width: 47%; }
	.ugv-hero__painel { width: 53%; padding: 20px; }
	/* barra de botoes confinada a coluna esquerda (47%) + wrap: em ~1024 os 2
	   botoes ficam lado a lado; em tablets menores (ex.: 820/768) o 2o empilha
	   sozinho, sem ser coberto pelo painel */
	.ugv-hero__barra .ugv-container { width: 47%; margin: 0; padding-right: 0; flex-wrap: wrap; }
	.ugv-hero h1 { font-size: 46px; }
	.ugv-hero__headline { font-size: 16px; }
	.ugv-hero__divisor { margin: 10px 0; }
	.ugv-hero__infos { font-size: 14px; gap: 10px; }
	/* ícones convergem pra ~20px (ref-single §5) */
	.ugv-hero__infos .ugv-icone--graduation-cap { width: 20px; height: 20px; }
	.ugv-hero__infos .ugv-icone--hourglass-half { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
	/* coluna única: painel primeiro, banner_mobile aparece embaixo no espaço do padding */
	.ugv-hero { flex-direction: column; padding-bottom: 300px; background-position: bottom center; background-size: contain; }
	.ugv-hero__espaco { display: none; }
	/* padding-bottom menor (30 vs 60) e cantos inferiores mais redondos (22): reduz o
	   espaco vermelho entre as infos e o banner no mobile (pedido do usuario). */
	.ugv-hero__painel { width: 100%; border-radius: 0 0 22px 22px; padding: 60px 35px 30px; }
	.ugv-hero h1 { font-size: 32px; }
	.ugv-hero__infos .ugv-icone { width: 18px; height: 18px; }
	.ugv-hero__barra { min-height: 0; padding: 20px 35px; }
	/* botoes lado a lado numa unica linha, menores (fonte+padding reduzidos) p/ o
	   texto nao quebrar e cobrirem menos a imagem do hero (pedido do usuario). */
	.ugv-hero__barra .ugv-container { width: 100%; margin: 0; justify-content: center; flex-wrap: nowrap; gap: 8px; padding-inline: 0; }
	.ugv-hero__barra .ugv-btn { font-size: 13px; padding: 10px 15px; white-space: nowrap; flex-shrink: 0; }
}
/* ==== Single: sobre + mensalidade (ref-single §1.2/§5) ==== */
.ugv-sobre { background: var(--curso-fundo-claro); padding: 90px 0; }
.ugv-sobre__grid { display: flex; justify-content: space-between; }
.ugv-sobre__accordion { width: 56%; }
/* Accordion nativo <details>. Medido em prod: a borda inferior fica no SUMMARY
   (o conteúdo abre ABAIXO da linha), padding 10px 0 15px, título PJS 32px/1.5 bold. */
.ugv-accordion__item summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0 15px; border-bottom: 1px solid var(--curso-texto-claro); list-style: none; cursor: pointer; font-family: var(--font-titulo); font-size: 32px; font-weight: 700; line-height: 1.5; color: var(--curso-texto-claro); transition: color .3s; }
.ugv-accordion__item summary::-webkit-details-marker { display: none; }
/* Hover/aberto: título E ícone viram titulo-claro (medido em prod: fechado texto-claro,
   aberto/hover titulo-claro — o ícone acompanha via currentColor) */
.ugv-accordion__item summary:hover,
.ugv-accordion__item[open] summary { color: var(--curso-titulo-claro); }
.ugv-accordion__item summary .ugv-icone { width: 14px; height: 14px; flex: none; }
.ugv-accordion__item .ugv-icone--minus { display: none; }
.ugv-accordion__item[open] .ugv-icone--minus { display: block; }
.ugv-accordion__item[open] .ugv-icone--plus { display: none; }
.ugv-accordion__conteudo { overflow: hidden; padding-top: 20px; font-family: var(--font-texto); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--curso-texto-claro); }
.ugv-accordion__conteudo p { margin: 0; } /* prod: todos os <p> do wysiwyg com margem 0 (medido) */
/* Abertura E fechamento animados via JS (WAAPI em ugv.js): altura 0<->scrollHeight,
   350ms. O <details> nativo colapsa seco, entao o JS intercepta o clique e anima os
   dois lados (fecha instantaneo era desvio antigo; agora ambos os lados animam). */
/* Box Mensalidade — sticky top 30px confinado à coluna (a coluna estica na altura da
   section pelo stretch do flex, igual ao sticky_parent do Elementor Pro). O sticky fica
   no WRAPPER (Task 7B): box branco + box de promoção grudam juntos no scroll. */
.ugv-mensalidade { width: 35%; }
.ugv-mensalidade__sticky { position: sticky; top: 30px; }
.ugv-mensalidade__box { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border-radius: 20px; padding: 50px; text-align: center; }
.ugv-mensalidade__pill { border: 1px solid var(--curso-destaque); border-radius: 100px; padding: 8px 32px; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; line-height: 1; color: var(--curso-titulo-claro); }
.ugv-mensalidade__desconto { margin: 20px 0 -8px; font-family: var(--font-titulo); font-size: 32px; font-weight: 700; color: var(--curso-titulo-claro); }
.ugv-mensalidade__validade { display: flex; align-items: center; margin: 5px 0 0; font-family: var(--font-texto); font-size: 12px; font-weight: 400; color: var(--curso-texto-claro); }
.ugv-mensalidade__validade .ugv-icone { width: 14px; height: 14px; flex: none; margin: -2px 6px 0 0; color: var(--curso-destaque); }
.ugv-mensalidade__box hr { width: 100%; margin: 15px 0; border: 0; border-top: 1px solid var(--curso-texto-claro); }
/* Preço integral: produção tem BUG aqui (cor do widget vinculada ao valor do campo →
   cai no default #333, medido). Usamos a cor certa de propósito (ref-single §7.2).
   margin-bottom -8px vem do post-703.css de prod (não estava na ref). */
.ugv-mensalidade__integral { margin: 0 0 -8px; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; color: var(--curso-titulo-claro); }
.ugv-mensalidade__label { display: flex; align-items: center; margin: 8px 0 0; font-family: var(--font-texto); font-size: 12px; font-weight: 400; color: var(--curso-texto-claro); }
.ugv-mensalidade__label .ugv-icone { width: 14px; height: 14px; flex: none; margin-right: 5px; color: var(--curso-destaque); }
/* Prod (medido): o "align justify" do botão é neutralizado pelo align-center do box
   (268px de conteúdo num box de 299px) — desktop fica na largura do conteúdo,
   centralizado; só no mobile vira 100% (widget mobile__width-inherit). */
.ugv-mensalidade__cta { margin-top: 20px; }
@media (max-width: 1024px) {
	.ugv-sobre { padding: 45px 0; }
	.ugv-sobre__accordion { width: 54%; }
	.ugv-mensalidade { width: 42%; }
	.ugv-accordion__item summary { font-size: 26px; }
	.ugv-mensalidade__box { padding: 20px; }
	/* pill 20px e botão 15px no tablet: regras do post-703.css de prod (não estavam na ref) */
	.ugv-mensalidade__pill { font-size: 20px; }
	.ugv-mensalidade__cta { font-size: 15px; }
}
@media (max-width: 767px) {
	.ugv-sobre { padding: 60px 35px; }
	.ugv-sobre__grid { flex-direction: column; padding-inline: 0; }
	.ugv-sobre__accordion { width: 100%; }
	.ugv-accordion__item summary { font-size: 20px; }
	.ugv-mensalidade { width: 100%; margin-top: 30px; }
	.ugv-mensalidade__cta { width: 100%; padding: 16px; }
}
/* ==== Single: promocao (Task 7B — feature nova, sem referência computada; proporções
   a olho do print docs/superpowers/reference/2026-07-02-promo-box-referencia.png) ==== */
.ugv-promo__box { display: flex; flex-direction: column; align-items: center; margin-top: 25px; background: var(--curso-fundo-escuro); border-radius: 20px; padding: 40px 30px; text-align: center; color: var(--curso-texto-escuro); }
.ugv-promo__chamada { margin: 0; font-family: var(--font-titulo); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.ugv-promo__selo { margin: 10px 0 14px; border: 2px solid var(--curso-destaque); border-radius: 100px; padding: 8px 24px; font-family: var(--font-titulo); font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.ugv-promo__valor { margin: 0; font-family: var(--font-titulo); font-size: 32px; font-weight: 700; }
.ugv-promo__validade { margin: 2px 0 0; font-family: var(--font-texto); font-size: 10px; font-weight: 400; }
.ugv-promo__box hr { width: 100%; margin: 12px 0; border: 0; border-top: 1px solid #ffffff47; }
.ugv-promo__integral { margin: 0; font-family: var(--font-titulo); font-size: 24px; font-weight: 700; }
.ugv-promo__label { margin: 2px 0 0; font-family: var(--font-texto); font-size: 10px; font-weight: 400; }
.ugv-promo__cta { width: 100%; margin-top: 20px; }
/* ==== Single: ensino pra valer (ref-single §1.3/§5) ==== */
.ugv-valer { background: #fff; padding: 90px 0; }
/* Colunas 48/52 + margin-left 50px estouram 100% de propósito: o flex-shrink
   proporcional reproduz EXATAMENTE os 523/567px medidos em produção (Elementor
   faz a mesma conta). */
.ugv-valer__grid { display: flex; justify-content: space-between; }
.ugv-valer__esq { width: 48%; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.ugv-valer__esq h2 { font-family: var(--font-titulo); font-size: 72px; font-weight: 700; line-height: 1; color: var(--curso-titulo-claro); }
/* flex row wrap = itens com largura do CONTEÚDO, um por linha (medido em produção:
   304/341/372/358px — não esticam na coluna) */
.ugv-valer__beneficios { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ugv-valer__beneficios li { display: flex; align-items: center; margin: 5px; border: 1px solid var(--curso-fundo-claro); padding: 15px 20px; font-family: var(--font-texto); font-size: 16px; font-weight: 400; color: #666; }
/* check verde FIXO #36c51d medido em produção (não é cor de curso; não estava na ref) */
.ugv-valer__beneficios .ugv-icone { width: 16px; height: 16px; flex: none; margin-right: 10px; color: #36c51d; }
/* Coluna direita: bg-image decorativa do tema por breakpoint (ref-single §1.3/§6) */
.ugv-valer__dir { width: 52%; margin-left: 50px; padding: 10px; display: flex; flex-direction: column; justify-content: center; background: url(../img/bg-video.jpg) no-repeat center right; }
/* Carrossel 46% da coluna. O calc(+20px)/margin -10px replica o slick-list de
   produção (margens -10px): iframe visível = 46%, gap de 20px entre slides na
   animação e setas transbordando 10px da borda do vídeo. */
.ugv-videos { width: calc(46% + 20px); margin: 48px 0 0 -10px; }
.ugv-videos__slide { padding-inline: 10px; }
/* Produção NÃO trata aspect ratio: TODO iframe renderiza largura-do-slide × 450px
   (medido: Shorts 9:16 preenchem o box; 16:9 ficam com letterbox do próprio player).
   Radius 10px COMPUTADO em produção (o 16px do custom CSS perde na cascata). */
.ugv-videos__slide iframe { display: block; width: 100%; height: 450px; max-height: 450px; border: 0; border-radius: 10px; }
/* Setas: círculo 32px, chevron texto-claro sobre fundo-claro. Botão centrado em
   y~240px (225 do vídeo +15px); top=224 = 240 - 16 (metade do botão de 32px). */
.ugv-videos .ugv-carousel__prev,
.ugv-videos .ugv-carousel__next { position: absolute; top: 224px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 100px; background: var(--curso-fundo-claro); color: var(--curso-texto-claro); }
.ugv-videos .ugv-carousel__prev { left: 0; }
.ugv-videos .ugv-carousel__next { right: 0; }
.ugv-videos .ugv-carousel__prev .ugv-icone,
.ugv-videos .ugv-carousel__next .ugv-icone { width: 16px; height: 16px; }
/* Dots 8px centralizados: normal titulo-claro, hover fundo-claro, ativo fundo-escuro
   (ativo por último pra vencer o hover, como em produção) */
.ugv-videos .ugv-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; padding: 3px 0; }
.ugv-videos .ugv-carousel__dot { width: 8px; height: 8px; padding: 0; border-radius: 100%; background: var(--curso-titulo-claro); }
.ugv-videos .ugv-carousel__dot:hover { background: var(--curso-fundo-claro); }
.ugv-videos .ugv-carousel__dot.is-active { background: var(--curso-fundo-escuro); }
@media (max-width: 1024px) {
	.ugv-valer { padding: 45px 0; }
	.ugv-valer__esq h2 { font-size: 46px; }
	.ugv-valer__dir { background-image: url(../img/bg-videos-tablet.jpg); }
	.ugv-videos { width: calc(75% + 20px); }
}
@media (max-width: 767px) {
	.ugv-valer { padding: 60px 35px; }
	.ugv-valer__grid { flex-direction: column; padding-inline: 0; }
	.ugv-valer__esq { width: 100%; }
	.ugv-valer__esq h2 { font-size: 38px; }
	.ugv-valer__dir { width: 100%; margin: 40px 0 0; background: url(../img/bg-videos-mobile.jpg) no-repeat center center / contain; }
	.ugv-videos { width: calc(90% + 20px); margin-top: 0; }
}
/* ==== Single: como e cursar (ref §1.4) ====
   Section full-width, fundo escuro do curso, flex 50/50 (galeria | texto);
   tablet/mobile column-reverse (texto acima da galeria). Valores medidos em
   producao (cursos.ugv.edu.br/uniao/direito/ — Elementor + Swiper):
   - Seta: botao 45x45 (padding 10px + glifo 25px), bg rgba(255,255,255,.2),
     backdrop-blur 10px, radius 1000px, chevron cor --curso-fundo-escuro,
     inset 10px, centrada vertical (top 50%).
   - Dots: inativo 8px branco (opacity 1); ativo estica p/ 30px, bg --curso-destaque
     (medido rgb(247,98,98)), radius 100px, transition all .5s ease-in-out; gap 12px;
     ~7-8px acima da base da imagem.
   - Imagens: galeria natural 1500x1000 (3:2). Producao usa object-fit:fill em ratio
     natural; aqui fixo aspect 3/2 + object-fit:cover p/ uniformizar os slides do
     carrossel (visualmente identico p/ as imgs 3:2 do curso).
   - Texto: padding 24px 0 24px 80px (desktop), 45px 20px (tablet), 60px 35px (mobile
     — o 60px vertical vem do .e-con-inner da producao). h2 PJS 40/32/30px w400
     (<b> bold) lh 1.2em cor destaque, max-width 480px; gap titulo->corpo 20px
     (medido na producao); corpo Inter 16px/1.5 cor --curso-texto-escuro,
     max-width 480px (100% no tablet).
   Nota: ref citava "wrapper margin-bottom -6px", mas o wrapper do Swiper mediu 0px
   na producao atual — omitido p/ bater com o medido. */
.ugv-cursar { display: flex; background: var(--curso-fundo-escuro); }
/* galeria estica p/ 100% da altura da coluna (= altura do texto, via stretch do flex);
   a imagem cover preenche tudo, sem sobrar o fundo escuro embaixo (pedido do usuario).
   No mobile (@1024, empilhado) o slide volta a ter aspect-ratio proprio. */
.ugv-cursar__galeria { width: 50%; display: flex; }
.ugv-cursar__galeria .ugv-galeria { flex: 1; min-height: 0; }
.ugv-cursar__galeria .ugv-carousel__track { height: 100%; }
.ugv-cursar__texto { width: 50%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 24px 0 24px 80px; }
.ugv-cursar__texto h2 { max-width: 480px; font-family: var(--font-titulo); font-size: 40px; font-weight: 400; line-height: 1.2em; color: var(--curso-destaque); }
.ugv-cursar__texto h2 b { font-weight: 700; }
.ugv-cursar__texto > div { max-width: 480px; font-family: var(--font-texto); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--curso-texto-escuro); }
/* Galeria — carrossel com setas + dots DENTRO do slide (absolutos) */
.ugv-galeria__slide { height: 100%; }
.ugv-galeria__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ugv-galeria .ugv-carousel__prev,
.ugv-galeria .ugv-carousel__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 1000px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--curso-fundo-escuro); }
.ugv-galeria .ugv-carousel__prev { left: 10px; }
.ugv-galeria .ugv-carousel__next { right: 10px; }
.ugv-galeria .ugv-carousel__prev .ugv-icone,
.ugv-galeria .ugv-carousel__next .ugv-icone { width: 25px; height: 25px; }
.ugv-galeria .ugv-carousel__dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 90; display: flex; justify-content: center; gap: 12px; }
.ugv-galeria .ugv-carousel__dot { width: 8px; height: 8px; padding: 0; border-radius: 100%; background: #fff; transition: all .5s ease-in-out; }
.ugv-galeria .ugv-carousel__dot.is-active { width: 30px; border-radius: 100px; background: var(--curso-destaque); }
@media (max-width: 1024px) {
	.ugv-cursar { flex-direction: column-reverse; }
	/* empilhado: galeria volta a block; track e slide a altura propria (aspect-ratio
	   3/2), sem a coluna de texto ao lado p/ definir a altura. */
	.ugv-cursar__galeria { width: 100%; display: block; }
	.ugv-cursar__galeria .ugv-carousel__track { height: auto; }
	.ugv-galeria__slide { aspect-ratio: 3 / 2; height: auto; }
	.ugv-cursar__texto { width: 100%; padding: 45px 20px; }
	.ugv-cursar__texto h2 { font-size: 32px; }
	.ugv-cursar__texto > div { max-width: 100%; }
}
@media (max-width: 767px) {
	.ugv-cursar__texto { padding: 60px 35px; }
	.ugv-cursar__texto h2 { font-size: 30px; }
}
/* ==== Single: professores (ref-single §1.5) ====
   Section boxed sobre fundo BRANCO FIXO (nao herda cor do curso), min-height 600px:
   heading a esquerda (24%) + carrossel a direita (74%), centralizados na vertical.
   Tablet+ empilha (heading full-width acima do carrossel; min-height 0). Card corrente
   (.is-current, aplicado pelo ugv.js no PRIMEIRO slide visivel) cresce de 260->320px
   dentro de um "palco" fixo de 340px — sem reflow.

   SETAS: em producao os valores do Elementor sao hacks de layout (right:1100px etc.);
   aqui as setas sao absolutas ancoradas em .ugv-professores__grid (position:relative).
   O carrossel vira position:static DE PROPOSITO por dois motivos: (a) as setas escapam
   do seu overflow:hidden — o bloco-continente delas passa a ser o grid (ancestral do
   carrossel), entao o overflow do carrossel nao as clipa; (b) o overflow:hidden segue
   valendo pra clipar os clones do track. Posicoes reproduzem o RESULTADO visual medido:
     - desktop: canto inferior-esquerdo, sob o heading  (prod bottom:80px, right:1100/1030)
     - tablet:  topo-direita, ao lado do heading         (prod bottom:350px, right:55/10)
     - mobile:  centralizadas abaixo do carrossel        (prod bottom:-50px, right:54%/36%)
   OVERLAY do card: pseudo ::before com o gradient POR CIMA da bg-image (que vem inline no
   style="background-image"); o texto sobe com position:relative + z-index. O card usa
   longhands de background (nao o shorthand `background`, que apagaria a url inline). */
.ugv-professores { display: flex; align-items: center; min-height: 600px; background: #fff; }
.ugv-professores__grid { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.ugv-professores__grid > h2 { width: 24%; margin-top: -40px; font-family: var(--font-titulo); font-size: 42px; font-weight: 400; line-height: 1em; color: var(--curso-titulo-claro); }
.ugv-professores__grid > h2 b { font-weight: 700; }
.ugv-professores__carrossel { position: static; width: 74%; }
/* "Palco" de altura fixa: o card centraliza vertical e cresce sem empurrar o layout.
   gap 6px = padding-inline 3px em cada slide. */
.ugv-professores__slide { height: 340px; display: grid; align-items: center; padding-inline: 3px; }
.ugv-prof-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; height: 260px; padding: 35px 35px 20px; border-radius: 10px; background-repeat: no-repeat; background-position: top center; background-size: cover; color: #fff; transition: height .8s; }
.ugv-prof-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #00000000 40%, #000000 100%); }
.ugv-prof-card h3, .ugv-prof-card a { position: relative; z-index: 1; }
.ugv-prof-card h3 { font-family: var(--font-titulo); font-size: 16px; font-weight: 700; color: #fff; }
/* Link "ver currículo": DOM = [texto, icone] => row normal ja poe o icone a DIREITA
   (nao precisa row-reverse, que na producao existe so porque la o DOM e' [icone, texto]).
   align-self:flex-start mantem o link com a largura do conteudo, alinhado a esquerda. */
.ugv-prof-card a { align-self: flex-start; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 0; font-family: var(--font-titulo); font-size: 14px; font-weight: 500; color: #fff; }
.ugv-prof-card a .ugv-icone { width: 16px; height: 16px; flex: none; }
.ugv-professores__slide.is-current .ugv-prof-card { height: 320px; }
/* Setas: circulo 50px, borda rgba(0,0,0,.3), glifo na cor de destaque do curso. */
.ugv-professores__carrossel .ugv-carousel__prev,
.ugv-professores__carrossel .ugv-carousel__next { position: absolute; z-index: 90; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(0, 0, 0, .3); border-radius: 100px; background: transparent; color: var(--curso-destaque); }
.ugv-professores__carrossel .ugv-carousel__prev .ugv-icone,
.ugv-professores__carrossel .ugv-carousel__next .ugv-icone { width: 30px; height: 30px; }
.ugv-professores__carrossel .ugv-carousel__prev { left: 0; bottom: 80px; }
.ugv-professores__carrossel .ugv-carousel__next { left: 70px; bottom: 80px; }
@media (max-width: 1024px) {
	.ugv-professores { min-height: 0; padding: 45px 20px; }
	.ugv-professores__grid { flex-direction: column; align-items: stretch; padding-inline: 0; }
	.ugv-professores__grid > h2 { width: 100%; margin-top: 0; margin-bottom: 20px; font-size: 32px; }
	.ugv-professores__carrossel { width: 100%; }
	/* Setas 40px no topo-direita, ao lado do heading. */
	.ugv-professores__carrossel .ugv-carousel__prev,
	.ugv-professores__carrossel .ugv-carousel__next { width: 40px; height: 40px; top: 0; bottom: auto; }
	.ugv-professores__carrossel .ugv-carousel__prev .ugv-icone,
	.ugv-professores__carrossel .ugv-carousel__next .ugv-icone { width: 24px; height: 24px; }
	.ugv-professores__carrossel .ugv-carousel__prev { left: auto; right: 50px; }
	.ugv-professores__carrossel .ugv-carousel__next { left: auto; right: 0; }
}
@media (max-width: 767px) {
	.ugv-professores { padding: 60px 35px 90px; }
	.ugv-professores__grid > h2 { font-size: 30px; }
	/* Setas centralizadas abaixo do carrossel. */
	.ugv-professores__carrossel .ugv-carousel__prev { right: auto; top: auto; left: calc(50% - 48px); bottom: -45px; }
	.ugv-professores__carrossel .ugv-carousel__next { right: auto; top: auto; left: calc(50% + 8px); bottom: -45px; }
}
/* ==== Single: infos (coordenacao + accordion institucional) — ref-single §1.6 ====
   Section boxed sobre --curso-fundo-claro; flex row space-around: coordenacao 25% |
   accordion 70% (30/65 no tablet; empilha no mobile, card ACIMA do accordion).
   Valores MEDIDOS em producao (cursos.ugv.edu.br/uniao/direito/, Elementor):
   - grid: justify-content space-around (medido).
   - card: border 1px --curso-fundo-escuro (medido rgb(96,15,15)), radius 15px,
     flex column gap 2px, padding 0.
   - foto: wrapper height 250px, overflow hidden, radius 10px, margin-bottom 16px;
     imagem 300x300 (medium) exibida cover — prod usa object-fit:fill; aqui cover
     p/ uniformizar (desvio consciente, mesma escolha da galeria).
   - label "Coordenacao": PJS 18px/400 lh1, padding 0 20px, cor --curso-texto-claro.
   - nome: PJS 20px/700 lh1.5, padding 0 20px 20px, margin-bottom -12px (medido),
     cor --curso-texto-claro.
   - mobile: card -> accordion com 30px de gap (medido).
   Accordion REUSA .ugv-accordion__* da Task 7 (nao duplicado; a Task 7 ja escala o
   summary 32->26->20px por breakpoint, global). O botao da Matriz usa .ugv-btn
   .ugv-btn--destaque (ja existe; medido identico em prod: content-width, pilula,
   16px/600). Aqui so acrescento a imagem da avaliacao (item 1) e os links dos
   wysiwyg (cor --curso-texto-claro, sublinhados; hover sem sublinhado), excluindo
   o botao .ugv-btn da Matriz do underline/cor. */
.ugv-infos { background: var(--curso-fundo-claro); padding: 90px 0; }
.ugv-infos__grid { display: flex; justify-content: space-around; }
.ugv-coordenacao { width: 25%; }
.ugv-infos__accordion { width: 70%; }
/* Coordenacao ocultavel (_ugv_ocultar_coordenacao): sem a coluna, o accordion vira o
   unico filho do grid e ocupa a largura toda (feature sem uso na producao atual —
   todos os cursos tem a coordenacao visivel —, entao 100% e' a interpretacao fiel). */
.ugv-infos__accordion:only-child { width: 100%; }
.ugv-coordenacao__card { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--curso-fundo-escuro); border-radius: 15px; }
.ugv-coordenacao__foto { height: 250px; overflow: hidden; border-radius: 10px; margin-bottom: 16px; }
.ugv-coordenacao__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ugv-coordenacao__label { margin: 0; padding: 0 20px; font-family: var(--font-titulo); font-size: 18px; font-weight: 400; line-height: 1; color: var(--curso-texto-claro); }
.ugv-coordenacao__nome { margin: 0 0 -12px; padding: 0 20px 20px; font-family: var(--font-titulo); font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--curso-texto-claro); }
/* Imagem da avaliacao institucional (item 1) ocupa a largura da coluna (max-width do reset). */
.ugv-infos .ugv-accordion__conteudo img { display: block; }
/* Links dos wysiwyg (situacao legal / infos adicionais) — o botao da Matriz fica de fora. */
.ugv-infos .ugv-accordion__conteudo a:not(.ugv-btn) { color: var(--curso-texto-claro); text-decoration: underline; }
.ugv-infos .ugv-accordion__conteudo a:not(.ugv-btn):hover { text-decoration: none; }
@media (max-width: 1024px) {
	.ugv-infos { padding: 45px 0; }
	.ugv-coordenacao { width: 30%; }
	.ugv-infos__accordion { width: 65%; }
}
@media (max-width: 767px) {
	.ugv-infos { padding: 60px 35px; }
	.ugv-infos__grid { flex-direction: column; padding-inline: 0; }
	.ugv-coordenacao { width: 100%; margin-bottom: 30px; }
	.ugv-infos__accordion { width: 100%; }
}
/* ==== Single: depoimentos (Task 12 — ref-single §1.7) ==== */
/* Sistema de tabs (JetTabs na producao). Valores MEDIDOS no voltz contra
   cursos.ugv.edu.br/uniao/engenharia-de-software (5 depoimentos):
   - Section boxed sobre --curso-fundo-escuro (medido #0f1762 = fundo escuro do curso),
     padding vertical 180px. bg-image bg-depoimentos.png center center (asset extraido pela
     auditoria; DESVIO: no computed da producao atual a imagem aparece como "none" — aplicada
     conforme o plano/ref; e' textura MUITO sutil (fino contorno claro a direita num PNG
     transparente), nao altera o pixel-perfect sobre o fundo escuro).
   - H2: PJS 42/400 lh 1.2em, cor --curso-destaque, width 27% (medido 308/1140), ABSOLUTO
     a 96px do topo do box: top:-84px relativo ao wrap (que comeca a 180px de padding;
     180-84=96) e left 16px — bate 1:1 com a producao.
   - Tabs: pills a DIREITA em coluna 25% (medido 280/1120) | paineis a ESQUERDA 75% (840/1120).
   - Pill: flex align-center, bg #fff, border 1px --curso-fundo-claro, radius 100px,
     margin-bottom 5px, padding 5px 10px; foto 50x50 circular cover mr 5px; nome PJS 14/700
     lh1.5 cor --curso-titulo-claro (hover --curso-texto-claro). Pill ativa = igual visualmente
     na producao (so recebe a classe; sem destaque de bg/cor).
   - Painel: flex row align-center; texto Inter 18/400 lh1.5 cor --curso-texto-escuro width 75%
     (medido 592/790, ~branco no fundo escuro); foto 200x200 cover radius 5px a direita.
     DESVIO: padding-right 20px no painel reproduz o respiro foto->pills que na producao vem do
     padding 50px do jet-tabs__content (a foto transborda ~30px, respiro liquido ~17px medido).
   - Badge quote: quote-left 18px branco, bg --curso-destaque, padding 15px, radius 20px (48x48),
     ABSOLUTO sobre o canto inf-esq da foto. MEDIDO na producao top 170px left -14px (a ref dizia
     180/-4; uso os valores MEDIDOS por serem 1:1 com o que aparece na tela).
   - Direito tem 1 depoimento: pill unica, sem auto-switch (setupTabs so cria timer com >=2 pills).
   Responsivo (tablet/mobile) implementado a partir da ref §1.7 — voltz nao redimensiona, entao
   os 3 breakpoints ficam para o live-check do coordenador. */
.ugv-depoimentos { background: var(--curso-fundo-escuro) url(../img/bg-depoimentos.png) no-repeat center center; padding: 180px 0; }
.ugv-depoimentos__wrap { position: relative; }
.ugv-depoimentos h2 { position: absolute; top: -84px; left: 16px; width: 27%; margin: 0; font-family: var(--font-titulo); font-size: 42px; font-weight: 400; line-height: 1.2em; color: var(--curso-destaque); }
.ugv-depoimentos h2 b { font-weight: 700; }
.ugv-tabs { display: flex; align-items: flex-start; }
.ugv-tabs__paineis { width: 75%; }
.ugv-tabs__pills { width: 25%; display: flex; flex-direction: column; }
/* Pills (botoes) */
.ugv-tabs__pill { display: flex; align-items: center; width: 100%; margin: 0 0 5px; padding: 5px 10px; border: 1px solid var(--curso-fundo-claro); border-radius: 100px; background: #fff; text-align: left; }
.ugv-tabs__pill img { flex: none; width: 50px; height: 50px; margin-right: 5px; border-radius: 100px; object-fit: cover; }
.ugv-tabs__pill span { font-family: var(--font-titulo); font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--curso-titulo-claro); transition: color .3s; }
.ugv-tabs__pill:hover span, .ugv-tabs__pill:focus span { color: var(--curso-texto-claro); }
/* Paineis: so o ativo aparece (troca por .is-active, efeito move-up) */
.ugv-tabs__panel { display: none; }
.ugv-tabs__panel.is-active { display: flex; align-items: center; gap: 20px; padding: 20px 20px 20px 0; animation: ugv-depoimentos-up .35s ease both; }
@keyframes ugv-depoimentos-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.ugv-tabs__texto { width: 75%; font-family: var(--font-texto); font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--curso-texto-escuro); }
.ugv-tabs__foto { position: relative; flex: none; width: 200px; height: 200px; margin-left: auto; }
.ugv-tabs__foto img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.ugv-tabs__quote { position: absolute; top: 170px; left: -14px; display: inline-flex; padding: 15px; border-radius: 20px; background: var(--curso-destaque); color: #fff; }
.ugv-tabs__quote .ugv-icone { width: 18px; height: 18px; }
@media (max-width: 1024px) {
	.ugv-depoimentos { padding: 45px 20px; background-position: center left; }
	.ugv-depoimentos__wrap { padding-inline: 0; }
	/* tablet: h2 volta pro fluxo no topo (width 100%); tabs empilham com as pills em cima */
	.ugv-depoimentos h2 { position: static; width: 100%; margin: 0 0 25px; font-size: 32px; }
	.ugv-tabs { flex-direction: column; }
	.ugv-tabs__paineis { width: 100%; }
	.ugv-tabs__pills { order: -1; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 5px; margin-bottom: 25px; }
	.ugv-tabs__pill { width: auto; flex: 1 1 30%; margin: 0; }
	.ugv-tabs__panel.is-active { padding: 0; }
	.ugv-tabs__texto { width: 65%; }
	.ugv-tabs__quote { left: -20px; }
}
@media (max-width: 767px) {
	.ugv-depoimentos { padding: 120px 35px 45px; }
	/* mobile: h2 volta a absoluto (ha' 120px de padding no topo), left 10px */
	.ugv-depoimentos h2 { position: absolute; top: -84px; left: 10px; width: 100%; margin: 0; font-size: 30px; }
	/* pills 1 por linha (full-width) no mobile: 2-up (45%) quebrava os nomes longos
	   dos egressos em varias linhas (pedido do usuario). */
	.ugv-tabs__pill { flex: 1 1 100%; }
	/* painel empilha: texto 100% em cima, foto grande (222px) no fim da coluna */
	.ugv-tabs__panel.is-active { flex-direction: column; align-items: flex-start; }
	.ugv-tabs__texto { width: 100%; }
	/* foto quadrada centralizada (~260px) + badge de aspas VAZANDO no canto sup-direito (pedido do usuario) */
	.ugv-tabs__foto { width: 260px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
	.ugv-tabs__quote { top: -12px; left: auto; right: -12px; }
}
/* ==== Single: bolsas e incentivos (Task 13 — ref-single §1.8) ==== */
/* Carrossel de bolsas GLOBAIS (9 posts). Section BRANCA (fundo da pagina).
   Valores MEDIDOS no voltz contra cursos.ugv.edu.br/uniao/direito (JetListingGrid+slick):
   - Section boxed, sem bg, padding 90px 0 (tablet 45px 20px; mobile 60px 35px 90px).
   - H2 "Bolsas e Incentivos": PJS 32/700 lh 1em (medido 32px), cor --curso-titulo-claro
     (medido rgb(97,29,29) no Direito), margin-bottom 15px.
   - Card: cor PROPRIA da bolsa (inline por card), radius 10px, min-height 340px, flex
     column align-center gap 20px, padding 20px efetivo (prod = outer 0 20 + inner 20 0).
     Logo width 80% (medido 193/241) height 80px object-fit contain, centrado. Divider:
     linha 1px #FFFFFF47 (medido rgba(255,255,255,.28)) centrada numa faixa de 11px
     (padding-block 5px), full width. Texto Inter 14/400 lh1.5 branco, full width, esquerda.
   - Setas: circulo 50px, cor --curso-destaque (medido rgb(247,98,98) no Direito), bg
     transparente, border 1px solid rgba(0,0,0,.3), ACIMA A DIREITA (medido: verticalmente
     centradas no h2 — top heading-rel ~-8 —, next flush a direita do container, prev ~55px).
     As setas sao filhas do .ugv-carousel (overflow:hidden); pra ficarem ACIMA do track sem
     serem cortadas, escapam do clip posicionando-se relativo ao .ugv-container
     (position:relative) com o carrossel em position:static — o clip do overflow nao alcanca
     descendentes cujo bloco-contedor e' um ancestral do box (CSS 2.1 §11.1.1).
   - Slides: gap 6px via padding-inline 3px (medido 287 slide / 281 card).
   DESVIO: icone das setas = Phosphor chevron 30px (prod usa Font Awesome; decisao do projeto).
   Responsivo (tablet/mobile) a partir da ref §1.8; live-check dos 3 breakpoints com o coordenador. */
.ugv-bolsas { padding: 90px 0; }
.ugv-bolsas .ugv-container { position: relative; }
.ugv-bolsas h2 { margin: 0 0 15px; font-family: var(--font-titulo); font-size: 32px; font-weight: 700; line-height: 1; color: var(--curso-titulo-claro); }
/* padding-top reproduz o respiro h2->cards da producao (cards a 67px do topo do h2:
   h2 32 + mb 15 + 20; na prod o widget de heading do Elementor soma ~20px alem do
   margin). Sem clip pras setas: elas sao absolutas relativas ao .ugv-container. */
.ugv-bolsas__carrossel { position: static; padding-top: 20px; }
.ugv-bolsas__slide { padding-inline: 3px; }
.ugv-bolsa-card { display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 340px; padding: 20px; border-radius: 10px; }
.ugv-bolsa-card__logo { width: 80%; height: 80px; object-fit: contain; }
.ugv-bolsa-card hr { width: 100%; height: 1px; margin: 0; padding: 5px 0; border: 0; box-sizing: content-box; background: #FFFFFF47; background-clip: content-box; }
.ugv-bolsa-card__texto { width: 100%; font-family: var(--font-texto); font-size: 14px; font-weight: 400; line-height: 1.5; color: #fff; }
.ugv-bolsa-card__texto > :last-child { margin-bottom: 0; }
/* Setas acima a direita — escapam do overflow do carrossel (contexto = .ugv-container). */
.ugv-bolsas .ugv-carousel__prev,
.ugv-bolsas .ugv-carousel__next { position: absolute; top: -8px; z-index: 90; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(0, 0, 0, .3); border-radius: 100px; background: transparent; color: var(--curso-destaque); }
.ugv-bolsas .ugv-carousel__prev .ugv-icone,
.ugv-bolsas .ugv-carousel__next .ugv-icone { width: 30px; height: 30px; }
.ugv-bolsas .ugv-carousel__prev { right: 55px; }
.ugv-bolsas .ugv-carousel__next { right: 0; }
@media (max-width: 1024px) {
	.ugv-bolsas { padding: 45px 20px; }
	.ugv-bolsas .ugv-container { padding-inline: 0; }
}
@media (max-width: 767px) {
	.ugv-bolsas { padding: 60px 35px 90px; }
	.ugv-bolsa-card { padding: 20px 40px; }
	/* setas descem p/ baixo do carrossel, centralizadas: no mobile o h2 (1 linha)
	   ocupa a largura e colidiria com as setas no canto sup-direito. Producao faz
	   igual (setas ~436px abaixo do h2, centradas). */
	.ugv-bolsas .ugv-carousel__prev,
	.ugv-bolsas .ugv-carousel__next { top: auto; bottom: -70px; }
	.ugv-bolsas .ugv-carousel__prev { left: calc(50% - 55px); right: auto; }
	.ugv-bolsas .ugv-carousel__next { left: calc(50% + 5px); right: auto; }
}
/* ==== CTA vídeo institucional (ref §1.9) ==== */
/* Section com bg de VIDEO do YouTube (mudo/loop, injetado por setupVideoBg) cobrindo
   toda a area + overlay --curso-fundo-escuro a 0.6. O iframe e' pointer-events:none;
   o clique fica so no play (abre o lightbox com o video institucional). */
.ugv-cta-video { position: relative; overflow: hidden; display: flex; align-items: center; padding: 90px 0; }
.ugv-cta-video__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* Cover bulletproof (section = largura total): 16:9 dimensionado por vw/vh, centrado e
   clipado pelo overflow do pai — a parte excedente do video some sem distorcer. */
.ugv-cta-video__bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.78vh; transform: translate(-50%, -50%); pointer-events: none; border: 0; }
.ugv-cta-video__bg::after { content: ""; position: absolute; inset: 0; background: var(--curso-fundo-escuro); opacity: .6; }
.ugv-cta-video__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-inline: 0; }
.ugv-cta-video h2 { width: 49%; font-family: var(--font-titulo); font-size: 32px; font-weight: 400; line-height: 1em; color: #fff; }
.ugv-cta-video h2 b { font-weight: 700; }
.ugv-cta-video__play { padding: 0; line-height: 0; background: none; border: 0; cursor: pointer; }
.ugv-cta-video__play img { display: block; width: 288px; height: 288px; transition: transform 1.3s; }
.ugv-cta-video__play:hover img, .ugv-cta-video__play:focus img { transform: scale(1.12); }
@media (max-width: 1024px) {
	.ugv-cta-video { padding: 90px 35px; }
	.ugv-cta-video__inner { flex-direction: column; text-align: center; gap: 35px; }
	.ugv-cta-video h2 { width: 100%; font-size: 26px; text-align: center; }
}
@media (max-width: 767px) {
	.ugv-cta-video { padding: 45px 35px; }
	.ugv-cta-video h2 { font-size: 22px; line-height: 1.2; }
	/* play centralizado: botao com largura fixa + img preenchendo. Antes era width:80%
	   na img, que ficava encostada a esquerda dentro do botao de 288px (parecia torto). */
	.ugv-cta-video__play { width: 220px; max-width: 100%; }
	.ugv-cta-video__play img { width: 100%; height: auto; }
}
/* ==== Lightbox de video (markup gerado por setupLightbox no ugv.js) ==== */
.ugv-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .85); }
.ugv-lightbox__inner { position: relative; width: 100%; max-width: 900px; }
.ugv-lightbox__inner iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.ugv-lightbox__close { position: absolute; top: -42px; right: 0; width: 36px; height: 36px; font-size: 30px; line-height: 1; color: #fff; background: none; }
/* ==== Barra fixa "Faça o vestibular" (§4) — sempre visivel, inclusive rolando ==== */
/* reserva espaco no fim da pagina p/ a barra fixa (sempre visivel) nao tapar o footer */
body { padding-bottom: 100px; }
.ugv-barra-fixa { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 9990; margin-bottom: 15px; }
.ugv-barra-fixa__pilula { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 350px; max-width: calc(100vw - 30px); background: #FFFFFF57; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #FFFFFF99; border-radius: 1000px; padding: 10px 10px 10px 30px; font-family: var(--font-titulo); font-size: 16px; line-height: 1.2; color: var(--ugv-navy); }
.ugv-barra-fixa__pilula b { font-weight: 700; }
.ugv-barra-fixa__cta { flex: none; background: var(--ugv-royal); border-color: var(--ugv-royal); color: #fff; font-family: var(--font-texto); font-size: 16px; font-weight: 500; line-height: 1; border-radius: 1000px; padding: 10px 20px; }
.ugv-barra-fixa__cta:hover, .ugv-barra-fixa__cta:focus { background: var(--ugv-navy); border-color: var(--ugv-navy); color: #fff; }
/* ==== WhatsApp flutuante (pulsando) ==== */
.ugv-whats-flutuante { position: fixed; right: 40px; bottom: 10px; z-index: 9995; display: inline-flex; align-items: center; justify-content: center; padding: 10px; border-radius: 50%; background: var(--ugv-green); color: #fff; animation: ugv-pulse-green 2s infinite; }
.ugv-whats-flutuante .ugv-icone { display: block; width: 32px; height: 32px; }
@keyframes ugv-pulse-green {
	0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(82, 189, 48, .7); }
	70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(82, 189, 48, 0); }
	100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(82, 189, 48, 0); }
}
@media (max-width: 767px) {
	/* barra full-width fixada na base (pedido do usuario): faixa 100vw em vez da
	   pilula centrada de 350px, fonte menor. O whats sobe p/ ficar ACIMA da barra —
	   senao ele (canto inf-direito, z maior) cobria o botao "Inscricao gratuita". */
	body { padding-bottom: 76px; }
	.ugv-barra-fixa { left: 0; right: 0; bottom: 0; transform: none; width: 100%; margin-bottom: 0; }
	.ugv-barra-fixa__pilula { width: 100%; max-width: none; border-radius: 0; font-size: 13px; padding: 12px 15px; }
	.ugv-whats-flutuante { right: 15px; bottom: 76px; }
}
/* ==== Popup de interesse (dialog + form; submit STUB ate o Plano RD Station) ==== */
.ugv-popup-interesse { background: #152030CC; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ugv-popup-interesse__painel { position: relative; width: 640px; max-width: 100%; background: #fff; border-radius: 10px; padding: 50px; transform: scale(.96); transition: transform .3s; }
.ugv-popup-interesse.is-open .ugv-popup-interesse__painel { transform: scale(1); }
.ugv-popup-interesse__titulo { width: 64%; max-width: 100%; margin: 0 auto 20px; font-family: var(--font-titulo); font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--ugv-navy); }
.ugv-form-interesse { display: flex; flex-direction: column; gap: 10px; }
.ugv-form-interesse input:not([type="hidden"]) { width: 100%; background: #fff; border: 1px solid #00000045; border-radius: 100px; padding: 14px 24px; font-family: var(--font-texto); font-size: 16px; color: var(--ugv-navy); }
.ugv-form-interesse input::placeholder { color: #00000080; opacity: 1; }
.ugv-form-interesse__submit { width: 100%; margin-top: 5px; background: var(--ugv-yellow); border: 1px solid var(--ugv-yellow); color: var(--ugv-navy); font-family: var(--font-titulo); font-size: 16px; font-weight: 700; border-radius: 100px; padding: 16px 24px; transition: all .3s; }
.ugv-form-interesse__submit:hover, .ugv-form-interesse__submit:focus { background: var(--ugv-navy); border-color: var(--ugv-navy); color: var(--ugv-yellow); }
@media (max-width: 767px) {
	.ugv-popup-interesse__painel { padding: 35px 25px; }
	.ugv-popup-interesse__titulo { width: 100%; }
}
/* ==== Botão flutuante de admin (engrenagem → painel UGV; só p/ logado) ==== */
.ugv-admin-fab {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 9990;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ugv-navy);
	color: #fff;
	box-shadow: 0 10px 26px -8px rgba(9, 29, 65, .6);
	transition: transform .25s ease, background .25s ease;
}
.ugv-admin-fab:hover { background: var(--ugv-navy-dark); transform: translateY(-2px) rotate(35deg); color: #fff; }
.ugv-admin-fab .ugv-icone { width: 26px; height: 26px; }
/* Nas páginas de curso há uma barra fixa embaixo — sobe o FAB p/ não colidir. */
.single-curso .ugv-admin-fab { bottom: 88px; }

/* ==== prefers-reduced-motion: respeita quem pede menos movimento ====
   Neutraliza animacoes/transicoes CSS (pulse do whatsapp, scale do popup, hovers,
   keyframes de accordion/depoimentos). O autoplay dos carrosseis, o auto-switch das
   tabs e o video de fundo do CTA sao desligados no ugv.js (nao sao CSS). */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}
/* ---- Formulario de interesse: honeypot + estados de validacao/status ---- */
.ugv-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ugv-form-interesse .is-erro-campo {
	outline: 2px solid #d33;
	outline-offset: 1px;
}
.ugv-form-interesse__status {
	margin: 8px 0 0;
	font-size: 14px;
	min-height: 1em;
}
.ugv-form-interesse__status.is-erro {
	color: #d33;
}
.ugv-form-interesse__submit:disabled {
	opacity: .65;
	cursor: default;
}
/* ---- Tela de sucesso do formulario (badge animado + textos escalonados) ---- */
.ugv-form-sucesso {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 6px 4px 2px;
}
.ugv-form-sucesso__badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin: 0 0 26px;
	border-radius: 50%;
	background: var(--ugv-navy);
	box-shadow: 0 16px 34px -12px rgba(19, 45, 92, .55);
	animation: ugv-sucesso-pop .55s cubic-bezier(.18, 1.25, .4, 1) both;
}
.ugv-form-sucesso__ring {
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid var(--ugv-yellow);
	opacity: 0;
	animation: ugv-sucesso-ring 1.1s ease-out .3s forwards;
}
.ugv-form-sucesso__svg {
	width: 48px;
	height: 48px;
	overflow: visible;
}
.ugv-form-sucesso__mark {
	stroke: #fff;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 42;
	stroke-dashoffset: 42;
	animation: ugv-sucesso-draw .45s cubic-bezier(.65, 0, .45, 1) .4s forwards;
}
.ugv-form-sucesso__titulo {
	margin: 0 0 10px;
	font-family: var(--font-titulo);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ugv-navy);
	opacity: 0;
	animation: ugv-sucesso-up .5s ease .45s both;
}
.ugv-form-sucesso__texto {
	margin: 0 auto;
	max-width: 340px;
	font-family: var(--font-texto);
	font-size: 16px;
	line-height: 1.55;
	color: #5b6470;
	opacity: 0;
	animation: ugv-sucesso-up .5s ease .55s both;
}
.ugv-form-sucesso__nota {
	margin: 20px 0 0;
	padding-top: 16px;
	width: 100%;
	border-top: 1px solid #eef0f4;
	font-family: var(--font-titulo);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #98a0ad;
	opacity: 0;
	animation: ugv-sucesso-up .5s ease .65s both;
}
@keyframes ugv-sucesso-pop {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes ugv-sucesso-ring {
	0%   { transform: scale(.65); opacity: .85; }
	100% { transform: scale(1.4); opacity: 0; }
}
@keyframes ugv-sucesso-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes ugv-sucesso-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}