/* Blog. */

/* ---------- Piezas comunes ---------- */
.blog-pastilla { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ubm-rubor); color: var(--ubm-turquesa-hondo); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
a.blog-pastilla:hover { background: var(--ubm-rosa); color: var(--ubm-turquesa-hondo); }
.blog-lectura { display: inline-flex; align-items: center; gap: 6px; color: var(--ubm-texto-3); }

.blog-tarjeta { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.blog-tarjeta__foto { display: block; aspect-ratio: 3 / 2; border-radius: var(--ubm-radio-foto); overflow: hidden; background: var(--ubm-rubor); border: 1px solid var(--ubm-linea); }
.blog-tarjeta__foto img, .blog-destacado__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ubm-curva); }
.blog-tarjeta:hover .blog-tarjeta__foto img, .blog-destacado:hover .blog-destacado__foto img { transform: scale(1.03); }
.blog-tarjeta__titulo { margin: 6px 0 0; font-family: var(--ubm-letra); font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ubm-tinta); text-wrap: balance; }
.blog-tarjeta__titulo a { color: inherit; text-decoration: none; }
.blog-tarjeta__titulo a:hover { text-decoration: underline; }
.blog-tarjeta__resumen { display: -webkit-box; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--ubm-texto-2); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.blog-tarjeta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: auto 0 0; padding-top: 4px; font-size: 14px; }

/* Fila de tarjetas: tres por fila en escritorio; en el móvil se desliza. */
.blog-carril { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3); gap: 32px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.blog-carril::-webkit-scrollbar { display: none; }
.blog-carril > li { scroll-snap-align: start; }

/* ---------- Portada y categorías ---------- */
.blog-lista { display: flex; flex-direction: column; gap: 36px; padding-bottom: 88px; }
.blog-cabeza { display: flex; flex-direction: column; gap: 14px; max-width: 52em; }
.blog-cabeza__titulo { margin: 0; line-height: 1.08; }
.blog-cabeza__texto { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ubm-texto-2); }

.blog-temas ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-tema { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ubm-borde); border-radius: 999px; color: var(--ubm-tinta); font-size: 15px; white-space: nowrap; text-decoration: none; }
.blog-tema:hover { background: var(--ubm-rubor); color: var(--ubm-tinta); }
.blog-tema__n { color: var(--ubm-texto-3); }
.blog-tema--actual, .blog-tema--actual:hover { border-color: var(--ubm-turquesa-hondo); background: var(--ubm-turquesa-hondo); color: #fff; font-weight: 600; }
.blog-tema--actual .blog-tema__n { color: var(--ubm-rubor); font-weight: 500; }

.blog-destacado { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.blog-destacado__foto { display: block; aspect-ratio: 3 / 2; border-radius: var(--ubm-radio-bloque); overflow: hidden; background: var(--ubm-rubor); border: 1px solid var(--ubm-linea); }
.blog-destacado__textos { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.blog-destacado__titulo { margin: 0; font-size: 34px; line-height: 1.15; }
.blog-destacado__titulo a { color: inherit; text-decoration: none; }
.blog-destacado__titulo a:hover { text-decoration: underline; }
.blog-destacado__resumen { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ubm-texto-2); }
.blog-destacado .btn { margin-top: 6px; }

.blog-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 16px 0 0; padding: 0; list-style: none; }
.blog-vacio { margin: 0; color: var(--ubm-texto-2); }

.blog-mas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.blog-mas__cuenta { margin: 0; font-size: 15px; color: var(--ubm-texto-2); }
.blog-mas__barra { display: block; width: 240px; max-width: 100%; height: 4px; border-radius: 999px; background: var(--ubm-linea); overflow: hidden; }
.blog-mas__barra > span { display: block; height: 100%; border-radius: 999px; background: var(--ubm-turquesa); transition: width .6s var(--ubm-curva); }
.blog-mas__boton { min-height: 50px; padding: 0 30px; }

.blog-tienda { display: flex; flex-direction: column; gap: 18px; padding: 44px 48px; border-radius: 28px; background: var(--ubm-salvia); }
.blog-tienda__titulo { margin: 0; font-size: 30px; color: var(--ubm-turquesa-hondo); }
.blog-tienda__texto { margin: 0; max-width: 40em; color: var(--ubm-texto-2); font-size: 17px; }
.blog-tienda__categorias { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-tienda .chip-enlace { background: #fff; }
.blog-tienda .chip-enlace:hover { background: var(--ubm-rubor); }

/* ---------- Publicación ---------- */
.blog-publicacion { display: flex; flex-direction: column; gap: 32px; }
.blog-aviso { margin: 0; }
.blog-articulo { display: flex; flex-direction: column; gap: 32px; padding-bottom: 88px; }
.blog-articulo__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 54em; }
.blog-articulo__titulo { margin: 0; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; }
.blog-articulo__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: 15px; color: var(--ubm-texto-3); }
.blog-articulo__portada { margin: 0; }
.blog-articulo__portada img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--ubm-radio-bloque); background: var(--ubm-rubor); }
.blog-articulo__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }

.blog-texto { display: flex; flex-direction: column; gap: 48px; min-width: 0; font-size: 18px; line-height: 1.7; container-type: inline-size; }
.blog-entradilla, .blog-apartado__texto { display: flex; flex-direction: column; gap: 16px; }
.blog-entradilla > p:first-child { font-size: 20px; line-height: 1.6; color: var(--ubm-texto-2); }
.blog-texto p, .blog-texto ul, .blog-texto ol, .blog-texto blockquote, .blog-texto figure { margin: 0; }
.blog-texto ul, .blog-texto ol { padding-left: 1.3em; }
.blog-texto li + li { margin-top: 6px; }
.blog-texto a:not(.btn) { color: var(--ubm-turquesa-hondo); text-decoration: underline; text-underline-offset: 4px; }
.blog-texto strong, .blog-texto b { font-weight: 600; }
.blog-texto h3 { margin: 8px 0 0; font-size: 22px; line-height: 1.25; }
.blog-texto h4 { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
.blog-texto blockquote { padding: 18px 22px; border-radius: var(--ubm-radio-foto); background: var(--ubm-rubor); font-family: var(--ubm-letra-titulos); font-size: 1.05em; font-style: italic; color: var(--ubm-tinta); }
.blog-texto img { display: block; max-width: 100%; height: auto; border-radius: var(--ubm-radio-foto); }
/* Las fotos verticales no ocupan toda la pantalla. */
.blog-entradilla img, .blog-apartado__texto img { width: auto; max-height: 640px; margin-inline: auto; }
.blog-texto figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ubm-texto-3); }
.blog-texto iframe { max-width: 100%; border: 0; border-radius: var(--ubm-radio-foto); }
.blog-texto [style*="text-align"] { text-align: inherit !important; }

