/* ============================================================
   modern.css — Toque moderno para Nada es Imposible TV
   Mantiene la paleta original (rosa #E91E63 como color principal).
   Solo añade estilos nuevos; no reemplaza los del tema base.
   ============================================================ */

:root{
  --nei-rosa:      #E91E63;
  --nei-rosa-osc:  #c2185b;
  --nei-rosa-clar: #ff377b;
  --nei-morado:    #5b0072;
  --nei-sombra:    0 10px 30px rgba(0,0,0,.08);
  --nei-sombra-hover: 0 18px 44px rgba(233,30,99,.20);
  --nei-radio:     16px;
}

/* Suaviza el desplazamiento al navegar por el menú */
html{ scroll-behavior:smooth; }

/* Encabezados de sección con una línea de acento más moderna */
.section-header h2{ letter-spacing:.5px; }

/* ============================================================
   ÚLTIMOS PROGRAMAS (YouTube)
   ============================================================ */
#youtubes{ padding:70px 0 40px; }

.yt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:26px;
  padding:10px 0;
}

.yt-card{
  background:#fff;
  border-radius:var(--nei-radio);
  overflow:hidden;
  box-shadow:var(--nei-sombra);
  transition:transform .35s ease, box-shadow .35s ease;
  border:1px solid #f0e2e8;
}
.yt-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--nei-sombra-hover);
}

/* Contenedor responsivo 16:9 para el iframe */
.yt-embed{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:#000;
}
.yt-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

.yt-card .yt-titulo{
  margin:0;
  padding:14px 18px 16px;
  font-size:15px;
  font-weight:600;
  color:#333;
  display:flex; align-items:center; gap:8px;
}
.yt-card .yt-titulo i{ color:var(--nei-rosa); }

/* ============================================================
   NOTICIAS  (tarjetas + modal amigable)
   ============================================================ */
#portfolio{
  background:linear-gradient(135deg, #5b0072 0%, #3a0157 100%);
  padding:80px 0;
}
#portfolio .section-header h2{ color:#fff; }
#portfolio .section-header h2::before{ background:rgba(255,255,255,.25); }
#portfolio .section-header p{ color:#f0dcff; }

.noticias-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
  margin-top:20px;
}

.noticia-card{
  background:#fff;
  border-radius:var(--nei-radio);
  overflow:hidden;
  box-shadow:var(--nei-sombra);
  display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
  cursor:pointer;
  text-align:left;
}
.noticia-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 46px rgba(0,0,0,.28);
}

.noticia-foto{
  position:relative;
  height:190px;
  background:#eee center/cover no-repeat;
}
.noticia-foto.sin-foto{
  background:linear-gradient(135deg, var(--nei-rosa) 0%, var(--nei-morado) 100%);
  display:flex; align-items:center; justify-content:center;
}
.noticia-foto.sin-foto i{ font-size:46px; color:rgba(255,255,255,.85); }

.noticia-badge{
  position:absolute; top:12px; left:12px;
  background:var(--nei-rosa);
  color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase;
  padding:5px 12px; border-radius:20px;
  box-shadow:0 4px 12px rgba(233,30,99,.4);
}
.noticia-destacada{
  position:absolute; top:12px; right:12px;
  background:#ffd54f; color:#7a5b00;
  font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:20px;
}

.noticia-cuerpo{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.noticia-fecha{ font-size:12px; color:#9a9a9a; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.noticia-fecha i{ color:var(--nei-rosa); }
.noticia-card h3{
  font-size:18px; line-height:1.35; margin:0 0 8px; color:#2a2a2a; font-weight:700;
}
.noticia-resumen{ font-size:14px; color:#666; line-height:1.55; flex:1; margin:0 0 14px; }
.noticia-leer{
  align-self:flex-start;
  color:var(--nei-rosa); font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .2s ease;
}
.noticia-card:hover .noticia-leer{ gap:12px; }

/* Modal de noticia */
.modal-noticia .modal-content{ border:0; border-radius:var(--nei-radio); overflow:hidden; }
.modal-noticia .modal-header{
  background:linear-gradient(120deg, var(--nei-rosa) 0%, var(--nei-rosa-osc) 100%);
  color:#fff; border:0; padding:20px 24px;
}
.modal-noticia .modal-header .close{ color:#fff; opacity:.9; text-shadow:none; font-size:28px; }
.modal-noticia .modal-title{ font-weight:700; font-size:20px; }
.modal-noticia .modal-body{ padding:0; }
.modal-noticia .mn-foto{ width:100%; max-height:360px; object-fit:cover; display:block; }
.modal-noticia .mn-texto{ padding:24px 26px; color:#444; line-height:1.7; font-size:15.5px; }
.modal-noticia .mn-texto p{ margin:0 0 14px; }
.modal-noticia .mn-meta{ padding:0 26px 20px; font-size:13px; color:#999; }
.modal-noticia .mn-meta .badge-cat{
  background:var(--nei-rosa); color:#fff; padding:4px 12px; border-radius:20px;
  font-weight:700; margin-right:8px; text-transform:uppercase; font-size:11px;
}

/* ============================================================
   EVENTOS (calendario moderno con insignia de fecha)
   ============================================================ */
#event{ padding:80px 0; background:#faf6f8; }

.eventos-lista{ display:flex; flex-direction:column; gap:18px; margin-top:14px; }

.evento-card{
  display:flex; align-items:stretch;
  background:#fff;
  border-radius:var(--nei-radio);
  overflow:hidden;
  box-shadow:var(--nei-sombra);
  border:1px solid #f2e4ea;
  transition:transform .3s ease, box-shadow .3s ease;
}
.evento-card:hover{ transform:translateX(4px); box-shadow:var(--nei-sombra-hover); }

.evento-fecha{
  flex:0 0 108px;
  background:linear-gradient(160deg, var(--nei-rosa) 0%, var(--nei-rosa-osc) 100%);
  color:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:18px 8px;
  text-align:center;
}
.evento-fecha .dia{ font-size:34px; font-weight:800; line-height:1; }
.evento-fecha .mes{ font-size:13px; font-weight:700; letter-spacing:2px; margin-top:4px; }
.evento-fecha .anio{ font-size:12px; opacity:.85; margin-top:2px; }

.evento-info{ flex:1; padding:18px 22px; }
.evento-etiqueta{
  display:inline-block; background:#fce4ec; color:var(--nei-rosa-osc);
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:14px; margin-bottom:8px;
}
.evento-info h4{ margin:0 0 8px; font-size:19px; font-weight:700; color:#2a2a2a; }
.evento-info h4 a{ color:#2a2a2a; }
.evento-descripcion{ color:#666; font-size:14px; margin:0 0 10px; line-height:1.5; }
.evento-detalles{ display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:#777; }
.evento-detalles span{ display:inline-flex; align-items:center; gap:6px; }
.evento-detalles i{ color:var(--nei-rosa); }

/* Mensaje cuando no hay contenido */
.sin-contenido{
  text-align:center; color:#aaa; padding:30px; font-style:italic;
  grid-column:1 / -1;
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:576px){
  .evento-card{ flex-direction:column; }
  .evento-fecha{ flex-direction:row; gap:10px; padding:12px; flex-basis:auto; }
  .evento-fecha .dia{ font-size:26px; }
  .yt-grid, .noticias-grid{ grid-template-columns:1fr; }
}