/* ============================================================================
   Cielos del Norte — identidad visual
   ----------------------------------------------------------------------------
   Un solo lugar para lo que debe ser igual en todo el sitio. Hasta ahora cada
   página llevaba su propio :root incrustado, y por eso el mismo nombre de
   variable acabó significando cosas distintas: --text-dim iba de 0.65 a 0.28
   según la página, o sea de 8.05:1 a 2.49:1 de contraste.

   Dos reglas gobiernan los valores de aquí:

   1. CONTRASTE. Todo alfa está calculado sobre #0A1628 para cruzar AA: 4.5:1
      en texto y 3:1 en bordes de controles. No son elecciones estéticas.

   2. TAMAÑO. El piso es 12px y no se baja de ahí. La jerarquía se hace con
      color, peso y espaciado, y sólo después encogiendo la letra.

      El piso fue 14px hasta el 11-ago-2026, puesto sobre el supuesto de un
      público mayor. Se bajó a 12 al medir lo que el sitio hacía de verdad: el
      wizard —donde la gente compra— no baja de 14 en ningún sitio y su cuerpo
      vive en 15 y 16, o sea que la regla no le estorbaba a quien vende. Los
      únicos que la incumplían eran la portada, con el aviso de derechos a
      9.6px, y la capa de exploración de /micielo.

      QUÉ CUENTA. El piso es para texto de interfaz: lo que alguien lee para
      entender o para decidir. El texto dentro de una ilustración —los rótulos
      de un SVG, la maqueta de una pantalla de teléfono— no es tipografía, es
      dibujo a escala, y subirlo a 12 rompe el dibujo. En sqm.html hay treinta
      de ésos entre 6 y 9px y se quedan como están.

      Y 12 es el suelo del rótulo, no del cuerpo. Un cuerpo de lectura a 12px
      cumple la regla y aun así está mal escrito.
   ========================================================================= */

:root {
  /* ── Color ──────────────────────────────────────────────────────────── */
  --midnight:   #0A1628;   /* fondo único del sitio */
  --white:      #FFFFFF;
  --lavender:   #C4B5E8;   /* acento, idéntico en las nueve páginas */
  --ice:        #9FC1E8;
  --gold-soft:  #E8D8B0;
  --lav-dim:    rgba(196,181,232,0.40);

  /* El lila sólido. Estaba declarado a mano y con este mismo nombre en DOS archivos
     —index.html y sky.css— y en ninguno de los dos venía de aquí, que es exactamente el
     problema que este archivo existe para no tener.

     No confundir con `--lav-dim`, que pese al nombre parecido es otra cosa: lavanda al
     40%, que sobre el fondo del sitio da #545675. Son dos colores distintos. */
  --lavender-dim: #8B7EC8;

  /* Lo que va mal. Es el color de aviso del sitio de facto: aparece siete veces en cinco
     archivos —/micielo, /pedir, /regalo, produccion y correos— y nunca tuvo token. En
     /micielo había además otros dos tonos para lo mismo, #FF9B8A y #F5A3A3.
     8.90:1 sobre --midnight. */
  --alerta:     #F2A0A0;

  /* El precio. Nace en /pedir, donde es lo único verde de la pantalla y por eso funciona:
     dice «esto es lo que cuesta» sin una etiqueta que lo diga. 10.40:1. */
  --precio:     #8FD3A8;

  /* Texto y bordes, con su contraste medido sobre --midnight */
  --text-main:  rgba(255,255,255,0.92);  /* 15.34:1 */
  --text-mid:   rgba(255,255,255,0.65);  /*  8.05:1 */
  --text-dim:   rgba(255,255,255,0.65);  /*  8.05:1 · alias histórico */
  --text-soft:  rgba(255,255,255,0.50);  /*  5.22:1 · mínimo para texto */
  --border:     rgba(255,255,255,0.38);  /*  3.57:1 */
  --border-dim: rgba(255,255,255,0.34);  /*  3.08:1 · mínimo para controles */
  --hairline:   rgba(255,255,255,0.12);  /* divisores decorativos, no informan */

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Outfit', -apple-system, system-ui, sans-serif;

  --t-hero:  clamp(2rem, 6vw, 3rem);
  --t-title: clamp(1.5rem, 4vw, 1.75rem);
  --t-lead:  1.15rem;   /* 18px */
  --t-body:  1rem;      /* 16px */
  --t-small: 0.875rem;  /* 14px · el pie de una tarjeta, una nota al margen */
  --t-label: 0.875rem;  /* 14px · se distingue por espaciado y color */
  --t-min:   0.75rem;   /* 12px · PISO. Sólo rótulos, y nada baja de aquí. */
  --t-legal: 0.6875rem; /* 11px · el aviso de derechos. Única excepción al piso. */

  /* ── Movimiento ─────────────────────────────────────────────────────── */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);

  /* ── Superficies ────────────────────────────────────────────────────── */
  --surface:    rgba(255,255,255,0.05);
  --veil:       rgba(10,22,40,0.72);

  /* El desenfoque del cielo cuando hay algo que leer encima. Estaba en 3px y sólo en el
     wizard, escrito a mano; a esa intensidad el campo de estrellas casi desaparece. Vive
     aquí para que el wizard y el checkout usen el mismo, que es lo que pidió Pablo. */
  --velo-blur:  1.5px;
  /* Dos radios y, hasta el 11-ago-2026, ninguna regla que dijera cuál era cuál.
     El resultado: seis páginas eligieron el recto y /micielo la píldora, y las dos
     elecciones eran defendibles porque el archivo se callaba. La regla:

       --radius-btn   todo lo que se pulsa, y también las superficies: tarjetas,
                      paneles, fichas. Es la forma del wizard, o sea la del sitio
                      donde de verdad se compra. Las superficies del sitio son de
                      0px; las de /micielo eran de 12 y 14, y eso es lo que la
                      hacía parecer otra aplicación pegada al mismo dominio.
       --radius-pill  sólo lo que es etiqueta y no botón: un chip, una marca de
                      estado, un rótulo flotante. Si se pulsa, no es píldora. */
  --radius-pill: 100px;
  --radius-btn:  2px;

  /* La acción principal de una pantalla: casi blanco sobre el fondo, texto oscuro.
     Es lo que ya hace el wizard, y por eso el lavanda NO es fondo de botón en
     ninguna parte: en todo el sitio significa «lee esto», no «pulsa esto». Ocho
     `color: var(--lavender)` contra cero fondos, hasta que /micielo lo usó como
     relleno y el mismo color pasó a decir dos cosas distintas. */
  --accion:       #F2EDFB;
  --accion-texto: var(--midnight);
}

