/* Piezas comunes de las webs de ejemplo: franja superior, idioma ES/EN y aviso de demo */

/* Idioma: el español se ve siempre; el inglés solo al cambiar (el contenido se lee sin JS) */
[data-l="en"] { display: none !important; }
html.en [data-l="en"] { display: revert !important; }
html.en [data-l="es"] { display: none !important; }

.demo-bar {
  position: relative; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px; background: #2a0f12; color: #efe5d3; text-align: center;
  font: 500 12px/1.4 "DM Mono", ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase;
}
.demo-bar a { color: #e8c9a1; text-decoration: none; border-bottom: 1px solid currentColor; }
.demo-bar a:hover { color: #fff; }

.lang { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; font: 600 13px/1 system-ui, sans-serif; }
.lang button { appearance: none; border: 0; background: transparent; color: inherit; padding: 8px 12px; cursor: pointer; font: inherit; letter-spacing: .04em; }
.lang button[aria-pressed="true"] { background: var(--lang-on-bg, #000); color: var(--lang-on-fg, #fff); }

.demo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 14px 18px; border-radius: 12px; background: #2a0f12; color: #efe5d3;
  font: 500 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
  transition: opacity .3s, transform .3s;
}
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }

.example-note {
  display: inline-block; font: 600 11px/1 "DM Mono", ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; border: 1px dashed currentColor; opacity: .8;
}

/* Mapa ilustrado (sin cargar Google Maps) */
.fake-map { position: relative; overflow: hidden; min-height: 240px; border-radius: inherit;
  background-color: #e9e4da;
  background-image:
    linear-gradient(28deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-62deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
    linear-gradient(90deg, transparent 70%, #fff 70%, #fff 74%, transparent 74%),
    radial-gradient(circle at 20% 80%, #cfe0c3 0 14%, transparent 14.5%);
}
.fake-map .pin { position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; transform: translate(-50%, -100%) rotate(-45deg); border-radius: 50% 50% 50% 0; background: #c5301e; box-shadow: 0 8px 16px -6px rgba(0,0,0,.5); }
.fake-map .pin::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }