/* 60 · Chocolate y Seda — bodegón editorial: seda rosa sobre papel de algodón chocolate y sello de cera oro mate.
   Guion: el lazo se suelta del sobre; la cinta flota delante de los nombres y se mueve como con aire; en la fecha
   la cinta se enrolla en un círculo y el círculo se vuelve el sello de cera con el día. */
.c-chocolate { --display-peso: 400; --nombre-color: #F6EDE4; --titulo-letra: "Gloock"; --titulo-espacio: -.01em; --dia-letra: "Gloock"; --dia-color: #3B2418;
	--y-letra: "Gloock"; --y-tam: .42em; --y-color: #E9C4BC; --radio: 4px; --vj: 70px; --sombra: 0 26px 30px rgb(0 0 0 / .35); --nombre-tam: clamp(3.8rem, 10vw, 8.4rem); }
.c-chocolate .e-evento { color: #E9C4BC; letter-spacing: .4em; }
.c-chocolate .e-nombre { text-shadow: 0 6px 30px rgb(0 0 0 / .35); }
.c-chocolate .e-fecha { color: #E3D3C6; }

.ch-cinta { --w: min(26vmin, 250px); left: 4vw; top: 6vh; --r: -12deg; --dy: -18vh; --dr: -20deg; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 12px; --fr: 4deg; }
.ch-tarjeta { --w: min(22vmin, 220px); right: 7vw; bottom: 12vh; --r: 9deg; --dy: 14vh; --dr: 8deg; --ex: 20vw; --ey: 10vh; --ed: .3s; --fd: 9s; --fa: 4px; }
.ch-lazo { --w: min(30vmin, 300px); right: 5vw; top: 4vh; --r: 8deg; --dx: 8vw; --dy: -20vh; --dr: 14deg; --ex: 30vw; --ey: -10vh; --ed: .9s; --fd: 5s; --fa: 10px; --fr: 3deg; }
.ch-rosa { --w: min(24vmin, 230px); left: 6vw; bottom: 3vh; --r: -16deg; --dx: -6vw; --dy: 12vh; --ex: -20vw; --ey: 20vh; --ed: 1.2s; --fd: 7s; }

.c-chocolate .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #5A3426, #2E1B12 75%); }
.ch-entrada-lazo { position: absolute; left: 50%; top: 8%; width: min(46vmin, 380px); translate: -50% 0; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .4)); }
.ch-entrada-sello { position: absolute; left: 50%; bottom: 7%; width: min(18vmin, 140px); translate: -50% 0; filter: drop-shadow(0 16px 20px rgb(0 0 0 / .4)); }
html.abriendo .ch-entrada-lazo { transition: transform 1.2s cubic-bezier(.65,0,.35,1), opacity 1s; transform: translateY(-40vh) rotate(-30deg); opacity: 0; }

.c-chocolate .e-ornamento { width: min(70%, 300px); }
.c-chocolate .e-firma { font-family: "Pinyon Script", cursive; color: #E9C4BC; font-size: clamp(2.4rem, 4.4vw, 3.4rem); }

/* fecha: la cinta se enrolla en un círculo y se vuelve el sello */
.ch-m-cinta { left: 22%; top: 14%; width: 56%; transform: rotate(calc(var(--t1) * 300deg)) scale(calc(1 - var(--t1) * .4)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.ch-m-aro { inset: 10%; border-radius: 50%; border: 6px solid #E9C4BC; opacity: clamp(0, calc(var(--t1) * 3 - 1.2 - var(--t2) * 2), 1); transform: scale(calc(.4 + var(--t1) * .6)) rotate(calc(var(--m) * 90deg)); }
.ch-m-sello { left: 2%; top: 3%; width: 96%; opacity: var(--t2); transform: scale(calc(.6 + var(--t2) * .4)) rotate(calc((1 - var(--t2)) * -40deg)); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .45)); }
.c-chocolate .e-dia { font-size: clamp(4.6rem, 13vw, 7.6rem); }
.c-chocolate .e-mes { font-family: "Pinyon Script", cursive; color: #4A2C1E; font-size: clamp(2rem, 5vw, 3rem); }
.c-chocolate .e-anio { color: #4A2C1E; }

.c-chocolate .xv-superficie { background: #4A2E20; border-color: rgb(233 196 188 / .25); }
.c-chocolate .e-itinerario { background: linear-gradient(180deg, #3B2418, #4E3022 50%, #3B2418); }
.c-chocolate .xv-momento time { color: #E9C4BC; }
.c-chocolate .xv-titulo .xv-script { font-family: "Pinyon Script", cursive; color: #E9C4BC; font-size: 1.25em; }
.ch-cierre-lazo { position: absolute; left: 50%; top: 4%; width: min(36vmin, 300px); translate: -50% 0; opacity: .9; }
.c-chocolate .e-cierre { padding-top: 34vh; }

@media (max-width: 760px) {
	.ch-cinta { --w: 34vw; left: -4vw; top: 4vh; }
	.ch-lazo { --w: 40vw; right: -4vw; top: 3vh; }
	.ch-tarjeta { --w: 28vw; right: 2vw; bottom: 8vh; }
	.ch-rosa { --w: 34vw; left: -2vw; bottom: 2vh; }
	.ch-cierre-lazo { width: 46vw; }
}
@media (min-width: 761px) { .ch-entrada-lazo { width: 26vh; top: 3%; } .ch-entrada-sello { width: 11vh; bottom: 5%; } }