/* === Global CSS built from index, historico, blog === */

/* --- From index.html --- */
:root {
      --bg-page: #e5e7eb;
      --accent: #16a34a;
      --accent-soft: rgba(22, 163, 74, 0.08);
      --border-soft: #d4d4d8;
      --text-main: #111827;
      --text-muted: #4b5563;
      --text-soft: #9ca3af;
      --card-bg: #ffffff;
      --card-hover: #f3f4f6;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg-page);
      color: var(--text-main);
    }

    .shell {
      max-width: 960px;
      margin: 0 auto;
      padding: 18px 14px 30px;
    }

    .header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 14px;
  margin: 4px 0 8px;
  background: var(--bg-page); /* mismo color que el fondo de la página */
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: sticky;
  top: 10px;
  z-index: 50;
}


    .header-logo {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    }

    .header-logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .header-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .site-title {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #111827;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .site-title span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .site-title-tag {
      font-size: 0.78rem;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #4b5563;
      background: rgba(255, 255, 255, 0.9);
    }

    .site-subtitle {
      font-size: 0.9rem;
      color: #4b5563;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    .site-subtitle span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .tag-pill {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      border-radius: 999px;
      padding: 2px 8px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      background: rgba(255, 255, 255, 0.85);
      color: #4b5563;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 600;
    }

    .site-subtitle .dot {
      width: 3px;
      height: 3px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.9);
      display: inline-block;
    }

    .site-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 0.7rem;
      color: #6b7280;
    }

    .site-badge {
      padding: 1px 7px;
      border-radius: 999px;
      border: 1px dashed rgba(148, 163, 184, 0.7);
      background: rgba(249, 250, 251, 0.85);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .site-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
    }

    /* Menú principal */
    .main-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 10px;
      flex-wrap: wrap;
    }

    .main-nav a {
      text-decoration: none;
      font-size: 0.85rem;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: #4b5563;
      background: rgba(255, 255, 255, 0.9);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease-in-out;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
    }

    .main-nav a:hover {
      border-color: rgba(148, 163, 184, 0.8);
      background: rgba(249, 250, 251, 0.95);
      color: #111827;
    }

    .main-nav a.active {
      border-color: rgba(34, 197, 94, 0.9);
      background: rgba(22, 163, 74, 0.08);
      color: #166534;
      box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.35);
    }

    .main-nav svg {
      width: 14px;
      height: 14px;
      opacity: 0.8;
    }

    /* Player compacto */
    .header-player {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.85);
      color: white;
      margin-left: auto;
      min-width: 0;
      border: 1px solid rgba(15, 23, 42, 0.75);
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.5);
    }

    .header-player-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .player-title {
      font-size: 0.85rem;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .player-meta {
      font-size: 0.7rem;
      color: #e5e7eb;
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .player-meta-dot {
      width: 3px;
      height: 3px;
      border-radius: 999px;
      background: rgba(156, 163, 175, 0.9);
    }

    .player-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 6px;
    }

    .player-btn {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(15, 23, 42, 0.9);
      color: #e5e7eb;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      cursor: pointer;
      padding: 0;
      transition: all 0.15s ease-in-out;
    }

    .player-btn:hover {
      background: rgba(30, 64, 175, 0.9);
      border-color: rgba(129, 140, 248, 0.9);
      color: #ffffff;
    }

    .player-btn-main {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border-width: 1px;
      border-color: rgba(129, 140, 248, 0.9);
      background: #4f46e5;
      color: white;
      box-shadow:
        0 0 0 1px rgba(129, 140, 248, 0.7),
        0 10px 20px rgba(15, 23, 42, 0.7);
      font-size: 0.9rem;
    }

    .player-btn-main:hover {
      background: #4338ca;
    }

    .player-time {
      font-size: 0.68rem;
      color: #e5e7eb;
      text-align: right;
    }

    .player-seek {
      width: 100%;
      margin-top: 3px;
      accent-color: #4f46e5;
    }

    .header-player-extra {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      font-size: 0.65rem;
      color: #e5e7eb;
    }

    .header-player-extra span {
      white-space: nowrap;
    }

    /* Responsive header / player */
    @media (max-width: 900px) {
      .header {
        flex-wrap: wrap;
        gap: 10px;
      }

      .header-player {
        order: 3;
        width: 100%;
        justify-content: space-between;
      }

      .main-nav {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.3);
        padding-top: 6px;
      }
    }

    @media (max-width: 600px) {
      .header {
        padding: 10px;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }

      .header-logo {
        width: 60px;
        height: 60px;
      }

      .site-title {
        font-size: 1.2rem;
      }

      .site-subtitle {
        font-size: 0.8rem;
      }

      .main-nav {
        gap: 6px;
      }

      .main-nav a {
        font-size: 0.75rem;
        padding: 4px 8px;
      }

      .header-player {
        flex-direction: column;
        align-items: flex-start;
      }

      .header-player-extra {
        align-items: flex-start;
      }
    }

    .controls-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 14px 0 10px;
      align-items: flex-end;
    }

    .controls-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1;
    }

    .controls-group label {
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #4b5563;
    }

    .controls-group input,
    .controls-group select {
      font: inherit;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.8);
      padding: 6px 10px;
      outline: none;
      background: #f9fafb;
      color: #111827;
      min-width: 0;
    }

    .controls-group input:focus,
    .controls-group select:focus {
      border-color: #4f46e5;
      box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.5);
      background: #ffffff;
    }

    #reset-filters {
      align-self: flex-start;
      margin-top: 16px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.9);
      background: #ffffff;
      color: #374151;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease-in-out;
    }

    #reset-filters:hover {
      background: #f3f4f6;
    }

    .status {
      margin: 6px 0 10px;
      font-size: 0.78rem;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 2px solid rgba(148, 163, 184, 0.9);
      background: rgba(248, 250, 252, 0.7);
    }

    .status-error {
      color: #b91c1c;
    }

    .status-error::before {
      border-color: #ef4444;
      background: rgba(254, 242, 242, 0.9);
    }

    .counters-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 4px 0 10px;
    }

    .counter-pill {
      font-size: 0.72rem;
      color: #374151;
      border-radius: 999px;
      padding: 4px 9px;
      background: #e5e7eb;
      border: 1px solid rgba(148, 163, 184, 0.7);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .episodes-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
      gap: 14px;
      align-items: flex-start;
      margin-top: 10px;
    }

    .episodes-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .episode-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      padding: 9px 11px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      cursor: pointer;
      transition: all 0.15s ease-in-out;
      position: relative;
      overflow: hidden;
    }

    .episode-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.06), transparent 55%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease-out;
    }

    .episode-card:hover::before {
      opacity: 1;
    }

    .episode-card:hover {
      border-color: rgba(79, 70, 229, 0.9);
      box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
      transform: translateY(-1px);
    }

    .episode-card.is-selected {
      border-color: rgba(22, 163, 74, 0.95);
      box-shadow:
        0 16px 36px rgba(22, 163, 74, 0.28),
        0 0 0 1px rgba(22, 163, 74, 0.5);
    }

    .episode-num {
      font-size: 0.76rem;
      font-weight: 700;
      color: #6b7280;
      background: #e5e7eb;
      border-radius: 999px;
      padding: 2px 8px;
      align-self: flex-start;
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .episode-main {
      min-width: 0;
    }

    .episode-title {
      font-size: 1rem;
      margin: 0 0 3px;
      color: #111827;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .episode-meta {
      font-size: 0.76rem;
      margin: 0 0 4px;
      color: #4b5563;
    }

    .episode-desc {
      margin: 0;
      font-size: 0.84rem;
      color: #4b5563;
    }

    .instrucciones {
      padding: 10px 11px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 12px;
      border: 1px dashed rgba(148, 163, 184, 0.9);
      font-size: 0.86rem;
      color: #374151;
    }

    .instrucciones h2 {
      margin-top: 0;
      margin-bottom: 6px;
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #111827;
    }

    .instrucciones ul {
      padding-left: 18px;
      margin: 0;
    }

    .instrucciones li + li {
      margin-top: 3px;
    }

    .podcast-description {
      font-size: 0.9rem;
      color: #374151;
      margin: 10px 0 14px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #f3f4f6;
      border: 1px solid rgba(148, 163, 184, 0.6);
    }

    footer {
      margin-top: 28px;
      padding-top: 12px;
      border-top: 1px solid rgba(148, 163, 184, 0.5);
      font-size: 0.78rem;
      color: #6b7280;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: space-between;
    }

    footer a {
      color: #4f46e5;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    @media (max-width: 800px) {
      .episodes-layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .episodes-list {
        order: 1;
      }

      .instrucciones {
        order: 2;
      }
    }

    @media (max-width: 600px) {
      .shell {
        padding: 10px 10px 20px;
      }

      .episode-card {
        grid-template-columns: minmax(0, 1fr);
      }

      .episode-num {
        align-self: stretch;
        text-align: center;
        margin-bottom: 4px;
      }
    }

/* --- From historico.php (y blog antiguo, tal como lo tenías) --- */
/* (mantuve tus reglas existentes, solo he corregido .post-card que estaba roto
   y he añadido el bloque final global que viene abajo) */

/* FIX del bloque .post-card roto + blog */
.empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 18px;
}

