/* ==========================================================================
   NATA - BRUSH STROKES, DOODLES & STREETWEAR GESTURES CSS
   ========================================================================== */

/* 1. Subrayados de Pincelada / Rotulador */
.brush-underline {
  position: relative;
  display: inline-block;
}

.brush-underline::after {
  content: '';
  position: absolute;
  left: -4%;
  bottom: -4px;
  width: 108%;
  height: 12px;
  background-color: var(--color-paint-red);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12 C 40 4, 120 16, 198 8 C 150 18, 60 14, 2 12 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12 C 40 4, 120 16, 198 8 C 150 18, 60 14, 2 12 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  z-index: -1;
  opacity: 0.9;
}

.brush-underline-yellow::after {
  background-color: var(--color-tape-yellow);
}

/* 2. Corona Basquiat Doodle (SVG Overlay) */
.doodle-crown {
  position: absolute;
  top: -24px;
  right: -18px;
  width: 38px;
  height: 28px;
  fill: var(--color-tape-yellow);
  transform: rotate(12deg);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.doodle-crown-red {
  fill: var(--color-paint-red);
}

/* 3. Tachón / Pincelada sobre Ojos / Rostro (Blinded by the sight effect) */
.brush-slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: 90%;
  height: 24px;
  background: var(--color-paint-red);
  mix-blend-mode: hard-light;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20 Q 80 5 150 25 T 295 18 Q 200 38 100 28 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20 Q 80 5 150 25 T 295 18 Q 200 38 100 28 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}

/* 4. Cajas de Texto Dibujadas a Mano (Sketch Box) */
.sketch-box {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--color-paint-red);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.sketch-box-yellow {
  border-color: var(--color-tape-yellow);
  color: var(--color-tape-yellow);
}

/* 5. Flechas y Garabatos Técnicos */
.doodle-arrow {
  position: absolute;
  width: 44px;
  height: 32px;
  stroke: var(--color-tape-yellow);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}