/* ============================================================================
   WEBFORMAS — SEÇÕES
   Depende de design-system.css (tokens, botões, cartões, utilitários).
   ============================================================================ */

/* ============================================================ 1. CABEÇALHO
   `fixed` (e não `sticky`): sticky continua ocupando espaço no fluxo e
   empurraria a hero para baixo, criando uma faixa branca acima do vídeo.
   Fixo, o menu flutua sobre a hero desde o topo. */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	padding-block: var(--sp-4);
	transition: padding-block var(--t);
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: transparent; transition: background var(--t), box-shadow var(--t);
}

/* --- estado rolado: mais enxuto ---------------------------------------
   A pílula devolve o vidro para a barra inteira, o logo encolhe e o bloco
   de texto do WhatsApp some — sobra o essencial: marca, links e o ícone. */
.site-header.is-stuck { padding-block: var(--sp-2); }
.site-header.is-stuck::before {
	background: rgba(20, 2, 60, .86);
	-webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}
.site-header.is-stuck .nav {
	background: transparent; border-color: transparent; box-shadow: none;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	padding-block: 0; padding-left: 0;
}
.site-header.is-stuck .nav__logo img { width: 88px; }
.site-header.is-stuck .nav__link { padding-block: .45rem; }
.site-header.is-stuck .nav__cta { padding: 0; background: none; box-shadow: none; }
.site-header.is-stuck .nav__cta span:last-child { display: none; }
.site-header.is-stuck .nav__cta-ico {
	width: 42px; height: 42px;
	background-image: linear-gradient(180deg, var(--lime-400), var(--lime-600));
	box-shadow: 0 8px 20px rgba(123, 199, 10, .38);
}
.site-header.is-stuck .nav__cta-ico svg { fill: var(--ink-900); }

.nav {
	display: flex; align-items: center; gap: var(--sp-5);
	padding: .5rem .5rem .5rem 1.5rem;
	border-radius: var(--r-pill);
	background: rgba(29, 2, 78, .55);
	border: 1px solid var(--line-dark);
	-webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.nav__logo { flex: none; display: block; }
.nav__logo img { width: 118px; }

.nav__menu { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.nav__link {
	position: relative; display: inline-flex; align-items: center; gap: .35rem;
	padding: .625rem 1rem; border-radius: var(--r-pill);
	font-size: .78rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--lime-500); background: rgba(255, 255, 255, .08); }
.nav__link[aria-current="page"] {
	color: var(--lime-500); background: rgba(155, 230, 25, .14);
	box-shadow: inset 0 0 0 1px rgba(155, 230, 25, .32);
}
.nav__link svg { width: 11px; height: 11px; transition: transform var(--t-fast); }

.nav__item { position: relative; }
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item--has-sub:hover .nav__link svg { transform: rotate(180deg); }

.nav__sub {
	position: absolute; left: 0; top: calc(100% + .5rem); z-index: 20;
	min-width: 264px; padding: var(--sp-2);
	border-radius: var(--r-md);
	background: rgba(20, 4, 48, .96);
	border: 1px solid var(--line-dark);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--t), visibility var(--t), transform var(--t);
}
.nav__sub a {
	display: block; padding: .6rem .8rem; border-radius: var(--r-sm);
	font-size: var(--fs-xs); color: rgba(255, 255, 255, .8);
	transition: background var(--t-fast), color var(--t-fast);
}
.nav__sub a:hover { background: rgba(155, 230, 25, .14); color: var(--lime-500); }

/* mesma paleta do botão principal (.btn--lime): lime com tinta escura e o
   ícone num círculo violeta */
.nav__cta {
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .4rem 1.15rem .4rem .4rem; border-radius: var(--r-pill);
	border: 0; color: var(--ink-900);
	background-image: linear-gradient(180deg, var(--lime-400) 0%, var(--lime-600) 100%);
	box-shadow: var(--sh-lime);
	transition: box-shadow var(--t), transform var(--t);
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(123, 199, 10, .46); }
.nav__cta-ico {
	width: 38px; height: 38px; border-radius: 50%; flex: none;
	background: var(--ink-800); display: grid; place-items: center;
}
.nav__cta-ico svg { width: 20px; height: 20px; fill: var(--lime-500); }
.nav__cta small { display: block; font-size: .68rem; font-weight: 600; line-height: 1.2; color: rgba(12, 26, 2, .68); }
.nav__cta strong { display: block; font-size: .875rem; font-weight: 800; line-height: 1.2; }

.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(255,255,255,.1); border: 1px solid var(--line-dark); color: var(--lime-500); }
.nav__toggle svg { width: 22px; height: 22px; margin-inline: auto; }

@media (max-width: 1100px) {
	.nav { padding-right: .75rem; }
	.nav__menu, .nav__cta { display: none; }
	.nav__toggle { display: grid; place-items: center; margin-left: auto; }

	.nav__menu.is-open {
		display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
		position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .5rem);
		padding: var(--sp-4); border-radius: var(--r-lg);
		background: rgba(20, 4, 48, .97);
		border: 1px solid var(--line-dark);
		-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
		box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
	}
	.nav__menu.is-open .nav__link { justify-content: space-between; font-size: .82rem; }
	.nav__menu.is-open .nav__sub {
		position: static; opacity: 1; visibility: visible; transform: none;
		background: transparent; border: 0; box-shadow: none; padding: 0 0 var(--sp-2) var(--sp-4);
		display: none;
	}
	.nav__menu.is-open .nav__item--open .nav__sub { display: block; }
}

/* ================================================================= 2. HERO */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: flex-end;
	padding-block: 9.5rem var(--sp-12);
	background: var(--ink-900);
	color: var(--text-invert);
}
/* altura: ajuste em --hero-h (design-system.css) */
.hero { height: var(--hero-h); }
/* camadas: vídeo com cor original → overlay roxo → conteúdo.
   O overlay é denso à esquerda, onde fica o texto, e some para a direita
   para o camaleão aparecer sem véu. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-image:
		linear-gradient(90deg, rgba(17, 2, 60, 0.97) 0%, rgba(20, 2, 60, 0.6) 26%, rgba(9, 60, 2, 0.31) 44%, rgba(20, 2, 60, 0) 58%, rgba(20,2,60,0) 70%), linear-gradient(180deg, rgb(17, 2, 60) 0%, rgba(20,2,60,0) 20%, rgba(20, 2, 60, 0) 65%, rgba(15, 60, 2, 0.8) 100%)
}
.hero__inner { position: relative; z-index: 4; width: 100%; }

.hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-1); }
.hero__google { display: inline-block; animation: hero-float 4s ease-in-out infinite; will-change: transform; }
.hero__google img { display: block; width: 210px; border-radius: var(--r-md); filter: drop-shadow(0 14px 32px rgba(0,0,0,.5)); }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero__google { animation: none; } }

.hero__main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); }
.hero__lead { flex: 1 1 60%; min-width: 0; }
.hero__title { font-size: clamp(1.9rem, 3.35vw, 2.65rem); color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.55); max-width: 19ch; }
.hero__sub { margin-top: var(--sp-5); max-width: 46ch; font-size: clamp(.95rem, 1.15vw, 1.125rem); font-weight: 500; color: rgba(255,255,255,.8); }
.hero__cta { margin-top: var(--sp-6); }
.hero__side { flex: 0 0 auto; max-width: 50%; }

.hero__feats {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: var(--sp-7); padding-top: var(--sp-6);
	border-top: 1px solid var(--line-dark);
}
.hero__feat { display: flex; align-items: center; gap: var(--sp-3); padding-right: var(--sp-5); }
.hero__feat svg { width: 26px; height: 26px; flex: none; color: var(--lime-500); }
.hero__feat span { font-size: var(--fs-xs); line-height: 1.4; color: rgba(255,255,255,.62); }
.hero__feat strong { display: block; font-weight: 600; color: #fff; }

@media (max-width: 1024px) {
	/* abaixo do desktop a altura volta a seguir o conteúdo, senão o texto
	   empilhado não caberia na dobra */
	.hero { height: auto; min-height: 0; padding-block: 8rem var(--sp-6); }
	.hero__main { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
	.hero__side { max-width: none; width: 100%; }
	.hero__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
@media (max-width: 640px) {
	.hero__top { margin-bottom: var(--sp-5); margin-top: 29px;}
	.hero__feats { gap: var(--sp-4) var(--sp-3); }  /* 2 colunas x 2 linhas também no celular */
	.hero__feat { padding-right: 0; gap: var(--sp-2); }
	.hero__feat svg { width: 22px; height: 22px; }
	.hero__title { max-width: none; }
	.hero__scrim {background-image: linear-gradient(150deg, rgba(17, 2, 60, 0.97) 0%, rgba(20, 2, 60, 0.71) 26%, rgba(9, 60, 2, 0.25) 44%, rgba(20, 2, 60, 0) 58%, rgba(20,2,60,0) 70%), linear-gradient(180deg, rgb(17, 2, 60) 0%, rgba(20, 2, 60, 0.36) 20%, rgba(20, 2, 60, 0.26) 65%, rgba(15, 60, 2, 0.8) 100%)}
}

/* ============================================================ 3. MARQUEE */
.marquee {
	background: linear-gradient(100deg, var(--violet-700), var(--violet-500) 45%, var(--pink-500));
	color: #fff;
	height: var(--marquee-h); display: flex; align-items: center;
	overflow: hidden; --marquee-speed: 42s;
}
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-speed) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--sp-6); padding-right: var(--sp-6); }
.marquee__item {
	display: inline-flex; align-items: center; gap: var(--sp-3);
	font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.marquee__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime-500); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================== 4. SOBRE / AGÊNCIA COMPLETA */
.sobre { overflow: hidden; }
.sobre__grid { display: grid; grid-template-columns: minmax(0, 41.5fr) minmax(0, 51.5fr); gap: 0 var(--sp-8); align-items: start; }
.sobre__title { margin-top: var(--sp-5); font-size: clamp(1.9rem, 3vw, 2.95rem); }
.sobre__title .t-pink { display: block; }
.sobre__lead { margin-top: var(--sp-5); font-weight: 700; font-size: var(--fs-lead); }
.sobre__body { margin-top: .4rem; max-width: 46ch; }

.sobre__feats { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.sobre__feat { display: flex; gap: var(--sp-4); }
.sobre__feat h3 { margin-top: .2rem; font-size: 1.05rem; font-weight: 700; }
.sobre__feat p { margin-top: .35rem; max-width: 42ch; font-size: var(--fs-sm); color: var(--text-soft); }

.sobre__col-b { display: grid; gap: var(--sp-5); }

.mini-card { text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; align-items: center; }
.mini-card__ico { width: 50px; height: 50px; color: var(--pink-500); }
.mini-card h3 { margin-top: var(--sp-4); font-size: .95rem; font-weight: 700; }
.mini-card p { margin-top: .6rem; font-size: var(--fs-xs); color: var(--text-soft); }
.mini-card__rule { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--pink-500); margin-top: auto; padding-top: 0; }
.mini-card p + .mini-card__rule { margin-top: var(--sp-5); }

