/* ============================================================================
   marca.css — marcas de apoio dentro do site do Murilo.
   ----------------------------------------------------------------------------
   A FORMA e a do template (pai/kondzilla): pilula de 75px com degradê vertical,
   capsula do icone por cima, seta a direita, sombra suave; avatar redondo no
   carrossel; pop-up ocupando a tela toda, com raio so embaixo.
   O que muda por marca e a COR, e ela sai dos manuais em content/uploads/ID/:

     Rotina Ativa   verde #1E8A3B · creme #FBEEE3 · tinta #1A1A1A · laranja #C2410C
     Araras.org     azul-noite #10224F · azul-portal #1B72E8 · verde #00A88F

   Na primeira tentativa eu troquei a forma junto com a cor: os botoes viraram
   dois blocos chapados com emenda dura no meio. Este arquivo devolve a forma
   do template e mexe so no que era para mexer.
   ========================================================================== */

/* A display do Rotina Ativa. Vem do mesmo arquivo que o site do projeto usa;
   sem ela o titulo cai num sans qualquer e perde a marca. */
@font-face {
  font-family: 'Handelson Six';
  src: url('../fonts/Handelson-Six.otf') format('opentype');
  font-display: swap;
}

:root {
  --rot-display:    'Handelson Six', 'Arial Narrow', sans-serif;
  --rot-verde:      #1E8A3B;
  --rot-verde-esc:  #0F5122;
  --rot-creme:      #FBEEE3;
  --rot-tinta:      #1A1A1A;
  --rot-laranja:    #C2410C;

  --ara-noite:      #10224F;
  --ara-portal:     #1B72E8;
  --ara-verde:      #00A88F;
  --ara-foco:       #FFB400;
}

/* ---------------------------------------------------------------- botoes ---
   Tres camadas, como no template:
     a.mc-btn        pilula solida, raio 40, sombra  -> aparece na ponta direita
     .mc-btn__faixa  degradê vertical, raio pequeno  -> o corpo do botao
     .mc-btn__ico    capsula redonda na cor solida   -> o assento do logo
   E a sobreposicao das tres que da o degrau arredondado a direita. */
.mc-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  border-radius: 40px;
  margin-bottom: 10px;
  text-decoration: none;
  /* Sem sombra: o template nao tem. A profundidade vem do degradê e do degrau
     da faixa, e a sombra que eu tinha posto engordava o botao. */
  transition: transform .18s ease;
}
.mc-btn:hover { transform: translateY(-2px); }
.mc-btn:focus-visible { outline: 3px solid var(--ara-foco); outline-offset: 3px; }

.mc-btn__faixa {
  display: flex;
  align-items: center;
  height: 75px;
  width: 100%;
  /* Raio ASSIMETRICO, medido no template: 40 em cima-esq, 70 em cima-dir,
     0 embaixo-dir, 40 embaixo-esq. E essa quina viva no pe direito, contra o
     arredondado grande no topo, que produz o degrau. Com 40/40 dos dois lados
     (o que eu tinha feito) o degrau some e o botao vira uma barra chapada. */
  border-radius: 40px 70px 0 40px;
}
.mc-btn__ico {
  flex: 0 0 90px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}
/* O logo ocupa a capsula, como no print. O do Rotina usa o LETREIRO recortado
   de dentro do selo (rotina-letreiro.png): com a moldura quadrada, a area toda
   ia para a borda e o texto saia pequeno demais para ler. */
.mc-btn__ico img { max-width: 45px; max-height: 52px; object-fit: contain; }
.mc-btn__ico i   { font-size: 30px; }
.mc-btn__txt {
  flex: 1 1 auto;
  margin: 0;
  padding-left: 20px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.15;
  text-align: left;
}
.mc-btn__seta {
  flex: 0 0 50px;
  font-size: 14px;
  text-align: center;
}

/* Rotina Ativa — Aulas: preto (a "tinta" do manual). */
.mc-btn--rot-aulas              { background: #000; }
.mc-btn--rot-aulas .mc-btn__faixa { background: linear-gradient(180deg, #2b2b2b 0%, #101010 100%); }
.mc-btn--rot-aulas .mc-btn__ico { background: #000; }
.mc-btn--rot-aulas .mc-btn__txt,
.mc-btn--rot-aulas .mc-btn__seta { color: var(--rot-creme); }

/* Rotina Ativa — Grupos: verde da marca. */
.mc-btn--rot-grupos               { background: #23a247; }
.mc-btn--rot-grupos .mc-btn__faixa { background: linear-gradient(180deg, #23a247 0%, #146b2d 100%); }
.mc-btn--rot-grupos .mc-btn__ico  { background: #23a247; }
.mc-btn--rot-grupos .mc-btn__txt,
.mc-btn--rot-grupos .mc-btn__seta { color: var(--rot-creme); }

/* Araras.org: azul-noite. */
.mc-btn--araras                { background: #1b3573; }
.mc-btn--araras .mc-btn__faixa { background: linear-gradient(180deg, #1b3573 0%, #0c1a3d 100%); }
.mc-btn--araras .mc-btn__ico   { background: #1b3573; }
.mc-btn--araras .mc-btn__txt,
.mc-btn--araras .mc-btn__seta  { color: #fff; }

/* Quero apoiar: laranja de acao. */
.mc-btn--apoiar                { background: #e0500f; }
.mc-btn--apoiar .mc-btn__faixa { background: linear-gradient(180deg, #e0500f 0%, #a83609 100%); }
.mc-btn--apoiar .mc-btn__ico   { background: #e0500f; }
.mc-btn--apoiar .mc-btn__txt,
.mc-btn--apoiar .mc-btn__seta  { color: #fff; }

/* WhatsApp: mesmo preto do botao que substituiu, verde do WhatsApp no texto. */
.mc-btn--zap                { background: #2e2e2e; }
.mc-btn--zap .mc-btn__faixa { background: linear-gradient(180deg, #393939 0%, #2c2c2c 100%); }
.mc-btn--zap .mc-btn__ico   { background: #2e2e2e; }
.mc-btn--zap .mc-btn__ico i { color: #1EEA6C; }
.mc-btn--zap .mc-btn__txt,
.mc-btn--zap .mc-btn__seta  { color: #1EEA6C; }

/* ------------------------------------------------------------- carrossel ---
   Avatar redondo, como no template. As fotos das pessoas sao recorte sobre
   fundo claro, entao o circulo ganha um fundo proprio e um anel discreto --
   sem isso a foto "vaza" no branco da sessao e o circulo some. */
.mc-pessoa__foto {
  width: 118px; height: 118px;
  border-radius: 50%;
  overflow: hidden;
  background: #ececec;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
  display: block;
  margin: 0 auto 12px;
}
.mc-pessoa__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  display: block;
}
.mc-pessoa__nome {
  margin: 0;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  text-align: center; color: #252a32;
}

/* --------------------------------------------------------------- pop-up ---
   Tela cheia, ancorado no topo, raio so embaixo -- as tres coisas vem do
   template. Antes eu tinha feito um cartao pequeno no meio da tela. */
.mc-pop {
  height: 92vh;
  border-radius: 0 0 20px 20px;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
/* O tema anima esse pop-up com "transform: scale(...)" (classe my-mfp-zoom-in,
   em style.css) enquanto ele fica aberto. Qualquer transform vira "containing
   block" pros descendentes com position:fixed -- e o botao de fechar (que o
   plugin injeta DENTRO do .mc-pop, por causa do closeBtnInside:true) some de
   ser fixo na tela e passa a rolar junto com o conteudo. Zerando o transform
   aqui, o fixed do .mfp-close volta a valer para a janela de verdade. */
.my-mfp-zoom-in.mfp-ready .mc-pop,
.my-mfp-zoom-in.mfp-removing .mc-pop { transform: none !important; }
.mc-pop__capa {
  position: relative;
  flex: 0 0 auto;
  height: 46vh; min-height: 300px;
  background: var(--rot-tinta);
  display: flex; align-items: flex-end;
  border-radius: 0 0 30px 30px;
  overflow: hidden;
}
.mc-pop__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 15%;
}
/* Pe escuro para o nome ler sobre a foto. */
.mc-pop__capa::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,0) 72%);
}
/* Topo escuro tambem: os tres logos de candidatura sao BRANCOS e as fotos sao
   recorte sobre fundo claro -- sem isto o logo nao aparece. */
.mc-pop__capa::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,.20) 24%, rgba(0,0,0,0) 44%);
}
.mc-pop__logo {
  position: absolute; top: 20px; left: 24px; z-index: 4;
  max-height: 40px; max-width: 55%; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.mc-pop__nome {
  position: relative; z-index: 3;
  margin: 0; padding: 0 24px 24px;
  color: #fff; font-weight: 700; font-size: 34px; line-height: 1.05;
  letter-spacing: -.01em;
}
/* padding-right maior: reserva a coluna onde o X fixo (bottom-right) fica
   sentado por cima do conteudo enquanto rola -- sem isso o botao de fechar
   cobre o final das linhas de texto. */
.mc-pop__corpo { flex: 1 1 auto; padding: 24px 74px 24px 26px; }
.mc-pop__papel {
  display: inline-block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot-laranja);
}
.mc-pop__corpo p { color: #252a32; font-size: 15px; line-height: 1.6; margin: 0; }
.mc-pop__intro { margin-bottom: 22px !important; }
.mc-pop__subtitulo {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rot-tinta);
}
.mc-pop__topicos { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-pop__topicos li {
  padding-left: 16px;
  border-left: 3px solid var(--rot-laranja);
}
.mc-pop__topicos strong {
  display: block; font-size: 14.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px;
}
.mc-pop__topicos span { display: block; font-size: 14px; line-height: 1.55; color: #4c4f56; }
.mc-pop__pdf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; padding: 13px 20px;
  border-radius: 40px;
  background: var(--rot-tinta);
  color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; text-align: center;
}
.mc-pop__pdf i { color: var(--rot-laranja); font-size: 17px; }
.mc-pop__pdf:hover { opacity: .88; }
.mc-pop__rodape {
  flex: 0 0 auto;
  border-top: 1px solid #ececec;
  padding: 20px 26px 28px;
  text-align: center;
}
.mc-pop__rodape p { margin: 0 0 14px; font-size: 14px; color: #6e6e6e; line-height: 1.4; }
.mc-pop__redes { display: flex; justify-content: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.mc-pop__redes a { color: #1a1a1a; font-size: 22px; }
.mc-pop__redes a:hover { color: var(--rot-laranja); }

/* -------------------------------------------------------------- galeria ---
   Fundo preto. As fotos vem da pasta: o numero delas nao esta escrito em
   lugar nenhum do codigo. */
/* O fundo PRECISA ser opaco: atras desta sessao esta a camada fixa do video do
   topo, e sem cor aqui ela aparece por tras das fotos. Perdi esta regra ao
   reescrever o arquivo e a sessao ficou transparente. #101010 e o mesmo preto
   das sessoes escuras do template (bg-black1). */
.mc-galeria {
  /* Comeca EXATAMENTE na cor do degrau que abre a sessao (bg-black1 = #101010).
     Antes o degradê partia de #161616 e o degrau ficava mais escuro que o que
     vinha logo abaixo dele -- um salto de cor no meio da curva. */
  background: linear-gradient(180deg, #101010 0%, #0D0D0D 55%, #0A0A0A 100%);
}
/* Mesmo tratamento do banner de araras.org/rotina: display em caixa alta,
   entrelinha fechada e "Transforma" em verde. */
.mc-galeria__titulo {
  margin: 0 0 6px;
  font-family: var(--rot-display);
  font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 11vw, 46px);
  /* Entrelinha em PIXEL INTEIRO, nao em proporcao. Com line-height:.94 sobre um
     corpo de 9vw a linha media 34,855px, a sessao ficava com 505,688px de
     altura e empurrava tudo abaixo para posicao fracionaria. A fronteira entre
     o verde e o azul caia DENTRO de um pixel, e aquele pixel virava a mistura
     das duas cores (#163A54) -- a "linha" que aparecia na costura. */
  line-height: 36px;
  letter-spacing: .02em;
  color: #fff;
}
.mc-galeria__titulo em { font-style: normal; color: #3FBF63; }
.mc-galeria__sub {
  color: #9a9a9a; font-size: 13px; margin: 0;
  /* idem: altura de linha inteira, para a sessao fechar em pixel cheio */
  line-height: 20px;
  letter-spacing: .04em;
}
/* Carrossel horizontal, como a sessao Originais do template -- nao uma grade.
   O .scroll do tema ja cuida do arrasto; aqui so o tamanho do cartao. */
.mc-galeria__item {
  display: block; position: relative;
  flex: 0 0 auto;
  width: 210px; height: 280px;
  overflow: hidden;
  border-radius: 15px; background: #141414;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}
.mc-galeria__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.mc-galeria__item:hover img { transform: scale(1.05); }
/* Mesma sombra de pe dos cartoes do template (shadow-bottom3). */
.mc-galeria__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(to top, rgba(10,10,10,.59), rgba(0,0,0,0));
}
.mc-galeria__vazia { color: #9a9a9a; font-size: 14px; padding: 20px; }

/* --------------------------------------------------------- sessao rotina ---
   Verde da marca. O botao segue a forma do "Assistir na Netflix" que ele
   substituiu: pilula com degradê, no laranja de acao do manual. */
/* O verde chapado nao e o verde do manual: a marca vive com a textura por
   cima. efeito-rotina.png e o arquivo da propria identidade. */
.mc-rotina {
  position: relative;
  background: linear-gradient(180deg, #23a247 0%, #17753a 100%);
}
/* A textura para ANTES do degrau: aquele bloco carrega a cor da sessao
   seguinte, nao a do Rotina, e nao deve receber o grão da marca. Cobrindo-o,
   o mix-blend-mode ainda fazia dele uma camada de composicao a parte -- e e
   na borda dessas camadas que o Chrome deixa fio de 1px. */
.mc-rotina::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 30px;
  z-index: 0;
  background: url('../../uploads/marca/efeito-rotina.png') center / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.mc-rotina > * { position: relative; z-index: 1; }
.mc-rotina__logo { max-width: 200px; }

/* Thumb + botao de play, mesma anatomia da sessao Sintonia do template:
   imagem com raio 10, play centralizado com o anel pulsando. */
.mc-rotina__thumb {
  position: relative; display: block;
  /* Recuo lateral igual ao do template na sessao Sintonia (padding-20px-lr):
     encostado nas bordas a foto briga com o degrau arredondado da sessao. */
  width: calc(100% - 40px); margin: 6px auto 22px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
}
.mc-rotina__thumb img { width: 100%; height: auto; display: block; }
/* Escurece um pouco para o play nao sumir numa foto clara. */
.mc-rotina__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .18);
}
.mc-rotina__play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rot-laranja); color: #fff; font-size: 22px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .40);
}
/* Anel pulsando, como o video-icon-sonar do tema. */
.mc-rotina__play::before {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%; background: rgba(255, 255, 255, .35);
  animation: mcSonar 2.2s ease-out infinite;
}
@keyframes mcSonar {
  0%   { transform: scale(.72); opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-rotina__play::before { animation: none; opacity: .3; }
}
.mc-rotina__txt { color: var(--rot-creme); font-size: 15px; line-height: 23px; }
.mc-rotina__btn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 34px;
  background: linear-gradient(180deg, #e0500f 0%, #a83609 100%);
  color: #fff; font-weight: 600; font-size: 15px;
  border-radius: 40px; text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
.mc-rotina__btn:hover { color: #fff; transform: translateY(-2px); }
.mc-rotina__btn:focus-visible { outline: 3px solid var(--rot-creme); outline-offset: 3px; }

/* --------------------------------------------------------- sessao araras ---
   Azul-noite, cartoes com foto de fundo e sombra embaixo, como a vitrine que
   ele substituiu. */
/* Degradê do azul da marca ate transparente: a sessao morre no fundo escuro
   do rodape em vez de terminar num corte reto de cor. */
/* Termina no preto do rodape, nao em transparente: por tras desta sessao esta
   a camada fixa do video, e o trecho transparente deixava a imagem vazar entre
   os cartoes. Contra o rodape o resultado visual e o mesmo. */
.mc-araras {
  /* Cor solida SOB o degradê: se o degradê nao pintar a primeira linha por
     arredondamento de sub-pixel, e ela que aparece -- na mesma cor, em vez de
     deixar passar o que estiver atras. */
  background-color: #16295C;
  background-image: linear-gradient(180deg, #16295C 0%, #101E44 45%, #0A0A0A 100%);
  /* Sobe 1px por cima do degrau. O degrau ja desce 1px (margin-bottom:-1px);
     os dois juntos garantem que nao exista fresta em nenhuma densidade de
     tela, que e onde a linha aparecia. */
  margin-top: -1px;
  /* Raio na BASE, espelhando o .borderradius-top que abre cada sessao: o bloco
     fecha arredondado sobre o rodape em vez de terminar num corte reto. Mesmo
     45px do tema, para as duas pontas terem a mesma curva. */
  border-radius: 0 0 45px 45px;
  /* SEM overflow:hidden. O clipe forcava uma camada propria de composicao, e
     na borda de cima dela o Chrome deixava um fio claro de 1px -- a "linha
     branca" entre o degrau e o row. O raio sozinho ja arredonda o fundo, e
     nada transborda aqui para precisar de corte. */
}
.mc-araras__logo { max-width: 215px; }
.mc-araras__txt { color: #C3CEE4; font-size: 14px; line-height: 21px; }
/* Medidas tiradas do "Fique por Dentro" do template, nao estimadas:
   margem lateral de 30px, cartoes de 85px de altura e segunda linha
   ASSIMETRICA (218 e 124 de largura, 10px de intervalo). O p-0 das classes do
   tema anulava o padding-30px-lr do container, e por isso os meus cartoes
   estavam encostados nas duas bordas da tela. */
.mc-araras__grade {
  display: grid;
  grid-template-columns: 1.76fr 1fr;
  gap: 10px;
  padding: 0 30px;
}
.mc-araras__card {
  position: relative; display: flex;
  /* coluna, senao o <p> e o <span> viram dois itens flex lado a lado e o
     subtitulo cola no fim do titulo */
  flex-direction: column; justify-content: flex-end;
  height: 85px; padding: 12px 14px;
  border-radius: 15px; text-decoration: none;
  background: linear-gradient(180deg, #1E3A80 0%, #14285A 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
}
.mc-araras__card--largo { grid-column: 1 / -1; }
.mc-araras__card i {
  position: absolute; top: 12px; right: 14px;
  color: var(--ara-portal); font-size: 19px; opacity: .9;
}
.mc-araras__card p { margin: 0; color: #fff; font-weight: 600; font-size: 15px; text-align: left; line-height: 1.2; }
.mc-araras__card span { display: block; margin-top: 3px; color: #8FA6D4; font-size: 12px; text-align: left; line-height: 1.3; }
.mc-araras__card:hover { border-color: var(--ara-portal); }
.mc-araras__card:focus-visible { outline: 3px solid var(--ara-foco); outline-offset: 2px; }

/* ------------------------------------------------------------------ geral ---
   O rodape trazia a assinatura do Kondzilla; agora e a do Araras.org. */
.mc-rodape-logo { height: 16px; width: auto; }

/* ------------------------------------------------------- pop-up do video ---
   O teaser e VERTICAL (576x1024). Num pop-up desenhado para paisagem ele
   apareceria com duas tarjas pretas gigantes dos lados, entao o quadro segue a
   proporcao do arquivo e o CTA fica ancorado sobre ele. */
.mc-video {
  position: relative;
  width: 100%; max-width: 420px;
  margin: 0 auto;
  background: #000;
  border-radius: 16px; overflow: hidden;
}
.mc-video video {
  display: block; width: 100%; height: auto;
  max-height: 82vh;
  object-fit: contain; background: #000;
}
.mc-video__cta {
  position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px;
  background: linear-gradient(180deg, #e0500f 0%, #a83609 100%);
  color: #fff; font-weight: 600; font-size: 16px;
  border-radius: 40px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.mc-video__cta:hover { color: #fff; transform: translateY(-2px); }
.mc-video__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Sombra no pe para o botao ler sobre qualquer quadro do video. */
.mc-video::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

/* ============================================================================
   POP-UPS — ajustes que valem para todos (candidatos, video e galeria)
   ========================================================================== */

/* --- botao de fechar: canto INFERIOR direito, pilula vermelha ---------------
   O X do tema fica no alto e em cima do conteudo. No celular, o alto da tela e
   justamente onde a mao nao chega. */
.mfp-close,
.mfp-close:active {
  position: fixed !important;
  top: auto !important;
  right: 18px !important;
  bottom: 22px !important;
  left: auto !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #D62828 !important;
  color: #fff !important;
  opacity: 1 !important;
  font: 400 30px/52px Arial, sans-serif !important;
  text-align: center !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
  z-index: 1100 !important;
}
.mfp-close:hover { background: #b31f1f !important; }
.mfp-close:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
/* O contador do tema ficava colado no botao novo. */
.mfp-counter { display: none !important; }

/* --- rolagem: pagina travada, conteudo do pop-up livre --------------------- */
.mfp-wrap { overflow: hidden auto !important; }
/* Trava aplicada pelo JS ao abrir; guarda a posicao para devolver ao fechar. */
body.mc-travado {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
  width: 100%;
}

/* --- galeria ampliada: mesmo modelo dos candidatos ------------------------- */
.mc-lb {
  position: relative;
  width: 100%; max-width: 460px; margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}
/* O magnific TROCA o elemento .mfp-img pela imagem carregada, entao o desenho
   fica no invólucro em volta -- classe posta no proprio .mfp-img some. */
/* O raio vai nos tres: o .mc-lb corta, mas a imagem e trocada pelo magnific e
   pode ser pintada por cima do corte em algumas versoes -- arredondar tambem a
   moldura e a propria imagem garante o canto em qualquer caso. */
.mc-lb__moldura {
  display: block; background: #101010; line-height: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.mc-lb__moldura .mfp-img {
  display: block; width: 100%; height: auto;
  max-height: 62vh; object-fit: contain;
  padding: 0 !important; margin: 0 !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.mc-lb__pe { padding: 20px 24px 26px; text-align: center; }
.mc-lb__titulo {
  margin: 0 0 4px;
  font-family: var(--rot-display);
  font-weight: 400; text-transform: uppercase;
  font-size: 26px; line-height: 26px; letter-spacing: .02em;
  color: #1a1a1a;
}
.mc-lb__titulo em { font-style: normal; color: var(--rot-verde); }
.mc-lb__sub {
  margin: 0 0 16px;
  font-size: 13px; line-height: 18px; color: #6e6e6e; letter-spacing: .04em;
}
.mc-lb__btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px;
  background: linear-gradient(180deg, #23a247 0%, #17753a 100%);
  color: #fff; font-weight: 600; font-size: 15px;
  border-radius: 40px; text-decoration: none;
}
.mc-lb__btn:hover { color: #fff; }
.mc-lb__btn:focus-visible { outline: 3px solid var(--ara-foco); outline-offset: 3px; }
/* A moldura padrao do mfp para imagem some: quem desenha e o .mc-lb. */
.mfp-gallery .mfp-figure::after { display: none !important; }

/* ============================================================================
   HERO — mesma vinheta e o mesmo grão do preloader.
   ----------------------------------------------------------------------------
   O preloader some em 4s e o video ficava cru. Aqui o tratamento continua, para
   a passagem de um para o outro nao ter corte.

   Escopado em .big-section de proposito: .swiper-slide tambem e usado nos
   carrosseis de baixo, e la o efeito nao tem o que fazer.
   ========================================================================== */
.big-section .swiper-slide { position: relative; }

/* Vinheta: escuro nas beiradas, limpo no meio. Mais fechada que a do
   preloader (.70 contra .20) -- ali o fundo ja era quase preto, aqui ela
   trabalha contra um video claro. */
.big-section .swiper-slide::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: 0 0 20px 20px;   /* acompanha o raio do proprio video */
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, .70) 0%,
              rgba(0, 0, 0, 0)   42%,
              rgba(0, 0, 0, .70) 100%);
  pointer-events: none;
}

/* Grão da identidade do Rotina. */
.big-section .swiper-slide::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: 0 0 20px 20px;
  background: url('../../uploads/marca/efeito-rotina.png') center / cover no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* O ::after e o ultimo a ser pintado e passaria por cima do titulo e do botao,
   que sao absolutos e vem antes dele no DOM. */
.big-section .swiper-slide > h5,
.big-section .swiper-slide > a { z-index: 2; }