@charset "UTF-8";
/* MiAguas · estilos del mapa (antes iban dentro de index.html). */

/* ===== bloque 1 de 3 ===== */
  .ic-l{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.2em;flex-shrink:0;}
  .prod-ph .ic-l,.promo-img-ph .ic-l,.res-icono .ic-l,.plzProdIco .ic-l,.plzIcono .ic-l{width:46%;height:46%;stroke:#fff;}
  :root{
    --fondo:#f0f5fb;
    --acento:#1a6fd4;      /* azul miaguas */
    --acento2:#3a9fe8;
    --ambar:#F2A33C;
    --texto:#0d2340;
    --suave:#7a96b5;
    --panel:#FFFFFF;
    --borde:#d0e2f5;
  }
  html.tema-ellas{
    --fondo:#f5f0fb;
    --acento:#8b5cf6;      /* morado — vitrina de negocios de mujeres */
    --acento2:#a78bfa;
    --borde:#e3d9f7;
  }
  html.tema-promos{
    --fondo:#fbf0f0;
    --acento:#e23b3b;      /* rojo — vitrina Las Promos de Ags */
    --acento2:#c92a2a;
    --borde:#f7d9d9;
  }
  html.tema-colosio{
    --fondo:#fdf6ef;
    --acento:#e8590c;      /* naranja — directorio del bulevar Colosio */
    --acento2:#c74a06;
    --borde:#f8ddc4;
  }
  /* ══ Vitrinas con cara propia: se apaga todo lo que es identidad de MiAguas ══
     El mapa y la ficha del negocio se quedan; lo que se va es la marca ajena:
     pestañas del ecosistema, Daniela, Tour Dorado, publicidad e "info".
     Va sobre .vitrina-propia y no sobre cada tema, para que la siguiente
     vitrina herede el apagado en vez de volver a listar los ids. */
  html.vitrina-propia #navEcosistema,
  html.vitrina-propia #navTourDorado,
  html.vitrina-propia #navDaniela,
  html.vitrina-propia #navPublicidad,
  html.vitrina-propia #navInfo,
  html.vitrina-propia #agente-fab,
  html.vitrina-propia #agente-tooltip,
  html.vitrina-propia #tourPill,
  html.vitrina-propia #tourCard,
  html.vitrina-propia .banner-pub{ display:none !important; }
  /* Publicidad apagada en el mapa (1 oct 2026): el botón del menú, el banner
     flotante y su galería no se usan. Se ocultan en vez de borrarse porque el
     JS los busca por id sin revisar si existen. */
  #navTourDorado,   /* el tour volado por los dorados: fuera de la barra (oct 2026) */
  #navPublicidad, #bannerPub, .banner-pub,
  .pub-modal, .pub-modal-backdrop{ display:none !important; }
  /* Barra de MiAguas con los colores del admin: azul que baja a marino con brillo agua.
     Las vitrinas (Ellas, Promos, Colosio…) conservan su color propio. */
  html:not(.vitrina-propia) .navbar-app{
    background:radial-gradient(120% 28% at 100% 0%,rgba(22,181,201,.55),transparent 70%),
               radial-gradient(140% 22% at 0% 100%,rgba(58,159,232,.35),transparent 70%),
               linear-gradient(180deg,#1a6fd4 0%,#123160 55%,#0b1f3a 100%) !important;
    box-shadow:4px 0 26px rgba(11,31,58,.35), inset -1px 0 0 rgba(255,255,255,.10) !important;
  }
  @media (max-width:640px){
    html:not(.vitrina-propia) .navbar-app{
      background:radial-gradient(40% 140% at 100% 0%,rgba(22,181,201,.5),transparent 70%),
                 linear-gradient(100deg,#1a6fd4 0%,#123160 60%,#0b1f3a 100%) !important;
      box-shadow:0 -6px 22px rgba(11,31,58,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }
  }
  html.tema-promos .navbar-app{
    box-shadow:4px 0 26px rgba(226,59,59,.30), inset -1px 0 0 rgba(255,255,255,.12);
  }
  html.tema-colosio .navbar-app{
    box-shadow:4px 0 26px rgba(232,89,12,.30), inset -1px 0 0 rgba(255,255,255,.12);
  }
  /* El desplegable de filtros salia encima del logo de marca. Se baja para
     que arranque debajo de la fila del logo en vez de taparla. */
  @media (min-width:641px){
    html.vitrina-propia .navbar-item-wrap.abierto .navbar-dropdown{ top:52px; }
  }
  #tintEllas{display:none;position:fixed;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(ellipse at 50% 30%, #a78bfa 0%, #7c3aed 65%, #5b21b6 100%);
    opacity:.55;mix-blend-mode:overlay;}
  html.tema-ellas #tintEllas{display:block;}

  /* ══ Buscador flotante inferior (mismo estilo que tienda.php/productos.php) ══ */
  .mapa-float-buscar{
    position:fixed; left:0; right:0; bottom:16px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    justify-content:center; z-index:32; padding:0 16px;
    pointer-events:none;
  }
  .mapa-float-buscar form{
    width:100%; max-width:480px; background:#fff; border-radius:30px;
    box-shadow:0 4px 12px rgba(0,0,0,.12), 0 12px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04);
    display:flex; align-items:center;
    padding:6px 6px 6px 18px; gap:8px; border:1px solid #eee;
    pointer-events:auto;
  }
  .mapa-float-buscar input[type=text]{
    flex:1; border:none; outline:none; font-family:inherit;
    font-size:.9rem; background:transparent; color:#1a1a1a;
  }
  .mapa-float-buscar form button{
    width:42px; height:42px; border-radius:50%; border:none;
    background:var(--acento,#1a6fd4); color:#fff; display:flex;
    align-items:center; justify-content:center; font-size:1rem; cursor:pointer; flex-shrink:0;
  }
  .mapa-float-quitar{
    display:none; align-items:center; gap:6px; background:#fff; color:#e23b3b;
    border:1px solid #f3c9c9; border-radius:50px; padding:7px 16px;
    font-family:inherit; font-weight:700; font-size:.8rem;
    box-shadow:0 4px 12px rgba(0,0,0,.1); cursor:pointer; pointer-events:auto;
  }
  .mapa-float-quitar:hover{ background:#fef2f2; }
  /* Es el único "Quitar filtros" que queda: rojo sólido para que se vea. */
  .mapa-float-quitar{ background:#e03131 !important; color:#fff !important; border-color:#e03131 !important;
    box-shadow:0 4px 14px rgba(224,49,49,.35) !important; font-weight:800 !important; }
  .mapa-float-quitar:hover{ background:#c92a2a !important; }
  /* Arriba a la izquierda ya no va nada en MiAguas: el inicio está en la
     casita de la barra y "Quitar filtros" quedó abajo. En las vitrinas
     (Ellas, Colosio…) se deja su logo, que es su marca. */
  .top-izq .btn-quitar-mini{ display:none !important; }
  html:not(.vitrina-propia):not(.tema-ellas) .top-izq{ display:none !important; }
  @media (max-width:640px){
    /* pegados a la orilla: el mapa se ve más */
    .mapa-float-buscar{ bottom:calc(8px + env(safe-area-inset-bottom, 0px)); gap:6px; }
  }

  /* ---------- Navegación simplificada en celular (chips de filtro) ---------- */
  .chips-filtro{
    display:flex; justify-content:center; gap:8px; width:100%; max-width:480px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 2px 4px; pointer-events:auto;
  }
  .chips-filtro::-webkit-scrollbar{display:none;}
  .chip-filtro{
    flex:0 0 auto; border:1px solid #e3e8ef; background:#fff; color:#1a1a1a;
    border-radius:999px; padding:8px 15px; font-family:inherit;
    font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
    box-shadow:0 2px 8px rgba(13,35,64,.12);
  }
  .chip-filtro.activo{ background:var(--acento,#1a6fd4); color:#fff; border-color:transparent; }
  /* Cada chip con el color de sus pines: puntito de color y, activo, relleno de ese color */
  .chip-filtro{ --chip:#1a6fd4; display:inline-flex; align-items:center; gap:6px; }
  .chip-productos{ --chip:#1a6fd4; } .chip-servicios{ --chip:#2f9e44; }
  .chip-comida{ --chip:#E8590C; }    .chip-promos{ --chip:#e03131; } .chip-club{ --chip:#5ec400; }
  .chip-productos::before,.chip-servicios::before,.chip-comida::before,.chip-promos::before,.chip-club::before{
    content:''; width:8px; height:8px; border-radius:50%; background:var(--chip); flex-shrink:0; }
  .chip-productos,.chip-servicios,.chip-comida,.chip-promos,.chip-club{ color:var(--chip); border-color:color-mix(in srgb, var(--chip) 35%, #fff); }
  .chip-filtro.activo.chip-productos,.chip-filtro.activo.chip-servicios,.chip-filtro.activo.chip-comida,
  .chip-filtro.activo.chip-promos,.chip-filtro.activo.chip-club{ background:var(--chip); color:#fff; border-color:transparent; }
  .chip-filtro.activo::before{ background:#fff; }
  /* Favoritos: chip rosa, sale solo cuando el visitante ya guardó alguno */
  .chip-favs{ --chip:#e64980; color:var(--chip); border-color:color-mix(in srgb, var(--chip) 35%, #fff); }
  .chip-favs::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--chip); flex-shrink:0; }
  .chip-filtro.activo.chip-favs{ background:var(--chip); color:#fff; border-color:transparent; }
  /* En escritorio no hay dedo para recorrer los chips: flechas + arrastre */
  .chips-wrap{ position:relative; display:flex; align-items:center; width:100%; max-width:480px; pointer-events:auto; }
  .chips-wrap .chips-filtro{ max-width:none; }
  .chips-wrap .chips-filtro.desborda{ justify-content:flex-start; }
  .chips-wrap.arrastrando .chips-filtro{ cursor:grabbing; }
  .chips-flecha{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:none;
    width:30px; height:30px; border-radius:50%; border:1px solid #e3e8ef; background:#fff;
    color:#0d2340; font-family:inherit; font-size:15px; font-weight:900; line-height:1; cursor:pointer;
    box-shadow:0 2px 10px rgba(13,35,64,.20);
  }
  .chips-flecha.visible{ display:flex; align-items:center; justify-content:center; }
  .chips-flecha.izq{ left:-6px; }
  .chips-flecha.der{ right:-6px; }
  @media (max-width:640px){ .chips-flecha{ display:none !important; } }
  .chip-lista{
    display:none; align-items:center; gap:8px; pointer-events:auto;
    text-decoration:none; font-family:inherit; font-size:13px; font-weight:800; color:#fff;
    background:var(--acento,#1a6fd4); border-radius:999px; padding:9px 17px;
    box-shadow:0 4px 14px rgba(13,35,64,.22); white-space:nowrap; max-width:100%;
  }
  .chip-lista:hover{ filter:brightness(1.07); }

  /* ---------- Banner de marca de la vitrina (Las Promos / Colosio) ---------- */
  .banner-vitrina{
    display:none; align-items:center; gap:10px; pointer-events:auto;
    width:100%; max-width:480px; box-sizing:border-box;
    padding:9px 10px 9px 12px; border-radius:16px; color:#fff;
    box-shadow:0 8px 22px rgba(13,35,64,.28);
  }
  html.vitrina-propia .banner-vitrina{ display:flex; }
  html.vitrina-propia .chip-lista{ display:none !important; }   /* el banner ya lleva "Ver en lista" */
  .banner-vitrina img{ height:26px; width:auto; border-radius:6px; background:#fff; padding:2px 4px; flex-shrink:0; }
  .banner-vitrina .bv-txt{ flex:1; min-width:0; line-height:1.15; }
  .banner-vitrina .bv-tit{ font-size:12.5px; font-weight:900; letter-spacing:.01em; }
  .banner-vitrina .bv-sub{ font-size:10.5px; font-weight:600; opacity:.92;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .banner-vitrina .bv-btn{
    flex-shrink:0; display:flex; align-items:center; gap:6px; text-decoration:none;
    background:#fff; color:#c92a2a; font-family:inherit; font-size:12px; font-weight:900;
    border-radius:999px; padding:9px 14px; box-shadow:0 3px 10px rgba(0,0,0,.18);
  }
  .banner-vitrina .bv-btn:hover{ filter:brightness(.97); }
  @media (max-width:640px){
    /* en celular el banner va hasta abajo, debajo del buscador */
    .banner-vitrina{ order:9; }
    .banner-vitrina .bv-sub{ display:none; }
    .banner-vitrina .bv-btn{ padding:9px 12px; font-size:11.5px; }
  }
  @media (max-width:640px){
    .chips-filtro{ justify-content:flex-start; }   /* en cel se recorren con el dedo */
    /* (el de abajo ya es el único Quitar filtros: se ve también en celular) */
  }
  /* Un solo buscador en todos los tamaños: el de abajo. El de arriba ya sobraba. */
  .top-izq .mini-buscador{ display:none !important; }

  /* Celular: cuando se abre un menú o un listado (Categorías, Negocios,
     Filtros, la lista de promos), el logo y "Quitar filtros" de arriba se
     les encimaban. Mientras está abierto, se quitan de en medio. */
  @media (max-width:640px){
    body:has(.hmenu.visible) .top-izq,
    body:has(.eco-menu.visible) .top-izq,
    body:has(#comparador.visible) .top-izq,
    body:has(.navbar-item-wrap.abierto) .top-izq{ display:none; }
  }
  /* Quitar filtros es un deshacer, no la acción principal: deja de gritar */
  .btn-quitar-mini{
    background:#fff !important; color:#5b6b7f !important;
    border:1px solid #dfe5ec !important; font-weight:700 !important;
    box-shadow:0 2px 8px rgba(13,35,64,.10) !important;
  }
  .btn-quitar-mini:hover{ background:#f4f7fa !important; }
  /* …pero cuando SÍ hay filtro o búsqueda, se pone rojo para que se note
     que el mapa está recortado y cómo regresar a todo. */
  .btn-quitar-mini.hay-filtro{ background:#e03131 !important; color:#fff !important; border-color:#e03131 !important;
    box-shadow:0 4px 14px rgba(224,49,49,.35) !important; }
  .btn-quitar-mini.hay-filtro:hover{ background:#c92a2a !important; }
  /* Las cejas del ecosistema salen del mapa en todos los tamaños: la entrada
     son los chips + el botón de lista. El ecosistema completo sigue en el
     globo 🌐 de la barra de navegación. */
  html:not(.vitrina-propia) .eco-tabs{ display:none !important; }

  /* Con un panel abierto, el buscador flotante y los chips estorban encima */
  body.hay-panel .mapa-float-buscar{ opacity:0; pointer-events:none; visibility:hidden; }

  /* arriba de la barra de navegación móvil */
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;overflow:hidden;
    background:var(--fondo);
    font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;color:var(--texto);}
  /* La imagen de fondo de siempre (292 KB) solo se pide cuando de verdad se
     va a ver: en pantalla grande y si hoy NO hay portada programada. Con
     portada queda tapada, así que antes se bajaba para nada. El <head> pone
     la clase con-fondo cuando toca. En celular nunca se usa. */
  @media (min-width:641px){
    html.con-fondo, html.con-fondo body{background:var(--fondo) url('/img/fondo-1920.webp') center/cover no-repeat fixed;}
  }
  #mapa{position:fixed;inset:0;touch-action:none;}
  .maplibregl-canvas-container.maplibregl-interactive,
  .maplibregl-canvas{cursor:grab;touch-action:none;}
  .maplibregl-canvas-container.maplibregl-interactive:active,
  .maplibregl-canvas:active{cursor:grabbing;}

  /* ---------- Barra de navegación: columna en escritorio, fila abajo en celular ---------- */
  .navbar-app{
    position:fixed;z-index:20;left:0;top:0;bottom:0;width:68px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--acento) 82%, #fff) 0%, var(--acento) 45%, color-mix(in srgb, var(--acento) 70%, #000) 100%);
    border-right:none;
    display:flex;flex-direction:column;align-items:center;
    padding:16px 0 14px;gap:8px;
    box-shadow:4px 0 26px rgba(0,71,236,.35), inset -1px 0 0 rgba(255,255,255,.12);
  }
  .navbar-item{
    position:relative;width:46px;height:46px;border-radius:14px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:none;cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;
  }
  .navbar-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,20,60,.35));}
  .navbar-item--foto{padding:5px;background:none;}
  .navbar-item--foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 3px rgba(255,255,255,.12);}
  .navbar-item:hover,.navbar-item:focus-visible{
    background:rgba(255,255,255,.16);color:#fff;outline:none;
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 6px 16px rgba(0,20,70,.35), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 18px rgba(120,180,255,.55);
  }
  .navbar-item.activo{
    background:#fff;color:var(--acento);
    box-shadow:0 4px 14px rgba(0,10,40,.3), 0 0 22px rgba(160,205,255,.85);
  }
  .navbar-item--sesion{margin-top:auto;}
  .navbar-item-lbl{display:none;}

  /* Desplegable de "Filtros" (Categorías/Negocios/Filtros/Promos) anclado al ícono */
  .navbar-item-wrap{position:relative;flex-shrink:0;}  .navbar-item-wrap .navbar-item{width:46px;height:46px;}
  .navbar-dropdown{
    position:absolute;left:100%;top:0;margin-left:10px;z-index:40;
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    opacity:0;pointer-events:none;transform:translateX(-8px) scale(.94);transform-origin:top left;
    transition:all .2s cubic-bezier(.2,.8,.2,1);
  }
  .navbar-item-wrap.abierto .navbar-dropdown{opacity:1;pointer-events:auto;transform:translateX(0) scale(1);}
  .navbar-item-wrap.abierto .navbar-item{
    background:#fff;color:var(--acento);
    box-shadow:0 4px 14px rgba(0,10,40,.3), 0 0 22px rgba(160,205,255,.85);
  }
  .navbar-dd-item{
    display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--borde);
    border-radius:999px;padding:9px 16px 9px 12px;font-size:13px;font-weight:800;color:var(--texto);
    cursor:pointer;box-shadow:0 4px 14px rgba(13,35,64,.16);white-space:nowrap;font-family:inherit;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  }
  .navbar-dd-item:hover{background:#EAF3FF;border-color:#0067ec;transform:translateX(3px);box-shadow:0 6px 18px rgba(0,103,236,.25);}
  .navbar-dd-ico{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;}
  .navbar-dd-ico svg{width:18px;height:18px;stroke:var(--acento,#1a6fd4);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  .navbar-dd-item[data-fab="quitar"] .navbar-dd-ico svg{stroke:#e03131;}
  @media (max-width:640px){
    .navbar-dropdown{
      position:fixed;left:12px;right:12px;top:70px;bottom:auto;margin:0;
      align-items:stretch;
      transform:translateY(-8px) scale(.97);transform-origin:top center;
    }
    .navbar-dd-item{justify-content:center;}
    .navbar-item-wrap.abierto .navbar-dropdown{transform:translateY(0) scale(1);}
  }
  @media (max-width:640px){
    .navbar-app{
      left:0;right:0;top:0;bottom:auto;width:100%;height:60px;z-index:20;
      flex-direction:row;justify-content:space-around;align-items:center;
      padding:6px 6px;border-right:none;border-top:none;
      background:linear-gradient(180deg, color-mix(in srgb, var(--acento) 82%, #fff) 0%, var(--acento) 45%, color-mix(in srgb, var(--acento) 70%, #000) 100%);
      box-shadow:0 6px 22px rgba(0,71,236,.20), inset 0 -1px 0 rgba(255,255,255,.12);
    }
    .navbar-item{width:44px;height:44px;} .navbar-item-wrap .navbar-item{width:44px;height:44px;}
    .navbar-item:hover{transform:translateY(-3px) scale(1.06);}
    .navbar-item--sesion{margin-top:0;}
    /* No caben todos los íconos: la fila se recorre con el dedo (y con las
       flechas de abajo). Sin brinco al pasar el dedo, porque la fila con
       scroll recorta lo que se sale hacia arriba. */
    .navbar-app{
      justify-content:flex-start;gap:6px;padding:6px 10px;
      overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;scroll-behavior:smooth;
    }
    .navbar-app::-webkit-scrollbar{display:none;}
    .navbar-app > *{flex-shrink:0;}
    .navbar-item:hover{transform:none;}
    .navbar-item-wrap{width:44px;height:44px;flex-shrink:0;}
    }
  /* Flechas de la fila de íconos (solo celular y solo si hay más de un lado) */
  .nav-flecha{
    position:fixed;top:14px;z-index:21;width:30px;height:32px;border:none;
    display:none;align-items:center;justify-content:center;cursor:pointer;
    color:#0d2340;font-size:18px;font-weight:900;line-height:1;font-family:inherit;padding:0;
  }
  .nav-flecha.izq{left:0;border-radius:0 12px 12px 0;
    background:linear-gradient(90deg,#fff 55%,rgba(255,255,255,0));}
  .nav-flecha.der{right:0;border-radius:12px 0 0 12px;
    background:linear-gradient(270deg,#fff 55%,rgba(255,255,255,0));}
  @media (max-width:640px){ .nav-flecha.visible{display:flex;} }

  /* ---------- Overlay de búsqueda a pantalla completa (pantallita negra) ---------- */
  .buscar-overlay{
    position:fixed;inset:0;z-index:500;background:rgba(6,14,24,.94);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .buscar-overlay.visible{opacity:1;pointer-events:auto;}
  .buscar-overlay-x{
    position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
    border:none;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .buscar-overlay-x:hover{background:rgba(255,255,255,.22);}
  .buscar-overlay-box{
    display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
    padding:6px 6px 6px 20px;width:min(560px,92vw);height:60px;
    box-shadow:0 22px 55px rgba(0,0,0,.4);
  }
  .buscar-overlay-box .lupa{display:flex;flex-shrink:0;}
  .buscar-overlay-box .lupa svg{width:20px;height:20px;stroke:var(--acento);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .buscar-overlay-box input{flex:1;min-width:0;border:none;outline:none;font-size:16px;font-family:inherit;background:transparent;color:var(--texto);}
  .buscar-overlay-box .ir{
    border:none;background:linear-gradient(135deg,var(--acento),var(--acento2));color:#fff;
    width:48px;height:48px;border-radius:50%;cursor:pointer;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .buscar-overlay-box .ir svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .buscar-overlay-box .ir:hover{filter:brightness(1.06);}
  /* mientras el overlay está abierto, el dropdown de resultados (ya existente) se pinta encima */
  body.buscar-abierto #resultados{z-index:501;}

  /* ---------- Marca flotante (arriba, mínima estilo DiDi) ---------- */
  .top-izq{position:fixed;top:14px;left:14px;z-index:22;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
  @media (min-width:641px){ .top-izq{left:82px;} }
  @media (max-width:640px){ .top-izq{top:74px;} }
  .marca-flot{
    background:#fff;border:1px solid var(--borde);border-radius:12px;
    padding:6px 12px;box-shadow:0 2px 10px rgba(13,35,64,.08);
    display:flex;align-items:center;gap:8px;
  }
  .marca-img{height:28px;display:block;}
  .marca-fila{display:flex;align-items:center;gap:8px;}
  .mini-buscador{
    display:flex;align-items:center;gap:7px;flex-shrink:0;
    background:#fff;border:1px solid var(--borde);border-radius:999px;
    padding:0 14px;height:40px;width:280px;max-width:60vw;
    box-shadow:0 2px 10px rgba(13,35,64,.08);
  }
  .mini-buscador:focus-within{border-color:var(--acento);}
  .mini-buscador svg{width:16px;height:16px;stroke:var(--acento);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .mini-buscador input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--texto);}
  .mini-buscador input::placeholder{color:var(--suave);}
  @media (max-width:640px){ .mini-buscador{width:160px;max-width:52vw;} }
  .btn-quitar-mini{
    flex-shrink:0;border:none;cursor:pointer;white-space:nowrap;
    background:#e03131;color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;
    padding:0 16px;height:40px;border-radius:999px;
    box-shadow:0 4px 14px rgba(224,49,49,.3);
  }
  .btn-quitar-mini:hover{background:#c92a2a;}
  /* En una vitrina el rojo fijo es marca de otro sitio: toma el acento del tema.
     MiAguas y /ellas se quedan con su rojo de siempre. */
  html.vitrina-propia .btn-quitar-mini{
    background:var(--acento); box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  html.vitrina-propia .btn-quitar-mini:hover{ background:var(--acento2); }
  @media (max-width:640px){ .btn-quitar-mini{padding:0 12px;font-size:11.5px;} }
  .marca-flot .ver{font-size:9px;color:var(--suave);font-weight:700;align-self:flex-end;}
  .btn-abrir-hoja{
    flex-shrink:0;width:40px;height:40px;border-radius:50%;
    background:#fff;border:1px solid var(--borde);box-shadow:0 2px 10px rgba(13,35,64,.08);
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:var(--acento);cursor:pointer;
  }
  .btn-abrir-hoja:hover{background:#F0F6FB;}
  .btn-abrir-hoja:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}

  /* ---- Bolita de filtros rápidos (speed-dial) ---- */
  .fab-filtros{position:relative;flex-shrink:0;}
  .fab-main{width:40px;height:40px;border-radius:50%;background:#1a6fd4;border:none;
    box-shadow:0 2px 10px rgba(13,35,64,.18);display:flex;align-items:center;justify-content:center;
    color:#fff;cursor:pointer;transition:background .2s,transform .2s;}
  .fab-filtros.abierto .fab-main{background:#0d2340;transform:scale(1.05);}
  .fab-acciones{position:absolute;top:48px;left:0;transform:translateY(-8px) scale(.92);transform-origin:top left;
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;opacity:0;pointer-events:none;
    transition:all .22s cubic-bezier(.2,.8,.2,1);z-index:30;}
  .fab-filtros.abierto .fab-acciones{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .fab-mini{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--borde);
    border-radius:999px;padding:8px 14px 8px 11px;font-size:13px;font-weight:800;color:var(--texto);
    cursor:pointer;box-shadow:0 4px 14px rgba(13,35,64,.16);white-space:nowrap;font-family:inherit;}
  .fab-mini:hover{background:#F0F6FB;border-color:#bcd6f3;}
  .fab-mini b{font-size:15px;}

  /* ---------- Hoja inferior (estilo DiDi) ---------- */
  .hoja-backdrop{
    display:none !important;
    position:fixed;inset:0;z-index:24;background:rgba(13,35,64,.28);
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .hoja-backdrop.visible{opacity:1;pointer-events:auto;}
  .hoja-inferior{
    display:none !important;
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:29;
    background:#fff;border-radius:22px 22px 0 0;
    box-shadow:0 -10px 34px rgba(13,35,64,.20);
    padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px));
    flex-direction:column;gap:10px;
    margin:0;
  }
  .hoja-manija{width:130px;background:none;margin:0 auto;cursor:pointer;text-align:center;padding:2px 0 1px;order:0;}
  .hoja-manija::before{content:'';display:block;width:38px;height:5px;border-radius:3px;background:var(--borde);margin:0 auto;transition:background .2s;}
  .hoja-manija::after{content:'▲ Menú · buscar y filtros';display:inline-block;font-size:10.5px;font-weight:800;color:#ffffff;background:#e03131;letter-spacing:.05em;margin-top:3px;padding:3px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(224,49,49,.35);animation:pistaMenu 2.2s ease-in-out infinite;}
  @keyframes pistaMenu{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-2px);opacity:1}}
  @media (prefers-reduced-motion: reduce){.hoja-manija::after{animation:none;}}
  .hoja-busca-cabeza{cursor:pointer;}
  .hoja-busca-sub{font-size:12px;color:#2f9e44;font-weight:700;margin:6px 2px 0;}
  .hoja-fila-botones{display:none;}
  .hoja-cuerpo{
    overflow:hidden;max-height:0;opacity:0;
    display:flex;flex-direction:column;gap:12px;
    transition:max-height .35s cubic-bezier(.2,.8,.2,1), opacity .25s, margin-top .35s;
  }
  .hoja-inferior.expandida .hoja-cuerpo{max-height:62vh;opacity:1;overflow-y:auto;margin-top:2px;}
  .hoja-inferior.expandida .hoja-manija::before{background:var(--acento);}
  .hoja-inferior.expandida .hoja-manija::after{content:'▼ Cerrar';animation:none;background:#7d8a99;box-shadow:none;}
  @media (max-width:640px){ .hoja-inferior{bottom:0;} }

  .fila1{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .espacio{flex:1;}
  .fila-busqueda{position:relative;}

  .buscador{
    display:flex;align-items:center;gap:8px;
    background:#fff;border:2px solid #076fcc;border-radius:50px;
    padding:4px 4px 4px 16px;box-shadow:0 2px 10px rgba(13,35,64,.08);
  }
  .buscador svg{width:18px;height:18px;stroke:#076fcc;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .busca-row{display:flex;align-items:center;gap:9px;}
  .busca-row .buscador{flex:1;min-width:0;}
  .btn-limpiar{flex-shrink:0;width:46px;height:46px;border-radius:50%;
    border:2px solid #076fcc;background:#fff;color:#076fcc;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(13,35,64,.08);
    transition:background .15s,transform .1s;}
  .btn-limpiar svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}
  .btn-limpiar:hover{background:#eef6ff;}
  .btn-limpiar:active{transform:scale(.94);}
  .btn-buscar{
    flex-shrink:0;border:none;border-radius:50px;padding:9px 22px;cursor:pointer;
    background:linear-gradient(135deg,var(--acento),var(--acento2));
    color:#fff;font-family:inherit;font-size:13px;font-weight:800;
  }
  .btn-buscar:hover{filter:brightness(1.07);}
  .btn-buscar:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
  .buscador input{
    flex:1;background:none;border:none;outline:none;color:var(--texto);
    font-size:14px;font-family:inherit;
  }
  .buscador input::placeholder{color:#9AA7B5;}

  .filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    background:#F4F8FD;border:1px solid #E6EDF5;border-radius:14px;padding:8px;}
  .filtros::-webkit-scrollbar{display:none;}
  .chip{
    flex-shrink:0;padding:7px 14px;border-radius:999px;cursor:pointer;
    background:#fff;border:1px solid var(--borde);
    color:var(--texto);font-size:12.5px;font-weight:600;font-family:inherit;
    display:flex;align-items:center;gap:6px;box-shadow:0 1px 6px rgba(28,39,51,.06);
  }
  .chip .dot{width:8px;height:8px;border-radius:50%;}
  .chip.activo{background:var(--acento);color:#fff;border-color:var(--acento);}
  .chip.activo .dot{background:#fff !important;}
  .chip:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}


  /* ---------- Slider de tarjetas de negocios (flotante, fuera de la hoja) ---------- */
  .slider-negs-wrap{
    position:fixed;z-index:30;left:82px;right:14px;bottom:14px;
    display:flex;flex-direction:column;gap:6px;pointer-events:none;
  }
  .slider-negs-wrap > *{pointer-events:auto;}
  .slider-negs-wrap.oculto{display:none;}
  @media (max-width:640px){
    .slider-negs-wrap{left:0;right:0;top:auto;bottom:14px;padding:0 14px;}
  }
  .slider-neg-header{
    display:flex;align-items:center;gap:8px;
  }
  .slider-negs{
    display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
    background:#F4F8FD;border:1px solid #E6EDF5;border-radius:16px;
    padding:8px;
    align-self:flex-start;max-width:100%;
    box-shadow:0 2px 10px rgba(13,35,64,.05);
  }
  .slider-negs::-webkit-scrollbar{display:none;}
  @media (hover:hover) and (pointer:fine){
    .slider-negs{cursor:grab;scrollbar-width:thin;scrollbar-color:#c3d3e6 transparent;padding-bottom:12px;}
    .slider-negs:active{cursor:grabbing;}
    .slider-negs::-webkit-scrollbar{display:block;height:6px;}
    .slider-negs::-webkit-scrollbar-track{background:transparent;}
    .slider-negs::-webkit-scrollbar-thumb{background:#c3d3e6;border-radius:999px;}
    .slider-negs::-webkit-scrollbar-thumb:hover{background:#9fb6d1;}
  }
  .slider-neg-card{
    flex-shrink:0;display:flex;flex-direction:column;
    background:#fff;border:1px solid var(--borde);border-radius:13px;
    cursor:pointer;width:89px;padding:6px;
    box-shadow:0 4px 14px rgba(28,39,51,.12);
    transition:box-shadow .15s, transform .15s;
  }
  .slider-neg-card:hover{box-shadow:0 8px 22px rgba(28,39,51,.18);transform:translateY(-2px);}
  .slider-neg-card:active{transform:translateY(0);}
  .slider-neg-media{
    position:relative;width:100%;height:48px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .slider-neg-media img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff;display:block;}
  .slider-neg-media .ini{font-size:15px;font-weight:800;color:#fff;}
  .slider-neg-info{padding:6px 1px 0;min-width:0;}
  .slider-neg-cat{
    display:inline-block;font-size:7.5px;font-weight:800;
    padding:1.5px 5px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .slider-neg-nombre{margin-top:3px;font-size:9.5px;font-weight:700;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* ---------- Pastillas de ecosistema (se usan en la fila debajo de negocios Y en el panel del mundito) ---------- */
  .eco-fila-wrap{padding:2px 14px 10px;}
  .eco-fila{
    display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  .eco-fila::-webkit-scrollbar{display:none;}
  .eco-chip{
    flex-shrink:0;display:flex;align-items:center;gap:8px;
    padding:9px 15px 9px 9px;border-radius:999px;color:#fff;
    font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.01em;
    text-decoration:none;white-space:nowrap;border:none;cursor:pointer;
    box-shadow:0 5px 16px rgba(13,35,64,.22);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .eco-chip:hover,.eco-chip:focus-visible{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 22px rgba(13,35,64,.3);outline:none;}
  .eco-chip:active{transform:translateY(0) scale(.98);}
  .eco-chip-ico{
    width:24px;height:24px;border-radius:8px;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.28);font-size:12px;font-weight:900;
  }
  .eco-chip-ico img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:8px;}
  /* En el panel del mundito las pastillas van apiladas y a todo el ancho */
  .eco-panel-body{display:flex;flex-direction:column;gap:9px;}
  .eco-panel-body .eco-chip{width:100%;padding:13px 16px 13px 12px;font-size:13.5px;white-space:normal;}
  .eco-panel-body .eco-chip-ico{width:30px;height:30px;border-radius:9px;font-size:14px;}

  .contador{
    display:flex;align-items:center;gap:4px;
    background:#fff;border:1px solid var(--borde);border-radius:999px;
    padding:5px 12px;font-size:12px;
    box-shadow:0 2px 10px rgba(28,39,51,.1);
    width:fit-content;
  }
  .contador b{color:var(--acento);}
  .contador.oculto{display:none;}
  .pin-tooltip{
    position:fixed;z-index:25;pointer-events:none;
    display:flex;align-items:center;gap:10px;
    background:#fff;border:1px solid var(--borde);border-radius:14px;
    padding:8px 14px 8px 8px;box-shadow:0 8px 28px rgba(28,39,51,.18);
    opacity:0;transform:translate(-50%,-12px) scale(.96);
    transition:opacity .12s,transform .12s;
    max-width:240px;
  }
  .pin-tooltip.visible{opacity:1;transform:translate(-50%,-18px) scale(1);}
  .pin-tooltip-icono{
    width:46px;height:46px;border-radius:11px;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .pin-tooltip-icono img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .pin-tooltip-icono .ini{font-size:15px;font-weight:800;letter-spacing:.02em;}
  .pin-tooltip-info{min-width:0;}
  .pin-tooltip-nombre{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pin-tooltip-cat{font-size:11px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---------- Panel del agente ---------- */
  .panel{
    position:fixed;top:0;right:0;height:100%;width:min(370px,92vw);z-index:30;
    background:var(--panel);border-radius:26px 0 0 26px;overflow:hidden;
    transform:translateX(108%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(28,39,51,.22);
  }
  .panel.abierto{transform:translateX(0);}
  /* Pantalla oscura detrás del negocio: bloquea escoger otro negocio mientras uno está abierto */
  #negBackdrop{position:fixed;inset:0;z-index:29;background:rgba(13,24,38,.5);opacity:0;pointer-events:none;transition:opacity .3s;}
  #negBackdrop.visible{opacity:1;pointer-events:auto;}
  .panel-franja{height:6px;width:100%;}
  .panel-head{padding:18px 20px 14px;border-bottom:1px solid var(--borde);position:relative;flex-shrink:0;max-height:45vh;overflow-y:auto;}
  .panel-head .giro{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--suave);font-weight:700;}
  .panel-head h2{font-size:21px;font-weight:800;margin-top:3px;letter-spacing:-.01em;padding-right:36px;}
  .panel-head .dir{font-size:12px;color:var(--suave);margin-top:4px;}
  .panel-head .dir.dir-link{cursor:pointer;color:#1a6fd4;}
  .panel-head .dir.dir-link:hover{text-decoration:underline;}
  .panel-head-top{display:flex;align-items:center;gap:12px;padding-right:30px;}
  .panel-logo{width:84px;height:52px;border-radius:10px;object-fit:contain;border:1px solid var(--borde);background:#fff;padding:4px;flex:none;display:none;}
  .panel-logo.visible{display:block;}
  .panel-head-info{min-width:0;flex:1;}
  .cerrar{
    position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
    border:1px solid var(--borde);background:#fff;color:var(--texto);
    font-size:15px;cursor:pointer;line-height:1;
  }
  .cerrar:hover,.cerrar:focus-visible{background:#F0F3F8;outline:2px solid var(--acento);outline-offset:2px;}
  /* Agrandar el negocio: el panel lateral pasa a ventana centrada, como la
     ficha grande de admin_negocios. Solo en pantallas anchas: en el celular
     el panel ya ocupa casi todo. */
  .agrandar{
    position:absolute;top:14px;right:54px;width:32px;height:32px;border-radius:50%;
    border:1px solid var(--borde);background:#fff;color:var(--texto);
    font-size:15px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .agrandar:hover,.agrandar:focus-visible{background:#F0F3F8;outline:2px solid var(--acento);outline-offset:2px;}
  /* Corazón de favoritos: va en el renglón de la categoría, a la derecha del
     nombre. No se pone en la esquina porque ahí ya viven cerrar, agrandar y
     la bolita del asistente. */
  .fav-btn{
    float:right;margin:0 0 4px 8px;width:30px;height:30px;border-radius:50%;padding:0;
    border:1px solid var(--borde);background:#fff;color:#7a8aa0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .15s,color .15s,background .15s;
  }
  .fav-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .fav-btn:hover,.fav-btn:focus-visible{border-color:#e64980;color:#e64980;outline:none;}
  .fav-btn.guardado{color:#e64980;border-color:#f3b6cd;background:#fff0f6;}
  .fav-btn.guardado svg{fill:#e64980;}
  .fav-btn.pop{animation:favPop .35s ease;}
  @keyframes favPop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion: reduce){ .fav-btn.pop{animation:none;} }
  .panel.grande{
    top:3vh;right:auto;left:50%;height:94vh;width:min(1100px,94vw);
    border-radius:22px;transform:translate(-50%,110vh);
    box-shadow:0 30px 90px rgba(13,24,38,.35);
  }
  .panel.grande.abierto{transform:translate(-50%,0);}
  .panel.grande .panel-head h2{font-size:24px;}
  .panel.grande .panel-head-top{padding-right:80px;}
  @media (max-width:760px){ .agrandar{display:none;} }

  .chat{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;}
  .agente3d{position:relative;height:158px;flex:none;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 42%, rgba(26,111,212,.14) 0%, rgba(26,111,212,0) 62%);
    border-bottom:1px solid var(--borde);}
  .agente3d model-viewer{width:100%;height:158px;background:transparent;--poster-color:transparent;animation:respira 3.6s ease-in-out infinite;transform-origin:center 72%;}
  .agente3d model-viewer:not([src]){animation:none;}      /* sin avatar cargado = sin animación ni capa GPU */
  .agente3d model-viewer[src]{will-change:transform;}     /* will-change SOLO cuando hay avatar visible */
  .agente3d model-viewer.pop{animation:robotPop .6s ease;}
  .agente3d img.robot-img, .agente3d video.robot-img{max-width:92%;max-height:158px;object-fit:contain;display:block;
    animation:respira 3.6s ease-in-out infinite;transform-origin:center 72%;}
  .agente3d img.robot-img.pop, .agente3d video.robot-img.pop{animation:robotPop .6s ease;}
  .ar3d{display:none !important;}   /* las imágenes/GIF no tienen AR (eso era del 3D) */
  @keyframes respira{0%,100%{transform:translateY(3px) scale(1);}50%{transform:translateY(-4px) scale(1.02);}}
  @keyframes robotPop{0%{transform:translateY(0) scale(1);}40%{transform:translateY(-6px) scale(1.1);}100%{transform:translateY(0) scale(1);}}
  .agente3d .et{position:absolute;left:14px;top:9px;z-index:2;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
    font-weight:800;color:var(--acento);display:flex;align-items:center;gap:6px;}
  .agente3d .et::before{content:'';width:7px;height:7px;border-radius:50%;background:#2f9e44;box-shadow:0 0 8px #2f9e44;animation:pulso 1.6s ease-in-out infinite;}
  .ar3d{position:absolute;right:12px;bottom:10px;z-index:2;background:var(--acento);color:#fff;border:none;border-radius:20px;
    padding:7px 12px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:5px;
    box-shadow:0 4px 14px rgba(26,111,212,.4);transition:transform .15s;}
  .ar3d:hover{transform:translateY(-1px);}
  .robot-cargando{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:rgba(255,255,255,.65);backdrop-filter:blur(2px);color:var(--acento);font-size:12px;font-weight:700;}
  .robot-cargando .spin{width:26px;height:26px;border:3px solid #d8e3f2;border-top-color:var(--acento);border-radius:50%;animation:girar .8s linear infinite;}
  @keyframes girar{to{transform:rotate(360deg);}}
  .burbuja{
    max-width:90%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.45;
    background:#F2F6FA;border:1px solid var(--borde);
    border-bottom-left-radius:4px;animation:aparece .3s ease both;
  }
  .agente-tag{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:700;color:var(--acento);margin-bottom:5px;}
  .punto-ia{width:7px;height:7px;border-radius:50%;background:var(--acento);
    box-shadow:0 0 8px var(--acento);animation:pulso 1.6s ease-in-out infinite;}
  @keyframes pulso{0%,100%{opacity:1;}50%{opacity:.4;}}
  @keyframes aparece{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .escribiendo{display:inline-flex;gap:4px;padding:4px 2px;}
  .escribiendo span{width:6px;height:6px;border-radius:50%;background:#A9B6C4;animation:salto 1s infinite;}
  .escribiendo span:nth-child(2){animation-delay:.15s;}
  .escribiendo span:nth-child(3){animation-delay:.3s;}
  @keyframes salto{0%,60%,100%{transform:none;}30%{transform:translateY(-5px);}}
  .burbuja.yo{background:linear-gradient(135deg,#1a6fd4,#3a9fe8);color:#fff;border:none;align-self:flex-end;border-bottom-right-radius:4px;border-bottom-left-radius:14px;}
  .chat-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--borde);}
  .chat-input input{flex:1;background:#F2F6FA;border:1px solid var(--borde);border-radius:22px;padding:11px 15px;font-family:inherit;font-size:13.5px;color:var(--texto);outline:none;}
  .chat-input input:focus{border-color:var(--acento);}
  .chat-input button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;background:var(--acento);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
  .chat-input button:hover{transform:scale(1.08);}

  .btn{
    display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
    padding:14px;border-radius:16px;border:none;cursor:pointer;
    font-size:14.5px;font-weight:700;font-family:inherit;
    transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
  }
  .btn-wa{background:linear-gradient(135deg,#25D366,#1FB855);color:#fff;
    box-shadow:0 6px 18px rgba(37,211,102,.35);letter-spacing:.2px;}
  .btn-wa svg{width:19px;height:19px;}
  .btn-wa:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(37,211,102,.45);}
  .btn-sec{background:linear-gradient(135deg,#1a6fd4,#3a9fe8);color:#fff;border:none;font-weight:700;
    box-shadow:0 6px 18px rgba(26,111,212,.30);}
  .btn-sec:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(26,111,212,.45);}
  .btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}

  /* ---------- Ecosistema ---------- */
  .eco-btn{
    flex-shrink:0;display:flex;align-items:center;gap:7px;
    background:#fff;border:1px solid var(--borde);border-radius:999px;
    padding:9px 14px;cursor:pointer;font-family:inherit;
    font-size:12.5px;font-weight:700;color:var(--texto);
    box-shadow:0 2px 10px rgba(28,39,51,.08);
  }
  .eco-btn:hover{background:#F0F6FB;}
  .eco-btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
  .eco-menu{
    position:fixed; top:0; left:0; right:auto; bottom:0;
    width:min(360px,88vw); height:100%; max-height:none;
    background:#fff; border-right:1px solid var(--borde);
    box-shadow:24px 0 60px rgba(28,39,51,.22); overflow-y:auto; display:none;
    border-radius:0 26px 26px 0;
    transform:translateX(-105%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
    z-index:32;
  }
  .eco-menu.visible{display:block;transform:translateX(0);}
  .eco-head{
    padding:10px 16px 7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--suave);font-weight:800;background:#F7F9FC;border-bottom:1px solid var(--borde);
    position:relative;
  }
  .eco-item{
    display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;
    border-bottom:1px solid #F0F4F9;text-decoration:none;color:var(--texto);
  }
  .eco-item:last-child{border-bottom:none;}
  .eco-item:hover,.eco-item:focus-visible{background:#F2F8F7;outline:none;}
  .eco-logo{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:900;
    overflow:hidden;
  }
  .eco-logo img{width:100%;height:100%;object-fit:contain;background:#fff;}
  .eco-info{flex:1;min-width:0;}
  .eco-nombre{font-size:13.5px;font-weight:800;}
  .eco-desc{font-size:11.5px;color:var(--suave);}
  @media (max-width:640px){ .eco-btn span{display:none;} .eco-btn{padding:9px 12px;} }

  /* ---------- Barra de ecosistema (orilla derecha): pestañas individuales pegadas a la pared ---------- */
  .eco-tabs{
    position:fixed;right:0;bottom:200px;z-index:13;
    display:flex;flex-direction:column-reverse;gap:6px;align-items:flex-end;
    transition:transform .3s ease;
  }
  .eco-tabs.is-hidden{transform:translateX(30%);}
  .eco-tab{
    position:relative;overflow:hidden;
    writing-mode:vertical-rl;text-orientation:mixed;color:#fff;font-family:inherit;
    font-size:11px;font-weight:800;letter-spacing:.06em;
    padding:13px 8px;border-radius:16px 0 0 16px;
    border:none;border-right:3px solid rgba(255,255,255,.35);
    text-shadow:0 1px 2px rgba(0,0,0,.28);text-decoration:none;
    box-shadow:0 8px 18px rgba(13,35,64,.38), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.18);
    transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s, padding-right .15s;
  }
  .eco-tab::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(100deg, rgba(255,255,255,.3) 0%, transparent 45%);
    pointer-events:none;
  }
  .eco-tab:hover{
    padding-right:13px;color:#fff;
    transform:translateX(-5px) scale(1.04);filter:brightness(1.08);
    box-shadow:0 14px 30px rgba(13,35,64,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.22);
  }
  @media (max-width:640px){ .eco-tabs{bottom:210px;} .eco-tab{font-size:9px;padding:8px 4px;} }
  /* Ventanita que explica cada sección */
  .eco-modal-bg{position:fixed;inset:0;z-index:60;background:rgba(13,24,38,.55);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;}
  .eco-modal-bg.ver{opacity:1;pointer-events:auto;}
  .eco-modal{background:#fff;border-radius:24px;max-width:380px;width:100%;padding:28px 26px 20px;text-align:center;
    box-shadow:0 30px 70px rgba(13,24,38,.4);transform:translateY(16px) scale(.97);transition:transform .25s;}
  .eco-modal-bg.ver .eco-modal{transform:translateY(0) scale(1);}
  .eco-modal-ico{width:66px;height:66px;border-radius:20px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
    font-size:1.9rem;font-weight:800;color:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(13,35,64,.18);}
  .eco-modal-ico img{width:100%;height:100%;object-fit:contain;padding:6px;}
  .eco-modal h3{font-size:1.4rem;color:var(--texto);margin-bottom:10px;}
  .eco-modal p{font-size:.95rem;color:#5f6b7a;line-height:1.55;margin-bottom:22px;}
  .eco-modal-ir{display:block;width:100%;padding:15px;border-radius:14px;border:none;cursor:pointer;
    font-size:1.02rem;font-weight:700;color:#fff;text-decoration:none;transition:transform .15s,box-shadow .2s;}
  .eco-modal-ir:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,35,64,.22);}
  .eco-modal-no{display:block;width:100%;margin-top:8px;background:none;border:none;cursor:pointer;
    color:#8a96a3;font-size:.9rem;font-family:inherit;padding:9px;}
  .eco-modal-no:hover{color:#5f6b7a;}
  /* el botón Filtros conserva su texto también en celular */
  .eco-btn .eco-btn-lbl{display:inline;}
  /* items de filtro dentro del menú (son <button>) */
  button.eco-item{
    width:100%;text-align:left;background:none;border:none;
    border-bottom:1px solid #F0F4F9;font-family:inherit;color:var(--texto);
  }
  button.eco-item:last-child{border-bottom:none;}

  /* ---------- Mundito + panel lateral del ecosistema ---------- */
  .eco-mundo{
    width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;margin:14px 8px 0 0;
    background:linear-gradient(180deg,#1a6fd4,#3a9fe8);color:#fff;font-size:22px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 16px rgba(13,35,64,.28);
  }
  .eco-mundo:hover{filter:brightness(1.06);}
  .eco-back{
    position:fixed;inset:0;background:rgba(13,35,64,.45);z-index:28;
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .eco-back.visible{opacity:1;pointer-events:auto;}
  #menuBack{background:rgba(13,35,64,.12);}
  .eco-panel{
    position:fixed;top:0;right:0;height:100%;width:min(370px,92vw);z-index:31;
    background:#fff;border-radius:26px 0 0 26px;overflow:hidden;
    transform:translateX(108%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(28,39,51,.22);
  }
  .eco-panel.abierto{transform:translateX(0);}
  .eco-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--borde);
    font-size:15px;font-weight:800;color:var(--texto);
  }
  .eco-panel-x{
    background:none;border:none;font-size:18px;cursor:pointer;color:var(--suave);
    width:30px;height:30px;border-radius:50%;
  }
  .eco-panel-x:hover{background:#F0F4F9;}
  .eco-panel-body{padding:12px;overflow-y:auto;}
  .eco-card{
    display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;
    text-decoration:none;color:var(--texto);border:1px solid var(--borde);margin-bottom:10px;
    transition:transform .12s,box-shadow .12s;
  }
  .eco-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(28,39,51,.10);}
  .eco-card-ico{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
  }
  .eco-card-ico--letra{font-weight:900;font-size:18px;letter-spacing:.02em;}
  .eco-card-ico--logo{background:#fff !important;border:1px solid var(--borde);padding:5px;}
  .eco-card-ico--logo img{width:100%;height:100%;object-fit:contain;}
  .eco-card-info{flex:1;min-width:0;}
  .eco-card-nom{font-size:15px;font-weight:800;display:block;}
  .eco-card-desc{font-size:12.5px;color:var(--suave);line-height:1.35;margin-top:2px;display:block;}
  .eco-card-ico{color:#fff;}
  .eco-card-arrow{color:var(--suave);font-size:18px;flex-shrink:0;}

  /* ---------- Resultados de búsqueda ---------- */
  .fila1{position:relative;}
  .resultados{
    position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-140%);
    width:min(540px,94vw);z-index:31;
    background:rgba(255,255,255,.98);border:1px solid var(--borde);border-radius:18px;
    box-shadow:0 16px 48px rgba(28,39,51,.20);overflow:hidden;backdrop-filter:blur(8px);
    max-height:min(60vh,460px);overflow-y:auto;display:block;
    opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;
  }
  .resultados.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
  .res-seccion{
    padding:9px 16px 5px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--suave);font-weight:800;background:#F7F9FC;
    border-bottom:1px solid var(--borde);position:sticky;top:0;
  }
  /* Pestañas del buscador: Todo · Negocios · Productos */
  .res-tabs{display:flex;gap:6px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--borde);
    position:sticky;top:0;z-index:2;}
  .res-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid #e3e8ef;background:#fff;color:#334155;
    border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;}
  .res-tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .res-tab b{font-size:11px;background:#eef2f7;color:#475569;border-radius:999px;padding:1px 7px;}
  .res-tab.activo{background:#0d2340;color:#fff;border-color:transparent;}
  .res-tab.activo b{background:rgba(255,255,255,.2);color:#fff;}
  .resultados.tab-negocios [data-bloque="productos"],
  .resultados.tab-productos [data-bloque="negocios"]{display:none;}
  .resultados:not(.tab-productos) .res-item.solo-tab{display:none;}
  .res-tabs + .res-bloque .res-seccion, .res-bloque .res-seccion{top:51px;}
  .res-vermas{display:block;width:100%;border:none;background:#F7F9FC;color:var(--acento,#1a6fd4);
    font:inherit;font-size:12.5px;font-weight:800;padding:10px 16px;cursor:pointer;text-align:left;border-bottom:1px solid #F0F4F9;}
  .resultados.tab-productos .res-vermas{display:none;}
  .res-item{
    display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
    border-bottom:1px solid #F0F4F9;
  }
  .res-item:hover,.res-item:focus-visible{background:#F2F8F7;outline:none;}
  .res-icono{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;position:relative;
    display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  }
  .res-icono img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:10px;}
  .res-icono .ini{font-size:13px;font-weight:800;letter-spacing:.02em;color:#fff;}
  .res-estrella{
    position:absolute;bottom:-3px;right:-3px;font-size:11px;line-height:1;
    background:#fff;border-radius:50%;padding:1px;box-shadow:0 1px 4px rgba(28,39,51,.25);
  }
  .res-info{flex:1;min-width:0;}
  .res-titulo{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .res-sub{font-size:11.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .res-precio{font-size:13px;font-weight:800;color:var(--acento);flex-shrink:0;}
  .res-precio.cotizar,.prod-precio.cotizar{font-size:11.5px;}
  .res-vacio{padding:18px 16px;font-size:13px;color:var(--suave);text-align:center;}

  /* ---------- Tabs del panel de inicio (Para ti / Para tu negocio) ---------- */
  .tabs{display:flex;gap:6px;padding:10px 16px 0;flex-shrink:0;}
  .tab{
    flex:1;padding:9px 6px;border-radius:13px;border:1px solid var(--borde);
    background:#fff;color:var(--suave);font-size:12.5px;font-weight:700;
    font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .tab.activo{background:var(--acento);color:#fff;border-color:var(--acento);}
  .tab:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}

  /* ---------- Tabs del panel del negocio (barra arriba del agente) ---------- */
  #tabs{
    display:flex;flex:none;border-bottom:1px solid var(--borde);background:#fff;
    padding:8px 10px;gap:4px;
  }
  #tabs .tab{
    flex:1;padding:8px 4px 7px;border-radius:12px;border:1px solid #E6EDF5;
    background:#F4F7FB;color:var(--suave);font-size:11px;font-weight:700;
    font-family:inherit;cursor:pointer;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;
    transition:background .15s,color .15s,box-shadow .15s,transform .15s,border-color .15s;
  }
  #tabs .tab svg{width:21px;height:21px;stroke:var(--suave);fill:none;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s;}
  #tabs .tab.activo{
    background:linear-gradient(135deg,var(--acento),var(--acento2));
    color:#fff;border-color:transparent;font-weight:800;
    box-shadow:0 6px 15px rgba(26,111,212,.30);transform:translateY(-1px);
  }
  #tabs .tab.activo svg{stroke:#fff;}
  #tabs .tab:not(.activo):hover{background:#E9F1FC;border-color:#D5E3F5;}
  #tabs .tab:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}

  /* ---------- Botón flotante "Escuchar al agente" ---------- */
  #ttsToggleNeg{
    display:none;position:absolute;right:12px;bottom:10px;z-index:3;
    width:42px;height:42px;border-radius:50%;border:none;
    background:#e8413c;color:#fff;cursor:pointer;
    align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(28,39,51,.22);transition:background .15s,transform .15s;
  }
  #ttsToggleNeg svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;}
  #ttsToggleNeg:hover{transform:scale(1.06);}
  #ttsToggleNeg.activo{background:#c4271f;}
  #ttsToggleNeg.hablando svg{animation:pulso 1s ease-in-out infinite;}

  /* ---------- Pestañitas laterales WhatsApp / Catálogo ---------- */
  .panel-cta{flex-shrink:0;
    flex:none;display:flex;flex-direction:column;gap:8px;
    margin-top:12px;
  }
  .tab-lateral{
    display:flex;align-items:center;gap:9px;width:100%;
    padding:11px 16px;border:none;border-radius:14px;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:700;
    transition:transform .15s ease,filter .15s ease;
  }
  .tab-lateral:hover{transform:translateY(-1px);filter:brightness(1.05);}
  .tab-lateral svg{width:19px;height:19px;flex-shrink:0;}
  .tab-lateral.wa{background:#25D366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.32);}
  .tab-lateral.cat{background:linear-gradient(135deg,#EAF2FC,#DBEAFB);color:var(--acento);
    border:1.5px solid #BAD4F4;box-shadow:0 4px 12px rgba(26,111,212,.14);}
  .tab-lateral.cat svg{stroke:var(--acento);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- Grid de productos ---------- */
  .productos{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 8px;display:none;
    grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:10px;align-content:start;}
  .productos.visible{display:grid;}
  .prod{
    background:#fff;border:1px solid var(--borde);border-radius:12px;overflow:hidden;
    cursor:pointer;display:flex;flex-direction:column;
    flex:none;height:auto;min-height:max-content;
    box-shadow:0 1px 6px rgba(28,39,51,.06);transition:transform .15s, box-shadow .15s;
  }
  .prod:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(28,39,51,.12);}
  .prod-img{width:100%;height:110px;object-fit:contain;background:#fff;display:block;padding:6px;flex-shrink:0;}
  .prod-ph{width:100%;height:110px;display:flex;align-items:center;justify-content:center;
    font-size:26px;color:#fff;}
  .prod-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;flex-shrink:0;
    border-top:1px solid var(--borde);background:#fff;}
  .prod-titulo{font-size:12px;font-weight:700;line-height:1.25;min-height:2.5em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .prod-precio{font-size:13.5px;font-weight:800;color:var(--acento);}
  .prod-antes{font-size:11px;color:var(--suave);text-decoration:line-through;margin-left:5px;font-weight:600;}
  .prod-oferta{
    position:absolute;top:6px;left:6px;background:#D6336C;color:#fff;
    font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;
  }
  .prod-condicion{
    position:absolute;top:6px;right:6px;background:#0d2340;color:#fff;
    font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;
  }
  .prod-img-wrap{position:relative;flex-shrink:0;}
  .prod-vacio{grid-column:1/-1;text-align:center;color:var(--suave);font-size:13px;padding:30px 10px;}
  .filtro-cond{display:none;gap:6px;padding:10px 12px 0;flex-wrap:wrap;}
  .filtro-cond.visible{display:flex;}
  .filtro-cond button{border:1px solid var(--borde);background:#fff;color:#475569;
    font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;}
  .filtro-cond button.activo{background:#0d2340;border-color:#0d2340;color:#fff;}

  /* ---------- Grid de promos del negocio ---------- */
  .promos-cont{flex:1;min-height:0;overflow-y:auto;padding:12px 12px 8px;display:none;
    flex-direction:column;gap:10px;align-content:start;}
  .promos-cont.visible{display:flex;}
  /* Evita que el banner ancho y las tarjetas se aplasten al hacer zoom: mantienen su alto y el contenedor da scroll */
  .promos-cont > *, .videos-cont > *{flex-shrink:0;}
  .promos-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .promo-card{
    background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;
    box-shadow:0 1px 6px rgba(28,39,51,.06);display:flex;flex-direction:column;
    transition:transform .15s,box-shadow .15s;
  }
  .promo-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(28,39,51,.12);}
  .promo-card.promo-ancha{grid-column:1/-1;}
  .promo-ancha .promo-img{height:160px;object-fit:cover;}
  .promo-ancha .promo-img-ph{height:160px;}
  .promo-img-wrap{position:relative;flex-shrink:0;}
  .promo-img{width:100%;height:130px;object-fit:contain;display:block;background:#f8f9fa;}
  .promo-img-ph{width:100%;height:130px;background:linear-gradient(135deg,#1a6fd4,#3a9fe8);
    display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;}
  .promo-pct{
    position:absolute;top:6px;right:6px;
    background:linear-gradient(135deg,#c1121f,#e63946);color:#fff;
    font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px;
    box-shadow:0 2px 8px rgba(230,57,70,.45);
    animation:pulseBadge 2s ease-in-out infinite;
  }
  @keyframes pulseBadge{0%,100%{box-shadow:0 2px 8px rgba(230,57,70,.45);}50%{box-shadow:0 4px 14px rgba(230,57,70,.70);}}
  .promo-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;flex:1;}
  .promo-badge{
    align-self:flex-start;background:#D6336C;color:#fff;
    font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;margin-bottom:2px;
  }
  .promo-titulo{font-size:11.5px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .promo-desc{font-size:10.5px;color:var(--suave);line-height:1.3;}
  .promo-precios{display:flex;align-items:baseline;gap:4px;margin-top:2px;flex-wrap:wrap;}
  .promo-precio{font-size:13px;font-weight:900;color:#c1121f;}
  .promo-precio-antes{font-size:10px;color:var(--suave);text-decoration:line-through;}
  .promo-ahorro{font-size:9.5px;font-weight:700;color:#3a7a00;}
  .promo-cd{
    margin-top:5px;padding:4px 6px;border-radius:7px;
    background:rgba(230,57,70,.06);border:1px solid rgba(230,57,70,.18);
    display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:#c1121f;
    flex-wrap:wrap;
  }
  .promo-cd-bloques{display:flex;gap:2px;align-items:center;}
  .promo-cd-bloque{text-align:center;background:#fff;border:1px solid rgba(230,57,70,.2);
    border-radius:4px;padding:2px 3px;min-width:22px;}
  .promo-cd-num{font-size:11px;font-weight:900;display:block;line-height:1;}
  .promo-cd-lbl{font-size:7px;font-weight:600;opacity:.7;text-transform:uppercase;}
  .promo-cd-sep{color:var(--suave);}
  .promo-wa{
    margin:6px 10px 10px;padding:9px;border:none;border-radius:10px;
    background:#25D366;color:#fff;font-size:12px;font-weight:800;
    cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .promo-wa:hover{filter:brightness(1.06);}
  .promos-vacio{text-align:center;color:var(--suave);font-size:13px;padding:30px 10px;}

  /* ---------- Videos del negocio ---------- */
  .videos-cont{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 8px;display:none;
    flex-direction:column;gap:14px;touch-action:pan-y;}
  .videos-cont.visible{display:flex;}
  .video-card{background:#fff;border:1px solid var(--borde);border-radius:14px;
    overflow:hidden;box-shadow:0 1px 6px rgba(28,39,51,.06);}
  /* Vertical (9:16) por defecto — ideal para TikTok y Reels en móvil */
  .video-wrap{
    position:relative;width:100%;aspect-ratio:9/16;background:#000;touch-action:pan-y;
  }
  .video-wrap iframe,.video-wrap video{
    position:absolute;top:0;left:0;width:100%;height:100%;border:none;object-fit:contain;touch-action:pan-y;}
  /* En pantallas anchas (desktop/tablet landscape) → 16:9 horizontal */
  @media(min-width:600px){
    .video-wrap{ aspect-ratio:16/9; }
  }
  .video-info{padding:10px 12px 12px;}
  .video-titulo{font-size:13px;font-weight:800;line-height:1.3;margin-bottom:3px;}
  .video-desc{font-size:12px;color:var(--suave);line-height:1.4;}
  .videos-vacio{text-align:center;color:var(--suave);font-size:13px;padding:30px 10px;}
  .video-wrap video { object-fit:contain; background:#000; }
  /* Formato por video (lo manda api/videos_negocio.php). Manda sobre la regla
     por tamaño de pantalla de arriba: un TikTok es vertical en el celular y en
     la compu. El vertical se limita en alto para que quepa sin scroll interno. */
  .video-wrap.fmt-h{aspect-ratio:16/9;}
  /* Portada con ▶: el reproductor de YouTube/TikTok/Reels solo se carga al
     tocarlo. Antes se cargaban todos al abrir el negocio (pesado y lento). */
  .video-portada{position:absolute;inset:0;border:0;padding:0;cursor:pointer;width:100%;height:100%;
    background:#0d2340 center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
  .video-portada::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45));}
  .video-play{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.95);
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s;}
  .video-portada:hover .video-play{transform:scale(1.08);}
  .video-play::before{content:'';margin-left:5px;border-left:20px solid #0d2340;border-top:13px solid transparent;border-bottom:13px solid transparent;}
  .video-plat{position:absolute;left:10px;bottom:9px;z-index:1;color:#fff;font-size:12px;font-weight:800;opacity:.95;}
  .video-grande{display:block;margin:8px 12px 0 auto;border:1px solid #d6e2f0;background:#fff;color:#0d2340;
    border-radius:999px;padding:6px 12px;font:800 12px inherit;cursor:pointer;}
  .video-wrap:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;background:#000;}
  .video-wrap:-webkit-full-screen{width:100vw;height:100vh;background:#000;}
  .video-card.fmt-v{background:#0d2340;}
  .video-wrap.fmt-v{aspect-ratio:9/16;width:min(100%, calc(64dvh * 9 / 16));margin:0 auto;}

  /* ---------- Publicidad ---------- */
  .banner-pub{
    position:fixed;bottom:96px;left:14px;z-index:50;width:270px;
    background:#fff;border:1px solid var(--borde);border-radius:14px;
    box-shadow:0 10px 36px rgba(28,39,51,.18);overflow:hidden;
  }
  .banner-pub-tag{
    position:absolute;top:8px;left:8px;background:rgba(28,39,51,.55);color:#fff;
    font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    padding:2px 7px;border-radius:999px;z-index:2;
  }
  .banner-pub-cerrar{
    position:absolute;top:6px;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;
    border:none;background:rgba(28,39,51,.55);color:#fff;font-size:12px;cursor:pointer;line-height:1;
  }
  .banner-pub-visual{
    height:96px;display:flex;align-items:center;justify-content:center;
    font-size:42px;position:relative;transition:background .4s;
  }
  .banner-pub-body{padding:10px 14px 12px;cursor:pointer;}
  .banner-pub-marca{font-size:13.5px;font-weight:800;}
  .banner-pub-texto{font-size:11.5px;color:var(--suave);margin-top:2px;line-height:1.35;}
  .banner-pub-cta{
    display:inline-block;margin-top:8px;font-size:11px;font-weight:800;
    color:var(--acento);
  }
  .banner-pub-dots{display:flex;gap:5px;justify-content:center;padding-bottom:10px;}
  .banner-pub-dot{width:6px;height:6px;border-radius:50%;background:#D5DEE9;}
  .banner-pub-dot.activo{background:var(--acento);}
  @media (max-width:640px){ .banner-pub{width:230px;bottom:120px;} }

  .res-pat{background:#FFF8E6;}
  .res-pat .res-icono{background:#E8A50C;}
  .badge-pat{
    display:inline-block;background:#E8A50C;color:#fff;font-size:9px;font-weight:800;
    letter-spacing:.08em;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;
  }

/* ---------- Modo comparación ---------- */
  .res-comparar{background:var(--acento);font-weight:800;}
  .res-comparar .res-icono{background:rgba(255,255,255,.18);}
  .res-comparar .res-titulo{color:#fff;}
  .res-comparar .res-sub{color:rgba(255,255,255,.85);}
  .res-comparar:hover,.res-comparar:focus-visible{background:#1558ad;}
  .comparador{
    position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-140%);
    width:min(540px,94vw);z-index:15;
    background:#fff;border:1px solid var(--borde);border-radius:16px;
    box-shadow:0 14px 50px rgba(28,39,51,.22);overflow:hidden;
    opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;
  }
  .comparador.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
  .comp-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 16px;border-bottom:1px solid var(--borde);background:var(--acento);
  }
  .comp-head-info{display:flex;align-items:center;gap:10px;min-width:0;}
  .comp-head-ico{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;
  }
  .comp-head-ico svg{width:18px;height:18px;}
  .comp-head b{font-size:14px;color:#fff;}
  .comp-head small{color:rgba(255,255,255,.85);font-weight:600;}
  .comp-salir{
    border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);border-radius:999px;
    padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;
    font-family:inherit;color:#fff;flex-shrink:0;
  }
  .comp-salir:hover,.comp-salir:focus-visible{background:rgba(255,255,255,.25);outline:2px solid #fff;outline-offset:1px;}
  .comp-lista{max-height:min(58vh,440px);overflow-y:auto;}
  .comp-item{
    display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
    border-bottom:1px solid #F0F4F9;
  }
  .comp-item:hover,.comp-item:focus-visible{background:#F2F8F7;outline:none;}
  .comp-rank{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:800;background:#EEF2F7;color:var(--suave);
    overflow:hidden;
  }
  .comp-rank img{width:100%;height:100%;object-fit:cover;display:block;}
  .comp-item:first-child .comp-rank{box-shadow:0 0 0 2px var(--acento);}
  .comp-info{flex:1;min-width:0;}
  .comp-neg{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .comp-prod{font-size:11.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* La descripcion dice lo que el titulo no ("10 piezas con logo"): va en el
     renglon, cortada a una linea para no descuadrar la lista. */
  .comp-desc{font-size:11px;color:var(--suave);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
  .comp-derecha{text-align:right;flex-shrink:0;}
  .comp-precio{font-size:15px;font-weight:800;color:var(--acento);}
  .comp-dist{font-size:10.5px;color:var(--suave);font-weight:600;}
  .comp-badge{
    display:inline-block;background:var(--acento);color:#fff;font-size:9px;
    font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px;
  }

  /* marcador personalizado */
  .pin{
    width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
    border:2px solid #0d1322;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,.5);
  }
  .pin span{transform:rotate(45deg);font-size:13px;}
  .pin:hover{filter:brightness(1.15);}

  .maplibregl-ctrl-attrib{background:rgba(255,255,255,.8)!important;color:#7d8a99!important;font-size:10px!important;}
  .hint-mapa{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(10px);z-index:9;
    background:rgba(20,24,33,.86);color:#fff;padding:10px 18px;border-radius:30px;font-size:13px;font-weight:600;
    box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none;opacity:0;transition:opacity .4s,transform .4s;backdrop-filter:blur(6px);}
  .hint-mapa.ver{opacity:1;transform:translate(-50%,-50%);}
  .maplibregl-ctrl-attrib a{color:#7d8a99!important;}
  @media (prefers-reduced-motion: reduce){
    .burbuja,.punto-ia,.escribiendo span{animation:none;}
  }

  /* ---------- Pestañas de orilla ---------- */
  .orilla{
    display:none !important;
    position:fixed;z-index:50;border:none;cursor:pointer;color:#fff;
    font-family:inherit;font-size:12px;font-weight:800;
    padding:12px 7px;letter-spacing:.05em;
    writing-mode:vertical-rl;text-orientation:mixed;
    box-shadow:0 4px 16px rgba(13,35,64,.25);
  }
  .orilla:focus-visible{outline:2px solid #fff;outline-offset:-4px;}
  .orilla-info{
    left:0;top:42%;border-radius:0 12px 12px 0;
    background:linear-gradient(180deg,var(--acento),var(--acento2));
  }
  .orilla-pub{
    left:0;bottom:200px;z-index:50;border-radius:0 12px 12px 0;
    background:linear-gradient(180deg,#E8930C,#F2A33C);display:block;
  }
  @media (min-width:641px){ .orilla-info,.orilla-pub{left:68px;} }

  /* ---------- Panel "Qué es MiAguas" ---------- */
  .info{
    position:fixed;top:0;left:0;height:100%;width:min(350px,90vw);z-index:30;
    background:#fff;border-radius:0 26px 26px 0;overflow:hidden;
    transform:translateX(-105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
    display:flex;flex-direction:column;box-shadow:24px 0 60px rgba(13,35,64,.22);
  }
  .info.abierto{transform:translateX(0);}
  .info-head{padding:18px 20px 12px;border-bottom:1px solid var(--borde);position:relative;}
  .info-head img{height:34px;display:block;}
  .info-head p{font-size:12px;color:var(--suave);margin-top:6px;}
  .info-cuerpo{flex:1;overflow-y:auto;padding:16px 18px;display:none;}
  .info-cuerpo.visible{display:block;}
  .info-videos{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
  .info-video-card .video-wrap{border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(28,39,51,.10);
    aspect-ratio:16/9;}
  .info-video-tit{font-size:12.5px;font-weight:800;color:var(--texto);margin-bottom:6px;}
  .info-btn-planes{
    display:flex;align-items:center;justify-content:center;gap:9px;
    text-decoration:none;font-family:inherit;font-size:13.5px;font-weight:800;
    color:#fff;background:linear-gradient(180deg,#7048e8,#5f3dc4);
    border-radius:14px;padding:14px 16px;
    box-shadow:0 6px 18px rgba(112,72,232,.28);
  }
  .info-btn-planes:hover{filter:brightness(1.06);}
  /* Ejemplos de video en la pestaña Publicidad */
  .pub-ejemplos-tit{font-size:12px;font-weight:800;color:var(--texto);margin:14px 2px 8px;}
  .pub-ejemplos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;align-items:start;}
  .pub-ej{margin:0;}
  .pub-ej video{width:100%;max-height:340px;display:block;border-radius:12px;background:#000;object-fit:contain;}
  .pub-ej figcaption{font-size:11.5px;color:var(--suave);margin-top:5px;text-align:center;}
  @media (max-width:420px){ .pub-ejemplos{grid-template-columns:1fr;} }
  /* Precios de los planes, a la vista en el panel (fuente: planes.php) */
  .pl-lista{border:1px solid var(--borde);border-radius:14px;overflow:hidden;margin-bottom:10px;}
  .pl-grupo{font-size:10.5px;font-weight:800;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;
    padding:9px 12px 5px;background:#f6f9fd;border-top:1px solid var(--borde);}
  .pl-grupo:first-child{border-top:none;}
  .pl-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;
    border-top:1px solid #edf3fa;text-decoration:none;color:var(--texto);}
  .pl-grupo + .pl-fila{border-top:none;}
  .pl-fila:hover{background:#f3f8fe;}
  .pl-fila b{font-size:13px;display:block;}
  .pl-fila small{font-size:11.5px;color:var(--suave);display:block;line-height:1.35;}
  .pl-precio{text-align:right;white-space:nowrap;flex-shrink:0;}
  .pl-precio strong{font-size:14px;color:var(--acento);display:block;}
  .pl-precio small{font-size:11px;}
  .pl-tag{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:#3da50a;border-radius:999px;
    padding:1px 7px;margin-left:5px;vertical-align:1px;}
  .pl-nota{font-size:11.5px;color:var(--suave);line-height:1.4;margin:0 2px 10px;}
  .info-btn-planes svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .info-item{display:flex;gap:11px;margin-bottom:14px;align-items:flex-start;}
  .info-item .ico{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;background:var(--acento);
    display:flex;align-items:center;justify-content:center;
  }
  .info-item .ico svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;}
  .info-item b{font-size:13.5px;display:block;}
  .info-item span{font-size:12.5px;color:var(--suave);line-height:1.4;}
  .info-cta{padding:12px 18px 18px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:8px;}
  .btn-azul{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    padding:12px;border-radius:50px;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--acento),var(--acento2));
    color:#fff;font-size:14px;font-weight:800;font-family:inherit;text-decoration:none;
  }
  .btn-azul:hover{filter:brightness(1.07);}
  .btn-azul.verde{background:linear-gradient(135deg,#3da50a,#5ec400);}

  /* ---------- Cejas laterales (pegadas al borde del panel info) ---------- */
  .flyer-cejas{
    position:fixed;left:min(350px,90vw);top:150px;z-index:31;
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    opacity:0;pointer-events:none;transition:opacity .32s ease;
  }
  .info.abierto ~ .flyer-cejas{opacity:1;pointer-events:auto;}

  .flyer-ceja{
    position:relative;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:12px 7px 13px;border:none;cursor:pointer;font-family:inherit;color:#fff;
    border-radius:0 13px 13px 0;
    background-size:220% 100%,100% 100%;
    background-position:220% 0,0 0;
    box-shadow:7px 5px 18px rgba(13,35,64,.28);
    transition:filter .15s;
  }
  /* capa 1 = brillo que cruza · capa 2 = degradado base por color */
  .flyer-ceja.roja{
    background:
      linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%),
      linear-gradient(180deg,#D62020,#F24A4A);
  }
  .flyer-ceja.azul{
    background:
      linear-gradient(115deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%),
      linear-gradient(180deg,#1559b0,#3a9fe8);
  }
  .info.abierto ~ .flyer-cejas .flyer-ceja.roja{
    animation:flyerShimmer 5.5s ease-in-out 1.2s infinite,
              flyerGlowRoja 3.4s ease-in-out infinite;
  }
  .info.abierto ~ .flyer-cejas .flyer-ceja.azul{
    animation:flyerShimmer 5.5s ease-in-out 2.4s infinite,
              flyerGlowAzul 3.4s ease-in-out .6s infinite;
  }
  .flyer-ceja:hover{filter:brightness(1.07);}
  .flyer-ceja:active{filter:brightness(.96);}
  .flyer-ceja:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .flyer-ceja svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .flyer-ceja .flyer-ceja-txt{
    font-size:10px;font-weight:800;letter-spacing:1.5px;
    writing-mode:vertical-rl;text-orientation:upright;
  }
  /* puntito "nuevo" */
  .flyer-ceja-new{
    position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;
    background:#ffd400;border:2px solid #fff;
    animation:flyerNewPulse 2.1s ease-out infinite;
  }
  @keyframes flyerShimmer{
    0%,72%{background-position:220% 0,0 0;}
    88%,100%{background-position:-120% 0,0 0;}
  }
  @keyframes flyerGlowRoja{
    0%,100%{box-shadow:7px 5px 18px rgba(13,35,64,.28),0 0 0 0 rgba(214,32,32,0);}
    50%{box-shadow:7px 5px 18px rgba(13,35,64,.28),0 0 16px 2px rgba(242,74,74,.55);}
  }
  @keyframes flyerGlowAzul{
    0%,100%{box-shadow:7px 5px 18px rgba(13,35,64,.28),0 0 0 0 rgba(58,159,232,0);}
    50%{box-shadow:7px 5px 18px rgba(13,35,64,.28),0 0 16px 2px rgba(58,159,232,.55);}
  }
  @keyframes flyerNewPulse{
    0%{box-shadow:0 0 0 0 rgba(255,212,0,.6);}
    70%{box-shadow:0 0 0 7px rgba(255,212,0,0);}
    100%{box-shadow:0 0 0 0 rgba(255,212,0,0);}
  }
  @media (prefers-reduced-motion:reduce){
    .info.abierto ~ .flyer-cejas .flyer-ceja{animation:none;}
    .flyer-ceja-new{animation:none;}
  }

  /* ---------- Cejas del panel Ecosistema (espejo, lado derecho) ---------- */
  .eco-cejas{
    position:fixed;right:min(370px,92vw);top:150px;z-index:32;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
    opacity:0;pointer-events:none;transition:opacity .32s ease;
  }
  .eco-panel.abierto ~ .eco-cejas{opacity:1;pointer-events:auto;}
  .eco-cejas .flyer-ceja{border-radius:13px 0 0 13px;box-shadow:-7px 5px 18px rgba(13,35,64,.28);}
  .eco-cejas .flyer-ceja-new{left:-4px;right:auto;}
  .eco-panel.abierto ~ .eco-cejas .flyer-ceja.roja{
    animation:flyerShimmer 5.5s ease-in-out 1.2s infinite,
              flyerGlowRojaIzq 3.4s ease-in-out infinite;
  }
  .eco-panel.abierto ~ .eco-cejas .flyer-ceja.azul{
    animation:flyerShimmer 5.5s ease-in-out 2.4s infinite,
              flyerGlowAzulIzq 3.4s ease-in-out .6s infinite;
  }
  @keyframes flyerGlowRojaIzq{
    0%,100%{box-shadow:-7px 5px 18px rgba(13,35,64,.28),0 0 0 0 rgba(214,32,32,0);}
    50%{box-shadow:-7px 5px 18px rgba(13,35,64,.28),0 0 16px 2px rgba(242,74,74,.55);}
  }
  @keyframes flyerGlowAzulIzq{
    0%,100%{box-shadow:-7px 5px 18px rgba(13,35,64,.28),0 0 0 0 rgba(58,159,232,0);}
    50%{box-shadow:-7px 5px 18px rgba(13,35,64,.28),0 0 16px 2px rgba(58,159,232,.55);}
  }
  @media (prefers-reduced-motion:reduce){
    .eco-panel.abierto ~ .eco-cejas .flyer-ceja{animation:none;}
  }

  /* ---------- Lightbox del flyer ---------- */
  .flyer-lb{
    position:fixed;inset:0;z-index:300;
    background:rgba(8,18,36,.92);backdrop-filter:blur(5px);
    display:flex;align-items:flex-start;justify-content:center;
    padding:20px 16px 32px;overflow-y:auto;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .flyer-lb.visible{opacity:1;pointer-events:auto;}
  .flyer-lb-img{
    max-width:min(560px,94vw);width:100%;height:auto;margin:auto;display:block;
    border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55);
  }
  .flyer-lb-x{
    position:fixed;top:14px;right:16px;z-index:301;
    width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;
    backdrop-filter:blur(4px);transition:background .15s;
  }
  .flyer-lb-x:hover{background:rgba(255,255,255,.32);}
  .flyer-lb-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}

  /* ---------- Visor de video vertical ---------- */
  .flyer-vid-lb{
    position:fixed;inset:0;z-index:300;
    background:rgba(8,18,36,.94);backdrop-filter:blur(5px);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .flyer-vid-lb.visible{opacity:1;pointer-events:auto;}
  .flyer-vid-el{
    max-width:min(420px,92vw);max-height:88vh;width:auto;height:auto;
    border-radius:16px;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.6);
  }
  .flyer-vid-x{
    position:fixed;top:14px;right:16px;z-index:301;
    width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;
    backdrop-filter:blur(4px);transition:background .15s;
  }
  .flyer-vid-x:hover{background:rgba(255,255,255,.32);}
  .flyer-vid-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}

  /* ---------- Sección Publicidad (tab info) ---------- */
  .pub-hero{position:relative;border-radius:14px;overflow:hidden;min-height:140px;background:#0d2340;margin-bottom:16px;}
  .pub-hero-img{width:100%;height:155px;object-fit:cover;display:block;opacity:.7;}
  .pub-hero-overlay{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(13,35,64,.9) 40%,transparent);}
  .pub-hero-badge{font-size:10px;font-weight:900;color:#F2A33C;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase;}
  .pub-hero-tit{font-size:18px;font-weight:900;color:#fff;line-height:1.2;}
  .pub-hero-sub{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px;}
  .pub-servicios{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
  .pub-servicio{display:flex;gap:12px;align-items:center;background:var(--fondo);border-radius:12px;padding:12px 14px;cursor:pointer;border:1.5px solid transparent;transition:border-color .18s,background .18s;}
  .pub-servicio:hover{border-color:var(--acento);background:#eaf2fd;}
  .pub-serv-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--acento),var(--acento2));display:flex;align-items:center;justify-content:center;}
  .pub-serv-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .pub-serv-info{flex:1;min-width:0;}
  .pub-serv-info b{font-size:13px;display:block;color:var(--texto);}
  .pub-serv-info span{font-size:11.5px;color:var(--suave);line-height:1.35;}
  .pub-serv-arrow{flex-shrink:0;width:18px;height:18px;stroke:var(--suave);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .pub-precios-tit{font-size:15px;font-weight:900;color:var(--acento);margin-top:4px;}
  .pub-serv-precio{display:block;margin-top:4px;font-size:12px;font-weight:900;color:var(--acento);}
  .pub-serv-precio small{font-weight:700;color:var(--suave);font-size:11px;}

  /* ---------- Modal galería publicidad ---------- */
  .pub-modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(10,20,40,.85);opacity:0;pointer-events:none;transition:opacity .22s;}
  .pub-modal-backdrop.visible{opacity:1;pointer-events:auto;}
  .pub-modal{position:fixed;left:50%;top:50%;z-index:201;transform:translate(-50%,-48%) scale(.96);opacity:0;pointer-events:none;
    width:min(92vw,400px);background:#fff;border-radius:20px;overflow:hidden;transition:transform .22s,opacity .22s;box-shadow:0 24px 60px rgba(0,0,0,.35);}
  .pub-modal.visible{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
  .pub-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;}
  .pub-modal-tit{font-size:14px;font-weight:800;color:var(--texto);}
  .pub-modal-x{background:none;border:none;cursor:pointer;padding:4px;color:var(--suave);font-size:18px;line-height:1;}
  .pub-modal-x:hover{color:var(--texto);}
  .pub-modal-slider{position:relative;overflow:hidden;background:#0d2340;height:300px;}
  .pub-modal-track{display:flex;transition:transform .32s cubic-bezier(.4,0,.2,1);height:100%;}
  .pub-modal-slide{min-width:100%;position:relative;display:flex;align-items:center;justify-content:center;height:100%;}
  .pub-modal-slide img,.pub-modal-slide video{width:100%;height:100%;object-fit:contain;background:#0d2340;display:block;}
  .pub-modal-slide-tag{position:absolute;top:10px;left:10px;background:rgba(13,35,64,.75);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.5px;}
  .pub-modal-prev,.pub-modal-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s;}
  .pub-modal-prev:hover,.pub-modal-next:hover{background:rgba(255,255,255,.35);}
  .pub-modal-prev{left:10px;}
  .pub-modal-next{right:10px;}
  .pub-modal-prev svg,.pub-modal-next svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
  .pub-modal-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 6px;}
  .pub-modal-dot{width:7px;height:7px;border-radius:50%;background:var(--borde);border:none;cursor:pointer;padding:0;transition:background .15s,transform .15s;}
  .pub-modal-dot.activo{background:var(--acento);transform:scale(1.25);}
  .pub-modal-caption{padding:10px 16px 16px;font-size:12px;color:var(--suave);text-align:center;line-height:1.4;}
  .pub-modal-slide img,.pub-modal-slide video{cursor:zoom-in;}
  /* ---------- Visor fullscreen ---------- */
  .pub-visor{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
  .pub-visor.visible{opacity:1;pointer-events:auto;}
  .pub-visor img,.pub-visor video{max-width:100vw;max-height:100vh;object-fit:contain;cursor:zoom-out;}
  .pub-visor-x{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:20px;backdrop-filter:blur(6px);line-height:1;}
  .pub-visor-x:hover{background:rgba(255,255,255,.3);}

  /* ---------- Halo del negocio seleccionado (sonar de 3 anillos) ---------- */
  .sel-halo{
    position:relative; width:46px;height:46px;pointer-events:none;
  }
  .sel-halo i{
    position:absolute; inset:0; border-radius:50%; border:3px solid var(--acento);
    animation:halo 1.8s ease-out infinite;
  }
  .sel-halo i:nth-child(2){animation-delay:.5s;}
  .sel-halo i:nth-child(3){animation-delay:1s;}
  @keyframes halo{
    0%{transform:scale(.45);opacity:1;box-shadow:0 0 0 0 rgba(26,111,212,.5);}
    100%{transform:scale(1.5);opacity:0;box-shadow:0 0 0 24px rgba(26,111,212,0);}
  }
  .sel-halo--oro i{border-color:#E8A50C;}
  .sel-halo--oro i{box-shadow:0 0 0 0 rgba(232,165,12,.5);}
  @media (prefers-reduced-motion: reduce){
    .sel-halo i{animation:none;opacity:.8;}
    .sel-halo i:nth-child(2),.sel-halo i:nth-child(3){display:none;}
  }

  /* ---------- Ripple al explotar un cluster ---------- */
  .mapa-ripple{
    position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px;
    border-radius:50%; border:3px solid #1a6fd4; pointer-events:none;
    opacity:.9; transform:scale(1); z-index:5;
    transition:transform .65s cubic-bezier(.2,.7,.3,1), opacity .65s ease;
  }
  .mapa-ripple.activo{transform:scale(4.5); opacity:0;}

  /* ---------- Partículas al abrir un negocio ---------- */
  .mapa-particula{
    position:absolute; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
    border-radius:50%; pointer-events:none; z-index:5; will-change:transform,opacity;
  }

  /* ---------- Botones Categorías / Negocios del header ---------- */
  .hwrap{position:relative;flex-shrink:0;}
  .grupo-filtros{display:flex;align-items:center;gap:8px;}
  .eco-btn.pegado{flex-shrink:0;}
  .eco-btn.solo-icono{padding:9px 11px;font-size:14px;color:var(--suave);}
  .eco-btn.solo-icono:hover{color:#d6336c;background:#FCEEF2;border-color:#F6D4DE;}
  .btn-quitar-filtros{
    background:#FDECEF;
    border-color:#F6CAD4;color:#d6336c;box-shadow:none;
  }
  .btn-quitar-filtros:hover{filter:none;background:#FAD9DF;}
  .hbtn{
    display:flex;align-items:center;gap:7px;
    background:#fff;border:1px solid var(--borde);border-radius:999px;
    padding:9px 14px;cursor:pointer;font-family:inherit;
    font-size:12.5px;font-weight:700;color:var(--texto);
    box-shadow:0 2px 10px rgba(13,35,64,.08);
  }
  .hbtn:hover{background:#F0F6FB;}
  .hbtn svg, .eco-btn svg{width:17px;height:17px;stroke:var(--acento);fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  .hbtn:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
  .hmenu{
    position:fixed; top:0; left:0; right:auto; bottom:0;
    width:min(360px,88vw); height:100%; max-height:none;
    background:#fff; border-right:1px solid var(--borde);
    box-shadow:24px 0 60px rgba(28,39,51,.22); overflow:hidden; display:none;
    border-radius:0 26px 26px 0;
    transform:translateX(-105%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
    z-index:32;
  }
  .hmenu.visible{display:flex;flex-direction:column;transform:translateX(0);}
  .hmenu-head{
    padding:10px 16px 7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--suave);font-weight:800;background:#F7F9FC;border-bottom:1px solid var(--borde);
    position:relative;
  }
  .hmenu-cerrar{
    display:flex;align-items:center;justify-content:center;position:absolute;top:6px;right:8px;
    width:28px;height:28px;border-radius:50%;border:none;background:none;
    font-size:15px;color:var(--suave);cursor:pointer;line-height:1;
  }
  .hmenu-cerrar:hover{background:#E8EEF6;}
  .hmenu-busca{padding:8px 12px;border-bottom:1px solid var(--borde);}
  .hmenu-directorio{display:block;margin-top:7px;text-align:center;padding:8px 10px;border-radius:10px;
    background:#eef4ff;color:#1a6fd4;font-weight:800;font-size:12.5px;text-decoration:none;border:1px solid #d6e4fa;}
  .hmenu-directorio:hover{background:#1a6fd4;color:#fff;}
  .hmenu-busca input{
    width:100%;border:1px solid var(--borde);border-radius:10px;padding:8px 12px;
    font-family:inherit;font-size:13px;outline:none;color:var(--texto);
  }
  .hmenu-orden{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--borde);}
  .hmenu-lista{overflow-y:auto;flex:1;min-height:0;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  }
  .orden-btn{
    flex:1;border:1px solid var(--borde);background:#fff;border-radius:10px;
    padding:7px 8px;font-family:inherit;font-size:12px;font-weight:700;
    color:var(--suave);cursor:pointer;
  }
  .orden-btn:hover{background:#F0F6FB;}
  .orden-btn.activo{background:var(--acento);color:#fff;border-color:var(--acento);}
  .orden-btn:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
  .cat-grupo-head{
    padding:8px 16px 5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--suave);font-weight:800;background:#F7F9FC;border-bottom:1px solid var(--borde);
    position:sticky;top:0;
  }
  .hmenu-chips{padding:12px;display:flex;flex-wrap:wrap;gap:8px;overflow-y:auto;}
  .hmenu-chips .chip{box-shadow:none;}
  .hbtn .corto{display:none;}

  /* ---------- Lista de categorías (estilo marketplace) ---------- */
  .cat-row{
    display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;
    border-bottom:1px solid #F0F4F9;font-size:13.5px;font-weight:700;
  }
  .cat-row:hover,.cat-row:focus-visible{background:#F2F8FD;outline:none;}
  .cat-row.activo{background:#E8F1FC;}
  .cat-row .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .cat-nombre{flex:1;}
  .cat-check{color:var(--acento);font-weight:800;}
  .chip-mas{border-style:dashed;color:var(--acento);font-weight:800;}

  /* ---------- Contador de lanzamiento ---------- */
  .countdown{
    position:static;margin:0 auto;display:inline-block;
    background:linear-gradient(160deg,#1a6fd4,#0d2340);border-radius:18px;
    padding:10px 16px 12px;box-shadow:0 12px 34px rgba(13,35,64,.34);
    color:#fff;text-align:center;max-width:94vw;
    animation:cdEntra .5s cubic-bezier(.2,.8,.2,1) both;
  }

  /* Contador flotante sobre el mapa (visible al cerrar el home) */
  #countdown-mapa{
    display:none !important;   /* el reloj solo va en la pantalla de inicio, no sobre el mapa */
    position:fixed;bottom:160px;left:50%;transform:translateX(-50%);
    z-index:20;pointer-events:none;
    opacity:0;visibility:hidden;
    transition:opacity .4s ease, visibility .4s ease;
  }
  #countdown-mapa.visible{opacity:1;visibility:visible;}
  @media (max-width:640px){ #countdown-mapa{display:none !important;} }   /* en celular estorba dentro del mapa; en el inicio se queda */
  #countdown-mapa .countdown{
    font-size:85%;
    padding:8px 12px 10px;
    box-shadow:0 8px 26px rgba(13,35,64,.40);
    border-radius:14px;
    animation:none;
  }
  #countdown-mapa .cd-circulo,
  #countdown-mapa .cd-circulo svg{width:42px;height:42px;}
  #countdown-mapa .cd-num{font-size:15px;}
  #countdown-mapa .cd-anillos{gap:8px;}
  @media(max-width:380px){
    #countdown-mapa .cd-circulo,
    #countdown-mapa .cd-circulo svg{width:36px;height:36px;}
    #countdown-mapa .cd-num{font-size:13px;}
    #countdown-mapa .cd-anillos{gap:6px;}
  }
  @keyframes cdEntra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .cd-titulo{font-size:11.5px;font-weight:800;margin-bottom:8px;white-space:nowrap;}
  .cd-titulo b{color:#ffd24a;}
  .cd-anillos{display:flex;gap:11px;justify-content:center;}
  .cd-unidad{display:flex;flex-direction:column;align-items:center;gap:4px;}
  .cd-circulo{position:relative;width:50px;height:50px;}
  .cd-circulo svg{width:50px;height:50px;transform:rotate(-90deg);}
  .cd-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5;}
  .cd-prog{fill:none;stroke:url(#cdGrad);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:138.23;stroke-dashoffset:138.23;transition:stroke-dashoffset .5s linear;}
  .cd-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
  .cd-lbl{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72);}
  .cd-vivo{font-size:14px;font-weight:800;padding:8px 6px;white-space:nowrap;}
  @media (max-width:380px){
    .countdown{padding:9px 12px 11px;}
    .cd-anillos{gap:8px;}
    .cd-circulo,.cd-circulo svg{width:44px;height:44px;}
    .cd-num{font-size:15px;}
  }

  /* ---------- Modo equipo lento: apaga efectos decorativos pesados ---------- */
  body.equipo-lento .flyer-ceja,
  body.equipo-lento .flyer-ceja.izq,
  body.equipo-lento .agente3d model-viewer,
  body.equipo-lento .agente3d img.robot-img,
  body.equipo-lento .agente3d video.robot-img,
  body.equipo-lento .robot-img{ animation:none !important; }
  body.equipo-lento .flyer-ceja::before,
  body.equipo-lento .flyer-ceja::after{ animation:none !important; }
  /* blur de fondo = caro en GPU integradas; lo cambiamos por opacidad sólida */
  body.equipo-lento [class*="backdrop"],
  body.equipo-lento .eco-modal-bg,
  body.equipo-lento .pub-modal-backdrop,
  body.equipo-lento #agente-modal-bg{ backdrop-filter:none !important; }

  /* ---------- Pantalla de inicio (home) ---------- */
  .home-inicio{
    position:fixed;inset:0;z-index:45;overflow:hidden;
    background:#e9f2fc;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:24px 18px;overflow-y:auto;
    transition:opacity .42s ease, visibility .42s ease;
  }
  @media (min-width:641px){
    html.con-fondo .home-inicio{background:#e9f2fc url('/img/fondo-1920.webp') center/cover no-repeat;}
  }
  .home-inicio.oculto{opacity:0;visibility:hidden;pointer-events:none;}

  /* ---------- Tarjeta compacta: logo, buscador y botón. Lo demás estorbaba ----------
     Las categorías (Productos/Comida/…) y los datos tapaban la imagen y la
     gente no sabía si picarle a eso o a los pines. Ahora la tarjeta va abajo
     y la imagen con sus pines cliqueables es la protagonista. */
  .home-explora,.home-cats,.home-stats{display:none !important;}
  .home-inicio{justify-content:flex-end;}
  .home-wrap{margin:auto 0 0 !important;padding:18px 18px 18px !important;border-radius:26px !important;
    max-width:460px !important;box-shadow:0 14px 40px rgba(13,35,64,.28) !important;}
  .home-logo{margin-bottom:12px !important;}
  .home-logo .nombre{font-size:26px !important;}
  .home-logo .tag{font-size:12.5px !important;margin-top:4px !important;}
  .home-hint{margin:8px 0 12px !important;}
  @media (max-width:640px){
    .home-inicio{padding:14px 12px calc(14px + env(safe-area-inset-bottom, 0px));}
    .home-wrap{padding:14px 14px 14px !important;border-radius:22px !important;}
    .home-logo .tag{display:none;}
    .home-hint{display:none;}
    .home-buscar{height:52px !important;}
    .home-buscar input{font-size:16px;}
    .home-wrap .home-buscar{margin-bottom:10px;}
  }

  /* ---------- Fondo de la portada con zonas que se pican (admin_portada.php) ----------
     La caja tiene la proporción exacta de la imagen y se agranda hasta cubrir
     la pantalla, igual que background-size:cover. Así las zonas, guardadas en
     porcentaje de la imagen, caen justo encima de sus pines en cualquier pantalla. */
  .home-inicio.con-portada{background:#0d2340 !important;}
  .home-inicio.con-portada .home-pines{display:none;}
  .home-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .home-fondo-caja{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%, calc(100vh * var(--ar, 1.6)));height:max(100%, calc(100vw / var(--ar, 1.6)));}
  .home-fondo-caja img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;}
  .home-zona{position:absolute;border:none;background:transparent;padding:0;cursor:pointer;border-radius:12px;
    -webkit-tap-highlight-color:transparent;transition:background .15s, box-shadow .15s;}
  .home-zona:hover,.home-zona:focus-visible{background:rgba(255,255,255,.14);outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 6px 20px rgba(13,35,64,.35);}
  .home-zona:active{background:rgba(255,255,255,.24);}
  /* Un destello suave al entrar, para que se note que los pines sí se pican */
  .home-zona::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:0 0 0 2px rgba(255,255,255,.0);animation:zonaAviso 1.6s ease-out 1.2s 2;}
  @keyframes zonaAviso{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75);}100%{box-shadow:0 0 0 14px rgba(255,255,255,0);}}
  .home-zona-tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
    background:#0d2340;color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;
    opacity:0;pointer-events:none;transition:opacity .15s;}
  .home-zona:hover .home-zona-tip,.home-zona:focus-visible .home-zona-tip{opacity:1;}
  @media (prefers-reduced-motion: reduce){ .home-zona::after{animation:none;} }
  .home-globo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
  .home-globo canvas{display:block;width:100%;height:100%;}

  /* ---------- Pines que "vuelan" desde los lados al hacer scroll en el inicio ---------- */
  .home-pines{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
  .home-pin{
    position:absolute;width:50px;height:50px;opacity:0;
    transition:transform .85s cubic-bezier(.22,1.2,.36,1), opacity .5s ease;
  }
  .home-pin--izq{left:8px;transform:translateX(-160px) rotate(-380deg) scale(.5);}
  .home-pin--der{right:8px;transform:translateX(160px) rotate(380deg) scale(.5);}
  .home-pin.en{opacity:1;transform:translateX(0) rotate(0deg) scale(1);}
  .home-pin-bob{
    width:100%;height:100%;border-radius:50% 50% 50% 0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,#3a9fe8,#1a6fd4);
    box-shadow:0 10px 22px rgba(13,35,64,.32), inset 0 1px 0 rgba(255,255,255,.35);
    transform:rotate(-45deg);
  }
  .home-pin-ico{transform:rotate(45deg);display:flex;width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));}
  .home-pin-ico svg{width:100%;height:100%;}
  .home-pin.en .home-pin-bob{animation:pinFlota 2.6s ease-in-out infinite;}
  @keyframes pinFlota{0%,100%{transform:rotate(-45deg) translateY(0);}50%{transform:rotate(-45deg) translateY(-6px);}}
  .home-pin:nth-child(2n) .home-pin-bob{background:linear-gradient(145deg,#F3C64A,#D4A017);}
  @media (max-width:480px){ .home-pin{width:42px;height:42px;} .home-pin-ico{width:18px;height:18px;} }
  @media (prefers-reduced-motion: reduce){
    .home-pin{transition:opacity .3s ease;}
    .home-pin--izq,.home-pin--der{transform:none;}
    .home-pin.en .home-pin-bob{animation:none;}
  }
  .home-wrap{position:relative;z-index:2;width:100%;max-width:430px;display:flex;flex-direction:column;align-items:stretch;margin:auto 0;
    background:#fff;border-radius:34px;padding:26px 22px 28px;box-shadow:0 10px 28px rgba(13,35,64,.10);}
  .home-logo{text-align:center;margin-bottom:18px;}
  .home-logo .nombre{font-size:30px;font-weight:900;color:#1a6fd4;letter-spacing:-.02em;line-height:1;}
  .home-logo .tag{font-size:13.5px;color:#5f7a99;margin-top:6px;line-height:1.45;}
  .home-buscar{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #d0e2f5;
    border-radius:16px;padding:0 7px 0 15px;height:58px;box-shadow:0 8px 26px rgba(26,111,212,.12);}
  .home-buscar:focus-within{border-color:#1a6fd4;}
  .home-buscar .lupa{display:flex;flex-shrink:0;}
  .home-buscar .lupa svg{width:20px;height:20px;stroke:#1a6fd4;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}
  .home-buscar input{flex:1 1 0;min-width:0;width:0;border:none;outline:none;font-size:16px;font-family:inherit;background:transparent;color:#0d2340;height:100%;}
  /* El input de búsqueda trae un ancho mínimo propio: en celular empujaba el
     botón fuera de la caja. Con min-width:0 se encoge y el botón se queda adentro. */
  .home-buscar{min-width:0;}
  .home-buscar .ir{border:none;background:#1a6fd4;color:#fff;width:44px;height:44px;border-radius:12px;font-size:18px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;}
  .home-hint{text-align:center;font-size:12px;color:#8aa3bf;margin:9px 0 18px;}
  /* Los ejemplos son botones: se leen mejor y al picarlos buscan de una vez */
  .home-hint{color:#5f7a99;font-weight:700;}   /* sin "display": en celular sigue oculto por su regla de arriba */
  .home-hint button{border:1px solid #d0e2f5;background:#f4f8fd;color:#1a6fd4;font:inherit;font-weight:800;
    padding:5px 12px;margin:0 0 0 6px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s;}
  .home-hint button:hover,.home-hint button:focus-visible{background:#e3eefc;border-color:#1a6fd4;outline:none;}
  .home-explora{font-size:13px;font-weight:800;color:#5f7a99;margin-bottom:10px;}
  .home-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
  .home-cat{background:#fff;border:1px solid #e2edf8;border-radius:16px;padding:0;overflow:hidden;cursor:pointer;transition:.15s;font-family:inherit;}
  .home-cat:hover{border-color:#cfe0f2;transform:translateY(-2px);box-shadow:0 4px 12px rgba(13,35,64,.08);}
  .home-cat .cat-img-wrap{position:relative;height:132px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .home-cat .cat-emoji{font-size:34px;opacity:.5;}
  .home-cat .cat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:6px;}
  .home-cat .lb{display:block;padding:10px 8px;font-size:14px;font-weight:800;color:#1a6fd4;text-align:center;letter-spacing:.01em;border-top:1px solid #eef3f9;}
  .home-stats{display:flex;gap:8px;justify-content:center;margin-bottom:16px;}
  .home-stat{flex:1;background:#fff;border:1px solid #e8f1fb;border-radius:12px;padding:9px 6px;text-align:center;}
  .home-stat .n{font-size:18px;font-weight:900;color:#1a6fd4;}
  .home-stat .l{font-size:10.5px;color:#5f7a99;}
  .home-cd{display:flex;justify-content:center;margin-bottom:16px;}
  .home-btn-mapa{width:100%;height:52px;border:none;background:#1a6fd4;color:#fff;border-radius:15px;
    font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 8px 22px rgba(26,111,212,.28);}
  .home-btn-mapa:active{transform:scale(.98);}

  /* ---------- Entrada en cascada del home (se van llenando cada cosa) ---------- */
  @keyframes homeReveal{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:none;}
  }
  .home-wrap > *{opacity:0;animation:homeReveal .55s cubic-bezier(.2,.8,.2,1) both;}
  .home-wrap > *:nth-child(1){animation-delay:.06s;}  /* logo */
  .home-wrap > *:nth-child(2){animation-delay:.16s;}  /* buscador */
  .home-wrap > *:nth-child(3){animation-delay:.24s;}  /* hint */
  .home-wrap > *:nth-child(4){animation-delay:.32s;}  /* "Explora" */
  .home-wrap > *:nth-child(6){animation-delay:.72s;}  /* stats (tras la cascada de tarjetas) */
  .home-wrap > *:nth-child(7){animation-delay:.82s;}  /* contador */
  .home-wrap > *:nth-child(8){animation-delay:.92s;}  /* botón explorar */
  /* el contenedor de categorías no anima como bloque; sus tarjetas entran una por una */
  .home-wrap > .home-cats{animation:none;opacity:1;}
  .home-cats .home-cat{opacity:0;animation:homeReveal .5s cubic-bezier(.2,.8,.2,1) both;}
  .home-cats .home-cat:nth-child(1){animation-delay:.40s;}
  .home-cats .home-cat:nth-child(2){animation-delay:.48s;}
  .home-cats .home-cat:nth-child(3){animation-delay:.56s;}
  .home-cats .home-cat:nth-child(4){animation-delay:.64s;}
  @media (prefers-reduced-motion: reduce){
    .home-wrap > *, .home-cats .home-cat{animation:none !important;opacity:1 !important;transform:none !important;}
  }

  /* ==== Intro LIGERO: el celular se para y gira, revela la tarjeta. Solo transform/opacity (GPU). ==== */
  .home-saltar{position:absolute;top:14px;right:14px;z-index:12;border:none;cursor:pointer;
    background:rgba(13,35,64,.55);color:#fff;font-family:inherit;font-size:12px;font-weight:800;
    padding:8px 14px;border-radius:999px;align-items:center;gap:6px;}
  .home-saltar:hover{background:rgba(13,35,64,.75);}
  .home-cel-stage{display:none;position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;
    align-items:center;justify-content:center;perspective:1300px;perspective-origin:50% 42%;transition:opacity .5s ease;}
  .home-inicio.cine .home-cel-stage{display:flex;}
  .home-inicio.cine .home-saltar{display:flex;}
  .home-cel-sombra{position:absolute;left:50%;top:66%;width:170px;height:26px;margin-left:-85px;
    background:rgba(4,44,83,.24);border-radius:50%;
    transition:transform 1.05s cubic-bezier(.34,1.15,.4,1),opacity 1s ease;}
  .home-cel{position:relative;width:min(230px,58vw);aspect-ratio:172/350;transform-style:preserve-3d;
    will-change:transform;
    transform:translateY(9vh) rotateX(72deg) rotateZ(-12deg) scale(.9);
    transition:transform 1.1s cubic-bezier(.34,1.15,.4,1),opacity .55s ease;}
  .home-cel.parado{transform:translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);}
  .home-cel.girando{transform:translateY(-2vh) rotateY(-180deg) scale(1.2);opacity:0;
    transition:transform 1.05s cubic-bezier(.5,0,.45,1),opacity .5s ease .5s;}
  .home-cel .celp{position:absolute;inset:0;display:flex;flex-direction:column;background:#eaf3fd;
    border:6px solid #10233f;border-radius:28px;overflow:hidden;box-shadow:0 20px 34px rgba(4,44,83,.3);
    backface-visibility:hidden;}
  .celp .celp-top{padding:14px 12px 6px;text-align:center;}
  .celp .celp-n{font-size:17px;font-weight:900;color:#185fa5;line-height:1;}
  .celp .celp-t{font-size:8.5px;color:#5f7a99;margin-top:2px;}
  .celp .celp-s{margin:0 11px;height:26px;border-radius:8px;background:#fff;border:1px solid #cfe0f2;
    display:flex;align-items:center;gap:6px;padding:0 9px;font-size:9px;color:#8aa3bf;}
  .celp .celp-s svg{width:11px;height:11px;stroke:#185fa5;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
  .celp .celp-g{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 11px;flex:1;min-height:0;}
  .celp .celp-g div{background:#fff;border-radius:8px;border:1px solid #e2edf8;overflow:hidden;
    display:flex;align-items:center;justify-content:center;}
  .celp .celp-g div img{width:100%;height:100%;object-fit:cover;display:block;}
  .celp .celp-b{margin:6px 11px 11px;height:24px;border-radius:8px;background:#185fa5;color:#fff;
    font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:4px;}
  .home-inicio.cine .home-wrap{opacity:0;transform:translateY(22px) scale(.97);pointer-events:none;}
  .home-inicio.cine.revelado .home-wrap{opacity:1;transform:none;pointer-events:auto;
    transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
  @media (max-width:640px){ .home-cel-sombra{top:70%;width:140px;margin-left:-70px;} }
  @media (prefers-reduced-motion: reduce){
    .home-cel-stage{display:none !important;}
    .home-inicio.cine .home-wrap{opacity:1 !important;transform:none !important;pointer-events:auto;}
  }

  /* La revista vive dentro del panel, en un marco: el visor ya se acomoda solo
     a lo angosto y se pasa a una hoja, así que no hace falta sacar al cliente
     del mapa para hojearla. */
  .revista-cont{display:none;flex:1;min-height:0;}
  .revista-cont.visible{display:block;}
  .revista-cont iframe{width:100%;height:100%;min-height:420px;border:0;display:block;background:#e9eef4;}
  /* Facebook ocupa todo el alto libre del panel, como Videos; si no, el
     iframe se quedaba chaparrito y abajo sobraba un hueco blanco. */
  .fb-cont{flex:1;min-height:0;}
  .fb-cont.visible{display:flex;flex-direction:column;align-items:center;}
  /* Se le quita el colchón de abajo que llevan las demás pestañas cuando el
     agente está en chiquito (hasta 480 px): el plugin hace su propio scroll y
     ese colchón era lo que lo dejaba diminuto en el celular. A los lados solo
     se respeta la columna de pestañas. */
  .panel .fb-cont, .panel.ag-mini-on .fb-cont{padding:6px 4px 4px 50px !important;}
  /* El aviso "Las conversaciones se guardan..." lo pone js/visita.js debajo
     del chat. Solo tiene sentido en la pestaña del Agente; en las demás eran
     dos renglones de puro estorbo, sobre todo en el celular. */
  .panel[data-tab]:not([data-tab="chat"]) .miag-priv-chat{display:none !important;}
  .fb-cont iframe{display:block;margin:0 auto;border:0;overflow:hidden;max-width:100%;flex-shrink:0;}
  .fb-cont .fb-abrir{display:block;text-align:center;margin:10px 0 4px;font-size:12.5px;font-weight:700;color:#1877f2;text-decoration:none;}
  /* Pestaña Redes: botones para cambiar de red + cuerpo que ocupa el resto. */
  .fb-cont .redes-chips{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;margin:2px auto 8px;flex-shrink:0;}
  .fb-cont .red-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #d5e3f5;background:#fff;color:#3b5372;
    font:800 12.5px Nunito,system-ui,sans-serif;border-radius:999px;padding:7px 13px;cursor:pointer;}
  .fb-cont .red-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .fb-cont .red-chip.activo.red-facebook{background:#1877f2;border-color:#1877f2;color:#fff;}
  .fb-cont .red-chip.activo.red-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);border-color:transparent;color:#fff;}
  .fb-cont .red-chip.activo.red-tiktok{background:#111;border-color:#111;color:#fff;}
  .fb-cont .red-chip.activo.red-web{background:#0d2340;border-color:#0d2340;color:#fff;}
  /* Su página en vivo: ocupa todo el cuerpo, con orilla redonda. */
  .fb-cont .web-marco{flex:1;min-height:420px;width:100%;border:1px solid #e5edf7;border-radius:14px;overflow:hidden;background:#fff;position:relative;}
  /* En compu la página se ve "de lejos" (al 75%): cabe mucho más de ella en
     el mismo espacio, como una vista previa. El iframe se hace más grande y
     se encoge, así la página se acomoda como en una pantalla ancha. */
  .fb-cont .web-marco iframe{position:absolute;top:0;left:0;border:0;display:block;
    width:133.34%;height:133.34%;max-width:none;margin:0;transform:scale(.75);transform-origin:0 0;}
  @media (max-width:760px){
    .fb-cont .web-marco iframe{width:100%;height:100%;transform:none;}
  }
  /* "Abrir completa" va arriba junto a los botones, no abajo: deja más alto a la página. */
  .fb-cont .red-abrir{display:inline-flex;align-items:center;gap:5px;font:800 12px Nunito,system-ui,sans-serif;color:#1a6fd4;
    text-decoration:none;padding:7px 10px;border-radius:999px;}
  .fb-cont .red-abrir:hover{background:#eaf2fd;}
  .web-ico{width:84px;height:84px;border-radius:50%;background:#eaf2fd;color:#1a6fd4;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
  .web-ico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .web-tarjeta .web-dom{color:#1a6fd4;}
  .web-tarjeta .web-btn{background:#1a6fd4;}
  .fb-cont .redes-cuerpo{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;overflow-y:auto;}
  .fb-cont .redes-cuerpo .tiktok-embed{width:100%;}
  .ig-tarjeta{width:100%;max-width:360px;margin:24px auto;text-align:center;background:#fff;border:1px solid #e5edf7;border-radius:20px;
    padding:28px 20px 24px;box-shadow:0 8px 24px rgba(13,35,64,.08);display:flex;flex-direction:column;align-items:center;gap:4px;}
  .ig-aro{width:96px;height:96px;border-radius:50%;padding:4px;background:linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);margin-bottom:10px;}
  .ig-logo{width:100%;height:100%;border-radius:50%;background:#fff;border:3px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .ig-logo img{width:100%;height:100%;object-fit:contain;}
  .ig-tarjeta b{font-size:16px;color:#0d2340;}
  .ig-tarjeta .ig-user{font-size:13.5px;font-weight:800;color:#8134af;}
  .ig-tarjeta p{font-size:13px;color:#7a96b5;margin:8px 0 14px;}
  .ig-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);color:#fff;
    text-decoration:none;font-weight:900;font-size:14px;border-radius:999px;padding:11px 22px;}
  .ig-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  /* Fila de redes en Datos: botones redondos con el color de cada red. */
  .info-redes{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;}
  .info-redes a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}
  .info-redes a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .info-redes .r-facebook{background:#1877f2;}
  .info-redes .r-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);}
  .info-redes .r-tiktok{background:#111;}
  .revista-abrir{display:block;text-align:center;padding:8px;font-size:12px;font-weight:800;
    color:var(--acento,#1a6fd4);text-decoration:none;}

  /* ── Encabezado compacto ──
     Al entrar a una pestaña el encabezado se encoge: logo chico, nombre en una
     línea y la dirección como texto. Recupera como 200px de alto, que es lo
     que hacía falta para que el cliente viera contenido sin deslizar. */
  .panel.compacto .panel-logo{ width:40px; height:40px; }
  .panel.compacto .panel-head h2{ font-size:15px; line-height:1.15; }
  .panel.compacto .panel-head .giro{ display:none; }
  .panel.compacto .dir{ display:none; }   /* la dirección vive en Datos */
  .panel.compacto #panelClub{ display:none !important; }
  .panel.compacto .panel-cta-mini{ display:none !important; }
  /* Los dos botones grandes se van: WhatsApp baja al piso y el catálogo se
     vuelve un enlace de texto, que es lo que es — navegación, no conversión. */
  .panel.compacto .panel-cta{ display:none; }
  .panel.compacto .panel-head{ padding-bottom:6px; }
  .panel-cta-mini{ display:none; margin:2px 14px 8px; font-size:11.5px; font-weight:800; }
  .panel.compacto .panel-cta-mini{ display:block; }
  .panel-cta-mini a{ color:#1a6fd4; text-decoration:none; }

  .wa-piso{ display:none; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
            border-top:1px solid #e6edf5; background:#fff; }
  .wa-piso.visible{ display:block; }
  .wa-piso button{ width:100%; border:none; border-radius:12px; background:#25d366; color:#fff;
    font-family:inherit; font-size:14.5px; font-weight:800; padding:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px; }

  /* ── Pestañas verticales al costado, en TODAS las pantallas ──
     Mismo comportamiento en celular y en compu: el cliente ve lo mismo en los
     dos lados y no hay dos diseños que mantener. Pegadas al filo izquierdo del
     panel, por fuera, caben las que sean sin quitarle alto ni ancho al
     contenido — que era el problema al ir agregando pestañas. */
  /* Con !important y anclado a .panel a propósito: estas reglas van al final
     de una hoja larga con muchas capas de estilos del panel, y basta con que
     una regla vieja tenga la misma especificidad para que gane sin que se
     note. Aquí no puede pasar. */
  /* DENTRO del panel, no por fuera. Sacarlas con translateX peleaba contra el
     recorte del panel y contra su animación de entrada: se veían un instante
     en la orilla y luego se reacomodaban. Pegadas a la orilla interior no hay
     nada que las recorte. */
  .panel #tabs{
    position:absolute !important; left:0; top:var(--tabs-top,118px); bottom:0;
    transform:none !important;
    display:flex !important; flex-direction:column !important; gap:6px;
    width:44px !important; padding:6px 0 0 0 !important; border-bottom:0 !important;
    /* Muy arriba: el chat, los productos y la revista son bloques con fondo
       propio y se pintaban encima de la columna, dejando ver solo la primera
       pestaña. */
    background:transparent !important; z-index:40;
    overflow-y:auto; overflow-x:hidden; align-content:flex-start;
    pointer-events:auto;
  }
  .panel #tabs::-webkit-scrollbar{ display:none; }
  /* Flechitas de la columna de pestañas: cuando un negocio tiene muchas
     (Productos, Promos, Videos, Revista, Facebook, Agente, Datos...) las de
     abajo quedaban fuera de la vista y nadie sabía que había más. */
  .panel .tabs-flecha{
    position:absolute; left:0; width:44px; height:34px; z-index:41;
    display:none; align-items:center; justify-content:center;
    border:0; padding:0; cursor:pointer; color:#1a6fd4;
  }
  .panel .tabs-flecha.visible{ display:flex; }
  .panel .tabs-flecha svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6;
    stroke-linecap:round; stroke-linejoin:round; background:#fff; border-radius:50%; padding:2px;
    box-shadow:0 2px 8px rgba(13,35,64,.25); }
  .panel .tabs-flecha.abajo{ bottom:calc(6px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(to top, rgba(255,255,255,.95) 40%, rgba(255,255,255,0)); }
  .panel .tabs-flecha.arriba{ top:var(--tabs-top,118px);
    background:linear-gradient(to bottom, rgba(255,255,255,.95) 40%, rgba(255,255,255,0)); }
  .panel .tabs-flecha.abajo.avisa svg{ animation:tabsBrinca 1s ease-in-out 3; }
  @keyframes tabsBrinca{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
  /* El contenido se recorre a la derecha lo que miden las pestañas. */
  .panel .chat, .panel #chatInput, .panel #agente3d,
  .panel .productos, .panel .promos-cont, .panel .videos-cont,
  .panel .revista-cont, .panel .club-cont, .panel .info-cont, .panel .filtro-cond, .panel .wa-piso{
    padding-left:50px;
  }
  .panel #tabs .tab{
    flex:none !important; width:40px !important; min-height:88px;
    border-radius:0 12px 12px 0 !important; border-left:0 !important;
    padding:10px 4px !important; gap:6px;
    box-shadow:2px 2px 10px rgba(13,35,64,.10);
  }
  /* El texto rotado se lee de corrido, y el ícono es lo que la gente reconoce
     de un vistazo: por eso se conservan los dos. */
  .panel #tabs .tab span{
    writing-mode:vertical-rl !important; transform:rotate(180deg);
    font-size:11px; letter-spacing:.04em; white-space:nowrap;
  }
  .panel #tabs .tab svg{ width:19px; height:19px; }
  .panel #tabs .tab.activo{ transform:none; box-shadow:-3px 2px 12px rgba(26,111,212,.35); }
  /* En celular se conserva la columna lateral de 44px, incluso por debajo
     de 380px. El overflow vertical permite recorrerla en pantallas bajas. */


  .club-cont{display:none;padding:12px 14px 16px;overflow-y:auto;}
  /* ---------- Pestaña Datos ---------- */
  .info-cont{display:none;padding:12px 14px 16px;overflow-y:auto;}
  .panel .info-cont{ padding-left:58px; }
  .info-cont.visible{display:block;}
  .info-fotos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
  .info-fotos[hidden]{display:none;}
  .info-fotos button{border:none;padding:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:#eef2f7;position:relative;aspect-ratio:4/3;}
  .info-fotos button:first-child{grid-column:1 / -1;aspect-ratio:16/9;}
  .info-fotos img{width:100%;height:100%;object-fit:cover;display:block;}
  .info-fotos .pfEtq{position:absolute;left:8px;bottom:8px;background:rgba(13,35,64,.72);color:#fff;font-size:10.5px;font-weight:800;
    padding:2px 8px;border-radius:999px;text-transform:capitalize;}
  .info-fotos .pfMas{position:absolute;inset:0;background:rgba(13,35,64,.55);color:#fff;font-size:15px;font-weight:800;
    display:flex;align-items:center;justify-content:center;}
  .info-fila{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #eef2f7;}
  .info-fila:last-child{border-bottom:none;}
  .info-fila .ic{width:34px;height:34px;border-radius:10px;background:#eef4fd;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .info-fila .ic svg{width:18px;height:18px;stroke:#1a6fd4;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .info-fila .tx{flex:1;min-width:0;font-size:13px;color:#334155;line-height:1.4;}
  .info-fila .tx b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7a8aa0;margin-bottom:2px;}
  .info-fila a.acc, .info-fila button.acc{display:inline-flex;align-items:center;gap:5px;margin-top:6px;border:none;cursor:pointer;
    background:#0d2340;color:#fff;text-decoration:none;font:inherit;font-size:12px;font-weight:800;padding:6px 11px;border-radius:9px;}
  .info-desc{font-size:13.5px;line-height:1.6;color:#334155;padding:2px 2px 12px;border-bottom:1px solid #eef2f7;white-space:normal;}
  .info-club{margin-top:4px;padding:10px 12px;border-radius:11px;background:#eefbe3;border:1px solid #c3e8a2;}
  .info-club b{display:block;font-size:12.5px;color:#3d7000;}
  .info-club span{font-size:12px;color:#5a7a3a;}
  .panel .club-cont{ padding-left:58px; }   /* 50 de la columna + su propio aire */
  .club-cont.visible{display:block;}
  .club-prog{border:1px solid #cfe8bd;background:#f4fbef;border-radius:14px;padding:12px 14px;margin-bottom:10px;}
  .club-prog b{font-size:14px;}
  .club-prog .premio{color:#3b7a1f;font-weight:800;font-size:13px;margin-top:2px;}
  .club-sellos{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap;}
  .club-sellos i{width:16px;height:16px;border-radius:50%;border:2px solid #9ed17c;display:block;}
  .club-pie{font-size:11.5px;color:#7a96b5;margin-top:10px;line-height:1.5;}
  .club-cta{display:block;text-align:center;margin-top:10px;background:#0d2340;color:#fff;
    border-radius:12px;padding:11px;font-weight:800;font-size:13px;text-decoration:none;}
  /* Página de revista dentro del chat */
  .rev-prev{margin:8px 0 2px;border:1px solid #d6e2f0;border-radius:14px;overflow:hidden;background:#fff;max-width:320px;}
  .rev-prev-img{min-height:60px;display:flex;align-items:center;justify-content:center;color:#7a96b5;font-size:12px;font-weight:700;background:#f4f7fb;}
  .rev-prev-img img{display:block;width:100%;height:auto;}
  .rev-prev-btn{display:block;text-align:center;padding:8px 10px;font-size:12.5px;font-weight:800;color:#5a36c9;background:#f3effe;text-decoration:none;}
  .club-cta.sec{background:#fff;color:#0d2340;border:1.5px solid #0d2340;margin-top:8px;}
  .club-cta.sec:hover{background:#f0f4fa;}

/* ===== bloque 2 de 3 ===== */
/* ===== Tooltip del agente ===== */
#agente-tooltip{
  position:fixed;top:20px;right:76px;z-index:11;
  background:#0d2340;color:#fff;
  padding:10px 14px;border-radius:14px;
  font-size:13px;font-weight:600;line-height:1.4;
  max-width:180px;text-align:right;
  box-shadow:0 4px 16px rgba(13,35,64,.25);
  animation:apareceTooltip .4s ease both;
  transition:opacity .3s;
  cursor:pointer;
}
#agente-tooltip strong{color:var(--ambar);}
#agente-tooltip::after{
  content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  border:8px solid transparent;border-left-color:#0d2340;border-right:none;
}
#btn-ocultar-tooltip{
  position:absolute;top:-8px;left:-8px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:1px solid #d0e2f5;
  font-size:10px;cursor:pointer;color:#7a96b5;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(13,35,64,.15);
}
@keyframes apareceTooltip{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:none;}}
#agente-tooltip{display:none !important;}
#agente-fab{display:none !important;
  position:fixed;top:14px;right:14px;z-index:12;
  width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;box-shadow:0 4px 18px rgba(13,35,64,.22);
  align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s;
  overflow:hidden;padding:0;
}
#agente-fab:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(26,111,212,.35);}
#agente-fab model-viewer{width:54px;height:54px;--poster-color:transparent;pointer-events:none;}
#agente-fab .fab-pulso{
  position:absolute;top:6px;right:6px;width:10px;height:10px;
  border-radius:50%;background:#2f9e44;border:2px solid #fff;
  animation:pulso 1.6s ease-in-out infinite;
}

/* ===== Modal centrado del agente ===== */
#agente-modal-bg{
  position:fixed;inset:0;z-index:2000;
  background:rgba(13,35,64,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#agente-modal-bg.visible{opacity:1;pointer-events:auto;}
#agente-modal{
  width:min(400px,94vw);max-height:90vh;
  background:#fff;border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(13,35,64,.35);
  transform:translateY(-40px) scale(.95);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
#agente-modal-bg.visible #agente-modal{transform:translateY(0) scale(1);}

/* Robot baja desde arriba */
#agente-modal .agente3d{height:180px;}
#agente-modal .agente3d model-viewer{height:180px;}
#pwa-banner{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:3100;background:#fff;border-radius:16px;
  box-shadow:0 8px 28px rgba(13,35,64,.22);
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  max-width:340px;width:calc(100% - 32px);
  border:1px solid var(--borde);
  transition:opacity .3s, transform .3s;
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px);
}
#pwa-banner.visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
#pwa-banner img{width:40px;height:40px;border-radius:10px;flex-shrink:0;}
#pwa-banner .pwa-txt{flex:1;min-width:0;}
#pwa-banner .pwa-txt b{font-size:13px;color:var(--texto);display:block;}
#pwa-banner .pwa-txt span{font-size:11.5px;color:var(--suave);}
#pwa-banner .pwa-btns{display:flex;gap:6px;flex-shrink:0;}
#pwa-instalar{background:var(--acento);color:#fff;border:none;border-radius:20px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
#pwa-cerrar{background:none;border:none;color:var(--suave);font-size:18px;cursor:pointer;padding:4px;line-height:1;}

/* ===== bloque 3 de 3 ===== */
/* ================= Acabado premium de botones (estilo 3D / ecommerce) ================= */
:root{ --azul-alto:#4f9bf2; --azul-bajo:#0f57bd; }

/* ---- CTA primario azul: "Buscar" y "Explorar en el mapa" ---- */
.btn-buscar,
.home-btn-mapa{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--azul-alto) 0%,var(--acento) 46%,var(--azul-bajo) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -2px 6px rgba(9,53,110,.32) inset,
    0 8px 20px rgba(26,111,212,.38),
    0 2px 5px rgba(13,35,64,.16);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), filter .18s;
}
.btn-buscar::before,
.home-btn-mapa::before{
  content:'';position:absolute;left:7%;right:7%;top:2px;height:40%;border-radius:inherit;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));
}
.btn-buscar:hover,
.home-btn-mapa:hover{
  transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -2px 6px rgba(9,53,110,.34) inset,
    0 12px 26px rgba(26,111,212,.46),
    0 3px 7px rgba(13,35,64,.18);
}
.btn-buscar:active,
.home-btn-mapa:active{
  transform:translateY(1px) scale(.99);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 4px rgba(9,53,110,.3) inset,
    0 4px 12px rgba(26,111,212,.34),
    0 1px 3px rgba(13,35,64,.14);
}

/* ---- FAB redondo: orbe con brillo (efecto 3D) ---- */
.fab-main{
  background:radial-gradient(125% 125% at 30% 22%, #63aaf7 0%, var(--acento) 46%, var(--azul-bajo) 100%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.55) inset,
    0 -3px 8px rgba(9,53,110,.4) inset,
    0 8px 18px rgba(26,111,212,.4),
    0 2px 5px rgba(13,35,64,.18);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s;
}
.fab-main:hover{transform:translateY(-1px) scale(1.06);}
.fab-main:active{transform:scale(.95);}

/* ---- FAB mini: profundidad suave + elevación al pasar ---- */
.fab-mini{
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 6px 16px rgba(13,35,64,.14), 0 2px 4px rgba(13,35,64,.08);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s, border-color .16s;
}
.fab-mini:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 10px 22px rgba(13,35,64,.18), 0 3px 6px rgba(13,35,64,.1);}
.fab-mini:active{transform:translateY(0) scale(.97);}

/* ---- Tarjetas de categoría (home): elevación tipo card premium ---- */
.home-cat{
  box-shadow:0 2px 8px rgba(13,35,64,.06), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}
.home-cat:hover{transform:translateY(-2px);border-color:#cfe0f2;
  box-shadow:0 4px 12px rgba(13,35,64,.08);}
.home-cat:active{transform:translateY(-1px) scale(.99);}

/* ---- Botón flecha del buscador del home ---- */
.home-buscar .ir{
  background:linear-gradient(180deg,var(--azul-alto),var(--acento) 55%,var(--azul-bajo));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 14px rgba(26,111,212,.35), 0 2px 4px rgba(13,35,64,.14);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
}
.home-buscar .ir:hover{transform:translateY(-1px);filter:brightness(1.05);}
.home-buscar .ir:active{transform:scale(.95);}

/* ---- Reflejo animado que cruza los CTAs al pasar el cursor ---- */
.btn-buscar::after,
.home-btn-mapa::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn-buscar:hover::after,
.home-btn-mapa:hover::after{ animation:sheenSweep .8s cubic-bezier(.25,.7,.3,1); }
@keyframes sheenSweep{ from{left:-60%;} to{left:130%;} }

/* ---- Pestañas de orilla con acabado premium ---- */
.orilla{
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 6px 18px rgba(13,35,64,.28), 0 2px 6px rgba(13,35,64,.16);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s;
}
.orilla:hover{transform:translateX(3px);filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(13,35,64,.34), 0 3px 8px rgba(13,35,64,.2);}
.orilla:active{transform:translateX(1px) scale(.98);}
.orilla-info{background:linear-gradient(160deg,#3a9fe8,#1a6fd4 55%,#0f57bd);}
.orilla-pub{background:linear-gradient(160deg,#F7B24A,#F2A33C 50%,#E8930C);}

/* ============================================================
   CELULAR: barra de íconos ABAJO y sin el buscador grande (oct 2026)
   Arriba queda libre para el mapa. El buscador ya vive en la lupa de la
   barra (abre su pantalla de búsqueda), así que el de abajo sobraba y
   tapaba media pantalla. Los chips y "Ver todos" quedan encima de la barra.
   ============================================================ */
@media (max-width:640px){
  :root{ --barra-cel: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .navbar-app{
    top:auto !important; bottom:0 !important; height:var(--barra-cel) !important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow:0 -6px 22px rgba(0,71,236,.20), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  .nav-flecha{ top:auto !important; bottom:calc(15px + env(safe-area-inset-bottom, 0px)) !important; }
  /* el menú del embudo ahora se abre hacia arriba, desde la barra */
  .navbar-dropdown{ top:auto !important; bottom:calc(var(--barra-cel) + 8px) !important; transform-origin:bottom center !important; }
  .navbar-item-wrap:not(.abierto) .navbar-dropdown{ transform:translateY(8px) scale(.97) !important; }

  #formFloatBuscar{ display:none !important; }
  .mapa-float-buscar{ bottom:calc(var(--barra-cel) + 8px) !important; }
  .slider-negs-wrap{ bottom:calc(var(--barra-cel) + 8px) !important; }
  .hoja-inferior{ bottom:var(--barra-cel) !important; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left{ bottom:var(--barra-cel) !important; }

  /* lo que colgaba debajo de la barra de arriba sube a la orilla */
  .top-izq{ top:calc(12px + env(safe-area-inset-top, 0px)) !important; }
  .resultados, .comparador{ top:calc(12px + env(safe-area-inset-top, 0px)) !important; }
}


/* ============================================================
   CELULAR: las pantallas salen de ABAJO hacia arriba (hoja), no de lado.
   Aplica a: Qué es MiAguas, Ecosistema, Categorías/Negocios, la ficha del
   negocio y el panel del ecosistema. En compu siguen saliendo de lado.
   ============================================================ */
@media (max-width:640px){
  .info, .eco-menu, .hmenu, .panel, .eco-panel{
    top:auto !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important; max-width:none !important;
    height:auto !important; max-height:calc(100% - 56px - env(safe-area-inset-top, 0px)) !important;
    border-radius:24px 24px 0 0 !important; border-right:none !important;
    box-shadow:0 -18px 50px rgba(13,35,64,.25) !important;
    transform:translateY(105%) !important;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  /* la ficha y las listas usan casi toda la pantalla; el "Qué es" se ajusta a su contenido */
  .panel, .eco-panel, .hmenu{ height:calc(100% - 56px - env(safe-area-inset-top, 0px)) !important; }
  /* La ficha del negocio va a todo lo alto (oct 2026): en el celular no hay
     botón de agrandar y se pedía más espacio para Facebook, videos y el
     catálogo. Solo queda la orilla de arriba para la barra del teléfono. */
  .panel{ height:calc(100% - 8px - env(safe-area-inset-top, 0px)) !important;
          max-height:calc(100% - 8px - env(safe-area-inset-top, 0px)) !important; }
  .info.abierto, .eco-menu.visible, .hmenu.visible, .panel.abierto, .eco-panel.abierto{ transform:translateY(0) !important; }
  /* .eco-menu y .hmenu pasan de display:none a visibles: sin esto aparecerían de golpe */
  .eco-menu.visible, .hmenu.visible{ animation:hojaSube .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes hojaSube{ from{ transform:translateY(105%); } to{ transform:translateY(0); } }
  /* la rayita de arriba que dice "esto es una hoja" */
  .info::before, .eco-menu::before, .hmenu::before, .panel::before, .eco-panel::before{
    content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:99px; background:rgba(13,35,64,.18); z-index:5; pointer-events:none;
  }
}

/* ============================================================
   COMPU: también como hoja que sube desde abajo, centrada sobre el mapa y
   más grande (oct 2026). La ficha en modo "grande" (⤢) sigue siendo la
   versión todavía más amplia.
   ============================================================ */
@media (min-width:641px){
  .info, .eco-menu, .hmenu, .panel, .eco-panel{
    top:auto; bottom:0; right:auto; left:calc(50% + 32px);
    width:min(860px, calc(100vw - 120px)); height:min(86vh, 900px); max-height:none;
    border-radius:26px 26px 0 0; border-right:none;
    box-shadow:0 -20px 60px rgba(13,35,64,.25);
    transform:translate(-50%, 105%);
  }
  /* las listas y el "Qué es" no necesitan tanto ancho */
  .info, .eco-menu, .hmenu{ width:min(640px, calc(100vw - 120px)); height:min(80vh, 780px); }
  .info.abierto, .panel.abierto, .eco-panel.abierto,
  .eco-menu.visible, .hmenu.visible{ transform:translate(-50%, 0); }
  .eco-menu.visible, .hmenu.visible{ animation:hojaSubeC .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes hojaSubeC{ from{ transform:translate(-50%, 105%); } to{ transform:translate(-50%, 0); } }
  .info::before, .eco-menu::before, .hmenu::before, .panel::before, .eco-panel::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:46px; height:5px; border-radius:99px; background:rgba(13,35,64,.16); z-index:5; pointer-events:none;
  }
  .panel.grande::before{ display:none; }
}

/* ============================================================
   Cejas FLYER / VIDEO: ahora que "Qué es MiAguas" sube desde abajo, van
   ENCIMA de la hoja, como pestañas, con el texto horizontal.
   ============================================================ */
.flyer-cejas{ flex-direction:row !important; align-items:flex-end !important; gap:8px !important; top:auto !important; }
.flyer-ceja{ flex-direction:row !important; gap:7px !important; padding:9px 14px 10px !important;
  border-radius:13px 13px 0 0 !important; }
.flyer-ceja .flyer-ceja-txt{ writing-mode:horizontal-tb !important; letter-spacing:1px !important; font-size:11.5px !important; }
.flyer-ceja svg{ width:17px !important; height:17px !important; }
@media (min-width:641px){
  .flyer-cejas{
    bottom:min(80vh, 780px) !important;
    left:calc(50% + 32px - min(640px, calc(100vw - 120px)) / 2 + 22px) !important;
  }
}
/* Si "Qué es" sigue abierto debajo y encima se abre el Ecosistema (u otra
   hoja), sus cejas no deben asomarse sobre la hoja de arriba. */
body:has(.eco-panel.abierto) .flyer-cejas,
body:has(.panel.abierto) .flyer-cejas,
body:has(.hmenu.visible) .flyer-cejas,
body:has(.eco-menu.visible) .flyer-cejas{ opacity:0 !important; pointer-events:none !important; }
body:has(.panel.abierto) .eco-cejas{ opacity:0 !important; pointer-events:none !important; }
.flyer-cejas{ z-index:30 !important; }

/* Las del panel del Ecosistema: igual, encima de su hoja (que es la grande). */
.eco-cejas{ flex-direction:row !important; align-items:flex-end !important; gap:8px !important; top:auto !important; right:auto !important; }
.eco-cejas .flyer-ceja{ border-radius:13px 13px 0 0 !important; }
.eco-cejas .flyer-ceja-new{ left:auto !important; right:-4px !important; }
@media (min-width:641px){
  .eco-cejas{
    bottom:min(86vh, 900px) !important;
    left:calc(50% + 32px - min(860px, calc(100vw - 120px)) / 2 + 22px) !important;
  }
}
@media (max-width:640px){
  .eco-cejas{ bottom:calc(100% - 56px - env(safe-area-inset-top, 0px)) !important; left:auto !important; right:18px !important; }
}
@media (max-width:640px){
  /* la hoja de "Qué es" toma un alto fijo para que las cejas sepan dónde sentarse */
  .info{ height:78vh !important; }
  .flyer-cejas{ bottom:78vh !important; left:18px !important; }
}

/* ============================================================
   Botón de FILTROS fuera de la barra: bolita azul arriba a la izquierda,
   donde estaba el logo (oct 2026). Su menú se abre hacia abajo.
   (El JS lo saca de la barra al cargar; en las vitrinas se queda en la
   barra porque ahí arriba va su logo.)
   ============================================================ */
#navFiltrosWrap.filtros-flot{ position:fixed; top:14px; left:82px; width:52px; height:52px; z-index:22; }
#navFiltrosWrap.filtros-flot .navbar-item{
  width:52px !important; height:52px !important; border-radius:50% !important;
  background:var(--acento,#1a6fd4) !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(26,111,212,.38), 0 0 0 3px rgba(255,255,255,.9) !important;
}
#navFiltrosWrap.filtros-flot .navbar-item svg{ width:22px; height:22px; }
#navFiltrosWrap.filtros-flot.abierto .navbar-item{ background:#fff !important; color:var(--acento,#1a6fd4) !important; }
#navFiltrosWrap.filtros-flot .navbar-dropdown{
  position:absolute !important; left:0 !important; right:auto !important; top:calc(100% + 10px) !important; bottom:auto !important;
  margin:0 !important; align-items:flex-start !important; transform-origin:top left !important;
}
#navFiltrosWrap.filtros-flot:not(.abierto) .navbar-dropdown{ transform:translateY(-8px) scale(.96) !important; }
#navFiltrosWrap.filtros-flot.abierto .navbar-dropdown{ transform:translateY(0) scale(1) !important; }
@media (max-width:640px){
  #navFiltrosWrap.filtros-flot{ top:calc(12px + env(safe-area-inset-top, 0px)); left:12px; }
}
/* En las vitrinas el JS la baja para quedar debajo del logo */

@media (prefers-reduced-motion: reduce){
  .btn-buscar,.home-btn-mapa,.fab-main,.fab-mini,.home-cat,.home-buscar .ir,.orilla{transition:none;}
  .btn-buscar:hover,.home-btn-mapa:hover,.fab-main:hover,.fab-mini:hover,.home-cat:hover,.home-buscar .ir:hover,.orilla:hover{transform:none;}
  .btn-buscar:hover::after,.home-btn-mapa:hover::after{animation:none;}
}