/* cartão do vídeo */
.video-card {
	position: relative; overflow: hidden; border-radius: var(--r-lg);
	aspect-ratio: 760 / 358; cursor: pointer;
	background: linear-gradient(122deg, var(--ink-700) 0%, var(--ink-900) 46%, var(--ink-700) 100%);
	box-shadow: var(--sh-md);
}
.video-card__copy { position: absolute; left: 6.5%; top: 15%; z-index: 3; width: 43%; color: #fff; }
.video-card__copy p { font-size: clamp(.95rem, 2.05vw, 1.6rem); font-style: italic; font-weight: 600; line-height: 1.35; }
.video-card__mark {
	display: inline-block; margin-block: .35rem; padding: .3rem .85rem; border-radius: 5px;
	background: var(--pink-500); font-weight: 800; font-style: italic;
	font-size: clamp(.95rem, 2.05vw, 1.6rem);
}
.video-card__hint { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.video-card__hint-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--pink-500); display: grid; place-items: center; flex: none; }
.video-card__hint-ico svg { width: 17px; height: 17px; margin-left: 2px; }
.video-card__hint span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; }
.video-card__illo { position: absolute; right: 2%; bottom: 4%; z-index: 2; width: 52%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.32)); }
.video-card__play {
	position: absolute; left: 65%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
	width: 88px; height: 88px; border-radius: 50%;
	background: rgba(255,255,255,.94); color: var(--ink-800);
	display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3);
	transition: transform var(--t), background var(--t);
}
.video-card__play svg { width: 34px; height: 34px; margin-left: 5px; }
.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.video-card__bar { position: absolute; inset: auto 0 0 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-4); background: linear-gradient(180deg, transparent, rgba(20,2,60,.72) 60%); }
.video-card__bar > svg { width: 15px; height: 15px; color: #fff; flex: none; }
.video-card__track { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.85); }
.video-card__track i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 4px; background: var(--pink-500); }
.video-card__track::after { content: ""; position: absolute; left: 30%; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 6; }

/* barra de números: ícone em cima, número e legenda embaixo, tudo centrado */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--sp-5) var(--sp-3); }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding-inline: var(--sp-3); min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat svg { width: 30px; height: 30px; flex: none; color: var(--pink-500); }
.stat:last-child svg { color: var(--violet-600); }
.stat strong { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat small { display: block; margin-top: 2px; font-size: .74rem; line-height: 1.3; color: var(--text-soft); }

@media (max-width: 1024px) {
	.sobre__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8) 0; }
	.sobre__body, .sobre__feat p { max-width: none; }
}
@media (max-width: 640px) {
	.video-card__copy { width: 54%; top: 12%; }
	.video-card__hint { display: none; }
	.video-card__play { width: 60px; height: 60px; }
	.video-card__play svg { width: 23px; height: 23px; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) 0; }
	.stat:nth-child(3) { border-left: 0; }
}

/* ============================================================= 5. SERVIÇOS */
/* mesmo fundo do site atual: azul #3808F8 com a textura de linhas a 24% */
.servicos { position: relative; background-color: #3808F8; overflow: hidden; }
.servicos::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("../img/servicos-linhas.webp") center / cover no-repeat;
	opacity: .24;
}
.servicos > .container { position: relative; z-index: 1; }
.servicos__head { text-align: center; max-width: 46rem; margin: 0 auto var(--sp-8); }
.servicos__head h2 { margin-top: var(--sp-5); color: #fff; }
.servicos__head h2 .t-violet { color: var(--lime-400); }
.servicos__head p { margin-top: var(--sp-4); color: rgba(255,255,255,.88); }

/* cards brancos com o ícone num círculo vazado, como no site atual */
.servico { display: flex; flex-direction: column; padding: var(--sp-6); border-color: transparent; }
.servico:hover { border-color: rgba(var(--acc), .35); }
.servico__ico { width: 100px; height: 100px; background: #fff; border: 1px solid rgb(var(--acc)); color: rgb(var(--acc)); }
.servico__ico svg { width: 46px; height: 46px; fill: currentColor; }
.servico h3 { margin-top: var(--sp-5); font-size: 1.2rem; color: var(--ink-900); }
.servico p { margin-top: var(--sp-3); font-size: .84rem; line-height: 1.62; color: var(--text-soft); }
.servico .btn-link { margin-top: auto; padding-top: var(--sp-5); align-self: flex-start; color: rgb(var(--acc)); }
.servico .btn-link:hover { color: rgb(var(--acc)); filter: brightness(.85); }

/* cores dos círculos, copiadas do site atual */
.servico--sites   { --acc:   7,  65, 213; } /* #0741D5 */
.servico--trafego { --acc:  29, 175,  40; } /* #1DAF28 */
.servico--social  { --acc:  85,  60, 214; } /* #553CD6 */
.servico--ads     { --acc:   4, 149, 238; } /* #0495EE */
.servico--ia      { --acc:  61,  11, 195; } /* #3D0BC3 */
.servico--seo     { --acc: 231,   6,  86; } /* #E70656 */
.servico--video   { --acc:  23, 147,  31; } /* #17931F */
.servico--landing { --acc: 249, 108,  39; } /* #F96C27 */

/* ========================================================= 6. DEPOIMENTOS */
.depoimentos { background-image: linear-gradient(178deg, #F7F4FE 0%, #FDFCFF 38%, #FBF9FE 100%); overflow: hidden; }
.depoimentos__head { text-align: center; max-width: 46rem; margin: 0 auto var(--sp-8); }
.depoimentos__head h2 { margin-top: var(--sp-5); }
.depoimentos__head p { margin-top: var(--sp-5); }

.reviews { display: grid; grid-template-columns: minmax(0, .78fr) repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: stretch; }

.review-score { text-align: center; padding: var(--sp-7) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; align-items: center; }
.review-score__g { width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(29,2,78,.16); display: grid; place-items: center; }
.review-score__g img { width: 40px; }
.review-score__label { margin-top: var(--sp-5); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.review-score__value { font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--violet-600); }
.review-score__stars { display: flex; gap: 3px; margin-top: .35rem; }
.review-score__stars img { width: 27px; }
.review-score__base { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-soft); }
.review-score__base strong { color: var(--violet-600); }
.review-score__brand { margin-top: auto; padding-top: var(--sp-5); }
.review-score__brand img { width: 122px; }

.review { position: relative; overflow: hidden; padding: var(--sp-6) var(--sp-6) var(--sp-8); display: flex; flex-direction: column; }
.review::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--violet-600), var(--violet-500)); }
.review::after { content: "\201D"; position: absolute; left: var(--sp-6); bottom: .9rem; font-family: Georgia, "Times New Roman", serif; font-size: 5.1rem; line-height: .7; font-weight: 700; color: var(--violet-100); }
.review__head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.review__avatar { width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--violet-500), var(--violet-700)); }
.review__who { flex: 1; min-width: 0; }
.review__who strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.28; }
.review__who small { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--slate-400); }
.review__g { width: 28px; flex: none; }
.review__stars { display: flex; align-items: center; gap: 3px; margin: var(--sp-4) 0 var(--sp-3); }
.review__stars img { width: 21px; }
.review__verified { width: 18px; height: 18px; margin-left: .35rem; color: var(--violet-600); }
.review__text { font-size: 1rem; line-height: 1.62; color: var(--slate-800); }

.reviews__nav { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.round-btn {
	width: 52px; height: 52px; border-radius: 50%;
	background: #fff; border: 1px solid var(--line); color: var(--violet-600);
	display: grid; place-items: center;
	box-shadow: 0 8px 22px rgba(29,2,78,.14);
	transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.round-btn:hover { transform: scale(1.07); box-shadow: 0 12px 28px rgba(29,2,78,.22); }
.round-btn svg { width: 19px; height: 19px; }
.round-btn--solid { background: var(--violet-600); color: #fff; border-color: transparent; box-shadow: var(--sh-violet); }

@media (max-width: 1024px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reviews { grid-template-columns: minmax(0, 1fr); } }

/* ========================================================== 7. CTA SOLUÇÕES */
/* `overflow: visible` para o mascote poder transbordar para a seção de cima;
   os ornamentos ganham um invólucro próprio que os mantém contidos. */
.solucoes { position: relative; background: var(--ink-900); color: var(--text-invert); overflow: visible; }
.solucoes__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.solucoes__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--sp-8); align-items: end; }
.solucoes h2 { margin-top: var(--sp-5); color: #fff; }
.solucoes p { margin-top: var(--sp-5); max-width: 52ch; }
.solucoes .btn { margin-top: var(--sp-6); }
/* recorte com fundo transparente: some o cartão, entra um halo atrás e
   uma sombra que acompanha o contorno do mascote */
/* O mascote encosta na base da seção (anula o padding inferior) e a cabeça
   sobe além do topo, invadindo a seção anterior. */
.solucoes__art {
	position: relative; display: flex; justify-content: center; align-items: flex-end;
	margin-top: calc(-1 * var(--section-y) - 7rem);
	margin-bottom: calc(-1 * var(--section-y));
}
.solucoes__art::before {
	content: ""; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
	width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .38), rgba(236, 42, 120, .14) 58%, transparent 76%);
	filter: blur(8px);
}
.solucoes__art img {
	position: relative; z-index: 1;
	width: 100%; max-width: 460px; height: auto;
	filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .5));
}
@media (max-width: 900px) {
	.solucoes__grid { grid-template-columns: minmax(0, 1fr); }
	.solucoes__art {
		order: -1; margin-top: calc(-1 * var(--section-y) - 3rem); margin-bottom: 0;
	}
	.solucoes__art img { max-width: 300px; }
}

/* ================================================================= 8. BLOG */
.blog { background-image: linear-gradient(172deg, #F8F6FD 0%, #FDFCFF 44%, #FAF8FE 100%); overflow: hidden; }
.blog__head { text-align: center; max-width: 42rem; margin: 0 auto var(--sp-8); }
.blog__head h2 { margin-top: var(--sp-5); }
.blog__head .rule { margin-top: var(--sp-4); }
.blog__head p { margin-top: var(--sp-5); }

.post { overflow: hidden; display: flex; flex-direction: column; }
.post__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__cat {
	position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: 2;
	padding: .45rem .8rem; border-radius: 7px;
	background: var(--violet-600); color: #fff;
	font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
	box-shadow: 0 5px 14px rgba(109,40,217,.34);
}
.post__cat--teal { background: var(--teal-600); box-shadow: 0 5px 14px rgba(20,195,212,.34); }
.post__cat--gold { background: var(--gold-600); box-shadow: 0 5px 14px rgba(247,179,43,.34); }
.post__cat--pink { background: var(--pink-500); box-shadow: 0 5px 14px rgba(236,42,120,.34); }
.post__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5); }
.post__date { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--slate-400); }
.post__date svg { width: 15px; height: 15px; color: var(--violet-600); }
.post h3 { margin-top: var(--sp-3); font-size: 1.125rem; font-weight: 700; line-height: 1.34; }
.post p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); }
.post .btn-link { margin-top: auto; padding-top: var(--sp-5); align-self: flex-start; }

.blog__foot { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* ============================================================ 9. ORÇAMENTO */
.orcamento { background: var(--ink-900); color: var(--text-invert); overflow: hidden; }
.orcamento__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-8); align-items: center; }
.orcamento h2 { margin-top: var(--sp-5); color: #fff; }
.orcamento__lead { margin-top: var(--sp-5); }
.orcamento__list { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.orcamento__list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: rgba(255,255,255,.82); }
.orcamento__list svg { width: 22px; height: 22px; flex: none; color: var(--lime-500); }

.form { padding: var(--sp-7); border-radius: var(--r-xl); background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.78); }
.field input, .field textarea {
	padding: .85rem 1rem; border-radius: var(--r-sm);
	background: rgba(255,255,255,.07); border: 1px solid var(--line-dark);
	color: #fff; font-size: var(--fs-sm);
	transition: border-color var(--t-fast), background var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.38); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lime-500); background: rgba(255,255,255,.1); }
