/* Centro de ayuda · Explicaso 3D: la app 3D a escala de la maqueta (inicio, catálogo, buscar, visor, proyectar, hoja
   «Enviar a la familia», Enviados, Cuenta, Ajustes), la página de la familia y el video en otra pestaña. Colores y
   formas de prototipo/web/css (tokens claro y oscuro). Siempre dentro de .ay-escena, con el prefijo e3-. */

/* ---------- base y tokens ---------- */
.ay-escena .e3 { --e3-bg: #FAF8F4; --e3-sup: #FFFFFF; --e3-sup2: #F4F4F7; --e3-texto: #1D1D24; --e3-texto2: #5B5B66; --e3-borde: #E7E3DA; --e3-control: #707196; --e3-pri: #23255E; --e3-tit: #23255E; --e3-enlace: #444676; --e3-exito: #167A52; --e3-on: #23255E; --e3-on-texto: #FFFFFF;
  --e3-escena: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F4F4F7 60%, #E9E9EF 100%);
  background: var(--e3-bg); color: var(--e3-texto); display: flex; flex-direction: column; font-size: 11px; transition: background .4s, color .4s; }
.ay-escena .e3.e3-oscuro { --e3-bg: #111228; --e3-sup: #1A1C3A; --e3-sup2: #23264A; --e3-texto: #F4F4F7; --e3-texto2: #B4B5CC; --e3-borde: #2E3160; --e3-control: #9C9DB7; --e3-pri: #FF6B57; --e3-tit: #F4F4F7; --e3-enlace: #FF9789; --e3-exito: #3DBE8B; --e3-on: #444676; --e3-on-texto: #FFFFFF; }
.ay-escena .e3-oscuro .m-logo { color: #FFFFFF; }
.ay-escena .tel:has(.e3-oscuro.activa) { background: #111228 !important; }
.ay-escena .tel:has(.e3-oscuro.activa) .tel__barra { color: #FFFFFF; }
.ay-escena .tel:has(.e3-oscuro.activa) .tel__dir { background: rgba(255, 255, 255, .12); color: #E6E6F0; }
.ay-escena .e3 h1, .ay-escena .e3 h2 { margin: 0; }
.ay-escena .e3-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ay-escena .e3-fuera { display: none !important; }
.ay-escena .e3-crece { flex: 1; }

/* ---------- barra de arriba ---------- */
.ay-escena .e3-barra { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; background: var(--e3-sup); border-bottom: 1px solid var(--e3-borde); min-width: 0; transition: background .4s; }
.ay-escena .e3-barra .m-logo { font-size: 14px; flex: none; }
.ay-escena .e3-barra .m-logo svg { width: 19px; height: 19px; }
.ay-escena .e3-barra__tit { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ay-escena .e3-barra__tit small { font-size: 9px; color: var(--e3-texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-escena .e3-barra__tit b { font-size: 12px; color: var(--e3-tit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-escena .e3-barra__acc { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.ay-escena .e3-icbtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--e3-borde); background: var(--e3-sup); color: var(--e3-pri); display: grid; place-items: center; flex: none; }
.ay-escena .e3-icbtn .e3-ic { width: 15px; height: 15px; }
.ay-escena .e3-favbarra.on .e3-ic { fill: currentColor; }
.ay-escena .e3-doc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; border: 1px solid var(--e3-borde); background: var(--e3-sup); flex: none; }
.ay-escena .e3-doc > span { display: grid; font-size: 8.5px; line-height: 1.2; color: var(--e3-texto2); }
.ay-escena .e3-doc b { font-size: 10px; color: var(--e3-texto); }
.ay-escena .e3--tel .e3-doc { padding: 0; border: 0; background: none; }
.ay-escena .e3-ini { width: 26px; height: 26px; border-radius: 50%; background: #23255E; color: #FFFFFF; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 10px; flex: none; }
.ay-escena .e3-oscuro .e3-ini { background: #FF6B57; color: #23255E; }
.ay-escena .e3-ini--xl { width: 48px; height: 48px; font-size: 16px; }

/* ---------- navegación: riel a la izquierda (PC) o píldora abajo (teléfono) ---------- */
.ay-escena .e3--pc.e3-connav { padding-left: 74px; }
.ay-escena .e3-nav { position: absolute; z-index: 6; display: flex; align-items: center; background: var(--e3-sup); border: 1px solid var(--e3-borde); box-shadow: 0 10px 26px rgba(13, 14, 36, .14); }
.ay-escena .e3--pc .e3-nav { left: 10px; top: 50%; transform: translateY(-50%); width: 56px; flex-direction: column; gap: 3px; padding: 8px 4px; border-radius: 20px; }
.ay-escena .e3--tel .e3-nav { left: 12px; right: 12px; bottom: 10px; height: 56px; justify-content: space-around; padding: 0 6px; border-radius: 99px; }
.ay-escena .e3-nav__it { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; font-size: 8.5px; font-weight: 600; color: var(--e3-texto2); min-width: 44px; }
.ay-escena .e3-nav__it .e3-ic { width: 17px; height: 17px; }
.ay-escena .e3-nav__it.on { color: var(--e3-pri); background: var(--e3-sup2); font-weight: 800; }
.ay-escena .e3-nav__enviar { width: 38px; height: 38px; border-radius: 50%; background: #FF6B57; color: #23255E; display: grid; place-items: center; margin: 2px 0; flex: none; }
.ay-escena .e3-nav__enviar .e3-ic { width: 17px; height: 17px; }
.ay-escena .e3-punto { position: absolute; top: 4px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: #FF6B57; box-shadow: 0 0 0 2px var(--e3-sup); }

/* ---------- páginas ---------- */
.ay-escena .e3-main { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.ay-escena .e3-cont { padding: 14px 22px 22px; display: grid; gap: 12px; align-content: start; }
.ay-escena .e3--tel .e3-cont { padding: 12px 14px 84px; gap: 11px; }
.ay-escena .e3--pc .e3-angosta { max-width: 540px; margin: 0 auto; }
.ay-escena .e3-saludo { font-size: 10px; font-weight: 600; color: var(--e3-texto2); }
.ay-escena .e3-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--e3-tit); }
.ay-escena .e3--tel .e3-h1 { font-size: 19px; }
.ay-escena .e3-lead { font-size: 11px; line-height: 1.4; color: var(--e3-texto2); margin-top: 3px; }
.ay-escena .e3-cab { display: grid; gap: 2px; }
.ay-escena .e3-cabcat { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: end; }
.ay-escena .e3--tel .e3-cabcat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ay-escena .e3-migas { font-size: 9.5px; font-weight: 700; color: var(--e3-texto2); }
.ay-escena .e3-campo { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--e3-control); background: var(--e3-sup); font-size: 12px; white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ay-escena .e3-campo .e3-ic { width: 15px; height: 15px; color: var(--e3-texto2); }
.ay-escena .e3-campo.escribiendo { border-color: var(--e3-pri); box-shadow: 0 0 0 3px rgba(35, 37, 94, .14); }
.ay-escena .e3-limpiar { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--e3-sup2); display: grid; place-items: center; }
.ay-escena .e3-limpiar .e3-ic { width: 11px; height: 11px; }
.ay-escena .e3-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; white-space: nowrap; }
.ay-escena .e3-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1.5px solid #C8C8D7; background: var(--e3-sup); font-size: 10.5px; font-weight: 600; color: var(--e3-texto); transition: background .2s, color .2s, border-color .2s; }
.ay-escena .e3-chip .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3-chip .n { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--e3-sup2); color: var(--e3-texto2); }
.ay-escena .e3-chip.on { background: #23255E; border-color: #23255E; color: #FFFFFF; }
.ay-escena .e3-chip.on .n { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.ay-escena .e3-resumen { font-size: 11px; color: var(--e3-texto2); }
.ay-escena .e3-resumen b { color: var(--e3-texto); }
.ay-escena .e3-icc { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--e3-sup2); color: var(--e3-pri); flex: none; }
.ay-escena .e3-icc .e3-ic { width: 15px; height: 15px; }
.ay-escena .e3-icc--ok { background: #167A52; color: #FFFFFF; }
.ay-escena .e3-avisto { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: #E3F3EC; color: #1D1D24; }
.ay-escena .e3-avisto > span:nth-child(2) { display: grid; min-width: 0; }
.ay-escena .e3-avisto b { font-size: 11.5px; }
.ay-escena .e3-avisto small { font-size: 9.5px; color: #5B5B66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-escena .e3-avisto > .e3-ic { width: 14px; height: 14px; }
.ay-escena .e3-sec { display: grid; gap: 7px; }
.ay-escena .e3-sec h2 { font-size: 13px; font-weight: 800; color: var(--e3-texto); }
.ay-escena .e3-filas { display: grid; background: var(--e3-sup); border: 1px solid var(--e3-borde); border-radius: 14px; overflow: hidden; }
.ay-escena .e3-fila { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--e3-borde); }
.ay-escena .e3-fila:first-child { border-top: 0; }
.ay-escena .e3-fila > .e3-ic { width: 14px; height: 14px; color: var(--e3-texto2); }
.ay-escena .e3-fila__txt { display: grid; gap: 1px; min-width: 0; }
.ay-escena .e3-fila__txt b { font-size: 11px; line-height: 1.25; }
.ay-escena .e3-fila__txt small { font-size: 9.5px; line-height: 1.4; color: var(--e3-texto2); }
.ay-escena .e3-mini { display: block; width: 44px; height: 33px; border-radius: 8px; overflow: hidden; background: var(--e3-escena); }
.ay-escena .e3-mini svg { width: 100%; height: 100%; display: block; }
.ay-escena .e3-visto { display: inline-flex; align-items: center; gap: 3px; color: var(--e3-exito); font-weight: 700; }
.ay-escena .e3-visto .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3-sin { color: #8A5A00; font-weight: 700; }
.ay-escena .e3-vacio { display: none; }

/* ---------- tarjeta de caso ---------- */
.ay-escena .e3-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.ay-escena .e3--tel .e3-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ay-escena .e3-caso { display: grid; gap: 5px; align-content: start; padding: 8px; border-radius: 14px; background: #F1EEE7; color: #1D1D24; min-width: 0; }
.ay-escena .e3-caso--ap { background: #FFE7E4; }
.ay-escena .e3-caso--co { background: #E9E9EF; }
.ay-escena .e3-caso__tope { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ay-escena .e3-pil { font-size: 8.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .8); color: #23255E; white-space: nowrap; flex: none; }
.ay-escena .e3-pil--sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #5B5B66; }
.ay-escena .e3-caso__ic { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #23255E; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ay-escena .e3-caso__ic .e3-ic { width: 12px; height: 12px; }
.ay-escena .e3-caso__tit { font-size: 11px; font-weight: 800; line-height: 1.22; color: #23255E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.44em; }
.ay-escena .e3-caso__desc { font-size: 9px; line-height: 1.35; color: #5B5B66; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.ay-escena .e3-caso__img { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F4F4F7 60%, #E9E9EF 100%); }
.ay-escena .e3-caso__img > svg { width: 100%; height: 100%; display: block; }
.ay-escena .e3-caso__ver { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 9px; border-radius: 99px; background: #FFFFFF; color: #23255E; font-size: 9px; font-weight: 700; box-shadow: 0 3px 8px rgba(13, 14, 36, .15); }
.ay-escena .e3-caso__ver i { width: 16px; height: 16px; border-radius: 50%; background: #FF6B57; color: #23255E; display: grid; place-items: center; }
.ay-escena .e3-caso__ver .e3-ic { width: 10px; height: 10px; stroke-width: 2.6; }
.ay-escena .e3-fav { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; color: #23255E; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(13, 14, 36, .15); }
.ay-escena .e3-fav span { display: grid; place-items: center; }
.ay-escena .e3-fav .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3-fav.on .e3-ic { fill: currentColor; }
.ay-escena .e3--tel .e3-caso__desc, .ay-escena .e3--tel .e3-pil--sub { display: none; }
.ay-escena .e3--tel .e3-caso__ver { font-size: 0; padding: 3px; gap: 0; }

/* ---------- avisos ---------- */
.ay-escena .e3-toast { position: absolute; left: 50%; bottom: 16px; z-index: 12; transform: translate(-50%, 16px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s linear .3s; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #23255E; color: #FFFFFF; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px rgba(13, 14, 36, .3); }
.ay-escena .e3-toast.ver { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .3s; }
.ay-escena .e3-toast .e3-ic { width: 14px; height: 14px; color: #FF6B57; }
.ay-escena .e3-toast b { color: #FF6B57; font-weight: 800; padding: 2px 4px; border-radius: 6px; }
.ay-escena .e3--tel .e3-toast--nav { bottom: 78px; }
.ay-escena .e3-toast--pild { bottom: 64px; }
.ay-escena .e3-velo { position: absolute; inset: 0; z-index: 8; background: rgba(13, 14, 36, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.ay-escena .e3-velo.ver { opacity: 1; visibility: visible; transition: opacity .3s; }

/* ---------- botones y datos ---------- */
.ay-escena .e3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 10px; border: 1.5px solid transparent; font-size: 11px; font-weight: 700; white-space: nowrap; transition: transform .12s, filter .12s; }
.ay-escena .e3-btn .e3-ic { width: 14px; height: 14px; }
.ay-escena .e3-btn--acento { background: #FF6B57; color: #23255E; }
.ay-escena .e3-btn--pri { background: #23255E; color: #FFFFFF; }
.ay-escena .e3-btn--sec { background: var(--e3-sup); border-color: var(--e3-control); color: var(--e3-pri); }
.ay-escena .e3-btn--fan { background: transparent; color: var(--e3-enlace); padding: 0 8px; }
.ay-escena .e3-btn--bloque { display: flex; width: 100%; }
.ay-escena .e3-dato { display: grid; gap: 4px; min-width: 0; }
.ay-escena .e3-dato > span:first-child { font-size: 10.5px; font-weight: 700; }
.ay-escena .e3-dato small { font-size: 9.5px; font-weight: 500; color: var(--e3-texto2); }
.ay-escena .e3-input { display: flex; align-items: center; height: 32px; padding: 0 11px; border-radius: 10px; border: 1.5px solid var(--e3-control); background: var(--e3-sup); font-size: 11.5px; white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ay-escena .e3-input.escribiendo { border-color: var(--e3-pri); box-shadow: 0 0 0 3px rgba(35, 37, 94, .14); }
.ay-escena .e3-nota { display: flex; gap: 6px; align-items: flex-start; font-size: 9.5px; line-height: 1.4; color: var(--e3-texto2); }
.ay-escena .e3-nota .e3-ic { width: 13px; height: 13px; margin-top: 1px; }
.ay-escena .e3-etq { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; border: 1px dashed var(--e3-control); color: var(--e3-texto2); white-space: nowrap; }
.ay-escena .e3-switch { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #C8C8D7; flex: none; transition: background .25s; }
.ay-escena .e3-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform .25s; }
.ay-escena .e3-switch.on { background: #167A52; }
.ay-escena .e3-switch.on::after { transform: translateX(14px); }

/* ---------- el visor ---------- */
.ay-escena .e3-visor { --e3-fase: #9C9DB7; }
.ay-escena .e3-vbarra .e3-barra__tit b { font-size: 12.5px; }
.ay-escena .e3-vcuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 268px; }
.ay-escena .e3-escena { position: relative; overflow: hidden; background: var(--e3-escena); min-height: 0; }
.ay-escena .e3--tel .e3-escena { flex: 1; }
.ay-escena .e3-vistas { position: absolute; top: 10px; left: 50%; z-index: 3; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--e3-sup); border: 1px solid var(--e3-borde); box-shadow: 0 4px 12px rgba(13, 14, 36, .08); white-space: nowrap; }
.ay-escena .e3-vistas span { padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 600; color: var(--e3-texto2); transition: background .2s, color .2s; }
.ay-escena .e3-vistas span.on { background: #23255E; color: #FFFFFF; }
.ay-escena .e3-modelo { position: absolute; left: 5%; right: 5%; top: 42px; bottom: 70px; display: grid; place-items: center; transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .e3--tel .e3-modelo { left: 2%; right: 2%; top: 36px; bottom: 20px; }
.ay-escena .e3-modelo > .e3-svg { grid-area: 1 / 1; width: 100%; height: 100%; transition: opacity .5s, transform .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .e3-modelo > .e3-svg--paladar { opacity: 0; }
.ay-escena .v-paladar .e3-modelo > .e3-svg--paladar { opacity: 1; }
.ay-escena .v-paladar .e3-modelo > .e3-svg--frente { opacity: 0; }
.ay-escena .e3-modelo.girado > .e3-svg { transform: perspective(700px) rotateY(-24deg) scale(.96); }
.ay-escena .e3-ancla { position: absolute; right: 4%; top: 50%; width: 2px; height: 2px; }
.ay-escena .e3-gesto { position: absolute; left: 50%; bottom: 62px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, .88); color: #5B5B66; font-size: 10px; white-space: nowrap; transition: opacity .4s; }
.ay-escena .e3-gesto .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3--tel .e3-gesto { bottom: 22px; font-size: 9.5px; }
.ay-escena .e3-gesto.fuera { opacity: 0; }
/* capas del modelo y lo que cambia con cada fase */
.ay-escena .e3-modelo [class*="e3-cap-"] { transition: opacity .6s; }
.ay-escena .sin-encia .e3-modelo .e3-cap-encia { opacity: .07; }
.ay-escena .e3-modelo .e3-mi, .ay-escena .e3-modelo .e3-md, .ay-escena .e3-modelo .e3-fi, .ay-escena .e3-modelo .e3-fd, .ay-escena .e3-modelo .e3-c11, .ay-escena .e3-modelo .e3-c21, .ay-escena .e3-modelo .e3-tornillo { transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .f1 .e3-modelo .e3-mi { transform: translateX(-5px); }
.ay-escena .f1 .e3-modelo .e3-md { transform: translateX(5px); }
.ay-escena .f2 .e3-modelo .e3-mi { transform: translateX(-8px); }
.ay-escena .f2 .e3-modelo .e3-md { transform: translateX(8px); }
.ay-escena .f3 .e3-modelo .e3-mi { transform: translateX(-8px); }
.ay-escena .f3 .e3-modelo .e3-md { transform: translateX(8px); }
.ay-escena .f1 .e3-modelo .e3-tornillo { transform: scaleX(1.4); }
.ay-escena .f2 .e3-modelo .e3-tornillo { transform: scaleX(1.7); }
.ay-escena .f1 .e3-modelo .e3-fi { transform: translateX(-3px); }
.ay-escena .f1 .e3-modelo .e3-fd { transform: translateX(3px); }
.ay-escena .f1 .e3-modelo .e3-c11 { transform: translateX(-6px); }
.ay-escena .f1 .e3-modelo .e3-c21 { transform: translateX(6px); }
.ay-escena .f2 .e3-modelo .e3-fi { transform: translateX(-4px); }
.ay-escena .f2 .e3-modelo .e3-fd { transform: translateX(4px); }
.ay-escena .f2 .e3-modelo .e3-c11 { transform: translateX(-7.5px); }
.ay-escena .f2 .e3-modelo .e3-c21 { transform: translateX(7.5px); }
.ay-escena .f3 .e3-modelo .e3-fi { transform: translateX(-2px); }
.ay-escena .f3 .e3-modelo .e3-fd { transform: translateX(2px); }
.ay-escena .e3-modelo .e3-pc { transition: transform .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .f3 .e3-modelo .e3-mi .e3-pc { transform: translateX(7px); }
.ay-escena .f3 .e3-modelo .e3-md .e3-pc { transform: translateX(-7px); }
.ay-escena .f3 .e3-modelo .e3-cap-ap { opacity: 0; }
.ay-escena .e3-modelo .e3-hn { opacity: 0; transition: opacity .9s; }
.ay-escena .f3 .e3-modelo .e3-hn { opacity: 1; }
.ay-escena .e3-modelo .e3-et { opacity: 0; transition: opacity .5s; }
.ay-escena .f0 .e3-modelo .e3-et-torn, .ay-escena .f1 .e3-modelo .e3-et-torn, .ay-escena .f2 .e3-modelo .e3-et-torn,
.ay-escena .f0 .e3-modelo .e3-et-banda, .ay-escena .f1 .e3-modelo .e3-et-banda, .ay-escena .f2 .e3-modelo .e3-et-banda,
.ay-escena .f0 .e3-modelo .e3-et-acr, .ay-escena .f1 .e3-modelo .e3-et-acr, .ay-escena .f2 .e3-modelo .e3-et-acr,
.ay-escena .f1 .e3-modelo .e3-et-diast, .ay-escena .f2 .e3-modelo .e3-et-diast, .ay-escena .f3 .e3-modelo .e3-et-nuevo { opacity: 1; }
/* el texto de la fase */
.ay-escena .e3-f { display: none; }
.ay-escena .f0 .e3-f0, .ay-escena .f1 .e3-f1, .ay-escena .f2 .e3-f2, .ay-escena .f3 .e3-f3 { display: inline; }
.ay-escena .f1 { --e3-fase: #FF6B57; }
.ay-escena .f2 { --e3-fase: #1E9E6A; }
.ay-escena .f3 { --e3-fase: #167A52; }
.ay-escena .e3-lado { background: var(--e3-sup); display: flex; flex-direction: column; gap: 9px; min-height: 0; overflow: hidden; }
.ay-escena .e3--pc .e3-lado { border-left: 1px solid var(--e3-borde); padding: 11px 12px; }
.ay-escena .e3--tel .e3-lado { flex: none; position: relative; z-index: 2; margin-top: -14px; padding: 10px 14px 8px; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 16px rgba(13, 14, 36, .07); }
.ay-escena .e3-fase { display: grid; gap: 6px; }
.ay-escena .e3-fase__cab { position: relative; display: grid; gap: 2px; padding-right: 30px; }
.ay-escena .e3--pc .e3-fase__cab { padding-right: 0; }
.ay-escena .e3-etapa { display: flex; align-items: center; gap: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--e3-texto2); }
.ay-escena .e3-etapa i { width: 8px; height: 8px; border-radius: 50%; background: var(--e3-fase); flex: none; transition: background .4s; }
.ay-escena .e3-paso { font-size: 16px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--e3-tit); }
.ay-escena .e3--tel .e3-paso { font-size: 14.5px; }
.ay-escena .e3-plegar { position: absolute; right: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--e3-sup2); color: var(--e3-pri); display: grid; place-items: center; transition: transform .3s; }
.ay-escena .e3-plegar .e3-ic { width: 14px; height: 14px; }
.ay-escena .plegada .e3-plegar { transform: rotate(180deg); }
.ay-escena .plegada .e3-fase__cuerpo { display: none; }
.ay-escena .e3-fase__cuerpo { display: grid; gap: 6px; }
.ay-escena .e3-cuando { font-size: 9.5px; font-weight: 600; color: var(--e3-texto2); }
.ay-escena .e3-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.ay-escena .e3-metrica { display: grid; gap: 1px; padding: 5px 7px; border-radius: 9px; background: var(--e3-sup2); }
.ay-escena .e3-metrica b { font-size: 14px; font-weight: 800; color: var(--e3-tit); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ay-escena .e3-metrica small { font-size: 8px; line-height: 1.2; color: var(--e3-texto2); }
.ay-escena .e3-explica { font-size: 10px; line-height: 1.42; color: var(--e3-texto); }
.ay-escena .e3--tel .e3-explica { font-size: 10.5px; }
.ay-escena .e3-ctl { display: grid; gap: 5px; }
.ay-escena .e3-ctl h4 { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--e3-texto2); }
.ay-escena .e3-capas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ay-escena .e3-capa { display: flex; align-items: center; gap: 6px; height: 23px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--e3-borde); background: var(--e3-sup); font-size: 9.5px; font-weight: 600; min-width: 0; }
.ay-escena .e3-capa i { width: 10px; height: 10px; border-radius: 3px; background: currentColor; flex: none; transition: background .2s; }
.ay-escena .e3-capa span { color: var(--e3-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ay-escena .e3-capa.off i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ay-escena .e3-capa.off span { color: var(--e3-texto2); text-decoration: line-through; }
.ay-escena .e3-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ay-escena .e3-vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 25px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--e3-borde); background: var(--e3-sup); color: var(--e3-texto); font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.ay-escena .e3-vbtn .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3-vbtn.on { background: #23255E; border-color: #23255E; color: #FFFFFF; }
.ay-escena .e3-vbtn--ancho { grid-column: 1 / -1; }
/* la línea de tiempo */
.ay-escena .e3-tiempo { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; background: var(--e3-sup); border: 1px solid var(--e3-borde); box-shadow: 0 6px 16px rgba(13, 14, 36, .1); }
.ay-escena .e3--pc .e3-tiempo { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3; }
.ay-escena .e3--tel .e3-tiempo { flex: none; margin: 0 10px; position: relative; z-index: 3; }
.ay-escena .e3-play { width: 30px; height: 30px; border-radius: 50%; background: #23255E; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.ay-escena .e3-play .e3-ic { width: 13px; height: 13px; fill: currentColor; }
.ay-escena .e3-vel { display: flex; gap: 1px; font-size: 9px; font-weight: 700; color: var(--e3-texto2); flex: none; }
.ay-escena .e3-vel span { padding: 3px 5px; border-radius: 6px; }
.ay-escena .e3-vel span.on { background: var(--e3-sup2); color: var(--e3-texto); }
.ay-escena .e3-pista { position: relative; flex: 1; min-width: 0; height: 30px; }
.ay-escena .e3-segs { position: absolute; left: 0; right: 0; top: 5px; height: 6px; display: flex; gap: 2px; }
.ay-escena .e3-segs span { position: relative; height: 100%; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--c) 28%, #FFFFFF); }
.ay-escena .e3-segs i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); transition: width .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .f1 .e3-segs span:nth-child(1) i, .ay-escena .f2 .e3-segs span:nth-child(-n+2) i, .ay-escena .f3 .e3-segs span i { width: 100%; }
.ay-escena .f1 .e3-segs span:nth-child(2) i { width: 50%; }
.ay-escena .f2 .e3-segs span:nth-child(3) i { width: 20%; }
.ay-escena .e3-pomo { position: absolute; left: 0; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #FFFFFF; border: 2.5px solid #23255E; box-sizing: border-box; transition: left .9s cubic-bezier(.45, .05, .2, 1); }
.ay-escena .f1 .e3-pomo { left: 34%; }
.ay-escena .f2 .e3-pomo { left: 63%; }
.ay-escena .f3 .e3-pomo { left: 100%; }
.ay-escena .e3-rotulos { position: absolute; left: 0; right: 0; top: 15px; height: 14px; }
.ay-escena .e3-rot { position: absolute; transform: translateX(-50%); padding: 0 3px; border-radius: 4px; font-size: 8.5px; font-weight: 600; color: var(--e3-texto2); white-space: nowrap; }
.ay-escena .f0 .e3-rot0, .ay-escena .f1 .e3-rot1, .ay-escena .f2 .e3-rot2, .ay-escena .f3 .e3-rot3 { color: var(--e3-texto); font-weight: 800; text-decoration: underline 2px var(--e3-fase); text-underline-offset: 2px; }
.ay-escena .e3-comp { display: flex; gap: 4px; flex: none; }
/* la píldora del caso (teléfono) */
.ay-escena .e3-pild { flex: none; margin: 6px 10px 10px; display: flex; justify-content: space-between; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: #23255E; color: #FFFFFF; }
.ay-escena .e3-pild span { display: grid; justify-items: center; gap: 1px; padding: 3px 5px; border-radius: 14px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.ay-escena .e3-pild .e3-ic { width: 15px; height: 15px; }
.ay-escena .e3-pild .e3-pild__env { background: #FF6B57; color: #23255E; padding: 3px 9px; font-weight: 800; }
.ay-escena .e3-credito { flex: none; margin: -4px 14px 8px; font-size: 8.5px; text-align: center; color: var(--e3-texto2); }
/* hojas que suben (teléfono) */
.ay-escena .e3-hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 94%; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 6px 14px 14px; border-radius: 18px 18px 0 0; background: var(--e3-sup); box-shadow: 0 -10px 30px rgba(13, 14, 36, .2); transform: translateY(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ay-escena .e3-hoja.ver { transform: none; }
.ay-escena .e3-asa { justify-self: center; width: 36px; height: 4px; border-radius: 99px; background: #C8C8D7; }
.ay-escena .e3-hoja__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ay-escena .e3-hoja__cab b { font-size: 14px; color: var(--e3-tit); }
.ay-escena .e3-hoja__cab .e3-icbtn { width: 26px; height: 26px; }

/* ---------- modo proyectar ---------- */
.ay-escena .e3-proy { background: radial-gradient(120% 90% at 50% 35%, #2A2D5C 0%, #16183A 60%, #0D0E24 100%); color: #FFFFFF; }
.ay-escena .e3-proy .e3-escena { position: absolute; inset: 0; background: transparent; }
.ay-escena .e3-proy .e3-modelo { left: 14%; right: 14%; top: 54px; bottom: 96px; }
.ay-escena .e3-proy__marca { position: absolute; left: 22px; top: 18px; z-index: 3; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; }
.ay-escena .e3-proy__marca .e3-ini { width: 34px; height: 34px; font-size: 12px; background: #FF6B57; color: #23255E; }
.ay-escena .e3-proy__marca span { display: grid; line-height: 1.2; }
.ay-escena .e3-proy__marca small { font-size: 10.5px; font-weight: 600; color: #C9CAE0; }
.ay-escena .e3-proy__salir { position: absolute; right: 20px; top: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700; }
.ay-escena .e3-proy__salir .e3-ic { width: 13px; height: 13px; }
.ay-escena .e3-proy__ley { position: absolute; left: 22px; bottom: 22px; z-index: 3; display: grid; gap: 4px; max-width: 560px; }
.ay-escena .e3-proy__ley b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ay-escena .e3-proy__ley > span { font-size: 11px; color: #C9CAE0; }
.ay-escena .e3-proy__ctl { position: absolute; right: 22px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.ay-escena .e3-proy__ctl span { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #FFFFFF; display: grid; place-items: center; }
.ay-escena .e3-proy__ctl span.pri { width: 52px; height: 52px; background: #FF6B57; color: #23255E; }
.ay-escena .e3-proy__ctl .e3-ic { width: 18px; height: 18px; fill: currentColor; }

/* ---------- hoja «Enviar a la familia» ---------- */
.ay-escena .e3-hoja--env { gap: 7px; }
.ay-escena .e3-env1, .ay-escena .e3-env2 { display: grid; gap: 7px; }
.ay-escena .e3-env2, .ay-escena .e3-hoja--env.listo .e3-env1 { display: none; }
.ay-escena .e3-hoja--env.listo .e3-env2 { display: grid; }
.ay-escena .e3-envcaso { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: var(--e3-sup2); }
.ay-escena .e3-envcaso .e3-mini { width: 50px; height: 38px; }
.ay-escena .e3-envcaso > span:nth-child(2) { display: grid; min-width: 0; }
.ay-escena .e3-envcaso b { font-size: 10.5px; line-height: 1.25; }
.ay-escena .e3-envcaso small { font-size: 9px; color: var(--e3-texto2); }
.ay-escena .e3-envcaso .e3-btn { height: 26px; font-size: 10px; }
.ay-escena .e3-op { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 9px 5px 6px; border-radius: 12px; border: 1px solid var(--e3-borde); }
.ay-escena .e3-op .e3-icc { width: 28px; height: 28px; }
.ay-escena .e3-op > span:nth-child(2) { display: grid; min-width: 0; }
.ay-escena .e3-op b { font-size: 10.5px; }
.ay-escena .e3-op small { font-size: 9px; color: var(--e3-texto2); }
.ay-escena .e3-op--no { border-style: dashed; }
.ay-escena .e3-op--no .e3-icc, .ay-escena .e3-op--no > span:nth-child(2) { opacity: .55; }
.ay-escena .e3-listo { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.ay-escena .e3-listo b { font-size: 13px; line-height: 1.25; color: var(--e3-tit); }
.ay-escena .e3-wa { display: grid; gap: 5px; }
.ay-escena .e3-wa small { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--e3-texto2); }
.ay-escena .e3-wa p { background: #DCF8C6; color: #1D1D24; border-radius: 10px 10px 10px 3px; padding: 8px 10px; font-size: 10.5px; line-height: 1.4; }
.ay-escena .e3-wa u { color: #027EB5; word-break: break-all; }

/* ---------- WhatsApp: elegir el chat, enlace y mensaje escrito ---------- */
.ay-escena .e3-wasel { background: #FFFFFF; display: flex; flex-direction: column; color: #111B21; }
.ay-escena .e3-wasel__cab { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: #075E54; color: #FFFFFF; font-size: 15px; }
.ay-escena .e3-wasel__cab b { flex: 1; }
.ay-escena .e3-wasel__cab svg { width: 19px; height: 19px; }
.ay-escena .e3-wasel__h { padding: 12px 14px 4px; font-size: 11.5px; font-weight: 700; color: #008069; }
.ay-escena .e3-wasel__fila { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 14px; }
.ay-escena .e3-wasel__fila .wa__av { width: 38px; height: 38px; }
.ay-escena .e3-wasel__fila > span:last-child { display: grid; min-width: 0; }
.ay-escena .e3-wasel__fila b { font-size: 13px; }
.ay-escena .e3-wasel__fila small { font-size: 11px; color: #667781; }
.ay-escena .e3-walink { color: #027EB5; text-decoration: underline; word-break: break-all; border-radius: 4px; }
.ay-escena .p--wa[data-p^="e3-"] .wa__pie { align-items: flex-end; }
.ay-escena .p--wa[data-p^="e3-"] .wa__campo.lleno { height: auto; min-height: 38px; padding: 8px 14px; border-radius: 19px; white-space: normal; line-height: 1.35; font-size: 12px; }

/* ---------- la página de la familia ---------- */
.ay-escena .e3-pagfam { background: #FAF8F4; }
.ay-escena .e3-pacdoc { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 14px; background: #FFFFFF; border-bottom: 1px solid #E7E3DA; }
.ay-escena .e3-pacdoc > span { display: grid; line-height: 1.25; }
.ay-escena .e3-pacdoc b { font-size: 11.5px; }
.ay-escena .e3-pacdoc small { font-size: 9.5px; color: #5B5B66; }
.ay-escena .e3-pac { padding: 12px 14px 22px; display: grid; gap: 9px; }
.ay-escena .e3-sal { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #BC4434; }
.ay-escena .e3-pac h1 { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #23255E; }
.ay-escena .e3-pac h2 { font-size: 13px; font-weight: 800; margin-top: 4px; }
.ay-escena .e3-pac__intro { font-size: 11px; line-height: 1.45; color: #5B5B66; }
.ay-escena .e3-pacvideo { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F4F4F7 60%, #E9E9EF 100%); }
.ay-escena .e3-pacvideo > svg { width: 100%; height: 100%; display: block; }
.ay-escena .e3-pacplay { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #FF6B57; color: #23255E; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(255, 107, 87, .4); transition: opacity .3s; }
.ay-escena .e3-pacplay .e3-ic { width: 18px; height: 18px; fill: currentColor; }
.ay-escena .e3-vctl { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; color: #23255E; opacity: 0; transition: opacity .3s; }
.ay-escena .e3-vctl__barra { flex: 1; height: 3px; border-radius: 99px; background: rgba(35, 37, 94, .2); overflow: hidden; }
.ay-escena .e3-vctl__barra i { display: block; width: 0; height: 100%; background: #FF6B57; transition: width 1.2s linear; }
.ay-escena .reproduce .e3-pacplay { opacity: 0; }
.ay-escena .reproduce .e3-vctl { opacity: 1; }
.ay-escena .reproduce .e3-vctl__barra i { width: 31%; }
.ay-escena .e3-pasos { display: grid; gap: 8px; }
.ay-escena .e3-pasos li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 10px; line-height: 1.4; color: #5B5B66; }
.ay-escena .e3-pasos i { width: 22px; height: 22px; border-radius: 50%; background: #ECECF7; color: #23255E; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 10px; }
.ay-escena .e3-pasos b { display: block; font-size: 11px; color: #1D1D24; }
.ay-escena .e3-pacaviso { font-size: 9.5px; line-height: 1.45; color: #5B5B66; padding: 8px 10px; border-radius: 10px; background: #F4F4F7; }
.ay-escena .e3-pacpie { flex: none; display: grid; justify-items: center; gap: 4px; padding: 8px 14px 10px; background: #FFFFFF; border-top: 1px solid #E7E3DA; }
.ay-escena .e3-pacpie small { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: #5B5B66; }
.ay-escena .e3-pacpie .m-logo { font-size: 10px; gap: 3px; }
.ay-escena .e3-pacpie .m-logo svg { width: 12px; height: 12px; }
.ay-escena .e3-pagfam--pc { background: #F1EEE7; }
.ay-escena .e3-pagfam--pc .e3-pacdoc { justify-content: center; }
.ay-escena .e3-pagfam--pc .e3-pac { max-width: 380px; margin: 0 auto; }
.ay-escena .e3-pagfam--pc .e3-pacpie .e3-btn { max-width: 380px; }

/* ---------- Enviados ---------- */
.ay-escena .e3-lista { display: grid; gap: 8px; }
.ay-escena .e3-envio { background: var(--e3-sup); border: 1px solid var(--e3-borde); border-radius: 14px; padding: 2px 0 9px; display: grid; gap: 4px; transition: background .3s; }
.ay-escena .e3-envio .e3-fila { border: 0; align-items: start; }
.ay-escena .e3-envio .e3-fila > .e3-ic { margin-top: 10px; }
.ay-escena .e3-envio__acc { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px; }
.ay-escena .e3-envio__acc .e3-btn { height: 26px; padding: 0 9px; border-radius: 99px; font-size: 9.5px; gap: 4px; }
.ay-escena .e3-envio__acc .e3-btn--fan { border-color: var(--e3-borde); }
.ay-escena .e3-envio__acc .e3-ic { width: 12px; height: 12px; }
.ay-escena .e3-nuevo { display: inline-block; font-size: 8px; font-weight: 800; padding: 0 6px; border-radius: 99px; background: #FF6B57; color: #23255E; }
.ay-escena .e3-envio.inactivo { background: var(--e3-sup2); }
.ay-escena .e3-envio.inactivo .e3-mini { opacity: .45; }
.ay-escena .e3-anulado { font-weight: 800; color: #B32630; }
.ay-escena .e3-confirma { position: absolute; left: 22px; right: 22px; top: 32%; z-index: 12; display: grid; gap: 10px; padding: 16px 16px 12px; border-radius: 16px; background: #FFFFFF; color: #1D1D24; box-shadow: 0 16px 40px rgba(13, 14, 36, .35); font-size: 11.5px; line-height: 1.45; opacity: 0; visibility: hidden; transform: scale(.95); transition: opacity .25s, transform .25s, visibility 0s linear .25s; }
.ay-escena .e3-confirma.ver { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.ay-escena .e3-confirma b { font-size: 13px; }
.ay-escena .e3-confirma div { display: flex; justify-content: flex-end; gap: 8px; }
.ay-escena .e3-confirma div span { padding: 6px 14px; border-radius: 99px; font-weight: 700; color: #1A56DB; }
.ay-escena .e3-confirma div span:last-child { background: #1A56DB; color: #FFFFFF; }

/* ---------- Cuenta y Ajustes ---------- */
.ay-escena .e3-tarjeta { background: var(--e3-sup); border: 1px solid var(--e3-borde); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; transition: background .4s, border-color .4s; }
.ay-escena .e3-tarjeta h2 { font-size: 12.5px; font-weight: 800; }
.ay-escena .e3-tarjeta > p { font-size: 10.5px; line-height: 1.45; color: var(--e3-texto2); }
.ay-escena .e3-tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ay-escena .e3-perfil { display: flex; align-items: center; gap: 10px; }
.ay-escena .e3-perfil > span { display: grid; line-height: 1.3; }
.ay-escena .e3-perfil b { font-size: 13px; }
.ay-escena .e3-perfil small { font-size: 10px; color: var(--e3-texto2); }
.ay-escena .e3-form { display: grid; gap: 8px; }
.ay-escena .e3-comarca { border: 1px solid var(--e3-borde); border-radius: 12px; overflow: hidden; background: #FFFFFF; color: #1D1D24; }
.ay-escena .e3-comarca__cab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #E7E3DA; }
.ay-escena .e3-comarca__cab span { display: grid; line-height: 1.25; }
.ay-escena .e3-comarca__cab b { font-size: 11.5px; }
.ay-escena .e3-comarca__cab small { font-size: 9.5px; color: #5B5B66; }
.ay-escena .e3-comarca__cuerpo { display: grid; gap: 2px; padding: 8px 10px; }
.ay-escena .e3-comarca__cuerpo small { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #BC4434; }
.ay-escena .e3-comarca__cuerpo b { font-size: 12px; color: #23255E; }
.ay-escena .e3-comarca__img { display: block; height: 84px; margin-top: 5px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F4F4F7 60%, #E9E9EF 100%); }
.ay-escena .e3-comarca__img svg { width: 100%; height: 100%; display: block; }
.ay-escena .e3-comarca__pie { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border-top: 1px solid #E7E3DA; font-size: 9px; color: #5B5B66; }
.ay-escena .e3-comarca__pie .m-logo { font-size: 10px; gap: 3px; }
.ay-escena .e3-comarca__pie .m-logo svg { width: 12px; height: 12px; }
.ay-escena .e3-fila-btn { display: flex; flex-wrap: wrap; gap: 6px; }
.ay-escena .e3-fila-btn .e3-btn { height: 30px; font-size: 10.5px; padding: 0 12px; }
.ay-escena .e3-mas { gap: 0; padding: 4px 8px; }
.ay-escena .e3-enfila { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--e3-borde); }
.ay-escena .e3-enfila:first-child { border-top: 0; }
.ay-escena .e3-enfila > span:nth-child(2) { display: grid; min-width: 0; }
.ay-escena .e3-enfila b { font-size: 11.5px; }
.ay-escena .e3-enfila small { font-size: 9.5px; line-height: 1.35; color: var(--e3-texto2); }
.ay-escena .e3-enfila > .e3-ic { width: 14px; height: 14px; color: var(--e3-texto2); }
.ay-escena .e3-ajuste { display: grid; gap: 6px; }
.ay-escena .e3-ajuste > span:first-child { display: grid; gap: 1px; }
.ay-escena .e3-ajuste b { font-size: 11.5px; }
.ay-escena .e3-ajuste small { font-size: 9.5px; line-height: 1.4; color: var(--e3-texto2); }
.ay-escena .e3-seg { justify-self: start; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--e3-sup2); border: 1px solid var(--e3-borde); }
.ay-escena .e3-seg > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; font-size: 10.5px; font-weight: 600; color: var(--e3-texto2); white-space: nowrap; transition: background .2s, color .2s; }
.ay-escena .e3-seg .e3-ic { width: 12px; height: 12px; }
.ay-escena .e3-seg > span.on { background: var(--e3-sup); color: var(--e3-texto); box-shadow: 0 1px 3px rgba(13, 14, 36, .15); font-weight: 800; }
.ay-escena .e3-oscuro .e3-seg > span.on { background: #444676; color: #FFFFFF; }
.ay-escena .e3-seg__no { opacity: .5; }
.ay-escena .e3-frase { font-size: 10.5px; line-height: 1.45; font-style: italic; padding: 8px 10px; border-radius: 10px; background: var(--e3-sup2); border-left: 3px solid #FF6B57; }

/* ---------- el video en otra pestaña ---------- */
.ay-escena .e3-pestana { background: #0E0E10; display: grid; place-items: center; }
.ay-escena .e3-vid { width: 100%; display: grid; place-items: center; }
.ay-escena .e3-vid__marco { position: relative; width: 78%; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F4F4F7 60%, #E9E9EF 100%); }
.ay-escena .e3--tel .e3-vid__marco { width: 100%; }
.ay-escena .e3-vid__marco > svg { width: 100%; height: 100%; display: block; }
.ay-escena .e3-vid__ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px; padding: 14px 10px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #FFFFFF; font-size: 10px; }
.ay-escena .e3-vid__ctl > span { display: grid; place-items: center; border-radius: 50%; }
.ay-escena .e3-vid__ctl .e3-ic { width: 15px; height: 15px; }
.ay-escena .e3-vid__ctl > span:first-child .e3-ic { fill: currentColor; }
.ay-escena .e3-vid__ctl small { white-space: nowrap; }
.ay-escena .e3-vid__ctl .e3-vid__barra { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .35); display: block; }
.ay-escena .e3-vid__menu { position: absolute; right: 8px; bottom: 36px; z-index: 3; min-width: 190px; display: grid; padding: 5px 0; border-radius: 10px; background: #FFFFFF; color: #1D1D24; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 11px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.ay-escena .e3-vid__menu.ver { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.ay-escena .e3-vid__menu span { display: flex; align-items: center; gap: 10px; padding: 7px 14px; }
.ay-escena .e3-vid__menu .e3-ic { width: 14px; height: 14px; color: #5B5B66; }
.ay-escena .e3-snack { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #303134; color: #FFFFFF; font-size: 11px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility 0s linear .3s; }
.ay-escena .e3-snack.ver { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
.ay-escena .e3-snack > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ay-escena .e3-snack .e3-ic { width: 14px; height: 14px; color: #81C995; }
.ay-escena .e3-snack__abrir { color: #8AB4F8; font-weight: 800; }
.ay-escena .e3-descargas { position: absolute; right: 12px; top: 42px; z-index: 25; width: 250px; display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #FFFFFF; color: #1D1D24; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); font-size: 11px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .25s, visibility 0s linear .25s; }
.ay-escena .e3-descargas.ver { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.ay-escena .e3-descargas > span { display: flex; align-items: center; gap: 10px; }
.ay-escena .e3-descargas > span > span { display: grid; }
.ay-escena .e3-descargas .e3-ic { width: 20px; height: 20px; color: #1A56DB; }
.ay-escena .e3-descargas small { font-size: 10px; color: #5B5B66; }