/* ============================================================
   UpTeam — /medicos
   Marketing completo para medicos que querem crescer:
   clinicas, consultorios e negocios digitais.

   MOBILE FIRST. Tudo que esta fora de media query e a versao de
   celular. As media queries entram em 720px (tablet) e 1024px
   (computador) e so acrescentam colunas e respiro.

   Direcao: azul marinho quase preto, branco, cinza muito claro e
   dourado em pequenos destaques. Sem verde, sem degrade neon.

   Tipografia: Manrope nos titulos, Inter no resto. Nada de
   serifada: a pagina precisa ser lida rapido.
   ============================================================ */

:root {
	/* escuros */
	--navy-900: #061525;   /* fundo mais escuro: rodape e bloco de posicionamento */
	--navy-800: #081B2F;   /* fundo padrao das areas escuras */
	--navy-700: #0B2038;   /* cards escuros */
	--navy-600: #102942;   /* cards escuros, variacao */
	--line-d:   rgba(255,255,255,0.12);
	--fg-d:     #FFFFFF;
	--fg-d-2:   #A8BACC;   /* texto de apoio no escuro */

	/* claros */
	--white:    #FFFFFF;
	--gray-50:  #F7F8FA;
	--gray-100: #F1F4F7;
	--line-l:   #E5EAF0;
	--ink:      #07182C;
	--fg-l-2:   #4B5F74;   /* texto de apoio no claro */

	/* destaque */
	--gold:     #D4AF61;
	--gold-2:   #C7A154;
	--gold-dim: rgba(212,175,97,0.18);

	--head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--gutter: 22px;
	--max: 1200px;
	--r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--body);
	font-size: 1.05rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3 {
	font-family: var(--head);
	color: var(--ink);
	margin: 0;
	line-height: 1.16;
	letter-spacing: -0.02em;
	font-weight: 800;
}
h1 { font-size: clamp(2.05rem, 8vw, 3.35rem); }
h2 { font-size: clamp(1.72rem, 6.4vw, 2.5rem); }
h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--gold-2); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* areas escuras ------------------------------------------------ */
.dark { background: var(--navy-800); color: var(--fg-d-2); }
.dark h1, .dark h2, .dark h3 { color: var(--fg-d); }

.eyebrow {
	display: block;
	font-family: var(--body);
	font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--gold-2);
	margin-bottom: 16px;
}
.dark .eyebrow { color: var(--gold); }

.lead { margin-top: 18px; font-size: 1.06rem; color: var(--fg-l-2); }
.dark .lead { color: var(--fg-d-2); }
.lead + .lead { margin-top: 12px; }
.small { margin-top: 12px; font-size: 0.98rem; color: var(--fg-l-2); }
.dark .small { color: var(--fg-d-2); }
.gold { color: var(--gold); }

.band { padding: 58px 0; }
.band--gray { background: var(--gray-50); }
.band--gray2 { background: var(--gray-100); }

.head { max-width: 40ch; }

/* reveal discreto */
.rise { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   BOTOES
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; min-height: 56px; padding: 15px 26px;
	font-family: var(--body); font-weight: 600; font-size: 1.02rem;
	text-decoration: none; text-align: center;
	border: 1px solid transparent; border-radius: 12px;
	background: var(--gold); color: var(--ink);
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover { background: #E0BE77; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--outline { background: transparent; color: var(--fg-d); border-color: var(--line-d); }
.btn--outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.95rem; width: auto; }

.ctas { display: grid; gap: 12px; margin-top: 30px; }

/* ============================================================
   CABECALHO
   ============================================================ */
.top {
	position: sticky; top: 0; z-index: 50;
	background: rgba(6,21,37,0.92);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--line-d);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; }
.top__logo img { height: 24px; width: auto; }

.burger {
	width: 44px; height: 44px; flex: none;
	display: grid; place-content: center; gap: 5px;
	background: none; border: 1px solid var(--line-d); border-radius: 11px;
	cursor: pointer; padding: 0;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--fg-d); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.menu { display: none; border-top: 1px solid var(--line-d); padding: 8px var(--gutter) 22px; }
.menu[data-open="true"] { display: block; }
.menu a {
	display: block; padding: 14px 0; color: var(--fg-d); text-decoration: none;
	font-weight: 500; border-bottom: 1px solid var(--line-d);
}
.menu .btn { margin-top: 18px; }
.top__nav { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--navy-800); color: var(--fg-d-2); padding: 42px 0 54px; position: relative; overflow: hidden; }
.hero::before {
	/* brilho frio no canto, bem discreto */
	content: ''; position: absolute; top: -220px; right: -160px; width: 520px; height: 520px;
	background: radial-gradient(closest-side, rgba(38,86,140,0.55), rgba(38,86,140,0));
	pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--fg-d); }
.hero__shot { margin: 32px 0 0; }
.hero__shot img {
	width: 100%; height: auto; border-radius: 16px;
	border: 1px solid var(--line-d);
	aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% center;
}

/* microprovas */
.micro { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.micro li { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; color: var(--fg-d-2); }
.micro svg { flex: none; color: var(--gold); }

/* ============================================================
   BARRA DE PROVAS
   ============================================================ */
.proofbar { display: grid; gap: 12px; }
.proofbar__i {
	border: 1px solid var(--line-l); border-radius: var(--r);
	background: var(--white); padding: 20px 18px;
}
.proofbar__i i {
	display: block; width: 26px; height: 2px; background: var(--gold);
	margin-bottom: 14px; border-radius: 2px;
}
.proofbar__i b {
	display: block; font-family: var(--head); font-weight: 800;
	font-size: 1.6rem; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em;
}
.proofbar__i span { display: block; margin-top: 4px; color: var(--fg-l-2); font-size: 0.99rem; }
.fine { margin-top: 18px; font-size: 0.92rem; color: var(--fg-l-2); }

/* ============================================================
   DIAGRAMA
   Celular: nucleo em cima e seis modulos em coluna, ligados por
   uma linha dourada. Computador: nucleo no meio, tres modulos de
   cada lado, com conectores.
   ============================================================ */
.diagram { margin-top: 34px; }

.hub {
	position: relative; z-index: 1;
	width: 176px; margin: 0 auto;
	aspect-ratio: 1 / 1.1;
	display: grid; place-content: center; text-align: center;
	background: linear-gradient(160deg, var(--navy-600), var(--navy-700));
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	box-shadow: 0 0 0 1px rgba(212,175,97,0.35);
}
.hub b {
	display: block; font-family: var(--head); font-weight: 800;
	font-size: 1.12rem; letter-spacing: 0.02em; color: var(--fg-d);
}
.hub span {
	display: block; margin-top: 6px; font-size: 0.66rem; line-height: 1.5;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
	max-width: 118px;
}

.mods { position: relative; display: grid; gap: 12px; padding-top: 26px; }
/* linha vertical que liga o nucleo aos modulos no celular */
.mods::before {
	content: ''; position: absolute; left: 50%; top: -10px; height: 36px;
	width: 1px; background: linear-gradient(180deg, var(--gold), rgba(212,175,97,0.08));
	transform: translateX(-0.5px);
}
.mod {
	position: relative;
	background: var(--navy-700);
	border: 1px solid var(--line-d);
	border-radius: var(--r);
	padding: 20px 18px 20px 62px;
}
.mod__hex {
	position: absolute; left: 18px; top: 20px;
	width: 30px; aspect-ratio: 1 / 1.1;
	display: grid; place-content: center;
	background: rgba(212,175,97,0.12);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	color: var(--gold);
}
.mod h3 { font-size: 1.06rem; color: var(--fg-d); }
.mod p { margin-top: 6px; font-size: 0.99rem; color: var(--fg-d-2); line-height: 1.55; }

/* ============================================================
   BENEFICIOS
   ============================================================ */
.cards { display: grid; gap: 14px; margin-top: 30px; }
.card {
	background: var(--white); border: 1px solid var(--line-l);
	border-radius: var(--r); padding: 24px 20px;
	box-shadow: 0 6px 18px rgba(7,24,44,0.04);
}
.card__ico {
	width: 40px; height: 40px; border-radius: 11px;
	display: grid; place-content: center; margin-bottom: 14px;
	background: var(--gold-dim); color: var(--gold-2);
}
.card p { margin-top: 8px; color: var(--fg-l-2); font-size: 1rem; }

/* ============================================================
   ETAPAS: PLANEJAR, EXECUTAR, ACOMPANHAR, MELHORAR
   ============================================================ */
.flow { display: grid; gap: 0; margin-top: 30px; }
.flow__i { position: relative; padding: 0 0 26px 54px; }
.flow__i:last-child { padding-bottom: 0; }
.flow__i::before {
	/* linha que liga uma etapa a outra */
	content: ''; position: absolute; left: 17px; top: 38px; bottom: 6px; width: 1px;
	background: linear-gradient(180deg, var(--gold), rgba(212,175,97,0.15));
}
.flow__i:last-child::before { display: none; }
.flow__n {
	position: absolute; left: 0; top: 0;
	width: 36px; aspect-ratio: 1 / 1.1;
	display: grid; place-content: center;
	background: var(--white); box-shadow: 0 0 0 1px var(--gold);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	font-family: var(--head); font-weight: 800; font-size: 0.9rem; color: var(--gold-2);
}
.flow__i h3 { font-size: 1.1rem; padding-top: 4px; }
.flow__i p { margin-top: 6px; color: var(--fg-l-2); font-size: 1rem; }

/* ============================================================
   TALISSA E WILLIAN
   ============================================================ */
.duo { margin-top: 30px; display: grid; gap: 24px; }
.duo__photo { margin: 0; }
.duo__photo img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line-l); }
.duo__who { display: grid; gap: 20px; }
.who { border-left: 2px solid var(--gold); padding-left: 18px; }
.who b { display: block; font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.who i {
	display: block; font-style: normal; font-size: 0.88rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--gold-2); margin: 4px 0 8px;
}
.who p { color: var(--fg-l-2); font-size: 1rem; }

/* ============================================================
   BLOCO DE POSICIONAMENTO
   Foto de fundo com veu escuro. Sem CTA.
   ============================================================ */
.stance { position: relative; isolation: isolate; background: var(--navy-900); padding: 66px 0; overflow: hidden; }
.stance__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.stance::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(6,21,37,0.86), rgba(6,21,37,0.94));
}
.stance h2 { color: var(--fg-d); max-width: 22ch; }
.stance h2 + p {
	margin-top: 14px; font-family: var(--head); font-weight: 700;
	font-size: clamp(1.14rem, 4.6vw, 1.5rem); color: var(--gold); line-height: 1.3;
}
.stance .small { margin-top: 22px; max-width: 58ch; color: var(--fg-d-2); }

/* ============================================================
   FORMULARIO E AGENDA
   ============================================================ */
#formulario { scroll-margin-top: 70px; }
#agendamento { scroll-margin-top: 70px; }

.formcard {
	margin-top: 28px;
	background: var(--white);
	border: 1px solid var(--line-l);
	border-radius: 16px;
	padding: 10px;
	overflow: hidden;
}
.formcard--loading { min-height: 520px; }
.formcard__aviso { padding: 44px 18px; text-align: center; color: var(--fg-l-2); }
.formcard iframe { color-scheme: normal; background: transparent; }

.steps2 { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 0.93rem; color: var(--fg-d-2); }
.steps2 li { display: flex; align-items: center; gap: 8px; }
.steps2 b {
	width: 24px; height: 24px; border-radius: 50%; display: grid; place-content: center; flex: none;
	background: rgba(255,255,255,0.1); color: var(--fg-d); font-size: 0.78rem; font-weight: 700;
}
.steps2 li[data-on="true"] b { background: var(--gold); color: var(--ink); }
.steps2 em { font-style: normal; color: rgba(255,255,255,0.25); }

/* ============================================================
   RODAPE
   ============================================================ */
.foot { background: var(--navy-900); color: #8FA3B8; padding: 34px 0; font-size: 0.95rem; }
.foot img { height: 22px; width: auto; margin-bottom: 14px; }
.foot p { max-width: 46ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.foot a { color: #C4D2E0; text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot__legal { margin-top: 16px; font-size: 0.9rem; color: #64788C; }

/* ============================================================
   TABLET
   ============================================================ */
@media (min-width: 720px) {
	:root { --gutter: 32px; }
	.band { padding: 78px 0; }
	.hero { padding: 58px 0 72px; }
	.btn { width: fit-content; min-width: 280px; }
	.ctas { grid-auto-flow: column; justify-content: start; }
	.micro { grid-template-columns: repeat(3, auto); gap: 22px; }
	.proofbar { grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.cards { grid-template-columns: 1fr 1fr; gap: 18px; }
	.flow { grid-template-columns: repeat(2, 1fr); gap: 26px 30px; }
	.duo { grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
	.stance { padding: 90px 0; }
	.menu .btn { width: 100%; }
}

/* ============================================================
   COMPUTADOR
   ============================================================ */
@media (min-width: 1024px) {
	.band { padding: 96px 0; }
	.hero { padding: 76px 0 96px; }

	.burger, .menu { display: none !important; }
	.top__in { min-height: 72px; }
	.top__logo img { height: 27px; }
	.top__nav { display: flex; align-items: center; gap: 28px; }
	.top__nav a { color: var(--fg-d); text-decoration: none; font-size: 0.96rem; font-weight: 500; opacity: 0.86; }
	.top__nav a:hover { opacity: 1; color: var(--gold); }
	.top__nav a.btn { opacity: 1; color: var(--ink); min-width: 0; }

	.hero__in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
	.hero__in > * { min-width: 0; }
	.hero__shot { margin: 0; }
	.hero__shot img { aspect-ratio: 5 / 4.4; }
	.hero h1 { font-size: 3.2rem; }
	.hero .lead { max-width: 52ch; }

	.cards { grid-template-columns: repeat(4, 1fr); }
	.card { padding: 28px 24px; }

	/* etapas em linha, com o fio ligando uma a outra */
	.flow { grid-template-columns: repeat(4, 1fr); gap: 0 26px; }
	.flow__i { padding: 0; }
	.flow__n { position: static; margin-bottom: 16px; }
	.flow__i::before {
		left: auto; right: -26px; top: 19px; bottom: auto;
		width: 26px; height: 1px;
		background: linear-gradient(90deg, var(--gold), rgba(212,175,97,0.15));
	}

	.duo { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
	.duo__who { gap: 26px; }

	.form__in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
	.form__in > * { min-width: 0; }
	.formcard { margin-top: 0; }

	.head { max-width: 46ch; }
	.lead { font-size: 1.1rem; max-width: 62ch; }

	/* ---------- diagrama no computador ----------
	   Tres modulos de cada lado do nucleo. Cada cartao tem um fio
	   dourado saindo em direcao ao centro. */
	.diagram {
		display: grid;
		grid-template-columns: 1fr 232px 1fr;
		align-items: center;
		gap: 0 34px;
		margin-top: 48px;
	}
	.mods { padding-top: 0; gap: 18px; }
	.mods::before { display: none; }
	.mods--left { order: 1; }
	.hub { order: 2; width: 232px; }
	.hub b { font-size: 1.45rem; }
	.hub span { font-size: 0.7rem; max-width: 150px; }
	.mods--right { order: 3; }

	.mod { padding: 22px 22px 22px 66px; }
	.mod__hex { left: 20px; top: 22px; width: 34px; }
	.mod::after {
		content: ''; position: absolute; top: 50%; width: 34px; height: 1px;
		background: linear-gradient(90deg, rgba(212,175,97,0.12), var(--gold));
	}
	.mods--left .mod::after { right: -34px; }
	.mods--right .mod::after {
		left: -34px;
		background: linear-gradient(90deg, var(--gold), rgba(212,175,97,0.12));
	}
	/* pontinho onde o fio encosta no cartao */
	.mod::before {
		content: ''; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
		background: var(--gold); transform: translateY(-2px);
	}
	.mods--left .mod::before { right: -2px; }
	.mods--right .mod::before { left: -2px; }
}

/* ============================================================
   AJUSTES
   ============================================================ */

/* o subtitulo do nucleo saiu de dentro do hexagono: la dentro
   ele caia para 10px, pequeno demais para ler. Agora fica
   abaixo, em tamanho normal. */
.hub > span:not(.hub__mark) { display: none; }
.hub b { font-size: 1.3rem; }
.hub__sub {
	margin: 14px auto 0; max-width: 260px; text-align: center;
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gold); line-height: 1.7;
}

/* o botao principal quebrava em duas linhas a partir do tablet */
@media (min-width: 720px) {
	.btn { min-width: 0; }
	.hero .ctas .btn:first-child { min-width: 330px; }
	.hero .ctas .btn + .btn { min-width: 240px; }
}
@media (min-width: 1024px) {
	.hub__sub { max-width: 232px; }
}

/* o nucleo e a legenda viajam juntos: no computador eles sao um
   unico item do grid do diagrama, no meio */
.hubwrap { display: block; }
@media (min-width: 1024px) {
	.hubwrap { order: 2; }
	.hub { order: 0; }
}

/* fio do diagrama no celular: desce do ultimo cartao de cima ate
   o nucleo e continua do nucleo ate o primeiro cartao de baixo */
@media (max-width: 1023px) {
	.mods { padding-top: 0; }
	.mods--left::before { top: auto; bottom: -32px; height: 32px; }
	.mods--right::before { top: -32px; height: 32px; }
	.hubwrap { margin: 32px 0; }
}

/* microprovas alinhadas pelo topo do icone, e o botao de fora
   sem quebrar em duas linhas */
.micro li { align-items: flex-start; }
.micro svg { margin-top: 3px; }
@media (min-width: 720px) {
	.micro { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
	.hero .ctas .btn + .btn { min-width: 260px; }
	.btn span, .btn--outline { white-space: nowrap; }
}

/* no computador os dois botoes precisam caber na coluna de texto,
   sem invadir a area da foto */
@media (min-width: 1024px) {
	.hero .ctas { grid-template-columns: auto auto; justify-content: start; }
	.hero .ctas .btn:first-child { min-width: 296px; }
	.hero .ctas .btn + .btn { min-width: 0; padding: 15px 22px; }
}

/* ============================================================
   DIAGRAMA NO CELULAR — versao propria, nao o desenho do
   computador encolhido.

   Vira uma sequencia vertical: primeiro o cartao da UpTeam,
   depois os seis cartoes em ordem de leitura, ligados por um
   fio fino que passa pela coluna dos icones.

   A ordem visual aqui e diferente da ordem do HTML, que serve ao
   computador (tres modulos de cada lado). O `order` reorganiza:
   Estrategia, Comunicacao, Aquisicao, Estrutura, Acompanhamento
   e Otimizacao.
   ============================================================ */
@media (max-width: 1023px) {
	.diagram { display: grid; gap: 16px; margin-top: 30px; }

	/* os dois grupos deixam de ser caixas: os cartoes passam a ser
	   filhos diretos do grid e podem ser reordenados */
	.mods { display: contents; }
	.mods::before, .mods--left::before, .mods--right::before { display: none; }

	.hubwrap { order: 1; margin: 0 0 8px; }
	.mods--left  .mod:nth-child(1) { order: 2; }   /* Estrategia */
	.mods--left  .mod:nth-child(3) { order: 3; }   /* Comunicacao */
	.mods--left  .mod:nth-child(2) { order: 4; }   /* Aquisicao */
	.mods--right .mod:nth-child(1) { order: 5; }   /* Estrutura */
	.mods--right .mod:nth-child(2) { order: 6; }   /* Acompanhamento */
	.mods--right .mod:nth-child(3) { order: 7; }   /* Otimizacao */

	/* ---------- cartao da UpTeam ---------- */
	.hub {
		width: auto; margin: 0; aspect-ratio: auto;
		clip-path: none; border-radius: 18px;
		padding: 26px 22px 24px;
		display: block; text-align: center;
		background:
			radial-gradient(120% 130% at 50% 0%, rgba(212,175,97,0.12), rgba(212,175,97,0) 62%),
			linear-gradient(160deg, var(--navy-600), var(--navy-700));
		box-shadow: 0 0 0 1px rgba(212,175,97,0.34), 0 16px 34px rgba(0,0,0,0.25);
	}
	.hub__mark {
		display: block; width: 30px; height: 30px; margin: 0 auto 12px;
		color: var(--gold);
	}
	.hub b { font-size: 1.5rem; letter-spacing: 0.04em; }
	.hub__sub {
		margin: 10px auto 0; max-width: 24ch;
		font-size: 0.84rem; line-height: 1.6;
	}

	/* ---------- cartoes ---------- */
	.mod {
		padding: 22px 20px 22px 70px;
		border-radius: 16px;
		background: var(--navy-700);
		border: 1px solid var(--line-d);
	}
	.mod__hex {
		left: 20px; top: 24px; width: 36px;
		background: rgba(212,175,97,0.14);
		box-shadow: 0 0 0 1px rgba(212,175,97,0.22);
	}
	.mod__hex svg { width: 17px; height: 17px; }
	.mod h3 { font-size: 1.1rem; }
	.mod p { margin-top: 7px; font-size: 1rem; line-height: 1.6; }

	/* ---------- fio ligando um cartao ao outro ----------
	   Passa pelo meio da coluna dos icones e ocupa exatamente o
	   vao do grid. O primeiro fio sai do cartao da UpTeam. */
	.mod::after {
		content: ''; position: absolute; left: 37px; top: -16px;
		width: 1px; height: 16px;
		background: linear-gradient(180deg, rgba(212,175,97,0.15), var(--gold));
	}
	.mod::before {
		content: ''; position: absolute; left: 34px; top: -4px;
		width: 7px; height: 7px; border-radius: 50%;
		background: var(--gold); opacity: 0.85;
	}
}

/* o detalhe hexagonal e so do cartao no celular */
@media (min-width: 1024px) {
	.hub__mark { display: none; }
}

/* o cartao no celular e o .hubwrap inteiro: assim a legenda
   dourada fica DENTRO do cartao, e nao solta embaixo dele */
@media (max-width: 1023px) {
	.hubwrap {
		border-radius: 18px;
		padding: 26px 22px 24px;
		background:
			radial-gradient(120% 130% at 50% 0%, rgba(212,175,97,0.12), rgba(212,175,97,0) 62%),
			linear-gradient(160deg, var(--navy-600), var(--navy-700));
		box-shadow: 0 0 0 1px rgba(212,175,97,0.34), 0 16px 34px rgba(0,0,0,0.25);
	}
	.hub {
		padding: 0; background: none; box-shadow: none;
	}
	.hub__sub { margin-top: 12px; }
}

/* a foto dos fundadores estava ocupando a largura toda: agora
   entra em tamanho de retrato, sem cortar nada */
.duo__photo { max-width: 320px; }
@media (min-width: 720px) { .duo__photo { max-width: 380px; } }
@media (min-width: 1024px) { .duo__photo { max-width: 440px; } }

/* rodape centralizado */
.foot { text-align: center; }
.foot img { margin-left: auto; margin-right: auto; }
.foot p { margin-left: auto; margin-right: auto; }
.foot__links { justify-content: center; }