/* ==========================================================================
   Harpe, the public site - the one stylesheet.

   Built from the web kit, version 4 (October 2026), in this order:
   tokens/tokens.css, tokens/fonts.css, reference/css/harpe.css and
   reference/css/cristal.css, each copied whole, then the pricing of Atalaya
   (Carlos's addition) and what harpe.live adds on its own at the end. The
   only edits inside the kit's parts are the paths: fonts from /assets/fonts
   and grain.png from /assets/img, which is where this site serves them.
   ========================================================================== */

/* ==== tokens/tokens.css ==== */
/* ==========================================================================
   Harpe · tokens de diseño para harpe.live
   Fuente única de color, tipografía, espacio, radios, sombras y movimiento.
   Copia este fichero y fonts.css en src/styles/ y usa las variables; no escribas hex sueltos.
   ========================================================================== */

:root {
  /* ---- Color de marca ---------------------------------------------------- */
  --color-azure: #00638E;          /* Dark Azure: acento, enlaces, líneas de marca, barras */
  --color-azure-deep: #004A6B;     /* Deep Azure: degradados y estado hover del acento */
  --color-azure-light: #BFD8E3;    /* Light Azure: fondos suaves y texto sobre oscuro */
  --color-mist: #8CB9CC;           /* Mist: kicker sobre oscuro, luz de los degradados */
  --color-navy: #003048;           /* Navy: secciones oscuras y botón oscuro */
  --color-night: #001E2E;          /* Noche: extremo oscuro de la rampa */
  --color-onyx: #141414;           /* Texto principal */
  --color-charcoal: #2B2B2B;       /* Texto de lectura */
  --color-paper: #FFFFFF;          /* Fondo de página */

  /* ---- Neutros de interfaz ----------------------------------------------- */
  --color-muted: #5E6A70;          /* Texto secundario sobre claro (5,6:1 sobre blanco) */
  --color-paper-2: #F4F7F8;        /* Fondo de sección alterna */
  --color-panel: #EEF2F4;          /* Cuerpo de tarjeta de pestaña */
  --color-tint: #EDF3F6;           /* Etiquetas, rellenos suaves */
  --color-line: #DCE6EB;           /* Separadores sobre claro */
  --color-line-strong: #D5DEE3;    /* Separador dentro de tarjeta */
  --color-field-border: #7E909A;   /* Borde de campo de formulario (3,3:1 sobre blanco) */
  --color-on-dark: #FFFFFF;        /* Texto principal sobre oscuro */
  --color-on-dark-2: #D6E8F0;      /* Texto de lectura sobre oscuro */
  --color-on-dark-3: #9FB3BE;      /* Texto del pie */
  --color-footer: #0A1621;         /* Fondo del pie */
  --color-line-dark: rgba(255, 255, 255, .18); /* Separadores sobre oscuro */

  /* ---- Acentos de luz: reservados a degradados y cifras gigantes --------- */
  --color-light-cyan: #8ED8FF;
  --color-cyan: #12A2EC;
  --color-blue: #0B63C8;
  --color-blue-deep: #0A3A96;

  /* ---- Color de datos: uno por producto ---------------------------------- */
  --color-data-atria: #00638E;
  --color-data-vision: #E8913A;
  --color-data-embarcado: #4E9FCB;
  --color-data-atalaya: #6B58B8;

  /* ---- Estados ----------------------------------------------------------- */
  --color-focus: #0B63C8;          /* Anillo de foco sobre claro */
  --color-focus-on-dark: #8ED8FF;  /* Anillo de foco sobre oscuro */
  --color-error: #B3261E;
  --color-error-bg: #FCEDEC;
  --color-success: #1E7A4F;
  --color-success-bg: #E8F5EE;

  /* ---- Interfaz de producto (maquetas y demos) --------------------------- */
  /* ---- Cartas del equipo (guiño de juego de cartas; ver docs/COMPONENTES.md) ---- */
  --color-card-rim: #0A1621;         /* Borde exterior de la carta */
  --color-card-parchment: #F4F7F8;   /* Caja de texto de la carta */
  --color-card-azure-1: #00638E;
  --color-card-azure-2: #003048;
  --color-card-sky-1: #4E9FCB;
  --color-card-sky-2: #0B4F7A;
  --color-card-violet-1: #6B58B8;
  --color-card-violet-2: #2E2466;
  --color-card-amber-1: #E8913A;
  --color-card-amber-2: #7A3F10;
  --color-card-azure-3: #CFE3EC;     /* Círculos de coste: tinte claro con el símbolo en el tono oscuro */
  --color-card-sky-3: #D3EAF6;
  --color-card-violet-3: #DDD7F3;
  --color-card-amber-3: #F7DEC0;
  --color-card-glass: rgba(0, 30, 46, .58);          /* Barras translúcidas sobre la ilustración */
  --color-card-line: rgba(255, 255, 255, .72);        /* Marco fino interior */
  --gradient-card-shade: linear-gradient(180deg, rgba(0, 20, 32, .30) 0%, rgba(0, 20, 32, 0) 14%, rgba(0, 20, 32, 0) 38%, rgba(0, 20, 32, .74) 58%, rgba(0, 20, 32, .95) 80%, rgba(0, 20, 32, .98) 100%);
  --gradient-foil: linear-gradient(115deg, rgba(255, 255, 255, 0) 25%, rgba(142, 216, 255, .55) 40%, rgba(255, 255, 255, .45) 50%, rgba(107, 88, 184, .5) 60%, rgba(255, 255, 255, 0) 75%);

  --color-ui-bg: #0B0F11;
  --color-ui-panel: #11181C;
  --color-ui-alert: #E0564F;

  /* ---- Degradados -------------------------------------------------------- */
  --gradient-ramp: linear-gradient(90deg, #001E2E, #003048, #004A6B, #00638E, #8CB9CC, #BFD8E3);
  --gradient-story-sky: linear-gradient(180deg, #CFEAF8 0%, #9FD5F4 14%, #3AA7EA 30%, #0B5FB0 46%, #052A4E 62%, #030E1A 80%, #02070D 100%);
  --gradient-story-ghost: linear-gradient(180deg, #8ED8FF 0%, #19ABF2 35%, #0B63C8 70%, #0A3A96 100%);
  --gradient-stat-band: linear-gradient(100deg, #001E2E 0%, #003048 45%, #00507A 100%);

  /* ---- Tipografía -------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-enum: "Offside", "Inter", system-ui, sans-serif;   /* reservada a la enumeración: 01, 02, 03 */

  --text-display: clamp(2.75rem, 1.6rem + 3.2vw, 4.25rem);  /* 44 → 68 px, titular de portada */
  --text-h1: clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem);         /* 40 → 56 px, titular de página */
  --text-h2: clamp(2rem, 1.4rem + 1.9vw, 2.75rem);          /* 32 → 44 px, titular de sección */
  --text-h3: clamp(1.25rem, 1.1rem + .4vw, 1.375rem);       /* 20 → 22 px, título de tarjeta */
  --text-h4: 1.0625rem;                                     /* 17 px, título de lista */
  --text-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);     /* 17 → 20 px, entradilla */
  --text-body: 1rem;                                        /* 16 px */
  --text-small: .90625rem;                                  /* 14,5 px, texto de tarjeta */
  --text-caption: .8125rem;                                 /* 13 px, pies de imagen y notas */
  --text-kicker: .8125rem;                                  /* 13 px, en mayúsculas */
  --text-stat: clamp(1.625rem, 1.4rem + .6vw, 1.875rem);    /* 26 → 30 px, cifra de tarjeta */
  --text-stat-xl: clamp(2.25rem, 1.8rem + 1.3vw, 2.875rem); /* 36 → 46 px, cifra de historia */
  --text-enum: 1.375rem;                                    /* 22 px, Offside en listas */
  --text-enum-xl: clamp(1.75rem, 1.5rem + .8vw, 2.125rem);  /* 28 → 34 px, Offside en principios */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-display: 1.02;
  --leading-heading: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.5;

  --tracking-display: -.03em;
  --tracking-heading: -.02em;
  --tracking-kicker: .18em;
  --tracking-enum: .02em;

  /* ---- Espacio (base 4 px) ----------------------------------------------- */
  --space-1: .25rem;   /* 4 */
  --space-2: .5rem;    /* 8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --section-y: clamp(4.375rem, 2.9rem + 4.2vw, 6.875rem);  /* 70 → 110 px de relleno vertical */
  --stack-title: clamp(2.25rem, 1.8rem + 1.3vw, 3.125rem); /* 36 → 50 px del titular al contenido */

  /* ---- Maquetación ------------------------------------------------------- */
  --container: 1240px;                                   /* ancho máximo con el margen incluido */
  --gutter: clamp(1.375rem, .9rem + 1.6vw, 2.5rem);      /* 22 → 40 px de margen lateral */
  --grid-gap: clamp(1rem, .8rem + .6vw, 1.375rem);       /* 16 → 22 px entre tarjetas */
  --nav-h: 84px;
  --nav-h-mobile: 68px;

  /* ---- Radios ------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;    /* botones, campos */
  --radius-lg: 18px;    /* capturas */
  --radius-xl: 22px;    /* tarjetas de pestaña, de pilar y de capacidad */
  --radius-2xl: 26px;   /* tarjeta de historia y banda */
  --radius-3xl: 28px;   /* tarjeta de foto y banda de contacto */
  --radius-pill: 999px; /* etiquetas */

  /* ---- El corte del símbolo --------------------------------------------- */
  /* Las tarjetas recortan la esquina superior derecha con el ángulo de las piezas
     del logotipo (33°): 44 × 28 px, con los dos vértices del corte redondeados a 6 px.
     Máscara de tres capas: la esquina, la franja superior y el resto de la tarjeta. */
  --cut-w: 44px;
  --cut-h: 28px;
  --cut-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 34'%3E%3Cpath d='M0 0Q6 0 11.06 3.22L44.94 24.78Q50 28 50 34H0Z'/%3E%3C/svg%3E") right top / 50px 34px no-repeat,
    linear-gradient(#000 0 0) left top / calc(100% - 49px) 34px no-repeat,
    linear-gradient(#000 0 0) left 33px / 100% calc(100% - 33px) no-repeat;

  /* ---- Sombras ----------------------------------------------------------- */
  --shadow-card: 0 12px 50px rgba(0, 48, 72, .14);
  --shadow-shot-light: 0 20px 60px rgba(0, 48, 72, .20);
  --shadow-shot-dark: 0 30px 80px rgba(0, 10, 20, .55);

  /* ---- Movimiento -------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Capas ------------------------------------------------------------- */
  --z-nav: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* ---- v5: cristal plano y cartel (sobre los degradados «movement») ---- */
  --font-cartel: "Unbounded", "Inter", system-ui, sans-serif;  /* 200 cifras de cartel, 300 líneas de cartel */
  --glass-bg: rgb(0 31 48 / .16);
  --glass-border: rgb(255 255 255 / .32);
  --glass-blur: 28px;
  --glass-radius: 24px;
  --glass-fallback: rgb(0 30 46 / .9);
}

/* Puntos de corte (no admiten variables en @media):
   sm  700px   una columna bajo este ancho
   md  1024px  menú completo desde este ancho; bajo él, botón de menú
   lg  1280px  escritorio amplio */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}

/* ==== tokens/fonts.css ==== */
/* Harpe · fuentes web (subconjunto latino, WOFF2), servidas desde /assets/fonts. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Offside"; src: url("/assets/fonts/offside-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Símbolos de las cartas del equipo: una cara por peso. Con un rango de pesos (400 700), Chromium elige esta cara y deja el texto latino sin Inter. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-symbols-700.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0127, U+03A9, U+03BB, U+03C0, U+03C6, U+2075-2076, U+2202, U+2211, U+221E, U+222B, U+2295, U+25C7; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-symbols-700.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0127, U+03A9, U+03BB, U+03C0, U+03C6, U+2075-2076, U+2202, U+2211, U+221E, U+222B, U+2295, U+25C7; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-symbols-700.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0127, U+03A9, U+03BB, U+03C0, U+03C6, U+2075-2076, U+2202, U+2211, U+221E, U+222B, U+2295, U+25C7; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-symbols-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0127, U+03A9, U+03BB, U+03C0, U+03C6, U+2075-2076, U+2202, U+2211, U+221E, U+222B, U+2295, U+25C7; }
/* Tipografía de cartel (libro de marca v5): cifras gigantes y líneas de cartel. No se precarga. */
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

/* ==== reference/css/harpe.css ==== */
/* ==========================================================================
   Harpe · estilos de la referencia de harpe.live
   Usa las variables de tokens/tokens.css. Cada bloque es un componente de
   docs/COMPONENTES.md con el mismo nombre.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-onyx);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";   /* a de un piso y 1 con base en Inter */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-azure); text-underline-offset: .18em; }
a:hover { color: var(--color-azure-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4, .h-display, .h1, .h2, .h3, .h4 { font-weight: var(--weight-bold); text-wrap: balance; }
p { text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .section--dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible,
.site-footer :focus-visible, .mobile-menu :focus-visible, .cta-banner :focus-visible { outline-color: var(--color-focus-on-dark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-skip);
  background: var(--color-paper); color: var(--color-navy); font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ---- Maquetación --------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-paper-2); }
.section--dark { background: var(--color-navy); color: var(--color-on-dark); }
.section--flush-top { padding-top: 0; }
.stack-title { margin-top: var(--stack-title); }

/* Grano sobre degradados: tapa las bandas de compresión */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/img/grain.png"); opacity: .09; mix-blend-mode: overlay;
}

/* ---- Tipografía ---------------------------------------------------------- */
.kicker {
  font-size: var(--text-kicker); font-weight: var(--weight-bold); letter-spacing: var(--tracking-kicker);
  text-transform: uppercase; color: var(--color-azure);
}
.on-dark .kicker, .section--dark .kicker, .hero .kicker, .page-hero .kicker, .mobile-menu .kicker { color: var(--color-mist); }
.h-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.h1 { font-size: var(--text-h1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.h2 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); max-width: 21em; }
.h3 { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: -.01em; }
.h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
.lead { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--color-charcoal); max-width: 38em; }
.section--dark .lead, .on-dark .lead { color: var(--color-on-dark-2); }
.small { font-size: var(--text-small); line-height: var(--leading-body); color: var(--color-charcoal); }
.caption { font-size: var(--text-caption); line-height: 1.45; color: var(--color-muted); }
.on-dark .caption { color: var(--color-azure-light); }
.enum { font-family: var(--font-enum); font-weight: 400; letter-spacing: var(--tracking-enum); font-variant-numeric: tabular-nums; }

.section-head .kicker + .h2, .section-head .kicker + .h1 { margin-top: var(--space-4); }
.section-head .lead { margin-top: var(--space-4); }
.section-head--split { display: grid; grid-template-columns: 1fr auto; gap: var(--space-10); align-items: end; }

/* ---- Botones y enlaces --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: .9375rem; font-weight: var(--weight-semibold); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn--light { background: var(--color-paper); color: var(--color-navy); }
.btn--light:hover { background: var(--color-azure-light); color: var(--color-navy); }
.btn--dark { background: var(--color-navy); color: var(--color-on-dark); }
.btn--dark:hover { background: var(--color-azure); color: var(--color-on-dark); }
.btn--glass {
  background: rgba(255, 255, 255, .12); color: var(--color-on-dark); border-color: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .22); color: var(--color-on-dark); }
.btn--soft { background: var(--color-tint); color: var(--color-navy); border-color: #D5E3EA; }
.btn--soft:hover { background: var(--color-azure-light); color: var(--color-navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow { font-weight: var(--weight-bold); color: var(--color-onyx); text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin var(--dur) var(--ease); }
.link-arrow:hover { color: var(--color-azure); }

/* ---- Etiquetas ----------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); font-size: .875rem; font-weight: var(--weight-semibold); line-height: 1.2;
  background: var(--color-tint); border: 1px solid #D5E3EA; color: var(--color-onyx); text-decoration: none;
}
.chip--dark { background: transparent; border-color: rgba(255, 255, 255, .42); color: var(--color-on-dark); }
a.chip:hover { border-color: var(--color-azure); color: var(--color-azure); }
a.chip--dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---- Cabecera y navegación ----------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); color: var(--color-on-dark);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease; }
/* The bar goes with the reader. Carlos: «cuando hagas scroll hacia abajo la
   barra te acompañe con el fondo rollo cristal». Over the hero it stays clear;
   once the page moves, menu.js adds .is-scrolled and the bar turns to glass in
   the night blue, so the white links keep reading over white sections. */
.site-header.is-scrolled {
  background-color: rgb(0 22 36 / .72);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom-color: rgb(255 255 255 / .12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background-color: var(--glass-fallback); } }
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled { background-color: var(--glass-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
/* Anchors land below the fixed bar, not under it. */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
.site-header .container { display: flex; align-items: center; gap: var(--space-8); height: var(--nav-h); }
.brand { display: inline-flex; flex: none; }
.brand img { height: 30px; width: auto; }
.site-nav { margin-left: auto; }
.nav-links { display: flex; gap: var(--space-8); padding: 0; list-style: none; }
.nav-links a {
  position: relative; display: inline-block; padding: var(--space-2) 0; color: #DCEAF1;
  font-size: .9375rem; font-weight: var(--weight-medium); text-decoration: none;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-mist); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: var(--space-2); }
.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .32); border-radius: var(--radius-md); cursor: pointer; color: #fff;
}
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column;
  color: var(--color-on-dark);
  background: radial-gradient(90% 45% at 105% -5%, rgba(0, 99, 142, .95), rgba(0, 99, 142, 0) 70%), var(--color-night);
  padding: 0 var(--gutter) var(--space-8); overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h-mobile); flex: none; }
