/* ★ 70 primer pintado — perfil y publicación abiertos por enlace directo SIN el salto «HTML de buscadores → diseño real».
   web36Og (functions/seo37.js htmlPerfil) sirve el perfil con la MISMA estructura y clases que pinta la SPA
   (js/vistas/perfil.js); ruta68.js marca <html class="perfil70|post70"> antes de la primera pintura y app.js la quita al
   montar la vista. Hoja bloqueante (va en index.html y en la plantilla de web36Og): pinta con el HTML. */

/* Título del perfil: el <h1> lleva SÓLO el nombre (lo que lee Google); ✓ y @usuario van al lado, con el aspecto de siempre. */
.perfil-cabeza .perfil-tit { margin: 0; font-size: 26px; font-weight: 700; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-tit h1 { display: inline; margin: 0; font: inherit; }
.perfil-tit small { display: block; font-size: 18px; font-weight: 400; color: var(--tinta-2); border-inline-start: 1px solid var(--borde); padding-inline-start: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) { .perfil-cabeza .perfil-tit { max-width: calc(100% - 300px); } } /* no se mete bajo «Recargar · Obtener app» */

/* Textos sólo para buscadores y lectores de pantalla dentro del perfil servido (la SPA no los pinta). */
.p70-seo { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Celdas de espera de la rejilla con la MISMA forma que las reales (antes eran tarjetas más altas y la página saltaba). */
.celda.esq70 { animation: brillo36 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .celda.esq70 { animation: none; } }

/* Perfil servido: sin el esqueleto del Inicio debajo, y el mismo margen de arriba que deja «‹ Volver» al montar. */
#contenido > [data-ssr70] ~ #arranque43 { display: none; }
html.perfil70 body:not(.con-volver45) .contenido { padding-top: 52px; }
@media (max-width: 900px) { html.perfil70 body:not(.con-volver45) .contenido { padding-top: 46px; } }

/* Publicación (/@usuario/video/<id>): el visor es una capa fija (escena negra + panel de 520 px; en el teléfono, hoja
   abajo). Hasta que monta se pinta ESA forma encima del HTML de buscadores, que sigue en el documento. */
html.post70 #contenido > .ssr37 ~ #arranque43 { display: none; }
html.post70 body::before { content: ''; position: fixed; inset: 0; z-index: 39; background: #000; }
/* Panel de la derecha con la ficha del autor (tarjeta gris de arriba) como en el visor ya montado. */
html.post70 body::after { content: ''; position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 520px; z-index: 39;
  background: linear-gradient(var(--fondo-2), var(--fondo-2)) 14px 14px / calc(100% - 28px) 140px no-repeat, var(--fondo); }
@media (max-width: 900px) {
  html.post70 body::after { top: auto; inset-inline-start: 0; width: auto; height: 46vh; border-radius: 16px 16px 0 0;
    background: linear-gradient(var(--fondo-2), var(--fondo-2)) 12px 30px / calc(100% - 24px) 120px no-repeat, var(--fondo); }
}

/* ★ 70 — Inicio: el esqueleto de arranque (#arranque43) reserva la columna derecha (.x36-lado, 320 px) como la vista
   montada; sin ella el centro se pintaba centrado y luego saltaba ~180 px a la izquierda. */
html:not(.ruta68) #arranque43.x36::after { content: ''; width: 320px; flex: none; }
@media (max-width: 1160px) { html:not(.ruta68) #arranque43.x36::after { display: none; } }
/* Mismas alturas que la vista montada: historias (+6 px), pestañas Para ti/Siguiendo (47 px) y cabecera del post (57 px). */
html:not(.ruta68) #arranque43 .h36-rail-wrap { margin-bottom: 20px; }
html:not(.ruta68) #arranque43 .x36-tabs i { margin-top: 16px; margin-bottom: 16px; }
html:not(.ruta68) #arranque43 .x36-esq header { min-height: 57px; }
/* Teléfono: la barra de arriba (movil37.js, fija de 52 px) aún no está, pero su hueco sí. */
@media (max-width: 900px) { html:not(.ruta68):not(.videos70) body:not(.movil37) #contenido { padding-top: 52px; } }

/* ★ 70 — Videos (/videos, /reels): el esqueleto es la tarjeta del video (misma caja que .tarjeta-feed > .medio y el hueco de
   la columna de acciones), no el muro del Inicio que luego cambiaba por completo. ruta68.js pone «videos70». */
html.videos70 #arranque43.x36 { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100vh; padding: 24px 90px 24px 24px; box-sizing: border-box; max-width: none; margin: 0; }
html.videos70 #arranque43 .x36-centro { display: none; }
html.videos70 #arranque43.x36::after { display: none; }
html.videos70 #arranque43.x36::before { content: ''; flex: none; height: calc(100vh - 48px); max-height: 860px; aspect-ratio: 9 / 16; max-width: calc(100vw - 420px); background: #000; border-radius: 14px; }
html.videos70 #arranque43 .arr68 { display: block; flex: none; width: 50px; height: 1px; overflow: hidden; visibility: hidden; padding: 0; margin: 0; }
@media (max-width: 900px) {
  html.videos70 #arranque43.x36 { padding: 0; height: calc(100vh - 58px - env(safe-area-inset-bottom)); }
  html.videos70 #arranque43.x36::before { height: 100%; width: 100%; max-height: none; max-width: 100vw; aspect-ratio: auto; border-radius: 0; }
  html.videos70 #arranque43 .arr68 { display: none; }
}