/* ==========================================================================
   Live & Learn Brazil — folha de estilos comum
   Versão grafite, ardósia e champagne com acento amora (canvas "Live and Learn Brazil Home").
   Tudo o que é compartilhado entre as páginas vive aqui: fontes, paleta,
   tipografia, header, hero, blocos reutilizáveis e footer. As páginas só
   trazem conteúdo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes locais (WOFF2 subsetados em /fonts, sem nenhuma chamada externa)
   Libertinus Sans (títulos), Open Sans (texto), PT Sans Narrow (menu
   superior) e Noto Sans SC só para os dois ideogramas de "中文".
   Subconjunto: latino, latino-1, latino estendido A/B, pontuação, setas.
   Licenças: SIL Open Font License 1.1 (ver fonts/LICENCA-*.txt).
   -------------------------------------------------------------------------- */
@font-face { font-family: "Libertinus Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libertinus-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Libertinus Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libertinus-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-700.woff2") format("woff2"); }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/pt-sans-narrow-400.woff2") format("woff2"); }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/pt-sans-narrow-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-sc-600.woff2") format("woff2"); unicode-range: U+4E2D, U+6587; }

/* --------------------------------------------------------------------------
   2. Variáveis: paleta, tipografia, medidas
   -------------------------------------------------------------------------- */
:root {
  /* Paleta principal (proporção aproximada de área na página)
     gelo 55% · ardósia 20% · champagne clara 10% · azul-gelo 8% · champagne 5% · amora 2% */
  --gelo: #F0F3F4;              /* 55%: fundo da página e do cabeçalho; texto sobre fundos escuros */
  --ardosia: #3E495F;           /* 20%: hero, filtro das fotos, card Destination, diagnóstico, faixa, rodapé */
  --champagne-claro: #F1EAD3;   /* 10%: superfície de apoio: card Innovation, caixa "What is new", texto da faixa */
  --azul-gelo: #F6F9FF;         /*  8%: cards claros (Portuguese, Intercultural) e fundo do botão */
  --champagne: #DCC792;         /*  5%: fios, sublinhados, numerais, pontos, curva do rodapé */
  --amora: #4E1F39;             /*  2%: acento: hover do menu, contorno e hover do botão, traços */
  --grafite: #333333;           /* texto corrido e títulos sobre fundo claro */

  /* Utilitárias fora da paleta */
  --branco: #FFFFFF;            /* cartelas dos QR codes (o branco puro garante a leitura) */
  --linha: rgba(51, 51, 51, 0.12);

  /* Transparências derivadas */
  --ardosia-rgb: 62, 73, 95;
  --creme-hero: rgba(241, 234, 211, 0.92);   /* parágrafo do hero: champagne clara a 92% */
  --painel-idiomas: rgba(220, 199, 146, 0.8); /* champagne a 80% ao lado do hero */

  /* Filtro das fotos recortadas entre os cards */
  --filtro-foto: saturate(0.8) brightness(1.15) contrast(0.8);
  --veu-foto: linear-gradient(160deg, rgba(var(--ardosia-rgb), 0.52), rgba(var(--ardosia-rgb), 0.18) 55%);
  --veu-foto-alta: linear-gradient(180deg, rgba(var(--ardosia-rgb), 0.66), rgba(49, 47, 44, 0.19));

  /* Tipografia */
  --fonte-titulo: "Libertinus Sans", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Open Sans", "Segoe UI", Arial, sans-serif;
  --fonte-menu: "PT Sans Narrow", "Arial Narrow", sans-serif;
  --fonte-idiomas: "Open Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;

  /* Medidas */
  --largura-max: 1440px;
  --margem: 56px;
  --coluna-gap: 24px;
  --altura-header: 132px;
  --altura-logo: 65px;

  /* Texto secundário: puxa para a ardósia, nunca cinza neutro.
     Contraste conferido: 5,9:1 sobre azul-gelo, 5,6:1 sobre gelo, 5,2:1 sobre champagne clara. */
  --texto-secundario: #56607A;
  --texto-sobre-ardosia: #C3CAD6;              /* texto secundário sobre ardósia, 7,6:1 */
  --linha-champagne: rgba(220, 199, 146, 0.28); /* fio champagne sobre ardósia */

  /* Tinta de dado (dashboard imobiliário). Só dentro de SVG, como linha,
     barra, fatia ou ponto. Nunca em botão, borda, fundo, título ou ícone.
     Ordem nas séries: ardósia → verde → coral → amarelo → verde escuro → champagne. */
  --dado-ardosia: #3E495F;
  --dado-verde: #8AAD34;
  --dado-amarelo: #F8E45E;
  --dado-coral: #E8674F;
  --dado-champagne: #DCC792;
  --dado-verde-esc: #3E5F4E;

  /* Movimento dos gráficos: lento e contínuo, uma vez, só em tinta de dado */
  --mov-linha: 20s;    /* traçado das linhas longas */
  --mov-area: 6s;      /* preenchimento do degradê sob a linha */
  --mov-barra: 1.6s;   /* crescimento de barra */
  --mov-arco: 2.4s;    /* gauge radial */
  --mov-bloco: 0.9s;   /* treemap, fatias de rosca */
  --mov-ponto: 0.012s; /* atraso entre pontos do mapa */
  --curva: cubic-bezier(.33, 0, .15, 1);
  --curva-linha: cubic-bezier(.2, 0, .35, 1); /* quase linear: em 20s, aceleração forte fica estranha */
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--gelo);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.08; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.page {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  background: var(--gelo);
  color: var(--grafite);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Chamada em caixa alta com sublinhado champagne (usada em todos os cards) */
.cta {
  align-self: flex-start;
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 17px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--champagne);
  transition: border-color 0.25s ease;
}
.cta:hover { border-color: currentColor; }
.cta--amora { border-bottom-color: var(--amora); }

