/* Sistema de diseño común de 8iT Soluciones (Inicio, servicios, Proyectos, legales y Diseño web).
   Tokens, tipografía, botones, cabecera, pie, paneles, acordeón y barra de contacto. Lo específico de cada
   página vive en su hoja (home.css, servicios/servicio.css, proyectos/proyectos.css, legal/legal-page.css…).
   Colores: #24242e, #293f61, #f5f2e9, #0c0d0c; azul de palabra clave #72a9e8 sobre oscuro y #2e6ab1 sobre claro.
   Contrastes: papel/#24242e 13,4 · papel/#293f61 9,6 · tinta/papel 17,6 · #2e6ab1/papel 4,9 · papel/#2e6ab1 4,9 ·
   #72a9e8/#24242e 6,4 · #72a9e8/#293f61 4,4 (solo titulares grandes, mínimo 3:1).
   Móvil primero: lo de escritorio va en @media (min-width). */
:root {
  --c-dark: #24242e;
  --c-card: #293f61;
  --c-paper: #f5f2e9;
  --c-ink: #0c0d0c;
  --c-kw-dark: #72a9e8;
  --c-kw-light: #2e6ab1;
  --c-wa: #25d366;
  --line-d: rgb(245 242 233 / 24%);
  --line-l: rgb(12 13 12 / 22%);
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --pad: clamp(16px, 4.2vw, 88px); /* gutter lateral único y fluido: mismo valor en todas las secciones y páginas */
  --max: 1500px; /* ancho máximo del contenido */
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2)); /* margen real hasta el borde del contenido */
  --sec-y: clamp(32px, 7vw, 104px); /* ritmo vertical entre secciones */
  --nav-h: 64px;
  --h: clamp(1.9rem, 8.4vw, 3.2rem); /* titular de sección y de página */
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) {
  :root { --h: clamp(2.6rem, 5.6vw, 4.6rem); --nav-h: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-width: 320px;
  background: var(--c-dark);
  color: var(--c-paper);
  font: 400 1rem/1.55 Arial, Helvetica, sans-serif;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
::selection { background: var(--c-kw-light); color: var(--c-paper); }
:focus-visible { outline: 3px solid var(--c-paper); outline-offset: 3px; }
.panel--paper :focus-visible { outline-color: var(--c-kw-light); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; z-index: 100; top: var(--s2); left: var(--s2); padding: var(--s3) var(--s4);
  background: var(--c-paper); color: var(--c-ink); font-weight: 700; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ═════ Tipografía ═════ */
/* Etiquetas de tarjeta con apariencia de h3 (no son encabezados de sección): mismo negrita que el h3 del navegador */
div:where(.t3) { font-weight: 700; }
h1, h2, h3 , div:where(.t3) { margin: 0; }
h1, h2 {
  font-size: var(--h); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.05em; line-height: 0.96; text-wrap: balance; overflow-wrap: break-word;
}
h3 ,
div:where(.t3) { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }
.kw { color: var(--kw, var(--c-kw-dark)); }
.mono { margin: 0; font: 700 0.75rem/1.35 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.label { margin: 0 0 var(--s4); font: 700 0.75rem/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
.lead { max-width: 46ch; font-size: clamp(1.0625rem, 4.2vw, 1.25rem); line-height: 1.5; }
.lead a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ═════ Botones: sombra desplazada ═════ */
.button {
  --bg: var(--c-paper); --fg: var(--c-ink); --sh: var(--c-kw-light);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 14px 24px; max-width: 100%;
  border: 1px solid var(--c-ink); background: var(--bg); color: var(--fg);
  box-shadow: 4px 4px 0 var(--sh);
  font: 700 0.8125rem/1.25 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background-color 140ms, color 140ms;
}
.button::after { content: '↗'; font-size: 1.05em; line-height: 1; }
.button__ico { width: 1.8em; height: 1.8em; flex: none; margin-left: -4px; }
.button--blue { --bg: var(--c-kw-light); --fg: var(--c-paper); --sh: var(--c-ink); border-color: var(--c-paper); }
.button--wa { --bg: var(--c-wa); --fg: var(--c-ink); --sh: var(--c-paper); }
.panel--paper .button { --bg: var(--c-ink); --fg: var(--c-paper); --sh: var(--c-kw-light); }
.panel--paper .button--blue { --bg: var(--c-kw-light); --sh: var(--c-ink); border-color: var(--c-ink); }
.button--ghost { --bg: transparent; --fg: var(--c-paper); --sh: transparent; --bg-h: var(--c-paper); --fg-h: var(--c-ink); border-color: var(--c-paper); box-shadow: none; }
.panel--paper .button--ghost { --bg: transparent; --fg: var(--c-ink); --bg-h: var(--c-ink); --fg-h: var(--c-paper); border-color: var(--c-ink); }
@media (hover: hover) { .button--ghost:hover { background: var(--bg-h); color: var(--fg-h); transform: none; box-shadow: none; } }
.button--ghost:active { background: var(--bg-h); color: var(--fg-h); transform: none; }
.button--plain::after { content: none; }
@media (hover: hover) {
  .button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sh); }
}
.button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--sh); }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 3px; }

