@import "tailwindcss";
@import "../libs/swiper/swiper-bundle.min.css";
@import "../libs/aos/aos.css";

html,
body {
  @apply scroll-smooth;
}

body {
  @apply bg-(--secondary) font-display lining-nums proportional-nums overflow-x-hidden;
}

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
}

@theme {
  /* FONTS */
  --font-display: "Ubuntu", "sans-serif";
  --font-display-2: "Bebas Neue", "sans-serif";
  --font-display-3: "Bebas Neue Pro", "sans-serif";
  /* COLORS */
  --primary: #8e0429;
  --secondary: #f4f4f4;
  --tertiary: #f4cb1c;
  --quartenary: #101010;
  --quinary: #a238ff;
  --senary: #9816a2;
  --septenary: rgba(16, 16, 16, 0.25);
  --octonary: #25d366;
  --nonary: #c00537;
  --primary-2: #016ce0;
  --secondary-2: #f4f4f4;
  --tertiary-2: #001166;
  --quartenary-2: #101010;
  --quinary-2: #a238ff;
  --senary-2: #9816a2;
  --septenary-2: rgba(16, 16, 16, 0.25);
  --octonary-2: #25d366;
  --nonary-2: #c00537;

  --default: #ffffff;
  --default-2: #000000;
  --light: #edf1f6;
  --dark: #616161;
  --danger: #f6b3b3;
  --sucess: #bbe4b0;
  /* SHADOW */
  --3xl: 2.21px 2.21px 3.683px 0 rgba(0, 0, 0, 0.3);
  --4xl: 0.25px 0.5px 3px 0 rgba(0, 0, 0, 0.25) inset;
  --5xl: 0 1.473px 4.42px 0 rgba(0, 0, 0, 0.15);
  --6xl: 0px 0px 3px 3px #8e0429 inset;
  --7xl: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  --8xl: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  /* DROP-SHADOW */
  --drop-shadow: 3px 6px 6px rgba(0, 0, 0, 0.2);
  /* Bg-image */
  --arrow: url("/upload/assets/images/arrow.svg");
  --bg-back: url("/upload/assets/images/bg-back.png");
  --bg-back-2: url("/upload/assets/images/bg-back-2.png");
  --arrow-d: url("/upload/assets/images/arrow-d.svg");
  --bg-primary: 180deg, #8e0429 0%, #6c0420 100%;
  --bg-primary-2: 180deg, #016 0%, #016ce0 100%;
  --bg-secondary: 17deg, #8e0429 75%, #b4123e 100%;
  --bg-secondary-2: 17deg, #016 75%, #016ce0 100%;
  --bg-tertiary: 0deg, #101010 0%, rgba(0, 0, 0, 0) 100%;
  --bg-tertiary-2: 270deg, #016ce0 0%, #016 100%;
  --bg-container: 0deg, #016 0%, #0064ff 100%;
  --disney: 180deg, #026470 0%, #042434 100%;
  --bg-premiere: 180deg, #1b113d 0%, #2e903c 100%;
  --bg-rupi: 0deg, #00c6ae 0%, #006054 100%;
}