.field textarea { resize: vertical; min-height: 110px; }
.form .btn { margin-top: var(--sp-5); }
.form__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: rgba(255,255,255,.5); }
.form__status { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--lime-500); }
.form__status:empty { display: none; }
/* honeypot: fora da tela para pessoas, visível para robôs */
.form__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .g-recaptcha { margin-top: var(--sp-5); }
.form .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* página de obrigado */
.obrigado { min-height: 72vh; display: flex; align-items: center; text-align: center; padding-top: 9rem; }
.obrigado__inner { display: flex; flex-direction: column; align-items: center; }
.obrigado__inner h1 { max-width: 20ch; }
.obrigado__inner .page-hero__lead { max-width: 52ch; }
.obrigado__check {
	width: 84px; height: 84px; margin-bottom: var(--sp-5); border-radius: 50%;
	display: grid; place-items: center; color: var(--ink-900);
	background: var(--lime-400); box-shadow: 0 0 0 12px rgba(180, 240, 60, .16);
}
.obrigado__check svg { width: 40px; height: 40px; }
.obrigado__acoes { margin-top: var(--sp-6); }

@media (max-width: 900px) { .orcamento__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form { padding: var(--sp-5); } .form__grid { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== 10. FAQ */
.faq { background-image: linear-gradient(160deg, #F5FAFF 0%, #FBFDFF 46%, #F4F9FE 100%); overflow: hidden; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 55fr); gap: 0 var(--sp-8); align-items: start; }
.faq h2 { margin-top: var(--sp-4); }
.faq__mark { position: relative; display: inline-block; color: var(--violet-600); }
.faq__mark svg { position: absolute; left: 2%; right: -1%; bottom: -.18em; width: 102%; height: .22em; overflow: visible; }
.faq__intro { margin-top: var(--sp-5); max-width: 42ch; }
.faq .btn { margin-top: var(--sp-6); }

.faq__proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-2); }
.faq__proof-item { text-align: center; padding-inline: var(--sp-3); }
.faq__proof-item + .faq__proof-item { border-left: 1px solid var(--line); }
.faq__proof-item .ico { width: 40px; height: 40px; margin-inline: auto; }
.faq__proof-item strong { display: block; margin-top: var(--sp-3); font-size: .82rem; font-weight: 700; line-height: 1.3; }
/* Mira na classe, e não em `span`: o círculo do ícone também é um <span>, e um
   seletor solto como `.faq__proof-item span` o transformava em `display:block`,
   desligando o flex que centraliza o SVG dentro do círculo. */
.faq__proof-desc { display: block; margin-top: .35rem; font-size: .68rem; line-height: 1.4; color: var(--text-soft); }

.accordion { counter-reset: faq; display: grid; gap: var(--sp-3); }
.accordion__item { overflow: hidden; }
.accordion__btn {
	counter-increment: faq;
	width: 100%; display: flex; align-items: center; gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5); text-align: left;
}
.accordion__btn::before {
	content: counter(faq);
	flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: var(--violet-600); color: #fff;
	font-size: .8rem; font-weight: 700; line-height: 30px; text-align: center;
	transition: border-radius var(--t), box-shadow var(--t);
}
.accordion__item[open] .accordion__btn::before { border-radius: 10px; box-shadow: 0 5px 14px rgba(109,40,217,.35); }
.accordion__title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.accordion__item[open] .accordion__title { color: var(--violet-600); font-weight: 700; }
.accordion__sign { flex: none; width: 16px; height: 16px; color: var(--violet-600); position: relative; }
.accordion__sign::before, .accordion__sign::after {
	content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
	transform: translate(-50%, -50%); transition: transform var(--t), opacity var(--t);
}
.accordion__sign::before { width: 16px; height: 2.5px; }
.accordion__sign::after { width: 2.5px; height: 16px; }
.accordion__item[open] .accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__panel { padding: 0 var(--sp-5) var(--sp-5); }
.accordion__panel > div { padding: var(--sp-5); border-radius: var(--r-md); background: #EAF3FE; }
.accordion__panel p { font-size: .95rem; line-height: 1.68; color: #33495F; }

.faq__services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.faq__service { display: flex; align-items: center; gap: .7rem; }
.faq__service svg { width: 27px; height: 27px; flex: none; color: var(--violet-600); }
.faq__service.is-lime svg { color: var(--lime-600); }
.faq__service b { display: block; font-size: .82rem; font-weight: 700; line-height: 1.25; color: var(--violet-600); }
.faq__service.is-lime b { color: var(--lime-600); }
.faq__service i { display: block; margin-top: 2px; font-style: normal; font-size: .72rem; line-height: 1.3; color: var(--text-soft); }

@media (max-width: 1100px) { .faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8) 0; } .faq__intro { max-width: none; } }
@media (max-width: 640px) {
	.faq__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) 0; }
	.faq__proof-item:nth-child(3) { border-left: 0; }
	.faq__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.accordion__btn { padding: var(--sp-4); gap: var(--sp-3); }
	.accordion__panel { padding: 0 var(--sp-4) var(--sp-4); }
}

/* ============================================================== 11. RODAPÉ */
.site-footer {
	position: relative;
	background: var(--ink-950); color: var(--text-invert-soft);
	padding-block: var(--sp-10) var(--sp-5);
}
/* fio de acento no topo, amarrando com a paleta da marca */
.site-footer::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--violet-600), var(--pink-500) 38%, var(--gold-500) 66%, var(--lime-500));
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-8) var(--sp-7);
}
.site-footer__title {
	font-size: .78rem; font-weight: 700; color: #fff;
	text-transform: uppercase; letter-spacing: .14em;
}
.site-footer__title::after {
	content: ""; display: block; width: 28px; height: 3px; margin-top: .55rem;
	border-radius: 3px; background: var(--lime-500);
}
.site-footer__logo { width: 132px; }
.site-footer__about { margin-top: var(--sp-4); max-width: 36ch; font-size: var(--fs-sm); line-height: 1.7; }

.site-footer ul { margin-top: var(--sp-4); display: grid; gap: .7rem; }
.site-footer li a {
	display: inline-block; font-size: var(--fs-sm);
	transition: color var(--t-fast), transform var(--t-fast);
}
.site-footer li a:hover { color: var(--lime-500); transform: translateX(3px); }

.site-footer__contact { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
.site-footer__contact a, .site-footer__contact p { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); }
.site-footer__contact a { transition: color var(--t-fast); }
.site-footer__contact a:hover { color: var(--lime-500); }
.site-footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: var(--lime-500); }
.site-footer__contact small { display: block; font-size: var(--fs-xs); color: var(--slate-400); }
.site-footer__contact strong { display: block; font-weight: 600; color: #fff; }

.site-footer__social { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.site-footer__social a {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .55rem 1rem .55rem .6rem; border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark);
	font-size: var(--fs-xs); font-weight: 600;
	transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.site-footer__social a:hover {
	background: var(--lime-500); border-color: transparent;
	color: var(--ink-900); transform: translateY(-2px);
}
.site-footer__social svg { width: 17px; height: 17px; flex: none; }

.site-footer__selos {
	margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line-dark);
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
}
.site-footer__cnpj { margin-left: auto; text-align: right; font-size: var(--fs-sm); line-height: 1.6; color: var(--slate-400); }
.site-footer__partner {
	padding: var(--sp-4);
	display: flex; align-items: center; gap: var(--sp-4);
	border-radius: var(--r-md); background: rgba(255, 255, 255, .05);
	border: 1px solid var(--line-dark);
	transition: background var(--t-fast), border-color var(--t-fast);
}
.site-footer__partner img { width: 74px; flex: none; }
.site-footer__partner span { font-size: var(--fs-xs); line-height: 1.4; }
.site-footer__partner strong { display: block; color: #fff; font-weight: 600; }

/* selo do ReclameAQUI: fundo claro para o logotipo verde/lima ter contraste */
.site-footer__ra { background: rgba(255, 255, 255, .94); border-color: transparent; gap: var(--sp-3); }
.site-footer__ra:hover { background: #fff; border-color: var(--lime-500); }
.site-footer__ra img { width: 30px; }
.site-footer__ra strong { color: #1E3A8A; font-size: .68rem; letter-spacing: .02em; }
.site-footer__ra-logo { width: 118px !important; margin-top: 3px; }

.site-footer__bottom {
	margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-dark);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
	font-size: var(--fs-xs);
}
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.site-footer__legal a { font-weight: 600; color: #fff; transition: color var(--t-fast); }
/* separador entre os itens (links e o botão de cookies) fica na regra `> * + *` do bloco COOKIES */
.site-footer__legal a:hover { color: var(--lime-500); }


@media (max-width: 1024px) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__about { max-width: none; }
}
@media (max-width: 600px) {
	.site-footer { padding-block: var(--sp-8) var(--sp-5); }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
	.site-footer__bottom { justify-content: flex-start; }
	.site-footer__selos { flex-direction: column; align-items: stretch; }
	.site-footer__cnpj { margin-left: 0; text-align: left; }
}

/* ==================================================== BOTÃO FLUTUANTE ZAP
   Mesmo desenho do componente em /componentes/botao-whatsapp: círculo verde
   com anel pulsante. O destino foi apontado para a WebFormas (o componente
   vinha com o número e a mensagem de outro cliente). */
.wa-float {
	position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
	width: 62px; height: 62px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 12px 30px rgba(37, 211, 102, .45);
	transition: transform var(--t);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float:focus-visible { outline: 3px solid rgba(37, 211, 102, .5); outline-offset: 3px; }
.wa-float svg { width: 32px; height: 32px; fill: currentColor; }
.wa-float::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid #25D366; animation: wa-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes wa-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; opacity: 0; } }
@media (max-width: 560px) { .wa-float { right: 1rem; bottom: 1rem; width: 56px; height: 56px; } }

/* Nas páginas internas o .lead quase sempre vive em fundo claro; a cor global
   (#C2C0CF, definida para os fundos escuros da home) fica ilegível ali. */
:where(.sobre-intro, .sobre-equipe, .sites-intro, .trafego-intro, .plataformas-faixa, .redes-intro, .landing-intro, .ensaio-intro, .seo-intro, .seo-faq, .videos-intro, .videos-porque, .contato) .lead { color: var(--text-soft); }

/* ============================================================================
   PÁGINA "A WEBFORMAS" (sobre.html)
   ============================================================================ */

/* --- hero compacto de página interna --- */
.page-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding: 11rem 0 3rem;
	background-color: var(--ink-900);
	background-image: linear-gradient(168deg, #1F0A4A 0%, var(--ink-900) 46%, var(--ink-950) 100%);
	color: var(--text-invert);
}
/* o container fica com a largura padrao (alinhado a margem esquerda das
   demais secoes); so o titulo e o texto recebem limite de largura */
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { margin-top: var(--sp-5); max-width: 46ch; font-size: 33px; color: #fff; }
.page-hero__lead { margin-top: var(--sp-1); max-width: 85ch; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--sp-4); font-size: var(--fs-xs); color: rgba(255,255,255,.62); }
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--lime-500); }
.crumbs svg { width: 13px; height: 13px; opacity: .55; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }

/* --- introdução: texto + poster --- */
/* `overflow: hidden`: o ::before do poster avança 6% alem da coluna e, sem
   recorte, criava rolagem horizontal em telas medias */
.sobre-intro { overflow: hidden; }
.sobre-equipe { overflow: hidden; }
.sobre-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); align-items: center; }
.sobre-intro h2 { margin-top: var(--sp-5); }
.sobre-intro .rule { margin-top: var(--sp-5); }
.sobre-intro p + p { margin-top: var(--sp-4); }
.sobre-intro__art { position: relative; }
.sobre-intro__art::before {
	content: ""; position: absolute; inset: 8% -6% -6% 8%; z-index: 0;
	border-radius: var(--r-xl);
	background: linear-gradient(140deg, var(--violet-100), transparent 70%);
}
.sobre-intro__art img {
	position: relative; z-index: 1; width: 100%;
	border-radius: var(--r-xl); box-shadow: var(--sh-lg);
}

