/* ==========================================================================
   Hintsters — registro (diseño nuevo)

   REGLA DE ORO DE ESTE ARCHIVO: no puede afectar nada fuera del registro.
   La página comparte layout con el resto del sitio (nav, buscador, footer),
   así que acá:

     - TODO cuelga de `.hs-reg`. No hay una sola regla suelta.
     - No se usan selectores de elemento sueltos (body, a, ul, h1...). Los
       resets del diseño original se convirtieron en descendientes.
     - Los nombres van con prefijo `hs-` para no chocar con Bootstrap 5 ni
       con hintsters.css, que ya definen .container .btn .card .nav .form
       .input .header .footer .section .step .steps .logo
     - Las variables van con prefijo --hs- por el mismo motivo.

   Lo que NO se estiliza acá y queda a cargo de Bootstrap: las utilidades que
   el JS agrega en runtime (d-none, col-lg-*, mx-auto, border-danger).
   ========================================================================== */

.hs-reg {
  --hs-blue:       #2563f5;
  --hs-blue-dark:  #1d4ed8;
  --hs-navy:       #101840;
  --hs-green:      #12b981;
  --hs-green-soft: #e6f7f1;
  --hs-purple:     #7c5cf5;
  --hs-purple-soft:#ede9fe;
  --hs-amber:      #f5b731;
  --hs-text:       #101840;
  --hs-muted:      #5a6486;
  --hs-soft:       #7b849f;
  --hs-border:     #e6e9f2;
  --hs-border-lt:  #eef1f8;
  --hs-danger:     #dc2626;
  --hs-bg-tint:    #f5f7ff;

  --hs-radius:     14px;
  --hs-radius-lg:  20px;
  --hs-radius-xl:  28px;
  --hs-shadow:     0 4px 16px rgba(16, 24, 64, .06);
  --hs-shadow-sm:  0 1px 2px rgba(16, 24, 64, .05);
  --hs-shadow-lg:  0 20px 50px rgba(16, 24, 64, .10);
  --hs-tap:        44px;
  --hs-section-y:  clamp(48px, 8vw, 76px);

  --hs-font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--hs-font);
  color: var(--hs-text);
  background: #fff;
}

/* Reset acotado: sustituye a los selectores de elemento del diseño original */
.hs-reg *,
.hs-reg *::before,
.hs-reg *::after { box-sizing: border-box; }

.hs-reg img { max-width: 100%; height: auto; display: block; }
.hs-reg p   { margin: 0; }
.hs-reg ul  { margin: 0; padding: 0; list-style: none; }
.hs-reg h1, .hs-reg h2, .hs-reg h3, .hs-reg h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}
.hs-reg a { color: var(--hs-blue); }

/* ==========================================================================
   Grilla: tarjeta centrada del Paso 2 (contraseña, checks, coreg...).
   El Paso 1 (email) usa su propio layout mas ancho: ver .hs-reg__hero.
   ========================================================================== */
.hs-reg__grid {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4.5vw, 24px);
  gap: 28px;
}

/* Costados del Paso 2: signup-left.jpg / signup-right.jpg, tal cual el
   mockup de newhintsters/registro.html. Ornamentales: ocultos hasta que
   hay espacio real (1100px), igual que alli. Nombre distinto de
   .hs-reg__hero-art para no chocar con el arte del Paso 1. */
/* Especificidad calificada a proposito: la regla de reset ".hs-reg img"
   (clase+elemento, mas abajo... digo, mas arriba en este archivo) tiene MAS
   especificidad que ".hs-reg__side-art" sola (clase+elemento vs una sola
   clase) y le ganaba al display:none, dejando las imagenes visibles en
   mobile, apiladas arriba del formulario. Confirmado con el CSSOM en vivo,
   no a ojo. ".hs-reg .hs-reg__side-art" (2 clases) le vuelve a ganar. */
.hs-reg .hs-reg__side-art { display: none; width: 100%; }

.hs-reg__card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--hs-border-lt);
  border-radius: var(--hs-radius-xl);
  box-shadow: var(--hs-shadow-lg);
  padding: clamp(24px, 5.5vw, 44px) clamp(20px, 5vw, 48px) clamp(24px, 5vw, 38px);
}

