/* ============================================================================
   CRETAX SYSTEMS — sistema de diseño web
   Derivado de "MANUAL DE MARCA CRETAX SYSTEMS" v1.0 (2026) y de
   PLATAFORMA-MARCA-CRETAX.md. Única fuente de verdad del estilo de los tres
   sitios: web corporativa, catálogo 3D y pages.

   REGLAS DURAS QUE ESTE ARCHIVO HACE CUMPLIR
   ------------------------------------------
   · Tipografía: Questrial (OFL). El manual la asigna explícitamente a
     "diseño web (UI/UX)". Biger Over y Elemental End NO se sirven aquí:
     Elemental End es CC BY-NC-ND (prohíbe uso comercial) y bBigerOver no
     declara licencia. El logotipo va como SVG vectorial, no como texto.
   · Questrial tiene UN solo peso (400). La jerarquía se construye con
     tamaño, caja alta, tracking y color — nunca con negritas sintéticas.
   · Contraste medido (WCAG 2.1, ver README):
        azul/blanco 12.17 · magenta/blanco 5.90 · gris/blanco 5.01
        blanco/azul 12.17 · blanco/magenta 5.90 · gris-claro/azul 8.71
        magenta/azul 2.06  FALLA     gris/azul 2.43  FALLA
     => Sobre azul marino SOLO texto blanco o gris claro. El magenta sobre
        azul se usa como bloque gráfico, jamás como texto.
   · Sin emojis. Sin degradados de moda. Sin naranja ni amarillo.
   ========================================================================= */

/* ---------- 1. Tipografía ------------------------------------------------ */

/* PRIMARIA del manual — titulares de máximo impacto. Es «b Biger Over», la
   misma del logotipo, extendida con los glifos que le faltaban al español
   (Á É Í Ó Ú Ü Ñ ¿ ¡ « » — – … ·). El original trae 95 glifos y NINGÚN acento:
   sin extenderla, «AUTOMATIZACIÓN» salía con dos tipografías a media palabra.
   Se regenera con `_marca/extender_biger.py`. Pesa 3.5 KB. */
