/* =========================================================
   eMini | Design System (padrão Kestriah)
   Prefixo de classe: em-
   Fontes reais de producao (Google Fonts, ja usadas no site):
   Poppins (texto/UI) + Montserrat (titulos/destaque)
   Paleta real confirmada em wp-content/uploads/elementor/css
   (post-1838.css, home) + pasta de identidade "Nova ID".
   ========================================================= */

:root{
  /* ---------- Cores de marca (uso real, nao so manual) ---------- */
  --em-pink: #EC728C;      /* variação de marca para CTAs e outros tópicos */
  --em-pink-600: #E2557A;
  --em-pink-700: #C63F63;  /* tom mais escuro: hover / estado de erro */
  --em-pink-100: #FDE7EC;

  --em-teal: #00A49C;      /* verde-agua, segunda cor mais usada */
  --em-teal-600: #018E87;
  --em-teal-100: #DFF5F3;

  --em-blue: #00A0C7;      /* azul ciano, acento tecnologico */
  --em-blue-600: #0086A8;
  --em-blue-100: #E1F5FA;

  --em-yellow: #FCD466;    /* amarelo quente, destaque calido */
  --em-yellow-600: #F0BB2E;
  --em-yellow-100: #FDF3D9;

  --em-navy-900: #263440;  /* derivado escuro do azul-acinzentado real, p/ fundo escuro e texto de alto contraste */
  --em-navy-700: #374C5C;
  --em-navy-600: #475E70;  /* cor real do logotipo em cinza-azulado */
  --em-navy-300: #8CA0AC;
  --em-navy-100: #E7ECEF;

  --em-cream: #F5F3E9;     /* fundo claro real (bg dominante) */
  --em-cream-dark: #ECE8D8;
  --em-white: #FFFFFF;

  --em-red: #FF3560;       /* vermelho vivo: estado ativo de aba/accordion no site real */
  --em-black: #111111;     /* preto quase puro real (background das secoes escuras) */

  /* ---------- Papeis semanticos ---------- */
  --em-bg: var(--em-cream);
  --em-bg-alt: var(--em-white);
  --em-text: var(--em-navy-900);
  --em-text-muted: var(--em-navy-700);
  --em-text-on-dark: var(--em-cream);
  --em-text-on-dark-muted: var(--em-navy-100);
  --em-border: rgba(38, 52, 64, 0.10);
  --em-border-dark: rgba(245, 243, 233, 0.16);

  --em-success: var(--em-teal);
  --em-warning: var(--em-yellow-600);
  --em-info: var(--em-blue);
  --em-danger: var(--em-pink-700);

  /* ---------- Gradientes reais (combinacoes da propria paleta) ---------- */
  --em-gradient-warm: linear-gradient(135deg, var(--em-pink) 0%, var(--em-yellow) 100%);
  --em-gradient-cool: linear-gradient(135deg, var(--em-teal) 0%, var(--em-blue) 100%);
  --em-gradient-dark: linear-gradient(160deg, var(--em-navy-900) 0%, var(--em-navy-700) 60%, var(--em-teal-600) 140%);
  --em-gradient-glow: radial-gradient(60% 60% at 50% 30%, rgba(236,114,140,0.20), rgba(236,114,140,0) 70%);

  /* ---------- Tipografia ---------- */
  --em-font-display: "Montserrat", "Poppins", sans-serif;
  --em-font-body: "Poppins", "Montserrat", sans-serif;

  /* ---------- Espacamento / forma ---------- */
  --em-radius-sm: 10px;
  --em-radius-md: 18px;
  --em-radius-lg: 28px;
  --em-radius-pill: 999px;
  --em-container: 1220px;
  --em-gutter: clamp(20px, 5vw, 64px);

  /* ---------- Sombra premium (tingida de navy, nao cinza puro) ---------- */
  --em-shadow-sm: 0 2px 10px rgba(38, 52, 64, 0.08);
  --em-shadow-md: 0 14px 34px rgba(38, 52, 64, 0.12);
  --em-shadow-lg: 0 28px 64px rgba(38, 52, 64, 0.18);
  --em-shadow-pink: 0 18px 40px rgba(236, 114, 140, 0.35);

  /* ---------- Movimento ---------- */
  --em-ease: cubic-bezier(.16, 1, .3, 1);
  --em-fast: .2s;
  --em-base: .5s;
  --em-slow: .9s;
}

