/* ══ BLOG ════════════════════════════════════════════════════════
   Complemento de styles.css, nunca sustituto. De alli salen el color, la
   escala de espacio (--e1..--e14, base 8) y la escala tipografica
   (--f1..--f12, razon 1.25). Aqui solo va lo que es propio del blog.

   Antes este archivo volvia a declarar la paleta entera en su :root. Como se
   carga despues, pisaba la del sitio: dos definiciones del mismo color, y una
   —--line— ya se habia separado de la otra sin que nadie lo notara. Ahora no
   declara ni un token: si hace falta uno nuevo, va en styles.css.

   Un articulo se lee, asi que la medida de linea y el ritmo vertical mandan
   sobre todo lo demas.

   Los unicos valores en rem que quedan son tres max-width —26rem, 42rem y
   46rem—. No son espaciado: son la medida de linea, que se fija en numero de
   caracteres y no en multiplos de 8. Meterlos en la escala seria hacerle caso
   a la regla y no a su motivo. */

/* la franja solo existe en la vista previa */
.cinta-previa{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e4); padding:var(--e2) var(--e5);
  background:var(--blue-deep); color:var(--paper);
  font-size:var(--f2);
}
.cinta-previa strong{font-weight:500}
.cinta-previa a{
  flex:none; padding:var(--e1) var(--e3); border:1px solid rgba(251,250,247,.35);
  border-radius:999px; color:#fff; text-decoration:none;
}
.cinta-previa a:hover{background:rgba(251,250,247,.14)}
@media(max-width:600px){ .cinta-previa{font-size:var(--f1); padding:var(--e2) var(--e4)} }

/* El cuerpo no abre con separador propio: el panel blanco ya lo separa de
   todo lo demas. */
.cuerpo{margin-top:var(--e7)}

/* ── Bloques ───────────────────────────────────────────────────
   Tres escalones y cada uno manda sobre el siguiente: 30-36 / 24 / 18. El
   titulo sale del mismo sitio que "Terapia Manual Ortopedica" en la portada.
   Ella elige el tipo de bloque; el aspecto lo pone el sitio, siempre igual en
   todos los articulos. */
.b-parrafo{
  margin:0 0 var(--e5); font-size:var(--f4); line-height:1.75; color:var(--ink);
  /* una direccion larga sin espacios no cabe en una columna estrecha y se
     saldria del panel; asi se parte donde haga falta */
  overflow-wrap:anywhere;
}
.b-titulo{
  margin:var(--e9) 0 var(--e5); font-family:var(--d); font-weight:400;
  font-size:clamp(var(--f7),2.6vw,var(--f8)); line-height:1.15;
  letter-spacing:-.01em; color:var(--blue-dk); text-wrap:balance;
}
.b-subtitulo{
  margin:var(--e7) 0 var(--e4); font-size:var(--f6); font-weight:500;
  line-height:1.3; color:var(--blue-dk);
}
/* el primer bloque no necesita separarse de la regla de arriba */
.cuerpo > :first-child{margin-top:0}

.b-lista{
  margin:0 0 var(--e5); padding-left:var(--e4);
  font-size:var(--f4); line-height:1.75;
}
.b-lista li{margin-bottom:var(--e2); padding-left:var(--e1)}
.b-lista li::marker{color:var(--blue-lt)}

/* ── La imagen y su sitio ─────────────────────────────────────
   La colocacion la elige quien escribe. Centrada va sola, a lo ancho de la
   columna. A un lado, la imagen y su texto son una sola pieza: por eso van en
   la misma rejilla y no como dos bloques seguidos. */
.b-imagen{margin:var(--e7) 0}
/* La figura se encoge a lo que mide la foto y se centra entera, en vez de
   ocupar la columna. Asi el pie queda debajo de la imagen y no suelto en el
   margen izquierdo cuando la foto es pequena. */
.b-imagen-centro{display:flex;justify-content:center}
/* Tope del 50% de la columna. Una foto grande a todo el ancho del panel se
   come la pantalla y corta la lectura; a media columna acompana al texto, que
   es lo que hace una imagen centrada entre parrafos. Y sigue sin agrandarse:
   si mide menos, se queda como esta. */