/* --- números de credibilidade --- */
.sobre-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); }
.sobre-numero { padding: var(--sp-5); }
.sobre-numero strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--violet-600); }
.sobre-numero span { display: block; margin-top: .5rem; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-soft); }

/* --- especialidades --- */
.especialidade { display: flex; flex-direction: column; padding: var(--sp-6); }
.especialidade h3 { margin-top: var(--sp-5); font-size: 1.1rem; line-height: 1.3; }
.especialidade p { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); }
.especialidade .btn-link { margin-top: auto; padding-top: var(--sp-5); align-self: flex-start; }

/* --- equipe --- */
.sobre-equipe { background: var(--bg-alt); }
.sobre-equipe__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-9); align-items: start; }
.sobre-equipe h2 { margin-top: var(--sp-5); }
.sobre-equipe p + p { margin-top: var(--sp-4); }
.sobre-valores { display: grid; gap: var(--sp-4); }
.sobre-valor { display: flex; gap: var(--sp-4); padding: var(--sp-5); }
.sobre-valor h3 { font-size: 1rem; }
.sobre-valor p { margin-top: .35rem; font-size: var(--fs-sm); color: var(--text-soft); }

/* --- nossa história (escura, com o mascote transbordando) --- */
.sobre-historia { position: relative; background: var(--ink-900); color: var(--text-invert); overflow: visible; }
.sobre-historia__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.sobre-historia__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: end; }
.sobre-historia h2 { margin-top: var(--sp-5); color: #fff; font-size: 63px;}
.sobre-historia p + p { margin-top: var(--sp-4); }
.sobre-historia__art {
	position: relative; display: flex; justify-content: center; align-items: flex-end;
	margin-top: calc(-1 * var(--section-y));
	/* desce a margem da grade para o camaleão apoiar na faixa de baixo */
	margin-bottom: calc(-1 * var(--sp-7));
}
.sobre-historia__art::before {
	content: ""; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
	width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(104, 92, 246, 0.98), rgba(71, 20, 212, 0.2) 58%, transparent 76%);
	filter: blur(8px);
}
.sobre-historia__art img { position: relative; z-index: 1; width: 100%; max-width: 363px; filter: drop-shadow(0 30px 44px rgba(0,0,0,.5)); }

/* faixa "nossa essência": título à esquerda, texto à direita, fio lime na borda */
.sobre-historia__callout {
	position: relative; z-index: 2;
	margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-7);
	display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.7fr); gap: var(--sp-7); align-items: center;
	border-radius: var(--r-lg);
	background: rgba(255,255,255,.05); border: 1px solid var(--line-dark);
	border-left: 4px solid var(--lime-500);
}
.sobre-historia__callout-head { padding-right: var(--sp-6); border-right: 1px solid var(--line-dark); }
.sobre-historia__eyebrow {
	display: block; font-size: var(--fs-xs); font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.sobre-historia__callout-title {
	margin-top: .45rem; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800;
	line-height: 1.08; letter-spacing: -.02em; color: #fff;
}
.sobre-historia__callout p { font-size: 1.05rem; line-height: 1.65; }
.sobre-historia__callout strong { color: var(--lime-500); }

@media (max-width: 1024px) {
	.page-hero { padding-top: 9rem; }
	.sobre-intro__grid, .sobre-equipe__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.sobre-historia__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
	.sobre-historia__art { order: -1; margin-top: calc(-1 * var(--section-y)); margin-bottom: 0; }
	.sobre-historia__art img { max-width: 280px; }
	.sobre-historia__callout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
	.sobre-historia__callout-head { padding-right: 0; border-right: 0; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-dark); }
}
@media (max-width: 640px) {
	.sobre-numeros { grid-template-columns: minmax(0, 1fr); }
	.sobre-numero { display: flex; align-items: center; gap: var(--sp-4); }
	.sobre-numero span { margin-top: 0; }
}

/* ============================================================================
   PÁGINA "CRIAÇÃO DE SITES" (criacao-de-sites.html)
   ============================================================================ */

/* --- introdução: texto + recorte da pessoa com notebook --- */
.sites-intro { overflow: hidden; background: var(--bg); }
.sites-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); align-items: stretch; }
.sites-intro h2 { margin-top: var(--sp-5); font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.sites-intro .rule { margin-top: var(--sp-5); }
.sites-intro p + p { margin-top: var(--sp-4); }
/* três garantias em linha, separadas por um fio */
.checks { display: flex; flex-wrap: wrap; margin-top: var(--sp-6); }
.checks li { display: flex; align-items: center; gap: .6rem; padding-right: var(--sp-5); font-weight: 700; color: var(--text); }
.checks li + li { padding-left: var(--sp-5); border-left: 1px solid var(--line); }
.checks__ico {
	width: 26px; height: 26px; flex: none; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--violet-600); color: #fff;
}
.checks__ico svg { width: 15px; height: 15px; }
/* o camaleão ocupa a altura inteira da coluna de texto, com os pés rente ao
   fio que separa as etapas; atrás dele um círculo suave e um arco fino */
/* a caixa do camaleão tem a proporção exata da imagem (938x1019): o
   círculo, o arco e a etiqueta são medidos em % dela, então ficam sempre no
   mesmo ponto sobre o mascote, em qualquer largura de tela; só escalam */
.sites-intro__art {
	position: relative; width: 100%; max-width: 640px; margin-left: auto;
	aspect-ratio: 938 / 1019; align-self: end;
	margin-bottom: calc(-1 * var(--sp-6));
	container-type: inline-size;
}
.sites-intro__art::before {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 88%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .2), rgba(139, 92, 246, .1) 62%, rgba(139, 92, 246, .04) 100%);
}
.sites-intro__orbita {
	position: absolute; left: 48%; bottom: -14%; transform: translateX(-50%);
	width: 112%; aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
	border: 1.5px solid rgba(109, 40, 217, .42);
	-webkit-mask-image: linear-gradient(215deg, #000 22%, transparent 52%);
	mask-image: linear-gradient(215deg, #000 22%, transparent 52%);
}
/* etiqueta "Perfeito em qualquer tela": ponto sobre o arco, ícone e texto.
   Tamanhos em cqw acompanham a largura da caixa */
.sites-intro__tag {
	position: absolute; top: 16%; right: -3%; z-index: 2;
	display: flex; align-items: center; gap: clamp(.4rem, 1.25cqw, .7rem);
	font-size: clamp(.7rem, 2.35cqw, .92rem); line-height: 1.3; color: var(--text-soft);
}
.sites-intro__tag-ponto {
	width: clamp(6px, 1.6cqw, 9px); height: clamp(6px, 1.6cqw, 9px); flex: none; border-radius: 50%;
	margin-right: .3rem; background: var(--violet-600);
	box-shadow: 0 0 0 3px var(--bg);
}
.sites-intro__tag svg { width: clamp(22px, 6cqw, 34px); height: clamp(22px, 6cqw, 34px); flex: none; color: var(--violet-600); }
.sites-intro__art img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; max-width: none;
	object-fit: contain; object-position: center bottom;
	filter: drop-shadow(0 26px 40px rgba(29, 2, 78, .28));
}

/* faixa das etapas, abaixo do fio: número grande à esquerda de cada item */
.sites-intro__etapas { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.sites-intro__etapas-titulo { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.etapas--linha { gap: 0; margin-top: var(--sp-5); }
.etapas--linha .etapa {
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); align-items: start;
	/* a 2ª linha é flexível: a altura do número, que ocupa as duas, sobra
	   abaixo do texto e não entre o título e o texto */
	grid-template-rows: auto 1fr;
	padding: var(--sp-2) var(--sp-6); border-left: 1px solid var(--line);
}
.etapas--linha .etapa:first-child { padding-left: 0; border-left: 0; }
.etapas--linha .etapa::before {
	grid-row: 1 / span 2; font-size: 3.4rem; letter-spacing: -.04em;
	background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--violet-600);
}
.etapas--linha .etapa h3 { margin-top: .35rem; font-size: 1.05rem; }
.etapas--linha .etapa p { margin-top: .3rem; }


/* --- as três etapas --- */
.etapas { counter-reset: etapa; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); }
.etapa { position: relative; padding: var(--sp-5); }
.etapa::before {
	counter-increment: etapa; content: counter(etapa, decimal-leading-zero);
	display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em;
	background: linear-gradient(120deg, var(--violet-600), var(--pink-500));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.etapa h3 { margin-top: var(--sp-3); font-size: 1rem; }
.etapa p { margin-top: .4rem; font-size: var(--fs-sm); color: var(--text-soft); }

/* --- por que ter / por que divulgar: card claro + card roxo --- */
.porque { position: relative; overflow: hidden; background: var(--bg-alt); }
.porque__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: stretch; }
.porque .porque__bloco { position: relative; overflow: hidden; padding: var(--sp-8) var(--sp-7); border-radius: var(--r-xl, 28px); }
/* halo circular atrás do ícone quadrado */
.porque .porque__bloco .ico { position: relative; isolation: isolate; }
.porque .porque__bloco .ico::after {
	content: ""; position: absolute; inset: -22px; z-index: -1;
	border-radius: 50%; background: rgba(139, 92, 246, .09);
}
.porque .porque__bloco h2 { margin-top: var(--sp-6); font-size: clamp(1.55rem, 2.3vw, 2.15rem); line-height: 1.12; letter-spacing: -.02em; }
.porque .porque__bloco p { margin-top: var(--sp-4); font-size: 1rem; line-height: 1.75; color: var(--text-soft); }
.porque__destaque {
	margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md); border-left: 3px solid var(--lime-600);
	background: linear-gradient(90deg, rgba(155, 230, 25, .12), transparent);
	font-weight: 600; color: var(--text);
}
/* card roxo da direita */
.porque__bloco--escuro {
	background: linear-gradient(160deg, var(--violet-500) 0%, var(--violet-600) 45%, var(--violet-700) 100%);
	border-color: transparent; color: #fff;
	box-shadow: 0 30px 60px rgba(91, 33, 182, .32);
}
.porque__pontos { position: absolute; right: 22px; top: 22px; width: 120px; height: 90px; color: rgba(255,255,255,.55); opacity: .5; }
.porque .porque__bloco--escuro .ico::after { background: rgba(255, 255, 255, .12); }
.porque .porque__bloco--escuro h2 { color: #fff; }
.porque .porque__bloco--escuro p { color: rgba(255, 255, 255, .86); }
.porque .porque__bloco--escuro .porque__destaque { background: rgba(255, 255, 255, .13); border-left-color: var(--lime-400); color: #fff; font-weight: 700; }
.porque__cta {
	margin-top: var(--sp-6); padding: 1rem 1.6rem; gap: .8rem;
	font-size: 1.05rem; text-transform: none; letter-spacing: 0;
}
.porque__cta .btn__arrow svg { width: 22px; height: 22px; }

/* --- chamada final --- */
.sites-cta { position: relative; overflow: hidden; background: var(--ink-900); color: var(--text-invert); text-align: center; }
.sites-cta__inner { position: relative; z-index: 1; max-width: 49rem; margin-inline: auto; }
.sites-cta h2 { margin-top: var(--sp-5); color: #fff; }
.sites-cta p { margin-top: var(--sp-5); }
.sites-cta__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-7); }

/* --- outros serviços: cards com foto --- */
.outros { background: var(--bg); }
.outros__head { text-align: center; max-width: 42rem; margin: 0 auto var(--sp-8); }
.outros__head h2 { margin-top: var(--sp-5); }
.foto-card { overflow: hidden; display: flex; flex-direction: column; }
.foto-card__media { aspect-ratio: 369 / 247; overflow: hidden; }
.foto-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.foto-card:hover .foto-card__media img { transform: scale(1.06); }
.foto-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--sp-5); }
.foto-card h3 { font-size: 1.05rem; }
.foto-card .btn-link { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; }
.foto-card--atual { border-color: var(--violet-300); box-shadow: 0 0 0 3px var(--violet-100); }
/* brilho que segue o mouse (spotlight): um anel na borda e um facho suave por
   cima do card, ambos centrados no cursor; o JS grava --gx/--gy/--gh por card */