.mobile-menu__top img { height: 26px; width: auto; }
.mobile-menu__close { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); border-radius: var(--radius-md); color: #fff; cursor: pointer; }
.mobile-menu__close svg { width: 20px; height: 20px; }
.mobile-menu__label { margin-top: var(--space-8); }
.mobile-menu ul { list-style: none; padding: 0; margin-top: var(--space-3); border-top: 1px solid var(--color-line-dark); }
.mobile-menu li a {
  display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line-dark);
  font-size: 1.625rem; font-weight: var(--weight-bold); letter-spacing: -.01em; color: #fff; text-decoration: none;
}
.mobile-menu li a .enum { font-size: 1rem; color: var(--color-mist); min-width: 2.2em; }
.mobile-menu li a[aria-current="page"] { color: var(--color-mist); }
.mobile-menu__cta { margin-top: var(--space-8); }
.mobile-menu__cta .btn { width: 100%; }
.mobile-menu__foot { margin-top: auto; padding-top: var(--space-8); font-size: .875rem; color: var(--color-azure-light); }
body.menu-open { overflow: hidden; }

@media (max-width: 1023px) {
  .site-header .container { height: var(--nav-h-mobile); }
  .brand img { height: 26px; }
  .site-nav, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---- Portada ------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--color-on-dark); background: var(--color-night);
  padding: calc(var(--nav-h) + clamp(3rem, 1rem + 5vw, 5.5rem)) 0 clamp(4.5rem, 3rem + 4vw, 7.5rem);
}
.hero__bg, .page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img, .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg img { object-position: 18% 50%; }   /* en móvil se ve la zona oscura del degradado */
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: var(--space-12); align-items: center; }
.hero__copy { container-type: inline-size; }
.hero .h-display { margin-top: var(--space-5); font-size: clamp(2rem, calc(100cqw / 8.3), 4.25rem); }   /* «Superinteligencia» cabe en una línea */
.hero__lead { margin-top: var(--space-5); font-size: var(--text-lead); line-height: 1.45; color: #DCEAF1; max-width: 30em; }
.hero .btn-row { margin-top: var(--space-8); }
.hero .chips { margin-top: var(--space-8); }

/* ---- Captura de producto ------------------------------------------------- */
.shot { margin: 0; }
.shot__frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow-shot-light); background: var(--color-ui-bg); }
.shot--dark .shot__frame { border-color: rgba(255, 255, 255, .25); box-shadow: var(--shadow-shot-dark); }
.shot__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-muted); }
.shot--dark figcaption { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(0, 20, 32, .55); color: #DCEAF1; }

/* ---- El corte del símbolo ----------------------------------------------- */
/* Pilares, capacidades, pasos y principios recortan la esquina superior derecha con el
   ángulo de las piezas del logotipo. Sin líneas laterales ni bordes de color. El fondo
   va en ::before con --cut-mask (tokens.css): el corte funciona sobre cualquier fondo y
   no recorta lo que sale de la tarjeta, como la flecha entre pasos. Cada tarjeta fija
   su color con --card-bg. Para otra tarjeta, añade la clase .cut. */
.cut, .pillar, .tile, .flow__step, .principle-card { position: relative; isolation: isolate; }
.cut::before, .pillar::before, .tile::before, .flow__step::before, .principle-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--card-bg, var(--color-tint));
  -webkit-mask: var(--cut-mask); mask: var(--cut-mask);
}

