/* =========================================================================
   Landing de Captación - Gabinete Místico
   Mobile first (desde 320px). Solo se animan transform y opacity.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --c-night-900: #080b18;
  --c-night-800: #0d1226;
  --c-night-700: #131a33;
  --c-night-600: #1b2445;
  --c-cream-50:  #fbf7ee;
  --c-cream-100: #f4ecdc;
  --c-cream-200: #e7d9be;
  --c-gold-500:  #c9a227;
  --c-gold-400:  #d9b64a;
  --c-gold-300:  #e8cd7e;
  /* Ambar (tono 33-38). El dorado amarillo se percibe verdoso, asi que los
     acentos usan esta rama: la clara sobre fondo oscuro, las oscuras sobre
     crema, donde el ambar claro no tendria contraste suficiente. */
  --c-amber-300: #eab473;
  --c-amber-600: #b0740f;
  --c-amber-700: #9a5a0c;
  --c-ink-900:   #1a1508;
  --c-ink-600:   #544b34;
  --c-mist-100:  #eef1fa;
  --c-mist-400:  #a3abc7;
  --c-danger:    #c2564a;
  --c-success:   #3f8f6d;

  /* El extremo oscuro tira hacia el ambar (mas rojo, menos verde) para que
     el degradado no se perciba verdoso en la mitad derecha del boton. */
  --g-gold: linear-gradient(135deg, #edd188 0%, #d3a52c 52%, #b9741a 100%);
  --g-night: linear-gradient(180deg, #0d1226 0%, #080b18 100%);

  /* Tipografía */
  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Geometrica y algo condensada: diferencia las llamadas a la accion del
     texto corrido sin romper la sobriedad del conjunto. */
  --ff-ui: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2rem, 1.35rem + 3.2vw, 3.75rem);
  --fs-h2:    clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  /* Titulos de tarjeta en la fuente de interfaz: algo menor que --fs-h3
     porque su altura de x es mayor que la del display serif. */
  --fs-card-title: clamp(1.02rem, 0.94rem + 0.36vw, 1.2rem);
  --fs-lead:  clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  --fs-body:  clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --fs-small: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --fs-btn:   clamp(0.82rem, 0.74rem + 0.4vw, 1rem);
  --fs-badge: clamp(0.68rem, 0.62rem + 0.3vw, 0.82rem);
  /* El aviso de urgencia del hero es una frase de 70 caracteres que debe
     caber en una sola linea. Se ata al ancho disponible con una pendiente
     medida (2.35vw) para que el texto quepa desde 320px sin bajar de un
     tamano legible, con tope en 0.82rem donde ya cabe holgado. */
  --fs-badge-urgent: clamp(0.44rem, 2.3vw - 0.21rem, 0.78rem);

  /* Espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 56px; --sp-14: 72px; --sp-16: 96px;
  --gutter: 16px;
  --section-y: clamp(56px, 8vw, 112px);

  /* Radios y sombras */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --sh-1: 0 2px 10px rgba(4, 7, 18, .18);
  --sh-2: 0 14px 34px rgba(4, 7, 18, .3);
  --sh-gold: 0 10px 30px rgba(201, 162, 39, .32);

  --header-h: 62px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 74px; }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-night-900);
  color: var(--c-mist-100);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--ff-display); font-weight: 600; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-gold-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-gold-400);
  color: var(--c-ink-900);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}
.container--narrow { max-width: 860px; }

/* Ningun hijo directo del contenedor puede ensanchar la pagina. */
.container > * { min-width: 0; }

