/* ==========================================================================
Kamaya Secure — estilos principales
Mobile-first. Breakpoints (min-width): 640 sm · 900 md · 1200 lg.
Tokens documentados en CLAUDE.md — cambiar ahí primero, luego aquí.
Índice
1. Fuentes
2. Tokens
3. Reset y base
4. Tipografía
5. Layout (contenedores, secciones, grids)
6. Componentes (botones, eyebrow, tarjetas, formularios)
7. Header y navegación
8. Switcher de idioma
9. Footer
10. Cabeceras de página y contenido del editor
11. Utilidades y accesibilidad
12. Secciones de landing (Inicio y páginas construidas con bloques)
========================================================================== */
/* 1. Fuentes (variables, SIL OFL, auto-hospedadas) ------------------------ */
@font-face {
font-family: "Manrope";
src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* 2. Tokens --------------------------------------------------------------- */
:root {
/* Marca (exactos del logo) */
--kmy-blue: #1695DB;
--kmy-carbon: #3D3D3D;
--kmy-sky: #35C2FB;
--kmy-orange: #FF5001;
--kmy-white: #FFFFFF;
/* Escala azul */
--kmy-blue-50: #EAF5FC;
--kmy-blue-100: #D0E9F8;
--kmy-blue-300: #6CBDEB;
--kmy-blue-500: var(--kmy-blue);
--kmy-blue-700: #0F6FA8;
--kmy-blue-800: #0B5584;
--kmy-blue-900: #083A5A;
/* Naranja */
--kmy-orange-600: #C73E00;
--kmy-orange-300: #FF7A3D;
/* Superficies oscuras */
--kmy-navy-900: #07121D; /* header y bloques más oscuros */
--kmy-navy: #0B1B2B;
--kmy-navy-800: #12283D;
--kmy-navy-700: #1B3650;
/* Neutros */
--kmy-ink: #0B1B2B;
--kmy-text: var(--kmy-carbon);
--kmy-muted: #5A6573;
--kmy-muted-dark: #A9B4C2;
--kmy-line: #DDE3EA;
--kmy-surface: #F5F8FB;
/* Estados */
--kmy-success: #1E8E5A;
--kmy-error: #C0262D;
--kmy-focus: var(--kmy-sky);
/* Tipografía */
--kmy-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--kmy-font-label: "Jost", "Manrope", system-ui, sans-serif;
--kmy-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--kmy-fs-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
--kmy-fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
--kmy-fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.875rem);
--kmy-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--kmy-fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
--kmy-fs-body: 1.0625rem;
--kmy-fs-small: 0.875rem;
--kmy-fs-label: 0.8125rem;
/* Espaciado */
--kmy-space-1: 0.25rem; --kmy-space-2: 0.5rem; --kmy-space-3: 0.75rem;
--kmy-space-4: 1rem; --kmy-space-5: 1.5rem; --kmy-space-6: 2rem;
--kmy-space-7: 3rem; --kmy-space-8: 4rem; --kmy-space-9: 6rem;
--kmy-section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
--kmy-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
--kmy-container: 1240px;
--kmy-container-narrow: 820px;
/* Radios, sombras, movimiento */
--kmy-radius-sm: 4px;
--kmy-radius: 8px;
--kmy-radius-lg: 14px;
--kmy-radius-pill: 999px; /* botones y etiquetas (estilo corporativo tipo NCC) */
--kmy-shadow-sm: 0 1px 2px rgb(11 27 43 / 0.08);
--kmy-shadow: 0 4px 16px rgb(11 27 43 / 0.08), 0 1px 3px rgb(11 27 43 / 0.06);
--kmy-shadow-lg: 0 16px 40px rgb(11 27 43 / 0.14);
--kmy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--kmy-dur: 180ms;
/* Alturas del header (usadas por el panel móvil y scroll-margin) */
--kmy-header-h: 64px;
}
@media (min-width: 1200px) {
:root { --kmy-header-h: 80px; }
}
/* 3. Reset y base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--kmy-header-h) + var(--kmy-space-4));
}
body {
margin: 0;
background: var(--kmy-white);
color: var(--kmy-text);
font-family: var(--kmy-font-sans);
font-size: var(--kmy-fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Bloquea el scroll del fondo mientras el menú móvil está abierto. */
body.kmy-nav-open { overflow: hidden; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
a {
color: var(--kmy-blue-700);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--kmy-dur) var(--kmy-ease);
}
a:hover { color: var(--kmy-blue-800); }
:focus-visible {
outline: 2px solid var(--kmy-focus);
outline-offset: 3px;
border-radius: var(--kmy-radius-sm);
}
/* Sobre fondo claro el celeste pierde contraste: reforzamos con azul oscuro. */
.kmy-main :focus-visible { outline-color: var(--kmy-blue-700); }
.kmy-section--dark :focus-visible,
.kmy-page-hero :focus-visible,
.kmy-footer :focus-visible { outline-color: var(--kmy-sky); }
.kmy-main:focus { outline: none; }
::selection { background: var(--kmy-blue-100); color: var(--kmy-ink); }
/* 4. Tipografía ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--kmy-space-4);
color: var(--kmy-ink);
font-family: var(--kmy-font-sans);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
}
h1 { font-size: var(--kmy-fs-h1); font-weight: 800; }
h2 { font-size: var(--kmy-fs-h2); font-weight: 800; }
h3 { font-size: var(--kmy-fs-h3); line-height: 1.25; }
h4 { font-size: 1.125rem; line-height: 1.3; }
p, ul, ol, blockquote, figure, table { margin: 0 0 var(--kmy-space-4); }
p { text-wrap: pretty; }
code, kbd, pre, samp { font-family: var(--kmy-font-mono); font-size: 0.925em; }
.kmy-lead {
font-size: var(--kmy-fs-lead);
line-height: 1.55;
color: var(--kmy-muted);
max-width: 60ch;
}
/* Eyebrow: MAYÚSCULAS espaciadas, eco del "S E C U R E" del logo. */
.kmy-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--kmy-space-2);
margin: 0 0 var(--kmy-space-3);
font-family: var(--kmy-font-label);
font-size: var(--kmy-fs-label);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kmy-blue-700);
}
.kmy-eyebrow::before {
content: "";
width: 1.5rem;
height: 2px;
background: var(--kmy-blue);
}
/* 5. Layout --------------------------------------------------------------- */
.kmy-container {
width: 100%;
max-width: calc(var(--kmy-container) + 2 * var(--kmy-gutter));
margin-inline: auto;
padding-inline: var(--kmy-gutter);
}
.kmy-container--narrow { max-width: calc(var(--kmy-container-narrow) + 2 * var(--kmy-gutter)); }
.kmy-section { padding-block: var(--kmy-section-y); }
.kmy-section--surface { background: var(--kmy-surface); }
.kmy-section--dark {
background: var(--kmy-navy);
color: var(--kmy-muted-dark);
}
.kmy-section--dark h1, .kmy-section--dark h2, .kmy-section--dark h3, .kmy-section--dark h4 { color: var(--kmy-white); }
.kmy-section--dark .kmy-lead { color: var(--kmy-muted-dark); }
.kmy-section--dark .kmy-eyebrow { color: var(--kmy-sky); }
.kmy-section--dark a:not(.kmy-btn):not(.wp-block-button__link) { color: var(--kmy-sky); }
.kmy-section__head { max-width: 760px; margin-bottom: var(--kmy-space-7); }
.kmy-grid { display: grid; gap: var(--kmy-space-5); }
@media (min-width: 640px) {
.kmy-grid--2, .kmy-grid--3, .kmy-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.kmy-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kmy-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* 6. Componentes ---------------------------------------------------------- */
/* Botones — forma de píldora (estilo corporativo tipo NCC) */
.kmy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--kmy-space-2);
min-height: 48px; /* objetivo táctil */
padding: 0.75rem 1.625rem;
border: 2px solid transparent;
border-radius: var(--kmy-radius-pill);
font-family: var(--kmy-font-sans);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--kmy-dur) var(--kmy-ease), color var(--kmy-dur) var(--kmy-ease),
border-color var(--kmy-dur) var(--kmy-ease), transform var(--kmy-dur) var(--kmy-ease);
}
.kmy-btn .kmy-icon { transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-btn:hover .kmy-icon--arrow-right { transform: translateX(3px); }
/* Primario: azul oscuro accesible (5.4:1) */
.kmy-btn--primary { background: var(--kmy-blue-700); color: var(--kmy-white); }
.kmy-btn--primary:hover { background: var(--kmy-blue-800); color: var(--kmy-white); }
/* CTA: naranja de marca con texto navy (5.3:1) */
.kmy-btn--cta { background: var(--kmy-orange); color: var(--kmy-navy); }
.kmy-btn--cta:hover { background: var(--kmy-orange-300); color: var(--kmy-navy); }
/* Secundario sobre claro */
.kmy-btn--outline { border-color: var(--kmy-blue-700); color: var(--kmy-blue-700); background: transparent; }
.kmy-btn--outline:hover { background: var(--kmy-blue-50); color: var(--kmy-blue-800); }
/* Secundario sobre oscuro (píldora blanca con borde) */
.kmy-btn--ghost { border-color: var(--kmy-white); color: var(--kmy-white); background: transparent; }
.kmy-btn--ghost:hover { background: var(--kmy-white); color: var(--kmy-navy); }
/* Enlace con flecha */
.kmy-link-arrow {
display: inline-flex;
align-items: center;
gap: var(--kmy-space-2);
font-weight: 700;
text-decoration: none;
}
.kmy-link-arrow:hover .kmy-icon { transform: translateX(3px); }
.kmy-link-arrow .kmy-icon { transition: transform var(--kmy-dur) var(--kmy-ease); }
/* Tarjetas */
.kmy-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--kmy-white);
border: 1px solid var(--kmy-line);
border-radius: var(--kmy-radius-lg);
overflow: hidden;
transition: box-shadow var(--kmy-dur) var(--kmy-ease), border-color var(--kmy-dur) var(--kmy-ease),
transform var(--kmy-dur) var(--kmy-ease);
}
.kmy-card:hover { box-shadow: var(--kmy-shadow); border-color: var(--kmy-blue-100); }
.kmy-card__media { aspect-ratio: 16 / 9; background: var(--kmy-surface); overflow: hidden; }
.kmy-card__media img { width: 100%; height: 100%; object-fit: cover; }
.kmy-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--kmy-space-5); }
.kmy-card__title { font-size: 1.25rem; margin-bottom: var(--kmy-space-3); }
.kmy-card__link { color: inherit; text-decoration: none; }
/* Toda la tarjeta clicable sin anidar enlaces. */
.kmy-card__link::after { content: ""; position: absolute; inset: 0; }
.kmy-card__link:focus-visible { outline: none; }
.kmy-card:has(.kmy-card__link:focus-visible) { outline: 2px solid var(--kmy-blue-700); outline-offset: 3px; }
.kmy-card__text { color: var(--kmy-muted); margin-bottom: var(--kmy-space-4); }
.kmy-card__meta { margin: auto 0 0; font-size: var(--kmy-fs-small); color: var(--kmy-muted); }
/* Formularios (base; Contact Form 7 hereda estos estilos) */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
width: 100%;
min-height: 48px;
padding: 0.75rem 0.875rem;
border: 1px solid #B7C2CE;
border-radius: var(--kmy-radius);
background: var(--kmy-white);
color: var(--kmy-ink);
font: inherit;
}
textarea { min-height: 160px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--kmy-blue-700); }
label { display: block; margin-bottom: var(--kmy-space-2); font-weight: 600; color: var(--kmy-ink); }
/* :where() baja la especificidad para que clases como .kmy-btn--cta puedan cambiar el color */
:where(input[type="submit"], button[type="submit"]) {
min-height: 48px;
padding: 0.75rem 1.625rem;
border: 0;
border-radius: var(--kmy-radius-pill);
background: var(--kmy-blue-700);
color: var(--kmy-white);
font: inherit;
font-weight: 700;
cursor: pointer;
}
:where(input[type="submit"], button[type="submit"]):hover { background: var(--kmy-blue-800); }
/* 7. Header y navegación (header oscuro, mega menú) ----------------------- */
.kmy-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--kmy-navy-900);
color: var(--kmy-white);
transition: box-shadow var(--kmy-dur) var(--kmy-ease);
}
.admin-bar .kmy-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .kmy-header { top: 32px; } }
.kmy-header.is-scrolled { box-shadow: 0 6px 24px rgb(0 0 0 / 0.35); }
.kmy-header :focus-visible { outline-color: var(--kmy-sky); }
.kmy-header__bar {
display: flex;
align-items: center;
gap: var(--kmy-space-4);
min-height: var(--kmy-header-h);
}
.kmy-header__brand { display: block; flex-shrink: 0; margin-right: auto; }
.kmy-header__brand .kmy-logo img { width: 148px; }
@media (min-width: 1200px) { .kmy-header__brand .kmy-logo img { width: 168px; } }
.kmy-header__actions { display: flex; align-items: center; gap: var(--kmy-space-2); }
/* Botón hamburguesa (solo < 1200px) */
.kmy-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: var(--kmy-radius-pill);
background: transparent;
color: var(--kmy-white);
cursor: pointer;
}
.kmy-nav-toggle:hover { background: rgb(255 255 255 / 0.08); }
.kmy-nav-toggle__close { display: none; }
.kmy-nav-toggle[aria-expanded="true"] .kmy-nav-toggle__open { display: none; }
.kmy-nav-toggle[aria-expanded="true"] .kmy-nav-toggle__close { display: inline; }
/* Panel móvil: ocupa la pantalla bajo el header */
.kmy-header__panel {
position: fixed;
inset: var(--kmy-header-h) 0 0 0;
display: none;
flex-direction: column;
gap: var(--kmy-space-5);
padding: var(--kmy-space-5) var(--kmy-gutter) var(--kmy-space-7);
background: var(--kmy-navy-900);
overflow-y: auto;
overscroll-behavior: contain;
}
.admin-bar .kmy-header__panel { top: calc(var(--kmy-header-h) + 46px); }
.kmy-header__panel.is-open { display: flex; }
.kmy-nav__list, .kmy-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.kmy-nav__list > li { border-bottom: 1px solid var(--kmy-navy-700); }
.kmy-nav .menu-item { position: relative; }
.kmy-nav a {
display: block;
padding: var(--kmy-space-4) 0;
color: var(--kmy-white);
font-weight: 500;
text-decoration: none;
}
.kmy-nav a:hover, .kmy-nav .current-menu-item > a, .kmy-nav .current-menu-ancestor > a { color: var(--kmy-sky); }
.kmy-nav__desc { display: none; }
/* Botón de submenú (insertado por JS) */
.kmy-submenu-toggle {
position: absolute;
top: 0.25rem;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
background: transparent;
color: var(--kmy-white);
cursor: pointer;
}
.kmy-submenu-toggle .kmy-icon { transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-submenu-toggle[aria-expanded="true"] .kmy-icon { transform: rotate(180deg); }
.kmy-nav .sub-menu { display: none; padding-bottom: var(--kmy-space-3); }
.kmy-nav .sub-menu.is-open { display: block; }
.kmy-nav .sub-menu a { padding: var(--kmy-space-2) 0 var(--kmy-space-2) var(--kmy-space-4); color: var(--kmy-muted-dark); }
/* Mega menú en móvil: panel desplegable con ícono + título (sin frase ni banner) */
.kmy-mega { display: none; padding-bottom: var(--kmy-space-3); }
.kmy-mega.is-open { display: block; }
.kmy-mega .sub-menu { display: block; padding: 0; }
.kmy-mega__title, .kmy-mega__desc, .kmy-mega__banner { display: none; }
.kmy-mega__item a { display: flex; align-items: center; gap: var(--kmy-space-3); }
.kmy-mega__icon { display: inline-flex; flex-shrink: 0; color: var(--kmy-sky); }
.kmy-mega__icon .kmy-icon { width: 22px; height: 22px; }
.kmy-header__cta { width: 100%; }
.kmy-menu-hint { margin: 0; font-size: var(--kmy-fs-small); }
.kmy-menu-hint a { color: var(--kmy-sky); }
/* Escritorio: navegación en línea con mega menú */
@media (min-width: 1200px) {
.kmy-header__bar { gap: var(--kmy-space-6); }
.kmy-header__brand { margin-right: 0; }
.kmy-nav-toggle { display: none; }
.kmy-header__actions { order: 3; }
.kmy-header__panel,
.admin-bar .kmy-header__panel {
position: static;
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: var(--kmy-space-5);
padding: 0;
overflow: visible;
background: none;
}
.kmy-nav__list { display: flex; align-items: center; gap: var(--kmy-space-1); }
.kmy-nav__list > li { border: 0; position: static; }
.kmy-nav__list > li > a {
display: flex;
align-items: center;
min-height: var(--kmy-header-h);
padding: 0 var(--kmy-space-3);
font-size: 0.9375rem;
}
.kmy-nav__list > .menu-item-has-children { position: relative; }
.kmy-nav__list > .menu-item-has-children:has(> .kmy-mega) { position: static; } /* el mega menú se alinea al contenedor */
.kmy-nav__list > .menu-item-has-children > a { padding-right: 1.75rem; }
.kmy-submenu-toggle {
top: 50%;
right: 0.125rem;
width: 28px;
height: 28px;
transform: translateY(-50%);
}
.kmy-submenu-toggle .kmy-icon { width: 16px; height: 16px; }
/* Desplegable simple (menús sin panel mega) */
.kmy-nav__list > li > .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
display: grid;
gap: var(--kmy-space-1);
width: 300px;
padding: var(--kmy-space-3);
background: var(--kmy-white);
border-radius: 0 0 var(--kmy-radius-lg) var(--kmy-radius-lg);
box-shadow: var(--kmy-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--kmy-dur) var(--kmy-ease), transform var(--kmy-dur) var(--kmy-ease), visibility var(--kmy-dur);
}
.kmy-nav__list > li:hover > .sub-menu,
.kmy-nav__list > li:focus-within > .sub-menu,
.kmy-nav__list > li > .sub-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.kmy-nav__list > li > .sub-menu a { padding: var(--kmy-space-3) var(--kmy-space-4); border-radius: var(--kmy-radius); font-size: 0.9375rem; font-weight: 600; color: var(--kmy-ink); }
.kmy-nav__list > li > .sub-menu a:hover { background: var(--kmy-blue-50); color: var(--kmy-blue-800); }
/* ---- Mega menú estilo NCC "Solutions" ---- */
.kmy-header__bar { position: relative; }
.kmy-mega {
position: absolute;
top: 100%;
/* 75 % del ancho del contenedor, centrado (reducido 25 %, 2026-09-26) */
left: 0;
right: 0;
width: calc((100% - 2 * var(--kmy-gutter)) * 0.75);
margin-inline: auto;
z-index: 20;
display: block;
padding: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 200ms var(--kmy-ease), transform 200ms var(--kmy-ease), visibility 200ms;
}
.kmy-nav__list > li:hover > .kmy-mega,
.kmy-nav__list > li:focus-within > .kmy-mega,
.kmy-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.kmy-mega__inner {
padding: 2.25rem clamp(1.5rem, 0.75rem + 2.25vw, 3rem) clamp(1.5rem, 0.75rem + 2.25vw, 3rem);
border-radius: 0 0 var(--kmy-radius-lg) var(--kmy-radius-lg);
background: #F1F3F6;
box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.kmy-mega__title {
display: block;
margin: 0;
padding-bottom: var(--kmy-space-3);
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--kmy-ink);
border-bottom: 2px solid transparent;
border-image: linear-gradient(90deg, var(--kmy-blue-700), var(--kmy-sky) 55%, var(--kmy-orange)) 1;
}
.kmy-mega .kmy-mega__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.125rem var(--kmy-space-5);
margin: 0;
padding: var(--kmy-space-5) 0;
list-style: none;
}
.kmy-mega__item a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
height: 100%;
padding: 0.5625rem;
margin: -0.5625rem;
border-radius: var(--kmy-radius);
color: var(--kmy-ink);
text-decoration: none;
transition: background-color var(--kmy-dur) var(--kmy-ease);
}
.kmy-mega__item a:hover { background: var(--kmy-white); color: var(--kmy-ink); }
.kmy-mega__item a:focus-visible { outline-color: var(--kmy-blue-700); }
.kmy-mega__icon { display: inline-flex; margin-bottom: 0.375rem; color: var(--kmy-ink); transition: color var(--kmy-dur) var(--kmy-ease); }
.kmy-mega__icon .kmy-icon { width: 22px; height: 22px; stroke-width: 1.5; }
.kmy-mega__item a:hover .kmy-mega__icon { color: var(--kmy-blue-700); }
.kmy-mega__name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; }
.kmy-mega__desc { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--kmy-text); }
.kmy-mega__item.current-menu-item .kmy-mega__name { color: var(--kmy-blue-700); }
/* Banner al pie del panel */
.kmy-mega__banner {
position: relative;
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 1.125rem 3.75rem 1.125rem 1.125rem;
overflow: hidden;
border-radius: var(--kmy-radius);
background:
url("../img/logo/isotipo-light.webp") right 3.375rem center / auto 170% no-repeat,
linear-gradient(90deg, var(--kmy-blue-800) 0%, var(--kmy-blue-700) 55%, #5A4A7A 85%, var(--kmy-orange-600) 130%);
background-blend-mode: soft-light, normal;
color: var(--kmy-white);
text-decoration: none;
}
.kmy-mega__banner:hover { color: var(--kmy-white); }
.kmy-mega__banner:focus-visible { outline-color: var(--kmy-blue-700); }
.kmy-mega__banner-title { font-size: 0.9375rem; font-weight: 800; }
.kmy-mega__banner-text { font-size: 0.8125rem; color: rgb(255 255 255 / 0.9); }
.kmy-mega__banner .kmy-icon { position: absolute; top: 50%; right: 1.125rem; transform: translateY(-50%); transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-mega__banner:hover .kmy-icon { transform: translate(4px, -50%); }
/* Ítem activo: naranja con barra degradada inferior (como NCC) */
.kmy-nav__list > li:has(> .kmy-mega) > a { position: relative; }
.kmy-nav__list > li:has(> .kmy-mega) > a::after {
content: "";
position: absolute;
left: var(--kmy-space-3);
right: var(--kmy-space-3);
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--kmy-blue), var(--kmy-orange));
transform: scaleX(0);
transition: transform 200ms var(--kmy-ease);
}
.kmy-nav__list > li:has(> .kmy-mega):hover > a,
.kmy-nav__list > li:has(> .kmy-mega):focus-within > a,
.kmy-nav__list > li:has(> .kmy-mega.is-open) > a { color: var(--kmy-orange-300); }
.kmy-nav__list > li:has(> .kmy-mega):hover > a::after,
.kmy-nav__list > li:has(> .kmy-mega):focus-within > a::after,
.kmy-nav__list > li:has(> .kmy-mega.is-open) > a::after { transform: scaleX(1); }
.kmy-nav__list > li:has(> .kmy-mega):hover > .kmy-submenu-toggle,
.kmy-nav__list > li:has(> .kmy-mega.is-open) > .kmy-submenu-toggle { color: var(--kmy-orange-300); }
/* Oscurece la página detrás del panel abierto */
.kmy-header::after {
content: "";
position: fixed;
inset: var(--kmy-header-h) 0 0 0;
z-index: -1;
background: rgb(7 18 29 / 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 200ms var(--kmy-ease);
}
.admin-bar .kmy-header::after { top: calc(var(--kmy-header-h) + 32px); }
.kmy-header:has(.kmy-nav__list > li:hover > .kmy-mega),
.kmy-header:has(.kmy-nav__list > li:focus-within > .kmy-mega),
.kmy-header:has(.kmy-mega.is-open) { --kmy-mega-open: 1; }
.kmy-header:has(.kmy-nav__list > li:hover > .kmy-mega)::after,
.kmy-header:has(.kmy-nav__list > li:focus-within > .kmy-mega)::after,
.kmy-header:has(.kmy-mega.is-open)::after { opacity: 1; }
.kmy-header__cta { width: auto; min-height: 42px; padding: 0.5rem 1.25rem; font-size: 0.9375rem; white-space: nowrap; }
}
/* Escritorio estrecho (con "Plataforma" el menú tiene 5 entradas): menos aire entre enlaces para que todo
quepa en una fila y el botón del header no se parta. */
@media (min-width: 1200px) and (max-width: 1535px) {
.kmy-nav__list > li > a { padding-inline: var(--kmy-space-2); }
.kmy-nav__list > .menu-item-has-children > a { padding-right: 1.5rem; }
.kmy-header__cta { padding-inline: 1rem; }
}
/* Escritorio: los iconos del header (candado, globo) no se encogen cuando la fila va justa.
Solo ≥1200px: en móvil encogerlos es lo que evita que el botón de menú se salga en Chromium. */
@media (min-width: 1200px) { .kmy-header .kmy-icon { flex-shrink: 0; } }
/* 1200–1319px: aun así faltan hasta ~30px (Chromium dibuja el texto algo más ancho) → "Acceso clientes" solo con el
candado (el enlace conserva su aria-label). */
@media (min-width: 1200px) and (max-width: 1319px) {
.kmy-header .kmy-client-access__label { display: none; }
}
/* Acceso Clientes (Portal de Clientes): icono en móvil, icono + texto desde 640px */
.kmy-client-access {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 40px;
min-width: 40px;
justify-content: center;
padding: 0 0.75rem;
border-radius: var(--kmy-radius-pill);
font-size: 0.9375rem;
font-weight: 600;
color: var(--kmy-white);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--kmy-dur) var(--kmy-ease);
}
.kmy-client-access:hover { background: rgb(255 255 255 / 0.1); color: var(--kmy-white); }
.kmy-client-access .kmy-icon { color: var(--kmy-sky); }
.kmy-client-access__label { display: none; }
@media (min-width: 640px) { .kmy-client-access__label { display: inline; } }
.kmy-client-access--footer { min-height: 0; padding: 0; font-size: var(--kmy-fs-small); font-weight: 500; }
.kmy-client-access--footer:hover { background: none; text-decoration: underline; }
/* 8. Selector de idioma ---------------------------------------------------- */
/* Header: botón globo + código (estilo Fluid Attacks) que despliega los idiomas. */
.kmy-lang--header { position: relative; }
.kmy-lang__menu { position: relative; }
.kmy-lang__toggle {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 40px;
padding: 0 0.75rem;
border-radius: var(--kmy-radius-pill);
font-family: var(--kmy-font-sans);
font-size: 0.9375rem;
font-weight: 600;
color: var(--kmy-white);
cursor: pointer;
list-style: none;
user-select: none;
transition: background-color var(--kmy-dur) var(--kmy-ease);
}
.kmy-lang__toggle::-webkit-details-marker { display: none; }
.kmy-lang__toggle:hover,
.kmy-lang__menu[open] .kmy-lang__toggle { background: rgb(255 255 255 / 0.1); }
.kmy-lang__toggle .kmy-icon--chevron { transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-lang__menu[open] .kmy-lang__toggle .kmy-icon--chevron { transform: rotate(180deg); }
.kmy-lang__list {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
z-index: 120;
min-width: 190px;
margin: 0;
padding: var(--kmy-space-2);
list-style: none;
border-radius: var(--kmy-radius-lg);
background: var(--kmy-white);
box-shadow: var(--kmy-shadow-lg);
}
.kmy-lang__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kmy-space-3);
min-height: 44px;
padding: 0 var(--kmy-space-3);
border-radius: var(--kmy-radius);
font-size: 0.9375rem;
font-weight: 500;
color: var(--kmy-ink);
text-decoration: none;
}
.kmy-lang__list a:hover { background: var(--kmy-blue-50); color: var(--kmy-blue-800); }
.kmy-lang__list a[aria-current="true"] { font-weight: 700; color: var(--kmy-blue-700); }
.kmy-lang__list a:focus-visible { outline-color: var(--kmy-blue-700); outline-offset: -2px; }
.kmy-lang__list .kmy-icon--check { color: var(--kmy-blue-700); }
/* Footer: lista en línea ES | EN | PT */
.kmy-lang--footer ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.kmy-lang--footer li + li::before { content: "|"; color: rgb(255 255 255 / 0.35); padding-inline: 0.125rem; }
.kmy-lang--footer a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 var(--kmy-space-2);
font-family: var(--kmy-font-label);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.12em;
color: rgb(255 255 255 / 0.8);
text-decoration: none;
}
.kmy-lang--footer abbr { text-decoration: none; }
.kmy-lang--footer a:hover { color: var(--kmy-white); }
.kmy-lang--footer a[aria-current="true"] { color: var(--kmy-white); box-shadow: inset 0 -2px 0 var(--kmy-blue); }
/* 9. Footer (degradado de marca) ------------------------------------------ */
.kmy-footer {
position: relative;
background: linear-gradient(180deg, var(--kmy-blue-900) 0%, var(--kmy-blue-800) 45%, var(--kmy-blue-700) 78%, #7A5566 100%);
color: rgb(255 255 255 / 0.88);
font-size: 0.9375rem;
}
.kmy-footer::after {
/* destello naranja en el borde inferior, eco del acento de marca */
content: "";
position: absolute;
inset: auto 0 0 0;
height: 6px;
background: var(--kmy-orange);
}
.kmy-footer a { color: var(--kmy-white); text-decoration: none; }
.kmy-footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.kmy-footer :focus-visible { outline-color: var(--kmy-white); }
.kmy-footer__grid {
display: grid;
gap: var(--kmy-space-7);
padding-block: var(--kmy-space-8) var(--kmy-space-7);
}
@media (min-width: 640px) { .kmy-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kmy-footer__grid { grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr; } }
@media (min-width: 640px) and (max-width: 899px) { .kmy-footer__brand { grid-column: 1 / -1; } }
.kmy-footer__brand .kmy-logo img { width: 184px; margin-bottom: var(--kmy-space-5); }
.kmy-footer__tagline { max-width: 34ch; }
.kmy-footer__contact { list-style: none; margin: 0; padding: 0; }
.kmy-footer__contact li { display: flex; align-items: flex-start; gap: var(--kmy-space-3); margin-bottom: var(--kmy-space-3); }
.kmy-footer__contact .kmy-icon { flex-shrink: 0; margin-top: 0.25em; color: var(--kmy-sky); }
.kmy-footer__hotline { margin-top: var(--kmy-space-5); }
.kmy-footer__hotline strong { display: block; color: var(--kmy-white); }
.kmy-footer__title {
margin-bottom: var(--kmy-space-4);
font-family: var(--kmy-font-sans);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--kmy-white);
}
.kmy-footer__col ul { list-style: none; margin: 0; padding: 0; }
.kmy-footer__col li { margin-bottom: var(--kmy-space-2); }
.kmy-footer__col a { display: inline-block; padding-block: 0.25rem; color: rgb(255 255 255 / 0.9); }
.kmy-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--kmy-space-3) var(--kmy-space-5);
padding-block: var(--kmy-space-5) calc(var(--kmy-space-5) + 6px);
border-top: 1px solid rgb(255 255 255 / 0.2);
font-size: var(--kmy-fs-small);
}
.kmy-footer__bottom p { margin: 0; }
.kmy-footer__legal { display: flex; flex-wrap: wrap; gap: var(--kmy-space-5); list-style: none; margin: 0; padding: 0; }
/* 10. Cabeceras de página y contenido del editor -------------------------- */
.kmy-page-hero {
position: relative;
padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
background: var(--kmy-navy);
color: var(--kmy-muted-dark);
overflow: hidden;
}
/* Trazo diagonal del isotipo como textura sutil */
.kmy-page-hero::after {
content: "";
position: absolute;
right: -8%;
bottom: -30%;
width: min(48vw, 520px);
aspect-ratio: 1;
background: url("../img/logo/isotipo-light.webp") center / contain no-repeat;
opacity: 0.04;
pointer-events: none;
}
.kmy-page-hero .kmy-container { position: relative; z-index: 1; }
.kmy-page-hero .kmy-eyebrow { color: var(--kmy-sky); }
.kmy-page-hero__title { color: var(--kmy-white); max-width: 20ch; }
.kmy-page-hero .kmy-lead { color: var(--kmy-muted-dark); }
.kmy-page-hero__meta { margin: 0; font-size: var(--kmy-fs-small); }
.kmy-page-hero--full { min-height: 60vh; display: flex; align-items: center; }
/* Contenido del editor de bloques */
.kmy-entry > * { max-width: 72ch; }
.kmy-entry > .alignwide { max-width: var(--kmy-container); }
.kmy-entry > .alignfull { max-width: none; margin-inline: calc(-1 * var(--kmy-gutter)); }
.kmy-entry h2 { margin-top: var(--kmy-space-7); }
.kmy-entry h3 { margin-top: var(--kmy-space-6); }
.kmy-entry ul, .kmy-entry ol { padding-left: 1.25rem; }
.kmy-entry li { margin-bottom: var(--kmy-space-2); }
.kmy-entry li::marker { color: var(--kmy-blue); }
.kmy-entry blockquote {
margin-inline: 0;
padding: var(--kmy-space-2) 0 var(--kmy-space-2) var(--kmy-space-5);
border-left: 3px solid var(--kmy-blue);
font-size: var(--kmy-fs-lead);
color: var(--kmy-ink);
}
.kmy-entry pre {
padding: var(--kmy-space-5);
border-radius: var(--kmy-radius-lg);
background: var(--kmy-navy);
color: #E6EDF3;
overflow-x: auto;
}
.kmy-entry__featured { width: 100%; margin-bottom: var(--kmy-space-6); border-radius: var(--kmy-radius-lg); }
.kmy-entry figcaption { font-size: var(--kmy-fs-small); color: var(--kmy-muted); margin-top: var(--kmy-space-2); }
/* Artículo de Perspectivas: hero con entradilla y metadatos, títulos a escala de lectura */
.kmy-page-hero--article .kmy-page-hero__title { max-width: 26ch; }
.kmy-page-hero--article .kmy-lead { margin-top: var(--kmy-space-5); }
.kmy-page-hero--article .kmy-page-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--kmy-space-2);
margin-top: var(--kmy-space-6);
}
.kmy-section--article { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.kmy-entry--article h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.kmy-entry--article h3 { font-size: var(--kmy-fs-h3); }
/* Caja "En resumen" */
.kmy-entry .kmy-keypoints {
margin-block: var(--kmy-space-6);
padding: var(--kmy-space-5) var(--kmy-space-5) var(--kmy-space-3);
background: var(--kmy-blue-50);
border-left: 6px solid var(--kmy-blue);
border-radius: 0 var(--kmy-radius-lg) var(--kmy-radius-lg) 0;
}
.kmy-entry .kmy-keypoints h3 {
margin: 0 0 var(--kmy-space-3);
font-family: var(--kmy-font-label);
font-size: var(--kmy-fs-label);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kmy-blue-700);
}
/* Tablas comparativas: desplazamiento horizontal en móvil en lugar de columnas ilegibles */
.kmy-entry .kmy-table { margin-block: var(--kmy-space-6); overflow-x: auto; }
.kmy-table table { width: 100%; min-width: 34rem; border: 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.kmy-table thead,
.kmy-table th,
.kmy-table td { border: 0; }
.kmy-table th:first-child { width: 24%; }
.kmy-table th {
padding: var(--kmy-space-3);
text-align: left;
vertical-align: bottom;
color: var(--kmy-ink);
border-bottom: 2px solid var(--kmy-blue);
}
.kmy-table td { padding: var(--kmy-space-3); vertical-align: top; border-bottom: 1px solid var(--kmy-line); }
.kmy-table tbody tr:nth-child(even) { background: var(--kmy-surface); }
.kmy-table td:first-child { font-weight: 700; color: var(--kmy-ink); }
/* Nota final (fuentes, alcance, aviso legal) */
.kmy-entry .kmy-article-note {
margin-top: var(--kmy-space-7);
padding-top: var(--kmy-space-4);
border-top: 1px solid var(--kmy-line);
font-size: var(--kmy-fs-small);
color: var(--kmy-muted);
}
.kmy-article-note p { margin: 0; }
/* Paginación */
.kmy-pagination { margin-top: var(--kmy-space-7); }
.kmy-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--kmy-space-2); }
.kmy-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 var(--kmy-space-3);
border: 1px solid var(--kmy-line);
border-radius: var(--kmy-radius);
text-decoration: none;
font-weight: 600;
}
.kmy-pagination .page-numbers.current { background: var(--kmy-blue-700); border-color: var(--kmy-blue-700); color: var(--kmy-white); }
/* 11. Utilidades y accesibilidad ------------------------------------------ */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.kmy-skip-link {
position: absolute;
top: -100px;
left: var(--kmy-space-4);
z-index: 1000;
padding: var(--kmy-space-3) var(--kmy-space-4);
background: var(--kmy-navy);
color: var(--kmy-white);
font-weight: 700;
border-radius: var(--kmy-radius);
}
.kmy-skip-link:focus { top: var(--kmy-space-4); color: var(--kmy-white); }
/* Marcador visible para contenido pendiente (testimonios, casos, datos reales) */
.kmy-placeholder {
padding: var(--kmy-space-4);
border: 2px dashed var(--kmy-orange-600);
border-radius: var(--kmy-radius);
background: #FFF4EE;
color: var(--kmy-orange-600);
font-family: var(--kmy-font-mono);
font-size: var(--kmy-fs-small);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 12. Secciones de landing ------------------------------------------------ */
/*
* Cada sección es un Grupo del editor con estas clases. Estructura típica:
* section.kmy-section[--dark|--surface] > div.kmy-container > (head + contenido)
* Los bloques del editor no traen márgenes propios (blockGap desactivado en theme.json);
* el ritmo vertical lo definen estas reglas.
*/
.kmy-landing > * { margin: 0; }
.kmy-section__head > :last-child { margin-bottom: 0; }
.kmy-section__head .kmy-lead { margin-top: var(--kmy-space-4); }
.kmy-section__foot { margin: var(--kmy-space-7) 0 0; }
/* Botones del editor → estilos de marca */
.wp-block-buttons.kmy-actions,
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--kmy-space-3); }
.wp-block-button { margin: 0; }
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.75rem 1.375rem;
border: 2px solid transparent;
border-radius: var(--kmy-radius-pill);
background: var(--kmy-blue-700);
color: var(--kmy-white);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color var(--kmy-dur) var(--kmy-ease), border-color var(--kmy-dur) var(--kmy-ease), color var(--kmy-dur) var(--kmy-ease);
}
.wp-block-button__link:hover { background: var(--kmy-blue-800); color: var(--kmy-white); }
.is-style-kmy-cta .wp-block-button__link { background: var(--kmy-orange); color: var(--kmy-navy); }
.is-style-kmy-cta .wp-block-button__link:hover { background: var(--kmy-orange-300); color: var(--kmy-navy); }
.is-style-kmy-ghost .wp-block-button__link { background: transparent; border-color: var(--kmy-white); color: var(--kmy-white); }
.is-style-kmy-ghost .wp-block-button__link:hover { background: var(--kmy-white); color: var(--kmy-navy); }
.is-style-kmy-outline .wp-block-button__link { background: transparent; border-color: var(--kmy-blue-700); color: var(--kmy-blue-700); }
.is-style-kmy-outline .wp-block-button__link:hover { background: var(--kmy-blue-50); color: var(--kmy-blue-800); }
.kmy-section--dark .wp-block-button__link:focus-visible,
.kmy-hero .wp-block-button__link:focus-visible { outline-color: var(--kmy-sky); }
/* Hero de portada */
.kmy-hero {
position: relative;
padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
background:
radial-gradient(60rem 30rem at 85% 10%, rgb(22 149 219 / 0.22), transparent 60%),
var(--kmy-navy);
color: var(--kmy-muted-dark);
overflow: hidden;
}
.kmy-hero__inner { display: grid; gap: var(--kmy-space-7); align-items: center; }
@media (min-width: 900px) {
.kmy-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--kmy-space-8); }
}
.kmy-hero .kmy-eyebrow { color: var(--kmy-sky); }
.kmy-hero__title {
margin-bottom: var(--kmy-space-5);
font-size: var(--kmy-fs-display);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.03em;
color: var(--kmy-white);
}
.kmy-hero__title strong, .kmy-hero__title mark { color: var(--kmy-blue); background: none; font-weight: inherit; }
.kmy-hero .kmy-lead { margin-bottom: var(--kmy-space-6); color: #C9D3DE; }
.kmy-hero__media { margin: 0; }
.kmy-hero__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--kmy-radius-lg);
box-shadow: 0 0 0 1px rgb(53 194 251 / 0.25), 0 24px 60px rgb(0 0 0 / 0.45);
}
/* Franja de credenciales (texto, sin logos de terceros) */
.kmy-proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--kmy-space-3) var(--kmy-space-5);
margin-top: var(--kmy-space-8);
padding-top: var(--kmy-space-5);
border-top: 1px solid var(--kmy-navy-700);
}
.kmy-proof__label {
margin: 0;
font-family: var(--kmy-font-label);
font-size: var(--kmy-fs-label);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kmy-muted-dark);
}
.kmy-chips { display: flex; flex-wrap: wrap; gap: var(--kmy-space-2); margin: 0; padding: 0; list-style: none; }
.kmy-chips li {
margin: 0;
padding: 0.375rem 0.75rem;
border: 1px solid var(--kmy-navy-700);
border-radius: var(--kmy-radius-sm);
font-family: var(--kmy-font-label);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--kmy-white);
}
.kmy-section:not(.kmy-section--dark) .kmy-chips li { border-color: var(--kmy-line); color: var(--kmy-ink); }
/* Tarjetas de servicio / industria */
.kmy-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: var(--kmy-space-5);
border-radius: var(--kmy-radius);
background: var(--kmy-blue-50);
color: var(--kmy-blue-700);
transition: background-color var(--kmy-dur) var(--kmy-ease), color var(--kmy-dur) var(--kmy-ease);
}
.kmy-card:hover .kmy-card__icon { background: var(--kmy-blue); color: var(--kmy-white); }
.kmy-card__more {
display: inline-flex;
align-items: center;
gap: var(--kmy-space-2);
margin-top: auto;
font-weight: 700;
font-size: 0.9375rem;
color: var(--kmy-blue-700);
}
.kmy-card__more .kmy-icon { transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-card:hover .kmy-card__more .kmy-icon { transform: translateX(3px); }
.kmy-card--service, .kmy-card--industry { border-top: 3px solid var(--kmy-line); }
.kmy-card--service:hover, .kmy-card--industry:hover { border-top-color: var(--kmy-blue); transform: translateY(-2px); }
.kmy-card--industry .kmy-card__body { padding: var(--kmy-space-6); }
@media (min-width: 1200px) {
.kmy-cards--service { grid-template-columns: repeat(4, 1fr); }
.kmy-cards--service .kmy-card__title { font-size: 1.125rem; }
}
/* Imagen de respaldo en tarjetas de artículo sin imagen destacada */
.kmy-card__media--fallback {
position: relative;
background: linear-gradient(135deg, var(--kmy-navy-700) 0%, var(--kmy-navy) 70%);
}
.kmy-card__media--fallback::after {
content: "";
position: absolute;
right: 8%;
bottom: -18%;
width: 42%;
aspect-ratio: 1;
background: url("../img/logo/isotipo-light.webp") center / contain no-repeat;
opacity: 0.12;
}
/* Tarjeta CTA que cierra la grilla de servicios */
.kmy-card--cta { background: var(--kmy-navy); border-color: var(--kmy-navy); }
.kmy-card--cta .kmy-card__title, .kmy-card--cta .kmy-card__link { color: var(--kmy-white); }
.kmy-card--cta .kmy-card__text { color: var(--kmy-muted-dark); }
.kmy-card--cta .kmy-card__more { color: var(--kmy-orange-300); }
.kmy-card--cta .kmy-card__icon { background: var(--kmy-navy-700); color: var(--kmy-sky); }
.kmy-card--cta:hover { border-color: var(--kmy-navy); }
.kmy-card--cta:hover .kmy-card__icon { background: var(--kmy-orange); color: var(--kmy-navy); }
.kmy-card--cta:has(.kmy-card__link:focus-visible) { outline-color: var(--kmy-sky); }
/* Rasgos "Por qué Kamaya" */
.kmy-feature { padding-top: var(--kmy-space-5); border-top: 2px solid var(--kmy-navy-700); }
.kmy-section:not(.kmy-section--dark) .kmy-feature { border-top-color: var(--kmy-line); }
.kmy-feature__num {
margin: 0 0 var(--kmy-space-4);
font-family: var(--kmy-font-label);
font-size: var(--kmy-fs-label);
font-weight: 600;
letter-spacing: 0.16em;
color: var(--kmy-blue);
}
.kmy-feature h3 { font-size: 1.25rem; margin-bottom: var(--kmy-space-3); }
.kmy-feature p:last-child { margin-bottom: 0; }
/* El marcador de contenido pendiente también debe verse sobre fondo oscuro */
.kmy-section .kmy-placeholder { margin: var(--kmy-space-7) 0 0; }
/* Banda CTA final */
.kmy-cta-band {
position: relative;
padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
background: var(--kmy-blue-700);
color: var(--kmy-white);
overflow: hidden;
}
.kmy-cta-band::after {
content: "";
position: absolute;
top: 50%;
right: -6rem;
width: min(60vw, 560px);
aspect-ratio: 1;
transform: translateY(-50%);
background: url("../img/logo/isotipo-light.webp") center / contain no-repeat;
opacity: 0.1;
pointer-events: none;
}
.kmy-cta-band .kmy-container { position: relative; z-index: 1; }
.kmy-cta-band h2 { color: var(--kmy-white); max-width: 22ch; }
.kmy-cta-band .kmy-lead { color: var(--kmy-white); margin-bottom: var(--kmy-space-6); }
.kmy-cta-band .wp-block-button__link:focus-visible { outline-color: var(--kmy-white); }
/* Aviso de marcas bajo el carrusel de divulgación responsable */
.kmy-logos__note { margin: var(--kmy-space-5) 0 0; font-size: var(--kmy-fs-small); color: var(--kmy-muted); max-width: 90ch; }
/* 13. Páginas de servicio / industria -------------------------------------- */
@media (min-width: 1200px) {
/* "Otros servicios": 3 tarjetas en 3 columnas (la grilla de 4 es solo para el listado completo). */
.kmy-grid--3.kmy-cards--service { grid-template-columns: repeat(3, 1fr); }
}
.kmy-hero--page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.kmy-hero--page .kmy-hero__title { font-size: var(--kmy-fs-h1); max-width: 18ch; }
.kmy-hero--page .kmy-lead { margin-bottom: var(--kmy-space-6); }
.kmy-hero__inner--page { grid-template-columns: 1fr; }
@media (min-width: 900px) {
.kmy-hero__inner--page { grid-template-columns: 1fr auto; }
}
.kmy-hero__emblem {
display: none;
align-items: center;
justify-content: center;
width: 220px;
aspect-ratio: 1;
border: 1px solid var(--kmy-navy-700);
border-radius: var(--kmy-radius-lg);
background: linear-gradient(135deg, rgb(22 149 219 / 0.18), rgb(22 149 219 / 0.02));
color: var(--kmy-sky);
}
@media (min-width: 900px) { .kmy-hero__emblem { display: flex; } }
.kmy-hero__emblem .kmy-icon { stroke-width: 1.25; }
.kmy-actions { display: flex; flex-wrap: wrap; gap: var(--kmy-space-3); }
.kmy-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: var(--kmy-space-2);
margin-bottom: var(--kmy-space-5);
font-size: var(--kmy-fs-small);
color: var(--kmy-muted-dark);
}
.kmy-breadcrumb a { color: var(--kmy-muted-dark); text-decoration: none; }
.kmy-breadcrumb a:hover { color: var(--kmy-white); text-decoration: underline; }
/* Dos columnas: título a la izquierda, contenido a la derecha */
.kmy-split { display: grid; gap: var(--kmy-space-6); }
.kmy-split > .kmy-section__head { margin-bottom: 0; }
@media (min-width: 900px) {
.kmy-split { grid-template-columns: 5fr 7fr; gap: var(--kmy-space-8); align-items: start; }
.kmy-split > .kmy-section__head { margin-bottom: 0; position: sticky; top: calc(var(--kmy-header-h) + var(--kmy-space-6)); }
}
.kmy-split .kmy-prose > p { font-size: 1.125rem; }
.kmy-prose > :last-child { margin-bottom: 0; }
/* Tarjetas estáticas escritas en el editor (sin enlace) */
.kmy-landing .wp-block-group.kmy-card { padding: var(--kmy-space-5); }
.kmy-landing .kmy-card h3 { font-size: 1.1875rem; margin-bottom: var(--kmy-space-3); }
.kmy-landing .kmy-card p:last-child { margin-bottom: 0; }
.kmy-landing .kmy-card p { color: var(--kmy-muted); }
/* Lista con checks */
.kmy-checklist { margin: 0; padding: 0; list-style: none; }
.kmy-checklist li {
position: relative;
margin: 0;
padding: var(--kmy-space-4) 0 var(--kmy-space-4) 2.25rem;
border-bottom: 1px solid var(--kmy-line);
color: var(--kmy-ink);
}
.kmy-checklist li:first-child { padding-top: 0; }
.kmy-checklist li:first-child::before { top: 0; }
.kmy-checklist li::before {
content: "";
position: absolute;
top: var(--kmy-space-4);
left: 0;
width: 1.375rem;
height: 1.375rem;
border-radius: var(--kmy-radius-sm);
background: var(--kmy-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FA8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.kmy-checklist strong { display: block; margin-bottom: 0.125rem; }
/* Preguntas frecuentes (bloque Detalles del editor) */
.kmy-faq { border-top: 1px solid var(--kmy-line); }
.kmy-faq .wp-block-details {
margin: 0;
border-bottom: 1px solid var(--kmy-line);
}
.kmy-faq summary {
position: relative;
padding: var(--kmy-space-5) 3rem var(--kmy-space-5) 0;
font-size: 1.125rem;
font-weight: 700;
color: var(--kmy-ink);
cursor: pointer;
list-style: none;
}
.kmy-faq summary::-webkit-details-marker { display: none; }
.kmy-faq summary::after {
content: "";
position: absolute;
top: 50%;
right: var(--kmy-space-2);
width: 0.75rem;
height: 0.75rem;
border-right: 2px solid var(--kmy-blue-700);
border-bottom: 2px solid var(--kmy-blue-700);
transform: translateY(-70%) rotate(45deg);
transition: transform var(--kmy-dur) var(--kmy-ease);
}
.kmy-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.kmy-faq details > :not(summary) { margin: 0 0 var(--kmy-space-5); color: var(--kmy-text); max-width: 72ch; }
.kmy-section--divided { border-top: 1px solid var(--kmy-line); }
.kmy-section__head .kmy-proof__label { margin-top: var(--kmy-space-6); margin-bottom: var(--kmy-space-3); color: var(--kmy-muted); }
/* Placeholder en línea dentro de un texto (generado por setup/build_service.py) */
mark.kmy-ph {
padding: 0.05em 0.3em;
border: 1px dashed var(--kmy-orange-600);
border-radius: var(--kmy-radius-sm);
background: #FFF4EE;
color: var(--kmy-orange-600);
font-family: var(--kmy-font-mono);
font-size: 0.85em;
}
/* 14. Pestaña "¿Incidente en curso?" (fija a la derecha) -------------------- */
.kmy-hotline {
position: fixed;
right: 0;
bottom: var(--kmy-space-4);
z-index: 90;
display: flex;
align-items: flex-end;
flex-direction: column-reverse;
gap: var(--kmy-space-2);
padding-right: var(--kmy-space-4);
}
.kmy-hotline__tab {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.625rem 1.125rem;
border-radius: var(--kmy-radius-pill);
background: var(--kmy-orange);
color: var(--kmy-navy);
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
box-shadow: var(--kmy-shadow-lg);
}
.kmy-hotline__tab:hover { background: var(--kmy-orange-300); color: var(--kmy-navy); }
.kmy-hotline__panel {
position: relative;
width: min(360px, calc(100vw - 2rem));
padding: var(--kmy-space-6) var(--kmy-space-5) var(--kmy-space-5);
border-radius: var(--kmy-radius-lg);
background: var(--kmy-white);
box-shadow: var(--kmy-shadow-lg);
}
.kmy-hotline__panel[hidden] { display: none; }
.kmy-hotline__close {
position: absolute;
top: var(--kmy-space-2);
right: var(--kmy-space-2);
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--kmy-radius-pill);
background: transparent;
color: var(--kmy-ink);
cursor: pointer;
}
.kmy-hotline__close:hover { background: var(--kmy-surface); }
.kmy-hotline__title { margin: 0 0 var(--kmy-space-3); padding-right: var(--kmy-space-6); font-size: 1.125rem; font-weight: 800; line-height: 1.25; color: var(--kmy-ink); }
.kmy-hotline__text { margin-bottom: var(--kmy-space-5); color: var(--kmy-muted); font-size: 0.9375rem; }
.kmy-hotline__note { margin: var(--kmy-space-4) 0 0; font-size: var(--kmy-fs-small); color: var(--kmy-muted); }
/* Pantallas anchas: pestaña vertical pegada al borde derecho, a media altura.
Solo desde 1440px, cuando el margen lateral es mayor que la pestaña y no tapa el contenido
(en laptops de 1024–1366px se superponía a los carruseles). Por debajo, píldora abajo a la derecha. */
@media (min-width: 1440px) {
.kmy-hotline { top: 38%; bottom: auto; flex-direction: row; align-items: flex-start; gap: 0; padding-right: 0; }
.kmy-hotline__tab {
writing-mode: vertical-rl;
transform: rotate(180deg);
min-height: 0;
padding: 1.25rem 0.75rem;
border-radius: 0 var(--kmy-radius) var(--kmy-radius) 0;
box-shadow: none;
}
.kmy-hotline__panel { border-radius: 0 0 0 var(--kmy-radius-lg); }
}
@media print { .kmy-hotline { display: none; } }
/* 15. Portada estilo corporativo (inspirado en la arquitectura de NCC Group) */
.kmy-section--tint { background: var(--kmy-blue-50); }
.kmy-bar { padding-left: var(--kmy-space-4); border-left: 6px solid var(--kmy-blue); }
/* Hero a pantalla completa: imagen a la derecha fundida con el navy, tarjetas abajo */
.kmy-hero--home {
display: flex;
align-items: flex-end;
min-height: clamp(620px, 92vh, 920px);
padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--kmy-space-7);
background: var(--kmy-navy-900);
isolation: isolate;
/* Efecto estilo NCC: la imagen queda fija detrás mientras el contenido sube.
clip-path recorta la imagen fija al área del hero (no crea bloque contenedor). */
clip-path: inset(0);
}
.kmy-hero--home::before {
/* velo azul de marca sobre la imagen */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(50rem 30rem at 20% 35%, rgb(22 149 219 / 0.28), transparent 65%),
linear-gradient(90deg, var(--kmy-navy-900) 0%, rgb(7 18 29 / 0.85) 38%, rgb(7 18 29 / 0.2) 70%, rgb(7 18 29 / 0.55) 100%),
linear-gradient(0deg, var(--kmy-navy-900) 0%, transparent 35%);
}
.kmy-hero--home .kmy-hero__bg {
position: fixed; /* fija al viewport; el hero (clip-path) la recorta */
inset: 0 0 auto auto;
z-index: -2;
width: 100%;
height: 100vh;
height: 100lvh; /* evita saltos en móvil al ocultarse la barra del navegador */
margin: 0;
}
.kmy-hero--home .kmy-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; opacity: 0.45; }
@media (min-width: 900px) {
.kmy-hero--home .kmy-hero__bg { width: 64%; }
.kmy-hero--home .kmy-hero__bg img { opacity: 1; }
}
.kmy-hero--home .kmy-container { width: 100%; }
.kmy-hero--home .kmy-hero__content { max-width: 760px; }
/* Título de tres frases (copy del motor, 2026-09-28): tope de 4rem para que el lead y los botones
queden dentro de la primera pantalla en escritorio. */
.kmy-hero--home .kmy-hero__title {
font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.035em;
max-width: 17ch;
}
/* Título en líneas fijas (una frase por línea, separadas con
): nunca se parte dentro de una frase.
En pantallas estrechas el tamaño baja con el ancho para que la frase más larga (~10.8em) quepa. */
.kmy-hero--home .kmy-hero__title--lines {
max-width: none;
white-space: nowrap;
font-size: min(clamp(2.375rem, 1.4rem + 3.6vw, 4rem), calc((100vw - 2 * var(--kmy-gutter)) / var(--kmy-title-em, 10.8)));
}
/* Ancho de la frase más larga + ~12 % de margen (medido: ES 9.66em, EN 12.89em, PT 11.93em). */
:lang(en) .kmy-hero--home .kmy-hero__title--lines { --kmy-title-em: 14.4; }
:lang(pt) .kmy-hero--home .kmy-hero__title--lines { --kmy-title-em: 13.4; }
.kmy-hero--home .kmy-lead { max-width: 52ch; color: #D5DEE8; }
.kmy-hero-cards {
display: grid;
gap: var(--kmy-space-4);
margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media (min-width: 900px) { .kmy-hero-cards { grid-template-columns: repeat(3, 1fr); gap: var(--kmy-space-5); } }
.kmy-hero-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 180px;
padding: var(--kmy-space-5) var(--kmy-space-5) var(--kmy-space-4);
border: 1px solid rgb(255 255 255 / 0.12);
border-radius: var(--kmy-radius-lg);
background: linear-gradient(155deg, rgb(15 111 168 / 0.6) 0%, rgb(11 27 43 / 0.9) 70%);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: transform var(--kmy-dur) var(--kmy-ease), border-color var(--kmy-dur) var(--kmy-ease);
}
.kmy-hero-card:hover { transform: translateY(-3px); border-color: var(--kmy-sky); }
.kmy-hero-card:has(.kmy-card__link:focus-visible) { outline: 2px solid var(--kmy-sky); outline-offset: 3px; }
.kmy-hero-card__label {
margin: 0 0 var(--kmy-space-3);
font-family: var(--kmy-font-label);
font-size: var(--kmy-fs-label);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--kmy-sky);
}
.kmy-hero-card__title { margin: 0 0 var(--kmy-space-4); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--kmy-white); }
.kmy-hero-card__title a { color: inherit; text-decoration: none; }
.kmy-hero-card__chevron { margin-top: auto; color: var(--kmy-white); }
/* Franja de confianza: palabras apiladas + logos */
.kmy-trust { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem); }
.kmy-trust__grid { display: grid; gap: var(--kmy-space-6); align-items: center; }
@media (min-width: 900px) { .kmy-trust__grid { grid-template-columns: minmax(220px, 1fr) 3fr; gap: var(--kmy-space-8); } }
.kmy-trust__words p {
margin: 0;
font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--kmy-blue);
}
@media (min-width: 900px) { .kmy-trust__words { text-align: right; } }
.kmy-trust__title { margin-bottom: var(--kmy-space-5); font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; max-width: 60ch; }
.kmy-trust__certs { margin: var(--kmy-space-5) 0 0; padding-top: var(--kmy-space-5); border-top: 1px solid var(--kmy-line); color: var(--kmy-text); }
/* Sobre Kamaya */
.kmy-about { display: grid; gap: var(--kmy-space-7); }
@media (min-width: 900px) { .kmy-about { grid-template-columns: 1fr 1fr; gap: var(--kmy-space-8); align-items: start; } }
.kmy-about__intro p { font-size: 1.125rem; }
.kmy-about__points { display: grid; gap: var(--kmy-space-5); }
@media (min-width: 640px) { .kmy-about__points { grid-template-columns: 1fr 1fr; } }
.kmy-section--tint .kmy-feature { border-top-color: var(--kmy-blue-100); }
.kmy-about__points .kmy-feature h3 { font-size: 1.125rem; }
.kmy-about__points .kmy-feature p { color: var(--kmy-muted); }
/* Capacidades: intro + servicios como píldoras desplegables */
.kmy-capabilities {
background:
radial-gradient(40rem 26rem at 85% 30%, rgb(22 149 219 / 0.25), transparent 65%),
var(--kmy-navy-900);
}
.kmy-capabilities__grid { display: grid; gap: var(--kmy-space-7); align-items: start; }
@media (min-width: 900px) { .kmy-capabilities__grid { grid-template-columns: 5fr 7fr; gap: var(--kmy-space-8); } }
.kmy-capabilities__intro h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.05; }
.kmy-capabilities__intro p { font-size: 1.125rem; color: #C9D3DE; margin-bottom: var(--kmy-space-6); }
.kmy-pills { display: grid; gap: var(--kmy-space-3); align-items: start; }
@media (min-width: 640px) { .kmy-pills { grid-template-columns: 1fr 1fr; } }
.kmy-pill { border-radius: var(--kmy-radius); background: var(--kmy-blue-700); transition: background-color var(--kmy-dur) var(--kmy-ease); }
.kmy-pill[open] { background: var(--kmy-navy-800); box-shadow: inset 0 0 0 1px var(--kmy-blue); }
.kmy-pill__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kmy-space-4);
min-height: 80px; /* misma altura con título de 1 o 2 líneas: la grilla queda alineada */
padding: var(--kmy-space-3) var(--kmy-space-5);
font-weight: 700;
color: var(--kmy-white);
cursor: pointer;
list-style: none;
}
/* Tablet: columnas estrechas; texto y relleno algo menores para no pasar de 2 líneas (y de 80px). */
@media (min-width: 640px) and (max-width: 1199px) {
.kmy-pill__summary { padding: var(--kmy-space-2) var(--kmy-space-4); font-size: 0.9375rem; line-height: 1.3; }
}
.kmy-pill__summary::-webkit-details-marker { display: none; }
.kmy-pill:not([open]):hover { background: var(--kmy-blue-800); }
.kmy-pill__plus { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.kmy-pill__plus::before,
.kmy-pill__plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-pill__plus::after { transform: rotate(90deg); }
.kmy-pill[open] .kmy-pill__plus::after { transform: rotate(0deg); }
.kmy-pill__body { padding: 0 var(--kmy-space-5) var(--kmy-space-5); }
.kmy-pill__body p { font-size: 0.9375rem; color: #C9D3DE; }
.kmy-pill__body .kmy-link-arrow { color: var(--kmy-sky); }
/* Carrusel de Perspectivas */
.kmy-carousel__title { margin-bottom: var(--kmy-space-6); padding-right: 8rem; }
.kmy-carousel { position: relative; }
.kmy-carousel__nav { position: absolute; right: 0; bottom: 100%; display: flex; gap: var(--kmy-space-2); margin-bottom: var(--kmy-space-6); }
.kmy-carousel__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: var(--kmy-radius-pill);
background: var(--kmy-blue-700);
color: var(--kmy-white);
cursor: pointer;
transition: background-color var(--kmy-dur) var(--kmy-ease), opacity var(--kmy-dur) var(--kmy-ease);
}
.kmy-carousel__btn:hover:not(:disabled) { background: var(--kmy-blue-800); }
.kmy-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.kmy-carousel.is-static .kmy-carousel__nav { display: none; }
.kmy-carousel__btn[data-kmy-carousel-prev] .kmy-icon { transform: rotate(180deg); }
.kmy-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 85%;
gap: var(--kmy-space-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: var(--kmy-space-2);
}
.kmy-carousel__track::-webkit-scrollbar { display: none; }
.kmy-carousel__track > * { scroll-snap-align: start; }
@media (min-width: 640px) { .kmy-carousel__track { grid-auto-columns: calc((100% - var(--kmy-space-5)) / 2); } }
@media (min-width: 1200px) { .kmy-carousel__track { grid-auto-columns: calc((100% - 2 * var(--kmy-space-5)) / 3); } }
/* Tarjeta de artículo estilo "insight": bloque azul con etiqueta */
.kmy-card--post .kmy-card__media { position: relative; aspect-ratio: 16 / 7; }
.kmy-card__chip {
position: absolute;
top: var(--kmy-space-3);
left: var(--kmy-space-3);
z-index: 1;
padding: 0.3rem 0.625rem;
border-radius: var(--kmy-radius-sm);
background: var(--kmy-white);
font-family: var(--kmy-font-label);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--kmy-blue-800);
}
.kmy-card--post .kmy-card__media--fallback { background: linear-gradient(135deg, var(--kmy-blue-700) 0%, var(--kmy-blue) 100%); }
.kmy-card--post .kmy-card__media--fallback::after { opacity: 0.18; }
.kmy-card__more--post { margin-top: var(--kmy-space-4); }
/* CTA final dividido: imagen + texto sobre fondo oscuro */
.kmy-cta-split { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); background: var(--kmy-navy-900); color: #C9D3DE; }
.kmy-cta-split__grid { display: grid; gap: var(--kmy-space-7); align-items: center; }
@media (min-width: 900px) { .kmy-cta-split__grid { grid-template-columns: 1fr 1fr; gap: var(--kmy-space-8); } }
.kmy-cta-split__media { margin: 0; }
.kmy-cta-split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--kmy-radius-lg); }
.kmy-cta-split h2 { color: var(--kmy-white); font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; }
.kmy-cta-split p { font-size: 1.0625rem; }
.kmy-cta-split .wp-block-buttons { margin-top: var(--kmy-space-6); }
.kmy-cta-split :focus-visible { outline-color: var(--kmy-sky); }
/* 16. Páginas de servicio estilo corporativo --------------------------------- */
.kmy-hero--page { isolation: isolate; background: var(--kmy-navy-900); }
.kmy-hero--page::before {
/* imagen de fondo (variable definida en la plantilla) con velo navy/azul */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, var(--kmy-navy-900) 0%, rgb(7 18 29 / 0.88) 45%, rgb(7 18 29 / 0.45) 100%),
radial-gradient(40rem 22rem at 15% 30%, rgb(22 149 219 / 0.3), transparent 70%),
var(--kmy-hero-image, none) right center / cover no-repeat;
}
.kmy-hero--page .kmy-hero__title { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); max-width: 20ch; }
.kmy-hero--page .kmy-eyebrow::before { display: none; }
.kmy-hero--page .kmy-eyebrow .kmy-icon { color: var(--kmy-sky); }
.kmy-landing--service .kmy-section:not(.kmy-section--dark) .kmy-section__head h2 { padding-left: var(--kmy-space-4); border-left: 6px solid var(--kmy-blue); }
/* 17. Carrusel continuo de certificaciones ----------------------------------- */
.kmy-certs {
--kmy-certs-gap: var(--kmy-space-4);
display: flex;
gap: var(--kmy-certs-gap);
overflow: hidden; /* sin desvanecido en los bordes: los logos entran nítidos, sin superponerse a los divisores */
}
.kmy-certs__track {
display: flex;
flex: 0 0 auto;
gap: var(--kmy-certs-gap);
/* La pista debe medir exactamente lo que suman sus elementos: Firefox la dejaba más estrecha,
los últimos logos se salían y la copia del bucle se superponía a ellos. */
width: max-content;
min-width: 100%;
margin: 0;
padding: 0;
list-style: none;
animation: kmy-marquee 45s linear infinite; /* ~5.5 s por elemento con 8 certificaciones */
}
.kmy-certs:hover .kmy-certs__track,
.kmy-certs:focus-within .kmy-certs__track { animation-play-state: paused; }
@keyframes kmy-marquee {
to { transform: translateX(calc(-100% - var(--kmy-certs-gap))); }
}
.kmy-cert {
display: flex;
align-items: center;
justify-content: center;
/* Ancho explícito (no solo flex-basis): Firefox usa width al calcular el ancho de la pista. */
flex: 0 0 auto;
width: 200px;
min-height: 150px;
margin: 0;
padding: var(--kmy-space-4);
border-left: 1px solid var(--kmy-blue-100);
}
.kmy-cert img { max-width: 120px; max-height: 120px; width: auto; height: auto; object-fit: contain; }
/* Insignia de texto (se reemplaza sola al subir el archivo oficial) */
.kmy-cert__badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 132px;
height: 132px;
padding: var(--kmy-space-3);
border: 2px solid var(--kmy-blue);
border-radius: 50%;
background: radial-gradient(circle at 50% 30%, var(--kmy-white), var(--kmy-blue-50));
text-align: center;
}
.kmy-cert__issuer {
font-family: var(--kmy-font-label);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kmy-muted);
}
.kmy-cert__acronym { margin-block: 0.125rem; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--kmy-ink); }
.kmy-cert__name { font-size: 0.625rem; line-height: 1.25; color: var(--kmy-blue-800); }
/* Sin animación si el usuario lo prefiere: lista estática que se ajusta en filas */
@media (prefers-reduced-motion: reduce) {
.kmy-certs__track { flex-wrap: wrap; justify-content: center; animation: none; }
.kmy-certs__track[aria-hidden="true"] { display: none; }
}
/* Sección propia de divulgación responsable: carrusel de logos (en gris, color al pasar el cursor) */
.kmy-disclosure { padding-top: 0; }
.kmy-disclosure .kmy-section__head { margin-bottom: var(--kmy-space-6); }
.kmy-certs--logos .kmy-certs__track { animation-duration: 45s; }
.kmy-cert--logo { width: 220px; min-height: 110px; }
.kmy-cert--logo a { display: contents; }
.kmy-cert--logo img {
max-width: 150px;
max-height: 48px;
filter: grayscale(1);
opacity: 0.7;
transition: filter var(--kmy-dur) var(--kmy-ease), opacity var(--kmy-dur) var(--kmy-ease);
}
.kmy-cert--logo:hover img { filter: none; opacity: 1; }
/* Las columnas de grid con carrusel no deben crecer al ancho de la pista animada */
.kmy-trust__body { min-width: 0; }
.kmy-certs { width: 100%; max-width: 100%; }
/* 18. Botón flotante de WhatsApp ------------------------------------------- */
.kmy-whatsapp {
position: fixed;
right: var(--kmy-space-4);
bottom: var(--kmy-space-4);
z-index: 91;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366; /* verde oficial de WhatsApp */
color: var(--kmy-white);
box-shadow: var(--kmy-shadow-lg);
transition: transform var(--kmy-dur) var(--kmy-ease), box-shadow var(--kmy-dur) var(--kmy-ease);
}
.kmy-whatsapp:hover { color: var(--kmy-white); transform: scale(1.06); box-shadow: 0 18px 44px rgb(11 27 43 / 0.28); }
.kmy-whatsapp:focus-visible { outline: 3px solid var(--kmy-blue-700); outline-offset: 3px; }
/* Por debajo de 1440px la píldora "¿Incidente en curso?" se apila encima del botón de WhatsApp. */
@media (max-width: 1439px) {
.kmy-hotline { bottom: calc(var(--kmy-space-4) + 56px + var(--kmy-space-3)); }
}
@media print { .kmy-whatsapp { display: none; } }
/* Las grillas de tarjetas (índices de Servicios / Industrias) usan el ancho completo del contenedor,
no el ancho de lectura de 72ch pensado para texto. */
.kmy-entry > .kmy-grid,
.kmy-entry > .kmy-cards { max-width: none; }
/* 19. Contáctanos (estructura tipo NTT DATA) --------------------------------- */
.kmy-hero--contact { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.kmy-hero--contact .kmy-hero__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); }
.kmy-contact__inner { max-width: calc(760px + 2 * var(--kmy-gutter)); }
.kmy-contact__intro > * { max-width: none; }
.kmy-contact__intro h2 { color: var(--kmy-blue-700); }
.kmy-contact__intro p { font-size: 1.0625rem; }
.kmy-form { margin-top: var(--kmy-space-6); }
.kmy-form__required { margin-bottom: var(--kmy-space-5); font-weight: 700; color: var(--kmy-ink); }
.kmy-form__grid { display: grid; gap: 0 var(--kmy-space-5); }
@media (min-width: 640px) { .kmy-form__grid { grid-template-columns: 1fr 1fr; } }
.kmy-field { margin: 0 0 var(--kmy-space-5); padding: 0; border: 0; }
.kmy-field label, .kmy-field legend { margin-bottom: var(--kmy-space-2); font-weight: 600; color: var(--kmy-ink); }
.kmy-field label > span[aria-hidden], .kmy-field legend + * { color: inherit; }
.kmy-field input:not([type="checkbox"]):not([type="radio"]),
.kmy-field select,
.kmy-field textarea { background: var(--kmy-surface); border-color: #C8D2DC; }
.kmy-field input:focus-visible, .kmy-field select:focus-visible, .kmy-field textarea:focus-visible { background: var(--kmy-white); }
.kmy-field.has-error input, .kmy-field.has-error select, .kmy-field.has-error textarea { border-color: var(--kmy-error); border-width: 2px; }
.kmy-field__error { margin: var(--kmy-space-2) 0 0; font-size: var(--kmy-fs-small); font-weight: 600; color: var(--kmy-error); }
.kmy-field--radios legend { display: block; margin-bottom: var(--kmy-space-3); padding: 0; }
.kmy-radio, .kmy-check {
display: flex;
align-items: flex-start;
gap: var(--kmy-space-3);
margin: 0 0 var(--kmy-space-3);
font-weight: 400 !important;
color: var(--kmy-text) !important;
cursor: pointer;
}
.kmy-radio input, .kmy-check input { flex-shrink: 0; width: 20px; height: 20px; margin: 0.15em 0 0; accent-color: var(--kmy-blue-700); }
.kmy-check span { font-size: 0.9375rem; line-height: 1.55; }
.kmy-check a { font-weight: 600; }
/* Aviso de urgencia: aparece al elegir "Reportar un incidente" (sin JavaScript) */
.kmy-form__urgent {
display: none;
gap: var(--kmy-space-3);
margin-top: var(--kmy-space-3);
padding: var(--kmy-space-4);
border-left: 4px solid var(--kmy-orange);
border-radius: var(--kmy-radius);
background: #FFF4EE;
color: var(--kmy-ink);
}
.kmy-form__urgent .kmy-icon { flex-shrink: 0; margin-top: 0.2em; color: var(--kmy-orange-600); }
.kmy-form__urgent p { margin: 0; }
.kmy-form__urgent a { font-weight: 700; color: var(--kmy-orange-600); }
.kmy-field--radios:has(input[value="incidente"]:checked) .kmy-form__urgent { display: flex; }
/* Nota bajo "Correo corporativo": solo con los motivos que admiten correo personal (empleo, vulnerabilidad, incidente). */
.kmy-field__hint--email { display: none; margin: var(--kmy-space-2) 0 0; font-size: var(--kmy-fs-small); color: var(--kmy-muted); }
.kmy-form:has(input[name="kmy_interest"]:is([value="empleo"], [value="vulnerabilidad"], [value="incidente"]):checked) .kmy-field__hint--email { display: block; }
.kmy-form__alert {
margin-bottom: var(--kmy-space-5);
padding: var(--kmy-space-4);
border-left: 4px solid var(--kmy-error);
border-radius: var(--kmy-radius);
background: #FDECEC;
font-weight: 600;
color: var(--kmy-error);
}
.kmy-form__submit { margin-top: var(--kmy-space-3); min-width: 220px; }
.kmy-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kmy-form__success {
display: flex;
gap: var(--kmy-space-4);
margin-top: var(--kmy-space-6);
padding: var(--kmy-space-6);
border-radius: var(--kmy-radius-lg);
background: var(--kmy-blue-50);
color: var(--kmy-ink);
}
.kmy-form__success .kmy-icon { flex-shrink: 0; color: var(--kmy-success); }
.kmy-form__success h2 { font-size: var(--kmy-fs-h3); margin-bottom: var(--kmy-space-3); }
.kmy-form__success p:last-child { margin-bottom: 0; }
.kmy-form__success:focus { outline: none; }
/* Banda con dos tarjetas grandes con imagen */
.kmy-contact-cards {
padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
background: linear-gradient(180deg, var(--kmy-white) 0, var(--kmy-white) 35%, var(--kmy-navy) 35%);
}
.kmy-contact-cards__grid { display: grid; gap: var(--kmy-space-5); }
@media (min-width: 900px) { .kmy-contact-cards__grid { grid-template-columns: 1fr 1fr; } }
.kmy-contact-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--kmy-space-3);
min-height: 300px;
padding: var(--kmy-space-6);
border-radius: var(--kmy-radius-lg) var(--kmy-radius-lg) 0 0;
overflow: hidden;
background:
linear-gradient(180deg, rgb(7 18 29 / 0.15) 0%, rgb(7 18 29 / 0.92) 70%),
var(--kmy-card-image) center / cover no-repeat,
var(--kmy-navy-700);
color: var(--kmy-white);
text-decoration: none;
transition: transform var(--kmy-dur) var(--kmy-ease);
}
.kmy-contact-card:hover { color: var(--kmy-white); transform: translateY(-3px); }
.kmy-contact-card:focus-visible { outline-color: var(--kmy-sky); }
.kmy-contact-card__label { display: inline-flex; align-items: center; gap: var(--kmy-space-2); font-family: var(--kmy-font-label); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--kmy-sky); }
.kmy-contact-card--whatsapp .kmy-contact-card__label { color: #5BE38F; }
.kmy-contact-card__title { max-width: 16ch; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.kmy-contact-card__arrow { position: absolute; right: var(--kmy-space-6); bottom: var(--kmy-space-6); color: var(--kmy-orange); transition: transform var(--kmy-dur) var(--kmy-ease); }
.kmy-contact-card:hover .kmy-contact-card__arrow { transform: translateX(4px); }
/* Divulgación responsable dentro de la página Servicios (debajo de las tarjetas) */
.kmy-entry > .kmy-disclosure-inline { max-width: none; margin-top: var(--kmy-space-9); padding-top: var(--kmy-space-8); border-top: 1px solid var(--kmy-line); }
.kmy-disclosure-inline h2 { margin-top: 0; margin-bottom: var(--kmy-space-6); max-width: 30ch; }
/* Mega menú: ajustes de especificidad (ganan a las reglas genéricas de .kmy-nav) */
@media (min-width: 1200px) {
.kmy-nav .kmy-mega__item a {
display: flex;
padding: 0.5625rem;
font-size: 0.875rem;
font-weight: 400;
color: var(--kmy-ink);
}
.kmy-nav .kmy-mega__item a:hover { color: var(--kmy-ink); background: var(--kmy-white); }
.kmy-nav .kmy-mega__banner { display: flex; padding: 1.125rem 3.75rem 1.125rem 1.125rem; color: var(--kmy-white); }
.kmy-nav .kmy-mega__banner:hover { color: var(--kmy-white); }
/* El con mega menú es "static" (el panel se alinea al contenedor), así que la flecha
va en línea junto al texto en vez de posicionarse en absoluto. */
.kmy-nav__list > li:has(> .kmy-mega) { display: flex; align-items: center; }
.kmy-nav__list > li:has(> .kmy-mega) > a { padding-right: 0.25rem; }
.kmy-nav__list > li:has(> .kmy-mega) > .kmy-submenu-toggle { position: static; transform: none; width: 22px; margin-right: var(--kmy-space-2); }
.kmy-nav__list > li:has(> .kmy-mega) > a::after { right: 0; }
}
/* Banner de consentimiento de cookies (tarjeta centrada abajo) ------------- */
.kmy-cookies { position: fixed; left: 0; right: 0; bottom: var(--kmy-gutter); margin-inline: auto; z-index: 9999; width: min(720px, calc(100vw - 2 * var(--kmy-gutter))); background: var(--kmy-navy); border: 1px solid var(--kmy-navy-700); border-top: 3px solid var(--kmy-orange); border-radius: var(--kmy-radius-lg); color: var(--kmy-white); box-shadow: 0 16px 44px rgb(7 18 29 / 0.34); }
.kmy-cookies[hidden] { display: none; }
.kmy-cookies__inner { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; text-align: center; }
.kmy-cookies__btn { order: 0; width: auto; white-space: nowrap; cursor: pointer; border: 0; border-radius: var(--kmy-radius-pill); background: var(--kmy-orange); color: var(--kmy-navy); font: 700 0.9375rem/1 var(--kmy-font-label); letter-spacing: .01em; padding: 0.75rem 2rem; min-height: 44px; transition: background var(--kmy-dur) var(--kmy-ease); }
.kmy-cookies__btn:hover { background: var(--kmy-orange-600); }
.kmy-cookies__btn:focus-visible { outline: 2px solid var(--kmy-focus); outline-offset: 3px; }
.kmy-cookies__text { margin: 0; font-size: 0.8125rem; line-height: 1.5; text-align: center; color: var(--kmy-muted-dark); }
.kmy-cookies__link { color: var(--kmy-sky); text-decoration: underline; text-underline-offset: 2px; }
.kmy-cookies__link:hover { color: var(--kmy-white); }
@media (prefers-reduced-motion: no-preference) {
.kmy-cookies:not([hidden]) { animation: kmy-cookies-in 240ms var(--kmy-ease); }
@keyframes kmy-cookies-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
/* Servicio: "Automatización" + "Validación humana" (hero del servicio y píldoras del Inicio; ambos sobre oscuro) */
.kmy-proof { display: grid; gap: var(--kmy-space-3); margin: var(--kmy-space-5) 0; max-width: 62ch; }
.kmy-proof__row { padding-left: var(--kmy-space-4); border-left: 3px solid var(--kmy-blue); }
.kmy-proof__row--human { border-left-color: var(--kmy-orange); }
.kmy-proof dt { margin: 0 0 var(--kmy-space-1); font: 600 var(--kmy-fs-label)/1.3 var(--kmy-font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--kmy-sky); }
.kmy-proof__row--human dt { color: var(--kmy-orange-300); }
.kmy-proof dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--kmy-muted-dark); }
.kmy-pill__body .kmy-proof { margin: var(--kmy-space-4) 0; }
/* Portada: eyebrow "Plataforma Kynapt" un 75 % más grande (pedido 2026-09-28); la línea de acento, en proporción. */
.home .kmy-platform .kmy-section__head > .kmy-eyebrow { font-size: calc(var(--kmy-fs-label) * 1.75); gap: var(--kmy-space-3); }
.home .kmy-platform .kmy-section__head > .kmy-eyebrow::before { width: calc(1.5rem * 1.75); height: 3px; }
@media (max-width: 639px) { /* En teléfonos, en una sola línea: menos tracking y, en pantallas muy estrechas, algo menor. */
.home .kmy-platform .kmy-section__head > .kmy-eyebrow { white-space: nowrap; letter-spacing: 0.1em; font-size: min(calc(var(--kmy-fs-label) * 1.75), 5.4vw); }
.home .kmy-platform .kmy-section__head > .kmy-eyebrow::before { width: 1.75rem; }
}
/* Plataforma Kynapt: pestañas (.kmy-tabs; JS en main.js). Sin JS los 3 módulos se ven apilados. */
.kmy-tabs { margin-top: var(--kmy-space-7); }
.kmy-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kmy-space-2); margin-bottom: var(--kmy-space-6); border-bottom: 1px solid var(--kmy-line); }
.kmy-tabs__tab {
display: flex;
flex-direction: column;
gap: var(--kmy-space-1);
margin-bottom: -1px;
padding: var(--kmy-space-3) var(--kmy-space-2) var(--kmy-space-4);
border: 0;
border-bottom: 3px solid transparent;
background: none;
font: 700 0.9375rem/1.3 var(--kmy-font-sans);
color: var(--kmy-muted);
text-align: left;
cursor: pointer;
transition: color var(--kmy-dur) var(--kmy-ease), border-color var(--kmy-dur) var(--kmy-ease);
}
.kmy-tabs__tab-num { font: 600 var(--kmy-fs-label)/1 var(--kmy-font-label); letter-spacing: .16em; color: var(--kmy-blue-700); }
.kmy-tabs__tab:hover { color: var(--kmy-ink); }
.kmy-tabs__tab[aria-selected="true"] { color: var(--kmy-ink); border-bottom-color: var(--kmy-blue); }
.kmy-tabs__tab:focus-visible { outline: 2px solid var(--kmy-focus); outline-offset: 3px; }
@media (min-width: 900px) {
.kmy-tabs__tab { flex-direction: row; align-items: baseline; gap: var(--kmy-space-3); padding-inline: var(--kmy-space-3); font-size: 1.0625rem; }
}
.kmy-tabs__panel { display: grid; gap: var(--kmy-space-6); align-items: center; }
.kmy-tabs__panel[hidden] { display: none; }
.kmy-tabs:not(.kmy-tabs--ready) .kmy-tabs__panel + .kmy-tabs__panel { margin-top: var(--kmy-space-8); }
.kmy-tabs__panel:focus-visible { outline: 2px solid var(--kmy-focus); outline-offset: 6px; border-radius: var(--kmy-radius); }
@media (min-width: 900px) { .kmy-tabs__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--kmy-space-8); } }
.kmy-tabs__num { margin: 0 0 var(--kmy-space-2); font: 600 var(--kmy-fs-label)/1 var(--kmy-font-label); letter-spacing: .16em; color: var(--kmy-blue-700); }
.kmy-tabs--ready .kmy-tabs__num { display: none; } /* El número ya está en la pestaña. */
.kmy-tabs__text h3 { margin: 0 0 var(--kmy-space-3); font-size: var(--kmy-fs-h3); }
.kmy-tabs__text > p:not(.kmy-tabs__num) { color: var(--kmy-muted); }
.kmy-tabs__media { margin: 0; }
.kmy-tabs__media img { display: block; width: 100%; height: auto; border: 1px solid var(--kmy-line); border-radius: var(--kmy-radius-lg); box-shadow: var(--kmy-shadow-lg); }
.kmy-tabs__media figcaption { margin-top: var(--kmy-space-3); font-size: var(--kmy-fs-small); color: var(--kmy-muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
.kmy-tabs--ready .kmy-tabs__panel:not([hidden]) { animation: kmy-tab-in 220ms var(--kmy-ease); }
@keyframes kmy-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Equipo ([kamaya_team], inc/team.php) — mismas tarjetas en el Inicio y en Nosotros (pedido 2026-09-28).
Formato inspirado en strike.sh/about-us: foto (~38 %) + texto; 2 columnas en escritorio. Sin JS.
--kmy-team-k: escala de TODA la tarjeta (ancho, relleno, textos); 0.9 = un 10 % más pequeñas (pedido 2026-09-29).
Ancho y textos se reducen juntos, así el texto corta en los mismos puntos y la altura baja en la misma proporción. */
.kmy-team-cards {
--kmy-team-k: 0.9;
--kmy-team-gap: calc(var(--kmy-space-5) * var(--kmy-team-k));
display: grid;
grid-template-columns: 1fr; /* móvil y tablet: una columna */
gap: var(--kmy-team-gap);
width: calc(100% * var(--kmy-team-k));
margin: var(--kmy-space-7) auto 0;
padding: 0;
list-style: none;
}
@media (min-width: 1200px) {
.kmy-team-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* escritorio: 2 columnas */
/* Número impar de personas (5 → 2+2+1): la última tarjeta, centrada y del mismo ancho que las demás. */
.kmy-team-cards > .kmy-team-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - var(--kmy-team-gap)) / 2);
}
}
/* Tarjeta: foto (≈38 %) + texto (≈62 %) desde tablet; apiladas en móvil. */
.kmy-team-card {
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
background: var(--kmy-navy-800);
border: 1px solid var(--kmy-navy-700);
border-radius: var(--kmy-radius); /* 8px */
color: var(--kmy-white);
transition: transform var(--kmy-dur) var(--kmy-ease), box-shadow var(--kmy-dur) var(--kmy-ease), border-color var(--kmy-dur) var(--kmy-ease);
}
@media (min-width: 640px) {
.kmy-team-card { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
}
.kmy-team-card__media { margin: 0; overflow: hidden; aspect-ratio: 1; background: var(--kmy-navy-700); }
@media (min-width: 640px) {
.kmy-team-card__media { aspect-ratio: auto; min-height: 100%; }
}
/* Sin foto: iniciales sobre degradado de marca. */
.kmy-team-card__media--initials { display: grid; place-items: center; background: linear-gradient(145deg, var(--kmy-navy-700), var(--kmy-blue-900)); }
.kmy-team-card__initials { font: 600 calc(3.25rem * var(--kmy-team-k))/1 var(--kmy-font-label); letter-spacing: .08em; color: var(--kmy-white); }
.kmy-team-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: grayscale(1);
transition: filter 300ms var(--kmy-ease), transform 400ms var(--kmy-ease);
}
.kmy-team-card__body { display: flex; flex-direction: column; padding: calc(var(--kmy-space-6) * var(--kmy-team-k)); }
.kmy-team-card__name { margin: 0; font-size: calc(var(--kmy-fs-h3) * var(--kmy-team-k)); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--kmy-white); }
.kmy-team-card__role {
margin: calc(var(--kmy-space-2) * var(--kmy-team-k)) 0 0;
font: 600 calc(var(--kmy-fs-label) * var(--kmy-team-k))/1.4 var(--kmy-font-label);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kmy-orange-300); /* naranja como texto sobre navy (CLAUDE.md) */
}
.kmy-team-card__bio { margin: calc(var(--kmy-space-4) * var(--kmy-team-k)) 0 calc(var(--kmy-space-5) * var(--kmy-team-k)); font-size: calc(0.9375rem * var(--kmy-team-k)); line-height: 1.65; color: var(--kmy-muted-dark); }
.kmy-team-card__linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(40px * var(--kmy-team-k));
height: calc(40px * var(--kmy-team-k));
margin-top: auto; /* siempre al pie de la tarjeta */
border: 1px solid var(--kmy-navy-700);
border-radius: var(--kmy-radius);
color: var(--kmy-sky);
transition: background-color var(--kmy-dur) var(--kmy-ease), color var(--kmy-dur) var(--kmy-ease);
}
.kmy-team-card__linkedin svg { width: calc(20px * var(--kmy-team-k)); height: calc(20px * var(--kmy-team-k)); }
.kmy-team-card__linkedin:hover { background: var(--kmy-blue-700); border-color: var(--kmy-blue-700); color: var(--kmy-white); }
.kmy-team-card__linkedin:focus-visible { outline: 2px solid var(--kmy-focus); outline-offset: 3px; }
/* Interacción: la tarjeta se eleva y la foto pasa a color con un zoom sutil (también con teclado). */
.kmy-team-card:hover,
.kmy-team-card:focus-within { transform: translateY(-4px); box-shadow: var(--kmy-shadow-lg); border-color: var(--kmy-blue); }
.kmy-team-card:hover .kmy-team-card__media img,
.kmy-team-card:focus-within .kmy-team-card__media img { filter: grayscale(0); transform: scale(1.05); }
/* En pantallas táctiles no hay hover: fotos a color desde el inicio. */
@media (hover: none) {
.kmy-team-card__media img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.kmy-team-card,
.kmy-team-card__media img { transition: none; }
.kmy-team-card:hover,
.kmy-team-card:focus-within { transform: none; }
.kmy-team-card:hover .kmy-team-card__media img,
.kmy-team-card:focus-within .kmy-team-card__media img { transform: none; }
}