@font-face{font-family:Tzatzy;src:local("Arial")}
:root{
  --fondo:#0f1720;
  --panel:#172330;
  --texto:#f4f7fa;
  --texto-secundario:#a9b5c1;
  --acento:#8f6df2;
  --linea:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html{background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:Tzatzy,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img,video{max-width:100%}
body.modal-abierto{overflow:hidden}
.contenedor{width:min(960px,100%);margin:auto;padding:10px 3px 24px}

.cabecera{padding:12px 14px 14px}
.perfil{position:relative;display:flex;align-items:flex-start;gap:15px}
.foto-perfil{flex:0 0 auto;width:94px;height:94px;border-radius:50%;object-fit:cover;background:var(--panel)}
.foto-vacia{display:grid;place-items:center;font-size:28px}
.datos{min-width:0;flex:1}
.datos h1{margin:2px 0 4px;font-size:34px;font-weight:500;line-height:1.1}
.datos p,.datos small{display:block;margin:0;color:var(--texto-secundario);font-size:15px;line-height:1.4}
.redes-perfil{display:flex;align-items:center;gap:11px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.redes-perfil::-webkit-scrollbar{display:none}
.red-perfil{flex:0 0 19px;width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;color:var(--texto-secundario);line-height:0}
.red-perfil .icono-red,.red-perfil .icono-red svg{display:block;width:19px;height:19px}
.red-perfil.activa{color:var(--acento)}
.red-perfil.inactiva{opacity:.28;filter:grayscale(1)}
.abreviatura-red{font-size:9px;font-weight:800}
.boton-visitas{position:absolute;top:0;right:0;display:flex;align-items:center;gap:4px;padding:5px 7px;border:0;border-radius:10px;background:rgba(23,35,48,.72);color:var(--texto-secundario);font-size:11px}
.icono-ojo{display:inline-flex;width:14px;height:14px;vertical-align:middle}
.icono-ojo svg{width:100%;height:100%}

.pestanas{display:grid;grid-template-columns:48px repeat(4,minmax(0,1fr));gap:4px;align-items:center;margin:4px 4px 14px}
.pestanas a{height:44px;display:grid;place-items:center;border-radius:13px;color:var(--texto-secundario);font-size:13px}
.pestanas a.activa{background:var(--panel);color:var(--texto)}
.pestanas .boton-home{width:44px;height:44px;border-radius:50%;background:var(--acento);color:#fff;font-size:24px}

.bloque{margin-top:23px}
.bloque-principal{margin-top:3px}
.titulo-bloque{display:flex;align-items:center;justify-content:space-between;padding:0 7px}
.titulo-bloque h2{margin:0 0 9px;font-size:24px;font-weight:500}
.titulo-bloque a{font-size:38px;color:var(--acento);line-height:.7}
.cuadricula{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.cuadricula-videos{align-items:start}
.cuadricula-videos .miniatura{aspect-ratio:3/4}
.cuadricula-recuerdos .miniatura,.cuadricula-recuerdos .tarjeta-recuerdo{aspect-ratio:1}
.pieza{min-width:0}
.miniatura{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;overflow:hidden;background:var(--panel)}
.miniatura img,.miniatura>video{display:block;width:100%;height:100%;object-fit:cover}
.icono-video{position:absolute;right:6px;top:6px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.58);font-size:10px;z-index:3}
.meta-sobre-media{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:12px 5px 5px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:8px;line-height:1;text-shadow:0 1px 2px #000;z-index:2}
.vistas-item{display:inline-flex;align-items:center;gap:2px}
.meta-sobre-media .icono-ojo{width:11px;height:11px}

.vacia{aspect-ratio:1;display:grid;place-items:center;background:var(--panel)}
.vacia span{color:var(--acento);font-size:34px}

.tarjeta-recuerdo{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--panel);border:0}
.tarjeta-recuerdo img,.tarjeta-recuerdo video{display:block;width:100%;height:100%;object-fit:cover}
.tarjeta-recuerdo-publicacion{display:flex;flex-direction:column;padding:11px}
.tarjeta-recuerdo-publicacion small{color:var(--texto-secundario);font-size:9px}
.tarjeta-recuerdo-publicacion strong{margin-top:8px;font-size:15px;line-height:1.3}
.recuerdo-degradado{position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.92))}
.tarjeta-recuerdo strong{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;color:#fff;font-size:12px;line-height:1.25;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
.tarjeta-recuerdo-publicacion strong{position:static;color:var(--texto);text-shadow:none}
.recuerdo-media .miniatura{aspect-ratio:1}

.pieza-recomendacion{position:relative;overflow:hidden}
.recomendacion-enlace{display:block}
.recomendacion-imagen{aspect-ratio:1}
.recomendacion-info{position:relative;isolation:isolate;display:block;min-height:70px;padding:8px 6px 18px;overflow:hidden}
.recomendacion-info::before{content:"";position:absolute;z-index:-2;inset:-38px -10px -8px;background-image:var(--recomendacion-imagen);background-size:cover;background-position:center bottom;filter:blur(18px) brightness(.42) saturate(1.25);transform:scale(1.2)}
.recomendacion-info::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(to bottom,rgba(15,23,32,.05) 0%,rgba(15,23,32,.44) 53%,var(--fondo) 100%)}
.recomendacion-info strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
.meta-recomendacion,.meta-recomendacion-vistas{display:flex;align-items:center;gap:4px;margin-top:5px;color:#d5dbe1;font-size:9px}
.meta-recomendacion-vistas{justify-content:space-between;color:var(--texto-secundario);font-size:8px}
.plataforma-icono{min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(143,109,242,.25);color:#d8ccff;font-size:8px;font-weight:900}
.sin-vista{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#1f2f3f,#0c1118);font-size:36px;color:var(--acento)}

.lista-publicaciones,.lista-publicaciones-portada{display:grid;grid-template-columns:1fr;gap:10px;padding:0 4px}
.publicacion-resumen{width:100%;padding:14px;border:1px solid var(--linea);border-radius:15px;background:var(--panel);overflow:hidden;cursor:pointer}
.meta-publicacion{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--texto-secundario);font-size:9px}
.publicacion-resumen h3{margin:0 0 7px;font-size:17px;line-height:1.25;font-weight:800}
.texto-publicacion{max-height:4.5em;overflow:hidden;color:var(--texto);font-size:14px;line-height:1.5}
.publicacion-resumen.expandida .texto-publicacion{max-height:none;overflow:visible}
.multimedia-publicacion-preview{display:grid;margin-top:11px;gap:2px;justify-content:center}
.multimedia-publicacion-preview.cantidad-1{grid-template-columns:minmax(0,460px)}
.multimedia-publicacion-preview.cantidad-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin-left:auto;margin-right:auto}
.multimedia-publicacion-preview.cantidad-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.miniatura-publicacion{position:relative;width:100%;aspect-ratio:1;padding:0;border:0;overflow:hidden;background:#101820}
.multimedia-publicacion-preview.cantidad-1 .miniatura-publicacion{aspect-ratio:auto;max-height:360px}
.miniatura-publicacion img,.miniatura-publicacion video{display:block;width:100%;height:100%;min-height:100px;object-fit:cover}
.multimedia-publicacion-preview.cantidad-1 img,.multimedia-publicacion-preview.cantidad-1 video{height:auto;max-height:360px;object-fit:contain}
.mas-multimedia{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.56);color:#fff;font-size:28px;text-shadow:0 1px 3px #000}
.resumen-links{display:block;width:100%;margin-top:10px;padding:9px 12px;border:1px solid var(--linea);border-radius:9px;background:#101820;color:var(--texto-secundario);font-size:11px;text-align:left}
.contenido-publicacion-expandido{display:none}
.publicacion-resumen.expandida .contenido-publicacion-expandido{display:grid;gap:13px;margin-top:14px}
.publicacion-resumen.expandida .multimedia-publicacion-preview,.publicacion-resumen.expandida .resumen-links{display:none}
.videos-publicacion-completos{display:grid;gap:12px}
.video-publicacion-completo{width:100%;padding:0;border:0;background:transparent}
.video-publicacion-completo video{display:block;width:100%;max-height:72vh;object-fit:contain;background:#070b10;border-radius:11px}
.fotos-publicacion-completas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.foto-publicacion-completa{width:100%;aspect-ratio:1;padding:0;border:0;overflow:hidden;background:#101820}
.foto-publicacion-completa img{display:block;width:100%;height:100%;object-fit:cover}
.links-publicacion{display:grid;gap:7px}
.links-publicacion a{display:block;padding:10px 12px;border:1px solid var(--linea);border-radius:9px;background:#0f1822;color:#dce3e9;font-size:12px}
.publicacion-vacia{color:var(--texto-secundario)}

.paginacion{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:24px 0}
.paginacion a{min-width:36px;height:36px;padding:0 8px;display:grid;place-items:center;border-radius:10px;background:var(--panel);font-size:12px}
.paginacion a.activa{background:var(--acento)}

.modal{position:fixed;inset:0;z-index:1000;padding:12px;overflow:auto;background:rgba(4,8,12,.97)}
.modal[hidden]{display:none}
.contenido-modal{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.medio-modal{width:100%;display:grid;place-items:center}
.medio-modal img,.medio-modal video{max-width:100%;max-height:84vh;object-fit:contain}
.meta-modal{width:min(760px,100%);display:flex;justify-content:space-between;margin-top:9px;color:var(--texto-secundario);font-size:10px}
.vistas-modal{display:inline-flex;align-items:center;gap:3px}
.cerrar-modal,.cerrar-visitas{position:fixed;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(20,25,31,.78);font-size:22px;z-index:3}
.nav-modal{position:fixed;top:50%;transform:translateY(-50%);width:30px;height:46px;border:0;border-radius:10px;background:rgba(20,25,31,.62);font-size:24px;z-index:3}
.anterior-modal{left:8px}.siguiente-modal{right:8px}
.modal-visitas{display:grid;place-items:center}
.tarjeta-visitas{width:min(360px,94vw);padding:20px;border:1px solid var(--linea);border-radius:18px;background:var(--panel)}
.tarjeta-visitas h2{margin:0 0 15px;font-size:21px}
.total-tarjeta-visitas,.lista-paises div{display:flex;justify-content:space-between;align-items:center}
.total-tarjeta-visitas{padding-bottom:11px;border-bottom:1px solid var(--linea)}
.lista-paises{display:grid;gap:9px;margin-top:12px;color:var(--texto-secundario);font-size:13px}
.lista-paises strong{color:var(--texto)}

.pie-final{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin:28px 0 8px;padding:0 16px;color:rgba(169,181,193,.64);font-size:10px}
.pie-version{text-align:left}.pie-nombre{text-align:center}.pie-anio{text-align:right}

@media(max-width:720px){
  .contenedor{padding:8px 1px 22px}
  .cabecera{padding:10px 12px 12px}
  .foto-perfil{width:76px;height:76px}
  .datos h1{font-size:28px}
  .datos p,.datos small{font-size:13px}
  .redes-perfil{gap:10px}
  .boton-visitas{right:0;font-size:10px}
  .pestanas{grid-template-columns:43px repeat(4,minmax(0,1fr));gap:2px;margin-left:4px;margin-right:4px}
  .pestanas a{height:40px;font-size:11px}
  .pestanas .boton-home{width:39px;height:39px;font-size:21px}
  .titulo-bloque h2{font-size:22px}
  .cuadricula{gap:2px}
  .nav-modal{display:none}
  .publicacion-resumen{padding:13px 12px;border-radius:13px}
  .publicacion-resumen h3{font-size:16px}
  .texto-publicacion{font-size:13px}
  .multimedia-publicacion-preview.cantidad-1 .miniatura-publicacion{max-height:300px}
  .multimedia-publicacion-preview.cantidad-1 img,.multimedia-publicacion-preview.cantidad-1 video{max-height:300px}
  .fotos-publicacion-completas{gap:2px}
}


/* v0.35 — cierre visible y seguro en el visor */
.cerrar-modal{
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(5,9,13,.88);
  color:#fff;
  font-size:28px;
  font-weight:300;
  line-height:1;
  box-shadow:0 3px 14px rgba(0,0,0,.48);
  z-index:1005;
}


/* v0.36 — Recuerdos legibles y Recomendaciones unificadas */
.tarjeta-recuerdo .recuerdo-texto{
  position:absolute;
  left:9px;
  right:9px;
  bottom:10px;
  z-index:3;
  display:grid;
  gap:4px;
  color:#fff;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.95),
     1px -1px 0 rgba(0,0,0,.95),
    -1px  1px 0 rgba(0,0,0,.95),
     1px  1px 0 rgba(0,0,0,.95),
     0 2px 8px rgba(0,0,0,.95);
}

.tarjeta-recuerdo .recuerdo-texto strong{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  font-size:20px;
  line-height:1.08;
  font-weight:700;
  text-shadow:inherit;
}

.tarjeta-recuerdo .recuerdo-texto small{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:10px;
  line-height:1.25;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 4px rgba(0,0,0,1);
}

.tarjeta-recuerdo .recuerdo-degradado{
  inset:20% 0 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.15) 28%,
      rgba(0,0,0,.72) 72%,
      rgba(0,0,0,.94) 100%
    );
}

.recuerdo-sin-imagen{
  background:
    radial-gradient(circle at 30% 20%,rgba(143,109,242,.22),transparent 40%),
    linear-gradient(145deg,#223144 0%,#172330 50%,#0f1720 100%);
}

.recuerdo-fondo-sin-imagen{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.05),transparent 35%),
    radial-gradient(circle at 75% 15%,rgba(143,109,242,.18),transparent 45%);
}

/* La portada y el texto de Recomendaciones forman una sola pieza */
.pieza-recomendacion{
  background:transparent;
}

.recomendacion-enlace{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.recomendacion-info{
  min-height:92px;
  margin-top:-1px;
  padding:10px 7px 22px;
}

.recomendacion-info::before{
  inset:-58px -18px -12px;
  background-image:var(--recomendacion-imagen);
  background-size:cover;
  background-position:center bottom;
  filter:blur(22px) brightness(.38) saturate(1.45);
  transform:scale(1.28);
  opacity:1;
}

.recomendacion-info::after{
  background:
    linear-gradient(
      to bottom,
      rgba(15,23,32,0) 0%,
      rgba(15,23,32,.12) 18%,
      rgba(15,23,32,.52) 55%,
      rgba(15,23,32,.88) 82%,
      var(--fondo) 100%
    );
}

.recomendacion-info strong{
  font-size:13px;
  line-height:1.2;
  text-shadow:0 1px 5px rgba(0,0,0,.88);
}

.meta-recomendacion{
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}

.meta-recomendacion-vistas{
  margin-top:7px;
}

@media(max-width:720px){
  .tarjeta-recuerdo .recuerdo-texto strong{
    font-size:18px;
  }

  .tarjeta-recuerdo .recuerdo-texto small{
    font-size:9px;
  }

  .recomendacion-info{
    min-height:86px;
  }
}


/* v0.37 — sin visualizaciones, cierre pequeño y degradado visible */
.boton-visitas,
.modal-visitas,
.vistas-item,
.meta-recomendacion-vistas,
.vistas-modal{
  display:none !important;
}

.cerrar-modal{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  top:max(8px,env(safe-area-inset-top)) !important;
  right:max(8px,env(safe-area-inset-right)) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:50% !important;
  background:rgba(5,9,13,.82) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1 !important;
  box-shadow:0 2px 7px rgba(0,0,0,.42) !important;
}

/* Recomendaciones: unión más clara entre imagen, texto y fondo */
.pieza-recomendacion{
  position:relative;
  overflow:hidden;
  background:transparent !important;
}

.recomendacion-imagen{
  position:relative;
  z-index:1;
}

.recomendacion-info{
  position:relative;
  z-index:2;
  min-height:104px !important;
  margin-top:-22px !important;
  padding:31px 8px 24px !important;
  overflow:hidden;
}

.recomendacion-info::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:-16px;
  right:-16px;
  top:-62px;
  bottom:-10px;
  background-image:var(--recomendacion-imagen);
  background-size:cover;
  background-position:center bottom;
  filter:blur(24px) brightness(.34) saturate(1.55);
  transform:scale(1.35);
  opacity:1;
}

.recomendacion-info::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(15,23,32,0) 0%,
      rgba(15,23,32,.08) 14%,
      rgba(15,23,32,.32) 35%,
      rgba(15,23,32,.67) 63%,
      rgba(15,23,32,.92) 84%,
      var(--fondo) 100%
    );
}

.recomendacion-info strong{
  display:block;
  font-size:14px !important;
  line-height:1.18 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.95) !important;
}

.meta-recomendacion{
  margin-top:7px !important;
  color:#fff !important;
  text-shadow:0 1px 5px rgba(0,0,0,.95) !important;
}

@media(max-width:720px){
  .recomendacion-info{
    min-height:98px !important;
    margin-top:-19px !important;
    padding-top:28px !important;
  }

  .recomendacion-info strong{
    font-size:13px !important;
  }
}


/* v0.38 — recomendaciones sólidas, cierre centrado y publicaciones compactas */

/* Eliminar por completo los intentos de degradado en Recomendaciones */
.recomendacion-info::before,
.recomendacion-info::after{
  content:none !important;
  display:none !important;
}

.pieza-recomendacion{
  background:transparent !important;
  overflow:visible !important;
}

.recomendacion-enlace{
  display:block !important;
}

.recomendacion-imagen{
  border-radius:0 !important;
}

.recomendacion-info{
  min-height:0 !important;
  margin:0 !important;
  padding:9px 8px 12px !important;
  background:var(--panel) !important;
  border:1px solid var(--linea) !important;
  border-top:0 !important;
  border-radius:0 0 10px 10px !important;
  overflow:hidden !important;
}

.recomendacion-info strong{
  display:block;
  font-size:13px !important;
  line-height:1.22 !important;
  color:var(--texto) !important;
  text-shadow:none !important;
}

.meta-recomendacion{
  margin-top:6px !important;
  color:var(--texto-secundario) !important;
  text-shadow:none !important;
}

/* Botón de cierre: pequeño y perfectamente centrado */
.cerrar-modal{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 0 2px 0 !important;
  text-align:center !important;
  font-family:Arial,sans-serif !important;
  line-height:1 !important;
}

/* Publicaciones compactas únicamente en Inicio */
.lista-publicaciones-portada{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  padding:0 5px !important;
}

.publicacion-portada-compacta{
  display:block;
  padding:10px;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--panel);
  overflow:hidden;
}

.fecha-publicacion-compacta{
  display:block;
  margin-bottom:7px;
  color:var(--texto-secundario);
  font-size:9px;
}

.cuerpo-publicacion-compacta{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:10px;
  align-items:start;
}

.cuerpo-publicacion-compacta.sin-miniatura{
  grid-template-columns:1fr;
}

.miniatura-publicacion-compacta{
  position:relative;
  width:88px;
  aspect-ratio:1;
  display:block;
  overflow:hidden;
  background:#101820;
  border-radius:5px;
}

.miniatura-publicacion-compacta img,
.miniatura-publicacion-compacta video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.texto-publicacion-compacta{
  min-width:0;
  display:block;
}

.texto-publicacion-compacta strong{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  color:var(--texto);
}

.texto-publicacion-compacta > span{
  display:-webkit-box;
  overflow:hidden;
  margin-top:6px;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  color:var(--texto-secundario);
  font-size:11px;
  line-height:1.35;
}

/* Eliminar cualquier cero o hueco residual de las visualizaciones */
.meta-publicacion > span:last-child:empty,
.meta-sobre-media .vistas-item,
.vistas-item,
.boton-visitas{
  display:none !important;
}

@media(max-width:720px){
  .cuerpo-publicacion-compacta{
    grid-template-columns:78px minmax(0,1fr);
    gap:9px;
  }

  .miniatura-publicacion-compacta{
    width:78px;
  }

  .texto-publicacion-compacta strong{
    font-size:14px;
  }

  .texto-publicacion-compacta > span{
    font-size:10px;
  }
}

/* v0.39 publicaciones rehechas */
.publicacion-resumen,.publicacion-portada-compacta,.multimedia-publicacion-preview,.contenido-publicacion-expandido,.resumen-links{display:none!important}
.lista-publicaciones{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding:0 5px!important}
.publicacion-facebook{overflow:hidden;border:1px solid var(--linea);border-radius:14px;background:var(--panel)}
.cabecera-publicacion-facebook{display:flex;padding:13px 14px 5px}.cabecera-publicacion-facebook h3{margin:0;font-size:18px;line-height:1.2;font-weight:700}.cabecera-publicacion-facebook small{display:block;margin-top:5px;color:var(--texto-secundario);font-size:9px}
.cuerpo-publicacion-facebook{padding:7px 14px 12px}.texto-publicacion-facebook{max-height:4.5em;overflow:hidden;font-size:15px;line-height:1.5}.publicacion-facebook.texto-completo .texto-publicacion-facebook{max-height:none}.boton-ver-mas{margin:2px 0 0;padding:0;border:0;background:transparent;color:var(--texto-secundario);font-size:13px;font-weight:600}
.galeria-publicacion-facebook{display:grid;gap:2px;background:var(--fondo)}.medio-publicacion-facebook{position:relative;width:100%;padding:0;border:0;overflow:hidden;background:#080d12}.medio-publicacion-facebook img,.medio-publicacion-facebook video{display:block;width:100%;height:100%;object-fit:cover}
.cantidad-media-1{grid-template-columns:1fr}.cantidad-media-1 .medio-publicacion-facebook{max-height:72vh;min-height:230px}.cantidad-media-1 img,.cantidad-media-1 video{height:auto!important;max-height:72vh;object-fit:contain!important;margin:auto}
.cantidad-media-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cantidad-media-2 .medio-publicacion-facebook{aspect-ratio:1}
.cantidad-media-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1}.cantidad-media-3 .medio-publicacion-facebook:first-child{grid-row:1/3}.cantidad-media-3 .medio-publicacion-facebook{min-height:0}
.cantidad-media-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cantidad-media-4 .medio-publicacion-facebook{aspect-ratio:1}
.icono-video-publicacion{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.65);font-size:18px}.mas-publicacion{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);font-size:32px}
.links-publicacion-facebook{display:grid;gap:7px;padding:10px 12px 13px}.links-publicacion-facebook a{padding:10px 12px;border:1px solid var(--linea);border-radius:8px;background:#0f1822;font-size:12px}
.lista-publicaciones-portada{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:0 5px!important}.publicacion-inicio-compacta{min-height:82px;display:grid;grid-template-columns:82px minmax(0,1fr);gap:10px;padding:7px;border:1px solid var(--linea);border-radius:10px;background:var(--panel)}.publicacion-inicio-compacta:has(.texto-publicacion-inicio.sin-media){grid-template-columns:1fr}.media-publicacion-inicio{position:relative;width:82px;aspect-ratio:1;overflow:hidden;border-radius:5px}.media-publicacion-inicio img,.media-publicacion-inicio video{width:100%;height:100%;object-fit:cover}.texto-publicacion-inicio{display:flex;flex-direction:column;justify-content:center;min-width:0}.texto-publicacion-inicio strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:1.18}.texto-publicacion-inicio>span{display:-webkit-box;overflow:hidden;margin-top:5px;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:var(--texto-secundario);font-size:10px;line-height:1.3}
.recuerdo-publicacion-nuevo{position:relative;width:100%;aspect-ratio:1;display:block;overflow:hidden;background:var(--panel)}.recuerdo-publicacion-nuevo img,.recuerdo-publicacion-nuevo video{width:100%;height:100%;object-fit:cover}.capa-recuerdo-publicacion{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.2) 28%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.93))}.recuerdo-publicacion-nuevo.sin-fondo .capa-recuerdo-publicacion{background:radial-gradient(circle at 30% 15%,rgba(143,109,242,.22),transparent 42%),linear-gradient(145deg,#233246,#182431 55%,#0f1720)}.contenido-recuerdo-publicacion{position:absolute;left:10px;right:10px;bottom:12px;z-index:2;display:grid;gap:6px}.contenido-recuerdo-publicacion strong{font-size:20px;line-height:1.08;text-shadow:0 2px 7px #000}.contenido-recuerdo-publicacion span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:11px;line-height:1.28;text-shadow:0 1px 5px #000}
.cerrar-modal{display:grid!important;place-items:center!important;padding:0!important;line-height:1!important}
@media(max-width:720px){.publicacion-facebook{border-radius:11px}.cabecera-publicacion-facebook{padding:12px 12px 4px}.cabecera-publicacion-facebook h3{font-size:17px}.cuerpo-publicacion-facebook{padding:7px 12px 11px}.texto-publicacion-facebook{font-size:14px}.publicacion-inicio-compacta{grid-template-columns:74px minmax(0,1fr);min-height:74px}.media-publicacion-inicio{width:74px}.texto-publicacion-inicio strong{font-size:13px}.texto-publicacion-inicio>span{font-size:9px}.contenido-recuerdo-publicacion strong{font-size:18px}.contenido-recuerdo-publicacion span{font-size:10px}}


/* ================================================================
   v0.40 — VISOR Y EXPANSIÓN DE PUBLICACIONES
   ================================================================ */

.publicacion-facebook.publicacion-con-mas{
  cursor:pointer;
}

.indicador-ver-mas{
  display:inline-block;
  margin-top:3px;
  color:var(--texto-secundario);
  font-size:13px;
  font-weight:600;
  pointer-events:none;
}

.publicacion-facebook.texto-completo .texto-publicacion-facebook{
  max-height:none !important;
  overflow:visible !important;
}

.publicacion-facebook:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
}

#visor{
  z-index:5000 !important;
}

