/* ==========================================================================
   TREINO HYBRIDO — Design System (landing)
   Baseado em typeui-fundamentals:
   - Grid de 4pt para todo espaçamento
   - Escala modular 1.333 (Perfect Fourth) para marketing bold
   - Títulos display com line-height 1 | corpo 1.5
   - Contraste WCAG AA | movimento 100-250ms ease-out | prefers-reduced-motion
   ========================================================================== */

:root{
  /* ---- Cor (marca RINA x Caiçara) ---- */
  --preto:#0A0A0A;
  --preto-2:#121212;
  --preto-3:#1A1A1A;
  --borda:#2A2A2A;
  --amarelo:#F2E600;
  --amarelo-esc:#C9BF00;
  --branco:#FFFFFF;
  --texto:#F0F0F0;      /* AA em fundo preto */
  --texto-2:#B8B8B8;    /* mid-tone: 8.9:1 no preto */
  --verde:#4ADE80;

  /* ---- Espaçamento: grid 4pt ---- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;

  /* ---- Tipografia: base 16px, ratio 1.333 ---- */
  --t--1:14px;     /* apoio (piso) */
  --t-0:16px;      /* corpo */
  --t-1:21px;      /* lead */
  --t-2:28px;      /* h3 */
  --t-3:37px;      /* h2 */
  --t-4:50px;      /* h1 mobile */
  --t-5:67px;      /* h1 desktop */

  --raio:12px;
  --dur:180ms;               /* dentro de 100-250ms */
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Nada de texto, link ou e-mail comprido furar a borda do card */
body.brand{overflow-x:hidden}
p,li,td,th,summary,label,h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}
img,svg{max-width:100%}
body.brand{
  margin:0;background:var(--preto);color:var(--texto);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--t-0);line-height:1.5;-webkit-font-smoothing:antialiased;
}
body.brand h1,body.brand h2,body.brand h3{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1; /* display = 1 */
  margin:0;color:var(--branco);
}
body.brand h1{font-size:var(--t-4)}
body.brand h2{font-size:var(--t-3)}
body.brand h3{font-size:var(--t-2);line-height:1.1}
body.brand p{margin:0}
@media(min-width:900px){ body.brand h1{font-size:var(--t-5)} }

/* medida de leitura: 45-75 caracteres */
.medida{max-width:62ch;margin-inline:auto}

/* ---------- Movimento (com fallback estático) ---------- */
.rev{opacity:0;transform:translateY(16px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__in{animation:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:var(--e5)}
.sec{padding-block:var(--e9)}
@media(max-width:720px){ .sec{padding-block:var(--e7)} }
.sec--alt{background:var(--preto-2)}
.centro{text-align:center}

.kicker{display:block;color:var(--amarelo);font-weight:800;font-size:var(--t--1);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--e3)}
.titulo{margin-bottom:var(--e4)}
.sub{color:var(--texto-2);font-size:var(--t-1);line-height:1.5;margin-bottom:var(--e7)}

/* ---------- Botões (nunca sublinhado) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:52px;padding:var(--e4) var(--e6);border-radius:var(--raio);
  font-weight:800;font-size:var(--t-0);text-decoration:none;text-transform:uppercase;
  letter-spacing:.02em;cursor:pointer;border:2px solid transparent;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn--p{background:var(--amarelo);color:var(--preto);box-shadow:0 8px 28px rgba(242,230,0,.22)}
.btn--p:hover{background:var(--branco);transform:translateY(-2px)}
.btn--g{background:transparent;color:var(--branco);border-color:#4A4A4A}
.btn--g:hover{border-color:var(--amarelo);color:var(--amarelo)}
.btn--lg{min-height:60px;font-size:var(--t-1);padding-inline:var(--e7)}
.btn:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}

/* ---------- Navegação ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:var(--e4);padding:var(--e3) var(--e5);background:rgba(10,10,10,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.nav__logo{font-family:'Anton',sans-serif;font-size:var(--t-1);color:var(--branco);
  text-decoration:none;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.nav__logo span{color:var(--amarelo)}
.nav__links{display:flex;align-items:center;gap:var(--e5)}
.nav__links a{color:var(--texto);text-decoration:none;font-size:var(--t--1);font-weight:600}
.nav__links a:hover{color:var(--amarelo)}
.nav .btn{min-height:44px;padding:var(--e3) var(--e4);font-size:var(--t--1)}

/* Botao hamburguer — so aparece no celular */
.nav__burger{display:none;background:transparent;border:1px solid var(--borda);border-radius:10px;
  width:44px;height:44px;cursor:pointer;color:var(--branco);
  align-items:center;justify-content:center;flex:none}
.nav__burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}
.nav__burger[aria-expanded="true"]{border-color:var(--amarelo);color:var(--amarelo)}

