/* ============================================================
   TINTA — Estudio de Tatuaje · tinta-upgrade.css
   Capa "CAOS": inversión a OSCURO TOTAL + neón crimson→violeta,
   tipografía Unbounded, fondo con degradado y blooms, glow,
   rounding fuerte y reveals. Carga DESPUÉS de style-upgrade.css.
   ============================================================ */

/* ── TOKENS: paleta oscura + neón ───────────────────────────── */
:root {
  --acc:      #ff2d55;   /* neón crimson-rosa */
  --acc-2:    #ff6a8a;   /* rosa claro */
  --acc-dark: #d0113c;
  --acc-soft: rgba(255, 45, 85, 0.10);
  --violet:   #b537f2;   /* violeta eléctrico (2º del gradiente) */

  --bg:      #0c0b12;
  --bg-2:    #141019;    /* banda de sección */
  --bg-3:    #100d17;
  --card:    #17131f;    /* superficie de tarjeta */
  --ink:     #f4f1f8;    /* TEXTO claro sobre oscuro */
  --ink-soft:#c2bcd0;
  --bone:    #f4f1f8;
  --muted:   #8b849c;
  --line:    rgba(255, 255, 255, 0.09);
  --line-2:  rgba(255, 255, 255, 0.17);
  --dark:    #0a0810;    /* banda oscura profunda */
  --footer-bg: #08060d;

  --display: "Unbounded", "Archivo", system-ui, sans-serif;
  --serif:   "Unbounded", "Archivo", system-ui, sans-serif;
  --bodoni:  "Unbounded", "Archivo", system-ui, sans-serif;
  --sans:    "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "Space Mono", "DM Mono", ui-monospace, monospace;

  --r: 20px;
  --grad: linear-gradient(100deg, #ff2d55 0%, #ff5a3d 42%, #b537f2 100%);
}

/* ── FONDO CAOS: degradado + blooms neón ────────────────────── */
body {
  color: var(--ink) !important;
  background:
    radial-gradient(1100px 720px at 78% -8%, rgba(181, 55, 242, 0.16), transparent 58%),
    radial-gradient(900px 640px at 4% 8%, rgba(255, 45, 85, 0.13), transparent 55%),
    radial-gradient(1200px 900px at 50% 108%, rgba(181, 55, 242, 0.10), transparent 60%),
    linear-gradient(180deg, #0d0b13 0%, #0a0810 60%, #08060d 100%) !important;
  background-attachment: fixed !important;
}

/* Grano/viñeta heredados usan multiply -> invisibles en oscuro. Apagar para limpieza */
body::before, body::after { mix-blend-mode: screen !important; opacity: 0.02 !important; }
.vignette-overlay { box-shadow: inset 0 0 200px 60px rgba(0, 0, 0, 0.55) !important; }

/* ── TIPOGRAFÍA display: Unbounded, más apretada ────────────── */
h1, h2, h3, .serif,
.h-title, .sec-hd h2, .about-text h2,
.svc-title, .cur-title, .logo-name, .ftr-bn,
.menu-brand, .menu-links a, .menu-tel, .rf-phone, .hstat-n,
.cb-head .t, .rf-ok h3 {
  font-family: var(--display) !important;
  font-optical-sizing: auto;
}
.h-title { font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.0 !important; }
.sec-hd h2, .about-text h2 { font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.04 !important; }
.svc-title, .cur-title { font-weight: 700 !important; letter-spacing: -0.01em !important; }
.logo-name { font-weight: 800 !important; letter-spacing: 0.16em !important; }
.ftr-bn, .menu-brand { font-weight: 800 !important; letter-spacing: 0.16em !important; }
.hstat-n { font-weight: 700 !important; }

/* Mono en labels: Space Mono */
.lbl, .h-badge, .nav a, .btn-rsv, .hdr-cita, .menu-btn, .mi-n, .menu-loc,
.svc-tag, .cred, .cur-badge, .gtag, .gcap, .ib h3, .rf-field label, .rf-addr,
.ticker-track span, .test-auth, .ftr-tg, .ftr-col h4, .ftr-bot, .qr-cap,
.cb-head .s, .cb-chip, .lb-count, .hstat-l {
  font-family: var(--mono) !important;
}

/* ── GLOW + GRADIENTE en énfasis ────────────────────────────── */
/* eyebrow neón con glow */
.lbl, .ib h3 {
  color: var(--acc) !important;
  text-shadow: 0 0 14px rgba(255, 45, 85, 0.55);
}
.sec-ink .lbl, .ftr-col h4 { color: var(--acc-2) !important; }

/* palabras <em> en gradiente neón (vence al color !important base) */
.h-title em, .sec-hd h2 em, .about-text h2 em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 22px rgba(255, 45, 85, 0.30));
}

