/* ==========================================================================
   Carrossel IA — Wicomm
   Ported from the Claude Design component "Carrossel IA.dc.html".
   Design tokens live in styles/ds/; this file only composes them.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-alt); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes wcSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wcFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wcPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--surface-page);
  user-select: none;
}

.stage__wash {
  position: absolute;
  inset: 0;
  background: var(--surface-brand);
  opacity: 0;
  transition: opacity 0.55s;
}

.stage__scene { position: absolute; inset: 0; }

.stage[data-open="true"] .stage__wash { opacity: 1; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* Three columns so the logo sits dead centre regardless of the back control.
   Sits above the detail panel (z-index 10) because the side layout overlaps
   this corner; the bar itself is pointer-transparent, so only the back button
   actually catches clicks. */
.masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px 44px;
  pointer-events: none;
  gap: var(--space-5);
}

.masthead__brand {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.masthead .btn-back { grid-column: 3; justify-self: end; }

/* Official wordmark art (the "w" symbol is part of it), swapped light/dark */
.wordmark { position: relative; display: block; height: 26px; }
.wordmark img {
  display: block;
  height: 26px;
  width: auto;
  transition: opacity 0.55s;
}
.wordmark__light { position: absolute; inset: 0; opacity: 0; }
.stage[data-open="true"] .wordmark__dark  { opacity: 0; }
.stage[data-open="true"] .wordmark__light { opacity: 1; }

/* Home escape hatch back to the institutional site — visible only while
   browsing; the brand wash state swaps it for the detail back control */
.btn-home {
  grid-column: 1;
  justify-self: start;
  pointer-events: auto;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: var(--space-4) var(--space-2);
  transition: opacity 0.4s, color 0.25s;
}
.btn-home:hover { color: var(--brand-primary); }
.btn-home:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.stage[data-open="true"] .btn-home { pointer-events: none; opacity: 0; }

/* Back control lives in the masthead, revealed only while a detail is open */
.masthead .btn-back {
  pointer-events: none;
  opacity: 0;
  padding: var(--space-2) 0;
  transition: opacity 0.4s, color 0.25s, border-color 0.25s;
}
.stage[data-open="true"] .masthead .btn-back {
  pointer-events: auto;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   HUD — hidden while the detail panel is open
   -------------------------------------------------------------------------- */

.intro, .ticker, .pager {
  position: absolute;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.4s;
  pointer-events: none;
}

.stage[data-open="true"] .intro,
.stage[data-open="true"] .ticker,
.stage[data-open="true"] .pager { opacity: 0; }

.intro {
  top: 96px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.intro__eyebrow {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.intro__title {
  margin: 0;
  font-size: 30px;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* Active-site readout */
.ticker {
  left: 44px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ticker p { margin: 0; }

.ticker__count { display: flex; align-items: baseline; gap: var(--space-3); }

.ticker__index {
  font-size: 52px;
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

.ticker__total {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--gray-500);
}

.ticker__name {
  font-size: 24px;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ticker__tagline {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* Pagination */
.pager {
  right: 44px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.pager__dots { display: flex; gap: var(--space-2); pointer-events: auto; }

.stage[data-open="true"] .pager__dots { pointer-events: none; }

/* Prev / next — soft floating controls at the side edges, mid height, where a
   thumb naturally lands. Kept light so they never fight the character. */
.navbtn {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
  color: var(--brand-primary);
  font-family: var(--font-family);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease,
              opacity 0.4s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-50%);
}

.navbtn--prev { left: var(--space-5); }
.navbtn--next { right: var(--space-5); }

.navbtn:hover {
  background: var(--brand-primary);
  color: var(--white);
  box-shadow: 0 8px 26px rgba(255, 0, 75, 0.30);
}
.navbtn--prev:hover { transform: translateY(-50%) translateX(-3px); }
.navbtn--next:hover { transform: translateY(-50%) translateX(3px); }
.navbtn:active { transform: translateY(-50%) scale(0.92); }

/* While presenting, the arrows keep flanking the hero: the next arrow steps
   out of the side panel, and hover flips to black so it reads on the wash */
.stage[data-open="true"] .navbtn--next { right: calc(min(46vw, 620px) + var(--space-5)); }
.stage[data-open="true"] .navbtn:hover {
  background: var(--black);
  color: var(--white);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}
.navbtn > span { display: block; margin-top: -3px; }
.navbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.pager__dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--border-default);
  transition: background 0.3s;
}
.pager__dot:hover { background: var(--gray-300); }
.pager__dot[aria-selected="true"] { background: var(--brand-primary); }
.pager__dot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.pager__hint {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  animation: wcPulse 3s infinite;
}

/* --------------------------------------------------------------------------
   Detail panel
   -------------------------------------------------------------------------- */

.detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: min(46vw, 620px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  animation: wcSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.detail[hidden] { display: none; }
/* focused programmatically on open — the panel is the region, not a control */
.detail:focus, .detail:focus-visible { outline: none; }

.detail__inner { margin: auto 0; display: flex; flex-direction: column; }

.detail__eyebrow {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-inverse);
}

.detail__name {
  margin: 10px 0 0;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-inverse);
}

.detail__desc {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.92);
  max-width: 52ch;
}

.detail__block { animation: wcFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

.detail__actions {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  animation-delay: 0.28s;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  background: var(--white);
  color: var(--brand-primary);
  padding: var(--space-4) 30px;
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.btn-primary__arrow { font-weight: var(--weight-black); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--black); color: var(--white); }

.btn-back {
  background: none;
  border: none;
  border-bottom: 2px solid var(--white);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-inverse);
  padding: var(--space-4) var(--space-2);
  transition: color 0.25s, border-color 0.25s;
}
.btn-back:hover, .btn-back:focus-visible { color: var(--black); border-bottom-color: var(--black); }
.btn-primary:focus-visible, .btn-back:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Boot overlay
   -------------------------------------------------------------------------- */

.boot {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity 0.45s;
}

.boot[hidden] { display: none; }
.boot[data-leaving="true"] { opacity: 0; pointer-events: none; }

.boot__mark { height: 52px; width: auto; }

.boot__label {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: wcPulse 1.4s infinite;
  text-align: center;
  max-width: 40ch;
  line-height: 1.6;
}

.boot__label[data-error="true"] {
  animation: none;
  color: var(--brand-primary);
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Short desktop viewports — the panel's type is sized in px while the 3D hero
   scales with the viewport, so on low screens the copy would crowd the
   composition. Tighten it to keep both sides in proportion.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (max-height: 820px) {
  .detail { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .detail__name { font-size: clamp(34px, 3.8vw, 50px); }
  .detail__desc { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .detail__actions { margin-top: 26px; }
  .btn-primary { padding: 14px 26px; }
}

@media (min-width: 901px) and (max-height: 680px) {
  .detail__name { font-size: clamp(30px, 3.2vw, 42px); }
  .detail__desc { font-size: 14px; }
  .detail__actions { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   Narrow viewports — the source design is desktop-first; below 900px the
   detail panel becomes a full-bleed sheet so nothing gets clipped.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .masthead { padding: 20px 24px; }
  /* tighter padding keeps the underline near the label, clear of the intro */
  .btn-home { font-size: 11px; letter-spacing: 0.12em; padding: var(--space-2) var(--space-1); }
  .intro { top: 78px; }
  .intro__title { font-size: 24px; }

  /* Stack the footer: readout on top, controls below. Side by side they
     collide on a phone and both land on top of the character. */
  .ticker {
    left: var(--space-5);
    right: var(--space-5);
    bottom: 104px;
  }
  .ticker__index { font-size: 38px; }
  .ticker__name { font-size: 20px; }
  .ticker__tagline { font-size: 13px; }

  .pager {
    left: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    align-items: stretch;
    gap: var(--space-2);
  }
  .pager__nav { justify-content: space-between; width: 100%; }
  .navbtn { width: 46px; height: 46px; font-size: 26px; }
  /* on the stacked layout the hero lives above the sheet — keep the arrows
     centred on the character zone instead of leaving them under the panel */
  .stage[data-open="true"] .navbtn { top: 40%; }
  .stage[data-open="true"] .navbtn--next { right: var(--space-5); }
  .pager__hint {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
    max-width: none;
  }

  /* Bottom sheet: the character stays legible above it instead of behind the
     copy. The gradient lets the model sink into the panel rather than being
     chopped by a hard edge. Everything below is tuned so the whole panel —
     CTA included — fits without scrolling on a standard phone. */
  .detail {
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 66vh;
    padding: 52px var(--space-5) var(--space-5);
    background: linear-gradient(to bottom, rgba(255, 0, 75, 0) 0, var(--surface-brand) 52px);
    animation-name: wcSlideUp;
    overscroll-behavior: contain;
  }
  .detail__inner { margin: 0; }
  /* the sheet already slides in as a whole; per-block transforms would also
     make each block a containing block, trapping the absolute back button */
  .detail__block { animation: none; }

  .detail__eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .detail__name { margin-top: 4px; font-size: clamp(30px, 9vw, 44px); }
  .detail__desc { margin-top: 10px; font-size: 14px; line-height: 1.5; }

  .detail__actions { margin-top: 14px; }
  .btn-primary { width: 100%; justify-content: center; padding: 15px var(--space-5); }
  /* back control lives in the masthead now */
  .masthead .btn-back { font-size: 11px; letter-spacing: 0.12em; }
}

@keyframes wcSlideUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .detail__actions { gap: var(--space-2); }
  .btn-primary { padding: var(--space-3) var(--space-5); font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Lead modal — "Quero saber mais" form, opened from the detail CTA.
   Dark card with pill fields, mirroring the official Wicomm contact form.
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
}

.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 2 * var(--space-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--gray-900);
  color: var(--text-inverse);
  border-radius: 22px;
  padding: 44px 46px;
  animation: wcFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-300);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}
.modal__close:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.modal__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.modal__title {
  margin: 0;
  font-size: 24px;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.modal__subtitle {
  margin: 8px 0 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-300);
}

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.lead-form[hidden] { display: none; }

.lead-form__field { display: flex; flex-direction: column; gap: 8px; }
.lead-form__field--full { grid-column: 1 / -1; }

.lead-form label {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--white);
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--gray-700);
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--white);
  font-family: var(--font-family);
  font-size: 14px;
  transition: border-color 0.25s, background 0.25s;
}
.lead-form textarea {
  border-radius: 20px;
  min-height: 116px;
  resize: vertical;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--gray-500); }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: rgba(255, 255, 255, 0.03);
}

/* Custom chevron so the select matches the pill inputs */
.lead-form__select { position: relative; }
.lead-form__select select { appearance: none; cursor: pointer; padding-right: 44px; }
.lead-form__select::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gray-300);
  border-bottom: 2px solid var(--gray-300);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lead-form select option { background: var(--gray-900); color: var(--white); }

