/* =====================================================================
   EXPLICA · el reproductor de videos explicativos (Samuel 18-oct-2026: «si le
   picas a cada uno se abre un video explicativo… como los de Anthropic para
   Claude»). No son videos: son escenas dibujadas con HTML y animadas con la Web
   Animations API — nítidas a cualquier tamaño, sin descargar nada, y se editan
   en texto (lab/explica.js).
   Lenguaje visual: papel claro, la interfaz grande y quieta, UNA cosa se mueve a
   la vez, la cámara se acerca a lo que importa, una línea de texto por paso.
   ===================================================================== */
.ex-velo{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px;
  background:rgba(245,245,247,.72); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  animation:exVelo .35s ease both; }
@keyframes exVelo{ from{ opacity:0 } }
.ex-caja{ width:min(1100px, 100%, calc((100vh - 170px) * 16 / 9)); background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.35), 0 0 0 1px rgba(29,29,31,.06);
  animation:exCaja .5s cubic-bezier(.22,1,.36,1) both; font-family:'Helvetica Neue',Helvetica,Inter,Arial,sans-serif; color:#1D1D1F; }
@keyframes exCaja{ from{ opacity:0; transform:translateY(18px) scale(.98) } }
.ex-cab{ display:flex; align-items:center; gap:12px; padding:16px 18px 14px 22px; }
.ex-cab h3{ flex:1; font-size:18px; letter-spacing:-.01em; font-weight:700; }
.ex-cab h3 small{ display:block; font-size:12.5px; font-weight:500; color:rgba(29,29,31,.55); letter-spacing:0; margin-top:2px; }
.ex-btn{ min-width:44px; height:40px; padding:0 14px; border-radius:999px; border:0; background:rgba(118,118,128,.12); color:#1D1D1F;
  font:600 13.5px 'Helvetica Neue',Helvetica,Arial,sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.ex-btn:hover{ background:rgba(118,118,128,.2); }
.ex-btn:focus-visible{ outline:2px solid #0071E3; outline-offset:2px; }
.ex-pantalla{ position:relative; aspect-ratio:16/9; background:#F5F5F7; overflow:hidden; }
.ex-escala{ position:absolute; left:0; top:0; width:960px; height:540px; transform-origin:0 0; }
.ex-cam{ position:absolute; inset:0; transform-origin:50% 50%; }
.ex-pie{ display:flex; align-items:center; gap:14px; padding:14px 22px 18px; }
.ex-texto{ flex:1; font-size:16px; font-weight:600; letter-spacing:-.01em; min-height:24px; }
.ex-barra{ height:4px; border-radius:4px; background:rgba(0,113,227,.12); overflow:hidden; width:160px; flex:none; }
.ex-barra i{ display:block; height:100%; width:0; background:#0071E3; border-radius:4px; }

/* ---------- piezas de las escenas (coordenadas del lienzo 960×540) ---------- */
.ex-esc{ position:absolute; inset:0; font-family:'Helvetica Neue',Helvetica,Inter,Arial,sans-serif; color:#1D1D1F; font-size:15px; }
.ex-card{ position:absolute; background:#fff; border-radius:22px; box-shadow:0 30px 70px -40px rgba(0,0,0,.35), 0 0 0 1px rgba(29,29,31,.06); overflow:hidden; }
.ex-tel{ position:absolute; width:280px; height:560px; border-radius:46px; background:#111; padding:10px; box-shadow:0 40px 80px -40px rgba(0,0,0,.5); }
.ex-tel > .ex-pant{ position:relative; width:100%; height:100%; border-radius:37px; background:#fff; overflow:hidden; }
.ex-isla{ position:absolute; top:19px; left:50%; width:78px; height:22px; border-radius:20px; background:#111; transform:translateX(-50%); z-index:7; }
/* barra de estado: misma altura que la isla, hora y los íconos a sus lados */
.ex-estado{ position:absolute; left:10px; right:10px; top:10px; height:40px; padding:0 18px 0 28px; display:flex; align-items:center; justify-content:space-between; z-index:6; pointer-events:none; color:#1D1D1F; }
.ex-estado b{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
.ex-estado span{ display:flex; align-items:center; gap:4px; }
.ex-estado svg{ fill:currentColor; display:block; }
.ex-foto{ background:linear-gradient(135deg,#d7e6f6 0%,#a9c3e2 45%,#7d9cc4 100%); }
.ex-foto.b{ background:linear-gradient(135deg,#efe3d2,#d6bf9f 55%,#b49470); }
.ex-foto.c{ background:linear-gradient(135deg,#dfeedd,#a9cfa4 55%,#7aa874); }
.ex-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; }
.ex-azul{ background:#0071E3; color:#fff; }
.ex-suave{ background:rgba(0,113,227,.1); color:#0062c4; }
.ex-gris{ background:rgba(118,118,128,.12); color:#1D1D1F; }
.ex-verde{ background:rgba(52,199,89,.15); color:#1f7a35; }
.ex-naranja{ background:rgba(255,149,0,.16); color:#a35a00; }
.ex-rojo{ background:rgba(255,59,48,.13); color:#b3261e; }
.ex-mut{ color:rgba(29,29,31,.55); }
.ex-fila{ display:flex; align-items:center; gap:10px; }
.ex-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:700; flex:none; }
.ex-cursor{ position:absolute; left:0; top:0; width:26px; height:26px; z-index:50; pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14.5 8.4-6.3 1.8-3.3 6.1z' fill='%231D1D1F' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ex-onda{ position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:2px solid #0071E3; z-index:49; pointer-events:none; }
.ex-chk{ width:18px; height:18px; border-radius:6px; border:1.6px solid rgba(29,29,31,.3); flex:none; display:grid; place-items:center; }
.ex-chk.si{ background:#0071E3; border-color:#0071E3; }
.ex-chk.si::after{ content:''; width:8px; height:4px; border:2px solid #fff; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }

/* el nodo del catálogo se vuelve botón: se ve que se pica */
#todo button.tz{ cursor:pointer; font:inherit; color:inherit; text-align:left; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#todo button.tz:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 8px 20px -14px color-mix(in srgb, var(--c) 70%, transparent); }
#todo button.tz:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
#todo button.tz::after{ content:''; width:0; height:0; margin-left:auto; border-left:7px solid color-mix(in srgb, var(--c) 70%, transparent); border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; opacity:.0; transition:opacity .2s; }
#todo button.tz:hover::after{ opacity:1; }

@media (max-width:640px){
  .ex-velo{ padding:0; place-items:end center; }
  .ex-caja{ border-radius:24px 24px 0 0; }
  .ex-cab{ padding:12px 12px 10px 16px; }
  .ex-cab h3{ font-size:16px; }
  .ex-texto{ font-size:14.5px; }
  .ex-barra{ width:72px; }
}
@media (prefers-reduced-motion:reduce){ .ex-velo, .ex-caja{ animation:none; } }

/* ---------- aro de lo que se pica, pausa y tarjeta final ---------- */
.ex-aro{ position:absolute; z-index:48; pointer-events:none; border:2.5px solid #0071E3; box-shadow:0 0 0 6px rgba(0,113,227,.14), 0 10px 30px -10px rgba(0,113,227,.45); }
.ex-pantalla{ cursor:pointer; }
.ex-pantalla::after{ content:''; position:absolute; left:18px; bottom:18px; width:52px; height:52px; border-radius:50%; z-index:70; pointer-events:none;
  background:rgba(29,29,31,.55) no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='white'/%3E%3C/svg%3E");
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:scale(.9); transition:opacity .2s ease, transform .2s ease; }
.ex-en-pausa .ex-pantalla::after{ opacity:1; transform:none; }
.ex-fin{ position:absolute; inset:0; padding:16px; z-index:65; display:grid; place-content:center; justify-items:center; gap:14px; text-align:center;
  background:rgba(245,245,247,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:default; }
.ex-fin-marca{ font-size:15px; font-weight:700; color:#0071E3; letter-spacing:-.01em; }
.ex-fin-tit{ font-size:clamp(26px, 4.4vw, 46px); font-weight:700; letter-spacing:-.035em; line-height:1.05; }
.ex-fin-acc{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.ex-fin-acc .ex-btn{ height:48px; padding:0 22px; font-size:15px; max-width:calc(100vw - 48px); white-space:nowrap; text-overflow:ellipsis; position:relative; overflow:hidden; }
.ex-btn.ex-azul{ background:#0071E3; color:#fff; }
.ex-btn.ex-azul:hover{ background:#0077ED; }
.ex-fin-anillo{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.75); transform-origin:0 50%; transform:scaleX(0); }
@media (prefers-reduced-motion:reduce){ .ex-pantalla::after{ transition:none; } }

/* ---------- paso N de M y notas que señalan (Samuel 18-oct: «pasito por pasito») ---------- */
.ex-paso{ display:inline-block; margin-right:10px; padding:3px 9px; border-radius:999px; background:rgba(0,113,227,.1); color:#0062c4; font-size:12.5px; font-weight:700; vertical-align:1px; white-space:nowrap; }
.ex-nota{ position:absolute; z-index:55; max-width:260px; padding:9px 13px; border-radius:12px; background:#1D1D1F; color:#fff; font-size:14px; font-weight:600; line-height:1.3; letter-spacing:-.01em; box-shadow:0 14px 30px -14px rgba(0,0,0,.5); pointer-events:none; }
.ex-nota::after{ content:''; position:absolute; width:12px; height:12px; background:#1D1D1F; border-radius:2px; transform:rotate(45deg); }
.ex-nota-arriba::after{ left:calc(50% - 6px); bottom:-5px; }
.ex-nota-abajo::after{ left:calc(50% - 6px); top:-5px; }
.ex-nota-izq::after{ right:-5px; top:calc(50% - 6px); }
.ex-nota-der::after{ left:-5px; top:calc(50% - 6px); }
@media (max-width:640px){ .ex-paso{ font-size:11.5px; padding:2px 7px; margin-right:6px; } }

/* En el celular la pantalla es cuadrada: la cámara sigue la acción a 2× (explica.js · sigue). */
@media (max-width:640px){ .ex-pantalla{ aspect-ratio:1/1; } }
@media (max-width:640px){
  .ex-otra{ font-size:0; gap:0; }
  .ex-otra::before{ content:'↻'; font-size:18px; }
  .ex-cab{ gap:8px; }
}

/* dentro de otra pantalla (la laptop del showroom, 19-oct): sin ventana, sin cabecera */
.ex-velo.ex-dentro{ position:absolute; inset:0; z-index:5; padding:0; display:block; background:#F5F5F7; animation:none; }
.ex-dentro .ex-caja{ width:100%; height:100%; border-radius:0; box-shadow:none; animation:none; display:flex; flex-direction:column; }
.ex-dentro .ex-cab{ display:none; }
.ex-dentro .ex-pantalla{ flex:1; aspect-ratio:auto; min-height:0; }
.ex-dentro .ex-pie{ padding:8px 14px 10px; }
.ex-dentro .ex-texto{ font-size:14px; }
.ex-dentro .ex-pie .ex-paso, .ex-dentro .ex-texto b{ font-size:12px; }
@media (max-width:640px){ .ex-dentro .ex-pantalla{ aspect-ratio:auto; } .ex-dentro .ex-pie{ padding:0; } .ex-dentro .ex-texto{ display:none; } }

/* ---------- claridad (Samuel 20-oct: «a prueba de tontos… señores confusos, señoras grandes») ---------- */
.ex-texto{ font-size:18px; line-height:1.35; }
.ex-nota{ font-size:15px; padding:10px 14px; }
.ex-quien{ position:absolute; z-index:54; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px 0 8px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:-.005em; color:#fff; white-space:nowrap; pointer-events:none; box-shadow:0 6px 14px -8px rgba(0,0,0,.4); }
.ex-quien::before{ content:''; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.9; }
.ex-quien-tu{ background:#0071E3; }
.ex-quien-cliente{ background:#1F8A5B; }
.ex-quien-equipo{ background:#8A5CF6; }
.ex-portada, .ex-resumen{ position:absolute; inset:0; z-index:60; display:grid; align-content:center; justify-items:start; gap:22px; padding:0 120px; background:#F5F5F7; }
.ex-por-fila{ display:flex; gap:18px; align-items:flex-start; max-width:720px; }
.ex-por-ic{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:800; }
.ex-por-hoy .ex-por-ic{ background:rgba(255,59,48,.12); color:#c4281c; }
.ex-por-con .ex-por-ic{ background:#0071E3; color:#fff; }
.ex-por-fila small{ display:block; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(29,29,31,.5); margin-bottom:4px; }
.ex-por-fila p{ font-size:30px; line-height:1.18; font-weight:700; letter-spacing:-.025em; color:#1D1D1F; }
.ex-por-hoy p{ color:rgba(29,29,31,.62); font-weight:600; }
.ex-resumen{ background:rgba(245,245,247,.96); gap:16px; }
.ex-resumen > b{ font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#0071E3; }
.ex-res-fila{ display:flex; gap:14px; align-items:flex-start; max-width:720px; }
.ex-res-fila span{ flex:none; width:34px; height:34px; border-radius:50%; background:#34C759; color:#fff; display:grid; place-items:center; font-size:17px; font-weight:800; }
.ex-res-fila p{ font-size:26px; line-height:1.22; font-weight:650; letter-spacing:-.02em; color:#1D1D1F; padding-top:1px; }
@media (max-width:640px){ .ex-texto{ font-size:16px; } }
/* en el celular la cámara va 2× al centro: se ve x 240–720 del lienzo, y la portada cabe ahí */
.ex-portada.ex-chico, .ex-resumen.ex-chico{ padding:40px 254px; gap:14px; }
.ex-chico .ex-por-fila p{ font-size:22px; }
.ex-chico .ex-res-fila p{ font-size:19px; }
.ex-chico .ex-por-ic{ width:34px; height:34px; font-size:16px; }
.ex-chico .ex-por-fila small{ font-size:11px; }
.ex-quien-concreta{ background:#1D1D1F; } /* lo que muestra la app como resultado, no una persona */

/* ---------- botón de voz (Samuel 20-oct): la voz empieza APAGADA (explica/voz.js), así que el
   botón tiene que verse: azul de la landing, letra blanca y con palabras — «¿Lo ves con voz?»
   apagada, «Quitar voz» encendida. En el celular la cabecera va en dos renglones: título y ✕
   arriba, voz · pausa · repetir abajo; así el botón con texto no aprieta el título. */
.ex-btn.ex-voz{ background:#0071E3; color:#fff; padding:0 15px 0 12px; white-space:nowrap; flex:none;
  box-shadow:0 6px 16px -8px rgba(0,113,227,.7); }
.ex-btn.ex-voz:hover{ background:#0077ED; }
.ex-btn.ex-voz[aria-pressed="true"]{ background:#0062C4; }
.ex-voz-ic{ font-size:15px; line-height:1; }
.ex-voz-c{ display:none; }
@media (max-width:640px){
  .ex-cab{ flex-wrap:wrap; row-gap:0; }
  .ex-cab h3{ flex:1 1 0; min-width:0; }
  .ex-cab .ex-cerrar{ order:1; }
  .ex-cab::after{ content:''; order:1; flex-basis:100%; height:0; }
  .ex-cab .ex-voz, .ex-cab .ex-pausa, .ex-cab .ex-otra{ order:2; margin-top:10px; }
  .ex-cab .ex-voz{ margin-right:auto; }
}
@media (max-width:340px){ .ex-voz-t{ display:none; } .ex-voz-c{ display:inline; } }