#visor .contenido-modal{
  position:relative;
  z-index:1;
}

#visor .cerrar-modal{
  z-index:5002 !important;
}

#visor .nav-modal{
  z-index:5001 !important;
}

#visor .fecha-modal{
  display:block;
  margin-top:8px;
  color:var(--texto-secundario);
  font-size:10px;
}

#visor .medio-modal img,
#visor .medio-modal video{
  display:block;
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
}


/* ================================================================
   v0.42 — NAVEGACIÓN DIRECTA Y COMPARTIR
   ================================================================ */

.cabecera-publicacion-facebook{
  justify-content:space-between;
  gap:10px;
}

.boton-compartir-publicacion,
.boton-compartir-visor{
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(7,12,17,.68);
  color:var(--texto-secundario);
}

.boton-compartir-publicacion{
  flex:0 0 auto;
  width:27px;
  height:27px;
  margin-top:-2px;
}

.boton-compartir-publicacion svg{
  width:15px;
  height:15px;
}

.boton-compartir-visor{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:5002;
  width:30px;
  height:30px;
  background:rgba(5,9,13,.82);
}

.boton-compartir-visor svg{
  width:17px;
  height:17px;
}

.boton-compartir-publicacion svg circle,
.boton-compartir-visor svg circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.boton-compartir-publicacion svg path,
.boton-compartir-visor svg path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.recuerdo-publicacion-nuevo{
  text-decoration:none;
}


