/* AgentShelf — sistema de diseño "Pan tostado y miel"
   Papel cálido, amarillo miel como único acento, sombras suaves con tinte marrón.
   Documentado en /design-system.html */

@font-face { font-family:"Fraunces"; src:url(/fonts/fraunces.woff2) format("woff2"); font-weight:500 700; font-display:swap; }
@font-face { font-family:"Figtree"; src:url(/fonts/figtree.woff2) format("woff2"); font-weight:400 700; font-display:swap; }

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Superficies (de más lejos a más cerca) */
  --paper:#FFFCF5;      /* fondo de página */
  --surface:#FFFFFF;    /* tarjetas, modal */
  --sand-50:#FBF7EC;    /* campos, zonas hundidas */
  --sand-100:#F4EEDD;   /* hover, chips neutros */
  --sand-200:#E8DFC6;   /* bordes de campos, divisores */

  /* Texto */
  --ink:#2A2417;        /* principal */
  --ink-2:#5E5640;      /* secundario (7:1 sobre papel) */
  --ink-3:#756D52;      /* placeholder, ayudas (4.9:1) */

  /* Miel: el único acento */
  --sun-50:#FFF8DD;
  --sun-100:#FDEFB4;
  --sun-300:#F9D866;
  --sun-400:#F4C535;    /* botón primario */
  --sun-500:#E3AE1C;    /* hover del primario */
  --sun-700:#7A5600;    /* texto/enlace sobre claro (6.6:1) */

  /* Estados */
  --ok-bg:#E5F1DF;   --ok-ink:#2D5A2A;
  --warn-bg:var(--sun-100); --warn-ink:#6B4B00;
  --bad-bg:#FBE3DA;  --bad-ink:#9A3412;  --bad:#B93A0E;

  /* Tipografía */
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1rem; --fs-lg:1.25rem;
  --fs-xl:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl:clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

  /* Espacio (base 4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;

  /* Radios */
  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Elevación: sombras cálidas con desplazamiento, nunca halos */
  --sh-1:0 1px 2px rgb(92 64 8 /.06), 0 2px 8px rgb(92 64 8 /.05);
  --sh-2:0 2px 4px rgb(92 64 8 /.05), 0 10px 24px rgb(92 64 8 /.09);
  --sh-3:0 6px 12px rgb(92 64 8 /.06), 0 24px 48px rgb(92 64 8 /.14);
  --sh-honey:0 1px 0 rgb(255 255 255 /.5) inset, 0 2px 4px rgb(160 110 0 /.18), 0 8px 18px rgb(160 110 0 /.18);

  /* Movimiento */
  --ease:cubic-bezier(.16, 1, .3, 1);
  --t-fast:140ms; --t-base:260ms; --t-slow:420ms;

  /* Alias de compatibilidad con app.js */
  --bg:var(--paper); --card:var(--surface); --muted:var(--ink-2); --line:var(--sand-200);
  --brand:var(--sun-500); --brand-d:var(--sun-700); --warn:var(--warn-ink); --ok:var(--ok-ink); --chip:var(--sand-100);
}

/* ---------- 2. Base ---------- */
* { box-sizing:border-box; }
html { scroll-padding-top:88px; -webkit-text-size-adjust:100%; scrollbar-color:var(--sand-200) transparent; scrollbar-width:thin; }
body { margin:0; font:var(--fs-md)/1.55 var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
::selection { background:var(--sun-300); color:var(--ink); }
input, textarea, select { caret-color:var(--sun-700); accent-color:var(--sun-500); }
::placeholder { color:var(--ink-3); opacity:1; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:var(--sand-200); border-radius:var(--r-pill); border:2px solid var(--paper); } ::-webkit-scrollbar-thumb:hover { background:var(--sun-300); }
main:focus { outline:none; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-sm); }