/* =========================================================
   Reset leve + base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--em-font-body);
  background: var(--em-bg);
  color: var(--em-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }
::selection{ background: var(--em-pink); color: var(--em-white); }

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

.em-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Foco visivel e consistente em todo elemento interativo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.em-logo-tile:focus-visible{
  outline: 2px solid var(--em-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   Tipografia
   ========================================================= */
h1, h2, h3, h4, h5, h6{
  font-family: var(--em-font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--em-text);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem); }
/* Titulos de secao (regra global, vale pra pagina inteira): fonte um
   pouco menor e cresce mais devagar com a tela, pra caber mais
   palavras por linha e nao empilhar em 5-6 linhas curtas dentro das
   colunas estreitas do layout (Para quem, Diferenciais, Vantagens...). */
h2{ font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.55rem); }
h3{ font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 700; }
h4{ font-size: 1.25rem; font-weight: 700; }
h5{ font-size: 1.05rem; font-weight: 600; }
h6{ font-size: .9rem; font-weight: 600; }

p{ margin: 0 0 1em; color: var(--em-text-muted); }
.em-lead{ font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--em-text-muted); }
.em-caption{ font-size: .85rem; color: var(--em-text-muted); font-weight: 500; }
.em-label{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--em-pink-700);
}
.em-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-teal-600);
  background: var(--em-teal-100);
  padding: .45em 1em;
  border-radius: var(--em-radius-pill);
  margin-bottom: 1em;
}
.em-eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--em-teal);
}
.em-section-head{
  max-width: 640px;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.2rem);
}
.em-section-head p{ margin-top: .75em; }
.em-section-head.em-center{ margin-left: auto; margin-right: auto; text-align: center; }

.em-on-dark h1, .em-on-dark h2, .em-on-dark h3, .em-on-dark h4{ color: var(--em-text-on-dark); }
.em-on-dark p, .em-on-dark .em-lead{ color: var(--em-text-on-dark-muted); }

/* =========================================================
   Grid utilitario
   ========================================================= */
.em-grid{ display: grid; gap: clamp(18px, 2vw, 28px); }
.em-grid--2{ grid-template-columns: repeat(2, 1fr); }
.em-grid--3{ grid-template-columns: repeat(3, 1fr); }
.em-grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .em-grid--3, .em-grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .em-grid--2, .em-grid--3, .em-grid--4{ grid-template-columns: 1fr; }
}

/* =========================================================
   Botoes
   ========================================================= */
.em-btn{
  --em-btn-fg: var(--em-white);
  --em-btn-bg: var(--em-pink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.9em;
  border-radius: var(--em-radius-pill);
  border: 1px solid transparent;
  background: var(--em-btn-bg);
  color: var(--em-btn-fg);
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
  transition: transform var(--em-fast) var(--em-ease),
              box-shadow var(--em-fast) var(--em-ease),
              background-color var(--em-fast) var(--em-ease),
              border-color var(--em-fast) var(--em-ease),
              color var(--em-fast) var(--em-ease);
  will-change: transform;
}
.em-btn svg, .em-btn img{ width: 18px; height: 18px; }

.em-btn--primary{ --em-btn-bg: var(--em-pink); --em-btn-fg: var(--em-white); box-shadow: var(--em-shadow-pink); }
.em-btn--primary:hover{ background: var(--em-pink-600); transform: translateY(-3px); box-shadow: 0 22px 46px rgba(236,114,140,.42); }
.em-btn--primary:active{ transform: translateY(-1px) scale(.98); box-shadow: 0 10px 22px rgba(236,114,140,.35); }

.em-btn--secondary{
  --em-btn-bg: transparent; --em-btn-fg: var(--em-navy-900);
  border-color: var(--em-navy-900);
}
.em-btn--secondary:hover{ background: var(--em-navy-900); color: var(--em-cream); transform: translateY(-3px); }
.em-btn--secondary:active{ transform: translateY(-1px) scale(.98); }

.em-btn--on-dark{ --em-btn-bg: transparent; --em-btn-fg: var(--em-cream); border-color: var(--em-border-dark); }
.em-btn--on-dark:hover{ background: var(--em-cream); color: var(--em-navy-900); transform: translateY(-3px); }

.em-btn--ghost{
  --em-btn-bg: transparent; --em-btn-fg: var(--em-navy-900);
  padding: .5em 0; border-radius: 0;
}
.em-btn--ghost:hover{ color: var(--em-pink-700); gap: .9em; }

.em-btn:disabled, .em-btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.3);
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Inputs
   ========================================================= */
