/* Daiana · mockups etapa 1 — versión 3: GRAFITO + tarjetas claras + acentos rosa y dorado champagne.
   Ajustes del dueño (2026-10-09): más contraste y claridad (v2) y quitar el violáceo por un gris más sobrio (v3),
   a partir de los flyers de Dai (negro/carbón, rosa, dorado y rojo).
   Todo el color vive en variables: cuando llegue el logo y la marca, se cambian acá y en ningún otro lado. */
:root{
  /* fondo y texto sobre fondo oscuro (grafito neutro) */
  --bg:#171619; --text:#f5f2f2; --muted:#b7b1b5; --faint:#8a848a; --line:#3a373d; --tint:#ffffff10;
  /* tarjetas claras (blanco cálido neutro) */
  --surface:#f8f5f4; --surface2:#ede8e7;
  --ink:#201d21; --ink-muted:#6b656a; --ink-faint:#9c9599; --ink-line:#e4dddb;
  /* marca */
  --pink:#f0408a; --coral:#f47a5e; --amber:#dcb872; --pinkink:#ff8fbc;
  --ok:#3ee0a8; --warn:#ffc94d; --bad:#ff7088;
  --glow:linear-gradient(135deg,#f0408a,#f47a5e);
  --display:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --body:'Figtree','Segoe UI',sans-serif;
}
/* Todo lo que vive dentro de una superficie clara cambia de tinta */
.card,.kpi,.banner,.ticket .in,.map,.sheet{
  --text:var(--ink); --muted:var(--ink-muted); --faint:var(--ink-faint); --line:var(--ink-line); --tint:#201d210d;
  --ok:#0a9a68; --warn:#a86300; --bad:#cf1f48; --pinkink:#d4206f; color:var(--text);
}
.card.hero{--text:#fff;--muted:#ffeaf1;--faint:#ffd6e3;--line:#ffffff40;--tint:#ffffff24;--ok:#fff;--warn:#fff;--bad:#fff;--pinkink:#fff}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#0d0c0e}
body{font-family:var(--body);color:var(--text);min-height:100vh;
  background:radial-gradient(900px 520px at 12% -10%,#ffffff12,transparent 60%),radial-gradient(800px 520px at 100% 0%,#f0408a2e,transparent 55%),#0d0c0e;
  padding:32px 20px 80px;-webkit-font-smoothing:antialiased}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- página de galería ---------- */
.pagehead{max-width:1500px;margin:0 auto 28px}
.pagehead .kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);font-weight:700}
.pagehead h1{font-family:var(--display);font-size:clamp(30px,4vw,48px);line-height:1.05;margin:6px 0 8px;font-weight:800}
.pagehead p{color:var(--muted);max-width:760px;line-height:1.5}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.nav a{color:var(--text);text-decoration:none;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#ffffff0c}
.nav a.on,.nav a:hover{background:var(--glow);border-color:transparent}
.aviso{max-width:1500px;margin:0 auto 26px;padding:12px 16px;border-radius:14px;border:1px dashed #dcb87266;background:#dcb8720d;color:#ecd7a8;font-size:13px;line-height:1.5}
.grid{max-width:1500px;margin:0 auto;display:flex;flex-wrap:wrap;gap:44px 36px;justify-content:center}
figure.fig{width:390px}
figcaption{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.45}
figcaption b{display:flex;align-items:center;gap:8px;color:var(--text);font-family:var(--display);font-size:16px;margin-bottom:3px}
figcaption b em{font-style:normal;font-family:var(--body);font-size:11px;font-weight:800;background:var(--glow);color:#fff;border-radius:7px;padding:2px 7px}

/* ---------- teléfono ---------- */
.phone{position:relative;width:390px;height:812px;border-radius:46px;border:9px solid #050506;background:var(--bg);overflow:hidden;
  box-shadow:0 0 0 1.5px #4a464d,0 40px 80px -20px #000,0 0 100px -30px #f0408a77;display:flex;flex-direction:column}
.phone::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(440px 280px at 92% -8%,#f0408a40,transparent 65%),radial-gradient(380px 300px at -12% 45%,#dcb87224,transparent 65%),radial-gradient(300px 220px at 60% 105%,#f47a5e26,transparent 70%)}
.phone::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.status{position:relative;z-index:2;height:46px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;font-size:13px;font-weight:700}
.status .notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:104px;height:26px;background:#000;border-radius:20px}
.status .sig{display:flex;gap:5px;align-items:center;font-size:11px}
.content{position:relative;z-index:2;flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 18px 0;scrollbar-width:none}
.content::-webkit-scrollbar{display:none}
.content.pb{padding-bottom:104px}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:6px 0 12px}
.top h1{font-family:var(--display);font-size:25px;line-height:1.08;font-weight:800;letter-spacing:-.01em}
.top .sub{color:var(--muted);font-size:13px;margin-top:3px}
.ico-btn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#ffffff14;border:1px solid #ffffff22;color:var(--text);position:relative}
.ico-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px #2a282c}
.sec{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:18px 2px 9px;display:flex;justify-content:space-between;align-items:center}
.sec a{color:var(--amber);letter-spacing:0;text-transform:none;font-size:12px;font-weight:700}

/* franja de modo lectura (administrador general viendo como otro perfil) */
.rband{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;background:var(--amber);color:#2a2008;font-size:12.5px;font-weight:700}
.rband b{font-weight:800}
.rband .x{background:#2a200822;border-radius:9px;padding:4px 10px;font-weight:800}

/* tarjetas claras */
.card{background:var(--surface);border:1px solid #ffffff;border-radius:22px;padding:14px 16px;box-shadow:0 14px 30px -16px #000a,0 2px 0 #ffffff55 inset}
.card.hero{background:linear-gradient(150deg,#f0408a 0%,#f4605f 55%,#f58a5e 100%);border-color:#ffffff55;position:relative;overflow:hidden;box-shadow:0 18px 40px -16px #f0408acc}
.card.hero.dark{background:linear-gradient(150deg,#2b292e,#1d1b1f 60%,#2a2224);border-color:#4a464d;box-shadow:0 18px 40px -16px #000}
.card.hero::before{content:"";position:absolute;right:-70px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#ffffff44,transparent 68%)}
.card.hero.dark::before{background:radial-gradient(circle,#dcb87233,transparent 68%)}
.card.hero>*{position:relative}
.card.hero .chip{background:#ffffff30;border-color:#ffffff77;color:#fff}
.card+.card{margin-top:10px}
.lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.num.xl{font-size:54px}.num.lg{font-size:30px}.num.md{font-size:22px}.num.sm{font-size:17px}
.grad{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.hero .grad{background:none;color:#fff;-webkit-background-clip:border-box}
.muted{color:var(--muted)}.faint{color:var(--faint)}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.small{font-size:12px}.tiny{font-size:11px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpis.three{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--surface);border:1px solid #fff;border-radius:18px;padding:12px 13px;box-shadow:0 12px 26px -16px #000a}
.kpi .num{margin-top:7px}
.kpi .hint{font-size:11px;color:var(--muted);margin-top:5px}
.card .kpis .num{margin-top:6px}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:#3ee0a81f;color:var(--ok);border-color:#3ee0a844}
.chip.warn{background:#ffc94d22;color:var(--warn);border-color:#ffc94d55}
.chip.bad{background:#ff708822;color:var(--bad);border-color:#ff708855}
.chip.pink{background:#f0408a22;color:var(--pinkink);border-color:#f0408a55}
.chip.mute{background:var(--tint);color:var(--muted);border-color:var(--line)}
.chip svg.i{width:12px;height:12px;stroke-width:2.4}
.chips{display:flex;gap:7px;overflow:hidden;margin:2px 0 10px}
.chips .chip{padding:7px 12px;font-size:12px}
.chips .chip.on{background:var(--glow);color:#fff;border-color:transparent}
.chips .chip.mute{background:#ffffff14;color:#e8e3e5;border-color:#ffffff26}
.chips .chip.pink{background:#f0408a33;color:#ffc4dc;border-color:#f0408a77}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;border-radius:17px;background:var(--glow);color:#fff;font-weight:800;font-size:15px;border:0;width:100%;box-shadow:0 12px 28px -10px #f0408ac0}
.btn.ghost{background:#ffffff14;border:1px solid #ffffff33;box-shadow:none;color:#fff}
.card .btn.ghost,.sheet .btn.ghost{background:var(--surface2);border-color:var(--ink-line);color:var(--ink)}
.btn.dis{background:#ffffff14;color:#9d979c;box-shadow:none;border:1px solid #ffffff1f}
.btn.sm{height:38px;font-size:13px;border-radius:13px;width:auto;padding:0 14px}
.btn.wa{background:#1fb855;box-shadow:0 12px 28px -10px #1fb855bb}
.btn.mp{background:#009ee3;box-shadow:0 12px 28px -10px #009ee3bb}
.btn.light{background:#fff;color:#c4246f;box-shadow:0 12px 24px -12px #0008}

.bar{position:relative;height:12px;border-radius:999px;background:#201d211a;overflow:visible}
.card.hero .bar{background:#ffffff40}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--glow);box-shadow:0 0 18px #f0408a77;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.bar>i.g{background:linear-gradient(90deg,#17c58d,#3ee0a8);box-shadow:none}
.bar>i.w{background:linear-gradient(90deg,#f5a623,#ffc94d);box-shadow:none}
.bar>i.r{background:linear-gradient(90deg,#e5394f,#ff7088);box-shadow:none}
.card.hero .bar>i{background:#fff;box-shadow:0 0 18px #fff9}
.bar .mk{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:.8;border-radius:2px}
.card.hero .bar .mk{background:#fff;opacity:1;box-shadow:0 0 0 2px #f0408a66}
.bar .tk{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:#201d2133;border-radius:2px}
.bar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}
@keyframes grow{from{width:0!important}}

.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.gap6{gap:6px}.gap10{gap:10px}
.item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0}
.item .t{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .s{font-size:12px;color:var(--muted);margin-top:2px}
.item .r{text-align:right}
.item .r .amt{font-family:var(--display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;flex:none;background:var(--glow)}
.av.b{background:linear-gradient(135deg,#6f6b74,#f0408a)}.av.c{background:linear-gradient(135deg,#dcb872,#f0408a)}.av.d{background:linear-gradient(135deg,#17c58d,#8a858c)}
.av.sq{border-radius:13px;background:#f0408a14;color:#d4206f;border:1px solid #f0408a33}
.av.gr{border-radius:13px;background:#201d210f;color:#4a454c;border:1px solid var(--ink-line)}
.sep{height:1px;background:var(--line);margin:12px 0}
.calc .ln{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px}
.calc .ln b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:15px}
.calc .ln.tot{border-top:1px dashed #201d2133;margin-top:6px;padding-top:12px}
.calc .ln.tot b{font-size:20px}
.sd{display:inline-block;width:9px;height:9px;border-radius:50%;background:#0a9a68;box-shadow:0 0 0 3px #0a9a6826;flex:none}
.sd.w{background:#e09400;box-shadow:0 0 0 3px #e0940026}.sd.r{background:#cf1f48;box-shadow:0 0 0 3px #cf1f4826}.sd.n{background:#9c9599;box-shadow:0 0 0 3px #9c959926}

/* formularios sobre fondo oscuro: campos claros */
.field{margin-bottom:11px}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.field .in{height:48px;border-radius:15px;background:var(--surface);color:var(--ink);border:1px solid #fff;display:flex;align-items:center;padding:0 14px;font-size:15px;font-weight:600;justify-content:space-between}
.field .in .ph{color:var(--ink-faint);font-weight:500}
.seg{display:flex;background:#ffffff1c;border:1px solid #ffffff2e;border-radius:16px;padding:4px;gap:4px}
.seg>div{flex:1;text-align:center;padding:10px 6px;border-radius:12px;font-size:13px;font-weight:700;color:#e8e3e5}
.seg>div small{display:block;font-weight:600;font-size:11px;margin-top:2px;opacity:.85}
.seg>div.on{background:var(--surface);color:var(--ink);box-shadow:0 8px 18px -10px #000}
.seg>div.on small{color:#c4246f;opacity:1}
.check{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:15px;border:1px solid #f0408a66;background:#f0408a26;font-size:12.5px;line-height:1.45;color:#ffe6f0}
.check .bx{width:20px;height:20px;border-radius:7px;background:var(--glow);display:grid;place-items:center;flex:none;margin-top:1px}
.check .bx svg.i{width:13px;height:13px;stroke:#fff;stroke-width:3}
.toggle{width:46px;height:27px;border-radius:99px;background:var(--glow);position:relative;flex:none}
.toggle::after{content:"";position:absolute;right:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0004}
.toggle.off{background:#201d212e}.toggle.off::after{right:auto;left:3px}

.tabs{position:absolute;left:0;right:0;bottom:0;z-index:5;height:84px;display:flex;justify-content:space-around;padding:10px 6px 22px;
  background:linear-gradient(to top,#171619 72%,#171619dd);backdrop-filter:blur(14px);border-top:1px solid #ffffff1c}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#948e94;min-width:58px;position:relative}
.tab.on{color:#fff}.tab.on svg.i{stroke:#ff6fa8}
.tab.on::before{content:"";position:absolute;top:-10px;width:34px;height:3px;border-radius:0 0 4px 4px;background:var(--glow)}
.fab{position:absolute;right:20px;bottom:100px;z-index:6;width:56px;height:56px;border-radius:19px;background:var(--glow);display:grid;place-items:center;box-shadow:0 14px 30px -8px #f0408add}
.fab svg.i{stroke:#fff;width:26px;height:26px;stroke-width:2.4}
.home-ind{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:130px;height:5px;border-radius:5px;background:#ffffffa0;z-index:7}

.banner{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:17px;font-size:13px;line-height:1.4;border:1px solid transparent}
.banner.warn{background:#fff3cf;border-color:#ffd974;color:#5a3b00}
.banner.bad{background:#ffe2e8;border-color:#ffa8b8;color:#6e1127}
.banner.ok{background:#d9f7ea;border-color:#8be0bf;color:#0b4f39}
.banner.info{background:#e9ebef;border-color:#c7ccd5;color:#2b303a}
.banner svg.i{margin-top:1px}
.banner b{display:block;color:inherit;margin-bottom:2px;font-size:13.5px}

/* entrada con perforado */
.ticket{position:relative;border-radius:26px;background:linear-gradient(160deg,#f0408a 0%,#f47a5e 100%);padding:2px;
  -webkit-mask:radial-gradient(circle 15px at 0 62%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 62%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 15px at 0 62%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 62%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket .in{border-radius:24px;background:linear-gradient(180deg,#fbf9f8,#f1ecea);padding:18px 18px 16px}
.ticket .perf{height:0;border-top:2px dashed #201d2130;margin:14px -18px}
.qr{position:relative;width:150px;height:150px;margin:0 auto;border-radius:16px;
  background-image:repeating-conic-gradient(#201d21 0 25%,#fff 0 50%);background-size:12px 12px;background-origin:content-box;background-clip:content-box;border:12px solid #fff;box-shadow:0 0 0 1px #201d2122}
.qr i{position:absolute;width:38px;height:38px;border:7px solid #201d21;background:#fff;border-radius:5px}
.qr i::after{content:"";position:absolute;inset:6px;background:#201d21;border-radius:2px}
.qr i.a{left:-1px;top:-1px}.qr i.b{right:-1px;top:-1px}.qr i.c{left:-1px;bottom:-1px}
.qr.sm{width:118px;height:118px;border-width:9px}
.map{position:relative;height:132px;border-radius:18px;overflow:hidden;border:1px solid #fff;
  background:radial-gradient(120px 80px at 70% 30%,#b8ead066,transparent 70%),repeating-linear-gradient(35deg,#201d210a 0 2px,transparent 2px 26px),repeating-linear-gradient(-55deg,#201d2108 0 2px,transparent 2px 34px),#ece8e6}
.map::before{content:"";position:absolute;left:-10%;right:-10%;top:55%;height:9px;background:#fff;transform:rotate(-8deg)}
.map .pin{position:absolute;left:52%;top:30%;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--glow);display:grid;place-items:center;box-shadow:0 10px 24px -6px #f0408a}
.map .pin::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff}
.map .you{position:absolute;left:24%;top:66%;width:14px;height:14px;border-radius:50%;background:#4aa3ff;border:3px solid #fff;box-shadow:0 0 0 8px #4aa3ff33}
.map .dist{position:absolute;right:10px;bottom:10px;background:#fff;border:1px solid var(--ink-line);border-radius:10px;padding:5px 9px;font-size:11px;font-weight:700;color:var(--ink)}

/* escáner */
.cam{position:relative;height:330px;border-radius:26px;overflow:hidden;border:1px solid #ffffff2e;
  background:radial-gradient(200px 160px at 50% 45%,#4a484e,#0c0c0e 78%)}
.cam .frame{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%)}
.cam .frame::before,.cam .frame::after{content:"";position:absolute;width:44px;height:44px;border:4px solid #fff;border-radius:10px}
.cam .frame::before{left:0;top:0;border-right:0;border-bottom:0}
.cam .frame::after{right:0;bottom:0;border-left:0;border-top:0}
.cam .frame i{position:absolute;width:44px;height:44px;border:4px solid #fff;border-radius:10px}
.cam .frame i.a{right:0;top:0;border-left:0;border-bottom:0}.cam .frame i.b{left:0;bottom:0;border-right:0;border-top:0}
.cam .laser{position:absolute;left:50%;width:210px;margin-left:-105px;height:3px;border-radius:3px;background:var(--glow);box-shadow:0 0 18px 4px #f0408ab0;top:30%;animation:scan 2.4s ease-in-out infinite alternate}
@keyframes scan{to{top:68%}}
.cam .hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12px;color:#d2ccd0}

.lock{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--tint);border:1px solid var(--line);color:var(--muted)}
.top .lock,.top>.lock{background:#ffffff14;border-color:#ffffff22;color:#e8e3e5}
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--ink-line)}
.tl .st{position:relative;padding:5px 0 13px}
.tl .st::before{content:"";position:absolute;left:-21px;top:9px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink-faint)}
.tl .st.done::before{background:#0a9a68;border-color:#0a9a68}
.tl .st.next::before{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 5px #f0408a2e}
.tl .st b{font-size:13.5px}.tl .st span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* mensaje de WhatsApp editable y material para compartir */
.bubble{background:#dcf8c6;color:#14301b;border-radius:16px 16px 4px 16px;padding:12px 14px;font-size:13.5px;line-height:1.5;position:relative;box-shadow:0 8px 20px -12px #0006}
.bubble .cur{display:inline-block;width:2px;height:15px;background:#14301b;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* flyers de ejemplo: negro con dorado champagne y rosa, como los de Dai */
.flyer{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(150px 110px at 78% 12%,#dcb87255,transparent 70%),radial-gradient(160px 120px at 10% 100%,#f0408a55,transparent 70%),linear-gradient(165deg,#2a282c,#0f0e10);box-shadow:0 14px 26px -14px #000}
.flyer.b{background:radial-gradient(160px 120px at 80% 85%,#ffb45466,transparent 70%),radial-gradient(180px 140px at 15% 15%,#ff5468aa,transparent 70%),linear-gradient(200deg,#c92c4f,#2a1014)}
.flyer h4{font-family:var(--display);font-size:17px;line-height:1.05;font-weight:800;color:#f7e3b8}
.flyer.b h4{color:#fff}
.flyer small{display:block;font-size:10px;opacity:.9;margin-top:5px;letter-spacing:.04em}
.flyer .tag{position:absolute;left:12px;top:12px;font-size:9.5px;font-weight:800;background:#ffffff2b;border:1px solid #ffffff55;border-radius:999px;padding:3px 8px}
.flyers{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media (prefers-reduced-motion:reduce){.bar>i,.cam .laser,.bubble .cur{animation:none}}

/* Fotos reales de la identidad: reemplazan los marcadores de "foto" y los círculos con iniciales */
.photo.conimg::before{background:linear-gradient(0deg,#000a,#0000 62%),var(--img) var(--pos,center)/cover no-repeat}
.photo.conimg::after{display:none}
.photo.banner.conimg::before{background:var(--img) center/cover no-repeat}
.photo.banner.conimg>span{display:none}
.photo.perfil.conimg::before{background:linear-gradient(0deg,#000d,#0000 62%),var(--img) var(--pos,50% 12%)/cover no-repeat}
.evimg.conimg{background:var(--img) center/contain no-repeat #000 !important}
.evimg.conimg>*{display:none}
.destacado.evdest.conimg{background:var(--img) center/cover no-repeat #000;aspect-ratio:3/2;display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-shadow:0 14px 28px -14px #000}
.destacado.evdest.conimg h2,.destacado.evdest.conimg p{display:none}
.destacado.evdest.conimg .tg{align-self:flex-start;background:#000a;color:#fff}
.destacado.evdest.conimg .btn{width:auto;align-self:flex-end;height:36px;padding:0 20px;font-size:13px}
.photo.conimg.cont::before{background:var(--img) center/contain no-repeat #000}
.photo.conimg.cont span{display:none}
.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.av:has(>img){overflow:hidden;padding:0;background:#000}