/* Página pública de agendamento com a identidade do clube.
   Copiada do Sistema (src/components/crm/CaptacaoVitrine.css, formulários de captação do CRM):
   topo com palavra ao fundo, título que sobe, faixa inclinada, cartões que inclinam, botões
   magnéticos. As cores, fontes e imagens de cada clube chegam como variáveis em :root
   (utils/marcas.py). Medidas por container: a mesma página serve celular, tablet e desktop.
   Sem atributos style inline (a CSP só libera <style> com nonce): o que varia vira classe. */
html, body { margin: 0; padding: 0; }
body { background: var(--cv-profunda); }
.cv [hidden] { display: none !important; }

.cv {
  --cv-rolagem: 0;
  --cv-raio: 18px;
  --cv-ok: #1f9d5b;
  --cv-erro: #c62828;
  container-type: inline-size;
  position: relative;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--cv-profunda);
  color: var(--cv-tinta);
  font-family: var(--cv-fonte-texto);
  font-size: 15px;
  line-height: 1.6;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
.cv *, .cv *::before, .cv *::after { box-sizing: border-box; }
.cv img { display: block; max-width: 100%; }
.cv a { color: inherit; }
.cv svg { display: block; flex: none; }
.cv :focus-visible { outline: 3px solid var(--cv-destaque); outline-offset: 3px; border-radius: 8px; }
.cv .cv-painel :focus-visible { outline-color: var(--cv-foco); }
.cv .cv-trilho {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Cursor próprio, só com mouse e sem movimento reduzido (o script liga a classe). */
.cv .cv-cursor, .cv .cv-cursor-ponto { display: none; position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; transform: translate3d(-100px, -100px, 0); }
.cv.cv-com-cursor .cv-cursor, .cv.cv-com-cursor .cv-cursor-ponto { display: block; }
.cv .cv-cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 2px solid var(--cv-destaque); transition: width .25s, height .25s, margin .25s, background .25s; }
.cv .cv-cursor.cv-ativo { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--cv-destaque) 18%, transparent); border-color: #fff; }
.cv .cv-cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; }

/* Topo fixo com vidro e progresso da página. */
.cv .cv-topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cv-profunda) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--cv-tinta) 12%, transparent);
  padding-top: env(safe-area-inset-top, 0px);
}
.cv .cv-topo-interno { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.cv .cv-topo-marca-area { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cv .cv-topo-logo { height: 50px; width: auto; object-fit: contain; flex: none; }
.cv .cv-topo-marca { font: 900 18px/1 var(--cv-fonte-titulo); text-transform: uppercase; letter-spacing: .02em; }
.cv .cv-topo-acao {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 18px; border-radius: 99px; background: var(--cv-destaque); color: var(--cv-tinta-destaque) !important;
  font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--cv-destaque) 80%, transparent);
  transition: transform .25s, box-shadow .25s;
}
.cv .cv-topo-acao:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px var(--cv-destaque); }
.cv .cv-topo-acao svg { width: 16px; height: 16px; }
.cv .cv-topo-progresso { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; transform-origin: left; transform: scaleX(var(--cv-rolagem)); background: linear-gradient(90deg, var(--cv-base), var(--cv-destaque)); }

