/*
 * Blog y portafolio (app/plantillas/blog.php, entrada.php, portafolio.php, portafolio-item.php).
 * Se carga solo en esas plantillas ($pagina['css'] = ['contenido']).
 */

/* ───────────── Listados ───────────── */
.listado__cabecera { max-width: 46rem; margin-bottom: 1.75rem; }
.listado__pagina { color: var(--texto-suave); font-weight: 400; }
.listado__vacio { color: var(--texto-suave); }
.listado__servicio { margin: 2.5rem 0 0; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.25rem; }
.filtros a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; background: #fff;
  color: var(--marino); font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.filtros a:hover { border-color: var(--marino); }
.filtros a[aria-current="page"] { background: var(--marino); border-color: var(--marino); color: #fff; }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin-top: 3rem; }
.paginacion ol { display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.paginacion ol a, .paginacion ol span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .5rem;
  border: 1px solid var(--borde); border-radius: var(--radio-btn); color: var(--marino); font-weight: 600; text-decoration: none;
}
.paginacion ol a:hover { border-color: var(--marino); }
.paginacion [aria-current="page"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.paginacion__flecha { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--marino); font-weight: 600; text-decoration: none; }
.paginacion__flecha .icono { width: 18px; height: 18px; }

/* Etiqueta enlazada (categoría de la entrada, tipos del trabajo) */
.etiqueta--enlace {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--rojo-suave);
  color: var(--rojo-texto); text-decoration: none;
}
.etiqueta--enlace:hover { background: #fbd3d8; }

/* ───────────── Entrada ───────────── */
.contenedor--texto { max-width: calc(46rem + 2 * var(--gutter)); }
.entrada__cabecera { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.entrada__titulo { margin: .9rem 0 1rem; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); line-height: 1.12; }
.entrada__datos { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 2rem; color: var(--texto-suave); font-size: var(--fs-small); }
.entrada__datos span + span::before { content: "·"; margin-right: 1.25rem; color: var(--borde-fuerte); }
.entrada__imagen { max-width: calc(60rem + 2 * var(--gutter)); margin: 0 auto clamp(2rem, 1rem + 3vw, 3rem); }
.entrada__imagen img { width: 100%; height: auto; border-radius: var(--radio); }
.entrada__cuerpo { padding-bottom: var(--seccion); }
.entrada__cuerpo > * + * { margin-top: 2.5rem; }

.indice-entrada { padding: 1.25rem 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); }
.indice-entrada__titulo { margin: 0 0 .6rem; font-weight: 700; color: var(--marino); }
.indice-entrada ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.indice-entrada a { color: var(--texto); }
.indice-entrada a:hover { color: var(--rojo-texto); }

/* Texto largo (contenido migrado de WordPress o escrito en el CRM) */
.prosa { font-size: 1.125rem; line-height: 1.75; }
.prosa > * { margin: 0 0 1.25rem; }
.prosa h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); scroll-margin-top: calc(var(--header-alto) + 1rem); }
.prosa h3 { margin: 2rem 0 .75rem; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.3125rem); scroll-margin-top: calc(var(--header-alto) + 1rem); }
.prosa h4 { margin: 1.5rem 0 .5rem; font-size: 1.0625rem; }
.prosa > :first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li { margin-bottom: .45rem; }
.prosa li::marker { color: var(--rojo); }
.prosa a { color: var(--rojo-texto); text-underline-offset: 3px; }
.prosa blockquote { margin-inline: 0; padding: .25rem 0 .25rem 1.25rem; border-left: 4px solid var(--rojo); color: var(--marino); font-size: 1.1875rem; }
.prosa figure { margin: 2rem 0; }
.prosa figure img, .prosa p img { width: 100%; height: auto; border-radius: var(--radio-btn); }
.prosa figcaption { margin-top: .5rem; color: var(--texto-suave); font-size: var(--fs-small); text-align: center; }
.prosa .tabla { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-btn); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prosa th, .prosa td { padding: .65rem .9rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.prosa th { background: var(--fondo-alt); color: var(--marino); }
.prosa tr:last-child td { border-bottom: 0; }
.prosa code { padding: .1rem .35rem; border-radius: 4px; background: var(--fondo-alt); font-size: .9em; }

/* Autor */
.autor { display: flex; align-items: center; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--borde); }
.autor__foto {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--marino); color: #fff; font-weight: 700; letter-spacing: .02em;
}
.autor__nombre { margin: 0; font-weight: 700; color: var(--marino); }
.autor__cargo { margin: 0; color: var(--texto-suave); font-size: var(--fs-small); }
.autor__cargo a { color: inherit; }

/* ───────────── Trabajo ───────────── */
/* Hero: color o imagen de fondo de la ficha con el logo centrado */
.trabajo__hero {
  display: grid; place-items: center;
  min-height: clamp(220px, 18rem + 10vw, 460px); padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--gutter);
  background-position: center top; background-repeat: no-repeat; background-size: cover;
}
.trabajo__hero img { width: auto; max-width: min(600px, 80%); max-height: clamp(120px, 6rem + 10vw, 240px); object-fit: contain; }

.trabajo__cabecera { padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.trabajo__tipos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.trabajo__tipos .etiqueta { margin: 0; }
.trabajo__titulo { margin-bottom: 1rem; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); line-height: 1.12; }
.trabajo__extracto { margin: 0; font-size: 1.1875rem; line-height: 1.65; color: var(--texto-suave); }
.trabajo__texto { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* Galerías: sin cajas (sin fondo, borde ni esquinas redondeadas) */
.trabajo__galeria { max-width: calc(1100px + 2 * var(--gutter)); padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.trabajo__galeria-titulo { margin-bottom: 1.5rem; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); text-align: center; }
.galeria-trabajo img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; background: transparent; }
/* slides: una debajo de otra (sitios web) */
.galeria-trabajo--slides { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
/* grilla: 3 columnas, hasta 9 (redes sociales) */
.galeria-trabajo--grilla { display: grid; grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); gap: clamp(.5rem, .25rem + 1vw, 1rem); }
.trabajo__cierre { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--seccion); }
.paginacion__salto { display: grid; place-items: end center; min-width: 20px; height: 44px; color: var(--texto-suave); }
.paginacion__salto::before { content: "\2026"; }   /* separador visual, fuera del texto */