/* BLOG: LISTADO (blog/index.php) */

.blog-main {
  margin-top: 12px;
}

.blog-hero {
  margin-bottom: 16px;
}

.blog-hero h1 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #111827;
}

.blog-hero p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

/* Contenedor de lista de posts */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Tarjeta de post en la lista */
.post-card {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  align-items: flex-start;
}

.post-card-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.post-card-main {
  flex: 1;
  min-width: 0;
}

/* Título de cada post en el listado: siempre negro y en negrita */
.post-card-title {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 800;
}

.post-card-title a,
.post-card-title a:visited {
  color: #000000;
  font-weight: 800;
  text-decoration: none;
}

.post-card-title a:hover,
.post-card-title a:focus {
  color: #000000;
  text-decoration: underline;
}

.post-card-meta {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: #6b7280;
}

.post-card-excerpt {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #374151;
}

.post-card-tags {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

/* Tags del listado: gris claro, con hover visible y sin morado */
.post-card-tags a,
.post-card-tags a:visited {
  color: #d4d4d4;
  text-decoration: none;
}

.post-card-tags a:hover,
.post-card-tags a:focus {
  color: #e5e5e5;
  text-decoration: underline;
}

/* BLOG: POST INDIVIDUAL (blog/post.php) */
.post-full {
  margin-top: 12px;
}

.post-full-header {
  margin-bottom: 12px;
}

.post-full-date {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: #6b7280;
}

.post-full-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
}

