/* 67 · Cobalto y Durazno — recortes de papel pintado a mano: cobalto, durazno, caléndula y rosa.
   Guion: las formas cobalto salen volando; los nombres sobre crema y hojas recortadas se balancean a los lados;
   en la fecha la estrella gira y se abre en el sol de caléndula que enmarca el día. */
.c-cobalto { --display-peso: 400; --nombre-color: #1F2F8F; --titulo-letra: "DM Serif Display"; --titulo-espacio: -.01em; --dia-letra: "Shrikhand"; --dia-color: #1F2F8F;
	--y-letra: "DM Serif Display"; --y-tam: .5em; --y-color: #C8601F; --radio: 28px; --vj: 64px; --sombra: 0 14px 18px rgb(31 47 143 / .16); --nombre-tam: clamp(4rem, 10.5vw, 8.6rem); }
.c-cobalto .e-evento { color: #1F3FBF; font-weight: 700; letter-spacing: .34em; }
.c-cobalto .e-y { font-style: italic; }
.c-cobalto .e-fecha { color: #3A478F; font-weight: 600; }

.cb-hoja { --w: min(36vmin, 360px); left: -4vw; top: 6vh; --r: 10deg; --dx: -8vw; --dr: -10deg; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 6s; --fa: 4px; --fr: 4deg; }
.cb-hoja .e-img { transform-origin: 20% 100%; }
.cb-coral { --w: min(32vmin, 320px); right: -3vw; bottom: 2vh; --r: -8deg; --dx: 8vw; --dr: 10deg; --ex: 30vw; --ey: 0px; --ed: .5s; --fd: 7s; --fa: 4px; --fr: 4deg; }
.cb-estrella { --w: min(14vmin, 140px); right: 14vw; top: 10vh; --r: 14deg; --dy: -20vh; --dr: 120deg; --ey: -30vh; --ed: 1s; --fd: 5s; }
.cb-ola { --w: min(22vmin, 220px); left: 10vw; bottom: 10vh; --dy: 12vh; --ex: -20vw; --ey: 10vh; --ed: 1.2s; --fd: 6s; }

.c-cobalto .xv-entrada { background: #FBF4E8; }
.cb-entrada-hoja { position: absolute; left: -6%; top: -4%; width: min(60vmin, 480px); }
.cb-entrada-estrella { position: absolute; right: 10%; top: 12%; width: min(18vmin, 150px); }
.cb-entrada-ola { position: absolute; right: -4%; bottom: 8%; width: min(40vmin, 320px); }
html.abriendo .cb-entrada-hoja { transition: transform 1s cubic-bezier(.65,0,.35,1); transform: translate(-60vw, -40vh) rotate(-40deg); }
html.abriendo .cb-entrada-estrella { transition: transform 1s cubic-bezier(.65,0,.35,1); transform: translate(40vw, -40vh) rotate(180deg); }
html.abriendo .cb-entrada-ola { transition: transform 1s cubic-bezier(.65,0,.35,1); transform: translate(50vw, 30vh); }

.c-cobalto .e-ornamento { width: min(60%, 240px); }
.c-cobalto .e-firma { font-family: "Shrikhand", cursive; color: #C8601F; font-size: clamp(2rem, 4vw, 2.8rem); }

/* fecha: estrella → sol */
.cb-m-estrella { left: 26%; top: 26%; width: 48%; transform: rotate(calc(var(--t1) * 216deg)) scale(calc(1 + var(--t1) * .3)); opacity: clamp(0, calc((1 - var(--t1)) * 3), 1); }
.cb-m-sol { left: 0; top: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 3 - 1.4), 1); transform: scale(calc(.4 + var(--t2) * .6)) rotate(calc(var(--m) * 60deg)); }
.c-cobalto .e-dia { font-size: clamp(3.6rem, 10vw, 5.6rem); }
.c-cobalto .e-mes { font-family: "DM Serif Display", serif; font-style: italic; color: #1F3FBF; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.c-cobalto .e-anio { color: #3A478F; }

.c-cobalto .xv-superficie { background: #FFFBF4; border: 0; box-shadow: 8px 8px 0 #FFB38A; }
.c-cobalto .e-itinerario { background: #1F3FBF; --tinta: #FFFBF4; --tinta-2: #E6EBFB; --acento: #FFB38A; --linea: rgba(255,251,244,.2); color: #FFFBF4; }
.c-cobalto .xv-momento time { color: #1F3FBF; } .c-cobalto .e-itinerario .xv-momento time { color: #FFB38A; }
.c-cobalto .xv-titulo .xv-script { font-family: "Shrikhand", cursive; color: #C8601F; font-size: .9em; }
.c-cobalto .e-itinerario .xv-titulo .xv-script { color: #FFB38A; }
.cb-cierre-hoja { position: absolute; left: -6vw; bottom: -6vh; width: min(40vmin, 320px); }
.cb-cierre-coral { position: absolute; right: -4vw; bottom: -6vh; width: min(36vmin, 290px); }

@media (max-width: 760px) {
	.cb-hoja { --w: 46vw; left: -14vw; top: 2vh; }
	.cb-coral { --w: 42vw; right: -12vw; bottom: 1vh; }
	.cb-estrella { --w: 20vw; right: 6vw; top: 8vh; }
	.cb-ola { --w: 32vw; left: 4vw; bottom: 6vh; }
	.cb-cierre-hoja { width: 44vw; } .cb-cierre-coral { width: 40vw; }
}