/* ═════ Cabecera ═════ */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 0 max(var(--pad), calc((100% - var(--max)) / 2), env(safe-area-inset-right)) 0 max(var(--pad), calc((100% - var(--max)) / 2), env(safe-area-inset-left));
  background: rgb(36 36 46 / 76%); color: var(--c-paper);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-d);
  transition: background-color 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease);
}
/* Un tema por sección (body[data-theme], lo pone deck.js): dark · card (azul) · light (crema).
   Cada tema define TODOS los tokens de los enlaces de la cabecera (texto, texto en hover/actual, subrayado y fondo en hover);
   los estados leen tokens, nunca fijan un color suelto. Contrastes comprobados: ver DESIGN.md (tabla «Hover»). */
.site-nav { --nav-fg: var(--c-paper); --nav-fg-h: var(--c-kw-dark); --nav-fg-cur: var(--c-kw-dark); --nav-bar: var(--c-kw-dark); --nav-fg-a: var(--c-paper); --nav-bg-h: transparent; --nav-bg-a: rgb(245 242 233 / 14%); }
body[data-theme='card'] .site-nav { background: rgb(41 63 97 / 78%); --nav-fg-h: var(--c-paper); --nav-fg-cur: var(--c-paper); --nav-bar: var(--c-paper); --nav-fg-a: var(--c-paper); --nav-bg-h: rgb(245 242 233 / 14%); --nav-bg-a: rgb(245 242 233 / 24%); }
body[data-theme='light'] .site-nav { background: rgb(245 242 233 / 80%); color: var(--c-ink); border-bottom-color: var(--line-l); --nav-fg: var(--c-ink); --nav-fg-h: var(--c-kw-light); --nav-fg-cur: var(--c-kw-light); --nav-bar: var(--c-kw-light); --nav-fg-a: var(--c-ink); --nav-bg-h: transparent; --nav-bg-a: rgb(12 13 12 / 8%); }
body[data-theme='light'] .site-nav .brand img { filter: invert(1) brightness(0.1); }
body[data-theme='light'] .site-nav .nav-cta { --bg: var(--c-ink); --fg: var(--c-paper); border-color: var(--c-ink); --sh: var(--c-kw-light); }
/* Menú abierto: siempre sobre fondo oscuro sólido (tokens del tema oscuro) */
body[data-theme] .site-nav.is-open { background: var(--c-dark); color: var(--c-paper); border-bottom-color: var(--line-d); -webkit-backdrop-filter: none; backdrop-filter: none; --nav-fg: var(--c-paper); --nav-fg-h: var(--c-kw-dark); --nav-fg-cur: var(--c-kw-dark); --nav-bar: var(--c-kw-dark); --nav-fg-a: var(--c-paper); --nav-bg-h: rgb(245 242 233 / 10%); --nav-bg-a: rgb(245 242 233 / 18%); }
body[data-theme] .site-nav.is-open .brand img { filter: none; }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; width: clamp(128px, 36vw, 190px); }
.brand img { width: 100%; height: auto; }
.nav-cta { display: none; }
.nav-cta .cta-m { display: none; }
/* Móvil y tablet: el CTA «Contacto» va siempre en la cabecera, junto al botón de menú */
@media (max-width: 1099px) {
  .site-nav { gap: var(--s3); }
  .nav-cta { display: inline-flex; margin-left: auto; min-height: 44px; padding: 8px 14px; font-size: 0.8125rem; box-shadow: 3px 3px 0 var(--sh); }
  .nav-cta::after { content: none; }
  .nav-cta .cta-d { display: none; }
  .nav-cta .cta-m { display: inline; }
}
@media (max-width: 359px) { .brand { width: 108px; } .nav-cta { padding: 8px 10px; font-size: 0.75rem; } }
.nav-toggle {
  display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 24px; height: 2px; background: currentColor; transition: transform 200ms var(--ease), background-color 200ms;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-8px) rotate(-45deg); }

