/* BASE */

.media-page{
font-family:'Poppins', sans-serif;
background:#f7f7f7;
}

/* HERO */

.media-hero{
height:40vh;
background:linear-gradient(120deg,#ff6a00,#ff8c42);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.media-hero h1{
font-size:40px;
}

/* FILTROS */

.media-filters{
display:flex;
justify-content:center;
gap:10px;
padding:20px;
flex-wrap:wrap;
}

.filter{
border:none;
padding:10px 20px;
border-radius:20px;
background:#eee;
cursor:pointer;
transition:.3s;
}

.filter.active,
.filter:hover{
background:#ff6a00;
color:white;
}


/* =========================
   BASE PRO DARK NARANJA
========================= */

.media-pro{
background:linear-gradient(180deg,#0f0f0f,#1a1a1a);
padding:60px 8%;
color:white;
}

/* TITULOS */

.media-title{
font-size:20px;
margin:30px 0 20px;
padding-left:10px;
border-left:4px solid #ff6a00;
}

/* GRID */

.media-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* CARDS PRO */

.media-card-pro{
position:relative;
border-radius:15px;
overflow:hidden;
cursor:pointer;
transition:.4s;
background:#111;
}

/* GLOW NARANJA */
.media-card-pro:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 15px 40px rgba(255,106,0,.35);
}

/* IMAGEN / VIDEO */

.media-card-pro img,
.media-card-pro iframe{
width:100%;
height:200px;
object-fit:cover;
border:none;
}

/* OVERLAY PRO */

.overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:15px;

background:linear-gradient(
to top,
rgba(0,0,0,.85),
transparent
);

transform:translateY(100%);
transition:.4s;
}

/* APARECE EN HOVER */
.media-card-pro:hover .overlay{
transform:translateY(0);
}

.overlay span{
color:#ff6a00;
font-weight:bold;
font-size:12px;
}

/* =========================
   DESTACADO PRO
========================= */

.media-highlight-pro{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-top:40px;
}

.highlight-main{
position:relative;
border-radius:20px;
overflow:hidden;
}

.highlight-main img{
width:100%;
height:100%;
object-fit:cover;
}

.highlight-main .overlay{
transform:translateY(0);
}

/* LISTA */

.highlight-list{
display:flex;
flex-direction:column;
gap:15px;
}

.mini-card{
display:flex;
gap:10px;
background:#111;
padding:10px;
border-radius:10px;
align-items:center;
transition:.3s;
cursor:pointer;
}

.mini-card:hover{
background:#ff6a00;
color:white;
}

.mini-card img{
width:80px;
height:60px;
object-fit:cover;
border-radius:8px;
}

.mini-card span{
font-size:12px;
opacity:.8;
}

/* =========================
   EFECTOS EXTRA
========================= */

/* glow suave global */
.media-card-pro::after{
content:"";
position:absolute;
inset:0;
border-radius:15px;
box-shadow:0 0 0 rgba(255,106,0,0);
transition:.4s;
}

.media-card-pro:hover::after{
box-shadow:0 0 20px rgba(255,106,0,.4);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

.media-highlight-pro{
grid-template-columns:1fr;
}

}




/* TIMELINE */

.media-timeline{
padding:50px 10%;
}

.timeline{
position:relative;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
width:4px;
height:100%;
background:#ff6a00;
transform:translateX(-50%);
}

/* ITEM */

.timeline-item{
display:flex;
margin-bottom:50px;
position:relative;
}

.timeline-date{
width:50%;
text-align:right;
padding-right:30px;
font-weight:bold;
font-size:20px;
color:#ff6a00;
}

.timeline-content{
width:50%;
padding-left:30px;
}

/* GRID */

.media-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

/* CARD */

.media-card{
background:white;
border-radius:15px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
position:relative;
}

.media-card:hover{
transform:translateY(-8px);
}

.media-card img,
.media-card iframe{
width:100%;
height:200px;
object-fit:cover;
border:none;
}

.media-card h3{
padding:15px;
font-size:16px;
}

/* BADGE */

.badge{
position:absolute;
top:10px;
left:10px;
background:#ff6a00;
color:white;
padding:5px 10px;
border-radius:6px;
font-size:12px;
}

/* RESPONSIVE */

@media(max-width:768px){

.timeline::before{
left:10px;
}

.timeline-item{
flex-direction:column;
}

.timeline-date,
.timeline-content{
width:100%;
text-align:left;
padding:0 0 10px 20px;
}

}

/* VIDEO RESPONSIVE */
.video-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

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

/* ===== GRID 3 COLUMNAS ===== */
.categories-page .cat-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .categories-page .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .categories-page .cat-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== VIDEO RESPONSIVE ===== */
.video-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

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