@font-face {
  font-family: "Bebas Neue";
  src: url("/upload/assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue Pro";
  src: url("/upload/assets/fonts/Bebas-Neue-Pro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("/upload/assets/fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

a {
  &:hover {
    figure img:not(.not-transition),
    picture img:not(.not-transition) {
      @apply scale-105 transition-all ease-in;
    }
  }

  figure,
  picture {
    @apply overflow-hidden rounded-[5px];

    img {
      @apply max-w-full scale-100 transition-all ease-out;
    }
  }
}

.section-title {
  @apply relative z-10 max-sm:text-center max-w-[970px] m-auto;

  h1,
  h2,
  h3 {
    @apply text-(--secondary) italic font-bold text-4xl mb-[7px] max-sm:text-2xl;
  }

  p {
    @apply text-(--tertiary) text-base font-light m-0 leading-[normal];
  }

  &.--primary {
    h2 {
      @apply text-(--primary);
    }

    p {
      @apply text-(--quartenary);
    }
  }
}

.btn {
  @apply inline-flex items-center justify-center bg-(--tertiary) rounded-[5px] text-2xl leading-[normal] font-normal uppercase px-8 py-[3px] font-display-2 z-10 transition-all ease-in hover:text-(--secondary) hover:bg-(--nonary);

  img {
    @apply transition-all ease-in;
  }

  &.--primary {
    @apply text-(--primary) text-[28px] gap-2.5 w-full max-w-[720px] py-2 max-sm:text-lg;

    &:hover {
      @apply text-(--secondary);

      img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(2%)
          saturate(5013%) hue-rotate(342deg) brightness(113%) contrast(101%);
      }
    }
  }
}

#page {
  @apply min-h-[60dvh] overflow-hidden;
}

.container {
  @apply xl:max-w-[1072px];
}

/* HEADER */
.header {
  @apply bg-(--primary) py-3.5;
}

.home-b2b {
  .service {
    @apply bg-(--secondary-2);

    .service-list__item {
      @apply border-(--tertiary-2);

      span {
        @apply text-(--tertiary-2) max-w-full;
      }

      figure {
        @apply flex items-center justify-center h-10 bg-(--tertiary-2) rounded-full w-full max-w-10;

        img {
          @apply min-w-auto;
        }
      }
    }
  }

  .social-media {
    @apply bg-(--tertiary-2);

    .social-media__item {
      figure {
        img {
          filter: brightness(0) saturate(100%) invert(7%) sepia(48%)
            saturate(6938%) hue-rotate(230deg) brightness(95%) contrast(111%);
        }
      }
    }
  }

  .info-container {
    @apply bg-linear-(--bg-primary-2);

    &.--secondary {
      @apply before:content-none bg-linear-(--bg-container) pt-[75px];
    }
  }

  .card-container {
    @apply bg-linear-(--bg-secondary-2) max-w-[310px];

    .tag-block {
      @apply text-(--tertiary-2) font-display-3 italic;
    }
  }

  .premium-block {
    @apply px-6 h-[210px];

    p {
      @apply mt-0 text-(--tertiary-2);
    }
  }

  .choose-block__imgs {
    @apply flex-wrap gap-2.5;

    img {
      @apply max-w-[100px] w-[100px] h-[25px] object-cover;
    }
  }

  .services-items {
    @apply bg-(--tertiary-2) p-2.5 rounded-[5px] mt-[15px];

    ul {
      @apply flex flex-wrap justify-center gap-[9px];

      li {
        @apply border-[0.75px] border-(--secondary) p-1 rounded-[5px] text-(--tertiary) font-display-3 italic text-base leading-[normal];
      }

      .b-white {
        @apply bg-(--secondary) text-(--tertiary-2) uppercase text-base font-display-2 not-italic leading-[normal];
      }
    }
  }

  .plans-card {
    .d-flex {
      @apply gap-[55px] items-stretch max-lg:flex-wrap max-lg:justify-center max-sm:gap-8;
    }
  }

  .plans-btn {
    .btn {
      @apply text-(--tertiary-2) hover:bg-(--primary-2) px-5;
    }
  }

  .plans-card__item {
    @apply px-[25px];

    h2 {
      @apply relative text-[80px] leading-none items-end justify-center gap-2 flex font-display-3;

      p {
        @apply absolute top-5 right-10 bg-(--secondary) px-3 py-1 rounded-[5px];

        img {
          filter: brightness(0) saturate(100%) invert(11%) sepia(52%)
            saturate(4522%) hue-rotate(225deg) brightness(84%) contrast(117%);
        }
      }
    }
  }

  .price-number {
    @apply font-display-3 gap-1.5 items-baseline;

    h3 {
      span {
        @apply -right-11 top-0.5;
      }
    }
  }

  .section-title {
    h1,
    h2,
    h3 {
      @apply not-italic;
    }
  }

  .btn {
    &.--primary {
      @apply text-(--tertiary-2) hover:text-(--secondary) hover:bg-(--primary-2);

      img {
        filter: brightness(0) saturate(100%) invert(7%) sepia(48%)
          saturate(6938%) hue-rotate(230deg) brightness(95%) contrast(111%);
      }

      &:hover {
        img {
          filter: brightness(0) saturate(100%) invert(100%) sepia(55%)
            saturate(865%) hue-rotate(197deg) brightness(117%) contrast(91%);
        }
      }
    }
  }

  .contact {
    @apply bg-(--secondary);

    .section-title.--primary {
      h2 {
        @apply text-(--primary-2);
      }
      p {
        @apply text-(--tertiary-2);
      }
    }
  }

  .contact-info {
    @apply border border-(--tertiary-2);

    .social-media__item {
      img {
        filter: brightness(0) saturate(100%) invert(7%) sepia(48%)
          saturate(6938%) hue-rotate(230deg) brightness(95%) contrast(111%);
      }
    }
  }

  .contact-item {
    @apply border-(--tertiary-2);

    img {
      filter: brightness(0) saturate(100%) invert(7%) sepia(48%) saturate(6938%)
        hue-rotate(230deg) brightness(95%) contrast(111%);
    }

    span {
      @apply text-(--tertiary-2);
    }
  }

  .form-container {
    @apply bg-linear-(--bg-tertiary-2);
  }

  .custom-btn {
    @apply hover:bg-(--primary-2) text-(--tertiary-2) hover:text-(--secondary);
  }

  .doubts {
    @apply bg-(--primary-2) bg-linear-0;

    .details-container {
      summary {
        @apply text-(--tertiary-2) border-(--tertiary-2);

        &::before {
          filter: brightness(0) saturate(100%) invert(7%) sepia(48%)
            saturate(6938%) hue-rotate(230deg) brightness(95%) contrast(111%);
        }
      }
    }
  }

  .header {
    @apply bg-(--primary-2);
  }

  .header-menu__links {
    ul {
      li {
        a {
          @apply hover:text-(--tertiary-2) hover:font-bold;

          &.active {
            @apply text-(--tertiary-2) font-bold;
          }
        }
      }
    }

    &.--b2b {
      .subscriber-center {
        @apply bg-(--tertiary-2) text-(--secondary);
      }
    }
  }

  .header-logo {
    img {
      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
        hue-rotate(38deg) brightness(105%) contrast(103%);
    }
  }

  .footer {
    @apply bg-(--tertiary-2);
  }

  .speed-test {
    picture {
      @apply bg-(--primary-2);

      img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(4%)
          saturate(110%) hue-rotate(34deg) brightness(114%) contrast(91%);
      }
    }

    a {
      p {
        @apply text-(--tertiary-2);
      }
    }
  }

  .plans-content {
    @apply items-end;
  }

  .plans-content__left {
    .btn {
      @apply text-(--tertiary-2) hover:bg-(--primary-2) shadow-md shadow-black/10;

      img {
        filter: brightness(0) saturate(100%) invert(7%) sepia(69%)
          saturate(5112%) hue-rotate(230deg) brightness(96%) contrast(111%);
      }
    }
  }

  .info-content {
    @apply bg-(--primary-2) bg-linear-0;

    &.--bg-primary {
      @apply bg-(--primary);
    }

    &.--bg-rupi {
      @apply bg-linear-(--bg-rupi);
    }
  }

  .bg-intern {
    @apply bg-linear-(--bg-primary-2);
  }

  .partners {
    @apply relative;
  }

  .partners-list {
    @apply mt-16 max-sm:mt-10;
  }

  .partners-content {
    @apply relative rounded-[10px] bg-(--secondary) px-6 pt-10 pb-6 max-w-[275px] min-h-[240px] transition-[min-h-[240px]] ease-out duration-[0.3s];

    .btn-show {
      @apply absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2.5 justify-center text-[10px] leading-[normal] font-normal text-(--tertiary-2) text-center;
    }

    .desc {
      @apply hidden text-[9px] leading-[normal] font-normal text-(--quartenary) text-center mt-[25px] mb-[15px];
    }

    picture {
      @apply w-full h-[128px] inline-flex justify-center items-center;

      img {
        @apply w-full object-cover;
      }
    }
  }

  @media (width <= 500px) {
    .partners-content {
      @apply max-w-full;
    }

    .swiper-btns {
      .swiper-button-next,
      .swiper-button-prev {
        @apply text-(--tertiary-2);
      }
    }
  }

  .partners-content.show-text {
    @apply min-h-[375px];
  }

  .partners-content.show-text .desc {
    @apply block;
  }

  .partners-content.show-text .btn-show img {
    @apply -rotate-180;
  }

  .menu-mobile__header,
  .menu-mobile__links {
    @apply bg-(--primary-2);
  }

  .menu-mobile__links {
    ul {
      a {
        @apply text-(--secondary);

        &.active,
        &:hover {
          @apply text-(--tertiary-2) font-bold;
        }
      }
    }

    .subscriber-center {
      @apply hidden;
    }
  }
}

