/* Piezas comunes de las tiendas Weaktony (primero celular). Cada plantilla define sus tokens y su mundo visual.
   Forma: botones en píldora, tarjetas 18px, campos 12px, ventanas 24px. */
:root {
  --surface: rgb(255 255 255 / .06); --surface-2: rgb(255 255 255 / .1); --ink: #f2f3f7; --ink-2: #c4c7d2; --muted: #a2a6b4;
  --line: rgb(255 255 255 / .12); --sheet: #14161d; --field: rgb(255 255 255 / .06);
  --r-card: 18px; --r-field: 12px; --r-sheet: 24px;
  --font-display: system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --top-h: 60px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.3, 1.3, .5, 1);
  /* Curvas fuertes: salida rápida para lo que aparece y la de las hojas de iPhone para las ventanas que suben */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --wa: #25D366; --ok: #1f9d55; --on-ok: #ffffff; --err: #ff9b9b; --err-line: #ff7a7a;
  --toast-bg: #f2f3f7; --toast-ink: #0b0c10; --scrim: rgb(0 0 0 / .55); --chip-dark: rgb(0 0 0 / .72);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 56px); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p, li, dd, label, legend { overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
/* Nombre de la tienda largo (--ns) o con una palabra muy larga (--ws): las plantillas achican el título grande */
[data-len="medio"] { --ns: .86; } [data-len="largo"] { --ns: .72; }
[data-word="largo"] { --ws: .82; } [data-word="muy-largo"] { --ws: .66; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip:focus { left: 12px; }
.i { width: 1.25em; height: 1.25em; flex: none; }
[hidden] { display: none !important; }

/* Fondo animado o video: fijo detrás de todo, con velo para que el texto se lea */
.bg-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bg-layer canvas, .bg-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-layer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, transparent 0 40%, color-mix(in srgb, var(--bg) 70%, transparent) 100%), linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 55%, transparent)); }

/* Barra de arriba */
.top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 max(16px, env(safe-area-inset-left)); padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; text-decoration: none; font: 700 1rem/1.1 var(--font-display); }
.top-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.top-actions { display: flex; gap: 6px; }
.cart-btn { position: relative; }
.cart-count { position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font: 800 11px/19px var(--font-body); text-align: center; }
.cart-btn.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); } }
.motion-toggle .i-play, .motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }

/* Botones (P13: reposo, trabajando, listo, error) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap; user-select: none; touch-action: manipulation;
  transition: transform .35s var(--spring), background-color .2s var(--ease), box-shadow .25s var(--ease), color .2s; }
.btn:active { transform: scale(.97); }
/* Al tocar responde al instante (100 ms); al soltar vuelve con el resorte de siempre */
:is(.btn, .btn-icon, .card-hit, .method):active, .chip input:active + span { transition-duration: .1s; transition-timing-function: var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
.btn-main { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .btn-main:hover::after { opacity: 1; animation: shine .9s var(--ease); } }
@keyframes shine { to { background-position: -40% 0; } }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); }
.btn-wa { background: var(--wa); color: #08130c; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn-label::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 10px; vertical-align: -0.15em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-done { background: var(--ok); color: var(--on-ok); }
.btn.is-error { animation: nope .35s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.btn-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--ink); transition: background-color .2s, transform .3s var(--spring); }
.btn-icon:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .btn-icon:hover { background: var(--surface-2); } }
.btn-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: .85rem; font-weight: 700; flex: none; }
.btn-copy.copied { background: var(--ok); color: var(--on-ok); }

/* Precios */
.price-usd { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.price-bs { display: block; font-size: .8em; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-ask { color: var(--muted); font-size: .9em; }

/* Carrusel coverflow */
.cf-wrap { --cf-card: clamp(176px, 52vw, 300px); position: relative; }
.cf { overflow: hidden; padding: 28px 0 22px; outline: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cf.dragging { cursor: grabbing; }
.cf:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; border-radius: var(--r-card); }
.cf-track { position: relative; height: var(--cf-card); transform-style: preserve-3d; }
.cf-card { position: absolute; left: 50%; top: 0; width: var(--cf-card); aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); box-shadow: 0 24px 50px -18px rgb(0 0 0 / .65); }
.cf.dragging .cf-card, .cf.moving .cf-card { will-change: transform; }
.cf-img, .cf-card .img-fallback { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cf-meta { display: grid; justify-items: center; gap: 2px; min-height: 3.6em; padding: 0 16px; text-align: center; }
.cf-title { font: 700 1.05rem/1.25 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cf-nav { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.cf-nav .btn-icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* Pestañas de categorías (P14) */
.tabs { position: sticky; top: var(--top-h); z-index: 15; margin: 0 -16px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tabs-row { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink-2); font-weight: 600; white-space: nowrap; transition: color .2s; }
.tab small { font-size: .78em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] { color: var(--ink); }
.tab-ind { position: absolute; left: 0; bottom: 4px; width: 100px; height: 3px; border-radius: 3px; background: var(--accent); transform-origin: left center; pointer-events: none; }

/* Catálogo */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { min-width: 0; }
.card-hit { display: grid; width: 100%; text-align: left; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--spring), box-shadow .25s; }
@media (hover: hover) and (pointer: fine) { .card-hit:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 18px 40px -20px rgb(0 0 0 / .6); } }
.card-hit:active { transform: scale(.98); }
.card-media { position: relative; display: block; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.card-img, .card-media .img-fallback { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .card-hit:hover .card-img { transform: scale(1.05); } }
.card-body { display: grid; gap: 4px; padding: 10px 12px 14px; }
.card-name { font-weight: 600; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card.is-out .card-img { filter: grayscale(1); opacity: .55; }
.badge-out { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--chip-dark); color: #fff; font-size: .75rem; font-weight: 700; }
.img-fallback { display: grid; place-items: center; background: linear-gradient(135deg, var(--soft), var(--surface-2)); color: var(--ink); font: 800 1.6rem/1 var(--font-display); letter-spacing: .02em; }
.card.pop { animation: pop .42s var(--spring) var(--d, 0ms) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.empty { padding: 40px 16px; text-align: center; color: var(--ink-2); }

/* Revelación al bajar (P26): sin JS todo se ve */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

.extra { margin-top: 48px; padding: 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.extra h2 { font-size: 1.4rem; margin-bottom: 10px; }
.extra p { color: var(--ink-2); }

/* Pie */
.foot { display: grid; gap: 10px; justify-items: start; margin-top: 64px; padding: 32px max(16px, env(safe-area-inset-left)) calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.foot-name { font: 800 1.4rem/1.1 var(--font-display); margin-bottom: 4px; }
.foot-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--ink-2); text-decoration: none; }
a.foot-link:hover { color: var(--ink); }

/* Barra del carrito (celular) */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; animation: rise .4s var(--spring); }
.cartbar-btn { width: min(100%, 520px); margin: 0 auto; display: flex; pointer-events: auto; }
@keyframes rise { from { transform: translateY(110%); } }

/* Ventanas tipo hoja: abajo en el celular, al centro en escritorio */
dialog.sheet { padding: 0; border: 0; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.sheet::backdrop { background: var(--scrim); backdrop-filter: blur(4px); transition: opacity .25s; }
/* Sube con la curva de las hojas de iPhone, sin rebote: con resorte el borde de abajo se despegaba de la pantalla */
.sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); background: var(--sheet); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 -20px 60px rgb(0 0 0 / .45);
  transition: transform .42s var(--ease-drawer), opacity .25s var(--ease); }
dialog.sheet[open] .sheet-in { transform: none; }
@starting-style { dialog.sheet[open] .sheet-in { transform: translateY(100%); } dialog.sheet[open]::backdrop { opacity: 0; } }
dialog.sheet.is-closing .sheet-in { transform: translateY(100%); transition-duration: .2s; transition-timing-function: var(--ease); }
dialog.sheet.is-closing::backdrop { opacity: 0; }
@media (min-width: 760px) {
  .sheet-in { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100% - 48px)); max-height: min(88dvh, 860px); border-radius: var(--r-sheet); transform: translate(-50%, -50%); padding: 24px;
    transition-duration: .3s, .2s; transition-timing-function: var(--ease-out), var(--ease); }
  dialog.sheet[open] .sheet-in { transform: translate(-50%, -50%); }
  @starting-style { dialog.sheet[open] .sheet-in { transform: translate(-50%, -46%) scale(.96); opacity: 0; } }
  dialog.sheet.is-closing .sheet-in { transform: translate(-50%, -48%) scale(.97); opacity: 0; }
  #sheet-product .sheet-in { width: min(920px, calc(100% - 48px)); display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: start; }
  #sheet-product .pd-dots { grid-column: 1; }
}
.sheet-head { display: flex; align-items: center; gap: 8px; margin: -6px -6px 12px; }
.sheet-head h2 { flex: 1; font-size: 1.3rem; }
.sheet-x { position: absolute; right: 12px; top: 12px; z-index: 2; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(6px); }

/* Ficha del producto */
.pd-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-card); background: var(--surface-2); aspect-ratio: 1; margin: -4px -4px 0; }
.pd-gallery::-webkit-scrollbar { display: none; }
.pd-gallery > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.pd-dots { display: flex; justify-content: center; gap: 6px; min-height: 18px; padding: 8px 0 2px; }
.pd-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line); transition: width .3s var(--spring), background-color .2s; }
.pd-dots i.on { width: 18px; background: var(--accent); }
.pd-body { display: grid; gap: 10px; padding-top: 6px; }
.pd-name { font-size: 1.5rem; }
.pd-price { font-size: 1.25rem; }
.pd-price .price-bs { display: inline; margin-left: 8px; }
.pd-desc { color: var(--ink-2); }
.pd-desc:empty, .pd-attrs:empty { display: none; }
.pd-attrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pd-attrs div { padding: 10px 12px; border-radius: var(--r-field); background: var(--surface); }
.pd-attrs dt { font-size: .78rem; color: var(--muted); }
.pd-attrs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pd-fields { display: grid; gap: 14px; }
.pd-buy { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; margin: 6px -18px -22px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--sheet) 70%, transparent); }
.pd-add { flex: 1; }

