/*
 * FOTOGRAFUS · Site público · página ORYSIA (/orysia)
 *
 * Carregar DEPOIS de fotografus-site.css:
 *   <link rel="stylesheet" href="/assets/css/site-orysia.css?v=20261013-redesign">
 *
 * Regras
 *   - Tudo aqui vale só para <body class="fs-site oy-page"> (prefixo oy-).
 *   - O violeta é exclusivo da ORYSIA; o resto usa os tokens --fs-* do site.
 *   - As molduras .oy-mock são ilustrações do produto (role="img" no HTML):
 *     não têm ações reais, e os "botões" desenhados nelas são <span>.
 */

/* ==========================================================================
   1. Tokens da página
   ========================================================================== */

.oy-page {
  --oy-chrome: #0b1018;
  --oy-violet-fill: #9b87f5;
  --oy-violet-dash: #4a4180;
  --oy-bubble: #17142b;
  --oy-deep: #0e0c1a;
  --oy-input: #0b0a16;
  --oy-copper-bg: #2a2016;
  --oy-copper-fg: #e3b583;
  --oy-copper-line: #4a3823;
  --oy-warn-bg: #2a1912;
  --oy-warn-line: #4a2a1e;
  --oy-teal-bg: #102a27;
  --oy-teal-line: #1d4a44;
}

/* ==========================================================================
   2. Utilidades e textos curtos das ilustrações
   ========================================================================== */

.oy-page .oy-stack-40 { gap: 40px; }
.oy-page .oy-self-start { align-self: flex-start; }
.oy-page .oy-mt-auto { margin-top: auto; }

