/* visor.css — el visor público de perfiles (25-09-2026). Plantilla en
   visor.html; guion en visor.js. Mismos colores, letra y curvas que la
   portada (portada.css), pero sin cargarla entera: aquí solo hay un mapa,
   la tarjeta del perfil, una publicación y un modal. */

:root{
  --verde:#64A06E;
  --tinta:#111310;
  --gris:#656A63;
  --blanco:#FFFFFF;
  --crema-honda:#F2F1EC;
  --entra:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;background:var(--crema-honda);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Japonés y chino (21-10-2026): una fuente CJK de cada sistema detrás de la
   latina, y el interletrado a cero (en caracteres de ancho entero, el
   negativo los amontona). Igual que en portada.css. */
html:lang(ja) body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",sans-serif;word-break:auto-phrase;line-break:strict}
html:lang(zh) body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif}
html:lang(ja) *,html:lang(zh) *{letter-spacing:normal!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ms{
  font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:"liga";font-variation-settings:"FILL" 1;
  font-size:22px;display:inline-block;user-select:none;
}

#mapa{position:fixed;inset:0}

/* ── La tarjeta del perfil, como la de la demo de la portada (25-09-2026) ──
   En el escritorio, una tarjeta blanca a la izquierda con la cara grande
   montada sobre su borde, el nombre, la bio y "Seguir". En el móvil, la
   misma tarjeta es una hoja abajo que asoma la cara y se arrastra hacia
   arriba (hoja-arrastrable.js). Ya no hay barra arriba: se quitó con su
   logo, su perfil y su "Descargar app" (25-09-2026, Ignacio). */
.hoja-perfil{
  position:fixed;z-index:6;left:32px;top:50%;width:310px;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:64px 24px 24px;border-radius:20px;background:var(--blanco);
  box-shadow:0 8px 30px rgba(17,19,16,.12);text-align:center;
}
.hoja-cara{position:absolute;top:-52px;left:50%;margin-left:-52px;width:104px;height:104px}
.hoja-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). */
.hoja-verificado{position:absolute;right:4px;bottom:6px;font-size:19px;padding:2px;color:var(--verde);background:#fff;border-radius:50%}
.hoja-verificado.negro{color:#000}
.hoja-verificado[hidden]{display:none}
.hoja-verificado svg{overflow:visible}
.hoja-compartir{position:absolute;top:14px;right:16px;color:var(--verde)}
.hoja-compartir .ms{font-size:26px}
/* "Enlace copiado" al compartir el perfil donde no hay menú del sistema. */
.hoja-aviso{position:absolute;top:-128px;left:50%;transform:translate(-50%,6px);background:#111;color:#fff;font-size:14px;font-weight:500;padding:8px 14px;border-radius:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.hoja-aviso.visible{opacity:1;transform:translate(-50%,0)}
.hoja-nombre{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hoja-usuario{font-size:13.5px;color:var(--gris);white-space:nowrap}
.hoja-bio{
  margin:6px 0 2px;font-size:14.5px;line-height:1.45;color:var(--tinta);text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.hoja-bio:empty{display:none}
.hoja-seguir{
  margin-top:10px;width:150px;height:42px;border-radius:8px;
  background:var(--verde);color:#fff;font-size:16px;font-weight:600;
  transition:transform .16s var(--entra);
}
.hoja-seguir:active,.hoja-compartir:active{transform:scale(.97)}
/* El aviso de una cuenta autoría, bajo la bio: gris y pequeño, en UNA línea
   que corre de derecha a izquierda (Ignacio, 17-10-2026). Cada vuelta aparece
   con el principio a la vista y se queda quieta un momento para leerlo ("que
   deje leer el principio"); luego corre hasta irse ENTERA y solo entonces
   vuelve ("el texto no aparece hasta que desaparece del todo"): una sola
   copia, nunca dos a la vez. `text-size-adjust`: sin él, Safari del iPhone
   agranda la letra de una línea tan larga y salía enorme. */
.hoja-autoria{
  box-sizing:border-box;margin:8px 0 0;width:100%;padding:0 16px;overflow:hidden;white-space:nowrap;text-align:left;
  font-size:12px;line-height:1.4;color:var(--gris);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);
}
.hoja-autoria[hidden]{display:none}
.hoja-autoria .cinta{display:inline-block;animation:cinta var(--dura,24s) linear infinite}
@keyframes cinta{
  0%{transform:translateX(0);opacity:0}
  3%{opacity:1}
  12%{transform:translateX(0)}
  100%{transform:translateX(calc(-100% - 16px))}
}
@media (prefers-reduced-motion:reduce){
  .hoja-autoria{white-space:normal;text-align:center;-webkit-mask-image:none;mask-image:none;text-wrap:balance}
  .hoja-autoria .cinta{display:inline;animation:none}
}
/* "Reclamar autoría": un enlace verde pequeño, encima de Seguir. */
.hoja-reclamar{margin-top:8px;padding:4px 8px;font-size:13.5px;font-weight:600;color:var(--verde);background:none}
.hoja-reclamar[hidden]{display:none}
/* La tarjeta de reclamar: caja gris de 52 y el botón verde de la casa. */
.modal .hoja.reclamo{aspect-ratio:auto;min-height:0}
.reclamo-form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.reclamo-caja{display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0 16px;border-radius:8px;background:#f5f5f5;overflow:hidden;cursor:text}
.reclamo-caja[hidden]{display:none}
.reclamo-caja.tiembla{animation:tiembla .32s}
/* El correo entero centrado y lo escrito pegado a la @ (Ignacio, 17-10-2026):
   el campo mide lo que su texto (lo ajusta visor.js). */
.reclamo-campo{flex:none;min-width:1ch;max-width:62%;height:100%;padding:0;border:0;background:none;color:var(--tinta);font:inherit;font-size:16px;text-align:right;outline:none}
.reclamo-caja.solo .reclamo-campo{flex:1;max-width:none;text-align:center}
.reclamo-dominio{flex:none;height:100%;padding:0;font:inherit;font-size:16px;color:var(--tinta);background:none}
.reclamo-dominio[hidden]{display:none}
.reclamo-alternativa{margin:18px auto 0 !important;font-size:13.5px !important;max-width:30ch}
.reclamo-alternativa a{color:var(--verde);font-weight:600;text-decoration:none}
.reclamo-alternativa:empty{display:none}
@keyframes tiembla{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.reclamo-error{min-height:18px;font-size:13px;color:#d64545;text-wrap:balance}
.reclamo-boton{min-width:220px;height:52px;padding:0 32px;border-radius:8px;background:var(--verde);color:#fff;font-size:17px;font-weight:600}
.reclamo-boton:active{transform:scale(.97)}
.reclamo-boton[disabled]{opacity:.6}
.reclamo-otra{margin-top:14px;font-size:14px;color:var(--gris);background:none}
.reclamo-otra[hidden]{display:none}
@media (max-width:640px){
  .hoja-perfil{
    --asoma:112px;
    left:0;right:0;top:auto;bottom:0;width:auto;
    padding:64px 24px calc(22px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0;touch-action:none;
    box-shadow:0 -6px 24px rgba(17,19,16,.10);
    transform:translateY(var(--y,calc(100% - var(--asoma))));
    transition:transform .38s var(--entra);
  }
  .hoja-perfil.arrastrando{transition:none}
  .hoja-cara{top:-50px;margin-left:-50px;width:100px;height:100px}
  .hoja-compartir{top:18px;right:22px}
  .hoja-compartir .ms{font-size:30px}
  .hoja-nombre{font-size:21px}
  .hoja-usuario{font-size:14px}
  .hoja-bio{font-size:15px;max-width:34ch;-webkit-line-clamp:unset;display:block}
  .hoja-seguir{width:160px;height:44px}
}


/* ── Las publicaciones en el mapa: cuadradas, como en la app ─────────── */
.pin{
  position:relative;display:block;width:52px;height:52px;border-radius:12px;
  border:2px solid #fff;background:var(--crema-honda);overflow:visible;
  box-shadow:0 4px 14px rgba(17,19,16,.22);
  transition:transform .2s var(--entra);
}
.pin img,.pin video{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;pointer-events:none}
.pin.activo{transform:scale(1.14)}
@media (hover:hover) and (pointer:fine){ .pin:hover{transform:scale(1.08)} }
.pin .cuantas{
  position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--verde);color:#fff;font-size:12px;font-weight:700;line-height:1;
}
/* Entran con un salto pequeño, como los avatares de la app. */
.pin.nuevo{animation:pin-entra .34s var(--entra)}
@keyframes pin-entra{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ── La publicación abierta ────────────────────────────────────────────
   La tarjeta es la de la demo (publicacion.css). Aquí solo la capa que la
   contiene: fija sobre el mapa, y que solo recoge toques con una abierta. */
.capa-publicacion{position:fixed;inset:0;z-index:8;pointer-events:none}
.capa-publicacion.con-tarjeta{pointer-events:auto}

/* ── Los comentarios (08-10-2026) ────────────────────────────────────────
   Para leerlos: en el móvil, una hoja blanca desde abajo como la de la app;
   en el ordenador, una tarjeta en el centro. Encima de la publicación y
   debajo del modal de descarga (que abre "Escribe un comentario…"). */
.social{
  position:fixed;inset:0;z-index:15;display:grid;place-items:center;padding:24px;
  background:rgba(17,19,16,.34);
  opacity:0;visibility:hidden;transition:opacity .22s var(--entra),visibility .22s;
}
.social[aria-hidden="false"]{opacity:1;visibility:visible}
.social-hoja{
  position:relative;width:100%;max-width:440px;max-height:min(640px,82vh);
  display:flex;flex-direction:column;background:var(--blanco);border-radius:18px;
  padding:22px 0 0;overflow:hidden;
  transform:translateY(10px);transition:transform .26s var(--entra);
}
.social[aria-hidden="false"] .social-hoja{transform:none}
.social-asa{display:none}
.social-cerrar{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;color:var(--gris)}
.social-cerrar .ms{font-size:26px}
.social h2{margin:0 56px 12px;text-align:center;font-size:21px;letter-spacing:-.02em}
.social-lista{list-style:none;margin:0;padding:6px 20px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;border-top:1px solid #ecebe6}
.social-lista li{display:flex;gap:12px;align-items:flex-start}
.social-cara{flex:none;width:40px;height:40px;border-radius:999px;object-fit:cover;background:#e8f0e7;color:var(--verde);display:grid;place-items:center;font-size:14px;font-weight:600}
.social-cuerpo{min-width:0;flex:1}
/* Todo en UNA línea: nombre, "Autor", la hora y traducir. Si no cabe, el
   nombre se corta con "…" (Ignacio, 17-10-2026). */
.social-cabeza{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;min-width:0}
.social-cabeza strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-cabeza > :not(strong){flex-shrink:0}
.social-cabeza strong{font-size:15.5px}
.social-autor{font-size:12px;font-weight:600;color:var(--verde);background:#e8f0e7;border-radius:8px;padding:2px 8px}
.social-cuando{font-size:13.5px;color:var(--gris);white-space:nowrap}
.social-cuerpo p{margin:4px 0 0;font-size:15.5px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
/* Traducir (17-10-2026): el icono 文A junto a la hora, gris; en verde
   mientras se ve traducido. Debajo del texto, "Traducido del inglés". */
.social-traducir{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:26px;height:26px;margin:-6px 0 -4px 4px;padding:0;background:none;border:0;color:#999;cursor:pointer}
.social-traducir.activo{color:var(--verde)}
.social-traducir.cargando{opacity:.4;cursor:default}
.social-traduccion{margin-top:4px;font-size:13px;color:var(--gris)}
.social-traduccion[hidden]{display:none}
.social-estado{margin:0;padding:0 20px 18px;text-align:center;color:var(--gris);font-size:15px}
.social-estado:empty{display:none}
/* "Escribe un comentario…" parece el campo de la app, pero abre el modal de
   descarga: comentar es de la app. */
.social-escribir{
  margin:0 16px 16px;padding:13px 16px;border:1px solid #dedcd5;border-radius:12px;
  text-align:left;color:var(--gris);font-size:15.5px;background:var(--blanco);
}
@media (max-width:640px){
  .social{place-items:end stretch;padding:0}
  .social-hoja{max-width:none;max-height:86vh;border-radius:18px 18px 0 0;padding-top:12px;transform:translateY(24px)}
  .social-asa{display:block;width:40px;height:4px;border-radius:999px;background:#d6d4cd;margin:0 auto 12px}
  .social-escribir{margin-bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.social,.social-hoja{transition:none}}

/* ── El modal de descargar la app ────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:20;padding:24px;display:grid;place-items:center;
  background:rgba(17,19,16,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .22s var(--entra),visibility .22s;
}
.modal[aria-hidden="false"]{opacity:1;visibility:visible}
/* En 4:5, como una publicación, y con el contenido centrado en alto: el
   mismo modal que el de la portada. */
.modal .hoja{
  position:relative;width:100%;max-width:400px;aspect-ratio:4/5;padding:34px 30px 28px;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--blanco);border-radius:18px;text-align:center;
  transform:translateY(10px);transition:transform .26s var(--entra);
}
.modal[aria-hidden="false"] .hoja{transform:none}
.modal .cerrar{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;color:var(--gris)}
.modal .cerrar .ms{font-size:26px}
/* El logo de mywolly arriba y, en grande, el claim de la campaña: lo que se
   descarga es mywolly (08-10-2026). */
.modal .modal-logo{display:block;width:68px;height:auto;margin:0 auto 16px;fill:var(--verde)}
/* El párrafo, CENTRADO entre lo de arriba y el botón (norma de Ignacio,
   08-10-2026): medido a ojo, de la línea base del titular a la mayúscula
   del párrafo y de la línea base del párrafo al botón. Con márgenes iguales
   (18/18) el de arriba se veía ~6 px mayor, por el interlineado de cada uno. */
.modal .qr{display:block;width:150px;height:150px;margin:0 auto 22px;border-radius:12px}
.modal h2{margin:0 0 16px;width:100%;font-size:27px;line-height:1.15;letter-spacing:-.02em;contain:inline-size;overflow:hidden}
.modal p{margin:0 auto 22px;max-width:32ch;font-size:15.5px;line-height:1.45;color:var(--gris);text-wrap:balance}
.modal p strong{color:var(--tinta);font-weight:600}
/* La palabra que teclea, con el cursor de la portada: parpadea en reposo y
   se queda fija mientras escribe o borra. */
.modal .tecleo{white-space:nowrap}
.modal .claim-linea{display:block;white-space:nowrap}
.modal .tecleo.vivo::after{content:"";display:inline-block;width:.11em;height:.8em;margin-left:-.01em;vertical-align:-.05em;background:var(--tinta);animation:parpadeo 1.1s steps(1) infinite}
.modal .tecleo.vivo.escribiendo::after{animation:none}
@keyframes parpadeo{50%{opacity:0}}
.tiendas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tiendas a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  background:var(--tinta);color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;
}
.tiendas svg{width:17px;height:17px;fill:#fff}
/* En el ordenador son sellos, no enlaces (lo decide visor.js), en un gris
   suave: informan de dónde está, no piden que se pulsen. */
.tiendas a.solo-sello{cursor:default;background:var(--crema-honda);color:var(--gris)}
.tiendas a.solo-sello svg{fill:var(--gris)}
/* En el teléfono el QR no sirve (no se escanea la propia pantalla): van
   solo los botones de las tiendas. */
/* En el teléfono: sin QR y con la tarjeta del tamaño de su contenido, el
   mismo aire arriba y abajo (29-09-2026, como el modal de la portada). */
@media (max-width:640px) and (pointer:coarse){
  .modal .qr{display:none}
  .modal .hoja{aspect-ratio:auto;padding:52px 28px 40px}
}
.tiendas a[hidden]{display:none}

/* "Ver cómo funciona · 30 s": solo la línea de texto, sin icono (Ignacio,
   08-10-2026: menos protagonismo), en el verde de los enlaces secundarios. */
.modal-ver-video{display:inline-block;margin:16px auto 0;padding:6px 8px;color:var(--verde);font-size:14.5px;font-weight:500}
.modal-ver-video:active{transform:scale(.97)}
/* Viendo el vídeo: la tarjeta solo enseña el vídeo y la X, que vuelve al
   aviso. Sin fondo negro: el vídeo trae un filo oscuro a los lados que se
   veía como dos rayas; se recorta 2 px por cada lado. */
.modal .hoja.viendo{aspect-ratio:auto;padding:56px 16px 16px}
.modal .hoja.viendo > :not(.modal-video):not(.cerrar){display:none}
.modal-video{position:relative}
.modal-video video{display:block;width:100%;max-height:min(72vh,640px);background:transparent;object-fit:cover;clip-path:inset(0 2px round 12px);cursor:pointer}
.modal-video[hidden]{display:none}
/* El play del centro, solo en pausa: círculo blanco translúcido. */
.modal-video-boton{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--tinta);opacity:0;pointer-events:none;transition:opacity .2s var(--entra)}
.modal-video-boton .ms{font-size:40px}
.modal-video.en-pausa .modal-video-boton{opacity:1;pointer-events:auto}
/* Sin los controles nativos en ningún navegador. */
.modal-video video::-webkit-media-controls{display:none!important}
.modal-video video::-webkit-media-controls-enclosure{display:none!important}

@media (prefers-reduced-motion:reduce){
  .pin,.pin.nuevo,.modal,.modal .hoja,.hoja-perfil{animation:none;transition: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}

/* El contenido para los buscadores (09-10-2026, publicPages.ts): el mismo
   texto que la tarjeta, en HTML de verdad. Oculto a la vista con el patrón de
   accesibilidad, no con display:none, para que los buscadores lo lean. */
.indexable{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}