/* ═══════════════════════════════════════════════════════════════════
   El Secreto del Relojero · el movimiento (web/48, 07-11-2026)
   Lo que aprobó el cliente: solo transform y opacity; nada tapa textos ni
   botones; todo se para fuera de pantalla y con movimiento reducido; y nada
   gira sin motivo: el movimiento acompaña lo que hace la persona.
   El motor está en poblet-animaciones.js; poblet.js solo le avisa.
   Colores: los tokens de :root de poblet.css.
   ═══════════════════════════════════════════════════════════════════ */

/* Las agujas de #esfera giran con dos variables que cada <svg> anfitrión pasa a su
   <use> (las propiedades heredadas cruzan la sombra del <use>; los selectores no).
   Registradas como ángulo, para que se puedan animar con transición. */
@property --esfera-m { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --esfera-h { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  /* La hora que lleva dibujada #esfera (10:20): si el dibujo cambia, se cambia aquí. */
  --esfera-h0: 310deg;
  --esfera-m0: 120deg;
  /* El escape: un golpe seco con su rebotito. */
  --e-escape: cubic-bezier(0.3, 1.75, 0.55, 1);
  /* La ventanita de la fecha: gira y se asienta con un rebote pequeño. */
  --e-fecha: cubic-bezier(0.3, 1.32, 0.5, 1);
  /* El barrido de las agujas: arranca suave y llega con un pelo de rebote. */
  --e-barre: cubic-bezier(0.5, 0, 0.25, 1.12);
}

/* ─────────────── 1 y 2 · Las ruedas: dar cuerda y la página que da cuerda ───────────────
   Con el motor en marcha (html.ruedas-js), el giro lo lleva el JS: el CSS de .gira se calla. */
.ruedas-js .hero__rueda.gira,
.ruedas-js .trama__rueda.gira { animation: none; will-change: transform; }
.rueda--golpe { transition: transform var(--golpe, 170ms) var(--e-escape); }

/* ─────────────── 4 · Segundero de escape ─────────────── */
.esfera__minutos, .esfera__horas { transform-origin: 50px 50px; }
.esfera__minutos { rotate: var(--esfera-m); }
.esfera__horas { rotate: var(--esfera-h); }
.esfera-viva { transition: --esfera-m 210ms var(--e-escape); }

/* ─────────────── 5 · Líneas que se dibujan (una sola vez) ───────────────
   Los filetes crecen hacia fuera desde lo que separan. Mientras html lleva la clase
   «pendiente», esperan plegados; al entrar en pantalla se quita y se trazan. */
.trama__engranaje { align-items: center; gap: 14px; }
.trama__engranaje::before,
.trama__engranaje::after { content: ''; width: clamp(40px, 12vw, 72px); height: 1px; background: var(--oro-claro); opacity: 0.55; transition: transform 900ms var(--e-trazo); }
.trama__engranaje::before { transform-origin: 100% 50%; }
.trama__engranaje::after { transform-origin: 0 50%; }
.trama__engranaje svg { transition: transform 900ms var(--e-trazo), opacity 600ms var(--e-nivel), --esfera-m 210ms var(--e-escape); }
.traza-trama .trama__engranaje::before,
.traza-trama .trama__engranaje::after { transform: scaleX(0); }
.traza-trama .trama__engranaje svg { transform: rotate(-90deg); opacity: 0; }

.comida::before { transform-origin: 100% 50%; }
.comida::after { transform-origin: 0 50%; }
.comida::before, .comida::after { transition: transform 800ms var(--e-trazo); }
.traza-comida .comida::before,
.traza-comida .comida::after { transform: scaleX(0); }

/* ─────────────── 6 · La maquinaria avanza ───────────────
   Cada rueda rosa gira lo que le diga --giro (medio diente por empujón); la luz granate
   es una capa encima que se aviva en 450 ms, nunca de golpe. */
.maquina-js .bloque__num::before,
.maquina-js .bloque--hecho .bloque__num::before { transform: rotate(var(--giro, 0deg)); background: var(--rosa); transition: transform 340ms var(--e-escape); }
.maquina-js .bloque__num::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--granate);
  -webkit-mask: url("/poblet/ilustraciones/rueda-numeros.svg") center / contain no-repeat;
          mask: url("/poblet/ilustraciones/rueda-numeros.svg") center / contain no-repeat;
  opacity: 0; transform: rotate(var(--giro, 0deg));
  transition: opacity var(--d-luz) var(--e-nivel), transform 340ms var(--e-escape); }
.maquina-js .bloque--hecho .bloque__num::after { opacity: 1; }

/* ─────────────── 7 · Horas con su esfera ───────────────
   Un relojito en la esquina de cada hora (a la izquierda; el punto va a la derecha).
   No ocupa sitio en la rejilla del botón: ni mueve el texto ni cambia su tamaño. */
