/* ============================================================
   Portada · el nombre SPECIALE se descubre tras una linea dorada
   23-09-2026. Convive con la animacion "wordmarkImpreso" que ya
   tenia el nombre: aquella sigue corriendo por CSS y esta solo
   anima la mascara desde JS, sin tocar la propiedad animation.
   El nombre sigue siendo texto: no cambia el peso ni el SEO.
   ============================================================ */
.portada.portadaTipografica{--sp-oro:#c7a254}

/* estado inicial: el nombre esta oculto por la mascara hasta que
   el JS la abre. Si el JS no corre, esta clase nunca se aplica y
   el nombre se ve normal. */
.spCortina .portadaNombre{
  -webkit-mask-image:linear-gradient(90deg,#000 0 0);
          mask-image:linear-gradient(90deg,#000 0 0);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;     mask-size:0% 100%;
}
.spListo .portadaNombre{
  -webkit-mask-image:none!important; mask-image:none!important;
}

.spFilo{
  position:absolute; width:1px; z-index:3; pointer-events:none;
  background:var(--sp-oro,#c7a254); opacity:0;
}

@media (prefers-reduced-motion:reduce){
  .spCortina .portadaNombre{
    -webkit-mask-image:none!important; mask-image:none!important;
  }
  .spFilo{display:none!important}
}


/* --- Fondo de la portada -------------------------------------
   El hero mide mas alto que ancho y la foto es 16:9, asi que
   "cover" la ampliaba mas de tres veces y se veia pixelada.
   Se sirve una version al doble de resolucion y se ancla abajo,
   que es la parte de la foto que realmente se ve. --------------*/
@media (min-width:701px){
  .portada.portadaTipografica::before{
    background-image:url(/hero-speciale-editorial-limpio@2x.jpg)!important;
    background-size:cover!important;
    background-position:50% 46%!important;
    background-repeat:no-repeat!important;
  }
}
@media (max-width:700px){
  .portada.portadaTipografica::before{
    background-image:url(/hero-speciale-editorial-limpio@2x.jpg)!important;
  }
}

/* Mismo caso en los dos fondos grandes de secciones */
.metodoStandalone::before,.capitulo::before{
  background-image:url(/historia-control-v2@2x.jpg)!important;
}
.serviciosIntro::before{
  background-image:url(/historia-montaje-v4@2x.jpg)!important;
}

/* Hero en movil: encuadre sobre la pareja, sin cortes */
@media (max-width:700px){
  .portada.portadaTipografica::before{
    background-image:url(/hero-speciale-editorial-limpio@2x.jpg)!important;
    background-size:cover!important;
    background-position:80% 50%!important;}
  .metodoStandalone::before,.capitulo::before{background-image:url(/historia-control-v2@2x.jpg)!important}
  .serviciosIntro::before{background-image:url(/historia-montaje-v4@2x.jpg)!important}
}