/* 54 · Aniversario de Marca — libro de marca heritage: crema, azul profundo y oro.
   Guion: el emblema del aniversario abre la invitación; el número de años enorme dentro del emblema, con el logo de
   la empresa y una cinta debajo; el banderín y el reloj acompañan a los lados. En la fecha el emblema gira y se
   asienta con el día en su centro. El programa es una línea de tiempo con hitos. */

.c-aniversario { --display-peso: 900; --nombre-color: #1D3557; --titulo-letra: "Fraunces"; --titulo-peso: 800; --titulo-espacio: -.02em; --display-espacio: -.02em;
	--dia-letra: "Fraunces"; --dia-color: #1D3557; --radio: 6px; --vj: 64px; --nombre-tam: clamp(2.4rem, 6.4vw, 5.4rem); --sombra: 0 24px 26px rgb(29 53 87 / .2); }
.c-aniversario .e-titulos { gap: 6px; translate: 0 -2vh; }
.c-aniversario .e-nombre { white-space: normal; max-width: 16ch; }
.c-aniversario .e-evento { color: #7F600E; }
.an-detalle { display: grid; justify-items: center; gap: 10px; }
.an-num { display: flex; align-items: baseline; gap: .2em; font-family: "Fraunces", serif; font-weight: 900; line-height: .8; }
.an-num > span:first-child { font-size: clamp(6rem, 18vw, 12rem); background: linear-gradient(170deg, #E8D08A, #C9A227 45%, #7F600E); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.04em; }
.an-t { font-family: "Mr Dafoe", cursive; font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.2rem); color: #1D3557; }
.c-aniversario .e-logo { border-color: rgb(29 53 87 / .35); }

.an-emblema { --w: min(64vmin, 560px); left: calc(50% - min(32vmin, 280px)); top: calc(50% - min(38.6vmin, 338px)); --ds: .06; --dy: 4vh; --ey: 0px; --ed: .2s; --fd: 12s; --fa: 3px; --fr: .3deg; opacity: .22; }
.an-banner { --w: min(40vmin, 380px); left: calc(50% - min(20vmin, 190px)); bottom: 6vh; --dy: 8vh; --ey: 20vh; --ed: 1s; --fd: 7s; --fa: 4px; }
.an-banderin { --w: min(14vmin, 130px); left: 9vw; top: 30vh; --r: -6deg; --dy: -14vh; --dr: -8deg; --ex: -20vw; --ey: 0px; --ed: .7s; --fd: 4s; --fr: 3deg; }
.an-reloj { --w: min(15vmin, 140px); right: 9vw; top: 34vh; --r: 8deg; --dy: -10vh; --dr: 20deg; --ex: 20vw; --ey: 0px; --ed: .9s; --fd: 5s; }

/* entrada */
.c-aniversario .xv-entrada { background: radial-gradient(70% 60% at 50% 40%, #27466F, #1D3557 70%); }
.an-entrada-emblema { position: absolute; left: 50%; top: 50%; width: min(56vmin, 460px); translate: -50% -50%; opacity: .18; }
.c-aniversario .xv-entrada-nombre { white-space: normal; max-width: 16ch; font-size: clamp(2.2rem, 7vw, 4rem); }
.c-aniversario .xv-entrada .xv-evento { color: #E8D08A; }
.c-aniversario .xv-entrada .xv-boton:not(.xv-boton-suave) { background: #C9A227; border-color: #C9A227; color: #1D3557; }

/* bienvenida */
.c-aniversario .e-ornamento { width: min(46%, 180px); }
.c-aniversario .e-firma { font-family: "Mr Dafoe", cursive; color: #7F600E; }

/* fecha: el emblema gira y se asienta con el día en el centro */
.an-m-emblema { left: 10%; top: 3%; width: 80%; transform: rotate(calc((1 - var(--t1)) * -200deg)) scale(calc(.5 + var(--t1) * .5)); opacity: clamp(0, calc(var(--t1) * 2), 1); filter: drop-shadow(0 24px 30px rgb(29 53 87 / .3)); }
.c-aniversario .e-dia-caja { translate: 0 -12%; }
.c-aniversario .e-dia { font-weight: 900; font-size: clamp(3.6rem, 10vw, 6rem); }
.c-aniversario .e-mes { font-family: "Mr Dafoe", cursive; color: #7F600E; font-size: clamp(1.8rem, 4.6vw, 2.8rem); }

/* línea de tiempo con hitos */
.c-aniversario .e-itinerario { background: #1D3557; color: #F7F1E3; --tinta: #F7F1E3; --tinta-2: #D6DDE8; --linea: rgba(247,241,227,.2); --acento: #E8D08A; }
@media (min-width: 761px) {
	.c-aniversario .e-itinerario .e-dos { grid-template-columns: 1fr; }
	.c-aniversario .xv-itinerario { grid-auto-flow: column; grid-auto-columns: 1fr; max-width: none; position: relative; padding-top: 34px; }
	.c-aniversario .xv-itinerario::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: rgb(232 208 138 / .5); }
	.c-aniversario .xv-momento { grid-template-columns: 1fr; gap: 6px; border: 0; padding: 0 12px 0 0; position: relative; }
	.c-aniversario .xv-momento::before { content: ""; position: absolute; left: 0; top: -30px; width: 14px; height: 14px; border-radius: 50%; background: #E8D08A; box-shadow: 0 0 0 5px #1D3557; }
	.c-aniversario .xv-momento:last-child { border: 0; }
}
.c-aniversario .xv-superficie { background: #FFFDF7; border-color: rgb(201 162 39 / .4); }

/* cierre */
.an-cierre-emblema { position: absolute; left: 50%; top: 50%; width: min(56vmin, 460px); translate: -50% -50%; opacity: .12; }

@media (max-width: 760px) {
	.an-emblema { --w: 96vw; left: 2vw; top: 22vh; }
	.an-banderin { --w: 18vw; left: 2vw; top: 66vh; }
	.an-reloj { --w: 18vw; right: 3vw; top: 66vh; }
	.an-banner { --w: 70vw; left: 15vw; bottom: 4vh; }
}