/* Ideia·App | Vê em ação — visual refresh 2026
   O motor das 7 demonstrações e os IDs/classes originais continuam intactos. */
:root{--demo-purple:#6d4cff;--demo-cyan:#0891b2;--demo-ink:#16152d}
/* Vetores em todo o site */
.icon-svg{width:1.2em;height:1.2em;vertical-align:-.18em;display:inline-block;flex-shrink:0;stroke:currentColor;fill:none}
.idea-ico{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:linear-gradient(135deg,rgba(109,76,255,.12),rgba(8,145,178,.11));color:#6650e8}
.idea-ico .icon-svg{width:21px;height:21px;stroke-width:1.9}
:root[data-theme="dark"] .idea-ico{background:rgba(146,131,255,.14);color:#b5a8ff}
.s-screen .icon-svg{width:18px;height:18px;vertical-align:-.25em}
.s-item>span .icon-svg,.s-nfc-ico>.icon-svg{width:20px;height:20px}
.s-nfc-ico>.icon-svg{width:54px;height:54px;color:#6d4cff;z-index:1}
.s-item>span{background:#fff3e9;color:#c96d29}
.s-item:nth-of-type(3n)>span{background:#e9f8f5;color:#059669}
.s-item:nth-of-type(4n)>span{background:#f0ecff;color:#6d4cff}
.s-item.hl>span{background:#ede8ff;color:#6d4cff}
.s-head .icon-svg,.s-note .icon-svg,.s-toast .icon-svg,.s-cart .icon-svg{width:14px;height:14px;margin-right:3px}
.s-cart .icon-svg,.s-toast .icon-svg{width:17px;height:17px}
.hs .icon-svg{width:12px;height:12px;stroke-width:2}
.hs-food .icon-svg{width:22px;height:22px;color:#7c3aed}
.hs-tiles .icon-svg{width:18px;height:18px;color:#6d4cff}
.hs-tabbar .icon-svg{width:12px;height:12px}
.pill .icon-svg,.opt .icon-svg,.success-ico .icon-svg{vertical-align:middle}
.opt .icon-svg{margin-right:7px;color:var(--primary)}
.success-ico .icon-svg{width:35px;height:35px;color:#10b981}

/* Claro/escuro: controlo segmentado, sem emojis */
.nav .theme-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0;width:78px;height:38px;padding:4px;margin-left:4px;border:1px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:0 3px 15px rgba(38,30,85,.07);font-size:inherit;transform:none;isolation:isolate;flex-shrink:0}
.nav .theme-toggle::before{content:"";position:absolute;z-index:-1;left:4px;top:4px;width:33px;height:28px;border-radius:999px;background:linear-gradient(135deg,#ede9ff,#f5f6ff);box-shadow:0 1px 6px rgba(20,15,65,.15);transition:transform .32s cubic-bezier(.2,.8,.2,1),background .3s}
.nav .theme-toggle[aria-pressed="true"]::before{transform:translateX(35px);background:linear-gradient(135deg,#6756d7,#46389c)}
.theme-option{width:33px;height:28px;display:grid;place-items:center;color:var(--muted);transition:color .3s}
.theme-option svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .theme-sun{color:#6d4cff}
:root[data-theme="dark"] .theme-moon{color:#fff}
.nav .theme-toggle:hover{transform:none;box-shadow:0 5px 20px rgba(109,76,255,.14)}
.nav .theme-toggle:focus-visible,.demo-tab:focus-visible,.demo-steps li:focus-visible,.demo-step-dots button:focus-visible{outline:3px solid rgba(109,76,255,.5);outline-offset:3px}

/* A secção, inspirada num produto SaaS premium */
.demo-section{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,#fbfaff 0%,#f4f5fc 52%,#f7fbfd 100%)}
.demo-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(520px 330px at 4% 38%,rgba(119,91,255,.1),transparent 70%),radial-gradient(600px 370px at 99% 75%,rgba(8,145,178,.08),transparent 65%)}
:root[data-theme="dark"] .demo-section{background:linear-gradient(155deg,#141428 0%,#1c1b34 58%,#132432 100%)}
:root[data-theme="dark"] .demo-section::before{background:radial-gradient(600px 380px at 10% 50%,rgba(109,76,255,.16),transparent 70%)}
.demo-section .section-head{margin-bottom:34px}
.demo-section .section-head .eyebrow{display:inline-block;margin-bottom:11px;letter-spacing:.18em}
.demo-section .section-head h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.05em;margin-bottom:11px}
.demo-section .section-head p{max-width:700px;margin:0 auto}
.demo{padding:18px 30px 34px;border-radius:29px;box-shadow:0 30px 80px rgba(50,44,111,.075),0 2px 5px rgba(50,44,111,.035);background:color-mix(in srgb,var(--surface) 93%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
:root[data-theme="dark"] .demo{background:rgba(31,30,55,.86);box-shadow:0 30px 85px rgba(0,0,0,.24)}
.demo-tabs{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:5px;margin:0 0 24px;padding:6px;background:var(--bg-alt);border:1px solid var(--border);border-radius:17px;scrollbar-width:none;overflow-x:auto;overscroll-behavior-inline:contain}
.demo-tabs::-webkit-scrollbar{display:none}
.demo-tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 0 auto;white-space:nowrap;border:1px solid transparent;background:transparent;border-radius:12px;padding:12px 11px;font-size:12.5px;font-weight:650;color:var(--muted);line-height:1.2;box-shadow:none;transition:background .27s,box-shadow .27s,color .27s,transform .27s}
.demo-tab .icon-svg{width:17px;height:17px;stroke-width:1.8;color:#8a80aa}
.demo-tab:hover{background:rgba(109,76,255,.07);color:var(--text)}
.demo-tab.active{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:0 4px 14px rgba(41,32,109,.1);transform:translateY(-1px)}
.demo-tab.active .icon-svg{color:#6d4cff}
:root[data-theme="dark"] .demo-tab.active{background:#343055;box-shadow:0 4px 16px rgba(0,0,0,.18)}
:root[data-theme="dark"] .demo-tab.active .icon-svg{color:#c6baff}

/* Área de trabalho: cenário do dispositivo e timeline */
.demo-stage,.demo-stage.wide{position:relative;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:28px;align-items:stretch}
.demo-viewport{position:relative;min-width:0;min-height:665px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 16px 35px;border:1px solid rgba(109,76,255,.11);border-radius:24px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 46% 39%,rgba(206,196,255,.38) 0%,rgba(244,243,255,.82) 38%,rgba(238,245,255,.6) 75%),linear-gradient(145deg,#f9f6ff,#f8fbff)}
.demo-viewport::before{content:"";position:absolute;z-index:-1;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(115,92,246,.20),rgba(8,145,178,.07) 55%,transparent 72%);top:10%;left:50%;transform:translateX(-50%);filter:blur(14px)}
.demo-viewport::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(120,120,180,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,180,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent 0%,black 18%,black 82%,transparent)}
:root[data-theme="dark"] .demo-viewport{background:radial-gradient(ellipse at 40% 42%,rgba(79,65,139,.34),rgba(26,26,49,.96) 71%),#18182d;border-color:rgba(166,154,255,.12)}
:root[data-theme="dark"] .demo-viewport::before{background:radial-gradient(circle,rgba(126,98,255,.26),transparent 74%)}
.demo-viewport-label{position:absolute;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:750;letter-spacing:.13em;color:#777391;z-index:3}
.demo-viewport-label span{display:inline-flex;align-items:center;gap:7px}
.demo-viewport-label strong{font-family:var(--font-head);color:#6152a7;letter-spacing:.07em;font-size:12px}
.viewport-dot{width:7px;height:7px;border-radius:50%;background:#17be8c;box-shadow:0 0 0 4px rgba(23,190,140,.12)}
:root[data-theme="dark"] .demo-viewport-label{color:#b9b2d6}
:root[data-theme="dark"] .demo-viewport-label strong{color:#c7b9ff}

/* Telemóvel: vidro, moldura, botões laterais, ilha dinâmica, indicador de gesto */
.demo-phone{position:relative;width:294px;height:610px;flex:none;justify-self:center;padding:8px;border-radius:48px;border:2px solid #606079;background:linear-gradient(145deg,#121222,#06060e 60%,#272638);box-shadow:0 45px 65px -35px rgba(33,24,81,.46),0 14px 26px rgba(12,14,47,.18),inset 0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .3s,transform .3s;transform:translateZ(0)}
.demo-phone:hover{transform:translateY(-3px)}
.demo-phone::before{content:"";position:absolute;z-index:1;left:-5px;top:130px;width:3px;height:67px;border-radius:3px 0 0 3px;background:linear-gradient(#9e9db0,#444454);box-shadow:0 84px 0 #787787}
.demo-phone::after{content:"";position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:92px;height:4px;border-radius:99px;background:#36344a;z-index:3;box-shadow:0 1px 0 #f5f3ff}
.demo-phone .phone-notch{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:88px;height:24px;border-radius:22px;background:#080910;box-shadow:0 0 0 2px rgba(0,0,0,.14);z-index:4}
.demo-phone .phone-notch::after{content:"";position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 42% 42%,#2e436e,#11192e 70%);box-shadow:0 0 0 1px rgba(75,89,136,.45)}
.demo-phone .demo-screen{height:100%;border-radius:39px;background:#f7f8fc;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.demo-phone .s-screen{padding:53px 15px 26px;gap:10px;font-size:13.1px}
.demo-phone .s-item{box-shadow:0 2px 10px rgba(30,34,76,.035)}
.demo-phone .s-head b{font-size:20px;letter-spacing:-.03em}
.demo-phone .s-nfc{gap:12px}
.demo-phone .tap{z-index:5}
/* Construtoras: browser com toolbar, chrome exterior e barra de URL */
.demo-stage.wide{grid-template-columns:minmax(0,1.4fr) minmax(310px,.9fr)}
.demo-stage.wide .demo-viewport{padding:55px 12px 45px;min-height:590px}
.demo-phone.is-browser{position:relative;width:100%;max-width:650px;height:425px;padding:39px 7px 7px;border:1px solid #8a8b9b;border-radius:17px;background:linear-gradient(180deg,#e3e6ed 0,#d6d9e4 36px,#a0a1b0 37px,#151824 100%);box-shadow:0 35px 50px -25px rgba(23,22,54,.36),0 5px 10px rgba(8,8,30,.16);transform:none}
.demo-phone.is-browser .demo-screen{border-radius:5px 5px 9px 9px;background:#f7f8fc;border:1px solid #bbc2d0}
.demo-phone.is-browser::before{position:absolute;top:9px;left:50%;transform:translateX(-50%);content:"app.aminhaconstrutora.pt";width:45%;height:22px;padding:3px 12px;background:#fff;border:1px solid #d1d5e3;border-radius:7px;font-size:10px;color:#70748b;text-align:center;white-space:nowrap;box-shadow:none;z-index:2}
.demo-phone.is-browser::after{content:"";position:absolute;top:13px;left:16px;width:9px;height:9px;border-radius:50%;background:#ff635a;box-shadow:15px 0 #ffbd43,30px 0 #31c95a;transform:none;bottom:auto;z-index:2}
.demo-phone.is-browser .phone-notch{display:none}
.demo-phone.is-browser .s-screen{padding:15px 18px;gap:10px;font-size:12px}
.demo-stage.wide .demo-phone.is-browser:hover{transform:translateY(-3px)}
.demo-stage.wide .demo-viewport::before{width:630px;height:350px;top:20%}

/* Passos: lista com feedback do avanço em tempo real */
.demo-info{padding:12px 4px 10px 6px;min-width:0;align-self:center;text-align:left}
.demo-info h3{font-size:clamp(1.65rem,2.2vw,2.35rem);letter-spacing:-.04em;margin:0 0 9px}
.demo-info>p{font-size:14px;line-height:1.72;color:var(--muted);margin:0 0 20px}
.demo-steps{margin:0 0 20px;padding:0;display:grid;gap:5px;list-style:none;counter-reset:none}
.demo-steps li{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 12px 11px;border:1px solid transparent;border-radius:13px;color:var(--muted);font-size:12.8px;line-height:1.35;transition:background .25s,border-color .25s,color .25s;overflow:hidden;text-align:left;cursor:pointer}
.demo-steps li:hover{background:rgba(109,76,255,.05)}
.demo-steps li.active{background:linear-gradient(120deg,rgba(109,76,255,.085),rgba(8,145,178,.04));border-color:rgba(109,76,255,.2);box-shadow:none;font-weight:650;color:var(--text)}
.demo-steps li .demo-step-index{display:grid;place-items:center;width:28px;height:28px;min-width:28px;border-radius:9px;border:1px solid var(--border);background:var(--surface);font:700 12px var(--font-head);color:var(--muted)}
.demo-steps li.active .demo-step-index{color:white;background:linear-gradient(135deg,#7c3aed,#6d4cff);border-color:transparent;box-shadow:0 4px 12px rgba(109,76,255,.22)}
.demo-steps li.done .demo-step-index{font-size:0;background:rgba(16,185,129,.12);border-color:transparent;color:#059669}
.demo-steps li.done .demo-step-index::after{content:"";width:12px;height:7px;border-left:2px solid #059669;border-bottom:2px solid #059669;transform:rotate(-45deg) translate(1px,-1px)}
.demo-step-text{flex:1;min-width:0}
.demo-step-progress{position:absolute;bottom:0;left:39px;right:0;height:2.5px;overflow:hidden}
.demo-step-progress::before{content:"";display:block;height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#0891b2)}
.demo-steps li.active .demo-step-progress::before{animation:demoProgress var(--step-ms,3200ms) linear forwards}
.demo-steps li.done .demo-step-progress::before{width:100%;background:#10b981}
.demo-stage.demo-paused .demo-steps li.active .demo-step-progress::before{animation-play-state:paused}
@keyframes demoProgress{from{width:0}to{width:100%}}
.demo-controls{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}
.demo-controls .btn{border-radius:12px;min-height:42px;font-size:12.5px;padding:11px 16px}
.demo-controls #demoPlay{display:flex;gap:8px;background:var(--surface);border-color:var(--border);color:var(--text)}
#demoPlay .icon-svg{width:15px;height:15px;color:var(--primary)}
.demo-controls .btn-primary{box-shadow:0 7px 20px rgba(109,76,255,.18)}
.demo-step-dots{display:none}
:root[data-theme="dark"] .demo-steps li.active{background:rgba(116,96,217,.17);border-color:rgba(173,153,255,.25)}

/* Laptop/tablet layout — prevent width spill */
@media(max-width:1170px){
 .demo-stage.wide{grid-template-columns:1fr;gap:22px}
 .demo-stage.wide .demo-viewport{min-height:535px}
 .demo-stage.wide .demo-phone.is-browser{max-width:660px}
 .demo-stage.wide .demo-info{width:100%;max-width:760px;margin:auto}
}
@media(max-width:980px){
 .demo{padding:16px 20px 28px}
 .demo-tabs{justify-content:flex-start}
 .demo-tab{flex:none}
 .demo-stage{grid-template-columns:1fr;gap:22px;justify-items:stretch}
 .demo-viewport{min-height:680px;width:100%}
 .demo-info{max-width:680px;margin:auto;width:100%;text-align:left}
 .demo-controls{justify-content:flex-start}
 .demo-stage.wide .demo-info{max-width:700px;text-align:left}
 .demo-stage.wide .demo-controls{justify-content:flex-start}
}
@media(max-width:720px){
 .nav .theme-toggle{width:70px;height:35px;padding:3px;margin-left:auto}
 .nav .theme-toggle::before{left:3px;top:3px;width:30px;height:27px}
 .nav .theme-toggle[aria-pressed="true"]::before{transform:translateX(33px)}
 .theme-option{width:30px;height:27px}
 .theme-option svg{width:16px;height:16px}
 .demo-section{padding-top:75px;padding-bottom:75px}
 .demo-section .section-head{margin-bottom:24px}
 .demo-section .section-head h2{font-size:clamp(1.9rem,7.5vw,2.6rem)}
 .demo{padding:12px 10px 19px;border-radius:22px}
 .demo-tabs{gap:4px;padding:5px;margin-bottom:13px;border-radius:13px;scroll-snap-type:x proximity}
 .demo-tab{font-size:12px;padding:10px 12px;border-radius:10px;scroll-snap-align:start}
 .demo-tab .icon-svg{width:16px;height:16px}
 .demo-stage{gap:17px}
 .demo-viewport{min-height:620px;padding:40px 10px 20px;border-radius:17px}
 .demo-viewport-label{top:15px;left:14px;right:14px;font-size:8px}
 .demo-viewport-label strong{font-size:10px}
 .demo-phone{width:274px;height:555px;border-radius:44px;padding:7px}
 .demo-phone .demo-screen{border-radius:36px}
 .demo-phone .s-screen{padding:50px 13px 22px;gap:8px;font-size:12.5px}
 .demo-phone .s-item{padding:9px}
 .demo-phone .s-item.sm{padding:7px 9px}
 .demo-step-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;max-width:90%;margin-top:16px;z-index:3}
 .demo-step-dots button{height:6px;width:16px;padding:0;border:0;border-radius:10px;background:rgba(109,76,255,.2);cursor:pointer;transition:width .25s,background .25s}
 .demo-step-dots button.active{width:32px;background:linear-gradient(90deg,#7c3aed,#0891b2)}
 .demo-step-dots button.done{background:#10b981}
 .demo-info{padding:0 7px 7px;text-align:left;max-width:520px}
 .demo-info h3{font-size:1.55rem;margin-bottom:7px}
 .demo-info>p{font-size:13px;line-height:1.62;margin-bottom:13px}
 .demo-steps{margin:0 0 13px}
 .demo-steps li{display:none}
 .demo-steps li.active{display:flex;min-height:58px;font-size:12.7px;padding:11px 13px}
 .demo-controls,.demo-stage.wide .demo-controls{justify-content:flex-start}
 .demo-controls .btn{font-size:12px;padding:10px 14px}
 .demo-stage.wide .demo-viewport{min-height:405px;padding:43px 7px 18px}
 .demo-phone.is-browser{height:315px;width:100%;max-width:100%;padding:36px 5px 6px;border-radius:13px}
 .demo-phone.is-browser::before{display:block;width:56%;font-size:8px;top:8px;height:19px}
 .demo-phone.is-browser::after{top:12px;left:11px;width:7px;height:7px;box-shadow:12px 0 #ffbd43,24px 0 #31c95a}
 .demo-phone.is-browser .s-screen{font-size:9.4px;padding:9px 10px;gap:7px}
 .demo-phone.is-browser .w-top b{font-size:13px}
 .demo-phone.is-browser .w-table{font-size:9px}
 .demo-phone.is-browser .w-table th,.demo-phone.is-browser .w-table td{padding:5px 3px}
 .demo-phone.is-browser .w-kpis div{padding:8px}
 .demo-phone.is-browser .w-kpis b{font-size:15px}
 .demo-phone.is-browser .w-list div{padding:7px}
}
@media(max-width:390px){
 .demo{padding:10px 8px 16px}
 .demo-phone{width:258px;height:535px}
 .demo-viewport{min-height:600px}
 .demo-tab{padding:9px 10px}
 .demo-info h3{font-size:1.4rem}
 .demo-stage.wide .demo-viewport{min-height:390px}
 .demo-phone.is-browser{height:302px}
}
@media(prefers-reduced-motion:reduce){
 .demo-steps li.active .demo-step-progress::before{animation:none;width:100%}
 .demo-phone,.demo-tab,.nav .theme-toggle::before{transition:none}
}
/* Isolar os novos spans da regra genérica antiga .demo-steps li span. */
.demo-steps li .demo-step-text,
.demo-steps li.active .demo-step-text,
.demo-steps li.done .demo-step-text{
 display:block;position:static;flex:1 1 auto;min-width:0;width:auto;height:auto;
 padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;
 color:inherit;font:inherit;line-height:1.38;text-align:left;place-items:initial;
}
.demo-steps li .demo-step-progress,
.demo-steps li.active .demo-step-progress,
.demo-steps li.done .demo-step-progress{
 display:block;position:absolute;bottom:0;top:auto;left:39px;right:0;
 width:auto;height:2.5px;padding:0;margin:0;border:0;border-radius:0;
 background:transparent;box-shadow:none;flex:none;overflow:hidden;
}
.demo-steps li.active .demo-step-progress::before{animation:demoProgress var(--step-ms,3200ms) linear forwards}
.demo-steps li.done .demo-step-progress::before{width:100%;background:#10b981}
@media(max-width:720px){.demo-steps li .demo-step-text,.demo-steps li.active .demo-step-text{font-size:12.7px}}
/* Afinamento de segurança: os passos mais longos das demos Festas e
   Construtoras devem caber integralmente no ecrã, mesmo a 375 px. */
.demo-phone.is-browser{height:445px}
@media(max-width:720px){
  .demo-phone{height:575px}
  .demo-viewport{min-height:655px}
  .demo-stage.wide .demo-viewport{min-height:500px}
  .demo-phone.is-browser{height:420px}
}
@media(max-width:390px){
  .demo-phone{height:575px}
  .demo-viewport{min-height:655px}
  .demo-stage.wide .demo-viewport{min-height:500px}
  .demo-phone.is-browser{height:420px}
}
/* Evita cortar a última linha da tabela nas vistas mais densas. */
.demo-phone.is-browser .s-screen{padding-bottom:5px;gap:8px}
@media(max-width:720px){.demo-phone.is-browser .s-screen{padding:9px 10px 2px;gap:5px}}

/* Indicador segmentado contínuo: desliza sob o separador ativo. */
.demo-tabs{position:relative}
.demo-tabs::before{content:"";position:absolute;top:var(--active-top,6px);left:var(--active-left,6px);width:var(--active-width,155px);height:var(--active-height,42px);border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 4px 14px rgba(41,32,109,.10);z-index:0;pointer-events:none;transition:left .30s cubic-bezier(.2,.8,.2,1),width .30s,height .30s,top .30s}
.demo-tab{position:relative;z-index:1}
.demo-tab.active{background:transparent;border-color:transparent;box-shadow:none;transform:none}
:root[data-theme="dark"] .demo-tabs::before{background:#343055;box-shadow:0 4px 16px rgba(0,0,0,.18)}
:root[data-theme="dark"] .demo-tab.active{background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){.demo-tabs::before{transition:none}}