/* ==========================================================================
   QUIERO MI LIBERTAD — landing low ticket de lucianabravo.com

   Hoja AUTÓNOMA a propósito: no depende de styles.css.
   El tráfico de esta página viene de anuncios (visitante frío, móvil, red
   lenta) y styles.css pesa 72 KB de los que aquí se usarían tres variables.
   Los tokens de marca están replicados abajo, así que la coherencia visual
   se mantiene sin pagar el peso.

   Todo vive bajo .ql para que ninguna regla escape al resto del sitio.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   Paleta comprometida: el ámbar ocupa las zonas de decisión, el papel
   sostiene la lectura. La calidez la lleva el ámbar, nunca el fondo.
   Todos los pares de texto verificados ≥4.5:1 (WCAG AA cuerpo).
   ========================================================================== */
.ql {
  --ql-tinta:        #18130e;   /* 17.7:1 sobre papel · 8.4:1 sobre ámbar */
  --ql-tinta-suave:  #48413b;   /*  9.6:1 sobre papel · 4.6:1 sobre ámbar */
  --ql-papel:        #fbfaf8;
  --ql-papel-hondo:  #f2eee9;   /* separaciones sutiles sobre papel */
  --ql-ambar:        #ea9f36;
  --ql-ambar-claro:  #f3b862;
  --ql-ambar-hondo:  #a25e21;   /* 4.8:1 con papel encima */
  --ql-pistacho:     #adca7f;   /* verde pistacho oliva · tinta encima 10.1:1 */
  --ql-pistacho-osc: #2c3f0a;   /* botón sobre pistacho · papel encima 11.1:1 */
  --ql-pistacho-med: #3f561a;
  --ql-urgente:      #c50516;   /* rojo de acción · blanco encima 6.2:1 */
  --ql-urgente-osc:  #9c0411;
  --ql-oro:          #b08d57;   /* enlace de familia con la web madre */

  --ql-linea:        rgba(24, 19, 14, .14);
  --ql-linea-osc:    rgba(251, 250, 248, .16);

  --ql-aire:         clamp(64px, 8vw, 116px);
  --ql-radio:        12px;
  --ql-radio-sm:     8px;

  --ql-salida:       cubic-bezier(.22, 1, .36, 1);

  /* Escala z semántica: nunca valores sueltos tipo 999 */
  --z-pegado:  100;
  --z-fondo:   900;
  --z-capa:    910;

  margin: 0;                    /* sin esto el margen por defecto del body
                                   deja un marco claro alrededor del hero */
  background: var(--ql-papel);
  color: var(--ql-tinta);
  font-family: 'Fira Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
.ql *,
.ql *::before,
.ql *::after { box-sizing: border-box; }

.ql h1, .ql h2, .ql h3, .ql h4, .ql p,
.ql figure, .ql ul, .ql ol, .ql blockquote { margin: 0; }

.ql ul, .ql ol { padding: 0; list-style: none; }

.ql img { display: block; max-width: 100%; height: auto; }

.ql a { color: inherit; }

/* Foco visible y consistente en toda la página */
.ql a:focus-visible,
.ql button:focus-visible,
.ql input:focus-visible,
.ql [tabindex]:focus-visible {
  outline: 3px solid var(--ql-ambar-hondo);
  outline-offset: 3px;
  border-radius: var(--ql-radio-sm);
}
.ql-oscuro a:focus-visible,
.ql-oscuro button:focus-visible,
.ql-oscuro input:focus-visible,
.ql-ambar a:focus-visible,
.ql-ambar button:focus-visible {
  outline-color: currentColor;
}

/* Salto al contenido para quien navega con teclado o lector de pantalla */
.ql-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-capa);
  padding: .85rem 1.4rem;
  background: var(--ql-tinta);
  color: var(--ql-papel);
  font-weight: 600;
  text-decoration: none;
}
.ql-saltar:focus { left: 8px; top: 8px; }

/* -- Contenedor y secciones -- */
.ql-caja {
  width: min(1180px, 100% - clamp(2rem, 7vw, 5rem));
  margin-inline: auto;
}
.ql-caja--estrecha { width: min(760px, 100% - clamp(2rem, 7vw, 5rem)); }

.ql-seccion { padding-block: var(--ql-aire); }

.ql-oscuro { background: var(--ql-tinta); color: var(--ql-papel); }
.ql-oscuro .ql-suave { color: rgba(251, 250, 248, .78); }

.ql-ambar { background: var(--ql-ambar); color: var(--ql-tinta); }

/* -- Tipografía -- */
.ql-titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.ql-titulo--hero  { font-size: clamp(2.6rem, 7.2vw, 5.2rem); }
.ql-titulo--grande{ font-size: clamp(2rem, 4.6vw, 3.4rem); }
.ql-titulo--medio { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

.ql-trato {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ql-parrafo {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.75;
  text-wrap: pretty;
  color: var(--ql-tinta-suave);
}
.ql-oscuro .ql-parrafo { color: rgba(251, 250, 248, .8); }
.ql-ambar .ql-parrafo  { color: #3a2c16; }

.ql-parrafo + .ql-parrafo { margin-top: 1.1rem; }

/* ==========================================================================
   3 · BARRA PEGADA + CONTADOR
   ========================================================================== */
/* Contraste invertido respecto al hero: el hero es ámbar con tinta,
   la barra es tinta con ámbar. Al quedar pegada sobre cualquier sección
   siempre se lee, y marca el límite superior del hero sin una línea. */
.ql-barra {
  position: sticky;
  top: 0;
  z-index: var(--z-pegado);
  background: var(--ql-tinta);
  color: var(--ql-papel);
  border-bottom: 2px solid var(--ql-ambar);
}
.ql-barra .ql-barra-enlace { color: var(--ql-ambar-claro); }

/* Punto que late: urgencia sin ruido */
.ql-punto {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ql-urgente);
  box-shadow: 0 0 0 0 rgba(197, 5, 22, .75);
  animation: ql-pulso 2.1s ease-out infinite;
}
@keyframes ql-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(197, 5, 22, .75); }
  70%  { box-shadow: 0 0 0 9px rgba(197, 5, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(197, 5, 22, 0); }
}
.ql-barra-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  min-height: 46px;
  padding-block: .5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.78rem, 2.1vw, .93rem);
  font-weight: 500;
  text-align: center;
}
.ql-barra-enlace {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Reloj: tabular para que los dígitos no bailen al contar */
.ql-reloj {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ql-barra .ql-reloj {
  padding: .2rem .6rem;
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  border-radius: var(--ql-radio-sm);
  font-size: 1.05em;
}

/* Latido de un solo segundo cuando cambia el minuto: avisa sin gritar */
.ql-reloj.late { animation: ql-late .9s var(--ql-salida); }
@keyframes ql-late {
  0%   { transform: none; }
  35%  { transform: scale(1.055); }
  100% { transform: none; }
}

/* Estado vencido: baja el tono, no bloquea nada */
.ql-barra[data-estado="vencido"] {
  background: var(--ql-tinta);
  border-bottom-color: var(--ql-tinta-suave);
}
.ql-barra[data-estado="vencido"] .ql-reloj,
.ql-barra[data-estado="vencido"] .ql-punto { display: none; }

/* Reloj grande de las secciones de cierre */
.ql-reloj--grande {
  display: inline-block;
  padding: .4rem 1.1rem;
  border-radius: var(--ql-radio);
  background: var(--ql-tinta);
  color: var(--ql-ambar-claro);
  font-size: clamp(1.8rem, 5.5vw, 3rem);
}
.ql-oscuro .ql-reloj--grande { background: rgba(234, 159, 54, .16); color: var(--ql-ambar-claro); }

/* ==========================================================================
   4 · BOTONES
   Un solo borde o una sola sombra, nunca ambos como decoración.
   ========================================================================== */
.ql-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 54px;
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--ql-radio);
  background: var(--ql-tinta);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .16s var(--ql-salida);
}
/* Cada estado sube el contraste en lugar de bajarlo: al pasar el cursor
   el botón se oscurece hasta el negro (20.1:1) y al pulsarlo se aclara
   con un borde ámbar, así el clic se ve incluso sin animación. */
.ql-btn:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-2px);
}
.ql-btn:active {
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  border-color: var(--ql-tinta);
  transform: translateY(0) scale(.985);
}
.ql-btn:focus-visible {
  outline: 3px solid var(--ql-ambar-hondo);
  outline-offset: 3px;
}

.ql-btn--grande {
  min-height: 64px;
  padding: 1.15rem 2.4rem;
  font-size: clamp(1rem, 2.6vw, 1.16rem);
}
.ql-btn--bloque { display: flex; width: 100%; }

/* Sobre fondo oscuro el botón se invierte: ámbar con tinta */
.ql-oscuro .ql-btn,
.ql-ambar .ql-btn--ambar {
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  border-color: transparent;
}
.ql-oscuro .ql-btn:hover {
  background: #ffd292;          /* 13.1:1 con tinta encima */
  color: var(--ql-tinta);
}
.ql-oscuro .ql-btn:active {
  background: var(--ql-papel);
  color: var(--ql-tinta);
  border-color: var(--ql-ambar);
}
.ql-oscuro .ql-btn:focus-visible { outline-color: var(--ql-ambar-claro); }

/* Sobre ámbar el botón es tinta; al pulsar invierte a papel con borde */
.ql-ambar .ql-btn:active {
  background: var(--ql-papel);
  color: var(--ql-tinta);
  border-color: var(--ql-tinta);
}
.ql-ambar .ql-btn:focus-visible { outline-color: var(--ql-tinta); }

/* Contorno: acciones secundarias, borde real de 2px */
.ql-btn--linea {
  background: transparent;
  color: var(--ql-tinta);
  border-color: currentColor;
}
.ql-btn--linea:hover {
  background: var(--ql-tinta);
  color: #ffffff;
  border-color: var(--ql-tinta);
}
.ql-btn--linea:active {
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  border-color: var(--ql-tinta);
}
.ql-oscuro .ql-btn--linea,
.ql-ambar .ql-btn--linea {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.ql-oscuro .ql-btn--linea:hover {
  background: var(--ql-papel);
  color: var(--ql-tinta);
  border-color: var(--ql-papel);
}
.ql-ambar .ql-btn--linea:hover {
  background: var(--ql-tinta);
  color: #ffffff;
  border-color: var(--ql-tinta);
}

/* Rojo de acción inmediata: solo en los cierres de urgencia */
.ql-btn--urgente {
  background: var(--ql-urgente);
  color: #ffffff;
  border-color: transparent;
}
.ql-btn--urgente:hover { background: var(--ql-urgente-osc); color: #ffffff; }
.ql-btn--urgente:active {
  background: #ffffff;
  color: var(--ql-urgente-osc);
  border-color: var(--ql-urgente-osc);
}

/* Verde pistacho oliva: la acción que no cuesta dinero */
.ql-btn--verde {
  background: var(--ql-pistacho-osc);
  color: #ffffff;
  border-color: transparent;
}
.ql-btn--verde:hover { background: #1c2a04; color: #ffffff; }
.ql-btn--verde:active {
  background: #ffffff;
  color: var(--ql-pistacho-osc);
  border-color: var(--ql-pistacho-osc);
}

/* Botón deshabilitado: sigue siendo legible, no un fantasma gris */
.ql-btn[disabled] {
  background: var(--ql-tinta-suave);
  color: #ffffff;
  cursor: not-allowed;
  transform: none;
}

.ql-enlace-suave {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  opacity: .82;
  transition: opacity .2s ease;
}
.ql-enlace-suave:hover { opacity: 1; }

/* ==========================================================================
   5 · HERO
   Campo ámbar completo: el visitante lee «accesible» antes que el precio.
   ========================================================================== */
.ql-hero {
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.ql-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;   /* el VSL pide más ancho que un retrato */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .ql-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

.ql-hero h1 { margin-bottom: 1.4rem; }
.ql-hero h1 em {
  font-style: italic;
  /* Solo el trazo de subrayado: sin degradados ni recortes de texto */
  box-shadow: inset 0 -.14em 0 rgba(24, 19, 14, .28);
}

.ql-hero-sub {
  max-width: 46ch;
  font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  line-height: 1.65;
  color: #3a2c16;
  margin-bottom: 2rem;
}

.ql-hero-reloj {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-bottom: 1.6rem;
  padding: 1rem 1.3rem;
  border-radius: var(--ql-radio);
  background: rgba(24, 19, 14, .1);
}
.ql-hero-reloj-etiq {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 600;
  color: #3a2c16;
}
.ql-hero-reloj .ql-reloj {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  color: var(--ql-tinta);
}

.ql-hero-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-bottom: 2.2rem;
}

.ql-marcadores {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .89rem;
  font-weight: 500;
  color: #3a2c16;
}
.ql-marcadores li { display: flex; align-items: center; gap: .45rem; }
.ql-marcadores svg { flex-shrink: 0; }

/* Retrato del hero: marco desplazado, sin sombras difusas */
.ql-hero-figura { position: relative; }
.ql-hero-figura img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--ql-radio);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.ql-hero-figura::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 2px solid rgba(24, 19, 14, .3);
  border-radius: var(--ql-radio);
}
@media (max-width: 900px) {
  .ql-hero-figura { max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   6 · ESPEJO — la lista de reconocimientos
   Sin bullets ni iconos: se lee como pensamientos propios, con reglas finas
   que dan el ritmo. Nada de tarjetas.
   ========================================================================== */
.ql-espejo-lista {
  margin-top: 2.6rem;
  border-top: 1px solid var(--ql-linea);
}
.ql-espejo-lista li {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--ql-linea);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}
.ql-espejo-cierre {
  margin-top: 3rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 22ch;
  text-wrap: balance;
}

/* ==========================================================================
   7 · POSIBILIDAD — beneficios en dos columnas de prosa
   ========================================================================== */
.ql-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  margin-top: 3rem;
}
.ql-beneficio h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--ql-ambar-claro);
}
.ql-beneficio p {
  font-size: .98rem;
  line-height: 1.68;
  color: rgba(251, 250, 248, .78);
}

