/* =========================================================
   CSN FIBRA
   Bootstrap 5 + identidade visual personalizada
========================================================= */

:root {
  --csn-red: #ef3f3a;
  --csn-red-dark: #d92f2b;
  --csn-red-deeper: #b82424;
  --csn-red-soft: #fff1f0;

  --csn-blue: #2e9ff2;
  --csn-blue-deep: #0d2f73;
  --csn-blue-darker: #082455;
  --csn-blue-soft: #edf6ff;

  --mesh-blue: #071b4a;
  --mesh-blue-deep: #061642;
  --mesh-blue-light: #0b2f72;

  --csn-ink: #172033;
  --csn-muted: #69758a;
  --csn-border: #e2e7ef;
  --csn-bg: #f6f8fb;
  --csn-surface: #ffffff;

  --csn-radius-sm: 12px;
  --csn-radius-md: 18px;
  --csn-radius-lg: 28px;

  --csn-shadow-sm:
    0 12px 32px rgba(13, 47, 115, 0.07);

  --csn-shadow-md:
    0 18px 48px rgba(13, 47, 115, 0.11);

  --csn-shadow-lg:
    0 28px 70px rgba(8, 36, 85, 0.16);

  --csn-transition: 220ms ease;

  --csn-header-height: 92px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;

  scroll-padding-top:
    calc(var(--csn-header-height) + 18px);
}

body {
  min-width: 320px;

  margin: 0;

  overflow-x: hidden;

  color: var(--csn-ink);

  background: var(--csn-bg);

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

img {
  display: block;

  max-width: 100%;
}

section[id] {
  scroll-margin-top:
    calc(var(--csn-header-height) + 18px);
}

::selection {
  color: #fff;

  background: var(--csn-red);
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.skip-link {
  position: fixed;

  top: 10px;
  left: 10px;

  z-index: 2000;

  padding: 0.7rem 1rem;

  border-radius: 10px;

  color: #fff;

  background: var(--csn-blue-deep);

  text-decoration: none;

  transform: translateY(-150%);

  transition:
    transform var(--csn-transition);
}

.skip-link:focus {
  transform: translateY(0);
}


/* =========================================================
   CONTAINER
========================================================= */

@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }

}


/* =========================================================
   SEÇÕES
========================================================= */

.section {
  padding:
    clamp(
      4.6rem,
      7vw,
      6.6rem
    )
    0;
}

.section-heading {
  max-width: 760px;

  margin-bottom:
    clamp(
      2rem,
      4vw,
      3rem
    );
}

.section-kicker,
.card-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  margin-bottom: 0.7rem;

  color: var(--csn-blue-deep);

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.section-kicker::before {
  width: 24px;

  height: 2px;

  border-radius: 999px;

  background: var(--csn-red);

  content: "";
}

.section-title {
  margin: 0;

  color: var(--csn-ink);

  font-size:
    clamp(
      2rem,
      4vw,
      3.05rem
    );

  font-weight: 800;

  letter-spacing: -0.045em;

  line-height: 1.08;
}

.section-description {
  max-width: 680px;

  margin: 1rem 0 0;

  color: var(--csn-muted);

  font-size:
    clamp(
      0.98rem,
      1.5vw,
      1.06rem
    );
}

.text-accent {
  color: var(--csn-red);
}


/* =========================================================
   BOTÕES
========================================================= */

