*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Arial, Helvetica, sans-serif;
background:#ffffff;

}

.vip-opinion{

width:98%;
max-width:1400px;
margin:50px auto;

}

/*==========================
ENCABEZADO
===========================*/

.titulo-opinion{

display:flex;
justify-content:space-between;
align-items:center;
border-bottom:2px solid #d82323;
margin-bottom:25px;

}

.titulo{

background:#d82323;
color:#fff;
padding: 3px 20px;
position:relative;

}

.titulo:after{

content:"";
position:absolute;
right:-28px;
top:0;
width:0;
height:0;
border-top:54px solid #d82323;
border-left:28px solid transparent;

}

.titulo h2{

font-size:30px;
letter-spacing:5px;
font-weight:bold;

}

.mas-opinion{

text-decoration:none;
font-size:17px;
font-weight:bold;
color:#000;
text-transform:uppercase;
display:flex;
align-items:center;
gap:12px;

}

.mas-opinion i{

width:35px;
height:35px;
border:2px solid #d82323;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#d82323;
transition:.4s;

}

.mas-opinion:hover i{

background:#d82323;
color:#fff;

}

/*==========================
GRID
===========================*/

.opinion-grid{

display:grid;
grid-template-columns:repeat(4,1fr);

}

.opinion-item{

padding:20px 30px;
text-align:center;
border-left:1px solid #dddddd;
transition:.4s;

}

.opinion-item:last-child{

border-right:1px solid #ddd;

}

.opinion-item:hover{
background:#d82323;
color:#fff;


}

.opinion-item img{

width:220px;
height:220px;
border-radius:50%;
object-fit:cover;
margin-bottom:25px;
transition:.5s;

}

.opinion-item:hover img{

transform:scale(1.05);

}

.opinion-item h4{

font-size:18px;
font-weight:bold;
text-transform:uppercase;
margin-bottom:25px;
text-decoration:none;

}

.opinion-item h3{

font-size:20px;
font-weight:600;
line-height:1.35;

}

/*==========================
PUBLICIDAD
===========================*/

.publicidad{

width:100%;
margin-top:70px;
display:flex;
flex-direction:column;
align-items:center;

}

.publicidad h5{

letter-spacing:4px;
font-size:16px;
margin-bottom:10px;

}

.banner{

width:728px;
height:90px;
background:#efefef;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:#999;

}

/*==========================
TABLET
===========================*/

@media(max-width:1200px){

.opinion-grid{

grid-template-columns:repeat(2,1fr);

}

.opinion-item{

border-bottom:1px solid #ddd;

}

.banner{

width:100%;

}

}

/*==========================
MOVIL
===========================*/

@media(max-width:768px){

.titulo-opinion{

flex-direction:column;
align-items:flex-start;
gap:20px;

}

.opinion-grid{

grid-template-columns:1fr;

}

.opinion-item{

border-right:none;
border-left:none;
border-bottom:1px solid #ddd;

}

.opinion-item img{

width:180px;
height:180px;

}

.titulo h2{

font-size:24px;

}

.opinion-item h3{

font-size:18px;

}

.banner{

height:250px;
font-size:28px;

}

}