/* Tercer Oído · The World Is Mind Project
   Espacio de reflexión clínica para psicólogos del método Decir sin Romper.
   Hereda la estética de la app hermana (di-lo-que-quieres-decir/app.css) con
   identidad propia discreta: el beige es el acento principal, no el verde. */

:root {
  --green: #1f5a49;
  --green-dark: #174a3c;
  --green-deep: #11352b;
  --beige: #c7a587;
  --beige-dark: #aa8665;
  --beige-deep: #8a6748; /* acento principal de esta app (botones, hilos) */
  --beige-light: #decab6;
  --sand: #f7f4f0;
  --sand-dark: #ede8e2;
  --cream: #fdfcfa;
  --text: #2b2420;
  --text-soft: #6b6058;
  --text-muted: #72665d; /* 28 sep 2026 · antes #9a8e84, 3,1:1 sobre crema; ahora 5,4:1 (AA) */
}

* { box-sizing: border-box; }

/* El atributo hidden manda SIEMPRE, aunque una clase declare display propio
   (sin esto, .btn[hidden] seguía visible: cazado en la captura del 9 ago). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
}

h1, h2, h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  color: var(--green-deep);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

a { color: var(--beige-deep); }
a:hover { color: var(--green-dark); }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Cabecera (primera pantalla · test de los 10 segundos) ---------- */
.cabecera {
  /* 2 sep 2026 · el fondo deja de ser un verde liso. Daniel pasa la foto de
     la sala con el diván: acerca la app a la escena real del psicoanálisis.
     El degradado en el verde de la casa mantiene el texto legible y la marca;
     el color de fondo sostiene la cabecera mientras la foto carga. */
  background-color: var(--green-deep);
  background-image:
    linear-gradient(180deg, rgba(17, 53, 43, 0.50) 0%, rgba(17, 53, 43, 0.52) 38%, rgba(17, 53, 43, 0.72) 56%, rgba(17, 53, 43, 0.93) 100%),
    url("img/divan.webp");
  background-size: cover;
  /* 2 sep 2026 (tarde) · la foto va recortada por arriba (menos techo), con
     pared estirada arriba y a los lados y suelo repuesto abajo (1536×1600),
     para que sillón y diván caigan detrás del lede, ENTEROS los dos incluso
     en un móvil estrecho, y por encima de la tarjeta blanca de privacidad.
     En móvil y tablet la foto encaja por altura, así que su posición vertical
     la fija el propio recorte; el porcentaje de aquí solo actúa en pantallas
     anchas (escritorio), donde deja los muebles entre el logo y la tarjeta.
     El velo se mantiene ligero hasta el 38 % (donde están los muebles) y se
     cierra rápido después, para que asomen sin que el texto pierda contraste. */
  background-position: center 45%;
  background-repeat: no-repeat;
  color: var(--cream);
  padding: 1.6rem 1.25rem 1.4rem;
  text-align: center;
  border-bottom: 4px solid var(--beige);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.cabecera .aviso-privacidad { text-shadow: none; }
.cabecera-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige-light);
  margin: 0 0 0.7rem;
}
.cabecera-logo {
  /* El símbolo va en verdes TWIM: sobre la cabecera oscura necesita su
     disco crema para leerse. Discreto, el primer viewport no lo paga. */
  display: block;
  width: 48px;
  height: 48px;
  padding: 7px;
  background: var(--cream);
  border-radius: 50%;
  margin: 0 auto 0.4rem;
}
.cabecera-titulo {
  color: var(--cream);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin-bottom: 0.15rem;
}
.cabecera-porque {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--beige-light);
}
.cabecera-quees {
  max-width: 34rem;
  margin: 0 auto 0.3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sand);
}
.cabecera-manana {
  max-width: 34rem;
  margin: 0 auto 0.65rem;
  font-size: 0.98rem;
  color: var(--beige-light);
}
.cabecera-orientacion {
  max-width: 34rem;
  margin: 0 auto 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--cream);
  border-top: 1px solid rgba(199, 165, 135, 0.45);
  border-bottom: 1px solid rgba(199, 165, 135, 0.45);
  padding: 0.45rem 0.6rem;
}
.plus-cabecera {
  max-width: 36rem;
  margin: 0 auto 0.65rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--sand);
}
.plus-cabecera strong { color: var(--beige-light); font-weight: 600; }
.aviso-privacidad {
  display: inline-block;
  max-width: 30rem;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: var(--green-deep);
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 1.4rem;
  padding: 0.7rem 1.3rem;
  margin: 0 0 0.6rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.firma-cabecera {
  margin: 0.2rem auto 0.5rem;
  font-size: 0.92rem;
  color: var(--beige-light);
}
.firma-cabecera strong { color: var(--cream); }
.cabecera-encuadre {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  color: rgba(253, 252, 250, 0.75);
}
/* Los plegables de la cabecera · lo que no exige el test de los 10 segundos
   se queda detrás de su título. Misma mecánica que las secciones de abajo,
   en su versión sobre fondo oscuro. */
.cabecera-plegables {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  text-align: left;
}
.plegable-oscuro {
  border: 1px solid rgba(199, 165, 135, 0.28);
  border-radius: 12px;
  background: rgba(253, 252, 250, 0.06);
  padding: 0.7rem 0.95rem;
  margin: 0.45rem 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.plegable-oscuro:hover { background: rgba(253, 252, 250, 0.1); border-color: rgba(199, 165, 135, 0.5); }
.plegable-oscuro > summary { padding: 0; color: var(--cream); }
.plegable-oscuro > summary::after { background-color: rgba(199, 165, 135, 0.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfcfa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.plegable-oscuro > summary:hover::after { background-color: rgba(199, 165, 135, 0.4); }
.plegable-oscuro > summary:focus-visible { outline-color: var(--beige-light); }
.plegable-oscuro .plegable-titulo {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-shadow: none;
}
.plegable-oscuro p {
  max-width: none;
  margin: 0.65rem 0 0.15rem;
  padding: 0;
  border: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--sand);
  text-shadow: none;
}
.cabecera-beta {
  display: inline-block;
  margin: 0.7rem auto 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--beige-light);
  border: 1px solid rgba(199, 165, 135, 0.6);
  border-radius: 1rem;
  padding: 0.25rem 0.9rem;
}

/* ---------- Indicador de fases ---------- */
.pasos-indicador { padding: 1rem 1rem 0; }
.pasos-indicador ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.pasos-indicador li { display: flex; align-items: center; gap: 0.35rem; }
.pasos-indicador li span {
  display: inline-flex;
  width: 1.35rem; height: 1.35rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--beige);
  font-size: 0.75rem;
}
.pasos-indicador li.activo { color: var(--green-deep); font-weight: 600; }
.pasos-indicador li.activo span {
  background: var(--beige-deep);
  border-color: var(--beige-deep);
  color: var(--cream);
}

/* ---------- Fases ---------- */
main { max-width: 44rem; margin: 0 auto; padding: 1.2rem 1.25rem 2rem; }
.paso { padding: 1rem 0 1.4rem; }
.paso-ayuda { color: var(--text-soft); font-size: 0.97rem; margin: 0.3rem 0 0.9rem; }
textarea, input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}
textarea:focus, input[type="text"]:focus {
  outline: 2px solid var(--beige-dark);
  outline-offset: 1px;
  border-color: var(--beige-dark);
}
.campo { margin: 0.9rem 0; }
.contador-relato {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
  text-align: right;
}
.contador-relato.pasado { color: #8f3b2c; font-weight: 600; }

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
}
.btn-principal {
  background: var(--beige-deep);
  color: var(--cream);
}
.btn-principal:hover { background: var(--green-dark); }
.btn-principal:disabled { background: var(--beige-light); color: var(--text-soft); cursor: not-allowed; }
.btn-secundario {
  background: var(--sand);
  color: var(--green-deep);
  border-color: var(--sand-dark);
}
.btn-secundario:hover { background: var(--sand-dark); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.1rem; align-items: center; }
.enlace-discreto {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.error-campo { color: #8f3b2c; font-size: 0.92rem; margin: 0.5rem 0 0; }

/* Entradas del relato (escribir · dictar · PDF), las tres al mismo rango */
.entradas-relato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.6rem 0 0.2rem;
}
.btn-dictar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.btn-dictar.grabando {
  background: var(--beige-light);
  border-color: var(--beige-dark);
  color: var(--green-deep);
}
.btn-secundario:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nota-pdf { font-size: 0.85rem; color: var(--text-soft); margin: 0.4rem 0 0; }

/* Píldora del informe de una reflexión anterior (continuidad) */
.pildora-anterior {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  padding: 0.35rem 0.9rem;
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 1.2rem;
  font-size: 0.88rem;
  color: var(--green-deep);
}
.pildora-quitar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--beige-deep);
  text-decoration: underline;
  cursor: pointer;
}
.pildora-quitar:hover { color: var(--green-dark); }
.btn-microfono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--green-deep);
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.btn-microfono.grabando {
  background: var(--beige-light);
  border-color: var(--beige-dark);
  color: var(--green-deep);
}