@font-face {
  font-family: 'Biger Over ES';
  src: url('fuentes/bigerover-es.woff2?v=ec672580') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

/* TERCIARIA del manual — el propio manual la asigna a «diseño web (UI/UX)».
   Cuerpos de texto, tarjetas, interfaz. */
@font-face {
  font-family: 'Questrial';
  src: url('fuentes/questrial.woff2?v=f1d48414') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* SECUNDARIA del manual — «Elemental End», de Zdenek Gromnica
   (FutureMillennium, futuremillennium.com). Es la que el diseñador usa en el
   archivo «WEB FINAL.svg» para los titulares de tarjeta, las cintas de las
   siete líneas y los dígitos de las monedas.

   ⚠️ LICENCIA: CC BY-NC-ND 3.0. Prohíbe el uso comercial Y las obras
   derivadas. Su uso aquí lo autorizó expresamente el dueño de la marca
   (2026-08-19); la licencia comercial se compra en
   futuremillennium.com/font/license — conviene tenerla por escrito.

   Por la cláusula ND se sirve el **TTF original, byte a byte**: no se
   subsetea ni se convierte a woff2, que es lo que se haría normalmente. Son
   19 KB en vez de ~9. No la «optimices».

   NO TRAE « NI » (301 puntos de código, el resto del español completo). Si le
   pones comillas angulares, esos dos caracteres caen a Questrial y la palabra
   sale con dos tipografías. Los titulares con «» van en la primaria. */
@font-face {
  font-family: 'Elemental End';
  src: url('fuentes/elemental-end.ttf?v=9122f571') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
:root {
  /* Primarios (Manual §03) */
  --azul:        #0e3858;   /* Pantone 534 C */
  --magenta:     #c2165b;   /* Pantone 214 C */
  --gris:        #706f6f;   /* Pantone 424 C */
  --blanco:      #ffffff;   /* Pantone 11-4201 */
  /* Secundarios */
  --negro:       #000000;   /* Pantone N 6C  */
  --gris-claro:  #dadada;

  /* Derivados de uso (no inventan color: son el azul con alfa) */
  --azul-900:    #0a2a42;
  --azul-700:    #14486f;
  --linea:       rgba(14, 56, 88, .14);
  --linea-osc:   rgba(255, 255, 255, .18);
  --papel:       #f4f6f8;

  /* Texto */
  --tinta:       var(--azul);
  --tinta-2:     var(--gris);
  --tinta-inv:   var(--blanco);
  --tinta-inv-2: var(--gris-claro);

  /* Métrica */
  --ancho:       1560px;   /* ensanchado 19-ago: 1180 dejaba ~210 px de aire
                              muerto a cada lado en pantallas de 1600 */
  --ancho-texto: 68ch;
  --radio:       0;          /* la marca no redondea: corta en diagonal */
  --bisel:       14px;       /* profundidad del chaflán de tarjetas */
  --paso:        clamp(3.5rem, 7vw, 6rem);  /* aire vertical de sección */

  /* Escala de espaciado — base 8, sin valores sueltos.
     Swiss Modernism: el espaciado es matemático, no "el que se vea bien". */
  --e-1: .5rem;    /*  8 */
  --e-2: 1rem;     /* 16 */
  --e-3: 1.5rem;   /* 24 */
  --e-4: 2rem;     /* 32 */
  --e-5: 3rem;     /* 48 */
  --e-6: 4rem;     /* 64 */
  --e-7: 6rem;     /* 96 */

  /* Retícula de 12 columnas */
  --columnas: 12;
  --canal: var(--e-3);

  /* Familias */
  --fuente-display: 'Biger Over ES', 'Questrial', system-ui, sans-serif;
  /* Elemental End es de caja única: las MAYÚSCULAS son las formas
     alternativas (Ǝ, Ɔ, Λ) y las minúsculas las estándar. El diseñador usa
     unas u otras según la pieza — se controla con `text-transform`. */
  --fuente-secundaria: 'Elemental End', 'Biger Over ES', 'Questrial', system-ui, sans-serif;
  --fuente-texto:   'Questrial', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica — tercera menor (1.25), fluida */
  --t-xs:  .75rem;
  --t-sm:  .875rem;
  --t-md:  clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --t-lg:  clamp(1.3rem,  1.2rem + .5vw, 1.6rem);
  --t-xl:  clamp(1.7rem,  1.4rem + 1.4vw, 2.5rem);
  --t-2xl: clamp(2.2rem,  1.6rem + 2.6vw, 3.6rem);

  /* Tracking. La display ya es ancha de por sí: pide MENOS que Questrial. */
  --tracking-display: .01em;
  --tracking-titular: .06em;
  /* MEDIDO: «LAS SIETE LÍNEAS, EN DETALLE» mide 286,4 en el archivo a 19,13 px.
     Con .02em salen 285,8; con el .24em que yo tenía, 403,7 — un 41 % más largo.
     Ese estirón metía los antetítulos por debajo de las trazas decorativas. */
  --tracking-eyebrow: .02em;

  /* Movimiento — 150-300ms en microinteracción, ease-out al entrar */
  --vel-rapida: 160ms;
  --vel-media:  240ms;
  --curva:      cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Questrial solo trae peso 400: pedir negrita hace que el navegador la SINTETICE
   (engorda los trazos y ensucia el gris). Se neutraliza aquí para que ningún
   fragmento la reintroduzca por descuido; el énfasis se da con caja alta,
   tamaño y color. */
b, strong { font-weight: 400; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
}

::selection { background: var(--magenta); color: var(--blanco); }

/* ---------- 4. Retícula -------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  /* MEDIDO en el archivo del diseñador: las tarjetas de servicio van de x 75,06
     a 1124,99 sobre el lienzo de 1200 -> columna de 1049,93 con márgenes
     SIMÉTRICOS de 75,06, que son el 6,255 % del lienzo. El `3vw` anterior daba
     36 px a 1200: la columna salía 78 px más ancha que la del diseño y arrastraba
     de lado todo lo que cuelga de ella (cintas, iconos, discos).
     El tope de 6,1rem (97,6 px) es ese mismo 6,255 % del lienzo de 1560, para que
     por encima de ese ancho la proporción se mantenga en vez de dispararse. */
  padding-inline: min(6.255vw, 6.1rem);
}

.seccion { padding-block: var(--paso); }

.seccion--azul  { background: var(--azul);  color: var(--tinta-inv); }
.seccion--papel { background: var(--papel); }
.seccion--mag   { background: var(--magenta); color: var(--tinta-inv); }

.seccion--azul .apoyo { color: var(--tinta-inv-2); }   /* gris claro/azul = 8.71, pasa */
/* Sobre MAGENTA el gris claro se queda corto: 4.22, falla texto normal.
   Ahí el texto de apoyo va en blanco puro (5.90). */
.seccion--mag  .apoyo { color: var(--blanco); }

/* ---------- 5. Tipografía aplicada --------------------------------------- */
/* Un solo peso: la jerarquía es tamaño + caja + tracking + color. */

.eyebrow {
  display: block;
  font-size: .72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 1rem;
}
.seccion--azul .eyebrow { color: var(--tinta-inv); opacity: .78; }
/* Sobre magenta no se rebaja la opacidad: el blanco ya solo da 5.90 y atenuarlo
   lo tira por debajo del mínimo. */
.seccion--mag  .eyebrow { color: var(--tinta-inv); opacity: 1; }

h1, h2, h3, .titular {
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--tracking-titular);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Los titulares grandes van en la PRIMARIA del manual; las tarjetas y todo lo
   pequeño se quedan en Questrial, que es la que aguanta tamaños chicos.
   Biger Over es de caja única (x-height == cap-height): el texto se pone en
   mayúsculas igual, así que no hay minúsculas que perder. */
h1, h2, .t-hero, .t-seccion, .titular--display {
  font-family: var(--fuente-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}

h1, .t-hero    { font-size: clamp(2.15rem, 1.35rem + 3.5vw, 4rem); }
h2, .t-seccion { font-size: var(--t-xl); }
h3, .t-tarjeta { font-size: var(--t-md); letter-spacing: .05em; }

.apoyo {
  color: var(--tinta-2);
  max-width: var(--ancho-texto);
}

.destacado { color: var(--magenta); }               /* solo sobre blanco */
.seccion--azul .destacado { color: var(--blanco); } /* magenta/azul = 2.06 */

.lema {                       /* "Del código al hardware" — se usa solo */
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.8rem, .74rem + .3vw, .95rem);
}

/* ---------- 6. Elementos gráficos (Manual §05) --------------------------- */

/* 6.1 Franja diagonal — la barra de chevrones del manual.
   Se dibuja con gradientes: cero imágenes, escala sin pixelarse. */
.franja {
  --franja-color: var(--azul);
  height: 12px;
  background: repeating-linear-gradient(
    115deg,
    var(--franja-color) 0 6px,
    transparent 6px 16px
  );
}
.franja--blanca { --franja-color: var(--blanco); }
.franja--mag    { --franja-color: var(--magenta); }
.franja--gris   { --franja-color: var(--gris-claro); }
.franja--alta   { height: 22px; }

/* 6.2 Chaflán: la marca corta esquinas en diagonal, no las redondea. */
.bisel {
  clip-path: polygon(
    0 0,
    calc(100% - var(--bisel)) 0,
    100% var(--bisel),
    100% 100%,
    var(--bisel) 100%,
    0 calc(100% - var(--bisel))
  );
}
.bisel-sup {  /* solo la esquina superior derecha */
  clip-path: polygon(0 0, calc(100% - var(--bisel)) 0, 100% var(--bisel), 100% 100%, 0 100%);
}

/* 6.3 Regla de acento: bloque magenta corto */
.regla {
  width: 62px;
  height: 5px;
  background: var(--magenta);
  margin-bottom: 1.4rem;
}
.seccion--azul .regla { background: var(--blanco); }

/* ---------- 7. Botones --------------------------------------------------- */
.btn {
  --btn-bg: var(--azul);
  --btn-fg: var(--blanco);
  --btn-bd: var(--azul);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 1.9rem;
  min-height: 62px;          /* el del diseñador mide 68,24 sobre lienzo 1200 */
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  font: inherit;
  /* El rótulo va en la PRIMARIA, no en Questrial: en el SVG las letras están
     vectorizadas, pero la A de vértice plano y la C cuadrada son de Biger Over. */
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
.btn:hover { transform: translateY(-2px); }

/* Filete blanco de 1,2 px, como el `stroke` del polígono del diseñador. Va en
   ::after porque `border` no sobrevive al recorte. Solo en los rellenos: el
   botón de línea YA es un contorno. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanco);
  clip-path: var(--recorte-btn-filete);
  pointer-events: none;
}
.btn--linea::after { content: none; }
.btn { position: relative; }

.btn--mag   { --btn-bg: var(--magenta); --btn-bd: var(--magenta); }
.btn--mag:hover { --btn-bg: #a5124d; --btn-bd: #a5124d; }
.btn--azul:hover { --btn-bg: var(--azul-700); --btn-bd: var(--azul-700); }

.btn--linea {
  --btn-bg: transparent;
  --btn-fg: var(--azul);
  --btn-bd: var(--azul);
}
.btn--linea:hover { --btn-bg: var(--azul); --btn-fg: var(--blanco); }

.seccion--azul .btn--linea,
.pie .btn--linea {
  --btn-fg: var(--blanco);
  --btn-bd: var(--blanco);
}
.seccion--azul .btn--linea:hover { --btn-bg: var(--blanco); --btn-fg: var(--azul); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- 8. Cabecera -------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--azul);
  color: var(--blanco);
}
.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}
.cabecera__logo img { height: 44px; width: auto; }   /* 44,13 en el SVG */

.nav {
  display: none;
  gap: 2rem;
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav a { color: var(--gris-claro); transition: color .18s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blanco); }

@media (min-width: 900px) { .nav { display: flex; } }

/* menú móvil: <details>, sin JavaScript */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  padding: .55rem;
  border: 2px solid var(--linea-osc);
  display: grid;
  place-items: center;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__caja {
  position: absolute;
  right: 0;
  top: calc(100% + .7rem);
  min-width: 220px;
  background: var(--azul-900);
  border: 1px solid var(--linea-osc);
  padding: .6rem 0;
  display: grid;
}
.menu__caja a {
  padding: .72rem 1.3rem;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-claro);
}
.menu__caja a:hover { background: var(--azul-700); color: var(--blanco); }
@media (min-width: 900px) { .menu { display: none; } }

/* ---------- 9. Tarjetas -------------------------------------------------- */
.rejilla {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: border-color .2s, transform .2s;
}
.tarjeta:hover { border-color: var(--magenta); transform: translateY(-3px); }
.seccion--azul .tarjeta {
  background: var(--azul-900);
  border-color: var(--linea-osc);
  color: var(--tinta-inv);
}
.seccion--azul .tarjeta p { color: var(--tinta-inv-2); }
.tarjeta p { color: var(--tinta-2); font-size: .95rem; }

.tarjeta__num {
  font-size: .74rem;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--magenta);
}
.seccion--azul .tarjeta__num { color: var(--blanco); opacity: .7; }

/* ---------- 10. Datos / cifras ------------------------------------------- */
.dato { display: grid; gap: .35rem; }
.dato__valor {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  line-height: 1;
  letter-spacing: .02em;
}
.dato__rotulo {
  font-size: .74rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tinta-2);
}
.seccion--azul .dato__rotulo { color: var(--tinta-inv-2); }

/* ---------- 11. Pie ------------------------------------------------------ */
.pie {
  background: var(--azul-900);
  color: var(--tinta-inv-2);
  padding-block: clamp(2.6rem, 5vw, 3.6rem) 2rem;
  font-size: .92rem;
}
.pie a:hover { color: var(--blanco); }
.pie__rejilla {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: 2.6rem;
}
.pie h4,
.pie .pie__titulo {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.pie__legal {
  border-top: 1px solid var(--linea-osc);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
}
.pie__logo img { height: 40px; margin-bottom: 1.1rem; }

/* ---------- 12. Utilidades ----------------------------------------------- */
.centro     { text-align: center; }
.centro .apoyo, .centro .regla { margin-inline: auto; }
.apilar     { display: grid; gap: 1.15rem; }
.acciones   { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }
.saltar {
  position: absolute; left: -9999px;
  background: var(--magenta); color: var(--blanco); padding: .8rem 1.2rem; z-index: 100;
}
.saltar:focus { left: .6rem; top: .6rem; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 13. Retícula de 12 columnas (Swiss Modernism) ---------------- */
/* Reemplaza al `auto-fit/minmax` cuando la composición debe ser modular y
   asimétrica en vez de repartir a partes iguales. */
.malla {
  display: grid;
  grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  gap: var(--canal);
}
.malla--ancha { --canal: var(--e-5); }

/* En móvil todo ocupa el ancho completo: la retícula se activa desde 760px. */
.malla > * { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-12 { grid-column: span 12; }
  /* arranques, para la asimetría */
  .desde-2 { grid-column-start: 2; }
  .desde-4 { grid-column-start: 4; }
  .desde-7 { grid-column-start: 7; }
}

/* ---------- 14. Microinteracciones -------------------------------------- */
/* Regla: 150-300 ms, solo transform y opacity (nunca width/height/top), y
   ease-out al entrar. Nada se mueve si el sistema pide menos movimiento. */

a, button, summary, .tarjeta, .btn { transition:
  color var(--vel-rapida) var(--curva),
  background-color var(--vel-rapida) var(--curva),
  border-color var(--vel-rapida) var(--curva),
  opacity var(--vel-rapida) var(--curva),
  transform var(--vel-media) var(--curva);
}

button, summary, .btn, [role="button"] { cursor: pointer; }

/* El hover no puede ser el único canal: en táctil no existe. Por eso el
   estado activo también responde al toque. */
.btn:active, .tarjeta:active { transform: translateY(0) scale(.995); }

/* Enlace de texto: subrayado que crece desde la izquierda. Se dibuja con
   background-size, que no provoca reflujo. */
.enlace {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--vel-media) var(--curva);
  padding-bottom: 2px;
}
.enlace:hover, .enlace:focus-visible { background-size: 100% 1px; }

/* ---------- 15. Aparición al desplazar ---------------------------------- */
/* SIN JavaScript el contenido se ve normal: la clase que lo oculta la pone el
   propio script (`crtx.js`) y solo si va a poder animarlo. Nunca se entrega
   una página cuyo texto dependa de que un script corra. */
.js-anim [data-revelar] {
  opacity: 0;
  /* `--desde` lo pone el script: +14px si el bloque salió por abajo, -14px si
     salió por arriba, para que al volver entre por donde se fue. */
  transform: translateY(var(--desde, 14px));
  transition: opacity 420ms var(--curva), transform 420ms var(--curva);
  transition-delay: 0ms;              /* al ocultarse no se escalona */
}
.js-anim [data-revelar].visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--retraso, 0ms);   /* el escalonado, solo al entrar */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js-anim [data-revelar] { opacity: 1; transform: none; }
}