/* Menú a pantalla completa (móvil y tablet): sin hover, foco atrapado por site.js */
.nav-links {
  position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(var(--nav-h) + var(--s5)) var(--pad) calc(var(--s6) + var(--safe-b));
  background: var(--c-dark);
  visibility: hidden; opacity: 0; transition: opacity 200ms, visibility 200ms; overscroll-behavior: contain;
}
.site-nav.is-open .nav-links { visibility: visible; opacity: 1; }
@media (max-width: 1099px) { .nav-links > *, .nav-links .nav-sub { width: 100%; max-width: 640px; margin-inline: auto; } }
.nav-links a { display: flex; align-items: center; min-height: 56px; color: var(--nav-fg); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-transform: uppercase; border-bottom: 1px solid var(--line-d); transition: color 140ms, background-color 140ms, box-shadow 140ms; }
.nav-links a:active { color: var(--nav-fg-a); background: var(--nav-bg-a); }
.nav-links a:is([aria-current='page'], [aria-current='location']) { color: var(--nav-fg-cur); box-shadow: inset 4px 0 var(--nav-bar); padding-left: var(--s4); }
.nav-sub { display: grid; margin-bottom: var(--s2); }
.nav-sub a { min-height: 48px; padding-left: var(--s4); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; border-bottom-color: transparent; }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav-cta { display: inline-flex; min-height: 44px; padding: 10px 18px; }
  .site-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-cta { justify-self: end; }
  .nav-links { position: static; z-index: auto; flex-direction: row; align-self: stretch; padding: 0; overflow: visible; background: none; visibility: visible; opacity: 1; }
  .nav-links a { min-height: 0; padding: 0 clamp(10px, 1.1vw, 20px); border: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; }
  .nav-links a:is([aria-current='page'], [aria-current='location']) { padding-left: clamp(10px, 1.1vw, 20px); box-shadow: inset 0 -3px var(--nav-bar); }
  .nav-links a:active { color: var(--nav-fg-a); background: var(--nav-bg-a); }
  @media (hover: hover) { .nav-links a:hover { color: var(--nav-fg-h); background: var(--nav-bg-h); box-shadow: inset 0 -3px var(--nav-bar); } }
  .nav-links a:focus-visible { color: var(--nav-fg-h); background: var(--nav-bg-h); outline: 3px solid var(--nav-bar); outline-offset: -3px; }
  .has-sub { position: relative; display: flex; align-items: stretch; }
  /* Submenú: isla de papel con sus propios tokens (nunca hereda los del tema de la sección) */
  .nav-sub {
    --sub-fg: var(--c-ink); --sub-bg: var(--c-paper); --sub-fg-h: var(--c-paper); --sub-bg-h: var(--c-ink); --sub-cur: var(--c-kw-light);
    position: absolute; top: 100%; left: 0; min-width: 200px; margin: 0; padding: var(--s2) 0;
    background: var(--sub-bg); color: var(--sub-fg); border: 1px solid var(--line-l); box-shadow: 4px 4px 0 var(--c-kw-light);
    visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 140ms, transform 140ms, visibility 140ms;
  }
  .nav-sub a { min-height: 44px; padding: 0 var(--s4); font-size: 0.75rem; color: var(--sub-fg); background: var(--sub-bg); box-shadow: none; }
  .nav-sub a[aria-current='page'] { color: var(--sub-cur); box-shadow: inset 3px 0 var(--sub-cur); padding-left: var(--s4); }
  @media (hover: hover) { .nav-sub a:hover { color: var(--sub-fg-h); background: var(--sub-bg-h); box-shadow: none; } }
  .nav-sub a:active, .nav-sub a:focus-visible { color: var(--sub-fg-h); background: var(--sub-bg-h); box-shadow: none; }
  .nav-sub a:focus-visible { outline: 3px solid var(--c-kw-light); outline-offset: -3px; }
  .has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub { visibility: visible; opacity: 1; transform: none; }
}