/* CORRECAO: antes, abaixo de 860px todos os links do topo simplesmente sumiam
   e nao havia menu nenhum — quem ja tinha se inscrito nao conseguia achar o
   "Minha conta" pelo celular. Agora vira um menu que abre. */
@media(max-width:860px){
  .nav__burger{display:inline-flex}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(10,10,10,.98);border-bottom:1px solid var(--borda);
    padding:var(--e3) var(--e5) var(--e5);display:none}
  .nav__links.aberto{display:flex}
  .nav__links a{padding:var(--e4) 0;border-bottom:1px solid var(--borda);font-size:var(--t-0)}
  .nav__links .btn{margin-top:var(--e4);border-bottom:0;justify-content:center}
}

/* ---------- HERO (fotos alternando) ---------- */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;
  /* padding de baixo maior: reserva espaco para os pontinhos das fotos
     nao encostarem na nota de preco */
  padding:var(--e9) 0 calc(var(--e9) + var(--e5));overflow:hidden;isolation:isolate}
/* No celular a tela e alta e estreita: com 88vh a foto do grupo fica
   espremida no meio. Menos altura = recorte melhor. */
@media(max-width:720px){ .hero{min-height:74vh;padding:var(--e7) 0 calc(var(--e7) + var(--e5))} }
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* Cada slide e uma foto. A troca e um crossfade de 1.2s — nada de "piscar". */
.hero__slide{position:absolute;inset:0;background:center/cover no-repeat;
  transform:scale(1.06);filter:grayscale(.25) contrast(1.05);
  opacity:0;transition:opacity 1200ms linear;will-change:opacity}
.hero__slide.on{opacity:1}
/* Sem JS ou sem suporte: a primeira foto fica visivel do mesmo jeito */
.hero__slide:first-child{opacity:1}
/* Escurecimento em duas camadas.
   A foto do grupo e tirada de longe: se escurecer a imagem inteira (era 72%),
   ninguem aparece. Entao escurece POUCO no geral e forte so atras do texto —
   assim da pra ver a galera e o texto continua legivel. */
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(56% 44% at 50% 44%,rgba(10,10,10,.68) 0%,rgba(10,10,10,0) 72%),
    linear-gradient(180deg,rgba(10,10,10,.38) 0%,rgba(10,10,10,.56) 55%,var(--preto) 100%)}
.hero__in{text-align:center;max-width:820px;
  text-shadow:0 2px 6px rgba(0,0,0,.85),0 4px 32px rgba(0,0,0,.7)}
/* Pontinhos indicando qual foto esta na tela (e permitindo trocar na mao) */
.hero__dots{position:absolute;bottom:var(--e5);left:50%;transform:translateX(-50%);
  display:flex;gap:var(--e2);z-index:2}
.hero__dots button{width:32px;height:4px;border:0;padding:0;border-radius:99px;
  background:rgba(255,255,255,.28);cursor:pointer;transition:background var(--dur) var(--ease)}