.b-imagen-centro .b-foto{width:fit-content;max-width:50%}

.b-imagen-izquierda,
.b-imagen-derecha{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--e6);
}
/* La foto a la izquierda y el texto a la derecha, o al reves. El orden del
   HTML no cambia —la imagen siempre va primero— para que quien lee con voz la
   escuche antes que su texto, igual en los dos casos. */
.b-imagen-derecha > .b-foto{order:2}

.b-foto{margin:0}
.b-foto img{
  /* width:auto y no 100%: una foto mas estrecha que la columna se queda de su
     tamano en vez de estirarse. Con width:100% una imagen de 244 px se
     agrandaba hasta los 870 del panel —tres veces y media— y salia borrosa.
     Agrandar nunca mejora una foto; encogerla si. */
  display:block; width:auto; max-width:100%; height:auto; max-height:70vh;
  margin-inline:auto;
  border:1px solid var(--blue-tint); border-radius:var(--e1);
}
.b-foto figcaption{
  margin-top:var(--e2); font-size:var(--f2); line-height:1.5; color:var(--faint);
}

/* El texto que acompana a la imagen. Si sobra alto queda hueco debajo de la
   foto, que es lo acordado: el criterio de cuanto escribir ahi es de ella. */
.b-junto > :first-child{margin-top:0}
.b-junto > :last-child{margin-bottom:0}
/* dentro de media columna el titulo no se achica: si eligio "titulo", es el
   mismo titulo de siempre. Solo se le quita el aire de arriba, que aqui ya lo
   pone la rejilla. */
.b-junto .b-titulo{margin-top:0}

/* ── Referencias ─────────────────────────────────────────────
   Cierran el articulo y se separan del texto, porque no son el texto: son de
   donde sale. */
.b-referencias{
  margin:var(--e9) 0 0; padding-top:var(--e5);
  border-top:1px solid var(--blue-tint);
}
.b-referencias h2{
  margin:0 0 var(--e4); font-family:var(--s); font-size:var(--f2);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-lt); text-indent:.16em;
}
.b-referencias ol{margin:0; padding-left:var(--e5)}
.b-referencias li{
  margin-bottom:var(--e3); font-size:var(--f2); line-height:1.6; color:var(--dim);
}
.b-referencias li::marker{color:var(--faint)}
.b-referencias a{color:var(--blue-lt); text-decoration:none; white-space:nowrap}
.b-referencias a:hover{text-decoration:underline}

.sin-contenido{color:var(--faint); font-style:italic}

@media(max-width:700px){
  /* Sin ancho para dos columnas, la imagen y su texto se apilan. La foto
     arriba, que es como se leen en papel. */
  .b-imagen-izquierda,
  .b-imagen-derecha{grid-template-columns:minmax(0,1fr); row-gap:var(--e5)}
  .b-imagen-derecha > .b-foto{order:0}
  /* Y el tope del 50% se levanta: media columna de movil no es una imagen, es
     un sello. */
  .b-imagen-centro .b-foto{max-width:100%}
}
@media(max-width:600px){
  .cuerpo{margin-top:var(--e6); padding-top:var(--e6)}
}

/* ══ LISTADO ═════════════════════════════════════════════════════
   Vive dentro de la landing: misma barra, mismo contacto, mismo
   pie. Lo unico distinto es lo que va en medio. */

/* El titulo del listado no necesita regla propia: lleva .shd .shd-izq, el
   mismo encabezado que acerca de mi, testimonios y contacto. Aqui habia una
   copia de ese patron bajo el selector .blog h1, que ademas no se aplicaba
   nunca —el elemento lleva id="blog", no class— asi que el titulo salia con
   el tamano por defecto del navegador. */

/* ── Filtros ─────────────────────────────────────────────────── */
/* Los filtros eran pildoras grises de contorno: correctas y frias, sin nada
   que invitara a pulsarlas. Ahora tienen fondo propio, se levantan al pasar el
   cursor, y la activa lleva el azul del sitio. */
