/* ============================================================================
   EXPLAINER SPARK — motor del explainer pineado, parametrizable, N pasos
   Namespace: .spark-explainer + hijos .ex-*  (no choca con .pinned/.sticky/.media/.panel/.tabs del home)

   Markup mínimo esperado (ver contrato en fb2-explainer.md):
     <section class="spark-explainer" data-explainer data-tema="…"
              data-reposo data-trans data-bp data-intro data-intro-mov
              data-intro-fin data-scrub data-snap>
       <div class="ex-head xpad wrapmax">…sec-label opcional…</div>
       <div class="ex-runway">
         <div class="ex-sticky">
           <div class="ex-cols xpad wrapmax">
             <div class="ex-media"><img class="ex-foto on" …> …N fotos…</div>
             <div class="ex-txt">
               <nav class="ex-tabs"><button class="ex-tab on">…</button>…</nav>
               <div class="ex-prog" role="progressbar"><i></i></div>
               <div class="ex-paneles">
                 <div class="ex-panel on"><h2 class="dh2 ex-pt">…</h2><p class="body-lg ex-cuerpo">…</p>…</div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

   Custom properties públicas (con default), declaradas en .spark-explainer — se sobreescriben
   por instancia con un style="" o una regla más específica, NUNCA editando este archivo:
     --ex-media-h      alto de la foto en desktop            default 76svh
     --ex-media-h-mov  alto de la franja de foto en móvil     default min(75vw,34svh)
     --ex-radio        radio de esquina en desktop            default var(--r-media)
     --ex-radio-mov    radio de esquina en móvil               default 24px
     --ex-cols         grid-template-columns en desktop        default 1fr 1fr
     --ex-gap          gap en desktop                          default 3rem
     --ex-gap-mov      gap en móvil (una sola columna)         default 2rem
     --ex-xm           padding lateral en móvil                default 1.25rem
     --ex-media-max-nojs  ancho máx. de la foto sin JS          default 56rem
     --ex-hd           alto real del header — la escribe el JS (_explainer-spark.js); 96px de respaldo
     --ex-bp           documental — el corte real vive en las @media de abajo (899px);
                        si cambias data-bp en una instancia, edita también esas @media:
                        CSS no puede leer un data-attribute dentro de una condición de media query.
   Internas (las escribe el JS, no tocar a mano): --ex-t (0→1 intro full-bleed), --ex-bleed (px medidos).
   ============================================================================ */

.spark-explainer{
  position:relative;
  --ex-media-h:76svh;
  --ex-media-h-mov:min(75vw,34svh);
  --ex-radio:var(--r-media);
  --ex-radio-mov:24px;
  --ex-cols:1fr 1fr;
  --ex-gap:3rem;
  --ex-gap-mov:2rem;
  --ex-xm:1.25rem;
  --ex-hd:96px;
  --ex-bp:899;
  --ex-t:0;--ex-bleed:0px;
}
@media(min-width:768px) and (max-width:899px){.spark-explainer{--ex-xm:2.5rem}}

.ex-runway{position:relative}
.ex-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;
  padding-top:calc(var(--ex-hd) + .5rem);padding-bottom:1rem;
}
.ex-cols{display:grid;gap:var(--ex-gap-mov);width:100%;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.ex-cols{grid-template-columns:var(--ex-cols);gap:var(--ex-gap)}}

.ex-media{
  position:relative;overflow:hidden;height:var(--ex-media-h-mov);
  /* intro: de insertada en la grilla a sangrar por la izquierda; la esquina derecha conserva el radio */
  margin-left:calc(-1 * var(--ex-bleed) * var(--ex-t));width:calc(100% + var(--ex-bleed) * var(--ex-t));
  border-radius:var(--ex-radio);
  border-top-left-radius:calc(var(--ex-radio) * (1 - var(--ex-t)));
  border-bottom-left-radius:calc(var(--ex-radio) * (1 - var(--ex-t)));
}
@media(min-width:900px){.ex-media{height:var(--ex-media-h)}}
/* paneles apilados: el siguiente sube desde abajo y tapa al anterior (posición ← progreso del scroll).
   z-index lo asigna el JS por instancia (img.style.zIndex=k+1): funciona para cualquier N, sin nth-child fijo. */
.ex-media .ex-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translate3d(0,100%,0);will-change:transform;backface-visibility:hidden}
.ex-media .ex-foto:first-child{transform:none}
.ex-media .ex-foto.on{opacity:1}

.ex-tabs{display:flex;gap:1.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.ex-tabs .ex-tab{
  background:none;border:none;cursor:pointer;font-family:var(--dato);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);opacity:.7;
  transition:opacity .3s var(--ease);padding:.7rem .15rem;min-height:44px;
}
.ex-tabs .ex-tab.on{opacity:1}
.ex-tabs .ex-tab.on::after{content:"";display:block;height:2px;background:var(--carmin);margin-top:4px;border-radius:1px}

/* barra de progreso: 1px, visible solo en móvil (ver §5.1 del playbook) */
.ex-prog{display:none}
/* 28-ago: en escritorio no había ninguna señal de avance mientras la sección está pineada */
@media(min-width:900px){
  .ex-prog{display:block;position:relative;height:2px;border-radius:2px;max-width:min(320px,55%);
    margin:.1rem 0 1.15rem;background:color-mix(in srgb,var(--tinta) 14%,transparent)}
  .ex-prog i{border-radius:2px;background:var(--carmin)}
}
.ex-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--tinta)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.ex-prog{background:rgba(34,23,19,.2)}}

