/* =========================
   GENERAL
========================= */

body{
font-family:'Poppins', sans-serif;
background:#f7f7f7;
margin:0;
}

/* =========================
   HERO / CARRUSEL PRO FULL
========================= */

.hero-slider{
position:relative;
height:90vh; /* 🔥 más espacio */
overflow:hidden;
background:#ff6a00;
}

/* OVERLAY LIMPIO */
.hero-slider::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
120deg,
rgba(255,106,0,0.25),
rgba(0,0,0,0.55)
);

z-index:1;
}

/* CONTENEDOR */
.slider{
position:relative;
width:100%;
height:100%;
list-style:none;
margin:0;
padding:0;
z-index:2;
}

/* TARJETAS */
.item{
position:absolute;
top:50%;
transform:translateY(-50%);
width:220px;
height:320px;
border-radius:20px;
background-size:cover;
background-position:center;
transition:.6s cubic-bezier(.22,1,.36,1);
box-shadow:0 20px 40px rgba(0,0,0,.4);
overflow:hidden;
}

/* POSICIONES */
.item:nth-child(1),
.item:nth-child(2){
left:0;
top:0;
transform:none;
width:100%;
height:100%;
border-radius:0;
}

.item:nth-child(3){ left:60%; }
.item:nth-child(4){ left:75%; }
.item:nth-child(5){ left:90%; }

/* =========================
   CONTENIDO TEXTO
========================= */

.content{
position:absolute;
bottom:60px;
left:60px;
max-width:55%; /* 🔥 MÁS ESPACIO REAL */
z-index:3;
color:white;

/* 🔥 mejora visual */
background:rgba(0,0,0,0.35);
padding:25px;
border-radius:14px;
backdrop-filter:blur(6px);
}

/* TITULO */
.content h2{
font-size:38px;
font-weight:700;
margin-bottom:12px;
line-height:1.3;

/* 🔥 evita que se rompa */
word-break:break-word;

text-shadow:0 4px 20px rgba(0,0,0,.7);
}

/* DESCRIPCIÓN */
.content p{
font-size:16px;
margin-bottom:15px;
opacity:.95;
line-height:1.5;

word-break:break-word;

text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* BOTON */
.content a{
display:inline-block;
background:#ff6a00;
padding:10px 22px;
color:white;
text-decoration:none;
border-radius:8px;
font-weight:600;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.3);
}

.content a:hover{
background:#e65c00;
transform:translateY(-2px);
}

/* =========================
   BOTONES NAV
========================= */

.nav{
position:absolute;
bottom:30px;
right:40px;
display:flex;
gap:10px;
z-index:4;
}

.btn{
background:white;
border:none;
padding:12px 16px;
border-radius:50%;
cursor:pointer;
font-size:18px;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.btn:hover{
background:#ff6a00;
color:white;
}

/* =========================
   RESPONSIVE (CLAVE 🔥)
========================= */

@media(max-width:900px){

.content{
max-width:80%;
left:20px;
bottom:40px;
padding:18px;
}

.content h2{
font-size:26px;
}

.content p{
font-size:14px;
}

.hero-slider{
height:70vh;
}

}

/* =========================
   HOY EN SOLUCIÓN
========================= */

.today{
padding:60px 20px;
text-align:center;
}

.today-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.today-card{
background:white;
padding:25px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

.today-card:hover{
transform:translateY(-6px);
}

.today-card.highlight{
background:#ff6a00;
color:white;
}

/* =========================
   TITULOS
========================= */

.section-title{
text-align:center;
font-size:30px;
margin-bottom:30px;
font-weight:700;
}

/* =========================
   NEWS
========================= */

.news{
padding:40px 20px;
}

.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

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

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

.news-card img{
width:100%;
height:200px;
object-fit:cover;
}

.news-card-content{
padding:20px;
}

/* =========================
   SECCIONES
========================= */

.sections{
padding:40px 20px;
}

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

.section-card{
position:relative;
border-radius:15px;
overflow:hidden;
cursor:pointer;
transition:.3s;
}

.section-card:hover{
transform:scale(1.03);
}

.section-card img{
width:100%;
height:300px;
object-fit:cover;
}

.section-card span{
position:absolute;
bottom:10px;
left:10px;

background:#ff6a00;
color:white;

padding:8px 12px;
border-radius:6px;
font-weight:bold;
}

/* =========================
   VIDEOS
========================= */

.videos{
padding:40px 20px;
}

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

.video-card iframe{
width:100%;
height:220px;
border:none;
border-radius:10px;
}

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

@media(max-width:768px){

.hero-slider{
height:60vh;
}

.content{
left:20px;
bottom:30px;
}

.content h2{
font-size:28px;
}

.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(5){
display:none;
}

.nav{
right:20px;
bottom:20px;
}

}

/* ===== FIX SLIDER TEXTO DUPLICADO ===== */

/* Oculta contenido del slide anterior */
.item:nth-child(1) .content{
    display: none;
}

/* Asegura que solo el activo se vea */
.item:nth-child(2) .content{
    display: block;
}

.news-card-content a{
display:inline-block;
margin-top:10px;
color:#ff6a00;
font-weight:600;
text-decoration:none;
}

.news-card{
text-decoration: none;
color: inherit;
display: block;
cursor: pointer;
}

.categories-page{
padding: 40px 20px;
}

.categoria-bloque{
max-width: 1100px;
margin: 40px auto;
}

.categoria-bloque h2{
margin-bottom: 20px;
color: #222;
}

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

.cat-card{
display: block;
background: #fff;
padding: 15px;
border-radius: 10px;
text-decoration: none;
color: #222;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: .2s;
}

.cat-card:hover{
transform: translateY(-5px);
}

.cat-card img{
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 10px;
}

.cat-card h3{
font-size: 16px;
margin-bottom: 5px;
}

.cat-card p{
font-size: 13px;
color: #777;
}

.cat-hero{
background: #ff6a00; /* naranja */
padding: 50px 20px;
color: #fff;
}

.cat-hero-inner{
max-width: 900px;
margin: auto;
text-align: center;
}

.cat-hero h1{
color: #fff;
font-size: 34px;
margin-bottom: 10px;
}

.cat-hero p{
color: #fff;
font-size: 16px;
opacity: 0.9;
}

.categoria-bloque h2{
font-size: 22px;
margin-bottom: 20px;
color: #ff6a00;
position: relative;
padding-left: 12px;
}

/* línea decorativa */
.categoria-bloque h2::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 20px;
background: #ff6a00;
border-radius: 3px;
}