/*
  ==========================================
  📍 [MAPA E CONTRATO: FOLHA DE ESTILOS]
  ==========================================
  Ordem de dependência:
  01. Fundação/tokens → 02. Cabeçalho → 03. Ações → 04. Mídia → 05. Home
  → 06. Componentes de conteúdo → 07. Blog → 08. Responsividade
  → 09. Preferências de acessibilidade.

  Entradas:
  - Classes e IDs definidos em index.html, blog.html e portfolio.html.
  - Fontes e ativos em ../assets/.
  - Estados de runtime: body.nav-open, [aria-current], details[open].

  Saídas:
  - Sistema visual compartilhado, responsivo e acessível.

  [AI-NOTE]: a ordem deste arquivo faz parte da cascata. Antes de mover regras,
  verifique especificidade, breakpoint e dependências nos três HTMLs.
  ==========================================
*/

/* ==========================================
  📍 [SETOR: FUNDAÇÃO VISUAL E DESIGN TOKENS] - Início
  O que faz: registra fontes, tokens, reset, tipografia e utilitários globais.
  Como/por quê: centraliza decisões para impedir valores divergentes nos componentes.
  I/O: recebe ativos ../assets/fonts; fornece variáveis e estilos-base a todo o site.
  [AI-NOTE]: mudanças em :root têm impacto transversal e exigem revisão visual global.
  ========================================== */

@font-face {
font-family: "Kanit";
src: url("../assets/fonts/Kanit-Light.ttf") format("truetype");
font-style: normal;
font-weight: 300;
font-display: swap;
}

@font-face {
font-family: "Kanit";
src: url("../assets/fonts/Kanit-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "Kanit";
src: url("../assets/fonts/Kanit-Medium.ttf") format("truetype");
font-style: normal;
font-weight: 500;
font-display: swap;
}

@font-face {
font-family: "Kanit";
src: url("../assets/fonts/Kanit-SemiBold.ttf") format("truetype");
font-style: normal;
font-weight: 600;
font-display: swap;
}

@font-face {
font-family: "NeverMind Serif";
src: url("../assets/fonts/NeverMindSerif-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}

@font-face {
font-family: "NeverMind Serif";
src: url("../assets/fonts/NeverMindSerif-DemiBold.ttf") format("truetype");
font-style: normal;
font-weight: 600;
font-display: swap;
}

:root {
--color-blue: #033f7b;
--color-blue-dark: #001f4d;
--color-champagne: #f8f5e8;
--color-paper: #fffdf4;
--color-mint: #a9d27d;
--color-sage: #b1cf87;
--color-pink: #fecfdb;
--color-pink-dark: #8a2c7a;
--color-ink: #1d1d1d;
--color-muted: #5e5e5e;
--color-white: #ffffff;
--color-line: rgb(3 63 123 / 24%);
--color-line-light: rgb(248 245 232 / 30%);
--font-sans: "Kanit", Arial, sans-serif;
--font-serif: "NeverMind Serif", Georgia, serif;
--container: 92rem;
--content-narrow: 48rem;
--gutter: clamp(1rem, 4vw, 3rem);
--section-space: clamp(2rem, 3.5vw, 3.25rem);
--space-xs: 0.5rem;
--space-sm: 0.875rem;
--space-md: 1.5rem;
--space-lg: clamp(2rem, 4vw, 3.5rem);
--space-xl: clamp(3rem, 6vw, 5.5rem);
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--transition: 180ms ease;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
overflow-x: clip;
scroll-behavior: smooth;
}

body {
overflow-x: clip;
margin: 0;
background: var(--color-champagne);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}

figure{
  max-width: 100%;
}
h1,
h2,
h3 {
color: var(--color-blue-dark);
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.05;
text-wrap: balance;
}

/* Container da marca d'água */
.watermark-container {
  position: relative;
  display: inline-block;
}

/* Classe aplicada diretamente na imagem */
.watermark-img {
  /* DEFINA O TAMANHO DA FOTO AQUI: */
  width: 950px;
  height: auto;

  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.15s ease;
}

.titulo-principal {
/* ALTERAÇÃO: removido font-size: clamp(1.75rem, 3vw, 3rem), que prevalecia sobre o h1 e deixava o título pequeno; agora ele volta a usar o tamanho original global de clamp(3rem, 8vw, 7.5rem). */
/* ALTERAÇÃO DE FORMATAÇÃO: largura textual ampliada de 10ch para 15ch e text-wrap: balance aplicado para distribuir a frase em linhas mais uniformes, sem palavras isoladas ou estrutura irregular. */
max-inline-size: min(100%, 15ch);
line-height: 1.02;
text-wrap: balance;
/* ALTERAÇÃO: overflow-wrap passou de break-word para normal para impedir divisões como “compreende / r”, mantendo o texto dentro da coluna ampliada. */
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}

h1 {
font-size: clamp(2.1rem, 4vw, 3.75rem);
letter-spacing: -0.045em;
}

h2 {
font-size: clamp(2.1rem, 5vw, 3.5rem);
letter-spacing: -0.035em;
}

h3 {
font-size: clamp(1.35rem, 2.6vw, 1.9rem);
line-height: 1.18;
}

ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}

a {
color: inherit;
text-decoration-thickness: 0.0625rem;
text-underline-offset: 0.2em;
}

section[id] {
scroll-margin-block-start: 7rem;
}

img,
svg,
video {
display: block;
max-inline-size: 100%;
}

img {
block-size: auto;
}

button,
input,
select,
textarea {
color: inherit;
font: inherit;
}

button,
select {
cursor: pointer;
}

address {
font-style: normal;
}

::selection {
background: var(--color-pink);
color: var(--color-blue-dark);
}

:focus-visible {
outline: 0.1875rem solid var(--color-pink-dark);
outline-offset: 0.25rem;
}

.container {
inline-size: min(100% - (var(--gutter) * 2), var(--container));
margin-inline: auto;
}

.skip-link {
position: fixed;
inset-block-start: var(--space-sm);
inset-inline-start: var(--space-sm);
z-index: 100;
padding: 0.75rem 1rem;
background: var(--color-blue-dark);
color: var(--color-white);
font-weight: 600;
transform: translateY(-200%);
transition: transform var(--transition);
}

.skip-link:focus {
transform: translateY(0);
}

/* ==========================================
  📍 [SETOR: FUNDAÇÃO VISUAL E DESIGN TOKENS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: CABEÇALHO E NAVEGAÇÃO] - Início
  O que faz: estiliza marca, navegação desktop, drawer móvel e backdrop.
  Como/por quê: estado .nav-open sincroniza CSS com o controlador JavaScript.
  I/O: classes do header + body.nav-open; entrega navegação responsiva.
  [AI-NOTE]: breakpoints e atributos do script devem permanecer coerentes.
  ========================================== */

.site-header {
position: sticky;
inset-block-start: 0;
z-index: 100;
isolation: isolate;
border-block-end: 0.0625rem solid var(--color-line);
background: rgb(248 245 232 / 96%);
backdrop-filter: blur(0.75rem);
}

.site-header__inner {
display: flex;
min-block-size: 4.75rem;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}

.brand {
display: inline-flex;
position: relative;
z-index: 70;
flex: 0 1 9.75rem;
align-items: center;
min-inline-size: 0;
}

.brand__image {
inline-size: 100%;
max-inline-size: 9.75rem;
}

.site-nav {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 60;
inline-size: min(22rem, calc(100vw - 2rem));
block-size: 100dvh;
min-inline-size: 0;
padding:
  calc(5.75rem + env(safe-area-inset-top))
  max(var(--gutter), env(safe-area-inset-right))
  max(var(--gutter), env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-champagne);
box-shadow: -0.5rem 0 2rem rgb(0 0 0 / 18%);
transform: translateX(100%);
visibility: hidden;
transition:
  transform var(--transition),
  visibility 0s linear var(--transition);
}

.site-nav__list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
inline-size: 100%;
}

.site-nav__list li {
inline-size: 100%;
}

.site-nav a:not(.button) {
display: inline-flex;
inline-size: 100%;
min-block-size: 3rem;
align-items: center;
border-block-end: 0.0625rem solid var(--color-line);
color: var(--color-blue-dark);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.07em;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
}

.site-nav a:not(.button):hover,
.site-nav a[aria-current="page"] {
color: var(--color-pink-dark);
}

.nav-toggle {
display: flex;
position: relative;
z-index: 70;
padding: 0;
flex-direction: column;
justify-content: center;
gap: 0.3125rem;
inline-size: 2.75rem;
block-size: 2.75rem;
flex: 0 0 2.75rem;
border: 0.0625rem solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-champagne);
cursor: pointer;
touch-action: manipulation;
transition: background-color var(--transition), border-color var(--transition);
}

