/* OP_SAPO_14 · "La noche del Gate". Hero → Footer skin. La clienta: "que toda la temática de colores sea como el inicio". La página baja por la pintura del Gate (fotos/gate.jpg), del sauce a los lotos, repintada a pincelada rota (AniDoodle broken colour, .kc/anidoodle/src/canvas-core/sapoNight.ts). El Hero sigue siendo el último frame de Gate 2; la noche vuelve alrededor de la mancha. Todo vive bajo #kc-main: html, body y #kc-gate no se tocan (gate-freeze). */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 350 650; font-display: swap; src: url("../../assets/font/fraunces-roman.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 350 650; font-display: swap; src: url("../../assets/font/fraunces-italic.woff2") format("woff2"); } #kc-main { /* Colometría medida de fotos/gate.jpg con máscaras (OP_SAPO_14). Primitivos: */ --night-0: #0F1419; --night-1: #1F2B3F; --night-2: #2A3D5D; --indigo: #385895; --indigo-2: #2A4D8F; --leaf: #1F201F; --pad: #2F3632; --willow: #CCA07A; --willow-deep: #AA8465; /* puntas del sauce */ --lantern: #FCBA7B; --lantern-hot: #FFCA91; --amber: #E39F77; --firefly: #FBEFD7; --rose: #B96366; --rose-glow: #F2A08E; /* lotos encendidos */ --sage: #8C9E70; --olive: #60683A; /* el vestido: reservado a la XV añera */ --vellum: #F1E3C4; --vellum-deep: #E2CBA0; /* cartas iluminadas por farol (crema de las flores) */ /* Semánticos: noche como lienzo, vellum como superficie, ámbar como acción, sauce como autoridad. */ --paper: var(--vellum); --paper-lift: #F7ECD6; --paper-deep: var(--vellum-deep); --ink: #1E1712; --ink-soft: #4A3A2C; --olive-ink: #5A5326; --moss: #4F6B3A; --cream: #EED9B3; --cream-ink: #F3E6CC; --cream-soft: rgba(243, 230, 204, .86); --danger: #8E2B22; --focus: var(--lantern-hot); --gold-1: #4E3A10; --gold-2: #8A6620; --gold-3: #E9CF86; --gold-4: #FFF3C8; --gold-5: #C89A3A; --plate-canopy: url("../../assets/plates/night-canopy.webp"); --plate-lagoon: url("../../assets/plates/night-lagoon.webp"); --plate-riverboat: url("../../assets/plates/night-riverboat.webp"); --plate-shore: url("../../assets/plates/night-shore.webp"); --f-display: "Princess Frog", Georgia, serif; --f-text: "Fraunces", Georgia, "Times New Roman", serif; --grain: url("../../assets/plates/paper-grain.webp"); --bloom: url("../../assets/plates/bloom.webp"); --lily-pad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100'%3E%3Cdefs%3E%3CradialGradient id='p' cx='.34' cy='.3' r='.85'%3E%3Cstop offset='0' stop-color='%23B5D26A'/%3E%3Cstop offset='.55' stop-color='%23679841'/%3E%3Cstop offset='1' stop-color='%232F5223'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='75' cy='66' rx='70' ry='22' fill='none' stroke='%23ECC992' stroke-opacity='.45' stroke-width='1.4'/%3E%3Cellipse cx='75' cy='64' rx='62' ry='20' fill='%230E1A24' fill-opacity='.45'/%3E%3Cpath d='M75 52 92 23A62 32 0 1 0 101 25Z' fill='url(%23p)' stroke='%231F2A10' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M22 44C30 28 50 20 74 20' fill='none' stroke='%23DCEFA0' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'/%3E%3Cg stroke='%232F5223' stroke-opacity='.5' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M75 52 24 40M75 52 20 62M75 52 44 80M75 52 92 82M75 52 128 70M75 52 132 46'/%3E%3C/g%3E%3C/svg%3E"); font-family: var(--f-text); font-optical-sizing: auto; color: var(--cream-ink); background: var(--night-1); line-height: 1.6; overflow-x: clip; } /* Móvil (OP14-R2): mientras el Gate se ve, las láminas de escena no le pelean la red a sus videos; cargan al abrir. */ body.kc-locked #kc-main { --plate-canopy: none; --plate-lagoon: none; --plate-riverboat: none; --plate-shore: none; } #kc-main :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } /* Escenas: cada una es un tramo pintado del Gate. Sus bordes se funden con la noche, así el scroll es un solo lago. */ #kc-main .page--dawn, #kc-main .plate--serenade, #kc-main .page--morning, #kc-main .river-head, #kc-main .river, #kc-main .dusk-head, #kc-main .station, #kc-main .itinerary, #kc-main .dresscode, #kc-main .gift, #kc-main .night, #kc-main .captura-momento, #kc-main #sapo-secret.secret-key-finale, #kc-main #kc-footer.bayou-night { background: linear-gradient(180deg, var(--night-1), rgba(31, 43, 63, 0) var(--fade-top, 16%), rgba(31, 43, 63, 0) var(--fade-bottom, 84%), var(--night-1)), var(--fade-x, linear-gradient(transparent, transparent)), var(--veil, linear-gradient(transparent, transparent)), var(--plate) var(--plate-pos, 50% 50%) / var(--plate-size, cover) no-repeat, var(--night-1); } #kc-main .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #kc-main .motif-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } #kc-main .kc-section, #kc-main .kc-story-transition { position: relative; isolation: isolate; border: 0; margin: 0; min-height: 0; } #kc-main h2, #kc-main h3 { font-weight: 400; text-wrap: balance; } #kc-main p { text-wrap: pretty; } /* ───────────────────────── 0 · HERO · El deseo florece ───────────────────────── La flor es el último frame de Gate 2 en la MISMA geometría del stage del Gate: cuando el Gate se desvanece, abajo ya está pintado lo mismo. Luego la luz despierta. */ #kc-main #kc-hero.kc-hero { --mw: min(64vw, 33svh, 19rem); --mh: calc(var(--mw) * 1.296); --cy: 48.4%; position: relative; display: block; height: 100svh; min-height: 0; padding: 0; overflow: hidden; text-align: center; isolation: isolate; /* Exactamente el papel del frame final (sin grano): el bloom no deja rectángulo en pantallas anchas. */ background: #E6DDD2; } #kc-hero .hero-bloom { position: absolute; left: 50%; top: 50%; z-index: 0; width: max(100vw, calc(100svh * 9 / 16)); aspect-ratio: 9 / 16; transform: translate(-50%, -50%); pointer-events: none; } #kc-hero .hero-bloom-plate, #kc-hero .hero-night { width: 100%; height: 100%; max-width: none; } /* La noche vuelve: el Gate repintado a pincelada rota, recortado alrededor de la mancha (tools/derive-night.py). Al abrir no existe (el seam es el mismo cuadro); luego se entinta por el papel y la mancha queda como el claro del lago. */ #kc-hero .hero-night { position: absolute; inset: 0; opacity: 0; } body:not(.kc-locked) #kc-hero .hero-night { opacity: 1; } body:not(.kc-locked) #kc-main #kc-hero.kc-hero { background-color: var(--night-1); } #kc-hero .hero-light { position: absolute; left: 50%; top: var(--cy); width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 248, 226, .95) 0, rgba(250, 233, 198, .62) 16%, rgba(236, 201, 146, .26) 38%, rgba(236, 201, 146, 0) 68%); } #kc-hero .hero-ring { position: absolute; left: 50%; top: var(--cy); width: 34%; aspect-ratio: 2.7; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); border: 1.5px solid rgba(236, 201, 146, .9); box-shadow: 0 0 10px rgba(250, 233, 198, .55), inset 0 0 8px rgba(250, 233, 198, .4); } #kc-hero .kc-hero-content { position: absolute; inset: 0; z-index: 2; display: block; } #kc-hero .kc-eyebrow { position: absolute; left: 0; right: 0; top: calc(var(--cy) - var(--mh) / 2 - 2.9rem); margin: 0 auto; width: fit-content; padding: .1rem .6rem; font: italic 500 clamp(1.15rem, 5vw, 1.5rem) / 1.2 var(--f-text); letter-spacing: .14em; text-transform: none; color: var(--ink-soft); isolation: isolate; } #kc-hero .kc-eyebrow::before { /* Pigmento levantado bajo la etiqueta: se lee sobre el oliva del bloom (medido sobre píxel compuesto). */ content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 15rem; height: 3.2rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 232, 221, .9), rgba(239, 232, 221, .55) 60%, transparent); } #kc-hero .hero-medallion { position: absolute; left: 50%; top: var(--cy); width: var(--mw); transform: translate(-50%, -50%); } #kc-hero .hero-medallion::before { /* Halo de linterna detrás del retrato: la misma luz del centro del bloom. */ content: ""; position: absolute; inset: -18% -22%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(250, 233, 198, .78), rgba(236, 201, 146, .28) 55%, transparent); } #kc-hero .kc-hero-portrait { display: block; width: 100%; height: auto; margin: 0; filter: drop-shadow(0 12px 18px rgba(60, 44, 18, .32)) drop-shadow(0 2px 2px rgba(60, 44, 18, .25)); } #kc-hero .hero-title { position: absolute; left: 50%; width: min(100%, calc(100svh * 9 / 16)); transform: translateX(-50%); top: calc(var(--cy) + var(--mh) / 2 + .2rem); display: grid; justify-items: center; gap: .35rem; padding: .9rem 1rem 1rem; } #kc-hero .hero-title::before { /* Pigmento levantado: el papel respira detrás del nombre para que el oro se lea sobre la flor. */ content: ""; position: absolute; inset: -6% 4% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 232, 221, .86), rgba(239, 232, 221, .6) 55%, transparent); } #kc-hero h1 { margin: 0; font: 400 clamp(3.3rem, 16.5vw, 5.8rem) / .95 var(--f-display); letter-spacing: .03em; background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 16%, var(--gold-3) 31%, var(--gold-4) 38%, var(--gold-5) 46%, #6E5016 60%, #B48A34 78%, #5A4212 100%); background-size: 240% 100%; background-position: 92% 0; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 250, 232, .8)) drop-shadow(0 5px 10px rgba(60, 40, 8, .3)); } #kc-hero h1:focus { outline: none; } #kc-hero .kc-hero-date { margin: 0; display: flex; align-items: center; gap: 0; font: italic 400 clamp(1rem, 4.4vw, 1.2rem) / 1.3 var(--f-text); letter-spacing: .06em; color: var(--ink-soft); } #kc-hero .kc-hero-date::before, #kc-hero .kc-hero-date::after { content: ""; width: 2.2rem; height: 1px; margin-inline: .7rem; background: linear-gradient(90deg, transparent, var(--moss)); } #kc-hero .kc-hero-date::after { transform: scaleX(-1); } #kc-hero .kc-year-hook { white-space: pre; } #kc-main #kc-hero .kc-scroll-link { position: absolute; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%); display: grid; justify-items: center; gap: .15rem; min-width: 7.5rem; min-height: 56px; padding: .35rem 1rem; text-decoration: none; font: 500 .82rem / 1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--olive-ink); } #kc-hero .scroll-drop { width: 1.2rem; height: 1.6rem; color: var(--indigo); } /* Con la noche de vuelta, «Continuar» se enciende como una luciérnaga sobre el agua. */ body:not(.kc-locked) #kc-main #kc-hero .kc-scroll-link { color: var(--cream-ink); text-shadow: 0 1px 8px rgba(15, 20, 25, .95), 0 0 16px rgba(15, 20, 25, .8); } body:not(.kc-locked) #kc-hero .scroll-drop { color: var(--lantern-hot); filter: drop-shadow(0 0 6px rgba(252, 186, 123, .7)); } /* Antes de abrir (body.kc-locked) solo existe la flor: idéntica al último frame del Gate. */ body.kc-locked #kc-hero .kc-eyebrow, body.kc-locked #kc-hero .hero-medallion, body.kc-locked #kc-hero .hero-title, body.kc-locked #kc-hero .kc-scroll-link { opacity: 0; } @media (prefers-reduced-motion: no-preference) { body:not(.kc-locked) #kc-hero .hero-light { animation: hero-light 6.5s cubic-bezier(.2, .7, .2, 1) both, hero-breathe 7s ease-in-out 6.5s infinite; } body:not(.kc-locked) #kc-hero .hero-ring--a { animation: hero-ring 1.9s cubic-bezier(.15, .7, .25, 1) .05s both; } body:not(.kc-locked) #kc-hero .hero-ring--b { animation: hero-ring 1.9s cubic-bezier(.15, .7, .25, 1) .42s both; } body:not(.kc-locked) #kc-hero .hero-medallion { animation: hero-surface 1.5s cubic-bezier(.22, .8, .25, 1) .25s both; } body:not(.kc-locked) #kc-hero .kc-eyebrow { animation: hero-rise 1s ease-out .95s both; } body:not(.kc-locked) #kc-hero h1 { animation: hero-write 1.5s cubic-bezier(.3, .1, .2, 1) 1.1s both, hero-sheen 1.6s ease-in-out 2.6s both; } body:not(.kc-locked) #kc-hero .hero-title::before { animation: hero-lift 1.4s ease-out .9s both; } body:not(.kc-locked) #kc-hero .kc-hero-date { animation: hero-rise .9s ease-out 2.05s both; } body:not(.kc-locked) #kc-hero .kc-scroll-link { animation: hero-rise .9s ease-out 2.5s both; } body:not(.kc-locked) #kc-hero .scroll-drop { animation: drop-bob 2.8s ease-in-out 3.4s infinite; } body:not(.kc-locked) #kc-hero .hero-night { animation: night-return 3.2s cubic-bezier(.35, .05, .25, 1) .9s both; } body:not(.kc-locked) #kc-main #kc-hero.kc-hero { transition: background-color 3.2s ease .9s; } } @keyframes night-return { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-light { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: .62; transform: translate(-50%, -50%) scale(1); } } @keyframes hero-breathe { 0%, 100% { opacity: .62; } 50% { opacity: .82; } } @keyframes hero-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); } } @keyframes hero-surface { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.84); filter: blur(10px) brightness(1.5); clip-path: circle(4% at 50% 50%); } 55% { opacity: 1; filter: blur(2px) brightness(1.15); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; clip-path: circle(80% at 50% 50%); } } @keyframes hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes hero-write { 0% { clip-path: inset(-.2em 100% -.3em -.1em); filter: blur(7px); letter-spacing: .16em; } 60% { filter: blur(1.5px) drop-shadow(0 1px 0 rgba(255, 250, 232, .8)); } 100% { clip-path: inset(-.2em -.2em -.3em -.1em); letter-spacing: .03em; filter: drop-shadow(0 1px 0 rgba(255, 250, 232, .8)) drop-shadow(0 5px 10px rgba(60, 40, 8, .3)); } } @keyframes hero-lift { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-sheen { from { background-position: 92% 0; } to { background-position: 8% 0; } } @keyframes drop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (min-aspect-ratio: 3 / 4) { #kc-hero .hero-bloom { width: calc(100svh * 9 / 16); } /* En pantalla ancha el Gate es una columna: la flor arranca idéntica y luego se expande por el papel. */ #kc-hero .hero-bloom-plate, #kc-hero .hero-night { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); } } @media (min-aspect-ratio: 3 / 4) and (prefers-reduced-motion: no-preference) { body:not(.kc-locked) #kc-hero .hero-bloom { animation: bloom-spread 3.2s cubic-bezier(.2, .7, .2, 1) both; } } @keyframes bloom-spread { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.75); } } @media (min-aspect-ratio: 3 / 4) { #kc-main #kc-hero.kc-hero { --mw: min(38svh, 21rem); } } @media (max-height: 700px) { #kc-main #kc-hero.kc-hero { --mw: min(58vw, 29svh, 17rem); } #kc-hero h1 { font-size: clamp(2.9rem, 14vw, 4.4rem); } } /* ───────────────────────── 1 · Mi deseo · bajo la cortina del sauce ───────────────────────── */ #kc-main .page--dawn { --plate: var(--plate-canopy); --plate-pos: 50% 0; --plate-size: max(100%, 46rem) auto; --fade-top: 0%; --fade-bottom: 92%; padding: clamp(4.5rem, 14vw, 7rem) 1.4rem clamp(4rem, 12vw, 6.5rem); } #kc-main .letter { width: min(100%, 34rem); margin-inline: auto; display: grid; justify-items: center; } #kc-main .letter-bud { width: 4.2rem; height: 2.6rem; color: var(--rose-glow); margin-bottom: .4rem; filter: drop-shadow(0 0 10px rgba(242, 160, 142, .45)); } #kc-main .letter h2 { margin: 0 0 1.4rem; font: italic 400 clamp(2.4rem, 10vw, 3.4rem) / 1.05 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 14px rgba(15, 20, 25, .8); } #kc-main .letter .kc-long-copy { margin: 0; max-width: 32rem; text-align: left; font-size: clamp(1.06rem, 4.3vw, 1.2rem); line-height: 1.75; color: var(--cream-ink); text-shadow: 0 1px 8px rgba(15, 20, 25, .9); } #kc-main .letter .kc-long-copy::first-letter { float: left; margin: .3rem .5rem 0 0; font: 400 3.5em / .8 var(--f-display); color: var(--willow); text-shadow: 0 0 16px rgba(252, 186, 123, .55); } #kc-main .letter-sign { justify-self: end; margin: 1.4rem 0 0; font: 400 1.5rem / 1 var(--f-display); letter-spacing: .06em; color: var(--willow); } /* ───────────────────────── 2 · La serenata · lámina nocturna ───────────────────────── El papel se rasga y abajo está el agua donde se zambulló el sapo del Gate. */ #kc-main .plate--serenade { /* CEO: el fondo debe combinar con los sapos. Noche del bayou ilustrada con el mismo trazo entintado de los personajes; del Gate quedan la paleta índigo, la luz de linterna y las ondas doradas. */ --plate: var(--plate-lagoon); --plate-pos: 50% 18%; --veil: radial-gradient(46% 30% at 50% 50%, rgba(252, 186, 123, .22), transparent 72%); padding: 3.4rem 0 2.4rem; color: var(--cream-ink); text-align: center; overflow: hidden; } /* El agua del escenario entintado se vuelve más fina: el lago pintado del Gate se ve debajo. */ #kc-main .serenade-stage > rect { opacity: .5; } #kc-main .plate-inner { position: relative; width: min(100%, 30rem); margin-inline: auto; padding: 0 1rem; } #kc-main .plate--serenade h2 { margin: 0; font: italic 400 clamp(2rem, 8.6vw, 3rem) / 1.08 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 12px rgba(8, 12, 20, .7); } #kc-main .serenade-lead { /* CEO: «Faltan» no se veía sobre los reflejos. Luz de farol con su propio halo de noche. */ position: relative; width: fit-content; margin: .55rem auto 0; padding: .3rem 1.1rem; isolation: isolate; font: 600 1rem / 1 var(--f-text); letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--lantern-hot); text-shadow: 0 0 10px rgba(252, 186, 123, .45), 0 1px 3px rgba(15, 20, 25, 1), 0 0 14px rgba(15, 20, 25, .95); } #kc-main .serenade-lead::before { content: ""; position: absolute; inset: -.4rem -1.6rem; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 20, 25, .82), rgba(15, 20, 25, .5) 60%, transparent); } #kc-main .serenade-scene { position: relative; width: calc(100% + 2rem); margin: .2rem -1rem 0; aspect-ratio: 390 / 410; /* CEO: el contador va justo arriba de los sapos. Columna al fondo de la escena; las vides y el agua son el fondo. */ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } #kc-main .serenade-stage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } #kc-main .serenade { /* Los sapos, a escala de escena (no gigantes): los pies sobre los dos nenúfares del escenario. */ position: relative; flex: none; width: min(50%, 12.5rem); aspect-ratio: 591 / 588; margin-bottom: 10.6%; } #kc-main .serenade > svg { display: block; width: 100%; height: 100%; overflow: visible; } #kc-main .serenade::before { /* Linterna detrás del dueto: respira con cada rasgueo (--serenade-beat lo publica serenade.mjs). */ content: ""; position: absolute; z-index: -1; left: 50%; top: 36%; width: 120%; aspect-ratio: 1.3; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: calc(.5 + var(--serenade-beat, 0) * .3); background: radial-gradient(closest-side, rgba(250, 233, 198, .42), rgba(236, 201, 146, .14) 55%, transparent); } /* Luciérnagas leves alrededor del dueto (CEO OP14-R2): vida del entorno, nunca encima de las cifras. */ #kc-main .serenade-firefly { position: absolute; z-index: 0; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; background: var(--firefly); box-shadow: 0 0 6px 2px rgba(255, 210, 150, .6), 0 0 16px 6px rgba(252, 186, 123, .18); opacity: .45; } #kc-main .serenade-firefly:nth-of-type(1) { left: 14%; top: 58%; } #kc-main .serenade-firefly:nth-of-type(2) { left: 26%; top: 74%; width: 3px; height: 3px; } #kc-main .serenade-firefly:nth-of-type(3) { left: 71%; top: 55%; } #kc-main .serenade-firefly:nth-of-type(4) { left: 84%; top: 70%; width: 3px; height: 3px; } #kc-main .serenade-firefly:nth-of-type(5) { left: 48%; top: 46%; width: 3px; height: 3px; } #kc-main .serenade-firefly:nth-of-type(6) { left: 62%; top: 84%; } @media (prefers-reduced-motion: no-preference) { #kc-main .serenade-firefly { will-change: transform, opacity; animation: serenade-firefly 6.8s ease-in-out infinite; } #kc-main .serenade-firefly:nth-of-type(2) { animation-duration: 8.2s; animation-delay: -2.4s; } #kc-main .serenade-firefly:nth-of-type(3) { animation-duration: 7.4s; animation-delay: -4.1s; } #kc-main .serenade-firefly:nth-of-type(4) { animation-duration: 9s; animation-delay: -1.3s; } #kc-main .serenade-firefly:nth-of-type(5) { animation-duration: 7.9s; animation-delay: -5.6s; } #kc-main .serenade-firefly:nth-of-type(6) { animation-duration: 8.6s; animation-delay: -3.2s; } } @keyframes serenade-firefly { 0%, 100% { transform: translate(0, 0); opacity: .12; } 25% { opacity: .7; } 50% { transform: translate(10px, -14px); opacity: .45; } 75% { transform: translate(-6px, -5px); opacity: .75; } } #kc-main .kc-countdown-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; order: -1; width: 100%; max-width: 25rem; margin: 0 auto .9rem; padding: 0 1.2rem; } #kc-main .lily-count { min-height: 0; display: grid; justify-items: center; align-content: start; gap: .15rem; padding: 0; border: 0; } #kc-main .lily-count .kc-count-value { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; min-width: 0; padding-bottom: .2rem; background: var(--lily-pad) 50% 60% / 100% auto no-repeat; font: 400 clamp(1.8rem, 8vw, 2.5rem) / 1 var(--f-display); font-variant-numeric: tabular-nums; color: #FFF3D2; /* Contorno de tinta como los sapos: el número se lee sobre cualquier hoja. */ text-shadow: 1px 1px 0 #1F2A10, -1px 1px 0 #1F2A10, 1px -1px 0 #1F2A10, -1px -1px 0 #1F2A10, 0 2px 0 #1F2A10, 0 0 12px rgba(250, 233, 198, .45); } #kc-main .lily-count:nth-child(1) .kc-count-value { rotate: -4deg; } #kc-main .lily-count:nth-child(2) .kc-count-value { rotate: 3deg; } #kc-main .lily-count:nth-child(3) .kc-count-value { rotate: -2deg; } #kc-main .lily-count:nth-child(4) .kc-count-value { rotate: 5deg; } #kc-main .lily-count:nth-child(1) .kc-count-value::after { /* Un capullo de loto en la primera hoja: el pink del Gate en miniatura. */ content: ""; position: absolute; right: 2%; top: 4%; width: 26%; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28C9 26 6 19 9 11c3 3 6 9 7 17Z' fill='%23E9849D' stroke='%231F2A10' stroke-width='1.2'/%3E%3Cpath d='M16 28c7-2 10-9 7-17-3 3-6 9-7 17Z' fill='%23E9849D' stroke='%231F2A10' stroke-width='1.2'/%3E%3Cpath d='M16 28C12 21 12 12 16 5c4 7 4 16 0 23Z' fill='%23F7C1CE' stroke='%231F2A10' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; } #kc-main .kc-count-label { font: 500 .72rem / 1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-ink); text-shadow: 0 1px 2px rgba(8, 12, 20, .8); } @media (prefers-reduced-motion: no-preference) { #kc-main .lily-count .kc-count-value { animation: pad-float 4.6s ease-in-out infinite; } #kc-main .lily-count:nth-child(2) .kc-count-value { animation-delay: -1.2s; } #kc-main .lily-count:nth-child(3) .kc-count-value { animation-delay: -2.5s; } #kc-main .lily-count:nth-child(4) .kc-count-value { animation-delay: -3.6s; } } @keyframes pad-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } #kc-main .plate--serenade .kc-status:empty { display: none; } #kc-main .plate--serenade .kc-status { color: var(--cream-ink); } /* ───────────────────────── 3 · Mi familia · pliego con sello ───────────────────────── */ #kc-main .page--morning { --plate: var(--plate-canopy); --plate-pos: 50% 100%; padding: clamp(4.8rem, 14vw, 7rem) 1.4rem clamp(4rem, 12vw, 6rem); text-align: center; } #kc-main .family { width: min(100%, 44rem); margin-inline: auto; } #kc-main .family h2 { margin: 0 0 .9rem; font: italic 400 clamp(2.3rem, 9.5vw, 3.3rem) / 1.05 var(--f-text); color: var(--cream-ink); } #kc-main .family .kc-long-copy { margin: 0 auto; max-width: 30rem; font-size: 1.06rem; line-height: 1.7; color: var(--cream-soft); } #kc-main .kc-family-groups { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; margin-top: 2.2rem; } #kc-main .family-leaf { width: min(100%, 20rem); padding: 1.6rem 1.2rem 1.4rem; /* Vellum iluminado por farol: la luz entra por arriba a la izquierda, como en el Gate. */ color: var(--ink); background: radial-gradient(90% 70% at 18% 0%, rgba(255, 220, 170, .55), transparent 62%), linear-gradient(180deg, var(--vellum), var(--vellum-deep)), var(--grain) 0 0 / 256px repeat; background-blend-mode: normal, normal, multiply; box-shadow: 0 1px 0 rgba(255, 246, 226, .7) inset, 0 22px 36px -20px rgba(0, 0, 0, .75), 0 0 34px -10px rgba(252, 186, 123, .35); border-radius: 2px; } #kc-main .family-leaf h3 { margin: 0 0 .7rem; font: 500 .78rem / 1 var(--f-text); letter-spacing: .26em; text-transform: uppercase; color: var(--moss); } #kc-main .family-leaf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; } #kc-main .family-leaf li { font: italic 400 clamp(1.3rem, 5.6vw, 1.55rem) / 1.3 var(--f-text); color: var(--ink); } #kc-main .family-seal { width: 3.4rem; height: 3.4rem; margin: -.9rem 0; position: relative; z-index: 1; filter: drop-shadow(0 4px 6px rgba(60, 40, 8, .35)); } @media (min-width: 640px) { #kc-main .kc-family-groups { grid-template-columns: 1fr auto 1fr; align-items: center; } #kc-main .family-seal { margin: 0 -1rem; } } /* ───────────────────────── 4 · El río de mis recuerdos ───────────────────────── */ #kc-main .river-head { --plate: var(--plate-lagoon); --plate-pos: 50% 0; --plate-size: max(100%, 40rem) auto; --fade-bottom: 100%; --veil: linear-gradient(180deg, rgba(15, 20, 25, .2), rgba(15, 20, 25, .55)); min-height: 0; display: grid; justify-items: center; gap: .3rem; padding: 4.6rem 1.4rem 1.4rem; text-align: center; } #kc-main .river-ripple { width: 7rem; height: 2.8rem; color: var(--lantern); } #kc-main .river-head h2 { margin: 0; max-width: 16ch; font: italic 400 clamp(2.1rem, 9vw, 3.2rem) / 1.05 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 14px rgba(15, 20, 25, .9); } #kc-main .river-head p { margin: 0; color: var(--cream-ink); font-size: 1rem; text-shadow: 0 1px 8px rgba(15, 20, 25, .95); } #kc-main .river { /* Las cartas van a la deriva sobre el agua del Gate: nenúfares y barras de luz debajo. */ --plate: var(--plate-lagoon); --plate-pos: 50% 100%; --fade-top: 0%; --veil: linear-gradient(180deg, rgba(15, 20, 25, .45), rgba(15, 20, 25, .3) 60%, rgba(15, 20, 25, .4)); padding: 1rem 0 3.6rem; } #kc-main .river-inner { width: 100%; max-width: 72rem; margin-inline: auto; } #kc-main .bayou-story-hint { margin: 0 auto 1rem; padding: 0 1.4rem; text-align: center; font: italic 1rem/1.4 var(--f-text); color: var(--cream-ink); text-shadow: 0 1px 8px rgba(15, 20, 25, .95); } #kc-main .bayou-story-track { display: flex; align-items: center; gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 11vw; padding: .8rem 11vw 1.6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #kc-main .bayou-story-track::-webkit-scrollbar { display: none; } #kc-main .bayou-story-track:focus-visible { outline-offset: -4px; } #kc-main .kc-story-chapter, #kc-main .kc-story-chapter .kc-story-photos { display: contents; } #kc-main .kc-story-chapter > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } #kc-main .bayou-story-card { flex: 0 0 min(78vw, 21rem); scroll-snap-align: start; margin: 0; padding: .9rem .9rem 1.1rem; display: grid; gap: .7rem; align-content: start; position: relative; color: var(--ink); background: radial-gradient(80% 50% at 20% 0%, rgba(255, 220, 170, .5), transparent 60%), linear-gradient(180deg, var(--vellum), var(--vellum-deep)), var(--grain) 0 0 / 256px repeat; background-blend-mode: normal, normal, multiply; border-radius: 3px; box-shadow: 0 26px 34px -20px rgba(0, 0, 0, .8), 0 2px 0 rgba(255, 246, 226, .55) inset, 0 0 40px -14px rgba(252, 186, 123, .4); transform: rotate(var(--tilt, 0deg)); } #kc-main .bayou-story-card:nth-child(odd) { --tilt: -.6deg; } #kc-main .bayou-story-card:nth-child(even) { --tilt: .7deg; } #kc-main .bayou-card-heading { display: flex; align-items: center; gap: .55rem; font: 500 .78rem / 1.2 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--moss); } #kc-main .bayou-card-heading::before { content: ""; width: 1.6rem; height: 1.2rem; flex: none; background: currentColor; -webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat; } #kc-main [data-story-motif="cradle"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 2.5S3.5 14 3.5 20.2a8.5 8.5 0 0 0 17 0C20.5 14 12 2.5 12 2.5Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); } #kc-main [data-story-motif="lily"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 24 24 4.5A19.5 19.5 0 1 0 40.6 13.8Z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); } #kc-main [data-story-motif="willow"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4'%3E%3Cellipse cx='50' cy='20' rx='46' ry='16'/%3E%3Cellipse cx='50' cy='20' rx='22' ry='7'/%3E%3C/g%3E%3C/svg%3E"); } #kc-main [data-story-motif="lantern"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='5' r='3'/%3E%3Cpath d='M10 10h12l-2 4h-8ZM9.5 14h13c3 8 3 17 0 24h-13c-3-7-3-16 0-24ZM11 38h10l1 4H10Z'/%3E%3C/g%3E%3C/svg%3E"); } #kc-main [data-story-motif="bloom"] { --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M32 34C20 36 9 31 4 22c10-1 21 5 28 12ZM32 34c12 2 23-3 28-12-10-1-21 5-28 12ZM32 5c6 8 6 21 0 29-6-8-6-21 0-29Z'/%3E%3C/g%3E%3C/svg%3E"); } #kc-main .bayou-story-card img { display: block; width: 100%; height: auto; object-fit: contain; border: 0; border-radius: 2px; -webkit-mask: var(--deckle-photo) center / 100% 100% no-repeat; mask: var(--deckle-photo) center / 100% 100% no-repeat; } #kc-main { --deckle-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.2 1.6 8 .8l9 .9 8-.7 9 .6 8-.8 9 .7 9-.6 8 .8 9-.7 8 .6 7-.4 .6 7-.7 9 .8 8-.6 9 .7 9-.8 8 .6 9-.7 8 .8 9-.6 8 .4 7-7 .6-9-.7-8 .8-9-.6-9 .7-8-.8-9 .6-8-.7-9 .8-8-.6-7 .4-.6-7 .7-9-.8-8 .6-9-.7-9 .8-8-.6-9 .7-8-.8-9 .6-8Z'/%3E%3C/svg%3E"); } #kc-main .bayou-story-card figcaption { padding: 0; font: italic 400 1rem / 1.45 var(--f-text); color: var(--ink-soft); } /* CEO: la historia solo lleva el título del capítulo, debajo de la foto (el caption sigue en el DOM). */ #kc-main .bayou-story-card figcaption { display: none; } #kc-main .bayou-story-controls { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: .4rem; } #kc-main .bayou-story-controls button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid rgba(252, 186, 123, .55); color: var(--cream-ink); background: radial-gradient(circle at 40% 35%, rgba(56, 88, 149, .7), rgba(15, 20, 25, .82)); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8), 0 0 18px -6px rgba(252, 186, 123, .45); transition: transform 140ms ease, background 140ms ease; } #kc-main .bayou-story-controls svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #kc-main .bayou-story-controls button:active:not(:disabled) { transform: scale(.94); } #kc-main .bayou-story-controls button:disabled { opacity: .38; cursor: default; } #kc-main .bayou-story-count { min-width: 3.6rem; text-align: center; font: 400 1.25rem / 1 var(--f-display); letter-spacing: .08em; color: var(--cream-ink); } /* ───────────────────────── 5 · El gran día · dos faroles en el río ───────────────────────── */ #kc-main .dusk-head { /* El barco-palacio del Gate, encendido: el gran día se anuncia con sus luces. */ --plate: var(--plate-riverboat); --plate-pos: 50% 34%; --plate-size: max(100%, 34rem) auto; --fade-top: 10%; --fade-bottom: 100%; --veil: radial-gradient(70% 60% at 50% 55%, rgba(15, 20, 25, .5), transparent 80%); min-height: 0; display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 4.2rem 1.4rem 2.6rem; text-align: center; } #kc-main .dusk-head h2 { margin: 0; font: italic 400 clamp(2.4rem, 10vw, 3.6rem) / 1 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 16px rgba(15, 20, 25, .95); } #kc-main .dusk-head p { margin: 0; font: 600 .82rem / 1.4 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--lantern-hot); text-shadow: 0 1px 2px rgba(15, 20, 25, 1), 0 0 12px rgba(15, 20, 25, .95); } #kc-main .station { padding: 1.6rem 1.4rem 3rem; color: var(--cream-ink); } #kc-main .station--misa { --plate: var(--plate-riverboat); --plate-pos: 50% 100%; --fade-top: 0%; } #kc-main .station--fiesta { --plate: var(--plate-shore); --plate-pos: 50% 0; --veil: linear-gradient(rgba(15, 20, 25, .25), rgba(15, 20, 25, .25)); } #kc-main .station-inner { position: relative; width: min(100%, 30rem); margin-inline: auto; padding-left: 4.4rem; text-align: left; } #kc-main .station-inner::before { /* El río que une las dos estaciones: una línea punteada de luz. */ content: ""; position: absolute; left: 1.55rem; top: 4rem; bottom: -3rem; width: 2px; background: repeating-linear-gradient(180deg, rgba(250, 233, 198, .9) 0 6px, transparent 6px 14px); } #kc-main .station--fiesta .station-inner::before { bottom: auto; height: 0; } #kc-main .station-lantern { position: absolute; left: .4rem; top: .2rem; width: 2.4rem; height: 3.6rem; color: var(--lantern-hot); overflow: visible; filter: drop-shadow(0 0 14px rgba(252, 186, 123, .95)) drop-shadow(0 0 30px rgba(227, 159, 119, .7)); } #kc-main .station h2 { margin: .5rem 0 .7rem; font: 400 clamp(1.9rem, 8vw, 2.4rem) / 1 var(--f-display); letter-spacing: .1em; } #kc-main .station h3 { margin: 0 0 .2rem; font: italic 500 clamp(1.25rem, 5.4vw, 1.45rem) / 1.3 var(--f-text); } #kc-main .station h2, #kc-main .station h3 { text-shadow: 0 2px 12px rgba(15, 20, 25, .9); } #kc-main .station-address { margin: 0; max-width: 24rem; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: .04em; color: var(--cream-ink); text-shadow: 0 1px 8px rgba(15, 20, 25, .95); } #kc-main .station-photo { /* Postal de la sede: borde deckle de las fotos del río, velo cálido para asentarla sobre el papel crepuscular. */ position: relative; width: min(100%, 19rem); margin: .9rem 0 .8rem; rotate: -1.2deg; filter: drop-shadow(0 14px 14px rgba(26, 18, 10, .45)); } #kc-main .station--fiesta .station-photo { rotate: 1.1deg; } #kc-main .station-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; -webkit-mask: var(--deckle-photo) center / 100% 100% no-repeat; mask: var(--deckle-photo) center / 100% 100% no-repeat; filter: saturate(.8) brightness(.92); } #kc-main .station--misa .station-photo img { object-position: 50% 30%; } #kc-main .station-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(252, 186, 123, .26), rgba(42, 61, 93, .3)); -webkit-mask: var(--deckle-photo) center / 100% 100% no-repeat; mask: var(--deckle-photo) center / 100% 100% no-repeat; } #kc-main .station .kc-link-action { margin: 1rem .5rem 0 0; min-height: 48px; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid rgba(252, 186, 123, .8); background: rgba(15, 20, 25, .55); color: var(--cream-ink); font: 500 .95rem var(--f-text); box-shadow: 0 0 18px -6px rgba(252, 186, 123, .5); } /* ───────────────────────── 6 · Itinerario · un sendero de nenúfares ───────────────────────── Una luz baja por el agua al ritmo del scroll (keepsakes.mjs publica --trail) y enciende cada hoja al llegar. En la última, el Vals, los dos sapitos (refes/sapos-sentados.png, repintado sin tramado por tools/matte-sapos.py). */ #kc-main .itinerary { --plate: var(--plate-lagoon); --plate-pos: 50% 94%; --veil: linear-gradient(180deg, rgba(15, 20, 25, .55), rgba(15, 20, 25, .4) 55%, rgba(15, 20, 25, .3)); padding: 4.4rem 1.2rem 3.4rem; text-align: center; } #kc-main .itinerary-inner { width: min(100%, 24rem); margin-inline: auto; } #kc-main .itinerary h2 { margin: 0; font: italic 400 clamp(2.4rem, 10vw, 3.4rem) / 1.05 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 14px rgba(15, 20, 25, .9); } #kc-main .itinerary-path { --rail: 2.9rem; position: relative; margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; } #kc-main .itinerary-path::before, #kc-main .itinerary-path::after { content: ""; position: absolute; left: var(--rail); pointer-events: none; } #kc-main .itinerary-path::before { /* El reflejo de una luz sobre el agua, en barras como el broken colour del Gate. */ top: 1.2rem; bottom: 1.2rem; width: 3px; margin-left: -1.5px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(255, 202, 145, .95) 0 9px, rgba(252, 186, 123, .25) 9px 13px, rgba(255, 202, 145, .8) 13px 18px, transparent 18px 24px); filter: drop-shadow(0 0 5px rgba(252, 186, 123, .8)); transform: scaleY(var(--trail, 1)); transform-origin: 50% 0; } #kc-main .itinerary-path::after { /* La punta de la luz: una luciérnaga que guía el sendero. */ top: calc(1.2rem + (100% - 2.4rem) * var(--trail, 1)); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 10px 4px rgba(255, 210, 150, .75), 0 0 26px 10px rgba(252, 186, 123, .3); opacity: 0; } #kc-main .itinerary-path.is-armed:not(.is-done)::after { opacity: 1; } #kc-main .itinerary-stop { position: relative; isolation: isolate; display: grid; grid-template-columns: calc(var(--rail) * 2) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .9rem; align-items: center; text-align: left; } #kc-main .itinerary-stop::before { /* Sombra de lectura: la noche se espesa detrás de cada hora para que no se pierda entre los reflejos. */ content: ""; position: absolute; z-index: -1; left: calc(var(--rail) * 2 - .6rem); right: -.8rem; top: -.5rem; bottom: -.5rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 20, 25, .78), rgba(15, 20, 25, .45) 62%, transparent); } #kc-main .itinerary-pad { position: relative; grid-row: 1 / 3; width: 100%; aspect-ratio: 320 / 150; background: url("../../assets/plates/night-pad.webp") center / contain no-repeat; filter: brightness(1.35) saturate(1.1) drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(252, 186, 123, .3)); } #kc-main .itinerary-stop:nth-child(odd) .itinerary-pad { rotate: -5deg; margin-left: -.3rem; } #kc-main .itinerary-stop:nth-child(even) .itinerary-pad { rotate: 6deg; margin-left: .3rem; transform: scaleX(-1); } #kc-main .itinerary-pad::after { /* Un loto encendido en cada hoja: el rosa del Gate, con su corazón de linterna. */ content: ""; position: absolute; left: 50%; top: 42%; width: 1.5rem; aspect-ratio: 1; margin: -.75rem 0 0 -.75rem; border-radius: 50%; background: radial-gradient(circle, #FFE3BC 0 18%, var(--rose-glow) 34%, rgba(185, 99, 102, .55) 56%, transparent 72%); box-shadow: 0 0 18px 4px rgba(252, 186, 123, .35); } #kc-main .itinerary-stop time, #kc-main .itinerary-when { grid-column: 2; justify-self: start; align-self: end; font: 400 clamp(1.75rem, 7.8vw, 2.25rem) / 1 var(--f-display); letter-spacing: .03em; color: var(--lantern-hot); text-shadow: 0 0 12px rgba(252, 186, 123, .4), 0 1px 2px rgba(15, 20, 25, 1), 0 2px 10px rgba(15, 20, 25, .95); } #kc-main .itinerary-when time { font: inherit; color: inherit; text-shadow: inherit; } #kc-main .itinerary-when { font-size: clamp(1.45rem, 6.4vw, 1.85rem); } #kc-main .itinerary-to { font: italic 400 .62em / 1 var(--f-text); color: var(--cream-ink); } #kc-main .itinerary-what { grid-column: 2; justify-self: start; align-self: start; margin-top: .3rem; font: italic 500 clamp(1.12rem, 4.9vw, 1.32rem) / 1.25 var(--f-text); color: var(--cream-ink); text-shadow: 0 1px 2px rgba(15, 20, 25, 1), 0 1px 10px rgba(15, 20, 25, .95); } #kc-main .itinerary-stop--vals .itinerary-what { font-size: clamp(1.4rem, 6vw, 1.7rem); color: var(--rose-glow); } /* Armado por keepsakes.mjs: la hoja espera a oscuras hasta que la luz la alcanza. Sin JS o con reduced motion, todo se ve. */ #kc-main .itinerary-path.is-armed .itinerary-stop { opacity: .16; transform: translateY(12px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); } #kc-main .itinerary-path.is-armed .itinerary-stop.is-lit { opacity: 1; transform: none; } #kc-main .itinerary-path.is-armed .itinerary-pad::after { opacity: .3; transition: opacity .8s ease .15s, box-shadow .8s ease .15s; } #kc-main .itinerary-path.is-armed .is-lit .itinerary-pad::after { opacity: 1; box-shadow: 0 0 22px 7px rgba(252, 186, 123, .5); } #kc-main .itinerary-frogs { /* Los sapitos se sientan en su propia hoja: el img pinta la hoja detrás, bajo sus patas. */ display: block; width: min(78%, 19rem); height: auto; margin: 1rem auto 0; padding: 0 6% 9%; background: url("../../assets/plates/night-pad.webp") 50% 100% / 100% auto no-repeat; filter: drop-shadow(0 0 22px rgba(252, 186, 123, .25)); } @media (prefers-reduced-motion: no-preference) { #kc-main .itinerary-pad { animation: pad-drift 6.4s ease-in-out infinite; } #kc-main .itinerary-stop:nth-child(2) .itinerary-pad { animation-delay: -1.6s; } #kc-main .itinerary-stop:nth-child(3) .itinerary-pad { animation-delay: -3.2s; } #kc-main .itinerary-stop:nth-child(4) .itinerary-pad { animation-delay: -4.8s; } } @keyframes pad-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } /* ───────────────────────── 6b · Código de vestimenta · en la orilla de los lotos ───────────────────────── Pareja tipográfica; el asterisco lleva a las dos hojas reservadas: el sage y el olivo del vestido del Gate. */ #kc-main .dresscode { --plate: var(--plate-shore); --plate-pos: 50% 100%; --fade-bottom: 100%; --veil: linear-gradient(180deg, rgba(15, 20, 25, .1), rgba(15, 20, 25, .45) 46%, rgba(15, 20, 25, .1)); padding: 4.4rem 1.4rem clamp(9rem, 40vw, 13rem); text-align: center; } #kc-main .dresscode-inner { width: min(100%, 26rem); margin-inline: auto; } #kc-main .dresscode h2 { margin: 0 0 2rem; font: italic 400 clamp(2.2rem, 9.4vw, 3.2rem) / 1.05 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 14px rgba(15, 20, 25, .9); } #kc-main .dresscode-pair { /* CEO: que resalte un poco más, sin exagerar: luz de farol y un brillo cálido suave. */ margin: 0; display: grid; justify-items: center; gap: .15rem; font: italic 500 clamp(1.9rem, 8.5vw, 2.6rem) / 1.15 var(--f-text); color: var(--lantern-hot); text-shadow: 0 0 18px rgba(252, 186, 123, .32), 0 1px 2px rgba(15, 20, 25, 1), 0 2px 12px rgba(15, 20, 25, .95); } #kc-main .dresscode-and { font: 500 .8rem / 1.6 var(--f-text); letter-spacing: .32em; text-transform: uppercase; color: var(--lantern); font-style: normal; } #kc-main .dresscode-mark { color: var(--lantern-hot); font-style: normal; } #kc-main .dresscode-reserved { display: flex; justify-content: center; gap: 2.2rem; margin: 2rem 0 1.1rem; } #kc-main .dresscode-swatch { position: relative; display: grid; justify-items: center; width: 5.2rem; aspect-ratio: 1; background: center / contain no-repeat; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); } #kc-main .dresscode-swatch--sage { background-image: url("../../assets/plates/night-swatch-sage.webp"); rotate: -6deg; } #kc-main .dresscode-swatch--olivo { background-image: url("../../assets/plates/night-swatch-olivo.webp"); rotate: 7deg; } #kc-main .dresscode-swatch::after { content: attr(data-name); position: absolute; top: calc(100% + .45rem); white-space: nowrap; rotate: inherit; font: 500 .74rem / 1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-ink); text-shadow: 0 1px 6px rgba(15, 20, 25, .95); } #kc-main .dresscode-swatch--sage::after { rotate: 6deg; } #kc-main .dresscode-swatch--olivo::after { rotate: -7deg; } #kc-main .dresscode-note { margin: 2.2rem auto 0; max-width: 21rem; font: italic 400 1.04rem / 1.55 var(--f-text); color: var(--cream-ink); text-shadow: 0 1px 8px rgba(15, 20, 25, .95); } #kc-main .dresscode-note .dresscode-mark { margin-right: .15rem; } /* ───────────────────────── 7 · Un detalle · sobre con sello ───────────────────────── */ #kc-main .gift { /* El sobre flota bajo el cielo del sauce, entre luciérnagas. */ --plate: var(--plate-canopy); --plate-pos: 50% 62%; --fade-top: 0%; padding: 3.6rem 1.4rem 4.4rem; text-align: center; color: var(--cream-ink); } #kc-main .gift { overflow: hidden; } #kc-main .gift-inner { position: relative; z-index: 1; display: grid; justify-items: center; } /* Lluvia de sobres: mini sobres de verdad (cuerpo vellum, solapa y sello ámbar, solo rellenos) cayendo por la noche. */ #kc-main .gift-rain { position: absolute; inset: 0; z-index: 0; pointer-events: none; } #kc-main .gift-rain i { position: absolute; top: var(--y, 10%); left: var(--x, 50%); width: calc(2.4rem * var(--s, 1)); aspect-ratio: 1.45; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 20'%3E%3Crect width='29' height='20' rx='1.6' fill='%23F1E3C4'/%3E%3Cpath d='M0 20 14.5 9.5 29 20Z' fill='%23E2CBA0'/%3E%3Cpath d='M0 0h29L14.5 12.5Z' fill='%23D9BC8A'/%3E%3Ccircle cx='14.5' cy='11.6' r='2.6' fill='%23E39F77'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); opacity: .8; rotate: var(--r, 0deg); } #kc-main .gift-rain i:nth-child(1) { --x: 8%; --y: 12%; --s: .9; --r: -14deg; --d: 9s; --t: -1s; } #kc-main .gift-rain i:nth-child(2) { --x: 22%; --y: 58%; --s: .7; --r: 18deg; --d: 11s; --t: -6s; } #kc-main .gift-rain i:nth-child(3) { --x: 36%; --y: 28%; --s: 1; --r: -6deg; --d: 8.4s; --t: -3.5s; } #kc-main .gift-rain i:nth-child(4) { --x: 51%; --y: 80%; --s: .6; --r: 24deg; --d: 12s; --t: -8s; } #kc-main .gift-rain i:nth-child(5) { --x: 64%; --y: 18%; --s: .85; --r: 10deg; --d: 9.6s; --t: -5s; } #kc-main .gift-rain i:nth-child(6) { --x: 78%; --y: 46%; --s: 1.05; --r: -20deg; --d: 10.4s; --t: -2.2s; } #kc-main .gift-rain i:nth-child(7) { --x: 90%; --y: 8%; --s: .75; --r: 8deg; --d: 8.8s; --t: -7s; } #kc-main .gift-rain i:nth-child(8) { --x: 14%; --y: 86%; --s: .8; --r: 30deg; --d: 10s; --t: -4.4s; } #kc-main .gift-rain i:nth-child(9) { --x: 86%; --y: 72%; --s: .65; --r: -28deg; --d: 11.6s; --t: -9.5s; } @media (prefers-reduced-motion: no-preference) { #kc-main .gift-rain i { top: -12%; opacity: 0; will-change: transform, opacity; animation: envelope-rain var(--d) linear var(--t) infinite, envelope-sway calc(var(--d) / 3) ease-in-out var(--t) infinite alternate; } } @keyframes envelope-rain { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 8% { opacity: .9; } 88% { opacity: .65; } 100% { transform: translateY(var(--fall, 34rem)) rotate(160deg); opacity: 0; } } @keyframes envelope-sway { from { translate: -14px 0; } to { translate: 14px 0; } } #kc-main .gift-scene { position: relative; display: grid; justify-items: center; margin-top: 2.2rem; } #kc-main .gift-envelope { position: relative; width: 9.5rem; aspect-ratio: 1.45; margin-bottom: 1.2rem; } /* Levitación: el sobre flota sobre una sombra de suelo fija y un halo de linterna. Solo transform/opacity. */ #kc-main .gift-inner { isolation: isolate; } #kc-main .gift-halo { position: absolute; z-index: -2; top: -4.4rem; left: 50%; width: 15rem; aspect-ratio: 1; margin-left: -7.5rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(252, 186, 123, .38), rgba(252, 186, 123, .1) 60%, transparent); opacity: .6; } #kc-main .gift-shadow { position: absolute; z-index: -1; top: 7.5rem; left: 50%; width: 7.6rem; height: 1rem; margin-left: -3.8rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(4, 8, 16, .6), transparent); opacity: .7; } @media (prefers-reduced-motion: no-preference) { #kc-main .gift-envelope { animation: envelope-levitate 5.6s ease-in-out infinite; } #kc-main .gift-shadow { animation: envelope-shadow 5.6s ease-in-out infinite; } #kc-main .gift-halo { animation: envelope-halo 5.6s ease-in-out infinite; } } @keyframes envelope-levitate { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-11px) rotate(1.6deg); } } @keyframes envelope-shadow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(.78); opacity: .4; } } @keyframes envelope-halo { 0%, 100% { opacity: .45; } 50% { opacity: .85; } } #kc-main .gift-envelope-back { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(160deg, #F2EBDF, #D9CDB9), var(--grain) 0 0 / 256px repeat; background-blend-mode: normal, multiply; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .75); } #kc-main .gift-envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 62%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #E5DACA, #CDBFA6); } #kc-main .gift-seal { position: absolute; left: 50%; top: 62%; width: 2.8rem; height: 2.8rem; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px rgba(40, 24, 4, .55)); } #kc-main .gift h2 { margin: 0; font: 500 .8rem / 1 var(--f-text); letter-spacing: .3em; text-transform: uppercase; color: var(--lantern); } #kc-main .gift-type { margin: .5rem 0 0; font: italic 400 clamp(2rem, 9vw, 2.8rem) / 1.1 var(--f-text); color: var(--cream-ink); text-shadow: 0 2px 12px rgba(15, 20, 25, .9); } /* ───────────────────────── 8 · Carta de respuesta · la noche del Gate ───────────────────────── */ #kc-main .night { /* La carta de respuesta se escribe bajo las luces del barco-palacio. */ --plate: var(--plate-riverboat); --plate-pos: 50% 58%; --plate-size: max(100%, 60rem) auto; --veil: linear-gradient(rgba(15, 20, 25, .18), rgba(15, 20, 25, .18)); padding: 4.2rem 1.1rem 4.6rem; } #kc-main .rsvp-letter { position: relative; width: min(100%, 30rem); margin-inline: auto; padding: 3rem 1.4rem 2rem; color: var(--ink); text-align: left; background: radial-gradient(90% 60% at 18% 0%, rgba(255, 220, 170, .6), transparent 60%), linear-gradient(180deg, var(--vellum), var(--vellum-deep)), var(--grain) 0 0 / 256px repeat; background-blend-mode: normal, normal, multiply; border-radius: 3px; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 246, 226, .4) inset, 0 0 60px -18px rgba(252, 186, 123, .45); } #kc-main .rsvp-seal { position: absolute; left: 50%; top: 0; width: 4rem; height: 4rem; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 8px rgba(20, 12, 2, .5)); } #kc-main .rsvp-letter h2 { margin: 0 0 .4rem; text-align: center; font: italic 400 clamp(2rem, 8.6vw, 2.7rem) / 1.08 var(--f-text); } #kc-main #kc-rsvp-allocation-note { margin: 0 0 1rem; text-align: center; font-size: .98rem; color: var(--olive-ink); } #kc-main #kc-rsvp-form { max-width: none; } #kc-main .kc-field { display: grid; gap: .35rem; margin: 1.1rem 0; } #kc-main .kc-field label, #kc-main .kc-fieldset legend { font: 600 .82rem / 1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } #kc-main .kc-field input, #kc-main .kc-field select { width: 100%; min-height: 52px; padding: .7rem .8rem; font: 400 1.08rem / 1.3 var(--f-text); color: var(--ink); background: rgba(255, 252, 244, .72); border: 0; border-bottom: 1.5px solid rgba(25, 11, 12, .5); border-radius: 3px 3px 0 0; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } #kc-main .kc-field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background: rgba(255, 252, 244, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23190B0C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat; } #kc-main .kc-field input:focus, #kc-main .kc-field select:focus { outline: 2px solid var(--ink); outline-offset: 2px; background-color: rgba(255, 252, 244, .95); border-bottom-color: var(--gold-5); box-shadow: 0 6px 16px -10px rgba(201, 154, 58, .9); } #kc-main .kc-field select:disabled { opacity: .6; } #kc-main .kc-fieldset { display: grid; gap: .55rem; margin: 1.3rem 0; padding: 0; border: 0; } #kc-main .kc-fieldset legend { margin-bottom: .55rem; padding: 0; } #kc-main .lily-choice { display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: .45rem .8rem; cursor: pointer; border-radius: 999px; background: rgba(255, 252, 244, .5); font: 400 1.08rem var(--f-text); color: var(--ink); transition: background 160ms ease, box-shadow 160ms ease; } #kc-main .lily-choice input { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 30px; margin: 0; cursor: pointer; border-radius: 50%; border: 1.5px solid rgba(25, 11, 12, .55); background: radial-gradient(circle at 40% 35%, #FBF7EE, #E7DECF); transition: background 200ms ease, transform 200ms ease; } #kc-main .lily-choice input:checked { border-color: #2E4420; transform: rotate(-8deg); background: var(--lily-pad) 50% 40% / 170% auto no-repeat, #587A33; } #kc-main .lily-choice:has(input:checked) { background: rgba(163, 191, 128, .42); box-shadow: 0 0 0 1px rgba(46, 68, 32, .45) inset; } #kc-main .lily-choice input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } #kc-main [aria-invalid="true"] { border-bottom-color: var(--danger) !important; } #kc-main .kc-field-error { color: var(--danger); font: 500 .98rem / 1.4 var(--f-text); } #kc-main #kc-rsvp-error { margin: .6rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--danger); background: rgba(142, 43, 34, .08); } #kc-main #kc-rsvp-status { margin: .6rem 0 0; min-height: 0; color: var(--ink-soft); text-align: center; } #kc-main #kc-rsvp-submit { position: relative; overflow: hidden; width: 100%; min-height: 56px; margin-top: .6rem; padding: .85rem 1.6rem; border: 1px solid rgba(201, 154, 58, .95); border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, rgba(56, 88, 149, .96), rgba(15, 20, 25, .97)); color: var(--lantern-hot); font: italic 500 1.16rem / 1 var(--f-text); letter-spacing: .05em; text-shadow: 0 1px 2px #190B0C; box-shadow: 0 0 0 4px rgba(25, 11, 12, .1), 0 0 0 5px rgba(201, 154, 58, .35), 0 14px 26px -12px rgba(25, 11, 12, .7), inset 0 1px 0 rgba(255, 250, 220, .4); transition: transform 140ms ease, filter 140ms ease; } #kc-main #kc-rsvp-submit:active:not(:disabled) { transform: scale(.98); filter: brightness(1.1); } #kc-main #kc-rsvp-submit:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.9); opacity: .7; } #kc-main #kc-rsvp-form[aria-busy="true"] #kc-rsvp-submit { filter: brightness(.95); } #kc-main #kc-rsvp-form[aria-busy="true"] #kc-rsvp-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 210, .45) 50%, transparent 65%); animation: rsvp-busy 1.1s linear infinite; } @keyframes rsvp-busy { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (hover: hover) { #kc-main #kc-rsvp-submit:hover:not(:disabled) { filter: brightness(1.08); } #kc-main .lily-choice:hover { background: rgba(255, 252, 244, .8); } } /* Pase: postal de la noche. Se diseña aquí; solo lo enciende el contrato RSVP existente. */ #kc-main .pass { margin-top: 1.8rem; padding: 0; border: 0; display: grid; grid-template-columns: 1fr; color: var(--cream-ink); border-radius: 6px; overflow: hidden; background: radial-gradient(80% 70% at 85% 0%, rgba(252, 186, 123, .35), transparent 60%), linear-gradient(160deg, var(--night-2), var(--night-0)); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(236, 201, 146, .45) inset; } #kc-main .pass-face { position: relative; padding: 1.6rem 1.4rem 1.4rem; text-align: center; } #kc-main .pass-seal { width: 3rem; height: 3rem; margin: 0 auto .6rem; display: block; } #kc-main .pass h3 { margin: 0; font: 500 .78rem / 1 var(--f-text); letter-spacing: .3em; text-transform: uppercase; color: var(--lantern); } #kc-main .pass-event { margin: .5rem 0 .2rem; font: 400 1.9rem / 1.05 var(--f-display); letter-spacing: .04em; color: #FFF3D2; } #kc-main .pass-when { margin: 0; font-size: .98rem; opacity: .9; } #kc-main .pass-guest { margin: 1rem 0 0; padding-top: 1rem; font: italic 500 1.2rem / 1.3 var(--f-text); border-top: 1px dashed rgba(236, 201, 146, .55); } #kc-main .pass-qr { margin: 0 1.4rem 1.4rem; padding: 14px; justify-self: center; background: #FFFFFF; border-radius: 4px; } /* ───────────────────────── 8b · Álbum y mensaje secreto · copiados de Alice_Wonderland_Royal (#captura, #secret-key) ───────────────────────── */ #kc-main .captura-momento { isolation: isolate; overflow: hidden; padding: clamp(64px, 12vw, 96px) clamp(20px, 6vw, 48px); text-align: center; background: linear-gradient(180deg, var(--night-1), rgba(31, 43, 63, 0) 16%, rgba(31, 43, 63, 0) 84%, var(--night-1)), linear-gradient(rgba(15, 20, 25, .35), rgba(15, 20, 25, .35)), var(--plate-shore) 50% 30% / cover no-repeat, var(--night-1); position: relative; } #kc-main .captura-haze { position: absolute; z-index: -1; inset: -15%; pointer-events: none; background: radial-gradient(ellipse 32% 22% at 12% 72%, rgba(204, 160, 122, .08), transparent 70%), radial-gradient(ellipse 32% 22% at 88% 18%, rgba(105, 140, 128, .07), transparent 70%), radial-gradient(ellipse 60% 30% at 50% 100%, rgba(30, 22, 8, .55), transparent 75%); filter: blur(18px); } #kc-main .captura-camera-wrap { display: flex; justify-content: center; margin-bottom: clamp(24px, 5vw, 36px); } #kc-main .captura-camera-svg { width: clamp(120px, 40vw, 188px); height: auto; overflow: visible; filter: drop-shadow(0 8px 24px rgba(204, 160, 122, 0.18)) drop-shadow(0 2px 8px rgba(0,0,0,.55)); } #kc-main .cam-body { fill: rgba(204, 160, 122, .10); stroke: rgba(236, 188, 140, .95); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 0s; } #kc-main .cam-lens-ring { fill: none; stroke: rgba(236, 188, 140, .95); stroke-width: 1.6; stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 0s; } #kc-main .cam-lens-mid { fill: none; stroke: rgba(243, 222, 190, .85); stroke-width: 1.2; stroke-dasharray: 178; stroke-dashoffset: 178; transition: stroke-dashoffset 0s; } #kc-main .cam-lens-glass { fill: rgba(60, 100, 120, .35); stroke: rgba(252, 206, 160, .95); stroke-width: 1.2; stroke-dasharray: 114; stroke-dashoffset: 114; transition: stroke-dashoffset 0s; animation: none; } #kc-main .cam-iris { stroke: rgba(252, 206, 160, .30); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0s; } #kc-main .cam-shutter { fill: rgba(204, 160, 122, .18); stroke: rgba(204, 160, 122, .65); stroke-width: 1.3; stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset 0s; } #kc-main .cam-viewfinder { fill: none; stroke: rgba(243, 222, 190, .40); stroke-width: 1.2; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 0s; } #kc-main .cam-botanical { fill: rgba(185, 99, 102, .35); stroke: rgba(242, 160, 142, .9); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 0s; } #kc-main .cam-glint { fill: rgba(255, 240, 180, .88); opacity: 0; transition: opacity 0s; animation: none; } #kc-main .cam-glint-2 { fill: rgba(255, 240, 180, .55); opacity: 0; transition: opacity 0s; animation: none; } #kc-main .cam-flourish { fill: none; stroke: rgba(204, 160, 122, .7); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0s; } #kc-main .captura-momento.in .cam-body { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) 0.1s; } #kc-main .captura-momento.in .cam-lens-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.0s cubic-bezier(.65, 0, .35, 1) 0.5s; } #kc-main .captura-momento.in .cam-lens-mid { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s cubic-bezier(.65, 0, .35, 1) 0.8s; } #kc-main .captura-momento.in .cam-lens-glass { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s cubic-bezier(.65, 0, .35, 1) 1.0s; } #kc-main .captura-momento.in .cam-iris { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s cubic-bezier(.65, 0, .35, 1) 1.2s; } #kc-main .captura-momento.in .cam-shutter { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s cubic-bezier(.65, 0, .35, 1) 0.9s; } #kc-main .captura-momento.in .cam-viewfinder { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s cubic-bezier(.65, 0, .35, 1) 0.7s; } #kc-main .captura-momento.in .cam-botanical { stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s cubic-bezier(.65, 0, .35, 1) 1.4s; } #kc-main .captura-momento.in .cam-glint { opacity: 1; transition: opacity 0.3s ease 1.8s; animation: capturaGlintPass 3.5s ease-in-out 2.0s 1 forwards; } #kc-main .captura-momento.in .cam-glint-2 { opacity: 0.7; transition: opacity 0.3s ease 2.0s; } #kc-main .captura-momento.in .cam-flourish { stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s cubic-bezier(.65, 0, .35, 1) 1.6s; } @keyframes capturaLensPulse { 0%, 100% { stroke: rgba(252, 206, 160, .55); } 50% { stroke: rgba(255, 232, 160, .80); } } @keyframes capturaGlintPass { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.6); } 70% { opacity: 0.5; transform: scale(2.2); } 100% { opacity: 0; transform: scale(1); } } #kc-main .captura-copy { position: relative; z-index: 1; opacity: 0; transform: translateY(18px); transition: opacity 1.0s cubic-bezier(.65, 0, .35, 1) 0.6s, transform 1.0s cubic-bezier(.65, 0, .35, 1) 0.6s; } #kc-main .captura-momento.in .captura-copy { opacity: 1; transform: translateY(0); } #kc-main .captura-eyebrow { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.38em; color: rgba(246, 210, 166, .92); margin-bottom: 0.6em; text-shadow: 0 0 14px rgba(204, 160, 122, .35); } #kc-main .captura-title { font-family: var(--f-display); font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: normal; color: #F6D2A6; text-shadow: 0 0 32px rgba(204, 160, 122, .45), 0 2px 8px rgba(0, 0, 0, .90); margin-bottom: 0.6em; line-height: 1.15; } #kc-main .captura-body { font-family: var(--f-text); font-size: clamp(0.92rem, 3.8vw, 1.05rem); font-style: italic; line-height: 1.75; color: rgba(239, 228, 208, .88); text-shadow: 0 1px 12px rgba(2, 1, 6, .95), 0 0 20px rgba(2, 1, 6, .80); margin-bottom: 2em; } #kc-main .captura-body-2 { display: block; color: rgba(239, 228, 208, .70); font-size: .96em; } #kc-main .captura-cta { display: inline-flex; align-items: center; gap: 0.5em; min-height: 52px; padding: 0 clamp(22px, 5vw, 36px); font-family: var(--f-text); font-size: clamp(0.72rem, 3.2vw, 0.82rem); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: #F6D2A6; border: 1.4px solid rgba(204, 160, 122, .55); border-radius: 3px; background: rgba(204, 160, 122, .06); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s ease, box-shadow .22s ease; box-shadow: 0 0 18px rgba(204, 160, 122, .12), inset 0 0 0 0 rgba(204, 160, 122, .10); } #kc-main .captura-cta:hover { background: rgba(204, 160, 122, .14); border-color: rgba(252, 206, 160, .80); color: #fff8e8; box-shadow: 0 0 28px rgba(204, 160, 122, .28), inset 0 0 12px rgba(204, 160, 122, .10); } #kc-main .captura-cta:active { transform: scale(.96); background: rgba(204, 160, 122, .22); box-shadow: 0 0 12px rgba(204, 160, 122, .20); } #kc-main .captura-cta:focus-visible { outline: 2px solid rgba(252, 206, 160, .80); outline-offset: 4px; } #kc-main .captura-cta-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; } #kc-main .captura-helper { margin-top: 0.85em; font-family: var(--f-text); font-size: clamp(0.58rem, 2.2vw, 0.66rem); letter-spacing: 0.20em; text-transform: uppercase; color: rgba(243, 222, 190, .82); } @media (prefers-reduced-motion: reduce) { #kc-main .captura-copy, #kc-main .cam-body, #kc-main .cam-lens-ring, #kc-main .cam-lens-mid, #kc-main .cam-lens-glass, #kc-main .cam-iris, #kc-main .cam-shutter, #kc-main .cam-viewfinder, #kc-main .cam-botanical, #kc-main .cam-glint, #kc-main .cam-glint-2, #kc-main .cam-flourish { transition: none !important; animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } #kc-main .captura-copy { opacity: 1 !important; transform: none !important; } #kc-main .captura-cta { transition: none !important; } } /* ================================================================ SECRET KEY FINALE — XV_AWR_10B /* Alice: CTA es ; aquí es