:root {
  --roxo-950: #1E0B45;
  --roxo-800: #3B1A8C;
  --roxo-700: #4F22B8;
  --roxo-600: #6431D9;
  --roxo-500: #7C4DFF;
  --roxo-200: #D9CCFF;
  --roxo-100: #EEE8FF;
  --roxo-50:  #F7F4FF;
  --texto: #1F1633;
  --texto-suave: #4E4566;
  --borda: #E2D8F0;
  --branco: #FFFFFF;
  --fundo: #D9CBE9;
  --verde: #1F9D55;
  --amarelo: #E3A008;
  --vermelho: #D93848;
  --raio: 16px;
  --sombra: 0 10px 30px rgba(59, 26, 140, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--roxo-950); }
h1 { font-size: clamp(1.5rem, 2.6vw, 2.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .6em; text-wrap: balance; }
h1 .destaque { color: var(--roxo-600); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--roxo-600); }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
.estreito { max-width: 720px; }
.centro { text-align: center; }

/* ===== Topo ===== */
.topo { background: var(--fundo); }
.topo__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo .selo { margin: 0; }
/* "Hire-X Gratuito": no celular fica no topo, à direita do logo; no computador, acima da headline. */
.topo .selo--topo { display: none; }
@media (max-width: 899px) {
  body:has(#tela-inicio:not([hidden])) .topo .selo--topo { display: inline-block; }
  .hero .selo--hero { display: none; }
}
/* O logo é branco: no topo lilás ele é "pintado" de roxo-escuro usando o próprio arquivo como máscara. */
.logo--escuro {
  display: block;
  width: 160px;
  height: 58px;
  background: var(--roxo-950);
  -webkit-mask: url("logo.webp") left center / contain no-repeat;
  mask: url("logo.webp") left center / contain no-repeat;
}

/* ===== Elementos ===== */
.selo {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roxo-700);
  background: var(--branco);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.passo { display: block; font-size: .85rem; font-weight: 500; color: var(--roxo-600); margin-bottom: 8px; }
.lead { font-size: 1.05rem; color: var(--texto-suave); }
.nota { font-size: .82rem; color: var(--texto-suave); text-align: center; margin: 12px 0 0; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--branco);
  background: linear-gradient(135deg, var(--roxo-600), var(--roxo-500));
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(100, 49, 217, 0.28);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(100, 49, 217, 0.34); }
.botao:focus-visible { outline: 3px solid var(--roxo-200); outline-offset: 2px; }
.botao:disabled { opacity: .6; cursor: wait; transform: none; }
.botao--grande { font-size: 1.1rem; padding: 18px 36px; }
.botao--largo { width: 100%; }
.botao--branco { background: var(--branco); color: var(--roxo-700); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
  margin-bottom: 24px;
}
@media (min-width: 768px) { .cartao { padding: 32px; } }

.erro { color: var(--vermelho); font-size: .9rem; margin: 0 0 12px; }

/* ===== Telas ===== */
.tela { padding: 48px 0 72px; }

/* ===== Hero (tela 1) ===== */
.tela--hero { padding: 32px 0 48px; }
.hero { display: grid; gap: 32px; align-items: center; }
.hero__sub { color: var(--texto-suave); max-width: 520px; margin-bottom: 28px; }
.destaque-sub { color: var(--roxo-700); font-weight: 600; }
.hero__selos {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  gap: 20px;
  font-size: .85rem;
  color: var(--texto-suave);
  white-space: nowrap;
}
.hero__selos li::before { content: "✓"; color: var(--roxo-600); font-weight: 700; margin-right: 6px; }
/* Celular: um item embaixo do outro, centralizados embaixo do botão. */
@media (max-width: 899px) {
  .hero__selos {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
  }
}
/* ===== iPad com o perfil do LinkedIn (feito em código: sempre nítido) ===== */
.hero__imagem { container-type: inline-size; width: 100%; margin: 0 auto; }
.ipad {
  /* 1em = 2% da largura do iPad: tudo abaixo escala junto. */
  font-size: calc(100cqw / 56);
  position: relative;
  width: 56em;
  padding: 1.6em;
  background: #0f0e13;
  border-radius: 3.4em;
  box-shadow: 0 2.5em 4.5em rgba(59, 26, 140, 0.28), inset 0 0 0 .12em #3a3842;
  transform: rotate(3deg);
  color: #191919;
  font-family: "Poppins", system-ui, sans-serif;
  line-height: 1.35;
}
.ipad__tela { position: relative; height: 72em; background: #f3f2ef; border-radius: 2em; overflow: hidden; }
.ipad__tela * { margin: 0; }

.li-nav { display: flex; align-items: center; gap: 1.1em; height: 4.6em; padding: 0 1.4em; background: #fff; border-bottom: .1em solid #e0dfdc; }
.li-logo { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .4em; background: #0a66c2; color: #fff; font-weight: 700; font-size: 1.5em; line-height: 1; padding-bottom: .1em; box-sizing: border-box; flex: none; }
.li-busca { flex: none; width: 11em; height: 2.4em; display: flex; align-items: center; padding: 0 1em; border-radius: .4em; background: #edf3f8; color: #666; font-size: .95em; }
.li-nav__itens { margin-left: auto; display: flex; align-items: center; gap: 1.5em; font-size: .72em; color: #666; }
.li-nav__itens b { font-weight: 500; white-space: nowrap; }
.li-eu { width: 2.4em; height: 2.4em; border-radius: 50%; background: linear-gradient(135deg, #7C4DFF, #3B1A8C); }

.li-corpo { display: grid; grid-template-columns: 1fr 15em; gap: 1.1em; padding: 1.2em 1.3em; }
.li-card { background: #fff; border: .1em solid #e0dfdc; border-radius: .8em; padding: 1.1em 1.3em; margin-bottom: .8em; }
.li-card h5 { font-size: 1.25em; font-weight: 600; margin-bottom: .45em; }
.li-card p { font-size: .95em; }

.li-perfil { padding: 0; overflow: hidden; }
.li-banner { height: 6.4em; background: linear-gradient(180deg, #e3eaf2, #c4d2e1); }
.li-banner svg { display: block; width: 100%; height: 100%; fill: #9db2c9; opacity: .8; }
.li-avatar { display: block; position: relative; margin: -4.2em 0 0 1.5em; width: 9em; height: 9em; border-radius: 50%; border: .35em solid #fff; box-sizing: border-box; object-fit: cover; background: #d9cbe9; }
.li-info { padding: .5em 1.5em 1.1em; }
.li-info h4 { font-size: 1.9em; font-weight: 700; line-height: 1.15; }
.li-titulo { font-size: 1.05em !important; margin-top: .25em !important; line-height: 1.35; }
.li-local { font-size: .85em !important; color: #666; margin-top: .5em !important; }
.li-local u { color: #0a66c2; text-decoration: none; font-weight: 600; }
.li-conexoes { font-size: .85em !important; color: #0a66c2; font-weight: 600; margin-top: .1em !important; }
.li-botoes { display: flex; gap: .6em; margin-top: .7em; }
.li-btn { display: inline-block; padding: .45em 1.2em; border-radius: 2em; border: .12em solid #0a66c2; color: #0a66c2; font-weight: 600; font-size: .9em; }
.li-btn--azul { background: #0a66c2; color: #fff; }
.li-btn--cinza { border-color: #666; color: #666; }
.li-btn--p { margin-top: .4em; padding: .2em .9em; font-size: .75em; border-color: #666; color: #444; }

.li-card > p { color: #333; font-size: .9em; }
.sub-vermelho { text-decoration: underline; text-decoration-color: #d93848; text-decoration-thickness: .14em; text-underline-offset: .22em; }

.li-exp { display: flex; gap: .9em; margin-top: .9em; }
.li-exp strong { display: block; font-size: 1.02em; font-weight: 600; }
.li-exp em { display: block; font-style: normal; font-size: .88em; }
.li-exp small { display: block; font-size: .78em; color: #666; }
.li-exp ul { margin: .4em 0 0; padding-left: 1.1em; font-size: .85em; color: #333; }
.li-exp li { margin-bottom: .1em; }
.li-exp--edu { margin-top: .3em; }
.circ { display: inline-block; padding: 0 .35em; margin: 0 -.1em; border: .13em solid #d93848; border-radius: 50%; line-height: 1.2; }

.li-emp { flex: none; display: inline-block; width: 3.4em; height: 3.4em; border-radius: .3em; background: #e8eaee; }
.li-emp--a { background: linear-gradient(135deg, #1b4f9c 0 50%, #2f7ae5 50%); }
.li-emp--b { background: linear-gradient(135deg, #0a66c2, #6db7ff); border-radius: 50%; }
.li-emp--c { background: radial-gradient(circle, #fff 0 22%, #2d5aa0 23% 55%, #e8eaee 56%); border-radius: 50%; }

.li-card--mini { padding: .9em 1em; }
.li-card--mini p { display: flex; align-items: center; gap: .6em; font-size: .78em; font-weight: 600; margin: .35em 0 !important; }
.li-card--mini .li-emp { width: 2.2em; height: 2.2em; }
.li-side .li-card { padding: 1em 1em; }
.li-side h5 { font-size: 1.05em; }
.li-pessoa { display: flex; gap: .7em; margin-top: .9em; }
.li-pessoa strong { display: block; font-size: .85em; font-weight: 600; line-height: 1.2; }
.li-pessoa small { display: block; font-size: .72em; color: #666; line-height: 1.25; }
.av { flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; font-style: normal; font-size: .85em; font-weight: 600; color: #fff; }
.av1 { background: linear-gradient(135deg, #e58a6a, #b24a5a); }
.av2 { background: linear-gradient(135deg, #5b7b9c, #2d3e55); }
.li-skills { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; }
.li-skills span { padding: .3em .85em; border: .12em solid #999; border-radius: 2em; font-size: .78em; font-weight: 500; color: #333; }
.li-lang { font-size: .8em !important; line-height: 1.6; }

/* ----- anotações em vermelho, "à mão" ----- */
.anot { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: .15em; color: #d93848; font-family: "Caveat", "Segoe Print", cursive; font-weight: 600; font-size: 1em; line-height: 1; pointer-events: none; transform: rotate(-3deg); white-space: nowrap; }
.anot span { font-size: 1.55em; line-height: 1; }
.anot .seta { width: 2.4em; height: auto; flex: none; fill: none; stroke: #d93848; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.anot--esq { flex-direction: row-reverse; }
.anot--esq .seta { transform: scaleX(-1); }
.anot--cima .seta { transform: scaleX(-1) scaleY(-1); }
.n-foto { left: 14em; top: 6.4em; }
.n-valor { left: 19.5em; top: 15em; }
.n-resultados { left: 21.5em; top: 23.6em; }
.n-sobre { left: 23.2em; top: 33.4em; }
.n-skills { left: 40em; top: 26.6em; }
.n-ingles { left: 40em; top: 46.4em; }
.n-quantifique { left: 40em; top: 51em; }
.n-destaque { left: 40em; top: 57.2em; }
.n-otimo { left: 40em; top: 64.2em; }
.li-sobre { max-width: 19em; }

/* ----- posição do iPad na página ----- */
@media (max-width: 899px) {
  .tela--hero { padding: 24px 0 48px; overflow-x: clip; }
  .hero { gap: 28px; }
  .hero__texto .botao { width: 100%; }
  .hero__imagem { max-width: 440px; width: 92%; padding: 1.2em 0; }
}
@media (min-width: 900px) {
  .tela--hero { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 24px 0 56px; overflow-x: clip; }
  .hero { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .hero__imagem { width: min(100%, 540px, calc((100vh - 170px) * .76)); margin: 0 0 0 auto; }
}

/* ===== Formulários ===== */
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.campo input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  background: var(--branco);
  color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus { outline: none; border-color: var(--roxo-500); box-shadow: 0 0 0 4px var(--roxo-100); }

.consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--texto-suave); margin: 4px 0 16px; line-height: 1.5; }
.consentimento input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--roxo-600); flex-shrink: 0; }

.captcha { min-height: 0; margin-bottom: 12px; }

.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 16px;
  border: 2px dashed var(--roxo-200);
  border-radius: 14px;
  background: var(--roxo-50);
  color: var(--texto-suave);
  cursor: pointer;
  margin-bottom: 20px;
  transition: border-color .15s ease, background .15s ease;
}
.upload:hover, .upload--ativo { border-color: var(--roxo-500); background: var(--roxo-100); }
.upload--ok { border-style: solid; border-color: var(--roxo-500); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__icone { color: var(--roxo-600); }
.upload strong { color: var(--roxo-700); }

.ajuda {
  background: var(--roxo-50);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 20px 0 24px;
  font-size: .92rem;
}
.ajuda summary { font-weight: 600; color: var(--roxo-700); cursor: pointer; }
.ajuda ol { margin: 10px 0 6px; padding-left: 20px; }
.ajuda__obs { font-size: .82rem; color: var(--texto-suave); margin: 0; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal__fundo { position: absolute; inset: 0; background: rgba(30, 11, 69, 0.55); backdrop-filter: blur(3px); }
.modal__caixa {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--branco);
  border-radius: 20px;
  padding: 32px 24px 24px;
  box-shadow: 0 30px 80px rgba(30, 11, 69, 0.35);
  animation: subir .25s ease;
}
@media (min-width: 768px) { .modal__caixa { padding: 40px 36px 32px; } }
.modal__fechar {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  border: 0; background: transparent;
  font-size: 1.8rem; line-height: 1; color: var(--texto-suave);
  cursor: pointer; border-radius: 50%;
}
.modal__fechar:hover { background: var(--roxo-50); }
.modal h2 { font-size: 1.4rem; margin-bottom: 20px; }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ===== Carregando ===== */
.carregando { text-align: center; padding-top: 32px; }
.spinner {
  width: 56px; height: 56px; margin: 0 auto 24px;
  border-radius: 50%;
  border: 5px solid var(--roxo-100);
  border-top-color: var(--roxo-600);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.etapas { list-style: none; padding: 0; margin: 24px auto; max-width: 420px; text-align: left; }
.etapas li { padding: 10px 0 10px 32px; position: relative; color: var(--texto-suave); opacity: .45; transition: opacity .3s ease; }
.etapas li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--roxo-200);
}
.etapas li.ativa { opacity: 1; color: var(--roxo-950); font-weight: 500; }
.etapas li.feita { opacity: 1; }
.etapas li.feita::before { background: var(--roxo-600); border-color: var(--roxo-600); }

/* ===== Resultado ===== */
#res-abertura { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; margin-bottom: 28px; }

.notas { list-style: none; padding: 0; margin: 0 0 12px; }
.notas li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.notas li:last-child { border-bottom: 0; }
.notas__secao { font-weight: 600; min-width: 130px; }
.notas__resumo { color: var(--texto-suave); font-size: .95rem; }
@media (max-width: 520px) {
  .notas li { flex-wrap: wrap; gap: 2px 10px; }
  .notas__resumo { flex-basis: 100%; padding-left: 22px; }
}

.ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; transform: translateY(1px); }
.ponto--verde { background: var(--verde); }
.ponto--amarelo { background: var(--amarelo); }
.ponto--vermelho { background: var(--vermelho); }
.legenda { font-size: .8rem; color: var(--texto-suave); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.legenda .ponto { width: 10px; height: 10px; margin-left: 8px; }
.legenda .ponto:first-child { margin-left: 0; }

.titulo-secao { margin: 36px 0 16px; font-size: 1.35rem; }

.problemas { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: problema; }
.problemas li {
  counter-increment: problema;
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--roxo-600);
  border-radius: 12px;
  padding: 20px 20px 16px 64px;
  margin-bottom: 14px;
}
.problemas li::before {
  content: counter(problema);
  position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--roxo-100); color: var(--roxo-700);
  font-weight: 700; display: grid; place-items: center;
}
.problemas h4 { margin: 4px 0 10px; font-size: 1.05rem; color: var(--roxo-950); }
.problemas p { margin: 0 0 8px; font-size: .95rem; }
.problemas .rotulo { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.problemas .perde { color: var(--vermelho); }

.cartao--positivo { background: var(--roxo-50); border-color: transparent; box-shadow: none; }
.cartao--positivo ul { margin: 0; padding-left: 20px; }
.cartao--positivo li { margin-bottom: 6px; }

.alerta {
  border-radius: var(--raio);
  padding: 28px 24px;
  background: #FFF6F7;
  border: 1px solid #F6CDD2;
  margin: 32px 0 24px;
}
.alerta h3 { color: #8E1B2A; font-size: 1.25rem; }
.alerta p { margin-bottom: .8em; }
.alerta p:last-child { margin-bottom: 0; }
#res-agravamento { font-weight: 500; }

.premio {
  text-align: center;
  color: var(--branco);
  border-radius: 24px;
  padding: 40px 24px;
  background: linear-gradient(140deg, var(--roxo-800), var(--roxo-600) 60%, var(--roxo-500));
  box-shadow: 0 24px 50px rgba(79, 34, 184, 0.35);
}
@media (min-width: 768px) { .premio { padding: 48px 56px; } }
.premio h3 { color: var(--branco); font-size: clamp(1.5rem, 3vw, 2rem); }
.premio p { color: rgba(255, 255, 255, 0.9); max-width: 520px; margin: 0 auto 24px; }
.premio__selo {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  padding: 6px 16px; border-radius: 999px;
  font-weight: 600; font-size: .9rem; letter-spacing: .03em;
  margin-bottom: 14px;
}
.premio .premio__obs { font-size: .8rem; margin: 14px auto 0; opacity: .8; }
@media (max-width: 520px) { .premio .botao { width: 100%; } }

/* ===== Rodapé ===== */
.rodape { background: var(--roxo-950); color: rgba(255, 255, 255, 0.72); font-size: .75rem; line-height: 1.6; }
.rodape__inner { padding-top: 32px; padding-bottom: 32px; }
.rodape p { margin: 0 0 10px; max-width: 900px; }
.rodape p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}