:root {
  /* Solo la variable que nos interesa */
  --header-bg-color: #ffffff;
  --page-bg-color: #f3f4f6;
  --footer-padding-y: 40px;

  /* Variables del Hero */
  --hero-title-color: #ffffff;
  --hero-title-font: inherit;
  --hero-subtitle-color: #ffffff;
  --hero-overlay-color: #000000;
  --hero-overlay-opacity: 0.5;

  /* Tipografía del contenido (defaults — se sobreescriben via custom.css del tenant) */
  --content-heading-font: inherit;
  --content-body-font: inherit;
  --content-h1-size: 36px;
  --content-h2-size: 28px;
  --content-h3-size: 24px;
  --content-h4-size: 20px;
  --content-h5-size: 18px;
  --content-h6-size: 16px;
  --content-body-size: 16px;
  --content-line-height: 1.7;
  --content-text-color: #334155;
  --content-heading-color: #0f172a;
  --content-link-color: #3b82f6;
}

/* Aplicación de la variable al elemento HTML correcto */
.header-bottom {
  background-color: var(--header-bg-color);
}

/* Fondo general (a todo lo ancho) */
body {
  background-color: var(--page-bg-color);
}

/* Header spacing */
.musedock-header {
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
}
/* Layouts con filas (logo + menú debajo): deben ser block, no flex */
.musedock-header.header-layout-logo-above,
.musedock-header.header-layout-logo-above-left,
.musedock-header.header-layout-filmconnect,
.musedock-header.header-layout-floating {
  display: block !important;
  min-height: auto !important;
}

/* Footer más compacto */
.footer-area.footer-padding {
  padding-top: var(--footer-padding-y) !important;
  padding-bottom: var(--footer-padding-y) !important;
}

/* Estilos para widget de categorías - forzar color negro en todos los estados */
.widget-blog-categories a,
.widget-blog-categories a:link,
.widget-blog-categories a:visited,
.widget-blog-categories a:hover,
.widget-blog-categories a:active {
  color: #000 !important;
}

.widget-blog-categories h5 {
  color: #000 !important;
  font-size: 14px !important;
}

/* Reducir espacio entre widgets del sidebar */
.sidebar .widget,
.sidebar [class*="widget"] {
  margin-bottom: 15px !important;
}

.sidebar .widget:last-child,
.sidebar [class*="widget"]:last-child {
  margin-bottom: 0 !important;
}

/* Hacer imágenes responsivas en TODO el contenido */
.page-body img,
.post-content img,
.page-content-wrapper img,
.blog-post-single img,
article img,
main img,
.content img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

/* Centrar imágenes block dentro de párrafos con text-align: center (TinyMCE pattern) */
p[style*="text-align: center"] img,
p[style*="text-align:center"] img,
.text-center img {
  margin-left: auto;
  margin-right: auto;
}

/* WordPress-style alignment classes */
/* aligncenter DESPUÉS de alignnone para que gane por cascada cuando coexisten */
.alignnone { display: inline-block !important; vertical-align: middle; }
.alignleft { float: left; margin: 0 15px 10px 0; }
.alignright { float: right; margin: 0 0 10px 15px; }
.aligncenter { display: block !important; margin-left: auto !important; margin-right: auto !important; }

/* Enlaces que envuelven imágenes inline — no cambiar su display */
p a:has(> img.alignnone) { display: inline; }

/* WordPress size classes — con !important para ganar contra la regla global */
img.size-medium { max-width: 300px !important; }
img.size-thumbnail { max-width: 150px !important; }
img.size-small { max-width: 200px !important; }
img.size-large { max-width: 1024px !important; }

/* Asegurar que los párrafos contenedores también sean responsivos */
.page-body p,
.post-content p,
.page-content-wrapper p,
.blog-post-single p,
article p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Asegurar que iframes y videos también sean responsivos */
.page-body iframe,
.post-content iframe,
.page-content-wrapper iframe,
.blog-post-single iframe,
article iframe,
.container iframe,
main iframe,
.content iframe,
.page-body video,
.post-content video,
.page-content-wrapper video,
.blog-post-single video,
article video,
.container video,
main video,
.content video {
  max-width: 100% !important;
  height: auto !important;
}