.em-field{ display: flex; flex-direction: column; gap: .5em; text-align: left; }
.em-field label{ font-size: .85rem; font-weight: 600; color: var(--em-text); }
.em-input{
  width: 100%;
  padding: .95em 1.1em;
  border-radius: var(--em-radius-sm);
  border: 1.5px solid var(--em-border);
  background: var(--em-white);
  color: var(--em-text);
  font-size: .96rem;
  transition: border-color var(--em-fast) var(--em-ease), box-shadow var(--em-fast) var(--em-ease);
}
.em-input::placeholder{ color: var(--em-navy-300); }
.em-input:hover{ border-color: var(--em-navy-300); }
.em-input:focus{
  outline: none;
  border-color: var(--em-pink);
  box-shadow: 0 0 0 4px var(--em-pink-100);
}
.em-input:disabled{ background: var(--em-cream-dark); color: var(--em-navy-300); cursor: not-allowed; }
.em-input.is-invalid{ border-color: var(--em-danger); box-shadow: 0 0 0 4px var(--em-pink-100); }
.em-hint{ font-size: .78rem; color: var(--em-text-muted); }
.em-hint.is-invalid{ color: var(--em-danger); font-weight: 600; }

/* =========================================================
   Cards
   ========================================================= */
.em-card{
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-lg);
  padding: clamp(24px, 2vw, 34px);
  box-shadow: var(--em-shadow-sm);
  transition: transform var(--em-base) var(--em-ease), box-shadow var(--em-base) var(--em-ease), border-color var(--em-base) var(--em-ease);
}
.em-card:hover{ transform: translateY(-8px); box-shadow: var(--em-shadow-lg); border-color: transparent; }

.em-card--dark{
  background: var(--em-gradient-dark);
  border-color: var(--em-border-dark);
  color: var(--em-text-on-dark);
}
.em-card--dark h3, .em-card--dark h4{ color: var(--em-text-on-dark); }
.em-card--dark p{ color: var(--em-text-on-dark-muted); }

.em-card__icon{
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--em-radius-sm);
  background: var(--em-pink-100);
  margin-bottom: 1.1em;
}
.em-card__icon img{ width: 24px; height: 24px; }
.em-card--dark .em-card__icon{ background: rgba(245,243,233,0.12); }

/* Logo tile (secao Marca) */
.em-logo-tile{
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
  padding: 28px;
  background: var(--em-white);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius-md);
  box-shadow: var(--em-shadow-sm);
  transition: transform var(--em-base) var(--em-ease), box-shadow var(--em-base) var(--em-ease);
}
.em-logo-tile img{ max-height: 52px; width: auto; position: relative; z-index: 1; }
.em-logo-tile:hover{ transform: translateY(-6px); box-shadow: var(--em-shadow-md); }
.em-logo-tile--dark{ background: var(--em-gradient-dark); border-color: var(--em-border-dark); }

/* Vitrine da marca: variacoes maiores + aplicacoes reais */
.em-logo-tile--hero{ min-height: 220px; padding: 40px; }
.em-logo-tile--hero img{ max-height: 76px; }
.em-logo-tile--tint-teal{ background: var(--em-teal-100); border-color: transparent; }
.em-logo-tile--tint-navy{ background: var(--em-navy-100); border-color: transparent; }
.em-logo-tile--icon{
  background: var(--em-gradient-dark);
  border: none;
  border-radius: 26px;
}
.em-logo-tile--icon img{ max-height: 44px; }
.em-logo-tile--photo{
  position: relative;
  background-size: cover;
  background-position: center;
  border: none;
  overflow: hidden;
}
.em-logo-tile--photo::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,52,64,.25) 0%, rgba(38,52,64,.8) 100%);
}
.em-logo-tile--photo img{ max-height: 44px; }

/* =========================================================
   Badges
   ========================================================= */