.nav-toggle span {
display: block;
inline-size: 1.375rem;
block-size: 0.125rem;
margin-inline: auto;
background: var(--color-blue-dark);
transition: transform var(--transition), opacity var(--transition);
}

.nav-backdrop {
position: fixed;
inset: 0;
z-index: 50;
display: block;
inline-size: 100%;
block-size: 100%;
padding: 0;
border: 0;
background: rgb(0 31 77 / 48%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
  opacity var(--transition),
  visibility 0s linear var(--transition);
}

.site-nav__list .button {
inline-size: 100%;
margin-block-start: 1rem;
justify-content: center;
}

.nav-open {
overflow: hidden;
}

.nav-open .site-nav {
transform: translateX(0);
visibility: visible;
transition-delay: 0s;
}

.nav-open .nav-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}

.nav-open .nav-toggle span:nth-child(1) {
transform: translateY(0.4375rem) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Celulares compactos */
@media (max-width: 29.999rem) {
.site-header__inner {
  min-block-size: 4.5rem;
}

.brand,
.brand__image {
  max-inline-size: 8.5rem;
}

.site-nav {
  inline-size: calc(100vw - 1.25rem);
  padding-block-start: calc(5.25rem + env(safe-area-inset-top));
}
}

/* Tablets: o drawer ganha mais respiro, sem antecipar o menu horizontal. */
@media (min-width: 48rem) and (max-width: 74.999rem) {
.site-header__inner {
  min-block-size: 5.5rem;
}

.brand {
  flex-basis: 11rem;
}

.brand,
.brand__image {
  max-inline-size: 11rem;
}

.site-nav {
  inline-size: 25rem;
  padding-inline: 2rem;
}
}

/* Correção: o menu horizontal só aparece quando links e CTA cabem em uma linha. */
@media (min-width: 75rem) {
.nav-toggle,
.nav-backdrop {
  display: none;
}

.brand {
  flex: 0 0 11.5rem;
}

.brand__image {
  max-inline-size: 11.5rem;
}

.site-nav {
  position: static;
  z-index: auto;
  flex: 1;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: none;
  visibility: visible;
  transition: none;
}

.site-nav__list {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem clamp(0.75rem, 1.5vw, 1.25rem);
}

.site-nav__list li {
  inline-size: auto;
}

.site-nav a:not(.button) {
  inline-size: auto;
  min-block-size: 2.75rem;
  border-block-end: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.site-nav__list .button {
  inline-size: auto;
  margin-block-start: 0;
  white-space: nowrap;
}
}

@media (prefers-reduced-motion: reduce) {
.site-nav,
.nav-backdrop,
.nav-toggle,
.nav-toggle span {
  transition-duration: 0.01ms;
}
}

/* ==========================================
  📍 [SETOR: CABEÇALHO E NAVEGAÇÃO] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: BOTÕES E LINKS DE AÇÃO] - Início
  O que faz: define CTAs, variações visuais, grupos e links textuais.
  Como/por quê: uma base única reduz repetição e preserva área mínima de toque.
  I/O: classes .button/.text-link e modificadores BEM; saída visual interativa.
  [AI-NOTE]: não remova :focus-visible global ao alterar hover/active.
  ========================================== */

.button {
display: inline-flex;
max-inline-size: 100%;
min-block-size: 3.25rem;
padding: 0.8rem 1.25rem;
border: 0.0625rem solid transparent;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--color-blue-dark);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.07em;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow-wrap: anywhere;
transition:
  background-color var(--transition),
  border-color var(--transition),
  color var(--transition),
  transform var(--transition);
}

.button:hover {
transform: translateY(-0.125rem);
}

.button:active {
transform: translateY(0);
}

.button--small {
min-block-size: 2.75rem;
padding-inline: 1rem;
}

.button--primary {
background: var(--color-blue);
color: var(--color-white);
}

.button--primary:hover {
background: var(--color-blue-dark);
}

.button--outline {
border-color: var(--color-blue);
background: transparent;
color: var(--color-blue);
}

.button--outline:hover {
background: var(--color-blue);
color: var(--color-white);
}

.button--full {
inline-size: 100%;
}

.button-group {
display: flex;
margin-block-start: var(--space-lg);
flex-wrap: wrap;
gap: 0.75rem;
}

.text-link {
display: inline-flex;
inline-size: fit-content;
min-block-size: 2.75rem;
align-items: center;
gap: 0.65rem;
border-block-end: 0.0625rem solid currentcolor;
color: var(--color-blue);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-decoration: none;
text-transform: uppercase;
}

.text-link:hover {
color: var(--color-pink-dark);
}

/* ==========================================
  📍 [SETOR: BOTÕES E LINKS DE AÇÃO] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: MÍDIA FLEXÍVEL] - Início
  O que faz: normaliza frames, imagens, legendas e placeholders.
  Como/por quê: aspect-ratio e object-fit evitam colapso e distorção.
  I/O: figuras/imagens/placeholders; produz caixas proporcionais.
  [AI-NOTE]: ao reintroduzir imagens, preserve dimensões e texto alternativo no HTML.
  ========================================== */

.media-frame {
position: relative;
overflow: hidden;
margin: 0;
border: 0.0625rem solid var(--color-line);
background: var(--color-blue-dark);
}

.media-frame img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}

.media-placeholder {
inline-size: 100%;
block-size: 100%;
min-block-size: inherit;
}

.hero__media .media-placeholder {
background: rgb(3 63 123 / 5%);
}

.deliveries-grid__media .media-placeholder {
background: rgb(248 245 232 / 8%);
}

.media-frame figcaption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: 0.9rem 1.1rem;
border-block-start: 0.0625rem solid var(--color-line-light);
background: rgb(0 31 77 / 92%);
color: var(--color-champagne);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.challenge-layout {
display: grid;
min-inline-size: 0;
gap: var(--space-xl);
}

/* Moldura da foto que ilustra os Desafios. Reaproveita .media-frame (borda +
   overflow:hidden) em vez de criar um novo estilo de caixa; só a proporção
   muda. */
.challenge-frame {
aspect-ratio: 4 / 3;
}

/* Área da marca d'água, irmã de .challenge-frame na 2ª linha do grid de
   .challenge-layout: mesma coluna e mesma aspect-ratio fazem as duas caixas
   nascerem com largura e altura idênticas, alinhadas em cima e embaixo sem
   precisar de hack de altura. Sem borda nem fundo próprios — diferente de
   .challenge-frame, aqui a cor ao redor do ícone deve ser a mesma do fundo
   natural da seção, não uma caixa emoldurada. */
.watermark-frame {
aspect-ratio: 4 / 3;
display: flex;
}

.watermark-frame .watermark-container {
display: flex;
flex: 1;
min-inline-size: 0;
align-items: center;
justify-content: center;
padding: var(--space-lg);
}

.challenge-media {
inline-size: 100%;
max-inline-size: 75rem;
aspect-ratio: 4 / 3;
}

.challenge-media img {
display: block;
inline-size: 100%;
max-inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}

