/*
 * Home Italy .Org — Diventa socio P03
 * Build: 2026-08-01
 * Scope: /pages/diventa_socio.php
 * Prerequisite: HomeItaly P01 + P02.
 */

.hi-membership-page {
  --him-navy-950: var(--hi-navy-950, #031a32);
  --him-navy-900: var(--hi-navy-900, #08243f);
  --him-navy-800: var(--hi-navy-800, #0d3657);
  --him-gold: var(--hi-gold, #c58a2b);
  --him-gold-dark: var(--hi-gold-dark, #a96f1d);
  --him-gold-light: var(--hi-gold-light, #e4bf72);
  --him-gold-soft: var(--hi-gold-soft, #f6e8c9);
  --him-cream: var(--hi-cream, #f8f1e7);
  --him-paper: var(--hi-paper, #fffaf3);
  --him-ink: var(--hi-ink, #10243a);
  --him-muted: var(--hi-muted, #667383);
  --him-border: var(--hi-border, rgba(3, 26, 50, .13));
  --him-shadow-sm: 0 10px 30px rgba(3, 26, 50, .08);
  --him-shadow-md: 0 24px 60px rgba(3, 26, 50, .15);
  --him-radius: 24px;

  position: relative;
  isolation: isolate;
  color: var(--him-ink);
}

.hi-membership-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem calc(50% - 50vw) auto;
  height: 32rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, rgba(22, 130, 75, .08), transparent 22rem),
    radial-gradient(circle at 92% 16%, rgba(201, 54, 66, .065), transparent 21rem);
}

.hi-membership-page h1,
.hi-membership-page h2,
.hi-membership-page h3,
.hi-membership-page h4 {
  color: var(--him-navy-950);
  letter-spacing: -.025em;
}

.hi-membership-page p,
.hi-membership-page li {
  text-wrap: pretty;
}

.hi-membership-page .text-muted {
  color: var(--him-muted) !important;
}

.hi-membership-page .text-primary {
  color: var(--him-gold-dark) !important;
}

.hi-membership-page .btn {
  border-radius: 999px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.hi-membership-page .btn:hover,
.hi-membership-page .btn:focus-visible {
  transform: translateY(-1px);
}

.hi-membership-page .btn-primary {
  border-color: var(--him-gold);
  background: var(--him-gold);
  color: var(--him-navy-950);
  box-shadow: 0 10px 24px rgba(197, 138, 43, .22);
}

.hi-membership-page .btn-primary:hover,
.hi-membership-page .btn-primary:focus-visible {
  border-color: var(--him-gold-dark);
  background: var(--him-gold-light);
  color: var(--him-navy-950);
}

.hi-membership-page .btn-outline-primary {
  border-color: rgba(3, 26, 50, .28);
  color: var(--him-navy-900);
}

.hi-membership-page .btn-outline-primary:hover,
.hi-membership-page .btn-outline-primary:focus-visible {
  border-color: var(--him-gold);
  background: var(--him-gold-soft);
  color: var(--him-navy-950);
}

.hi-membership-page .btn-dark {
  border-color: var(--him-navy-950);
  background: var(--him-navy-950);
  color: #fff;
}

.hi-membership-page .btn-dark:hover,
.hi-membership-page .btn-dark:focus-visible {
  border-color: var(--him-navy-800);
  background: var(--him-navy-800);
  color: #fff;
}

.hi-membership-context {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--him-border);
  border-radius: 18px;
  background: rgba(255, 250, 243, .94);
  color: var(--him-ink);
  box-shadow: var(--him-shadow-sm);
}

.hi-membership-context .hi-auth-context-dot {
  flex: 0 0 auto;
  background: var(--portal-accent, var(--him-gold));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--portal-accent, var(--him-gold)) 15%, transparent);
}

.hi-membership-context strong,
.hi-membership-context span {
  display: block;
}

.hi-membership-context strong {
  color: var(--him-navy-950);
}

.hi-membership-context span {
  color: var(--him-muted);
}

.membership-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--portal-accent, var(--him-gold)) 34%, transparent), transparent 24rem),
    radial-gradient(circle at 18% 110%, rgba(197, 138, 43, .22), transparent 24rem),
    linear-gradient(135deg, var(--him-navy-950), var(--him-navy-800) 58%, color-mix(in srgb, var(--portal-accent-2, var(--him-navy-800)) 46%, var(--him-navy-950)));
  box-shadow: var(--him-shadow-md);
}

.membership-hero::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 24rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 36px rgba(255, 255, 255, .035),
    0 0 0 82px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.membership-hero h1,
.membership-hero h2,
.membership-hero h3 {
  color: #fff;
}

.membership-hero p {
  max-width: 62rem;
  color: rgba(255, 255, 255, .84);
}

.membership-hero-content {
  position: relative;
  z-index: 1;
}

.membership-hero-image {
  width: min(100%, 330px);
  max-height: 290px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .30));
}

.membership-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.membership-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.membership-hero-row + .membership-hero-row {
  margin-top: .7rem;
}

.membership-hero .btn-light {
  border-color: #fff;
  background: #fff;
  color: var(--him-navy-950);
}

.membership-hero .btn-light:hover,
.membership-hero .btn-light:focus-visible {
  border-color: var(--him-gold-light);
  background: var(--him-gold-light);
  color: var(--him-navy-950);
}

.membership-hero .btn-outline-light {
  border-color: rgba(255, 255, 255, .52);
  color: #fff;
  background: rgba(255, 255, 255, .03);
}

.membership-hero .btn-outline-light:hover,
.membership-hero .btn-outline-light:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.membership-section {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--him-border);
  border-radius: var(--him-radius);
  background: rgba(255, 250, 243, .97);
  box-shadow: var(--him-shadow-sm);
}

