/* =========================================================
   Emoticomm Health · Indústria v1 (homolog 19/10)
   Base = styles.css da página aprovada, sem mudança; aqui só o que é novo
   ========================================================= */

/* Topo: pergunta mais longa que a da página aprovada */
.hero h1.h1-longo {
  max-width: 17em;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

@media (max-width: 600px) {
  .hero h1.h1-longo {
    font-size: 1.7rem;
  }
}

/* sem o texto de apoio, os botões ganham o espaço que ele dava */
.hero h1.h1-longo + .hero-actions {
  margin-top: var(--space-md);
}

/* Cenário: mensagem-chave em azul de título, depois da lista (20/10) */
.cenario-fecho {
  max-width: 22em;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  font: 600 clamp(1.4rem, 2.4vw, 2rem)/1.18 var(--font-display);
  border-top: 2px solid var(--color-blue);
}

/* Pesquisa: 4 anéis com frases no lugar de 5 com palavras */
.charts.charts-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.charts-4 .chart span {
  max-width: 15em;
  font-size: 0.95rem;
  line-height: 1.45;
}

.chart[data-value="100"] { --offset: 0; }
.chart[data-value="73"] { --offset: 27; }
.chart[data-value="64"] { --offset: 36; }

@media (max-width: 960px) {
  .charts.charts-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-lg);
  }
}

.research-footer .source {
  white-space: normal; /* fonte mais longa: quebra no celular */
}

/* Quem somos: a frase-síntese em destaque */
.body-text-strong {
  font-weight: 600;
}

/* O que entregamos: frase longa no lugar do título curto */
.deliveries-title.deliveries-title-longo {
  max-width: 30em;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
}

.deliveries-intro {
  margin: 0 0 var(--space-md);
  font: 600 clamp(1.05rem, 1.4vw, 1.2rem)/1.4 var(--font-display);
}

/* Contato: "(opcional)" discreto no rótulo do campo */
.field small {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* Cenário (21/10): pôster vira carrossel aleatório, continua fixo ao rolar no computador */
.poster.poster-cenario { top: 110px; }
.poster-cenario img { aspect-ratio: 850 / 1080; object-fit: cover; }
.poster-cenario .poster-jaqueta { object-position: 50% 45%; }
.poster-cenario .poster-lenco { object-position: 50% 35%; }

/* Hero (22/10): dado e lâmpada amarelos sempre à vista */
.hero .hero-dados { object-position: 62% 58%; }
.hero .hero-lampada { object-position: 66% 45%; }

/* Frase amarela (23/10): "trajetória" em negrito e o anel passa ATRÁS das letras, um pouco mais aberto à esquerda */
.statement-text .circled {
  z-index: 0;
  font-weight: 700;
}

.statement-text .circled::after {
  z-index: -1;
  inset: -10% -5% -16% -9%;
}

/* Pesquisa no celular (23/10): com 4 anéis o último não ocupa a linha inteira (regra da página de 5 anéis) */
@media (max-width: 600px) {
  .charts.charts-4 .chart:last-child {
    grid-column: auto;
  }
}

/* O que entregamos em uma coluna (23/10): a foto vem logo depois do título, antes de "Ao oferecer..." */
@media (max-width: 960px) {
  .deliveries-section .container {
    display: flex;
    flex-direction: column;
  }

  .deliveries-section .deliveries-b {
    display: contents;
  }

  .deliveries-section .deliveries-b-photo {
    order: 1;
    margin: 0 0 var(--space-md);
  }

  .deliveries-section .deliveries-intro {
    order: 2;
  }

  .deliveries-section .deliveries-b > div {
    order: 3;
  }
}

/* tela de 320 px: o personagem da frase amarela passava da borda direita; corta só na horizontal (a cabeça sobe para a seção de cima) */
.statement {
  overflow-x: clip;
}

/* Cenário (23/10): 2ª metade do fechamento em preto (o marrom da marca, mesmo dos textos escuros) */
.cenario-fecho .cenario-destaque {
  color: var(--color-ink);
}