/* Prevenir overflow horizontal en contenido */
.page-body,
.post-content,
.page-content-wrapper,
.blog-post-single,
article,
.container,
main {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* EXCEPCIÓN: Permitir overflow visible cuando hay slider a sangre (full-width) */
/* El wrapper del slider necesita salirse del contenedor para ocupar todo el viewport */
html:has(.slider-full-width-wrapper),
body:has(.slider-full-width-wrapper),
.page-body:has(.slider-full-width-wrapper),
.post-content:has(.slider-full-width-wrapper),
.page-content-wrapper:has(.slider-full-width-wrapper),
article:has(.slider-full-width-wrapper),
.container:has(.slider-full-width-wrapper),
main:has(.slider-full-width-wrapper) {
  overflow-x: visible !important;
}

/* Asegurar que el contenedor directo del slider permita el overflow */
.page-body > .slider-full-width-wrapper,
.post-content > .slider-full-width-wrapper,
.page-content-wrapper > .slider-full-width-wrapper,
.container > .slider-full-width-wrapper {
  position: relative;
  z-index: 10;
}

/* Cuando hay slider a sangre, eliminar el margen superior del contenedor */
/* para que el slider quede pegado al header */
.container:has(.slider-full-width-wrapper:first-child),
.page-container:has(.slider-full-width-wrapper:first-child),
.page-body:has(.slider-full-width-wrapper:first-child),
main:has(.slider-full-width-wrapper:first-child) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Si el slider a sangre es el primer elemento dentro del page-body */
.page-body > .slider-full-width-wrapper:first-child {
  margin-top: 0 !important;
}

/* Eliminar padding del container.py-4 cuando tiene slider a sangre como primer hijo */
.container.py-4:has(> article > .page-body > .slider-full-width-wrapper:first-child),
.container.py-4:has(> .page-content-wrapper > .page-body > .slider-full-width-wrapper:first-child) {
  padding-top: 0 !important;
}

/* FORZAR: Cuando hay slider a sangre, eliminar TODO el espacio superior */
.has-full-width-slider,
.has-slider-content.has-full-width-slider,
.container.has-full-width-slider {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Main sin margen cuando tiene slider a sangre */
main:has(.slider-full-width-wrapper) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Article y page-body sin margen cuando tienen slider a sangre */
article:has(.slider-full-width-wrapper),
.page-content-wrapper:has(.slider-full-width-wrapper),
.page-body:has(.slider-full-width-wrapper) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Header sin borde inferior cuando la siguiente sección tiene slider a sangre */
.musedock-header:has(+ main .slider-full-width-wrapper),
header:has(+ main .slider-full-width-wrapper) {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Eliminar cualquier espacio entre header y main */
body:has(.slider-full-width-wrapper) .musedock-header,
body:has(.slider-full-width-wrapper) header {
  margin-bottom: 0 !important;
}

body:has(.slider-full-width-wrapper) main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Asegurar que tablas también sean responsivas */
/* Tablas del contenido — responsivas con scroll horizontal en móvil */
.page-body table,
.post-content table,
.page-content-wrapper table,
.blog-post-single table,
article table,
.container table,
main table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Tablas de Google Sheets con col width fijo — override para que sean fluidas */
.page-body table col,
.post-content table col,
article table col {
  width: auto !important;
}

.page-body table td,
.post-content table td,
article table td,
.page-body table th,
.post-content table th,
article table th {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
}

/* Responsive: en móvil, scroll horizontal si la tabla no cabe */
@media (max-width: 768px) {
  .page-body,
  .post-content,
  .page-content-wrapper,
  .blog-post-single,
  article .entry-content {
    overflow-x: auto;
  }

  .page-body table,
  .post-content table,
  .page-content-wrapper table,
  .blog-post-single table,
  article table {
    min-width: 600px;
  }

  .page-body table td,
  .post-content table td,
  article table td,
  .page-body table th,
  .post-content table th,
  article table th {
    padding: 6px 8px;
    font-size: 14px;
  }
}

/* Media query específica para móviles - Forzar imágenes responsivas */
@media (max-width: 991px) {
  img,
  .page-body img,
  .post-content img,
  .page-content-wrapper img,
  .blog-post-single img,
  article img,
  .container img,
  main img,
  p img,
  div img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ===============================================
   TIPOGRAFÍA DEL CONTENIDO (variables CSS del tenant)
   =============================================== */

.page-content,
.page-body,
.post-content,
.page-content-wrapper,
article .entry-content {
  font-family: var(--content-body-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: var(--content-body-size, 16px);
  line-height: var(--content-line-height, 1.7);
  color: var(--content-text-color, #334155);
}

.page-content h1, .page-body h1, .post-content h1, article h1 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h1-size, 36px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.page-content h2, .page-body h2, .post-content h2, article h2 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h2-size, 28px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 700;
  line-height: 1.3;
}

.page-content h3, .page-body h3, .post-content h3, article h3 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h3-size, 24px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 600;
  line-height: 1.4;
}

.page-content h4, .page-body h4, .post-content h4, article h4 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h4-size, 20px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 600;
  line-height: 1.4;
}

.page-content h5, .page-body h5, .post-content h5, article h5 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h5-size, 18px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 600;
  line-height: 1.4;
}

.page-content h6, .page-body h6, .post-content h6, article h6 {
  font-family: var(--content-heading-font, inherit);
  font-size: var(--content-h6-size, 16px);
  color: var(--content-heading-color, #0f172a);
  font-weight: 600;
  line-height: 1.4;
}

.page-content a, .page-body a, .post-content a, article .entry-content a {
  color: var(--content-link-color, #3b82f6);
}

/* ===============================================
   ESPACIADO PROFESIONAL DE CONTENIDO
   =============================================== */

/* === PÁRRAFOS === */
.page-content p,
.page-body p,
.content p,
article p {
  margin-top: 0;
  margin-bottom: 1rem; /* 16px */
  line-height: var(--content-line-height, 1.7);
}

/* Eliminar párrafos vacíos completamente */
.page-content p:empty,
.page-body p:empty,
.content p:empty,
article p:empty {
  display: none !important;
}

/* === H2 - Títulos principales === */
.page-content h2,
.page-body h2,
.content h2,
article h2 {
  margin-top: 2.5rem !important; /* 40px - clara separación */
  margin-bottom: 1.25rem !important; /* 20px */
  font-weight: 700;
  line-height: 1.3;
}

.page-content h2:first-child,
.page-body h2:first-child,
.content h2:first-child {
  margin-top: 0 !important;
}

/* === H3 - Subsecciones === */
.page-content h3,
.page-body h3,
.content h3,
article h3 {
  margin-top: 2rem !important; /* 32px */
  margin-bottom: 1rem !important; /* 16px */
  font-weight: 600;
  line-height: 1.4;
}

.page-content h3:first-child,
.page-body h3:first-child,
.content h3:first-child {
  margin-top: 0 !important;
}

/* === HR - Separadores === */
.page-content hr,
.page-body hr,
.content hr,
article hr {
  margin: 1.5rem 0 !important; /* Espaciado consistente arriba y abajo */
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

/* HR seguido de título - reducir espaciado redundante */
.page-content hr + h2,
.page-body hr + h2,
.content hr + h2,
.page-content hr + h3,
.page-body hr + h3,
.content hr + h3 {
  margin-top: 1rem !important; /* Reducido porque HR ya da espacio */
}

/* === LISTAS === */
.page-content ul,
.page-body ul,
.content ul,
.page-content ol,
.page-body ol,
.content ol,
article ul,
article ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.page-content li,
.page-body li,
.content li,
article li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.page-content li:last-child,
.page-body li:last-child,
.content li:last-child {
  margin-bottom: 0;
}

/* Párrafos DENTRO de LI - sin margin extra */
.page-content li p,
.page-body li p,
.content li p,
article li p {
  margin: 0 !important;
}

/* === STRONG === */
.page-content strong,
.page-body strong,
.content strong {
  font-weight: 700;
  color: #333;
}

/* ===============================================
   ESTILOS DEL FOOTER
   =============================================== */

/* Eliminar decoración de enlaces en el footer - Máxima especificidad */
footer a,
footer .footer-area a,
footer .footer-tittle a,
footer .single-footer-caption a,
footer .footer-tittle ul li a,
.footer-area .footer-tittle a,
.footer-area a,
.footer-tittle a,
.single-footer-caption a,
.footer-tittle ul li a {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Mantener decoración solo en el enlace de configuración de cookies */
.cookie-settings-link a,
footer .cookie-settings-link a {
  text-decoration: underline !important;
}

/* Igualar tamaño de todos los títulos en el footer - Máxima especificidad */
footer .footer-tittle h4,
footer .single-footer-caption h4,
.footer-area .footer-tittle h4,
.footer-area .single-footer-caption h4,
.footer-tittle h4,
.single-footer-caption h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  color: var(--footer-heading-color, #333) !important;
}

/* ===============================================
   ESTILOS DEL HERO / SLIDER
   =============================================== */

/* Asegurar que el slider esté a sangre (full-width) */
.slider-area {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* Forzar que el slider llegue hasta los bordes */
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Eliminar cualquier margen del main cuando tiene slider */
main > .slider-area:first-child {
  margin-top: 0 !important;
}

/* Asegurar que el body y main no añadan espacio extra al slider */
main {
  padding-top: 0;
  margin-top: 0;
}

/* Forzar body sin margen para que slider esté a sangre */
body {
  margin: 0;
  padding: 0;
}

/* Asegurar posición relativa para el overlay */
.single-slider,
.slider-area .single-slider {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Título del hero - usa variables CSS */
.hero-cap h2,
.slider-area .hero-cap h2 {
  color: var(--hero-title-color, #ffffff) !important;
  font-family: var(--hero-title-font, inherit) !important;
}

/* Subtítulo del hero */
.hero-cap .hero-subtitle,
.slider-area .hero-cap .hero-subtitle,
.hero-cap p,
.slider-area .hero-cap p {
  color: var(--hero-subtitle-color, #ffffff) !important;
}

/* Overlay del hero (capa oscura sobre la imagen) */
.single-slider::before,
.slider-area .single-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--hero-overlay-color, #000000);
  opacity: var(--hero-overlay-opacity, 0.5);
  z-index: 1;
}

/* Asegurar que el contenido del hero esté encima del overlay */
.single-slider .container,
.slider-area .single-slider .container {
  position: relative;
  z-index: 2;
}

/* ===============================================
   LAYOUT CLASSIC: Topbar con menú + logo debajo
   =============================================== */
.header-layout-classic {
  display: block !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* --- Topbar: menú + iconos sociales --- */
.classic-topbar {
  background: var(--header-bg-color, #1a1a1a);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0;
}
.classic-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

/* Menu inside topbar */
.classic-topbar-nav {
  flex: 1;
  min-width: 0;
}
.classic-topbar-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.classic-topbar-nav > ul > li > a {
  display: block;
  padding: 12px 18px;
  color: var(--header-link-color, #ccc) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--header-menu-font, inherit) !important;
  transition: color 0.2s, background 0.2s;
}
.classic-topbar-nav > ul > li > a:hover,
.classic-topbar-nav > ul > li.current-menu-item > a {
  color: var(--header-link-hover-color, #ff5e15) !important;
  background: rgba(255,255,255,0.05);
}

/* Dropdown indicator */
.classic-topbar-nav > ul > li:has(> .submenu) > a::after {
  content: " \25BE";
  font-size: 0.65em;
  margin-left: 4px;
  opacity: 0.5;
}

/* Submenu dropdown */
.header-layout-classic .main-navigation .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--header-bg-color, #222);
  min-width: 220px;
  padding: 8px 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: none;
  z-index: 1000;
}
.header-layout-classic .main-navigation .submenu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
  z-index: 0;
}
.header-layout-classic .main-navigation li {
  position: relative;
}
.header-layout-classic .main-navigation li:hover > .submenu {
  display: block;
}
.header-layout-classic .main-navigation .submenu li {
  position: relative;
  z-index: 1;
}
.header-layout-classic .main-navigation .submenu a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  color: var(--header-link-color, #ccc) !important;
  text-decoration: none !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  transition: background 0.15s, color 0.15s;
}
.header-layout-classic .main-navigation .submenu a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--header-link-hover-color, #ff5e15) !important;
}

/* Nested submenus */
.header-layout-classic .main-navigation .submenu .submenu {
  top: 0;
  left: 100%;
}

/* Right side: social icons */
.classic-topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.classic-topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 44px;
  color: var(--header-link-hover-color, #ff5e15) !important;
  text-decoration: none !important;
  font-size: 14px;
  transition: color 0.2s, background 0.2s;
}
.classic-topbar-social a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff !important;
}
.classic-topbar-cta {
  font-size: 11px !important;
  padding: 5px 14px !important;
  margin-right: 8px;
}

/* --- Brand bar: logo left --- */
.classic-brand {
  background: #fff;
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.classic-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;
  color: inherit !important;
}
.classic-brand-link .header-brand-logo {
  display: block;
  width: auto;
}
.classic-brand-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.classic-brand-tagline {
  margin-top: 4px;
  font-size: 13px;
  color: #888;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .classic-topbar-nav { display: none; }
  .classic-topbar-social { display: none; }
  .classic-topbar-right .lang-select { display: none; }
  .classic-topbar-right .classic-topbar-cta { display: none; }
  .classic-topbar .menu-toggle { display: block; }
  .classic-brand { padding: 16px 0; text-align: center; }
  .classic-brand .container { display: flex; justify-content: center; }
}
@media (min-width: 992px) {
  .classic-topbar .menu-toggle { display: none !important; }
}