/* ==========================================================================
   Avatar 3D de Iván (copia de prueba de dividendoweb.com).
   Una sola capa 3D fija por encima de la página: el avatar va de un hueco libre a otro, nunca encima de
   los ejemplos. Lo único que cambia de la web: un hueco bajo los botones de la portada en el móvil y otro
   encima de la hoja de Precios (menos de 1300 px). Colores y letras: los de Dividendo.
   ========================================================================== */

/* Scroll suave como el del ejemplo (scroll.ts, excepción pedida por Iván): estilos de Lenis 1.3 (MIT,
   darkroom.engineering). Sin rebote ni «tirar para recargar», como en codeofsagar.in (overscroll none). */
html.lenis,html.lenis body{height:auto;overscroll-behavior-y:none}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* La capa: ocupa la pantalla grande (100lvh) para no cambiar de tamaño con la barra del móvil */
.av-capa{position:fixed;top:0;left:0;z-index:45;pointer-events:none;visibility:hidden}
/* encima del panel del chat solo cuando él ya está encima (main.ts, ponerDelante): mientras sale de un sitio que queda
   detrás del panel, va por detrás */
.av-encima-chat .av-capa{z-index:61}
.av-quieto .av-solo3d{display:none}

/* Portada: la foto fija (antes del 3D, o en su lugar) se va con un fundido cuando entra el 3D */
.hero{position:relative}
/* invisible hasta que tiene su foto: si no, el lienzo vacío nace arriba y «salta» a su sitio (CLS) */
.av-foto-portada{position:absolute;z-index:2;display:block;pointer-events:none;visibility:hidden;transition:opacity .45s var(--ease)}
.av-foto-portada.av-lista{visibility:visible}
.av-3d-listo .av-foto-portada{opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
/* La mesa vacía (con la silla retirada) cuando él está en otra sección: una imagen en la página que el 3D dibuja
   al irse. Entra con el mismo fundido que se va la foto fija. */
.av-mesa{position:absolute;z-index:2;display:block;pointer-events:none;opacity:0}
.av-mesa[hidden]{display:none}
.av-3d-listo .av-mesa{opacity:1;transition:opacity .45s var(--ease)}
@media (max-width:900px){
  /* móvil: un hueco bajo los botones para el avatar en su mesa (lo guarda el CSS: no hay saltos) */
  .js .hero .hero-talk{padding-bottom:clamp(190px,30svh,250px)}
}
/* Móvil: un hueco al final de algunas secciones para el avatar (sus paradas del recorrido). Va en el HTML
   (montar-prueba.mjs) y aquí su alto: nada salta al cargar y él nunca se pone encima del texto. */
.av-hueco{display:none}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .av-hueco{display:block;grid-column:1/-1;height:clamp(190px,27svh,236px);pointer-events:none}
  /* sin 3D (ahorro de datos o un móvil que no puede): su foto de pie en el mismo hueco */
  .av-quieto .av-hueco{background:url(/avatar/img/cuerpo.webp) no-repeat 70% 100%/auto 92%}
}

/* ---------- Precios: junto a la hoja ---------- */
.av-precios{color:var(--on-ink)}
.av-precios-caja{position:relative}
.av-acciones{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.av-btn{background:transparent;color:var(--on-ink);border:2px solid var(--muted-on-ink);white-space:normal;text-align:left;line-height:1.2;padding:8px 16px}
.av-btn:hover{border-color:var(--on-ink)}
.av-btn[disabled]{opacity:.6;cursor:wait}
.av-btn[hidden]{display:none}
.av-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--on-ink);cursor:pointer;
  font:600 1rem/1.2 var(--sans);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.32em;text-decoration-color:var(--accent)}
.av-link:hover{text-decoration-color:currentColor}
.av-link[disabled]{opacity:.6;cursor:wait}
.av-precios :focus-visible{outline-color:var(--accent)}
@media (max-width:1299px){
  .js #quote .quote-stage{position:relative;padding-top:calc(clamp(32px,5vw,72px) + 244px)}
  .av-precios{position:absolute;top:clamp(32px,5vw,72px);left:clamp(20px,4.4vw,64px);right:clamp(20px,4.4vw,64px);height:220px;
    display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:center;gap:16px}
  .av-precios-caja{height:220px}
}
@media (min-width:1300px){
  .av-precios.es-lado{position:absolute;top:0;left:calc(100% + 14px);display:flex;flex-direction:column;gap:12px}
  .av-precios.es-lado .av-acciones{padding-left:4px}
}

/* ---------- Chat: la etiqueta, junto al avatar de pie encima del panel ---------- */
.av-etiqueta{position:fixed;z-index:62;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;pointer-events:none;
  background:var(--ink);color:var(--on-ink);font:600 var(--step-small)/1.2 var(--sans);white-space:nowrap}
.av-etiqueta[hidden]{display:none}
.av-etiqueta::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Tocarle abre el chat (31/10/2026): su bocadillo, la mano y su busto en la cabecera del chat ---------- */
.av-pista{position:fixed;z-index:46;margin:0;max-width:min(220px,42vw);padding:8px 12px;pointer-events:none;
  background:var(--ink);color:var(--on-ink);font:600 var(--step-small)/1.3 var(--sans);text-wrap:balance}
.av-pista[hidden]{display:none}
.av-sobre-ivan,.av-sobre-ivan *{cursor:pointer!important}
.av-busto-chat{display:none;width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;background:#fff}
.av-chat-busto .av-busto-chat{display:block}
.av-chat-busto .bot-head .bot-av{display:none}

/* ---------- Sonido: botón de la cabecera (excepción pedida por Iván, como en el ejemplo) ---------- */
.av-sonido{display:none;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 4px;border:0;background:none;
  color:var(--soft);font:600 .875rem/1 var(--sans);cursor:pointer;transition:color .2s}
.js .av-sonido{display:inline-flex}
.av-sonido[aria-pressed="true"]{color:var(--ink)}
.av-sonido:hover{color:var(--ink)}
.av-sonido:active{transform:scale(.97)}
.av-sonido svg{width:20px;height:16px;overflow:visible}
.av-eq{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.2);transition:transform .4s var(--ease)}
.av-sonido[aria-pressed="true"] .av-eq{animation:av-eq 1s ease-in-out infinite alternate}
.av-sonido[aria-pressed="true"] .av-eq:nth-child(2){animation-duration:.72s;animation-delay:-.2s}
.av-sonido[aria-pressed="true"] .av-eq:nth-child(3){animation-duration:1.24s;animation-delay:-.5s}
.av-sonido[aria-pressed="true"] .av-eq:nth-child(4){animation-duration:.88s;animation-delay:-.3s}
@keyframes av-eq{0%{transform:scaleY(.3)}55%{transform:scaleY(1)}100%{transform:scaleY(.5)}}
@media (prefers-reduced-motion:reduce){.av-sonido[aria-pressed="true"] .av-eq{animation:none;transform:scaleY(.65)}}
@media (max-width:560px){
  /* en el móvil solo las barras (la palabra sigue para los lectores de pantalla) */
  .av-sonido{padding:0;justify-content:center}
  .av-sonido-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Avión de papel ---------- */
.av-vuelo{position:fixed;inset:0;z-index:80;width:100vw;height:100vh;pointer-events:none}

/* ---------- Copia de prueba: aviso en el formulario ---------- */
.av-aviso-prueba{margin-bottom:24px;padding:14px 18px;background:var(--bg2);font-size:var(--step-small);line-height:1.45}

/* ---------- Laboratorio de ideas ---------- */
.lab{padding:clamp(40px,6vw,96px) 0 var(--sec)}
.lab-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
/* El título y la entradilla suben con la página; lo que se queda a la vista mientras pruebas las ideas es el
   escenario con el avatar (y su bocadillo). La columna llega hasta el final de las ideas para que pueda quedarse. */
.lab-intro{align-self:stretch}
.lab-fijo{position:sticky;top:calc(var(--hh) + 16px)}
.lab h1{font:400 var(--step-head)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.lab-lead{margin-top:20px;font-size:var(--step-lead);line-height:1.38;max-width:30ch;text-wrap:pretty}
.lab-nota{margin-top:12px;font-size:var(--step-small);color:var(--muted)}
.lab-escenario{position:relative;margin-top:28px;height:min(52vh,560px);min-height:320px;background:var(--bg2)}
.av-bocadillo{margin-top:12px;padding:14px 18px;background:var(--ink);color:var(--on-ink);font-size:var(--step-body);line-height:1.45;max-width:46ch}
.av-bocadillo[hidden]{display:none}
.lab-ideas{display:grid;gap:56px}
.lab-idea{display:grid;grid-template-columns:152px minmax(0,1fr) auto;column-gap:32px;align-items:start}
.lab-idea > *{grid-column:2}
.lab-foto{grid-column:1;grid-row:1 / span 3;display:block;width:152px;height:152px;background:var(--bg2)}
.lab-idea .lab-estado{margin-top:6px;font-size:var(--step-small);color:var(--muted)}
.lab-idea .lab-texto{margin-top:10px;max-width:52ch}
.lab-idea .btn{grid-column:3;grid-row:1 / span 3;align-self:center}
@media (max-width:900px){
  .lab-grid{grid-template-columns:minmax(0,1fr)}
  .lab-fijo{position:static}
  .lab-escenario{height:min(68svh,520px)}
}
@media (max-width:560px){
  .lab-ideas{gap:48px}
  .lab-idea{grid-template-columns:80px minmax(0,1fr);column-gap:18px}
  .lab-foto{width:80px;height:80px}
  .lab-idea .btn{grid-column:2;grid-row:auto;justify-self:start;margin-top:16px}
}