@media (min-width: 48rem) {
.challenge-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.challenge-media {
  max-inline-size: none;
  aspect-ratio: auto;
}

/* Enquadra o topo do texto de apoio com o topo do h2#titulo-desafios, não
   com o "01 / Desafios" acima dele: compensa a altura do eyebrow + gap de
   .section-heading__title. */
.section-heading__support {
  margin-block-start: 2.6rem;
}
}

/* ==========================================
  📍 [SETOR: MÍDIA FLEXÍVEL] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: HERO DA HOME] - Início
  O que faz: compõe proposta de valor, ações e área visual da abertura.
  Como/por quê: grid fluido colapsa sem larguras rígidas.
  I/O: .hero__content/.hero__media; entrega primeiro viewport responsivo.
  [AI-NOTE]: tipografia grande depende de clamp() e limites em ch.
  ========================================== */

.hero {
overflow: hidden;
padding-block-start: clamp(3rem, 7vw, 5.5rem);
background: var(--color-champagne);
}

.hero__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
align-items: stretch;
gap: clamp(2rem, 5vw, 5rem);
}

.hero__content {
display: flex;
/* ALTERAÇÃO: adicionados min-inline-size: 0 e max-inline-size: 100% para permitir que a coluna de texto encolha dentro do grid sem invadir a coluna reservada à imagem. */
min-inline-size: 0;
max-inline-size: 100%;
/* Alinha o topo do título com o topo do showcase: o respiro superior agora
   vem de .hero (padding-block-start), não daqui, e align-self:start evita
   que esta coluna estique e centralize o texto dentro da linha do grid. */
align-self: start;
padding-block-end: clamp(3rem, 7vw, 5.5rem);
flex-direction: column;
justify-content: flex-start;
}

.hero__content h1 {
/* ALTERAÇÃO DE FORMATAÇÃO: max-inline-size ampliado de 10ch para 15ch para aproveitar a coluna textual maior e reduzir quebras excessivas, preservando o limite de 100% do container. */
max-inline-size: min(100%, 15ch);
margin-block-start: 1rem;
}

.hero__lead {
/* ALTERAÇÃO: max-inline-size passou de 40rem para min(100%, 40rem), impedindo que o parágrafo ultrapasse a largura disponível no grid. */
max-inline-size: min(100%, 40rem);
/* ALTERAÇÃO: restaurados margin-block-start e font-size originais do texto de apoio para manter a proporção visual definida inicialmente. */
margin-block-start: var(--space-md);
color: var(--color-muted);
font-size: clamp(1.05rem, 2vw, 1.25rem);
}

h1.hero__title--caps {
max-inline-size: 100%;
text-transform: uppercase;
letter-spacing: -0.015em;
}

/* ==========================================
  📍 [SETOR: HERO / BENEFÍCIOS ILUSTRADOS] - Início
  O que faz: ilustração dos 3 benefícios da gestão ergonômica, abaixo do
  texto do hero.
  Como/por quê: imagem única (ícones + legendas já desenhados nela) recortada
  de imagensetor1.png.jpg, em vez de ícones SVG + texto HTML — mantém 100%
  fiel à referência de design fornecida.
  I/O: .hero-benefits-img; consome assets/decorative/hero-beneficios.jpg.
  ========================================== */

.hero-benefits-img {
inline-size: 100%;
max-inline-size: 35rem;
margin-block-start: var(--space-lg);
}

/* ==========================================
  📍 [SETOR: HERO / BENEFÍCIOS ILUSTRADOS] - Fim
  ========================================== */

.hero__media {
/* ALTERAÇÃO: min-inline-size: 0 garante que a caixa da imagem também respeite sua própria coluna, sem pressionar ou ser invadida pelo texto. */
inline-size: 100%;
max-inline-size: 36rem;
min-inline-size: 0;
/* align-self: start evita que o align-items: stretch do .hero__grid force a altura da coluna de texto sobre o frame, o que quebrava o aspect-ratio e cortava a foto num corte quase sólido. */
align-self: start;
justify-self: end;
aspect-ratio: 4 / 5;
}

/* O showcase do hero precisa preencher a largura inteira da própria coluna
   do grid (em vez do teto de 34rem herdado de .blog-showcase, pensado para
   a barra lateral do blog) para casar visualmente com a largura do título e
   dos hero benefits do lado oposto — sem isso sobrava um vão assimétrico
   entre as duas colunas em telas largas. */
.hero__grid .hero__media {
inline-size: 100%;
max-inline-size: 100%;
justify-self: stretch;
}

/* ==========================================
  📍 [SETOR: HERO DA HOME] - Fim
  ========================================== */

/* ==========================================
   📍 [SETOR: MARQUEE / CARROSSEL INFINITO FLUIDO] - Início
   O que faz: faixa de fotos com deslizamento horizontal contínuo (loop).
   Como/por quê: dois grupos idênticos lado a lado; a animação move a faixa
   exatamente 50% (a largura de um grupo) e reinicia, criando um loop sem costura.
   I/O: nenhum estado; respeita prefers-reduced-motion pausando a animação.
   [AI-NOTE]: se o número de fotos por grupo mudar, os dois grupos em
   index.html precisam continuar idênticos entre si.
   ========================================== */
.marquee {
position: relative;
width: 100%;
max-inline-size: var(--container); /* Mantém no container do site */
margin: 0 auto 2.5rem auto;
overflow: hidden;
border-radius: 1rem;
background: transparent;

/* Efeito moderno de suavização (Fade) nas bordas laterais */
-webkit-mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 12%,
  rgba(0, 0, 0, 1) 88%,
  rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 12%,
  rgba(0, 0, 0, 1) 88%,
  rgba(0, 0, 0, 0) 100%
);
}

.marquee__track {
display: flex;
width: max-content;
gap: 1.25rem; /* Espaçamento entre os dois grupos */
will-change: transform;
animation: marquee-scroll 28s linear infinite;
}

/* Interatividade moderna: pausa a animação ao passar o mouse ou tocar */
.marquee:hover .marquee__track {
animation-play-state: paused;
}

.marquee__group {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 1.25rem; /* Espaçamento entre os slides internos */
}

.marquee__slide {
flex: 0 0 auto;
width: clamp(280px, 30vw, 420px);
aspect-ratio: 3 / 2; /* Formato retangular; object-fit: cover preenche o quadro sem sobrar espaço */
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra suave profissional */
transition: transform 0.3s ease;
}

/* Efeito sutil ao passar o mouse sobre um slide individual */
.marquee__slide:hover {
transform: translateY(-2px);
}

.marquee__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Animação contínua e perfeitamente calculada */
@keyframes marquee-scroll {
0% {
  transform: translateX(0);
}
100% {
  /* Desloca exatamente metade do trilho (Grupo 1 completo + 1 gap) */
  transform: translateX(calc(-50% - 0.625rem));
}
}

/* Responsividade refinada para telas menores */
@media (max-width: 768px) {
.marquee {
  margin-bottom: 1.5rem;
  /* Suavização ligeiramente menor no mobile para aproveitar a tela */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 6%,
    rgba(0, 0, 0, 1) 94%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 6%,
    rgba(0, 0, 0, 1) 94%,
    rgba(0, 0, 0, 0) 100%
  );
}

.marquee__track {
  gap: 0.875rem;
  animation-duration: 20s;
}

.marquee__group {
  gap: 0.875rem;
}

.marquee__slide {
  width: clamp(230px, 68vw, 320px);
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 0.4375rem));
  }
}
}

@media (prefers-reduced-motion: reduce) {
.marquee__track {
  animation: none;
}
}
/* ==========================================
   📍 [SETOR: MARQUEE / CARROSSEL INFINITO FLUIDO] - Fim
   ========================================== */

