/* 154 · Patito de Hule — baby shower de la hora del baño: patitos amarillos, burbujas, bañera y azulejos celestes. Se abre la bañera: las burbujas revientan.
   Portada: azulejos celestes con espuma abajo y patitos que se mecen; la luz respira (WebGL, modo respiro) y suben burbujas.
   Orden: la fila de patitos — un patito nada por el costado al bajar (--pg) y cada sección es una pompa que revienta al llegar.
   Fecha: el patito flota en un aro de burbujas con el día. Cierre: la toalla con capucha de patito. */
.c-patito { --display-peso: 800; --nombre-color: #1F3B57; --titulo-letra: "Baloo 2"; --titulo-peso: 700; --titulo-espacio: -.01em;
	--dia-letra: "Baloo 2"; --dia-color: #1F3B57; --radio: 30px; --vj: 54px; --sombra: 0 14px 16px rgb(31 59 87 / .2); --nombre-tam: clamp(4.6rem, 13vw, 11rem); --ap-w: min(70vw, 340px); --ap-destello: rgb(255 255 255 / .95); }
.c-patito .xv-cielo { display: none; }
.c-patito main { background: linear-gradient(90deg, rgb(255 255 255 / .5) 2px, transparent 2px) 0 0 / 60px 60px, linear-gradient(0deg, rgb(255 255 255 / .5) 2px, transparent 2px) 0 0 / 60px 60px, #DDF1FA; }
.c-patito main > .xv-sec:not(#portada) { background: transparent; }
.c-patito main > .xv-sec { position: relative; z-index: 1; }
.c-patito .v-velo { background: radial-gradient(46% 38% at 50% 50%, rgb(240 250 255 / .8), transparent 76%); }
.pt-nado { position: fixed; right: 1vw; top: 0; bottom: 0; z-index: 0; width: min(10vw, 76px); pointer-events: none; opacity: 0; transition: opacity 1s ease; }
html.e-abierto .pt-nado { opacity: 1; }
.pt-nado img { position: absolute; left: 0; width: 100%; top: calc(10vh + var(--pg, 0) * 70vh); animation: pt-mece 2s ease-in-out infinite alternate; }
@keyframes pt-mece { from { rotate: -8deg; } to { rotate: 8deg; } }

.c-patito .e-evento { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #2470B0; letter-spacing: .3em; font-size: .8rem; }
.c-patito .e-padres { font-family: "Baloo 2", sans-serif; font-weight: 700; color: #E0761C; }
.c-patito .e-padres-n { color: #3E5871; }
.c-patito .e-fecha { color: #1F3B57; font-weight: 700; background: rgb(255 255 255 / .85); padding: 6px 16px; border-radius: 999px; }
.c-patito .e-nombre { text-shadow: 0 5px 0 #FFD23F, 0 10px 24px rgb(255 255 255 / .9); }
.pt-burbujas { --w: min(22vmin, 210px); right: 6vw; top: 8vh; --dy: -16vh; --ex: 0px; --ey: 30vh; --ed: .3s; --fd: 5s; --fa: 12px; --fr: 4deg; }
.pt-patito-a { --w: min(16vmin, 150px); left: 6vw; bottom: 6vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .5s; --fd: 2s; --fa: 5px; --fr: 5deg; }
.pt-patito-b { --w: min(11vmin, 100px); left: 24vw; bottom: 8vh; --dy: 10vh; --ex: -30vw; --ey: 0px; --ed: .65s; --fd: 2.4s; --fa: 5px; --fr: 5deg; }

/* pompas que revientan al llegar */
.c-patito main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FFFFFF; border-radius: 36px; padding: clamp(50px, 6vw, 72px) clamp(24px, 5vw, 64px);
	box-shadow: 0 0 0 6px rgb(255 255 255 / .6), 0 30px 60px -40px rgb(36 112 176 / .5); }
.c-patito main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { content: ""; position: absolute; inset: -6px; border-radius: 40px; pointer-events: none; z-index: 5;
	background: radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / .9), rgb(158 216 240 / .7) 40%, rgb(255 214 240 / .6) 70%, rgb(255 255 255 / .85)); transition: opacity .25s ease .45s, transform .45s cubic-bezier(.3,1.6,.5,1) .2s; }
.c-patito main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::before { opacity: 0; transform: scale(1.06); }
.c-patito main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { content: ""; position: absolute; inset: -20px; border-radius: 50px; border: 3px solid rgb(255 255 255 / .9); pointer-events: none; opacity: 0; }
.c-patito main > .xv-sec.llego:not(#portada):not(#fecha):not(#cierre) > .xv-ancho::after { animation: pt-pop .6s ease-out .55s; }
@keyframes pt-pop { 0% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.12); } }
.c-patito .xv-kicker { color: #2470B0; letter-spacing: .3em; font-weight: 800; }
.c-patito .xv-titulo .xv-script { color: #E0761C; }
.c-patito .xv-superficie { background: #F2FAFD; border: 2px solid rgb(158 216 240 / .6); border-radius: 22px; box-shadow: none; }
.c-patito .xv-momento time { color: #2470B0; font-weight: 800; }
.c-patito .e-firma { color: #E0761C; }
.c-patito .xv-boton:not(.xv-boton-suave) { background: #2470B0; color: #FFFFFF; border-color: #2470B0; }
.c-patito .e-ornamento { width: min(62%, 240px); }

/* fecha: el patito en un aro de burbujas */
.c-patito .e-fecha-k { color: #2470B0; letter-spacing: .4em; font-weight: 800; }
.pt-m-aro { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: rotate(calc(var(--t1) * 180deg)) scale(calc(.4 + var(--t1) * .6)); }
.pt-m-patito { left: -2%; top: 58%; width: 28%; opacity: var(--t2); transform: translateY(calc((1 - var(--t2)) * 40%)); animation: pt-mece 2s ease-in-out infinite alternate; }
.c-patito .e-dia { font-size: clamp(4.4rem, 13vw, 7.2rem); text-shadow: 0 4px 0 #FFD23F; }
.c-patito .e-mes { font-family: "Baloo 2", sans-serif; font-weight: 800; color: #E0761C; }
.c-patito .e-anio { color: #3E5871; }

.pt-cierre-toalla { position: absolute; left: 50%; top: 30px; width: min(32vmin, 190px); translate: -50% 0; }
.c-patito .e-cierre { padding-top: clamp(250px, 36vh, 310px); }
.c-patito .e-cierre .xv-kicker { color: #2470B0; }

@media (max-width: 760px) {
	.c-patito { --nombre-tam: clamp(4rem, 22vw, 6rem); }
	.pt-burbujas { --w: 34vw; right: 2vw; top: 6vh; } .pt-patito-a { --w: 26vw; left: 2vw; bottom: 5vh; } .pt-patito-b { --w: 18vw; left: 30vw; bottom: 6vh; }
	.pt-nado { width: 13vw; right: 0; opacity: .8; }
}