/* ==========================================================================
   Ecomtur — components.css
   Um bloco por componente de template-parts/components/*.php
   ========================================================================== */

/* Ícone ------------------------------------------------------------------- */
.ect_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.25em;
	height: 1em;
	line-height: 1;
	font-style: normal;
}

/* Botão (.button) --------------------------------------------------------- */
.ect_button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.5rem;
	border: 0;
	border-radius: var(--ect-radius-md);
	background-color: var(--ect-color-primary);
	color: var(--ect-neutral-white);
	box-shadow: inset 0 -1px #0003, inset 0 1px #ffffff40;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.25em;
	text-align: center;
	cursor: pointer;
	transition: all var(--ect-duration) var(--ect-ease);
}
.ect_button:hover { filter: brightness(115%); }
.ect_button:active { transform: scale(.98); }
.ect_button:focus-visible { outline: 2px solid var(--ect-fg); outline-offset: 2px; }
.ect_button .ect_icon { font-size: 1.125em; transition: transform var(--ect-duration) var(--ect-ease); }
.ect_button:hover .ect_icon--arrow-right { transform: translateX(2px); }

.ect_button--secondary {
	background-color: color-mix(in srgb, currentColor, transparent 90%);
	color: inherit;
	box-shadow: none;
	-webkit-backdrop-filter: blur(2rem);
	backdrop-filter: blur(2rem);
}
.ect_button--secondary:hover { filter: none; background-color: color-mix(in srgb, currentColor, transparent 70%); }
.ect_button--white { background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); }
.ect_button--black { background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); }
.ect_button--black:hover { filter: none; background-color: var(--ect-neutral-800); }
.ect_button--accent { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_button--success { background-color: var(--ect-green); }
.ect_button--outline {
	background-color: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 var(--ect-border) currentColor;
}
.ect_button--outline:hover { filter: none; background-color: var(--ect-color-primary); color: var(--ect-neutral-white); box-shadow: inset 0 0 0 var(--ect-border) var(--ect-color-primary); }
.ect_button--ghost { background-color: transparent; color: inherit; box-shadow: none; padding-inline: 1rem; }
.ect_button--ghost:hover { filter: none; background-color: color-mix(in srgb, currentColor, transparent 85%); }

.ect_button--small { padding: .5rem 1.25rem; font-size: .9rem; }
.ect_button--large { padding: 1rem 1.5rem; font-size: 1.1em; }
.ect_button--block { display: flex; width: 100%; }
.ect_button--icon-only { padding: .75rem; aspect-ratio: 1; }

.ect_button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ect-gap-main); }
.ect_button-group--center { justify-content: center; }

/* Link com seta (.surfer-3_studies-link / .view-all) ---------------------- */
.ect_arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ect-gap-xs);
	color: var(--ect-fg-muted);
	font-weight: 500;
	transition: color var(--ect-duration) var(--ect-ease);
}
.ect_arrow-link:hover { color: var(--ect-fg); }
.ect_arrow-link .ect_icon { font-size: 1em; transition: transform var(--ect-duration) var(--ect-ease); }
.ect_arrow-link:hover .ect_icon { transform: translateX(3px); }
.ect_arrow-link--split { gap: .375rem; }
.ect_arrow-link--split .ect_arrow-link__arrow { color: var(--ect-fg); }

/* Eyebrow (.u-eyebrow / .surfer-3_hero-eyebrow) --------------------------- */
.ect_eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ect-gap-xs);
	font-size: var(--ect-eyebrow);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-wrap: balance;
}
.ect_eyebrow__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--ect-orange);
	color: var(--ect-neutral-black);
}
.ect_eyebrow__icon .ect_icon { font-size: .875rem; }
.ect_eyebrow--small { font-size: var(--ect-text-xs); font-weight: 400; line-height: 1; color: var(--ect-neutral-400); }
.ect_eyebrow--accent { color: var(--ect-orange); }
.ect_eyebrow--primary { color: var(--ect-blue); }
.ect_theme--dark .ect_eyebrow--primary, .ect_theme--brand .ect_eyebrow--primary { color: #7fb2e8; }
.ect_eyebrow--success { color: var(--ect-green); }

/* Badge (.learn_card-badge) ----------------------------------------------- */
.ect_badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem .4rem;
	border: var(--ect-border) solid var(--ect-neutral-800);
	border-radius: var(--ect-radius-pill);
	background-color: var(--ect-neutral-black);
	color: var(--ect-neutral-white);
	font-size: var(--ect-text-sm);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}
.ect_badge--outline { background-color: transparent; color: inherit; border-color: color-mix(in srgb, currentColor, transparent 75%); }
.ect_badge--light { background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); border-color: var(--ect-neutral-200); }
.ect_badge--success { background-color: var(--ect-green); border-color: var(--ect-green); }
.ect_badge--small { padding: .3rem .7rem .25rem; font-size: var(--ect-text-xs); }
.ect_badge-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.5rem;
	aspect-ratio: 1;
	border: var(--ect-border) solid var(--ect-neutral-800);
	border-radius: 50%;
	background-color: var(--ect-neutral-black);
	color: var(--ect-neutral-white);
}
.ect_badge-icon .ect_icon { font-size: 1rem; }
@media (max-width: 991px) { .ect_badge-icon { display: none; } }

/* Avaliação (.surfer-3_hero-rating) --------------------------------------- */
.ect_rating { display: inline-flex; align-items: center; gap: var(--ect-gap-xs); }
.ect_rating__stars { display: inline-flex; gap: .125rem; color: var(--ect-orange); }
.ect_rating__stars .ect_icon { font-size: 1rem; }

/* Cabeçalho de seção ------------------------------------------------------ */
.ect_section-head { display: flex; flex-direction: column; gap: var(--ect-gap-md); max-width: var(--ect-max-md); }
.ect_section-head__lead { color: var(--ect-fg-muted); font-size: var(--ect-text-md); max-width: var(--ect-max-sm); }
.ect_section-head__actions { margin-top: var(--ect-gap-xs); }
/* Hero: mais respiro entre subtítulo, título e texto, e mais ainda até os botões. */
.ect_section-head--hero { gap: 2rem; }
.ect_section-head--hero .ect_section-head__actions { margin-top: 1.5rem; }
.ect_section-head--center { align-items: center; margin-inline: auto; text-align: center; }
.ect_section-head--center .ect_section-head__lead { margin-inline: auto; }
.ect_section-head--split {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	max-width: none;
}
.ect_section-head--split > .ect_section-head__body { display: flex; flex-direction: column; gap: var(--ect-gap-md); max-width: var(--ect-max-md); }

/* Card de recurso (.learn_card) ------------------------------------------- */
.ect_card {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	align-content: space-between;
	gap: var(--ect-gap-lg);
	min-height: 22rem;
	padding: var(--ect-gutter);
	overflow: hidden;
	border: var(--ect-border) solid var(--ect-orange);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-orange);
	color: var(--ect-neutral-black);
	transition: border-color var(--ect-duration) var(--ect-ease);
}
.ect_card__badges { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--ect-gap-xs); }
.ect_card__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-main); }
.ect_card__text { color: color-mix(in srgb, currentColor, transparent 30%); }
.ect_card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* Card inteiro clicável */
.ect_card__actions { position: relative; z-index: 4; }
.ect_card__media { position: absolute; inset: 0; z-index: 0; }
.ect_card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform var(--ect-duration-slow) var(--ect-ease), opacity var(--ect-duration-slow) var(--ect-ease); }
.ect_card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 20%, #000c 100%); }
.ect_card:hover .ect_card__media img { transform: scale(1.03); opacity: .6; }

.ect_card--primary { border-color: var(--ect-blue); background-color: var(--ect-blue); color: var(--ect-neutral-white); }
.ect_card--brand { border-color: var(--ect-navy); background-color: var(--ect-navy); color: var(--ect-neutral-white); }
.ect_card--dark { border-color: var(--ect-neutral-900); background-color: var(--ect-neutral-1000); color: var(--ect-neutral-white); }
.ect_card--dark:hover, .ect_card--image:hover { border-color: var(--ect-orange); }
.ect_card--image { border-color: var(--ect-neutral-900); background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); }
.ect_card--light { border-color: var(--ect-neutral-200); background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); }
.ect_card--light:hover { border-color: var(--ect-blue); }
.ect_card--compact { min-height: 0; gap: var(--ect-gap-md); }

/* Card de número (.surfer-3_studies-stat) --------------------------------- */
.ect_stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ect-gap-main);
	padding: 2rem 3rem;
	overflow: clip;
	border: 1px solid var(--ect-neutral-900);
	border-radius: var(--ect-radius-sm);
	background-color: var(--ect-neutral-1000);
	color: var(--ect-neutral-white);
	transition: all var(--ect-duration) var(--ect-ease);
	container-type: inline-size;
}
.ect_stat-card__number {
	font-size: clamp(3.5rem, 22cqi, 8rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
}
.ect_stat-card__label { color: var(--ect-white-muted); font-size: var(--ect-text-md); }
.ect_stat-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ect-gap-xs); }
.ect_stat-card__corner {
	position: absolute;
	top: -1px; right: -1px;
	z-index: 2;
	width: 2.75rem;
	aspect-ratio: 1;
	/* metade de cima: o fundo da seção (o "corte"); metade de baixo: a aba dobrada */
	background: linear-gradient(to bottom left, var(--ect-bg) 50%, var(--ect-neutral-800) 50%);
	border-bottom-left-radius: .375rem;
	transition: width var(--ect-duration-slow) var(--ect-ease-out), background var(--ect-duration) var(--ect-ease);
}
.ect_stat-card:hover .ect_stat-card__corner { width: 4.5rem; background: linear-gradient(to bottom left, var(--ect-bg) 50%, var(--ect-green) 50%); }
.ect_stat-card--fill .ect_stat-card__corner { background: linear-gradient(to bottom left, var(--ect-bg) 50%, #015a2f 50%); }
.ect_stat-card--fill:hover .ect_stat-card__corner { background: linear-gradient(to bottom left, var(--ect-bg) 50%, var(--ect-orange) 50%); }
.ect_stat-card--highlight { border-color: var(--ect-green); }
@media (max-width: 767px) { .ect_stat-card { padding-inline: 2.5rem; } }

/* Card de destaque com gráfico de pontos (.surfer-3_era-problem-card) ----- */
.ect_highlight-card {
	display: flex;
	flex-direction: column;
	overflow: clip;
	border: var(--ect-border) solid var(--ect-neutral-900);
	border-radius: var(--ect-radius-section);
	background-color: var(--ect-neutral-black);
	color: var(--ect-neutral-white);
}
.ect_highlight-card__graph {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: var(--ect-gap-md);
	height: 16rem;
	padding: var(--ect-gap-md);
	background-image: radial-gradient(var(--ect-neutral-800) 1px, transparent 1.5px);
	background-size: 14px 14px;
	border-bottom: var(--ect-border) solid var(--ect-neutral-900);
}
.ect_highlight-card__value { display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; }
.ect_highlight-card__bar { width: 4.5rem; border-radius: .5rem .5rem 0 0; background-color: var(--ect-neutral-800); }
.ect_highlight-card__value--accent .ect_highlight-card__bar { background-color: var(--ect-orange); }
.ect_highlight-card__value--accent .ect_highlight-card__number { color: var(--ect-orange); }
.ect_highlight-card__number { font-size: var(--ect-display-md); font-weight: 600; line-height: 1; }
.ect_highlight-card__content { display: flex; flex-direction: column; gap: var(--ect-gap-sm); padding: var(--ect-gap-md); }

/* Depoimento escuro (.surfer-3_studies-quote-card) ------------------------ */
.ect_quote-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ect-gap-lg);
	min-height: 24rem;
	padding: 2.5rem;
	border: var(--ect-border) solid var(--ect-neutral-900);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-neutral-1000);
	color: var(--ect-neutral-white);
	transition: border-color var(--ect-duration) var(--ect-ease);
}
.ect_quote-card:hover { border-style: dashed; border-color: var(--ect-neutral-600); }
.ect_quote-card__quote { color: var(--ect-white-muted); font-size: var(--ect-display-sm); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.ect_quote-card__quote strong { color: var(--ect-neutral-white); font-weight: 600; }
.ect_quote-card__footer { display: flex; align-items: center; gap: var(--ect-gap-md); }
.ect_quote-card__logo { max-height: 2.5rem; width: auto; }
.ect_quote-card__author { display: flex; flex-direction: column; gap: .125rem; padding-left: var(--ect-gap-md); border-left: var(--ect-border) solid var(--ect-neutral-800); }
@media (max-width: 767px) { .ect_quote-card { padding: var(--ect-gap-md); } .ect_quote-card__quote { text-align: center; } }

/* Depoimento claro (.surfer-3_testimonials-quote-card) -------------------- */
.ect_testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ect-gap-md);
	padding: 2.5rem var(--ect-gutter);
	border: var(--ect-border) solid var(--ect-neutral-300);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-neutral-white);
	color: var(--ect-neutral-black);
	text-align: center;
}
.ect_testimonial__mark { color: var(--ect-orange); }
.ect_testimonial__mark .ect_icon { font-size: 2rem; }
.ect_testimonial__quote { color: var(--ect-neutral-500); font-size: var(--ect-text-lg); line-height: 1.4; text-wrap: balance; }
.ect_testimonial__quote strong { color: var(--ect-neutral-black); font-weight: 600; }
.ect_testimonial__footer { display: flex; align-items: center; gap: var(--ect-gap-sm); text-align: left; }
.ect_testimonial__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--ect-neutral-100); display: grid; place-items: center; font-weight: 600; }

/* Checklist (.surfer-3_solution_mock) ------------------------------------- */
.ect_checklist {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: var(--ect-border) solid var(--ect-line);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-surface);
}
.ect_checklist__item {
	display: flex;
	align-items: center;
	gap: var(--ect-gap-sm);
	padding: .875rem 1rem;
	font-weight: 500;
}
.ect_checklist__item + .ect_checklist__item { border-top: var(--ect-border) solid var(--ect-line); }
.ect_checklist__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--ect-green);
	color: var(--ect-neutral-white);
}
.ect_checklist__icon .ect_icon { width: auto; height: auto; font-size: .625rem; }
.ect_checklist__item--pending .ect_checklist__icon { background-color: transparent; box-shadow: inset 0 0 0 var(--ect-border) var(--ect-line); }
.ect_checklist__item--pending .ect_checklist__icon .ect_icon { display: none; }

/* Item de funcionalidade -------------------------------------------------- */
.ect_feature { display: flex; flex-direction: column; gap: var(--ect-gap-sm); }
.ect_feature__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	aspect-ratio: 1;
	border-radius: var(--ect-radius-md);
	background-color: color-mix(in srgb, var(--ect-orange), transparent 85%);
	color: var(--ect-orange);
}
.ect_theme--light .ect_feature__icon, .ect_theme--gray .ect_feature__icon { background-color: var(--ect-blue-light); color: var(--ect-blue); }
.ect_feature__text { color: var(--ect-fg-muted); }

/* Card de post ------------------------------------------------------------ */
.ect_post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--ect-border) solid var(--ect-line);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-bg);
	transition: border-color var(--ect-duration) var(--ect-ease);
}
.ect_post-card:hover { border-color: var(--ect-orange); }
.ect_post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--ect-surface); }
.ect_post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ect-duration-slow) var(--ect-ease); }
.ect_post-card:hover .ect_post-card__media img { transform: scale(1.03); }
.ect_post-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--ect-gap-sm); padding: var(--ect-gutter); }
.ect_post-card__meta { display: flex; flex-wrap: wrap; gap: var(--ect-gap-xs); color: var(--ect-fg-muted); font-size: var(--ect-text-sm); }
.ect_post-card__link::after { content: ""; position: absolute; inset: 0; }
.ect_post-card__excerpt { color: var(--ect-fg-muted); }

/* Perguntas frequentes (<details>, sem JS) -------------------------------- */
.ect_faq { border-top: var(--ect-border) solid var(--ect-line); }
.ect_faq__item { border-bottom: var(--ect-border) solid var(--ect-line); }
.ect_faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ect-gap-md);
	padding: var(--ect-gap-md) 0;
	font-size: var(--ect-display-xs);
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none; /* clique rápido no título não seleciona o texto */
	-webkit-tap-highlight-color: transparent;
}
.ect_faq__question::-webkit-details-marker { display: none; }
.ect_faq__question .ect_icon { transition: transform var(--ect-duration) var(--ect-ease); }
.ect_faq__item[open] .ect_faq__question .ect_icon { transform: rotate(45deg); }
.ect_faq__answer { padding-bottom: var(--ect-gap-md); color: var(--ect-fg-muted); }
/* Abre/fecha com altura animada onde o navegador suporta (::details-content). */
@supports (interpolate-size: allow-keywords) {
	.ect_faq { interpolate-size: allow-keywords; }
	.ect_faq__item::details-content {
		height: 0;
		overflow: clip;
		transition: height var(--ect-duration-slow) var(--ect-ease-out), content-visibility var(--ect-duration-slow) allow-discrete;
	}
	.ect_faq__item[open]::details-content { height: auto; }
}