/* Botão com contorno amora */
.btn {
  display: inline-block;
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 20px;
  line-height: 1;
  padding: 16px 26px;
  border: 1px solid var(--amora);
  color: var(--grafite);
  background: var(--azul-gelo);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn:hover { background: var(--amora); color: var(--gelo); }

/* Foto recortada com filtro ardósia */
.foto { position: relative; overflow: hidden; background: var(--ardosia); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--filtro-foto); }
.foto::after { content: ""; position: absolute; inset: 0; background: var(--veu-foto); mix-blend-mode: multiply; pointer-events: none; }
.foto--alta::after { background: var(--veu-foto-alta); }

/* --------------------------------------------------------------------------
   4. Header (menu superior)
   -------------------------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altura-header);
  padding: 0 var(--margem) 0 36px;
  background: var(--gelo);
  border-bottom: 1px solid var(--linha);
}
.header-logo { display: block; }
.header-logo img { height: var(--altura-logo); width: auto; }
.menu { display: flex; gap: 40px; align-items: center; }
.menu a {
  font-family: var(--fonte-menu);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 20px;
  color: var(--ardosia);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.menu a:hover { color: var(--amora); }

/* --------------------------------------------------------------------------
   5. Hero (abertura)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 662px;
  width: 100%;
  overflow: hidden;
  background-color: var(--ardosia);
  color: var(--gelo);
}
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-bloco { position: relative; flex: 0 0 1056px; width: 1056px; height: 100%; overflow: hidden; }
.hero-veu { position: absolute; inset: 0; pointer-events: none; }
.hero-veu--x { background: linear-gradient(90deg, rgba(var(--ardosia-rgb), 0.86) 0%, rgba(var(--ardosia-rgb), 0.62) 45%, rgba(var(--ardosia-rgb), 0.22) 100%); }
.hero-veu--y { background: linear-gradient(0deg, rgba(var(--ardosia-rgb), 0.55), rgba(var(--ardosia-rgb), 0) 55%); }
.hero-conteudo {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 96px var(--margem);
}
.hero-texto { display: flex; flex-direction: column; gap: 26px; max-width: 760px; }
.hero-fio { width: 72px; height: 2px; background: var(--champagne); }
.hero h1 {
  font-size: 86px;
  line-height: 1.02;
  color: var(--gelo);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}
.hero-lead { font-size: 34px; line-height: 1.55; color: var(--creme-hero); max-width: 673px; }
/* Italiano: o título é mais longo; um pouco menor para manter as três linhas */
html[lang="it"] .hero-texto { max-width: 900px; }
html[lang="it"] .hero h1 { font-size: 76px; }