.oy-page .oy-eyebrow-ico {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oy-page .oy-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.oy-page .oy-kicker {
  margin: 0;
  color: var(--fs-orysia);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oy-page .oy-mock-title {
  margin: 0;
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.oy-page .oy-mock-title-sm { font-size: 16px; }

.oy-page .oy-mock-sub {
  margin: 2px 0 0;
  color: var(--fs-dim);
  font-size: 12px;
  line-height: 1.5;
}

.oy-page .oy-mock-sub-md {
  margin: 3px 0 0;
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.5;
}

.oy-page .oy-small {
  margin: 0;
  color: var(--fs-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.oy-page .oy-micro {
  margin: 0;
  color: var(--fs-muted);
  font-size: 12px;
  line-height: 1.5;
}

.oy-page .oy-strong {
  margin: 0;
  color: var(--fs-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.oy-page .oy-label {
  margin: 0;
  color: var(--fs-text-2);
  font-family: var(--fs-font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.oy-page .oy-h3-lg {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Lista com marca de verificação (verde-água claro, como na referência). */
.oy-page .oy-checks { gap: 10px; }
.oy-page .oy-checks > li { gap: 10px; }
.oy-page .oy-checks > li > svg { color: var(--fs-teal-2); }

/* ==========================================================================
   3. Etiquetas, filtros e "botões" desenhados das ilustrações
   ========================================================================== */

.oy-page .oy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oy-page .oy-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oy-page .oy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--fs-line-ico);
  border-radius: 7px;
  background: var(--fs-surface-2);
  color: var(--fs-text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.oy-page .oy-tag svg { flex: none; }
.oy-page .oy-tag-strong { border-color: var(--fs-line-strong); }

.oy-page .oy-tag-violet {
  border-color: var(--fs-orysia-line-2);
  background: var(--fs-orysia-surface-2);
  color: var(--fs-orysia-text);
}

.oy-page .oy-tag-violet-soft {
  border-color: var(--fs-orysia-line-2);
  color: var(--fs-orysia-text);
}

.oy-page .oy-tag-dashed {
  border-style: dashed;
  border-color: var(--oy-violet-dash);
  color: var(--fs-orysia-text);
}

.oy-page .oy-tag-copper {
  border-color: var(--oy-copper-line);
  background: var(--oy-copper-bg);
  color: var(--oy-copper-fg);
}

.oy-page .oy-tag-warn {
  border-color: var(--oy-warn-line);
  background: var(--oy-warn-bg);
  color: var(--fs-warn);
}

.oy-page .oy-tag-teal {
  border-color: var(--oy-teal-line);
  background: var(--oy-teal-bg);
  color: var(--fs-teal-2);
}

/* Etiquetas sobre a fotografia. */
.oy-page .oy-tag-glass {
  border-color: var(--fs-line);
  background: rgba(8, 11, 17, 0.88);
  color: var(--fs-text);
}

.oy-page .oy-tag-glass.oy-tag-muted { color: var(--fs-text-2); }

.oy-page .oy-tag-glass.oy-tag-warn {
  border-color: var(--oy-warn-line);
  background: rgba(8, 11, 17, 0.9);
  color: var(--fs-warn);
}

.oy-page .oy-tag-glass.oy-tag-violet {
  border-color: var(--fs-orysia-line-2);
  background: rgba(17, 15, 31, 0.92);
  color: var(--fs-orysia-text);
}

.oy-page .oy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oy-page .oy-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--fs-line-strong);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.oy-page .oy-filter b { color: var(--fs-text); }

.oy-page .oy-filter.is-active {
  border-color: var(--fs-orysia-line-2);
  background: var(--fs-orysia-surface-2);
  color: var(--fs-text);
}

.oy-page .oy-filter.is-active b { color: var(--fs-orysia-text); }

.oy-page .oy-filter-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.oy-page .oy-fakebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fs-line-strong);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.oy-page .oy-fakebtn-primary {
  border-color: var(--fs-primary-fill);
  background: var(--fs-primary-fill);
  color: #fff;
}

.oy-page .oy-fakebtn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.oy-page .oy-fakebtn-lg {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--fs-radius);
  font-size: 14px;
}

.oy-page .oy-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oy-page .oy-act {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--fs-line-strong);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.oy-page .oy-act-violet {
  border-color: var(--fs-orysia-line-2);
  color: var(--fs-orysia-text);
}

.oy-page .oy-act-warn {
  border-color: var(--oy-warn-line);
  color: var(--fs-warn);
}

.oy-page .oy-act-off {
  color: var(--fs-dim);
  text-decoration: line-through;
}

.oy-page .oy-act-blue {
  align-self: flex-start;
  min-height: 0;
  padding: 8px 12px;
  color: var(--fs-blue-3);
  font-size: 13px;
}

/* ==========================================================================
   4. Molduras de ilustração (cartões do produto)
   ========================================================================== */

.oy-page .oy-mock { overflow: hidden; }

.oy-page .oy-mock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.oy-page .oy-mock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fs-line);
}

.oy-page .oy-mock-bar-lg { padding-block: 18px; }

.oy-page .oy-mock-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fs-line);
  background: var(--oy-chrome);
  color: var(--fs-text-2);
  font-size: 13px;
}

.oy-page .oy-mock-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--fs-line);
  background: var(--oy-chrome);
}

.oy-page .oy-mock-foot-text {
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--fs-line);
  background: var(--oy-chrome);
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.5;
}

.oy-page .oy-mock-pad {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.oy-page .oy-mock-pad-18 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.oy-page .oy-mock-pad-18.oy-gap-10 { gap: 10px; }

/* Fotografia com marcações por cima. */
.oy-page .oy-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--fs-bg-alt);
}

.oy-page .oy-shot-round { border-radius: var(--fs-radius); }

.oy-page .oy-shot > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oy-page .oy-shot-file {
  position: absolute;
  top: 10px;
  left: 10px;
}

.oy-page .oy-shot-tags {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.oy-page .oy-shot-tags-lg {
  right: 12px;
  bottom: 12px;
  left: 12px;
}

.oy-page .oy-shot-tags-top {
  top: 10px;
  right: auto;
  bottom: auto;
}

/* Rosto detectado. */
.oy-page .oy-face {
  position: absolute;
  border: 2px solid var(--fs-orysia);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(8, 11, 17, 0.55);
}

.oy-page .oy-face-label {
  position: absolute;
  padding: 2px 7px;
  border: 1px solid var(--fs-orysia-line-3);
  border-radius: 5px;
  background: var(--fs-orysia-surface);
  color: var(--fs-orysia-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.oy-page .oy-face-hero { top: 23.1%; left: 56.3%; width: 15%; height: 31.3%; }
.oy-page .oy-face-hero .oy-face-label { bottom: calc(100% + 6px); left: -2px; }
.oy-page .oy-face-p1 { top: 12.7%; left: 54%; width: 10.4%; height: 22.6%; }
.oy-page .oy-face-p1 .oy-face-label { top: 0; right: calc(100% + 6px); }
.oy-page .oy-face-p2 { top: 7.5%; left: 62.2%; width: 10.7%; height: 23.7%; }
.oy-page .oy-face-p2 .oy-face-label { top: 0; left: calc(100% + 6px); }

/* Áreas técnicas marcadas (realces, sombras). */
.oy-page .oy-zone {
  position: absolute;
  border: 2px dashed var(--fs-warn);
  border-radius: var(--fs-radius-sm);
}

.oy-page .oy-zone-hl { top: 8%; left: 50%; width: 32%; height: 30%; }
.oy-page .oy-zone-sh { top: 64%; left: 1.5%; width: 13%; height: 32%; }

.oy-page .oy-zone-label {
  position: absolute;
  white-space: nowrap;
}

.oy-page .oy-zone-label-hl { top: calc(38% + 6px); left: 50%; }
.oy-page .oy-zone-label-sh { top: 82%; left: calc(14.5% + 8px); }

/* Enquadramento das miniaturas (substitui estilos inline da referência). */
.oy-page .oy-pos-62-30 { object-position: 62% 30%; }
.oy-page .oy-pos-65-30 { object-position: 65% 30%; }
.oy-page .oy-pos-66-26 { object-position: 66% 26%; }
.oy-page .oy-pos-54-34 { object-position: 54% 34%; }
.oy-page .oy-pos-64-25 { object-position: 64% 25%; }
.oy-page .oy-pos-75-60 { object-position: 75% 60%; }
.oy-page .oy-pos-60-40 { object-position: 60% 40%; }
.oy-page .oy-pos-72-70 { object-position: 72% 70%; }
.oy-page .oy-pos-66-20 { object-position: 66% 20%; }
.oy-page .oy-pos-85-30 { object-position: 85% 30%; }
.oy-page .oy-pos-15-70 { object-position: 15% 70%; }
.oy-page .oy-pos-90-50 { object-position: 90% 50%; }
.oy-page .oy-pos-80-50 { object-position: 80% 50%; }
.oy-page .oy-pos-60-20 { object-position: 60% 20%; }
.oy-page .oy-pos-30-50 { object-position: 30% 50%; }

/* Cores das barras de progresso ilustrativas. */
.oy-page .oy-fill-violet { background: var(--oy-violet-fill); }
.oy-page .oy-fill-warn { background: var(--fs-warn-2); }
.oy-page .oy-fill-teal { background: var(--fs-teal); }

/* ==========================================================================
   5. Abertura (curadoria assistida)
   ========================================================================== */

.oy-page .oy-hero-visual { flex-basis: 600px; }

/* Divisória de 1px que vira horizontal quando a coluna lateral quebra. */
.oy-page .oy-curation {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--fs-line);
}

.oy-page .oy-curation-main {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--fs-surface);
}

.oy-page .oy-curation-aside {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: var(--oy-chrome);
}

.oy-page .oy-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.oy-page .oy-thumb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.oy-page .oy-thumb > img {
  display: block;
  width: 100%;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
}

.oy-page .oy-thumb.is-on > img {
  outline: 2px solid var(--fs-orysia);
  outline-offset: -2px;
}

.oy-page .oy-thumb.is-dim > img { opacity: 0.55; }

.oy-page .oy-thumb-label {
  color: var(--fs-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.oy-page .oy-thumb-label.is-violet { color: var(--fs-orysia-text); }
.oy-page .oy-thumb-label.is-warn { color: var(--fs-warn); }

.oy-page .oy-aside-title {
  margin: 0;
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 15px;
  font-weight: 600;
}

.oy-page .oy-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.oy-page .oy-score-num {
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.oy-page .oy-score-num-md { font-size: 28px; }

.oy-page .oy-score-unit {
  color: var(--fs-muted);
  font-size: 14px;
}

.oy-page .oy-score-unit-sm { font-size: 13px; }

.oy-page .oy-aside-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--fs-line);
}

.oy-page .oy-aside-label {
  margin: 0;
  color: var(--fs-text);
  font-size: 12px;
  font-weight: 700;
}

/* Cartão flutuante violeta ("Sem descarte automático").
   Mais baixo que o padrão para não cobrir as legendas das miniaturas. */
.oy-page .oy-float {
  bottom: -56px;
  border-color: var(--fs-orysia-line);
  background: var(--fs-orysia-surface);
}

.oy-page .oy-float-title {
  margin: 0;
  color: var(--fs-text);
  font-size: 13px;
  font-weight: 700;
}

.oy-page .oy-float-text {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ==========================================================================
   6. Índice "O que a ORYSIA faz"
   ========================================================================== */

.oy-page .oy-index {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-xl);
  background: var(--fs-line);
}

.oy-page .oy-index-item {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--fs-bg);
  color: var(--fs-text);
  transition: background-color 0.15s var(--fs-ease);
}

.oy-page .oy-index-item:hover {
  background: var(--fs-surface);
  color: var(--fs-text);
}

.oy-page .oy-index-item:focus-visible { outline-offset: -3px; }

.oy-page .oy-index-num {
  color: var(--fs-orysia);
  font-family: var(--fs-font-display);
  font-size: 13px;
  font-weight: 600;
}

.oy-page .oy-index-title { font-weight: 700; }

.oy-page .oy-index-text {
  color: var(--fs-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ==========================================================================
   7. Qualidade técnica
   ========================================================================== */

.oy-page .oy-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px 24px;
  padding: 20px;
}

.oy-page .oy-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.oy-page .oy-metric-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--fs-text);
  font-size: 13px;
}

