/* 111 · Barquito de Papel — baby shower marinero. Sobre blanco con forro de rayas y un ancla que cae.
   Portada: el agua azul que ondula con reflejos de sol (WebGL, modo agua) y el barquito que se mece.
   Orden: la travesía — un barquito avanza por la ruta punteada del costado mientras se baja; cada sección es una isla.
   Fecha: el barquito se desdobla y queda la hoja con el día. */
.c-barquito { --display-peso: 700; --nombre-color: #FFFFFF; --titulo-letra: "DM Serif Display"; --titulo-peso: 400; --titulo-espacio: -.01em; --dia-letra: "DM Serif Display"; --dia-color: #1F3A5A;
	--radio: 26px; --vj: 62px; --sombra: 0 18px 24px rgb(31 58 90 / .25); --nombre-tam: clamp(4.6rem, 11.5vw, 9.6rem); }
.c-barquito .xv-cielo { display: none; }
.c-barquito main { background: linear-gradient(180deg, #CFE6F4 0%, #E9F3FA 30%, #F6F9FB 60%, #EEF5FA 100%); }
.c-barquito main > .xv-sec:not(#portada) { background: transparent; }
.c-barquito .v-velo { background: radial-gradient(56% 40% at 50% 46%, rgb(31 58 90 / .3), transparent 74%); }

/* portada */
.c-barquito .e-evento { color: #FFFFFF; letter-spacing: .42em; font-weight: 700; font-size: .76rem; text-shadow: 0 1px 10px rgb(31 58 90 / .6); }
.c-barquito .e-padres { font-family: "DM Serif Display", serif; font-style: italic; color: #FFFFFF; text-shadow: 0 1px 12px rgb(31 58 90 / .6); }
.c-barquito .e-padres-n { color: #FFFFFF; text-shadow: 0 1px 10px rgb(31 58 90 / .6); }
.c-barquito .e-nombre { text-shadow: 0 4px 30px rgb(31 58 90 / .55); }
.c-barquito .e-fecha { color: #FFFFFF; background: rgb(31 58 90 / .5); padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
.c-barquito .e-pista { color: #FFFFFF; }
.bq-barquito { --w: min(28vmin, 260px); left: 6vw; bottom: 6vh; --r: -4deg; --dx: 30vw; --dy: 8vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 2.6s; --fa: 8px; --fr: 4deg; }
.bq-salvavidas { --w: min(18vmin, 160px); right: 6vw; bottom: 8vh; --r: 10deg; --dx: 6vw; --dy: 10vh; --dr: 40deg; --ex: 30vw; --ey: 0px; --ed: .7s; --fd: 3s; --fa: 6px; --fr: 6deg; }
.bq-gaviota-a { --w: min(14vmin, 130px); right: 14vw; top: 8vh; --dx: -30vw; --dy: -10vh; --ex: 30vw; --ey: -10vh; --ed: .3s; --fd: 2s; --fa: 10px; --fr: 4deg; }
.bq-gaviota-b { --w: min(9vmin, 80px); left: 16vw; top: 18vh; --dx: 20vw; --dy: -14vh; --ex: -30vw; --ey: -10vh; --ed: .6s; --fd: 2.4s; --fa: 8px; --fr: 4deg; }

/* islas: tarjetas blancas con la orilla de arena */
.c-barquito main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 34px; padding: clamp(28px, 4.4vw, 54px);
	box-shadow: 0 10px 0 -2px #F2E3C4, 0 34px 60px -30px rgb(31 58 90 / .4); animation: bq-mece 6s ease-in-out infinite alternate; }
@keyframes bq-mece { from { translate: 0 -4px; rotate: -.3deg; } to { translate: 0 4px; rotate: .3deg; } }
.c-barquito .xv-kicker { color: #D9534F; letter-spacing: .36em; }
.c-barquito .xv-titulo .xv-script { font-family: "Lobster Two", cursive; font-style: italic; color: #3E7FB0; }
.c-barquito .xv-superficie { background: #F3F8FB; border: 0; }
.c-barquito .xv-momento time { color: #D9534F; font-weight: 700; }
.c-barquito .e-firma { font-family: "Lobster Two", cursive; color: #3E7FB0; }
.c-barquito .xv-boton:not(.xv-boton-suave) { background: #1F3A5A; color: #FFFFFF; border-color: #1F3A5A; }
.c-barquito .e-ornamento { width: min(66%, 240px); }

/* fecha: el barquito se desdobla */
.c-barquito .e-fecha-k { color: #3E7FB0; }
.bq-m-barco { left: 14%; top: 18%; width: 72%; transform: translateY(calc(var(--t1) * 8%)) scaleY(calc(1 - var(--t2) * .9)) rotate(calc(var(--t2) * 20deg)); opacity: clamp(0, calc((1 - var(--t2)) * 2.4), 1); }
.bq-m-hoja { inset: 12%; background: #FFFFFF; box-shadow: 0 24px 40px -16px rgb(31 58 90 / .35), inset 0 0 0 1px rgb(31 58 90 / .06);
	background-image: linear-gradient(45deg, transparent 49.6%, rgb(31 58 90 / .06) 50%, transparent 50.4%), linear-gradient(-45deg, transparent 49.6%, rgb(31 58 90 / .06) 50%, transparent 50.4%);
	opacity: var(--t2); transform: rotate(calc(45deg - var(--t2) * 45deg)) scale(calc(.3 + var(--t2) * .7)); }
.c-barquito .e-dia { font-size: clamp(4.2rem, 12vw, 6.6rem); }
.c-barquito .e-mes { font-family: "Lobster Two", cursive; font-style: italic; color: #D9534F; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.c-barquito .e-anio { color: #3E5878; }

/* cierre */
.bq-cierre-salv { position: absolute; left: 50%; top: 5%; width: min(22vmin, 160px); translate: -50% 0; animation: e-flota 3s ease-in-out infinite alternate; }
.c-barquito .e-cierre { padding-top: clamp(200px, 30vh, 270px); }
.c-barquito .e-nombre-fin { color: #1F3A5A; }

@media (max-width: 760px) {
	.c-barquito { --nombre-tam: clamp(3.8rem, 18vw, 5.6rem); }
	.bq-barquito { --w: 40vw; left: 2vw; bottom: 3vh; }
	.bq-salvavidas { --w: 24vw; right: 4vw; bottom: 6vh; }
	.bq-gaviota-a { --w: 20vw; right: 6vw; top: 6vh; } .bq-gaviota-b { --w: 13vw; left: 8vw; top: 14vh; }
	.c-barquito main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { margin-right: 26px; }
}