/* ============================================================================
   16. LENGUAJE HUD — segunda pasada de diseño
   ----------------------------------------------------------------------------
   Sale del archivo del diseñador «WEB FINAL.svg» (agosto 2026). No sustituye
   nada de lo de arriba: son piezas NUEVAS. Los otros dos sitios siguen viéndose
   igual hasta que se les aplique.

   La idea es la del manual llevada al extremo: la marca «corta las esquinas en
   diagonal, no las redondea». Aquí el corte deja de ser un chaflán decorativo y
   pasa a ser la forma — recuadros con muescas, cintas, chevrones — con la misma
   paleta y las mismas reglas de contraste de siempre.

   La geometría de los recortes está MEDIDA sobre los polígonos del SVG del
   diseñador (tarjeta 343.7×162.5, panel 999.5×94.7, bloque 328.1×146.3), no
   estimada a ojo.
   ========================================================================= */

:root {
  --acero:      #46617a;              /* azul marino aclarado: barra de menú */
  --acero-osc:  #37536e;
  /* La trama de fondo NO es un gradiente aproximado: es el motivo del
     diseñador (`arte/trama.svg?v=13a3190f`) a su tamaño real. Está MEDIDO sobre el grupo
     `.cls-163` del SVG: la pieza mide 82,3 × 120 y la retícula repite cada
     175 × 171. La primera versión la aproximé con `repeating-linear-gradient`
     a 116 × 58 —un tercio— y se veía apelmazada. Si hay que retocarla, se
     mueve `--trama-paso`, no el archivo. */
  --trama-paso:     10.9375rem 10.6875rem;
  --trama-opacidad: .055;

  /* 16.1 Recortes. Los px son fijos a propósito: el chaflán es un rasgo de
     dibujo, no una proporción. Escalarlo con el ancho lo deformaría. */

  /* Tarjeta de servicio: escalón arriba a la derecha (donde va la pestaña
     gris) y muesca abajo a la derecha (donde entra la insignia del icono). */
  --recorte-tarjeta: polygon(
    0 0, 3.75rem 0, 4.125rem 0.375rem, 7.8125rem 0.375rem, 8.125rem 0, 12.4375rem 0, 14.0625rem 1.625rem, 100% 1.625rem,
    100% calc(100% - 4.8125rem),
    calc(100% - 1rem) calc(100% - 3.8125rem),
    calc(100% - 6.375rem) calc(100% - 3.8125rem),
    calc(100% - 7.375rem) calc(100% - 2.8125rem),
    calc(100% - 7.375rem) 100%,
    8.375rem 100%, 7.1875rem calc(100% - 1.1875rem), 0 calc(100% - 1.1875rem));

  /* Bloque estrecho: evidencia, tarjeta de contacto (`.cls-82`, 328,13×146,27).
     El escalón de arriba a la derecha tiene CUATRO vértices, no dos: yo había
     colapsado (287,4 / 297,43) y el chaflán salía recto. */
  --recorte-bloque: polygon(
    0 0,
    calc(100% - 7.0625rem) 0, calc(100% - 6.43125rem) 0.63125rem,
    calc(100% - 2.54375rem) 0.63125rem, calc(100% - 1.91875rem) 0, 100% 0,
    100% calc(100% - 0.74375rem), calc(100% - 0.725rem) calc(100% - 0.01875rem),
    14.7312rem calc(100% - 0.01875rem), 14.5188rem calc(100% - 0.23125rem),
    12.7937rem calc(100% - 0.23125rem), 12.5563rem 100%,
    7.1125rem 100%, 6.5125rem calc(100% - 0.6rem),
    2.6rem calc(100% - 0.6rem), 2rem 100%, 0 100%);

  /* Panel ancho: los compromisos y las cintas de ancho completo. */
  --recorte-panel: polygon(
    21.5% 0, 14% 0, 13.5% 0.3125rem, 5.3% 0.3125rem, 4.9% 0, 0 0,
    0 calc(100% - 1.6875rem), 1.6875rem 100%,
    82.7% 100%, 84.4% calc(100% - 1.0625rem), 94.7% calc(100% - 1.0625rem),
    96.4% 100%, 100% 100%,
    100% 0, 64.1% 0, 62.9% 0.75rem, 45.6% 0.75rem, 44.4% 0);

  /* Ficha vertical: los límites («dónde no competimos»). */
  --recorte-ficha: polygon(
    0 0, calc(100% - 1.9375rem) 0, 100% 1.9375rem,
    100% calc(100% - 3.5625rem), calc(100% - 2.625rem) calc(100% - 0.9375rem),
    3.875rem calc(100% - 0.9375rem), 2.9375rem 100%, 1.75rem 100%, 0 calc(100% - 1.75rem));

  /* Caja de texto: es la tarjeta de viñetas de cada línea (`.cls-145`,
     507,97 × 232,48). Chaflán grande arriba a la izquierda (35,7) y arriba a
     la derecha (52,2), y un escalón abajo a la derecha. No son dos esquinas
     cortadas iguales, que es lo que yo tenía. */
  --recorte-caja: polygon(
    2.23125rem 0,
    calc(100% - 3.2625rem) 0, 100% 1.775rem,
    100% calc(100% - 0.7625rem),
    calc(100% - 2.625rem) calc(100% - 0.7625rem), calc(100% - 3.28125rem) 100%,
    0 100%, 0 2.23125rem);

  /* Pestaña gris del paso (`.cls-23`, 246,13 × 40,6): lleva escalones en los
     dos bordes largos, no un chaflán en la esquina. */
  --recorte-pestana: polygon(
    calc(100% - 2.25rem) 0.175rem, calc(100% - 2.39375rem) 0.3125rem,
    67.7% 0.3125rem, 66.6% 0.1375rem, 46.8% 0.1375rem, 45.9% 0,
    0 0, 0 100%,
    18.8% 100%, 19.8% calc(100% - 0.14375rem),
    64.3% calc(100% - 0.14375rem), 65.2% 100%,
    100% 100%, 100% 0.1625rem);

  /* Cuerpo del paso (`.cls-121`, 186,08 × 178,24): el lado derecho es una
     punta en diagonal y el izquierdo lleva un jog de 4,7 px. */
  --recorte-paso: polygon(
    0 0, 0 28.4%, 0.29375rem 32.8%, 0.29375rem 54%, 0 58.3%, 0 100%,
    22.1% 100%, 23.8% calc(100% - 0.325rem),
    58.8% calc(100% - 0.325rem), 60.2% calc(100% - 0.05rem),
    77.7% calc(100% - 0.05rem), 80.2% calc(100% - 0.525rem),
    84.4% calc(100% - 0.525rem), 100% 44.6%, 85.1% 0);

  /* Llamada dentro de la cinta (`.cls-1`, 205,79 × 56,6). */
  --recorte-cinta-cta: polygon(
    0.75rem 0, calc(100% - 1.23125rem) 0, 100% 1.23125rem,
    100% calc(100% - 1.21875rem), calc(100% - 1.21875rem) 100%,
    0 100%, 0 0.63125rem);

  /* Botón. NO es un octógono simétrico —eso era una simplificación mía—: el
     polígono del diseñador (223,01 × 68,24, clase `.cls-16`) lleva un ESCALÓN
     en el borde superior al 53 % y otro en el inferior al 77 %, y los cuatro
     chaflanes miden distinto (11,58 / 10,87 / 9,08 / 11,75). Los ejes X van en
     porcentaje para que el escalón conserve su sitio en botones más anchos;
     los Y en px, que es lo que mantiene el ángulo del chaflán. */
  --recorte-btn: polygon(
    0 0.725rem,
    0.725rem 0,
    53% 0,
    calc(53% + 0.36875rem) 0.36875rem,
    calc(100% - 0.68125rem) 0.36875rem,
    100% 1.05rem,
    100% calc(100% - 0.875rem),
    calc(100% - 0.56875rem) calc(100% - 0.3125rem),
    calc(77% + 0.3125rem) calc(100% - 0.3125rem),
    77% 100%,
    0.725rem 100%,
    0 calc(100% - 0.7375rem));

  /* El botón del diseñador lleva FILETE BLANCO de 1 px (`stroke:#fff` en el
     polígono). Con `clip-path` no se puede usar `border`, así que el filete es
     un anillo de 1,2 px con la misma geometría, calculado igual. */
  --recorte-btn-filete: polygon(
    0 0.725rem, 0.725rem 0, 53% 0, calc(53% + 0.36875rem) 0.36875rem,
    calc(100% - 0.68125rem) 0.36875rem, 100% 1.05rem, 100% calc(100% - 0.875rem),
    calc(100% - 0.56875rem) calc(100% - 0.3125rem), calc(77% + 0.3125rem) calc(100% - 0.3125rem),
    77% 100%, 0.725rem 100%, 0 calc(100% - 0.73125rem),
    0.075rem 0.75625rem,
    0.075rem calc(100% - 0.7625rem), 0.75625rem calc(100% - 0.075rem),
    calc(77% - 0.03125rem) calc(100% - 0.075rem), calc(77% + 0.28125rem) calc(100% - 0.3875rem),
    calc(100% - 0.6rem) calc(100% - 0.3875rem), calc(100% - 0.075rem) calc(100% - 0.90625rem),
    calc(100% - 0.075rem) 1.075rem, calc(100% - 0.7125rem) 0.44375rem,
    calc(53% + 0.3375rem) 0.44375rem, calc(53% - 0.03125rem) 0.075rem, 0.75625rem 0.075rem,
    0.075rem 0.75625rem);

  /* El mismo contorno en forma de ANILLO de 2 px, para el botón de línea. El
     interior está calculado desplazando cada vértice por la bisectriz de sus
     dos aristas, no a ojo. La costura entra y sale por el lateral izquierdo,
     donde el anillo mide 2 px y no se ve. */
  --recorte-btn-anillo: polygon(
    0 0.725rem, 0.725rem 0, 53% 0, calc(53% + 0.36875rem) 0.36875rem,
    calc(100% - 0.68125rem) 0.36875rem, 100% 1.05rem, 100% calc(100% - 0.875rem),
    calc(100% - 0.56875rem) calc(100% - 0.3125rem), calc(77% + 0.3125rem) calc(100% - 0.3125rem),
    77% 100%, 0.725rem 100%, 0 calc(100% - 0.7375rem),
    0.125rem 0.775rem,
    0.125rem calc(100% - 0.7875rem), 0.775rem calc(100% - 0.125rem),
    calc(77% - 0.05rem) calc(100% - 0.125rem), calc(77% + 0.25625rem) calc(100% - 0.4375rem),
    calc(100% - 0.61875rem) calc(100% - 0.4375rem), calc(100% - 0.125rem) calc(100% - 0.93125rem),
    calc(100% - 0.125rem) 1.1rem, calc(100% - 0.73125rem) 0.49375rem,
    calc(53% + 0.31875rem) 0.49375rem, calc(53% - 0.05rem) 0.125rem, 0.775rem 0.125rem,
    0.125rem 0.775rem);
}