/* ---- Pilares: Ergonómico, Robusto, Actualizado --------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }
.pillar { --card-bg: var(--color-tint); border-radius: var(--radius-xl); padding: var(--space-8); }
.pillar__sub { display: block; margin-top: var(--space-1); font-size: .875rem; font-weight: var(--weight-semibold); color: var(--color-azure); }
.pillar p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-charcoal); }
.icon-nn { width: 240px; }

/* ---- Tarjeta de historia ------------------------------------------------- */
.stories { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }
.story {
  --glow-y: 60%;              /* altura del brillo lateral: cambia en cada tarjeta de la serie */
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  height: 520px; border-radius: var(--radius-2xl); color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .3) 100%),
    radial-gradient(ellipse 46% 24% at 102% var(--glow-y), rgba(18, 162, 236, .92) 0%, rgba(18, 162, 236, .55) 38%, rgba(18, 162, 236, 0) 72%),
    var(--gradient-story-sky);
}
.story:nth-child(4n + 2) { --glow-y: 52%; }
.story:nth-child(4n + 3) { --glow-y: 64%; }
.story:nth-child(4n + 4) { --glow-y: 56%; }
.story::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/img/grain.png"); opacity: .1; mix-blend-mode: overlay; }
.story__bar { position: absolute; left: 18px; right: 18px; top: 16px; z-index: 2; display: flex; gap: 6px; }
.story__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.story__bar i.on { background: #fff; }
.story__who { position: absolute; left: 18px; top: 30px; z-index: 2; display: flex; align-items: center; gap: var(--space-2); font-size: .875rem; font-weight: var(--weight-semibold); }
.story__who span { width: 30px; height: 30px; border-radius: 50%; background: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.story__who img { height: 15px; width: auto; }
.story__ghost {
  position: absolute; z-index: 1; top: 13%; left: 50%; transform: translateX(-50%);
  font-size: 80cqw; font-weight: var(--weight-bold); line-height: .78; letter-spacing: -.045em; white-space: nowrap;
  background: var(--gradient-story-ghost); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .92; pointer-events: none; user-select: none;
}
.story__ghost[data-len="2"] { font-size: 72cqw; }
.story__ghost[data-len="3"] { left: -5%; transform: none; font-size: 60cqw; }
.story__body { position: absolute; left: 24px; right: 22px; top: 56%; z-index: 2; }   /* posición fija: las cifras de la serie quedan alineadas */
.story__value { display: block; font-size: var(--text-stat-xl); font-weight: var(--weight-bold); letter-spacing: -.02em; line-height: 1; }
.story__label { display: block; margin-top: var(--space-2); font-size: 1.1875rem; font-weight: var(--weight-medium); color: #E4EEF3; }
.story__text { margin-top: var(--space-4); font-size: .875rem; line-height: 1.5; color: var(--color-azure-light); }

/* ---- Principios ---------------------------------------------------------- */
.principles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 var(--space-6); padding: 0; list-style: none; border-top: 2px solid var(--color-azure); }
.principle { padding-top: var(--space-6); }
.principle .enum { display: block; font-size: var(--text-enum-xl); line-height: 1; color: var(--color-azure); }
.principle .h4 { margin: var(--space-4) 0 var(--space-2); }
.principle p { font-size: var(--text-small); color: var(--color-charcoal); }

/* ---- Tarjeta de pestaña (productos) -------------------------------------- */
.tabcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }
.tabcards--3 { grid-template-columns: repeat(3, 1fr); }
.tabcard {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 470px; overflow: hidden;
  background: var(--color-panel); border-radius: var(--radius-xl);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tabcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tabcard:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tabcard__media { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); height: 170px; }
.tabcard__media > * { grid-area: 1 / 1; }
.tabcard__media img { width: 100%; height: calc(100% - 6px); min-height: 0; object-fit: cover; }   /* deja una franja de 6 px del color del panel */
.tabcard__tag {
  align-self: start; justify-self: end; margin: 18px 18px 0; text-align: right; color: #fff;
  font-size: .6875rem; font-weight: var(--weight-bold); letter-spacing: .12em; text-transform: uppercase;
}
.tabcard__tab {               /* pestaña: esquina redondeada a la izquierda y bajada en diagonal a la derecha */
  align-self: end; justify-self: start; width: calc(80% + 58px); height: 48px; border-top-left-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 48'%3E%3Cpath d='M0 0H4C11 0 15 2 19 7L58 48H0Z' fill='%23EEF2F4'/%3E%3C/svg%3E") right bottom / 58px 48px no-repeat,
    linear-gradient(var(--color-panel), var(--color-panel)) left bottom / calc(100% - 57px) 100% no-repeat;
}
.tabcard__tab .h3 { padding: 14px 0 0 22px; font-size: 1.25rem; white-space: nowrap; }
.tabcard__tab a { color: var(--color-onyx); text-decoration: none; }
.tabcard__tab a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* toda la tarjeta enlaza */
.tabcard__tab a:focus-visible { outline: none; }
.tabcard__body { padding: var(--space-3) var(--space-6) 0 22px; }
.tabcard__body p { font-size: var(--text-small); line-height: 1.5; color: var(--color-charcoal); }
.tabcard__body .tabcard__who { margin-top: var(--space-3); font-size: .8125rem; color: var(--color-muted); }
.tabcard__who b { color: var(--color-azure); }
.tabcard__foot {
  margin: auto 22px 22px; padding-top: var(--space-4); border-top: 1px solid var(--color-line-strong);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.tabcard__stat b { display: block; font-size: var(--text-stat); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.tabcard__stat small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--color-muted); }
.tabcard .link-arrow { font-size: 1rem; }

/* ---- Cadena: pasos en fila ----------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding: 0; list-style: none; }
.flow--3 { grid-template-columns: repeat(3, 1fr); }
.flow__step { --card-bg: var(--color-tint); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6) var(--space-8); }
.flow__step:not(:last-child)::after {
  content: "›"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%);
  font-size: 2rem; line-height: 1; font-weight: var(--weight-bold); color: var(--color-azure);
}
.flow__step--accent { --card-bg: var(--color-navy); color: var(--color-on-dark); }
.flow__k { display: flex; gap: var(--space-2); align-items: baseline; font-size: .8125rem; font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-azure); }
.flow__k .enum { font-size: 1rem; letter-spacing: var(--tracking-enum); }
.flow__step--accent .flow__k { color: var(--color-mist); }
.flow__step .h3 { margin: var(--space-2) 0 var(--space-3); }
.flow__step p { font-size: var(--text-small); color: var(--color-charcoal); }
.flow__step--accent p { color: var(--color-on-dark-2); }
.note-band {
  margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-navy); color: var(--color-on-dark-2); font-size: 1.0625rem; line-height: 1.5;
}
.note-band b { color: #fff; }
.note-band--light { background: var(--color-tint); color: var(--color-charcoal); }
.note-band--light b { color: var(--color-onyx); }

/* ---- Banda de producto ---------------------------------------------------- */
.band {
  position: relative; isolation: isolate; overflow: hidden; min-height: 300px; border-radius: var(--radius-2xl);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-10) var(--space-12); color: #fff; background: var(--color-navy);
}
.band > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.band__title { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); letter-spacing: var(--tracking-heading); line-height: 1.05; }
.band p { margin-top: var(--space-2); font-size: 1.125rem; color: var(--color-on-dark-2); }

