/* UTU Design System — base e componentes
   Ponto de entrada único: <link rel="stylesheet" href="css/utu.css"> traz fontes e tokens.
   Mobile-first: o CSS base é o mobile; tablet e desktop entram com min-width.
   Degraus: 37.5em (600 px) · 64em (1024 px) · 90em (1440 px).
   Componentes consomem só tokens semânticos (--utu-bg, --utu-text, --utu-accent…);
   o fundo (data-utu-ground) decide as cores.
   Ícones vêm de ../assets/sprite.svg e pintam com currentColor: para mudar a cor, mude `color`. */

@import url("./fonts.css");
@import url("./tokens.css");

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--utu-header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--utu-bg);
  color: var(--utu-text);
  font-family: var(--utu-font-text);
  font-size: var(--utu-text-body);
  line-height: var(--utu-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

[data-utu-ground] {
  background-color: var(--utu-bg);
  color: var(--utu-text);
}

img, svg, video { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }

/* Foco: 2 px, cor do fundo (Lima no escuro, Breu nos claros). Nunca removido. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--utu-focus);
  outline-offset: 2px;
}

.utu-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--utu-touch);
  padding: 0 16px;
  background: var(--utu-accent);
  color: var(--utu-on-accent);
  font: 600 var(--utu-text-small)/1 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-button);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.utu-skip:focus { transform: none; }

.utu-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.utu-container {
  width: 100%;
  max-width: var(--utu-max-width);
  margin-inline: auto;
  padding-inline: max(var(--utu-margin), env(safe-area-inset-left)) max(var(--utu-margin), env(safe-area-inset-right));
}

/* Grid 4 / 8 / 12. Cada filho ocupa a linha toda até receber posição:
   style="--col-md: span 5; --col-lg: 7 / span 5" */
.utu-grid {
  display: grid;
  grid-template-columns: repeat(var(--utu-columns), minmax(0, 1fr));
  column-gap: var(--utu-gutter);
  row-gap: var(--utu-space-l);
}
.utu-grid > * { grid-column: var(--col, 1 / -1); }
@media (min-width: 37.5em) {
  .utu-grid > * { grid-column: var(--col-md, var(--col, 1 / -1)); }
}
@media (min-width: 64em) {
  .utu-grid > * { grid-column: var(--col-lg, var(--col-md, var(--col, 1 / -1))); }
}

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

.utu-stack { display: flex; flex-direction: column; gap: var(--utu-space-s); }

/* ---------- Grão ---------- */

/* Uma textura só: grão de película em SVG, POR BAIXO do conteúdo (z-index -1 dentro
   de um contexto isolado). Texto e ícones ficam nítidos; o fundo ganha matéria. */
.utu-grain { position: relative; isolation: isolate; }
.utu-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/grain.svg");
  background-size: var(--utu-grain-tile) var(--utu-grain-tile);
  opacity: var(--utu-grain);
  pointer-events: none;
}
body.utu-grain::before { position: fixed; }

.utu-grain--subtle { --utu-grain: var(--utu-grain-subtle); }
.utu-grain--strong { --utu-grain: var(--utu-grain-strong); }

/* Grão vivo: só com ponteiro fino (desktop) e sem pedido de movimento reduzido.
   No mobile fica parado: poupa bateria e não compete com o scroll. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .utu-grain--live::before { animation: utu-grain 1s steps(1, end) infinite; }
}

@keyframes utu-grain {
  0%   { background-position: 0 0; }
  17%  { background-position: -61px 37px; }
  33%  { background-position: 43px -89px; }
  50%  { background-position: -97px -23px; }
  67%  { background-position: 71px 59px; }
  83%  { background-position: -17px 113px; }
  100% { background-position: 0 0; }
}

/* ---------- Tipografia ---------- */

.utu-hero,
.utu-display,
.utu-h1, .utu-h2, .utu-h3 {
  margin: 0;
  font-family: var(--utu-font-display);
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance;
}

/* WE ARE UTU: empilhado no mobile, em linha a partir de 600 px. */
.utu-hero {
  font-size: var(--utu-text-hero);
  line-height: var(--utu-leading-hero);
  letter-spacing: var(--utu-tracking-hero);
}
.utu-hero > span { display: block; }
@media (min-width: 37.5em) {
  .utu-hero { font-size: var(--utu-text-hero-line); white-space: nowrap; }
  .utu-hero > span { display: inline; }
}

.utu-display { font-size: var(--utu-text-display); line-height: var(--utu-leading-display); letter-spacing: var(--utu-tracking-display); }
.utu-h1 { font-size: var(--utu-text-h1); line-height: var(--utu-leading-h1); letter-spacing: var(--utu-tracking-heading); }
.utu-h2 { font-size: var(--utu-text-h2); line-height: var(--utu-leading-h2); letter-spacing: -0.01em; }
.utu-h3 { font-size: var(--utu-text-h3); line-height: var(--utu-leading-h3); font-weight: 500; }

/* Contraste de peso na mesma linha. Light (300) só do H1 para cima. */
.utu-light { font-weight: 300; }
/* Pesos misturados pedem um respiro extra entre palavras. */
.utu-words { word-spacing: 0.08em; }
/* Quebra controlada: cada <span class="utu-block"> é uma linha. */
.utu-block { display: block; }

.utu-lead {
  font-size: var(--utu-text-lead);
  line-height: var(--utu-leading-lead);
  color: var(--utu-text-body-color);
  text-wrap: pretty;
}
.utu-body { font-size: var(--utu-text-body); line-height: var(--utu-leading-body); color: var(--utu-text-body-color); text-wrap: pretty; }
.utu-small { font-size: var(--utu-text-small); line-height: 1.5; }
.utu-muted { color: var(--utu-text-muted); }
.utu-measure { max-width: 34em; }

/* Micro-rótulo: 400 + 600, 0,18em, nunca Light (perde-se no grão). */
.utu-micro {
  margin: 0;
  font-family: var(--utu-font-display);
  font-size: var(--utu-text-micro);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--utu-tracking-micro);
  text-transform: uppercase;
}
.utu-micro b, .utu-micro strong { font-weight: 600; color: var(--utu-text); }

/* Rótulo vertical na margem: ornamento de desktop, desaparece abaixo de 1024 px. */
.utu-side-label { display: none; }
@media (min-width: 64em) {
  .utu-side-label {
    display: block;
    position: absolute;
    right: 26px;
    top: 120px;
    transform: rotate(-90deg);
    transform-origin: right top;
    font-size: 10px;
    letter-spacing: 0.24em;
    white-space: nowrap;
  }
}

/* ---------- Cabeçalho ---------- */

.utu-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--utu-space-m);
  height: var(--utu-header-h);
  padding-inline: max(var(--utu-margin), env(safe-area-inset-left)) max(var(--utu-margin), env(safe-area-inset-right));
  background-color: var(--utu-surface);
  color: var(--utu-text);
  border-bottom: 1px solid var(--utu-line);
}
.utu-header__logo { display: inline-flex; align-items: center; min-height: var(--utu-touch); }
.utu-header__logo svg { width: auto; height: 24px; aspect-ratio: 195.5 / 104.35; fill: currentColor; }
.utu-header__nav { display: none; }
.utu-header__actions { display: flex; align-items: center; gap: var(--utu-space-s); }
.utu-header .utu-header__cta { display: none; }

/* MENU em texto: mais claro que um hambúrguer e do tamanho do polegar. */
.utu-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: var(--utu-touch);
  min-height: var(--utu-touch);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 600 12px/1 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-micro);
  text-transform: uppercase;
  cursor: pointer;
}
.utu-menu-button svg { width: 12px; height: 12px; fill: currentColor; shape-rendering: crispEdges; }

.utu-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-bottom: var(--utu-border-strong) solid transparent;
  font: 500 13px/1 var(--utu-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--utu-dur-fast) var(--utu-ease-chegada);
}
.utu-nav-link[aria-current] { border-bottom-color: var(--utu-accent); }
@media (hover: hover) {
  .utu-nav-link:hover { border-bottom-color: currentColor; }
}

@media (min-width: 37.5em) {
  .utu-header .utu-header__cta { display: inline-flex; }
}
@media (min-width: 64em) {
  .utu-header__logo svg { height: 32px; }
  .utu-header__nav { display: flex; align-items: center; gap: 40px; }
  .utu-menu-button { display: none; }
}

/* ---------- Menu fullscreen (< 1024 px) ----------
   Comportamento em ../js/utu.js: abrir, fechar, prender o foco, Esc. */

.utu-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.utu-menu[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .utu-menu:not([hidden]) { animation: utu-menu-in var(--utu-dur-slow) var(--utu-ease-chegada); }
}
@keyframes utu-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
html:has(.utu-menu:not([hidden])) { overflow: hidden; }

.utu-menu__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--utu-header-h);
  padding-inline: max(var(--utu-margin), env(safe-area-inset-left)) max(var(--utu-margin), env(safe-area-inset-right));
  border-bottom: 1px solid var(--utu-line);
}
.utu-menu__bar > svg { width: auto; height: 24px; aspect-ratio: 195.5 / 104.35; fill: currentColor; }
.utu-menu__nav { padding: var(--utu-space-m) var(--utu-margin) 0; }
.utu-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  border-bottom: 1px solid var(--utu-line);
  font: 600 var(--utu-text-h1)/1 var(--utu-font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
}
.utu-menu__link svg { width: 16px; height: 14px; color: var(--utu-text-muted); fill: currentColor; }
/* Com um link atual marcado, os outros recuam para alinhar com o marcador. */
.utu-menu__nav:has([aria-current]) .utu-menu__link:not([aria-current]) { padding-left: 24px; }
.utu-menu__link[aria-current]::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--utu-accent);
}
.utu-menu__link[aria-current] span { margin-right: auto; }
.utu-menu__link[aria-current] svg { color: var(--utu-accent); }
.utu-menu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--utu-space-xs);
  padding: var(--utu-space-l) var(--utu-margin);
}
@media (min-width: 64em) {
  .utu-menu { display: none; }
}

/* ---------- Botões ---------- */

/* Primário: a cor de ação do fundo (Lima no Breu; Breu nos claros). Brasa não é
   botão: é a cor do método e lê-se como alerta. Hover só com ponteiro; no toque,
   a resposta é o estado ativo. */
.utu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--utu-radius-none);
  background: var(--utu-accent);
  color: var(--utu-on-accent);
  font: 500 0.875rem/1 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--utu-dur-fast) var(--utu-ease-chegada),
    color var(--utu-dur-fast) var(--utu-ease-chegada),
    transform var(--utu-dur-fast) var(--utu-ease-chegada);
}
.utu-btn svg {
  flex: none;
  width: 16px;
  height: 14px;
  fill: currentColor;
  shape-rendering: crispEdges;
  transition: transform var(--utu-dur-base) var(--utu-ease-passo);
}
@media (hover: hover) {
  .utu-btn:hover { background: var(--utu-accent-hover); }
  .utu-btn:hover svg { transform: translateX(4px); }
}
.utu-btn:active { background: var(--utu-accent-press); transform: translateY(1px); }

/* Pequeno: 44 px de desenho, 48 px de alvo. A seta mantém 2 px por pixel. */
.utu-btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; }
.utu-btn--sm::after { content: ""; position: absolute; inset: -2px 0; }

/* Largura total no mobile, natural a partir de 600 px (zona do polegar). */
.utu-btn--block { display: flex; width: 100%; }
@media (min-width: 37.5em) {
  .utu-btn--block { display: inline-flex; width: auto; }
}

.utu-btn--secondary {
  background: transparent;
  color: var(--utu-text);
  box-shadow: inset 0 0 0 var(--utu-border-strong) currentColor;
}
@media (hover: hover) {
  .utu-btn--secondary:hover { background: var(--utu-text); color: var(--utu-bg); }
}
.utu-btn--secondary:active { background: var(--utu-text); color: var(--utu-bg); }

.utu-btn--link {
  min-height: var(--utu-touch);
  padding: 0;
  background: none;
  color: var(--utu-text);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: var(--utu-border-strong);
  transition: text-decoration-thickness var(--utu-dur-fast) var(--utu-ease-chegada);
}
@media (hover: hover) {
  .utu-btn--link:hover { background: none; text-decoration-thickness: 3px; }
}
.utu-btn--link:active { background: none; text-decoration-thickness: 3px; }