.hero__dots button[aria-current="true"]{background:var(--amarelo)}
.hero__dots button:hover{background:rgba(255,255,255,.6)}
@media(max-width:720px){ .hero__dots{bottom:var(--e4)} .hero__dots button{width:24px} }
@media (prefers-reduced-motion: reduce){
  .hero__slide{transition:none}
  .hero__slide:not(:first-child){opacity:0!important}
  .hero__dots{display:none}
}
.pill{display:inline-flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e4);
  border:1px solid rgba(242,230,0,.45);border-radius:999px;background:rgba(242,230,0,.08);
  color:var(--amarelo);font-size:var(--t--1);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dot{width:8px;height:8px;border-radius:50%;background:var(--verde);
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
/* Respiro entre os elementos do topo (antes ficavam colados uns nos outros) */
.hero h1{margin:var(--e6) 0 var(--e5)}
.hero h1 em{font-style:normal;color:var(--amarelo)}
.hero__sub{color:var(--texto);font-size:var(--t-1);line-height:1.45;
  margin:0 auto var(--e7);max-width:44ch}
.hero__ctas{display:flex;gap:var(--e4);justify-content:center;flex-wrap:wrap}
.hero__nota{margin-top:var(--e5);color:var(--texto-2);font-size:var(--t--1)}
.hero__nota strong{color:var(--branco)}
@media(max-width:560px){
  .hero__ctas{flex-direction:column;gap:var(--e3)}
  .hero__ctas .btn{width:100%}
  .hero h1{margin:var(--e5) 0 var(--e4)}
  .hero__sub{margin-bottom:var(--e6)}
}

/* ---------- Marquee (movimento com pausa no hover) ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--borda);background:var(--preto-2);padding-block:var(--e3)}
.marquee__in{display:flex;gap:var(--e7);width:max-content;animation:slide 28s linear infinite}
.marquee:hover .marquee__in{animation-play-state:paused}
.marquee span{color:var(--texto-2);font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--t--1);white-space:nowrap;display:flex;align-items:center;gap:var(--e3)}
.marquee b{color:var(--amarelo)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Números (contadores) ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borda)}
.num{background:var(--preto);padding:var(--e6) var(--e4);text-align:center}
.num__n{font-family:'Anton',sans-serif;font-size:var(--t-3);color:var(--amarelo);line-height:1;display:block}
.num__l{color:var(--texto-2);font-size:var(--t--1);text-transform:uppercase;letter-spacing:.06em;margin-top:var(--e2);display:block}
@media(max-width:720px){ .nums{grid-template-columns:repeat(2,1fr)} }

/* ---------- Cards / grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e5)}
.card{background:var(--preto-3);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e6);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--amarelo);transform:translateY(-4px)}
.card__ico{font-size:var(--t-2);line-height:1;margin-bottom:var(--e4);display:block}
.card h3{margin-bottom:var(--e3)}
.card p{color:var(--texto-2)}

/* ---------- Etapas ---------- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e6);counter-reset:p}
.passo{position:relative;padding-top:var(--e6)}
.passo::before{counter-increment:p;content:counter(p,decimal-leading-zero);
  font-family:'Anton',sans-serif;font-size:var(--t-3);color:var(--borda);position:absolute;top:0;left:0;line-height:1}
.passo h3{font-size:var(--t-1);margin-bottom:var(--e2)}
.passo p{color:var(--texto-2);font-size:var(--t-0)}

/* ---------- Galeria (com lightbox) ---------- */
.galeria{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e2)}
.galeria .foto{aspect-ratio:1;border:0;padding:0;border-radius:var(--e2);overflow:hidden;
  background:var(--preto-3);cursor:zoom-in;position:relative;
  transition:transform var(--dur) var(--ease)}
.galeria .foto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.4);transition:filter var(--dur) var(--ease)}
.galeria .foto:hover img,.galeria .foto:focus-visible img{filter:none}
.galeria .foto:hover{transform:scale(1.04);z-index:1}
@media(max-width:900px){ .galeria{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .galeria{grid-template-columns:repeat(2,1fr)} }

.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);padding:var(--e5)}
.lightbox.on{display:flex}
.lightbox img{max-width:min(94vw,900px);max-height:86vh;border-radius:var(--raio);object-fit:contain}
.lightbox button{background:rgba(255,255,255,.08);border:1px solid var(--borda);color:var(--branco);
  cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background var(--dur) var(--ease)}
