/* ── 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); }

/* washi-frame--flat — el papel washi + Trazo SIN el filtro SVG por elemento
   (feTurbulence es demasiado caro en rejillas de cientos de cards). Papel
   redondeado suave + una sombra callada en vez del borde rasgado; conserva la
   textura de fibra. Para listas densas (p. ej. la despensa, el botellero). */
.washi-frame--flat::before {
  filter: none;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(23 19 14 / 0.08), 0 8px 22px rgb(23 19 14 / 0.05);
  transition: box-shadow .22s ease;
}
/* Hover: solo crece la sombra — el botón ya NO se desplaza (anulamos el
   translateY del hover general de .washi-frame) */
a.washi-frame--flat:hover::before,
button.washi-frame--flat:hover::before {
  transform: none;
  box-shadow: 0 3px 8px rgb(23 19 14 / 0.14), 0 20px 42px -6px rgb(23 19 14 / 0.16);
}
/* Botones washi — etiqueta en Trazo negro plano (sin destellos) en reposo; al
   hover pasa a Bermellón: se encienden los destellos en vermellón. */
html.trazo a.washi-frame--flat .font-trazo-name,
html.trazo button.washi-frame--flat .font-trazo-name { font-family: var(--font-hand); text-shadow: none; }
html.trazo a.washi-frame--flat:hover .font-trazo-name,
html.trazo button.washi-frame--flat:hover .font-trazo-name {
  font-family: var(--font-trazo);
  /* same Trazo, only the destellos are added — see «el mismo grosor» below */
  text-shadow: var(--trazo-grosor);
}
/* Acento vermellón (.washi-glint) — RETIRADO (Victor, 29-Oct: «Desactiva el acento
   rojo en hover. no me gusta»). It first breathed at rest, then lived only on hover
   following the cursor; now no washi chip carries a red bloom. The class stays in
   the markup as a no-op, so it can come back from this one rule. The press still
   brings the splash (papel mojado, below). */
.washi-glint::after { content: none; }

/* ── Papel mojado al clic · acuarela bermellón ──────────────────────────
   Pressing a washi button drops vermillion watercolour on the paper where the
   finger lands (<WashiWet/> in the locale layout adds the spans). The splash is
   the brand's real watercolour (acuarela-splash.webp, from ink-splash-clean).
   Multiply, so it reads as
   pigment in the fibre, not a sticker; clipped to the chip; under the label. */
.washi-wet {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: 12px; overflow: hidden;
  /* iOS Safari does not round-clip children animated with transform under
     overflow + border-radius, so the ink spilled out square (Victor, 29-Oct);
     a clip-path with the same corner clips them on every engine */
  -webkit-clip-path: inset(0 round 12px); clip-path: inset(0 round 12px);
}
.washi-wet > i { position: absolute; display: block; opacity: 0; mix-blend-mode: multiply; will-change: transform, opacity; }
.washi-wet__splash {
  aspect-ratio: 640 / 453;
  /* the same watercolour laid three times over itself: the pigment compounds,
     about 2.5× the single pass — the full colour lands on the first press
     (Victor, 29-Oct: «multiplicar por 2.5 la intensidad con el primer click») */
  background:
    url("/brand/papel/acuarela-splash.webp") center / contain no-repeat,
    url("/brand/papel/acuarela-splash.webp") center / contain no-repeat,
    url("/brand/papel/acuarela-splash.webp") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(.12);
}
/* No wash around the splash: the soft vermillion halo read as blur, not water, and
   muddied the label (Victor, 29-Oct). While the ink is on (.is-wet, set by WashiWet)
   the label is black with no vermillion flashes. It keeps the very glyphs of the
   hover — Bermellón + its grosor — with the flash layer (palette colour 1) painted in
   the label's ink through a font palette; transparent would leave gaps, since the
   flashes stand in for the stroke ends: switching back to plain Trazo read as a jump to bold (Victor,
   29-Oct: «con click el trazo se vuelve negro pero bold»), since the colour face,
   even compensated, draws a hair lighter. Same specificity as :hover, later, wins. */
