/* =========================================================
   Identidad propia de cada negocio
   🍽️ Restaurante: bistró cálido · 🪩 Discoteca: noche de neón · 👗 Moda: revista editorial
   ========================================================= */

/* ---------- Comunes: menos saturación y más profundidad ---------- */
.orbs { transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0); }
.orbs i { will-change: transform; }
/* Desplazamiento MUY lento, con varias paradas (60–110 s por recorrido) */
.orbs .o1 { animation: drift-a 90s ease-in-out infinite alternate !important; }
.orbs .o2 { animation: drift-b 110s ease-in-out infinite alternate !important; }
.orbs .o3 { animation: drift-c 75s ease-in-out infinite alternate !important; }
.orbs .o4 { animation: drift-d 100s ease-in-out infinite alternate !important; }
@keyframes drift-a { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-6vw, 5vh) scale(1.06); } 66% { transform: translate(-2vw, 12vh) scale(.96); } 100% { transform: translate(-10vw, 3vh) scale(1.03); } }
@keyframes drift-b { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(8vw, -8vh) scale(1.1); } 100% { transform: translate(3vw, 10vh) scale(.94); } }
@keyframes drift-c { 0% { transform: translate(0, 0); } 50% { transform: translate(-8vw, -10vh) scale(1.08); } 100% { transform: translate(-3vw, 4vh) scale(.95); } }
@keyframes drift-d { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, -6vh) scale(1.2); } 100% { transform: translate(6vw, -12vh) scale(.9); } }
.orbs .o1, .orbs .o3 { opacity: .78; }
.orbs .o2, .orbs .o4 { opacity: .5; }

/* Jerarquía: textos secundarios más tenues, menos color en etiquetas */
.app .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.85); }
.app .tag { font-weight: 500; }
.app .tag.good { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.18); color: #86efac; }
.app .tag.warn { background: rgba(251,191,36,.1); color: #fcd34d; }
.app .tag.bad { background: rgba(248,113,113,.1); color: #fca5a5; }
.app .ai-banner { background: var(--glass), rgba(14,16,22,.3) !important; }
.app .ai-badge { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12); }
.app .card-h p, .app .kpi .label { color: rgba(255,255,255,.55); }
.app .delta .muted { color: rgba(255,255,255,.4) !important; }
.sidebar .nav-item.active { background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.04)) !important; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.sidebar .nav-item.active span { filter: none; }

/* Aparición escalonada y luz que sigue al cursor */
.app .rv { animation: rvIn .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--ri, 0) * 55ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } }
.app .card, .app .hero, .app .kcard { position: relative; }
.app .card::after, .app .hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 60%); }
.app .card:hover::after, .app .hero:hover::after { opacity: 1; }
.app .card { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
@media (hover: hover) { .app .card.kpi:hover, .app .live-tile:hover { transform: translateY(-3px); } }

/* ---------- Portada (común) ---------- */
.hero { border-radius: 26px; padding: 26px; margin-bottom: 16px; overflow: hidden; background: var(--glass), rgba(12,13,18,.42); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-b); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.9); }
.eyebrow { display: inline-block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 600; }
.hero h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.02; margin: 10px 0 10px; letter-spacing: -.03em; font-weight: 500; }
.hero h2 em { font-style: italic; color: var(--accent); }
.hr-sub { color: rgba(255,255,255,.6); font-size: 14.5px; max-width: 560px; }
.hero .btn { margin-top: 14px; }

/* =========================================================
   🍽️ RESTAURANTE · bistró cálido
   ========================================================= */
body[data-industry="restaurante"] { --accent: #e0864f; --accent2: #e9c27a; --o1: #d9a35a; --o1b: #6b3a14; --o2: #b5532f; --o3: #5f6f3a; --o4: #c98a3c;
  --glass: linear-gradient(160deg, rgba(255,236,214,.08), rgba(255,236,214,.02) 60%); --glass-b: rgba(255,226,196,.12); }
body[data-industry="restaurante"] .app { --r: 20px; color: #f4ece2; }
body[data-industry="restaurante"] .app h1, body[data-industry="restaurante"] .app h2, body[data-industry="restaurante"] .app h3,
body[data-industry="restaurante"] .app .kpi .value, body[data-industry="restaurante"] .app .lt-v, body[data-industry="restaurante"] .title-wrap h1 {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.015em; font-weight: 600; }
body[data-industry="restaurante"] .title-wrap h1 { font-weight: 500; font-size: 26px; }
/* Textura de papel sutil */
body[data-industry="restaurante"] .orbs::after { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-industry="restaurante"] .orbs .o1 { filter: blur(2px) saturate(.85); }
.hero-r { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: stretch; }
.hero-r h2 em { color: #e9c27a; }
.hr-main { position: relative; padding-right: 150px; }
.hr-ring { position: absolute; right: 0; top: 0; width: 132px; height: 132px; }
.hr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hr-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.hr-ring .trk { stroke: rgba(255,236,214,.1); }
.hr-ring .val { stroke: url(#none); stroke: #e9c27a; transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 8px rgba(233,194,122,.45)); }
.hr-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hr-ring b { font-family: "Fraunces", serif; font-size: 34px; font-weight: 600; line-height: 1; }
.hr-ring span { font-size: 11px; color: rgba(255,236,214,.6); }
.hr-resv { margin-top: 20px; display: grid; gap: 2px; }
.hr-resv small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,236,214,.5); margin-bottom: 6px; }
.hr-resv div { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(255,226,196,.14); font-size: 14px; }
.hr-resv time { font-family: "Fraunces", serif; color: #e9c27a; font-weight: 600; }
.hr-resv em { font-style: normal; color: rgba(255,236,214,.55); font-size: 13px; }
.hr-dish { border-radius: 20px; overflow: hidden; background: rgba(255,236,214,.05); border: 1px solid rgba(255,226,196,.12); display: flex; flex-direction: column; }
.hr-dish-img { height: 170px; background: center / cover no-repeat; }
.hr-dish-b { padding: 16px 18px 18px; display: grid; gap: 6px; }
.hr-dish-b h3 { font-family: "Fraunces", serif; font-size: 24px; font-weight: 600; }
.hr-dish-b p { color: rgba(255,236,214,.65); font-size: 13.5px; }
.hr-dish-f { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.hr-dish-f b { font-family: "Fraunces", serif; font-size: 22px; color: #e9c27a; }
.hr-dish-f .btn { margin: 0; }

/* =========================================================
   🪩 DISCOTECA · noche de neón
   ========================================================= */
body[data-industry="discoteca"] { --accent: #b26bff; --accent2: #2de2e6; --o1: #9b5cff; --o1b: #2a0a5e; --o2: #1f4fff; --o3: #10c4d6; --o4: #ff3ea5;
  --glass: linear-gradient(160deg, rgba(190,160,255,.07), rgba(120,200,255,.02) 60%); --glass-b: rgba(178,107,255,.18); }
body[data-industry="discoteca"] .app { --r: 16px; }
body[data-industry="discoteca"] .app h2, body[data-industry="discoteca"] .title-wrap h1, body[data-industry="discoteca"] .app .kpi .value,
body[data-industry="discoteca"] .app .lt-v, body[data-industry="discoteca"] .app .card-h h3 { font-family: "Unbounded", "Inter", sans-serif; letter-spacing: -.02em; font-weight: 600; }
body[data-industry="discoteca"] .app .card-h h3 { font-size: 14px; font-weight: 500; letter-spacing: 0; }
body[data-industry="discoteca"] .app .kpi .value { font-size: 23px; }
body[data-industry="discoteca"] .app .card { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(178,107,255,.06), 0 0 40px -18px rgba(178,107,255,.45), 0 30px 60px -30px rgba(0,0,0,.9); }
/* Reflectores que barren el fondo y piso cuadriculado */
body[data-industry="discoteca"] .orbs .o1 { border-radius: 0; width: 80vw; height: 120vh; right: 10vw; top: -40vh; filter: blur(30px); opacity: .32;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, var(--o1) 10deg, transparent 22deg, transparent 50deg, var(--o4) 58deg, transparent 70deg); transform-origin: 50% 0;
  box-shadow: none; animation: sweep 26s ease-in-out infinite alternate !important; }
body[data-industry="discoteca"] .orbs .o3 { border-radius: 0; width: 70vw; height: 110vh; left: 0; right: auto; bottom: auto; top: -40vh; filter: blur(30px); opacity: .25;
  background: conic-gradient(from 170deg at 50% 0%, transparent 0deg, var(--o3) 9deg, transparent 20deg); transform-origin: 50% 0; animation: sweep2 32s ease-in-out infinite alternate !important; }
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes sweep2 { from { transform: rotate(18deg); } to { transform: rotate(-12deg); } }
body[data-industry="discoteca"] .orbs::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; opacity: .35;
  background-image: linear-gradient(rgba(178,107,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(45,226,230,.35) 1px, transparent 1px); background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
  animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 60px, 0 0; } }
.hero-d { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; border-color: rgba(178,107,255,.3);
  background: radial-gradient(500px 260px at 0% 0%, rgba(178,107,255,.22), transparent 70%), var(--glass), rgba(8,6,20,.55); }
.hero-d h2 { font-family: "Unbounded", sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; }
.hero-d h2 em { font-style: normal; color: #2de2e6; text-shadow: 0 0 18px rgba(45,226,230,.6); }
.hd-count { display: flex; gap: 12px; margin: 6px 0 22px; }
.hd-count div { min-width: 96px; padding: 12px 10px; border-radius: 14px; text-align: center; background: rgba(10,6,26,.6); border: 1px solid rgba(178,107,255,.35); box-shadow: inset 0 0 20px rgba(178,107,255,.15); }
.hd-count b { display: block; font-family: "Unbounded", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.05; color: #fff; text-shadow: 0 0 14px rgba(178,107,255,.9), 0 0 32px rgba(178,107,255,.5); font-variant-numeric: tabular-nums; }
.hd-count b.tick { animation: tick .5s ease; }
@keyframes tick { 0% { transform: translateY(-6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.hd-count small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hd-line { display: grid; gap: 6px; }
.hd-line small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.hd-line div { display: flex; gap: 14px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.03); font-size: 14px; }
.hd-line time { font-family: "Unbounded", sans-serif; font-size: 12px; color: rgba(255,255,255,.55); min-width: 70px; }
.hd-line div.on { background: rgba(178,107,255,.16); box-shadow: inset 0 0 0 1px rgba(178,107,255,.45), 0 0 24px -8px rgba(178,107,255,.8); }
.hd-line div.on::after { content: "● AHORA"; margin-left: auto; font-size: 10px; letter-spacing: .12em; color: #ff3ea5; animation: blinkOn 1.4s infinite; }
@keyframes blinkOn { 50% { opacity: .35; } }
.hd-side { display: grid; gap: 14px; align-content: start; }
.hd-meter { padding: 14px; border-radius: 16px; background: rgba(10,6,26,.5); border: 1px solid rgba(255,255,255,.08); }
.hd-meter-h { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.hd-meter-h b { font-family: "Unbounded", sans-serif; color: #fff; font-size: 14px; }
.hd-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 26px; margin-bottom: 8px; }
.hd-bars i { border-radius: 4px; background: rgba(255,255,255,.07); }
.hd-bars i.on { background: linear-gradient(180deg, #2de2e6, #b26bff); box-shadow: 0 0 10px rgba(178,107,255,.6); animation: eq 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -90ms); transform-origin: bottom; }
@keyframes eq { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
.hd-meter small { font-size: 12px; color: rgba(255,255,255,.5); }

/* =========================================================
   👗 MODA · revista editorial
   ========================================================= */
body[data-industry="moda"] { --accent: #e7a1b5; --accent2: #d9c3e8; --o1: #f1c7d3; --o1b: #6b3a52; --o2: #b7a3dc; --o3: #f2d4c4; --o4: #f8e1ea;
  --glass: linear-gradient(170deg, rgba(255,240,245,.06), rgba(255,240,245,.015) 70%); --glass-b: rgba(255,232,240,.14); }
body[data-industry="moda"] .app { --r: 6px; }
body[data-industry="moda"] .app .card, body[data-industry="moda"] .app .hero, body[data-industry="moda"] .sidebar, body[data-industry="moda"] .kcol, body[data-industry="moda"] .kcard, body[data-industry="moda"] .ai-banner, body[data-industry="moda"] .ar-banner { border-radius: 6px !important; }
body[data-industry="moda"] .app .btn, body[data-industry="moda"] .switch, body[data-industry="moda"] .switch button { border-radius: 2px !important; }
body[data-industry="moda"] .app h2, body[data-industry="moda"] .title-wrap h1, body[data-industry="moda"] .app .kpi .value, body[data-industry="moda"] .app .card-h h3, body[data-industry="moda"] .app .lt-v {
  font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
body[data-industry="moda"] .app .card-h h3 { font-size: 18px; }
body[data-industry="moda"] .title-wrap h1 { font-size: 28px; font-style: italic; }
body[data-industry="moda"] .app .kpi .label, body[data-industry="moda"] .nav-g, body[data-industry="moda"] .app .card-h p { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
body[data-industry="moda"] .app .kpi .value { font-size: 30px; }
body[data-industry="moda"] .orbs i { filter: blur(70px) !important; opacity: .42 !important; border-radius: 50% !important; box-shadow: none !important; }
body[data-industry="moda"] .orbs .o1 { width: 60vw; height: 50vw; background: radial-gradient(closest-side, var(--o1), transparent) !important; }
/* Líneas editoriales finas */
body[data-industry="moda"] .orbs::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(90deg, rgba(255,232,240,.05) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.hero-m { padding: 30px; }
.hm-head h2 { font-family: "Playfair Display", serif; font-size: clamp(34px, 5vw, 62px); font-weight: 400; letter-spacing: -.02em; }
.hm-head h2 em { color: #f1c7d3; }
.hm-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px; background: rgba(255,232,240,.14); border: 1px solid rgba(255,232,240,.14); }
.hm-look { position: relative; text-align: left; background: rgba(10,10,14,.55); border: 0; color: #fff; padding: 14px 14px 16px; display: grid; gap: 4px; transition: background .3s; }
.hm-look:hover { background: rgba(231,161,181,.08); }
.hm-n { font-family: "Playfair Display", serif; font-style: italic; font-size: 13px; color: rgba(255,232,240,.55); }
.hm-img { aspect-ratio: 4 / 5; background: center / cover no-repeat; margin: 6px 0 8px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hm-look:hover .hm-img { transform: scale(1.03); }
.hm-look b { font-family: "Playfair Display", serif; font-weight: 500; font-size: 16px; }
.hm-p { font-size: 12px; letter-spacing: .12em; color: rgba(255,232,240,.6); }
.hm-foot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,232,240,.14); font-size: 13px; }
.hm-foot span { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: rgba(255,232,240,.5); }
.hm-foot b { font-family: "Playfair Display", serif; font-size: 20px; font-weight: 500; font-style: italic; }
.hm-foot em { font-style: normal; color: #86efac; }
.hm-foot .link-btn { margin-left: auto; color: #f1c7d3; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .hero { padding: 20px; border-radius: 22px; }
  .hero-r, .hero-d { grid-template-columns: 1fr; }
  .hr-main { padding-right: 0; }
  .hr-ring { position: relative; width: 110px; height: 110px; margin: 10px 0; }
  .hd-count div { min-width: 0; flex: 1; }
  .hd-count b { font-size: 30px; }
  .hm-strip { grid-template-columns: repeat(4, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hm-look { scroll-snap-align: start; }
  body[data-industry="discoteca"] .orbs::after { height: 40%; }
}
@media (prefers-reduced-motion: reduce) { .orbs::after, .hd-bars i, .hd-line div.on::after { animation: none !important; } .app .rv { animation: none; } }
@media (max-width: 860px) {
  .title-wrap h1 { font-size: 17px !important; white-space: normal; line-height: 1.15; }
  body[data-industry="discoteca"] .title-wrap h1 { font-size: 14.5px !important; }
  body[data-industry="moda"] .title-wrap h1 { font-size: 19px !important; }
}