/* Kenea · v2. Tokens de referencia (lusion.co): hueso #f0f1fa, negro, azul
   eléctrico #1a2ffb, verde ácido #c1ff00, radio 20px, padding max(5vw,40px).
   Tipografía: Inter (300–500) + IBM Plex Mono para etiquetas. */

:root {
  --hueso: #f0f1fa;
  --hueso-2: #e4e6ef;
  --hueso-3: #d6d9e6;
  --negro: #0b0c10;
  --negro-2: #16181f;
  --gris: #2b2e3a;
  --gris-2: #6b7086;
  --gris-3: #a0a4b8;
  --azul: #1a2ffb;
  --azul-oscuro: #071bdf;
  --verde: #c1ff00;
  --linea: rgba(11, 12, 16, .12);
  --linea-inv: rgba(240, 241, 250, .16);
  --radio: 20px;
  --px: max(5vw, 40px);
  --py: clamp(48px, 7vw, 120px);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --suave: cubic-bezier(.22, 1, .36, 1);

  /* Escala de movimiento (transitions.dev). Regla: el cierre es más rápido que
     la apertura; el hover entra directo y sale suave; el escalonado total nunca
     pasa de ~300 ms para que el último elemento no llegue tarde. */
  --dur-escalonado: 40ms;
  --dur-micro: 80ms;
  --dur-rapida: 150ms;   /* cierres, intercambios de texto */
  --dur-media: 250ms;    /* aperturas, hover, deslizamientos */
  --dur-panel-cierre: 350ms;
  --dur-panel: 400ms;    /* paneles, revelados al hacer scroll */
  --dur-enfasis: 500ms;  /* momentos únicos: héroe, revelado de titular */
  --ease-salida: cubic-bezier(.22, 1, .36, 1);
  --ease-rebote: cubic-bezier(.34, 1.36, .64, 1);
  --ease-rebote-fuerte: cubic-bezier(.34, 3.85, .64, 1);
  --dist-micro: 4px;
  --dist-base: 8px;
  --dist-media: 12px;
  --blur-medio: 3px;
}
@media (max-width: 812px) { :root { --radio: 15px; --px: max(4vw, 18px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--hueso); }
html.js:not(.listo) { overflow: hidden; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--negro);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--azul); color: #fff; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.025em; line-height: 1.02; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--negro); color: #fff; padding: 8px 12px; z-index: 99; }
.saltar:focus { left: 8px; }

.micro, .etiqueta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-2);
  font-weight: 400;
}
.etiqueta { display: block; margin-bottom: 1rem; }
.inv .micro, .inv .etiqueta { color: var(--gris-3); }

