/* =============================================================
   Esbelita — дизайн «Mercado Cítrico»
   Тёплая кремовая база, мандариново-манговые акценты из упаковки,
   зелёный «лист» как второй цвет, арочные окна, лучи солнца, стикеры.
============================================================== */
:root{
  --cream:#FFF7EA; --cream-2:#FCEFD9; --paper:#FFFFFF;
  --ink:#2B1D12; --ink-soft:#6E5B4B; --line:#F0DFC8;
  --orange:#EE6A1C; --orange-deep:#C24E0C; --orange-50:#FDE7D8;
  --mango:#FFC23D; --mango-50:#FFF1CC;
  --leaf:#2F6B3A; --leaf-deep:#1E4A27; --leaf-50:#E6F1E3;
  --grape:#D9483B; --grape-50:#FCE7E2;
  --r:24px; --wide:1160px;
  --head:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh:0 1px 2px rgba(60,30,10,.05), 0 14px 34px rgba(120,60,20,.09);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--head); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em; font-variation-settings:"SOFT" 50;}
h2{font-size:clamp(28px,3.6vw,44px); max-width:20ch;}
h3{font-size:clamp(19px,2vw,22px); margin-top:1.4em; font-weight:600;}
h3.first{margin-top:0;}
p{margin:0 0 1em;}
a{color:var(--orange-deep);}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px;}
.icon{width:22px; height:22px; flex:none;}
.ph{background:#FFF1A8; color:#5F4600; font-weight:700; padding:1px 6px; border-radius:6px; font-family:var(--body); font-size:.85em; letter-spacing:0;}
.lead{font-size:18px; color:var(--ink-soft); max-width:640px;}
section{padding:88px 0; scroll-margin-top:72px;}
section.tint{background:var(--cream-2);}

/* section kicker: big outlined number + label */
.kicker{display:flex; align-items:center; gap:14px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:10px;}
.kicker .num{font-family:var(--head); font-size:44px; line-height:1; letter-spacing:0; color:transparent; -webkit-text-stroke:1.6px var(--orange); font-weight:700;}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:40; background:rgba(255,247,234,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.logo .mark{width:38px; height:38px; flex:none;}
.logo .wm{font-family:var(--head); font-weight:700; font-size:23px; line-height:1; display:flex; flex-direction:column;}
.logo .wm small{font-family:var(--body); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf); margin-top:4px;}
nav.main{display:flex; gap:2px;}
nav.main a{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600; padding:8px 13px; border-radius:30px;}
nav.main a:hover{background:var(--mango-50); color:var(--orange-deep);}
.btn-sm{background:var(--leaf-deep); color:#fff; font-weight:700; font-size:14px; padding:11px 20px; border-radius:40px; cursor:pointer;}
.btn-sm:hover{background:var(--ink);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--orange); color:#fff; font-family:var(--body); font-weight:800; font-size:17px; padding:16px 18px 16px 30px; border-radius:60px; cursor:pointer; text-decoration:none; transition:background .15s, transform .12s; box-shadow:0 6px 0 var(--orange-deep), 0 16px 30px rgba(238,106,28,.3);}
.btn:hover{background:#F57A2E; transform:translateY(-2px);}
.btn:active{transform:translateY(2px); box-shadow:0 3px 0 var(--orange-deep);}
.btn .ar{width:32px; height:32px; border-radius:50%; background:#fff; color:var(--orange); display:flex; align-items:center; justify-content:center;}
.btn .ar .icon{width:17px; height:17px;}
.btn.dark{background:var(--leaf-deep); box-shadow:0 6px 0 #0F2E16, 0 16px 30px rgba(15,46,22,.3);}
.btn.dark .ar{color:var(--leaf-deep);}
.btn.dark:hover{background:#265A31;}
.btn-note{font-size:13px; color:var(--ink-soft);}

/* ---------- hero ---------- */
.hero{padding:52px 0 70px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,194,61,.35) 0, rgba(255,194,61,0) 34%),
    radial-gradient(circle at 0% 100%, rgba(156,198,75,.22) 0, rgba(156,198,75,0) 36%),
    var(--cream);}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.pill{display:inline-block; background:var(--leaf-50); color:var(--leaf-deep); border:1px solid #CFE3CA; font-weight:700; font-size:13px; letter-spacing:.04em; padding:7px 14px; border-radius:40px; margin-bottom:18px;}
.hero h1{font-size:clamp(32px,4.4vw,56px); line-height:1.06; margin-bottom:18px; isolation:isolate;}
.hero h1 em{font-style:italic; color:var(--orange); font-weight:650; position:relative; white-space:nowrap;}
.hero h1 em::after{content:""; position:absolute; left:2%; right:2%; bottom:.04em; height:.16em; background:var(--mango); border-radius:4px; z-index:-1; opacity:.8;}
.hero .lead{margin-bottom:22px;}
.checks{list-style:none; padding:0; margin:0 0 28px; display:grid; gap:10px;}
.checks li{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:15.5px;}
.checks .icon{width:22px; height:22px; color:#fff; background:var(--leaf); border-radius:50%; padding:4px; margin-top:1px;}
.price-tag{display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border:2px dashed var(--orange); border-radius:16px; padding:12px 20px; margin-bottom:22px; position:relative;}
.price-tag::before{content:""; position:absolute; left:-9px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--cream); border:2px dashed var(--orange); border-left-color:transparent; border-bottom-color:transparent; transform:rotate(45deg);}
.price-tag .old{color:var(--ink-soft); text-decoration:line-through;}
.price-tag .new{font-family:var(--head); font-weight:700; font-size:30px; color:var(--orange-deep); line-height:1;}
.price-tag .save{background:var(--grape); color:#fff; font-weight:800; font-size:13px; padding:5px 10px; border-radius:20px;}
.price-tag .save .ph{background:transparent; color:#fff; padding:0;}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;}

.hero-visual{position:relative; display:flex; justify-content:center;}
.arch{position:relative; width:min(400px,86vw); aspect-ratio:4/5; border-radius:999px 999px 32px 32px; overflow:hidden; background:linear-gradient(180deg,#FFD266 0%, #FFB238 45%, #F58A2B 100%); box-shadow:0 0 0 10px #fff, 0 30px 60px rgba(194,78,12,.25); display:flex; align-items:flex-end; justify-content:center;}
.rays{position:absolute; inset:-30%; background:repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,255,255,.22) 0 7deg, rgba(255,255,255,0) 7deg 18deg);}
.arch img{position:relative; z-index:1; height:90%; width:auto; max-width:none; filter:drop-shadow(0 24px 26px rgba(90,30,0,.35)); margin-bottom:4%;}
.sticker{position:absolute; z-index:2; top:18%; left:6%; background:var(--grape); color:#fff; font-weight:800; font-size:13.5px; letter-spacing:.02em; padding:10px 16px; border-radius:40px; transform:rotate(-8deg); box-shadow:0 8px 18px rgba(217,72,59,.35);}
.stamp{position:absolute; width:118px; height:118px; right:calc(50% - min(200px,43vw) - 30px); bottom:-26px; z-index:3; animation:spin 22s linear infinite; filter:drop-shadow(0 10px 18px rgba(30,74,39,.3));}
@keyframes spin{to{transform:rotate(360deg);}}

/* ribbon + byline */
.ribbon{background:var(--leaf-deep); color:#F4E9D2;}
.ribbon .wrap{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 44px; padding-top:16px; padding-bottom:16px;}
.ribbon .wrap > div{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px;}
.ribbon .icon{color:var(--mango);}
.byline{background:#fff; border-bottom:1px solid var(--line);}
.byline .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; padding-top:16px; padding-bottom:16px; font-size:13.5px; color:var(--ink-soft);}
.byline .wrap > div{display:flex; align-items:center; gap:8px;}
.byline .icon{width:18px; height:18px; color:var(--orange);}
.byline strong{color:var(--ink);}

/* ---------- qué es ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:28px; align-items:start;}
.about .big{font-size:18.5px; line-height:1.65;}
.mini-fig{margin:30px 0 0; display:flex; justify-content:center;}
.mini-arch{width:230px; height:280px; flex:none; border-radius:999px 999px 22px 22px; background:linear-gradient(180deg,#FFD266,#F58A2B); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; box-shadow:0 0 0 6px #fff, var(--sh);}
.mini-arch img{height:90%; width:auto; filter:drop-shadow(0 10px 10px rgba(90,30,0,.3));}
.mini-fig figcaption,.ill-fig figcaption,.plate-fig figcaption{font-size:13.5px; color:var(--ink-soft); font-style:italic;}
.mini-fig figcaption::before{content:""; display:inline-block; width:22px; height:2px; background:var(--orange); vertical-align:middle; margin-right:10px;}

/* «ficha» styled like a supplement facts label */
.label-card{background:#fff; border:3px solid var(--ink); border-radius:6px; padding:16px 20px 8px; box-shadow:10px 10px 0 var(--mango);}
.label-head{font-family:var(--head); font-weight:700; font-size:26px; padding-bottom:8px; border-bottom:10px solid var(--ink); margin-bottom:2px;}
.label-table{width:100%; border-collapse:collapse; font-size:15px;}
.label-table th,.label-table td{text-align:left; vertical-align:top; padding:10px 0; border-bottom:1px solid var(--ink);}
.label-table tr:last-child th,.label-table tr:last-child td{border-bottom:none;}
.label-table th{width:42%; padding-right:14px; font-weight:800;}
.label-table td{font-weight:500;}
.label-table tr:nth-child(4) th,.label-table tr:nth-child(4) td{border-bottom-width:5px;}

.leaf-card{margin-top:36px; background:var(--leaf-deep); color:#E4EFDF; border-radius:var(--r); padding:34px 38px; position:relative; overflow:hidden;}
.leaf-card::after{content:""; position:absolute; width:220px; height:220px; right:-70px; top:-70px; border-radius:50%; background:radial-gradient(circle,#3C7F47 0,#2F6B3A 60%,transparent 61%);}
.leaf-card h3{color:#fff; margin-top:0; position:relative; z-index:1; max-width:30ch;}
.leaf-card p{margin:0; position:relative; z-index:1; max-width:78ch;}

/* ---------- ventajas ---------- */
.perks{list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:p;}
.perks li{counter-increment:p; background:#fff; border-radius:var(--r); padding:24px 24px 24px 22px; display:flex; gap:16px; align-items:center; font-weight:700; font-size:16px; line-height:1.4; box-shadow:var(--sh); position:relative;}
.perks li::after{content:counter(p,decimal-leading-zero); position:absolute; top:12px; right:16px; font-family:var(--head); font-size:13px; color:#D9C3A2;}
.perks .sl{width:46px; height:46px; flex:none;}

/* ---------- ingredientes ---------- */
.ing-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; margin-top:28px; align-items:start;}
.ill-fig{margin:0;}
.ill-arch{border-radius:999px 999px 28px 28px; background:var(--mango-50); overflow:hidden; box-shadow:0 0 0 8px #fff, var(--sh); aspect-ratio:400/420;}
.ill-arch.alt{background:var(--leaf-50); aspect-ratio:400/380;}
.ill-arch svg{width:100%; height:100%; display:block;}
.ill-fig figcaption{margin-top:16px; text-align:center;}
.ing-list{display:grid; gap:14px;}
.ing{display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; align-items:flex-start;}
.ing-ic{width:68px; height:68px; flex:none; border-radius:50%; background:var(--mango-50); display:flex; align-items:center; justify-content:center;}
.ing-ic svg{width:46px; height:46px;}
.ing h4{font-size:19px; margin:2px 0 0;}
.ing .latin{display:block; font-style:italic; font-size:13.5px; color:var(--leaf); margin-bottom:6px;}
.ing p{margin:0; font-size:15px; color:var(--ink-soft);}
.after-ing{display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin-top:28px;}
.paper-card{background:#fff; border-radius:var(--r); padding:28px 30px; box-shadow:var(--sh);}
.paper-card p{margin:0;}
.note{background:var(--orange-50); border-radius:var(--r); padding:26px 28px; color:#7A3510; font-size:15px; display:flex; gap:14px; border:1px solid #F7CBAE;}
.note .icon{color:var(--orange); margin-top:3px;}
.note strong{display:block; font-family:var(--head); font-size:18px; color:var(--orange-deep); margin-bottom:4px;}

/* ---------- modo de uso ---------- */
.use-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; margin-top:28px; align-items:center;}
.schedule{display:grid; gap:12px;}
.slot{display:grid; grid-template-columns:130px 1fr; align-items:center; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--sh);}
.slot .when{align-self:stretch; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; font-family:var(--head); font-weight:700; font-size:18px; padding:16px 10px;}
.slot:nth-child(2) .when{background:var(--orange-deep);}
.slot.dur .when{background:var(--leaf);}
.slot .what{padding:14px 20px; font-size:15.5px;}
.fast{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; margin-top:44px; background:#fff; border-radius:var(--r); padding:30px 34px; box-shadow:var(--sh);}
.stat{width:190px; height:190px; border-radius:50%; background:var(--mango); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; box-shadow:inset 0 0 0 8px #FFD777;}
.stat .v{font-family:var(--head); font-weight:700; font-size:34px; line-height:1; color:var(--ink);}
.stat .k{font-size:13px; font-weight:700; line-height:1.3; margin-top:8px; color:#5A3B00;}
.fast p{margin:0;}

/* ---------- opiniones ---------- */
.rev{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:30px 0;}
.rev-col h4{font-family:var(--body); font-size:14.5px; font-weight:800; display:inline-flex; gap:8px; align-items:center; padding:8px 16px; border-radius:30px; margin:0 0 14px;}
.rev-col h4 .icon{width:16px; height:16px;}
.rev-col.pos h4{background:var(--leaf-50); color:var(--leaf-deep);}
.rev-col.neg h4{background:var(--grape-50); color:var(--grape);}
.q{background:#fff; border-radius:20px 20px 20px 6px; padding:20px 22px; margin-bottom:14px; box-shadow:var(--sh); border:1px solid var(--line);}
.q blockquote{margin:0 0 12px; font-size:15.5px;}
.q .who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft);}
.q .who b{color:var(--ink);}
.q .av{width:32px; height:32px; border-radius:50%; background:var(--mango-50); color:var(--orange-deep); display:flex; align-items:center; justify-content:center; font-weight:800;}
.expect{background:var(--mango-50); border-radius:var(--r); padding:28px 32px; border:2px solid var(--mango);}
.expect p{margin:0;}

/* ---------- precio (ticket) ---------- */
.ticket{display:grid; grid-template-columns:.85fr 1.15fr; background:#fff; border-radius:30px; box-shadow:var(--sh); margin-top:30px; position:relative;}
.ticket .pic{position:relative; overflow:hidden; border-radius:30px 0 0 30px; background:linear-gradient(180deg,#FFD266 0%, #F58A2B 100%); display:flex; align-items:center; justify-content:center; padding:40px; min-height:420px;}
.ticket .pic img{position:relative; z-index:1; width:auto; max-height:420px; filter:drop-shadow(0 22px 24px rgba(90,30,0,.35));}
.ticket .info{padding:42px 44px; position:relative; border-left:3px dashed var(--line);}
.ticket .info::before,.ticket .info::after{content:""; position:absolute; left:-19px; width:34px; height:34px; border-radius:50%; background:var(--cream-2);}
.ticket .info::before{top:-17px;} .ticket .info::after{bottom:-17px;}
.ticket-price{background:var(--cream); border-radius:20px; padding:22px 24px; margin:6px 0 4px;}
.ticket-price .nm{font-family:var(--head); font-size:26px; font-weight:700;}
.ticket-price .pr{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:6px 0 2px;}
.ticket-price .old{color:var(--ink-soft); text-decoration:line-through;}
.ticket-price .new{font-family:var(--head); font-size:34px; font-weight:700; color:var(--orange-deep);}
.ticket-price .pn{font-size:13px; color:var(--ink-soft); margin-bottom:20px;}
.tips{list-style:none; padding:0; margin:12px 0 0;}
.tips li{display:flex; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px; font-weight:600;}
.tips li:last-child{border-bottom:none;}
.tips .icon{color:#fff; background:var(--orange); border-radius:50%; width:22px; height:22px; padding:4px; margin-top:1px;}

/* ---------- faq ---------- */
.faq{max-width:880px; margin-top:30px;}
.faq details{border-top:2px solid var(--ink);}
.faq details:last-child{border-bottom:2px solid var(--ink);}
.faq summary{list-style:none; cursor:pointer; padding:22px 64px 22px 0; font-family:var(--head); font-weight:600; font-size:19px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:4px; top:50%; width:36px; height:36px; margin-top:-18px; border-radius:50%; background:var(--mango) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%232B1D12' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat; transition:transform .2s, background-color .2s;}
.faq details[open] summary::after{transform:rotate(45deg); background-color:var(--orange);}
.faq details p{margin:0; padding:0 64px 24px 0; color:var(--ink-soft);}

/* ---------- día a día ---------- */
.daily{display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; margin-top:28px; align-items:start;}
.plate-fig{margin:0; text-align:center;}
.plate-fig svg{width:100%; max-width:340px; margin:0 auto; filter:drop-shadow(0 18px 26px rgba(120,60,20,.14));}
.plate-fig figcaption{margin:14px 0 12px;}
.legend{list-style:none; padding:0; margin:0 auto; display:grid; gap:8px; max-width:300px; text-align:left;}
.legend li{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600;}
.legend i{width:16px; height:16px; border-radius:50%; flex:none;}
.infobox{display:flex; gap:16px; background:#fff; border-radius:var(--r); padding:26px 28px; box-shadow:var(--sh); margin-top:22px;}
.infobox .ic{width:46px; height:46px; border-radius:14px; background:var(--orange-50); color:var(--orange); display:flex; align-items:center; justify-content:center; flex:none;}
.infobox h3{margin-top:4px;}
.infobox p{margin:0;}

/* ---------- final ---------- */
.final-wrap{padding:88px 24px 0;}
.final{max-width:calc(var(--wide) - 48px); margin:0 auto; border-radius:36px; background:linear-gradient(135deg,#FFE08A 0%, #FFB238 55%, #F58A2B 100%); display:grid; grid-template-columns:1.1fr .9fr; align-items:end; overflow:hidden; position:relative;}
.final::before{content:""; position:absolute; width:260px; height:260px; left:-90px; bottom:-120px; border-radius:50%; background:rgba(255,255,255,.22);}
.final .txt{padding:64px 40px 64px 64px; position:relative; z-index:1; align-self:center;}
.final h2{font-size:clamp(28px,3.4vw,42px);}
.final p{font-size:17.5px; color:#4A2A10; margin-bottom:28px;}
.final .pic{position:relative; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; padding-top:40px;}
.final .win{position:relative; width:300px; height:390px; border-radius:999px 999px 0 0; background:rgba(255,255,255,.28); overflow:hidden; display:flex; align-items:flex-end; justify-content:center;}
.final .win .rays{inset:-40%;}
.final .win img{position:relative; z-index:1; height:350px; width:auto; max-width:none; filter:drop-shadow(0 24px 26px rgba(90,30,0,.35)); margin-bottom:-6px;}
.sources{padding:56px 0 64px; font-size:14px; color:var(--ink-soft);}
.sources h2{font-size:19px; max-width:none;}
.sources .wrap{max-width:880px;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#C9B9A6; padding:46px 0; font-size:13.5px;}
footer .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #4A3828;}
footer .logo{color:#fff;}
footer .logo .wm small{color:var(--mango);}
footer .legal{display:flex; gap:22px; flex-wrap:wrap;}
footer a{color:#F1E3CF;}
footer p{max-width:900px; margin:0 0 10px;}
footer strong{color:#fff;}

/* ---------- sticky cta (mobile) ---------- */
.sticky-cta{display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:50; background:#fff; border-radius:60px; padding:8px 8px 8px 20px; box-shadow:0 10px 30px rgba(60,30,10,.22); border:1px solid var(--line);}
.sticky-cta .row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.sticky-cta .price{font-family:var(--head); font-weight:700; font-size:16px; line-height:1.2; color:var(--orange-deep);}
.sticky-cta .price s{display:block; font-family:var(--body); font-size:12px; color:var(--ink-soft); font-weight:400;}
.sticky-cta .btn{padding:11px 18px; font-size:15px; box-shadow:0 4px 0 var(--orange-deep);}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  nav.main{display:none;}
  .perks{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  body{font-size:16px;}
  section{padding:60px 0;}
  .hero{padding:30px 0 56px;}
  .hero .wrap{grid-template-columns:1fr; gap:30px;}
  .hero-visual{order:-1;}
  .arch{width:min(320px,78vw);}
  .stamp{width:96px; height:96px; right:calc(50% - min(160px,39vw) - 22px); bottom:-18px;}
  .about,.ing-layout,.after-ing,.use-layout,.rev,.ticket,.daily,.final{grid-template-columns:1fr;}
  .ill-fig{max-width:420px; margin:0 auto; width:100%;}
  .label-card{box-shadow:6px 6px 0 var(--mango);}
  .ticket .pic{border-radius:30px 30px 0 0; min-height:0; padding:30px;}
  .ticket .pic img{max-height:300px;}
  .ticket .info{border-left:none; border-top:3px dashed var(--line); padding:32px 24px;}
  .ticket .info::before{left:-17px; top:-19px;}
  .ticket .info::after{left:auto; right:-17px; top:-19px; bottom:auto;}
  .fast{grid-template-columns:1fr; justify-items:center; text-align:left; padding:28px 24px;}
  .final{border-radius:28px;}
  .final .txt{padding:8px 24px 48px; text-align:center; order:2;}
  .final .pic{order:1; padding-top:36px;}
  .final .win{width:230px; height:290px; border-radius:999px 999px 24px 24px;}
  .final .win img{height:260px; margin-bottom:6px;}
  .final-wrap{padding:60px 16px 0;}
  .leaf-card{padding:28px 24px;}
  .btn-sm{display:none;}
  .sticky-cta{display:block;}
  footer{padding-bottom:110px;}
}
@media (max-width:560px){
  .perks{grid-template-columns:1fr;}
  .slot{grid-template-columns:96px 1fr;}
  .slot .when{font-size:16px;}
  .hero h1 em{white-space:normal;}
  .cta-row .btn{width:100%;}
  .cta-row{justify-content:center; text-align:center;}
  .price-tag{width:100%; justify-content:center;}
  .faq summary{font-size:17px; padding-right:52px;}
  .faq details p{padding-right:0;}
  .ing{padding:18px; gap:14px;}
  .ing-ic{width:56px; height:56px;}
  .ing-ic svg{width:38px; height:38px;}
  .label-table th{width:46%;}
  .kicker .num{font-size:36px;}
  .stat{width:160px; height:160px;}
  .stat .v{font-size:28px;}
  .infobox,.note{flex-direction:column; gap:10px;}
  .mini-arch{width:190px; height:232px;}
}
:focus-visible{outline:3px solid var(--leaf); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .stamp{animation:none;} .btn{transition:none;}}

/* logo image */
.logo img{display:block; height:44px; width:auto;}
footer .logo img{height:38px; background:#FFF7EA; padding:8px 14px; border-radius:12px; box-sizing:content-box;}
@media (max-width:600px){.logo img{height:36px;}}