.utu-btn:disabled,
.utu-btn[aria-disabled="true"] {
  background: var(--utu-surface);
  color: var(--utu-text-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.utu-btn:disabled svg,
.utu-btn[aria-disabled="true"] svg { transform: none; }

.utu-actions { display: flex; flex-direction: column; gap: var(--utu-space-2xs); }
@media (min-width: 37.5em) {
  .utu-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--utu-space-s) var(--utu-space-m); }
}

/* ---------- Campos ---------- */

.utu-field { display: flex; flex-direction: column; gap: var(--utu-space-2xs); }
.utu-field label {
  font: 600 var(--utu-text-micro)/1.2 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-micro);
  text-transform: uppercase;
}
/* 18 px: legível e acima dos 16 px que evitam o zoom automático do iOS. */
.utu-field input,
.utu-field textarea {
  width: 100%;
  min-height: var(--utu-touch);
  padding: 12px 0;
  border: 0;
  border-bottom: var(--utu-border-strong) solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.125rem;
  appearance: none;
}
.utu-field textarea { resize: vertical; line-height: 1.5; }
.utu-field ::placeholder { color: var(--utu-text-muted); opacity: 1; }
.utu-field input:focus-visible,
.utu-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--utu-focus);
  box-shadow: 0 1.5px 0 var(--utu-focus);
}
.utu-field__hint { font-size: var(--utu-text-small); color: var(--utu-text-muted); }
.utu-field [aria-invalid="true"] { border-bottom-color: var(--utu-danger); }
/* Erro: cor + forma + texto. Nunca só a cor. */
.utu-field__error {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--utu-text-small);
  color: var(--utu-danger);
}
.utu-field__error::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: currentColor;
  transform: translateY(1px);
}

/* ---------- Filtros (chips) ---------- */

/* Mobile: uma linha com scroll e encaixe, a sangrar até à margem da janela.
   A partir de 600 px: quebram em linhas. */
.utu-chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--utu-margin) * -1);
  padding: 2px var(--utu-margin);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--utu-margin);
  scrollbar-width: none;
  list-style: none;
}
.utu-chips::-webkit-scrollbar { display: none; }
.utu-chips > * { flex: none; scroll-snap-align: start; }
@media (min-width: 37.5em) {
  .utu-chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

.utu-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--utu-touch);
  padding: 0 18px;
  border: var(--utu-border-strong) solid var(--utu-text-muted);
  border-radius: var(--utu-radius-pill);
  background: transparent;
  color: var(--utu-text);
  font: 500 12px/1 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--utu-dur-fast) var(--utu-ease-chegada), background-color var(--utu-dur-fast) var(--utu-ease-chegada);
}
@media (hover: hover) {
  .utu-chip:hover { border-color: var(--utu-text); }
}
.utu-chip[aria-pressed="true"] {
  border-color: var(--utu-accent);
  background: var(--utu-accent);
  color: var(--utu-on-accent);
}

/* ---------- Pilares ---------- */

/* Mobile: lista com "+" e fios (lê-se de cima a baixo, sem pílulas apertadas).
   A partir de 600 px: pílulas. */
.utu-pillars { margin: 0; padding: 0; list-style: none; }
.utu-pillars > li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  border-top: 1px solid var(--utu-line);
  font-size: 1.0625rem;
}
.utu-pillars > li:last-child { border-bottom: 1px solid var(--utu-line); }
.utu-pillars > li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}
@media (min-width: 37.5em) {
  .utu-pillars { display: flex; flex-wrap: wrap; gap: 10px; }
  .utu-pillars > li,
  .utu-pillars > li:last-child {
    min-height: 44px;
    padding: 0 20px;
    border: var(--utu-border-strong) solid currentColor;
    border-radius: var(--utu-radius-pill);
  }
  .utu-pillars > li::before { display: none; }
}

/* ---------- Passos do Fluxo ---------- */

/* Vertical no mobile e no tablet; horizontal a partir de 1024 px.
   Fases contratadas: marcador cheio, linha contínua.
   Fases sob acordo (.utu-step--optional): marcador vazado, linha tracejada. */
