/* Campo Vivo · propuesta "línea": las pantallas de la app (Crear, Respirar y Práctica), las capas a pantalla completa
   (ensamblaje del ritual y respiración guiada) y las ventanas nuevas (capas del sonido, cierre y confirmaciones).
   Mismo lenguaje que linea.css y app.css: negro puro, línea en blanco arena, una sola fuente en peso 400. El morado marca solo
   lo que está vivo: el sonido que suena, el control activo y el foco del teclado. */

/* Al enfocar un control, el navegador lo acerca a la vista sin dejarlo bajo la cabecera ni bajo el mini reproductor. */
.pantalla button,
.pantalla input,
.pantalla textarea { scroll-margin-top: calc(var(--cabecera) + 24px); scroll-margin-bottom: calc(150px + var(--nav-total)); }
/* Sin mini reproductor (todavía no sonó nada) solo hay que dejar libre la barra de abajo. */
html[data-sin-mini] .pantalla button,
html[data-sin-mini] .pantalla input,
html[data-sin-mini] .pantalla textarea { scroll-margin-bottom: calc(24px + var(--nav-total)); }

/* Un título que recibe el foco al cambiar de pantalla o de paso (para el lector de pantalla) no es un control: sin anillo. */
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible { outline: none; }

/* ── Cabeceras de pantalla y bloques ───────────────────────── */
.pantalla-cabeza { display: grid; gap: 14px; max-width: 640px; margin: 16px 0 48px; }
.bloque { margin-bottom: 80px; background: var(--oro-charco) 50% 0 / 100% min(100%, 440px) no-repeat; }   /* luz: el charco de cada bloque */
.bloque .titulo-3 { margin-bottom: 8px; }   /* las partes de Práctica son subtítulos: el título de la pantalla es "Práctica" */
.bloque-frase { max-width: 640px; margin-bottom: 28px; }
.pie-aviso { max-width: 520px; margin-top: 40px; color: var(--gris); }

/* Las figuras de geometría de cada capa, como íconos de línea. */
.glifo { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.glifo * { vector-effect: non-scaling-stroke; }

/* Lista de capas con su valor real (la receta de un ritual o de una mezcla). */
.receta-capas { display: grid; border-top: 1px solid var(--pizarra); }
.receta-capa { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pizarra); text-align: left; }
.receta-glifo { width: 40px; height: 40px; color: var(--blanco); }
.receta-textos { display: grid; gap: 2px; min-width: 0; }
.receta-valor { font-size: var(--t-1); line-height: var(--l-1); }
.receta-detalle { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }

/* Campos de texto: línea fina, sin relleno. */
.campo-etiqueta { display: block; margin-bottom: 8px; color: var(--niebla); text-align: left; }
.campo-texto,
.campo-linea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: var(--borde) solid var(--pizarra-claro);
  border-radius: var(--radio-boton);
  background: transparent;
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  font: inherit;
  font-size: var(--t-3);
  line-height: 1.4;
  transition: border-color var(--rapido);
}
.campo-texto { resize: vertical; min-height: 88px; }
.campo-linea { min-height: 48px; }
.campo-texto::placeholder,
.campo-linea::placeholder { color: var(--gris); }
.campo-texto:hover,
.campo-linea:hover { border-color: var(--gris); }
.campo-texto:focus-visible,
.campo-linea:focus-visible { border-color: var(--blanco); outline-offset: 2px; }

/* Control deslizante de línea fina. */
.deslizador { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }   /* 44 px: el área para el dedo; el riel mide 2 */
.deslizador::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blanco) var(--lleno, 50%), rgba(238, 230, 216, 0.25) var(--lleno, 50%)); }
.deslizador::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(238, 230, 216, 0.25); }
.deslizador::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--blanco); }
.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--blanco); }
.deslizador::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--blanco); }
.deslizador:disabled { opacity: 0.35; cursor: default; }

/* Escala de cinco palabras: cómo llegas, cómo te vas. */
.escala { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 640px; margin-inline: auto; }
.escala::before { content: ''; position: absolute; left: 10%; right: 10%; top: 27px; height: 1px; background: var(--pizarra-claro); }
.escala-opcion { position: relative; display: grid; justify-items: center; align-content: start; gap: 14px; padding: 0 2px 6px; color: var(--niebla); border-radius: 14px; transition: color var(--rapido); }
.escala-punto {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: var(--borde) solid var(--pizarra-claro);
  border-radius: 50%;
  background: var(--negro);
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  font-size: var(--t-1);
  line-height: 1;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform 0.3s var(--curva);
}
.escala-palabra { font-size: var(--t-3); line-height: 1.25; text-wrap: balance; }
.escala-opcion:hover .escala-punto { border-color: var(--blanco); }
.escala-opcion:hover { color: var(--blanco); }
.escala-opcion:active .escala-punto { transform: scale(0.94); }
.escala-opcion[aria-checked="true"] { color: var(--blanco); }
.escala-opcion[aria-checked="true"] .escala-punto { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.escala--hoja { max-width: none; margin-bottom: 24px; }
.escala--hoja .escala-punto { width: 46px; height: 46px; font-size: var(--t-2); }
.escala--hoja::before { top: 23px; }
.escala--hoja .escala-palabra { font-size: var(--t-4); }

/* ── Crear: pestañas ────────────────────────────────────────── */
.crear { text-align: center; }
.pestanas { display: flex; width: max-content; max-width: 100%; gap: 2px; margin: 8px auto 48px; padding: 4px; border: 1px solid var(--pizarra); border-radius: var(--radio-pildora); box-shadow: var(--oro-filo); }
.pestana { min-height: 44px; padding: 0 24px; border-radius: var(--radio-pildora); color: var(--niebla); font-size: var(--t-3); line-height: 1; transition: background-color var(--rapido), color var(--rapido); }
.pestana:hover { color: var(--blanco); }
.pestana[aria-selected="true"] { background: var(--blanco); color: var(--negro); }

/* ── Crear: la guía ─────────────────────────────────────────── */
.crear { overflow-x: clip; }   /* el halo de fondo no ensancha la página en celular */
.panel-guia { position: relative; max-width: 720px; margin-inline: auto; }
.panel-guia > :not(.guia-fondo) { position: relative; }
/* La flor de la vida, apenas visible y casi quieta, detrás de la conversación. */
.guia-fondo { position: absolute; left: 50%; top: -210px; width: 860px; height: 860px; max-width: none; margin-left: -430px; fill: none; stroke: var(--oro); stroke-width: 1px; opacity: 0.085; pointer-events: none; animation: guia-gira 300s linear infinite; }
.guia-fondo * { vector-effect: non-scaling-stroke; }
@keyframes guia-gira { to { transform: rotate(360deg); } }
.guia-cabeza { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 12px; }
.guia-atras { position: absolute; left: 0; top: 50%; display: inline-flex; align-items: center; gap: 4px; margin-top: -22px; padding: 0 8px 0 0; color: var(--niebla); text-decoration: none; }
.guia-atras:hover { color: var(--blanco); }
.progreso { display: flex; gap: 8px; }
.progreso li { width: 48px; height: 2px; border-radius: 2px; background: var(--pizarra-claro); transition: background-color 0.4s; }
.progreso li[data-estado="hecho"] { background: rgba(238, 230, 216, 0.5); }
.progreso li[data-estado="actual"] { background: var(--blanco); }
/* En 320 a 359 px el "Atrás" (con la letra más grande) no cabe a la izquierda de tres rayas de 48 px: las rayas se acortan para no tocarlo. */
@media (max-width: 359px) {
  .progreso { gap: 6px; }
  .progreso li { width: 30px; }
}
.guia-migas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 44px; margin-bottom: 8px; }
.miga { min-height: 44px; padding: 0 14px; border: 1px solid var(--pizarra-claro); border-radius: var(--radio-pildora); color: var(--niebla); font-size: var(--t-4); line-height: 1; transition: border-color var(--rapido), color var(--rapido); }
.miga:hover { border-color: var(--blanco); color: var(--blanco); }

.paso { padding-top: 20px; }
.paso-titulo { margin-bottom: 14px; }
.paso-frase { max-width: 540px; margin: 0 auto 44px; }
.guia-opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.guia-opcion[aria-pressed="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.guia-tiempos { max-width: 560px; margin: 0 auto 36px; }

/* Entrada serena: el título, la frase y luego cada opción, una tras otra. */
@keyframes paso-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.paso--entra .paso-titulo { animation: paso-sube 0.6s var(--curva) both; }
.paso--entra .paso-frase { animation: paso-sube 0.6s var(--curva) 0.08s both; }
.paso--entra .guia-opcion,
.paso--entra .escala-opcion,
.paso--entra .guia-tiempos .pildora { animation: paso-sube 0.55s var(--curva) both; }
.paso--entra .guia-opcion:nth-child(1), .paso--entra .escala-opcion:nth-child(1), .paso--entra .guia-tiempos .pildora:nth-child(1) { animation-delay: 0.16s; }
.paso--entra .guia-opcion:nth-child(2), .paso--entra .escala-opcion:nth-child(2), .paso--entra .guia-tiempos .pildora:nth-child(2) { animation-delay: 0.21s; }
.paso--entra .guia-opcion:nth-child(3), .paso--entra .escala-opcion:nth-child(3), .paso--entra .guia-tiempos .pildora:nth-child(3) { animation-delay: 0.26s; }
.paso--entra .guia-opcion:nth-child(4), .paso--entra .escala-opcion:nth-child(4), .paso--entra .guia-tiempos .pildora:nth-child(4) { animation-delay: 0.31s; }
.paso--entra .guia-opcion:nth-child(5), .paso--entra .escala-opcion:nth-child(5), .paso--entra .guia-tiempos .pildora:nth-child(5) { animation-delay: 0.36s; }
.paso--entra .guia-opcion:nth-child(6) { animation-delay: 0.41s; }
.paso--entra .guia-opcion:nth-child(7) { animation-delay: 0.46s; }
.paso--entra .guia-opcion:nth-child(8) { animation-delay: 0.51s; }

.palabras { display: grid; justify-items: center; gap: 18px; margin-top: 44px; }
.palabras-caja { display: grid; gap: 12px; width: min(100%, 520px); text-align: left; }
.palabras-ayuda { margin-top: -4px; }
.palabras-resultado { color: var(--blanco); }
.palabras-caja .boton { justify-self: start; }

/* La receta: de qué está hecho el ritual que arma la guía. */
.receta { scroll-margin-top: 112px; max-width: 560px; margin: 0 auto; padding: 28px 24px 24px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07); text-align: left; animation: paso-sube 0.55s var(--curva) both; }
.receta-etiqueta { margin-bottom: 8px; color: var(--gris); }
.receta-describir { margin-top: 6px; }
.receta-ajuste { margin-top: 10px; }
.receta-corta { margin-top: 10px; color: var(--blanco); }
.receta-boton { margin-top: 22px; }
.receta-capas-titulo { margin: 30px 0 10px; color: var(--gris); }
.receta .receta-capas { margin: 0; }

/* ── Crear: tu mezcla ───────────────────────────────────────── */
.panel-mezcla { max-width: 960px; margin-inline: auto; text-align: left; }
.mezcla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.mezcla-controles { display: grid; gap: 40px; }
.mezcla-cabeza { display: grid; gap: 14px; }
.mezcla-intro { max-width: 520px; }
.mz-grupo { display: grid; gap: 14px; }
.mz-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; }
.mz-nota { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.mz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mz-chip[aria-pressed="true"],
.mz-chip[aria-checked="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.mz-chip[aria-pressed="true"] .detalle,
.mz-chip[aria-checked="true"] .detalle { color: rgba(0, 0, 0, 0.55); }
.mz-chip .detalle { font-size: 0.78em; }
/* La aclaración de 777 Hz va en su propia línea: así el número y su unidad no se separan al partirse el párrafo. */
.mz-ayuda__marca { display: block; margin-top: 4px; }
.mz-chip[data-bloqueado="true"] { opacity: 0.4; }
.mz-aviso { color: var(--blanco); }
.mz-latido { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.mz-deslizador { display: flex; align-items: center; gap: 14px; flex: 1 1 200px; min-width: 180px; max-width: 360px; transition: opacity var(--rapido); }
.mz-deslizador[data-activo="false"] { opacity: 0.5; }
.mz-latido-valor { flex: none; min-width: 52px; text-align: right; }
.mz-receta .receta-capas { margin-top: 2px; }

.mz-fijo { display: none; }   /* solo en celular: ver más abajo */
.mezcla-vivo { position: sticky; top: calc(var(--cabecera) + 16px); }
.mz-caja { display: grid; gap: 16px; padding: 20px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07); }
.mz-describir { min-height: 52px; color: var(--hueso); }
.mz-espectro-pie { margin-top: -8px; }
.mz-guardar { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--pizarra); }
.mz-guardar .campo-etiqueta { margin-bottom: 0; }

/* ── Espectro en vivo ───────────────────────────────────────── */
.espectro-lienzo { display: block; width: 100%; height: 120px; }
.espectro { margin-bottom: 20px; padding: 16px 16px 12px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07); }
.espectro-pie { margin-top: 8px; }
/* En una hoja, el espectro se adapta al alto que hay: así la acción de abajo nunca queda fuera de la pantalla. */
.dialogo .espectro { margin-bottom: 12px; }
.dialogo .espectro-lienzo { height: clamp(96px, 18vh, 160px); }

/* ── Hojas con marco ─────────────────────────────────────────────
   Todas las ventanas de la app (temporizador, afinar, ritual, capas y cierre) siguen el mismo patrón: la cabecera queda
   fija, el cuerpo se desplaza por su cuenta y el pie, con la acción ("Listo"), siempre a la vista. Si el cuerpo tiene más
   contenido hacia arriba o hacia abajo, ese borde se desvanece (app.js marca data-mas-arriba y data-mas-abajo). */
.dialogo--marco {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
.dialogo-cabeza { flex: none; }
.dialogo-cuerpo {
  --fade-arriba: 0px;
  --fade-abajo: 0px;
  flex: 1 1 auto;
  min-height: 0;
  /* El margen negativo y el relleno dejan sitio al aro de foco (2 px + 3 px de separación) sin que el desplazamiento lo recorte. */
  margin: 0 -8px;
  padding: 6px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(238, 230, 216, 0.25) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba), #000 calc(100% - var(--fade-abajo)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-arriba), #000 calc(100% - var(--fade-abajo)), transparent 100%);
}
.dialogo-cuerpo[data-mas-arriba="true"] { --fade-arriba: 32px; }
.dialogo-cuerpo[data-mas-abajo="true"] { --fade-abajo: 32px; }
.dialogo--marco .dialogo-pie { flex: none; margin-top: 16px; }

/* ── Ver por dentro ───────────────────────────────────────────────
   Una hoja casi a pantalla completa con cinco vistas del sonido que suena (app-dentro.js las dibuja). Escritorio: el sonido en el tiempo
   arriba, a lo ancho, y debajo, de a dos, el campo estéreo y un oído y el otro, y las capas y la placa (el cuerpo de la hoja se
   desplaza si no cabe). Celular: un panel a la vez, deslizando (scroll-snap), con
   puntos que dicen cuál se ve. El tamaño de cada lienzo sale de este CSS (siempre un alto fijo o el que sobra), nunca de lo que se
   dibuja en él: así dibujar no mueve la página. */
.velo[data-dialogo="por-dentro"] { padding: 24px; background: radial-gradient(ellipse 90% 42% at 50% 0%, rgba(var(--oro-rgb), 0.08) 0%, rgba(var(--oro-rgb), 0) 100%), rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* sin desenfoque: con tanto negro no se nota y cuesta (la placa sigue dibujando debajo) */
.dialogo--dentro {
  width: min(100%, 1180px);
  padding: 22px 24px 20px;
  border-radius: 24px;
  background: var(--oro-ambiente) 50% 0 / 100% 220px no-repeat, var(--negro);
  box-shadow: 0 0 0 1px var(--linea-tenue), 0 24px 64px rgba(0, 0, 0, 0.6);
  text-align: left;
}
/* El desvanecido de los bordes del cuerpo solo hace falta cuando hay más por ver: sin él, el navegador no recompone todo el cuerpo (con tres lienzos que
   se repintan 30 veces por segundo) en cada cuadro. */
.dialogo--dentro .dialogo-cuerpo:not([data-mas-arriba="true"]):not([data-mas-abajo="true"]) { -webkit-mask-image: none; mask-image: none; }
.dentro-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 2px; margin-bottom: 14px; }
.dentro-cabeza h2 { grid-column: 1; margin: 0; }
.dialogo--dentro .dentro-estado { grid-column: 1; margin: 0; }
.dentro-escuchar { grid-column: 2; grid-row: 1 / span 2; min-height: 48px; padding: 0 22px; font-size: var(--t-2); }
/* Como el botón de la ficha: blanco lleno para escuchar y, mientras suena, de contorno con el aro morado (sin un segundo borde). */
.dentro-escuchar:not(.boton--principal) { background: transparent; border-color: rgba(238, 230, 216, 0.55); }
.dentro-escuchar:not(.boton--principal):hover { background: rgba(238, 230, 216, 0.08); }
.dentro-escuchar.boton--vivo { border-color: transparent; }
.dentro-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.dentro-paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dentro-panel--tiempo { grid-column: 1 / -1; }
.dentro-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border-radius: 18px; background: var(--oro-ambiente) 50% 0 / 100% 150px no-repeat, var(--grafito); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.08); }
.dentro-panel-titulo { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; }
.dentro-panel-texto { max-width: 70ch; }
.dentro-lienzo { display: block; width: 100%; border-radius: 12px; background: var(--negro); }
.dentro-panel--tiempo .dentro-lienzo { height: clamp(110px, 17vh, 200px); }
.dentro-panel--campo .dentro-lienzo,
.dentro-panel--oidos .dentro-lienzo,
.dentro-panel--capas .dentro-lienzo,
.dentro-panel--placa .dentro-lienzo { height: clamp(150px, 24vh, 260px); }
/* Un oído y el otro: el nombre de cada fila va encima del lienzo, arriba a la izquierda de su franja. Las filas son las mismas que
   dibuja dentro.js (FILAS_OIDOS: 30 %, 30 % y 40 % del alto), que deja libres los 22 px de arriba de cada una para el nombre. */
.dentro-oidos { position: relative; }
.dentro-oidos-rotulos { position: absolute; inset: 0; display: grid; grid-template-rows: 30% 30% 40%; pointer-events: none; }
.dentro-oidos-rotulos span { padding: 4px 12px 0; color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }
.dentro-eje { display: flex; justify-content: space-between; color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }
.dentro-puntos { display: none; }
.dentro-punto { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; }
.dentro-punto::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(238, 230, 216, 0.3); transition: background-color var(--rapido); }
.dentro-punto[aria-current="true"]::before { background: var(--blanco); }
@media (min-width: 900px) {
  .dialogo--dentro .dialogo-pie { margin-top: 12px; }
  .dialogo--dentro .acciones { display: flex; justify-content: flex-end; }
  .dialogo--dentro .acciones .boton { width: auto; min-width: 200px; min-height: 48px; font-size: var(--t-2); }
}
@media (max-width: 899px) {
  .velo[data-dialogo="por-dentro"] { padding: 12px; }
  .dialogo--dentro { height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; padding: 18px 16px 14px; border-radius: 20px; }
  .dentro-cabeza { margin-bottom: 10px; }
  .dentro-paneles { display: flex; flex: 1 1 auto; min-height: 0; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .dentro-paneles::-webkit-scrollbar { display: none; }
  .dentro-panel { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 16px; }
  .dentro-panel--tiempo .dentro-lienzo,
  .dentro-panel--campo .dentro-lienzo,
  .dentro-panel--capas .dentro-lienzo,
  .dentro-panel--placa .dentro-lienzo,
  .dentro-oidos { flex: 1 1 0; height: 0; min-height: 120px; }
  .dentro-oidos { display: flex; }
  .dentro-panel--oidos .dentro-lienzo { flex: 1 1 auto; width: auto; min-width: 0; height: auto; }
  .dentro-puntos { display: flex; flex: none; justify-content: center; gap: 4px; }
}
@media (max-width: 479px) {
  .dentro-cabeza { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .dentro-escuchar { grid-column: 1; grid-row: auto; width: 100%; }
}
/* Teléfono de lado: todo en una fila de arriba, los textos de cada panel se van y el lienzo se queda con el alto que sobra. */
@media (max-height: 479px) {
  .velo[data-dialogo="por-dentro"] { padding: 8px; }
  .dialogo--dentro { max-height: calc(100dvh - 16px); padding: 12px 16px 10px; }
  .dentro-cabeza { margin-bottom: 8px; }
  .dentro-escuchar { min-height: 44px; padding: 0 18px; }
  .dentro-cuerpo { gap: 6px; }
  .dentro-panel { gap: 6px; padding: 12px 14px; }
  .dentro-panel-texto { display: none; }
  .dentro-panel-titulo { font-size: var(--t-2); line-height: var(--l-2); }
  .dentro-panel--tiempo .dentro-lienzo,
  .dentro-panel--campo .dentro-lienzo,
  .dentro-panel--capas .dentro-lienzo,
  .dentro-panel--placa .dentro-lienzo,
  .dentro-oidos { min-height: 72px; }
  .dentro-panel--oidos .dentro-lienzo { min-height: 0; }
  .dentro-punto { height: 28px; }   /* de lado no hay alto: los puntos son una ayuda, el deslizamiento es el gesto principal */
  .dialogo--dentro .dialogo-pie { margin-top: 8px; }
  .dialogo--dentro .acciones .boton { min-height: 44px; }
}
@media (max-height: 479px) and (max-width: 899px) {
  .dialogo--dentro { height: calc(100dvh - 16px); }
}

/* ── Ventanas: capas del sonido, cierre y ancho ─────────────── */
.dialogo--ancho { width: min(100%, 620px); text-align: left; }
.dialogo--ancho .texto-2 { margin-bottom: 18px; }
.capas-lista { display: grid; margin-bottom: 14px; border-top: 1px solid var(--pizarra); }
.capa { display: grid; grid-template-columns: 44px minmax(0, 1fr) 176px; gap: 14px 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pizarra); }
.capa-glifo { width: 44px; height: 44px; color: var(--blanco); transition: filter var(--rapido); }
.capa[data-al-frente="true"] .capa-glifo { filter: drop-shadow(0 0 8px rgba(155, 124, 244, 0.75)); }
.capa-textos { display: grid; gap: 2px; min-width: 0; }
.capa-nombre { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.capa-valor { font-size: var(--t-1); line-height: var(--l-1); }
.capa-detalle { color: var(--gris); }
.capa-control { display: grid; justify-items: end; gap: 6px; }
.capa-nivel { display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(238, 230, 216, 0.14); overflow: hidden; }
.capa-nivel i { display: block; width: 0; height: 100%; background: var(--blanco); transition: width 0.35s var(--curva); }
.capa-estado { color: var(--gris); }
.capa-frente { min-height: 44px; padding: 0 14px; font-size: var(--t-4); }
.capa-frente[aria-pressed="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.capa-frente:disabled { opacity: 0.4; cursor: default; }
.capas-pie { margin-bottom: 4px; }

.dialogo--hoja { padding: 28px 24px 24px; border-radius: 24px; background: var(--oro-ambiente) 50% 0 / 100% 240px no-repeat, var(--grafito); box-shadow: inset 0 0 0 1px rgba(238, 230, 216, 0.06); }
.dialogo--hoja .registro-resumen { margin-bottom: 4px; }
.registro-antes { margin-bottom: 22px; }
.registro-ayuda { margin-top: 8px; text-align: left; }
.registro-error { margin-top: 12px; padding: 10px 14px; border-radius: var(--radio-boton); background: var(--pizarra); color: var(--blanco); text-align: left; }
.dialogo--hoja .campo-texto { min-height: 72px; background: var(--negro); }

/* ── Respirar: la biblioteca (la misma forma que las filas de Explorar) ── */
.patron { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 20px; width: 100%; padding: 18px 0; border-radius: var(--radio-boton); text-align: left; }
.patron-icono { width: 56px; height: 56px; margin-top: 2px; }
.patron-textos { display: grid; gap: 4px; min-width: 0; }
.patron-nombre { font-size: var(--t-h4); line-height: var(--l-h4); font-weight: 500; transition: opacity var(--rapido); }
.patron:hover .patron-nombre { opacity: 0.75; }
.patron-resumen { color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); }
.patron-detalle { max-width: 560px; }
.patron-accion { align-self: center; }
.patron-accion .icono { width: 24px; height: 24px; color: var(--blanco); }

/* ── Capas a pantalla completa: ensamblaje y respiración ────── */
.ensamble,
.respiracion { position: fixed; inset: 0; z-index: 22; background: var(--negro); overflow: hidden; }
.ensamble { animation: aparecer 0.35s var(--curva) both; }
.respiracion { animation: subir 0.42s var(--curva) both; }
.ensamble[hidden],
.respiracion[hidden] { display: none; }
/* Luz (viñeta): la luz cálida se concentra alrededor de la figura y se apaga hacia los bordes. Es un velo muy tenue encima del lienzo y
   debajo de los controles: no cambia el color de nada y no recibe toques. */
.ensamble,
.respiracion { --vy: 44%; --vry: 52%; }
.ensamble::after,
.respiracion::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--oro-vineta); }
.ensamble-lienzo,
.respiracion-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.ensamble-controles { position: absolute; z-index: 1; inset: calc(16px + env(safe-area-inset-top, 0px)) 16px auto 16px; display: flex; justify-content: space-between; gap: 12px; }

