/* Public landing Tier-1 r3. Preview-only refinement. */

.client-public-home-body .client-public-flag {
  width: 44px !important;
  height: 29px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 7px !important;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.client-public-home-body .client-public-flag img {
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
  object-fit: cover;
}

.client-public-nav {
  isolation: isolate;
  background: #fff !important;
  box-shadow: 0 14px 40px rgba(5, 29, 39, .13) !important;
  backdrop-filter: none !important;
}

@media (min-width: 1024px) {
  .client-public-nav {
    top: 0 !important;
    border: 1px solid rgba(7, 34, 46, .08);
    border-radius: 0 0 22px 22px !important;
  }

  .client-public-home-hero {
    overflow: hidden;
    border: 1px solid rgba(115, 214, 198, .12);
    background:
      radial-gradient(circle at 88% 10%, rgba(55, 194, 177, .22), transparent 30rem),
      radial-gradient(circle at 6% 104%, rgba(231, 185, 89, .18), transparent 24rem),
      linear-gradient(132deg, #04141e 0%, #082f3b 54%, #075760 100%) !important;
    box-shadow: 0 34px 88px rgba(4, 27, 37, .22);
  }

  .client-public-home-copy h1 {
    max-width: 630px;
    font-size: clamp(3.75rem, 4.35vw, 5.05rem) !important;
    letter-spacing: -.065em;
  }

  .client-public-home-copy > p {
    max-width: 560px;
    color: rgba(238, 248, 248, .78);
  }

  .client-public-home-hero .client-public-rates {
    position: relative;
    overflow: hidden;
    padding: 30px !important;
    border: 1px solid rgba(142, 220, 207, .14) !important;
    border-radius: 30px !important;
    background:
      linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
      rgba(1, 20, 28, .62) !important;
    background-size: 32px 32px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 54px rgba(0, 0, 0, .18) !important;
  }

  .client-public-home-hero .client-public-rates::after {
    content: "MERCADO EN LÍNEA";
    position: absolute;
    right: 30px;
    bottom: 26px;
    color: rgba(133, 222, 207, .42);
    font: 800 .57rem/1 Manrope, sans-serif;
    letter-spacing: .16em;
    pointer-events: none;
  }

  .client-public-section-head {
    margin-bottom: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .client-public-rate-viewport {
    border-radius: 22px !important;
  }

  .client-public-home-hero .client-public-rate-grid article,
  .client-public-home-hero .client-public-rate-grid article:first-child {
    min-height: 300px !important;
    padding: 34px 36px !important;
    border: 1px solid rgba(126, 220, 204, .2) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 90% 16%, rgba(125, 224, 207, .12), transparent 14rem),
      linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }

  .client-public-home-hero .client-route-flags {
    gap: 10px !important;
    margin-bottom: 0;
  }

  .client-public-home-hero .client-route-flags b {
    color: rgba(255, 255, 255, .42);
  }

  .client-public-home-hero .client-public-rate-route {
    margin-top: 28px !important;
    color: rgba(244, 251, 250, .74);
    font-size: .78rem !important;
    font-weight: 800;
    letter-spacing: .015em;
  }

  .client-public-home-hero .client-public-rate-value,
  .client-public-home-hero .client-public-rate-grid article:first-child .client-public-rate-value {
    margin-top: 12px !important;
    font-size: clamp(2.75rem, 3.25vw, 4rem) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.055em;
  }

  .client-public-home-hero .client-public-rate-grid article > small {
    margin-top: 13px !important;
    color: #83dccc;
  }

  .client-public-rate-controls {
    justify-content: flex-start !important;
    margin-top: 16px !important;
  }

  .client-public-rate-controls > button {
    background: rgba(255, 255, 255, .07) !important;
  }

  .client-public-rate-dots {
    min-width: 64px;
  }
}

@media (max-width: 760px) {
  .client-public-nav {
    background: #fff !important;
  }

  .client-public-home-body .client-public-flag {
    width: 38px !important;
    height: 25px !important;
    border-radius: 6px !important;
  }
}