/*
Theme Name: Plásticos Boulevares Blog
Theme URI: https://plasticosboulevares.com
Author: Plásticos Boulevares
Description: Plantilla de blog personalizada basada en el diseño corporativo de Plásticos Boulevares.
Version: 1.1.0
Text Domain: pb-theme
Tags: blog, responsive-layout, custom-menu, post-formats, theme-options
*/

/* 
 * Los estilos principales se cargan desde https://plasticosboulevares.com/css/main.css y custom.css.
 * A continuación, clases adicionales específicas para el formato del blog y tipografía Esphimere.
 */

/* ----------------------------------------------------
 * 1. Declaración de Fuentes (Esphimere) para prevenir CORS
 * ---------------------------------------------------- */
@font-face {
  font-family: 'Esphimere';
  src: url('https://plasticosboulevares.com/fonts/esphimere/Esphimere.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Esphimere';
  src: url('https://plasticosboulevares.com/fonts/esphimere/Esphimere%20Light.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Esphimere';
  src: url('https://plasticosboulevares.com/fonts/esphimere/Esphimere%20Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

/* ----------------------------------------------------
 * 2. Reglas Globales de Tipografía
 * ---------------------------------------------------- */
body, p, .blog-post-excerpt, .grid-post-excerpt, .featured-post-excerpt, .post-body, .detalle-modal {
  font-family: 'Esphimere', sans-serif !important;
  font-weight: 100 !important; /* Esphimere Light */
  font-size: 16px !important;
  line-height: 1.6;
  color: #555555;
}

/* TÍTULO 1: ESPHIMERE SEMIBOLD 36 */
h1.page-title,
.section-header .section-title {
  font-family: 'Esphimere', sans-serif !important;
  font-weight: 600 !important; /* Esphimere Bold */
  font-size: 36px !important;
  text-transform: uppercase;
  color: #272727;
}

h1.single-post-title {
  font-family: 'Esphimere', sans-serif !important;
  font-weight: 600 !important; /* Esphimere Bold */
  font-size: 36px !important;
  text-transform: none !important;
  color: #272727;
}

/* TÍTULO 2: ESPHIMERE SEMIBOLD 20 */
h2, h3, h4, 
.featured-post-title a, 
.grid-post-title a, 
.sidebar-item-title a,
.sidebar-title {
  font-family: 'Esphimere', sans-serif !important;
  font-weight: 600 !important; /* Esphimere Bold */
  text-transform: none;
}

.featured-post-title a, 
.grid-post-title a, 
.sidebar-item-title a {
  font-size: 20px !important;
  color: #272727 !important;
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.2s ease;
  display: block;
}

.featured-post-title a:hover, 
.grid-post-title a:hover, 
.sidebar-item-title a:hover {
  color: #0b70b8 !important; /* Azul corporativo */
}

/* ----------------------------------------------------
 * 3. Etiquetas de Categoría (Badges)
 * ---------------------------------------------------- */
.category-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: #777777; /* Color por defecto */
  border-radius: 2px;
  font-family: 'Esphimere', sans-serif !important;
  line-height: 1;
}

.category-badge.badge-mini {
  padding: 2px 6px;
  font-size: 9px;
}

/* Colores de badges por slug de categoría */
.category-badge.badge-calidad {
  background-color: #7a7a7a !important; /* Gris */
}
.category-badge.badge-comunidad {
  background-color: #f0812b !important; /* Naranja */
}
.category-badge.badge-novedades {
  background-color: #0b70b8 !important; /* Azul */
}
.category-badge.badge-desarrollos {
  background-color: #2e7d32 !important; /* Verde */
}
.category-badge.badge-rse {
  background-color: #43a047 !important; /* Verde RSE */
}
.category-badge.badge-bioplasticos {
  background-color: #3b7a57 !important; /* Verde Bosque */
}

/* ----------------------------------------------------
 * 4. Layout de Página de Inicio del Blog
 * ---------------------------------------------------- */
.post-meta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.post-date-label {
  font-size: 12px;
  color: #888888;
  font-weight: 100;
}

.post-date-label-mini {
  font-size: 11px;
  color: #888888;
  font-weight: 100;
}

/* Artículo Destacado (Izquierda) */
.featured-post {
  background: #ffffff;
  margin-bottom: 40px;
}

.featured-post-image img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 4px;
}

/* Sidebar "Artículos Publicados" (Derecha) */
.sidebar-recent-posts {
  padding-left: 20px;
}

.sidebar-title {
  font-size: 20px !important;
  color: #272727;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #025ca3; /* Línea decorativa azul */
  padding-bottom: 8px;
}

.sidebar-item {
  border-bottom: 1px solid #ebebeb;
  padding: 12px 0;
}

.sidebar-item:last-child {
  border-bottom: none;
}

.sidebar-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Rejilla de Artículos (Abajo) */
.grid-post-item {
  background: #ffffff;
  margin-bottom: 40px;
}

.grid-post-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

/* ----------------------------------------------------
 * 5. Artículo Individual (Single Post)
 * ---------------------------------------------------- */
.single-post-content {
  background-color: #fff;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 40px;
}

/* Botón de retorno al Blog */
.btn-back-blog {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #0b70b8;
  background-color: #ffffff;
  border: 1px solid #0b70b8;
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-family: 'Esphimere', sans-serif !important;
}

.btn-back-blog:hover {
  color: #ffffff !important;
  background-color: #0b70b8;
}

.btn-back-blog i {
  margin-right: 5px;
}

/* Botón de WhatsApp */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 90px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.whatsapp-button:hover {
  background-color: #20b355;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}


/* ----------------------------------------------------
 * 6. Ajustes de Diseño Responsivo
 * ---------------------------------------------------- */
@media (max-width: 991px) {
  .sidebar-recent-posts {
    padding-left: 0;
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .featured-post-image img {
    height: 240px;
  }
}

/* Ajustes de imágenes de WordPress */
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}
.alignright {
  float: right;
  margin: 0 0 15px 15px;
}
.wp-post-image {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------
 * 7. Estilos Personalizados para Iconos Sociales en Footer
 * ---------------------------------------------------- */
#footer .social-icons {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

#footer .social-icons li {
  display: inline-block;
  margin: 0;
}

#footer .social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  background-color: #555555;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#footer .social-icons li a.social-icon-facebook {
  background-color: #1877F2 !important;
}

#footer .social-icons li a.social-icon-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285ae5 90%) !important;
}

#footer .social-icons li a.social-icon-linkedin {
  background-color: #0A66C2 !important;
}

#footer .social-icons li a:hover {
  transform: translateY(-3px) scale(1.15);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* Centrado responsivo en pantallas pequeñas */
@media (max-width: 767px) {
  #footer .social-icons {
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 10px;
  }
}