/* ==========================================================================
   BLOG EDITORIAL - VINOS DE GUANAJUATO / GUANAJUATO.MX
   Hoja de estilos para artículos de blog. Cargar una sola vez en el sitio.
   Requiere Bootstrap 5 cargado previamente.
   ========================================================================== */

.post-info .category-info{ 
display: none; 
} 

.post-info .author-info{ 
display: none; 
}


/* --- Tipografía --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lato:wght@300;400;700&display=swap');

/* --- Variables de color --- */
:root {
  --hm-blog-wine-primary: #722F37;
  --hm-blog-wine-accent: #8B4049;
  --hm-blog-gold-deep: #C5A55A;
  --hm-blog-bg-beige: #F5F0EB;
  --hm-blog-white: #FFFFFF;
  --hm-blog-text-dark: #2D2D2D;
  --hm-blog-text-body: #4A4A4A;
  --hm-blog-text-caption: #7A7A7A;
  --hm-blog-divider: rgba(114, 47, 55, 0.12);
}

/* --- Contenedor principal del artículo --- */
.hm-blog-article {
  font-family: 'Lato', sans-serif;
  color: var(--hm-blog-text-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Encabezados --- */
.hm-blog-article h1,
.hm-blog-article .hm-blog-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--hm-blog-text-dark);
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.hm-blog-article h2,
.hm-blog-article .hm-blog-subtitle {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--hm-blog-text-dark);
  font-size: 1.75rem;
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.hm-blog-article h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--hm-blog-wine-primary);
  font-size: 1.35rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* --- Párrafos y cuerpo --- */
.hm-blog-article p {
  margin-bottom: 1.25rem;
}

/* --- Capitular (drop cap) para primer párrafo --- */
.hm-blog-article .hm-blog-intro::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  margin-right: 0.5rem;
  margin-top: 0.15rem;
  color: var(--hm-blog-wine-primary);
}

.hm-blog-article .hm-blog-intro {
  font-size: 1.125rem;
  line-height: 1.8;
}

/* --- Imagen de cabecera --- */
.hm-blog-hero {
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 0;
  overflow: hidden;
}

.hm-blog-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.hm-blog-hero figcaption {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--hm-blog-text-caption);
  margin-top: 0.5rem;
}

/* --- Imágenes editoriales dentro del artículo --- */
.hm-blog-img-editorial {
  margin: 2rem 0;
  text-align: center;
}

.hm-blog-img-editorial img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.hm-blog-img-editorial figcaption {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--hm-blog-text-caption);
  text-align: center;
  margin-top: 0.5rem;
}

/* --- Caja de estadística --- */
.hm-blog-stat-box {
  background-color: var(--hm-blog-bg-beige);
  padding: 1.75rem;
  text-align: center;
  margin: 2rem 0;
}

.hm-blog-stat-box .stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--hm-blog-text-dark);
  display: block;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.hm-blog-stat-box .stat-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hm-blog-text-dark);
  margin-bottom: 0.5rem;
}

.hm-blog-stat-box .stat-description {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--hm-blog-text-body);
  line-height: 1.5;
}

/* --- Tarjeta de lista de premios/awards --- */
.hm-blog-award-card {
  background-color: var(--hm-blog-white);
  border: 1px solid var(--hm-blog-divider);
  padding: 2rem;
  margin: 2rem 0;
}

.hm-blog-award-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--hm-blog-text-dark);
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.hm-blog-award-card ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.hm-blog-award-card ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hm-blog-divider);
  font-size: 0.9375rem;
  color: var(--hm-blog-text-body);
}

.hm-blog-award-card ul li:last-child {
  border-bottom: none;
}

.hm-blog-award-card ul li::before {
  content: "◆ ";
  color: var(--hm-blog-gold-deep);
  font-size: 0.625rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* --- Bloque de cita / Call to Action --- */
.hm-blog-quote {
  background-color: var(--hm-blog-wine-primary);
  color: var(--hm-blog-white);
  padding: 2.5rem 2rem;
  margin: 2.5rem 0;
  text-align: center;
  position: relative;
}

.hm-blog-quote p {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--hm-blog-white);
}

.hm-blog-quote .quote-author {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  font-style: normal;
  margin-top: 1rem;
  display: block;
  opacity: 0.85;
}

/* --- Divisor --- */
.hm-blog-divider {
  border: none;
  border-top: 1px solid var(--hm-blog-divider);
  margin: 2.5rem 0;
}

/* --- Caption / crédito de imagen --- */
.hm-blog-credit {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--hm-blog-text-caption);
}

/* --- Listas dentro del artículo --- */
.hm-blog-article ul,
.hm-blog-article ol {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.hm-blog-article li {
  margin-bottom: 0.5rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hm-blog-article h1,
  .hm-blog-article .hm-blog-title {
    font-size: 1.75rem;
  }

  .hm-blog-article h2,
  .hm-blog-article .hm-blog-subtitle {
    font-size: 1.375rem;
  }

  .hm-blog-quote p {
    font-size: 1.125rem;
  }

  .hm-blog-stat-box .stat-number {
    font-size: 2rem;
  }
}