/* Di lo que quieres decir · The World Is Mind Project
   Mobile-first. Paleta y tipografía fijadas por especificación. */

:root {
  --green: #1f5a49;
  --green-dark: #174a3c;
  --green-deep: #11352b;
  --green-light: #2c6c59;
  --beige: #c7a587;
  --beige-dark: #aa8665;
  --beige-light: #decab6;
  --sand: #f7f4f0;
  --sand-dark: #ede8e2;
  --cream: #fdfcfa;
  --text: #2b2420;
  --text-soft: #6b6058;
  --text-muted: #9a8e84;
}

* { box-sizing: border-box; }

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(--green); }
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 */
.cabecera {
  background-color: var(--green-deep);
  background-image: linear-gradient(rgba(23,61,48,.82), rgba(23,61,48,.93)), url("../assets/dlqd-conversacion.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cream);
  padding: 2.5rem 1.25rem 2rem;
  text-align: center;
}
.cabecera-marca {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige-light);
  margin: 0 0 0.75rem;
}
/* Co-marca en la cabecera de la app (MIND WORLD + Decir sin Romper) */
.cabecera-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}
.cabecera-logos img { height: 52px; width: auto; display: block; }
.cabecera-logos-sep { width: 1px; height: 34px; background: rgba(253,252,250,.28); }
@media (max-width: 480px) { .cabecera-logos img { height: 42px; } }
.cabecera-titulo {
  color: var(--cream);
  font-size: clamp(2rem, 6vw, 3rem);
}
/* Deja explícita la jerarquía de marca: la app es la herramienta del método. */
.cabecera-metodo {
  margin: 0.2rem auto 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--beige-light);
}
.cabecera-sub {
  max-width: 36rem;
  margin: 0.5rem auto 1.25rem;
  color: var(--sand-dark);
}
/* La promesa de privacidad es el mata-objeciones nº 1 (señal de Espe, 9 jul)
   y pasaba desapercibida en verde sobre verde (Daniel, 10 jul: «pasa muy
   desapercibido en ese color/formato y eso no puede ser»). Invertida: el
   único elemento claro de la cabecera oscura, el ojo aterriza solo. */
.aviso-privacidad {
  display: inline-block;
  max-width: 30rem;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance; /* líneas de ancho parejo: el centrado se ve de verdad */
  color: var(--green-deep);
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 1.4rem; /* rectángulo redondeado: el óvalo pellizcaba el texto a 3 líneas */
  padding: 0.8rem 1.7rem;
  margin: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
/* Firma clínica visible en la cabecera (rediseño C, 5 jul — acta del primer
   contacto: la única capa del diferencial que nadie puede inferir solo). */
.firma-cabecera {
  margin: 0.35rem auto 0.9rem;
  font-size: 0.875rem;
  color: var(--beige-light);
}
.firma-cabecera strong { color: var(--cream); font-weight: 600; }

/* El espejo · demo estática del paso 3 como hero (rediseño C, 5 jul).
   Enseña el diferencial en vez de contarlo: ruido señalado -> mensaje limpio. */
.espejo { max-width: 640px; margin: 0 auto; padding: 1.1rem 1.25rem 0.4rem; }
.espejo-etiqueta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 600;
  margin: 0.15rem 0 0.3rem;
}
.espejo-burbuja { border-radius: 1rem; padding: 0.8rem 1rem; font-size: 0.98rem; line-height: 1.5; }
.espejo-antes { background: #fff; border: 1px solid var(--sand-dark); color: var(--text); }
.espejo-antes mark {
  background: #f4d9d2;
  border-bottom: 2px solid #c96f57;
  border-radius: 0.2rem;
  padding: 0 0.15rem;
  color: inherit;
}
.espejo-antes mark.espejo-escondido { background: #e7efe9; border-bottom-color: var(--green-light); }
.espejo-flecha { text-align: center; color: var(--beige-dark); font-size: 1.15rem; margin: 0.35rem 0; }
.espejo-despues { background: var(--green-deep); color: var(--cream); }
.espejo-lectura { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--text-soft); text-align: center; }
.espejo-lectura strong { color: var(--green-deep); }
/* Jerarquía del hero (feedback de Daniel, 8 jul): la burbuja verde oscura es
   CONTENIDO (el momento estrella), la acción principal va en beige y la
   secundaria en contorno. Tres pesos distintos, no tres masas verdes. */
.espejo-probar { text-align: center; margin: 0.9rem 0 0.3rem; }
.espejo-probar a {
  display: inline-block;
  background: transparent;
  color: var(--green-deep);
  border: 1.5px solid var(--green);
  text-decoration: none;
  font-weight: 500;
  padding: 0.72rem 1.6rem;
  border-radius: 8px;
  font-size: 1rem;
}
.espejo-probar a:hover { background: var(--sand); }

/* Indicador de pasos */
.pasos-indicador { background: var(--sand); border-bottom: 1px solid var(--sand-dark); }
.pasos-indicador ol {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0 auto;
  padding: 0.75rem 0.5rem;
  max-width: 44rem;
  overflow-x: auto;
}
.pasos-indicador li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-soft);
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}
.pasos-indicador li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--beige);
  background: var(--cream);
  color: var(--text-soft);
  font-weight: 500;
}
.pasos-indicador li.activo { color: var(--green-deep); font-weight: 500; }
.pasos-indicador li.activo span {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.pasos-indicador li.hecho span {
  background: var(--beige-light);
  border-color: var(--beige);
  color: var(--green-deep);
}

/* Pasos */
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.paso h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
.paso-ayuda { color: var(--text-soft); margin-top: 0; }

textarea, select, input[type="text"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--beige);
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  margin-top: 0.35rem;
}
textarea { resize: vertical; min-height: 9rem; }
textarea:focus, select:focus, input:focus, button:focus-visible {
  outline: 3px solid var(--green-light);
  outline-offset: 1px;
}