@font-palette-values --trazo-sin-destellos {
  font-family: "Mixology Trazo Bermellon";
  override-colors: 1 #17130e; /* = --color-ink, the label's colour */
}
html.trazo a.washi-frame--flat.is-wet .font-trazo-name,
html.trazo button.washi-frame--flat.is-wet .font-trazo-name {
  font-family: var(--font-trazo);
  font-palette: --trazo-sin-destellos;
  text-shadow: var(--trazo-grosor);
}

/* ── Trazo Bermellón · el mismo grosor que el Trazo ──────────────────────
   Bermellón is the colour version of Trazo (the destellos). Same weights, same
   drawing, but Chrome paints colour glyphs without the stem darkening plain text
   gets, so it read ~37% thinner than the Trazo beside it (measured 29-Oct: 0.63).
   Three 0.45px shadows in the text's own colour give the stroke back (its base
   layer is currentColor, so hanko letters stay hanko). Every place that paints
   Bermellón takes it; places that only swap to Bermellón on hover take it on
   hover. The rule lives here (plain CSS) so it reaches the globals.css rules,
   forms.css and the inline `fontFamily: var(--font-trazo)` in components alike. */
:root { --trazo-grosor: 0 0 .45px, 0 0 .45px, 0 0 .45px; }
[style*="--font-trazo"],
.font-trazo,
html.trazo h1.text-5xl.leading-none:where(:not([style*="--font-hand"])),
html.trazo :is(h1, h2, h3) .italic:where(:not([style*="--font-hand"])),
html.trazo span.inline-flex.font-semibold.text-hanko:where(:not([style*="--font-hand"])),
html.trazo h3.font-display.leading-none:where(:not([style*="--font-hand"])),
html.trazo .washi-frame :is(h1, h2, h3).font-display:where(:not([style*="--font-hand"])),
html.trazo .washi-frame .font-trazo-name:where(:not([style*="--font-hand"])),
html.trazo .card-face.group:hover h3.font-display.leading-none,
html.trazo .deck-carousel a:hover .deck-name,
.paint-btn .paint-btn__label,
.fl-name,
.sumi-tinta .ifc-title { text-shadow: var(--trazo-grosor); }
/* at rest these are plain Trazo — no compensation until they turn Bermellón
   (and an inline `fontFamily: var(--font-hand)` overrides the class rules above) */
html.trazo .card-face h3.font-display.leading-none { text-shadow: none; }
/* text-shadow inherits: children painted in plain Trazo inside a Bermellón line
   (the red «rómpelas» of the hero, the arrow of a washi link) drop it again
   (lowest specificity on purpose: any Bermellón rule above still wins over it) */
:where(html.trazo .washi-frame) :is(p, h1, h2, h3, h4, li, span, a, button, strong, em, b),
:where(html.trazo h1) span[style*="vermillion"] { text-shadow: none; }
html.trazo .card-face.group:hover h3.font-display.leading-none { text-shadow: var(--trazo-grosor); }

/* ── 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; }

/* Hilo divisor — the silk thread (washi-nota--hilo) as a full-width rule, in place of a grey
   divider (Victor, 02-Nov). Same mano as the note: the wobble + the #washi-torn filter.
   Colour via --nota (vermillion by default, or the context's accent). */
.hilo-rule {
  height: 36px; width: 100%;
  background: var(--nota, #e23a1c); opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M-2 18 C 20 10 38 28 58 18 S 92 9 104 18' fill='none' stroke='%23000' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 21.5 C 22 13.5 40 31 60 21.5 S 94 12.5 104 21.5' fill='none' stroke='%23000' stroke-width='.8' 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 36' preserveAspectRatio='none'%3E%3Cpath d='M-2 18 C 20 10 38 28 58 18 S 92 9 104 18' fill='none' stroke='%23000' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 21.5 C 22 13.5 40 31 60 21.5 S 94 12.5 104 21.5' fill='none' stroke='%23000' stroke-width='.8' stroke-opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: url(#washi-torn);
}

/* Hilo como separador en el borde superior de una sección (reemplaza border-t border-line).
   Se extiende a lo ancho del elemento — en secciones full-width = toda la pantalla — sin
   riesgo de scroll horizontal (no usa 100vw). Mismo trazo + #washi-torn (Victor, 02-Nov). */
.hilo-top { position: relative; }
.hilo-top::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 36px; z-index: 1;
  background: var(--nota, #e23a1c); opacity: .6; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M-2 18 C 20 10 38 28 58 18 S 92 9 104 18' fill='none' stroke='%23000' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 21.5 C 22 13.5 40 31 60 21.5 S 94 12.5 104 21.5' fill='none' stroke='%23000' stroke-width='.8' 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 36' preserveAspectRatio='none'%3E%3Cpath d='M-2 18 C 20 10 38 28 58 18 S 92 9 104 18' fill='none' stroke='%23000' stroke-width='1.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-2 21.5 C 22 13.5 40 31 60 21.5 S 94 12.5 104 21.5' fill='none' stroke='%23000' stroke-width='.8' stroke-opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: url(#washi-torn);
}

/* ── 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));
}

/* ── Cinta de papel · etiquetas de filtro (Victor, 29-Oct) ──────────────────
   «Las etiquetas … podrían ser cinta adhesiva de papel, como la que usamos para
   la división del footer»: each filter chip is a strip of the same masking tape
   (cinta-1/2/3.webp, straightened from tear-pin/tape-*), torn ends kept by a
   border-image (the ends don't stretch, the middle does), a hair crooked and
   each one a little different. Selected: the tape is painted red, the label
   black Trazo Bold. Use: <button class="tape-chip" aria-pressed>. */
.tape-chip {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  min-height: 2.5rem; padding: .35rem 1.15rem .3rem; border: 0; background: none;
  font-family: var(--font-hand); font-size: 1.05rem; line-height: 1; color: var(--color-ink);
  cursor: pointer; transform: rotate(var(--tape-tilt, -1deg)); transition: transform .25s cubic-bezier(.22,1,.36,1), color .2s;
}
.tape-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-style: solid; border-width: 0 12px;
  border-image: var(--tape, url("/brand/papel/cinta-1.webp")) 0 26 fill / 0 12px stretch;
  filter: drop-shadow(0 1px 1.2px rgb(23 19 14 / .2));
  transition: filter .25s ease;
}
.tape-chip:nth-of-type(3n+2) { --tape: url("/brand/papel/cinta-2.webp"); --tape-tilt: 1.2deg; }
.tape-chip:nth-of-type(3n)   { --tape: url("/brand/papel/cinta-3.webp"); --tape-tilt: -.4deg; }
/* hover: black Trazo Bold with the vermillion flashes (Bermellón + its grosor), and
   the tape turns a little, a different way each time (CardsBrowser sets a random
   --tape-hover on pointerenter) — Victor, 29-Oct */
.tape-chip:hover { transform: rotate(var(--tape-hover, 2deg)) translateY(-1px); }
/* html.trazo + the class beat «everything on washi is plain Trazo» (globals.css) */
html.trazo .tape-chip:hover { font-family: var(--font-trazo); font-weight: 700; text-shadow: var(--trazo-grosor); }
.tape-chip:hover::before { filter: drop-shadow(0 3px 4px rgb(23 19 14 / .22)); }
/* selected: the tape itself is red (Victor, 29-Oct: «podemos pintar el tape de rojo
   y ya») — the same strip in the footer's red, crinkles kept; the label in black
   Trazo Bold (Victor: «texto en trazo negro bold, no blanco») */
.tape-chip[aria-pressed="true"] { color: var(--color-ink, #17130e); font-weight: 700; }
.tape-chip[aria-pressed="true"]::before { border-image-source: var(--tape-red, url("/brand/papel/cinta-1-roja.webp")); }
.tape-chip:nth-of-type(3n+2) { --tape-red: url("/brand/papel/cinta-2-roja.webp"); }
.tape-chip:nth-of-type(3n)   { --tape-red: url("/brand/papel/cinta-3-roja.webp"); }
/* hovering the red tape: no vermillion flashes on the red — they hurt legibility
   (Victor, 29-Oct). Same Bold glyphs, flashes inked (--trazo-sin-destellos, above). */
html.trazo .tape-chip[aria-pressed="true"]:hover { font-palette: --trazo-sin-destellos; }
.tape-chip:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tape-chip, .tape-chip::before { transition: none; } }

/* ── Campo washi · la pareja del botón (Victor, 29-Oct: «se ve feo y raro») ──
   The email field and its washi button are one pair: same paper, same 12px
   corner, same height. The field used to be torn + wet-shaded beside a rounded
   button and read as two families; now it is the button's sheet, sunk a hair
   (inner shadow) so it still reads as a place to write. Use with .washi-frame. */
.wet-field::before {
  filter: none; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(23 19 14 / 0.08), 0 8px 22px rgb(23 19 14 / 0.05);
}
.wet-field::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgb(23 19 14 / 0.16);
  transition: box-shadow .2s ease;
}
.wet-field:focus-within::after { box-shadow: inset 0 1px 3px rgb(23 19 14 / 0.16), 0 0 0 2px rgb(23 19 14 / 0.22); }
.wet-field:focus-within { outline: none; }

