/* hub.css: estilos del hub del catalogo de pago (tarea 238, fase 2-bis).
   Solo tokens var(--...): nada de colores sueltos. Dos secciones.
   filetes de componentes interactivos >= 3:1 (auditoria 03/09/2026) */

/* seccion 1: paginas con tokens.css (home y catalogo) */
html:not(.js) .filtros { display: none; }
.filtros { display: flex; flex-direction: column; gap: var(--space-md); padding: 0 var(--page-gutter) var(--space-lg); margin: 0; }
.filtros__buscar { display: block; max-width: 34rem; }
.filtros__buscar input { width: 100%; min-height: 2.75rem; padding: 0 var(--space-md); background: var(--color-paper-2); color: var(--color-ink); border: var(--rule); border-radius: var(--radius-sm); font: inherit; }
.filtros__buscar input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filtros .chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; }
.filtros .chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-neutral); background: transparent; color: var(--color-ink-2); font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.filtros .chip:hover { color: var(--color-ink); border-color: var(--color-muted); }
.filtros .chip[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.filtros .chip__n { font-size: var(--text-xs); opacity: 0.85; }
/* chip sin resultados (contador dinamico, ticket M tarea 238): sigue siendo clicable, solo se atenua */
.filtros .chip--vacio { opacity: 0.55; }
.filtros__quitar { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-xs); border: 0; background: transparent; color: var(--color-ink); font: inherit; text-decoration: underline; text-decoration-color: var(--color-neutral); cursor: pointer; }
.filtros__quitar:hover { color: var(--color-accent); }
.filtros__estado { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.filtros__vacio { margin: 0; padding: var(--space-lg); border: 1px dashed var(--color-neutral); border-radius: var(--radius-md); color: var(--color-ink-2); }
/* el display de .prod gana al [hidden] del navegador: se fuerza aqui para que el filtro oculte de verdad */
[data-ficha][hidden], [data-vacio][hidden] { display: none; }
.prod__sub { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.prod__cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.prod__num { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-muted); }
.sello--pago { color: var(--color-accent); border: 1px solid oklch(from var(--color-accent) l c h / 0.55); background: oklch(from var(--color-accent) l c h / 0.08); }
.sello--gratis { color: var(--color-ink); border: 1px solid var(--color-neutral); background: transparent; }
.puertas { padding: var(--space-lg) var(--page-gutter) 0; }
.puertas__lista { list-style: none; margin: 0; padding: var(--space-lg) 0 0; border-top: var(--rule-2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.puerta__enlace { display: flex; flex-direction: column; gap: var(--space-2xs); min-height: 2.75rem; padding: var(--space-md); border: 1px solid var(--color-neutral); border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
a.puerta__enlace:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.puerta__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-accent); }
.puerta__titulo { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.puerta__d { font-size: var(--text-sm); color: var(--color-muted); }
.puerta--pronto .puerta__enlace { border-style: dashed; }
.puerta--pronto .puerta__n { color: var(--color-muted); }
@media (max-width: 48rem) { .puertas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* barra del catalogo: enlace "Empieza aqui" (fase 2, ticket J, 03/09/2026);
   .barra__marca y .barra__volver siguen definidos en el <style> propio de
   aitorconia/productos/index.html, este solo añade el enlace intermedio. */
.barra__enlace { font-size: var(--text-sm); color: var(--color-ink-2); display: inline-flex; align-items: center; min-height: 2.75rem; }
.barra__enlace:hover { color: var(--color-accent); }

/* home: bloque "En produccion" (fase 2, ticket J, 03/09/2026) */
.produccion { list-style: none; margin: 0; padding: 0 var(--page-gutter) var(--space-2xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); }
.produccion li { display: flex; flex-direction: column; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--color-neutral); }
.produccion__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
.produccion li b { font-family: var(--font-display); font-size: var(--text-md); }
.produccion__pila { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.produccion li p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 48rem) { .produccion { grid-template-columns: 1fr; } }

/* /empieza/: eyebrow y lista de pasos numerada (fase 2, ticket J, 03/09/2026) */
.marca-seccion { margin: 0 0 var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); }
.ruta { list-style: none; margin: 0; padding: 0 var(--page-gutter) var(--space-xl); display: flex; flex-direction: column; gap: 0; max-width: 46rem; }
.ruta li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-md); row-gap: var(--space-xs); align-items: start; padding: var(--space-md) 0; border-top: var(--rule-2); }
.ruta__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); grid-row: 1 / span 3; align-self: start; padding-top: 0.2rem; }
.ruta__titulo { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.ruta__por-que { color: var(--color-ink-2); font-size: var(--text-sm); }
.ruta li .btn, .ruta li .prod__ver { grid-column: 2; }

/* enlaces de tarjeta (Abrir la guia, Ver la ficha): 44 px de alto, no solo la linea de texto */
a.prod__ver { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* tarea 238, fase 2 revisada (decision del dueno 05/09/2026): tandas de
   publicacion, bono de 41 guias y su entrega desde /gracias/. */
.filtros__proximas { margin: 0; padding: 0 var(--page-gutter) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
/* /guias/: aviso de atribucion tras la cabecera (ticket N, tarea 238/253) */
.sobre { padding: 0 var(--page-gutter) var(--space-lg); max-width: 46rem; }
.sobre h2 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--color-ink); }
.sobre p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.nota--bono { padding-top: var(--space-md); }
.prod__ver--pendiente { color: var(--color-muted); font-style: normal; }
.bono {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.bono__marca { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--color-muted); }
.bono h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); }
.bono p { margin: 0; color: var(--color-muted); }
.bono .btn { align-self: flex-start; }

