/* ── 07 · Dudas de la portada, al estilo ChatGPT ─────────────────────────────────
   Cada pregunta es un mensaje del cliente (burbuja gris a la derecha) y la respuesta,
   la de Hosteate a la izquierda con su avatar. Sigue siendo un <details> nativo: teclado,
   lector de pantalla y «buscar en la página» funcionan sin JS; assets/js/v4-faq.js sólo
   añade la apertura suave y los puntos de «escribiendo». El clip de la izquierda sale de
   escenas-faq/ (Remotion, fondo transparente) y en una columna se oculta.
   No usa .pregs a propósito: esa clase la comparten las páginas de precios. */

.faq-chat{align-items:start}
.faq-chat .faq-tit{top:96px}

/* El clip: transparente, flota bajo el botón. 960×780 a ≈2,2× */
.faq-clip{margin:30px 0 0 -10px;width:calc(100% + 10px);max-width:460px;aspect-ratio:960/780;pointer-events:none}
.faq-clip video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}

/* El hilo */
.faq-hilo{display:flex;flex-direction:column;gap:10px}
.faq-msg{position:relative}
.faq-msg summary{list-style:none;display:flex;justify-content:flex-end;align-items:center;gap:12px;cursor:pointer;padding:4px 0;border-radius:24px;-webkit-tap-highlight-color:transparent}
.faq-msg summary::-webkit-details-marker{display:none}
.faq-msg summary::marker{content:""}
.faq-msg summary:focus{outline:none}
.faq-msg summary:focus-visible .faq-q{outline:2px solid #7c93ff;outline-offset:3px}

/* La burbuja del cliente */
.faq-q{order:2;max-width:min(82%,540px);padding:13px 19px;border-radius:22px;background:#161616;border:1px solid #2c2c31;color:#f2f2f2;font:500 clamp(15.5px,1.25vw,17px)/1.42 var(--disp);letter-spacing:-.012em!important;text-wrap:pretty;transition:background .18s,border-color .18s}
.faq-msg summary:hover .faq-q{background:#1d1d21;border-color:#3a3a40}
.faq-msg[open] .faq-q{background:#2f2f2f;border-color:#2f2f2f}

/* El botón redondo que abre y cierra (chevron que gira) */
.faq-mas{order:1;flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;color:#6b6b70;transition:color .18s,background .18s,transform .3s cubic-bezier(.2,.7,.2,1)}
.faq-mas::before{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.faq-msg summary:hover .faq-mas{color:#a1a1a6;background:#161616}
.faq-msg[open] .faq-mas{transform:rotate(180deg);color:#a1a1a6}

/* La respuesta: sin burbuja, a la izquierda, con avatar */
.faq-r{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:16px 4px 18px 0;overflow:hidden}
.faq-av{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;background:linear-gradient(140deg,#7c93ff,#3b5bff);box-shadow:0 4px 14px rgba(59,91,255,.22)}
.faq-av i{width:17px;height:16px;background:#fff;-webkit-mask:url("../icons/v2/logo.svg") center/contain no-repeat;mask:url("../icons/v2/logo.svg") center/contain no-repeat}
.faq-tx{position:relative;min-width:0;padding-top:1px}
.faq-quien{display:flex;align-items:center;gap:8px;height:32px;font:600 14px/1 var(--disp);color:#f2f2f2;letter-spacing:-.01em}
.faq-quien::after{content:"";width:6px;height:6px;border-radius:99px;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.16)}
.faq-tx p{margin-top:2px;max-width:62ch;color:#f2f2f2;font-size:16px;line-height:1.68;opacity:.92;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}

/* «escribiendo…» (lo pone v4-faq.js un instante al abrir) */
.faq-puntos{display:none;position:absolute;left:0;top:40px;gap:5px;padding:11px 14px;border-radius:16px;background:#161616;border:1px solid #2c2c31}
.faq-puntos i{width:7px;height:7px;border-radius:99px;background:#a1a1a6;animation:faq-p 1s infinite ease-in-out}
.faq-puntos i:nth-child(2){animation-delay:.15s}
.faq-puntos i:nth-child(3){animation-delay:.3s}
@keyframes faq-p{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.faq-msg.escribe .faq-puntos{display:inline-flex}
.faq-msg.escribe .faq-tx p{opacity:0;transform:translateY(6px)}

/* Compositor: «pregunta lo que quieras» → correo a soporte */
.faq-compo{margin-top:14px;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 22px;border-radius:999px;background:#161616;border:1px solid #2c2c31;color:#6b6b70;font:400 15.5px/1.3 var(--disp);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .18s,color .18s,background .18s}
.faq-compo-tx{flex:1;min-width:0}
.faq-compo-ir{flex:none;width:40px;height:40px;border-radius:99px;display:grid;place-items:center;background:#f2f2f2;color:#000;transition:transform .18s,background .18s}
.faq-compo-ir svg{width:18px;height:18px}
.faq-compo:hover{border-color:#3a3a40;color:#a1a1a6;background:#1a1a1d}
.faq-compo:hover .faq-compo-ir{transform:translateY(-1px);background:#fff}
.faq-compo:focus-visible{outline:2px solid #7c93ff;outline-offset:3px}

/* Una columna: el clip se va (no llega a descargarse: el observador no lo ve) */
@media (max-width:860px){
  .faq-clip{display:none}
}
@media (max-width:560px){
  .faq-q{max-width:88%;padding:12px 16px;border-radius:20px}
  .faq-mas{width:26px;height:26px}
  .faq-r{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:14px 0 16px}
  .faq-av{width:30px;height:30px}
  .faq-av i{width:15px;height:14px}
  .faq-quien{height:28px}
  .faq-puntos{top:36px}
  .faq-tx p{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .faq-q,.faq-mas,.faq-tx p,.faq-compo,.faq-compo-ir{transition:none}
  .faq-puntos i{animation:none}
}