:root { --ink:#18362b; --forest:#24513d; --sage:#dbe6d5; --cream:#fffaf1; --peach:#f4cfc0; --clay:#b95e52; --gold:#d79b4c; --line:rgba(24,54,43,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
button,input,select,textarea { font:inherit; }
.site-header { max-width:1180px; margin:auto; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; gap:9px; align-items:center; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.04em; font-size:1.12rem; }
.brand em { font-family:"Playfair Display",serif; font-weight:600; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--cream); background:var(--forest); font-size:.95rem; }
.header-link { color:var(--ink); font-size:.9rem; text-decoration:none; border-bottom:1px solid var(--ink); }
.hero { max-width:1180px; min-height:650px; margin:auto; padding:72px 32px 88px; display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; overflow:hidden; }
.eyebrow { margin:0 0 15px; color:var(--clay); font-size:.68rem; font-weight:700; letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:"Playfair Display",serif; line-height:1.03; letter-spacing:-.06em; }
h1 { max-width:600px; font-size:clamp(3rem,5.4vw,5.15rem); margin-bottom:24px; }
h1 em,h2 em { color:var(--clay); font-weight:600; }
.hero-text { max-width:465px; font-size:1.05rem; line-height:1.7; color:#496658; margin-bottom:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; border:none; padding:14px 19px; border-radius:999px; cursor:pointer; text-decoration:none; font-weight:700; font-size:.9rem; transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(31,72,55,.18); }
.button-primary { background:var(--forest); color:white; }
.button-primary span { font-size:1.2rem; line-height:.5; }
.microcopy { margin:17px 0 0; color:#6d8276; font-size:.75rem; }
.hero-art { position:relative; height:500px; min-width:0; }
.sun { position:absolute; right:-96px; top:-58px; width:350px; height:350px; border-radius:50%; background:#f5dd7a; opacity:.64; }
.hero-card { position:absolute; width:315px; border-radius:22px; box-shadow:0 22px 55px rgba(24,54,43,.16); }
.card-back { right:14px; top:72px; background:var(--peach); padding:32px 31px 100px; color:#80483e; font-family:"Playfair Display",serif; font-style:italic; font-size:1.45rem; line-height:1.25; transform:rotate(8deg); }
.card-front { left:34px; top:120px; background:#edf3e8; padding:25px; transform:rotate(-6deg); overflow:hidden; }
.card-badge { display:block; color:#6b8576; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:17px; }
.card-photo { height:225px; display:grid; place-items:center; background:linear-gradient(145deg,#f1c7b7,#d0e0ca 51%,#f8e5bf); border-radius:10px; font-size:4rem; color:white; text-shadow:0 4px 8px #49665855; }
.card-front p { position:relative; margin:18px 0 0; font-family:"Playfair Display",serif; font-size:1.12rem; line-height:1.28; }
.flower { position:absolute; color:var(--clay); font-size:3rem; opacity:.83; }
.flower-one { right:5px; top:47px; }.flower-two { left:-9px; bottom:63px; color:var(--gold); }.flower-three { right:18px; bottom:21px; font-size:2rem; color:var(--forest); }
.art-caption { position:absolute; right:21px; bottom:15px; color:#536e5d; font-size:.76rem; font-weight:600; transform:rotate(-2deg); }
.how-it-works { background:var(--forest); color:white; padding:84px max(32px,calc((100% - 1116px)/2)); }
.how-it-works .eyebrow { color:#f3c9bb; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:46px; }
.steps span { display:block; margin-bottom:26px; color:#f7d08c; font-family:"Playfair Display",serif; font-size:1.5rem; }
.steps h2 { margin-bottom:10px; letter-spacing:-.045em; font-size:1.65rem; }.steps p { max-width:250px; margin:0; color:#d8e7d9; line-height:1.65; font-size:.93rem; }
.templates { max-width:1180px; margin:auto; padding:112px 32px; }.section-intro { max-width:570px; margin-bottom:40px; }.section-intro h2,.promise h2 { font-size:clamp(2.45rem,4vw,4rem); margin-bottom:17px; }.section-intro>p:last-child { color:#587063; line-height:1.65; }
.template-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:19px; }.template-card { border:1px solid var(--line); background:white; border-radius:16px; overflow:hidden; box-shadow:0 10px 25px #1a432108; transition:transform .24s,box-shadow .24s; }.template-card:hover { transform:translateY(-6px); box-shadow:0 18px 34px #1a43211b; }.template-image { position:relative; height:250px; overflow:hidden; }.garden .template-image { background:#dce9d8; }.timeline .template-image { background:#f5ddd0; }.birthday .template-image { background:#f2dfad; }.template-details { padding:23px 21px 20px; }.template-details h3 { margin-bottom:9px; font-family:"Playfair Display",serif; font-size:1.5rem; letter-spacing:-.04em; }.template-details p { min-height:43px; margin-bottom:20px; color:#587063; font-size:.87rem; line-height:1.55; }.template-details>div { display:flex; justify-content:space-between; align-items:center; }.template-details strong { font-size:.9rem; }.template-details button { border:0; padding:0; background:none; color:var(--forest); cursor:pointer; font-weight:700; }.template-details button span { margin-left:8px; font-size:1.1rem; }
.petal { position:absolute; color:var(--clay); font-size:5rem; }.p1 { top:30px; left:29px; }.p2 { bottom:5px; right:35px; color:var(--gold); }.p3 { top:65px; right:54px; color:#5f8c6d; font-size:4rem; }.template-tag { position:absolute; right:15px; top:15px; padding:6px 9px; color:#82473f; background:#fffaf1cc; border-radius:999px; font-size:.64rem; font-weight:700; }
.timeline .path { position:absolute; left:24%; top:52%; width:52%; border-top:2px dashed #b97d69; transform:rotate(-14deg); }.date { position:absolute; display:grid; place-items:center; width:58px; height:58px; color:white; background:var(--clay); border-radius:50%; font-family:"Playfair Display",serif; font-size:.68rem; line-height:1.1; text-align:center; }.d1 { left:15%; top:28%; }.d2 { left:46%; top:50%; background:var(--forest); }.d3 { right:12%; bottom:23%; background:#d79b4c; }
.ribbon { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:137px; height:137px; color:#8c5940; background:#fff8ec; border-radius:50%; font-family:"Playfair Display",serif; font-size:1.6rem; line-height:.95; text-align:center; transform:translate(-50%,-50%) rotate(-9deg); }.sparkle { position:absolute; color:#9f7350; font-size:2rem; }.s1 { left:22%; top:24%; }.s2 { right:18%; top:36%; }.s3 { bottom:20%; left:28%; }
.promise { display:flex; justify-content:space-between; align-items:center; gap:44px; padding:84px max(32px,calc((100% - 1116px)/2)); background:#e7eee3; }.promise h2 { margin:0; }.promise ul { margin:0; padding:0; list-style:none; }.promise li { margin:15px 0; color:#3f5d4e; }.promise li span { display:inline-grid; place-items:center; width:21px; height:21px; margin-right:9px; color:white; background:var(--forest); border-radius:50%; font-size:.7rem; }
footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:34px max(32px,calc((100% - 1116px)/2)); background:#17382c; color:#d5e0d3; } footer .brand { color:white; } footer .brand-mark { color:var(--forest); background:#f6cd8c; } footer p { margin:0; font-size:.78rem; }
dialog { width:min(725px,calc(100% - 30px)); max-height:min(800px,calc(100dvh - 30px)); border:0; border-radius:22px; padding:0; color:var(--ink); background:#fffaf1; box-shadow:0 24px 70px #0b1c167d; }dialog::backdrop { background:#123127a8; backdrop-filter:blur(7px); }.dialog-close { position:absolute; top:16px; right:17px; z-index:1; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; color:var(--ink); background:#e9eee5; font-size:1.7rem; line-height:1; cursor:pointer; }.builder-copy { padding:43px 45px 25px; background:#e4eee1; }.builder-copy h2 { margin-bottom:11px; font-size:2.5rem; }.builder-copy>p:not(.eyebrow) { max-width:430px; margin-bottom:18px; color:#496658; line-height:1.55; }.progress { display:flex; gap:8px; max-width:420px; margin:0; padding:0; list-style:none; }.progress li { display:flex; align-items:center; gap:5px; color:#73917e; font-size:.68rem; }.progress li:not(:last-child)::after { width:21px; height:1px; margin-left:3px; content:""; background:#b2c7b2; }.progress span { display:grid; place-items:center; width:20px; height:20px; border:1px solid #b2c7b2; border-radius:50%; font-size:.66rem; }.progress .is-current { color:var(--forest); font-weight:700; }.progress .is-current span { color:white; border-color:var(--forest); background:var(--forest); }.safe-payment { display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #bfd1be; border-radius:10px; color:#42604f; background:#f6faf2; font-size:.76rem; }.safe-payment>span:first-child { color:var(--forest); font-size:1.2rem; }.safe-payment small { color:#6d8276; }
#detail-form { padding:27px 45px 40px; }fieldset { min-width:0; margin:0; padding:0; border:0; }fieldset[hidden] { display:none; }fieldset legend { width:100%; margin-bottom:18px; font-family:"Playfair Display",serif; font-size:1.65rem; font-weight:700; letter-spacing:-.04em; }form label { display:grid; gap:7px; color:#486353; font-size:.77rem; font-weight:700; }input,textarea,select { width:100%; border:1px solid #bfd0bf; border-radius:9px; padding:11px 12px; color:var(--ink); background:white; outline:none; font-size:.92rem; font-weight:500; }input:focus,textarea:focus,select:focus { border-color:var(--forest); box-shadow:0 0 0 3px #dcebd9; }textarea { min-height:78px; resize:vertical; }input[readonly] { color:#42604f; background:#f1f5ef; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }.form-step>label { margin:16px 0; }.step-help { margin:-7px 0 18px; color:#587063; font-size:.88rem; line-height:1.55; }.form-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:24px; }.button-secondary { color:var(--forest); background:#e7eee3; }.photo-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 19px; }.photo-options label { cursor:pointer; }.photo-options input { position:absolute; opacity:0; pointer-events:none; }.photo-options span { display:grid; min-height:69px; place-items:center; align-content:center; padding:8px; border:1px solid #c4d5c2; border-radius:10px; color:#456350; background:white; font-size:1.25rem; transition:.2s; }.photo-options small { display:block; margin-top:2px; color:#6c8372; font-size:.61rem; font-weight:600; }.photo-options input:checked + span { color:var(--forest); border-color:var(--forest); background:#e7f0e4; box-shadow:inset 0 0 0 1px var(--forest); }.upload-zone { min-height:134px; justify-items:center; align-content:center; padding:20px; border:1.5px dashed #9bb6a0; border-radius:12px; color:#456350; background:#f5f9f1; cursor:pointer; text-align:center; }.upload-zone input { position:absolute; width:1px; height:1px; opacity:0; }.upload-zone strong { font-size:.9rem; }.upload-zone small { color:#718877; font-size:.7rem; }.upload-symbol { color:var(--forest); font-size:1.7rem; line-height:1; }.photo-previews { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:13px; }.photo-previews:empty { display:none; }.photo-previews figure { position:relative; aspect-ratio:1; margin:0; overflow:hidden; border-radius:8px; background:#e2ebdf; }.photo-previews img { width:100%; height:100%; object-fit:cover; }.photo-previews figcaption { position:absolute; right:3px; bottom:3px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; color:white; background:#234d3b; font-size:.6rem; }.generation-choice { display:flex; grid-template-columns:auto 1fr; align-items:start; gap:10px; padding:14px; border:1px solid #c5d6c4; border-radius:11px; background:#f3f8ef; cursor:pointer; }.generation-choice input { width:18px; height:18px; margin-top:1px; accent-color:var(--forest); }.generation-choice strong,.generation-choice small { display:block; }.generation-choice strong { color:var(--forest); font-size:.85rem; }.generation-choice small { margin-top:4px; color:#637a69; font-size:.73rem; font-weight:500; line-height:1.4; }.order-preview { margin-bottom:16px; padding:17px; border-radius:13px; background:#e4eee0; }.preview-top { display:flex; align-items:center; gap:12px; margin-bottom:15px; }.preview-flower { display:grid; place-items:center; width:43px; height:43px; color:#9b564b; background:#f4d0c2; border-radius:50%; font-size:1.5rem; }.preview-top small { color:#5d7968; font-size:.72rem; }.preview-top h3 { margin:3px 0 0; font-family:"Playfair Display",serif; font-size:1.35rem; letter-spacing:-.04em; }.order-preview dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 15px; }.order-preview dl div { padding:9px; border-radius:8px; background:#f8fbf5; }.order-preview dt { margin-bottom:3px; color:#6b8574; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.order-preview dd { margin:0; color:#365643; font-size:.74rem; line-height:1.35; }.preview-message { margin:0; color:#40604d; font-family:"Playfair Display",serif; font-size:.94rem; font-style:italic; line-height:1.35; }.preview-message span { color:#718877; font-family:"DM Sans",sans-serif; font-size:.68rem; font-style:normal; }.pay-button { width:100%; margin-top:16px; }.payment-note { margin:11px 0 0; color:#6f8374; font-size:.7rem; line-height:1.4; text-align:center; }.edit-link { display:block; margin:15px auto 0; padding:0; border:0; color:#456451; background:transparent; cursor:pointer; font-size:.76rem; text-decoration:underline; }
@media (max-width:760px) { .site-header { padding:18px 20px; }.header-link { font-size:.78rem; }.hero { min-height:auto; padding:50px 20px 66px; grid-template-columns:1fr; gap:17px; }.hero-art { height:390px; margin:4px -8px 0; transform:scale(.88); transform-origin:top center; }.card-front { left:10px; }.card-back { right:0; }.how-it-works,.templates { padding:66px 20px; }.steps,.template-grid { grid-template-columns:1fr; gap:29px; }.steps article { padding-bottom:22px; border-bottom:1px solid #ffffff30; }.steps article:last-child { padding:0; border:0; }.steps span { margin-bottom:11px; }.template-image { height:205px; }.promise { display:block; padding:65px 20px; }.promise ul { margin-top:27px; }.promise li { line-height:1.5; }footer { display:block; padding:28px 20px; }footer p { margin-top:14px; }.builder-copy { padding:36px 23px 22px; }.builder-copy h2 { font-size:2.15rem; }.progress small { display:none; }#detail-form { padding:22px 23px 30px; }.form-row { grid-template-columns:1fr; gap:16px; }.photo-options { grid-template-columns:repeat(2,1fr); }.photo-previews { grid-template-columns:repeat(4,1fr); }.form-actions { align-items:stretch; flex-direction:column-reverse; }.form-actions .button { width:100%; }.dialog-close { top:10px; right:10px; } }
.test-mode { display:inline-flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #bfd1be; border-radius:10px; color:#42604f; background:#f6faf2; font-size:.76rem; }.test-mode>span:first-child { color:var(--forest); font-size:1.2rem; }.test-mode small { color:#6d8276; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Editorial romantic redesign */
:root { --ink:#231417; --wine:#96334f; --wine-deep:#702039; --blush:#f6e6e1; --paper:#fffaf6; --mist:#f7efea; --line:rgba(103,46,61,.18); }
body { min-width:320px; color:var(--ink); background:radial-gradient(circle at 9% 10%,#fffdfb 0 10%,transparent 31%),radial-gradient(circle at 85% 10%,#e9c9c1 0,transparent 25%),radial-gradient(circle at 85% 76%,#edd0ca 0,transparent 25%),linear-gradient(130deg,#f4e4df,#fffaf6 42%,#f2dcd6); }
body::before { position:fixed; inset:0; z-index:-1; content:""; pointer-events:none; opacity:.33; background:radial-gradient(ellipse at 0% 75%,#bc7580 0 1%,transparent 30%),radial-gradient(ellipse at 100% 50%,#b8707b 0 1%,transparent 27%); filter:blur(30px); }
.site-header { position:sticky; top:16px; z-index:10; max-width:1340px; margin:16px auto 0; padding:13px 30px; border:1px solid rgba(255,255,255,.82); border-radius:22px; background:rgba(255,250,248,.72); box-shadow:0 16px 35px rgba(87,36,42,.09); backdrop-filter:blur(17px); }
.brand { gap:11px; color:var(--ink); font-family:"Playfair Display",serif; font-size:1.3rem; letter-spacing:-.055em; }
.brand-mark { width:32px; height:32px; border:0; border-radius:0; color:var(--wine); background:transparent; font-size:2rem; font-family:"Playfair Display",serif; transform:rotate(-15deg); }
.brand-name { display:grid; line-height:.9; white-space:nowrap; }
.brand-name small { margin-top:7px; color:#825e64; font-family:"DM Sans",sans-serif; font-size:.41rem; font-weight:700; letter-spacing:.23em; }
.site-nav { display:flex; align-items:center; gap:34px; margin-left:auto; margin-right:42px; }
.site-nav a { position:relative; padding:7px 0; color:#725e60; font-size:.78rem; text-decoration:none; }
.site-nav a::after { position:absolute; right:0; bottom:0; left:0; height:1.5px; content:""; background:var(--wine); transform:scaleX(0); transition:transform .2s; }
.site-nav a:hover,.site-nav a.is-active { color:var(--ink); }.site-nav a:hover::after,.site-nav a.is-active::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:22px; }.search-mark { font-size:1.55rem; line-height:1; transform:rotate(-18deg); }.header-link { display:inline-flex; align-items:center; gap:15px; padding:13px 25px; border:0; border-radius:999px; color:white; background:linear-gradient(115deg,#af5268,var(--wine-deep)); box-shadow:0 8px 15px rgba(113,32,57,.17); font-size:.8rem; font-weight:700; }.header-link span { font-size:1.15rem; }.mobile-menu { display:none; border:0; color:var(--ink); background:transparent; font-size:1.3rem; }
.hero { max-width:1300px; min-height:718px; padding:84px 28px 72px; grid-template-columns:.86fr 1.14fr; gap:28px; overflow:visible; }.hero-copy { position:relative; z-index:2; }.eyebrow { color:var(--wine); font-size:.65rem; letter-spacing:.31em; }.hero h1 { max-width:600px; color:#1e1214; font-size:clamp(3.3rem,5.1vw,5.5rem); letter-spacing:-.075em; }.hero h1 em,.section-intro h2 em,.promise h2 em { color:var(--wine); }.hero-text { max-width:480px; color:#6b5b5d; font-size:1.04rem; line-height:1.55; }.button { gap:22px; padding:16px 27px; border:1px solid transparent; font-size:.88rem; }.button-primary { background:linear-gradient(120deg,#c26077,var(--wine-deep)); box-shadow:0 11px 20px rgba(121,34,57,.21); }.button:hover { box-shadow:0 15px 25px rgba(121,34,57,.25); }.microcopy { color:#7b686a; letter-spacing:.03em; }
.hero-art { height:550px; overflow:visible; filter:drop-shadow(0 18px 28px rgba(91,42,48,.13)); }.hero-art::before { position:absolute; inset:18px 0 12px 35px; content:""; border-radius:45% 35% 42% 33%; background:radial-gradient(circle at 34% 28%,#fff8f0,transparent 30%),linear-gradient(135deg,#dcaeac,#f4dfd7 46%,#c88991); opacity:.58; filter:blur(3px); }
.bloom { position:absolute; z-index:5; color:#a13c56; font-size:5rem; line-height:1; text-shadow:0 4px 13px #87405244; }.bloom-one { top:19px; right:73px; transform:rotate(20deg); }.bloom-two { right:-9px; bottom:61px; color:#bd6876; transform:rotate(-20deg); }.bloom-three { bottom:8px; left:36px; color:#c58c79; font-size:4rem; }
.note { position:absolute; z-index:7; width:157px; min-height:142px; padding:22px 15px; color:#694143; background:linear-gradient(135deg,#fffdf8,#f7e9df); box-shadow:0 11px 20px rgba(89,39,45,.18); font-family:"Playfair Display",serif; font-size:1.05rem; font-style:italic; line-height:1.24; text-align:center; }.note b { display:block; margin-top:9px; color:var(--wine); font-size:1.35rem; }.note-top { top:51px; left:26px; transform:rotate(-7deg); }.note-bottom { right:4px; bottom:70px; transform:rotate(7deg); font-size:.92rem; }
.polaroid { position:absolute; z-index:5; top:16px; right:95px; width:211px; padding:10px 10px 17px; color:#74464a; background:#fffaf5; box-shadow:0 16px 27px rgba(74,33,38,.19); font-family:"Playfair Display",serif; text-align:center; transform:rotate(10deg); }.polaroid-photo { position:relative; height:150px; overflow:hidden; background:radial-gradient(circle at 78% 20%,#ffd9c6 0 5%,transparent 6%),linear-gradient(155deg,#ba7776 0 37%,#f2bdad 38% 54%,#7c6571 55%); }.polaroid-photo::after { position:absolute; right:-12px; bottom:-37px; left:-12px; height:78px; content:""; border-radius:50% 50% 0 0; background:#816976; }.polaroid-photo span { position:absolute; z-index:1; top:45px; left:82px; color:#fff6ec; font-size:2.2rem; }.polaroid em { display:inline-block; margin-top:9px; font-size:.94rem; }.polaroid>b { position:absolute; right:13px; bottom:8px; color:var(--wine); }
.experience-preview { position:absolute; z-index:6; top:170px; left:80px; width:min(92%,445px); padding:10px; border:1px solid #f9efe8; background:#fff8f3; box-shadow:0 20px 34px rgba(71,32,36,.25); transform:rotate(-4deg); }.preview-nav { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:2px 7px 9px; color:#4f393c; font-family:"DM Sans",sans-serif; font-size:.41rem; }.preview-nav b { font-family:"Playfair Display",serif; }.preview-nav em { padding:5px 9px; border-radius:99px; color:white; background:var(--wine); font-size:.38rem; font-style:normal; }.preview-scene { position:relative; display:grid; min-height:253px; place-content:center; overflow:hidden; padding:25px; color:white; background:linear-gradient(170deg,transparent 5%,#6f4e5a 95%),radial-gradient(ellipse at 50% -12%,#ffd8bd 0 15%,transparent 37%),linear-gradient(135deg,#a3626a 0 38%,#cca68f 39% 59%,#6a4b55 60%); text-align:center; }.preview-scene::before,.preview-scene::after { position:absolute; bottom:-38px; width:230px; height:180px; content:""; border-radius:52% 55% 0 0; background:#4e5550; opacity:.8; }.preview-scene::before { left:-38px; transform:rotate(10deg); }.preview-scene::after { right:-45px; height:130px; background:#7e7d66; transform:rotate(-12deg); }.preview-scene small,.preview-scene strong,.preview-scene span { position:relative; z-index:1; }.preview-scene small { font-size:.43rem; letter-spacing:.19em; }.preview-scene strong { margin:8px 0 1px; font-family:"Playfair Display",serif; font-size:2.3rem; font-weight:600; letter-spacing:-.05em; }.preview-scene span { color:#f3d4d3; font-size:1.5rem; }.wax-seal { position:absolute; z-index:8; bottom:29px; left:64px; display:grid; width:52px; height:52px; place-items:center; border:4px solid #7e273e; border-radius:50%; color:#f5c8ba; background:radial-gradient(circle at 35% 25%,#be6170,#722039 67%); box-shadow:0 7px 13px #57203055; font-family:"Playfair Display",serif; font-size:1.45rem; }.art-caption { z-index:9; right:40px; bottom:18px; color:#774a4c; font-family:"Playfair Display",serif; font-size:1.16rem; font-style:italic; line-height:1.16; text-align:center; }
.how-it-works { padding-top:72px; padding-bottom:72px; background:linear-gradient(120deg,#612339,#8d364d 55%,#65243a); }.how-it-works .eyebrow { color:#ffd8cc; }.steps { gap:34px; }.steps article { position:relative; padding:6px 28px 5px 0; }.steps article:not(:last-child)::after { position:absolute; top:27px; right:0; width:1px; height:76px; content:""; background:#f5ccd055; }.steps span { color:#f7d9bc; }.steps h2 { font-size:1.78rem; }.steps p { color:#f6e0dc; }
.templates { max-width:1300px; padding-top:104px; padding-bottom:104px; }.section-intro { max-width:780px; margin:0 auto 44px; text-align:center; }.section-intro h2 { color:#211316; font-size:clamp(2.6rem,4.1vw,4.3rem); }.section-intro>p:last-child { color:#716166; }.template-grid { gap:22px; }.template-card { border-color:rgba(255,255,255,.68); border-radius:18px; background:rgba(255,250,247,.88); box-shadow:0 14px 34px rgba(99,45,53,.1); }.template-card:hover { box-shadow:0 21px 40px rgba(99,45,53,.16); }.template-image { height:279px; }.garden .template-image { background:radial-gradient(circle at 75% 18%,#ffe4cb 0 7%,transparent 8%),linear-gradient(155deg,#896268,#d39e94 40%,#564955 41%,#b2807b 72%,#f4c0aa); }.garden .template-image::after { position:absolute; inset:35% -7% -7%; content:"Jardín de razones"; color:#fff4ed; font-family:"Playfair Display",serif; font-size:2rem; text-align:center; text-shadow:0 2px 9px #35232d66; }.timeline .template-image { background:linear-gradient(135deg,#f7e4d8,#f1d5cd); }.birthday .template-image { background:radial-gradient(circle at 50% 30%,#ffd6c6,transparent 23%),linear-gradient(145deg,#b65965,#f5c1ad 50%,#f3dbcc); }.template-details { padding:25px 23px 22px; }.template-details h3 { color:#251417; font-size:1.68rem; }.template-details p { color:#705e62; }.template-details strong { color:var(--wine); font-family:"Playfair Display",serif; font-size:1.05rem; }.template-details button { padding:9px 16px; border:1px solid var(--wine); border-radius:99px; color:var(--wine); }.template-details button:hover { color:white; background:var(--wine); }.petal { color:#f6ded4; opacity:.9; }.template-tag { color:white; background:linear-gradient(120deg,#be5970,#84243f); }
.promise { background:linear-gradient(115deg,#f1d8d2,#f9eee7 58%,#ead1c8); }.promise li { color:#5d484b; }.promise li span { background:var(--wine); }.promise h2 { color:#251417; }
footer { background:#542136; }footer .brand-mark { color:#f6d6cb; background:transparent; }footer p { color:#ead8d4; }
dialog { width:min(1000px,calc(100% - 30px)); border:1px solid rgba(255,255,255,.8); border-radius:24px; color:#2b171c; background:#fff9f6; }.builder-copy { padding:43px 50px 28px; background:linear-gradient(115deg,#f0d6d1,#fff5ef 72%); }.builder-copy h2 { color:#251417; }.builder-copy>p:not(.eyebrow) { color:#715d60; }.progress .is-current { color:var(--wine); }.progress .is-current span { border-color:var(--wine); background:var(--wine); }.progress li:not(:last-child)::after { background:#d6abae; }.progress span { border-color:#d6abae; }#detail-form { padding:30px 50px 43px; }fieldset legend { color:#281518; }form label { color:#62494d; }input,textarea,select { border-color:#dcc6c3; color:#271519; background:#fffefd; }input:focus,textarea:focus,select:focus { border-color:var(--wine); box-shadow:0 0 0 3px #f4dde0; }input[readonly] { color:#7d4c56; background:#fdf0eb; }.button-secondary { color:var(--wine); background:#f4dfda; }.photo-options input:checked + span { color:var(--wine); border-color:var(--wine); background:#fff0ed; box-shadow:inset 0 0 0 1px var(--wine); }.upload-zone { border-color:#c99da2; color:#6f4951; background:#fff7f3; }.upload-symbol { color:var(--wine); }.generation-choice { border-color:#dbbdbe; background:#fff5f1; }.generation-choice input { accent-color:var(--wine); }.generation-choice strong { color:var(--wine); }.order-preview { background:#f5e3de; }.preview-flower { color:var(--wine); background:#f1cdd0; }.preview-top h3 { color:#4b2930; }.test-mode { border-color:#debcb6; color:#74464d; background:#fff6ef; }.test-mode>span:first-child { color:var(--wine); }.payment-note { color:#80686b; }
@media (max-width:900px) { .site-header { margin:10px 15px 0; padding:12px 18px; }.site-nav { gap:18px; margin-right:21px; }.header-actions { gap:13px; }.header-link { padding:11px 16px; }.hero { grid-template-columns:1fr; max-width:720px; padding-top:69px; }.hero-copy { text-align:center; }.hero h1,.hero-text { margin-right:auto; margin-left:auto; }.hero-art { width:min(620px,100%); margin:0 auto; }.microcopy { text-align:center; } }
@media (max-width:600px) { .site-header { position:relative; top:0; margin:0; border-width:0 0 1px; border-radius:0; background:rgba(255,250,248,.86); }.brand { font-size:1.05rem; }.brand-mark { width:27px; font-size:1.7rem; }.site-nav,.search-mark,.header-link { display:none; }.mobile-menu { display:block; }.header-actions { margin-left:auto; }.hero { padding:53px 20px 22px; gap:2px; }.hero h1 { font-size:clamp(3.04rem,13vw,4.2rem); }.hero-text { font-size:1rem; }.hero .button { width:100%; }.hero-art { height:445px; margin:4px auto 0; transform:none; }.hero-art::before { inset:10px -30px 35px -30px; }.experience-preview { top:171px; left:6px; width:96%; }.preview-scene { min-height:208px; }.preview-scene strong { font-size:1.9rem; }.polaroid { top:26px; right:17px; width:160px; padding:7px 7px 13px; }.polaroid-photo { height:109px; }.polaroid-photo span { top:29px; left:62px; font-size:1.8rem; }.polaroid em { font-size:.76rem; }.note { width:126px; min-height:112px; padding:16px 9px; font-size:.83rem; }.note-top { top:55px; left:4px; }.note-bottom { right:-2px; bottom:43px; font-size:.74rem; }.bloom-one { top:25px; right:4px; font-size:3.6rem; }.bloom-two { right:-16px; bottom:34px; font-size:3.7rem; }.bloom-three { left:11px; bottom:0; font-size:2.8rem; }.wax-seal { bottom:20px; left:24px; width:43px; height:43px; font-size:1.2rem; }.art-caption { right:35px; bottom:7px; font-size:.85rem; }.how-it-works,.templates { padding:63px 20px; }.steps article:not(:last-child)::after { top:auto; right:0; bottom:0; left:0; width:auto; height:1px; }.section-intro { text-align:left; }.template-image { height:235px; }.promise { padding:60px 20px; }.builder-copy { padding:34px 23px 22px; }#detail-form { padding:22px 23px 32px; } }