/* ==========================================================================
   KIVRA · Agencia de diseño y marketing
   Hoja de estilos del sitio — derivada del Manual de Marca v1.0 · 2026
   --------------------------------------------------------------------------
   REGLAS DEL SISTEMA (no romper):
   1. Todo va prefijado .kv-  →  nunca choca con Elementor ni con el tema.
   2. Una sola curva de easing en TODO el sitio: var(--kv-ease).
   3. Toda rotación es múltiplo de 72° (un brazo del aspa).
   4. La grilla es de 5 columnas. El margen exterior = un brazo.
   5. Michroma solo en MAYÚSCULAS y nunca en párrafos.
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */

:root {
  /* --- Paleta oficial (Manual, pág. 09) --- */
  --kv-humo:      #F2F2F2;   /* soporte    · 40% */
  --kv-senal:     #FFFF99;   /* acento     · 10% */
  --kv-arcilla:   #D89F75;   /* secundario · 15% */
  --kv-vino:      #620F34;   /* secundario · 15% */
  --kv-ciruela:   #2B002B;   /* base       · 20% */
  --kv-confianza: #8C1B4A;   /* tinta del 5º pilar */
  --kv-carbon:    #0C0A00;   /* tinta más profunda (cierre) */

  /* --- Tintas por pilar (Manual, pág. 03 · una tinta por pilar) --- */
  --kv-p1: #FFFF99;   /* K · Estrategia   */
  --kv-p2: #D89F75;   /* I · Arquitectura */
  --kv-p3: #620F34;   /* V · Tecnología   */
  --kv-p4: #2B002B;   /* R · Innovación   */
  --kv-p5: #8C1B4A;   /* A · Confianza    */

  /* --- Tipografía --- */
  --kv-display: 'Michroma', 'Arial Black', sans-serif;
  --kv-texto:   'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kv-dato:    'Space Mono', ui-monospace, 'Courier New', monospace;

  /* --- Movimiento: UNA curva para todo el sitio --- */
  --kv-ease:    cubic-bezier(.8, 0, .2, 1);
  --kv-t-rapido: .32s;
  --kv-t:        .62s;
  --kv-t-lento: 1.1s;

  /* --- Métrica: el margen es un brazo del aspa --- */
  --kv-brazo: clamp(20px, 4.6vw, 72px);
  --kv-ancho: 1440px;
  --kv-gap:   clamp(12px, 1.6vw, 24px);

  /* --- Ritmo vertical --- */
  --kv-sec-y: clamp(88px, 11vw, 168px);

  /* --- Hairlines --- */
  --kv-linea-clara:  rgba(242, 242, 242, .16);
  --kv-linea-oscura: rgba(43, 0, 43, .18);
}

/* ==========================================================================
   02 · RESET Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.kv-body {
  margin: 0;
  background: var(--kv-ciruela);
  color: var(--kv-humo);
  font-family: var(--kv-texto);
  font-weight: 300;
  font-size: 17.5px;
  line-height: 1.65;
  /* `clip` recorta igual que `hidden` pero NO crea un contenedor de scroll,
     así que el position:sticky de los pilares sigue funcionando. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.kv-cargando { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea, option { font: inherit; color: inherit; }
/* El manual solo admite Saira 300 y 600. Los navegadores ponen 700 por su
   cuenta en h1–h6, b y strong: aquí se les devuelve el peso del sistema. */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
b, strong { font-weight: 600; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--kv-senal); color: var(--kv-ciruela); }

/* Foco visible en todo lo interactivo — nunca se elimina */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kv-senal);
  outline-offset: 3px;
}

.kv-salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--kv-senal);
  color: var(--kv-ciruela);
  padding: 14px 22px;
  font-family: var(--kv-dato);
  font-size: 12px;
  letter-spacing: .16em;
}
.kv-salto-contenido:focus { left: 12px; top: 12px; }

/* Solo para lectores de pantalla */
.kv-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03 · TIPOGRAFÍA
   ========================================================================== */

.kv-display {
  font-family: var(--kv-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.06;
  margin: 0;
}

.kv-h1 { font-size: clamp(30px, 5.6vw, 78px);  letter-spacing: .02em; line-height: 1.02; }
.kv-h2 { font-size: clamp(23px, 3.5vw, 50px);  letter-spacing: .04em; line-height: 1.08; }
.kv-h3 { font-size: clamp(17px, 1.9vw, 27px);  letter-spacing: .08em; }
.kv-h4 { font-size: clamp(13px, 1.2vw, 16px);  letter-spacing: .12em; }

.kv-dato {
  font-family: var(--kv-dato);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
}

.kv-parrafo {
  font-size: clamp(16.5px, 1.28vw, 20px);
  font-weight: 300;
  line-height: 1.72;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.kv-parrafo--grande { font-size: clamp(18.5px, 1.75vw, 25px); line-height: 1.6; max-width: 50ch; }
.kv-parrafo strong  { font-weight: 600; }

.kv-tinta-senal   { color: var(--kv-senal); }
.kv-tinta-arcilla { color: var(--kv-arcilla); }
.kv-tinta-suave   { color: rgba(242, 242, 242, .62); }

/* ==========================================================================
   04 · LAYOUT · LA REGLA DEL 5
   ========================================================================== */

.kv-sec {
  position: relative;
  padding: var(--kv-sec-y) var(--kv-brazo);
  overflow: hidden;
  overflow: clip;   /* ver nota en .kv-body: no rompe el sticky */
}
.kv-sec--sin-y     { padding-top: 0; padding-bottom: 0; }
.kv-sec--sin-x     { padding-left: 0; padding-right: 0; }
.kv-sec--compacta  { padding-top: clamp(56px, 6vw, 92px); padding-bottom: clamp(56px, 6vw, 92px); }

.kv-limite { max-width: var(--kv-ancho); margin-inline: auto; width: 100%; }

/* La nav es fija: los anclajes tienen que frenar antes */
section[id], .kv-hero { scroll-margin-top: clamp(72px, 9vh, 100px); }

/* --------------------------------------------------------------------------
   PASO — la transición entre dos secciones de distinto color.

   Tres cosas la hacen invisible, y las tres importan:

   1. CURVA EN S, no rampa recta. Un degradado lineal tiene dos quiebres —donde
      empieza y donde termina— y el ojo los caza como los bordes de una banda.
      Los tramos de abajo aproximan una smoothstep: arranca y termina tan
      despacio que no hay borde que ver.

   2. MEZCLA EN OKLAB, no en sRGB. Interpolar dos colores en sRGB pasa por
      medios apagados y sucios; en oklab el camino es perceptualmente parejo.

   3. ALTURA GENEROSA. Corto se lee como banda; largo se lee como atmósfera.

   Aun así hay un límite físico: entre dos colores muy lejanos (vino y blanco
   perla) el punto medio SIEMPRE es un rosa pálido, y eso se ve como manchón
   por muy suave que sea la curva. Por eso además se acercaron los colores de
   las secciones: el paso resuelve saltos cortos, no abismos.
   -------------------------------------------------------------------------- */
.kv-paso {
  height: var(--alto, clamp(120px, 14vw, 260px));
  pointer-events: none;
  /* Once tramos, no siete: entre tramo y tramo el navegador interpola recto,
     y con pocos tramos esos quiebres de pendiente se ven como bandas de Mach
     —el ojo inventa una línea donde la pendiente cambia de golpe—. */
  background: linear-gradient(to bottom,
    var(--de) 0%,
    color-mix(in oklab, var(--a)  2.8%, var(--de)) 10%,
    color-mix(in oklab, var(--a) 10.4%, var(--de)) 20%,
    color-mix(in oklab, var(--a) 21.6%, var(--de)) 30%,
    color-mix(in oklab, var(--a) 35.2%, var(--de)) 40%,
    color-mix(in oklab, var(--a)   50%, var(--de)) 50%,
    color-mix(in oklab, var(--a) 64.8%, var(--de)) 60%,
    color-mix(in oklab, var(--a) 78.4%, var(--de)) 70%,
    color-mix(in oklab, var(--a) 89.6%, var(--de)) 80%,
    color-mix(in oklab, var(--a) 97.2%, var(--de)) 90%,
    var(--a) 100%);
}
/* Navegadores sin color-mix: rampa simple, mejor eso que nada */
@supports not (background: linear-gradient(to bottom, color-mix(in oklab, red 50%, blue), red)) {
  .kv-paso { background: linear-gradient(to bottom, var(--de), var(--a)); }
}

/* Fondos por sección — el ritmo cromático del manual */
.kv-fondo-ciruela { background: var(--kv-ciruela); color: var(--kv-humo); }
.kv-fondo-humo    { background: var(--kv-humo);    color: var(--kv-ciruela); }
.kv-fondo-vino    { background: var(--kv-vino);    color: var(--kv-humo); }
.kv-fondo-arcilla { background: var(--kv-arcilla); color: var(--kv-ciruela); }
.kv-fondo-senal   { background: var(--kv-senal);   color: var(--kv-ciruela); }
.kv-fondo-carbon  { background: var(--kv-carbon);  color: var(--kv-humo); }

.kv-fondo-humo .kv-tinta-suave,
.kv-fondo-arcilla .kv-tinta-suave { color: rgba(43, 0, 43, .66); }
.kv-fondo-humo .kv-tinta-senal,
.kv-fondo-arcilla .kv-tinta-senal { color: var(--kv-vino); }

/* La grilla de 5 */
.kv-grid5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--kv-gap);
}

