/* Componentes · navegación, acciones, tarjetas, formulario, pie.
 * Depende de tokens.css y base.css.
 */

/* ── navegación ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-media) var(--curva);
}
.nav.desplazada { border-bottom-color: var(--borde); }

.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fuente-ui);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-max);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.marca__glifo { width: 22px; height: 22px; flex: none; }

.nav__enlaces { display: none; gap: var(--e6); }
@media (min-width: 1121px) { .nav__enlaces { display: flex; } }
.nav__enlaces a {
  font-size: var(--t-pequeno);
  color: var(--texto-2);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva);
}
.nav__enlaces a:hover { color: var(--texto); }

/* ── acciones ──────────────────────────────────────────────────────────────── */
/* Dos niveles, como las tres referencias: una pastilla sólida y un enlace con
 * chevron. Un tercer nivel de botón diluye cuál es la acción que importa. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-pastilla);
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-rapida) var(--curva),
              background var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}
.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-tarjeta); }
.boton:active { transform: none; }

.boton--acento { background: var(--boton-acento-fondo); color: var(--boton-acento-texto); }
/* La franja oscura es un tema local dentro de una página clara, así que los tokens de
   texto secundario tienen que reasignarse AQUÍ: `--texto-2` sólo recibía su valor para
   oscuro dentro de `prefers-color-scheme: dark`, y esta franja no entra ahí. Medido:
   #5A6472 sobre tinta da 2.97 y el umbral AA es 4.5; con --suave-osc da 5.73.
   Se arregla en el token y no en `.lead`, porque el defecto es de todo lo que usa
   `--texto-2` dentro de una franja oscura, no de un párrafo. */
.franja--tinta {
  --texto-2: var(--suave-osc);
  --borde: var(--tinta-3);
}
.franja--tinta .boton { background: var(--papel); color: var(--tinta); }
.franja--tinta .boton--acento { background: var(--acento); color: var(--tinta); }

.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}
.boton--fantasma:hover { border-color: var(--texto); box-shadow: none; }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  color: var(--texto);
}
.enlace-flecha svg { transition: transform var(--dur-rapida) var(--curva); }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* ── tarjetas ──────────────────────────────────────────────────────────────── */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e6);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--r-tarjeta);
  transition: transform var(--dur-media) var(--curva),
              box-shadow var(--dur-media) var(--curva),
              border-color var(--dur-media) var(--curva);
}
.franja--tinta .tarjeta {
  background: var(--tinta-2);
  border-color: var(--tinta-3);
}

a.tarjeta { text-decoration: none; }
a.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-tarjeta);
  border-color: color-mix(in srgb, var(--marca) 45%, var(--borde));
}

.tarjeta__pie {
  margin-top: auto;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-micro);
  color: var(--texto-2);
}
.franja--tinta .tarjeta__pie { border-top-color: var(--tinta-3); }

/* Insignia de estado: distingue lo que está VIVO de lo que no. El sitio no puede
 * presentar una propuesta y una entrega con el mismo peso visual. */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pastilla);
  background: var(--acento-tenue);
  color: var(--marca);
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.03em;
}
.insignia::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── cifra con su fuente ───────────────────────────────────────────────────── */
/* Toda cifra del sitio se muestra con su contexto (fecha y n) en la misma pieza.
 * Un número sin su n se lee como estado presente, y eso es lo que hay que evitar. */
.cifra { display: flex; flex-direction: column; gap: var(--e2); }
.cifra__valor {
  font-family: var(--fuente-display);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cifra__que { font-size: var(--t-pequeno); }
.cifra__fuente {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  color: var(--texto-2);
  letter-spacing: -0.01em;
}
.franja--tinta .cifra__fuente { color: var(--suave-osc); }

/* ── formulario ────────────────────────────────────────────────────────────── */
.formulario { display: grid; gap: var(--e4); }
@media (min-width: 640px) { .formulario__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); } }

.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo > span { font-size: var(--t-micro); font-weight: var(--peso-fuerte); color: var(--texto-2); }
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  transition: border-color var(--dur-rapida) var(--curva),
              box-shadow var(--dur-rapida) var(--curva);
}
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.franja--tinta .campo input,
.franja--tinta .campo textarea,
.franja--tinta .campo select {
  background: var(--tinta-2);
  border-color: var(--tinta-3);
  color: var(--papel);
}

.nota-form { font-size: var(--t-micro); color: var(--texto-2); }

/* ── pie ───────────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--borde);
  padding-block: var(--e7) var(--e6);
  font-size: var(--t-pequeno);
  color: var(--texto-2);
}
.pie__rejilla { display: grid; gap: var(--e6); }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.6fr repeat(2, 1fr); } }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--texto); }
.pie__legal {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-micro);
}

/* El menú no se parte: si no cabe, se esconde antes de romper la barra en dos líneas.
 * Una barra de dos pisos en el hero de una llegada arruina justo el momento que importa. */
.nav__enlaces { white-space: nowrap; }
@media (max-width: 1120px) { .nav__enlaces { display: none; } }

/* El grafo de poda dice qué se probó y por qué murió, y se lee ENTERO a tamaño de
   página: la versión anterior escondía los rótulos tras el zoom y quien no acercaba no
   veía nada. El zoom queda para mirar de cerca, no para descubrir. */