.campo { margin-bottom: 1.5rem; }
.campo label { font-weight: 500; color: var(--green-deep); }
.campo input[type="text"] { margin-top: 0.5rem; }
.campo .opcional { font-weight: 400; font-size: 0.85em; color: var(--text-muted); }

.error-campo { color: #8a3322; font-size: 0.9rem; }

/* Campo opcional «¿respondes a un mensaje?» (modo soporte): secundario,
   no compite con el volcado principal. */
.campo-opcional { margin-top: 1.5rem; }
.campo-opcional .paso-ayuda { font-size: 0.9rem; margin-bottom: 0.35rem; }
.campo-opcional textarea { min-height: 5rem; }

/* Botón de dictado por voz (se inserta por JS solo si el navegador lo soporta) */
.btn-microfono {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--green-deep);
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 0.5rem;
  cursor: pointer;
}
.btn-microfono:hover { background: var(--sand); border-color: var(--green); }
.btn-microfono svg { display: block; }
.btn-microfono.grabando { background: var(--green); color: var(--cream); border-color: var(--green); }
.btn-microfono.grabando svg { animation: pulso-mic 1s ease-in-out infinite; }
@keyframes pulso-mic { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Subir captura de pantalla (visión) · oculto hasta activarse (flag + Pase) */
.vision-captura {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--sand);
  border: 1px dashed var(--beige-dark);
  border-radius: 0.5rem;
}
.vision-captura .paso-ayuda { margin-bottom: 0.5rem; }
.vision-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--text-soft);
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.vision-consent input { width: auto; margin: 0.2rem 0 0; flex: 0 0 auto; }
.vision-estado { margin: 0.5rem 0 0; color: var(--green); font-weight: 500; }

