:root,
body.light {
  --size: 16px;
  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
    sans-serif;
  --font-icon: "Material Symbols Outlined";
  --speed1: 0.1s;
  --speed2: 0.2s;
  --speed3: 0.3s;
  --speed4: 0.4s;
  --primary: #0061a4;
  --on-primary: #ffffff;
  --primary-container: #d1e4ff;
  --on-primary-container: #001d36;
  --secondary: #535f70;
  --on-secondary: #ffffff;
  --secondary-container: #d7e3f7;
  --on-secondary-container: #101c2b;
  --tertiary: #6b5778;
  --on-tertiary: #ffffff;
  --tertiary-container: #f2daff;
  --on-tertiary-container: #251431;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fdfcff;
  --on-background: #1a1c1e;
  --surface: #faf9fc;
  --on-surface: #1a1c1e;
  --surface-variant: #dfe2eb;
  --on-surface-variant: #43474e;
  --outline: #73777f;
  --outline-variant: #c3c7cf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f3033;
  --inverse-on-surface: #f1f0f4;
  --inverse-primary: #9ecaff;
  --surface-dim: #dadadd;
  --surface-bright: #faf9fc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f7;
  --surface-container: #eeedf1;
  --surface-container-high: #e8e8eb;
  --surface-container-highest: #e2e2e6;
  --body: #fff;
  --overlay: rgb(0 0 0 / 0.5);
  --active: rgb(0 0 0 / 0.1);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
}

body.dark {
  --primary: #9ecaff;
  --on-primary: #003258;
  --primary-container: #00497d;
  --on-primary-container: #d1e4ff;
  --secondary: #bbc7db;
  --on-secondary: #253140;
  --secondary-container: #3b4858;
  --on-secondary-container: #d7e3f7;
  --tertiary: #d6bee4;
  --on-tertiary: #3b2948;
  --tertiary-container: #523f5f;
  --on-tertiary-container: #f2daff;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1a1c1e;
  --on-background: #e2e2e6;
  --surface: #121316;
  --on-surface: #e2e2e6;
  --surface-variant: #43474e;
  --on-surface-variant: #c3c7cf;
  --outline: #8d9199;
  --outline-variant: #43474e;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e2e2e6;
  --inverse-on-surface: #2f3033;
  --inverse-primary: #0061a4;
  --surface-dim: #121316;
  --surface-bright: #38393c;
  --surface-container-lowest: #0d0e11;
  --surface-container-low: #1a1c1e;
  --surface-container: #1e2022;
  --surface-container-high: #282a2d;
  --surface-container-highest: #333538;
  --body: #000;
  --overlay: rgb(0 0 0 / 0.5);
  --active: rgb(255 255 255 / 0.2);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
}

* {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  vertical-align: middle;
  color: inherit;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  box-sizing: border-box;
}

body {
  color: var(--on-background);
  background-color: var(--body);
  overflow-x: hidden;
}

a,
i,
span {
  vertical-align: bottom;
}

a,
button {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: none;
  font-family: inherit;
  outline: inherit;
  justify-content: center;
}

.primary-text {
  color: var(--primary) !important;
}

.black-text {
  color: #000 !important;
}