.em-badge{
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1.1em;
  border-radius: var(--em-radius-pill);
  font-size: .82rem;
  font-weight: 700;
}
.em-badge--pink{ background: var(--em-pink-100); color: var(--em-pink-700); }
.em-badge--teal{ background: var(--em-teal-100); color: var(--em-teal-600); }
.em-badge--yellow{ background: var(--em-yellow-100); color: #8A6110; }
.em-badge--blue{ background: var(--em-blue-100); color: var(--em-blue-600); }
.em-badge--outline{ background: transparent; border: 1.5px solid var(--em-border-dark); color: var(--em-cream); }

/* =========================================================
   Navbar
   ========================================================= */
.em-nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 243, 233, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--em-border);
}
.em-nav__row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  padding: 6px var(--em-gutter);
  max-width: var(--em-container);
  margin: 0 auto;
  min-height: 88px;
}
.em-nav__logo{
  display: flex; align-items: center;
  flex: 0 1 auto; min-width: 0;
  padding: 4px 0;
}
.em-nav__logo img{
  display: block;
  height: 76px; width: auto;
  object-fit: contain;
  object-position: left center;
}
.em-nav__links{ display: flex; align-items: center; gap: 2.1rem; }
.em-nav__links a{
  font-size: .92rem; font-weight: 600; color: var(--em-text-muted);
  position: relative;
  transition: color var(--em-fast) var(--em-ease);
}
.em-nav__links a::after{
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--em-pink);
  transition: width var(--em-fast) var(--em-ease);
}
.em-nav__links a:hover{ color: var(--em-text); }
.em-nav__links a:hover::after{ width: 100%; }
.em-nav__actions{ display: flex; align-items: center; gap: 1rem; }
.em-nav__toggle{
  display: none; width: 42px; height: 42px; border-radius: var(--em-radius-sm);
  border: 1px solid var(--em-border); background: var(--em-white);
  align-items: center; justify-content: center; cursor: pointer;
}
.em-nav__toggle span, .em-nav__toggle span::before, .em-nav__toggle span::after{
  content: ""; display: block; width: 18px; height: 2px; background: var(--em-navy-900);
  position: relative; transition: transform var(--em-fast) var(--em-ease), opacity var(--em-fast) var(--em-ease);
}
.em-nav__toggle span::before{ position: absolute; top: -6px; }
.em-nav__toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 860px){
  .em-nav__row{ min-height: 76px; }
  .em-nav__logo img{ height: 62px; }
  .em-nav__links{
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--em-cream);
    border-bottom: 1px solid var(--em-border);
    max-height: 0; overflow: hidden;
    transition: max-height var(--em-base) var(--em-ease);
  }
  .em-nav__links a{ padding: 14px var(--em-gutter); width: 100%; }
  .em-nav.is-open .em-nav__links{ max-height: 420px; }
  .em-nav__toggle{ display: inline-flex; }
  .em-nav__actions .em-btn--primary{ display: none; }
}

/* =========================================================
   Tooltip simples
   ========================================================= */