.relojito { position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: 0.5; pointer-events: none; transition: opacity var(--d-luz) var(--e-nivel); }
.relojito circle { stroke-width: 1.6; }
.relojito__h, .relojito__m { transform-origin: 12px 12px; transition: transform 760ms var(--e-barre); }
.relojito__h { stroke-width: 2.1; }
.chip[aria-pressed='true'] .relojito { opacity: 0.95; }
.chip[aria-pressed='true'] .relojito__h { transform: rotate(var(--h, 0deg)); }
.chip[aria-pressed='true'] .relojito__m { transform: rotate(calc(var(--m, 0deg) + 360deg)); }
.relojito--desde .relojito__h,
.relojito--desde .relojito__m { transform: none !important; transition: none !important; }

/* ─────────────── 8 · Contador mecánico ─────────────── */
.cuenta { display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden; vertical-align: -0.2em; }
.cuenta__tira { display: flex; flex-direction: column; }
.cuenta__tira > span { display: block; height: 1.2em; }
.cuenta__tira--sube { animation: cuenta-sube 300ms var(--e-m3) both; }
.cuenta__tira--baja { animation: cuenta-baja 300ms var(--e-m3) both; }
@keyframes cuenta-sube { 0% { transform: translateY(0); } 70% { transform: translateY(-1.3em); } 86% { transform: translateY(-1.16em); } 100% { transform: translateY(-1.2em); } }
@keyframes cuenta-baja { 0% { transform: translateY(-1.2em); } 70% { transform: translateY(0.1em); } 86% { transform: translateY(-0.04em); } 100% { transform: translateY(0); } }
/* El «+» que no cabe: el número hace clic sin cambiar. */
.contador__num.cuenta--tope { animation: cuenta-tope 220ms var(--e-fuerte); }
@keyframes cuenta-tope { 35% { transform: translateY(-2px); } 70% { transform: translateY(1px); } }

/* ─────────────── 9 · El total, como la ventanita de la fecha ───────────────
   Cada cifra es un disco: gira, se pasa un pelo y se asienta; las de la derecha, primero. */
.rollo__tira { transition: transform 560ms var(--e-fecha); }
.rollo__c:nth-last-child(2) .rollo__tira { transition-delay: 30ms; }
.rollo__c:nth-last-child(4) .rollo__tira { transition-delay: 60ms; }
.rollo__c:nth-last-child(5) .rollo__tira { transition-delay: 90ms; }
.rollo__c:nth-last-child(6) .rollo__tira { transition-delay: 120ms; }
.rollo__c:nth-last-child(7) .rollo__tira { transition-delay: 150ms; }
.rollo--quieto .rollo__tira { transition: none; }

/* ─────────────── 10 · El volante en vez de la rueda de carga ───────────────
   Un volante de reloj que oscila a un lado y a otro, con su espiral que respira.
   Pintado con máscara en currentColor: papel sobre el granate del botón, granate sobre el papel. */