@media (min-width: 1100px) {
  .hs-reg__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
    align-items: center;
  }
  /* Especificidad calificada aca tambien: coincidia con .hs-reg img por
     casualidad (los dos dicen "block"), lo cual tapaba el mismo problema. */
  .hs-reg .hs-reg__side-art        { display: block; }
  .hs-reg .hs-reg__side-art--right { margin-left: auto; }

  /* Las imagenes laterales llevan .hidden (mismo mecanismo que la tarjeta
     del Paso 2: el JS hace $(".form-part-2").removeClass("hidden") cuando
     se revela el paso). Sin esto, mi propia regla display:block de arriba
     (2 clases) le ganaba por especificidad a .hidden (1 clase, definida en
     hintsters.css) y las imagenes se veian ANTES de llegar al Paso 2, con
     el hueco de la tarjeta -todavia oculta- vacio en el medio. 3 clases
     aca fuerzan que .hidden gane mientras este presente. */
  .hs-reg .hs-reg__side-art.hidden { display: none; }
}

/* ==========================================================================
   Hero del Paso 1: portado de newhintsters/index.html (chica + burbuja de
   pensamiento con las 8 categorias). Todos los selectores del componente
   original (.bubble, .cloud, .topic...) quedan calificados bajo
   .hs-reg__hero-art para no chocar con nada del resto del sitio; los valores
   (colores, coordenadas en %, clamp()) son los mismos que en newhintsters,
   asi que el resultado visual es identico.
   ========================================================================== */
.hs-reg__hero { width: 100%; padding-block: clamp(8px, 2vw, 24px) clamp(32px, 5vw, 56px); }

.hs-reg__hero-inner {
  display: grid;
  gap: clamp(20px, 4.5vw, 32px);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4.5vw, 24px);
}

/* Mobile-first: la imagen va PRIMERO (imagen -> titulo -> form), igual que
   newhintsters. El DOM queda intro->cta->art (mejor orden de lectura para
   lectores de pantalla) y esto lo reordena solo visualmente. Sin esto el
   hero mostraba texto primero y la ilustracion al final, al reves de lo
   pedido. Desde 1024px el grid de 2 filas de abajo fija la posicion
   explicitamente y este order deja de importar. */
.hs-reg__hero-art   { order: 1; }
.hs-reg__hero-intro { order: 2; }
.hs-reg__hero-cta   { order: 3; }

.hs-reg__hero-title {
  margin-top: clamp(16px, 4vw, 22px);
  font-size: clamp(31px, 3.4vw, 44px);
  font-weight: 700;
  color: var(--hs-navy);
  text-wrap: balance;
}
.hs-reg__hero-sub {
  margin-top: clamp(14px, 3vw, 22px);
  font-size: clamp(16px, 3.9vw, 20px);
  color: var(--hs-muted);
}

/* --- Barra de email: icono + input + boton en una sola pieza, igual que
   newhintsters/index.html (.email-form). NO es .hs-reg__field (ese patron
   -label arriba, caja aparte- es el del Paso 2). --- */
.hs-reg .email-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: clamp(22px, 5vw, 34px);
  max-width: 520px;
  background: #fff;
  /* Antes var(--hs-border), un gris casi invisible -- se pide que el borde
     se note siempre, no solo al hacer foco (mismo color que ya usaba
     :focus-within, mas abajo). */
  border: 1px solid #b9c9ff;
  border-radius: var(--hs-radius);
  box-shadow: var(--hs-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hs-reg .email-form:focus-within {
  border-color: #b9c9ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 245, .10);
}
.hs-reg .email-form__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 16px;
  min-width: 0;
}
.hs-reg .email-form__icon { flex: none; color: var(--hs-soft); }
.hs-reg .email-form__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;             /* 16px o iOS hace zoom al enfocar */
  color: var(--hs-text);
  padding: 14px 0;
}
.hs-reg .email-form__input::placeholder { color: var(--hs-soft); }

/* Check verde: el estado inicial (oculto) va inline en el HTML, no aca --
   ver el comentario en register.phtml. Mostrar/ocultar se maneja con
   jQuery .show()/.hide() (toca el style inline directo), asi que esto solo
   define el tamano/layout, no el display. */
.hs-reg .email-form__check { flex: none; }

/* Bootstrap 5 (ya cargado en el layout) usa .visually-hidden, no .sr-only
   (eso era Bootstrap 4). Se define aca para que el <label> del email quede
   oculto de verdad y no como texto suelto pisando el campo. */