/* ================================================================
   v0.43 — AVISO DE LINK COPIADO
   ================================================================ */

.aviso-copiado{
  position:fixed;
  left:50%;
  bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));
  z-index:6000;
  transform:translate(-50%,12px);
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(5,9,13,.78);
  color:#fff;
  font-size:12px;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}

.aviso-copiado.visible{
  opacity:1;
  transform:translate(-50%,0);
}


/* v1.0 — imagen remota caída en Recomendaciones */
.recomendacion-imagen.imagen-fallida::after,
.tarjeta-recuerdo-recomendacion.imagen-fallida::after{
  content:"↗";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#1f2f3f,#0c1118);
  color:var(--acento);
  font-size:34px;
}


/* v1.1 — paginación móvil en carrete */
.paginacion-carrete{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;width:min(100%,560px);margin:24px auto;padding:0 10px}
.paginacion-carrete a,.paginacion-carrete span{width:100%;min-width:0;height:42px;padding:0;display:grid;place-items:center;border-radius:10px;background:var(--panel);color:var(--texto);font-size:12px}
.paginacion-carrete a.activa{background:var(--acento);color:#fff}
.paginacion-carrete .control-pagina{font-size:24px;font-weight:300}
.paginacion-carrete .desactivado{opacity:.28;cursor:default}
@media(max-width:720px){.paginacion-carrete{gap:5px;padding:0 8px}.paginacion-carrete a,.paginacion-carrete span{height:39px;border-radius:9px;font-size:11px}.paginacion-carrete .control-pagina{font-size:22px}}


/* ================================================================
   v1.2 — FOTO DE PERFIL AMPLIABLE
   ================================================================ */

.boton-foto-perfil{
  flex:0 0 auto;
  width:94px;
  height:94px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  overflow:hidden;
  background:var(--panel);
}

.boton-foto-perfil .foto-perfil{
  width:100%;
  height:100%;
  display:block;
}

#visor.visor-perfil .nav-modal,
#visor.visor-perfil .boton-compartir-visor,
#visor.visor-perfil .fecha-modal{
  display:none !important;
}

#visor.visor-perfil .medio-modal img{
  max-width:min(92vw,760px);
  max-height:88vh;
  object-fit:contain;
}

@media(max-width:720px){
  .boton-foto-perfil{
    width:76px;
    height:76px;
  }
}


/* ================================================================
   v1.3 — DUPLICADOS, FECHAS VISIBLES Y PAGINACIÓN CENTRADA
   ================================================================ */

/* Grupo de paginación centrado, con tantos botones como sean necesarios. */
.paginacion-carrete{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  width:100% !important;
  max-width:none !important;
  margin:24px auto !important;
  padding:0 10px !important;
}

.paginacion-carrete a,
.paginacion-carrete span{
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
}

@media(max-width:720px){
  .paginacion-carrete{
    gap:5px !important;
    padding:0 7px !important;
  }

  .paginacion-carrete a,
  .paginacion-carrete span{
    flex-basis:38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }
}

/* Todas las portadas llenan el cuadro; no se usa contain. */
.recomendacion-imagen{
  display:block !important;
  aspect-ratio:1 !important;
  overflow:hidden !important;
  background:var(--panel) !important;
}

.recomendacion-imagen img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Archivo con fecha no interpretable: visible y fácil de localizar. */
.publicacion-fecha-invalida{
  border-color:rgba(235,174,72,.72) !important;
  box-shadow:0 0 0 1px rgba(235,174,72,.12) inset;
}

