/* ═══════════════════════════════════════════════════════
   KAIROS.IA — Global Responsive System
   Covers: mobile (≤480px), small (≤640px), tablet (≤768px), medium (≤1024px)
   ═══════════════════════════════════════════════════════ */

/* ── Base: ensure images and media never overflow ── */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, iframe { max-width: 100%; height: auto; }

/* ── Prevent horizontal overflow globally ── */
/* NOTE: No overflow on html/body here — Lenis needs html to be the natural scroll root.
   Each page already has overflow-x:hidden on body in its own inline styles. */


/* ══════════════════════════════════════════
   TABLET & MEDIUM (≤1024px)
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Header */
    header { padding: 0.75rem 1.25rem !important; }

    /* Hero headings */
    h1[class*="text-8xl"], h1[class*="text-9xl"] { font-size: 4rem !important; }
    h2[class*="text-7xl"], h2[class*="text-6xl"] { font-size: 3rem !important; }
    h3[class*="text-6xl"] { font-size: 2.5rem !important; }

    /* Large section padding */
    section[class*="py-32"] { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    section[class*="py-24"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    /* Identity card */
    section#identidad [style*="padding: 2.5rem 3rem"] {
        padding: 2rem 2rem !important;
    }

    /* Service grids: 2 columns max on tablet */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══════════════════════════════════════════
   TABLET PORTRAIT (≤768px)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* === TYPOGRAPHY === */
    h1 { font-size: clamp(2rem, 7vw, 3.5rem) !important; line-height: 1.1 !important; }
    h2 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
    h3 { font-size: clamp(1.25rem, 4.5vw, 2rem) !important; }
    p  { font-size: clamp(0.9rem, 2.5vw, 1rem) !important; }

    /* === SECTIONS === */
    section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    section[class*="py-32"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    section[class*="py-20"], section[class*="py-16"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }

    /* === HERO === */
    .hero-cta-group { flex-direction: column !important; align-items: center !important; }
    .hero-cta-group a { width: 100% !important; justify-content: center !important; }

    /* === IDENTITY CARD === */
    section#identidad > div { margin: 0 !important; border-radius: 1.25rem !important; }
    section#identidad [style*="flex-direction: row"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
        padding: 1.75rem 1.5rem !important;
    }
    section#identidad [style*="font-size: clamp"] {
        font-size: clamp(1.6rem, 6vw, 2.5rem) !important;
    }
    section#identidad [style*="10rem"] {
        width: 7rem !important;
        height: 7rem !important;
        align-self: flex-end !important;
    }
    section#identidad [style*="10rem"] .material-icons {
        font-size: 3rem !important;
    }

    /* === GRID LAYOUTS === */
    .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }
    .grid.grid-cols-1.md\\:grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid.grid-cols-1.md\\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 { grid-template-columns: 1fr !important; }

    /* === FLEX ROWS → COLUMN === */
    .flex.flex-col.md\\:flex-row { flex-direction: column !important; }

    /* Pillars / philosophy pairs */
    .flex.flex-col.md\\:flex-row.items-stretch { flex-direction: column !important; }

    /* === CARDS === */
    [class*="rounded-\\[2rem\\]"] { border-radius: 1.25rem !important; }
    [class*="rounded-\\[4rem\\]"] { border-radius: 1.5rem !important; }
    [class*="p-10"] { padding: 1.5rem !important; }
    [class*="p-12"] { padding: 1.75rem !important; }

    /* === CONTACT FORM === */
    .grid.grid-cols-1.md\\:grid-cols-2.gap-5 { grid-template-columns: 1fr !important; }
    .animated-border { border-radius: 1.5rem !important; }
    .animated-border > div { border-radius: 1.5rem !important; padding: 1.5rem !important; }

    /* === FOOTER === */
    footer .grid.grid-cols-1.md\\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }

    /* === VALUE CARDS (identidad.html) === */
    .value-card { padding: 1.5rem !important; }

    /* === TIMELINE === */
    .timeline-line { left: 1rem !important; }
    .timeline-dot { left: 1rem !important; }

    /* CTA buttons */
    a[class*="px-14"] { padding-left: 2rem !important; padding-right: 2rem !important; }
    a[class*="px-12"] { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }

    /* Buttons full width on mobile */
    .entry-anim.flex.flex-col { gap: 1rem !important; }

    /* Large circle icons in origin */
    [class*="size-56"], [class*="size-72"], [class*="size-80"] {
        width: 10rem !important;
        height: 10rem !important;
    }
    [class*="text-\\[140px\\]"], [class*="text-\\[120px\\]"] { font-size: 4rem !important; }

    /* WhatsApp section */
    section#whatsapp .glass-card { padding: 2.5rem 1.5rem !important; }
}

/* ══════════════════════════════════════════
   MOBILE (≤640px)
   ══════════════════════════════════════════ */