/* Aviso de seguridad médica: visible de verdad, no escondido */
.ql-aviso-salud {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--ql-radio);
  background: rgba(251, 250, 248, .07);
  font-size: .92rem;
  line-height: 1.62;
  color: rgba(251, 250, 248, .88);
  max-width: 70ch;
}
.ql-aviso-salud svg { flex-shrink: 0; margin-top: .2rem; color: var(--ql-ambar-claro); }
.ql-seccion:not(.ql-oscuro) .ql-aviso-salud {
  background: var(--ql-papel-hondo);
  color: var(--ql-tinta-suave);
}
.ql-seccion:not(.ql-oscuro) .ql-aviso-salud svg { color: var(--ql-ambar-hondo); }

/* ==========================================================================
   8 · TEST
   ========================================================================== */
.ql-test-marco {
  max-width: 720px;
  margin: 2.8rem auto 0;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid var(--ql-linea);
  border-radius: var(--ql-radio);
  background: var(--ql-papel);
}

.ql-progreso {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.ql-progreso-riel {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: var(--ql-papel-hondo);
  overflow: hidden;
}
.ql-progreso-relleno {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--ql-ambar);
  transition: width .42s var(--ql-salida);
}
.ql-progreso-texto {
  flex-shrink: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .83rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ql-tinta-suave);
}

.ql-paso { display: none; }
.ql-paso.activo { display: block; animation: ql-entra .38s var(--ql-salida); }
@keyframes ql-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ql-paso legend,
.ql-paso .ql-pregunta {
  display: block;
  padding: 0;
  margin-bottom: 1.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.ql-paso fieldset { border: 0; padding: 0; margin: 0; }

.ql-opciones { display: grid; gap: .6rem; }

/* La etiqueta entera es el objetivo táctil: 56 px de alto mínimo */
.ql-opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: .85rem 1.1rem;
  border: 1px solid var(--ql-linea);
  border-radius: var(--ql-radio);
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.ql-opcion:hover { border-color: var(--ql-ambar-hondo); background: var(--ql-papel-hondo); }

.ql-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ql-opcion-marca {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ql-tinta-suave);
  border-radius: 50%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ql-opcion input:checked ~ .ql-opcion-marca {
  border-color: var(--ql-ambar-hondo);
  box-shadow: inset 0 0 0 4px var(--ql-ambar);
}
.ql-opcion:has(input:checked) {
  border-color: var(--ql-ambar-hondo);
  background: var(--ql-papel-hondo);
}
.ql-opcion:has(input:focus-visible) {
  outline: 3px solid var(--ql-ambar-hondo);
  outline-offset: 2px;
}

.ql-test-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
}
.ql-atras {
  appearance: none;
  border: 0;
  background: none;
  padding: .5rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ql-tinta-suave);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* -- Resultado -- */
.ql-resultado { display: none; }
.ql-resultado.visible { display: block; animation: ql-entra .45s var(--ql-salida); }

.ql-resultado-nivel {
  display: inline-block;
  padding: .3rem .85rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ql-resultado h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.ql-resultado-texto {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ql-tinta-suave);
  margin-bottom: 1.8rem;
  text-wrap: pretty;
}
.ql-resultado-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2rem;
}

/* -- Captura opcional tras el resultado -- */
.ql-captura {
  padding-top: 1.8rem;
  border-top: 1px solid var(--ql-linea);
}
.ql-captura p { font-size: .96rem; color: var(--ql-tinta-suave); margin-bottom: 1rem; }
.ql-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .ql-campos { grid-template-columns: 1fr; } }

.ql-campo label {
  display: block;
  margin-bottom: .35rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
}
.ql-campo input {
  width: 100%;
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1px solid var(--ql-linea);
  border-radius: var(--ql-radio-sm);
  background: var(--ql-papel);
  color: var(--ql-tinta);
  font-family: inherit;
  font-size: 1rem;
}
/* El gris de sistema no llega a 4.5:1: se fuerza un tono legible */
.ql-campo input::placeholder { color: #6b625a; opacity: 1; }
.ql-campo input:focus { border-color: var(--ql-ambar-hondo); }

.ql-legal-mini {
  margin-top: .9rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ql-tinta-suave);
}

/* Trampa para bots: fuera de pantalla pero no display:none */
.ql-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   9 · ACCESOS
   Tres tratamientos distintos para tres decisiones distintas.
   Nada de rejilla de tarjetas idénticas.
   ========================================================================== */
.ql-accesos-cabecera { max-width: 60ch; margin-bottom: 3rem; }

/* -- Los dos libros: unidad emparejada -- */
.ql-libros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--ql-linea);
  border: 1px solid var(--ql-linea);
  border-radius: var(--ql-radio);
  overflow: hidden;
}
.ql-libro {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  background: var(--ql-papel);
}
.ql-libro-para {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ql-ambar-hondo);
  margin-bottom: .7rem;
}
.ql-libro h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.ql-lista-plus { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.ql-lista-plus li {
  display: flex;
  gap: .6rem;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ql-tinta-suave);
}
.ql-lista-plus svg { flex-shrink: 0; margin-top: .32rem; color: var(--ql-ambar-hondo); }
.ql-oscuro .ql-lista-plus li { color: rgba(251, 250, 248, .8); }
.ql-oscuro .ql-lista-plus svg { color: var(--ql-ambar); }
.ql-ambar .ql-lista-plus li { color: #3a2c16; }
.ql-ambar .ql-lista-plus svg { color: var(--ql-tinta); }

.ql-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: auto;
  margin-bottom: 1.1rem;
}
.ql-precio-antes {
  font-size: 1rem;
  color: var(--ql-tinta-suave);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.ql-precio-hoy {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.ql-precio-nota {
  font-size: .82rem;
  color: var(--ql-tinta-suave);
  width: 100%;
}
.ql-oscuro .ql-precio-antes,
.ql-oscuro .ql-precio-nota { color: rgba(251, 250, 248, .68); }
.ql-ambar .ql-precio-antes,
.ql-ambar .ql-precio-nota { color: #4a3a1e; }

/* -- El programa: bloque propio, más ancho y oscuro -- */
.ql-programa {
  margin-top: 1.6rem;
  padding: clamp(1.7rem, 4vw, 3rem);
  border-radius: var(--ql-radio);
  background: var(--ql-tinta);
  color: var(--ql-papel);
}
.ql-programa-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
}
@media (max-width: 860px) { .ql-programa-grid { grid-template-columns: 1fr; } }

.ql-programa h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: .9rem;
  text-wrap: balance;
}

/* Las siete sesiones: el ÚNICO sitio de la página donde hay numeración,
   porque aquí el orden es información y no decoración. */
.ql-sesiones { display: grid; gap: .1rem; }
.ql-sesion {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  padding: .62rem 0;
  border-bottom: 1px solid var(--ql-linea-osc);
  font-size: .95rem;
  line-height: 1.5;
}
.ql-sesion:last-child { border-bottom: 0; }
.ql-sesion-num {
  flex-shrink: 0;
  width: 1.5rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ql-ambar);
}

/* -- Pack: banda a sangre en ámbar -- */
.ql-pack {
  margin-top: var(--ql-aire);
  padding-block: clamp(2.4rem, 6vw, 4.2rem);
  background: var(--ql-ambar);
  color: var(--ql-tinta);
}
.ql-pack-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
@media (max-width: 860px) { .ql-pack-grid { grid-template-columns: 1fr; } }

.ql-pack h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.ql-pack-caja {
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: var(--ql-radio);
  background: rgba(24, 19, 14, .1);
}
.ql-ahorro {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .28rem .8rem;
  border-radius: 999px;
  background: var(--ql-tinta);
  color: var(--ql-ambar-claro);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
}

/* ==========================================================================
   10 · COMUNIDAD (verde: la acción que no cuesta dinero)
   ========================================================================== */
.ql-comunidad { background: var(--ql-pistacho); color: var(--ql-tinta); }
.ql-comunidad .ql-titulo { color: var(--ql-tinta); }
.ql-comunidad .ql-parrafo { color: #2f3d18; }
.ql-comunidad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
@media (max-width: 820px) { .ql-comunidad-grid { grid-template-columns: 1fr; } }
.ql-comunidad .ql-lista-plus li { color: #2f3d18; }
.ql-comunidad .ql-lista-plus svg { color: var(--ql-pistacho-osc); }
.ql-comunidad .ql-enlace-suave { color: var(--ql-pistacho-osc); }
.ql-comunidad a:focus-visible,
.ql-comunidad button:focus-visible { outline-color: var(--ql-pistacho-osc); }

/* Sello de gratuidad: lo único que no depende del reloj */
.ql-gratis {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  padding: .34rem .95rem;
  border-radius: 999px;
  background: var(--ql-pistacho-osc);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ==========================================================================
   11 · PRUEBA SOCIAL
   ========================================================================== */
.ql-voces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: 2.8rem;
}
.ql-voz {
  padding-top: 1.4rem;
  border-top: 2px solid var(--ql-ambar);
}
.ql-voz blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  font-style: italic;
  line-height: 1.42;
  margin-bottom: .9rem;
  text-wrap: pretty;
}
.ql-voz figcaption {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(251, 250, 248, .66);
}

.ql-autoridad {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
  border-top: 1px solid var(--ql-linea-osc);
}
@media (max-width: 620px) { .ql-autoridad { grid-template-columns: 92px 1fr; } }
.ql-autoridad img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.ql-autoridad-cifra {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 700;
  color: var(--ql-ambar);
  line-height: 1;
  margin-bottom: .4rem;
}

/* ==========================================================================
   12 · ÚLTIMA LLAMADA + FAQ + CIERRE
   ========================================================================== */
.ql-llamada { text-align: center; }
.ql-llamada .ql-parrafo { margin-inline: auto; }
.ql-llamada-reloj { margin: 2rem 0 2.2rem; }
.ql-llamada-etiq {
  display: block;
  margin-bottom: .6rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: #3a2c16;
}

.ql-faq { max-width: 760px; margin: 2.6rem auto 0; }
.ql-faq-item { border-bottom: 1px solid var(--ql-linea); }
.ql-faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 60px;
  padding: 1.2rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 2.3vw, 1.1rem);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.ql-faq-mas {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: .18rem;
  color: var(--ql-ambar-hondo);
  transition: transform .3s var(--ql-salida);
}
.ql-faq-item.abierto .ql-faq-mas { transform: rotate(45deg); }
.ql-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s var(--ql-salida);
}
.ql-faq-a p {
  padding-bottom: 1.4rem;
  max-width: 66ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ql-tinta-suave);
  text-wrap: pretty;
}

.ql-cierre { text-align: center; }
.ql-cierre .ql-titulo {
  max-width: 20ch;
  margin: 0 auto 2.2rem;
  font-size: clamp(2rem, 6vw, 3.8rem);
}

/* ==========================================================================
   13 · PIE
   ========================================================================== */
.ql-pie {
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  background: #0d0a07;
  color: rgba(251, 250, 248, .72);
  font-size: .88rem;
}
.ql-pie-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}
.ql-pie-marca {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ql-oro);
}
.ql-pie-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  align-items: center;
}
.ql-pie-enlace {
  appearance: none;
  border: 0;
  background: none;
  padding: .35rem 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(176, 141, 87, .5);
}
.ql-pie-enlace:hover { color: var(--ql-ambar-claro); }
.ql-pie-nota {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ql-linea-osc);
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(251, 250, 248, .58);
  max-width: 76ch;
}