.transparent {
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.left-align {
  text-align: left;
  justify-content: flex-start !important;
}

.center-align {
  text-align: center;
  justify-content: center !important;
}

.divider {
  border-bottom: 0.0625rem solid var(--outline);
  display: block;
  margin: 0 !important;
}

.no-elevate {
  box-shadow: none !important;
}

.round:not(i, img, video, svg, button, .button, .chip, .field) {
  border-radius: 2rem !important;
}

.circle {
  border-radius: 50%;
}

:is(button, .button, .chip).circle {
  border-radius: 2.5rem;
}

:is(.circle, .square):not(i, img, video, svg) {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
}

:is(.circle, .square).large:not(i, img, video, svg) {
  height: 3rem;
  width: 3rem;
}

.border:not(table, .field) {
  box-sizing: border-box;
  border: 0.0625rem solid var(--outline);
  background-color: transparent;
  box-shadow: none;
}

.no-padding {
  padding: 0 !important;
}

.large-padding {
  padding: 1.5rem !important;
}

.left {
  left: 0;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.center {
  left: 50%;
  transform: translate(-50%);
}

.middle {
  top: 50%;
  transform: translateY(-50%);
}

.middle.center {
  transform: translate(-50%, -50%);
}

.wrap {
  display: block;
  white-space: normal;
}

:is(.space, .small-space):not(nav, .row, .grid, table, .tooltip) {
  height: 1rem;
}

.large-space:not(nav, .row, .grid, table, .tooltip) {
  height: 3rem;
}

.responsive {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

@media only screen and (max-width: 600px) {
  .m:not(.s),
  .l:not(.s) {
    display: none;
  }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
  .l:not(.m) {
    display: none;
  }
}
@media only screen and (min-width: 993px) {
  .m:not(.l),
  .s:not(.l),
  .m.s:not(.l) {
    display: none;
  }
}
html {
  font-size: var(--size);
}

body {
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.25;
}

h1,
h2,
h6 {
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  line-height: normal;
}

* + h2,
* + h6 {
  margin-top: 1rem;
}

h1 {
  font-size: 3.5625rem;
}

h2 {
  font-size: 2.8125rem;
}

#em_carrossel h2 {
  font-size: 1.1rem;
}

#title h2 {
  font-size: 1.0rem;
}

#title_news h2 {
  font-size: 1.3rem !important;
}

h6 {
  font-size: 1.5rem;
}

.link {
  color: var(--primary) !important;
}

.small-text {
  font-size: 0.75rem;
}

.large-text {
  font-size: 1rem;
}

.bold {
  font-weight: 700;
}

p {
  margin: 0.5rem 0;
}

.medium-line {
  line-height: 1.75;
}

.large-line {
  line-height: 2;
}

.wave:after,
:is(.chip, .button, button):after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  background-position: center;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 1%,
    transparent 1%
  );
  opacity: 0;
  transition: none;
}

:is(.chip, .button, button).border:after,
:is(.chip, .button, button).transparent:after {
  background-image: radial-gradient(
    circle,
    rgba(150, 150, 150, 0.2) 1%,
    transparent 1%
  );
}

:is(.wave, .chip, .button, button):active:after {
  background-size: 5000%;
  opacity: 0;
  transition: none;
}

button {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-primary);
  padding: 0 1.5rem;
  background-color: var(--primary);
  margin: 0 0.5rem;
  border-radius: 1.25rem;
  transition: var(--speed3) transform, var(--speed3) border-radius,
    var(--speed3) padding;
  user-select: none;
  gap: 1rem;
  line-height: normal;
}

:is(button, .button).large {
  height: 3rem;
  min-width: 3rem;
  border-radius: 1.5rem;
}

:is(.button, button):is(.extra, .extend) {
  height: 3.5rem;
  min-width: 3.5rem;
  font-size: 1rem;
  border-radius: 1.75rem;
}

:is(button, .button).border {
  border: 0.0625rem solid var(--primary);
  color: var(--primary);
}

article {
  box-shadow: var(--elevate1);
  background-color: var(--surface);
  color: var(--on-surface);
  padding: 1rem;
  border-radius: 0.75rem;
  display: block;
  transition: var(--speed3) transform, var(--speed3) border-radius,
    var(--speed3) padding;
}

article.large {
  height: 32rem;
}

main.responsive {
  margin: 0 auto;
  max-width: 75rem;
  padding: 0.5rem;
  overflow-x: hidden;
  min-height: 100vh;
}

main.responsive.max {
  max-width: 100%;
}