/* ============================================================================
   Retorno
   ----------------------------------------------------------------------------
   Una sola forma en todo el sitio: el botón cuadrado con la flecha que ya usa
   sky.html. Antes había tres formas y cinco textos distintos ("← Inicio",
   "← Cielos del Norte", "← Tienda", "←"), y el destino cambiaba según la
   página sin que la forma lo dijera.

   El destino NO se toca: cada página conserva su href. Cuando no sea el
   inicio, se declara en aria-label, que es donde el dato sirve de verdad.
   ========================================================================= */

.cdn-back {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top));
  left: calc(18px + env(safe-area-inset-left));
  z-index: 3001;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-mid);
  text-decoration: none;
  border: 1px solid var(--border-dim);
  border-radius: 50%;
  background: var(--veil);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s, border-color .25s, background .25s;
}
.cdn-back:hover {
  color: var(--white);
  border-color: rgba(196,181,232,0.55);
  background: rgba(196,181,232,0.10);
}
.cdn-back:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
}

/* ============================================================================
   Piso tipográfico
   ----------------------------------------------------------------------------
   Red de seguridad mientras las páginas se van migrando una por una: nada
   por debajo de 14px, aunque su CSS local pida menos. Se puede quitar cuando
   ninguna página declare tamaños menores.
   ========================================================================= */

body { font-size: var(--t-body); }

/* ============================================================================
   Aviso de derechos
   ----------------------------------------------------------------------------
   Una sola forma en todo el sitio. Antes cada página lo declaraba por su cuenta
   y acabó valiendo cosas distintas: 14px en seis páginas y 9.6px al 32% de
   opacidad en la portada, que era el texto menos legible de Cielos del Norte.

   11px, y es la única cosa del sitio que baja del piso de 12. La razón: es la
   única línea que no informa de nada que alguien vaya a hacer. Nadie decide
   nada al leerla y nadie la busca; está porque tiene que estar. Todo lo demás
   —un precio, una nota, un rótulo— sí se lee para algo y no baja de 12.

   El contraste sí es el de un texto de verdad, 5.25:1, y no el de un adorno:
   pequeño no puede significar además invisible.

   El contenido es exactamente «Todos los derechos reservados Cielos del Norte
   © año» y nada más. La portada llevaba además un enlace a patrocinios; se
   quitó el 11-ago-2026 porque un pie legal no es sitio para navegar.
   ========================================================================= */

footer.foot,
footer.page-footer,
footer.footer,
.cdn-legal {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--t-legal);
  line-height: 1.5;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
footer.foot strong,
footer.page-footer strong,
footer.footer span,
.cdn-legal strong { color: var(--text-main); font-weight: 500; }

/* ============================================================================
   Botón
   ----------------------------------------------------------------------------
   El elemento más repetido del sitio y el último en llegar aquí. Hasta hoy había
   veinticuatro reglas de botón repartidas en siete archivos, cada una con su radio,
   su relleno y su idea de qué es la acción principal: por eso /micielo acabó con
   píldoras lavanda y el wizard con rectángulos casi blancos, y las dos eran
   defendibles porque el sistema daba tokens y no daba forma.

   Un token se puede ignorar sin querer. Un componente no: o se usa o no se usa.

   Dos variantes y ninguna más. La acción de la pantalla, que es una sola, y todo lo
   demás. Si en una pantalla hay dos cosas rellenas, ninguna es la principal.
   ========================================================================= */

.cdn-boton {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: .9rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s var(--ease-out-quint), border-color .25s var(--ease-out-quint);
}
.cdn-boton:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--white); }
.cdn-boton:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.cdn-boton[disabled], .cdn-boton[aria-disabled="true"] {
  opacity: .5; cursor: default; pointer-events: none;
}

/* La acción de la pantalla. Casi blanca y no lavanda: en todo el sitio el lavanda
   significa «lee esto». */
.cdn-boton--accion {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
  font-weight: 500;
}
.cdn-boton--accion:hover { background: var(--white); border-color: var(--white); }

/* Que ocupe la línea entera, para las barras de acción de un teléfono. */
.cdn-boton--ancho { width: 100%; }