/* ========================================================================== MDH · Tema visual "Rigor científico" Paleta y tipografía derivadas del logo (Logo_MDH_RigorCientifico). Se carga la última en para sobrescribir Spacious y BlockArt. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500&display=swap'); :root { /* Colores del logo */ --mdh-navy: #0c447c; /* "Martínez & de Haro" */ --mdh-navy-deep: #0a2c52; /* fondo del hexágono (zona oscura) */ --mdh-navy-ink: #14263d; /* texto principal */ --mdh-blue: #1a61a7; /* fondo del hexágono (zona clara) */ --mdh-cyan: #37c0e8; /* línea, borde y nodos */ --mdh-orange: #ef9f27; /* "&" y borla del birrete */ --mdh-orange-dark: #d8861a; --mdh-mint: #7be0c4; /* gráfica ascendente */ --mdh-slate: #5b7fa6; /* "PREPARADORES · INFORMÁTICA Y SAI" */ /* Superficies y texto */ --mdh-bg: #ffffff; --mdh-surface: #f4f8fc; --mdh-border: #dbe5f0; --mdh-text: #3a4b5f; --mdh-muted: #6b7f95; --mdh-radius: 14px; --mdh-radius-sm: 8px; --mdh-shadow: 0 1px 2px rgba(12, 68, 124, .06), 0 8px 24px rgba(12, 68, 124, .08); --mdh-shadow-hover: 0 2px 4px rgba(12, 68, 124, .08), 0 16px 40px rgba(12, 68, 124, .16); --mdh-font-head: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --mdh-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --mdh-font-label: 'Oswald', 'Arial Narrow', sans-serif; /* Retícula de "papel milimetrado" como la del hexágono */ --mdh-grid-dark: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px), radial-gradient(ellipse at 15% 0%, rgba(55, 192, 232, .22), transparent 55%), linear-gradient(135deg, #1a61a7 0%, #0c447c 45%, #0a2c52 100%); --mdh-grid-dark-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%; --mdh-grid-light: linear-gradient(rgba(55, 192, 232, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(55, 192, 232, .10) 1px, transparent 1px); /* Variables de BlockArt */ --ba-colors-primary: var(--mdh-blue); --ba-colors-secondary: var(--mdh-slate); --ba-colors-text: var(--mdh-text); --ba-colors-accent: var(--mdh-orange); } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { background: var(--mdh-bg); color: var(--mdh-text); font-family: var(--mdh-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body, button, input, select, textarea, p, .entry-meta, .read-more, .more-link, .blockart-paragraph, .blockart-button-link, .wp-block-latest-posts__list { font-family: var(--mdh-font-body) !important; } h1, h2, h3, h4, h5, h6, .blockart-heading, .entry-title, .widget-title { font-family: var(--mdh-font-head) !important; letter-spacing: -.01em; } h1, h2, h3, h4, h5, h6 { color: var(--mdh-navy); } h1 { font-weight: 800; } h2, h3 { font-weight: 700; } ::selection { background: var(--mdh-cyan); color: #fff; } a { color: var(--mdh-blue); transition: color .2s ease; } a:hover { color: var(--mdh-cyan); } :focus-visible { outline: 2px solid var(--mdh-cyan); outline-offset: 3px; border-radius: 4px; } blockquote { border-left: 4px solid var(--mdh-cyan) !important; background: var(--mdh-surface); border-radius: 0 var(--mdh-radius-sm) var(--mdh-radius-sm) 0; padding: 18px 24px; color: var(--mdh-navy-ink); } mark.has-inline-color { font-family: inherit; } /* Resaltado dentro de títulos BlockArt */ .blockart-heading > .blockart-highlight { background: linear-gradient(transparent 58%, rgba(55, 192, 232, .35) 58%) !important; color: inherit !important; padding: 0 .1em; } /* ---------- Cabecera ---------- */ #masthead { position: sticky; top: 0; z-index: 999; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); box-shadow: 0 1px 0 var(--mdh-border), 0 6px 20px rgba(12, 68, 124, .06); } /* Línea cian bajo la cabecera, como la del logo */ #masthead::after { content: ""; display: block; visibility: visible; /* anula .clearfix:after del tema */ height: 3px; background: linear-gradient(90deg, var(--mdh-navy) 0%, var(--mdh-cyan) 35%, var(--mdh-mint) 70%, var(--mdh-orange) 100%); } body.admin-bar #masthead { top: 32px; } #header-text-nav-container { background: transparent; border-bottom: 0; } #header-logo-image img { margin-top: 10px !important; margin-bottom: 10px !important; } .main-navigation a { font-family: var(--mdh-font-head); font-weight: 600; font-size: 15px; color: var(--mdh-navy); letter-spacing: .01em; position: relative; } .main-navigation > div > ul > li:not(.tg-header-button-wrap) > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--mdh-cyan); transform: scaleX(0); transition: transform .25s ease; } .main-navigation > div > ul > li:hover > a::after, .main-navigation > div > ul > li.current-menu-item > a::after, .main-navigation > div > ul > li.current_page_item > a::after, .main-navigation > div > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); } .main-navigation ul li:hover > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-ancestor > a, .main-navigation ul li.current_page_ancestor > a { color: var(--mdh-blue) !important; } /* Submenú */ .main-navigation ul li ul { border-top: 3px solid var(--mdh-cyan) !important; border-radius: 0 0 var(--mdh-radius-sm) var(--mdh-radius-sm); box-shadow: var(--mdh-shadow-hover); overflow: hidden; } .main-navigation ul li ul li a { font-weight: 500; font-size: 14px; color: var(--mdh-navy-ink) !important; } .main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a { background: var(--mdh-surface); color: var(--mdh-blue) !important; } /* Botón CONTACTA de la cabecera */ .main-navigation .tg-header-button-wrap.button-one a { background: var(--mdh-orange) !important; border-color: var(--mdh-orange) !important; color: #fff !important; font-family: var(--mdh-font-label); font-weight: 500; letter-spacing: .14em; border-radius: 999px; padding-left: 22px !important; padding-right: 22px !important; box-shadow: 0 4px 14px rgba(239, 159, 39, .35); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .main-navigation .tg-header-button-wrap.button-one a:hover { background: var(--mdh-orange-dark) !important; border-color: var(--mdh-orange-dark) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 159, 39, .45); } /* Menú móvil */ .site-header .menu-toggle { background-color: var(--mdh-navy) !important; color: #fff; border-radius: var(--mdh-radius-sm); } .site-header .menu-toggle:hover { background-color: var(--mdh-blue) !important; } .main-small-navigation li:hover, .main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item { background: var(--mdh-navy) !important; } .better-responsive-menu .main-navigation.toggled-on ul li a, .main-navigation.toggled-on ul li a { color: var(--mdh-navy-ink); } /* ---------- Botones ---------- */ .spacious-button, input[type="reset"], input[type="button"], input[type="submit"], button, .call-to-action-button, #featured-slider .slider-read-more-button, .post .entry-meta .read-more-link, .everest-forms .everest-forms-part-button, .everest-forms button[type=submit], .wp-block-button__link { background: linear-gradient(135deg, var(--mdh-blue), var(--mdh-navy)) !important; color: #fff !important; border: 0 !important; border-radius: var(--mdh-radius-sm) !important; font-family: var(--mdh-font-head) !important; font-weight: 600; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(12, 68, 124, .25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .spacious-button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover, .call-to-action-button:hover, #featured-slider .slider-read-more-button:hover, .post .entry-meta .read-more-link:hover, .everest-forms button[type=submit]:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12, 68, 124, .30); filter: brightness(1.08); } /* Botones que no deben heredar el degradado */ .slick-arrow, .slick-dots button, .sd-button, .share-icon, .mfp-close, .everest-forms .iti button, .jetpack-likes-widget-wrapper button { background: none !important; box-shadow: none !important; transform: none !important; filter: none !important; } /* Botones BlockArt: mismo lenguaje (el color concreto de cada botón se respeta) */ .blockart-button-link { border-radius: var(--mdh-radius-sm) !important; font-family: var(--mdh-font-head) !important; font-weight: 600 !important; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease !important; } .blockart-button-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 44, 82, .28); } /* ---------- Secciones y tarjetas BlockArt ---------- */ .blockart-section { position: relative; } /* Tarjetas (columnas con borde o fondo) */ .blockart-column-inner { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .blockart-column:hover > .blockart-column-inner[style], .blockart-section-inner > .blockart-column:hover > .blockart-column-inner { will-change: transform; } /* Hero con imagen: capa marino + retícula */ .blockart-overlay { mix-blend-mode: normal; } /* ---------- Contenido y blog ---------- */ #main { background: var(--mdh-bg); } .entry-content { color: var(--mdh-text); } .entry-content p { line-height: 1.75; } .entry-content ul li::marker { color: var(--mdh-cyan); } .entry-content ol li::marker { color: var(--mdh-blue); font-weight: 600; } .entry-content table { border-collapse: collapse; border-radius: var(--mdh-radius-sm); overflow: hidden; } .entry-content th { background: var(--mdh-navy); color: #fff; font-family: var(--mdh-font-head); } .entry-content td, .entry-content th { border-color: var(--mdh-border) !important; } .entry-content tr:nth-child(even) td { background: var(--mdh-surface); } /* Cabecera de página interior (título + migas) */ .header-post-title-container { background: var(--mdh-grid-dark) !important; background-size: var(--mdh-grid-dark-size) !important; border: 0 !important; } .header-post-title-container .header-post-title-class, .header-post-title-container .breadcrumb, .header-post-title-container .breadcrumb a { color: #fff !important; } .header-post-title-container .breadcrumb a:hover { color: var(--mdh-cyan) !important; } /* Entradas en listados */ #content .post, #content .page:not(.post-1643), .archive #content article, .blog #content article { border-bottom-color: var(--mdh-border); } .archive #content article, .blog #content article, .search #content article { background: #fff; border: 1px solid var(--mdh-border); border-radius: var(--mdh-radius); padding: 24px 28px 8px; margin-bottom: 32px; box-shadow: var(--mdh-shadow); transition: transform .25s ease, box-shadow .25s ease; } .archive #content article:hover, .blog #content article:hover, .search #content article:hover { transform: translateY(-3px); box-shadow: var(--mdh-shadow-hover); } .post-featured-image img, .wp-post-image { border-radius: var(--mdh-radius-sm); } .entry-title, .entry-title a { color: var(--mdh-navy) !important; font-weight: 700; } .post .entry-title a:hover, .page .entry-title a:hover { color: var(--mdh-blue) !important; } .entry-meta, .entry-meta a, .entry-meta span { font-family: var(--mdh-font-label) !important; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--mdh-slate) !important; } .entry-meta a:hover { color: var(--mdh-blue) !important; } .post .entry-meta .read-more-link { text-transform: uppercase; } .read-more, .more-link { color: var(--mdh-blue) !important; font-weight: 600; } .read-more:hover, .more-link:hover { color: var(--mdh-cyan) !important; } .single #content .tags a { display: inline-block; background: var(--mdh-surface); border: 1px solid var(--mdh-border); border-radius: 999px; padding: 2px 12px; color: var(--mdh-navy); } .single #content .tags a:hover { border-color: var(--mdh-cyan); color: var(--mdh-blue); } /* Paginación */ .pagination span, .pagination a span { border-radius: var(--mdh-radius-sm); font-family: var(--mdh-font-head); font-weight: 600; } .pagination span { background: var(--mdh-navy) !important; color: #fff; border-color: var(--mdh-navy) !important; } .pagination a span { border-color: var(--mdh-border) !important; color: var(--mdh-navy); } .pagination a span:hover { border-color: var(--mdh-cyan) !important; color: var(--mdh-blue) !important; } .nav-previous a, .nav-next a { color: var(--mdh-navy); font-weight: 600; } .nav-previous a:hover, .nav-next a:hover { color: var(--mdh-blue) !important; } /* Barra lateral */ #secondary .widget-title span, .widget-title span { border-bottom: 2px solid var(--mdh-cyan) !important; color: var(--mdh-navy); } #secondary a { color: var(--mdh-navy-ink); } #secondary a:hover { color: var(--mdh-blue) !important; } /* ---------- Formularios ---------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], textarea, select { border: 1px solid var(--mdh-border) !important; border-radius: var(--mdh-radius-sm) !important; background: #fff !important; color: var(--mdh-navy-ink); transition: border-color .2s ease, box-shadow .2s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: var(--mdh-cyan) !important; box-shadow: 0 0 0 4px rgba(55, 192, 232, .18) !important; outline: none; } .everest-forms .evf-field-label, .everest-forms label { color: var(--mdh-navy); font-weight: 600; } .search-form span { background-color: var(--mdh-navy) !important; } /* ---------- Pie ---------- */ #colophon { position: relative; background: var(--mdh-grid-dark) !important; background-size: var(--mdh-grid-dark-size) !important; color: rgba(255, 255, 255, .78); } #colophon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mdh-cyan), var(--mdh-mint), var(--mdh-orange)); } .footer-widgets-wrapper { background: transparent !important; } .footer-widgets-area, .footer-widgets-area p, .footer-widgets-area li { color: rgba(255, 255, 255, .78) !important; } .footer-widgets-area h2, .footer-widgets-area h2 mark { font-family: var(--mdh-font-label) !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .16em; font-size: 16px !important; color: #fff !important; } .footer-widgets-area h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--mdh-cyan); } .footer-widgets-area a { color: rgba(255, 255, 255, .85) !important; } .footer-widgets-area a:hover { color: var(--mdh-cyan) !important; } .footer-widgets-area ul { list-style: none; margin-left: 0; } .footer-widgets-area ul li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .footer-socket-wrapper { background: rgba(4, 22, 42, .55) !important; border-top: 1px solid rgba(255, 255, 255, .08) !important; } .footer-socket-wrapper, .footer-socket-wrapper .copyright { color: rgba(255, 255, 255, .6) !important; } .footer-socket-wrapper a { color: rgba(255, 255, 255, .85) !important; } .footer-socket-wrapper .copyright a:hover { color: var(--mdh-cyan) !important; } /* Botón "volver arriba" */ a#scroll-up { background: var(--mdh-orange) !important; border-radius: 50%; box-shadow: 0 6px 18px rgba(239, 159, 39, .45); } a#scroll-up:hover { background: var(--mdh-orange-dark) !important; } /* ---------- Plugins ---------- */ /* Carrusel de entradas recientes */ .wppsac-post-slider .wppsac-post-category a, .wppsac-post-categories a { background: var(--mdh-cyan) !important; border-radius: 999px; font-family: var(--mdh-font-label); letter-spacing: .08em; } .wppsac-post-slider .wppsac-readmorebtn { background: var(--mdh-orange) !important; border-color: var(--mdh-orange) !important; color: #fff !important; border-radius: var(--mdh-radius-sm); } .slick-dots li.slick-active button { background: var(--mdh-cyan) !important; } /* Pestañas y acordeones (wp-expand-tabs-free) */ .sp-tab__nav-tabs .sp-tab__nav-link.sp-tab__active, .sp-tab__lay-default .sp-tab__nav-tabs .sp-tab__nav-item.sp-tab__show .sp-tab__nav-link { border-top-color: var(--mdh-cyan) !important; color: var(--mdh-navy) !important; } /* WP Show Posts */ .wp-show-posts-entry-title a { color: var(--mdh-navy) !important; font-family: var(--mdh-font-head); } .wp-show-posts-entry-title a:hover { color: var(--mdh-blue) !important; } .wp-show-posts-inner { border-radius: var(--mdh-radius); } /* Suscripción por email */ .es_subscription_form .es_submit_button, .emaillist input[type="submit"] { background: var(--mdh-orange) !important; } /* ---------- Accesibilidad / movimiento ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- Móvil ---------- */ @media (max-width: 768px) { #masthead { position: relative; } .main-navigation > div > ul > li > a::after { display: none; } .archive #content article, .blog #content article, .search #content article { padding: 18px 18px 4px; } }