.foto-card { --gx: -999px; --gy: -999px; --gh: 270; }
.foto-card::before, .foto-card::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
}
.foto-card::before {
	border: 2px solid transparent;
	background: radial-gradient(170px 170px at var(--gx) var(--gy), hsl(var(--gh) 90% 62% / .95), transparent 72%) border-box;
	-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.foto-card::after {
	background: radial-gradient(230px 230px at var(--gx) var(--gy), hsl(var(--gh) 90% 72% / .16), transparent 70%);
}
.foto-card.is-glow::before, .foto-card.is-glow::after { opacity: 1; }
.foto-card__tag {
	align-self: flex-start; margin-bottom: var(--sp-3);
	padding: .3rem .7rem; border-radius: var(--r-pill);
	background: var(--violet-100); color: var(--violet-600);
	font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 1024px) {
	.sites-intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.sites-intro__art { max-width: 460px; margin-inline: auto; }
	.sites-intro__tag { right: 0; }
	.etapas--linha .etapa { padding: var(--sp-4) 0; border-left: 0; border-top: 1px solid var(--line); }
	.etapas--linha .etapa:first-child { border-top: 0; padding-top: 0; }
	.etapas { grid-template-columns: minmax(0, 1fr); }
	.porque__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .porque__bloco { padding: var(--sp-5); } }

/* ============================================================================
   PÁGINA "TRÁFEGO PAGO" (trafego-pago.html)
   ============================================================================ */

/* --- introdução: texto + recorte --- */
.trafego-intro { overflow: hidden; padding-bottom: 0; }
.trafego-intro__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--sp-9); align-items: center; }
.trafego-intro h2 { margin-top: var(--sp-5); }
.trafego-intro .rule { margin-top: var(--sp-5); }
.trafego-intro p + p { margin-top: var(--sp-4); }
/* foto com a proporção da imagem (400x738); o círculo e o arco são medidos
   em % dela e ficam sempre no mesmo lugar. A base encosta na faixa de baixo */
.trafego-intro__art {
	position: relative; width: 100%; max-width: 350px; margin-left: auto;
	aspect-ratio: 400 / 738; align-self: end;
}
.trafego-intro__art::before {
	content: ""; position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%);
	width: 152%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .22), rgba(139, 92, 246, .12) 62%, rgba(139, 92, 246, .06) 100%);
}
/* o arco fica no ::before, que leva a máscara; o ponto fica no ::after, fora
   da máscara, para não ser apagado junto com o resto do círculo */
.trafego-intro__orbita {
	position: absolute; left: 45%; bottom: -5%; transform: translateX(-50%);
	width: 168%; aspect-ratio: 1; z-index: 0; pointer-events: none;
}
.trafego-intro__orbita::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid rgba(109, 40, 217, .45);
	-webkit-mask-image: linear-gradient(150deg, #000 20%, transparent 46%);
	mask-image: linear-gradient(150deg, #000 20%, transparent 46%);
}
/* o ponto fica sobre a linha do arco: centro em (50% − 50%·sen 60°, 50% − 50%·cos 60°)
   = (6.7%, 25%), o ponto do círculo a 60° da vertical, do lado esquerdo */
.trafego-intro__orbita::after {
	content: ""; position: absolute;
	left: calc(6.8% - 6px); top: calc(25% - 6px);
	width: 12px; height: 12px; border-radius: 50%; background: var(--pink-500);
}
.trafego-intro__art img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; max-width: none;
	object-fit: contain; object-position: center bottom;
}

/* faixa clara com a chamada, os 4 benefícios e a citação */
.trafego-intro__faixa {
	position: relative; z-index: 2;
	padding-block: var(--sp-7) var(--section-y);
	background: var(--bg-alt);
}
.trafego-intro__chamada { font-size: 1.15rem; font-weight: 500; color: var(--text); }

/* checklist de benefícios */
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.beneficio { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); font-weight: 600; }
.beneficio svg { width: 26px; height: 26px; flex: none; color: var(--lime-600); }
/* variante em linha: 4 itens numa faixa branca, separados por fios */
.beneficios--linha {
	grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--sp-5);
	padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg);
	background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.beneficios--linha .beneficio { padding: var(--sp-2) var(--sp-5); border-left: 1px solid var(--line); font-size: 1.02rem; line-height: 1.35; color: var(--text); }
.beneficios--linha .beneficio:first-child { border-left: 0; }
.beneficio__ico {
	width: 44px; height: 44px; flex: none; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(34, 197, 94, .16); color: #16A34A;
}
.beneficios--linha .beneficio svg { width: 20px; height: 20px; color: inherit; }
.trafego-intro__fecho {
	margin-top: var(--sp-5); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-md);
	background: linear-gradient(120deg, var(--violet-700), var(--violet-600) 60%, var(--violet-500));
	color: #fff; font-weight: 600; line-height: 1.5;
	font-size: clamp(1.15rem, 1.7vw, 1.55rem); letter-spacing: -.01em;
}

/* --- faixa "não se resume ao Google" com as plataformas --- */
.plataformas-faixa { background: var(--bg-alt); text-align: center; }
.plataformas-faixa__inner { max-width: 54rem; margin-inline: auto; }
.plataformas-faixa h2 { margin-top: var(--sp-5); }
.plataformas-faixa p { margin-top: var(--sp-5); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.chip {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .7rem 1.2rem .7rem .8rem; border-radius: var(--r-pill);
	background: #fff; border: 1px solid var(--line);
	font-size: var(--fs-sm); font-weight: 700; color: var(--text);
	box-shadow: var(--sh-sm); transition: transform var(--t), box-shadow var(--t);
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.chip__ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.chip__ico svg, .chip__ico img { width: 15px; height: 15px; display: block; }

/* --- blocos de plataforma, alternando lados --- */
.plataforma { position: relative; overflow: clip; /* clip (e não hidden) para o sticky da imagem funcionar */ --acc: var(--violet-600); --acc-rgb: 109, 40, 217; }
.plataforma--alt { background: var(--bg-alt); }
.plataforma__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.plataforma--inv .plataforma__art { order: -1; }
.plataforma__badge { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.plataforma h2 { margin-top: var(--sp-5); }
.plataforma h2 .t-acc { color: var(--acc); }
.plataforma__sub { margin-top: var(--sp-5); font-size: var(--fs-lead); font-weight: 700; }
.plataforma__intro { margin-top: var(--sp-4); }
.plataforma__art { position: sticky; top: 7.5rem; display: flex; justify-content: center; } /* a imagem acompanha a coluna de texto, mais longa */
.plataforma__art::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(var(--acc-rgb), .28), transparent 74%);
	filter: blur(10px);
}
.plataforma__art img { position: relative; z-index: 1; width: 100%; max-width: 570px; filter: drop-shadow(0 26px 40px rgba(29, 2, 78, .22)); }
.plataforma__art--foto img { border-radius: var(--r-xl); box-shadow: var(--sh-lg); filter: none; }

/* estratégias: grupos numerados com listas */
.estrategias { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.estrategias__titulo { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--acc); }
.estrategia { padding: var(--sp-5); counter-increment: estrategia; }
.estrategia h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: 1rem; }
.estrategia h3::before {
	content: counter(estrategia);
	flex: none; width: 28px; height: 28px; border-radius: 8px;
	background: var(--acc); color: #fff;
	font-size: .8rem; font-weight: 800; line-height: 28px; text-align: center;
}
.estrategia ul { margin-top: var(--sp-3); display: grid; gap: .45rem; }
.estrategia li { position: relative; padding-left: 1.25rem; font-size: var(--fs-sm); color: var(--text-soft); }
.estrategia li::before {
	content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%;
	background: var(--acc);
}
.estrategias { counter-reset: estrategia; }

/* listas soltas (segmentações, formatos) */
.lista-acc { display: grid; gap: .5rem; margin-top: var(--sp-3); }
.lista-acc li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--text-soft); }
.lista-acc li::before {
	content: ""; position: absolute; left: 0; top: .4em; width: 15px; height: 15px; border-radius: 50%;
	background: var(--acc);
}
.lista-acc li::after { /* o "check" branco dentro do círculo */
	content: ""; position: absolute; left: 5.6px; top: calc(.4em + 3.2px); width: 3.4px; height: 6.6px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}
.subtitulo-acc { margin-top: var(--sp-5); font-size: 1rem; font-weight: 700; color: var(--acc); }

/* acentos por plataforma */
.plataforma--google { --acc: var(--violet-600); --acc-rgb: 109, 40, 217; }
.plataforma--meta   { --acc: var(--pink-500);   --acc-rgb: 236, 42, 120; }
.plataforma--tiktok { --acc: var(--teal-600);   --acc-rgb: 20, 195, 212; }
.plataforma--youtube{ --acc: #D2361E;           --acc-rgb: 210, 54, 30; }

@media (max-width: 1024px) {
	.trafego-intro__grid, .plataforma__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.trafego-intro__art { max-width: 300px; margin-inline: auto; }
	.beneficios--linha { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); }
	.beneficios--linha .beneficio:nth-child(odd) { border-left: 0; }
	.plataforma--inv .plataforma__art { order: 0; }
	.plataforma__art { position: relative; top: auto; }
	.plataforma__art img { max-width: 360px; }
}
@media (max-width: 640px) {
	.beneficios { grid-template-columns: minmax(0, 1fr); }
	.beneficios--linha .beneficio { border-left: 0; padding-inline: var(--sp-2); }
	.trafego-intro__fecho { padding: var(--sp-5); }
}

/* ============================================================================
   PÁGINA "GERENCIAMENTO DE REDES SOCIAIS" (redes-sociais.html)
   ============================================================================ */

