/* DESIGN SYSTEM V55 — Clinical Technical Frame =============================
   Assinatura visual: superfícies retas, fio fino e cantos técnicos marcados.
   Elementos de ação/status (botões, tags, avatares e marcadores) preservam
   geometrias circulares para não competir com os painéis de conteúdo. */

:root {
  --ds-frame-radius: 0;
  --ds-frame-width: 1px;
  --ds-frame-corner-size: 0.7rem;
  --ds-frame-corner-width: 2px;
  --ds-frame-border-light: rgba(13, 63, 112, 0.17);
  --ds-frame-corner-light: rgba(11, 74, 140, 0.72);
  --ds-frame-border-deep: rgba(142, 185, 227, 0.2);
  --ds-frame-corner-deep: rgba(214, 229, 245, 0.88);
  --ds-surface-shadow: 0 1.5rem 4rem rgba(8, 35, 57, 0.1);
  --ds-surface-shadow-hover: 0 2rem 5rem rgba(8, 35, 57, 0.16);
}

/* Tokens semânticos expostos para os componentes atuais e futuros. */
.card,
.media,
.medic-mosaic__photo,
.medic-mosaic__card,
.catizani-card-grid__midia,
.catizani-feature-card,
.vsl__player,
.depo,
.avaliacao,
.mecanismo-card,
.comparativo__caixa,
.jornada__painel,
.ciclo__saida,
.local__mapa-arte,
.lightbox__caixa {
  --ds-frame-border: var(--ds-frame-border-light);
  --ds-frame-corner: var(--ds-frame-corner-light);
  border-radius: var(--ds-frame-radius) !important;
}

.vsl__player,
.mecanismo-card,
.jornada__painel,
.local__mapa-arte,
.lightbox__caixa {
  --ds-frame-border: var(--ds-frame-border-deep);
  --ds-frame-corner: var(--ds-frame-corner-deep);
}

/* O fio principal é sempre discreto; os cantos carregam a assinatura. */
.card,
.media,
.medic-mosaic__photo,
.medic-mosaic__card,
.catizani-card-grid__midia,
.catizani-feature-card,
.vsl__player,
.depo,
.avaliacao,
.comparativo__caixa,
.local__mapa-arte,
.lightbox__caixa {
  position: relative;
  isolation: isolate;
  border-color: var(--ds-frame-border) !important;
}

/* Os cards do carrossel orbital precisam continuar absolutos. A assinatura
   visual entra sem alterar o posicionamento calculado pelo JavaScript. */
.mecanismo-card {
  isolation: isolate;
  border-color: var(--ds-frame-border) !important;
}

/* Um único overlay desenha os oito segmentos dos quatro vértices. */
.card::before,
.media::before,
.medic-mosaic__photo::before,
.medic-mosaic__card::before,
.catizani-card-grid__midia::before,
.catizani-feature-card::before,
.vsl__player::before,
.depo::before,
.avaliacao::before,
.mecanismo-card::before,
.comparativo__caixa::before,
.local__mapa-arte::before,
.lightbox__caixa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) left top / var(--ds-frame-corner-size) var(--ds-frame-corner-width) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) left top / var(--ds-frame-corner-width) var(--ds-frame-corner-size) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) right top / var(--ds-frame-corner-size) var(--ds-frame-corner-width) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) right top / var(--ds-frame-corner-width) var(--ds-frame-corner-size) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) left bottom / var(--ds-frame-corner-size) var(--ds-frame-corner-width) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) left bottom / var(--ds-frame-corner-width) var(--ds-frame-corner-size) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) right bottom / var(--ds-frame-corner-size) var(--ds-frame-corner-width) no-repeat,
    linear-gradient(var(--ds-frame-corner), var(--ds-frame-corner)) right bottom / var(--ds-frame-corner-width) var(--ds-frame-corner-size) no-repeat;
}

/* A jornada já possui marcadores estruturais próprios, com a mesma linguagem. */
.jornada__painel {
  border-color: var(--ds-frame-border-deep) !important;
}

.jornada__painel::before,
.jornada__painel::after,
.jornada__cantos::before,
.jornada__cantos::after {
  border-color: var(--ds-frame-corner-deep);
}

/* O comparativo mantém a coluna clínica destacada, agora com geometria reta. */
.comparativo__caixa::after,
.comparativo__col--b,
.comparativo__tabela tbody tr:last-child td:last-child {
  border-radius: 0 !important;
}

/* Cards verdes usam cantos azul-marinho para legibilidade sobre a superfície. */
.mecanismo-card {
  --ds-frame-border: rgba(3, 40, 25, 0.24);
  --ds-frame-corner: rgba(3, 40, 25, 0.7);
  border-color: var(--ds-frame-border) !important;
}

/* Superfícies claras compartilham elevação e comportamento. */
.card,
.catizani-feature-card,
.avaliacao,
.comparativo__caixa {
  box-shadow: var(--ds-surface-shadow);
}

.card--interactive:hover,
.catizani-feature-card:hover,
.avaliacao:hover {
  box-shadow: var(--ds-surface-shadow-hover);
}

/* Elementos auxiliares podem ter raio mínimo, sem parecer outro card. */
.catizani-card-grid__legenda {
  border-radius: 0.25rem;
}

/* Formas de ação/status não entram na regra de moldura. */
.btn,
.pill,
.credencial__cta,
.local__rota,
.jornada__painel-tag,
.mecanismo-card__tag,
.comparativo__selo {
  border-radius: var(--radius-pill);
}

/* Em telas pequenas os cantos ficam um pouco menores para manter proporção. */
@media (max-width: 47.99rem) {
  :root {
    --ds-frame-corner-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .catizani-feature-card,
  .avaliacao,
  .depo,
  .mecanismo-card {
    transition-duration: 0.01ms !important;
  }
}