.btn {
  --bs-btn-font-weight: 700;

  min-height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  border-radius: 12px;

  font-size: 0.9rem;

  transition:
    transform var(--csn-transition),
    box-shadow var(--csn-transition),
    background-color var(--csn-transition),
    border-color var(--csn-transition),
    color var(--csn-transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-brand {
  --bs-btn-color: #fff;

  --bs-btn-bg: var(--csn-red);

  --bs-btn-border-color: var(--csn-red);

  --bs-btn-hover-color: #fff;

  --bs-btn-hover-bg: var(--csn-red-dark);

  --bs-btn-hover-border-color:
    var(--csn-red-dark);

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg:
    var(--csn-red-dark);

  --bs-btn-active-border-color:
    var(--csn-red-dark);

  padding-inline: 1.2rem;

  box-shadow:
    0 10px 24px
    rgba(239, 63, 58, 0.2);
}

.btn-brand:hover {
  box-shadow:
    0 14px 30px
    rgba(239, 63, 58, 0.28);
}

.btn-outline-brand {
  --bs-btn-color:
    var(--csn-blue-deep);

  --bs-btn-bg: #fff;

  --bs-btn-border-color:
    rgba(13, 47, 115, 0.2);

  --bs-btn-hover-color:
    var(--csn-blue-deep);

  --bs-btn-hover-bg:
    var(--csn-blue-soft);

  --bs-btn-hover-border-color:
    rgba(46, 159, 242, 0.55);

  --bs-btn-active-color:
    var(--csn-blue-deep);

  --bs-btn-active-bg:
    var(--csn-blue-soft);

  --bs-btn-active-border-color:
    rgba(46, 159, 242, 0.55);

  padding-inline: 1.05rem;
}

.btn-whatsapp {
  --bs-btn-color: #fff;

  --bs-btn-bg: #20b958;

  --bs-btn-border-color: #20b958;

  --bs-btn-hover-color: #fff;

  --bs-btn-hover-bg: #179b49;

  --bs-btn-hover-border-color: #179b49;

  --bs-btn-active-color: #fff;

  --bs-btn-active-bg: #179b49;

  --bs-btn-active-border-color: #179b49;

  padding-inline: 1.35rem;

  box-shadow:
    0 10px 24px
    rgba(32, 185, 88, 0.2);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  z-index: 1030;

  min-height:
    var(--csn-header-height);

  border-bottom:
    1px solid rgba(226, 231, 239, 0.9);

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 5px 18px
    rgba(13, 47, 115, 0.045);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.site-header .navbar {
  min-height:
    var(--csn-header-height);

  padding: 0.35rem 0;
}

.navbar-brand {
  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  flex: 0 0 auto;

  margin-right: 1.5rem;

  padding: 0;
}

.navbar-brand img {
  width: 205px;

  max-width: none;

  height: auto;

  max-height: 78px;

  object-fit: contain;

  object-position: left center;
}

.navbar-nav {
  gap: 0.15rem;
}

.navbar-nav .nav-link {
  position: relative;

  padding:
    0.72rem 0.76rem !important;

  color: var(--csn-blue-deep);

  font-size: 0.9rem;

  font-weight: 700;
}

.navbar-nav .nav-link::after {
  position: absolute;

  right: 50%;

  bottom: 0.28rem;

  left: 50%;

  height: 2px;

  border-radius: 999px;

  background: var(--csn-red);

  content: "";

  transition:
    right var(--csn-transition),
    left var(--csn-transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--csn-red);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus-visible::after {
  right: 0.76rem;

  left: 0.76rem;
}

.navbar-toggler {
  width: 44px;

  height: 44px;

  padding: 0.5rem;

  border:
    1px solid var(--csn-border);

  border-radius: 12px;

  background: #fff;

  box-shadow: none !important;
}

.header-actions {
  flex-shrink: 0;
}

.header-actions .btn {
  white-space: nowrap;
}


/* =========================================================
   CENTRAL DO ASSINANTE NO HEADER
========================================================= */

.subscriber-header-action {
  position: relative;
}

.subscriber-desktop-link {
  display: inline-flex;
}

.subscriber-mobile-trigger {
  display: none;
}

.subscriber-mobile-menu {
  width: min(340px, calc(100vw - 28px));

  padding: 0.8rem;

  border:
    1px solid var(--csn-border);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    var(--csn-shadow-md);
}

.subscriber-mobile-menu-header {
  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding:
    0.35rem 0.25rem 0.8rem;

  border-bottom:
    1px solid var(--csn-border);
}

.subscriber-mobile-menu-icon {
  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  color:
    var(--csn-blue-deep);

  background:
    var(--csn-blue-soft);

  font-size: 1rem;
}

.subscriber-mobile-menu-header strong,
.subscriber-mobile-menu-header small {
  display: block;
}

.subscriber-mobile-menu-header strong {
  color:
    var(--csn-blue-deep);

  font-size: 0.92rem;

  font-weight: 800;
}

.subscriber-mobile-menu-header small {
  margin-top: 0.1rem;

  color:
    var(--csn-muted);

  font-size: 0.69rem;
}

.subscriber-mobile-apps {
  display: grid;

  gap: 0.55rem;

  padding-top: 0.7rem;
}

.subscriber-mobile-app {
  display: grid;

  grid-template-columns:
    42px 1fr 18px;

  align-items: center;

  gap: 0.7rem;

  min-height: 62px;

  padding:
    0.65rem 0.7rem;

  border:
    1px solid var(--csn-border);

  border-radius: 13px;

  color:
    var(--csn-blue-deep);

  background:
    #fbfcfe;

  text-decoration: none;

  transition:
    transform var(--csn-transition),
    border-color var(--csn-transition),
    background-color var(--csn-transition);
}

.subscriber-mobile-app:hover,
.subscriber-mobile-app:focus-visible {
  color:
    var(--csn-blue-deep);

  border-color:
    rgba(46,159,242,.45);

  background:
    var(--csn-blue-soft);

  transform:
    translateY(-1px);
}

.subscriber-mobile-app-icon {
  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color: #fff;

  background:
    var(--csn-blue-deep);

  font-size: 1.25rem;
}

.subscriber-mobile-app-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;

  line-height: 1.15;
}

.subscriber-mobile-app-copy small {
  margin-bottom: 0.12rem;

  color:
    var(--csn-muted);

  font-size: 0.62rem;

  font-weight: 600;
}

.subscriber-mobile-app-copy strong {
  font-size: 0.87rem;

  font-weight: 800;
}

.subscriber-mobile-app-arrow {
  color:
    var(--csn-muted);

  font-size: 0.72rem;
}


/* =========================================================
   CIDADES
========================================================= */

.city-trigger {
  min-width: 150px;

  justify-content: flex-start;

  border:
    1px solid var(--csn-border);

  color: var(--csn-blue-deep);

  background: #f9fbfd;
}

.city-trigger::after {
  margin-left: auto;
}

.city-trigger i {
  color: var(--csn-red);
}

.city-menu {
  min-width: 280px;

  padding: 0.55rem;

  border:
    1px solid var(--csn-border);

  border-radius: 16px;

  box-shadow:
    var(--csn-shadow-md);
}

.city-menu .dropdown-header {
  padding:
    0.45rem 0.65rem;

  color: var(--csn-muted);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.city-item {
  display: grid;

  grid-template-columns:
    8px 1fr 18px;

  align-items: center;

  gap: 0.65rem;

  padding: 0.7rem;

  border-radius: 10px;

  color: var(--csn-ink);

  font-size: 0.88rem;
}

.city-item:hover,
.city-item:focus,
.city-item.active {
  color: var(--csn-blue-deep);

  background:
    var(--csn-blue-soft);
}

.city-dot {
  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--csn-blue);
}

.city-check {
  opacity: 0;

  color: var(--csn-red);

  font-size: 0.78rem;
}

.city-item.active .city-check {
  opacity: 1;
}


/* =========================================================
   HERO
   DESKTOP = PREENCHE EXATAMENTE O RESTANTE DA TELA
========================================================= */

.hero-section {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #fff;
}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 992px) {

  .hero-section {
    height:
      calc(
        100vh -
        var(--csn-header-height)
      );

    height:
      calc(
        100dvh -
        var(--csn-header-height)
      );

    min-height: 0;

    max-height:
      calc(
        100vh -
        var(--csn-header-height)
      );

    max-height:
      calc(
        100dvh -
        var(--csn-header-height)
      );
  }

  #heroCarousel {
    width: 100%;

    height: 100%;
  }

  #heroCarousel .carousel-inner {
    width: 100%;

    height: 100%;
  }

  #heroCarousel .carousel-item {
    width: 100%;

    height: 100%;
  }

  #heroCarousel picture {
    width: 100%;

    height: 100%;

    display: block;
  }

  #heroCarousel .hero-image {
    width: 100%;

    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position: center center;
  }

}


/* ---------------------------------------------------------
   TABLET E MOBILE
--------------------------------------------------------- */

@media (max-width: 991.98px) {

  .hero-section {
    height: auto;

    min-height: 0;

    max-height: none;
  }

  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item,
  #heroCarousel picture {
    width: 100%;

    height: auto;
  }

  #heroCarousel picture {
    display: block;
  }

  #heroCarousel .hero-image {
    width: 100%;

    height: auto;

    max-width: 100%;

    display: block;

    object-fit: contain;

    object-position: center center;
  }

}


/* ---------------------------------------------------------
   CONTROLES DO HERO
--------------------------------------------------------- */

.carousel-control-prev,
.carousel-control-next {
  width:
    clamp(
      54px,
      6.8vw,
      88px
    );

  opacity: 1;
}

.hero-control {
  width: 44px;

  height: 44px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius: 50%;

  color: #fff;

  background:
    rgba(8,36,85,.6);

  box-shadow:
    0 8px 22px
    rgba(8,36,85,.2);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:
    transform var(--csn-transition),
    background var(--csn-transition);
}

.carousel-control-prev:hover .hero-control,
.carousel-control-next:hover .hero-control {
  background:
    rgba(8,36,85,.86);

  transform: scale(1.04);
}

.carousel-indicators {
  margin-bottom: 0.8rem;
}

.carousel-indicators [data-bs-target] {
  width: 8px;

  height: 8px;

  margin-inline: 4px;

  border: 0;

  border-radius: 999px;

  opacity: 0.55;
}

.carousel-indicators .active {
  width: 24px;

  opacity: 1;
}


/* =========================================================
   PLANOS
========================================================= */

.section-light,
.about-section {
  background: #fff;
}

.city-context {
  padding:
    0.95rem 1.05rem;

  border:
    1px solid var(--csn-border);

  border-radius: 14px;

  background: #fbfcfe;
}

.city-title {
  color: var(--csn-muted);

  font-size: 0.94rem;

  font-weight: 600;
}

.city-title strong {
  color:
    var(--csn-blue-deep);
}

.coverage-link {
  color: var(--csn-red);

  font-size: 0.86rem;

  font-weight: 800;

  text-decoration: none;
}

.coverage-link i {
  margin-left: 0.25rem;

  transition:
    transform var(--csn-transition);
}

.coverage-link:hover i {
  transform:
    translateX(3px);
}

.plan-card {
  position: relative;

  display: flex;

  flex-direction: column;

  height: 100%;

  padding: 1.5rem;

  border:
    1px solid var(--csn-border);

  border-radius: 22px;

  color: var(--csn-ink);

  background: #fff;

  box-shadow:
    var(--csn-shadow-sm);

  transition:
    transform var(--csn-transition),
    box-shadow var(--csn-transition),
    border-color var(--csn-transition);
}

.plan-card::before {
  position: absolute;

  top: -1px;

  right: 1.5rem;

  left: 1.5rem;

  height: 3px;

  border-radius:
    0 0 999px 999px;

  background:
    var(--csn-blue-deep);

  content: "";
}

.plan-card:hover {
  border-color:
    rgba(46,159,242,.38);

  box-shadow:
    var(--csn-shadow-md);

  transform:
    translateY(-5px);
}

.plan-label {
  display: inline-block;

  margin-bottom: 0.55rem;

  color: var(--csn-red);

  font-size: 0.73rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

.plan-card h3 {
  margin: 0;

  color:
    var(--csn-blue-deep);

  font-size:
    clamp(
      1.8rem,
      2.35vw,
      2.2rem
    );

  font-weight: 800;

  letter-spacing: -0.045em;
}

.plan-price {
  margin:
    0.75rem 0 0;

  color: var(--csn-ink);

  font-size: 1.55rem;

  font-weight: 800;

  line-height: 1;
}

.plan-price span {
  margin-left: 0.28rem;

  color: var(--csn-muted);

  font-size: 0.76rem;

  font-weight: 600;
}

.plan-divider {
  height: 1px;

  margin:
    1.25rem 0;

  background:
    var(--csn-border);
}

.plan-benefits {
  display: grid;

  gap: 0.75rem;

  margin:
    0 0 1.5rem;

  padding: 0;

  list-style: none;
}

.plan-benefits li {
  display: grid;

  grid-template-columns:
    22px 1fr;

  align-items: start;

  gap: 0.55rem;

  color: #526076;

  font-size: 0.86rem;

  line-height: 1.45;
}

.plan-check {
  width: 21px;

  height: 21px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    var(--csn-blue-deep);

  background:
    var(--csn-blue-soft);

  font-size: 0.62rem;
}

.btn-plan {
  --bs-btn-color: #fff;

  --bs-btn-bg:
    var(--csn-blue-deep);

  --bs-btn-border-color:
    var(--csn-blue-deep);

  --bs-btn-hover-color: #fff;

  --bs-btn-hover-bg:
    var(--csn-red);

  --bs-btn-hover-border-color:
    var(--csn-red);
}

.foot-note {
  margin-top: 1.55rem;

  color: var(--csn-muted);

  font-size: 0.77rem;
}


/* =========================================================
   MESH
========================================================= */

.benefits-section {
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  width: 100%;

  min-height:
    calc(
      100svh -
      var(--csn-header-height)
    );

  padding:
    clamp(
      1.25rem,
      3vh,
      2rem
    )
    0;

  color: #fff;

  background:
    linear-gradient(
      120deg,
      #061642 0%,
      #071b4a 42%,
      #0a2864 72%,
      #0d2f73 100%
    );
}

.benefits-section::before {
  position: absolute;

  top: -260px;

  right: -200px;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  pointer-events: none;

  content: "";

  background:
    radial-gradient(
      circle,
      rgba(46,159,242,.12) 0%,
      rgba(46,159,242,.03) 45%,
      transparent 70%
    );
}

.benefits-section > .container {
  position: relative;

  z-index: 1;

  width: 100%;
}

.benefits-section .section-heading {
  margin-bottom: 1.5rem;
}

.benefits-section .section-kicker,
.benefits-section .section-title {
  color: #fff;
}

.benefits-section .section-description {
  color:
    rgba(221,232,252,.72);
}

.benefits-section .text-accent {
  color: #74c6ff;
}

.mesh-panel {
  position: relative;

  overflow: hidden;

  width: 100%;

  height:
    clamp(
      540px,
      calc(
        100svh -
        var(--csn-header-height) -
        52px
      ),
      620px
    );

  border: 0;

  border-radius: 24px;

  background:
    var(--mesh-blue);

  box-shadow:
    0 22px 55px
    rgba(0,9,35,.22);
}

.mesh-panel > .row {
  height: 100%;

  margin: 0;
}

.mesh-panel > .row > [class*="col-"] {
  height: 100%;

  padding: 0;
}

.mesh-media {
  position: relative;

  width: 100%;

  height: 100%;

  min-height: 0;

  overflow: hidden;

  background:
    var(--mesh-blue-deep);
}

.mesh-media::after {
  display: none !important;
}

.mesh-media::before {
  position: absolute;

  top: 0;

  right: -2px;

  bottom: 0;

  z-index: 2;

  width: 100px;

  pointer-events: none;

  content: "";

  background:
    linear-gradient(
      90deg,
      rgba(7,27,74,0) 0%,
      rgba(7,27,74,.08) 25%,
      rgba(7,27,74,.4) 62%,
      var(--mesh-blue) 100%
    );
}

.mesh-media img {
  width: 100%;

  height: 100%;

  min-height: 0;

  object-fit: cover;

  object-position:
    center 48%;

  transform:
    scale(1.005);
}

.mesh-content {
  position: relative;

  width: 100%;

  height: 100%;

  min-height: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    clamp(
      1.7rem,
      3.2vw,
      3rem
    );

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--mesh-blue) 0%,
      #08235c 55%,
      var(--mesh-blue-light) 100%
    );
}

