/* preguntas.css — EL COMPONENTE DE PREGUNTAS DE LA HOME, sacado a su propio archivo (8-oct-2026) para que /que-hacemos
   use exactamente el mismo (paco: «unificado a la parte de la home»). Copia fiel del <style id="prueba-preguntas"> de
   index.html; cuando se apruebe, la home debe cargar este archivo y borrar su copia (dos copias se separan). */
/* ══ PREGUNTAS · LAS ÚLTIMAS OBJECIONES (28-sep, v2) ══════════════════════════════════════════
   Oscuro, en el mundo de la marca. Dos columnas: a la izquierda el titular y la salida (WhatsApp)
   se quedan FIJOS mientras la lista pasa; a la derecha, ocho preguntas en dos grupos.
   Movimiento (criterio Emil): abrir = altura con interpolate-size + la respuesta que entra con un
   desenfoque que se disuelve; el «+» es de dos trazos y el vertical se recoge (se vuelve «−»);
   la abierta lleva un filete que crece a su izquierda. Cursor sólo con ratón. Entrada en cascada
   corta (45 ms), una vez, bajo `.fq--armado`. Todo fuera con movimiento reducido. */
#preguntas.fq{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px,7.5vw,108px); align-items:start }
#preguntas .fq__lado{ position:sticky; top:clamp(96px,16vh,150px) }
#preguntas .fq__lado .d2{ margin:0; max-width:17ch }   /* «Lo que preguntan / antes de firmar.»: dos renglones, no tres */
#preguntas .fq__baja{ margin:clamp(20px,3vh,28px) 0 0; font-size:var(--t5); line-height:1.5; color:var(--tx-2); max-width:30ch }
#preguntas .fq__liga{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; margin-top:.5rem; font-size:var(--t5); color:var(--tx-1);
  text-decoration:none; background:linear-gradient(currentColor,currentColor) 100% calc(50% + .8em) / 0 1px no-repeat;
  transition:background-size .35s var(--curva) }
#preguntas .fq__liga span{ display:inline-block; transition:transform .22s var(--curva) }

#preguntas .fq__lista{ min-width:0 }
#preguntas .fq__grupo{ margin:0 0 12px; font-size:var(--t6); line-height:1.3; color:var(--tx-3) }
#preguntas .fq__p + .fq__grupo{ margin-top:clamp(48px,7vh,72px) }
#preguntas .fq__p{ position:relative; border-top:1px solid var(--tx-linea) }
#preguntas .fq__grupo + .fq__p{ border-top-color:rgba(237,239,243,.2) }
#preguntas .fq__p:last-child, #preguntas .fq__p:has(+ .fq__grupo){ border-bottom:1px solid var(--tx-linea) }
/* el filete de la abierta: crece desde arriba a la izquierda */
#preguntas .fq__p::after{ content:''; position:absolute; left:-20px; top:22px; bottom:22px; width:1px; background:var(--tx-1);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .45s cubic-bezier(.23,1,.32,1) }
#preguntas .fq__p[open]::after{ transform:none }

#preguntas .fq__p > summary{ position:relative; isolation:isolate; list-style:none; cursor:pointer; display:grid;
  grid-template-columns:2.75rem minmax(0,1fr) 20px; align-items:baseline; gap:0 12px; padding:clamp(18px,2.6vh,24px) 0;
  -webkit-tap-highlight-color:transparent }
#preguntas .fq__p > summary::-webkit-details-marker{ display:none }
/* el panel del cursor, detrás, más ancho que la fila */
#preguntas .fq__p > summary::before{ content:''; position:absolute; z-index:-1; inset:6px -16px; border-radius:14px; background:rgba(237,239,243,.04);
  opacity:0; transition:opacity .2s ease }
#preguntas .fq__n{ font-size:var(--t6); color:var(--tx-3); font-variant-numeric:tabular-nums; transition:color .2s ease }
#preguntas .fq__q{ font-size:var(--t4); line-height:1.35; color:var(--tx-2); transition:color .2s ease, transform .3s cubic-bezier(.23,1,.32,1) }
#preguntas .fq__p[open] .fq__q, #preguntas .fq__p[open] .fq__n{ color:var(--tx-1) }
/* el «+» de dos trazos: el vertical se recoge y queda «−» */
#preguntas .fq__x{ position:relative; width:14px; height:14px; align-self:center; justify-self:end }
#preguntas .fq__x::before, #preguntas .fq__x::after{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; margin-top:-.5px;
  background:var(--tx-1); border-radius:1px; transition:transform .32s cubic-bezier(.23,1,.32,1), opacity .2s ease }
#preguntas .fq__x::after{ transform:rotate(90deg) }
#preguntas .fq__p[open] .fq__x::after{ transform:rotate(90deg) scaleX(0) }
#preguntas .fq__p[open] .fq__x::before{ transform:rotate(180deg) }
@media (hover:hover) and (pointer:fine){
  #preguntas .fq__p > summary:hover::before{ opacity:1 }
  #preguntas .fq__p > summary:hover .fq__q{ color:var(--tx-1); transform:translateX(4px) }
  #preguntas .fq__p > summary:hover .fq__n{ color:var(--tx-2) }
  #preguntas .fq__liga:hover{ background-position:0 calc(50% + .8em); background-size:100% 1px }
  #preguntas .fq__liga:hover span, #preguntas .fq__ir:hover span{ transform:translate(2px,-2px) }
}
#preguntas .fq__p > summary:focus-visible{ outline:1px solid var(--tx-1); outline-offset:4px; border-radius:10px }
#preguntas .fq__liga:focus-visible, #preguntas .fq__ir:focus-visible{ outline:1px solid var(--tx-1); outline-offset:3px }

/* la respuesta: altura animada (interpolate-size) + entra 8 px con un desenfoque que se disuelve */
#preguntas .fq__p::details-content{ block-size:0; overflow:hidden; opacity:0;
  transition:block-size .38s cubic-bezier(.23,1,.32,1), opacity .3s ease, content-visibility .38s allow-discrete }
#preguntas .fq__p[open]::details-content{ block-size:auto; opacity:1 }
#preguntas .fq__r{ padding:0 44px 28px calc(2.75rem + 12px); max-width:60ch;
  transition:transform .45s cubic-bezier(.23,1,.32,1), filter .45s cubic-bezier(.23,1,.32,1) }
#preguntas .fq__p:not([open]) .fq__r{ transform:translateY(-8px); filter:blur(3px) }
#preguntas .fq__r p{ margin:0; font-size:var(--t5); line-height:1.6; color:var(--tx-2); max-width:none; font-variant-numeric:tabular-nums }
#preguntas .fq__r .fq__ya{ margin-bottom:.6rem; font-size:var(--t4); line-height:1.4; color:var(--tx-1) }
#preguntas .fq__ir{ display:inline-flex; gap:.4rem; margin-top:1rem; font-size:var(--t5); color:var(--tx-1); text-decoration:none;
  border-bottom:1px solid rgba(237,239,243,.25); padding-bottom:2px; transition:border-color .2s ease }
#preguntas .fq__ir span{ display:inline-block; transition:transform .22s var(--curva) }
#preguntas .fq__ir:hover{ border-bottom-color:var(--tx-1) }


@media (max-width:899px){
  #preguntas.fq{ grid-template-columns:minmax(0,1fr); row-gap:clamp(32px,5vh,48px) }
  #preguntas .fq__lado{ position:static }
  #preguntas .fq__lado .d2{ max-width:none }
  #preguntas .fq__p > summary{ grid-template-columns:2.25rem minmax(0,1fr) 18px }
  #preguntas .fq__r{ padding:0 0 24px calc(2.25rem + 12px) }
  #preguntas .fq__p::after{ left:-12px }
}
@media (prefers-reduced-motion:reduce){ #preguntas.fq *, #preguntas.fq *::before, #preguntas.fq *::after{ transition:none!important }
  #preguntas .fq__p:not([open]) .fq__r{ transform:none; filter:none } }

/* ── VARIANTE «LA RESPUESTA SUBE» (8-oct-2026, /que-hacemos; paco eligió F1 de _mock-trabajo/) ──
   Opt-in con `.fq.-sube` + preguntas.js. En pantalla ancha la respuesta NO se despliega bajo su pregunta: sube a la
   columna fija de la izquierda, debajo del título y grande (la conclusión en --t2, el detalle en --t5), donde ya está
   la vista. La pregunta abierta queda con su panel encendido y «−» (otro clic la cierra). En teléfono (o sin JS) se queda el acordeón normal. */
.fq__resp{ display:none }
@media (min-width:900px){
  #preguntas.fq.-sube.-js .fq__p::details-content{ block-size:0 !important; opacity:0 !important }
  #preguntas.fq.-sube.-js .fq__p::after{ display:none }
  #preguntas.fq.-sube.-js .fq__p[open] > summary::before{ opacity:1 }
  #preguntas.fq.-sube.-js .fq__resp{ display:block; margin-top:clamp(20px,3vh,28px) }
  #preguntas.fq.-sube.-js.-abierta .fq__baja{ display:none }
  .fq__resp small{ display:block; font-size:var(--t6); color:var(--tx-3) }
  .fq__resp .q{ margin:.5rem 0 0; font-size:var(--t4); line-height:1.35; color:var(--tx-2) }
  .fq__resp .ya{ margin:.9rem 0 0; font-size:var(--t2); line-height:1.06; letter-spacing:-.03em; color:var(--tx-1); max-width:15ch; text-wrap:balance }
  .fq__resp .det{ margin:1.1rem 0 0; font-size:var(--t5); line-height:1.6; color:var(--tx-2); max-width:40ch }
  .fq__resp .fq__ir{ margin-top:1rem }
  .fq__resp > *{ animation:fq-sube .5s cubic-bezier(.23,1,.32,1) both }
  .fq__resp > :nth-child(2){ animation-delay:.03s } .fq__resp > :nth-child(3){ animation-delay:.07s } .fq__resp > :nth-child(n+4){ animation-delay:.11s }
  #preguntas.fq.-sube.-js .fq__lado .fq__liga{ margin-top:clamp(24px,4vh,36px) }
}
@keyframes fq-sube{ from{ opacity:0; transform:translateY(10px); filter:blur(3px) } to{ opacity:1; transform:none; filter:none } }
@media (prefers-reduced-motion:reduce){ .fq__resp > *{ animation:none } }