/* ============================================================
   KALON FONDOS — un solo sistema para toda la web
   ------------------------------------------------------------
   Dos fondos, uno oscuro y uno claro, aplicados con CAPAS DE
   FONDO sobre el propio elemento. Nada de ::before ni ::after:
   varias de estas secciones ya los usan para otras cosas y
   pisárselos las rompería.

   SOBRE LA ESPECIFICIDAD DE LOS SELECTORES
   Los `html body` de delante no son decoración. Cada una de
   estas secciones trae su propio fondo en un bloque <style>
   dentro del cuerpo de la página, o sea DESPUÉS de esta hoja.
   Con la misma especificidad ganaba el suyo por ir más tarde
   (comprobado: .kfd-sec y .kalon-cta-wrap se quedaban en negro
   puro). Además varias usan la forma abreviada `background:`,
   que de paso borra las capas. Con `html body` delante esta
   hoja gana sin necesidad de un solo !important.

   Los bloques de Spectra necesitan además repetir
   `.wp-block-uagb-container`, porque su regla ya vale (0,2,0).
   ============================================================ */

:root {
  /* Los dos tonos canónicos. Cambiar aquí cambia toda la web. */
  --kalon-negro:  #0d0d0d;
  --kalon-crema:  #f2eee8;
  --kalon-dorado: 201, 169, 110;

  /* Grano. Es lo que de verdad quita el aspecto de color plano:
     rompe las bandas que aparecen en los degradados oscuros de
     las pantallas de 8 bits. */
  --kalon-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");

  /* El lienzo de detrás estaba en #1a1a1a, un negro distinto al
     de todas las secciones. Se ve al rebotar el scroll en móvil
     y en los huecos entre bloques. `:root` en vez de `html`
     porque pesa más y gana a la regla que lo ponía. */
  background-color: var(--kalon-negro);
}

/* ── Fondo oscuro ─────────────────────────────────────────────
   Un halo dorado arriba al centro que hace de foco, y otro frío
   y más abierto abajo a la derecha para que el degradado no se
   lea simétrico ni artificial. */
html body .kalon-fondo-oscuro,
html body .kalon-nov,
html body .kalon-sets-block,
html body .kalon-col,
html body .kfd-sec,
html body .kalon-trust-wrap,
html body .kalon-cta-wrap,
html body .wp-block-uagb-container.alignfull.uagb-block-b793ccb0 {
  background-color: var(--kalon-negro);
  background-image:
    var(--kalon-grano),
    radial-gradient(120% 70% at 50% -10%, rgba(var(--kalon-dorado), .09) 0%, rgba(var(--kalon-dorado), 0) 60%);
  background-repeat:   repeat, no-repeat;
  background-size:     140px 140px, auto;
  background-position: top left, top center;
  background-attachment: scroll;
}

/* ── QUE VARIAS SECCIONES OSCURAS SEGUIDAS SE LEAN COMO UNA ──
   [2026-09-02]

   EL PROBLEMA. El halo se pinta sobre CADA seccion, desde su propio
   borde superior. Con secciones oscuras pegadas -en la portada hay
   cinco seguidas: sets, titulo, tarjetas, novedades y ultima
   coleccion- el halo se reiniciaba en cada union. Medido en vivo:
   .uagb-block-32fba6be termina en y=4808 y .uagb-block-05294905
   empieza exactamente ahi, sin un pixel de hueco y con el mismo
   negro; lo que se veia como "dos bloques separados" era el segundo
   halo arrancando. De ahi tambien el aspecto a franjas de la pagina.

   Habia ademas un segundo halo frio anclado al 108% de la altura, o
   sea justo por debajo del borde inferior: dibujaba una linea de luz
   exactamente en la union. Ese se ha quitado del todo.

   LA SOLUCION. Dentro de un tramo de secciones oscuras contiguas,
   solo la PRIMERA pinta el halo; las siguientes continuan con el
   negro y el grano, sin reiniciar nada. El tramo entero se lee como
   un unico fondo con una sola entrada de luz arriba.

   Se usa el combinador "+" y no :has(). Es a proposito: "+" mira al
   hermano ANTERIOR, que el navegador ya ha leido cuando llega aqui,
   asi que la regla vale desde el primer pintado. Con :has() habria
   que mirar al hermano siguiente, que aun no existe, y el fondo
   cambiaria a media carga -el mismo tropiezo que dio :has() con la
   cinta superior. */
:is(
  .kalon-fondo-oscuro, .kalon-nov, .kalon-sets-block, .kalon-col, .kfd-sec,
  .kalon-trust-wrap, .kalon-cta-wrap, .kalon-cat,
  .wp-block-uagb-container.alignfull.uagb-block-b793ccb0
) + :is(
  .kalon-fondo-oscuro, .kalon-nov, .kalon-sets-block, .kalon-col, .kfd-sec,
  .kalon-trust-wrap, .kalon-cta-wrap,
  .wp-block-uagb-container.alignfull.uagb-block-b793ccb0
),

/* Y la misma pareja con un nodo invisible por medio. WordPress deja
   <style> sueltos dentro del contenido y uno de ellos se cuela entre
   .uagb-block-b793ccb0 y .kalon-trust-wrap, rompiendo la adyacencia.
   Se saltan SOLO etiquetas que no se pintan: si lo de en medio fuera
   una seccion clara, el tramo oscuro tiene que cortarse de verdad y
   la siguiente debe volver a pintar su halo. */
:is(
  .kalon-fondo-oscuro, .kalon-nov, .kalon-sets-block, .kalon-col, .kfd-sec,
  .kalon-trust-wrap, .kalon-cta-wrap, .kalon-cat,
  .wp-block-uagb-container.alignfull.uagb-block-b793ccb0
) + :is(style, script, link, template) + :is(
  .kalon-fondo-oscuro, .kalon-nov, .kalon-sets-block, .kalon-col, .kfd-sec,
  .kalon-trust-wrap, .kalon-cta-wrap,
  .wp-block-uagb-container.alignfull.uagb-block-b793ccb0
) {
  background-image:    var(--kalon-grano);
  background-repeat:   repeat;
  background-size:     140px 140px;
  background-position: top left;
}

/* ── Fondo claro ──────────────────────────────────────────────
   Mismo sistema en versión suave. Las secciones en crema tenían
   un plano liso que las hacía parecer prestadas de otra web; con
   el mismo grano y un halo cálido se leen como parte del mismo
   conjunto, solo que en el tono claro de la marca.

   Los filetes dorados de arriba y abajo son lo que de verdad las
   cose con las secciones oscuras: dan un borde intencionado en
   vez de un corte seco de color. */
html body .kalon-fondo-claro,
html body .ktc-sec {
  background-color: var(--kalon-crema);
  background-image:
    var(--kalon-grano),
    radial-gradient(100% 60% at 50% -5%, rgba(var(--kalon-dorado), .16) 0%, rgba(var(--kalon-dorado), 0) 62%),
    linear-gradient(to bottom, rgba(120, 100, 70, .05) 0%, rgba(120, 100, 70, 0) 22%);
  background-repeat:   repeat, no-repeat, no-repeat;
  background-size:     140px 140px, auto, auto;
  background-position: top left, top center, top left;

  /* Sobre fondo oscuro el grano se disimula; sobre uno claro se
     vería como suciedad. soft-light lo funde con el color en vez
     de superponerlo. */
  background-blend-mode: soft-light, normal, normal;

  box-shadow:
    inset 0  1px 0 rgba(var(--kalon-dorado), .30),
    inset 0 -1px 0 rgba(var(--kalon-dorado), .30);
}