/*
 * CIMA — Coordinador Inteligente de Monitoreo Avanzado
 * Archivo  : app/landing/hero.css
 * Función  : Estilos del hero de la landing (vista de TARJETAS, MOBILE=true en everest.js) y de las
 *            tarjetas de la escena. Antes los inyectaba everest.js al final de la carga: el hero se
 *            pintaba tarde y el contenido saltaba (CLS 1,0 en PageSpeed, 2026-10-12). Ahora se cargan
 *            en el <head> y el hero viene escrito en index.html.
 *            Para volver a la montaña 3D: quitar este archivo del <head> y el <section class="m-hero">.
 * Copyright: © 2024–2026 CIMA Development Group. Todos los derechos reservados.
 */
#scene3d,.scene-veil,.photo-credit{display:none!important}
/* Letra de reemplazo del título mientras carga Roboto Condensed: Arial al 90,5 % ocupa el mismo
   ancho, así el H1 corta en las mismas líneas y la página no salta al llegar la fuente (CLS). */
@font-face{font-family:"RC Fallback";src:local("Arial"),local("Liberation Sans"),local("Roboto");size-adjust:90.5%}
header.hero{display:none!important}
.m-hero{max-width:1320px;margin:0 auto;padding:calc(var(--nav-h,56px) + clamp(20px,2.5vw,44px)) 20px clamp(8px,1vw,16px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,3.5vw,52px);align-items:center}
@media(max-width:900px){.m-hero{grid-template-columns:1fr;gap:28px;text-align:center;padding:calc(var(--nav-h,56px) + 20px) 16px 8px}
}
.m-hero-head{max-width:580px}
@media(max-width:900px){.m-hero-head{margin:0 auto}
}
.m-hero-head h1{font-family:"Roboto Condensed","RC Fallback",sans-serif;font-size:clamp(38px,5.4vw,62px);font-weight:700;line-height:1.04;letter-spacing:-.5px;color:var(--text);margin:0 0 18px}
.m-hero-head h1 .a{background:linear-gradient(90deg,var(--accent),var(--primary-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-hero-head p{font-size:18px;line-height:1.55;color:var(--text-muted);margin:0;max-width:520px}
@media(max-width:900px){.m-hero-head p{margin:0 auto}
}
.m-hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin-top:26px}
@media(max-width:900px){.m-hero-cta{justify-content:center}
}
.m-prod .win{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.m-prod .wbar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--surface-2,#f1f6fb);border-bottom:1px solid var(--border)}
.m-prod .wd{width:11px;height:11px;border-radius:50%}
.m-prod .wd.r{background:#ff5f57}
.m-prod .wd.y{background:#febc2e}
.m-prod .wd.g{background:#28c840}
.m-prod .wt{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--text-muted);display:inline-flex;align-items:center;gap:7px}
.m-prod .wt i{color:var(--accent)}
.m-prod .wshot{position:relative;aspect-ratio:16/10;background:var(--surface-2,#f1f6fb);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.m-prod .wvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.m-prod .wshot{aspect-ratio:4/5}
}
.m-prod .wplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:none;background:var(--accent);color:var(--primary);font-size:34px;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 30%,transparent)}
.m-prod .wplay.on{display:flex}
.m-prod .wshot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:color-mix(in srgb,var(--accent) 70%,transparent)}
.m-prod .wic{width:64px;height:64px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 10px 24px rgba(4,52,108,.22)}
.m-prod .wmk{font-size:11px;font-weight:800;letter-spacing:.5px;color:color-mix(in srgb,var(--primary) 50%,transparent);display:inline-flex;align-items:center;gap:6px}
.m-prod .wmk i{color:var(--accent)}
@media(max-width:900px){.m-prod{max-width:560px;margin:0 auto;width:100%}
}
.m-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:100px;font-weight:700;font-size:15px;text-decoration:none;background:var(--accent);color:var(--text);box-shadow:0 10px 26px rgba(0,175,194,.32);transition:filter .18s,transform .15s}
.m-cta-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.m-cta-ghost{display:inline-flex;align-items:center;padding:13px 22px;border-radius:100px;font-weight:700;font-size:15px;text-decoration:none;color:var(--primary);border:1.5px solid var(--border);transition:border-color .18s}
.m-cta-ghost:hover{border-color:var(--primary)}
.m-cta-ghost .cima-word{height:.82em;width:auto;margin-left:5px;vertical-align:-1px;display:inline-block}
.m-hero-note{margin-top:14px;font-size:12.5px;color:var(--text-muted);display:inline-flex;align-items:center;gap:7px}
.m-hero-note i{color:var(--ok)}
.mvf-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.mvf-card{position:relative;border-radius:18px;overflow:hidden;background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.mvf-img{height:148px;background-size:cover;background-position:center;position:relative}
.mvf-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,24,.08),rgba(7,11,24,.42))}
.mvf-seal{position:absolute;top:50%;left:50%;width:112px;height:112px;transform:translate(-50%,-50%) rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:rgba(6,20,14,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px solid var(--ok);color:var(--ok);z-index:3;pointer-events:none;animation:mvfSealPulse 2.4s ease-in-out infinite}
.mvf-seal i{font-size:40px;line-height:1}
.mvf-seal-txt{font-size:10px;font-weight:800;letter-spacing:1.6px;margin-top:1px}
.mvf-seal-ring{position:absolute;inset:-8px;border-radius:50%;border:2px dashed rgba(16,185,129,.55);animation:mvfSealSpin 9s linear infinite}
@keyframes mvfSealPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 5px rgba(16,185,129,.16)}
50%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 12px rgba(16,185,129,.04)}
}
@keyframes mvfSealSpin{to{transform:rotate(360deg)}
}
.mvf-seal{position:absolute;top:56%;left:33%;width:104px;height:104px;transform:translate(-50%,-50%) rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:rgba(6,20,14,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px solid var(--ok);color:var(--ok);z-index:3;pointer-events:none;animation:mvfSealPulse 2.4s ease-in-out infinite}
.mvf-seal i{font-size:42px;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.mvf-seal-txt{font-size:10px;font-weight:800;letter-spacing:1.6px;margin-top:1px}
.mvf-seal-ring{position:absolute;inset:-8px;border-radius:50%;border:2px dashed rgba(16,185,129,.55);animation:mvfSealSpin 9s linear infinite}
@keyframes mvfSealPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 5px rgba(16,185,129,.16)}
50%{box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 12px rgba(16,185,129,.04)}
}
@keyframes mvfSealSpin{to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){.mvf-seal,.mvf-seal-ring{animation:none}
}
.mvf-body{padding:18px 20px 22px}
.mvf-kicker{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.mvf-body h3{font-family:"Roboto Condensed",sans-serif;font-size:22px;font-weight:700;color:var(--text);margin:0 0 8px;line-height:1.16}
.mvf-body p{font-size:15px;line-height:1.5;color:var(--text-muted);margin:0}
.mvf-badge{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--ok);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.34);padding:6px 14px;border-radius:100px}
.mvf-badge i{font-size:15px}
/* Portada del video como <picture> prioritaria: es la imagen más grande de la primera pantalla
   (LCP). Queda debajo del video y se ve hasta que el video arranca. */
.m-prod .wposter,.m-prod .wposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}