/* Proceso Privado de Sanación — estilos propios de /proceso-privado/.
 *
 * Por qué un archivo aparte y no clases de Tailwind sueltas: tailwind.css se compila
 * con purga y solo trae las utilidades que el sitio ya usaba. Una clase nueva obligaría
 * a regenerar tailwind.css, y /assets/* se sirve inmutable a un año: habría que refrescar
 * la huella en las ~600 páginas del sitio. Un archivo nuevo tiene nombre nuevo y no toca
 * nada de lo que ya funciona (mismo criterio que assets/css/taller.css).
 *
 * Letra grande por ley de la casa: nada de texto visible por debajo de 1.05rem.
 * Apto para celular y para computador: todo se apila en una columna por debajo de 768px.
 */

.pp-seccion { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .pp-seccion { padding-top: 4rem; padding-bottom: 4rem; } }

/* ── Ficha de datos del hero ─────────────────────────────────────────────── */
.pp-ficha {
  background: #f2ead7;
  border: 1px solid rgba(90, 58, 34, .14);
  border-radius: .9rem;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.6rem;
}
.pp-ficha-fila {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(90, 58, 34, .12);
  font-size: 1.08rem; line-height: 1.5; color: #4a3218;
}
.pp-ficha-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-ficha-fila i { color: #c8201f; width: 1.4rem; flex-shrink: 0; margin-top: .22rem; }

/* ── Rejilla de tarjetas (para quién es, qué incluye, cómo funciona) ─────── */
.pp-rejilla { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 768px) { .pp-rejilla { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.pp-rejilla-2 { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 768px) { .pp-rejilla-2 { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }

.pp-tarjeta {
  background: #fdfaf3;
  border: 1px solid rgba(90, 58, 34, .13);
  border-radius: 1rem;
  padding: 1.5rem 1.4rem;
}
.pp-tarjeta h3 {
  font-family: Lora, Georgia, serif;
  font-size: 1.3rem; font-weight: 700; color: #2a1808;
  margin: .85rem 0 .55rem; line-height: 1.3;
}
.pp-tarjeta p { font-size: 1.08rem; line-height: 1.65; color: #4a3218; margin: 0; }
.pp-tarjeta-icono {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f2e4c9; color: #8c6a1f; font-size: 1.25rem;
}
.pp-paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #c8201f; color: #f7f1e3;
  font-family: Lora, Georgia, serif; font-size: 1.25rem; font-weight: 700;
}

/* ── Lista de lo que incluye ─────────────────────────────────────────────── */
.pp-incluye { list-style: none; margin: 0; padding: 0; }
.pp-incluye li {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(90, 58, 34, .12);
  font-size: 1.1rem; line-height: 1.6; color: #4a3218;
}
.pp-incluye li:last-child { border-bottom: 0; }
.pp-incluye li i { color: #5a7d38; margin-top: .3rem; flex-shrink: 0; }

/* ── Los temas que se pueden elegir ──────────────────────────────────────── */
.pp-temas { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .pp-temas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp-temas { grid-template-columns: repeat(3, 1fr); } }
.pp-tema {
  display: block;
  background: #fdfaf3;
  border: 1px solid rgba(90, 58, 34, .16);
  border-radius: .8rem;
  padding: 1.05rem 1.15rem;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pp-tema:hover, .pp-tema:focus-visible {
  border-color: #c8201f; background: #fff; transform: translateY(-2px);
}
.pp-tema-nombre {
  display: block;
  font-family: Lora, Georgia, serif;
  font-size: 1.16rem; font-weight: 700; color: #2a1808; line-height: 1.35;
  margin-bottom: .3rem;
}
.pp-tema-desc { display: block; font-size: 1.02rem; line-height: 1.5; color: #6b4f28; }
.pp-tema-flecha { color: #c8201f; font-size: .95rem; }

/* ── Precio ──────────────────────────────────────────────────────────────── */
.pp-precio-caja {
  background: #2a1808; color: #f7f1e3;
  border-radius: 1.1rem; padding: 2rem 1.5rem; text-align: center;
  border: 1px solid rgba(201, 169, 106, .35);
}
.pp-precio-tachado {
  font-size: 1.1rem; color: #c9b48a; text-decoration: line-through; margin: 0 0 .3rem;
}
.pp-precio-grande {
  font-family: Lora, Georgia, serif; font-size: 3rem; font-weight: 700;
  color: #e8c87a; line-height: 1; margin: .2rem 0 .5rem;
}
.pp-precio-nota { font-size: 1.05rem; line-height: 1.6; color: #e8dcc4; margin: 0 auto; max-width: 34rem; }

/* ── Comparación con el círculo mensual ──────────────────────────────────── */
.pp-compara { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 768px) { .pp-compara { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
.pp-compara-col {
  background: #fdfaf3; border: 1px solid rgba(90, 58, 34, .13);
  border-radius: 1rem; padding: 1.5rem 1.4rem;
}
.pp-compara-col.es-este { border-color: rgba(200, 32, 31, .45); background: #fff; }
.pp-compara-col h3 {
  font-family: Lora, Georgia, serif; font-size: 1.3rem; font-weight: 700;
  color: #2a1808; margin: 0 0 .25rem;
}
.pp-compara-col .pp-compara-precio {
  font-size: 1.05rem; color: #8c6a1f; font-weight: 600; margin: 0 0 1rem;
}
.pp-compara-col ul { list-style: none; margin: 0; padding: 0; }
.pp-compara-col li {
  font-size: 1.06rem; line-height: 1.6; color: #4a3218;
  padding: .5rem 0 .5rem 1.6rem; position: relative;
}
.pp-compara-col li::before {
  content: "·"; position: absolute; left: .4rem; top: .35rem;
  color: #c8201f; font-size: 1.5rem; line-height: 1;
}

/* ── Avisos legales ──────────────────────────────────────────────────────── */
.pp-legal {
  background: #f2ead7; border: 1px solid rgba(90, 58, 34, .13);
  border-radius: .9rem; padding: 1.25rem 1.35rem;
}
.pp-legal p { font-size: 1rem; line-height: 1.65; color: #4a3218; margin: 0; }
.pp-legal strong { color: #2a1808; }

/* ── Textos sueltos (van aqui y no en un style= porque la CSP del sitio
      bloquea los atributos de estilo incrustados) ────────────────────────── */
.pp-intro { font-size: 1.15rem; }
.pp-pie { font-size: 1.05rem; }
.pp-precio-sub { font-size: 1.1rem; }
.pp-enlace {
  display: inline-block; font-size: 1.05rem;
  padding: .6rem .2rem;   /* 22 px de alto no se tocan con el dedo: sube a ~44 */
}

/* ── Puente al Proceso Privado dentro de la seccion oscura del Circulo ─────
   Vive en la portada y en /membresia/, justo debajo del temario de los 12 meses.
   Colores sobre fondo marron oscuro: oro claro #e8c87a (contraste 9.0) y crema. */
.pp-puente {
  max-width: 44rem;
  margin: 2.6rem auto 0;
  padding: 1.8rem 1.6rem;
  border-radius: 1rem;
  background: rgba(247, 241, 227, .07);
  border: 1px solid rgba(201, 169, 106, .35);
  text-align: center;
}
.pp-puente-chip {
  display: inline-block;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #e8c87a; margin-bottom: .7rem;
}
.pp-puente-titulo {
  font-family: Lora, Georgia, serif;
  font-size: 1.5rem; font-weight: 700; color: #f7f1e3; line-height: 1.3;
  margin: 0 0 .7rem;
}
.pp-puente-texto {
  font-size: 1.08rem; line-height: 1.7; color: #e8dcc4;
  margin: 0 auto 1.3rem; max-width: 36rem;
}
.pp-puente-texto strong { color: #f7f1e3; }
.pp-puente-enlace {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 999px;
  border: 1px solid rgba(201, 169, 106, .55);
  color: #e8c87a; text-decoration: none;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600; font-size: 1.02rem;
  transition: background .25s ease, border-color .25s ease;
}
.pp-puente-enlace:hover, .pp-puente-enlace:focus-visible {
  background: rgba(247, 241, 227, .12); border-color: #e8c87a;
}
@media (min-width: 768px) {
  .pp-puente { padding: 2.2rem 2.4rem; }
  .pp-puente-titulo { font-size: 1.75rem; }
}

/* ── Franja del Proceso Privado en la portada (seccion «Como trabajamos juntos»,
      fondo crema claro). Se apila en el celular y va en dos columnas en computador. */
.pp-franja {
  margin-top: 2.5rem;
  padding: 1.7rem 1.5rem;
  background: #fdfaf3;
  border: 1px solid rgba(200, 32, 31, .28);
  border-radius: 1.1rem;
  display: grid; grid-template-columns: 1fr; gap: 1.3rem; align-items: center;
}
.pp-franja-chip {
  display: inline-block;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #8c6a1f; margin-bottom: .6rem;
}
.pp-franja-titulo {
  font-family: Lora, Georgia, serif;
  font-size: 1.5rem; font-weight: 700; color: #2a1808; line-height: 1.25; margin: 0 0 .6rem;
}
.pp-franja-p { font-size: 1.08rem; line-height: 1.65; color: #4a3218; margin: 0; }
.pp-franja-lado { text-align: left; }
.pp-franja-antes {
  display: block; font-size: 1.16rem; color: #6b4f28; text-decoration: line-through; margin-bottom: .1rem;
}
.pp-franja-precio {
  display: block; font-family: Lora, Georgia, serif;
  font-size: 2.1rem; font-weight: 700; color: #c8201f; line-height: 1.1; margin-bottom: .9rem;
}
.pp-franja-boton {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #c8201f; color: #f7f1e3; text-decoration: none;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: 1.02rem;
  border: 1.5px solid #a01816;
  transition: background .25s ease;
}
.pp-franja-boton:hover, .pp-franja-boton:focus-visible { background: #a01816; }
@media (min-width: 768px) {
  .pp-franja { grid-template-columns: 1fr auto; gap: 2.5rem; padding: 2.1rem 2.3rem; }
  .pp-franja-lado { text-align: right; }
  .pp-franja-titulo { font-size: 1.7rem; }
}

/* En el celular, la portada resume la seccion del Circulo (6-sep) y ya lleva la franja
   del Proceso Privado en «Como trabajamos juntos». El puente aqui seria el mismo aviso
   dos veces en la misma pantalla larga, asi que solo vive en /membresia/. */
@media (max-width: 767px) {
  body:not(.pagina-membresia) .pp-puente { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LETRA GRANDE (ley de la casa; el Revisor la midio y la pagina iba a 16-18 px).
   Todo va colgado de .pagina-proceso-privado para que NO toque ninguna otra
   pagina del sitio: las clases de Tailwind (text-base, text-lg) son compartidas
   por ~600 paginas y subirlas de raiz seria cambiar el sitio entero sin permiso.
   Vara: 19,5 px = 1.22rem con la raiz en 16 px.
   ══════════════════════════════════════════════════════════════════════════ */
.pagina-proceso-privado .pp-tarjeta p,
.pagina-proceso-privado .pp-incluye li,
.pagina-proceso-privado .pp-ficha-fila,
.pagina-proceso-privado .pp-intro,
.pagina-proceso-privado .pp-pie,
.pagina-proceso-privado .pp-precio-nota,
.pagina-proceso-privado .pp-compara-col li,
.pagina-proceso-privado .pp-legal p,
.pagina-proceso-privado .pp-franja-p,
.pagina-proceso-privado .pp-puente-texto { font-size: 1.22rem; line-height: 1.65; }

.pagina-proceso-privado .pp-tema-nombre { font-size: 1.25rem; }
.pagina-proceso-privado .pp-tema-desc { font-size: 1.16rem; line-height: 1.55; }
.pagina-proceso-privado .pp-tarjeta h3 { font-size: 1.42rem; }
.pagina-proceso-privado .pp-compara-col h3 { font-size: 1.42rem; }
.pagina-proceso-privado .pp-compara-precio { font-size: 1.16rem; }
.pagina-proceso-privado .pp-enlace { font-size: 1.22rem; }
.pagina-proceso-privado .pp-precio-sub { font-size: 1.25rem; }

/* Preguntas y respuestas + el parrafo de entrada del hero: usan clases compartidas,
   asi que se suben SOLO aqui dentro. */
.pagina-proceso-privado details summary { font-size: 1.28rem; }
.pagina-proceso-privado details p { font-size: 1.22rem; line-height: 1.7; }
.pagina-proceso-privado main .text-base { font-size: 1.22rem; }
.pagina-proceso-privado main h1 + p,
.pagina-proceso-privado main .text-lg { font-size: 1.28rem; }

/* El rotulito de cada seccion («PARA QUIEN ES») es el estilo editorial del sitio:
   va en versalitas y muy espaciado a proposito. Se sube lo que admite sin romperse. */
.pagina-proceso-privado .eyebrow-editorial { font-size: .95rem; }

/* Medido en un celular de 375 px (raiz 17,5 px): este era el unico texto que quedaba
   por debajo de la vara de 19,5 px. 1.15rem lo deja en 20,1. */
.pagina-proceso-privado .pp-precio-tachado { font-size: 1.15rem; }

/* La tarjeta del tema no tiene texto propio (lo llevan sus dos hijos), pero su
   font-size heredado salia a 18,5 px y la vara la contaba. Se iguala al cuerpo. */
.pagina-proceso-privado .pp-tema { font-size: 1.22rem; }

/* Lámina dentro de «Tu proceso incluye» (16-sep-2026, arte de Gemini por la ventana). */
.pp-figura { margin: 2.4rem auto 0; max-width: 44rem; }
.pp-figura picture, .pp-figura img {
  display: block; width: 100%; height: auto;
  border-radius: 1rem; border: 1px solid rgba(90, 58, 34, .14);
  box-shadow: 0 14px 38px rgba(90, 58, 34, .16);
}
.pp-figura figcaption {
  font-family: Lora, Georgia, serif; font-style: italic;
  font-size: 1.16rem; line-height: 1.55; color: #6b4f28;
  text-align: center; margin-top: .9rem;
}