:root {
  /* Solo la variable que nos interesa */
  --header-bg-color: #ffffff;
  --page-bg-color: transparent;
  --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;
}

/* 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) !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,
.content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Imágenes inline (dentro de párrafos) - mantener display inline-block */
p img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  vertical-align: middle;
}

/* 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 {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Párrafos con imágenes - centrar y contener */
.page-body p:has(img),
.post-content p:has(img),
.page-content-wrapper p:has(img) {
  text-align: center;
  overflow: 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 {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Contenedor principal - asegurar que el contenido esté delimitado */
.page-container,
.has-slider-content,
.container.py-4 {
  max-width: 100%;
  box-sizing: border-box;
}

/* Main - NO aplicar overflow hidden para permitir sliders full-width */
main {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===============================================
   CONTENIDO DE PÁGINA - LÍMITES Y CONTENCIÓN
   =============================================== */

/* Asegurar que el contenido de la página esté correctamente contenido */
.page-body {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Múltiples imágenes en línea - asegurar que se ajusten al contenedor */
.page-body p img,
.post-content p img,
.page-content-wrapper p img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
}

/* Contenedor de artículo */
.page-content-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 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
   =============================================== */

/* === H1 - Título de página === */
.page-content h1,
.page-body h1,
.page-content-wrapper h1,
.page-title,
article h1:first-child {
  font-size: 2rem !important; /* 32px - más pequeño que el default */
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0 !important;
  margin-bottom: 2rem !important; /* 32px - más espacio antes del contenido */
  padding-bottom: 1rem; /* Espacio adicional visual */
  border-bottom: 1px solid rgba(0,0,0,0.08); /* Línea sutil de separación */
}

/* H1 dentro del contenido (no el título principal) */
.page-body h1:not(:first-child),
.page-content h1:not(:first-child) {
  font-size: 1.75rem !important; /* 28px */
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0;
  border-bottom: none;
}

/* === 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 de sección === */
.page-content h2,
.page-body h2,
.content h2,
article h2 {
  font-size: 1.5rem !important; /* 24px - más pequeño */
  margin-top: 2.5rem !important; /* 40px - clara separación */
  margin-bottom: 1rem !important; /* 16px */
  font-weight: 600;
  line-height: 1.4;
  color: #1a2a40;
}

.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 {
  font-size: 1.25rem !important; /* 20px */
  margin-top: 1.75rem !important; /* 28px */
  margin-bottom: 0.75rem !important; /* 12px */
  font-weight: 600;
  line-height: 1.4;
  color: #333;
}

.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;
}