/* Campo Vivo · propuesta "línea": la app (explorar, mini reproductor, reproductor y diálogos). */

/* --nav-total: lo que ocupa la barra inferior de navegación (solo en celular); el mini reproductor y los avisos van encima. */
.app { --ancho-app: 960px; --nav-total: 0px; }

/* ── Cabecera y navegación principal ───────────────────────── */
/* El degradado de la cabecera es opaco hasta pasar los enlaces: lo que se desplaza por debajo no se cruza con ellos. */
.app-cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-inline: 24px;
  /* Luz (ambiente): un charco cálido muy tenue arriba, como si la cabecera fuera la lámpara que alumbra la pantalla. */
  background:
    radial-gradient(ellipse 58% 130% at 50% 0%, rgba(var(--oro-rgb), 0.13) 0%, rgba(var(--oro-rgb), 0.045) 55%, rgba(var(--oro-rgb), 0) 100%),
    linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, 0) 100%);
}
.app-cabecera .marca { grid-column: 1; justify-self: start; }
.app-portada { grid-column: 3; justify-self: end; }

.nav-app { grid-column: 2; display: flex; align-items: center; gap: 32px; font-size: var(--t-2); line-height: var(--l-2); }
.nav-enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-radius: 8px;
  color: var(--niebla);
  transition: color var(--rapido);
}
.nav-enlace:hover,
.nav-enlace[aria-current="page"] { color: var(--blanco); }
.nav-enlace[aria-current="page"]::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1.5px; background: var(--blanco); }
.nav-enlace .icono { display: none; }

/* ── Pantallas (Explorar, Crear, Respirar y Práctica) ───────── */
.pantalla {
  width: 100%;
  max-width: calc(var(--ancho-app) + 2 * var(--margen));
  margin-inline: auto;
  padding: calc(var(--cabecera) + 16px) var(--margen) calc(200px + var(--nav-total));
  background: var(--oro-ambiente) 50% 0 / 100% 560px no-repeat;   /* luz: el charco de arriba de cada pantalla */
  animation: pantalla-entra 0.42s var(--curva) both;
}
@keyframes pantalla-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Explorar ─────────────────────────────────────────────── */
/* Explorar usa todo el contenedor (1280 px con sus márgenes): las tarjetas necesitan el aire. */
.pantalla.explorar { max-width: var(--ancho); }

.destacados { margin-bottom: 56px; }
.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 24px;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline-offset: 4px; }

/* Láminas destacadas. En celular, la figura arriba en su propio bloque y el texto debajo: nunca se tocan. En pantallas
   anchas (más abajo), el texto a la izquierda sobre un degradado y la figura confinada al resto. Sin morado en reposo:
   el velo de fondo es una luz cálida muy tenue, como de una lámpara arriba a la derecha. */
.destacado {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 184px auto;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(var(--oro-rgb), 0.17) 0%, rgba(var(--oro-rgb), 0) 58%),
    radial-gradient(90% 80% at 0% 100%, rgba(var(--oro-rgb), 0.05) 0%, rgba(var(--oro-rgb), 0) 60%),
    #0d0b09;
}
.destacado-lienzo { width: 100%; height: 100%; }
/* El filo de la tarjeta va encima de todo (también del degradado del texto): así su borde no desaparece. */
.destacado::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 230, 216, 0.09); pointer-events: none; }
.destacado-texto {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: 6px 20px 22px;
}
.destacado-texto .texto-2 { max-width: 460px; }
.destacado-texto .boton { margin-top: 6px; }

/* El control del carrusel, a la derecha bajo la tarjeta: Anterior, "n de 3" y Siguiente. Las flechas miden 44 px (su área táctil) y la que no
   lleva a ningún sitio (en el primer y el último destacado) se atenúa con aria-disabled, que no le quita el foco a quien la estaba usando. */
.carrusel-control { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 8px; }
.carrusel-flecha {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--blanco);
  box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.3);
  transition: opacity var(--rapido), transform var(--mov-toque) var(--curva);
}
/* El cursor encima no cambia colores: enciende, con la opacidad, una capa de arena tenue y el borde en blanco (solo con puntero que pasa
   por encima: en el tacto el hover se quedaría pegado tras el toque). */
.carrusel-flecha::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(var(--oro-rgb), 0.1); box-shadow: inset 0 0 0 1px var(--blanco); opacity: 0; transition: opacity var(--rapido); }
@media (hover: hover) {
  .carrusel-flecha:hover::before { opacity: 1; }
}
.carrusel-flecha .icono { position: relative; }
.carrusel-flecha:active { transform: scale(0.94); }
.carrusel-flecha--siguiente .icono { transform: rotate(180deg); }
.carrusel-flecha[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .carrusel-flecha[aria-disabled="true"]:hover::before { opacity: 0; }
}
.carrusel-flecha[aria-disabled="true"]:active { transform: none; }
.carrusel-cuenta { min-width: 64px; color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); font-variant-numeric: tabular-nums; text-align: center; }

.seccion { margin-bottom: 64px; }
.seccion .titulo-3,
.grupo .titulo-3 { margin-bottom: 6px; }
/* El destacado de arriba de Explorar es la tarjeta principal: su título conserva el tamaño grande (con el peso de un subtítulo). */
.destacado .titulo-3 { font-size: var(--t-h3); line-height: var(--l-h3); }
.destacado .titulo-3.voz { font-size: calc(var(--t-h3) * var(--escala-voz)); line-height: 1.1; font-weight: 600; }
.seccion-frase { margin-bottom: 24px; }

.lista { margin-top: 16px; }   /* la biblioteca de Respirar */

/* ── El catálogo: una rejilla de tarjetas por grupo (también los nueve rituales) ─────────── */
.grupo { margin-bottom: 56px; background: var(--oro-charco) 50% 0 / 100% min(100%, 440px) no-repeat; }   /* luz: el charco de cada grupo */
.grupo-frase { margin-bottom: 24px; }
.rejilla-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Celular: dos columnas. Con un número impar de tarjetas, la última ocupa las dos y su figura se ensancha: nunca queda sola. */
.rejilla-modos > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rejilla-modos > li:last-child:nth-child(odd) .tarjeta-modo-figura { aspect-ratio: 2 / 1; }
.tarjeta-modo-caja { position: relative; display: flex; min-width: 0; border-radius: var(--radio-tarjeta); transition: box-shadow var(--rapido); }
/* Reflejo: con el cursor encima, la luz sube de la tarjeta (en la caja, no en la tarjeta: así el aro morado de lo que suena no se pisa). */
@media (hover: hover) {
  .tarjeta-modo-caja:hover { box-shadow: var(--oro-halo); }
}

.tarjeta-modo {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  text-align: left;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--degradado-tarjeta);
  transition: box-shadow var(--rapido), transform 0.25s var(--curva);
}
/* El filo de la tarjeta va encima de la figura (si no, el fondo de la figura lo tapa). */
.tarjeta-modo::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.08); pointer-events: none; transition: box-shadow var(--rapido); }
.tarjeta-modo:hover::after { box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.26); }
.tarjeta-modo:active { transform: scale(0.992); }
/* Lo que suena ahora: el aro morado (solo mientras suena). */
.tarjeta-modo[aria-current="true"] { box-shadow: 0 0 22px rgba(155, 124, 244, 0.28); }
.tarjeta-modo[aria-current="true"]::after { box-shadow: inset 0 0 0 1.5px var(--morado); }

.tarjeta-modo-figura {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(var(--oro-rgb), 0.15) 0%, rgba(var(--oro-rgb), 0) 70%),
    radial-gradient(90% 90% at 50% 0%, #14120f 0%, #060504 100%);
  box-shadow: 0 1px 0 rgba(238, 230, 216, 0.05);
}
.tarjeta-modo-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.tarjeta-modo-estado { position: absolute; left: 10px; top: 10px; display: none; }
.tarjeta-modo-estado:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--radio-pildora);
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(155, 124, 244, 0.5);
  color: var(--blanco);
  font-size: var(--t-5);
  line-height: 1;
}