h1, h2, h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; text-wrap:balance; color:var(--ink); }
h1 { font-size:var(--fs-2xl); line-height:1.08; margin:var(--s-2) 0 var(--s-4); }
h2 { font-size:var(--fs-xl); line-height:1.15; margin:var(--s-6) 0 var(--s-3); }
h3 { font-size:var(--fs-lg); line-height:1.25; margin:0 0 var(--s-2); }
p { margin:0 0 var(--s-3); max-width:68ch; text-wrap:pretty; }
a { color:var(--sun-700); text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:var(--sun-400); transition:text-decoration-color var(--t-fast); }
a:hover { text-decoration-color:currentColor; }
.muted, p.muted, small { color:var(--ink-2); } small { font-size:var(--fs-xs); }
pre, code { font-family:var(--font-code); background:var(--sand-100); border-radius:8px; font-size:var(--fs-xs); }
pre { padding:var(--s-3); overflow:auto; white-space:pre-wrap; word-break:break-all; } code { padding:2px 6px; }
.addr { font-family:var(--font-code); font-size:var(--fs-xs); word-break:break-all; }
.price { font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- 3. Layout ---------- */
main { max-width:960px; margin:0 auto; padding:var(--s-5) var(--s-4) var(--s-8); }
.row { display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; } .row.between { justify-content:space-between; }
.grid { display:grid; gap:var(--s-4); }
@media (min-width:640px) { .grid.cols2 { grid-template-columns:1fr 1fr; } .grid.cols3 { grid-template-columns:repeat(3,1fr); } }
.scroll { overflow-x:auto; }
footer { text-align:center; color:var(--ink-2); font-size:var(--fs-xs); padding:var(--s-6) var(--s-3); }

/* Cabecera */
header.top { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-5); background:var(--paper); box-shadow:var(--sh-1); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header.top .logo { font:600 1.25rem/1 var(--font-display); letter-spacing:-.01em; text-decoration:none; color:var(--ink); display:flex; gap:var(--s-2); align-items:center; }
header.top .logo img { transition:transform var(--t-base) var(--ease); } header.top .logo:hover img { transform:rotate(-8deg) scale(1.08); }
header.top nav { display:flex; gap:var(--s-1); margin-left:auto; align-items:center; flex-wrap:wrap; }
header.top nav a { text-decoration:none; font-size:var(--fs-sm); font-weight:600; color:var(--ink); padding:var(--s-2) var(--s-3); border-radius:var(--r-pill); transition:background var(--t-fast); }
header.top nav a:hover { background:var(--sun-100); }

/* ---------- 4. Superficies ---------- */
.card { background:var(--surface); border-radius:var(--r-lg); padding:var(--s-5); margin:0 0 var(--s-4); box-shadow:var(--sh-1); transition:box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
a.card:hover, .grid > .card:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.card.empty p, .empty p { margin-inline:auto; } .card.empty .btn, .card.empty button { margin-top:var(--s-3); }
.card.empty, .empty { text-align:center; color:var(--ink-2); padding:var(--s-7) var(--s-4); }
.hero { background:var(--sun-50); border-radius:var(--r-xl); padding:var(--s-7) var(--s-6); margin:0 0 var(--s-5); box-shadow:var(--sh-1); }
.hero h1 { max-width:18ch; } .hero p { font-size:var(--fs-lg); line-height:1.5; max-width:46ch; color:var(--ink-2); margin-bottom:var(--s-5); }

/* ---------- 5. Controles ---------- */
label { display:block; font-size:var(--fs-sm); font-weight:600; margin:var(--s-4) 0 6px; }
input, select, textarea { width:100%; padding:12px 14px; border:1.5px solid var(--sand-200); border-radius:var(--r-md); background:var(--sand-50); color:var(--ink); font:inherit; transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-base) var(--ease); }
input:hover, select:hover, textarea:hover { border-color:var(--sun-300); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ink); background:var(--surface); box-shadow:0 0 0 4px rgb(244 197 53 /.35); }
textarea { min-height:96px; resize:vertical; }
input[type=checkbox] { width:18px; height:18px; margin-right:var(--s-2); padding:0; }
.check { display:flex; align-items:center; font-weight:500; margin:var(--s-2) 0; }

button, .btn { touch-action:manipulation; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); padding:12px 20px; border-radius:var(--r-md); border:0; background:var(--sun-400); color:var(--ink); font:600 var(--fs-md)/1.2 var(--font-body); cursor:pointer; text-decoration:none; box-shadow:var(--sh-honey);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-fast); }
button:hover, .btn:hover { background:var(--sun-300); transform:translateY(-2px); box-shadow:0 1px 0 rgb(255 255 255 /.5) inset, 0 4px 8px rgb(160 110 0 /.2), 0 14px 26px rgb(160 110 0 /.22); }
button:active, .btn:active { transform:translateY(0) scale(.98); box-shadow:var(--sh-1); background:var(--sun-500); }
button.ghost, .btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--sand-200); }
button.ghost:hover, .btn.ghost:hover { background:var(--sand-100); box-shadow:inset 0 0 0 1.5px var(--sun-400); }
button.danger { background:var(--bad); color:#fff; box-shadow:var(--sh-1); } button.danger:hover { background:#A02F08; }
button.small, .btn.small { padding:7px 14px; font-size:var(--fs-sm); border-radius:var(--r-sm); }
button:disabled, button[aria-busy=true] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
button[aria-busy=true]::after { content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; }

/* Etiquetas */
.chip { display:inline-block; font-size:var(--fs-xs); padding:3px 10px; border-radius:var(--r-pill); background:var(--sand-100); color:var(--ink); font-weight:600; }
.chip.ok { background:var(--ok-bg); color:var(--ok-ink); } .chip.warn { background:var(--warn-bg); color:var(--warn-ink); } .chip.bad { background:var(--bad-bg); color:var(--bad-ink); }
.badge { background:var(--sun-300); color:var(--ink); font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.05em; }

/* Pestañas y pasos */
.tabs { display:flex; gap:var(--s-2); overflow-x:auto; margin:0 0 var(--s-5); padding:var(--s-1) var(--s-1) var(--s-2); }
.tabs a { padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--sh-1); text-decoration:none; color:var(--ink); white-space:nowrap; font-size:var(--fs-sm); font-weight:600; transition:background var(--t-fast), transform var(--t-fast) var(--ease); }
.tabs a:hover { transform:translateY(-1px); background:var(--sun-50); } .tabs a.on { background:var(--sun-400); box-shadow:var(--sh-honey); }
.steps { counter-reset:s; } .step { position:relative; padding-left:48px; }
.step::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:var(--r-pill); background:var(--sun-100); color:var(--sun-700); display:grid; place-items:center; font-weight:700; }
.step.done::before { content:"✓"; background:var(--ok-ink); color:#fff; }

/* Tabla */
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
th { font-size:var(--fs-xs); color:var(--ink-2); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
td, th { text-align:left; padding:var(--s-3) var(--s-2); border-bottom:1px solid var(--sand-100); vertical-align:top; }
tbody tr { transition:background var(--t-fast); } tbody tr:hover { background:var(--sun-50); }

/* Mensajes */
.err-text { color:var(--bad-ink); font-size:var(--fs-sm); margin:var(--s-2) 0; } .ok-text { color:var(--ok-ink); font-size:var(--fs-sm); }

/* Modal y aviso */
.modal-bg { overscroll-behavior:contain; position:fixed; inset:0; background:rgb(42 36 23 /.38); backdrop-filter:blur(6px); display:grid; place-items:center; padding:var(--s-3); z-index:20; overflow:auto; animation:fade var(--t-base) var(--ease); }
.modal { background:var(--surface); border-radius:var(--r-xl); padding:var(--s-6); width:100%; max-width:540px; max-height:92vh; overflow:auto; box-shadow:var(--sh-3); animation:pop var(--t-slow) var(--ease); }
#toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 24px); background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:var(--r-md); max-width:92vw; font-weight:500; opacity:0; box-shadow:var(--sh-3); transition:opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease); pointer-events:none; z-index:50; }
#toast.show { opacity:1; transform:translate(-50%, 0); } #toast.err { background:var(--bad); color:#fff; }

/* ---------- 6. Movimiento ---------- */
/* Un solo momento autoría: cada pantalla sube y aparece en cascada. */
main > * { animation:rise var(--t-slow) var(--ease) both; }
main > *:nth-child(2) { animation-delay:50ms; } main > *:nth-child(3) { animation-delay:100ms; } main > *:nth-child(n+4) { animation-delay:140ms; }
.grid > .card { animation:rise var(--t-slow) var(--ease) both; }
.grid > .card:nth-child(2) { animation-delay:80ms; } .grid > .card:nth-child(3) { animation-delay:160ms; } .grid > .card:nth-child(n+4) { animation-delay:220ms; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } }
@keyframes pop { from { opacity:0; transform:translateY(18px) scale(.96); } }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- 7. Piezas de la app ---------- */
[hidden] { display:none !important; }
body.lock { overflow:hidden; }
.skip { position:absolute; left:var(--s-3); top:-60px; background:var(--ink); color:var(--paper); padding:var(--s-2) var(--s-4); border-radius:var(--r-md); z-index:60; transition:top var(--t-fast); }
.skip:focus { top:var(--s-3); }
.icon { flex:none; } button .icon, .btn .icon { margin:0 -2px; }
.link-btn { background:none; box-shadow:none; padding:var(--s-2) var(--s-3); color:var(--ink); font-weight:600; font-size:var(--fs-sm); border-radius:var(--r-pill); }
.link-btn:hover { background:var(--sun-100); transform:none; box-shadow:none; }
.center { text-align:center; justify-content:center; } .row.end { justify-content:flex-end; margin-top:var(--s-4); }
.narrow { max-width:480px; margin:var(--s-5) auto; padding:var(--s-6); } .narrow h1 { font-size:var(--fs-xl); }
.stack { display:grid; gap:var(--s-4); } .stack.tight { gap:var(--s-3); } .stack > .card, .stack > article { margin:0; }
.small-text { font-size:var(--fs-sm); } .label { font-size:var(--fs-xs); font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; margin:var(--s-3) 0 var(--s-1); }
.hint { background:var(--sun-50); color:var(--warn-ink); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); font-size:var(--fs-sm); margin:var(--s-2) 0; }
.plain { list-style:none; margin:var(--s-3) 0; padding:0; display:grid; gap:var(--s-1); }
.actions { margin-top:var(--s-5); display:flex; gap:var(--s-2); flex-wrap:wrap; }
.row > * { min-width:0; } .grow { flex:1; min-width:0; } .row.between > h1, .row.between > h2 { min-width:0; overflow-wrap:anywhere; }
.clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.badge.inline { margin-left:var(--s-2); }

