/* Estilos compartidos del catálogo público: colores, cabecera con logo e idiomas, pie, pantalla de carga y barra de contacto */
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --ink:#16202A; --muted:#5B6673; --line:#DDE1E6;
  --accent:#E8551F; --accent-ink:#C2410C; --stage:#0e1318; --deal:#B91C1C; --deal-bg:#FEF2F2;
  --wa:#1F9E55; --line-app:#06A04A;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-pixel:"DotGothic16","Noto Sans JP",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55}
img{max-width:100%}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.in{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* cabecera */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{height:40px;width:auto;display:block}
.brand .name{font:800 17px/1 var(--f-display);letter-spacing:.04em;white-space:nowrap}
.brand .name span{color:var(--accent)}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:13px;flex:none}
.langs button{white-space:nowrap;border:0;background:var(--surface);color:var(--muted);font:inherit;padding:0 11px;min-height:44px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.back{font-size:14px;color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:4px}

/* pie */
.foot{margin-top:32px;background:var(--ink);color:#C9D1DA;font-size:13px}
.foot .in{padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.foot b{color:#fff;font:800 16px var(--f-display)}
.foot a{color:#fff}

/* pantalla de carga: el mecánico jala el auto con una soga y llegan 3 compañeros */
.loader{position:fixed;inset:0;background:#0b1014;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-inline:16px}
.loader canvas{width:min(560px,100%);height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.loader p{margin:0;font:20px/1.3 var(--f-pixel);color:#fff;text-align:center}

/* barra de contacto fija (fichas) */
.cta{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));z-index:15}
.cta .row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cta a,.cta button{min-height:52px;border-radius:8px;border:0;font:700 14px var(--f-body);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.cta svg,.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.c-call{background:var(--ink)}.c-wa{background:var(--wa)}.c-line{background:var(--line-app)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;z-index:50;max-width:calc(100% - 32px);text-align:center}
@media (max-width:640px){.back .bt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.back{font-size:20px;min-width:32px}.brand .name{font-size:14px}.brand img{height:32px}.langs button{padding:0 8px}}