/* Pauta de anonimización */
.pauta-anonimizar {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.1rem 0 0;
}
.pauta-anonimizar h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.pauta-anonimizar p { font-size: 0.93rem; color: var(--text-soft); margin: 0 0 0.7rem; }
.pauta-anonimizar label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--text);
  cursor: pointer;
}
.pauta-anonimizar input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--beige-deep);
  flex: 0 0 auto;
}

.condiciones-uso {
  margin-top: 0.8rem;
  border-top: 1px dashed var(--beige);
  padding-top: 0.6rem;
}
.condiciones-uso summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--beige-deep);
  font-weight: 600;
}
.condiciones-uso ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.condiciones-uso li { margin: 0.4rem 0; }
.condiciones-uso p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* Cargando y errores de la lectura */
.cargando { color: var(--text-soft); font-style: italic; padding: 0.6rem 0; }
/* Por dónde va la lectura (11 sep 2026). Discreto, un peldaño por debajo
   del mensaje principal: informa sin robarle el sitio. */
.cargando-paso { margin: 0.35rem 0 0; font-size: 0.9rem; opacity: 0.8; }
.cargando-paso:empty { display: none; }
.error-lectura {
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.8rem 0;
}

/* Derivación sobria (riesgo agudo) */
.derivacion-aviso {
  background: var(--green-deep);
  color: var(--cream);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
}
.derivacion-aviso p { margin: 0; }

