(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; } /* La plantilla fija "strong{font-weight:600}" (ver style.css): un peso semi-negrita que se nota poco sobre las fuentes de la web, muy por debajo del "bold" (700) que aplica el propio navegador en los editores del admin (TinyMCE) al marcar texto en negrita. Con esto el negrito se ve igual de grueso en la web que en el editor. */ strong, b{ font-weight: 700; } /* 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; } /* Enlaces insertados a mano dentro del contenido de un editor (TinyMCE: noticias, secciones de texto/pestañas/testimonios, portada...): sin esto se confundían con el texto normal (heredan --body-text-color y la plantilla les quita el subrayado por defecto, ver comentario de arriba). El color es una variación derivada del propio color de texto configurado (color-mix, sin necesidad de configurar un color adicional por web) y el subrayado es más fino que el del navegador para que no resulte agresivo. ".contenido-html" es la clase genérica añadida en funciones_html.php a los contenedores que no tenían ya una clase propia estable; el resto (.portada_texto, .noticia-detalle-cuerpo, .noticia-detalle-resumen, .blog-slider__text) ya existían y no ha hecho falta tocar el PHP. ":not(.custom_boton)" excluye a los botones con estilo propio (Botón tipo 1-4, del desplegable de formatos del editor): sin él, el !important de aquí les ganaba a los suyos y salían como un enlace suelto en vez de como el botón que son. */ .contenido-html a:not(.custom_boton), .portada_texto a:not(.custom_boton), .noticia-detalle-cuerpo a:not(.custom_boton), .noticia-detalle-resumen a:not(.custom_boton), .blog-slider__text a:not(.nav-link):not(.custom_boton){ color: color-mix(in srgb, var(--body-text-color) 65%, transparent) !important; text-decoration: underline !important; text-decoration-color: color-mix(in srgb, var(--body-text-color) 35%, transparent) !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } .contenido-html a:not(.custom_boton):hover, .portada_texto a:not(.custom_boton):hover, .noticia-detalle-cuerpo a:not(.custom_boton):hover, .noticia-detalle-resumen a:not(.custom_boton):hover, .blog-slider__text a:not(.nav-link):not(.custom_boton):hover{ color: var(--body-hover-color) !important; text-decoration-color: var(--body-hover-color) !important; } /* Excepción: la cabecera (portada_texto, la gran franja de texto/CTA que corona la home, ver #portada-section en funciones_html.php) y el pie de página NO deben llevar este estilo "de sección" en sus enlaces, aunque los reutilicen por dentro. El pie es el caso más amplio: cualquier tipo de bloque (texto, cards, columnas, testimonios, patrocinadores...) puede vivir ahí (pagina='PIE', ver html_pie_pagina()), no solo el bloque "pie" propiamente dicho, y todos comparten el mismo prefijo de id/clase "bloque_pie_N" (ver get_bloque_clase()) sea cual sea su tipo — así que basta con excluir por ese prefijo en vez de listar cada tipo de bloque. Más específico que el bloque de arriba (mismo selector + un ancestro más), así que gana sin depender del orden. */ section[id^="bloque_pie_"] .contenido-html a:not(.custom_boton), section[id^="bloque_pie_"] .noticia-detalle-cuerpo a:not(.custom_boton), section[id^="bloque_pie_"] .noticia-detalle-resumen a:not(.custom_boton), section[id^="bloque_pie_"] .blog-slider__text a:not(.nav-link):not(.custom_boton), #portada-section .portada_texto a:not(.custom_boton){ color: inherit !important; text-decoration: none !important; } section[id^="bloque_pie_"] .contenido-html a:not(.custom_boton):hover, section[id^="bloque_pie_"] .noticia-detalle-cuerpo a:not(.custom_boton):hover, section[id^="bloque_pie_"] .noticia-detalle-resumen a:not(.custom_boton):hover, section[id^="bloque_pie_"] .blog-slider__text a:not(.nav-link):not(.custom_boton):hover, #portada-section .portada_texto a:not(.custom_boton):hover{ color: inherit !important; } /* El bloque de arriba solo cubre los enlaces de texto enriquecido (los que pasan por .contenido-html y compañía), pero NO es la única fuente de este estilo: css/textarea.css trae su propia regla "a:not(.custom_boton)" SIN ningún selector que la limite (confirmado inspeccionando el CSS computado real de un enlace del menú). Ese fichero lo carga tanto el sitio público como el editor/vista previa de TinyMCE (bloque_textarea.css lo importa) — dentro del iframe del editor ESTÁ bien que sea global, ya que ahí todo el contenido es "sección"; en el sitio público en cambio afecta a CUALQUIER enlace de la página (menú, pie, paginación de noticias.php, lo que sea) que no pase por ninguna de las clases de arriba. En vez de ir añadiendo una excepción cada vez que aparece en un sitio nuevo (así estaba antes: una para el menú, otra para el pie...) se neutraliza aquí de una vez para todo el sitio público — custom.css no se carga dentro del iframe del editor, así que no hay conflicto con el caso en el que SÍ debe quedarse global. Solo dentro de .contenido-html y compañía (arriba, con !important) debe verse como un enlace de texto. Sin "!important" a propósito: basta con ganar por especificidad a la regla de textarea.css (mismo ":not(.custom_boton)", con "body" delante). */ body a:not(.custom_boton){ color: inherit; text-decoration: none; } /* 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); } /* Sección marcada como "Fullscreen" (ver get_base_seccion() en funciones_html.php): usa el límite ancho global de 2400px (mismo que ".bloque_datos"/".body-inner", pensado para pantallas muy anchas) en vez del --container-width configurado para esta web, para que ocupe más ancho que el contenido normal sin llegar a ser borde a borde. Selector de dos clases (más específico que ".container" a secas) para ganarle a la regla de arriba sin depender del orden en el CSS. */ .container.container-fullscreen { max-width: 2400px; } /* Cards en fullscreen: sin el padding lateral que trae ".container" de Bootstrap (independiente del max-width de arriba), para que las cards lleguen justo hasta el borde de esos 2400px en vez de dejar un margen en blanco a los lados. Solo para tipo "cards" (".bloque_cards", clase que pone get_base_seccion() en la sección): otros tipos fullscreen (p.ej. marquesina) sí quieren conservar ese padding. */ .bloque_cards .container-fullscreen { padding-left: 0 !important; padding-right: 0 !important; } #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; } /* BUG (corregido): el selector de abajo llevaba ".margen" (clase de "Tamaño portada", una opción de ANCHO totalmente aparte) en vez de ".overlay-left" (clase real de "Posición capa" = "capa_posicion", ver dropdown en portada.php) — así que el recuadro pequeño de "Arriba izquierda" (radio/max-width, ver ".overlay-left .bg-overlay" más abajo) se aplicaba también con "Pantalla completa" en cuanto "Tamaño portada" era "margen", dejando la capa como un recuadro en la esquina superior izquierda en vez de a pantalla completa. Con ".overlay-left" añadido al selector, este ajuste de altura (necesario solo en la combinación "Arriba izquierda" + "Tamaño portada" = margen: top:0/bottom:0 ya heredados de .bg-overlay, y al fijar aquí una altura el trío top+height+bottom queda sobrerrestringido e ignora "bottom", dejando la capa anclada arriba con un hueco debajo en vez de estirarse hasta abajo) ya no se cuela en "Pantalla completa". */ #portada-section.overlay-left .margen .bg-overlay { height: 100%; } @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. Igual que arriba, solo para "Arriba izquierda" (ver el "BUG corregido" más arriba) — con "Pantalla completa" no debe reducirse. */ #portada-section.overlay-left .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