/* Rejilla visible de 5 columnas (solo decorativa, en el hero) */
.kv-rejilla {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
  z-index: 0;
}
.kv-rejilla span { border-left: 1px solid rgba(242, 242, 242, .07); }
.kv-rejilla span:first-child { border-left: 0; }

/* Encabezado de sección: número + título + línea que corre */
.kv-encabezado {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 22px);
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.kv-encabezado__num {
  font-family: var(--kv-dato);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--kv-arcilla);
  flex: none;
}
.kv-encabezado__linea {
  flex: 1;
  height: 1px;
  background: var(--kv-linea-clara);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
.kv-visible .kv-encabezado__linea { transform: scaleX(1); }
.kv-fondo-humo .kv-encabezado__linea,
.kv-fondo-arcilla .kv-encabezado__linea { background: var(--kv-linea-oscura); }
.kv-fondo-humo .kv-encabezado__num,
.kv-fondo-arcilla .kv-encabezado__num { color: var(--kv-vino); }

/* ==========================================================================
   05 · EL ASPA — el símbolo, en todas sus escalas
   ========================================================================== */

.kv-aspa { display: block; }
.kv-aspa path { fill: currentColor; }

/* Giro continuo, siempre en pasos de 72° */
@keyframes kv-girar-72 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes kv-girar-72-inv {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.kv-aspa--gira { animation: kv-girar-72 24s linear infinite; }


/* ==========================================================================
   05b · ATMÓSFERA — aspas de fondo y auras de color
   Cada sección oscura lleva su propia tinta de fondo. Es lo que hace que el
   recorrido no se sienta plano sin cambiar el color base del sitio.
   ========================================================================== */

.kv-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kv-sec > .kv-limite { position: relative; z-index: 1; }

/* Aspa gigante recortada por el borde */
.kv-fondo__aspa {
  position: absolute;
  width: min(78vh, 66vw);
  height: auto;
  aspect-ratio: 1;
  opacity: .5;
  will-change: transform;
}
.kv-fondo__aspa--der  { right: -18%; top: -14%; }
.kv-fondo__aspa--izq  { left: -20%;  bottom: -18%; }
.kv-fondo__aspa--lento { animation: kv-girar-72 70s linear infinite; }
.kv-fondo__aspa--inv   { animation: kv-girar-72-inv 54s linear infinite; }

/* Aura: un degradado radial que tiñe la sección sin cambiarle el fondo.
   Va SIEMPRE dentro del alto de su sección. Si el desenfoque llega al borde,
   la sección lo recorta en seco y se ve una banda de luz cortada —eso era lo
   que hacía que los cambios de sección parecieran fugas de luz—.
   Horizontalmente sí puede salirse: ahí recorta la pantalla, que es natural. */
.kv-fondo__aura {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-height: 62%;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .34;
}
.kv-fondo__aura--vino      { background: var(--kv-vino);      left: -10%;  top: 16%; }
.kv-fondo__aura--arcilla   { background: var(--kv-arcilla);   right: -12%; bottom: 18%; opacity: .16; }
.kv-fondo__aura--senal     { background: var(--kv-senal);     right: -14%; top: 20%;  opacity: .1; }
.kv-fondo__aura--confianza { background: var(--kv-confianza); left: -14%;  bottom: 20%; opacity: .26; }


/* ==========================================================================
   05c · BARRA DE AVANCE DE LECTURA
   ========================================================================== */

.kv-avance {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.kv-avance i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--kv-arcilla), var(--kv-senal));
  transform-origin: left;
}

/* ==========================================================================
   06 · BOTONES
   ========================================================================== */

.kv-btn {
  --btn-fondo:  var(--kv-senal);
  --btn-tinta:  var(--kv-ciruela);
  --btn-borde:  var(--kv-senal);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1px solid var(--btn-borde);
  background: transparent;
  color: var(--btn-fondo);
  font-family: var(--kv-dato);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
  /* `translate` es independiente de `transform`, así que el imán del cursor
     no pelea con el relleno que sube en ::before */
  transition: color var(--kv-t-rapido) var(--kv-ease),
              translate .4s var(--kv-ease);
}
/* El relleno sube desde abajo — un solo gesto, en toda la web */
.kv-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fondo);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-btn:hover, .kv-btn:focus-visible { color: var(--btn-tinta); }
.kv-btn:hover::before, .kv-btn:focus-visible::before { transform: scaleY(1); }

.kv-btn--solido { color: var(--btn-tinta); }
.kv-btn--solido::before { transform: scaleY(1); }
.kv-btn--solido:hover { color: var(--btn-fondo); }
.kv-btn--solido:hover::before { transform: scaleY(0); transform-origin: top; }

.kv-btn--claro { --btn-fondo: var(--kv-humo); --btn-tinta: var(--kv-ciruela); --btn-borde: rgba(242,242,242,.4); }
.kv-btn--tinta { --btn-fondo: var(--kv-ciruela); --btn-tinta: var(--kv-senal); --btn-borde: rgba(43,0,43,.35); }

/* Los del hero pesan más: son la única acción de la primera pantalla */
.kv-btn--grande {
  padding: clamp(17px, 1.6vw, 23px) clamp(26px, 2.6vw, 40px);
  font-size: clamp(12.5px, 1.15vw, 15px);
  letter-spacing: .16em;
  gap: 14px;
}
.kv-btn--grande .kv-btn__aspa { width: 14px; height: 14px; }

.kv-btn__aspa {
  width: 11px; height: 11px;
  flex: none;
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-btn:hover .kv-btn__aspa { transform: rotate(72deg); }

/* ==========================================================================
   07 · PRELOADER — 5 pasos de 72°, salida en 5 columnas
   ========================================================================== */

.kv-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.kv-loader__cortinas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.kv-loader__cortinas span {
  background: var(--kv-ciruela);
  transform: translateY(0);
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
.kv-loader__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  transition: opacity var(--kv-t-rapido) var(--kv-ease);
}
.kv-loader__aspa {
  width: 64px; height: 64px;
  color: var(--kv-senal);
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-loader__cuenta {
  font-family: var(--kv-dato);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--kv-arcilla);
}
.kv-loader__barra { display: flex; gap: 4px; }
.kv-loader__barra i {
  width: 22px; height: 2px;
  background: rgba(242, 242, 242, .2);
  transition: background var(--kv-t-rapido) var(--kv-ease);
}
.kv-loader__barra i.kv-on { background: var(--kv-senal); }

/* Salida: las 5 columnas suben escalonadas y aparece la grilla del sitio */
.kv-loader.kv-fuera { pointer-events: none; }
.kv-loader.kv-fuera .kv-loader__centro { opacity: 0; }
.kv-loader.kv-fuera .kv-loader__cortinas span { transform: translateY(-101%); }
.kv-loader.kv-fuera .kv-loader__cortinas span:nth-child(2) { transition-delay: .07s; }
.kv-loader.kv-fuera .kv-loader__cortinas span:nth-child(3) { transition-delay: .14s; }
.kv-loader.kv-fuera .kv-loader__cortinas span:nth-child(4) { transition-delay: .21s; }
.kv-loader.kv-fuera .kv-loader__cortinas span:nth-child(5) { transition-delay: .28s; }
.kv-loader.kv-listo { display: none; }

/* ==========================================================================
   08 · NAVEGACIÓN
   ========================================================================== */

.kv-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--kv-brazo);
  border-bottom: 1px solid transparent;
  transition: background var(--kv-t) var(--kv-ease),
              border-color var(--kv-t) var(--kv-ease),
              padding var(--kv-t) var(--kv-ease);
}
.kv-nav.kv-nav--fija {
  background: rgba(43, 0, 43, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--kv-linea-clara);
  padding-top: 12px;
  padding-bottom: 12px;
}

.kv-nav__marca { display: flex; align-items: center; gap: 12px; flex: none; }
.kv-nav__aspa { width: clamp(26px, 2.4vw, 34px); height: auto; aspect-ratio: 1; color: var(--kv-senal); transition: transform var(--kv-t) var(--kv-ease); }
.kv-nav__marca:hover .kv-nav__aspa { transform: rotate(144deg); }
.kv-nav__logo { width: clamp(96px, 9.5vw, 142px); height: auto; color: var(--kv-humo); }

.kv-nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); list-style: none; margin: 0; padding: 0; }
.kv-nav__link {
  position: relative;
  font-family: var(--kv-dato);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .72);
  padding: 6px 0;
  transition: color var(--kv-t-rapido) var(--kv-ease);
}
.kv-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--kv-senal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-nav__link:hover, .kv-nav__link[aria-current="true"] { color: var(--kv-humo); }
.kv-nav__link:hover::after,
.kv-nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.kv-nav__cta { flex: none; }

/* Botón hamburguesa */
.kv-nav__menu {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--kv-linea-clara);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
  border-radius: 0;
}
.kv-nav__menu i {
  display: block;
  width: 18px; height: 1px;
  background: var(--kv-humo);
  margin: 3px auto;
  transition: transform var(--kv-t) var(--kv-ease), opacity var(--kv-t-rapido) var(--kv-ease);
}
/* Las barras están a 7px de distancia entre centros: ahí se cruzan */
.kv-nav__menu[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kv-nav__menu[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.kv-nav__menu[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel móvil */
.kv-panel {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--kv-ciruela);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 96px var(--kv-brazo) var(--kv-brazo);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--kv-t) var(--kv-ease);
  overflow-y: auto;
}
.kv-panel.kv-abierto { clip-path: inset(0 0 0 0); }
.kv-panel__link {
  font-family: var(--kv-display);
  font-size: clamp(21px, 6vw, 34px);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 0;
  border-bottom: 1px solid var(--kv-linea-clara);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--kv-t) var(--kv-ease), transform var(--kv-t) var(--kv-ease);
}
.kv-panel.kv-abierto .kv-panel__link { opacity: 1; transform: none; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(1) { transition-delay: .08s; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(2) { transition-delay: .14s; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(3) { transition-delay: .20s; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(4) { transition-delay: .26s; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(5) { transition-delay: .32s; }
.kv-panel.kv-abierto .kv-panel__link:nth-child(6) { transition-delay: .38s; }
.kv-panel__pie { margin-top: auto; padding-top: 28px; color: var(--kv-arcilla); }

/* ==========================================================================
   09 · DIAL DE ASPA — indicador de avance (escritorio)
   ========================================================================== */

/* Va sobre cualquier fondo, así que lleva su propia placa. */
.kv-dial {
  position: fixed;
  left: var(--kv-brazo);
  bottom: var(--kv-brazo);
  z-index: 80;
  display: none;
  align-items: center;
  gap: 0;
  padding: 13px;
  background: rgba(12, 10, 0, .74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 242, 242, .2);
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--kv-t) var(--kv-ease),
              transform var(--kv-t) var(--kv-ease),
              visibility var(--kv-t) var(--kv-ease),
              border-color var(--kv-t-rapido) var(--kv-ease);
}
.kv-dial.kv-dial--on { opacity: 1; visibility: visible; transform: none; }
.kv-dial:hover { border-color: var(--kv-senal); }
.kv-dial__aspa {
  width: 34px; height: 34px;
  flex: none;
  color: var(--kv-senal);
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
/* Gira 72° al acercarse: la misma regla que en todo el sitio */
.kv-dial:hover .kv-dial__aspa,
.kv-dial:focus-visible .kv-dial__aspa { transform: rotate(-72deg); }
/* En reposo es solo el aspa: no tapa el contenido.
   El rótulo aparece al acercarse. */
.kv-dial__texto {
  font-family: var(--kv-dato);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--kv-humo);
  white-space: nowrap;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--kv-t) var(--kv-ease),
              margin-left var(--kv-t) var(--kv-ease),
              opacity var(--kv-t-rapido) var(--kv-ease);
}
.kv-dial:hover .kv-dial__texto,
.kv-dial:focus-visible .kv-dial__texto { max-width: 220px; margin-left: 11px; opacity: 1; }

/* ==========================================================================
   10 · HERO
   ========================================================================== */

.kv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(30px, 4vw, 56px);
  padding: clamp(104px, 12vh, 148px) var(--kv-brazo) var(--kv-brazo);
  background: var(--kv-ciruela);
  overflow: hidden;
}

/* Video de fondo. Va debajo de todo y con un velo encima: el titular tiene
   que leerse igual venga el video que venga. */
.kv-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El video se ve de verdad: es material propio, no una textura de relleno. */
  opacity: .58;
  filter: saturate(.82) contrast(1.04);
  pointer-events: none;
}
.kv-hero__video[hidden] { display: none; }

/* El velo sigue al texto: ahora que el bloque va centrado, la protección se
   concentra bajo el centro y en el pie, y los costados quedan limpios. */
.kv-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(88% 68% at 50% 60%, rgba(43, 0, 43, .74) 0%, rgba(43, 0, 43, .36) 56%, transparent 100%),
    linear-gradient(to top, var(--kv-ciruela) 0%, rgba(43, 0, 43, .44) 24%, transparent 58%);
}
/* Sin video no hace falta oscurecer nada */
.kv-hero:not(.kv-hero--video) .kv-hero__velo { display: none; }

/* Recorte gigante: el aspa sale del encuadre (patrón del sistema gráfico) */
.kv-hero__aspa {
  position: absolute;
  right: -22vw;
  top: -12vh;
  width: min(112vh, 96vw);
  height: min(112vh, 96vw);
  color: var(--kv-vino);
  opacity: .58;
  z-index: 0;
  will-change: transform;
}

/* Trama 45° (patrón del sistema gráfico) */
.kv-trama {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(242, 242, 242, .045) 0 1px,
    transparent 1px 9px
  );
}
/* Con video no va: las rayas se leen como suciedad sobre la imagen. Sin video
   sí queda, porque ahí el hero necesita esa textura para no verse plano. */
.kv-hero--video .kv-trama { display: none; }

.kv-hero__fila {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* Sin la fila de metadatos arriba, el wordmark se centra y el aviso de
   scroll queda pegado abajo. */
.kv-hero__fila--fin { justify-content: flex-end; margin-top: auto; }

.kv-hero__centro { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px); }

/* Reparto: el texto ocupa la izquierda y el wordmark acompaña a la derecha,
   a la misma altura. El margin-top:auto es lo que lo baja — reparte el hueco
   libre con el aviso de scroll, que ya trae el suyo, y así el bloque cae
   hacia el centro-bajo del hero en vez de pegarse al menú. */
.kv-hero__centro--reparto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 5vw, 84px);
  width: 100%;
  margin-inline: 0;
  text-align: left;
  margin-top: auto;
  padding-top: clamp(30px, 13vh, 168px);
}

.kv-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 36px);
  min-width: 0;
}
.kv-hero__texto .kv-parrafo { margin-inline: 0; max-width: 46ch; }
.kv-hero__texto .kv-hero__acciones { justify-content: flex-start; }

/* Byline: firma de qué es KIVRA. Lleva un filete señal encima en vez de a los
   costados — así puede crecer y partirse en dos líneas sin desarmarse. */
.kv-hero__byline {
  position: relative;
  margin: 0;
  padding-top: clamp(14px, 1.6vw, 22px);
  color: var(--kv-arcilla);
  font-size: clamp(12.5px, 1.4vw, 19px);
  letter-spacing: .16em;
  line-height: 1.65;
  /* En em, no en ch: el ch no cuenta el letter-spacing y el byline se partía
     en tres líneas. 30em deja el corte limpio después de «estratégico». */
  max-width: min(100%, 30em);
  text-wrap: balance;
}
.kv-hero__byline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(32px, 5vw, 68px);
  height: 2px;
  background: var(--kv-senal);
}

/* El wordmark del hero: bastante más chico que antes, para que se lea como
   parte de la composición y no compita con el logotipo del header. */
.kv-hero__centro--reparto .kv-hero__logo {
  width: clamp(190px, 30vw, 420px);
  justify-self: end;
}

/* Teléfono: se apilan. El wordmark se va arriba con order:-1, que en vertical
   es donde tiene sentido que aparezca la marca. */
@media (max-width: 860px) {
  .kv-hero__centro--reparto {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(18px, 4vw, 32px);
    padding-top: clamp(10px, 4vh, 44px);
  }
  .kv-hero__centro--reparto .kv-hero__logo {
    order: -1;
    justify-self: start;
    width: min(100%, 340px);
  }
  .kv-hero__byline { max-width: none; }
}

/* Pantallas bajas (portátiles con mucha barra de navegador): el hero tiene
   overflow:hidden, así que lo que no cabe se recorta y el aviso de scroll es
   lo primero en perderse. Aquí se aprieta lo justo para que entre entero. */
@media (max-height: 720px) {
  .kv-hero { padding-top: clamp(72px, 8vh, 96px); gap: clamp(16px, 2.2vw, 30px); }
  .kv-hero__centro--reparto { padding-top: clamp(16px, 7vh, 56px); }
  .kv-hero__texto { gap: clamp(14px, 1.9vw, 26px); }
  .kv-hero__centro--reparto .kv-hero__logo { width: clamp(170px, 25vw, 330px); }
}

/* Wordmark: cada letra sube tras una máscara */
/* El wordmark manda, pero sin comerse la pantalla: deja aire arriba y abajo. */
.kv-hero__logo { width: min(100%, 760px); height: auto; color: var(--kv-humo); }
/* El grupo exterior conserva su transform de SVG; el interior es el que anima. */
.kv-hero__logo [data-letra] {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(26%);
  opacity: 0;
  transition: transform var(--kv-t-lento) var(--kv-ease), opacity var(--kv-t) var(--kv-ease);
}
.kv-listo .kv-hero__logo [data-letra] { transform: translateY(0); opacity: 1; }
.kv-listo .kv-hero__logo [data-letra="I"] { transition-delay: .07s; }
.kv-listo .kv-hero__logo [data-letra="V"] { transition-delay: .14s; }
.kv-listo .kv-hero__logo [data-letra="R"] { transition-delay: .21s; }
.kv-listo .kv-hero__logo [data-letra="A"] { transition-delay: .28s; }

