:root {
  --cream: #FBF5E6;
  --cream-2: #F1E6C8;
  --dill: #2F3D22;
  --dill-2: #5B7A34;
  --brine: #E8C35A;
  --rust: #7A3B1D;
  --txt: #2A2620;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Karla", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--txt); font: 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--dill); line-height: 1.12; margin: 0 0 18px; }
h2 { font-size: 40px; }
p { margin: 0 0 14px; }

.box { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.mt0 { margin-top: 0; }
.tag { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--brine); color: var(--dill); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.sub, .note { color: #6B6253; }

.btn {
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 12px 24px;
  border: 2px solid var(--dill);
  border-radius: 99px;
  background: var(--dill);
  color: var(--cream);
  font: 700 16px var(--sans);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background .2s;
  transition: background .2s;
}
.btn:hover { background: var(--dill-2); border-color: var(--dill-2); }
.btn--ghost { background: transparent; color: var(--dill); }
.btn--ghost:hover { color: var(--cream); }

/* cabecera */
.sitehead { padding: 14px 0; border-bottom: 1px solid var(--cream-2); background: var(--cream); }
.sitehead__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sitehead__nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sitehead__nav a { color: var(--dill); font-weight: 600; text-decoration: none; }
.sitehead__pedir { padding: 6px 14px; border-radius: 99px; background: var(--brine); }

/* portada */
.hero { padding: 56px 0 70px; }
.hero__row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { font-size: 52px; margin-top: 16px; }
.lead { font-size: 1.2rem; max-width: 32em; }
.hero__pic { position: relative; margin: 0; min-width: 0; }
.hero__pic img { border-radius: 180px 180px 14px 14px; aspect-ratio: 2 / 3; object-fit: cover; }
/* etiqueta de papel colgando del frasco */
.jar-tag {
  position: absolute;
  right: -14px;
  top: 38%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--cream-2);
  box-shadow: 0 6px 14px rgba(47, 61, 34, .15);
  font-size: 14px;
  line-height: 1.4;
  transform: rotate(4deg);
}
/* .jar-tag::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; border-top: 1px solid var(--rust); } */
.jar-tag b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--rust); }

