/* Avatar en audio (provisional): imagen fija de Luca + audio generado + subtitulos. Sustituible por video.
   Esquina de la portada: .av (boton + panel flotante). Dentro de una pagina: .avp--pag (filetes, sin caja). */
.av[hidden],.avp[hidden],.av__panel[hidden]{display:none}
.av__sprite{position:absolute;width:0;height:0;overflow:hidden}
.av__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- esquina de la portada ---------- */
.av{position:fixed;right:max(var(--gut),env(safe-area-inset-right));bottom:max(.5rem,env(safe-area-inset-bottom));z-index:60;transition:opacity .4s var(--suave),visibility .4s}
html.hay-aviso .av.av--oculto.is-visible,html.hay-aviso .av{opacity:0;visibility:hidden;pointer-events:none}
.av.is-abierto .av__abrir{display:none}
.av__abrir{position:relative;display:block;width:clamp(6.25rem,11vw,10rem);padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.av__fig{display:block;filter:drop-shadow(0 0 1.2px rgba(212,164,74,.95)) drop-shadow(0 0 10px rgba(212,164,74,.22)) drop-shadow(0 14px 18px rgba(0,0,0,.7));animation:av-flota 4.2s ease-in-out infinite}
.av__fig img{display:block;width:100%;height:auto}
.av__abrir:hover .av__fig{animation-play-state:paused;transform:translateY(-3px) scale(1.03);transition:transform .35s var(--suave)}
.av__burbuja{position:absolute;right:70%;bottom:64%;white-space:nowrap;padding:.5rem .95rem;border-radius:16px;background:var(--bg2);color:var(--texto);border:1px solid rgba(212,164,74,.6);font:800 .9375rem/1 var(--f-texto);letter-spacing:-.01em;box-shadow:0 10px 26px -10px rgba(0,0,0,.8);opacity:0;transform:translateY(6px) scale(.92);transform-origin:100% 100%}
.av__burbuja::after{content:"";position:absolute;right:16px;bottom:-7px;width:12px;height:12px;background:var(--bg2);border-right:1px solid rgba(212,164,74,.6);border-bottom:1px solid rgba(212,164,74,.6);transform:rotate(45deg)}
@keyframes av-flota{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes av-pop{to{opacity:1;transform:none}}
@keyframes av-saludo{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-9px) rotate(-3deg)}65%{transform:translateY(-3px) rotate(2deg)}}
@keyframes av-pulso{0%{box-shadow:0 0 0 0 rgba(255,107,26,.55)}100%{box-shadow:0 0 0 16px rgba(255,107,26,0)}}

/* aparece en su zona con un saludo y se va cuando se ha escuchado (js/avatar-audio.js pone las clases) */
.av{transition:opacity .5s var(--suave),transform .7s var(--suave),visibility .5s}
.av.av--oculto{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(32px)}
.av.av--oculto.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.av.is-visible .av__burbuja{animation:av-pop .6s .9s var(--suave) forwards}
.av.is-visible .av__fig img{animation:av-saludo 1.1s .6s var(--suave) 2}