.membership-section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #16824b 0 33.333%, #f7f1e7 33.333% 66.666%, #c93642 66.666% 100%);
  opacity: .78;
}

.membership-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--him-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--him-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.membership-card:hover {
  transform: translateY(-3px);
  border-color: rgba(197, 138, 43, .34);
  box-shadow: 0 18px 34px rgba(3, 26, 50, .12);
}

.membership-path-card {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--him-border);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, var(--him-paper));
  box-shadow: 0 8px 24px rgba(3, 26, 50, .06);
}

.membership-path-card h3 {
  color: var(--him-navy-950);
}

.membership-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(197, 138, 43, .30);
  border-radius: 16px;
  background: var(--him-gold-soft);
  color: var(--him-gold-dark);
  font-size: 1.35rem;
  font-weight: 900;
}

.membership-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.membership-step-number {
  flex: 0 0 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--him-navy-950);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(3, 26, 50, .18);
}

.membership-note {
  padding: 17px 19px;
  border: 1px solid rgba(197, 138, 43, .24);
  border-left: 4px solid var(--him-gold);
  border-radius: 14px;
  background: var(--him-gold-soft);
  color: var(--him-navy-900);
}

.membership-price-box {
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid rgba(197, 138, 43, .24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(197, 138, 43, .14), transparent 14rem),
    linear-gradient(145deg, #fff, var(--him-paper));
}

.membership-price {
  color: var(--him-navy-950);
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 950;
  line-height: 1;
}

.membership-price small {
  color: var(--him-muted);
  font-size: 1rem;
  font-weight: 750;
}

.membership-list {
  padding-left: 1.15rem;
}

.membership-list li {
  margin-bottom: .5rem;
}

.membership-list li::marker {
  color: var(--him-gold-dark);
}

.membership-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.membership-guide-pill {
  border-radius: 999px;
  font-weight: 800;
}

.membership-whatsapp {
  padding: 22px;
  border: 1px solid rgba(25, 135, 84, .18);
  border-radius: 18px;
  background: #e9f8ef;
}

.membership-whatsapp strong {
  color: #0f5132;
}

.membership-whatsapp-btn {
  border-color: #25d366 !important;
  background: #25d366 !important;
  color: var(--him-navy-950) !important;
  font-weight: 850;
}

.membership-whatsapp-btn:hover,
.membership-whatsapp-btn:focus-visible {
  border-color: #1fb85a !important;
  background: #1fb85a !important;
  color: var(--him-navy-950) !important;
}

.campaign-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid rgba(197, 138, 43, .30);
  border-radius: 30px;
  color: var(--him-navy-950);
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 255, 255, .94), transparent 20rem),
    radial-gradient(circle at 8% 100%, rgba(22, 130, 75, .10), transparent 18rem),
    linear-gradient(135deg, #f1d089, #fff4d7 52%, #f8f1e7);
  box-shadow: var(--him-shadow-md);
}

.campaign-hero::after {
  content: "1000";
  position: absolute;
  right: clamp(-1rem, 1vw, 1rem);
  bottom: -2.7rem;
  color: rgba(3, 26, 50, .045);
  font-size: clamp(8rem, 22vw, 17rem);
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.campaign-hero > * {
  position: relative;
  z-index: 1;
}

.campaign-code {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  max-width: 100%;
  padding: 12px 16px;
  border: 2px dashed rgba(3, 26, 50, .38);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  color: var(--him-navy-950);
  font-size: clamp(1.05rem, 3vw, 1.75rem);
  font-weight: 950;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

.campaign-counter {
  padding: 22px;
  border: 1px solid rgba(3, 26, 50, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(3, 26, 50, .08);
  backdrop-filter: blur(8px);
}

.campaign-counter-number {
  color: var(--him-navy-950);
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 950;
  line-height: 1;
}

.campaign-counter .progress {
  height: .72rem;
  border-radius: 999px;
  background: rgba(3, 26, 50, .10);
}

.campaign-counter .progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #16824b, var(--him-gold), #c93642);
}

.membership-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(197, 138, 43, .28), transparent 20rem),
    linear-gradient(135deg, var(--him-navy-950), var(--him-navy-800));
  box-shadow: var(--him-shadow-md);
}

.membership-cta h2,
.membership-cta h3 {
  color: #fff;
}

.membership-cta p {
  color: rgba(255, 255, 255, .80);
}

.membership-cta .btn-light {
  border-color: var(--him-gold);
  background: var(--him-gold);
  color: var(--him-navy-950);
}

.membership-cta .btn-light:hover,
.membership-cta .btn-light:focus-visible {
  border-color: var(--him-gold-light);
  background: var(--him-gold-light);
  color: var(--him-navy-950);
}

.membership-cta .btn-outline-light {
  border-color: rgba(255, 255, 255, .50);
  color: #fff;
}

.membership-cta .btn-outline-light:hover,
.membership-cta .btn-outline-light:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

@media (max-width: 991.98px) {
  .membership-hero-image {
    max-height: 230px;
  }

  .membership-hero .col-lg-4 {
    order: -1;
  }

  .membership-hero .col-lg-4 img {
    width: min(62vw, 260px);
  }
}

@media (max-width: 767.98px) {
  .hi-membership-page {
    padding-top: 1rem !important;
  }

  .hi-membership-context {
    align-items: flex-start;
  }

  .membership-hero,
  .membership-section,
  .membership-cta,
  .campaign-hero {
    border-radius: 22px;
  }

  .membership-hero-row,
  .membership-guide-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .membership-hero-row .btn,
  .membership-guide-actions .btn,
  .membership-cta .btn {
    width: 100%;
  }

  .membership-step {
    gap: 12px;
  }

  .membership-step-number {
    flex-basis: 38px;
    height: 38px;
  }

  .campaign-code {
    display: grid;
    width: 100%;
    text-align: center;
  }

  .campaign-code .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-membership-page .btn,
  .membership-card {
    transition: none;
  }

  .hi-membership-page .btn:hover,
  .hi-membership-page .btn:focus-visible,
  .membership-card:hover {
    transform: none;
  }
}

@media print {
  .hi-membership-page .btn,
  .membership-guide-actions,
  .membership-whatsapp,
  .membership-cta {
    display: none !important;
  }

  .membership-hero,
  .campaign-hero,
  .membership-section {
    color: #000;
    background: #fff;
    box-shadow: none;
  }
}