/* =========================================================
   OPIX — DISPONIBILIDADE V2
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.coverage-page .page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.coverage-page .page-hero::before {
  content: "";

  position: absolute;

  width: 440px;
  height: 440px;

  right: -170px;
  top: -210px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(219, 65, 255, .22),
      rgba(184, 40, 224, .06) 46%,
      transparent 70%
    );

  animation:
    opixCoverageGlow
    8s
    ease-in-out
    infinite
    alternate;
}


@keyframes opixCoverageGlow {

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

  to {
    transform:
      translate3d(-75px, 52px, 0)
      scale(1.17);
  }

}


/*
 * A elipse existente na page-hero ganha movimento.
 */

.coverage-page .page-hero::after {
  animation:
    opixCoverageOrbit
    7s
    ease-in-out
    infinite
    alternate;

  transform-origin: center;

  will-change:
    transform,
    opacity,
    filter;
}


@keyframes opixCoverageOrbit {

  0% {
    transform:
      translate3d(-20px, 8px, 0)
      rotate(-15deg)
      scale(.98);

    opacity:
      .48;
  }

  50% {
    transform:
      translate3d(28px, -12px, 0)
      rotate(-10deg)
      scale(1.035);

    opacity:
      .95;

    filter:
      drop-shadow(
        0 0 22px
        rgba(222, 68, 255, .45)
      );
  }

  100% {
    transform:
      translate3d(48px, 12px, 0)
      rotate(-13deg)
      scale(1);

    opacity:
      .62;
  }

}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.coverage-flow-section {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcf8ff 100%
    );
}


.coverage-flow-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(320px, .95fr);

  gap: 34px;

  align-items: stretch;
}


/* =========================================================
   CARD DA CONSULTA
   ========================================================= */

.coverage-search-card {
  position: relative;

  padding: 34px;

  border:
    1px solid
    rgba(137, 31, 175, .12);

  border-radius:
    28px;

  background:
    #ffffff;

  box-shadow:
    0 24px 60px
    rgba(48, 7, 67, .09);

  transition:
    transform .30s ease,
    box-shadow .30s ease,
    border-color .30s ease;
}


@media (hover:hover) {

  .coverage-search-card:hover {
    transform:
      translateY(-4px);

    border-color:
      rgba(169, 37, 211, .20);

    box-shadow:
      0 30px 70px
      rgba(48, 7, 67, .12);
  }

}


.coverage-search-card h2 {
  margin:
    7px 0 10px;

  font-size:
    clamp(1.8rem, 3vw, 2.5rem);

  line-height:
    1.05;

  letter-spacing:
    -.03em;
}


.coverage-search-card > p {
  max-width:
    620px;

  margin:
    0;

  color:
    var(--muted);

  line-height:
    1.6;
}


/* =========================================================
   FORM
   ========================================================= */

.coverage-quick-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(150px, .65fr);

  gap: 14px;

  margin-top:
    28px;
}


.coverage-quick-form .field {
  margin: 0;
}


.coverage-quick-form .coverage-submit {
  grid-column:
    1 / -1;

  width:
    100%;

  margin-top:
    4px;
}


.coverage-quick-form input {
  transition:
    transform .20s ease,
    border-color .20s ease,
    box-shadow .20s ease;
}


.coverage-quick-form input:focus {
  transform:
    translateY(-1px);
}


/* =========================================================
   PAINEL COMO FUNCIONA
   ========================================================= */

.coverage-process-card {
  position: relative;

  overflow: hidden;

  padding:
    34px;

  border-radius:
    28px;

  color:
    #ffffff;

  background:
    linear-gradient(
      145deg,
      #8310a7 0%,
      #4a0769 100%
    );

  box-shadow:
    0 27px 65px
    rgba(58, 5, 78, .20);
}


.coverage-process-card::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -150px;
  top: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(241, 111, 255, .26),
      transparent 67%
    );

  animation:
    opixCoverageProcessGlow
    7s
    ease-in-out
    infinite
    alternate;
}


@keyframes opixCoverageProcessGlow {

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

  to {
    transform:
      translate3d(-48px,40px,0)
      scale(1.18);
  }

}


.coverage-process-card > * {
  position: relative;
  z-index: 2;
}


.coverage-process-card h3 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    1.45rem;
}


.coverage-process-card > p {
  margin:
    12px 0 0;

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

  line-height:
    1.6;
}


.coverage-steps {
  display: grid;

  gap: 17px;

  margin-top:
    28px;
}


.coverage-step {
  display: grid;

  grid-template-columns:
    42px 1fr;

  gap: 14px;

  align-items: start;

  padding:
    9px;

  margin:
    0 -9px;

  border-radius:
    15px;

  transition:
    transform .25s ease,
    background-color .25s ease;
}


@media (hover:hover) {

  .coverage-step:hover {
    transform:
      translateX(6px);

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

}


.coverage-step-number {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border-radius:
    13px;

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

  color:
    #ffffff;

  font-weight:
    900;
}


.coverage-step strong {
  display: block;

  margin-top:
    2px;

  color:
    #ffffff;
}


.coverage-step span:last-child {
  display: block;

  margin-top:
    4px;

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

  font-size:
    .9rem;

  line-height:
    1.5;
}


/* =========================================================
   BLOCO INFERIOR
   ========================================================= */

.coverage-benefits {
  margin-top:
    38px;
}


.coverage-benefits-grid {
  display: grid;

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

  gap:
    18px;
}


.coverage-benefit {
  padding:
    24px;

  border:
    1px solid
    rgba(132, 34, 168, .10);

  border-radius:
    22px;

  background:
    #ffffff;

  box-shadow:
    0 15px 38px
    rgba(54, 9, 74, .055);

  transition:
    transform .28s ease,
    box-shadow .28s ease;
}


@media (hover:hover) {

  .coverage-benefit:hover {
    transform:
      translateY(-6px);

    box-shadow:
      0 22px 48px
      rgba(54, 9, 74, .09);
  }

}


.coverage-benefit-icon {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  margin-bottom:
    15px;

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      #a61bd4,
      #69108d
    );

  color:
    #ffffff;

  font-size:
    1.2rem;
}


.coverage-benefit h3 {
  margin:
    0;

  font-size:
    1.05rem;
}


.coverage-benefit p {
  margin:
    8px 0 0;

  color:
    var(--muted);

  font-size:
    .92rem;

  line-height:
    1.55;
}


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

@media (max-width: 820px) {

  .coverage-flow-grid {
    grid-template-columns:
      1fr;
  }


  .coverage-quick-form {
    grid-template-columns:
      1fr;
  }


  .coverage-quick-form
  .coverage-submit {
    grid-column:
      auto;
  }


  .coverage-benefits-grid {
    grid-template-columns:
      1fr;
  }


  .coverage-search-card,
  .coverage-process-card {
    padding:
      25px;

    border-radius:
      23px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  .coverage-page .page-hero::before,
  .coverage-page .page-hero::after,
  .coverage-process-card::before {
    animation:
      none !important;
  }

}