.oy-page .oy-metric-value { color: var(--fs-text-2); }
.oy-page .oy-metric-value.is-warn { color: var(--fs-warn); }

/* Nota violeta com ícone (texto real da página). */
.oy-page .oy-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
}

.oy-page .oy-note > svg {
  flex: none;
  margin-top: 2px;
  color: var(--fs-orysia);
}

.oy-page .oy-note p {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 15px;
  line-height: 1.6;
}

.oy-page .oy-note strong { color: var(--fs-text); }

.oy-page .oy-note.oy-note-sm {
  gap: 12px;
  padding: 16px;
}

.oy-page .oy-note.oy-note-sm p {
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================================
   8. Revisão guiada e possíveis duplicadas
   ========================================================================== */

.oy-page .oy-review-row {
  display: grid;
  grid-template-columns: 230px 160px minmax(0, 1fr) 190px 240px;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--fs-line);
}

.oy-page .oy-review-head {
  border-top: 0;
  background: var(--oy-chrome);
  color: var(--fs-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.oy-page .oy-review-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.oy-page .oy-review-photo > img {
  flex: none;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.oy-page .oy-review-photo > img.is-dim { opacity: 0.6; }

.oy-page .oy-file {
  margin: 0;
  color: var(--fs-text);
  font-size: 14px;
  font-weight: 700;
}

.oy-page .oy-file-sub {
  margin: 0;
  color: var(--fs-dim);
  font-size: 12px;
}

.oy-page .oy-cell {
  min-width: 0;
  color: var(--fs-text-2);
  font-size: 13px;
  line-height: 1.5;
}

.oy-page .oy-cell-muted { color: var(--fs-muted); }

.oy-page .oy-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.oy-page .oy-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fs-text-2);
  font-size: 12px;
  font-weight: 700;
}

.oy-page .oy-check::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fs-line-hover);
  border-radius: 4px;
}

.oy-page .oy-copper-text {
  color: var(--oy-copper-fg);
  font-size: 12px;
}

.oy-page .oy-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oy-page .oy-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.oy-page .oy-feature .fs-card-title { font-size: 16px; }
.oy-page .oy-feature .fs-card-text { margin-top: 6px; }

.oy-page .oy-sub {
  padding-top: 48px;
  border-top: 1px solid var(--fs-line-soft);
}

