/* ══════════════════════════════════════════════════════════════════════════
   marka — CABECERA ÚNICA (2026-11-04, séptima ronda)

   Por qué existe este archivo: cada página tenía su propia cabecera y, al
   navegar, la barra cambiaba de alto, de sitio para los enlaces y de tamaño de
   botón. La portada usaba `.encabezado` (20 px arriba y abajo, sin fondo
   propio), las legales `.barra` (16 px, `min-height: 74px`) y la guía `.topbar`
   (64 px fijos). El mismo enlace «Licencia» caía en tres alturas distintas.

   Aquí hay UNA sola especificación, tomada de index.html, que las cuatro
   páginas comparten con el mismo marcado:

     logo  →  [ ← Volver a la portada ]  Licencia  Guía  [ Compre la aplicación ]

   Reglas de la casa:

   - Los tokens se declaran aquí, con sus valores en hexadecimal, para que la
     cabecera NO dependa de la hoja de cada página: se ve igual aunque v3.css,
     pagina.css o guia-piel.css cambien. Son los mismos valores que v3.css.
   - «← Volver a la portada» ocupa el primer lugar del bloque derecho en las
     páginas interiores, como pedía el usuario, y no aparece en la portada
     (allí el logo ya es el inicio).
   - La llamada de compra va SIEMPRE al final, con el mismo tamaño y el mismo
     borde. No usa `.boton`: así ninguna hoja de página la re-dimensiona.
   - El archivo se carga al final del <head>, después de la hoja de la página.
     Al no usar `@layer`, gana sobre las reglas en capas sin `!important`.
   ══════════════════════════════════════════════════════════════════════════ */

/* Los tokens van en `:root`, no en `.cabecera`, porque la guía usa la misma
   cabecera dentro de su `.topbar` (fijo, por su índice lateral). Si vivieran
   en `.cabecera`, dentro de la guía no habría nada que resolver y el ancho
   máximo caería a `none`: exactamente el fallo que dejaba la barra de la guía
   a 1777 px en una pantalla de 1920. */
:root {
  --cab-noche: #0E263C;
  --cab-hoja: #FCFAF4;
  --cab-claro-azul: #A8C8E0;
  --cab-sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --cab-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --cab-gutter: clamp(20px, 4vw, 64px);
  --cab-ancho: 1360px;
  --cab-alto: 76px; /* 20 + 35 + 20 + 1 px de borde inferior */
}

.cabecera {
  position: relative;
  z-index: 60;
  color: var(--cab-hoja);
}

/* Las páginas interiores son documentos largos: la barra se queda arriba.
   El margen lateral lo pone la barra (no el interior) para que el contenido
   caiga exactamente en la misma vertical que en la portada: allí lo pone el
   relleno de la lámina, aquí lo pone la cabecera. */
.cabecera--pegada {
  position: sticky;
  top: 0;
  padding-inline: var(--cab-gutter);
  background: var(--cab-noche);
}
.cabecera--sombra { box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.5vw, 40px);
  width: 100%;
  max-width: var(--cab-ancho);
  margin-inline: auto;
  padding: 20px 0;
  /* La regla vive aquí, no en la barra: así mide lo mismo que el contenido
     (en la portada la lámina ya trae su propio margen lateral y una línea a
     sangre completa no coincidía con ninguna otra línea del dibujo). */
  border-bottom: 1px solid rgba(168, 200, 224, .2);
}

/* ── Marca ─────────────────────────────────────────────────────────────── */
.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--cab-hoja);
  font-family: var(--cab-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  text-decoration: none;
}
.cabecera__marca:hover { color: var(--cab-hoja); text-decoration: none; }
.cabecera__signo {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
}

/* ── Bloque derecho: vuelta · páginas · compra ──────────────────────────── */
.cabecera__derecha {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin-left: auto;
}

.cabecera__volver,
.cabecera__enlaces a {
  font-family: var(--cab-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(252, 250, 244, .72);
  text-decoration: none;
  white-space: nowrap;
}
.cabecera__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}
.cabecera__volver:hover,
.cabecera__enlaces a:hover,
.cabecera__enlaces a[aria-current="page"],
.cabecera__volver[aria-current="page"] {
  color: var(--cab-hoja);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cabecera__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  padding: 9px 15px;
  border: 1px solid rgba(245, 242, 234, .38);
  background: transparent;
  color: var(--cab-hoja);
  font-family: var(--cab-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.cabecera__cta:hover {
  background: rgba(245, 242, 234, .07);
  border-color: var(--cab-hoja);
  color: var(--cab-hoja);
  text-decoration: none;
}
.cabecera__cta svg,
.cabecera__cta .icono {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* En pantallas estrechas el botón usa su forma corta («Comprar»): con la larga
   la fila no cabe y la cabecera se partía en dos, dejando el logo solo arriba
   y 100 px de barra. Mismo orden, misma altura que en escritorio. */
.cabecera__cta-corto { display: none; }

/* Cubre las dos formas: dentro de `.cabecera` y dentro del `.topbar` de la guía. */
.cabecera__interior :focus-visible {
  outline: 2px solid var(--cab-claro-azul);
  outline-offset: 3px;
}

/* ── Adaptaciones ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .cabecera__interior { padding: 15px 0; gap: 14px; }
  .cabecera__derecha { gap: 14px; }
  .cabecera__volver,
  .cabecera__enlaces a { font-size: 10px; letter-spacing: .08em; }
  .cabecera__enlaces { gap: 14px; }
  .cabecera__cta { padding: 8px 12px; font-size: 11.5px; gap: 6px; }
}

/* Por debajo de 520px la vuelta a la portada se retira: el logo ya vuelve y
   el espacio se necesita para las páginas y la compra, que no pueden faltar. */
@media (max-width: 520px) {
  .cabecera__volver { display: none; }
  .cabecera__cta-largo { display: none; }
  .cabecera__cta-corto { display: inline; }
}

/* Último recurso en pantallas muy estrechas: se permite partir en dos filas
   antes que apretar los enlaces hasta hacerlos ilegibles. Todas las páginas
   parten igual, así que la barra sigue midiendo lo mismo en todas. */
@media (max-width: 360px) {
  .cabecera__interior { flex-wrap: wrap; row-gap: 12px; }
}