.blog-filtros{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e7)}
.blog-filtros a{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e4);border:1px solid transparent;border-radius:999px;
  background:#fff;font-size:var(--f2);font-weight:500;color:var(--dim);
  text-decoration:none;box-shadow:0 1px 2px rgba(28,34,44,.05);
  transition:transform var(--t-short) var(--ease),box-shadow var(--t-short) var(--ease),
             color var(--t-short),background var(--t-short);
}
.blog-filtros a:hover{transform:translateY(-1px);color:var(--blue-dk);
  box-shadow:0 4px 12px rgba(28,34,44,.1)}
.blog-filtros a.act{background:var(--blue);color:#fff;
  box-shadow:0 2px 10px rgba(61,108,181,.35)}
.blog-filtros a.act:hover{background:var(--blue-dk);color:#fff}
.blog-filtros span{
  padding:0 var(--e1);border-radius:999px;font-size:var(--f1);font-weight:600;
  background:var(--paper-2);color:var(--faint);
}
.blog-filtros a.act span{background:rgba(255,255,255,.22);color:#fff}

/* ── Rejilla ──────────────────────────────────────────────────
   auto-fill y no auto-fit: con pocas tarjetas no se estiran hasta
   ocupar todo el ancho, que es lo que delata que hay poco. */
.rejilla{
  display:grid;gap:var(--e6);margin-top:var(--e8);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

/* Al filtrar, la rejilla se rehace de una pagina a otra y las tarjetas
   aparecian de golpe. Entran con un desvanecido corto y escalonado: el ojo
   sigue el cambio en vez de encontrarse otra cosa ya puesta. El escalon solo
   llega a las primeras; mas abajo no se ve y solo retrasaria la lectura.
   Con movimiento reducido no corre: styles.css lo apaga todo. */
@keyframes entra-tarjeta{from{opacity:0;transform:translateY(var(--e3))}}
.rejilla .tarjeta{animation:entra-tarjeta var(--t-big) var(--ease) backwards}
.rejilla .tarjeta:nth-child(2){animation-delay:40ms}
.rejilla .tarjeta:nth-child(3){animation-delay:80ms}
.rejilla .tarjeta:nth-child(4){animation-delay:120ms}
.rejilla .tarjeta:nth-child(5){animation-delay:160ms}
.rejilla .tarjeta:nth-child(6){animation-delay:200ms}
.rejilla .tarjeta:nth-child(n+7){animation-delay:240ms}

.tarjeta{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--e2);overflow:hidden;background:#fff;
  border:1px solid var(--blue-tint);
  box-shadow:0 1px 3px rgba(28,34,44,.05);
  transition:border-color var(--t-exp) var(--ease),transform var(--t-exp) var(--ease),
             box-shadow var(--t-exp) var(--ease);
}
.tarjeta:hover{border-color:var(--blue-lt);transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(28,34,44,.07)}

.tarjeta-img{position:relative;aspect-ratio:3/2;background:var(--paper-2);overflow:hidden}
.tarjeta-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-big) var(--ease)}
.tarjeta:hover .tarjeta-img img{transform:scale(1.03)}
.sin-img{position:absolute;inset:0;background:
  linear-gradient(135deg,var(--paper-2),var(--blue-tint))}

.marca-galeria{
  position:absolute;right:var(--e3);bottom:var(--e3);
  display:inline-flex;align-items:center;gap:var(--e1);
  padding:var(--e1) var(--e2);border-radius:999px;
  background:rgba(36,64,107,.88);color:#fff;
  font-size:var(--f1);font-weight:500;backdrop-filter:blur(6px);
}
.marca-galeria svg{width:13px;height:13px}

.tarjeta-txt{display:flex;flex-direction:column;flex:1;padding:var(--e5)}
.tarjeta-tipo{margin:0;font-size:var(--f1);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-lt)}
.tarjeta-txt h2{margin:var(--e2) 0 0;font-size:var(--f4);font-weight:500;
  line-height:1.3;color:var(--blue-deep);text-wrap:balance}