/* ---- 16.2 .marco — el recuadro cortado, con filete de 1 px ---------------
   Un solo elemento y un pseudoelemento: el fondo del elemento ES el filete y
   ::before pinta el relleno 1 px adentro con el mismo recorte. Así el contorno
   sobrevive a las diagonales, que es justo lo que `border` + `clip-path` no
   consigue (clip-path recorta el borde y las diagonales quedan sin línea). */
.marco {
  --marco-filete: var(--linea);
  --marco-fondo:  var(--blanco);
  --marco-recorte: var(--recorte-tarjeta);
  position: relative;
  background: var(--marco-filete);
  clip-path: var(--marco-recorte);
}
.marco::before {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  background: var(--marco-fondo);
  clip-path: var(--marco-recorte);
}
/* El contenido tiene que pintarse por encima del relleno posicionado. */
.marco > * { position: relative; }

/* El bloque de evidencia y el de contacto llevan el filete en BLANCO sólido
   (0,89 px en el archivo), no atenuado como los paneles. */
.marco--bloque { --marco-recorte: var(--recorte-bloque); }
.seccion--azul .marco--bloque { --marco-filete: var(--blanco); }
.marco--panel  { --marco-recorte: var(--recorte-panel);  }
.marco--ficha  { --marco-recorte: var(--recorte-ficha);  }
.marco--caja   { --marco-recorte: var(--recorte-caja);   }

/* Sobre azul el filete es blanco y el relleno, el azul profundo. */
.seccion--azul .marco,
.marco--osc {
  --marco-filete: rgba(255, 255, 255, .55);   /* paneles y fichas */
  --marco-fondo:  var(--azul-900);
  color: var(--tinta-inv);
}

/* ---- 16.3 Trama diagonal de fondo ---------------------------------------
   La marca de agua del azul marino. Gradientes, no imágenes: escala sin peso
   y sin pixelarse. Muy baja opacidad a propósito — es textura, no dibujo. */
.trama { position: relative; }
.trama > * { position: relative; z-index: 1; }
.trama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('arte/trama.svg?v=13a3190f');
  background-size: var(--trama-paso);
  opacity: var(--trama-opacidad);
}

/* ---- 16.4 Barra de navegación en ángulo ---------------------------------- */
/* Estaba aquí como clase aparte (`.nav--barra`). Se retiró: §17 le da el
   tratamiento a TODO `.nav`, y su `padding` en atajo pisaba el alto medido de
   la barra (43,7 px) metiendo 13,6 px por arriba y por abajo. */

/* ---- 16.5 Botones del diseñador ------------------------------------------ */
.btn--hud   { clip-path: var(--recorte-btn); border-width: 0; padding: 1rem 2.1rem; }
.btn--acero { --btn-bg: var(--acero); --btn-bd: var(--acero); --btn-fg: var(--blanco); }
.btn--acero:hover { --btn-bg: var(--acero-osc); --btn-bd: var(--acero-osc); }

