/* 127 · Toile de Jouy — boda romántica en una sola tinta carmín sobre lino crema. Sobre de lino con forro de toile, cerrado con un lazo que se desata.
   Portada: toda la pantalla es la tela toile, que ondula apenas como un mantel con brisa (WebGL, modo seda); el nombre va en un óvalo crema.
   Orden: la tela — cada sección se abre como un camafeo ovalado y en su esquina crece una viñeta de la tela (glorieta o rosas).
   Fecha: la glorieta se agranda y el día queda bajo su techo. Cierre: el óvalo con los nombres, rodeado de rosas en tinta. */
.c-toile { --display-peso: 400; --display-estilo: italic; --nombre-color: #3B2A2C; --titulo-letra: "Bodoni Moda"; --titulo-peso: 600; --titulo-espacio: 0;
	--dia-letra: "Bodoni Moda"; --dia-color: #A8323E; --y-letra: "Bodoni Moda"; --y-color: #A8323E; --y-tam: .5em; --pareja-tam: .74;
	--radio: 999px; --vj: 64px; --sombra: 0 10px 14px rgb(168 50 62 / .16); --nombre-tam: clamp(3rem, 6.6vw, 5.8rem); }
.c-toile .xv-cielo { display: none; }
.c-toile main { background: #F4EEE3 url("img/forro.webp") center / 640px repeat; }
.c-toile main > .xv-sec:not(#portada) { background: transparent; }
.c-toile .v-velo { background: radial-gradient(40% 34% at 50% 48%, rgb(251 248 242 / .5), transparent 76%); }

/* portada: el nombre en el óvalo crema */
.c-toile .e-evento { font-family: "Bodoni Moda", serif; font-style: italic; text-transform: none; letter-spacing: .06em; font-size: 1.15rem; color: #A8323E; }
.c-toile .e-fecha { color: #5E4A4C; font-size: .82rem; letter-spacing: .08em; max-width: 15em; text-wrap: balance; }
.tj-ovalo { --w: min(66vmin, 560px); left: calc(50% - min(33vmin, 280px)); top: calc(50% - min(33vmin, 280px)); --ds: -.06; --dy: -4vh; --ex: 0px; --ey: 0px; --ed: .1s; --fd: 12s; --fa: 2px; --fr: 0deg; }
html:not(.e-abierto) .tj-ovalo { opacity: 0; translate: none; scale: .6; }
.tj-ovalo { transition: opacity 1.2s ease .2s, scale 1.4s cubic-bezier(.2,.9,.3,1) .2s; }
.tj-rosas-a { --w: min(18vmin, 170px); left: calc(50% - min(40vmin, 340px)); bottom: 8vh; --r: -16deg; --dy: 10vh; --ex: -20vw; --ey: 10vh; --ed: .7s; --fd: 7s; --fa: 4px; --fr: 2deg; }
.tj-rosas-b { --w: min(16vmin, 150px); right: calc(50% - min(40vmin, 340px)); top: 9vh; --r: 160deg; --dy: -10vh; --ex: 20vw; --ey: -10vh; --ed: .9s; --fd: 8s; --fa: 4px; --fr: 2deg; }

/* secciones: camafeos de lino crema con filo carmín */
.c-toile main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; background: #FBF8F2; border-radius: 48% 48% 48% 48% / 12% 12% 12% 12%; padding: clamp(110px, 11vw, 140px) clamp(30px, 7vw, 90px) clamp(60px, 7vw, 90px);
	box-shadow: inset 0 0 0 10px #FBF8F2, inset 0 0 0 11px rgb(168 50 62 / .5), inset 0 0 0 15px #FBF8F2, inset 0 0 0 16px rgb(168 50 62 / .25), 0 30px 60px -36px rgb(59 42 44 / .45); }
.tj-vineta { right: auto; left: 50%; bottom: auto; top: 18px; translate: -50% 0; width: clamp(74px, 8vw, 96px); transform-origin: 50% 100%; }
.tj-vineta img { filter: none; }
.c-toile .xv-kicker { color: #A8323E; letter-spacing: .3em; }
.c-toile .xv-titulo { color: #3B2A2C; }
.c-toile .xv-titulo .xv-script { font-style: italic; font-weight: 400; color: #A8323E; }
.c-toile .xv-superficie { background: #F6EFE6; border: 1px solid rgb(168 50 62 / .2); border-radius: 18px; box-shadow: none; }
.c-toile .xv-momento time { color: #A8323E; font-family: "Bodoni Moda", serif; font-style: italic; }
.c-toile .e-firma { font-family: "Bodoni Moda", serif; font-style: italic; color: #A8323E; }
.c-toile .xv-boton:not(.xv-boton-suave) { background: #A8323E; color: #FFFFFF; border-color: #A8323E; }
.c-toile .e-ornamento { width: min(70%, 280px); }

/* fecha: la glorieta se agranda y el día queda bajo su techo */
.c-toile .e-fecha-sec { background: radial-gradient(60% 55% at 50% 48%, #FBF8F2, #F4EEE3 70%, #EFE5D8) !important; }
.c-toile .e-fecha-k { color: #A8323E; letter-spacing: .4em; }
.tj-m-ovalo { inset: 0; width: 100%; opacity: clamp(0, calc(var(--t1) * 2), 1); transform: scale(calc(.6 + var(--t1) * .4)); }
.tj-m-glorieta { z-index: 1; left: 20%; top: 6%; width: 60%; opacity: clamp(0, calc(var(--t1) * 2 - .4), 1); transform: scale(calc(.5 + var(--t1) * .5)); transform-origin: 50% 20%;
	clip-path: inset(0 0 calc(var(--t2) * 58%) 0); }
.c-toile .e-dia-caja { translate: 0 22%; }
.c-toile .e-dia { font-style: italic; font-weight: 500; font-size: clamp(3.6rem, 10vw, 5.4rem); }
.c-toile .e-mes { font-family: "Bodoni Moda", serif; font-style: italic; color: #3B2A2C; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.c-toile .e-anio { color: #5E4A4C; font-size: .72rem; }

/* cierre */
.tj-cierre-ovalo { position: absolute; left: 50%; top: 3%; width: min(46vw, 250px); translate: -50% 0; }
.tj-cierre-r1, .tj-cierre-r2 { position: absolute; width: min(20vw, 130px); }
.tj-cierre-r1 { left: calc(50% - min(40vw, 230px)); top: 14%; rotate: -14deg; } .tj-cierre-r2 { right: calc(50% - min(40vw, 230px)); top: 6%; rotate: 166deg; }
.c-toile .e-cierre { background: radial-gradient(70% 60% at 50% 30%, #FBF8F2, #F4EEE3) !important; padding-top: clamp(300px, 44vh, 380px); }
.c-toile .e-cierre .xv-kicker { color: #A8323E; }

@media (max-width: 760px) {
	.c-toile { --nombre-tam: clamp(2.8rem, 12vw, 3.8rem); }
	.tj-ovalo { --w: 96vw; left: 2vw; top: calc(50% - 50vw); }
	.tj-rosas-a { --w: 30vw; left: -4vw; bottom: 5vh; } .tj-rosas-b { --w: 28vw; right: -4vw; top: 6vh; }
	.c-toile main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 104px 26px 58px; border-radius: 40% 40% 40% 40% / 8% 8% 8% 8%; }
}