/* Speciale · gestos editoriales 2026
   Capa aislada y progresiva: el contenido permanece visible sin JavaScript. */

/* Papel impreso: textura fija, mínima y sin coste durante el scroll. */
.motionEditorial::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:119;
  pointer-events:none;
  opacity:.018;
  background-image:
    radial-gradient(circle at 18% 31%,#111 0 .55px,transparent .7px),
    radial-gradient(circle at 71% 63%,#111 0 .45px,transparent .65px);
  background-size:7px 7px,11px 11px;
  mix-blend-mode:multiply;
}

/* La fotografía se descubre como una página que se retira. */
.sp-revela-marco{position:relative;display:block;overflow:hidden;background:#e9e7e1}
.sp-revela-marco>img{display:block;width:100%}
.sp-revela-marco::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:2;
  pointer-events:none;
  background:#f2f0ea;
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform 1.05s cubic-bezier(.77,0,.18,1);
}
.sp-revela-marco>img{transform:scale(1.045)!important;transition:transform 1.25s cubic-bezier(.22,1,.36,1),filter .55s ease!important}
.sp-revela-marco.sp-visible::after{transform:scaleX(0)}
.sp-revela-marco.sp-visible>img{transform:scale(1.001)!important}
.marcasGrid article:hover .sp-revela-marco.sp-visible>img,
.conceptoSecuencia article:hover .sp-revela-marco.sp-visible>img{transform:scale(1.035)!important}
.conceptoEditorial .sp-revela-marco::after{background:#171716}

/* Rótulos de capítulo: el número precede a un trazo dorado. */
.motionEditorial .sp-capitulo-marca{position:relative!important;display:inline-flex!important;align-items:center;gap:14px}
.sp-capitulo-marca::after{
  content:"";
  display:block;
  width:clamp(34px,5vw,76px);
  height:1px;
  background:#b8944f;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .75s cubic-bezier(.22,1,.36,1) .12s;
}
.sp-capitulo-visible .sp-capitulo-marca::after{transform:scaleX(1)}

/* Método: un único trazo recorre las etapas abiertas. */
.metodoDetalle .trazo{position:relative!important}
.metodoDetalle .trazo::before{
  content:"";
  position:absolute;
  z-index:2;
  left:clamp(45px,5vw,82px);
  right:clamp(45px,5vw,82px);
  top:clamp(45px,5vw,82px);
  height:1px;
  background:#b8944f;
  transform:scaleX(var(--sp-trazo,0));
  transform-origin:left center;
  transition:transform .18s linear;
  pointer-events:none;
}
.metodoDetalle .trazo article>span{transition:opacity .45s ease,color .45s ease,transform .45s cubic-bezier(.22,1,.36,1)!important}
.metodoDetalle .trazo article.sp-etapa-activa>span{color:#c7a254!important;opacity:1!important;transform:translateY(-4px)}

/* Barrido de tinta: capa física detrás del contenido. */
.sp-tinta{position:relative!important;isolation:isolate;overflow:hidden}
.sp-tinta-capa{
  position:absolute;
  z-index:-1;
  inset:-2px;
  pointer-events:none;
  background:#b8944f;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .48s cubic-bezier(.77,0,.18,1);
}
.sp-tinta:hover .sp-tinta-capa,.sp-tinta:focus-visible .sp-tinta-capa{transform:scaleX(1);transform-origin:left center}
.conceptoEditorial .sp-tinta-capa,.metodoStandalone .sp-tinta-capa,footer .sp-tinta-capa{background:#f0eee8}
.conceptoEditorial .sp-tinta:hover,.conceptoEditorial .sp-tinta:focus-visible,
.metodoStandalone .sp-tinta:hover,.metodoStandalone .sp-tinta:focus-visible,
footer .sp-tinta:hover,footer .sp-tinta:focus-visible{color:#111!important}

/* Fichas de clientes: una regla y el texto responden junto con la imagen. */
.evidencia .marcasGrid article{position:relative}
.evidencia .marcasGrid article::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:18px;
  background:#b8944f;
  opacity:.65;
  transform:scaleX(.16);
  transform-origin:left center;
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.evidencia .marcasGrid article h3,.evidencia .marcasGrid article small{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.evidencia .marcasGrid article:hover::after,.evidencia .marcasGrid article:focus-within::after{opacity:1;transform:scaleX(1)}
.evidencia .marcasGrid article:hover h3,.evidencia .marcasGrid article:focus-within h3{transform:translateX(5px)}
.evidencia .marcasGrid article:hover small,.evidencia .marcasGrid article:focus-within small{transform:translateX(3px)}

@media(max-width:600px){
  .metodoDetalle .trazo::before{left:22px;right:auto;top:38px;bottom:38px;width:1px;height:auto;transform:scaleY(var(--sp-trazo,0));transform-origin:center top}
  .metodoDetalle .trazo article{padding-left:18px!important}
}
@media(hover:none){.sp-tinta:hover .sp-tinta-capa{transform:scaleX(0)}.evidencia .marcasGrid article:hover h3,.evidencia .marcasGrid article:hover small{transform:none}}
@media(prefers-reduced-motion:reduce){
  .motionEditorial::after{display:none}
  .sp-revela-marco::after{display:none}
  .sp-revela-marco>img,.sp-capitulo-marca::after,.metodoDetalle .trazo::before,.sp-tinta-capa,
  .evidencia .marcasGrid article::after,.evidencia .marcasGrid article h3,.evidencia .marcasGrid article small{transition:none!important;transform:none!important}
}