/* Preguntas frecuentes. Cabecera de hub (a-hero con H1 en zigzag) + «journal» de Maison Boursier: foto fija que cambia con barrido por tema (≥1024 px)
   o banda con escala 1,4→1 entre temas (móvil) + acordeón de <details> con apertura animada (faq.js). Solo se carga en faq.html.
   Regla de la casa: el texto va siempre en su columna; las fotos viven en marcos con overflow:hidden y nunca se solapan con él. */

/* ───────── índice de temas ───────── */
.fq-wrap{width:min(1240px,calc(100% - 2*var(--pad)));margin:4vh auto 0}
.fq-idx{display:flex;flex-wrap:wrap;gap:0 26px;margin:0;padding:0 0 18px;border-bottom:1px solid rgba(28,28,26,.14)}
.fq-idx a{display:block;padding:14px 0;font:500 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:7px;transition:color .3s,text-decoration-color .3s}
@media (hover:hover){.fq-idx a:hover{color:var(--ink)}}
.fq-idx a[aria-current]{color:var(--ink);text-decoration-color:var(--gold-ink)}

/* ───────── temas ───────── */
.fq-grp{padding:76px 0 0}
body.faq .fq-grp .t-h2{margin:0 0 30px}   /* gana a «body .t-h2--item» sin !important */
.fq-items{border-bottom:1px solid rgba(28,28,26,.14)}

/* banda de foto (móvil/tablet): la escala 1,4→1 la pone Site.imageMotion sobre «.band .pf img». Marco con overflow, foto 4:5 (las fotos miden 800 px: a 420 de ancho siguen nítidas en pantallas de doble densidad) */
body .fq-band.band{position:relative;height:auto;width:min(100%,420px);aspect-ratio:4/5;margin:0 auto 52px;overflow:hidden;background:var(--stone)}
body .fq-band.band .pf{position:absolute;inset:0;top:0;height:100%}
.fq-band .pim{object-position:var(--pos,50% 40%)}

/* Cabecera (rediseño de proporciones, 2026-10-05; textos y efecto zigzag/instantáneas intactos): el titular baja de ≈ 81 a ≈ 69 px a 1440 y su caja se estrecha (--fq-hw, en em: cada línea
   viaja por el hueco libre de su línea, así que una caja más justa da un desfase moderado y no un hueco enorme); interlineado ~1,04; la cola va centrada sobre el eje de la página, quieta (su línea mide lo que su texto,
   sin recorrido), en cursiva con las palabras clave en mayúscula fina. Las instantáneas (mesa.js) viven en las filas libres sobre y bajo el bloque: no pueden tapar texto. */
body.faq{--fq-hw:10.6}
html[lang=en] body.faq{--fq-hw:13.4}
body.faq .t-h1{--t-lh:1.04;font-size:clamp(34px,min(4.8vw,9.5vh),78px);max-width:calc(var(--fq-hw) * 1em + 8vw);margin-inline:auto}
body.faq .t-h1 .t-tail{width:fit-content;max-width:100%;margin:.9em auto 0;padding:0 !important;text-align:center !important;font-family:var(--tf);font-style:italic;font-weight:400;font-size:max(.4em,16px);line-height:1.25;letter-spacing:0;text-transform:none;color:rgba(28,28,26,.74)}
body.faq .t-h1 .t-tail b{font-style:normal;font-weight:500;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;line-height:0}
@media (max-width:767px){body.faq .t-h1{max-width:none;font-size:8.2vw}body.faq .t-h1 .t-tail{font-size:max(.5em,14.5px);margin-top:1em}}

/* enlace al artículo completo, al pie de cada tema */
.fq-more{margin:14px 0 0;font-size:15px;line-height:1.4;color:var(--mute)}
.fq-more a{display:inline-block;padding:12px 0;color:var(--ink)}
.fq-more a span{text-decoration:underline;text-decoration-color:var(--gold-ink);text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .3s}
@media (hover:hover){.fq-more a:hover span{text-decoration-color:var(--ink)}}

/* ───────── pregunta (summary) y respuesta ───────── */
.fq{border-top:1px solid rgba(28,28,26,.14);transition:border-color .6s}
.fq[open]:not(.is-closing){border-top-color:rgba(201,166,107,.55)}   /* una línea dorada marca la pregunta abierta */
.fq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:22px 38px 22px 0;font-family:var(--tf);font-weight:500;font-size:20px;line-height:1.2;color:var(--ink);text-wrap:balance}
.fq summary::-webkit-details-marker{display:none}
.fq summary::before,.fq summary::after{content:"";position:absolute;right:4px;top:50%;width:16px;height:1px;margin-top:-.5px;background:var(--ink);transition:transform .6s cubic-bezier(.6,0,.3,1),background .3s}
.fq summary::after{transform:rotate(90deg)}
.fq[open]:not(.is-closing) summary::after{transform:rotate(0)}
@media (hover:hover){.fq summary:hover::before,.fq summary:hover::after{background:var(--gold-ink)}}
.fq-a{overflow:hidden}
.fq-a p{max-width:min(100%,640px);margin:0 0 32px;font:400 16.5px/26px var(--sans);color:var(--mute)}

/* ───────── escritorio: dos columnas, foto fija a la izquierda ───────── */
@media (min-width:1024px){
  body.faq{--fq-h:min(58vh,540px)}   /* alto de la foto; su ancho es 4:5 */
  .fq-wrap{display:grid;grid-template-columns:calc(var(--fq-h) * .8) minmax(0,1fr);column-gap:clamp(56px,7vw,112px);align-items:start;margin-top:6vh}
  .fq-side{position:sticky;top:max(14vh,104px);margin-top:14vh}   /* misma altura que el título del primer tema */
  .fq-stage{position:relative;overflow:hidden;height:var(--fq-h);background:var(--stone)}
  .fq-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)}
  .fq-stage img:not(:first-child){clip-path:polygon(0% 100%,100% 100%,100% 100%,0% 100%)}   /* estado inicial del barrido (faq.js lo anima) */
  .fq-idx{flex-direction:column;flex-wrap:nowrap;margin-top:26px;padding:0;border:0}
  .fq-idx a{padding:7px 0}
  body .fq-band.band{display:none}
  .fq-grp{min-height:min(76vh,680px);padding:14vh 0 0}
  .fq-grp:last-child{padding-bottom:6vh}
  .fq summary{padding:26px 56px 26px 0;font-size:clamp(22px,1.9vw,27px)}
  .fq summary::before,.fq summary::after{right:6px}
  .fq-a p{font-size:17.5px;line-height:28px}
}
@media (max-width:1023px){.fq-stage{display:none}}   /* en esta anchura el que se ve es .fq-band */
@media (min-width:768px) and (max-width:1023px){.fq summary{font-size:23px;padding:24px 46px 24px 0}.fq-a p{font-size:17px;line-height:27px}}
@media (prefers-reduced-motion:reduce){.fq,.fq summary::before,.fq summary::after,.fq-idx a{transition:none}}

/* ───────── rendimiento (lote P): sin capas permanentes ─────────
   Site.maskReveal parte cada pregunta en palabras (≈230 `.owi`); con `will-change:transform` fijo cada una era una capa compuesta aunque ya estuviera en su sitio
   (Layerize ≈3,5 s por 3 s de scroll con la CPU ×4 frente a ≈0,3 s en el resto de plantillas). GSAP ya promueve a 3D mientras dura cada animación. */
body.faq .owi,body.faq .ln-i,body.faq .t-h2 .wi{will-change:auto}

/* R-MOV-31 · temas fuera de pantalla sin pintar ni capas (faq.js pone `.cv` y `--cv`, el alto medido de cada tema; `auto` recuerda el último alto pintado) */
.fq-grp.cv{content-visibility:auto;contain-intrinsic-block-size:auto var(--cv,700px)}
/* N-03 · índice lateral (≥1024 táctil): 44 px de zona (medían 30) */
@media (min-width:1024px) and (pointer:coarse){.fq-idx a{padding:14px 0}}

/* zona táctil de 44 px en «Leer el artículo completo» (medía 20 px); el margen superior se compensa */
@media (pointer:coarse){.fq-more{margin-top:2px}.fq-more a{padding:14px 0;min-height:44px;display:inline-flex;align-items:center}}

/* ── Escala tipográfica móvil (≤ 767 px), ver bloque «ESCALA TIPOGRÁFICA MÓVIL» al final de site.css ── */
@media (max-width:767px){
  .fq-idx a{font-size:13px}
  .fq-more{font-size:16px}
  .fq summary{font-size:21px;line-height:1.25}
}
@media (min-width:768px) and (orientation:portrait){body.faq .t-h1{font-size:clamp(34px,5.8vw,60px)}}