/* Menu de idiomas, painel champagne ao lado do hero */
.idiomas {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding: 96px var(--margem);
  background-color: var(--painel-idiomas);
}
.idiomas a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fonte-idiomas);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 24px;
  line-height: 1.2;
  color: var(--grafite);
  transition: color 0.25s ease;
}
.idiomas a:hover { color: var(--amora); }
.idiomas a[hreflang="zh"] { text-transform: none; }
.idiomas a::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); }

/* --------------------------------------------------------------------------
   6. Colunas de texto (introdução e equipe)
   -------------------------------------------------------------------------- */
.colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 96px;
  padding: 104px var(--margem);
  align-items: start;
}
.colunas p { font-size: 32px; font-weight: 400; line-height: 1.45; color: var(--grafite); }
.citacao { display: flex; flex-direction: column; gap: 24px; border-left: 2px solid var(--champagne); padding-left: 40px; }
.colunas--equipe { padding: 120px var(--margem); }
.colunas--equipe p { font-size: 28px; }
.equipe-col { display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }

/* --------------------------------------------------------------------------
   7. Mosaico de serviços
   -------------------------------------------------------------------------- */
.mosaico { padding: 0 var(--margem) 24px; }
.mosaico-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--coluna-gap); }

/* Fileira 1: Portuguese (512px) | Destination (restante) | foto + caixa (321px) */
.fileira-1 { grid-column: span 12; display: grid; grid-template-columns: 424px minmax(0, 1fr) 321px; gap: var(--coluna-gap); }

