/* =====================================================
   JOBAR TECHNOLOGY SAC - Ajustes para celulares y tablets
   Solo actúa en pantallas de 860px o menos:
   la versión de escritorio no cambia.
   ===================================================== */

/* ---------- Tablets y celulares (≤ 860px) ---------- */
@media (max-width: 860px) {
    html, body { overflow-x: clip; }

    .container { padding: 0 18px; }
    section { padding: 52px 0; }
    .section-head { margin-bottom: 28px; }

    /* Encabezado más bajo para ganar pantalla */
    .site-header .container { height: 68px; }
    .brand img { height: 58px; }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 64px 0 64px;
        clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
    }
    .hero::before {
        background: linear-gradient(180deg, rgba(9,20,58,.92) 0%, rgba(9,20,58,.80) 60%, rgba(9,20,58,.70) 100%);
    }
    .hero-copy { max-width: 100%; }
    .hero-stats { gap: 24px; margin-top: 32px; padding-top: 22px; }

    .page-hero { padding: 40px 0; }

    .grid { gap: 18px; }
    .split { gap: 32px; }
    .product-detail { gap: 28px; padding: 24px 0 48px; }
    .contact-grid { gap: 32px; }
    .catalogo { grid-template-columns: minmax(0, 1fr); }
    .catalogo > *, .catalogo-lateral > * { min-width: 0; }

    /* Imagen del isotipo en "Servicios" (inicio) */
    .split .hero-art { height: 240px !important; order: 0; }

    footer.site-footer { padding: 44px 0 22px; }
    footer .footer-grid { gap: 28px; margin-bottom: 28px; }
}

/* ---------- Celulares (≤ 720px) ---------- */
@media (max-width: 720px) {
    body { font-size: 15.5px; }

    h1 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); }
    h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); }
    h3 { font-size: 1.12rem; }

    .container { padding: 0 16px; }
    section { padding: 44px 0; }

    /* Encabezado */
    .site-header .container { height: 62px; }
    .brand img { height: 50px; }
    .header-actions { gap: 6px; }
    /* El botón "Escríbenos" quedaba vacío: se oculta, ya está el botón flotante de WhatsApp */
    .header-actions .btn-sm { display: none; }
    .nav-toggle { padding: 8px; margin-right: -8px; }

    /* Menú desplegable: más cómodo para el dedo */
    nav.main-nav { top: 62px; padding: 12px 16px 30px; }
    nav.main-nav ul { gap: 0; }
    nav.main-nav li { border-bottom: 1px solid var(--line); }
    nav.main-nav a {
        display: block;
        padding: 15px 4px;
        font-size: 1.08rem;
    }
    nav.main-nav a::after { display: none; }
    nav.main-nav a.active { color: var(--blue); }

    /* Hero */
    .hero { padding: 48px 0 56px; }
    .hero-eyebrow { font-size: .9rem; margin-bottom: 10px; }
    .hero p.lead { font-size: 1rem; }
    .hero-cta { flex-direction: column; gap: 12px; margin-top: 24px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 28px;
        padding-top: 20px;
    }
    .hero-stats div strong { font-size: 1.4rem; }
    .hero-stats div span { font-size: .78rem; line-height: 1.3; display: block; }

    .page-hero { padding: 32px 0; }

    /* Botones */
    .btn { padding: 13px 26px 13px 20px; }

    /* Tarjetas */
    .grid { gap: 16px; }
    .card-cut { padding: 22px 20px; }
    .card-icon { width: 48px; height: 48px; margin-bottom: 14px; }
    .card-icon svg { width: 26px; height: 26px; }

    .product-body { padding: 16px 18px 18px; }
    .product-footer { gap: 10px; flex-wrap: wrap; }

    .blog-card-body { padding: 16px 18px 18px; }

    /* Producto individual */
    .product-detail-price { font-size: 1.5rem; }
    .thumb-btn { width: 60px; height: 60px; }
    .product-info .btn-whatsapp { width: 100%; }

    /* Catálogo */
    .catalogo { gap: 18px; }
    .catalogo-lateral { gap: 16px; }
    .categorias-lista h4 { padding: 12px 14px; }
    /* Categorías: cuadrícula de 2 columnas, todas visibles, nombres largos en 2 líneas */
    .catalogo { grid-template-columns: minmax(0, 1fr); }
    .catalogo > *, .catalogo-lateral > * { min-width: 0; }
    .categorias-lista ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }
    .categorias-lista li { min-width: 0; display: flex; }
    .categorias-lista a {
        flex: 1;
        min-width: 0;
        min-height: 46px;
        padding: 8px 10px;
        font-size: .84rem;
        line-height: 1.25;
        white-space: normal;
        border: 1px solid var(--line);
    }
    .categorias-lista a:hover { padding-left: 10px; }
    .categorias-lista a span {
        min-width: 0;
        overflow-wrap: break-word;
    }
    .categorias-lista em { flex-shrink: 0; }
    /* "Todas" ocupa la fila completa */
    .categorias-lista li:first-child { grid-column: 1 / -1; }
    .buscador-resultados { width: 100%; max-height: 60vh; }

    /* Formularios: 16px evita el zoom automático en iPhone */
    form input, form select, form textarea,
    .buscador-campo input[type="search"] { font-size: 16px; }
    .info-block { margin-bottom: 20px; }

    /* Nosotros / servicios */
    .split .hero-art { height: 200px !important; }
    .value-list .num { font-size: 1.2rem; min-width: 30px; }

    /* Pie de página */
    .footer-bottom { flex-direction: column; text-align: center; }

    /* WhatsApp flotante */
    .wa-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
    .wa-float svg { width: 27px; height: 27px; }
}

/* ---------- Celulares pequeños (≤ 380px) ---------- */
@media (max-width: 380px) {
    .container { padding: 0 14px; }
    .brand img { height: 44px; }
    .hero-stats div strong { font-size: 1.2rem; }
    .hero-stats div span { font-size: .72rem; }
    .product-footer { flex-direction: column; align-items: stretch; }
    .product-footer .btn-whatsapp { width: 100%; }
}