.tarjeta-resumen{margin:var(--e2) 0 0;font-size:var(--f2);line-height:1.55;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-pie{margin:auto 0 0;padding-top:var(--e4);font-size:var(--f1);color:var(--faint)}

/* ── Cargar mas ──────────────────────────────────────────────
   Un boton y no desplazamiento infinito: la pagina termina en
   contacto y el pie, y el infinito los empuja para siempre. */
.mas{display:flex;flex-direction:column;align-items:center;gap:var(--e2);margin-top:var(--e9)}
.mas-cuenta{margin:0;font-size:var(--f1);color:var(--faint)}
.blog-vacio{margin-top:var(--e8);padding:var(--e9) var(--e5);text-align:center;
  border:1px dashed var(--blue-tint);border-radius:var(--e2);color:var(--faint)}

@media(max-width:600px){
  .rejilla{gap:var(--e5);margin-top:var(--e6);grid-template-columns:1fr}
}

/* La primera seccion abre pegada al nav.
   --corte (160px en escritorio) es la distancia ENTRE secciones: separa dos
   bloques de contenido distintos. Aqui arriba no hay nada de lo que separarse,
   solo la barra de navegacion, y ese hueco deja el titulo flotando en vacio.
   Abajo si se conserva: ahi empieza contacto. */
main > .sec:first-child,
.entrada > .sec:first-child{padding-top:var(--e9)}
@media(max-width:600px){
  main > .sec:first-child,
  .entrada > .sec:first-child{padding-top:var(--e7)}
}

/* ══ ENTRADA: articulo o galeria ══════════════════════════════
   Una sola maqueta para las dos. A la izquierda la ficha —lo que identifica la
   pieza, quieto— y a la derecha el panel —la pieza, que pasa por delante—.
   La variedad de dentro del panel la ponen los bloques, no la plantilla. */

/* ── La banda de migas ───────────────────────────────────────
   Donde estas a la izquierda, que puedes hacer a la derecha. */
.banda-migas{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--e5);flex-wrap:wrap;
  padding-bottom:var(--e5);margin-bottom:var(--e8);
  border-bottom:1px solid var(--blue-tint);
  font-size:var(--f2);color:var(--faint);
}
.banda-migas .migas{margin:0}
.migas a{color:var(--blue-lt);text-decoration:none}
.migas a:hover{text-decoration:underline}
.migas span[aria-hidden]{margin:0 var(--e1);opacity:.5}
.volver{flex:none;color:var(--blue-lt);text-decoration:none;font-weight:500}
.volver:hover{text-decoration:underline}

/* ── Las dos columnas ────────────────────────────────────────
   El filete vive en la columna de la ficha y no en el panel, asi que baja
   hasta donde llega el articulo aunque la ficha sea corta. */
.entrada-cols{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,2.7fr);
  column-gap:var(--e6);
}
.ficha{
  align-self:stretch;
  padding-right:var(--e6);
  border-right:1px solid var(--blue-tint);
}

/* ── La ficha ────────────────────────────────────────────────
   Fija: identifica la entrada, y la identidad no hace scroll. El tope deja
   pasar la barra de navegacion, que tambien se queda. */
.ficha-fija{position:sticky;top:calc(var(--e9) + var(--e5))}
.ficha .kicker{margin:0 0 var(--e3);font-family:var(--s);font-weight:600;
  font-size:var(--f1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lt);text-indent:.16em}
.ficha h1{margin:0;font-family:var(--d);font-weight:400;
  font-size:clamp(var(--f6),2vw,var(--f7));line-height:1.15;
  letter-spacing:-.01em;color:var(--blue-dk);text-wrap:balance}
.ficha-meta{margin:var(--e3) 0 0;font-size:var(--f1);color:var(--faint);
  letter-spacing:.02em}
.ficha-resumen{margin:var(--e4) 0 0;font-size:var(--f2);line-height:1.6;
  color:var(--dim)}

/* Borde y nada mas: la foto se sostiene sola y una sombra la separaria del
   fondo como si flotara. El mismo trato que las imagenes del panel.

   Y con su proporcion, sin recortar a 3:2. La tarjeta del listado si recorta
   —es una miniatura dentro de una rejilla y todas tienen que medir igual—,
   pero aqui recortar escondia justo lo que hay que juzgar: como es la foto
   que eligio. */
