.web-demo-page {
    --wd-accent: #ff8a00;
    --wd-accent-rgb: 255,138,0;
    color: #f6f7fb;
    background: #060a13;
}
.web-demo-page--barber { --wd-accent:#d9aa64; --wd-accent-rgb:217,170,100; }
.web-demo-page--gym { --wd-accent:#48d07b; --wd-accent-rgb:72,208,123; }
.web-demo-page--workshop { --wd-accent:#ff8a00; --wd-accent-rgb:255,138,0; }
.web-demo-page--local { --wd-accent:#ff5f45; --wd-accent-rgb:255,95,69; }

.web-demo-hero {
    position: relative;
    min-height: clamp(620px, 72vh, 860px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(var(--wd-accent-rgb),.18);
    background:
        linear-gradient(90deg, rgba(4,8,17,.98), rgba(4,8,17,.88) 50%, rgba(4,8,17,.55)),
        url('../recursos/home-final/projects-bg.webp') center / cover no-repeat;
}
.web-demo-hero::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background: radial-gradient(circle at 78% 42%, rgba(var(--wd-accent-rgb),.16), transparent 31%);
}
.web-demo-shell { width:min(1500px, calc(100% - clamp(28px,5vw,92px))); margin-inline:auto; }
.web-demo-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.8fr); gap:clamp(34px,6vw,110px); align-items:center; padding:130px 0 88px; }
.web-demo-kicker { color:var(--wd-accent); font-size:.78rem; font-weight:900; letter-spacing:.17em; margin:0 0 14px; }
.web-demo-title { margin:0; font-size:clamp(3.3rem,5.3vw,6.6rem); line-height:.94; letter-spacing:-.05em; font-weight:950; }
.web-demo-lead { max-width:760px; margin:22px 0 0; color:#cbd3df; font-size:clamp(1.05rem,1.15vw,1.28rem); line-height:1.7; }
.web-demo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.web-demo-btn { min-height:48px; padding:11px 20px; border-radius:13px; display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:850; border:1px solid rgba(255,255,255,.15); color:#fff; background:rgba(6,11,22,.68); }
.web-demo-btn--primary { background:linear-gradient(180deg, color-mix(in srgb,var(--wd-accent) 96%,white 4%), color-mix(in srgb,var(--wd-accent) 82%,black 18%)); color:#0b0e13; border-color:color-mix(in srgb,var(--wd-accent) 76%,white 24%); }
.web-demo-btn:hover { color:inherit; transform:translateY(-1px); }

.web-demo-preview { position:relative; min-height:430px; border:1px solid rgba(var(--wd-accent-rgb),.28); border-radius:30px; padding:26px; overflow:hidden; background:linear-gradient(160deg,rgba(11,18,33,.90),rgba(6,10,21,.68)); box-shadow:0 34px 100px rgba(0,0,0,.42), 0 0 70px rgba(var(--wd-accent-rgb),.08); }
.web-demo-preview::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-90px; top:-95px; background:radial-gradient(circle,rgba(var(--wd-accent-rgb),.27),transparent 68%); }
.web-demo-browser { position:relative; z-index:1; height:100%; min-height:378px; border-radius:20px; border:1px solid rgba(255,255,255,.11); background:#0a1020; overflow:hidden; }
.web-demo-browserbar { height:42px; display:flex; gap:7px; align-items:center; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); }
.web-demo-browserbar i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.26); }
.web-demo-mock { padding:28px; }
.web-demo-mock-badge { display:inline-flex; color:var(--wd-accent); border:1px solid rgba(var(--wd-accent-rgb),.30); background:rgba(var(--wd-accent-rgb),.08); border-radius:999px; padding:7px 11px; font-size:.74rem; font-weight:850; }
.web-demo-mock h3 { margin:18px 0 7px; font-size:clamp(1.75rem,2.2vw,2.8rem); font-weight:920; }
.web-demo-mock p { color:#aeb8c8; max-width:40ch; }
.web-demo-mock-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px; }
.web-demo-mock-card { min-height:105px; padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(var(--wd-accent-rgb),.08),rgba(255,255,255,.025)); }
.web-demo-mock-card strong { display:block; color:#fff; margin-bottom:8px; }
.web-demo-mock-card span { color:#98a4b6; font-size:.78rem; }

.web-demo-section { position:relative; padding:clamp(70px,7vw,112px) 0; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#070b15,#090e19); }
.web-demo-section--alt { background:linear-gradient(180deg,#080d18,#050913); }
.web-demo-heading { max-width:870px; margin-bottom:34px; }
.web-demo-heading h2 { margin:0; font-size:clamp(2.2rem,3.2vw,4.1rem); font-weight:930; letter-spacing:-.035em; }
.web-demo-heading p { color:#aeb7c5; margin:12px 0 0; font-size:1.05rem; line-height:1.65; }
.web-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.web-demo-card { min-height:220px; padding:25px; border-radius:20px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(11,18,33,.88),rgba(7,12,24,.74)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.web-demo-card > span { display:inline-flex; min-width:38px; height:38px; padding:0 11px; align-items:center; justify-content:center; border-radius:11px; color:var(--wd-accent); background:rgba(var(--wd-accent-rgb),.10); border:1px solid rgba(var(--wd-accent-rgb),.20); font-weight:900; }
.web-demo-card h3 { margin:18px 0 8px; font-weight:880; font-size:1.25rem; }
.web-demo-card p { margin:0; color:#aab4c3; line-height:1.6; }
.web-demo-card small { display:block; margin-top:18px; color:var(--wd-accent); font-weight:780; }

.web-demo-funnel { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:center; }
.web-demo-step { min-height:160px; padding:24px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(9,15,28,.78); }
.web-demo-step b { display:block; color:var(--wd-accent); margin-bottom:10px; }
.web-demo-step h3 { margin:0 0 8px; font-size:1.18rem; }
.web-demo-step p { margin:0; color:#9eabba; }
.web-demo-arrow { color:var(--wd-accent); font-size:1.7rem; }

.web-demo-cta { position:relative; overflow:hidden; border-radius:26px; padding:clamp(30px,4vw,54px); border:1px solid rgba(var(--wd-accent-rgb),.24); background:linear-gradient(120deg,rgba(var(--wd-accent-rgb),.12),rgba(8,13,25,.92) 48%); }
.web-demo-cta h2 { margin:0; font-size:clamp(2rem,3vw,3.5rem); font-weight:920; }
.web-demo-cta p { max-width:820px; color:#b6c0ce; line-height:1.65; margin:12px 0 24px; }

@media (max-width: 991.98px) {
    .web-demo-hero-grid { grid-template-columns:1fr; padding-top:118px; }
    .web-demo-preview { min-height:390px; }
    .web-demo-grid { grid-template-columns:1fr 1fr; }
    .web-demo-funnel { grid-template-columns:1fr; }
    .web-demo-arrow { transform:rotate(90deg); text-align:center; }
}
@media (max-width: 575.98px) {
    .web-demo-shell { width:calc(100% - 24px); }
    .web-demo-hero-grid { padding-top:106px; }
    .web-demo-title { font-size:clamp(2.85rem,15vw,4.3rem); }
    .web-demo-grid { grid-template-columns:1fr; }
    .web-demo-preview { min-height:340px; padding:15px; border-radius:22px; }
    .web-demo-browser { min-height:310px; }
    .web-demo-mock { padding:20px; }
    .web-demo-mock-grid { grid-template-columns:1fr; }
}

/* Permanent dark technology backdrop, independent of seasonal themes. */
.web-demo-section::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.26;
    background:url('../recursos/home-final/specialties-bg.webp') center / cover no-repeat;
}
.web-demo-section--alt::before {
    opacity:.22;
    background-image:url('../recursos/home-final/about-bg.webp');
}
.web-demo-section > .web-demo-shell { position:relative; z-index:1; }
.web-demo-section::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(5,9,18,.74),rgba(5,9,18,.62));
}