@media (max-width: 640px) {
    /* === BASE === */
    body { font-size: 15px; }
    main { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* === HERO === */
    .hero-badge { font-size: 0.65rem !important; padding: 0.4rem 0.75rem !important; }
    h1.entry-anim { font-size: clamp(2rem, 9vw, 3rem) !important; }
    p.entry-anim { font-size: 1rem !important; }

    /* === HEADER === */
    header { padding: 0.75rem 1rem !important; }
    header .text-2xl { font-size: 1.25rem !important; }

    /* === IDENTITY CARD === */
    section#identidad { padding: 1rem !important; }
    section#identidad > div { border-radius: 1rem !important; }
    section#identidad [style*="flex-direction: row"],
    section#identidad [style] {
        padding: 1.5rem 1.25rem !important;
        gap: 1.25rem !important;
    }
    section#identidad h2[style] { font-size: 0.6rem !important; }
    section#identidad h3[style] { font-size: clamp(1.5rem, 7vw, 2rem) !important; margin-bottom: 0.75rem !important; }
    section#identidad p[style] { font-size: 0.875rem !important; }
    section#identidad [style*="10rem"],
    section#identidad div[style*="width: 10rem"] {
        width: 5.5rem !important;
        height: 5.5rem !important;
        border-width: 0.4rem !important;
    }
    section#identidad div[style*="10rem"] .material-icons { font-size: 2.25rem !important; }

    /* === SECTIONS === */
    section[class*="py-32"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    section[class*="py-20"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .max-w-7xl, .max-w-6xl, .max-w-4xl { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* === GRIDS === */
    .grid { grid-template-columns: 1fr !important; }
    footer .grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

    /* === CARDS === */
    .feature-card, .value-card, .spotlight-card.glass-card { padding: 1.25rem !important; }
    [class*="rounded-\\[2rem\\]"] { border-radius: 1rem !important; }

    /* === CONTACT FORM === */
    .animated-border { border-radius: 1rem !important; }
    .animated-border > div { padding: 1.25rem !important; border-radius: 1rem !important; }
    input, textarea, select { font-size: 16px !important; } /* prevents iOS zoom */

    /* === BUTTONS === */
    .btn-primary { padding: 0.875rem 1.5rem !important; font-size: 1rem !important; }
    a[class*="px-14"], a[class*="px-12"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    a[class*="py-5"] { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }

    /* === FOOTER === */
    footer { padding-top: 3rem !important; padding-bottom: 3rem !important; }

    /* === SERVICE DETAIL PAGES: hero blocks === */
    .service-hero-icon { width: 4rem !important; height: 4rem !important; }
    .service-hero-icon .material-icons { font-size: 2rem !important; }

    /* === PHILOSOPHY PILLARS === */
    [class*="text-6xl"][class*="text-primary/20"] { font-size: 3rem !important; }

    /* === LARGE CIRCLES === */
    [class*="size-56"], [class*="size-72"], [class*="size-80"] {
        width: 8rem !important;
        height: 8rem !important;
    }
    [class*="border-\\[16px\\]"] { border-width: 6px !important; }

    /* === TEXT SIZES === */
    [class*="text-7xl"] { font-size: 2.5rem !important; }
    [class*="text-6xl"] { font-size: 2rem !important; }
    [class*="text-5xl"] { font-size: 1.75rem !important; }
    [class*="text-4xl"] { font-size: 1.5rem !important; }

    /* === MOBILE MENU NAV LINKS === */
    .mobile-nav-link { font-size: 2rem !important; letter-spacing: -1px !important; }

    /* === COOKIE BANNER === */
    #cookie-banner .cookie-inner { flex-direction: column !important; gap: 0.75rem !important; }
    #cookie-banner .cookie-actions { width: 100% !important; justify-content: center !important; }

    /* === scroll hint ── */
    .animate-bounce { display: none; }
}

/* ══════════════════════════════════════════
   SMALL MOBILE (≤400px)
   ══════════════════════════════════════════ */
@media (max-width: 400px) {
    header { padding: 0.6rem 0.875rem !important; }
    header .text-2xl { font-size: 1.1rem !important; }
    h1 { font-size: clamp(1.7rem, 9vw, 2.5rem) !important; }
    section { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    .mobile-nav-link { font-size: 1.75rem !important; }
    section#identidad h3[style] { font-size: 1.4rem !important; }
    .btn-primary { font-size: 0.9rem !important; padding: 0.75rem 1.25rem !important; }
}

/* ══════════════════════════════════════════
   TOUCH IMPROVEMENTS (all touch devices)
   ══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets */
    button, a, [role="button"] { min-height: 44px; }

    /* Remove hover transforms on touch (they get stuck) */
    .feature-card:hover,
    .value-card:hover,
    .spotlight-card:hover { transform: none !important; }

    /* Disable glare overlay (requires mouse tracking) */
    .glare-overlay { display: none !important; }
}

/* ══════════════════════════════════════════
   PRINT FRIENDLY
   ══════════════════════════════════════════ */
@media print {
    header, footer, #cookie-banner, .film-grain, .fixed { display: none !important; }
    body { background: white !important; color: black !important; }
    section { page-break-inside: avoid; }
}