/* Os capinhas — a timeline hung on the tourada rope: one painted tile per era, laid as you read. */
.capinhas {
  --cap-tile: clamp(180px, 20vw, 248px);
  --cap-rope: 12px;
  background: var(--paper, #F8F9FB);
  color: var(--ink, #10285C);
  padding: var(--gap, 140px) var(--m, 24px);
}
.cap-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px clamp(32px, 5vw, 80px);
  max-width: 1180px; margin: 0 auto clamp(48px, 7vw, 96px);
}
.cap-head .lead { flex: 1 1 320px; max-width: 42ch; }

/* the rope: twisted strands painted in cobalt, running down the middle */
.cap-linha { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; }
.cap-linha::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--cap-rope); transform: translateX(-50%);
  border-radius: var(--cap-rope);
  background:
    linear-gradient(90deg, rgba(14,34,80,.35), transparent 30% 70%, rgba(14,34,80,.35)),
    repeating-linear-gradient(-58deg, var(--cobalt, #1C4597) 0 5px, #9FB2DA 5px 7px, var(--navy, #0E2250) 7px 11px);
  -webkit-mask: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.cap-era {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center; padding: clamp(20px, 3vw, 36px) 0;
}
/* a knot on the rope at every era */
.cap-era::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper, #F8F9FB); border: 5px solid var(--navy, #0E2250);
  box-shadow: 0 0 0 4px var(--paper, #F8F9FB);
}
.cap-tile {
  grid-column: 1; grid-row: 1; justify-self: end;
  width: var(--cap-tile); height: auto; aspect-ratio: 1;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 26px -12px rgba(14,34,80,.35);
}
.cap-txt { grid-column: 3; grid-row: 1; max-width: 40ch; }
.cap-era:nth-child(even) .cap-tile { grid-column: 3; justify-self: start; }
.cap-era:nth-child(even) .cap-txt { grid-column: 1; justify-self: end; }

.cap-ano {
  margin: 0 0 6px; font-style: italic; font-weight: 500; line-height: 1;
  font-size: clamp(34px, 4vw, 56px); letter-spacing: -.02em; color: var(--cobalt, #1C4597);
  font-variant-numeric: lining-nums;
}
.cap-tit { margin: 0 0 10px; font-size: var(--t-lead, 24px); font-weight: 600; line-height: 1.25; }
.cap-corpo { margin: 0; font-size: var(--t-body, 19px); line-height: 1.58; }

.cap-fontes { max-width: 1080px; margin: clamp(40px, 6vw, 72px) auto 0; font-size: var(--t-small, 16px); color: var(--muted, #3D4966); }
.cap-fontes summary { cursor: pointer; font-weight: 600; color: var(--ink, #10285C); padding: 10px 0; width: fit-content; }
.cap-fontes ul { margin: 6px 0 0; padding-left: 1.2em; columns: 2 320px; column-gap: 40px; }
.cap-fontes li { margin: 0 0 8px; break-inside: avoid; }
.cap-fontes a { color: inherit; text-underline-offset: 3px; }

/* laid one by one: the tile drops into place, then the words are painted in */
.cap-js .cap-era:not(.is-in) .cap-tile, .cap-js .cap-era:not(.is-in) .cap-txt, .cap-js .cap-era:not(.is-in)::before { opacity: 0; }
.cap-js .cap-era.is-in .cap-tile { animation: cap-lay .6s var(--ease, cubic-bezier(.2,.7,.2,1)) both; }
.cap-js .cap-era.is-in::before { animation: cap-knot .4s ease-out both; }
.cap-js .cap-era.is-in .cap-txt { animation: cap-rise .6s var(--ease, cubic-bezier(.2,.7,.2,1)) .18s both; }
@keyframes cap-lay {
  0%   { opacity: 0; transform: translateY(-18px) scale(1.08) rotate(calc(var(--rot, 0deg) * 5)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}
@keyframes cap-knot { from { opacity: 0; transform: scale(.4); } }
@keyframes cap-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .cap-js .cap-era .cap-tile, .cap-js .cap-era .cap-txt, .cap-js .cap-era::before { animation: none !important; opacity: 1 !important; }
}

/* phones: the rope runs down the left, tile above the words */
@media (max-width: 760px) {
  .capinhas { --cap-tile: clamp(150px, 46vw, 200px); --cap-rope: 10px; }
  .cap-linha::before { left: 15px; transform: none; }
  .cap-era { grid-template-columns: 40px minmax(0, 1fr); align-items: start; row-gap: 16px; padding: 18px 0 26px; }
  .cap-era::before { grid-column: 1; grid-row: 1; justify-self: start; margin: 6px 0 0 5px; width: 20px; height: 20px; border-width: 4px; }
  .cap-era .cap-tile, .cap-era:nth-child(even) .cap-tile { grid-column: 2; grid-row: 1; justify-self: start; }
  .cap-era .cap-txt, .cap-era:nth-child(even) .cap-txt { grid-column: 2; grid-row: 2; justify-self: start; }
  .cap-fontes ul { columns: 1; }
}