/* ==========================================
   📍 [SETOR: VITRINE DE NOTÍCIAS DO BLOG] - Início
   O que faz: estiliza a vitrine rotativa que ocupa o frame de imagem do hero
   — cards com capa, badge, meta, título, resumo, CTA, setas, dots e barra de
   progresso.
   Como/por quê: arquitetura BEM + custom properties locais no bloco. Os slides
   são empilhados (position:absolute; inset:0) dentro de uma viewport também
   absoluta sobre o .media-frame, que já tem overflow:hidden. Nada entra no
   fluxo do documento → nenhuma mudança de altura, nenhum CLS, nenhum overflow.
   I/O: classes de estado aplicadas pelo script embutido no fim do <body>
   (.is-active, .is-loaded, .is-paused, .has-multiple).
   [AI-NOTE]: todas as medidas derivam das variáveis --bs-* declaradas no bloco;
   ajuste-as em vez de sobrescrever regras internas.
   ========================================== */

.blog-showcase {
/* --- Tokens locais do componente (herdam a paleta global do site) --- */
--bs-surface: var(--color-blue-dark);
--bs-ink: var(--color-champagne);
--bs-accent: var(--color-mint);
--bs-glass: rgb(248 245 232 / 12%);
--bs-glass-border: rgb(248 245 232 / 28%);
--bs-overlay: linear-gradient(
  to top,
  rgb(0 31 77 / 96%) 0%,
  rgb(0 31 77 / 88%) 38%,
  rgb(0 31 77 / 38%) 68%,
  rgb(0 31 77 / 4%) 100%
);
--bs-pad: clamp(1.15rem, 2.6vw, 2rem);
--bs-transition: 520ms cubic-bezier(0.22, 0.61, 0.36, 1);

position: relative;
overflow: hidden;          /* confinamento rígido */
padding: 0;
background: var(--bs-surface);
contain: paint;            /* isola a pintura dentro do frame */

/* Sobrescreve a proporção herdada de .hero__media (4/5) só nesta instância,
   sem afetar a foto de Entregas, que reaproveita .hero__media sem esta classe.
   max-inline-size: 100% deixa o showcase preencher a coluna do grid que o
   contém — a coluna do hero (para casar com o título/hero benefits) ou a
   coluna lateral estreita do blog — em vez de um teto fixo que só fazia
   sentido em um dos dois contextos. */
aspect-ratio: 4 / 3;
max-inline-size: 100%;
}

/* A vitrine da barra lateral do artigo (blog.html) usa a mesma classe do hero,
   mas a coluna estreita (minmax(19rem, 24rem)) deixava o componente pequeno
   demais para ter destaque visual. Proporção mais alta e uma altura mínima
   aumentam a presença da vitrine sem alterar a instância do hero na Home,
   que não está dentro de .article-layout__aside. */
.article-layout__aside .blog-showcase {
aspect-ratio: 4 / 5;
min-block-size: 22rem;
}

@media (min-width: 64rem) {
.article-layout__aside .blog-showcase {
  min-block-size: 28rem;
}
}

/* Viewport: reserva exatamente a caixa do frame original antes de qualquer pintura. */
.blog-showcase__viewport {
position: absolute;
inset: 0;
overflow: hidden;
isolation: isolate;
}

.blog-showcase__viewport:focus {
outline: none;
}

.blog-showcase__track {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}

/* --- Slide: empilhado, com crossfade + leve deslocamento --- */
.blog-showcase__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.03);
transition:
  opacity var(--bs-transition),
  transform var(--bs-transition),
  visibility 0s linear var(--bs-transition);
pointer-events: none;
}

.blog-showcase__slide.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
transition-delay: 0s;
pointer-events: auto;
z-index: 2;
}

.blog-showcase__card {
position: relative;
display: block;
inline-size: 100%;
block-size: 100%;
color: inherit;
text-decoration: none;
}

.blog-showcase__card:focus-visible {
outline: 0.1875rem solid var(--bs-accent);
outline-offset: -0.35rem;
}

/* --- Mídia + skeleton shimmer (ocupa a mesma caixa da imagem: CLS = 0) --- */
.blog-showcase__media {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bs-surface);
}

.blog-showcase__skeleton {
position: absolute;
inset: 0;
z-index: 1;
background:
  linear-gradient(
    100deg,
    rgb(248 245 232 / 4%) 20%,
    rgb(248 245 232 / 12%) 40%,
    rgb(248 245 232 / 4%) 60%
  )
  rgb(3 63 123 / 35%);
background-size: 220% 100%;
animation: bs-shimmer 1.6s linear infinite;
transition: opacity 320ms ease;
}

.blog-showcase__slide.is-loaded .blog-showcase__skeleton {
opacity: 0;
animation: none;
}

@keyframes bs-shimmer {
0%   { background-position: 180% 0; }
100% { background-position: -80% 0; }
}

.blog-showcase__image {
position: relative;
z-index: 2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.01);
transition:
  opacity 480ms ease,
  transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.blog-showcase__slide.is-loaded .blog-showcase__image {
opacity: 1;
}

/* Zoom sutil no hover/foco do card. */
.blog-showcase__card:hover .blog-showcase__image,
.blog-showcase__card:focus-visible .blog-showcase__image {
transform: scale(1.07);
}

/* --- Overlay e conteúdo editorial --- */
.blog-showcase__overlay {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: var(--bs-pad);
padding-block-end: calc(var(--bs-pad) + 2.25rem); /* espaço para dots/progresso */
background: var(--bs-overlay);
}

.blog-showcase__overlay--solid {
background: linear-gradient(160deg, var(--color-blue) 0%, var(--bs-surface) 100%);
justify-content: center;
}

/* Badge de categoria com glassmorphism. */
.blog-showcase__badge {
align-self: flex-start;
margin-block-end: auto;
padding: 0.4rem 0.85rem;
border: 0.0625rem solid var(--bs-glass-border);
border-radius: 999px;
background: var(--bs-glass);
backdrop-filter: blur(0.65rem) saturate(140%);
-webkit-backdrop-filter: blur(0.65rem) saturate(140%);
color: var(--bs-ink);
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
transform: translateY(-0.35rem);
opacity: 0;
transition: opacity 480ms ease 120ms, transform 480ms ease 120ms;
}

.blog-showcase__slide.is-active .blog-showcase__badge {
opacity: 1;
transform: translateY(0);
}

.blog-showcase__body {
display: grid;
inline-size: 100%;
min-inline-size: 0;
gap: 0.5rem;
transform: translateY(0.75rem);
opacity: 0;
transition: opacity 520ms ease 160ms, transform 520ms ease 160ms;
}

.blog-showcase__slide.is-active .blog-showcase__body {
opacity: 1;
transform: translateY(0);
}

.blog-showcase__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
color: var(--bs-accent);
font-family: var(--font-sans);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

/* Truncamento: título nunca estoura a caixa, por mais longo que seja. */
.blog-showcase__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
color: var(--bs-ink);
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.3vw, 1.75rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
overflow-wrap: anywhere;
}

.blog-showcase__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
max-inline-size: 34rem;
color: rgb(248 245 232 / 80%);
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 300;
line-height: 1.5;
}

.blog-showcase__cta {
display: inline-flex;
inline-size: fit-content;   /* impede que o grid estique o CTA na largura toda */
justify-self: start;
align-items: center;
gap: 0.6rem;
margin-block-start: 0.35rem;
padding: 0.55rem 1rem;
border: 0.0625rem solid var(--bs-glass-border);
border-radius: 999px;
background: var(--bs-glass);
backdrop-filter: blur(0.65rem) saturate(140%);
-webkit-backdrop-filter: blur(0.65rem) saturate(140%);
color: var(--bs-ink);
font-family: var(--font-sans);
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
transition:
  background-color var(--transition),
  border-color var(--transition),
  color var(--transition);
}

.blog-showcase__cta-icon {
transition: transform var(--transition);
}

.blog-showcase__card:hover .blog-showcase__cta,
.blog-showcase__card:focus-visible .blog-showcase__cta {
border-color: var(--bs-accent);
background: rgb(169 210 125 / 18%);
color: var(--bs-accent);
}

