/* Nordik — páginas interiores (servicios y contacto).
   Se apoya en styles.css: tokens, navegación, píldoras, filas de servicios y pie. */

.rn { font-family: var(--f-rune); font-style: normal; font-weight: 400; }

/* ---------- cabecera de página ---------- */
.sp-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 82svh;
  padding: 140px var(--m) clamp(56px, 8svh, 88px);
  background: var(--black); color: var(--white);
}
.sp-hero__rune {
  position: absolute; right: 4vw; top: 50%; translate: 0 -50%;
  font-family: var(--f-rune); font-size: min(62svh, 46vw); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(14, 238, 212, 0.55);
  pointer-events: none;
}
.sp-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.crumbs {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark);
}
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--green); }
.crumbs .k-ico { width: 8px; height: 11px; stroke: var(--green); stroke-width: 30; transform: scaleX(-1); }
.crumbs span { color: var(--white); }
.sp-title {
  margin-top: clamp(20px, 3svh, 32px);
  font-family: var(--f-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase;
  font-size: clamp(3.25rem, 10.5vw, 11rem); line-height: 0.9; letter-spacing: 0.01em;
}
.sp-title__word { display: block; }
.sp-title .rn { font-size: 0.92em; color: var(--green); }
.sp-title .ch { display: inline-block; }
.sp-claim {
  position: relative;
  margin-top: clamp(18px, 3svh, 30px); padding-left: 0.42em;
  max-width: 30ch;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.03em;
}
.sp-claim .caret { position: absolute; left: 0; top: 0.14em; margin: 0; }
.sp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(28px, 4svh, 44px); }
.sp-textlink {
  color: var(--on-dark); font-size: 15px;
  text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
  transition: color 0.3s, text-underline-offset 0.3s var(--ease);
}
.sp-textlink:hover { color: var(--white); text-underline-offset: 0.45em; }
.sp-textlink--dark { color: var(--on-light); }
.sp-textlink--dark:hover { color: var(--black); }
.talk--solid { background: var(--black); color: var(--green); border-color: var(--black); cursor: pointer; }

/* ---------- qué es ---------- */
.sp-what {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
  background: var(--cream);
  padding: clamp(90px, 10vw, 150px) var(--m);
}
.sp-what__text { grid-column: 1 / 8; }
.sp-lead { margin-top: 28px; max-width: 34ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 2.1rem); line-height: 1.2; letter-spacing: -0.025em; }
.sp-what__list { grid-column: 9 / 13; padding-top: 10px; }
.sp-mini { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.sp-inc { margin-top: 18px; border-top: 1px solid var(--line-light); }
.sp-inc li { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-light); font-size: 17px; }
.sp-inc li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--green); }

/* ---------- cómo lo hacemos ---------- */
.sph { background: var(--cream-2); padding: clamp(90px, 10vw, 150px) var(--m); }
.sph__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.sph__step { padding-top: 24px; border-top: 1.5px solid var(--black); }
.sph__rune { display: block; font-family: var(--f-rune); font-size: 36px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--black); }
.sph__step h3 { margin-top: 22px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.4rem); letter-spacing: -0.035em; line-height: 1; }
.sph__step p { margin-top: 14px; max-width: 32ch; color: var(--on-light); }

/* ---------- proyectos del servicio ---------- */
.spw { background: var(--black); color: var(--white); padding: clamp(90px, 10vw, 150px) var(--m); }
.spw__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.spw__count { max-width: 30ch; color: var(--on-dark); text-align: right; }
.spw__count b { display: block; font-family: var(--f-impact); font-weight: 400; font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; color: var(--green); }
.spw__grid { display: grid; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.spw__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spw__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spw__grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.spw__card a { display: flex; flex-direction: column; height: 100%; }
.spw__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--black-2); }
.spw__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; filter: grayscale(1); transition: filter 0.6s var(--ease), transform 0.9s var(--ease); }
.spw__card a:hover .spw__img img, .spw__card a:focus-visible .spw__img img { filter: none; transform: scale(1.04); }
.spw__meta { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.spw__sector { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); }
.spw__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; }
.spw__desc { margin-top: 10px; color: var(--on-dark); font-size: 15px; max-width: 42ch; }
.spw__go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }
.spw__go .k-ico { stroke: var(--green); transform: scaleX(-1); transition: transform 0.4s var(--ease), fill 0.3s; }
.spw__card a:hover .spw__go .k-ico { transform: scaleX(-1) translateX(-5px); fill: var(--green); }

/* ---------- llamada a la acción ---------- */
.sp-cta { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--cream); padding: clamp(90px, 10vw, 150px) var(--m); }
.sp-cta__title { max-width: 18ch; font-family: var(--f-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(2.75rem, 7vw, 7rem); line-height: 0.92; letter-spacing: 0.01em; }
.sp-cta .sp-ctas { justify-content: center; }

/* ---------- otros servicios (reutiliza las filas de la home) ---------- */
.sp-more { padding-top: clamp(80px, 9vw, 130px); }
.sp-more__title { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark); }
.sp-more .svc__title { font-size: clamp(1.75rem, 3.6vw, 3.6rem); }