.header-menu {
  @apply flex justify-between items-center;
}

.header-menu__links {
  @apply flex items-center gap-[30px] max-lg:hidden;

  ul {
    @apply flex items-center gap-[30px];

    a {
      @apply text-(--secondary) text-lg font-medium transition-colors ease-in-out hover:text-(--tertiary);

      &.active {
        @apply text-(--tertiary);
      }
    }
  }
}

.subscriber-center {
  @apply flex items-center gap-[11px] bg-(--tertiary) rounded-[5px] text-(--primary) text-lg font-medium px-3.5 py-1 transition-all ease-in;

  img {
    @apply transition-all ease-in;
  }

  &:hover {
    @apply bg-(--nonary) text-(--secondary);

    img {
      filter: brightness(0) saturate(100%) invert(100%) sepia(2%)
        saturate(5013%) hue-rotate(342deg) brightness(113%) contrast(101%);
    }
  }
}

.header-search__mobile.active .header-top__search {
  button {
    img {
      filter: brightness(0) saturate(100%) invert(15%) sepia(3%) saturate(245%)
        hue-rotate(359deg) brightness(90%) contrast(89%);
    }
  }
}

.hero-bnn {
  @apply md:h-[286px];

  .swiper {
    @apply md:h-[286px];

    .swiper-wrapper {
      @apply md:h-[286px];

      .swiper-slide {
        @apply md:h-[286px];
      }
    }
  }

  a, img {
    @apply md:h-[286px];
  }
}


/* Hero Banner */
.hero-bnn__img {
  img {
    @apply w-full object-cover max-sm:min-h-[340px];
  }
}

.swiper {
  &.--bnn {
    .swiper-button-next,
    .swiper-button-prev {
      color: var(--secondary);
      &::after {
        font-size: 32px;
      }
    }

    .swiper-button-next {
      @apply sm:right-[50px];
    }

    .swiper-button-prev {
      @apply sm:left-[50px];
    }

    .swiper-pagination-bullet {
      @apply w-full max-w-[50px] rounded-md bg-(--secondary) opacity-50;
    }

    .swiper-pagination-bullet-active {
      @apply bg-(--tertiary) opacity-100;
    }
  }

  &.--blog {
    @apply p-[20px];
  }
}

.swiper-btns {
  @apply pt-[120px] md:pt-[50px];

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--secondary);
    &::after {
      font-size: 32px;
    }
  }

  .swiper-button-next {
    @apply sm:right-[50px];
  }

  .swiper-button-prev {
    @apply sm:left-[50px];
  }

  .swiper-pagination-bullet {
    @apply w-full max-w-[50px] rounded-md bg-(--secondary) opacity-50;
  }

  .swiper-pagination-bullet-active {
    @apply bg-(--tertiary) opacity-100;
  }

  &.--primary {
    @apply pt-[75px];

    .swiper-button-next,
    .swiper-button-prev {
      color: var(--primary);
    }

    .swiper-pagination-bullet {
      @apply bg-(--tertiary);
    }

    .swiper-pagination-bullet-active {
      @apply bg-(--primary);
    }
  }
}

/* Serviços */
.service {
  @apply bg-(--tertiary) py-5 relative z-10;
}

.service-list {
  @apply grid grid-cols-[repeat(auto-fill,_minmax(220px,_1fr))] gap-4 max-w-[1000px] m-auto lg:gap-[30px];
}

.service-list__item {
  @apply inline-flex items-center gap-[15px] px-[15px] py-2.5 border-[1.5px] border-(--primary) rounded-[10px];

  figure {
    @apply overflow-visible;

    img {
      @apply min-w-10;
    }
  }

  span {
    @apply text-(--primary) text-lg font-light leading-[normal] max-w-[125px];
  }
}

.social-media {
  @apply bg-(--primary) sm:py-10 py-8 px-4;
}

.social-content {
  @apply flex justify-center gap-6 sm:gap-[70px];
}

.social-media__item {
  @apply flex justify-center bg-(--tertiary) p-2 rounded-[5px] w-10 h-10;

  figure {
    @apply overflow-visible;
  }
}

