/* Salón dorado — painted plates behind every chapter (paper, washes, gold flecks), their own photographs at the hour of their session. Afternoon -> golden hour -> dusk -> the party at night. The only ornament is the gold spark. Only the thirteen chapters; the neutral gate, the ring and the core stay untouched. Warm dress-code pigments arrive from data (--kc-swatch), never from this file. */ @font-face { font-family: 'PC Bodoni'; src: url('../../../assets/font/pc-bodoni.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'PC Cormorant'; src: url('../../../assets/font/pc-cormorant.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* Solo cifras (0-9 y :) en Lora 700: el «4» de Bodoni/Cormorant parecía «1». Las letras no cambian. */ @font-face { font-family: 'PC Cifras'; src: url('../../../assets/font/pc-cifras.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0030-003A; } @font-face { font-family: 'PC Script'; src: url('../../../assets/font/pc-script.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } #hero[data-pc-scene], #dedicatoria[data-pc-scene], #counter[data-pc-scene], #familia[data-pc-scene], #historia[data-pc-scene], #ubicaciones[data-pc-scene], #itinerario[data-pc-scene], #vestimenta[data-pc-scene], #regalos[data-pc-scene], #rsvp[data-pc-scene], #captura[data-pc-scene], #secreto[data-pc-scene], #kc-footer[data-pc-scene] { --pc-paper: #FBF6EC; --pc-dorado: #F3E6CC; --pc-atardecer: #EFDCC0; --pc-night: #16120E; --pc-ink: #1B1916; --pc-muted: #4E463A; --pc-gold-text: #523C12; --pc-gold-mid: #6A4D1C; --pc-gold: #C9A961; --pc-silver: #A9ADB3; --pc-bone: #F3EBDD; --pc-bone-muted: #D2C4AA; --pc-gold-night: #E2C27C; --pc-field: #B9A47C; --pc-key: var(--pc-paper); --pc-lift: 0 1px 0 rgba(120, 92, 40, .08), 0 18px 30px -18px rgba(40, 28, 10, .55); --pc-display: 'PC Cifras', 'PC Bodoni', 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif; --pc-text: 'PC Cifras', 'PC Cormorant', 'Cormorant Garamond', Garamond, Georgia, serif; --pc-script: 'PC Script', 'Snell Roundhand', cursive; --color-canvas: var(--pc-key); --color-ink: var(--pc-ink); --color-action: var(--pc-gold-text); --color-focus: var(--pc-gold-text); --kc-canvas: var(--pc-key); --kc-canvas-alt: var(--pc-dorado); --kc-surface: #FFFDF8; --kc-ink: var(--pc-ink); --kc-ink-muted: var(--pc-muted); --kc-accent: var(--pc-gold-text); --kc-on-accent: #FFFDF8; --kc-line: #E4D8C2; --kc-field-line: var(--pc-field); --kc-focus: var(--color-focus); --kc-font-display: var(--pc-display); --kc-font-body: var(--pc-text); position: relative; isolation: isolate; overflow: hidden; background-color: var(--pc-key); color: var(--pc-ink); font-family: var(--pc-text); font-size: 19px; font-weight: 500; line-height: 1.5; text-align: center; } /* night chapters: the party, after 6:30 */ #counter[data-pc-scene], #vestimenta[data-pc-scene], #regalos[data-pc-scene], #rsvp[data-pc-scene], #captura[data-pc-scene], #secreto[data-pc-scene], #kc-footer[data-pc-scene] { --pc-key: var(--pc-night); --color-ink: var(--pc-bone); --color-action: var(--pc-gold-night); --color-focus: var(--pc-gold-night); --kc-ink: var(--pc-bone); --kc-ink-muted: var(--pc-bone-muted); --kc-accent: var(--pc-gold-night); color: var(--pc-bone); } #familia[data-pc-scene], #historia[data-pc-scene] { --pc-key: var(--pc-dorado); } #ubicaciones[data-pc-scene] { --pc-key: var(--pc-atardecer); } #itinerario[data-pc-scene] { --pc-key: #B9977A; } #vestimenta[data-pc-scene] { --pc-key: #3A2C22; } #regalos[data-pc-scene] { --pc-key: #241B15; } #dedicatoria .pc-plate, #counter .pc-plate, #familia .pc-plate, #historia .pc-plate, #ubicaciones .pc-plate, #itinerario .pc-plate, #vestimenta .pc-plate, #regalos .pc-plate, #rsvp .pc-plate, #captura .pc-plate, #secreto .pc-plate, #kc-footer .pc-plate { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } #hero[data-pc-scene] .kc-container, #dedicatoria[data-pc-scene] .kc-container, #counter[data-pc-scene] .kc-container, #familia[data-pc-scene] .kc-container, #historia[data-pc-scene] .kc-container, #ubicaciones[data-pc-scene] .kc-container, #itinerario[data-pc-scene] .kc-container, #vestimenta[data-pc-scene] .kc-container, #regalos[data-pc-scene] .kc-container, #rsvp[data-pc-scene] .kc-container, #captura[data-pc-scene] .kc-container, #secreto[data-pc-scene] .kc-container, #kc-footer[data-pc-scene] .kc-container { padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right)); } #dedicatoria[data-pc-scene], #counter[data-pc-scene], #familia[data-pc-scene], #historia[data-pc-scene], #ubicaciones[data-pc-scene], #itinerario[data-pc-scene], #vestimenta[data-pc-scene], #regalos[data-pc-scene], #rsvp[data-pc-scene], #captura[data-pc-scene], #secreto[data-pc-scene] { padding-block: 60px; } #hero[data-pc-scene] h1, #dedicatoria[data-pc-scene] h2, #counter[data-pc-scene] h2, #familia[data-pc-scene] h2, #historia[data-pc-scene] h2, #ubicaciones[data-pc-scene] h2, #itinerario[data-pc-scene] h2, #vestimenta[data-pc-scene] h2, #regalos[data-pc-scene] h2, #rsvp[data-pc-scene] h2, #captura[data-pc-scene] h2, #secreto[data-pc-scene] h2 { font-family: var(--pc-display); font-weight: 400; font-size: clamp(30px, 7.8vw, 42px); line-height: 1.14; letter-spacing: -.005em; color: var(--color-ink); text-wrap: balance; margin-bottom: 18px; } #hero[data-pc-scene] .kc-eyebrow, #dedicatoria[data-pc-scene] .kc-eyebrow, #counter[data-pc-scene] .kc-eyebrow, #familia[data-pc-scene] .kc-eyebrow, #historia[data-pc-scene] .kc-eyebrow, #ubicaciones[data-pc-scene] .kc-eyebrow, #itinerario[data-pc-scene] .kc-eyebrow, #vestimenta[data-pc-scene] .kc-eyebrow, #regalos[data-pc-scene] .kc-eyebrow, #rsvp[data-pc-scene] .kc-eyebrow, #captura[data-pc-scene] .kc-eyebrow, #secreto[data-pc-scene] .kc-eyebrow { font-family: var(--pc-text); font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: .26em; padding-left: .26em; color: var(--color-action); text-wrap: balance; margin-bottom: 10px; } #hero[data-pc-scene] :focus-visible, #dedicatoria[data-pc-scene] :focus-visible, #counter[data-pc-scene] :focus-visible, #familia[data-pc-scene] :focus-visible, #historia[data-pc-scene] :focus-visible, #ubicaciones[data-pc-scene] :focus-visible, #itinerario[data-pc-scene] :focus-visible, #vestimenta[data-pc-scene] :focus-visible, #regalos[data-pc-scene] :focus-visible, #rsvp[data-pc-scene] :focus-visible, #captura[data-pc-scene] :focus-visible, #secreto[data-pc-scene] :focus-visible, #kc-footer[data-pc-scene] .pc-heart-ink { display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .1em 0 .18em; vertical-align: -.16em; overflow: visible; fill: none; stroke: #D8423A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #kc-footer[data-pc-scene] :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; } /* I — afternoon; the envelope opens and their portrait rises out of it */ #hero[data-pc-scene] { align-content: start; padding-block: 28px 22px; background: var(--pc-paper) url('../../../assets/page/escena/hero-paper.webp') center bottom / 100% 100% no-repeat; } /* Gold sparks around the envelope: the salon's only ornament. They wake after the gate (gate-host.mjs, anime.js). */ #hero .pc-hero-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; } #hero .pc-hero-spark { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--pc-gold); } #hero .pc-spark { display: block; width: 100%; height: 100%; fill: currentColor; opacity: .85; } #hero[data-pc-entrance='pending'] .kc-eyebrow, #hero[data-pc-entrance='pending'] .kc-hero__title, #hero[data-pc-entrance='pending'] .kc-hero__date, #hero[data-pc-entrance='pending'] .kc-hero__place, #hero[data-pc-entrance='pending'] .pc-scroll-cue, #hero[data-pc-entrance='pending'] .pc-hero-spark { opacity: 0; } #hero[data-pc-scene] .kc-container { max-width: 1080px; gap: 0; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); } #hero[data-pc-scene] .kc-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 4px; font-size: 15px; letter-spacing: .34em; } #hero[data-pc-scene] .kc-eyebrow::before, #hero[data-pc-scene] .kc-eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--pc-gold); } #hero .pc-envelope { position: relative; width: min(100%, 350px, 39.5svh); aspect-ratio: 320 / 420; margin: 0 auto clamp(8px, 2.2svh, 24px); } #hero .pc-envelope > * { position: absolute; } #hero .pc-env { display: block; background: center / 100% 100% no-repeat; pointer-events: none; } #hero .pc-env--back { left: 0; top: 50%; width: 100%; height: 50%; z-index: 0; background-image: url('../../../assets/page/prop/env-back.webp'); } #hero .pc-env--flap-open { left: 0; top: 23.33%; width: 100%; height: 26.67%; z-index: 1; transform-origin: 50% 100%; background-image: url('../../../assets/page/prop/env-flap-open.webp'); } #hero .pc-env-mouth { left: 16.25%; top: 0; width: 67.5%; height: 98%; z-index: 2; overflow: hidden; } #hero[data-pc-scene] .kc-hero__photo { position: absolute; left: 0; top: 4.85%; width: 100%; height: 75.2%; max-width: none; aspect-ratio: auto; padding: 7px; border-radius: 2px; background: #FFFDF8; box-shadow: var(--pc-lift); } #hero[data-pc-scene] .kc-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } #hero .pc-env--front { left: 0; top: 50%; width: 100%; height: 50%; z-index: 4; background-image: url('../../../assets/page/prop/env-front.webp'); } #hero .pc-env--flap-closed { left: 0; top: 50%; width: 100%; height: 26.67%; z-index: 5; transform-origin: 50% 0; transform: scaleY(0); background-image: url('../../../assets/page/prop/env-flap-closed.webp'); } #hero .pc-env--seal { left: 50%; top: 75.2%; width: 20%; aspect-ratio: 1; z-index: 6; transform: translate(-50%, -50%); background-image: url('../../../assets/page/prop/seal.webp'); } #hero[data-pc-envelope='sealed'] .pc-env--flap-open { transform: scaleY(0); } #hero[data-pc-envelope='sealed'] .pc-env--flap-closed { transform: none; } #hero[data-pc-envelope='sealed'] .kc-hero__photo { transform: translateY(64.5%); } #hero[data-pc-scene] h1.kc-hero__title { --ink: 115; -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--ink) * 1% - 14%), transparent calc(var(--ink) * 1%)); mask-image: linear-gradient(100deg, #000 calc(var(--ink) * 1% - 14%), transparent calc(var(--ink) * 1%)); display: block; margin: clamp(6px, 2.6svh, 30px) 0 0; font-family: var(--pc-script); font-weight: 400; font-size: clamp(44px, 13.2vw, 80px); line-height: 1.12; letter-spacing: 0; color: var(--pc-gold-mid); text-shadow: 0 1px 0 rgba(255, 253, 248, .85), 0 2px 8px rgba(110, 81, 28, .18); } #hero[data-pc-scene] .pc-name { display: block; } #hero[data-pc-scene] .pc-name-join { display: block; margin: -.12em 0 -.08em; font-size: .92em; line-height: 1; color: #3E2A0A; } #hero[data-pc-scene] .kc-hero__date { margin-top: 10px; padding: 6px 4px 6px calc(4px + .26em); font-family: var(--pc-display); font-size: 16px; font-weight: 500; letter-spacing: .26em; text-transform: none; color: var(--pc-ink); border-block: 1px solid var(--pc-gold); } #hero[data-pc-scene] .kc-hero__place { margin: 6px 0 6px; font-size: 19px; color: var(--pc-muted); } #hero .pc-scroll-cue { display: grid; place-items: center; width: 48px; height: 44px; margin: auto 0 0; color: var(--pc-gold-text); } #hero .pc-scroll-cue svg { width: 18px; height: 34px; } /* II — a pause with the verse (1 Juan 4:16): only the words, between two gold rules */ #dedicatoria[data-pc-scene] { --pc-key: var(--pc-paper); } #dedicatoria[data-pc-scene] .kc-container { max-width: 36rem; } #dedicatoria .pc-orn, #vestimenta .pc-orn { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 16rem; margin: 0 auto 22px; color: var(--pc-gold); } #dedicatoria .pc-orn i, #vestimenta .pc-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); } #dedicatoria .pc-orn i:last-child, #vestimenta .pc-orn i:last-child { transform: scaleX(-1); } #dedicatoria .pc-orn .pc-spark, #vestimenta .pc-orn .pc-spark { width: 18px; height: 18px; fill: currentColor; } #dedicatoria .pc-verse { margin: 0 auto; } #dedicatoria[data-pc-scene] .kc-dedication { max-width: 30rem; margin-inline: auto; font-family: var(--pc-text); font-style: normal; font-weight: 500; font-size: 24px; line-height: 1.5; color: var(--pc-ink); text-wrap: pretty; } #dedicatoria .pc-verse__cite { display: block; margin-top: 20px; font-family: var(--pc-display); font-size: 15px; font-style: normal; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--pc-gold-text); } #dedicatoria .pc-verse__cite::before { content: '— '; } /* III — the count over their photograph, edge to edge; November on a card with the day marked by a heart */ #counter[data-pc-scene] { --pc-key: var(--pc-paper); padding-block: 112px 124px; background: linear-gradient(180deg, #FBF6EC 0%, #F3E6CC 100%); } #counter .pc-counter-bg { position: absolute; inset: 0; z-index: -2; margin: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); } #counter .pc-counter-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; } #counter[data-pc-scene]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 18, 14, .5) 0%, rgba(22, 18, 14, .3) 40%, rgba(22, 18, 14, .74) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 150px), transparent 100%); pointer-events: none; } #counter[data-pc-scene] .kc-eyebrow { display: none; } #counter[data-pc-scene] h2 { text-shadow: 0 2px 16px rgba(0, 0, 0, .55); } #counter .pc-cal { width: min(100%, 340px); margin: 6px auto 24px; padding: 18px 14px 16px; border: 1px solid rgba(226, 194, 124, .6); background: rgba(22, 18, 14, .46); box-shadow: inset 0 0 0 5px rgba(22, 18, 14, .46), inset 0 0 0 6px rgba(226, 194, 124, .22); } #counter .pc-cal__month { margin: 0 0 12px; font-family: var(--pc-display); font-size: 15px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--pc-gold-night); } #counter .pc-cal__month span { color: var(--pc-bone); } #counter .pc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; margin: 0; padding: 0; list-style: none; } #counter .pc-cal__dow { margin-bottom: 4px; padding-bottom: 7px; border-bottom: 1px solid rgba(226, 194, 124, .3); font-family: var(--pc-display); font-size: 12px; font-weight: 600; color: var(--pc-gold-night); } #counter .pc-cal__day { position: relative; display: grid; place-items: center; aspect-ratio: 1; font-family: var(--pc-display); font-size: 16px; font-variant-numeric: lining-nums; color: var(--pc-bone); } #counter .pc-cal__day.is-wedding { z-index: 1; font-weight: 700; } /* Corazón a trazo de pluma, rojo granate: abierto, con el cruce abajo como dibujado a mano. */ #counter .pc-cal__heart { position: absolute; left: 50%; top: 50%; width: 175%; height: 175%; translate: -50% -52%; overflow: visible; fill: none; stroke: #C42B2B; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } #counter .pc-cal__day.is-wedding span { position: relative; margin-top: -1px; color: var(--pc-bone); } #counter[data-pc-scene] .kc-countdown { max-width: 520px; margin-inline: auto; padding: 0; gap: 8px; border: 0; border-image: none; background: none; outline: 0; box-shadow: none; } #counter[data-pc-scene] .kc-countdown__unit { position: relative; align-content: center; gap: 6px; padding: 14px 2px 10px; border: 1px solid rgba(226, 194, 124, .55); border-radius: 0; background: rgba(22, 18, 14, .62); box-shadow: inset 0 0 0 3px rgba(22, 18, 14, .62), inset 0 0 0 4px rgba(226, 194, 124, .22); } #counter[data-pc-scene] .kc-countdown__value { font-family: var(--pc-display); font-size: clamp(38px, 11.6vw, 66px); font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--pc-gold-night); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); } #counter[data-pc-scene] .kc-countdown__label { font-family: var(--pc-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-bone); } #counter[data-pc-scene] .kc-countdown__status { margin-top: 14px; font-size: 19px; color: var(--pc-bone-muted); } #counter[data-pc-scene] .kc-countdown__status:empty { display: none; } /* «Guardar en calendario»: the hollow button of the KC button library, set in the palette's gold. */ #counter .pc-cal-save { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin: 28px auto 0; padding: .7em 1.7em; border: solid 2px #0B0806; border-radius: .5em; background: #1B1612; color: var(--pc-gold-night); font-family: var(--pc-text); font-size: 17px; font-weight: 700; letter-spacing: .08em; cursor: pointer; user-select: none; box-shadow: inset 0 -6px 18px -6px rgba(11, 8, 6, 0), inset rgba(86, 70, 48, 1) -1px -1px 6px 0, rgba(86, 70, 48, .9) -1px -1px 6px 0; } #counter .pc-cal-save svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #counter .pc-cal-save:hover { box-shadow: inset 0 -6px 18px -6px #0B0806, inset 0 6px 18px -6px #0B0806, -1px -1px 6px 0 rgba(86, 70, 48, 1); } #counter .pc-cal-save:active { box-shadow: inset 0 -12px 12px -6px #0B0806, inset 0 12px 12px -6px #0B0806, inset 12px 0 12px -6px #0B0806, inset -12px 0 12px -6px #0B0806, -1px -1px 6px 0 rgba(86, 70, 48, 1); } /* IV — the parents on parchment (the page's protagonists); the godparents glide lighter, beneath */ #familia[data-pc-scene] .kc-container { max-width: 820px; } #familia[data-pc-scene] .pc-bless { max-width: 22rem; margin-inline: auto; margin-bottom: 26px; font-size: clamp(20px, 5.6vw, 28px); letter-spacing: .2em; line-height: 1.45; text-transform: uppercase; } #familia[data-pc-scene] #familia-padres { gap: 18px; padding: 16px 8px; border: 30px solid transparent; border-image: url('../../../assets/page/prop/pergamino.webp') 110 fill / 30px round; } #familia[data-pc-scene] .kc-family__group { gap: 2px; } #familia[data-pc-scene] .kc-family__group h3 { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 6px; font-family: var(--pc-text); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pc-gold-text); } #familia[data-pc-scene] #familia-padres .kc-family__group h3::before, #familia[data-pc-scene] #familia-padres .kc-family__group h3::after { content: ''; width: 22px; height: 1px; background: var(--pc-gold-mid); } #familia[data-pc-scene] #familia-padres .kc-family__group li { font-family: var(--pc-text); font-size: 21px; font-weight: 600; line-height: 1.32; color: var(--pc-ink); text-wrap: balance; } #familia[data-pc-scene] .pc-sub { margin: 28px 0 10px; font-family: var(--pc-script); font-size: 34px; font-weight: 400; line-height: 1; color: var(--pc-gold-text); } #familia[data-pc-scene] #familia-padrinos { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 10px; margin: 0 -22px; padding: 4px 22px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 15%; overscroll-behavior-x: contain; scrollbar-width: none; } #familia[data-pc-scene] #familia-padrinos::-webkit-scrollbar { display: none; } #familia[data-pc-scene] #familia-padrinos .kc-family__group { scroll-snap-align: center; align-content: center; min-height: 104px; padding: 12px 10px; background: rgba(255, 253, 248, .5); border: 1px solid rgba(201, 169, 97, .6); } #familia[data-pc-scene] #familia-padrinos .kc-family__group h3 { font-size: 12px; letter-spacing: .16em; } #familia[data-pc-scene] #familia-padrinos .kc-family__group li { font-family: var(--pc-text); font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--pc-ink); } #familia .pc-glide-nav { display: flex; justify-content: center; gap: 18px; margin-top: 6px; } #familia .pc-glide-btn, #historia .pc-glide-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--pc-gold-text); border-radius: 50%; background: rgba(255, 253, 248, .7); color: var(--pc-gold-text); } #familia .pc-glide-btn svg, #historia .pc-glide-btn svg { width: 18px; height: 18px; } /* V — their story as a stack of photographs: tap or swipe and the top one goes to the back; white, black, red. The stack itself is the core's (photos.mjs); this is only its skin, driven by --kc-stack-i. */ #historia .kc-photo-stack-host { margin-top: 6px; } #historia .kc-photo-stack { max-width: min(100%, 22rem); gap: 22px; padding-bottom: 18px; touch-action: pan-y; } #historia .kc-photo-stack__card { aspect-ratio: 2 / 3; padding: 0; border: 9px solid #FFFDF8; border-radius: 2px; background: #FFFDF8; box-shadow: var(--pc-lift); cursor: pointer; transform-origin: 50% 85%; transform: translateY(calc(min(var(--kc-stack-i, 0), 2) * 11px)) rotate(calc(min(var(--kc-stack-i, 0), 1) * -5deg + (clamp(1, var(--kc-stack-i, 0), 2) - 1) * 9deg)) scale(calc(1 - min(var(--kc-stack-i, 0), 2) * .04)); opacity: clamp(0, calc(1.15 - var(--kc-stack-i, 0) * .38), 1); } #historia .kc-photo-stack__card::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(201, 169, 97, .75); pointer-events: none; } #historia .kc-photo-stack__card img { top: 0; left: 0; width: 100%; height: 100%; object-position: center 20%; } #historia .kc-photo-stack__next { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--pc-gold-text); border-radius: 50%; background: rgba(255, 253, 248, .75); color: var(--pc-gold-text); } #historia .kc-photo-stack__count { font-family: var(--pc-display); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--pc-gold-text); } #historia .pc-stack-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0; font-family: var(--pc-text); font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-gold-text); } #historia .pc-stack-hint .pc-spark { width: 14px; height: 14px; fill: currentColor; } #secreto[data-pc-scene] .pc-plate { object-fit: cover; object-position: center top; } /* VI — the two places, tall cards in the Pórtico layout: their real photograph in colour, then CEREMONIA / RECEPCIÓN, the venue, the address, the hour and «Ver ubicación» */ #ubicaciones[data-pc-scene] .kc-container { max-width: 900px; } #ubicaciones[data-pc-scene] .kc-locations { gap: 16px; } #ubicaciones[data-pc-scene] { padding-block: 56px; } #ubicaciones[data-pc-scene] .kc-location { position: relative; display: grid; align-content: center; justify-items: center; min-height: clamp(430px, 128vw, 560px); padding: 48px 20px; overflow: hidden; border: 9px solid #FBF6EC; border-radius: 2px; background: #2A2016; box-shadow: var(--pc-lift); text-align: center; isolation: isolate; color: #FBF6EC; } #ubicaciones[data-pc-scene] .kc-location::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 15, 8, .3) 0%, rgba(22, 15, 8, .74) 28%, rgba(22, 15, 8, .74) 72%, rgba(22, 15, 8, .34) 100%); box-shadow: inset 0 0 0 1px rgba(60, 40, 15, .35); pointer-events: none; } #ubicaciones[data-pc-scene] .kc-location::after { content: ''; position: absolute; inset: 7px; z-index: 0; border: 1px solid rgba(232, 207, 152, .7); pointer-events: none; } #ubicaciones[data-pc-scene] .kc-location__photo { position: absolute; inset: 0; z-index: -2; width: auto; max-width: none; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; } #ubicaciones[data-pc-scene] .kc-location__photo img { width: 100%; height: 100%; object-fit: cover; } #ubicaciones[data-pc-scene] .kc-location:nth-child(1) .kc-location__photo img { object-position: center 18%; } #ubicaciones[data-pc-scene] .kc-location:nth-child(2) .kc-location__photo img { object-position: center 40%; } #ubicaciones[data-pc-scene] .kc-location__title { position: relative; z-index: 1; margin: 0; font-family: var(--pc-display); font-size: clamp(28px, 8.4vw, 40px); font-weight: 400; letter-spacing: .2em; padding-left: .2em; line-height: 1.1; text-transform: uppercase; color: #FBF6EC; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } #ubicaciones[data-pc-scene] .kc-location h3 { position: relative; z-index: 1; margin: 16px 0 0; max-width: 20rem; font-family: var(--pc-text); font-size: 25px; font-weight: 600; line-height: 1.2; color: #FBF6EC; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); text-wrap: balance; } #ubicaciones[data-pc-scene] .kc-location__address { position: relative; z-index: 1; margin: 10px 0 0; max-width: 20rem; font-size: 19px; line-height: 1.45; white-space: pre-line; color: #F3EBDD; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } #ubicaciones[data-pc-scene] .kc-location__time { position: relative; z-index: 1; margin: 12px 0 0; font-family: var(--pc-text); font-size: 22px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .1em; text-transform: uppercase; color: #FBF6EC; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } #ubicaciones[data-pc-scene] .kc-map-link { position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 20px 0 0; padding: 6px 6px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: #FBF6EC; font-family: var(--pc-text); font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); } #ubicaciones[data-pc-scene] .kc-map-link::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.7 7-12a7 7 0 1 0-14 0c0 5.3 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.7 7-12a7 7 0 1 0-14 0c0 5.3 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; } #ubicaciones[data-pc-scene] .kc-map-link:hover { background: transparent; color: #E8CF98; } /* VII — the programme on parchment; the afternoon turns to dusk behind; it stays closed behind a diamond until she opens it */ #itinerario[data-pc-scene] .kc-container { max-width: 560px; } #itinerario[data-pc-scene] .kc-schedule { position: relative; gap: 0; padding: 6px 4px 6px 34px; text-align: left; border: 26px solid transparent; border-image: url('../../../assets/page/prop/programa.webp') 100 fill / 26px round; } #itinerario[data-pc-scene] .kc-schedule::before { content: ''; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(#F6E2AE, var(--pc-gold) 30%, var(--pc-gold-mid)); box-shadow: 0 0 6px rgba(232, 200, 130, .9), 0 0 16px rgba(232, 200, 130, .45); transform-origin: top; } /* The diamond floats by itself: no plate, no frame. It is a cut stone, every facet its own gold, a light that crosses it, its shadow breathing on the dusk below. The label takes bone over the dark of the closed section and ink over the open one. */ #itinerario .pc-itin-trigger { display: none; } #itinerario.is-armed .pc-itin-trigger { display: grid; justify-items: center; gap: 4px; min-height: 44px; margin: 0 auto; padding: 4px 28px 10px; border: 0; background: transparent; color: var(--pc-bone); cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } #itinerario.is-armed .pc-itin-trigger:focus:not(:focus-visible) { outline: 0; } #itinerario.is-armed.is-open .pc-itin-trigger { color: var(--pc-ink); } #itinerario .pc-diamond { position: relative; display: block; width: 104px; height: 97px; } #itinerario .pc-diamond svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; } #itinerario .pc-diamond .gem-halo { transform-box: fill-box; transform-origin: center; opacity: .5; } #itinerario .pc-diamond .gem-body polygon { stroke: #4A3510; stroke-opacity: .5; stroke-width: .35; stroke-linejoin: round; } #itinerario .pc-diamond .gem-body .p { fill: url(#pc-gm-p); } #itinerario .pc-diamond .gem-body .l { fill: url(#pc-gm-l); } #itinerario .pc-diamond .gem-body .m, #itinerario .pc-diamond .gem-body .m2 { fill: url(#pc-gm-m); } #itinerario .pc-diamond .gem-body .d { fill: url(#pc-gm-d); } #itinerario .pc-diamond .gem-girdle { fill: none; stroke: #FFF6D8; stroke-opacity: .7; stroke-width: .5; } #itinerario .pc-diamond .gem-lit polygon { fill: #FFFDF2; opacity: 0; } #itinerario .pc-diamond .gem-sweep { fill: #FFFFFF; opacity: 0; transform: translateX(-30px); } #itinerario .pc-diamond .gem-spark { fill: #FFF6D8; transform-box: fill-box; transform-origin: center; } #itinerario .pc-diamond-shadow { position: absolute; left: 50%; bottom: -10px; width: 62%; height: 12px; margin-left: -31%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 6, 2, .55), rgba(10, 6, 2, 0)); } #itinerario .pc-itin-trigger[aria-expanded='true'] .gem-lit polygon { opacity: .3; } #itinerario .pc-itin-trigger[aria-expanded='true'] .gem-halo { opacity: .7; } #itinerario .pc-itin-trigger__label { margin-top: 12px; padding-left: .3em; font-family: var(--pc-display); font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(10, 6, 2, .6); } #itinerario.is-armed.is-open .pc-itin-trigger__label { text-shadow: none; } /* Closed, the dusk takes most of the section so the stone floats on the dark. */ #itinerario .pc-itin-panel { display: grid; grid-template-rows: 1fr; margin-top: 16px; } #itinerario.is-armed .pc-itin-panel { grid-template-rows: 0fr; margin-top: 0; } #itinerario.is-armed.is-open .pc-itin-panel { grid-template-rows: 1fr; margin-top: 16px; } #itinerario .pc-itin-panel__inner { min-height: 0; overflow: hidden; } #itinerario.is-armed .kc-schedule::before { transform: scaleY(0); } #itinerario.is-armed.is-open .kc-schedule::before { transform: scaleY(1); } #itinerario.is-armed .kc-stop { opacity: 0; transform: translateY(10px); } #itinerario.is-armed.is-open .kc-stop { opacity: 1; transform: none; } #itinerario[data-pc-scene] .kc-stop { position: relative; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 11px; border-bottom: 1px solid rgba(138, 106, 44, .2); } #itinerario[data-pc-scene] .kc-stop:last-child { border-bottom: 0; } #itinerario[data-pc-scene] .kc-stop::before { content: ''; position: absolute; left: -25px; top: calc(50% - 5px); width: 9px; height: 9px; background: var(--pc-gold); border: 1px solid var(--pc-gold-mid); transform: rotate(45deg); } /* Horas en Cormorant gruesa: el Bodoni de trazo fino confundía la hora de la misa. */ #itinerario[data-pc-scene] .kc-stop__time { font-family: var(--pc-text); font-size: 20px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--pc-gold-text); white-space: nowrap; } #itinerario[data-pc-scene] .kc-stop__label { font-size: 20px; line-height: 1.38; color: var(--pc-ink); } /* VIII — black tie, shown by themselves; the only warm colours are their palette */ #vestimenta[data-pc-scene] .kc-container { max-width: 620px; } #vestimenta .pc-figurin { position: relative; width: calc(100% + 44px); aspect-ratio: 1186 / 1440; margin: 4px -22px 16px; border: 18px solid transparent; border-image: url('../../../assets/page/prop/pergamino.webp') 110 fill / 18px round; } /* One canvas of 1186 x 1462 source px: her gown is 1066 wide with 60 of air each side; he stands in front of her left flare, his right shoulder ~10 px from hers. */ #vestimenta .pc-figure { position: absolute; bottom: 1.37%; } #vestimenta .pc-figure--h { left: 8.43%; width: 30.86%; aspect-ratio: 366 / 1402; z-index: 1; } #vestimenta .pc-figure--m { left: 5.06%; width: 89.88%; aspect-ratio: 1066 / 1390; z-index: 2; } #vestimenta .pc-figurin::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: 0; height: 5%; z-index: 0; background: radial-gradient(closest-side, rgba(42, 33, 27, .24), rgba(42, 33, 27, 0)); pointer-events: none; } #vestimenta .pc-figure--h .pc-figure__line path { stroke: #14100C; stroke-width: 1.3; } #vestimenta .pc-figure--m .pc-figure__line path { stroke: #3A2A22; stroke-opacity: .7; stroke-width: .9; } #vestimenta .pc-figure__shade, #vestimenta .pc-figure__line, #vestimenta .pc-figure__dress, #vestimenta .pc-figure__deep { position: absolute; inset: 0; width: 100%; height: 100%; } #vestimenta .pc-figure__line { overflow: visible; } #vestimenta .pc-figure__line path { fill: none; stroke: #2A211B; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; } #vestimenta .pc-figure__dress { background-color: var(--pc-dress, #9F5E3B); mix-blend-mode: color; opacity: var(--pc-fade, 1); -webkit-mask: url('../../../assets/page/prop/dress-m-mask.webp') center / 100% 100% no-repeat; mask: url('../../../assets/page/prop/dress-m-mask.webp') center / 100% 100% no-repeat; } #vestimenta .pc-figure__deep { background-color: var(--pc-dress, #9F5E3B); mix-blend-mode: multiply; opacity: calc(var(--pc-fade, 1) * var(--pc-deep, 0)); -webkit-mask: url('../../../assets/page/prop/dress-m-mask.webp') center / 100% 100% no-repeat; mask: url('../../../assets/page/prop/dress-m-mask.webp') center / 100% 100% no-repeat; } #vestimenta [data-pc-phase='idle'] .pc-figure__line path { stroke-dashoffset: var(--pc-from, 1); } #vestimenta [data-pc-phase='idle'] .pc-figure__shade, #vestimenta [data-pc-phase='line'] .pc-figure__shade { opacity: 0; } #vestimenta[data-pc-scene] .kc-swatch[role='button'] { cursor: pointer; } #vestimenta[data-pc-scene] .kc-swatch[aria-pressed='true']::after { width: 34px; height: 2px; background: var(--pc-gold-night); } #vestimenta[data-pc-scene] .kc-body { max-width: 24rem; margin-inline: auto; font-size: 20px; line-height: 1.45; color: var(--pc-bone); } #vestimenta[data-pc-scene] .pc-palette-title { margin: 22px 0 12px; font-family: var(--pc-script); font-size: 40px; font-weight: 400; line-height: 1; color: var(--pc-gold-night); } #vestimenta[data-pc-scene] .kc-swatches { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; max-width: 460px; margin-inline: auto; padding: 4px 0 0; background: none; box-shadow: none; } #vestimenta[data-pc-scene] .kc-swatch { flex: 1 1 0; width: auto; min-width: 0; gap: 8px; } #vestimenta[data-pc-scene] .kc-swatch::after { content: ''; width: 22px; height: 1px; background: var(--pc-gold); } #vestimenta[data-pc-scene] .kc-swatch__drop { --pc-brush: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M90.9 48.7Q91.5 50.0 92.0 51.4Q92.6 52.8 95.2 54.5Q97.8 56.3 95.2 57.4Q92.7 58.5 93.1 60.1Q93.5 61.6 91.6 62.6Q89.8 63.5 90.9 65.4Q92.0 67.4 89.3 67.7Q86.5 68.0 86.5 69.5Q86.4 71.0 84.4 71.3Q82.3 71.6 83.1 73.8Q83.9 76.0 81.5 75.8Q79.1 75.5 79.3 77.5Q79.4 79.4 77.9 79.8Q76.5 80.2 75.9 81.6Q75.4 83.1 73.5 82.8Q71.7 82.5 71.2 84.1Q70.6 85.7 68.5 84.4Q66.4 83.2 66.1 85.6Q65.8 88.1 63.9 86.7Q62.0 85.3 60.9 86.0Q59.9 86.8 58.9 88.1Q57.9 89.5 56.6 90.2Q55.4 91.0 54.1 91.2Q52.7 91.5 51.4 92.3Q50.0 93.1 48.6 92.9Q47.2 92.6 45.8 92.4Q44.4 92.2 43.2 91.4Q41.9 90.6 40.6 90.4Q39.2 90.3 38.0 89.5Q36.9 88.7 35.6 88.3Q34.3 87.9 33.1 87.4Q31.9 86.8 30.8 85.9Q29.8 85.0 28.6 84.4Q27.4 83.8 26.4 82.9Q25.5 82.0 24.6 81.0Q23.7 79.9 23.1 78.7Q22.5 77.5 21.8 76.4Q21.2 75.3 20.6 74.1Q20.0 73.0 19.9 71.6Q19.8 70.2 18.8 69.4Q17.9 68.5 17.4 67.4Q16.8 66.3 16.0 65.4Q15.1 64.4 13.8 63.6Q12.6 62.7 11.9 61.5Q11.2 60.4 10.6 59.2Q10.0 57.9 7.5 56.9Q5.0 55.9 7.1 54.3Q9.2 52.7 7.8 51.3Q6.5 50.0 7.6 48.6Q8.8 47.3 8.2 45.9Q7.5 44.4 8.6 43.2Q9.6 42.0 8.3 40.2Q7.1 38.5 9.2 37.7Q11.3 36.9 10.6 35.1Q9.8 33.4 10.7 32.2Q11.6 31.1 11.1 29.1Q10.5 27.2 12.9 27.0Q15.3 26.8 15.4 25.2Q15.5 23.6 18.2 24.0Q20.9 24.5 20.6 22.3Q20.2 20.2 23.0 21.3Q25.8 22.5 25.2 19.7Q24.6 17.0 26.8 17.7Q29.0 18.5 28.9 16.0Q28.9 13.5 31.0 14.6Q33.1 15.7 33.3 13.0Q33.5 10.3 35.2 10.9Q36.9 11.5 37.7 9.2Q38.4 6.8 40.3 8.7Q42.2 10.6 43.5 10.7Q44.8 10.7 46.1 10.6Q47.4 10.5 48.7 10.4Q50.0 10.4 51.3 10.2Q52.6 10.0 54.0 9.7Q55.3 9.4 56.8 8.9Q58.3 8.3 59.8 8.1Q61.3 8.0 62.5 8.9Q63.7 9.7 64.9 10.5Q66.1 11.2 67.4 11.5Q68.8 11.9 69.6 13.3Q70.4 14.7 71.1 16.0Q71.9 17.3 72.6 18.5Q73.2 19.7 74.2 20.5Q75.1 21.4 76.1 22.1Q77.1 22.9 77.9 23.9Q78.6 24.9 79.6 25.7Q80.5 26.6 81.2 27.6Q81.9 28.7 83.2 29.4Q84.5 30.1 84.5 31.5Q84.6 33.0 85.3 34.0Q86.0 35.1 86.5 36.3Q87.0 37.4 86.8 38.8Q86.7 40.2 87.4 41.3Q88.2 42.4 88.9 43.6Q89.5 44.8 89.9 46.1Q90.3 47.4 90.9 48.7Z'/%3E%3C/svg%3E"); width: 64px; height: 64px; border-radius: 0; box-shadow: none; background-color: var(--kc-swatch); background-image: radial-gradient(55% 50% at 34% 30%, rgba(255, 255, 255, .22), transparent 72%), radial-gradient(60% 60% at 72% 78%, rgba(0, 0, 0, .14), transparent 70%), repeating-linear-gradient(152deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 4px); -webkit-mask: var(--pc-brush) center / contain no-repeat; mask: var(--pc-brush) center / contain no-repeat; } #vestimenta[data-pc-scene] .kc-swatch__label { font-family: var(--pc-text); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--pc-bone); white-space: nowrap; } #vestimenta .pc-orn { color: var(--pc-gold-night); } #vestimenta[data-pc-scene] .pc-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; margin: 20px auto 4px; } #vestimenta[data-pc-scene] .pc-role { display: grid; gap: 6px; margin: 0; padding: 4px 10px; } #vestimenta[data-pc-scene] .pc-role + .pc-role { border-left: 1px solid rgba(226, 194, 124, .45); } #vestimenta[data-pc-scene] .pc-role__who { display: block; font-family: var(--pc-display); font-size: 15px; font-weight: 500; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--pc-gold-night); } #vestimenta[data-pc-scene] .pc-role__what { display: block; font-family: var(--pc-text); font-size: clamp(26px, 7.4vw, 32px); font-weight: 600; line-height: 1.15; color: var(--pc-bone); text-wrap: balance; } #vestimenta[data-pc-scene] .pc-avoid { max-width: 22rem; margin: 20px auto 0; font-size: 19px; line-height: 1.4; color: var(--pc-bone-muted); text-wrap: balance; } #vestimenta[data-pc-scene] .pc-adults { max-width: 26rem; margin: 38px auto 0; padding: 26px 22px 26px; border: 1px solid rgba(226, 194, 124, .7); background: rgba(22, 18, 14, .5); box-shadow: inset 0 0 0 6px rgba(22, 18, 14, .5), inset 0 0 0 7px rgba(226, 194, 124, .28); } #vestimenta[data-pc-scene] .pc-adults__title { margin: 0 0 12px; font-family: var(--pc-display); font-size: clamp(30px, 9vw, 40px); font-weight: 500; letter-spacing: .24em; padding-left: .24em; line-height: 1.1; text-transform: uppercase; color: var(--pc-gold-night); } #vestimenta[data-pc-scene] .pc-adults__text { margin: 0; font-size: 20px; line-height: 1.5; color: var(--pc-bone); text-wrap: pretty; } /* IX — gifts: the open envelope and the note */ #regalos[data-pc-scene] .kc-container { max-width: 620px; } #regalos[data-pc-scene] .pc-gift-title { display: block; margin-bottom: 20px; line-height: 1; } #regalos .pc-gift-title__caps { display: block; font-family: var(--pc-display); font-size: clamp(22px, 6.4vw, 30px); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; color: var(--color-ink); } #regalos .pc-gift-title__script { display: block; margin-top: -.02em; font-family: var(--pc-script); font-size: clamp(56px, 17vw, 78px); font-weight: 400; line-height: 1.05; color: var(--pc-gold-night); } #regalos .pc-gift { position: relative; width: min(64vw, 250px); aspect-ratio: 320 / 380; margin: 0 auto 26px; } #regalos .pc-gift > span { position: absolute; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; } #regalos .pc-gift__back { left: 0; top: 44.7%; width: 100%; height: 55.3%; z-index: 0; background-image: url('../../../assets/page/prop/env-back.webp'); } #regalos .pc-gift__flap { left: 0; top: 15.2%; width: 100%; height: 29.5%; z-index: 1; background-image: url('../../../assets/page/prop/env-flap-open.webp'); } #regalos .pc-gift__letter { left: 15%; top: 8%; width: 70%; height: 62%; z-index: 2; background-color: #FBF6EC; background-image: url('../../../assets/page/prop/papel.webp'); background-size: cover; box-shadow: 0 -2px 10px rgba(20, 12, 4, .25); transform: translateY(34%); } #regalos .pc-gift__letter::before { content: ''; position: absolute; left: 16%; right: 16%; top: 52%; height: 30%; background: repeating-linear-gradient(to bottom, rgba(138, 106, 44, .35) 0 1px, transparent 1px 12px); } #regalos .pc-gift__letter i { position: absolute; left: 50%; top: 20%; width: 24px; height: 24px; margin-left: -12px; background: #8E2F42; transform: rotate(-45deg); box-shadow: 1px 2px 4px rgba(40, 10, 16, .3); } #regalos .pc-gift__letter i::before, #regalos .pc-gift__letter i::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #8E2F42; } #regalos .pc-gift__letter i::before { top: -12px; left: 0; background: radial-gradient(circle at 40% 45%, #B5485C, #8E2F42 65%); } #regalos .pc-gift__letter i::after { top: 0; left: 12px; } #regalos .pc-gift__front { left: 0; top: 44.7%; width: 100%; height: 55.3%; z-index: 3; background-image: url('../../../assets/page/prop/env-front.webp'); } #regalos .pc-gift__seal { left: 50%; top: 72.6%; width: 21%; aspect-ratio: 1; z-index: 4; transform: translate(-50%, -50%); background-image: url('../../../assets/page/prop/seal.webp'); } #regalos .pc-gift.is-visible .pc-gift__letter { transform: none; } #regalos[data-pc-scene] .kc-body:empty { display: none; } #regalos[data-pc-scene] .kc-envelopes { max-width: 26rem; margin-inline: auto; padding-top: 0; border-top: 0; gap: 6px; } #regalos[data-pc-scene] .kc-envelopes h3 { font-family: var(--pc-display); font-size: 22px; font-weight: 400; letter-spacing: .04em; color: var(--pc-gold-night); } #regalos[data-pc-scene] .kc-envelopes p { font-size: 21px; line-height: 1.5; color: var(--pc-bone-muted); } #regalos[data-pc-scene] .kc-envelopes .pc-thanks { margin-top: 12px; font-family: var(--pc-script); font-size: 38px; line-height: 1.1; color: var(--pc-gold-night); } /* X — the reply card: cream paper under the party lights. Inert until KC-Center, and it says so. */ #rsvp[data-pc-scene] .kc-container { max-width: 600px; } #rsvp[data-pc-scene] .pc-rsvp-gate { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) 78px; align-items: end; justify-items: center; margin: -4px 0 12px; } #rsvp .pc-rsvp-gate::before { content: ''; position: absolute; inset: 4% 12% 0; background: radial-gradient(closest-side, rgba(240, 182, 80, .08), rgba(240, 182, 80, 0)); pointer-events: none; } #rsvp .pc-candles { display: block; width: 78px; height: 150px; overflow: visible; } #rsvp[data-pc-scene] .pc-rsvp-gate .kc-eyebrow { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; } #rsvp .pc-rose-mark { flex: 0 0 auto; width: 1.35em; height: 1.35em; } #rsvp[data-pc-scene] .kc-rsvp-deadline:has(span:empty) { display: none; } #rsvp[data-pc-scene] .pc-rsvp-note { max-width: 26rem; margin: 0 auto 16px; font-size: 20px; line-height: 1.5; color: var(--pc-bone-muted); text-wrap: pretty; } #rsvp[data-pc-scene] .kc-rsvp-form { position: relative; padding: 32px 24px 26px; border: 0; border-radius: 2px; background: #FBF6EC url('../../../assets/page/prop/papel.webp') center / cover; box-shadow: var(--pc-lift); color: var(--pc-ink); text-align: left; } #rsvp[data-pc-scene] .kc-rsvp-form::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--pc-gold); pointer-events: none; } #rsvp[data-pc-scene] fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } #rsvp[data-pc-scene] .kc-field > label, #rsvp[data-pc-scene] .kc-rsvp-attendance legend { margin-bottom: 10px; font-family: var(--pc-display); font-size: 22px; font-weight: 400; color: var(--pc-ink); } #rsvp[data-pc-scene] .kc-rsvp-attendance-options { grid-template-columns: minmax(0, 1fr); gap: 10px; } #rsvp[data-pc-scene] .kc-rsvp-attendance-face { min-height: 50px; padding: 10px 16px; border: 1px solid var(--pc-field); border-radius: 0; background: rgba(255, 253, 248, .75); color: var(--pc-ink); font-size: 19px; } #rsvp[data-pc-scene] .kc-rsvp-attendance-option:has(input:checked) .kc-rsvp-attendance-face { background: var(--pc-gold-text); border-color: var(--pc-gold-text); color: #FFFDF8; } #rsvp[data-pc-scene] .kc-rsvp-attendance-option:has(input:disabled) .kc-rsvp-attendance-face { color: var(--pc-muted); cursor: not-allowed; } #rsvp[data-pc-scene] .kc-field input:not([type='radio']), #rsvp[data-pc-scene] .kc-field select { min-height: 50px; border: 1px solid var(--pc-field); border-radius: 0; background: rgba(255, 253, 248, .75); color: var(--pc-ink); font-size: 18px; } #rsvp[data-pc-scene] .kc-field input:not([type='radio']):disabled, #rsvp[data-pc-scene] .kc-field select:disabled { color: var(--pc-muted); -webkit-text-fill-color: var(--pc-muted); opacity: 1; } #rsvp[data-pc-scene] .kc-rsvp-submit { min-height: 50px; border-radius: 0; font-family: var(--pc-text); font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } #rsvp[data-pc-scene] .kc-rsvp-submit:disabled { background: #F3EBDD; border-color: var(--pc-field); color: var(--pc-muted); opacity: 1; } #rsvp[data-pc-scene] .kc-rsvp-attendance-hint, #rsvp[data-pc-scene] .kc-rsvp-decline-note, #rsvp[data-pc-scene] .kc-rsvp-allocation-note, #rsvp[data-pc-scene] .kc-rsvp-status, #rsvp[data-pc-scene] .kc-rsvp-error { margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--pc-muted); } #rsvp[data-pc-scene] .kc-rsvp-status:empty { display: none; } #rsvp[data-pc-scene] .kc-rsvp-error { color: #8A2F2F; } #rsvp[data-pc-scene] .kc-rsvp-offline { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--pc-gold-night); background: rgba(22, 18, 14, .78); font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--pc-bone); text-align: center; } /* XI — the album waits; a polaroid of them says what it will be */ #captura[data-pc-scene] .kc-container { max-width: 560px; } #captura .pc-polaroid { width: 170px; aspect-ratio: 5 / 6; margin: 0 auto 18px; padding: 8px 8px 30px; background: #FFFDF8; box-shadow: var(--pc-lift); transform: rotate(-3deg); } #captura .pc-polaroid img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } #captura[data-pc-scene] h2 { margin-bottom: 10px; } #captura[data-pc-scene] .kc-body { color: var(--pc-bone-muted); } #captura[data-pc-scene] .kc-captura__cta { margin-top: 18px; min-height: 48px; padding: 10px 26px; border: 1px solid var(--pc-bone-muted); border-radius: 0; background: transparent; font-family: var(--pc-text); font-size: 15px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } #captura[data-pc-scene] .kc-captura__cta:disabled { color: var(--pc-bone-muted); -webkit-text-fill-color: var(--pc-bone-muted); opacity: 1; } /* XII — the same wax seal; it lifts and the letter opens with their red night inside */ #secreto[data-pc-scene] .kc-secret { position: relative; max-width: 32rem; margin-inline: auto; } #secreto[data-pc-scene] .kc-secret > summary { gap: 10px; min-height: 44px; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; } #secreto[data-pc-scene] .kc-secret > summary:focus:not(:focus-visible) { outline: 0; } #secreto[data-pc-scene] .kc-secret__seal { position: relative; display: block; width: 108px; height: 108px; border: 0; border-radius: 0; background: none; box-shadow: none; } #secreto .pc-star { display: block; width: 100%; height: 100%; overflow: visible; } /* Her touch sends the star away and the letter takes its place; at 13 s the letter fades (secret-timer.mjs) and the star comes back. */ #secreto[data-pc-scene] .kc-secret[open] > summary { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; transform: scale(.5) rotate(70deg); pointer-events: none; } #secreto[data-pc-scene] .kc-secret.is-leaving .kc-secret__card { opacity: 0; transform: translateY(-8px); } /* The star is the page's one star (#pc-rose in the sprite): clean, with a soft halo, floating over its own small shadow. */ #secreto .pc-star .pc-star-glint { fill: #FFF6D8; transform-box: fill-box; transform-origin: center; } #secreto .pc-star .pc-star-halo { transform-box: fill-box; transform-origin: center; } #secreto .pc-star-shadow { position: absolute; left: 50%; bottom: -12px; width: 52%; height: 10px; margin-left: -26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); } #secreto[data-pc-scene] .kc-secret__hint { font-family: var(--pc-text); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pc-gold-night); } #secreto[data-pc-scene] .kc-secret__card { position: relative; margin-top: 20px; padding: 24px 24px 28px; border: 0; border-radius: 2px; background: #FBF6EC url('../../../assets/page/prop/papel.webp') center / cover; box-shadow: var(--pc-lift); color: var(--pc-ink); text-align: center; } #secreto[data-pc-scene] .kc-secret__card::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--pc-gold); pointer-events: none; } #secreto[data-pc-scene] .kc-secret__card h2 { color: var(--pc-ink); font-size: clamp(27px, 7vw, 34px); margin-bottom: 12px; } #secreto[data-pc-scene] .kc-secret__message { font-family: var(--pc-text); font-style: normal; font-size: 20px; white-space: pre-line; line-height: 1.5; color: var(--pc-ink); } #secreto[data-pc-scene] .kc-secret__signature { margin-top: 14px; font-family: var(--pc-script); font-size: clamp(26px, 7.4vw, 32px); white-space: pre-line; line-height: 1.1; color: var(--pc-gold-text); text-wrap: balance; } @keyframes pc-letter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } /* XIII — the party's last light: their red night under the plate, the signature small */ #kc-footer[data-pc-scene] { --kc-footer-bg: var(--pc-night); --kc-footer-ink: var(--pc-bone); --kc-footer-muted: var(--pc-bone-muted); padding-block: 44px calc(30px + env(safe-area-inset-bottom)); } #kc-footer .pc-footer-photo { position: absolute; inset: 0; z-index: -2; margin: 0; } #kc-footer .pc-footer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } #kc-footer[data-pc-scene] .kc-footer__inner { max-width: 640px; gap: 8px; text-shadow: 0 1px 2px rgba(10, 8, 6, .9), 0 0 14px rgba(10, 8, 6, .85); } #kc-footer[data-pc-scene] .kc-footer__mark { gap: 12px; margin-bottom: 4px; font-family: var(--pc-text); font-size: 14px; font-weight: 700; letter-spacing: .26em; color: var(--pc-bone); } #kc-footer[data-pc-scene] .kc-footer__icon { display: block; width: 34px; height: 34px; border: 0; border-radius: 50%; background: url('../../../assets/page/prop/seal.webp') center / contain no-repeat; } #kc-footer[data-pc-scene] .kc-footer__icon::after { content: none; } #kc-footer[data-pc-scene] .kc-footer__inner p { font-family: var(--pc-text); font-size: 18px; line-height: 1.45; color: var(--pc-bone-muted); } #kc-footer[data-pc-scene] .kc-footer__inner p:first-of-type { color: var(--pc-bone); } #kc-footer[data-pc-scene] .kc-footer__link { min-height: 44px; margin-top: 4px; font-family: 'PC Cormorant', 'Cormorant Garamond', Garamond, Georgia, serif; font-size: 16px; color: var(--pc-bone); text-decoration: underline; text-decoration-color: var(--pc-gold); text-underline-offset: 5px; } #kc-footer[data-pc-scene] :focus-visible { outline: 2px solid var(--pc-bone); outline-offset: 4px; } @media (min-width: 768px) { #hero[data-pc-scene] { padding-block: 48px; background-image: url('../../../assets/page/escena/hero-wide.webp'); background-position: center; } #hero[data-pc-scene] .kc-container { display: grid; min-height: 0; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 48px; align-content: center; align-items: center; } #hero[data-pc-scene] h1.kc-hero__title { margin-top: 0; } #hero[data-pc-scene] .kc-hero__place { margin: 8px 0 0; } #hero .pc-scroll-cue { margin: 10px auto 0; } #hero .pc-envelope { grid-column: 2; grid-row: 1 / span 6; width: min(100%, 400px); margin: 0 auto; } #hero[data-pc-scene] .kc-eyebrow, #hero[data-pc-scene] h1.kc-hero__title, #hero[data-pc-scene] .kc-hero__date, #hero[data-pc-scene] .kc-hero__place, #hero .pc-scroll-cue { grid-column: 1; } #hero[data-pc-scene] .kc-eyebrow { justify-self: center; align-self: end; } #familia[data-pc-scene] #familia-padres { grid-template-columns: repeat(2, minmax(0, 1fr)); } #familia[data-pc-scene] #familia-padrinos { grid-auto-columns: 32%; margin: 0; padding-inline: 0; scroll-padding-inline: 0; } #vestimenta .pc-figurin { width: 520px; margin-inline: auto; } #historia[data-pc-scene] .kc-container { max-width: 980px; } #dedicatoria .pc-plate, #counter .pc-plate, #familia .pc-plate, #historia .pc-plate, #ubicaciones .pc-plate, #itinerario .pc-plate, #vestimenta .pc-plate, #regalos .pc-plate, #rsvp .pc-plate, #captura .pc-plate, #secreto .pc-plate, #kc-footer .pc-plate { object-fit: cover; object-position: center; } #hero[data-pc-scene] { align-content: center; background-size: cover; background-position: center; } } /* every choreographed move lives here, so reduced motion (even toggled mid-visit) lands on still final states */ @media (prefers-reduced-motion: no-preference) { #counter .pc-cal__heart path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .35s; } #counter .pc-cal.is-revealed .pc-cal__heart path { stroke-dashoffset: 0; } #hero .pc-scroll-cue svg { animation: pc-cue 2.4s ease-in-out infinite; } #hero .pc-hero-spark .pc-spark { animation: pc-twinkle 3.8s ease-in-out var(--d) infinite; } #dedicatoria .pc-orn .pc-spark, #vestimenta .pc-orn .pc-spark, #historia .pc-stack-hint .pc-spark { animation: pc-twinkle 3.4s ease-in-out infinite; } #itinerario.is-armed .pc-itin-panel { transition: grid-template-rows 800ms cubic-bezier(.22, 1, .36, 1), margin-top 800ms cubic-bezier(.22, 1, .36, 1); } #itinerario.is-armed .kc-schedule::before { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 200ms; } #itinerario.is-armed .kc-stop { transition: opacity 600ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); } #itinerario.is-armed.is-open .kc-stop { transition-delay: calc(240ms + var(--i, 0) * 90ms); } #historia .kc-photo-stack__card { transition: transform 650ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease; } #counter .pc-cal-save, #counter .pc-cal-save span { transition: box-shadow .3s, transform .3s; } #counter .pc-cal-save:hover span { transform: scale(.94); } #counter .pc-cal-save:active span { transform: scale(.88); } #hero[data-pc-envelope='open'] .pc-env--seal { animation: pc-seal-press 420ms cubic-bezier(.3, 0, .2, 1) both; } #hero[data-pc-envelope='open'] .pc-env--flap-closed { transition: transform 260ms cubic-bezier(.55, 0, .8, .2) 200ms; } #hero[data-pc-envelope='open'] .pc-env--flap-open { transition: transform 320ms cubic-bezier(.2, .8, .3, 1) 460ms; } #hero[data-pc-envelope='open'] .kc-hero__photo { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 640ms; } #hero[data-pc-envelope] .pc-env--flap-open, #hero[data-pc-envelope] .pc-env--flap-closed, #hero[data-pc-envelope] .pc-env--seal, #hero[data-pc-envelope] .kc-hero__photo { will-change: transform, opacity; } #regalos .pc-gift__letter { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 250ms; } #vestimenta [data-pc-phase='line'] .pc-figure__line path { transition: stroke-dashoffset var(--pc-dur, 520ms) linear var(--pc-delay, 0ms); } #vestimenta .pc-figure__shade { transition: opacity 400ms ease; } #itinerario .pc-diamond { animation: pc-gem-float 4.2s ease-in-out infinite; } #itinerario .pc-diamond .gem-halo { animation: pc-gem-breathe 4.2s ease-in-out infinite; } #itinerario .pc-diamond .gem-sweep { animation: pc-gem-sweep 5.2s ease-in-out infinite; } #itinerario .pc-diamond .gem-spark { animation: pc-twinkle 3.2s ease-in-out infinite; } #itinerario .pc-diamond .gem-spark--b { animation-delay: 1.1s; } #itinerario .pc-diamond .gem-spark--c { animation-delay: 2.1s; } #itinerario .pc-diamond-shadow { animation: pc-gem-shadow 4.2s ease-in-out infinite; } #secreto .pc-star { animation: pc-star-float 4.8s ease-in-out infinite; } #secreto .pc-star .pc-star-halo { animation: pc-star-breathe 4.2s ease-in-out infinite; } #secreto .pc-star .pc-star-glint { animation: pc-twinkle 3.2s ease-in-out infinite; } #secreto .pc-star-shadow { animation: pc-star-shade 4.8s ease-in-out infinite; } #rsvp .pc-candles .pc-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pc-flame 2.6s ease-in-out infinite; } #rsvp .pc-candles .pc-flame--1 { animation-duration: 3.1s; animation-delay: -.7s; } #rsvp .pc-candles .pc-flame--2 { animation-duration: 2.3s; animation-delay: -1.2s; } #rsvp .pc-candles .pc-flame--3 { animation-duration: 2.9s; animation-delay: -.3s; } #rsvp .pc-candles .pc-flame--4 { animation-duration: 2.5s; animation-delay: -1.7s; } #rsvp .pc-candles .pc-candle-halo { transform-box: fill-box; transform-origin: center; animation: pc-candle-glow 3.4s ease-in-out infinite; } #secreto[data-pc-scene] .kc-secret > summary { transition: opacity 500ms ease, transform 700ms cubic-bezier(.5, 0, .2, 1), visibility 0s linear 500ms; } #secreto[data-pc-scene] .kc-secret__card { transition: opacity 600ms ease, transform 600ms ease; } #secreto[data-pc-scene] .kc-secret.is-returning > summary { animation: pc-star-return 800ms cubic-bezier(.22, 1, .36, 1) both; } #secreto[data-pc-scene] .kc-secret[open] .kc-secret__card { animation: pc-letter 460ms cubic-bezier(.22, 1, .36, 1) both; } } @keyframes pc-seal-press { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(.9); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes pc-cue { 0%, 100% { transform: translateY(-4px); opacity: .65; } 50% { transform: translateY(6px); opacity: 1; } } @keyframes pc-twinkle { 0%, 100% { opacity: .4; transform: scale(.82) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(14deg); } } @keyframes pc-gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes pc-gem-breathe { 0%, 100% { opacity: .3; transform: scale(.94); } 50% { opacity: .6; transform: scale(1.06); } } @keyframes pc-gem-sweep { 0%, 55% { opacity: 0; transform: translateX(-30px); } 60% { opacity: .55; } 85% { opacity: .55; transform: translateX(130px); } 100% { opacity: 0; transform: translateX(130px); } } @keyframes pc-gem-shadow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } } @keyframes pc-star-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } } @keyframes pc-star-breathe { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .7; transform: scale(1.06); } } @keyframes pc-star-shade { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } @keyframes pc-flame { 0%, 100% { transform: scale(1, 1) translateX(0); opacity: .95; } 25% { transform: scale(.94, 1.07) translateX(.4px); opacity: 1; } 55% { transform: scale(1.04, .92) translateX(-.4px); opacity: .88; } 80% { transform: scale(.97, 1.05) translateX(.3px); opacity: 1; } } @keyframes pc-candle-glow { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .75; transform: scale(1.06); } } @keyframes pc-star-return { from { opacity: 0; transform: scale(.5) rotate(-70deg); } to { opacity: 1; transform: none; } }