/* En el celular: el texto no se agranda solo al girar, y un toque rápido no hace zoom
   (en iPhone, dos toques seguidos agrandan la página; pellizcar para agrandar sigue funcionando). Los campos de texto usan 16px o más
   en cada demo para que el iPhone no haga zoom al escribir. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

/* Piezas comunes de las webs de ejemplo de BMEN: la barra "esto es un ejemplo" y la vista previa del WhatsApp.
   Usa su propia tipografía del sistema para que se distinga del diseño de cada demo. */
.bmen-demo-barra {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 16px; background: #06111f; color: #dfe9f2;
    font: 500 13px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bmen-demo-barra b { color: #fff; font-weight: 700; }
.bmen-demo-barra a {
    flex-shrink: 0; padding: 7px 12px; border-radius: 8px; background: #2fcbe0; color: #04192b;
    font-weight: 700; text-decoration: none; white-space: nowrap;
}
.bmen-demo-barra a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 520px) { .bmen-demo-barra .largo { display: none; } }

.bmen-demo-velo {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
    background: rgba(5, 10, 18, .62);
    font: 400 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bmen-demo-velo[hidden] { display: none; }
.bmen-demo-hoja {
    width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto;
    border-radius: 18px; background: #0b141a; color: #e9edef; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.bmen-demo-hoja header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #1f2c34; }
.bmen-demo-hoja header span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #25d366; color: #0b141a; font-weight: 800; }
.bmen-demo-hoja header b { display: block; font-size: 15px; }
.bmen-demo-hoja header small { color: #8696a0; font-size: 12px; }
.bmen-demo-chat { padding: 18px 14px; }
.bmen-demo-burbuja {
    margin-left: auto; max-width: 92%; padding: 9px 11px 6px; border-radius: 10px 2px 10px 10px;
    background: #005c4b; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px;
}
.bmen-demo-burbuja small { display: block; margin-top: 3px; color: #a5c3bc; font-size: 11px; text-align: right; }
.bmen-demo-aviso .bmen-demo-chat { padding: 22px 20px 6px; }
.bmen-demo-aviso b { display: block; margin-bottom: 8px; color: #fff; font-size: 18px; }
.bmen-demo-aviso p { margin: 0; color: #c9d3d9; }
.bmen-demo-pie { padding: 0 16px 18px; }
.bmen-demo-pie p { margin: 0 0 12px; color: #aebac1; font-size: 13px; text-align: center; }
.bmen-demo-pie a, .bmen-demo-pie button {
    display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 999px;
    font: 700 15px/44px system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; text-decoration: none; cursor: pointer;
}
.bmen-demo-pie a { background: #25d366; color: #0b141a; }
.bmen-demo-pie button { background: transparent; color: #e9edef; border: 1px solid #2a3942; }
.bmen-demo-pie a:focus-visible, .bmen-demo-pie button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }