/* Rompe el Ciclo · material y componentes compartidos
   Dirección: BARRO. Sistema completo en docs/DESIGN.md.

   La profundidad de este sistema NO viene de sombras. Viene del material:
   las superficies elevadas son barro más claro y llevan un filo de luz de
   1 px arriba, como el borde vidriado de una pieza que atrapa la luz. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  /* Una pieza de barro nunca es de un solo tono: el borde recibe menos luz
     que el centro. La veladura es lo que separa "cerámica" de "papel beige". */
  background:
    radial-gradient(115% 78% at 50% 8%, #F2E8D6 0%, var(--barro) 58%, #DFD2BC 100%),
    var(--barro);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* --- la arcilla ------------------------------------------------------------
   Dos capas. El moteado grande es el engobe, que hace que el barro nunca se
   vea plano; el grano fino es la textura del propio material. Un fondo liso
   rompería la ilusión, y con ella toda la dirección. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 88; opacity: 0.72;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23e)' opacity='.26'/%3E%3C/svg%3E");
  background-size: 520px 520px;
}

body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 89; opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
}

#app {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* --- tipografía ----------------------------------------------------------- */
.ask {
  font-family: var(--serif);
  font-weight: 400;              /* nunca bold: el material hace el peso */
  font-size: var(--t-pregunta);
  line-height: 1.1;
  letter-spacing: -0.026em;
  margin: 0 0 var(--palma);
  max-width: 15ch;               /* la pregunta rompe en pocas líneas anchas */
  text-wrap: balance;
}
.helper {
  font-family: var(--serif);
  font-size: var(--t-menor);
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0 0 var(--torno);
  max-width: 42ch;
}
.label {
  font-family: var(--sans);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin: 0 0 var(--torno);
  padding-bottom: var(--pulgar);
  border-bottom: 1px solid var(--linea);
  display: block;
}

/* --- el anillo con la grieta ----------------------------------------------
   La firma del sistema, y ahora una presencia de verdad. Vive detrás del
   contenido, grande y muy tenue, como una pieza apoyada en el fondo del
   taller. Su abertura crece paso a paso y el oro la va llenando.

   La geometría se controla con --abertura, que a11y.js pone en unidades de la
   circunferencia (2 * pi * 20 = 125.66). No hay una sola animación escrita en
   JavaScript: todo es aritmética de CSS. */
.progress {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  --abertura: 3;
}

/* Grande, desbordando por la derecha, muy tenue. Rompe la simetría de la
   columna sin competir jamás con la pregunta. */
.anillo {
  width: min(74vw, 380px);
  height: min(74vw, 380px);
  margin: -14vw -30vw 0 0;
  overflow: visible;
  transform: rotate(-118deg);   /* la abertura mira arriba a la derecha */
  opacity: 0.30;
}
.anillo circle {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-dasharray var(--dur-larga) var(--peso),
              stroke-dashoffset var(--dur-larga) var(--peso);
}
.anillo__barro { stroke: var(--tinta); stroke-dasharray: calc(125.66 - var(--abertura)) var(--abertura); }
.anillo__oro {
  stroke: var(--oro);
  stroke-width: 3.4;
  stroke-dasharray: var(--abertura) calc(125.66 - var(--abertura));
  stroke-dashoffset: calc(-1 * (125.66 - var(--abertura)));
  opacity: 0.95;
}

.progress__fill { display: none; }

/* --- estructura de pantalla ------------------------------------------------
   Las cosas se posan. No entran de lado, no rebotan. */
.screen {
  position: relative;
  z-index: 1;                      /* siempre por encima del anillo */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--banco) var(--margen-pantalla) var(--margen-pantalla);
  padding-bottom: calc(var(--margen-pantalla) + env(safe-area-inset-bottom, 0px));
  animation: posarse var(--dur-media) var(--peso);
}
@keyframes posarse {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.screen__body { flex: 1 1 auto; }
.screen__foot {
  flex: 0 0 auto;
  padding-top: var(--torno);
  display: flex;
  flex-direction: column;
  gap: var(--pulgar);
}

/* --- botones --------------------------------------------------------------- */
.btn {
  appearance: none;
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  min-height: var(--tap);
  width: 100%;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--tinta);
  border-radius: var(--rim);
  background: var(--tinta);
  color: var(--barro);
  cursor: pointer;
  transition: transform var(--dur-corta) var(--peso),
              background var(--dur-corta) var(--peso),
              opacity var(--dur-corta) var(--peso);
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.26; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 3px; }

.btn--ghost {
  background: var(--engobe);
  box-shadow: inset 0 1px 0 var(--filo);
  color: var(--tinta-suave);
  border-color: var(--linea);
  border-top-color: var(--filo);
  font-weight: 500;
}
.btn--ghost:hover { border-color: var(--tinta-tenue); }

.btn--quiet {
  background: none; border: none; color: var(--tinta-tenue);
  font-size: var(--t-menor); font-weight: 500;
  min-height: 44px; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--linea);
  width: auto; align-self: center;
}
.btn--exit { background: var(--esmalte); border-color: var(--esmalte); color: var(--engobe-claro); }