/* seccion 2: landings */
.miga { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--suave); border-bottom: 1px solid var(--linea); }
.miga ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.miga li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.miga li + li::before { content: "\203A"; margin-right: var(--space-xs); color: var(--linea); }
.miga a { color: var(--suave); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }
.miga a:hover, .miga a:focus-visible { color: var(--acento); }
.miga [aria-current="page"] { color: var(--papel); }
.rel { padding-block: var(--space-xl); border-top: 1px solid var(--linea); }
.rel__marca { margin: 0 0 var(--space-xs); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.rel h2 { margin: 0 0 var(--space-lg); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; color: var(--papel); }
.rel__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); }
.rel__tarjeta { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 2.75rem; padding: var(--space-md); border: 1px solid oklch(from var(--suave) l c h / 0.55); border-radius: 8px; background: var(--tinta-2); color: var(--papel); text-decoration: none; }
.rel__tarjeta:hover, .rel__tarjeta:focus-visible { border-color: var(--acento); }
.rel__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--suave); }
.rel__titulo { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2; }
.rel__gancho { font-size: 0.9375rem; color: var(--suave); flex-grow: 1; }
.rel__precio { font-family: var(--font-mono); font-size: 0.875rem; color: var(--acento); }
.rel__bono { margin: 0 0 var(--space-md); color: var(--suave); font-size: 0.9375rem; }