/* Botón-cinta: el rectángulo inclinado con la tajada blanca delante. */
.cinta-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--fuente-display);
  font-size: clamp(1.05rem, .95rem + .55vw, 1.359rem);   /* 21,75 */
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco);
}
.cinta-btn__tajo {
  width: 2.875rem;
  height: 1.875rem;
  flex: none;
  background: var(--blanco);
  clip-path: polygon(0.875rem 0, 100% 0, calc(100% - 0.875rem) 100%, 0 100%);
}
.cinta-btn__cuerpo {
  background: var(--magenta);
  padding: .5rem 2.2rem .5rem 1.5rem;
  clip-path: polygon(0.875rem 0, 100% 0, calc(100% - 0.875rem) 100%, 0 100%);
}
.cinta-btn:hover .cinta-btn__cuerpo { background: #a5124d; }

/* ---- 16.6 Chevrón ------------------------------------------------------- */
/* La punta de flecha del manual, sin imagen. Se usa de viñeta y de separador. */
.chevron {
  width: 0.9375rem;
  height: 1.25rem;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
}
/* El chevrón grande del proceso: forma medida sobre `.cls-6` (69,51 × 170,04)
   del archivo. Va en PAREJA y solapa las tarjetas de paso — no es un iconito
   entre columnas, que es lo que yo tenía (30 × 20). */
/* Los dos chevrones SE SOLAPAN 25,3 px: las puntas arrancan a 44,2 px una de
   otra y cada una mide 69,5 de ancho. El par entero mide 113,7. */
.chevron--doble { display: flex; background: none; clip-path: none; }
.chevron--doble::before,
.chevron--doble::after {
  content: "";
  flex: none;
  width: 4.34375rem;
  background: currentColor;
  clip-path: polygon(100% 46.4%, 76.5% 76.4%, 58% 100%, 0 100%,
                     41.5% 47.1%, 1.5% 0, 60.6% 0, 76.9% 19.2%);
}
.chevron--doble::after { margin-left: -1.58125rem; }

/* Lista con viñeta de chevrón magenta */
.lista-chev { list-style: none; padding: 0; display: grid; gap: 1rem; }
.lista-chev li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .95rem;
  align-items: start;
  color: var(--tinta-2);
}
.lista-chev li::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;             /* 12,9 × 13,0 en el archivo */
  margin-top: .42em;
  background: var(--magenta);
  clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%);
}
.seccion--azul .lista-chev li { color: var(--tinta-inv-2); }

/* ---- 16.7 Regla larga ---------------------------------------------------- */
/* El diseñador no usa el bloque corto bajo el titular, sino una barra que
   ocupa la columna entera. Se mantiene .regla para quien ya la usa. */
.regla--barra { width: 100%; max-width: 100%; height: 0.3125rem; }

/* ---- 16.8 Disco numerado ------------------------------------------------ */
/* El aro de muescas de las siete líneas. El número va como TEXTO (no como
   trazo) para que se pueda leer, copiar y escalar.

   ATENCIÓN, esto costó un fallo en producción: esta clase se llamó «moneda» y
   hubo que renombrarla. `pages` ya usaba ese nombre para el símbolo de dólar
   de las tarjetas de precio y, como este archivo es GLOBAL a los tres sitios,
   el `display:grid` de aquí convertía el símbolo en un bloque de 96 px y lo
   mandaba a su propia línea. Antes de añadir una clase aquí, búscala en
   `pages/` y en `catalogo3d/`. */
.disco {
  position: relative;
  /* 175 px de diámetro en el archivo. La moneda es MÁS GRANDE que la cinta
     (138,1) y asoma 18,45 por arriba y por abajo: si sale más pequeña, el
     número parece pegado encima en vez de encajado. */
  width: clamp(6.5rem, 14.6vw, 10.9375rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--azul);
}
.disco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Los dígitos NO son Elemental End. Se comprobó recortando las siete monedas
   del SVG y comparándolas contra las dos fuentes: el «2» de caja plana, el «6»
   con forma de G y el «1» con banderola son de Biger Over. Elemental End trae
   dígitos normales. */
.disco span {
  position: relative;
  font-family: var(--fuente-display);
  /* El dígito mide 83,3 de alto sobre la moneda de 175 (47,6 %). Los dígitos
     de Biger Over ocupan 0,7373 em, así que eso son 113 px de cuerpo: el
     64,6 % del diámetro. Va en `em` para que siga a la moneda al encoger. */
  font-size: .646em;
  line-height: 1;
}
/* La moneda fija el `em` del que cuelga el dígito. */
.disco { font-size: clamp(6.5rem, 14.6vw, 10.9375rem); }
.disco--mag { color: var(--magenta); }

/* ---- 16.9 Cinta de titular ----------------------------------------------- */
/* El bloque de color con el nombre de la línea, con su sombra escalonada. */
.cinta {
  --cinta-color: var(--azul);
  position: relative;
  background: var(--cinta-color);
  color: var(--blanco);
  padding: 1.5rem clamp(1.6rem, 4vw, 3.2rem);
  clip-path: polygon(
    2.25rem 0, 100% 0, 100% calc(100% - 1.75rem), calc(100% - 1.75rem) 100%,
    0 100%, 0 2.25rem);
}
.cinta--mag { --cinta-color: var(--magenta); }
/* El diseñador escribió los nombres de línea en MINÚSCULA (cls-138…143): en
   Elemental End eso da las formas estándar, más legibles. Los titulares de
   tarjeta y los compromisos los escribió en MAYÚSCULA, que da las
   alternativas. La diferencia es deliberada; se replica aquí. */
/* El diseñador da a CADA nombre un tamaño distinto (30,31 · 33,47 · 35,11 ·
   43,94 · 87,92) para que todos quepan en los mismos 138 px de cinta. Aquí se
   replica con `--cinta-tam` por línea; el valor por defecto es el más común. */
.cinta h3, .cinta .t-tarjeta {
  font-family: var(--fuente-secundaria);
  text-transform: lowercase;
  font-size: max(1.1rem, min(var(--cinta-tam, 2.194rem), 8.5vw));
  /* El archivo NO espacia estas letras. Con .02em «Desarrollo» pedía 313,8 en
     vez de 306,8 y se partía a mitad de palabra dentro de la cinta. */
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--blanco);
}

/* ---- 16.10 Pestaña gris de tarjeta --------------------------------------- */
.pestana {
  position: absolute;
  top: 0;
  right: 0;
  width: 8.125rem;
  height: 1.0625rem;
  background: var(--gris);
  clip-path: polygon(0.6875rem 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- 16.11 Insignia de icono --------------------------------------------- */
/* Las siete insignias son SVG del diseñador; aquí solo se colocan. */
.insignia {
  position: absolute;
  right: 0;
  bottom: -1.125rem;
  width: 7.375rem;
}

/* ---- 16.12 Franja de chevrones, versión del diseñador -------------------- */
/* Más separada y más gruesa que la del manual impreso. */
.franja--hud {
  height: 1.625rem;
  background: repeating-linear-gradient(
    115deg,
    var(--franja-color) 0 0.9375rem,
    transparent 0.9375rem 2.5rem);
}

/* ============================================================================
   17. EL LENGUAJE HUD, APLICADO A LOS COMPONENTES BASE
   ----------------------------------------------------------------------------
   Hasta §16 el lenguaje del diseñador vivía en clases nuevas y solo lo usaba la
   portada. Aquí baja a los componentes que comparten los TRES sitios, para que
   el catálogo 3D y el de planes sigan la misma línea sin reescribir su marcado.

   Va al final a propósito: son SOBRESCRITURAS deliberadas de §6-§9, no una
   definición paralela. Si algo de arriba y algo de aquí se contradicen, manda
   esto — y es intencional.
   ========================================================================= */

/* ---- 17.1 La franja ------------------------------------------------------ */
/* Los chevrones del diseñador son más anchos y van más separados que los del
   manual impreso. */
.franja {
  height: 1.625rem;
  background: repeating-linear-gradient(
    115deg, var(--franja-color) 0 0.9375rem, transparent 0.9375rem 2.5rem);
}
.franja--alta { height: 2.125rem; }

/* ---- 17.2 La regla ------------------------------------------------------- */
/* Deja de ser el bloque corto de 62 px: en el diseño es la barra que ocupa la
   columna entera bajo el titular. Centrada sí conserva un tope, o en una
   sección estrecha se comería el ancho. */
.regla { width: 100%; height: 0.3125rem; }
.centro .regla { max-width: 26.25rem; }

/* ---- 17.3 Botones -------------------------------------------------------- */
/* Octógono: las cuatro esquinas cortadas, no dos. */
.btn { clip-path: var(--recorte-btn); }

/* ---- 17.4 Navegación ----------------------------------------------------- */
/* La barra de acero en ángulo. Solo desde 900 px: por debajo manda el menú
   desplegable, que no cambia. */
/* La barra de menú, medida sobre `.cls-8` del SVG (796,01 × 43,71):
   NO es un paralelogramo —eso era una simplificación mía—. Lleva la esquina
   superior IZQUIERDA cortada 20 px y la inferior DERECHA cortada 22,6 px; los
   otros dos ángulos son rectos. El relleno es blanco al 27 % sobre el azul (no
   un gris sólido: así compone igual sobre cualquier fondo) y lleva filete
   blanco de 1,1 px, que va en ::after porque `clip-path` se come el `border`.
   Las medidas son fijas: el lienzo del diseñador es de 1200 px y la cabecera no
   tiene por qué crecer con la pantalla. */
@media (min-width: 900px) {
  .nav {
    position: relative;
    align-items: stretch;
    min-height: 2.73125rem;
    background: rgba(255, 255, 255, .27);
    padding-inline: clamp(1.5rem, 3.8vw, 2.9rem) clamp(1.4rem, 3.4vw, 2.4rem);
    gap: clamp(1.6rem, 5.9vw, 4.4rem);   /* 71 px entre rótulos en el archivo */
    clip-path: polygon(100% 0, 100% 1.31875rem, calc(100% - 1.4125rem) 100%,
                       0 100%, 0 1.25rem, 1.25rem 0);
  }
  .nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blanco);
    pointer-events: none;
    clip-path: polygon(100% 0, 100% 1.31875rem, calc(100% - 1.4125rem) 100%,
                       0 100%, 0 1.25rem, 1.25rem 0,
                       calc(100% - 0.06875rem) 0.06875rem, 1.275rem 0.06875rem, 0.06875rem 1.28125rem,
                       0.06875rem calc(100% - 0.06875rem), calc(100% - 1.44375rem) calc(100% - 0.06875rem),
                       calc(100% - 0.06875rem) 1.2875rem, calc(100% - 0.06875rem) 0.06875rem);
  }
  .nav a {
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--fuente-display);
    font-size: 1.325rem;      /* 21,2 px: caja de 15,5 como en el archivo */
    letter-spacing: .02em;
    line-height: 1;
    color: var(--blanco);
    padding-block: 0;
  }
  /* La marca del activo es una barra magenta de 3,33 px pegada al FILO
     INFERIOR de la barra, no un subrayado bajo el texto. */
  .nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0.20813rem;
    background: var(--magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--vel-media) var(--curva);
  }
  .nav a:hover::after,
  .nav a:focus-visible::after,
  .nav a[aria-current="true"]::after { transform: scaleX(1); }
}

/* ---- 17.5 Tarjeta -------------------------------------------------------- */
/* El recuadro cortado con filete, con la misma mecánica que `.marco`: el fondo
   del elemento ES la línea y ::before pinta el relleno 1 px adentro. Se usa el
   recorte de dos esquinas y no el de tarjeta de servicio: éste va en bloques de
   texto largo, y la muesca inferior del otro se comería la última línea.

   Ojo: gana sobre `.bisel-sup` por ir después, así que las tarjetas que ya lo
   traían (el catálogo 3D las genera con JS) pasan a este recorte solas. */
.tarjeta {
  --marco-filete: var(--linea);
  --marco-fondo:  var(--blanco);
  position: relative;
  background: var(--marco-filete);
  border: 0;
  clip-path: var(--recorte-caja);
}
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  background: var(--marco-fondo);
  clip-path: var(--recorte-caja);
}
.tarjeta > * { position: relative; }
.tarjeta:hover { --marco-filete: var(--magenta); }

/* Sobre azul: filete blanco y relleno del azul profundo. Hace falta repetir el
   selector completo — `.seccion--azul .tarjeta` de §9 le gana en especificidad
   a `.tarjeta` a secas. */
.seccion--azul .tarjeta {
  --marco-filete: rgba(255, 255, 255, .5);
  --marco-fondo:  var(--azul-900);
  background: var(--marco-filete);
  border: 0;
}
.seccion--azul .tarjeta:hover { --marco-filete: var(--blanco); }

/* El titular de tarjeta es de los sitios donde el diseñador usa la secundaria. */
.tarjeta h3, .tarjeta .t-tarjeta {
  font-family: var(--fuente-secundaria);
  letter-spacing: .02em;
  line-height: 1.1;
}

/* ---- 17.6 Trama en los fondos de color ----------------------------------- */
/* Cualquier sección azul o magenta la lleva, sin tener que acordarse de poner
   `.trama`. Es el mismo dibujo: si un elemento trae las dos clases no se pinta
   dos veces, porque las dos reglas caen sobre el MISMO ::before. */
.seccion--azul, .seccion--mag { position: relative; }
.seccion--azul > *, .seccion--mag > * { position: relative; z-index: 1; }
.seccion--azul::before, .seccion--mag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('arte/trama.svg?v=13a3190f');
  background-size: var(--trama-paso);
  opacity: var(--trama-opacidad);
}

/* ---- 17.7 El botón de línea, con el octógono ----------------------------- */
/* `border` + `clip-path` no se llevan: el recorte se come el borde justo en
   las cuatro diagonales y el contorno sale a trozos. Se ve en cuanto el botón
   NO está relleno, que es el caso de `.btn--linea`.

   Solución: el botón deja de recortarse —así el texto nunca se corta— y el
   contorno lo dibuja un ::before con forma de ANILLO: el polígono recorre el
   octógono exterior, se mete por una costura de 2 px y vuelve por el interior
   en sentido contrario. Al pasar el ratón ese mismo ::before cambia al
   octógono macizo y el botón queda relleno. Una sola pieza para los dos
   estados. `isolation` es obligatorio: sin él, `z-index:-1` mandaría el anillo
   detrás del fondo de la SECCIÓN y no se vería. */
