/* Pavigym · Megamenú * Todo cuelga de #header (la cabecera del tema) y de la clase «mm» de cada pestaña con panel, que viene de * Apariencia › Menús. Orden: piezas comunes · escritorio (>=992) · pantallas intermedias · portátiles bajos · * menú hamburguesa (<=991) · móvil estrecho · arreglos del menú móvil del tema. * Colores: azul Pavigym #05a3de (1.2.1; las maquetas traían #4a8fd4 / #3f86cf), azul marino #15263a, texto #16222e. */ /* =============================================================== colores */ #header { --pgmm-azul: #05a3de; /* flechas, botones, enlaces al pasar */ --pgmm-azul-claro: #05a3de; /* botón CONTACT, subrayado de la pestaña abierta, idioma actual en el móvil */ --pgmm-azul-hover: #0491c5; /* botón CONTACT al pasar (el mismo azul, algo más oscuro) */ --pgmm-marino: #15263a; /* tarjetas destacadas */ --pgmm-texto: #16222e; /* títulos */ --pgmm-texto-panel: #1b2733; /* texto general del panel */ --pgmm-gris: #5b6773; /* descripciones */ --pgmm-antetitulo: #4d6f8f; /* antetítulos de bloque */ --pgmm-foco: #05a3de; /* contorno del foco con el teclado */ } /* =============================================================== piezas comunes */ /* el menú del tema hereda estilos (interlineado fijo, colores, flechas); dentro del panel se parte de cero */ #header .mm :where(.mm-panel, .mm-panel ul, .mm-panel li, .mm-panel a, .mm-panel span, .mm-panel img) { all: unset; box-sizing: border-box; } #header .mm :where(.mm-panel *:not(i))::before, #header .mm :where(.mm-panel *:not(i))::after { content: none; } #header .mm > .mm-panel::before, #header .mm > .mm-panel::after { content: none !important; display: none !important; } #header .mm .mm-panel { font-family: Outfit, Helvetica, Arial, sans-serif; color: var(--pgmm-texto-panel); text-align: left; line-height: 1.35; pointer-events: auto !important; } #header .mm .mm-panel span { line-height: inherit; } #header .mm .mm-panel a { display: block; cursor: pointer; } /* sin destino (URL «#» o «próximamente»): el walker lo saca sin href */ #header .mm .mm-panel a:not([href]) { cursor: default; } #header .mm > a:not([href]) { cursor: default; } /* foco con el teclado: el «all: unset» de arriba también quita el contorno del navegador */ #header .mm .mm-panel a:focus-visible { outline: 2px solid var(--pgmm-foco); outline-offset: 2px; border-radius: 6px; } #header .mm .mm-destacado > a:focus-visible { outline-color: #fff; outline-offset: -5px; } #header .mm > a:focus-visible { outline: 2px solid var(--pgmm-foco); outline-offset: -2px; } /* valores de partida para piezas puestas fuera del bloque para el que están pensadas */ #header .mm .mm-panel .mm-img { display: block; max-width: 100%; height: auto; } #header .mm .mm-panel li:not(.mm-destacado):not(.mm-proximamente) > a > .mm-badge { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 20px; background: #e2edf8; color: #2f5f8f; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* --- destacado: tarjeta oscura con foto --- */ #header .mm .mm-destacado > a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 420px; padding: 24px 22px 22px; border-radius: 12px; overflow: hidden; background: var(--pgmm-marino); color: #fff; } #header .mm .mm-destacado .mm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } #header .mm .mm-destacado > a::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,38,58,0) 0%, rgba(21,38,58,.35) 30%, rgba(21,38,58,.92) 52%, var(--pgmm-marino) 70%); } #header .mm .mm-destacado span { position: relative; display: block; z-index: 2; } #header .mm .mm-destacado .mm-badge { position: absolute; top: 22px; left: 20px; padding: 4px 14px; border-radius: 20px; background: var(--pgmm-azul-claro); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } #header .mm .mm-destacado .mm-antetitulo { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } #header .mm .mm-destacado .mm-titulo { margin-top: 8px; font-size: 30px; font-weight: 700; line-height: 1.15; } #header .mm .mm-destacado .mm-titulo::after { content: ''; display: block; width: 34px; height: 2px; margin-top: 14px; background: var(--pgmm-azul-claro); } #header .mm .mm-destacado .mm-desc { margin-top: 14px; font-size: 12.5px; line-height: 1.55; opacity: .9; max-width: 300px; } #header .mm .mm-destacado .mm-boton { margin-top: 42px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.35); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } #header .mm .mm-destacado .mm-boton::after { content: '\2192'; position: absolute; right: 0; font-size: 14px; } /* --- guía --- */ #header .mm .mm-guia > a { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 18px; border-radius: 12px; background: #f4f7fa; } #header .mm .mm-guia .mm-antetitulo { order: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pgmm-antetitulo); margin-bottom: 16px; } #header .mm .mm-guia .mm-img { order: 2; display: block; width: 100%; height: 190px; max-height: 190px; object-fit: cover; object-position: center 35%; border-radius: 8px; border: 1px solid #dfe6ee; background: #fff; overflow: hidden; } #header .mm .mm-guia .mm-titulo { order: 3; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--pgmm-texto); } #header .mm .mm-guia .mm-titulo::after { content: '\2192'; color: var(--pgmm-azul); font-size: 18px; } #header .mm .mm-guia .mm-desc { order: 4; display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--pgmm-gris); max-width: 300px; } #header .mm .mm-guia .mm-boton { order: 5; display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid #dde4eb; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pgmm-azul); } #header .mm .mm-guia .mm-boton::after { content: ' \2192'; } /* --- lista con antetítulo --- */ #header .mm .mm-lista { padding: 22px 10px 10px 22px; box-shadow: inset 1px 0 #e6ebf0; } #header .mm .mm-lista > a .mm-titulo { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pgmm-antetitulo); padding-bottom: 12px; border-bottom: 2px solid #d3dfeb; } #header .mm .mm-lista > .sub-menu { display: block; } #header .mm .mm-lista > .sub-menu > li > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 6px; border-bottom: 1px solid #e6ebf0; font-size: 16px; color: var(--pgmm-texto-panel); } #header .mm .mm-lista > .sub-menu > li > a::after { content: '\2192'; color: var(--pgmm-azul); font-size: 14px; } #header .mm .mm-lista > .sub-menu > li > a:hover { color: var(--pgmm-azul); } /* --- tarjetas con icono --- */ #header .mm .mm-tarjetas { display: flex; flex-direction: column; padding: 22px 18px 10px; } #header .mm .mm-tarjetas > a { display: contents; } #header .mm .mm-tarjetas > a .mm-titulo { order: 1; display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pgmm-antetitulo); padding-bottom: 12px; border-bottom: 2px solid #d3dfeb; margin-bottom: 16px; } #header .mm .mm-tarjetas > .sub-menu { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #header .mm .mm-tarjetas > a .mm-desc { order: 3; display: block; margin-top: 14px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7b8794; } #header .mm .mm-tarjetas > .sub-menu > li > a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; align-content: start; height: 100%; padding: 20px 20px 16px; border: 1px solid #e3e9ef; border-radius: 12px; background: linear-gradient(180deg, #fff, #f6f9fc); } #header .mm .mm-tarjetas > .sub-menu > li > a:hover { border-color: #b9d3ee; } #header .mm .mm-tarjetas .mm-img { grid-column: 1; grid-row: 1 / 4; display: block; width: 56px; height: 56px; padding: 13px; border-radius: 12px; background: #e6f0fa; object-fit: contain; } #header .mm .mm-tarjetas i.mm-icono { grid-column: 1; grid-row: 1 / 4; display: flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: #e6f0fa; color: var(--pgmm-azul); font-size: 24px !important; } #header .mm .mm-tarjetas .sub-menu .mm-titulo { grid-column: 2; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--pgmm-texto); } #header .mm .mm-tarjetas .sub-menu .mm-desc { grid-column: 2; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--pgmm-gris); max-width: 240px; } #header .mm .mm-tarjetas .sub-menu .mm-boton { grid-column: 2; align-self: end; display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3e9ef; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pgmm-azul); } #header .mm .mm-tarjetas .sub-menu .mm-boton::after { content: '\2192'; font-size: 14px; } /* --- grupos de producto, filas con descripción, gamas y «próximamente» --- */ #header .mm .mm-grupo > a { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 2px solid #d3dfeb; margin-bottom: 6px; } #header .mm .mm-grupo > a .mm-img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: contain; display: block; } #header .mm .mm-grupo > a .mm-antetitulo { align-self: end; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6f8a73; } #header .mm .mm-grupo > a .mm-titulo { align-self: start; white-space: nowrap; font-size: clamp(16px, 1.55vw, 20px); font-weight: 700; text-transform: uppercase; color: var(--pgmm-texto); } #header .mm .mm-grupo > a .mm-desc { grid-column: 1 / -1; margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--pgmm-gris); max-width: 420px; } #header .mm .mm-grupo.mm-sin-img > a { grid-template-columns: 1fr !important; } #header .mm .mm-grupo > .sub-menu { display: grid; grid-template-columns: 1fr; } #header .mm .mm-grupo.mm-2col > .sub-menu { grid-template-columns: 1fr 1fr; column-gap: 28px; } #header .mm .mm-grupo > .sub-menu > li > a { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 11px 0 12px; border-bottom: 1px solid #dde4eb; } #header .mm .mm-grupo > .sub-menu > li > a .mm-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--pgmm-texto); } #header .mm .mm-grupo > .sub-menu > li > a::after { content: '\2192'; grid-column: 2; grid-row: 1; color: var(--pgmm-azul); font-size: 14px; } #header .mm .mm-grupo > .sub-menu > li > a:hover .mm-titulo { color: var(--pgmm-azul); } #header .mm .mm-grupo > .sub-menu > li > a .mm-desc { grid-column: 1; margin-top: 4px; font-size: 11px; line-height: 1.45; color: #66717d; max-width: 260px; } #header .mm .mm-grupo:not(.mm-2col) > .sub-menu > li > a .mm-desc { max-width: 310px; } #header .mm .mm-grupo > .sub-menu > li.mm-proximamente > a { display: block; } #header .mm .mm-grupo > .sub-menu > li.mm-proximamente > a::after { content: none; } #header .mm .mm-grupo > .sub-menu > li.mm-proximamente > a .mm-titulo { display: inline-block; vertical-align: middle; color: #9aa5b1; } #header .mm .mm-grupo > .sub-menu > li.mm-proximamente > a .mm-badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: 20px; background: #e2edf8; color: #4a7fb5; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #header .mm .mm-grupo > .sub-menu > li.mm-proximamente > a .mm-desc { display: block; } #header .mm .mm-gama > a { display: grid; grid-template-columns: 1fr auto; height: 100%; min-height: 84px; padding: 13px 15px 14px; border-left: 3px solid var(--pgmm-azul); border-radius: 6px; background: linear-gradient(100deg, #e9f1fa, #dbe8f6); } #header .mm .mm-gama > a .mm-titulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--pgmm-texto); } #header .mm .mm-gama > a::after { content: '\2192'; grid-column: 2; grid-row: 1; color: var(--pgmm-azul); } #header .mm .mm-gama > a .mm-desc { grid-column: 1 / -1; margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--pgmm-gris); } /* fondo oscuro de la página mientras hay un panel abierto (lo crea el script, justo por debajo de la cabecera) */ #pgmm-fondo { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: var(--pgmm-top, 86px); background: rgba(14,19,37,.55); z-index: 89; pointer-events: none; } /* =============================================================== escritorio: menú horizontal (>= 992) */ /* el panel se abre al pasar el ratón solo en dispositivos con ratón; con el teclado y en las pantallas táctiles lo abre el script (.mm-abierto). Así el tabulador no entra en un panel que no se ha pedido abrir. */ @media (min-width: 992px) and (hover: hover) { #header .mm:hover > .mm-panel { display: grid !important; } #header .mm:hover > a { background: #eaf2fb; box-shadow: inset 0 -3px var(--pgmm-azul-claro); } } @media (min-width: 992px) { #header .mm > .mm-panel { display: none !important; } #header .mm.mm-abierto > .mm-panel { display: grid !important; } #header .mm > .mm-panel { position: fixed !important; left: 50% !important; top: var(--pgmm-top, 86px) !important; transform: translateX(-50%) !important; width: min(1180px, 96vw) !important; padding: 12px !important; border-top: 8px solid transparent !important; background: #fff padding-box !important; border-radius: 22px 22px 16px 16px !important; box-shadow: 0 24px 60px rgba(14,19,37,.30) !important; z-index: 10000 !important; opacity: 1 !important; visibility: visible !important; gap: 16px; align-items: stretch; } #header .mm.mm-abierto > a { background: #eaf2fb; box-shadow: inset 0 -3px var(--pgmm-azul-claro); } body.pgmm-fondo-on #pgmm-fondo { display: block; } /* composición de cada pestaña */ #header .mm-l-soluciones > .mm-panel { grid-template-columns: 1.05fr 1fr .95fr; } #header .mm-l-soluciones .mm-destacado > a { justify-content: flex-start; min-height: 430px; } #header .mm-l-soluciones .mm-destacado .mm-img { top: auto; height: 58%; } #header .mm-l-soluciones .mm-destacado > a::before { background: linear-gradient(180deg, var(--pgmm-marino) 40%, rgba(21,38,58,.45) 62%, rgba(21,38,58,.9) 100%); } #header .mm-l-soluciones .mm-destacado .mm-badge { position: relative; top: auto; left: auto; order: -1; align-self: flex-start; margin-bottom: 22px; } #header .mm-l-soluciones .mm-destacado .mm-boton { margin-top: auto; } #header .mm-l-productos > .mm-panel { grid-template-columns: repeat(12, minmax(0, 1fr)) 270px; gap: 0; } #header .mm-l-productos .mm-grupo { grid-row: 1; padding: 18px 22px 6px; background: #f7f9fb; } #header .mm-l-productos .mm-grupo.mm-2col { grid-column: 1 / 8; background: #eef2f6; border-radius: 12px 0 0 0; } #header .mm-l-productos .mm-grupo:not(.mm-2col) { grid-column: 8 / 13; border-radius: 0 12px 0 0; box-shadow: inset 1px 0 #e1e7ee; } #header .mm-l-productos .mm-gama { grid-row: 2; grid-column: span 4; padding: 10px 8px; background: #f3f6f9; } #header .mm-l-productos .mm-grupo + .mm-grupo + .mm-gama { border-radius: 0 0 0 12px; padding-left: 16px; } #header .mm-l-productos .mm-gama + .mm-gama + .mm-gama { border-radius: 0 0 12px 0; padding-right: 16px; } #header .mm-l-productos .mm-destacado { grid-column: 13; grid-row: 1 / 3; margin-left: 16px; } #header .mm-l-productos .mm-destacado > a { min-height: 470px; } #header .mm-l-servicios > .mm-panel { grid-template-columns: 390px 1fr; } #header .mm-l-empresa > .mm-panel { grid-template-columns: 1fr 340px; } #header .mm-l-empresa .mm-tarjetas > a .mm-desc { text-align: right; } } /* =============================================================== pantallas intermedias (tablet horizontal, portátil pequeño) */ @media (min-width: 992px) and (max-width: 1199px) { #header .mm-l-productos > .mm-panel { grid-template-columns: repeat(12, minmax(0, 1fr)) 215px; } #header .mm .mm-grupo > a .mm-desc { display: none; } #header .mm .mm-grupo > a { margin-bottom: 2px; } #header .mm .mm-grupo > .sub-menu > li > a .mm-desc { font-size: 10.5px; max-width: none !important; } #header .mm .mm-grupo.mm-2col > .sub-menu { column-gap: 20px; } #header .mm .mm-gama > a .mm-desc { font-size: 10.5px; } #header .mm .mm-destacado .mm-titulo { font-size: 24px; } #header .mm .mm-destacado .mm-desc { font-size: 12px; } #header .mm-l-soluciones > .mm-panel { grid-template-columns: 1fr 1fr .9fr; } #header .mm-l-servicios > .mm-panel { grid-template-columns: 300px 1fr; } #header .mm-l-empresa > .mm-panel { grid-template-columns: 1fr 280px; } #header .mm .mm-tarjetas > .sub-menu > li > a { padding: 16px 16px 14px; column-gap: 14px; grid-template-columns: 48px 1fr; } #header .mm .mm-tarjetas .mm-img, #header .mm .mm-tarjetas i.mm-icono { width: 48px !important; height: 48px !important; } #header .mm .mm-tarjetas .sub-menu .mm-titulo { font-size: 15.5px; } } /* =============================================================== portátiles bajos (1280x800, 1366x768): compacto y, si aún no cabe, scroll interno */ @media (min-width: 992px) and (max-height: 900px) { #header .mm > .mm-panel { max-height: calc(100vh - var(--pgmm-top, 86px) - 12px) !important; overflow-y: auto !important; } #header .mm .mm-grupo > a { grid-template-columns: 48px minmax(0, 1fr); padding-bottom: 10px; } #header .mm .mm-grupo > a .mm-img { width: 48px; height: 48px; } #header .mm .mm-grupo > a .mm-titulo { font-size: clamp(15px, 1.4vw, 18px); } #header .mm .mm-grupo > a .mm-desc { margin-top: 6px; font-size: 11.5px; } #header .mm-l-productos .mm-grupo { padding: 14px 20px 4px; } #header .mm .mm-grupo > .sub-menu > li > a { padding: 8px 0 9px; } #header .mm .mm-gama > a { min-height: 0; padding: 10px 14px 11px; } #header .mm .mm-gama > a .mm-desc { margin-top: 4px; } #header .mm-l-productos .mm-destacado > a { min-height: 0; } #header .mm .mm-destacado > a { min-height: 360px; } #header .mm-l-soluciones .mm-guia .mm-img { height: 150px; max-height: 150px; } #header .mm .mm-lista > .sub-menu > li > a { padding: 10px 6px; } } /* =============================================================== menú hamburguesa del tema (<= 991): cada pestaña es un acordeón */ @media (max-width: 991px) { #header .mm > .mm-panel { display: none !important; } #header .mm.mm-abierto > .mm-panel { display: flex !important; } #header .mm > .mm-panel { position: static !important; transform: none !important; width: auto !important; max-height: none !important; overflow: visible !important; flex-direction: column; gap: 10px; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; padding: 8px 16px 18px !important; opacity: 1 !important; visibility: visible !important; } #header .mm.mm-abierto > a { background: #eaf2fb; box-shadow: inset 3px 0 var(--pgmm-azul-claro); } #header .mm .mm-destacado > a { min-height: 0; height: auto; padding: 16px 18px 14px; justify-content: flex-start; } #header .mm .mm-destacado .mm-img { top: 0; height: 100%; } #header .mm .mm-destacado > a::before { background: linear-gradient(90deg, var(--pgmm-marino) 40%, rgba(21,38,58,.72) 100%); } #header .mm .mm-destacado .mm-badge { position: relative; top: auto; left: auto; align-self: flex-start; order: -1; margin-bottom: 8px; } #header .mm .mm-destacado .mm-titulo { font-size: 20px; margin-top: 2px; } #header .mm .mm-destacado .mm-titulo::after { display: none; } #header .mm .mm-destacado .mm-desc { font-size: 12px; margin-top: 6px; } #header .mm .mm-destacado .mm-boton { margin-top: 12px; padding-top: 10px; } #header .mm .mm-guia > a { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; padding: 12px; } #header .mm .mm-guia .mm-antetitulo { display: none; } #header .mm .mm-guia .mm-img { grid-row: 1 / 4; width: 92px; height: 92px; max-height: 92px; } #header .mm .mm-guia .mm-titulo { margin-top: 0; font-size: 17px; } #header .mm .mm-guia .mm-desc { font-size: 12px; margin-top: 4px; } #header .mm .mm-guia .mm-boton { margin-top: 8px; padding-top: 0; border-top: 0; } #header .mm .mm-lista { padding: 4px 0 0; box-shadow: none; } #header .mm .mm-lista > .sub-menu > li > a { font-size: 15px; padding: 12px 4px; } #header .mm-l-productos .mm-grupo { padding: 12px 14px 4px; border-radius: 10px; background: #f3f6f9; } #header .mm-l-productos .mm-grupo.mm-2col { background: #eef2f6; } #header .mm .mm-grupo > a { grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 8px; margin-bottom: 2px; } #header .mm .mm-grupo > a .mm-img { width: 40px; height: 40px; } #header .mm .mm-grupo > a .mm-titulo { font-size: 16px; } #header .mm .mm-grupo > a .mm-desc, #header .mm .mm-grupo > .sub-menu > li > a .mm-desc, #header .mm .mm-gama > a .mm-desc { display: none !important; } #header .mm .mm-grupo > .sub-menu, #header .mm .mm-grupo.mm-2col > .sub-menu { grid-template-columns: 1fr 1fr; column-gap: 16px; } #header .mm .mm-grupo > .sub-menu > li > a { padding: 10px 0; } #header .mm .mm-gama > a { min-height: 0; padding: 12px 14px; border-radius: 8px; } #header .mm .mm-tarjetas { padding: 4px 0 0; } #header .mm .mm-tarjetas > .sub-menu { grid-template-columns: 1fr 1fr; gap: 10px; } #header .mm .mm-tarjetas > .sub-menu > li > a { grid-template-columns: 40px 1fr; grid-template-rows: auto; align-items: center; padding: 12px; column-gap: 12px; } #header .mm .mm-tarjetas .mm-img, #header .mm .mm-tarjetas i.mm-icono { width: 40px !important; height: 40px !important; padding: 9px; grid-row: auto; font-size: 18px !important; } #header .mm .mm-tarjetas .sub-menu .mm-titulo { font-size: 14px; margin-top: 0; } #header .mm .mm-tarjetas .sub-menu .mm-desc, #header .mm .mm-tarjetas .sub-menu .mm-boton, #header .mm .mm-tarjetas > a .mm-desc { display: none; } } @media (max-width: 599px) { #header .mm .mm-tarjetas > .sub-menu { grid-template-columns: 1fr; } #header .mm .mm-destacado .mm-desc { display: none; } } /* =============================================================== arreglos del menú móvil del tema (<= 991) */ @media (max-width: 991px) { /* el menú empieza donde acaba la cabecera (el tema lo fija a 50 px y tapa el logo y el botón de cerrar) */ #mobile-nav.in, #mobile-nav.collapsing { top: var(--pgmm-cab, 107px) !important; } /* 100dvh descuenta la barra del navegador del móvil; 100vh queda de respaldo para navegadores antiguos */ #mobile-nav.in { height: calc(100vh - var(--pgmm-cab, 107px)) !important; height: calc(100dvh - var(--pgmm-cab, 107px)) !important; max-height: none !important; } /* la X de cerrar: sin restos de la hamburguesa y centrada */ body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed) .icon-bar::before, body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed) .icon-bar::after { opacity: 0 !important; transform: none !important; } body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed)::before, body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed)::after { left: 6px !important; right: auto !important; width: 24px !important; top: 7px !important; transform-origin: 50% 50% !important; } body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed)::before { transform: rotateZ(45deg) !important; } body.mobile-header-overlay .main-header .header-module .navbar-toggle:not(.collapsed)::after { transform: rotateZ(-45deg) !important; } /* la cabecera transparente se pone blanca mientras el menú está abierto */ body.mobile-header-overlay.pgmm-menu-movil-abierto #header, body.mobile-header-overlay.pgmm-menu-movil-abierto #header section.vc_section { background-color: #fff !important; } /* la flecha de las pestañas con panel ya la pone el tema a la derecha: sin la del texto */ #header .mm > a .link-txt > .fa-angle-down { display: none !important; } } /* =============================================================== cabecera de la maqueta (1.2.0) * Sin la barra superior del tema (idioma e iconos sociales); el idioma pasa al menú (lo añade el plugin, «mm-idiomas») * junto al botón de contacto («mm-cta»); la lupa del tema queda a la derecha. */ #header .secondary-bar { display: none !important; } /* selector de idioma: partir de cero dentro de la lista (el tema da estilo a cualquier ul/li/a del menú) */ #header :where(.mm-idiomas-lista, .mm-idiomas-lista li, .mm-idiomas-lista a, .mm-idiomas-lista span) { all: unset; box-sizing: border-box; } #header .mm-idiomas { position: relative; } #header .mm-idiomas > a { cursor: pointer; } #header .mm-idiomas > a .fa-angle-down { margin-left: 3px; opacity: .6; } #header .mm-idiomas-lista { font-family: Outfit, Helvetica, Arial, sans-serif; } #header .mm-idiomas-lista a { cursor: pointer; } #header .mm-idiomas-lista a:focus-visible { outline: 2px solid var(--pgmm-foco); outline-offset: 1px; } @media (min-width: 992px) { /* el menú ocupa todo el hueco entre el logo y la lupa; idioma y contacto, a la derecha */ #header #main-header-nav > .main-nav { display: flex !important; align-items: center; width: 100%; float: none !important; } #header #main-header-nav > .main-nav > li { float: none !important; } #header #main-header-nav > .main-nav > li.mm-idiomas { margin-left: auto; } /* flecha de las pestañas con panel: solo en la abierta, en azul (como la maqueta) */ #header .mm > a .link-txt > .fa-angle-down { margin-left: 4px; color: var(--pgmm-azul-claro); opacity: 0; transition: opacity .15s; } #header .mm.mm-abierto > a .link-txt > .fa-angle-down, #header .mm > a:focus-visible .link-txt > .fa-angle-down { opacity: 1; } /* botón de contacto */ #header #main-header-nav > .main-nav > li.mm-cta > a { display: inline-flex !important; align-items: center; height: auto !important; margin: 0 0 0 12px !important; padding: 11px 22px !important; border-radius: 999px !important; background: var(--pgmm-azul-claro) !important; line-height: 1 !important; box-shadow: none !important; transition: background .15s; } #header #main-header-nav > .main-nav > li.mm-cta > a, #header #main-header-nav > .main-nav > li.mm-cta > a .link-txt { color: #fff !important; font-weight: 700; } #header #main-header-nav > .main-nav > li.mm-cta > a:hover { background: var(--pgmm-azul-hover) !important; } #header #main-header-nav > .main-nav > li.mm-cta > a::before, #header #main-header-nav > .main-nav > li.mm-cta > a::after, #header #main-header-nav > .main-nav > li.mm-cta > a .link-txt::before, #header #main-header-nav > .main-nav > li.mm-cta > a .link-txt::after { display: none !important; } #header #main-header-nav > .main-nav > li.mm-cta > a:focus-visible { outline: 2px solid var(--pgmm-foco); outline-offset: 2px; } /* desplegable de idiomas */ #header .mm-idiomas-lista { display: none; position: absolute; right: 0; top: 100%; min-width: 200px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px rgba(14,19,37,.22); z-index: 10001; } #header .mm-idiomas.mm-abierto > .mm-idiomas-lista { display: block; } #header .mm-idiomas-lista li { display: block; } #header .mm-idiomas-lista a { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--pgmm-texto); } #header .mm-idiomas-lista a:hover { background: #eaf2fb; } #header .mm-idiomas-lista .mm-idioma-codigo { min-width: 24px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--pgmm-azul); } #header .mm-idiomas-lista .mm-idioma-actual a { font-weight: 700; background: #f4f7fa; } } @media (min-width: 992px) and (hover: hover) { #header .mm:hover > a .link-txt > .fa-angle-down { opacity: 1; } #header .mm-idiomas:hover > .mm-idiomas-lista { display: block; } } @media (max-width: 991px) { /* en el menú móvil los idiomas se ven siempre, como una fila de botones */ #header .mm-idiomas > a { display: none !important; } #header .mm-idiomas-lista { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px; } #header .mm-idiomas-lista li { display: block; } #header .mm-idiomas-lista a { display: inline-flex; padding: 7px 13px; border: 1px solid #d3dfeb; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--pgmm-texto); } #header .mm-idiomas-lista .mm-idioma-nombre { display: none; } #header .mm-idiomas-lista .mm-idioma-actual a { background: var(--pgmm-azul-claro); border-color: var(--pgmm-azul-claro); color: #fff; } } /* =============================================================== aparición suave (1.2.2) * Paneles, fondo oscuro y desplegable de idiomas pasan de display:none a visibles; la animación de entrada corre * cada vez que aparecen (al cerrarse desaparecen sin más). En los paneles se animan «translate» y «filter» porque * «transform» y «opacity» van con !important para ganar al tema, y una animación no puede con un !important. */ @keyframes pgmm-aparece { from { filter: opacity(0); translate: 0 -8px; } to { filter: opacity(1); translate: 0 0; } } @keyframes pgmm-funde { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { #header .mm > .mm-panel { animation: pgmm-aparece .22s ease-out; } body.pgmm-fondo-on #pgmm-fondo { animation: pgmm-funde .22s ease-out; } } @media (min-width: 992px) and (prefers-reduced-motion: no-preference) { #header .mm-idiomas-lista { animation: pgmm-aparece .18s ease-out; } }