/* assets/css/main.css */
/* Design tokens — softwaremed.cl (based on cifrid.com design system) */

:root {
    /* ── Colores ── */
    --color-primary: #0891B2;
    --color-accent: #06B6D4;
    --color-teal: #14B8A6;
    --color-emerald: #10B981;
    --color-blue: #0284C7;
    --color-dark: #020608;
    --color-med-green: #059669;
    --color-med-cyan: #0891B2;

    /* ── z-index ── */
    --z-content: 10;
    --z-scroll-top: 40;
    --z-header: 50;
    --z-modal: 60;

    /* ── Tipografía ── */
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;
}

/* ── Base ── */
body { font-family: var(--font-body); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* ── Fade-in-up ── */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Blob float ── */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
.animate-blob { animation: blob-float 7s infinite; }
.animate-blob-delay { animation: blob-float 7s infinite 2s; }

/* ── Float-y ── */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.animate-float { animation: float-y 4s ease-in-out infinite; }
.animate-float-delay { animation: float-y 4s ease-in-out infinite 1s; }
.animate-float-delay2 { animation: float-y 4s ease-in-out infinite 2s; }

/* ── Gradient text ── */
.gradient-text {
    background: linear-gradient(90deg, #0891B2, #10B981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Tag gris ── */
.tag-gris {
    background: linear-gradient(90deg, #303641 0%, #0891B2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0px 1px 0px rgba(8, 145, 178, 0.2));
    font-weight: 700;
}

/* ── Compliance badge ── */
.compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Pulse dot ── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.pulse-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}