/* Gancho del informe de antecedentes (gancho.js): consola de chequeo navy con una tarjeta blanca adentro.
   Mismo lenguaje que el hero de /antecedentes-de-marca/: navy con degradé, eyebrow en mayúsculas espaciadas, pills con borde fino, títulos grandes en negrita.
   Funciona sin registro.css (la portada no lo carga): todo lo que usa lo define acá, con las variables de styles.css. */
.gancho { --g-ink: var(--ink, #1a1a2e); --g-navy: var(--navy, #1b365d); --g-soft: #6e6e73; --g-hair: rgba(0, 0, 0, 0.12); width: min(1040px, 100%); margin: 0 auto; color: var(--g-ink); font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gancho [hidden] { display: none !important; }
.gancho *, .gancho *::before, .gancho *::after { letter-spacing: 0; box-sizing: border-box; }

/* Consola */
.gancho-consola { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; padding: clamp(30px, 5vw, 54px) clamp(16px, 4vw, 48px); color: #fff; text-align: center; background: radial-gradient(ellipse 72% 70% at 24% 30%, rgba(74, 112, 160, 0.42) 0%, transparent 66%), radial-gradient(ellipse 48% 60% at 80% 80%, rgba(27, 54, 93, 0.6) 0%, transparent 70%), var(--g-navy); }
.gancho .gancho-eyebrow { margin: 0 0 14px; color: #9fb4d5; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; }
.gancho .gancho-titulo { margin: 0 auto 20px; max-width: 820px; color: #fff; font-size: clamp(28px, 4.6vw, 48px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; }
.gancho-pills { list-style: none; margin: 0 0 clamp(22px, 3vw, 30px); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.gancho-pill { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.2; }

/* Tarjeta blanca */
.gancho-tarjeta { text-align: left; padding: clamp(18px, 3vw, 28px); border-radius: 16px; background: #fff; color: var(--g-ink); box-shadow: 0 18px 44px rgba(8, 18, 40, 0.28); }
.gancho-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.gancho-fila label { display: block; min-width: 0; }
.gancho-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--g-ink); }
.gancho input[type="text"], .gancho input[type="email"] { width: 100%; min-height: 50px; padding: 0 18px; border: 1.5px solid rgba(27, 54, 93, 0.28); border-radius: 999px; background: #fff; color: var(--g-ink); font: inherit; font-size: 16px; }
.gancho input::placeholder { color: var(--g-soft); }
.gancho input[type="text"]:focus, .gancho input[type="email"]:focus { outline: none; border-color: var(--g-navy); box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.14); }
.gancho .gancho-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 26px; border: 1.5px solid var(--g-navy); border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; white-space: normal; transition: background-color 160ms ease, transform 160ms ease; }
.gancho .gancho-boton-primario, .registro-main .gancho a.gancho-boton-primario { background: var(--g-navy); color: #fff; text-decoration: none; }
.gancho .gancho-boton-primario:hover { background: var(--blue-hover, #3d5d8a); border-color: var(--blue-hover, #3d5d8a); }
.gancho .gancho-boton:focus-visible, .gancho .gancho-otra:focus-visible, .gancho .gancho-ejemplo:focus-visible, .gancho [data-gancho-resultado]:focus-visible { outline: 2px solid var(--g-navy); outline-offset: 3px; }
.gancho .gancho-boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.gancho-acepto { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--g-soft); }
.gancho-acepto input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--g-navy); }
.gancho .gancho-acepto a, .registro-main .gancho .gancho-acepto a { color: var(--g-navy); text-decoration: underline; text-underline-offset: 3px; }
.gancho-turnstile:empty { display: none; }
.gancho-turnstile { margin-top: 12px; }
.gancho-error { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: #b3261e; }

/* Estados: entran con un fade/slide de 200 ms */
.gancho-vista:not([hidden]) { animation: gancho-entra 200ms ease-out both; }
@keyframes gancho-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Búsqueda: pasos que se van marcando */
.gancho-espera-texto { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; max-width: 640px; }
.gancho-cola { display: inline-block; margin: 12px 0 0; padding: 5px 12px; border: 1px solid var(--g-hair); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--g-navy); }
.gancho-pasos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.gancho-paso { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; color: var(--g-soft); transition: color 200ms ease; }
.gancho-paso svg, .gancho-arg svg { flex: 0 0 22px; width: 22px; height: 22px; }
.gancho-paso circle { fill: #fff; stroke: #c4c9d4; stroke-width: 1.5; transition: fill 200ms ease, stroke 200ms ease; }
.gancho-paso path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 300ms ease 100ms; }
.gancho-paso[data-estado="en-curso"] { color: var(--g-ink); font-weight: 700; }
.gancho-paso[data-estado="en-curso"] circle { stroke: var(--g-navy); animation: gancho-pulso 1.4s ease-in-out infinite; }
.gancho-paso[data-estado="hecho"] { color: var(--g-ink); }
.gancho-paso[data-estado="hecho"] circle { fill: var(--g-navy); stroke: var(--g-navy); }
.gancho-paso[data-estado="hecho"] path { stroke-dashoffset: 0; }
@keyframes gancho-pulso { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.3; } }
.gancho-contador { margin: 16px 0 0; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--g-soft); }
.gancho-fallo-texto { margin: 0 0 12px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.gancho .gancho-otra { margin: 18px 0 0; padding: 0; border: 0; background: none; color: var(--g-navy); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gancho .gancho-fallo .gancho-otra { margin-top: 0; }

/* Listo: ficha de la marca, tono, compra */
.gancho-resultado { outline-offset: 6px; }
.gancho-ficha { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; margin: 0 0 16px; padding: 10px 18px; border: 1.5px solid var(--g-navy); border-radius: 14px; }
.gancho-ficha-rotulo { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-soft); }
.gancho-ficha-nombre { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.2; font-weight: 800; text-transform: uppercase; color: var(--g-navy); overflow-wrap: anywhere; }
.gancho-res-texto { margin: 0; font-size: clamp(20px, 2.8vw, 28px); line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: var(--g-ink); }
.gancho-res-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 0; }
.gancho .gancho-ejemplo, .registro-main .gancho a.gancho-ejemplo { color: var(--g-navy); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.gancho-args { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 680px; }
.gancho-arg { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--g-soft); }
.gancho-arg svg { margin-top: 1px; }
.gancho-arg circle { fill: var(--g-navy); }
.gancho-arg path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Variante compacta (/registrar-marca/): más angosta y de título más chico, para no competir con el formulario de registro */
.gancho--compacta { width: min(760px, 100%); }
.gancho--compacta .gancho-consola { padding: clamp(22px, 4vw, 34px) clamp(14px, 3vw, 30px); }
.gancho--compacta .gancho-titulo { font-size: clamp(20px, 2.8vw, 28px); margin-bottom: 14px; }
.gancho--compacta .gancho-pills { margin-bottom: 18px; }
.gancho-registro { margin-top: 12px; }

/* Formulario completo (hero): marca y clase, ayuda, email, confirmación y botón */
.gancho-fila--completa { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; row-gap: 10px; }
.gancho-fila--completa > label:nth-of-type(1) { grid-column: span 3; }
.gancho-fila--completa .gancho-campo-clase { grid-column: span 3; }
.gancho-fila--completa .gancho-ayuda { grid-column: 1 / -1; margin: -4px 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--g-soft); }
.gancho-fila--completa .gancho-campo-mail, .gancho-fila--completa .gancho-campo-conf { grid-column: span 2; }
.gancho-fila--completa .gancho-boton { grid-column: span 2; align-self: end; }
.gancho select { width: 100%; min-height: 50px; padding: 0 40px 0 18px; border: 1.5px solid rgba(27, 54, 93, 0.28); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b365d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center; color: var(--g-ink); font: inherit; font-size: 16px; appearance: none; -webkit-appearance: none; text-overflow: ellipsis; }
.gancho select:focus { outline: none; border-color: var(--g-navy); box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.14); }
.gancho-error-campo { display: block; margin: 6px 0 0 4px; font-size: 13px; line-height: 1.4; color: #b3261e; }
.gancho input.has-error { border-color: #b3261e; }
.gancho-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--g-soft); max-width: 680px; }