.aviso-fecha-invalida{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 7px;
  color:var(--texto-secundario);
}

.aviso-fecha-invalida span{
  padding:3px 6px;
  border:1px solid rgba(235,174,72,.45);
  border-radius:6px;
  background:rgba(235,174,72,.13);
  color:#f3c775;
  font-weight:600;
}

.aviso-fecha-invalida code{
  max-width:100%;
  overflow-wrap:anywhere;
  color:#f3c775;
  font-family:inherit;
  font-size:inherit;
}


/* ================================================================
   v1.4 — BARRA STICKY Y PORTADAS AJUSTADAS
   ================================================================ */

/*
 * La cabecera conserva su comportamiento normal.
 * Cuando sale de la pantalla, la barra de secciones se queda arriba.
 */
.pestanas{
  position:sticky !important;
  top:0 !important;
  z-index:1200 !important;
  padding:6px 4px !important;
  margin:4px 4px 14px !important;
  background:rgba(15,23,32,.96) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}

/* Cinco botones iguales. */
.pestanas{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

.pestanas a,
.pestanas .boton-home{
  width:100% !important;
  height:44px !important;
  min-width:0 !important;
  aspect-ratio:auto !important;
  padding:0 5px !important;
  border-radius:13px !important;
}

/* Inicio deja de ser circular, pero conserva el acento al estar activo. */
.pestanas .boton-home{
  background:transparent !important;
  color:var(--texto-secundario) !important;
  font-size:23px !important;
}

.pestanas .boton-home.activa{
  background:var(--acento) !important;
  color:#fff !important;
}

/* El resto de la sección activa conserva el estilo aprobado. */
.pestanas a.activa:not(.boton-home){
  background:var(--panel) !important;
  color:var(--texto) !important;
}

/* Portadas de Recomendaciones: cuadrado lleno, recorte centrado. */
.pieza-recomendacion .recomendacion-imagen{
  display:block !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
  background:var(--panel) !important;
}

.pieza-recomendacion .recomendacion-imagen img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Misma corrección para Recomendaciones mostradas en Recuerdos. */
.tarjeta-recuerdo-recomendacion > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media(max-width:720px){
  .pestanas{
    gap:4px !important;
    padding:6px 4px !important;
  }

  .pestanas a,
  .pestanas .boton-home{
    height:44px !important;
    font-size:12px !important;
  }

  .pestanas .boton-home{
    font-size:22px !important;
  }
}


/* ================================================================
   v1.5.1 — BARRA STICKY FLOTANTE
   ================================================================ */

.pestanas{
  top:8px !important;
  margin-left:8px !important;
  margin-right:8px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.045) !important;
  background:rgba(15,23,32,.94) !important;
}

/* Dejar respirar visualmente la barra cuando queda fija. */
@media(max-width:720px){
  .pestanas{
    top:8px !important;
    margin-left:7px !important;
    margin-right:7px !important;
    border-radius:15px !important;
    box-shadow:
      0 7px 18px rgba(0,0,0,.32),
      0 0 0 1px rgba(255,255,255,.04) !important;
  }
}


/* v1.6 — Etiquetas de plataforma compactas */
.plataforma,
.recomendacion-plataforma,
[data-plataforma]{
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.encabezado-inicio-clic{
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.06);
}
.encabezado-inicio-clic:active{
  opacity:.78;
}


/* v1.6 — contador global, aislado del contenido */
.cabecera{
  position:relative;
}
.contador-visitas-global{
  position:absolute;
  top:8px;
  right:10px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  line-height:1;
  color:var(--texto-secundario);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  user-select:none;
}
.contador-visitas-global span:first-child{
  font-size:11px;
  opacity:.9;
}


/* ================================================================
   v1.6.1 — CORRECCIÓN REAL DE DESCUBRE E INICIO
   ================================================================ */
.plataforma-texto{
  display:inline-block;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}

.titulo-bloque-enlace{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  color:inherit !important;
  text-decoration:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.06);
}
.titulo-bloque-enlace h2{
  margin:0 !important;
  color:inherit !important;
}
.titulo-bloque-enlace > span{
  flex:0 0 auto;
  margin-left:10px;
  font-size:20px;
  line-height:1;
  color:var(--texto-secundario);
}
.titulo-bloque-enlace:active{
  opacity:.78;
}


/* ================================================================
   v1.7 — 24 ELEMENTOS Y CARGA LIGERA
   ================================================================ */

/* Mantener el layout estable mientras cargan los medios. */
.miniatura,
.recomendacion-imagen,
.media-publicacion-inicio,
.recuerdo-publicacion-nuevo,
.tarjeta-recuerdo,
.pieza-media{
  contain:layout paint;
}

.miniatura img,
.recomendacion-imagen img,
.media-publicacion-inicio img,
.recuerdo-publicacion-nuevo img,
.tarjeta-recuerdo img,
.pieza-media img{
  display:block;
}

