@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --cassiopeia-color-primary: #F2B134;
  --cassiopeia-color-hover: #FFD27A;
  --cassiopeia-color-link: #F2B134;
  --bs-body-bg: #101418;
  --bs-body-color: #F2EFE8;
  --bs-link-color: #F2B134;
  --bs-link-hover-color: #FFD27A;
}

body {
  background: #101418;
  color: #F2EFE8;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .page-header h1, .page-header h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  color: #F2EFE8;
}

a { color: #F2B134; }
a:hover { color: #FFD27A; }

/* Cabecera */
.container-header {
  background-color: #101418;
  background-image: none;
  border-bottom: 1px solid #2A333B;
  box-shadow: none;
}
.container-header .navbar-brand,
.container-header .mod-menu a,
.container-header .mod-menu .nav-link {
  color: #F2EFE8;
}
.container-header .mod-menu a:hover,
.container-header .mod-menu .active > a {
  color: #F2B134;
}

/* Pie */
.container-footer {
  background-color: #101418;
  background-image: none;
  border-top: 1px solid #2A333B;
  color: #A9B3BC;
}

/* Tarjetas y módulos */
.card, .com-content-category-blog__item {
  background: #1A2026;
  border: 1px solid #2A333B;
  border-radius: 12px;
  color: #F2EFE8;
}

/* Formularios y buscador */
.form-control, .form-select, input[type="search"], input[type="text"] {
  background: #1A2026;
  color: #F2EFE8;
  border: 1px solid #3A4550;
  border-radius: 10px;
  min-height: 44px;
}
.form-control:focus {
  border-color: #F2B134;
  box-shadow: none;
}

/* Botones */
.btn-primary, button.btn {
  background: #F2B134;
  border-color: #F2B134;
  color: #101418;
  font-weight: 700;
  border-radius: 10px;
}
.btn-primary:hover { background: #FFD27A; border-color: #FFD27A; color: #101418; }
/* Portada PorreresTV */
.ptv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.ptv-hero { padding: 56px 0 40px; }
.ptv-eyebrow { color: #F2B134; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0 0 12px; }
.ptv-hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.05; max-width: 860px; margin: 0; }
.ptv-lead { color: #A9B3BC; font-size: 1.2rem; max-width: 620px; margin: 20px 0 28px; }
.ptv-search { display: flex; flex-wrap: wrap; gap: 12px; max-width: 620px; }
.ptv-search input { flex: 1; min-width: 220px; }
.ptv-search button { min-height: 44px; padding: 0 28px; border: 0; border-radius: 10px; background: #F2B134; color: #101418; font-weight: 700; }

.ptv-sec { padding: 40px 0; }
.ptv-sec h2 { font-size: 1.9rem; margin: 0 0 20px; }
.ptv-videos { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.ptv-side { display: flex; flex-direction: column; gap: 24px; }
.ptv-thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #26303A; border-radius: 12px; }
.ptv-videos h3 { font-size: 1.2rem; margin: 12px 0 2px; }
.ptv-meta { color: #A9B3BC; font-size: .9rem; }

.ptv-band { background: #171D23; padding: 48px 0; }
.ptv-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ptv-chips a { display: block; padding: 18px 20px; background: #1A2026; border: 1px solid #2A333B; border-radius: 10px; font-weight: 600; color: #F2EFE8; }
.ptv-chips a:hover { border-color: #F2B134; color: #F2B134; }

@media (max-width: 800px) { .ptv-videos { grid-template-columns: 1fr; } }
/* Submenú desplegable */
.container-header .mod-menu .mod-menu__sub,
.container-header .metismenu.mod-menu .mm-collapse {
  background-color: #1A2026;
  border: 1px solid #2A333B;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.container-header .mod-menu .mod-menu__sub li,
.container-header .metismenu.mod-menu .mm-collapse li {
  background-color: transparent;
}
.container-header .mod-menu .mod-menu__sub a,
.container-header .metismenu.mod-menu .mm-collapse li a {
  color: #F2EFE8;
}
.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .metismenu.mod-menu .mm-collapse li a:hover {
  color: #F2B134;
  background-color: #26303A;
}
/* Imágenes de las listas de artículos */
.blog-items img,
.com-content-category-blog__items img,
.com-content-featured__items img,
.item-image img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}
/* Videoteca en cuadrícula */
.com-content-category-blog__items.blog-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.com-content-category-blog__items.blog-items > * {
  margin: 0;
}
/* Videoteca: categorías en cuadrícula */
div:has(> .com-content-categories__item) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  div:has(> .com-content-categories__item) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  div:has(> .com-content-categories__item) {
    grid-template-columns: 1fr;
  }
}
/* Marca de la cabecera PorreresTV */
.container-header .navbar-brand .brand-logo {
  display: inline-flex;
  align-items: center;
  padding: .12em 0 .12em .38em;
  border-left: 4px solid #F2B134;
  color: #F2EFE8;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-decoration: none;
}
.container-header .navbar-brand .brand-logo:hover {
  color: #FFD27A;
  text-decoration: none;
}
.container-header .navbar-brand .brand-logo:focus-visible {
  outline: 2px solid #F2B134;
  outline-offset: 6px;
}