/* ==========================================================================
   VOLL STUDIOS — ESTILOS DE PÁGINA
   Só entra aqui o que é específico de uma página e não cabe em components.css.
   Cada bloco fica sob um cabeçalho com o nome da página. Só tokens.
   ========================================================================== */

/* ==========================================================================
   COMPARTILHADO — PAINEL DECORATIVO
   Substitui a foto nas páginas que ainda não têm imagem própria.
   Nunca é uma "imagem falsa": é arte de marca, assumidamente gráfica.
   ========================================================================== */
.placeholder-art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 15% 12%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 58%),
    radial-gradient(96% 84% at 88% 92%, color-mix(in srgb, var(--teal-300) 46%, transparent) 0%, transparent 60%),
    linear-gradient(148deg, var(--accent-soft) 0%, var(--surface-raised) 100%);
  box-shadow: var(--sh-lg);
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* Malha de círculos concêntricos — eco da mandala da marca */
.placeholder-art::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-image:
    repeating-radial-gradient(circle at 30% 40%,
      transparent 0 26px,
      color-mix(in srgb, var(--accent-ink) 12%, transparent) 26px 27px);
  opacity: .5;
}
.placeholder-art::after {
  content: '';
  position: absolute;
  inset: auto -14% -32% auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent-ink) 22%, transparent);
  z-index: -1;
}
.placeholder-art__mark {
  width: clamp(64px, 22%, 128px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--accent-ink);
  box-shadow: var(--sh-md);
}
.placeholder-art__mark svg { width: 46%; height: 46%; stroke-width: 1.6; }
.placeholder-art__caption {
  position: absolute;
  inset-inline: var(--sp-5);
  bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
  text-align: center;
  opacity: .8;
}

/* ==========================================================================
   HOME
   ========================================================================== */
/* Faixa de logos / selos de autoridade sob o hero */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-5) var(--sp-10);
  padding-block: var(--sp-8);
  border-block: 1px solid var(--border);
}
.trust-strip__item {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-soft);
}
.trust-strip__item svg { width: 22px; height: 22px; color: var(--teal-500); flex-shrink: 0; }

/* Grade de serviços — o card central ganha peso em telas largas */
.services-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
@media (min-width: 1080px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* Faixa escura de jornada — cards sobrepostos ao topo, herança da v1 */
.journey-band { position: relative; background: var(--surface-dark); padding-block: var(--sp-24) var(--section-y); margin-top: var(--sp-16); }
.journey-band__cards { margin-top: calc(var(--sp-16) * -1 - var(--sp-8)); position: relative; z-index: var(--z-base); }
@media (max-width: 767px) { .journey-band { padding-block: var(--sp-20) var(--section-y-sm); margin-top: var(--sp-12); } }

/* ==========================================================================
   PÁGINAS DE SERVIÇO
   ========================================================================== */
/* Tabela de modalidades / protocolos */
.modality-list { display: grid; gap: var(--sp-4); }
.modality {
  display: grid; gap: var(--sp-4) var(--sp-5);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .modality:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--sh-md); } }
.modality__head { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.modality__head h3 { font-size: var(--fs-h4); }
.modality__body { grid-column: 2; color: var(--ink-soft); font-size: var(--fs-sm); }
.modality .icon-circle { grid-row: 1 / span 2; }
@media (max-width: 560px) {
  .modality { grid-template-columns: 1fr; }
  .modality__head, .modality__body { grid-column: 1; }
  .modality .icon-circle { grid-row: auto; }
}

/* Antes/depois em texto — "o que muda" */
.shift { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .shift { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.shift__arrow { display: grid; place-items: center; color: var(--accent); }
.shift__arrow svg { width: 30px; height: 30px; }
@media (max-width: 759px) { .shift__arrow { transform: rotate(90deg); } }

/* ==========================================================================
   CURSOS
   ========================================================================== */
.course-card { position: relative; overflow: hidden; padding: 0; }
.course-card__top { padding: var(--sp-6) var(--sp-6) var(--sp-5); background: var(--accent-soft); display: flex; flex-direction: column; gap: var(--sp-3); }
.course-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-soft); }
.course-card__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.course-card__meta svg { width: 15px; height: 15px; color: var(--accent-ink); }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-layout { display: grid; gap: var(--sp-10); grid-template-columns: 1fr; }
@media (min-width: 940px) { .contact-layout { grid-template-columns: 1fr 1.05fr; gap: var(--sp-16); align-items: start; } }
.contact-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(var(--sp-6), 4vw, var(--sp-10)); box-shadow: var(--sh-md); }
.contact-channels { display: grid; gap: var(--sp-4); }
.contact-channel {
  display: flex; align-items: flex-start; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .contact-channel:hover { border-color: var(--teal-400); transform: translateX(4px); } }
.contact-channel__label { font-size: var(--fs-xs); font-weight: var(--fw-extra); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-ink); }
.contact-channel strong { display: block; font-size: var(--fs-h4); color: var(--navy-500); line-height: 1.35; }
.contact-channel p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--sp-1); }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.timeline { position: relative; display: grid; gap: var(--sp-8); padding-left: var(--sp-10); }
.timeline::before {
  content: ''; position: absolute; left: 15px; top: var(--sp-2); bottom: var(--sp-2);
  width: 2px; background: linear-gradient(180deg, var(--teal-400), color-mix(in srgb, var(--teal-400) 8%, transparent));
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: ''; position: absolute; left: calc(var(--sp-10) * -1 + 9px); top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--teal-400); border: 3px solid var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-400) 22%, transparent);
}
.timeline__label { font-size: var(--fs-xs); font-weight: var(--fw-extra); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-ink); }
.timeline__item h3 { font-size: var(--fs-h4); margin-block: var(--sp-1) var(--sp-2); }
.timeline__item p { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page { min-height: 68svh; display: grid; place-items: center; text-align: center; padding-block: calc(var(--header-h) + var(--sp-16)) var(--sp-20); }
.error-page__code { font-size: clamp(4.5rem, 3rem + 8vw, 9rem); font-weight: var(--fw-black); line-height: .9; color: var(--teal-300); letter-spacing: var(--ls-tight); }