.card { display: flex; flex-direction: column; gap: 18px; padding: 52px; color: var(--grafite); }
.card h2 { font-size: 40px; line-height: 1.08; }
.card-corpo { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.card-corpo p { font-size: 20px; line-height: 1.6; }
.card--azul-gelo { background-color: var(--azul-gelo); }
.card--ardosia { background-color: var(--ardosia); color: var(--gelo); }
.card--ardosia h2, .card--ardosia p, .card--ardosia .cta { color: var(--gelo); }
.card--champagne { background-color: var(--champagne-claro); }
.card--champagne-cheio { background-color: var(--champagne); } /* champagne cheio: dois cards de Destination Services (grafite sobre champagne, 7,6:1) */

/* Alturas mínimas vindas do canvas; o conteúdo pode crescer sem transbordar */
.card--portuguese { min-height: 619px; }
.card--destination { min-height: 617px; } /* estica até a base da fileira, alinhado ao Portuguese e à foto */
.card--innovation { grid-column: span 4; min-height: 664px; }
.card--intercultural { min-height: 553px; flex-grow: 1; } /* preenche a pilha e leva o diagnóstico até a base da fileira */
.card--intercultural h2 { white-space: nowrap; }

/* Itens com traço (Destination) */
.lista-tracos { display: flex; flex-direction: column; gap: 10px; }
.lista-tracos > div { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.lista-tracos > div::before { content: ""; flex: 0 0 10px; height: 2px; background: var(--amora); margin-top: 12px; }
.lista-tracos p { font-size: 20px; line-height: 1.5; }

/* Coluna direita da fileira 1: foto + caixa "What is new" */
.coluna-foto { display: flex; flex-direction: column; gap: var(--coluna-gap); }
.coluna-foto .foto { flex-grow: 1; min-height: 260px; }
.destaque {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 40px 40px 56px;
  background-color: var(--champagne-claro);
  color: var(--grafite);
  transition: background-color 0.25s ease;
}
.destaque:hover { background-color: var(--champagne); }
.destaque-texto {
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 24px;
  line-height: 1.36;
  color: var(--grafite);
}
.destaque-seta { position: absolute; right: 40px; bottom: 28px; font-size: 34px; line-height: 1; color: var(--champagne); }
.destaque:hover .destaque-seta { color: var(--grafite); }

/* Fileira 2: recorte largo (9 colunas) e foto alta (3 colunas, duas linhas) */
.foto--larga { grid-column: span 9; min-height: 300px; }
.foto--larga img { object-position: center 45%; }
.foto--alta { grid-column: span 3; grid-row: span 2; min-height: 400px; }

/* Fileira 3: Innovation (4 colunas) + Intercultural empilhado com o diagnóstico (5 colunas) */
.pilha { grid-column: span 5; display: flex; flex-direction: column; gap: var(--coluna-gap); margin-left: -8px; margin-right: -12px; }
.diagnostico {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 24px 44px;
  min-height: 52px;
  background-color: var(--ardosia);
  color: var(--gelo);
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 24px;
  line-height: 1.2;
  transition: background-color 0.25s ease;
}
.diagnostico:hover { background-color: var(--amora); color: var(--gelo); }
.diagnostico-seta { font-size: 28px; line-height: 1; color: var(--champagne); transition: transform 0.25s ease; }
.diagnostico:hover .diagnostico-seta { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   8. Faixa "Across São Paulo State" com contatos e QR codes
   -------------------------------------------------------------------------- */
.faixa {
  position: relative;
  min-height: 392px;
  overflow: hidden;
  background: var(--ardosia);
  color: var(--gelo);
  margin: 42px var(--margem) 0;
}
.faixa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(0.9); }
.faixa-veu { position: absolute; inset: 0; pointer-events: none; }
.faixa-veu--x { background: linear-gradient(90deg, rgba(var(--ardosia-rgb), 0.84) 0%, rgba(var(--ardosia-rgb), 0.6) 45%, rgba(var(--ardosia-rgb), 0.28) 100%); }
.faixa-veu--y { background: linear-gradient(0deg, rgba(var(--ardosia-rgb), 0.5), rgba(var(--ardosia-rgb), 0) 55%); }
.faixa-conteudo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
  padding: 40px 44px;
  min-height: 392px;
}
.faixa-texto { display: flex; flex-direction: column; gap: 28px; }
.faixa h2 { font-size: 62px; line-height: 1.08; color: var(--gelo); }
.faixa-texto p { font-size: 28px; line-height: 1.55; color: var(--champagne-claro); max-width: 698px; }
.contatos { display: flex; flex-direction: column; gap: 28px; align-items: flex-end; }
.contatos-links { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.contatos-links a {
  font-family: var(--fonte-idiomas);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 19px;
  line-height: 1.5;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--champagne);
  color: var(--gelo);
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
  transition: color 0.25s ease;
}
.contatos-links a:hover { color: var(--champagne); }
.qr-linha { display: flex; gap: 22px; }
.qr { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr img { width: 150px; height: 150px; background: var(--branco); padding: 8px; border: 1px solid rgba(250, 249, 244, 0.3); }
.qr span {
  font-family: var(--fonte-texto);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: var(--gelo);
}

/* --------------------------------------------------------------------------
   9. Rodapé com a curva do logotipo em champagne
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px var(--margem);
  color: var(--gelo);
  background-color: var(--ardosia);
  overflow: hidden;
}
.footer-curva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer-logo { display: block; position: relative; }
.footer-logo img { height: 146px; width: 418px; }
.footer-site {
  position: relative;
  font-family: var(--fonte-texto);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--champagne);
  color: var(--gelo);
  transition: color 0.25s ease;
}
.footer-site:hover { color: var(--champagne); }

/* --------------------------------------------------------------------------
   10. Telas até 1100px (tablet e notebooks pequenos)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --margem: 40px; }
  .menu { flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
  .menu a { font-size: 17px; }
  .hero { height: 600px; }
  .hero-bloco { flex: 0 0 72%; width: 72%; }
  .hero h1 { font-size: 64px; }
  .hero-lead { font-size: 26px; }
  .idiomas { padding: 64px 32px; }
  .idiomas a { font-size: 20px; }
  .colunas { gap: 48px; padding: 72px var(--margem); }
  .colunas p { font-size: 26px; }
  .colunas--equipe p { font-size: 24px; }
  .fileira-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card { padding: 36px; }
  .card h2 { font-size: 32px; }
  .card--portuguese, .card--destination, .card--innovation, .card--intercultural { min-height: 0; }
  .card--intercultural h2 { white-space: normal; }
  .coluna-foto { grid-column: span 2; flex-direction: row; }
  .coluna-foto .foto { min-height: 240px; }
  .coluna-foto .destaque { flex: 0 0 50%; }
  .foto--larga { grid-column: span 12; }
  .foto--alta { grid-column: span 12; grid-row: auto; min-height: 320px; }
  .card--innovation { grid-column: span 6; }
  .pilha { grid-column: span 6; margin: 0; }
  .diagnostico { font-size: 20px; padding: 20px 32px; }
  .faixa-conteudo { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 36px; }
  .faixa h2 { font-size: 46px; }
  .faixa-texto p { font-size: 24px; }
  .contatos, .contatos-links { align-items: flex-start; }
  .contatos-links a { text-align: left; }
  .footer-logo img { height: 110px; width: auto; }
}

/* --------------------------------------------------------------------------
   11. Celular (até 760px)
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --margem: 24px; --altura-header: auto; }
  .header { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px var(--margem) 20px; }
  .menu { flex-wrap: wrap; gap: 12px 22px; }
  .menu a { font-size: 16px; letter-spacing: 0.1em; white-space: normal; }
  .hero { flex-direction: column; height: auto; }
  .hero-bloco { flex: none; width: 100%; height: 560px; }
  .hero-conteudo { padding: 48px var(--margem); }
  .hero h1 { font-size: 46px; }
  .hero-lead { font-size: 20px; }
  .idiomas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 24px var(--margem); }
  .idiomas a { font-size: 16px; }
  .colunas { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 56px var(--margem); }
  .colunas p { font-size: 22px; }
  .colunas--equipe p { font-size: 21px; }
  .citacao { padding-left: 24px; }
  .btn { font-size: 16px; padding: 14px 20px; }
  .mosaico-grade, .fileira-1 { grid-template-columns: minmax(0, 1fr); }
  .fileira-1, .coluna-foto, .foto--larga, .foto--alta, .card--innovation, .pilha { grid-column: span 1; }
  /* Ordem no celular: foto larga, Intercultural + diagnóstico, foto alta, Innovation Ties */
  .foto--larga { order: 2; }
  .pilha { order: 3; }
  .foto--alta { order: 4; }
  .card--innovation { order: 5; }
  .coluna-foto { flex-direction: column; }
  .coluna-foto .foto { min-height: 220px; }
  .coluna-foto .destaque { flex: none; }
  .card { padding: 32px 28px; }
  .card h2 { font-size: 30px; }
  .card-corpo p, .lista-tracos p { font-size: 18px; }
  .cta { font-size: 15px; }
  .destaque-texto { font-size: 20px; }
  .foto--larga { min-height: 240px; }
  .foto--alta { min-height: 280px; }
  .diagnostico { font-size: 18px; padding: 18px 24px; }
  .faixa { margin: 24px var(--margem) 0; }
  .faixa-conteudo { padding: 32px 24px; }
  .faixa h2 { font-size: 36px; }
  .faixa-texto p { font-size: 20px; }
  .contatos-links a { font-size: 16px; }
  .qr-linha { gap: 16px; }
  .qr img { width: 130px; height: 130px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px var(--margem); }
  .footer-logo img { height: auto; width: min(100%, 300px); }
  .footer-site { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}