.hero-art { background: #536133 url('../images/hero-food-v2.webp') center / cover no-repeat; overflow: hidden; }
.hero-art { position: relative; }
.hero-video { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; position: absolute; inset: 0; display: block; z-index: 2; background: #536133 url('../images/hero-food-v2.webp') center / cover no-repeat; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(32,50,29,.08), rgba(32,50,29,.18)); pointer-events: none; z-index: 1; }
.hero-brand { display: none !important; }
.hero-art .sun, .hero-art .pepper { display: none; }

/* El archivo oficial se muestra como un sello integrado, sin la caja fotográfica original. */
.official-logo {
  width: min(100%, 520px);
  height: 245px;
  overflow: hidden;
  margin: 0 0 1.5rem;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.official-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: normal;
  filter: saturate(1.08) contrast(1.08);
  transform: none;
}

.hero-copy { max-width: 760px; width: 100%; justify-self: center; }
.hero h1 { font-size: clamp(3rem, 3.8vw, 5rem); max-width: 760px; }
.hero-text { max-width: 38rem; }
.footer-logo { display: flex; align-items: center; width: min(100%, 220px); min-height: 120px; }
.footer-logo img { width: 100%; height: auto; display: block; filter: none; opacity: 1; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.product-card:hover img { transform: scale(1.09); }
@media (max-width: 760px) { .hero-brand { inset: 0; width: 100%; } .official-logo { width: min(100%, 360px); height: 170px; margin-left: auto; margin-right: auto; justify-content: center; } .official-logo img { object-position: center; } .footer-logo { width: 180px; min-height: 90px; } }

/* Recursos visuales para las páginas educativas. */
.page-intro-media { width: 100%; height: clamp(220px, 34vw, 420px); margin: 0 0 2.4rem; overflow: hidden; border-radius: 2px; background: var(--olive); }
.page-intro-media img, .page-intro-media video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.page-intro-media::after { content: ""; display: block; position: relative; margin-top: -100%; height: 100%; background: linear-gradient(90deg, rgba(32,50,29,.2), transparent 65%); pointer-events: none; }
.editorial-media { margin: 2.8rem 0; height: clamp(180px, 28vw, 340px); overflow: hidden; border-radius: 2px; background: var(--olive); }
.editorial-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.page-intro-media { grid-row: 1 / span 3; height: clamp(300px, 34vw, 520px); margin: 0; }
.page-intro-media + .eyebrow { align-self: end; }
@media (max-width: 760px) { .page-intro { display: block; } .page-intro-media { height: 210px; margin-bottom: 1.8rem; } .editorial-media { height: 190px; margin: 2rem 0; } }

/* Hero corto de ancho completo para encabezar páginas educativas: foto + degradado + título encima. */
.content-banner { position: relative; width: 100%; height: clamp(200px, 30vw, 320px); margin: 0 0 2.6rem; overflow: hidden; background: var(--olive) center / cover no-repeat; display: flex; align-items: flex-end; }
.content-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,50,29,.05) 30%, rgba(24,34,18,.82) 100%); }
.content-banner-text { position: relative; z-index: 1; padding: clamp(1.4rem, 4vw, 3rem) clamp(1.4rem, 7vw, 8rem) clamp(1.6rem, 4vw, 2.6rem); width: 100%; }
.content-banner-text .eyebrow { color: #e3ca8e; }
.content-banner-text h1 { color: #fffaf1; font: 600 clamp(2rem, 4.4vw, 3.6rem)/1.05 var(--serif); letter-spacing: -.03em; margin: .3rem 0 0; }
@media (max-width: 760px) { .content-banner { height: 230px; } }
.content-banner + .section .page-intro-lead { max-width: 760px; }

/* Miniaturas por ingrediente en la ficha de Ingredientes. */
.ingredient-card { display: flex; gap: 1.1rem; align-items: flex-start; }
.ingredient-card-media { flex: none; width: 84px; height: 84px; border-radius: 999px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); padding: .3rem; }
.ingredient-card-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ingredient-card-body { flex: 1; min-width: 0; }
@media (max-width: 760px) { .ingredient-card-media { width: 64px; height: 64px; } }

/* ===== Hero a todo lo ancho con video (2026-10-07) ===== */
.hero.hero-full{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 82px);max-height:none;padding:0;background:#1c140d;color:#fffaf1;overflow:hidden;isolation:isolate}
.hero-full .hero-video{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center 60%;z-index:-2;background:#1c140d;animation:heroZoom 18s ease-out both}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(18,12,7,.88) 0%,rgba(18,12,7,.62) 38%,rgba(18,12,7,.12) 72%,rgba(18,12,7,.05) 100%),
  linear-gradient(0deg,rgba(18,12,7,.75) 0%,rgba(18,12,7,0) 34%),
  linear-gradient(180deg,rgba(18,12,7,.45) 0%,rgba(18,12,7,0) 22%)}
.hero-inner{width:100%;padding:clamp(3rem,7vh,5rem) clamp(1.4rem,7vw,8rem) clamp(7rem,14vh,9rem)}
.hero-full .hero-copy{max-width:720px;padding:0;justify-self:auto;align-self:auto}
.hero-full .official-logo{width:min(100%,330px);height:auto;margin:0 0 1.4rem;justify-content:flex-start}
.hero-full .official-logo img{height:auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,240,210,.5))}
.hero-full .eyebrow{display:flex;align-items:center;gap:.8rem;color:#f0c75e;margin-bottom:1.1rem}
.hero-full .eyebrow:before{content:"";width:2.4rem;height:1px;background:currentColor}
.hero-full h1{font:600 clamp(2.9rem,5.4vw,5.6rem)/.98 var(--serif);letter-spacing:-.045em;color:#fffaf1;max-width:12ch;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero-full h1 em{display:block;font-style:italic;color:#f0c75e}
.hero-full .hero-text{color:rgba(255,250,241,.86);font-size:clamp(1rem,1.3vw,1.15rem);max-width:34rem;margin:1.5rem 0 2.1rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-full .button{padding:1rem 1.5rem;transition:transform .2s,background .2s,box-shadow .2s}
.hero-full .button-primary{box-shadow:0 10px 26px rgba(179,39,30,.4)}
.hero-full .button-primary:hover{transform:translateY(-2px)}
.button-ghost{color:#fffaf1;border:1px solid rgba(255,250,241,.55);background:rgba(255,250,241,.06);backdrop-filter:blur(6px)}
.button-ghost:hover{background:rgba(255,250,241,.16);border-color:#fffaf1;transform:translateY(-2px)}
.hero-highlights{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.1rem clamp(1.4rem,7vw,8rem);list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-top:1px solid rgba(255,250,241,.18);background:rgba(18,12,7,.35);backdrop-filter:blur(8px);font-size:.82rem;color:rgba(255,250,241,.75)}
.hero-highlights li{display:flex;align-items:baseline;gap:.35rem;padding-left:1rem;position:relative}
.hero-highlights li:before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(179,39,30,.25)}
.hero-highlights b{color:#fffaf1;font-weight:700}
.hero-scroll{position:absolute;right:clamp(1.4rem,4vw,3rem);bottom:5.2rem;width:28px;height:46px;border:1.5px solid rgba(255,250,241,.6);border-radius:16px}
.hero-scroll span{position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fffaf1;animation:heroScroll 1.8s ease-in-out infinite}
.hero-full .hero-copy>*{opacity:0;animation:heroUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-full .hero-copy>*:nth-child(1){animation-delay:.1s}.hero-full .hero-copy>*:nth-child(2){animation-delay:.25s}.hero-full .hero-copy>*:nth-child(3){animation-delay:.4s}.hero-full .hero-copy>*:nth-child(4){animation-delay:.55s}.hero-full .hero-copy>*:nth-child(5){animation-delay:.7s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes heroScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.hero-full .hero-video,.hero-full .hero-copy>*,.hero-scroll span{animation:none;opacity:1}}
@media(max-width:900px){.hero-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-scroll{display:none}.hero-inner{padding-bottom:10rem}}
@media(max-width:760px){
  .hero.hero-full{min-height:calc(100svh - 70px);justify-content:flex-end}
  .hero-full .hero-video{object-position:58% center}
  .hero-shade{background:linear-gradient(0deg,rgba(18,12,7,.94) 0%,rgba(18,12,7,.78) 45%,rgba(18,12,7,.25) 75%,rgba(18,12,7,.35) 100%)}
  .hero-inner{padding:6rem 1.4rem 1.6rem;text-align:left}
  .hero-full .official-logo{width:210px;margin:0 0 1rem;justify-content:flex-start}
  .hero-full .official-logo img{object-position:left center}
  .hero-full h1{font-size:clamp(2.5rem,11vw,3.3rem)}
  .hero-full .hero-text{margin:1.1rem 0 1.6rem}
  .hero-actions .button{flex:1 1 100%;justify-content:center}
  .hero-highlights{position:static;padding:1rem 1.4rem 1.3rem;gap:.7rem 1rem;font-size:.76rem}
}
@media(max-width:760px){.hero-full .official-logo{display:none}}
@media(min-width:761px){
  .hero-inner{padding-top:clamp(2rem,5vh,4rem);padding-bottom:clamp(6.5rem,12vh,8.5rem)}
  .hero-full .official-logo{width:min(300px,30vh)}
  .hero-full h1{font-size:clamp(2.6rem,min(5.2vw,8.4vh),5.4rem);max-width:none}
  .hero-full .hero-text{margin:clamp(1rem,2.4vh,1.5rem) 0 clamp(1.3rem,3vh,2.1rem)}
}
.hero-highlights li{display:block;line-height:1.35}
@media(max-width:760px){.hero-shade{background:linear-gradient(0deg,rgba(18,12,7,.95) 0%,rgba(18,12,7,.82) 42%,rgba(18,12,7,.15) 72%,rgba(18,12,7,.1) 100%)}.hero-inner{padding-top:16rem}}
@media(min-width:761px){.hero-full .official-logo{width:min(360px,36vh)}}


/* Banner tipo hero en /catalogo (mismo estilo que /salsa-macha, más alto para lucir los frascos) */
.content-banner-catalog{height:clamp(280px,38vw,500px);background-image:url('../images/catalogo-banner.webp');background-position:center 42%}
.content-banner-catalog .content-banner-overlay{background:linear-gradient(180deg,rgba(32,50,29,0) 45%,rgba(24,34,18,.85) 100%)}
.content-banner-catalog+.catalog{padding-top:0}
@media(max-width:760px){.content-banner-catalog{height:380px;background-image:url('../images/catalogo-banner-900.webp');background-size:auto 290px;background-position:80% top;background-repeat:no-repeat;background-color:#241a10}.content-banner-catalog .content-banner-overlay{background:linear-gradient(180deg,rgba(36,26,16,0) 50%,rgba(36,26,16,.96) 76%)}}