/* Vista «Rueda» del inicio (js/vista-rueda.js): barra 1-10 y rueda vertical con scroll nativo y snap.
   La tarjeta es la común (tarjeta-pilar.css). El efecto de rodillo lo pone animation-timeline: view(); el JS
   (.respaldo-js) lo imita donde no existe. En este modo la página no hace scroll: solo la rueda. */
body.modo-rueda {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.modo-rueda .cabecera { flex: none; width: 100%; }
body.modo-rueda #vista {
  flex: 1 1 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* En este modo la cabecera no pone cristal ni límite de columna: la barra y la rueda van a sangre. */
body.modo-rueda .cabecera {
  max-width: none;
  padding-inline: max(var(--esp-4), calc((100% - 560px) / 2 + var(--esp-4)));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

/* ── Saludo compacto (mismo texto y tipografía que en la rejilla); se pliega al empezar a girar ── */
.saludo-compacto {
  flex: none;
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 max(var(--esp-4), calc((100% - 560px) / 2 + var(--esp-4)));
  transition: grid-template-rows .3s ease, opacity .25s ease, padding .3s ease;
}
.saludo-compacto .saludo-cuerpo { min-height: 0; overflow: hidden; padding-bottom: var(--esp-2); }
.saludo-compacto h1 { margin: 0; font-size: clamp(1.35rem, 6.5vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saludo-compacto .intro { margin: 0; font-size: .9rem; line-height: 1.3; }
.saludo-compacto.plegado { grid-template-rows: 0fr; opacity: 0; }
.saludo-compacto.plegado .saludo-cuerpo { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .saludo-compacto { transition: none; } }

/* ── Barra 1-10, a todo el ancho ── */
.rueda-indice {
  flex: none;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(10, minmax(32px, 1fr));
  width: 100%;
  padding: var(--esp-2) max(var(--esp-2), calc((100% - 560px) / 2 + var(--esp-2)));
  background: var(--vidrio-fondo-fuerte);
  border-top: 0;
  border-radius: 0 0 var(--radio-contenedor) var(--radio-contenedor);
}
.rueda-indice button {
  position: relative;
  min-width: 32px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--texto-suave);
  font: 500 1rem/1 var(--fuente-cuerpo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, background-color .2s;
}
.rueda-indice button[aria-current="true"] { color: var(--acento-texto); background: var(--oro); font-weight: 600; }
.rueda-indice button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
/* Punto pequeño: ese pilar ya está empezado */
.rueda-indice button[data-empezado="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--oro-texto);
}
.rueda-indice button[aria-current="true"]::after { background: var(--acento-texto); }

/* ── Marco y rueda ── */
.rueda-marco { container-type: size; position: relative; flex: 1 1 0; min-height: 0; width: 100%; }
.rueda {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
.rueda::-webkit-scrollbar { display: none; }
.rueda.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rueda.arrastrando a { pointer-events: none; }

/* El carril iguala el alto de todas las ranuras (1fr) y deja espacio para centrar la primera y la última */
.rueda-carril {
  display: grid;
  grid-auto-rows: 1fr;
  row-gap: clamp(16px, 9cqh, 56px);
  padding-block: 50cqh;
}
.ranura {
  display: flex;
  padding-inline: max(var(--esp-4), calc((100% - 560px) / 2));
  scroll-snap-align: center;
  scroll-snap-stop: always;
  perspective: 800px;
}
.ranura > .tarjeta-pilar { flex: 1; }

/* ── Efecto rodillo con scroll-driven animations ── */
@keyframes rodillo {
  0%    { transform: perspective(700px) rotateX(62deg) scale(.55); opacity: 0; }
  20%   { transform: perspective(700px) rotateX(40deg) scale(.8); opacity: .62; }
  50%   { transform: perspective(700px) rotateX(0) scale(1); opacity: 1; }
  80%   { transform: perspective(700px) rotateX(-40deg) scale(.8); opacity: .62; }
  100%  { transform: perspective(700px) rotateX(-62deg) scale(.55); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rueda:not(.respaldo-js) .tarjeta-pilar { animation: rodillo linear both; animation-timeline: view(block); }
  }
}

/* ── Pista inicial ── */
.rueda-pista {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 4;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--texto-suave);
  pointer-events: none;
}
.rueda-pista-icono { font-size: 1.3rem; line-height: 1; color: var(--oro-texto); animation: rueda-pista-sube 1.1s ease-in-out 2; }
@keyframes rueda-pista-sube { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .rueda-pista-icono { animation: none; } }