/* Page-specific sections. Shared components live in styles.css.
   Each block keeps its mobile rules right below it. */

/* =====================================================================
   Home
   ===================================================================== */

/* The statement after the hero sits 320 below the hero media on desktop (Figma: 160 + 160). */
@media (min-width: 1024px) {
  .section--after-hero { padding-top: calc(2 * var(--section-y)); }
}

/* ---------- Clients orbit (3328:14423) ----------
   Animation stage: the logos are absolutely placed at their Figma coordinates inside a
   1280 x 900 stage and script.js moves them along the ring. Mobile shows tickers instead. */
.clients__stage { position: relative; display: grid; place-items: center; width: var(--content); aspect-ratio: 1280 / 900; margin-inline: auto; }
.clients__title { text-align: center; }
.clients__line { display: block; }
.clients__line:not(:first-child) { display: none; } /* extra lines only rotate in the pinned mode */
/* The logo layer covers the stage, so the title stays alone in the grid and centered. */
.clients__orbit { position: absolute; inset: 0; }
.clients__orbit .client { position: absolute; left: var(--x); top: var(--y); will-change: transform; }
.clients .ticker { display: none; }
/* Pinned mode (enabled by script.js): the section becomes a tall scroll track with a sticky stage. */
.clients.is-pinned { height: calc(100vh + var(--pin-distance, 120vh)); padding-block: 0; }
.clients.is-pinned .clients__pin { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; overflow: hidden; }
.clients.is-pinned .clients__stage { flex: none; transform: translateY(var(--shift, 0)) scale(var(--fit, 1)); } /* fitted to the viewport height by script.js */
/* Lines swap in place, kept inside the ring (800 wide). */
.clients.is-pinned .clients__title { display: grid; place-items: center; width: 50rem; }
.clients.is-pinned .clients__line { display: block; grid-area: 1 / 1; opacity: 0; translate: 0 0.6em; transition: opacity 0.6s ease, translate var(--spring-time) var(--spring); }
.clients.is-pinned .clients__line.is-past { translate: 0 -0.6em; }
.clients.is-pinned .clients__line.is-active { opacity: 1; translate: none; }
@media (max-width: 1023px) {
  .clients__stage { width: auto; aspect-ratio: auto; padding: 7.5rem var(--gutter); } /* 120 above and below the title */
  .clients__orbit { display: none; }
  .clients .ticker { display: block; }
}

/* ---------- Services (3328:14461) ---------- */
.services { display: flex; flex-direction: column; gap: 5rem; }
.services__list { display: flex; flex-direction: column; gap: var(--gutter-wide); }
/* Stacking: each card sticks, so the next one slides over it. */
.service-card { position: sticky; top: max(1.25rem, calc((100vh - 43.5rem) / 2)); display: flex; flex-direction: column; gap: 10rem; padding: 3.75rem; border-radius: var(--radius-lg); overflow: hidden; color: var(--surface-ink); } /* 60 padding, 160 under the title */
.service-card__symbol { position: absolute; left: calc(50% + 27.125rem); top: calc(50% + 11.625rem); width: 39.125rem; max-width: none; translate: -50% -50%; pointer-events: none; } /* decorative, 626 wide at +434, +186 */
.service-card__title { position: relative; }
/* Text on the left (description on top, button at the bottom), media on the right. */
.service-card__body { position: relative; display: grid; grid-template-columns: minmax(0, 25.8125rem) minmax(0, 25.8125rem); grid-template-rows: 1fr auto; grid-template-areas: "desc media" "action media"; justify-content: space-between; } /* 2 x 413 */
.service-card__desc { grid-area: desc; color: var(--surface-ink-soft); }
.service-card__action { grid-area: action; align-self: end; justify-self: start; }
.service-card__media { grid-area: media; aspect-ratio: 413 / 310; border-radius: var(--radius-md); }
@media (max-width: 1023px) {
  .services { gap: 2.5rem; }
  .services__list { gap: 0.75rem; }
  .service-card { position: relative; top: auto; gap: 5rem; padding: 1rem; }
  .service-card__symbol { left: calc(50% + 7.226875rem); top: auto; bottom: -1.4875rem; width: 10.453938rem; translate: -50% 0; } /* 167.263 wide at +115.63, 23.8 below the edge */
  .service-card__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "desc" "action" "media"; gap: 2rem; }
  .service-card__media { aspect-ratio: 342 / 232; }
}

/* =====================================================================
   Sobre
   ===================================================================== */

/* Dark section options used on this page. */
.dark-section--deep { --dark-pb: 25rem; }   /* 400 below the content */
.dark-section--timeline { gap: 5rem; }     /* 80 between the head and the timeline */
@media (max-width: 1023px) {
  .dark-section--timeline { gap: 2.5rem; }
}

/* ---------- Four dimensions ring (3328:15829 / 3328:20655) ----------
   Animation stage: a square with the numbered steps placed on its circle by angle and a
   panel of text in the middle. script.js turns the ring with the scroll (desktop) and
   switches the active step; the steps are also buttons. */
