/* --------------------------------------------------------------------------
   05. Copiloto: fonte/secoes/copiloto.php

   Capítulo escuro (.secao--sup1) entre dois de papel; a divisa vem de
   site.css. Núcleo em duas colunas (turno numerado à esquerda, fotografia
   mascarada com a etiqueta do custo à direita), régua que se desenha na
   entrada e três travas em cartões.
   -------------------------------------------------------------------------- */
.copiloto-nucleo {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--esp-grid);
  align-items: center;
}

.copiloto-nucleo-texto h3 {
  margin-top: var(--e4);
  font-size: var(--t3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk2);
  line-height: 1.16;
}

.copiloto-turno {
  display: grid;
  gap: var(--e5);
  counter-reset: turno;
  margin: var(--e7) 0 0;
  padding: 0;
  list-style: none;
}

.copiloto-turno > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e1) var(--e4);
  counter-increment: turno;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.copiloto-turno > li::before {
  content: counter(turno, decimal-leading-zero);
  grid-row: span 2;
  align-self: start;
  color: var(--acento);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.copiloto-turno > li > strong {
  align-self: center;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.copiloto-turno > li > span {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

/* O último passo é a trava principal: ganha o acento no título. */
.copiloto-turno > li:last-child > strong {
  color: var(--acento);
}

/* --- Fotografia com a etiqueta ------------------------------------------
   O quadro recorta com `clip` (sem scrollport, as timelines de view() das
   classes .mov-* continuam medindo a página). A etiqueta flutua sobre a foto
   com força de parallax maior que a do palco: duas profundidades. */
.copiloto-nucleo-palco {
  --mov-forca: 3%;
  display: grid;
  grid-template-areas: "quadro";
}

.copiloto-nucleo-quadro {
  position: relative;
  display: grid;
  grid-area: quadro;
  overflow: hidden;
  overflow: clip;
  aspect-ratio: 1586 / 992;
}

.copiloto-nucleo-halo {
  --mov-opacidade-min: 0.18;
  --mov-opacidade-max: 1;
  position: absolute;
  top: 44%;
  left: 58%;
  width: 104%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--acento-vidro), transparent 68%);
  pointer-events: none;
}

.copiloto-nucleo-foto {
  --mov-zoom-de: 1.16;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(102% 118% at 70% 42%, var(--texto) 26%, transparent 80%);
  mask-image: radial-gradient(102% 118% at 70% 42%, var(--texto) 26%, transparent 80%);
}

.copiloto-nucleo-etiqueta {
  --mov-forca: 7%;
  display: grid;
  grid-area: quadro;
  align-self: end;
  justify-self: start;
  gap: var(--e2);
  max-width: 36ch;
  margin: var(--e6);
  padding: var(--e5);
}

.copiloto-nucleo-etiqueta > strong {
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-max);
  letter-spacing: var(--tk3);
  line-height: 1.25;
}

.copiloto-nucleo-etiqueta > span:last-child {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.7;
}

/* --- Régua e travas ------------------------------------------------------- */
.copiloto-regua {
  display: block;
  height: 1px;
  margin: var(--esp-bloco) 0;
  background: linear-gradient(90deg, var(--acento-linha), var(--borda) 58%, transparent);
}

.copiloto-travas {
  align-items: stretch;
}

.copiloto-trava {
  display: grid;
  gap: var(--e4);
  align-content: start;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.copiloto-trava:hover {
  border-color: var(--acento-linha);
  transform: translateY(-2px);
}

.copiloto-trava h3 {
  margin: 0;
  letter-spacing: var(--tk3);
}

.copiloto-trava p {
  margin: 0;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

.copiloto-nota {
  position: relative;
  margin: var(--e6) 0 0;
  padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + var(--e6));
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.copiloto-nota .icone {
  position: absolute;
  top: calc(var(--e5) + 2px);
  left: var(--e5);
  width: 18px;
  height: 18px;
  color: var(--acento);
}

.copiloto-nota strong {
  color: var(--texto);
}

@media (prefers-reduced-motion: reduce) {
  .copiloto-trava,
  .copiloto-trava:hover {
    transition: none;
    transform: none;
  }
}

/* --- Responsivo: 1200 / 980 / 680 / 380 ---------------------------------- */
@media (max-width: 1200px) {
  .copiloto-nucleo-etiqueta {
    margin: var(--e5);
  }
}

@media (max-width: 980px) {
  .copiloto-nucleo {
    grid-template-columns: minmax(0, 1fr);
  }

  .copiloto-turno {
    margin-top: var(--e6);
  }
}

@media (max-width: 680px) {
  /* A etiqueta não cabe sobre a foto sem cobri-la: vira o bloco seguinte. */
  .copiloto-nucleo-palco {
    grid-template-areas: "quadro" "etiqueta";
  }

  .copiloto-nucleo-etiqueta {
    --mov-forca: 0%;
    grid-area: etiqueta;
    justify-self: stretch;
    max-width: none;
    margin: var(--e5) 0 0;
  }
}

@media (max-width: 380px) {
  .copiloto-turno > li {
    gap: var(--e1) var(--e3);
  }

  .copiloto-nucleo-etiqueta,
  .copiloto-nota {
    padding: var(--e4);
  }

  .copiloto-nota {
    padding-left: calc(var(--e4) + var(--e6));
  }

  .copiloto-nota .icone {
    top: calc(var(--e4) + 2px);
    left: var(--e4);
  }
}