.ficha-img{margin:var(--e5) 0 0}
/* tampoco se agranda aqui: la ficha es estrecha, pero una foto pequena
   estirada se ve igual de mal en cualquier ancho */
.ficha-img img{display:block;width:auto;max-width:100%;height:auto;
  border:1px solid var(--blue-tint);border-radius:var(--e1)}

/* ── El panel ────────────────────────────────────────────────
   Blanco sobre el azul de la pagina. Dentro va el articulo y solo el articulo:
   el titulo de la entrada, su fecha y su resumen viven en la ficha.

   Se llama entrada-panel y no panel porque styles.css ya usa .panel para el
   desplegable del menu en movil, y ese empieza con display:none: el panel del
   articulo heredaba esa regla y no se veia. */
.entrada-panel{
  padding:clamp(var(--e5),3vw,var(--e8));
  background:#fff;border:1px solid var(--blue-tint);border-radius:var(--e2);
}

/* La galeria va sin caja.
   A un articulo la hoja blanca le sienta bien: es un documento, y el blanco
   dice "esto se lee". A un mosaico de fotos no: el marco las encierra y lo que
   se ve es un monton de cosas metidas en una caja. Las fotos ya tienen peso
   propio y su borde, y se sostienen sobre el fondo del sitio como se sostienen
   en el resto de la pagina. */
.entrada-panel.abierto{padding:0;background:none;border:0}
/* El nombre de la entrada, como antetitulo del contenido. Mismo estilo que
   "TMO" sobre "Terapia Manual Ortopedica" en la portada: no compite con el
   titulo que ella escribio debajo, lo presenta. */
.panel-antetitulo{
  margin:0 0 var(--e3); font-family:var(--s); font-weight:600;
  font-size:var(--f2); letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-lt); text-indent:.16em;
}
.entrada-panel .cuerpo{margin:0;max-width:none}
/* el primer bloque va pegado al antetitulo, no a su propio aire */
.entrada-panel .cuerpo > :first-child{margin-top:0}
.entrada-panel > .cuerpo > :first-child{margin-top:0}

@media(max-width:900px){
  /* Sin sitio para dos columnas la ficha deja de poder ser fija. El movil
     entero esta pendiente de revisar; esto solo evita que se rompa. */
  .entrada-cols{grid-template-columns:minmax(0,1fr);row-gap:var(--e8)}
  .ficha{border-right:0;padding-right:0}
  .ficha-fija{position:static}
}

/* ── Ver mas ─────────────────────────────────────────────────
   Una fila, nunca una rejilla: es una sugerencia al terminar, no otro listado. */
.sigue{border-top:1px solid var(--blue-tint)}
.sigue h2{margin:0 0 var(--e6);font-family:var(--s);font-size:var(--f2);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lt);text-indent:.16em}

.carrusel{position:relative}
.carrusel-via{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--e6) * 3) / 4);
  gap:var(--e6);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;            /* la barra la sustituyen los botones */
  padding-bottom:var(--e1);
}
.carrusel-via::-webkit-scrollbar{display:none}
.carrusel-via > *{scroll-snap-align:start}
@media(max-width:1100px){ .carrusel-via{grid-auto-columns:calc((100% - var(--e5) * 2) / 3);gap:var(--e5)} }
@media(max-width:800px){  .carrusel-via{grid-auto-columns:calc((100% - var(--e5)) / 2);gap:var(--e5)} }
@media(max-width:520px){  .carrusel-via{grid-auto-columns:82%;gap:var(--e4)} }