.lightbox button:hover{background:var(--amarelo);color:var(--preto)}
.lightbox__x{position:absolute;top:var(--e5);right:var(--e5);width:44px;height:44px;font-size:26px;line-height:1}
.lightbox__nav{width:52px;height:52px;font-size:30px;line-height:1;flex:none;margin-inline:var(--e3)}
@media(max-width:560px){
  .lightbox__nav{position:absolute;bottom:var(--e5);margin:0}
  .lightbox__nav--ant{left:22%} .lightbox__nav--prox{right:22%}
}

/* ---------- Preço (ancoragem: base + upgrade) ---------- */
.precos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e5);align-items:stretch}
.preco{position:relative;background:var(--preto-3);border:1px solid var(--borda);
  border-radius:var(--raio);padding:var(--e7) var(--e6);display:flex;flex-direction:column}
.preco--destaque{border-color:var(--amarelo);box-shadow:0 0 0 1px var(--amarelo),0 20px 50px rgba(0,0,0,.5)}
.preco__tag{position:absolute;top:calc(var(--e4) * -1);left:50%;transform:translateX(-50%);
  background:var(--amarelo);color:var(--preto);font-size:var(--t--1);font-weight:800;
  padding:var(--e1) var(--e4);border-radius:999px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.preco h3{font-size:var(--t-1);margin-bottom:var(--e2)}
.preco__val{font-family:'Anton',sans-serif;font-size:var(--t-4);color:var(--branco);line-height:1;margin-block:var(--e3)}
.preco__val small{font-family:'Inter',sans-serif;font-size:var(--t--1);color:var(--texto-2);
  font-weight:600;display:block;margin-top:var(--e2);text-transform:none;letter-spacing:0}
.preco ul{list-style:none;margin:var(--e5) 0;padding:0;display:flex;flex-direction:column;gap:var(--e3)}
.preco li{display:flex;gap:var(--e3);align-items:flex-start;color:var(--texto);font-size:var(--t-0)}
.preco li::before{content:"✓";color:var(--amarelo);font-weight:800;flex:none}
.preco .btn{margin-top:auto;width:100%}
.preco__nota{color:var(--texto-2);font-size:var(--t--1);margin-top:var(--e3);text-align:center}

/* ---------- Depoimento ---------- */
.depo{background:var(--preto-3);border-left:4px solid var(--amarelo);border-radius:var(--raio);
  padding:var(--e6);max-width:62ch;margin-inline:auto}
.depo p{font-size:var(--t-1);line-height:1.5;color:var(--branco);margin-bottom:var(--e4)}
.depo footer{color:var(--texto-2);font-size:var(--t--1);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:var(--e3);max-width:760px;margin-inline:auto}
.faq details{background:var(--preto-3);border:1px solid var(--borda);border-radius:var(--raio);
  transition:border-color var(--dur) var(--ease)}
.faq details[open]{border-color:var(--amarelo)}
.faq summary{cursor:pointer;list-style:none;padding:var(--e5);font-weight:700;color:var(--branco);
  display:flex;justify-content:space-between;align-items:center;gap:var(--e4);min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amarelo);font-size:var(--t-2);line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 var(--e5) var(--e5);color:var(--texto-2);line-height:1.6}

/* ---------- CTA final ---------- */
.final{background:
  radial-gradient(80% 120% at 50% 0%,rgba(242,230,0,.10),transparent 60%),var(--preto-2);
  border-top:3px solid var(--amarelo);text-align:center}
.final h2{margin-bottom:var(--e4)}
.final p{color:var(--texto-2);font-size:var(--t-1);margin-bottom:var(--e6)}

/* ---------- Barra fixa mobile (CTA sempre acessível) ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:var(--e4);
  align-items:center;justify-content:space-between;padding:var(--e3) var(--e4);
  background:rgba(10,10,10,.96);border-top:1px solid var(--borda)}
.barra strong{color:var(--branco);font-size:var(--t--1);display:block}
.barra span{color:var(--texto-2);font-size:12px}
.barra .btn{min-height:48px;padding-inline:var(--e5)}
@media(max-width:720px){ .barra{display:flex} body.brand{padding-bottom:76px} }

/* ---------- Rodapé ---------- */
.rodape{background:#050505;border-top:1px solid var(--borda);padding-block:var(--e7);text-align:center}
.rodape p{color:#9A9A9A;font-size:var(--t--1);margin-top:var(--e3)}
.rodape__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e3) var(--e5);margin-top:var(--e5)}
.rodape__links a{color:var(--texto-2);text-decoration:none;font-size:var(--t--1);font-weight:600}
.rodape__links a:hover{color:var(--amarelo)}
.rodape__legal{font-size:12px;line-height:1.7;max-width:70ch;margin-inline:auto}
.rodape__legal a{color:var(--texto-2)}
.rodape__legal a:hover{color:var(--amarelo)}

/* Link "pular para o conteúdo" — só aparece quando navegam por teclado */
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amarelo);color:var(--preto);
  padding:var(--e3) var(--e5);font-weight:800;border-radius:0 0 var(--raio) 0}
.pular:focus{left:0}

/* ==========================================================================
   FORMULÁRIO / PÁGINAS INTERNAS (mesmo design system)
   ========================================================================== */
.pagina{max-width:720px;margin-inline:auto;padding:var(--e7) var(--e5) var(--e9)}
.bloco{background:var(--preto-3);border:1px solid var(--borda);border-radius:var(--raio);padding:var(--e6)}
.bloco h2{font-size:var(--t-2);margin-bottom:var(--e3)}
.bloco > p.mut{color:var(--texto-2);margin-bottom:var(--e5)}
.mut{color:var(--texto-2);font-size:var(--t--1)}

label{display:block;font-size:var(--t--1);font-weight:700;margin:var(--e4) 0 var(--e2);color:var(--texto)}
input,select{width:100%;min-height:48px;padding:var(--e3) var(--e4);
  background:var(--preto-2);border:1px solid #333;border-radius:10px;color:var(--branco);
  font-size:var(--t-0);font-family:inherit;transition:border-color var(--dur) var(--ease)}
input::placeholder{color:#6E6E6E}
input:focus,select:focus{outline:none;border-color:var(--amarelo);box-shadow:0 0 0 3px rgba(242,230,0,.18)}
.linha{display:flex;gap:var(--e4);flex-wrap:wrap}
.linha > div{flex:1;min-width:200px}

.fieldset{border:1px solid var(--borda);border-radius:var(--raio);padding:var(--e5);margin-top:var(--e5)}
.fieldset h3{font-size:var(--t-1);color:var(--amarelo);margin-bottom:var(--e2)}

.opcao{display:flex;align-items:flex-start;gap:var(--e3);margin-top:var(--e5);padding:var(--e4);
  background:var(--preto-2);border:1px solid var(--borda);border-radius:10px;cursor:pointer;
  transition:border-color var(--dur) var(--ease)}
.opcao:hover{border-color:#555}
.opcao:has(input:checked){border-color:var(--amarelo);background:rgba(242,230,0,.06)}
.opcao input{width:22px;height:22px;min-height:0;flex:none;margin-top:2px;accent-color:var(--amarelo)}
.opcao b{color:var(--amarelo)}
.opcao span{font-size:var(--t--1);color:var(--texto-2);display:block;margin-top:var(--e1)}

.resumo{background:var(--preto-2);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e5);margin-top:var(--e6)}
.resumo .lin{display:flex;justify-content:space-between;gap:var(--e4);padding:var(--e2) 0;
  color:var(--texto-2);font-size:var(--t-0)}
.resumo .lin span{color:var(--texto);font-weight:600}
.resumo .total{border-top:1px solid var(--borda);margin-top:var(--e3);padding-top:var(--e4);
  color:var(--branco);font-weight:800;font-size:var(--t-1)}
.resumo .total span{color:var(--amarelo);font-family:'Anton',sans-serif;font-size:var(--t-2)}

/* Bloco de acao secundaria dentro de um card (ex.: "Criar minha senha").
   Antes era uma frase longa com link no meio, que quebrava a linha feio e
   encostava na borda. */
.alt-acao{margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--borda)}
.alt-acao > p:first-child{color:var(--branco);font-weight:700;margin-bottom:var(--e2)}
.alt-acao .mut{display:block;margin-bottom:var(--e4);line-height:1.5}
.alt-acao .btn{width:100%}

