/* 68 · Granada y Terciopelo — bodegón barroco a la luz de la vela: granadas, uvas, ranúnculos y terciopelo.
   Guion: la cortina de terciopelo se recoge; los nombres en crema sobre la oscuridad, rodeados del bodegón en capas;
   en la fecha la granada gira, se abre y sus semillas forman un círculo de rubíes con el día. */
.c-granada { --display-peso: 700; --nombre-color: #F1E6D6; --titulo-letra: "Abril Fatface"; --titulo-espacio: 0; --dia-letra: "Abril Fatface"; --dia-color: #F1E6D6;
	--y-letra: "Abril Fatface"; --y-tam: .3em; --y-color: #D9A35A; --y-margen: .08em 0 .14em; --radio: 6px; --vj: 70px; --sombra: 0 30px 40px rgb(0 0 0 / .55); --nombre-tam: clamp(4.8rem, 13vw, 11rem); }
.c-granada .e-evento { color: #D9A35A; letter-spacing: .4em; font-weight: 600; }
.c-granada .e-nombre { text-shadow: 0 0 40px rgb(0 0 0 / .6); line-height: .9; }
.c-granada .e-fecha { color: #D9C9B4; font-style: italic; font-size: 1.1rem; }

.gr-terciopelo { --w: min(40vmin, 400px); left: -6vw; top: -4vh; --r: 160deg; --dx: -10vw; --dy: -10vh; --ex: -30vw; --ey: -10vh; --ed: .2s; --fd: 0s; opacity: .9; }
.gr-terciopelo .e-img { animation: none; }
.gr-uvas { --w: min(24vmin, 230px); right: 6vw; top: -2vh; --r: 6deg; --dy: -14vh; --ey: -30vh; --ed: .5s; --fd: 7s; --fa: 5px; --fr: 2deg; }
.gr-uvas .e-img { transform-origin: 50% 0; }
.gr-ranunculos { --w: min(30vmin, 300px); left: 2vw; bottom: 2vh; --r: -6deg; --dx: -6vw; --dy: 12vh; --ex: -20vw; --ey: 20vh; --ed: .9s; --fd: 9s; --fa: 3px; }
.gr-abierta { --w: min(26vmin, 260px); right: 4vw; bottom: 3vh; --r: 8deg; --dx: 6vw; --dy: 12vh; --ex: 20vw; --ey: 20vh; --ed: 1.1s; --fd: 8s; --fa: 3px; }
.gr-granada { --w: min(14vmin, 140px); right: 26vw; bottom: 4vh; --r: -12deg; --dy: 10vh; --ey: 20vh; --ed: 1.3s; --fd: 6s; }

.c-granada .xv-entrada { background: #12070B; }
.gr-cortina { position: absolute; top: 0; bottom: 0; width: 52%; background: repeating-linear-gradient(90deg, #4A0C17 0 4%, #6B1424 6%, #5A0F1C 9%, #3A0812 12%); box-shadow: inset 0 0 120px rgb(0 0 0 / .7); }
.gr-cortina-izq { left: 0; } .gr-cortina-der { right: 0; }
.c-granada .xv-entrada-contenido { position: relative; z-index: 1; padding: 30px 24px; background: radial-gradient(closest-side, rgb(18 7 11 / .85), transparent); }
html.abriendo .gr-cortina { transition: transform 1.3s cubic-bezier(.65,0,.35,1); }
html.abriendo .gr-cortina-izq { transform: translateX(-100%) scaleX(.4); } html.abriendo .gr-cortina-der { transform: translateX(100%) scaleX(.4); }

.c-granada .e-ornamento { width: min(70%, 280px); }
.c-granada .e-firma { font-family: "Corinthia", cursive; font-weight: 700; color: #D9A35A; font-size: clamp(2.8rem, 5vw, 4rem); }

/* fecha: granada → círculo de rubíes */
.gr-m-granada { left: 18%; top: 14%; width: 64%; transform: rotate(calc(var(--t1) * 200deg)) scale(calc(1 + var(--t1) * .1)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.gr-m-semillas { inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #A3172F 0 5deg, #D23A52 5deg 8deg, #7A0E22 8deg 12deg);
	-webkit-mask: radial-gradient(circle, transparent 55%, #000 56% 69%, transparent 70%); mask: radial-gradient(circle, transparent 55%, #000 56% 69%, transparent 70%);
	opacity: clamp(0, calc(var(--t1) * 3 - 1.5), 1); transform: scale(calc(.4 + var(--t2) * .6)) rotate(calc(var(--m) * 120deg)); }
.c-granada .e-dia { font-size: clamp(4.4rem, 12vw, 7rem); }
.c-granada .e-mes { font-family: "Corinthia", cursive; font-weight: 700; color: #D9A35A; font-size: clamp(2.6rem, 6vw, 3.8rem); }
.c-granada .e-anio { color: #D9C9B4; }

.c-granada .xv-superficie { background: #24111A; border-color: rgb(217 163 90 / .3); }
.c-granada .e-itinerario { background: radial-gradient(80% 60% at 30% 50%, #3D1838, #1A0B10 80%); }
.c-granada .xv-momento time { color: #D9A35A; }
.c-granada .xv-titulo .xv-script { font-family: "Corinthia", cursive; font-weight: 700; color: #D9A35A; font-size: 1.5em; }
.gr-cierre-abierta { position: absolute; left: 4vw; bottom: -4vh; width: min(30vmin, 250px); opacity: .9; }
.gr-cierre-uvas { position: absolute; right: 6vw; top: -2vh; width: min(22vmin, 180px); opacity: .9; }

@media (max-width: 760px) {
	.gr-terciopelo { --w: 56vw; left: -18vw; top: -4vh; }
	.gr-uvas { --w: 30vw; right: 0; }
	.gr-ranunculos { --w: 44vw; left: -8vw; bottom: 1vh; }
	.gr-abierta { --w: 38vw; right: -6vw; bottom: 2vh; }
	.gr-granada { --w: 18vw; right: 34vw; bottom: 3vh; }
}