/* Hang · base del sitio (se carga siempre y bloquea el primer pintado)
   Tokens, menú móvil, buscador, chips, insignia de pago y estrellas: lo que se ve o se monta en TODAS las páginas.
   El resto de componentes está en site.css, que la portada carga sin bloquear (layouts/app.blade.php). */


:root{
  --ok:#0f8a3c;--ok-text:#0b6b30;--ok-bg:#e8f5ec;
  --magenta-badge:#d4007c; /* magenta de marca oscurecido lo justo para texto blanco pequeño (AA) */
  --err:#c4123f;--err-bg:#fdecf1;
  --warn-bg:var(--yellow-200);
  --radius-sm:8px;--radius:14px;--radius-lg:18px;--radius-xl:22px;--radius-pill:999px;
  /* Capa semántica (design-system/hang/MASTER.md): usa estos nombres en vez de los tonos de tinta directos */
  --text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
  --text-on-dark:var(--ink-0);--text-on-dark-muted:var(--ink-400);
  --text-success:var(--ok-text);--text-danger:var(--err);
  --border-hairline:var(--ink-200);--border-control:var(--ink-400);--border-focus:var(--ink-900);
  --text-min:12px;--target-min:24px;--target-touch:44px;
}
html.lock,html.lock body{overflow:hidden}
main{display:block}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink-900);color:var(--ink-0);padding:12px 18px;border-radius:var(--radius-pill);font:600 14px/1 var(--font-body);transition:top var(--base) var(--ease)}
.skip:focus{top:12px}
.link{font-weight:600;color:var(--ink-900);text-decoration:underline;text-underline-offset:3px}
.link:hover{text-decoration-thickness:2px}
.todo{background:var(--yellow-500);color:var(--ink-900);padding:0 4px;border-radius:4px}
.muted{color:var(--ink-500)}
.center{text-align:center}
.h3{font-weight:800;font-stretch:120%;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.025em}

/* ───── Botones: estados ───── */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading .ico{opacity:0}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-color:var(--ink-900) transparent var(--ink-900) transparent;animation:spin .7s linear infinite}
.btn-k.is-loading::after{border-color:var(--ink-0) transparent var(--ink-0) transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-block{width:100%}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-ghost{color:var(--ink-900)}.btn-ghost:hover{background:var(--ink-100)}
.pay-logos--sm{justify-content:center;transform:scale(.8)}

/* ───── Cart: vacío / botones de la barra ───── */
.drawer .empty .btn{margin-top:16px}
.line .rm{font-size:12px;color:var(--ink-500);text-decoration:underline;text-underline-offset:2px;margin-left:8px}

/* ───── Menú móvil ───── */
.menu-open .scrim,.search-open .scrim{opacity:1;pointer-events:auto}
.mm{position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);width:min(380px,100%);background:var(--paper);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform var(--slow) var(--ease-out);visibility:hidden;overflow-y:auto}
.menu-open .mm{transform:none;visibility:visible}
.mm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--ink-200)}
.mm-head .logo img{height:32px}
.mm-nav{padding:8px 20px;flex:1}
.mm-main{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink-100);font:700 20px/1.2 var(--font-display);font-stretch:112%;color:var(--ink-900)}
.mm-main .ico{color:var(--ink-400)}
.mm-sub{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 18px;border-bottom:1px solid var(--ink-100)}
.mm-sub a{padding:9px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--ink-200);background:var(--ink-0);font:500 14px/1 var(--font-body)}
.mm-wa{margin:16px 20px 24px}

/* ───── Buscador ───── */
.sp{position:fixed;top:0;left:0;right:0;z-index:var(--z-drawer);background:var(--paper);transform:translateY(-104%);transition:transform var(--slow) var(--ease-out);visibility:hidden;max-height:100vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.search-open .sp{transform:none;visibility:visible}
.sp-form{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1.5px solid var(--ink-900)}
.sp-form > .ico{width:26px;height:26px;color:var(--ink-900)}
.sp-form input{flex:1;min-width:0;border:0;background:none;font:700 clamp(20px,3vw,30px)/1.2 var(--font-display);font-stretch:112%;color:var(--ink-900);outline:none;padding:6px 0}
.sp-form input::placeholder{color:var(--ink-400);font-weight:600}
.sp-form input::-webkit-search-cancel-button{display:none}
.sp-body{padding:22px 0 32px;min-height:180px}
.sp-label{font:600 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:14px}
.sp-results ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sp-results li a{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:10px;border-radius:var(--radius)}
.sp-results li a:hover,.sp-results li a:focus-visible{background:var(--ink-100)}
.sp-thumb{display:block;width:52px}
.sp-thumb .af{--fw:2px;box-shadow:none}
.sp-results b{display:block;font:700 16px/1.2 var(--font-display);color:var(--ink-900)}
.sp-results small{color:var(--ink-500);font-size:13px}
.sp-all{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;color:var(--ink-900);text-decoration:underline;text-underline-offset:3px}
.sp-none{padding:20px 0;color:var(--ink-600)}

/* ───── Chips ───── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--radius-pill);border:1.5px solid var(--ink-200);background:var(--ink-0);font:500 14px/1 var(--font-body);color:var(--ink-800);cursor:pointer;white-space:nowrap;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.chip:hover{border-color:var(--ink-400)}
.chip[aria-pressed="true"],.chip.on,.chip[aria-current="page"]{background:var(--ink-900);border-color:var(--ink-900);color:var(--ink-0)}
.chip small{font-size:12px;opacity:.6;font-weight:600}
/* ───── Insignia de candado (pago seguro) y estrellas ───── */
.lockb{flex:none;width:42px;height:42px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.star{display:inline-block;width:18px;height:18px;flex:none;background:linear-gradient(90deg,var(--ink-900) var(--fill,100%),var(--ink-200) var(--fill,100%));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
/* Anclas (p. ej. /#reviews): dejan espacio bajo el encabezado fijo */
/* el desplazamiento bajo el encabezado fijo lo da html{scroll-padding-top} (hang.css), también para el foco con teclado */