/* CONTATO */
.contact {
  @apply bg-(--tertiary) pt-[75px] pb-[100px] max-lg:py-10;
}

.contact-info {
  @apply bg-(--secondary) py-[45px] px-[50px] rounded-s-[10px] max-w-[410px] max-lg:max-w-[630px] max-lg:rounded-es-none max-lg:rounded-se-[10px] max-md:px-3 max-md:py-10;

  .social-content {
    @apply gap-[30px];

    .social-media__item {
      @apply w-[35px] h-[35px] p-1.5;
    }
  }
}

.contact-item {
  @apply inline-flex items-center gap-[15px] rounded-[10px] border-2 border-(--primary) py-2.5 px-[18px] w-full h-[65px] mb-[30px] nth-[4]:mb-[25px];

  span {
    @apply text-(--primary) text-lg font-bold leading-[normal];
  }

  p {
    @apply text-(--quartenary) text-[10px] font-normal leading-[normal];

    a {
      @apply underline;
    }
  }
}

/* Planos */
.info-container {
  @apply bg-linear-(--bg-primary) pb-[95px] pt-11 max-lg:pb-10 relative before:absolute before:bg-(image:--bg-back) before:w-full before:h-[1920px] before:bg-no-repeat before:bg-center before:-top-8 before:bg-cover before:mix-blend-soft-light;
}

.plans-card {
  @apply relative mt-9;

  .swiper.--plans {
    @apply pt-4 max-w-[1040px];
    .swiper-slide {
      @apply w-[330px];
    }

    .swiper-wrapper {
      @apply items-center;
    }
  }
}

.card-container {
  @apply relative inline-block rounded-[10px] border border-(--secondary) bg-linear-(--bg-secondary) shadow-(--3xl);
}

.plans-card__item {
  @apply pt-9 px-4 pb-4;

  h2 {
    @apply text-(--secondary) text-[66px] leading-[normal] uppercase italic font-bold text-center font-display-3;

    span {
      @apply text-2xl;
    }
  }

  > p {
    @apply text-(--tertiary) text-lg font-bold text-center font-display-3 italic;
  }
}

.price-block {
  @apply border-t border-(--secondary) pt-4 px-9 pb-9;
}

.tag-block {
  @apply absolute -top-3.5 right-0 bg-(--secondary) shadow-(--5xl) rounded-[5px] py-1 px-2 rounded-br-none text-(--primary) text-lg font-extrabold leading-[normal] font-display-3 italic;
}

.plans-promo {
  @apply flex flex-wrap gap-[5px] justify-center items-center mb-2.5;

  span {
    @apply text-(--tertiary) text-[14px] font-normal block rounded-[5px] border border-(--secondary) py-[7px] px-2.5 whitespace-nowrap;
  }
}

.premium-block {
  @apply bg-(--secondary) py-[11px] px-[15px] rounded-[5px];

  p {
    @apply text-(--primary) font-bold italic text-sm mt-1 text-center;
  }
}

.choose-block {
  @apply mt-2.5;
}

.choose-block__imgs {
  @apply flex gap-5 items-center justify-center mt-1.5;

  img {
    @apply w-[100px]
  }
}

.premium-title {
  @apply block rounded-t-[5px] border border-(--primary) text-(--primary) text-base max-w-[85px] m-auto text-center font-display-3 italic;
}

.choose-block__item {
  @apply flex items-center justify-center flex-wrap gap-2 bg-(--primary) p-2 rounded-[5px];

  .choose-block__img {
    @apply w-[100px];
  }
}

.d-flex {
  @apply flex items-center gap-2;

  &.--secondary {
    @apply gap-0 mt-[54px] max-lg:flex-col max-md:mt-10;
  }

  &.--tertiary {
    @apply gap-[50px] items-start max-lg:gap-8 max-sm:flex-col;
  }
}

.switch-btn {
  @apply relative inline-block w-12 h-6;
}

/* Esconde checkbox */
.switch-btn input {
  @apply opacity-0 w-0 h-0;
}

/* Corpo do switch */
.switch-btn .slider {
  @apply absolute inset-0 cursor-pointer
         bg-gray-400
         border border-gray-700
         rounded-md
         transition-all duration-300;
}

/* Bolinha */
.switch-btn .slider::before {
  content: "";
  @apply absolute
         w-5 h-5
         left-[2px] bottom-[2px]
         bg-white
         border border-gray-300
         rounded-sm
         shadow-sm
         transition-all duration-300;
}

/* ON */
.switch-btn input:checked + .slider {
  @apply bg-green-500
         border-green-600
         shadow-[0_0_6px_rgba(34,197,94,0.6)];
}

/* Bola ON */
.switch-btn input:checked + .slider::before {
  @apply translate-x-6;
}

/* Focus */
.switch-btn input:focus + .slider {
  @apply ring-1 ring-green-400;
}


.slider {
  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-(--primary) transition rounded-[2.5px] border-[0.5px] border-(--secondary) shadow-(--4xl);

  &::before {
    @apply absolute content-[""] w-3 h-3 left-0.5 bottom-[1px] bg-white transition rounded-[2.5px];
  }
}

.line {
  @apply relative block py-[15px];

  &::before {
    @apply absolute content-[''] w-screen h-[1px] bg-(--secondary) top-[15px] left-1/2 -translate-x-1/2 -translate-y-1/2;
  }
}

.price-number {
  @apply text-(--secondary) font-bold italic leading-[normal] flex items-baseline justify-center gap-1 font-display-3;

  > p {
    @apply text-5xl;
  }

  span {
    @apply text-2xl font-normal;
  }

  h3 {
    @apply relative text-[76px] leading-none;

    span {
      @apply text-3xl absolute top-[3px] -right-12 font-bold;
    }
  }
}