.mesh-content::before {
  position: absolute;

  top: -130px;

  right: -140px;

  width: 330px;

  height: 330px;

  border-radius: 50%;

  pointer-events: none;

  content: "";

  background:
    radial-gradient(
      circle,
      rgba(46,159,242,.12),
      transparent 68%
    );
}

.mesh-content > * {
  position: relative;

  z-index: 1;
}

.feature-badge {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 0.42rem;

  margin-bottom: 0.9rem;

  padding:
    0.4rem 0.7rem;

  border:
    1px solid
    rgba(96,190,255,.28);

  border-radius: 999px;

  color: #c6eaff;

  background:
    rgba(46,159,242,.1);

  font-size: 0.7rem;

  font-weight: 800;
}

.feature-badge i {
  color: #69c5ff;
}

.mesh-content h3 {
  max-width: 460px;

  margin: 0;

  color: #fff;

  font-size:
    clamp(
      2rem,
      3.1vw,
      2.75rem
    );

  font-weight: 800;

  letter-spacing: -0.052em;

  line-height: 1.05;
}

.mesh-lead {
  max-width: 500px;

  margin:
    0.85rem 0 0;

  color:
    rgba(222,232,250,.75);

  font-size: 0.91rem;

  line-height: 1.65;
}

.feature-list,
.about-list {
  display: grid;

  padding: 0;

  list-style: none;
}

.feature-list {
  gap: 0;

  margin:
    1.15rem 0 1.35rem;
}

.feature-list li {
  display: grid;

  grid-template-columns:
    31px 1fr;

  align-items: start;

  gap: 0.72rem;

  padding:
    0.67rem 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.1);
}

.feature-list li:last-child {
  border-bottom: 0;
}

.feature-list strong {
  display: block;

  margin-bottom: 0.05rem;

  color: #fff;

  font-size: 0.84rem;

  font-weight: 750;
}

.feature-list small {
  display: block;

  color:
    rgba(211,225,251,.68);

  font-size: 0.76rem;

  line-height: 1.4;
}

.check-icon {
  width: 27px;

  height: 27px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(97,192,255,.23);

  border-radius: 8px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #1875d1,
      #0d438e
    );

  box-shadow:
    0 5px 14px
    rgba(0,0,0,.11);

  font-size: 0.65rem;
}

.mesh-content .btn-brand {
  width: fit-content;

  min-height: 44px;

  padding:
    0.7rem 1.25rem;

  font-size: 0.84rem;
}


/* =========================================================
   OXENTV
========================================================= */

.oxentv-section {
  position: relative;

  overflow: hidden;

  padding:
    clamp(
      3.6rem,
      6vw,
      5rem
    )
    0
    2.2rem;

  color: #fff;

  background:
    linear-gradient(
      125deg,
      #d8322f 0%,
      var(--csn-red) 48%,
      #f24b46 100%
    );
}

.oxentv-section::before {
  position: absolute;

  top: -260px;

  right: -180px;

  width: 560px;

  height: 560px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 50%;

  pointer-events: none;

  content: "";
}

.oxentv-section::after {
  position: absolute;

  bottom: -280px;

  left: -240px;

  width: 540px;

  height: 540px;

  border-radius: 50%;

  pointer-events: none;

  content: "";

  background:
    radial-gradient(
      circle,
      rgba(124,0,0,.13),
      transparent 70%
    );
}

.oxentv-container {
  position: relative;

  z-index: 2;
}

.oxentv-main-row {
  min-height: 480px;
}


/* =========================================================
   OXENTV TEXTO
========================================================= */

.oxentv-content {
  max-width: 570px;
}

.oxentv-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  margin-bottom: 1.2rem;

  color:
    rgba(255,255,255,.82);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.oxentv-eyebrow::before {
  width: 24px;

  height: 2px;

  border-radius: 999px;

  background: #fff;

  content: "";
}

.oxentv-logo {
  width:
    min(
      250px,
      66vw
    );

  height: auto;

  margin-bottom: 1.35rem;

  object-fit: contain;

  object-position: left center;

  filter:
    drop-shadow(
      0 12px 20px
      rgba(112,0,0,.16)
    );
}

.oxentv-content h2 {
  max-width: 550px;

  margin:
    0 0 0.85rem;

  color: #fff;

  font-size:
    clamp(
      2.1rem,
      4vw,
      3.15rem
    );

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 1.03;
}

.oxentv-highlight {
  max-width: 550px;

  margin:
    0 0 0.65rem;

  color: #fff;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.12rem
    );

  font-weight: 700;

  line-height: 1.55;
}

.oxentv-description {
  max-width: 540px;

  margin:
    0 0 1.55rem;

  color:
    rgba(255,255,255,.82);

  font-size: 0.93rem;

  line-height: 1.72;
}


/* =========================================================
   OXENTV LOJAS
========================================================= */

.oxentv-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;

  margin-bottom: 0.85rem;
}

