/* ============================================================ TELEMETRY INSIGHT · BASE Tipografía Mont (auto-alojada), colorimetría oficial por división, tokens de espaciado y helpers de layout. ============================================================ */ /* ============================================================ TIPOGRAFÍA OFICIAL — MONT Auto-alojada en assets/fonts/ (formato WOFF). Pesos disponibles: 200 ExtraLight · 300 Light · 400 Regular 600 SemiBold · 700 Bold · 800 Heavy · 900 Black font-display:swap evita el texto invisible mientras carga. ============================================================ */ @font-face{font-family:'Mont';src:url('../fonts/Mont-ExtraLight.woff') format('woff');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-Heavy.woff') format('woff');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Mont';src:url('../fonts/Mont-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap} /* ============================================================ TIPOGRAFÍA DE TÍTULOS — AMSI PRO CONDENSED Auto-alojada en assets/fonts/ (formato WOFF). Condensada y elegante, armoniza con Mont sin resultar agresiva. Se usa SOLO en títulos grandes y medios (displays y hero). Black (800) → títulos generales Ultra (900) → títulos hero de mayor impacto El resto del sitio (cuerpo, botones, etiquetas) sigue en Mont. ============================================================ */ @font-face{font-family:'Amsi';src:url('../fonts/AmsiPro-Black.woff') format('woff');font-weight:700 800;font-style:normal;font-display:swap} @font-face{font-family:'Amsi';src:url('../fonts/AmsiPro-Ultra.woff') format('woff');font-weight:900;font-style:normal;font-display:swap} /* ---------- RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} /* Contención reforzada del desbordamiento horizontal. 'clip' es más estricto que 'hidden' con elementos animados o absolutos que asoman por los bordes (glows, ticker), y evita la franja/parpadeo que algunos navegadores dibujan al repintar. */ body{font-family:'Mont',system-ui,-apple-system,sans-serif;font-weight:400; background:var(--bg-deep);color:var(--text-light);line-height:1.68;letter-spacing:.011em; overflow-x:hidden;overflow-x:clip;position:relative;width:100%;max-width:100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} /* ============================================================ SISTEMA DE COLOR — 2 TEMAS × 3 DIVISIONES El sitio se controla con dos atributos en : data-theme = "dark" | "light" (lo elige el usuario) data-division = "shield"|"arrow"|"nabla" El tema arranca SIEMPRE en oscuro y se recuerda en el navegador. Las divisiones conservan su color en ambos temas. TOKENS SEMÁNTICOS (úsalos siempre, nunca colores fijos): --ink texto fuerte / títulos --ink-soft texto secundario --text-light texto corrido --text-mut texto apagado --overlay color base de bordes y fondos translúcidos --bg-deep fondo de página --bg-panel fondo de secciones alternas --bg-card fondo de tarjetas --brand / --brand-bright / --brand-deep color de la división --gold acento dorado (SOLO detalles pequeños) ============================================================ */ :root{ /* Marca (constantes) */ --cream:#EFE7DC; /* oficial · color del logotipo */ --black:#0A0A0A; /* oficial */ --white:#FFFFFF; /* Tipografía de títulos (AMSI). Una sola variable controla toda la jerarquía de displays; cambiarla aquí la cambia en todo el sitio. */ --font-display:'Amsi','Oswald',sans-serif; /* Dorado de acento — se usa con moderación: etiquetas del ticker, badge "más elegido", precios y algún icono. Tono ligeramente más vivo y saturado, conservando la elegancia. */ --gold:#D4A83A; --gold-bright:#F0C64E; --gold-soft:rgba(212,168,58,.18); /* Movimiento */ --tune:520ms cubic-bezier(.4,0,.2,1); --theme-tune:420ms ease; --ease:cubic-bezier(.16,1,.3,1); /* Espaciado — respiro entre secciones más ceñido todavía. Aire suficiente para respirar, sin huecos muertos entre bloques. */ --sp-xs:8px; --sp-sm:16px; --sp-md:24px; --sp-lg:36px; --sp-xl:clamp(38px,5vw,62px); --sp-2xl:clamp(48px,6vw,84px); --radius:16px; --radius-lg:22px; } /* ------------------------------------------------------------ COLOR DE CADA DIVISIÓN (igual en ambos temas) ------------------------------------------------------------ */ body[data-division="shield"]{ --brand:#0A3A8C; --brand-bright:#2E6BD6; --brand-deep:#001640; --glow:rgba(46,107,214,.50); } body[data-division="arrow"] { --brand:#C41728; --brand-bright:#E03A4A; --brand-deep:#6A0C15; --glow:rgba(224,58,74,.40); } body[data-division="nabla"] { --brand:#406887; --brand-bright:#7DA0BA; --brand-deep:#173A54; --glow:rgba(125,160,186,.38); } /* ============================================================ TEMA OSCURO (el que ve el visitante al entrar) ============================================================ */ body[data-theme="dark"]{ --ink:#EFE7DC; --ink-soft:#CFC5B7; --overlay:#EFE7DC; /* se mezcla en % bajos sobre fondo oscuro */ --accent:var(--gold); --shadow:rgba(0,0,0,.55); } body[data-theme="dark"][data-division="shield"]{ --bg-deep:#00102B; --bg-panel:#001A45; --bg-card:#00296B; --text-light:#EFE7DC; --text-mut:#8A97A8; } body[data-theme="dark"][data-division="arrow"]{ --bg-deep:#14040A; --bg-panel:#250710; --bg-card:#3D0A13; --text-light:#EFE7DC; --text-mut:#978587; } body[data-theme="dark"][data-division="nabla"]{ --bg-deep:#02131F; --bg-panel:#041E33; --bg-card:#0C2B44; --text-light:#DDE6ED; --text-mut:#8AA9BE; } /* ============================================================ TEMA CLARO Fondo claro y limpio; el color de la división se conserva en barra, footer, botones, bordes y detalles del catálogo. ============================================================ */ body[data-theme="light"]{ --ink-soft:#4A5563; --accent:var(--gold); --shadow:rgba(20,25,35,.14); } body[data-theme="light"][data-division="shield"]{ --bg-deep:#F4F1EA; --bg-panel:#FAF8F4; --bg-card:#FFFFFF; --ink:#001638; --overlay:#002A66; --text-light:#16273D; --text-mut:#5E6C7C; } body[data-theme="light"][data-division="arrow"]{ --bg-deep:#F6F1EF; --bg-panel:#FBF7F6; --bg-card:#FFFFFF; --ink:#6A0C15; --overlay:#6A0C15; --text-light:#2E1519; --text-mut:#7A6668; } body[data-theme="light"][data-division="nabla"]{ --bg-deep:#F0F4F7; --bg-panel:#F8FAFC; --bg-card:#FFFFFF; --ink:#041E33; --overlay:#173A54; --text-light:#122434; --text-mut:#5A6E7E; } /* Transición suave al cambiar de tema (sin animar todo el sitio) */ body, .nav, .footer, .promo-bar, .cat-card, .plan-card, .post-card, .q-box, .qr-main, .qr-coverage{ transition:background-color var(--theme-tune), color var(--theme-tune), border-color var(--theme-tune); } /* ============================================================ ESCALA TIPOGRÁFICA — jerarquía por pesos de Mont Títulos grandes: Black (900) · Títulos medios: Heavy (800) Subtítulos: Bold (700) · Botones y etiquetas: SemiBold (600) Cuerpo: Regular (400) · Párrafos guía: Light (300) ============================================================ */ .display{font-family:var(--font-display);font-weight:800;text-transform:uppercase; line-height:1.02;letter-spacing:.018em} .eyebrow{font-family:'Mont',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.22em;font-size:.74rem;line-height:1.4} /* Párrafo guía: sube de Light a Regular para tener más presencia sin perder aire */ .lead{font-weight:400;font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.75;letter-spacing:.006em} /* Mejora de legibilidad general de párrafos */ p{max-width:74ch} /* ============================================================ LAYOUT HELPERS ============================================================ */ .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,56px)} section{position:relative} /* Selección de texto con color de marca */ ::selection{background:var(--brand-bright);color:var(--cream)} /* Foco visible accesible */ :focus-visible{outline:2px solid var(--brand-bright);outline-offset:3px;border-radius:4px}