.utu-steps {
  --utu-rail: var(--utu-brasa);
  --utu-step-top: 8px;
  --utu-step-marker: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.utu-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 36px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  padding-bottom: 28px;
}
.utu-step:last-child { padding-bottom: 0; }

.utu-step__marker {
  position: absolute;
  left: calc(18px - var(--utu-step-marker) / 2);
  top: var(--utu-step-top);
  width: var(--utu-step-marker);
  height: var(--utu-step-marker);
  background: var(--utu-rail);
}
.utu-step--optional .utu-step__marker {
  background: var(--utu-bg);
  border: 2px solid var(--utu-rail);
}

/* Trilho: ::before chega ao marcador, ::after sai dele. */
.utu-step::before,
.utu-step::after {
  content: "";
  position: absolute;
  left: 17px;
  border-left: 2px solid var(--utu-rail);
}
.utu-step::before { top: 0; height: var(--utu-step-top); }
.utu-step::after { top: calc(var(--utu-step-top) + var(--utu-step-marker)); bottom: 0; }
.utu-step:first-child::before,
.utu-step:last-child::after { display: none; }
.utu-step--optional::before,
.utu-step--optional::after,
.utu-step:has(+ .utu-step--optional)::after { border-left-style: dashed; }

.utu-step__icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 36px;
  height: 32px;
  color: var(--utu-rail);
  fill: currentColor;
}
.utu-step__head { grid-column: 3; display: flex; flex-direction: column; gap: 4px; }
.utu-step__title {
  margin: 0;
  font: 600 var(--utu-text-h3)/1.1 var(--utu-font-display);
  text-transform: uppercase;
}
.utu-step__text { grid-column: 3; margin: 0; font-size: 1rem; line-height: 1.5; }

@media (min-width: 37.5em) {
  .utu-steps { --utu-step-top: 10px; }
  .utu-step { grid-template-columns: 36px 64px minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; padding-bottom: 32px; }
  .utu-step__icon { grid-row: 1; width: 48px; height: 48px; }
  .utu-step__text { grid-column: 4; grid-row: 1; padding-top: 18px; }
}

@media (min-width: 64em) {
  .utu-steps {
    --utu-step-marker: 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--utu-gutter);
  }
  .utu-step { display: flex; flex-direction: column; gap: 16px; padding: 32px 0 0; }
  .utu-step__marker { left: 0; top: 0; }
  .utu-step::before { display: none; }
  .utu-step::after {
    top: 7px;
    bottom: auto;
    left: var(--utu-step-marker);
    right: calc(var(--utu-gutter) * -1);
    border-left: 0;
    border-top: 2px solid var(--utu-rail);
  }
  .utu-step--optional::after,
  .utu-step:has(+ .utu-step--optional)::after { border-top-style: dashed; }
  .utu-step__icon { width: auto; height: 64px; margin-top: 8px; align-self: flex-start; }
  .utu-step__text { padding-top: 0; }
}

/* ---------- Cartão de fase (container query) ---------- */

/* O cartão responde à largura de onde está, não à da janela: o mesmo componente
   serve numa coluna de 4, num carrossel ou num grid de 12. Abaixo de 480 px de
   container, o painel Breu fica em cima; acima, vai para a esquerda.
   O ícone vive no painel Breu: Brasa sobre Breu dá 4,6:1 (sobre Névoa, só 2,7). */