.boton__giro { position: relative; display: inline-block; flex: none; border: 0 !important; border-radius: 0; animation: none; color: var(--papel-hoja); }
.cargando__txt .boton__giro, .espera .boton__giro { color: var(--granate); }
.boton__giro::before, .boton__giro::after { content: ''; position: absolute; inset: 0; background: currentColor; }
.boton__giro::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.0 13.6L16.6 13.6L17.3 13.7L17.9 14.1L18.4 14.6L18.7 15.2L18.9 15.9L19.0 16.7L18.8 17.4L18.4 18.1L17.8 18.7L17.1 19.2L16.3 19.5L15.4 19.5L14.5 19.3L13.6 18.9L12.9 18.3L12.3 17.4L12.0 16.5L11.9 15.4L12.1 14.4L12.6 13.4L13.3 12.5L14.2 11.9L15.3 11.5L16.5 11.4L17.6 11.5L18.8 12.0L19.8 12.8L20.5 13.8L21.0 15.0L21.2 16.3L21.0 17.6L20.5 18.9L19.7 20.0L18.6 20.9L17.3 21.5L15.9 21.8L14.4 21.6L13.0 21.1L11.7 20.3L10.7 19.1L10.0 17.7L9.7 16.1L9.8 14.5L10.3 12.9L11.2 11.5L12.4 10.4L13.9 9.6L15.6 9.2L17.4 9.2L19.1 9.7L20.6 10.6L21.9 11.9L22.8 13.5L23.3 15.3L23.4 17.2L22.9 19.0L22.0 20.7L20.7 22.2L19.0 23.2L17.1 23.9L15.1 24.0L13.0 23.6L11.2 22.6' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.0 13.6L16.6 13.6L17.3 13.7L17.9 14.1L18.4 14.6L18.7 15.2L18.9 15.9L19.0 16.7L18.8 17.4L18.4 18.1L17.8 18.7L17.1 19.2L16.3 19.5L15.4 19.5L14.5 19.3L13.6 18.9L12.9 18.3L12.3 17.4L12.0 16.5L11.9 15.4L12.1 14.4L12.6 13.4L13.3 12.5L14.2 11.9L15.3 11.5L16.5 11.4L17.6 11.5L18.8 12.0L19.8 12.8L20.5 13.8L21.0 15.0L21.2 16.3L21.0 17.6L20.5 18.9L19.7 20.0L18.6 20.9L17.3 21.5L15.9 21.8L14.4 21.6L13.0 21.1L11.7 20.3L10.7 19.1L10.0 17.7L9.7 16.1L9.8 14.5L10.3 12.9L11.2 11.5L12.4 10.4L13.9 9.6L15.6 9.2L17.4 9.2L19.1 9.7L20.6 10.6L21.9 11.9L22.8 13.5L23.3 15.3L23.4 17.2L22.9 19.0L22.0 20.7L20.7 22.2L19.0 23.2L17.1 23.9L15.1 24.0L13.0 23.6L11.2 22.6' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.8;
  animation: espiral-respira 620ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.boton__giro::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='16' cy='16' r='13' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='16' r='10.6' stroke-width='0.9'/%3E%3Cpath d='M16 12.8V4.4M18.77 17.6L26.05 21.8M13.23 17.6L5.95 21.8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='16' cy='16' r='13' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='16' r='10.6' stroke-width='0.9'/%3E%3Cpath d='M16 12.8V4.4M18.77 17.6L26.05 21.8M13.23 17.6L5.95 21.8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: volante-oscila 620ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes volante-oscila { from { transform: rotate(-150deg); } to { transform: rotate(150deg); } }
@keyframes espiral-respira { from { transform: rotate(-32deg) scale(0.96); } to { transform: rotate(32deg) scale(1.02); } }

/* ─────────────── 11 · El botón como aguja ───────────────
   Mientras se cobra, una aguja fina con su estela recorre el botón de lado a lado. */
.boton--pagando { overflow: hidden; }
.boton--pagando::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(100% - 56px), color-mix(in oklab, var(--papel-hoja) 9%, transparent) calc(100% - 1.5px), color-mix(in oklab, var(--papel-hoja) 62%, transparent) calc(100% - 1.5px));
  transform: translateX(-100%);
  animation: aguja-barre 1500ms linear infinite;
}
@keyframes aguja-barre { to { transform: translateX(0); } }

/* ─────────────── 12 · La campanada de las doce ───────────────
   En «gràcies»: las dos ruedas dan una vuelta (la de escape, tres: 3 a 1, como sus dientes)
   y se paran con un rebote; la esfera marca las doce con un destello dorado breve;
   después sube la entrada y se estampa el lacre. Va en la esquina libre, junto al check. */
.gracias { position: relative; }
.campanada { position: absolute; top: -4px; right: 0; width: 112px; height: 72px; overflow: hidden; pointer-events: none; color: var(--oro); }
.campanada svg { position: absolute; overflow: visible; }
.campanada__rueda { transform-origin: 50% 50%; transform-box: border-box; }
.campanada__rueda--a { width: 64px; height: 64px; left: 0; top: 4px; opacity: 0.38; animation: campanada-a 1000ms var(--e-m3) both; }
.campanada__rueda--b { width: 34px; height: 34px; left: 40px; top: 36px; opacity: 0.45; animation: campanada-b 1000ms var(--e-m3) both; }
.campanada__esfera { width: 52px; height: 52px; right: 8px; top: 10px; color: var(--oro);
  --esfera-h: calc(360deg - var(--esfera-h0)); --esfera-m: calc(720deg - var(--esfera-m0));
  animation: campanada-doce 950ms var(--e-barre) both; }
.campanada__destello { position: absolute; right: 0; top: 2px; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--oro-claro) 95%, transparent), color-mix(in oklab, var(--oro-claro) 0%, transparent)); opacity: 0; animation: campanada-destello 620ms var(--e-fuerte) 900ms both; }
@keyframes campanada-a { 0% { transform: rotate(0); } 80% { transform: rotate(372deg); } 91% { transform: rotate(357deg); } 100% { transform: rotate(360deg); } }
@keyframes campanada-b { 0% { transform: rotate(0); } 80% { transform: rotate(-1116deg); } 91% { transform: rotate(-1071deg); } 100% { transform: rotate(-1080deg); } }
@keyframes campanada-doce { from { --esfera-h: 0deg; --esfera-m: 0deg; } }
@keyframes campanada-destello { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.25); } }
/* La entrada espera a la campanada: sube cuando suenan las doce y el lacre se estampa después. */
.gracias #gracias-ticket .ticket.estampa { --retraso: 950ms !important; }