/* Móvil: 3 columnas. */
.cuadricula{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Preparación para escritorio: 6 columnas. */
@media(min-width:1100px){
  .cuadricula,
  .cuadricula-videos{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

/* Reserva de proporción para evitar saltos visuales. */
.recomendacion-imagen,
.pieza-foto .miniatura{
  aspect-ratio:1 / 1;
}

.pieza-video .miniatura,
.cuadricula-videos .miniatura{
  aspect-ratio:9 / 16;
  overflow:hidden;
}

/* ===== TZATZY 2.0 ===== */
.recuerdos-superiores{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:0 0 16px;overflow:hidden;border-radius:14px}
.recuerdos-superiores>*{aspect-ratio:1/1;min-width:0;position:relative}
.recuerdo-superior-vacio{background:rgba(255,255,255,.035)}
.edad-recuerdo{position:absolute;z-index:8;top:7px;right:7px;display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:10px;background:rgba(0,0,0,.38);backdrop-filter:blur(4px);font-size:9px;line-height:1;color:#fff;white-space:nowrap}
.edad-recuerdo i{width:5px;height:5px;border-radius:50%;background:#8d5cff;display:block}
.historias-inicio{margin-top:12px;max-width:100%}
.historias-carrusel{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.historias-carrusel::-webkit-scrollbar{display:none}
.historia-coleccion{border:0;background:none;color:inherit;padding:0;width:64px;flex:0 0 64px;text-align:center}
.historia-aro{width:58px;height:58px;border-radius:50%;padding:2px;border:2px solid rgba(255,255,255,.22);display:block;margin:auto}
.historia-coleccion.reciente .historia-aro{border-color:rgba(255,255,255,.22)}
.historia-aro img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.historia-coleccion small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.visor-historias{position:fixed;inset:0;z-index:10000;background:#000;display:none;touch-action:none;user-select:none}
.visor-historias.abierto{display:block}
.story-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.story-stage img,.story-stage video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.story-progress{position:absolute;z-index:5;top:8px;left:8px;right:8px;display:flex;gap:3px}
.story-progress span{height:2px;flex:1;background:rgba(255,255,255,.35);overflow:hidden}
.story-progress i{display:block;height:100%;width:0;background:#fff}
.story-close{position:absolute;z-index:8;right:10px;top:18px;border:0;background:rgba(0,0,0,.35);color:#fff;border-radius:50%;font-size:28px;width:38px;height:38px}
.story-side{position:absolute;z-index:4;top:0;bottom:0;width:38%;border:0;background:transparent}
.story-prev{left:0}.story-next{right:0}
body.story-open{overflow:hidden}


/* ================================================================
   v2.0.1 — CABECERA COMPACTA
   ================================================================ */

/*
 * Los Recuerdos permanecen arriba.
 * Foto, nombre, datos, redes, Historias y navegación suben para reducir
 * el espacio vertical. El contador conserva su posición.
 */

.cabecera{
  margin-top:-18px !important;
  padding-top:0 !important;
}

.perfil{
  position:relative;
  z-index:6;
  padding-top:0 !important;
}

.perfil-superior,
.perfil-cabecera,
.datos-perfil{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* La foto puede montarse ligeramente sobre el Recuerdo izquierdo. */
.boton-foto-perfil,
.foto-perfil{
  position:relative;
  z-index:8;
}

.boton-foto-perfil{
  margin-top:-18px !important;
  box-sizing:content-box !important;
  border:5px solid var(--fondo) !important;
  background:var(--fondo) !important;
}

/* Compactar separación interna sin tocar el contador. */
.perfil-info,
.info-perfil{
  margin-top:-4px !important;
}

.redes,
.redes-sociales{
  margin-top:6px !important;
  margin-bottom:4px !important;
}

.historias-inicio{
  margin-top:6px !important;
  margin-bottom:2px !important;
}

/* La barra queda visualmente más cerca del bloque superior. */
.pestanas{
  margin-top:3px !important;
}

/* El contador queda exactamente donde lo dejó la versión anterior. */
.contador-visitas-global{
  transform:none !important;
}

@media(max-width:720px){
  .cabecera{
    margin-top:-16px !important;
  }

  .boton-foto-perfil{
    margin-top:-16px !important;
    border-width:5px !important;
  }

  .historias-inicio{
    margin-top:5px !important;
  }
}


/* ================================================================
   v2.0.2 — CABECERA SOLO EN INICIO + PESTAÑA ACTIVA MORADA
   ================================================================ */

/* En secciones internas la navegación empieza arriba y es la única cabecera. */
/* Cualquier pestaña activa usa el morado Tzatzy. */
.pestanas a.activa,
.pestanas .boton-home.activa{
  background:var(--acento) !important;
  color:#fff !important;
}

/* Anula la regla anterior que dejaba pestañas internas oscuras. */
.pestanas a.activa:not(.boton-home){
  background:var(--acento) !important;
  color:#fff !important;
}

/* En páginas internas, la barra queda arriba con respiración mínima. */
.seccion-contenido{
  padding-top:0 !important;
}


/* ================================================================
   v2.0.3 — INICIO RESTAURADO
   ================================================================ */
/* La visibilidad de la cabecera completa se decide en PHP.
   No depende de clases del body. */
.cabecera-completa-solo-inicio{
  display:block;
}

/* ================================================================
   v2.0.4 — RECUERDOS DIRECTOS, HISTORIAS LIGERAS Y TRANSICIONES
   ================================================================ */
.recuerdo-publicacion-nuevo,.tarjeta-recuerdo-recomendacion,.recuerdo-media .miniatura{border:0;font:inherit;text-align:inherit;color:inherit;cursor:pointer;padding:0}
.recuerdo-modal-contenido{width:min(92vw,760px);max-height:88vh;overflow:auto;padding:22px;border-radius:16px;background:var(--panel);color:var(--texto)}
.recuerdo-modal-contenido h2{margin:0 0 12px}.recuerdo-modal-contenido p{white-space:pre-wrap;line-height:1.5}.recuerdo-modal-contenido img,.recuerdo-modal-contenido video{display:block;max-width:100%;max-height:70vh;margin:12px auto;border-radius:10px}.recuerdo-modal-contenido a{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:10px;background:#111;color:#fff}
/* Historias es una banda propia, pegada a la izquierda y a todo el ancho. */
.historias-inicio{width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.historias-carrusel{justify-content:flex-start!important;padding-left:5px!important;margin-left:0!important}
/* Sin destello táctil morado. */
.visor-historias,.visor-historias *,.story-side,.story-close{-webkit-tap-highlight-color:transparent!important;tap-highlight-color:transparent!important;outline:none!important}
.story-side,.story-side:active,.story-side:focus{background:transparent!important;box-shadow:none!important}
.story-loading{width:28px;height:28px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:storySpin .7s linear infinite}@keyframes storySpin{to{transform:rotate(360deg)}}
/* Transiciones cortas: continuidad sin convertir la página en un carrusel pesado. */
body.transicion-sale-inicio .cabecera-completa-solo-inicio{animation:salirCabecera .20s ease forwards}body.transicion-sale-inicio main{animation:salirContenidoIzq .20s ease forwards}
body.transicion-sale-seccion main{animation:salirContenidoDer .20s ease forwards}body.transicion-sale-lateral main{animation:salirContenidoIzq .20s ease forwards}
body.transicion-entra-inicio .cabecera-completa-solo-inicio{opacity:0;transform:translateY(-22px)}body.transicion-entra-inicio main{opacity:0;transform:translateY(10px)}body.transicion-entra-inicio.transicion-lista .cabecera-completa-solo-inicio,body.transicion-entra-inicio.transicion-lista main{opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
body.transicion-entra-seccion main{opacity:0;transform:translateX(16px)}body.transicion-entra-seccion.transicion-lista main{opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
@keyframes salirCabecera{to{opacity:0;transform:translateY(-28px)}}@keyframes salirContenidoIzq{to{opacity:0;transform:translateX(-18px)}}@keyframes salirContenidoDer{to{opacity:0;transform:translateX(18px)}}
@media(prefers-reduced-motion:reduce){body[class*="transicion-"] *{animation:none!important;transition:none!important}}


/* ================================================================
   v2.0.5 — VISOR MIXTO DE RECUERDOS
   ================================================================ */

/* El contenido, no una tarjeta "Recuerdo", ocupa el visor. */
#visor:not(.visor-texto) .contenido-modal{
  width:100%;
  height:100%;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

#visor:not(.visor-texto) .medio-modal{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#visor:not(.visor-texto) .medio-modal > img,
#visor:not(.visor-texto) .medio-modal > video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.visor-publicacion-completa{
  width:min(92vw,760px);
  max-height:84vh;
  overflow:auto;
  padding:22px;
  border-radius:18px;
  background:var(--panel);
  color:var(--texto);
}

.visor-publicacion-completa h2{
  margin:0 0 14px;
}

.visor-publicacion-texto{
  white-space:pre-wrap;
  line-height:1.55;
  margin-bottom:14px;
}

.visor-publicacion-completa img,
.visor-publicacion-completa video{
  display:block;
  width:auto;
  max-width:100%;
  max-height:68vh;
  margin:12px auto;
  border-radius:12px;
}

.visor-publicacion-completa a{
  display:block;
  margin-top:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.publicacion-inicio-compacta{
  cursor:pointer;
}

/* Transición deliberadamente rápida. */
body.transicion-entra-inicio.transicion-lista .cabecera-completa-solo-inicio,
body.transicion-entra-inicio.transicion-lista main,
body.transicion-entra-seccion.transicion-lista main{
  transition-duration:.22s!important;
}

/* v2.0.6 */
.visor-publicacion-galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px}
.visor-publicacion-galeria:has(>:only-child){grid-template-columns:1fr}
.visor-publicacion-galeria img,.visor-publicacion-galeria video{width:100%;height:auto;max-height:52vh;object-fit:cover;border-radius:10px;margin:0}
.visor-publicacion-galeria img{cursor:zoom-in}
.visor-foto-publicacion{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.visor-foto-publicacion img{width:100%;height:100%;object-fit:contain}
.cerrar-foto-publicacion,.nav-foto-publicacion{position:absolute;z-index:2;border:0;color:#fff;background:rgba(20,20,24,.56)}
.cerrar-foto-publicacion{top:14px;right:14px;width:42px;height:42px;border-radius:50%;font-size:30px}
.nav-foto-publicacion{top:50%;transform:translateY(-50%);width:42px;height:64px;border-radius:12px;font-size:38px}
.nav-foto-publicacion.anterior{left:10px}.nav-foto-publicacion.siguiente{right:10px}

/* v2.0.8 — progreso historias */
.story-progress span{position:relative;overflow:hidden}
.story-progress i{transform-origin:left center;will-change:width}

/* v2.0.11 — visor Historias */
.visor-historias.abierto{display:block!important;visibility:visible!important;opacity:1!important}
.visor-historias.abierto .story-stage{display:grid!important;visibility:visible!important;opacity:1!important}
.visor-historias.abierto .story-stage>img,
.visor-historias.abierto .story-stage>video{display:block!important;visibility:visible!important;opacity:1!important;z-index:1}
.visor-historias.abierto .story-progress,
.visor-historias.abierto .story-close,
.visor-historias.abierto .story-side{visibility:visible!important;opacity:1!important}


/* v2.0.17 — identidad social exacta TZATZY */
.red-perfil{color:#EFEEFF}
.icono-red-mascara{width:18px;height:18px;display:block;background:currentColor;-webkit-mask:var(--tz-icon) center/contain no-repeat;mask:var(--tz-icon) center/contain no-repeat}
.red-perfil:active,.red-perfil:focus-visible{color:#7770A5}
#visor .contenido-modal,.visor-foto-publicacion{will-change:transform,opacity}

/* v2.0.20 — Historias recientes en foto de perfil */
.boton-foto-perfil{position:relative;border-radius:50%}
.boton-foto-perfil.tiene-historias-recientes::before{content:"";position:absolute;inset:-5px;border:3px solid #8d5cff;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;transform:scale(.98)}
.boton-foto-perfil.tiene-historias-recientes.historias-no-vistas::before{opacity:1;transform:scale(1)}

/* v2.0.21 — correcciones Historias recientes */
.boton-foto-perfil.tiene-historias-recientes::before{display:none!important}
.boton-foto-perfil.tiene-historias-recientes.historias-no-vistas{
  border-color:var(--fondo)!important;
  box-shadow:0 0 0 3px #8d5cff,0 0 0 7px var(--fondo)!important;
}


/* v2.0.22 — selector Foto de perfil / Historias recientes */
.selector-perfil-historias{position:fixed;inset:0;z-index:12050;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(4,9,18,.58);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.selector-perfil-historias-panel{width:min(430px,100%);padding:8px;border:1px solid rgba(239,238,255,.12);border-radius:22px;background:#111b28;box-shadow:0 18px 55px rgba(0,0,0,.42)}
.selector-perfil-historias-panel button{width:100%;min-height:54px;display:flex;align-items:center;gap:13px;padding:10px 14px;border:0;border-radius:15px;background:transparent;color:#EFEEFF;font:inherit;text-align:left}
.selector-perfil-historias-panel button:active{background:#7770A5;color:#fff}
.selector-perfil-historias-panel .selector-cancelar{justify-content:center;margin-top:3px;color:rgba(239,238,255,.72)}
.selector-mini-aro,.selector-mini-foto{width:27px;height:27px;display:grid;place-items:center;flex:0 0 27px;border-radius:50%}
.selector-mini-aro{border:2px solid #8d5cff;color:#EFEEFF;font-size:12px}
.selector-mini-foto{border:1px solid rgba(239,238,255,.32);color:#EFEEFF;font-size:15px}


/* v2.0.23 — selector perfil/historias y menciones */
.selector-perfil-historias{padding:0!important;background:rgba(0,0,0,.42)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.selector-perfil-historias-panel{width:100%!important;max-width:520px!important;padding:10px 12px max(12px,env(safe-area-inset-bottom))!important;border:0!important;border-radius:24px 24px 0 0!important;background:#f7f7fb!important;color:#10121a!important;box-shadow:0 -12px 38px rgba(0,0,0,.24)!important}
.selector-perfil-historias-panel::before{content:"";display:block;width:38px;height:4px;border-radius:999px;background:#c8c9d1;margin:0 auto 8px}
.selector-perfil-historias-panel button{min-height:52px!important;color:#171923!important;border-radius:14px!important;font-weight:500!important}
.selector-perfil-historias-panel button:active{background:#ece9ff!important;color:#171923!important}
.selector-perfil-historias-panel .selector-cancelar{display:none!important}
.selector-mini-aro,.selector-mini-foto{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid #dadbe3;font-size:15px;color:#6f53bf;background:#fff}
.mencion-tzatzy{color:#bca9ff;text-decoration:none;font-weight:600}
.mencion-tzatzy:active,.mencion-tzatzy:focus-visible{color:#EFEEFF;text-decoration:underline}

/* v2.0.24: un visor abierto consume los gestos verticales; no hay pull-to-refresh web. */
html.tzatzy-visor-abierto, body.tzatzy-visor-abierto{overscroll-behavior:none;}
body.tzatzy-visor-abierto{overflow:hidden;}
#visorHistorias.abierto{overscroll-behavior:none;touch-action:pan-x;}


/* v2.0.28 — SOLO Inicio: multimedia de publicaciones como vista previa */
body[data-seccion="inicio"] .abrir-publicacion-media,
body[data-seccion="inicio"] .abrir-publicacion-media img,
body[data-seccion="inicio"] .abrir-publicacion-media video{
  cursor:default!important;
}

/* v2.0.30: la imagen de una publicación abierta desde Inicio no abre otro visor. */
body[data-seccion="inicio"] .visor-publicacion-galeria img{cursor:default}


/* v2.1.0 — Inicio como timeline social */
.timeline-social{width:min(760px,100%);margin:18px auto 44px;display:grid;gap:14px}
.timeline-item,.timeline-recuerdos{border:1px solid var(--linea);border-radius:16px;background:var(--panel);overflow:hidden}
.timeline-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 7px;color:var(--texto-secundario);font-size:10px}
.timeline-badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:rgba(136,86,255,.15);color:#d9ccff;font-size:9px;font-weight:800;letter-spacing:.08em}
.timeline-item>.pieza,.timeline-item>.publicacion-facebook{border:0;border-radius:0;margin:0}
.timeline-item>.pieza-media .miniatura{border-radius:0}
.timeline-historia{width:100%;display:flex;align-items:center;gap:14px;padding:12px 14px 16px;border:0;background:transparent;color:inherit;text-align:left}
.timeline-historia .historia-aro{flex:0 0 auto;width:66px;height:66px}
.timeline-historia>span:last-child{display:grid;gap:5px}.timeline-historia strong{font-size:17px}.timeline-historia small{color:var(--texto-secundario)}
.recuerdos-en-timeline{margin:0;border-radius:0}
.timeline-paginacion{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px}.timeline-paginacion a{padding:9px 11px;border-radius:10px;background:var(--panel)}


/* ================================================================
   v3.0.0 — TIMELINE SOCIAL / AMOLED / HISTORIAS DIARIAS
   ================================================================ */
:root{
  --fondo:#000000;
  --panel:#111111;
  --texto:#f7f7f7;
  --texto-secundario:#aaaeb4;
  --linea:rgba(255,255,255,.09);
}
html,body{background:#000 !important}
.contenedor{background:#000}

/* Cuatro accesos reales: Inicio + Videos + Fotos + Descubre. */
.pestanas{grid-template-columns:repeat(4,minmax(0,1fr)) !important;background:rgba(0,0,0,.94) !important}

/* Recuerdos vuelven a ser portada, antes de perfil/historias/timeline. */
.recuerdos-superiores{margin:0 0 16px !important}

/* Cada publicación respira sobre negro AMOLED sin cambiar su tamaño. */
.timeline-social{gap:16px;background:#000}
.timeline-item{background:#111;border:1px solid rgba(255,255,255,.085);box-shadow:0 7px 20px rgba(0,0,0,.42)}
.timeline-item>.pieza,.timeline-item>.publicacion-facebook{background:#111}
.timeline-meta{background:#111}

/* Historias del timeline: colección + actividad de un día. */
.timeline-item-historia{overflow:hidden}
.timeline-historia{display:block;width:100%;padding:0 0 12px;text-align:left}
.timeline-historia-cabecera{display:flex;align-items:center;gap:12px;padding:4px 13px 11px}
.timeline-historia .historia-aro{width:58px;height:58px;flex:0 0 58px;margin:0}
.timeline-historia-textos{display:grid;gap:4px;min-width:0}
.timeline-historia-textos strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline-historia-textos small{color:var(--texto-secundario);font-size:11px}
.timeline-historia-media{display:grid;width:100%;gap:2px;padding:0 2px}
.timeline-historia-media.cantidad-1{grid-template-columns:1fr}
.timeline-historia-media.cantidad-2{grid-template-columns:repeat(2,1fr)}
.timeline-historia-media.cantidad-3,.timeline-historia-media.cantidad-4{grid-template-columns:repeat(2,1fr)}
.timeline-historia-miniatura{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#080808}
.timeline-historia-media.cantidad-1 .timeline-historia-miniatura{aspect-ratio:4/3}
.timeline-historia-miniatura img{width:100%;height:100%;display:block;object-fit:cover}
.timeline-story-play{position:absolute;right:7px;top:7px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.64);font-size:10px}

/* Paginación en bloques de siete. */
.timeline-paginacion{display:flex;justify-content:center;align-items:center;gap:5px;padding:8px 4px 2px}
.timeline-paginacion a,.timeline-paginacion span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#111;border:1px solid rgba(255,255,255,.08);font-size:12px}
.timeline-paginacion .pagina-numero.activa{background:var(--acento);color:#fff;border-color:transparent;font-weight:800}
.timeline-paginacion .pagina-flecha{font-size:18px}
.timeline-paginacion .desactivada{opacity:.26}

/* Evita que estilos históricos vuelvan a pintar azul el fondo principal. */
.pie-final,.cabecera,.cabecera-completa-solo-inicio{background-color:transparent}


/* v3.0.1 — Timeline: Historias sin recorte, compartir bajo fecha y paginación < > */
.timeline-meta{align-items:flex-start}
.timeline-meta-derecha{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:54px}
.timeline-meta-derecha time{white-space:nowrap}
.timeline-meta .timeline-share{width:27px;height:27px;margin:0}
.timeline-historia-media{background:#000}
.timeline-historia-media.cantidad-media-1{display:grid;grid-template-columns:1fr}
.timeline-historia-media.cantidad-media-1 .timeline-historia-miniatura{aspect-ratio:auto;max-height:76vh;min-height:0;display:grid;place-items:center;background:#000}
.timeline-historia-media.cantidad-media-1 .timeline-historia-miniatura img{width:100%;height:auto;max-height:76vh;object-fit:contain;margin:auto;background:#000}
.timeline-historia-media.cantidad-media-1 .timeline-historia-miniatura .timeline-story-play{position:absolute}
.timeline-historia-media.cantidad-media-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-historia-media.cantidad-media-2 .timeline-historia-miniatura{aspect-ratio:1}
.timeline-historia-media.cantidad-media-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1}
.timeline-historia-media.cantidad-media-3 .timeline-historia-miniatura:first-child{grid-row:1/3}
.timeline-historia-media.cantidad-media-3 .timeline-historia-miniatura{min-height:0}
.timeline-historia-media.cantidad-media-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.timeline-historia-media.cantidad-media-4 .timeline-historia-miniatura{aspect-ratio:1}
.timeline-historia-media:not(.cantidad-media-1) .timeline-historia-miniatura img{width:100%;height:100%;object-fit:cover}
.timeline-paginacion .pagina-flecha{font-family:Arial,sans-serif;font-size:20px;font-weight:700;line-height:1}


/* v3.0.2 — zoom de imágenes, fechas uniformes y espaciado fino */
.timeline-meta{padding:9px 12px 6px;align-items:center}
.timeline-meta-derecha{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;min-width:0;margin-left:auto}
.timeline-meta-derecha time{font-variant-numeric:tabular-nums;font-size:10px;line-height:27px}
.timeline-meta .timeline-share{order:2;flex:0 0 27px}
.timeline-item>.publicacion-facebook .cabecera-publicacion-facebook.cabecera-publicacion-timeline{padding:5px 12px 3px}
.timeline-item>.publicacion-facebook .cabecera-publicacion-facebook.cabecera-publicacion-timeline h3{margin:0}
.timeline-item>.publicacion-facebook>.cuerpo-publicacion-facebook:first-child{padding-top:7px}

/* Historias: 2–4 reutilizan exactamente el mosaico de publicaciones. */
.timeline-historia-media.galeria-publicacion-facebook{padding:0;gap:2px;background:#000}
.timeline-historia-media.galeria-publicacion-facebook .timeline-historia-miniatura{aspect-ratio:auto;min-height:0;background:#080808}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-3 .timeline-historia-miniatura:first-child{grid-row:1/3}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-3 .timeline-historia-miniatura img{width:100%;height:100%;object-fit:cover}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-1{display:block;aspect-ratio:auto}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-1 .timeline-historia-miniatura{display:grid;place-items:center;aspect-ratio:auto;max-height:none;background:#000}
.timeline-historia-media.galeria-publicacion-facebook.cantidad-media-1 .timeline-historia-miniatura img{width:100%;height:auto;max-height:none;object-fit:contain;background:#000}

/* Visor de detalle con zoom real: botón +/- , rueda y gesto de pellizco. */
#visor .foto-publicacion-ampliable,#visor .foto-visor-ampliable{cursor:zoom-in}
.visor-zoom-foto{position:fixed;inset:0;z-index:20000;background:#000;display:flex;flex-direction:column}
.visor-zoom-foto[hidden]{display:none!important}
.visor-zoom-barra{height:54px;flex:0 0 54px;display:flex;justify-content:flex-end;align-items:center;gap:7px;padding:6px 10px;background:rgba(0,0,0,.92);position:relative;z-index:2}
.visor-zoom-barra button{min-width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:#111;color:#fff;font-size:18px}
.visor-zoom-barra .cerrar-zoom{font-size:28px;margin-left:4px}
.visor-zoom-scroll{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;overscroll-behavior:contain;touch-action:pan-x pan-y;background:#000}
.visor-zoom-scroll img{display:block;max-width:none;max-height:none;flex:none;margin:auto;user-select:none;-webkit-user-drag:none}
body.zoom-foto-abierto{overflow:hidden}


/* v3.0.3 — acceso explícito al original/zoom */
#visor .foto-publicacion-ampliable,#visor .foto-visor-ampliable{cursor:default}
.boton-detalle-hd{position:fixed;left:14px;bottom:14px;z-index:10020;display:flex;align-items:center;gap:3px;padding:3px 4px;border:0;border-radius:6px;background:rgba(0,0,0,.46);color:#fff;line-height:1;opacity:.78}
.boton-detalle-hd[hidden]{display:none!important}
.boton-detalle-hd-icono{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.boton-detalle-hd-icono svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.boton-detalle-hd-texto{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-size:5px;line-height:1.05;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.boton-detalle-hd-texto span{display:block}
.boton-detalle-hd:active{transform:scale(.96);opacity:1}