body {
   background-image: url(https://anepco.cl/wp-content/uploads/2023/09/fondo-blog.png);
   background-size: 100% 50%;
   background-position: top;
   background-repeat: no-repeat;
}

:root{
   --primero:#FD4A01;
}



.logo-anepco {
   position: absolute;
   top: 0;
   left: 0;
   width: 530px;
   background-color: #1F299B;
   z-index: 10;
   height: 210px;
   clip-path: polygon(100% 0, 0 0, 0 100%);
   padding: 37px;
   padding-left: 60px;
}

.blog-triangulo-uno {
   position: absolute;
   width: 100%;
   height: 700px;
   background-color: ;
}


section.portafolio {
   padding: 150px;
   perspective: 1000px;
   position: relative;
   padding-bottom: 60px;
}

.blog-flecha-flotante {
   position: absolute;
   top: 55%;
   left: 0;
   width: 30%;
}

.blog-flecha-flotante img {
   width: 100%;
}

.portafolio-textos {
   margin-bottom: 70px;
   display: flex;
   justify-content: center;
}

.portafolio-textos-titulo {
   transition: all 1s;
   transition-timing-function: cubic-bezier(.25, 1, .5, 1);
   transform: translateX(-3em) rotateX(90deg);
   opacity: 0;

}

.portafolio-textos.animate .portafolio-textos-titulo {
   transform: translateX(0) rotateX(0);
   opacity: 1;
}

.portafolio-textos-titulo span {
   font-size: 40px;
   color: #1F299C;
   font-weight: 700;
   letter-spacing: 10px;
}

.portafolio-textos-titulo h2 {
   font-size: 80px;
   font-weight: 900;
   color: #1F299C;
   margin: 0;
   padding: 0;
   line-height: 80px;
}

.contenedorParrafos.blog {
   gap: 0;
   display: flex;
}

.contenedorParrafos__one.blog,
.contenedorParrafos__dos.blog {
   position: relative;
}

.contenedorParrafos__one.blog img,
.contenedorParrafos__dos.blog img {

   max-width: 350px;

}

.contenedorParrafos__one.blog img {
   position: relative;
   top: 150px;
}

.contenedorParrafos__dos.blog img {
   position: relative;
   left: -20px;
}

.cardParrafos.parrafo1.blog {
   max-width: 350px;
}

.cardParrafos p {
   margin: 0;
   color: #1F299C;
   font-size: 15px;
   font-weight: 400;
   margin-top: -5px;
}




/* .portafolio-textos-parrafo{
  transition: all .7s;
  transition-delay: .6s;
  transform: translateY(100px) rotate(10deg) rotateX(-40deg);
  opacity: 0;
}


.portafolio-textos.animate .portafolio-textos-parrafo{
  transform: translateY(0) rotate(0) rotateX(0);
  opacity: 1;
}


.portafolio-textos-parrafo p{
  color: #12005A;
  font-size: 20px;
} */



/* =================== seccion post =================== */

.blog-post-loop-contenedor {
   max-width: 1200px;
   margin: 0 auto;
}

.blog-post-loop-contenedor article {
   display: flex;
   margin-bottom: 30px;
   flex-direction: row;
}

.blog-post-loop-contenedor article:nth-child(even) {
   flex-direction: row-reverse;
}

.blog-post-loop-contenedor article:nth-child(1) .info {
   background-color: #1F299C;
}

.blog-post-loop-contenedor article:nth-child(2) .info {
   background-color: #FD4A01;
}

.blog-post-loop-contenedor article:nth-child(3) .info {
   background-color: #1D1052;
}

.blog-post-loop-contenedor article .info {
   padding: 30px 120px 70px 120px;
   position: relative;
}

.blog-post-loop-contenedor article .info .rayablog-article {
   width: calc(50% - 100px);
   height: 2px;
   background-color: #fff;
   position: absolute;
   top: 80%;
   right: 0;
}

.blog-post-loop-contenedor article .info .rayablog-article span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   display: block;
   background-color: #fff;
   position: relative;
   left: -4px;
   top: -4px;
}

.blog-post-loop-contenedor article:nth-child(even) .info .rayablog-article {
   top: 90%;
   right: initial;
   left: 0;
   display: flex;
   flex-direction: row-reverse;
}

.blog-post-loop-contenedor article:nth-child(even) .info .rayablog-article span {
   left: 4px;
}

.blog-post-loop-contenedor article .info h3 {
   color: #F5E9DC;
   font-size: 1.5em;
   line-height: 1em;
   margin-bottom: 20px;
}

#content > section.blog-post-loop > div.blog-post-loop-contenedor > article:nth-child(1) > div.info > h3{
	padding-right: 120px;
}


.blog-post-loop-contenedor article .info p {
   color: #F5E9DC;
   font-weight: 300;
   margin-bottom: 50px;
}

.blog-post-loop-contenedor article .info a {
   background: transparent;
   color: #F1E8DC;
   font-size: 16px;
   padding: 10px 40px;
   cursor: pointer;
   border: 2px solid #F1E8DC;
   text-decoration: none;
   display: inline-block;
}

.blog-post-loop-contenedor article .image {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   position: relative;
}

.blog-post-loop-contenedor article .image img {
   max-width: 400px;
   position: relative;
   left: -100px;
   top: 13%;
   height: 280px;
   width: 400px;
   object-fit: cover;
}

.blog-post-loop-contenedor article:nth-child(even) .image img {

   left: initial;
   right: -100px;
   top: initial;

}


/* paginacion */

.bariloche__blog-paginacion {
   display: flex;
   gap: 7px;
   justify-content: flex-end;
   padding-right: 13px;

   max-width: 1200px;
   margin: 50px auto;
}

.bariloche__blog-paginacion .page-numbers {
   color: var(--primero);
   width: 28px;
   height: 28px;
   background-color: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   font-size: 19px;
   border: 1px solid var(--primero);
   transition: all .3s ease-in-out;
}

.bariloche__blog-paginacion .page-numbers:hover {
   background-color: var(--primero);
   color: #fff;
}

.bariloche__blog-paginacion .page-numbers.current {
   background-color: var(--primero);
   color: #fff;
}


/* POPULARES Y RECIENTE */

.blog-tags-pop-rec {
   padding: 50px 0;
   margin-bottom: 30px;
}

.blog-tags-pop-rec-contenedor {
   max-width: 1200px;
   margin: 0 auto;
}

.blog-tags-items {
   margin-bottom: 40px;

}

.blog-tags-items ul {
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: center;
   gap: 60px;
   list-style: none;
}

.blog-tags-items ul li {
   color: #1D1052;
   font-weight: 700;
   font-size: 24px;
   cursor: pointer;
}

.blog-tags-items ul li.active {
   color: #FD4A01;
}

.blog-tags-posts.recientes,
.blog-tags-posts.populares {
   display: none;
   flex-wrap: wrap;
}

.blog-tags-posts.recientes.show,
.blog-tags-posts.populares.show {
   display: flex;
}

.blog-tags-posts.populares,
.blog-tags-posts.recientes {
   gap: 20px;
   justify-content: center;
}

.card-blog-post {
   max-width: 300px;
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
   padding: 40px 30px;
   background-color: #1f299c82;
   background-blend-mode: overlay;
}



.card-blog-overlay~* {
   position: relative;
   z-index: 2;
   transition: all .3s ease-in-out;
}

.card-blog-overlay {
   top: 0;
   left: 0;
   position: relative;
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   background-color: #1F299C;
   transition: all .3s ease-in-out;
}

.card-blog-post:nth-child(3n+1) .card-blog-overlay {
   background-color: #1F299C;
}

.card-blog-post:nth-child(3n+2) .card-blog-overlay {
   background-color: #FD4A01;
}

.card-blog-post:nth-child(3n+3) .card-blog-overlay {
   background-color: #1D1052;
}