.hs-reg .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hs-reg .email-form .email-form__submit {
  /* Calificado con ".email-form" ademas de ".hs-reg" (3 clases) a proposito:
     ".hs-reg__btn" (mas abajo en este archivo, para el boton de ancho
     completo del Paso 2) trae width:100% con la MISMA especificidad que
     ".hs-reg .email-form__submit" sola (2 clases), y por estar mas abajo en
     el archivo le ganaba en la cascada -> el campo de texto quedaba
     apretado a 32px y el boton desbordando/encimando la barra. Con 3 clases
     esta regla gana siempre, sin importar el orden. */
  width: auto;
  flex: none;
  margin: 0 6px 6px;
  padding: 14px;
  border-radius: 10px;
  box-shadow: none;
  text-align: center;
  cursor: pointer;
}
@media (min-width: 520px) {
  .hs-reg .email-form { flex-direction: row; }
  .hs-reg .email-form__field { padding: 0 16px; }
  .hs-reg .email-form__input { padding: 18px 0; }
  .hs-reg .email-form .email-form__submit { margin: 6px; padding: 14px clamp(20px, 4vw, 34px); }
}

/* --- Bonus + prueba social, debajo de la barra de email --- */
.hs-reg .bonus {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 4vw, 28px);
}
.hs-reg .bonus__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--hs-green-soft);
  display: grid;
  place-items: center;
}
.hs-reg .bonus__title { font-size: 15px; font-weight: 600; color: var(--hs-navy); }
.hs-reg .bonus__text  { font-size: 14px; color: var(--hs-muted); }

/* Sin bonus__text (se saco "Exclusive bonus after you join!"), el titulo
   queda solo -- un poco mas grande para que no se vea perdido/chico ahi. */
.hs-reg .bonus__title--lg { font-size: 20px; }

.hs-reg .trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(12px, 3vw, 20px);
  margin-top: clamp(18px, 4vw, 24px);
  font-size: clamp(14px, 3.6vw, 15px);
  color: var(--hs-muted);
}
.hs-reg .trust__item { display: inline-flex; align-items: center; gap: 8px; }
.hs-reg .trust__item strong { color: var(--hs-navy); font-weight: 600; }
.hs-reg .trust__sep { display: none; width: 1px; height: 22px; background: var(--hs-border); }

@media (min-width: 480px) {
  .hs-reg .trust { flex-wrap: nowrap; }
  .hs-reg .trust__sep { display: block; }
}

.hs-reg__hero-art {
  display: grid;
  gap: clamp(16px, 4vw, 24px);
  justify-items: center;
}

@media (min-width: 1024px) {
  /* Mas padding arriba: la nube usa inset NEGATIVO (sangra fuera de su
     propio contenedor) para dar la silueta curva. Con el padding chico de
     mobile (~24px) esa sangria se comia el borde del nav de arriba, ~11px
     de superposicion medidos en vivo. clamp(40px,5vw,64px) es el mismo
     valor que usa newhintsters en este breakpoint. */
  .hs-reg__hero { padding-block: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 56px); }

  /* 2 FILAS, no 1: newhintsters arma el hero con intro en la fila 1 (alta
     solo lo que el titulo+subtitulo ocupan) y cta en la fila 2, mientras el
     arte abarca ambas filas alineado abajo. Con una sola fila + align-items
     end, el bloque de texto entero (mucho mas bajo que la foto) quedaba
     centrado-hacia-el-fondo, empujando el titulo ~350px hacia abajo. Con 2
     filas el titulo queda pegado arriba y solo el cta se acerca al pie
     compartido con la foto. */
  .hs-reg__hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.31fr);
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: clamp(24px, 3vw, 40px);
    row-gap: 0;
  }
  .hs-reg__hero-intro { grid-column: 1; grid-row: 1; align-self: end; }
  .hs-reg__hero-cta   { grid-column: 1; grid-row: 2; padding-bottom: clamp(40px, 6vw, 72px); }
  .hs-reg__hero-art   { grid-column: 2; grid-row: 1 / span 2; align-self: end; }

  .hs-reg__hero-sub { max-width: 470px; }
}

/* --- Mobile: una sola foto a sangre con 5 categorias en vez de la burbuja
   componentizada (que en 8 tarjetas ocupaba demasiado alto). Los negativos
   comen el padding-inline de .hs-reg__hero-inner para llegar borde a borde,
   igual que en newhintsters. Se oculta desde 768px. --- */