/* Botones */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  align-items: center;
}
.btn {
  font: inherit;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease;
}
.btn-principal { background: var(--green); color: var(--cream); }
.btn-principal:hover { background: var(--green-dark); }
.btn-secundario {
  background: var(--cream);
  color: var(--green-dark);
  border-color: var(--beige);
}
.btn-secundario:hover { background: var(--sand); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
a.btn { text-decoration: none; display: inline-block; }
a.btn:focus-visible { outline: 3px solid var(--green-light); outline-offset: 1px; }

/* Salvaguarda de crisis: aviso sobrio (no alarmista) con el 024. */
.crisis-aviso {
  margin: 1.5rem 0;
  background: #fff;
  border: 1px solid var(--beige);
  border-left: 5px solid var(--green);
  border-radius: 0.75rem;
  padding: 1.3rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
}
.crisis-aviso p { margin: 0; }
.crisis-aviso a { font-weight: 600; }

/* Paso 3: análisis */
.cargando p { color: var(--text-soft); font-style: italic; }
.error-analisis {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.aviso-modo-basico {
  background: var(--sand);
  border-left: 4px solid var(--beige-dark);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* El espejo del paso 3: una frase que describe el texto en su conjunto. */
.espejo-lectura {
  background: var(--sand);
  border-left: 4px solid var(--green-light);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  margin-bottom: 1rem;
}

/* La caja del reescribir es más baja que un textarea normal. */
.reescribir-bloque textarea { min-height: 4.6rem; }

.leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.leyenda-item {
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--green-deep);
}

/* Colores por tipo de ruido: 4 tintes derivados de la paleta,
   distinguibles también por el borde inferior (no solo por color). */
.ruido-reproche { background: var(--beige-light); border-bottom: 3px solid var(--beige-dark); }
.ruido-ataque { background: #e9d3c8; border-bottom: 3px double #a05a3c; }
.ruido-defensa { background: var(--sand-dark); border-bottom: 3px dotted var(--text-muted); }
.ruido-mensaje_escondido { background: #d8e4de; border-bottom: 3px dashed var(--green-light); }

.texto-resaltado {
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.texto-resaltado mark {
  color: inherit;
  padding: 0.05rem 0.15rem;
  border-radius: 0.2rem;
}

.explicaciones { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.explicaciones li {
  background: var(--sand);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}
.explicaciones .fragmento-cita {
  display: block;
  font-style: italic;
  color: var(--green-deep);
  margin-bottom: 0.25rem;
}
.explicaciones .tipo-etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
}

/* Los cuatro caminos en la portada (feedback de Daniel, 8 jul): el método
   tiene la herramienta y la herramienta tiene cuatro caminos iguales. */
.caminos-landing { max-width: 760px; margin: 1.6rem auto 0; padding: 0 1.25rem; }

/* Puertas por nicho en la portada (mandato de Daniel, 10 jul 2026): cada
   nicho tiene que ver su necesidad en el primer impacto, botones donde cada
   uno encuentra lo suyo. Escenas de la investigación documentada
   (documentos-internos/id-nichos-investigacion-2026-07.md). */
.puertas-nicho { max-width: 640px; margin: 1.4rem auto 0; padding: 0 1.25rem; }
.puertas-titulo { margin: 0 0 0.6rem; text-align: center; font-weight: 600; color: var(--green-deep); font-size: 1.02rem; }
/* Ojo · la tarjeta base (fondo arena, borde verde, padding) la pone la
   .puerta global del suscriptor (más abajo), que también viste estas.
   Aquí SOLO lo propio de las puertas de nicho, acotado bajo .puertas-nicho
   para que nada se filtre a las puertas del suscriptor ni al revés. */
.puertas-nicho .puerta { margin-bottom: 0.5rem; }
.puertas-nicho .puerta summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; padding: 0.7rem 0.95rem; }
.puertas-nicho .puerta summary::-webkit-details-marker { display: none; }
.puertas-nicho .puerta summary::after { content: "▾"; margin-left: auto; color: var(--green-deep); font-size: 0.85em; }
.puertas-nicho .puerta[open] summary::after { content: "▴"; }
.puerta-quien { font-weight: 700; color: var(--green-deep); }
.puerta-pista { font-size: 0.88rem; color: var(--text-soft); }
.puerta-cuerpo { padding: 0 0.95rem 0.85rem; }
.puerta-cuerpo p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.puerta-cta { margin-top: 0.6rem !important; }
.puerta-cta a { color: var(--green-deep); font-weight: 600; }

/* Demo precargada («Mírala trabajar», P1 8 jul) y plus siempre visible (P2). */
.espejo-demo { text-align: center; margin: 1.1rem 0 0.4rem; }
.espejo-demo .btn {
  background: transparent;
  color: var(--green-deep);
  border: 1.5px solid var(--green);
  font-weight: 500;
}
.espejo-demo .btn:hover { background: var(--sand); }
/* El detalle de las cinco diferencias vive DENTRO del bloque del plus (una
   sola pieza sobre ChatGPT, sin duplicar la pregunta), con apertura discreta. */
.vs-ia-compacto .plegable { margin-top: 0.8rem; }
.vs-ia-compacto .plegable summary span {
  background: transparent;
  border: 1px dashed var(--beige);
  color: var(--green-deep);
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.vs-ia-compacto {
  max-width: 640px;
  margin: 1.4rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--sand);
  border-left: 4px solid var(--green-light);
  border-radius: 0 0.5rem 0.5rem 0;
}
.vs-ia-compacto p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text); }
.demo-banda {
  background: var(--sand);
  border: 1px solid var(--beige);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;
}
.demo-nota { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--text-soft); }
.demo-casos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.demo-chip {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--beige);
  background: #fff;
  color: var(--green-deep);
  cursor: pointer;
}
.demo-chip.activo { background: var(--green-deep); color: var(--cream); border-color: var(--green-deep); }
.demo-chip-propio { border-style: dashed; margin-left: auto; }

/* Paso 4: comparativa. Antes y Después se leen enteros, a tamaño completo:
   el Después es un textarea que crece con su contenido desde el JS
   (ajustarDespues), así que aquí se le quita el scroll interno y el asa de
   redimensionar. En móvil van apilados (Antes arriba, Después abajo) y a
   partir de 40rem lado a lado para comparar. */
.comparativa { display: grid; gap: 1.25rem; margin-top: 1rem; }
.comparativa h3 { font-size: 1.1rem; color: var(--text-soft); font-family: "DM Sans", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.texto-antes {
  background: var(--sand);
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
  color: var(--text-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1rem;
}
#texto-despues { overflow: hidden; resize: none; }
.comparativa .btn-escuchar { margin-top: 0.6rem; }
@media (min-width: 40rem) {
  .comparativa { grid-template-columns: 1fr 1fr; }
  .comparativa .columna { min-width: 0; }
}

/* Paso 5 */
.mensaje-final {
  background: #fff;
  border: 1px solid var(--beige);
  border-left: 5px solid var(--green);
  border-radius: 0.5rem;
  padding: 1.25rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Solo si el mensaje se va a ENVIAR (no decir en persona/llamada) se muestra
   como burbuja de chat «enviada», para que se vea cómo le llega a la otra. */
.mensaje-final.burbuja {
  position: relative;
  background: #d9fdd3;
  color: #1b1b1b;
  border: 0;
  border-radius: 16px 16px 4px 16px;
  padding: 0.95rem 1.15rem 1.6rem;
  max-width: 90%;
  margin-left: auto;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
}
.mensaje-final.burbuja::after {
  content: "✓✓";
  position: absolute;
  right: 0.95rem;
  bottom: 0.5rem;
  font-size: 0.78rem;
  color: #53bdeb;
  letter-spacing: -1px;
}

/* Estado «hablando» del botón Escuchar (síntesis de voz). */
.btn-escuchar.escuchando { background: var(--green); color: var(--cream); border-color: var(--green); }

/* Safari iOS deja "fantasma" el contenido de un <details> cerrado cuando el
   <summary> está reestilizado (display:block/flex, sin marcador): las cajas del
   contenido conservan layout por debajo de lo visible y aparece un hueco enorme
   bajo el pie (se notaba sobre todo en pantallas pequeñas tipo iPhone SE).
   Chromium lo recorta; WebKit lo pinta. Forzar display:none en el contenido del
   details cerrado lo colapsa bien en todos los navegadores. Se conserva visible
   solo el PRIMER summary (el toggle nativo): así se oculta todo lo demás sea cual
   sea su posición, incluido un eventual segundo summary. */
details:not([open]) > :not(summary:first-of-type) { display: none; }

/* Pestaña extensible reutilizable (p. ej. «cómo instalar la app»). */
.instalar { max-width: 640px; margin: 1.6rem auto 1.5rem; padding: 0 1.25rem; }
.vs-ia { max-width: 640px; margin: 1.6rem auto 1.5rem; padding: 0 1.25rem; }
.plegable-cuerpo ul { margin: 0.4rem 0 0.9rem; padding-left: 1.25rem; }
.plegable > summary { list-style: none; cursor: pointer; text-align: center; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary span { display: flex; width: min(100%, 20rem); box-sizing: border-box; justify-content: center; margin: 0 auto; align-items: center; gap: 0.45rem; background: var(--sand); color: var(--green-deep); font-weight: 600; padding: 0.75rem 1.3rem; border-radius: 8px; font-size: 1rem; }
.plegable > summary span::after { content: "▾"; font-size: 0.85em; }
.plegable[open] > summary { margin-bottom: 1rem; }
.plegable[open] > summary span::after { content: "▴"; }
.plegable-cuerpo { font-size: 0.98rem; line-height: 1.6; color: var(--text); }
.plegable-cuerpo ol { margin: 0.4rem 0 0.9rem; padding-left: 1.25rem; }
.plegable-cuerpo li { margin-bottom: 0.5rem; }
/* Los tres sistemas con la misma intensidad (feedback de Daniel, 8 jul):
   antes iPhone y ordenador salían apagados frente a Android. */
.instalar-ios, .instalar-pc { color: var(--text); font-size: inherit; }

/* Bloque de autor (confianza) · quién hay detrás de la herramienta. */
.autor {
  max-width: 640px;
  margin: 2.4rem auto 0;
  padding: 1.6rem 1.25rem 0.4rem;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  border-top: 1px solid var(--sand-dark);
}
.autor-foto {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.autor-texto p { margin: 0 0 0.35rem; }
.autor-nombre { font-family: "DM Serif Display", Georgia, serif; color: var(--green-deep); font-size: 1.2rem; }
.autor-cargo { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); }
.autor-texto p:last-child { margin-bottom: 0; font-size: 0.96rem; line-height: 1.55; color: var(--text-soft); }
.copiado-ok { color: var(--green); font-weight: 500; }
.seccion-ancla { margin-top: 2.25rem; }
.seccion-ancla h3 { font-size: 1.35rem; }
.frases-ancla { list-style: none; padding: 0; margin: 0; }
.frases-ancla li {
  background: var(--sand);
  border-left: 4px solid var(--beige);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  font-style: italic;
  color: var(--green-deep);
}

/* Ensayo en vivo (la app hace del otro) · burbujas de turnos */
#ensayo-turnos { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0; }
.ensayo-burbuja {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  border-radius: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.5;
}
.ensayo-burbuja.otro {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--sand-dark);
  border-bottom-left-radius: 0.25rem;
  color: var(--text);
}
.ensayo-burbuja.otro .ensayo-quien {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.2rem;
}
.ensayo-burbuja.persona {
  align-self: flex-end;
  background: var(--green);
  color: var(--cream, #fdfcfa);
  border-bottom-right-radius: 0.25rem;
}
.ensayo-soplo {
  background: rgba(31, 90, 73, 0.07);
  border: 1px dashed rgba(31, 90, 73, 0.4);
  border-radius: 0.7rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.92rem;
  color: var(--green-deep);
  margin: 0.4rem 0 0.8rem;
}
.ensayo-lectura-titulo {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--green-deep);
  margin: 1.1rem 0 0.25rem;
}

/* Puerta de suscriptor (tras el análisis de regalo) */
.puerta {
  margin-top: 1.5rem;
  background: var(--sand);
  border: 1px solid var(--beige);
  border-left: 5px solid var(--green);
  border-radius: 0.75rem;
  padding: 1.3rem 1.4rem;
}
.puerta h3 { margin-top: 0; font-size: 1.35rem; }
.puerta-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.puerta-form input { flex: 1 1 12rem; margin-top: 0; }
.puerta-form .btn { white-space: nowrap; text-decoration: none; display: inline-block; }
/* Panel del Pase: botones a lo ancho del panel, con texto que ajusta (el
   Premium es largo y, en una sola línea, tocaba el borde derecho). */
#panel-pase .puerta-form { flex-direction: column; align-items: stretch; }
#panel-pase .puerta-form .btn { white-space: normal; text-align: center; box-sizing: border-box; }
/* CTA del Pase · visible, no escondido. Tarjeta destacada bajo «Copiar» en el
   paso 5 (momento de valor) y botón propio en el pie. */
.pase-cta {
  margin: 1.75rem 0 0.2rem;
  background: var(--green-deep);
  border-radius: 0.75rem;
  padding: 1.5rem 1.5rem;
  text-align: center;
}
.pase-cta h3 { color: var(--cream); margin: 0 0 0.5rem; font-size: 1.3rem; }
.pase-cta p {
  color: var(--beige-light);
  margin: 0 auto 1.1rem;
  max-width: 36rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.pase-cta .btn-principal { background: var(--beige); color: var(--green-deep); font-weight: 700; }
.pase-cta .btn-principal:hover { background: var(--beige-dark); }
.pie .pie-pase { margin: 1.1rem 0; }
.enlace-discreto {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--green-light);
  text-decoration: underline;
  cursor: pointer;
}
.enlace-discreto:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
.codigo-dado {
  font-size: 1.6rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: var(--green-deep);
  background: #fff;
  border: 1px dashed var(--beige-dark);
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  display: inline-block;
  user-select: all;
}

/* Regala el Pase · bloque desplegable dentro del panel del Pase */
.bloque-regalo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--beige);
}
.bloque-regalo h4 {
  margin: 0 0 0.4rem;
  color: var(--green-deep);
  font-size: 1.1rem;
}

/* Tarjeta de regalo tras volver de Stripe (paso 1) */
#aviso-regalo-ok {
  margin-bottom: 1.5rem;
  background: var(--sand);
  border: 1px solid var(--beige);
  border-left: 5px solid var(--green);
  border-radius: 0.75rem;
  padding: 1.2rem 1.4rem;
}
.regalo-etiqueta {
  margin: 0.8rem 0 0.2rem;
  font-weight: 500;
  color: var(--green-deep);
}
.regalo-dato {
  margin: 0;
  font-weight: 600;
  color: var(--green-deep);
  overflow-wrap: anywhere;
}
.regalo-aviso { color: var(--beige-dark); font-weight: 500; }

/* Captación newsletter (paso 5) */
.seccion-newsletter {
  margin-top: 2.5rem;
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 0.75rem;
  padding: 1.4rem 1.5rem;
}
.seccion-newsletter h3 { font-size: 1.35rem; margin-top: 0; }
.form-newsletter { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.form-newsletter input[type="email"] {
  flex: 1 1 14rem;
  margin-top: 0;
}
.form-newsletter .btn { white-space: nowrap; }

/* Pie */
.pie {
  background: var(--sand);
  border-top: 1px solid var(--sand-dark);
  text-align: center;
  padding: 1.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.pie-aviso { color: var(--text-soft); margin: 0 0 0.5rem; }
.pie p { margin: 0; }
.pie-plan {
  display: inline-block;
  margin: 1.1rem auto 0;
  padding: 0.4rem 0.95rem;
  background: var(--cream);
  border: 1px solid var(--green-light);
  border-radius: 999px;
  color: var(--green-deep);
  font-weight: 600;
}
/* El display de arriba pisa el atributo hidden y dibujaba una píldora vacía
   a quien no tiene Pase guardado (lo vio Daniel el 8 jul). */
.pie-plan[hidden] { display: none; }

/* Informe personal descargable (paso 5) · el contenedor solo existe en el
   diálogo de imprimir; diseñado para papel blanco (los navegadores no
   imprimen fondos por defecto). */
#informe-print { display: none; }
.informe-nota { font-size: 0.8rem; }
@media print {
  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: 9pt; letter-spacing: 0.18em; text-transform: uppercase; color: #aa8665; margin: 0 0 4pt; }
  #informe-print .inf-titulo { font-family: "DM Serif Display", Georgia, serif; color: #11352b; font-size: 26pt; 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 6pt; }
  #informe-print .inf-antes,
  #informe-print .inf-despues { white-space: pre-wrap; border-left: 2pt solid #c7a587; padding: 6pt 10pt; font-size: 11pt; line-height: 1.55; margin: 0; }
  #informe-print .inf-despues { border-left-color: #1f5a49; }
  #informe-print .inf-cuerpo { font-size: 11pt; line-height: 1.55; margin: 0 0 6pt; }
  #informe-print .inf-ruido { margin: 0 0 9pt; page-break-inside: avoid; }
  #informe-print .inf-ruido-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 3pt; }
  #informe-print .inf-ruido-frag { font-style: italic; font-size: 11pt; margin: 0 0 2pt; }
  #informe-print .inf-ruido-exp { color: #4a423c; font-size: 10.5pt; line-height: 1.5; margin: 0; }
  #informe-print .inf-anclas { margin: 0; padding-left: 14pt; font-size: 11pt; 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; }
}

/* Accesos a los otros modos (paso 1) · tarjetas con icono para que se vean.
   Los ids (abrir-descifrar, abrir-carta, abrir-para-mi) no cambian. */
.modos {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--beige);
}
.modos-titulo {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}
.modo-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 0 0 0.6rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.modo-tarjeta:hover,
.modo-tarjeta:focus-visible {
  border-color: var(--green-light);
  background: var(--cream);
}
.modo-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--green-deep);
  color: var(--cream);
}
.modo-icono svg { width: 1.3rem; height: 1.3rem; }
.modo-nombre {
  display: block;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.35;
}
.modo-detalle {
  display: block;
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.4;
}

/* Modo descifrar · resultado en 4 bloques */
#descifrar-resultado { margin-top: 1.75rem; }
.descifrar-bloque {
  background: var(--sand);
  border-left: 4px solid var(--green);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.95rem 1.15rem;
  margin-bottom: 0.9rem;
}
.descifrar-cabecera {
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}
.descifrar-cuerpo {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.descifrar-lecturas { list-style: none; padding: 0; margin: 0; }
.descifrar-lecturas li {
  padding: 0.45rem 0 0.45rem 1.1rem;
  position: relative;
  color: var(--text);
}
.descifrar-lecturas li::before {
  content: "·";
  position: absolute;
  left: 0.2rem;
  color: var(--green-light);
  font-weight: 700;
}
.descifrar-lecturas li + li { border-top: 1px solid var(--sand-dark); }

/* Modo carta · casilla «para entregar / solo para mí» */
.carta-enviar-opcion {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.25rem 0 0.5rem;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.carta-enviar-opcion input { margin-top: 0.2rem; flex: 0 0 auto; }
/* La carta puede ser larga y con saltos de línea: se respetan tal cual.
   #carta-resultado reusa .descifrar-cuerpo (white-space: pre-wrap). */
#carta-salida { margin-top: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn-microfono.grabando svg { animation: none; }
}

/* ── Portada limpia (13 jul 2026) · la app primero ──────────────────────
   Mandato de Daniel: al abrir se ve dónde escribir. Arriba quedan la promesa
   de privacidad, la firma, el plus en una línea y los caminos como chips;
   el resto vive debajo del flujo y en el menú de tres rayitas. */

.cabecera { position: relative; padding: 1.7rem 1.25rem 1.5rem; }
.cabecera-logos { margin-bottom: 0.85rem; }
.cabecera-logos img { height: 38px; }
@media (max-width: 480px) { .cabecera-logos img { height: 32px; } }
.cabecera-titulo { font-size: clamp(1.75rem, 5.5vw, 2.4rem); }

/* El plus, en una línea bajo la promesa de privacidad (regla del 2 y 5 jul:
   nadie sale del primer viewport sin saber por qué esto no es ChatGPT). */
.plus-cabecera {
  margin: 0.6rem auto 0;
  max-width: 30rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--beige-light);
}
.plus-cabecera a { color: var(--cream); }