.oy-page .oy-split-48 { gap: 48px; }

.oy-page .oy-text-col {
  flex-basis: 360px;
  gap: 18px;
}

.oy-page .oy-media-col { flex-basis: 580px; }

.oy-page .oy-dups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: 12px;
}

.oy-page .oy-dup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-md);
  background: var(--fs-surface-2);
}

.oy-page .oy-dup > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.oy-page .oy-dup.is-protected > img {
  outline: 2px solid var(--fs-copper);
  outline-offset: -2px;
}

.oy-page .oy-dup-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
}

.oy-page .oy-dup-name {
  margin: 0;
  color: var(--fs-text);
  font-size: 13px;
  font-weight: 700;
}

.oy-page .oy-dup-note {
  margin: 0;
  color: var(--fs-muted);
  font-size: 12px;
}

.oy-page .oy-dup-note.is-copper { color: var(--oy-copper-fg); }

/* ==========================================================================
   9. Rostos e pessoas
   ========================================================================== */

.oy-page .oy-rostos-text { flex-basis: 380px; }

.oy-page .oy-rostos-media {
  display: flex;
  flex-basis: 620px;
  flex-direction: column;
  gap: 14px;
}

.oy-page .oy-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oy-page .oy-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.oy-page .oy-point p {
  margin: 0;
  color: var(--fs-text-2);
  font-size: 15px;
  line-height: 1.55;
}

.oy-page .fs-ico.oy-ico-32 {
  width: 32px;
  height: 32px;
  border-radius: var(--fs-radius-sm);
}

.oy-page .oy-mock-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--fs-orysia-line);
  background: var(--fs-orysia-surface);
}

.oy-page .oy-mock-note > svg {
  flex: none;
  margin-top: 1px;
  color: var(--fs-orysia);
}

.oy-page .oy-mock-note p {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 14px;
  line-height: 1.55;
}

.oy-page .oy-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}

.oy-page .oy-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-surface-2);
}

.oy-page .oy-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--fs-orysia-line-2);
  border-radius: 50%;
  background: var(--fs-orysia-surface-2);
  color: var(--fs-orysia-text);
  font-family: var(--fs-font-display);
  font-size: 14px;
  font-weight: 600;
}

.oy-page .oy-person-name {
  margin: 0;
  color: var(--fs-text);
  font-size: 14px;
  font-weight: 700;
}

.oy-page .oy-person-meta {
  margin: 0;
  color: var(--fs-muted);
  font-size: 12px;
}

/* ==========================================================================
   10. Proposta de álbum
   ========================================================================== */

.oy-page .oy-head-660 { max-width: 660px; }
.oy-page .fs-head-row > .oy-lead-460 { max-width: 460px; }

.oy-page .oy-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.oy-page .oy-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oy-page .oy-field-label {
  color: var(--fs-muted);
  font-size: 12px;
}

.oy-page .oy-field-value {
  display: inline-flex;
  align-items: center;
  min-width: 64px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--fs-line-strong);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-2);
  color: var(--fs-text);
  font-weight: 700;
}

.oy-page .oy-spreads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  padding: 20px;
}

.oy-page .oy-spread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-md);
  background: var(--fs-surface-2);
}

.oy-page .oy-spread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.oy-page .oy-spread-num {
  color: var(--fs-muted);
  font-size: 12px;
  white-space: nowrap;
}

.oy-page .oy-spread-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.oy-page .oy-spread-grid > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
}

.oy-page .oy-spread-grid > img.is-protected {
  outline: 2px solid var(--fs-copper);
  outline-offset: -2px;
}

.oy-page .oy-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fs-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.oy-page .oy-legend::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--fs-copper);
  border-radius: 3px;
}

.oy-page .oy-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.oy-page .oy-duo > :first-child { flex: 1 1 460px; }
.oy-page .oy-duo > :last-child { flex: 1 1 360px; }

.oy-page .oy-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oy-page .oy-card-head .fs-card-title { font-size: 16px; }

.oy-page .oy-card-sub {
  margin: 0;
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ==========================================================================
   11. No painel, no app e nos programas
   ========================================================================== */

.oy-page .oy-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: start;
  gap: 20px;
}

.oy-page .oy-flow-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.oy-page .oy-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-surface-2);
}

.oy-page .oy-status-title {
  margin: 0;
  color: var(--fs-teal-2);
  font-size: 13px;
  font-weight: 700;
}

.oy-page .oy-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.oy-page .oy-stat {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-surface-2);
}

.oy-page .oy-stat-num {
  margin: 0;
  color: var(--fs-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.oy-page .oy-stat-label {
  margin: 0;
  color: var(--fs-muted);
  font-size: 11px;
  line-height: 1.4;
}

.oy-page .oy-stats-violet .oy-stat {
  padding: 12px;
  border-color: var(--fs-orysia-line);
  background: var(--oy-bubble);
}

.oy-page .oy-stats-violet .oy-stat-num { font-size: 18px; }
.oy-page .oy-stats-violet .oy-stat-label { color: var(--fs-orysia-muted); }

/* Celular do aplicativo do cliente. */
.oy-page .fs-phone.oy-phone {
  position: relative;
  width: 288px;
  height: 576px;
  margin-inline: auto;
  border-radius: 38px;
}

.oy-page .oy-app-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 16px 10px;
}

.oy-page .oy-app-studio {
  color: var(--fs-muted);
  font-size: 11px;
}

.oy-page .oy-app-title {
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 17px;
  font-weight: 600;
}

.oy-page .oy-app-assist {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 10px;
  padding: 10px;
  border: 1px solid var(--fs-orysia-line);
  border-radius: var(--fs-radius-md);
  background: var(--fs-orysia-surface);
}

.oy-page .oy-app-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fs-orysia-surface-2);
  color: var(--fs-orysia-text);
  font-family: var(--fs-font-display);
  font-size: 12px;
  font-weight: 600;
}

.oy-page .oy-app-assist-title {
  margin: 0;
  color: var(--fs-text);
  font-size: 12px;
  font-weight: 700;
}

.oy-page .oy-app-assist-text {
  margin: 2px 0 0;
  color: var(--fs-orysia-muted);
  font-size: 11px;
  line-height: 1.45;
}

.oy-page .oy-app-pills {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.oy-page .oy-app-pill {
  padding: 6px 10px;
  border: 1px solid var(--fs-line-strong);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-text-2);
}

.oy-page .oy-app-pill.is-active {
  border-color: var(--fs-primary-fill);
  background: var(--fs-primary-fill);
  color: #fff;
}

.oy-page .oy-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 0 4px;
}

.oy-page .oy-app-photo { position: relative; }

.oy-page .oy-app-photo > img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
}

.oy-page .oy-app-flag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(17, 15, 31, 0.94);
  color: var(--fs-orysia-text);
  font-size: 10px;
  font-weight: 700;
}

.oy-page .oy-app-flag.is-warn {
  background: rgba(8, 11, 17, 0.92);
  color: var(--fs-warn);
}

.oy-page .oy-app-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-top: 1px solid var(--fs-orysia-line);
  border-radius: 18px 18px 0 0;
  background: var(--fs-surface-2);
  box-shadow: 0 -16px 30px rgba(0, 0, 0, 0.5);
}

.oy-page .oy-app-sheet-kicker {
  color: var(--fs-orysia);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oy-page .oy-app-sheet-title {
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 15px;
  font-weight: 600;
}

.oy-page .oy-app-sheet-text {
  color: var(--fs-text-2);
  font-size: 12px;
}

.oy-page .oy-app-sheet-score {
  color: var(--fs-text);
  font-size: 12px;
}

.oy-page .oy-app-sheet-note {
  color: var(--fs-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Programas no computador. */
.oy-page .oy-prog {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius);
  background: var(--fs-surface-2);
}

.oy-page .oy-prog-name {
  margin: 0;
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-weight: 600;
}

.oy-page .oy-prog-role {
  margin: 0;
  color: var(--fs-muted);
  font-size: 12px;
}

.oy-page .oy-prog-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 0;
  color: var(--fs-text-2);
  font-size: 13px;
}

/* ==========================================================================
   12. Conversa com a ORYSIA
   ========================================================================== */

.oy-page .oy-head-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
}

