/* ==========================================================================
   Bytes CR - technology-effects.css
   Capa visual "SaaS premium": fondo tecnológico, glassmorphism, botones
   con brillo, animaciones de entrada y afinamiento responsive/Safari.
   No depende de librerías externas ni CDN. Se apoya en las variables de
   color ya definidas en main.css (:root) y en el Personalizador.
   ========================================================================== */

:root {
	--tech-black: #05070a;
	--tech-black-soft: #0c1016;
	--tech-neon: #16e07c;
	--tech-neon-soft: rgba(22, 224, 124, 0.35);
	--tech-line: rgba(255, 255, 255, 0.08);
	--tech-glass-bg: rgba(255, 255, 255, 0.06);
	--tech-glass-border: rgba(255, 255, 255, 0.14);
	--tech-radius-lg: 20px;
}

/* Compensar el header fijo al hacer scroll a un ancla (#servicios, etc.) */
.section,
#contenido > * { scroll-margin-top: 96px; }

/* ---------- Zonas con fondo tecnológico (hero y cierre) ---------- */
.tech-bg-zone {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60% 55% at 82% 8%, rgba(22, 224, 124, 0.16), transparent 60%),
		radial-gradient(45% 40% at 8% 92%, rgba(11, 95, 255, 0.14), transparent 60%),
		linear-gradient(160deg, var(--tech-black) 0%, var(--tech-black-soft) 55%, #0a1a14 100%);
}

/* Malla/grid muy sutil, generada con CSS, sin imágenes */
.tech-bg-zone::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--tech-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tech-line) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(75% 75% at 50% 30%, #000 40%, transparent 90%);
	-webkit-mask-image: radial-gradient(75% 75% at 50% 30%, #000 40%, transparent 90%);
	opacity: .5;
}

/* Ruido/grano muy suave con CSS, para evitar banding en el gradiente */
.tech-bg-zone::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .035;
	background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
	background-size: 3px 3px;
}

.tech-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
	pointer-events: none; /* nunca bloquea clicks, links ni formularios */
}

.tech-bg-zone > .container {
	position: relative;
	z-index: 2;
}

/* Texto legible sobre fondo oscuro dentro de las zonas tecnológicas */
.hero-section.tech-bg-zone .hero-copy h1,
.hero-section.tech-bg-zone .hero-mini-stats strong { color: #fff; }
.hero-section.tech-bg-zone .hero-lead,
.hero-section.tech-bg-zone .hero-mini-stats span { color: #B9C8C1; }
.hero-section.tech-bg-zone .eyebrow-accent { color: var(--tech-neon); }

.demo-section.tech-bg-zone { background: none; } /* el gradiente lo aporta .tech-bg-zone */
.demo-section.tech-bg-zone::before,
.demo-section.tech-bg-zone::after { z-index: 0; }

/* ---------- Glassmorphism discreto ---------- */
.dashboard-mock-glass,
.demo-form-glass {
	background: var(--tech-glass-bg);
	border: 1px solid var(--tech-glass-border);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(22, 224, 124, 0.06);
}

.dashboard-mock-glass .dashboard-mock-topbar { background: rgba(5, 7, 10, 0.65); }
.dashboard-mock-glass .dashboard-mock-side,
.dashboard-mock-glass .mini-card,
.dashboard-mock-glass .mini-progress {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--tech-glass-border);
}
.dashboard-mock-glass .mini-card-value,
.dashboard-mock-glass .mini-progress span { color: #fff; }
.dashboard-mock-glass .mini-card-label { color: #9FB6AA; }

.demo-form-glass { border-radius: var(--bytescr-radius); }

/* Fallback para navegadores sin soporte de backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dashboard-mock-glass,
	.demo-form-glass {
		background: rgba(12, 16, 22, 0.92);
	}
}

/* Tarjetas ya existentes: brillo verde sutil al hover, sin tocar su base */
.step-card, .route-card, .feature-card, .service-card,
.kpi-card, .role-card, .value-card, .chip, .contact-card, .post-card {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step-card:hover, .route-card:hover, .feature-card:hover, .service-card:hover,
.kpi-card:hover, .role-card:hover, .value-card:hover, .contact-card:hover, .post-card:hover {
	transform: translateY(-3px);
	border-color: rgba(22, 224, 124, 0.45);
	box-shadow: 0 14px 32px rgba(10, 37, 64, 0.12), 0 0 0 1px rgba(22, 224, 124, 0.08);
}

/* ---------- Botones premium ---------- */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
	transform: translateX(-120%);
	transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary {
	box-shadow: 0 8px 22px rgba(11, 95, 255, 0.28);
}
.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(11, 95, 255, 0.38);
}
.btn-primary:active { transform: translateY(0); }

.tech-bg-zone .btn-outline {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}
.tech-bg-zone .btn-outline:hover {
	border-color: var(--tech-neon);
	color: var(--tech-neon);
	box-shadow: 0 0 0 1px rgba(22, 224, 124, 0.25), 0 0 24px rgba(22, 224, 124, 0.15);
}

.btn:focus-visible {
	outline: 2px solid var(--tech-neon);
	outline-offset: 2px;
}

/* ---------- Efectos en dashboard, mapa y rutas ---------- */
.dashboard-mock { position: relative; }
.dashboard-mock::before {
	content: '';
	position: absolute;
	top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.15), transparent);
	transform: skewX(-18deg);
	animation: bytescr-sheen 7s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}
@keyframes bytescr-sheen {
	0%, 60%, 100% { left: -60%; }
	80% { left: 130%; }
}

.mock-map-svg circle { animation: bytescr-pulse 2.6s ease-in-out infinite; }
.mock-map-svg circle:nth-of-type(2) { animation-delay: .4s; }
.mock-map-svg circle:nth-of-type(3) { animation-delay: .8s; }
@keyframes bytescr-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}

/* ---------- Animaciones de entrada (activadas por IntersectionObserver) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(2px);
	transition: opacity .7s ease, transform .7s ease, filter .7s ease;
	transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
/* El contenido es visible por defecto: si JS no carga, nada se oculta.
   La clase .reveal solo se agrega vía JS (ver scroll-effects.js). */

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	.dashboard-mock::before,
	.mock-map-svg circle,
	.btn::after {
		animation: none !important;
		transition: none !important;
	}
	.tech-canvas { display: none; }
}

/* Cuando el fondo tecnológico está desactivado desde el Personalizador */
.bytescr-tech-bg-off .tech-canvas { display: none; }

/* ---------- Responsive / Safari ---------- */
@supports (height: 100svh) {
	.hero-section.tech-bg-zone { min-height: auto; }
}

@media (max-width: 768px) {
	.tech-bg-zone::before { background-size: 32px 32px; }
	.dashboard-mock::before { animation-duration: 9s; }
}

@media (max-width: 480px) {
	.hero-section.tech-bg-zone .hero-copy h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}

