/* lizardbot — kit compartido por la portada y /temas/:
   marcos de dispositivo (navegador + teléfono), tienda de ejemplo dibujada y ticket de pedido. */

/* ===== MARCOS ===== */
.kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.link-u{font-weight:600;font-size:15px;border-bottom:1.5px solid currentColor;padding-bottom:2px;white-space:nowrap;transition:color .25s}
.link-u:hover{color:var(--accent)}
.frame-b{position:relative;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px -28px rgba(11,19,38,.45),0 0 0 1px #CFD7E3}
.sec-dark .frame-b,.hero .frame-b,.on-dark .frame-b{box-shadow:0 40px 80px -30px rgba(3,8,20,.8),0 0 0 1px rgba(255,255,255,.14)}
.fb-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#E9EDF3;border-bottom:1px solid #D5DCE6}
.fb-bar i{width:8px;height:8px;border-radius:50%;background:#C3CBD8;flex:none}
.fb-url{flex:1;max-width:60%;margin:0 auto;height:18px;border-radius:9px;background:#fff;font-family:var(--f-mono);font-size:9.5px;color:#5B6780;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;transform:translateX(-17px)}
.fb-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#EEF2F7}
.fb-screen picture{display:block;width:100%;height:100%}
.fb-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* captura de página completa: se desplaza al pasar el cursor */
.frame-b.scrolls .fb-screen img{transition:object-position 7s cubic-bezier(.3,0,.3,1)}
.frame-b.scrolls:hover .fb-screen img,a:focus-visible .frame-b.scrolls .fb-screen img{object-position:bottom}
.frame-p{position:relative;border-radius:13% / 6.2%;background:#0B0F18;padding:2.6%;
  box-shadow:0 36px 60px -24px rgba(3,8,20,.8),0 0 0 1.5px #2A3550}
.frame-p::after{content:"";position:absolute;left:50%;top:3.2%;width:30%;height:2.6%;border-radius:20px;background:#0B0F18;transform:translateX(-50%);z-index:2}
.fp-screen{position:relative;aspect-ratio:390/844;border-radius:11.5% / 5.4%;overflow:hidden;background:#EEF2F7}
.fp-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.shot.on{opacity:1}

/* ===== TIENDA DE EJEMPLO (boceto) =====
   Se dibuja dentro de .fb-screen o .fp-screen y escala con el marco (unidades cqw).
   Colores por tema: --b fondo · --k tinta · --a acento · --m tono suave. */
.store{--b:#F6F2EC;--k:#1C1814;--a:#B5532F;--m:#E6DDD0;container-type:inline-size;position:absolute;inset:0;overflow:hidden;
  background:var(--b);color:var(--k);font-family:var(--f-body,'Plus Jakarta Sans',system-ui,sans-serif);line-height:1.2;text-align:left}
.store-in{transition:transform 5s cubic-bezier(.3,0,.3,1)}
.frame-b.scrolls:hover .store-in,a:focus-visible .frame-b.scrolls .store-in{transform:translateY(calc(62.5cqw - 100%))}
.store-in.auto{animation:storeScroll 16s ease-in-out infinite alternate}
@keyframes storeScroll{0%,14%{transform:translateY(0)}86%,100%{transform:translateY(calc(62.5cqw - 100%))}}
.st-nav{display:flex;justify-content:space-between;align-items:center;padding:2.5cqw 4cqw;border-bottom:.2cqw solid var(--m)}
.st-logo{font-weight:800;font-size:2.5cqw;letter-spacing:.12em;white-space:nowrap}
.st-links{display:flex;gap:2.6cqw;font-size:1.85cqw;font-weight:500;white-space:nowrap}
.st-hero{margin:2.6cqw 2.6cqw 0;border-radius:.8cqw;background:var(--m);padding:4.6cqw 4.4cqw;display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.st-hero small{display:block;font-family:var(--f-mono,monospace);font-size:1.5cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--a)}
.st-hero h5{font-weight:800;font-size:5.2cqw;line-height:1;letter-spacing:-.03em;margin:1.4cqw 0 2.6cqw;font-family:inherit}
.st-btn{display:inline-block;padding:1.4cqw 2.8cqw;background:var(--k);color:var(--b);font-size:1.85cqw;font-weight:700;border-radius:.4cqw;white-space:nowrap}
.st-jars{display:flex;align-items:flex-end;gap:2.2cqw;padding-top:2.6cqw;flex:none}
.jar{position:relative;width:11cqw;height:18cqw;flex:none;border-radius:1.4cqw 1.4cqw 2cqw 2cqw;
  background:linear-gradient(100deg,color-mix(in srgb,var(--a) 82%,#fff),var(--a) 55%,color-mix(in srgb,var(--a) 78%,#000))}
.jar::before{content:"";position:absolute;left:18%;right:18%;top:-2.2cqw;height:2.2cqw;background:var(--k);border-radius:.6cqw .6cqw 0 0}
.jar::after{content:"";position:absolute;left:14%;right:14%;top:34%;height:36%;background:var(--b);opacity:.94;border-radius:.3cqw}
.jar.s{width:13cqw;height:14cqw}
.jar.t{width:9cqw;height:20cqw}
.st-label{padding:3.4cqw 2.6cqw 1.8cqw;font-family:var(--f-mono,monospace);font-size:1.5cqw;letter-spacing:.1em;text-transform:uppercase}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:0 2.6cqw}
.st-card .im{aspect-ratio:1/.78;border-radius:.8cqw;background:color-mix(in srgb,var(--m) 60%,var(--b));display:grid;place-items:end center;padding-bottom:2.4cqw}
.st-card .im .jar{transform:scale(.62);transform-origin:bottom center}
.st-card b{display:block;font-size:1.95cqw;font-weight:600;margin-top:1.4cqw;white-space:nowrap}
.st-card span{font-family:var(--f-mono,monospace);font-size:1.6cqw;opacity:.62}
.st-band{margin:3.4cqw 2.6cqw 0;padding:4cqw 4.4cqw;border-radius:.8cqw;background:var(--k);color:var(--b);display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.st-band b{font-weight:800;font-size:3.4cqw;letter-spacing:-.02em}
.st-band .st-btn{background:var(--a);color:#fff}
.st-foot{padding:3.4cqw 4cqw 4cqw;font-family:var(--f-mono,monospace);font-size:1.5cqw;opacity:.55;display:flex;justify-content:space-between}
/* variante teléfono (la unidad cqw es el ancho de la pantalla del teléfono) */
.store.ph .st-nav{padding:14cqw 6cqw 4cqw}
.store.ph .st-logo{font-size:5.4cqw}
.store.ph .st-links{font-size:4.2cqw}
.store.ph .st-hero{margin:5cqw 5cqw 0;padding:8cqw 6cqw 0;flex-direction:column;align-items:flex-start;gap:5cqw;border-radius:2cqw}
.store.ph .st-hero small{font-size:3.3cqw}
.store.ph .st-hero h5{font-size:10.6cqw;margin:2.4cqw 0 5cqw}
.store.ph .st-btn{font-size:4.2cqw;padding:3cqw 6cqw;border-radius:1cqw}
.store.ph .st-jars{align-self:center;gap:5cqw;padding-top:3cqw}
.store.ph .jar{width:22cqw;height:34cqw;border-radius:3cqw 3cqw 4cqw 4cqw}
.store.ph .jar::before{top:-4.4cqw;height:4.4cqw;border-radius:1.2cqw 1.2cqw 0 0}
.store.ph .jar.s{width:26cqw;height:27cqw}
.store.ph .st-label{padding:7cqw 5cqw 3.6cqw;font-size:3.2cqw}
.store.ph .st-grid{grid-template-columns:1fr 1fr;gap:4cqw;padding:0 5cqw}
.store.ph .st-card .im{border-radius:2cqw;padding-bottom:4cqw}
.store.ph .st-card .im .jar{transform:scale(.5)}
.store.ph .st-card b{font-size:4.2cqw;margin-top:2.6cqw}
.store.ph .st-card span{font-size:3.4cqw}
.store.ph .st-card:nth-child(3){display:none}

/* ===== TICKET DE PEDIDO ===== */
.ticket{background:#fff;color:#0B1326;border-radius:5px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;
  font-family:var(--f-mono,monospace);font-size:10.5px;line-height:1.35;
  box-shadow:0 26px 50px -22px rgba(11,19,38,.5),0 0 0 1px #CFD7E3}
.ticket .r{display:flex;justify-content:space-between;gap:18px;white-space:nowrap}
.ticket .t{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ticket hr{border:0;border-top:1px dashed #B8C2D2;margin:0;width:100%}
.ticket .ok{color:#0E8F5B}

@media(prefers-reduced-motion:reduce){.frame-b.scrolls .fb-screen img,.shot,.store-in{transition:none}.store-in.auto{animation:none}}