.post-full-summary {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #374151;
}

.post-full-image {
  margin: 1.5rem 0;
}

.post-full-image img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 8px;
  display: block;
}

.post-full-body p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: #111827;
}

.post-tags {
  margin: 1rem 0;
}

.post-tags a,
.post-tags a:visited {
  color: #cf0e0e;
  text-decoration: none;
}

.post-tags a:hover,
.post-tags a:focus {
  color: #cf0e0e;
  text-decoration: underline;
}

.back-link {
  margin-top: 16px;
  font-size: 0.85rem;
}

/* === FILTROS: alineación perfecta (histórico / index) === */
.controls-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 10px;
}

/* Móvil: reposicionado limpio */
@media (max-width: 650px) {
    .controls-row {
        flex-wrap: wrap;
    }
}

/* === ENLACES GLOBALES (toda la web) === */
a,
a:visited {
  color: #091f04;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #091f04;
  text-decoration: underline;
}

/* Paginación del histórico */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.pagination-controls button {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.pagination-controls button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#page-status {
  font-size: 0.95rem;
  color: #111827;
}

.page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: #4b5563;
}

#page-size {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
}

/* === Estilos específicos de la página de histórico (migrados y limpios) === */

body.historico-page #history-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body.historico-page #history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body.historico-page #history-table thead {
  background: linear-gradient(90deg, #111827, #1f2937);
  color: #f9fafb;
}

body.historico-page #history-table thead th {
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(148, 163, 184, 0.7);
  position: relative;
  cursor: pointer;
  user-select: none;
}