/* ---- Lista numerada ------------------------------------------------------ */
.nlist { padding: 0; list-style: none; }
.nlist li { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); font-size: 1rem; line-height: 1.5; color: var(--color-charcoal); }
.nlist .enum { flex: 0 0 2.2em; font-size: var(--text-enum); line-height: 1.1; color: var(--color-azure); }
.nlist b { color: var(--color-onyx); }

/* ---- Bloque a dos columnas ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; }
.split--rev { grid-template-columns: 1.45fr 1fr; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--1-2 { grid-template-columns: 1fr 2fr; }
.split--top { align-items: start; }
.more { margin-top: var(--space-6); }

/* ---- Tarjeta de foto (misión) -------------------------------------------- */
.photocard { background: var(--color-paper); border-radius: var(--radius-3xl); padding: 14px; box-shadow: var(--shadow-card); }
.photocard__media { position: relative; height: 360px; border-radius: 20px; overflow: hidden; color: #fff; }
.photocard__media > img { width: 100%; height: 100%; object-fit: cover; }
.photocard__title { position: absolute; left: 30px; bottom: 28px; }
.photocard__title b { display: block; font-size: 1.625rem; line-height: 1.2; }
.photocard__title small { display: block; margin-top: var(--space-1); font-size: .9375rem; color: var(--color-on-dark-2); }
.photocard__action {
  position: absolute; right: 26px; bottom: 24px; padding: var(--space-4) var(--space-8); border-radius: 16px;
  background: rgba(60, 70, 72, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 1.125rem; font-weight: var(--weight-semibold);
}
.photocard__info { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) 22px var(--space-3); }
.photocard__mission b { display: block; font-size: 1.0625rem; }
.photocard__mission small { display: block; font-size: .8125rem; color: var(--color-muted); }
.photocard__stats { display: flex; gap: var(--space-8); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.photocard__stats b { display: block; font-size: 1.5rem; line-height: 1.15; white-space: nowrap; }
.photocard__stats small { font-size: .8125rem; color: var(--color-muted); }
.photocard__map { flex: 0 0 170px; height: 110px; border-radius: 18px; background: #F4F6F7; display: flex; align-items: center; justify-content: center; }
.photocard__map img { width: 90%; }
.photocard__cap { padding: 4px 22px 10px; }

/* ---- Pasos verticales ---------------------------------------------------- */
.steps { padding: 0; list-style: none; counter-reset: paso; }
.steps li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.steps .enum {
  flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--color-azure); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .875rem;
}
.steps li:last-child .enum { background: var(--color-navy); }
.steps b { display: block; font-size: 1.0625rem; }
.steps p { margin-top: 2px; font-size: var(--text-small); color: var(--color-charcoal); }

/* ---- Lista de seguridad (sobre oscuro) ----------------------------------- */
.slist { padding: 0; list-style: none; border-top: 1px solid var(--color-line-dark); }
.slist li { display: grid; grid-template-columns: 70px minmax(200px, 260px) 1fr; gap: 0 var(--space-4); align-items: baseline; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line-dark); }
.slist .enum { font-size: 1.875rem; line-height: 1; color: var(--color-mist); }
.slist__t { font-size: 1.125rem; line-height: 1.35; }
.slist p { font-size: 1rem; line-height: 1.5; color: var(--color-on-dark-2); }
.slist--light { border-top-color: var(--color-line); }
.slist--light li { border-bottom-color: var(--color-line); }
.slist--light .enum { color: var(--color-azure); }
.slist--light p { color: var(--color-charcoal); }

.principle-card { --card-bg: var(--color-navy); color: #fff; border-radius: var(--radius-xl); padding: var(--space-8); }
.principle-card .kicker { color: var(--color-mist); }
.principle-card blockquote { margin-top: var(--space-4); font-size: 1.375rem; font-weight: var(--weight-bold); line-height: 1.3; }
.principle-card p { margin-top: var(--space-6); font-size: var(--text-small); color: var(--color-azure-light); }

/* ---- Rejilla de capacidades ---------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tile { --card-bg: var(--color-tint); border-radius: var(--radius-xl); padding: var(--space-6) 22px var(--space-6); }
.tile .h4 { font-size: 1.0625rem; }
.tile__sub { display: block; margin-top: 2px; font-size: .8125rem; font-weight: var(--weight-semibold); color: var(--color-azure); }
.tile p { margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.5; color: var(--color-charcoal); }
.tile--dark { --card-bg: var(--color-navy); color: #fff; }
.tile--dark p { color: var(--color-on-dark-2); }
.tile--dark .tile__sub { color: var(--color-mist); }
.tile--cta { padding: var(--space-8); }
.tile--cta .h3 { margin-top: var(--space-3); }
.tile--cta > p:not(.kicker):not(.caption) { margin: var(--space-3) 0 var(--space-6); font-size: 1rem; }
.tile--cta .caption { margin-top: var(--space-3); }

/* ---- Banda de cifras ----------------------------------------------------- */
.statband { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;
  border-radius: var(--radius-2xl); background: var(--gradient-stat-band); color: #fff; padding: 0; list-style: none; }
.stat { position: relative; z-index: 1; padding: var(--space-10) var(--space-8) var(--space-10); }
.stat + .stat { border-left: 1px solid var(--color-line-dark); }
.stat b { display: block; font-size: clamp(2rem, 1.7rem + .9vw, 2.5rem); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.stat__label { display: block; margin-top: var(--space-2); font-size: .8125rem; font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-mist); }
.stat p { margin-top: var(--space-4); font-size: .9375rem; line-height: 1.45; color: var(--color-on-dark-2); }
.stat-note { margin-top: var(--space-4); font-size: .875rem; color: var(--color-muted); max-width: 44em; }

/* ---- Filas de etiquetas -------------------------------------------------- */
.chiprows { padding: 0; list-style: none; }
.chiprow { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); padding: var(--space-5) 0 var(--space-3); border-top: 1px solid var(--color-line); }
.chiprow:first-child { border-top: 5px solid var(--color-azure); }
.chiprow .h3 { padding-top: var(--space-1); }
.chiprow .chips { gap: var(--space-3); }

/* ---- Banda de contacto --------------------------------------------------- */
.cta-wrap { padding-bottom: var(--section-y); }
.cta-wrap--dark { background: var(--color-navy); }
.cta-banner {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-3xl);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.375rem) clamp(1.75rem, 1rem + 3vw, 4rem); color: #fff; background: var(--color-navy);
}
.cta-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-banner > div, .cta-banner > a, .band > div, .band > a, .statband > li { position: relative; z-index: 1; }
.cta-banner .h2 { color: #fff; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem); }
.cta-banner p { margin-top: var(--space-3); font-size: 1.125rem; color: #DCEAF1; }

/* ---- Pie ----------------------------------------------------------------- */
.site-footer { background: var(--color-footer); color: var(--color-on-dark-3); padding: var(--space-16) 0 var(--space-10); font-size: .875rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }
.site-footer img { height: 28px; width: auto; }
.site-footer p { margin-top: var(--space-4); line-height: 1.6; }
.site-footer h2 { font-size: .875rem; color: #fff; margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--color-on-dark-3); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: .8125rem; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__legal li + li { margin-top: 0; }

/* ---- Cabecera de página interior ----------------------------------------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--color-on-dark); background: var(--color-night);
  padding: calc(var(--nav-h) + clamp(2.5rem, 1rem + 4vw, 4.5rem)) 0 clamp(8rem, 5rem + 10vw, 14rem);
}
.page-hero--short { padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.page-hero__inner { position: relative; z-index: 1; max-width: 50rem; }
.page-hero .h1 { margin-top: var(--space-4); }
.page-hero .lead { margin-top: var(--space-5); color: #DCEAF1; }
.page-hero .btn-row { margin-top: var(--space-8); }
.page-hero .chips { margin-top: var(--space-6); }
.breadcrumb { margin-bottom: var(--space-8); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; font-size: .875rem; color: var(--color-azure-light); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-mist); }
.breadcrumb a { color: var(--color-azure-light); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }
.page-shot { position: relative; z-index: 2; margin-top: calc(-1 * clamp(6rem, 3.5rem + 8vw, 11rem)); }

/* ---- Formulario ---------------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label, .field .field__label { font-size: .875rem; font-weight: var(--weight-semibold); color: var(--color-onyx); }
.field .opt { font-weight: var(--weight-regular); color: var(--color-muted); }
.input {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-field-border); background: var(--color-paper); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover { border-color: var(--color-azure); }
.input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px rgba(11, 99, 200, .25); }
textarea.input { min-height: 140px; resize: vertical; }
select.input { appearance: none; padding-right: var(--space-10);
  background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300638E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.field__help { font-size: .8125rem; color: var(--color-muted); }
.field__error { display: none; font-size: .8125rem; font-weight: var(--weight-semibold); color: var(--color-error); }
.field.is-invalid .input { border-color: var(--color-error); background: var(--color-error-bg); }
.field.is-invalid .field__error { display: block; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--color-charcoal); }
.check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-azure); }
.form__legal { grid-column: 1 / -1; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-paper-2); font-size: .8125rem; line-height: 1.55; color: var(--color-muted); }
.form__legal b { color: var(--color-charcoal); }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.alert { grid-column: 1 / -1; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: .9375rem; }
.alert--ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #BFE3CF; }
.alert--warn { background: #FFF6E8; color: #7A4A00; border: 1px solid #F3D6A6; }
.aside-card { background: var(--color-paper-2); border-radius: var(--radius-xl); padding: var(--space-8); }
.aside-card dl { margin-top: var(--space-4); }
.aside-card dt { margin-top: var(--space-4); font-size: .8125rem; font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.aside-card dd { margin: var(--space-1) 0 0; font-size: 1rem; font-weight: var(--weight-semibold); }

/* ---- Texto legal --------------------------------------------------------- */
.prose { max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; color: var(--color-charcoal); }
.prose h2 { margin-top: var(--space-12); font-size: 1.5rem; line-height: 1.25; color: var(--color-onyx); }
.prose h3 { margin-top: var(--space-8); font-size: 1.125rem; color: var(--color-onyx); }
.prose p, .prose ul, .prose table { margin-top: var(--space-4); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--color-line); }
.prose th { width: 34%; color: var(--color-onyx); }
.todo { background: #FFF1C2; color: #5C4400; padding: 0 .3em; border-radius: 4px; font-weight: var(--weight-semibold); }

/* ---- Quiénes somos ------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-16); align-items: start; }
.about__text > p { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--color-charcoal); margin-top: var(--space-5); }
.about__text .section-head { margin-bottom: var(--space-2); }
.about__facts { margin: 0; padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-navy); color: var(--color-on-dark); }
.about__facts div + div { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line-dark); }
.about__facts dt { font-size: var(--text-kicker); font-weight: var(--weight-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-mist); }
.about__facts dd { margin: var(--space-1) 0 0; font-size: 1.0625rem; font-weight: var(--weight-semibold); }

/* ---- Cartas del equipo: carta de arte completo y minimalista, guiño a los juegos de cartas ---- */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--grid-gap); padding: 0; list-style: none; }
.tcard {
  --card-1: var(--color-card-azure-1); --card-2: var(--color-card-azure-2); --card-3: var(--color-card-azure-3);
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 63 / 88;
  border-radius: 16px; background: var(--color-night); color: var(--color-on-dark);
  box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tcard:hover, .tcard:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-shot-light); }