/* ---------- 3. Fondo de estrellas ---------- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.starfield__layer {
  position: absolute;
  inset: -50% -10%;
  background-repeat: repeat;
  opacity: .5;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.starfield__layer--a {
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(232, 205, 126, .85), transparent),
    radial-gradient(1.2px 1.2px at 70% 12%, rgba(238, 241, 250, .7), transparent),
    radial-gradient(1.6px 1.6px at 45% 68%, rgba(232, 205, 126, .6), transparent),
    radial-gradient(1.1px 1.1px at 88% 55%, rgba(238, 241, 250, .55), transparent),
    radial-gradient(1.3px 1.3px at 12% 82%, rgba(232, 205, 126, .5), transparent);
  background-size: 280px 280px;
  animation: drift-stars 90s linear infinite;
}
.starfield__layer--b {
  background-image:
    radial-gradient(1px 1px at 35% 22%, rgba(238, 241, 250, .5), transparent),
    radial-gradient(1px 1px at 80% 74%, rgba(232, 205, 126, .45), transparent),
    radial-gradient(1px 1px at 58% 44%, rgba(238, 241, 250, .4), transparent);
  background-size: 190px 190px;
  animation: drift-stars 140s linear infinite reverse;
  opacity: .35;
}

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 11, 24, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 162, 39, .16);
  transition: background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled { background: rgba(8, 11, 24, .94); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 1px solid rgba(214, 150, 62, .5);
  color: var(--c-amber-300);
  background: radial-gradient(circle at 35% 30%, rgba(214, 150, 62, .26), transparent 70%);
}
.brand__mark svg { width: 17px; height: 17px; }
.brand__text-accent { color: var(--c-amber-300); }

/* Navegación */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: rgba(10, 14, 32, .98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 162, 39, .18);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  transform: translate3d(0, -12px, 0);
  opacity: 0;
  visibility: hidden;
  transition: transform .28s ease, opacity .28s ease, visibility .28s;
}
.nav.is-open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}
.nav__list { display: grid; gap: var(--sp-1); }
.nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  font-size: .95rem;
  color: var(--c-mist-400);
  border-radius: var(--r-sm);
  transition: color .2s ease, transform .2s ease;
}
.nav__link:hover, .nav__link.is-active { color: var(--c-gold-300); }
.nav__cta { justify-self: start; }

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: none;
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: var(--r-sm);
  color: var(--c-gold-300);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.nav-toggle:hover { transform: translate3d(0, -1px, 0); border-color: var(--c-gold-400); }
.nav-toggle svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* 1000px y no 900: con siete enlaces mas el CTA, la barra horizontal
   no cabe por debajo de ese ancho. */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__list { display: flex; align-items: center; gap: var(--sp-1); }
  .nav__link { padding: var(--sp-2) var(--sp-3); font-size: .9rem; position: relative; }
  .nav__link::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 2px;
    height: 1px;
    background: var(--c-gold-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
}

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  /* El borde transparente de 1px iguala la altura entre variantes, pero por
     defecto el degradado se dimensiona al padding box (background-origin) y
     bajo ese anillo se transparentaba la sombra, dejando una linea clara en
     el canto derecho. Anclando origen y recorte al border box, el degradado
     cubre tambien el borde. */
  background-origin: border-box;
  background-clip: border-box;
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .22s ease, box-shadow .22s ease,
              background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.btn--primary {
  background-image: var(--g-gold);
  color: var(--c-ink-900);
  box-shadow: var(--sh-gold);
}
.btn--primary:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 16px 38px rgba(201, 162, 39, .42);
}
.btn--primary:active { transform: translate3d(0, 0, 0); }

.btn--ghost {
  border-color: rgba(201, 162, 39, .55);
  color: var(--c-gold-300);
  background: rgba(232, 205, 126, .05);
}
.btn--ghost:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--c-gold-400);
  background: rgba(232, 205, 126, .12);
}

.btn--sm { min-height: 40px; padding: 0 var(--sp-4); }
.btn--lg { min-height: 54px; padding: 0 clamp(18px, 4vw, 30px); }
.btn--block { width: 100%; }

/* ---------- 6. Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid rgba(201, 162, 39, .45);
  background: rgba(232, 205, 126, .08);
  color: var(--c-gold-300);
  font-size: var(--fs-badge);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.badge > span { min-width: 0; }

/* El aviso de urgencia es una frase larga: por debajo de 560px se permite
   que fluya en varias lineas en lugar de desbordar el viewport. El resto de
   badges y todos los botones mantienen nowrap y escalan con clamp. */
/* El aviso de urgencia es una frase de 70 caracteres, mucho mas larga que el
   resto de badges, asi que necesita su propia escala: se mantiene en una sola
   linea y es el tamano de letra el que cede para caber en la columna del hero.
   La pildora se ajusta al texto (no estira hasta el ancho de la columna). */
.badge--urgent {
  width: fit-content;
  max-width: 100%;
  font-size: var(--fs-badge-urgent);
  letter-spacing: .01em;
}
/* Por debajo de ~700px la version en mayusculas ya no cabe a un tamano
   legible (ocupan ~15% mas de ancho), asi que se usa caja normal y se
   recorta el acolchado lateral para ceder ancho al texto. */
@media (max-width: 699px) {
  .badge--urgent {
    text-transform: none;
    letter-spacing: 0;
    padding-inline: var(--sp-3);
    gap: var(--sp-1);
  }
}

.badge--urgent {
  transform: translate3d(0, 0, 0);
  animation: pulse-halo 3.2s ease-in-out infinite;
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88svh, 820px);
  padding-block: clamp(72px, 12vh, 120px) clamp(64px, 10vh, 104px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: hero-zoom 26s ease-in-out infinite alternate;
}
.hero__veil {
  position: absolute;
  inset: 0;
  /* El lado izquierdo se oscurece mas que el derecho para anclar el texto
     sobre una base solida, dejando respirar la imagen a la derecha. */
  background:
    linear-gradient(95deg, rgba(8, 11, 24, .97) 0%, rgba(8, 11, 24, .9) 34%, rgba(8, 11, 24, .55) 68%, rgba(8, 11, 24, .3) 100%),
    linear-gradient(180deg, rgba(8, 11, 24, .72) 0%, rgba(8, 11, 24, .22) 40%, rgba(8, 11, 24, .9) 100%);
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.hero__orb--1 {
  width: clamp(180px, 42vw, 380px);
  aspect-ratio: 1;
  top: 8%;
  right: -12%;
  background: radial-gradient(circle, rgba(201, 162, 39, .55), transparent 68%);
  animation: float-slow 11s ease-in-out infinite;
}
.hero__orb--2 {
  width: clamp(140px, 34vw, 300px);
  aspect-ratio: 1;
  bottom: 12%;
  left: -14%;
  background: radial-gradient(circle, rgba(97, 118, 214, .45), transparent 68%);
  animation: float-slow 14s ease-in-out infinite reverse;
  animation-delay: -3s;
}
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, var(--c-night-900));
  pointer-events: none;
}

/* grid-template-columns: minmax(0, 1fr) evita que un hijo con nowrap
   (el badge) ensanche la columna mas alla del contenedor. */
/* El contenedor conserva su ancho completo (y por tanto su margen izquierdo
   alineado con el resto de la pagina); es la columna de contenido la que se
   limita, de modo que el texto queda anclado a la izquierda y no flotando
   en el centro del viewport. */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, min(620px, 100%));
  justify-content: start;
  justify-items: start;
  gap: clamp(24px, 3vw, 34px);
}
.hero__inner > * { max-width: 100%; min-width: 0; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__title-accent {
  color: var(--c-gold-300);
  font-style: italic;
  background: linear-gradient(100deg, #e8cd7e, #f6e5b6 45%, #c9a227);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-mist-400);
  max-width: 56ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-2);
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-mist-400);
  white-space: nowrap;
}
.hero__facts svg { width: 16px; height: 16px; color: var(--c-gold-400); flex: 0 0 auto; }

/* ---------- 8. Secciones ---------- */
.section {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
  overflow: hidden;
}
/* Seccion que continua sobre el mismo fondo que la anterior: no necesita el
   ritmo vertical completo, pero si un respiro claro entre ambas. */
.section--tight { padding-top: clamp(52px, 7vw, 96px); }

.section--night { background: var(--g-night); }
.section--cream { background: var(--c-cream-50); color: var(--c-ink-900); }
.section--cream .section__lead { color: var(--c-ink-600); }

.section__glow {
  position: absolute;
  top: -10%;
  left: -18%;
  width: clamp(260px, 55vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 66%);
  filter: blur(30px);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: float-slow 16s ease-in-out infinite;
}
.section__glow--right { left: auto; right: -20%; top: 20%; animation-delay: -6s; }

.section__head {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
  margin-bottom: clamp(40px, 5.5vw, 68px);
}
.section__title {
  font-size: var(--fs-h2);
  text-wrap: balance;
}
.section__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-mist-400);
  max-width: 58ch;
}
.section__rule {
  position: relative;
  display: block;
  width: 92px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold-500), transparent);
  overflow: hidden;
}
.section__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 214, .95), transparent);
  transform: translate3d(-120%, 0, 0);
  animation: shimmer-line 4s ease-in-out infinite;
}
.section__rule--left { margin-inline: 0; background: linear-gradient(90deg, var(--c-gold-500), transparent); }

/* ---------- 9. Beneficios ---------- */
.benefits {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 560px) { .benefits { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

.benefit-card {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-cream-100);
  border: 1px solid var(--c-cream-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.benefit-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 40px rgba(90, 72, 24, .16);
  border-color: rgba(201, 162, 39, .55);
}
.benefit-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--g-gold);
  color: var(--c-ink-900);
  box-shadow: 0 6px 16px rgba(201, 162, 39, .3);
}
.benefit-card__icon svg { width: 22px; height: 22px; }
/* Los titulos de tarjeta van en la fuente de interfaz (Outfit), la misma de
   los botones: son etiquetas cortas de lectura rapida, no texto corrido, y
   el display serif se reserva para los titulares de seccion. */
.benefit-card__title {
  font-family: var(--ff-ui);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
}
.benefit-card__text { color: var(--c-ink-600); }

/* ---------- 10. Proceso ---------- */
.steps {
  position: relative;
  display: grid;
  gap: var(--sp-5);
}
/* La progresion se dibuja con un conector por paso (entre tarjeta y tarjeta),
   no con una unica linea de fondo: asi se ve el recorrido de un paso al
   siguiente y no queda tapada por las tarjetas opacas.
   En movil el conector es vertical y baja desde el circulo numerado. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 39px;
  top: 100%;
  width: 2px;
  height: var(--sp-5);
  background: linear-gradient(180deg, var(--c-gold-500), rgba(201, 162, 39, .25));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s ease calc(var(--step-order, 0) * .18s + .25s);
}
.steps.is-drawn .step:not(:last-child)::after { transform: scaleY(1); }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: rgba(19, 26, 51, .74);
  border: 1px solid rgba(201, 162, 39, .16);
  border-radius: var(--r-lg);
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.step:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(201, 162, 39, .45);
  background: rgba(27, 36, 69, .8);
}
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .45);
  background: radial-gradient(circle at 35% 30%, rgba(201, 162, 39, .3), rgba(8, 11, 24, .9) 72%);
  color: var(--c-gold-300);
}
.step__num svg { width: 21px; height: 21px; }

/* Numero de orden: es lo que convierte los iconos en una secuencia legible. */
.step__count {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background-image: var(--g-gold);
  color: var(--c-ink-900);
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(8, 11, 24, .55);
}
.step__body { display: grid; gap: var(--sp-1); }
.step__title {
  font-family: var(--ff-ui);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
}
.step__text { color: var(--c-mist-400); }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

  /* En escritorio el conector cruza el hueco entre tarjeta y tarjeta,
     centrado respecto a la altura de las tarjetas. */
  .step:not(:last-child)::after {
    left: 100%;
    top: 50%;
    width: var(--sp-6);
    height: 2px;
    background: linear-gradient(90deg, rgba(201, 162, 39, .25), var(--c-gold-500), rgba(201, 162, 39, .25));
    transform: translate3d(0, -50%, 0) scaleX(0);
    transform-origin: left;
  }
  .steps.is-drawn .step:not(:last-child)::after {
    transform: translate3d(0, -50%, 0) scaleX(1);
  }

  .step {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-5);
  }
  .step__body { justify-items: center; }
}

/* ---------- 11. Marcas colaboradoras ---------- */
/* Franja sobria: la prueba social aqui es de solvencia, no de decoracion, asi
   que los logos van monocromos en dorado y solo ganan presencia al pasar el
   cursor. La seccion va sobre fondo claro para mantener el intercalado
   claro/oscuro del resto de la pagina. */

.brands__kicker {
  margin: 0 auto;
  max-width: 46ch;
  text-align: center;
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-600);
  text-wrap: balance;
}

.brands__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3.5vw, 36px);
  align-items: center;
  justify-items: center;
  /* El margen y el acolchado superior se suman: juntos dejaban demasiado aire
     entre el texto y los logos, asi que se recortan los dos. */
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: clamp(16px, 2vw, 22px) clamp(16px, 3vw, 36px);
  border-block: 1px solid var(--c-cream-200);
}
@media (min-width: 600px) {
  .brands__list { grid-template-columns: repeat(3, 1fr); }
}

.brands__item { display: grid; place-items: center; width: 100%; }

/* Los originales venian en mapa de bits con fondo blanco opaco (uno de ellos
   en JPEG, que ni siquiera admite alfa) y sobre el fondo oscuro se veian como
   tres recuadros blancos. En vez de forzar mezclas en CSS, los ficheros
   *-alpha.png son los mismos logotipos ya recortados: el blanco se convirtio
   en transparencia derivando el alfa de la luminancia, lo que conserva el
   suavizado de los bordes. Quedan como siluetas blancas que aqui solo hay
   que tintar. */
.brands__item {
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease;
}
.brands__item:hover { transform: translate3d(0, -2px, 0); }

/* La silueta es blanca, y sobre blanco puro los filtros de tono apenas hacen
   efecto (no hay color que desplazar). Se tinta usando la propia silueta como
   mascara sobre un relleno dorado, que da el color exacto del sistema. */
.brands__logo {
  display: block;
  width: 100%;
  max-width: 172px;
  height: auto;
  aspect-ratio: var(--ratio, 3 / 1);
  /* Degradado dorado con el mismo caracter que el de los botones (claro arriba
     a la izquierda, ambar abajo a la derecha), pero desplazado a tonos mas
     profundos: sobre el crema, el degradado de los botones se lava y su
     extremo claro casi desaparece (1.4:1 de contraste). Este rango se mantiene
     dorado y legible. */
  background-image: linear-gradient(135deg, #c8912a 0%, #b0740f 46%, #8f5109 100%);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  opacity: .88;
  transition: opacity .3s ease;
}
.brands__item:hover .brands__logo { opacity: 1; }

/* El isotipo de Tarot Infinito es cuadrado; sin tope de altura se veria
   mucho mas grande que los dos logotipos apaisados. */
.brands__logo--mark { max-width: 108px; }


/* ---------- 12. Requisitos ---------- */
.requisitos {
  display: grid;
  gap: clamp(36px, 5.5vw, 68px);
  align-items: center;
}
@media (min-width: 900px) { .requisitos { grid-template-columns: 1.05fr .95fr; } }

.requisitos__copy {
  display: grid;
  justify-items: start;
  gap: clamp(26px, 3.2vw, 34px);
}
.requisitos__copy .section__title { text-align: left; }

/* Cada requisito es una frase de dos lineas: necesitan separacion entre si
   para no leerse como un bloque compacto. */
.req-list { display: grid; gap: clamp(18px, 2.2vw, 24px); }
/* El check se centra respecto al bloque de texto completo, no respecto a la
   primera linea, para que los items de dos lineas queden equilibrados. */
.req-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-3);
  align-items: center;
  color: var(--c-mist-400);
}
.req-list svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .4);
  color: var(--c-gold-300);
}

.requisitos__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, .22);
  box-shadow: var(--sh-2);
}
.requisitos__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  transition: transform .6s ease;
}
.requisitos__media:hover img { transform: translate3d(0, 0, 0) scale(1.04); }
.requisitos__media-glow {
  position: absolute;
  inset: auto -20% -30% auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .38), transparent 66%);
  filter: blur(34px);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: float-slow 12s ease-in-out infinite;
}

/* ---------- 13. Testimonios ---------- */
.testimonials {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 700px) { .testimonials { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-cream-100);
  border: 1px solid var(--c-cream-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.testimonial:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 40px rgba(90, 72, 24, .16);
  border-color: rgba(201, 162, 39, .5);
}
.testimonial__quote {
  width: 26px;
  height: 26px;
  color: var(--c-gold-500);
  opacity: .75;
}
/* Los testimonios son parrafos completos, no citas breves: el display serif
   en cursiva penalizaba mucho la lectura. Se pasan a la sans del cuerpo, en
   redonda y con mas interlineado. */
.testimonial__text {
  font-family: var(--ff-body);
  font-size: clamp(.92rem, .88rem + .18vw, 1rem);
  font-style: normal;
  line-height: 1.65;
  color: var(--c-ink-600);
  text-wrap: pretty;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-cream-200);
}
.testimonial__avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(201, 162, 39, .5);
}
.testimonial__author span { display: grid; min-width: 0; }
.testimonial__author strong { font-size: .95rem; color: var(--c-ink-900); }
.testimonial__author em {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--c-ink-600);
}

/* ---------- 14. Formulario ---------- */
.form {
  padding: clamp(20px, 4vw, 40px);
  background: rgba(19, 26, 51, .7);
  border: 1px solid rgba(201, 162, 39, .2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.form__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field__label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-mist-400);
  letter-spacing: .01em;
}
.req { color: var(--c-gold-400); margin-left: 2px; }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-mist-100);
  background: rgba(8, 11, 24, .6);
  border: 1px solid var(--c-night-600);
  border-radius: var(--r-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field__input::placeholder { color: rgba(163, 171, 199, .55); }
.field__input:hover { border-color: rgba(201, 162, 39, .35); }
.field__input:focus {
  outline: none;
  border-color: var(--c-gold-400);
  background: rgba(8, 11, 24, .85);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-gold-300) 50%),
    linear-gradient(135deg, var(--c-gold-300) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field__select option { background: var(--c-night-800); color: var(--c-mist-100); }

.field__input.is-invalid { border-color: var(--c-danger); }
.field__error {
  font-size: var(--fs-small);
  color: var(--c-danger);
  min-height: 0;
}
.field__error:empty { display: none; }

.note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-mist-400);
  background: rgba(201, 162, 39, .07);
  border: 1px solid rgba(201, 162, 39, .22);
  border-left: 3px solid var(--c-gold-500);
  border-radius: var(--r-sm);
}
.note svg { width: 18px; height: 18px; margin-top: 2px; color: var(--c-gold-300); }
.note strong { color: var(--c-gold-300); font-weight: 600; }
.note--alt { background: rgba(97, 118, 214, .08); border-color: rgba(97, 118, 214, .28); }

.form__submit { margin-top: var(--sp-1); }

.legal {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(163, 171, 199, .8);
  text-align: left;
}
.legal svg { width: 16px; height: 16px; margin-top: 3px; color: var(--c-gold-400); }

.form__status {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-success);
}
.form__status:empty { display: none; }
.form__status.is-error { color: var(--c-danger); }

/* ---------- 15. FAQ ---------- */
.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  background: var(--c-cream-100);
  border: 1px solid var(--c-cream-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq__item.is-open {
  border-color: rgba(176, 116, 15, .5);
  box-shadow: 0 10px 26px rgba(90, 72, 24, .12);
}
.faq__item h3 { margin: 0; font: inherit; }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-4);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: clamp(.9rem, .86rem + .25vw, 1.02rem);
  font-weight: 600;
  color: var(--c-ink-900);
  transition: color .2s ease;
}
.faq__trigger:hover { color: var(--c-amber-700); }
.faq__trigger svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--c-amber-600);
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition: transform .3s ease;
}
.faq__trigger[aria-expanded="true"] svg { transform: translate3d(0, 0, 0) rotate(180deg); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease;
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel-inner { overflow: hidden; }
.faq__panel-inner p {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--c-ink-600);
  line-height: 1.65;
}

.help-note {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin-top: clamp(28px, 5vw, 44px);
  padding: var(--sp-5);
  text-align: center;
  background: var(--c-cream-100);
  border: 1px dashed rgba(176, 116, 15, .45);
  border-radius: var(--r-lg);
}
.help-note svg { width: 26px; height: 26px; color: var(--c-amber-600); }

/* CTA principal del aviso: es la via de contacto alternativa al formulario,
   asi que gana algo mas de tamano que un boton normal. */
.help-note__cta {
  min-height: 56px;
  padding-inline: clamp(24px, 4vw, 36px);
  margin-top: var(--sp-1);
}
/* El glifo va en la tinta oscura del boton, igual que el texto. */
.help-note__cta-logo {
  width: 1.15em;
  height: 1.15em;
  filter: brightness(0) saturate(100%) invert(8%) sepia(24%) saturate(1103%) hue-rotate(3deg) brightness(96%) contrast(93%);
}

/* Los SVG de Simple Icons son un glifo negro solido: se tinta con filtros
   porque, al cargarse como <img>, no heredan currentColor. */
.help-note__logo {
  width: 28px;
  height: 28px;
  /* negro -> ambar (--c-amber-600), igual que el resto de acentos del F.A.Q. */
  filter: invert(48%) sepia(64%) saturate(760%) hue-rotate(6deg) brightness(88%) contrast(92%);
}
.help-note p { color: var(--c-ink-600); max-width: 46ch; }

/* ---------- 16. Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(36px, 6vw, 60px);
  background: var(--c-night-900);
  border-top: 1px solid rgba(201, 162, 39, .18);
}
.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.site-footer__text {
  font-size: var(--fs-small);
  color: var(--c-mist-400);
  max-width: 52ch;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
}
.site-footer__nav a {
  color: var(--c-mist-400);
  transition: color .2s ease;
}
.site-footer__nav a:hover { color: var(--c-gold-300); }

/* ---------- 17. WhatsApp flotante ---------- */
.wa-fab {
  position: fixed;
  right: clamp(12px, 3vw, 26px);
  bottom: clamp(12px, 3vw, 26px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-image: var(--g-gold);
  color: var(--c-ink-900);
  box-shadow: var(--sh-gold);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: float-card 7s ease-in-out infinite;
  transition: box-shadow .25s ease;
}
.wa-fab:hover { box-shadow: 0 16px 38px rgba(201, 162, 39, .5); }
/* Sobre el fondo dorado el glifo se deja en su negro original, que es lo que
   da el contraste; solo se suaviza hacia el tono de tinta de la marca. */
.wa-fab__logo {
  width: 26px;
  height: 26px;
  filter: brightness(0) saturate(100%) invert(8%) sepia(24%) saturate(1103%) hue-rotate(3deg) brightness(96%) contrast(93%);
}

/* ---------- 18. Reveal por scroll ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0s),
              transform .7s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0s);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- 19. Keyframes ---------- */
/* Todos los flotantes usan translate3d + una rotación mínima para forzar la
   composición en GPU. Sin esto, los navegadores que redondean a píxel entero
   muestran el movimiento escalonado. */
@keyframes float-slow {
  0%   { transform: translate3d(0, 0, 0) rotate(0.01deg); }
  50%  { transform: translate3d(0, -22px, 0) rotate(0.01deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0.01deg); }
}

@keyframes float-card {
  0%   { transform: translate3d(0, 0, 0) rotate(0.01deg); }
  50%  { transform: translate3d(0, -7px, 0) rotate(0.01deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0.01deg); }
}

@keyframes drift-stars {
  0%   { transform: translate3d(0, 0, 0) rotate(0.01deg); }
  100% { transform: translate3d(-280px, -140px, 0) rotate(0.01deg); }
}

@keyframes pulse-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .34); }
  60%      { box-shadow: 0 0 0 12px rgba(201, 162, 39, 0); }
}

@keyframes shimmer-line {
  0%   { transform: translate3d(-120%, 0, 0) rotate(0.01deg); }
  55%  { transform: translate3d(320%, 0, 0) rotate(0.01deg); }
  100% { transform: translate3d(320%, 0, 0) rotate(0.01deg); }
}

@keyframes hero-zoom {
  0%   { transform: translate3d(0, 0, 0) scale(1.04) rotate(0.01deg); }
  100% { transform: translate3d(0, 0, 0) scale(1.12) rotate(0.01deg); }
}

/* ---------- 20. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Los conectores quedan dibujados en su estado final, sin animar
     (en escritorio conservan el centrado vertical). */
  .step:not(:last-child)::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .step:not(:last-child)::after { transform: translate3d(0, -50%, 0) scaleX(1); }
}

/* ---------- 21. Ajustes finos para 320px ---------- */
@media (max-width: 359px) {
  .btn { padding-inline: var(--sp-4); }
  .btn--lg { min-height: 50px; }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  .badge { padding-inline: var(--sp-3); }
  /* A 320px el aviso necesita hasta el ultimo pixel de la pildora. */
  .badge--urgent { padding-inline: var(--sp-2); }
  .step { grid-template-columns: 40px 1fr; gap: var(--sp-3); padding: var(--sp-3); }
  .step__num { width: 40px; height: 40px; }
  /* El circulo se reduce a 40px: el conector se recoloca a su centro. */
  .step:not(:last-child)::after { left: 31px; }
  .form { padding: var(--sp-4) var(--sp-3); }
}

/* ---------- 22. Estilos para opciones personalizadas (Turnos, Periodicidad) ---------- */
.field__sublabel {
  font-size: 0.8rem;
  color: var(--c-mist-400);
  opacity: 0.85;
  margin-top: -2px;
  line-height: 1.4;
}

.options-group {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .options-group--checks {
    grid-template-columns: repeat(3, 1fr);
  }
  .options-group--radios {
    grid-template-columns: repeat(2, 1fr);
  }
}

.option-check,
.option-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(8, 11, 24, .6);
  border: 1px solid var(--c-night-600);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.option-check:hover,
.option-radio:hover {
  border-color: rgba(201, 162, 39, .4);
  background: rgba(8, 11, 24, .85);
}

.option-check__input,
.option-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.option-check__box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 4px;
  border: 1px solid var(--c-night-600);
  background: rgba(19, 26, 51, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.option-check__box svg {
  width: 14px;
  height: 14px;
  color: var(--c-night-900);
  opacity: 0;
  transform: scale(0.6);
  transition: all .2s ease;
}

.option-check__input:checked ~ .option-check__box {
  background: var(--g-gold);
  border-color: var(--c-gold-400);
}

.option-check__input:checked ~ .option-check__box svg {
  opacity: 1;
  transform: scale(1);
}

.option-check__input:checked ~ .option-check__label {
  color: var(--c-gold-300);
  font-weight: 500;
}

.option-check:has(.option-check__input:checked),
.option-radio:has(.option-radio__input:checked) {
  border-color: var(--c-gold-400);
  background: rgba(201, 162, 39, .12);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .3);
}

.option-radio__circle {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 1px solid var(--c-night-600);
  background: rgba(19, 26, 51, .8);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.option-radio__circle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-gold);
  opacity: 0;
  transform: scale(0);
  transition: all .2s ease;
}

.option-radio__input:checked ~ .option-radio__circle {
  border-color: var(--c-gold-400);
}

.option-radio__input:checked ~ .option-radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

.option-radio__input:checked ~ .option-radio__label {
  color: var(--c-gold-300);
  font-weight: 500;
}

.option-check__label,
.option-radio__label {
  font-size: var(--fs-body);
  color: var(--c-mist-100);
}