/* Erro por campo (antes so existia uma mensagem geral no fim do formulario) */
.erro-campo{color:#FCA5A5;font-size:var(--t--1);margin-top:var(--e2);display:flex;gap:var(--e2);align-items:flex-start}
.erro-campo::before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;
  background:#FCA5A5;color:var(--preto-2);font-weight:800;font-size:11px;
  display:grid;place-items:center;margin-top:2px}
input.invalido,select.invalido{border-color:#F87171;box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.info-evento{color:var(--texto);font-size:var(--t--1);margin-top:var(--e2);text-transform:capitalize}
.aviso-vagas{color:var(--amarelo);font-size:var(--t--1);font-weight:700;margin-top:var(--e2)}

.msg{padding:var(--e4);border-radius:10px;margin-top:var(--e4);font-size:var(--t-0);display:none}
.msg.erro{display:block;background:rgba(248,113,113,.12);color:#FCA5A5;border:1px solid rgba(248,113,113,.3)}
.msg.ok{display:block;background:rgba(74,222,128,.12);color:var(--verde);border:1px solid rgba(74,222,128,.3)}

.tag{display:inline-block;padding:var(--e1) var(--e3);border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase}
.tag.paga{background:rgba(74,222,128,.15);color:var(--verde)}
.tag.pendente{background:rgba(242,230,0,.15);color:var(--amarelo)}
.tag.cancelada{background:rgba(248,113,113,.15);color:#FCA5A5}

table{width:100%;border-collapse:collapse;margin-top:var(--e4)}
th,td{text-align:left;padding:var(--e3);border-bottom:1px solid var(--borda);font-size:var(--t--1)}
th{color:var(--texto-2);text-transform:uppercase;font-size:12px;letter-spacing:.06em}

/* ---------- "Minha conta": cartao de inscricao ----------
   Antes isto era uma tabela de 5 colunas. No celular o cabecalho quebrava no
   meio da palavra ("CATE-GORIA", "VA-LOR") e nao sobrava espaco para dizer se
   a dupla quis camiseta. Cartao empilha sozinho e cabe a informacao toda. */
.insc{background:var(--preto-3);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e5);margin-bottom:var(--e4)}
.insc__topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e4);flex-wrap:wrap;margin-bottom:var(--e5)}
.insc__topo h3{font-size:var(--t-1);line-height:1.15}
.insc__kv{display:grid;grid-template-columns:104px 1fr;gap:var(--e3) var(--e4);font-size:var(--t--1)}
.insc__kv > div:nth-child(odd){color:var(--texto-2);text-transform:uppercase;
  font-size:12px;letter-spacing:.06em;padding-top:2px}
.insc__kv > div:nth-child(even){color:var(--texto);line-height:1.6}
.insc__ok{margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--borda);
  color:var(--verde);font-weight:700;font-size:var(--t--1)}
@media(max-width:520px){
  .insc__kv{grid-template-columns:1fr;gap:var(--e1)}
  .insc__kv > div:nth-child(odd){margin-top:var(--e3)}
}

.qr-area{text-align:center}
.qr-area img{width:240px;height:240px;border-radius:var(--raio);background:#fff;padding:var(--e3)}
.copia{font-size:12px;word-break:break-all;background:var(--preto-2);border:1px solid var(--borda);
  padding:var(--e4);border-radius:10px;margin-top:var(--e3);color:var(--texto-2);text-align:left}
.copia-wrap{margin-top:var(--e4);text-align:left}
.copia-wrap summary{cursor:pointer;color:var(--texto-2);font-size:var(--t--1);
  text-align:center;list-style:none}
.copia-wrap summary::-webkit-details-marker{display:none}
.copia-wrap summary:hover{color:var(--amarelo)}