/* Ambiente por giro (generado con tools/generar-giros-css.py: cambia los colores y fondos allá): colores, fondos sutiles y el pin vestido según el giro.
   El naranja de la marca (--brand, .btn-brand) no cambia; el giro solo aporta acentos, fondos y personaje. */

[data-giro="restaurante"] { --giro-accent: #e0582b; --giro-soft: #fde9df; --giro-ink: #7a2a10; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g transform="translate(14 20) rotate(10)"><path d="M0 0 c8 -2 16 2 18 10 c-6 -4 -12 -4 -18 -2z" fill="%23e0582b"/><path d="M0 0 c-2 -3 -1 -6 2 -7" stroke="%233f9a5b" stroke-width="1.8" fill="none"/></g><ellipse cx="70" cy="24" rx="7" ry="3" fill="%233f9a5b" transform="rotate(30 70 24)"/><g transform="translate(80 74) rotate(-30)"><path d="M0 0 c8 -2 16 2 18 10 c-6 -4 -12 -4 -18 -2z" fill="%23f2a33a"/><path d="M0 0 c-2 -3 -1 -6 2 -7" stroke="%233f9a5b" stroke-width="1.8" fill="none"/></g><ellipse cx="22" cy="86" rx="7" ry="3" fill="%233f9a5b" transform="rotate(-20 22 86)"/><circle cx="104" cy="44" r="2.4" fill="%23e0582b"/><circle cx="48" cy="56" r="2" fill="%23f2a33a"/><circle cx="60" cy="104" r="2.4" fill="%23e0582b"/></svg>'); }
[data-giro="pasteleria"] { --giro-accent: #e0628a; --giro-soft: #fde6ee; --giro-ink: #7d2141; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><rect x="12" y="14" width="10" height="3.4" rx="1.7" fill="%23e0628a" transform="rotate(-30 17 15.7)"/><rect x="60" y="10" width="10" height="3.4" rx="1.7" fill="%23f2a33a" transform="rotate(20 65 11.7)"/><rect x="98" y="30" width="10" height="3.4" rx="1.7" fill="%237fd1c4" transform="rotate(-60 103 31.7)"/><rect x="30" y="52" width="10" height="3.4" rx="1.7" fill="%238b5ba0" transform="rotate(50 35 53.7)"/><rect x="76" y="60" width="10" height="3.4" rx="1.7" fill="%23e0628a" transform="rotate(-10 81 61.7)"/><rect x="14" y="94" width="10" height="3.4" rx="1.7" fill="%237fd1c4" transform="rotate(15 19 95.7)"/><rect x="54" y="96" width="10" height="3.4" rx="1.7" fill="%23f2a33a" transform="rotate(-45 59 97.7)"/><rect x="96" y="92" width="10" height="3.4" rx="1.7" fill="%238b5ba0" transform="rotate(35 101 93.7)"/></svg>'); }
[data-giro="floreria"] { --giro-accent: #3f9a5b; --giro-soft: #e3f4e7; --giro-ink: #1d5230; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g transform="translate(20 22) scale(1)"><g fill="%23ec5f86"><circle cx="0" cy="-6" r="4.5"/><circle cx="5.7" cy="-1.9" r="4.5"/><circle cx="3.5" cy="4.9" r="4.5"/><circle cx="-3.5" cy="4.9" r="4.5"/><circle cx="-5.7" cy="-1.9" r="4.5"/></g><circle r="3" fill="%23f5c542"/></g><ellipse cx="44" cy="30" rx="7" ry="3" fill="%233f9a5b" transform="rotate(-30 44 30)"/><g transform="translate(86 58) scale(0.8)"><g fill="%23f5a3bd"><circle cx="0" cy="-6" r="4.5"/><circle cx="5.7" cy="-1.9" r="4.5"/><circle cx="3.5" cy="4.9" r="4.5"/><circle cx="-3.5" cy="4.9" r="4.5"/><circle cx="-5.7" cy="-1.9" r="4.5"/></g><circle r="3" fill="%23f5c542"/></g><ellipse cx="70" cy="70" rx="7" ry="3" fill="%234fae5f" transform="rotate(40 70 70)"/><g transform="translate(30 94) scale(0.9)"><g fill="%23e2553a"><circle cx="0" cy="-6" r="4.5"/><circle cx="5.7" cy="-1.9" r="4.5"/><circle cx="3.5" cy="4.9" r="4.5"/><circle cx="-3.5" cy="4.9" r="4.5"/><circle cx="-5.7" cy="-1.9" r="4.5"/></g><circle r="3" fill="%23f5c542"/></g><ellipse cx="104" cy="104" rx="7" ry="3" fill="%233f9a5b" transform="rotate(-15 104 104)"/><ellipse cx="102" cy="18" rx="4.5" ry="2.6" fill="%23ec5f86" transform="rotate(30 102 18)"/><ellipse cx="60" cy="108" rx="4.5" ry="2.6" fill="%23f5a3bd" transform="rotate(-20 60 108)"/></svg>'); }
[data-giro="tienda"] { --giro-accent: #7b4f8e; --giro-soft: #f1e8f6; --giro-ink: #3f2350; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g transform="translate(22 22)"><rect x="-7" y="-4" width="14" height="11" rx="1.5" fill="%237b4f8e"/><rect x="-8.5" y="-7.5" width="17" height="4.5" rx="1.2" fill="%237b4f8e"/><rect x="-1.4" y="-7.5" width="2.8" height="14.5" fill="%23f2a33a"/></g><path d="M80 19 l2.0 5.0 5.0 2.0 -5.0 2.0 -2.0 5.0 -2.0 -5.0 -5.0 -2.0 5.0 -2.0z" fill="%23f2a33a"/><path d="M46 65 l1.4 3.6 3.6 1.4 -3.6 1.4 -1.4 3.6 -1.4 -3.6 -3.6 -1.4 3.6 -1.4z" fill="%23c49ad6"/><g transform="translate(92 86)"><rect x="-7" y="-4" width="14" height="11" rx="1.5" fill="%23946aa8"/><rect x="-8.5" y="-7.5" width="17" height="4.5" rx="1.2" fill="%23946aa8"/><rect x="-1.4" y="-7.5" width="2.8" height="14.5" fill="%23f2a33a"/></g><path d="M18 90 l1.7 4.3 4.3 1.7 -4.3 1.7 -1.7 4.3 -1.7 -4.3 -4.3 -1.7 4.3 -1.7z" fill="%23f2a33a"/><circle cx="62" cy="40" r="2.2" fill="%237b4f8e"/><circle cx="108" cy="54" r="2.2" fill="%23f2a33a"/><circle cx="58" cy="106" r="2.2" fill="%237b4f8e"/></svg>'); }
[data-giro="mascotas"] { --giro-accent: #1f9e8f; --giro-soft: #ddf3ef; --giro-ink: #0d4d45; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><g fill="%231f9e8f" transform="translate(22 22) scale(1)"><ellipse cx="0" cy="4" rx="6" ry="5"/><circle cx="-7" cy="-4" r="2.6"/><circle cx="-2.4" cy="-8" r="2.6"/><circle cx="3" cy="-8" r="2.6"/><circle cx="7.4" cy="-3.6" r="2.6"/></g><g fill="%23f2a33a" transform="translate(82 40) scale(0.8)"><ellipse cx="0" cy="4" rx="6" ry="5"/><circle cx="-7" cy="-4" r="2.6"/><circle cx="-2.4" cy="-8" r="2.6"/><circle cx="3" cy="-8" r="2.6"/><circle cx="7.4" cy="-3.6" r="2.6"/></g><g fill="%231f9e8f" transform="translate(40 78) scale(0.9)"><ellipse cx="0" cy="4" rx="6" ry="5"/><circle cx="-7" cy="-4" r="2.6"/><circle cx="-2.4" cy="-8" r="2.6"/><circle cx="3" cy="-8" r="2.6"/><circle cx="7.4" cy="-3.6" r="2.6"/></g><g fill="%23e0628a" transform="translate(98 98) scale(1)"><ellipse cx="0" cy="4" rx="6" ry="5"/><circle cx="-7" cy="-4" r="2.6"/><circle cx="-2.4" cy="-8" r="2.6"/><circle cx="3" cy="-8" r="2.6"/><circle cx="7.4" cy="-3.6" r="2.6"/></g><path d="M64 14c-1.5-2-4.5-1.1-4.5 1.1 0 1.9 2.6 3.5 4.5 5 1.9-1.5 4.5-3.1 4.5-5 0-2.2-3-3.1-4.5-1.1z" fill="%23e0628a"/><path d="M14 108c-1.5-2-4.5-1.1-4.5 1.1 0 1.9 2.6 3.5 4.5 5 1.9-1.5 4.5-3.1 4.5-5 0-2.2-3-3.1-4.5-1.1z" fill="%23f2a33a"/></svg>'); }
[data-giro="limpieza"] { --giro-accent: #2b8fd6; --giro-soft: #e1f0fb; --giro-ink: #0f4670; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><circle cx="20" cy="22" r="9" fill="none" stroke="%232b8fd6" stroke-width="1.6"/><circle cx="16.9" cy="18.9" r="2.0" fill="%232b8fd6"/><circle cx="70" cy="16" r="5" fill="none" stroke="%232b8fd6" stroke-width="1.6"/><circle cx="68.2" cy="14.2" r="1.1" fill="%232b8fd6"/><circle cx="96" cy="52" r="11" fill="none" stroke="%235fb2ea" stroke-width="1.6"/><circle cx="92.2" cy="48.1" r="2.4" fill="%235fb2ea"/><circle cx="40" cy="64" r="6" fill="none" stroke="%232b8fd6" stroke-width="1.6"/><circle cx="37.9" cy="61.9" r="1.3" fill="%232b8fd6"/><circle cx="16" cy="100" r="7" fill="none" stroke="%235fb2ea" stroke-width="1.6"/><circle cx="13.6" cy="97.5" r="1.5" fill="%235fb2ea"/><circle cx="72" cy="96" r="9" fill="none" stroke="%232b8fd6" stroke-width="1.6"/><circle cx="68.8" cy="92.8" r="2.0" fill="%232b8fd6"/><circle cx="108" cy="108" r="4" fill="none" stroke="%232b8fd6" stroke-width="1.6"/><circle cx="106.6" cy="106.6" r="0.9" fill="%232b8fd6"/></svg>'); }
[data-giro="perfumeria"] { --giro-accent: #a24c8f; --giro-soft: #f6e7f2; --giro-ink: #55194a; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path d="M20 14 l2.2 5.8 5.8 2.2 -5.8 2.2 -2.2 5.8 -2.2 -5.8 -5.8 -2.2 5.8 -2.2z" fill="%23d9b44a"/><path d="M76 15 l1.4 3.6 3.6 1.4 -3.6 1.4 -1.4 3.6 -1.4 -3.6 -3.6 -1.4 3.6 -1.4z" fill="%23a24c8f"/><path d="M50 48 l2.8 7.2 7.2 2.8 -7.2 2.8 -2.8 7.2 -2.8 -7.2 -7.2 -2.8 7.2 -2.8z" fill="%23d9b44a"/><path d="M100 58 l1.7 4.3 4.3 1.7 -4.3 1.7 -1.7 4.3 -1.7 -4.3 -4.3 -1.7 4.3 -1.7z" fill="%23a24c8f"/><path d="M22 90 l1.7 4.3 4.3 1.7 -4.3 1.7 -1.7 4.3 -1.7 -4.3 -4.3 -1.7 4.3 -1.7z" fill="%23a24c8f"/><path d="M84 94 l2.2 5.8 5.8 2.2 -5.8 2.2 -2.2 5.8 -2.2 -5.8 -5.8 -2.2 5.8 -2.2z" fill="%23d9b44a"/><circle cx="104" cy="28" r="2" fill="%23d9b44a"/><circle cx="44" cy="108" r="2" fill="%23d9b44a"/></svg>'); }
[data-giro="suplementos"] { --giro-accent: #4c5fd5; --giro-soft: #e7eafb; --giro-ink: #1f2a73; --giro-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><path transform="translate(16 12) scale(1)" d="M3 0 l-6 12 h6 l-3 10 9 -14 h-6 l4 -8z" fill="%234c5fd5"/><path transform="translate(72 50) scale(0.8)" d="M3 0 l-6 12 h6 l-3 10 9 -14 h-6 l4 -8z" fill="%23f2c94c"/><path transform="translate(30 80) scale(0.9)" d="M3 0 l-6 12 h6 l-3 10 9 -14 h-6 l4 -8z" fill="%234c5fd5"/><path transform="translate(96 92) scale(1)" d="M3 0 l-6 12 h6 l-3 10 9 -14 h-6 l4 -8z" fill="%23f2c94c"/><circle cx="70" cy="16" r="2.4" fill="%234c5fd5"/><circle cx="104" cy="30" r="2.4" fill="%23f2c94c"/><circle cx="56" cy="104" r="2.4" fill="%234c5fd5"/></svg>'); }

/* ---------- Chip del giro ---------- */
.giro-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
  letter-spacing: .02em; background: var(--giro-soft, #fde9df); color: var(--giro-ink, #7a2a10); line-height: 1.4; white-space: nowrap; }
.giro-chip i { color: var(--giro-accent, #e0582b); }
.giro-chip.on-dark { background: rgba(255,255,255,.12); color: #fff; }
.giro-chip.on-dark i { color: var(--giro-accent, #f2a33a); filter: brightness(1.35); }

/* ---------- Fondos sutiles ---------- */
.giro-pattern { position: relative; isolation: isolate; }
.giro-pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: var(--giro-pattern-opacity, .14); }
.giro-pattern.on-dark::before { opacity: var(--giro-pattern-opacity, .2); filter: saturate(1.2) brightness(1.4); }
/* Panel: una franja con el fondo del giro arriba del contenido, que se desvanece. */
.panel-body[data-giro] .main { position: relative; }
.panel-body[data-giro] .main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 320px; pointer-events: none; z-index: 0;
  background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: .09;
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
.panel-body[data-giro] .main > * { position: relative; z-index: 1; }

/* Tarjeta del negocio en el menú lateral */
.panel-body[data-giro] .side-store { box-shadow: inset 3px 0 0 var(--giro-accent); }
.side-store .giro-chip { margin-top: .3rem; font-size: .66rem; padding: .1rem .5rem; }

/* Bienvenida del inicio: fondo del giro y el pin */
.panel-body[data-giro] .welcome { position: relative; overflow: hidden; isolation: isolate; }
.panel-body[data-giro] .welcome::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: .16; filter: saturate(1.15) brightness(1.5);
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%); mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%); }
.welcome .giro-chip { margin-bottom: .5rem; }
.welcome .gpin { width: 150px; margin: -30px -10px -34px 0; align-self: flex-end; }
@media (max-width: 767.98px) { .welcome .gpin { position: absolute; right: 8px; top: 6px; width: 70px; margin: 0; opacity: .95; } .welcome h1 { padding-right: 64px; } }

/* ---------- El pin del giro ---------- */
.gpin { display: inline-block; width: 150px; aspect-ratio: 1; position: relative; flex: none; }
.gpin svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gpin-shadow { fill: rgba(42,27,18,.16); }
.gpin-sm { width: 84px; } .gpin-lg { width: 190px; } .gpin-xl { width: 230px; }
.gpin .gpin-body, .gpin .gpin-acc, .gpin .fx, .gpin .gpin-hat, .gpin .gpin-tail, .gpin .gpin-ear, .gpin .gpin-bow, .gpin .gpin-bloom, .gpin .gpin-cherry { transform-box: fill-box; transform-origin: center; }
.gpin .gpin-body { animation: gpin-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.gpin .gpin-acc { animation: gpin-sway 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.gpin .gpin-shadow { animation: gpin-shadow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.gpin .fx { animation: gpin-float 3.6s ease-in-out infinite; }
.gpin .fx-2 { animation-delay: -1.2s; } .gpin .fx-3 { animation-delay: -2.4s; } .gpin .fx-4 { animation-delay: -.6s; }
.gpin-restaurante .fx { fill: none; stroke: rgba(160,140,130,.55); stroke-width: 2.4; stroke-linecap: round; animation-name: gpin-steam; }
.gpin-limpieza .fx { fill: rgba(191,227,250,.55); stroke: #5fb2ea; stroke-width: 1.4; animation-name: gpin-bubble; }
.gpin-perfumeria .fx, .gpin-tienda .fx { animation-name: gpin-twinkle; }
.gpin-pasteleria .fx, .gpin-floreria .fx { animation-name: gpin-drift; }
.gpin-mascotas .gpin-tail { animation: gpin-wag .5s ease-in-out infinite alternate; transform-origin: 0% 100%; }
.gpin-mascotas .gpin-ear { animation: gpin-ear 3.2s ease-in-out infinite; transform-origin: 30% 0%; }
.gpin-tienda .gpin-bow, .gpin-floreria .gpin-bloom { animation: gpin-pulse 2.4s ease-in-out infinite; }
.gpin-floreria .gpin-bloom.b2 { animation-delay: -.8s; } .gpin-floreria .gpin-bloom.b3 { animation-delay: -1.6s; }
.gpin-pasteleria .gpin-cherry { animation: gpin-pulse 2.4s ease-in-out infinite; }
.gpin .gpin-hat { animation: gpin-hat 3.2s ease-in-out infinite; }
@keyframes gpin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes gpin-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(-2px); } }
@keyframes gpin-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.86); opacity: .7; } }
@keyframes gpin-hat { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes gpin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gpin-drift { 0% { transform: translateY(-3px) rotate(0); } 50% { transform: translateY(4px) rotate(25deg); } 100% { transform: translateY(-3px) rotate(0); } }
@keyframes gpin-twinkle { 0%, 100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes gpin-bubble { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-18px) scale(1.05); opacity: 0; } }
@keyframes gpin-steam { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes gpin-wag { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes gpin-ear { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } }
@keyframes gpin-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .gpin *, .gpin { animation: none !important; } }

/* ---------- Pantallas vacías ilustradas ---------- */
.giro-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.4rem 1rem 1.6rem; border-radius: 18px;
  background: var(--giro-soft, #fde9df); position: relative; overflow: hidden; isolation: isolate; }
.giro-empty::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: .22; }
.giro-empty .gpin { width: 150px; margin-bottom: -.4rem; }
.giro-empty .giro-bubble { position: relative; display: inline-block; background: #fff; color: var(--giro-ink, #2a1b12); font-weight: 700; font-size: .92rem;
  padding: .5rem .9rem; border-radius: 14px; box-shadow: 0 6px 16px -10px rgba(42,27,18,.45); max-width: 340px; }
.giro-empty .giro-bubble::after { content: ""; position: absolute; left: 50%; top: -7px; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #fff; }
.giro-empty h2, .giro-empty .h5 { color: var(--giro-ink, #2a1b12); margin-top: .5rem; }

/* ---------- Pantalla de apertura (cocina, mostrador, taller o tienda) ---------- */
.kitchen-body[data-giro] .start-overlay { isolation: isolate; }
.kitchen-body[data-giro] .start-overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: .08; filter: brightness(1.6) saturate(1.1);
  -webkit-mask: radial-gradient(60% 60% at 50% 40%, transparent 0%, #000 100%); mask: radial-gradient(60% 60% at 50% 40%, transparent 0%, #000 100%); }
.start-hero { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; gap: .2rem; margin-bottom: .2rem; }
.start-hero .gpin { width: 150px; }
.start-hero .start-bell { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; margin-bottom: 26px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.start-hero .start-bell > .bi-bell-fill { font-size: 2.6rem; color: var(--brand, #d76112); animation: start-ring 4s ease-in-out infinite; transform-origin: 50% 10%; }
.start-hero .start-badge { position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--giro-accent, #e0582b); color: #fff; font-size: 1rem; box-shadow: 0 0 0 4px #131014; }
@keyframes start-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(14deg); } 78% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } 86% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .start-hero .start-bell > .bi-bell-fill { animation: none; } }
@media (max-width: 575.98px) { .start-hero .gpin { width: 110px; } }

/* ---------- Tienda pública ---------- */
/* Sin foto de portada: el fondo del giro le da ambiente a la portada de color. */
.store-body[data-giro] .st-hero-bg.fallback::after { content: ""; position: absolute; inset: 0; background: var(--giro-pattern) 0 0 / 120px 120px repeat; opacity: .16; filter: brightness(1.6); }
.store-body[data-giro] .st-empty .gpin { width: 170px; }