/*
  Medic Raptor — Planos (/planos, COM-008)
  Catálogo público. Reaproveita .section, .grid, .badge e .btn; aqui só o
  que é próprio da página: cartões de plano, regras de franquia e tabelas.
  Cartão segue o canon (docs/canon/components.md): superfície elevada,
  borda sutil, hover por cor de borda — sem glow, sem pill em CTA.
*/

/* ---------- Hero fotográfico ---------- */
/* Mesma receita do hero do TECC (tecc.css): foto em bleed, scrim chapado no
   mobile e em gradiente no desktop, grade hairline e aresta oliva sólida.
   No desktop a foto ocupa só a metade direita e se funde ao preto pela
   esquerda (o fundo de estúdio da foto já é quase preto) — o texto nunca
   fica sobre o personagem. */

.plans-hero {
  position: relative;
  overflow: hidden;
  background: var(--raptor-black);
  border-bottom: 1px solid var(--border-subtle);
}

.plans-hero__media {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  /* Mobile first: a foto ocupa o topo e se dissolve no preto para baixo;
     o título entra sobre a parte já escurecida (personagem atrás do título). */
  height: min(118vw, 560px);
  mask-image: linear-gradient(180deg, black 50%, transparent 100%);
}

.plans-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 15%;
  filter: brightness(1.08) contrast(1.02);
}

.plans-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13, 17, 23, 0.1) 0,
    rgba(13, 17, 23, 0.35) min(40vw, 190px),
    rgba(13, 17, 23, 0.9) min(88vw, 420px),
    var(--raptor-black) min(118vw, 560px));
}

.plans-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 0% 0%, black, transparent 70%);
  opacity: 0.25;
}

.plans-hero__accent {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 96px;
  height: 96px;
  pointer-events: none;
  background: var(--raptor-olive);
  clip-path: polygon(100% 0, 100% 100%, 25% 0);
  opacity: 0.9;
}

.plans-hero__grid {
  position: relative;
  z-index: 3;
  padding-block: min(56vw, 260px) var(--space-7);
}

.plans-hero__content {
  max-width: 40rem;
}

.plans-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: var(--space-4);
}

.plans-hero__subtitle {
  font-size: var(--fs-500);
  color: var(--text-accent);
  margin-top: var(--space-2);
}

.plans-hero__lead {
  margin-top: var(--space-4);
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: var(--fs-300);
}

.plans-hero__actions {
  margin-top: var(--space-6);
}

.plans-hero__notice {
  margin-top: var(--space-6);
  max-width: 56ch;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--border-accent);
  font-size: var(--fs-200);
  color: var(--text-primary);
  background: rgba(13, 17, 23, 0.55);
}

.plans-hero__disclaimer {
  margin-top: var(--space-4);
  font-size: var(--fs-100);
  color: var(--text-secondary);
}

@media (min-width: 1024px) {
  .plans-hero__media {
    inset: 0 0 0 auto;
    height: auto;
    width: 58%;
    /* Fusão com o preto da página pela esquerda: sem costura visível. */
    mask-image: linear-gradient(90deg, transparent 0%, black 38%);
  }

  .plans-hero__scrim {
    background: linear-gradient(90deg,
      rgba(13, 17, 23, 0.6) 0%,
      rgba(13, 17, 23, 0.25) 45%,
      rgba(13, 17, 23, 0) 70%);
  }

  .plans-hero__accent {
    width: 220px;
    height: 220px;
  }

  .plans-hero__grid {
    padding-block: var(--space-10) var(--space-9);
  }

  .plans-hero__title {
    font-size: clamp(var(--fs-900), 8vw, 6rem);
  }
}

/* ---------- Navegação entre modalidades ---------- */
/* Âncoras simples (funciona sem JS). Rolagem horizontal no celular em vez
   de quebrar em várias linhas. */

.plans-nav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.plans-nav__track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-3);
  scrollbar-width: thin;
}

.plans-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding-inline: var(--space-4);
  border: 1px solid var(--border-default);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-primary);
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.plans-nav__link:hover,
.plans-nav__link:focus-visible {
  border-color: var(--border-accent);
  color: var(--text-accent);
}

.plans-section__eyebrow {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}

/* Header do site é sticky: a âncora não pode cair embaixo dele. */
.plans-section {
  scroll-margin-top: var(--space-9);
}

.plans-section + .plans-section {
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Cartão de plano ---------- */

.plans-grid {
  align-items: stretch;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.plan-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}

.plan-card--highlight {
  border-color: var(--border-strong);
}

.plan-card--current {
  border-color: var(--border-accent);
}

.plan-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.plan-card__name {
  font-size: var(--fs-400);
}

.plan-card__audience {
  color: var(--text-secondary);
  font-size: var(--fs-200);
}

.plan-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.plan-card__amount {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.plan-card__amount--muted {
  color: var(--text-secondary);
}

.plan-card__period {
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.plan-card__benefits {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-200);
  padding-left: var(--space-4);
  list-style: square;
}

.plan-card__benefits li::marker {
  color: var(--text-accent);
}

.plan-card__excluded {
  color: var(--text-secondary);
}

.plan-card__footer {
  margin-top: auto;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.plan-card__footer .btn--full {
  width: 100%;
}

.plan-card__note,
.plan-card__status {
  font-size: var(--fs-100);
  color: var(--text-secondary);
}

.plan-card__status {
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.plan-card--preview .plan-card__status {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ---------- Regras, listas e avisos ---------- */

.plans-alert,
.plans-preview-note {
  max-width: 70ch;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--border-strong);
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.plans-alert {
  margin-bottom: var(--space-5);
  border-left-color: var(--text-warning);
  color: var(--text-warning);
}

.plans-rules {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .plans-rules {
    grid-template-columns: 1fr 1fr;
  }
}

.plans-rules__block {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.plans-rules__block h3 {
  font-size: var(--fs-300);
  margin-bottom: var(--space-3);
}

.plans-list {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
  list-style: square;
  font-size: var(--fs-200);
  color: var(--text-secondary);
}

.plans-list strong {
  color: var(--text-primary);
}

.plans-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding-inline: var(--space-2);
  border: 1px solid var(--border-accent);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---------- Tabelas de comparação ---------- */
/* No celular a tabela rola dentro do próprio bloco — a página nunca ganha
   rolagem horizontal. */

.plans-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.plans-table-wrap:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

.plans-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--fs-200);
}

.plans-table caption {
  text-align: left;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-200);
}

.plans-table th,
.plans-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.plans-table thead th {
  color: var(--text-accent);
  font-weight: var(--fw-semibold);
}

.plans-table tbody th {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.plans-table td {
  color: var(--text-secondary);
}

/* ---------- Bandas fotográficas (mesma receita de .media-band da Home) ---------- */
/* Full-bleed, divisor narrativo entre seções; sem moldura arredondada nem
   sombra. Altura em vw para manter constante a fração visível da foto. */

.plans-band {
  margin: 0;
  line-height: 0;
  background: var(--raptor-black);
}

.plans-band img {
  display: block;
  width: 100%;
  height: clamp(220px, 36vw, 560px);
  object-fit: cover;
  object-position: center 40%;
}

.plans-band--cut img {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

/* ---------- Split editorial com janela de foto ---------- */
/* Assimétrico (5/7), espelhado entre Instrutor e Classroom para quebrar a
   repetição. A janela usa o mesmo corte angular dos botões — nunca
   border-radius + sombra. */

.plans-split {
  display: grid;
  gap: var(--space-6);
}

.plans-figure {
  margin: 0;
}

.plans-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

.plans-single {
  max-width: 28rem;
}

@media (min-width: 1024px) {
  .plans-split {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: var(--space-8);
  }

  .plans-split--reverse {
    grid-template-columns: 7fr 5fr;
  }

  .plans-split--reverse .plans-figure {
    order: 2;
  }

  .plans-figure img {
    aspect-ratio: 4 / 5;
  }
}

/* Variação tonal de fundo entre seções consecutivas (ritmo, não caixa). */
.plans-section--tone {
  background: var(--surface-overlay);
}

/* ---------- CTA final com fotografia ---------- */

.plans-cta {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
}

.plans-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.plans-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}

.plans-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(13, 17, 23, 0.84);
}

.plans-cta__body {
  position: relative;
  z-index: 2;
  padding-block: var(--space-9);
}

.plans-cta__body h2 {
  font-size: clamp(var(--fs-700), 5vw, var(--fs-800));
}

.plans-cta__body .text-secondary {
  max-width: 52ch;
}

.plans-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .plans-cta__media {
    left: auto;
    width: 55%;
    mask-image: linear-gradient(90deg, transparent 0%, black 40%);
  }

  .plans-cta::after {
    background: linear-gradient(90deg,
      rgba(13, 17, 23, 0.92) 0%,
      rgba(13, 17, 23, 0.7) 50%,
      rgba(13, 17, 23, 0.25) 100%);
  }
}

/* Mobile first: 1 coluna; 2 a partir de 640px; 4 só a partir de 1280px
   (em 1024px os cartões ficariam com ~206px). Sobrepõe .grid--4 de layout.css. */
@media (min-width: 640px) {
  .plans-grid.grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .plans-grid.grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ponto focal alto: preserva cabeças/capacetes da equipe no recorte. */
.plans-band--top img {
  object-position: center 12%;
}

/* ---------- Disponibilidade ---------- */
/* Só o Freemium está disponível agora: ele recebe a borda de acento; os
   demais continuam legíveis (o visitante já conhece o produto), mas com o
   preço em tom secundário e o aviso "Em breve" em destaque de aviso. */
.plan-card--highlight {
  border-color: var(--border-accent);
}

.plan-card--soon .plan-card__amount {
  color: var(--text-secondary);
}

.plan-card--soon .plan-card__status {
  color: var(--text-warning);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--fs-200);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

/* Indicação de rolagem horizontal das tabelas — só onde ela existe. */
.plans-swipe-hint {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .plans-swipe-hint {
    display: none;
  }
}