(no basta con la herencia desde body): plugins.css define "body{color:#3c4043}" sin !important, así que en teoría lo de arriba ya gana, pero el color de la web no llegaba a los párrafos. */ p{ color: var(--body-text-color) !important; } /* Color hover genérico de enlaces (Otras configuraciones > Personalización > "Color hover"): la plantilla trae "a:hover{color:#1d44d6}" fijo (ver style.css), sin relación con los colores configurados de la web. No afecta a botones/insignias con su propio hover (.boton1, .boton2, .btn-resultados-clasificacion...), que al llevar selector de clase ganan por especificidad. */ a:hover{ color: var(--body-hover-color) !important; } /* La plantilla fija "section{background-color:#fff}" (ver style.css), lo que tapa el background configurado de la web en las páginas secundarias (resultados, ...): su contenido vive dentro de un

normal, sin fondo propio como sí tienen los bloques de la portada. */ .pagina-resultados-contenido{ background-color: transparent !important; } /* Corrige un problema de orden en plugins.css: ahí ".col-12{flex:0 0 auto; width:100%}" aparece DESPUÉS de ".col-md{flex:1 0 0%}" dentro de su @media, así que con igual especificidad gana ".col-12" y una columna "col-12 col-md" se queda a ancho completo incluso en escritorio. Como este fichero se carga después de plugins.css, esta regla reafirma el comportamiento correcto de Bootstrap (auto-reparto a partir de 768px). */ @media (min-width: 768px) { .col-md { flex: 1 0 0%; } } body .body-inner { /* El ahora es negro fijo (letterboxing fuera de los 2400px); sin un fondo propio aquí, cualquier hueco "transparente" dentro del contenido (p.ej. ".pagina-resultados-contenido", pensada para dejar ver el color configurado de la web) dejaba ver ese negro en su lugar. */ background-color: var(--body-bg-color); max-width: 2400px; margin: auto; flex: 1 0 auto; width: 100%; } /* Todas las secciones (get_base_seccion(), clase siempre presente: "bloque_N" en páginas normales, "bloque_pie_N" en las del pie) limitadas a 2400px de ancho, centradas. Cubre tanto las que viven dentro de ".body-inner" (ya limitado a 2400px, así que aquí es redundante pero inofensivo) como las del pie de página (html_pie_pagina()), que se pintan fuera de ".body-inner" como hermanas directas de (necesario para el footer sticky) y por tanto no heredaban ese límite: sin esto su fondo se estiraba hasta el borde de la ventana en pantallas muy anchas aunque su contenido interior (".container", 1340px) sí quedara centrado. */ .bloque_datos { max-width: 2400px; width: 100%; margin-left: auto; margin-right: auto; } /* El header vive fuera de .body-inner (suele ir fixed/full-width), así que sin esto se estira a todo el ancho de pantalla mientras el resto del contenido queda centrado con el mismo max-width de arriba. */ #header .header-inner { max-width: 2400px; margin-left: auto; margin-right: auto; } /* Capa superior del "container" de un bloque (independiente de la capa de la sección, que usa .bg-overlay). Sin mix-blend-mode a propósito: dentro del container esa mezcla no se pintaba de forma fiable. */ .container-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; } /* Capa superior de la SECCIÓN de un bloque (capa_superior sobre imagen_fondo en get_base_seccion). Misma idea que .container-overlay: .bg-overlay lleva mix-blend-mode:multiply vía ".bloque_datos .bg-overlay", pensado para un tinte artístico, pero eso impide que la capa cubra del todo la imagen aunque se ponga opacidad 100% (multiply nunca oculta, solo oscurece). Con una clase propia sin blend-mode la opacidad se comporta como una tapadera normal. */ .section-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; } #overlay-trans { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0; z-index: 1; opacity:0.5; } .container { max-width: var(--container-width); } #fondo_color{ position: relative; z-index: 1; } #topbar img{ height: auto; } .w-30{ width: 30% !important; } .w-40{ width: 40% !important; } /* Evita que cualquier elemento que se salga del ancho de la sección (sombras, formas decorativas, columnas con márgenes negativos, etc.) provoque scroll horizontal en la página. */ .bloque_datos{ overflow-x: hidden; } #portada-section .container .portada{ margin-top: 30px; border-radius: 50px; } #portada-section .margen{ margin: 0px 25px; } #portada-section .margen .portada{ border-radius: 60px 0 0 0; } /* La capa de opacidad (.bg-overlay, ver html_capa_portada()) por defecto ocupa el 100% del alto/ancho de su contenedor (ver .bg-overlay en style.css). Con "Margen lateral" la limitamos a un recuadro más pequeño, igual que ya se hace con .overlay-left .bg-overlay para "capa_posicion", pero con sus propias proporciones. top:0 y bottom:0 ya vienen heredados de .bg-overlay; al fijar aquí una altura, el trío top+height+bottom queda sobrerrestringido y bottom se ignora, así que la capa queda anclada arriba con un hueco debajo en vez de estirarse hasta abajo. */ #portada-section .margen .bg-overlay { height: 100%; border-radius: 0 0 706px 0; max-width: 650px; } @media screen and (max-width: 768px) { #portada-section .margen{ margin: 0px 15px; } #portada-section .margen .portada{ border-radius: 30px 0 0 0; } /* En móvil la capa necesita su propio tamaño (no el heredado de escritorio, pensado para una portada mucho más ancha): más baja y ocupando casi todo el ancho, en vez de un recuadro estrecho y muy alto. */ #portada-section .margen .bg-overlay { height: 72%; max-width: 90%; border-radius: 0 0 280px 0; } /* El tema no trae un reset global de imágenes responsivas (solo lo aplica quien use la clase ".img-fluid" de Bootstrap explícitamente), así que cualquier con un ancho intrínseco mayor que la pantalla se salía de su contenedor en móvil. */ img { max-width: 100%; height: auto; } /* Primer container de cada sección (ver get_base_seccion() en funciones_html.php): en móvil, px-3 (mismo valor que la utilidad de Bootstrap). Scope a ".bloque_datos > .container" (hijo directo) para no afectar a containers anidados más adentro del contenido del bloque, ni a otros .container del sitio (header, portada, topbar...). */ .bloque_datos > .container { padding-left: 1rem; padding-right: 1rem; } } .inspiro-slider.dots-creative .flickity-page-dots .is-selected, .carousel.dots-creative .flickity-page-dots .is-selected, .flickity-button:hover, .inspiro-slider.dots-creative .flickity-page-dots .dot:after, .carousel.dots-creative .flickity-page-dots .dot:after{ background-color: var(--body-items-color) !important; } #header.sombra{ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } .top-menu i{ opacity: 50%; } #mainMenu > .container > nav > ul > li > a { padding: 10px 8px; font-weight: var(--menu-font-weight); letter-spacing: var(--menu-letter-spacing); text-transform: none; } /* Mismos selectores que abajo pero SIN ".container" en la cadena (a propósito): con ".container" esta regla quedaba más específica que la de html_header() (font-size: menu_size !important), que va después en el documento pero con una especificidad ligeramente menor — y por especificidad, no por orden, esta ganaba siempre pase lo que pase, dejando fijo el tamaño "de fábrica" de la tipografía (--menu-font-size) en vez del "Tamaño fuente" configurado en el admin. Igualando la especificidad, vuelve a decidir el orden y gana la de html_header(); esta se queda solo de red de seguridad por si esa variable no llegara a definirse. */ #mainMenu nav > ul > li > a, #header .item-menu a > i, #mainMenu nav > ul > li .dropdown-menu > li > a, #mainMenu button, #mainMenu nav > ul > li:hover > a, #header .header-extras nav > ul > li a { font-size: var(--menu-font-size) !important; } /* Submenú de opciones (#mainMenu nav > ul > li .dropdown-menu): su "top:auto" de fábrica (style.css) posiciona el desplegable donde caería en el flujo normal justo después del de la opción, y ese lleva un min-height igual a la altura configurada del menú (@media min-width:1025px, ver html_header()); con una altura de menú grande, el punto de esa caída queda muy por debajo del propio , no pegado a su borde inferior. Fijar top:100% lo ancla de forma determinista al borde inferior de la opción de menú (su

, que ya es position:relative en style.css), sea cual sea la altura configurada. */ #mainMenu nav > ul > li .dropdown-menu { top: 100% !important; } /* El logo, header-extras, mainMenu-trigger y el