/* Topo da página (apresentação). */
.cv .cv-hero {
  --px: 0; --py: 0;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--cv-base);
  padding-bottom: 96px;
}
.cv .cv-hero-fundo { position: absolute; inset: 0; z-index: -2; background: var(--cv-fundo, none) center / cover, radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--cv-base) 70%, #fff 10%), transparent 60%), var(--cv-base); }
.cv .cv-hero-fundo::after { content: ""; position: absolute; inset: 0; background: var(--cv-linhas, none) center / cover; mix-blend-mode: screen; opacity: .55; }
.cv .cv-hero::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 90px; background: var(--cv-profunda); clip-path: polygon(0 100%, 100% 30%, 100% 100%); z-index: 1; }
.cv .cv-fantasma {
  position: absolute; left: -2vw; top: 18px; z-index: -1; pointer-events: none; white-space: nowrap;
  font: 900 italic clamp(110px, 21cqi, 300px)/.86 var(--cv-fonte-titulo); text-transform: uppercase;
  transform: translateX(calc(var(--px) * -60px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.cv .cv-fantasma span { display: block; color: color-mix(in srgb, var(--cv-tinta) 6%, transparent); }
.cv .cv-fantasma span + span { margin-left: 14cqi; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cv-destaque) 14%, transparent); }
.cv .cv-hero-grade { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; padding-block: 64px 40px; }
.cv.cv-sem-fotos .cv-hero-grade { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.cv .cv-hero-texto { min-width: 0; }
.cv .cv-selo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 14px; border-radius: 4px; background: var(--cv-preto); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transform: skewX(-8deg);
}
.cv .cv-selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--cv-destaque); animation: cv-ping 1.8s infinite; flex: none; }
@keyframes cv-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cv-destaque) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.cv .cv-titulo {
  margin: 22px 0 18px; color: var(--cv-tinta);
  font: 900 clamp(38px, 5.4cqi, 74px)/.98 var(--cv-fonte-titulo); font-style: var(--cv-titulo-estilo); letter-spacing: -.02em; text-transform: uppercase;
  text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 4px 0 rgb(0 0 0 / .14);
}
.cv .cv-palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .12em .12em; margin: -.06em -.12em -.12em; }
.cv .cv-palavra > span { display: inline-block; animation: cv-sobe .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cv-sobe { from { transform: translateY(112%) skewY(6deg); } }
/* Palavras do título entram uma depois da outra (45 ms cada). */
.cv .cv-d1 > span { animation-delay: 45ms; }  .cv .cv-d2 > span { animation-delay: 90ms; }
.cv .cv-d3 > span { animation-delay: 135ms; } .cv .cv-d4 > span { animation-delay: 180ms; }
.cv .cv-d5 > span { animation-delay: 225ms; } .cv .cv-d6 > span { animation-delay: 270ms; }
.cv .cv-d7 > span { animation-delay: 315ms; } .cv .cv-d8 > span { animation-delay: 360ms; }
.cv .cv-d9 > span { animation-delay: 405ms; } .cv .cv-d10 > span { animation-delay: 450ms; }
.cv .cv-d11 > span { animation-delay: 495ms; } .cv .cv-d12 > span { animation-delay: 540ms; }
.cv .cv-d13 > span { animation-delay: 585ms; } .cv .cv-d14 > span { animation-delay: 630ms; }
.cv .cv-destaque {
  color: var(--cv-destaque);
  font-family: var(--cv-fonte-destaque); font-style: var(--cv-destaque-estilo); font-weight: var(--cv-destaque-peso);
  text-transform: var(--cv-destaque-caixa); letter-spacing: -.01em; font-size: calc(var(--cv-destaque-escala) * 1em);
}
.cv .cv-descricao { margin: 0; max-width: 54ch; font-size: 17px; line-height: 1.7; color: color-mix(in srgb, var(--cv-tinta) 88%, transparent); }
.cv .cv-botao {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 15px 24px; border-radius: 99px; text-decoration: none;
  font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s, box-shadow .25s, background .25s, translate .25s;
}
.cv .cv-botao svg { width: 18px; height: 18px; transition: transform .25s; }
.cv .cv-botao:hover svg { transform: translateY(3px); }
.cv .cv-botao-hero { background: var(--cv-preto); color: #fff !important; box-shadow: 0 14px 34px -14px rgb(0 0 0 / .7); }
.cv .cv-botao-hero:hover { box-shadow: 0 18px 40px -12px rgb(0 0 0 / .8); }

/* Palco: fotos em camadas que acompanham o ponteiro. O logo nunca inclina (manual de marca) e é sempre
   o logo com o nome escrito: escudo sozinho não pode. */
.cv .cv-palco { position: relative; height: 560px; perspective: 1200px; }
.cv .cv-quadro {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: absolute; margin: 0; overflow: hidden; background: #000; border-radius: 14px;
  box-shadow: 0 30px 60px -22px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .1);
  transform: translate3d(calc(var(--px) * var(--d, 20px)), calc(var(--py) * var(--d, 20px)), 0) rotate(var(--r, 0deg)) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.cv .cv-quadro::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .22), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; }
.cv .cv-quadro:hover::after { opacity: 1; }
.cv .cv-quadro img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* Fotos da Lazio são retratos com a cabeça rente ao topo: o recorte da moldura parte de cima. */
.cv.cv-lazio .cv-quadro img { object-position: 50% 0%; }
.cv .cv-quadro:hover img { transform: scale(1.05); }
.cv .cv-quadro-1 { --d: 26px; --r: -3deg; left: 18%; top: 4%; width: 52%; aspect-ratio: 3 / 4; z-index: 3; }
.cv .cv-quadro-2 { --d: 44px; --r: 5deg; right: -2%; top: 22%; width: 36%; aspect-ratio: 3 / 4; z-index: 2; }
.cv .cv-quadro-3 { --d: 60px; --r: -6deg; left: -4%; bottom: 0; width: 40%; aspect-ratio: 1; z-index: 4; }
.cv.cv-arcos .cv-quadro { border-radius: 999px 999px 14px 14px; border: 4px solid var(--cv-destaque); }
.cv .cv-palco-logo { position: absolute; z-index: 5; right: 8%; bottom: 2%; width: 230px; height: auto; transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 14px), 0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
/* Real Madrid: moldura dourada fina com um canto arredondado, como nos posts do Pack Inicial, atrás das fotos. */
/* A moldura dourada fecha abaixo do logo com o nome (que fica no canto inferior direito do palco). */
.cv.cv-realmadrid .cv-palco::before { content: ""; position: absolute; z-index: 1; inset: -3% 4% -5% 12%; border: 3px solid var(--cv-destaque); border-radius: 0 180px 0 0; pointer-events: none; }
/* Logo de clube sem manual que só funciona no fundo do cadastro: vai numa cápsula dessa cor. */
.cv .cv-capsula { background: var(--cv-capsula, #fff); padding: 6px 12px; border-radius: 12px; box-sizing: content-box; }

/* Faixa inclinada que corre. */
.cv .cv-faixa { position: relative; z-index: 3; margin-top: -54px; padding-block: 8px 30px; overflow: hidden; }
.cv .cv-faixa-banda { transform: rotate(-2deg); background: var(--cv-preto); border-block: 2px solid var(--cv-destaque); padding: 12px 0; margin-inline: -24px; }
.cv .cv-faixa-trilho { display: flex; width: max-content; animation: cv-faixa 38s linear infinite; }
.cv .cv-faixa:hover .cv-faixa-trilho { animation-play-state: paused; }
.cv .cv-faixa-grupo { display: flex; }
.cv .cv-faixa-item { display: inline-flex; align-items: center; gap: 22px; padding-right: 28px; color: #fff; font: 900 italic 26px/1 var(--cv-fonte-titulo); text-transform: uppercase; white-space: nowrap; }
.cv .cv-faixa-item:nth-child(odd) b { color: var(--cv-destaque); }
/* Logos não giram (manuais de marca): o logo da faixa desfaz a inclinação dela. */
.cv .cv-faixa-item img { height: 46px; width: auto; rotate: 2deg; }
/* Lazio: o manual pede no mínimo 140 px de largura para o logo horizontal em tela. */
.cv.cv-lazio .cv-topo-logo { height: 64px; }
.cv.cv-lazio .cv-faixa-item img { height: 62px; }
.cv .cv-faixa-item i { width: 12px; height: 12px; background: var(--cv-destaque); transform: rotate(45deg); }
@keyframes cv-faixa { to { transform: translateX(-50%); } }

/* Cadastro. */
.cv .cv-cadastro { position: relative; padding-block: 40px 96px; scroll-margin-top: 80px; }
.cv .cv-cadastro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 0% 20%, color-mix(in srgb, var(--cv-base) 45%, transparent), transparent 70%); pointer-events: none; }
.cv .cv-cadastro-grade { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }

.cv .cv-ficha {
  --rx: 0deg; --ry: 0deg;
  position: sticky; top: 104px; display: grid; gap: 14px; overflow: hidden; padding: 26px 24px;
  border-radius: var(--cv-raio); color: #fff;
  background: var(--cv-fundo, none) center / cover, linear-gradient(150deg, var(--cv-base), var(--cv-profunda));
  box-shadow: 0 40px 80px -40px #000, inset 0 0 0 1px rgb(255 255 255 / .08);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s ease-out;
}
.cv .cv-ficha::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--cv-destaque), color-mix(in srgb, var(--cv-destaque) 40%, transparent)); }
.cv .cv-ficha-carimbo { justify-self: start; padding: 5px 10px; border-radius: 4px; background: var(--cv-preto); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cv .cv-ficha-nome { font: 900 italic 28px/1.05 var(--cv-fonte-titulo); text-transform: uppercase; overflow-wrap: anywhere; min-height: 1.05em; }
.cv .cv-ficha-linha { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.cv .cv-ficha-unidade { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.cv .cv-vazio { opacity: .5; }
.cv .cv-ficha-palavra { position: absolute; right: -10px; bottom: -26px; font: 900 italic 110px/1 var(--cv-fonte-titulo); text-transform: uppercase; color: rgb(255 255 255 / .07); pointer-events: none; }
.cv .cv-medidor { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cv .cv-medidor b { font: 900 italic 30px/1 var(--cv-fonte-titulo); color: var(--cv-destaque); font-variant-numeric: tabular-nums; }
.cv .cv-medidor i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px; overflow: hidden; background: rgb(255 255 255 / .16); }
.cv .cv-medidor em { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cv-destaque), #fff); border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1); }

.cv .cv-painel {
  min-width: 0; overflow: hidden; border-radius: 22px;
  background: var(--cv-papel); color: var(--cv-texto);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .06);
}
.cv .cv-form { padding: clamp(24px, 4cqi, 44px); }
.cv .cv-form-cabeca { margin-bottom: 26px; }
.cv .cv-form-cabeca h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; color: var(--cv-texto); font: 900 italic clamp(24px, 2.6cqi, 32px)/1.05 var(--cv-fonte-titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.cv .cv-form-cabeca h2::before { content: ""; flex: none; width: 26px; height: 5px; background: var(--cv-base); transform: skewX(-20deg); }
.cv .cv-form-cabeca > p { margin: 0; color: color-mix(in srgb, var(--cv-texto) 62%, transparent); font-size: 13px; }
.cv .cv-medidor-form { display: none; }
.cv .cv-campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 18px; }
.cv .cv-s3 { grid-column: span 3; }
.cv .cv-campo { min-width: 0; display: flex; flex-direction: column; gap: 8px; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s; }
.cv .cv-largo { grid-column: 1 / -1 !important; }
.cv .cv-espera { transform: translateY(26px); opacity: 0; }
.cv .cv-campo > label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; padding: 0;
  color: var(--cv-texto); font-size: 13px; font-weight: 700; line-height: 1.45; letter-spacing: .01em; overflow-wrap: anywhere;
}
.cv .cv-asterisco { color: var(--cv-base); }
.cv .cv-conferido { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; background: var(--cv-ok); color: #fff; align-self: center; transform: scale(0) rotate(-30deg); transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.cv .cv-conferido svg { width: 12px; height: 12px; stroke-width: 3.2; }
.cv .cv-ok .cv-conferido { transform: scale(1) rotate(0); }
.cv .cv-campo input:not([type='radio']):not([type='checkbox']), .cv .cv-campo select {
  width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; margin: 0;
  border: 1.5px solid var(--cv-linha); border-radius: 12px; background: color-mix(in srgb, var(--cv-linha) 22%, #fff);
  color: var(--cv-texto); font: 500 16px/1.4 var(--cv-fonte-texto);
  transition: border-color .2s, box-shadow .2s, background .2s, opacity .2s;
}
.cv .cv-campo input:hover, .cv .cv-campo select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--cv-base) 45%, var(--cv-linha)); }
.cv .cv-campo input:focus, .cv .cv-campo select:focus { outline: none; border-color: var(--cv-base); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-base) 18%, transparent); }
.cv .cv-campo select:disabled { opacity: .6; cursor: not-allowed; }
.cv .cv-ok input:not([type='radio']):not([type='checkbox']), .cv .cv-ok select { border-color: color-mix(in srgb, var(--cv-ok) 55%, var(--cv-linha)); }
.cv .cv-select { position: relative; display: block; }
.cv .cv-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--cv-base); border-bottom: 2px solid var(--cv-base); transform: rotate(45deg); pointer-events: none; }
.cv .cv-select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.cv .cv-campo [aria-invalid='true'] { border-color: var(--cv-erro) !important; }
.cv .cv-erro-texto { margin: 0; color: var(--cv-erro); font-size: 12.5px; font-weight: 600; }
.cv .cv-ajuda { margin: 0; color: color-mix(in srgb, var(--cv-texto) 62%, transparent); font-size: 12.5px; }