/* --- campos, hundidos en el barro ------------------------------------------ */
.field {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--t-guia);
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  background: var(--barro-hondo);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--rim);
  padding: 0.7rem 0.85rem 0.75rem;
  resize: none;
}
.field::placeholder { color: var(--tinta-tenue); opacity: 0.7; }
.field:focus {
  outline: none;
  border-bottom-color: var(--tinta);   /* enfocar no es una alarma */
}

/* --- chips, piezas elevadas ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--pulgar); }
.chip {
  appearance: none;
  box-shadow: inset 0 1px 0 var(--filo);
  font-family: var(--sans);
  font-size: var(--t-menor); font-weight: 500;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--rim-chico);
  background: var(--engobe);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: transform var(--dur-corta) var(--peso),
              background var(--dur-corta) var(--peso),
              color var(--dur-corta) var(--peso),
              border-color var(--dur-corta) var(--peso);
}
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 3px; }
.chip[aria-pressed="true"] {
  background: var(--tinta); color: var(--barro); border-color: var(--tinta);
}
.chip--exit[aria-pressed="true"] {
  background: var(--esmalte); border-color: var(--esmalte); color: var(--engobe-claro);
}

/* --- deslizadores ----------------------------------------------------------- */
.scale { margin: var(--torno) 0 var(--pulgar); }
.scale__value {
  font-family: var(--serif);
  font-size: var(--t-cifra);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  display: block;
  margin-bottom: var(--pizca);
}
.scale__value.is-loop { color: var(--terracota); }   /* lo que dice tu cabeza */
.scale__value.is-exit { color: var(--esmalte); }     /* lo que resultó verdad */
.scale__caption {
  font-family: var(--serif);
  font-size: var(--t-menor);
  color: var(--tinta-suave);
  min-height: 1.5em;
  display: block;
  margin-bottom: var(--torno);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--barro-hondo); border-radius: 3px;
}
input[type="range"]::-moz-range-track {
  height: 6px; background: var(--barro-hondo); border-radius: 3px;
}
/* El pulgar es la única sombra admitida en todo el sistema: tiene que leerse
   como un objeto que se agarra. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px; margin-top: -12px;
  border-radius: 50%; background: var(--tinta);
  border: 3px solid var(--engobe);
  box-shadow: 0 1px 5px rgba(36, 28, 21, 0.24);
}
input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tinta); border: 3px solid var(--engobe);
}
.scale__ends {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-size: var(--t-rotulo);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-tenue);
}

/* --- utilidades ------------------------------------------------------------- */
.stack > * + * { margin-top: var(--torno); }
.muted { color: var(--tinta-tenue); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --- momentos propios por pantalla ---------------------------------------
   Dos pantallas no son un paso del protocolo y merecen su propia composición.
   El gancho `data-ruta` lo pone app.js al montar. */

/* EL INICIO. Aquí el bucle todavía está CERRADO, con la grieta del grosor de
   un pelo: ya existe, pero no se ha abierto. Ocupa el hueco grande de arriba,
   que sin él era espacio muerto, y da al inicio el momento que le faltaba. */
.screen[data-ruta="inicio"] {
  justify-content: flex-end;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cg transform='rotate(-118 72 72)'%3E%3Ccircle cx='72' cy='72' r='60' fill='none' stroke='%23241C15' stroke-width='2.4' stroke-linecap='round' opacity='0.30' stroke-dasharray='368.61 8.38'/%3E%3Ccircle cx='72' cy='72' r='60' fill='none' stroke='%239C6C18' stroke-width='3.6' stroke-linecap='round' stroke-dasharray='8.38 368.61' stroke-dashoffset='-368.61'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 20%;
  background-size: min(70vw, 330px) auto;
}
.screen[data-ruta="inicio"] .screen__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* EL CIERRE. El bucle abierto del todo, y el oro se dibuja una sola vez.
   Es el único momento memorable de movimiento de toda la app, y funciona
   precisamente porque es el único. */
.screen[data-ruta="cierre"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cg transform='rotate(-118 72 72)'%3E%3Ccircle cx='72' cy='72' r='60' fill='none' stroke='%23241C15' stroke-width='2.4' stroke-linecap='round' opacity='0.30' stroke-dasharray='299.50 77.49'/%3E%3Ccircle cx='72' cy='72' r='60' fill='none' stroke='%239C6C18' stroke-width='3.6' stroke-linecap='round' stroke-dasharray='77.49 299.50' stroke-dashoffset='-299.50'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 16%;
  background-size: min(70vw, 330px) auto;
  animation: posarse var(--dur-media) var(--peso), asentar-oro var(--dur-larga) var(--peso);
}
@keyframes asentar-oro {
  from { background-size: min(56vw, 264px) auto; opacity: 0.4; }
  to   { background-size: min(70vw, 330px) auto; opacity: 1; }
}