/* Aldia — lo que es de esta página: el tique de la entrada, el día con la caja sumando al costado,
   el paso a paso de una venta, lo aprendido con Al Toque y el bloque «¿Querés verlo andando?».
   Misma piel que aizurg.com: lila = acción o te toca a vos · verde = hecho. El resto, en producto.css.
   Los estados apagados ([data-on], [data-e]) los pone js/aldia.js: sin JS se lee todo, en su estado final. */

.sec__bajada{margin-top:22px;max-width:60ch}

/* ── la pausa: la simulación de la entrada no termina nunca (aparece sólo con JS) ── */
.pausa{position:absolute;top:-12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:3px 8px;border-radius:3px;background:var(--carbon);border:var(--borde) solid var(--linea);font:600 10.5px/1.3 var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--lila);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .18s,background-color .18s}
.pausa[hidden]{display:none}
.pausa::before{content:"";width:7px;height:8px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.pausa[data-pausada]::before{width:0;height:0;border-right:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.pausa::after{content:"";position:absolute;inset:-12px -6px}
@media (hover:hover){.pausa:hover{border-color:var(--lila);background:var(--velo)}}

/* ══ ENTRADA: el tique sale por la ranura de la impresora y al lado se suma el día ══ */
.tq{position:relative;padding:28px 16px 16px;border:var(--borde) solid var(--linea);border-radius:6px;background:var(--carbon)}
.tq__tab{left:12px}
.tq__vivo{display:block;width:6px;height:6px;border-radius:50%;background:var(--verde);animation:late 1.8s ease-in-out infinite}
.tq__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,210px);gap:18px;align-items:start}

.tq__impresora{position:relative;overflow:hidden;padding-top:3px}
/* la boca de la impresora: el papel cuelga de acá */
.tq__ranura{position:absolute;z-index:2;top:0;left:0;right:0;height:7px;border:var(--borde) solid var(--lila);border-radius:3px;background:var(--carbon)}
.tq__papel{position:relative;min-height:362px;margin:0 16px;padding:20px 18px 18px;border:var(--borde) solid var(--linea-suave);border-top:0;border-radius:0 0 3px 3px;background:var(--carbon);font-size:13.5px}
.tq__cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 11px/1.3 var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--lila)}
.tq__cab span{letter-spacing:.04em;color:var(--suave)}
.tq__neg{margin-top:4px;padding-bottom:12px;border-bottom:var(--borde) dashed var(--linea-suave);font-size:12px;color:var(--tenue)}
.tq__items{display:grid;gap:2px;min-height:96px;padding:10px 0;align-content:start}
.tq__items li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;overflow:hidden}
.tq__items span{min-width:0;color:var(--suave)}
.tq__items b{flex:none;font-weight:600}
.tq__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;border-top:var(--borde) dashed var(--linea-suave);font-size:15px;font-weight:600}
.tq__total b{font-size:22px;letter-spacing:-.02em}
.tq__iva{display:flex;justify-content:space-between;gap:12px;margin-top:4px;font-size:12px;color:var(--tenue)}
.tq__pago{display:flex;justify-content:space-between;gap:12px;margin-top:12px;min-height:1.5em}
.tq__pago span{color:var(--suave)}
.tq__sello{display:inline-flex;margin-top:16px;padding:4px 9px;border:var(--borde) solid var(--verde);border-radius:3px;font:600 10.5px/1.3 var(--fuente);letter-spacing:.1em;text-transform:uppercase;color:var(--verde);transform:rotate(-4deg);transform-origin:0 50%}

.tq__dia{padding:6px 0 0 18px;border-left:var(--borde) solid var(--linea-suave)}
.tq__dia .rotulo{font-size:10px;color:var(--suave)}
.tq__suma{margin:8px 0 0}
.tq__suma div{padding:11px 0;border-bottom:1px solid var(--linea-suave)}
.tq__suma dt{font-size:12.5px;color:var(--suave)}
.tq__suma dd{margin:2px 0 0;font:700 21px/1.15 var(--fuente);letter-spacing:-.02em;transition:color .25s}
.tq__suma div[data-flash] dd{color:var(--lila)}

/* ══ UN DÍA ENTERO: los momentos a la izquierda, la caja de hoy fija a la derecha ══ */
.jornada{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:start;margin-top:clamp(52px,5.5vw,80px)}
.momentos{position:relative}
/* el hilo: una línea punteada que se pinta de verde a medida que pasa el día (--avance, de 0 a 1) */
.momentos__hilo{position:absolute;left:105px;top:14px;bottom:0;width:1.5px;background:repeating-linear-gradient(180deg,var(--linea) 0 5px,transparent 5px 10px)}
.momentos__hilo::after{content:"";position:absolute;inset:0;background:var(--verde);transform:scaleY(var(--avance,1));transform-origin:50% 0}
.momento{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);column-gap:54px;padding-bottom:clamp(44px,4.4vw,64px)}
.momento:last-child{padding-bottom:0}
/* debajo de la última marca el hilo no sigue: se tapa con el fondo */
.momento:last-child::after{content:"";position:absolute;z-index:1;left:99px;top:21px;bottom:0;width:13px;background:var(--carbon)}
.momento::before{content:"";position:absolute;z-index:1;left:100px;top:9px;width:11px;height:11px;border:var(--borde) solid var(--lila);border-radius:2px;background:var(--carbon);transition:background-color .25s,border-color .25s}
.momento__cuando{padding-top:1px;text-align:right;font:700 clamp(20px,1.7vw,24px)/1.1 var(--fuente);letter-spacing:-.02em;transition:color .25s}
.momento__texto .h3{font-size:clamp(22px,2vw,28px);text-wrap:balance;transition:color .25s}
.momento__texto .h3 + p{margin-top:8px;max-width:48ch;font-size:16px;color:var(--suave);transition:color .25s}
.momento__aldia{margin-top:12px;max-width:52ch;padding-left:12px;border-left:var(--borde) solid var(--lila);font-size:15.5px;line-height:1.5;transition:color .25s,border-color .25s}
.momento__aldia b{font-weight:600;color:var(--lila)}
.dato{display:inline-flex;margin-top:14px;padding:4px 9px;border:var(--borde) solid var(--linea);border-radius:3px;font:600 11px/1.3 var(--fuente);letter-spacing:.06em;text-transform:uppercase;color:var(--suave);transition:color .25s,border-color .25s}
/* los estados los pone el script: 0 todavía no pasó · 1 está pasando · 2 ya pasó */
.momento[data-on="0"] .momento__cuando,.momento[data-on="0"] .h3{color:var(--suave)}
.momento[data-on="0"] .momento__texto p{color:var(--tenue)}
.momento[data-on="0"] .momento__aldia{border-color:var(--linea-suave)}
.momento[data-on="0"] .momento__aldia b{color:var(--suave)}
.momento[data-on="0"] .dato{border-color:var(--linea-suave);color:var(--tenue)}
.momento[data-on="1"]::before{background:var(--lila)}
.momento[data-on="1"] .dato{border-color:var(--lila);color:var(--texto)}
.momento[data-on="2"]::before{background:var(--verde);border-color:var(--verde)}
.momento[data-on="2"] .dato{border-color:var(--verde);color:var(--verde)}