.hs-reg__hero-art .hero__mobile-wrap {
  position: relative;
  width: calc(100% + clamp(16px, 4.5vw, 24px) * 2);
  margin-inline: calc(clamp(16px, 4.5vw, 24px) * -1);
}
.hs-reg__hero-art .hero__mobile { display: block; width: 100%; max-width: none; }

.hs-reg__hero-art .mtopics {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.hs-reg__hero-art .mtopic {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  /* Piso de 8px: a 9px "Compras"/"Comida" se pisan en espanol/portugues. */
  font-size: clamp(8px, 2.5vw, 13px);
  font-weight: 600;
  line-height: 1;
  color: var(--hs-navy);
}
.hs-reg__hero-art .mtopic--shopping { left: 57.6%; top: 26.5%; }
.hs-reg__hero-art .mtopic--food     { left: 69.9%; top: 26.5%; }
.hs-reg__hero-art .mtopic--music    { left: 82.9%; top: 26.5%; }
.hs-reg__hero-art .mtopic--travel   { left: 62.5%; top: 48.5%; }
.hs-reg__hero-art .mtopic--tv       { left: 76.5%; top: 47.4%; }

/* --- Burbuja: oculta en mobile (ocupaba demasiado alto), completa desde
   768px, igual que en newhintsters. --- */
.hs-reg__hero-art .bubble {
  display: none;
  position: relative;
  width: 100%;
  padding: clamp(12px, 3vw, 22px);
}

.hs-reg__hero-art .cloud {
  position: absolute;
  inset: -3% -4% -5%;
  z-index: 0;
  filter: drop-shadow(0 16px 34px rgba(16, 24, 64, .10));
}
.hs-reg__hero-art .cloud i { position: absolute; display: block; background: #fff; }
.hs-reg__hero-art .cloud__base { inset: 0; border-radius: 47% 53% 45% 55% / 55% 42% 58% 45%; }
.hs-reg__hero-art .cloud__lobe { display: none; }

.hs-reg__hero-art .sparkles { display: none; }

.hs-reg__hero-art .topics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 10px);
  align-items: stretch;
}
.hs-reg__hero-art .topic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 9px 3px 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--hs-shadow);
  text-align: center;
}
.hs-reg__hero-art .topic__icon { height: clamp(26px, 7.5vw, 34px); width: auto; }
.hs-reg__hero-art .topic__label {
  font-size: clamp(9.5px, 2.5vw, 11px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--hs-muted);
  overflow-wrap: anywhere;
}
.hs-reg__hero-art .topic__badge { display: none; }

.hs-reg__hero-art .hero__person { display: none; }

