/* Nordik FX: lo que el estilo nativo de Elementor no puede expresar.
   Se engancha a los atributos data-nk (identidad del elemento) y data-fx (efecto) y a las clases
   globales nk-*. Los colores y fuentes salen de las variables globales del kit (--black, --green...).
   Contrato completo en wordpress/SISTEMA.md.
   Se carga en el <head> desde el código personalizado «Nordik FX: fuentes y estilos (head)». */

/* Bricolage Grotesque variable (ejes opsz y wdth, para font-stretch 75%) con nombre propio:
   Elementor carga además la versión estática de Google Fonts con el mismo nombre de familia, que no
   tiene esos ejes y gana al emparejar pesos. Con este alias el navegador usa siempre la variable. */
@font-face {
  font-family: "Nordik Bricolage"; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-aNGfyOPPtQPw.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nordik Bricolage"; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y996as8bTXq_nANBjzKo3IeZx8z6up5L-iNGfyOPPs.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* las variables globales de Elementor guardan un solo nombre de fuente; aquí se completan con la
   pila de respaldo del original (las runas caen en Noto Sans Runic) */
html:root {
  --f-impact: "Konkhmer Sleokchher", "Nordik Bricolage", "Bricolage Grotesque", "Noto Sans Runic", ui-sans-serif, system-ui, sans-serif;
  --f-display: "Nordik Bricolage", "Bricolage Grotesque", "Noto Sans Runic", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, monospace;
  --f-rune: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nk-rune: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", sans-serif;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--black, #1a1a1a);
  color: var(--black, #1a1a1a);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* en móvil nada puede ensanchar la página (las filas de «a medida» entran desplazadas 40px):
   el clip del body no siempre llega al viewport, así que se recorta también en html y en la sección */
html { overflow-x: clip; }
body .elementor [data-nk="diff"] { overflow-x: clip; }
::selection { background: var(--green, #0eeed4); color: var(--black, #1a1a1a); }
:focus-visible { outline: 2px solid var(--green, #0eeed4); outline-offset: 4px; }
/* los textos atómicos traen cursor: pointer; el texto normal hereda */
body .elementor .e-heading-base, body .elementor .e-paragraph-base { cursor: inherit; }
body .elementor a.e-div-block-base, body .elementor a.e-flexbox-base { text-decoration: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* runas y letras que se descifran */
.nk-ch { display: inline-block; }
.is-rune { font-family: var(--nk-rune) !important; display: inline-block; text-align: center; }

/* ---------- icono K (e-svg con la clase nk-k) ---------- */
body .elementor .nk-k svg { display: block; width: 100%; height: 100%; }
body .elementor .nk-k path { transition: fill 0.3s; }
body .elementor .nk-talk .nk-k svg,
body .elementor [data-nk="hero-scroll-k"] svg { stroke-width: 30; }
body .elementor [data-nk="foot-nav-k"] svg { stroke-width: 34; }
body .elementor [data-nk="svc-k"] svg { stroke-width: 18; }
body .elementor [data-nk="plist-k"] svg { stroke-width: 20; }
body .elementor [data-nk="row-k"] svg { stroke-width: 22; }
body .elementor [data-nk="row-k"] path { fill: currentColor; }

/* ---------- píldora verde: barrido crema al pasar ---------- */
body .elementor .nk-pill { isolation: isolate; transition: color 0.4s var(--ease), transform 0.2s var(--ease); }
body .elementor .nk-pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--cream, #f4f1ec);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
body .elementor .nk-pill:hover::before { transform: none; }

/* ---------- barra ---------- */
body .elementor [data-nk="nav"] { transition: transform 0.6s var(--ease), border-radius 0.4s, border-color 0.4s, background-color 0.4s, backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s; }
body .elementor [data-nk="nav"].is-hidden { transform: translateY(-140%); }
/* cristal mientras la barra está sobre el hero; al bajar vuelve a negro sólido */
body .elementor [data-nk="nav"].is-glass {
  background-color: rgba(26, 26, 26, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.fm-open body .elementor [data-nk="nav"].is-glass { background-color: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fm-open body .elementor [data-nk="nav"] { border-color: transparent; }
.fm-open body .elementor [data-nk="burger-line"] { width: 100%; top: 4.25px; transition: transform 0.5s var(--ease), top 0.5s var(--ease), width 0.4s; }
.fm-open body .elementor [data-nk="burger-line"]:first-child { transform: rotate(45deg); }
.fm-open body .elementor [data-nk="burger-line"]:last-child { transform: rotate(-45deg); }
body .elementor [data-nk="burger-line"] { transition: transform 0.5s var(--ease), top 0.5s var(--ease), width 0.4s; }

/* ---------- menú a pantalla completa ---------- */
body .elementor [data-nk="fm"] {
  position: fixed; inset: 0; z-index: 95; width: auto; max-width: none; margin: 0;
  clip-path: circle(0% at var(--fx, 95%) var(--fy, 40px));
  visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
}
body .elementor [data-nk="fm"].is-open { visibility: visible; }
.fm-open, .fm-open body { overflow: hidden; }
body .elementor [data-nk="fm-links"]:hover [data-nk="fm-link"]:not(:hover) { opacity: 0.32; }
body .elementor [data-nk="fm-link"] .nk-ch { text-align: center; overflow: visible; }
body .elementor [data-nk="fm-link"] .is-rune { font-weight: 400; font-stretch: 100%; color: var(--green, #0eeed4); }
body .elementor [data-nk="fm-link"][aria-current="page"]::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-left: 6px; align-self: center; background: var(--green, #0eeed4);
}
body .elementor [data-nk="fm-sub-link"]:hover [data-nk="fm-r"],
body .elementor [data-nk="fm-sub-link"]:hover [data-nk="fm-name"],
body .elementor [data-nk="fm-sub-link"]:focus-visible [data-nk="fm-r"],
body .elementor [data-nk="fm-sub-link"]:focus-visible [data-nk="fm-name"] { transform: translateX(8px); }
body .elementor [data-nk="fm-sub-link"]:hover [data-nk="fm-r"] { color: var(--green, #0eeed4); }
body .elementor [data-nk="fm-sub-link"]:hover [data-nk="fm-sub-k"] path { fill: currentColor; }
body .elementor [data-nk="fm-sub-link"][aria-current="page"] [data-nk="fm-name"] { color: var(--green, #0eeed4); }
@media (max-width: 1100px) {
  body .elementor [data-nk="fm"] { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  body .elementor [data-nk="fm-main"] { grid-template-columns: minmax(0, 1fr); align-content: start; }
  body .elementor [data-nk="fm-preview"] { display: none; }
}
/* dentro del editor de Elementor el menú se queda en el flujo para poder editarlo */
.elementor-editor-active .elementor [data-nk="fm"] { position: relative; clip-path: none; visibility: visible; z-index: auto; }

/* ---------- hero ---------- */
body .elementor [data-nk="hero-img"] { will-change: transform; }
.nk-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.nk-fog {
  position: absolute; left: -25%; width: 150%; top: 30%; height: 80%;
  background-size: 100% 100%; background-repeat: no-repeat;
  opacity: 0.85; will-change: transform, opacity;
}
.nk-fog--b { top: 42%; }
.nk-fog--c { top: 52%; height: 60%; }
body .elementor [data-nk="hero-claim"] em { color: var(--green, #0eeed4); font-style: normal; }
/* cursor verde y chevron: con CSS mientras no hay JS; el JS los cambia por elementos animables */
body .elementor [data-nk="hero-claim"]::before,
.nk-caret {
  content: ""; position: absolute; left: 0; top: 0.14em; margin: 0;
  display: inline-block; width: 0.09em; height: 0.82em; background: var(--green, #0eeed4);
}
body .elementor [data-nk="hero-claim"]::after,
.nk-chev {
  content: ""; display: inline-block; width: 0.32em; height: 0.32em;
  margin-left: 0.3em; vertical-align: 0.12em;
  border-left: 0.07em solid var(--green, #0eeed4); border-bottom: 0.07em solid var(--green, #0eeed4);
  transform: rotate(45deg);
}
body .elementor [data-nk="hero-claim"].is-fx::before,
body .elementor [data-nk="hero-claim"].is-fx::after { content: none; }

/* ---------- cinta ---------- */
body .elementor [data-nk="band-track"] { will-change: transform; }
body .elementor [data-nk="band-track"] > * { display: flex; align-items: center; }
body .elementor [data-nk="band-track"] > *::after {
  content: ""; display: inline-block; flex: none; width: 0.38em; height: 0.38em; margin: 0 1.1em;
  border-left: 0.11em solid; border-bottom: 0.11em solid; transform: rotate(45deg);
}

/* ---------- manifiesto ---------- */
body .elementor [data-nk="mf-title"] > span { display: block; white-space: nowrap; }
body .elementor [data-nk="mf-title"] > span + span { text-align: right; }
body .elementor [data-nk="mf-title"] i {
  font-style: normal; font-weight: 400; font-size: 0.92em; font-stretch: 100%;
  font-family: var(--nk-rune); color: var(--green, #0eeed4); -webkit-text-stroke: 0.02em var(--black, #1a1a1a);
}
body .elementor [data-nk="mf-sub"] b { display: block; margin-bottom: 10px; font-size: 16px; color: var(--black, #1a1a1a); font-weight: 600; }
.nk-motion body .elementor [data-nk="mf-text"] .mword { opacity: 0; }

/* fichas de runa: en la frase (span) y la fila grande (.nk-mtile, la crea el JS) */
body .elementor [data-nk="mf-text"] > span,
.nk-tag {
  display: inline-grid; place-items: center;
  width: 1.5em; height: 1.5em; margin: 0 0.06em;
  vertical-align: middle; position: relative; top: -0.08em; z-index: 2;
  border-radius: 0.24em;
  font-family: var(--nk-rune); font-weight: 400; font-size: 0.62em; line-height: 1; letter-spacing: 0;
  will-change: transform;
}
.nk-mtile {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: var(--tile, 240px); height: var(--tile, 240px);
  border-radius: 12%;
  font-family: var(--nk-rune); font-size: calc(var(--tile, 240px) * 0.42); line-height: 1;
  rotate: 0deg;
}
.nk-mtile.nk-tag--round { border-radius: 50%; }
body .elementor [data-nk="mf-text"] > span:nth-of-type(1), .nk-tag--black { background: var(--black, #1a1a1a); color: var(--green, #0eeed4); rotate: -6deg; }
body .elementor [data-nk="mf-text"] > span:nth-of-type(2), .nk-tag--green { background: var(--green, #0eeed4); color: var(--black, #1a1a1a); rotate: 4deg; }
body .elementor [data-nk="mf-text"] > span:nth-of-type(3), .nk-tag--round { background: var(--black, #1a1a1a); color: var(--cream, #f4f1ec); border-radius: 50%; rotate: 8deg; }
body .elementor [data-nk="mf-text"] > span:nth-of-type(4) { background: var(--green, #0eeed4); color: var(--black, #1a1a1a); rotate: -8deg; }
.nk-tag--sq { rotate: -8deg; }
body .elementor [data-nk="mf-text"] > span:nth-of-type(5), .nk-tag--black.nk-tag--round { background: var(--black, #1a1a1a); color: var(--green, #0eeed4); border-radius: 50%; rotate: 5deg; }
.nk-mtile.nk-tag--round:not(.nk-tag--black) { border-radius: 50%; }

/* ---------- pilares ---------- */
body .elementor [data-nk="tab"].is-active { color: var(--black, #1a1a1a); }
body .elementor [data-nk="panel-big"] > span {
  display: inline-block; margin-right: 0.4em; font-family: var(--nk-rune); font-weight: 400;
  color: var(--green, #0eeed4); -webkit-text-stroke: 1px var(--black, #1a1a1a);
}
body .elementor [data-nk="panels"]:not(.is-ready) > [data-nk="panel"]:not(:first-child),
body .elementor [data-nk="panel"][hidden] { display: none; }
body .elementor [data-nk="pillars-media"] > img { opacity: 0; transition: opacity 0.6s; }
body .elementor [data-nk="pillars-media"] > img.is-active,
body .elementor [data-nk="pillars-media"]:not(.is-ready) > img:first-child { opacity: 1; }

/* ---------- servicios ---------- */
/* el kit da al cuerpo un interlineado en px; la descripción va a 15 px y en el original hereda 1.6 */
body .elementor [data-nk="svc-desc"] { line-height: 1.6; }
@media (hover: hover) and (min-width: 761px) {
  body .elementor [data-nk="svc-desc"] { opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--ease); }
  body .elementor [data-nk="svc-link"]:hover [data-nk="svc-desc"],
  body .elementor [data-nk="svc-link"]:focus-visible [data-nk="svc-desc"] { opacity: 1; transform: none; }
  body .elementor [data-nk="svc-title"] { transition: transform 0.6s var(--ease); }
  body .elementor [data-nk="svc-link"]:hover [data-nk="svc-title"] { transform: translateX(14px); }
  body .elementor [data-nk="svc-k"] { transition: transform 0.6s var(--ease); }
  body .elementor [data-nk="svc-link"]:hover [data-nk="svc-k"],
  body .elementor [data-nk="svc-link"]:focus-visible [data-nk="svc-k"] { transform: scaleX(-1) translateX(6px); }
  body .elementor [data-nk="svc-link"]:hover [data-nk="svc-k"] path,
  body .elementor [data-nk="svc-link"]:focus-visible [data-nk="svc-k"] path { fill: currentColor; }
  body .elementor [data-nk="svc-link"]:hover [data-nk="svc-rune"] { color: var(--green, #0eeed4); }
}

/* ---------- proyectos ---------- */
body .elementor [data-nk="fan-card"]:hover [data-nk="fan-img"] { filter: none; }
body .elementor [data-nk="plist-link"] { transition: padding 0.4s var(--ease); }
body .elementor [data-nk="plist-link"]:hover [data-nk="plist-img"] { filter: none; }
body .elementor [data-nk="plist-k"] { transition: color 0.3s; }
body .elementor [data-nk="plist-link"]:hover [data-nk="plist-k"] { color: var(--green, #0eeed4); }
body .elementor [data-nk="plist-link"]:hover [data-nk="plist-k"] path { fill: currentColor; }

/* ---------- proceso ---------- */
body .elementor [data-nk="step"]::before {
  content: ""; position: absolute; left: 0; top: -7px;
  width: 12px; height: 12px; background: var(--line-light, rgba(26,26,26,0.12));
  transition: background 0.4s;
}
body .elementor [data-nk="step"].is-on::before { background: var(--green, #0eeed4); }
body .elementor [data-nk="step-num"] {
  color: transparent; -webkit-text-stroke: 1.5px var(--black, #1a1a1a);
  background: linear-gradient(90deg, var(--green, #0eeed4) 0 calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100%) 100%);
  -webkit-background-clip: text; background-clip: text;
}
body .elementor [data-nk="step"].is-on [data-nk="step-num"] { -webkit-text-stroke-color: var(--green, #0eeed4); }

/* ---------- cómo empezar ---------- */
body .elementor [data-nk="start-sub"]::before,
body .elementor [data-nk="start-sub"]::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.25; }
body .elementor [data-nk="switch-btn"].is-active { color: var(--black, #1a1a1a); }
body .elementor [data-nk="plans"]:not(.is-ready) > [data-nk="plan"]:not(:first-child),
body .elementor [data-nk="plan"][hidden] { display: none; }

/* ---------- pie ---------- */
body .elementor [data-nk="foot-talk"] { translate: -50% -50%; }

/* ---------- teléfono (760px, como el original) ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  body .elementor [data-nk="mf-title"] > span { white-space: normal; }
  body .elementor [data-nk="mf-title"] > span + span { text-align: left; }
  body .elementor [data-nk="mf-sub"] br { display: none; }
  body .elementor [data-nk="tab"].is-active { background: var(--cream, #f4f1ec); }
  body .elementor [data-nk="step"]::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .elementor .nk-pill, body .elementor .nk-pill::before, body .elementor [data-nk="nav"],
  body .elementor [data-nk="foot-talk"], body .elementor [data-nk="svc-title"], body .elementor [data-nk="svc-k"],
  body .elementor [data-nk="burger-line"], body .elementor [data-nk="fm-preview-img"] { transition: none; }
}

/* ---------- páginas de servicio (diseno-web, seo-local...) ---------- */
/* Elementor da a los contenedores flexbox (.e-con) «transition: transform 0.4s». Con ella, el
   ScrollTrigger.refresh() lee la posición de salida a medio camino y el bloque se queda movido
   (migas y botones a 26-30 px). Los contenedores que anima GSAP van sin esa transición. */
body .elementor .e-con[data-fx],
body .elementor [data-fx~="rise-kids"] > .e-con { --e-con-transform-transition-duration: 0s; }
/* migas: K en verde con trazo grueso */
body .elementor [data-nk="crumbs-k"] svg { stroke-width: 30; }
/* título de cabecera: la runa fija (<span> en el párrafo) en verde; las letras se descifran (data-fx="decode") */
body .elementor [data-nk="sp-title"] span:not(.nk-ch),
body .elementor [data-nk="sp-title"] i {
  display: inline-block; font-style: normal; font-weight: 400; font-stretch: 100%; font-size: 0.92em;
  font-family: var(--nk-rune); color: var(--green, #0eeed4);
}
/* claim: cursor verde fijo delante del texto */
body .elementor [data-nk="sp-claim"]::before {
  content: ""; position: absolute; left: 0; top: 0.14em;
  display: inline-block; width: 0.09em; height: 0.82em; background: var(--green, #0eeed4);
}
/* enlace de texto «o escríbenos por el formulario»: el subrayado verde lo lleva el <a> del widget */
body .elementor [data-nk="sp-textlink"] a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--green, #0eeed4);
  text-decoration-thickness: 1.5px; text-underline-offset: inherit;
}
/* tarjetas de proyecto: la foto se colorea y crece; la K se rellena y avanza */
body .elementor [data-nk="spw-img"] { transition: filter 0.6s var(--ease), transform 0.9s var(--ease); }
body .elementor [data-nk="spw-card"]:hover [data-nk="spw-img"],
body .elementor [data-nk="spw-card"]:focus-visible [data-nk="spw-img"] { filter: none; transform: scale(1.04); }
body .elementor [data-nk="spw-go-k"] { transition: transform 0.4s var(--ease); }
body .elementor [data-nk="spw-go-k"] path { transition: fill 0.3s; }
body .elementor [data-nk="spw-card"]:hover [data-nk="spw-go-k"] { transform: scaleX(-1) translateX(-5px); }
body .elementor [data-nk="spw-card"]:hover [data-nk="spw-go-k"] path { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  body .elementor [data-nk="spw-img"], body .elementor [data-nk="spw-go-k"] { transition: none; }
}