.ox-store-button {
  min-width: 184px;

  min-height: 59px;

  display: flex;

  align-items: center;

  gap: 0.72rem;

  padding:
    0.6rem 0.9rem;

  border:
    1px solid
    rgba(255,255,255,.3);

  border-radius: 12px;

  color: #fff;

  background:
    rgba(121,13,12,.26);

  text-decoration: none;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transition:
    transform var(--csn-transition),
    background var(--csn-transition),
    border-color var(--csn-transition);
}

.ox-store-button:hover {
  color: var(--csn-red);

  border-color: #fff;

  background: #fff;

  transform: translateY(-2px);
}

.ox-store-icon {
  width: 34px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  font-size: 1.55rem;
}

.ox-store-copy {
  display: flex;

  flex-direction: column;

  line-height: 1.12;
}

.ox-store-copy small {
  margin-bottom: 0.13rem;

  color:
    rgba(255,255,255,.68);

  font-size: 0.62rem;
}

.ox-store-button:hover
.ox-store-copy small {
  color:
    rgba(216,47,43,.7);
}

.ox-store-copy strong {
  font-size: 0.94rem;

  font-weight: 700;
}

.oxentv-browser-link {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-top: 0.45rem;

  color:
    rgba(255,255,255,.8);

  font-size: 0.81rem;

  font-weight: 700;

  text-decoration: none;

  transition:
    color var(--csn-transition);
}

.oxentv-browser-link:hover {
  color: #fff;
}

.oxentv-browser-link
.fa-arrow-right {
  font-size: 0.68rem;

  transition:
    transform var(--csn-transition);
}

.oxentv-browser-link:hover
.fa-arrow-right {
  transform:
    translateX(4px);
}


/* =========================================================
   OXENTV CELULARES
========================================================= */

.oxentv-visual {
  position: relative;

  min-height: 460px;

  display: grid;

  place-items: center;
}

.oxentv-circle {
  position: absolute;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 50%;

  pointer-events: none;
}

.oxentv-circle-one {
  width: 390px;

  height: 390px;
}

.oxentv-circle-two {
  width: 300px;

  height: 300px;

  border-color:
    rgba(255,255,255,.075);
}

.oxentv-device-card {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      440px
    );

  display: grid;

  place-items: center;

  animation:
    oxenPhoneFloat
    4.2s
    ease-in-out
    infinite
    alternate;

  transform-origin: center;
}

.oxentv-devices {
  width:
    min(
      100%,
      390px
    );

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 30px 38px
      rgba(113,0,0,.30)
    );
}

.oxentv-watermark {
  position: absolute;

  right: -10px;

  bottom: 20px;

  z-index: 0;

  color:
    rgba(255,255,255,.045);

  font-size:
    clamp(
      8rem,
      17vw,
      14rem
    );

  font-weight: 900;

  letter-spacing: -0.08em;

  line-height: 0.8;

  pointer-events: none;

  user-select: none;
}

@keyframes oxenPhoneFloat {

  from {
    transform:
      translateY(8px)
      rotate(-1deg);
  }

  to {
    transform:
      translateY(-11px)
      rotate(1deg);
  }

}


/* =========================================================
   CARROSSEL DE CANAIS
========================================================= */

.channels-section {
  position: relative;

  margin-top: 1.5rem;

  padding-top: 1.35rem;

  border-top:
    1px solid
    rgba(255,255,255,.16);
}

.channels-heading {
  display: flex;

  align-items: center;

  gap: 0.7rem;

  margin-bottom: 1rem;

  color:
    rgba(255,255,255,.75);

  font-size: 0.69rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.channels-line {
  width: 24px;

  height: 2px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.78);
}

.channels-marquee {
  --marquee-gap: 2.35rem;

  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    0.75rem 0 1rem;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
}

.channels-marquee-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap:
    var(--marquee-gap);

  animation:
    channelMarquee
    30s
    linear
    infinite;

  will-change: transform;
}

.channels-marquee:hover
.channels-marquee-track {
  animation-play-state: paused;
}

.channels-marquee-group {
  flex: 0 0 auto;

  display: flex;

  align-items: center;

  gap:
    var(--marquee-gap);
}

.channel-logo-item {
  width: 115px;

  height: 62px;

  flex:
    0 0 115px;

  display: grid;

  place-items: center;

  padding: 0.55rem;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 14px;

  background:
    rgba(118,7,7,.12);

  transition:
    transform var(--csn-transition),
    background var(--csn-transition),
    border-color var(--csn-transition);
}

.channel-logo-item:hover {
  border-color:
    rgba(255,255,255,.26);

  background:
    rgba(255,255,255,.08);

  transform:
    translateY(-3px);
}

.channel-logo-item img {
  width: auto;

  max-width: 88px;

  height: auto;

  max-height: 42px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 6px 12px
      rgba(93,0,0,.16)
    );
}

@keyframes channelMarquee {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        calc(
          -50% -
          var(--marquee-gap) / 2
        ),
        0,
        0
      );
  }

}


/* =========================================================
   LOCALIZAÇÃO
========================================================= */

.location-section {
  background:
    var(--csn-bg);
}

.surface-card,
.contact-info-card {
  border:
    1px solid
    var(--csn-border);

  border-radius: 22px;

  background: #fff;

  box-shadow:
    var(--csn-shadow-sm);
}

.surface-card {
  overflow: hidden;

  padding: 1rem;
}

.map-frame-wrapper {
  overflow: hidden;

  border-radius: 16px;

  background:
    var(--csn-blue-soft);
}

.map-frame-wrapper iframe {
  width: 100%;

  height: 100%;

  border: 0;
}

.map-address {
  padding:
    1.2rem 0.45rem 0.3rem;
}