/* seccion 3: modal de captura */
/* Copiado literal de aitorconia/index.html (bloque "modal de captura",
   03/09/2026) para que /gratis/, /guias/, /empieza/ y las guias derivadas
   compartan un unico modal. Requiere /tokens.css cargado en la pagina (las
   paginas nuevas ya lo cargan; las guias derivadas lo incorporan en la
   fase de generacion, ver asegurar_link_tokens_css). */
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn:active { transform: translateY(1px); }
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn--primario { background: var(--color-accent); color: var(--color-accent-ink); }
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn--primario:hover { background: var(--color-focus); }
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn--contorno { background: transparent; color: var(--color-ink); border-color: var(--color-neutral); }
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn--contorno:hover { border-color: var(--color-accent); color: var(--color-accent); }
:is(.modal, .prods, .prod, .ruta, .cabecera, .filtros, .puertas) .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 26rem);
  height: fit-content;
  max-height: min(85dvh, 34rem);
  border: var(--rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: 0;
  z-index: var(--z-modal);
}
.modal::backdrop { background: color-mix(in oklch, var(--color-paper) 72%, transparent); }
.modal[open] { animation: modal-entra var(--dur-long) var(--ease-out); }
@keyframes modal-entra {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.modal__inner { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.modal__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.modal h2 { font-size: var(--text-lg); }
.modal__cerrar {
  flex-shrink: 0;
  background: transparent;
  border: var(--rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-base);
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.modal__cerrar:hover { border-color: var(--color-accent); color: var(--color-accent); }
.modal__cerrar:active { transform: translateY(1px); }
.modal__promesa { color: var(--color-ink-2); font-size: var(--text-sm); }
.modal__recurso { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.campo label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.campo input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.campo input::placeholder { color: var(--color-muted); }
.campo input:hover { background: var(--color-paper-3); }
.campo input:focus-visible { outline-color: var(--color-focus); }
.campo input[aria-invalid="true"] { border-color: var(--color-error); }
.campo__ayuda { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-error); }
.modal form .btn { width: 100%; margin-top: var(--space-sm); }
.modal__rgpd { font-size: var(--text-xs); color: var(--color-muted); }
.modal__estado {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: color-mix(in oklch, var(--color-accent) 8%, transparent);
}
.modal__estado[hidden] { display: none; }
/* sin JS, el enlace #captura muestra el formulario de respaldo (action ya apunta a Listmonk) */
.modal:target { display: block; position: static; margin: var(--space-xl) auto; }

/* seccion 4: guias */
/* .miga--guia y .rel--guia reusan el layout de .miga/.rel (seccion 2) pero
   con los tokens de la plantilla de guias (productos/biblioteca-guias),
   que no comparte vocabulario con tokens.css: --paper-2/--rule/--ink/--ink-2/
   --muted/--accent/--accent-bg/--accent-on en vez de --color-*. */
.miga--guia {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  background: var(--paper-2);
  border-bottom: 1px solid var(--muted);
  color: var(--ink-2);
}
.miga--guia li { min-height: 2.75rem; }
.miga--guia li + li::before { color: var(--muted); }
.miga--guia a { color: var(--ink-2); }
.miga--guia a:hover, .miga--guia a:focus-visible { color: var(--accent); }
.miga--guia [aria-current="page"] { color: var(--ink); }
/* .guia-fecha (ticket SEO paso 3): mismos tokens de texto secundario y
   tamaño que .miga--guia; la miga no se oculta en @media print en ninguna
   de las hojas de la guia (hub.css/tokens.css/estilo inline), asi que esta
   tampoco lo hace. */
.guia-fecha {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--muted);
  margin: var(--s-3) 0;
}
.rel--guia { border-top: 1px solid var(--muted); }
.rel--guia .rel__marca { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
.rel--guia h2 { font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
.rel--guia .rel__tarjeta {
  border: 1px solid var(--muted);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.rel--guia .rel__tarjeta:hover, .rel--guia .rel__tarjeta:focus-visible { border-color: var(--accent); }
.rel--guia .rel__num { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--ink-2); }
.rel--guia .rel__titulo { font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
.rel--guia .rel__precio { display: none; }
.rel--guia .rel__precio--bono { display: inline; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875rem; color: var(--accent); }
/* CTA de producto al final de la guia (ticket T5, 20/09/2026; refuerzo de
   marcado de pago tras auditoria 21/09/2026: la tarjeta ya no puede
   confundirse con una tarjeta gratuita de "Relacionadas"). reusa .rel--guia
   pero con precio visible, tarjetas mas anchas y borde/accion propios. Los
   tokens de espaciado del ticket no existen en el vocabulario de la
   plantilla de guias (usa --s-1..--s-8, ver .guia-fecha arriba); se usan sus
   equivalentes exactos en rem (--s-5 = 1.5rem, --s-2 = 0.5rem, ver
   aitorconia/tokens.css para el valor original). El token de fondo claro si
   existe en ese vocabulario y se usa tal cual. */
.rel--cta .rel__lista { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 28rem)); }
.rel--cta .rel__tarjeta { min-height: 4rem; padding: var(--s-5); border: 2px solid var(--accent); }
.rel--cta .rel__tarjeta:hover, .rel--cta .rel__tarjeta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rel--cta .rel__tarjeta:active { transform: translateY(1px); }
.rel--cta .rel__gancho { color: var(--ink-2); }
.rel--cta .rel__precio { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.375rem; font-weight: 700; color: var(--accent); }
.rel--cta .rel__accion { align-self: flex-start; margin-top: var(--s-2); padding: 0.625rem 1rem; border-radius: 6px; background: var(--accent); color: var(--paper); font-weight: 600; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .rel--cta .rel__tarjeta:active { transform: none; } }
/* atribucion del documento de origen (ticket N, tarea 238/253, 05/09/2026):
   misma familia de tokens que .rel--guia (--ink-2/--muted), no --color-*. */
.atribucion { margin: 0; padding-top: 1rem; border-top: 1px solid var(--muted); color: var(--ink-2); font-size: 0.875rem; }
.atribucion a { color: var(--accent); }
/* la barra pegajosa de la plantilla de guias es flex sin wrap y desborda 20 px a 375 (medido en el origen); solo las copias derivadas cargan este fichero */
@media (max-width: 30rem) { .bar { flex-wrap: wrap; } }
/* el numerador de pagina del encabezado de la plantilla desborda 19 px a 375 en el origen; en la copia derivada se oculta en movil */
@media (max-width: 30rem) { .sheet .head .pnum { display: none; } }