/* ============================================================ CRIATech · octubre.css Capa del Mes de la Ciberseguridad 2026. Solo en la portada. TEMPORAL: vive del 01-10 al 31-10-2026 (hora de Chile). Todo lo que se ve cuelga de la clase .octubre que pone assets/js/octubre.js en el , o de nodos que ese mismo script inyecta: si el script no corre, nada de esto existe. COLOR. El acento de temporada es --warn (#e8b257), que da ~10:1 sobre --ink: pasa AA como texto sin inventar un tono nuevo ni volver a medir contrastes. Lo rojo (--danger) va solo de relleno, en el punto de "no leído" del cebo. ============================================================ */ :root { --octubre: var(--warn); --octubre-soft: rgba(232, 178, 87, 0.08); --octubre-line: rgba(232, 178, 87, 0.42); } /* ============ SELLO DEL HERO ============ */ .octubre-sello { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 6px 13px; border: 1px solid var(--octubre-line); background: var(--octubre-soft); clip-path: var(--clip-sm); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--octubre); line-height: 1.4; transition: border-color 160ms, background 160ms; } .octubre-sello:hover, .octubre-sello:focus-visible { border-color: var(--octubre); background: rgba(232, 178, 87, 0.14); } .octubre-sello svg { flex: 0 0 auto; } /* ============ EL ANZUELO ============ */ /* ANCLADO (táctil o movimiento reducido): dentro del hero, detrás del contenido (.hero-inner es z-index 2) y sobre la grilla. */ .anzuelo-canvas { position: absolute; inset: 0; /* Imprescindible: un es un elemento reemplazado y con inset:0 NO se estira, toma su tamaño intrínseco. Como el JS lo dimensiona a devicePixelRatio, en una pantalla retina medía el doble del contenedor y el anzuelo se dibujaba fuera de cuadro. Con densidad 1 (la del escritorio de pruebas) no se notaba. */ width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* LIBRE (mouse): fijo al viewport, bajo el menú (100) y muy por debajo del asesor (210). pointer-events:none en ambos modos: un adorno no puede robarle el clic a un CTA. */ .anzuelo-canvas.libre { position: fixed; z-index: 98; } /* ============ CONTROL DEL DÍA ============ */ .octubre-control { padding: 56px var(--pad-x); background: var(--ink); border-top: 1px solid var(--line); } .oc-shell { position: relative; max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 34px 36px; background: var(--ink-2); border: 1px solid var(--line); clip-path: var(--clip-lg); } /* Hilo de temporada en el borde superior */ .oc-shell::before { content: ""; position: absolute; top: 0; left: 36px; right: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--octubre-line) 12%, var(--octubre-line) 88%, transparent); } .oc-num { font-size: 76px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--octubre); font-variant-numeric: tabular-nums; } .oc-num span { font-size: 22px; letter-spacing: 0; color: var(--text-dim); } .oc-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--octubre); margin-bottom: 10px; } .oc-titulo { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 12px; } .oc-accion { font-size: 16px; color: var(--text); line-height: 1.55; max-width: 640px; margin-bottom: 8px; } .oc-porque { font-size: 14px; color: var(--text-dim); line-height: 1.55; max-width: 640px; margin-bottom: 16px; } .oc-meta { display: flex; gap: 8px; flex-wrap: wrap; } .oc-lado { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 230px; } .oc-lado .btn-ghost { justify-content: center; } .oc-cuenta { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .oc-cuenta .v { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .oc-cuenta .k { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); line-height: 1.4; } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { .oc-shell { grid-template-columns: auto minmax(0, 1fr); } .oc-lado { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; } .oc-cuenta { border-bottom: none; padding-bottom: 0; margin-right: auto; } } @media (max-width: 640px) { .octubre-control { padding: 40px 20px; } .oc-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 22px; } .oc-num { font-size: 52px; } .oc-lado { flex-direction: column; align-items: stretch; } .oc-cuenta { margin-right: 0; } } @media (max-width: 560px) { .octubre-sello { font-size: 9.5px; letter-spacing: 0.1em; padding: 5px 10px; } } /* ============ IMPRESIÓN ============ */ @media print { .anzuelo-canvas, .octubre-sello { display: none !important; } }