/* ═══════════════════════════════════════════════════════════════
   CAPA — a dupla de abertura: escola e frota, lado a lado.
   Duas peças idênticas em tamanho; a arte de cada cartaz entra
   inteira dentro de uma moldura de formato fixo (passe-partout),
   então nada é cortado e as duas ficam exatamente do mesmo tamanho.
═══════════════════════════════════════════════════════════════ */

/* O ticker abre a página, colado no menu — o header já traz a linha
   de baixo, então a de cima dele viraria borda dupla. */
main > .stu-ticker:first-child { border-top: none; }

/* Capa e parede são a mesma superfície de papel: sem borda entre elas
   e com o gradiente terminando exatamente onde o da parede começa
   (#EFE7D8), senão aparece uma faixa na emenda. */
.cp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(201,169,97,.16) 0, transparent 60%),
    radial-gradient(760px 520px at 100% 108%, rgba(110,117,54,.11) 0, transparent 64%),
    linear-gradient(180deg, #FBF8F2 0%, #F5F0E5 56%, #EFE7D8 100%);
}

/* textura de papel — granulado sutil, sem imagem externa */
.cp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,   rgba(10,14,26,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(10,14,26,.014) 0 1px, transparent 1px 4px);
}

.cp-inner {
  position: relative;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 68px) var(--gut) clamp(46px, 5.5vw, 76px);
}

/* ── o par ────────────────────────────────────────────────────── */
.cp-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

.cp-peca {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  min-width: 0;
}

/* ── cartaz emoldurado ────────────────────────────────────────── */
.cp-arte { position: relative; }

/* sombra de "cartaz pregado na parede" */
.cp-arte::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -16px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10,14,26,.2) 0, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

.cp-moldura {
  position: relative;
  background: linear-gradient(150deg, #FFFDF7 0%, #F3ECDD 100%);
  padding: clamp(12px, 1.5vw, 18px);
  border: 1px solid rgba(201,169,97,.5);
  border-radius: var(--r-m);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 44px rgba(10,14,26,.16),
    0 3px 10px rgba(10,14,26,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cp-peca:nth-child(1) .cp-moldura { transform: rotate(-.7deg); }
.cp-peca:nth-child(2) .cp-moldura { transform: rotate(.6deg); }
.cp-peca:hover .cp-moldura {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 28px 62px rgba(10,14,26,.22), 0 4px 12px rgba(10,14,26,.1);
}

/* A caixa manda no formato; a arte entra inteira e centralizada.
   A sobra vira margem de papel — parece passe-partout, não letterbox. */
.cp-moldura picture {
  display: block;
  aspect-ratio: 10 / 7;
  border-radius: var(--r-s);
  overflow: hidden;
}
.cp-moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* fita de papel no topo */
.cp-fita {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 96px;
  height: 26px;
  background: rgba(232,222,197,.82);
  border: 1px solid rgba(201,169,97,.34);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(10,14,26,.1);
  pointer-events: none;
  z-index: 1;
}

/* ── painel de texto, abaixo do cartaz ────────────────────────── */
.cp-txt { display: flex; flex-direction: column; }

.cp-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--slide-accent, var(--brass));
  padding: 6px 14px;
  border-radius: var(--r-p);
  margin-bottom: 1rem;
}
.cp-selo .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: cpPulse 2.4s ease-in-out infinite;
}
@keyframes cpPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.cp-eyebrow {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: .6rem;
}

.cp-titulo {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.9vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--t-1);
  margin: 0 0 .9rem;
  text-wrap: balance;
}
.cp-titulo em { font-style: italic; font-weight: 400; color: var(--slide-accent, var(--brass-2)); }

.cp-lead {
  font-size: clamp(.95rem, 1vw, 1.04rem);
  color: var(--t-2);
  line-height: 1.64;
  margin: 0 0 1.3rem;
}

.cp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.cp-tag {
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-2);
  border: 1px solid var(--bd-2);
  background: rgba(255,255,255,.62);
  padding: 6px 12px;
  border-radius: var(--r-p);
}

.cp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

/* ── responsivo ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cp-par { grid-template-columns: 1fr; gap: clamp(42px, 7vw, 60px); }
  .cp-peca { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .cp-ctas .stu-btn { flex: 1 1 100%; justify-content: center; }
  .cp-fita { width: 72px; height: 22px; }
}

/* ── acessibilidade ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cp-moldura,
  .cp-peca:hover .cp-moldura { transition: none; transform: none; }
  .cp-selo .dot { animation: none; }
}

.cp-hero :focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }