/* Guillem Recolons — componentes del tema. Los tokens (colores, fuentes, tamaños) están en theme.json. */ /* «Párrafo normal» = p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]): WordPress 7.1 añade la clase wp-block-paragraph a todos los párrafos al mostrarlos, así que p:not([class]) ya no coincide con ninguno. */ :root { --gr-r-l: var(--wp--custom--radio--l); --gr-r-m: var(--wp--custom--radio--m); --gr-r-s: var(--wp--custom--radio--s); --gr-marino: var(--wp--preset--color--marino); --gr-blanco: var(--wp--preset--color--blanco); --gr-sombra: 0 24px 48px -24px rgba(10, 25, 47, .35); --gr-texto-oscuro: rgba(255, 255, 255, .82); } body { -webkit-font-smoothing: antialiased; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Énfasis dorado en titulares y frases (en el editor: cursiva) */ :where(h1, h2, h3, .is-style-frase, .gr-remate) em { font-style: normal; color: var(--wp--preset--color--dorado-tit); } /* ---------- Contextos oscuros ---------- */ .gr-hero, .is-style-panel-oscuro, .gr-destacado, .gr-cabecera-pagina, .gr-cabecera-articulo, .gr-cabecera-servicio, .gr-lateral__oscuro, .is-style-paso:not(:last-child) { color: var(--gr-texto-oscuro); } :is(.gr-hero, .is-style-panel-oscuro, .gr-destacado, .gr-cabecera-pagina, .gr-cabecera-articulo, .gr-cabecera-servicio, .gr-lateral__oscuro, .is-style-paso:not(:last-child)) :is(h1, h2, h3) { color: var(--gr-blanco); } :is(.gr-hero, .is-style-panel-oscuro, .gr-destacado, .gr-cabecera-pagina, .gr-cabecera-servicio) :is(h1, h2, h3) em { color: var(--wp--preset--color--dorado-cla); } :is(.gr-hero, .is-style-panel-oscuro, .gr-cabecera-pagina, .gr-cabecera-articulo, .gr-lateral__oscuro) a:not(.wp-element-button) { color: var(--gr-blanco); } /* ---------- Botones: píldora con círculo y flecha ---------- */ .wp-block-button__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; text-align: left; } .wp-block-button__link::after { content: "→"; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--dorado); color: var(--gr-marino); transition: transform .2s ease; } .wp-block-button__link:hover::after { transform: translateX(3px); } .wp-block-button.is-style-oro .wp-block-button__link { background: linear-gradient(90deg, #B5894A, #CBA46A); color: var(--gr-marino); } .wp-block-button.is-style-oro .wp-block-button__link::after { background: var(--gr-marino); color: var(--gr-blanco); } .wp-block-button.is-style-vidrio .wp-block-button__link { background: rgba(255, 255, 255, .06); color: var(--gr-blanco); border: 1px solid rgba(255, 255, 255, .3); } .wp-block-button.is-style-vidrio .wp-block-button__link::after { background: var(--gr-blanco); color: var(--gr-marino); } .wp-block-button.is-style-linea .wp-block-button__link { background: transparent; color: var(--gr-marino); border: 1px solid var(--gr-marino); } .wp-block-button.is-style-linea .wp-block-button__link::after { background: var(--gr-marino); color: var(--gr-blanco); } .wp-block-button__width-100 .wp-block-button__link { width: 100%; } /* ---------- Cabecera en cápsula (sobre el marino del hero o de la cabecera de página) ---------- */ /* Menú fijo (sticky): el contenedor de la cabecera se queda arriba al desplazar; mide 0 px de alto para seguir superpuesto al encabezado de cada página, y la cápsula va dentro. */ .wp-site-blocks > header { position: sticky; top: 14px; z-index: 20; height: 0; } .admin-bar .wp-site-blocks > header { top: 46px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header { top: 60px; } } .gr-cabecera { position: absolute; inset: 0 0 auto; z-index: 20; } /* Las anclas (#contacto, sumario…) y el foco con teclado no quedan debajo del menú fijo */ html { scroll-padding-top: 112px; } /* El desenfoque va en un pseudoelemento: en la propia cápsula, «backdrop-filter» encerraría el menú móvil (position: fixed) dentro de ella */ .gr-capsula { position: relative; isolation: isolate; gap: 16px; padding: 10px 12px 10px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; } .gr-capsula::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(10, 25, 47, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* .9: el texto blanco sigue por encima de 4,5:1 también sobre las secciones claras */ .gr-logo { margin: 0; flex: none; } /* El nombre ocupa solo la franja inferior del logotipo: por debajo de ~50 px de alto deja de leerse */ .gr-logo img { height: 64px !important; width: auto !important; } .gr-menu-movil .gr-logo img { height: 52px !important; } @media (max-width: 1279px) { .gr-cabecera .gr-logo img { height: 52px !important; } } /* Logo del sitio (bloque Logo del sitio, adjunto en la biblioteca): es oscuro y monocromo; sobre marino (cabecera y menú móvil) se pinta en blanco */ .gr-logo a { display: block; line-height: 0; } .gr-logo--claro img { filter: brightness(0) invert(1); } /* WordPress fuerza «color: inherit» en los enlaces: el color se da al contenedor */ .gr-nav, .gr-nav .wp-block-navigation-item { color: rgba(255, 255, 255, .82); } .gr-nav .wp-block-navigation-item__content { padding: 8px 12px; border-radius: 999px; font-size: var(--wp--preset--font-size--s); font-weight: 500; text-decoration: none; } .gr-nav .wp-block-navigation-item:hover { color: var(--gr-blanco); } .gr-nav .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, .06); } .gr-nav .current-menu-item { color: var(--gr-blanco); } .gr-nav .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; } .gr-nav .current-menu-item > .wp-block-navigation-item__content::before { content: "• "; color: var(--wp--preset--color--dorado-cla); } .gr-nav .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; padding: 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: var(--gr-blanco); } .gr-nav .wp-block-navigation__responsive-container-open svg { fill: currentColor; } /* El bloque Navegación pasa a menú completo a 600 px; con logo y botón no cabe hasta 1280 px */ @media (max-width: 1279px) { .gr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .gr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .gr-capsula > .gr-nav { margin-left: auto; } .gr-cabecera__contacto { display: none !important; } } /* Menú móvil (parte «menu-movil», área navigation-overlay) */ .wp-block-navigation__responsive-container.is-menu-open { background: var(--gr-marino) !important; color: var(--gr-blanco) !important; padding: 14px clamp(16px, 4vw, 40px) !important; } .gr-menu-movil { gap: 12px; width: 100%; max-width: 560px; margin-inline: auto; } .gr-menu-movil__cab { width: 100%; padding: 10px 12px 10px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; } .gr-menu-movil__cierra, .gr-menu-movil__cierra button { min-width: 44px; min-height: 44px; color: var(--gr-blanco); } .gr-menu-movil__nav, .gr-menu-movil__nav .wp-block-navigation-item { width: 100%; color: var(--gr-blanco); } .gr-menu-movil__nav .wp-block-navigation__container { width: 100%; gap: 2px !important; } .gr-menu-movil__nav .wp-block-navigation-item { width: 100%; } .gr-menu-movil__nav .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 16px !important; border-radius: 14px; color: var(--gr-blanco); font-size: 1.125rem; font-weight: 500; text-decoration: none; } .gr-menu-movil__nav .current-menu-item { color: var(--wp--preset--color--dorado-cla); } .gr-menu-movil__nav .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; } .gr-menu-movil__botones { width: 100%; } /* La cabecera va superpuesta: el main empieza arriba del todo */ .wp-site-blocks > main { margin-block-start: 0; } .wp-site-blocks > footer { margin-block-start: 0; } /* ---------- Hero ---------- */ .gr-hero { position: relative; overflow: hidden; background: radial-gradient(110% 80% at 85% 15%, var(--wp--preset--color--marino-3) 0%, var(--wp--preset--color--marino-2) 38%, var(--gr-marino) 78%); border-radius: 0 0 var(--gr-r-l) var(--gr-r-l); padding-top: 120px; margin-block-start: 0 !important; } .gr-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; } .gr-hero__columnas { position: relative; gap: 40px !important; margin-bottom: 0; } .gr-hero__txt { padding-top: 32px; } .gr-hero h1 { max-width: 14ch; margin-block: 18px 22px; } .gr-hero__intro { font-size: 1.125rem; max-width: 52ch; } .gr-hero .wp-block-buttons { margin-top: 28px; } .gr-nota { font-size: var(--wp--preset--font-size--s); opacity: .88; } .gr-firma { margin-top: 44px !important; font-size: var(--wp--preset--font-size--s); font-style: italic; padding-bottom: 8px; } .gr-firma strong { display: block; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--gr-blanco); } .gr-hero__foto { position: relative; max-width: 440px; width: 100%; margin-inline: auto; } .gr-hero__img { margin: 0; } .gr-hero__img img { width: 100%; border-radius: var(--gr-r-l) var(--gr-r-l) 0 0; border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; -webkit-mask-image: linear-gradient(#000 74%, transparent 99%); mask-image: linear-gradient(#000 74%, transparent 99%); } .gr-chapa { position: absolute; margin: 0 !important; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 25, 47, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--gr-blanco); font-size: .875rem; line-height: 1.35; } .gr-chapa strong { display: block; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; color: var(--wp--preset--color--dorado-cla); } .gr-chapa-1 { left: 8px; bottom: 26%; } .gr-chapa-2 { right: 8px; bottom: 28px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; } .gr-chapa-2::before { content: ""; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--wp--preset--color--dorado-cla); } /* ---------- Bloques de la portada ---------- */ .wp-block-post-content > .gr-bloque { margin-block-start: var(--wp--preset--spacing--70); } .wp-block-post-content > .gr-bloque + .gr-bloque.is-style-panel-oscuro, .wp-block-post-content > .gr-bloque.is-style-panel-oscuro + .gr-bloque { margin-block-start: var(--wp--preset--spacing--60); } .wp-block-post-content > :last-child { margin-block-end: var(--wp--preset--spacing--60); } .gr-separadas { gap: clamp(32px, 5vw, 64px) !important; } .gr-entradilla { color: var(--wp--preset--color--gris); max-width: 62ch; font-size: 1.125rem; } .gr-bloque h2 { max-width: 20ch; } /* Ceja con ✦ */ .is-style-ceja { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } .is-style-ceja::before { content: "✦"; font-size: .9rem; } :is(.gr-hero, .is-style-panel-oscuro, .gr-destacado, .gr-cabecera-pagina, .gr-cabecera-articulo, .gr-cabecera-servicio, .gr-lateral__oscuro) .is-style-ceja { color: var(--wp--preset--color--dorado-cla); } .is-style-ceja + :is(h1, h2) { margin-top: 14px; } /* Frase destacada */ .is-style-frase { max-width: 28ch; margin: var(--wp--preset--spacing--70) auto 0 !important; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gr-marino); text-wrap: balance; } .gr-remate { margin-top: 40px !important; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--gr-marino); } /* Rejillas de tarjetas */ .gr-rejilla { display: grid; gap: 14px; margin-top: 32px; } .gr-rejilla > * { margin: 0 !important; } .gr-rejilla--cifras { grid-template-columns: 1fr 1fr; } @media (max-width: 359px) { .gr-rejilla--cifras { grid-template-columns: 1fr; } } @media (min-width: 700px) { .gr-rejilla--3, .gr-rejilla--servicios { grid-template-columns: repeat(2, 1fr); } .gr-rejilla--3 > :last-child, .gr-rejilla--servicios > :first-child { grid-column: 1 / -1; } } @media (min-width: 1000px) { .gr-rejilla--3, .gr-rejilla--servicios, .gr-rejilla--pasos { grid-template-columns: repeat(3, 1fr); } .gr-rejilla--cifras { grid-template-columns: repeat(4, 1fr); } .gr-rejilla--3 > :last-child, .gr-rejilla--servicios > :first-child { grid-column: auto; } } /* Tarjeta */ .is-style-tarjeta { background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); padding: clamp(22px, 3vw, 28px); } .is-style-tarjeta > :first-child { margin-top: 0; } .is-style-tarjeta p { color: var(--wp--preset--color--gris); } .is-style-tarjeta h3 + p { margin-top: 10px; } .gr-test { padding: clamp(28px, 5vw, 56px); border-radius: var(--gr-r-l); } .gr-iobrand { margin-top: 14px !important; } .gr-iceberg > .is-style-ceja { margin-top: 40px; } .gr-iobrand .wp-block-columns { margin: 0; } /* Iconos de las tarjetas del punto de partida */ .gr-ico::before { content: ""; display: block; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 50%; background: var(--wp--preset--color--fondo) no-repeat center / 22px; } .gr-ico--ojo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A192F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1A10.4 10.4 0 0 1 12 5c5 0 9 4.5 10 7a13 13 0 0 1-2.7 3.9M6.6 6.6C4.3 8 2.7 10.2 2 12c1 2.5 5 7 10 7 1.8 0 3.4-.6 4.8-1.4M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); } .gr-ico--silencio::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A192F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4V5zM22 9l-6 6M16 9l6 6'/%3E%3C/svg%3E"); } .gr-ico--capas::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A192F' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2l10 5-10 5L2 7l10-5zM2 12l10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E"); } /* Panel marino */ .is-style-panel-oscuro { background: var(--gr-marino); border-radius: var(--gr-r-l); padding: clamp(32px, 6vw, 72px); } .is-style-panel-oscuro .wp-block-columns { margin: 0; } .gr-resultados { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--gr-r-m); padding: 28px; } .gr-mini { font-size: var(--wp--preset--font-size--xs) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc) !important; margin-bottom: 12px; } .gr-resultados .gr-mini { color: var(--wp--preset--color--dorado-cla) !important; } /* Pasos del Método Iceberg */ .is-style-paso { position: relative; border-radius: var(--gr-r-m); padding: 28px; overflow: hidden; } .is-style-paso:nth-child(1) { background: var(--gr-marino); } .is-style-paso:nth-child(2) { background: var(--wp--preset--color--marino-2); } .is-style-paso:last-child { background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); } .is-style-paso p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { font-size: 1rem; } .is-style-paso:last-child p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--wp--preset--color--gris); } .is-style-paso h3 { margin-block: 8px 12px; } .is-style-numero { margin: 0; font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--wp--preset--color--dorado-cla); } .is-style-paso:last-child .is-style-numero { color: var(--wp--preset--color--dorado-tit); } .is-style-etiqueta { margin: 18px 0 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--dorado-osc); } :is(.is-style-paso:not(:last-child), .gr-destacado) .is-style-etiqueta { color: var(--wp--preset--color--dorado-cla); } /* Servicios: toda la tarjeta es clicable (enlace estirado) */ .is-style-servicio { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); padding: 28px; } .is-style-servicio > * { margin: 0 !important; } .is-style-servicio .is-style-etiqueta { margin: 0; } .is-style-servicio p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--wp--preset--color--gris); font-size: 1rem; } .is-style-servicio .wp-block-buttons { margin-top: auto !important; padding-top: 8px; } .is-style-servicio .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: var(--gr-r-m); } .is-style-servicio:has(.wp-block-button__link:focus-visible) { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .is-style-servicio .wp-block-button__link:focus-visible { outline: none; } .gr-destacado { background: var(--gr-marino); border-color: var(--gr-marino); } .gr-destacado p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--gr-texto-oscuro); } /* Cifras */ .is-style-cifra { background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); padding: 22px; } .is-style-cifra .is-style-numero { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); color: var(--gr-marino); margin-bottom: 8px; } .is-style-cifra p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { margin: 0; color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--s); } .gr-clientes-titulo { margin-top: 48px !important; font-size: 1.25rem !important; } /* Empresas (portada, «Experiencia en proyectos»): los nombres corren como una frase, grandes y en marino, con negrita alterna y separados por el ✦ de la marca. assets/js/empresas.js oculta el ✦ del final de cada línea (visibility: no cambia el ancho, así que no recoloca nada). */ .gr-clientes-titulo:has(+ .gr-empresas) { margin: 56px 0 14px !important; font-size: var(--wp--preset--font-size--xs) !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } .gr-empresas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; } .gr-empresas li { margin: 0; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.35rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--gr-marino); } .gr-empresas li:nth-child(odd) { font-weight: 700; } .gr-empresas li::after { content: "✦"; content: "✦" / ""; margin: 0 .55em; font-size: .45em; font-weight: 400; vertical-align: .45em; color: var(--wp--preset--color--dorado); } .gr-empresas li:last-child::after, .gr-empresas li.gr-empresas__fin::after { visibility: hidden; } /* Listas */ .is-style-checks, .is-style-pildoras, .is-style-cuadros, .is-style-destellos { list-style: none; padding: 0; } .is-style-checks { display: grid; gap: 4px; margin: 0; } .is-style-checks li { position: relative; padding: 10px 0 10px 34px; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .9); } .is-style-checks li:first-child { border-top: 0; } .is-style-checks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: rgba(200, 166, 119, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23C8A677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; } .is-style-pildoras { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .is-style-pildoras li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 16px; border-radius: 999px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); color: var(--gr-marino); font-weight: 700; font-size: var(--wp--preset--font-size--s); } /* El punto del logotipo de Guillem */ .is-style-pildoras li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--dorado); } .is-style-cuadros { display: grid; gap: 10px; } .is-style-cuadros li { display: flex; gap: 12px; align-items: flex-start; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-s); padding: 14px 16px; color: var(--gr-marino); font-weight: 500; font-size: 1rem; } .is-style-cuadros li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--wp--preset--color--dorado); } .is-style-destellos { display: grid; gap: 8px; margin: 0; } .is-style-destellos li { display: flex; gap: 10px; color: var(--gr-marino); font-weight: 500; } .is-style-destellos li::before { content: "✦"; color: var(--wp--preset--color--dorado); } .is-style-recuadro-claro { background: var(--wp--preset--color--fondo); border-radius: var(--gr-r-m); padding: 26px; } /* Sobre Guillem */ .gr-foto-redonda { margin: 0; } .gr-foto-redonda img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--gr-r-l); } @media (min-width: 1000px) { .gr-sobre__foto { position: sticky; top: 24px; align-self: flex-start; } } /* Cita */ .wp-block-quote.is-style-cita { margin: 0; padding: 28px; border: 0; border-left: 3px solid var(--wp--preset--color--dorado); border-radius: var(--gr-r-m); background: rgba(255, 255, 255, .05); } .wp-block-quote.is-style-cita p { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gr-blanco); margin: 0; } .wp-block-quote.is-style-cita em { font-style: normal; color: var(--wp--preset--color--dorado-cla); } /* FAQ (bloque Detalles) */ .wp-block-details { background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: 18px; margin-top: 10px !important; } .wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; color: var(--gr-marino); border-radius: 18px; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--wp--preset--color--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 13l5 5 5-5' fill='none' stroke='%230A192F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; transition: transform .2s ease; } .wp-block-details[open] summary::after { transform: rotate(180deg); } .wp-block-details > :not(summary) { padding: 0 20px; margin: 0 0 20px; color: var(--wp--preset--color--gris); } /* Formulario de contacto (WPForms, marcado moderno): sus variables CSS con los tokens del tema */ .gr-formulario .wpforms-container { --wpforms-field-border-radius: 12px; --wpforms-field-border-color: #8A8F98; --wpforms-field-background-color: #FFFFFF; --wpforms-field-text-color: #222222; --wpforms-field-size-font-size: 1rem; --wpforms-field-size-input-height: 48px; --wpforms-label-color: #0A192F; --wpforms-label-sublabel-color: #545B67; --wpforms-label-error-color: #B42318; --wpforms-label-size-font-size: 0.9375rem; --wpforms-button-background-color: #0A192F; --wpforms-button-text-color: #FFFFFF; --wpforms-button-border-radius: 999px; --wpforms-button-size-height: 48px; --wpforms-button-size-font-size: 1rem; margin: 0 !important; font-family: inherit; } .gr-formulario .wpforms-field-label { font-weight: 700 !important; } .gr-formulario .wpforms-field-radio ul { gap: 8px !important; } .gr-formulario .wpforms-field-radio li { margin: 0 !important; } .gr-formulario .wpforms-field-radio li { position: relative; display: inline-flex !important; } /* Opción como pastilla: el círculo va dentro, a la izquierda; la elegida, en marino */ .gr-formulario .wpforms-field-radio li input[type="radio"] { position: absolute !important; top: 50%; left: 14px; z-index: 1; width: 18px !important; height: 18px !important; margin: 0 !important; transform: translateY(-50%); accent-color: var(--gr-marino); cursor: pointer; } .gr-formulario .wpforms-field-radio li label { display: inline-flex !important; align-items: center; min-height: 44px; padding: 8px 18px 8px 42px !important; border: 1px solid var(--wp--preset--color--linea); border-radius: 999px; background: var(--gr-blanco); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .gr-formulario .wpforms-field-radio li label:hover { border-color: var(--gr-marino); } .gr-formulario .wpforms-field-radio li:has(input:checked) label { border-color: var(--gr-marino); background: var(--gr-marino); color: var(--gr-blanco); font-weight: 700; } .gr-formulario .wpforms-field-radio li input:checked { accent-color: var(--wp--preset--color--dorado-cla); } .gr-formulario .wpforms-field-radio li:has(input:focus-visible) label { outline: 3px solid var(--gr-marino); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gr-formulario .wpforms-field-radio li label { transition: none; } } .gr-formulario .wpforms-field-gdpr-checkbox a { color: var(--gr-marino); } .gr-formulario button.wpforms-submit { display: inline-flex !important; align-items: center; gap: 12px; padding: 6px 6px 6px 22px !important; font-weight: 700 !important; } .gr-formulario button.wpforms-submit::after { content: "→"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--dorado); color: var(--gr-marino); } .gr-formulario .wpforms-confirmation-container-full { background: var(--wp--preset--color--fondo) !important; border: 1px solid var(--wp--preset--color--linea) !important; border-radius: 12px; color: var(--gr-marino) !important; } /* Caja del formulario; marcador .gr-pendiente (contenido que falta): recuadro discontinuo naranja */ .gr-formulario { background: var(--gr-blanco); color: var(--wp--preset--color--tinta); border-radius: var(--gr-r-m); padding: clamp(22px, 4vw, 32px); } .gr-pendiente { outline: 2px dashed #C2410C; outline-offset: 4px; color: #9A3412 !important; font-size: var(--wp--preset--font-size--s); } /* Columnas: apiladas hasta 1000 px (WordPress las apila solo hasta 782 px) */ @media (max-width: 999px) { :is(.gr-hero__columnas, .gr-separadas, .gr-partida__cab, .gr-iobrand .wp-block-columns) { flex-wrap: wrap !important; } :is(.gr-hero__columnas, .gr-separadas, .gr-partida__cab, .gr-iobrand .wp-block-columns) > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 1000px) { .gr-hero__columnas { min-height: 640px; } .gr-hero__txt { padding-block: 56px 48px; } .gr-chapa-1 { left: -56px; } } @media (min-width: 700px) and (max-width: 999px) { .gr-chapa-1 { left: -20px; } } /* ---------- Páginas interiores ---------- */ .gr-cabecera-pagina { background: radial-gradient(110% 120% at 85% 0%, var(--wp--preset--color--marino-3) 0%, var(--gr-marino) 70%); border-radius: 0 0 var(--gr-r-l) var(--gr-r-l); padding-top: 170px; padding-bottom: var(--wp--preset--spacing--60); margin-block-start: 0 !important; } .gr-cabecera-pagina h1 { font-size: var(--wp--preset--font-size--xxl); max-width: 24ch; } .gr-cabecera-pagina .wp-block-post-date, .gr-cabecera-pagina .wp-block-post-terms, .gr-cabecera-pagina .gr-autor { color: var(--wp--preset--color--dorado-cla); font-size: var(--wp--preset--font-size--s); font-weight: 700; } .gr-contenido { margin-top: var(--wp--preset--spacing--60); } .gr-rejilla-entradas { margin-top: var(--wp--preset--spacing--60) !important; } .gr-entrada { gap: 10px; height: 100%; } .gr-entrada__img { margin: -1px -1px 8px !important; width: calc(100% + 2px); } .gr-entrada__img img { border-radius: var(--gr-r-s); } .gr-entrada__titulo { font-size: var(--wp--preset--font-size--l) !important; } .gr-entrada__titulo a { text-decoration: none; } /* Palabras y URL largas escritas en el texto (p. ej. un enlace con la URL como texto): se parten en vez de ensanchar la página */ :where(.wp-block-post-content, .gr-prosa, .wp-block-comment-content) { overflow-wrap: break-word; } :where(.wp-block-post-content, .gr-prosa) a { overflow-wrap: anywhere; } /* ---------- Texto de artículo (.gr-prosa) ---------- Lectura larga con los tokens de la portada: cuerpo a 1.125rem (el de la entradilla), columna de 37.5rem = 600 px (unos 70 caracteres por línea), titulares un escalón por debajo de los de la portada (h2 = xl, h3 = l) y el dorado solo como decoración (subrayado, viñetas, filetes). */ .gr-prosa { --wp--style--global--content-size: 37.5rem; font-size: 1.125rem; line-height: 1.7; } /* Tamaños antiguos de WordPress en entradas antiguas (medium, small y large): WordPress aún los define (medium = 14–20 px), así que se llevan a la escala del tema: medium = texto, small = S, large = L. */ .gr-prosa .has-medium-font-size { font-size: inherit !important; } .gr-prosa .has-small-font-size { font-size: var(--wp--preset--font-size--s) !important; } .gr-prosa .has-large-font-size { font-size: var(--wp--preset--font-size--l) !important; } .gr-prosa :is(h2, h3, h4) { scroll-margin-top: 0; } .gr-prosa h2 { font-size: var(--wp--preset--font-size--xl); line-height: 1.15; margin-block: var(--wp--preset--spacing--50) 0; } .gr-prosa h3 { font-size: var(--wp--preset--font-size--l); margin-block: var(--wp--preset--spacing--40) 0; } .gr-prosa h4 { font-size: 1.125rem; line-height: 1.35; letter-spacing: 0; margin-block: var(--wp--preset--spacing--40) 0; } .gr-prosa :is(h2, h3, h4) + * { margin-block-start: .75rem; } .gr-prosa a:where(:not(.wp-element-button, .wp-block-button__link, .gr-terceros a)) { color: var(--gr-marino); text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); text-decoration-thickness: 2px; text-underline-offset: .2em; } .gr-prosa a:where(:not(.wp-element-button, .wp-block-button__link, .gr-terceros a)):hover { text-decoration-color: currentColor; } .gr-prosa strong { font-weight: 700; } .gr-prosa mark { padding: .05em .25em; border-radius: 4px; background: color-mix(in srgb, var(--wp--preset--color--dorado) 30%, transparent); color: inherit; } .gr-prosa :is(ul, ol):not([class*="is-style-"]) { padding-inline-start: 1.4em; } .gr-prosa li + li { margin-top: .4em; } .gr-prosa ul:not([class*="is-style-"]) > li::marker { color: var(--wp--preset--color--dorado); } .gr-prosa ol:not([class*="is-style-"]) > li::marker { color: var(--wp--preset--color--dorado-osc); font-weight: 700; } .gr-prosa dt { font-weight: 700; color: var(--gr-marino); } .gr-prosa dd { margin: 0 0 .75em; } /* Cita: filete dorado; el texto, en marino. Autor (cite) en gris. */ .gr-prosa blockquote:not(.is-style-cita) { margin-inline: 0; padding: 2px 0 2px 24px; border: 0; border-left: 3px solid var(--wp--preset--color--dorado); color: var(--gr-marino); font-weight: 500; } .gr-prosa blockquote:not(.is-style-cita) > * + * { margin-top: .75rem; } .gr-prosa blockquote cite { display: block; margin-top: .75rem; font-size: var(--wp--preset--font-size--s); font-style: normal; font-weight: 400; color: var(--wp--preset--color--gris); } /* Cita destacada (pullquote): la «frase destacada» de la portada con el ✦ de la ceja */ .gr-prosa .wp-block-pullquote { margin-block: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--40) 0; border: 0; border-block: 1px solid var(--wp--preset--color--linea); text-align: center; } .gr-prosa .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; } .gr-prosa .wp-block-pullquote blockquote::before { content: "✦"; display: block; margin-bottom: 12px; color: var(--wp--preset--color--dorado); } .gr-prosa .wp-block-pullquote p { font-size: var(--wp--preset--font-size--l); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--gr-marino); text-wrap: balance; } /* Imágenes y pies de foto (bloque Imagen y [caption] de las entradas clásicas) */ .gr-prosa :is(.wp-block-image, .wp-caption, .wp-block-gallery) img { border-radius: var(--gr-r-s); } .gr-prosa :is(figcaption, .wp-caption-text) { margin: 10px 0 0; font-size: var(--wp--preset--font-size--s); line-height: 1.5; color: var(--wp--preset--color--gris); text-align: start; } .gr-prosa .wp-caption { max-width: 100%; } .gr-prosa .aligncenter { display: block; margin-inline: auto; } .gr-prosa :is(img, figure, .wp-caption).alignleft { float: left; max-width: 45%; margin: .35em 1.5em 1em 0; } .gr-prosa :is(img, figure, .wp-caption).alignright { float: right; max-width: 45%; margin: .35em 0 1em 1.5em; } .gr-prosa::after { content: ""; display: table; clear: both; } @media (max-width: 599px) { .gr-prosa :is(img, figure, .wp-caption):is(.alignleft, .alignright) { float: none; max-width: 100%; margin: 1em 0; } } /* Tablas: fondo blanco, cabecera en «fondo 2» y filetes de «línea». Van en un marco (gr-tabla, functions.php) que se desplaza en horizontal; la sombra del borde (fondos «local» que tapan una sombra «scroll») indica que queda tabla por ver. */ .gr-tabla { overflow-x: auto; margin-block: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-s); background: linear-gradient(to right, var(--gr-blanco) 30%, rgb(255 255 255 / 0)) left center / 48px 100% no-repeat local, linear-gradient(to left, var(--gr-blanco) 30%, rgb(255 255 255 / 0)) right center / 48px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgb(10 25 47 / .25), transparent) left center / 18px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(10 25 47 / .25), transparent) right center / 18px 100% no-repeat scroll, var(--gr-blanco); } .gr-tabla:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .gr-tabla table { margin: 0; border: 0; background: transparent; } .gr-tabla > figcaption { position: sticky; left: 0; padding: 0 14px 12px; } /* 3 o más columnas: la tabla mide al menos 9rem por columna (min-width no funciona en las celdas); en móvil, la tabla se desplaza en vez de trocear el texto */ .gr-tabla--ancha table { min-width: calc(var(--gr-columnas, 3) * 9rem); table-layout: auto; } :is(.gr-prosa, .gr-tabla) table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--s); line-height: 1.5; } :is(.gr-prosa, .gr-tabla) :is(th, td) { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--wp--preset--color--linea); text-align: start; vertical-align: top; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } :is(.gr-prosa, .gr-tabla) tr:last-child > :is(th, td) { border-bottom: 0; } :is(.gr-prosa, .gr-tabla) :is(thead th, table > tbody:first-child > tr:first-child > th) { background: color-mix(in srgb, var(--wp--preset--color--fondo-2) 80%, transparent); color: var(--gr-marino); font-weight: 700; } :is(.gr-prosa, .gr-tabla) thead tr:last-child > th { border-bottom: 1px solid var(--wp--preset--color--linea); } :is(.gr-prosa, .gr-tabla) :is(thead, tfoot) { border: 0; } /* Separadores: filete de «línea»; el estilo de puntos, con ✦ */ .gr-prosa :is(hr, .wp-block-separator) { height: 1px; margin-block: var(--wp--preset--spacing--50); border: 0; background: var(--wp--preset--color--linea); opacity: 1; } .gr-prosa .wp-block-separator.is-style-dots { height: auto; background: none; text-align: center; line-height: 1; } .gr-prosa .wp-block-separator.is-style-dots::before { content: "✦ ✦ ✦"; padding-left: 0; letter-spacing: .6em; font-size: .9rem; color: var(--wp--preset--color--dorado); } /* ---------- Guía de estilo (página privada) ---------- */ /* Rótulos de sección iguales en todas (también en las de texto de artículo) y a la misma medida que el texto */ .gr-guia__seccion { --wp--style--global--content-size: 37.5rem; } .gr-guia__seccion .gr-guia__h { font-size: var(--wp--preset--font-size--xxl); line-height: 1.08; margin-block: 14px 0; } .gr-guia__fuente { clear: both; } .gr-guia__colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .gr-guia__colores > * { margin: 0 !important; } .gr-guia__color { min-height: 96px; border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-s); } .gr-guia__dato { margin: 8px 0 0 !important; font-size: var(--wp--preset--font-size--xs); line-height: 1.45; color: var(--wp--preset--color--gris); } .gr-guia__dato strong { display: block; font-size: var(--wp--preset--font-size--s); color: var(--gr-marino); } .gr-guia__fuente { font-size: var(--wp--preset--font-size--xs) !important; color: var(--wp--preset--color--gris); } .gr-guia__escala > p { margin: 0 !important; padding-block: 10px; border-bottom: 1px solid var(--wp--preset--color--linea); color: var(--gr-marino); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } /* ---------- Plantilla de artículo (templates/single.html, inc/articulo.php) ---------- Móvil: una columna de hasta 600 px. Desde 1024 px: texto (600) + barra lateral (300). Desde 1200 px: carril de compartir a la izquierda. */ .gr-cabecera-articulo { background: var(--gr-marino); border-radius: 0 0 var(--gr-r-l) var(--gr-r-l); padding: 150px clamp(16px, 4vw, 40px) var(--wp--preset--spacing--50); margin-block-start: 0 !important; } .gr-cabecera-articulo__in { max-width: 600px; margin-inline: auto; } .gr-cabecera-articulo h1 { font-size: var(--wp--preset--font-size--xxl); max-width: 24ch; margin-block: 14px 18px; } .gr-categoria-principal { margin: 0; } .gr-cabecera-articulo .gr-categoria-principal a { color: var(--wp--preset--color--dorado-cla) !important; text-decoration: none; } .gr-cabecera-articulo .gr-categoria-principal a:hover { text-decoration: underline; } /* Separador «·» a la izquierda de cada dato, fuera de su caja: el que cae a principio de línea queda recortado (overflow) */ .gr-meta { gap: 6px 22px; overflow: hidden; font-size: var(--wp--preset--font-size--s); } .gr-meta > * { position: relative; margin: 0; } .gr-meta > * + *::before { content: "·"; position: absolute; left: -14px; } .gr-cabecera-articulo .wp-block-post-date { color: inherit; font-size: inherit; font-weight: 400; } .gr-meta .wp-block-post-author-name a { font-weight: 700; text-decoration: none; } .gr-meta .wp-block-post-author-name a:hover { text-decoration: underline; } .gr-articulo { display: grid; grid-template-columns: minmax(0, 600px); justify-content: center; row-gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--50) clamp(16px, 4vw, 40px) var(--wp--preset--spacing--60); } .gr-articulo > * { margin: 0 !important; min-width: 0; } .gr-articulo__principal > * + * { margin-block-start: var(--wp--preset--spacing--40); } /* El texto ocupa la columna: sin el relleno global ni anchos mayores para los bloques anchos o completos */ .gr-articulo .gr-prosa { --wp--style--global--wide-size: 100%; } .gr-articulo .gr-prosa.has-global-padding { padding-inline: 0; } .gr-articulo .gr-prosa > :is(.alignwide, .alignfull) { max-width: 100% !important; margin-inline: 0 !important; } .gr-destacada { margin: 0; } .gr-destacada img { display: block; width: 100%; height: auto; border-radius: var(--gr-r-l); } /* Sumario */ .gr-sumario__lista { margin: 10px 0 0; padding-inline-start: 1.4em; font-size: var(--wp--preset--font-size--s); line-height: 1.4; } .gr-sumario__lista li + li { margin-top: 2px; } .gr-sumario__lista li::marker { color: var(--wp--preset--color--dorado-osc); font-weight: 700; } .gr-sumario__lista a { display: inline-block; padding-block: 6px; color: var(--gr-marino); text-decoration: none; } .gr-sumario__lista a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-sumario--movil details { background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); padding: 0 18px; } .gr-sumario--movil summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 700; color: var(--gr-marino); cursor: pointer; list-style: none; } .gr-sumario--movil summary::-webkit-details-marker { display: none; } .gr-sumario--movil summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--wp--preset--color--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 13l5 5 5-5' fill='none' stroke='%230A192F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; transition: transform .2s ease; } .gr-sumario--movil details[open] summary::after { transform: rotate(180deg); } .gr-sumario--movil details[open] { padding-bottom: 12px; } .gr-sumario--movil summary:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 3px; border-radius: 8px; } .gr-sumario--lateral { display: none; } /* Compartir: bloque al final (móvil y tableta) y carril (escritorio) */ .gr-compartir__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .gr-compartir__lista li { margin: 0 !important; } .gr-compartir__enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px 0 12px; border: 1px solid var(--wp--preset--color--linea); border-radius: 999px; background: var(--gr-blanco); color: var(--gr-marino); font: inherit; font-size: var(--wp--preset--font-size--s); font-weight: 700; text-decoration: none; cursor: pointer; } .gr-compartir__enlace:hover { border-color: var(--gr-marino); } .gr-compartir__enlace:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .gr-compartir__aviso { margin: 8px 0 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .gr-compartir__aviso:empty { display: none; } .gr-compartir--carril { display: none; } .gr-seccion__titulo { margin: 0; font-size: var(--wp--preset--font-size--l); } /* Sobre el autor (invitados) */ .gr-autor-invitado { padding: 22px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .gr-autor-invitado__nombre { margin: 10px 0 6px; font-weight: 700; } .gr-autor-invitado__nombre a { color: var(--gr-marino); } .gr-autor-invitado p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { margin: 0; color: var(--wp--preset--color--gris); font-size: 1rem; } /* Puede ser de tu interés: tarjetas apiladas en móvil, tres columnas desde 768 px */ .gr-relacionadas__consulta { margin-top: 16px; } .gr-tarjetas { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .gr-tarjetas > li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 !important; padding: 10px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .gr-tarjeta__img { margin: 0; } .gr-tarjeta__img img, .gr-tarjeta__img--vacia { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--gr-r-s); } .gr-tarjeta__img--vacia { display: grid; place-items: center; background: var(--wp--preset--color--fondo-2); } .gr-tarjeta__img--vacia::before { content: "✦"; font-size: 1.4rem; color: var(--wp--preset--color--dorado); } .gr-tarjeta__cuerpo > * { margin: 0; } .gr-tarjeta__cuerpo .gr-categoria-principal { font-size: var(--wp--preset--font-size--xs); } .gr-tarjeta__titulo { margin-top: 6px !important; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; } .gr-tarjeta__titulo a { color: var(--gr-marino); text-decoration: none; } .gr-tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--gr-r-m); } .gr-tarjetas > li:has(a:focus-visible) { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .gr-tarjeta__titulo a:focus-visible { outline: none; } @media (min-width: 768px) { .gr-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gr-tarjetas > li { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 0 0 16px; overflow: hidden; } .gr-tarjeta__img img, .gr-tarjeta__img--vacia { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; } .gr-tarjeta__cuerpo { padding-inline: 14px; } } /* Barra lateral */ .gr-articulo__lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; } .gr-articulo__lateral > * { margin: 0 !important; } .gr-lateral__bloque { padding: 20px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .gr-lateral__bloque > * + * { margin-block-start: 10px; } .gr-lateral__oscuro { background: var(--gr-marino); border-color: var(--gr-marino); } .gr-lateral__oscuro p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { font-size: var(--wp--preset--font-size--s); } .gr-lateral__titulo { margin: 0; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; } .gr-lateral__titulo a { color: var(--gr-marino); text-decoration: none; } .gr-lateral__titulo a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-bio { gap: 14px; } .gr-bio__foto { flex: none; margin: 0; } .gr-bio__foto img { width: 72px; height: 72px; object-fit: cover; object-position: top; border-radius: var(--gr-r-s); } .gr-bio__nombre { margin: 0; font-weight: 700; color: var(--gr-marino); } .gr-bio__texto { margin: 4px 0 0 !important; font-size: var(--wp--preset--font-size--s); line-height: 1.45; color: var(--wp--preset--color--gris); } .gr-servicios__lista { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .gr-servicios__lista li { margin: 0; } .gr-servicios__lista a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--gr-r-s); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: var(--wp--preset--font-size--s); line-height: 1.3; text-decoration: none; } .gr-servicios__lista a::after { content: "→"; flex: none; color: var(--wp--preset--color--dorado-cla); } .gr-servicios__lista a:hover { border-color: var(--wp--preset--color--dorado-cla); } .gr-servicios__lista a:focus-visible { outline: 3px solid var(--wp--preset--color--dorado-cla); outline-offset: 3px; } .gr-podcast .gr-terceros { flex-direction: column; align-items: flex-start; margin-block: 12px 0; padding: 16px; } .gr-directivos__lista { margin: 8px 0 0; padding: 0; list-style: none; } .gr-directivos__lista > li { margin: 0 !important; border-top: 1px solid var(--wp--preset--color--linea); } .gr-directivos__lista > li:first-child { border-top: 0; } .gr-directivos__titulo { margin: 0; font-size: var(--wp--preset--font-size--s); line-height: 1.35; letter-spacing: 0; } .gr-directivos__titulo a { display: block; padding-block: 11px; color: var(--gr-marino); text-decoration: none; } .gr-directivos__titulo a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-buscador .wp-block-search__label { font-weight: 700; color: var(--gr-marino); } .gr-buscador .wp-block-search__inside-wrapper { min-width: 0; } .gr-buscador .wp-block-search__input { min-width: 0; width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--wp--preset--color--gris); border-radius: 12px; font: inherit; } .gr-buscador .wp-block-search__button { min-height: 44px; margin-left: 8px; padding: 0 18px; border-radius: 999px; } .gr-buscador :is(.wp-block-search__input, .wp-block-search__button):focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 2px; } /* Comentarios: lista en hilos */ .gr-comentarios .wp-block-comment-template, .gr-comentarios .wp-block-comment-template ol { margin: 0; padding: 0; list-style: none; } .gr-comentarios .wp-block-comment-template { margin-top: 12px; } .gr-comentarios .wp-block-comment-template ol { padding-left: clamp(16px, 4vw, 32px); border-left: 2px solid var(--wp--preset--color--linea); } .gr-comentario { padding-block: 16px; border-top: 1px solid var(--wp--preset--color--linea); } .gr-comentario__cab { gap: 4px 12px; font-size: var(--wp--preset--font-size--s); } .gr-comentario__cab > * { margin: 0; } .gr-comentario .wp-block-comment-author-name { font-weight: 700; color: var(--gr-marino); } .gr-comentario .wp-block-comment-date, .gr-comentario .wp-block-comment-date a { color: var(--wp--preset--color--gris); } .gr-comentario .wp-block-comment-content { margin-top: 6px; font-size: 1rem; } .gr-comentario .wp-block-comment-content p { margin: 0 0 .6em; } @media (min-width: 1024px) { .gr-cabecera-articulo__in { max-width: 956px; } /* Filas: 1 sumario (si lo hay) · 2 resto del texto · 3 relacionadas · 4 comentarios; la barra ocupa de la 2 a la 4 */ .gr-articulo { grid-template-columns: minmax(0, 600px) 300px; grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; } .gr-articulo__principal, .gr-relacionadas, .gr-comentarios { grid-column: 1; } .gr-articulo__principal { grid-row: 1 / span 2; } .gr-relacionadas { grid-row: 3; } .gr-comentarios { grid-row: 4; } .gr-sumario--lateral { display: block; grid-column: 2; grid-row: 1; margin-bottom: 16px !important; } .gr-articulo__lateral { grid-column: 2; grid-row: 2 / span 3; } .gr-articulo:not(:has(> .gr-sumario--lateral)) .gr-articulo__lateral { grid-row: 1 / span 4; } .gr-sumario--movil { display: none; } .gr-sumario--lateral .gr-sumario__lista { margin-top: 6px; } } @media (min-width: 1200px) { .gr-cabecera-articulo__in { max-width: 1024px; padding-left: 84px; } .gr-articulo { grid-template-columns: 44px minmax(0, 600px) 300px; column-gap: 40px; } .gr-articulo__principal, .gr-relacionadas, .gr-comentarios { grid-column: 2; } .gr-articulo__lateral, .gr-sumario--lateral { grid-column: 3; } .gr-compartir--carril { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 24px; } .gr-compartir--carril .gr-compartir__lista { flex-direction: column; margin: 0; } .gr-compartir--carril .gr-compartir__enlace { padding: 0; justify-content: center; } .gr-compartir--carril .gr-compartir__nombre { display: none; } .gr-compartir--carril .gr-compartir__aviso { position: absolute; left: 0; top: 100%; width: max-content; } .gr-articulo__principal .gr-compartir--final { display: none; } } /* ---------- Páginas de servicio (templates/page-servicio.html, patterns/servicio-*.php) ---------- Contenedor: el mismo que la portada (wideSize de theme.json, 1200 px). */ .gr-servicio .gr-tabla table { font-size: 1rem; } .gr-programa { scroll-margin-top: 0; } .gr-cabecera-servicio__botones { margin-top: 28px; } /* Las dos frases del encabezado: una fila bajo los botones, separada por un filete */ .gr-cabecera-servicio__frases { display: grid; gap: 14px; margin-top: var(--wp--preset--spacing--50) !important; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid rgba(255, 255, 255, .14); } .gr-cabecera-servicio__frases > * { margin: 0 !important; } @media (min-width: 800px) { .gr-cabecera-servicio__frases { grid-template-columns: repeat(2, 1fr); } } .gr-cabecera-servicio__frases .wp-block-quote.is-style-cita { padding: 4px 0 4px 20px; background: none; border-radius: 0; } .gr-cabecera-servicio__frases .wp-block-quote.is-style-cita p { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); } /* Tarjetas «Dos caminos»: toda la tarjeta lleva a su sección (enlace estirado en el título) */ .gr-tarjeta-enlace { position: relative; } .gr-tarjeta-enlace :is(h2, h3) a { color: inherit; text-decoration: none; } .gr-tarjeta-enlace :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--gr-r-m); } .gr-tarjeta-enlace h3 a::before { content: "↓"; float: right; margin-left: 12px; color: var(--wp--preset--color--dorado-osc); } .gr-destacado.gr-tarjeta-enlace h3 a::before { color: var(--wp--preset--color--dorado-cla); } .gr-tarjeta-enlace:has(a:focus-visible) { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .gr-tarjeta-enlace :is(h2, h3) a:focus-visible { outline: none; } .gr-tarjeta-enlace:hover { border-color: var(--wp--preset--color--dorado); } /* Pilares de CEBRA: el mismo patrón en las tres tarjetas */ /* Número en dorado (texto grande: 3,5:1 sobre blanco) e icono de línea propio, dorado claro sobre un círculo marino */ .gr-pilares > .is-style-tarjeta { position: relative; overflow: hidden; } .gr-pilar__cab { justify-content: space-between; align-items: center; margin-bottom: 18px; } .gr-pilar__cab > * { margin: 0 !important; } .gr-pilar__cab .is-style-numero { font-size: 3rem; color: var(--wp--preset--color--dorado-tit); } .gr-pilar__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gr-marino); color: var(--wp--preset--color--dorado-cla); } /* El dibujo ocupa casi la mitad del círculo (~26 de 56 px); trazo de 2 px en los tres, sin escalar con el tamaño */ .gr-pilar__icono svg { width: 40px !important; height: 40px !important; } /* Rayas (solo en los pilares de CEBRA; no reutilizar en otras partes): las mismas tarjetas con rayas diagonales finas en dorado en la parte superior (guiño a CEBRA), que se desvanecen hacia abajo */ .gr-pilares--rayas > .is-style-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 96px; pointer-events: none; background: repeating-linear-gradient(-45deg, rgb(181 137 74 / .38) 0 1.5px, transparent 1.5px 9px); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .gr-pilares--rayas .gr-pilar__cab { position: relative; } /* Sobre las rayas, el número pasa a dorado oscuro: 3,5:1 aun encima de una raya (el dorado titular bajaría a 2,6:1) */ .gr-pilares--rayas .gr-pilar__cab .is-style-numero { color: var(--wp--preset--color--dorado-osc); } .gr-subtitulo { margin-top: var(--wp--preset--spacing--60) !important; font-size: var(--wp--preset--font-size--xl); } /* Programa individual: Método Iceberg (SVG: trazo dorado claro sobre marino, línea de flotación discontinua) */ .gr-iceberg { gap: clamp(24px, 4vw, 56px) !important; margin-top: 24px !important; } .gr-iceberg__dibujo { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; } .gr-iceberg__agua { stroke: var(--wp--preset--color--dorado-cla); stroke-width: 1.5; stroke-dasharray: 6 7; opacity: .7; } .gr-iceberg__punta, .gr-iceberg__cuerpo { fill: rgb(200 166 119 / .08); stroke: var(--wp--preset--color--dorado-cla); stroke-width: 2; stroke-linejoin: round; } .gr-iceberg__cuerpo { fill: rgb(200 166 119 / .14); } .gr-iceberg__arriba { fill: var(--wp--preset--color--dorado-cla); font-size: 24px; font-weight: 700; } .gr-iceberg__abajo { fill: var(--gr-blanco); font-size: 24px; font-weight: 700; } .gr-iceberg h3 { margin-top: 0; } /* En móvil el dibujo mide ~300 px: los rótulos suben en unidades del SVG para quedar en ~15 px */ @media (max-width: 599px) { .gr-iceberg__arriba, .gr-iceberg__abajo { font-size: 32px; } } @media (max-width: 999px) { .gr-iceberg { flex-wrap: wrap !important; } .gr-iceberg > .wp-block-column { flex-basis: 100% !important; } } /* Datos clave en tipografía grande */ .gr-datos { display: grid; gap: 0; margin-top: var(--wp--preset--spacing--40) !important; border-block: 1px solid var(--wp--preset--color--linea); } .gr-datos > * { margin: 0 !important; } @media (min-width: 700px) { .gr-datos { grid-template-columns: repeat(3, 1fr); } .gr-datos__dato + .gr-datos__dato { border-left: 1px solid var(--wp--preset--color--linea); } } @media (max-width: 699px) { .gr-datos__dato + .gr-datos__dato { border-top: 1px solid var(--wp--preset--color--linea); } } .gr-datos__dato { padding: 22px 24px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--gr-marino); } .gr-datos__nota { display: block; margin-top: 6px; font-size: var(--wp--preset--font-size--s); font-weight: 500; letter-spacing: 0; color: var(--wp--preset--color--gris); } /* Cuatro tarjetas (beneficios): 2 columnas desde 700 px, 4 desde 1100 px */ @media (min-width: 700px) { .gr-rejilla--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .gr-rejilla--4 { grid-template-columns: repeat(4, 1fr); } } .gr-pilares h4 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; } /* ---------- Employee Advocacy ---------- */ .gr-cabecera-servicio__subtitulo { margin: 0 0 16px !important; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--wp--preset--color--dorado-cla); } /* Datos clave: cifras grandes en dorado claro sobre marino; fuente y año discretos */ .gr-datos-clave h2 { margin-bottom: 28px; } .gr-datos-clave__rejilla { display: grid; gap: 14px; } @media (min-width: 700px) { .gr-datos-clave__rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .gr-datos-clave__rejilla { grid-template-columns: repeat(3, 1fr); } } .gr-dato { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gr-r-m); background: rgba(255, 255, 255, .04); } .gr-dato p { margin: 0; } .gr-dato__cifras { display: flex; flex-wrap: wrap; gap: 6px 22px; } .gr-dato__cifras p { display: flex; flex-direction: column; } .gr-dato__cifra { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--wp--preset--color--dorado-cla); } .gr-dato__etiqueta { margin-top: 4px; font-size: 1rem; font-weight: 700; color: var(--gr-blanco); } .gr-dato__texto { font-size: 1rem; color: var(--gr-texto-oscuro); } .gr-dato__fuente { margin-top: auto !important; padding-top: 8px; font-size: var(--wp--preset--font-size--xs); letter-spacing: .04em; color: rgba(255, 255, 255, .7); } /* Diagrama «Employee Engagement = Brand Engagement» */ .gr-difusion__dibujo { display: block; width: 100%; height: auto; font-family: inherit; } .gr-difusion__enlace { stroke: var(--wp--preset--color--dorado-cla); stroke-width: 2; } .gr-difusion__red { stroke: var(--wp--preset--color--dorado-cla); stroke-width: 1.2; opacity: .55; } .gr-difusion__contacto { fill: var(--gr-marino); stroke: var(--wp--preset--color--dorado-cla); stroke-width: 1.5; opacity: .8; } .gr-difusion__empleado { fill: var(--wp--preset--color--marino-2); stroke: var(--wp--preset--color--dorado-cla); stroke-width: 2; } .gr-difusion__cabeza, .gr-difusion__cuerpo { fill: none; stroke: var(--wp--preset--color--dorado-cla); stroke-width: 1.8; stroke-linecap: round; } .gr-difusion__empresa { fill: rgb(200 166 119 / .16); stroke: var(--wp--preset--color--dorado-cla); stroke-width: 2.5; } .gr-difusion__rotulo { fill: var(--gr-blanco); font-size: 20px; font-weight: 700; } .gr-difusion__lema { fill: var(--wp--preset--color--dorado-cla); font-size: 19px; font-weight: 700; } @media (max-width: 599px) { .gr-difusion__rotulo { font-size: 26px; } .gr-difusion__lema { font-size: 23px; } } .gr-difusion p { color: var(--gr-texto-oscuro); } /* Ventajas: dos columnas con iconos propios (una debajo de otra en móvil) */ .gr-ventajas .is-style-etiqueta { margin-top: 6px; } .gr-ventajas__lista { display: grid; gap: 2px 18px; margin: 18px 0 0; padding: 0; list-style: none; } @media (min-width: 1100px) { .gr-ventajas__lista { grid-template-columns: repeat(2, 1fr); } } .gr-ventajas__lista li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--wp--preset--color--linea); font-weight: 500; color: var(--gr-marino); } .gr-destacado .gr-ventajas__lista li { border-color: rgba(255, 255, 255, .14); color: var(--gr-blanco); } .gr-ventajas__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gr-marino); color: var(--wp--preset--color--dorado-cla); } .gr-destacado .gr-ventajas__icono { background: rgba(255, 255, 255, .08); } .gr-ventajas__icono svg, .gr-pilar__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gr-ventajas__icono svg *, .gr-pilar__icono svg * { vector-effect: non-scaling-stroke; } /* Contenidos del programa: cinco tarjetas (3 + 2 en escritorio) */ /* 3 + 2 en escritorio: rejilla de 6 columnas; las tres primeras ocupan 2 y las dos últimas, 3 (más anchas). Altura igualada por fila. */ @media (min-width: 700px) { .gr-rejilla--areas { grid-template-columns: repeat(2, 1fr); } .gr-rejilla--areas > :last-child { grid-column: 1 / -1; } } @media (min-width: 1100px) { .gr-rejilla--areas { grid-template-columns: repeat(6, 1fr); } .gr-rejilla--areas > * { grid-column: span 2; } .gr-rejilla--areas > :nth-child(n+4) { grid-column: span 3; } } .gr-rejilla--areas > * { height: 100%; box-sizing: border-box; } .gr-datos--4 { margin-top: 0 !important; } @media (min-width: 700px) { .gr-datos--4 { grid-template-columns: repeat(2, 1fr); } .gr-datos--4 .gr-datos__dato:nth-child(3) { border-left: 0; } .gr-datos--4 .gr-datos__dato:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--linea); } } @media (min-width: 1100px) { .gr-datos--4 { grid-template-columns: repeat(4, 1fr); } .gr-datos--4 .gr-datos__dato:nth-child(3) { border-left: 1px solid var(--wp--preset--color--linea); } .gr-datos--4 .gr-datos__dato:nth-child(n+3) { border-top: 0; } } .gr-datos--4 .gr-datos__dato { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } /* Testimonio destacado: ancho completo sobre marino */ .gr-testimonio.gr-testimonio--destacado { background: var(--gr-marino); border-color: var(--gr-marino); } @media (min-width: 700px) { .gr-testimonio.gr-testimonio--destacado { grid-template-columns: 160px 1fr; gap: 40px; } } .gr-testimonio--destacado .gr-testimonio__foto img { width: 160px; height: 160px; border: 3px solid var(--wp--preset--color--dorado-cla); } .gr-testimonio--destacado .wp-block-quote.is-style-testimonio p { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; color: var(--gr-blanco); } .gr-testimonio--destacado .wp-block-quote.is-style-testimonio cite { color: var(--gr-texto-oscuro); } .gr-testimonio--destacado .wp-block-quote.is-style-testimonio cite a { color: var(--wp--preset--color--dorado-cla); } .gr-ea-articulos .gr-relacionadas__consulta { margin-top: 24px; } .gr-descarga { margin-top: 24px !important; font-size: var(--wp--preset--font-size--s); } .gr-descarga a { color: var(--wp--preset--color--gris); text-decoration-color: var(--wp--preset--color--dorado); } /* Hueco de foto sin imagen (.gr-foto-pendiente): mismo tamaño que la de CEBRA */ .gr-foto-pendiente { aspect-ratio: 1; padding: 24px; border-radius: var(--gr-r-l); background: var(--wp--preset--color--fondo-2); text-align: center; } .gr-llamada-breve { margin-top: var(--wp--preset--spacing--50) !important; padding: 24px; border-radius: var(--gr-r-m); background: var(--wp--preset--color--fondo-2); text-align: center; } .gr-llamada-breve__texto { margin: 0 0 16px !important; font-size: var(--wp--preset--font-size--l); font-weight: 700; letter-spacing: -0.015em; color: var(--gr-marino); } /* Marcador .gr-provisional: subrayado discontinuo naranja */ .gr-provisional { text-decoration: underline dashed #C2410C; text-decoration-thickness: 2px; text-underline-offset: 6px; } .gr-logotipos { margin-top: 24px; } .gr-cabecera-servicio { background: var(--gr-marino); border-radius: 0 0 var(--gr-r-l) var(--gr-r-l); padding-top: 160px; padding-bottom: var(--wp--preset--spacing--60); margin-block-start: 0 !important; } .gr-cabecera-servicio h1 { font-size: var(--wp--preset--font-size--hero); max-width: 18ch; margin-block: 16px 20px; } .gr-cabecera-servicio h1 br + em { display: inline-block; font-size: .5em; line-height: 1.15; letter-spacing: -0.015em; margin-top: .3em; } .gr-cabecera-servicio .gr-entradilla { color: var(--gr-texto-oscuro); max-width: 56ch; } .gr-servicio > .gr-bloque > h2 { max-width: 22ch; } .gr-servicio > .gr-bloque > h2 + .gr-entradilla { margin-top: 16px; } .gr-servicio .gr-entradilla + .gr-entradilla { margin-top: 10px; } @media (min-width: 800px) { .gr-rejilla--2 { grid-template-columns: repeat(2, 1fr); } } .gr-rejilla--fichas { margin-top: 0; } .gr-destacado.is-style-tarjeta .is-style-etiqueta { color: var(--wp--preset--color--dorado-cla); } .gr-destacado.is-style-tarjeta p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--gr-texto-oscuro); } /* Comparativa: tabla con marco; columna de características en negrita */ .gr-comparativa { margin-top: 24px; } .gr-comparativa tbody th { color: var(--gr-marino); font-weight: 700; } /* Comparativa en móvil (menos de 768 px): un bloque por programa con las cinco características (etiqueta y valor); la tabla se oculta. El desplazamiento horizontal sigue para las tablas del contenido del blog. */ .gr-comparativa-movil { display: none; } @media (max-width: 767px) { .gr-comparativa { display: none; } .gr-comparativa-movil { display: grid; gap: 14px; margin-top: 24px; } .gr-comparativa-movil > * { margin: 0 !important; } } .gr-comparativa-movil__programa { padding: 22px; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .gr-comparativa-movil__programa.gr-destacado { background: var(--gr-marino); border-color: var(--gr-marino); } .gr-comparativa-movil__programa h3 { margin: 0 0 6px; font-size: var(--wp--preset--font-size--l); } .gr-comparativa-movil__lista { margin: 0; } .gr-comparativa-movil__lista > div { padding-block: 12px; border-top: 1px solid var(--wp--preset--color--linea); } .gr-comparativa-movil__lista > div:first-child { border-top: 0; } .gr-comparativa-movil__lista dt { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } .gr-comparativa-movil__lista dd { margin: 4px 0 0; font-size: 1rem; color: var(--wp--preset--color--tinta); } .gr-destacado .gr-comparativa-movil__lista > div { border-color: rgba(255, 255, 255, .14); } .gr-destacado .gr-comparativa-movil__lista dt { color: var(--wp--preset--color--dorado-cla); } .gr-destacado .gr-comparativa-movil__lista dd { color: var(--gr-blanco); } /* Facilitadores: foto cuadrada (el original es 1:1) */ .gr-foto-redonda--cuadrada img { aspect-ratio: 1; } .gr-facilitadores { margin-top: 24px; } .gr-facilitadores__nombre { margin-bottom: 14px; font-size: var(--wp--preset--font-size--l); } /* Employee Advocacy: icono, infografía, testimonio y enlaces */ .gr-servicio__icono { margin: 0 0 20px; } .gr-servicio__icono img { border-radius: var(--gr-r-s); } @media (min-width: 1000px) { .gr-servicio__intro { position: sticky; top: 24px; align-self: flex-start; } } .gr-servicio__infografia { margin-top: 24px; } .gr-servicio__infografia img { width: 100%; height: auto; border-radius: var(--gr-r-m); border: 1px solid var(--wp--preset--color--linea); } .gr-testimonio { display: grid; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-l); } .gr-testimonio > * { margin: 0 !important; } @media (min-width: 700px) { .gr-testimonio { grid-template-columns: 120px 1fr; } } .gr-testimonio__foto img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; } .wp-block-quote.is-style-testimonio { margin: 0; padding: 0; border: 0; } .wp-block-quote.is-style-testimonio::before { content: "✦"; display: block; margin-bottom: 10px; color: var(--wp--preset--color--dorado); } .wp-block-quote.is-style-testimonio p { font-size: var(--wp--preset--font-size--l); font-weight: 500; line-height: 1.45; color: var(--gr-marino); } .wp-block-quote.is-style-testimonio cite { display: block; margin-top: 14px; font-size: var(--wp--preset--font-size--s); font-style: normal; color: var(--wp--preset--color--gris); } .wp-block-quote.is-style-testimonio cite a { color: var(--gr-marino); font-weight: 700; } .gr-enlaces { margin-top: 24px; } @media (min-width: 800px) { .gr-enlaces { grid-template-columns: repeat(2, 1fr); } } .gr-enlaces li { padding: 0; } .gr-enlaces li::before { display: none; } /* Bloque y flecha absoluta: con flex, cada del enlace sería una columna y el texto se partiría */ .gr-enlaces a { position: relative; display: block; width: 100%; min-height: 56px; padding: 15px 44px 15px 16px; box-sizing: border-box; color: var(--gr-marino); text-decoration: none; } .gr-enlaces a::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--wp--preset--color--dorado-osc); } .gr-enlaces a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-llamada { text-align: center; } .gr-llamada .gr-entradilla { color: var(--gr-texto-oscuro); margin-inline: auto; } .gr-llamada .wp-block-buttons { justify-content: center; margin-top: 24px; } /* ---------- Página de Guillem (patterns/pagina-guillem.php, plantilla page-servicio) ---------- */ /* Encabezado: texto y foto en dos columnas desde 1000 px; por debajo, la foto va después del texto y más estrecha */ .gr-cabecera-guillem__columnas { margin: 0; } .gr-cabecera-guillem h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem); max-width: 17ch; } .gr-cabecera-guillem .gr-entradilla + .gr-entradilla { margin-top: 10px; } .gr-cabecera-guillem__foto { max-width: 440px; margin: 0 auto; } .gr-cabecera-guillem__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1096 / 1344; object-fit: cover; border-radius: var(--gr-r-l); border: 1px solid rgba(255, 255, 255, .14); } @media (max-width: 999px) { .gr-cabecera-guillem__foto { max-width: 340px; } } /* Convicción: la frase como cita grande con filete dorado */ .gr-conviccion .wp-block-column > p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--wp--preset--color--gris); font-size: 1.125rem; } .wp-block-quote.gr-conviccion__cita { margin: 0 0 24px; padding: 4px 0 4px 24px; border: 0; border-left: 3px solid var(--wp--preset--color--dorado); } .gr-conviccion__cita p { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gr-marino); } .gr-conviccion__cita em { font-style: normal; color: var(--wp--preset--color--dorado-tit); } .gr-conviccion .gr-remate, .gr-evolucion .gr-remate { margin-top: 28px !important; } /* Origen: foto fija en escritorio y cronología (vertical en móvil, horizontal desde 900 px) */ @media (min-width: 1000px) { .gr-origen__foto { position: sticky; top: 24px; align-self: flex-start; } } .gr-origen .wp-block-column > p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--wp--preset--color--gris); } .gr-cronologia { display: grid; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; } .gr-cronologia li { position: relative; margin: 0; padding: 0 0 26px 34px; } .gr-cronologia li::before { content: ""; position: absolute; z-index: 1; left: 4px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--dorado); box-shadow: 0 0 0 5px var(--wp--preset--color--fondo); } .gr-cronologia li::after { content: ""; position: absolute; left: 10px; top: 14px; bottom: -7px; width: 2px; background: var(--wp--preset--color--linea); } .gr-cronologia li:last-child { padding-bottom: 0; } .gr-cronologia li:last-child::after { content: none; } .gr-cronologia p { margin: 0; font-size: 1rem; color: var(--wp--preset--color--gris); } .gr-cronologia .gr-cronologia__hito { margin-bottom: 4px; font-size: var(--wp--preset--font-size--l); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gr-marino); } @media (min-width: 900px) { .gr-cronologia { grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: 4px; } .gr-cronologia li { padding: 34px 0 0; } .gr-cronologia li::before { left: 0; top: 0; } .gr-cronologia li::after { left: 7px; right: -20px; top: 6px; bottom: auto; width: auto; height: 2px; } } /* El cambio: nota con la charla TEDx (enlace simple a YouTube) */ .gr-cambio > h2 { margin-bottom: 28px; } .gr-cambio p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--gr-texto-oscuro); } .gr-cambio__nota { margin-top: 20px !important; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gr-r-m); color: var(--gr-texto-oscuro); font-size: 1rem; } .gr-cambio__nota strong { color: var(--wp--preset--color--dorado-cla); } /* Evolución: cuatro etapas enlazadas con flechas (desde 1100 px); la última, la actual, en marino */ .gr-evolucion__texto { margin-top: 24px; } .gr-evolucion__texto p { color: var(--wp--preset--color--gris); } .gr-etapas > .is-style-tarjeta { position: relative; } .gr-etapas .is-style-numero { margin-bottom: 18px; color: var(--wp--preset--color--dorado-tit); } .gr-etapas .gr-destacado .is-style-numero { color: var(--wp--preset--color--dorado-cla); } .gr-etapas h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; } .gr-etapas .gr-destacado h3 { color: var(--gr-blanco); } @media (min-width: 1100px) { .gr-etapas { gap: 28px; } .gr-etapas > :not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--wp--preset--color--dorado-osc); } } /* Trabajo actual: tarjetas con número e icono (sin rayas) */ .gr-trabajo__enlaces { margin-top: 32px !important; } .gr-trabajo .gr-pilares h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; } /* La relación: seis principios en 1 / 2 / 3 columnas, separados por un filete */ .gr-relacion .gr-entradilla { color: var(--gr-texto-oscuro); } .gr-principios { display: grid; gap: 28px 40px; margin-top: 36px; } .gr-principios > * { margin: 0 !important; } @media (min-width: 700px) { .gr-principios { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .gr-principios { grid-template-columns: repeat(3, 1fr); } } .gr-principio { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); } .gr-principio h3 { display: flex; gap: 10px; margin: 0 0 8px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; color: var(--gr-blanco); } .gr-principio h3::before { content: "✦"; font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--dorado-cla); } .gr-principio p { margin: 0; color: var(--gr-texto-oscuro); } /* Alcance: «Sí» con marca dorada sobre marino; «No» con aspa gris sobre fondo claro */ .gr-alcance__caja h3 { margin: 0; font-size: var(--wp--preset--font-size--l); } .gr-alcance__caja--no { background: var(--wp--preset--color--fondo-2); border-color: var(--wp--preset--color--fondo-2); } .gr-alcance__lista { display: grid; margin: 16px 0 0; padding: 0; list-style: none; } .gr-alcance__lista li { position: relative; margin: 0; padding: 12px 0 12px 38px; border-top: 1px solid var(--wp--preset--color--linea); font-weight: 500; color: var(--gr-marino); } .gr-alcance__caja--no .gr-alcance__lista li { border-color: rgba(10, 25, 47, .1); } .gr-alcance__lista li::before, .gr-alcance__lista li::after { content: ""; position: absolute; left: 0; top: 13px; width: 24px; height: 24px; border-radius: 50%; } .gr-alcance__lista li::before { background: var(--gr-marino); } .gr-alcance__lista li::after { background: var(--wp--preset--color--dorado-cla); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center / 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9'/%3E%3C/svg%3E") center / 24px no-repeat; } .gr-alcance__caja--no .gr-alcance__lista li::before { background: var(--gr-blanco); } .gr-alcance__caja--no .gr-alcance__lista li::after { background: var(--wp--preset--color--gris); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m8.5 8.5 7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E"); } /* Testimonios: tarjetas en columnas (1 / 2 / 3) que se reparten por altura; el orden de lectura sigue el del HTML */ .gr-opiniones__rejilla { margin-top: 32px; columns: 1; column-gap: 14px; } @media (min-width: 760px) { .gr-opiniones__rejilla { columns: 2; } } @media (min-width: 1100px) { .gr-opiniones__rejilla { columns: 3; } } @media (min-width: 1100px) { .gr-opiniones__rejilla--2 { columns: 2; } } .gr-opiniones__rejilla--1 { columns: 1; max-width: 760px; } .gr-testimonios > .gr-pendiente, .gr-faq > .gr-pendiente { display: table; margin-top: 16px !important; } .gr-opiniones__rejilla > * { break-inside: avoid; margin: 0 0 14px !important; } .wp-block-quote.is-style-testimonio.gr-opinion { padding: clamp(22px, 3vw, 28px); background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .wp-block-quote.is-style-testimonio.gr-opinion p { font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--tinta); } .wp-block-quote.is-style-testimonio.gr-opinion cite { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wp--preset--color--linea); line-height: 1.45; } .gr-opinion cite strong { color: var(--gr-marino); font-size: 1rem; } /* ---------- Test de Executive Branding (patterns/pagina-test.php, plantilla page-servicio) ---------- */ .gr-cabecera-test__columnas { margin: 0; } .gr-cabecera-test h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem); max-width: 16ch; } .gr-cabecera-test__lead { margin: 22px 0 6px !important; font-weight: 700; color: var(--gr-blanco); } .gr-cabecera-test__lista { max-width: 460px; } .gr-cabecera-test .gr-nota { max-width: 56ch; margin-top: 16px; color: var(--gr-texto-oscuro); } /* «Qué vas a evaluar»: recuadro translúcido compacto con las tres dimensiones numeradas */ .gr-evaluar { padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gr-r-l); background: rgba(255, 255, 255, .05); } .gr-evaluar .gr-mini { color: var(--wp--preset--color--dorado-cla) !important; } .gr-evaluar__lista { margin: 0; padding: 0; list-style: none; counter-reset: evaluar; } .gr-evaluar__lista li { counter-increment: evaluar; display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--wp--preset--font-size--l); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--gr-blanco); } .gr-evaluar__lista li:first-child { border-top: 0; } .gr-evaluar__lista li::before { content: counter(evaluar, decimal-leading-zero); flex: none; font-size: 1rem; color: var(--wp--preset--color--dorado-cla); } /* Definición: un recuadro claro con filete dorado */ .gr-definicion { padding: clamp(24px, 4vw, 40px); border-left: 3px solid var(--wp--preset--color--dorado); border-radius: var(--gr-r-m); background: var(--wp--preset--color--fondo-2); } .gr-definicion h2 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--xl); max-width: none; } .gr-definicion p { margin: 0; max-width: 70ch; font-size: 1.125rem; color: var(--wp--preset--color--tinta); } /* La brecha: texto en dos columnas y cuatro tarjetas numeradas */ .gr-brecha__texto { margin-top: 24px; } .gr-brecha__texto p { color: var(--wp--preset--color--gris); } .gr-brecha__texto strong { color: var(--gr-marino); } .gr-brecha__tarjetas .is-style-numero { margin-bottom: 18px; color: var(--wp--preset--color--dorado-tit); } .gr-brecha__tarjetas h4 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; } /* Las tres dimensiones: tarjetas con número e icono y los elementos evaluados como etiquetas */ .gr-dimension h3 { margin: 0 0 10px; font-size: var(--wp--preset--font-size--l); line-height: 1.2; } .gr-dimension p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { font-size: 1rem; } .gr-dimension__elementos { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; } .gr-dimension__elementos li { margin: 0; padding: 6px 12px; border: 1px solid var(--wp--preset--color--linea); border-radius: 999px; background: var(--wp--preset--color--fondo); font-size: var(--wp--preset--font-size--s); font-weight: 500; color: var(--gr-marino); } /* Tu resultado: cuatro piezas en 2 × 2 sobre marino y la nota de alcance */ .gr-resultado p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--gr-texto-oscuro); } .gr-resultado .wp-block-buttons { margin-top: 24px; } .gr-resultado__rejilla { display: grid; gap: 14px; } @media (min-width: 700px) { .gr-resultado__rejilla { grid-template-columns: repeat(2, 1fr); } } .gr-resultado__rejilla > * { margin: 0 !important; } .gr-resultado__item { padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gr-r-m); background: rgba(255, 255, 255, .04); } .gr-resultado__item .is-style-numero { margin-bottom: 14px; font-size: 2rem; } .gr-resultado__item h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; color: var(--gr-blanco); } .gr-resultado__item p:not([class*="is-style-"]) { margin: 0; font-size: 1rem; } .gr-resultado__alcance { margin-top: 28px !important; padding: 18px 22px; border-radius: var(--gr-r-m); background: rgba(255, 255, 255, .06); font-size: 1rem; color: var(--gr-texto-oscuro); } .gr-resultado__alcance strong { color: var(--wp--preset--color--dorado-cla); } /* Cómo funciona: los pasos de la portada con una nota breve */ .gr-funciona .wp-block-buttons { margin-top: 28px; } .gr-paso__nota { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--wp--preset--font-size--s); font-weight: 700; color: var(--wp--preset--color--dorado-cla); } .gr-funciona .is-style-paso:last-child .gr-paso__nota { border-color: var(--wp--preset--color--linea); color: var(--wp--preset--color--dorado-osc); } .gr-funciona .is-style-paso:not(:last-child) h3 { color: var(--gr-blanco); } .gr-funciona .is-style-paso:not(:last-child) p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { color: var(--gr-texto-oscuro); } /* El test: franja, portada estática (Tally solo se carga al pulsar) y, ya cargado, el formulario sobre blanco */ .gr-test-formulario__franja { margin: 0 0 20px !important; text-align: center; font-size: var(--wp--preset--font-size--s); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--dorado-cla); } .gr-test-formulario .gr-terceros { max-width: 760px; margin-inline: auto; } /* La portada es clara: dentro del panel marino, su enlace no hereda el dorado claro del panel (no llegaría a 4,5:1) */ .is-style-panel-oscuro .gr-terceros:not(.gr-terceros--video) .gr-terceros__aviso a { color: var(--gr-marino); } .gr-test-formulario .gr-terceros.is-cargado { padding: clamp(16px, 3vw, 28px); border-radius: var(--gr-r-m); background: var(--gr-blanco); } .gr-test-formulario__privacidad { max-width: 760px; margin: 16px auto 0 !important; text-align: center; font-size: var(--wp--preset--font-size--s); color: var(--gr-texto-oscuro); } /* ---------- Podcast Todo deja Marca (patterns/pagina-podcast.php, plantilla page-servicio) ---------- */ .gr-cabecera-podcast__columnas { margin: 0; } .gr-cabecera-podcast h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); max-width: 22ch; } /* Micrófono y ondas: dibujo de línea en dorado claro (decorativo); en móvil, más pequeño y después del texto */ .gr-onda { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; fill: none; stroke: var(--wp--preset--color--dorado-cla); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .gr-onda rect { fill: rgb(200 166 119 / .1); } .gr-onda__linea { opacity: .7; } @media (max-width: 999px) { .gr-onda { max-width: 180px; } } .gr-podcast-intro__destacado { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--gr-marino); } .gr-podcast-intro__destacado em { font-style: normal; color: var(--wp--preset--color--dorado-tit); } .gr-podcast-intro .wp-block-column > p:not([class*="is-style-"], [class*="gr-"], [class*="has-"]) { font-size: 1.125rem; color: var(--wp--preset--color--gris); } /* Reproductor del podcast completo: portada estática centrada; ya cargado, el reproductor ocupa el ancho del panel */ .gr-podcast-reproductor .gr-terceros { max-width: 760px; margin: 0 auto; } .gr-podcast-reproductor .gr-terceros.is-cargado { max-width: none; } /* ---------- Conferencias (patterns/pagina-conferencias.php, plantilla page-servicio) ---------- */ .gr-cabecera-conferencias__columnas { margin: 0; } .gr-cabecera-conferencias h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.75rem); max-width: 17ch; } .gr-cabecera-conferencias .gr-pendiente { display: table; margin-top: 8px; } .gr-foto-pendiente--escenario { aspect-ratio: 4 / 3; max-width: 460px; margin-inline: auto; } .gr-cabecera-conferencias .gr-fuente { margin-top: 8px; font-size: var(--wp--preset--font-size--xs); color: var(--gr-texto-oscuro); } .gr-cabecera-conferencias__foto { max-width: 520px; margin: 0 auto; } .gr-cabecera-conferencias__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--gr-r-l); border: 1px solid rgba(255, 255, 255, .14); } /* Credenciales: cifras grandes; los huecos .gr-pendiente, centrados en su celda */ .gr-credenciales .gr-datos { margin-top: 0 !important; } .gr-datos__dato--pendiente { display: flex; align-items: center; } .gr-datos__dato--pendiente .gr-pendiente { font-size: var(--wp--preset--font-size--s); font-weight: 500; letter-spacing: 0; } /* Las cuatro conferencias: bloques amplios alternos (blanco / marino) con el número grande a la izquierda */ .gr-conferencias > h2 { margin-bottom: 8px; } .gr-conferencia { display: grid; gap: 8px 48px; margin-top: 24px !important; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-l); background: var(--gr-blanco); scroll-margin-top: 0; } @media (min-width: 900px) { .gr-conferencia { grid-template-columns: 160px minmax(0, 1fr); } } .gr-conferencia > * { margin: 0 !important; } .gr-conferencia__numero { font-size: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: .9; color: var(--wp--preset--color--dorado-tit); } .gr-conferencia__cuerpo > * + * { margin-top: 16px; } .gr-conferencia__titulo { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1.15; max-width: 26ch; } .gr-conferencia__cuerpo .is-style-etiqueta { margin-top: 24px; } .gr-conferencia__ideas { display: grid; gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; } .gr-conferencia__ideas li { display: flex; gap: 10px; align-items: baseline; } .gr-conferencia__ideas li::before { content: "✦"; color: var(--wp--preset--color--dorado); } .gr-conferencia__ficha { display: grid; gap: 0 24px; margin: 24px 0 0; border-top: 1px solid var(--wp--preset--color--linea); } @media (min-width: 700px) { .gr-conferencia__ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gr-conferencia__ficha > div:first-child { grid-column: 1 / -1; } } .gr-conferencia__ficha > div { padding-top: 12px; } .gr-conferencia__ficha dt { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } .gr-conferencia__ficha dd { margin: 6px 0 0; } .gr-conferencia__acciones { margin-top: 28px !important; } .gr-conferencia__servicio { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .gr-conferencia__servicio a { color: var(--gr-marino); font-weight: 700; text-decoration-color: var(--wp--preset--color--dorado); } .gr-conferencia--oscura { border-color: var(--gr-marino); background: var(--gr-marino); color: var(--gr-texto-oscuro); } .gr-conferencia--oscura .gr-conferencia__numero { color: var(--wp--preset--color--dorado-cla); } .gr-conferencia--oscura .gr-conferencia__titulo, .gr-conferencia--oscura .gr-conferencia__ideas strong { color: var(--gr-blanco); } .gr-conferencia--oscura .is-style-etiqueta, .gr-conferencia--oscura .gr-conferencia__ficha dt { color: var(--wp--preset--color--dorado-cla); } .gr-conferencia--oscura .gr-conferencia__ficha { border-color: rgba(255, 255, 255, .14); } .gr-conferencia--oscura .gr-conferencia__servicio { color: var(--gr-texto-oscuro); } .gr-conferencia--oscura .gr-conferencia__servicio a { color: var(--gr-blanco); } .gr-conferencia--oscura a:focus-visible { outline-color: var(--wp--preset--color--dorado-cla); } /* Sobre marino, el aviso .gr-pendiente necesita fondo claro para leerse */ .gr-conferencia--oscura .gr-pendiente, .gr-solicitar .gr-pendiente, .gr-cabecera-conferencias .gr-pendiente { background: var(--wp--preset--color--fondo-2); outline-offset: 2px; } .gr-formatos > .gr-pendiente { display: table; margin-top: 16px !important; } /* TEDx: portada estática de vídeo (gr-terceros) dentro del panel */ .gr-tedx > h2 { margin-bottom: 24px; } .gr-tedx .gr-terceros { max-width: 900px; margin-inline: auto; } .gr-videos { margin-top: 0; gap: 32px 24px; } .gr-video h3 { margin: 0 0 14px; font-size: var(--wp--preset--font-size--l); color: var(--gr-blanco); } /* Sin imagen destacada, la portada del vídeo necesita fondo y borde propios para verse sobre el panel marino */ .gr-videos .gr-terceros { margin: 0; border: 1px solid rgba(255, 255, 255, .14); background: var(--wp--preset--color--marino-2); } .gr-videos .gr-terceros--video::after { content: none; } .gr-video__lugar { display: block; margin-top: 4px; font-size: var(--wp--preset--font-size--s); font-weight: 500; color: var(--gr-texto-oscuro); } .gr-solicitar .gr-separadas { align-items: flex-start; } .gr-servicio > .gr-llamada-conferencias > .gr-llamada-breve__texto { max-width: none; text-align: center; margin: 0 0 16px !important; font-size: var(--wp--preset--font-size--xl); } /* ---------- Blog (templates/home.html, inc/blog.php) ---------- */ .gr-cabecera-blog h1 { font-size: var(--wp--preset--font-size--xxl); max-width: 22ch; } .gr-buscador--cabecera { max-width: 520px; margin-top: 24px; } .gr-buscador--cabecera .wp-block-search__label { color: var(--gr-blanco); } .gr-buscador--cabecera .wp-block-search__input { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: var(--gr-blanco); } .gr-buscador--cabecera .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .7); } .gr-buscador--cabecera .wp-block-search__button { background: var(--wp--preset--color--dorado-cla); color: var(--gr-marino); } .gr-buscador--cabecera :is(.wp-block-search__input, .wp-block-search__button):focus-visible { outline-color: var(--wp--preset--color--dorado-cla); } .gr-blog > .gr-bloque { margin-block-start: var(--wp--preset--spacing--60); } .gr-blog > :last-child { margin-block-end: var(--wp--preset--spacing--60); } .gr-blog .wp-block-query { margin-top: 24px; } /* Tarjetas del blog: imagen arriba (16:10), categoría, título y fecha; 1 / 2 / 3 columnas */ .gr-blog-tarjetas { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .gr-blog-tarjetas { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .gr-blog-tarjetas { grid-template-columns: repeat(3, 1fr); } } .gr-blog-tarjetas > li { position: relative; display: flex; flex-direction: column; margin: 0 !important; overflow: hidden; background: var(--gr-blanco); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-m); } .gr-blog-tarjetas .gr-tarjeta__img { margin: 0; } .gr-blog-tarjetas .gr-tarjeta__img img, .gr-blog-tarjetas .gr-tarjeta__img--vacia { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; } .gr-blog-tarjetas .gr-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; } .gr-blog-tarjetas .gr-tarjeta__titulo { margin: 0 !important; font-size: var(--wp--preset--font-size--l); line-height: 1.25; } .gr-blog-tarjetas .gr-tarjeta__titulo a::after { border-radius: var(--gr-r-m); } .gr-tarjeta__fecha { margin-top: auto !important; padding-top: 6px; font-size: var(--wp--preset--font-size--s); font-weight: 500; color: var(--wp--preset--color--gris); } .gr-tarjeta__extracto { margin: 0; font-size: 1rem; color: var(--wp--preset--color--gris); } .gr-tarjeta__extracto p { margin: 0; } .gr-blog-tarjetas > li:has(a:focus-visible) { outline: 3px solid var(--gr-marino); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .gr-blog-tarjetas > li { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; } .gr-blog-tarjetas > li:hover { transform: translateY(-4px); box-shadow: var(--gr-sombra); } } /* Para directivos: las tres en fila desde 700 px (a 768 no queda una sola abajo); el extracto, desde 1000 px */ @media (min-width: 700px) { .gr-blog-tarjetas--destacadas { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 999px) { .gr-blog-tarjetas--destacadas .gr-tarjeta__extracto { display: none; } } @media (min-width: 700px) and (max-width: 999px) { .gr-blog-tarjetas--destacadas .gr-tarjeta__titulo { font-size: 1.0625rem; } } .gr-blog-directivos .gr-pendiente { margin-top: 12px; } .gr-cabecera-blog .gr-entradilla { margin-top: 0; } /* Último episodio del podcast: texto y portada estática en dos columnas */ .gr-blog-podcast { display: grid; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-l); background: var(--gr-blanco); } @media (min-width: 900px) { .gr-blog-podcast { grid-template-columns: 2fr 3fr; gap: 40px; } } .gr-blog-podcast > *, .gr-blog-podcast__texto > * { margin: 0; } .gr-blog-podcast__texto { display: grid; gap: 12px; } .gr-blog-podcast__titulo { font-size: var(--wp--preset--font-size--xl); line-height: 1.2; } .gr-blog-podcast__titulo a { color: var(--gr-marino); text-decoration: none; } .gr-blog-podcast__titulo a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-blog-podcast__enlace a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--gr-marino); } .gr-blog-podcast .gr-terceros { margin: 0; } /* Para directivos: las tres más grandes, sobre marino */ .gr-blog-tarjetas--destacadas > li { background: var(--gr-marino); border-color: var(--gr-marino); } .gr-blog-tarjetas--destacadas .gr-tarjeta__titulo a { color: var(--gr-blanco); } .gr-blog-tarjetas--destacadas .gr-categoria-principal { color: var(--wp--preset--color--dorado-cla); } .gr-blog-tarjetas--destacadas .gr-tarjeta__extracto { color: var(--gr-texto-oscuro); } .gr-blog-tarjetas--destacadas > li:has(a:focus-visible) { outline-color: var(--wp--preset--color--dorado-cla); } /* Lo más leído: lista numerada (01–05) */ .gr-leido { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: leido; border-top: 1px solid var(--wp--preset--color--linea); } @media (min-width: 1000px) { .gr-leido { grid-template-columns: repeat(5, 1fr); gap: 20px; border-top: 0; } } .gr-leido > li { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 16px 0 16px 64px; counter-increment: leido; border-bottom: 1px solid var(--wp--preset--color--linea); } @media (min-width: 1000px) { .gr-leido > li { padding: 0; border-bottom: 0; border-top: 3px solid var(--wp--preset--color--dorado); padding-top: 14px; } } .gr-leido > li::before { content: counter(leido, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-size: 2.2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--wp--preset--color--dorado-tit); } @media (min-width: 1000px) { .gr-leido > li::before { position: static; margin-bottom: 6px; } } .gr-leido__titulo { order: 2; margin: 0 !important; font-size: 1.0625rem; line-height: 1.3; } .gr-leido__titulo a { color: var(--gr-marino); text-decoration: none; } .gr-leido__titulo a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-leido .gr-categoria-principal { order: 1; font-size: var(--wp--preset--font-size--xs); } /* Filtros por categoría */ .gr-categorias ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .gr-categorias a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--wp--preset--color--linea); border-radius: 999px; background: var(--gr-blanco); color: var(--gr-marino); font-size: var(--wp--preset--font-size--s); font-weight: 700; text-decoration: none; } .gr-categorias a:hover { border-color: var(--gr-marino); } .gr-categorias a[aria-current="page"] { background: var(--gr-marino); border-color: var(--gr-marino); color: var(--gr-blanco); } .gr-categorias a:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 2px; } /* Paginación numerada */ .gr-paginacion { gap: 8px; margin-top: var(--wp--preset--spacing--50) !important; } .gr-paginacion :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--wp--preset--color--linea); border-radius: 999px; background: var(--gr-blanco); color: var(--gr-marino); font-weight: 700; text-decoration: none; } .gr-paginacion .page-numbers.current { background: var(--gr-marino); border-color: var(--gr-marino); color: var(--gr-blanco); } .gr-paginacion .page-numbers.dots { border: 0; background: none; } .gr-paginacion a:hover { border-color: var(--gr-marino); } .gr-paginacion a:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 2px; } /* ---------- Archivos, búsqueda, 404 y páginas simples ---------- */ .gr-cabecera-blog .gr-entradilla p { margin: 0 0 .6em; } .gr-cabecera-blog .gr-entradilla a { color: var(--wp--preset--color--dorado-cla) !important; } .gr-cabecera-archivo__cuenta { margin: 8px 0 0 !important; font-size: var(--wp--preset--font-size--s); font-weight: 700; color: var(--wp--preset--color--dorado-cla); } .gr-cabecera-blog .gr-entradilla { color: var(--gr-texto-oscuro); } .gr-404 h2 { margin: 6px 0 0; font-size: var(--wp--preset--font-size--l); } .gr-404 .gr-tarjeta-enlace h2 a::before { content: "→"; float: right; margin-left: 12px; color: var(--wp--preset--color--dorado-osc); } .gr-404 .gr-destacado.gr-tarjeta-enlace h2 a::before { color: var(--wp--preset--color--dorado-cla); } /* Contacto: formulario e información básica sobre protección de datos */ .gr-contacto .gr-separadas { align-items: flex-start; } .gr-datos-proteccion h2 { margin: 0 0 12px; font-size: var(--wp--preset--font-size--l); } .gr-datos-proteccion__lista { margin: 0; } .gr-datos-proteccion__lista > div { padding-block: 10px; border-top: 1px solid var(--wp--preset--color--linea); } .gr-datos-proteccion__lista dt { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } .gr-datos-proteccion__lista dd { margin: 4px 0 0; font-size: 1rem; color: var(--wp--preset--color--tinta); } .gr-datos-proteccion__lista a { color: var(--gr-marino); text-decoration-color: var(--wp--preset--color--dorado); } /* Páginas simples (legales y genéricas): encabezado y texto en la columna de lectura */ .gr-cabecera-pagina-simple .gr-cabecera-articulo__in { max-width: 37.5rem !important; padding-left: 0 !important; } .gr-cabecera-pagina-simple h1 { font-size: var(--wp--preset--font-size--xxl); } .gr-pagina { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); } .gr-pagina.has-global-padding { padding-inline: clamp(16px, 4vw, 40px); } .gr-pagina > :first-child { margin-top: 0; } /* ---------- Pie (patrón pie.php) ---------- Ancho completo: fondo marino de lado a lado con las esquinas superiores redondeadas (como la cabecera, al revés) y el contenido a 1200 px: marca (logo en blanco, lema, newsletter) | enlaces en dos columnas | redes en círculos, con filetes verticales desde 1000 px; debajo, © y enlaces legales tras un filete. Por debajo de 520 px, los enlaces en una sola columna. */ .gr-pie { padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) 8px; border-radius: var(--gr-r-l) var(--gr-r-l) 0 0; background: var(--gr-marino); color: var(--gr-blanco); } .gr-pie__tarjeta { display: grid; gap: 40px; padding-bottom: clamp(36px, 5vw, 56px); } .gr-pie__tarjeta > * { margin: 0 !important; } .gr-pie .gr-logo img { height: 52px !important; } .gr-pie__lema { margin: 22px 0 0 !important; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--gr-blanco); } .gr-pie__lema span { color: rgba(255, 255, 255, .62); } .gr-pie__newsletter { margin: 28px 0 0 !important; } .gr-pie__enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); } .gr-pie__enlaces > * { margin: 0 !important; } @media (max-width: 519px) { .gr-pie__enlaces { grid-template-columns: 1fr; } .gr-pie__enlaces .gr-pie__lista + .gr-pie__lista { margin-top: 4px !important; } } .gr-pie__lista { display: grid; margin: 0; padding: 0; list-style: none; } .gr-pie__lista li + li { margin-top: clamp(4px, 1.2vw, 18px); } /* Zona pulsable de 44 px de alto como mínimo */ .gr-pie__lista a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); font-weight: 500; color: rgba(255, 255, 255, .86); text-decoration: none; } .gr-pie__lista a:hover, .gr-pie__legales a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); text-underline-offset: 4px; } .gr-pie__tarjeta a:focus-visible { outline: 3px solid var(--wp--preset--color--dorado-cla); outline-offset: 3px; border-radius: 6px; } @media (min-width: 1000px) { .gr-pie__tarjeta { grid-template-columns: minmax(0, 1fr) auto auto auto 56px; gap: 0 clamp(32px, 4vw, 64px); align-items: start; } .gr-pie__tarjeta::before, .gr-pie__tarjeta::after { content: ""; align-self: stretch; width: 1px; background: rgba(255, 255, 255, .14); } .gr-pie__marca { grid-column: 1; grid-row: 1; } .gr-pie__tarjeta::before { grid-column: 2; grid-row: 1; } .gr-pie__enlaces { grid-column: 3; grid-row: 1; padding-top: 4px; } .gr-pie__tarjeta::after { grid-column: 4; grid-row: 1; } .gr-pie__tarjeta > .gr-redes { grid-column: 5; grid-row: 1; flex-direction: column; } } /* Redes (bloque Iconos sociales): zona pulsable de 44 × 44 px, icono de 22 px; foco visible en marino o dorado claro (sobre marino) */ .wp-block-social-links.gr-redes { gap: 4px; margin: 0; padding: 0; } .gr-redes .wp-social-link { margin: 0; } .gr-redes .wp-block-social-link-anchor { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 !important; border-radius: 50%; } .gr-redes .wp-block-social-link-anchor svg { width: 22px; height: 22px; } .gr-redes .wp-block-social-link-anchor:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 0; } .gr-redes--oscuro { margin-top: 18px !important; } .gr-redes--oscuro .wp-block-social-link-anchor:focus-visible { outline-color: var(--wp--preset--color--dorado-cla); } /* Pie: redes en círculos de 56 px con filete; al pasar, dorado claro */ .wp-block-social-links.gr-redes--circulos { gap: 12px; } .gr-redes--circulos .wp-block-social-link-anchor { width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .03); transition: background-color .2s, border-color .2s, color .2s; } .gr-redes--circulos .wp-social-link:hover .wp-block-social-link-anchor { background: var(--wp--preset--color--dorado-cla); border-color: var(--wp--preset--color--dorado-cla); } .gr-redes--circulos .wp-social-link:hover { color: var(--gr-marino) !important; } .gr-redes--circulos .wp-block-social-link-anchor:focus-visible { outline-color: var(--wp--preset--color--dorado-cla); outline-offset: 3px; } .gr-pie__legal { margin-top: 0 !important; padding: 14px 0; gap: 4px 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; color: rgba(255, 255, 255, .7); } .gr-pie__legal a:focus-visible { outline: 3px solid var(--wp--preset--color--dorado-cla); outline-offset: 2px; border-radius: 4px; } .gr-pie__legal > * { margin: 0 !important; } .gr-pie__legales { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; } .gr-pie__legales a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } /* ---------- Movimiento (solo si no se pide reducirlo) ---------- */ @media (prefers-reduced-motion: no-preference) { .gr-chapa { animation: gr-chapa-entra .7s cubic-bezier(.2, .7, .2, 1) both; } .gr-chapa-1 { animation-delay: .5s; } .gr-chapa-2 { animation-delay: .75s; } .is-style-servicio { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .is-style-servicio:hover, .is-style-servicio:has(.wp-block-button__link:focus-visible) { transform: translateY(-6px); box-shadow: var(--gr-sombra); } .is-style-servicio:hover .wp-block-button__link::after { transform: translateX(3px); } @supports selector(::details-content) { :root { interpolate-size: allow-keywords; } .wp-block-details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; } .wp-block-details[open]::details-content { block-size: auto; } } @supports (animation-timeline: view()) { .gr-rejilla--3 > *, .is-style-checks li, .is-style-paso, .is-style-cifra, .gr-test, .gr-iobrand, .is-style-pildoras li, .is-style-cuadros li, .gr-foto-redonda img, .is-style-cita { animation: gr-aparece linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } .is-style-servicio { animation: gr-aparece-op linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } .gr-rejilla--3 > :nth-child(2), .is-style-servicio:nth-child(2), .is-style-cifra:nth-child(2), .is-style-checks li:nth-child(2n) { animation-range: entry 8% entry 65%; } .gr-rejilla--3 > :nth-child(3), .is-style-servicio:nth-child(3), .is-style-cifra:nth-child(3) { animation-range: entry 16% entry 75%; } .is-style-cifra:nth-child(4) { animation-range: entry 24% entry 85%; } .is-style-pildoras li { animation-name: gr-aparece-suave; animation-range: entry 0% entry 80%; } .is-style-paso { animation-name: gr-emerge; } .is-style-paso:nth-child(2) { animation-range: entry 10% entry 70%; } .is-style-paso:nth-child(3) { animation-range: entry 20% entry 85%; } .is-style-frase em { background: linear-gradient(var(--wp--preset--color--dorado-cla), var(--wp--preset--color--dorado-cla)) 0 92% / 0% 3px no-repeat; animation: gr-subraya linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; } } } @keyframes gr-chapa-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes gr-aparece { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes gr-aparece-op { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } } @keyframes gr-aparece-suave { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } @keyframes gr-emerge { from { opacity: 0; transform: translateY(56px); filter: brightness(.6); } to { opacity: 1; transform: none; filter: none; } } @keyframes gr-subraya { to { background-size: 100% 3px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Contenido de terceros con portada estática (mu-plugin gr-terceros.php). Antes de cargar ocupa lo mismo que el reproductor: sin saltos. */ .gr-terceros { position: relative; display: flex; gap: 20px; align-items: center; margin-block: var(--wp--preset--spacing--40); padding: 20px; min-height: var(--gr-terceros-alto, 0); border-radius: var(--gr-r-m); background: var(--wp--preset--color--fondo-2); color: var(--wp--preset--color--tinta); box-sizing: border-box; } /* overflow visible: si el contenido no cabe en 16:9 (móvil), la portada crece en vez de recortarlo; imagen y degradado se recortan solos. */ .gr-terceros--video { aspect-ratio: 16 / 9; min-height: auto; align-items: flex-end; background: var(--gr-marino); color: var(--gr-blanco); } /* El bloque de incrustado reserva altura para el iframe con ::before: con la portada dentro, sobra. */ .wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .gr-terceros)::before { content: none; display: none; } .gr-terceros__imagen { flex: none; width: clamp(96px, 22%, 160px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--gr-r-s); } .gr-terceros--video .gr-terceros__imagen { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; opacity: .45; } .gr-terceros__cuerpo { position: relative; display: grid; gap: 8px; min-width: 0; } .gr-terceros--video::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top, var(--gr-marino) 0%, rgba(10, 25, 47, .92) 45%, rgba(10, 25, 47, .2) 100%); } .gr-terceros--video .gr-terceros__cuerpo { z-index: 1; } .gr-terceros__proveedor { margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--marino-3); } .gr-terceros--video .gr-terceros__proveedor { color: var(--wp--preset--color--dorado-cla); } .gr-terceros__titulo { margin: 0; font-weight: 700; line-height: 1.3; } .gr-terceros__boton { justify-self: start; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--gr-marino); color: var(--gr-blanco); font: inherit; font-weight: 700; cursor: pointer; } .gr-terceros--video .gr-terceros__boton { background: var(--wp--preset--color--dorado-cla); color: var(--gr-marino); } .gr-terceros__boton:hover { background: var(--wp--preset--color--marino-3); } .gr-terceros--video .gr-terceros__boton:hover { background: var(--gr-blanco); } .gr-terceros__boton:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 3px; } .gr-terceros--video .gr-terceros__boton:focus-visible { outline-color: var(--wp--preset--color--dorado-cla); } .gr-terceros__aviso { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--gris); } .gr-terceros--video .gr-terceros__aviso, .gr-terceros--video .gr-terceros__aviso a { color: var(--gr-texto-oscuro); } .gr-terceros.is-cargado { display: block; padding: 0; min-height: 0; background: none; } .gr-terceros.is-cargado::after { content: none; } .gr-terceros--video.is-cargado iframe { position: absolute; inset: 0; border-radius: inherit; } .gr-terceros.is-cargado iframe { display: block; width: 100%; max-width: 100%; border: 0; } .gr-terceros--video.is-cargado iframe { height: 100%; } @media (max-width: 480px) { .gr-terceros:not(.gr-terceros--video) { flex-direction: column; align-items: flex-start; } } /* Podcast: últimos episodios desde el RSS (inc/podcast.php) */ .gr-episodios { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--linea); } .gr-episodio { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--linea); } @media (min-width: 700px) { .gr-episodio { grid-template-columns: 190px minmax(0, 1fr) auto; align-items: baseline; } } .gr-episodio__fecha { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .gr-episodio__titulo { font-weight: 700; color: var(--gr-marino); text-decoration: none; } .gr-episodio__titulo:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--dorado); } .gr-episodio__fuente { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--dorado-osc); } /* Formulario de comentarios (inc/comentarios.php) */ .gr-comentarios__formulario { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--wp--preset--color--linea); } .gr-comentarios__formulario .comment-reply-title { margin: 16px 0 8px; } .gr-comentarios__formulario .comment-reply-title small { margin-left: 12px; font-size: var(--wp--preset--font-size--s); font-weight: 500; } .gr-comentarios__formulario .comment-notes { margin: 0 0 16px; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--gris); } .gr-comentarios__formulario p { margin: 0 0 16px; } .gr-comentarios__formulario label { display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 700; color: var(--gr-marino); } .gr-comentarios__formulario input[type="text"], .gr-comentarios__formulario input[type="email"], .gr-comentarios__formulario textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--wp--preset--color--gris); border-radius: 12px; background: var(--gr-blanco); color: var(--wp--preset--color--tinta); font: inherit; } .gr-comentarios__formulario textarea { min-height: 140px; } .gr-comentarios__formulario :is(input, textarea):focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 2px; } .gr-comentarios__formulario .comment-form-cookies-consent, .gr-comentarios__formulario .comment-form-privacidad { display: flex; gap: 10px; align-items: flex-start; } .gr-comentarios__formulario .comment-form-cookies-consent label, .gr-comentarios__formulario .comment-form-privacidad label { margin: 0; font-weight: 500; color: var(--wp--preset--color--tinta); } .gr-comentarios__formulario input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gr-marino); } .gr-comentarios__formulario .comment-form-privacidad a { color: var(--gr-marino); text-decoration-color: var(--wp--preset--color--dorado); } .gr-comentarios__formulario .form-submit { margin-top: 8px; } .gr-comentario__responder { margin-top: 4px; font-size: var(--wp--preset--font-size--s); } .gr-comentario__responder a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gr-marino); font-weight: 700; text-decoration-color: var(--wp--preset--color--dorado); } /* Campo trampa: fuera de la vista y del orden de tabulación (solo lo rellenan los robots) */ .gr-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Aviso y panel de cookies (mu-plugin gr-consentimiento). Aceptar y Rechazar con el mismo peso visual. */ .gr-cookies { position: fixed; z-index: 1000; inset: auto 12px 12px; display: grid; gap: 14px; max-width: 760px; margin-inline: auto; padding: 16px 18px; border: 1px solid var(--wp--preset--color--marino-3); border-radius: var(--gr-r-m); background: var(--gr-marino); color: var(--gr-texto-oscuro); box-shadow: var(--gr-sombra); font-size: var(--wp--preset--font-size--s); } .gr-cookies[hidden] { display: none; } .gr-cookies__texto { margin: 0; } .gr-cookies a { color: var(--gr-blanco); text-decoration-color: var(--wp--preset--color--dorado-cla); } .gr-cookies__botones { display: flex; flex-wrap: wrap; gap: 8px; } .gr-cookies__boton { flex: 1 1 0; min-height: 44px; padding: 8px 12px; border: 2px solid var(--gr-blanco); border-radius: 999px; background: var(--gr-blanco); color: var(--gr-marino); font: inherit; font-weight: 700; cursor: pointer; } .gr-cookies__boton--secundario { background: transparent; color: var(--gr-blanco); } .gr-cookies__boton:hover { background: var(--wp--preset--color--dorado-cla); border-color: var(--wp--preset--color--dorado-cla); color: var(--gr-marino); } .gr-cookies__boton:focus-visible { outline: 3px solid var(--wp--preset--color--dorado-cla); outline-offset: 3px; } @media (min-width: 700px) { .gr-cookies { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; } .gr-cookies__boton { flex: 0 0 auto; padding-inline: 18px; } } body.gr-cookies-abierto .wp-site-blocks { padding-bottom: 260px; } @media (min-width: 700px) { body.gr-cookies-abierto .wp-site-blocks { padding-bottom: 120px; } } .gr-cookies-panel { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--gr-r-m); background: var(--gr-blanco); color: var(--wp--preset--color--tinta); box-shadow: var(--gr-sombra); } .gr-cookies-panel::backdrop { background: rgba(10, 25, 47, .6); } .gr-cookies-panel__formulario { position: relative; display: grid; gap: 16px; margin: 0; padding: 28px 24px 24px; } .gr-cookies-panel__titulo { margin: 0; padding-right: 44px; font-size: var(--wp--preset--font-size--l); color: var(--gr-marino); } .gr-cookies-panel__intro { margin: 0; font-size: var(--wp--preset--font-size--s); } .gr-cookies-panel__categoria { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--wp--preset--color--linea); border-radius: var(--gr-r-s); } .gr-cookies-panel__categoria input { width: 22px; height: 22px; margin: 0; accent-color: var(--gr-marino); } .gr-cookies-panel__categoria label { font-weight: 700; color: var(--gr-marino); } .gr-cookies-panel__categoria label span { font-weight: 400; color: var(--wp--preset--color--gris); } .gr-cookies-panel__categoria p { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--gris); } .gr-cookies-panel .gr-cookies__boton { border-color: var(--gr-marino); background: var(--gr-marino); color: var(--gr-blanco); } .gr-cookies-panel .gr-cookies__boton--secundario { background: transparent; color: var(--gr-marino); } .gr-cookies-panel .gr-cookies__boton:hover { border-color: var(--wp--preset--color--marino-3); background: var(--wp--preset--color--marino-3); color: var(--gr-blanco); } .gr-cookies-panel .gr-cookies__boton:focus-visible { outline-color: var(--gr-marino); } .gr-cookies-panel__cerrar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wp--preset--color--fondo-2); color: var(--gr-marino); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .gr-cookies-panel__cerrar:focus-visible { outline: 3px solid var(--gr-marino); outline-offset: 2px; } /* Employee Advocacy: «A quién va dirigido» sobre marino, texto 2/5 y perfiles 3/5 (filas de 2 y 3 desde 700 px) */ .gr-dirigido .gr-entradilla { color: var(--gr-texto-oscuro); } .gr-dirigido h2 { margin-top: 0; } .gr-dirigido__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .gr-dirigido__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } .gr-dirigido__lista li { grid-column: span 2; } .gr-dirigido__lista li:nth-child(-n+2) { grid-column: span 3; } } .gr-dirigido__lista li { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px; border: 1px solid var(--wp--preset--color--marino-3); border-radius: var(--gr-r-s); background: var(--wp--preset--color--marino-2); color: var(--gr-blanco); font-weight: 700; line-height: 1.3; } .gr-dirigido__lista li::before { content: ""; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--gr-marino) no-repeat center / 26px; } .gr-dirigido__lista .gr-dirigido__directivos::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A677' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='1.5'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 13h18M11 13v2h2v-2'/%3E%3C/svg%3E"); } .gr-dirigido__lista .gr-dirigido__tecnicos::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A677' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E"); } .gr-dirigido__lista .gr-dirigido__account::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A677' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M15 3.5h6v4.5h-3l-2.5 2V8H15z'/%3E%3C/svg%3E"); } .gr-dirigido__lista .gr-dirigido__marketing::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A677' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6l-7 4z'/%3E%3Cpath d='M17.5 9a4 4 0 0 1 0 6M20 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); } .gr-dirigido__lista .gr-dirigido__rrhh::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A677' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='2.5'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Cpath d='M4 19v-3a4 4 0 0 1 8 0v3M12 19v-3a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } /* Móvil: panel de cookies con un botón por fila; perfiles de «A quién va dirigido» con el icono a la izquierda */ @media (max-width: 519px) { .gr-cookies-panel .gr-cookies__botones { flex-direction: column; } } @media (max-width: 699px) { .gr-dirigido__lista li { flex-direction: row; align-items: center; padding: 12px 16px; } .gr-dirigido__lista li::before { width: 40px; height: 40px; background-size: 22px; } }