.card-blog-titulo {
   color: #fff;
   font-size: 20px;
   margin-bottom: 20px;
   position: relative;
   top: 0;
}

.card-blog-raya {
   width: 60%;
   height: 5px;
   background-color: #FD4A01;
   position: relative;
   top: 0;
}

.card-blog-post:nth-child(3n+2) .card-blog-raya {
   background-color: #1D1052;
}

.card-blog-texto {
   color: #fff;
   font-weight: 300;
   font-size: 13px;
   top: 0;
   position: relative;
}

.card-blog-calendario {
   color: #fff;
   font-size: 13px;
   font-weight: 300;
   top: 0;
   position: relative;
}

.card-blog-calendario span{
   padding-right:5px;
}

.card-blog-more {
   display: flex;
   justify-content: flex-end;
   top: 0;
   position: relative;
}

.card-blog-more a {
   width: 30px;
   height: 30px;
   background-color: #FD4A01;
   color: #fff;
   font-weight: 800;
   display: grid;
   place-content: center;
   text-decoration: none;
   font-size: 22px;
}

.card-blog-post:nth-child(3n+2) .card-blog-more a {
   background-color: #1F299C;
}

.card-blog-post:hover .card-blog-overlay {
   opacity: 0;
}

.card-blog-post:hover .card-blog-titulo {
   top: 70px;
   font-size: 14px;
}

.card-blog-post:hover .card-blog-raya {
   top: 60px;
}

.card-blog-post:nth-child(3n+2):hover .card-blog-raya {
   background-color: #FD4A01;
}

.card-blog-post:hover .card-blog-texto {
   top: 58px;
}

.card-blog-post:hover .card-blog-calendario {
   top: 58px;
}

.card-blog-post:hover .card-blog-more {
   top: 37px;
}

.card-blog-post:nth-child(3n+2):hover .card-blog-more a {
   background-color: #FD4A01;
}

/* ===========@MEDIA QUERY============ */

@media(max-width:1300px) {
   section.portafolio {
      padding: 200px 0 50px 0;
      perspective: 1000px;
      position: relative;
   }

   .contenedorParrafos__one.blog img {
      position: relative;
      top: 73px;
   }

   .contenedorParrafos__dos blog {
      top: -90px;
   }

}

@media(max-width:1100px) {

   section.portafolio {
      padding: 130px 0 20px 0;
   }

   .portafolio-textos {
      flex-direction: column;
      padding: 0 20px;
   }

   .portafolio-textos-titulo span {
      font-size: 23px;
      color: #1F299C;
      font-weight: 700;
      letter-spacing: 6px;
   }

   .portafolio-textos-titulo h2 {
      font-size: 40px;
      font-weight: 900;
      color: #1F299C;
      margin: 0;
      padding: 0;
      line-height: 40px;
   }

   .logo-anepco {
      background-color: transparent;
      padding-left: 10px;
      width: 100%;
   }

   .contenedorParrafos__one.blog img {
      width: 100%;
   }

   .contenedorParrafos__dos.blog img {
      width: 100%;
      position: static
   }

   .cardParrafos p {
      font-size: 13px;
   }

   /* posts */
   .blog-post-loop-contenedor article .image {
      display: none;
   }

   .blog-post-loop-contenedor article .info {
      padding-left: 20px;
      padding-right: 20px;
   }

   .blog-tags-pop-rec {
      padding-top: 0;
   }

}

@media(max-width:767px) {

   .blog-post-loop-contenedor {
      padding: 0 10px;
   }

   .blog-post-loop-contenedor article .info h3{
      font-size: 1.3em;
   }

   .blog-post-loop-contenedor article .info{
      padding-bottom: 50px;
   }

   .blog-post-loop-contenedor article:nth-child(even) .info .rayablog-article{
      top: 93%;
   }

}

@media(max-width:420px) {
   .blog-tags-items ul {
      padding: 0 20px;
      flex-wrap: wrap;
      gap: 15px;
   }
}