@media(min-width:901px){.hero{padding-top:56px;padding-bottom:82px;min-height:640px}}
.proof{color:#465366;font-size:13px;font-weight:600}.proof span{display:inline-flex;align-items:center;min-height:30px;padding:4px 9px;border:1px solid #e2e7ef;border-radius:999px;background:#fff}
.product-stage{padding-bottom:76px}.app-demo{grid-template-columns:155px 1fr;min-height:450px;height:auto}.app-demo aside{font-size:13px}.app-demo aside small{font-size:12px}.app-demo section>small,.stats small,.appointment,.appointment small{font-size:13px}.app-demo h3{font-size:26px}.stats b{font-size:18px}.stats em,.appointment i{font-size:12px}.appointment{grid-template-columns:48px 1fr 84px;min-height:61px}.appointment i{padding:6px 8px}
.demo-switcher{position:absolute;left:50%;bottom:20px;z-index:5;display:flex;gap:5px;padding:5px;border:1px solid #dfe4ed;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(35,49,78,.12);transform:translateX(-50%)}.demo-switcher button{min-height:38px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#526071;font:600 13px/1.2 Inter,system-ui;white-space:nowrap;cursor:pointer}.demo-switcher button.active{background:#6558e8;color:#fff}.demo-insight{position:absolute;left:8%;right:8%;bottom:-20px;margin:0;color:#526071;font-size:13px;line-height:1.4;text-align:center}.product-stage[data-demo-view="reservas"] .stats>div:nth-child(2),.product-stage[data-demo-view="clientes"] .appointment:nth-of-type(2),.product-stage[data-demo-view="agenda"] .appointment:first-of-type{border-color:#6558e8;box-shadow:0 0 0 3px rgba(101,88,232,.12)}
.free-security{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 0 80px}.free-security article{padding:34px;border:1px solid #e1e6ee;border-radius:24px;background:#fff;box-shadow:0 18px 48px rgba(31,42,68,.07)}.free-security h2{margin:10px 0 9px;font-size:30px;line-height:1.15;letter-spacing:-.04em}.free-security p{color:#526071;font-size:15px;line-height:1.55}.free-card ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0;padding:0;list-style:none}.free-card li{padding:12px;border-radius:12px;background:#f6f8fb;color:#344054;font-size:14px}.free-card li:before{content:"✓";margin-right:8px;color:#168052;font-weight:700}.security-card{background:linear-gradient(145deg,#111d31,#172640)!important;color:#fff}.security-card .eyebrow{color:#70b7ff}.security-card p{color:#c8d2df}.security-card>div{display:grid;gap:10px;margin:22px 0}.security-card>div span{display:grid;gap:3px;padding:12px 14px;border:1px solid #ffffff1f;border-radius:12px;background:#ffffff0a}.security-card small{color:#bdc9d7;font-size:13px;line-height:1.4}.security-card .text-link{color:#85c4ff}
.td-notification-slot .td-heart{width:42px!important;height:42px!important;border-color:#d9dee8!important;border-radius:12px!important;color:#6558e8!important;box-shadow:0 8px 22px rgba(40,48,74,.08)!important}.td-notification-slot .td-heart.has-news{color:#6558e8!important}.td-notification-slot .td-heart-badge{background:#6558e8!important}
@media(max-width:900px){.free-security{grid-template-columns:1fr;padding-inline:18px}.product-stage{padding-bottom:64px}}
@media(max-width:620px){.proof span{font-size:12px}.demo-switcher{position:relative;left:auto;bottom:auto;width:100%;margin-top:12px;overflow-x:auto;transform:none}.demo-switcher button{flex:1}.demo-insight{position:relative;left:auto;right:auto;bottom:auto;margin:9px 8px 0}.free-security h2{font-size:26px}.free-card ul{grid-template-columns:1fr}}

/* En celular la demostracion funciona como una tarjeta completa, no como una maqueta recortada. */
@media(max-width:620px){
 .hero{gap:28px;padding-bottom:54px}
 .product-stage{padding:10px 0 0;border:1px solid #e2e7ef;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(35,49,78,.12);overflow:hidden}
 .product-stage .stage-glow,.product-stage .toast{display:none}
 .product-stage .window{width:100%;margin:0;transform:none;border:0;border-radius:0;box-shadow:none}
 .product-stage .window-bar{height:34px;padding-inline:12px}
 .product-stage .window-bar span{max-width:68%;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
 .product-stage .app-demo{display:block;height:auto;min-height:330px;overflow:visible}
 .product-stage[data-demo-view="booking"] .app-demo,
 .product-stage[data-demo-view="confirmation"] .app-demo{min-height:390px;padding:12px}
 .product-stage[data-demo-view="booking"] .live-demo-page,
 .product-stage[data-demo-view="confirmation"] .live-demo-page{width:100%;max-width:100%;margin:0;padding:18px;box-shadow:none}
 .product-stage .app-demo aside{display:none}
 .product-stage .app-demo section{padding:14px 16px}
 .product-stage .app-demo section>small{font-size:12px}
 .product-stage .app-demo h3{margin:2px 0 10px;font-size:20px}
 .product-stage .stats{gap:6px}
 .product-stage .stats div{padding:8px}
 .product-stage .stats small,.product-stage .stats em{font-size:12px}
 .product-stage .stats b{margin:2px 0;font-size:15px}
 .product-stage .app-demo h4{margin:12px 0 4px}
 .product-stage .appointment{min-height:42px;padding:6px 0;grid-template-columns:40px 1fr 72px;font-size:12px}
 .product-stage .appointment:nth-of-type(n+3){display:none}
 .product-stage .demo-switcher{margin:0 10px;padding:5px;border-radius:12px}
 .product-stage .demo-switcher button{min-height:42px;padding-inline:9px;font-size:12px}
 .product-stage .demo-insight{min-height:48px;margin:0;padding:9px 14px 12px;font-size:13px}
}
.free-card>.eyebrow{color:#0968d7}

/* Ritmo vertical de escritorio: evita superposiciones y grandes vacíos entre bloques. */
@media(min-width:901px){
 .product-stage{padding-bottom:88px}
 .product-stage .toast-a{bottom:98px}
 .product-stage .demo-switcher{bottom:31px}
 .product-stage .demo-insight{left:5%;right:5%;bottom:2px}
 .success-section{padding:88px 0 48px}
 .workflow{padding:64px 0}
 .free-security{padding:18px 0 34px}
 .cta{margin-top:16px;margin-bottom:34px}
 .footer{min-height:88px}
}

/* Jerarquía del hero: el CTA conserva el único acento fuerte. */
.hero-copy h1 em{display:inline-block;max-width:100%;padding:0 .12em .07em 0;margin:0 -.12em -.07em 0;line-height:1.07}
.demo-switcher button.active{border:1px solid #cbdcf4;background:#edf5ff;color:#185b9d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.demo-switcher button:not(.active):hover{background:#f6f8fb;color:#344054}