/* "Não achou uma unidade perto de você?": abaixo de Unidade, abre o pedido de unidade. */
.cv .cv-sem-unidade {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--cv-base) 45%, var(--cv-linha));
  background: color-mix(in srgb, var(--cv-base) 4%, #fff);
}
.cv .cv-sem-unidade-icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cv-base); color: var(--cv-tinta); }
.cv .cv-sem-unidade-icone svg { width: 20px; height: 20px; }
.cv .cv-sem-unidade-texto { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--cv-texto) 75%, transparent); }
.cv .cv-sem-unidade-texto strong { display: block; color: var(--cv-texto); font-size: 14px; font-weight: 800; }
.cv .cv-botao-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 99px;
  border: 1.5px solid var(--cv-base); background: #fff; color: var(--cv-base); cursor: pointer; white-space: nowrap;
  font: 800 12.5px/1.2 var(--cv-fonte-texto); letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.cv .cv-botao-contorno:hover { background: var(--cv-base); color: var(--cv-tinta); }
.cv .cv-botao-contorno:focus-visible { outline: 3px solid var(--cv-foco); outline-offset: 2px; }
.cv .cv-botao-contorno svg { width: 16px; height: 16px; }
.cv .cv-voltar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--cv-base); font: 700 13px/1.2 var(--cv-fonte-texto); cursor: pointer; }
.cv .cv-voltar:hover { text-decoration: underline; text-underline-offset: 3px; }
.cv .cv-voltar svg { width: 16px; height: 16px; }
.cv .cv-form-cabeca h2:focus { outline: none; }

