/* Mockups reutilizables de /ecosistema/ecuavisa/ (ver ecuavisa-mockups.js) */

/* Marco desktop */
.ec-desktop { max-width: 620px; }
.ec-desktop-frame {
	background: #0c1430; border: 1px solid rgba(255,255,255,.16);
	border-radius: 12px 12px 4px 4px; overflow: hidden; box-shadow: 0 26px 50px rgba(0,0,0,.5);
}
.ec-browser-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #111a3a; border-bottom: 1px solid rgba(255,255,255,.08); }
.ec-dot { width: 9px; height: 9px; border-radius: 50%; }
.ec-dot.r { background: #FF5F57; } .ec-dot.y { background: #FEBC2E; } .ec-dot.g { background: #28C840; }
.ec-url { flex: 1; height: 13px; margin-left: 8px; border-radius: 7px; background: rgba(255,255,255,.12); }
.ec-viewport { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ec-desktop-base {
	height: 11px; margin: 0 auto; width: 108%; transform: translateX(-3.7%);
	background: linear-gradient(180deg, #1a2550, #0d1430);
	border-radius: 0 0 10px 10px; border: 1px solid rgba(255,255,255,.12); border-top: none;
}

/* Marco mobile */
.ec-phone { width: 240px; height: 500px; min-height: 500px; flex: none; box-sizing: border-box; display: flex; padding: 10px; border-radius: 30px; background: #0c1430; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 26px 50px rgba(0,0,0,.5); }
.ec-phone-screen { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 18px 12px 22px; border-radius: 22px; background: #111a3a; }
.ec-phone-screen .ec-block { flex: none; width: 100%; }
.ec-viewport, .ec-phone-screen { position: relative; }

/* Maqueta de página */
.ec-row { display: flex; gap: 12px; }
.ec-block { flex: 1; height: 54px; border-radius: 6px; background: rgba(120,132,214,.45); }
.ec-block.big { flex: 1.25; height: 74px; }
.ec-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ec-lines i { display: block; height: 8px; border-radius: 4px; background: rgba(120,140,225,.5); }
.ec-lines .w-100 { width: 100%; } .ec-lines .w-80 { width: 80%; } .ec-lines .w-60 { width: 60%; } .ec-lines .w-40 { width: 40%; }

/* Piezas de formato */
.ec-banner {
	min-height: 42px; border-radius: 6px; padding: 0 8px; text-align: center;
	background: linear-gradient(110deg, #3FD4E8, #35C6FF);
	display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 800; letter-spacing: .05em; color: #06203a;
}
.ec-banner .preview-icon { width: 28px; height: 28px; display: block; color: #ffffff; }
.ec-play { width: 30px; height: 30px; display: block; }
.ec-adbox {
	display: flex; align-items: center; justify-content: center; text-align: center;
	aspect-ratio: 300 / 250; width: 100%; border-radius: 12px; box-sizing: border-box;
	background: #0FA9D6; border: 2px solid #35C6FF; box-shadow: 0 0 14px rgba(53,198,255,.45);
	font-size: 18px; font-weight: 800; letter-spacing: .03em; color: #fff;
}
.ec-expand { position: relative; }
.ec-topbox { aspect-ratio: auto; height: 44px; flex: none; font-size: 17px; }
.ec-scatter { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ec-scatter .ec-block { width: 100%; flex: none; }
.ec-cube.r { border-radius: 6px; background: #0FA9D6; }
.ec-arrow { position: absolute; width: 26px; height: 26px; }
.ec-arrow.tl { top: 8px; left: 8px; } .ec-arrow.tr { top: 8px; right: 8px; }
.ec-arrow.bl { bottom: 8px; left: 8px; } .ec-arrow.br { bottom: 8px; right: 8px; }
/* Cascada (desktop) */
.ec-cas { position: relative; width: 100%; aspect-ratio: 220 / 90; }
.ec-cas > i, .ec-cas > b { position: absolute; display: block; }
.ec-cas-block { border-radius: 4px; background: rgba(120,132,214,.45); }
.ec-cas-line { height: 6%; border-radius: 4px; background: rgba(120,140,225,.5); }
.ec-tabsbar { display: flex; gap: 6px; margin-top: auto; }
.ec-tabsbar i { flex: 1; height: 16px; border-radius: 4px; background: rgba(255,255,255,.14); }
.ec-cube { position: absolute; border-radius: 2px; background: linear-gradient(110deg, #3FD4E8, #35C6FF); pointer-events: none; }

@media (max-width: 1000px) {
	.ec-desktop { max-width: 100%; }
}