/* Colección XV · BASE 3 · Crecimiento botánico
   Portada por planos: fondo ambiental (paralaje lento), elemento central, retrato y nombre, y vegetación cercana
   en los márgenes que se aparta al abrir y con el scroll (--p). El recorrido abre «claros»: superficies legibles.
   Los marcos de foto pasan de una forma orgánica a un rectángulo amplio: polígono de 32 puntos con calc() atado
   al avance de su sección (--mo), la misma cantidad de puntos en las dos formas, así la forma cambia de verdad. */

.b-escena { display: grid; place-items: center; }
.b-fondo { position: absolute; inset: -4% 0; }
.b-fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(calc(1 + var(--p, 0) * .06)); }
.b-central { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.b-centro {
	position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 6vw;
	transform: translateY(calc(var(--p, 0) * -5vh));
}
.b-retrato {
	width: min(24vw, 30vh); aspect-ratio: 1; margin-bottom: 16px;
	border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
	box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--tinta) 70%, transparent);
	transform: scale(calc(1 + var(--p, 0) * .08));
}
.b-nombre { font-size: calc(clamp(4.4rem, 10vw, 9rem) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); padding: .05em .15em .15em; }
.b-nombre-caja { position: relative; }
.b-evento { color: var(--acento); }
.b-cerca { position: absolute; top: -4vh; bottom: -4vh; z-index: 3; width: min(30vw, 46vh); pointer-events: none; transition: translate 2s cubic-bezier(.77,0,.175,1); }
.b-cerca-img { width: 100%; height: 100%; object-fit: cover; }
.b-cerca-izq { left: -4vw; transform: translateX(calc(var(--p, 0) * -16vw)); }
.b-cerca-izq .b-cerca-img { object-position: left center; }
.b-cerca-der { right: -4vw; transform: translateX(calc(var(--p, 0) * 16vw)); }
.b-cerca-der .b-cerca-img { object-position: right center; }
html:not(.b-abierto) .b-cerca-izq { translate: 12vw 0; }
html:not(.b-abierto) .b-cerca-der { translate: -12vw 0; }
.b-pista { position: absolute; z-index: 4; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); opacity: calc(1 - var(--p, 0) * 4); }