/* Safari: forzar aceleración por GPU en capas animadas para evitar parpadeo */
.tech-canvas, .dashboard-mock, .btn {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* ---------- Contacto premium: panel tecnológico + datos ---------- */
.contact-premium-section {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 40%, rgba(11,95,255,.08), transparent 28%),
		linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
}
.contact-premium-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	min-height: 620px;
	border: 1px solid rgba(10,37,64,.10);
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 34px 80px rgba(10,37,64,.15);
}
.contact-visual {
	position: relative;
	isolation: isolate;
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	padding: clamp(34px, 5vw, 66px);
	background:
		radial-gradient(circle at 72% 28%, rgba(22,224,124,.20), transparent 24%),
		radial-gradient(circle at 12% 88%, rgba(11,95,255,.18), transparent 30%),
		linear-gradient(145deg, #03120e 0%, #071c18 48%, #05100f 100%);
	color: #fff;
}
.contact-visual::before {
	background-size: 42px 42px;
	opacity: .34;
}
.contact-visual-grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(22,224,124,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22,224,124,.05) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 90%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 90%);
}
.contact-visual-content {
	position: relative;
	z-index: 3;
	max-width: 510px;
}
.contact-visual-content .eyebrow { color: var(--tech-neon); }
.contact-visual-content h2 {
	font-size: clamp(2rem, 4vw, 3.7rem);
	line-height: 1.03;
	letter-spacing: -.045em;
	margin: 12px 0 18px;
	color: #fff;
}
.contact-visual-content > p:not(.eyebrow) {
	font-size: 1.02rem;
	line-height: 1.75;
	color: rgba(255,255,255,.72);
	max-width: 46ch;
}
.contact-live-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	border: 1px solid rgba(22,224,124,.28);
	border-radius: 999px;
	background: rgba(4,27,21,.62);
	box-shadow: inset 0 0 20px rgba(22,224,124,.05);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.contact-live-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tech-neon);
	box-shadow: 0 0 0 5px rgba(22,224,124,.12), 0 0 16px rgba(22,224,124,.7);
	animation: contact-status-pulse 2s ease-in-out infinite;
}
.contact-signal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}
.contact-signal-row span {
	padding: 9px 12px;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.10);
	font-size: .78rem;
	color: rgba(255,255,255,.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.contact-radar {
	position: absolute;
	top: 13%;
	right: 9%;
	width: min(30vw, 300px);
	aspect-ratio: 1;
	z-index: 1;
}
.contact-radar-core,
.contact-radar-ring {
	position: absolute;
	inset: 50% auto auto 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.contact-radar-core {
	width: 12px;
	height: 12px;
	background: #fff;
	box-shadow: 0 0 12px #fff, 0 0 28px var(--tech-neon);
}
.contact-radar-ring {
	width: 100%;
	height: 100%;
	border: 1px solid rgba(22,224,124,.25);
	animation: contact-radar-pulse 4.5s ease-out infinite;
}
.contact-radar-ring-two { animation-delay: 1.5s; }
.contact-radar-ring-three { animation-delay: 3s; }
.contact-orbit {
	position: absolute;
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 50%;
	z-index: 1;
}
.contact-orbit::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tech-neon);
	box-shadow: 0 0 16px rgba(22,224,124,.9);
}
.contact-orbit-one { width: 380px; height: 380px; top: -100px; left: -130px; animation: contact-orbit-spin 20s linear infinite; }
.contact-orbit-one::after { top: 50%; right: -4px; }
.contact-orbit-two { width: 240px; height: 240px; right: -60px; bottom: 90px; animation: contact-orbit-spin 14s linear infinite reverse; }
.contact-orbit-two::after { left: 15%; top: 8%; }
.contact-panel {
	padding: clamp(34px, 5vw, 66px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(circle at 100% 0, rgba(11,95,255,.06), transparent 28%),
		#fff;
}
.contact-heading { margin-bottom: 28px; }
.contact-heading p { max-width: 54ch; color: #627286; line-height: 1.7; }
.contact-primary-action {
	display: grid;
	grid-template-columns: 52px minmax(0,1fr) auto;
	align-items: center;
	gap: 15px;
	padding: 17px 18px;
	border-radius: 16px;
	color: #06150f;
	background: linear-gradient(135deg, #19e986 0%, #8effc1 100%);
	box-shadow: 0 16px 34px rgba(22,224,124,.24);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	overflow: hidden;
}
.contact-primary-action::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.48), transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.contact-primary-action:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(22,224,124,.32); }
.contact-primary-action:hover::after { transform: translateX(120%); }
.contact-primary-action:focus-visible { outline: 3px solid rgba(11,95,255,.35); outline-offset: 3px; }
.contact-action-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(4,34,21,.12);
}
.contact-action-icon svg { width: 26px; height: 26px; }
.contact-primary-action strong,
.contact-primary-action small { display: block; }
.contact-primary-action strong { font-size: 1rem; }
.contact-primary-action small { margin-top: 3px; opacity: .72; font-size: .78rem; }
.contact-action-arrow { font-size: 1.6rem; transition: transform .25s ease; }
.contact-primary-action:hover .contact-action-arrow { transform: translateX(4px); }
.contact-detail-list { display: grid; gap: 11px; margin-top: 18px; }
.contact-detail {
	display: grid;
	grid-template-columns: 45px minmax(0,1fr);
	align-items: center;
	gap: 13px;
	min-height: 67px;
	padding: 10px 13px;
	border: 1px solid #e8edf3;
	border-radius: 14px;
	background: rgba(255,255,255,.82);
	color: #0a2540;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-detail:hover {
	transform: translateX(3px);
	border-color: rgba(11,95,255,.24);
	box-shadow: 0 10px 24px rgba(10,37,64,.08);
}
.contact-detail-icon {
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	border-radius: 12px;
	color: var(--bytescr-primary);
	background: rgba(11,95,255,.08);
}
.contact-detail-icon svg { width: 22px; height: 22px; }
.contact-detail small,
.contact-detail strong { display: block; }
.contact-detail small { font-size: .72rem; color: #7a8796; text-transform: uppercase; letter-spacing: .06em; }
.contact-detail strong { margin-top: 2px; font-size: .92rem; word-break: break-word; }
.contact-social-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #edf1f5;
	font-size: .78rem;
	font-weight: 700;
	color: #778395;
}
.contact-social-row .footer-social { margin: 0; }
.contact-social-row .footer-social a {
	color: #0a2540;
	background: #f3f6f9;
	border: 1px solid #e4eaf0;
}
.contact-social-row .footer-social a:hover {
	color: #07130e;
	background: var(--tech-neon);
	border-color: var(--tech-neon);
}
@keyframes contact-radar-pulse {
	0% { transform: translate(-50%, -50%) scale(.08); opacity: .95; }
	75%,100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes contact-orbit-spin { to { transform: rotate(360deg); } }
@keyframes contact-status-pulse { 50% { opacity: .6; transform: scale(.86); } }
@media (max-width: 960px) {
	.contact-premium-shell { grid-template-columns: 1fr; }
	.contact-visual { min-height: 500px; }
	.contact-radar { width: 250px; }
}
@media (max-width: 600px) {
	.contact-premium-section .container { padding-inline: 14px; }
	.contact-premium-shell { border-radius: 20px; }
	.contact-visual { min-height: 430px; padding: 30px 24px; }
	.contact-panel { padding: 34px 22px; }
	.contact-radar { width: 190px; top: 8%; right: -4%; }
	.contact-primary-action { grid-template-columns: 45px minmax(0,1fr) auto; padding: 14px; }
	.contact-action-icon { width: 45px; height: 45px; }
	.contact-social-row { align-items: flex-start; flex-direction: column; }
	.contact-signal-row { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
	.contact-radar-ring,
	.contact-orbit,
	.contact-live-status i { animation: none !important; }
}

/* ========================================================================== 
   DEMO / FORMULARIO TECNOLÓGICO OSCURO v1.3.0 — solo sección #demo
   ========================================================================== */
.demo-tech-section {
	padding: clamp(78px, 9vw, 132px) 0;
	background:
		radial-gradient(circle at 14% 22%, rgba(0, 255, 128, .12), transparent 26%),
		radial-gradient(circle at 84% 72%, rgba(0, 140, 255, .09), transparent 28%),
		linear-gradient(145deg, #020605 0%, #050b09 46%, #020504 100%) !important;
	color: #fff;
}
.demo-tech-section::before {
	background-image: linear-gradient(rgba(26,255,134,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(26,255,134,.055) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.72) 66%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.72) 66%, transparent);
	opacity: .78;
}
.demo-tech-section::after { opacity: .055; }
.demo-tech-grid { position:absolute; inset:auto -8% -24% -8%; height:54%; z-index:1; pointer-events:none; transform:perspective(700px) rotateX(68deg); transform-origin:center bottom; background-image:linear-gradient(rgba(22,224,124,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(22,224,124,.18) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to top,#000,transparent 90%); -webkit-mask-image:linear-gradient(to top,#000,transparent 90%); }
.demo-tech-glow { position:absolute; z-index:1; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:.3; }
.demo-tech-glow-one { width:320px; height:320px; background:#00e779; left:28%; top:36%; }
.demo-tech-glow-two { width:260px; height:260px; background:#087dff; right:8%; bottom:6%; opacity:.13; }
.demo-tech-inner { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,.98fr) minmax(460px,1.02fr); gap:clamp(48px,6vw,90px); align-items:center; }
.demo-tech-copy { position:relative; min-height:720px; padding:12px 0; }
.demo-tech-eyebrow { color:#21ef83 !important; letter-spacing:.16em; font-weight:800; text-transform:uppercase; }
.demo-tech-copy h2 { color:#fff; font-size:clamp(2.5rem,4.5vw,5.2rem); line-height:.98; letter-spacing:-.055em; margin:22px 0 25px; max-width:760px; }
.demo-tech-copy h2 span { color:#19e778; }
.demo-tech-copy > p { color:rgba(255,255,255,.67); font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.75; max-width:590px; }
.demo-benefits { display:grid; gap:17px; margin-top:34px; position:relative; z-index:4; max-width:480px; }
.demo-benefit { display:flex; align-items:center; gap:15px; }
.demo-benefit-icon { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border:1px solid rgba(22,224,124,.14); border-radius:14px; color:#20ec82; background:linear-gradient(145deg,rgba(22,224,124,.10),rgba(255,255,255,.025)); box-shadow:inset 0 0 22px rgba(22,224,124,.04); }
.demo-benefit-icon svg, .demo-field > span svg, .demo-submit svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.demo-benefit div { display:grid; gap:3px; }
.demo-benefit strong { color:#fff; font-size:.97rem; }
.demo-benefit span { color:rgba(255,255,255,.54); font-size:.88rem; }
.demo-map-visual { position:absolute; width:min(620px,86%); right:-6%; top:25%; z-index:2; opacity:.78; pointer-events:none; filter:drop-shadow(0 0 16px rgba(17,239,126,.16)); }
.demo-map-visual svg { width:100%; height:auto; overflow:visible; }
.demo-map-outline { fill:rgba(8,40,26,.26); stroke:#16df78; stroke-width:1.2; }
.demo-map-lines path { fill:none; stroke:rgba(22,224,124,.52); stroke-width:.8; }
.demo-map-nodes circle { fill:#28ff91; filter:url(#demoGlow); animation:demo-node-pulse 2.6s ease-in-out infinite; }
.demo-map-nodes circle:nth-child(2n) { animation-delay:.5s; }
.demo-radar circle { fill:none; stroke:rgba(30,255,139,.42); stroke-width:1; animation:demo-radar-pulse 3.4s ease-out infinite; }
.demo-radar circle:nth-child(2) { animation-delay:.45s; }.demo-radar circle:nth-child(3){animation-delay:.9s}.demo-radar .demo-radar-core{fill:#67ffb3;stroke:#fff;stroke-width:1.5;animation:none;filter:url(#demoGlow)}
@keyframes demo-node-pulse { 0%,100%{opacity:.45;transform:scale(.9);transform-origin:center}50%{opacity:1;transform:scale(1.25)} }
@keyframes demo-radar-pulse { 0%{opacity:.85;transform:scale(.72);transform-origin:center}100%{opacity:0;transform:scale(1.16);transform-origin:center} }
.demo-coverage-card { position:absolute; left:0; bottom:0; z-index:5; width:min(540px,90%); display:flex; align-items:center; gap:16px; padding:17px 20px; border:1px solid rgba(22,224,124,.12); border-radius:15px; background:rgba(7,23,17,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 42px rgba(0,0,0,.28); }
.demo-coverage-card > div { display:grid; gap:4px; }.demo-coverage-card strong{color:#fff}.demo-coverage-card span{color:rgba(255,255,255,.55);font-size:.88rem}
.demo-tech-form { padding:clamp(25px,3vw,38px); border-radius:19px; color:#fff; background:linear-gradient(155deg,rgba(13,20,17,.96),rgba(4,8,7,.93)) !important; border:1px solid rgba(34,255,142,.48) !important; box-shadow:0 24px 80px rgba(0,0,0,.58),0 0 26px rgba(20,232,123,.17),inset 0 1px 0 rgba(255,255,255,.04) !important; }
.demo-tech-form .form-row { margin-bottom:17px; gap:8px; }
.demo-tech-form .form-row label { color:#fff; font-size:.86rem; letter-spacing:.01em; }
.demo-field { position:relative; display:flex; align-items:center; border:1px solid rgba(255,255,255,.17); border-radius:9px; background:rgba(0,0,0,.24); transition:border-color .22s ease,box-shadow .22s ease,background .22s ease; }
.demo-field:focus-within { border-color:#1ee880; box-shadow:0 0 0 3px rgba(30,232,128,.11),0 0 18px rgba(30,232,128,.08); background:rgba(0,0,0,.38); }
.demo-field > span { width:49px; flex:0 0 49px; display:grid; place-items:center; color:#1fea82; pointer-events:none; }
.demo-tech-form .demo-field input,.demo-tech-form .demo-field select,.demo-tech-form .demo-field textarea { width:100%; min-width:0; color:#fff; background:transparent !important; border:0 !important; border-radius:0; outline:0 !important; box-shadow:none !important; padding:14px 14px 14px 0; }
.demo-tech-form .demo-field input::placeholder,.demo-tech-form .demo-field textarea::placeholder{color:rgba(255,255,255,.44)}
.demo-tech-form .demo-field select { color:#fff; appearance:auto; }.demo-tech-form .demo-field select option{background:#07110d;color:#fff}
.demo-field-textarea { align-items:flex-start; }.demo-field-textarea > span { padding-top:15px; }.demo-tech-form textarea{resize:vertical;min-height:116px}
.demo-tech-form .form-row.two-col { gap:13px; }
.demo-submit { width:100%; min-height:55px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; color:#fff !important; background:linear-gradient(90deg,#0fd96a,#18ee75) !important; box-shadow:0 13px 34px rgba(16,226,111,.27) !important; font-size:1rem; font-weight:800; }
.demo-submit:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(16,226,111,.36) !important; }.demo-submit svg{width:20px;height:20px}
.demo-privacy { margin:12px 0 0; color:rgba(255,255,255,.44); text-align:center; font-size:.77rem; }
.demo-privacy span { color:#1fe77e; }.demo-tech-form .form-feedback{margin-bottom:0}
@media (max-width:1080px){.demo-tech-inner{grid-template-columns:1fr;}.demo-tech-copy{min-height:650px}.demo-map-visual{right:2%;width:min(600px,72%)}.demo-tech-form{max-width:760px;width:100%;margin-inline:auto}}
@media (max-width:700px){.demo-tech-section{padding:70px 0}.demo-tech-copy{min-height:auto;padding-bottom:420px}.demo-map-visual{width:108%;right:-24%;top:auto;bottom:78px}.demo-coverage-card{width:100%}.demo-tech-form .form-row.two-col{grid-template-columns:1fr}.demo-tech-copy h2{font-size:clamp(2.25rem,12vw,3.55rem)}.demo-tech-inner{gap:36px}.demo-tech-form{padding:22px 17px}.demo-benefits{gap:13px}.demo-benefit-icon{width:46px;height:46px;flex-basis:46px}}
@media (max-width:430px){.demo-tech-copy{padding-bottom:360px}.demo-map-visual{bottom:82px}.demo-coverage-card{padding:14px}.demo-benefit span{font-size:.8rem}.demo-tech-form .form-row label{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.demo-map-nodes circle,.demo-radar circle{animation:none!important}}

/* ==========================================================
   Demo v1.4 — mano animada rellenando el formulario
   Alcance: únicamente la sección #demo.
   ========================================================== */
.demo-tech-section {
	background:
		radial-gradient(circle at 19% 36%, rgba(25, 238, 128, .13), transparent 26%),
		radial-gradient(circle at 82% 68%, rgba(0, 110, 255, .08), transparent 28%),
		linear-gradient(180deg, #010403 0%, #020806 46%, #000 100%) !important;
}
.demo-tech-section .demo-tech-grid {
	opacity: .42;
	background-image:
		linear-gradient(rgba(31, 238, 130, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(31, 238, 130, .055) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
}
.demo-hand-visual {
	position: absolute;
	z-index: 3;
	right: -9%;
	top: 24%;
	width: min(690px, 94%);
	pointer-events: none;
	filter: drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
.demo-hand-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo-data-orbits circle,
.demo-data-orbits path {
	fill: none;
	stroke: rgba(34, 240, 134, .24);
	stroke-width: 1.3;
	stroke-dasharray: 7 9;
	transform-origin: 310px 210px;
	animation: demo-orbit-spin 24s linear infinite;
}
.demo-data-orbits circle:nth-child(2) { animation-direction: reverse; animation-duration: 17s; opacity: .72; }
.demo-data-orbits circle:nth-child(3) { animation-duration: 12s; opacity: .55; }
.demo-data-orbits path { stroke-dasharray: 220 480; animation: demo-data-route 5.5s linear infinite; }
.demo-data-orbits circle:nth-last-child(-n+5) { fill: #2bf18a; stroke: none; filter: drop-shadow(0 0 8px #23ef86); animation: demo-node-pulse 2s ease-in-out infinite; }
.demo-tablet { transform-box: fill-box; transform-origin: center; animation: demo-tablet-float 5s ease-in-out infinite; }
.demo-mini-title { fill: #fff; font: 700 15px/1.2 system-ui, sans-serif; letter-spacing: .02em; }
.demo-mini-field rect { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.18); stroke-width: 1.2; }
.demo-mini-field text { fill: rgba(255,255,255,.82); font: 600 11px/1 system-ui, sans-serif; opacity: 0; }
.demo-mini-submit rect { fill: #16df73; filter: drop-shadow(0 0 10px rgba(22,223,115,.42)); }
.demo-mini-submit text { fill: #fff; font: 800 11px/1 system-ui, sans-serif; }
.demo-mini-field-1 text { animation: demo-type-field 12s steps(12,end) infinite 1.2s; }
.demo-mini-field-2 text { animation: demo-type-field 12s steps(10,end) infinite 3.5s; }
.demo-mini-field-3 text { animation: demo-type-field 12s steps(9,end) infinite 5.8s; }
.demo-mini-field-4 text { animation: demo-type-field 12s steps(16,end) infinite 8s; }
.demo-mini-field-1 rect { animation: demo-field-focus 12s ease infinite 0s; }
.demo-mini-field-2 rect { animation: demo-field-focus 12s ease infinite 2.8s; }
.demo-mini-field-3 rect { animation: demo-field-focus 12s ease infinite 5.2s; }
.demo-mini-field-4 rect { animation: demo-field-focus 12s ease infinite 7.4s; }
.demo-writing-hand {
	transform-box: fill-box;
	transform-origin: 44% 35%;
	animation: demo-hand-fill 12s cubic-bezier(.58,.04,.28,1) infinite;
}
.demo-hand-palm,
.demo-hand-finger { fill: url(#demoHandSkin); stroke: rgba(255,255,255,.08); stroke-width: 1.2; }
.demo-hand-highlight { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 4; stroke-linecap: round; }
.demo-pen-brand { fill: #26ee87; font: 800 10px/1 system-ui, sans-serif; letter-spacing: .04em; }
.demo-pen { transform: rotate(-8deg); transform-origin: 90% 90%; }
.demo-hand-caption {
	position: absolute;
	left: 13%;
	bottom: -4px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px solid rgba(39,239,137,.24);
	border-radius: 999px;
	background: rgba(2,10,7,.72);
	color: rgba(255,255,255,.72);
	font-size: .77rem;
	font-weight: 700;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 12px 30px rgba(0,0,0,.32);
}
.demo-hand-caption span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22ef86;
	box-shadow: 0 0 0 5px rgba(34,239,134,.10), 0 0 14px #22ef86;
	animation: demo-node-pulse 1.8s ease-in-out infinite;
}
@keyframes demo-hand-fill {
	0%, 7% { transform: translate(285px, 125px) rotate(-8deg) scale(.92); }
	17%, 23% { transform: translate(252px, 175px) rotate(-4deg) scale(.92); }
	34%, 40% { transform: translate(214px, 224px) rotate(0deg) scale(.92); }
	51%, 57% { transform: translate(360px, 220px) rotate(3deg) scale(.92); }
	68%, 76% { transform: translate(342px, 275px) rotate(2deg) scale(.92); }
	86%, 92% { transform: translate(380px, 305px) rotate(8deg) scale(.92); }
	100% { transform: translate(285px, 125px) rotate(-8deg) scale(.92); }
}
@keyframes demo-type-field {
	0%, 5% { opacity: 0; clip-path: inset(0 100% 0 0); }
	12%, 70% { opacity: 1; clip-path: inset(0 0 0 0); }
	88%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes demo-field-focus {
	0%, 10%, 30%, 100% { stroke: rgba(255,255,255,.18); filter: none; }
	14%, 24% { stroke: #27ef89; filter: drop-shadow(0 0 7px rgba(39,239,137,.65)); }
}
@keyframes demo-tablet-float { 50% { transform: translateY(-8px) rotate(-.8deg); } }
@keyframes demo-orbit-spin { to { transform: rotate(360deg); } }
@keyframes demo-data-route { to { stroke-dashoffset: -700; } }
@keyframes demo-node-pulse { 50% { opacity: .45; } }
@media (max-width:1080px) {
	.demo-hand-visual { right: 0; top: 28%; width: min(670px, 82%); }
	.demo-tech-copy { min-height: 720px; }
}
@media (max-width:700px) {
	.demo-tech-copy { padding-bottom: 455px; }
	.demo-hand-visual { width: 116%; right: -31%; top: auto; bottom: 66px; }
	.demo-hand-caption { left: 20%; bottom: -8px; }
}
@media (max-width:430px) {
	.demo-tech-copy { padding-bottom: 390px; }
	.demo-hand-visual { width: 122%; right: -36%; bottom: 62px; }
	.demo-hand-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.demo-writing-hand,
	.demo-tablet,
	.demo-data-orbits circle,
	.demo-data-orbits path,
	.demo-mini-field text,
	.demo-mini-field rect,
	.demo-hand-caption span { animation: none !important; }
	.demo-writing-hand { transform: translate(340px, 275px) scale(.92); }
	.demo-mini-field text { opacity: 1; clip-path: none; }
}

/* Demo v1.5.1: sección visual limpia, sin formulario ni mano. */
.demo-showcase-only .demo-tech-inner {
	display: block;
}
.demo-showcase-only .demo-tech-copy {
	width: min(100%, 920px);
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}
.demo-showcase-only .demo-benefits {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 900px;
	margin: 34px auto 0;
	text-align: left;
}
.demo-showcase-only .demo-form,
.demo-showcase-only .demo-hand-visual {
	display: none !important;
}
@media (max-width: 700px) {
	.demo-showcase-only .demo-benefits {
		grid-template-columns: 1fr;
	}
}


/* v1.5.2 — Contacto full width */
.contact-premium-section {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.contact-fullwidth-container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.contact-fullwidth-container .contact-premium-shell {
	width: 100%;
	max-width: none;
	margin: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}
@media (max-width: 980px) {
	.contact-fullwidth-container .contact-premium-shell { border-radius: 0; }
}