/* ── El papel se moja de tinta · botón con estados ───────────────────────
   Simple: on hover/focus the washi sheet fills with ink (a clean fade that
   follows the torn edge) and the Trazo lettering turns cream; the chip lifts a
   hair. While sending, it stays inked. Use with .washi-frame. */
.paint-btn { position: relative; isolation: isolate; cursor: pointer; border-radius: 0; transition: transform .2s ease; }
.paint-btn .paint-btn__label {
  position: relative; z-index: 2;
  font-family: var(--font-trazo); font-weight: 400; font-size: 1.12em; letter-spacing: 0;
  color: var(--color-ink);
  transition: color .22s ease;
}
.paint-btn .paint-btn__ink {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-ink);
  filter: url(#washi-torn);
  opacity: 0;
  transition: opacity .22s ease;
}
.paint-btn:hover .paint-btn__ink,
.paint-btn:focus-visible .paint-btn__ink,
.paint-btn[data-state="loading"] .paint-btn__ink { opacity: 1; }
.paint-btn:hover .paint-btn__label,
.paint-btn:focus-visible .paint-btn__label,
.paint-btn[data-state="loading"] .paint-btn__label { color: var(--color-paper); }
.paint-btn:hover,
.paint-btn:focus-visible { transform: translateY(-1px); }

/* Skool / dark washi button: inked by default — the resting look is the hover
   state, so the chip reads black (torn ink edge) with its mark in cream. */
.paint-btn--ink .paint-btn__ink { opacity: 1; }
.paint-btn--ink .paint-btn__label { color: var(--color-paper); }
.paint-btn--ink:hover .paint-btn__ink,
.paint-btn--ink:focus-visible .paint-btn__ink { opacity: .9; }
/* Hanko-red washi button (e.g. Skool): the chip fills with the brand red by default. */
.paint-btn--hanko .paint-btn__ink { background: var(--color-hanko); opacity: 1; }
.paint-btn--hanko .paint-btn__label { color: var(--color-paper); }
.paint-btn--hanko:hover .paint-btn__ink,
.paint-btn--hanko:focus-visible .paint-btn__ink { opacity: .92; }
.paint-btn__logo { height: 2.6em; width: auto; display: block; filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .paint-btn,
  .paint-btn .paint-btn__ink,
  .paint-btn .paint-btn__label { transition: none; }
  .paint-btn:hover, .paint-btn:focus-visible { transform: none; }
  .wet-field::after { transition: none; }
}

/* ── Señal washi · «Pronto» / «Beta» (Victor, 29-Oct: «un botón de WIP o SOON, en washi
   trazo… una señal») ── a small slip of washi, Trazo in ink, set a touch askew like a label
   stuck on by hand. A sign, not a button: no hover, no pointer. Use: <span class="washi-sign">. */
.washi-sign {
  display: inline-flex; align-items: center; flex: none; padding: .2rem .55rem .14rem; border-radius: 6px;
  font-family: var(--font-trazo, var(--font-hand)); font-weight: 700; font-size: .78rem; line-height: 1; letter-spacing: .02em;
  color: var(--color-ink, #17130e); transform: rotate(-3deg);
  background: url("/brand/papel/washi-fibra.webp") center / cover, #f5eddd;
  box-shadow: 0 1px 1.5px rgb(23 19 14 / .18), 0 4px 8px -4px rgb(23 19 14 / .25);
}