/* Prévia do Instagram da Horta Facilita · DH DESIGNIA · 29/10/2026 */
:root{
  --creme:#FFFBEF; --papel:#FAF4E2; --linha:rgba(5,66,36,.14);
  --floresta:#054224; --floresta-2:#0A4D27; --floresta-e:#032D18;
  --folha:#4D901D; --folha-e:#3A7414; --lima:#B3CD61; --cenoura:#EE7A1E; --cenoura-e:#C9580A;
  --tinta:#12261A; --cinza:#4A5E50; --dh:#D0101A;
  --f-display:'Fraunces',Georgia,serif; --f-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-mao:'Caveat',cursive; --f-marca:'Fredoka',sans-serif; --f-ui:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinta);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.center{text-align:center}

.topbar{padding:16px 0}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dh{font:800 14px/1 var(--f-body);letter-spacing:.06em;color:var(--dh)}
.dh b{color:#111}
.topbar__tag{font-size:11.5px;font-weight:600;color:var(--cinza)}

/* hero */
.hero{padding:20px 0 70px;background:radial-gradient(60% 50% at 85% 40%,rgba(179,205,97,.4),transparent 70%),var(--creme)}
.hero__grid{display:grid;gap:40px;align-items:center}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--folha-e)}
.hero__title{margin-top:14px;font:600 clamp(34px,9vw,60px)/1.04 var(--f-display);font-variation-settings:"SOFT" 100;letter-spacing:-.02em;color:var(--floresta)}
.hero__title em,.h2 em{font-style:italic;color:var(--folha)}
.hero__lead{margin-top:16px;font-size:17px;color:var(--cinza)}
.entregas{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.entregas li{padding:8px 12px 8px 30px;border-radius:99px;background:#fff;border:1px solid var(--linha);font:700 13px/1 var(--f-body);color:var(--floresta);position:relative}
.entregas li::before{content:"✓";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--folha);font-weight:800}
.hero__stage{display:grid;justify-items:center;gap:12px}
.hero__note{font:700 21px/1.1 var(--f-mao);color:var(--folha-e);text-align:center}

/* celular */
.phone{width:300px}
.phone__frame{position:relative;border-radius:46px;padding:10px;background:linear-gradient(145deg,#2A2A2A,#0B0B0B 40%,#1C1C1C);box-shadow:0 50px 80px -30px rgba(3,45,24,.55)}
.phone__island{position:absolute;z-index:3;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#000}
.ig{height:600px;border-radius:37px;overflow:hidden;background:#fff;color:#0A0A0A;font:400 11px/1.38 var(--f-ui)}
.ig__status{position:relative;z-index:2;background:#fff;display:flex;justify-content:space-between;padding:14px 26px 4px;font-weight:700;font-size:12px}
.ig__top{position:relative;z-index:2;background:#fff;display:flex;justify-content:space-between;padding:8px 14px 6px;font-size:15px}
.ig__body{animation:rolar 16s var(--ease) 2s infinite}
@keyframes rolar{0%,22%{transform:translateY(0)}48%,72%{transform:translateY(-330px)}94%,100%{transform:translateY(0)}}
.ig__head{display:flex;align-items:center;gap:18px;padding:8px 14px}
.ig__avatar{flex:none;width:72px;height:72px;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,var(--cenoura),var(--lima),var(--folha),var(--floresta-2),var(--cenoura))}
.ig__avatar img{width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;object-fit:cover}
.ig__stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.ig__stats b{display:block;font-size:14px}
.ig__stats span{font-size:10.5px}
.ig__bio{padding:2px 14px 0}
.ig__bio b{display:block;font-size:12px}
.ig__cat{display:block;color:#737373;font-size:11px}
.ig__bio p{margin-top:2px;font-size:11px}
.ig__link{display:block;color:#00376B;font-weight:600}
.ig__btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:10px 14px 4px}
.ig__btns span{text-align:center;padding:6px 0;border-radius:8px;background:#EFEFEF;font-weight:700}
.ig__btns span:first-child{background:#0095F6;color:#fff}
.ig__hl{display:flex;gap:10px;padding:10px 14px 8px;overflow:hidden}
.ig__hl figure{margin:0;display:grid;justify-items:center;gap:4px;font-size:9.5px;flex:none}
.ig__hl img{width:50px;height:50px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #D9D9D9}
.ig__tabs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #EFEFEF;margin-top:4px}
.ig__tabs i{height:28px;position:relative}
.ig__tabs i.on::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:1.5px;background:#0A0A0A}
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig__grid img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* seções */
.sec{padding:80px 0}
.sec--paper{background:var(--papel)}
.sec--forest{background:radial-gradient(120% 80% at 80% 0%,#0B5A2E,var(--floresta) 45%,var(--floresta-e));color:var(--creme)}
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--folha-e)}
.kicker::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--cenoura)}
.kicker--light{color:var(--lima);justify-content:center}
.head-center{text-align:center;max-width:760px;margin:0 auto 36px}
.head-center .kicker{justify-content:center}
.h2{margin-top:14px;font:600 clamp(29px,7vw,48px)/1.06 var(--f-display);font-variation-settings:"SOFT" 100;letter-spacing:-.02em;color:var(--floresta)}
.h2--light{color:var(--creme)} .h2--light em{color:var(--lima)}
.body{margin-top:14px;font-size:16.5px;color:var(--cinza)}
.body--light{color:rgba(255,251,239,.85)}
.tiny{margin-top:16px;font-size:13.5px;color:var(--cinza)}

/* bio */
.biocard{margin-top:26px;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--linha);box-shadow:0 30px 50px -40px rgba(3,45,24,.5);display:grid;gap:12px}
.biocard__linha{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px dashed var(--linha);padding-bottom:10px}
.biocard__linha span{color:var(--cinza);font-weight:600}
.biocard__linha b{color:var(--floresta);text-align:right}
.biocard__bio{white-space:pre-line;font:500 16px/1.6 var(--f-ui);padding:14px 16px;border-radius:16px;background:var(--creme)}
.copiar{justify-self:start;padding:11px 16px;border:0;border-radius:12px;background:var(--floresta);color:var(--creme);font-weight:700;font-size:14px;cursor:pointer}
.copiar.ok{background:var(--folha)}
.copiar:focus-visible{outline:3px solid var(--cenoura);outline-offset:2px}
.porque{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.porque li{position:relative;padding-left:28px;font-size:15px;color:var(--cinza)}
.porque li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:var(--folha)}
.porque b{color:var(--floresta)}

/* galeria */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.galeria button{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:none;box-shadow:0 20px 30px -24px rgba(3,45,24,.6);transition:transform .25s var(--ease)}
.galeria button:hover{transform:translateY(-3px)}
.galeria button:focus-visible{outline:3px solid var(--cenoura);outline-offset:3px}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover}
.galeria span{position:absolute;top:8px;left:8px;padding:5px 9px;border-radius:99px;background:rgba(3,45,24,.85);color:var(--creme);font:800 11.5px/1 var(--f-body)}

/* destaques */
.capas{margin-top:30px;display:flex;justify-content:center;flex-wrap:wrap;gap:18px}
.capas figure{margin:0;display:grid;justify-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--creme)}
.capas img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 3px var(--floresta),0 0 0 5px rgba(255,255,255,.5)}

/* antes e depois */
.comparar{display:grid;gap:18px}
.ad{margin:0}
.ad__box{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 50px -36px rgba(3,45,24,.6)}
.ad__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad__antes{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ad__box::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.ad__box input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ad figcaption{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--folha-e)}

/* cardápio */
.stories{display:grid;grid-auto-flow:column;grid-auto-columns:62%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.stories img{width:100%;border-radius:18px;scroll-snap-align:start;box-shadow:0 20px 30px -24px rgba(3,45,24,.6)}
.cardapio-cta{margin-top:26px;text-align:center;display:grid;justify-items:center}

/* pendências */
.pend{list-style:none;counter-reset:n;padding:0;margin:26px 0 0;display:grid;gap:10px}
.pend li{counter-increment:n;position:relative;padding:16px 16px 16px 58px;border-radius:18px;background:#fff;border:1px solid var(--linha);font-size:15px;color:var(--cinza)}
.pend li::before{content:counter(n);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--cenoura);color:#fff;font:700 14px/1 var(--f-marca)}
.pend b{color:var(--floresta)}

/* final */
.final{padding:90px 0 100px;background:radial-gradient(90% 70% at 50% 0%,#0E6A35,var(--floresta) 45%,var(--floresta-e));color:var(--creme)}
.final__icon{width:220px;height:auto;margin:0 auto 10px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));background:var(--creme);border-radius:30px;padding:14px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;margin:24px auto 0;padding:17px 22px;border-radius:18px;text-decoration:none;font-weight:800;font-size:17px}
.btn--main{background:linear-gradient(145deg,#FF9A3D,var(--cenoura) 55%,var(--cenoura-e));color:#2A1200;box-shadow:0 20px 40px -18px rgba(238,122,30,.9)}
.btn--ghost{margin-top:10px;color:var(--creme);border:1.5px solid rgba(255,255,255,.3);font-size:15px}
.cardapio-cta .btn{margin-top:0}
.btn:focus-visible{outline:3px solid var(--lima);outline-offset:3px}
.final__sign{margin-top:34px;font:700 30px/1 var(--f-mao)}
.final__sign span{display:block;margin-top:8px;font:600 12px/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,251,239,.62)}

.foot{background:#000;color:#F4F0EC;padding:46px 0 calc(110px + env(safe-area-inset-bottom))}
.foot__in{display:grid;justify-items:center;text-align:center;gap:10px}
.dh--lg{font-size:22px} .dh--lg b{color:#F4F0EC}
.foot__meta{font-size:13px;color:#A59C98}
.foot__copy{font-size:12px;color:#73635F}
.seal{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid #2E2422;text-decoration:none;font-size:12px;color:#A59C98}
.seal b{color:#F4F0EC}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));transform:translateY(120%);transition:transform .45s var(--ease);pointer-events:none}
.dock.show{transform:none;pointer-events:auto}
.dock__in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:20px;background:rgba(3,45,24,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}
.dock__txt{flex:1;color:var(--creme);line-height:1.25}
.dock__txt b{display:block;font-size:13.5px}
.dock__txt span{font-size:12px;color:var(--lima)}
.dock__btn{padding:13px 18px;border-radius:14px;background:var(--cenoura);color:#2A1200;font-weight:800;font-size:14px;text-decoration:none}

.modal{position:fixed;inset:0;z-index:60}
.modal__fundo{position:absolute;inset:0;background:rgba(3,45,24,.7)}
.modal__painel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(940px,94vw);max-height:92vh;overflow:auto;display:grid;gap:16px;padding:16px;border-radius:24px;background:var(--creme)}
.modal__painel img{width:100%;border-radius:16px}
.modal__txt h3{font:600 22px/1.2 var(--f-display);color:var(--floresta)}
.modal__txt pre{margin:10px 0 14px;white-space:pre-wrap;font:500 14.5px/1.55 var(--f-ui);color:var(--tinta)}
.modal__x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:12px;background:#fff;font-size:24px;cursor:pointer;z-index:2}

.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (min-width:700px){
  .galeria{grid-template-columns:repeat(4,1fr);gap:14px}
  .comparar{grid-template-columns:repeat(3,1fr)}
  .stories{grid-auto-flow:initial;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
  .modal__painel{grid-template-columns:1fr 1fr;align-items:start}
}
@media (min-width:960px){
  .hero{padding:40px 0 90px}
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .phone{width:320px}
  .sec{padding:110px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}