.tarjeta-modo-pie { display: flex; flex: 1; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 12px 14px 14px; }
.tarjeta-modo-textos { display: grid; align-content: start; gap: 4px; min-width: 0; }
.tarjeta-modo-nombre { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; overflow-wrap: anywhere; }   /* título de tarjeta */
.tarjeta-modo-nombre.voz { font-size: calc(var(--t-1) * var(--escala-voz)); line-height: 1.1; font-weight: 600; }   /* un ritual: la voz de la tradición */
.tarjeta-modo-dato { color: var(--niebla); font-size: var(--t-5); line-height: var(--l-5); }
.tarjeta-modo-reproducir {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pizarra);
  color: var(--blanco);
  transition: background-color var(--rapido), color var(--rapido);
}
.tarjeta-modo:hover .tarjeta-modo-reproducir { background: var(--blanco); color: var(--negro); }

/* El botón para quitar una mezcla guardada: encima de su figura, con un área táctil de 44 px. */
.tarjeta-modo-quitar { position: absolute; top: 6px; right: 6px; z-index: 1; width: 44px; height: 44px; background: rgba(0, 0, 0, 0.55); color: var(--niebla); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tarjeta-modo-quitar:hover { background: var(--pizarra); color: var(--blanco); }
.tarjeta-modo-quitar .icono { width: 20px; height: 20px; }

/* El chip de un ritual: su duración y sus fases, a 12 px. */
.tarjeta-modo-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 24px;
  margin-top: 2px;
  padding: 0 10px;
  border-radius: var(--radio-pildora);
  background: var(--pizarra);
  box-shadow: var(--oro-filo);
  color: var(--niebla);
  font-size: var(--t-5);
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  /* Tablet: de a tres cuando el grupo se reparte en tres (--nt, lo calcula app.js) y, si no, de a dos. */
  .rejilla-modos { grid-template-columns: repeat(var(--nt, 2), minmax(0, 1fr)); gap: 16px; }
  .rejilla-modos > li:last-child:nth-child(odd) { grid-column: auto; }
  .rejilla-modos > li:last-child:nth-child(odd) .tarjeta-modo-figura { aspect-ratio: 16 / 10; }
  .rejilla-modos--libre { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .tarjeta-modo-dato { font-size: var(--t-4); line-height: var(--l-4); }
}
@media (min-width: 1024px) {
  /* Escritorio: tantas columnas como tarjetas lleve el grupo (--n, hasta cuatro): ninguna fila queda a medias ni con huecos. */
  .rejilla-modos { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .rejilla-modos--libre { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
}
@media (min-width: 1180px) {
  .rejilla-modos { gap: 24px; }
}
/* El círculo de reproducir solo adorna la tarjeta (toda ella es el botón): por debajo de 1180 px, donde las tarjetas
   son más angostas, le quitaría ancho al nombre y a lo que suena. */
@media (max-width: 1179px) {
  .tarjeta-modo-reproducir { display: none; }
}

/* Indicador "sonando": tres barras moradas. */
.sonando-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sonando-barras i { width: 3px; height: 100%; border-radius: 2px; background: var(--morado); animation: barra 1.1s ease-in-out infinite; }
.sonando-barras i:nth-child(2) { animation-delay: -0.35s; }
.sonando-barras i:nth-child(3) { animation-delay: -0.7s; }
@keyframes barra { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.sonando-barras i { transform-origin: bottom; }

.explorar-pie { display: grid; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(var(--oro-canto-rgb), 0.16); }
.explorar-pie .texto-4 { display: flex; align-items: center; gap: 10px; }
.explorar-pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.enlace-pie { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-2); color: var(--blanco); text-decoration: underline; text-decoration-color: rgba(238, 230, 216, 0.3); text-underline-offset: 4px; }   /* 44 px de alto: el área para el dedo */
.enlace-pie:hover { text-decoration-color: var(--blanco); }

/* ── Mini reproductor ─────────────────────────────────────── */
/* Una barra anclada abajo (en celular, encima de la navegación), del ancho de la columna de contenido: la de Explorar (el contenedor sin sus
   márgenes) o la de 960 px de las demás pantallas (html[data-pantalla] lo pone app.js). Esquinas pequeñas, fondo grafito, la miniatura
   cuadrada, el nombre del modo arriba y su estado debajo, y un botón cuadrado. Arriba lleva una línea de 1 px: de arena tenue en reposo y
   morada solo mientras suena. */
.mini {
  position: fixed;
  inset: auto 0 var(--nav-total) 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding: 40px var(--margen) calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 55%, #000 100%);
  pointer-events: none;
  animation: subir 0.4s var(--curva) both;
}
.mini[hidden] { display: none; }
/* Sin mini (la primera visita, antes de que algo suene, o la caja "en tus palabras" de la guía abierta, que él tapaba)
   tampoco se reserva su espacio: app.js pone html[data-sin-mini]. */
html[data-sin-mini] .mini { display: none; }
html[data-sin-mini] .pantalla { padding-bottom: calc(72px + var(--nav-total)); }
html[data-sin-mini] .app .nota-flotante { bottom: calc(24px + var(--nav-total)); }
.mini-caja {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: calc(var(--ancho) - 2 * var(--margen));
  padding: 8px;
  border-radius: 8px;
  /* Luz: un charco cálido adentro y un resplandor que sube de su canto (el mini es lo más cercano a la luz de abajo). */
  background: var(--oro-ambiente) 50% 0 / 100% 110px no-repeat, var(--grafito);
  box-shadow: 0 -14px 30px -18px rgba(var(--oro-rgb), 0.24);
}
html[data-pantalla="crear"] .mini-caja,
html[data-pantalla="respirar"] .mini-caja,
html[data-pantalla="practica"] .mini-caja { max-width: var(--ancho-app); }
/* La línea de arriba va por dentro de la parte recta del borde (sin las esquinas). La morada espera con opacidad 0 y aparece al sonar. */
.mini-caja::before,
.mini-caja::after { content: ''; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; pointer-events: none; }
.mini-caja::before { background: linear-gradient(90deg, rgba(var(--oro-canto-rgb), 0) 0%, rgba(var(--oro-canto-rgb), 0.5) 50%, rgba(var(--oro-canto-rgb), 0) 100%); }   /* luz: el canto de arriba */
.mini-caja::after { background: var(--morado); opacity: 0; transition: opacity var(--mov-corto) var(--curva); }
.mini[data-vivo="true"] .mini-caja::after { opacity: 1; }
.mini-abrir { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; text-align: left; border-radius: 6px; }
.mini-icono { width: 48px; height: 48px; }
.mini-textos { display: grid; align-content: center; min-width: 0; }
.mini-nombre { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-nombre.voz { font-size: calc(var(--t-1) * var(--escala-voz)); font-weight: 600; }
.mini-estado { font-size: var(--t-4); line-height: var(--l-4); color: var(--gris); }
.mini[data-vivo="true"] .mini-estado { color: var(--morado); }
/* Escuchar o pausar: un botón cuadrado de esquinas pequeñas, no un círculo. */
.mini-alternar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--pizarra);
  box-shadow: var(--oro-filo);
  color: var(--blanco);
  transition: transform var(--mov-toque) var(--curva);
}
.mini-alternar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--pizarra-claro); opacity: 0; transition: opacity var(--rapido); }
@media (hover: hover) {
  .mini-alternar:hover::before { opacity: 1; }
}
.mini-alternar .icono { position: relative; }
.mini-alternar:active { transform: scale(0.94); }

/* ── Reproductor a pantalla completa: la ficha y la placa ─────
   Dos disposiciones (app.js las repite en areaReproductor y en ladoALado: si una condición cambia, cambia en los dos sitios).
   Apilada (celular y tableta en vertical): la barra arriba, la figura en el espacio libre y la ficha anclada abajo.
   Lado a lado (640 px o más y al menos 5 a 4 de ancha: escritorio y celular horizontal): la ficha a la izquierda, centrada en
   vertical, y la figura en el resto, como el héroe de la portada. */
.reproductor {
  --horizonte: 34px;   /* el alto del horizonte: app.js lo lee del propio lienzo para reservarle su franja a la figura */
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--negro);
  overflow: hidden;
  animation: subir 0.42s var(--curva) both;
}
.reproductor[hidden] { display: none; }
.reproductor-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* Luz (viñeta): la luz cálida se concentra alrededor de la figura y se apaga hacia los bordes. Va como un velo muy tenue encima del lienzo
   y debajo de los controles: no cambia el color de la figura (ni el morado de lo que suena) y no recibe toques. Apilada, la figura queda
   cerca del 36 % de la altura; lado a lado, a la derecha (más abajo). */
.reproductor { --vx: 50%; --vy: 36%; --vrx: 80%; --vry: 56%; }
.reproductor::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--oro-vineta); }

.reproductor-ui {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Abajo, la franja del horizonte (más un respiro): la ficha, anclada abajo, queda encima de ella. Lado a lado la ficha va centrada y
     no la toca: ahí el relleno de abajo vuelve a ser el de siempre. */
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(var(--horizonte) + 10px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  transition: opacity 0.45s var(--curva);
}

/* La barra: Volver a la izquierda y Pantalla limpia a la derecha, siempre con su texto. El margen negativo pone el ícono sobre
   el borde de la ficha (el botón de texto lleva 12 px de relleno). */
.reproductor-barra { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-inline: -12px; }
.boton-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radio-boton);
  color: var(--blanco);
  font-size: var(--t-3);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--rapido);
}
.boton-texto:hover { background: rgba(238, 230, 216, 0.08); }
/* "Ver por dentro" junto a "Pantalla limpia": las dos acciones de la derecha. El contorno lo distingue de un simple texto. */
.reproductor-barra-grupo { display: inline-flex; align-items: center; gap: 8px; }
.boton-texto--contorno { box-shadow: var(--oro-filo), inset 0 0 0 1px rgba(238, 230, 216, 0.3); }
.boton-texto--contorno:hover { box-shadow: var(--oro-filo), inset 0 0 0 1px var(--blanco); }

/* La ficha: lo que suena y sus mandos, alineados a la izquierda. Apilada, anclada abajo; el espacio que queda entre la barra y
   ella es el de la figura (la placa 3D y la figura 2D lo miden). Si no cabe (una ventana muy baja, texto muy grande, mucho zoom)
   se desplaza por dentro en vez de cortarse; su relleno de --aro deja sitio al aro de foco para que el desplazamiento no lo
   recorte, y el margen negativo lo compensa para que todo quede alineado con la barra. */
.ficha {
  --aro: 6px;
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  width: calc(100% + 2 * var(--aro));
  max-width: calc(600px + 2 * var(--aro));
  margin: auto calc(-1 * var(--aro)) 0;
  padding: var(--aro);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  text-align: left;
}
.ficha::-webkit-scrollbar { display: none; }
.ficha-cabeza { display: grid; gap: 4px; }
.ficha-necesidad { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); letter-spacing: 0.02em; }
/* El nombre de lo que suena es el título de la pantalla del reproductor (600). Su tamaño va en --tam-nombre, que cambia con el ancho:
   así el de un ritual (.voz, la voz de la tradición) crece en la misma proporción en todos los tamaños. */
.ficha-nombre { --tam-nombre: var(--t-h3); --alto-nombre: var(--l-h3); font-size: var(--tam-nombre); line-height: var(--alto-nombre); font-weight: 600; letter-spacing: var(--tracking-display); text-wrap: balance; overflow-wrap: anywhere; }
.ficha-nombre.voz { font-size: calc(var(--tam-nombre) * var(--escala-voz)); line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.ficha-detalle { text-wrap: balance; }
.reproductor-extra { margin-top: 2px; }
/* La línea técnica: dice qué pasa, no cómo. El punto es gris en reposo y morado solo mientras suena. */
.ficha-tecnica { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); letter-spacing: 0.01em; }
.ficha-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gris); transition: background-color 0.4s var(--curva); }
.reproductor[data-vivo="true"] .ficha-punto { background: var(--morado); }

/* La regla de frecuencias: la firma visual de Campo Vivo. Las nueve frecuencias Solfeggio son marcas cortas sobre una línea
   fina (app.js pone --x, su posición en escala logarítmica); las que suenan ahora llevan una marca alta, un punto y su número,
   en blanco y, solo mientras suena, en morado con un pulso suave. Un número que chocaría con el anterior sube a una segunda fila
   sobre una marca más larga (data-fila="2"). */
/* La segunda fila de números sube lo que mide un número más 2 px (--tallo-2): así las dos filas nunca se tocan, tampoco por un redondeo. */
.regla { --tallo: 22px; --tallo-2: calc(var(--tallo) + var(--numero) + 2px); --paso: 7px; --numero: var(--t-4); display: grid; gap: 6px; }
.regla-escala { position: relative; height: calc(var(--tallo-2) + var(--paso) + var(--numero) + 2px); }
.regla-linea { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(238, 230, 216, 0.4); }
/* La regla viva (app-dentro.js): mientras suena, cada marca lleva en --e, de 0 a 1, la energía medida en su frecuencia. Sin --e (en
   reposo) quedan las alturas de siempre: 9 px la marca corta y el tallo entero la de un tono. Las marcas cortas crecen hasta la
   altura de un tallo; las de un tono bajan hasta un tercio del suyo: el número no se mueve, solo la marca. */