.blog-showcase__card:hover .blog-showcase__cta-icon {
transform: translateX(0.25rem);
}

/* Brilho sutil na borda interna do frame ao interagir. */
.blog-showcase__viewport::after {
position: absolute;
inset: 0;
z-index: 6;
border: 0.0625rem solid rgb(169 210 125 / 0%);
content: "";
pointer-events: none;
transition: border-color var(--transition), box-shadow var(--transition);
}

.blog-showcase:hover .blog-showcase__viewport::after,
.blog-showcase:focus-within .blog-showcase__viewport::after {
border-color: rgb(169 210 125 / 38%);
box-shadow: inset 0 0 2.5rem rgb(169 210 125 / 12%);
}

/* --- Setas direcionais (visíveis no hover; sempre acessíveis por teclado) --- */
.blog-showcase__arrows {
position: absolute;
inset-block-start: 50%;
inset-inline: var(--bs-pad);
z-index: 5;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}

.blog-showcase__arrow {
display: inline-flex;
inline-size: 2.75rem;
block-size: 2.75rem;
align-items: center;
justify-content: center;
padding: 0;
border: 0.0625rem solid var(--bs-glass-border);
border-radius: 50%;
background: var(--bs-glass);
backdrop-filter: blur(0.75rem) saturate(140%);
-webkit-backdrop-filter: blur(0.75rem) saturate(140%);
color: var(--bs-ink);
font-size: 1rem;
line-height: 1;
opacity: 0;
pointer-events: auto;
transition: opacity var(--transition), background-color var(--transition), transform var(--transition);
}

.blog-showcase:hover .blog-showcase__arrow,
.blog-showcase:focus-within .blog-showcase__arrow {
opacity: 1;
}

.blog-showcase__arrow:hover {
background: rgb(169 210 125 / 22%);
transform: scale(1.06);
}

.blog-showcase__arrow:focus-visible {
opacity: 1;
outline: 0.1875rem solid var(--bs-accent);
outline-offset: 0.15rem;
}

/* --- Dots de paginação --- */
.blog-showcase__dots {
position: absolute;
inset-inline-start: var(--bs-pad);
inset-block-end: calc(var(--bs-pad) - 0.35rem);
z-index: 5;
display: flex;
align-items: center;
gap: 0.4rem;
}

.blog-showcase__dot {
inline-size: 1.5rem;
block-size: 0.1875rem;
padding: 0;
border: 0;
border-radius: 999px;
background: rgb(248 245 232 / 32%);
transition: background-color var(--transition), inline-size var(--transition);
}

.blog-showcase__dot:hover {
background: rgb(248 245 232 / 60%);
}

.blog-showcase__dot.is-active {
inline-size: 2.5rem;
background: var(--bs-accent);
}

.blog-showcase__dot:focus-visible {
outline: 0.1875rem solid var(--bs-accent);
outline-offset: 0.25rem;
}

/* --- Barra de progresso do autoplay --- */
.blog-showcase__progress {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
z-index: 5;
block-size: 0.1875rem;
background: rgb(248 245 232 / 14%);
}

.blog-showcase__progress-bar {
display: block;
inline-size: 100%;
block-size: 100%;
background: var(--bs-accent);
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}

/* Sem JS ou com um único post: esconde os controles de rotação. */
.blog-showcase:not(.has-multiple) .blog-showcase__arrows,
.blog-showcase:not(.has-multiple) .blog-showcase__dots,
.blog-showcase:not(.has-multiple) .blog-showcase__progress {
display: none;
}

/* Fallback sem JavaScript: o primeiro slide permanece visível e clicável. */
.blog-showcase:not(.is-ready) .blog-showcase__slide:first-child {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}

.blog-showcase:not(.is-ready) .blog-showcase__slide:first-child .blog-showcase__badge,
.blog-showcase:not(.is-ready) .blog-showcase__slide:first-child .blog-showcase__body {
opacity: 1;
transform: none;
}

/* --- Tablet --- */
@media (min-width: 48rem) and (max-width: 74.999rem) {
.blog-showcase {
  --bs-pad: 1.4rem;
}

.blog-showcase__excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
}

/* --- Mobile --- */
@media (max-width: 47.9375rem) {
.blog-showcase {
  --bs-pad: 1.05rem;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: clamp(20rem, 78vw, 28rem);
}

.blog-showcase__title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
}

.blog-showcase__excerpt {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.85rem;
}

/* Em telas de toque não existe hover: setas permanentes e discretas. */
.blog-showcase__arrow {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  opacity: 0.85;
}

.blog-showcase__arrows {
  inset-inline: 0.6rem;
}
}

/* --- Preferência por menos movimento: sem autoplay, sem zoom, sem shimmer --- */
@media (prefers-reduced-motion: reduce) {
.blog-showcase__slide,
.blog-showcase__image,
.blog-showcase__badge,
.blog-showcase__body {
  transition-duration: 0.01ms;
}

.blog-showcase__skeleton {
  animation: none;
}

.blog-showcase__card:hover .blog-showcase__image,
.blog-showcase__card:focus-visible .blog-showcase__image {
  transform: none;
}

.blog-showcase__progress {
  display: none;
}
}

/* ==========================================
   📍 [SETOR: VITRINE DE NOTÍCIAS DO BLOG] - Fim
   ========================================== */

/* ==========================================
   📍 [SETOR: EYEBROW / ÍNDICE DE SEÇÃO (utilitário compartilhado)] - Início
   O que faz: rotula o pré-título curto usado no topo de várias seções
   (Hero, Metodologia, Desafios, Entregas, FAQ, Contato e Blog).
   Como/por quê: extraído em utilitário porque .eyebrow e .section-index
   são reutilizados em index.html e blog.html — não pertencem a nenhuma
   seção específica.
   ========================================== */

.eyebrow,
.section-index {
color: var(--color-pink-dark);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
}

.eyebrow > span {
inline-size: 1.75rem;
block-size: 0.0625rem;
background: currentcolor;
}

.section-index--light {
color: var(--color-mint);
}

/* ==========================================
   📍 [SETOR: EYEBROW / ÍNDICE DE SEÇÃO (utilitário compartilhado)] - Fim
   ========================================== */

/* ==========================================
  📍 [SETOR: FAIXA DE PRINCÍPIOS] - Início
  O que faz: apresenta os três pilares como abas visuais compactas.
  Como/por quê: flex-wrap mantém leitura sem overflow.
  I/O: .principles__list e três itens ordenados; saída cromática sequencial.
  [AI-NOTE]: nth-child vincula posição a cor; reavalie ao mudar a quantidade.
  ========================================== */

.principles {
padding-block: 0.625rem;
border-block: 0.0625rem solid var(--color-blue);
}

.principles__list {
display: flex;
inline-size: min(100% - (var(--gutter) * 2), var(--container));
margin-inline: auto;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}

.principles__list li {
flex: 0 1 auto;
padding: 0.6875rem 1rem;
border: 0.0625rem solid var(--color-blue);
color: var(--color-blue-dark);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
}

.principles__list li:nth-child(2) {
background: var(--color-pink);
}

.principles__list li:nth-child(3) {
background: var(--color-mint);
}

.principles__list span {
margin-inline-end: 0.5rem;
color: var(--color-pink-dark);
}

.principles__list li:nth-child(4) {
background: var(--color-champagne);
}

.principles__list li:nth-child(5) {
background: var(--color-pink);
}

.principles__list li:nth-child(6) {
background: var(--color-mint);
}

/* ==========================================
  📍 [SETOR: FAIXA DE PRINCÍPIOS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: SEÇÕES E CABEÇALHOS] - Início
  O que faz: fornece superfícies, espaçamento vertical e composições de títulos.
  Como/por quê: modificadores controlam tema sem duplicar estrutura.
  I/O: .section e variantes; fornece base a múltiplos componentes.
  [AI-NOTE]: --section-space é o controle global de ritmo vertical.
  ========================================== */