/* --- introdução: texto + celular --- */
.redes-intro { overflow: hidden; background: var(--bg); }
.redes-intro__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--sp-9); align-items: center; }
.redes-intro h2 { margin-top: var(--sp-5); font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.redes-intro .rule { margin-top: var(--sp-5); }
.redes-intro p + p { margin-top: var(--sp-4); }
/* foto na proporção da imagem (703x1000); círculo, arco e pontos medidos em %
   dela, então ficam sempre no mesmo lugar */
.redes-intro__art {
	position: relative; width: 100%; max-width: 600px; margin-left: auto;
	aspect-ratio: 703 / 800; align-self: end;
}
.redes-intro__art::before {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 100%; height: 90%; border-radius: 999px 999px 36px 36px; z-index: 0;
	background: linear-gradient(180deg, rgba(139, 92, 246, .17), rgba(139, 92, 246, .07) 70%, rgba(139, 92, 246, .04));
}
.redes-intro__orbita {
	position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
	width: 118%; aspect-ratio: 1; z-index: 0; pointer-events: none;
}
.redes-intro__orbita::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid rgba(109, 40, 217, .42);
	-webkit-mask-image: linear-gradient(160deg, #000 18%, transparent 44%);
	mask-image: linear-gradient(160deg, #000 18%, transparent 44%);
}
/* ponto roxo sobre a linha do arco, a 70° da vertical: (50% − 50%·sen 70°, 50% − 50%·cos 70°) = (3%, 32.9%) */
.redes-intro__orbita::after {
	content: ""; position: absolute; left: calc(3% - 5px); top: calc(32.9% - 5px);
	width: 10px; height: 10px; border-radius: 50%; background: var(--violet-600);
}
.redes-intro__art img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center top;
}

/* faixa "35% a mais": número à esquerda, texto à direita, separados por um fio */
.redes-stat {
	display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center;
	margin-top: var(--sp-6); padding: var(--sp-6) var(--sp-7);
	border-radius: var(--r-lg); border-color: transparent;
	background: linear-gradient(120deg, var(--ink-800), var(--violet-700) 55%, var(--violet-600)); color: #fff;
}
.redes-stat__num {
	font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
	padding-right: var(--sp-6); border-right: 1px solid rgba(255,255,255,.22);
	color: var(--lime-400);
}
.redes-stat__num small { font-size: .42em; letter-spacing: 0; color: var(--teal-500, #14C3D4); }
.redes-stat p { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.9); }
.redes-stat p strong { color: #fff; }

/* card da equipe: ícone rosa, fio vertical e frase em negrito */
.redes-equipe { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); }
.redes-equipe .ico { width: 64px; height: 64px; border-radius: var(--r-md); }
.redes-equipe .ico svg { width: 30px; height: 30px; }
.redes-equipe p { padding-left: var(--sp-5); border-left: 1px solid var(--line); font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: var(--text); }

/* --- etapas em faixa escura (Redes Sociais, SEO) --- */
.etapas-faixa { position: relative; overflow: hidden; background: var(--ink-900); color: var(--text-invert); }
.etapas-faixa__head { position: relative; z-index: 1; text-align: center; max-width: 44rem; margin-inline: auto; }
.etapas-faixa__head h2 { margin-top: var(--sp-5); color: #fff; }
.etapas-faixa__head--largo { max-width: 56rem; }
.etapas-faixa .etapas { position: relative; z-index: 1; }
.etapas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapas-faixa .etapa::before { background: linear-gradient(120deg, var(--lime-400), var(--teal-500)); -webkit-background-clip: text; background-clip: text; }
.etapas-faixa .etapa h3 { color: #fff; }
.etapas-faixa .etapa p { color: var(--text-invert-soft); }

/* variante linha do tempo (redes sociais): círculo lime numerado ligado por
   setas, e um card claro pendurado por um fio abaixo de cada círculo */
.etapas--timeline { gap: var(--sp-5); margin-top: var(--sp-8); }
.etapas--timeline .etapa { padding: 96px 0 0; }
.etapas--timeline .etapa::before {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
	width: 72px; height: 72px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--lime-400); -webkit-background-clip: border-box; background-clip: border-box;
	color: var(--ink-900); font-size: 1.5rem; letter-spacing: -.02em;
	box-shadow: 0 0 0 6px rgba(180, 240, 60, .16);
}
/* seta entre um círculo e o próximo */
.etapas--timeline .etapa:not(:last-child)::after {
	content: ""; position: absolute; top: 30px; height: 12px;
	left: calc(50% + 44px); right: calc(-50% - var(--sp-5) + 44px);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 1l5 5-5 5' fill='none' stroke='%23A78BFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 12px 12px no-repeat,
		linear-gradient(90deg, rgba(167, 139, 250, .55), rgba(167, 139, 250, .55)) left center / calc(100% - 10px) 2px no-repeat;
}
.etapas--timeline .etapa__card {
	position: relative; height: 100%; padding: var(--sp-6);
	border-radius: 20px; background: #F5F2FF; color: var(--text);
}
/* fio vertical do círculo até o card */
.etapas--timeline .etapa__card::before {
	content: ""; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px;
	background: rgba(167, 139, 250, .6);
}
.etapas--timeline .etapa__ico {
	width: 64px; height: 64px; border-radius: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--violet-100); color: var(--ink-900);
}
.etapas--timeline .etapa__ico svg { width: 30px; height: 30px; }
.etapas-faixa .etapas--timeline .etapa h3 { margin-top: var(--sp-4); font-size: 1.2rem; color: var(--ink-900); }
.etapas-faixa .etapas--timeline .etapa p { margin-top: var(--sp-3); font-size: .95rem; line-height: 1.65; color: var(--text-soft); }

/* --- perguntas: foto fixa + respostas --- */
.redes-perguntas { position: relative; overflow: clip; background: var(--bg-alt); }
.redes-perguntas__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-9); align-items: start; }
.redes-perguntas__art { position: sticky; top: 7.5rem; }
.redes-perguntas__art img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.redes-perguntas__art figcaption {
	position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
	padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
	background: rgba(20, 2, 60, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	color: #fff; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
}
.redes-perguntas__lista { display: grid; gap: var(--sp-5); }
.redes-perguntas__lista .porque__bloco { padding: var(--sp-6) var(--sp-7); }

.redes-perguntas__lista .porque__bloco h2 {padding: 10px 0}

@media (max-width: 1024px) {
	.redes-intro__grid, .redes-perguntas__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.redes-intro__art { max-width: 400px; margin-inline: auto; }
	.etapas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.etapas--timeline .etapa::after { display: none; }
	.redes-perguntas__art { position: relative; top: auto; max-width: 560px; }
}
@media (max-width: 640px) {
	.etapas--4 { grid-template-columns: minmax(0, 1fr); }
	.redes-stat { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5); }
	.redes-stat__num { padding-right: 0; border-right: 0; }
	.redes-equipe { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
	.redes-equipe p { padding-left: 0; border-left: 0; }
	.redes-perguntas__lista .porque__bloco { padding: var(--sp-5); }
}

/* ============================================================================
   PÁGINA "LANDING PAGES" (landing-pages.html)
   ============================================================================ */

/* --- o que é uma landing page: texto + homem apontando para o notebook --- */
.landing-intro { overflow: hidden; background: var(--bg); --acc: var(--violet-600); /* cor do check da .lista-acc nos cards */ }
.landing-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); align-items: center; }
.landing-intro h2 { margin-top: var(--sp-5); font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.landing-intro .rule { margin-top: var(--sp-5); }
/* foto na proporção da imagem (832x850); círculo, arco e ponto medidos em % dela */
.landing-intro__art {
	position: relative; width: 100%; max-width: 520px; margin-left: auto;
	aspect-ratio: 832 / 850; align-self: end;
	margin-bottom: calc(-1 * var(--sp-5));
}
.landing-intro__art::before {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 106%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .2), rgba(139, 92, 246, .11) 62%, rgba(139, 92, 246, .05) 100%);
}
.landing-intro__orbita {
	position: absolute; left: 49%; bottom: -9%; transform: translateX(-50%);
	width: 126%; aspect-ratio: 1; z-index: 0; pointer-events: none;
}
.landing-intro__orbita::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid rgba(109, 40, 217, .42);
	-webkit-mask-image: linear-gradient(225deg, #000 16%, transparent 46%);
	mask-image: linear-gradient(225deg, #000 16%, transparent 46%);
}
/* ponto roxo sobre o arco, a 50° da vertical, do lado direito: (50% + 50%·sen 50°, 50% − 50%·cos 50°) = (88.3%, 17.9%) */
.landing-intro__orbita::after {
	content: ""; position: absolute; left: calc(88.3% - 6px); top: calc(17.9% - 6px);
	width: 12px; height: 12px; border-radius: 50%; background: var(--violet-600);
}
.landing-intro__art img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; max-width: none;
	object-fit: contain; object-position: center bottom;
}

/* dois cards abaixo: claro à esquerda, roxo à direita */
.landing-intro__cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); }
.landing-intro__card { padding: var(--sp-7); border-radius: var(--r-xl); border-color: var(--violet-100); background: #FBFAFF; }
.landing-intro__ico { background: var(--violet-100); color: var(--violet-600); }
.landing-intro__card h3 { margin-top: var(--sp-5); font-size: 1.4rem; letter-spacing: -.02em; }
.landing-intro__card p { margin-top: var(--sp-3); font-size: 1rem; line-height: 1.7; color: var(--text-soft); }
.landing-intro__card--escuro {
	border-color: transparent; color: #fff;
	background: linear-gradient(160deg, var(--violet-500) 0%, var(--violet-600) 45%, var(--violet-700) 100%);
	box-shadow: 0 30px 60px rgba(91, 33, 182, .28);
}
.landing-intro__card--escuro .landing-intro__ico { background: rgba(255, 255, 255, .18); color: #fff; }
.landing-intro__card--escuro h3 { color: #fff; }
.landing-intro__card--escuro p { color: rgba(255, 255, 255, .88); }

/* --- método em três etapas --- */
.metodo { background: var(--bg-alt); }
.metodo .grid { margin-top: var(--sp-7); }
.metodo__head { text-align: center; max-width: 42rem; margin-inline: auto; }
.metodo__head h2 { margin-top: var(--sp-5); }

/* --- diferenciais: seis cards com ícone --- */
.diferenciais { position: relative; overflow: hidden; background: var(--bg); }
.diferenciais__head { max-width: 44rem; }
.diferenciais__head h2 { margin-top: var(--sp-5); }
.diferenciais__head .rule { margin-top: var(--sp-5); }
.diferenciais .grid { margin-top: var(--sp-7); }
.difer { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.difer h3 { font-size: 1.05rem; }
.difer p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-soft); }
.diferenciais__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
	margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-6);
	border-radius: var(--r-lg); border: 1px solid var(--violet-100);
	background: linear-gradient(90deg, var(--violet-050), transparent 70%);
}
.diferenciais__cta p { max-width: 40rem; font-weight: 600; }

/* --- benefícios: foto + checklist + chamada --- */
.beneficios-lp { position: relative; overflow: hidden; background: var(--bg-alt); --acc: var(--lime-600); }
.beneficios-lp__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-9); align-items: center; }
.beneficios-lp__art { position: relative; }
.beneficios-lp__art img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.beneficios-lp__selo {
	position: absolute; right: -14px; bottom: 28px;
	display: flex; align-items: center; gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
	background: var(--ink-800); color: #fff; box-shadow: var(--sh-lg);
}
.beneficios-lp__selo strong { display: block; font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; color: var(--lime-500); }
.beneficios-lp__selo > div span { display: block; margin-top: .2rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-invert-soft); }
.beneficios-lp h2 { margin-top: var(--sp-5); }
.beneficios-lp .rule { margin-top: var(--sp-5); }
.beneficios-lp .lista-acc { margin-top: var(--sp-6); gap: var(--sp-3); }
.beneficios-lp .lista-acc li { font-size: var(--fs-body); font-weight: 500; color: var(--text); }
.beneficios-lp__transforme {
	margin-top: var(--sp-7); padding: var(--sp-6);
	border-radius: var(--r-lg); background: linear-gradient(120deg, var(--ink-800), var(--violet-700)); color: #fff;
}
.beneficios-lp__transforme h3 { font-size: 1.25rem; color: #fff; }
.beneficios-lp__transforme p { margin-top: var(--sp-3); color: var(--text-invert-soft); }
.beneficios-lp__transforme .btn { margin-top: var(--sp-5); }

@media (max-width: 1024px) {
	.landing-intro__grid, .beneficios-lp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.landing-intro__art { max-width: 380px; margin-inline: auto; }
	.landing-intro__cards { grid-template-columns: minmax(0, 1fr); }
	.beneficios-lp__art { max-width: 560px; }
	.beneficios-lp__selo { right: 12px; }
}
@media (max-width: 640px) { .beneficios-lp__transforme { padding: var(--sp-5); } }

/* ============================================================================
   PÁGINA "ENSAIO FOTOGRÁFICO COM IA" (ensaio-ia.html)
   ============================================================================ */

/* --- introdução: texto + colagem de retratos --- */
.ensaio-intro { position: relative; overflow: hidden; background: var(--bg); }
.ensaio-intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); align-items: center; }
.ensaio-intro h2 { margin-top: var(--sp-5); }
.ensaio-intro .rule { margin-top: var(--sp-5); }
.ensaio-intro__art { position: relative; display: flex; justify-content: center; }
.ensaio-intro__art::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 100%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .34), rgba(236, 42, 120, .14) 58%, transparent 76%);
	filter: blur(10px);
}
.ensaio-intro__art img { position: relative; z-index: 1; width: 100%; max-width: 520px; filter: drop-shadow(0 26px 40px rgba(29, 2, 78, .28)); }

