/* "¿Qué te está pasando hoy?" — el bloque de la portada que ayuda a elegir terapia con Daniela.
 *
 * 2-oct-2026 (jimy: "que la persona entre y entienda y sepa qué escoger... a veces se pierde,
 * no sabe si constelar, biodescodificar"). Estudio con ocho IA y el Gemelo: a la persona no se
 * le pregunta por la técnica, se le pregunta qué le pasa. Diseño del director de arte (Gemini):
 * "Las tarjetas de situaciones de vida": cada tarjeta lleva la foto de su tema y una frase en
 * primera persona; una columna en celular, dos en computador, borde suave de oro.
 *
 * Lo único que se apartó de su diseño: él pedía un botón rojo en cada tarjeta. Diez botones
 * rojos seguidos en un celular compiten entre sí; aquí toda la tarjeta se toca y el rojo queda
 * para el único botón del final (la asesoría). Ver DECISIONES.md, 2-oct-2026.
 *
 * Hoja aparte por lo mismo que terapias.css: tailwind va purgado y /assets se sirve inmutable.
 * Leyes de la casa: nada de letra por debajo de 16 px; lo que se toca mide 48 px o más.
 */

.qp {
  --qp-oro: var(--oro, #c9a96a);
  --qp-oro-texto: var(--oro-deep, #6b5018);
  --qp-tinta: var(--marron-deep, #2a1808);
  --qp-texto: var(--marron-2, #5a3a22);
  --qp-vino: var(--vinotinto, #6b1f2e);
  background: var(--crema-page, #fdfaf3);
  border-top: 1px solid rgba(201, 169, 106, .4);
  border-bottom: 1px solid rgba(201, 169, 106, .4);
  padding: 3.5rem 0 3.5rem;
  scroll-margin-top: 84px;
}
.qp-ancho { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.qp-cabeza { text-align: center; max-width: 44rem; margin: 0 auto 2rem; }
/* El Gemelo (2-oct): en celular 1rem son 17,5 px y la casa pide 18 cerrados. Por eso 1.06rem. */
.qp .eyebrow-editorial { font-size: 1.06rem; }
.qp-sub { font-family: Lora, Georgia, serif; font-size: 1.125rem; line-height: 1.7; color: var(--qp-texto); margin: 0; }
/* 2-oct (tarde): siete de nueve IA (y Gemini mirando las fotos): en la primera pantalla no se sabía QUIÉN atiende.
   Cara, nombre, oficio y "por videollamada" justo bajo el título. Toca y baja a su presentación. */
.qp-quien {
  display: flex; align-items: center; gap: 14px; text-align: left;
  max-width: 34rem; margin: 0 auto 1.1rem; padding: 10px 16px 10px 10px; min-height: 48px;
  background: #fffdf8; border: 1px solid rgba(201, 169, 106, .7); border-radius: 18px;
  color: var(--qp-tinta); text-decoration: none;
}
.qp-quien picture { flex: none; display: block; }
.qp-quien:hover, .qp-quien:focus-visible { border-color: var(--qp-vino); }
.qp-quien:focus-visible { outline: 3px solid var(--qp-vino); outline-offset: 2px; }
.qp-quien-foto { flex: none; display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--qp-oro); }
.qp-quien-texto { font-size: 1.06rem; line-height: 1.4; font-weight: 500; color: var(--qp-texto); }
.qp-quien-texto strong { color: var(--qp-vino); font-weight: 700; }

.qp-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }

.qp-opcion {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center;
  min-height: 104px; padding: 12px;
  background: #fffdf8; border: 1px solid rgba(201, 169, 106, .7); border-radius: 14px;
  color: var(--qp-tinta); text-decoration: none;
  box-shadow: 0 1px 2px rgba(42, 24, 8, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.qp-opcion:hover, .qp-opcion:focus-visible {
  border-color: var(--qp-vino); box-shadow: 0 8px 22px rgba(42, 24, 8, .12); transform: translateY(-2px);
}
.qp-opcion:focus-visible { outline: 3px solid var(--qp-vino); outline-offset: 2px; }

.qp-foto { display: block; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--crema, #f7f1e3); }
.qp-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qp-icono {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; border-radius: 10px;
  background: var(--crema, #f7f1e3); border: 1px solid rgba(201, 169, 106, .55);
  color: var(--qp-oro-texto); font-size: 2rem;
}

.qp-frase {
  /* 2-oct (tarde): sin cursiva. Gemini, mirando las fotos: diez frases seguidas en cursiva cansan la vista
     (y jimy pide letra visible, nada fina). */
  display: block; font-family: Lora, Georgia, serif; font-style: normal; font-weight: 500;
  font-size: 1.125rem; line-height: 1.4; color: var(--qp-tinta); margin: 0 0 .5rem;
}
.qp-destino { display: block; font-size: 1.06rem; line-height: 1.35; font-weight: 700; color: var(--qp-vino); }
.qp-destino i { font-size: .85em; margin-left: .25rem; }
.qp-datos { display: block; font-size: 1.06rem; line-height: 1.35; font-weight: 500; color: var(--qp-texto); }

.qp-pie { text-align: center; max-width: 40rem; margin: 2.25rem auto 0; }
.qp-pie-texto { font-family: Lora, Georgia, serif; font-size: 1.125rem; line-height: 1.6; color: var(--qp-tinta); margin: 0 0 1.1rem; }
.qp-boton { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.qp-legal { font-size: 1.06rem; line-height: 1.55; color: var(--qp-texto); margin: 1.5rem auto 0; max-width: 38rem; }

@media (min-width: 768px) {
  .qp { padding: 5rem 0; }
  .qp-ancho { padding: 0 40px; }
  .qp-cabeza { margin-bottom: 2.75rem; }
  .qp-quien { border-radius: 999px; }
  .qp-lista { grid-template-columns: 1fr 1fr; gap: 20px; }
  .qp-opcion { grid-template-columns: 168px 1fr; gap: 20px; padding: 14px; min-height: 154px; }
  .qp-foto, .qp-icono { width: 168px; height: 126px; }
  .qp-icono { font-size: 2.4rem; }
  .qp-frase { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qp-opcion { transition: none; }
  .qp-opcion:hover, .qp-opcion:focus-visible { transform: none; }
}

/* La franja que orienta encima de las técnicas (sección "servicios" de la portada). */
.qp-guia {
  max-width: 46rem; margin: 0 auto 3rem; padding: 1.4rem 1.25rem; text-align: center;
  background: #fffdf8; border: 1px solid rgba(201, 169, 106, .7); border-radius: 14px;
}
.qp-guia-texto { font-family: Lora, Georgia, serif; font-size: 1.125rem; line-height: 1.6; color: var(--marron-deep, #2a1808); margin: 0 0 1rem; }
.qp-guia-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.qp-guia-botones a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.qp-enlace-tecnica { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.06rem; }