/* Alphyx v7 — presentación del ejemplo Tueste (app de cafetería) en el bloque Apps de la portada y en apps.html.
 * Se añade a styles.css/motion.css sin modificarlos. Prefijo at-. Las pantallas en miniatura usan la paleta
 * de Tueste (gris claro #f1f2ed, tinta #1e1a17, azul de sello #2941a3, escala de tueste) dentro de un
 * teléfono dibujado; lo que las rodea mantiene la identidad Alphyx (tipografía del sistema, azul #0068d9,
 * noche #080a0e). Las fotos (o sus marcadores «Foto pendiente») comparten las clases tu-media/tu-fill/tu-ph
 * del ejemplo, con estilo propio aquí y limitado a .at-phone. Movimiento en apps-tueste.js. */

.at-link { color: var(--light-blue); }
.night .at-link:focus-visible { outline-color: var(--light-blue); }
.at-hero .at-hero-link { background: transparent; color: var(--light-blue); border-color: var(--light-blue); }
.at-hero .at-hero-link:hover { background: #182536; }

/* ——— Teléfono dibujado ——— */
.at-phone { --at-w: 236px; position: relative; flex: none; width: var(--at-w); aspect-ratio: 9 / 19; padding: 7px; border-radius: 38px; background: #1e1a17; box-shadow: 0 0 0 1px #4a423b, 0 34px 60px -18px #000c; text-align: left; }
.at-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: #f1f2ed; color: #1e1a17; font: 11px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.at-phone .tu-media { position: relative; overflow: hidden; background: #d9dad1; }
.at-phone .tu-fill, .at-phone .tu-fill img { position: absolute; inset: 0; width: 100%; height: 100%; }
.at-phone .tu-fill img { object-fit: cover; }
.at-phone .tu-ph { background: radial-gradient(120% 90% at 28% 18%, #ffffff8c, transparent 58%), linear-gradient(160deg, #e3e3dc, #cfcfc6); }
.at-phone .tu-ph-note { position: absolute; left: 5px; bottom: 5px; padding: 1px 5px; border-radius: 4px; background: #f1f2edeb; font: 500 8px/1.4 ui-monospace, Consolas, monospace; color: #4d4843; }
.at-phone .tu-ico { width: 15px; height: 15px; }
.at-phone .tu-roast { display: flex; gap: 3px; }
.at-phone .tu-roast i { display: block; flex: 1; height: 6px; border-radius: 2px; background: #dcddd4; }
.at-phone .tu-roast i:nth-child(1) { background: #a8ad7e; } .at-phone .tu-roast i:nth-child(2) { background: #c9a15a; } .at-phone .tu-roast i:nth-child(3) { background: #a86a34; }
.at-phone .tu-roast i:nth-child(4) { background: #6b3f24; } .at-phone .tu-roast i:nth-child(5) { background: #2e1d14; }

/* Pantallas en miniatura */
.at-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 22px; }
.at-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 8px; }
.at-bar b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.at-bag { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e2e3da; }
.at-bag i { position: absolute; top: -3px; right: -4px; min-width: 13px; height: 13px; border-radius: 7px; background: #2941a3; color: #fff; font: 700 8px/13px ui-monospace, Consolas, monospace; font-style: normal; text-align: center; }
.at-chips { display: flex; gap: 4px; padding: 0 12px 8px; }
.at-chips span { padding: 3px 8px; border: 1px solid #c5c6bc; border-radius: 999px; font-weight: 600; font-size: 9px; }
.at-chips .on { background: #1e1a17; border-color: #1e1a17; color: #fff; }
.at-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px; }
.at-card { display: grid; gap: 1px; padding: 4px 4px 6px; border-radius: 11px; background: #fff; }
.at-card .at-photo { aspect-ratio: 1; border-radius: 8px; margin-bottom: 3px; }
.at-card b { font-size: 10px; font-weight: 650; }
.at-card small { font: 600 9px ui-monospace, Consolas, monospace; color: #58524c; }
.at-tabs { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 4px 9px; border-top: 1px solid #dadbd2; background: #f1f2ed; }
.at-tabs span { display: grid; justify-items: center; gap: 1px; font-size: 7.5px; font-weight: 600; color: #6a645d; }
.at-tabs .on { color: #1e1a17; }
.at-tabs .on .tu-ico { background: #dfe0d6; border-radius: 8px; width: 28px; padding: 0 6px; }
.at-dim { position: absolute; inset: 0; background: #1a140f6b; }
.at-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 14px 12px 14px; border-radius: 18px 18px 0 0; background: #f1f2ed; }
.at-grab { justify-self: center; width: 26px; height: 3px; margin: -8px 0 2px; border-radius: 2px; background: #b3b4aa; }
.at-sheet-photo { aspect-ratio: 16 / 10; border-radius: 11px; }
.at-sheet b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.at-opts { display: flex; gap: 4px; }
.at-opts span { padding: 4px 7px; border: 1px solid #c9cac0; border-radius: 8px; background: #fff; font-weight: 600; font-size: 9px; }
.at-opts .on { background: #e3e7f5; border-color: #2941a3; color: #2941a3; }
.at-add { display: block; padding: 8px; border-radius: 999px; background: #2941a3; color: #fff; font-weight: 700; font-size: 10px; text-align: center; }
.at-screen--cart .at-add { margin: 8px 12px 0; }
.at-ticket { position: relative; display: grid; gap: 2px; margin: 4px 16px 0; padding: 10px 12px 14px; background: #fffefb; font: 9px/1.45 ui-monospace, Consolas, monospace; box-shadow: 0 8px 14px -10px #2b221a80; }
.at-ticket::before { content: ""; position: absolute; left: -10px; right: -10px; top: -6px; height: 8px; border-radius: 5px; background: #1e1a17; }
.at-ticket small { color: #58524c; }
.at-ticket b { font-size: 20px; font-weight: 800; }
.at-stamp { position: absolute; right: 10px; top: 20px; padding: 1px 6px; border: 2px solid #2941a3; border-radius: 5px; color: #2941a3; font: 800 13px/1.1 ui-monospace, Consolas, monospace; font-style: normal; letter-spacing: .06em; transform: rotate(-9deg); opacity: .92; }
.at-progress { display: grid; gap: 6px; margin: 12px 12px 0; padding: 10px; border-radius: 12px; background: #fff; }
.at-steps { display: flex; justify-content: space-between; font-size: 8px; color: #58524c; }
.at-steps .on { color: #1e1a17; font-weight: 700; }
.at-state { display: grid; gap: 1px; margin: 8px 12px 0; padding: 9px 10px; border-radius: 12px; background: #fff; }
.at-state small { font-size: 8px; color: #58524c; }
.at-state b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.at-state span { font-size: 9px; color: #58524c; }
.at-screen--track .at-add { margin: 10px 12px 0; }
.at-lines { display: grid; gap: 5px; padding: 0 10px; }
.at-line { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; padding: 7px 8px; border-radius: 10px; background: #fff; }
.at-line b { font-size: 10px; } .at-line small { grid-column: 1; font-size: 8px; color: #58524c; }
.at-line em { grid-row: 1; grid-column: 2; font: 600 9px ui-monospace, Consolas, monospace; font-style: normal; }
.at-qty { grid-column: 1 / -1; display: inline-flex; gap: 8px; align-items: center; justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #f1f2ed; font: 700 9px ui-monospace, Consolas, monospace; }
.at-qty i { font-style: normal; }
.at-pick { display: grid; gap: 4px; margin: 8px 10px 0; }
.at-pick span { padding: 6px 8px; border: 1px solid #c9cac0; border-radius: 9px; background: #fff; font-size: 9px; }
.at-pick .on { border-color: #2941a3; }
.at-total { display: flex; justify-content: space-between; margin: 8px 12px 0; font-weight: 800; font-size: 12px; }
.at-total b { font-family: ui-monospace, Consolas, monospace; }

/* ——— Bloque Apps de la portada ——— */
.at-promo .at-promo-art { padding: 8px 0 0; }
.at-duo { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; padding: 6px 0 0; }
.at-duo .at-phone--back { --at-w: 210px; transform: translate(34px, -18px) rotate(-6deg); }
.at-duo .at-phone--front { --at-w: 222px; transform: translate(-34px, 16px) rotate(4deg); z-index: 1; }
.at-fly { position: absolute; z-index: 3; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #a86a34; box-shadow: 0 4px 10px #0007; opacity: 0; pointer-events: none; }
.at-promo .at-credits, .at-hero .at-credits { color: #b9bec8; }
.at-promo .at-credits a, .at-hero .at-credits a { color: var(--light-blue); }

/* ——— apps.html: hero con tres pantallas ——— */
.at-hero-art { margin-top: 48px; }
.at-trio { display: flex; justify-content: center; align-items: center; }
.at-trio .at-phone--left { --at-w: 214px; transform: translateX(46px) rotate(-5deg) scale(.94); }
.at-trio .at-phone--center { --at-w: 256px; z-index: 1; }
.at-trio .at-phone--right { --at-w: 214px; transform: translateX(-46px) rotate(5deg) scale(.94); }

/* ——— apps.html: recorrido «Pedir y recoger, pantalla a pantalla» ———
 * Sin JS o con movimiento reducido: cuatro teléfonos en fila con sus pasos. Con movimiento (.at-scene-live):
 * la sección mide varias pantallas, el contenido queda fijo (sticky) y el scroll nativo recorre las cuatro
 * pantallas dentro de un solo teléfono, reversible. */
.at-scene { background: #fff; padding: 110px 0 96px; }
.at-scene-head { text-align: center; }
.at-scene-head h2 { font-size: clamp(34px, 4.3vw, 58px); max-width: 820px; margin: 0 auto; }
.at-scene-head p:not(.eyebrow) { font-size: 19px; color: var(--muted); max-width: 620px; margin: 20px auto 0; }
.at-scene-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: min(1120px, calc(100% - 64px)); margin: 56px auto 0; }
.at-scene:not(.at-scene-live) .at-phone--scene { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: auto; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.at-scene:not(.at-scene-live) .at-scene-screens { display: contents; }
.at-scene:not(.at-scene-live) .at-scene-screen { position: relative; grid-row: 1; aspect-ratio: 9 / 19; max-width: 236px; width: 100%; justify-self: center; padding: 7px; border-radius: 38px; background: #1e1a17; box-shadow: 0 0 0 1px #4a423b, 0 30px 50px -20px #12263f66; }
.at-scene:not(.at-scene-live) .at-scene-screen > .at-screen { position: absolute; inset: 7px; border-radius: 31px; overflow: hidden; background: #f1f2ed; color: #1e1a17; font: 11px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.at-scene-steps { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 8px 0 0; padding: 0; }
.at-scene-steps li { font-size: 15px; line-height: 1.45; color: var(--muted); }
.at-scene-steps b { color: var(--ink); font-weight: 600; }
.at-scene-bar { display: block; height: 2px; margin-bottom: 14px; background: var(--line); overflow: hidden; }
.at-scene-bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.at-scene:not(.at-scene-live) .at-scene-bar span { transform: none; }
.at-scene-foot { margin-top: 64px; text-align: center; }
.at-scene-foot .actions { justify-content: center; }
.at-scene-foot .concept-label { margin-top: 18px; }
.at-scene-live { height: 380vh; min-height: 2600px; padding: 0; }
.at-scene-live .at-scene-pin { position: sticky; top: var(--at-nav-h, 64px); height: calc(100svh - var(--at-nav-h, 64px)); display: flex; flex-direction: column; justify-content: center; padding: 20px 0 16px; overflow: hidden; }
.at-scene-live .at-scene-head p:not(.eyebrow), .at-scene-live .at-scene-foot { display: none; }
.at-scene-live .at-scene-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.at-scene-live .at-scene-stage { flex: 1; min-height: 0; grid-template-columns: auto minmax(0, 360px); justify-content: center; align-items: center; gap: 40px 72px; margin-top: 24px; }
.at-scene-live .at-phone--scene { --at-w: auto; height: min(100%, 600px); aspect-ratio: 9 / 19; }
.at-scene-live .at-scene-screen { position: absolute; inset: 0; visibility: hidden; background: #f1f2ed; }
.at-scene-live .at-scene-screen.is-on { visibility: visible; }
.at-scene-live .at-scene-steps { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
.at-scene-live .at-scene-steps li { transition: color .25s ease; }
.at-scene-live .at-scene-steps li.is-active { color: var(--ink); }

/* ——— apps.html: #detalles ——— */
.at-notes { background: var(--soft); padding: 110px 0; }
.at-notes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; }
.at-notes h2 { font-size: clamp(32px, 3.6vw, 50px); max-width: 520px; }
.at-notes-list { margin: 0; border-top: 1px solid var(--line); }
.at-notes-list div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.at-notes-list dt { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.at-notes-list dd { margin: 0; font-size: 17px; color: var(--muted); }

/* Estados previos a la revelación: solo con JS, IntersectionObserver y movimiento permitido. */
.at-motion .at-pending .at-phone { opacity: 0; }

@media (max-width: 1100px) {
  .at-scene:not(.at-scene-live) .at-scene-stage, .at-scene:not(.at-scene-live) .at-phone--scene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-scene:not(.at-scene-live) .at-scene-screen { grid-row: auto; }
  .at-scene:not(.at-scene-live) .at-scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-notes-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Portada entre 761 y 900 px: el bloque Apps ocupa media columna (~366–430 px) y los dos teléfonos a tamaño de
 * escritorio se salían por el borde del bloque; se usan las proporciones de móvil. */
@media (min-width: 761px) and (max-width: 900px) {
  .at-duo .at-phone--back { --at-w: 176px; transform: translate(28px, -12px) rotate(-6deg); }
  .at-duo .at-phone--front { --at-w: 186px; transform: translate(-28px, 12px) rotate(4deg); }
  .at-duo .at-phone { padding: 5px; border-radius: 28px; }
  .at-duo .at-phone-screen { border-radius: 23px; font-size: 9px; }
  .at-duo .at-screen--track .at-state, .at-duo .at-screen--track .at-add { display: none; }
}
@media (max-width: 760px) {
  .at-duo .at-phone--back { --at-w: 164px; transform: translate(26px, -12px) rotate(-6deg); }
  .at-duo .at-phone--front { --at-w: 172px; transform: translate(-26px, 12px) rotate(4deg); }
  .at-trio .at-phone--left, .at-trio .at-phone--right { --at-w: 128px; }
  .at-trio .at-phone--left { transform: translateX(34px) rotate(-5deg) scale(.94); }
  .at-trio .at-phone--right { transform: translateX(-34px) rotate(5deg) scale(.94); }
  .at-trio .at-phone--center { --at-w: 176px; }
  .at-phone { padding: 5px; border-radius: 28px; }
  .at-phone-screen { border-radius: 23px; font-size: 9px; }
  /* Teléfonos pequeños: la tarjeta de estado y el botón no caben sin empujar las pestañas fuera de la pantalla. */
  .at-screen--track .at-state, .at-screen--track .at-add { display: none; }
  .at-hero-art { margin-top: 36px; }
  .at-scene { padding: 72px 0 64px; }
  .at-scene-stage { width: calc(100% - 40px); gap: 16px; }
  .at-scene-steps li { font-size: 14px; }
  .at-scene-bar { margin-bottom: 8px; }
  .at-scene-live .at-scene-pin { padding: 12px 0 10px; }
  .at-scene-live .at-scene-head .eyebrow { display: none; }
  .at-scene-live .at-scene-head h2 { font-size: 24px; padding: 0 16px; }
  .at-scene-live .at-scene-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; margin-top: 12px; }
  .at-scene-live .at-phone--scene { justify-self: center; height: 100%; max-height: 520px; }
  .at-scene-live .at-scene-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .at-scene-live .at-scene-steps li { font-size: 12px; line-height: 1.3; }
  .at-scene-live .at-scene-steps li .at-step-text { display: none; }
  .at-notes { padding: 72px 0; }
  .at-notes-list div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .at-duo .at-phone--back { --at-w: 148px; }
  .at-duo .at-phone--front { --at-w: 156px; }
  .at-scene:not(.at-scene-live) .at-scene-stage, .at-scene:not(.at-scene-live) .at-phone--scene { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .at-scene-steps li { transition: none !important; }
}

/* v13 (fluidez): la barra de tueste crece desde la izquierda. El origen se fija aquí y no en los fotogramas de la
   animación (un transform-origin en los fotogramas impide componerla y obliga a repintar en cada cuadro). Sin
   transformación estática, el origen no cambia nada en reposo. */
.at-phone .tu-roast i { transform-origin: left center; }