/* motivos para escolher o ensaio com IA */
.motivos__titulo { margin-top: var(--sp-8); text-align: center; }
.motivos__titulo h3 { font-size: var(--fs-h3); }
.motivos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.motivo { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.motivo .ico { width: 48px; height: 48px; }
.motivo h3 { font-size: .98rem; }
.motivo p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft); }

/* --- galeria: duas fileiras de retratos rolando em sentidos opostos --- */
.galeria { position: relative; overflow: hidden; background: var(--ink-900); color: var(--text-invert); padding-block: var(--section-y); }
.galeria__head { position: relative; z-index: 1; text-align: center; max-width: 40rem; margin: 0 auto var(--sp-7); }
.galeria__head h2 { margin-top: var(--sp-5); color: #fff; }
.galeria__fileira { position: relative; z-index: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.galeria__fileira + .galeria__fileira { margin-top: var(--sp-5); }
.galeria .marquee__track { --marquee-speed: 70s; }
.galeria__fileira--inv .marquee__track { animation-direction: reverse; }
.galeria:hover .marquee__track { animation-play-state: paused; }
.galeria .marquee__group { gap: var(--sp-5); padding-right: var(--sp-5); align-items: stretch; }
.galeria__foto {
	flex: none; width: 200px; aspect-ratio: 492 / 800; border-radius: var(--r-lg); overflow: hidden;
	border: 1px solid var(--line-dark); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	transition: transform var(--t);
}
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__foto:hover { transform: translateY(-6px) scale(1.02); }
.galeria__equipe {
	position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center;
	max-width: 56rem; margin: var(--sp-8) auto 0; padding: var(--sp-5) var(--sp-6);
}
.galeria__equipe p { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-invert-soft); }
.galeria__equipe p strong { color: #fff; }

/* --- processo: linha do tempo + retrato emoldurado --- */
.processo { position: relative; overflow: clip; background: var(--bg); }
.processo__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-9); align-items: start; }
.processo h2 { margin-top: var(--sp-5); }
.processo .rule { margin-top: var(--sp-5); }
.processo__art { position: sticky; top: 7.5rem; display: flex; justify-content: center; }
.processo__art::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 90%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(247, 179, 43, .30), rgba(139, 92, 246, .16) 58%, transparent 76%);
	filter: blur(10px);
}
.processo__art img { position: relative; z-index: 1; width: 100%; max-width: 460px; filter: drop-shadow(0 26px 40px rgba(29, 2, 78, .28)); }
.timeline { position: relative; display: grid; gap: var(--sp-4); margin-top: var(--sp-7); counter-reset: passo; }
.passo:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: calc(-1 * var(--sp-4)); width: 2px; background: linear-gradient(180deg, var(--violet-300), var(--pink-500)); opacity: .5; } /* liga cada número ao próximo */
.passo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.passo::before {
	counter-increment: passo; content: counter(passo);
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(140deg, var(--violet-500), var(--violet-700)); color: #fff;
	font-weight: 800; box-shadow: 0 8px 18px rgba(109, 40, 217, .28); position: relative; z-index: 1;
}
.passo__corpo { padding: var(--sp-4) var(--sp-5); }
.passo h3 { font-size: 1rem; }
.passo p { margin-top: .3rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft); }

/* --- ideal para --- */
.ideal { background: var(--bg-alt); }
.ideal__head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-7); }
.ideal__head h2 { margin-top: var(--sp-5); }
.ideal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); }
.ideal__item { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.ideal__item .ico { width: 48px; height: 48px; }
.ideal__item p { font-size: var(--fs-sm); font-weight: 600; line-height: 1.55; }

@media (max-width: 1024px) {
	.ensaio-intro__grid, .processo__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.ensaio-intro__art img, .processo__art img { max-width: 420px; }
	.motivos, .ideal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.processo__art { position: relative; top: auto; }
	.galeria__foto { width: 170px; }
}
@media (max-width: 640px) {
	.motivos, .ideal__grid { grid-template-columns: minmax(0, 1fr); }
	.galeria__equipe { grid-template-columns: minmax(0, 1fr); }
	.galeria__foto { width: 140px; }
}

/* ============================================================================
   PÁGINA "OTIMIZAÇÃO DE SITES SEO" (seo.html)
   ============================================================================ */

/* --- introdução: texto + "SEO" 3D --- */
.seo-intro { position: relative; overflow: hidden; background: var(--bg); }
.seo-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); align-items: center; }
.seo-intro h2 { margin-top: var(--sp-5); font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.seo-intro .rule { margin-top: var(--sp-5); }
/* camaleão na proporção da imagem (826x989); círculo, arco e pontos em % dela */
.seo-intro__art {
	position: relative; width: 100%; max-width: 560px; margin-left: auto;
	aspect-ratio: 826 / 989; align-self: end;
	margin-bottom: calc(-1 * var(--sp-5));
}
.seo-intro__art::before {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 104%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(139, 92, 246, .2), rgba(139, 92, 246, .11) 62%, rgba(139, 92, 246, .05) 100%);
}
.seo-intro__orbita {
	position: absolute; left: 54%; bottom: -9%; transform: translateX(-50%);
	width: 124%; aspect-ratio: 1; z-index: 0; pointer-events: none;
}
.seo-intro__orbita::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1.5px solid rgba(109, 40, 217, .42);
	-webkit-mask-image: linear-gradient(160deg, #000 18%, transparent 44%);
	mask-image: linear-gradient(160deg, #000 18%, transparent 44%);
}
/* ponto sobre o arco, a 65° da vertical, à esquerda: (50% − 50%·sen 65°, 50% − 50%·cos 65°) = (4.7%, 28.9%) */
.seo-intro__orbita::after {
	content: ""; position: absolute; left: calc(4.7% - 6px); top: calc(28.9% - 6px);
	width: 12px; height: 12px; border-radius: 50%; background: var(--violet-500);
}
/* pontinhos coloridos à direita da cabeça */
.seo-intro__pontos { position: absolute; right: -4%; top: 14%; z-index: 0; pointer-events: none; display: none; }
.seo-intro__pontos i { position: absolute; border-radius: 50%; }
.seo-intro__pontos i:nth-child(1) { left: 0; top: 0; width: 10px; height: 10px; background: var(--violet-500); }
.seo-intro__pontos i:nth-child(2) { left: 24px; top: 30px; width: 14px; height: 14px; background: var(--violet-600); }
.seo-intro__pontos i:nth-child(3) { left: 46px; top: 68px; width: 9px; height: 9px; background: var(--violet-500); }
.seo-intro__pontos i:nth-child(4) { left: 28px; top: 112px; width: 13px; height: 13px; background: var(--pink-500); }
.seo-intro__art img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; max-width: none;
	object-fit: contain; object-position: center bottom;
}

/* dois cards abaixo: claro e roxo, com o título ao lado do ícone */
.seo-intro__cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-5); }
.seo-intro__card { padding: var(--sp-7); border-radius: var(--r-xl); border-color: var(--violet-100); background: #FBFAFF; }
.seo-intro__card-head { display: flex; align-items: center; gap: var(--sp-5); }
.seo-intro__ico { width: 72px; height: 72px; border-radius: var(--r-md); background: var(--violet-100); color: var(--violet-600); }
.seo-intro__ico svg { width: 34px; height: 34px; }
.seo-intro__card h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: -.02em; }
.seo-intro__card p { margin-top: var(--sp-5); font-size: 1.02rem; line-height: 1.7; color: var(--text-soft); }
.seo-intro__card--escuro {
	border-color: transparent; color: #fff;
	background: linear-gradient(160deg, var(--violet-500) 0%, var(--violet-600) 45%, var(--violet-700) 100%);
	box-shadow: 0 30px 60px rgba(91, 33, 182, .28);
}
.seo-intro__card--escuro .seo-intro__ico { background: rgba(255, 255, 255, .92); color: #16A34A; }
.seo-intro__card--escuro h3 { color: #fff; }
.seo-intro__card--escuro p { color: rgba(255, 255, 255, .88); }

/* etiquetas das técnicas dentro da etapa */
.etapa__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-3); }
.etapa__tags li {
	padding: .28rem .6rem; border-radius: var(--r-pill);
	background: rgba(155, 230, 25, .12); border: 1px solid rgba(155, 230, 25, .28);
	font-size: .72rem; font-weight: 600; color: var(--lime-500);
}
.etapa__nota { margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--lime-500); }

/* --- perguntas frequentes: arte fixa + acordeão --- */
.seo-faq { position: relative; overflow: clip; background: var(--bg-alt); }
.seo-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-9); align-items: start; }
.seo-faq__lado { position: sticky; top: 7.5rem; }
.seo-faq h2 { margin-top: var(--sp-5); }
.seo-faq .rule { margin-top: var(--sp-5); }
.seo-faq__lado p { margin-top: var(--sp-5); }
.seo-faq__art { position: relative; margin-top: var(--sp-6); }
.seo-faq__art img { width: 100%; max-width: 440px; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.seo-faq .accordion { gap: var(--sp-4); }
.seo-faq .accordion__panel p + p { margin-top: var(--sp-3); }

/* --- chamada final com o foguete --- */
.sites-cta--split .sites-cta__inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-8); align-items: center; text-align: left; }
.sites-cta--split .sites-cta__acoes { justify-content: flex-start; }
.sites-cta__art { position: relative; display: flex; justify-content: center; }
.sites-cta__art::before {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 100%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
	background: radial-gradient(closest-side, rgba(20, 195, 212, .32), rgba(139, 92, 246, .18) 58%, transparent 76%);
	filter: blur(14px);
}
.sites-cta__art img { position: relative; z-index: 1; width: 100%; max-width: 480px; filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .45)); }

@media (max-width: 1024px) {
	.seo-intro__grid, .seo-faq__grid, .sites-cta--split .sites-cta__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.seo-intro__art { max-width: 400px; margin-inline: auto; }
	.seo-faq__lado { position: relative; top: auto; }
	.sites-cta--split .sites-cta__inner { text-align: center; }
	.sites-cta--split .sites-cta__acoes { justify-content: center; }
	.sites-cta__art img { max-width: 380px; }
}
@media (max-width: 640px) {
	.seo-intro__cards { grid-template-columns: minmax(0, 1fr); }
	.seo-intro__card { padding: var(--sp-5); }
	.seo-intro__card-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ============================================================================
   PÁGINA "PRODUÇÃO DE VÍDEO INSTITUCIONAL" (video-institucional.html)
   Reaproveita videos-intro, motivos/difer, etapas-faixa, faq e sites-cta;
   só os pacotes são novos. */
.planos { position: relative; overflow: hidden; background: var(--bg-alt); --acc: var(--violet-600); /* cor do check da .lista-acc */ }
.planos .metodo__head { max-width: 46rem; }
.planos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); max-width: 62rem; margin: var(--sp-8) auto 0; }
.plano { position: relative; display: flex; flex-direction: column; padding: var(--sp-7); border-radius: var(--r-xl); }
.plano__tag {
	display: inline-block; align-self: flex-start; padding: .4rem .85rem; border-radius: var(--r-pill);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: var(--violet-100); color: var(--violet-600);
}
.plano h3 { margin-top: var(--sp-4); font-size: 1.5rem; letter-spacing: -.02em; }
.plano__lista { margin-top: var(--sp-5); gap: .7rem; }
.plano__lista li { font-size: 1rem; color: var(--text); }
.plano__preco { margin-top: auto; padding-top: var(--sp-6); font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--ink-900); }
.plano__preco small { font-size: .42em; font-weight: 700; margin-right: .3rem; color: var(--violet-600); vertical-align: .55em; }
.plano .btn { margin-top: var(--sp-5); align-self: flex-start; }
.plano--destaque { border-color: var(--violet-300); box-shadow: 0 24px 56px rgba(91, 33, 182, .14); }
.plano--destaque .plano__tag { background: var(--violet-600); color: #fff; }
.planos__nota { max-width: 62rem; margin: var(--sp-5) auto 0; font-size: var(--fs-sm); color: var(--text-soft); }
/* cinco planos de edição de vídeo (captação): cards menores, em linha */
.planos__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); max-width: none; }
.planos__grid--5 .plano { padding: var(--sp-5); }
.planos__grid--5 .plano h3 { font-size: 1.7rem; }
.planos__grid--5 .plano__lista li { font-size: .92rem; }
.planos__grid--5 .plano .btn { margin-top: auto; padding-top: .625rem; }
.planos__grid--5 .plano__lista { margin-bottom: var(--sp-5); }
@media (max-width: 1200px) { .planos__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .planos__grid, .planos__grid--5 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 521px) and (max-width: 800px) { .planos__grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================================
   PÁGINA "CRIAÇÃO DE VÍDEOS ANIMADOS" (videos-animados.html)
   ============================================================================ */

/* --- introdução: texto + camaleão de óculos --- */
.videos-intro { position: relative; overflow: hidden; background: var(--bg); --acc: var(--violet-600); /* cor do check da .lista-acc nos cards */ }
.videos-intro .landing-intro__cards { margin-top: var(--sp-7); }
.videos-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-9); align-items: center; }
.videos-intro h2 { margin-top: var(--sp-5); }
.videos-intro .rule { margin-top: var(--sp-5); }
.videos-intro p + p { margin-top: var(--sp-4); }
.videos-intro__art { position: relative; }
.videos-intro__art img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.videos-intro__play {
	position: absolute; right: var(--sp-5); top: var(--sp-5);
	width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
	box-shadow: 0 16px 40px rgba(29, 2, 78, .35);
}
.videos-intro__play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(155, 230, 25, .55); animation: wa-pulse 2.4s ease-out infinite; }
.videos-intro__play svg { width: 26px; height: 26px; margin-left: 3px; }
.videos-intro__selo {
	position: absolute; left: var(--sp-5); bottom: var(--sp-5);
	display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem;
	border-radius: var(--r-pill); background: rgba(20, 2, 60, .72); color: #fff;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.videos-intro__selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-500); box-shadow: 0 0 0 4px rgba(155, 230, 25, .25); }
.videos-intro .grid { margin-top: var(--sp-6); }

/* --- por que utilizar: texto + estatísticas + conclusão --- */
.videos-porque { position: relative; overflow: hidden; background: var(--bg); }
.videos-porque__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); align-items: center; }
.videos-porque h2 { margin-top: var(--sp-5); }
.videos-porque .rule { margin-top: var(--sp-5); }
.videos-porque p + p { margin-top: var(--sp-4); }
.videos-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.stat-card { padding: var(--sp-6) var(--sp-5); }
.stat-card__num {
	display: block; font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
	background: linear-gradient(120deg, var(--violet-600), var(--pink-500));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card:nth-child(2) .stat-card__num { background-image: linear-gradient(120deg, var(--teal-600), var(--violet-600)); }
.stat-card:nth-child(3) .stat-card__num { background-image: linear-gradient(120deg, var(--lime-600), var(--teal-600)); }
.stat-card:nth-child(4) .stat-card__num { background-image: linear-gradient(120deg, var(--gold-600), var(--pink-500)); }
.stat-card p { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft); }
.stat-card p strong { color: var(--text); }
.videos-porque__conclusao {
	position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-7); align-items: center;
	margin-top: var(--sp-8); padding: var(--sp-6); border-radius: var(--r-xl);
	background: linear-gradient(120deg, var(--ink-800), var(--violet-700)); color: #fff;
}
.videos-porque__conclusao img { width: 100%; border-radius: var(--r-lg); box-shadow: 0 20px 44px rgba(0, 0, 0, .35); }
.videos-porque__conclusao h3 { font-size: 1.35rem; color: #fff; }
.videos-porque__conclusao p { margin-top: var(--sp-3); line-height: 1.65; color: var(--text-invert-soft); }
.videos-porque__conclusao p strong { color: var(--lime-500); }
.videos-porque__conclusao .btn { margin-top: var(--sp-5); }

@media (max-width: 1024px) {
	.videos-intro__grid, .videos-porque__grid, .videos-porque__conclusao { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
	.videos-intro__art, .videos-porque__conclusao img { max-width: 560px; }
}
@media (max-width: 640px) {
	.videos-stats { grid-template-columns: minmax(0, 1fr); }
	.videos-porque__conclusao { padding: var(--sp-5); }
}

/* ============================================================================
   PÁGINA "FALE COM A WEBFORMAS" (contato.html)
   ============================================================================ */

.contato { position: relative; overflow: hidden; background: var(--bg); }
.contato__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--sp-9); align-items: start; }
.contato h2 { margin-top: var(--sp-5); }
.contato .rule { margin-top: var(--sp-5); }
.contato__lead { margin-top: var(--sp-5); }

/* canais de atendimento */
.canais { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.canal { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); color: inherit; }
.canal small { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.canal strong { display: block; margin-top: .15rem; font-size: 1.05rem; line-height: 1.3; }
.canal span.canal__hint { display: block; margin-top: .2rem; font-size: var(--fs-sm); color: var(--text-soft); }
.canal--wa { border-color: rgba(123, 199, 10, .45); background: linear-gradient(90deg, rgba(155, 230, 25, .12), transparent 70%); }
.canal--wa strong { color: var(--ink-800); }
a.canal:hover { border-color: var(--violet-300); }
.canal__arrow { margin-left: auto; flex: none; width: 22px; height: 22px; color: var(--violet-500); transition: transform var(--t-fast); }
a.canal:hover .canal__arrow { transform: translateX(4px); }

.contato__redes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.contato__redes span { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.contato__redes a {
	display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: var(--r-pill);
	border: 1px solid var(--line); background: #fff; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.contato__redes a:hover { border-color: var(--violet-300); transform: translateY(-2px); }
.contato__redes svg { width: 18px; height: 18px; color: var(--violet-600); }

/* o formulário (estilo escuro) ganha um fundo sólido para viver sobre a página clara */
.form--solido { background: linear-gradient(150deg, var(--ink-900), var(--violet-700)); border-color: transparent; box-shadow: var(--sh-lg); }
.form__titulo { margin-bottom: var(--sp-5); }
.form__titulo h3 { font-size: 1.25rem; color: #fff; }
.form__titulo p { margin-top: .35rem; font-size: var(--fs-sm); color: var(--text-invert-soft); }

@media (max-width: 1024px) { .contato__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }

/* ============================================================ PÁGINAS LEGAIS
   Política de Privacidade e Termos de Uso: coluna de leitura, seções
   numeradas, listas e tabelas do texto importado do WordPress. */
.legal { background: var(--paper-2); }
.legal__inner { max-width: 50rem; }
.legal__data { margin-bottom: var(--sp-5); font-size: var(--fs-sm); font-weight: 600; color: var(--violet-600); }
.legal__texto { padding: clamp(1.5rem, 4vw, 3.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-sm); font-size: 1.02rem; line-height: 1.8; color: var(--text); }
.legal__texto > * + * { margin-top: 1.05em; }
.legal__resp { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--violet-050); border: 1px solid #E3DBF8; font-size: .95rem; line-height: 1.7; }
.legal__resp strong { color: var(--ink-900); }
.legal__texto a { color: var(--violet-600); text-decoration: underline; text-underline-offset: 3px; }
.legal__texto h2 { display: flex; align-items: flex-start; gap: .75rem; margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.3; letter-spacing: -.015em; color: var(--ink-900); }
.legal__num { flex: none; min-width: 2rem; height: 2rem; padding-inline: .4rem; border-radius: 10px; background: var(--violet-600); color: #fff; font-size: .85rem; font-weight: 700; line-height: 2rem; text-align: center; box-shadow: 0 5px 14px rgba(109,40,217,.3); }
.legal__lista { list-style: disc; padding-left: 1.3em; }
.legal__lista li + li { margin-top: .5em; }
.legal__lista li::marker { color: var(--violet-600); }
.legal__lista strong { color: var(--ink-900); }
.legal__tabela { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); }
.legal__tabela table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .92rem; line-height: 1.55; }
.legal__tabela th, .legal__tabela td { padding: .8rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal__tabela th { background: var(--violet-050); color: var(--ink-900); font-weight: 700; font-size: .85rem; }
.legal__tabela tr:last-child td { border-bottom: 0; }
.legal__tabela tbody tr:nth-child(even) td { background: var(--paper-2); }

/* ============================================================ COOKIES / LGPD
   Barra de consentimento injetada pelo main.js (cookies()). Fica no canto
   inferior esquerdo para não brigar com o botão flutuante do WhatsApp. */
.cookies {
	position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 95;
	display: flex; justify-content: flex-start; pointer-events: none;
	opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease;
}
.cookies.is-visible { opacity: 1; transform: none; }
.cookies__box {
	pointer-events: auto; width: min(100%, 34rem); max-height: calc(100vh - 2rem); overflow-y: auto;
	padding: var(--sp-5) var(--sp-6); border-radius: var(--r-xl);
	background: rgba(20, 2, 60, .94); border: 1px solid var(--line-dark);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .38); color: #fff;
}
.cookies__cabeca { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.cookies__ico { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(155, 230, 25, .14); color: var(--lime-500); }
.cookies__ico svg { width: 20px; height: 20px; }
.cookies__box h2 { font-size: 1.05rem; color: #fff; }
.cookies__box p { font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.cookies__box p a { color: var(--lime-500); text-decoration: underline; text-underline-offset: 3px; }
.cookies__painel { display: grid; gap: .6rem; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-dark); }
.cookies__opcao { display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .8); cursor: pointer; }
.cookies__opcao input { flex: none; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--lime-500); }
.cookies__opcao input:disabled { opacity: .7; }
.cookies__opcao strong { color: #fff; }
.cookies__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.cookies__btn { padding-left: 1.25rem; font-size: .82rem; }
.cookies__btn .btn__label { padding: .35rem 0; }
.cookies__link { background: none; border: 0; padding: .5rem .25rem; font: inherit; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookies__link:hover { color: var(--lime-500); }
.site-footer__legal button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #fff; cursor: pointer; transition: color var(--t-fast); }
.site-footer__legal button:hover { color: var(--lime-500); }
.site-footer__legal > * + * { padding-left: var(--sp-4); border-left: 1px solid var(--line-dark); }
@media (max-width: 640px) {
	.cookies { left: .75rem; right: .75rem; bottom: .75rem; }
	.cookies__box { padding: var(--sp-4) var(--sp-5); }
	.cookies__acoes .btn { width: 100%; justify-content: center; }
	.wa-float { transition: transform var(--t-fast), opacity var(--t-fast); }
	body:has(.cookies.is-visible) .wa-float { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; transform: none; } }