/* Fondo «piedra pintada» para las tarjetas sin imagen y el velo que tapa las fotos (portafolio y Express).
   Cada tarjeta trae su tono en --tinte; la textura de caliza se multiplica encima y el ícono rupestre toma un pigmento de ese tono. */
.piedra {
  --base-piedra: #efe7da;
  --pigmento: color-mix(in srgb, var(--tinte, #c17f4a) 58%, #3d2b1f);
  background-color: color-mix(in srgb, var(--tinte, #c17f4a) 36%, var(--base-piedra));
  background-image: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(255, 250, 240, .42), transparent 72%), url("/recursos/piedra-textura.webp");
  background-size: cover, 340px 340px;
  background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte, #c17f4a) 30%, transparent), inset 0 0 60px rgba(60, 40, 20, .14);
}
[data-tema="oscuro"] .piedra, [data-theme="dark"] .piedra {
  --base-piedra: #1d1914;
  --pigmento: color-mix(in srgb, var(--tinte, #c17f4a) 55%, #eadbc0);
  background-color: color-mix(in srgb, var(--tinte, #c17f4a) 32%, var(--base-piedra));
  background-image: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(255, 230, 190, .07), transparent 72%), url("/recursos/piedra-textura.webp");
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte, #c17f4a) 22%, transparent), inset 0 0 70px rgba(0, 0, 0, .45);
}
.piedra .pig { stop-color: var(--pigmento); }
.piedra svg.pintura { width: clamp(64px, 34%, 112px); height: auto; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.piedra svg.pintura path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.piedra svg.pintura .f1 { stroke: url(#r-pigA); stroke-width: 2.6; stroke-dasharray: 15 2.5 7 2 22 3.5 5 1.8; }
.piedra svg.pintura .f2 { stroke: url(#r-pigB); stroke-width: 1.4; stroke-dasharray: 5 2 18 3 9 2; opacity: .75; }
.piedra svg.pintura .f3 { stroke: var(--pigmento); stroke-width: .8; stroke-dasharray: 2.5 3.5 10 4 2 2.5; opacity: .6; }
.tarjeta:hover .piedra svg.pintura { transform: scale(1.06) rotate(-2deg); }
/* Pigmento base de los degradados (se definen una vez por página, fuera de cada tarjeta) */
:where(:root) { --pigmento: #8a4b22; }
:where([data-tema="oscuro"], [data-theme="dark"]) { --pigmento: #d9bf91; }
.pig { stop-color: var(--pigmento); }

/* Velo neutro (opción del panel): el fondo liso de antes, con el ícono pintado en el color de la marca */
.velo:not(.piedra) svg.pintura, .lienzo-vacio:not(.piedra) svg.pintura { width: clamp(56px, 28%, 92px); height: auto; }
.velo:not(.piedra) svg.pintura path, .lienzo-vacio:not(.piedra) svg.pintura path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.velo:not(.piedra) svg.pintura .f1, .lienzo-vacio:not(.piedra) svg.pintura .f1 { stroke: url(#r-pigA); stroke-width: 2.6; stroke-dasharray: 15 2.5 7 2 22 3.5 5 1.8; }
.velo:not(.piedra) svg.pintura .f2, .lienzo-vacio:not(.piedra) svg.pintura .f2 { stroke: url(#r-pigB); stroke-width: 1.4; stroke-dasharray: 5 2 18 3 9 2; opacity: .75; }
.velo:not(.piedra) svg.pintura .f3, .lienzo-vacio:not(.piedra) svg.pintura .f3 { stroke: var(--pigmento); stroke-width: .8; opacity: .6; }