/* Botón del menú (tres rayitas), arriba a la derecha de la cabecera. */
.menu-app-btn {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(253, 252, 250, 0.35);
  border-radius: 12px;
  background: rgba(253, 252, 250, 0.08);
  cursor: pointer;
  z-index: 60;
}
.menu-app-btn span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--cream);
}
.menu-app-btn span:nth-child(1) { top: 15px; }
.menu-app-btn span:nth-child(2) { top: 22px; }
.menu-app-btn span:nth-child(3) { top: 29px; }

/* La capa del menú lleva su botón de cerrar DENTRO y por encima de todo:
   se abre y se cierra siempre (la tara del menú de la home, aquí no). */
.menu-app {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(23, 61, 48, 0.98);
  flex-direction: column;
  gap: 0.5rem;
  padding: 4.6rem 1.2rem 1.5rem;
  overflow-y: auto;
}
.menu-app.abierto { display: flex; }
.menu-app a {
  display: block;
  color: var(--cream);
  text-decoration: none;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(253, 252, 250, 0.14);
  border-radius: 10px;
  background: rgba(253, 252, 250, 0.04);
}
.menu-app a:hover { background: rgba(253, 252, 250, 0.1); color: var(--cream); }
.menu-app-cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(253, 252, 250, 0.35);
  border-radius: 12px;
  background: rgba(253, 252, 250, 0.08);
  color: var(--cream);
  font-size: 1.15rem;
  cursor: pointer;
}
body.sin-scroll { overflow: hidden; }

/* Los cuatro caminos como chips compactos entre la cabecera y el campo. */
.caminos-chips { max-width: 640px; margin: 1.1rem auto 0; }
.caminos-chips .modos {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.caminos-chips .modos-titulo { flex-basis: 100%; margin-bottom: 0.15rem; }
.caminos-chips .modo-tarjeta { flex: 0 1 calc((100% - 0.5rem) / 2); }
.caminos-chips .modo-tarjeta {
  flex-direction: column;
  text-align: center;
  gap: 0.45rem;
  padding: 0.7rem 0.55rem;
  margin: 0;
}
.caminos-chips .modo-icono { width: 2rem; height: 2rem; }
.caminos-chips .modo-icono svg { width: 1rem; height: 1rem; }
.caminos-chips .modo-nombre { font-size: 0.85rem; line-height: 1.25; text-wrap: balance; }
.caminos-chips .modo-detalle { display: none; }
@media (min-width: 700px) {
  .caminos-chips { max-width: 760px; }
  .caminos-chips .modo-tarjeta { flex: 0 1 calc((100% - 1.5rem) / 4); }
}
.encuadre-como {
  max-width: 640px;
  margin: 0.7rem auto 0;
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 0.75rem;
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: center;
}
.encuadre-como h3 {
  margin: 0 0 0.55rem;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--green-dark);
}
.encuadre-como p { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.55; }

/* Las secciones ancladas desde el menú respiran al aterrizar. */
#espejo, #puertas, #plus, #privacidad, #como-funciona, #instalar, #autor, #pie-pase {
  scroll-margin-top: 0.9rem;
}

/* En móvil, todo lo de arriba se aprieta para que el campo de escribir
   asome en la primera pantalla (verificado con Playwright a 390×844). */
@media (max-width: 700px) {
  .cabecera { padding: 1.15rem 1.1rem 1.1rem; }
  .cabecera-logos { margin-bottom: 0.55rem; }
  .cabecera-titulo { font-size: 1.55rem; }
  .cabecera-metodo { font-size: 0.8rem; }
  .firma-cabecera { margin: 0.3rem auto 0.65rem; font-size: 0.8rem; }
  .aviso-privacidad { font-size: 0.88rem; padding: 0.6rem 1.1rem; }
  .plus-cabecera { margin-top: 0.5rem; font-size: 0.8rem; }
  .caminos-chips { margin-top: 0.8rem; }
  .caminos-chips .modos { gap: 0.45rem; }
  .caminos-chips .modos-titulo { font-size: 0.72rem; margin-bottom: 0.05rem; }
  .caminos-chips .modo-tarjeta { padding: 0.5rem 0.45rem; gap: 0.3rem; }
  .caminos-chips .modo-icono { width: 1.55rem; height: 1.55rem; }
  .caminos-chips .modo-icono svg { width: 0.85rem; height: 0.85rem; }
  .caminos-chips .modo-nombre { font-size: 0.78rem; }
  .pasos-indicador ol { padding: 0.5rem 0.4rem; }
  main { padding-top: 1.1rem; }
  .paso h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
}

/* Las cinco pestañas plegables como tarjetas en filas centradas (29 jul,
   encargo de Daniel: mismo lenguaje visual que los botones de la portada).
   La sección con su plegable abierto pasa a ocupar la fila entera. */
.pestanas-filas {
  max-width: 760px;
  margin: 1.7rem auto 0;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  align-items: stretch;
}
.pestanas-filas > section {
  flex: 0 1 calc((100% - 0.5rem) / 2);
  margin: 0;
  max-width: none;
  padding: 0;
}
@media (min-width: 700px) {
  .pestanas-filas > section { flex: 0 1 calc((100% - 1rem) / 3); }
}
.pestanas-filas > section.abierta { flex-basis: 100%; }
.pestanas-filas > section > details:not([open]) { height: 100%; }
.pestanas-filas > section > details:not([open]) > summary { height: 100%; }
.pestanas-filas .plegable > summary span,
.pestanas-filas .historieta-summary span {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 0.75rem;
  color: var(--green-deep);
  font-weight: 500;
  padding: 0.8rem 0.7rem;
  font-size: 0.88rem;
  line-height: 1.3;
  white-space: normal;
}
.pestanas-filas .plegable > summary span:hover,
.pestanas-filas .historieta-summary span:hover {
  border-color: var(--green-light);
  background: var(--cream);
}
.pestanas-filas .historieta { padding: 0; }
.pestanas-filas .historieta details { max-width: none; margin: 0; }
/* Dentro de las filas, la tarjeta no hereda el margin-top de su sección de
   origen (.vs-ia-compacto lo trae de serie) o quedaría desencuadrada
   respecto a las demás de su fila. Solo el details directo; los plegables
   anidados del cuerpo conservan su separación. */
.pestanas-filas .vs-ia-compacto > details.plegable { margin-top: 0; }
.pestanas-filas > section.abierta > details > .plegable-cuerpo,
.pestanas-filas > section.abierta .historieta-detalle > *:not(summary) {
  padding: 0 0.4rem;
}
.pestanas-filas > section,
.pestanas-filas .vs-ia-compacto {
  border: none;
  background: transparent;
  box-shadow: none;
}
.pestanas-filas section .plegable > summary span,
.pestanas-filas section .historieta-summary span {
  background: var(--sand);
  border: 1px solid var(--sand-dark);
}
.pestanas-filas section .plegable[open] > summary span {
  background: var(--cream);
  border-color: var(--green-light);
}