/* ═══════════════════════════════════════════════════════════════
   HOLÍSTICA ESPACIOS — identidad visual
   Animación de "pintado" del logo + texturas de marca
   ═══════════════════════════════════════════════════════════════ */

:root{
  --plum:#6B2D6D; --plum-deep:#4E1F52; --plum-soft:#8A4A8C;
  --lav:#A876C6; --lav-soft:#D9C2E6; --lav-mist:#F1E9F6;
  --sage:#8FA87F; --sage-ink:#5F7350; --sage-mist:#EDF2E9;
  --mist:#C9D8DC; --cream:#FBFAF9;
  --ink:#241F28; --ink-soft:#5C5462; --ink-mute:#736B7E;
}

/* ── Logo que se pinta ─────────────────────────────────────────
   El trazo se revela de izquierda a derecha, que es el orden real
   en que se escribe a mano. El borde del revelado no es recto sino
   irregular y con inclinación, para que lea como pincel y no como
   una persiana bajando.                                          */

.marca-pintada{
  display:inline-block;
  position:relative;
  line-height:0;
}

.marca-pintada img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:var(--pincel);
          mask-image:var(--pincel);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  -webkit-mask-position:100% 0;
          mask-position:100% 0;
}

/* Las proporciones de acá no son arbitrarias y conviene no tocarlas
   sin rehacer la cuenta: con la máscara al 300%, la franja opaca
   (0→40%) mide 120% del ancho del logo, así que al terminar cubre
   todo el trazo. Y la franja transparente (desde 55%) mide lo
   suficiente para que al empezar no se vea nada. Si se achica el
   mask-size, al logo le queda el borde derecho desvanecido. */
.marca-pintada{
  --pincel:linear-gradient(100deg,
     #000 0%, #000 40%,
     rgba(0,0,0,.90) 44%,
     rgba(0,0,0,.50) 48%,
     rgba(0,0,0,.12) 52%,
     transparent 55%, transparent 100%);
}

.marca-pintada.pintar img{
  animation:pintar-trazo 1.9s cubic-bezier(.62,.03,.36,1) forwards;
}

@keyframes pintar-trazo{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; }
  to  { -webkit-mask-position:0% 0;   mask-position:0% 0;   }
}

/* La punta húmeda que "va dejando" el trazo */
.marca-pintada::after{
  content:'';
  position:absolute; top:-6%; bottom:-6%;
  width:11%;
  left:-14%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 50% 60% at 50% 50%,
             rgba(168,118,198,.34), rgba(168,118,198,.10) 55%, transparent 75%);
  filter:blur(7px);
}
.marca-pintada.pintar::after{
  animation:punta-pincel 1.9s cubic-bezier(.62,.03,.36,1) forwards;
}
@keyframes punta-pincel{
  0%  { left:-14%; opacity:0; }
  12% { opacity:.85; }
  88% { opacity:.7; }
  100%{ left:100%; opacity:0; }
}

/* Quien tenga activada la reducción de movimiento ve el logo
   directamente, sin animación. */
@media (prefers-reduced-motion:reduce){
  .marca-pintada img{
    -webkit-mask-image:none; mask-image:none;
    animation:none;
  }
  .marca-pintada::after{ display:none; }
}

/* ── Texturas de marca ───────────────────────────────────────── */

.textura-marca{
  background-image:url('/assets/textura-marca.webp');
  background-size:cover;
  background-position:center;
}

/* Velo para que el texto siempre se lea sobre la acuarela */
.textura-velo{ position:relative; }
.textura-velo::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(251,250,249,.90) 0%,
    rgba(251,250,249,.72) 45%,
    rgba(251,250,249,.90) 100%);
  pointer-events:none;
}
.textura-velo > *{ position:relative; }