.section {
padding-block: var(--section-space);
}

.section--paper {
background: var(--color-paper);
}

.section--champagne {
background: var(--color-champagne);
}

.section--sage {
background: var(--color-sage);
color: var(--color-ink);
}

.section--pink {
background: var(--color-pink);
}

.section--dark {
background: var(--color-blue-dark);
color: var(--color-champagne);
}

.section--brand {
background: var(--color-blue);
color: var(--color-champagne);
}

.section-heading {
display: grid;
max-inline-size: 68rem;
gap: var(--space-md);
}

.section-heading h2 {
max-inline-size: 13ch;
}

.section-heading > p:last-child {
max-inline-size: 40rem;
color: var(--color-muted);
font-size: 1.05rem;
}

.section-heading--split {
max-inline-size: none;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
align-items: end;
gap: var(--space-xl);
}

.section-heading__title {
display: grid;
gap: var(--space-md);
}

.section-heading__support > p {
max-inline-size: 38rem;
color: var(--color-muted);
font-size: 1.05rem;
}

.section-heading--light h2,
.section--dark h2,
.section--dark h3,
.section--brand h2,
.section--brand h3 {
color: var(--color-champagne);
}

.section-heading--light > p:last-child {
color: rgb(248 245 232 / 72%);
}

/* ==========================================
  📍 [SETOR: SEÇÕES E CABEÇALHOS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: LISTA DE ETAPAS INICIAIS] - Início
  O que faz: alinha número, ação e explicação do diagnóstico.
  Como/por quê: grid mantém colunas sem recorrer a margens manuais.
  I/O: .step-list; produz sequência compacta e responsiva.
  [AI-NOTE]: o breakpoint móvel move <small> para a segunda coluna.
  ========================================== */

.step-list {
margin-block-start: var(--space-md);
border-block-start: 0.0625rem solid var(--color-line);
}

.step-list li {
display: grid;
padding-block: 0.85rem;
grid-template-columns: auto minmax(5.5rem, 0.5fr) minmax(0, 1fr);
align-items: baseline;
gap: 0.75rem;
border-block-end: 0.0625rem solid var(--color-line);
}

.step-list li > span {
color: var(--color-pink-dark);
font-size: 0.65rem;
font-weight: 600;
}

.step-list strong {
color: var(--color-blue-dark);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.step-list small {
color: var(--color-muted);
font-size: 0.8rem;
}

/* ==========================================
  📍 [SETOR: LISTA DE ETAPAS INICIAIS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: GRADES E CARTÕES] - Início
  O que faz: define grids reutilizáveis para serviços, entregas e posts.
  Como/por quê: auto-fit/minmax distribui cartões sem largura fixa.
  I/O: .card-grid, .numbered-card e .post-card; saída modular.
  [AI-NOTE]: mantenha min-inline-size: 0 para evitar overflow de conteúdo longo.
  ========================================== */

.card-grid {
display: grid;
margin-block-start: var(--space-lg);
border-block-start: 0.0625rem solid var(--color-blue);
}

.card-grid--three {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.card-grid--two {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.numbered-card,
.post-card {
display: flex;
min-inline-size: 0;
padding: clamp(1.5rem, 3vw, 2rem);
flex-direction: column;
border-inline-end: 0.0625rem solid var(--color-line);
border-block-end: 0.0625rem solid var(--color-line);
}

.numbered-card__index {
color: var(--color-pink-dark);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.1em;
}

.numbered-card h3,
.post-card h3 {
margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.numbered-card p,
.post-card p {
margin-block-start: 1rem;
color: var(--color-muted);
}

.service-card .text-link,
.post-card .text-link {
margin-block-start: auto;
padding-block-start: 2rem;
}

.card-grid--light {
margin: 0;
border-color: var(--color-line-light);
}

.card-grid--light .numbered-card {
border-color: var(--color-line-light);
}

.card-grid--light .numbered-card__index {
color: var(--color-mint);
}

.card-grid--light h3 {
color: var(--color-champagne);
}

.card-grid--light p {
color: rgb(248 245 232 / 72%);
}

/* ==========================================
  📍 [SETOR: GRADES E CARTÕES] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: ALINHAMENTO NORMATIVO E SERVIÇOS] - Início
  O que faz: compõe o banner de conformidade normativa, o teaser "cada empresa
  é única" e a lista de serviços em etiquetas coloridas.
  Como/por quê: duas colunas independentes permitem empilhamento natural em
  telas estreitas; as etiquetas reutilizam as cores mint/pink já usadas nas
  demais faixas do site.
  I/O: .banner-split/.services-pills/.pill; produz o bloco que substitui o
  antigo "Método Prisma" mantendo o id="metodologia".
  [AI-NOTE]: cores claras dependem do fundo .section--brand.
  ========================================== */

.banner-split__grid {
display: grid;
gap: var(--space-xl);
}

.banner-split__left {
display: grid;
gap: var(--space-lg);
}

.banner-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}

.tag {
display: inline-flex;
padding: 0.4rem 0.9rem;
border-radius: 999px;
color: var(--color-blue-dark);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
}

.tag--mint {
background: var(--color-mint);
}

.eyebrow.eyebrow--light {
color: rgb(248 245 232 / 78%);
}

.banner-block h2 {
max-inline-size: 16ch;
color: var(--color-champagne);
}

.unique-block__content h3 {
color: var(--color-champagne);
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.unique-block__content p {
margin-block-start: 0.5rem;
color: rgb(248 245 232 / 78%);
}

.services-pills__title {
color: var(--color-champagne);
font-size: clamp(3rem, 9vw, 5.5rem);
letter-spacing: -0.03em;
}

.pill-list {
display: grid;
margin-block-start: var(--space-lg);
gap: 0.75rem;
}

.pill-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 0.75rem;
}

.pill {
display: flex;
min-block-size: 3.5rem;
padding: 0.85rem 1.5rem;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--color-blue-dark);
font-size: 0.85rem;
font-weight: 500;
line-height: 1.3;
text-align: center;
}

.pill--mint {
background: var(--color-mint);
}

.pill--pink {
background: var(--color-pink);
}

.pill--full {
inline-size: 100%;
}

@media (min-width: 64rem) {
.banner-split__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}

.services-pills__title {
  font-size: clamp(3.5rem, 6vw, 6.5rem);
}

.pill {
  min-block-size: 4rem;
  padding: 1rem 1.75rem;
  font-size: 0.95rem;
}
}

/* ==========================================
  📍 [SETOR: ALINHAMENTO NORMATIVO E SERVIÇOS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: QUEM SOMOS] - Início
  O que faz: compõe a apresentação institucional em duas colunas sobre fundo
  sálvia, com a estrela irradiante recortada da referência visual.
  Como/por quê: grid empilha em telas estreitas; na área ampla a ilustração
  sangra até a borda da viewport para reproduzir o enquadramento original.
  I/O: .quem-somos__grid/__art/__content; consome assets/decorative/quem-somos-estrela.png.
  [AI-NOTE]: h2/p reutilizam a escala tipográfica maior já usada em .hero__lead
  (clamp) em vez de inventar novos tamanhos; a figura sempre sangra até a borda
  esquerda via margin-inline-start negativo igual a --gutter e preenche 100%
  da própria trilha do grid, o que evita sobrepor a coluna de texto.
  ========================================== */

.quem-somos__grid {
display: grid;
align-items: center;
gap: var(--space-lg);
}

.quem-somos__art {
display: flex;
align-items: center;
justify-content: flex-start;
margin-inline-start: calc(var(--gutter) * -1);
}

.quem-somos__art img {
inline-size: calc(100% + var(--gutter));
max-inline-size: 30rem;
}

.quem-somos__content {
display: grid;
gap: var(--space-md);
}

.quem-somos__content h2 {
color: var(--color-white);
font-size: clamp(2rem, 3.5vw, 2.75rem);
}

.quem-somos__content p {
max-inline-size: 32rem;
color: var(--color-white);
font-size: clamp(1rem, 1.6vw, 1.1rem);
text-align: justify;
}

.quem-somos__signature {
display: grid;
margin-block-start: var(--space-sm);
gap: 0.35rem;
}

.quem-somos__brand {
color: var(--color-white);
font-weight: 600;
}

@media (min-width: 64rem) {
.quem-somos__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.quem-somos__art img {
  max-inline-size: 36rem;
}
}

/* ==========================================
  📍 [SETOR: QUEM SOMOS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: ENTREGÁVEIS] - Início
  O que faz: organiza cartões e reserva de mídia do bloco de entregas.
  Como/por quê: grid fluido equilibra conteúdo e suporte visual.
  I/O: .deliveries-grid e .deliveries-grid__media.
  [AI-NOTE]: a altura mínima é anulada no refinamento mobile.
  ========================================== */

.deliveries-grid {
display: grid;
margin-block-start: var(--space-lg);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
align-items: stretch;
}

.deliveries-grid__media {
min-block-size: clamp(30rem, 60vw, 44rem);
aspect-ratio: 4 / 5;
border-color: var(--color-line-light);
}

/* ==========================================
  📍 [SETOR: ENTREGÁVEIS] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: PERGUNTAS FREQUENTES] - Início
  O que faz: estiliza acordeões nativos de dúvidas.
  Como/por quê: details[open] elimina dependência de JavaScript.
  I/O: summary acionável e estado nativo open; saída expandida/recolhida.
  [AI-NOTE]: marcador visual “+ / −” é gerado por pseudo-elemento.
  ========================================== */

.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
gap: var(--space-xl);
}