/* ---------- Las lentes ---------- */
.lente {
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-left: 4px solid var(--beige);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 0 0 1rem;
}
.lente-etiqueta {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beige-deep);
  margin: 0 0 0.25rem;
}
.lente h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.lente-hipotesis { margin: 0 0 0.8rem; }
/* La biblioteca clínica · en qué autor y concepto se apoya cada lectura.
   Discreta a propósito, es la firma del texto, no el texto. */
.lente-fuente {
  margin: 0 0 0.8rem;
  padding: 0.45rem 0.7rem;
  background: var(--sand, #F4EFE7);
  border-left: 2px solid var(--beige-deep);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-soft);
}
.lente-sub {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.8rem 0 0.2rem;
}
.lente-cuerpo { margin: 0; color: var(--text); }
.lente-pregunta {
  margin: 0.2rem 0 0;
  font-style: italic;
  color: var(--green-deep);
}
.lente-final { border-left-color: var(--green-dark); }
.aviso-omision {
  font-size: 0.9rem;
  color: var(--text-soft);
  border-top: 1px dashed var(--sand-dark);
  padding-top: 0.7rem;
  margin-top: 0.9rem;
}
.lectura-pie {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 1.2rem 0 0;
}

/* ---------- El cierre ---------- */
.preguntas-supervision {
  margin: 0.4rem 0 0.9rem;
  padding-left: 1.2rem;
}
.preguntas-supervision li { margin: 0.45rem 0; }
.cierre-hecho {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.informe-zona {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--beige);
}
.informe-zona h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }

/* ---------- Pase Profesional ---------- */
.pase-pro {
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-left: 5px solid var(--beige-deep);
  border-radius: 12px;
}
.pase-pro h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.pase-pro-que, .pase-pro-precio { color: var(--text-soft); font-size: 0.97rem; margin: 0.4rem 0; }
.pase-pro-congelado { color: var(--text-soft); font-size: 0.97rem; margin: 0.4rem 0 0.8rem; }
.pase-pro-tramos {
  list-style: none;
  margin: 0.6rem 0 0.4rem;
  padding: 0;
  border-top: 1px solid var(--sand-dark);
}
.pase-pro-tramos li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.1rem;
  border-bottom: 1px solid var(--sand-dark);
  font-size: 0.95rem;
  color: var(--text-soft);
}
.pase-pro-tramos .tramo-precio { font-weight: 600; white-space: nowrap; }
.pase-pro-tramos li.agotado { color: var(--text-muted); text-decoration: line-through; }
.pase-pro-tramos-nota { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.pase-pro-cta { margin: 0.9rem 0 0.4rem; }
.pase-pro-cta .btn { text-decoration: none; display: inline-block; }
.pase-pro-nota { font-size: 0.85rem; color: var(--text-muted); margin: 0.3rem 0 0.8rem; }
.pase-pro-activar summary { cursor: pointer; font-size: 0.95rem; color: var(--text-soft); }
.pase-pro-activar label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.7rem; }
.pase-pro-activar input {
  width: 100%;
  max-width: 22rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--sand-dark);
  border-radius: 8px;
  font: inherit;
  margin-top: 0.2rem;
}
.pase-pro-activar button { margin-top: 0.8rem; }
#pase-estado { font-size: 0.92rem; margin-top: 0.6rem; }
#pase-estado.ok { color: #1d5c46; }
#pase-estado.mal { color: #8a3a2e; }

/* ---------- Transparencia y pie ---------- */
/* ---------- Secciones plegables (petición de Daniel, 1 sep) ----------
   El título se ve siempre y el contenido se despliega al pulsarlo. La página
   es larga y en pantalla completa entraba como un muro de texto. En el Pase
   NO se pliega el bloque entero, solo la explicación: el precio, la escalera
   y el botón se quedan a la vista, que son la razón de ser de ese bloque. */
.plegable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0;
}
.plegable > summary::-webkit-details-marker { display: none; }
/* 2 sep 2026 · fuera el «+» de texto (Daniel: «parece letra retro de cuando
   empezaron los ordenadores»). El control es un chip redondo con un chevrón
   SVG a la derecha que gira al abrir, como en cualquier app actual. */
.plegable > summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6748' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.22s ease, background-color 0.15s ease;
}
.plegable[open] > summary::after { transform: rotate(180deg); }
.plegable > summary:hover::after { background-color: var(--sand-dark); }
.plegable > summary h2 { display: inline; margin: 0; }
.plegable > summary:hover h2 { color: var(--beige-deep); }
.plegable > summary:focus-visible { outline: 2px solid var(--beige-deep); outline-offset: 3px; border-radius: 8px; }

/* Los otros desplegables de la página (qué incluye el Pase, activar código,
   instalar) llevan el mismo chip, para que no quede ninguno con el triángulo
   por defecto del navegador. */
.condiciones-uso > summary,
.pase-pro-activar > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.condiciones-uso > summary::-webkit-details-marker,
.pase-pro-activar > summary::-webkit-details-marker { display: none; }
.condiciones-uso > summary::after,
.pase-pro-activar > summary::after {
  content: "";
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background-color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6748' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.22s ease;
}
.condiciones-uso[open] > summary::after,
.pase-pro-activar[open] > summary::after { transform: rotate(180deg); }
/* Foco visible también en estos, que al ocultar el marcador nativo y poner el
   summary en flex se quedaban sin señal clara al navegar con teclado. */
.condiciones-uso > summary:focus-visible,
.pase-pro-activar > summary:focus-visible { outline: 2px solid var(--beige-deep); outline-offset: 3px; border-radius: 8px; }

/* Quien tiene activado «reducir movimiento» no ve girar el chevrón ni animarse
   el hover: el estado abierto/cerrado se sigue viendo, solo sin transición.
   La app hermana ya hace lo mismo con sus animaciones. */
@media (prefers-reduced-motion: reduce) {
  .plegable > summary::after,
  .condiciones-uso > summary::after,
  .pase-pro-activar > summary::after,
  .plegable-oscuro { transition: none; }
}

.pase-pro-que-plegable { margin-top: 0; border-top: 0; padding-top: 0; }
.pase-pro-que-plegable .pase-pro-que { font-size: 0.9rem; }

/* ---------- El caso es tuyo · privacidad y continuidad juntas ---------- */
.el-caso-es-tuyo, .para-ti, .transparencia {
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-radius: 12px;
}
.transparencia { border-left: 5px solid var(--sand-dark); }
.el-caso-es-tuyo { border-left: 5px solid var(--green-deep); }
.para-ti { border-left: 5px solid var(--beige-deep); }
.el-caso-es-tuyo h2, .para-ti h2, .transparencia h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.caso-lede { color: var(--text-soft); font-size: 0.97rem; margin: 0 0 1rem; }
.caso-par, .para-ti-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.caso-col, .para-ti-col {
  background: var(--sand);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.caso-titulo, .para-ti-titulo {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}
.caso-col p:not(.caso-titulo) { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
.caso-cierre { margin: 1rem 0 0; color: var(--text-soft); font-size: 0.95rem; }
.para-ti-col.si { border-left: 3px solid var(--green-deep); }
.para-ti-col.no { border-left: 3px solid var(--beige-deep); }
.para-ti-col ul { margin: 0; padding-left: 1.1rem; color: var(--text-soft); font-size: 0.95rem; }
.para-ti-col li { margin: 0.45rem 0; }
.para-ti-nota { margin: 1rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 640px) {
  .caso-par, .para-ti-par { grid-template-columns: 1fr; }
}

.transparencia ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--text-soft); font-size: 0.95rem; }
.transparencia li { margin: 0.5rem 0; }
.otras-orientaciones {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 1rem;
}
.pie {
  background: var(--sand);
  border-top: 1px solid var(--sand-dark);
  text-align: center;
  padding: 1.4rem 1.25rem 1.8rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.pie p { margin: 0.4rem 0; }

@media (max-width: 480px) {
  .cabecera { padding: 1.3rem 1rem 1.3rem; }
  .cabecera-eyebrow { font-size: 0.72rem; margin-bottom: 0.5rem; }
  .btn { width: 100%; }
  .acciones .enlace-discreto { width: auto; }
}

/* ---------- Informe de continuidad imprimible ----------
   Se rellena solo al pulsar el botón y se vacía al cerrar el diálogo.
   Mismo patrón que el informe de la app hermana (di-lo-que-quieres-decir). */
#informe-print { display: none; }

@media print {
  .cabecera, .pie, .pasos-indicador, .acciones { display: none; }
  body.imprimiendo-informe > *:not(#informe-print) { display: none !important; }
  body.imprimiendo-informe #informe-print { display: block !important; }
  #informe-print {
    font-family: "DM Sans", system-ui, sans-serif;
    color: #2b2420;
    max-width: 640pt;
    margin: 0 auto;
  }
  #informe-print .inf-marca { font-size: 8.5pt; letter-spacing: 0.16em; color: #8a6748; margin: 0 0 6pt; }
  #informe-print .inf-titulo { font-family: "DM Serif Display", Georgia, serif; color: #11352b; font-size: 24pt; font-weight: 400; margin: 0 0 2pt; }
  #informe-print .inf-meta { color: #6b6058; font-size: 10pt; margin: 0 0 14pt; }
  #informe-print .inf-seccion { font-family: "DM Serif Display", Georgia, serif; color: #11352b; font-size: 14pt; font-weight: 400; margin: 14pt 0 5pt; }
  #informe-print .inf-relato { white-space: pre-wrap; border-left: 2pt solid #c7a587; padding: 6pt 10pt; font-size: 10.5pt; line-height: 1.55; margin: 0; }
  #informe-print .inf-cuerpo { font-size: 10.5pt; line-height: 1.55; margin: 0 0 6pt; }
  #informe-print .inf-lente { margin: 0 0 10pt; page-break-inside: avoid; }
  #informe-print .inf-lente-tipo { font-size: 8.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #1f5a49; border: 0.75pt solid #1f5a49; border-radius: 10pt; display: inline-block; padding: 1pt 8pt; margin: 0 0 4pt; }
  #informe-print .inf-fuente { font-size: 9pt; line-height: 1.45; color: #4a5f56; border-left: 1.5pt solid #c7a587; padding: 2pt 7pt; margin: 0 0 6pt; }
  #informe-print .inf-sub { font-size: 8pt; letter-spacing: 0.1em; text-transform: uppercase; color: #9a8e84; margin: 6pt 0 1pt; }
  #informe-print .inf-pregunta { font-style: italic; color: #11352b; font-size: 10.5pt; margin: 0; }
  #informe-print .inf-lista { margin: 0; padding-left: 14pt; font-size: 10.5pt; line-height: 1.7; }
  #informe-print .inf-pie { margin-top: 18pt; padding-top: 8pt; border-top: 0.75pt solid #ded5ca; color: #6b6058; font-size: 8.5pt; line-height: 1.5; }
}

/* ── Modo lectura (21-ago, pedido de Daniel contra el ruido visual) ──
   En las fases 4 y 5 la lectura es la protagonista: la cabecera larga se
   pliega a lo esencial (marca y título), el bloque de venta del Pase, la
   transparencia y la instalación se retiran de pantalla, y la tarjeta de
   cada lente gana peso. Nada de esto toca las fases 1 a 3, donde el plus
   del primer viewport sigue intacto. */
body.en-lectura .cabecera > :not(.cabecera-eyebrow):not(.cabecera-titulo):not(.cabecera-logo) { display: none; }
body.en-lectura .cabecera { padding-bottom: 0.5rem; }
body.en-lectura .transparencia,
body.en-lectura .pase-pro,
body.en-lectura .el-caso-es-tuyo,
body.en-lectura .para-ti,
body.en-lectura .instalar { display: none; }
body.en-lectura .lente {
  border-left-width: 5px;
  box-shadow: 0 2px 10px rgba(17, 53, 43, 0.07);
}
body.en-lectura .lente-hipotesis { font-size: 1.05rem; color: var(--green-dark); }

/* La nota de derivación que acompaña a la lectura (21-ago): mismo bloque
   verde oscuro de siempre, con el arranque en negrita como línea propia. */
.derivacion-aviso strong { display: block; margin-bottom: 0.35rem; }

/* Las preguntas de supervisión del cierre, en tarjeta como las lentes
   (iban en una lista desnuda que se perdía sobre el fondo). */
.preguntas-supervision {
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-left: 4px solid var(--green-dark);
  border-radius: 10px;
  padding: 0.9rem 1.1rem 0.9rem 2.3rem;
}

/* «Ver exactamente lo que va a viajar» (25 ago 2026): el paquete exacto
   antes de enviarlo, hechos comprobables en la propia pantalla. */
.ver-viaja { margin-top: 1rem; }
.viaja-intro { font-size: 0.92rem; color: var(--text-soft); margin: 0.5rem 0 0.2rem; }
.viaja-etiqueta {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beige-dark);
  margin: 0.85rem 0 0.3rem;
}
.viaja-campo {
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 13rem;
  overflow-y: auto;
  margin: 0;
}
.viaja-nota { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.85rem; line-height: 1.55; }