/* ==========================================================================
   Componentes reutilizáveis
   ========================================================================== */

/* Botões ----------------------------------------------------------------------
   Texto escuro sobre coral/turquesa: contraste AA (branco sobre coral reprova). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:15px; text-decoration:none;
  padding:11px 22px; min-height:44px; border-radius:var(--radius-sm);
  border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn__arrow{transition:transform .15s ease}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}

.btn--primary{
  background:var(--coral);
  color:#fff;
  padding:8px 16px;
  box-shadow:var(--shadow-coral);
}
.btn--primary .btn__arrow{opacity:.8}
.btn--primary:hover,
.btn--primary:focus-visible{
  background:var(--coral-d);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,107,91,.4);
}

.btn--secondary{background:var(--turquoise); color:var(--abyss-d); box-shadow:var(--shadow-turquoise)}
.btn--secondary:hover,
.btn--secondary:focus-visible{transform:translateY(-2px); box-shadow:0 14px 34px rgba(46,196,182,.42)}

.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--ghost:hover,
.btn--ghost:focus-visible{background:rgba(255,255,255,.08)}

.btn--outline{background:transparent; color:var(--abyss); border-color:var(--abyss)}
.btn--outline:hover,
.btn--outline:focus-visible{background:rgba(11,42,74,.06)}

.btn--sm{padding:7px 14px; min-height:36px; font-size:13.5px}
.btn--lg{padding:13px 26px; font-size:17px}
.btn--block{width:100%}

/* Card ------------------------------------------------------------------------*/
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}

/* Badge (pílula de contexto: gate, plano) --------------------------------------*/
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  color:var(--ocean); background:rgba(30,95,142,.08); border:1px solid rgba(30,95,142,.25);
}
.badge--coral{color:var(--coral-d); background:rgba(255,107,91,.1); border-color:rgba(255,107,91,.4)}

/* Accordion (FAQ) ---------------------------------------------------------------*/
.acc details{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.acc summary{
  cursor:pointer; padding:18px 22px; font-weight:600; color:var(--abyss); font-size:15px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.acc summary::-webkit-details-marker{display:none}
.acc__icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--turquoise);
  color:var(--turquoise-d); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:15px; transition:transform .2s ease;
}
.acc details[open] .acc__icon{transform:rotate(45deg)}
.acc details p{padding:0 22px 20px; color:var(--muted); font-size:14px}
.acc details a{color:var(--ocean); font-weight:600}