@media only screen and (max-width: 600px) {
  nav.s.top ~ .responsive:not(footer) {
    padding-top: 5rem;
  }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
  nav.m.top ~ .responsive:not(footer) {
    padding-top: 5rem;
  }
}
@media only screen and (min-width: 993px) {
  nav.l.left ~ .responsive {
    padding-left: 6rem;
  }
}
@media only screen and (max-width: 600px) {
  main.responsive {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}
.grid {
  ---gap: 1rem;
  display: grid;
  grid-template-columns: repeat(
    12,
    calc(8.33% - var(---gap) + (var(---gap) / 12))
  );
  gap: var(---gap);
}

* + .grid {
  margin-top: 1rem;
}

.s4 {
  grid-area: auto/span 4;
}

.s12 {
  grid-area: auto/span 12;
}

@media only screen and (min-width: 601px) {
  .m6 {
    grid-area: auto/span 6;
  }
}
@media only screen and (min-width: 993px) {
  .l4 {
    grid-area: auto/span 4;
  }

  .l6 {
    grid-area: auto/span 6;
  }
}
i {
  ---size: 1.5rem;
  font-family: var(--font-icon);
  font-weight: 400;
  font-style: normal;
  font-size: var(---size);
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  width: var(---size);
  min-width: var(---size);
  height: var(---size);
  min-height: var(---size);
  box-sizing: content-box;
}

i > :is(img, svg) {
  width: 100%;
  height: 100%;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  padding: inherit;
}

.absolute {
  position: absolute;
}

svg {
  fill: currentColor;
}

:is(img, svg, video):is(
    .small,
    .medium,
    .large,
    .tiny,
    .extra,
    .round,
    .circle,
    .responsive
  ) {
  object-fit: cover;
  object-position: center;
  transition: var(--speed3) transform, var(--speed3) border-radius,
    var(--speed3) padding;
  height: 3rem;
  width: 3rem;
}

:is(img, svg, video).responsive {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

:is(button, .button, .chip) > :is(img, svg).responsive {
  width: 2.5rem;
}

:is(button, .button, .chip).large > :is(img, svg).responsive {
  width: 3rem;
}

:is(img, svg, video).responsive.medium {
  width: 100%;
  height: 12rem;
}

:is(button, .button, .chip) > :is(i, img, svg),
:is(button, .button, .chip) > :is(img, svg).responsive {
  margin: 0 -0.5rem;
}

:is(button, .button) > :is(img, svg).responsive {
  margin-left: -1.5rem;
}

:is(.circle, .square) > :is(img, svg).responsive {
  margin: 0;
}

nav,
.row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  border-radius: 0;
  gap: 1rem;
}

:not(.divider, .small-divider, .medium-divider, .large-divider)
  + nav:not(.left, .right, .top, .bottom),
:not(.divider, .small-divider, .medium-divider, .large-divider) + .row:not(a) {
  margin-top: 1rem;
}

:is(nav, .row) > *,
:is(nav, .row) > :not(.tooltip, menu) > * {
  margin-top: 0;
  margin-bottom: 0;
}

nav > *,
.row > * {
  margin: 0 !important;
  white-space: normal;
  flex: none;
}

:is(nav, .row).large-space {
  gap: 2rem;
}

nav > .max {
  flex: auto;
}

.row.wrap {
  display: flex;
  flex-wrap: wrap;
}

.page {
  ---transform: translate(0, 0);
  opacity: 0;
  position: absolute;
  display: none;
}

.page.active {
  opacity: 1;
  position: inherit;
  display: inherit;
  animation: var(--speed4) to-page ease;
}

.page.active.top {
  ---transform: translate(0, -4rem);
}

.page.active.bottom {
  ---transform: translate(0, 4rem);
}

.page.active.left {
  ---transform: translate(-4rem, 0);
}
#time {
  text-align-last: center;
}

.scroll {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

.dragging {
    cursor: grabbing;
}

.fixed-nav {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.fixed-nav.left {
    left: 20px;
}

.fixed-nav.right {
    right: 20px;
}

#em_altar img {
    height: 284px;
}

#em_filmes img {
    height: 284px;
}

/* Ajustes para carrossel de categorias */
#em_carrossel article {
    min-width: 280px;
}

#em_carrossel .padding {
    padding: 0.5rem;
}