/* =====================================================
   Estudio SINTOX — Design System CSS
   "Diseño Centrado en la Gente"
   ===================================================== */

/* ── Animations ────────────────────────────────────── */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out 2s infinite;
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ── Glass Card ────────────────────────────────────── */
.glass-card {
    background: rgba(28, 37, 62, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Mesh Gradient ─────────────────────────────────── */
.mesh-gradient {
    background:
        radial-gradient(circle at 20% 30%, rgba(129, 151, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(129, 236, 255, 0.10) 0%, transparent 50%);
}

/* ── Material Symbols default ──────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Logo filter (invert for dark bg) ─────────────── */
.logo-filter {
    filter: brightness(0) invert(1);
}

/* ── Mobile menu transition ────────────────────────── */
#mobile-menu {
    transition: opacity 0.2s ease;
}

/* ── Scrollbar dark ────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #070d1f;
}

::-webkit-scrollbar-thumb {
    background: #41475b;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8197ff;
}

/* ── Selection ─────────────────────────────────────── */
::selection {
    background: rgba(255, 143, 113, 0.3);
    color: #dfe4fe;
}

/* ── Portfolio card hover ──────────────────────────── */
.portfolio-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(129, 151, 255, 0.15);
}

/* ── Responsive: Mobile (max-width: 639px) ────────── */
@media (max-width: 639px) {
    /* Hero titles - scale down aggressively */
    h1 {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }

    /* Section spacing - reduce vertical padding */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Buttons: stack vertically and use full width */
    .flex-wrap.gap-6,
    .flex-wrap.gap-4 {
        flex-direction: column;
        align-items: stretch;
    }

    .flex-wrap.gap-6 > a,
    .flex-wrap.gap-4 > a {
        text-align: center;
        width: 100%;
    }

    /* Footer: stack items */
    footer .flex {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    footer .flex .flex {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Reduce horizontal padding on narrow screens */
    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* CTA sections - smaller rounded corners on mobile */
    .rounded-3xl {
        border-radius: 1.5rem;
    }

    .rounded-\[3rem\] {
        border-radius: 1.5rem;
    }

    .rounded-\[4rem\] {
        border-radius: 1.5rem;
    }

    /* Code page hero logo */
    .animate-float {
        max-height: 10rem;
    }

    /* Glass cards min-height adjustment */
    .min-h-\[400px\] {
        min-height: 280px;
    }

    /* Modal sizing */
    .max-w-5xl {
        max-width: 100% !important;
    }

    .max-h-\[92vh\] {
        max-height: 95vh !important;
    }

    /* Modal flex direction */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }

    /* Modal image pane */
    .w-full.md\:w-5\/12 {
        height: 180px !important;
    }

    /* Portfolio grid images */
    .h-\[500px\] {
        height: 300px !important;
    }

    /* Nav logo */
    nav img {
        height: 3.5rem;
    }

    /* Hamburger touch target */
    #menu-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── Responsive: Tablet (640px - 1023px) ──────────── */
@media (min-width: 640px) and (max-width: 1023px) {
    h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    }

    h2 {
        font-size: clamp(2rem, 4vw, 3rem) !important;
    }

    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Footer: horizontal but compact */
    footer .flex {
        gap: 1.5rem;
    }

    /* Portfolio grid: 2 columns */
    .grid-cols-1.md\:grid-cols-12 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal sizing */
    .max-w-5xl {
        max-width: 90% !important;
    }

    /* Height adjustments */
    .h-\[500px\] {
        height: 400px !important;
    }

    .min-h-\[90vh\] {
        min-height: 70vh;
    }
}

/* ── Touch-friendly: all mobile/tablet ────────────── */
@media (max-width: 1023px) {
    /* Minimum touch target sizes (WCAG 2.5.5) */
    a, button {
        min-height: 44px;
    }

    /* Ensure text is readable without zooming */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Prevent horizontal overflow */
    body, html {
        overflow-x: hidden;
    }

    /* Smooth scrolling for anchor links */
    html {
        scroll-behavior: smooth;
    }

    /* Better tap highlighting */
    a, button {
        -webkit-tap-highlight-color: rgba(255, 143, 113, 0.15);
    }
}