/* Portada y /registrar-marca/: marca, email y confirmación en una fila; el botón debajo */
.gancho-fila--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; row-gap: 12px; }
.gancho-fila--triple .gancho-boton { grid-column: 1 / -1; }

/* Variante hero: la consola es la propia banda navy del hero; acá sólo la tarjeta */
.gancho--hero { width: min(860px, 100%); margin: clamp(20px, 3vw, 28px) auto 0; }
.gancho--hero .gancho-consola { overflow: visible; border-radius: 0; padding: 0; background: none; }
.gancho--hero .gancho-tarjeta { padding: clamp(14px, 2.4vw, 22px); }
.gancho--hero .gancho-acepto { margin-top: 10px; }

/* Secciones de cada página */
.gancho-seccion { padding: clamp(56px, 8vw, 104px) clamp(20px, 7vw, 96px); background: #fff; }


@media (max-width: 760px) {
  .gancho-fila, .gancho-fila--completa, .gancho-fila--triple { grid-template-columns: minmax(0, 1fr); }
  .gancho-fila--completa > label:nth-of-type(1), .gancho-fila--completa .gancho-campo-clase, .gancho-fila--completa .gancho-ayuda, .gancho-fila--completa .gancho-campo-mail, .gancho-fila--completa .gancho-campo-conf, .gancho-fila--completa .gancho-boton { grid-column: 1 / -1; }
  .gancho .gancho-boton { width: 100%; }
  /* Hero en el teléfono: más compacto para que el botón se vea sin scrollear */
  .inf-banda:has(.gancho--hero) { padding-top: 26px; padding-bottom: 22px; }
  .registro-hero .inf-banda:has(.gancho--hero) h1 { margin-bottom: 14px; }
  .gancho--hero { margin-top: 16px; }
  .gancho--hero .gancho-tarjeta { padding: 14px; }
  .gancho--hero .gancho-fila--completa { row-gap: 8px; }
  .gancho--hero .gancho-label { margin-bottom: 4px; }
  .gancho--hero input[type="text"], .gancho--hero input[type="email"], .gancho--hero select { min-height: 46px; }
  .gancho--hero .gancho-boton { min-height: 46px; }
  .gancho--hero .gancho-acepto { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gancho-vista:not([hidden]) { animation: none; }
  .gancho-paso[data-estado="en-curso"] circle { animation: none; }
  .gancho-paso circle, .gancho-paso path, .gancho-paso, .gancho .gancho-boton { transition: none; }
}

/* En el hero de /antecedentes-de-marca/ */
.registro-main .inf-precio-bloque .inf-precio-arg { width: min(620px, 100%); margin: 12px auto 0; font-size: 14px; line-height: 1.55; color: var(--soft-text); }
.registro-main .inf-precio-bloque .inf-precio-ejemplo { margin: 14px 0 0; font-size: 14px; font-weight: 600; }