/* =============================================================
   Candid-ex — дизайн «Talavera Azul»
   Белая база с кобальтовым узором талаверы, волны из этикетки,
   ромбы-номера разделов, плитки-«азулехос», оранжевый акцент (naranja amarga).
============================================================== */
:root{
  --cobalt:#2E62C9; --cobalt-deep:#16397A; --navy:#0E2552; --sky:#EAF1FB; --sky-2:#F4F8FE; --line:#D6E2F4;
  --ink:#14213D; --ink-soft:#56627A; --paper:#FFFFFF;
  --orange:#F08A24; --orange-deep:#C96A0E; --orange-50:#FEF0E1;
  --jamaica:#C2185B; --jamaica-50:#FBE6EE; --green:#2E7D4F; --green-50:#E5F3EA;
  --r:20px; --wide:1160px;
  --head:"DM Serif Display", Georgia, "Times New Roman", serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sh:0 1px 2px rgba(14,37,82,.05), 0 14px 34px rgba(14,37,82,.08);
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%232E62C9' stroke-width='1.6'%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3Cpath d='M44 6c9 12 9 22 0 31-9-9-9-19 0-31zM44 82c-9-12-9-22 0-31 9 9 9 19 0 31zM6 44c12-9 22-9 31 0-9 9-19 9-31 0zM82 44c-12 9-22 9-31 0 9-9 19-9 31 0z'/%3E%3Cpath d='M0 0h88v88H0z' stroke-opacity='.6'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3Ccircle cx='88' cy='0' r='11'/%3E%3Ccircle cx='0' cy='88' r='11'/%3E%3Ccircle cx='88' cy='88' r='11'/%3E%3C/g%3E%3C/svg%3E");
  --tile-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6'%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3Cpath d='M44 6c9 12 9 22 0 31-9-9-9-19 0-31zM44 82c-9-12-9-22 0-31 9 9 9 19 0 31zM6 44c12-9 22-9 31 0-9 9-19 9-31 0zM82 44c-12 9-22 9-31 0 9-9 19-9 31 0z'/%3E%3Cpath d='M0 0h88v88H0z' stroke-opacity='.6'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3Ccircle cx='88' cy='0' r='11'/%3E%3Ccircle cx='0' cy='88' r='11'/%3E%3Ccircle cx='88' cy='88' r='11'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); 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.12; margin:0 0 .5em; font-weight:400; letter-spacing:-.005em;}
h2{font-size:clamp(30px,3.8vw,46px); max-width:22ch;}
h3{font-size:clamp(20px,2.1vw,24px); margin-top:1.4em;}
h3.first{margin-top:0;}
h4{font-size:20px;}
p{margin:0 0 1em;}
a{color:var(--cobalt);}
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.soft{background:var(--sky-2);}

/* talavera pattern layers */
.tiles{position:relative;}
.tiles::before{content:""; position:absolute; inset:0; background:var(--tile) 0 0/88px 88px; opacity:.09; pointer-events:none;}
.tiles-dark{position:relative; background:var(--cobalt-deep);}
.tiles-dark::before{content:""; position:absolute; inset:0; background:var(--tile-w) 0 0/88px 88px; opacity:.08; pointer-events:none;}

/* section head: number in a diamond tile */
.sec-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.sec-head .dia{width:38px; height:38px; display:flex; align-items:center; justify-content:center; position:relative; color:#fff; font-family:var(--head); font-size:19px; z-index:0;}
.sec-head .dia::before{content:""; position:absolute; inset:5px; background:var(--cobalt); transform:rotate(45deg); border-radius:4px; z-index:-1; box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--cobalt);}
section.soft .sec-head .dia::before{box-shadow:0 0 0 3px var(--sky-2), 0 0 0 5px var(--cobalt);}
.sec-head .lbl{font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt);}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.93); 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:12px; text-decoration:none; color:var(--ink);}
.logo .mark{width:40px; height:40px; flex:none; border-radius:10px; background:var(--cobalt-deep); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 3px var(--cobalt-deep), inset 0 0 0 5px #fff;}
.logo .mark svg{width:26px; height:26px;}
.logo .wm{font-family:var(--head); font-size:25px; line-height:1; display:flex; flex-direction:column;}
.logo .wm small{font-family:var(--body); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-deep); margin-top:5px;}
nav.main{display:flex; gap:2px;}
nav.main a{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:700; padding:8px 13px; border-radius:8px;}
nav.main a:hover{background:var(--sky); color:var(--cobalt-deep);}
.btn-sm{background:var(--cobalt-deep); color:#fff; font-weight:800; font-size:14px; padding:11px 20px; border-radius:10px; cursor:pointer;}
.btn-sm:hover{background:var(--navy);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--cobalt); color:#fff; font-family:var(--body); font-weight:800; font-size:16.5px; padding:16px 28px; border-radius:12px; cursor:pointer; text-decoration:none; transition:background .15s, transform .12s, box-shadow .15s; box-shadow:0 12px 26px rgba(46,98,201,.32);}
.btn .icon{width:20px; height:20px; transition:transform .15s;}
.btn:hover{background:var(--cobalt-deep); transform:translateY(-2px);}
.btn:hover .icon{transform:translateX(3px);}
.btn.orange{background:var(--orange); box-shadow:0 12px 26px rgba(240,138,36,.35);}
.btn.orange:hover{background:var(--orange-deep);}
.btn-note{font-size:13px; color:var(--ink-soft); margin:12px 0 0;}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#F4F8FE 0%,#FFFFFF 100%); padding:56px 0 84px; overflow:hidden;}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.tag{display:inline-block; background:#fff; border:1.5px solid var(--cobalt); color:var(--cobalt-deep); font-weight:800; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:8px; margin-bottom:20px;}
.hero h1{font-size:clamp(32px,4.3vw,56px); line-height:1.05; margin-bottom:18px;}
.hero h1 em{font-style:italic; color:var(--cobalt);}
.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:700; font-size:15.5px;}
.checks .icon{width:22px; height:22px; color:#fff; background:var(--cobalt); border-radius:6px; padding:4px; margin-top:1px;}
.buy{display:inline-flex; align-items:center; flex-wrap:wrap; gap:14px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px 12px 12px 22px; box-shadow:var(--sh);}
.prices{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.prices .old{color:var(--ink-soft); text-decoration:line-through;}
.prices .new{font-family:var(--head); font-size:32px; line-height:1; color:var(--cobalt-deep);}
.prices .save{background:var(--orange); color:#fff; font-weight:800; font-size:13px; padding:5px 10px; border-radius:8px;}
.prices .save .ph{background:transparent; color:#fff; padding:0;}

.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:460px;}
.medallion{position:absolute; width:min(340px,70vw); aspect-ratio:1; transform:rotate(45deg); border-radius:28px; background:var(--cobalt-deep); box-shadow:inset 0 0 0 10px var(--cobalt-deep), inset 0 0 0 13px #fff, inset 0 0 0 22px var(--cobalt), 0 30px 60px rgba(14,37,82,.28); overflow:hidden;}
.medallion::before{content:""; position:absolute; inset:-20%; background:var(--tile-w) 0 0/70px 70px; opacity:.16; transform:rotate(-45deg);}
.medallion .orn{position:absolute; width:46px; height:46px; color:var(--orange);}
.medallion .o1{top:30px; left:30px;} .medallion .o2{top:30px; right:30px;} .medallion .o3{bottom:30px; left:30px;} .medallion .o4{bottom:30px; right:30px;}
.hero-visual img{position:relative; z-index:1; width:min(250px,52vw); filter:drop-shadow(0 26px 28px rgba(14,37,82,.4));}
.badge{position:absolute; z-index:2; top:9%; right:4%; background:var(--orange); color:#fff; font-weight:800; font-size:13.5px; padding:10px 16px; border-radius:10px; transform:rotate(5deg); box-shadow:0 10px 20px rgba(240,138,36,.35);}

/* ribbon + byline */
.ribbon{position:relative; background:var(--cobalt-deep); color:#E3ECFA; margin-top:-1px;}
.ribbon .wave{position:absolute; left:0; right:0; top:-39px; width:100%; height:40px; fill:var(--cobalt-deep); display:block;}
.ribbon .wrap{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 44px; padding-top:16px; padding-bottom:18px;}
.ribbon .wrap > div{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px;}
.ribbon .icon{color:var(--orange);}
.byline{background:var(--sky); border-bottom:1px solid var(--line);}
.byline .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; padding-top:15px; padding-bottom:15px; 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(--cobalt);}
.byline strong{color:var(--ink);}

/* ---------- qué es ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:28px; align-items:start;}
.about .big{font-size:18.5px; line-height:1.65;}
.side-tile{margin:30px auto 0; width:240px; height:240px; border-radius:24px; background:var(--sky) var(--tile) 0 0/60px 60px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 8px #fff, inset 0 0 0 10px var(--line), var(--sh); position:relative;}
.side-tile::after{content:""; position:absolute; inset:0; border-radius:24px; background:radial-gradient(circle, rgba(234,241,251,.0) 30%, rgba(234,241,251,.9) 75%);}
.side-tile img{position:relative; z-index:1; height:210px; width:auto; filter:drop-shadow(0 14px 14px rgba(14,37,82,.28));}

.side-wrap{display:flex; justify-content:center; margin-top:40px;}
.side-wrap .pic-tile::before{box-shadow:0 0 0 6px var(--cobalt), 0 0 0 9px var(--orange); background:var(--sky);}
.spec{border-radius:var(--r); overflow:hidden; border:2px solid var(--cobalt-deep); background:#fff; box-shadow:var(--sh);}
.spec-head{display:flex; align-items:center; gap:12px; background:var(--cobalt-deep); color:#fff; font-family:var(--head); font-size:24px; padding:16px 22px;}
.spec-head svg{width:28px; height:28px; color:var(--orange);}
.spec table{width:100%; border-collapse:collapse; font-size:15px;}
.spec th,.spec td{text-align:left; vertical-align:top; padding:12px 22px;}
.spec tr:nth-child(even){background:var(--sky-2);}
.spec tr + tr th,.spec tr + tr td{border-top:1px solid var(--line);}
.spec th{width:42%; font-weight:800; color:var(--cobalt-deep);}
.spec td{font-weight:500;}
.callout{display:flex; gap:20px; margin-top:36px; background:var(--orange-50); border:1px solid #F7D3AE; border-radius:var(--r); padding:30px 32px;}
.callout .ic{width:52px; height:52px; flex:none; border-radius:12px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; transform:rotate(45deg);}
.callout .ic .icon{transform:rotate(-45deg); width:24px; height:24px;}
.callout h3{margin-top:0;}
.callout p{margin:0;}

/* ---------- ventajas ---------- */
.perks{list-style:none; padding:0; margin:30px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:2px solid var(--cobalt-deep); border-radius:var(--r); overflow:hidden; background:#fff;}
.perks li{padding:28px 26px; display:flex; flex-direction:column; gap:14px; font-weight:700; font-size:16px; line-height:1.45; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.perks li:nth-child(3n){border-right:none;}
.perks li:nth-last-child(-n+3){border-bottom:none;}
.perks li:nth-child(even){background:var(--sky-2);}
.perks svg{width:34px; height:34px; color:var(--cobalt);}
.perks li:nth-child(even) svg{color:var(--orange);}

/* ---------- ingredientes ---------- */
.raw{margin:28px 0 0;}
.raw svg{width:100%; height:auto; display:block; border-radius:28px; box-shadow:var(--sh);}
.raw figcaption{font-size:13.5px; color:var(--ink-soft); font-style:italic; text-align:center; margin-top:12px;}
.ing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.ing{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; position:relative; overflow:hidden;}
.ing::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,var(--cobalt) 0 14px,#fff 14px 18px,var(--orange) 18px 26px,#fff 26px 30px);}
.ing-ic{width:72px; height:72px; border-radius:16px; background:var(--sky); display:flex; align-items:center; justify-content:center; margin:8px 0 14px;}
.ing-ic svg{width:48px; height:48px;}
.ing h4{margin:0 0 8px;}
.ing p{margin:0; font-size:14.5px; color:var(--ink-soft);}
.after-ing{display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin-top:24px;}
.panel{background:var(--sky-2); border-radius:var(--r); padding:28px 30px; border:1px solid var(--line);}
.panel p{margin:0;}
.note{background:var(--jamaica-50); border-radius:var(--r); padding:26px 28px; color:#6E1236; font-size:15px; display:flex; gap:14px; border:1px solid #F2C3D4;}
.note .icon{color:var(--jamaica); margin-top:3px;}
.note strong{display:block; font-family:var(--head); font-weight:400; font-size:20px; color:var(--jamaica); margin-bottom:4px;}

/* ---------- modo de uso ---------- */
.use{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; margin-top:28px; align-items:center;}
.use-fig{margin:0;}
.use-fig svg{width:100%; height:auto; display:block; border-radius:28px; box-shadow:var(--sh);}
.use-fig figcaption{font-size:13.5px; color:var(--ink-soft); font-style:italic; text-align:center; margin-top:12px;}
.steps{list-style:none; counter-reset:s; padding:0; margin:0;}
.steps li{counter-increment:s; display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px dashed var(--line); font-weight:700;}
.steps li::before{content:counter(s); width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--head); font-size:19px; color:#fff; background:var(--cobalt); border-radius:10px;}
.belly{display:grid; grid-template-columns:1.2fr .8fr; gap:30px; margin-top:44px; background:#fff; border-radius:var(--r); padding:32px 34px; box-shadow:var(--sh); align-items:center;}
.belly-text p{margin:0;}
.vs{display:grid; gap:12px;}
.vs-card{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; border-radius:16px; padding:16px 18px;}
.vs-card .ic{grid-row:1 / 3; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff;}
.vs-card .t{font-family:var(--head); font-size:21px; line-height:1.1;}
.vs-card .d{font-size:14px; font-weight:600; color:var(--ink-soft);}
.vs-card.a{background:var(--sky);} .vs-card.a .ic{background:var(--cobalt);}
.vs-card.b{background:var(--orange-50);} .vs-card.b .ic{background:var(--orange);}

/* ---------- 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:8px; margin:0 0 14px;}
.rev-col h4 .icon{width:16px; height:16px;}
.rev-col.pos h4{background:var(--green-50); color:var(--green);}
.rev-col.neg h4{background:var(--jamaica-50); color:var(--jamaica);}
.q{background:#fff; border-radius:var(--r); padding:22px 24px; margin-bottom:14px; border:1px solid var(--line); border-left:5px solid var(--cobalt);}
.rev-col.neg .q{border-left-color:var(--jamaica);}
.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:8px; background:var(--sky); color:var(--cobalt-deep); display:flex; align-items:center; justify-content:center; font-weight:800;}
.expect{background:var(--cobalt-deep); color:#DDE7F8; border-radius:var(--r); padding:30px 34px; position:relative; overflow:hidden;}
.expect::after{content:""; position:absolute; right:-30px; top:-30px; width:180px; height:180px; background:var(--tile-w) 0 0/60px 60px; opacity:.14; transform:rotate(45deg);}
.expect h3{color:#fff; position:relative; z-index:1;}
.expect p{margin:0; position:relative; z-index:1; max-width:80ch;}

/* ---------- precio ---------- */
.price-panel{display:grid; grid-template-columns:.85fr 1.15fr; background:#fff; border-radius:28px; overflow:hidden; box-shadow:var(--sh); margin-top:30px; border:2px solid var(--cobalt-deep);}
.price-panel .pic{display:flex; align-items:center; justify-content:center; padding:44px 30px;}
.pic-tile{position:relative; width:260px; height:260px; display:flex; align-items:center; justify-content:center;}
.pic-tile::before{content:""; position:absolute; inset:14px; transform:rotate(45deg); background:#fff; border-radius:24px; box-shadow:0 0 0 6px var(--cobalt-deep), 0 0 0 9px var(--orange);}
.pic-tile img{position:relative; z-index:1; height:300px; width:auto; max-width:none; filter:drop-shadow(0 22px 22px rgba(14,37,82,.35));}
.price-panel .info{padding:40px 42px;}
.price-box{background:var(--sky-2); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:6px 0 4px;}
.price-box .nm{font-family:var(--head); font-size:28px;}
.price-box .pr{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:4px 0 2px;}
.price-box .old{color:var(--ink-soft); text-decoration:line-through;}
.price-box .new{font-family:var(--head); font-size:36px; color:var(--cobalt-deep);}
.price-box .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(--cobalt); border-radius:6px; width:22px; height:22px; padding:4px; margin-top:1px;}

/* ---------- faq ---------- */
.faq{max-width:900px; margin-top:30px; display:grid; gap:12px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:16px; transition:border-color .2s;}
.faq details[open]{border-color:var(--cobalt);}
.faq summary{list-style:none; cursor:pointer; padding:20px 66px 20px 24px; font-family:var(--head); font-size:20px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:22px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:7px; background:var(--sky) 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='%2316397A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; transition:background-color .2s, transform .2s;}
.faq details[open] summary::after{background-color:var(--orange); transform:rotate(45deg);}
.faq details p{margin:0; padding:0 24px 22px; 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{margin:0; text-align:center;}
.plate svg{width:100%; max-width:340px; margin:0 auto; filter:drop-shadow(0 18px 26px rgba(14,37,82,.12));}
.plate figcaption{font-size:13.5px; color:var(--ink-soft); font-style:italic; 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:700;}
.legend i{width:16px; height:16px; border-radius:4px; flex:none; transform:rotate(45deg);}
.myth{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px;}
.myth .col{border-radius:16px; padding:16px 18px;}
.myth .m{background:var(--sky);}
.myth .r{background:var(--green-50);}
.myth .t{display:block; font-weight:800; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; color:var(--cobalt-deep);}
.myth .r .t{color:var(--green);}
.myth .chips{display:flex; flex-wrap:wrap; gap:8px;}
.myth .chips span{background:#fff; border-radius:8px; padding:5px 10px; font-size:14px; font-weight:700;}
.infobox{display:flex; gap:16px; background:#fff; border-radius:var(--r); padding:26px 28px; border:1px solid var(--line); margin-top:36px;}
.infobox .ic{width:46px; height:46px; border-radius:12px; background:var(--jamaica-50); color:var(--jamaica); display:flex; align-items:center; justify-content:center; flex:none;}
.infobox h3{margin-top:4px;}
.infobox p{margin:0;}

/* ---------- final ---------- */
.final{color:#fff; padding:100px 0 70px; margin-top:0;}
.final .wave.top{position:absolute; left:0; right:0; top:-1px; width:100%; height:40px; fill:var(--sky-2); display:block;}
.final .wrap{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center;}
.final h2{color:#fff; font-size:clamp(30px,3.6vw,46px);}
.final p{color:#C9D8F2; font-size:17.5px; margin-bottom:28px;}
.final .pic{display:flex; justify-content:center;}
.final .pic-tile::before{box-shadow:0 0 0 6px #fff, 0 0 0 9px var(--orange);}
.sources{padding:56px 0 64px; font-size:14px; color:var(--ink-soft);}
.sources h2{font-size:20px; max-width:none;}
.sources .wrap{max-width:900px;}

/* ---------- footer ---------- */
footer{background:var(--navy); color:#A9B8D6; 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 #22396B;}
footer .logo{color:#fff;}
footer .logo .mark{background:var(--cobalt);}
footer .logo .wm small{color:var(--orange);}
footer .legal{display:flex; gap:22px; flex-wrap:wrap;}
footer a{color:#DCE6F7;}
footer p{max-width:900px; margin:0 0 10px;}
footer strong{color:#fff;}

/* ---------- sticky cta ---------- */
.sticky-cta{display:none; position:fixed; left:10px; right:10px; bottom:10px; z-index:50; background:#fff; border-radius:16px; padding:8px 8px 8px 18px; box-shadow:0 10px 30px rgba(14,37,82,.25); 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-size:18px; line-height:1.15; color:var(--cobalt-deep);}
.sticky-cta .price s{display:block; font-family:var(--body); font-size:12px; color:var(--ink-soft);}
.sticky-cta .btn{padding:12px 18px; font-size:15px; box-shadow:none;}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  nav.main{display:none;}
  .ing-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  body{font-size:16px;}
  section{padding:60px 0;}
  .hero{padding:28px 0 70px;}
  .hero .wrap{grid-template-columns:1fr; gap:24px;}
  .hero-visual{order:-1; min-height:360px;}
  .medallion{width:min(260px,62vw);}
  .hero-visual img{width:min(190px,44vw);}
  .about,.after-ing,.use,.belly,.rev,.price-panel,.daily,.final .wrap{grid-template-columns:1fr;}
  .perks{grid-template-columns:1fr 1fr;}
  .perks li:nth-child(n){border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  .perks li:nth-child(2n){border-right:none;}
  .perks li:nth-last-child(-n+2){border-bottom:none;}
  .perks li:nth-child(even){background:#fff;}
  .perks li:nth-child(4n+2),.perks li:nth-child(4n+3){background:var(--sky-2);}
  .price-panel .pic{padding:44px 24px 30px;}
  .price-panel .info{padding:30px 24px;}
  .belly{padding:26px 22px;}
  .final{padding:80px 0 56px; text-align:center;}
  .final .pic{order:-1;}
  .callout{padding:24px 22px;}
  .btn-sm{display:none;}
  .sticky-cta{display:block;}
  footer{padding-bottom:110px;}
}
@media (max-width:560px){
  .perks{grid-template-columns:1fr;}
  .perks li:nth-child(n){border-right:none; border-bottom:1px solid var(--line); background:#fff; flex-direction:row; align-items:center;}
  .perks li:last-child{border-bottom:none;}
  .perks li:nth-child(even){background:var(--sky-2);}
  .ing-grid,.myth{grid-template-columns:1fr;}
  .buy{width:100%; padding:16px; justify-content:center;}
  .buy .btn{width:100%;}
  .prices{justify-content:center; width:100%;}
  .btn-note{text-align:center;}
  .callout,.infobox,.note{flex-direction:column; gap:12px;}
  .faq summary{font-size:18px; padding-right:58px;}
  .spec th,.spec td{padding:11px 16px;}
  .spec th{width:46%;}
  .pic-tile{width:210px; height:210px;}
  .pic-tile img{height:250px;}
  .side-tile{width:210px; height:210px;}
  .side-tile img{height:186px;}
}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .btn,.btn .icon{transition:none;}}