.tcard--sky { --card-1: var(--color-card-sky-1); --card-2: var(--color-card-sky-2); --card-3: var(--color-card-sky-3); }
.tcard--violet { --card-1: var(--color-card-violet-1); --card-2: var(--color-card-violet-2); --card-3: var(--color-card-violet-3); }
.tcard--amber { --card-1: var(--color-card-amber-1); --card-2: var(--color-card-amber-2); --card-3: var(--color-card-amber-3); }
.tcard__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient-card-shade); }
/* marco fino: deja abajo una franja para el pie; la gema con el símbolo corta la línea */
.tcard::after { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; bottom: 28px; border: 1.5px solid var(--color-card-line); border-radius: 12px; pointer-events: none; }
.tcard__cost { position: absolute; top: 20px; right: 20px; display: flex; gap: 4px; }
.tcard__cost span {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .6875rem; font-weight: var(--weight-bold); line-height: 1; color: var(--card-2);
  background: var(--card-3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.tcard__body { position: absolute; left: 10px; right: 10px; bottom: 44px; min-height: 43%; }   /* alto mínimo: nombres alineados en la fila */
.tcard__tags { display: flex; align-items: center; gap: 3px; margin: 0 0 7px 14px; }
.tcard__tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 9px;
  font-size: .5625rem; font-weight: var(--weight-bold); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  background: var(--card-3); color: var(--card-2); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.tcard__tag--dark { background: rgba(0, 20, 32, .85); color: var(--color-on-dark); }
.tcard__tag img { width: 8px; height: auto; }
.tcard__band {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 5px 14px 6px 11px;
  border-left: 3px solid var(--card-1); background: linear-gradient(90deg, var(--card-2) 0%, rgba(0, 20, 32, 0) 92%);
}
.tcard__name { margin: 0; font-size: 1.3125rem; font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: -.015em; color: var(--color-on-dark); }
.tcard__stat { flex: none; font-size: .875rem; font-weight: var(--weight-bold); color: var(--color-mist); }
.tcard__role { margin: 6px 14px 0; font-size: .75rem; font-weight: var(--weight-semibold); letter-spacing: .01em; color: var(--color-mist); }
.tcard__text { margin: 8px 14px 0; font-size: .78rem; font-weight: var(--weight-medium); line-height: 1.42; color: var(--color-on-dark); }
.tcard__flavor { margin: 6px 14px 0; font-size: .75rem; font-style: italic; line-height: 1.4; color: var(--color-on-dark-2); opacity: .85; }
.tcard__gem {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: #02111B; box-shadow: 0 0 0 1.5px var(--color-card-line);
}
.tcard__gem img { width: 9px; height: auto; }
.tcard__foot { position: absolute; left: 16px; right: 16px; bottom: 8px; display: flex; justify-content: space-between; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-3); }
.tcard__foil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--gradient-foil); background-size: 260% 260%; background-position: 0% 0%;
  mix-blend-mode: soft-light; transition: background-position var(--dur-slow) var(--ease);
}
.tcard--foil:hover .tcard__foil, .tcard--foil:focus-within .tcard__foil { background-position: 100% 100%; }
.tcard--back .tcard__body { min-height: 0; }
.tcard--back .tcard__band { border-left-color: var(--color-mist); }
.tcard--back .tcard__text { margin-bottom: var(--space-4); color: var(--color-on-dark-2); font-weight: var(--weight-regular); }
.tcard--back .btn { margin-left: 14px; }
.deck__note { margin-top: var(--space-5); }
@media (prefers-reduced-motion: reduce) {
  .tcard:hover, .tcard:focus-within { transform: none; }
}