/* barra del sec-hd en gradiente + glow */
.sec-hd::before {
  height: 3px !important;
  width: 64px !important;
  background: var(--grad) !important;
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.5);
}
.sec-ink .sec-hd::before { background: var(--grad) !important; }

/* ── HERO oscuro: reforzar velo + título con glow ───────────── */
.hero-ov {
  background:
    linear-gradient(100deg, rgba(8, 6, 13, 0.92) 0%, rgba(8, 6, 13, 0.6) 46%, rgba(8, 6, 13, 0.28) 76%, rgba(12, 11, 18, 0.5) 100%),
    radial-gradient(700px 520px at 12% 40%, rgba(255, 45, 85, 0.18), transparent 60%),
    linear-gradient(to bottom, rgba(8, 6, 13, 0.55) 0%, transparent 22%) !important;
}
.h-title { color: var(--bone) !important; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5); }
.h-badge { color: var(--acc-2) !important; border-bottom-color: rgba(255, 45, 85, 0.4) !important; text-shadow: 0 0 12px rgba(255, 45, 85, 0.4); }
.h-sub { color: rgba(244, 241, 248, 0.86) !important; }
.hero-stats { background: rgba(8, 6, 13, 0.55) !important; border-top-color: var(--line) !important; }
.hstat { border-right-color: var(--line) !important; }
.hstat-n { color: var(--acc) !important; text-shadow: 0 0 20px rgba(255, 45, 85, 0.45); }
.hstat-l { color: rgba(244, 241, 248, 0.6) !important; }

/* ── HEADER: transparente sobre hero, panel oscuro al scroll ── */
.hdr.scrolled {
  background: rgba(10, 8, 16, 0.82) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
}
.hdr .logo-name, .hdr.scrolled .logo-name { color: var(--bone) !important; }
.hdr .logo-sub, .hdr.scrolled .logo-sub { color: rgba(244, 241, 248, 0.55) !important; }
.hdr .hdr-cita, .hdr.scrolled .hdr-cita { color: var(--bone) !important; border-bottom-color: rgba(255, 45, 85, 0.7) !important; }
.hdr .menu-btn, .hdr.scrolled .menu-btn { color: var(--bone) !important; }
.hdr .menu-ico i, .hdr.scrolled .menu-ico i { background: var(--bone) !important; }
.hdr-cita:hover, .menu-btn:hover { color: var(--acc-2) !important; }
.hdr::after { background: var(--grad) !important; }

/* menú overlay ya es oscuro; acentos neón */
.menu-links a, .menu-brand, .menu-close, .menu-tel { color: var(--bone) !important; }
.menu-links a:hover { color: var(--acc-2) !important; }
.mi-n { color: var(--acc) !important; }
.menu-close:hover, .menu-tel:hover { color: var(--acc-2) !important; }

/* ── TICKER oscuro ──────────────────────────────────────────── */
.ticker { background: rgba(255, 255, 255, 0.015) !important; border-top-color: var(--line) !important; border-bottom-color: var(--line) !important; }
.ticker-track span { color: rgba(244, 241, 248, 0.5) !important; }
.ticker-track span i { color: var(--acc) !important; opacity: 0.9; }

/* ── SECCIONES: bandas oscuras ──────────────────────────────── */
.sec-dark { background: var(--bg-2) !important; }
.sec-mid  { background: var(--bg-3) !important; }
.sec-ink  { background: var(--dark) !important; }
.sec-ink .sec-hd h2 { color: var(--bone) !important; }
.sec-lead, .sec-ink .sec-lead { color: var(--muted) !important; }

/* ── CTAs: píldoras neón con glow ───────────────────────────── */
.btn-hp, .btn-rsv, .btn-wa, .mcta, .rf-submit,
.hero .btn-hp {
  background: var(--acc) !important;
  color: #0a0810 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.4), 0 10px 34px rgba(255, 45, 85, 0.32) !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
}
.btn-hp:hover, .btn-rsv:hover, .btn-wa:hover, .mcta:hover,
.hero .btn-hp:hover {
  background: var(--acc-2) !important;
  color: #0a0810 !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 138, 0.6), 0 14px 44px rgba(255, 45, 85, 0.5) !important;
}
/* secundarios: borde claro -> borde neón en hover */
.btn-hs, .hero .btn-hs {
  border-radius: 999px !important;
  border: 1px solid var(--line-2) !important;
  color: var(--bone) !important;
}
.btn-hs:hover, .hero .btn-hs:hover {
  background: rgba(255, 45, 85, 0.12) !important;
  border-color: var(--acc) !important;
  color: var(--bone) !important;
}
.btn-svc, .btn-cur {
  border-radius: 999px !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  background: transparent !important;
}
.btn-svc:hover, .btn-cur:hover {
  background: var(--acc) !important;
  color: #0a0810 !important;
  border-color: var(--acc) !important;
  box-shadow: 0 0 22px rgba(255, 45, 85, 0.4) !important;
}