@media (min-width: 1100px) and (hover: none) and (pointer: coarse) { .nav-links a { min-width: 44px; justify-content: center; } }

/* ═════ Paneles ═════ */
.panel {
  position: relative; isolation: isolate; --kw: var(--c-kw-dark);
  padding: var(--sec-y) var(--pad);
}
.panel--dark { background: var(--c-dark); color: var(--c-paper); }
.panel--card { background: var(--c-card); color: var(--c-paper); }
.panel--paper { background: var(--c-paper); color: var(--c-ink); --kw: var(--c-kw-light); --line: var(--line-l); }
.panel--dark, .panel--card { --line: var(--line-d); }
.panel--paper .label { color: var(--c-kw-light); }
.panel::before { /* retícula de líneas finas de la identidad */
  content: ''; position: absolute; z-index: -1; inset: 0 max(var(--pad), calc((100% - var(--max)) / 2)); pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--grid, rgb(245 242 233 / 7%)) 0 1px, transparent 1px 25%);
}
.panel--paper { --grid: rgb(12 13 12 / 7%); }
.panel__in { display: grid; gap: var(--s6); max-width: 1500px; margin-inline: auto; align-content: start; }
.panel__head { display: grid; gap: var(--s4); align-content: start; }
.panel__head .lead { max-width: 52ch; font-size: 1.0625rem; }
@media (min-width: 900px) {
  .panel { padding-block: clamp(80px, 8.5vw, 124px); }
  .panel--split .panel__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7) clamp(32px, 6vw, 96px); }
  .panel--split .panel__head { position: sticky; top: calc(var(--nav-h) + var(--s6)); }
}

/* Marcas de mira (crosshairs) y microtexto: acabado técnico de la identidad */
.xh { position: absolute; width: 17px; height: 17px; pointer-events: none; opacity: 0.55; }
.xh::before, .xh::after { content: ''; position: absolute; background: currentColor; }
.xh::before { left: 8px; top: 0; width: 1px; height: 17px; }
.xh::after { top: 8px; left: 0; height: 1px; width: 17px; }
.micro { font: 700 0.6875rem/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }

/* ═════ Preguntas frecuentes: máster-detalle (tools/faq-component.mjs + initFaq en deck.js) ═════
   Las tarjetas de pregunta no se expanden. Con JS, todas las listas comparten una celda de rejilla y todas las respuestas otra:
   la altura reservada es la de la más alta, a cualquier ancho, y la sección no cambia de tamaño al abrir, cerrar o cambiar de categoría.
   Cada estado (reposo, hover, foco, activo, seleccionada) fija texto, fondo y borde juntos con tokens por tema. */
