/* === SINGLE POSTS UNIFIED STYLES === */
/* Estilos unificados para single-news.php y single-success-stories.php */
/* Este archivo contiene los estilos base compartidos entre ambos templates */

/* Optimización del viewport y distribución de elementos */
.news-single,
.success-stories-single {
  max-width: 1200px;
  margin: 200px auto 2rem auto;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(16,26,40,0.07);
  padding: 30px 1rem 2.5rem 1rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Agrupar breadcrumbs y meta en una línea compacta */
.news-header,
.success-stories-header {
  margin-bottom: 2rem;
  border-bottom: none;
  padding-bottom: 0;
}

/* Breadcrumbs y meta más compactos */
.breadcrumbs {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--color-gray-main, #6b7280);
}

.breadcrumbs a {
  color: var(--color-blue-main, #0073C2);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: var(--color-blue-secondary, #1a237e);
}

.breadcrumbs span {
  color: var(--color-gray-main, #6b7280);
}

.breadcrumbs-separator {
  color: var(--color-gray-main, #6b7280);
  font-weight: 300;
  margin: 0 0.25rem;
}

.breadcrumbs a span[itemprop="name"] {
  color: inherit;
}

.breadcrumbs > span[itemprop="itemListElement"] span[itemprop="name"] {
  color: var(--color-gray-main, #6b7280);
  font-weight: 500;
}

/* Meta information */
.news-meta,
.success-stories-meta {
  color: var(--color-gray-main, #6b7280);
  font-size: var(--font-small, 1rem);
  margin-bottom: 1rem;
  font-weight: 200;
  display: inline-block;
  line-height: 1.4;
}

.news-author,
.success-stories-author {
  color: var(--color-gray-main, #6b7280);
  font-weight: 400;
}

/* Estilos específicos para metadatos de cliente en single pages */
.success-stories-customer {
  color: var(--color-blue-main, #0073C2);
  font-weight: 600;
}

.success-stories-category {
  color: var(--color-purple-main, #5E21BA);
  font-weight: 500;
}

/* Estilos para posts relacionados */
.related-customer {
  color: var(--color-blue-main, #0073C2);
  font-weight: 600;
}

/* Lead image/video optimizado */
.news-featured-image,
.success-stories-featured-image {
  margin: 1.5rem 0 4rem 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(16,26,40,0.07);
  aspect-ratio: 16/9;
}

.news-featured-image img,
.success-stories-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Feature video optimizado */
.feature-video {
  margin: 1.5rem 0 1.5rem 0;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
}

.feature-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Título optimizado */
.news-title,
.success-stories-title {
  font-size: var(--font-h2, 2.5rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-secondary, #1a237e);
  margin-bottom: .5rem;
  line-height: 1.15;
}

/* Botones de compartir más compactos */
.news-share,
.success-stories-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  padding: 0;
  background: none;
  border: none;
}

.share-label {
  font-size: 0.9rem;
  color: var(--color-gray-main, #6b7280);
  font-weight: 500;
  margin-right: 0.5rem;
}

.share-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.share-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.share-btn i {
  font-size: 0.9rem;
}

.share-facebook { background: #1877f2; color: white; }
.share-facebook:hover { background: #166fe5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3); }
.share-twitter { background: #1da1f2; color: white; }
.share-twitter:hover { background: #1a91da; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3); }
.share-linkedin { background: #0077b5; color: white; }
.share-linkedin:hover { background: #006097; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3); }
.share-copy { 
  background: #6b7280 !important; 
  color: white !important; 
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.share-copy:hover, .share-copy.copied { 
  background: #4b5563 !important; 
  color: white !important; 
  transform: translateY(-2px) !important; 
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important; 
}

/* Efecto de brillo deslizante universal blanco para botones de compartir */
.share-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

/* Eliminar matices individuales */
.share-linkedin::before,
.share-facebook::before,
.share-twitter::before,
.share-copy::before {
  background: none;
}

/* Asegurar que el icono esté por encima del brillo */
.share-btn i {
  position: relative;
  z-index: 3;
}

/* Contenido principal optimizado */
.news-content,
.success-stories-content {
  font-size: var(--font-p, 1.125rem);
  color: var(--color-blue-secondary, #1a237e);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  margin-top: 1.5rem;
}

/* Separador de share más sutil */
.share-separator {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2rem 0 1rem 0;
}

/* Navegación optimizada */
.news-navigation,
.success-stories-navigation {
  margin: 2.5rem 0 2rem 0;
  padding: 1.5rem 0 0 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: none;
}

/* Posts relacionados optimizados */
.related-posts,
.related-success-stories {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.related-posts h2,
.related-success-stories h2 {
  font-size: var(--font-h4, 2rem);
  color: var(--color-blue-secondary, #1a237e) !important;
  margin-bottom: 1.5rem;
  font-weight: var(--font-weight-bold, 700);
  text-align: center;
}

/* Quote destacado con mejor diseño visual */
.news-content blockquote,
.success-stories-content blockquote {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 4px solid var(--color-blue-main, #0073C2);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0.5rem;
  position: relative;
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.6;
}

.news-content blockquote::before,
.success-stories-content blockquote::before {
  content: '"';
  font-size: 4rem;
  color: var(--color-blue-main, #0073C2);
  position: absolute;
  top: -1rem;
  left: 1rem;
  font-family: serif;
  opacity: 0.3;
}

/* Mejorar listas de features */
.news-content ul,
.success-stories-content ul {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.news-content ul li,
.success-stories-content ul li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.news-content ul li::before,
.success-stories-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: .6rem;
  height: .6rem;
  background: var(--color-blue-main, #0073C2);
  border-radius: 50%;
  display: inline-block;
}

.wp-block-quote p:last-child em {
  font-weight: 200;
}

.news-content ol li::before {
    color:#3D8FD6;
    font-weight: 900;
}
ol.wp-block-list li {
    margin-bottom: 1rem;
    margin-left: 2rem;
}

:where(.wp-block-columns) {
    margin-bottom: -0.25em;
}

/* Navegación entre posts */
.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1rem;
}

.nav-link {
  flex: 1;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 0.8rem;
  transition: background 0.2s;
  min-height: 48px; /* Touch target mínimo */
  display: flex; /* Añadido para mejor layout */
  flex-direction: column; /* Añadido para mejor organización */
  justify-content: center; /* Añadido para centrado vertical */
}

.nav-link:hover {
  background: #f1f5f9;
}

.nav-link a {
  text-decoration: none;
  color: inherit;
}

.nav-label {
  font-size: 0.8rem;
  color: var(--color-gray-main, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.nav-link h4 {
  font-size: 1rem;
  color: var(--color-blue-secondary, #1a237e);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.nav-date {
  font-size: 0.8rem;
  color: var(--color-gray-main, #6b7280);
}

.nav-prev { text-align: left; }
.nav-next { text-align: right; }

/* Posts relacionados */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.related-post {
  background: #fff;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16,26,40,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}

.related-post:hover {
  box-shadow: 0 4px 16px rgba(16,26,40,0.12);
  transform: translateY(-2px);
}

.related-thumbnail {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.related-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.related-post:hover .related-thumbnail img {
  transform: scale(1.05);
}

.related-content {
  padding: 1rem;
}

.related-content h4 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.related-content h4 a {
  color: var(--color-blue-secondary, #1a237e);
  text-decoration: none;
  transition: color 0.2s;
}

.related-content h4 a:hover {
  color: var(--color-blue-main, #0073C2);
}

.related-meta {
  font-size: 0.8rem;
  color: var(--color-gray-main, #6b7280);
  margin-bottom: 0.5rem;
}

.related-author {
  color: var(--color-gray-main, #6b7280);
}

.related-excerpt {
  font-size: 0.9rem;
  color: var(--color-gray-main, #6b7280);
  line-height: 1.5;
}

/* No related posts */
.no-related-posts,
.no-related-success-stories {
  text-align: center;
  padding: 2rem;
  background: #f8fafc;
  border-radius: 0.8rem;
}

.no-related-posts p,
.no-related-success-stories p {
  color: var(--color-gray-main, #6b7280);
  margin-bottom: 1rem;
}

.back-to-news,
.back-to-success-stories {
  display: inline-block;
  background: var(--color-blue-main, #0073C2);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  min-height: 48px; /* Touch target mínimo */
  display: inline-flex; /* Cambiado para mejor alineación */
  align-items: center; /* Añadido para centrado vertical */
  justify-content: center; /* Añadido para centrado horizontal */
  font-size: 1rem; /* Añadido tamaño de fuente consistente */
}

.back-to-news:hover,
.back-to-success-stories:hover {
  background: var(--color-blue-secondary, #1a237e);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 115, 194, 0.3);
}

.back-to-news-btn,
.back-to-success-stories-btn {
  margin-top: 1rem !important;
}

/* Layout principal */
.news-main,
.success-stories-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Estilos para videos embebidos */
figure.wp-block-embed.is-type-video.is-provider-youtube, 
figure.wp-block-embed-youtube {
  margin: 2rem 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(16,26,40,0.07);
}

/* Responsive optimizado */
@media (max-width: 1200px) {
  .news-single,
  .success-stories-single { 
    max-width: 95vw; 
    margin: 100px auto 2rem auto;
  }
  .container { 
    max-width: 95vw; 
  }
}

@media (max-width: 900px) {
  .news-single,
  .success-stories-single { 
    max-width: 98vw; 
    margin: 80px auto 2rem auto;
    padding: 40px 1rem 2rem 1rem;
  }
  .container { 
    max-width: 98vw; 
  }
  .news-title,
  .success-stories-title { 
    font-size: 2rem !important; 
  }
  .news-featured-image,
  .success-stories-featured-image { 
    margin: 1rem 0 2rem 0; 
  }
  .news-content,
  .success-stories-content { 
    font-size: 1rem; 
  }
  .news-navigation,
  .success-stories-navigation { 
    margin: 2rem 0 1.5rem 0; 
  }
  .related-posts,
  .related-success-stories { 
    margin-top: 2rem; 
  }
  .related-posts h2,
  .related-success-stories h2 { 
    font-size: 1.5rem; 
  }
}

@media (max-width: 1200px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .news-single,
  .success-stories-single {
    margin: 60px 20px;
    padding: 40px 20px;
    border-radius: 0.8rem;
  }
  .news-title,
  .success-stories-title { 
    font-size: 3rem !important; 
  }
  .news-featured-image,
  .success-stories-featured-image { 
    margin: 1rem 0 1.5rem 0; 
    border-radius: 0.8rem;
  }
  .feature-video {
    border-radius: 0.8rem;
  }
  .news-content,
  .success-stories-content { 
    font-size: 0.95rem; 
    margin-bottom: 2rem; 
  }
  .news-content blockquote,
  .success-stories-content blockquote {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  .news-content blockquote::before,
  .success-stories-content blockquote::before {
    font-size: 3rem;
    top: -0.5rem;
  }
  .news-navigation,
  .success-stories-navigation { 
    margin: 2rem 0 1rem 0; 
  }
  .related-posts,
  .related-success-stories { 
    margin-top: 1.5rem; 
  }
  .related-grid { 
    grid-template-columns: 1fr; 
  }
  .nav-links { 
    flex-direction: column; 
    gap: 1rem; 
  }
  .nav-next { 
    text-align: left; 
  }
}

@media (max-width: 480px) {
  .container { 
    padding: 0 0.5rem; 
  }
  .news-share,
  .success-stories-share { 
    flex-wrap: wrap; 
  }
  .share-label { 
    width: 100%; 
    margin-bottom: 0.5rem; 
    font-size: 1rem; /* Aumentado tamaño de fuente */
    font-weight: 600; /* Añadido peso de fuente */
  }
  .share-btn {
    width: 3rem !important; /* Aumentado de 2.5rem */
    height: 3rem !important; /* Aumentado de 2.5rem */
    min-height: 48px; /* Touch target mínimo */
    min-width: 48px; /* Touch target mínimo */
  }
  .share-btn i {
    font-size: 1.1rem !important; /* Aumentado de 0.9rem */
  }
  .news-featured-image,
  .success-stories-featured-image { 
    margin: 0.5rem 0 1rem 0; 
  }
  .news-content,
  .success-stories-content { 
    font-size: 0.9rem; 
  }
  .related-content { 
    padding: 1rem; 
  }
}

/* Responsive para elementos principales */
@media (max-width: 950px) {
  .breadcrumbs,
  .news-meta,
  .success-stories-meta,
  .news-title,
  .success-stories-title,
  .news-content,
  .success-stories-content {
    max-width: 100%;
  }
  
  .breadcrumbs,
  .news-meta,
  .success-stories-meta,
  .news-title,
  .success-stories-title,
  .news-featured-image,
  .success-stories-featured-image,
  .news-content,
  .success-stories-content {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 950px) {
  .news-featured-image,
  .success-stories-featured-image,
  .feature-video {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 600px) {
  .news-main,
  .success-stories-main {
    padding: 0 0.5rem;
  }
  
  .news-content blockquote,
  .success-stories-content blockquote {
    padding: 1rem;
    margin: 1rem 0;
  }
} 


/* Separador de secciones */
.wp-block-separator {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-top: 1px solid var(--color-blue-dark) !important;
  }

/* ======================================== */
/* SUCCESS STORIES SPECIFIC STYLES */
/* ======================================== */

/* Estilos específicos para success-stories-single que difieren de los base */
.success-stories-single {
  /* Estos estilos específicos complementan los estilos base */
  padding: 30px 1rem 2.5rem 1rem; /* Padding específico para success stories */
}

.success-stories-header {
  margin-bottom: 2rem; /* Margen específico para success stories */
}

.success-stories-meta {
  margin-bottom: 1rem; /* Margen específico para meta de success stories */
  display: inline-block; /* Para que no ocupe toda la línea */
}

/* Lead image/video optimizado */
.success-stories-featured-image {
  margin: 1.5rem 0 4rem 0; /* Reducido de 2.5rem */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(16,26,40,0.07);
  aspect-ratio: 16/9; /* Aspect ratio fijo para consistencia */
}

.success-stories-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para mantener proporciones */
  display: block;
}

/* Feature video optimizado */
.feature-video {
  margin: 1.5rem 0 1.5rem 0;
  aspect-ratio: 16/9;
  border-radius: 1rem;
  overflow: hidden;
}

.feature-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Título optimizado */
.success-stories-title {
  font-size: var(--font-h2, 2.5rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-secondary, #1a237e);
  margin-bottom: .5rem; /* Reducido de 0.5rem */
  line-height: 1.15;
}

/* Botones de compartir más compactos */
.success-stories-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0; /* Reducido de 1.5rem */
  padding: 0;
  background: none;
  border: none;
}

/* Contenido principal optimizado */
.success-stories-content {
  font-size: var(--font-p, 1.125rem);
  color: var(--color-blue-secondary, #1a237e);
  line-height: 1.7;
  margin-bottom: 2.5rem; /* Reducido de 3rem */
  margin-top: 1.5rem; /* Reducido de 2.5rem */
}

/* Separador de share más sutil */
.share-separator {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2rem 0 1rem 0; /* Reducido de 2.5rem */
}

/* Navegación optimizada */
.success-stories-navigation {
  margin: 2.5rem 0 2rem 0; /* Reducido de 3.5rem */
  padding: 1.5rem 0 0 0; /* Reducido de 2rem */
  border-top: 1px solid #e5e7eb;
  border-bottom: none;
}

/* Posts relacionados optimizados */
.related-success-stories {
  margin-top: 2.5rem; /* Reducido de 3.5rem */
  padding-top: 1.5rem; /* Reducido de 2.5rem */
  border-top: 1px solid #e5e7eb;
}

/* ======================================== */
/* SUCCESS STORIES RESPONSIVE STYLES */
/* ======================================== */

/* Media queries específicas para success stories que difieren de las base */
@media (max-width: 900px) {
  .success-stories-single { 
    padding: 40px 1rem 2rem 1rem; /* Padding específico para success stories */
  }
  .success-stories-title { 
    font-size: 2rem !important; 
  }
  .success-stories-featured-image { 
    margin: 1rem 0 2rem 0; 
  }
  .success-stories-content { 
    font-size: 1rem; 
  }
  .success-stories-navigation { 
    margin: 2rem 0 1.5rem 0; 
  }
  .related-success-stories { 
    margin-top: 2rem; 
  }
  .related-success-stories h2 { 
    font-size: 1.5rem; 
  }
  .read-more-mobile-fix {
    padding: 1.2rem 0 !important;
  }
}

@media (max-width: 768px) {
  .success-stories-single {
    padding: 20px 0.5rem 1rem 0.5rem; /* Padding específico para success stories */
    border-radius: 0.8rem;
  }
  .success-stories-title { 
    font-size: 2rem !important; 
  }
  .success-stories-featured-image { 
    margin: 1rem 0 1.5rem 0; 
    border-radius: 0.8rem;
  }
  .feature-video {
    border-radius: 0.8rem;
  }
  .success-stories-content { 
    font-size: 0.95rem; 
    margin-bottom: 2rem; 
  }
  .success-stories-content blockquote {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  .success-stories-content blockquote::before {
    font-size: 3rem;
    top: -0.5rem;
  }
  .success-stories-navigation { 
    margin: 2rem 0 1rem 0; 
  }
  .related-success-stories { 
    margin-top: 1.5rem; 
  }
  .related-grid { 
    grid-template-columns: 1fr; 
  }
  .nav-links { 
    flex-direction: column; 
    gap: 1rem; 
  }
  .nav-next { 
    text-align: left; 
  }
  .read-more-mobile-fix {
    padding: 1.2rem 0 !important;
  }
}

@media (max-width: 480px) {
  .success-stories-share { 
    flex-wrap: wrap; 
  }
  .share-label { 
    width: 100%; 
    margin-bottom: 0.5rem; 
  }
  .success-stories-featured-image { 
    margin: 0.5rem 0 1rem 0; 
  }
  .success-stories-content { 
    font-size: 0.9rem; 
  }
  .related-content { 
    padding: 1rem; 
  }
  .read-more-mobile-fix {
    padding: 1.2rem 0 !important;
  }
}