/* Redes sociais ----------------------------------------------------------- */
.ect_social { display: flex; flex-wrap: wrap; gap: var(--ect-gap-xs); }
.ect_social__link {
	display: grid;
	place-items: center;
	width: 2.5rem;
	aspect-ratio: 1;
	border-radius: var(--ect-radius-md);
	background-color: color-mix(in srgb, currentColor, transparent 90%);
	transition: background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease);
}
.ect_social__link:hover { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_social__link .ect_icon { font-size: 1.125rem; }

/* Logo -------------------------------------------------------------------- */
.ect_logo { display: inline-flex; align-items: center; gap: var(--ect-gap-xs); font-weight: 700; font-size: 1.25rem; }
.ect_logo__img { width: auto; height: 2rem; height:28px; margin-top:8px; }

/* Mídia ------------------------------------------------------------------- */
.ect_media { position: relative; overflow: hidden; border-radius: var(--ect-radius-main); background-color: var(--ect-surface); }
.ect_media img { width: 100%; height: 100%; object-fit: cover; }
.ect_media--16x9 { aspect-ratio: 16 / 9; }
.ect_media--3x2 { aspect-ratio: 3 / 2; }
.ect_media--1x1 { aspect-ratio: 1; }
.ect_media__credit { position: absolute; right: .5rem; bottom: .5rem; padding: .2rem .5rem; border-radius: .375rem; background: #0009; color: #fff; font-size: var(--ect-text-xs); }

/* Dialog (Alpine) --------------------------------------------------------- */
.ect_dialog { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: calc(var(--ect-adminbar) + var(--ect-gutter)) var(--ect-gutter) var(--ect-gutter); }
.ect_dialog__overlay { position: absolute; inset: 0; background: #000000b3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ect_dialog__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ect-gap-md);
	width: min(100%, 32rem);
	max-height: calc(100dvh - var(--ect-adminbar) - 3rem);
	overflow: auto;
	overscroll-behavior: contain;
	padding: 2rem;
	border: var(--ect-border) solid var(--ect-line);
	border-radius: var(--ect-radius-section);
	background-color: var(--ect-bg);
	color: var(--ect-fg);
}
.ect_dialog__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border-radius: var(--ect-radius-md); }
.ect_dialog__close:hover { background-color: color-mix(in srgb, currentColor, transparent 90%); }

/* Transições do Alpine (x-transition com classes) */
.ect_fade-enter, .ect_fade-leave { transition: opacity var(--ect-duration-slow) var(--ect-ease), transform var(--ect-duration-slow) var(--ect-ease); }
.ect_fade-from, .ect_fade-to-hidden { opacity: 0; transform: translateY(.5rem) scale(.98); }

/* Barra de âncoras (section-nav) ----------------------------------------- */
/* Fica sobre o fim da seção anterior; ao rolar, gruda logo abaixo da barra do
   cabeçalho (a borda dela coincide com a borda de baixo da barra = 1 divisor).
   z-index menor que o cabeçalho: o mega-menu abre por cima. */
:root { --ect-section-nav-h: 3.25rem; }
.ect_section-nav {
	/* Calculado aqui (e não no :root) para enxergar a --ect-adminbar do body.admin-bar. */
	--ect-section-nav-top: calc(var(--ect-adminbar) + var(--ect-header-space) + var(--ect-header-bar) + 1px);
	position: relative;
	z-index: 700;
	/* Solta na página: o texto do 1º link cai na linha do conteúdo. A caixa avança para os
	   lados o recuo interno (8px da caixa + 16px do link) — margem negativa sem mexer no padding
	   do link (o hover continua com respiro). Nunca passa das bordas da tela. */
	--ect-section-nav-offset: 1.5rem; /* solta não tem borda lateral */
	width: min(
		100%, /* solta não tem laterais visíveis: pode encostar na borda da tela */
		calc(min(100% - var(--ect-gutter) * 2, var(--ect-container) - var(--ect-gutter) * 2) + var(--ect-section-nav-offset) * 2)
	);
	margin: calc((var(--ect-section-nav-h) + var(--ect-header-space)) * -1) auto var(--ect-header-space);
	/* Solta: sem caixa, só a linha de cima como divisor. */
	border: 0;
	border-top: 1px solid #ffffff1f;
	border-radius: 0;
	background: none;
	color: var(--ect-neutral-white);
}
/* Fixa abaixo do cabeçalho (JS): entra deslizando por trás dele (z-index menor) e sai subindo com fade. */
.ect_section-nav.is-stuck {
	position: fixed;
	top: var(--ect-section-nav-top);
	right: 0;
	left: 0;
	margin: 0 auto;
	transform: translateY(0);
	opacity: 1;
	transition: transform .45s var(--ect-ease-out), opacity .3s var(--ect-ease);
}
.ect_section-nav.is-stuck.is-hidden { transform: translateY(calc(-100% - 2px)); opacity: 0; }
.ect_section-nav.is-instant { transition: none !important; }
.ect_section-nav.is-returning { animation: ect-section-nav-in .45s var(--ect-ease-out) both; }
@keyframes ect-section-nav-in { from { opacity: 0; transform: translateY(-.5rem); } }
@media (prefers-reduced-motion: reduce) {
	.ect_section-nav, .ect_section-nav.is-stuck { transition: none; }
	.ect_section-nav.is-returning { animation: none; }
}
/* Grudada: largura da barra do cabeçalho e links alinhados ao 1º item do menu (espaçador). */
.ect_section-nav.is-stuck { width: min(calc(100% - var(--ect-header-space) * 2), var(--ect-shell-max)); border: 1px solid #ffffff1f; border-radius: 0 0 1.25rem 1.25rem; background-color: color-mix(in srgb, var(--ect-neutral-900), transparent 6%); }
.ect_section-nav__inner { display: flex; align-items: center; gap: var(--ect-gap-sm); min-height: calc(var(--ect-section-nav-h) - 2px); padding: 0 .625rem 0 .5rem; }
.ect_section-nav__spacer { display: none; visibility: hidden; height: 0; overflow: hidden; }
.ect_section-nav.is-stuck .ect_section-nav__inner { padding-left: 1.5rem; }
.ect_section-nav.is-stuck .ect_section-nav__spacer { display: block; }
.ect_section-nav__top { display: none; }
.ect_section-nav.is-stuck .ect_section-nav__top { display: block; }
.ect_section-nav__list { display: flex; flex: 1; gap: .125rem; min-width: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.ect_section-nav__list::-webkit-scrollbar { display: none; }
.ect_section-nav__link {
	display: flex;
	align-items: center;
	gap: .375rem;
	min-height: 2.25rem;
	padding: 0 1rem;
	border-radius: .625rem;
	color: var(--ect-white-muted);
	font-size: var(--ect-text-sm);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease);
}
.ect_section-nav__link:hover { background-color: #ffffff1a; color: var(--ect-neutral-white); }
.ect_section-nav__mark { color: var(--ect-orange); font-variant-numeric: tabular-nums; }
/* Grudada: o cabeçalho fica mais escuro (preto sólido) e a barra de âncoras mais clara;
   a barra do cabeçalho perde os cantos de baixo (exceto com o mega-menu aberto). */
.ect_nav-stuck .ect_header__shell { background-color: var(--ect-neutral-black); }
.ect_nav-stuck .ect_site-header:not(.is-mega) .ect_header__shell { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 1299px) {
	.ect_section-nav.is-stuck .ect_section-nav__inner { padding-left: .5rem; }
	.ect_section-nav.is-stuck .ect_section-nav__spacer { display: none; }
}
@media (max-width: 767px) {
	/* A caixa já encosta na borda da tela: o recuo sai de dentro para o texto ficar na linha do conteúdo. */
	.ect_section-nav:not(.is-stuck) .ect_section-nav__inner { padding-left: calc(var(--ect-gutter) - .75rem); }
	.ect_section-nav:not(.is-stuck) .ect_section-nav__link { padding-inline: .75rem; }
	/* Rolagem lateral visível, com barra fina e espaço para não cobrir os nomes. */
	.ect_section-nav__list { padding-block: .375rem .5rem; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
	.ect_section-nav__list::-webkit-scrollbar { display: block; height: 4px; }
	.ect_section-nav__list::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #ffffff40; }
	.ect_section-nav__list::-webkit-scrollbar-track { background: transparent; }
}

/* ==========================================================================
   Componentes de página (home e LPs) — linguagem do surfer.ai:
   cards planos, borda de 1px num tom acima do fundo, sem sombra em repouso,
   raio 24px nos cards de conteúdo e 16px nos fragmentos de interface.
   ========================================================================== */

/* Cabeçalho com texto ao lado (título à esquerda, parágrafo à direita) ---- */
.ect_section-head--aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	column-gap: var(--ect-gap-xl);
	row-gap: var(--ect-gap-md);
	max-width: none;
}
.ect_section-head--aside > * { grid-column: 1; }
.ect_section-head--aside > .ect_section-head__lead { grid-column: 2; grid-row: 1 / span 3; align-self: end; max-width: 36rem; }
@media (max-width: 991px) {
	.ect_section-head--aside { grid-template-columns: minmax(0, 1fr); }
	.ect_section-head--aside > .ect_section-head__lead { grid-column: 1; grid-row: auto; }
}

/* Faixa de confiança ------------------------------------------------------ */
.ect_trust-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ect_trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4375rem .875rem .4375rem .4375rem;
	border: 1px solid var(--ect-line);
	border-radius: var(--ect-radius-pill);
	color: var(--ect-fg);
	font-size: var(--ect-text-sm);
	font-weight: 500;
}
.ect_trust-strip__icon { display: grid; place-items: center; width: 1.625rem; aspect-ratio: 1; border-radius: 50%; background-color: color-mix(in srgb, var(--ect-orange), transparent 84%); color: var(--ect-orange); font-size: .75rem; }

/* Moldura de produto (janela + print / espaço reservado) ------------------ */
.ect_media-frame {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--ect-neutral-800);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-neutral-1000);
}
.ect_media-frame--light { border-color: var(--ect-neutral-200); background-color: var(--ect-neutral-white); }
.ect_media-frame__bar { display: flex; align-items: center; gap: var(--ect-gap-sm); height: 2.25rem; padding-inline: .875rem; border-bottom: 1px solid #ffffff14; }
.ect_media-frame--light .ect_media-frame__bar { border-bottom-color: var(--ect-neutral-200); }
.ect_media-frame__dots { display: flex; gap: .375rem; }
.ect_media-frame__dots i { width: .5625rem; aspect-ratio: 1; border-radius: 50%; background-color: #ffffff2e; }
.ect_media-frame--light .ect_media-frame__dots i { background-color: var(--ect-neutral-300); }
.ect_media-frame__url { flex: 1; max-width: 20rem; margin-inline: auto; padding: .1875rem .75rem; border-radius: var(--ect-radius-sm); background-color: #ffffff0d; color: var(--ect-white-muted); font-size: var(--ect-text-xs); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ect_media-frame--light .ect_media-frame__url { background-color: var(--ect-neutral-100); color: var(--ect-black-muted); }
.ect_media-frame__screen { position: relative; overflow: hidden; }
.ect_media-frame--ratio-16x10 .ect_media-frame__screen { aspect-ratio: 16 / 10; }
.ect_media-frame--ratio-16x9 .ect_media-frame__screen { aspect-ratio: 16 / 9; }
.ect_cta-banner__media .ect_media-frame--ratio-16x9 .ect_media-frame__screen { aspect-ratio: 16 / 7; }
.ect_media-frame--ratio-4x3 .ect_media-frame__screen { aspect-ratio: 4 / 3; }
.ect_media-frame--ratio-1x1 .ect_media-frame__screen { aspect-ratio: 1; }
.ect_media-frame__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ect_media-frame__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	height: 100%;
	padding: var(--ect-gap-md);
	background-color: var(--ect-neutral-1000);
	background-image: radial-gradient(var(--ect-neutral-800) 1px, transparent 1.5px);
	background-size: 14px 14px;
	color: var(--ect-white-muted);
	text-align: center;
}
.ect_media-frame--light .ect_media-frame__placeholder { background-color: var(--ect-neutral-100); background-image: radial-gradient(var(--ect-neutral-300) 1px, transparent 1.5px); color: var(--ect-black-muted); }
.ect_media-frame__ph-icon { font-size: 2rem; color: var(--ect-orange); }
.ect_media-frame__ph-tag { padding: .2rem .625rem; border: 1px solid currentColor; border-radius: var(--ect-radius-pill); font-size: var(--ect-text-xs); font-weight: 600; }
.ect_media-frame__ph-label { max-width: 24rem; font-size: var(--ect-text-sm); text-wrap: balance; }

/* Palco: foto de contexto com a moldura flutuando por cima ---------------- */
.ect_stage { position: relative; overflow: hidden; border-radius: var(--ect-radius-section); background-color: var(--ect-navy); isolation: isolate; }
.ect_stage__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 80%; }
.ect_stage__frame { width: min(84%, 64rem); margin: clamp(5rem, 14vw, 14rem) auto 0; }
.ect_stage__frame .ect_media-frame { border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 -1rem 3rem #0005; }

/* Funcionalidade em duas colunas ----------------------------------------- */
.ect_feature-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); }
.ect_feature-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ect_feature-split--reverse .ect_feature-split__body { order: 2; }
.ect_feature-split__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-md); max-width: 34rem; }
.ect_feature-split__eyebrow { display: inline-flex; align-items: center; gap: .625rem; color: var(--ect-fg-muted); font-size: var(--ect-text-sm); font-weight: 600; }
.ect_feature-split__index { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: .5rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-orange); color: var(--ect-neutral-black); font-size: var(--ect-text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ect_feature-split__text { color: var(--ect-fg-muted); font-size: var(--ect-text-md); }
.ect_feature-split__body .ect_checklist { margin-block: var(--ect-gap-xs); }
.ect_feature-split__media--stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: clamp(22rem, 38vw, 36rem);
	padding: clamp(2.5rem, 6vw, 5rem) 0 0 clamp(1.5rem, 5vw, 4.5rem);
	overflow: hidden;
	border-radius: var(--ect-radius-section);
	background-color: var(--ect-navy);
	isolation: isolate;
}
.ect_feature-split--reverse .ect_feature-split__media--stage { justify-content: flex-start; padding-left: 0; padding-right: clamp(1.5rem, 5vw, 4.5rem); }
.ect_feature-split__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ect-duration-slow) var(--ect-ease-out); }
.ect_feature-split:hover .ect_feature-split__photo { transform: scale(1.025); }
.ect_feature-split__media--stage .ect_media-frame { width: 86%; border: 0; border-radius: var(--ect-radius-main) 0 0 0; box-shadow: 0 -1rem 3rem #0004; }
.ect_feature-split--reverse .ect_feature-split__media--stage .ect_media-frame { border-radius: 0 var(--ect-radius-main) 0 0; }
.ect_feature-split__media--stage .ect_media-frame__screen { aspect-ratio: 16 / 11; }
@media (max-width: 991px) {
	.ect_feature-split, .ect_feature-split--reverse { grid-template-columns: minmax(0, 1fr); }
	.ect_feature-split--reverse .ect_feature-split__body { order: 0; }
	.ect_feature-split__body { max-width: none; }
}

/* Fragmento de interface (.surfer-3_solution_mock) ------------------------ */
.ect_ui-panel {
	width: 100%;
	padding: 2px;
	border: 1px solid var(--ect-neutral-200);
	border-radius: var(--ect-radius-main);
	background-color: var(--ect-neutral-100);
	color: var(--ect-neutral-black);
	font-size: var(--ect-text-sm);
	text-align: left;
}
.ect_ui-panel__head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; color: var(--ect-black-muted); font-weight: 600; }
.ect_ui-panel__head .ect_icon { color: var(--ect-blue); }
.ect_ui-panel__rows { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ect-neutral-200); border-radius: calc(var(--ect-radius-main) - 2px); background-color: var(--ect-neutral-white); list-style: none; }
.ect_ui-panel__row { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .625rem 1rem; }
.ect_ui-panel__row + .ect_ui-panel__row { border-top: 1px solid var(--ect-neutral-200); }
.ect_ui-panel__icon { display: grid; flex: none; place-items: center; width: 1.75rem; aspect-ratio: 1; border-radius: var(--ect-radius-sm); background-color: var(--ect-neutral-100); color: var(--ect-neutral-700); font-size: .8125rem; }
.ect_ui-panel__label { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ect_ui-panel__meta { color: var(--ect-black-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ect_ui-panel__state { flex: none; color: var(--ect-neutral-300); }
.ect_ui-panel__row.is-ok .ect_ui-panel__state { color: var(--ect-green); }
.ect_ui-panel__row.is-wait .ect_ui-panel__state { color: var(--ect-orange); }
.ect_ui-panel__row.is-wait .ect_ui-panel__state .ect_icon { animation: ect-spin 1.2s linear infinite; }
.ect_ui-panel__row.is-off .ect_ui-panel__label { color: var(--ect-black-muted); }
@keyframes ect-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ect_ui-panel__row.is-wait .ect_ui-panel__state .ect_icon { animation: none; } }

/* Colunas divididas (.surfer-3_solution): fragmento em cima, texto embaixo */
.ect_columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ect-line); }
.ect_columns > * { padding: var(--ect-gap-lg) clamp(1.25rem, 3vw, 2.5rem); }
.ect_columns > * + * { border-left: 1px solid var(--ect-line); }
.ect_feature--visual { align-items: center; gap: var(--ect-gap-sm); text-align: center; }
.ect_feature--visual .ect_feature__visual { width: 100%; max-width: 23rem; margin-bottom: var(--ect-gap-md); }
.ect_feature--visual .ect_feature__text { max-width: 22rem; }
@media (max-width: 991px) {
	.ect_columns { grid-template-columns: minmax(0, 1fr); }
	.ect_columns > * + * { border-left: 0; border-top: 1px solid var(--ect-line); }
}

