/* =========================================================
   RETESA — Blog (listado y artículo).
   Hoja SOLO del blog: la cargan blog.php y articulo.php con $pageCss.
   No redefine css/servicios.css (hoja compartida del sitio): solo recolorea
   dentro de sus propios contenedores las clases que allí están pensadas para
   fondo oscuro (el breadcrumb) y ajusta dos medidas que descuadrarían la rejilla.
   Estructura: sidebar fijo de 320px a la izquierda + contenido a la derecha.
   ========================================================= */

/* ---------- Rejilla de dos columnas ---------- */
.blog-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.blog-single{ padding-block:56px 84px; }

/* ---------- Sidebar ---------- */
.blog-sidebar{ display:flex; flex-direction:column; gap:26px; }

.blog-widget{
  background:#fff;
  border:1px solid var(--line);
  padding:24px 22px;
}
.blog-widget-title{
  position:relative;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
}
.blog-widget-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:52px;
  height:2px;
  background:var(--red);
}

/* ---------- Widget 1: buscar ---------- */
.blog-search{ display:flex; }
.blog-search input[type="search"]{
  flex:1 1 auto;
  min-width:0;
  height:46px;
  padding:0 14px;
  font-family:var(--font);
  font-size:.9rem;
  color:var(--ink);
  background:var(--gray);
  border:1px solid var(--line);
  border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);
  -webkit-appearance:none;
  appearance:none;
}
.blog-search input[type="search"]::placeholder{ color:var(--muted); }
.blog-search input[type="search"]:focus{
  outline:0;
  border-color:var(--red);
  background:#fff;
}
/* Botón del buscador: reusa .btn .btn-primary y solo ajusta la medida. */
.blog-search-btn{
  flex:0 0 auto;
  width:46px;
  height:46px;
  padding:0;
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ---------- Widget 2: artículos recientes ---------- */
.blog-recent{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.blog-recent-item{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:14px;
  align-items:center;
  color:var(--body);
}
.blog-recent-thumb{
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--gray);
}
.blog-recent-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.blog-recent-item:hover .blog-recent-thumb img{ transform:scale(1.06); }
.blog-recent-txt{ display:block; min-width:0; }
/* Solo fecha: los artículos no tienen autor y no se inventa ninguno. */
.blog-recent-date{
  display:block;
  margin-bottom:3px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red);
}
.blog-recent-title{
  display:block;
  font-size:.92rem;
  font-weight:500;
  line-height:1.35;
  color:var(--ink);
}
.blog-recent-item:hover .blog-recent-title{ color:var(--red); }

/* ---------- Widget 3: cotización (ocupa el lugar del boletín) ---------- */
.blog-cta{ background:var(--navy); border-color:var(--navy); }
.blog-cta .blog-widget-title{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.16);
}
.blog-cta .blog-widget-title::after{ background:var(--amber); }
.blog-cta p{
  margin:0 0 18px;
  font-size:.92rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* ---------- Widget 4: galería (4 columnas × 2 filas) ---------- */
/* No se usa la clase .gallery-item: js/main.js le engancha el visor ampliado
   y el clic debe llevar a galeria.php, no abrir el lightbox. */
.blog-gal{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.blog-gal a{
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--gray);
}
.blog-gal img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.blog-gal a:hover img{ transform:scale(1.12); }
.blog-gal a:hover{ box-shadow:0 0 0 2px var(--red); }

/* ---------- Widget 5: temas ---------- */
.blog-temas{ margin:0; padding:0; list-style:none; }
.blog-temas li{ border-bottom:1px solid var(--line); }
.blog-temas li:last-child{ border-bottom:0; }
.blog-temas a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  font-size:.9rem;
  line-height:1.45;
  color:var(--body);
}
.blog-temas a:hover{ color:var(--red); }
.blog-temas-count{
  flex:0 0 auto;
  font-size:.75rem;
  font-weight:600;
  color:var(--muted);
}
.blog-temas a:hover .blog-temas-count{ color:var(--red); }

/* ---------- Listado ---------- */
/* Artículo destacado: imagen grande a todo el ancho de la columna. */
.blog-featured{
  display:block;
  margin-bottom:44px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--body);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-featured:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  color:var(--body);
}
.blog-featured .post-body{ padding:28px 30px 32px; }
.blog-featured h3{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  margin-bottom:.4em;
}
.blog-featured p{ font-size:1rem; }