.carrusel-paso{
  position:absolute;top:calc(50% - var(--e6));
  width:var(--e7);height:var(--e7);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--blue-tint);background:#fff;color:var(--blue-dk);
  font-size:var(--f6);line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(28,34,44,.1);
  transition:background var(--t-short),color var(--t-short),opacity var(--t-short);
}
.carrusel-paso:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.carrusel-paso:disabled{opacity:.3;cursor:default}
.carrusel-paso:disabled:hover{background:#fff;color:var(--blue-dk);border-color:var(--blue-tint)}
.carrusel-antes{left:calc(var(--e7) / -2)}
.carrusel-despues{right:calc(var(--e7) / -2)}

/* ══ MOSAICO ═════════════════════════════════════════════════
   Columnas y no grid: cada imagen conserva su proporcion en vez
   de recortarse a un cuadrado, y grid obligaria a decidir la
   altura de cada celda de antemano. */
/* Sin margen propio: ahora el mosaico abre su banda y el relleno de la
   seccion ya pone el aire. */
.mosaico{column-count:3;column-gap:var(--e4)}
@media(max-width:900px){ .mosaico{column-count:2} }
@media(max-width:560px){ .mosaico{column-count:1} }

.pieza{
  display:block;width:100%;margin:0 0 var(--e4);padding:0;
  border:0;background:none;cursor:zoom-in;position:relative;
  border-radius:var(--e1);overflow:hidden;
  break-inside:avoid;          /* que una imagen no se parta entre columnas */
}
.pieza img{display:block;width:100%;height:auto}

/* Filas editoriales (mosaico_filas en comun/render.php). Cada fila fija su
   proporcion y las fotos llenan su hueco: el recorte es poco porque todas son
   horizontales, que es justo cuando se usa este diseno. */
.mosaico.en-filas{column-count:auto;display:flex;flex-direction:column;gap:var(--e3)}
.fila{display:grid;gap:var(--e3)}
.fila .pieza{margin:0;height:100%}
.fila .pieza img{height:100%;object-fit:cover}
.fila-grande,.fila-grande-inv{grid-template-rows:1fr 1fr;aspect-ratio:2/1}
.fila-grande{grid-template-columns:2fr 1fr}
.fila-grande .pieza:first-child{grid-row:span 2}
.fila-grande-inv{grid-template-columns:1fr 2fr}
.fila-grande-inv .pieza:first-child{grid-column:2;grid-row:1/span 2}
.fila-grande-inv .pieza:nth-child(2){grid-column:1;grid-row:1}
.fila-grande-inv .pieza:nth-child(3){grid-column:1;grid-row:2}
.fila-tres{grid-template-columns:repeat(3,1fr);aspect-ratio:4/1}
.fila-dos{grid-template-columns:1fr 1fr;aspect-ratio:8/3}
.fila-sola{aspect-ratio:2/1}
/* Movil: la principal de cada fila a todo el ancho, el resto de a dos. */
@media(max-width:560px){
  .fila{aspect-ratio:auto}
  .fila .pieza{aspect-ratio:4/3}
  .fila-grande,.fila-grande-inv{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .fila-grande .pieza:nth-child(n),.fila-grande-inv .pieza:nth-child(n){grid-column:auto;grid-row:auto}
  .fila-grande .pieza:first-child,.fila-grande-inv .pieza:first-child{grid-column:1/-1}
}

.pieza-velo{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e3);
  padding:var(--e4);
  background:linear-gradient(to top,rgba(28,34,44,.72) 0%,rgba(28,34,44,0) 55%);
  opacity:0;transition:opacity var(--t-exp) var(--ease);
  text-align:left;
}
.pieza:hover .pieza-velo,
.pieza:focus-visible .pieza-velo{opacity:1}

.pieza-titulo{color:#fff;font-size:var(--f2);line-height:1.35;font-weight:400}
.pieza-lupa{
  flex:none;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(251,250,247,.92);color:var(--blue-deep);
}
.pieza-lupa svg{width:17px;height:17px}

/* ══ VISOR ═══════════════════════════════════════════════════ */
/* inset:0 y margin:auto: un <dialog> con width pero sin esos dos queda pegado
   arriba a la izquierda, porque su posicion por defecto no es centrada. */
.visor{
  position:fixed;inset:0;margin:auto;
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  padding:0;border:0;background:rgba(18,24,34,.94);
  display:none;
}
.visor[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.visor::backdrop{background:rgba(18,24,34,.94)}

.visor-marco{margin:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--e4);padding:var(--e5);min-width:0;height:100%}
.visor-marco img{max-width:100%;max-height:calc(100dvh - var(--e12));
  width:auto;height:auto;object-fit:contain;border-radius:var(--e1)}
.visor-marco figcaption{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap;
  justify-content:center;color:rgba(251,250,247,.9);font-size:var(--f2);text-align:center}
.visor-cuenta{color:rgba(251,250,247,.5);font-size:var(--f1);font-variant-numeric:tabular-nums}

.visor-nav,.visor-cerrar{
  border:0;background:transparent;color:rgba(251,250,247,.75);cursor:pointer;
  transition:color var(--t-short),background var(--t-short);
}
.visor-nav{width:var(--e9);height:100%;font-size:var(--f8);line-height:1}
.visor-nav:hover{color:#fff;background:rgba(251,250,247,.06)}
.visor-cerrar{position:absolute;top:var(--e4);right:var(--e5);z-index:2;
  width:var(--e7);height:var(--e7);border-radius:50%;font-size:var(--f7);line-height:1}
.visor-cerrar:hover{color:#fff;background:rgba(251,250,247,.12)}

@media(max-width:700px){
  .visor[open]{grid-template-columns:1fr}
  .visor-nav{position:absolute;top:50%;transform:translateY(-50%);height:var(--e9);
    width:var(--e8);border-radius:var(--e1);background:rgba(18,24,34,.5)}
  .visor-antes{left:var(--e2)} .visor-despues{right:var(--e2)}
  .visor-marco{padding:var(--e8) var(--e4) var(--e6)}
}


/* El dominio al que lleva de verdad cada fuente. Lo que engana a quien lee no
   es el esquema de la direccion —eso se filtra al guardar— sino que el texto
   diga una cosa y el enlace vaya a otra. */
.b-dominio{color:var(--faint);font-variant-numeric:tabular-nums}

/* Los temas en la ficha. Informan de que va la entrada; no son enlaces: la
   ficha identifica la pieza y convertirlos en navegacion la volveria un menu.
   Para seguir leyendo del mismo tema esta "Ver mas" al pie. */
.ficha-temas{display:flex;flex-wrap:wrap;gap:var(--e2);
  margin:var(--e5) 0 0;padding:0;list-style:none}
.ficha-temas li{
  padding:var(--e1) var(--e3);border:1px solid var(--blue-tint);border-radius:999px;
  font-size:var(--f1);line-height:1.5;color:var(--blue-dk);background:#fff;
}

.blog-sin-cruce{margin:var(--e6) 0 0;font-size:var(--f2);color:var(--faint)}

/* ── Compartir ───────────────────────────────────────────────
   Para que el visitante la comparta en SUS redes. No estan Instagram ni
   TikTok: no admiten recibir un enlace desde una web, y un icono que no hace
   nada es peor que no tenerlo. */
.compartir{margin:var(--e6) 0 0}
.compartir-rotulo{margin:0 0 var(--e3);font-family:var(--s);font-size:var(--f1);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.compartir ul{display:flex;gap:var(--e2);margin:0;padding:0;list-style:none}
.compartir a,.compartir button{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:var(--e7);height:var(--e7);padding:0;
  border:1px solid var(--blue-tint);border-radius:50%;
  background:#fff;color:var(--blue-dk);cursor:pointer;
  transition:background var(--t-short),color var(--t-short),border-color var(--t-short);
}
.compartir a:hover,.compartir button:hover{
  background:var(--blue);border-color:var(--blue);color:#fff}
.compartir svg{width:18px;height:18px}
/* el verde de WhatsApp es el de la marca, como el boton flotante del sitio */
.compartir-whatsapp:hover{background:var(--wa)!important;border-color:var(--wa)!important}

/* El aviso de copiado, sobre el boton y sin empujar nada */
.compartir-hecho{
  position:absolute;bottom:calc(100% + var(--e2));left:50%;transform:translateX(-50%);
  padding:var(--e1) var(--e2);border-radius:var(--e1);
  background:var(--blue-deep);color:var(--paper);
  font-size:var(--f1);line-height:1.4;white-space:nowrap;pointer-events:none;
}