/* ================================
   selectividad.css (After the Fold)
   ================================ */

/* Performance base (mesma lógica do pce.css) */
.section-after-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}

/* -------------------------------
   Method Section
   ------------------------------- */

.method {
  background: #fff;
  padding: 3rem 1rem;
}

.method .container {
  max-width: 1080px;
  margin: 0 auto;
}

/* Cabeçalho (revela com .visible) */
.method .section-header {
  text-align: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.method .section-header.visible {
  transform: none;
  opacity: 1;
}

/* Títulos/subtítulos (mesma hierarquia do site) */
.method .section-title {
  font-size: 28px;
  font-weight: 800;
  margin: .75rem 0 .5rem;
  color: #0f172a;
}

/* Gradiente emerald→blue como no Hero do TSX */
.method .section-title .highlight-grad {
  background-image: linear-gradient(90deg, #059669, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.method .section-subtitle {
  color: #4b5563; /* gray-600 */
  font-size: 1rem;
  margin: 0 auto;
  max-width: 42rem;
}

/* Grid dos cards (centralizado) */
.method-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  justify-items: center;   /* centra os cards */
  position: relative;      /* base p/ a linha no ::before */
}

/* Não usaremos o elemento auxiliar: linha será via ::before */
.method-connector { display: none !important; }

/* Card */
.method-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 8px 18px rgba(2,6,23,.05);
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform .6s ease,
    opacity .6s ease,
    box-shadow .25s ease,
    border-color .25s ease;
  text-align: center; /* centraliza conteúdos internos */
}
.method-card.visible {
  transform: none;
  opacity: 1;
}
.method-card:hover {
  box-shadow: 0 16px 36px rgba(2,6,23,.08);
  transform: translateY(-2px);
}

/* Badge do passo (01/02/03) */
.method-step {
  position: absolute;
  left: 1rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 10px 24px rgba(2,6,23,.15);
  transform: rotate(3deg);
}

/* Ícone grande */
.method-icon {
  font-size: 2rem;
  margin: 1.25rem 0 .75rem;
  transition: transform .25s ease;
}
.method-card:hover .method-icon {
  transform: scale(1.06);
}

/* Título/descrição do card */
.method-title {
  margin: 0 0 .35rem;
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 800;
}
.method-desc {
  margin: 0;
  color: #4b5563;
  line-height: 1.5;
  font-size: .95rem;
}