/* ---------- contacto ---------- */
.ct {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); align-items: start;
  min-height: 100svh;
  padding: 140px var(--m) clamp(80px, 9vw, 120px);
  background: var(--black); color: var(--white);
}
.ct__intro { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; }
.ct__title { margin-top: 0; font-size: clamp(3.5rem, 9vw, 9.5rem); }
.ct__wa { margin-top: clamp(28px, 4svh, 44px); font-size: clamp(1.05rem, 1.5vw, 1.4rem); }
.ct__channels { width: 100%; max-width: 440px; margin-top: clamp(40px, 6svh, 64px); border-top: 1px solid var(--line-dark); }
.ct__channels li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.ct__channels span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); align-self: center; }
.ct__channels a { font-weight: 500; transition: color 0.3s; }
.ct__channels a:hover { color: var(--green); }

.ct__form { padding: clamp(28px, 3.4vw, 52px); background: var(--cream); color: var(--black); border-radius: 22px; }
.ct__chips { border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct__chips legend { margin-bottom: 16px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.03em; }
.ct__chips label { position: relative; cursor: pointer; }
.ct__chips input { position: absolute; opacity: 0; pointer-events: none; }
.ct__chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px;
  border: 1.5px solid rgba(26, 26, 26, 0.2); font-weight: 500; font-size: 15px;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.ct__chips label:hover span { border-color: var(--black); }
.ct__chips input:checked + span { background: var(--black); border-color: var(--black); color: var(--green); }
.ct__chips input:checked + span::before { content: ""; width: 6px; height: 6px; background: var(--green); }
.ct__chips input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 3px; }

.ct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--white); border: 1.5px solid transparent; border-radius: 10px;
  font: inherit; color: var(--black);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 4px rgba(14, 238, 212, 0.35); }
.field.is-error input, .field.is-error textarea { border-color: #d6453d; }
.ct__legal { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--on-light); cursor: pointer; }
.ct__legal input { margin-top: 3px; accent-color: var(--black); }
.ct__legal a { text-decoration: underline; }
.ct__legal.is-error { color: #d6453d; }
.ct__send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.ct__status { font-size: 14px; color: var(--on-light); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .sp-what__text, .sp-what__list { grid-column: 1 / -1; }
  .sp-what__list { margin-top: 48px; }
  .sph__steps, .spw__grid--3 { grid-template-columns: 1fr 1fr; }
  .ct { grid-template-columns: 1fr; }
  .ct__intro { position: static; }
}
@media (max-width: 760px) {
  .sp-hero { min-height: 78svh; padding-top: 120px; }
  .sp-hero__rune { right: -10vw; top: 34%; opacity: 0.6; }
  .sp-title { font-size: 3.4rem; }
  .sph__steps, .spw__grid--3, .spw__grid--2 { grid-template-columns: 1fr; }
  .spw__count { text-align: left; }
  .ct { padding-top: 112px; }
  .ct__title { font-size: 3.6rem; }
  .ct__grid { grid-template-columns: 1fr; }
}

/* ---------- 404: todo en una pantalla, sin scroll ---------- */
html:has(.nf), body:has(.nf) { height: 100%; overflow: hidden; }
body:has(.nf) { display: flex; flex-direction: column; height: 100svh; }
body:has(.nf) main { flex: 1; min-height: 0; display: flex; }
.nf {
  position: relative; overflow: hidden;
  flex: 1; display: flex; align-items: flex-end;
  padding: clamp(84px, 13svh, 120px) var(--m) clamp(24px, 4svh, 48px);
  background: var(--black); color: var(--white);
}
.nf__bg { position: absolute; inset: 0; }
.nf__bg img { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: 50% 55%; filter: brightness(0.5) saturate(0.7); }
.nf__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0.4) 0%, rgba(26,26,26,0) 35%, rgba(26,26,26,0.92) 100%), linear-gradient(90deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0) 60%); } /* taste-skill-ignore: velo bajo el texto */
.nf__in { position: relative; z-index: 1; width: 100%; }
/* el 404 tiene altura fija: las runas no cambian la altura de la línea */
.nf__code {
  font-family: var(--f-impact); font-weight: 400;
  font-size: min(28vw, 34svh); line-height: 0.82; letter-spacing: 0;
  color: var(--cream);
}
.nf__code .sp-title__word { display: block; height: 0.82em; white-space: nowrap; }
.nf__code .ch, .nf__code .rn { display: inline-block; height: 0.82em; line-height: 0.82; vertical-align: top; overflow: visible; }
.nf__code .is-rune { line-height: 0.82; }
.nf__code .rn { font-size: 1em; color: var(--green); }
.nf__text { margin-top: clamp(12px, 2.4svh, 28px); }
.nf__text .sp-claim { margin-top: 0; font-size: clamp(1.25rem, min(2.4vw, 3.6svh), 2.4rem); }
.nf__sub { margin-top: clamp(8px, 1.6svh, 16px); max-width: 46ch; color: var(--on-dark); font-size: clamp(14px, 2svh, 17px); }
.nf .sp-ctas { margin-top: clamp(16px, 3svh, 32px); }
.nf__paths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 4svh, 48px); }
.nf__paths a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line-dark); background: rgba(26, 26, 26, 0.5);
  font-size: 14px; font-weight: 500;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.nf__paths .r { font-family: var(--f-rune); color: var(--green); }
.nf__paths a:hover { border-color: var(--green); background: var(--green); color: var(--black); }
.nf__paths a:hover .r { color: var(--black); }
body:has(.nf) .foot__bar { flex: none; padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 760px) {
  .nf__code { font-size: min(34vw, 22svh); }
  .nf__paths a { padding: 7px 11px; font-size: 13px; }
  .nf .sp-ctas { gap: 10px 18px; }
  body:has(.nf) .foot__bar { flex-direction: row; align-items: center; }
  body:has(.nf) .foot__legal, body:has(.nf) .foot__social { display: none; }
}