/* Encabezado de resultados del buscador */
.blog-results{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 20px;
  flex-wrap:wrap;
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.blog-results h2{ margin:0; font-size:1.4rem; }
.blog-results-count{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.blog-empty{
  padding:46px 32px;
  background:var(--gray);
  border:1px solid var(--line);
  text-align:center;
}
.blog-empty h2{ font-size:1.35rem; }
.blog-empty p{ margin:0 0 18px; }
.blog-empty p:last-child{ margin-bottom:0; }

/* ---------- Artículo ---------- */
/* El breadcrumb vive aquí (no en el subheader): el <h1> es el del artículo. */
.blog-crumbs.breadcrumb{
  margin-bottom:16px;
  font-size:.86rem;
  font-weight:500;
  color:var(--body);
}
.blog-crumbs.breadcrumb a{ color:var(--red); }
.blog-crumbs.breadcrumb a:hover{ color:var(--red-dk); }
.blog-crumbs .breadcrumb-sep{ border-color:var(--muted); }
.blog-crumbs.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* .article-header trae 70px arriba y el título a 920px de ancho máximo; dentro
   de la columna eso descuadraría el contenido frente al sidebar. */
.blog-main .article-header{ padding-block:0 28px; }
.blog-main .article-header h1{ max-width:none; }
.blog-main .article-meta{ margin-bottom:0; }

/* Comillas decorativas sobre la barra ámbar de la referencia.
   Mismo selector que servicios.css para ganar por orden de carga. */
.article-body blockquote{
  position:relative;
  margin:1.8em 0;
  padding:26px 28px 26px 62px;
  border-left:4px solid var(--amber);
  background:var(--gray);
  color:var(--ink);
  font-size:1.08rem;
  font-style:italic;
  line-height:1.62;
}
.article-body blockquote::before{
  content:"\201C";   /* comilla tipográfica de apertura, en ASCII puro */
  position:absolute;
  left:20px;
  top:8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.4rem;
  font-style:normal;
  line-height:1;
  color:var(--amber);
}

/* ---------- Pantallas angostas ---------- */
@media (max-width:1200px){
  .blog-layout{ gap:36px; }
}
@media (max-width:1000px){
  /* Una sola columna: el artículo se lee antes que los widgets. */
  .blog-layout{ grid-template-columns:1fr; gap:44px; }
  .blog-sidebar{ order:2; }
  .blog-main{ order:1; }
}
@media (max-width:700px){
  .blog-single{ padding-block:36px 60px; }
  .blog-featured .post-body{ padding:22px 20px 26px; }
  .blog-widget{ padding:22px 18px; }
  .blog-main .article-header{ padding-block:0 22px; }
  .article-body blockquote{
    padding:22px 20px 22px 52px;
    font-size:1rem;
  }
  .article-body blockquote::before{ left:14px; font-size:2.8rem; }
  /* Galería del sidebar: a 4 columnas cada celda quedaba en 73 px. Dos columnas
     (≈160 px por foto) es lo que se ve bien en teléfono. */
  .blog-gal{ grid-template-columns:repeat(2,1fr); }
  /* Temas: el renglón medía 39 px de alto. Se deja en 44 px sin tocar la letra. */
  .blog-temas a{ min-height:44px; }
}

/* ---------- Guarda de :hover en pantalla táctil ----------
   Sin puntero, el :hover se queda pegado después del toque (la miniatura ampliada,
   el tema en rojo, la tarjeta levantada). Aquí se devuelve cada efecto a su estado
   de reposo. Las reglas de escritorio no se tocan. */
@media (hover:none){
  .blog-recent-item:hover .blog-recent-thumb img{ transform:none; }
  .blog-recent-item:hover .blog-recent-title{ color:var(--ink); }
  .blog-gal a:hover img{ transform:none; }
  .blog-gal a:hover{ box-shadow:none; }
  .blog-temas a:hover{ color:var(--body); }
  .blog-temas a:hover .blog-temas-count{ color:var(--muted); }
  .blog-featured:hover{ transform:none; box-shadow:none; }
}