/* Formularios: etiqueta arriba, error abajo; 16px para que iOS no haga zoom */
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend, .field .label { font-weight: 600; font-size: .92rem; color: var(--ink); padding: 0; }
.field small { color: var(--muted); font-weight: 400; }
.field input:not([type=radio]):not([type=checkbox]):not([type=file]) { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--field); font-size: 16px; color: var(--ink); }
.field input:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: var(--err-line); }
.field input::placeholder { color: var(--muted); }
.field-error, .form-error { color: var(--err); font-size: .88rem; min-height: 0; }
.field-error:empty, .form-error:empty { display: none; }
.field-hint { color: var(--ink-2); font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; transition: background-color .2s, box-shadow .2s, transform .3s var(--spring); }
.chip span small { color: var(--muted); font-weight: 600; }
.chip input:checked + span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.chip input:checked + span small { color: inherit; opacity: .8; }
.chip input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.chip input:active + span { transform: scale(.96); }
.qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.qty output, .qty-n { min-width: 2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.qty-sm .btn-icon { width: 44px; height: 44px; }

/* Carrito */
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cart-item > img, .cart-item > .img-fallback { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; grid-row: span 2; font-size: 1rem; }
.ci-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ci-opts { font-size: .85rem; color: var(--ink-2); }
.ci-price { font-weight: 800; color: var(--accent-text); }
.cart-item .qty { justify-self: start; }
.cart-empty { display: grid; justify-items: center; gap: 12px; padding: 30px 0; color: var(--ink-2); }
.cart-foot { display: grid; gap: 14px; margin-top: 16px; }
.totals { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); }
.tot-row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.tot-row strong { font-size: 1.2rem; }
.tot-bs { color: var(--ink-2); font-size: .9rem; }
.tot-note { color: var(--muted); font-size: .85rem; margin-top: 4px; }

/* Compra */
.co-step { display: grid; gap: 14px; }
.co-step.step-in { animation: step-in .35s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }
.co-form, .pay-form { display: grid; gap: 14px; }
.co-note { color: var(--ink-2); }
.co-options { display: grid; gap: 10px; }
.co-hint { color: var(--muted); font-size: .88rem; }
.co-hint:empty { display: none; }
.co-privacy { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.methods { display: grid; gap: 10px; }
.method { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: transform .3s var(--spring), box-shadow .2s; }
.method:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .method:hover { box-shadow: inset 0 0 0 2px var(--accent); } }
.method[disabled] { opacity: .5; cursor: not-allowed; }
.method.is-busy { pointer-events: none; opacity: .6; }
.method-name { font-weight: 700; }
.method-amt { font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pay-amt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 16px; border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 16%, var(--sheet)); }
.pay-amt span:first-child { width: 100%; color: var(--ink-2); font-size: .9rem; }
.pay-amt strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; flex: 1; }
.pay-data { display: grid; gap: 8px; margin: 0; }
.pay-data div { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-field); background: var(--surface); }
.pay-data dt { font-size: .8rem; color: var(--muted); }
.pay-data dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.upload { display: grid; gap: 10px; cursor: pointer; }
.upload-ui { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: var(--r-card); border: 2px dashed var(--line); color: var(--ink-2); font-weight: 700; transition: border-color .2s, background-color .2s; }
.upload:hover .upload-ui, .upload:focus-within .upload-ui { border-color: var(--accent); background: var(--surface); }
.upload-preview { max-height: 220px; width: auto; border-radius: 12px; justify-self: center; }
.co-done { justify-items: center; text-align: center; padding: 18px 0 6px; }
.co-done h3 { font-size: 1.6rem; }
.done-num { color: var(--accent-text); }
.done-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ok); color: var(--on-ok); font-size: 34px; animation: pop .5s var(--spring); }
.age .sheet-in { text-align: center; display: grid; gap: 14px; }

/* Aviso flotante */
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-ink); font-weight: 700; font-size: .92rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .35s var(--spring), opacity .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Objeto compartido: la foto viaja de la tarjeta a la ficha (P11) */
::view-transition-group(pd-photo) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
/* "Pausar animaciones" del pie: todo lo que se mueve solo queda quieto en su último cuadro (aros, olas, figuras,
   franjas). Antes cada plantilla lo pausaba a mano y en algunas (Papel, Tropical, Memphis) seguía moviéndose. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }

/* Ficha: flechas, botón de ampliar y paso animado entre fotos */
.pd-media { position: relative; }
.pd-gallery { scroll-behavior: smooth; cursor: zoom-in; }
.pd-gallery > img { transition: transform .5s var(--ease), opacity .4s; }
.pd-gallery > img:not(.is-cur) { transform: scale(.94); opacity: .6; }
.pd-nav, .pd-zoom { position: absolute; z-index: 1; display: grid; place-items: center; border: 0; color: #fff; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); cursor: pointer;
  transition: transform .25s var(--spring), background-color .2s, opacity .2s; }
.pd-nav { top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 99px; }
.pd-nav.prev { left: 10px; } .pd-nav.next { right: 10px; }
.pd-nav:disabled { opacity: 0; pointer-events: none; }
.pd-zoom { right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; height: 36px; padding: 0 12px; border-radius: 99px; font: 600 .82rem/1 var(--font-body, inherit); }
.pd-nav svg, .pd-zoom svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .pd-nav:hover, .pd-zoom:hover { background: rgb(0 0 0 / .72); transform: scale(1.06); } }
.pd-nav:active, .pd-zoom:active { transform: scale(.94); }
.pd-nav:focus-visible, .pd-zoom:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pd-media.single .pd-nav { display: none; }
.pd-media.no-photo .pd-zoom { display: none; }

/* Visor a pantalla completa */
dialog.visor { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: #fff; overflow: hidden;
  background: rgb(6 6 8 / calc(.96 - var(--pull, 0) * .7)); display: grid; grid-template-rows: auto 1fr auto; }
dialog.visor:not([open]) { display: none; }
dialog.visor::backdrop { background: transparent; }
@starting-style { dialog.visor[open] { background: rgb(6 6 8 / 0); } }
dialog.visor { transition: background-color .35s; }
dialog.visor.is-closing { background: rgb(6 6 8 / 0); }
dialog.visor.is-closing .visor-top, dialog.visor.is-closing .visor-thumbs, dialog.visor.is-closing .visor-nav { opacity: 0; }
.visor-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 12px 8px 18px; z-index: 2; transition: opacity .25s; }
.visor-count { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em; }
.visor-tools { display: flex; gap: 8px; }
.visor-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 99px; color: #fff; background: rgb(255 255 255 / .12); cursor: pointer;
  transition: transform .25s var(--spring), background-color .2s, opacity .2s; }
.visor-btn svg { width: 22px; height: 22px; }
.visor-btn:hover { background: rgb(255 255 255 / .22); }
.visor-btn:active { transform: scale(.92); }
.visor-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-btn:disabled { opacity: .25; pointer-events: none; }
.visor-stage { position: relative; overflow: hidden; touch-action: none; }
.visor-track { display: flex; height: 100%; will-change: transform; }
.visor-slide { flex: 0 0 100%; display: grid; place-items: center; height: 100%; padding: 8px; overflow: hidden; }
.visor-slide img, .visor-slide video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; transform-origin: center; }
.visor-slide img { cursor: zoom-in; }
dialog.visor.zoomed .visor-slide img { cursor: grab; border-radius: 0; }
dialog.visor.zoomed .visor-slide img:active { cursor: grabbing; }
.visor-nav { position: absolute; top: 50%; margin-top: -22px; z-index: 2; background: rgb(0 0 0 / .45); backdrop-filter: blur(8px); transition: opacity .25s, transform .25s var(--spring); }
.visor-nav.prev { left: 12px; } .visor-nav.next { right: 12px; }
dialog.visor.zoomed .visor-nav, dialog.visor.single .visor-nav { opacity: 0; pointer-events: none; }
.visor-thumbs { display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); transition: opacity .25s; }
.visor-thumbs::-webkit-scrollbar { display: none; }
.visor-thumb { position: relative; flex: 0 0 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgb(255 255 255 / .1); opacity: .5; cursor: pointer;
  transition: opacity .25s, transform .3s var(--spring), box-shadow .25s; }
.visor-thumb img { width: 100%; height: 100%; object-fit: cover; }
.visor-thumb[aria-selected="true"] { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 2px #fff; }
.visor-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visor-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .35); }
.visor-play svg { width: 22px; height: 22px; }
@media (hover: none) { .visor-nav { display: none; } }
@media (min-width: 900px) { .visor-slide { padding: 12px 72px; } .visor-thumb { flex-basis: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .pd-gallery { scroll-behavior: auto; }
  .pd-gallery > img, .pd-gallery > img:not(.is-cur) { transform: none; opacity: 1; transition: none; }
  dialog.visor, .visor-btn, .visor-thumb, .pd-nav, .pd-zoom { transition: none; }
}
/* Pausar animaciones: enlace discreto en el pie */
.foot-motion { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; opacity: .7; font: 600 .85rem/1 var(--font-body, inherit); cursor: pointer; transition: opacity .2s; }
.foot-motion:hover, .foot-motion:focus-visible { opacity: 1; }
.foot-motion svg { width: 16px; height: 16px; }

/* Retoques comunes (fase 14) */
/* Carrusel: los lados se desvanecen en vez de cortarse en seco */
.cf { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
/* Foto del catálogo: brillo mientras carga y aparición suave */
.js img.card-img { opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js img.card-img.is-loaded { opacity: 1; }
.js .card-media:has(img.card-img:not(.is-loaded))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 9%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* Precio con los números alineados */
.card-price { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .js img.card-img { opacity: 1; } .js .card-media::after { animation: none; } }

/* Colores a gusto (Personalizado): las piezas toman los colores elegidos aunque la plantilla traiga fondos fijos.
   Solo aplica con data-pal="personalizado"; sin colores a gusto cada plantilla se ve igual que siempre. */
html[data-pal="personalizado"] :is(.card-hit, .card-body, .extra, .tab, .glass, .btn-ghost, .btn-icon, .btn-copy) { background: var(--surface); color: var(--ink); }
/* El eslogan y el pie van sobre el fondo (animado o video), sin cuadro: las letras llevan un halo del color de fondo
   para leerse aunque el video cambie. La rayita de color a la izquierda de algunas plantillas se queda. */
html[data-pal="personalizado"] .hero-slogan { background: transparent; box-shadow: none; border-top: 0; border-right: 0; border-bottom: 0; color: var(--ink);
  text-shadow: 0 0 2px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg); }
html[data-pal="personalizado"] :is(.foot, .foot-link) { color: var(--ink); }
html[data-pal="personalizado"] .foot { background: var(--bar); }
/* Barra de arriba: su color (un poco translúcida para el desenfoque de lo que pasa por debajo) */
html[data-pal="personalizado"] .top { background: color-mix(in srgb, var(--bar) 92%, transparent); }
html[data-pal="personalizado"] :is(.top-brand, .top-brand span) { color: var(--ink); }
/* Botones: el color de "Botones" y su letra, sin degradados propios de la plantilla */
html[data-pal="personalizado"] :is(.btn-main, .pd-add) { background: var(--accent); color: var(--on-accent); }
html[data-pal="personalizado"] .foot-link { background: transparent; }
html[data-pal="personalizado"] .card-price { background: transparent; }
html[data-pal="personalizado"] .foot-name { color: var(--ink); }
html[data-pal="personalizado"] :is(.card-name, .tab[aria-selected="true"]) { color: var(--ink); }
html[data-pal="personalizado"] :is(.price-bs, .price-ask, .tab) { color: var(--ink-2); }
html[data-pal="personalizado"] .price-usd { color: var(--accent-text); }
/* Flechas y lupa sobre las fotos del producto: del color de las ventanas, con la flecha en "Títulos" */
html[data-pal="personalizado"] :is(.pd-nav, .pd-zoom) { background: color-mix(in srgb, var(--sheet) 82%, transparent); color: var(--ink); }
/* Etiqueta "Agotado": letras del color del fondo sobre el de los títulos (ese par siempre se lee) */
html[data-pal="personalizado"] .badge-out { background: var(--ink); color: var(--bg); }