/* ===================================================================
   home.css — visual novo da home (hero com categorias desenhadas),
   inspirado no mockup. Carrega depois do style.css.
=================================================================== */

/* Fundo texturizado (creme + pontinhos) */
body {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .9) 0 7%, transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .75) 0 8%, transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255, 215, 142, .22), transparent 44%),
    linear-gradient(180deg, #fff5e4 0%, #fbf0dc 100%) fixed;
}
body::before {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; content: ""; opacity: .5;
  background-image:
    radial-gradient(rgba(116, 74, 23, .13) .8px, transparent .9px),
    radial-gradient(rgba(255, 255, 255, .6) .8px, transparent 1px);
  background-position: 0 0, 12px 15px;
  background-size: 28px 28px, 34px 34px;
}

/* Hero */
.hero2 { position: relative; overflow: hidden; padding: 28px 5.6vw 46px; }
.decor { position: absolute; z-index: 0; pointer-events: none; user-select: none; opacity: .3; }
.decor-left-top, .decor-right-top { display: none; } /* sem o hero, o topo é a lista — não competir com ela */
.decor-left-top { top: 30px; left: -48px; width: 250px; }
.decor-right-top { top: 8px; right: -54px; width: 262px; }
.decor-left-bottom { bottom: -2px; left: -70px; width: 180px; }
.decor-right-bottom { right: -68px; bottom: -2px; width: 200px; }

.intro { position: relative; z-index: 1; max-width: 1180px; margin: 4px auto 24px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 6px; color: #56731d; font-weight: 800; font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .08em; text-transform: uppercase; }
.sprig { position: relative; display: inline-block; width: 30px; height: 22px; transform: rotate(-25deg); }
.sprig::before { position: absolute; content: ""; top: 11px; left: 2px; width: 28px; border-bottom: 2px solid currentColor; transform: rotate(18deg); }
.sprig::after { position: absolute; content: ""; top: 2px; left: 7px; width: 16px; height: 16px; border: 2px solid currentColor; border-right: 0; border-bottom: 0; border-radius: 16px 0 0; }
.sprig-right { transform: scaleX(-1) rotate(-25deg); }

.hero2__title { font-family: "Fraunces", Georgia, serif; color: #7f090d; font-size: clamp(40px, 6.4vw, 70px); line-height: 1; letter-spacing: -.01em; margin: 0; text-shadow: 0 2px 0 rgba(255, 255, 255, .45); }
.hero2__title span { color: #d99008; }
.hero2__sub { margin: 12px 0 16px; color: #51463e; font-size: clamp(16px, 2.4vw, 21px); }

.search-box { display: flex; align-items: center; width: min(100%, 560px); height: 56px; margin: 0 auto; padding: 0 20px; border: 1px solid rgba(122, 73, 30, .2); border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 2px rgba(72, 34, 11, .05), 0 4px 12px rgba(78, 36, 6, .08); transition: border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color: #b40b12; box-shadow: 0 6px 18px rgba(154, 31, 31, .12); }
.search-box svg { flex: none; width: 22px; height: 22px; margin-right: 13px; color: #b40b12; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #6a6059; font: inherit; font-size: 1.05rem; }
.search-box input::placeholder { color: #8b8784; }

/* Catálogo direto: cards largos (2 no celular, 3 maiores no desktop — espaço pros ingredientes) */
.products { position: relative; z-index: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1180px; }
@media (min-width: 880px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
/* Grade de categorias (não usada na home atual, mas mantida) */
.cat-grid { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
.cat-banner { display: block; overflow: hidden; border: 0; padding: 0; cursor: pointer; border-radius: 24px; box-shadow: 0 12px 26px rgba(68, 28, 6, .16); background: #8b0c0c; font: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.cat-banner:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(68, 28, 6, .24); }
.cat-banner--css { position: relative; display: flex; align-items: center; gap: 18px; min-height: 184px; padding: 26px; overflow: hidden; text-align: left; color: #fff8ef; }
/* decoração 100% CSS (círculos translúcidos) — nítido em qualquer tela */
.cat-banner--css::before { content: ""; position: absolute; right: -46px; top: -46px; width: 162px; height: 162px; border-radius: 50%; background: rgba(255, 255, 255, .10); }
.cat-banner--css::after { content: ""; position: absolute; right: 28px; bottom: -38px; width: 104px; height: 104px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.cat-banner__ico { position: relative; z-index: 1; font-size: 3.2rem; line-height: 1; flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
.cat-banner__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cat-banner__nome { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.78rem; line-height: 1.05; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.cat-banner__uso { font-size: .95rem; opacity: .92; }
.cat-banner__btn { margin-top: 9px; align-self: flex-start; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .45); padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; }

/* Diferenciais */
.benefits { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 1080px); margin: 30px auto 0; padding: 18px; border: 1px solid rgba(166, 105, 37, .2); border-radius: 18px; background: rgba(255, 247, 232, .74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 8px 18px rgba(83, 37, 8, .07); }
.benefits article { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; min-width: 0; padding: 0 16px; border-right: 1px solid rgba(116, 69, 22, .18); }
.benefits article:last-child { border-right: 0; }
.benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 2px solid currentColor; border-radius: 50%; font-size: 1.5rem; flex: none; }
.benefit-icon.green { color: #688629; }
.benefit-icon.orange { color: #ef7900; }
.benefits h3 { margin: 0 0 2px; color: #211915; font-size: 1rem; font-family: inherit; }
.benefits p { margin: 0; color: #3d302a; font-size: .85rem; }

/* Como conservar (aviso real de armazenamento + segurança alimentar) */
.conserva { position: relative; z-index: 1; width: min(100%, 1080px); margin: 26px auto 0; padding: 0 18px; }
.conserva__card { background: #fff; border: 1px solid rgba(166, 105, 37, .22); border-radius: 18px; padding: 22px 24px; box-shadow: 0 8px 20px rgba(83, 37, 8, .06); }
.conserva__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.conserva__ico { font-size: 2rem; flex: none; line-height: 1; }
.conserva__head h2 { margin: 0 0 4px; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.32rem; color: var(--vermelho-escuro, #7d1616); }
.conserva__head p { margin: 0; color: #5f5046; font-size: .92rem; line-height: 1.5; }
.conserva__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.conserva__lista li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; color: #3d302a; }
.conserva__lista li > span { font-size: 1.2rem; flex: none; line-height: 1.25; }
.conserva__lista strong { color: var(--vermelho-escuro, #7d1616); font-weight: 600; }
@media (max-width: 700px) { .conserva__lista { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .decor-left-top, .decor-right-top, .decor-left-bottom, .decor-right-bottom { display: none; }
  .hero2 { padding: 14px 18px 34px; }
  .cat-grid { display: flex; flex-direction: column; gap: 12px; }
  .cat-banner--css { min-height: 132px; padding: 22px; gap: 14px; }
  .cat-banner__ico { font-size: 2.8rem; }
  .cat-banner__nome { font-size: 1.6rem; }
}
@media (max-width: 560px) {
  .hero2__sub { margin-bottom: 14px; }
  .benefits { padding: 14px 8px; }
  .benefits article { display: block; padding: 0 7px; text-align: center; border-right: 0; }
  .benefit-icon { margin: 0 auto 6px; }
  .benefits h3 { font-size: .82rem; }
  .benefits p { font-size: .72rem; }
}