/* Campos */
.field { margin:0 0 var(--s-4); } .field label { margin:0 0 6px; } .opt { font-weight:400; color:var(--ink-2); }
.help { font-size:var(--fs-xs); color:var(--ink-2); margin:6px 0 0; max-width:60ch; }
.field-error { color:var(--bad-ink); font-size:var(--fs-sm); font-weight:600; margin:6px 0 0; } .field-error:empty { display:none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color:var(--bad); background:var(--bad-bg); }
.input-wrap { position:relative; } .input-wrap input { padding-right:56px; }
.icon-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); padding:8px; border-radius:var(--r-sm); } .icon-btn:hover { transform:translateY(-50%); }
.fieldset { border:0; padding:0; margin:0 0 var(--s-5); min-width:0; } .fieldset legend { font-weight:700; font-size:var(--fs-sm); padding:0; margin-bottom:var(--s-2); }
.filters { display:grid; gap:var(--s-3); margin:var(--s-4) 0; } @media (min-width:720px) { .filters { grid-template-columns:2fr 1fr 1fr; } }

/* Avisos y desplegables */
.notice { display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-4); border-radius:var(--r-md); background:var(--sand-100); color:var(--ink); margin:0 0 var(--s-4); }
.notice .icon { margin-top:2px; } .notice.ok { background:var(--ok-bg); color:var(--ok-ink); } .notice.warn { background:var(--warn-bg); color:var(--warn-ink); } .notice.bad { background:var(--bad-bg); color:var(--bad-ink); } .notice.info { background:var(--sun-50); }
.notice a, .notice .link-btn { color:inherit; font-weight:700; text-decoration:underline; padding:0; }
.disclosure { margin:var(--s-4) 0; } .disclosure summary { cursor:pointer; font-weight:600; font-size:var(--fs-sm); padding:var(--s-2) 0; list-style:none; display:flex; align-items:center; gap:var(--s-2); }
.disclosure summary::before { content:""; width:8px; height:8px; border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2); transform:rotate(-45deg); transition:transform var(--t-base) var(--ease); }
.disclosure[open] summary::before { transform:rotate(45deg); } .disclosure summary::-webkit-details-marker { display:none; }
.disclosure-body { padding:var(--s-3) 0 0; }
.copyline { display:flex; gap:var(--s-2); align-items:center; background:var(--sand-100); border-radius:var(--r-sm); padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3); margin:var(--s-2) 0; }
.copyline code { background:none; padding:0; flex:1; min-width:0; overflow-wrap:anywhere; font-size:var(--fs-sm); }
.copy.done { color:var(--ok-ink); }
.trace { display:grid; gap:var(--s-2); font-size:var(--fs-sm); } .trace > div { display:flex; gap:var(--s-2); align-items:center; }
.ok-text { display:flex; gap:var(--s-2); }