.oy-page .oy-head-aside .fs-lead { font-size: 16px; }

.oy-page .oy-soon-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--fs-muted);
}

.oy-page .fs-card.oy-chat {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  background: var(--fs-orysia-line);
}

.oy-page .oy-chat-main {
  display: flex;
  flex: 1 1 560px;
  flex-direction: column;
  min-width: 0;
  background: var(--fs-orysia-surface);
}

.oy-page .oy-chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fs-orysia-line);
}

.oy-page .oy-chat-id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oy-page .oy-chat-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fs-orysia-line-2);
  border-radius: 50%;
  background: var(--fs-orysia-surface-2);
  color: var(--fs-orysia-text);
  font-family: var(--fs-font-display);
  font-weight: 600;
}

.oy-page .oy-chat-name {
  margin: 0;
  color: var(--fs-text);
  font-weight: 700;
}

.oy-page .oy-chat-sub {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 12px;
}

.oy-page .oy-chat .fs-chip { white-space: normal; }
.oy-page .oy-chat .fs-dot { width: 7px; height: 7px; }

.oy-page .oy-chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.oy-page .oy-bubble {
  align-self: flex-start;
  max-width: 86%;
  padding: 12px 14px;
  border: 1px solid var(--fs-orysia-line);
  border-radius: 14px 14px 14px 4px;
  background: var(--oy-bubble);
}

.oy-page .oy-bubble.oy-bubble-me {
  align-self: flex-end;
  max-width: 78%;
  border-color: var(--fs-line-ico);
  border-radius: 14px 14px 4px 14px;
  background: var(--fs-surface-2);
}

.oy-page .oy-bubble-who {
  margin: 0 0 4px;
  color: var(--fs-orysia);
  font-size: 11px;
  font-weight: 700;
}

.oy-page .oy-bubble-me .oy-bubble-who { color: var(--fs-muted); }

.oy-page .oy-bubble-text {
  margin: 0;
  color: var(--fs-text);
  font-size: 14px;
  line-height: 1.55;
}

.oy-page .oy-chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 16px;
}

.oy-page .oy-suggest {
  padding: 6px 12px;
  border: 1px solid var(--fs-orysia-line-2);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-orysia-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.oy-page .oy-chat-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--fs-orysia-line);
}

.oy-page .oy-compose-field {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.oy-page .oy-compose-label {
  color: var(--fs-orysia-muted);
  font-size: 12px;
  font-weight: 700;
}

.oy-page .oy-compose-input {
  display: block;
  padding: 12px;
  border: 1px solid var(--fs-orysia-line);
  border-radius: var(--fs-radius);
  background: var(--oy-input);
  color: var(--fs-muted);
  font-size: 14px;
}

.oy-page .oy-chat-aside {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  background: var(--oy-deep);
}

.oy-page .oy-chat-aside .oy-kicker { letter-spacing: 0.14em; }

.oy-page .oy-aside-h {
  margin: 4px 0 0;
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 18px;
  font-weight: 600;
}

.oy-page .oy-guard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--fs-orysia-line-3);
  border-radius: var(--fs-radius-md);
}

.oy-page .oy-guard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--fs-text);
  font-size: 14px;
  font-weight: 700;
}

.oy-page .oy-guard-title > svg {
  flex: none;
  color: var(--fs-orysia);
}

.oy-page .oy-guard-text {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ==========================================================================
   13. Onde a ORYSIA trabalha
   ========================================================================== */

.oy-page .oy-where {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.oy-page .oy-where-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
}

.oy-page .oy-where-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.oy-page .oy-where-card .fs-title { font-size: 21px; }

.oy-page .oy-where-card .fs-card-text { line-height: 1.6; }

.oy-page .oy-dash {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--fs-text-2);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

.oy-page .oy-dash > li {
  display: flex;
  gap: 10px;
}

.oy-page .oy-dash-mark {
  flex: none;
  color: var(--fs-orysia);
}

.oy-page .oy-joined {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--fs-line);
  border-radius: var(--fs-radius-xl);
  background: var(--fs-line);
}

.oy-page .oy-joined-item {
  display: flex;
  flex: 1 1 300px;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  background: var(--fs-bg-alt);
}