.av__panel{position:fixed;right:max(var(--gut),env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;width:min(25rem,calc(100vw - 2 * var(--gut)));padding:1.1rem 1.25rem 1rem;background:rgba(20,20,20,.97);border:1px solid rgba(212,164,74,.3);border-radius:16px;box-shadow:0 28px 70px -24px rgba(0,0,0,.9);animation:av-entra .5s var(--suave) both}
@keyframes av-entra{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
.av__x{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;background:none;color:var(--sec);cursor:pointer}
.av__x:hover{color:var(--texto)}
.av__x svg{width:1.25rem;height:1.25rem}

/* ---------- contenido compartido (panel y bloque de pagina) ---------- */
.avp__foto{display:block;width:100%;height:auto;filter:drop-shadow(0 0 1px rgba(212,164,74,.9)) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.avp__cue{margin:0;min-height:calc(1.45em * 3);font:600 1.0625rem/1.45 var(--f-texto);color:var(--texto);text-wrap:balance}
.avp__ctrl{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;margin-top:.5rem}
.avp__play{gap:.55rem;cursor:pointer;border:0}
.avp__play svg{width:1.15rem;height:1.15rem;flex:none}
.avp__t{font:600 .9375rem/1 var(--f-texto);color:var(--sec);font-variant-numeric:tabular-nums}
.avp__vers{display:flex;gap:.4rem}
.avp__vers button{min-height:2.25rem;padding:0 .85rem;border:1px solid var(--filete);border-radius:999px;background:none;color:var(--sec);font:600 .9375rem/1 var(--f-texto);cursor:pointer}
.avp__vers button:hover{color:var(--texto)}
.avp__vers button[aria-pressed="true"]{border-color:var(--oro);color:var(--oro)}
.avp__ia{margin:.9rem 0 0;font-size:.8125rem;line-height:1.4;color:var(--sec)}

/* barra de posicion: fina, dorada; se puede mover con el dedo o el teclado */
.avp__rango{--p:0;display:block;width:100%;height:1.5rem;margin:.35rem 0 0;padding:0;background:linear-gradient(to right,var(--oro) calc(var(--p) * 100%),var(--filete) 0) center/100% 3px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer}
.avp__rango::-webkit-slider-runnable-track{height:1.5rem;background:transparent}
.avp__rango::-moz-range-track{height:1.5rem;background:transparent}
.avp__rango::-webkit-slider-thumb{-webkit-appearance:none;width:.9rem;height:.9rem;margin-top:.3rem;border:0;border-radius:50%;background:var(--naranja)}
.avp__rango::-moz-range-thumb{width:.9rem;height:.9rem;border:0;border-radius:50%;background:var(--naranja)}

/* panel de la esquina: foto pequena a la izquierda y subtitulo a la derecha */
.av__panel .avp__cab{display:grid;grid-template-columns:4.25rem 1fr;gap:.9rem;align-items:center;padding-right:2rem}
.av__panel .avp__cue{font-size:1rem}

/* bloque dentro de la pagina: filetes en lugar de caja */
.avp--pag{display:grid;grid-template-columns:8rem 1fr;gap:1rem 1.75rem;align-items:center;margin-top:2rem;padding:1.5rem 0;border-block:1px solid var(--filete);max-width:46rem}
.avp--pag .avp__cue{font-size:clamp(1.0625rem,1.6vw,1.25rem);min-height:calc(1.45em * 2)}

.avp--pag.avp--sobre-tabla{margin-bottom:2rem}
.avp--pag{transition:opacity .6s var(--suave),transform .7s var(--suave),max-height .8s var(--suave),margin .8s var(--suave),padding .8s var(--suave),border-width .8s var(--suave)}
.avp--pag.avp--oculto{opacity:0;visibility:hidden;transform:translateY(18px)}
.avp--pag.avp--oculto.is-visible{opacity:1;visibility:visible;transform:none}
.avp--pag.is-visible .avp__foto{animation:av-saludo 1.1s .5s var(--suave) 2}
.avp--pag.is-visible .avp__play{animation:av-pulso 1.8s 1.2s ease-out 3}
.avp--pag.is-fuera{opacity:0;margin-block:0;padding-block:0;border-width:0;overflow:hidden}

@media (max-width:719px){
  .av__abrir{width:clamp(5.5rem,26vw,7.5rem)}
  .av__burbuja{font-size:.8125rem;padding:.4rem .75rem;right:66%}
  .av__panel{right:.75rem;left:.75rem;width:auto;bottom:max(.75rem,env(safe-area-inset-bottom))}
  .avp--pag{grid-template-columns:5.25rem 1fr;gap:.75rem 1.1rem;padding:1.15rem 0}
  .avp--pag .avp__cue{min-height:calc(1.45em * 4)}
}
@media (prefers-reduced-motion:reduce){
  .av,.avp--pag{transition:none}
  .av.is-visible .av__burbuja{animation:none;opacity:1;transform:none}
  .av.is-visible .av__fig img,.avp--pag.is-visible .avp__foto,.avp--pag.is-visible .avp__play{animation:none}
  .av__fig{animation:none}
  .av__burbuja{animation:none;opacity:1;transform:none}
  .av__panel{animation:none}
  .av,.av__abrir:hover .av__fig{transition:none}
  .av__abrir:hover .av__fig{transform:none}
}

/* ---------- recomendador tras la calculadora (preguntas.html, js/calculadora.js) ---------- */
.reco{display:grid;grid-template-columns:8rem 1fr;gap:1rem 1.75rem;align-items:start;margin:2rem 0;padding:1.5rem 0;border-block:1px solid var(--filete);max-width:46rem;transition:opacity .6s var(--suave),transform .7s var(--suave)}
.reco[hidden],.reco [hidden]{display:none}
.reco.reco--oculto{opacity:0;visibility:hidden;transform:translateY(18px)}
.reco.reco--oculto.is-visible{opacity:1;visibility:visible;transform:none}
.reco.is-visible .reco__foto{animation:av-saludo 1.1s .4s var(--suave) 2}
.reco__foto{display:block;width:100%;height:auto;filter:drop-shadow(0 0 1px rgba(212,164,74,.9)) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.reco__t{margin:0;font:800 clamp(1.125rem,1.8vw,1.375rem)/1.25 var(--f-texto);letter-spacing:-.01em}
.reco__sub{margin:.5rem 0 0;color:var(--sec);font-size:.9375rem;line-height:1.5}
.reco__prog{margin:.9rem 0 0;color:var(--oro);font:700 .8125rem/1 var(--f-texto);letter-spacing:.04em;text-transform:uppercase}
.reco__prog--sep{margin-top:1.25rem}
.reco__q{margin:.6rem 0 .6rem;font:700 1.0625rem/1.4 var(--f-texto);color:var(--texto)}
.reco__q:focus{outline:none}
.reco__ops{display:flex;flex-wrap:wrap;gap:.5rem}
.reco__op{min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--filete);border-radius:999px;background:none;color:var(--texto);font:600 .9375rem/1.3 var(--f-texto);text-align:left;cursor:pointer}
.reco__op:hover{border-color:var(--oro);color:var(--oro)}
.reco__op:focus-visible,.reco__atras:focus-visible,.reco__enlace:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.reco__atras{margin:.75rem 0 0;padding:0;border:0;background:none;color:var(--sec);font:600 .9375rem/1.3 var(--f-texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.reco__atras:hover{color:var(--texto)}
.reco__rec{margin:.5rem 0 0;font:800 1.25rem/1.3 var(--f-texto)}
.reco__rec:focus{outline:none}
.reco__cifra{margin:.4rem 0 0;color:var(--oro);font-weight:700;line-height:1.45}
.reco__nota{margin:.6rem 0 0;color:var(--sec);font-size:.875rem;line-height:1.5}
.reco__acc{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;margin-top:1rem}
.reco__enlace{font-weight:700;color:var(--texto);text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:4px}
.reco__otras{margin:.5rem 0 0;padding:0;list-style:none}
.reco__otras li{margin:.35rem 0;color:var(--texto)}
.reco__otras .reco__atras{margin:0 0 0 .5rem}
@media (max-width:719px){.reco{grid-template-columns:5.25rem 1fr;gap:.75rem 1.1rem;padding:1.15rem 0}}
@media (prefers-reduced-motion:reduce){.reco{transition:none}.reco.is-visible .reco__foto{animation:none}}