.poda-a { stroke: currentColor; }
.poda-a--muerta { stroke-width: 1; stroke-opacity: .26; }
.poda-a--viva   { stroke: var(--marca); stroke-width: 2.2; stroke-opacity: .95; }
/* 0.52 → ratio 3.5 sobre papel. El mínimo para el 3.0 de WCAG 1.4.11 (elemento NO
   textual) es 0.465, calculado. Estaba en .28 = 1.84, o sea el nodo apenas se
   distinguía del papel — que es la otra lectura de «no se ve nada en los nodos». */
.poda-n         { fill: currentColor; fill-opacity: .52; }
.poda-n--viva   { fill: var(--marca); fill-opacity: 1; }

.poda-t {
  font-family: var(--mono, ui-monospace, monospace);
  fill: var(--tinta);
  paint-order: stroke;
  stroke: var(--papel);        /* halo: los rótulos cruzan aristas y sin esto se pierden */
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.poda-t--raiz  { font-size: 12px; fill-opacity: .88; letter-spacing: .04em; }
.poda-t--fam   { font-size: 12.5px; fill-opacity: .72; letter-spacing: .02em; }
.poda-t--hijo  { font-size: 11.5px; fill-opacity: .95; }
.poda-t--porque{ font-size: 9.5px; fill-opacity: .68; font-style: italic; }
.poda-t--viva  { fill: var(--marca); fill-opacity: 1; font-weight: 600; }

/* El veredicto es vocabulario CERRADO del agente: se distingue por peso, no por color
   nuevo — meter un tercer tinte rompería la paleta de dos que sostiene todo el sitio. */
.poda-t--v { font-size: 9px; letter-spacing: .07em; fill-opacity: .66; }
.poda-t--v-switch    { fill-opacity: .66; }
.poda-t--v-continue  { fill: var(--marca); fill-opacity: .95; font-weight: 700; }
.poda-t--v-terminate { fill-opacity: .62; }

/* Marca de honestidad bajo un dibujo: distingue el vocabulario REAL del agente de la
   trayectoria ilustrativa. Sin esto, un esquema se lee como una medición. */
/* Sin opacidad propia: hereda el color del pie, que ya cumple AA. Bajarla aquí
   fue el defecto — un token conforme deja de serlo en cuanto se le pone alfa. */
.retrato__nota { display: block; margin-top: .5rem; font-size: .82em; }
.retrato__nota code { font-size: .92em; }

/* Vecindario semántico · el radio ES la distancia medida, no una composición.
   Sólo los cuatro más cercanos llevan nombre: 24 rótulos encimados no es información. */
.vec-a { stroke: var(--marca); stroke-width: 1.1; stroke-opacity: .55; }
.vec-p { fill: currentColor; fill-opacity: .52; }   /* .42 daba 2.65, bajo el 3.0 */
.vec-p--dentro { fill: var(--marca); fill-opacity: .9; }
.vec-umbral {
  fill: none; stroke: var(--marca); stroke-width: 1;
  stroke-opacity: .38; stroke-dasharray: 3 5;
}
.vec-t {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; fill: var(--tinta); fill-opacity: .72;
  paint-order: stroke; stroke: var(--papel); stroke-width: 3px;
  stroke-linejoin: round; pointer-events: none;
}
.vec-t--dentro { fill: var(--marca); fill-opacity: 1; font-weight: 600; }
.vec-t--q      { font-size: 12px; fill: var(--marca); fill-opacity: 1; font-weight: 600; }
.vec-t--umbral { font-size: 9.5px; fill-opacity: .68; font-style: italic; }

/* La evidencia se pliega, no se quita. El portafolio son 7 productos y con toda la
   prueba desplegada había que leer 1.041 palabras para verlos: quien compra escanea
   primero y profundiza en lo que le toca. El resumen DICE cuántas mediciones hay, así
   que anuncia la prueba en vez de esconderla — y `<details>` funciona sin JS. */
.pruebas { margin: 1.1rem 0 .4rem; }
.pruebas__resumen {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--acento-claro, var(--marca));
  padding: .35rem 0;
  list-style: none;
}
.pruebas__resumen::-webkit-details-marker { display: none; }
.pruebas__resumen::before {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  opacity: .7;
  transition: transform 160ms ease;
}
.pruebas[open] .pruebas__resumen::before { content: "−"; }
.pruebas__resumen:hover { text-decoration: underline; text-underline-offset: 3px; }
.pruebas__resumen:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .pruebas__resumen::before { transition: none; } }

/* Banda a todo ancho · el único elemento puramente atmosférico del sitio, y por eso va
   sin pie: una imagen generada con un pie de datos al lado se lee como medición.
   Existe para romper el muro de texto de la cola, no para afirmar nada. */
.banda {
  margin: clamp(2rem, 6vw, 5rem) 0;
  overflow: hidden;
  line-height: 0;
  background: var(--papel);
}
.banda img {
  width: 100%;
  height: clamp(150px, 24vw, 340px);
  object-fit: cover;
  object-position: center;
  display: block;
  /* La imagen nace en crema; sobre papel se funde por los bordes en vez de recortarse. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.franja--tinta .banda img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }