/* Estilos Personalizados TEPP para Castanet - Arrested DevOps Style */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #ffffff;
  --color-card-bg: #ffffff;
  --color-text: #111111;
  --color-border: #111111;
  --color-shadow: #cccccc;
  --color-shadow-hover: #999999;
  --color-navy: #1e2a52;
  --color-yellow: #f5c518;
  --color-red: #b8341f;
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --radius-card: 16px;
  --radius-pill: 999px;
  --border-width: 3px;
}

/* 1. Reset completo de Márgenes Superiores para eliminar franja en blanco */
html, body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Texto Negro en Contenido Principal y Tarjetas */
main, 
main p, 
main div, 
main span, 
main small, 
main li, 
main td, 
main th,
main h1, main h2, main h3, main h4, main h5, main h6,
.homepage_episode_card,
.homepage_episode_card *,
.homepage_episode_description,
.homepage_episode_description *,
.episode_row,
.episode_row *,
.hero_container,
.hero_container *,
.card,
.card *,
.well,
.well *,
.panel,
.panel *,
.sidebar,
.sidebar * {
  color: #111111 !important;
}

/* 2. CABECERA Y MENÚ SUPERIOR (Sticky y totalmente responsiva) */
.navbar, header, nav, .navbar-default, .top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  background-color: var(--color-navy) !important;
  border-bottom: 3px solid var(--color-border) !important;
  padding: 10px 0 !important;
  width: 100% !important;
}

.navbar .container, .navbar-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

.navbar-brand, .navbar-brand * {
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.navbar-collapse {
  display: flex !important;
  justify-content: flex-end !important;
}

.navbar-nav, .navbar-nav.mr-auto, .navbar-nav.ms-auto {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.nav-link, .navbar-nav a {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-pill) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.nav-link:hover, .navbar-nav a:hover {
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
}

/* Ajustes Responsivos para Pantallas Pequeñas (< 768px) */
@media (max-width: 768px) {
  .navbar {
    padding: 8px 0 !important;
  }

  .navbar .container {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .navbar-brand, .navbar-brand * {
    font-size: 1.05rem !important;
    max-width: 60vw !important;
  }

  .navbar-nav, .navbar-nav.mr-auto, .navbar-nav.ms-auto {
    gap: 4px !important;
  }

  .nav-link, .navbar-nav a {
    font-size: 0.85rem !important;
    padding: 4px 8px !important;
  }
}

/* 3. SECCIÓN HERO (BANNER SUPERIOR DE ARRESTED DEVOPS) */
.hero-section {
  background-color: #ffffff !important;
  border: var(--border-width) solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  padding: 35px 30px !important;
  margin: 30px 0 40px 0 !important;
  box-shadow: 6px 6px 0px var(--color-shadow) !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
  margin-bottom: 15px !important;
}

.live-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-red);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.hero-title {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: var(--color-navy) !important;
  margin-bottom: 12px !important;
}

.hero-lede {
  font-size: 1.1rem !important;
  color: #333333 !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

.hero-episodes-count {
  font-size: 0.9rem !important;
  color: #666666 !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
}

.hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 25px !important;
}

.hero-btn-primary {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
}

.hero-btn-primary:hover {
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
}

.hero-btn-secondary {
  background-color: #ffffff !important;
  color: var(--color-navy) !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
}

.hero-btn-secondary:hover {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
}

/* Barra de Suscripciones en Hero */
.hero-subscribe-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid #eeeeee;
  padding-top: 18px;
}

.subscribe-label {
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #777777 !important;
  margin-right: 5px;
}

.subscribe-pill {
  background-color: #f5f5f5 !important;
  color: var(--color-navy) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.subscribe-pill:hover {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
}

/* Tarjeta Destacada del Último Episodio */
.hero-featured-card {
  background-color: #ffffff !important;
  border: 3px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 6px 6px 0px var(--color-navy) !important;
  overflow: hidden !important;
}

.featured-card-header {
  position: relative !important;
  max-height: 200px !important;
  overflow: hidden !important;
  background-color: var(--color-navy);
}

.featured-img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

.featured-ep-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background-color: var(--color-red) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
}

.featured-card-body {
  padding: 20px !important;
}

.featured-title {
  font-size: 1.25rem !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.featured-title a {
  color: #111111 !important;
  text-decoration: none !important;
}

.featured-title a:hover {
  color: var(--color-red) !important;
}

.hero-audio-wrapper {
  margin-top: 12px !important;
}

/* 4. TARJETAS UNIFICADAS DE EPISODIOS */
.homepage_episode_card, .card, .well, .panel, .sidebar, .widget {
  background-color: #ffffff !important;
  border: var(--border-width) solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
  box-shadow: 6px 6px 0px var(--color-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.homepage_episode_card:hover, .card:hover, .panel:hover {
  transform: translateY(-2px) !important;
  box-shadow: 8px 8px 0px var(--color-shadow-hover) !important;
}

/* Títulos de Episodios */
.row_latest_episode_title, .grid_episode_title, .episode_title, h2 a, h3 a {
  color: #111111 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.row_latest_episode_title:hover, .grid_episode_title:hover, .episode_title:hover, h2 a:hover, h3 a:hover {
  color: var(--color-red) !important;
}

/* 5. Texto Negro Intenso sobre Fondo Amarillo */
.badge, .tag, .label, .badge-warning, .badge-yellow {
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
  font-weight: 800 !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  display: inline-block !important;
}

/* Botones Píldora */
a.btn, .btn, .pill, .btn-primary, .btn-default {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  display: inline-block;
}

a.btn:hover, .btn:hover, .pill:hover, .btn-primary:hover {
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
  border-color: var(--color-border) !important;
}

/* Reproductor de Audio HTML5 */
audio {
  border-radius: var(--radius-pill) !important;
  outline: none !important;
  width: 100% !important;
}

/* Footer Limpio en Azul Marino */
footer, .footer {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  padding: 30px 20px !important;
  margin-top: 50px !important;
  border-top: 3px solid var(--color-border) !important;
}

footer a, footer p, footer span, footer div {
  color: #ffffff !important;
}

footer a:hover {
  color: var(--color-yellow) !important;
}

/* 6. ELIMINAR FONDO AZUL DE LA LISTA DE EPISODIOS */
.middle_container, 
.main_container, 
.episode-list, 
.episode-list-section, 
.episode-grid,
.hero_container {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* 7. REJILLA DE TARJETAS EN COLUMNAS DE 3 (ESTILO ARRESTED DEVOPS) */
.grid-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #ffffff !important;
  border: 3px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 6px 6px 0px var(--color-shadow) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.grid-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 8px 8px 0px var(--color-navy) !important;
}

.grid-card-img-wrapper {
  position: relative !important;
  height: 180px !important;
  overflow: hidden !important;
  border-bottom: 3px solid var(--color-border) !important;
  background-color: var(--color-navy);
}

.grid-card-img-wrapper a,
.featured-card-header a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.grid-card-img-wrapper a img,
.featured-card-header a img,
.grid-card-img,
.featured-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.grid-ep-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  border: 2px solid var(--color-border) !important;
}

.grid-card-body {
  padding: 20px !important;
  flex: 1 1 auto !important;
}

.grid_episode_title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.grid_episode_title a {
  color: #111111 !important;
  text-decoration: none !important;
}

.grid_episode_title a:hover {
  color: var(--color-red) !important;
}

.grid-card-meta {
  color: #666666 !important;
  margin-bottom: 12px !important;
}

.grid-card-audio {
  margin-top: 16px !important;
}

/* 10. PAGINADOR RESPONSIVO (Compacto en móviles) */
.pagination .page-link {
  color: var(--color-navy) !important;
  border: 2px solid var(--color-border) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-card) !important;
  margin: 0 3px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  border-color: var(--color-border) !important;
}

.pagination .page-link:hover {
  background-color: var(--color-yellow) !important;
  color: #111111 !important;
}

@media (max-width: 576px) {
  .pagination .page-link {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    margin: 0 2px !important;
  }
}