.kv-hero__firma { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kv-hero__regla {
  width: clamp(56px, 9vw, 132px);
  height: 4px;
  background: var(--kv-senal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kv-t-lento) var(--kv-ease) .34s;
}
.kv-listo .kv-hero__regla { transform: scaleX(1); }
.kv-hero__rotulo {
  font-family: var(--kv-display);
  font-size: clamp(9px, 1.05vw, 15px);
  letter-spacing: .3em;
  text-transform: uppercase;
}

.kv-hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* Aviso de scroll: un rótulo legible con su riel y la gota que cae */
.kv-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(10px, 1vw, 14px) clamp(16px, 1.5vw, 22px);
  border: 1px solid rgba(242, 242, 242, .2);
  color: rgba(242, 242, 242, .82);
  background: rgba(12, 10, 0, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color var(--kv-t-rapido) var(--kv-ease), color var(--kv-t-rapido) var(--kv-ease);
}
.kv-hero__scroll:hover { border-color: var(--kv-senal); color: var(--kv-humo); }
.kv-hero__scroll span {
  font-family: var(--kv-dato);
  font-size: clamp(11.5px, 1.08vw, 14px);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kv-hero__riel {
  position: relative;
  display: block;
  width: 2px;
  height: clamp(26px, 2.6vw, 36px);
  flex: none;
  background: rgba(242, 242, 242, .18);
  overflow: hidden;
}
.kv-hero__riel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: var(--kv-senal);
  animation: kv-caer 2.1s var(--kv-ease) infinite;
}
@keyframes kv-caer {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(222%); opacity: 0; }
}

/* ==========================================================================
   11 · CINTA MARQUESINA
   ========================================================================== */

.kv-cinta {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: clamp(14px, 1.6vw, 22px) 0;
  background: var(--kv-senal);
  color: var(--kv-ciruela);
  border-top: 1px solid var(--kv-ciruela);
  border-bottom: 1px solid var(--kv-ciruela);
  user-select: none;
}
.kv-cinta__pista {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
  flex: none;
  padding-right: clamp(20px, 3vw, 46px);
  animation: kv-correr 34s linear infinite;
}
.kv-cinta:hover .kv-cinta__pista { animation-play-state: paused; }
@keyframes kv-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* Cuando el JS toma el control, la cinta reacciona al scroll: acelera y
   cambia de sentido según hacia dónde vas. La animación CSS se apaga. */
.kv-cinta--viva .kv-cinta__pista { animation: none; }
.kv-cinta__item {
  font-family: var(--kv-display);
  font-size: clamp(12px, 1.5vw, 20px);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kv-cinta__aspa { width: clamp(12px, 1.5vw, 19px); height: clamp(12px, 1.5vw, 19px); color: var(--kv-vino); flex: none; }

.kv-cinta--vino  { background: var(--kv-vino); color: var(--kv-humo); border-color: var(--kv-linea-clara); }
.kv-cinta--vino .kv-cinta__aspa { color: var(--kv-senal); }

.kv-cinta--arcilla { background: var(--kv-arcilla); color: var(--kv-ciruela); border-color: rgba(43,0,43,.3); }
.kv-cinta--arcilla .kv-cinta__aspa { color: var(--kv-vino); }

/* ==========================================================================
   12 · MANIFIESTO
   ========================================================================== */

.kv-manifiesto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--kv-gap); align-items: start; }
.kv-manifiesto__lado { grid-column: span 2; display: flex; flex-direction: column; gap: 22px; }
.kv-manifiesto__cuerpo { grid-column: span 3; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); }
.kv-manifiesto__aspa { width: clamp(52px, 6vw, 92px); height: clamp(52px, 6vw, 92px); color: var(--kv-vino); }

/* Revelado palabra por palabra */
.kv-palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kv-palabra > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
.kv-visible .kv-palabra > i { transform: translateY(0); }

.kv-manifiesto__firma { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.kv-manifiesto__firma span { height: 1px; flex: 1; background: var(--kv-linea-clara); }

/* ==========================================================================
   13 · PILARES — el isotipo es el menú
   --------------------------------------------------------------------------
   Los cinco brazos del aspa son los botones. Cada uno lleva una cuña
   invisible de 72° como área de toque. Un tablist ARIA: cursor, dedo y
   teclado entran por la misma puerta, y el estado vive en un solo lugar.
   ========================================================================== */

.kv-rueda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

/* --- La escena: el aspa con sus rótulos alrededor ------------------------- */

.kv-rueda__escena {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin-inline: auto;
}

.kv-rueda__aspa {
  position: absolute;
  inset: 17%;                 /* deja el borde libre para los rótulos */
  width: 66%;
  height: 66%;
  overflow: visible;
}

/* La opacidad va en el GRUPO: con opacidad por brazo, donde dos se cruzan
   las transparencias se suman y el solape se ve más oscuro. */
.kv-rueda__apagados { opacity: .26; }
.kv-rueda__aspa path[data-brazo] {
  fill: var(--kv-humo);
  transition: fill var(--kv-t) var(--kv-ease);
}
.kv-rueda__activo path[data-brazo] { fill: var(--kv-senal); }

/* Cuñas de toque: invisibles. Solo amplían el área clicable de cada brazo;
   la pestaña de verdad es el rótulo, que es un <button> de HTML. */
.kv-rueda__cunas { fill: transparent; }
.kv-cuna { cursor: pointer; }

/* El aro que gira hasta la punta del brazo elegido */
.kv-rueda__escena::before {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(242, 242, 242, .16);
  border-radius: 50%;
  pointer-events: none;
}

/* --- Rótulos en la punta de cada brazo ------------------------------------ */

.kv-rotulo {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: rgba(12, 10, 0, .82);
  border: 1px solid rgba(242, 242, 242, .16);
  font-family: var(--kv-display);
  font-size: clamp(9px, .9vw, 13px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .6);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--kv-t) var(--kv-ease),
              border-color var(--kv-t) var(--kv-ease),
              background var(--kv-t) var(--kv-ease);
}
.kv-rotulo:hover { color: var(--kv-humo); border-color: rgba(242, 242, 242, .45); }
/* La pastilla de tinta: aquí sí se ven las cinco tintas del manual a la vez,
   y como van de fondo nunca hay problema de contraste. */
.kv-rotulo i {
  width: 10px; height: 10px;
  flex: none;
  background: var(--tinta);
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-rotulo.kv-rotulo--on {
  color: var(--kv-carbon);
  background: var(--kv-senal);
  border-color: var(--kv-senal);
}
.kv-rotulo.kv-rotulo--on i { transform: rotate(72deg) scale(1.25); }

/* Posiciones: ángulo del brazo (−90° + i·72° + 10°) a 40% del radio.
   El anclaje cambia por cuadrante para que ningún rótulo se salga. */
.kv-rotulo[data-rot="0"] { left: 56.9%; top:  7%;   translate: -50% -50%; }
/* "Arquitectura" es el rótulo más largo: va algo más adentro para no salirse */
.kv-rotulo[data-rot="1"] { left: 77%;   top: 44.4%; translate: -50% -50%; }
.kv-rotulo[data-rot="2"] { left: 67.5%; top: 91%;   translate: -50% -50%; }
.kv-rotulo[data-rot="3"] { left: 23%;   top: 83%;   translate: -50% -50%; }
.kv-rotulo[data-rot="4"] { left: 18%;   top: 29%;   translate: -50% -50%; }

/* --- La lectura ----------------------------------------------------------- */

.kv-rueda__lectura {
  border-left: 2px solid var(--kv-senal);
  padding-left: clamp(18px, 2.4vw, 34px);
}
.kv-rueda__lectura:focus-visible { outline: 2px solid var(--kv-senal); outline-offset: 6px; }

.kv-rueda__bloque { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.kv-rueda__bloque[hidden] { display: none; }

.kv-rueda__indice {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--kv-dato);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .5);
}
.kv-rueda__indice b {
  font-family: var(--kv-display);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1;
  color: var(--kv-senal);
}

.kv-rueda__nombre {
  margin: 0;
  font-family: var(--kv-display);
  font-size: clamp(22px, 3.4vw, 48px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--kv-humo);
}
.kv-rueda__desc {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(242, 242, 242, .8);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ==========================================================================
   13b · INFRAESTRUCTURA — el globo
   --------------------------------------------------------------------------
   El globo se dibuja en <canvas> con proyección ortográfica, sin librerías:
   así entra igual en Elementor, que es la regla de todo el sitio.
   ========================================================================== */

.kv-orbe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.kv-orbe__mapa {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.kv-orbe__lienzo {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* pan-y: el navegador se queda con el gesto vertical (bajar por la página)
     y nosotros con el horizontal (girar). Sin esto, en el teléfono el dedo
     quedaría atrapado sobre el globo. */
  touch-action: pan-y;
}
.kv-orbe__lienzo--agarrando { cursor: grabbing; }
.kv-orbe__lienzo:focus-visible {
  outline: 2px solid var(--kv-senal);
  outline-offset: 6px;
  border-radius: 50%;
}

/* Anillo de encuadre alrededor del globo */
.kv-orbe__anillo {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(242, 242, 242, .14);
  border-radius: 50%;
  pointer-events: none;
}
.kv-orbe__anillo::before {
  content: '';
  position: absolute;
  inset: -5%;
  border: 1px dashed rgba(216, 159, 117, .22);
  border-radius: 50%;
}

.kv-orbe__pie {
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .38);
}

.kv-orbe__lado { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }

/* --- Las sedes ------------------------------------------------------------ */

.kv-sedes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.kv-sede {
  width: 100%;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: clamp(12px, 1.4vw, 18px);
  align-items: center;
  padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.2vw, 16px);
  margin-inline: calc(clamp(10px, 1.2vw, 16px) * -1);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--kv-linea-clara);
  border-radius: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background var(--kv-t) var(--kv-ease);
}
.kv-sedes li:last-child .kv-sede { border-bottom: 1px solid var(--kv-linea-clara); }
.kv-sede:hover { background: rgba(242, 242, 242, .05); }
.kv-sede[aria-pressed="true"] { background: rgba(255, 255, 153, .07); }