body.historico-page #history-table thead th.col-ep {
  width: 60px;
  text-align: right;
}

body.historico-page #history-table thead th.col-date {
  width: 110px;
}

body.historico-page #history-table thead th.col-title {
  min-width: 180px;
}

body.historico-page #history-table thead th.col-band,
body.historico-page #history-table thead th.col-song {
  min-width: 160px;
}

/* Indicadores de orden cuando JS añade las clases */
body.historico-page #history-table th.sort-asc::after,
body.historico-page #history-table th.sort-desc::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #f9fafb;
  border-bottom: 2px solid #f9fafb;
  transform-origin: center;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.9;
}

body.historico-page #history-table th.sort-desc::after {
  transform: translateY(-50%) rotate(-135deg);
}

body.historico-page #history-table tbody tr:nth-child(odd) {
  background: #f9fafb;
}

body.historico-page #history-table tbody tr:nth-child(even) {
  background: #ffffff;
}

body.historico-page #history-table tbody tr:hover {
  background: var(--accent-soft, rgba(22, 163, 74, 0.08));
}

body.historico-page #history-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9);
  color: var(--text-main, #111827);
  vertical-align: top;
}

body.historico-page #history-table tbody tr:last-child td {
  border-bottom: none;
}

body.historico-page #history-table tbody td.col-ep {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

body.historico-page #history-table tbody td.col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #4b5563;
}

/* Botón "Limpiar filtros" y contadores */
body.historico-page #btn-clear {
  align-self: flex-start;
  margin-top: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: #ffffff;
  color: #374151;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition:
    background 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    transform 0.1s ease-in-out;
}

body.historico-page #btn-clear::before {
  content: "×";
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
}

body.historico-page #btn-clear:hover,
body.historico-page #btn-clear:focus-visible {
  background: #f3f4f6;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

body.historico-page #btn-clear:focus-visible {
  outline: 2px solid var(--accent, #16a34a);
  outline-offset: 2px;
}

body.historico-page .counter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

@media (max-width: 640px) {
  body.historico-page #history-table thead th {
    font-size: 0.78rem;
    padding: 6px 8px;
  }

  body.historico-page #history-table tbody td {
    font-size: 0.78rem;
    padding: 6px 8px;
  }
}

/* === Responsive HOME FIX (player + page-tags + padding) === */

/* Player: siempre adaptado al contenedor */
.home-top iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px;
}

/* Contenedor del player (si existe) */
.home-top .player-wrapper {
  width: 100%;
  overflow: hidden;
}

/* Bloque de 'píldoras' dentro del index.php */
.page-tags {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 0;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.page-tags a {
  flex: 0 0 auto;
}

/* Ajuste de lectura en móviles */
@media (max-width: 600px) {
  .podcast-description {
    padding: 8px 10px;
    line-height: 1.45;
  }

  .home-top img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ==== Formulario de contacto (forzado por URL) ==== */

form[action="/contacto.php"],
form[action="contacto.php"] {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

form[action="/contacto.php"] .form-row,
form[action="contacto.php"] .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

form[action="/contacto.php"] label,
form[action="contacto.php"] label {
  font-size: 0.9rem;
  font-weight: 500;
}

form[action="/contacto.php"] input[type="text"],
form[action="/contacto.php"] input[type="email"],
form[action="/contacto.php"] textarea,
form[action="contacto.php"] input[type="text"],
form[action="contacto.php"] input[type="email"],
form[action="contacto.php"] textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #cbd0d6;
  background: #ffffff;
  font: inherit;
}

form[action="/contacto.php"] textarea,
form[action="contacto.php"] textarea {
  min-height: 140px;
  resize: vertical;
}

form[action="/contacto.php"] .form-note,
form[action="contacto.php"] .form-note {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #555;
}

form[action="/contacto.php"] button[type="submit"],
form[action="contacto.php"] button[type="submit"] {
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #cbd0d6;
  background: #ffffff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

form[action="/contacto.php"] button[type="submit"]:hover,
form[action="contacto.php"] button[type="submit"]:hover {
  background: #f0f0f0;
}