/* frascos */
.jars { padding: 70px 0; background: var(--cream-2); }
.jars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 28px 0 22px; }
.jar { position: relative; padding: 52px 22px 22px; background: #FFFAF0; border-radius: 12px 12px 26px 26px; border: 2px solid var(--dill); }
.jar__label {
  position: absolute;
  top: -14px;
  left: 18px;
  right: 18px;
  padding: 6px 10px;
  background: var(--brine);
  border: 2px solid var(--dill);
  font-family: var(--serif);
  font-size: 19px;
  text-align: center;
  color: var(--dill);
}
.jar--b .jar__label { background: #F2B88C; }
.jar--c .jar__label { background: #fff; }
.jar__price { display: block; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--rust); }
.jar--off { opacity: .7; border-style: dashed; }
.jar__stock { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--rust); }
.row-2 { padding: 16px 20px; border-left: 4px solid var(--rust); background: #FFFAF0; }

/* proceso */
.steps { padding: 80px 0; }
.steps__row { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.steps__pic { margin: 0; min-width: 0; }
.steps__pic img { border-radius: 14px; aspect-ratio: 3 / 4; object-fit: cover; }
.timeline { list-style: none; margin: 0 0 18px; padding: 0; border-left: 3px solid var(--dill-2); }
.timeline li { position: relative; padding: 0 0 18px 26px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--cream); border: 3px solid var(--dill-2); }
.timeline b { color: var(--dill); }

/* pedido. no tocar, funciona: los inputs number en Safari se desbordan sin el width fijo */
.order { padding: 80px 0; background: var(--dill); color: var(--cream); }
.order h2, .order h3 { color: var(--brine); }
.order .sub { color: #D9D2BD; }
.order a { color: var(--brine); }
.order__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 14px; }
.item { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid rgba(251, 245, 230, .3); border-radius: 12px; }
.item small { display: block; color: var(--brine); }
.item input { width: 90px; padding: 8px 10px; border: 0; border-radius: 8px; font: 700 18px var(--sans); }
.item--off { opacity: .45; }
.order__total { font-family: var(--serif); font-size: 26px; margin-bottom: 24px; }
.order__total span { font-family: var(--sans); font-size: 15px; color: #D9D2BD; }
.order__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 18px; }
.order__fields label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; min-width: 0; }
.order__fields input, .order__fields select { padding: 11px 12px; border: 0; border-radius: 8px; font: 400 16px var(--sans); }
.order__fields .wide { grid-column: 1 / -1; }
.order__fields .check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.order .is-bad { outline: 3px solid #F2B88C; }
.hp { position: absolute; left: -9999px; }
.order__err { color: #F2B88C; font-weight: 700; }
.order .btn { background: var(--brine); border-color: var(--brine); color: var(--dill); }
.order__done { padding: 24px; border: 2px dashed var(--brine); border-radius: 12px; }

/* feria */
.fair { padding: 70px 0; }
.fair__row { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; }
.fair img { border-radius: 14px; }

.fair { padding-bottom: 90px; }
.fair__tomas { padding: 14px 16px; border-left: 3px solid var(--brine); background: #FFFAF0; font-size: .95rem; }

.quote { margin: 26px 0 0; padding: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--rust); }
.quote cite { display: block; margin-top: 8px; font-family: var(--sans); font-size: .9rem; font-style: normal; color: #6B6253; }

.porque { padding: 10px 0 80px; }
.porque__row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.porque__lista { margin: 0; }
.porque__lista dt { margin-top: 18px; font-family: var(--serif); font-size: 1.3rem; color: var(--dill); }
.porque__lista dt:first-child { margin-top: 0; }
.porque__lista dd { margin: 4px 0 0; color: #4E473B; }
.porque__foto { border-radius: 14px 14px 90px 14px; }

/* la letra chica imita el pie de una etiqueta */
.letra-chica { margin: 18px 0 0; font-size: .82rem; line-height: 1.5; color: #6B6253; text-align: justify; }

/* pie */
.footzone { padding: 2.5rem 0 2rem; background: var(--cream-2); font-size: .94rem; }
.footzone__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.footzone nav { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.footzone__legal { grid-column: 1 / -1; color: #6B6253; margin: 0; }
.linky { padding: 0; border: 0; background: none; font: inherit; color: var(--rust); text-decoration: underline; cursor: pointer; }

/* aviso cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 520px; margin: 0 auto; padding: 18px 20px; background: #FFFAF0; border: 2px solid var(--dill); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-size: 15px; }
.cookies__opt { display: block; margin: 6px 0; }
.cookies .btn { padding: 8px 16px; font-size: 14px; }

/* página de ingredientes */
.page-head { padding: 50px 0 20px; }
.page-head h1 { font-size: 46px; }
.ingred { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 20px 0 50px; }
.ingred section, .ingred .card { padding: 24px; background: #FFFAF0; border: 2px solid var(--dill); border-radius: 14px; }
.ingred h2 { font-size: 28px; }
.ingred dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0; }
.ingred dt { font-weight: 700; color: var(--dill); }
.ingred dd { margin: 0; }
.legal-txt { padding: 0 0 70px; max-width: 780px; }
.legal-txt h2 { font-size: 1.6rem; margin-top: 1.4em; }

@media (max-width: 900px) {
  .hero__row, .steps__row, .fair__row, .porque__row { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .hero__pic { max-width: 380px; }
  .jars__grid, .order__items { grid-template-columns: 1fr 1fr; }
  .ingred { grid-template-columns: 1fr; }
  .jar-tag { right: 8px; }
}
@media (max-width: 560px) {
  h2 { font-size: 32px; }
  .jars__grid, .order__fields { grid-template-columns: 1fr; }
  .nope ul { columns: 1; }
  .footzone__row { grid-template-columns: 1fr; }
}