.oy-page .oy-joined-item > svg {
  flex: none;
  color: var(--fs-orysia);
}

.oy-page .oy-joined-title {
  margin: 0;
  color: var(--fs-text);
  font-family: var(--fs-font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.oy-page .oy-joined-text {
  margin: 4px 0 0;
  color: var(--fs-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================================
   14. Privacidade e controle
   ========================================================================== */

.oy-page .oy-privacy-text { flex-basis: 360px; }

.oy-page .oy-statement-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.oy-page .oy-statement-card > svg { color: var(--fs-orysia); }

.oy-page .oy-statement {
  margin: 0;
  color: var(--fs-text);
  font-family: var(--fs-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.oy-page .oy-statement-text {
  margin: 0;
  color: var(--fs-orysia-muted);
  font-size: 15px;
  line-height: 1.6;
}

.oy-page .oy-rules {
  display: flex;
  flex-basis: 560px;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oy-page .oy-rule {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--fs-line);
}

.oy-page .oy-rule:last-child { border-bottom: 1px solid var(--fs-line); }
.oy-page .oy-rule .fs-card-title { font-size: 16px; }

.oy-page .oy-rule .fs-card-text {
  margin-top: 6px;
  line-height: 1.6;
}

/* ==========================================================================
   15. Perguntas frequentes
   ========================================================================== */

.oy-page .oy-faq-intro {
  flex-basis: 320px;
  gap: 18px;
}

.oy-page .oy-faq {
  flex-basis: 600px;
  border-top: 1px solid var(--fs-line);
}

.oy-page .oy-faq.fs-faq-lines > details > summary {
  padding: 20px 0;
  font-size: 16px;
}

.oy-page .oy-faq.fs-faq-lines > details > p { max-width: 680px; }

/* Seta que gira (a referência usa chevron, não o sinal de mais). */
.oy-page .oy-faq > details[open] > summary > .fs-faq-icon { transform: rotate(180deg); }

/* ==========================================================================
   16. Responsivo
   ========================================================================== */

/* A tabela da revisão vira cartões empilhados, sem rolagem lateral. */
@media (max-width: 1120px) {
  .oy-page .oy-review-head { display: none; }

  .oy-page .oy-review-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px 16px;
    padding: 16px 20px;
  }

  .oy-page .oy-review-head + .oy-review-row { border-top: 0; }
  .oy-page .oy-review-photo { grid-column: 1 / -1; }

  .oy-page .oy-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--fs-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .oy-page .oy-cell-stack[data-label]::before { margin-bottom: 0; }
}

@media (max-width: 720px) {
  .oy-page .oy-where-card { padding: 22px; }
  .oy-page .oy-bubble,
  .oy-page .oy-bubble.oy-bubble-me { max-width: 92%; }
  .oy-page .oy-statement { font-size: 20px; }
}

@media (max-width: 640px) {
  .oy-page .oy-float { bottom: auto; }
  .oy-page .oy-mock-bar,
  .oy-page .oy-mock-foot,
  .oy-page .oy-mock-strip,
  .oy-page .oy-mock-foot-text,
  .oy-page .oy-chat-head,
  .oy-page .oy-chat-compose { padding-inline: 16px; }
  .oy-page .oy-chat-log { padding: 16px; }
  .oy-page .oy-chat-suggest { padding-inline: 16px; }
  .oy-page .oy-spreads,
  .oy-page .oy-metrics,
  .oy-page .oy-mock-pad { padding: 16px; }
  .oy-page .oy-review-row { padding-inline: 16px; }
}

@media (max-width: 560px) {
  .oy-page .oy-review-row { grid-template-columns: minmax(0, 1fr); }
  .oy-page .oy-joined-item { padding: 20px; }
}

@media (max-width: 480px) {
  .oy-page .oy-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oy-page .oy-thumb:nth-child(n + 4) { display: none; }
  .oy-page .oy-index-item { padding: 18px; }
  .oy-page .oy-score-num { font-size: 34px; }
  .oy-page .oy-face-label,
  .oy-page .oy-shot .oy-tag { font-size: 11px; }
}