.plans-btn {
  @apply flex flex-col items-center gap-2.5 mt-3;

  .btn {
    @apply text-(--primary) hover:text-(--secondary);
  }

  a + a {
    @apply text-[10px] font-normal underline italic text-(--tertiary);
  }
}

/* Serviços */

.services {
  @apply mt-[61px];
}

.d-grid {
  @apply grid grid-cols-[repeat(auto-fill,_minmax(350px,_1fr))] lg:grid-cols-[repeat(auto-fill,_minmax(470px,_1fr))] xl:grid-cols-[repeat(auto-fill,_minmax(500px,_1fr))] gap-9 mt-[49px] max-md:gap-8;
}

.card {
  @apply relative overflow-hidden before:absolute before:block before:bg-linear-(--bg-tertiary) before:w-full before:h-[185px] before:bottom-0 before:z-10 before:mix-blend-multiply rounded-[10px];

  figure {
    img {
      @apply w-full h-[260px] object-cover;
    }
  }
}

.card-info {
  @apply absolute bottom-9 px-9 z-20;

  span {
    @apply flex items-center gap-[9px] text-(--tertiary) text-[26px] leading-[normal] font-normal max-lg:text-xl font-display-3 italic;
  }

  p {
    @apply text-(--secondary) text-xs font-normal;
  }
}

.btn-block {
  @apply flex justify-center mt-14 max-md:mt-10;
}

/* SOBRE */
.about-us {
  @apply mt-[75px] max-md:mt-10;
}

.about-us__info {
  @apply mt-[51px] max-md:mt-10 max-w-[970px] m-auto;

  span {
    @apply text-(--tertiary) text-2xl italic font-medium max-md:text-center block;
  }

  .d-flex {
    @apply gap-[65px] mt-[51px] relative max-lg:flex-col max-md:mt-10;
  }
}

.about-us__info-item {
  @apply flex items-center gap-9 relative after:absolute after:border after:border-(--secondary) after:h-[115px] after:w-full after:rounded-2xl max-w-[615px] after:bottom-0 max-sm:gap-2 max-sm:h-[105px];

  picture {
    @apply w-full max-w-[86px] relative z-10 after:absolute after:right-0 after:w-full after:h-[1px] after:bg-(--secondary) after:bottom-0 max-sm:after:content-none max-sm:backdrop-blur-none;
    img {
      @apply w-full h-[135px] max-sm:h-[70px];
    }
  }

  p {
    @apply text-(--secondary) text-base font-normal leading-[normal] pt-[18px] max-sm:text-[10px] max-sm:p-2 max-sm:pl-0;
  }

  &:nth-child(1) picture {
    @apply after:w-[24%];
  }

  &:nth-child(2) picture {
    @apply after:w-[60%];
  }

  &:nth-child(3) picture {
    @apply after:w-[75%];
  }

  &:nth-child(4) picture {
    @apply after:w-[58%];
  }
}

.img-block {
  img {
    @apply absolute -top-[49px] w-full h-[775px] object-cover max-lg:sticky max-lg:h-[375px] max-lg:rounded-[10px];
  }
}

.f-col {
  @apply flex flex-col gap-[45px];
}

.valores {
  @apply mt-[102px] flex flex-col gap-[50px] max-lg:mt-12 max-w-[970px] m-auto;

  .item {
    h4 {
      @apply text-(--tertiary) text-2xl font-medium leading-[normal];
    }

    p {
      @apply text-(--secondary) text-lg font-light mt-7 leading-[normal];
    }
  }
}

.blog {
  @apply pt-[75px] pb-[100px] max-md:py-10;

  &.--inner {
    @apply bg-(--secondary) mt-[75px];
  }
}

.blog-card {
  @apply mt-[49px] relative;
}

.blog-card__item {
  @apply drop-shadow-(--drop-shadow) overflow-hidden rounded-xl;

  picture {
    img {
      @apply rounded-t-[5px] scale-100 w-full h-[150px] object-cover;
    }
  }
}

.blog-card__content {
  @apply rounded-b-[5px] bg-(--secondary) pt-[13px] px-5 pb-3.5;

  h3 {
    @apply text-(--primary) text-2xl font-normal font-display-3 italic;
  }

  p {
    @apply text-(--quartenary) text-xs font-normal leading-[normal] mt-[5px];
  }
}

.read-more {
  @apply flex justify-end text-(--primary) text-[10px] font-normal leading-[normal] underline mt-6;
}

.doubts {
  @apply bg-linear-(--bg-primary) pt-[75px] pb-[100px] max-lg:pt-10 max-lg:pb-16;
}

.doubts-title {
  @apply text-(--secondary) text-4xl leading-[normal] font-bold max-sm:text-2xl;
}

.doubts-title,
.doubts-content {
  @apply max-w-[970px] m-auto;
}

.doubts-content {
  @apply mt-[54px] flex flex-col gap-[25px] max-lg:mt-10;
}

.details-container {
  summary {
    @apply cursor-pointer list-none flex gap-[15px] text-lg leading-[normal] font-medium text-(--tertiary) border-b-2 border-(--tertiary) pb-[9px];
    &::before {
      @apply content-(image:--arrow) h-5;
    }
  }

  &[open] {
    summary::before {
      @apply rotate-180;
    }
  }

  .description {
    @apply text-[10px] font-normal leading-[normal] text-(--secondary) mt-[15px];
  }
}

.breadcrumb {
  @apply mb-[84px] max-sm:mb-10 max-w-[970px] m-auto;

  ul {
    @apply flex gap-6;

    li {
      @apply relative after:absolute after:content-[">"] after:-right-4 last:after:content-none text-sm font-light text-(--secondary) last:text-(--tertiary) last:font-medium;
    }
  }

  &.--primary {
    @apply mb-[34px];
    li {
      @apply text-(--quartenary);

      & + li {
        @apply text-(--primary) font-medium;
      }
    }
  }
}

.bg-intern {
  @apply bg-linear-(--bg-primary) py-[100px] relative before:absolute before:bg-(image:--bg-back) before:w-full before:h-[1920px] before:bg-no-repeat before:bg-center before:top-0 before:bg-cover before:mix-blend-soft-light max-sm:pt-10 max-sm:pb-16;

  &.--no-before {
    @apply before:bg-none before:content-none max-md:pb-0;
  }

  &.--secondary {
    @apply bg-(--secondary) bg-linear-0 before:bg-(image:--bg-back-2) before:mix-blend-normal;
  }
}

.info-content {
  @apply relative z-10 bg-linear-(--disney) py-12;

  .swiper-btns {
    @apply p-0;
  }

  &.--deezer {
    @apply bg-(--quinary) bg-linear-0;
  }

  &.--premiere {
    @apply bg-linear-(--bg-premiere);
  }

  &.--p-kids {
    @apply bg-(--senary) bg-linear-0;
  }

  &.--rupi {
    @apply bg-(--primary) bg-linear-0;
  }
}

.plans-content {
  @apply flex gap-[75px] max-lg:flex-col max-lg:gap-6;
}

.plans-content__title {
  @apply text-(--tertiary) text-2xl leading-[normal] italic font-medium mb-[47px] mt-[100px] max-md:my-10 max-w-[970px] m-auto;
}

.plans-content__left {
  @apply relative;

  picture {
    img {
      @apply w-full h-[350px] object-cover rounded-[10px] max-sm:h-[270px] transition-all ease-in;
    }
  }

  .btn {
    @apply absolute right-[25px] bottom-[25px] inline-flex gap-[5px] items-center px-[13px] text-2xl text-(--primary) max-sm:text-sm shadow-md shadow-black/30;

    &:hover {
      @apply text-(--secondary);

      img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(2%)
          saturate(5013%) hue-rotate(342deg) brightness(113%) contrast(101%);
      }
    }
  }
}

.plans-content__right {
  @apply max-w-[490px] max-lg:max-w-full;

  h3,
  p {
    @apply text-(--secondary) text-lg font-normal leading-[normal];
  }

  p {
    @apply italic font-light mt-4;
  }

  picture {
    @apply block mt-[25px];

    img {
      @apply w-full h-[205px] object-cover rounded-[10px];
    }
  }
}

.plan-build {
  @apply relative z-10 mt-[75px] max-sm:mt-10;
}

.plan-title {
  @apply text-(--primary) text-4xl font-bold mb-[49px] max-sm:text-3xl max-sm:mb-8 font-display-3 italic;

  &.--primary {
    @apply mt-[35px] mb-[25px];
  }
}

.plan-content {
  @apply grid grid-cols-1 items-start lg:grid-cols-2;
}

.plan-content__left {
  @apply max-w-[585px] lg:col-span-2;
}

.plan-content__right {
  @apply block rounded-[10px] border border-(--quartenary) px-[25px] py-5 max-w-[310px] mt-[90px] lg:col-span-2 lg:col-end-7 max-sm:mt-10 max-sm:max-w-full;

  h2 {
    @apply text-xl text-(--primary) font-bold leading-[normal] mb-[5px];
  }

  p {
    @apply text-xs text-(--quartenary) font-normal leading-[normal];
  }
}

.selection-item {
  @apply flex items-center justify-between gap-1 mt-[25px];
}

.selection-item__info {
  @apply flex items-center gap-[15px];

  p {
    @apply text-(--primary) text-base font-bold leading-[normal];
  }

  span {
    @apply text-(--quartenary) text-[10px] font-normal leading-[normal];
  }

  div {
    @apply flex flex-col gap-[5px];
  }
}

.plan-block {
  > .d-flex {
    @apply mb-[25px] last:mb-0;
  }

  .slider {
    @apply w-[52px] h-[30px];

    &::before {
      @apply w-[22px] h-[22px] top-[3px];
    }
  }

  .switch-btn {
    @apply h-auto;
    input {
      &:checked + .slider:before {
        @apply left-0 top-1;
      }
    }
  }

  .choose-block__item {
    @apply gap-y-[15px] gap-x-11 justify-start px-[15px] py-3;
    img {
      @apply min-w-[110px] max-sm:min-w-[80px];
    }
  }

  .premium-title {
    @apply m-0 max-w-[235px] py-[5px];
  }
}

.change-plan {
  @apply text-(--primary) underline text-xs font-normal mt-[25px] flex justify-end transition-all ease-in hover:text-(--tertiary);
}

.plan-block__turbine {
  .plan-title {
    @apply mb-[5px] mt-[70px] max-sm:mt-10;
  }

  > p {
    @apply text-(--quartenary) text-xs font-light;
  }

  .choose-block__item {
    @apply px-5 py-12 gap-y-[50px] gap-x-11 mt-[15px] max-sm:gap-y-5 max-sm:py-8;
  }
}

.price-item {
  .price-number {
    @apply text-(--primary) bg-(--secondary) rounded-b-[10px] max-w-[100px] m-auto py-0.5;

    p {
      @apply text-[13px];
    }

    h3 {
      @apply text-[21px];

      span {
        @apply text-[8px] ml-[3px];
      }
    }

    span {
      @apply text-[6px];
    }
  }
}

.coupon-block {
  @apply flex flex-col border-t border-(--primary) my-[50px];

  span {
    @apply text-(--quartenary) text-xs font-medium mt-[25px] mb-[15px] block;
  }

  input {
    @apply px-[25px] py-2.5 placeholder:text-xs placeholder:font-medium placeholder:text-(--septenary) border border-(--septenary) rounded-[5px];
  }
}

.total-block {
  p {
    @apply flex items-center justify-between text-xs font-normal text-(--quartenary) leading-[normal] mb-[25px];
    span {
      @apply text-(--primary) text-2xl font-bold leading-[normal];
    }
  }

  .btn.--primary {
    @apply text-2xl font-normal;
  }
}

.select-menu {
  @apply max-w-[250px];
}

.select-btn {
  @apply flex items-center gap-[15px] bg-(--primary) rounded-[3px] px-[15px] py-2.5 text-xl text-(--secondary) font-normal cursor-pointer relative font-display-2;

  &::after {
    @apply content-[""] absolute bg-(image:--arrow-d) right-[15px] w-2.5 h-[18px] bg-no-repeat bg-center;
  }
}

.options {
  @apply absolute w-[250px] overflow-y-auto max-h-[295px] p-2.5 mt-2.5 rounded-[3px] bg-(--primary) invisible;
  animation-name: fadeInDown;
  animation-duration: 0.35s;
  animation-fill-mode: both;
}
.option {
  @apply flex cursor-pointer py-0 px-4 items-center h-[50px] bg-(--primary) hover:bg-(--secondary) text-lg text-(--secondary) hover:text-(--tertiary) font-display-2;
}
.select-menu.active .options {
  @apply block opacity-0 z-10 visible;
  animation-name: fadeInUp;
  animation-duration: 0.4s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 30px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInDown {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
}

/* FOOTER */
.footer {
  @apply bg-(--primary) pt-[42px] pb-8;
}

.footer-copyright {
  @apply flex justify-center mt-10;

  span {
    @apply text-(--secondary) text-[10px] leading-[normal] font-normal max-sm:text-center;
  }
}

.footer-items {
  h3 {
    @apply text-(--tertiary) text-lg font-medium mb-2 ml-[18px] leading-[normal] max-lg:text-center max-lg:mr-0;
  }
}

.footer-links {
  @apply inline-flex items-stretch flex-col gap-2.5 border-t border-l border-(--secondary) pt-2.5 pl-5 pr-[15px] rounded-ss-[10px] h-[75px];

  a {
    @apply flex items-center gap-2.5 text-(--secondary) text-[10px] font-normal leading-[normal];
  }

  &.--f-start {
    a {
      @apply items-start;
    }
  }
}

.footer-content {
  @apply flex justify-between items-center gap-1.5 max-lg:flex-col max-lg:gap-6;
}

.footer-social {
  @apply flex flex-col items-center gap-5;

  h3 {
    @apply text-(--secondary) text-lg font-medium leading-[normal];
  }
}

.footer-social__links {
  @apply flex justify-between gap-10;
}

.footer-social__item {
  @apply bg-(--tertiary) w-[25px] h-[25px] inline-flex justify-center items-center rounded-[3px];

  picture {
    @apply overflow-visible;
  }
}

/* Formulário */
.form-container {
  @apply w-full max-w-[630px] bg-(--primary) rounded-e-[10px] max-lg:rounded-se-none max-lg:rounded-es-[10px];

  form {
    @apply max-w-[480px] m-auto py-[45px] max-md:px-3 max-md:py-10;
  }

  &.--primary {
    @apply bg-(--secondary) mt-[68px] max-w-[660px] max-sm:mt-10;

    h4 {
      @apply text-(--primary) text-4xl font-bold leading-[normal] mb-[45px] max-sm:mb-8 max-sm:text-2xl;
    }

    .d-flex {
      @apply items-start gap-5 max-sm:gap-0 max-sm:flex-col max-sm:mb-3.5;

      &.--quartenary {
        @apply max-sm:flex-row max-sm:gap-2.5 max-sm:mb-0;
      }
    }

    .custom-label {
      span {
        @apply text-(--quartenary) text-sm;
      }
    }

    .custom-input,
    .custom-textarea,
    .custom-select {
      @apply border border-(--septenary) bg-(--secondary) px-[15px] py-0.5 hover:border-(--primary) focus:border-(--primary) h-[35px] placeholder:text-(--septenary);
    }
  }
}

.custom-label {
  @apply flex flex-col w-full mb-3.5 last:mb-0;

  span {
    @apply inline-flex text-base leading-[normal] font-normal text-(--tertiary) mb-2.5;
  }
}

.custom-input,
.custom-textarea,
.custom-select {
  @apply border-2 border-transparent rounded-[5px] bg-(--secondary) px-2 py-0.5 hover:border-(--tertiary) focus:border-(--tertiary) outline-none h-[30px];
}

.custom-textarea {
  @apply h-[90px];
}

.custom-checkbox {
  @apply block relative pl-6 mb-0 cursor-pointer text-[22px] select-none;

  input {
    @apply absolute opacity-0 cursor-pointer w-0 h-0 mb-0;

    &:checked ~ .checkmark {
      &::after {
        @apply block;
      }
    }
  }

  .checkmark::after {
    @apply left-[3px] top-[3px] w-3.5 h-3.5 bg-(--tertiary) rounded-[3px];
  }

  p {
    @apply text-sm uppercase text-(--quartenary) font-normal;
  }
}

.checkmark {
  @apply w-5 h-5 top-0 left-0 absolute bg-(--primary) rounded-xs;

  &::after {
    @apply content-[''] absolute hidden;
  }
}

.custom-btn {
  @apply flex w-full text-(--primary) mt-[35px] cursor-pointer;
}

/* Paginação */
.pagination {
  @apply flex gap-8 items-center justify-center mt-3.5;
}

.pagination-link {
  @apply flex gap-0.5;

  a {
    @apply text-(--secondary) text-base font-normal leading-6 py-0.5 px-[9px] rounded-[5px] transition-all;

    &.active,
    &:hover {
      @apply text-(--default) font-bold bg-(--secondary);
    }
  }
}

.pagination-icon {
  @apply inline-flex items-center justify-center transition-all ease-in  py-0.5 rounded-[5px] hover:bg-(--secondary);

  &.--rotate {
    @apply -rotate-180;
  }

  &:hover {
    img {
      filter: brightness(0) saturate(100%) invert(95%) sepia(31%) saturate(0%)
        hue-rotate(358deg) brightness(109%) contrast(101%);
    }
  }
}

/* MENU MOBILE */
.menu-mobile {
  @apply fixed top-0 right-0 z-50 h-screen w-full max-sm:max-w-full -translate-x-full transition-transform duration-[0.3s] ease-in-out bg-[rgba(0,_0,_0,_.3)];

  &.is-open {
    @apply translate-x-0;
  }
}

.menu-mobile__header {
  @apply flex justify-between items-center bg-(--primary) p-3.5;

  .close-menu {
    img {
      filter: brightness(0) saturate(100%) invert(99%) sepia(11%) saturate(33%)
        hue-rotate(264deg) brightness(117%) contrast(91%);
    }
  }
}

.btn-mobile {
  @apply lg:hidden relative z-50 inline-flex;
}

.menu-mobile__links {
  @apply w-full h-full max-w-[318px] bg-(--primary) p-5 drop-shadow-(--drop-shadow);

  > ul {
    @apply flex flex-col items-start gap-6 h-[70%] max-h-4/5 overflow-x-hidden;

    li {
      @apply w-full;
    }

    a {
      @apply w-full flex relative text-base font-bold text-(--tertiary) leading-[normal];

      &.active,
      &:hover {
        @apply text-(--secondary);
      }
    }
  }
}

.hamburger {
  @apply relative w-8 h-8 text-inherit cursor-pointer transition-all duration-[0.3s] ease-in-out;

  &.is-lg {
    @apply text-[32px];
  }
}

.hamburger-line {
  @apply absolute right-0 w-full h-[3px] rounded-sm transition-[inherit] bg-(--secondary);

  &:nth-child(1) {
    @apply top-1;

    .hamburger.is-active &,
    .w-nav-button.w--open & {
      @apply top-1/2 -translate-y-1/2 -rotate-z-[135deg];
    }
  }

  &:nth-child(2) {
    @apply top-3.5;

    .hamburger.is-active &,
    .w-nav-button.w--open & {
      @apply right-1/2 w-0;
    }
  }

  &:nth-child(3) {
    @apply top-6 w-5;

    .hamburger.is-active &,
    .w-nav-button.w--open & {
      @apply top-1/2 w-full -translate-y-1/2 rotate-z-[135deg];
    }
  }
}

.wpp-float {
  @apply inline-flex justify-center items-center fixed top-[70%] right-[50px] z-50 bg-(--octonary) w-[70px] h-[70px] rounded-t-full rounded-bl-full shadow-(--7xl) animate-bounce max-sm:right-4 max-sm:w-[60px] max-sm:h-[60px] max-sm:top-[75%];

  picture {
    img {
      @apply max-sm:max-w-8;
    }
  }
}

.speed-test {
  @apply fixed top-10/12 right-[50px] z-50 animate-bounce max-sm:right-4 max-sm:top-[88%];

  a {
    @apply inline-flex items-center;
    picture {
      @apply inline-flex justify-center items-center bg-(--tertiary) w-[70px] h-[70px] rounded-t-full rounded-bl-full -ml-12 shadow-(--7xl) max-sm:w-[60px] max-sm:h-[60px];

      img {
        @apply max-sm:max-w-8;
      }
    }

    p {
      @apply bg-(--secondary) text-(--primary) font-normal leading-none uppercase text-2xl pl-4 pr-[66px] py-3 font-display-2 rounded-s-[5px] shadow-(--8xl) max-sm:text-lg max-sm:pl-3.5 max-sm:py-2.5;
    }
  }
}

.swiper.--plans {
  overflow: visible;
}

.swiper.--plans .swiper-wrapper {
  align-items: center;
}

/* Slide base */
.swiper.--plans .swiper-slide {
  width: 400px !important;
  flex-shrink: 0;

  opacity: 0.4;
  transform: scale(0.85);
  transition: all 0.4s ease;
}

/* Ativo */
.swiper.--plans .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  z-index: 5;
}

/* Vizinhos */
.swiper.--plans .swiper-slide-prev,
.swiper.--plans .swiper-slide-next {
  opacity: 0.7;
  transform: scale(0.92);
}

@media (max-width: 639px) {
  .swiper.--plans .swiper-slide {
    width: 370px !important;
    transform: scale(0.78);
  }

  .swiper.--plans .swiper-slide-active {
    transform: scale(0.92);
  }

  .swiper.--plans .swiper-slide-prev,
  .swiper.--plans .swiper-slide-next {
    transform: scale(0.82);
  }
}

@media (max-width: 400px) {
  .swiper.--plans .swiper-slide {
    width: 320px !important;
    transform: scale(0.68);
  }

  .swiper.--plans .swiper-slide-active {
    transform: scale(0.82);
  }

  .swiper.--plans .swiper-slide-prev,
  .swiper.--plans .swiper-slide-next {
    transform: scale(0.72);
  }
}

.blog-card__link {
  z-index: 999;
  cursor: pointer;
  display: block;

  transform: scale(1);
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;

  will-change: transform;
}

.blog-card__link:hover {
  transform: scale(1.05);
}