/* ===== Sitios de ejemplo dentro de pantallas ===== */
.scr{position:absolute;inset:0;overflow:hidden;container-type:size;background:#fff;border-radius:inherit}
.scr .dm{position:absolute;left:0;top:0;width:100%;font-size:1.18cqw;animation:dmScroll 14s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
.scr.phone .dm{font-size:3.7cqw}
.scr.tablet .dm{font-size:2.05cqw}
@keyframes dmScroll{0%,14%{transform:translateY(0)}46%,58%{transform:translateY(calc(-100% + 100cqh))}90%,100%{transform:translateY(0)}}
.scr.paused .dm{animation-play-state:paused}
.scr .ej{position:absolute;top:2.4cqh;right:2.4cqw;z-index:5;font:700 clamp(7px,1.2cqw,12px)/1 Inter,system-ui,sans-serif;letter-spacing:.14em;background:rgba(10,12,18,.82);color:#fff;padding:.55em .8em;border-radius:99px}
.scr.phone .ej{font-size:2.6cqw;top:7cqh}

.dm{font-family:Inter,system-ui,sans-serif;color:#10202c;background:#fff;line-height:1.45}
.dm svg{width:1.4em;height:1.4em;vertical-align:-.3em;margin-right:.35em}
.dm-nav{display:flex;align-items:center;gap:2.2em;padding:1.3em 3em;font-size:.95em;border-bottom:1px solid rgba(0,0,0,.06)}
.dm-nav b{font-weight:800;font-size:1.15em;margin-right:auto}
.dm-nav span{opacity:.6}
.dm-nav i{font-style:normal;font-weight:700;padding:.6em 1.2em;border-radius:99px;color:#fff;background:var(--c1)}
.dm-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:2em;align-items:center;padding:3.4em 3em 3em;background:var(--hero)}
.dm-copy small{display:inline-block;font-weight:700;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:var(--c1);background:var(--soft);padding:.45em .9em;border-radius:99px}
.dm-copy h3{font-size:2.9em;line-height:1.04;letter-spacing:-.03em;margin:.45em 0 .35em;font-weight:800;color:var(--ink)}
.dm-copy p{font-size:1.05em;opacity:.7;max-width:26em}
.dm-btns{display:flex;gap:.8em;margin-top:1.5em;flex-wrap:wrap}
.dm-btns i{font-style:normal;font-weight:700;font-size:.92em;padding:.85em 1.4em;border-radius:.8em}
.dm-btns .wa{background:#25d366;color:#fff;box-shadow:0 .6em 1.4em -.6em rgba(37,211,102,.8)}
.dm-btns .gh{border:1.5px solid rgba(0,0,0,.12)}
.dm-art{position:relative;height:17em;display:grid;place-items:center}
.dm-art .chip{position:absolute;font-weight:700;font-size:.85em;background:#fff;padding:.7em 1em;border-radius:.8em;box-shadow:0 1em 2em -1em rgba(0,0,0,.35);animation:dmFloat 4s ease-in-out infinite}
.dm-art .c1{left:4%;top:16%}.dm-art .c2{right:2%;bottom:14%;animation-delay:-2s}
@keyframes dmFloat{50%{transform:translateY(-.6em)}}
.dm-sec{padding:2.6em 3em}
.dm-sec h4{font-size:1.6em;letter-spacing:-.02em;margin-bottom:.9em;color:var(--ink)}
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.dm-grid div{padding:1.4em;border-radius:1em;background:var(--card);border:1px solid rgba(0,0,0,.05)}
.dm-grid em{font-style:normal;font-weight:800;color:var(--c1);font-size:.9em}
.dm-grid b{display:block;margin:.4em 0 .2em;font-size:1.08em}
.dm-grid p{font-size:.88em;opacity:.65}
.dm-band{margin:0 3em;padding:1.4em 1.8em;border-radius:1em;background:var(--c1);color:#fff;display:flex;gap:1.2em;align-items:center;flex-wrap:wrap}
.dm-map{height:12em;border-radius:1em;position:relative;background:
 linear-gradient(90deg,transparent 48%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 52%,transparent 52%),
 linear-gradient(0deg,transparent 60%,rgba(255,255,255,.9) 60%,rgba(255,255,255,.9) 63%,transparent 63%),
 linear-gradient(35deg,transparent 30%,rgba(255,255,255,.7) 30%,rgba(255,255,255,.7) 32%,transparent 32%),var(--map)}
.dm-map .pin{position:absolute;left:50%;top:40%;width:1.6em;height:1.6em;border-radius:50% 50% 50% 0;background:var(--c1);transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 .5em rgba(255,255,255,.6)}
.dm-foot{padding:2em 3em;font-size:.85em;opacity:.55;text-align:center}

/* temas */
.dm-dental{--c1:#0aa6a6;--ink:#0b2a3a;--soft:#dff6f5;--hero:linear-gradient(135deg,#f2fbfb,#e4f3ff);--card:#f6fbfc;--map:#cfe9e6}
.dm-dental .blob{position:absolute;width:13em;height:13em;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;background:linear-gradient(135deg,#7fe0d8,#5ab6ff);animation:dmMorph 8s ease-in-out infinite}
.dm-dental .tooth{position:relative;color:#fff;font-size:5em;filter:drop-shadow(0 .1em .2em rgba(0,60,80,.3))}
.dm-dental .tooth svg{margin:0}
@keyframes dmMorph{50%{border-radius:58% 42% 37% 63%/55% 60% 40% 45%;transform:rotate(12deg)}}
.dm-food{--c1:#e2482d;--ink:#2a1205;--soft:#ffe9df;--hero:linear-gradient(135deg,#fff7ec,#ffe8d6);--card:#fff8f1;--map:#f3dcc4}
.dm-food .plate{width:13em;height:13em;border-radius:50%;background:radial-gradient(circle,#fff 55%,#f1e3d3 56%,#fff 70%);display:grid;place-items:center;box-shadow:0 1.5em 3em -1.5em rgba(120,50,0,.45);animation:dmSpin 18s linear infinite}
.dm-food .plate svg{width:7em;height:7em;margin:0}
@keyframes dmSpin{to{transform:rotate(360deg)}}
.dm-auto{--c1:#f5b301;--ink:#fff;--soft:rgba(245,179,1,.15);--hero:linear-gradient(135deg,#14161c,#1f232d);--card:#1a1d25;--map:#2a2f3b;background:#0f1116;color:#e9ecf2}
.dm-auto .dm-nav{border-color:rgba(255,255,255,.08)}
.dm-auto .dm-nav i{color:#111}
.dm-auto .dm-btns .gh{border-color:rgba(255,255,255,.2)}
.dm-auto .dm-band{color:#111}
.dm-auto .dm-grid div{border-color:rgba(255,255,255,.06)}
.dm-auto .chip{background:#232733;color:#fff}
.dm-auto .dm-map{background:
 linear-gradient(90deg,transparent 48%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.12) 52%,transparent 52%),
 linear-gradient(0deg,transparent 60%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.12) 63%,transparent 63%),#252a35}
.dm-auto .gauge{width:13em;height:13em;border-radius:50%;background:conic-gradient(from 225deg,#f5b301 0 0deg,#f5b301 calc(var(--g,200)*1deg),#2a2f3b 0 270deg,transparent 0);display:grid;place-items:center;animation:dmGauge 5s ease-in-out infinite}
.dm-auto .gauge span{width:10em;height:10em;border-radius:50%;background:#14161c;display:block}
@property --g{syntax:'<number>';inherits:false;initial-value:60}
@keyframes dmGauge{0%,100%{--g:60}50%{--g:240}}

/* versión celular de los ejemplos */
.scr.phone .dm-nav{padding:3.6em 1.4em 1em;gap:1em}
.scr.phone .dm-nav span{display:none}
.scr.phone .dm-hero{grid-template-columns:1fr;padding:1.6em 1.4em}
.scr.phone .dm-art{height:12em;order:-1}
.scr.phone .dm-art .blob,.scr.phone .dm-food .plate,.scr.phone .dm-auto .gauge{transform:scale(.8)}
.scr.phone .dm-copy h3{font-size:2.1em}
.scr.phone .dm-sec{padding:1.6em 1.4em}
.scr.phone .dm-grid{grid-template-columns:1fr}
.scr.phone .dm-band{margin:0 1.4em}
.scr.tablet .dm-nav span{display:none}
.scr.tablet .dm-hero{grid-template-columns:1fr 1fr;padding:2em}
.scr.tablet .dm-copy h3{font-size:2.3em}