:root { --violet-950:#25013e; --violet-900:#3d0a68; --violet-800:#5e168d; --violet-700:#7e2ab4; --violet-500:#ae58df; --lilac:#d8a8f0; --orchid:#f1d9ff; --paper:#fffaff; --ink:#2f1244; --muted:#6d527e; --gold:#ffd778; --line:rgba(102,27,150,.22); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
* { box-sizing:border-box; }
body { position:relative; margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 50% -12%, #fcecff 0 18%, transparent 42%), linear-gradient(150deg,#e7baff 0%,#c174e9 36%,#8b3ac2 100%); font-family:"DM Sans",sans-serif; }
body::before,body::after { content:""; position:fixed; pointer-events:none; inset:0; z-index:-1; }
body::before { opacity:.45; background-image:radial-gradient(rgba(255,255,255,.68) 1px, transparent 1.5px); background-size:22px 22px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
body::after { inset:14px; border:1px solid rgba(255,255,255,.5); }
.ambient { position:fixed; z-index:-1; width:29rem; aspect-ratio:1; border:1px solid rgba(255,255,255,.32); border-radius:50%; filter:blur(.2px); }
.ambient-one { top:14rem; left:-19rem; box-shadow:0 0 0 2rem rgba(255,255,255,.07),0 0 0 4rem rgba(255,255,255,.05); animation:float-orb 13s ease-in-out infinite alternate; }
.ambient-two { right:-18rem; top:38rem; box-shadow:0 0 0 1.5rem rgba(255,236,255,.14),0 0 0 4rem rgba(255,236,255,.07); animation:float-orb 16s ease-in-out -4s infinite alternate-reverse; }
.page-shell { position:relative; z-index:1; width:min(100% - 2rem, 760px); margin:0 auto; padding:4rem 0 4.5rem; }
.floral-frame { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; filter:drop-shadow(0 8px 10px rgba(70,31,83,.12)); }.page-shell > :not(.floral-frame) { position:relative; z-index:1; }
.hero { position:relative; text-align:center; padding:1rem 1rem 3.6rem; animation:reveal .7s var(--ease-out) both; }
.hero-crown { display:flex; align-items:flex-end; justify-content:center; gap:.7rem; height:2.25rem; color:var(--gold); filter:drop-shadow(0 2px 0 rgba(61,10,104,.2)); font-size:1.1rem; }
.hero-crown span:nth-child(1),.hero-crown span:nth-child(3) { transform:translateY(.55rem) scale(.8); }.hero-crown span:nth-child(2) { font-size:1.6rem; }
.eyebrow,.step { margin:0; color:var(--violet-900); font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.title-wrap { position:relative; isolation:isolate; margin-top:.4rem; }.title-number { position:absolute; z-index:-1; top:-.88rem; left:50%; color:rgba(255,255,255,.5); font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(6rem,25vw,10rem); font-weight:700; letter-spacing:-.12em; line-height:1; transform:translateX(-50%); }
h1,h2 { margin:0; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; }
h1 { color:var(--violet-950); font-size:clamp(3.8rem,13vw,6.5rem); letter-spacing:-.07em; line-height:.77; text-shadow:1px 2px 0 rgba(255,255,255,.5); }
h1 em { display:block; color:var(--paper); font-weight:500; text-shadow:0 2px 0 var(--violet-800),1px 3px 13px rgba(61,10,104,.22); }
.intro { max-width:470px; margin:1.65rem auto 0; color:var(--violet-950); font-size:1rem; line-height:1.6; }
.hero-ribbon { display:flex; align-items:center; justify-content:center; gap:.85rem; width:max-content; max-width:100%; margin:1.7rem auto 0; padding:.6rem 1rem; border-block:1px solid rgba(61,10,104,.35); color:var(--violet-900); font-family:"Cormorant Garamond",Georgia,serif; font-size:1.1rem; font-style:italic; }.hero-ribbon i { color:var(--gold); font-style:normal; }
.upload-panel { position:relative; overflow:visible; padding:clamp(1.5rem,5vw,3.25rem); border:1px solid rgba(255,255,255,.78); background:rgba(255,250,255,.91); box-shadow:0 18px 0 rgba(68,12,107,.17),0 30px 45px rgba(57,8,87,.27); animation:reveal .7s .09s var(--ease-out) both; }
.floral-frame { display:none; }.panel-floral-frame { position:absolute; z-index:4; inset:-4.5rem -4rem; width:calc(100% + 8rem); height:calc(100% + 9rem); object-fit:fill; pointer-events:none; filter:drop-shadow(9px 14px 10px rgba(60,22,75,.26)); }
.upload-panel::before { content:""; position:absolute; inset:10px; border:1px solid var(--line); pointer-events:none; }.upload-panel::after { content:"✿   ✦   ✿"; position:absolute; right:-.9rem; top:9.2rem; color:rgba(174,88,223,.14); font-family:Georgia,serif; font-size:5rem; letter-spacing:.1em; transform:rotate(90deg); pointer-events:none; }
.corner { position:absolute; z-index:1; color:var(--violet-700); font-size:1.1rem; }.corner-tl { top:1rem; left:1rem; }.corner-tr { top:1rem; right:1rem; }.corner-bl { bottom:1rem; left:1rem; }.corner-br { right:1rem; bottom:1rem; }
.rose-corner { position:absolute; z-index:3; display:block; width:clamp(175px,34vw,285px); height:auto; pointer-events:none; filter:drop-shadow(9px 12px 9px rgba(49,8,69,.28)); }.rose-corner-top { top:clamp(-92px,-9vw,-52px); left:clamp(-104px,-9vw,-52px); transform:rotate(-5deg); }.rose-corner-bottom { right:clamp(-120px,-10vw,-60px); bottom:clamp(-94px,-9vw,-53px); transform:scaleX(-1) rotate(-8deg); }
.rose-corner { display:none; }
.paper-blooms { position:absolute; z-index:3; inset:0; pointer-events:none; }.bloom { --bloom-angle:0deg; --bloom-scale:1; position:absolute; width:100px; height:130px; filter:drop-shadow(7px 10px 7px rgba(47,18,68,.22)); transform:rotate(var(--bloom-angle)) scale(var(--bloom-scale)); transform-origin:50% 100%; animation:bloom-sway 7s var(--ease-in-out) infinite alternate; }.bloom-stem { position:absolute; bottom:-16px; left:49px; width:4px; height:94px; border-radius:4px; background:linear-gradient(90deg,#4d176e,#9c4dcc 52%,#451064); box-shadow:inset -1px 0 rgba(255,255,255,.42); transform:rotate(22deg); transform-origin:bottom; }.bloom-stem::before,.bloom-stem::after { content:""; position:absolute; width:30px; height:16px; border:1px solid rgba(80,20,111,.74); border-radius:100% 0 100% 0; background:linear-gradient(135deg,#7b2fac,#d496f0); }.bloom-stem::before { top:41px; right:2px; transform:rotate(-38deg); }.bloom-stem::after { top:59px; left:-20px; transform:scaleX(-1) rotate(-23deg); }.bloom-head { position:absolute; top:2px; left:18px; width:65px; height:65px; transform:rotate(-18deg); }.petal { position:absolute; top:18px; left:23px; width:28px; height:36px; border-radius:75% 25% 72% 28%; background:linear-gradient(135deg,#fff6ff 0%,#e3a7fb 44%,#9c42c9 100%); box-shadow:inset 3px 3px 5px rgba(255,255,255,.72),inset -4px -4px 7px rgba(78,13,111,.25),2px 4px 4px rgba(52,7,77,.15); transform-origin:7px 28px; }.petal.p1 { transform:rotate(0deg) translateY(-22px); }.petal.p2 { transform:rotate(72deg) translateY(-22px); }.petal.p3 { transform:rotate(144deg) translateY(-22px); }.petal.p4 { transform:rotate(216deg) translateY(-22px); }.petal.p5 { transform:rotate(288deg) translateY(-22px); }.bloom-head b { position:absolute; z-index:2; top:25px; left:25px; width:15px; height:15px; border:2px solid rgba(255,248,206,.9); border-radius:50%; background:radial-gradient(circle at 30% 30%,#fffdeb,#ffd56e 42%,#c9831a 100%); box-shadow:0 2px 5px rgba(73,19,85,.35); }.bloom-top-left { --bloom-angle:-20deg; top:-76px; left:-20px; }.bloom-top-right { --bloom-angle:34deg; --bloom-scale:.78; top:-68px; right:-8px; animation-delay:-2.4s; }.bloom-side { --bloom-angle:95deg; --bloom-scale:.92; right:-73px; bottom:56px; animation-delay:-4.6s; }
.panel-heading { position:relative; z-index:1; text-align:center; }.step { display:flex; align-items:center; justify-content:center; gap:.65rem; }.step::before,.step::after { content:""; width:2.5rem; height:1px; background:currentColor; opacity:.4; }.step span { color:var(--violet-500); }
.panel-heading h2,.how-it-works h2 { margin-top:.6rem; color:var(--violet-900); font-size:clamp(2.55rem,9vw,4rem); line-height:.88; letter-spacing:-.055em; }
.panel-heading p:not(.step) { max-width:450px; margin:1rem auto 1.6rem; color:var(--muted); line-height:1.55; }
#media-input { position:absolute; width:1px; height:1px; opacity:0; }
.dropzone { position:relative; z-index:1; display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; overflow:hidden; padding:2rem 1.5rem; border:1.5px dashed var(--violet-500); outline:1px solid rgba(174,88,223,.15); outline-offset:-6px; background:linear-gradient(135deg,rgba(248,227,255,.92),rgba(255,255,255,.9)); color:var(--muted); cursor:pointer; text-align:center; transition:background 180ms ease,transform 180ms var(--ease-out),box-shadow 180ms ease; }
.dropzone::before { content:""; position:absolute; inset:-30%; z-index:-1; background:conic-gradient(from 180deg,transparent,var(--orchid),transparent 45%); opacity:.55; animation:spin 12s linear infinite; }.dropzone:hover,.dropzone:focus-within,.dropzone.dragging { background:linear-gradient(135deg,#fff4ff,#ead1fa); transform:translateY(-3px); box-shadow:0 11px 22px rgba(86,20,130,.13); }
.dropzone strong { color:var(--violet-900); font-size:1.05rem; }.dropzone span { font-size:.85rem; }.dropzone-copy { max-width:250px; }.dropzone .camera-mark { display:grid; place-items:center; width:53px; height:53px; border:1px solid var(--violet-800); border-radius:50%; color:var(--paper); background:var(--violet-800); box-shadow:0 0 0 5px rgba(174,88,223,.18); font-family:"Cormorant Garamond",serif; font-size:2.3rem; line-height:1; }.camera-mark span { transform:translateY(-2px); font-size:2.3rem; }.file-note { color:var(--violet-700); font-size:.72rem!important; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }.dropzone-spark { position:absolute; color:var(--gold); animation:twinkle 2.7s ease-in-out infinite; }.spark-one { top:1.1rem; right:1.4rem; }.spark-two { bottom:1.2rem; left:1.2rem; animation-delay:-1.1s; }
.selected-files { position:relative; z-index:1; margin:1rem 0; padding:1rem; border-left:3px solid var(--violet-700); background:#f9edff; font-size:.86rem; line-height:1.7; }.upload-button { position:relative; z-index:1; width:100%; margin-top:1rem; padding:1rem 1.5rem; border:1px solid var(--violet-950); border-radius:0; color:var(--paper); background:linear-gradient(90deg,var(--violet-900),var(--violet-700)); box-shadow:4px 4px 0 var(--gold); cursor:pointer; font:700 .84rem "DM Sans",sans-serif; letter-spacing:.11em; text-transform:uppercase; transition:transform 160ms ease,box-shadow 160ms ease,filter 160ms ease; }.upload-button:hover:not(:disabled) { box-shadow:6px 6px 0 var(--gold); filter:brightness(1.08); transform:translate(-2px,-2px); }.upload-button:active:not(:disabled) { box-shadow:2px 2px 0 var(--gold); transform:translate(2px,2px); }.upload-button:focus-visible,.dropzone:focus-within { outline:3px solid var(--gold); outline-offset:3px; }.upload-button:disabled { opacity:.5; cursor:not-allowed; }.status-message { position:relative; z-index:1; min-height:1.4rem; margin:.85rem 0 0; color:var(--muted); font-size:.9rem; text-align:center; }.status-message.error { color:#941f51; }.status-message.success { color:#386a35; }
.how-it-works { padding:4.75rem 1rem .5rem; text-align:center; animation:reveal .7s .18s var(--ease-out) both; }.how-it-works h2 { color:var(--paper); text-shadow:0 2px 0 var(--violet-800); }.how-it-works .step { color:var(--violet-950); }.how-it-works ol { display:grid; gap:1.25rem; margin:2rem 0 0; padding:0; list-style:none; }.how-it-works li { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:146px; padding:1.25rem; border:1px solid rgba(255,255,255,.48); background:rgba(74,10,114,.18); color:var(--paper); box-shadow:inset 0 1px rgba(255,255,255,.2); }.how-it-works li span { display:grid; place-items:center; width:2rem; height:2rem; margin-bottom:.2rem; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-family:"Cormorant Garamond",serif; font-size:1rem; font-weight:700; }.how-it-works li strong { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:600; }.how-it-works li small { color:var(--orchid); font-size:.75rem; }
footer { padding:1.7rem 1rem; color:var(--orchid); background:var(--violet-950); border-top:1px solid rgba(255,255,255,.22); font-family:"Cormorant Garamond",serif; font-size:1.3rem; font-style:italic; text-align:center; }.footer-flower { color:var(--gold); padding-inline:.35rem; }
.botanical { position:fixed; z-index:0; width:220px; height:400px; color:rgba(255,236,255,.8); pointer-events:none; }.botanical-left { top:8rem; left:-5.5rem; transform:rotate(-27deg); }.botanical-right { right:-5.5rem; bottom:-2.5rem; transform:scaleX(-1) rotate(-18deg); }.stem { position:absolute; left:55%; width:2px; height:100%; background:currentColor; transform:rotate(20deg); transform-origin:bottom; }.leaf { position:absolute; width:70px; height:35px; border:1px solid currentColor; border-radius:100% 0 100% 0; background:rgba(246,212,255,.16); }.leaf-a { top:37%; left:22%; transform:rotate(34deg); }.leaf-b { top:59%; right:5%; transform:rotate(-67deg); }.flower { position:absolute; color:var(--orchid); font-family:Georgia,serif; line-height:1; text-shadow:0 2px 0 rgba(61,10,104,.13); }.flower-a { top:13%; left:2%; font-size:4.7rem; }.flower-b { top:51%; right:5%; color:var(--gold); font-size:2.3rem; }
.file-row { display:flex; gap:.75rem; justify-content:space-between; align-items:baseline; }.file-row .file-state { flex:none; font-size:.78rem; color:var(--muted); }.file-row.listo .file-state { color:#316640; }.file-row.error .file-state { color:#a3163e; }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes twinkle { 0%,100% { opacity:.35; transform:scale(.75) rotate(0); } 50% { opacity:1; transform:scale(1.2) rotate(25deg); } } @keyframes spin { to { transform:rotate(1turn); } } @keyframes float-orb { to { transform:translate3d(1.5rem,-1rem,0); } } @keyframes bloom-sway { from { transform:rotate(var(--bloom-angle)) scale(var(--bloom-scale)); } to { transform:rotate(calc(var(--bloom-angle) + 3deg)) scale(var(--bloom-scale)); } }
/* Nueva dirección floral: rosas rosa, violeta y blanco pastel con ramas púrpura. */
.hero-floral { position:relative; display:flex; align-items:center; justify-content:center; gap:.35rem; width:min(100%,17rem); height:1.8rem; margin:.1rem auto .35rem; color:#efa8cf; }.hero-floral::before,.hero-floral::after { content:""; width:3.2rem; height:1px; background:linear-gradient(90deg,transparent,#603281); }.hero-floral::after { transform:scaleX(-1); }.mini-bloom { display:inline-block; font-family:Georgia,serif; font-size:1.8rem; line-height:1; text-shadow:1px 3px 0 rgba(66,11,92,.2),0 0 0 .04rem rgba(255,255,255,.2); }.mini-pink { color:#efa8cf; }.mini-white { color:#fffaff; font-size:2rem; }.mini-purple { color:#b45ce0; transform:translateY(-.2rem) rotate(14deg); }
.bloom-rose { --petal-light:#fff7fb; --petal-mid:#f3afcf; --petal-deep:#b84c8b; }.bloom-white { --petal-light:#ffffff; --petal-mid:#f7eaff; --petal-deep:#caa6de; }.bloom-lilac { --petal-light:#fcf4ff; --petal-mid:#d799f1; --petal-deep:#8341b0; }.bloom .petal { background:linear-gradient(135deg,var(--petal-light,#fff6ff) 0%,var(--petal-mid,#e3a7fb) 44%,var(--petal-deep,#9c42c9) 100%); }.bloom-stem { background:linear-gradient(90deg,#3d1760,#7d459a 52%,#371056); }.bloom-stem::before,.bloom-stem::after { border-color:rgba(67,25,91,.74); background:linear-gradient(135deg,#5a2379,#d69dea); }
.botanical { color:rgba(251,226,255,.84); }.leaf { border-color:#743798; background:linear-gradient(135deg,rgba(240,202,255,.74),rgba(115,51,148,.32)); }.flower-a { color:#f2a9d0; text-shadow:2px 3px 0 rgba(74,12,104,.2); }.flower-b { color:#fffaff; text-shadow:2px 3px 0 rgba(74,12,104,.22); }.upload-panel::after { content:"✿  ❀  ✦  ❀  ✿"; color:rgba(198,113,226,.18); }.how-it-works li { background:#541077; border-color:rgba(255,239,255,.72); }.how-it-works li:nth-child(2) { background:#6a267f; }.how-it-works li:nth-child(3) { background:#4a0b6a; }.how-it-works li small { color:#f4dfff; }
@media (min-width:640px) { .page-shell { padding-top:5.5rem; }.how-it-works ol { grid-template-columns:repeat(3,1fr); gap:1rem; }.botanical { width:280px; }.upload-panel { padding-inline:4.25rem; } }
/* Safari/iPhone: superficies opacas y contraste alto, sin niebla translúcida. */
@media (max-width:639px) { body { background:#68199a; }.ambient { display:none; }.botanical { opacity:.32; }.hero { text-shadow:none; }.eyebrow { color:#f5d7ff; }.title-number { color:rgba(255,255,255,.22); }.hero h1 { color:#fffaff; text-shadow:0 2px 0 #4a0c70; }.hero h1 em { color:#ffd778; text-shadow:0 2px 0 #5d168d; }.intro { color:#fffaff; font-weight:500; }.hero-ribbon { border-color:rgba(255,255,255,.55); color:#fffaff; }.upload-panel { background:#fffaff; box-shadow:0 12px 0 rgba(47,7,75,.34),0 22px 35px rgba(47,7,75,.28); }.how-it-works .step { color:#f7dbff; }.how-it-works h2 { color:#fffaff; text-shadow:0 2px 0 #480a6d; }.how-it-works li { border-color:#edc6ff; background:#4d0d76; box-shadow:0 8px 0 rgba(46,5,70,.25),inset 0 1px rgba(255,255,255,.22); }.how-it-works li span { border-color:#ffd778; color:#ffd778; background:#3b075d; }.how-it-works li strong { color:#fffaff; }.how-it-works li small { color:#f4d9ff; font-weight:500; } }
@media (max-width:420px) { body::after { inset:8px; }.page-shell { width:min(100% - 1.25rem,760px); padding-top:2.7rem; }.hero { padding-inline:.25rem; padding-bottom:2.75rem; }.hero-crown { height:1.7rem; }.eyebrow,.step { font-size:.61rem; letter-spacing:.14em; }.title-number { top:-.5rem; }.intro { margin-top:1.35rem; font-size:.93rem; }.hero-ribbon { gap:.5rem; padding:.52rem .7rem; font-size:1rem; }.upload-panel { padding:2rem 1.1rem; }.panel-heading h2,.how-it-works h2 { font-size:clamp(2.45rem,12vw,3.2rem); }.panel-heading p:not(.step) { font-size:.91rem; }.dropzone { min-height:205px; padding:1.5rem 1rem; }.dropzone strong { font-size:1rem; }.upload-button { min-height:52px; padding-inline:1rem; font-size:.76rem; }.how-it-works { padding-top:3.7rem; }.how-it-works ol { gap:.75rem; }.how-it-works li { min-height:116px; padding:1rem; }.botanical { opacity:.56; transform:scale(.75) rotate(-27deg); }.botanical-right { transform:scaleX(-1) scale(.75) rotate(-18deg); }.bloom { --bloom-scale:.72; }.bloom-top-left { top:-65px; left:-28px; }.bloom-top-right { top:-62px; right:-31px; }.bloom-side { right:-77px; bottom:38px; } }
@media (hover:hover) and (pointer:fine) { .how-it-works li { transition:transform 180ms var(--ease-out),background 180ms ease; }.how-it-works li:hover { background:rgba(74,10,114,.31); transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; }.dropzone,.upload-button,.how-it-works li { transition-duration:120ms; }.ambient { display:none; } }
@media (max-width:639px) { .hero-floral::before,.hero-floral::after { width:2rem; }.how-it-works li:nth-child(1) { background:#541077; }.how-it-works li:nth-child(2) { background:#712d83; }.how-it-works li:nth-child(3) { background:#430866; }.how-it-works li strong { color:#fffaff; }.how-it-works li small { color:#f6ddff; } }
@media (max-width:420px) { .rose-corner { width:155px; }.rose-corner-top { top:-72px; left:-83px; }.rose-corner-bottom { right:-88px; bottom:-75px; } }
@media (max-width:639px) { .floral-frame { width:calc(100% + 1rem); left:-.5rem; opacity:.82; }.page-shell > .hero { padding-inline:1.5rem; }.upload-panel { margin-inline:.25rem; } }
@media (max-width:639px) { .panel-floral-frame { inset:-2.6rem -1.9rem; width:calc(100% + 3.8rem); height:calc(100% + 5.2rem); filter:drop-shadow(5px 8px 7px rgba(60,22,75,.25)); } }
/* Ramos compactos: decoran las esquinas sin dominar el panel. */
.panel-floral-frame { inset:-2rem -1.8rem; width:calc(100% + 3.6rem); height:calc(100% + 4rem); filter:drop-shadow(6px 9px 7px rgba(60,22,75,.22)); }
@media (max-width:639px) { .panel-floral-frame { inset:-1.35rem -1rem; width:calc(100% + 2rem); height:calc(100% + 2.7rem); filter:drop-shadow(4px 6px 5px rgba(60,22,75,.2)); } }
.panel-floral-frame { display:none; }.panel-bouquet { position:absolute; z-index:4; display:block; width:clamp(110px,19vw,155px); height:clamp(130px,22vw,175px); background-image:url("floral-frame-pastel.png"); background-repeat:no-repeat; background-size:200px auto; pointer-events:none; filter:drop-shadow(4px 6px 5px rgba(60,22,75,.22)); }.bouquet-top { top:-52px; right:-44px; background-position:right top; }.bouquet-bottom { bottom:-62px; left:-46px; background-position:left bottom; }
@media (max-width:639px) { .panel-bouquet { width:104px; height:124px; background-size:165px auto; filter:drop-shadow(3px 5px 4px rgba(60,22,75,.18)); }.bouquet-top { top:-42px; right:-34px; }.bouquet-bottom { bottom:-48px; left:-35px; } }
/* Tamaño intermedio para que los ramilletes se noten sin invadir el contenido. */
.panel-bouquet { width:clamp(135px,22vw,180px); height:clamp(155px,25vw,205px); background-size:235px auto; }.bouquet-top { top:-60px; right:-50px; }.bouquet-bottom { bottom:-70px; left:-52px; }
@media (max-width:639px) { .panel-bouquet { width:125px; height:148px; background-size:195px auto; }.bouquet-top { top:-49px; right:-40px; }.bouquet-bottom { bottom:-56px; left:-42px; } }

/* Panel inspirado en la tarjeta de sobremesa: todo el arreglo queda dentro del marco. */
.upload-panel { overflow:hidden; background:radial-gradient(circle at 48% 40%,#fff 0%,#fbf8fb 56%,#f0e8f2 100%); border-color:rgba(132,102,151,.68); box-shadow:0 12px 0 rgba(130,94,146,.10),0 23px 46px rgba(75,45,91,.22); }
.upload-panel::before { inset:10px; border:1px solid rgba(132,102,151,.62); box-shadow:inset 0 0 0 2px rgba(242,228,245,.9); }
.upload-panel::after { content:""; inset:16px; border:1px solid rgba(194,166,203,.58); transform:none; pointer-events:none; }
.upload-card-floral { position:absolute; z-index:2; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:fill; clip-path:inset(40% 0 0 40%); pointer-events:none; filter:drop-shadow(0 6px 6px rgba(91,61,107,.13)); }
.upload-panel .panel-bouquet { display:none; }
.upload-panel .corner { z-index:3; color:#866a9a; }
.upload-panel .panel-heading,.upload-panel .dropzone,.upload-panel .selected-files,.upload-panel .upload-button,.upload-panel .status { position:relative; z-index:3; }
.upload-panel .panel-heading h2,.upload-panel .dropzone strong { color:#5c4768; }
.upload-panel .panel-heading p,.upload-panel .dropzone,.upload-panel .file-note { color:#695773; }
.upload-panel .step { color:#4f385c; }.upload-panel .step span { color:#866a9a; }
.upload-panel .dropzone { background:rgba(255,253,253,.91); border-color:rgba(132,102,151,.55); box-shadow:0 8px 18px rgba(99,71,112,.09); }
.upload-panel .dropzone:hover,.upload-panel .dropzone.is-dragover { background:#fff; border-color:#866a9a; }
.upload-panel .upload-button { background:linear-gradient(135deg,#5c4768,#8c6b9a); box-shadow:0 9px 0 #4a3655,0 15px 25px rgba(79,56,92,.25); }
@media (max-width:639px) { .upload-panel { background:radial-gradient(circle at 48% 40%,#fff 0%,#fbf8fb 56%,#f0e8f2 100%); }.upload-card-floral { inset:7px; width:calc(100% - 14px); height:calc(100% - 14px); }.upload-panel::before { inset:7px; }.upload-panel::after { inset:12px; } }

.music-control[hidden] { display:none; }
.music-control { position:fixed; z-index:20; right:1rem; bottom:1rem; display:flex; align-items:center; gap:.65rem; padding:.4rem .55rem .4rem .75rem; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(66,40,80,.88); box-shadow:0 8px 22px rgba(44,18,57,.28); color:#fffaff; backdrop-filter:blur(10px); }
.music-control button { border:0; border-radius:999px; padding:.55rem .85rem; background:#fffaff; color:#5c4768; cursor:pointer; font:700 .75rem/1 "DM Sans",sans-serif; letter-spacing:.02em; }
.music-control button span { margin-right:.25rem; color:#866a9a; font-size:1rem; }
.music-control p { margin:0; font:500 .7rem/1.15 "DM Sans",sans-serif; }
@media (max-width:420px) { .music-control { right:.65rem; bottom:.65rem; gap:.45rem; padding:.35rem .4rem .35rem .6rem; }.music-control p { font-size:.62rem; }.music-control button { padding:.5rem .65rem; font-size:.68rem; } }