/* ── Papel cortado · washi frames (soft integration, 16-Oct-2026) ───────
   Any box becomes a torn sheet of washi: the paper is a real Higgsfield washi
   texture (brand/papel/), the torn edge is drawn live by an SVG filter
   (#washi-torn, rendered once by <WashiTornDefs/> in the locale layout), so it
   never repeats and fits any size.
   Plain CSS on purpose: served as-is, never run through the CSS optimizer — it
   folds border-image and the filters into the border shorthand and drops them.

   <WashiFrame>…</WashiFrame>                       clean torn sheet
   <WashiFrame ink="tinta" nota="tinte">…           sumi bleeding at two corners + a faint dye
   <WashiFrame ink="mancha" sello>…                 one blot + the 改良 seal */
.washi-frame { position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; }
.washi-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/brand/papel/washi-fibra.webp") center / cover, #f5eddd;
  filter: url(#washi-torn) drop-shadow(0 1px 1px rgb(23 19 14 / 0.2)) drop-shadow(0 10px 22px rgb(23 19 14 / 0.07));
  transition: transform .3s ease;
}
.washi-frame--tinta::before {
  background:
    url("/brand/papel/mancha-1-suave.webp") left -58px top -58px / 150px auto no-repeat,
    url("/brand/papel/mancha-4-suave.webp") right -64px bottom -62px / 170px auto no-repeat,
    url("/brand/papel/washi-fibra.webp") center / cover, #f5eddd;
}
.washi-frame--mancha::before {
  background:
    url("/brand/papel/mancha-2-suave.webp") right -46px top -50px / 120px auto no-repeat,
    url("/brand/papel/washi-fibra.webp") center / cover, #f5eddd;
}
a.washi-frame:hover::before { transform: translateY(-1px) rotate(-0.2deg); }

/* ── Notas de color sutiles ─────────────────────────────────────────────
   ADOPTED in the Shoko (Victor, 16-Oct): tinte · esquina · hilo · sello. Each is
   one quiet idea, coloured by --nota (vermillion by default; set it to the
   cocktail's accent). All ride the same torn edge as the paper.

   washi-nota--tinte    the whole sheet barely dyed, like a tinted washi
   washi-nota--esquina  a breath of colour rising from one corner
   washi-nota--hilo     one silk thread of colour laid in the paper
   washi-nota--sello    a tiny real hanko seal in the corner */
[class*="washi-nota--"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the seal also comes as a child (<WashiFrame sello>), so it can sit on top of any note */
.washi-sello { position: absolute; right: 18px; bottom: 16px; width: 26px; height: 26px; opacity: .85; pointer-events: none; }
.washi-nota--tinte::after { background: var(--nota, #e23a1c); opacity: .045; mix-blend-mode: multiply; filter: url(#washi-torn); }
.washi-nota--esquina::after {
  background: radial-gradient(130% 110% at 100% 100%, color-mix(in srgb, var(--nota, #e23a1c) 15%, transparent), transparent 60%);
  mix-blend-mode: multiply; filter: url(#washi-torn);
}
.washi-nota--hilo::after {
  background: var(--nota, #e23a1c); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-2 70 C 18 64 30 76 48 69 S 78 60 102 66' fill='none' stroke='%23000' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 71 C 22 66 34 77 50 70 S 80 62 102 67' fill='none' stroke='%23000' stroke-width='.5' stroke-opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M-2 70 C 18 64 30 76 48 69 S 78 60 102 66' fill='none' stroke='%23000' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 71 C 22 66 34 77 50 70 S 80 62 102 67' fill='none' stroke='%23000' stroke-width='.5' stroke-opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: url(#washi-torn);
}
.washi-nota--sello::after { inset: auto 18px 16px auto; width: 26px; height: 26px; background: url("/brand/seals/kairyo-160.webp") center / contain no-repeat; opacity: .85; }

/* ── Navbar · el panel del mega-menú como washi ─────────────────────────
   El desplegable flotante (.mx-nav-viewport) se vuelve hoja de washi rasgada —
   hoja lisa, sin nota. El filtro re-renderiza durante la animación de escala;
   en Safari, si no se aplica, el borde sale recto (aceptable). */
.mx-nav-viewport {
  position: relative; isolation: isolate;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.mx-nav-viewport::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/brand/papel/washi-fibra.webp") center / cover, #f5eddd;
  filter: url(#washi-torn) drop-shadow(0 1px 1px rgb(23 19 14 / 0.2)) drop-shadow(0 18px 40px rgb(23 19 14 / 0.22));
}