/* Conversa com IA (exemplo) ----------------------------------------------- */
.ect_chat-mock { margin: 0; }
.ect_chat-mock__window {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ect-gap-md);
	padding: 3.5rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--ect-neutral-800);
	border-radius: var(--ect-radius-section);
	background-color: var(--ect-neutral-1000);
	color: var(--ect-neutral-white);
}
.ect_chat-mock__badge { position: absolute; top: 1rem; right: 1rem; padding: .2rem .6rem; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-pill); color: var(--ect-white-muted); font-size: var(--ect-text-xs); font-weight: 500; }
.ect_chat-mock__msg { display: flex; align-items: flex-start; gap: .75rem; }
.ect_chat-mock__msg--user { flex-direction: row-reverse; }
.ect_chat-mock__msg--user p { max-width: 85%; padding: .75rem 1rem; border-radius: 1rem 1rem .25rem 1rem; background-color: var(--ect-neutral-900); }
.ect_chat-mock__avatar { display: grid; flex: none; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 50%; background-color: var(--ect-neutral-800); font-size: .875rem; }
.ect_chat-mock__avatar--ai { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_chat-mock__answer { display: flex; flex: 1; flex-direction: column; gap: .75rem; min-width: 0; }
.ect_chat-mock__results { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ect_chat-mock__result { display: grid; grid-template-columns: 1fr auto; gap: .125rem .75rem; padding: .875rem 1rem; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-md); background-color: var(--ect-neutral-black); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_chat-mock__result:hover { border-color: var(--ect-orange); }
.ect_chat-mock__result-title { font-weight: 600; }
.ect_chat-mock__result-meta { grid-column: 1; color: var(--ect-white-muted); font-size: var(--ect-text-sm); }
.ect_chat-mock__result-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: .25rem; color: var(--ect-orange); font-size: var(--ect-text-sm); font-weight: 600; }
.ect_chat-mock__note { display: inline-flex; align-items: center; gap: .375rem; color: var(--ect-white-muted); font-size: var(--ect-text-xs); }

/* Card de público (.learn_card com foto) ---------------------------------- */
.ect_audience-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-bg); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_audience-card:hover { border-color: var(--ect-blue); }
.ect_audience-card__media { position: relative; aspect-ratio: 4 / 3; margin: .5rem .5rem 0; overflow: hidden; border-radius: calc(var(--ect-radius-section) - .5rem); }
.ect_audience-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ect-duration-slow) var(--ect-ease-out); }
.ect_audience-card:hover .ect_audience-card__media img { transform: scale(1.04); }
.ect_audience-card__tag { position: absolute; top: .875rem; left: .875rem; display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .75rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); font-size: var(--ect-text-xs); font-weight: 600; }
.ect_audience-card__tag .ect_icon { color: var(--ect-orange); }
.ect_audience-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-sm); padding: var(--ect-gap-md) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem); }
.ect_audience-card__icon { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: var(--ect-radius-md); background-color: var(--ect-blue-light); color: var(--ect-blue); font-size: 1.25rem; }
.ect_audience-card__who { color: var(--ect-fg-muted); }
.ect_audience-card__pain { margin: .25rem 0; color: var(--ect-fg); font-size: var(--ect-text-md); font-weight: 500; line-height: 1.4; text-wrap: balance; }
.ect_audience-card .ect_checklist { margin-block: .25rem var(--ect-gap-sm); }
.ect_audience-card .ect_arrow-link { margin-top: auto; }

/* Checklist sem bandeja (dentro de cards) --------------------------------- */
.ect_checklist--plain { gap: .625rem; overflow: visible; border: 0; border-radius: 0; background: none; }
.ect_checklist--plain .ect_checklist__item { align-items: flex-start; padding: 0; font-weight: 400; }
.ect_checklist--plain .ect_checklist__item + .ect_checklist__item { border-top: 0; }
.ect_checklist--plain .ect_checklist__icon { margin-top: .125rem; background-color: color-mix(in srgb, var(--ect-green), transparent 84%); color: var(--ect-green); }

/* Tabela comparativa ------------------------------------------------------ */
.ect_compare { display: flex; flex-direction: column; gap: var(--ect-gap-md); }
.ect_compare__scroll { overflow-x: auto; scrollbar-width: thin; }
.ect_compare__table { width: 100%; min-width: 50rem; border-collapse: separate; border-spacing: 0; font-size: var(--ect-text-main); }
.ect_compare__table th,
.ect_compare__table td { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ect-line); text-align: center; vertical-align: middle; }
.ect_compare__table thead th { padding-block: 1.5rem; border-bottom-color: var(--ect-fg); color: var(--ect-fg); font-size: var(--ect-text-sm); font-weight: 600; vertical-align: bottom; }
.ect_compare__table tbody th { width: 34%; font-weight: 500; text-align: left; }
.ect_compare__table .ect_compare__corner { color: var(--ect-fg-muted); font-weight: 500; text-align: left; }
.ect_compare__table tbody tr:last-child > * { border-bottom: 0; }
.ect_compare__table tbody tr > * { transition: background-color var(--ect-duration) var(--ect-ease); }
.ect_compare__table tbody tr:hover > * { background-color: color-mix(in srgb, var(--ect-fg), transparent 96%); }
.ect_compare__table .is-highlight,
.ect_compare__table tbody tr:hover > .is-highlight { background-color: var(--ect-navy); color: var(--ect-neutral-white); border-bottom-color: #ffffff1f; }
.ect_compare__table thead .is-highlight { border-radius: var(--ect-radius-main) var(--ect-radius-main) 0 0; color: var(--ect-neutral-white); font-size: var(--ect-text-md); }
.ect_compare__table tbody tr:last-child > .is-highlight { border-radius: 0 0 var(--ect-radius-main) var(--ect-radius-main); }
.ect_compare__yes { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background-color: var(--ect-green); color: var(--ect-neutral-white); font-size: .75rem; }
.is-highlight .ect_compare__yes { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_compare__no { color: color-mix(in srgb, var(--ect-fg), transparent 70%); }
.ect_compare__partial { display: inline-block; padding: .1875rem .625rem; border-radius: var(--ect-radius-pill); background-color: color-mix(in srgb, var(--ect-fg), transparent 92%); color: var(--ect-fg-muted); font-size: var(--ect-text-xs); font-weight: 600; }
.ect_compare__text { color: var(--ect-fg-muted); font-size: var(--ect-text-sm); }
.ect_compare__note { color: var(--ect-fg-muted); font-size: var(--ect-text-sm); }
@media (max-width: 767px) {
	.ect_compare__table tbody th,
	.ect_compare__table .ect_compare__corner { position: sticky; left: 0; z-index: 1; background-color: var(--ect-bg); }
	.ect_compare__table th, .ect_compare__table td { padding: 1rem; }
}

/* Card de plano ----------------------------------------------------------- */
.ect_plan-card { display: flex; flex-direction: column; gap: var(--ect-gap-md); height: 100%; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-surface); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_plan-card:hover { border-color: var(--ect-neutral-700); }
.ect_plan-card--featured { border-color: var(--ect-blue); background-color: var(--ect-blue); color: var(--ect-neutral-white); --ect-fg-muted: #ffffffb3; --ect-line: #ffffff33; }
.ect_plan-card--featured:hover { border-color: var(--ect-blue); }
.ect_plan-card__head { display: flex; flex-direction: column; gap: .625rem; padding-bottom: var(--ect-gap-md); border-bottom: 1px solid var(--ect-line); }
.ect_plan-card__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ect_plan-card__motto { font-size: var(--ect-text-md); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.ect_plan-card__goal,
.ect_plan-card__note { color: var(--ect-fg-muted); }
.ect_plan-card__note { font-size: var(--ect-text-sm); font-weight: 600; }
.ect_plan-card__price { font-size: var(--ect-display-xs); font-weight: 600; }
.ect_plan-card--featured .ect_checklist--plain .ect_checklist__icon { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_plan-card__actions { margin-top: auto; padding-top: var(--ect-gap-sm); }

/* Chamada final ----------------------------------------------------------- */
.ect_cta-banner { display: flex; flex-direction: column; align-items: center; gap: var(--ect-gap-xl); overflow: hidden; padding: clamp(4rem, 9vw, 8rem) var(--ect-gap-md) 0; border-radius: var(--ect-radius-section); background-color: var(--ect-bg); color: var(--ect-fg); }
.ect_cta-banner:not(.ect_cta-banner--media) { padding-bottom: clamp(4rem, 9vw, 8rem); }
.ect_cta-banner__body { display: flex; flex-direction: column; align-items: center; gap: var(--ect-gap-md); }
.ect_cta-banner__points { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 0; padding: 0; color: var(--ect-fg-muted); font-size: var(--ect-text-sm); list-style: none; }
.ect_cta-banner__points li { display: inline-flex; align-items: center; gap: .375rem; }
.ect_cta-banner__points .ect_icon { color: var(--ect-orange); }
.ect_cta-banner__media { width: min(100%, 68rem); margin-bottom: -1px; }
.ect_cta-banner__media .ect_media-frame { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Dor (.surfer-3_era-problem-card): foto em cima, frase do cliente embaixo */
.ect_pain-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-bg); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_pain-card:hover { border-color: var(--ect-neutral-700); }
.ect_pain-card__media { position: relative; aspect-ratio: 4 / 3; margin: .5rem .5rem 0; overflow: hidden; border-radius: calc(var(--ect-radius-section) - .5rem); }
.ect_pain-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform var(--ect-duration-slow) var(--ect-ease-out), filter var(--ect-duration-slow) var(--ect-ease-out); }
.ect_pain-card:hover .ect_pain-card__media img { transform: scale(1.04); filter: saturate(1); }
.ect_pain-card__tag { position: absolute; left: .875rem; bottom: .875rem; display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: 50%; background-color: var(--ect-orange); color: var(--ect-neutral-black); font-size: 1rem; }
.ect_pain-card__icon { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; margin: var(--ect-gap-md) var(--ect-gap-md) 0; border-radius: var(--ect-radius-md); background-color: color-mix(in srgb, var(--ect-orange), transparent 85%); color: var(--ect-orange); font-size: 1.25rem; }
.ect_pain-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--ect-gap-sm); padding: var(--ect-gap-md) clamp(1.5rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2rem); }
.ect_pain-card__quote { font-size: var(--ect-display-xs); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.ect_pain-card__text { color: var(--ect-fg-muted); }
.ect_pain-card__fix { display: flex; align-items: flex-start; gap: .5rem; margin-top: auto; padding-top: var(--ect-gap-md); border-top: 1px solid var(--ect-line); font-size: var(--ect-text-sm); font-weight: 500; }
.ect_pain-card__fix .ect_icon { margin-top: .2rem; color: var(--ect-green); }

/* Passos (como começar) --------------------------------------------------- */
.ect_steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: ect-step; }
.ect_steps__item { position: relative; display: flex; flex-direction: column; gap: var(--ect-gap-sm); padding: var(--ect-gap-lg) clamp(1.25rem, 3vw, 2.5rem) 0 0; border-top: 1px solid var(--ect-line); counter-increment: ect-step; }
.ect_steps__item + .ect_steps__item { padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.ect_steps__item::before { content: counter(ect-step); display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; margin-bottom: var(--ect-gap-sm); border-radius: 50%; background-color: var(--ect-surface); color: var(--ect-fg); font-size: var(--ect-text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.ect_steps__item:first-child::before { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_steps__item::after { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 2px; background-color: var(--ect-orange); }
.ect_steps__item + .ect_steps__item::after { left: clamp(1.25rem, 3vw, 2.5rem); background-color: var(--ect-fg); }
.ect_steps__text { color: var(--ect-fg-muted); max-width: 24rem; }
@media (max-width: 767px) { .ect_steps__item + .ect_steps__item { padding-left: 0; } .ect_steps__item + .ect_steps__item::after { left: 0; } }

/* Número em campo de cor (.surfer-3_studies-stat.is-hero) ----------------- */
.ect_stat-card--fill { justify-content: space-between; min-height: 25rem; border-color: var(--ect-green); background-color: var(--ect-green); color: var(--ect-neutral-white); }
.ect_stat-card--fill .ect_stat-card__label { color: #ffffffd9; }
.ect_stat-card--fill .ect_stat-card__number { font-size: clamp(5rem, 24cqi, 11rem); }
.ect_stage--right .ect_stage__frame { width: min(60%, 58rem); margin-right: clamp(1.5rem, 4vw, 4rem); margin-left: auto; }
@media (max-width: 767px) { .ect_stage--right .ect_stage__frame { width: 88%; margin-inline: auto; } }

/* Ícone dentro de um disco: o <i> vira o próprio disco, então a altura
   precisa acompanhar a largura (.ect_icon define height: 1em). */
.ect_trust-strip__icon,
.ect_compare__yes { height: auto; line-height: 1; }

/* Avatares sobrepostos ---------------------------------------------------- */
.ect_avatar-stack { display: inline-flex; align-items: center; }
.ect_avatar-stack__img,
.ect_avatar-stack__more { width: 2.5rem; height: 2.5rem; margin-left: -.625rem; border: 2px solid var(--ect-bg); border-radius: 50%; object-fit: cover; }
.ect_avatar-stack__img:first-child { margin-left: 0; }
.ect_avatar-stack__more { display: grid; place-items: center; background-color: var(--ect-orange); color: var(--ect-neutral-black); font-size: var(--ect-text-xs); font-weight: 700; }

/* Faixa de logos (marquee) ------------------------------------------------ */
.ect_logo-strip { display: flex; flex-direction: column; gap: var(--ect-gap-md); }
.ect_logo-strip__label { color: var(--ect-fg-muted); font-size: var(--ect-text-sm); text-align: center; }
.ect_logo-strip__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ect_logo-strip__track { display: flex; width: max-content; animation: ect-marquee 40s linear infinite; }
.ect_logo-strip:hover .ect_logo-strip__track { animation-play-state: paused; }
.ect_logo-strip__list { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); margin: 0; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; }
.ect_logo-strip__item { display: inline-flex; align-items: center; gap: .5rem; color: color-mix(in srgb, var(--ect-fg), transparent 45%); font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; transition: color var(--ect-duration) var(--ect-ease); }
.ect_logo-strip__item:hover { color: var(--ect-fg); }
.ect_logo-strip__item .ect_icon { font-size: 1.125rem; }
.ect_logo-strip__item img { height: 2rem; width: auto; opacity: .6; filter: grayscale(1); }
@keyframes ect-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ect_logo-strip__track { animation: none; } }

/* WhatsApp: enxurrada de mensagens (3 colunas) --------------------------- */
.ect_wa-storm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-surface); }
.ect_wa-storm__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-md); }
.ect_wa-storm__timer { display: flex; flex-direction: column; gap: .5rem; }
.ect_wa-storm__timer-label { color: var(--ect-fg-muted); font-size: var(--ect-text-sm); }
.ect_wa-storm__clock { color: #ff6b5e; font-size: clamp(2.75rem, 4.6vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ect_wa-storm__text { color: var(--ect-fg-muted); font-size: var(--ect-text-md); }

/* Coluna 3: o que o dia custou (número + título curto, descrição embaixo) */
.ect_wa-storm__counters { display: flex; flex-direction: column; gap: clamp(1.5rem, 2.5vw, 2.5rem); margin: 0; }
.ect_wa-storm__counter { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .5rem 1.25rem; }
.ect_wa-storm__counter + .ect_wa-storm__counter { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); border-top: 1px solid var(--ect-line); }
.ect_wa-storm__counter-icon { grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--ect-radius-md); background-color: color-mix(in srgb, #ff6b5e, transparent 85%); color: #ff6b5e; font-size: 1.25rem; }
.ect_wa-storm__counter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; }
.ect_wa-storm__counter-value { color: var(--ect-fg); font-size: var(--ect-display-sm); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ect_wa-storm__counter-title { color: var(--ect-fg); font-size: var(--ect-text-sm); font-weight: 600; }
.ect_wa-storm__counter-text { margin: 0; color: var(--ect-fg-muted); font-size: var(--ect-text-sm); line-height: 1.5; }

/* Coluna 2: tela inicial do WhatsApp (clara) */
.ect_wa-storm__phone { position: relative; --wa-red: #f0343c; --wa-green: #1daa61; --wa-ink: #111b21; --wa-muted: #667781; --wa-line: #e9edef; display: flex; flex-direction: column; width: 100%; height: 38rem; overflow: hidden; border: 8px solid #1b1b1f; border-radius: 2.75rem; background-color: #fff; color: var(--wa-ink); font-size: .875rem; box-shadow: 0 2rem 4rem #00000080; }
.ect_wa-storm__status { display: flex; justify-content: space-between; padding: .75rem 1.25rem .25rem; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ect_wa-storm__status-icons { display: inline-flex; gap: .25rem; font-size: .6875rem; }
.ect_wa-storm__appbar { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.125rem; }
.ect_wa-storm__appbar strong { color: var(--wa-green); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.ect_wa-storm__appbar span { display: inline-flex; gap: 1rem; font-size: 1.125rem; }
.ect_wa-storm__search { display: flex; align-items: center; gap: .625rem; margin: .25rem .875rem .5rem; padding: .625rem 1rem; border-radius: var(--ect-radius-pill); background-color: #f0f2f5; color: var(--wa-muted); }
.ect_wa-storm__chats { position: relative; flex: 1; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.ect_wa-storm__chat { display: flex; align-items: center; gap: .75rem; height: 4.5rem; padding: 0 .875rem; background-color: #fff; }
.ect_wa-storm__chats.is-live .ect_wa-storm__chat { position: absolute; inset: 0 0 auto; will-change: transform; }
.ect_wa-storm__chat.is-new { background-color: #f0faf4; }
.ect_wa-storm__avatar { flex: none; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background-color: #dfe5e7; }
.ect_wa-storm__chat-body { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; padding-block: .75rem; border-bottom: 1px solid var(--wa-line); }
.ect_wa-storm__chat-top,
.ect_wa-storm__chat-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ect_wa-storm__chat-top strong { overflow: hidden; font-size: .9375rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ect_wa-storm__chat-top time { flex: none; color: var(--wa-green); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ect_wa-storm__preview { overflow: hidden; color: var(--wa-muted); white-space: nowrap; text-overflow: ellipsis; }
.ect_wa-storm__badge { display: grid; flex: none; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .375rem; border-radius: var(--ect-radius-pill); background-color: var(--wa-green); color: #fff; font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ect_wa-storm__tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: .5rem .25rem .875rem; border-top: 1px solid var(--wa-line); background-color: #fff; color: var(--wa-ink); font-size: .625rem; font-weight: 600; text-align: center; }
.ect_wa-storm__tabs > span { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.ect_wa-storm__tab-icon { position: relative; display: grid; place-items: center; width: 3.25rem; height: 1.875rem; border-radius: var(--ect-radius-pill); font-size: 1rem; }
.ect_wa-storm__tabs .is-active .ect_wa-storm__tab-icon { background-color: #d8fdd2; }
.ect_wa-storm__tab-icon b { position: absolute; top: -.375rem; right: -.125rem; min-width: 1.125rem; padding: .0625rem .3125rem; border-radius: var(--ect-radius-pill); background-color: var(--wa-red); color: #fff; font-size: .625rem; font-variant-numeric: tabular-nums; }
.ect_wa-storm__tab-icon b.is-empty { visibility: hidden; }
.ect_wa-storm__dot { position: absolute; top: .125rem; right: .75rem; width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--wa-red); }
.ect_wa-storm__status-left { display: inline-flex; align-items: center; gap: .375rem; }
.ect_wa-storm__missed-icon { color: var(--wa-red); font-size: .6875rem; opacity: 0; }
.ect_wa-storm__missed-icon.is-on { opacity: 1; }
.ect_wa-storm__badge.is-empty { visibility: hidden; }
.ect_wa-storm__preview.is-missed { color: var(--wa-red); }
.ect_wa-storm__call { position: absolute; top: .5rem; left: .5rem; right: .5rem; z-index: 5; display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .875rem; border-radius: 1.5rem; background-color: #eef1f3f2; color: var(--wa-ink); box-shadow: 0 .75rem 2rem #0000004d; transform: translateY(-130%); }
.ect_wa-storm__call-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; background-color: #dfe5e7; }
.ect_wa-storm__call-info { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.ect_wa-storm__call-info span { color: var(--wa-muted); font-size: .8125rem; }
.ect_wa-storm__call-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ect_wa-storm__call-btn { display: grid; place-items: center; height: 2.25rem; border-radius: var(--ect-radius-pill); color: #fff; font-size: .8125rem; font-weight: 600; }
.ect_wa-storm__call-btn--no { background-color: #d93a30; }
.ect_wa-storm__call-btn--yes { background-color: #1f8a3e; }
@media (max-width: 1199px) {
	.ect_wa-storm { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
	.ect_wa-storm__counters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ect-gap-lg) var(--ect-gap-xl); }
	.ect_wa-storm__counter + .ect_wa-storm__counter { padding-top: 0; border-top: 0; }
}
@media (max-width: 767px) {
	.ect_wa-storm { grid-template-columns: minmax(0, 1fr); }
	.ect_wa-storm__phone { justify-self: center; max-width: 22rem; height: 34rem; }
	.ect_wa-storm__counters { grid-template-columns: minmax(0, 1fr); }
}

/* Busca numa IA (exemplo animado) ---------------------------------------- */
.ect_ai-search { margin: 0; }
.ect_ai-search__window { display: flex; flex-direction: column; min-height: 40rem; overflow: hidden; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-section); background-color: var(--ect-neutral-1000); color: var(--ect-neutral-white); }
.ect_ai-search__top { display: flex; align-items: center; gap: .875rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--ect-neutral-900); }
.ect_ai-search__dots { display: flex; gap: .375rem; }
.ect_ai-search__dots i { width: .5625rem; aspect-ratio: 1; border-radius: 50%; background-color: var(--ect-neutral-800); }
.ect_ai-search__engine { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--ect-text-sm); font-weight: 600; }
.ect_ai-search__engine .ect_icon { color: var(--ect-orange); }
.ect_ai-search__badge { margin-left: auto; padding: .1875rem .625rem; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-pill); color: var(--ect-white-muted); font-size: var(--ect-text-xs); }
.ect_ai-search__thread { display: flex; flex: 1; flex-direction: column; gap: var(--ect-gap-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.ect_ai-search__q { display: flex; align-items: flex-start; justify-content: flex-end; gap: .75rem; }
.ect_ai-search__q p { max-width: 80%; padding: .875rem 1.125rem; border-radius: 1.25rem 1.25rem .375rem 1.25rem; background-color: var(--ect-neutral-900); font-size: var(--ect-text-md); }
.ect_ai-search__avatar { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: var(--ect-neutral-800); font-size: .875rem; }
.ect_ai-search__avatar--ai { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_ai-search__a { display: flex; align-items: flex-start; gap: .875rem; }
.ect_ai-search__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: var(--ect-gap-md); min-width: 0; }
.ect_ai-search__thinking { position: absolute; top: .25rem; left: 0; display: inline-flex; align-items: center; gap: .5rem; color: var(--ect-white-muted); opacity: 0; }
.ect_ai-search__ellipsis { display: inline-flex; gap: .25rem; }
.ect_ai-search__ellipsis i { width: .375rem; aspect-ratio: 1; border-radius: 50%; background-color: currentColor; animation: ect-blink 1.2s infinite both; }
.ect_ai-search__ellipsis i:nth-child(2) { animation-delay: .2s; }
.ect_ai-search__ellipsis i:nth-child(3) { animation-delay: .4s; }
@keyframes ect-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.ect_ai-search__answer { font-size: var(--ect-text-md); line-height: 1.6; }
.ect_ai-search__results { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.ect_ai-search__result { display: flex; align-items: center; justify-content: space-between; gap: var(--ect-gap-md); padding: 1rem 1.25rem; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-main); background-color: var(--ect-neutral-black); transition: border-color var(--ect-duration) var(--ect-ease), transform var(--ect-duration) var(--ect-ease); }
.ect_ai-search__result:hover { transform: translateY(-2px); border-color: var(--ect-neutral-700); }
.ect_ai-search__result.is-cited { border-color: var(--ect-orange); box-shadow: 0 0 0 1px var(--ect-orange) inset; }
.ect_ai-search__result-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ect_ai-search__result-title { font-weight: 600; }
.ect_ai-search__result-meta { color: var(--ect-white-muted); font-size: var(--ect-text-sm); }
.ect_ai-search__source { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; margin-top: .25rem; padding: .125rem .5rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-900); color: var(--ect-white-muted); font-size: var(--ect-text-xs); }
.ect_ai-search__cta { display: inline-flex; flex: none; align-items: center; gap: .25rem; color: var(--ect-orange); font-size: var(--ect-text-sm); font-weight: 600; }
.ect_ai-search__note { display: inline-flex; align-items: center; gap: .375rem; color: var(--ect-white-muted); font-size: var(--ect-text-xs); }
.ect_ai-search__input { display: flex; align-items: center; gap: .75rem; margin: 0 clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem); padding: .5rem .5rem .5rem 1.25rem; border: 1px solid var(--ect-neutral-800); border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-900); }
.ect_ai-search__field { display: flex; flex: 1; align-items: center; min-width: 0; height: 1.5rem; overflow: hidden; color: var(--ect-white-muted); white-space: nowrap; }
.ect_ai-search__field.is-typing { color: var(--ect-neutral-white); }
.ect_ai-search__caret { width: 2px; height: 1.125rem; margin-left: 2px; background-color: var(--ect-orange); opacity: 0; }
.ect_ai-search__field.is-typing .ect_ai-search__caret { opacity: 1; animation: ect-caret 1s steps(1) infinite; }
@keyframes ect-caret { 50% { opacity: 0; } }
.ect_ai-search__send { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); }
@media (max-width: 767px) { .ect_ai-search__window { min-height: 44rem; } .ect_ai-search__result { flex-direction: column; align-items: flex-start; } }

/* Gráfico de tendência no card de número --------------------------------- */
.ect_stat-card__chart { position: absolute; inset: auto 0 0; width: 100%; height: 55%; pointer-events: none; }
.ect_stat-card__line { fill: none; stroke: #ffffffd9; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ect_stat-card__area { fill: #ffffff1a; }
.ect_stat-card--fill > :not(.ect_stat-card__chart):not(.ect_stat-card__corner) { position: relative; z-index: 1; }

/* Texto de destaque em laranja (ex.: segunda frase de um título) */
.ect_text--accent { color: var(--ect-orange); }

/* Ícones em círculos sobrepostos ----------------------------------------- */
.ect_icon-stack { display: inline-flex; align-items: center; gap: .75rem; font-size: var(--ect-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.ect_icon-stack__items { display: inline-flex; }
.ect_icon-stack__item { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: -.5rem; border: 2px solid var(--ect-bg); border-radius: 50%; background-color: var(--ect-neutral-800); color: var(--ect-neutral-white); font-size: 1rem; transition: transform var(--ect-duration) var(--ect-ease-out); }
.ect_icon-stack__item:first-child { margin-left: 0; }
.ect_icon-stack:hover .ect_icon-stack__item { transform: translateY(-2px); }
.ect_icon-stack:hover .ect_icon-stack__item:nth-child(2) { transition-delay: 40ms; }
.ect_icon-stack:hover .ect_icon-stack__item:nth-child(3) { transition-delay: 80ms; }
.ect_icon-stack:hover .ect_icon-stack__item:nth-child(4) { transition-delay: 120ms; }
.ect_ai-search__engine .ect-icon-brand { color: var(--ect-neutral-white); }
.ect_ai-search__avatar--ai { background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); }

/* Planos em colunas agrupadas (modelo dos planos do surfer.ai) ------------ */
.ect_plans { display: flex; align-items: stretch; gap: .75rem; }
.ect_plans__group { display: flex; flex: var(--ect-plans, 1) 1 0; flex-direction: column; min-width: 0; }
.ect_plans__tab { position: relative; z-index: 0; margin: 0 0 -1rem; padding: .75rem 1rem 1.75rem; border-radius: var(--ect-radius-main) var(--ect-radius-main) 0 0; font-size: var(--ect-text-sm); font-weight: 600; text-align: center; }
.ect_plans__group--orange .ect_plans__tab { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
.ect_plans__group--blue .ect_plans__tab { background-color: var(--ect-blue); color: var(--ect-neutral-white); }
.ect_plans__panel { position: relative; z-index: 1; display: grid; flex: 1; grid-template-columns: repeat(var(--ect-plans, 1), minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ect-neutral-200); border-radius: var(--ect-radius-main); background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); }
.ect_plans__plan { display: flex; flex-direction: column; gap: var(--ect-gap-md); padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.ect_plans__plan + .ect_plans__plan { border-left: 1px solid var(--ect-neutral-200); }
.ect_plans__plan.is-featured { background-color: var(--ect-blue-light); }
.ect_plans__head { display: flex; flex-direction: column; gap: .5rem; }
.ect_plans__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ect_plans__name { font-size: var(--ect-display-xs); font-weight: 600; line-height: 1.2; }
.ect_plans__badge { padding: .1875rem .625rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-orange); color: var(--ect-neutral-black); font-size: var(--ect-text-xs); font-weight: 700; }
.ect_plans__price { font-size: var(--ect-text-md); font-weight: 500; }
.ect_plans__price strong { font-weight: 500; }
.ect_plans__price span { color: var(--ect-black-muted); font-weight: 400; }
/* Chave "Plano anual" + economia (modelo do surfer.ai); sem preço anual, só o texto na mesma altura */
.ect_plans__billing { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 1.75rem; }
.ect_plans__toggle { display: inline-flex; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; color: var(--ect-neutral-black); font: inherit; font-size: var(--ect-text-sm); cursor: pointer; }
.ect_plans__switch { position: relative; flex: none; width: 2rem; height: 1.125rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-300); transition: background-color var(--ect-duration) var(--ect-ease); }
.ect_plans__switch::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: .75rem; height: .75rem; border-radius: 50%; background-color: var(--ect-neutral-white); transition: transform var(--ect-duration) var(--ect-ease-out); }
.ect_plans__toggle[aria-checked="true"] .ect_plans__switch { background-color: var(--ect-blue); }
.ect_plans__toggle[aria-checked="true"] .ect_plans__switch::after { transform: translateX(.875rem); }
.ect_plans__toggle:focus-visible { outline: 2px solid var(--ect-blue); outline-offset: 3px; border-radius: var(--ect-radius-pill); }
.ect_plans__save { padding: .125rem .5rem; border: 1px solid var(--ect-neutral-200); border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); font-size: var(--ect-text-xs); font-weight: 500; }
.ect_plans__text { min-height: calc(1.55em * 2); color: var(--ect-black-muted); font-size: var(--ect-text-sm); line-height: 1.55; }
.ect_plans__action { padding-bottom: var(--ect-gap-md); border-bottom: 1px solid var(--ect-neutral-200); }
.ect_plans__features { display: flex; flex-direction: column; gap: .875rem; }
.ect_plans__note { font-size: var(--ect-text-sm); font-weight: 600; }
.ect_plans__list { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; font-size: var(--ect-text-sm); }
.ect_plans__list li { display: flex; align-items: flex-start; gap: .625rem; }
.ect_plans__list .ect_icon { width: auto; height: auto; margin-top: .1875rem; color: var(--ect-green); font-size: .75rem; }
.ect_plans__plan.is-featured .ect_plans__list .ect_icon { color: var(--ect-blue); }
@media (max-width: 991px) {
	.ect_plans { flex-direction: column; gap: var(--ect-gap-lg); }
	.ect_plans__panel { grid-template-columns: minmax(0, 1fr); }
	.ect_plans__plan + .ect_plans__plan { border-left: 0; border-top: 1px solid var(--ect-neutral-200); }
}

/* Blog (lista de posts) — modelo do blog do surfer.ai --------------------- */
.ect_blog-hero { padding-bottom: clamp(6rem, 10vw, 9rem); }
.ect_blog-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--ect-gap-lg); }
.ect_blog-search { display: flex; align-items: center; gap: .625rem; width: 100%; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-pill); background-color: var(--ect-bg); color: var(--ect-black-muted); transition: border-color var(--ect-duration) var(--ect-ease); }
.ect_blog-search:focus-within { border-color: var(--ect-fg); }
.ect_blog-search input[type="search"] { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ect-fg); font: inherit; font-size: var(--ect-text-sm); outline: none; }
.ect_blog-search input::placeholder { color: var(--ect-black-muted); }
.ect_blog-panel { position: relative; margin-top: clamp(-4rem, -6vw, -3rem); padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--ect-pad-md); border-radius: var(--ect-radius-section) var(--ect-radius-section) 0 0; background-color: var(--ect-bg); }
.ect_blog-cats ul,
.ect_blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ect_blog-cats__link { display: inline-block; padding: .4375rem .875rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-pill); color: var(--ect-fg); font-size: var(--ect-text-sm); font-weight: 500; text-decoration: none; transition: border-color var(--ect-duration) var(--ect-ease), background-color var(--ect-duration) var(--ect-ease); }
.ect_blog-cats__link:hover { border-color: var(--ect-fg); }
.ect_blog-cats__link.is-active { border-color: var(--ect-neutral-black); background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); }
.ect_blog-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ect-gap-sm); padding: var(--ect-gap-lg); border: 1px dashed var(--ect-line); border-radius: var(--ect-radius-section); }

/* Card de post: raio e respiro do restante do DS; variante em destaque */
.ect_post-card { border-color: var(--ect-line); border-radius: var(--ect-radius-section); }
.ect_post-card:hover { border-color: var(--ect-neutral-300); }
.ect_post-card__media { margin: .5rem .5rem 0; border-radius: calc(var(--ect-radius-section) - .5rem); }
.ect_post-card:hover .ect_post-card__media img { transform: scale(1.04); }
.ect_post-card__body { gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; }
.ect_post-card__link { color: inherit; text-decoration: none; }
.ect_post-card:hover .ect_post-card__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ect_post-card__meta { margin-top: auto; padding-top: .25rem; }
.ect_post-card--featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ect_post-card--featured .ect_post-card__media { aspect-ratio: auto; min-height: 16rem; max-height: 20rem; margin: .5rem 0 .5rem .5rem; }
.ect_post-card--featured .ect_post-card__body { justify-content: center; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 2.25rem); }
.ect_post-card--featured .ect_post-card__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.ect_post-card--featured .ect_post-card__meta { margin-top: .25rem; }
@media (max-width: 991px) {
	.ect_post-card--featured { grid-template-columns: minmax(0, 1fr); }
	.ect_post-card--featured .ect_post-card__media { min-height: 0; max-height: none; aspect-ratio: 16 / 9; margin: .5rem .5rem 0; }
}
@media (max-width: 599px) {
	.ect_post-card--featured .ect_post-card__media { aspect-ratio: 2 / 1; }
	.ect_post-card--featured .ect_post-card__body { padding: 1.125rem 1.25rem 1.25rem; }
	.ect_post-card--featured .ect_post-card__title { font-size: 1.25rem; }
	.ect_post-card--featured .ect_post-card__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* FAQ padronizado: componente, bloco de FAQ do Yoast e bloco Detalhes ------
   Mesma linguagem nos três: pergunta em 600, ícone num círculo que gira e
   fica laranja quando aberto, resposta em tom suave e divisória fina. */
.ect_faq__question { padding-block: 1.375rem; font-size: 1.125rem; transition: color var(--ect-duration) var(--ect-ease); }
.ect_faq__question:hover { color: var(--ect-blue); }
.ect_faq__toggle { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: var(--ect-surface); color: var(--ect-fg); transition: background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease), transform var(--ect-duration) var(--ect-ease); }
.ect_faq__question:hover .ect_faq__toggle { background-color: var(--ect-blue-light); color: var(--ect-blue); }
.ect_faq__item[open] .ect_faq__toggle { background-color: var(--ect-orange); color: var(--ect-neutral-black); transform: rotate(45deg); }
.ect_faq__item[open] .ect_faq__question .ect_icon { transform: none; }
.ect_faq__answer { line-height: 1.7; }
.ect_faq__answer > * + * { margin-top: .75em; }
.ect_theme--dark .ect_faq__toggle { background-color: var(--ect-neutral-900); color: var(--ect-neutral-white); }

/* Bloco "FAQ" do Yoast (wp-block-yoast-faq-block): conteúdo estático, mesmo visual */
.wp-block-yoast-faq-block { margin-block: 2.5em; border-top: 1px solid var(--ect-line); }
.wp-block-yoast-faq-block .schema-faq-section { padding-block: 1.375rem; border-bottom: 1px solid var(--ect-line); }
.wp-block-yoast-faq-block .schema-faq-question { position: relative; display: block; padding-left: 3rem; color: var(--ect-fg); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.wp-block-yoast-faq-block .schema-faq-question::before { content: "?"; position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: var(--ect-orange); color: var(--ect-neutral-black); font-size: 1rem; font-weight: 700; transform: translateY(-50%); }
.wp-block-yoast-faq-block .schema-faq-answer { margin: .75rem 0 0; padding-left: 3rem; color: var(--ect-black-muted); line-height: 1.7; }
.wp-block-yoast-faq-block .schema-faq-answer img { margin-top: .75rem; border-radius: var(--ect-radius-main); }

/* Bloco "Detalhes" (core/details) no conteúdo */
.ect_prose .wp-block-details { position: relative; margin-top: 0; padding-block: 1.25rem; border-bottom: 1px solid var(--ect-line); }
.ect_prose .wp-block-details summary { position: relative; padding-right: 3rem; color: var(--ect-fg); font-size: 1.125rem; font-weight: 600; line-height: 1.3; list-style: none; cursor: pointer; }
.ect_prose .wp-block-details summary::-webkit-details-marker { display: none; }
.ect_prose .wp-block-details summary::after { content: "+"; position: absolute; top: 50%; right: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: var(--ect-surface); color: var(--ect-fg); font-size: 1.25rem; font-weight: 400; transform: translateY(-50%); transition: transform var(--ect-duration) var(--ect-ease), background-color var(--ect-duration) var(--ect-ease); }
.ect_prose .wp-block-details[open] summary::after { background-color: var(--ect-orange); color: var(--ect-neutral-black); transform: translateY(-50%) rotate(45deg); }
.ect_prose .wp-block-details > :not(summary) { margin-top: .75rem; padding-right: 3rem; color: var(--ect-black-muted); }

/* Linha de filtros da lista: 2 colunas, quantidade | [busca] [Filtros] alinhados à direita */
.ect_blog-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.ect_blog-filters__count { color: var(--ect-black-muted); font-size: var(--ect-text-sm); }
.ect_blog-filters__count strong { color: var(--ect-fg); font-weight: 600; }
.ect_blog-filters__actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; min-width: 0; }
.ect_blog-filters__actions .ect_blog-search { flex: 0 1 24rem; width: auto; min-width: 0; }
.ect_blog-filters__open { flex: none; }
.ect_blog-filters__open { display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-pill); background-color: var(--ect-bg); color: var(--ect-fg); font-size: var(--ect-text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--ect-duration) var(--ect-ease), background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease); }
.ect_blog-filters__open:hover { border-color: var(--ect-neutral-black); background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); }
@media (max-width: 767px) {
	.ect_blog-filters { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.ect_blog-filters__actions .ect_blog-search { flex: 1 1 0; }
}

/* Painel lateral (off-canvas) à direita */
.ect_offcanvas { position: fixed; inset: 0; z-index: 900; }
.ect_offcanvas__overlay { position: absolute; inset: 0; background: #000000b3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ect_offcanvas__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(100%, 26rem); padding-top: var(--ect-adminbar); background-color: var(--ect-bg); color: var(--ect-fg); box-shadow: -24px 0 48px #0000002e; outline: none; }
.ect_offcanvas__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ect-line); }
.ect_offcanvas__close { display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border-radius: 50%; background-color: var(--ect-neutral-100); color: var(--ect-fg); cursor: pointer; }
.ect_offcanvas__close:hover { background-color: var(--ect-neutral-black); color: var(--ect-neutral-white); }
.ect_offcanvas__body { display: flex; flex: 1; flex-direction: column; gap: 2rem; min-height: 0; padding: 1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.ect_offcanvas__group { display: flex; flex-direction: column; gap: .75rem; }
.ect_offcanvas__label { color: var(--ect-black-muted); font-size: var(--ect-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ect_offcanvas__list { margin: 0; padding: 0; list-style: none; }
.ect_offcanvas__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ect-line); color: var(--ect-fg); font-weight: 500; text-decoration: none; transition: color var(--ect-duration) var(--ect-ease); }
.ect_offcanvas__list a:hover,
.ect_offcanvas__list a.is-active { color: var(--ect-blue); }
.ect_offcanvas__count { min-width: 1.75rem; padding: .125rem .5rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-100); color: var(--ect-black-muted); font-size: var(--ect-text-xs); text-align: center; }
.ect_offcanvas-enter,
.ect_offcanvas-leave { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.ect_offcanvas-from { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) {
	.ect_offcanvas-enter, .ect_offcanvas-leave { transition: none; }
}

/* Seção de demonstração (componente demo-cta) */
.ect_demo-cta { padding-top: var(--ect-pad-md); }
.ect_demo-cta .ect_cta-banner__actions,
.ect_demo-cta .ect_section-head__actions { justify-content: center; }


/* Faixa de perguntas frequentes (ect_faq_section, variante band) ----------
   Fundo neutro claro para separar do conteúdo; uma coluna de até 1240px:
   eyebrow, título e descrição centralizados em cima, perguntas embaixo. */
.ect_faq-band { background-color: var(--ect-neutral-100); --ect-surface: var(--ect-neutral-white); }
.ect_faq-band__inner { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); max-width: 1240px; }