@media (min-width: 768px) {
  .hs-reg__hero-art .hero__mobile-wrap { display: none; }

  .hs-reg__hero-art {
    position: relative;
    display: block;
    aspect-ratio: 855 / 805;
    container-type: inline-size;
  }

  .hs-reg__hero-art .bubble { display: block; position: static; padding: 0; }
  .hs-reg__hero-art .topics { display: contents; }

  /* La nube: la BASE garantiza que las tarjetas de las esquinas queden
     dentro; los LOBULOS solo agregan silueta curva por fuera. */
  .hs-reg__hero-art .cloud { inset: 0; }
  .hs-reg__hero-art .cloud__base {
    inset: auto;
    left: 10%;
    top: -4%;
    width: 88%;
    height: 78%;
    border-radius: 22% 24% 23% 25% / 32% 30% 34% 31%;
  }
  .hs-reg__hero-art .cloud__lobe { display: block; border-radius: 50%; aspect-ratio: 1; }
  .hs-reg__hero-art .cloud__lobe--a { left: 15%; top:  -6%; width: 20%; }
  .hs-reg__hero-art .cloud__lobe--b { left: 38%; top:  -7%; width: 22%; }
  .hs-reg__hero-art .cloud__lobe--c { left: 64%; top:  -5%; width: 21%; }
  .hs-reg__hero-art .cloud__lobe--d { left: 79%; top:  16%; width: 20%; }
  .hs-reg__hero-art .cloud__lobe--e { left: 11%; top:  36%; width: 23%; }
  .hs-reg__hero-art .cloud__lobe--f { left: 40%; top:  44%; width: 25%; }
  .hs-reg__hero-art .cloud__lobe--g { left: 66%; top:  38%; width: 22%; }

  /* OJO: todo en cqw, no en %. 1cqw = 1% del ancho de .hs-reg__hero-art
     (el contenedor con container-type:inline-size de arriba). */
  .hs-reg__hero-art .topic {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 0.5cqw;
    padding: 1.8cqw 0.8cqw 1.4cqw;
    border-radius: 2.4cqw;
    transform: none;
  }
  .hs-reg__hero-art .topic__icon {
    flex: 0 0 100%;
    height: 11cqw;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .hs-reg__hero-art .topic__label { font-size: max(10px, 2cqw); }
  .hs-reg__hero-art .topic__badge {
    display: block;
    position: static;
    flex: none;
    width: 2.4cqw;
    height: 2.4cqw;
  }

  /* Coordenadas del mockup, en % de 855 x 805 (identicas a newhintsters) */
  .hs-reg__hero-art .topic--shopping      { left: 16.9%; top:  4.3%; width: 16.4%; height: 21.1%; }
  .hs-reg__hero-art .topic--food          { left: 35.7%; top:  2.5%; width: 17.5%; height: 21.1%; }
  .hs-reg__hero-art .topic--technology    { left: 57.3%; top:  3.1%; width: 17.5%; height: 21.7%; }
  .hs-reg__hero-art .topic--entertainment { left: 31.0%; top: 25.5%; width: 17.5%; height: 18.6%; }
  .hs-reg__hero-art .topic--products      { left: 50.3%; top: 24.8%; width: 17.5%; height: 19.3%; }
  .hs-reg__hero-art .topic--travel        { left: 73.1%; top: 19.3%; width: 18.1%; height: 20.5%; }
  .hs-reg__hero-art .topic--opinions      { left: 48.0%; top: 45.3%; width: 17.5%; height: 19.3%; }
  .hs-reg__hero-art .topic--rewards       { left: 67.3%; top: 38.5%; width: 18.1%; height: 19.3%; }

  /* La foto apoya en el borde inferior izquierdo y sobresale del marco
     (su suéter se mete bajo la columna de texto, igual que en newhintsters). */
  .hs-reg__hero-art .hero__person {
    display: block;
    position: absolute;
    left: -9.9%;
    bottom: 0;
    width: 62%;
    max-width: none;
    z-index: 2;
  }

  .hs-reg__hero-art .bubble__dots { display: contents; }
  .hs-reg__hero-art .bubble__dots i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--hs-shadow);
    aspect-ratio: 1;
  }
  .hs-reg__hero-art .bubble__dots i:nth-child(1) { left: 75.6%; top: 67.6%; width: 7.0%; }
  .hs-reg__hero-art .bubble__dots i:nth-child(2) { left: 68.6%; top: 73.5%; width: 4.8%; }
  .hs-reg__hero-art .bubble__dots i:nth-child(3) { left: 59.6%; top: 75.9%; width: 4.3%; }
  .hs-reg__hero-art .bubble__dots i:nth-child(4) { left: 54.3%; top: 82.2%; width: 3.7%; }

  .hs-reg__hero-art .sparkles { display: contents; }
  .hs-reg__hero-art .spark { position: absolute; z-index: 1; aspect-ratio: 1; }
  .hs-reg__hero-art .spark--dot { border-radius: 50%; }
  .hs-reg__hero-art .spark--1 { left: 30.9%; top:  1.6%; width: 1.0%; background: #a78bfa; }
  .hs-reg__hero-art .spark--2 { left: 54.9%; top:  2.3%; width: 0.8%; background: #5eead4; }
  .hs-reg__hero-art .spark--3 { left: 83.9%; top: 10.3%; width: 1.7%; }
  .hs-reg__hero-art .spark--4 { left: 93.5%; top: 15.8%; width: 2.1%; }
  .hs-reg__hero-art .spark--5 { left:  9.3%; top: 19.1%; width: 1.7%; }
  .hs-reg__hero-art .spark--6 { left: 88.0%; top: 33.0%; width: 1.5%; }
}

/* ==========================================================================
   Encabezado de la tarjeta
   ========================================================================== */
.hs-reg__steps {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-reg__steps-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--hs-muted);
  flex: none;
}
.hs-reg__track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  max-width: 220px;
}
.hs-reg__dot {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--hs-border);
  background: #fff;
  color: var(--hs-soft);
}
.hs-reg__dot--on {
  border-color: var(--hs-green);
  background: var(--hs-green);
  color: #fff;
}
.hs-reg__bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--hs-border);
}
.hs-reg__bar--on { background: var(--hs-green); }

