/* ══════════════════════════════════════════════════════════════
   Páginas internas — capa compacta, aviso, cruzamento, cartões
════════════════════════════════════════════════════════════════ */

/* ─── Aviso de topo ───────────────────────────────────────────────
   Fundo Azul Principal, não a cor do produto: o próprio manual marca
   branco sobre Verde como 4.2:1, válido só para texto grande, e aqui o
   texto é corrido. A cor do produto entra no fio de 3px da capa, logo
   abaixo, que também separa as duas bandas escuras.                    */
.aviso {
  background: var(--navy);
  color: var(--white);
}
.aviso__marca { color: var(--amber); }
.aviso__conta:hover { color: var(--amber); }
.aviso__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
  font-size: var(--t-body);
}
.aviso__marca {
  font-family: var(--face-display);
  font-size: var(--t-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
}
.aviso__conta {
  margin-left: auto;
  font-variant-numeric: var(--num-tabular);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ─── Capa interna ────────────────────────────────────────────── */
.capa-i {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  border-top: 3px solid var(--accent);
  --calha: max(var(--pad-x), calc((100cqw - var(--shell)) / 2 + var(--pad-x)));
}
.capa-i__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  min-height: min(64vh, 34rem);
}
.capa-i__texto {
padding: clamp(2rem, 3.6vw, 3rem) clamp(2rem, 3.5vw, 3.5rem) clamp(2rem, 3.2vw, 2.75rem) var(--calha);
  display: grid;
  align-content: center;
  gap: var(--s-5);
}
.capa-i__lead { max-width: 54ch; }
.capa-i__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.capa-i__visual { padding-right: var(--calha); padding-block: var(--s-8); }
.capa-i__visual img { width: 100%; height: auto; }
.capa-i__visual--sangra { padding: 0; position: relative; align-self: stretch; }
.capa-i__visual--sangra img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Marcadores rápidos sob a chamada */
.marcos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
}
.marcos li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body);
  color: var(--paper-84);
}
.marcos li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  translate: 0 -2px;
  flex: none;
}

/* ─── Cruzamento norma × entrega ──────────────────────────────── */
.cruz { border-top: 1px solid var(--rule); }
.cruz__cab, .cruz__linha {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cruz__cab {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--ink-66);
  padding-block: var(--s-3);
}
.cruz__ref {
  font-family: var(--face-display);
  font-size: var(--t-body);
  font-variant-numeric: var(--num-tabular);
}
.cruz__pede { color: var(--ink-76); }
.cruz__entrega {
  position: relative;
  padding-left: var(--s-6);
  color: var(--ink);
}
.cruz__entrega::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 1px;
  background: var(--accent);
}

/* ─── Cartões em malha com fio ────────────────────────────────── */
.malha {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
}
.on-dark .malha { background: var(--rule-dark); }
.carta {
  background: var(--paper);
  padding: var(--s-6);
  display: grid;
  align-content: start;
  gap: var(--s-3);
}
.on-dark .carta { background: var(--navy); }
.carta__n {
  font-family: var(--face-display);
  font-size: var(--t-caption);
  font-variant-numeric: var(--num-tabular);
  color: var(--ink-66);
  margin-bottom: var(--s-2);
}
.on-dark .carta__n { color: var(--paper-58); }
.carta__t { font-size: var(--t-h2); }
.carta__d { color: var(--ink-76); }
.on-dark .carta__d { color: var(--paper-84); }
.carta__lista { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.carta__lista li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ink-76);
}
.on-dark .carta__lista li { color: var(--paper-84); }
.carta__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* ─── Número grande de destaque ───────────────────────────────── */
.marco-num {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-8) var(--s-16);
  align-items: start;
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-8);
}
.marco-num__v {
  font-family: var(--face-display);
  font-size: var(--t-cover);
  line-height: 1;
  letter-spacing: var(--track-cover);
  color: var(--amber);
  font-variant-numeric: var(--num-tabular);
}
.marco-num__r { color: var(--paper-84); margin-top: var(--s-4); }

/* ─── Fita horizontal (referências normativas) ────────────────── */
.fita {
  border-block: 1px solid var(--rule);
  overflow: hidden;
  padding-block: var(--s-4);
}
.fita__trilha { display: flex; width: max-content; gap: var(--s-10); }
@media (prefers-reduced-motion: no-preference) {
  .fita__trilha { animation: deslizar 42s linear infinite; }
  .fita:hover .fita__trilha { animation-play-state: paused; }
}
/* O conteúdo é duplicado por JS. Com n itens e vão g, a largura total é
   2S + g, então um conjunto inteiro vale T/2 + g/2 — é esse o deslocamento
   que fecha o laço sem salto. */
@keyframes deslizar { to { translate: calc(-50% - var(--s-10) / 2) 0; } }
.fita__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-body);
  white-space: nowrap;
  color: var(--ink-76);
}
.fita__item b {
  font-family: var(--face-display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: var(--num-tabular);
}

/* ─── Bloco de fecho ──────────────────────────────────────────── */
.fecho { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-12) var(--s-16); align-items: center; }
.fecho__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fecho__texto { display: grid; gap: var(--s-5); }

/* ─── Par texto + figura ──────────────────────────────────────── */
.par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-12) var(--s-16);
  align-items: start;
}
.par--invertido > :first-child { order: 2; }
.par__figura img { width: 100%; object-fit: cover; }
.par__legenda {
  font-size: var(--t-caption);
  color: var(--ink-66);
  margin-top: var(--s-3);
}
.on-dark .par__legenda { color: var(--paper-58); }

/* ─── Retrato com rótulo ──────────────────────────────────────── */
.retrato { display: grid; gap: var(--s-4); }
.retrato img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.retrato__rot {
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--ink-66);
}

/* ─── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .capa-i__grade { grid-template-columns: 1fr; min-height: 0; }
  .capa-i__visual { padding-inline: var(--calha); }
  .capa-i__visual--sangra { aspect-ratio: 16 / 9; }
  .capa-i__visual--sangra img { position: static; height: 100%; }
  .malha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .malha[style*="--cols:2"] { grid-template-columns: 1fr; }
  .marco-num, .fecho, .par { grid-template-columns: 1fr; }
  .par--invertido > :first-child { order: 0; }
  /* Empilhado, o cruzamento perde o cabeçalho: cada célula assume o rótulo */
  .cruz__cab { display: none; }
  .cruz__linha {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding-block: var(--s-6);
  }
  .cruz__pede::before,
  .cruz__entrega::before {
    content: attr(data-rot);
    position: static;
    display: block;
    width: auto;
    height: auto;
    background: none;
    margin-bottom: var(--s-1);
    font-size: var(--t-caption);
    font-weight: 500;
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--ink-66);
  }
  .cruz__entrega {
    padding-left: var(--s-4);
    border-left: 2px solid var(--accent);
  }
}

@media (max-width: 40rem) {
  .malha { grid-template-columns: 1fr; }
  .aviso__conta { margin-left: 0; }
  /* Igual à home: cartão de largura cheia alinha com a coluna da página */
  .carta { padding-inline: 0; }
  .capa-i__acoes { gap: var(--s-2); }
  .capa-i__acoes .btn { flex: 1 1 100%; }
  .capa-i__visual--sangra { aspect-ratio: 4 / 3; }
}