/* 157 · Día de la Familia — el día familiar u olimpiadas de la empresa: juegos, banderines, medallas y picnic deportivo. Se abre con el silbato: «¡En sus marcas, listos, fuera!».
   Portada: el césped con banderines, conos y globos, y nubes que pasan (WebGL, modo nubes).
   Orden: las estaciones — cada sección es una estación de juego con su número y el color de su equipo, y entre ellas se extienden banderines de colores.
   Fecha: la medalla gira y el día queda en ella. Cierre: el podio con los tres lugares. */
.c-familia { --display-peso: 800; --nombre-color: #1C2B22; --titulo-letra: "Bricolage Grotesque"; --titulo-peso: 700; --titulo-espacio: -.02em;
	--dia-letra: "Bricolage Grotesque"; --dia-color: #5A3D00; --radio: 20px; --vj: 50px; --sombra: 0 14px 16px rgb(28 43 34 / .2); --nombre-tam: clamp(3.4rem, 9vw, 7.6rem);
	--ap-w: min(60vw, 290px); --ap-destello: rgb(255 201 60 / .6); }
.c-familia .xv-cielo { display: none; }
.c-familia main { background: #F3FAEF; }
.c-familia main > .xv-sec:not(#portada) { background: transparent; }
.c-familia main > .xv-sec { position: relative; }
.c-familia .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(255 255 255 / .8), transparent 76%); }
html.so-abre .ap-cosa[data-efecto="pita"] .ap-pieza { animation: fm-pita 1.3s ease-out forwards; }
@keyframes fm-pita { 0%, 30%, 60% { transform: scale(1); } 15%, 45% { transform: scale(1.12) rotate(-6deg); } 100% { transform: translate(-30vw, -50vh) rotate(-40deg) scale(.7); opacity: 0; } }
.ap-cosa[data-efecto="pita"]::after { content: ""; position: absolute; right: -24%; top: 10%; width: 40%; height: 40%; pointer-events: none; opacity: 0;
	background: linear-gradient(20deg, transparent 46%, #FFC93C 46% 54%, transparent 54%) 0 0 / 100% 33% no-repeat, linear-gradient(0deg, transparent 46%, #FFC93C 46% 54%, transparent 54%) 0 50% / 100% 33% no-repeat, linear-gradient(-20deg, transparent 46%, #FFC93C 46% 54%, transparent 54%) 0 100% / 100% 33% no-repeat; }
html.so-abre .ap-cosa[data-efecto="pita"]::after { animation: fm-sonido .3s ease-out 0s 4 alternate; }
@keyframes fm-sonido { to { opacity: 1; transform: translateX(10%); } }

.c-familia .e-evento { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: #FFFFFF; background: #E63946; padding: 6px 14px; border-radius: 999px; letter-spacing: .14em; font-size: .78rem; }
.c-familia .e-logo { background: rgb(255 255 255 / .8); }
.c-familia .e-lema { color: #1C2B22; font-weight: 600; background: rgb(255 255 255 / .8); padding: 4px 12px; border-radius: 10px; }
.c-familia .e-fecha { color: #1C2B22; font-weight: 700; background: rgb(255 255 255 / .85); padding: 6px 16px; border-radius: 999px; }
.c-familia .e-nombre { text-shadow: 0 4px 0 #FFC93C, 0 10px 24px rgb(255 255 255 / .9); }
.fm-banderin-p { position: absolute; left: -2%; right: -2%; top: 0; height: 90px; background: url("img/banderines.webp") center top / auto 100% repeat-x; transform-origin: 50% 0; animation: fm-ondea 3s ease-in-out infinite alternate; }
@keyframes fm-ondea { from { transform: scaleY(.94) skewX(-1deg); } to { transform: scaleY(1.04) skewX(1deg); } }
.fm-medalla { --w: min(12vmin, 110px); right: 8vw; top: 14vh; --dy: -12vh; --ex: 30vw; --ey: -20vh; --ed: .4s; --fd: 3s; --fa: 4px; --fr: 4deg; }
.fm-silbato { --w: min(18vmin, 170px); left: 5vw; bottom: 6vh; --r: -12deg; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .6s; --fd: 5s; --fa: 4px; --fr: 3deg; }

/* estaciones */
.c-familia main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 22px; padding: clamp(60px, 7vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px);
	border-top: 10px solid var(--eq, #2B6CB0); box-shadow: 0 30px 60px -40px rgb(28 43 34 / .45); }
.c-familia .fi-num { top: -24px; left: clamp(20px, 5vw, 60px); height: 40px; font-family: "Bricolage Grotesque", sans-serif; font-size: .82rem; letter-spacing: .04em; }
.fm-banderines { position: absolute; left: 6%; right: 6%; top: 0; height: 54px; translate: 0 -110%; background: url("img/banderines.webp") center top / auto 100% repeat-x; transform-origin: 50% 0; transform: scaleY(0); transition: transform .8s cubic-bezier(.3,1.4,.5,1) .1s; }
.llego > .fm-banderines { transform: scaleY(1); }
.c-familia .xv-kicker { color: #2B6CB0; letter-spacing: .26em; font-weight: 700; }
.c-familia .xv-titulo .xv-script { color: #D62839; }
.c-familia .xv-superficie { background: #F7FBF5; border: 2px solid rgb(28 43 34 / .1); border-radius: 16px; box-shadow: none; }
.c-familia .xv-momento time { color: #D62839; font-weight: 800; }
.c-familia .e-firma { color: #2B6CB0; }
.c-familia .xv-boton:not(.xv-boton-suave) { background: #2B6CB0; color: #FFFFFF; border-color: #2B6CB0; }
.c-familia .e-ornamento { width: min(46%, 180px); }

/* fecha: la medalla gira */
.c-familia .e-fecha-k { color: #2B6CB0; letter-spacing: .3em; font-weight: 800; }
.fm-m-medalla { left: 18%; top: -10%; width: 64%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: perspective(900px) rotateY(calc((1 - var(--t1)) * 720deg)); filter: drop-shadow(0 20px 26px rgb(28 43 34 / .3)); }
.c-familia .e-dia-caja { translate: 0 25%; }
.c-familia .e-dia { font-size: clamp(3rem, 8vw, 4.6rem); text-shadow: 0 1px 0 rgb(255 255 255 / .6); }
.c-familia .e-mes { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: #5A3D00; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(.8rem, 2vw, 1rem); }
.c-familia .e-anio { color: #5A3D00; font-size: .62rem; }

/* cierre: el podio */
.fm-podio { position: absolute; left: 50%; top: 40px; translate: -50% 0; display: flex; align-items: flex-end; gap: 6px; }
.fm-podio i { display: grid; place-items: start center; width: min(18vw, 96px); padding-top: 10px; border-radius: 8px 8px 0 0; font: 800 2rem/1 "Bricolage Grotesque", sans-serif; font-style: normal; color: #FFFFFF; }
.fm-podio i:nth-child(1) { height: 110px; background: #2B6CB0; } .fm-podio i:nth-child(2) { height: 150px; background: #E0A800; } .fm-podio i:nth-child(3) { height: 86px; background: #E63946; }
.c-familia .e-cierre { padding-top: clamp(230px, 32vh, 280px); }
.c-familia .e-cierre .xv-kicker { color: #2B6CB0; }

@media (max-width: 760px) {
	.c-familia { --nombre-tam: clamp(2.8rem, 13vw, 4rem); }
	.fm-medalla { --w: 20vw; right: 4vw; top: 14vh; } .fm-silbato { --w: 30vw; left: 2vw; bottom: 5vh; } .fm-banderin-p { height: 60px; }
}
.c-familia main > .xv-sec:nth-of-type(4n+1) { --eq: #E63946; } .c-familia main > .xv-sec:nth-of-type(4n+2) { --eq: #2B6CB0; }
.c-familia main > .xv-sec:nth-of-type(4n+3) { --eq: #E0A800; } .c-familia main > .xv-sec:nth-of-type(4n) { --eq: #2E9E48; }
.c-familia .fi-num { --num-fondo: var(--eq); }