.hs-reg__title {
  margin-top: clamp(16px, 4vw, 22px);
  text-align: center;
  font-size: clamp(24px, 5.6vw, 34px);
  color: var(--hs-navy);
  text-wrap: balance;
}
.hs-reg__sub {
  margin-top: 12px;
  text-align: center;
  font-size: clamp(15px, 3.8vw, 16px);
  color: var(--hs-muted);
}
.hs-reg__kicker {
  text-align: center;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight: 600;
  color: var(--hs-blue);
}

/* ==========================================================================
   Campos
   ========================================================================== */
.hs-reg__fields {
  margin-top: clamp(22px, 5vw, 30px);
  display: grid;
  gap: clamp(14px, 3vw, 18px);
}

.hs-reg__label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-navy);
}

/* Los <input>/<select> los genera Laminas, así que se estilizan por etiqueta
   pero SIEMPRE dentro del wrapper. */
/* OJO: hintsters.css trae un selector de elemento global
   `select { width: 90%; padding: 16px 20px; border: 2px solid #A6D8ED; }`.
   Estas reglas lo neutralizan dentro del registro. Se declaran `height` y
   `line-height` en forma explícita para que ninguna altura heredada recorte
   el texto, y el padding horizontal del select va más chico que el del input
   porque el navegador le reserva lugar aparte para la flecha. */
.hs-reg__field input[type="text"],
.hs-reg__field input[type="email"],
.hs-reg__field input[type="password"],
.hs-reg__field input[type="tel"],
.hs-reg__field select {
  width: 100%;
  height: auto;
  min-height: var(--hs-tap);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background: #fff;
  font-family: inherit;
  font-size: 16px;              /* 16px o iOS hace zoom al enfocar */
  line-height: 1.25;
  color: var(--hs-text);
  padding: clamp(11px, 2.6vw, 14px) 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hs-reg__field select {
  padding-right: 8px;           /* la flecha nativa ya ocupa su espacio */
  padding-left: 12px;
  text-overflow: ellipsis;      /* si igual no entra, corta con puntos */
  /* Bootstrap 5 le pone appearance:none a CUALQUIER select.form-control
     (no solo a .form-select, que es la unica que el sino le agrega su
     propia flecha via background-image) -- usGender usa form-control (ver
     RegisterForm.php), asi que se quedaba sin flecha del todo. Se restaura
     la nativa del navegador. */
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.hs-reg__field input:focus,
.hs-reg__field select:focus {
  outline: 0;
  border-color: #b9c9ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 245, .10);
}

.hs-reg__field input::placeholder { color: var(--hs-soft); }

/* Fecha de nacimiento: el mes necesita más ancho que el día y el año, si no
   "September" / "Septiembre" no entra en pantallas angostas. El minmax(0,…)
   es necesario para que las columnas puedan achicarse por debajo del ancho
   del contenido en vez de desbordar. */
.hs-reg__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px;
}

/* Mensajes de error del propio markup (p.error-form, #errorTC, #errorPP...).
   OJO: por defecto van OCULTOS. El markup original les daba un
   style="color:red" inline y la visibilidad la manejaba una clase separada
   en el hintsters.css global; al reskinear se perdio esa base y quedaban
   visibles SIEMPRE (el aviso de "agrega los terminos" se mostraba
   permanentemente, tildado o no). Se revelan agregando .is-visible o con la
   utilidad .d-block de Bootstrap (ya cargado en el layout). */
.hs-reg .error-form {
  display: none;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--hs-danger);
}
.hs-reg .error-form.is-visible { display: block; }

/* ==========================================================================
   Género
   ========================================================================== */
.hs-reg__genders {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 5vw, 32px);
  margin-top: 6px;
}

/* El markup original usa .gender-option con el radio oculto y una <img> */
.hs-reg .gender-option {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 0;
}
.hs-reg .gender-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hs-reg .gender-option img {
  width: clamp(72px, 20vw, 92px);
  height: clamp(72px, 20vw, 92px);
  border-radius: 50%;
  border: 3px solid transparent;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hs-reg .gender-option:hover img { transform: scale(1.04); }
.hs-reg .gender-option input[type="radio"]:checked + img {
  border-color: var(--hs-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 245, .16);
}

/* ==========================================================================
   Términos y coregistración
   ========================================================================== */
.hs-reg__terms { margin-top: clamp(20px, 4vw, 28px); display: grid; gap: 12px; }

.hs-reg__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--hs-muted);
  line-height: 1.45;
}
.hs-reg__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--hs-blue);
}
.hs-reg__check label { margin: 0; cursor: pointer; }
.hs-reg .terms { font-weight: 600; }