.kv-sede__punto {
  width: 10px; height: 10px;
  justify-self: center;
  border: 1px solid var(--kv-arcilla);
  transition: background var(--kv-t) var(--kv-ease),
              border-color var(--kv-t) var(--kv-ease),
              transform var(--kv-t) var(--kv-ease);
}
.kv-sede[aria-pressed="true"] .kv-sede__punto {
  background: var(--kv-senal);
  border-color: var(--kv-senal);
  transform: rotate(72deg) scale(1.2);
}

.kv-sede__cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv-sede__nombre {
  font-family: var(--kv-display);
  font-size: clamp(13px, 1.4vw, 19px);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--kv-t) var(--kv-ease);
}
.kv-sede[aria-pressed="true"] .kv-sede__nombre { color: var(--kv-senal); }
.kv-sede__zona { font-size: 14.5px; font-weight: 300; color: rgba(242, 242, 242, .6); }
.kv-sede__coord {
  font-family: var(--kv-dato);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(242, 242, 242, .42);
  white-space: nowrap;
}


/* ==========================================================================
   14 · SERVICIOS — 5 filas desplegables
   ========================================================================== */

.kv-servicio { border-top: 1px solid var(--kv-linea-clara); }
.kv-servicio:last-of-type { border-bottom: 1px solid var(--kv-linea-clara); }

.kv-servicio__cab {
  width: 100%;
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 62px) 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: padding var(--kv-t) var(--kv-ease), color var(--kv-t-rapido) var(--kv-ease);
}
.kv-servicio__cab:hover { padding-left: clamp(8px, 1.4vw, 20px); padding-right: clamp(8px, 1.4vw, 20px); }
.kv-servicio__num { font-family: var(--kv-dato); font-size: 12.5px; letter-spacing: .16em; color: var(--kv-arcilla); }
.kv-servicio__nombre {
  font-family: var(--kv-display);
  font-size: clamp(16px, 2.5vw, 34px);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--kv-t-rapido) var(--kv-ease);
}
.kv-servicio__cab:hover .kv-servicio__nombre { color: var(--kv-senal); }
/* El signo NO gira con la caja. Antes la caja giraba 72° y el "−" quedaba
   inclinado: ahora la caja se queda quieta y lo que desaparece es la barra
   vertical, encogiéndose sobre su propio eje. El "−" queda siempre recto. */
.kv-servicio__mas {
  position: relative;
  width: clamp(34px, 3vw, 42px);
  aspect-ratio: 1;
  flex: none;
  border: 1px solid var(--kv-linea-clara);
  transition: background var(--kv-t-rapido) var(--kv-ease),
              border-color var(--kv-t-rapido) var(--kv-ease);
}
.kv-servicio__mas::before,
.kv-servicio__mas::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 2px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate var(--kv-t) var(--kv-ease), scale var(--kv-t) var(--kv-ease);
}
.kv-servicio__mas::after { rotate: 90deg; }

.kv-servicio__cab[aria-expanded="true"] .kv-servicio__mas {
  background: rgba(255, 255, 153, .12);
  border-color: rgba(255, 255, 153, .45);
}
/* La vertical se encoge hasta desaparecer: queda el "−" perfectamente centrado */
.kv-servicio__cab[aria-expanded="true"] .kv-servicio__mas::after { scale: 0 1; }

.kv-servicio__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--kv-t-lento) var(--kv-ease);
}
.kv-servicio__cuerpo > div { overflow: hidden; }
.kv-servicio.kv-abierto .kv-servicio__cuerpo { grid-template-rows: 1fr; }

/* El contenido entra un poco después que la fila se abre: se siente encadenado
   en vez de aparecer de golpe con la altura */
.kv-servicio__panel {
  opacity: 0;
  translate: 0 -12px;
  transition: opacity var(--kv-t) var(--kv-ease),
              translate var(--kv-t) var(--kv-ease);
}
.kv-servicio.kv-abierto .kv-servicio__panel {
  opacity: 1;
  translate: 0 0;
  transition-delay: .12s;
}

/* Columna 1 = la sangría del número (queda vacía a propósito).
   Columna 2 = etiqueta del pilar + texto.  Columna 3 = entregables. */
.kv-servicio__panel {
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 62px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.6vw, 20px) clamp(12px, 2vw, 28px);
  padding-bottom: clamp(26px, 3vw, 42px);
}
.kv-servicio__pilar          { grid-column: 2; grid-row: 1; }
.kv-servicio__panel .kv-parrafo { grid-column: 2; grid-row: 2; }
.kv-servicio__lista          { grid-column: 3; grid-row: 1 / span 2; }

/* Fila de servidores (solo en Desarrollo): ocupa el ancho bajo las dos columnas */
.kv-servidores {
  grid-column: 2 / -1;
  grid-row: 3;
  margin-top: 6px;
}
.kv-servidores > p {
  margin: 0 0 8px;
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .5);
}
.kv-servidores__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--kv-linea-clara);
  border: 1px solid var(--kv-linea-clara);
}
.kv-servidor {
  background: var(--kv-ciruela);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background var(--kv-t-rapido) var(--kv-ease);
}
.kv-servidor:hover { background: rgba(255, 255, 153, .07); }
.kv-servidor b { font-family: var(--kv-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }
.kv-servidor span { font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: var(--kv-arcilla); }

.kv-servicio__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kv-servicio__lista li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(242, 242, 242, .78);
}
.kv-servicio__lista li::before { content: ''; width: 5px; height: 5px; flex: none; background: var(--kv-arcilla); }
.kv-servicio__pilar {
  font-family: var(--kv-dato);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--kv-senal);
  border: 1px solid rgba(255,255,153,.3);
  padding: 5px 10px;
  justify-self: start;
  align-self: start;
}

/* ==========================================================================
   15 · EL PANEL — la pieza firma
   ========================================================================== */

.kv-panelapp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.kv-panelapp__texto  { grid-column: span 2; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.kv-panelapp__visual { grid-column: span 3; }

.kv-panelapp__puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kv-panelapp__puntos li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 16.5px; font-weight: 300; line-height: 1.6; }
.kv-panelapp__puntos svg { width: 13px; height: 13px; margin-top: 5px; color: var(--kv-senal); }

/* --- La ventana del panel ------------------------------------------------- */
.kv-app {
  background: var(--kv-ciruela);
  border: 1px solid rgba(242, 242, 242, .22);
  box-shadow: 26px 26px 0 rgba(12, 10, 0, .28);
  overflow: hidden;
  --app-linea: rgba(242, 242, 242, .12);
}

/* Barra superior */
.kv-app__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-linea);
  background: rgba(242, 242, 242, .05);
}
.kv-app__barra > svg { width: 15px; height: 15px; color: var(--kv-senal); flex: none; }
.kv-app__titulo {
  font-family: var(--kv-dato);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(242,242,242,.78);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-app__vivo { margin-left: auto; flex: none; display: flex; align-items: center; gap: 7px; font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: var(--kv-senal); white-space: nowrap; }
.kv-app__vivo i { width: 6px; height: 6px; background: var(--kv-senal); border-radius: 50%; animation: kv-latir 2s var(--kv-ease) infinite; }
@keyframes kv-latir { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Fichas de persona (iniciales) */
.kv-app__quien {
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  background: var(--kv-vino);
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  /* El tracking deja un hueco después de la última letra y en una casilla de
     24 px eso descentra visiblemente. El text-indent lo compensa y así se
     mantiene el .16em del manual. */
  text-indent: .16em;
  color: var(--kv-senal);
}
.kv-app__quien--cliente { background: var(--kv-arcilla); color: var(--kv-ciruela); }

/* Cabecera: qué proyecto es y cuándo es la próxima entrega —
   las dos preguntas que un cliente hace siempre primero. */
.kv-app__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  padding: clamp(16px, 1.7vw, 22px);
  border-bottom: 1px solid var(--app-linea);
}
.kv-app__rotulo { font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: rgba(242,242,242,.5); margin: 0 0 6px; }
.kv-app__proyecto { font-family: var(--kv-display); font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.kv-app__entrega { text-align: right; }
.kv-app__fecha { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; margin: 0; }
.kv-app__fecha b { font-family: var(--kv-dato); font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; color: var(--kv-senal); }
.kv-app__fecha span { font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: rgba(242,242,242,.55); }

/* Medidor de avance */
.kv-app__medidor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: center;
  padding: clamp(16px, 1.7vw, 22px);
  border-bottom: 1px solid var(--app-linea);
}
.kv-app__medidor-cifra { display: flex; align-items: baseline; gap: 3px; }
.kv-app__medidor-cifra b {
  font-family: var(--kv-dato);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  color: var(--kv-senal);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.kv-app__medidor-cifra span { font-family: var(--kv-dato); font-size: 13px; color: var(--kv-senal); }
.kv-app__medidor-info { display: flex; flex-direction: column; gap: 9px; }
.kv-app__medidor-info > span { font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: rgba(242,242,242,.62); }
.kv-app__barra-avance { height: 6px; background: rgba(242, 242, 242, .13); overflow: hidden; }
.kv-app__barra-avance i { display: block; height: 100%; width: 0; background: var(--kv-senal); transition: width 1.4s var(--kv-ease); }

/* Dos columnas: etapas | pestañas */
.kv-app__cuerpo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.kv-app__col { padding: clamp(16px, 1.7vw, 22px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kv-app__col + .kv-app__col { border-left: 1px solid var(--app-linea); }

/* Etapas, cada una con su fecha */
.kv-app__etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kv-app__etapa {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(242, 242, 242, .08);
  font-size: 13px;
  font-weight: 300;
  color: rgba(242, 242, 242, .5);
  transition: color var(--kv-t) var(--kv-ease);
}
.kv-app__etapa i {
  width: 9px; height: 9px;
  border: 1px solid rgba(242, 242, 242, .3);
  justify-self: center;
  transition: background var(--kv-t) var(--kv-ease), border-color var(--kv-t) var(--kv-ease), transform var(--kv-t) var(--kv-ease);
}
.kv-app__etapa em { font-family: var(--kv-dato); font-size: 9px; font-style: normal; letter-spacing: .16em; color: rgba(242,242,242,.35); white-space: nowrap; }
.kv-app__etapa.kv-hecha { color: rgba(242, 242, 242, .82); }
.kv-app__etapa.kv-hecha i { background: var(--kv-arcilla); border-color: var(--kv-arcilla); }
.kv-app__etapa.kv-hecha em { color: var(--kv-arcilla); }
.kv-app__etapa.kv-activa { color: var(--kv-humo); }
.kv-app__etapa.kv-activa i { background: var(--kv-senal); border-color: var(--kv-senal); transform: rotate(72deg) scale(1.15); }
.kv-app__etapa.kv-activa em { color: var(--kv-senal); }

/* Equipo del proyecto */
.kv-app__equipo { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(242,242,242,.08); display: flex; align-items: center; gap: 10px; }
.kv-app__equipo-fichas { display: flex; }
.kv-app__equipo-fichas .kv-app__quien + .kv-app__quien { margin-left: -6px; }

/* Pestañas */
.kv-app__pestanas { display: flex; gap: 2px; }
.kv-app__pestana {
  flex: 1;
  padding: 9px 8px;
  background: rgba(242, 242, 242, .05);
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .55);
  cursor: pointer;
  border-radius: 0;
  transition: color var(--kv-t-rapido) var(--kv-ease),
              background var(--kv-t-rapido) var(--kv-ease),
              border-color var(--kv-t-rapido) var(--kv-ease);
}
.kv-app__pestana:hover { color: var(--kv-humo); }
.kv-app__pestana[aria-selected="true"] {
  color: var(--kv-ciruela);
  background: var(--kv-senal);
  border-bottom-color: var(--kv-senal);
}
.kv-app__lamina { min-height: 208px; }
.kv-app__lamina[hidden] { display: none; }

/* Lámina 1 · actividad */
.kv-app__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.kv-app__evento {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 10px;
  background: rgba(242, 242, 242, .05);
  border-left: 2px solid var(--kv-arcilla);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.45;
  animation: kv-entrar-evento var(--kv-t) var(--kv-ease) both;
}
.kv-app__evento--senal { border-left-color: var(--kv-senal); }
@keyframes kv-entrar-evento {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.kv-app__dicho { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv-app__evento b { font-weight: 600; color: var(--kv-humo); }
.kv-app__evento time { font-family: var(--kv-dato); font-size: 9px; letter-spacing: .16em; color: rgba(242,242,242,.42); }

/* Lámina 2 · archivos */
.kv-app__archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kv-app__fila-archivo {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(242, 242, 242, .08);
}
.kv-app__tipo {
  height: 22px;
  display: grid; place-items: center;
  background: rgba(242, 242, 242, .09);
  font-family: var(--kv-dato);
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--kv-arcilla);
}
.kv-app__nombre-archivo { font-size: 12.5px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-app__nombre-archivo small { display: block; font-family: var(--kv-dato); font-size: 8.5px; letter-spacing: .16em; color: rgba(242,242,242,.4); }
.kv-app__bajar { color: rgba(242,242,242,.45); width: 14px; height: 14px; }

.kv-app__archivo { display: flex; flex-direction: column; gap: 7px; padding: 11px; border: 1px dashed rgba(242, 242, 242, .24); margin-top: 4px; }
.kv-app__archivo-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--kv-dato); font-size: 10px; letter-spacing: .16em; color: rgba(242,242,242,.72); }
.kv-app__archivo-barra { height: 3px; background: rgba(242, 242, 242, .13); }
.kv-app__archivo-barra i { display: block; height: 100%; width: 0; background: var(--kv-arcilla); transition: width .35s linear; }

/* Lámina 3 · comentarios */
.kv-app__hilo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kv-app__comentario { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.kv-app__globo { background: rgba(242, 242, 242, .06); padding: 9px 11px; border-left: 2px solid var(--app-linea); }
.kv-app__globo p { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.5; }
.kv-app__globo span { display: block; margin-top: 5px; font-family: var(--kv-dato); font-size: 8.5px; letter-spacing: .16em; color: rgba(242,242,242,.42); }
.kv-app__comentario--kivra .kv-app__globo { border-left-color: var(--kv-senal); }
.kv-app__responder {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--app-linea);
  font-family: var(--kv-texto); font-size: 12.5px; font-weight: 300;
  color: rgba(242, 242, 242, .35);
}
.kv-app__responder svg { width: 13px; height: 13px; color: var(--kv-senal); flex: none; }

/* ==========================================================================
   16 · PROCESO — 5 etapas
   ========================================================================== */

.kv-proceso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--kv-linea-clara); }
.kv-etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 38px) clamp(14px, 1.6vw, 24px) clamp(28px, 3vw, 44px);
  border-right: 1px solid var(--kv-linea-clara);
  transition: background var(--kv-t) var(--kv-ease);
}
.kv-etapa:first-child { padding-left: 0; }
.kv-etapa:last-child  { border-right: 0; padding-right: 0; }
.kv-etapa:hover { background: rgba(242, 242, 242, .05); }
.kv-etapa::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--kv-senal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
.kv-visible .kv-etapa::before { transform: scaleX(1); }
.kv-visible .kv-etapa:nth-child(2)::before { transition-delay: .1s; }
.kv-visible .kv-etapa:nth-child(3)::before { transition-delay: .2s; }
.kv-visible .kv-etapa:nth-child(4)::before { transition-delay: .3s; }
.kv-visible .kv-etapa:nth-child(5)::before { transition-delay: .4s; }

.kv-etapa__num { font-family: var(--kv-dato); font-size: clamp(19px, 2.2vw, 30px); font-weight: 700; color: var(--kv-arcilla); line-height: 1; }
.kv-etapa__nombre { font-family: var(--kv-display); font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .1em; text-transform: uppercase; }
.kv-etapa__desc { font-size: 15.5px; font-weight: 300; line-height: 1.62; color: rgba(242, 242, 242, .74); margin: 0; }
.kv-etapa__dato { margin-top: auto; padding-top: 12px; font-family: var(--kv-dato); font-size: 10.5px; letter-spacing: .16em; color: var(--kv-arcilla); }

/* ==========================================================================
   17 · TRABAJO
   ========================================================================== */

/* Cada cliente es una ficha: encabezado, sitio navegable y qué se entregó. */
.kv-clientes { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 76px); }

/* La vitrina a la izquierda y el texto al lado, no debajo: a ancho completo
   cada ficha medía casi 900 px de alto y con tres clientes el scroll se hacía
   eterno. En dos columnas cada una ocupa la mitad. */
.kv-cliente {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 52px);
  row-gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.kv-cliente__cab { grid-column: 1 / -1; }
.kv-cliente .kv-vitrina { grid-column: 1; }
.kv-cliente__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kv-linea-clara);
}
.kv-cliente__nombre { font-family: var(--kv-display); font-size: clamp(17px, 2.4vw, 34px); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.kv-cliente__meta { font-family: var(--kv-dato); font-size: 11.5px; letter-spacing: .16em; color: var(--kv-arcilla); }

.kv-cliente__pie { grid-column: 2; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.kv-cliente__entregado { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-cliente__chip {
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kv-senal);
  border: 1px solid rgba(255, 255, 153, .28);
  padding: 6px 11px;
}

/* --- La vitrina: el sitio del cliente, navegable de verdad ---------------- */
.kv-vitrina {
  border: 1px solid rgba(242, 242, 242, .22);
  background: var(--kv-carbon);
  box-shadow: 22px 22px 0 rgba(12, 10, 0, .3);
  overflow: hidden;
}
.kv-vitrina__barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(242, 242, 242, .14);
  background: rgba(242, 242, 242, .05);
}
.kv-vitrina__puntos { display: flex; gap: 6px; flex: none; }
.kv-vitrina__puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 242, 242, .2); }
.kv-vitrina__url {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  background: rgba(242, 242, 242, .07);
  font-family: var(--kv-dato);
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(242, 242, 242, .6);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kv-vitrina__pantalla {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kv-humo);
  isolation: isolate;
}
/* El iframe se dibuja a 1440 px y se reduce con transform: el sitio del
   cliente se ve con su maqueta de escritorio y se puede recorrer por dentro.
   El ancho y la escala los calcula js/kivra.js según el tamaño real. */
.kv-vitrina__web {
  position: absolute;
  top: 0; left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;   /* hasta que se active con un clic */
}
.kv-vitrina.kv-viva .kv-vitrina__web { pointer-events: auto; }

/* Capa de activación: evita que la rueda del mouse se quede atrapada
   dentro del iframe mientras la persona recorre la página. */
.kv-vitrina__activar {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(to top, rgba(43, 0, 43, .58), rgba(43, 0, 43, .06) 46%);
  border: 0;
  cursor: pointer;
  transition: opacity var(--kv-t) var(--kv-ease), visibility var(--kv-t) var(--kv-ease);
}
.kv-vitrina.kv-viva .kv-vitrina__activar { opacity: 0; visibility: hidden; }
.kv-vitrina__activar span {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kv-senal);
  color: var(--kv-ciruela);
  padding: 11px 18px;
  font-family: var(--kv-dato);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-vitrina__activar:hover span { transform: translateY(-3px); }
.kv-vitrina__activar svg { width: 12px; height: 12px; }

/* Modo póster: para los sitios que NO permiten ser incrustados.
   Mismo marco de navegador, pero adentro va una imagen en vez del <iframe>.
   Si la imagen es una captura de página completa, se recorre igual que el
   sitio real; si es corta, llena el marco. */
.kv-vitrina__pantalla--poster {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--kv-humo);
}
.kv-vitrina__poster {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

.kv-vitrina__nota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 14px;
  border-top: 1px solid rgba(242, 242, 242, .14);
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(242, 242, 242, .45);
}
.kv-vitrina__nota a { color: var(--kv-senal); }
.kv-vitrina__nota a:hover { text-decoration: underline; }

/* ==========================================================================
   18 · CIFRAS Y CLIENTES
   ========================================================================== */

/* Las hairlines salen del gap sobre un fondo oscuro */
.kv-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: rgba(43, 0, 43, .3);
  border: 2px solid rgba(43, 0, 43, .3);
}
.kv-cifra {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(26px, 3vw, 44px) clamp(16px, 1.9vw, 28px) clamp(28px, 3.4vw, 46px);
  background: var(--kv-arcilla);
  transition: color var(--kv-t) var(--kv-ease);
}
/* Regla superior que se dibuja al entrar */
.kv-cifra::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: 5px;
  background: var(--kv-vino);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kv-t-lento) var(--kv-ease);
}
.kv-cifra.kv-visible::before { transform: scaleX(1); }
/* Relleno que sube: el mismo gesto que los botones */
.kv-cifra::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--kv-ciruela);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--kv-t) var(--kv-ease);
}
.kv-cifra > * { position: relative; z-index: 1; }
.kv-cifra:hover::after { transform: scaleY(1); }
.kv-cifra:hover { color: var(--kv-humo); }
.kv-cifra:hover .kv-cifra__num { color: var(--kv-senal); }
.kv-cifra:hover .kv-cifra__desc { color: rgba(242, 242, 242, .75); }

.kv-cifra__num {
  font-family: var(--kv-dato);
  font-weight: 700;
  font-size: clamp(72px, 10.5vw, 158px);
  line-height: .78;
  /* Excepción deliberada al .16em del manual: ese tracking es para rótulos y
     datos chicos. A 158 px serían 25 px entre dígitos y el número se abriría.
     En display grande la corrección óptica va al revés. */
  letter-spacing: -.04em;
  color: var(--kv-ciruela);
  font-variant-numeric: tabular-nums;
  transition: color var(--kv-t) var(--kv-ease);
}
.kv-cifra__nombre {
  font-family: var(--kv-display);
  font-size: clamp(11px, 1.25vw, 17px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}
.kv-cifra__desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(43, 0, 43, .72);
  margin: 0;
  transition: color var(--kv-t) var(--kv-ease);
}

/* ==========================================================================
   19 · CONTACTO
   ========================================================================== */

.kv-contacto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 64px); align-items: start; }
.kv-contacto__lado { grid-column: span 2; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); }
.kv-contacto__form { grid-column: span 3; }

.kv-contacto__datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kv-contacto__dato { padding: 15px 0; border-top: 1px solid var(--kv-linea-clara); display: flex; flex-direction: column; gap: 4px; }
.kv-contacto__dato:last-child { border-bottom: 1px solid var(--kv-linea-clara); }
.kv-contacto__dato span { font-family: var(--kv-dato); font-size: 10.5px; letter-spacing: .16em; color: var(--kv-arcilla); }
.kv-contacto__dato a, .kv-contacto__dato p {
  font-size: clamp(15px, 1.3vw, 18.5px);
  /* El manual solo admite Saira 300 y 600: el 400 que había no existe */
  font-weight: 600;
  margin: 0;
  transition: color var(--kv-t-rapido) var(--kv-ease);
}
.kv-contacto__dato a:hover { color: var(--kv-senal); }

.kv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.kv-campo { display: flex; flex-direction: column; gap: 7px; position: relative; }
.kv-campo--ancho { grid-column: 1 / -1; }
.kv-campo > label { font-family: var(--kv-dato); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kv-arcilla); }
.kv-campo > input,
.kv-campo > select,
.kv-campo > textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242, 242, 242, .28);
  padding: 11px 0;
  font-family: var(--kv-texto);
  font-size: 16px;
  font-weight: 300;
  color: var(--kv-humo);
  border-radius: 0;
  transition: border-color var(--kv-t-rapido) var(--kv-ease);
  appearance: none;
}
.kv-campo > textarea { resize: vertical; min-height: 108px; }
.kv-campo > select { cursor: pointer; }
.kv-campo > select option { background: var(--kv-ciruela); color: var(--kv-humo); }
.kv-campo > :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: var(--kv-senal);
}
.kv-campo > :is(input, select, textarea):focus-visible { outline: 2px solid var(--kv-senal); outline-offset: 4px; }
.kv-campo > input::placeholder,
.kv-campo > textarea::placeholder { color: rgba(242, 242, 242, .3); }
.kv-campo__error {
  font-family: var(--kv-dato);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--kv-arcilla);
  min-height: 14px;
}
.kv-campo.kv-malo > :is(input, select, textarea) { border-bottom-color: var(--kv-arcilla); }

.kv-form__pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.kv-form__gracias {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--kv-senal);
  background: rgba(255, 255, 153, .06);
}
.kv-form.kv-enviado .kv-campo,
.kv-form.kv-enviado .kv-form__pie { display: none; }
.kv-form.kv-enviado .kv-form__gracias { display: flex; }

/* ==========================================================================
   20 · PIE
   ========================================================================== */

.kv-pie { position: relative; padding: clamp(56px, 6vw, 90px) var(--kv-brazo) 0; background: var(--kv-carbon); color: var(--kv-humo); overflow: hidden; }
/* El pie ocupa todo el ancho, como la marquesina de logos: se le suelta la
   caja de 1440 px que centra al resto del sitio y queda solo con el margen
   lateral de siempre. */
.kv-pie .kv-limite { max-width: none; }
.kv-pie__top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); padding-bottom: clamp(40px, 5vw, 70px); }
.kv-pie__marca { grid-column: span 2; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
/* El isotipo del pie es una firma, no un ícono: tiene que pesar. */
.kv-pie__aspa {
  width: clamp(64px, 8vw, 118px);
  height: auto;
  aspect-ratio: 1;
  color: var(--kv-senal);
  animation: kv-girar-72 42s linear infinite;
}
.kv-pie__cols  { grid-column: span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.kv-pie__col { display: flex; flex-direction: column; gap: 11px; }
.kv-pie__col h3 { margin: 0 0 4px; font-family: var(--kv-dato); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kv-arcilla); font-weight: 400; }
.kv-pie__col a { font-size: 15.5px; font-weight: 300; color: rgba(242, 242, 242, .72); transition: color var(--kv-t-rapido) var(--kv-ease); width: fit-content; }
.kv-pie__col a:hover { color: var(--kv-senal); }

/* El copyright va contra el borde derecho, al ras del final de la marquesina */
.kv-pie__legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(242, 242, 242, .12);
  font-family: var(--kv-dato);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: rgba(242, 242, 242, .45);
  text-align: right;
}

/* Recorte gigante del logotipo, sangrando por abajo */
.kv-pie__logo {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -12%;
  color: rgba(242, 242, 242, .07);
}

/* ==========================================================================
   21 · REVELADO AL SCROLL — un solo gesto en todo el sitio
   ========================================================================== */

.kv-rev {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--kv-t-lento) var(--kv-ease), transform var(--kv-t-lento) var(--kv-ease);
}
.kv-rev.kv-visible { opacity: 1; transform: none; }
.kv-rev[data-retraso="1"] { transition-delay: .09s; }
.kv-rev[data-retraso="2"] { transition-delay: .18s; }
.kv-rev[data-retraso="3"] { transition-delay: .27s; }
.kv-rev[data-retraso="4"] { transition-delay: .36s; }