.utu-phase-card { container-type: inline-size; }
.utu-phase-card__inner {
  display: flex;
  flex-direction: column;
  background: var(--utu-surface);
  color: var(--utu-text);
}
.utu-phase-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}
.utu-phase-card__icon { flex: none; width: auto; height: 48px; color: var(--utu-brasa); fill: currentColor; }
.utu-phase-card__title { margin: 0; font: 600 var(--utu-text-h3)/1 var(--utu-font-display); text-transform: uppercase; }
.utu-phase-card__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.utu-phase-card__lead {
  font: 400 14px/1.35 var(--utu-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.utu-phase-card__lead b { font-weight: 600; }
.utu-phase-card__note { padding: 12px 14px; border: 1px solid currentColor; font-size: var(--utu-text-small); line-height: 1.5; }
@container (min-width: 480px) {
  .utu-phase-card__inner { display: grid; grid-template-columns: minmax(11rem, 34%) minmax(0, 1fr); }
  .utu-phase-card__head { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 28px; }
  .utu-phase-card__icon { height: 64px; }
  .utu-phase-card__title { font-size: var(--utu-text-h2); line-height: 0.98; }
  .utu-phase-card__body { gap: 16px; padding: 28px 32px; }
  .utu-phase-card__lead { font-size: 1rem; }
}

/* ---------- Citação ---------- */

.utu-quote { margin: 0; }
.utu-quote blockquote {
  margin: 0;
  font: 500 var(--utu-text-h2)/1.05 var(--utu-font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.utu-quote figcaption { margin-top: var(--utu-space-s); }

/* ---------- Rodapé ---------- */

.utu-footer { padding-bottom: calc(var(--utu-space-l) + env(safe-area-inset-bottom)); }

/* Linha-link: alvo de 56 px de largura total, com fio. */
.utu-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--utu-space-s);
  min-height: 56px;
  border-top: 1px solid var(--utu-line);
  font: 600 14px/1.2 var(--utu-font-display);
  letter-spacing: var(--utu-tracking-button);
  text-transform: uppercase;
  text-decoration: none;
}
.utu-link-row:last-child { border-bottom: 1px solid var(--utu-line); }
.utu-link-row svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
  shape-rendering: crispEdges;
  transition: transform var(--utu-dur-base) var(--utu-ease-passo);
}
@media (hover: hover) {
  .utu-link-row:hover svg { transform: translate(4px, -4px); }
}

.utu-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--utu-text-muted);
}
@media (min-width: 64em) {
  .utu-footer__meta {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--utu-line);
  }
}

/* Fim da página: metadados + selo. O selo é o ícone da marca, nunca a
   assinatura (ela já abriu a página no cabeçalho). */
.utu-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--utu-space-m);
}
@media (min-width: 64em) {
  .utu-footer__bottom {
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--utu-line);
  }
  /* Sem espaço para uma linha, os itens descem para a seguinte em vez de empurrar o selo para fora. */
  .utu-footer__bottom > .utu-footer__meta {
    flex: 1;
    flex-wrap: wrap;
    gap: 10px var(--utu-space-s);
    padding-top: 0;
    border-top: 0;
  }
  .utu-footer__bottom > .utu-footer__meta > * { white-space: nowrap; }
}

/* ---------- Marca ---------- */

/* Ícone da marca em tamanho de selo. Use a versão de grid (viewBox 0 0 11 12):
   em alturas múltiplas de 12 px cada módulo cai num pixel inteiro. */
.utu-seal {
  flex: none;
  display: block;
  width: auto;
  height: 48px;
  aspect-ratio: 11 / 12;
  fill: currentColor;
  fill-rule: evenodd;
}
@media (min-width: 37.5em) {
  .utu-seal { height: 36px; }
}

/* Assinatura que se reconstrói no ícone (comportamento em ../js/utu.js). Dois traços no grid comum
   de 24 unidades de altura: o principal com pontas quadradas e as peças só do ícone com pontas retas. */
.utu-reconstruct path { fill: none; stroke: currentColor; stroke-linejoin: miter; }
.utu-reconstruct__main { stroke-linecap: square; }
.utu-reconstruct__extra { stroke-linecap: butt; }

/* ---------- Grafismos ---------- */

/* Degrau: o meandro do logo em linha. Brasa, 8 px em qualquer tamanho, e sai sempre do quadro:
   o container corta-o. Um por composição, só como grafismo, nunca atrás de texto. */
.utu-degrau { display: block; width: 100%; height: 100%; }
.utu-degrau path {
  fill: none;
  stroke: var(--utu-brasa);
  stroke-width: 8px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* ---------- Ícones ---------- */

.utu-pixel { fill: currentColor; shape-rendering: crispEdges; }

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .utu-btn, .utu-btn svg, .utu-link-row svg { transition-property: background-color, color, opacity; }
  .utu-btn:active, .utu-btn:hover svg, .utu-link-row:hover svg { transform: none; }
}