/* ── fabrícala flow diagram ─────────────────────────────────────────────── */ /* Load via */ /* in your base.html */ @media (max-width: 640px) { .diagram-section { display: none; } } .diagram-section { padding: 0 2rem 4rem 2rem; /* remove top padding */ margin-top: -1px; background-color: var(--bg-color); } .diagram-wrapper { width: 100%; max-width: 900px; margin: 0 auto; } .diagram-title { text-align: center; margin-bottom: 2.5rem; } .diagram-title h2 { font-size: 2rem; color: var(--p-color); } .diagram-title p { font-size: 0.95rem; color: var(--p-color); margin-top: 0.35rem; } /* ── Grid ── */ .diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0; position: relative; } .col { display: flex; flex-direction: column; gap: 1rem; align-items: center; } /* ── Cards ── */ .diagram-card { background: #fff; border: 1.5px solid #e8e3db; border-radius: 14px; padding: 0.75rem 1.1rem; display: flex; align-items: center; gap: 0.65rem; width: 100%; max-width: 200px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s, transform 0.2s; cursor: default; } .diagram-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09); transform: translateY(-2px); } .diagram-card .card-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .diagram-card .card-text strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--p-color); } .diagram-card .card-text span { font-size: 0.72rem; /* color: #aaa; */ color: var(--p-color); opacity: 0.7; } .col.req .card-icon { background: #f0ece6; } .col.mkr .card-icon { background: #e8f4f0; } /* ── Hub (fabrícala) ── */ .hub-card { background-color: var(--p-color); border-radius: 18px; padding: 1.4rem 1.6rem; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); min-width: 130px; position: relative; } .hub-card .hub-logo { color: var(--t-color); font-size: 1.25rem; letter-spacing: -0.5px; } .hub-card .hub-sub { font-size: 0.68rem; color: #888; margin-top: 0.2rem; letter-spacing: 0.04em; text-transform: uppercase; } .hub-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; margin: 0.6rem auto 0; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25); animation: hub-pulse 2s infinite; } @keyframes hub-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } } /* ── Arrow columns ── */ .arrow-col { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; position: relative; height: 220px; } .arrow-col svg { width: 100%; height: 100%; overflow: visible; } /* ── Return arc row ── */ .return-row { margin-top: -40px; padding: 0 60px; } /* ── Legend ── */ .diagram-legend { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; } .diagram-legend .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; /* color: #666; */ color: var(--p-color); } .diagram-legend .legend-dot { width: 28px; height: 3px; border-radius: 2px; } .diagram-legend .legend-dot.files { background: #a198f5; } .diagram-legend .legend-dot.product { background: #ff4400; } .diagram-legend .legend-dot.delivery { background: #4ade80; }