/* ==========================================================================
   14 · CAPAS LEGALES
   ========================================================================== */
.ql-capa {
  position: fixed;
  inset: 0;
  z-index: var(--z-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity .22s ease;
}
.ql-capa[hidden] { display: none; }
.ql-capa.visible { opacity: 1; }
.ql-capa-fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, .82);
  cursor: pointer;
}
.ql-capa-caja {
  position: relative;
  z-index: var(--z-capa);
  width: min(720px, 100%);
  max-height: min(86vh, 880px);
  display: flex;
  flex-direction: column;
  background: var(--ql-papel);
  border-radius: var(--ql-radio);
  overflow: hidden;
  transform: translateY(12px) scale(.99);
  transition: transform .26s var(--ql-salida);
}
.ql-capa.visible .ql-capa-caja { transform: none; }
.ql-capa-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 1.1rem clamp(1rem, 3vw, 1.8rem);
  border-bottom: 1px solid var(--ql-linea);
}
.ql-capa-titulo {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
}
.ql-capa-cerrar {
  appearance: none;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
  background: none;
  color: var(--ql-tinta-suave);
  border: 1px solid var(--ql-linea);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ql-capa-cerrar:hover { background: var(--ql-tinta); color: var(--ql-papel); }
.ql-capa-texto {
  padding: clamp(1.1rem, 3vw, 1.8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: .93rem;
  line-height: 1.72;
  color: var(--ql-tinta-suave);
}
.ql-capa-texto p { margin: 0 0 1.05rem; }
.ql-capa-texto p:last-child { margin-bottom: 0; }
.ql-capa-texto strong { color: var(--ql-tinta); font-weight: 600; }

.ql-sin-scroll { overflow: hidden; }

/* ==========================================================================
   15 · REVELADO
   El contenido es visible por defecto; el JS solo lo mejora. Si el script
   no llega (o la pestaña está oculta), la página se lee igual.
   ========================================================================== */
.ql-revelar { opacity: 1; }
.js .ql-revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .58s var(--ql-salida), transform .58s var(--ql-salida);
}
.js .ql-revelar.visible { opacity: 1; transform: none; }

/* ==========================================================================
   16 · PREFERENCIAS DEL SISTEMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ql *,
  .ql *::before,
  .ql *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .ql-revelar { opacity: 1; transform: none; }
  .ql-btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .ql {
    --ql-tinta-suave: #2a231d;
    --ql-linea: rgba(24, 19, 14, .38);
    --ql-linea-osc: rgba(251, 250, 248, .4);
  }
  .ql-oscuro .ql-parrafo,
  .ql-oscuro .ql-suave { color: #fbfaf8; }
}

/* En pantallas táctiles no hay hover: se evitan estados que se quedan pegados */
@media (hover: none) {
  .ql-btn:hover { transform: none; }
  .ql-opcion:hover { border-color: var(--ql-linea); background: transparent; }
}

@media print {
  .ql-barra, .ql-capa, .ql-test-marco { display: none !important; }
  .ql { background: #fff; color: #000; }
}


/* ==========================================================================
   17 · SEÑALES DE URGENCIA
   El rojo aparece cuatro veces en toda la página. Si apareciera en cada
   sección dejaría de significar «ahora» y pasaría a ser decoración.
   ========================================================================== */
.ql-sello {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .95rem;
  border-radius: 999px;
  background: var(--ql-urgente);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ql-sello--vivo { animation: ql-respira 2.6s ease-in-out infinite; }
@keyframes ql-respira {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.035); }
}

/* Emoji: tamaño y alineación estables entre sistemas */
.ql-emo {
  font-size: 1.06em;
  line-height: 1;
  vertical-align: -.08em;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Cinta de urgencia sobre el pack */
.ql-cinta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .8rem 1.2rem;
  background: var(--ql-urgente);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.83rem, 2.2vw, .96rem);
  font-weight: 700;
  text-align: center;
}
.ql-cinta .ql-reloj { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .ql-punto, .ql-sello--vivo { animation: none; }
}

/* ==========================================================================
   18 · VSL DEL HERO
   Autoplay silenciado con capa para activar el sonido. El iframe solo se
   crea cuando la API de YouTube está lista, así no bloquea el pintado.
   ========================================================================== */
.ql-vsl {
  position: relative;
  border-radius: var(--ql-radio);
  overflow: hidden;
  background: #0b0906;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 3px rgba(24, 19, 14, .3);
}
.ql-vsl iframe,
.ql-vsl > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cartel mientras carga: nunca un rectángulo negro vacío */
.ql-vsl-cartel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0b0906;
  color: rgba(251, 250, 248, .72);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .88rem;
}

/* Capa de sonido: cubre el vídeo entero para que sea imposible fallar */
.ql-vsl-sonido {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
  padding: 1.4rem;
  border: 0;
  background: linear-gradient(to top, rgba(11, 9, 6, .78) 0%, rgba(11, 9, 6, .12) 55%, transparent 100%);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
}
.ql-vsl-sonido[hidden] { display: none; }
.ql-vsl-sonido-pastilla {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--ql-ambar);
  color: var(--ql-tinta);
  font-size: clamp(.88rem, 2.4vw, 1rem);
  font-weight: 700;
  transition: background-color .18s ease, transform .16s var(--ql-salida);
}
.ql-vsl-sonido:hover .ql-vsl-sonido-pastilla { background: #ffd292; transform: translateY(-2px); }
.ql-vsl-sonido:active .ql-vsl-sonido-pastilla { background: #ffffff; transform: scale(.97); }
.ql-vsl-sonido:focus-visible { outline: 3px solid var(--ql-ambar); outline-offset: -6px; }

/* Aviso de salida al terminar el vídeo */
.ql-vsl-fin {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(11, 9, 6, .93);
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.ql-vsl-fin.visible { display: flex; }
.ql-vsl-fin p { font-size: clamp(.95rem, 2.6vw, 1.1rem); font-weight: 600; }
.ql-vsl-fin .ql-reloj { font-size: 2rem; color: var(--ql-ambar); }
.ql-vsl-fin button {
  appearance: none;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ql-vsl-fin button:hover { color: #ffffff; }


/* ==========================================================================
   19 · TESTIMONIOS REALES
   Dos historias en video y las capturas de los mensajes recibidos. No son
   tarjetas iguales: el video pide una proporción vertical de Short y la
   captura pide que se lea el texto de la imagen.
   ========================================================================== */
.ql-historias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 620px;
  margin-top: 2.6rem;
}
.ql-historia {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ql-historia-marco {
  position: relative;
  display: block;
  border-radius: var(--ql-radio);
  overflow: hidden;
  background: #0b0906;
  aspect-ratio: 4 / 5;
}
.ql-historia-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ql-salida), filter .3s ease;
}
.ql-historia-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ql-tinta);
}
.ql-historia-play svg {
  width: 54px;
  height: 54px;
  padding: 15px;
  border-radius: 50%;
  background: var(--ql-ambar);
  transition: background-color .2s ease, transform .22s var(--ql-salida);
}
.ql-historia:hover .ql-historia-marco img { transform: scale(1.04); filter: brightness(.82); }
.ql-historia:hover .ql-historia-play svg { background: #ffd292; transform: scale(1.08); }
.ql-historia:active .ql-historia-play svg { transform: scale(.96); background: var(--ql-papel); }
.ql-historia:focus-visible { outline: 3px solid var(--ql-ambar); outline-offset: 4px; border-radius: var(--ql-radio); }

.ql-historia-pie {
  display: block;
  margin-top: .8rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.45;
}
.ql-historia-pie strong { display: block; font-weight: 700; }
.ql-historia-pie span { color: var(--ql-ambar-claro); font-size: .84rem; font-weight: 600; }

.ql-voces-etiqueta {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  margin-bottom: 1.3rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ql-ambar-claro);
}

.ql-capturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(.8rem, 2vw, 1.3rem);
}
.ql-captura-voz {
  border-radius: var(--ql-radio-sm);
  overflow: hidden;
  background: rgba(251, 250, 248, .06);
}
.ql-captura-voz img { width: 100%; height: auto; }

@media (max-width: 520px) {
  .ql-capturas { grid-template-columns: repeat(2, 1fr); }
}

/* Mientras la conexión sea lenta, las capturas no deben empujar el layout */
.ql-captura-voz { min-height: 120px; }