.faq-intro h2 {
max-inline-size: 11ch;
margin-block-start: 1rem;
}

.faq-intro > p:not(.section-index) {
max-inline-size: 32rem;
margin-block-start: var(--space-md);
color: var(--color-muted);
}

.faq-intro .text-link {
margin-block-start: var(--space-md);
}

.faq-list {
border-block-start: 0.0625rem solid var(--color-blue);
}

.faq-list details {
border-block-end: 0.0625rem solid var(--color-blue);
}

.faq-list summary {
position: relative;
display: grid;
padding: 1.25rem 2.75rem 1.25rem 0;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
color: var(--color-blue-dark);
font-weight: 500;
list-style: none;
cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
display: none;
}

.faq-list summary::after {
position: absolute;
inset-block-start: 1rem;
inset-inline-end: 0;
color: var(--color-blue);
content: "+";
font-size: 1.6rem;
font-weight: 300;
}

.faq-list details[open] summary::after {
content: "−";
}

.faq-list summary span {
color: var(--color-pink-dark);
font-size: 0.66rem;
font-weight: 600;
}

.faq-list details p {
max-inline-size: 44rem;
padding: 0 2rem 1.5rem 2.25rem;
color: var(--color-muted);
}

/* ==========================================
  📍 [SETOR: PERGUNTAS FREQUENTES] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: CONTATO E CONVERSÃO] - Início
  O que faz: compõe conteúdo, canais diretos e cartão de ações.
  Como/por quê: grid fluido mantém leitura e CTAs funcionais sem formulário falso.
  I/O: .contact, links tel:/mailto: e .contact-card.
  [AI-NOTE]: se houver backend futuro, crie setor próprio para estados de formulário.
  ========================================== */

.contact {
background: var(--color-blue-dark);
color: var(--color-champagne);
}

.contact__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
align-items: start;
gap: var(--space-xl);
}

.contact__content h2 {
max-inline-size: 11ch;
margin-block-start: 1rem;
color: var(--color-champagne);
}

.contact__content > p:not(.section-index) {
max-inline-size: 38rem;
margin-block-start: var(--space-md);
color: rgb(248 245 232 / 72%);
}

.direct-contact {
display: grid;
max-inline-size: 38rem;
margin-block-start: var(--space-lg);
border-block-start: 0.0625rem solid var(--color-line-light);
}

.direct-contact a {
display: grid;
padding-block: 1rem;
grid-template-columns: minmax(5rem, 0.35fr) minmax(0, 1fr);
gap: 1rem;
border-block-end: 0.0625rem solid var(--color-line-light);
color: var(--color-champagne);
text-decoration: none;
overflow-wrap: anywhere;
}

.direct-contact span {
color: var(--color-mint);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.contact-card {
padding: clamp(1.25rem, 4vw, 2.5rem);
border: 0.0625rem solid var(--color-blue);
background: var(--color-champagne);
color: var(--color-ink);
box-shadow: clamp(0.35rem, 1vw, 0.75rem) clamp(0.35rem, 1vw, 0.75rem) 0 var(--color-pink);
}

.contact-card h3 {
margin-block-start: 1.25rem;
}

.contact-card > p:not(.section-index) {
margin-block-start: 1rem;
color: var(--color-muted);
}

.contact-card__actions {
display: grid;
margin-block-start: var(--space-md);
gap: 0.75rem;
}

.form {
display: grid;
margin-block-start: var(--space-md);
gap: 1rem;
}

.form__field {
display: grid;
gap: 0.4rem;
}

.form__field label {
color: var(--color-blue-dark);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.form__field input,
.form__field textarea {
inline-size: 100%;
min-block-size: 3rem;
padding: 0.75rem 0.9rem;
border: 0.0625rem solid var(--color-line);
border-radius: 0;
background: var(--color-paper);
color: var(--color-ink);
font: inherit;
}

.form__field textarea {
min-block-size: 7rem;
resize: vertical;
}

.form__field input:focus-visible,
.form__field textarea:focus-visible {
border-color: var(--color-blue);
outline: 0.15rem solid rgb(3 63 123 / 22%);
outline-offset: 0.1rem;
}

/* ==========================================
  📍 [SETOR: CONTATO E CONVERSÃO] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: RODAPÉ GLOBAL] - Início
  O que faz: estiliza marca, mapas de navegação, contato e faixa legal.
  Como/por quê: grid auto-fit atende às três rotas com a mesma estrutura.
  I/O: .site-footer e filhos; saída compartilhada.
  [AI-NOTE]: links e conteúdo são definidos individualmente em cada HTML.
  ========================================== */

.site-footer {
border-block-start: 0.0625rem solid var(--color-line-light);
background: var(--color-blue-dark);
color: var(--color-champagne);
}

.site-footer__grid {
display: grid;
padding-block: clamp(3rem, 7vw, 5rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: var(--space-lg);
}

.site-footer__brand img {
inline-size: 100%;
max-inline-size: 11.5rem;
}

.site-footer__brand p {
max-inline-size: 23rem;
margin-block-start: 1rem;
color: rgb(248 245 232 / 64%);
font-size: 0.9rem;
}

.footer-nav h2,
.footer-contact h2 {
margin-block-end: 1rem;
color: var(--color-mint);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.footer-nav ul,
.footer-contact {
display: grid;
align-content: start;
gap: 0.45rem;
}

.footer-nav a,
.footer-contact a {
color: var(--color-champagne);
font-size: 0.9rem;
text-decoration: none;
overflow-wrap: anywhere;
}

.footer-nav a:hover,
.footer-contact a:hover {
color: var(--color-pink);
}

.site-footer__bottom {
display: flex;
padding-block: 1rem;
border-block-start: 0.0625rem solid var(--color-line-light);
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1.5rem;
color: rgb(248 245 232 / 52%);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.site-footer__signature {
padding-block: 0.75rem;
border-block-start: 0.0625rem solid var(--color-line-light);
color: rgb(248 245 232 / 52%);
font-family: inherit;
text-align: center;
}

.site-footer__signature small {
font-size: 0.68rem;
letter-spacing: 0.06em;
}

/* ==========================================
  📍 [SETOR: RODAPÉ GLOBAL] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: CONTEÚDO EDITORIAL] - Início
  O que faz: formata prosa longa, leads, subtítulos e citações.
  Como/por quê: largura de leitura e line-height controlam legibilidade.
  I/O: .prose e descendentes; saída tipográfica para artigos/manifestos.
  [AI-NOTE]: evite seletores mais específicos que impeçam variações por página.
  ========================================== */

.prose {
max-inline-size: var(--content-narrow);
color: #343434;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 2vw, 1.15rem);
line-height: 1.8;
}

.prose > * + * {
margin-block-start: 1.35em;
}

.prose__lead {
color: var(--color-blue-dark);
font-family: var(--font-sans);
font-size: clamp(1.2rem, 2.5vw, 1.55rem);
font-weight: 400;
line-height: 1.5;
}

.prose h3 {
padding-block-start: 0.65em;
color: var(--color-blue-dark);
font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.prose blockquote {
padding: 1.25rem 0 1.25rem 1.5rem;
border-inline-start: 0.2rem solid var(--color-pink-dark);
color: var(--color-blue-dark);
font-size: clamp(1.35rem, 3vw, 2rem);
line-height: 1.35;
}

/* ==========================================
  📍 [SETOR: CONTEÚDO EDITORIAL] - Fim
  ========================================== */

/* ==========================================
  📍 [SETOR: PÁGINA DO BLOG] - Início
  O que faz: estiliza hero, artigo, capa, layout, CTA, vídeo e posts.
  Como/por quê: regras específicas complementam componentes compartilhados.
  I/O: classes exclusivas de blog.html; saída editorial completa.
  [AI-NOTE]: iframe depende de .video-embed__frame para proporção 16:9.
  ========================================== */

.blog-hero {
padding-block: clamp(3rem, 6vw, 4.5rem);
border-block-end: 0.0625rem solid var(--color-line);
background: var(--color-champagne);
text-align: left;
}

.blog-hero__content {
display: grid;
justify-items: start;
gap : var(--space-md);
}

/* ---------- Artigo: cabeçalho editorial ---------- */

.article {
padding-block: clamp(2rem, 4.5vw, 3.5rem) var(--section-space);
}

.article__header {
display: grid;
gap: var(--space-md);
text-align: left;
}

.article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.article__meta > span:first-child {
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: var(--color-mint);
color: var(--color-blue-dark);
}

.article__meta time,
.article__meta > span:not(:first-child) {
color: var(--color-muted);
font-weight: 500;
}

.article__meta time::before,
.article__meta > span:not(:first-child)::before {
content: "·";
margin-inline-end: 0.6rem;
color: var(--color-muted);
}

.article__header h2 {
max-inline-size: 20ch;
font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.article__summary {
max-inline-size: 40rem;
color: var(--color-muted);
font-family: var(--font-sans);
font-size: clamp(1.05rem, 2vw, 1.2rem);
font-weight: 300;
}

/* ---------- Artigo: capa ---------- */

.article__cover {
margin-block: clamp(2rem, 5vw, 3.5rem) 0;
}

.article__cover img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border: 0.0625rem solid var(--color-line);
}

.article__cover figcaption {
margin-block-start: 0.75rem;
color: var(--color-muted);
font-family: var(--font-sans);
font-size: 0.8rem;
font-style: italic;
}

/* ---------- Artigo: layout de leitura + apoio ---------- */

.article-layout {
display: grid;
margin-block-start: clamp(2.5rem, 5vw, 4rem);
gap: var(--space-xl);
}

/* Empilha a vitrine de fotos e o CTA na coluna lateral direita do artigo,
   na mesma faixa (minmax(16rem, 19rem)) reservada antes só para o CTA —
   texto principal permanece à esquerda, sem sobreposição. display: grid
   (em vez de flex) preserva o comportamento de largura de .article-cta:
   justify-self:stretch por padrão continua preenchendo a coluna mesmo com
   align-self:start aplicado nela. */
.article-layout__aside {
display: grid;
gap: var(--space-xl);
align-content: start;
}

.article-cta {
align-self: start;
padding: clamp(1.5rem, 4vw, 2rem);
border: 0.0625rem solid var(--color-blue);
background: var(--color-champagne);
box-shadow: clamp(0.3rem, 1vw, 0.6rem) clamp(0.3rem, 1vw, 0.6rem) 0 var(--color-mint);
}

.article-cta h3 {
margin-block-start: 1rem;
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.article-cta > p:not(.section-index) {
margin-block-start: 1rem;
color: var(--color-muted);
}

.article-cta .button {
margin-block-start: var(--space-md);
}

/* ---------- Artigo: vídeo incorporado ---------- */

.video-embed {
margin-block-start: clamp(2rem, 5vw, 3rem);
}

.video-embed h3 {
font-size: clamp(1.35rem, 2.5vw, 1.7rem);
}

.video-embed__frame {
position: relative;
margin-block-start: 1rem;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 0.0625rem solid var(--color-line);
background: var(--color-blue-dark);
}

.video-embed__frame iframe {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
}

@media (min-width: 64rem) {
.article-layout {
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  align-items: start;
}

.article-cta {
  position: sticky;
  top: clamp(5rem, 9vw, 7rem);
}
}

/* ---------- Cartões de post: metadados e status ---------- */

.post-card {
transition: border-color var(--transition), transform var(--transition);
}

.post-card__meta {
color: var(--color-pink-dark);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.post-card h3 {
margin-block-start: 0.85rem;
}

.post-card__status {
display: inline-flex;
margin-block-start: auto;
padding-block-start: 1.75rem;
align-items: center;
gap: 0.5rem;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.post-card__status::before {
content: "";
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: 50%;
background: var(--color-mint);
}

.post-card:hover {
border-color: var(--color-blue);
transform: translateY(-0.2rem);
}

/* ==========================================
  📍 [SETOR: OTIMIZAÇÃO GLOBAL PARA MOBILE] - Início
  O que faz: contém o layout e empilha componentes abaixo de 768px.
  Como/por quê: sobrescreve apenas dimensões e alinhamento, preservando o design system.
  I/O: páginas globais; saída sem overflow horizontal e com áreas de toque adequadas.
  ========================================== */

@media (max-width: 47.9375rem) {
main,
section {
  max-inline-size: 100%;
}

html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
  overscroll-behavior-inline: none;
}

.container,
.hero__grid > *,
.challenge-layout > *,
.contact__grid > *,
.deliveries-grid > *,
.card-grid > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

#titulo-principal{

        width:100%;

        max-width:100%;

        padding:0;

        font-size:clamp(2rem,8vw,3.3rem);

        line-height:1.1;

        overflow-wrap:anywhere;

        hyphens:auto;

    }

.hero__content {
  padding-block: clamp(3rem, 12vw, 4.5rem);
}

img,
svg,
video,
iframe,
.media-frame,
.media-frame img {
  max-inline-size: 100%;
}

.hero__grid,
.challenge-layout,
.contact__grid,
.deliveries-grid,
.card-grid,
.faq-grid,
.banner-split__grid,
.pill-row {
  grid-template-columns: minmax(0, 1fr);
}

.form,
.form__field,
.form__field input,
.form__field select,
.form__field textarea {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.form__field input,
.form__field select {
  min-block-size: 3rem;
}

.form__field textarea {
  min-block-size: 8rem;
}

.principles__list,
.tabs,
[role="tablist"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.principles__list li,
.tabs > *,
[role="tablist"] > * {
  inline-size: 100%;
  max-inline-size: 100%;
  white-space: normal;
}

.button-group,
.contact-card__actions,
.site-footer__bottom {
  flex-direction: column;
  align-items: stretch;
}

.button-group .button,
.contact-card__actions .button {
  inline-size: 100%;
  justify-content: center;
}
}

/* ==========================================
  📍 [SETOR: OTIMIZAÇÃO GLOBAL PARA MOBILE] - Fim
  ========================================== */