:root{
  --vino: #6C0926;
  --vino-rojo: #9B122E;
  --gris: #F8F8F8;
  --texto: #1A1A1A;
}
* {
  font-family: 'Poppins', sans-serif;
}

body{
    background: #F5F9EF;
}
/* Contenedor principal */
.blog-hero {
  position: relative;
  width: 100%;
  height: 300px; 
  background-image: linear-gradient(#00000067,#07070765), url("../new-assets/img/blog-1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-top: 130px;
}

.blog-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.blog-content {
  padding-left: 120px;
  color: #fff;
}

.blog-content h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.1;
  border-left: 5px solid #801220;
    padding-left: 20px;
}

.blog-content p {
  font-size: 20px;
  margin-bottom: 28px;
  margin-left: 30px;
  font-size: 30px;
    font-weight: bold;
}

.blog-btn {
  display: inline-block;
  background-color: #b11226; 
  color: #fff;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.25s ease;
  position: absolute;
    bottom: 30px;
    left: 45%;
}

.blog-btn:hover {
  background-color: #8f0f1f;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .blog-hero {
    height: 320px;
  }

  .blog-content {
    padding-left: 32px;
    padding-right: 32px;
  }

  .blog-content h1 {
    font-size: 40px;
  }

  .blog-content p {
    font-size: 16px;
  }
}








/* ===== DESTACADOS (3 en horizontal) ===== */
.blog-destacados{
  background: #F5F9EF;
  padding:50px 10% 30px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
}

.card-destacado{
  background:#F5F9EF;
  text-decoration:none;
  color:var(--texto);
  transition:.25s;
}
.card-destacado:hover{
  box-shadow: rgba(0,0,0,.12) 0 12px 30px;
}

.img-destacado img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

.content-destacado{
  padding:18px 18px 22px;
}
.content-destacado h2{
  font-size:20px;
  font-weight:600;
  margin-bottom:10px;
  color: var(--vino-rojo);
}
.content-destacado p{
  font-size:20px;
  color:#555;
  line-height:1.55;
}

/* ===== LISTA VERTICAL (3 por página) ===== */
.blog-lista{
  background: #F5F9EF;
  padding:10px 10% 40px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.card-vertical{
  background:#F5F9EF;
  text-decoration:none;
  color:var(--texto);
  display:flex;
  gap:22px;
  padding:18px;
  transition:.25s;
}
.card-vertical:hover{
  box-shadow: rgba(0,0,0,.10) 0 10px 26px;
}

.img-vertical img{
  width:260px;
  height:150px;
  object-fit:cover;
  display:block;
}

.content-vertical h3{
  font-size:20px;
  margin-bottom:8px;
  font-weight:600;
  color: var(--vino-rojo);
}
.content-vertical p{
  font-size:20px;
  color:#555;
  line-height:1.6;
}

/* ===== VACÍO ===== */
.blog-empty{
  padding:40px 10%;
  color:#555;
}

/* ===== PAGINACIÓN ===== */
.blog-pagination{
  background: #F5F9EF;
  padding: 0 10% 60px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.pg-num, .pg-arrow{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1.5px solid var(--vino-rojo);
  color: var(--vino-rojo);
  text-decoration:none;
  border-radius:50%;
  transition:.2s;
}

.pg-num:hover, .pg-arrow:hover{
  background: var(--vino-rojo);
  color:#fff;
}

.pg-num.active{
  background: var(--vino-rojo);
  color:#fff;
}

.pg-arrow.disabled{
  opacity:.35;
  pointer-events:none;
}

.pg-dots{
  color:#777;
  padding:0 6px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .blog-destacados{
    grid-template-columns: repeat(2, 1fr);
    gap:22px;
  }
}

@media (max-width: 768px){
  .blog-content h1{ font-size:40px; }
  .blog-content p{ font-size:15px; }

  .blog-destacados{
    grid-template-columns: 1fr;
  }

  .card-vertical{
    flex-direction:column;
  }

  .img-vertical img{
    width:100%;
    height:200px;
  }
  .blog-hero{
    margin: 0;
  }
}