/* ==========================================================================
   22 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  /* Vuelve a apilarse: la vitrina arriba y el texto debajo */
  .kv-cliente { grid-template-columns: minmax(0, 1fr); }
  .kv-cliente .kv-vitrina,
  .kv-cliente__pie { grid-column: 1; }
}

/* Ya no caben tres columnas por fila: la descripción baja a una segunda línea,
   alineada con el nombre. */
@media (max-width: 900px) {
  /* La rueda arriba, la lectura debajo */
  .kv-rueda { grid-template-columns: minmax(0, 1fr); }
  .kv-rueda__escena { max-width: 420px; }
  .kv-rueda__lectura { border-left: 0; border-top: 2px solid var(--kv-senal); padding-left: 0; padding-top: clamp(18px, 2.4vw, 28px); }

  /* El globo pasa arriba y la lista debajo */
  .kv-orbe { grid-template-columns: minmax(0, 1fr); }
  .kv-orbe__mapa { max-width: 420px; }
}

@media (max-width: 620px) {
  /* La coordenada no cabe al lado del nombre: baja a su propia línea */
  .kv-sede { grid-template-columns: 14px minmax(0, 1fr); row-gap: 6px; }
  .kv-sede__coord { grid-column: 2; }

  /* En pantalla chica los rótulos se pisarían entre ellos: queda el del
     brazo elegido, que es el único que hace falta. */
  .kv-rotulo { display: none; }
  .kv-rotulo.kv-rotulo--on { display: inline-flex; }
  .kv-rueda__aspa { inset: 12%; width: 76%; height: 76%; }
}

@media (max-width: 1023px) {
  .kv-nav__links, .kv-nav__cta { display: none; }
  .kv-nav__menu { display: grid; }

  .kv-manifiesto,
  .kv-panelapp,
  .kv-contacto { grid-template-columns: minmax(0, 1fr); }
  .kv-manifiesto__lado,
  .kv-manifiesto__cuerpo,
  .kv-panelapp__texto,
  .kv-panelapp__visual,
  .kv-contacto__lado,
  .kv-contacto__form { grid-column: 1 / -1; }

  .kv-pie__top { grid-template-columns: minmax(0, 1fr); }
  .kv-pie__marca, .kv-pie__cols { grid-column: 1 / -1; }

  .kv-proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-etapa { border-bottom: 1px solid var(--kv-linea-oscura); }
  .kv-etapa:first-child, .kv-etapa:last-child { padding-left: clamp(14px, 1.6vw, 24px); padding-right: clamp(14px, 1.6vw, 24px); }
  .kv-etapa:nth-child(odd) { padding-left: 0; }
  .kv-etapa:nth-child(even) { border-right: 0; }

  .kv-app__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .kv-app__col + .kv-app__col { border-left: 0; border-top: 1px solid var(--app-linea); }
  .kv-app__equipo { margin-top: 4px; }

  .kv-vitrina__pantalla { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  :root { --kv-sec-y: clamp(64px, 13vw, 96px); }

  .kv-hero { min-height: auto; padding-top: 118px; padding-bottom: 56px; gap: 44px; }
  .kv-hero__aspa { right: -46vw; top: auto; bottom: -12vh; width: 128vw; height: 128vw; opacity: .42; }
  .kv-hero__fila { align-items: flex-start; }
  .kv-hero__scroll { display: none; }
  /* El encabezado se apila: la línea que corre ya no tiene dónde correr */
  .kv-encabezado { flex-wrap: wrap; }
  .kv-encabezado__linea { display: none; }

  .kv-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-cifra__num { font-size: clamp(58px, 19vw, 96px); }

  .kv-proceso { grid-template-columns: minmax(0, 1fr); }
  .kv-etapa { border-right: 0; padding-left: 0 !important; padding-right: 0 !important; }

  .kv-form { grid-template-columns: minmax(0, 1fr); }
  .kv-pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kv-servicio__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .kv-servicio__pilar,
  .kv-servicio__panel .kv-parrafo,
  .kv-servicio__lista,
  .kv-servidores { grid-column: 1; grid-row: auto; }
  .kv-servidores__fila { grid-template-columns: minmax(0, 1fr); }

  .kv-app { box-shadow: 12px 12px 0 rgba(12, 10, 0, .28); }

  .kv-app__cabecera { flex-direction: column; align-items: flex-start; }
  .kv-app__entrega { text-align: left; }
  .kv-app__fecha { justify-content: flex-start; }
  /* La barra no alcanza para el título completo: queda solo la marca */
  .kv-app__titulo-largo { display: none; }
  .kv-app__pestana { letter-spacing: .1em; padding-inline: 4px; }

  .kv-vitrina { box-shadow: 10px 10px 0 rgba(12, 10, 0, .3); }
  .kv-vitrina__pantalla { aspect-ratio: 3 / 4; }
  .kv-vitrina__nota { justify-content: center; text-align: center; }
}

@media (min-width: 1024px) {
  .kv-dial { display: flex; }
}

/* ==========================================================================
   23 · MOVIMIENTO REDUCIDO — se respeta siempre
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .kv-rev,
  .kv-hero__logo [data-letra],
  .kv-palabra > i { opacity: 1 !important; transform: none !important; }

  .kv-hero__regla,
  .kv-encabezado__linea,
  .kv-etapa::before { transform: scaleX(1) !important; }

  .kv-cinta__pista { animation: none !important; }
  .kv-aspa--gira { animation: none !important; }
  .kv-hero__scroll i { animation: none !important; }

  /* Nada gira ni flota en el fondo */
  .kv-fondo__aspa, .kv-pie__aspa { animation: none !important; }
  .kv-btn { translate: none !important; }
  .kv-avance { display: none; }
}

/* ==========================================================================
   24 · IMPRESIÓN
   ========================================================================== */

@media print {
  .kv-loader, .kv-nav, .kv-dial, .kv-panel, .kv-cinta { display: none !important; }
  .kv-body { background: #fff; color: #000; }
  .kv-rev { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   25 · MARQUESINA DE MARCAS
   ========================================================================== */

/* Sección de cierre: no necesita el alto completo de las demás */
.kv-sec--corta { padding-block: clamp(52px, 6vw, 96px); }

.kv-marquesina {
  position: relative;
  margin-top: clamp(26px, 3vw, 46px);
  /* Aire arriba y abajo para los logos realzados: el recorte del bucle se
     hace en el borde del relleno, así que este margen los deja entrar. */
  padding-block: clamp(12px, 1.9vw, 26px);
  overflow: hidden;
  /* Los bordes se desvanecen: los logos entran y salen sin cortarse en seco */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.kv-marquesina__pista {
  display: flex;
  width: max-content;
  animation: kv-desfilar 46s linear infinite;
}
/* Al pasar el cursor se detiene: si no, no habría forma de hacer clic */
.kv-marquesina:hover .kv-marquesina__pista,
.kv-marquesina:focus-within .kv-marquesina__pista { animation-play-state: paused; }

@keyframes kv-desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 50% = exactamente un grupo */
}

.kv-marquesina__grupo {
  display: flex;
  align-items: center;
  gap: clamp(38px, 5.4vw, 92px);
  margin: 0;
  padding: 0 clamp(19px, 2.7vw, 46px);
  list-style: none;
  flex: none;
}

/* Caja fija para todos: cada logo trae su propia proporción y sin una caja
   común unos se verían gigantes y otros diminutos. object-fit: contain hace
   el resto. */
.kv-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(116px, 15vw, 194px);
  height: clamp(38px, 4.6vw, 60px);
  padding: 4px;
  opacity: .58;
  transition: opacity var(--kv-t) var(--kv-ease), transform var(--kv-t) var(--kv-ease);
}
/* width/height en auto son imprescindibles: si no, ganan los atributos
   width= y height= del <img> y el logo se pinta a tamaño natural. */
.kv-marca img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* brightness(0) aplana el logo a negro conservando la transparencia;
     invert(1) lo sube a blanco puro. Da igual el color con que venga: sale
     blanco, y ninguna marca ajena ensucia la paleta. */
  filter: grayscale(1) brightness(0) invert(1);
}
/* Los logos cuadrados o de trazo fino pierden contra los horizontales: el alto
   de la caja los frena antes y quedan con la mitad de presencia. Estos crecen
   por encima de ese alto — el relleno de la marquesina absorbe la diferencia.
   El porcentaje es sobre los 52 px de caja útil: 167% ≈ +35 px, 148% ≈ +25 px.
   El max-width también se suelta: Decoccolone es muy apaisado y sin eso el
   ancho lo frenaba antes de alcanzar el alto pedido. El desborde lateral cabe
   de sobra en la separación entre logos. */
.kv-marca--realce img      { max-height: 167%; max-width: 112%; }
.kv-marca--realce-leve img { max-height: 148%; max-width: 112%; }

.kv-marca:hover,
.kv-marca:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}
.kv-marca:focus-visible {
  outline: 2px solid var(--kv-senal);
  outline-offset: 4px;
}

/* Sin movimiento: se detiene y los logos se acomodan en varias filas */
@media (prefers-reduced-motion: reduce) {
  .kv-marquesina {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kv-marquesina__pista { animation: none; width: 100%; }
  .kv-marquesina__grupo { flex-wrap: wrap; justify-content: center; }
  .kv-marquesina__grupo[aria-hidden="true"] { display: none; }
}