.ex-paneles{display:grid}
.ex-panel{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);display:flex;flex-direction:column;align-items:flex-start;align-self:start}
.ex-panel.on{opacity:1;pointer-events:auto}
.ex-panel .w{display:inline-block;opacity:0;transform:translateY(18px)}
.ex-panel.on .w{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);transition-delay:var(--d)}
.ex-panel .ex-cuerpo{margin-top:1.2rem;max-width:30rem;color:var(--suave)}
@media(max-height:600px){.ex-paneles{min-height:300px}}
.js .ex-panel{visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.js .ex-panel.on{visibility:visible;transition:opacity .4s var(--ease),visibility 0s}

/* ---------- sin JS: contenido íntegro, estático, legible — nunca un runway vacío ---------- */
html:not(.js) .ex-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;margin-block:2rem}
html:not(.js) .ex-paneles{min-height:0;display:block}
html:not(.js) .ex-panel .w{opacity:1;transform:none}
/* sin JS solo se muestra la foto de portada: las demás se retiran del flujo
   (display:none, no opacity:0 — nada invisible ocupando sitio en la página) */
html:not(.js) .ex-media .ex-foto{transform:none;display:none}
html:not(.js) .ex-media .ex-foto.on{display:block;opacity:1}
html:not(.js) .ex-runway{min-height:0!important}
html:not(.js) .ex-sticky{position:static;height:auto;overflow:visible;padding-block:0}
/* sin JS los tabs no conmutan nada y el grid de 2 columnas deja media pantalla vacía:
   una sola columna, la foto de portada arriba y los N pasos como lista con filete. */
html:not(.js) .ex-tabs,html:not(.js) .ex-prog{display:none}
/* 28-ago: en escritorio no había ninguna señal de avance mientras la sección está pineada */
@media(min-width:900px){
  .ex-prog{display:block;position:relative;height:2px;border-radius:2px;max-width:min(320px,55%);
    margin:.1rem 0 1.15rem;background:color-mix(in srgb,var(--tinta) 14%,transparent)}
  .ex-prog i{border-radius:2px;background:var(--carmin)}
}
html:not(.js) .ex-cols{grid-template-columns:1fr;align-items:start;gap:var(--ex-gap-mov)}
html:not(.js) .ex-media{
  height:auto;aspect-ratio:16/10;margin-left:0;width:auto;
  max-width:var(--ex-media-max-nojs,56rem);border-radius:var(--ex-radio);
}
html:not(.js) .ex-panel{margin-block:0;padding-block:2.2rem;border-top:1px solid var(--linea)}
html:not(.js) .ex-panel:first-of-type{border-top:0}

/* ---------- móvil: mismo motor, otro layout — franja de foto arriba, texto abajo, barra de progreso ---------- */
@media(max-width:899px){
  .ex-sticky{height:100vh;height:100lvh;padding-top:var(--ex-hd);padding-bottom:0;display:block}
  .ex-cols{display:block;padding:0;gap:0}
  .ex-media{
    height:var(--ex-media-h-mov);margin-left:0;width:auto;
    margin-inline:calc(var(--ex-xm) * (1 - var(--ex-t)));
    border-radius:calc(var(--ex-radio-mov) * (1 - var(--ex-t))) calc(var(--ex-radio-mov) * (1 - var(--ex-t))) var(--r-m) var(--r-m);
  }
  .ex-txt{padding:.6rem var(--ex-xm) 0}
  .ex-tabs{display:flex;gap:0;margin-bottom:0;flex-wrap:nowrap}
  .ex-tabs .ex-tab{flex:1;text-align:center;font-size:12px;letter-spacing:1px;padding:.55rem 0;min-height:44px;opacity:.5}
  .ex-tabs .ex-tab.on{opacity:1}
  .ex-tabs .ex-tab.on::after{margin-top:2px}
  .ex-prog{display:block;position:relative;height:1px;background:color-mix(in srgb,var(--tinta) 20%,transparent);margin-bottom:.9rem}
  .ex-panel .ex-pt{font-size:26px;line-height:1.1}
  .ex-panel .ex-cuerpo{font-size:15px;line-height:1.4;margin-top:.6rem;max-width:none}
}

/* ---------- degradación honesta: móvil + reduced-motion = lista vertical estática, sin pin, sin nav, sin barra ---------- */
@media(max-width:899px) and (prefers-reduced-motion:reduce){
  .ex-runway{min-height:0!important}
  .ex-sticky{position:static;height:auto;overflow:visible;padding-top:0}
  .ex-tabs,.ex-media,.ex-prog{display:none}
/* 28-ago: en escritorio no había ninguna señal de avance mientras la sección está pineada */
@media(min-width:900px){
  .ex-prog{display:block;position:relative;height:2px;border-radius:2px;max-width:min(320px,55%);
    margin:.1rem 0 1.15rem;background:color-mix(in srgb,var(--tinta) 14%,transparent)}
  .ex-prog i{border-radius:2px;background:var(--carmin)}
}
  .ex-txt{padding-top:0}
  .ex-paneles{min-height:0;position:static;display:block}
  .ex-panel,.js .ex-panel{position:static;opacity:1;visibility:visible;pointer-events:auto;padding-block:2.2rem;border-top:1px solid var(--linea)}
  .ex-panel:first-of-type{border-top:0;padding-top:.6rem}
  .ex-panel .w,.js .ex-panel .w{opacity:1;transform:none}
  /* la foto de cada paso, movida DENTRO del panel por el JS (layoutPinned, modo estático) */
  .ex-foto-mov{display:block;position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-m);margin-bottom:1.2rem;transform:none!important;will-change:auto;opacity:1}
}