.regla-marca { position: absolute; left: var(--x); bottom: 0; width: 1px; height: calc(9px + (var(--tallo) - 9px) * var(--e, 0)); background: rgba(238, 230, 216, 0.4); }
.regla-activa { --alto: var(--tallo); position: absolute; left: var(--x); bottom: 0; width: 0; height: var(--alto); color: var(--blanco); }
.regla-activa[data-fila="2"] { --alto: var(--tallo-2); }
.regla-activa::before { content: ''; position: absolute; left: -0.75px; bottom: 0; width: 1.5px; height: calc(var(--alto) * (0.3 + 0.7 * var(--e, 1))); background: currentColor; }
.regla-punto { position: absolute; left: -3.5px; bottom: calc(var(--alto) * (0.3 + 0.7 * var(--e, 1)) - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.regla-numero {
  position: absolute;
  bottom: calc(100% + var(--paso));
  left: 0;
  transform: translateX(-50%);
  font-size: var(--numero);
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.regla-activa[data-alinea="fin"] .regla-numero { transform: translateX(calc(-100% + 3px)); }   /* el número termina en su marca */
.regla-activa[data-fila="0"] .regla-numero { display: none; }
.regla-extremos { display: flex; justify-content: space-between; color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }
.reproductor[data-vivo="true"] .regla-activa { color: var(--morado); }
.reproductor[data-vivo="true"] .regla-activa::before,
.reproductor[data-vivo="true"] .regla-punto { animation: regla-pulso 2.6s ease-in-out infinite; }
.reproductor[data-vivo="true"] .regla-punto { box-shadow: 0 0 8px rgba(155, 124, 244, 0.7); }
.reproductor[data-vivo="true"] .regla-activa:nth-of-type(even)::before,
.reproductor[data-vivo="true"] .regla-activa:nth-of-type(even) .regla-punto { animation-delay: -1.3s; }
/* En un viaje, lo que todavía no suena (o ya salió) queda en gris y quieto: el morado es solo para lo que suena. */
.reproductor[data-vivo="true"] .regla-activa[data-suena="false"] { color: var(--gris); }
.reproductor[data-vivo="true"] .regla-activa[data-suena="false"]::before,
.reproductor[data-vivo="true"] .regla-activa[data-suena="false"] .regla-punto { animation: none; box-shadow: none; }
@keyframes regla-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Las fases de un ritual: llegada, centro y cierre a la izquierda, lo que falta a la derecha y la barra debajo. */
.fases { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lista resto" "pista pista"; align-items: baseline; gap: 6px 12px; }
.fases-lista { grid-area: lista; display: flex; gap: 16px; font-size: var(--t-4); line-height: var(--l-4); color: var(--gris); }
.fases-lista li[aria-current="step"] { color: var(--blanco); }
.fases > .texto-4 { grid-area: resto; text-align: right; white-space: nowrap; }
.fases-pista { grid-area: pista; height: 2px; background: var(--pizarra); border-radius: 2px; overflow: hidden; }
.fases-avance { display: block; height: 100%; width: 0; background: rgba(238, 230, 216, 0.7); transition: width 1s linear; }
.reproductor[data-vivo="true"] .fases-avance { background: var(--morado); }   /* el avance es morado solo mientras suena */
/* En celular los rótulos de las fases son de 13 px (son una guía, no un texto de corrido): así "Llegada, Centro y Cierre" y lo que falta
   caben en una sola fila desde 340 px; por debajo, lo que falta pasa a su propia fila. */
@media (max-width: 767px) {
  .fases-lista { gap: 14px; }
  .fases-lista, .fases > .texto-4 { font-size: var(--t-5); line-height: var(--l-5); }
}
@media (max-width: 339px) {
  .fases { grid-template-areas: "lista lista" "pista pista" "resto resto"; }
  .fases > .texto-4 { text-align: left; }
}

/* El tiempo de un modo: el mismo lenguaje que las fases de un ritual (lo que queda encima y la pista fina debajo), en el mismo lugar de la ficha.
   "Pausado" va a la derecha, como lo que falta en las fases. Sin límite no hay pista, pero su sitio se queda: así la ficha no cambia de alto
   (ni la figura se vuelve a encuadrar) al pasar de un tiempo a "Sin límite". Los rótulos miden lo mismo que los de las fases en cada tamaño. */
.tiempo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "resto estado" "pista pista"; align-items: baseline; gap: 6px 12px; }
.tiempo-resto { grid-area: resto; }
.tiempo-estado { grid-area: estado; text-align: right; white-space: nowrap; }
.tiempo-pista { grid-area: pista; height: 2px; background: var(--pizarra); border-radius: 2px; overflow: hidden; }
.tiempo[data-pista="no"] .tiempo-pista { visibility: hidden; }
.tiempo-avance { display: block; height: 100%; width: 0; background: rgba(238, 230, 216, 0.7); transition: width 1s linear; }
.reproductor[data-vivo="true"] .tiempo-avance { background: var(--morado); }   /* el avance es morado solo mientras suena */
@media (max-width: 767px) {
  .tiempo-resto, .tiempo-estado { font-size: var(--t-5); line-height: var(--l-5); }
}

/* Escuchar / Pausar: el botón ancho de la ficha. Blanco lleno para escuchar (la acción principal); mientras suena, de contorno y
   con el aro morado que ya trae .boton--vivo (su borde se vuelve transparente para que no haya dos aros). */
.ficha-escuchar { gap: 10px; }
.ficha-escuchar:not(.boton--principal) { background: transparent; border-color: rgba(238, 230, 216, 0.55); }
.ficha-escuchar:not(.boton--principal):hover { background: rgba(238, 230, 216, 0.08); }
.ficha-escuchar.boton--vivo { border-color: transparent; }

/* Tiempo, Mezcla y Capas: botones compactos de contorno con su ícono y su texto. */
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-accion { min-height: 44px; padding: 0 14px; gap: 8px; background: transparent; border-color: rgba(238, 230, 216, 0.45); }
.ficha-accion:hover { background: rgba(238, 230, 216, 0.08); border-color: var(--blanco); }

/* El volumen, dentro de la ficha: solo con puntero fino (en un teléfono o una tableta se usan los botones del aparato). */
.volumen { display: none; align-items: center; gap: 8px; }
.volumen-boton { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; }
.volumen-barra {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: auto;
  max-width: 260px;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.volumen-barra::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blanco) var(--lleno, 55%), rgba(238, 230, 216, 0.25) var(--lleno, 55%)); }
.volumen-barra::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(238, 230, 216, 0.25); }
.volumen-barra::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--blanco); }
.volumen-barra::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%; background: var(--blanco); }
.volumen-barra::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--blanco); }
@media (pointer: fine) and (min-height: 620px) {
  .volumen { display: flex; }
}
/* Apilada y baja con puntero fino (una ventana de escritorio angosta y de menos de 700 px de alto): el volumen cede su sitio a la figura, como
   la línea técnica (el sonido se baja con el volumen del sistema). El hueco de la figura sobre la ficha no puede bajar del 30 % de la pantalla. */
@media (pointer: fine) and (max-width: 767px) and (max-height: 699px) {
  .volumen { display: none; }
}
/* Y en una ventana de escritorio del ancho de un celular (menos de 480 px) hasta los 899 px de alto: la ficha lleva además el bloque de tiempo
   y la figura no puede quedarse con menos del 30 % de la pantalla. En un celular de verdad (puntero grueso) el volumen nunca estuvo. */
@media (pointer: fine) and (max-width: 479px) and (max-height: 899px) {
  .volumen { display: none; }
}

/* Otras opciones del mismo grupo, con su nombre, y "Ver todos". La elegida lleva el borde blanco y, mientras suena, el aro morado. */
.ficha-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hermanos { display: flex; flex-wrap: wrap; gap: 8px; }
.hermano, .ficha-ver-todos { min-height: 44px; padding: 0 14px; font-size: var(--t-4); line-height: 1; }
/* Con puntero fino (un ratón) las acciones y las opciones de la ficha miden 40 px, no los 44 px del dedo: en una ventana angosta esos 8 px son de la figura. */
@media (pointer: fine) and (max-width: 767px) {
  .ficha-accion, .hermano, .ficha-ver-todos { min-height: 40px; }
}
.hermano { border-color: transparent; }
.hermano[aria-checked="true"],
.hermano[aria-checked="true"]:hover { border-color: var(--blanco); }
.reproductor[data-vivo="true"] .hermano[aria-checked="true"] { border-color: transparent; box-shadow: 0 0 0 1.5px var(--morado), 0 0 14px rgba(155, 124, 244, 0.45); }

/* El horizonte: el espectro real del sonido en una franja de lado a lado al pie, sin escala ni números (app-dentro.js lo dibuja). La
   ficha, el relleno de abajo y el espacio de la figura le reservan su alto: nada lo cruza. */
.horizonte { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); width: 100%; height: var(--horizonte); pointer-events: none; }
/* El rótulo de la placa, como la ficha de un laboratorio: chico y gris, en una esquina del espacio de la figura. Solo con la placa 3D
   (app.js pone data-figura). Apilada va arriba a la derecha, bajo la barra; lado a lado, abajo a la derecha, sobre el horizonte. */
.placa-rotulo {
  display: none;
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  right: calc(20px + env(safe-area-inset-right, 0px));
  color: var(--gris);
  font-size: var(--t-5);
  line-height: var(--l-5);
  text-align: right;
  pointer-events: none;
}
.placa-rotulo b { display: block; font-weight: 400; color: var(--niebla); }
.reproductor[data-figura="placa"] .placa-rotulo { display: block; }
/* En un celular vertical muy bajo (menos de 521 px) la ficha de un ritual llega casi hasta la barra y el rótulo quedaría encima: se va. */
@media (max-width: 767px) and (max-height: 520px) and (orientation: portrait) {
  .reproductor[data-figura="placa"] .placa-rotulo { display: none; }
}