/* El bloque #coreg lo revela el JS con fadeIn(): NO se le toca el display. */
.hs-reg__coreg {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--hs-border-lt);
}
.hs-reg__coreg-intro {
  font-size: 14px;
  color: var(--hs-muted);
  margin-bottom: 12px;
}
.hs-reg__offer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hs-border-lt);
  font-size: 13.5px;
  color: var(--hs-muted);
}
.hs-reg__offer:last-child { border-bottom: 0; }
.hs-reg__offer-yn {
  display: flex;
  gap: 12px;
  flex: none;
}
.hs-reg__offer-yn label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: 600;
  color: var(--hs-navy);
  cursor: pointer;
}
.hs-reg__offer-yn input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hs-blue);
}
.hs-reg__offer .linkPP { font-size: 12px; }

/* ==========================================================================
   Captcha, botón y pie
   ========================================================================== */
.hs-reg__captcha {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.hs-reg__actions { margin-top: 20px; }

/* btnSubmit y nextstep: el primero lo genera Laminas, el segundo es un div.
   El CTA final es un <a>, y ".hs-reg a { color: var(--hs-blue) }" (reset de
   mas arriba) tiene MAS especificidad que ".hs-reg__btn" sola (clase+
   elemento vs una clase), asi que el boton quedaba azul en vez de blanco.
   Calificado con ".hs-reg" adelante para volver a ganar, mismo patron que
   .hs-reg__side-art. */
.hs-reg .hs-reg__btn,
.hs-reg input[type="submit"].hs-reg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--hs-tap);
  padding: clamp(14px, 3.5vw, 17px) 24px;
  border: 0;
  border-radius: var(--hs-radius);
  background: var(--hs-blue);
  color: #fff;
  font-family: inherit;
  font-size: clamp(15px, 3.9vw, 17px);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37, 99, 245, .28);
  transition: background-color .15s ease, transform .15s ease;
}
.hs-reg__btn:hover { background: var(--hs-blue-dark); color: #fff; }
.hs-reg__btn:active { transform: translateY(1px); }

.hs-reg__note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(13px, 3.5vw, 14px);
  color: var(--hs-muted);
  text-align: center;
}
.hs-reg__note svg { flex: none; }

.hs-reg__error {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--hs-danger);
}

/* ==========================================================================
   Contenido de la landing, portado de newhintsters/index.html: How It Works,
   Why Join, barra de pagos y CTA final. Vive DESPUES del Paso 1 (comparte su
   visibilidad: misma clase form-part-1, asi que el JS existente lo oculta
   junto con el hero al pasar al Paso 2, sin tocar el JS).

   Nombres de clase iguales a los de newhintsters (.section, .steps, .why...)
   pero SIEMPRE calificados bajo .hs-reg, seguiendo la convencion del resto
   de este archivo. No se porto el <footer>: register.phtml ya tiene el
   footer del sitio via layout.phtml, uno propio hubiera quedado duplicado.

   OJO: el contenedor NO se llama .container. Esa clase la define Bootstrap
   (ya cargado en layout.phtml) con sus propios breakpoints/max-width, y
   hubiera pisado este layout con anchos distintos a los de newhintsters.
   Por eso .hs-reg__container, mismos valores que .container en newhintsters
   (--container:1180px, --gutter:clamp(16px,4.5vw,24px)). --------------- */
.hs-reg__container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4.5vw, 24px);
}

.hs-reg .section        { padding-block: var(--hs-section-y); }
.hs-reg .section--tint  { background: var(--hs-bg-tint); }

.hs-reg .eyebrow {
  text-align: center;
  font-size: clamp(12px, 3vw, 13px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hs-blue);
}
.hs-reg .section__title {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(25px, 5.6vw, 40px);
  color: var(--hs-navy);
  text-wrap: balance;
}

