/* 153 · Abejita — baby shower «Mamá abeja y su abejita»: panal, abejas tiernas y miel que gotea. Sobre blanco con forro de panal, cerrado con una gota de miel que se estira y se suelta.
   Portada: el panal con miel que gotea arriba y flores silvestres abajo, con la luz cálida que entra (WebGL, modo rayos).
   Orden: el panal — cada sección es una celda: su hexágono numerado se enciende y la celda se llena de miel al llegar; la abejita vuela de celda en celda.
   Fecha: las celdas se juntan en un hexágono con el día. Cierre: dos abejas, la grande y la pequeña. */
.c-abejita { --display-peso: 700; --nombre-color: #2B2B2B; --titulo-letra: "Fredoka"; --titulo-peso: 700; --titulo-espacio: -.01em;
	--dia-letra: "Fredoka"; --dia-color: #2B2B2B; --radio: 24px; --vj: 60px; --sombra: 0 14px 16px rgb(43 43 43 / .2); --nombre-tam: clamp(4.6rem, 13vw, 11rem); }
.c-abejita .xv-cielo { display: none; }
.c-abejita main { background: #FFF8E1; }
.c-abejita main > .xv-sec:not(#portada) { background: transparent; }
.c-abejita .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(255 250 232 / .85), transparent 76%); }

.c-abejita .e-evento { font-family: "Fredoka", sans-serif; color: #B9770E; letter-spacing: .4em; font-size: .78rem; }
.c-abejita .e-padres { font-family: "Fredoka", sans-serif; font-weight: 600; color: #3F8F5A; }
.c-abejita .e-padres-n { color: #4D4A42; }
.c-abejita .e-fecha { color: #2B2B2B; font-weight: 700; background: rgb(255 255 255 / .85); padding: 6px 16px; border-radius: 999px; }
.c-abejita .e-nombre { text-shadow: 0 5px 0 #F2B134, 0 10px 24px rgb(255 250 232 / .9); }
.ab-panal { --w: min(22vmin, 210px); right: 4vw; top: 8vh; --dy: -10vh; --ex: 30vw; --ey: -20vh; --ed: .3s; --fd: 8s; --fa: 3px; --fr: 1deg; }
.ab-abeja { --w: min(16vmin, 150px); left: 10vw; top: 16vh; --dy: -16vh; --dx: 20vw; --ex: -40vw; --ey: 0px; --ed: .5s; --fd: 1.8s; --fa: 10px; --fr: 6deg; }
.ab-cucharon { --w: min(20vmin, 190px); left: 4vw; bottom: 6vh; --r: -16deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .7s; --fd: 6s; --fa: 4px; --fr: 2deg; }

/* celdas del panal que se llenan de miel */
.c-abejita main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; padding: clamp(56px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px); border-radius: 26px; border: 3px solid #F2B134;
	background: linear-gradient(0deg, rgb(252 231 162 / .55), rgb(252 231 162 / .55)) 0 100% / 100% 0 no-repeat, #FFFFFF; transition: background-size 1.8s ease .4s; box-shadow: 0 30px 60px -40px rgb(185 119 14 / .5); }
.c-abejita main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { background-size: 100% 22%, auto; }
.ab-hex { top: -34px; left: 50%; translate: -50% 0; width: 66px; aspect-ratio: 1.1; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #FFFFFF;
	box-shadow: inset 0 0 0 4px #F2B134; transition: background .8s ease .3s; }
.ab-hex::before { content: ""; position: absolute; inset: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: 4px solid #F2B134; }
.ab-hex b { font: 700 1.3rem/1 "Fredoka", sans-serif; color: #B9770E; transition: color .8s ease .3s; }
.llego > .xv-ancho > .ab-hex { background: #F2B134; } .llego > .xv-ancho > .ab-hex b { color: #2B2B2B; }
.c-abejita .xv-kicker { color: #B9770E; letter-spacing: .3em; font-weight: 700; }
.c-abejita .xv-titulo .xv-script { color: #3F8F5A; }
.c-abejita .xv-superficie { background: #FFFBEE; border: 2px solid rgb(242 177 52 / .4); border-radius: 18px; box-shadow: none; }
.c-abejita .xv-momento time { color: #B9770E; font-weight: 800; }
.c-abejita .e-firma { color: #B9770E; }
.c-abejita .xv-boton:not(.xv-boton-suave) { background: #2B2B2B; color: #FCE7A2; border-color: #2B2B2B; }
.c-abejita .e-ornamento { width: min(60%, 230px); }

/* fecha: las celdas se juntan en un hexágono */
.c-abejita .e-fecha-k { color: #B9770E; letter-spacing: .4em; font-weight: 700; }
.ab-m-celda { left: 39%; top: 39%; width: 22%; aspect-ratio: 1.1; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, #FCE7A2, #F2B134);
	opacity: clamp(0, calc(var(--t1) * 2 - var(--t2) * 2), 1); transform: rotate(var(--a)) translateY(calc(-110% - (1 - var(--t1)) * 120%)) rotate(calc(var(--a) * -1)); }
.ab-m-grande { inset: 8%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, #FCE7A2, #F2B134 60%, #E09A1C); opacity: var(--t2); transform: scale(calc(.4 + var(--t2) * .6)); filter: drop-shadow(0 20px 30px rgb(185 119 14 / .4)); }
.c-abejita .e-dia { font-size: clamp(4.6rem, 13vw, 7.4rem); }
.c-abejita .e-mes { font-family: "Fredoka", sans-serif; font-weight: 700; color: #FFFFFF; text-shadow: 0 2px 8px rgb(185 119 14 / .6); }
.c-abejita .e-anio { color: #4D4A42; }

.ab-cierre-grande, .ab-cierre-chica { position: absolute; left: 50%; top: 30px; animation: e-flota 2s ease-in-out infinite alternate; }
.ab-cierre-grande { width: min(30vmin, 180px); translate: -90% 0; }
.ab-cierre-chica { width: min(17vmin, 100px); translate: 30% 60%; scale: -1 1; animation-delay: -1s; }
.c-abejita .e-cierre { padding-top: clamp(240px, 34vh, 300px); }
.c-abejita .e-cierre .xv-kicker { color: #B9770E; }

@media (max-width: 760px) {
	.c-abejita { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.ab-panal { --w: 34vw; right: -4vw; top: 6vh; } .ab-abeja { --w: 26vw; left: 4vw; top: 10vh; } .ab-cucharon { --w: 32vw; left: -4vw; bottom: 5vh; }
}