/* ============================================================
   SearchMAS — mobile.css
   Adaptaciones responsive para tablet y mobile
   Breakpoints: 1024px / 768px / 480px / 380px
   ============================================================ */

/* ── Prevent horizontal scroll globally ─────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL — tipografía y utilidades
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sm-heading {
        font-size: clamp(30px, 8.5vw, 54px);
        letter-spacing: -1.5px;
        margin-bottom: 1.5rem;
    }
    .sm-pill { font-size: 12px; padding: .45rem 1rem; }
    .sm-pin  { width: 11px; height: 11px; }

    /* Botones CTA en hero — full width centrado en mobile */
    .smr-hero-sm__cta-row,
    .ptr-hero-ctas,
    .fq-hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .smr-hero-sm__cta-row a,
    .ptr-hero-ctas a,
    .fq-hero-ctas a {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    /* Reduce blobs en hero claro para evitar overflow visual */
    .sm-b1 { width: 280px; height: 280px; }
    .sm-b2 { width: 220px; height: 220px; }
    .sm-b3 { width: 180px; height: 180px; }
}

@media (max-width: 480px) {
    .sm-heading { font-size: clamp(26px, 8vw, 40px); }
}

/* ═══════════════════════════════════════════════════════════
   HEADER (pill flotante)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    #searchmas-header { padding: 10px 12px; }
    .smas-pill { padding: 8px 10px; }
    .smas-logo { min-width: 88px; }
}
@media (max-width: 480px) {
    #searchmas-header { padding: 8px 10px; }
    .smas-mobile { top: 72px; left: 8px; right: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #searchmas-footer { padding-top: 0; }
    .footer-inner  { padding: 48px 5% 28px; }
    .footer-grid   { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
    .footer-legal  { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   HOME — HERO
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* hero section */
    .home-hero, section.sm-hero-bg:first-of-type {
        padding: 100px 5% 60px;
    }
    /* CTA row — mantener en la misma fila */
    .hero-ctas {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .75rem;
    }
    .hero-ctas a { width: auto; }

    /* Tagline bajo los botones — apilar items */
    .bottom-tagline { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .btl-sep { display: none; }

    /* Browser / dashboard mockup */
    .scene { margin: 0 auto 1rem; }
    .sidebar { display: none; }
    .dashboard { min-height: 280px; }

    /* Stats row */
    .nb-stats { grid-template-columns: repeat(2, 1fr); }

    /* Marquee: asegurar no overflow */
    .marquee-wrap { overflow: hidden; }
}

@media (max-width: 480px) {
    .nb-stats { grid-template-columns: 1fr; }
    .browser-bar .url-bar { display: none; }
}

/* ── HOME: Sección "Cómo trabajamos" (proc — 5 pasos) ────── */
/* Convierte el grid 5 columnas en carrusel scroll-snap */
@media (max-width: 768px) {
    .proc { padding: 64px 0; overflow: hidden; }
    .proc > .section-inner,
    .proc-inner { padding: 0; }
    .proc-head  { padding: 0 5%; margin-bottom: 2rem; }
    /* proc-timeline es el contenedor que REALMENTE scrollea */
    .proc-timeline {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 5% 14px;
    }
    .proc-timeline::-webkit-scrollbar { display: none; }
    .proc-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 1.25rem;
    }
    .proc-wave { display: none; }
    /* proc-steps: solo flex, sin scroll propio */
    .proc-steps {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 16px;
        min-height: auto !important;
        width: max-content;
    }
    .pstep {
        flex-shrink: 0 !important;
        width: 220px;
        scroll-snap-align: start;
        padding-top: 0 !important;
    }
    .pstep-bot { padding-top: 0 !important; }
    .pstep-icon { margin: 0 auto 1rem; }
}

/* ── HOME: Plataforma / Bento ─────────────────────────────── */
@media (max-width: 768px) {
    .plat { padding: 64px 5%; }
    .plat-head { flex-direction: column; gap: 1rem; }
    .plat-head-right { max-width: 100%; }
    .bento { grid-template-columns: 1fr !important; }
    .bento-last {
        flex-direction: column !important;
        grid-column: auto !important;
    }
    .bento-last .card-vis { flex: none !important; width: 100%; height: 160px; }
    .bento-last .card-body { padding: 1.25rem; }
    /* Todas las cards son card-c1 (fondo navy oscuro):
       object-fit:contain muestra la screenshot completa sin recortar */
    .card-vis { height: 160px; background: #060e1e; }
    .card.card-c1 .card-vis { height: 160px; }
    .card-vis-img {
        object-fit: contain;
        object-position: center center;
    }
}

/* ── HOME: Industrias ─────────────────────────────────────── */
@media (max-width: 768px) {
    .ind { padding: 64px 5%; }
    .ind-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }
    .ind-tabs::-webkit-scrollbar { display: none; }
    .industry-tab { flex-shrink: 0; font-size: 13px; padding: 8px 14px; }
    .ind-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
    .ind-grid { grid-template-columns: 1fr; }
}

/* ── HOME: Pasos (steps) ──────────────────────────────────── */
@media (max-width: 768px) {
    .steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
    .steps { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SOLUCIONES
   ═══════════════════════════════════════════════════════════ */
/* ── dem-grid (5 columnas → carrusel scroll-snap) ─────────── */
@media (max-width: 900px) {
    .dem { padding: 64px 0; }
    .dem-head { padding: 0 5%; margin-bottom: 2rem; }
    .dem-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 14px;
        padding: 0 5% 20px;
    }
    .dem-grid::-webkit-scrollbar { display: none; }
    .dem-card {
        flex-shrink: 0;
        width: 72vw;
        max-width: 270px;
        scroll-snap-align: start;
    }
    /* arq-grid */
    .arq  { padding: 64px 5%; }
    .arq-grid { grid-template-columns: 1fr; gap: 1rem; }
    /* prod rows */
    .prod { padding: 64px 5%; }
    .prod-row {
        flex-direction: column !important;
        gap: 1.75rem;
        padding: 2rem 0;
    }
    .prod-flip { flex-direction: column !important; }
    .prod-visual { flex: none !important; width: 100%; }
    .prod-vis-wrap { height: 220px; }
    /* npv-grid */
    .npv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .npv-grid { grid-template-columns: 1fr !important; }
    .dem-card { width: 82vw; max-width: 300px; }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINAS DE PRODUCTO / AGENTES (tp-* classes)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hero */
    .tp-hero { padding: 96px 20px 64px; }
    .tp-h1 { font-size: clamp(26px, 7vw, 42px) !important; }
    /* Botones hero: misma fila — !important para sobreescribir flex-direction:column de producto.css */
    .tp-ctas {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: .75rem;
        justify-content: center;
    }
    .tp-ctas a {
        flex: 0 0 auto;
        font-size: 13px;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center;
        justify-content: center;
    }
    .tp-ghost-btn { width: auto !important; }

    /* Visual panel en hero — hacerlo más chico */
    .tp-visual { margin-top: 0; }
    .pan-panel  { font-size: .9em; }

    /* Secciones */
    .tp-how, .tp-cap, .tp-res, .tp-aud, .tp-form-sec,
    .tp-prob { padding: 64px 20px; }

    /* Prob vs — ajustar */
    .tp-prob-inner { gap: 2rem; }
    .tp-vs { padding: 20px; }

    /* Proceso: diagrama de flujo compacto en mobile — sin overflow para evitar scroll vertical */
    .tp-flow { display: block !important; }
    .tp-how-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    /* Grid 5×5 compacto (anuncios / producto): nodos ~99px en pantallas de 375px */
    .tp-flow-grid {
        grid-template-columns: 1fr 18px min-content 18px 1fr !important;
        grid-template-rows: auto 18px 48px 18px auto !important;
    }
    /* Diagrama en cruz (reputación): minmax(0,1fr) garantiza columnas laterales iguales
       aunque el hub sea ancho; sin esto, 1fr usa su min-content y desbordan. */
    .tr-flow-cross {
        grid-template-columns: minmax(0, 1fr) 22px min-content 22px minmax(0, 1fr) !important;
        grid-template-rows: auto 18px 48px 18px auto !important;
    }
    /* Hub pill: 8px nowrap — una sola línea, overflow:hidden evita que el track crezca */
    .tr-flow-cross .tp-fn-hub-pill {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    /* min-width:0 fuerza los items laterales a respetar su track minmax(0,1fr) */
    .tr-flow-cross .tp-fn-clientes,
    .tr-flow-cross .tp-fn-contexto { min-width: 0 !important; }
    /* Nombres en nodos laterales: wrap y centrado para que quepan en el ancho igual */
    .tp-fn-clientes .tp-fn-name,
    .tp-fn-contexto .tp-fn-name {
        font-size: 9px !important;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        line-height: 1.3;
    }
    .tr-ch-lbl { display: none !important; }
    .tr-ch-double, .tr-ch-single { gap: 3px; }
    /* Nodos compactos */
    .tp-fn-inner                { padding: 6px 4px !important; gap: 3px !important; overflow: hidden; }
    /* Hub: sin padding, estira el pill para que las líneas toquen su borde */
    .tp-fn-hub .tp-fn-inner     { padding: 0 !important; align-items: stretch !important; }
    .tp-fn-hub-pill             { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .tp-fn-name    { font-size: 11px !important; line-height: 1.3; }
    .tp-fn-icon-wrap { width: 20px !important; height: 20px !important; border-radius: 5px !important; }
    .tp-fn-svc-icon  { width: 18px !important; height: 18px !important; }
    .tp-fn-hub-orb   { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
    .tp-fn-hub-ai    { font-size: 11px !important; }
    .tp-fn-hub-pill  { font-size: 11px !important; white-space: nowrap; max-height: 48px !important; }
    .tp-fn-insights .tp-fn-inner,
    .tp-fn-gads .tp-fn-inner,
    .tp-fn-clientes .tp-fn-inner,
    .tp-fn-contexto .tp-fn-inner     { padding: 12px 8px !important; }
    .tp-fn-badge     { display: none !important; }
    /* Conectores compactos */
    .tp-cline-v      { min-height: 18px !important; }
    /* Puntos animados más pequeños */
    .tp-cline-h::after, .tp-cline-h::before { width: 5px !important; height: 5px !important; }
    .tp-cline-v::after, .tp-cline-v::before { width: 5px !important; height: 5px !important; }

    /* Proceso (merchant / multilocal): steps col pasa a 1 columna */
    .tp-how-layout--full .tp-steps-col,
    .tp-how .tp-how-layout--full .tp-steps-col {
        grid-template-columns: 1fr !important;
    }

    /* Resultados: stats grid → 1 col (necesita !important para sobreescribir inline style) */
    .tp-stats-grid,
    .tm-stats-3 {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 14px !important;
    }
    .tp-stat-val { font-size: clamp(28px, 7vw, 44px); }
    .tp-stat { padding: 24px 20px; }

    /* Fila de CTAs (resultados y otras secciones): apilados y content-sized */
    .tp-cta-row {
        flex-direction: column;
        align-items: center;
        gap: .75rem;
    }
    .tp-cta-row .smas-btn-lime,
    .tp-cta-row .tp-ghost-btn { width: auto !important; }

    /* Upsell: contenido centrado y botones content-sized en mobile */
    .tm-upsell-inner { text-align: center; justify-items: center; }
    .tm-upsell-q, .tm-upsell-desc { text-align: center; }
    .tm-upsell-ctas { align-items: center !important; justify-content: center; }
    .tm-upsell-inner > .smas-btn-lime { width: auto !important; justify-self: center; align-self: center; }

    /* Form */
    .tp-form-inner { grid-template-columns: 1fr; gap: 2rem; }
    .tp-checks { gap: .5rem; }

    /* Audience grid */
    .tp-aud-grid { grid-template-columns: 1fr; }

    /* Case study */
    .tp-case { flex-direction: column !important; gap: 1rem; padding: 20px; }
}

@media (max-width: 480px) {
    .tp-h1 { font-size: clamp(24px, 7.5vw, 36px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   FRANQUICIAS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fq-hero  { padding: 110px 5% 80px; min-height: auto; overflow: visible; }
    .fq-heading { max-width: 100%; }
    .fq-hero-p  { font-size: 14px; }
    .fq-hero-ctas { flex-direction: column; align-items: center; gap: 10px; }
    .fq-hero-ctas a { width: 100%; max-width: 300px; justify-content: center; }

    .fq-proc-inner { padding: 0 5%; }
    .fq-proc-grid  { grid-template-columns: 1fr; gap: 16px; }
    .fq-proc-card  { padding: 22px 20px; }

    .fq-res-inner  { padding: 0 5%; }
    .fq-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    .fq-aud-inner { padding: 0 5%; }
    .fq-aud-grid  { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
    .fq-stats-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PARTNERS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ptr-hero   { padding: 110px 5% 80px; min-height: auto; overflow: visible; }
    .ptr-heading { max-width: 100%; }
    .ptr-hero-p  { font-size: 14px; }
    .ptr-hero-ctas { flex-direction: column; align-items: center; gap: 10px; }
    .ptr-hero-ctas a { width: 100%; max-width: 300px; justify-content: center; }

    .ptr-como-inner { padding: 0 5%; }
    .ptr-como-steps { grid-template-columns: 1fr; gap: 12px; }
    /* Card: grid de 3 cols (ícono | número | título) + descripción abajo */
    .ptr-como-step  {
        display: grid !important;
        grid-template-columns: 44px 36px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        text-align: left;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.07);
        border-radius: 16px;
    }
    .ptr-como-icon     { grid-column: 1; grid-row: 1; width: 44px !important; height: 44px !important; }
    .ptr-como-icon svg { width: 18px !important; height: 18px !important; }
    .ptr-como-num      { grid-column: 2; grid-row: 1; font-size: 20px !important; letter-spacing: -1px; line-height: 1; margin: 0; }
    .ptr-como-step h3  { grid-column: 3; grid-row: 1; font-size: 14px; margin: 0; }
    .ptr-como-step p   { grid-column: 1 / -1; grid-row: 2; margin: 0; }

    .ptr-types-inner { padding: 0 5%; }
    .ptr-types-grid  { grid-template-columns: 1fr; gap: 14px; }

    .ptr-ben-inner { padding: 0 5%; }
    .ptr-ben-grid  { grid-template-columns: 1fr; gap: 14px; }

    .tp-form-inner { grid-template-columns: 1fr !important; gap: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   NOSOTROS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hero */
    .nos-hero { padding: 110px 5% 64px; }
    /* Ocultar diagrama SVG complejo */
    .na-diagram { display: none !important; }
    /* Grids */
    .net-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .npv-grid { grid-template-columns: 1fr !important; }
    /* Nuestra Operación: 1 columna (!important sobreescribe inline style) */
    .no-stats { grid-template-columns: 1fr !important; justify-content: unset !important; }
    /* Nuestra Esencia: 1 columna (!important sobreescribe inline style) */
    .nv-grid  { grid-template-columns: 1fr !important; }
    /* Paddings generales de secciones de nosotros */
    .na-copy-sec,
    .na-team,
    .na-values,
    .na-network,
    .na-careers { padding: 64px 5%; }
    /* Cards equipo */
    .na-team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    /* Values */
    .na-val-grid  { grid-template-columns: 1fr; gap: 16px; }
    /* Stats */
    .na-stats { flex-wrap: wrap; gap: 1rem; }
    .na-stat  { flex: 0 0 calc(50% - .5rem); }
}
@media (max-width: 480px) {
    .net-grid     { grid-template-columns: 1fr !important; }
    .na-team-grid { grid-template-columns: 1fr; }
    .na-stat      { flex: 0 0 100%; }
}

/* ═══════════════════════════════════════════════════════════
   RECURSOS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hero archivo */
    .smr-arc-hero        { padding: 108px 5% 72px; min-height: auto; }
    .smr-arc-hero__inner { max-width: 100%; }
    .smr-arc-hero__title { font-size: clamp(28px, 8vw, 52px); }

    /* Filter nav — scroll horizontal si son muchos items */
    .smr-filter-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 4px;
        gap: 8px;
    }
    .smr-filter-nav::-webkit-scrollbar { display: none; }
    .smr-filter-nav a { flex-shrink: 0; font-size: 13px; padding: 8px 14px; }

    /* Grids */
    .smr-type-grid { grid-template-columns: 1fr; }
    .smr-grid      { grid-template-columns: 1fr; }

    /* Secciones */
    .smr-architecture,
    .smr-featured-strip,
    .smr-arc-grid-section { padding: 64px 5%; }

    /* Single */
    .smr-single__hero    { padding: 36px 20px 28px; }
    .smr-single__content,
    .smr-single__cta     { padding-left: 20px; padding-right: 20px; }

    /* Hero recursos principal */
    .smr-hero-sm { padding: 110px 5% 56px; }
    .smr-hero-sm__inner { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PLATAFORMAS (anuncios, reputación, store locator)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Panel campaign visual — ocultar o reducir */
    .tp-visual .pan-panel { max-height: 340px; overflow: hidden; }
    /* pan-feat-grid */
    .pan-feat-grid { grid-template-columns: 1fr !important; }
    /* Store locator */
    .psl-map-preview { height: 220px !important; }
    /* Reputacion inbox */
    .prp-inbox { max-height: 300px; }
}

/* ═══════════════════════════════════════════════════════════
   SOLUCIONES — hero y secciones
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hero */
    .sol-hero,
    .page-soluciones section:first-child { padding: 100px 5% 64px; }

    /* Rb layout (2 cols) */
    .rb-layout { grid-template-columns: 1fr; }

    /* Bento on soluciones */
    .bento { grid-template-columns: 1fr; }

    /* Secciones generales soluciones */
    .arq, .dem, .plat, .ind, .prod,
    .nb, .dbf { padding: 64px 5%; }
    .arq { padding: 64px 5% !important; }
}

/* ─── HOME: Formulario demo (sección .db) ─────────────────── */
@media (max-width: 768px) {
    .db { padding: 56px 5% !important; }
    .db-form { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   WPForms — formularios responsivos
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .searchmas-demo-card .wpforms-field-container { grid-template-columns: 1fr !important; }
    .wpforms-submit-container { text-align: center; }
    .wpforms-submit { width: 100%; max-width: 300px; }
}

/* ═══════════════════════════════════════════════════════════
   UTILS — reveal / scroll
   ═══════════════════════════════════════════════════════════ */
/* Quitar max-width 100vw de cualquier sección que pueda causar overflow */
@media (max-width: 768px) {
    section, .section, main, article {
        max-width: 100vw;
        box-sizing: border-box;
    }
    /* Imágenes nunca wider que su contenedor */
    img { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════
   SOLUCIONES — dem-grid slider + dots
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .dem-grid {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 6% 1rem;
        margin: 0 -6%;
        scrollbar-width: none;
    }
    .dem-grid::-webkit-scrollbar { display: none; }
    .dem-card {
        flex: 0 0 80vw;
        scroll-snap-align: start;
    }
    .dem-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 1.25rem;
    }
}
@media (min-width: 481px) {
    .dem-dots { display: none; }
}

@media (min-width: 769px) {
    .proc-dots { display: none; }
}

/* Shared dot styles — proc (home) and dem (soluciones) */
@media (max-width: 768px) {
    .proc-dots span,
    .dem-dots span {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 100px;
        background: rgba(0, 0, 0, .15);
        cursor: pointer;
        transition: width .25s, background .25s;
    }
    .proc-dots span.is-active,
    .dem-dots span.is-active {
        width: 18px;
        background: linear-gradient(90deg, #00F2FF, #CCFF00);
    }
}