.hs-reg .steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 24px);
  margin-top: clamp(28px, 6vw, 48px);
}
.hs-reg .step {
  background: #fff;
  border: 1px solid var(--hs-border-lt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow);
  padding: clamp(22px, 5vw, 30px) clamp(20px, 4.5vw, 28px);
}
.hs-reg .step__head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 14px);
}
.hs-reg .step__num {
  font-size: clamp(40px, 10vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.hs-reg .step__icon {
  width: clamp(38px, 9vw, 46px);
  height: clamp(38px, 9vw, 46px);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hs-reg .step__title { font-size: clamp(16px, 4vw, 17px); font-weight: 600; color: var(--hs-navy); }
.hs-reg .step__text  { margin-top: clamp(14px, 3vw, 20px); font-size: 15px; color: var(--hs-muted); }

.hs-reg .step--1 .step__num  { color: var(--hs-purple); }
.hs-reg .step--1 .step__icon { background: var(--hs-purple-soft); }
.hs-reg .step--2 .step__num  { color: var(--hs-green); }
.hs-reg .step--2 .step__icon { background: var(--hs-green-soft); }
.hs-reg .step--3 .step__num  { color: var(--hs-blue); }
.hs-reg .step--3 .step__icon { background: #e5edff; }

@media (min-width: 640px) { .hs-reg .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .hs-reg .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Por que unirse --- */
.hs-reg .why {
  margin-top: clamp(20px, 4vw, 32px);
  background: #fff;
  border: 1px solid var(--hs-border-lt);
  border-radius: var(--hs-radius-xl);
  box-shadow: var(--hs-shadow);
  padding: clamp(24px, 5vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 40px);
  align-items: center;
}
.hs-reg .why__eyebrow {
  font-size: clamp(12px, 3vw, 13px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hs-blue);
}
.hs-reg .why__title { margin-top: 10px; font-size: clamp(21px, 4.6vw, 28px); color: var(--hs-navy); text-wrap: balance; }
.hs-reg .why__text  { margin-top: 16px; font-size: 15px; color: var(--hs-muted); }
.hs-reg .why__label { margin-top: clamp(18px, 4vw, 26px); font-size: 15px; font-weight: 600; color: var(--hs-navy); }

.hs-reg .bullets { margin-top: 14px; display: grid; gap: 14px; }
.hs-reg .bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(14px, 3.7vw, 15px);
  color: var(--hs-muted);
}
.hs-reg .bullet__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.hs-reg .bullet--green  .bullet__icon { background: var(--hs-green); }
.hs-reg .bullet--purple .bullet__icon { background: var(--hs-purple); }
.hs-reg .bullet--amber  .bullet__icon { background: var(--hs-amber); }

.hs-reg .why__kicker {
  margin-top: clamp(18px, 4vw, 26px);
  font-size: clamp(15px, 3.8vw, 16px);
  font-weight: 600;
  color: var(--hs-blue);
}
.hs-reg .why__art { width: 100%; max-width: 520px; margin-inline: auto; }

@media (min-width: 900px) {
  .hs-reg .why      { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
  .hs-reg .why__art { max-width: none; }
}

/* --- Barra de pagos --- */
.hs-reg .payouts {
  margin-top: clamp(24px, 5vw, 40px);
  background: #fff;
  border: 1px solid var(--hs-border-lt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-sm);
  padding: clamp(20px, 4vw, 24px) clamp(18px, 4vw, 34px);
  text-align: center;
}
.hs-reg .payouts__caption { font-size: 14px; color: var(--hs-muted); }
.hs-reg .payouts__row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hs-reg .payouts__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, 3.7vw, 15px);
  color: var(--hs-muted);
}
.hs-reg .payouts__item strong { color: var(--hs-navy); font-weight: 600; }
.hs-reg .payouts__sep  { display: none; width: 1px; height: 30px; background: var(--hs-border); }
.hs-reg .payouts__logo { width: clamp(104px, 22vw, 128px); }

@media (min-width: 700px) {
  .hs-reg .payouts__row { flex-direction: row; justify-content: center; gap: clamp(18px, 3.5vw, 34px); }
  .hs-reg .payouts__sep { display: block; }
}

/* --- CTA final --- */
.hs-reg .cta { padding-block: var(--hs-section-y); text-align: center; }
.hs-reg .cta__title { font-size: clamp(24px, 5.6vw, 42px); color: var(--hs-navy); text-wrap: balance; }
.hs-reg .cta__btn  { margin-top: clamp(20px, 4vw, 28px); }
.hs-reg .cta__note { margin-top: 16px; font-size: 14px; color: var(--hs-muted); }