/*
Theme Name: tema-1
Theme URI: https://virtualglobal.es/
Author: Gabriel Pacherrez
Description: Tema personalizado del blog convertido desde HTML estático.
Version: 1.0
Text Domain: mi-blog
*/

.enlacescall{
 background: #05a705!important;
}
.imglogo {
    width: 16%;
}

.articles {
  padding: 2rem;
  margin-top: 5vh;
  width: 100%;
}

.articles h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #222;
}

/* GRID principal */
.articles-grid {
  display: grid;
    grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* CARD */
.article-card {
  display: flex;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Imagen */
.image-wrapper {
  position: relative;
  width: 40%;
  flex-shrink: 0;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Categoría encima */
.image-wrapper .category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #0077ff;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-weight: 600;
}

/* Contenido */
.article-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%;
}

.article-content .date {
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 0.5rem;
}

.article-content h3 {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: #222;
}

.article-content .excerpt {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}

.article-content .read-more {
  text-decoration: none;
  color: #0077ff;
  font-weight: 600;
  transition: color 0.3s ease;
}

.article-content .read-more:hover {
  color: #005ec2;
}
.b-none{
  border: none!important;
}

    .activeFormCallFloat {
        height: 21em !important;
    }
        .post-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      max-width: 1200px;
      margin: auto;
      padding: 20px;
      margin-top: 11vh;
    }

    .post-content {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    }

    .post-image img {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 20px;
      object-fit: fill;
    }

    .post-content h1 {
      font-size: 28px;
      margin-bottom: 10px;
      color: #111;
    }

    .post-content .meta {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
    }

    .post-content p {
      margin-bottom: 15px;
    }

    .sidebar {
      background: #fafafa;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    }

    .sidebar h3 {
      margin-top: 0;
      font-size: 18px;
      color: #111;
      border-bottom: 2px solid #eee;
      padding-bottom: 8px;
      margin-bottom: 15px;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
    }

    .sidebar ul li {
      margin: 10px 0;
    }

    .sidebar ul li a {
      text-decoration: none;
      color: #0073e6;
      transition: color 0.3s;
    }

    .sidebar ul li a:hover {
      color: #005bb5;
    }

/* Contenedor */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
  font-family: inherit;
}

/* Números y botones */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.8rem;
  border-radius: 50px; /* redondeado tipo botón */
  background: #f8f9fa;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

/* Hover */
.pagination .page-numbers:hover {
  background: #0077ff;
  color: #fff;
  border-color: #0077ff;
}

/* Página actual */
.pagination .page-numbers.current {
  background: #0077ff;
  color: #fff;
  border-color: #0077ff;
  cursor: default;
}

/* Botones prev/next */
.pagination .prev,
.pagination .next {
  background: #e9ecef;
  color: #0077ff;
  font-weight: 600;
  padding: 0 1rem;
}

.pagination .prev:hover,
.pagination .next:hover {
  background: #0077ff;
  color: #fff;
}


.tpcategory{
  margin-top: 5vh;
}


/* Responsivo: en móviles la card se apila */
@media (max-width: 768px) {
  .article-card {
    flex-direction: column;
  }
 .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .image-wrapper {
    width: 100%;
  }

  .article-content {
    width: 100%;
  }
  .articles {
  padding: 2px;
}
.tpcategory{
  margin-top: 10vh;
}
     .post-container {
        grid-template-columns: 1fr;
      }

      .sidebar {
        order: 2; /* Sidebar abajo en móvil */
      }

      .post-content {
        order: 1;
      }
    .activeFormCallFloat {
        height: 20em !important;
    }

}

/* Responsivo: botones más pequeños en móviles */
@media (max-width: 480px) {
  .pagination .page-numbers {
    min-width: 32px;
    height: 32px;
    font-size: 0.85rem;
    padding: 0 0.5rem;
    
  }
  .tpcategory{
  margin-top: 10vh;
}
   .articles-grid {
  grid-template-columns: 1fr; }
}
@media only screen and (max-width: 475px){
	.hero_botton .items {
		grid-template-columns: 1fr 1fr;
	}
	.hero_botton.container .item>a>p {
		display: none;
	}
   .articles-grid {
  grid-template-columns: 1fr; }
  .tpcategory{
  margin-top: 10vh;
}
}