/* demo.css — la demo de la portada (25-09-2026, esquema de Ignacio).
   Un marco en mitad de la página con el mapa, la tarjeta de perfil genérica a
   la izquierda y el "+" abajo a la derecha. (El carrusel de fotos se quitó el
   25-09-2026: "solo ensucia".) Al tocar un
   avatar, la publicación sale en el centro con el resto velado. Marcado en
   index.html (#demo), guion en demo.js. */

/* El panel: el mismo velo desenfocado que los modales, con el marco dentro. */
/* Flex y no grid: en una rejilla con `place-items:center` el ancho al 100 %
   del marco se calculaba contra su propio contenido y en el móvil se salía
   por la derecha. */
#demo{
  padding:24px;display:flex;align-items:center;justify-content:center;
  background:rgba(17,19,16,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
/* `#demo .demo-marco` y no `.demo-marco` a secas: `.panel .hoja` de
   portada.css le ponía un tope de 460/620 px y la dejaba en una columna. */
#demo .demo-marco{
  position:relative;overflow:hidden;max-width:none;margin:0;
  width:100%;max-width:1240px;height:min(780px,calc(100vh - 48px));height:min(780px,calc(100dvh - 48px));
  border-radius:22px;background:#0b1020;
}
/* Con el `#demo` delante: la hoja de Mapbox, que se carga después, le pone
   `.mapboxgl-map{position:relative}` y el mapa se quedaba con 0 px de alto
   (todo negro, con los avatares puestos pero sin sitio donde verse). */
#demo .demo-mapa{position:absolute;inset:0}
/* Los botones de la demo, sin el aspecto de botón del navegador (salían con
   caja blanca y borde). Con `:where` para que no pese más que las clases de
   cada botón, que ponen su propio fondo. */
:where(#demo) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.demo-marco > .cerrar{
  position:absolute;z-index:6;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--tinta);
}
.demo-marco > .cerrar .ms{font-size:24px}

/* Lo que va encima del mapa entra DESPUÉS del vuelo del mundo: `.listo` lo
   pone demo.js cuando el mapa llega a Europa. */
.demo-perfil,.demo-mas{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--entra),transform .45s var(--entra);
}
.demo-marco.listo .demo-perfil,
.demo-marco.listo .demo-mas{opacity:1;transform:none}
.demo-marco.listo .demo-mas{transition-delay:.15s}

/* ── La tarjeta de perfil, genérica: barras grises en vez de texto ─────── */
.demo-perfil{
  position:absolute;z-index:3;left:5%;top:50%;margin-top:-230px;
  width:250px;padding:64px 22px 22px;border-radius:20px;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.demo-marco.listo .demo-perfil{transform:none}
.demo-cara{position:absolute;top:-52px;left:50%;margin-left:-52px;width:104px;height:104px}
.demo-cara img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;background:var(--crema-honda)}
/* El verificado, más pequeño que la cara y siempre sobre su círculo blanco
   (25-09-2026, Ignacio). */
.demo-verificado{position:absolute;right:4px;bottom:6px;font-size:19px;padding:2px;color:var(--verde);background:#fff;border-radius:50%}
.demo-compartir{position:absolute;top:14px;right:16px;color:var(--verde)}
.demo-compartir .ms{font-size:24px}
.demo-barra{display:block;width:100%;height:18px;border-radius:9px;background:#ECEBE7}
.demo-barra.corta{width:52%}
.demo-cifras{display:flex;gap:26px;margin-top:10px;font-size:15px;color:#A7AAA3}
.demo-cifras > span{display:inline-flex;align-items:center;gap:7px}
.demo-cifras .ms{font-size:26px;color:#DEDDD8}
.demo-seguir{
  margin-top:8px;width:120px;height:40px;border-radius:8px;background:var(--verde);color:#fff;
  display:grid;place-items:center;transition:transform .16s var(--entra);
}
.demo-seguir .ms{font-size:28px}
.demo-capas{display:flex;gap:8px;margin-top:14px}
.demo-capas button{
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:999px;
  border:1px solid rgba(17,19,16,.09);background:#fff;transition:transform .16s var(--entra);
}
.demo-capas img{width:28px;height:28px;border-radius:7px;display:block}
.demo-capas .interruptor{
  position:relative;width:32px;height:19px;border-radius:999px;background:var(--verde);
}
.demo-capas .interruptor::after{
  content:"";position:absolute;top:2px;left:15px;width:15px;height:15px;border-radius:50%;background:#fff;
}

/* ── Las publicaciones en el mapa: avatares con su categoría, como la app ─
   Filetes finos (25-09-2026, Ignacio: "reduce los filetes de los avatares e
   iconos"): 2 px el avatar y 1,5 px la insignia. */
.demo-avatar{
  position:relative;width:62px;height:62px;border-radius:50%;padding:0;
  border:2px solid #fff;background:var(--crema-honda);box-shadow:0 4px 14px rgba(17,19,16,.25);
  animation:demo-entra .42s var(--entra) both;animation-delay:var(--d,0s);
  transition:transform .2s var(--entra);
}
.demo-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;pointer-events:none}
.demo-insignia{
  position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid #fff;display:grid;place-items:center;color:#fff;
}
.demo-insignia .ms{font-size:14px}
.demo-insignia.restaurante{background:#F5A623}
.demo-insignia.alojamiento{background:#D4851F}
.demo-insignia.experiencia{background:var(--verde)}
@keyframes demo-entra{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media (hover:hover) and (pointer:fine){ .demo-avatar:hover{transform:scale(1.08)} }

/* ── El "+", abajo a la derecha ─────────────────────────────────────────── */
.demo-mas{
  position:absolute;z-index:3;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--verde);color:#fff;
  box-shadow:0 6px 18px rgba(17,19,16,.22);transition:transform .16s var(--entra);
}
.demo-mas .ms{font-size:32px}
.demo-seguir:active,.demo-capas button:active,.demo-mas:active{transform:scale(.96)}

/* La publicación abierta: publicacion.css, compartida con el visor. */

/* ── Móvil: el marco a pantalla casi completa y todo más compacto ───────── */
@media (max-width:760px){
  #demo{padding:10px}
  .demo-marco{height:calc(100vh - 20px);height:calc(100dvh - 20px);border-radius:18px}
  /* En el móvil la tarjeta de perfil es una HOJA abajo, como en la app
     (25-09-2026, esquema de Ignacio): asoma la cara, grande y centrada, y
     se arrastra hacia arriba para ver el resto. `--y` lo escribe demo.js al arrastrar; en reposo la
     hoja enseña solo `--asoma` px. */
  .demo-perfil{
    --asoma:112px;
    left:0;right:0;top:auto;bottom:0;margin:0;width:auto;
    padding:70px 24px calc(22px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0;gap:12px;touch-action:none;
    transform:translateY(100%);
  }
  #demo .demo-marco.listo .demo-perfil{
    transform:translateY(var(--y,calc(100% - var(--asoma))));
    transition:opacity .45s var(--entra),transform .38s var(--entra);
  }
  #demo .demo-marco.listo .demo-perfil.arrastrando{transition:none}
  .demo-cara{top:-50px;left:50%;margin-left:-50px;width:100px;height:100px}
  .demo-verificado{font-size:20px;right:2px;bottom:4px}
  .demo-compartir{top:18px;right:22px}
  .demo-compartir .ms{font-size:30px}
  .demo-mas{right:14px;bottom:128px;width:52px;height:52px}
  .demo-avatar{width:50px;height:50px}
}

@media (prefers-reduced-motion:reduce){
  .demo-perfil,.demo-mas{transition:none}
  .demo-avatar{animation:none}
}

/* Sin el logo ni la "i" de Mapbox (25-09-2026, Ignacio: "quita la marca de
   agua"), igual que en la app, que los apaga en todos sus mapas. OJO: las
   condiciones de Mapbox piden enseñarlos; es una decisión tomada. */
.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right{display:none!important}

/* Textos equilibrados (01-10-2026, norma de Ignacio: "que en los párrafos
   queden repartidas"): las líneas de un largo parecido, nunca una llena y la
   última a medias. El navegador solo equilibra hasta seis líneas; un párrafo
   más largo se queda como estaba, sin palabra sola al final (pretty). */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,blockquote,label,.bajada{text-wrap:pretty;text-wrap:balance}