/* Pantalla limpia: solo la figura; un toque devuelve los controles. */
.mostrar-controles { position: absolute; inset: 0; z-index: 2; display: none; cursor: default; }
.reproductor--limpio .mostrar-controles { display: block; }
.reproductor--limpio .reproductor-ui { opacity: 0; pointer-events: none; }
/* El horizonte y el rótulo desaparecen de verdad (no solo se vuelven transparentes) cuando termina de apagarse la capa. */
.horizonte, .placa-rotulo { transition: visibility 0s; }
.reproductor--limpio .horizonte,
.reproductor--limpio .placa-rotulo { visibility: hidden; transition: visibility 0s linear 0.45s; }

/* El horizonte se achica en pantallas bajas: la figura y la ficha necesitan ese alto más que él. */
@media (max-height: 740px) {
  .reproductor { --horizonte: 24px; }
  .reproductor-ui { padding-bottom: calc(var(--horizonte) + 6px + env(safe-area-inset-bottom, 0px)); }
}
/* Celular angosto: las tres acciones de la barra (Volver, Ver por dentro y Pantalla limpia) caben en una fila con la letra de 16 px; por
   debajo de 400 px sin íconos (el texto basta: con los íconos sumarían 40 px más), y en los de 320 a 359 px, con 14 px. */
@media (max-width: 479px) {
  .reproductor-barra { margin-inline: -6px; }
  .reproductor-barra .boton-texto { gap: 6px; padding: 0 6px; font-size: var(--t-4); }
  .reproductor-barra-grupo { gap: 6px; }
}
@media (max-width: 399px) {
  .reproductor-barra .boton-texto .icono { display: none; }
}
@media (max-width: 359px) {
  .reproductor-barra .boton-texto { font-size: calc(var(--t-4) - 2px); }
}

/* Celular en vertical: la ficha aprieta su ritmo para que la figura tenga el espacio que pueda, y las tres acciones comparten la
   fila a lo ancho. */
@media (max-width: 767px) {
  .ficha { gap: 12px; }
  .boton.ficha-escuchar { min-height: 48px; }
  .ficha-accion { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 10px; }
}
/* Celular en vertical y bajo (375×667): lo justo para que la figura no quede en una franja. */
@media (max-width: 767px) and (max-height: 740px) {
  .ficha { gap: 6px; }
  .regla { --tallo: 18px; --tallo-2: calc(var(--tallo) + var(--numero) + 2px); gap: 4px; }
  .boton.ficha-escuchar { min-height: 44px; }
}
/* Celular muy bajo (un iPhone SE de primera generación, 320×568): la ficha aprieta un poco más. Es lo que cuesta llevar el bloque de tiempo. */
@media (max-width: 767px) and (max-height: 600px) {
  .ficha { gap: 4px; }
  .tiempo { gap: 2px 10px; }
}

/* En un celular de menos de 700 px de alto (un iPhone con la barra de Safari a la vista) la línea técnica cede su sitio a la figura,
   como la línea extra: el hueco de la figura sobre la ficha no puede bajar del 30 % de la pantalla. */
@media (max-width: 767px) and (max-height: 699px) {
  .ficha-tecnica { display: none; }
}

/* Sin ancho o sin alto para que las opciones hermanas se envuelvan en varias filas (un celular, o una ventana muy baja): se
   desplazan hacia el lado en una sola fila, con "Ver todos" siempre a la vista. */
@media (max-width: 767px), (max-height: 599px) {
  .ficha-opciones { flex-wrap: nowrap; }
  .hermanos {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    margin: -6px 0 -6px -6px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  }
  .hermanos::-webkit-scrollbar { display: none; }
  .hermano, .ficha-ver-todos { flex: none; }
}

/* Celular angosto (320 px, un iPhone SE de primera generación): las tres acciones caben en una fila y el título se achica. */
@media (max-width: 359px) {
  .ficha-nombre { --tam-nombre: var(--t-h4); --alto-nombre: var(--l-h4); }
  .ficha-accion { gap: 4px; padding: 0 8px; font-size: var(--t-4); }
}

/* Apilada y baja (un teléfono de 375×667, un portátil estrecho): la línea extra (la luna de hoy, la descripción de un ritual)
   cede su sitio a la figura. */
@media (max-height: 780px) {
  .reproductor-extra { display: none; }
}