/* ---------- precarga ---------- */
.precarga { position: fixed; inset: 0; z-index: 100; background: var(--negro); color: var(--hueso); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-panel) var(--ease-salida), opacity var(--dur-media) ease; }
html:not(.js) .precarga { display: none; }
.precarga--fuera { transform: translateY(-100%); opacity: .9; pointer-events: none; }
.precarga__barra { width: 96px; height: 14px; background: var(--gris); overflow: hidden; }
.precarga__barra span { display: block; height: 100%; width: 100%; background: var(--hueso); transform-origin: left; transform: scaleX(var(--p, 0)); }
.precarga__num { position: absolute; left: var(--px); bottom: 24px; font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- cabecera ---------- */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--px);
  transition: transform var(--dur-media) var(--ease-salida), background var(--dur-media) ease;
  mix-blend-mode: difference; color: #fff;
}
.cabecera .micro { color: rgba(255,255,255,.7); }
html.oculta-cabecera .cabecera { transform: translateY(-110%); }
.marca { font-weight: 500; font-size: 1.05rem; letter-spacing: .22em; }
.cabecera__centro { justify-self: center; }
@media (max-width: 720px) { .cabecera__centro { display: none; } .cabecera { grid-template-columns: 1fr auto; } }
.menu-boton {
  justify-self: end; width: 56px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: transform var(--dur-media) var(--ease-salida);
}
.menu-boton:hover { transform: scale(1.06); }
.menu-boton span { width: 6px; height: 6px; border-radius: 50%; background: #000; transition: transform var(--dur-media) var(--ease-salida), width var(--dur-media) ease; }
.menu-boton[aria-expanded="true"] span:first-child { transform: translateX(4px); }
.menu-boton[aria-expanded="true"] span:last-child { transform: translateX(-4px); }

/* ---------- menú a pantalla completa ---------- */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--negro); color: var(--hueso); opacity: 0; transition: opacity var(--dur-rapida) ease; }
.menu--abierto { opacity: 1; transition-duration: var(--dur-media); }
.menu__panel { height: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--px); padding: 120px var(--px) 48px; align-items: end; }
@media (max-width: 812px) { .menu__panel { grid-template-columns: 1fr; align-items: start; padding-top: 100px; overflow: auto; } }
.menu__col { display: flex; flex-direction: column; gap: .35rem; }
.menu__col > a { font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: baseline; gap: 1rem; transform: translateY(20px); opacity: 0; transition: transform var(--dur-panel) var(--ease-salida), opacity var(--dur-media) ease, color var(--dur-rapida); }
.menu--abierto .menu__col > a { transform: none; opacity: 1; }
.menu__col > a:nth-child(2) { transition-delay: calc(var(--dur-escalonado) * 1) }
.menu__col > a:nth-child(3) { transition-delay: calc(var(--dur-escalonado) * 2) }
.menu__col > a:nth-child(4) { transition-delay: calc(var(--dur-escalonado) * 3) }
.menu__col > a:nth-child(5) { transition-delay: calc(var(--dur-escalonado) * 4) }
.menu__col > a:nth-child(6) { transition-delay: calc(var(--dur-escalonado) * 5) }
.menu:not(.menu--abierto) .menu__col > a { transition-delay: 0ms; }
.menu__col > a::before { content: attr(data-num); font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--gris-3); }
.menu__col > a:hover { color: var(--verde); }
.menu__col .micro { color: var(--gris-3); margin-bottom: .6rem; }
.menu__col--meta a.menu__peq { font-size: 1.05rem; font-weight: 400; letter-spacing: 0; transform: none; opacity: 1; display: block; color: var(--hueso-2); }
.menu__col--meta a.menu__peq::before { content: none; }
.menu__col--meta a.menu__peq:hover { color: var(--verde); }

/* ---------- utilidades ---------- */
.principal { padding-top: 0; }
.seccion { padding: var(--py) var(--px); }
.tarjeta { border-radius: var(--radio); overflow: hidden; }
.inv { background: var(--negro); color: var(--hueso); }
.azulada { background: var(--azul); color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; gap: 14px; } }
.flecha { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.flecha::after { content: '→'; font-weight: 300; transition: transform var(--dur-media) var(--ease-salida); }
.flecha:hover::after { transform: translateX(6px); }
.boton {
  display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.5rem; border-radius: 999px;
  background: var(--negro); color: var(--hueso); font-weight: 500; font-size: .95rem; border: 1px solid var(--negro);
  transition: transform var(--dur-media) var(--ease-salida), background var(--dur-media) ease, color var(--dur-media) ease;
}
.boton:hover { transform: translateY(-2px); background: var(--azul); border-color: var(--azul); color: #fff; }
.boton--claro { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.boton--claro:hover { background: var(--verde); border-color: var(--verde); color: var(--negro); }
.boton--borde { background: transparent; color: inherit; border-color: currentColor; }
.boton--borde:hover { background: var(--negro); color: var(--hueso); border-color: var(--negro); }
.inv .boton--borde:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

/* ---------- revelado ---------- */
html.js .rev { opacity: 0; transform: translateY(var(--dist-media)); filter: blur(var(--blur-medio)); transition: opacity var(--dur-panel) ease var(--d, 0ms), transform var(--dur-panel) var(--ease-salida) var(--d, 0ms), filter var(--dur-panel) ease var(--d, 0ms); }
html.js .rev--visto { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { html.js .rev { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------- héroe ---------- */
.heroe { padding: 120px var(--px) 0; }
@media (max-width: 720px) { .heroe { padding-top: 96px; } }
.heroe__cab { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3vw; align-items: end; margin-bottom: 28px; }
@media (max-width: 900px) { .heroe__cab { grid-template-columns: 1fr; } }
.heroe h1 { max-width: 16ch; margin-bottom: 0; }
.heroe h1 .k { color: var(--azul); }
.heroe__lado p { color: var(--gris-2); font-size: 1.05rem; max-width: 32rem; margin-bottom: 1.2rem; }
.heroe__lado .acciones { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.heroe__tarjeta {
  position: relative; border-radius: var(--radio); overflow: hidden; background: var(--negro);
  aspect-ratio: 16 / 8.2; min-height: 380px; isolation: isolate;
}
@media (max-width: 720px) { .heroe__tarjeta { aspect-ratio: 4 / 5; min-height: 440px; } }
.heroe__tarjeta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #232636 0%, #0b0c10 60%); z-index: 0; }
.heroe__tarjeta.sin-3d::before { background: radial-gradient(120% 90% at 30% 20%, #1a2ffb 0%, #0b0c10 65%); }
#heroe-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity var(--dur-enfasis) ease; }
.heroe__tarjeta.con-3d #heroe-lienzo { opacity: 1; }
.heroe__capa { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 26px 30px; display: flex; flex-direction: column; justify-content: space-between; color: var(--hueso); }
.heroe__capa .fila { display: flex; justify-content: space-between; align-items: center; }
.heroe__capa .cruz { font-weight: 300; font-size: 1.3rem; line-height: 1; opacity: .8; }
.heroe__producto { display: inline-flex; align-items: center; gap: .7rem; pointer-events: auto; }
.heroe__producto .micro { color: var(--hueso-2); }
.heroe__estado { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: .74rem; color: var(--hueso-2); width: 260px; pointer-events: auto; }
@media (max-width: 720px) { .heroe__estado { display: none; } }
.heroe__estado div { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--linea-inv); }
.heroe__estado b { font-weight: 500; color: var(--hueso); }
.heroe__estado i { font-style: normal; color: var(--verde); }
.heroe__estado i.alerta { color: #ff4c41; }

/* ---------- franja de plazos ---------- */
.plazos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; padding: 28px var(--px) 0; }
@media (max-width: 900px) { .plazos { grid-template-columns: 1fr; } }
.plazos > div { border-top: 1px solid var(--linea); padding-top: 16px; }
.plazos .fecha { display: block; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 300; letter-spacing: -0.03em; margin: .4rem 0 .2rem; }
.plazos p { color: var(--gris-2); font-size: .95rem; margin: 0; }

/* ---------- objetos numerados ---------- */
.objeto { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2vw; padding: var(--py) var(--px) 0; }
@media (max-width: 1000px) { .objeto { grid-template-columns: 1fr; } }
.objeto__num b { display: block; font-size: clamp(4.5rem, 10vw, 9rem); font-weight: 300; letter-spacing: -0.05em; line-height: .85; }
.objeto__cuerpo h2 { max-width: 18ch; }
.objeto__cuerpo .intro { color: var(--gris-2); font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 44rem; }

/* ---------- bloques de color (fichas) ---------- */
.bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; padding: 32px var(--px) 0; }
@media (max-width: 900px) { .bloques { grid-template-columns: 1fr; gap: 14px; } }
.bloque { border-radius: var(--radio); padding: 30px 28px; min-height: 380px; display: flex; flex-direction: column; background: #fff; transition: transform var(--dur-panel) var(--ease-rebote-fuerte); }
.bloque:hover { transform: translateY(-6px); transition: transform var(--dur-media) var(--ease-salida); }
.bloque--negro { background: var(--negro); color: var(--hueso); }
.bloque--azul { background: var(--azul); color: #fff; }
.bloque--azul .micro, .bloque--negro .micro { color: rgba(255,255,255,.65); }
.bloque--azul .flecha:hover { color: var(--verde); }
.bloque h3 { margin-top: 1.4rem; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em; }
.bloque p { opacity: .82; font-size: .98rem; }
.bloque ul { margin: .4rem 0 0; padding-left: 1rem; opacity: .85; font-size: .95rem; }
.bloque li { margin-bottom: .35rem; }
.bloque .pie-bloque { margin-top: auto; padding-top: 1.4rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.precio { font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 300; letter-spacing: -0.03em; }
.precio small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: .2rem; }

/* ---------- tabla comparativa ---------- */
.tabla-envoltura { margin: 32px var(--px) 0; border-radius: var(--radio); background: #fff; overflow: hidden; }
.tabla-envoltura .scroll { overflow-x: auto; }
table.comp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 820px; }
.comp th, .comp td { padding: 1.05rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); color: var(--gris-2); }
.comp thead th { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); font-weight: 400; background: var(--hueso); }
.comp th[scope="row"] { color: var(--negro); font-weight: 500; width: 22%; }
.comp td.kenea { color: var(--negro); font-weight: 500; background: #eef0ff; }
.comp thead th.kenea { background: var(--azul); color: #fff; }
.comp tbody tr:last-child td, .comp tbody tr:last-child th { border-bottom: 0; }
.nota { font-size: .88rem; color: var(--gris-2); }
.nota--seccion { padding: 14px var(--px) 0; }

/* ---------- quiénes / honestidad ---------- */
.dos-paneles { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2vw; padding: 32px var(--px) 0; }
@media (max-width: 900px) { .dos-paneles { grid-template-columns: 1fr; } }
.panel { border-radius: var(--radio); padding: 34px 32px; }
.panel--blanco { background: #fff; }
.panel--negro { background: var(--negro); color: var(--hueso); }
.panel h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: 1rem; }
.panel p { color: var(--gris-2); }
.panel--negro p, .panel--negro li { color: var(--hueso-2); }
.panel ul { margin: 0; padding-left: 1rem; }
.panel li { margin-bottom: .55rem; }

/* ---------- FAQ ---------- */
.faq { margin: 32px var(--px) 0; border-radius: var(--radio); background: #fff; padding: 8px 32px; }
.faq details { border-bottom: 1px solid var(--linea); padding: 1.15rem 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--azul); transition: transform var(--dur-media) var(--ease-salida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--gris-2); margin: .8rem 0 0; max-width: 62rem; }

/* ---------- contacto (bloque azul grande) ---------- */
.contacto { margin: var(--py) var(--px) 0; border-radius: var(--radio); background: var(--azul); color: #fff; padding: clamp(40px, 6vw, 90px) clamp(28px, 5vw, 80px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 3vw; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.contacto .micro { color: rgba(255,255,255,.7); }
.contacto h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); max-width: 14ch; }
.contacto p { color: rgba(255,255,255,.85); max-width: 34rem; }
.contacto__correo { display: inline-block; font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: .15rem; margin: .8rem 0 1.4rem; word-break: break-all; transition: color .2s, border-color .2s; }
.contacto__correo:hover { color: var(--verde); border-color: var(--verde); }
.contacto ol { padding-left: 1.1rem; color: rgba(255,255,255,.85); }
.contacto li { margin-bottom: .5rem; }

/* ---------- prosa (guías y legal) ---------- */
.prosa { max-width: 52rem; padding: 150px var(--px) var(--py); margin: 0 auto; }
@media (max-width: 720px) { .prosa { padding-top: 110px; } }
.prosa h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); margin-bottom: 1.4rem; }
.prosa h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 2.8rem; }
.prosa h3 { margin-top: 1.8rem; }
.prosa p, .prosa li { font-size: 1.08rem; line-height: 1.65; color: var(--gris); }
.prosa p strong { color: var(--negro); }
.prosa .resumen { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; color: var(--negro); border-left: 3px solid var(--azul); padding-left: 1.2rem; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .95rem; background: #fff; border-radius: 14px; overflow: hidden; }
.prosa th, .prosa td { border-bottom: 1px solid var(--linea); padding: .75rem .9rem; text-align: left; vertical-align: top; color: var(--gris); }
.prosa th { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; background: var(--hueso-2); }
.prosa dl dt { font-weight: 500; margin-top: 1.1rem; color: var(--negro); }
.prosa dl dd { margin-left: 0; color: var(--gris); }
.prosa code { font-family: var(--mono); font-size: .88em; background: var(--hueso-2); padding: .1em .4em; border-radius: 6px; }
.prosa a { border-bottom: 1px solid var(--hueso-3); transition: border-color .2s, color .2s; }
.prosa a:hover { border-color: var(--azul); color: var(--azul); }
.prosa .boton { border-bottom: 0; margin-top: 1rem; }
.prosa .miga { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.prosa .miga a { border-bottom: 0; }
.prosa .miga span::before { content: '/'; margin-right: .6rem; }
.relacionadas { max-width: 52rem; margin: 0 auto; padding: 0 var(--px) var(--py); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .relacionadas { grid-template-columns: 1fr; } }
.relacionadas a { background: #fff; border-radius: 14px; padding: 18px 20px; display: block; transition: transform var(--dur-panel) var(--ease-rebote-fuerte), background var(--dur-media); }
.relacionadas a:hover { transition-duration: var(--dur-media); transition-timing-function: var(--ease-salida); transform: translateY(-4px); background: var(--negro); color: var(--hueso); }
.relacionadas a b { display: block; font-weight: 500; margin-top: .5rem; letter-spacing: -0.01em; }

/* ---------- pie ---------- */
.pie { margin-top: var(--py); padding: 0 var(--px) 32px; }
.pie__gigante { font-size: clamp(5rem, 19.5vw, 22rem); font-weight: 300; letter-spacing: -0.05em; line-height: .85; color: var(--negro); border-top: 1px solid var(--linea); padding-top: 24px; user-select: none; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2vw; padding: 40px 0; border-top: 1px solid var(--linea); margin-top: 24px; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr; gap: 28px; } }
.pie nav a { display: block; margin-top: .6rem; color: var(--gris); transition: color .2s; }
.pie nav a:hover { color: var(--azul); }
.pie nav .micro { display: block; }
.pie__correo { display: inline-block; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: -0.02em; margin: .6rem 0 1rem; border-bottom: 1px solid var(--negro); }
.pie__correo:hover { color: var(--azul); border-color: var(--azul); }
.pie__eslogan { color: var(--gris-2); }
.pie__legal { border-top: 1px solid var(--linea); padding-top: 18px; }
.pie__legal p { font-size: .8rem; color: var(--gris-2); max-width: 70rem; }

/* ---------- 404 ---------- */
.no-encontrado { padding: 160px var(--px) 80px; }
.no-encontrado b { display: block; font-size: clamp(6rem, 20vw, 16rem); font-weight: 300; letter-spacing: -0.06em; line-height: .85; }

/* ---------- producto KeneaFactu ---------- */
.producto-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; letter-spacing: -0.01em; }
.producto-logo svg { width: 28px; height: 28px; }
.producto-logo .factu { color: var(--azul); }
.inv .producto-logo .factu, .heroe__tarjeta .producto-logo .factu { color: var(--verde); }
.ritmo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; padding: 32px var(--px) 0; }
@media (max-width: 900px) { .ritmo { grid-template-columns: 1fr 1fr; } }
.ritmo div { border-top: 1px solid var(--linea); padding-top: 14px; }
.ritmo b { display: block; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 300; letter-spacing: -0.03em; margin: .3rem 0; }
.ritmo p { color: var(--gris-2); font-size: .92rem; margin: 0; }

/* ======================= v3 · capa "lusion" ======================= */

/* cursor propio: un punto que crece sobre enlaces. Solo con ratón fino. */
.cursor { position: fixed; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--negro); pointer-events: none; z-index: 200; transform: translate(-50%, -50%) scale(1); transition: transform var(--dur-media) var(--ease-salida), background var(--dur-media) ease, opacity var(--dur-media) ease; opacity: 0; mix-blend-mode: difference; }
html.con-cursor .cursor { opacity: 1; }
html.con-cursor body { cursor: none; }
html.con-cursor a, html.con-cursor button, html.con-cursor summary { cursor: none; }
.cursor--enlace { transform: translate(-50%, -50%) scale(4); background: #fff; }
.cursor--texto { transform: translate(-50%, -50%) scale(.5); }
@media (pointer: coarse) { .cursor { display: none; } }

/* texto partido en palabras: cada palabra sube desde abajo, escalonada */
.partir .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.partir .w > span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-enfasis) var(--ease-salida); transition-delay: calc(min(var(--i), 7) * var(--dur-escalonado)); }
.partir.partido .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .partir .w > span { transform: none; transition: none; } }

/* marquesina */
.marquesina { overflow: hidden; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 14px 0; margin-top: 28px; white-space: nowrap; }
.marquesina__pista { display: inline-flex; gap: 3rem; animation: desplazar 40s linear infinite; will-change: transform; }
.marquesina__pista span { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.marquesina__pista span::after { content: '•'; margin-left: 3rem; color: var(--azul); }
@keyframes desplazar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquesina__pista { animation: none; } }

/* enfoque: declaración grande, a lo "Bold ideas, brought to life" */
.enfoque { padding: var(--py) var(--px) 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2vw; align-items: start; }
@media (max-width: 1000px) { .enfoque { grid-template-columns: 1fr; } }
.enfoque h2 { font-size: clamp(2.4rem, 6vw, 6rem); letter-spacing: -0.035em; line-height: .98; max-width: 14ch; }
.enfoque p { color: var(--gris-2); font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 40rem; margin-top: 1.4rem; }

/* obras: cuadrícula de tarjetas grandes con gradiente, como "Featured work" */
.obras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; padding: 32px var(--px) 0; }
@media (max-width: 900px) { .obras { grid-template-columns: 1fr; gap: 14px; } }
.obra { position: relative; border-radius: var(--radio); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 28px; color: #fff; isolation: isolate; transition: transform var(--dur-panel) var(--ease-rebote-fuerte); }
.obra:hover { transform: translateY(-6px); transition: transform var(--dur-media) var(--ease-salida); }
.obra--ancha { grid-column: 1 / -1; min-height: 520px; }
.obra__fondo { position: absolute; inset: 0; z-index: -1; transition: transform var(--dur-panel) var(--ease-salida); }
.obra:hover .obra__fondo { transform: scale(1.04); }
.obra--negra .obra__fondo { background: radial-gradient(120% 100% at 20% 10%, #2b2e3a 0%, #0b0c10 65%); }
.obra--azul .obra__fondo { background: radial-gradient(120% 100% at 80% 0%, #4c5cff 0%, #1a2ffb 45%, #071bdf 100%); }
.obra--hueso .obra__fondo { background: radial-gradient(120% 100% at 10% 100%, #ffffff 0%, #e4e6ef 60%, #d6d9e6 100%); }
.obra--hueso { color: var(--negro); }
.obra__num { position: absolute; top: 26px; left: 28px; font-size: clamp(3rem, 6vw, 5rem); font-weight: 200; letter-spacing: -0.05em; line-height: 1; opacity: .9; }
.obra__tags { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: .8rem; }
.obra h3 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; max-width: 16ch; margin-bottom: .6rem; }
.obra p { opacity: .85; max-width: 34rem; margin-bottom: 1.2rem; }
.obra .flecha { font-weight: 500; }
.obra--azul .flecha:hover { color: var(--verde); }
/* figura decorativa: anillos finos que sugieren un sistema */
.obra__figura { position: absolute; right: -8%; top: -10%; width: 60%; aspect-ratio: 1; z-index: -1; opacity: .35; transition: transform var(--dur-panel) var(--ease-salida); }
.obra:hover .obra__figura { transform: rotate(12deg) scale(1.05); }
.obra__figura circle { fill: none; stroke: currentColor; stroke-width: .6; }

/* CTA final con degradado, a lo "Let's talk" */
.contacto { background: radial-gradient(120% 120% at 100% 0%, #4c5cff 0%, #1a2ffb 40%, #0b0c10 100%); }

/* parallax suave de la tarjeta del héroe */
.heroe__tarjeta { will-change: transform; }

/* transición entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--dur-rapida) ease-out both salir; }
::view-transition-new(root) { animation: var(--dur-panel) var(--ease-salida) both entrar; }
@keyframes salir { to { opacity: 0; transform: translateY(calc(var(--dist-base) * -1)); } }
@keyframes entrar { from { opacity: 0; transform: translateY(var(--dist-media)); filter: blur(var(--blur-medio)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* pie: fila superior con dirección y redes, como el de referencia */
.pie__contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; padding: 32px 0; border-top: 1px solid var(--linea); }
@media (max-width: 900px) { .pie__contacto { grid-template-columns: 1fr; } }
.pie__contacto .micro { display: block; margin-bottom: .6rem; }
.pie__contacto a, .pie__contacto p { color: var(--gris); margin: 0 0 .4rem; display: block; }
.pie__contacto a:hover { color: var(--azul); }

/* ======================= formularios y área de cliente ======================= */
.formulario-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4vw; padding: 150px var(--px) var(--py); align-items: start; }
@media (max-width: 1000px) { .formulario-pagina { grid-template-columns: 1fr; gap: 2rem; padding-top: 110px; } }
.formulario-pagina__cab h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.formulario-pagina__cab p { color: var(--gris-2); max-width: 34rem; }
.formulario { background: #fff; border-radius: var(--radio); padding: clamp(24px, 3vw, 40px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.campo { margin-bottom: 1.1rem; }
.campo--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .campo--2 { grid-template-columns: 1fr; } }
.campo label, .formulario label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); margin-bottom: .45rem; }
.campo label .micro { text-transform: none; letter-spacing: .06em; color: var(--gris-3); }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario input[type="password"], .formulario select, .formulario textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--negro); background: var(--hueso);
  border: 1px solid transparent; border-bottom: 1px solid var(--hueso-3); border-radius: 10px 10px 0 0;
  padding: .8rem .9rem; transition: border-color .2s ease, background .2s ease;
}
.formulario textarea { resize: vertical; min-height: 7rem; border-radius: 10px; border: 1px solid var(--hueso-3); }
.formulario select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris-2) 50%), linear-gradient(135deg, var(--gris-2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-bottom-color: var(--azul); background: #fff; }
.campo--error input, .campo--error select, .campo--error textarea { border-bottom-color: #d92b2b; background: #fff5f5; }
.consentimiento { display: grid; grid-template-columns: 20px 1fr; gap: .8rem; align-items: start; margin: 1.4rem 0; }
.consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); }
.consentimiento span { font-family: var(--sans); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--gris-2); }
.consentimiento a { border-bottom: 1px solid var(--hueso-3); }
.consentimiento.campo--error span { color: #d92b2b; }
.formulario__acciones { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; }
.formulario__acciones button { border: 0; font-family: inherit; cursor: pointer; }
.formulario__aviso { border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.4rem; font-size: .95rem; background: #fff5f5; color: #a11; border: 1px solid #f3c9c9; }
.formulario__aviso[data-tipo="ok"] { background: #f2fbf4; color: #16653b; border-color: #cbe9d5; }
.pestanas { display: flex; gap: .5rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--hueso-3); }
.pestana { background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .2rem; margin-right: 1.2rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-2); cursor: pointer; }
.pestana--activa { color: var(--negro); border-bottom-color: var(--azul); }
.cuenta__cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.solicitudes { display: grid; gap: .6rem; margin: 1rem 0 1.4rem; }
.solicitud { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--hueso); border-radius: 12px; padding: .9rem 1.1rem; }
.solicitud b { display: block; font-weight: 500; }
.solicitud span:not(.micro):not(.chip-estado) { display: block; font-size: .9rem; color: var(--gris-2); }
.chip-estado { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--hueso-3); color: var(--gris-2); white-space: nowrap; }
.chip-estado[data-estado="respondida"] { color: #16653b; border-color: #cbe9d5; }

/* ======================= v4 · color y menú ======================= */

/* Paleta ampliada: el azul eléctrico manda, pero necesita compañía para que
   una página larga no sea blanco y azul a secas. Violeta y cian abren rango
   sin salirse del mismo frío; el ámbar solo aparece en avisos. */
:root {
  --violeta: #7b3ff2;
  --cian: #00d3e0;
  --ambar: #ff9d2e;
  --rosa: #ff5c8a;
  --degradado-frio: linear-gradient(135deg, #1a2ffb 0%, #7b3ff2 55%, #00d3e0 100%);
  --degradado-noche: radial-gradient(120% 120% at 15% 10%, #2b2e3a 0%, #0b0c10 60%);
  --degradado-marca: linear-gradient(100deg, #1a2ffb 0%, #7b3ff2 40%, #00d3e0 80%);
}

/* Texto con el degradado de marca, para una palabra por página como mucho. */
.tinte {
  background: var(--degradado-marca);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .tinte { color: var(--azul); background: none; } }

/* Filo de color: una línea de 3px que separa bloques y da ritmo cromático. */
.filo { height: 3px; background: var(--degradado-frio); border: 0; margin: 0; }

/* Las tres líneas de negocio, cada una con su color propio. Así el usuario
   distingue KeneaFactu, IA e Integración de un vistazo en toda la web. */
.obra--negra .obra__fondo { background: var(--degradado-noche); }
.obra--azul .obra__fondo { background: linear-gradient(145deg, #4c5cff 0%, #1a2ffb 45%, #071bdf 100%); }
.obra--hueso .obra__fondo { background: linear-gradient(145deg, #ffffff 0%, #e8eaf6 55%, #d6d9e6 100%); }
.obra--violeta { color: #fff; }
.obra--violeta .obra__fondo { background: linear-gradient(145deg, #9a5cff 0%, #7b3ff2 45%, #4b1fb0 100%); }
.obra--cian { color: var(--negro); }
.obra--cian .obra__fondo { background: linear-gradient(145deg, #8ff5fb 0%, #00d3e0 55%, #00a3b5 100%); }
.obra--violeta .micro, .obra--violeta .obra__tags { color: rgba(255,255,255,.8); }
.obra--cian .micro, .obra--cian .obra__tags { color: rgba(11,12,16,.65); }

/* El numeral de cada obra, en el color de su línea y con más presencia. */
.obra__num { font-weight: 200; opacity: 1; mix-blend-mode: soft-light; }
.obra--hueso .obra__num, .obra--cian .obra__num { mix-blend-mode: normal; color: rgba(11,12,16,.18); }

/* Bloques: uno de cada tres se tiñe, para que la rejilla no sea un muro blanco. */
.bloque--violeta { background: linear-gradient(160deg, #7b3ff2 0%, #4b1fb0 100%); color: #fff; }
.bloque--cian { background: linear-gradient(160deg, #00d3e0 0%, #00a3b5 100%); color: var(--negro); }
.bloque--violeta .micro { color: rgba(255,255,255,.7); }
.bloque--cian .micro { color: rgba(11,12,16,.6); }
.bloque--violeta .flecha:hover, .bloque--negro .flecha:hover { color: var(--cian); }

/* Franja de plazos: cada fecha con su acento, de menos a más urgente. */
.plazos > div:nth-child(1) { border-top-color: var(--cian); border-top-width: 2px; }
.plazos > div:nth-child(2) { border-top-color: var(--violeta); border-top-width: 2px; }
.plazos > div:nth-child(3) { border-top-color: var(--ambar); border-top-width: 2px; }
.plazos .fecha { background: var(--degradado-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .plazos .fecha { color: var(--azul); } }

/* Contacto: el degradado ya no es plano azul→negro. */
.contacto { background: linear-gradient(135deg, #1a2ffb 0%, #7b3ff2 45%, #0b0c10 100%); }

/* ---------- menú, versión rica ---------- */
.menu { background: var(--negro); }
.menu::before {
  /* Aurora de fondo: se mueve despacio y da profundidad al negro. */
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 44% at 20% 25%, rgba(26,47,251,.55) 0%, transparent 70%),
    radial-gradient(34% 40% at 78% 30%, rgba(123,63,242,.5) 0%, transparent 70%),
    radial-gradient(40% 46% at 55% 85%, rgba(0,211,224,.35) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0; transition: opacity var(--dur-panel) ease;
  animation: aurora 22s ease-in-out infinite alternate;
}
.menu--abierto::before { opacity: 1; }
@keyframes aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .menu::before { animation: none; } }
.menu__panel { position: relative; z-index: 1; }

/* Cada entrada del menú toma el color de su línea al pasar por encima, y el
   resto se apaga: el ojo va a una sola cosa. */
.menu__col > a { position: relative; padding-block: .1rem; transition: transform var(--dur-panel) var(--ease-salida), opacity var(--dur-media) ease, color var(--dur-media) ease; }
.menu__col:hover > a { opacity: .38; }
.menu__col > a:hover { opacity: 1; }
.menu__col > a[data-num="001"]:hover { color: var(--verde); }
.menu__col > a[data-num="002"]:hover { color: var(--violeta); }
.menu__col > a[data-num="003"]:hover { color: var(--cian); }
.menu__col > a[data-num="004"]:hover { color: #7f8cff; }
.menu__col > a[data-num="005"]:hover { color: var(--ambar); }
/* Subrayado que crece desde la izquierda. */
.menu__col > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .05em; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-media) var(--ease-salida);
}
.menu__col > a:hover::after { transform: scaleX(1); }
.menu__col--meta a.menu__peq { position: relative; padding-left: 1.1rem; }
.menu__col--meta a.menu__peq::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gris-2); transition: background var(--dur-media) ease, transform var(--dur-media) var(--ease-salida);
}
.menu__col--meta a.menu__peq:hover::before { background: var(--cian); transform: scale(1.6); }

/* Botón del menú: al abrirse pasa a los colores de marca. */
.menu-boton { background: #fff; transition: transform var(--dur-media) var(--ease-salida), background var(--dur-media) ease; }
.menu-boton[aria-expanded="true"] { background: var(--degradado-marca); }
.menu-boton[aria-expanded="true"] span { background: #fff; }

/* ---------- detalles de color repartidos ---------- */
.etiqueta::after { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--cian); vertical-align: middle; margin-left: .6rem; }
.enfoque h2 strong { font-weight: 400; background: var(--degradado-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.comp thead th.kenea { background: var(--degradado-marca); }
.comp td.kenea { background: linear-gradient(90deg, rgba(26,47,251,.09) 0%, rgba(123,63,242,.05) 60%, transparent 100%); }
.faq summary::after { color: var(--violeta); }
.pie__gigante { background: var(--degradado-marca); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .92; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-bottom-color: var(--violeta); }
.pestana--activa { border-bottom-color: var(--violeta); }
.boton:hover { background: var(--degradado-marca); border-color: transparent; }
.marquesina__pista span:nth-child(3n)::after { color: var(--violeta); }
.marquesina__pista span:nth-child(3n+1)::after { color: var(--cian); }