/* ==========================================================
   1. RESET Y ESTILOS GLOBALES
   ========================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

/* ==========================================================
   2. HEADER, NAVEGACIÓN Y MENÚ PRINCIPAL (INTACTO)
   ========================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #8c52ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
}
nav { display: flex; justify-content: space-between; align-items: center; }

/* Logo en el header */
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 60px; transition: height 0.3s ease; }

/* Menú principal */
.menu { display: flex; align-items: center; gap: 30px; }
.nav-links { list-style: none; display: flex; gap: 20px; position: relative; }
.nav-links li { position: relative; }
.nav-links li a {
    padding: 8px 15px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-links li a:hover { background-color: #fff; color: #8c52ff; }

/* ==========================================================
   3. DROPDOWN Y SUBMENÚS (INTACTO)
   ========================================================== */
.dropdown-menu,
.dropdown-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 5px 0;
    z-index: 10;
}
.dropdown:hover > .dropdown-menu { display: block; }
.dropdown-menu li:hover > .dropdown-submenu { display: block; }
.dropdown-menu li { padding: 5px 20px; }
.dropdown-submenu { top: 0; left: 100%; }
.dropdown-menu li a { text-decoration: none; color: #333; }
.dropdown-menu li a:hover { background-color: #8c52ff; color: white; }

/* ==========================================================
   4. BUSCADOR GENERAL (INTACTO)
   ========================================================== */
.search-bar { position: relative; display: flex; align-items: center; width: 200px; }
.search-bar input {
    display: block; width: 100%; height: 40px; padding: 8px;
    border: 2px solid #ccc; outline: none; text-align: left;
}
.search-bar input:focus { border-color: #8c52ff; }
.suggestions {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    background-color: #fff; border: 1px solid #ccc; border-radius: 5px;
    max-height: 160px; overflow-y: auto; z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.suggestion-item { padding: 6px 8px; cursor: pointer; color: #333; }
.suggestion-item:hover { background-color: #8c52ff; color: #fff; }

/* ==========================================================
   5. MENÚ HAMBURGUESA (MOBILE) (INTACTO)
   ========================================================== */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.hamburger .bar { width: 25px; height: 4px; background-color: #fff; }

/* ==========================================================
   6. MENÚ CON LOGOS (INTACTO)
   ========================================================== */
.menu-logo { height: 40px; width: auto; margin: 5px; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 5px; }
.submenu-logo { height: 30px; width: auto; margin: 5px; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 5px; }
.menu-logo:hover, .submenu-logo:hover { transform: scale(1.05); box-shadow: 0 0 8px #8c52ff; }
.dropdown-menu li a.logo-item:hover, .nav-links li a.logo-item:hover { background-color: transparent; }
.dropdown-menu img, .dropdown-submenu img { margin: 5px auto; display: block; }

/* ==========================================================
   7. SELECTOR DE IDIOMA (INTACTO)
   ========================================================== */
.language-selector { position: relative; display: inline-block; }
#lang-btn { border: none; background: none; font-weight: bold; font-size: 14px; color: #fff; cursor: pointer; padding: 5px; transition: color 0.2s ease; }
#lang-btn:hover { color: #8c52ff; }
.lang-menu {
    display: none; position: absolute; right: 50%; transform: translateX(50%);
    background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: 5px; padding: 5px;
}
.lang-menu li { list-style: none; padding: 5px; }
.lang-menu li a { text-decoration: none; font-size: 14px; font-weight: bold; color: #333; padding: 5px; display: block; transition: color 0.2s ease; }
.lang-menu li a:hover { color: #8c52ff; }
.language-selector:hover .lang-menu { display: block; }

/* ==========================================================
   8. LOGO ANIMADO (INTACTO)
   ========================================================== */
.logo img { transition: transform 0.6s ease; transform-style: preserve-3d; }
.logo img:hover { transform: rotateY(360deg); }

/* ==========================================================
   9. SECCIÓN DE CONTENIDO (INTACTO)
   ========================================================== */
.content-section { margin: 30px 20px; padding: 40px; background-color: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; }
h2 { margin-bottom: 20px; font-size: 24px; font-weight: bold; }
.review-card { background-color: #f9f9f9; padding: 20px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

/* ==========================================================
   10. FOOTER (INTACTO)
   ========================================================== */
footer { background-color: #8c52ff; color: white; padding: 40px 20px; text-align: center; font-family: 'Arial', sans-serif; box-shadow: 0 -5px 10px rgba(0,0,0,0.2); }
footer a { color: #f4f4f9; text-decoration: dotted; }
.footer-content { display: flex; flex-direction: column; align-items: center; }
.footer-logo img { height: 60px; margin-bottom: 15px; opacity: 0.9; }
.footer-socials { display: flex; gap: 15px; justify-content: center; margin-bottom: 25px; }
.footer-socials img { width: 30px; transition: transform 0.1s ease, opacity 0.3s ease; }
.footer-socials a:hover img { transform: scale(1.2); opacity: 0.7; }
.footer-bottom { font-size: 14px; opacity: 0.8; }

/* ==========================================================
   11. INPUTS Y BOTONES GENERALES (INTACTO)
   ========================================================== */
input[type="text"] { padding: 10px; width: 250px; border-radius: 5px; border: 1px solid #ddd; }
button { padding: 10px 20px; border: none; background-color: #8c52ff; color: white; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #7e4ccd; }

/* ==========================================================
   12. LAYOUT GENERAL (INTACTO)
   ========================================================== */
main { width: 100%; padding-top: 100px; }
@media (min-width: 1600px) {
    main { max-width: 1450px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
}

/* (Secciones de noticias intactas; las dejo tal cual por si las usas en otras páginas) */
.news-container { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.news-container a { text-decoration: none; color: inherit; display: block; }
.image-container { position: relative; width: 100%; overflow: hidden; }
.news-main .image-container { height: 600px; }
.news-box .image-container { height: 300px; }
.image-container img { width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 1; padding: 5px; }
.overlay h2, .overlay h3 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: bold; color: #fff; }
.overlay p { margin: 5px 0 0; font-size: 18px; font-weight: bold; color: #fff; }
.tag { position: absolute; top: 10px; left: 10px; background: #28a745; color: white; padding: 5px 10px; font-size: 14px; border-radius: 5px; z-index: 2; }
.news-group { display: flex; gap: 10px; }
.news-box.big { flex: 2; }
.news-box.small { flex: 1; }
.news-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.news-grid .news-box { flex: 1; min-width: 200px; }

/* Adaptación móvil (INTACTO) */
@media (max-width: 768px) {
    .news-grid, .news-group { flex-direction: column; }
    .news-box .image-container, .news-main .image-container { height: auto; aspect-ratio: 16 / 9; }
    .nav-links li a { color: #000; background-color: transparent; }
}

/* Más noticias / sticky (INTACTO) */
.more-news-section { margin-top: 40px; padding: 20px; }
.more-news-section h2 { font-size: 28px; font-weight: bold; margin-bottom: 20px; }
.more-news-container { display: flex; gap: 20px; }
.more-news-list { flex: 0 0 60%; display: flex; flex-direction: column; gap: 20px; }
.news-item { display: flex; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
.news-item a { display: flex; gap: 20px; width: 100%; text-decoration: none; color: inherit; }
.news-item-left { flex-shrink: 0; }
.news-image { width: 150px; height: 150px; position: relative; overflow: hidden; }
.news-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.news-category { position: absolute; top: 5px; left: 5px; background: #28a745; color: #fff; padding: 3px 6px; font-size: 12px; border-radius: 3px; }
.news-item-right { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.news-item-right h3 { font-size: 20px; font-weight: bold; margin: 0; }
.news-item-right p { margin: 10px 0; font-size: 16px; line-height: 1.4; color: #333; }
.news-author { align-self: flex-end; font-size: 14px; color: #666; }
.hidden { display: none; }
.fixed-news-wrapper { flex: 0 0 40%; position: sticky; top: 100px; align-self: flex-start; z-index: 10; }
.fixed-news-section-header { padding: 10px 0; }
.fixed-news-header { font-size: 28px; font-weight: bold; margin: 0; color: #333; }
.fixed-news-boxes { display: flex; flex-direction: column; gap: 20px; }
.fixed-news-box { width: 100%; height: 250px; position: relative; overflow: hidden; }
.fixed-news-box a { display: block; text-decoration: none; color: inherit; }
.fixed-news-box img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fixed-news-title { position: absolute; top: 5px; left: 5px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 16px; padding: 3px 8px; border-radius: 3px; z-index: 3; }
.fixed-news-info { position: absolute; bottom: 5px; right: 5px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; padding: 3px 5px; border-radius: 3px; z-index: 2; }

/* Botón "Ver más" */
.load-more-btn {
    display: block; margin: 30px auto; padding: 10px 20px; font-size: 16px;
    color: #fff; background-color: #333; border: none; border-radius: 4px; cursor: pointer;
}

/* ==========================================================
   14. RESPONSIVE GENERAL (INTACTO)
   ========================================================== */
@media (max-width: 768px) {
    .menu {
        display: none; flex-direction: column; align-items: flex-start; gap: 15px; width: 100%;
        background-color: #ffffff; position: absolute; top: 70px; left: 0; padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .menu.active { display: flex; }
    .hamburger { display: flex; }

    .nav-links { flex-direction: column; gap: 10px; width: 100%; }
    .nav-links li { width: 100%; }
    .nav-links li a {
        display: flex; align-items: center; gap: 10px; padding: 10px; text-align: left;
        width: 100%; color: #333; background-color: #fff; border-radius: 5px; margin-bottom: 5px;
    }
    .nav-links li a:hover { background-color: #8c52ff; color: #fff; }

    .dropdown-menu, .dropdown-submenu {
        display: none; position: static; background-color: #f9f9f9; margin-left: 20px; padding: 0;
    }
    .dropdown-menu li:hover > .dropdown-submenu, .dropdown:hover > .dropdown-menu { display: block; }
    .dropdown-menu li, .dropdown-submenu li { padding: 8px 10px; }
    .dropdown-menu li a, .dropdown-submenu li a { padding: 8px; text-align: left; color: #333; }
    .dropdown-menu li a:hover, .dropdown-submenu li a:hover { background-color: #8c52ff; color: white; }
    .nav-links li .dropdown-menu { margin-left: 15px; background-color: #f0f0f0; }
    .dropdown-submenu { margin-left: 30px; background-color: #d0d0d0; }
    .menu-logo, .submenu-logo { height: 25px; }

    .more-news-container { flex-direction: column; }
    .fixed-news-wrapper { display: none; }
    #lang-btn { color: #000; }
}

/* ==========================================================
   15. UTILIDADES
   ========================================================== */
.oculto {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================
   16. PODCAST DIRECTORY (AJUSTES DEL MAIN)
   ========================================================== */
.podcast-dir { width:100%; padding-top:120px; }
@media (min-width:1600px){
  .podcast-dir{ max-width:1450px; margin:0 auto; padding-left:20px; padding-right:20px; }
}

/* --- HERO con imagen y texto superpuesto --- */
.podcast-dir__hero {
  position: relative;
  /* Imagen + degradado morado tipo Netflix */
  background: 
    linear-gradient(to bottom, #8c52ff 0%, rgba(140,82,255,0) 25%, rgba(140,82,255,0) 75%, #8c52ff 100%),
    url("/assets/podcast/banner podcast.png") center center no-repeat;
  background-size: contain; /* mantiene proporción sin recortar */
  background-color: #8c52ff; /* respaldo si no carga la imagen */

  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 0 20px 20px;
  overflow: hidden;
}



.podcast-dir__hero::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.podcast-dir__hero h1,
.podcast-dir__hero .podcast-dir__sub{
  position:relative; z-index:1; color:#fff; text-align:center;
}
.podcast-dir__hero h1{ font-size:42px; margin-bottom:4px; }
.podcast-dir__hero .podcast-dir__sub{ font-size:18px; }

/* --- Controles --- */
.podcast-dir__controls{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:0 20px 10px; flex-wrap:wrap;
}
.podcast-dir__filters{ display:flex; gap:8px; flex-wrap:wrap; }

/* Chips */
.pchip{
  border:1px solid #ddd; background:#fff; color:#333;
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:bold;
}
.pchip:hover{ border-color:#8c52ff; }
.pchip.is-active{ background:#8c52ff; color:#fff; border-color:#8c52ff; }

.podcast-dir__search{ display:flex; gap:8px; align-items:center; }
.podcast-dir__search input, .podcast-dir__search select{
  height:40px; padding:0 10px; border:1px solid #ddd; border-radius:8px; outline:none;
}
.podcast-dir__search input:focus, .podcast-dir__search select:focus{ border-color:#8c52ff; }

/* --- Grid y cards --- */
.podcast-dir__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 20px 0; }
@media (max-width:1024px){ .podcast-dir__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .podcast-dir__grid{ grid-template-columns:1fr;} }

.pcard{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.pcard__media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Etiqueta arriba a la DERECHA */
.pcard__tag{
  position:absolute; top:8px; right:8px;
  background:#28a745; color:#fff; font-size:12px; padding:4px 8px; border-radius:6px;
}

.pcard__body{ padding:12px; display:flex; gap:10px; flex-direction:column; }
.pcard__title{ font-size:18px; line-height:1.25; font-weight:bold; }
.pcard__meta{ color:#666; font-size:13px; display:flex; gap:8px; flex-wrap:wrap; }
.pcard__desc{ color:#333; font-size:14px; }
.pcard__actions{ display:flex; gap:8px; margin-top:auto; }

.pbtn{ flex:1; padding:10px 12px; border:none; border-radius:8px; background:#f2f2f2; cursor:pointer; font-weight:bold; }
.pbtn.primary{ background:#8c52ff; color:#fff; }
.pbtn:hover{ filter:brightness(0.95); }

/* Cargar más */
.btn-load{ padding:12px 18px; border-radius:8px; border:none; background:#333; color:#fff; cursor:pointer; }
.btn-load:hover{ background:#000; }
.podcast-dir__load{ display:flex; justify-content:center; padding:22px 0 40px; }

/* Modal */
.podcast-player { border:none; border-radius:12px; width:min(920px, 92vw); padding:0; }
.podcast-player[open] { animation:fadeIn .15s ease-out; }
.podcast-player::backdrop { background:rgba(0,0,0,.5); }
@keyframes fadeIn { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.podcast-player__close { position:absolute; top:6px; right:10px; background:transparent; border:none; font-size:32px; cursor:pointer; }
.podcast-player__meta { display:flex; gap:14px; align-items:center; padding:16px; border-bottom:1px solid #eee; }
.podcast-player__meta img { width:64px; height:64px; border-radius:8px; object-fit:cover; }
.podcast-player__frame { padding:16px; }
.podcast-player iframe, .podcast-player audio { width:100%; height:360px; border:0; border-radius:10px; background:#000; }
@media (max-width:680px){ .podcast-player iframe, .podcast-player audio{ height:260px; } }





.pbtn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: #f2f2f2;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;   /* 👈 quita el subrayado */
  display: inline-block;   /* asegura que se comporte como botón */
  text-align: center;      /* centra el texto */
  color: inherit;          /* hereda color o pon uno fijo si quieres */
}