.respiracion-ui {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  justify-items: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.respiracion-cabecera { position: relative; width: 100%; display: flex; justify-content: center; padding-top: 8px; }
.respiracion-cerrar { position: absolute; left: 0; top: 4px; }
.respiracion-titulo { display: grid; gap: 6px; justify-items: center; text-align: center; max-width: min(640px, calc(100% - 128px)); }
.respiracion-titulo .titulo-4 { font-size: var(--t-h4); }
.respiracion-centro { display: grid; gap: 4px; justify-items: center; padding-top: 14px; text-align: center; }
.resp-ciclo { color: var(--blanco); }
.resp-resto { color: var(--gris); }
.respiracion-ajustes { grid-row: 4; display: grid; justify-items: center; gap: 16px; width: min(100%, 360px); margin-bottom: 22px; }
.respiracion-ajustes .opciones-tiempo { width: 100%; }
/* El interruptor encendido es una selección más (blanco lleno, como las demás opciones); el morado queda para lo que suena. */
.respiracion-ajustes .pildora[aria-checked="true"].resp-sonido { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.respiracion-controles { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── Práctica ───────────────────────────────────────────────── */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
/* column-reverse empuja el contenido hacia abajo: con justify-content: flex-end queda arriba y los tres números comparten línea aunque una etiqueta ocupe dos renglones. */
.cifra { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 4px 12px; }
.cifra + .cifra { border-left: 1px solid var(--pizarra); }
.cifra-numero { margin: 0; font-size: var(--t-h1); line-height: var(--l-h1); letter-spacing: var(--tracking-titulo); }
.cifra-etiqueta { color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); }

.vacio { display: grid; justify-items: center; gap: 14px; padding-top: 8px; text-align: center; }
.vacio-figura { width: 132px; height: 132px; margin-bottom: 10px; color: var(--niebla); opacity: 0.55; }
.vacio-frase { max-width: 520px; }
/* La acción va justo después de la frase; lo que se verá en Práctica queda debajo, como detalle. */
.vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.vacio-detalle { display: grid; gap: 10px; width: 100%; max-width: 460px; margin-top: 30px; text-align: left; }
.vacio-etiqueta { padding-left: 4px; color: var(--niebla); }   /* alineada con los puntos de la lista */
.vacio-lista { display: grid; gap: 8px; margin: 0; }
.vacio-lista li { position: relative; padding-left: 22px; }
.vacio-lista li::before { content: ''; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border: 1.2px solid var(--gris); border-radius: 50%; }

.tarjeta-grafico { padding: 24px 24px 18px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07); }
.grafico { width: 100%; min-height: 120px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-linea { stroke: rgba(238, 230, 216, 0.1); stroke-width: 1; }
/* Las palabras y las fechas del gráfico usan el rótulo más chico (12 px en escritorio, 13 en celular): el SVG se dibuja a escala 1:1, así que miden eso. */
.grafico-eje { fill: var(--gris); font-family: var(--fuente); font-size: var(--t-6); }
.grafico-fecha { fill: var(--gris); font-family: var(--fuente); font-size: var(--t-6); }
.grafico-union { stroke: rgba(238, 230, 216, 0.5); stroke-width: 1.2; }
.grafico-antes { fill: var(--negro); stroke: rgba(238, 230, 216, 0.8); stroke-width: 1.4; }
.grafico-despues { fill: var(--blanco); }
.grafico-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; }
.leyenda-item { display: inline-flex; align-items: center; gap: 8px; }
.leyenda-antes,
.leyenda-despues { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.leyenda-antes { border: 1.4px solid rgba(238, 230, 216, 0.8); }
.leyenda-despues { background: var(--blanco); }
.leyenda-promedio { margin-left: auto; color: var(--gris); }

.ciclos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ciclos-resto { margin-top: 16px; color: var(--gris); }
.ciclos-resto .enlace-boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--niebla); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ciclos-resto .enlace-boton:hover { color: var(--blanco); }
.ciclo { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 22px; padding: 32px 24px 28px; border-radius: var(--radio-tarjeta); background: var(--degradado-tarjeta); box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.07); text-align: center; }
.ciclo-mandala { width: min(100%, 228px); }
.mandala { display: block; width: 100%; height: auto; overflow: visible; }
.mandala-aro { fill: none; stroke: rgba(238, 230, 216, 0.1); stroke-width: 1; }
.mandala-aro--interno { stroke: rgba(238, 230, 216, 0.06); }
.mandala-tallo { stroke: rgba(238, 230, 216, 0.07); stroke-width: 1; }
.mandala-tallo[data-estado="con-sesion"] { stroke: rgba(155, 124, 244, 0.6); }
.mandala-punto { fill: var(--negro); stroke: rgba(238, 230, 216, 0.2); stroke-width: 1.2; }
.mandala-punto[data-estado="sin-sesion"] { stroke: rgba(238, 230, 216, 0.45); }
.mandala-punto[data-estado="hoy"] { stroke: var(--blanco); stroke-width: 1.6; }
.mandala-punto[data-estado="con-sesion"] { fill: var(--morado); stroke: var(--morado); filter: drop-shadow(0 0 3px rgba(155, 124, 244, 0.85)); }
.mandala-numero { fill: var(--blanco); font-family: var(--fuente); font-size: 34px; }
.mandala-sub { fill: var(--niebla); font-family: var(--fuente); font-size: 13px; }
/* Los títulos de las dos tarjetas quedan en la misma línea (el mandala tiene siempre el mismo alto y los textos empiezan
   arriba) y los botones se alinean abajo, aunque una frase ocupe un renglón más. */
.ciclo-textos { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 8px; }
.ciclo-dias { color: var(--gris); }
.ciclo-frase { max-width: 360px; }
.ciclo-estado { color: var(--blanco); }
.ciclo-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 10px; }

.registro-lista { display: grid; border-top: 1px solid var(--pizarra); }
.registro-fila { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--pizarra); }
.registro-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.registro-nombre { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; }
.registro-nombre.voz { font-size: calc(var(--t-1) * var(--escala-voz)); line-height: 1.1; font-weight: 600; }   /* una sesión de un ritual */
.registro-fecha { color: var(--gris); }
.registro-cambio { display: flex; align-items: center; gap: 10px; color: var(--hueso); }
.registro-flecha { color: var(--gris); }
.registro-nota { max-width: 640px; padding-left: 14px; border-left: 2px solid var(--pizarra-claro); }
.registro-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }

/* ── Pantallas medianas y celular ───────────────────────────── */
@media (max-width: 899px) {
  .mezcla { grid-template-columns: 1fr; gap: 28px; }
  .mezcla-controles { display: contents; }
  .mezcla-cabeza { order: 1; }
  .mezcla-vivo { order: 3; position: static; }
  .mz-grupo { order: 4; }
  .mz-receta { order: 5; }
  .mezcla { display: flex; flex-direction: column; align-items: stretch; gap: 36px; }
  .ciclos { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .pantalla-cabeza { margin-bottom: 32px; }
  .bloque { margin-bottom: 64px; }
  /* El ritmo de la guía en celular: lo justo para que las opciones queden a la vista sobre el mini reproductor y la barra. */
  .pestanas { margin-bottom: 28px; }
  .guia-migas:empty { display: none; }   /* en el primer paso aún no hay nada que mostrar: no se guarda su renglón */
  .paso { padding-top: 12px; }
  .paso-frase { margin-bottom: 28px; }
  .palabras { margin-top: 28px; }
  /* Práctica vacía: la figura es más chica y las dos acciones comparten renglón. */
  .vacio-figura { width: 96px; height: 96px; margin-bottom: 4px; }
  .vacio-acciones .boton { flex: 1 1 150px; padding: 0 14px; }
  .vacio-detalle { margin-top: 24px; }
  .patron { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; }
  .patron-icono { width: 48px; height: 48px; }
  .escala { gap: 2px; }
  .escala::before { left: 10%; right: 10%; top: 24px; }
  .escala-punto { width: 48px; height: 48px; }
  .escala-palabra { font-size: var(--t-4); }
  .escala--hoja .escala-punto { width: 42px; height: 42px; }
  .escala--hoja::before { top: 21px; }
  .receta { padding: 24px 18px 20px; }
  .guia-fondo { top: -120px; width: 560px; height: 560px; margin-left: -280px; }
  .cifra { padding: 4px 6px; }
  .cifra-etiqueta { font-size: var(--t-4); line-height: var(--l-4); }
  .tarjeta-grafico { padding: 18px 14px 14px; }
  .leyenda-promedio { margin-left: 0; flex-basis: 100%; }
  .ciclo { padding: 28px 18px 24px; }
  .registro-pie { justify-content: flex-start; }
  .dialogo--ancho .espectro { padding: 12px 12px 8px; }
  .capa { grid-template-columns: 40px minmax(0, 1fr); }
  .capa-control { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; gap: 8px 14px; }
  .capa-nivel { grid-column: 1; align-self: center; }
  .capa-estado { grid-column: 1; grid-row: 2; }
  .capa-frente { grid-column: 2; grid-row: 1 / span 2; }
  .velo:has(.dialogo--hoja) { align-items: end; padding: 0; }
  .dialogo--hoja { width: 100%; max-height: 92dvh; padding: 24px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; }
}
/* En 320 a 359 px las cinco opciones de la escala (un círculo y una palabra cada una) ya no caben con la letra grande: las columnas miden lo
   que su palabra más ancha (o el círculo) y suman más que la pantalla. Los círculos bajan a 44 px y las palabras a 14 px (la barra de abajo
   hace lo mismo): así "Muy cargado" y "Cargado" siguen enteras y la última opción no toca el borde. */
@media (max-width: 359px) {
  .escala:not(.escala--hoja) .escala-punto { width: 44px; height: 44px; }
  .escala:not(.escala--hoja)::before { top: 22px; }
  .escala .escala-palabra, .escala.escala--hoja .escala-palabra { font-size: calc(var(--t-4) - 2px); }
}

/* Celular bajo (375×667, 360×640): el mini reproductor y la barra le quitan casi un tercio al alto. Se aprieta el ritmo
   de lo de arriba para que la acción principal de Crear (paso 1 y 2) y la de Práctica vacía sigan a la vista sobre ellos. */
@media (max-width: 767px) and (max-height: 760px) {
  .pantalla-cabeza { gap: 8px; margin: 8px 0 16px; }
  .pestanas { margin: 0 auto 12px; }
  .guia-cabeza { min-height: 36px; margin-bottom: 4px; }
  .guia-migas { min-height: 44px; margin-bottom: 4px; }
  .paso { padding-top: 4px; }
  .paso-titulo { margin-bottom: 8px; font-size: var(--t-h3); line-height: var(--l-h3); }
  .paso-frase { margin-bottom: 16px; }
  .guia-opciones { gap: 8px; }
  .guia-opcion { min-height: 44px; }   /* 44 px siguen siendo un blanco cómodo para el dedo */
  .palabras { margin-top: 14px; }
  .vacio { gap: 10px; padding-top: 0; }
  .vacio-figura { width: 48px; height: 48px; margin-bottom: 0; }
  .vacio .titulo-3 { font-size: var(--t-h4); line-height: var(--l-h4); }
  .vacio-detalle { margin-top: 16px; }
  /* Con la letra grande de celular las dos frases de la pantalla (la de arriba y la de Práctica vacía) bajan a --t-2 (18 px) para que, en un
     iPhone con la barra de Safari a la vista (375 × 667), los botones de Práctica vacía queden sobre el mini reproductor. */
  .pantalla-cabeza .texto-1, .vacio-frase { font-size: var(--t-2); line-height: var(--l-2); }
  .vacio-acciones { gap: 8px; margin-top: 2px; }
}
/* Todavía más bajo (320 × 640, 360 × 640): la figura de adorno de Práctica vacía cede su sitio a los botones, que quedan sobre el mini reproductor. */
@media (max-width: 767px) and (max-height: 660px) {
  .vacio-figura { display: none; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .mezcla-vivo { position: static; }
}

/* Tu mezcla en celular (hasta 600 px): el espectro compacto se queda fijo bajo la cabecera, así se ve mientras se cambian
   las capas. Es otro lienzo de lo mismo: el de la tarjeta se oculta para no repetirlo. */
@media (max-width: 600px) {
  .mz-fijo {
    display: block;
    order: 2;
    position: sticky;
    top: calc(var(--cabecera) + env(safe-area-inset-top, 0px));
    z-index: 5;
    margin: -12px calc(var(--margen) * -1) -20px;
    padding: 6px var(--margen) 8px;
    background: var(--negro);
    /* La línea de abajo y, hacia arriba, una franja negra bajo el degradado de la cabecera: así lo que pasa por
       debajo (el botón "Guardar mi mezcla", por ejemplo) no se asoma a medias entre la cabecera y el espectro. */
    box-shadow: 0 1px 0 var(--pizarra), 0 -24px 0 var(--negro);
  }
  .mz-fijo .espectro-lienzo { height: 80px; }
  .mezcla-vivo .espectro-lienzo { display: none; }
  /* Al enfocar una opción, el navegador la acerca a la vista sin dejarla bajo el espectro fijo. */
  .panel-mezcla button,
  .panel-mezcla input { scroll-margin-top: calc(var(--cabecera) + 124px); }
}

/* ── Práctica: lo que llega se dibuja ──────────────────────────────
   app-practica.js arma la entrada al mostrar la pantalla (practica--arma) y su vigía le pone "entra" a cada pieza (las cifras, el
   gráfico y cada ciclo) cuando llega a la vista; lo que está más abajo se dibuja al bajar hasta allá. Antes de entrar, los trazos y los
   textos esperan quietos. Al entrar, el mandala se traza del centro hacia afuera (el aro de adentro, los tallos, los puntos y el aro de
   afuera: una vuelta de un segundo), la línea de cada par del gráfico crece de "al llegar" a "al irte" y las cifras y los rótulos se
   enfocan. Es lo único que anima stroke-dashoffset: son dibujos chicos que solo pintan y no mueven nada de la página. */
.practica--arma [data-entra]:not(.entra) :is(.cifra-numero, .cifra-etiqueta, .mandala-numero, .mandala-sub, .mandala-punto) { opacity: 0; }
.practica--arma [data-entra]:not(.entra) :is(.mandala-aro, .mandala-tallo) { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); }
.practica--arma [data-entra]:not(.entra) [data-grafico]:not([data-quieto]) :is(.grafico-par, .grafico-eje, .grafico-fecha) { opacity: 0; }

.practica--arma .entra .cifra-numero { animation: mov-enfoca 700ms var(--curva) calc(var(--j, 0) * 90ms) both; }
.practica--arma .entra .cifra-etiqueta { animation: mov-enfoca 700ms var(--curva) calc(var(--j, 0) * 90ms + 70ms) both; }

.practica--arma .entra .mandala-aro,
.practica--arma .entra .mandala-tallo { stroke-dasharray: var(--l); animation: practica-traza 360ms var(--curva) both; }
.practica--arma .entra .mandala-aro--interno { animation-duration: 560ms; animation-delay: 80ms; }
.practica--arma .entra .mandala-aro:not(.mandala-aro--interno) { animation-duration: 650ms; animation-delay: 250ms; }
.practica--arma .entra .mandala-tallo { animation-delay: calc(200ms + var(--i, 0) * var(--p, 14ms)); }
.practica--arma .entra .mandala-punto { transform-box: fill-box; transform-origin: center; animation: practica-punto 380ms var(--curva) calc(320ms + var(--i, 0) * var(--p, 14ms)) both; }
.practica--arma .entra .mandala-numero { animation: mov-enfoca 600ms var(--curva) both; }
.practica--arma .entra .mandala-sub { animation: mov-enfoca 600ms var(--curva) 90ms both; }

/* El gráfico: cada par entra con 40 ms de diferencia. Si solo se volvió a medir (data-quieto), queda como estaba. */
.practica--arma .entra [data-grafico]:not([data-quieto]) .grafico-union { transform-box: fill-box; animation: practica-crece 520ms var(--curva) calc(var(--i, 0) * 40ms) both; }
.practica--arma .entra [data-grafico]:not([data-quieto]) :is(.grafico-antes, .grafico-despues) { transform-box: fill-box; transform-origin: center; animation: practica-punto 380ms var(--curva) calc(var(--i, 0) * 40ms) both; }
.practica--arma .entra [data-grafico]:not([data-quieto]) .grafico-despues { animation-delay: calc(var(--i, 0) * 40ms + 260ms); }
.practica--arma .entra [data-grafico]:not([data-quieto]) :is(.grafico-eje, .grafico-fecha) { animation: mov-enfoca 600ms var(--curva) both; }

@keyframes practica-traza { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }
@keyframes practica-punto { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes practica-crece { from { opacity: 0; transform: scaleY(0.05); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .guia-fondo { animation: none; }
  .paso--entra .paso-titulo,
  .paso--entra .paso-frase,
  .paso--entra .guia-opcion,
  .paso--entra .escala-opcion,
  .paso--entra .guia-tiempos .pildora { animation: none; }
}

/* ── Lo que notaste al terminar: la hoja del cierre y Práctica ───────────────────────────────
   La hoja "¿Y ahora cómo te sientes?" ofrece cuatro respuestas de una sola elección (app-registro.js): tres opciones en columna, del
   mismo ancho, y debajo, discreta, "No me sentó bien", un botón de texto de 44 px de alto. Lo elegido es blanco lleno (como las demás
   selecciones; la discreta se rodea de un contorno blanco) y el morado queda para el foco del teclado. Las opciones pueden partirse en
   dos renglones en una pantalla angosta.
   En Práctica cada respuesta es una marca chica en un carril "Al terminar" bajo los niveles del gráfico (app-practica.js): una forma
   distinta para cada una, del color de la arena, y ninguna a la altura de un nivel: lo que la persona notó no es un punto de la escala. */
.cambio { display: grid; gap: 10px; margin-bottom: 20px; }
.cambio-opcion { width: 100%; min-height: 52px; justify-content: center; padding-block: 10px; font-size: var(--t-2); line-height: 1.2; text-align: center; white-space: normal; }
.cambio-opcion[aria-checked="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.cambio-opcion[aria-checked="true"]:hover { background: var(--hueso); border-color: var(--hueso); }
.cambio-no {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  min-height: 44px;
  padding: 0 18px;
  border: var(--borde) solid transparent;
  border-radius: var(--radio-pildora);
  color: var(--niebla);
  font-size: var(--t-3);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.3);
  text-underline-offset: 4px;
  transition: color var(--rapido), border-color var(--rapido), text-decoration-color var(--rapido);
}
.cambio-no:hover { color: var(--blanco); text-decoration-color: var(--blanco); }
.cambio-no[aria-checked="true"] { color: var(--blanco); border-color: var(--blanco); text-decoration-color: transparent; }

.grafico-marca,
.leyenda-marca { fill: none; stroke: rgba(238, 230, 216, 0.8); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.leyenda-marca { flex: none; width: 16px; height: 16px; overflow: visible; }
.grafico-toque { fill: transparent; }
/* Entra con su columna, un instante después del punto de "al empezar" (como el punto de "al terminar" de las sesiones con escala). */
.practica--arma .entra [data-grafico]:not([data-quieto]) .grafico-marca { transform-box: fill-box; transform-origin: center; animation: practica-punto 380ms var(--curva) calc(var(--i, 0) * 40ms + 260ms) both; }