/* ---- Equipo -------------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }

/* ---- Error 404 ----------------------------------------------------------- */
.notfound { min-height: 100vh; display: flex; align-items: center; }
.notfound .enum { font-size: clamp(5rem, 3rem + 8vw, 9rem); line-height: 1; color: var(--color-mist); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
  .principles { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
@media (max-width: 1023px) {
  .hero__grid, .split, .split--rev, .split--even { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; }
  .icon-nn { width: 180px; }
  .stories, .tabcards, .tabcards--3 { grid-template-columns: repeat(2, 1fr); }
  .flow, .flow--3 { grid-template-columns: repeat(2, 1fr); }
  .flow__step::after { display: none; }
  .tiles, .tiles--3 { grid-template-columns: repeat(2, 1fr); }
  .split--1-2 { grid-template-columns: 1fr; }
  .statband { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--color-line-dark); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 699px) {
  .hero .btn-row .btn, .page-hero .btn-row .btn { flex: 1 1 100%; }
  .pillars, .principles, .tiles, .tiles--2, .tiles--3, .flow, .flow--3, .tabcards, .tabcards--3, .people { grid-template-columns: 1fr; }
  .principles { gap: 0; }
  .principle { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); }
  /* Las historias pasan a carrusel horizontal, como en una aplicación de mensajería */
  ul.stories {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-2); scroll-padding-inline: var(--gutter);
  }
  .stories::-webkit-scrollbar { display: none; }
  /* Las cartas pasan a carrusel horizontal, como una mano de cartas */
  ul.deck {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter) var(--space-4); scroll-padding-inline: var(--gutter);
  }
  .deck::-webkit-scrollbar { display: none; }
  .deck > li { scroll-snap-align: start; }
  .story { height: 470px; scroll-snap-align: start; }
  .tabcard { min-height: 0; }
  .tabcard__foot { margin-top: var(--space-6); }
  .band { min-height: 0; flex-direction: column; align-items: flex-start; padding: var(--space-8) var(--space-6); }
  .photocard__media { height: 240px; }
  .photocard__action { top: 18px; bottom: auto; right: 18px; padding: var(--space-3) var(--space-4); font-size: .875rem; border-radius: 12px; }
  .photocard__title { left: 20px; bottom: 20px; }
  .photocard__info { flex-direction: column; align-items: stretch; }
  .photocard__stats { gap: var(--space-5); flex-wrap: wrap; }
  .photocard__map { flex: none; width: 100%; height: 130px; }
  .slist li { grid-template-columns: 50px 1fr; }
  .slist p { grid-column: 2; margin-top: var(--space-1); }
  .statband { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--color-line-dark); }
  .chiprow { grid-template-columns: 1fr; gap: var(--space-3); }
  .form { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Versión 4 (octubre de 2026): selector de idioma, comparativa, galería de capturas,
   ilustración con lista, vídeo autoalojado, fundador y área de clientes
   ========================================================================== */

/* ---- Insignia de producto en la cabecera de página ---------------------- */
.page-hero__title { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
.page-hero__title .h1 { margin-top: 0; }
.page-hero__badge { display: block; flex: none; width: auto; height: 72px; filter: drop-shadow(0 10px 24px rgba(0, 10, 20, .35)); }
@media (max-width: 699px) { .page-hero__title { gap: var(--space-4); } .page-hero__badge { height: 52px; } }

/* ---- Selector de idioma (cabecera, menú móvil y pie) --------------------- */
.lang-switch {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-on-dark-2); font-size: .875rem; font-weight: var(--weight-semibold);
  letter-spacing: .06em; text-decoration: none; border: 1px solid var(--glass-border);
}
.lang-switch:hover { color: var(--color-on-dark); background: var(--color-line-dark); }
.site-header .lang-switch { margin-left: var(--space-2); }
.site-header .lang-switch:focus-visible { outline-color: var(--color-focus-on-dark); }
.mobile-menu__lang { margin-top: var(--space-5); font-size: 1rem; }
.mobile-menu__lang a { color: var(--color-mist); font-weight: var(--weight-semibold); }

/* ---- Comparativa: lo de otro frente a lo de Harpe ------------------------ */
.compare { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--grid-gap); align-items: stretch; }
.compare__col { --card-bg: var(--color-tint); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-8) var(--space-10); }
.compare__col--harpe { --card-bg: var(--color-navy); color: var(--color-on-dark); }
.compare__t { font-size: var(--text-kicker); font-weight: var(--weight-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--color-muted); }
.compare__col--harpe .compare__t { color: var(--color-mist); }
.compare__via { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.compare__via .chip { background: var(--color-paper); }
.compare__via .chip--muted { background: var(--color-line); color: var(--color-charcoal); }
.compare__wire { position: relative; flex: 1; min-width: 48px; border-top: 2px dashed var(--color-field-border); }
.compare__wire small { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: .75rem; color: var(--color-muted); white-space: nowrap; }
.compare__room { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--glass-border); }
.compare__room-k { margin-right: var(--space-2); font-size: .75rem; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--color-mist); }
.compare__room-side { margin-left: auto; font-size: .75rem; color: var(--color-mist); }
.compare__room .chip--mint { background: var(--color-success-bg); border-color: var(--color-success-bg); color: var(--color-success); font-weight: var(--weight-bold); }
.compare__list { margin-top: var(--space-6); padding: 0; list-style: none; }
.compare__list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; font-size: 1.0625rem; line-height: 1.45; color: var(--color-charcoal); }
.compare__list li + li { margin-top: var(--space-4); }
.compare__col--harpe .compare__list li { color: var(--color-on-dark); }
.cmp-ico { width: 22px; height: 22px; margin-top: 1px; color: var(--color-field-border); }
.compare__col--harpe .cmp-ico { color: var(--color-success-bg); }
.compare__example { margin-top: var(--grid-gap); padding: var(--space-6) var(--space-8) var(--space-8); border-radius: var(--radius-xl); background: var(--color-paper-2); }
.section--alt .compare__example { background: var(--color-paper); }
.compare__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--space-4); padding: 0; list-style: none; }
.compare__stats li { padding-right: var(--space-6); }
.compare__stats li + li { padding-left: var(--space-6); border-left: 1px solid var(--color-line); }
.compare__stats b { display: block; font-size: var(--text-stat); letter-spacing: -.02em; line-height: 1.1; color: var(--color-navy); white-space: nowrap; }
.compare__stats p { margin-top: var(--space-2); font-size: var(--text-small); line-height: 1.45; color: var(--color-charcoal); }

/* ---- Galería de capturas ------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); padding: 0; list-style: none; }

/* ---- Ilustración con pie ------------------------------------------------- */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.figure figcaption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-muted); }

/* ---- Vídeo autoalojado --------------------------------------------------- */
.video { margin: 0; }
.video__frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow-shot-light); background: var(--color-night); }
.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video figcaption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-muted); }

/* ---- Fundador: carta y trayectoria --------------------------------------- */
.founder { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.deck--one { grid-template-columns: 1fr; }
.founder__profile { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--color-charcoal); max-width: 40em; }
.founder__hl { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-6); padding: 0; list-style: none; }
.founder__hl li { padding-right: var(--space-5); }
.founder__hl li + li { padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
.founder__hl b { display: block; font-size: var(--text-stat); letter-spacing: -.02em; line-height: 1.1; color: var(--color-navy); }
.founder__hl span { display: block; margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-charcoal); }
.founder__k { margin-top: var(--space-8); }
.founder__xp { margin-top: var(--space-3); padding: 0; list-style: none; }
.founder__xp li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-5); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.founder__when { font-size: .8125rem; font-weight: var(--weight-bold); color: var(--color-azure); padding-top: 2px; }
.founder__xp b { color: var(--color-onyx); }
.founder__xp p { margin-top: 2px; font-size: var(--text-small); color: var(--color-charcoal); }
.founder__edu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-3); padding: 0; list-style: none; }
.founder__edu b { display: block; color: var(--color-onyx); font-size: .9375rem; }
.founder__edu span { display: block; margin-top: 2px; font-size: var(--text-small); color: var(--color-muted); }
.founder__note { margin-top: var(--space-6); }

/* ---- Área de clientes (/login) ------------------------------------------- */
.login-page { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: grid; place-items: center;
  padding: var(--space-12) var(--gutter); background: var(--color-night); }
.login { width: min(440px, 100%); padding: var(--space-10) var(--space-8) var(--space-8); border-radius: var(--radius-2xl);
  background: var(--color-paper); color: var(--color-onyx); box-shadow: var(--shadow-shot-dark); }
.login__brand img { height: 30px; width: auto; }
.login .kicker { margin-top: var(--space-6); }
.login h1 { margin-top: var(--space-2); }
.login__lead { margin-top: var(--space-2); font-size: .9375rem; color: var(--color-charcoal); }
.login__form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.login__form .btn { width: 100%; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; font-size: .875rem;
  font-weight: var(--weight-semibold); color: var(--color-charcoal); cursor: pointer; }
.seg input:checked + label { background: var(--color-navy); color: var(--color-on-dark); }
.seg input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.login__form:has(#modo-pin:checked) .field--pass, .login__form:has(#modo-pass:checked) .field--pin { display: none; }
.login__notes { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.login__links { margin-top: var(--space-6); font-size: .875rem; color: var(--color-muted); }

/* ---- Banda con imagen atenuada (texto blanco sobre la captura) ----------- */
@media (max-width: 1023px) { .band--dim > img { opacity: .4; } }

@media (max-width: 1023px) {
  .compare, .founder { grid-template-columns: 1fr; }
  .compare__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .compare__stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .gallery { grid-template-columns: 1fr; }
  .founder .deck--one { max-width: 300px; }
}
@media (max-width: 699px) {
  .compare__col { padding: var(--space-6) var(--space-5) var(--space-8); }
  .compare__room-side { margin-left: 0; width: 100%; }
  .compare__via { flex-direction: column; align-items: flex-start; gap: 0; }
  .compare__via .chip { white-space: nowrap; }
  .compare__wire { flex: none; width: 0; min-width: 0; height: 40px; margin-left: var(--space-6); border-top: 0; border-left: 2px dashed var(--color-field-border); }
  .compare__wire small { left: var(--space-3); bottom: auto; top: 50%; transform: translateY(-50%); }
  .compare__stats, .founder__hl, .founder__edu { grid-template-columns: 1fr; }
  .compare__stats li, .compare__stats li + li, .founder__hl li, .founder__hl li + li { padding: var(--space-4) 0 0; border-left: 0; }
  .compare__stats li + li, .founder__hl li + li { border-top: 1px solid var(--color-line); margin-top: var(--space-4); }
  .founder__xp li { grid-template-columns: 1fr; gap: var(--space-1); }
  .founder .deck--one { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; }
  .site-header .lang-switch { margin-left: auto; }
  .site-header .lang-switch + .nav-cta + .nav-toggle { margin-left: var(--space-2); }
}
@media (max-width: 1023px) {
  .site-header .lang-switch { margin-left: auto; }
  .site-header .nav-toggle { margin-left: var(--space-2); }
}

/* ==== reference/css/cristal.css ==== */
/* Cristal plano · libro de marca v5, secciones 04 y 07.
   Va sobre los degradados de marca («movement» o discos en Deep Azure y Mist). Velo azul noche, borde blanco fino, sin sombra.
   Texto blanco; kicker en Mist. */
.cristal {
  background-color: var(--glass-bg);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0) 33%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: none;
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cristal { background-color: var(--glass-fallback); }
}
@media (prefers-reduced-transparency: reduce) { .cristal { background-color: var(--glass-fallback); backdrop-filter: none; } }
.pastilla { display: inline-block; border: 1px solid currentColor; border-radius: var(--radius-pill); padding: 8px 20px; font-weight: 600; }
.pastilla--solida { background: #fff; color: #003048; border-color: transparent; }
.cartel-cifra { font-family: var(--font-cartel); font-weight: 200; line-height: .8; color: #BFD8E3; }
.cartel-linea { font-family: var(--font-cartel); font-weight: 300; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.cartel-linea--vertical { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ==== Atalaya pricing ==== */
/* ---- Atalaya · precios (añadido de Carlos, octubre de 2026) ----------------
   Tres planes por puesto y mes sobre la rejilla de capacidades: cada plan es una
   .tile con el corte del símbolo. Pro va en azul noche (.tile--dark) porque es el
   que se quiere mirar primero. Que los planes se mezclan lo dice la nota de debajo
   (.note-band), no la tarjeta. Mismos tokens que el resto de la hoja. */
.plan { display: flex; flex-direction: column; }
.plan__name { color: var(--color-azure); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.plan__price b { font-size: var(--text-stat-xl); letter-spacing: -.02em; line-height: 1; color: var(--color-onyx); }
.plan__price span { font-size: var(--text-small); color: var(--color-muted); }
.plan__for { margin-top: var(--space-2); font-size: .8125rem; font-weight: var(--weight-semibold); color: var(--color-azure); }
.plan__list { flex: 1; display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; font-size: var(--text-small); line-height: 1.45; color: var(--color-charcoal); }
.plan__list li { position: relative; padding-left: 22px; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--color-azure); border-bottom: 2px solid var(--color-azure); transform: rotate(-45deg); }
.plan .btn { align-self: flex-start; margin-top: var(--space-6); }
.tile--dark.plan .plan__name, .tile--dark.plan .plan__for { color: var(--color-mist); }
.tile--dark.plan .plan__price b { color: var(--color-on-dark); }
.tile--dark.plan .plan__price span, .tile--dark.plan .plan__list { color: var(--color-on-dark-2); }
.tile--dark.plan .plan__list li::before { border-color: var(--color-mist); }
@media (max-width: 1023px) { .plans { grid-template-columns: 1fr; } }   /* tres planes en columna, no 2 + 1 */

/* ==========================================================================
   What harpe.live adds to the kit's reference. Same tokens, no loose hex
   outside the three colours the reference itself writes for state.
   ========================================================================== */

/* ---- The failure notice of the form -------------------------------------- */
.alert--error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); }
/* A field in error keeps its red border, so the ring alone has to show focus. */
.input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }

/* ---- The client area ----------------------------------------------------- */
.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.chip--on { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }
a.chip--on:hover { color: var(--color-on-dark); border-color: var(--color-navy); }
.app-sample { margin: var(--space-6) 0 var(--space-10); }
.tile .tile__value { margin-top: var(--space-2); font-size: var(--text-stat); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.app-subs { margin-top: var(--grid-gap); }
.app-subs .h4 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); font-size: var(--text-small); }
.app-dl dt { color: var(--color-muted); }
.app-dl dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: .75rem;
  font-weight: var(--weight-semibold); letter-spacing: .02em; white-space: nowrap;
}
.badge--ok { background: var(--color-success-bg); color: var(--color-success); }
.badge--warn { background: #FFF6E8; color: #7A4A00; }
.table-wrap { margin-top: var(--stack-title); overflow-x: auto; border-radius: var(--radius-xl); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-line); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-5); text-align: left; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.data-table th { font-size: .75rem; font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); background: var(--color-paper-2); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td { font-variant-numeric: tabular-nums; }

/* ---- What the review of 29 September 2026 found, still true in v4 -------- */
/* A long cell of the privacy table pushed the page 4 px wide at 320. */
.prose td { overflow-wrap: anywhere; }
/* The Spanish labels broke onto two lines between 1024 and 1079 px. */
.nav-links a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) { .nav-links { gap: var(--space-5); } }
/* A white label over a light card header fell to 2.6:1; a dark chip carries it. */
.tabcard__tag { padding: 3px 8px; border-radius: var(--radius-xs); background: rgba(11, 14, 21, .72); }
/* Two-line chips touched their border top and bottom. */
.chip { padding-block: 6px; }
/* The tallest product card ran its last line into the divider. */
.tabcard__body { padding-bottom: var(--space-5); }
/* Two tinted sections in a row stacked their padding into an empty band. */
.section--alt + .section--alt { padding-top: 0; }
/* The card labels were 9 px: readable sizes, the layout unchanged. */
.tcard__tag { font-size: .6875rem; }
.tcard__foot { font-size: .625rem; }
.tcard__role { font-size: .8125rem; }
/* Phone tap targets of at least 44 px for the small links. */
@media (max-width: 699px) {
  .site-footer li a { display: inline-block; padding-block: 10px; }
  .mobile-menu__lang a { display: inline-block; padding-block: 12px; }
  .breadcrumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .link-arrow { display: inline-block; padding-block: 12px; margin-block: -12px; }
}