.blog-apartado { display: flex; flex-direction: column; gap: 16px; }
.blog-apartado h2 { margin: 0; font-size: 28px; line-height: 1.2; scroll-margin-top: 24px; }
.blog-apartado__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.blog-apartado__foto { grid-row: 1; margin: 0; }
.blog-apartado__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ubm-linea); background: var(--ubm-rubor); }
@container (min-width: 640px) {
  .blog-apartado__cuerpo { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .blog-apartado__foto { grid-row: auto; }
}

.blog-producto { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: var(--ubm-radio-foto); background: var(--ubm-rubor); }
.blog-producto .blog-producto__foto { flex: none; width: 76px; height: 76px; max-height: none; margin: 0; border-radius: 14px; object-fit: cover; background: #fff; }
.blog-producto__datos { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.blog-producto__nombre { font-size: 16px; font-weight: 600; line-height: 1.35; }
.blog-producto__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 15px; line-height: 1.4; }
.blog-producto__precio > span:first-child { font-weight: 600; }
.blog-producto__personalizado { display: inline-flex; align-items: center; gap: 6px; color: var(--ubm-turquesa-hondo); font-size: 14px; font-weight: 600; }
.blog-texto .blog-producto__boton { flex: none; color: #fff; text-decoration: none; }

.blog-autor { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--ubm-radio-bloque); background: var(--ubm-rubor); font-size: 16px; line-height: 1.55; }
.blog-autor__logo { flex: none; width: 72px; height: 72px; border-radius: 50% !important; background: #fff; box-shadow: 0 0 0 4px #fff; object-fit: contain; }
.blog-autor__nombre { font-weight: 600; }
.blog-autor__texto { color: var(--ubm-texto-2); }
.blog-autor__texto a { font-weight: 600; }

.blog-lateral { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.blog-indice { padding: 24px; border-radius: var(--ubm-radio-bloque); background: var(--ubm-salvia); }
.blog-indice__titulo, .blog-ayuda__titulo { margin: 0 0 10px; font-family: var(--ubm-letra-titulos); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ubm-turquesa-hondo); text-wrap: balance; }
.blog-indice ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.blog-indice a { display: flex; align-items: center; min-height: 36px; padding: 6px 0; border-bottom: 1px solid #d9e6dd; color: var(--ubm-tinta); font-size: 15px; line-height: 1.35; text-decoration: none; }
.blog-indice li:last-child a { border-bottom: 0; }
.blog-indice a:hover, .blog-indice a[aria-current="true"] { color: var(--ubm-turquesa-hondo); text-decoration: underline; }
.blog-ayuda { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: var(--ubm-radio-bloque); background: var(--ubm-rubor); }
.blog-ayuda__titulo { margin: 0; }
.blog-ayuda__texto { margin: 0; font-size: 15px; color: var(--ubm-texto-2); }
.blog-ayuda .btn { margin-top: 4px; }

.blog-indice-movil { display: none; border-radius: var(--ubm-radio-foto); background: var(--ubm-salvia); padding: 0 18px; }
.blog-indice-movil summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-weight: 600; cursor: pointer; list-style: none; }
.blog-indice-movil summary::-webkit-details-marker { display: none; }
.blog-indice-movil summary .icono { flex: none; color: var(--ubm-turquesa); transition: transform .35s var(--ubm-curva); }
.blog-indice-movil[open] summary .icono { transform: rotate(180deg); }
.blog-indice-movil ol { margin: 0; padding: 0 0 12px; list-style: none; }
.blog-indice-movil li + li { margin-top: 0; }
.blog-indice-movil a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid #d9e6dd; color: var(--ubm-tinta) !important; font-size: 16px; line-height: 1.35; text-decoration: none !important; }

.blog-productos { padding: 0 0 88px; }
.blog-relacionadas { display: flex; flex-direction: column; gap: 28px; padding-bottom: 88px; }
.blog-relacionadas__titulo { margin: 0; }

/* ---------- Portada de la tienda ---------- */
.blog-inicio .seccion__cabeza { align-items: center; }

/* ---------- Tamaños ---------- */
@media (max-width: 1199.98px) {
  .blog-articulo__cuerpo { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}
@media (max-width: 991.98px) {
  .blog-destacado { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-articulo__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-lateral { display: none; }
  .blog-indice-movil { display: block; }
}
@media (max-width: 767.98px) {
  .blog-lista { gap: 24px; padding-bottom: 56px; }
  .blog-cabeza__texto, .blog-destacado__resumen { font-size: 17px; }
  .blog-temas ul { flex-wrap: nowrap; margin: 0 calc(-1 * var(--ubm-margen)); padding: 0 var(--ubm-margen) 4px; overflow-x: auto; scrollbar-width: none; }
  .blog-temas li { flex: none; }
  .blog-destacado__titulo { font-size: 26px; }
  .blog-rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 8px; }
  .blog-tienda { padding: 28px 20px; }
  .blog-tienda__titulo { font-size: 26px; }
  .blog-carril { grid-auto-columns: 84%; gap: 14px; margin: 0 calc(-1 * var(--ubm-margen)); padding: 0 var(--ubm-margen) 4px; scroll-padding: 0 var(--ubm-margen); }
  .blog-publicacion, .blog-articulo { gap: 24px; }
  .blog-articulo { padding-bottom: 56px; }
  .blog-articulo__portada img { aspect-ratio: 4 / 3; }
  .blog-texto { gap: 40px; font-size: 17px; }
  .blog-entradilla > p:first-child { font-size: 18px; }
  .blog-apartado h2 { font-size: 24px; }
  .blog-producto { gap: 12px; }
  .blog-producto .blog-producto__foto { width: 64px; height: 64px; }
  .blog-producto__mas { display: none; }
  .blog-productos, .blog-relacionadas { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-tarjeta__foto img, .blog-destacado__foto img, .blog-mas__barra > span, .blog-indice-movil summary .icono { transition: none; }
  .blog-tarjeta:hover .blog-tarjeta__foto img, .blog-destacado:hover .blog-destacado__foto img { transform: none; }
}