/* Esqueleto de carga */
.skeleton-list { display:grid; gap:var(--s-4); } .skeleton { height:120px; border-radius:var(--r-lg); background:linear-gradient(90deg, var(--sand-100) 25%, var(--sand-50) 50%, var(--sand-100) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* Inicio */
.hero .hero-note { font-size:var(--fs-sm); line-height:1.5; margin:var(--s-4) 0 0; color:var(--ink-2); }
.timeline { list-style:none; counter-reset:t; margin:0 0 var(--s-6); padding:0; display:grid; gap:var(--s-4); }
@media (min-width:760px) { .timeline { grid-template-columns:repeat(4,1fr); } }
.timeline li { counter-increment:t; position:relative; padding-top:var(--s-6); } .timeline li::before { content:counter(t); position:absolute; top:0; left:0; width:32px; height:32px; border-radius:var(--r-pill); background:var(--sun-400); box-shadow:var(--sh-honey); display:grid; place-items:center; font-weight:700; }
.split { display:grid; gap:var(--s-5); margin:var(--s-7) 0; align-items:start; } @media (min-width:760px) { .split { grid-template-columns:1.2fr 1fr; } }
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:var(--s-3); } .ticks li { display:flex; gap:var(--s-3); align-items:flex-start; } .ticks .icon { color:var(--ok-ink); margin-top:2px; }
.cta-band { text-align:center; background:var(--sun-50); border-radius:var(--r-xl); padding:var(--s-7) var(--s-5); box-shadow:var(--sh-1); } .cta-band h2 { margin-top:0; }

/* Catálogo */
.product { display:flex; flex-direction:column; } .product .cover { width:100%; height:160px; object-fit:cover; border-radius:var(--r-md); margin-bottom:var(--s-3); }
.product h3 { overflow-wrap:anywhere; } .prices { display:flex; gap:var(--s-2) var(--s-4); flex-wrap:wrap; margin:var(--s-2) 0; font-size:var(--fs-lg); }
.card-foot { margin-top:auto; padding-top:var(--s-3); }

/* Tiendas */
.store-card h2 { margin:0; font-size:var(--fs-lg); }

/* Pasos */
.stepper { list-style:none; display:flex; gap:var(--s-2); margin:var(--s-5) 0; padding:0; overflow-x:auto; }
.stepper li { flex:1; min-width:96px; } .stepper a { display:flex; flex-direction:column; align-items:center; gap:var(--s-2); text-decoration:none; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; padding:var(--s-2); border-radius:var(--r-md); transition:background var(--t-fast); }
.stepper a:hover { background:var(--sun-50); } .stepper .dot { width:34px; height:34px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--sand-100); color:var(--ink-2); font-weight:700; transition:background var(--t-base), color var(--t-base), box-shadow var(--t-base); }
.stepper .current a { color:var(--ink); } .stepper .current .dot { background:var(--sun-400); color:var(--ink); box-shadow:var(--sh-honey); } .stepper .done .dot { background:var(--ok-ink); color:#fff; } .stepper .done.current .dot { background:var(--sun-400); color:var(--ink); }
.step-card { padding:var(--s-6); } .step-card h2 { margin-top:0; } .step-nav { margin-top:var(--s-4); }
.choices { display:grid; gap:var(--s-3); } @media (min-width:640px) { .choices { grid-template-columns:1fr 1fr; } } .choices button { padding:var(--s-5); }
.items { list-style:none; margin:0 0 var(--s-4); padding:0; display:grid; gap:var(--s-3); }
.item { display:flex; gap:var(--s-3); align-items:center; justify-content:space-between; background:var(--sand-50); border-radius:var(--r-md); padding:var(--s-4); flex-wrap:wrap; } .item .prices { font-size:var(--fs-md); margin:var(--s-1) 0; }
.radio-cards { display:grid; gap:var(--s-3); } @media (min-width:640px) { .radio-cards:not(.col) { grid-template-columns:repeat(3,1fr); } }
.radio-card { flex-direction:column; align-items:flex-start; text-align:left; background:var(--sand-50); box-shadow:inset 0 0 0 1.5px var(--sand-200); font-weight:500; gap:2px; padding:var(--s-4); }
.radio-card small { color:var(--ink-2); font-size:var(--fs-sm); } .radio-card strong { font-size:var(--fs-md); }
.radio-card:hover { background:var(--sun-50); transform:none; box-shadow:inset 0 0 0 1.5px var(--sun-500); } .radio-card.on { background:var(--sun-50); box-shadow:inset 0 0 0 2px var(--ink); }
.choice-list { display:grid; gap:var(--s-3); margin-bottom:var(--s-3); }
.choice { display:flex; gap:var(--s-3); align-items:flex-start; font-weight:500; margin:0; padding:var(--s-4); background:var(--sand-50); border-radius:var(--r-md); box-shadow:inset 0 0 0 1.5px var(--sand-200); cursor:pointer; transition:background var(--t-fast), box-shadow var(--t-fast); }
.choice:hover { background:var(--sun-50); } .choice.on, .choice:has(input:checked) { background:var(--sun-50); box-shadow:inset 0 0 0 2px var(--ink); }
.choice input { margin-top:3px; } .choice > span { display:grid; gap:2px; } .choice small { color:var(--ink-2); font-size:var(--fs-sm); }
.summary { margin:var(--s-3) 0 0; padding:var(--s-3) var(--s-4); background:var(--sun-100); border-radius:var(--r-md); font-size:var(--fs-sm); }
.field-row { background:var(--sand-50); border-radius:var(--r-md); padding:var(--s-3); display:grid; gap:var(--s-2); }
.sticky-actions { position:sticky; bottom:calc(var(--s-6) * -1); background:var(--surface); padding:var(--s-4) 0 var(--s-1); margin-top:var(--s-4); }
.check.pill { background:var(--sand-50); border-radius:var(--r-pill); padding:8px 16px; box-shadow:inset 0 0 0 1.5px var(--sand-200); margin:0; cursor:pointer; } .check.pill:has(input:checked) { background:var(--sun-50); box-shadow:inset 0 0 0 2px var(--ink); }
.choice strong { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2); }
.danger-text { color:var(--bad-ink); }
.howto { padding-left:var(--s-5); display:grid; gap:var(--s-4); margin:var(--s-5) 0 0; } .howto li { padding-left:var(--s-1); }
.checklist { list-style:none; padding:0; margin:0 0 var(--s-4); display:grid; gap:var(--s-3); } .checklist li { display:flex; gap:var(--s-3); align-items:center; padding:var(--s-3) var(--s-4); border-radius:var(--r-md); }
.checklist li.ok { background:var(--ok-bg); color:var(--ok-ink); } .checklist li.todo { background:var(--warn-bg); color:var(--warn-ink); } .checklist span { flex:1; } .checklist a { color:inherit; font-weight:700; }

/* Panel */
.tabs a { display:inline-flex; align-items:center; gap:var(--s-2); }
.count { background:var(--bad); color:#fff; font-size:11px; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); display:inline-grid; place-items:center; font-weight:700; }
.order.urgent { background:var(--sun-50); }
dl.data { display:grid; grid-template-columns:max-content 1fr; gap:var(--s-1) var(--s-4); margin:0 0 var(--s-3); font-size:var(--fs-sm); } dl.data dt { color:var(--ink-2); text-transform:capitalize; } dl.data dd { margin:0; overflow-wrap:anywhere; }
.card.inner { box-shadow:none; background:var(--sand-50); }
.back { display:inline-flex; gap:var(--s-2); align-items:center; font-size:var(--fs-sm); font-weight:600; text-decoration:none; margin-bottom:var(--s-3); }
.modal.wide { max-width:640px; } .modal h2 { margin-top:0; }
th[scope=row] { font-weight:600; font-size:inherit; text-transform:none; letter-spacing:0; color:var(--ink); }
@media (max-width:560px) { main { padding:var(--s-4) var(--s-3) var(--s-7); } .hero { padding:var(--s-6) var(--s-4); } .step-card, .narrow, .modal { padding:var(--s-4); } header.top { padding:var(--s-3); } .stepper .lbl { font-size:var(--fs-xs); } .sticky-actions { bottom:calc(var(--s-4) * -1); } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
  button:hover, .btn:hover, .card:hover { transform:none !important; }
}

/* Preferencia de moneda de cobro y verificación */
.pref-row { display:grid; gap:var(--s-2); align-items:center; background:var(--sand-50); border-radius:var(--r-md); padding:var(--s-3) var(--s-4); }
@media (min-width:640px) { .pref-row { grid-template-columns:1fr minmax(220px, 1fr); } }
.pref-row select { background:var(--surface); }
small.block { display:block; color:var(--ink-2); }
.plain.bullets { list-style:disc; padding-left:var(--s-5); gap:var(--s-2); }
.verify h3 { margin:0; font-size:var(--fs-lg); }
.verify .notice { margin-top:var(--s-4); }
.choice input[type=radio] { width:18px; height:18px; padding:0; margin-top:3px; }
.howto li > .copyline { margin-top:var(--s-2); }

.verify > .row.between { margin-bottom:var(--s-4); }

.pref-row .quote, .help.quote { grid-column:1 / -1; color:var(--ink-2); font-size:var(--fs-xs); } .help.quote:empty { display:none; }

.price-line { display:grid; grid-template-columns:1fr minmax(120px, 180px); gap:var(--s-2); align-items:center; margin-top:var(--s-2); }
.choice.static { cursor:default; margin-bottom:var(--s-3); } .choice.static:hover { background:var(--sun-50); }

.examples { margin:calc(var(--s-2) * -1) 0 var(--s-4); } .examples .row { gap:var(--s-2); }
.examples-grid { display:grid; gap:var(--s-5); margin:var(--s-4) 0 var(--s-7); } @media (min-width:720px) { .examples-grid { grid-template-columns:repeat(3,1fr); } } .examples-grid h3 { font-size:var(--fs-md); margin-bottom:var(--s-2); } .examples-grid ul { margin:0; }