/*
 * Kit do site mevo.com.br (ADR-0002): estilos dos componentes que as paginas
 * institucionais usam com o kit-site.js — o visual do Swiper, dos botoes com
 * seta, do formulario e do video do Next.js atual. A pagina acrescenta o CSS
 * dela num <style> proprio. Unidades: N/16 rem (o `Npr` do tema), como a moldura.
 */

/* ------------------------------------------------------- titulos do tema */
.titulo-h1 { font-family: Ambit, 'Work Sans', sans-serif; font-weight: 700; font-size: 3.125rem; line-height: 91%; }
@media (min-width: 62em) { .titulo-h1 { font-size: 5.625rem; line-height: 80%; } }
.titulo-h2 { font-family: Ambit, 'Work Sans', sans-serif; font-weight: 700; font-size: 1.5625rem; line-height: 100%; }
@media (min-width: 62em) { .titulo-h2 { font-size: 2.375rem; } }
.titulo-h3 { color: #FBB6BF; font-size: 1.875rem; font-weight: 600; line-height: 1.2; }
.titulo-h4 { font-family: Ambit, 'Work Sans', sans-serif; font-weight: 700; font-size: 1.5625rem; line-height: 1.2; }
.titulo-h4 span { font-weight: 500; }
.so-celular { }
.so-largo { display: none; }
@media (min-width: 62em) { .so-celular { display: none !important; } .so-largo { display: revert; } }

/* --------------------------------------------- botao com seta (ArrowButton) */
.botao-seta {
  display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle;
  min-width: 11.875rem; height: 3.125rem; padding: 0 .9375rem 0 1.75rem; border: 0; border-radius: 25px;
  background: var(--roxo); color: #FFF; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-align: left; box-shadow: 0 10px 10px #241C541C; cursor: pointer; text-decoration: none;
}
@media (min-width: 62em) { .botao-seta { transition: all .3s ease; } }
.botao-seta::after {
  content: ''; flex-shrink: 0; width: 27.935px; height: 27.935px; margin-left: auto; padding-left: .9375rem; box-sizing: content-box !important;
  background: url(seta-botao.svg) right center / 27.935px no-repeat;
}
.botao-seta--rosa { background: var(--rosa); color: #3C0F6B; }
.botao-seta--rosa::after { background-image: url(seta-botao-roxa.svg); }
.botao-seta:disabled, .botao-seta[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ------------------------------------------------------------ carrossel */
[data-carrossel] { position: relative; }
.carrossel__trilho {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho > * { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.carrossel__pontos { display: flex; gap: 8px; justify-content: center; align-items: center; }
.carrossel__ponto {
  position: relative; width: 16px; height: 16px; padding: 0; border: 1px solid #404040; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.carrossel__ponto[aria-current="true"]::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #FBB6BF;
}
.carrossel__seta {
  width: 3.4375rem; height: 3.4375rem; border: 0; border-radius: 50%; background: #FFF; box-shadow: 5px 5px 20px #5252524D;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all ease .3s;
}
.carrossel__seta::after { content: ''; width: 1.3125rem; height: 1.3125rem; background: url(seta-carrossel.svg) center / 100% auto no-repeat; }
.carrossel__seta--anterior { transform: rotate(90deg); }
.carrossel__seta--proximo { transform: rotate(-90deg); }
.carrossel__seta:disabled { opacity: .35; cursor: auto; pointer-events: none; }
@media (min-width: 62em) { .carrossel__seta:hover { background: var(--roxo); } }
/* So no celular: no computador o trilho vira o que a pagina definir (grade). */
@media (min-width: 62em) {
  [data-so-celular] .carrossel__trilho { overflow: visible; scroll-snap-type: none; }
  [data-so-celular] .carrossel__trilho > * { flex: initial; }
  [data-so-celular] .carrossel__pontos, [data-so-celular] .carrossel__seta { display: none; }
}

/* --------------------------------------------------------------- video */
.video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.video > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5.125rem; height: 5.125rem; border-radius: 50%;
  background: var(--roxo) url(play.svg) 55% center / 20px auto no-repeat;
}
.video--tocando .video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------- formulario */
.campo-mevo { position: relative; border: 1px solid var(--roxo); border-radius: 10px; margin-bottom: 2.5rem; padding: .625rem 1.3125rem; }
.campo-mevo label { display: block; font-weight: 600; font-size: 1rem; text-align: start; margin: 0; }
.campo-mevo label .obrigatorio { color: #E53E3E; margin-left: .25rem; }
.campo-mevo input, .campo-mevo textarea {
  display: block; width: 100%; border: 0; outline: 0; background: transparent; padding: 0; color: #8C8097; font: inherit; font-size: 1rem;
  height: auto; min-height: 1.5rem; resize: none;
}
.campo-mevo:focus-within { box-shadow: 0 0 0 1px var(--roxo); }
.aceite-mevo { display: inline-flex; align-items: flex-start; gap: .625rem; cursor: pointer; line-height: 100%; user-select: none; }
.aceite-mevo input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 23px; height: 23px; margin: 0; border: 1px solid var(--roxo);
  border-radius: 7px; background: #FFF; cursor: pointer; display: grid; place-content: center;
}
.aceite-mevo input:checked::after { content: ''; width: 10px; height: 6px; border: solid var(--roxo); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.aceite-mevo input:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.aceite-mevo a { text-decoration: underline; font-weight: 600; }
.armadilha-mevo { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
[data-vitrine-mensagem]:empty { display: none; }
.mensagem-mevo { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 10px; background: var(--lilas); font-weight: 600; }
form[data-vitrine-estado="erro"] .mensagem-mevo { background: #FDECEC; color: #9B1C1C; }

/* ------------------------------------------------------------- chat */
.chat-mevo {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; padding: 10px; border: 0; border-radius: 5px;
  background: var(--roxo); cursor: pointer; line-height: 0;
}
.chat-mevo svg { width: 25px; height: 25px; }

/* -------------------------------------------- botao flutuante (home) */
.flutuante-mevo {
  position: fixed; left: 0; right: 0; bottom: 1.25rem; z-index: 5; display: flex; justify-content: flex-end; pointer-events: none;
  transform: translateY(80px); transition: all ease .3s;
}
.flutuante-mevo.visivel { transform: translateY(0); }
.flutuante-mevo > * { pointer-events: all; }

/* --------------------------------------------------------- dialogo */
dialog.dialogo-mevo { padding: 0; border: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: transparent; }
dialog.dialogo-mevo::backdrop { background: rgba(60, 14, 107, .4); }
.dialogo-mevo__fechar { position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: #FFF; cursor: pointer; z-index: 2; }

/* --------------------------------------------------------- arrastar */
[data-arrastar] { overflow-x: auto; scrollbar-width: none; cursor: grab; }
[data-arrastar]::-webkit-scrollbar { display: none; }
[data-arrastar].arrastando { cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto; }

/* ----------------------------------------------------------- animar */
[data-animar] { transition: opacity .6s ease, transform .6s ease; }
.kit-site [data-animar]:not(.animado) { opacity: 0; transform: translateY(30px); }
@media (prefers-reduced-motion: reduce) {
  .kit-site [data-animar]:not(.animado) { opacity: 1; transform: none; }
  .carrossel__trilho { scroll-behavior: auto; }
}

/* ------------------------------------------------- pilulas (Lottie) */
.pilula--rosa { width: 7rem; height: 7rem; border-radius: 50%; background: linear-gradient(135deg, #FAB6BF 0 55%, #F7A1AD 55% 100%); }
.pilula--azul { width: 6rem; height: 10rem; border-radius: 3rem; background: linear-gradient(#5AB3F2 0 50%, #8ACBF7 50% 100%); }