/* ── TARJETAS: superficie oscura, rounding y glow ───────────── */
.svc, .cur, .test-c {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
}
.svc-img, .cur-img { border-radius: 0 !important; }
.svc { overflow: hidden; }
.svc::after, .cur::after { height: 3px !important; background: var(--grad) !important; }
.svc-icon { border-color: var(--line-2) !important; color: var(--acc) !important; box-shadow: inset 0 0 18px rgba(255, 45, 85, 0.12); border-radius: 12px !important; }
.svc-desc, .cur-desc { color: var(--ink-soft) !important; }
.svc-tag { border-color: var(--line) !important; color: var(--muted) !important; border-radius: 999px !important; }
.cur-badge { background: rgba(255, 45, 85, 0.9) !important; color: #0a0810 !important; border-radius: 999px !important; font-weight: 700 !important; }
.cur { background: #1a1522 !important; }

/* glow neón en hover (sustituye a las sombras doradas) */
@media (hover: hover) and (pointer: fine) {
  .svc:hover {
    box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.45), 0 26px 60px rgba(255, 45, 85, 0.16) !important;
    border-color: transparent !important;
  }
  .cur:hover {
    box-shadow: 0 0 0 1px rgba(181, 55, 242, 0.5), 0 26px 60px rgba(0, 0, 0, 0.55) !important;
  }
  .test-c:hover {
    transform: translateY(-6px) rotate(-0.6deg);
    box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.3), 0 22px 48px rgba(0, 0, 0, 0.5) !important;
  }
}

/* estrellas + citas */
.test-star { color: var(--acc) !important; text-shadow: 0 0 10px rgba(255, 45, 85, 0.5); }
.test-txt { color: var(--ink) !important; font-family: var(--sans) !important; font-style: normal; font-weight: 400; }
.test-auth strong { color: var(--bone) !important; }

/* ── GALERÍA: rounding + glow hover ─────────────────────────── */
.gi { border-radius: var(--r) !important; border: 1px solid var(--line); }
@media (hover: hover) { .gi:hover { box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.5), 0 18px 40px rgba(0,0,0,0.5); } }
.gtag { background: var(--acc) !important; color: #0a0810 !important; border-radius: 999px !important; font-weight: 700 !important; }

/* ── SOBRE: marco decor neón + rotado ───────────────────────── */
.about-img { border-radius: var(--r) !important; }
.about-decor {
  border: 1px solid var(--acc) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 0 30px rgba(255, 45, 85, 0.25);
  transform: rotate(4deg);
}
.about-bio { color: var(--ink-soft) !important; }
.cred { border-color: var(--line) !important; color: var(--ink-soft) !important; border-radius: 999px !important; }
.cred-dot { background: var(--acc) !important; box-shadow: 0 0 8px rgba(255, 45, 85, 0.7); }

/* ── CARTA/QR: panel claro (QR legible) ligeramente torcido ─── */
.qr-card {
  background: #f4f1f8 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.25), 0 24px 60px rgba(0, 0, 0, 0.5) !important;
  transform: rotate(-2.2deg);
}
.qr-code svg path { fill: #0a0810 !important; }
.qr-cap { color: #6a6478 !important; }
.carta-lead { color: var(--ink-soft) !important; }

/* ── CONTACTO ───────────────────────────────────────────────── */
.ib p { color: var(--ink-soft) !important; }
.slink { color: var(--ink-soft) !important; }
.slink:hover { color: var(--acc-2) !important; }
.sic { border-radius: 12px !important; box-shadow: 0 0 18px rgba(255, 45, 85, 0.35); }
.mapa { border: 1px solid var(--line) !important; border-radius: var(--r) !important; }
.mapa iframe { filter: grayscale(1) invert(0.92) contrast(0.9) hue-rotate(180deg) brightness(0.9); }

/* ── RESERVAS: inputs oscuros ───────────────────────────────── */
.rf-field input, .rf-field select, .rf-field textarea { color: var(--ink) !important; border-bottom-color: var(--line-2) !important; }
.rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus { border-color: var(--acc) !important; }
.rf-field select option { background: #17131f; color: var(--ink); }
.rf-field label, .rf-addr { color: var(--muted) !important; }
.rf-lead { color: var(--ink-soft) !important; }
.rf-phone { color: var(--bone) !important; }
.rf-phone:hover { color: var(--acc-2) !important; }
.rf-note { color: var(--muted) !important; }
.rf-note a { color: var(--acc-2) !important; }
.rf-ok { background: var(--card) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; }
.rf-ok-mark { background: var(--acc) !important; color: #0a0810 !important; box-shadow: 0 0 22px rgba(255, 45, 85, 0.5); }
.rf-ok p { color: var(--ink-soft) !important; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.ftr { border-top: 2px solid transparent !important; border-image: var(--grad) 1 !important; }
.ftr-deco { color: var(--acc) !important; opacity: 0.14 !important; }
.ftr-col a, .ftr-tg { color: rgba(244, 241, 248, 0.5) !important; }
.ftr-col a:hover { color: var(--acc-2) !important; }
.ftr-sb { border-color: var(--line-2) !important; }
.ftr-sb:hover { border-color: var(--acc) !important; background: rgba(255, 45, 85, 0.14) !important; }
.ftr-bot a { color: var(--acc-2) !important; }

/* ── CHATBOT: burbuja oscura + neón ─────────────────────────── */
.cb-toggle { background: #17131f !important; color: var(--bone) !important; border: 1px solid var(--acc) !important; box-shadow: 0 0 22px rgba(255, 45, 85, 0.35) !important; }
.cb-toggle .cb-ic { color: var(--acc); }
.cb-dot { background: #3ee08a !important; border-color: #17131f !important; }
.cb-panel { background: var(--card) !important; border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; }
.cb-head { background: linear-gradient(100deg, var(--acc-dark), var(--violet)) !important; color: #fff !important; }
.cb-head .s { color: rgba(255, 255, 255, 0.75) !important; }
.cb-bot { background: #221b2c !important; color: var(--ink) !important; }
.cb-user { background: var(--acc) !important; color: #0a0810 !important; }
.cb-bot a { color: var(--acc-2) !important; }
.cb-chip { border-color: var(--line-2) !important; color: var(--ink-soft) !important; }
.cb-chip:hover { background: var(--acc) !important; border-color: var(--acc) !important; color: #0a0810 !important; }

/* ── SCROLL-TOP / UI flotante ───────────────────────────────── */
.scroll-top { background: #17131f !important; border-color: var(--line-2) !important; }
.scroll-top svg { stroke: var(--ink) !important; }
.scroll-top:hover { background: var(--acc) !important; border-color: var(--acc) !important; }
.scroll-top:hover svg { stroke: #0a0810 !important; }
.wa-fl { background: var(--acc) !important; color: #0a0810 !important; }

/* barra de progreso + scrollbar en gradiente */
#scrollProgress { background: var(--grad) !important; box-shadow: 0 0 12px rgba(255, 45, 85, 0.6); }
::-webkit-scrollbar-thumb { background: var(--grad) !important; }
::-webkit-scrollbar-track { background: #0a0810 !important; }

/* selección + cursor neón */
::selection { background: rgba(255, 45, 85, 0.32) !important; color: #fff !important; }
::-moz-selection { background: rgba(255, 45, 85, 0.32) !important; color: #fff !important; }
#cursor { background: var(--acc) !important; }
#cursorRing { border-color: rgba(255, 45, 85, 0.6) !important; }
#cursorLabel { color: var(--acc) !important; font-family: var(--mono) !important; }
:focus-visible { outline-color: rgba(255, 45, 85, 0.7) !important; }

/* lightbox */
.lb { background: rgba(6, 5, 11, 0.94) !important; }
.lb-close:hover, .lb-nav:hover { background: var(--acc) !important; border-color: var(--acc) !important; color: #0a0810 !important; }

/* ── Botones más compactos y con aire (píldora) ─────────────── */
.btn-hp, .btn-hs { padding: 1.05rem 1.9rem !important; }
.btn-rsv { padding: 0.72rem 1.4rem !important; }

/* ── RESPONSIVE: en móvil las tarjetas torcidas se enderezan ── */
@media (max-width: 780px) {
  .qr-card, .about-decor { transform: none !important; }
}