.faqmd { --q-fg: var(--c-paper); --q-bg: transparent; --q-bd: var(--line-d); --q-fg-h: var(--c-paper); --q-bg-h: rgb(245 242 233 / 10%); --q-bd-h: var(--c-paper);
  --q-fg-s: var(--c-ink); --q-bg-s: var(--c-paper); --q-bd-s: var(--c-paper); --a-bg: rgb(245 242 233 / 6%); --a-bd: var(--line-d); --ring: var(--c-paper);
  display: grid; gap: var(--s4); min-width: 0; }
.panel--paper .faqmd { --q-fg: var(--c-ink); --q-bd: var(--line-l); --q-fg-h: var(--c-ink); --q-bg-h: rgb(12 13 12 / 6%); --q-bd-h: var(--c-ink);
  --q-fg-s: var(--c-paper); --q-bg-s: var(--c-ink); --q-bd-s: var(--c-ink); --a-bg: rgb(12 13 12 / 4%); --a-bd: var(--line-l); --ring: var(--c-kw-light); }
.faqtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.faqtabs button { min-height: 44px; padding: 0 16px; border: 1px solid var(--q-bd-h); background: var(--q-bg); color: var(--q-fg); font: 700 0.8125rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: color 140ms, background-color 140ms, border-color 140ms; }
.faqtabs button[aria-selected='true'] { background: var(--q-bg-s); color: var(--q-fg-s); border-color: var(--q-bd-s); }
@media (hover: hover) { .faqtabs button:not([aria-selected='true']):hover { background: var(--q-bg-h); color: var(--q-fg-h); } }
.faqtabs button:not([aria-selected='true']):active { background: var(--q-bg-h); color: var(--q-fg-h); }
.faqtabs button:focus-visible, .faqq__b:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.faqmd__in { display: grid; gap: var(--s4); min-width: 0; }
.faqq ul { display: grid; gap: 10px; }
.faqq__b { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border: 1px solid var(--q-bd); background: var(--q-bg); color: var(--q-fg); text-align: left; font: 700 1rem/1.3 Arial, Helvetica, sans-serif; cursor: pointer; transition: color 140ms, background-color 140ms, border-color 140ms; }
.faqq__b::after { content: '→'; flex: none; font: 700 1.125rem/1 var(--mono); }
@media (hover: hover) { .faqq__b:not([aria-expanded='true']):hover { color: var(--q-fg-h); background: var(--q-bg-h); border-color: var(--q-bd-h); } }
.faqq__b:not([aria-expanded='true']):active { color: var(--q-fg-h); background: var(--q-bg-h); border-color: var(--q-bd-h); }
.faqq__b[aria-expanded='true'] { color: var(--q-fg-s); background: var(--q-bg-s); border-color: var(--q-bd-s); }
.faqa__p { padding: 22px 24px; border: 1px solid var(--a-bd); background: var(--a-bg); min-width: 0; }
.faqa__q { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.faqa__p p { max-width: 60ch; font-size: 1rem; line-height: 1.55; }
.faqa__p a { text-underline-offset: 3px; }
/* Con JS: una sola celda para todas las listas y otra para todas las respuestas (altura = la más alta) */
.faqmd.is-js .faqq-stack, .faqmd.is-js .faqa-stack { display: grid; align-content: start; }
.faqmd.is-js .faqq, .faqmd.is-js .faqa__p { grid-area: 1 / 1; }
.faqmd.is-js .faqq:not(.is-on), .faqmd.is-js .faqa__p:not(.is-on) { visibility: hidden; }
.faqmd.is-js .faqa__p { opacity: 0; transform: translateY(6px); transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms; }
.faqmd.is-js .faqa__p.is-on { opacity: 1; transform: none; transition-delay: 0s; }
.faqmd:not(.is-js):not(.is-acc) .faqq-stack, .faqmd:not(.is-js):not(.is-acc) .faqa-stack { display: grid; gap: var(--s4); }
/* Acordeón (sin deck): la respuesta cuelga de su pregunta; sin altura reservada, solo una lista de categoría a la vez */
.faqmd.is-acc .faqq:not(.is-on) { display: none; }
.faqmd.is-acc .faqa-stack { display: none; }
.faqmd.is-acc .faqq li { display: grid; gap: 0; }
.faqmd.is-acc .faqa__p { display: none; border-top: 0; }
.faqmd.is-acc .faqa__p.is-on { display: block; }
.faqmd.is-acc .faqa__q { display: none; }
.faqmd.is-acc .faqq__b[aria-expanded='true']::after { content: '−'; }
@media (min-width: 900px) {
  .faqmd:not(.faqmd--stack) .faqmd__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) clamp(24px, 3vw, 48px); align-items: start; }
}
@media (max-width: 699px) {
  .faqtabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .faqtabs::-webkit-scrollbar { display: none; }
  .faqtabs button { flex: none; }
  .faqa__p { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .faqmd.is-js .faqa__p { transition: none; transform: none; } }

/* ═════ Pie (único para todas las páginas: mismo marcado, mismas dimensiones; solo cambian color y opacidad) ═════ */
.site-footer { padding: var(--s5) var(--pad) var(--s5); background: var(--c-dark); color: var(--c-paper); border-top: 1px solid var(--line-d); transition: background-color 350ms var(--ease), color 350ms var(--ease); }
.site-footer__in { display: grid; gap: 0 28px; max-width: var(--max); margin-inline: auto; }
.footer-brand { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand img { width: 130px; height: auto; }
.footer-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 var(--s5); }
.footer-nav a, .footer-legal a, .footer-legal .cookie-settings, .footer-place a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; text-underline-offset: 4px; }
.footer-nav a { text-decoration: none; font-weight: 700; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); font-size: 0.875rem; opacity: 0.88; }
.footer-legal span { display: inline-flex; min-height: 44px; align-items: center; }
.footer-place { font-size: 0.875rem; opacity: 0.8; }
.footer-place a { display: inline; min-height: 0; }
/* El flotante de WhatsApp (≥1100 px) ocupa la esquina inferior derecha de la ventana: la última zona del pie la deja libre.
   Marca, navegación y redes van en la primera fila; legal y ubicación, a la izquierda con un margen igual al del botón. */