.ring-scroll { position: relative; width: 100%; }
.ring { position: relative; display: grid; place-items: center; width: var(--content-narrow); max-width: 100%; aspect-ratio: 1; margin-inline: auto; background: url("assets/img/ring.svg") center / 100% 100% no-repeat; } /* 1064 */
.ring__steps { position: absolute; inset: 0; }
/* Each step sits on the circle at --angle (0deg = right, clockwise) plus the ring's --turn. */
.ring__step {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 7.5rem; aspect-ratio: 1; /* 120 */
  margin: -3.75rem 0 0 -3.75rem;
  border-radius: 50%;
  background: var(--color-mercurio-100);
  color: var(--color-urano-200);
  font-size: var(--h3-size); line-height: 1;
  transform: rotate(calc(var(--angle) + var(--turn, 0deg))) translateX(calc(var(--content-narrow) / 2)) rotate(calc(-1 * (var(--angle) + var(--turn, 0deg))));
  transition: background-color var(--ease-color), color var(--ease-color);
}
.ring__step.is-active { background: var(--color-mercurio-500); color: var(--color-urano-500); }
.ring__panels { display: grid; width: 39.375rem; max-width: 60%; text-align: center; } /* 630 */
.ring__panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; opacity: 0; visibility: hidden; transition: opacity var(--ease-color), visibility 0s 0.4s; }
.ring__panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.ring__desc { max-width: 25.875rem; color: var(--color-mercurio-200); } /* 414 */
/* Pinned mode (desktop): tall scroll track, sticky stage fitted to the viewport height. */
.ring-scroll.is-pinned { height: calc(100vh + var(--pin-distance, 200vh)); }
.ring-scroll.is-pinned .ring-scroll__pin { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; }
/* Scaled to fit; the negative margin gives the scaled size back to the layout so it stays centered. */
.ring-scroll.is-pinned .ring { transform: scale(var(--fit, 1)); margin-block: calc((var(--fit, 1) - 1) * var(--content-narrow) / 2); }
@media (max-width: 1023px) {
  .ring { width: 21.375rem; } /* 342 */
  .ring__step { width: 4rem; margin: -2rem 0 0 -2rem; font-size: var(--h3-size); line-height: 1.1; transform: rotate(var(--angle)) translateX(10.6875rem) rotate(calc(-1 * var(--angle))); } /* 64 badge on a 171 radius */
  .ring__panels { width: 13.5rem; max-width: none; } /* 216 */
  .ring__panel { gap: 1.25rem; }
}

/* ---------- Timeline (3328:15954 / 3328:20782) ----------
   Year on the left, text on the right, a line in the middle that fills with the scroll
   (--progress, set by script.js). Reached years light up; the current item shows its text. */
.timeline { position: relative; display: flex; flex-direction: column; gap: 12.5rem; padding-block: 7.5rem; } /* 200 between items, 120 around */
.timeline__item { display: grid; grid-template-columns: minmax(0, 1fr) 12.25rem minmax(0, 1fr); column-gap: 1.25rem; align-items: center; } /* 196 for the line */
.timeline__year { text-align: right; color: var(--color-urano-50); opacity: 0.2; transition: color var(--ease-color), opacity var(--ease-color); }
.timeline__text { grid-column: 3; display: flex; flex-direction: column; gap: 1.25rem; max-width: 25rem; opacity: 0; transition: opacity var(--ease-color); } /* 400 */
.timeline__title { color: var(--color-mercurio-50); }
.timeline__desc { color: var(--color-urano-200); }
.timeline__item.is-reached .timeline__year { color: var(--color-mercurio-500); opacity: 1; }
.timeline__item.is-current .timeline__text { opacity: 1; }
/* The line is a decorative layer over the middle column. */
.timeline__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: rgba(236, 237, 236, 0.2); }
.timeline__line::before { content: ""; position: absolute; inset: 0; background: var(--color-mercurio-500); transform: scaleY(var(--progress, 0)); transform-origin: top; }
.timeline__line::after { content: ""; position: absolute; left: 50%; top: calc(var(--progress, 0) * 100%); width: 1rem; aspect-ratio: 1; margin: -0.5rem 0 0 -0.5rem; border-radius: 50%; background: var(--color-mercurio-500); }
/* Without motion every item is readable. */
.reduce-motion .timeline__text { opacity: 1; }
.reduce-motion .timeline__year { color: var(--color-mercurio-500); opacity: 1; }
@media (max-width: 1023px) {
  .timeline { gap: 6.25rem; padding-block: 3.75rem 0; padding-left: 2.25rem; } /* 100 between items, 36 for the spine */
  .timeline__item { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; opacity: 0.2; transition: opacity var(--ease-color); }
  .timeline__item.is-current, .reduce-motion .timeline__item { opacity: 1; }
  .timeline__year { text-align: left; opacity: 1; }
  .timeline__text { gap: 0.75rem; max-width: none; opacity: 1; }
  .timeline__title { font-size: 1.25rem; line-height: 1.75rem; }
  .timeline__line { left: 0.625rem; } /* centered in the 20 spine */
}

/* ---------- Founder (3328:15999 / 3328:20822) ---------- */
.founder { display: flex; flex-direction: column; gap: 7.5rem; }
.bio { display: flex; justify-content: space-between; width: 52.875rem; max-width: 100%; margin-inline: auto; } /* 846 */
.bio__photo { flex: none; width: 19.0625rem; aspect-ratio: 305 / 407; border-radius: var(--radius-md); }
.bio__info { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; width: 25.8125rem; } /* 413 */
.bio__name { display: block; font-size: var(--body-size); line-height: var(--body-lh); }
.bio__role, .bio__text { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); }
.bio__role { display: block; margin-top: 0.25rem; }
@media (max-width: 1023px) {
  .founder { gap: 3.75rem; }
  .bio { flex-direction: column; gap: 2rem; width: auto; }
  .bio__photo { width: 100%; aspect-ratio: 374 / 499; }
  .bio__info { gap: 1rem; width: auto; padding-inline: 1rem; }
  .bio__role { margin-top: 0; }
}