.em-tooltip{ position: relative; display: inline-flex; }
.em-tooltip::after{
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--em-navy-900); color: var(--em-cream);
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  padding: .5em .9em; border-radius: var(--em-radius-sm);
  opacity: 0; pointer-events: none;
  transition: opacity var(--em-fast) var(--em-ease), transform var(--em-fast) var(--em-ease);
}
.em-tooltip:hover::after, .em-tooltip:focus-visible::after{
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* =========================================================
   Tabela de referencia tipografica (responsiva)
   ========================================================= */
.em-type-table{ width: 100%; border-collapse: collapse; }
.em-type-table tr{ border-bottom: 1px solid var(--em-border); }
.em-type-table tr:last-child{ border-bottom: none; }
.em-type-table td{ padding: 18px 8px; vertical-align: middle; }
.em-type-table td[data-col="tag"]{ width: 70px; white-space: nowrap; }
.em-type-table td[data-col="sample"]{ width: auto; }
.em-type-table td[data-col="meta"]{ width: 220px; text-align: right; white-space: nowrap; }

@media (max-width: 720px){
  .em-type-table, .em-type-table tbody{ display: block; width: 100%; }
  .em-type-table tr{ display: flex; flex-wrap: wrap; padding: 14px 0; row-gap: 6px; }
  .em-type-table td{ padding: 0; display: block; }
  .em-type-table td[data-col="tag"]{ width: 100%; order: 1; }
  .em-type-table td[data-col="sample"]{ width: 100%; order: 2; }
  .em-type-table td[data-col="sample"] span{ word-break: break-word; }
  .em-type-table td[data-col="meta"]{
    width: 100%; order: 3; text-align: left; white-space: normal;
    color: var(--em-text-muted); margin-top: 2px;
  }
}

/* =========================================================
   Tabs
   ========================================================= */
.em-tabs__nav{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.em-tabs__btn{
  padding: .7em 1.3em; border-radius: var(--em-radius-pill);
  border: 1.5px solid var(--em-border);
  background: var(--em-white); color: var(--em-text-muted);
  font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: all var(--em-fast) var(--em-ease);
}
.em-tabs__btn:hover{ border-color: var(--em-pink); color: var(--em-text); }
.em-tabs__btn.is-active{ background: var(--em-navy-900); border-color: var(--em-navy-900); color: var(--em-cream); }
.em-tabs__panel{ display: none; }
.em-tabs__panel.is-active{ display: block; }

/* =========================================================
   Swatches de cor (clique copia o hex)
   ========================================================= */
.em-swatch{
  border-radius: var(--em-radius-md);
  overflow: hidden;
  border: 1px solid var(--em-border);
  background: var(--em-white);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform var(--em-fast) var(--em-ease), box-shadow var(--em-fast) var(--em-ease);
}
.em-swatch:hover{ transform: translateY(-4px); box-shadow: var(--em-shadow-md); }
.em-swatch__fill{ display: block; width: 100%; height: 92px; }
.em-swatch__meta{ display: block; padding: 14px 16px; }
.em-swatch__meta strong{ display: block; font-size: .92rem; }
.em-swatch__meta span{ font-size: .78rem; color: var(--em-text-muted); font-family: monospace; }
.em-swatch__copied::after{
  content: "Copiado!";
  position: absolute;
}

/* =========================================================
   Secoes / backgrounds
   ========================================================= */
.em-section{ position: relative; padding: clamp(64px, 8vw, 120px) 0; overflow: hidden; }
.em-section--light{ background: var(--em-bg-alt); }
.em-section--cream{ background: var(--em-bg); }

.em-section--glow{ background: var(--em-bg-alt); }
.em-section--glow .em-glow{
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .55; pointer-events: none; z-index: 0;
}
.em-glow--pink{ width: 460px; height: 460px; background: var(--em-pink); top: -120px; left: -100px; }
.em-glow--teal{ width: 420px; height: 420px; background: var(--em-teal); bottom: -140px; right: -80px; }
.em-glow--yellow{ width: 360px; height: 360px; background: var(--em-yellow); top: 30%; right: 10%; }
.em-section--glow > .em-container{ position: relative; z-index: 1; }

.em-section--gradient{
  background: linear-gradient(180deg, var(--em-cream) 0%, var(--em-pink-100) 48%, var(--em-cream) 100%);
}

.em-section--dark{ background: var(--em-gradient-dark); color: var(--em-text-on-dark); }
.em-section--dark h2, .em-section--dark h3{ color: var(--em-text-on-dark); }
.em-section--dark p{ color: var(--em-text-on-dark-muted); }

.em-section--photo{ color: var(--em-text-on-dark); }
.em-section--photo .em-photo-bg{
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.em-section--photo .em-photo-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(38,52,64,.55) 0%, rgba(38,52,64,.85) 100%);
}
.em-section--photo > .em-container{ position: relative; z-index: 2; }
.em-section--photo h2, .em-section--photo h3{ color: var(--em-text-on-dark); }
.em-section--photo p{ color: var(--em-text-on-dark-muted); }

.em-noise{
  position: absolute; inset: 0;
  background-image: url("../img/pattern/noise.webp");
  background-size: 420px;
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* =========================================================
   Hero
   ========================================================= */
.em-hero{
  position: relative;
  padding: clamp(56px, 8vw, 88px) 0 clamp(70px, 9vw, 120px);
  background: var(--em-cream);
  overflow: hidden;
}
.em-hero__blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  animation: em-float 12s ease-in-out infinite;
}
.em-hero__blob--1{ width: 520px; height: 520px; background: var(--em-pink); opacity: .35; top: -180px; right: -120px; }
.em-hero__blob--2{ width: 420px; height: 420px; background: var(--em-teal); opacity: .3; bottom: -160px; left: -120px; animation-delay: -6s; }
.em-hero__blob--3{ width: 260px; height: 260px; background: var(--em-yellow); opacity: .4; top: 40%; left: 8%; animation-delay: -3s; }

.em-hero__grid{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.em-hero__title{ margin-bottom: .4em; }
.em-hero__title .em-highlight{
  background: var(--em-gradient-warm);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.em-hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.8em 0; }
.em-hero__stats{ display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.2rem; }
.em-hero__stat strong{ display: block; font-family: var(--em-font-display); font-size: 1.9rem; color: var(--em-navy-900); }
.em-hero__stat span{ font-size: .82rem; color: var(--em-text-muted); }

.em-hero__visual{ position: relative; }
.em-hero__frame{
  position: relative;
  border-radius: var(--em-radius-lg);
  overflow: hidden;
  box-shadow: var(--em-shadow-lg);
  aspect-ratio: 4 / 5;
}
.em-hero__frame img{ width: 100%; height: 100%; object-fit: cover; }
.em-hero__frame::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(236,114,140,.28), rgba(0,164,156,0) 55%);
  mix-blend-mode: multiply;
}

.em-float-card{
  position: absolute;
  background: var(--em-white);
  border-radius: var(--em-radius-md);
  box-shadow: var(--em-shadow-md);
  padding: 14px 18px;
  display: flex; align-items: center; gap: .7rem;
  animation: em-float 7s ease-in-out infinite;
}
.em-float-card strong{ display: block; font-size: 1rem; color: var(--em-navy-900); }
.em-float-card span{ font-size: .74rem; color: var(--em-text-muted); }
.em-float-card--top{ top: 6%; left: -8%; animation-delay: -1.5s; }
.em-float-card--bottom{ bottom: 8%; right: -10%; animation-delay: -4s; }
.em-float-card__dot{
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--em-teal-100); color: var(--em-teal-600); font-weight: 800;
}

@keyframes em-float{
  0%, 100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-16px) translateX(6px); }
}

/* =========================================================
   Comparativo (jornada de compra, conteudo real)
   ========================================================= */
.em-section--jornada{
  background: var(--em-cream);
}
.em-section--jornada .em-section-head p{ color: var(--em-navy-700); }
.em-compare{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.em-compare__card{
  border-radius: var(--em-radius-lg);
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--em-border);
}
.em-compare__card p{ margin: 0; color: var(--em-navy-700); font-size: 1rem; line-height: 1.55; }
.em-compare__card--win{
  background: var(--em-white);
  border-color: var(--em-teal-100);
  box-shadow: var(--em-shadow-md);
}
.em-compare__card--lose{
  background: var(--em-pink-100);
  border-color: transparent;
  opacity: 1;
}
.em-compare__time{
  font-family: var(--em-font-display);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem);
  font-weight: 800;
  margin: .45em 0 0;
  color: var(--em-navy-900);
}
.em-compare__card--win .em-compare__time{ color: var(--em-teal-600); }
.em-compare__card--lose .em-compare__time{ color: var(--em-pink-700); }
.em-compare__bar{ height: 10px; border-radius: var(--em-radius-pill); background: rgba(38, 52, 64, .12); overflow: hidden; margin: 1.2em 0 1.5em; }
.em-compare__bar span{ display: block; height: 100%; border-radius: var(--em-radius-pill); }
.em-compare__card--win .em-compare__bar span{ width: 11%; background: var(--em-teal); }
.em-compare__card--lose .em-compare__bar span{ width: 100%; background: var(--em-pink); }
.em-compare__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.em-compare__step{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .85rem;
  align-items: start;
  padding: .95rem 1rem;
  border-radius: var(--em-radius-md);
  background: var(--em-cream);
}
.em-compare__step-num{
  font-family: var(--em-font-display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  line-height: 1;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--em-navy-100);
  color: var(--em-navy-700);
}
.em-compare__step-label{
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .2em;
}
.em-compare__step strong{
  display: block;
  font-family: var(--em-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--em-navy-900);
  margin-bottom: .2em;
}
.em-compare__step p{
  font-size: .92rem;
  color: var(--em-navy-700);
}
.em-compare__card--win .em-compare__step.is-go{
  background: var(--em-teal-100);
}
.em-compare__card--win .em-compare__step.is-go .em-compare__step-num,
.em-compare__card--win .em-compare__step.is-go .em-compare__step-label,
.em-compare__card--win .em-compare__step.is-go strong{ color: var(--em-teal-600); }
.em-compare__card--win .em-compare__step.is-go .em-compare__step-num{ background: rgba(0,164,156,.16); }
.em-compare__card--win .em-compare__step.is-stay{
  background: var(--em-yellow-100);
}
.em-compare__card--win .em-compare__step.is-stay .em-compare__step-num,
.em-compare__card--win .em-compare__step.is-stay .em-compare__step-label,
.em-compare__card--win .em-compare__step.is-stay strong{ color: #8A6110; }
.em-compare__card--win .em-compare__step.is-stay .em-compare__step-num{ background: rgba(252,212,102,.4); }
.em-compare__card--win .em-compare__step.is-pick{
  background: var(--em-navy-100);
}
.em-compare__card--win .em-compare__step.is-pick .em-compare__step-num,
.em-compare__card--win .em-compare__step.is-pick .em-compare__step-label,
.em-compare__card--win .em-compare__step.is-pick strong{ color: var(--em-navy-700); }
.em-compare__card--lose .em-compare__step{
  background: rgba(255,255,255,.72);
}
.em-compare__card--lose .em-compare__step.is-go .em-compare__step-num,
.em-compare__card--lose .em-compare__step.is-go .em-compare__step-label,
.em-compare__card--lose .em-compare__step.is-go strong{ color: var(--em-pink-700); }
.em-compare__card--lose .em-compare__step.is-go .em-compare__step-num{ background: var(--em-pink-100); }
.em-compare__card--lose .em-compare__step.is-stay .em-compare__step-num,
.em-compare__card--lose .em-compare__step.is-stay .em-compare__step-label,
.em-compare__card--lose .em-compare__step.is-stay strong{ color: var(--em-pink-600); }
.em-compare__card--lose .em-compare__step.is-stay .em-compare__step-num{ background: #F8C9D3; }
.em-compare__card--lose .em-compare__step.is-pick .em-compare__step-num,
.em-compare__card--lose .em-compare__step.is-pick .em-compare__step-label,
.em-compare__card--lose .em-compare__step.is-pick strong{ color: var(--em-navy-600); }
.em-compare__card--lose .em-compare__step.is-pick .em-compare__step-num{ background: var(--em-navy-100); }
@media (max-width: 760px){ .em-compare{ grid-template-columns: 1fr; } }

/* =========================================================
   Marquee (parceiros / condominios reais do material comercial)
   ========================================================= */
.em-marquee{ position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.em-marquee__track{
  display: flex; gap: 3.2rem; width: max-content;
  animation: em-marquee 42s linear infinite;
}
.em-marquee:hover .em-marquee__track{ animation-play-state: paused; }
.em-marquee__item{
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--em-font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--em-navy-300); white-space: nowrap;
}
.em-marquee__item::before{ content: "\25CF"; color: var(--em-pink); font-size: .5rem; }
@keyframes em-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.em-reveal{ opacity: 0; transform: translateY(28px); transition: opacity var(--em-slow) var(--em-ease), transform var(--em-slow) var(--em-ease); }
.em-reveal.is-visible{ opacity: 1; transform: translateY(0); }
.em-reveal-delay-1.is-visible{ transition-delay: .1s; }
.em-reveal-delay-2.is-visible{ transition-delay: .2s; }
.em-reveal-delay-3.is-visible{ transition-delay: .3s; }

/* =========================================================
   Protecao de acessibilidade / performance
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .em-reveal{ opacity: 1; transform: none; }
  .em-marquee__track{ animation: none; }
  .em-hero__blob, .em-float-card{ animation: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.em-footer{ padding: 0; background: #0b1014; color: rgba(255,255,255,.78); }
.em-footer__top{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 32px; border-bottom: 1px solid var(--em-border-dark); }
.em-footer__links{ display: flex; gap: 2.4rem; flex-wrap: wrap; }
.em-footer__links a{ font-size: .9rem; font-weight: 600; color: var(--em-text-on-dark-muted); }
.em-footer__links a:hover{ color: var(--em-white); }
.em-footer__bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 24px; font-size: .8rem; }

/* =========================================================
   Responsivo geral
   ========================================================= */
@media (max-width: 960px){
  .em-hero__grid{ grid-template-columns: 1fr; }
  .em-hero__visual{ order: -1; max-width: 420px; margin: 0 auto; }
  .em-float-card{ display: none; }
}
@media (max-width: 640px){
  .em-hero__actions{ flex-direction: column; align-items: stretch; }
  .em-hero__stats{ gap: 1.4rem; }
}