.site-footer { --wa-zone: 0px; }
.footer-social { order: 5; margin-left: -10px; }
@media (min-width: 900px) {
  .site-footer__in { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer-nav { grid-template-columns: repeat(6, auto); justify-content: center; }
  .footer-social { order: 0; margin-left: 0; margin-right: -10px; }
  .footer-legal { grid-column: 1 / -1; justify-content: start; padding-right: var(--wa-zone); }
  .footer-end { grid-column: 1 / -1; padding-right: var(--wa-zone); }
}
@media (min-width: 1100px) { .site-footer { --wa-zone: calc(clamp(24px, 3vw, 52px) + 200px); } }
.footer-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); }
.social, .footer-social, .contact__social { display: flex; align-items: center; gap: 4px; }
.social a, .footer-social a, .contact__social a { --soc: currentColor; display: grid; place-items: center; width: 44px; height: 44px; color: var(--soc); border: 1px solid transparent; transition: color 140ms, background-color 140ms, border-color 140ms; }
.social svg, .footer-social svg, .contact__social svg { width: 22px; height: 22px; }
@media (hover: hover) { .social a:hover, .footer-social a:hover, .contact__social a:hover { color: var(--soc-h, var(--kw, var(--c-kw-dark))); border-color: currentColor; background: var(--soc-bg-h, rgb(245 242 233 / 8%)); } }
.social a:active, .footer-social a:active, .contact__social a:active { color: var(--soc-h, var(--kw, var(--c-kw-dark))); border-color: currentColor; }
.panel--paper .social a, .panel--paper .footer-social a { --soc-bg-h: rgb(12 13 12 / 6%); }
.panel--card .footer-social a:hover, .panel--card .contact__social a:hover { --soc-h: var(--c-paper); --soc-bg-h: rgb(245 242 233 / 14%); }
.secondary-page .footer-social a { --soc-h: var(--c-kw-dark); }
/* Dentro de una sección (Inicio, servicios, Proyectos, Diseño web): hereda el color y el fondo de esa sección */
.panel .site-footer { padding-inline: 0; background: transparent; color: inherit; border-top-color: var(--line, var(--line-d)); }
/* Páginas legales: el pie va tras el contenido, sobre fondo oscuro */
.secondary-page .site-footer { padding-inline: var(--pad); }

