/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash Template: hello-elementor Author: Elementor Team Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators. Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready Version: 3.4.9.1782816673 Updated: 2026-06-30 12:51:13 */ /* =================================================================== Texto justificado en toda la web (español e inglés) ------------------------------------------------------------------- Se aplica sobre el CONTENEDOR del widget, no sobre los párrafos, y a propósito con especificidad baja: así cualquier alineación puesta a mano en Elementor (hay 14 cajas centradas o a la derecha) sigue ganando, porque Elementor la escribe con un selector más específico. Titulares, botones, menús y pies de imagen no se tocan. =================================================================== */ .elementor-widget-text-editor, .elementor-widget-theme-post-content, .page-content .entry-content { text-align: justify; text-justify: inter-word; } /* Partición de palabras: evita los "ríos" de espacio en blanco que deja el texto justificado. Usa el idioma declarado en . */ .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-theme-post-content p, .elementor-widget-theme-post-content li, .page-content .entry-content p, .page-content .entry-content li { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* Las listas y celdas de tabla de las páginas legales también. */ .elementor-widget-text-editor td { text-align: justify; } /* =================================================================== Selector de idioma: solo banderas, separadas por una barra ------------------------------------------------------------------- Los nombres se ocultan desde Polylang (show_names = 0). Aquí solo se añade el separador y se ajusta el espaciado para que las dos banderas se lean como un único control: [ES] / [EN] =================================================================== */ .lang-item > a, .lang-item > a.hfe-menu-item { padding-left: 6px !important; padding-right: 6px !important; display: inline-flex; align-items: center; } /* La barra va delante de la segunda bandera (y de cualquier siguiente). */ .lang-item + .lang-item::before { content: "/"; display: inline-block; vertical-align: middle; opacity: .55; font-weight: 400; line-height: 1; margin: 0 2px; } /* Las banderas, a tamaño legible y alineadas con el texto del menú. */ .lang-item img { display: inline-block; width: 20px; height: auto; vertical-align: middle; border-radius: 2px; } /* El idioma activo, resaltado; el otro, algo apagado hasta el hover. */ .lang-item:not(.current-lang) > a { opacity: .55; } .lang-item:not(.current-lang) > a:hover { opacity: 1; } .lang-item.current-lang > a { opacity: 1; } /* =================================================================== Cabecera: el menú nunca salta a dos líneas ------------------------------------------------------------------- El menú de escritorio lleva 9 elementos en una fila (7 apartados + las 2 banderas del selector de idioma) y, con el logo y el botón «Entradas», no cabe en la caja de 1600 px. Al no caber, la fila se partía y las banderas caían a una segunda línea. NO se puede resolver adelantando el menú hamburguesa: Header Footer Elementor lo tiene fijado a 1024 px tanto en su CSS como en su JavaScript (el clic del desplegable solo se engancha por debajo de esa anchura), así que forzarlo por CSS daría un botón que no abre. Se resuelve haciendo que el menú se ajuste al ancho disponible: la tipografía y el espaciado escalan de 18 px en pantallas grandes a 12 px en las más justas, y la fila nunca se parte. =================================================================== */ /* 1. Una sola línea, pero SOLO en escritorio. Por debajo de 1025 px el menú es un desplegable y HFE apila los elementos poniéndolos al 100 % de ancho; con «nowrap» se le impedía y salían todos en horizontal dentro del hamburguesa, ilegibles. */ @media (min-width: 1025px) { .ehf-header ul.hfe-nav-menu { flex-wrap: nowrap; } .ehf-header .hfe-nav-menu a.hfe-menu-item { white-space: nowrap; } } /* 2. De 1025 px (donde Elementor pasa a escritorio) hacia arriba, el menú se adapta al ancho en lugar de romperse. OJO: esto fija el tamaño de letra del menú desde CSS, así que cambiarlo en Elementor ya no tendrá efecto en escritorio. */ @media (min-width: 1025px) { /* Descendiente, no hijo directo: los apartados con desplegable envuelven el enlace en un
y con «>» se quedaban fuera de la regla, saliendo más grandes que el resto. */ .ehf-header .hfe-nav-menu a.hfe-menu-item { font-size: clamp(12px, 1.05vw, 18px) !important; padding-left: clamp(3px, 0.32vw, 10px) !important; padding-right: clamp(3px, 0.32vw, 10px) !important; } /* Las banderas no necesitan el margen de un apartado de texto. */ .ehf-header .hfe-nav-menu li.lang-item a { padding-left: 3px !important; padding-right: 3px !important; } /* La flecha de los desplegables, también más ajustada. */ .ehf-header .hfe-nav-menu .hfe-menu-toggle, .ehf-header .hfe-nav-menu .sub-arrow { margin-left: 2px !important; } } /* =================================================================== Anclas: que la cabecera fija no tape el destino ------------------------------------------------------------------- Al pinchar una tarjeta de la portada se salta a #gerhard, #trio-rodin, etc. en «Edición actual». Como la cabecera va fija, el navegador deja el destino justo debajo de ella y el rótulo del día queda oculto. «scroll-margin-top» reserva ese espacio al desplazarse. Los valores siguen la altura de la cabecera al fijarse (70px en escritorio y tablet, 64px en móvil) más un respiro para que no quede pegado. Para añadir anclas nuevas basta con poner la clase «ancla» al elemento en Elementor (Avanzado > Clases CSS), además de su ID. =================================================================== */ .ancla { scroll-margin-top: 84px; } @media (min-width: 768px) { .ancla { scroll-margin-top: 90px; } } /* Respaldo para navegadores sin scroll-margin-top: el mismo espacio, creado con un pseudo-elemento que no ocupa sitio visualmente. */ @supports not (scroll-margin-top: 1px) { .ancla::before { content: ""; display: block; height: 90px; margin-top: -90px; pointer-events: none; } }