/* Focused original UI captures, displayed at a readable size. */
.hero > .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr); gap: 48px; padding-top: 65px; padding-bottom: 65px; }
.hero-visual { margin: 0; padding: 0; justify-content: center; }
.hero-visual .scene-label { position: static; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.device-stage.product-mockup { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: center; }
.panel-preview { min-width: 0; border: 1px solid #dce3e9; border-radius: 18px; background: #f7f9fc; box-shadow: 0 24px 65px #17243b12; overflow: hidden; }
.preview-toolbar { display: flex; align-items: center; gap: 12px; padding: 17px 16px; border-bottom: 1px solid #e2e7ec; font-size: 11px; font-weight: 650; color: #647082; background: #fff; }
.preview-dots { display: flex; gap: 4px; }
.preview-dots i { width: 6px; height: 6px; background: #c5cdd7; border-radius: 50%; }
.preview-live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 10px; color: #08886a; white-space: nowrap; }
.mockup-dashboard { padding: 16px; display: grid; gap: 14px; }
.mockup-dashboard > img { width: 100%; height: auto; border-radius: 14px; }
.mockup-dashboard > .dashboard-dark { display: none; }
html[data-theme="dark"] .mockup-dashboard > .dashboard-light { display: none; }
html[data-theme="dark"] .mockup-dashboard > .dashboard-dark { display: block; }
.preview-caption { font-size: 10px; color: #6e7c8e; padding: 0 16px 18px; }
.app-preview { margin: 0; min-width: 0; }
.mockup-app { padding: 6px; border: 1px solid #4d5563; border-radius: 26px; background: #121720; box-shadow: 0 20px 40px #15233820; }
.mockup-app > img { width: 100%; height: auto; border-radius: 20px; }
.app-preview figcaption { font-size: 11px; font-weight: 650; text-align: center; margin-top: 16px; color: var(--muted); }
.hero-visual .visual-halo { inset: -12% -5%; opacity: .3; z-index: -1; }
html[data-theme="dark"] .panel-preview { background: #151f2e; border-color: #354255; box-shadow: 0 24px 65px #0004; }
html[data-theme="dark"] .preview-toolbar { background: #1c2738; border-color: #354255; color: #bcc6d5; }
html[data-theme="dark"] .preview-caption { color: #b5bfce; }
html[data-theme="dark"] .preview-live { color: #34d5ad; }
html[data-theme="dark"] .hero-visual .visual-halo { opacity: .2; }
.comparison-label { font-size: 11px; line-height: 1.6; letter-spacing: .05em; }
.comparison-clarification { font-size: 12px; line-height: 1.7; margin-top: 14px; color: #e2e7ef; max-width: 370px; }
.cost-line { gap: 16px; }
.cost-line > span { max-width: 220px; }
.rate-field > label { max-width: 260px; }
@media (max-width: 1199px) {
 .hero > .hero-grid { grid-template-columns: 1fr; gap: 40px; }
 .hero-copy { max-width: 740px; }
 .hero h1 { font-size: 58px; }
 .hero h1 br:first-child { display: none; }
 .hero h1 > span br { display: none; }
 .hero-visual { width: min(850px, 100%); justify-self: center; }
 .device-stage.product-mockup { grid-template-columns: minmax(0, 1fr) 230px; }
 .hero-description { font-size: 15px; max-width: 620px; }
}
@media (max-width: 640px) {
 .hero > .hero-grid { padding-top: 38px; padding-bottom: 24px; gap: 35px; }
 .hero h1 { font-size: clamp(34px, 9.15vw, 52px); }
 .hero-description { font-size: 13px; }
 .hero-visual { width: 100%; display: flex; padding: 0; margin: 0; }
 .hero-visual .scene-label { font-size: 11px; margin-bottom: 18px; }
 .device-stage.product-mockup { grid-template-columns: 1fr; gap: 26px; }
 .mockup-dashboard { padding: 10px; gap: 10px; }
 .preview-toolbar { padding: 13px 10px; font-size: 10px; gap: 8px; }
 .preview-dots { display: none; }
 .preview-caption { font-size: 9px; padding: 0 10px 12px; }
 .app-preview { width: 230px; justify-self: center; }
 .comparison-label { font-size: 10px; }
 .comparison-clarification { font-size: 12px; }
 .cost-line { align-items: flex-start; flex-direction: column; gap: 6px; }
}
/* Photo hardware with a focused original panel card; the large app stays intact. */
.hardware-scene.product-mockup { display: block; height: 650px; }
.hardware-group { position: absolute; left: 70px; right: 0; top: 40px; aspect-ratio: 3 / 2; container-type: inline-size; }
.hardware-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; mask: url('assets/laptop-pantalla.svg') center / 100% 100% no-repeat luminance; -webkit-mask: url('assets/laptop-pantalla.svg') center / 100% 100% no-repeat; mask-mode: luminance; pointer-events: none; }
.hardware-group .panel-preview { position: absolute; left: 19.66146%; top: 10.15625%; width: 60.80729%; height: 51.26953%; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; }
.hardware-group .preview-toolbar { flex: 0 0 auto; padding: 1.7cqw 1.6cqw; font-size: 1.45cqw; line-height: 1.4; }
.hardware-group .preview-live { font-size: 1.2cqw; }
.hardware-group .mockup-dashboard { padding: 0; display: block; width: 100%; height: 100%; min-height: 0; }
.hardware-group .mockup-dashboard > img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.hardware-scene .app-preview { position: absolute; z-index: 4; width: 230px; left: 0; top: 125px; }
.hardware-ticket { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-caption { text-align: center; font-size: 11px; line-height: 1.9; padding: 12px 0 0; color: var(--muted); }
@media (min-width: 1200px) { .hero > .hero-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.55fr); gap: 35px; padding-top: 45px; padding-bottom: 36px; } }
@media (max-width: 1199px) { .hardware-scene.product-mockup { height: 650px; } }
@media (max-width: 900px) {
 .hardware-scene.product-mockup { display: flex; flex-direction: column; gap: 20px; height: auto; }
 .hardware-group { position: relative; left: auto; right: auto; top: auto; width: 100%; }
 .hardware-scene .app-preview { position: relative; top: auto; left: auto; width: 230px; align-self: center; }
}
@media (max-width: 640px) {
 .hardware-scene.product-mockup { display: flex; flex-direction: column; gap: 20px; height: auto; }
 .hardware-group { position: relative; left: auto; right: auto; top: auto; width: 100%; }
 .hardware-photo { mask: url('assets/laptop-pantalla.svg') center / 100% 100% no-repeat luminance; -webkit-mask: url('assets/laptop-pantalla.svg') center / 100% 100% no-repeat; mask-mode: luminance; }
 .hardware-group .panel-preview { left: 19.66146%; }
 .hardware-scene .app-preview { position: relative; top: auto; left: auto; width: 230px; align-self: center; }
 .hardware-group .preview-toolbar { font-size: 1.65cqw; padding: 1cqw; }
 .hardware-group .preview-live { display: none; }
 .scene-caption { font-size: 10px; }
}
/* One content boundary for logo, navigation, hero and subsequent sections. */
:root { --page-max-width: 1440px; --page-side-space: 48px; }
.container { width: min(var(--page-max-width), calc(100% - var(--page-side-space) - var(--page-side-space))); }
@media (max-width: 1199px) { :root { --page-side-space: 32px; } }
@media (max-width: 640px) { :root { --page-side-space: 20px; } }