/* ─────────────── 13 · Cuenta atrás ─────────────── */
.cuenta-atras { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 6px; margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--tinta-suave); text-align: center; }
.cuenta-atras__frase { display: inline; }
.hojas { display: inline-flex; gap: 2px; margin-inline: 0.12em; vertical-align: middle; perspective: 140px; }
.hojas__c { --alto: 1.55em; position: relative; display: inline-block; width: 1.05em; height: var(--alto); border-radius: 5px; background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete-fuerte), var(--som-plano); color: var(--tinta); font-family: var(--f-ui); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: center; }
.hojas__mitad { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; line-height: var(--alto); }
.hojas__mitad--arriba { top: 0; border-radius: 5px 5px 0 0; }
.hojas__mitad--abajo { bottom: 0; border-radius: 0 0 5px 5px; }
.hojas__mitad--abajo > span { display: block; margin-top: calc(var(--alto) / -2); }
.hojas__c::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: var(--filete); opacity: 0.9; }
.hojas__cae, .hojas__sube { background: var(--papel-hoja); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hojas__cae { transform-origin: 50% 100%; animation: hoja-cae 150ms ease-in both; }
.hojas__sube { transform-origin: 50% 0; animation: hoja-sube 150ms ease-out 150ms both; }
@keyframes hoja-cae { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes hoja-sube { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@media (min-width: 960px) {
  .hero__accion { flex-wrap: wrap; }
  .cuenta-atras { margin-top: 0; justify-content: flex-start; }
}

/* ─────────────── Movimiento reducido: nada se mueve; todo, en su estado final ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .rueda--golpe, .esfera-viva, .relojito, .relojito__h, .relojito__m,
  .trama__engranaje::before, .trama__engranaje::after, .trama__engranaje svg,
  .comida::before, .comida::after, .rollo__tira,
  .maquina-js .bloque__num::before, .maquina-js .bloque--hecho .bloque__num::before { transition: none !important; }
  .maquina-js .bloque__num::after { transition: opacity var(--d-luz) var(--e-nivel) !important; }
  .boton__giro::before, .boton__giro::after, .boton--pagando::after,
  .campanada__rueda, .campanada__esfera, .campanada__destello,
  .cuenta__tira--sube, .cuenta__tira--baja, .contador__num.cuenta--tope,
  .hojas__cae, .hojas__sube { animation: none !important; }
  .boton--pagando::after, .campanada__destello { display: none; }
  .cuenta__tira--sube { transform: translateY(-1.2em); }
}

/* ─────────────── Las ilustraciones de las fichas, vivas (07-11-2026, cliente: «anima las ilustraciones») ───────────────
   Solo transform sobre piezas que ya existen (las agrupa ilustra.mjs con su eje): ruedas que giran,
   agujas que avanzan con su tic, el marcador del mapa que bota y el barquito que se mece.
   Viven dentro de <symbol>: la pausa llega heredada por --ilu-pausa desde cada <svg> de ficha,
   que el IntersectionObserver del Blade marca como quieto fuera de pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .ilu-anima { transform-box: view-box; animation-play-state: var(--ilu-pausa, running); animation-iteration-count: infinite; }
  .ilu-rueda { animation-name: ilu-gira; animation-duration: 36s; animation-timing-function: linear; }
  .ilu-pinon { animation-name: ilu-gira-atras; animation-duration: 14s; animation-timing-function: linear; }
  .ilu-rueda-viva { animation-name: ilu-gira; animation-duration: 24s; animation-timing-function: linear; }
  .ilu-segundero { animation-name: ilu-gira; animation-duration: 60s; animation-timing-function: steps(60); }
  .ilu-minutero { animation-name: ilu-gira; animation-duration: 90s; animation-timing-function: steps(180); }
  .ilu-horaria { animation-name: ilu-gira; animation-duration: 1080s; animation-timing-function: linear; }
  .ilu-marcador { animation-name: ilu-bota; animation-duration: 1.8s; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); animation-direction: alternate; }
  .ilu-barquito { animation-name: ilu-mece; animation-duration: 3.2s; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); animation-direction: alternate; }
}
.dato-ficha__dibujo.ilu-quieta { --ilu-pausa: paused; }
@keyframes ilu-gira { to { transform: rotate(360deg); } }
@keyframes ilu-gira-atras { to { transform: rotate(-360deg); } }
@keyframes ilu-bota { from { transform: translateY(0); } to { transform: translateY(-2.4px); } }
@keyframes ilu-mece { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }