/* ==========================================================================
   EXPERIENCIA (18-oct-2026): cinemática del aguachile + "Arma tu torre".
   Vive en su propio archivo para poder quitarla o llevarla a otro cliente
   sin tocar sitio.css. Usa los tokens de tokens.css (bloque-tinta, oro).
   Sin librerías externas: el sitio debe funcionar sin internet.
   ========================================================================== */

/* ---------- Cinemática: el aguachile avanza con el scroll ---------- */
.cine-dc { position: relative; height: 320vh; }
.cine-dc__escenario {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: #000;
}
.cine-dc__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-dc__escenario::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,12,21,.86) 0%, rgba(7,12,21,.35) 42%, transparent 68%),
    linear-gradient(0deg, rgba(7,12,21,.7), transparent 40%);
}
.cine-dc__rotulo {
  position: absolute; z-index: 2;
  left: clamp(1.25rem, 6vw, 5rem); bottom: clamp(4.5rem, 14vh, 9rem);
  max-width: min(36rem, 88vw);
  opacity: 0; transform: translateY(24px);
}
.cine-dc__rotulo .etiqueta { margin-bottom: var(--space-6); }
.cine-dc__frase {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: 500;
  color: var(--color-foreground);
}
.cine-dc__frase em { font-style: italic; color: var(--oro); }
.cine-dc__plato {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: .92;
  font-weight: 500;
  color: var(--oro);
}
.cine-dc__datos {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  color: var(--color-muted-foreground);
  font-size: var(--text-lg);
}
.cine-dc__precio { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-foreground); }
.cine-dc__progreso {
  position: absolute; z-index: 2; left: clamp(1.25rem, 6vw, 5rem); right: clamp(1.25rem, 6vw, 5rem); bottom: 2rem;
  height: 1px; background: var(--color-border);
}
.cine-dc__progreso span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); }

/* ---------- Arma tu torre ---------- */
.torre__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.torre__escena {
  position: relative;
  min-height: clamp(30rem, 70vh, 44rem);
  display: grid; place-items: center;
}
.torre__numero {
  position: absolute; top: -.18em; right: 0; z-index: 2; pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 20rem);
  line-height: 1;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(211, 168, 87, .45);
  user-select: none;
}
.torre__pila {
  position: relative; z-index: 1;
  width: min(100%, 26rem);
  display: flex; flex-direction: column; align-items: center;
  --sep: -15%;   /* despiezada: cada capa flota apenas encima de la otra */
}
.torre__capa {
  position: relative;
  display: block; width: 54%; height: auto;
  margin-top: var(--sep);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.55));
  transition: margin-top var(--dur-lenta) var(--ease-suave), opacity var(--dur-lenta) var(--ease-suave), transform var(--dur-lenta) var(--ease-suave);
}
.torre__capa:first-child { margin-top: 0; }
.torre__capa--base { width: 74%; }
.torre__capa--toque { width: 56%; }
.torre__capa--entra { opacity: 0; transform: translateY(-28px) scale(.96); }
/* Al terminar, las capas bajan y se juntan: la torre "se arma" */
.torre__pila.armada { --sep: -24%; }

.torre__pasos {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2);
}
.torre__pasos button {
  width: 100%; min-height: 44px;
  background: none; border: 0; border-top: 2px solid var(--color-border);
  color: var(--color-muted-foreground);
  font: 600 12px/1.35 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: left; padding: var(--space-3) 0 0; cursor: pointer;
  overflow-wrap: anywhere;
  transition: color var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave);
}
.torre__pasos button[aria-current="step"] { color: var(--oro); border-top-color: var(--oro); }
.torre__pasos button:hover { color: var(--color-foreground); }

.torre__opciones { border: 0; margin: var(--space-8) 0 0; padding: 0; min-width: 0; }
.torre__pregunta {
  font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug);
  color: var(--color-foreground); margin-bottom: var(--space-6); padding: 0;
}
.torre__lista { display: grid; gap: var(--space-3); }
.torre__opcion {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 76px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-card);
  cursor: pointer;
  transition: border-color var(--dur-media) var(--ease-suave), background var(--dur-media) var(--ease-suave);
}
.torre__opcion:hover { border-color: rgba(211,168,87,.6); }
.torre__opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.torre__opcion img { width: 64px; height: 52px; object-fit: contain; flex-shrink: 0; }
.torre__opcion-texto { display: grid; gap: 2px; flex: 1; }
.torre__opcion-nombre { font-weight: 600; color: var(--color-foreground); }
.torre__opcion-detalle { font-size: var(--text-sm); color: var(--color-muted-foreground); }
.torre__marca {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
}
.torre__opcion--varias .torre__marca { border-radius: 4px; }
.torre__opcion:has(input:checked) { border-color: var(--oro); background: var(--azul-medio); }
.torre__opcion:has(input:checked) .torre__marca { background: var(--oro); border-color: var(--oro); }
.torre__opcion:has(input:checked) .torre__marca::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #070C15; }
.torre__opcion:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 3px; }

.torre__nav { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }

.torre__resumen { margin-top: var(--space-8); }
.torre__resumen-lista { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-2); }
.torre__resumen-lista li { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); }
.torre__resumen-lista span { color: var(--color-muted-foreground); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.torre__resumen-lista b { font-weight: 600; text-align: right; }
.torre__nota { margin-top: var(--space-4); color: var(--color-muted-foreground); font-size: var(--text-sm); }

@media (max-width: 900px) {
  .torre__interior { grid-template-columns: 1fr; }
  .torre__escena { min-height: 24rem; order: -1; }
  .torre__numero { font-size: 8rem; }
  .torre__pila { width: min(100%, 22rem); }
}
@media (max-width: 600px) {
  .cine-dc__escenario::after { background: linear-gradient(0deg, rgba(7,12,21,.9) 0%, rgba(7,12,21,.4) 50%, transparent 75%); }
  .torre__pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .torre__pasos button { font-size: 11px; letter-spacing: .06em; }
}

/* Sin animación: la cinemática se vuelve una foto fija con su texto */
@media (prefers-reduced-motion: reduce) {
  .cine-dc { height: auto; }
  .cine-dc__escenario { position: relative; height: auto; min-height: 90svh; background: #000 url(../img/aguachile/d/030.webp) center/cover no-repeat; }
  .cine-dc__lienzo, .cine-dc__progreso { display: none; }
  .cine-dc__rotulo { position: relative; left: auto; bottom: auto; opacity: 1; transform: none; padding: 6rem clamp(1.25rem, 6vw, 5rem) 3rem; }
  .cine-dc__rotulo:not(:last-of-type) { display: none; }
  .torre__pila { --sep: .4rem !important; }
}