/* 156 · Fiesta Blanca — la fiesta de verano de la empresa, toda en blanco, en una terraza con faroles, olivos y lino. Se abre una cortina de lino que el viento corre hacia un lado.
   Portada: la terraza blanca con olivos y el cielo de la tarde, con la sombra de las hojas que se mece (WebGL, modo sombra).
   Orden: la terraza — cada sección es una mesa con mantel de lino y la sombra de los olivos pasa sobre ella al bajar.
   Fecha: un farol se enciende y el día queda dentro. Cierre: la terraza de noche con los faroles encendidos. */
.c-blanca { --display-peso: 400; --nombre-color: #26302A; --titulo-letra: "Syne"; --titulo-peso: 700; --titulo-espacio: -.02em;
	--dia-letra: "Italiana"; --dia-color: #26302A; --radio: 4px; --vj: 40px; --sombra: 0 14px 18px rgb(38 48 42 / .16); --nombre-tam: clamp(3.4rem, 9vw, 8rem);
	--ap-placa: rgb(255 255 255 / .88); --ap-placa-tinta: #26302A; --ap-radio: 4px; }
.c-blanca .xv-cielo { display: none; }
.c-blanca main { background: linear-gradient(180deg, #F7F4EE, #EFE9DC); }
.c-blanca main > .xv-sec:not(#portada) { background: transparent; }
.c-blanca .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(255 255 255 / .82), transparent 76%); }
.c-blanca .ap-placa .ap-titulo small { color: #5E6B3E; } .c-blanca .ap-placa .ap-titulo strong { font-size: clamp(2rem, 8vw, 2.8rem); }

.c-blanca .e-evento { font-family: "Syne", sans-serif; color: #5E6B3E; letter-spacing: .44em; font-size: .74rem; }
.c-blanca .e-logo { border-color: rgb(38 48 42 / .3); color: #4E5A50; background: rgb(255 255 255 / .6); }
.c-blanca .e-lema { color: #26302A; font-weight: 500; background: rgb(255 255 255 / .7); padding: 4px 12px; border-radius: 8px; }
.c-blanca .e-fecha { color: #26302A; font-weight: 600; background: rgb(255 255 255 / .8); padding: 6px 16px; border-radius: 999px; }
.c-blanca .e-nombre { text-shadow: 0 2px 26px rgb(255 255 255 / .95); }
.fb-olivo { --w: min(22vmin, 210px); right: 4vw; bottom: 4vh; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .3s; --fd: 7s; --fa: 3px; --fr: 1deg; }
.fb-farol-a { --w: min(10vmin, 90px); left: 8vw; bottom: 6vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 6s; --fa: 3px; --fr: 1deg; }
.fb-copas { --w: min(16vmin, 150px); left: 18vw; bottom: 4vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .65s; --fd: 7s; --fa: 3px; --fr: 1deg; }

/* la terraza: mesas de lino con sombra de olivo */
.c-blanca main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; overflow: hidden; background: #FFFFFF; padding: clamp(50px, 6vw, 72px) clamp(24px, 5vw, 64px);
	box-shadow: 0 1px 0 rgb(38 48 42 / .06), 0 30px 60px -40px rgb(38 48 42 / .4); border-radius: 4px; }
.c-blanca main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .5;
	background: radial-gradient(18% 12% at 20% 30%, rgb(94 107 62 / .14), transparent 70%), radial-gradient(14% 10% at 34% 22%, rgb(94 107 62 / .1), transparent 70%), radial-gradient(20% 14% at 72% 70%, rgb(94 107 62 / .12), transparent 70%),
		radial-gradient(12% 9% at 84% 40%, rgb(94 107 62 / .1), transparent 70%), radial-gradient(16% 11% at 50% 86%, rgb(94 107 62 / .1), transparent 70%);
	filter: blur(8px); transform: translateX(calc(-8% + var(--pg, 0) * 22%)); animation: fb-brisa 7s ease-in-out infinite alternate; }
@keyframes fb-brisa { to { translate: 2% 1%; } }
.c-blanca main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho > * { position: relative; z-index: 1; }
.c-blanca .xv-kicker { color: #5E6B3E; letter-spacing: .34em; font-weight: 700; }
.c-blanca .xv-titulo .xv-script { font-family: "Italiana", serif; color: #5E6B3E; }
.c-blanca .xv-superficie { background: #FAF8F3; border: 1px solid rgb(38 48 42 / .1); border-radius: 4px; box-shadow: none; }
.c-blanca .xv-momento time { color: #5E6B3E; font-weight: 700; }
.c-blanca .e-firma { font-family: "Italiana", serif; color: #5E6B3E; }
.c-blanca .xv-boton:not(.xv-boton-suave) { background: #26302A; color: #FFFFFF; border-color: #26302A; border-radius: 4px; }
.c-blanca .xv-boton-suave { border-radius: 4px; }
.c-blanca .e-ornamento { width: min(56%, 220px); }

/* fecha: el farol se enciende */
.c-blanca .e-fecha-k { color: #5E6B3E; letter-spacing: .44em; font-family: "Syne", sans-serif; }
.fb-m-farol { left: 22%; top: -14%; width: 56%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: translateY(calc((1 - var(--t1)) * 20%)); filter: brightness(calc(.85 + var(--t2) * .2)) drop-shadow(0 20px 30px rgb(38 48 42 / .25)); }
.fb-m-luz { left: 20%; top: 18%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 226 160 / .85), rgb(255 214 140 / .3) 50%, transparent 72%); opacity: var(--t2); transform: scale(calc(.5 + var(--t2) * .7)); }
.c-blanca .e-dia-caja { translate: 0 6%; z-index: 2; }
.c-blanca .e-dia { font-size: clamp(3.6rem, 10vw, 5.6rem); text-shadow: 0 0 12px #FFFFFF, 0 0 26px #FFFFFF, 0 0 40px rgb(255 248 230 / .9); }
.c-blanca .e-dia-caja { background: radial-gradient(closest-side, rgb(255 255 255 / .85), transparent); padding: 10px 30px; }
.c-blanca .e-mes { font-family: "Syne", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(.75rem, 1.8vw, .95rem); color: #5E6B3E; }
.c-blanca .e-anio { color: #4E5A50; font-size: .66rem; }

/* cierre: la terraza de noche */
.c-blanca .e-cierre { background: radial-gradient(90% 70% at 50% 20%, #2E3A44, #1A2028 75%) !important; padding-top: clamp(240px, 34vh, 300px); --tinta: #F7F4EE; --tinta-2: #D6D9DC; }
.c-blanca .e-cierre .e-nombre-fin, .c-blanca .e-cierre p, .c-blanca .e-cierre a { color: #F7F4EE; }
.c-blanca .e-cierre .xv-kicker { color: #E7D9B2; }
.fb-cierre-f1, .fb-cierre-f2, .fb-cierre-f3 { position: absolute; top: 40px; width: min(14vmin, 80px); filter: drop-shadow(0 0 30px rgb(255 214 140 / .8)); animation: e-flota 4s ease-in-out infinite alternate; }
.fb-cierre-f1 { left: calc(50% - min(30vmin, 180px)); top: 70px; } .fb-cierre-f2 { left: calc(50% - min(7vmin, 40px)); animation-delay: -1.3s; } .fb-cierre-f3 { left: calc(50% + min(16vmin, 100px)); top: 70px; animation-delay: -2.6s; }

@media (max-width: 760px) {
	.c-blanca { --nombre-tam: clamp(2.8rem, 13vw, 4rem); }
	.fb-olivo { --w: 34vw; right: -2vw; bottom: 3vh; } .fb-farol-a { --w: 15vw; left: 4vw; bottom: 5vh; } .fb-copas { --w: 24vw; left: 22vw; bottom: 3vh; }
}