/* 151 · Una Aceituna en Camino — baby shower elegante y neutro: copa de martini, aceitunas y mocktails. Se abre agitando la coctelera.
   Portada: la copa con su aceituna sobre fondo crema, con ramas de olivo que se mecen (WebGL, modo respiro).
   Orden: la barra — cada sección es un cóctel sin alcohol con su tarjetita; una aceituna cae en la copa al llegar. El programa es la carta.
   Fecha: la aceituna rueda hasta el borde de la copa y aparece el día. Cierre: «Una pequeña aceituna está en camino». */
.c-aceituna { --display-peso: 400; --nombre-color: #1A1A1A; --titulo-letra: "Playfair Display"; --titulo-peso: 700; --titulo-espacio: -.01em;
	--dia-letra: "Playfair Display"; --dia-color: #1A1A1A; --radio: 4px; --vj: 50px; --sombra: 0 14px 16px rgb(26 26 26 / .18);
	--nombre-tam: clamp(4.6rem, 13vw, 11rem); --ap-w: min(36vw, 170px); --ap-ar: .5; --ap-destello: rgb(199 211 154 / .6); }
.c-aceituna .xv-cielo { display: none; }
.c-aceituna main { background: #F7F3E8; }
.c-aceituna main > .xv-sec:not(#portada) { background: transparent; }
.c-aceituna .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(250 247 238 / .85), transparent 76%); }
html.so-abre .ap-cosa[data-efecto="agita"] .ap-pieza { animation: ac-agita 1.4s ease-in-out forwards; }
@keyframes ac-agita { 0% { transform: none; } 8%, 24%, 40% { transform: translateY(-12%) rotate(-10deg); } 16%, 32%, 48% { transform: translateY(8%) rotate(8deg); } 60% { transform: none; } 100% { transform: translateY(-50vh) rotate(-20deg); opacity: 0; } }

.c-aceituna .e-evento { font-family: "Jost", sans-serif; color: #5F6E26; letter-spacing: .46em; font-size: .74rem; font-weight: 600; }
.c-aceituna .e-padres { font-family: "Parisienne", cursive; color: #B83A26; font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.c-aceituna .e-padres-n { color: #45453E; }
.c-aceituna .e-fecha { color: #45453E; letter-spacing: .1em; }
.ac-rama-a { --w: min(26vmin, 250px); left: -2vw; top: 6vh; --r: 20deg; --dy: -10vh; --ex: -30vw; --ey: 0px; --ed: .3s; --fd: 6s; --fa: 4px; --fr: 2deg; }
.ac-rama-b { --w: min(24vmin, 230px); right: -2vw; bottom: 8vh; --r: 200deg; --dy: 10vh; --ex: 30vw; --ey: 0px; --ed: .45s; --fd: 7s; --fa: 4px; --fr: 2deg; }
.ac-martini { --w: min(14vmin, 130px); right: 14vw; top: 12vh; --r: 8deg; --dy: -12vh; --ex: 30vw; --ey: -20vh; --ed: .6s; --fd: 5s; --fa: 4px; --fr: 2deg; }
.ac-aceitunas { --w: min(14vmin, 130px); left: 14vw; bottom: 8vh; --dy: 10vh; --ex: -30vw; --ey: 20vh; --ed: .75s; --fd: 6s; --fa: 4px; --fr: 3deg; }

/* la barra: tarjetas de cóctel */
.c-aceituna main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; padding: clamp(56px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(44px, 5vw, 64px);
	border-top: 3px solid #1A1A1A; box-shadow: inset 0 3px 0 #FFFFFF, inset 0 5px 0 #1A1A1A, 0 30px 60px -40px rgb(26 26 26 / .4); }
.ac-copa { top: -54px; right: clamp(14px, 4vw, 40px); width: clamp(60px, 7vw, 76px); }
.ac-aceituna { position: absolute; left: 44%; top: -60%; width: 18%; aspect-ratio: .8; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #A3B34E, #6E7F2E 70%); box-shadow: inset -2px -2px 0 rgb(0 0 0 / .15);
	opacity: 0; transform: translateY(0); }
.ac-aceituna::after { content: ""; position: absolute; left: 30%; top: 25%; width: 40%; height: 40%; border-radius: 50%; background: #C2412D; }
.llego > .xv-ancho > .ac-copa .ac-aceituna { animation: ac-cae .9s cubic-bezier(.5,0,.8,1.2) .5s forwards; }
@keyframes ac-cae { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(230%); } }
.ac-carta { top: 20px; left: clamp(24px, 5vw, 64px); font: 400 1.3rem/1 "Parisienne", cursive; color: #5F6E26; }
.c-aceituna .xv-kicker { color: #5F6E26; letter-spacing: .34em; font-weight: 600; }
.c-aceituna .xv-titulo .xv-script { font-family: "Parisienne", cursive; font-weight: 400; color: #B83A26; font-size: 1.25em; }
.c-aceituna .xv-superficie { background: #FAF8F1; border: 1px solid rgb(26 26 26 / .12); border-radius: 2px; box-shadow: none; }
.c-aceituna .xv-momento time { color: #5F6E26; font-weight: 600; }
.c-aceituna .e-firma { color: #B83A26; }
.c-aceituna .xv-boton:not(.xv-boton-suave) { background: #1A1A1A; color: #F7F3E8; border-color: #1A1A1A; border-radius: 2px; }
.c-aceituna .xv-boton-suave { border-radius: 2px; }
.c-aceituna .e-ornamento { width: min(46%, 180px); }

/* fecha: la aceituna rueda al borde de la copa */
.c-aceituna .e-fecha-k { color: #5F6E26; letter-spacing: .44em; font-weight: 600; }
.ac-m-copa { left: 26%; top: 0; width: 48%; opacity: clamp(0, calc(var(--t1) * 2), 1); }
.ac-m-aceituna { left: calc(-10% + var(--t1) * 66%); top: 10%; width: 12%; aspect-ratio: .82; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #A3B34E, #6E7F2E 70%); transform: rotate(calc(var(--t1) * 720deg)); opacity: clamp(0, calc(var(--t1) * 3), 1); }
.ac-m-aceituna::after { content: ""; position: absolute; left: 32%; top: 28%; width: 36%; height: 36%; border-radius: 50%; background: #C2412D; }
.c-aceituna .e-dia-caja { translate: 0 64%; }
.c-aceituna .e-dia { font-size: clamp(3.4rem, 9vw, 5rem); }
.c-aceituna .e-mes { font-family: "Parisienne", cursive; color: #B83A26; }
.c-aceituna .e-anio { color: #45453E; }

.ac-cierre { position: absolute; left: 50%; top: 30px; width: min(30vmin, 180px); translate: -50% 0; animation: e-flota 3s ease-in-out infinite alternate; }
.c-aceituna .e-cierre { padding-top: clamp(220px, 32vh, 280px); }
.c-aceituna .e-cierre .xv-kicker { color: #5F6E26; }

@media (max-width: 760px) {
	.c-aceituna { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.ac-rama-a { --w: 40vw; left: -10vw; top: 5vh; } .ac-rama-b { --w: 38vw; right: -10vw; bottom: 6vh; } .ac-martini { --w: 22vw; right: 6vw; top: 10vh; } .ac-aceitunas { --w: 22vw; left: 6vw; bottom: 6vh; }
}