/* Lado a lado: la ficha a la izquierda, centrada en vertical y con su ancho; la figura usa todo lo que queda a su derecha. */
@media (min-width: 640px) and (min-aspect-ratio: 5/4) {
  .reproductor-ui { padding-inline: calc(24px + env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-right, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .placa-rotulo { top: auto; bottom: calc(var(--horizonte) + 10px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); }
  .ficha { gap: 16px; width: calc(clamp(300px, 32vw, 440px) + 2 * var(--aro)); max-width: none; margin-block: auto; }
  .reproductor-extra { display: block; }
  .ficha-nombre { --tam-nombre: var(--t-h2); --alto-nombre: var(--l-h2); }
  .boton.ficha-escuchar { font-size: var(--t-1); }
}
@media (min-width: 640px) and (min-aspect-ratio: 5/4) {
  .reproductor { --vx: 67%; --vy: 46%; --vrx: 52%; --vry: 78%; }   /* luz: alrededor de la figura, a la derecha de la ficha */
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .reproductor-ui { padding-inline: 64px; }
  .placa-rotulo { right: 40px; }   /* el borde derecho del espacio de la figura */
}
/* Lado a lado en una pantalla mediana (un iPad de lado, una ventana de 1000 px): la ficha mide unos 330 px y los tres botones no caben en una
   fila con su relleno de escritorio. Con uno más corto sí, y así la ficha, que además de todo lleva el bloque de tiempo, no se desplaza por dentro. */
@media (min-width: 640px) and (min-aspect-ratio: 5/4) and (max-width: 1199px) {
  .ficha-accion { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 0 8px; }
}
/* Lado a lado pero sin alto para la línea extra ni para un título grande (hasta 760 px: la ficha lleva además el bloque de tiempo). */
@media (min-width: 640px) and (min-aspect-ratio: 5/4) and (max-height: 760px) {
  .reproductor-extra { display: none; }
  .ficha { gap: 12px; }
  .ficha-nombre { --tam-nombre: var(--t-h3); --alto-nombre: var(--l-h3); }
}
@media (min-width: 640px) and (min-aspect-ratio: 5/4) and (max-height: 600px) {
  .ficha { gap: 10px; }
  .regla { --tallo: 18px; --tallo-2: calc(var(--tallo) + var(--numero) + 2px); gap: 4px; }
}

/* Teléfono de lado (menos de 480 px de alto): la ficha se compacta para que la figura quede lo más grande posible. Se van las
   opciones hermanas y el volumen; "Ver todos" sube a la fila de Escuchar y todo lo demás se aprieta (cabe hasta en 360 px de alto,
   con las fases de un ritual). */
@media (max-height: 479px) {
  .reproductor { --horizonte: 22px; }
  .reproductor-ui { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--horizonte) + 6px + env(safe-area-inset-bottom, 0px)); }
  .placa-rotulo { top: calc(env(safe-area-inset-top, 0px) + 44px); }
  .boton-texto { min-height: 40px; }
  .reproductor-extra, .hermanos, .ficha-tecnica { display: none; }
  .ficha { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; gap: 6px; column-gap: 8px; }
  .ficha > * { grid-column: 1 / -1; }
  .ficha > .ficha-escuchar { grid-column: 1; }
  .ficha > .ficha-opciones { display: contents; }
  .ficha-opciones > .ficha-ver-todos { grid-column: 2; align-self: stretch; min-height: 44px; padding: 0 14px; font-size: var(--t-3); }
  .ficha-opciones > .ficha-guia { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
  .ficha-cabeza { gap: 2px; }
  .ficha-necesidad { font-size: var(--t-5); line-height: var(--l-5); }
  .ficha-nombre { --tam-nombre: var(--t-h4); --alto-nombre: var(--l-h4); }
  .ficha-detalle { font-size: var(--t-4); line-height: var(--l-4); }
  .regla { --tallo: 16px; --tallo-2: calc(var(--tallo) + var(--numero) + 2px); --paso: 5px; --numero: var(--t-6); gap: 4px; }
  .fases { gap: 6px 10px; }
  .fases-lista { gap: 12px; }
  .fases-lista, .fases > .texto-4 { font-size: var(--t-5); line-height: var(--l-5); }
  /* El bloque de tiempo de un modo, apretado: la pista pegada al texto (la letra es la misma) y, como no hay alto, las puntas de la regla
     ("174 Hz" y "963 Hz") ceden su sitio. Los rituales, que no lo llevan, conservan las suyas. */
  .tiempo { gap: 2px 10px; }
  .tiempo-resto, .tiempo-estado { font-size: var(--t-5); line-height: 16px; }
  .ficha:has(.tiempo:not([hidden])) .regla-extremos { display: none; }
  .boton.ficha-escuchar { min-height: 44px; font-size: var(--t-2); }
  .ficha-accion { flex: 0 1 auto; min-height: 40px; padding: 0 10px; gap: 6px; font-size: calc(var(--t-4) - 2px); }   /* de lado no hay alto: los tres botones caben en una fila con 14 px */
  .ficha-accion .icono { width: 16px; height: 16px; }
}
@media (max-height: 479px) and (min-aspect-ratio: 5/4) {
  .ficha { width: calc(clamp(300px, 46vw, 440px) + 2 * var(--aro)); }
}
@media (min-width: 640px) and (min-aspect-ratio: 5/4) and (max-height: 479px) {
  .reproductor-ui { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .placa-rotulo { top: auto; }
}

/* ── Diálogos ─────────────────────────────────────────────── */
.opciones-tiempo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opciones-tiempo .pildora { justify-content: center; padding: 0 10px; }
.opciones-tiempo .opcion-sin-limite { grid-column: span 2; }   /* siete tiempos y "Sin límite" llenan tres filas de tres */
.opciones-tiempo--cuatro { grid-template-columns: repeat(4, 1fr); }
.opciones-tiempo--cinco { grid-template-columns: repeat(5, 1fr); }
.opciones-tiempo .pildora[aria-pressed="true"],
.opciones-tiempo .pildora[aria-checked="true"] { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

/* Ver todos: los diecisiete modos bajo lo que la persona necesita. El elegido lleva el borde blanco y, mientras suena, el aro morado. */
.dialogo--sonidos { width: min(100%, 520px); text-align: left; }
.dialogo--sonidos .texto-2 { margin-bottom: 18px; }
@media (max-height: 479px) {
  .dialogo--sonidos .texto-2 { margin-bottom: 8px; }
  .dialogo--sonidos .dialogo-pie { margin-top: 8px; }
  .sonidos-grupo + .sonidos-grupo { margin-top: 18px; }
}
.sonidos-grupo + .sonidos-grupo { margin-top: 28px; }
.sonidos-titulo { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; }   /* subtítulo de la ventana */
.sonidos-frase { margin: 2px 0 10px; color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.sonidos-lista { display: grid; gap: 4px; }
.sonido-fila {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radio-boton);
  text-align: left;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color var(--rapido), box-shadow var(--rapido);
}
.sonido-fila:hover { background: rgba(var(--oro-rgb), 0.07); }   /* reflejo: la fila se alumbra con el cursor encima */
.sonido-icono { width: 44px; height: 44px; }
.sonido-textos { display: grid; gap: 2px; min-width: 0; }
.sonido-nombre { font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; overflow-wrap: anywhere; }
.sonido-dato { color: var(--gris); font-size: var(--t-4); line-height: var(--l-4); }
.sonido-estado { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 20px; font-size: var(--t-5); line-height: 1; }
.sonido-elegido, .sonido-sonando { display: none; }
.sonido-fila[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--blanco); }
.sonido-fila[aria-current="true"] .sonido-elegido { display: inline-flex; }
.sonido-fila[data-vivo="true"] { box-shadow: inset 0 0 0 1.5px var(--morado); }
.sonido-fila[data-vivo="true"] .sonido-elegido { display: none; }
.sonido-fila[data-vivo="true"] .sonido-sonando { display: inline-flex; align-items: center; gap: 8px; }

.dialogo-icono { margin: 0 auto 16px; }
.ritual-hz { margin-bottom: 12px; }
.ritual-duracion-titulo { margin-bottom: 10px; color: var(--gris); }

/* ── Mezcla: dos reglas con aguja ───────────────────────────
   "Fondo" (de ruido a naturaleza) y "Tonos" (de ambiente a tonos). Cada una es un <input type="range"> nativo vestido como la regla de
   frecuencias del reproductor: una línea fina con marcas cortas cada 10 % y una más alta al centro, y una aguja vertical en vez de un
   tirador. Las marcas son un dibujo (aria-hidden) detrás del control; el control cubre toda la regla, así que se mueve tocando o arrastrando
   en cualquier punto de ella, y con el teclado nativo. La aguja es de arena y solo brilla en morado mientras algo suena. */
.ajustes { --aguja: 4px; display: grid; gap: 28px; text-align: left; }
.ajuste { display: grid; gap: 4px; }
.ajuste-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.ajuste-nombre { color: var(--blanco); font-size: var(--t-2); line-height: var(--l-2); }
.ajuste-estado { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); text-align: right; }
.ajuste-pista { position: relative; height: 44px; }   /* 44 px: el área táctil; la regla y la aguja ocupan los 24 del medio */
.ajuste-marcas {
  position: absolute;
  inset: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-inline: calc(var(--aguja) / 2 - 0.5px);   /* la primera y la última marca quedan donde se detiene el centro de la aguja */
  pointer-events: none;
}
.ajuste-marcas::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(238, 230, 216, 0.4); }
.ajuste-marcas i { width: 1px; height: 8px; margin-bottom: 1px; background: rgba(238, 230, 216, 0.4); }
.ajuste-marcas i:nth-child(6) { height: 14px; }
.ajuste-rango {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.ajuste-rango::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.ajuste-rango::-moz-range-track { height: 44px; background: transparent; }
.ajuste-rango::-webkit-slider-thumb { -webkit-appearance: none; width: var(--aguja); height: 24px; margin-top: 10px; border: 0; border-radius: 2px; background: var(--blanco); }
.ajuste-rango::-moz-range-thumb { width: var(--aguja); height: 24px; border: 0; border-radius: 2px; background: var(--blanco); }
html[data-vivo="true"] .ajuste-rango::-webkit-slider-thumb { background: var(--morado); box-shadow: 0 0 8px rgba(155, 124, 244, 0.7); }
html[data-vivo="true"] .ajuste-rango::-moz-range-thumb { background: var(--morado); box-shadow: 0 0 8px rgba(155, 124, 244, 0.7); }
.ajuste-rango:focus-visible { outline-offset: 2px; }
.ajuste-extremos { display: flex; justify-content: space-between; gap: 16px; color: var(--gris); font-size: var(--t-6); line-height: var(--l-6); }

/* ── Celular ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .app { --nav-total: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .app-cabecera { grid-template-columns: 1fr auto; padding-inline: 16px; }
  .app-portada { grid-column: 2; }
  /* Con el mini a la vista, cada pantalla deja abajo su espacio (100 px) y el de la barra; sin él (html[data-sin-mini]) solo la barra. */
  .pantalla { padding-top: calc(var(--cabecera) + 8px); padding-bottom: calc(136px + var(--nav-total)); }
  /* El mini en celular se apoya a 8 px de la navegación y mide 64 px (48 de icono y 8 de relleno); a la acción principal de cada
     pantalla le sobra lugar encima de él. */
  .mini { padding: 20px var(--margen) 8px; }

  /* Barra inferior: cuatro íconos con su nombre. La pantalla activa va en blanco y con una marca arriba. */
  .nav-app {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 4px 8px env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(var(--oro-rgb), 0.1) 0%, rgba(var(--oro-rgb), 0) 60%), #000;   /* luz: un velo cálido en el canto de arriba */
    border-top: 1px solid var(--pizarra);
  }
  /* Luz (contorno): una línea de 1 px que brilla al centro y se apaga hacia los lados, sobre el borde de arriba. */
  .nav-app::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--oro-canto-rgb), 0) 0%, rgba(var(--oro-canto-rgb), 0.5) 50%, rgba(var(--oro-canto-rgb), 0) 100%);
    pointer-events: none;
  }
  .nav-enlace { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 0; color: var(--gris); font-size: var(--t-5); line-height: 1; }
  .nav-enlace .icono { display: inline-flex; }
  .nav-enlace[aria-current="page"]::after { left: 50%; right: auto; top: -5px; bottom: auto; width: 28px; height: 2px; margin-left: -14px; }
  .destacados { margin-bottom: 56px; }
  .seccion { margin-bottom: 48px; }
  .grupo { margin-bottom: 44px; }
  /* En celular toda la tarjeta es el botón: el círculo de reproducir sobra y le quita ancho al nombre. */
  .tarjeta-modo-pie { padding: 10px 12px 12px; }

  .opciones-tiempo--cuatro { grid-template-columns: repeat(2, 1fr); }
  /* Cinco opciones en celular: la primera (la sesión corta) ocupa su fila y los rituales van de dos en dos debajo. */
  .opciones-tiempo--cinco { grid-template-columns: repeat(2, 1fr); }
  .opciones-tiempo--cinco .pildora:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sonando-barras i { animation: none; transform: scaleY(0.7); }
  .reproductor[data-vivo="true"] .regla-activa::before,
  .reproductor[data-vivo="true"] .regla-punto { animation: none; }
}

/* ── Detalles ─────────────────────────────────────────────── */
html.con-reproductor,
html.con-capa { overflow: hidden; }
.app .nota-flotante { bottom: calc(116px + var(--nav-total)); }
@media (max-width: 767px) {
  .app .nota-flotante { bottom: calc(104px + var(--nav-total)); }   /* el mini es más bajo en celular: el aviso va justo encima */
}

/* Aviso con una acción (por ejemplo, "Anotar"). */
.nota-flotante--accion { display: flex; align-items: center; gap: 14px; text-align: left; }
.nota-accion {
  flex: none;
  padding: 6px 4px;
  border-radius: 6px;
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.4);
  text-underline-offset: 4px;
}
.nota-accion:hover { text-decoration-color: var(--blanco); }

/* Láminas destacadas en pantallas anchas: el texto en una columna de ~42 % a la izquierda, sobre un degradado de negro a
   transparente (por si algo del fondo llega hasta ahí), y la figura confinada al resto, a la derecha (ver el área en
   pintarDestacados). Nada se cruza con el texto ni con el botón. */
@media (min-width: 680px) {
  .destacado { display: block; height: 340px; }
  .destacado-lienzo { position: absolute; inset: 0; }
  .destacado-texto {
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(280px, 42%, 520px);
    align-content: center;
    padding: 40px;
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* ── Transiciones de vista dentro de la app (solo Chrome y los navegadores de su motor: ver movimiento.js y app.js) ──
   Cambiar de pantalla desde la barra: la que se va se corre un poco y se apaga; la nueva entra desde el lado hacia el que se avanza en
   la barra. La cabecera, la barra y el mini se quedan quietos (cada uno con su nombre, solo mientras dura). La entrada de siempre de la
   pantalla (pantalla-entra) no corre: se vería dos veces. */
html[data-transicion^="pantalla"] .app-cabecera { view-transition-name: app-cabecera; }
html[data-transicion^="pantalla"] .nav-app { view-transition-name: app-barra; }
html[data-transicion^="pantalla"] .mini { view-transition-name: app-mini; }
html[data-transicion^="pantalla"] .pantalla { animation: none; }
html[data-transicion="pantalla-adelante"]::view-transition-old(root) { animation: app-vt-sale-izq var(--mov-corto) var(--curva) both; }
html[data-transicion="pantalla-adelante"]::view-transition-new(root) { animation: app-vt-entra-der 360ms var(--curva) 40ms both; }
html[data-transicion="pantalla-atras"]::view-transition-old(root) { animation: app-vt-sale-der var(--mov-corto) var(--curva) both; }
html[data-transicion="pantalla-atras"]::view-transition-new(root) { animation: app-vt-entra-izq 360ms var(--curva) 40ms both; }
@keyframes app-vt-sale-izq { to { opacity: 0; transform: translateX(-24px); filter: blur(4px); } }
@keyframes app-vt-sale-der { to { opacity: 0; transform: translateX(24px); filter: blur(4px); } }
@keyframes app-vt-entra-der { from { opacity: 0; transform: translateX(32px); filter: blur(6px); } }
@keyframes app-vt-entra-izq { from { opacity: 0; transform: translateX(-32px); filter: blur(6px); } }

/* La tarjeta que crece hasta ser el reproductor (expandirDesde, en app.js): el grupo "expansion" va de la caja de la tarjeta a la del
   reproductor con la curva de lo que se desplaza; la imagen de la tarjeta se apaga rápido y la del reproductor llega enfocándose. Lo de
   atrás (root) se queda quieto, y el reproductor no hace su propia entrada (subir) mientras tanto. */
html[data-transicion="abrir-reproductor"] .reproductor { animation: none; }
html[data-transicion="abrir-reproductor"]::view-transition-old(root),
html[data-transicion="abrir-reproductor"]::view-transition-new(root) { animation: none; }
::view-transition-group(expansion) { animation-duration: 460ms; animation-timing-function: var(--curva-cambia); }
::view-transition-old(expansion),
::view-transition-new(expansion) { height: 100%; object-fit: cover; }
::view-transition-old(expansion) { animation: mov-vt-sale 180ms var(--curva) both; }
::view-transition-new(expansion) { animation: mov-vt-entra 460ms var(--curva) both; }

/* ═════════ Rituales guiados por voz ═════════
   La ficha del ritual pregunta cómo te sientes, cuánto dura y cuánta voz quieres; el reproductor muestra la etapa en que vas,
   lo que dice la voz (subtítulo), la pregunta o la intención del ritual y, sin tocar nada, se apaga casi del todo para que
   puedas cerrar los ojos. */
.escala--compacta { gap: 4px; margin-bottom: 4px; }
.escala--compacta::before { top: 20px; }
.escala--compacta .escala-opcion { gap: 8px; }
.escala--compacta .escala-punto { width: 40px; height: 40px; font-size: var(--t-3); }
.escala--compacta .escala-palabra { font-size: var(--t-5); line-height: var(--l-5); }
.opciones-tiempo--tres { grid-template-columns: repeat(3, 1fr); }
.ritual-nota { margin-top: 6px; color: var(--oro); }
.ritual-gesto { display: grid; gap: 6px; margin-top: 14px; }
.ritual-gesto .campo-texto { min-height: 0; }
.ritual-programa { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--radio-tarjeta); background: var(--luz-oro); box-shadow: var(--oro-filo), inset 0 0 0 1px var(--linea-tenue); text-align: left; }
.ritual-programa .ritual-duracion-titulo { margin-bottom: 0; }
.ritual-programa__aviso { color: var(--oro); }
.ritual-programa__acciones { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.ritual-programa__boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--niebla); font: inherit; font-size: var(--t-4); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ritual-programa__boton:hover { color: var(--blanco); }
.ritual-audifonos { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 0; color: var(--niebla); background: none; border: 0; font: inherit; font-size: var(--t-4); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ritual-audifonos:hover, .ritual-audifonos[data-sonando="true"] { color: var(--blanco); }
.ritual-audifonos[data-sonando="true"] { text-decoration: none; }

.fases-cuenta { color: var(--gris); }

/* Mientras dura la llegada, en el lugar de lo que falta: "Saltar la llegada". Se ve como un enlace, pero su zona de toque mide
   44 px de alto (el margen negativo la deja en la misma línea). */
.fases-saltar {
  grid-area: resto;
  justify-self: end;
  min-height: 44px;
  margin: -12px 0;
  padding: 0;
  color: var(--blanco);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-4);
  line-height: var(--l-4);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.fases-saltar[hidden] { display: none; }
@media (max-width: 767px) {
  .fases-saltar { font-size: var(--t-5); line-height: var(--l-5); }
}
@media (max-width: 339px) {
  .fases-saltar { justify-self: start; }
}
/* El botón de la guía va junto a "Ver todos", con su mismo tamaño (un ritual no tiene opciones hermanas): la ficha mide lo mismo
   que siempre. */
.ficha-guia { min-height: 44px; padding: 0 14px; font-size: var(--t-4); line-height: 1; }
.ficha-guia[hidden] { display: none; }
@media (max-width: 767px) {
  .ficha-guia { flex: none; }
}
@media (pointer: fine) and (max-width: 767px) {
  .ficha-guia { min-height: 40px; }
}
/* En un celular bajo, mientras dura un ritual guiado la regla deja su lugar a la figura y a lo que dice la voz (el detalle de
   la ficha ya dice qué frecuencias suenan). */
@media (max-width: 639px) and (max-height: 699px) {
  .reproductor[data-guiado="true"] .regla { display: none; }
}

/* Las leyendas: sobre la figura, justo encima de la ficha (lado a lado, al pie de la figura), centradas como los subtítulos de una
   película. app.js pone --leyenda-abajo, --leyenda-izquierda y --leyenda-derecha. No reciben toques. */
.leyendas {
  position: absolute;
  z-index: 2;
  left: var(--leyenda-izquierda, 20px);
  right: var(--leyenda-derecha, 20px);
  bottom: var(--leyenda-abajo, 50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
}
.leyendas[hidden] { display: none; }
.voz-subtitulo {
  margin: 0;
  max-width: 34ch;
  color: var(--blanco);
  font-size: var(--t-2);
  line-height: var(--l-2);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.voz-subtitulo[data-visible="true"] { opacity: 1; }
.gesto-tarjeta { max-width: 34ch; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(var(--oro-metal-rgb), 0.5); }
.gesto-etiqueta { color: var(--oro); }
.gesto-texto { color: var(--blanco); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .voz-subtitulo { font-size: var(--t-3); line-height: var(--l-3); }
}

/* La pantalla en reposo: todo se apaga menos lo que dice la voz. Tocar o mover la vuelve a encender. */
.reproductor .reproductor-barra, .reproductor .ficha-cabeza, .reproductor .regla, .reproductor .fases-lista, .reproductor .fases-pista,
.reproductor [data-fases-resto], .reproductor .tiempo-resto, .reproductor .tiempo-estado, .reproductor .tiempo-pista,
.reproductor .gesto-tarjeta, .reproductor .fases-saltar, .reproductor .ficha-escuchar,
.reproductor .ficha-acciones, .reproductor .volumen, .reproductor .ficha-opciones, .reproductor .placa-rotulo { transition: opacity 0.4s ease; }
.reproductor[data-reposo="true"] .reproductor-barra, .reproductor[data-reposo="true"] .ficha-cabeza, .reproductor[data-reposo="true"] .regla,
.reproductor[data-reposo="true"] .fases-lista, .reproductor[data-reposo="true"] .fases-pista, .reproductor[data-reposo="true"] [data-fases-resto],
.reproductor[data-reposo="true"] .tiempo-resto, .reproductor[data-reposo="true"] .tiempo-estado, .reproductor[data-reposo="true"] .tiempo-pista,
.reproductor[data-reposo="true"] .fases-saltar, .reproductor[data-reposo="true"] .ficha-escuchar,
.reproductor[data-reposo="true"] .ficha-acciones, .reproductor[data-reposo="true"] .volumen, .reproductor[data-reposo="true"] .ficha-opciones,
.reproductor[data-reposo="true"] .placa-rotulo { opacity: 0.06; transition: opacity 2.5s ease; }
.reproductor[data-reposo="true"] .gesto-tarjeta { opacity: 0.4; transition: opacity 2.5s ease; }
.reproductor .reproductor-lienzo, .reproductor .horizonte { transition: opacity 0.6s ease; }
.reproductor[data-reposo="true"] .reproductor-lienzo, .reproductor[data-reposo="true"] .horizonte { opacity: 0.55; transition: opacity 4s ease; }
.reproductor[data-reposo="true"][data-noche="true"] .reproductor-lienzo, .reproductor[data-reposo="true"][data-noche="true"] .horizonte { opacity: 0.12; }
.reproductor[data-reposo="true"][data-noche="true"] .voz-subtitulo[data-visible="true"] { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .voz-subtitulo, .reproductor .reproductor-lienzo, .reproductor .horizonte, .reproductor[data-reposo="true"] .ficha-cabeza { transition: none; }
}

/* ── Mezcla: el latido y la nota de la voz en 5 minutos ──────────────────────────────────────
   El latido de la hoja Mezcla (sonido.js, "El latido de la persona"): la pastilla "Latido" es su interruptor y debajo va su propia regla de
   volumen, con el mismo dibujo de las otras dos (.ajuste-pista, .ajuste-marcas, .ajuste-rango). Apagado, la pastilla es de contorno y la regla se
   apaga con él. Encendido, la pastilla es una selección más (arena llena, como las opciones elegidas). El morado, como en la aguja de las otras
   reglas, solo marca lo que suena: el aro de la pastilla y la aguja de su regla (data-vivo en el bloque, que app.js pone solo con el latido encendido
   y sonando); con otra cosa sonando pero el latido apagado o en pausa, la aguja de esta regla se queda de arena. */
.ajuste-latido { display: grid; gap: 4px; }
.ajuste-latido .ajuste-cabeza { align-items: center; }
.ajuste-interruptor { min-width: 116px; justify-content: center; }
.ajuste-interruptor[aria-checked="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.ajuste-latido[data-vivo="true"] .ajuste-interruptor { box-shadow: 0 0 0 1.5px var(--morado), 0 0 18px rgba(155, 124, 244, 0.45); }
.ajuste-latido[data-apagado="true"] .ajuste-pista,
.ajuste-latido[data-apagado="true"] .ajuste-extremos { opacity: 0.4; }
.ajuste-latido .ajuste-rango:disabled { cursor: default; }
html[data-vivo="true"] .ajuste-latido:not([data-vivo="true"]) .ajuste-rango::-webkit-slider-thumb { background: var(--blanco); box-shadow: none; }
html[data-vivo="true"] .ajuste-latido:not([data-vivo="true"]) .ajuste-rango::-moz-range-thumb { background: var(--blanco); box-shadow: none; }
/* La ficha de un ritual, en 5 minutos: lo que dice la voz. */
.ritual-guia-nota { margin-top: 8px; color: var(--gris); }

/* Ficha del ritual: cinco duraciones en una sola fila (celular).
   Cinco píldoras iguales, con poco relleno lateral y el hueco justo, para que "30 min" quepa desde 320 px con 44 px de alto.
   Solo la ficha: las cinco de Crear siguen con su sesión corta en fila propia. */
@media (max-width: 767px) {
  [data-ritual-duraciones].opciones-tiempo--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  [data-ritual-duraciones].opciones-tiempo--cinco .pildora { padding: 0 2px; white-space: nowrap; }
  [data-ritual-duraciones].opciones-tiempo--cinco .pildora:first-child { grid-column: auto; }
}
@media (max-width: 359px) {
  /* A 320 px el texto de 18 px de "30 min" no cabe en un quinto del ancho: baja a 16 px (--t-4 en celular) y el hueco a 4 px. */
  [data-ritual-duraciones].opciones-tiempo--cinco { gap: 4px; }
  [data-ritual-duraciones].opciones-tiempo--cinco .pildora { font-size: var(--t-4); }
}