/* ═════ WhatsApp flotante (solo escritorio; la barra inferior es la de contacto) ═════ */
.wa-float { display: none; }
body[data-bar='light'] .wa-float { --sh: var(--c-ink); }
@media (min-width: 1100px) {
  .wa-float { position: fixed; z-index: 40; right: clamp(24px, 3vw, 52px); bottom: 28px; display: inline-flex; }
}
/* Se oculta (con transición suave) mientras la sección actual tenga un WhatsApp en línea (data-whatsapp-inline): deck.js / main.js ponen body.wa-hide */
.wa-float { transition: opacity 300ms var(--ease), visibility 0s, transform 140ms var(--ease), box-shadow 140ms var(--ease); }
.wa-hide .wa-float { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms var(--ease), visibility 0s linear 300ms; }

/* ═════ Aparición al hacer scroll (mejora progresiva) ═════ */
.will-reveal { transition: opacity 650ms var(--ease), transform 650ms var(--ease); transition-delay: var(--d, 0ms); }
.will-reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .will-reveal:not(.is-in) { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .button, .contact-bar a { border: 2px solid ButtonText; }
}

/* Elemento visual: cuaderno técnico con retícula, marcas de mira y microtexto. El fallback SVG ya está en el HTML. */
.hero-visual {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4;
  background: var(--c-card); border: 1px solid var(--line-d); box-shadow: 5px 5px 0 var(--c-kw-light);
  color: var(--c-paper);
}
.hero-visual::before { /* retícula fina */
  content: ''; position: absolute; z-index: -1; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgb(245 242 233 / 7%) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgb(245 242 233 / 7%) 0 1px, transparent 1px 16.66%);
}
.hero-visual svg { position: absolute; inset: 6% 8%; width: 84%; height: 88%; transition: opacity 500ms var(--ease); }
.hero-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease); }
.hero-visual canvas.is-on { opacity: 1; }
.hero-visual canvas.is-on ~ svg, .hero-visual:has(canvas.is-on) svg { opacity: 0; }
.hero-visual .micro { position: absolute; z-index: 1; margin: 0; }
.hero-visual .micro--tl { top: 12px; left: 14px; }
.hero-visual .micro--br { bottom: 12px; right: 14px; text-align: right; }
.hero-visual .xh:nth-of-type(1) { top: 8px; right: 8px; }
.hero-visual .xh:nth-of-type(2) { bottom: 8px; left: 8px; }

/* Dibujo: trazos con currentColor; el azul de la marca marca lo importante */
.draw { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.draw--soft { opacity: 0.45; }
.draw--kw { stroke: var(--c-kw-dark); }
.fill-kw { fill: var(--c-kw-dark); }
.fill-paper { fill: var(--c-paper); }
.fill-card { fill: var(--c-card); }
.blink { animation: blink 2.4s steps(2, jump-none) infinite; }
.blink:nth-of-type(2n) { animation-delay: 0.7s; }
.blink:nth-of-type(3n) { animation-delay: 1.3s; }
@keyframes blink { 50% { opacity: 0.25; } }
.flow-line { stroke-dasharray: 5 6; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }


/* contact-bar:start (generado desde contact-bar.css con tools/build-pages.mjs) */
/* WhatsApp fijo en móvil y tablet (<1100 px): botón cuadrado, como el de escritorio pero solo con el logo, en la esquina inferior derecha, con safe areas. Se oculta (body.wa-hide, como en escritorio) mientras la sección en pantalla ya tiene un WhatsApp en línea. Desde 1100 px manda el flotante de escritorio. */
:root { --bar-h: 0px; --fab: 56px; --fab-gap: 16px; }
@media (max-width: 1099px) {
  .wa-float {
    position: fixed; z-index: 44; display: flex; align-items: center; justify-content: center; width: var(--fab); height: var(--fab); min-height: 0; padding: 0; gap: 0;
    right: max(var(--fab-gap), env(safe-area-inset-right, 0px)); bottom: calc(var(--fab-gap) + env(safe-area-inset-bottom, 0px));
    border-radius: 0; font-size: 0; line-height: 0;
    --fg: var(--sh); /* el logo lleva el color del cuadradito de contraste: crema sobre oscuro y azul, tinta sobre crema (body[data-bar]) */
    /* Tamaño y lado se resuelven con `scale` y `translate` (no con width/height/left): el botón conserva su caja de 56 px y no provoca desplazamientos de diseño (CLS 0). */
    transform-origin: 100% 100%;
    transition: scale 160ms, opacity 300ms, box-shadow 140ms, transform 140ms, color 300ms, background-color 300ms;
  }
  .wa-float .button__ico path { stroke: var(--c-ink); stroke-width: 0.5px; paint-order: stroke; stroke-linejoin: round; }
  .wa-float::after { content: none; }
  .wa-float .button__ico { width: 32px; height: 32px; margin: 0; transition: scale 160ms; }
  /* Esquina izquierda: se desplaza el botón el ancho útil (site.js fija --wa-vw = ancho del viewport sin barra de desplazamiento). */
  .wa-float.wa-left { translate: calc(max(var(--fab-gap), env(safe-area-inset-left, 0px)) + max(var(--fab-gap), env(safe-area-inset-right, 0px)) + var(--fab) - var(--wa-vw, 100vw)) 0; transform-origin: 0 100%; }
  .wa-float.wa-min { scale: 0.785714; } /* 44 / 56 */
  .wa-float.wa-min .button__ico { scale: 1.034091; } /* el logo sigue en 26 px: (26 / 32) / (44 / 56) */
  .wa-float:focus-visible { outline: 3px solid var(--c-paper); outline-offset: 4px; }
  html { scroll-padding-bottom: calc(var(--fab) + var(--fab-gap) * 2); }
  .site-footer { padding-bottom: calc(var(--s5) + var(--fab) + var(--fab-gap) + env(safe-area-inset-bottom, 0px)); }
}
/* Sobre un formulario no se muestra (site.js pone .wa-off) */
.wa-float.wa-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms, visibility 0s linear 200ms; }
/* contact-bar:end */

/* Páginas con composición por secciones: sin barra nativa (el scroll sigue funcionando; el raíl de puntos es el indicador).
   No se aplica a las páginas legales ni a zonas con scroll interno (demos, listas largas). */
html:has(.deck-page), html:has(.wd-page), html:has(.deck-page) body, html:has(.wd-page) body { scrollbar-width: none; -ms-overflow-style: none; }
html:has(.deck-page)::-webkit-scrollbar, html:has(.wd-page)::-webkit-scrollbar, html:has(.deck-page) body::-webkit-scrollbar, html:has(.wd-page) body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Móvil: la barra de contacto y el menú ya cubren la navegación; el pie queda con lo legal y la ubicación (igual en todas las páginas) */
@media (max-width: 699px) { .footer-nav, .footer-brand { display: none; } }
/* Puntero fino: los enlaces de texto no necesitan los 44 px táctiles (siguen por encima de los 24 px de WCAG 2.2) */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .text-link { min-height: 32px; } }