/* «Píntala tú» (elemento firma) y el subrayado del titular. Ver assets/js/pincel.js.
   Sin JS, con prefers-reduced-motion o sin soporte, el script no hace nada y la obra se ve a color. */

/* Caja de la obra: el widget Imagen de Elementor con la clase «pincel» y el atributo data-pincel */
.pincel { position: relative; overflow: hidden; }
.pincel img { display: block; width: 100%; height: auto; box-shadow: var(--sombra); }

/* El velo ve la imagen real en tinta; pintar lo borra (máscara generada en un canvas) */
.pincel__velo {
  position: absolute; inset: 0; z-index: 1;
  -webkit-backdrop-filter: grayscale(1) contrast(1.45) brightness(1.06);
          backdrop-filter: grayscale(1) contrast(1.45) brightness(1.06);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  touch-action: none; /* el dedo pinta sobre la obra; fuera de ella, la página se desplaza */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='13' fill='none' stroke='%230F2A1E' stroke-width='2' stroke-dasharray='3 3'/%3E%3Ccircle cx='17' cy='17' r='2' fill='%230F2A1E'/%3E%3C/svg%3E") 17 17, crosshair;
  animation: mf-velo-entra .9s ease-out both;
}
@keyframes mf-velo-entra { from { opacity: 0; } }

/* Invitación sobre la obra: pequeña, en una esquina, y se va en cuanto alguien pinta */
.pincel__invita {
  position: absolute; z-index: 2; left: 12px; bottom: 12px; margin: 0;
  padding: 6px 12px 6px 34px; border-radius: 999px;
  background: rgb(251 250 234 / .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.4 2.6a2 2 0 0 1 2.9 2.9L11 15.8 8.2 13z'/%3E%3Cpath d='M7 14.5c-1.7 0-3 1.3-3 3 0 1.4-.8 2.5-2 3 4 .8 8-1.2 8-4.5z'/%3E%3C/svg%3E") 12px 50% / 16px no-repeat;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--tinta);
  box-shadow: 0 2px 8px -3px rgb(15 42 30 / .35);
  pointer-events: none;
  animation: mf-invita 2.4s ease-in-out 1.2s infinite;
}
@keyframes mf-invita { 50% { translate: 0 -3px; } }
/* En móvil, más grande y opaca: sobre la obra en grises se leía poco */
@media (max-width: 767px) {
  .pincel__invita {
    left: 10px; bottom: 10px;
    padding: 8px 14px 8px 38px; background-color: var(--papel); background-position: 13px 50%; background-size: 18px;
    border: 1.5px solid var(--tinta); font-size: 1rem;
    box-shadow: 0 3px 10px -3px rgb(15 42 30 / .5);
  }
}

/* Pista y botón «Verla entera a color», debajo de la obra. Alto constante en todos los estados:
   rejilla fija (el botón no cambia de fila según el texto), la pista mide lo que su frase más larga
   (moldes invisibles en la misma celda, ver pincel.js) y el botón oculto conserva su hueco. */
.pincel__mandos {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: start;
  gap: 8px; margin-top: 14px; width: 100%;
}
@media (min-width: 768px) {
  .pincel__mandos { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
}
.pincel__pista {
  display: grid; margin: 0;
  font-size: .95rem; font-weight: 600; line-height: 1.7rem; color: var(--verde);
  font-variant-numeric: tabular-nums; /* «Llevas un 9 %» y «48 %» ocupan lo mismo por cifra */
}
.pincel__pista > * { grid-area: 1 / 1; }
.pincel__molde { visibility: hidden; }
/* body … gana al estilo de botones del kit (fondo mostaza): este es un botón secundario */
body .pincel__mandos .pincel__boton {
  min-height: 44px; padding: .5em 1em;
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-size: .92rem; font-weight: 600; line-height: 1.1;
  color: var(--tinta); background: transparent;
  border: 2px solid color-mix(in srgb, var(--tinta) 40%, transparent); border-radius: 6px;
  cursor: pointer;
}
body .pincel__mandos .pincel__boton:hover,
body .pincel__mandos .pincel__boton:focus-visible { border-color: var(--tinta); background: transparent; color: var(--tinta); }
body .pincel__mandos .pincel__boton:disabled { cursor: default; } /* un instante, mientras carga la obra */
/* oculto al completarse, pero ocupando su sitio: así lo de debajo no sube */
body .pincel__mandos .pincel__boton[hidden] { display: block; visibility: hidden; }

/* Subrayado del titular con el trazo de la firma de Mary:
   en el widget Título, «Cada dibujo existe <span class="mf-subraya">una sola vez</span>.» */
.mf-subraya { position: relative; display: inline-block; white-space: nowrap; }
.mf-subraya::after {
  content: "";
  position: absolute; left: -.04em; bottom: -.12em;
  width: 100%; height: .2em; min-height: 6px;
  background: var(--verde-vivo);
  -webkit-mask: var(--trazo) 0 0 / 100% 100% no-repeat;
          mask: var(--trazo) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}