/* Comparativo de planos (plan-compare) --------------------------------------
   Modelo da tabela do surfer.ai: só as colunas dos planos, o rótulo do recurso
   dentro de cada célula (✓ ou ×), colunas com fundo (`is-orange` / `is-blue`) e
   cabeçalho fixo abaixo da barra ao rolar. No celular, um plano por vez. */
.ect_plan-compare { display: flex; flex-direction: column; gap: var(--ect-gap-md); }
.ect_plan-compare__scroll { overflow: clip; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); background-color: var(--ect-neutral-white); }
.ect_plan-compare__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--ect-neutral-black); font-size: var(--ect-text-sm); }
.ect_plan-compare__table th,
.ect_plan-compare__table td { padding: .875rem 1.25rem; border-bottom: 1px solid var(--ect-line); text-align: left; vertical-align: top; }
.ect_plan-compare__table td + td,
.ect_plan-compare__table thead th + th { border-left: 1px solid var(--ect-line); }
/* Cabeçalho dos planos */
.ect_plan-compare__table thead th { position: sticky; top: calc(var(--ect-header-h, 5.5rem) + var(--ect-adminbar, 0px)); z-index: 2; padding: 1.5rem 1.25rem 1.25rem; background-color: var(--ect-neutral-white); font-weight: 400; vertical-align: top; }
.ect_plan-compare__table thead th.is-orange { background-color: #fff4e6; }
.ect_plan-compare__table thead th.is-blue { background-color: var(--ect-blue-light); }
.ect_plan-compare__name { display: block; font-size: var(--ect-display-xs); font-weight: 600; line-height: 1.2; }
.ect_plan-compare__price { display: block; margin: .375rem 0 1rem; }
.ect_plan-compare__price strong { font-size: var(--ect-text-md); font-weight: 500; }
.ect_plan-compare__price span { color: var(--ect-black-muted); font-size: var(--ect-text-md); }
/* Títulos de grupo (e "Para quem é") */
.ect_plan-compare__group-head th { padding-top: 1.75rem; padding-bottom: 1rem; font-size: var(--ect-text-md); font-weight: 600; }
.ect_plan-compare__group-head th > * { vertical-align: middle; }
.ect_plan-compare__group-head .ect_icon { margin-right: .5rem; }
.ect_plan-compare__why td { color: var(--ect-black-muted); line-height: 1.6; }
/* Células: ícone + rótulo; não incluso fica apagado */
.ect_plan-compare__table tbody td.is-on,
.ect_plan-compare__table tbody td.is-off { padding-left: 2.75rem; text-indent: -1.5rem; }
.ect_plan-compare__mark { width: 1rem; margin-right: .5rem; text-indent: 0; font-size: .875rem; }
.is-on .ect_plan-compare__mark { color: var(--ect-neutral-black); }
.is-off { color: color-mix(in srgb, var(--ect-neutral-black), transparent 62%); }
.is-off .ect_plan-compare__mark { font-size: .75rem; }
.ect_plan-compare__table tbody td strong { font-weight: 600; }
.ect_plan-compare__table tbody tr:last-child > * { border-bottom: 0; }
.ect_plan-compare__note { color: var(--ect-black-muted); font-size: var(--ect-text-xs); }
/* Cabeçalho do bloco: título com a chave "Mostrar só o que muda" embaixo, à
   esquerda; texto de apoio à direita; divisória (modelo do surfer.ai) */
.ect_plan-compare__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ect-line); }
.ect_plan-compare__heading { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.ect_plan-compare__aside { color: var(--ect-black-muted); font-size: var(--ect-text-sm); }
.ect_plan-compare__aside a { color: var(--ect-fg); font-weight: 600; text-decoration: none; }
.ect_plan-compare__aside a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Seletor de plano: só no celular */
.ect_plan-compare__controls { display: none; }
/* Chave do plano anual no cabeçalho (mesmo estado dos cards) */
.ect_plan-compare__billing { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 1.75rem; margin: -.375rem 0 1rem; }
.ect_plan-compare__billing .ect_plans__toggle { font-size: var(--ect-text-sm); }
.ect_plan-compare__table thead .ect_plans__toggle:focus-visible { outline: 2px solid var(--ect-blue); outline-offset: 3px; border-radius: var(--ect-radius-pill); }
/* "Mostrar só o que muda": some o que é igual em todos os planos */
.ect_plan-compare.is-diff tr.is-same,
.ect_plan-compare.is-diff tbody.is-same { display: none; }

/* Celular e tablet: um plano por vez, em largura total, escolhido no seletor */
@media (max-width: 991px) {
	.ect_plan-compare__head { align-items: flex-start; }
	.ect_plan-compare__controls { display: block; }
	.ect_plan-compare__tabs { display: flex; flex: 1 1 100%; gap: .25rem; padding: .25rem; border-radius: var(--ect-radius-pill); background-color: var(--ect-neutral-100); }
	.ect_plan-compare__tab { flex: 1; min-height: 2.5rem; padding: 0 .5rem; border: 0; border-radius: var(--ect-radius-pill); background: none; color: var(--ect-black-muted); font: inherit; font-size: var(--ect-text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease); }
	.ect_plan-compare__tab[aria-selected="true"] { background-color: var(--ect-neutral-white); color: var(--ect-neutral-black); box-shadow: 0 1px 3px #0000001f; }
	.ect_plan-compare__table,
	.ect_plan-compare__table thead,
	.ect_plan-compare__table tbody,
	.ect_plan-compare__table tr { display: block; width: 100%; }
	.ect_plan-compare__table th,
	.ect_plan-compare__table td { display: none; border-left: 0 !important; }
	.ect_plan-compare__table thead th { position: static; }
	.ect_plan-compare__table .ect_plan-compare__group-head th { display: block; }
	.ect_plan-compare[data-plan="0"] tr > :nth-child(1),
	.ect_plan-compare[data-plan="1"] tr > :nth-child(2),
	.ect_plan-compare[data-plan="2"] tr > :nth-child(3),
	.ect_plan-compare[data-plan="3"] tr > :nth-child(4) { display: block; }
	.ect_plan-compare.is-diff tr.is-same,
	.ect_plan-compare.is-diff tbody.is-same { display: none; }
}

/* Grade de logos de clientes (logo-grid, modelo "Trusted by" do surfer.ai) --- */
.ect_logo-grid { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); }
.ect_logo-grid__title { color: var(--ect-fg); font-size: var(--ect-display-xs); font-weight: 600; line-height: 1.3; text-align: center; text-wrap: balance; }
.ect_logo-grid__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ect-line); border-radius: var(--ect-radius-section); list-style: none; background-color: var(--ect-neutral-white); }
.ect_logo-grid__item { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 5.5rem; padding: 1rem; box-shadow: inset -1px -1px 0 var(--ect-line); color: var(--ect-neutral-black); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.ect_logo-grid__item .ect_icon { color: var(--ect-neutral-black); }
.ect_logo-grid__item img { max-width: 100%; height: 2rem; object-fit: contain; }
.ect_theme--dark .ect_logo-grid__title { color: var(--ect-neutral-white); }
.ect_theme--dark .ect_logo-grid__list { border-color: #ffffff1f; background-color: transparent; }
.ect_theme--dark .ect_logo-grid__item { box-shadow: inset -1px -1px 0 #ffffff1f; color: var(--ect-neutral-white); }
.ect_theme--dark .ect_logo-grid__item .ect_icon { color: var(--ect-neutral-white); }
@media (max-width: 767px) {
	.ect_logo-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ect_logo-grid__item { min-height: 4.5rem; font-size: .9375rem; }
}