.lead-form__req { color: var(--brand-primary); }

.lead-form input.is-invalid,
.lead-form textarea.is-invalid { border-color: var(--pink-500); }

.lead-form__field-error {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--pink-500);
  padding-left: var(--space-4);
}
.lead-form__field-error[hidden] { display: none; }

.lead-form__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--pink-500);
}
.lead-form__error[hidden] { display: none; }

.lead-form__submit {
  grid-column: 1 / -1;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-900);
  padding: 15px var(--space-5);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.lead-form__submit:hover:not(:disabled) { background: var(--brand-primary); color: var(--white); }
.lead-form__submit:disabled { opacity: 0.6; cursor: default; }
.lead-form__submit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.lead-success { text-align: center; padding: 26px 0 6px; }
.lead-success[hidden] { display: none; }

/* Check draws itself in: circle first, then the tick */
.lead-success__icon { display: flex; justify-content: center; margin-bottom: 20px; }
.lead-success__icon svg { width: 78px; height: 78px; }
.lead-success__icon circle {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: wcDrawStroke 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lead-success__icon path {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: wcDrawStroke 0.35s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wcDrawStroke { to { stroke-dashoffset: 0; } }

.lead-success__title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  animation: wcFadeUp 0.45s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lead-success__desc {
  margin: 12px auto 26px;
  max-width: 38ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-300);
  animation: wcFadeUp 0.45s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lead-success .lead-form__submit {
  width: 100%;
  animation: wcFadeUp 0.45s 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 600px) {
  /* the full label would collide with the centred wordmark on a phone */
  .btn-home__long { display: none; }

  .modal { padding: var(--space-3); }
  .modal__panel { padding: 34px 24px 26px; border-radius: 18px; }
  .modal__title { font-size: 20px; }
  .modal__subtitle { margin-bottom: 20px; }
  .lead-form { grid-template-columns: 1fr; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pager__hint, .boot__label { animation: none; }
  .detail, .detail__block, .modal__panel,
  .lead-success__icon circle, .lead-success__icon path,
  .lead-success__title, .lead-success__desc,
  .lead-success .lead-form__submit { animation-duration: 0.01ms; animation-delay: 0s; }
  * { transition-duration: 0.01ms !important; }
}