/* Claros: superficies legibles con borde orgánico suave. */
.b-claro { position: relative; padding: clamp(34px, 5vw, 64px) clamp(24px, 5vw, 72px); background: color-mix(in srgb, var(--papel) var(--claro-opacidad, 86%), transparent); border-radius: clamp(28px, 4vw, 56px); }
.b-claro.xv-centro { max-width: 820px; display: grid; gap: 18px; justify-items: center; }
.b-claro-fecha { display: grid; gap: 14px; justify-items: center; }
.b-fecha-linea { display: flex; align-items: center; gap: 18px; text-align: left; }
.b-dia { font-size: clamp(6rem, 13vw, 9.5rem); font-weight: 300; }
.b-mes { font-family: var(--script); font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: .95; color: var(--acento); }
.b-cuenta { justify-items: center; }
.b-par { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.b-marco { aspect-ratio: 4 / 5; --mo: clamp(0, (var(--p, 0) - .18) / .4, 1); clip-path: polygon(calc(50.00% + 0.00% * var(--mo)) calc(2.40% + -2.40% * var(--mo)), calc(59.14% + 0.80% * var(--mo)) calc(4.04% + -4.04% * var(--mo)), calc(66.66% + 4.05% * var(--mo)) calc(9.78% + -9.78% * var(--mo)), calc(71.78% + 11.63% * var(--mo)) calc(17.40% + -17.40% * var(--mo)), calc(76.04% + 23.96% * var(--mo)) calc(23.96% + -23.96% * var(--mo)), calc(81.92% + 18.08% * var(--mo)) calc(28.67% + -12.08% * var(--mo)), calc(89.93% + 10.07% * var(--mo)) calc(33.46% + -4.17% * var(--mo)), calc(97.38% + 2.62% * var(--mo)) calc(40.58% + -0.52% * var(--mo)), calc(100.55% + -0.55% * var(--mo)) calc(50.00% + 0.00% * var(--mo)), calc(98.12% + 1.88% * var(--mo)) calc(59.57% + 0.37% * var(--mo)), calc(92.09% + 7.91% * var(--mo)) calc(67.43% + 3.28% * var(--mo)), calc(85.51% + 14.49% * var(--mo)) calc(73.73% + 9.68% * var(--mo)), calc(79.64% + 20.36% * var(--mo)) calc(79.64% + 20.36% * var(--mo)), calc(73.58% + 9.83% * var(--mo)) calc(85.29% + 14.71% * var(--mo)), calc(66.29% + 4.42% * var(--mo)) calc(89.33% + 10.67% * var(--mo)), calc(58.10% + 1.84% * var(--mo)) calc(90.73% + 9.27% * var(--mo)), calc(50.00% + 0.00% * var(--mo)) calc(90.40% + 9.60% * var(--mo)), calc(41.97% + -1.92% * var(--mo)) calc(90.35% + 9.65% * var(--mo)), calc(32.99% + -3.70% * var(--mo)) calc(91.08% + 8.92% * var(--mo)), calc(22.89% + -6.30% * var(--mo)) calc(90.57% + 9.43% * var(--mo)), calc(13.81% + -13.81% * var(--mo)) calc(86.19% + 13.81% * var(--mo)), calc(8.75% + -8.75% * var(--mo)) calc(77.56% + 5.85% * var(--mo)), calc(8.63% + -8.63% * var(--mo)) calc(67.13% + 3.58% * var(--mo)), calc(11.07% + -11.07% * var(--mo)) calc(57.74% + 2.20% * var(--mo)), calc(12.55% + -12.55% * var(--mo)) calc(50.00% + 0.00% * var(--mo)), calc(11.81% + -11.81% * var(--mo)) calc(42.40% + -2.35% * var(--mo)), calc(10.79% + -10.79% * var(--mo)) calc(33.76% + -4.47% * var(--mo)), calc(12.34% + -12.34% * var(--mo)) calc(24.84% + -8.25% * var(--mo)), calc(17.41% + -17.41% * var(--mo)) calc(17.41% + -17.41% * var(--mo)), calc(24.69% + -8.10% * var(--mo)) calc(12.12% + -12.12% * var(--mo)), calc(32.62% + -3.33% * var(--mo)) calc(8.03% + -8.03% * var(--mo)), calc(40.93% + -0.88% * var(--mo)) calc(4.42% + -4.42% * var(--mo))); }
.b-marco-arte { display: grid; place-items: center; background: var(--suave); }
.b-marco-arte > * { width: 82%; }
.b-claro-texto { display: grid; gap: 18px; }
.b-lugar { text-align: left; }
.b-galeria .xv-galeria { grid-auto-rows: clamp(150px, 18vw, 250px); }
.b-galeria .g-mitad { grid-column: span 6; grid-row: span 2; }
.b-galeria .g-tercio { grid-column: span 4; grid-row: span 1; }
.b-galeria .g-entera { grid-column: span 12; grid-row: span 2; }
.b-galeria .g-org { --mo: clamp(0, (var(--p, 0) - .2) / .4, 1); clip-path: polygon(calc(50.00% + 0.00% * var(--mo)) calc(2.40% + -2.40% * var(--mo)), calc(59.14% + 0.80% * var(--mo)) calc(4.04% + -4.04% * var(--mo)), calc(66.66% + 4.05% * var(--mo)) calc(9.78% + -9.78% * var(--mo)), calc(71.78% + 11.63% * var(--mo)) calc(17.40% + -17.40% * var(--mo)), calc(76.04% + 23.96% * var(--mo)) calc(23.96% + -23.96% * var(--mo)), calc(81.92% + 18.08% * var(--mo)) calc(28.67% + -12.08% * var(--mo)), calc(89.93% + 10.07% * var(--mo)) calc(33.46% + -4.17% * var(--mo)), calc(97.38% + 2.62% * var(--mo)) calc(40.58% + -0.52% * var(--mo)), calc(100.55% + -0.55% * var(--mo)) calc(50.00% + 0.00% * var(--mo)), calc(98.12% + 1.88% * var(--mo)) calc(59.57% + 0.37% * var(--mo)), calc(92.09% + 7.91% * var(--mo)) calc(67.43% + 3.28% * var(--mo)), calc(85.51% + 14.49% * var(--mo)) calc(73.73% + 9.68% * var(--mo)), calc(79.64% + 20.36% * var(--mo)) calc(79.64% + 20.36% * var(--mo)), calc(73.58% + 9.83% * var(--mo)) calc(85.29% + 14.71% * var(--mo)), calc(66.29% + 4.42% * var(--mo)) calc(89.33% + 10.67% * var(--mo)), calc(58.10% + 1.84% * var(--mo)) calc(90.73% + 9.27% * var(--mo)), calc(50.00% + 0.00% * var(--mo)) calc(90.40% + 9.60% * var(--mo)), calc(41.97% + -1.92% * var(--mo)) calc(90.35% + 9.65% * var(--mo)), calc(32.99% + -3.70% * var(--mo)) calc(91.08% + 8.92% * var(--mo)), calc(22.89% + -6.30% * var(--mo)) calc(90.57% + 9.43% * var(--mo)), calc(13.81% + -13.81% * var(--mo)) calc(86.19% + 13.81% * var(--mo)), calc(8.75% + -8.75% * var(--mo)) calc(77.56% + 5.85% * var(--mo)), calc(8.63% + -8.63% * var(--mo)) calc(67.13% + 3.58% * var(--mo)), calc(11.07% + -11.07% * var(--mo)) calc(57.74% + 2.20% * var(--mo)), calc(12.55% + -12.55% * var(--mo)) calc(50.00% + 0.00% * var(--mo)), calc(11.81% + -11.81% * var(--mo)) calc(42.40% + -2.35% * var(--mo)), calc(10.79% + -10.79% * var(--mo)) calc(33.76% + -4.47% * var(--mo)), calc(12.34% + -12.34% * var(--mo)) calc(24.84% + -8.25% * var(--mo)), calc(17.41% + -17.41% * var(--mo)) calc(17.41% + -17.41% * var(--mo)), calc(24.69% + -8.10% * var(--mo)) calc(12.12% + -12.12% * var(--mo)), calc(32.62% + -3.33% * var(--mo)) calc(8.03% + -8.03% * var(--mo)), calc(40.93% + -0.88% * var(--mo)) calc(4.42% + -4.42% * var(--mo))); border-radius: 0; }
.b-rsvp { margin-inline: auto; }
.b-nombre-fin { font-size: calc(clamp(4rem, 10vw, 8rem) * var(--n, 1)); color: var(--acento); }
.b-orn { width: 100%; }

.base-botanico .xv-viajero { z-index: 5; }

@media (max-width: 760px) {
	.b-retrato { width: 50vw; }
	.b-nombre { font-size: calc(clamp(3.6rem, 18vw, 5.6rem) * var(--n, 1)); }
	.b-cerca { width: 44vw; }
	.b-cerca-izq { left: -18vw; }
	.b-cerca-der { right: -18vw; }
	.b-par { grid-template-columns: 1fr; }
	.b-galeria .g-mitad { grid-column: span 3; grid-row: span 2; }
	.b-galeria .g-tercio { grid-column: span 3; }
	.b-galeria .g-entera { grid-column: span 6; }
	.b-claro { padding: 30px 20px; border-radius: 28px; }
}
html.quieto .b-marco, html.quieto .b-galeria .g-org { --mo: 1; }
html.quieto .b-centro { transform: none; }