.map-address small,
.regional-phone-list small {
  display: block;

  margin-bottom: 0.15rem;

  color: var(--csn-muted);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.map-address p {
  color: var(--csn-ink);

  font-size: 0.9rem;

  font-weight: 650;
}

.info-icon {
  width: 42px;

  height: 42px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 12px;

  color:
    var(--csn-blue-deep);

  background:
    var(--csn-blue-soft);
}

.contact-location-card {
  padding: 1.6rem;
}

.card-title-row {
  display: flex;

  align-items: center;

  gap: 0.8rem;
}

.card-title-row
.card-eyebrow {
  margin-bottom: 0.12rem;

  font-size: 0.66rem;
}

.card-title-row h3 {
  margin: 0;

  color:
    var(--csn-blue-deep);

  font-size: 1.3rem;

  font-weight: 800;
}

.regional-phone-list {
  display: grid;

  gap: 0.7rem;

  margin:
    1.35rem 0 0;

  padding: 0;

  list-style: none;
}

.regional-phone-list li {
  display: grid;

  grid-template-columns:
    40px 1fr;

  align-items: center;

  gap: 0.75rem;

  padding: 0.8rem;

  border:
    1px solid
    var(--csn-border);

  border-radius: 13px;

  background: #fbfcfe;
}

.phone-icon {
  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color:
    var(--csn-red);

  background:
    var(--csn-red-soft);
}

.regional-phone-list a {
  color:
    var(--csn-blue-deep);

  font-size: 0.94rem;

  font-weight: 800;

  text-decoration: none;
}

.regional-phone-list a:hover {
  color:
    var(--csn-red);
}

.company-data {
  margin-top: 1.45rem;

  padding-top: 1.35rem;

  border-top:
    1px solid
    var(--csn-border);
}

.company-data
.card-eyebrow {
  margin-bottom: 0.45rem;

  font-size: 0.66rem;
}

.company-data p {
  margin-bottom: 1.15rem;

  color: var(--csn-muted);

  font-size: 0.79rem;

  line-height: 1.62;
}

.company-data strong {
  color:
    var(--csn-blue-deep);
}

.anatel-block {
  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.78rem;

  border-radius: 13px;

  background:
    var(--csn-bg);
}

.anatel-logo {
  width: 60px;

  height: auto;
}

.anatel-block small {
  color: var(--csn-muted);

  font-size: 0.66rem;

  font-weight: 700;
}


/* =========================================================
   SOBRE
========================================================= */

.about-copy
.section-title {
  max-width: 720px;
}

.about-list {
  gap: 0.8rem;

  margin:
    1.55rem 0 1.8rem;

  color:
    var(--csn-muted);
}

.about-list li {
  display: grid;

  grid-template-columns:
    30px 1fr;

  align-items: center;

  gap: 0.75rem;
}

.check-icon-light {
  color:
    var(--csn-red);

  border-color:
    rgba(239,63,58,.15);

  background:
    var(--csn-red-soft);

  box-shadow: none;
}

.about-visual {
  position: relative;

  overflow: hidden;

  min-height: 350px;

  display: grid;

  place-items: center;

  padding: 2rem;

  border-radius:
    var(--csn-radius-lg);

  color: #fff;

  background:
    var(--csn-blue-deep);

  box-shadow:
    var(--csn-shadow-md);
}

.about-visual::after {
  position: absolute;

  right: -80px;

  bottom: -90px;

  width: 220px;

  height: 220px;

  border:
    34px solid
    rgba(255,255,255,.06);

  border-radius: 50%;

  content: "";
}

.about-mark {
  position: absolute;

  top: -18px;

  right: 18px;

  color:
    rgba(255,255,255,.055);

  font-size:
    clamp(
      7rem,
      13vw,
      11rem
    );

  font-weight: 800;

  letter-spacing: -0.08em;

  line-height: 1;

  user-select: none;
}

.about-visual-content {
  position: relative;

  z-index: 1;

  max-width: 280px;

  display: grid;

  justify-items: center;

  text-align: center;
}

.about-icon {
  width: 66px;

  height: 66px;

  display: grid;

  place-items: center;

  margin-bottom: 1rem;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 18px;

  background:
    rgba(255,255,255,.1);

  font-size: 1.45rem;
}

.about-visual-content strong {
  font-size: 1.4rem;

  font-weight: 800;
}

.about-visual-content small {
  margin-top: 0.42rem;

  color:
    rgba(255,255,255,.74);

  font-size: 0.8rem;
}


/* =========================================================
   CONTATO
========================================================= */

.contact-section {
  background:
    #f2f5fa;
}

.contact-form,
.contact-info-card {
  padding:
    clamp(
      1.3rem,
      3vw,
      1.9rem
    );
}

.contact-form {
  border:
    1px solid
    var(--csn-border);

  border-radius: 22px;

  background: #fff;

  box-shadow:
    var(--csn-shadow-sm);
}

.form-label {
  margin-bottom: 0.42rem;

  color:
    var(--csn-blue-deep);

  font-size: 0.82rem;

  font-weight: 800;
}

.optional-label {
  margin-left: 0.22rem;

  color:
    var(--csn-muted);

  font-size: 0.68rem;

  font-weight: 600;
}

.form-control {
  min-height: 48px;

  border-color:
    var(--csn-border);

  border-radius: 11px;

  color:
    var(--csn-ink);

  background: #fbfcfe;

  font-size: 0.9rem;
}

textarea.form-control {
  min-height: 124px;

  resize: vertical;
}

.form-control::placeholder {
  color: #9ca5b4;
}

.form-control:focus {
  border-color:
    rgba(46,159,242,.72);

  box-shadow:
    0 0 0 0.22rem
    rgba(46,159,242,.12);
}

.privacy-note {
  margin-top: 0.75rem;

  color:
    var(--csn-muted);

  font-size: 0.7rem;
}

.contact-info-card {
  transition:
    transform var(--csn-transition),
    box-shadow var(--csn-transition);
}

.contact-info-card:hover {
  box-shadow:
    var(--csn-shadow-md);

  transform:
    translateY(-3px);
}

.contact-info-card h3 {
  margin:
    0.95rem 0 0.5rem;

  color:
    var(--csn-blue-deep);

  font-size: 1.2rem;

  font-weight: 800;
}

.contact-info-card p {
  color:
    var(--csn-muted);

  font-size: 0.86rem;
}

.contact-link {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  margin-top: 0.65rem;

  color:
    var(--csn-blue-deep);

  font-size: 0.86rem;

  font-weight: 800;

  text-decoration: none;
}

.contact-link i {
  width: 20px;

  color:
    var(--csn-red);
}

.contact-link:hover {
  color:
    var(--csn-red);
}

.contact-info-card-accent {
  border-color:
    rgba(46,159,242,.22);

  background:
    #fbfdff;
}

.subscriber-app-links {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 0.65rem;

  margin:
    1rem 0 0.75rem;
}

.subscriber-app-button {
  min-height: 60px;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  padding:
    0.65rem 0.75rem;

  border:
    1px solid
    var(--csn-border);

  border-radius: 12px;

  color:
    var(--csn-blue-deep);

  background: #fff;

  text-decoration: none;

  transition:
    transform var(--csn-transition),
    border-color var(--csn-transition),
    background-color var(--csn-transition),
    box-shadow var(--csn-transition);
}

.subscriber-app-button:hover {
  color:
    var(--csn-blue-deep);

  border-color:
    rgba(46,159,242,.48);

  background:
    var(--csn-blue-soft);

  box-shadow:
    0 8px 20px
    rgba(13,47,115,.08);

  transform:
    translateY(-2px);
}

.subscriber-app-button > i {
  width: 28px;

  flex: 0 0 28px;

  text-align: center;

  font-size: 1.45rem;
}

.subscriber-app-button > span {
  min-width: 0;

  display: flex;

  flex-direction: column;

  line-height: 1.15;
}

.subscriber-app-button small {
  margin-bottom: 0.12rem;

  color:
    var(--csn-muted);

  font-size: 0.6rem;

  font-weight: 600;
}

.subscriber-app-button strong {
  font-size: 0.82rem;

  font-weight: 800;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  padding:
    3.8rem 0 3rem;

  color: #d9e2ff;

  background:
    var(--csn-blue-darker);
}

.footer-logo {
  width: auto;

  height: 46px;

  margin-bottom: 1rem;
}

.footer-copy {
  max-width: 460px;

  color:
    rgba(217,226,255,.76);

  font-size: 0.88rem;
}

.footer-legal {
  color:
    rgba(217,226,255,.56);

  font-size: 0.7rem;

  line-height: 1.7;
}

.footer-title {
  margin-bottom: 0.95rem;

  color: #fff;

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.footer-nav {
  display: grid;

  gap: 0.52rem;
}

.footer-nav a {
  width: fit-content;

  color:
    rgba(217,226,255,.74);

  font-size: 0.84rem;

  text-decoration: none;

  transition:
    color var(--csn-transition),
    transform var(--csn-transition);
}

.footer-nav a:hover {
  color: #fff;

  transform:
    translateX(2px);
}

.footer-social {
  display: flex;

  gap: 0.6rem;
}

.footer-social a {
  width: 40px;

  height: 40px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 12px;

  color: #fff;

  background:
    rgba(255,255,255,.05);

  text-decoration: none;

  transition:
    transform var(--csn-transition),
    background var(--csn-transition);
}

.footer-social a:hover {
  background:
    var(--csn-red);

  transform:
    translateY(-2px);
}


/* =========================================================
   FLUTUANTES
========================================================= */

.floating-whatsapp,
.back-to-top {
  position: fixed;

  right: 18px;

  z-index: 1020;

  display: grid;

  place-items: center;

  color: #fff;

  box-shadow:
    0 12px 30px
    rgba(8,36,85,.22);
}

.floating-whatsapp {
  bottom: 18px;

  width: 56px;

  height: 56px;

  border-radius: 18px;

  background: #25d366;

  font-size: 1.45rem;

  text-decoration: none;

  transition:
    transform var(--csn-transition),
    box-shadow var(--csn-transition);
}

.floating-whatsapp:hover {
  color: #fff;

  transform:
    translateY(-3px);
}

.back-to-top {
  bottom: 84px;

  width: 42px;

  height: 42px;

  border: 0;

  border-radius: 13px;

  background:
    var(--csn-blue-deep);

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(7px);

  transition:
    opacity var(--csn-transition),
    transform var(--csn-transition);
}

.back-to-top.show {
  opacity: 1;

  pointer-events: auto;

  transform: none;
}


/* =========================================================
   TOAST
========================================================= */

.toast {
  border-radius: 13px;

  color:
    var(--csn-blue-deep);

  background: #fff;

  box-shadow:
    var(--csn-shadow-md);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 650ms ease,
    transform
    650ms
    cubic-bezier(.2,.75,.25,1);
}

.reveal.is-visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   NOTEBOOK
========================================================= */

@media (max-width: 1199.98px) {

  :root {
    --csn-header-height: 80px;
  }

  .navbar-brand {
    margin-right: 1rem;
  }

  .navbar-brand img {
    width: 178px;

    height: auto;

    max-height: 66px;
  }

  .navbar-collapse {
    max-height:
      calc(
        100vh -
        var(--csn-header-height)
      );

    overflow-y: auto;

    padding:
      0.9rem 0 0.4rem;
  }

  .navbar-nav {
    margin-bottom:
      0.9rem !important;

    padding: 0.4rem;

    border:
      1px solid
      var(--csn-border);

    border-radius: 16px;

    background: #fbfcfe;
  }

  .navbar-nav
  .nav-link::after {
    display: none;
  }

  .header-actions {
    padding-bottom: 0.65rem;
  }

  .header-actions > * {
    flex: 1 1 auto;
  }

  .city-trigger,
  .header-actions .btn {
    width: 100%;
  }

  .subscriber-desktop-link {
    display: none;
  }

  .subscriber-mobile-trigger {
    display: inline-flex;
  }

  .subscriber-header-action {
    width: 100%;
  }

  .subscriber-mobile-menu {
    width: 100%;
  }

  .city-menu {
    width: 100%;
  }

  .mesh-panel {
    height:
      clamp(
        520px,
        calc(
          100svh -
          var(--csn-header-height) -
          44px
        ),
        590px
      );
  }

  .oxentv-visual {
    min-height: 420px;
  }

  .oxentv-device-card {
    width:
      min(
        100%,
        410px
      );
  }

  .oxentv-devices {
    width:
      min(
        100%,
        360px
      );
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .section-heading {
    margin-bottom: 2.25rem;
  }

  .benefits-section {
    min-height: auto;

    padding:
      3rem 0;
  }

  .mesh-panel {
    height: auto;

    border-radius: 22px;
  }

  .mesh-panel > .row,
  .mesh-panel > .row > [class*="col-"] {
    height: auto;
  }

  .mesh-media {
    height: auto;

    aspect-ratio:
      16 / 10;
  }

  .mesh-media img {
    width: 100%;

    height: 100%;
  }

  .mesh-media::before {
    top: auto;

    right: 0;

    bottom: -1px;

    left: 0;

    width: auto;

    height: 90px;

    background:
      linear-gradient(
        180deg,
        rgba(7,27,74,0),
        rgba(7,27,74,.25) 45%,
        var(--mesh-blue)
      );
  }

  .mesh-content {
    height: auto;

    padding: 2.2rem;
  }

  .oxentv-section {
    padding:
      4rem 0 2rem;
  }

  .oxentv-main-row {
    min-height: auto;
  }

  .oxentv-content {
    max-width: 680px;

    margin-inline: auto;

    text-align: center;
  }

  .oxentv-logo {
    margin-inline: auto;
  }

  .oxentv-content h2,
  .oxentv-highlight,
  .oxentv-description {
    margin-inline: auto;
  }

  .oxentv-actions {
    justify-content: center;
  }

  .oxentv-browser-link {
    margin-inline: auto;
  }

  .oxentv-visual {
    min-height: 340px;
  }

  .oxentv-device-card {
    width:
      min(
        100%,
        390px
      );
  }

  .oxentv-devices {
    width:
      min(
        100%,
        340px
      );
  }

  .oxentv-watermark {
    right: 50%;

    transform:
      translateX(50%);
  }

  .channels-section {
    margin-top: 0.8rem;
  }

  .about-visual {
    min-height: 300px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .section {
    padding:
      4.15rem 0;
  }

  .section-title {
    font-size:
      clamp(
        1.8rem,
        8vw,
        2.3rem
      );
  }

  .hero-control {
    width: 36px;

    height: 36px;

    font-size: 0.82rem;
  }

  .benefits-section {
    padding:
      2rem 0;
  }

  .mesh-panel {
    border-radius: 20px;
  }

  .mesh-media {
    aspect-ratio:
      1 / 1;
  }

  .mesh-content {
    padding:
      1.8rem
      1.5rem
      2rem;
  }

  .mesh-content h3 {
    font-size: 2rem;
  }

  .mesh-content
  .btn-brand {
    width: 100%;
  }

  .oxentv-section {
    padding:
      3.5rem 0 1.7rem;
  }

  .oxentv-logo {
    width:
      min(
        230px,
        68vw
      );
  }

  .oxentv-content h2 {
    font-size:
      clamp(
        2rem,
        8vw,
        2.6rem
      );
  }

  .oxentv-actions {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 0.6rem;
  }

  .ox-store-button {
    min-width: 0;

    width: 100%;

    min-height: 58px;

    padding:
      0.6rem 0.7rem;
  }

  .ox-store-icon {
    width: 28px;

    font-size: 1.35rem;
  }

  .ox-store-copy strong {
    font-size: 0.86rem;
  }

  .oxentv-visual {
    min-height: 290px;
  }

  .oxentv-device-card {
    width:
      min(
        92%,
        340px
      );
  }

  .oxentv-devices {
    width:
      min(
        100%,
        300px
      );
  }

  .oxentv-circle-one {
    width: 280px;

    height: 280px;
  }

  .oxentv-circle-two {
    width: 210px;

    height: 210px;
  }

  .channels-marquee {
    --marquee-gap: 1.25rem;
  }

  .channel-logo-item {
    width: 100px;

    height: 56px;

    flex-basis: 100px;
  }

  .channel-logo-item img {
    max-width: 76px;

    max-height: 36px;
  }

  .about-visual {
    min-height: 260px;
  }

  .site-footer {
    padding-bottom: 6.2rem;
  }

  .floating-whatsapp,
  .back-to-top {
    right: 14px;
  }

  .floating-whatsapp {
    bottom: 14px;

    width: 52px;

    height: 52px;

    border-radius: 16px;
  }

  .back-to-top {
    bottom: 76px;
  }

}


@media (min-width: 576px) {

  .w-sm-auto {
    width: auto !important;
  }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 575.98px) {

  :root {
    --csn-header-height: 72px;
  }

  .site-header .navbar {
    min-height:
      var(--csn-header-height);

    padding-block: 0.25rem;
  }

  .navbar-brand {
    margin-right: auto;
  }

  .navbar-brand img {
    width: 150px;

    height: auto;

    max-height: 58px;
  }

  .navbar-toggler {
    width: 42px;

    height: 42px;
  }

  .header-actions {
    flex-direction:
      column !important;
  }

  .city-menu {
    min-width: 100%;
  }

  .section-heading.text-center {
    text-align:
      left !important;
  }

  .section-heading.text-center
  .section-description {
    margin-inline: 0;
  }

  .plan-card {
    padding: 1.35rem;
  }

  .mesh-panel {
    border-radius: 18px;
  }

  .mesh-content {
    padding:
      1.6rem
      1.3rem
      1.75rem;
  }

  .mesh-content h3 {
    font-size: 1.85rem;
  }

  .oxentv-content {
    text-align: left;
  }

  .oxentv-logo,
  .oxentv-content h2,
  .oxentv-highlight,
  .oxentv-description,
  .oxentv-browser-link {
    margin-inline: 0;
  }

  .oxentv-actions {
    grid-template-columns: 1fr;
  }

  .ox-store-button {
    max-width: 100%;
  }

  .oxentv-visual {
    min-height: 260px;
  }

  .channels-heading {
    justify-content: center;

    text-align: center;
  }

  .channels-line {
    display: none;
  }

  .channels-marquee {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent
      );

    mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent
      );
  }

  .anatel-block {
    align-items:
      flex-start;
  }

  .contact-form,
  .contact-info-card {
    border-radius: 18px;
  }

  .subscriber-app-links {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   CELULAR PEQUENO
========================================================= */

@media (max-width: 360px) {

  .container {
    --bs-gutter-x: 1.25rem;
  }

  .navbar-brand img {
    width: 138px;

    max-height: 54px;
  }

  .section {
    padding:
      3.7rem 0;
  }

  .mesh-content {
    padding:
      1.45rem 1.1rem;
  }

  .mesh-content h3 {
    font-size: 1.65rem;
  }

  .channel-logo-item {
    width: 92px;

    height: 52px;

    flex-basis: 92px;
  }

  .channel-logo-item img {
    max-width: 70px;

    max-height: 34px;
  }

  .contact-location-card,
  .surface-card {
    padding: 0.85rem;
  }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }

  .channels-marquee-track {
    animation: none;

    flex-wrap: wrap;

    width: 100%;
  }

  .channels-marquee-group[aria-hidden="true"] {
    display: none;
  }

}