/* ==========================================================================
   Cartel "¿la instalás como aplicación?"
   Lo dibuja assets/js/instalar.js. Va después de marca.css: de ahí salen los
   colores, las tipografías y los botones (.btn), que se reusan tal cual para
   que el cartel no parezca de otro sitio.

   Dos variantes:
     .instalar--sitio   web pública  (se apoya arriba del globo de WhatsApp)
     .instalar--panel   panel        (abajo a la derecha, lejos del menú)

   Movimiento: solo transform y opacity, como manda marca.css.
   ========================================================================== */

.instalar{
  position:fixed;z-index:60;
  left:12px;right:12px;bottom:12px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio-lg);
  box-shadow:var(--sombra-alta);
  padding:16px 16px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  /* Arranca escondido y sin recibir toques, para no tapar nada mientras no se
     lo muestra. */
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .34s var(--curva), transform .34s var(--curva);
}
.instalar.on{opacity:1;transform:none;pointer-events:auto}

/* El globo de WhatsApp está fijo abajo a la derecha (54 px + 16 de aire): en
   el celular el cartel se apoya justo arriba y no lo tapa. */
.instalar--sitio{bottom:82px}

@media (min-width:641px){
  .instalar{left:24px;right:auto;bottom:24px;width:394px;padding:18px 18px 16px}
  /* En escritorio el cartel del sitio va a la izquierda: el globo de WhatsApp
     queda en la otra punta. */
  .instalar--sitio{bottom:24px}
  /* En el panel es al revés: a la izquierda está el menú lateral y taparlo
     molesta. */
  .instalar--panel{left:auto;right:24px}
}
@media (prefers-reduced-motion:reduce){
  .instalar{transition:none;transform:none}
}

/* ── Ícono + textos ──────────────────────────────────────────────────── */
.instalar__fila{display:flex;gap:14px;align-items:flex-start}

.instalar__ico{width:54px;height:54px;flex:none;border-radius:15px;display:block;
               box-shadow:0 8px 20px -12px rgba(8,56,111,.9)}

.instalar__tit{font:600 17.5px/1.28 var(--serif);color:var(--azul);
               margin:2px 0 5px;padding-right:24px}
.instalar__txt{font-size:13.6px;line-height:1.5;color:var(--gris)}

/* ── Botones (los del sitio, sin inventar nada) ──────────────────────── */
.instalar__acciones{display:flex;gap:10px;margin-top:14px}
.instalar__acciones .btn{flex:1 1 auto;padding:13px 18px;font-size:14.5px}

/* ── Cerrar ──────────────────────────────────────────────────────────── */
.instalar__x{position:absolute;top:9px;right:9px;width:30px;height:30px;
             border:0;border-radius:50%;background:transparent;cursor:pointer;
             color:var(--gris-claro);font-size:20px;line-height:1;
             display:flex;align-items:center;justify-content:center;
             transition:background .2s var(--curva), color .2s var(--curva)}
.instalar__x:hover{background:var(--azul-humo);color:var(--azul)}

/* ── Pasos a mano (iPhone no tiene botón de instalar) ────────────────── */
.instalar__pasos{display:none;margin-top:14px}
.instalar.pasos .instalar__pasos{display:block}
.instalar.pasos .instalar__si{display:none}

.instalar__paso{display:flex;align-items:center;gap:11px;
                font-size:13.6px;line-height:1.45;color:var(--carbon);
                background:var(--azul-humo);border:1px solid var(--azul-claro);
                border-radius:12px;padding:11px 13px}
.instalar__paso + .instalar__paso{margin-top:8px}
.instalar__paso b{color:var(--azul)}
.instalar__paso svg{width:19px;height:19px;flex:none;color:var(--agua-hondo)}
.instalar__n{flex:none;width:22px;height:22px;border-radius:50%;
             background:var(--azul);color:#fff;
             font:700 11.5px/1 var(--sans);
             display:flex;align-items:center;justify-content:center}

/* En el panel el cartel se apoya sobre el papel del panel: mismo cartel, un
   poco más de contraste en el borde. */
.instalar--panel{border-color:var(--azul-claro)}

/* ── Enlace "Instalar la aplicación" del pie y del menú ──────────────────
   Nace escondido: lo enciende instalar.js solo si el navegador de quien está
   mirando puede instalar de verdad. Mostrarlo siempre sería prometer algo que
   en la mitad de los casos no hace nada al tocarlo. */
.instalarEnlace{display:none}
.instalarEnlace.on{display:block}
/* En el menú del panel el renglón es flex (ícono + texto): si quedara en
   block, el ícono y la palabra se pegarían uno arriba del otro. */
.item.instalarEnlace.on{display:flex}