/* Theme Name: Koltor Group Theme URI: https://koltorgroup.com/ Author: Koltor Group Description: Tema de bloques corporativo de Koltor Group: desarrollo web, medios digitales y herramientas propias. Incluye diapositivas de portada propias, se edita por completo desde el Editor del sitio y trae variación de estilo clara y oscura. Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.22.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: koltor-group Tags: block-patterns, full-site-editing, one-column, wide-blocks, custom-colors, editor-style, style-variations */ /* ---------- Base ---------- */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: 96px; } ::selection { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } :where(a, button, input, .wp-element-button, .wp-block-navigation-item__content):focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; border-radius: 4px; } .wp-element-button, .wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } /* ---------- Cabecera fija ---------- */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); } @media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } } .kg-header { position: relative; isolation: isolate; border-bottom: 1px solid var(--wp--preset--color--line); padding-block: 0.85rem; } /* El desenfoque va en una capa aparte: si estuviera en la cabecera, el menú móvil quedaría atrapado dentro de ella. */ .kg-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .kg-brand { gap: 0.75rem; } .kg-brand__emblem { margin: 0; } .kg-brand__emblem img { width: 42px; height: 42px; display: block; } .kg-brand .wp-block-site-title { margin: 0; line-height: 1; } .kg-header .wp-block-button__link { padding: 0.6rem 1.15rem; font-size: var(--wp--preset--font-size--small); } .kg-header .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.35rem; } /* ---------- Menú del móvil ---------- */ .kg-header .wp-block-navigation .kg-nav-cta { display: none; } .wp-block-navigation__responsive-container.is-menu-open { background: radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent), transparent 70%), radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent), transparent 70%), var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; padding: 0 !important; } .is-menu-open .wp-block-navigation__responsive-dialog { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 1.25rem var(--wp--preset--spacing--50) 2rem; margin: 0; } /* Emblema arriba a la izquierda, a la altura del botón de cerrar. */ .is-menu-open .wp-block-navigation__responsive-dialog::before { content: ""; width: 42px; height: 42px; background: url(assets/images/koltor-emblem-128.png) center / contain no-repeat; } .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.25rem; right: var(--wp--preset--spacing--50); padding: 0.5rem; border-radius: 10px; } .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; } .is-menu-open .wp-block-navigation__responsive-container-content { flex: 1; display: flex; flex-direction: column; padding-top: var(--wp--preset--spacing--60); } .is-menu-open .wp-block-navigation__container { counter-reset: kgnav; align-items: stretch !important; gap: 0 !important; width: 100%; } .is-menu-open .wp-block-navigation-item { width: 100%; } .is-menu-open .wp-block-navigation-item:not(.kg-nav-cta) { counter-increment: kgnav; border-bottom: 1px solid var(--wp--preset--color--line); } .is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--contrast) !important; } .is-menu-open .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast) !important; } .is-menu-open .wp-block-navigation-item:not(.kg-nav-cta) > .wp-block-navigation-item__content { display: flex; align-items: baseline; gap: 1rem; width: 100%; box-sizing: border-box; padding: 1.05rem 0; font-size: clamp(1.55rem, 7vw, 2.1rem); font-weight: 600; line-height: 1.15; } .is-menu-open .wp-block-navigation-item:not(.kg-nav-cta) > .wp-block-navigation-item__content::before { content: counter(kgnav, decimal-leading-zero); min-width: 1.6rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; color: var(--wp--preset--color--primary); } .is-menu-open .wp-block-navigation-item:not(.kg-nav-cta) > .wp-block-navigation-item__content::after { content: "\2192"; margin-left: auto; font-weight: 400; color: var(--wp--preset--color--secondary); transition: transform 0.2s; } .is-menu-open .wp-block-navigation-item:not(.kg-nav-cta) > .wp-block-navigation-item__content:active::after { transform: translateX(4px); } /* "Contacto": solo aparece dentro del menú del móvil, donde se oculta el botón "Hablemos". */ .kg-header .wp-block-navigation .is-menu-open .kg-nav-cta { display: block; margin-block-start: var(--wp--preset--spacing--50); } .kg-header .wp-block-navigation .is-menu-open .kg-nav-cta .wp-block-navigation-item__content { display: block; box-sizing: border-box; width: 100%; text-align: center; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary) !important; border-radius: 14px; padding: 1rem 1.5rem; font-size: var(--wp--preset--font-size--large); font-weight: 700; } .is-menu-open .wp-block-navigation__responsive-container-content::after { content: "Koltor Group \00B7 Pereira, Colombia"; margin-top: auto; padding-top: var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.06em; color: var(--wp--preset--color--contrast-2); } @media (prefers-reduced-motion: no-preference) { .is-menu-open .wp-block-navigation-item { animation: kg-nav-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; } .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; } .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; } .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.2s; } } @keyframes kg-nav-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (max-width: 599px) { .kg-header .wp-block-buttons { display: none; } } /* ---------- Secciones ---------- */ .kg-section { padding-block: var(--wp--preset--spacing--80); } .kg-section--alt { background: var(--wp--preset--color--base-2); border-block: 1px solid var(--wp--preset--color--line); } .kg-section__head > * { max-width: 760px; } .kg-section__head > * + * { margin-block-start: var(--wp--preset--spacing--30); } .kg-section__head + * { margin-block-start: var(--wp--preset--spacing--60) !important; } .kg-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--contrast-2); max-width: 62ch; } .is-style-kg-eyebrow { display: flex; align-items: center; gap: 0.6rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--primary); } .is-style-kg-eyebrow::before { content: ""; width: 12px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); flex: none; } /* ---------- Tarjetas ---------- */ .is-style-kg-card { background: var(--wp--preset--color--base-3); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: var(--wp--preset--spacing--50); transition: border-color .25s ease, transform .25s ease; } .is-style-kg-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--line)); transform: translateY(-3px); } .is-style-kg-card > * { margin-block: 0; } .is-style-kg-card > * + * { margin-block-start: var(--wp--preset--spacing--30); } .is-style-kg-card h3 { font-size: var(--wp--preset--font-size--large); } .is-style-kg-card p { color: var(--wp--preset--color--contrast-2); } .kg-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); color: var(--wp--preset--color--primary); } .kg-icon--copper { background: color-mix(in srgb, var(--wp--preset--color--secondary) 14%, transparent); color: var(--wp--preset--color--secondary); } .kg-icon svg { width: 26px; height: 26px; } .kg-list { padding-left: 1.1rem; color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--small); } .kg-list li::marker { color: var(--wp--preset--color--primary); } .kg-tag { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--secondary) !important; } .kg-pill { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); color: var(--wp--preset--color--primary) !important; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.4; } .kg-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .kg-card-foot { margin-block-start: auto !important; padding-top: var(--wp--preset--spacing--30); } .kg-project { display: flex; flex-direction: column; } /* ---------- Héroe ---------- */ .kg-hero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); } .kg-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 65% at 78% 40%, color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent), transparent 70%), radial-gradient(30% 40% at 4% 70%, color-mix(in srgb, var(--wp--preset--color--secondary) 9%, transparent), transparent 70%); } .kg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--wp--preset--color--line); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 85% at 72% 38%, #000 0%, transparent 72%); -webkit-mask-size: 56px 100px, 100% 100%; -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(ellipse 70% 85% at 72% 38%, #000 0%, transparent 72%); mask-size: 56px 100px, 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; } .kg-hero__title { font-size: var(--wp--preset--font-size--huge); text-wrap: balance; } .kg-hero__title mark { background: none; } .kg-hero__mascota { margin: 0 auto; max-width: 330px; } .kg-hero__mascota img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 60px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent)); } @media (prefers-reduced-motion: no-preference) { .kg-hero__mascota img { animation: kg-float 7s ease-in-out infinite; } } @keyframes kg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (max-width: 781px) { .kg-hero__mascota { max-width: 240px; } .kg-hero__cols { flex-direction: column-reverse; } } /* Cifras */ .kg-stats { gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--50) !important; border-top: 1px solid var(--wp--preset--color--line); } .kg-stats { align-items: flex-start !important; } .kg-stat { gap: 0.15rem; } .kg-stat > p { margin: 0; } .kg-stat > .kg-icon { margin: 0 0 0.6rem; } .kg-stat__num { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1; color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; } .kg-stat:nth-child(2) .kg-stat__num { color: var(--wp--preset--color--secondary); } .kg-stat:nth-child(3) .kg-stat__num { color: var(--wp--preset--color--contrast); } .kg-stat__label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); max-width: 16ch; line-height: 1.35; } /* ---------- Nosotros ---------- */ .kg-frame { margin: 0; } .kg-frame img { border-radius: 22px; border: 1px solid var(--wp--preset--color--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .kg-founder { border-left: 3px solid var(--wp--preset--color--secondary) !important; } .kg-founder__role { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary) !important; } /* ---------- Banda misión y visión ---------- */ .kg-band { background: var(--wp--preset--gradient--banda-verde); color: var(--wp--preset--color--on-primary); padding-block: var(--wp--preset--spacing--70); } .kg-band :where(p, h2, h3) { color: var(--wp--preset--color--on-primary); } .kg-band__label { font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--wp--preset--font-size--small); opacity: 0.8; } .kg-band__text { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; line-height: 1.25; text-wrap: pretty; } .kg-band .wp-block-column + .wp-block-column { border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--on-primary) 25%, transparent); padding-left: var(--wp--preset--spacing--60); } @media (max-width: 781px) { .kg-band .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-primary) 25%, transparent); padding-top: var(--wp--preset--spacing--50); } } /* ---------- Contacto ---------- */ .kg-cta { position: relative; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 45%, var(--wp--preset--color--line)); background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 16%, transparent), transparent 70%), var(--wp--preset--color--base-3); padding: var(--wp--preset--spacing--60); } .kg-contact-lines { margin: var(--wp--preset--spacing--40) 0 0; display: grid; gap: 0.6rem; } .kg-contact-lines p { margin: 0; } .kg-contact-lines > .kg-contact-line { padding: 0.9rem 1.1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--base-2); align-items: center; gap: 0.9rem; } .kg-contact-lines strong { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--secondary); font-weight: 600; margin-right: 0.4rem; } /* ---------- Pie ---------- */ .kg-footer { background: var(--wp--preset--color--base-2); border-top: 1px solid var(--wp--preset--color--line); padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); } .kg-footer__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); margin: 0; } .kg-footer__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--contrast) !important; } .kg-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .kg-footer__links a { color: var(--wp--preset--color--contrast-2); text-decoration: none; } .kg-footer__links a:hover { color: var(--wp--preset--color--primary); } .kg-footer__bottom { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--60) !important; } .kg-footer__bottom p { margin: 0; } .kg-footer__legal a { color: var(--wp--preset--color--contrast-2); text-decoration: none; } .kg-footer__legal a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; } /* ---------- Formularios ---------- */ :where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select) { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 0.7rem 0.9rem; font: inherit; } :where(input, textarea, select):focus { border-color: var(--wp--preset--color--primary); } .wp-block-search__input { border-radius: 10px; } /* ---------- Blog ---------- */ .kg-post-card .wp-block-post-featured-image { margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) var(--wp--preset--spacing--30); } .kg-post-card .wp-block-post-featured-image img { border-radius: 18px 18px 0 0; } .kg-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); } .wp-block-query-pagination { font-family: var(--wp--preset--font-family--display); } /* ---------- Aparición al hacer scroll ---------- Las reglas solo se activan si el script del tema marcó (navegador compatible, sin "reducir movimiento" y con JavaScript). Sin eso, todo se ve normal. */ .kg-anim .kg-reveal > *:not(.is-layout-grid):not(.is-in), .kg-anim .kg-reveal .is-layout-grid > *:not(.is-in), .kg-anim .kg-reveal .kg-stats > *:not(.is-in), .kg-anim .kg-contact-lines > *:not(.is-in) { opacity: 0; } .kg-anim .kg-reveal > .is-in, .kg-anim .kg-reveal .is-layout-grid > .is-in, .kg-anim .kg-reveal .kg-stats > .is-in, .kg-anim .kg-contact-lines > .is-in { animation: kg-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--kg-d, 0s) backwards; } @keyframes kg-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Iconos: se elevan con la tarjeta y el icono brilla un poco. */ @media (prefers-reduced-motion: no-preference) { .kg-icon, .kg-icon svg { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease; } .is-style-kg-card:hover .kg-icon, .kg-icon:hover { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 8px 22px -8px currentColor; } .is-style-kg-card:hover .kg-icon svg, .kg-icon:hover svg { transform: scale(1.12); } } /* Franja de cifras */ .kg-cifras { padding-block: var(--wp--preset--spacing--60); border-bottom: 1px solid var(--wp--preset--color--line); } .kg-cifras .kg-stats { margin-top: 0 !important; padding-top: 0; border-top: 0; justify-content: space-between; } .kg-cifras .kg-stat__num { font-size: var(--wp--preset--font-size--xx-large, 3rem); } .kg-cifras .kg-stat__label { max-width: 22ch; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .is-style-kg-card, .wp-block-button__link { transition: none; } .is-style-kg-card:hover, .wp-block-button__link:hover { transform: none; } } /* ---------- Páginas legales: campos por completar y aviso para quien edita ---------- */ mark.kg-pendiente { background: color-mix(in srgb, var(--wp--preset--color--secondary) 32%, transparent); color: var(--wp--preset--color--contrast); border-radius: 4px; padding: 0.05em 0.35em; font-weight: 600; } .kg-aviso-editor { border: 2px dashed var(--wp--preset--color--secondary); border-radius: 14px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); background: color-mix(in srgb, var(--wp--preset--color--secondary) 10%, transparent); margin-bottom: var(--wp--preset--spacing--50); } .kg-aviso-editor p { margin: 0; } /* Las tablas anchas se desplazan dentro de su caja en el móvil; nunca ensanchan la página. */ .wp-block-table { overflow-x: auto; margin-block: var(--wp--preset--spacing--40); } .wp-block-table table { width: 100%; border-collapse: collapse; } .wp-block-table:has(th:nth-child(4)) table { min-width: 44rem; } .wp-block-table:has(th:nth-child(4)) td:first-child { min-width: 15rem; overflow-wrap: normal; } .wp-block-table td, .wp-block-table th { overflow-wrap: break-word; } body.page .wp-block-post-title { font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.1; } .wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--line); padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; } .wp-block-table th { background: var(--wp--preset--color--base-2); font-family: var(--wp--preset--font-family--display); } /* Líneas de contacto con icono: el icono no se encoge y las filas quedan juntas. */ .kg-contact-lines { gap: 0.6rem; } .kg-contact-lines > .kg-contact-line { margin: 0; } .kg-contact-line .kg-icon { flex: none; } /* Proyectos: icono arriba, aire antes del estado y llamado final. */ .kg-project > .kg-icon { margin-bottom: var(--wp--preset--spacing--30); } .kg-project > p:not(.kg-tag):not(.kg-card-foot) { margin-bottom: var(--wp--preset--spacing--40); } .kg-portfolio-cta { position: relative; margin-top: var(--wp--preset--spacing--60); padding: 1.5rem 1.75rem 1.5rem 5.25rem; gap: 1rem 2rem; border: 1px solid transparent; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent), transparent 55%) padding-box, linear-gradient(var(--wp--preset--color--base-2), var(--wp--preset--color--base-2)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent), var(--wp--preset--color--line) 40%, var(--wp--preset--color--line) 65%, color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent)) border-box; box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); } /* Ícono de mensaje: círculo (::before) + dibujo (::after) */ .kg-portfolio-cta::before, .kg-portfolio-cta::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; } .kg-portfolio-cta::before { left: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent); } .kg-portfolio-cta::after { left: calc(1.5rem + 0.6875rem); width: 1.375rem; height: 1.375rem; background-color: var(--wp--preset--color--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5a7.5 7.5 0 0 1-11 6.6L4 20l1.1-4.3A7.5 7.5 0 1 1 20 12.5z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5a7.5 7.5 0 0 1-11 6.6L4 20l1.1-4.3A7.5 7.5 0 1 1 20 12.5z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4.5'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 600px) { .kg-portfolio-cta { padding: 4.75rem 1.25rem 1.25rem; } .kg-portfolio-cta::before, .kg-portfolio-cta::after { top: 1.25rem; translate: none; } .kg-portfolio-cta::before { left: 1.25rem; } .kg-portfolio-cta::after { left: calc(1.25rem + 0.6875rem); top: calc(1.25rem + 0.6875rem); } } .kg-portfolio-cta p { margin: 0; color: var(--wp--preset--color--contrast-2); max-width: 46rem; } .kg-portfolio-cta strong { color: var(--wp--preset--color--contrast); } /* ---------- Redes sociales ---------- Solo aparecen las que tengan enlace (WordPress oculta las vacías). En la cabecera solo se ven dentro del menú móvil. */ .kg-social { gap: 0.6rem; margin-top: var(--wp--preset--spacing--40); } .kg-social .wp-social-link { margin: 0; } .kg-social .wp-social-link a { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; color: var(--wp--preset--color--contrast) !important; background: transparent; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .kg-social .wp-social-link svg { width: 21px; height: 21px; fill: currentColor; } .kg-social .wp-social-link a:hover, .kg-social .wp-social-link a:focus-visible { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary) !important; transform: translateY(-2px); } .kg-header .kg-nav-social { display: none; } .kg-header .is-menu-open .kg-nav-social { display: flex; margin-top: var(--wp--preset--spacing--40); } .kg-header .is-menu-open .kg-nav-social:not(:has(.wp-social-link)) { display: none; } @media (prefers-reduced-motion: reduce) { .kg-social .wp-social-link a { transition: none; } .kg-social .wp-social-link a:hover { transform: none; } } .is-menu-open .wp-block-navigation-item:has(> .kg-nav-social) { border-bottom: 0 !important; } .is-menu-open .wp-block-navigation-item:has(> .kg-nav-social:not(:has(.wp-social-link))) { display: none; } @media (max-width: 480px) { .kg-social { gap: 0.5rem; } .kg-social .wp-social-link a { width: 40px; height: 40px; } } .kg-social:not(:has(.wp-social-link)) { display: none; } /* ---- Planes y proceso (1.8.0) ---- */ .kg-plan, .kg-step { display: flex; flex-direction: column; } /* Planes: filas compartidas para que descripción, precio, lista, plazo y botón queden a la misma altura en las tres tarjetas. Sin soporte de subgrid se ven como antes. */ @supports (grid-template-rows: subgrid) { .is-layout-grid > .kg-plan:not(.kg-plan--wide) { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; } .is-layout-grid > .kg-plan:not(.kg-plan--wide) > .kg-pill, .is-layout-grid > .kg-plan:not(.kg-plan--wide) > .kg-card-foot { justify-self: start; } } .kg-plan.is-style-kg-card .kg-price { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--contrast); margin-block-start: 0; } .kg-plan.is-style-kg-card .kg-price span { font-size: 0.875rem; font-weight: 500; color: var(--wp--preset--color--contrast-2); } .kg-plan.is-style-kg-card .kg-price-label { font-size: 0.8125rem; margin-block-start: var(--wp--preset--spacing--40); margin-block-end: 0; } .kg-plan .kg-list { margin-block-start: var(--wp--preset--spacing--40); } .kg-plan .kg-pill, .kg-step .kg-pill { white-space: nowrap; margin-block-start: var(--wp--preset--spacing--40) !important; } .kg-plan > .wp-block-buttons { margin-block-start: auto; padding-top: var(--wp--preset--spacing--40); } .kg-step .kg-pill { margin-block-start: auto !important; } .kg-step > p:not(.kg-step__num):not(.kg-pill) { margin-block-end: var(--wp--preset--spacing--40); } .kg-step.is-style-kg-card .kg-step__num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--primary); margin-block-end: var(--wp--preset--spacing--20); } .kg-plan--wide { margin-block-start: var(--wp--preset--spacing--50); } .kg-plan--wide > .wp-block-group { gap: var(--wp--preset--spacing--40); } .kg-plan--wide .kg-price-label { margin-block-start: 0 !important; } .kg-plan-note { max-width: 75ch; font-size: 0.875rem; color: var(--wp--preset--color--contrast-2); margin-block-start: var(--wp--preset--spacing--40); } .kg-cond-wrap { margin-block-start: var(--wp--preset--spacing--60) !important; } .kg-cond-wrap > h3 { margin-block-end: var(--wp--preset--spacing--40); } .kg-cond > * + * { margin-block-start: var(--wp--preset--spacing--20); } .kg-cond p { font-size: 0.9375rem; } @media (max-width: 480px) { .kg-plan .kg-pill, .kg-step .kg-pill { white-space: normal; } } .kg-step .kg-pill { white-space: normal; border-radius: 18px; } /* ---- Portafolio: foto y enlace (1.8.1) ---- */ .kg-project > .kg-project__img { margin: 0 0 var(--wp--preset--spacing--40); } .kg-project__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,.1)); } .kg-project__img:not(:has(img[src])) { display: none; } .kg-project:has(.kg-project__img img[src]) > .kg-icon { display: none; } .kg-project__link { margin-bottom: var(--wp--preset--spacing--40); } .kg-project__link a { font-weight: 600; text-decoration: none; color: var(--wp--preset--color--primary); } .kg-project__link a:hover { text-decoration: underline; } .kg-project__link:has(a[href="#"]), .kg-project__link:not(:has(a[href])) { display: none; } .kg-cond h4 { font-size: var(--wp--preset--font-size--large); } /* ---- Objetivos táctiles de al menos 24 px (WCAG 2.5.8) ---- */ .kg-footer .wp-block-list a { display: inline-block; padding-block: 0.2rem; } .kg-footer__links:has(a) { gap: 0.15rem; } /* ---- Medios siempre con esquinas redondeadas (imágenes, galerías, videos y enlaces de video) ---- */ .wp-block-image img, .wp-block-gallery img, .wp-block-post-content img, .wp-block-post-featured-image img, .wp-block-media-text__media img, .wp-block-media-text__media video, .wp-block-video video, .wp-block-embed iframe, .wp-block-embed video { border-radius: 16px; } .wp-block-video, .wp-block-embed__wrapper, .wp-block-embed.is-type-video .wp-block-embed__wrapper, .wp-block-media-text__media { border-radius: 16px; overflow: hidden; } .wp-block-image.is-style-rounded img { border-radius: 9999px; } .kg-brand__emblem img { border-radius: 0; } /* Portafolio dinámico (v1.9.0) */ .kg-portfolio { margin-block: 0; } .kg-portfolio__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--wp--preset--spacing--50, 1.5rem); } .kg-portfolio__grid > .kg-project { margin: 0; } .kg-portfolio__grid .kg-project__img { margin: 0 0 var(--wp--preset--spacing--40); } .kg-portfolio__grid .kg-project__img img { width: 100%; height: auto; display: block; } .kg-portfolio__grid .kg-project > .kg-icon { margin-bottom: var(--wp--preset--spacing--30); } .kg-portfolio__grid .kg-project h3 { margin-top: 0; } .kg-portfolio__grid .kg-project__link { margin-top: auto; margin-bottom: 0; } .kg-portfolio__grid .kg-project__link a { font-weight: 600; } .kg-portfolio__empty { text-align: center; color: var(--wp--preset--color--contrast-2); padding: 2rem 0; } .kg-portfolio__filters { margin-top: var(--wp--preset--spacing--50, 1.5rem) !important; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 var(--wp--preset--spacing--50, 1.5rem); } .kg-portfolio__filters a { display: inline-block; padding: 0.35rem 0.9rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; text-decoration: none; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); } .kg-portfolio__filters a[aria-current="true"] { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } .kg-project__link:has(a[href="#"]) { display: none; } #proyectos .wp-block-buttons { margin-top: var(--wp--preset--spacing--50, 1.5rem); } /* La página Portafolio ocupa el ancho de la cabecera aunque el texto de la página sea más angosto. */ .wp-block-post-content > .kg-portfolio.alignwide { max-width: none; width: min(1200px, calc(100vw - 48px)); margin-left: 0 !important; margin-right: 0 !important; position: relative; left: 50%; transform: translateX(-50%); } .kg-frame--foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; } /* Fichas de proyecto (v1.10.0) */ .kg-project__link { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; } .kg-project__link a { font-weight: 600; } .kg-project__link .kg-project__visit { font-weight: 500; opacity: 0.85; } .kg-project__img a { display: block; } .kg-proyecto-page .kg-ficha { margin-block: var(--wp--preset--spacing--40); } .kg-ficha__desc { margin-block: 0 var(--wp--preset--spacing--40); } .kg-ficha__datos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; margin: 0; } .kg-ficha__datos li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; font-size: var(--wp--preset--font-size--small); } .kg-ficha__datos li span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--secondary); font-weight: 600; } .kg-ficha--acciones .kg-ficha__acciones { margin-top: var(--wp--preset--spacing--50); } .kg-proyecto-page .wp-block-gallery { margin-block: var(--wp--preset--spacing--40); } .kg-proyecto-page .wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--40); } .kg-ficha__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; } .kg-ficha__acciones .wp-block-button:last-child { } .kg-ficha__acciones .is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--line); } .kg-ficha__acciones .is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } .kg-portfolio__grid .kg-project .kg-project__link { margin-bottom: 0 !important; } .kg-ficha__info { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; } .kg-ficha__info p { margin-block: 0 var(--wp--preset--spacing--40); } .kg-ficha--cuerpo .kg-ficha__galeria { margin-top: var(--wp--preset--spacing--50); } /* Texto largo del proyecto, con buen diseño (v1.10.2) */ .kg-ficha__info { font-size: 1.05rem; line-height: 1.75; } .kg-ficha__info > * + * { margin-top: var(--wp--preset--spacing--40); } .kg-ficha__info h2, .kg-ficha__info h3 { font-family: var(--wp--preset--font-family--display); line-height: 1.25; margin-bottom: 0; color: var(--wp--preset--color--contrast); } .kg-ficha__info h2 { font-size: var(--wp--preset--font-size--x-large, 1.75rem); margin-top: var(--wp--preset--spacing--60); } .kg-ficha__info h2::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: 0.85rem; border-radius: 3px; background: var(--wp--preset--color--primary); } .kg-ficha__info h3 { font-size: var(--wp--preset--font-size--large, 1.3rem); margin-top: var(--wp--preset--spacing--50); color: var(--wp--preset--color--primary) !important; } .kg-ficha__info > h2:first-child, .kg-ficha__info > h3:first-child { margin-top: 0; } .kg-ficha__info strong { color: var(--wp--preset--color--contrast); font-weight: 700; } .kg-ficha__info em { font-style: italic; } .kg-ficha__info code { padding: 0.1em 0.4em; border-radius: 6px; background: var(--wp--preset--color--line); font-size: 0.92em; } .kg-ficha__info ul, .kg-ficha__info ol { padding: 0; margin-left: 0; list-style: none; display: grid; gap: 0.7rem; } .kg-ficha__info ol { counter-reset: kgn; } .kg-ficha__info li { position: relative; padding: 0.75rem 1rem 0.75rem 2.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; line-height: 1.6; } .kg-ficha__info ul li::before { content: ""; position: absolute; left: 1rem; top: 1.2rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); } .kg-ficha__info ol li { counter-increment: kgn; } .kg-ficha__info ol li::before { content: counter(kgn); position: absolute; left: 0.8rem; top: 0.7rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: 0.8rem; font-weight: 700; display: grid; place-items: center; } .kg-ficha__info a { text-decoration: underline; } .kg-ficha__info > h2 + *, .kg-ficha__info > h3 + * { margin-top: var(--wp--preset--spacing--30, 1rem); } /* ---- Visor de imágenes del proyecto (v1.11.0) ---- */ .kg-proyecto-page .kg-ficha--visor { margin-block: var(--wp--preset--spacing--50); } .kg-visor__escenario { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); } .kg-visor__escenario::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none; background: linear-gradient(to top, rgba(5, 9, 8, 0.55), transparent); } .kg-visor__foto { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.55s ease, visibility 0s linear 0.55s; } .kg-visor__foto.is-activa { opacity: 1; visibility: visible; transition: opacity 0.55s ease; } .kg-visor__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transform: scale(1.001); transition: transform 7s ease-out; } .kg-visor__foto.is-activa img { transform: scale(1.035); } .kg-visor.is-listo .kg-visor__foto { cursor: zoom-in; } .kg-visor__flecha, .kg-visor__ampliar, .kg-visor__cerrar { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(238, 244, 241, 0.18); border-radius: 50%; cursor: pointer; background: rgba(11, 17, 16, 0.55); color: var(--wp--preset--color--contrast); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, transform 0.2s, opacity 0.25s; } .kg-visor__flecha svg, .kg-visor__ampliar svg, .kg-visor__cerrar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .kg-visor__flecha:hover, .kg-visor__ampliar:hover, .kg-visor__cerrar:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); transform: scale(1.06); } .kg-visor__flecha:focus-visible, .kg-visor__ampliar:focus-visible, .kg-visor__cerrar:focus-visible, .kg-visor__mini:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .kg-visor__flecha { top: 50%; translate: 0 -50%; } .kg-visor__flecha--ant { left: 16px; } .kg-visor__flecha--sig { right: 16px; } .kg-visor__ampliar { right: 16px; bottom: 16px; width: 44px; height: 44px; } /* Sin JavaScript los botones no harían nada: se ocultan hasta que el visor está listo. */ .kg-visor:not(.is-listo) .kg-visor__flecha, .kg-visor:not(.is-listo) .kg-visor__ampliar { display: none; } @media (hover: hover) { .kg-visor__escenario .kg-visor__flecha { opacity: 0; } .kg-visor__escenario:hover .kg-visor__flecha, .kg-visor__escenario:focus-within .kg-visor__flecha { opacity: 1; } } .kg-visor__contador { position: absolute; z-index: 2; left: 16px; bottom: 16px; margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(11, 17, 16, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(238, 244, 241, 0.14); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; } .kg-visor__miniaturas { display: flex; gap: 0.75rem; margin-top: 1rem; padding: 4px 4px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--line) transparent; } .kg-visor__mini { position: relative; flex: 0 0 clamp(96px, 16%, 168px); aspect-ratio: 16 / 9; overflow: hidden; scroll-snap-align: start; border-radius: 12px; border: 2px solid transparent; opacity: 0.55; filter: saturate(0.7); transition: opacity 0.25s, border-color 0.25s, filter 0.25s, transform 0.25s, box-shadow 0.25s; } .kg-visor__mini img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; } .kg-visor__mini:hover { opacity: 0.9; filter: none; transform: translateY(-2px); } .kg-visor__mini[aria-current="true"] { opacity: 1; filter: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } /* Pantalla completa */ .kg-visor-abierto { overflow: hidden; } .kg-visor__dialogo { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; color: var(--wp--preset--color--contrast); } .kg-visor__dialogo:not([open]) { display: none; } .kg-visor__dialogo::backdrop { background: rgba(5, 9, 8, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .kg-visor__grande { max-width: min(94vw, 1800px); max-height: 84dvh; width: auto; height: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); opacity: 0; transform: scale(0.97); transition: opacity 0.3s, transform 0.3s; } .kg-visor__grande.is-lista { opacity: 1; transform: none; } .kg-visor__dialogo .kg-visor__flecha { position: fixed; } .kg-visor__dialogo .kg-visor__flecha--ant { left: max(16px, 2vw); } .kg-visor__dialogo .kg-visor__flecha--sig { right: max(16px, 2vw); } .kg-visor__cerrar { position: fixed; top: 16px; right: 16px; } .kg-visor__contador--grande { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; } .kg-visor__contador--grande:empty { display: none; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } @media (max-width: 600px) { .kg-visor__escenario { border-radius: 16px; } .kg-visor__flecha { width: 40px; height: 40px; } .kg-visor__flecha--ant { left: 10px; } .kg-visor__flecha--sig { right: 10px; } .kg-visor__ampliar { right: 10px; bottom: 10px; width: 38px; height: 38px; } .kg-visor__contador { left: 10px; bottom: 10px; font-size: 0.78rem; } .kg-visor__dialogo .kg-visor__flecha { top: auto; bottom: 14px; translate: none; } } @media (prefers-reduced-motion: reduce) { .kg-visor__foto, .kg-visor__foto img, .kg-visor__grande, .kg-visor__mini { transition: none; } .kg-visor__foto.is-activa img { transform: none; } } /* ---- Pie de página: íconos de línea en Navegación (v1.11.0) ---- */ .kg-footer__nav a { display: inline-flex !important; align-items: center; gap: 0.6rem; transition: color 0.2s, transform 0.2s; } .kg-footer__nav a::before { content: ""; flex: none; width: 18px; height: 18px; background-color: var(--wp--preset--color--primary); opacity: 0.75; -webkit-mask: var(--kg-ico) center / contain no-repeat; mask: var(--kg-ico) center / contain no-repeat; transition: opacity 0.2s, transform 0.2s, filter 0.2s; } .kg-footer__nav a:hover, .kg-footer__nav a:focus-visible { transform: translateX(3px); } .kg-footer__nav a:hover::before, .kg-footer__nav a:focus-visible::before { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent)); } .kg-footer__nav a[href$="#nosotros"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.2c2.9.2 5 2.3 5 5.3'/%3E%3C/svg%3E"); } .kg-footer__nav a[href$="#servicios"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9 4.6-9 4.6-9-4.6z'/%3E%3Cpath d='M3 12.3l9 4.6 9-4.6'/%3E%3Cpath d='M3 16.4l9 4.6 9-4.6'/%3E%3C/svg%3E"); } .kg-footer__nav a[href$="#proyectos"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5V18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9.5a2 2 0 0 0-2-2h-7L10 5H5a2 2 0 0 0-2 2.5z'/%3E%3Cpath d='M3 11h18'/%3E%3C/svg%3E"); } .kg-footer__nav a[href$="#planes"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.6V4a1 1 0 0 1 1-1h8.6a1 1 0 0 1 .7.3l7.4 7.4a1 1 0 0 1 0 1.4l-8.6 8.6a1 1 0 0 1-1.4 0L3.3 13.3a1 1 0 0 1-.3-.7z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.6'/%3E%3C/svg%3E"); } .kg-footer__nav a[href$="#proceso"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='18.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='5.5' r='2.2'/%3E%3Cpath d='M7.7 18.5h7.8a3 3 0 0 0 0-6h-7a3 3 0 0 1 0-6h7.8'/%3E%3C/svg%3E"); } .kg-footer__nav a[href$="#contacto"] { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6.2L20.5 7'/%3E%3C/svg%3E"); } /* Marcas sin enlace con el mismo alto que las que sí lo tienen. */ .kg-footer__links > li:not(:has(a)) { padding-block: 0.2rem; } @media (prefers-reduced-motion: reduce) { .kg-footer__nav a, .kg-footer__nav a::before { transition: none; } .kg-footer__nav a:hover { transform: none; } } /* ---- Página del proyecto: un solo eje (v1.11.0) ---- Cabecera, visor y cuerpo comparten el ancho amplio y el mismo borde izquierdo. El cuerpo va en dos columnas: texto + ficha lateral que acompaña al bajar. */ .kg-proyecto-page { padding-top: var(--wp--preset--spacing--70); } .kg-proyecto-page .kg-ficha { margin-block: 0; } .kg-proyecto-cabecera > * { margin-block: 0; } .kg-proyecto-cabecera .wp-block-post-title { margin: 0; max-width: 18ch; } .kg-proyecto-cabecera .kg-ficha__desc { margin-top: var(--wp--preset--spacing--30); max-width: 60ch; } .kg-proyecto-page .kg-ficha--visor { margin-block: var(--wp--preset--spacing--60) 0; } .kg-visor__miniaturas { justify-content: center; } .kg-proyecto-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--wp--preset--spacing--60); align-items: start; margin-top: var(--wp--preset--spacing--70) !important; } .kg-proyecto-cuerpo:not(:has(.kg-ficha__info)) { grid-template-columns: minmax(0, 1fr); } .kg-proyecto-cuerpo:not(:has(.kg-ficha__info)) .kg-proyecto-aside { position: static; max-width: 520px; } .kg-proyecto-cuerpo .kg-ficha__info { max-width: none; margin: 0; } .kg-proyecto-cuerpo .kg-ficha__info > :first-child { margin-top: 0; } .kg-proyecto-aside { position: sticky; top: 110px; margin: 0 !important; padding: 1.5rem; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--base-2)), var(--wp--preset--color--base-2)); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.7); } .admin-bar .kg-proyecto-aside { top: 142px; } .kg-proyecto-aside > * + * { margin-top: var(--wp--preset--spacing--40) !important; } .kg-ficha__titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--secondary); } .kg-ficha__lista { margin: 0; display: grid; } .kg-ficha__lista > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding-block: 0.8rem; border-top: 1px solid var(--wp--preset--color--line); } .kg-ficha__lista > div:first-child { border-top: 0; padding-top: 0.4rem; } .kg-ficha__lista dt { color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--small); } .kg-ficha__lista dd { margin: 0; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: var(--wp--preset--font-size--small); } .kg-ficha__tech { grid-template-columns: 1fr !important; gap: 0.5rem !important; } .kg-ficha__tech dd { display: flex; flex-wrap: wrap; gap: 0.4rem; } .kg-ficha__tech dd span { padding: 0.2rem 0.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; font-weight: 500; font-size: 0.8rem; } .kg-proyecto-aside .kg-ficha__acciones { flex-direction: column; margin: 0; gap: 0.6rem; } .kg-proyecto-aside .kg-ficha__acciones .wp-block-button, .kg-proyecto-aside .kg-ficha__acciones .wp-block-button__link { width: 100%; text-align: center; } @media (max-width: 900px) { .kg-proyecto-cuerpo { grid-template-columns: minmax(0, 1fr); } .kg-proyecto-aside { position: static; } } /* ---- Dos secciones seguidas con el mismo fondo (v1.11.0) ---- Sin cambio de color que las separe, el espacio doble se veía como un hueco: la segunda arranca con menos aire y una línea fina con brillo verde marca el cambio de tema. */ .kg-section:not(.kg-section--alt) + .kg-section:not(.kg-section--alt) { position: relative; padding-top: var(--wp--preset--spacing--60); } .kg-section:not(.kg-section--alt) + .kg-section:not(.kg-section--alt)::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; height: 1px; width: min(var(--wp--style--global--wide-size, 1200px), calc(100% - 2 * var(--wp--style--root--padding-left, 1rem))); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent), transparent); } .kg-section:not(.kg-section--alt):has(+ .kg-section:not(.kg-section--alt)) { padding-bottom: var(--wp--preset--spacing--60); } /* ---- Preguntas frecuentes (v1.11.0) ---- */ .kg-faq { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); align-items: start; } .kg-faq__head { position: sticky; top: 120px; } .kg-faq__head > * { margin-block: 0; } .kg-faq__head > * + * { margin-top: var(--wp--preset--spacing--30) !important; } .kg-faq__mas { margin-top: var(--wp--preset--spacing--50) !important; color: var(--wp--preset--color--contrast-2); } .kg-faq__mas a { color: var(--wp--preset--color--primary); font-weight: 600; } .kg-faq__lista { display: grid; gap: 0.75rem; margin: 0 !important; } .kg-faq__lista > * { margin: 0 !important; } .kg-faq__item { border: 1px solid var(--wp--preset--color--line); border-radius: 14px; background: var(--wp--preset--color--base-2); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; } .kg-faq__item[open] { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--line)); box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); } .kg-faq__item summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 1.1rem 3.5rem 1.1rem 1.35rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--contrast); } .kg-faq__item summary::-webkit-details-marker { display: none; } .kg-faq__item summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 1.75rem; height: 1.75rem; translate: 0 -50%; border-radius: 50%; background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 10px 2px no-repeat, linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 2px 10px no-repeat, color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); transition: transform 0.3s ease; } .kg-faq__item[open] summary::after { transform: rotate(135deg); } .kg-faq__item summary:hover { color: var(--wp--preset--color--primary); } .kg-faq__item summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 14px; } .kg-faq__item > p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--wp--preset--color--contrast-2); line-height: 1.7; } .kg-faq__item > p strong { color: var(--wp--preset--color--contrast); } @media (max-width: 900px) { .kg-faq { grid-template-columns: minmax(0, 1fr); } .kg-faq__head { position: static; } } @media (prefers-reduced-motion: reduce) { .kg-faq__item, .kg-faq__item summary::after { transition: none; } } /* ---- Botón de ampliar imagen de WordPress: al menos 24 px para tocar con el dedo (WCAG 2.5.8) (v1.11.2) ---- */ .wp-lightbox-container button.lightbox-trigger { width: 2.25rem; height: 2.25rem; } /* ---- Servicios: tarjeta de ayuda para elegir (v1.13.0) ---- */ .kg-servicios__cta { display: flex; flex-direction: column; justify-content: center; border-style: dashed !important; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent), transparent 60%), var(--wp--preset--color--base-3); } .kg-servicios__cta .wp-block-buttons { gap: 0.6rem; margin-top: var(--wp--preset--spacing--30); } .kg-servicios__cta .wp-block-button__link { padding: 0.65rem 1.1rem; font-size: var(--wp--preset--font-size--small); } .kg-servicios__cta .is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--line); } .kg-servicios__cta .is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } #nosotros .kg-list { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } /* ---- Ficha del fundador: tecnologías, cita y LinkedIn (v1.14.0) ---- */ .kg-founder > * + * { margin-top: var(--wp--preset--spacing--30) !important; } .kg-founder__tech { list-style: none; padding: 0; margin: var(--wp--preset--spacing--40) 0 0 !important; display: flex; flex-wrap: wrap; gap: 0.45rem; } .kg-founder__tech li { padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--wp--preset--color--primary); border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent); background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent); } .kg-founder__quote { position: relative; margin-top: var(--wp--preset--spacing--40) !important; padding: 1rem 1.1rem 1rem 1.25rem; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--secondary) 8%, transparent); border-left: 3px solid var(--wp--preset--color--secondary); font-style: italic; line-height: 1.65; color: var(--wp--preset--color--contrast) !important; } .kg-founder__links { margin-top: var(--wp--preset--spacing--40) !important; } .kg-founder__links .is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--line); padding: 0.6rem 1.1rem; font-size: var(--wp--preset--font-size--small); } .kg-founder__links .is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); } /* ---- Servicios: imagen de ejemplo en cada tarjeta (v1.15.0) ---- */ .kg-servicio__img { position: relative; margin: 0 0 var(--wp--preset--spacing--40) !important; border-radius: 12px; overflow: hidden; border: 1px solid var(--wp--preset--color--line); aspect-ratio: 16 / 9; } .kg-servicio__img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform 0.6s ease; } .is-style-kg-card:hover .kg-servicio__img img { transform: scale(1.04); } .kg-servicio__img figcaption { position: absolute; right: 0.5rem; bottom: 0.5rem; margin: 0; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; color: var(--wp--preset--color--contrast); background: rgba(11, 17, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (prefers-reduced-motion: reduce) { .kg-servicio__img img { transition: none; } .is-style-kg-card:hover .kg-servicio__img img { transform: none; } } /* ---- Testimonios (v1.16.0) ---- */ .kg-testimonios__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1.25rem; margin-top: var(--wp--preset--spacing--60) !important; } .kg-testimonios__grid.is-uno { max-width: 46rem; } .kg-testimonio { position: relative; display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; background: var(--wp--preset--color--base-3); transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } .kg-testimonio:hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--line)); transform: translateY(-3px); box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); } .kg-testimonio::before { content: "“"; position: absolute; top: 0.4rem; right: 1.1rem; font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: 1; color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent); pointer-events: none; } .kg-testimonio__stars { margin: 0; display: flex; gap: 0.15rem; color: var(--wp--preset--color--secondary); font-size: 1.05rem; letter-spacing: 0; } .kg-testimonio__stars .is-off { color: var(--wp--preset--color--line); } .kg-testimonio__texto { margin: 0; padding: 0; border: 0; flex: 1; } .kg-testimonio__texto p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--wp--preset--color--contrast); } .kg-testimonio__autor { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); } .kg-testimonio__foto { flex: none; width: 46px; height: 46px; border-radius: 50% !important; object-fit: cover; } .kg-testimonio__iniciales { display: grid; place-items: center; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--on-primary); background: linear-gradient(135deg, var(--wp--preset--color--primary), color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--secondary))); } .kg-testimonio__quien { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .kg-testimonio__quien strong { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--display); } .kg-testimonio__quien span { color: var(--wp--preset--color--contrast-2); font-size: var(--wp--preset--font-size--small); } .kg-testimonio__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; font-size: var(--wp--preset--font-size--small); } .kg-testimonio__links a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; padding-block: 0.2rem; } .kg-testimonio__links a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .kg-testimonio { transition: none; } .kg-testimonio:hover { transform: none; } } /* ---- Contacto: enlaces de teléfono y correo (v1.17.0) ---- */ .kg-contact-line a { color: var(--wp--preset--color--contrast); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent); padding-block: 0.15rem; } .kg-contact-line a:hover { color: var(--wp--preset--color--primary); } /* ---- Páginas legales: ícono en cada sección, frases clave destacadas y enlaces del pie (v1.20.0) ---- */ .kg-legal-h { display: flex; align-items: center; gap: 0.75rem; } .kg-legal-h::before { content: ""; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent); } .kg-legal-h { position: relative; font-size: clamp(1.3rem, 2.2vw, 1.65rem) !important; line-height: 1.3; margin-top: var(--wp--preset--spacing--60) !important; } .kg-legal-h::after { content: ""; position: absolute; left: 0.6rem; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem; background-color: var(--wp--preset--color--primary); -webkit-mask: var(--kg-ico) center / contain no-repeat; mask: var(--kg-ico) center / contain no-repeat; } .kg-legal-clave { position: relative; padding: 1rem 1.15rem 1rem 3.1rem !important; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--secondary) 9%, transparent); border-left: 3px solid var(--wp--preset--color--secondary); color: var(--wp--preset--color--contrast) !important; font-weight: 500; } .kg-legal-clave::before { content: ""; position: absolute; left: 1rem; top: 1.1rem; width: 1.25rem; height: 1.25rem; background-color: var(--wp--preset--color--secondary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; } .kg-legal-fecha { color: var(--wp--preset--color--contrast-2) !important; } .kg-footer__legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; } .kg-footer__legal a { display: inline-flex; align-items: center; gap: 0.4rem; padding-block: 0.2rem; } .kg-footer__legal a::before { content: ""; flex: none; width: 15px; height: 15px; background-color: var(--wp--preset--color--primary); opacity: 0.8; -webkit-mask: var(--kg-ico) center / contain no-repeat; mask: var(--kg-ico) center / contain no-repeat; } .kg-legal-h--candado { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .kg-legal-h--lista { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E"); } .kg-legal-h--objetivo { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E"); } .kg-legal-h--check { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E"); } .kg-legal-h--balanza { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M5 7h14'/%3E%3Cpath d='M5 7l-3 6a3 3 0 0 0 6 0L5 7zM19 7l-3 6a3 3 0 0 0 6 0l-3-6z'/%3E%3C/svg%3E"); } .kg-legal-h--mensaje { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E"); } .kg-legal-h--servidor { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E"); } .kg-legal-h--escudo { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } .kg-legal-h--reloj { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } .kg-legal-h--usuario { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); } .kg-legal-h--actualizar { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.5-4.5L4 8M4 4v4h4M4 13a8 8 0 0 0 14.5 4.5L20 16M20 20v-4h-4'/%3E%3C/svg%3E"); } .kg-legal-h--galleta { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 3 3 0 0 1-3-3 3 3 0 0 1-3-3 3 3 0 0 1-3-3z'/%3E%3Cpath d='M8.5 10.5h.01M10 15.5h.01M15 14h.01'/%3E%3C/svg%3E"); } .kg-legal-h--globo { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); } .kg-legal-h--ajustes { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); } .kg-legal-h--info { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E"); } .kg-legal-h--cursor { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l14 7-6 2-2 6L5 3z'/%3E%3C/svg%3E"); } .kg-legal-h--copyright { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5a4 4 0 1 0 0 5'/%3E%3C/svg%3E"); } .kg-legal-h--documento { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); } .kg-legal-h--enlace { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); } .kg-legal-h--correo { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } .kg-legal-h--calendario { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .kg-footer__legal a.is-politica-de-tratamiento-de-datos { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .kg-footer__legal a.is-politica-de-cookies { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 3 3 0 0 1-3-3 3 3 0 0 1-3-3 3 3 0 0 1-3-3z'/%3E%3Cpath d='M8.5 10.5h.01M10 15.5h.01M15 14h.01'/%3E%3C/svg%3E"); } .kg-footer__legal a.is-terminos-y-condiciones { --kg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); } /* ---- Ajustes finales de legibilidad y toque (v1.20.1) ---- */ .kg-servicio__img figcaption { font-size: 0.75rem; } .kg-form__check a { display: inline-block; padding-block: 0.25rem; } /* ---- Ritmo de la portada (v1.22.0): servicios en filas, proceso en línea de tiempo y principios sin cajas. Las tarjetas se reservan para donde se comparan (planes) y para destacar la ayuda. ---- */ @media (min-width: 900px) { .kg-servicios.is-layout-grid.is-layout-grid { grid-template-columns: 1fr; gap: 0; } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--wp--preset--spacing--60); align-items: start; background: none; border: 0; border-top: 1px solid var(--wp--preset--color--line); border-radius: 0; padding: var(--wp--preset--spacing--50) 0; transform: none; } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta):hover { transform: none; border-top-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--line)); } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > * { grid-column: 2; margin-block: 0; } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > * + * { margin-block-start: var(--wp--preset--spacing--30); } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > .kg-servicio__img, .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > .kg-icon { grid-column: 1; grid-row: 1 / span 4; margin: 0 !important; } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > .kg-icon { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--wp--preset--color--line); } .kg-servicios > .is-style-kg-card:not(.kg-servicios__cta) > .kg-icon svg { width: 44px; height: 44px; } .kg-servicios > .kg-servicios__cta { margin-top: var(--wp--preset--spacing--50); } } .kg-step.is-style-kg-card { position: relative; background: none; border: 0; border-radius: 0; transform: none; } .kg-step.is-style-kg-card:hover { transform: none; } .kg-step.is-style-kg-card::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px var(--wp--preset--color--base-2); } @media (min-width: 782px) { .kg-step.is-style-kg-card { border-top: 2px solid var(--wp--preset--color--line); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) 0 0; } .kg-step.is-style-kg-card::before { top: -7px; left: 0; } } @media (max-width: 781px) { .kg-step.is-style-kg-card { border-left: 2px solid var(--wp--preset--color--line); padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } .kg-step.is-style-kg-card::before { top: 0.5rem; left: -7px; } } #metodo .is-style-kg-card, #proceso .is-style-kg-card:not(.kg-step) { background: none; border: 0; border-top: 1px solid var(--wp--preset--color--line); border-radius: 0; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0 0; transform: none; } #metodo .is-style-kg-card:hover, #proceso .is-style-kg-card:not(.kg-step):hover { transform: none; }