/* “Tinta” suave no hover */
.method-hover {
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.method-card:hover .method-hover {
  opacity: .06;
}

/* Variantes de cor (passo e “tinta”) */
.method-card[data-variant="emerald"] .method-step {
  background-image: linear-gradient(90deg, #10B981, #059669);
}
.method-card[data-variant="emerald"] .method-hover {
  background-image: linear-gradient(135deg, #10B981, #059669);
}

.method-card[data-variant="blue"] .method-step {
  background-image: linear-gradient(90deg, #3B82F6, #2563EB);
}
.method-card[data-variant="blue"] .method-hover {
  background-image: linear-gradient(135deg, #3B82F6, #2563EB);
}

.method-card[data-variant="purple"] .method-step {
  background-image: linear-gradient(90deg, #8B5CF6, #EC4899);
}
.method-card[data-variant="purple"] .method-hover {
  background-image: linear-gradient(135deg, #8B5CF6, #EC4899);
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  .method .section-header,
  .method-card {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
  .method-icon { transition: none; }
}

/* Desktop — Method Section */
@media (min-width: 768px) {
  .method {
    padding: 4rem 1.5rem;
  }

  .method .section-title {
    font-size: 40px;
  }

  .method .section-subtitle {
    font-size: 1.1rem;
  }

  .method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    position: relative;     /* base para a linha */
    justify-items: center;  /* centraliza os cards no grid */
  }

  /* Linha conectora — atrás e centrada verticalmente */
  .method-grid::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;  /* espessura da linha */
    background-image: linear-gradient(90deg, #A7F3D0, #BFDBFE, #E9D5FF);
    border-radius: 999px;
    z-index: 0;   /* fica por baixo */
  }

  /* Garante que os cards fiquem acima da linha */
  .method-card {
    position: relative;
    z-index: 1;
    text-align: center;
  }
}

/* -------------------------------
   Method Suite (tabs + media)
   ------------------------------- */

.method-suite {
  /* fundo estilo Subjects Section do TSX */
  background: linear-gradient(to bottom right, #F9FAFB, #EFF6FF);
  padding: 3rem 1rem;
}

.method-suite .container {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 1rem; /* mobile */
}

/* Cabeçalho (revela com .visible) */
.method-suite .section-header {
  text-align: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.method-suite .section-header.visible { transform: none; opacity: 1; }

/* Títulos/subtítulos */
.method-suite .section-title {
  font-size: 28px;
  font-weight: 800;
  margin: .75rem 0 .5rem;
  color: #0f172a;
}
.method-suite .section-title .highlight-grad {
  background-image: linear-gradient(90deg, #059669, #2563EB); /* emerald -> blue */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.method-suite .section-subtitle {
  color: #4b5563; font-size: 1rem; margin: 0 auto; max-width: 42rem; text-align: center;
}

/* ---------------- Tabs ---------------- */
/* Mobile: mostrar todos os tabs, quebrando em linhas (sem rolagem) */
.method-suite .method-tabs {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;           /* quebra em linhas */
  gap: .5rem .5rem;
  justify-content: center;   /* centralizado */
  overflow: visible;         /* sem scroll horizontal */
  padding-bottom: 0;
  padding-inline: 0;
  scroll-snap-type: none;
}

.method-suite .tab {
  appearance: none; border: 1px solid rgba(2,6,23,.08);
  background: #ffffff; color: #0f172a;
  padding: .65rem .9rem; border-radius: 999px;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: normal;       /* permite quebra no rótulo */
  text-align: center;
}
.method-suite .tab:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.06); }
.method-suite .tab.is-active {
  color: #fff; border-color: transparent;
  background-image: linear-gradient(90deg, #10B981, #2563EB); /* emerald -> blue */
  box-shadow: 0 10px 24px rgba(37,99,235,.18);
}
.method-suite .tab:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* ---------------- Panels ---------------- */
.method-suite .method-panels {
  margin-top: 1.25rem;
  max-width: 1080px;
  margin-left: auto; margin-right: auto;
}
.method-suite .panel[hidden] { display: none; }
.method-suite .panel { transform: translateY(10px); opacity: 0; transition: transform .45s ease, opacity .45s ease; }
.method-suite .panel.is-active { transform: none; opacity: 1; }

/* Grid texto + mídia */
.method-suite .panel-grid {
  display: grid; gap: 1.25rem; align-items: center; margin-top: 1.25rem;
}

/* --- Alinhamento no MOBILE ---
   Tudo centralizado, EXCETO listas (à esquerda) */
.method-suite .panel-title,
.method-suite .panel-text,
.method-suite .panel-text p { text-align: center; }

.method-suite .panel-list {
  list-style: none; padding: 0; margin: 0;
  text-align: left;                 /* listas à esquerda no mobile */
}
.method-suite .panel-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0; color: #1f2937;
  justify-content: flex-start;
}
.method-suite .panel-list li::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: #10B981; flex-shrink: 0;
}

/* ---------------- Mídia (sem fundo/borda/sombra) ---------------- */
/* Imagens e iframes com largura 90% e cap em 768px; SEM background/borda/sombra */
.method-suite .panel-media img,
.method-suite .panel-media iframe {
  width: 90%;
  height: auto;
  display: block;
  border-radius: 14px;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  background: transparent;  /* sem fundo */
  border: none;             /* sem borda */
  box-shadow: none;         /* sem sombra */
}

/* Vídeo (aba 1) — mantém 16:9, SEM fundo/borda/sombra */
.method-suite .panel--media-only { padding: 0; }
.method-suite .video-thumb {
  margin-inline: auto;
  position: relative; display: block;
  width: 90%; max-width: 768px;
  aspect-ratio: 16 / 9;        /* evita CLS */
  border-radius: 14px; overflow: hidden;
  background: transparent;     /* sem fundo */
  border: none;                /* sem borda */
  box-shadow: none;            /* sem sombra */
}
.method-suite .video-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.method-suite .play-btn {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border-radius: 50%; background: rgba(255,255,255,.9); color: #0f172a;
  display: grid; place-items: center; font-size: 28px; font-weight: 700;
  border: 2px solid rgba(2,6,23,.08);
  box-shadow: 0 12px 28px rgba(2,6,23,.20);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.method-suite .play-btn:hover { transform: scale(1.05); box-shadow: 0 16px 36px rgba(2,6,23,.24); background: #fff; }

/* ---------------- Desktop ---------------- */
@media (min-width: 768px) {
  .method-suite { padding: 4rem 1.5rem; }
  .method-suite .container { padding-inline: 1.5rem; }

  .method-suite .section-title { font-size: 40px; }
  .method-suite .section-subtitle { font-size: 1.1rem; }

  /* Desktop: tabs podem quebrar em 1–2 linhas centradas */
  .method-suite .method-tabs {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: .5rem .75rem;
  }
  .method-suite .tab { white-space: normal; }

  .method-suite .panel-grid {
    grid-template-columns: 1fr 1fr;  /* texto | mídia */
    gap: 2rem; margin-top: 2rem; align-items: start;
  }

  /* Desktop: todo texto das tabs à ESQUERDA */
  .method-suite .panel-title,
  .method-suite .panel-text,
  .method-suite .panel-text p,
  .method-suite .panel-list { text-align: left; }
  .method-suite .panel-list li { justify-content: flex-start; }
}

/* -------------------------------
   Universities Section
   ------------------------------- */

.universities { background:#fff; padding:3rem 1rem; }
.universities .container { max-width:1080px; margin:0 auto; }

/* Cabeçalho + "risquinho" sob o texto (como no TSX) */
.universities .section-header { text-align:center; transform:translateY(8px); opacity:0; transition:transform .6s ease, opacity .6s ease; }
.universities .section-header.visible { transform:none; opacity:1; }

.universities .section-title { font-size:28px; font-weight:800; margin:.75rem 0 .5rem; color:#0f172a; line-height:1.15; }
.universities .section-title .highlight-grad {
  background-image:linear-gradient(90deg,#059669,#2563EB);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* sublinhado/“grifado” */
.scribble { position:relative; display:inline-block; }
.scribble::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:12px;
  background-image:linear-gradient(90deg,#A7F3D0,#BFDBFE);
  transform:skewX(-12deg); border-radius:8px; opacity:.6; pointer-events:none;
}

.universities .section-subtitle { color:#4b5563; font-size:1rem; margin:2rem auto 0; max-width:42rem; }

/* Grid dos cards (igual ao TSX: 2/3/6 colunas) */
.universities-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1.5rem;
  list-style:none; padding:0;
}

/* Card da universidade */
.uni-card{
  background:#fff; border:1px solid #eef2f7; border-radius:1rem; padding:1rem 1rem 0.9rem;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:180px;
  transform:translateY(12px); opacity:0;
  transition:transform .6s ease, opacity .6s ease, box-shadow .25s ease, border-color .25s ease;
}
.uni-card.visible{ transform:none; opacity:1; }
.uni-card:hover{ box-shadow:0 16px 36px rgba(2,6,23,.08); transform:translateY(-2px); }

/* “Logo” pequeno (quadrado com gradiente e sigla) */
.uni-logo{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center; font-weight:800; color:#fff; font-size:.9rem;
  background-image:linear-gradient(135deg,#10B981,#2563EB);
  box-shadow:0 6px 16px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom:.75rem;
}

/* Nome e região */
.uni-info{ text-align:center; }
.uni-name{ display:block; color:#0f172a; font-weight:700; font-size:.85rem; line-height:1.1; }
.uni-region{ display:block; color:#6b7280; font-size:11px; }

/* Pill da nota (como no TSX) */
.uni-note-pill{
  margin-top:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:700;
  background:#D1FAE5; color:#065F46;
  padding:.35rem .65rem; border-radius:999px;
}
.uni-note-pill .dot{ width:6px; height:6px; border-radius:999px; background:#10B981; display:inline-block; }

/* Stats (4 quadradinhos) */
.uni-stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem; margin-top:1.75rem; list-style:none; padding:0;
}
.uni-stat{
  background:#fff; border:1px solid #eef2f7; border-radius:1.25rem; padding:1rem;
  box-shadow:0 8px 18px rgba(2,6,23,.05); text-align:center;
  transform:translateY(12px); opacity:0; transition:transform .6s ease, opacity .6s ease, box-shadow .25s ease, border-color .25s ease;
}
.uni-stat.visible{ transform:none; opacity:1; }
.uni-stat:hover{ box-shadow:0 16px 36px rgba(2,6,23,.08); transform:translateY(-2px); }
.uni-stat .stat-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(90deg,#E5F7EF,#EBF2FF); margin:0 auto .5rem; font-size:18px;}
.uni-stat .stat-number{ font-size:1.4rem; font-weight:800; color:#0f172a; line-height:1.1; }
.uni-stat .stat-label{ margin-top:.25rem; font-size:.9rem; color:#4b5563; }

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .universities .section-header, .uni-card, .uni-stat{ transition:none; transform:none !important; opacity:1 !important; }
}

/* Desktop */
@media (min-width:768px){
  .universities{ padding:4rem 1.5rem; }
  .universities .section-title{ font-size:40px; }
  .universities-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
  .uni-logo{ width:64px; height:64px; font-size:1rem; }
  .uni-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
}

/* -------------------------------
   Subjects Section (carrossel) — ALINHAMENTO CORRIGIDO
   ------------------------------- */

.subjects {
  /* mesmo fundo suave da "nuestra plataforma" */
  background: linear-gradient(to bottom right, #F9FAFB, #EFF6FF);
  padding: 3rem 1rem;
}
.subjects .container { max-width: 1080px; margin: 0 auto; }

/* Cabeçalho */
.subjects .section-header {
  text-align: center;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.subjects .section-header.visible { transform: none; opacity: 1; }
.subjects .section-title { font-size: 28px; font-weight: 800; margin: .75rem 0 .5rem; color:#0f172a; }
.subjects .section-title .highlight-grad {
  background-image: linear-gradient(90deg, #059669, #2563EB);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subjects .section-subtitle { color:#4b5563; font-size:1rem; margin:0 auto; max-width:42rem; }

/* Carrossel */
.subjects .subjects-carousel { position: relative; overflow: hidden; width: 100%; margin-top: 1.5rem; }
.subjects .subjects-carousel-track { display: flex; transition: transform .3s ease; }

/* 1 por vez no mobile, 3 no desktop — slide com padding lateral */
.subjects .subjects-carousel .slide {
  box-sizing: border-box;
  user-select: none;
  padding: 0 1rem 2rem;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}
@media (min-width:768px){
  .subjects { padding: 4rem 1.5rem; }
  .subjects .section-title { font-size: 40px; }
  .subjects .subjects-carousel .slide { flex: 0 0 33.333%; padding: 0 1.2rem 2.5rem; }
}

/* Botões do carrossel */
.subjects .subjects-carousel .btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:999px; color:#0f172a;
  line-height:0; display:grid; place-items:center; z-index:5;
}
.subjects .subjects-carousel .btn.prev{ left:0; }
.subjects .subjects-carousel .btn.next{ right:0; }

/* Card da matéria — mais alto e um pouco mais estreito */
.subjects .subject-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:20px;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  padding: 1.1rem 1.1rem 1.4rem;
  min-height: 300px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: auto 1fr;   /* col1: ícone | col2: nome */
  grid-auto-rows: auto;
  row-gap: .85rem;
  transform: translateY(12px); opacity: 0;
  transition: transform .6s ease, opacity .6s ease, box-shadow .25s ease;
}
@media (min-width:768px){
  .subjects .subject-card{ min-height: 320px; max-width: 320px; }
}
.subjects .subject-card.visible{ transform:none; opacity:1; }
.subjects .subject-card:hover{ box-shadow:0 16px 36px rgba(2,6,23,.08); transform:translateY(-2px); }

/* Topo: ícone (SEM quadrado) + nome na mesma linha */
.subjects .subject-top{
  grid-column: 1;
  grid-row: 1;
  display:flex; align-items:center; gap:.6rem;
  margin-bottom: 0;
}
.subjects .subject-icon{
  /* sem quadradinho de fundo */
  width:auto; height:auto; border-radius:0;
  background:none; box-shadow:none;
  font-size:1.1rem; line-height:1;
}
/* sem bolinha decorativa */
.subjects .subject-dot{ display:none; }

/* Nome da matéria ao lado do ícone */
.subjects .subject-name{
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-weight:800; font-size:1.15rem; color:#0f172a; margin: 0 0 0 0.5rem;
}

/* Meta (Duración / Nivel)
   — cada linha é uma FAIXA única (label) com o valor alinhado à direita DENTRO da faixa */
.subjects .meta{
  --row-h: 42px;
  --row-gap: .6rem;
  position: relative;                 /* para posicionar os valores por linha */
  grid-column: 1 / -1;
  display:grid;
  grid-template-rows: var(--row-h) var(--row-h);  /* 2 linhas */
  row-gap: var(--row-gap);
}

/* A faixa ocupa 100% da largura */
.subjects .meta .label{
  display:flex; align-items:center;
  height: var(--row-h);
  background:#F8FAFC;
  border:1px solid #EEF2F7;
  border-radius:12px;
  padding:.45rem .75rem;
  color:#6B7280; font-size:.9rem;
  z-index: 1;                         /* fica acima do fundo, abaixo do valor */
}

/* O valor aparece NA MESMA LINHA, dentro da faixa, à direita */
.subjects .meta .value{
  position: absolute;
  right: .75rem;
  height: var(--row-h);
  display:flex; align-items:center;
  background: transparent; border:0;
  font-weight:800; font-size:.95rem; color:#0f172a;
  z-index: 2;                         /* acima da faixa */
}

/* top por linha (sem cruz; valor dentro da respectiva faixa) */
.subjects .meta .value:nth-of-type(1){ top: 0; }
.subjects .meta .value:nth-of-type(2){ top: calc(var(--row-h) + var(--row-gap)); }

/* Badge de nível */
.subjects .badge-nivel{
  display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700;
  background:#FEE2E2; color:#991B1B; /* default (Alta) */
}
.subjects .badge-nivel[data-level="Media"]{ background:#FEF3C7; color:#92400E; }
.subjects .badge-nivel[data-level="Baja"] {
  background: #D1FAE5; /* verde clarinho */
  color: #065F46;      /* verde escuro */
}

/* Tasa de éxito */
.subjects .success{
  grid-column: 1 / -1;
  margin-top:.1rem;
}
.subjects .success .label{
  display:flex; align-items:center; gap:.5rem; color:#6b7280; font-size:.9rem; margin-bottom:.35rem;
}
.subjects .success .pct{ font-weight:800; color:#0f172a; margin-left:auto; font-size:.95rem; }
.subjects .bar{
  width:100%; height:10px; border-radius:999px; background:#E5E7EB; overflow:hidden;
}
.subjects .bar > span{
  display:block; height:100%;
  background-image: linear-gradient(90deg, #8B5CF6, #3B82F6); /* roxo -> azul */
  width:0%;
  transition: width .6s ease;
}

/* Rodapé do card (recursos) */
.subjects .extras{
  grid-column: 1 / -1;
  color:#334155; font-size:.95rem; margin-top:.25rem;
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .subjects .section-header,
  .subjects .subject-card { transition:none; transform:none !important; opacity:1 !important; }
  .subjects .bar > span { transition:none; }
}

/* Support Features - Modern Grid */
.support { background:#fff; padding:3rem 1rem; }
.support .container { max-width:1080px; margin:0 auto; }

/* header */
.support .section-header{
  text-align:center; transform:translateY(8px); opacity:0;
  transition:transform .6s ease, opacity .6s ease;
}
.support .section-header.visible{ transform:none; opacity:1; }
.support .section-title{ font-size:28px; font-weight:800; margin:.75rem 0 .5rem; color:#0f172a; }
.support .section-title .highlight-grad{
  background-image:linear-gradient(90deg,#059669,#2563EB);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.support .section-subtitle{ color:#4b5563; font-size:1rem; margin:0 auto; max-width:42rem; }

/* grid (1 col mobile, 2 col md, 4 col lg) */
.support .support-grid{
  list-style:none; padding:0 1rem; margin-top:1.5rem;
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:640px){ .support .support-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); padding: 0 0; } }
@media (min-width:1024px){
  .support{ padding:4rem 1.5rem; }
  .support .section-title{ font-size:40px; }
  .support .support-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
}

/* card (visual do preview) */
.support .support-card{
  position:relative;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:24px;
  padding:1.25rem 1.25rem 1.4rem;
  box-shadow:0 12px 30px rgba(2,6,23,.06);
  text-align:center;
  transform:translateY(12px); opacity:0;
  transition:transform .6s ease, opacity .6s ease, box-shadow .25s ease, border-color .25s ease;
}
.support .support-card.visible{ transform:none; opacity:1; }
.support .support-card:hover{ box-shadow:0 20px 44px rgba(2,6,23,.08); transform:translateY(-2px); }

/* ícone com quadrado gradiente (cor varia por card) */
.support .feat-icon{
  width:64px; height:64px; border-radius:18px;
  display:grid; place-items:center; margin:0 auto .9rem;
  color:#fff; font-size:26px; font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(0,0,0,.08);
}

/* variações de cor por card (iguais ao TSX) */
.support .support-card[data-theme="blue"]    .feat-icon{ background-image:linear-gradient(135deg,#3B82F6,#8B5CF6); }
.support .support-card[data-theme="emerald"] .feat-icon{ background-image:linear-gradient(135deg,#10B981,#0D9488); }
.support .support-card[data-theme="amber"]   .feat-icon{ background-image:linear-gradient(135deg,#F59E0B,#EA580C); }
.support .support-card[data-theme="pink"]    .feat-icon{ background-image:linear-gradient(135deg,#EF4444,#EC4899); }

/* texto */
.support .feat-title{ font-weight:800; color:#0f172a; font-size:1.05rem; margin:0 0 .35rem; }
.support .feat-desc{ color:#334155; font-size:.95rem; line-height:1.5; margin:0; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .support .section-header, .support .support-card{
    transition:none; transform:none !important; opacity:1 !important;
  }
}

/* ===========================
   FAQ (mesmo fundo das asignaturas) — REFINADO
   =========================== */
.faq{
  background: linear-gradient(to bottom right, #F9FAFB, #EFF6FF);
  padding: 3rem 1rem;
}
.faq .container{ max-width:1080px; margin:0 auto; }

/* Header */
.faq .section-header{
  text-align:center; transform:translateY(8px); opacity:0;
  transition:transform .6s ease, opacity .6s ease;
}
.faq .section-header.visible{ transform:none; opacity:1; }

/* Título mais imponente (alinha com as demais seções) */
.faq .section-title{
  font-size:32px; line-height:1.15; letter-spacing:-0.01em;
  font-weight:800; margin:.75rem 0 .5rem; color:#0f172a;
}
@media (min-width:1024px){
  .faq .section-title{ font-size:44px; }
}
.faq .section-title .highlight-grad{
  background-image:linear-gradient(90deg,#059669,#2563EB);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.faq .section-subtitle{
  color:#4b5563; font-size:1rem; margin:0 auto; max-width:42rem;
}

/* Lista / Itens */
.faq .faq-list{ display:grid; gap:1rem; margin-top:1.75rem; padding: 0 1.5rem;}

.faq .faq-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding:.25rem .25rem; /* o padding real fica no summary/conteúdo */
  transform:translateY(8px); opacity:0;
  transition:transform .35s ease, opacity .35s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.faq .faq-item.visible{ transform:none; opacity:1; }
.faq .faq-item[open]{
  border-color:#c7d2fe; box-shadow:0 10px 24px rgba(2,6,23,.06);
  background: #ffffff;
}

/* Summary (linha clicável) */
.faq summary{ list-style:none; }
.faq .faq-summary{
  cursor:pointer;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.75rem; padding:1rem 1.25rem; border-radius:12px;
  transition: background .2s ease;
}
.faq .faq-summary::-webkit-details-marker{ display:none; }
.faq .faq-summary:hover{ background:#F8FAFC; }
.faq .faq-summary:focus{ outline:none; }
.faq .faq-summary:focus-visible{
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

/* Pergunta — sem “tudo em negrito” */
.faq .faq-q{
  font-weight:700; /* semibold, mais leve que 800 */
  color:#0f172a; font-size:1.25rem; line-height:1.35;
}

/* Ícone: chevron que gira (direita → baixo) */
.faq .faq-icon{
  width:14px; height:14px; margin-left:.25rem;
  border-right:2px solid #2563EB; border-bottom:2px solid #2563EB;
  transform: rotate(-45deg); transition: transform .25s ease, border-color .25s ease;
}
.faq .faq-summary:hover .faq-icon{ border-color:#1D4ED8; }
.faq .faq-item[open] .faq-icon{ transform: rotate(45deg); }

/* Conteúdo */
.faq .faq-a{
  padding:0 1.25rem 1rem 1.25rem;
  color:#334155; font-size:.96rem; line-height:1.6;
  border-top:1px dashed #e5e7eb; margin-top:.5rem;
}
.faq .faq-a p{ margin:.35rem 0; }
.faq .faq-a ol{ margin:.4rem 0 .6rem 1.1rem; }
.faq .faq-a strong{ font-weight:700; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .faq .section-header, .faq .faq-item{
    transition:none; transform:none !important; opacity:1 !important;
  }
}


/* ===========================
   Footer (idêntico ao original, só estilo) 
   =========================== */
.footer{
  background:#fff;
  padding:3rem 1rem 10rem; /* espaço grande p/ futuro fixed CTA */
  border-top:1px solid #e5e7eb;
}
@media (min-width:1024px){
  .footer{ padding:4rem 1.5rem 11rem; }
}
.footer .container{ max-width:1080px; margin:0 auto; }

.footer .footer-grid{
  display:grid; gap:1rem; grid-template-columns:1fr; align-items:center; justify-items:center;
}
@media (min-width:768px){
  .footer .footer-grid{ grid-template-columns:auto 1fr; justify-items:stretch; }
}

/* Logo */
.footer .footer-brand{ display:inline-block; }
.footer .footer-brand img{ display:block; height:auto; }

/* Legal */
.footer .footer-col{ text-align:center; }
@media (min-width:768px){
  .footer .footer-col{ text-align:right; }
}
.footer .footer-links{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; justify-content:center;
}
@media (min-width:768px){
  .footer .footer-links{ justify-content:flex-end; }
}
.footer .footer-links a{
  color:#334155; text-decoration:none; font-size:.95rem;
}
.footer .footer-links a:hover{
  color:#2563EB; text-decoration:underline;
}

/* Bottom */
.footer .footer-bottom{
  margin-top:1.25rem; border-top:1px solid #e5e7eb; padding-top:1rem;
}
.footer .footer-copy{
  margin:0; color:#64748b; font-size:.9rem; text-align:center;
}

/* ===========================
   Fixed CTA – cores alinhadas (emerald → blue)
   =========================== */

.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transform: translateY(110%);        /* fora da tela */
  opacity: 0;
  pointer-events: none;                /* não intercepta cliques quando oculto */
  transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .2s linear;
}

/* Estado visível: slide-in */
.fixed-cta.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.fixed-cta-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* borda suave e “frosted white” para combinar com a página */
  border: 1px solid #e5e7eb;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* linha de acento com gradiente emerald→blue no topo */
  position: relative;
  overflow: hidden;
}
.fixed-cta-box::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background-image: linear-gradient(90deg, #10B981, #2563EB);
}

/* espaçamentos responsivos + safe area */
.fixed-cta-box {
  margin: 0 auto;
  width: 97%;
  padding: 1rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}

.fixed-cta-title {
  text-align: center;
  color: #0f172a;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
}

/* Botão primário com o mesmo gradiente do site */
.fixed-cta button {
  width: 100%;
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-inline: auto;
  border-radius: 12px;
  font-weight: 800;
  border: none;
  color: #fff;

  background-image: linear-gradient(90deg, #059669, #2563EB);
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fixed-cta button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(37,99,235,.28);
}
.fixed-cta button:active { transform: translateY(0); }
.fixed-cta button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.28), 0 10px 24px rgba(37,99,235,.22);
}

.fixed-cta button img {
  width: 18px;
  height: auto;
}

@media (min-width:768px){
  .fixed-cta-box {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 95%;
    max-width: fit-content;
    padding: 1.25rem 6rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .fixed-cta-title { font-size: 18px; }

  .fixed-cta button {
    width: auto;
    margin: 0;
    padding-inline: 3rem;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .fixed-cta { transition: none; }
  .fixed-cta button { transition: none; }
}