/* Autorização LGPD. Agendamento: o texto do aviso fica acima da caixa de aceite. Pedido de unidade
   (cv-aviso-curto): o aviso curto inteiro é o rótulo da caixa, como na captação do CRM. */
.cv .cv-aceites { display: grid; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cv-linha); }
.cv .cv-lgpd-texto { color: color-mix(in srgb, var(--cv-texto) 78%, transparent); font-size: 12.5px; line-height: 1.65; }
.cv .cv-lgpd-texto p { margin: 0 0 6px; }
.cv .cv-lgpd-texto p:last-child { margin-bottom: 0; }
.cv .cv-aceites a { color: var(--cv-base); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cv .cv-aceites > label { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--cv-linha); cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.6; color: color-mix(in srgb, var(--cv-texto) 86%, transparent); transition: border-color .3s, background .3s; }
.cv .cv-aviso-curto > label { font-size: 12.5px; font-weight: 400; line-height: 1.7; color: color-mix(in srgb, var(--cv-texto) 80%, transparent); }
.cv .cv-aceites > label:hover { border-color: color-mix(in srgb, var(--cv-base) 45%, var(--cv-linha)); }
.cv .cv-aceites > label.cv-marcado { border-color: var(--cv-base); background: color-mix(in srgb, var(--cv-base) 5%, #fff); }
.cv .cv-aceites input { position: absolute; z-index: 1; width: 26px; height: 26px; left: 16px; top: 14px; margin: 0; opacity: 0; cursor: pointer; }
.cv .cv-caixa { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--cv-texto) 30%, transparent); background: #fff; transition: all .3s; }
.cv .cv-caixa svg { width: 16px; height: 16px; stroke-width: 3; color: var(--cv-tinta); opacity: 0; transform: scale(.4) rotate(-20deg); transition: all .35s cubic-bezier(.2, 1.6, .4, 1); }
.cv .cv-marcado .cv-caixa { background: var(--cv-base); border-color: var(--cv-base); }
.cv .cv-marcado .cv-caixa svg { opacity: 1; transform: none; }
.cv .cv-aceites input:focus-visible + .cv-caixa { outline: 3px solid var(--cv-foco); outline-offset: 2px; }
.cv .cv-aceites input[aria-invalid='true'] + .cv-caixa { border-color: var(--cv-erro); }
.cv .cv-aceite-texto { min-width: 0; overflow-wrap: anywhere; }
.cv .cv-aviso-curto .cv-aceite-texto { white-space: pre-wrap; }

.cv .cv-aviso { display: flex; gap: 10px; align-items: start; margin-top: 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cv-erro) 35%, transparent); background: color-mix(in srgb, var(--cv-erro) 6%, #fff); color: var(--cv-erro); font-size: 13px; }
.cv .cv-aviso p { margin: 0; }
.cv .cv-aviso svg { width: 18px; height: 18px; margin-top: 2px; }
.cv .cv-enviar {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 60px; margin-top: 24px; padding: 16px 24px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--cv-botao); color: var(--cv-tinta-botao);
  font: 900 15px/1.2 var(--cv-fonte-texto); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--cv-botao) 90%, #000);
  transition: transform .25s, box-shadow .25s, opacity .25s, translate .25s;
}
.cv .cv-enviar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.cv .cv-enviar:hover:not(:disabled)::before { transform: translateX(120%); }
.cv .cv-enviar:hover:not(:disabled) { box-shadow: 0 20px 44px -14px color-mix(in srgb, var(--cv-botao) 90%, #000); }
.cv .cv-enviar svg { width: 20px; height: 20px; transition: transform .25s; }
.cv .cv-enviar:hover:not(:disabled) svg:last-child { transform: translateX(4px); }
.cv .cv-enviar:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.cv .cv-enviar:focus-visible { outline: 3px solid var(--cv-base); outline-offset: 3px; }
.cv .cv-girando { animation: cv-gira 1s linear infinite; }
@keyframes cv-gira { to { transform: rotate(360deg); } }
.cv .cv-dica { margin: 12px 0 0; text-align: center; color: color-mix(in srgb, var(--cv-texto) 62%, transparent); font-size: 12.5px; }

.cv .cv-sucesso { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 460px; padding: 48px 28px; text-align: center; overflow: hidden; }
.cv .cv-sucesso[hidden] { display: none; }
.cv .cv-sucesso-icone { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 26px; border-radius: 50%; background: var(--cv-base); color: var(--cv-destaque); animation: cv-estoura .6s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 0 10px color-mix(in srgb, var(--cv-base) 12%, transparent); }
.cv .cv-sucesso-icone svg { width: 42px; height: 42px; stroke-width: 3; }
@keyframes cv-estoura { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.cv .cv-sucesso h2 { margin: 0 0 12px; color: var(--cv-texto); font: 900 italic clamp(26px, 3cqi, 36px)/1.05 var(--cv-fonte-titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.cv .cv-sucesso h2:focus { outline: none; }
.cv .cv-sucesso p { margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--cv-texto) 75%, transparent); overflow-wrap: anywhere; }
.cv .cv-sucesso .cv-enviar { width: auto; display: inline-flex; padding-inline: 28px; text-decoration: none; }
.cv .cv-confete { position: absolute; inset: 0; pointer-events: none; }
.cv .cv-confete i { position: absolute; left: calc(50% - 4px); top: 30%; width: 8px; height: 14px; border-radius: 2px; background: var(--cv-destaque); opacity: 0; animation: cv-confete 1.4s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 25ms) both; }
.cv .cv-confete i:nth-child(3n) { background: var(--cv-base); }
.cv .cv-confete i:nth-child(4n) { background: var(--cv-preto); }
.cv .cv-confete i:nth-child(1) { --i: 0; }  .cv .cv-confete i:nth-child(2) { --i: 1; }
.cv .cv-confete i:nth-child(3) { --i: 2; }  .cv .cv-confete i:nth-child(4) { --i: 3; }
.cv .cv-confete i:nth-child(5) { --i: 4; }  .cv .cv-confete i:nth-child(6) { --i: 5; }
.cv .cv-confete i:nth-child(7) { --i: 6; }  .cv .cv-confete i:nth-child(8) { --i: 7; }
.cv .cv-confete i:nth-child(9) { --i: 8; }  .cv .cv-confete i:nth-child(10) { --i: 9; }
.cv .cv-confete i:nth-child(11) { --i: 10; } .cv .cv-confete i:nth-child(12) { --i: 11; }
.cv .cv-confete i:nth-child(13) { --i: 12; } .cv .cv-confete i:nth-child(14) { --i: 13; }
@keyframes cv-confete {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(calc(cos(calc(var(--i) * 25.7deg)) * 220px), calc(sin(calc(var(--i) * 25.7deg)) * 160px + 120px)) rotate(calc(var(--i) * 70deg)); }
}

/* Página sem clube: escolha do clube no lugar do formulário. */
.cv .cv-cadastro-grade.cv-cadastro-unica { grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
.cv .cv-clubes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cv .cv-clube {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px 12px 12px; border-radius: 16px;
  border: 1.5px solid var(--cv-linha); color: var(--cv-texto) !important; text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cv .cv-clube:hover { border-color: var(--cv-base); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .5); }
.cv .cv-clube-logo { display: grid; place-items: center; flex: none; width: 92px; height: 56px; padding: 8px; border-radius: 10px; background: var(--cv-preto); }
.cv .cv-clube-logo img { max-height: 100%; width: auto; object-fit: contain; }
.cv .cv-clube b { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; line-height: 1.3; overflow-wrap: break-word; }
.cv .cv-clube svg { width: 18px; height: 18px; color: var(--cv-base); }

.cv .cv-rodape { border-top: 1px solid color-mix(in srgb, var(--cv-tinta) 10%, transparent); padding-block: 26px calc(30px + env(safe-area-inset-bottom, 0px)); }
.cv .cv-rodape-interno { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; opacity: .8; }
.cv .cv-rodape img { height: 34px; width: auto; }
.cv .cv-rodape-marca { display: flex; align-items: center; gap: 16px; }
.cv .cv-rodape-marca strong { font: 900 16px/1 var(--cv-fonte-titulo); text-transform: uppercase; }
/* Assinatura no meio do rodapé: dois blocos lado a lado, rótulo em cima e logo embaixo. */
.cv .cv-rodape-interno.cv-com-assinatura { display: grid; grid-template-columns: 1fr auto 1fr; opacity: 1; }
.cv .cv-com-assinatura .cv-rodape-marca, .cv .cv-rodape-assinatura span { opacity: .8; }
.cv .cv-rodape-assinatura { display: flex; align-items: flex-end; gap: 30px; }
.cv .cv-rodape-assinatura > div { display: grid; justify-items: center; row-gap: 7px; }
.cv .cv-rodape-assinatura span { font-size: 12px; white-space: nowrap; }
.cv .cv-rodape .cv-rodape-assinatura img { height: 17px; }
/* "Realização:" com os logos na mesma linha (rodapé de romaacademy.com.br). */
.cv .cv-rodape-realizacao { display: flex; align-items: center; gap: 16px; }
.cv .cv-rodape-realizacao span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cv .cv-rodape .cv-rodape-realizacao img { width: auto; }
.cv .cv-rodape .cv-parceiro-angulo { height: 46px; }
.cv .cv-rodape .cv-parceiro-timeforte { height: 14px; }

/* Tablet e notebook estreito. */
@container (max-width: 1100px) {
  .cv .cv-palco { height: 470px; }
  .cv .cv-cadastro-grade { grid-template-columns: 290px minmax(0, 1fr); gap: 26px; }
  .cv .cv-ficha-nome { font-size: 24px; }
}
@container (max-width: 900px) {
  .cv .cv-hero-grade { grid-template-columns: minmax(0, 1fr); padding-block: 44px 24px; }
  .cv .cv-palco { height: 380px; max-width: 620px; width: 100%; margin: 0 auto; }
  /* Logo com o nome escrito: desce para ficar abaixo das fotos, não em cima delas. */
  .cv .cv-palco-logo { width: 210px; left: calc(50% - 105px); right: auto; bottom: -156px; }
  .cv .cv-palco:has(.cv-palco-logo) { margin-bottom: 100px; }
  .cv .cv-rodape-interno.cv-com-assinatura { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 22px; }
  .cv .cv-cadastro-grade { grid-template-columns: minmax(0, 1fr); }
  .cv .cv-ficha { display: none; }
  .cv .cv-medidor-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 16px; }
  .cv .cv-medidor-form i { grid-column: auto; background: color-mix(in srgb, var(--cv-linha) 70%, transparent); }
  .cv .cv-medidor-form em { background: linear-gradient(90deg, var(--cv-base), var(--cv-destaque)); }
  .cv .cv-medidor-form span { color: var(--cv-texto); font-variant-numeric: tabular-nums; }
}
/* Celular. */
@container (max-width: 600px) {
  .cv .cv-trilho { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .cv .cv-topo-interno { min-height: 62px; gap: 12px; }
  .cv .cv-topo-logo { height: 36px; max-width: 58%; }
  .cv .cv-topo-acao { padding: 9px 13px; font-size: 11px; letter-spacing: .04em; }
  .cv .cv-topo-acao svg { display: none; }
  .cv .cv-hero { padding-bottom: 72px; }
  .cv .cv-hero::after { height: 60px; }
  .cv .cv-hero-grade { padding-block: 34px 10px; gap: 20px; }
  .cv .cv-titulo { font-size: clamp(30px, 9.6cqi, 46px); margin: 18px 0 14px; }
  .cv .cv-descricao { font-size: 15px; }
  .cv .cv-botao { width: 100%; justify-content: center; margin-top: 24px; }
  .cv .cv-palco { height: 300px; }
  .cv .cv-palco-logo { width: 150px; left: auto; right: 8%; bottom: -40px; }
  .cv .cv-palco:has(.cv-palco-logo) { margin-bottom: 0; }
  /* No celular o logo sai para baixo do palco e a moldura volta a fechar acima dele. */
  .cv.cv-realmadrid .cv-palco::before { bottom: 10%; }
  .cv .cv-quadro-1 { left: 22%; width: 54%; }
  .cv .cv-quadro-2 { width: 38%; }
  .cv .cv-quadro-3 { width: 42%; }
  .cv .cv-faixa { margin-top: -40px; }
  .cv .cv-faixa-item { font-size: 19px; gap: 16px; }
  .cv .cv-faixa-item img { height: 36px; }
  .cv.cv-lazio .cv-topo-logo { height: 48px; }
  .cv.cv-lazio .cv-faixa-item img { height: 46px; }
  .cv .cv-cadastro { padding-block: 24px 64px; }
  .cv .cv-painel { border-radius: 18px; }
  .cv .cv-form { padding: 24px 18px; }
  .cv .cv-campos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cv .cv-campo { grid-column: 1 / -1 !important; }
  .cv .cv-sucesso { min-height: 380px; }
  .cv .cv-clubes { grid-template-columns: minmax(0, 1fr); }
  .cv .cv-botao-contorno { width: 100%; white-space: normal; }
}
@container (max-width: 380px) {
  .cv .cv-topo-acao { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cv *, .cv *::before, .cv *::after { animation: none !important; transition: none !important; }
  .cv .cv-espera { transform: none; opacity: 1; }
  .cv .cv-confete { display: none; }
}