:root {
  --topbar-bg-color: #1a2a40;
  --topbar-text-color: #ffffff;
  --hero-title-color: #ffffff;
  --hero-title-font: inherit;
  --hero-subtitle-color: #ffffff;
  --hero-overlay-color: #000000;
  --hero-overlay-opacity: 0.5;
  --header-bg-color: #f8f9fa;
  --header-logo-text-color: #1a2a40;
  --header-logo-font: 'Montserrat', sans-serif;
  --header-link-color: #333333;
  --header-link-hover-color: #ff5e15;
  --header-cta-bg-color: #ff5e15;
  --header-cta-text-color: #ffffff;
  --footer-bg-color: #d8e1f3;
  --footer-text-color: #000000;
  --footer-heading-color: #333333;
  --footer-link-color: #333333;
  --footer-link-hover-color: #ff5e15;
  --footer-icon-color: #333333;
  --footer-border-color: #c1cce1;
}


/* 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 más compacto */
.musedock-header {
  padding-top: var(--header-padding-y, 15px) !important;
  padding-bottom: var(--header-padding-y, 15px) !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 - Aplicación global */
/* Forzar max-width para sobrescribir atributos width/height inline del HTML */
.page-body img,
.post-content img,
.page-content-wrapper img,
.blog-post-single img,
article img,
.container img,
main img,
.content img,
p img,
div img,
img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Resetear width inline en imágenes con atributos width/height */
.page-body img[width],
.post-content img[width],
.page-content-wrapper img[width],
.blog-post-single img[width],
article img[width],
.container img[width],
main img[width],
p img[width],
div img[width],
img[width] {
  width: auto !important;
  max-width: 100% !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,
.container p {
  max-width: 100%;
  overflow-x: hidden;
}

/* 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 */
.page-body table,
.post-content table,
.page-content-wrapper table,
.blog-post-single table,
article table,
.container table,
main table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* 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;
    width: auto !important;
    height: auto !important;
  }

  img[width],
  img[height] {
    width: auto !important;
    height: auto !important;
  }
}

/* ===============================================
   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: 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;
}


/* --- CSS Personalizado --- */
/* Ejemplos:
.header-bottom {
  background-color: #ff0000 !important;
}

.footer-area h4 {
  color: #00ff00 !important;
}
*/