/* la caja de hoy: queda fija mientras pasa el día */
.cajon{position:sticky;top:calc(var(--nav-alto) + 28px);padding:30px 22px 20px;border:var(--borde) solid var(--linea);border-radius:6px;background:var(--carbon)}
.cajon__tab{left:14px}
.cajon__hora{display:flex;align-items:baseline;gap:10px;font:600 11px/1.3 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.cajon__hora b{font:700 28px/1 var(--fuente);letter-spacing:-.02em;text-transform:none;color:var(--texto)}
.cajon__filas{margin:14px 0 0}
.cajon__filas div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--linea-suave)}
.cajon__filas dt{font-size:14.5px;color:var(--suave)}
.cajon__filas dd{margin:0;font-weight:600;font-size:16px;white-space:nowrap}
.cajon__filas .cajon__total{border-bottom:var(--borde) solid var(--linea)}
.cajon__total dt{font-weight:600;color:var(--texto)}
.cajon__total dd{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--lila)}
.cajon__aparte dt,.cajon__aparte dd{font-size:13.5px;color:var(--suave)}
.cajon__aparte dd{font-weight:500}
.cajon__cierre{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:16px;padding:9px 12px;border:var(--borde) solid var(--verde);border-radius:var(--radio);font-size:14px;transition:opacity .3s,border-color .3s}
.cajon__cierre span{color:var(--suave)}
.cajon__cierre b{font-weight:600;color:var(--verde)}
.cajon__mes{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--verde);transition:opacity .3s}
.cajon__mes::before{content:"";flex:none;width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.cajon [data-e="espera"]{opacity:.32;border-color:var(--linea-suave)}

/* ══ PASO A PASO: cuatro marcos en fila; los tuyos llevan la pestaña llena ══ */
.flujo{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(52px,5.5vw,76px);counter-reset:paso}
.flujo__paso{position:relative;padding:34px 20px 22px;border:var(--borde) solid var(--linea);border-radius:var(--radio);background:var(--carbon)}
.flujo__paso[data-quien="vos"]{border-color:var(--lila)}
/* la flecha que va de un paso al siguiente */
.flujo__paso + .flujo__paso::before{content:"";position:absolute;left:-16px;top:50%;width:0;height:0;margin-top:-5px;border-left:8px solid var(--lila);border-top:5px solid transparent;border-bottom:5px solid transparent}
.flujo__quien{position:absolute;top:-12px;left:12px;display:inline-flex;padding:3px 8px;border-radius:3px;border:var(--borde) solid var(--linea);background:var(--carbon);font:600 10.5px/1.3 var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--suave);white-space:nowrap}
.flujo__quien::before{counter-increment:paso;content:counter(paso) "\00a0·\00a0"}
.flujo__paso[data-quien="vos"] .flujo__quien{border-color:var(--lila);background:var(--lila);color:var(--carbon)}
.flujo__paso .h3{font-size:clamp(21px,1.8vw,24px);text-wrap:balance}
.flujo__paso p{margin-top:10px;font-size:15px;color:var(--suave)}

/* ══ ARMADO CON AL TOQUE ══ */
.aprendido{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(48px,5vw,68px)}
.aprendido__caso{position:relative;padding:38px 28px 28px;border:var(--borde) solid var(--linea);border-radius:6px;background:var(--carbon)}
.aprendido__caso > .pestana{left:16px}
.aprendido__caso .h3{max-width:22ch;font-size:clamp(23px,2.1vw,30px);text-wrap:balance}
.aprendido__caso p:not(.pestana){margin-top:14px;max-width:52ch;font-size:16px;color:var(--suave)}

/* ══ ¿QUERÉS VERLO ANDANDO? ══ */
.verlo-sec{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.verlo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 56px;align-items:center;padding:clamp(44px,5vw,68px) clamp(24px,4vw,60px);border:var(--borde) solid var(--lila);border-radius:6px;background:var(--carbon)}
.verlo > .pestana{left:20px;border-color:var(--lila)}
.verlo .bajada{margin-top:18px;max-width:50ch}
.verlo__btn{min-height:64px;padding:0 30px;font-size:17px}

/* ── responsive ── */
@media (max-width:1199px){
  .tq{max-width:760px}
  .flujo{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .flujo__paso:nth-child(odd)::before{display:none}
}
@media (max-width:899px){
  .jornada{grid-template-columns:minmax(0,1fr)}
  .cajon{position:relative;top:auto;max-width:520px}
  .aprendido{grid-template-columns:minmax(0,1fr)}
  .verlo{grid-template-columns:minmax(0,1fr)}
  .verlo__btn{justify-self:start}
}
@media (max-width:599px){
  .tq{padding:28px 10px 10px}
  .tq__cuerpo{grid-template-columns:minmax(0,1fr)}
  .tq__papel{min-height:0;margin:0 8px;padding:18px 14px 16px}
  .tq__items{min-height:92px}
  .tq__dia{padding:12px 4px 0;border-left:0;border-top:var(--borde) solid var(--linea-suave)}
  .tq__suma{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-top:4px}
  .tq__suma dd{font-size:18px}
  .momentos__hilo{left:5px;top:10px}
  .momento:last-child::after{left:-1px;top:16px}
  .momento{grid-template-columns:minmax(0,1fr);padding-left:32px}
  .momento::before{left:0;top:4px}
  .momento__cuando{text-align:left;font-size:17px;margin-bottom:8px;color:var(--lila)}
  .flujo{grid-template-columns:minmax(0,1fr);gap:30px}
  .flujo__paso + .flujo__paso::before{display:none}
  .verlo__btn{justify-self:stretch;white-space:normal;text-align:center}
}