.btn--linea {
  clip-path: none;
  border-color: transparent;   /* se conserva el grosor: mismo alto que los rellenos */
  background: transparent;
  position: relative;
  isolation: isolate;
}
.btn--linea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bd);
  clip-path: var(--recorte-btn-anillo);
}
.btn--linea:hover::before,
.btn--linea:focus-visible::before { clip-path: var(--recorte-btn); }

/* ============================================================================
   18. CAPA DE DECORACIÓN — los trazos de circuito del diseñador
   ----------------------------------------------------------------------------
   El SVG del diseñador lleva, además del contenido, una capa de trazos de
   circuito, chevrones y bandas que recorren cada sección. En la primera pasada
   solo rescaté dos; el resto se quedó fuera y el sitio perdió ese aire.

   Ahora están las nueve piezas, recortadas del archivo por clase exacta
   (`_marca/recortar_svg.py --solo`). Cada una conserva el **viewBox del ancho
   de diseño (1200)**, así que al colocarla a `width:100%` cae en el mismo sitio
   horizontal que en el original en vez de estirarse de lado a lado.

   Se ocultan por debajo de 780 px: a ese ancho no decoran, estorban.
   ========================================================================= */
.tiene-deco { position: relative; }
.tiene-deco > * { position: relative; z-index: 1; }

.deco {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}
/* Banda en el flujo (la de evidencia va entre bloques, no detrás) */
/* Banda en el flujo. Va de BORDE A BORDE, no del ancho de la columna: en el
   SVG estas piezas ocupan el lienzo entero (x 0..1200), igual que las
   decoraciones absolutas. Como viven dentro de `.contenedor`, hay que
   devolverles el relleno lateral — de ahí el `100vw` con el margen negativo.
   Sin esto quedan 94 px más estrechas que el resto y el corte se nota. */
.banda-deco {
  display: block;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  height: auto;
}

@media (max-width: 780px) {
  .deco { display: none; }
}

/* ============================================================================
   19. PULIDO — accesibilidad y estados, sin tocar la dirección de arte
   ----------------------------------------------------------------------------
   Sale de una auditoría automática de las tres páginas a 390 y 1440 px
   (contraste calculado, tamaño de zona de toque, dimensiones de imagen,
   jerarquía de encabezados). Solo se corrige lo que la medición señaló.
   ========================================================================= */

/* 19.1 Zona de toque -------------------------------------------------------
   WCAG 2.2 AA pide 24×24 px como mínimo; los enlaces de texto en listas se
   quedaban en 15-18 px de alto. Se resuelve con relleno y se devuelve el
   espacio con margen negativo, así no se mueve nada de sitio. */
.pie ul a,
.tarjeta h3 a,
.p3d-lista a,
.p3d-contacto a,
.contacto-lista a { display: inline-block; padding-block: .32rem; margin-block: -.28rem; }

/* El enlace de menú NO lleva relleno vertical: se estira al alto de la barra
   (43,7 px), que ya supera de sobra el mínimo de zona de toque. */
.cabecera__logo { display: inline-flex; align-items: center; padding-block: .4rem; }

/* 19.2 Foco visible sobre fondo oscuro -------------------------------------
   El anillo de foco es magenta, y magenta sobre azul marino da 2.06 — el
   mismo par que este archivo prohíbe para texto. WCAG 2.2 pide 3:1 al
   indicador de foco contra lo que lo rodea, así que sobre oscuro va blanco. */
.seccion--azul :focus-visible,
.seccion--mag :focus-visible,
.cabecera :focus-visible,
.pie :focus-visible { outline-color: var(--blanco); }

/* ============================================================================
   20. BORDES DE SECCIÓN — las juntas en ángulo del SVG
   ----------------------------------------------------------------------------
   En el archivo del diseñador las secciones NO se tocan con una línea recta:
   cuatro juntas llevan forma (muescas, tajos diagonales, una lengüeta y un
   perfil dentado). Estaban rectas y era la diferencia estructural que quedaba.

   No se resuelven con `clip-path` porque la forma sale FUERA de la caja de la
   sección, y clip-path solo recorta hacia dentro. Cada junta es un SVG con el
   viewBox de su banda —el propio lienzo recorta el polígono, no hace falta
   calcular el corte— colocado a caballo del borde con `translateY` en
   PORCENTAJE, que se resuelve contra el alto del propio elemento y por eso
   escala solo con el ancho.

   La sección que cuelga un borde hacia abajo necesita `z-index`, o la sección
   siguiente le pinta encima su fondo.
   ========================================================================= */
.tiene-borde { position: relative; z-index: 1; }

.borde {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  z-index: 2;
  pointer-events: none;
}
.borde--abajo        { top: 100%; }                              /* bajo el hero */
.borde--arriba       { top: 0; transform: translateY(-100%); }   /* sobre la sección papel */
.borde--lengueta     { bottom: 0; transform: translateY(26.1%); }
.borde--dentado      { top: 0; transform: translateY(-49.2%); }

/* ============================================================================
   21. ESCALA TIPOGRÁFICA DEL ARCHIVO — medida, no inventada
   ----------------------------------------------------------------------------
   La escala de §2 (tercera menor, fluida) era mía. La del diseñador es otra, y
   se sacó leyendo el `font-size` de CADA bloque de texto del SVG:

     titular de sección   35,11    eyebrow                19,13
     párrafo de cuerpo    21,00    título tarjeta serv.   19,13
     cuerpo de tarjeta    16,00    título evidencia       21,60
     cuerpo evidencia     17,00    botón de evidencia     21,75
     título compromiso    27,48    pestaña de paso        21,87
     CTA de cinta         16,72    título de límite       21,64
     cuerpo de límite     14,04    datos de contacto      18,50

   El cuerpo iba 3,8 px pequeño y el eyebrow 7,6: por eso «todo el cuerpo» se
   veía distinto aunque cada pieza estuviera bien dibujada.

   Los valores van en rem sobre base 16 (19,13 px = 1.196rem) y con `clamp`
   para que bajen en móvil, donde el lienzo de 1200 del diseñador no aplica.
   ========================================================================= */

.eyebrow {
  font-size: clamp(.88rem, .78rem + .5vw, 1.196rem);   /* 19,13 */
  margin-bottom: 1.1rem;
}

h2, .t-seccion { font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.194rem); }   /* 35,11 */

.apoyo, .lista-chev li {
  font-size: clamp(1.05rem, .97rem + .42vw, 1.3125rem);                    /* 21 */
  line-height: 1.55;
}

/* Tarjeta de servicio: el titular es MENOR que el párrafo de sección. */
.tarjeta h3, .tarjeta .t-tarjeta { font-size: clamp(1.05rem, .95rem + .5vw, 1.196rem); }
.tarjeta p { font-size: 1rem; }                                            /* 16 */