/* Segunda edición: calidez de mesa familiar, medios protagonistas y títulos contenidos. */
:root {
  --cream:#fbf2e2;
  --paper:#fff9ed;
  --red:#e1251b;
  --olive:#526044;
  --ink:#3c3025;
  --wheat:#d7aa68;
  --line:#dcc9ad
}
body {
  background-color:var(--cream)
}
h1 {
  font-size:clamp(2.8rem,5.8vw,5.2rem)
}
h2 {
  font-size:clamp(2.15rem,3.8vw,3.65rem)
}
h3 {
  font-size:1.7rem
}
.header {
  background:#fff8ed
}
.header-inner {
  padding-block:15px
}
.button {
  border-radius:4px;
  padding:14px 25px
}
.button:hover {
  transform:translateY(-2px);
  background:#85271d
}
.button.light:hover {
  background:#eee0c8;
  color:var(--ink)
}
.olive .button.light:hover {
  background:var(--paper);
  color:var(--olive)
}
.wrap {
  padding-top:80px;
  padding-bottom:80px
}
.section-head h2 {
  max-width:650px
}
.origin-strip {
  background:#efe0c7;
  justify-content:center;
  gap:5vw
}
.olive {
  background:#526044
}
.cta {
  background:#ecd5b5;
  position:relative;
  overflow:hidden
}
.cta:before,.cta:after {
  content:'';
  position:absolute;
  width:110px;
  height:110px;
  background:repeating-linear-gradient(0deg,transparent 0 15px,#e1251b20 15px 30px),repeating-linear-gradient(90deg,transparent 0 15px,#e1251b20 15px 30px);
  transform:rotate(-12deg);
  left:-20px;
  top:-15px;
  pointer-events:none
}
.cta:after {
  left:auto;
  top:auto;
  right:-20px;
  bottom:-15px;
  transform:rotate(15deg)
}
.footer {
  background:#efe0c9
}
.footer small {
  border-top-color:#cdb897
}
.split figure img {
  border-radius:3px
}
.family {
  text-align:center;
  border-top:0;
  background:#f2e5d0;
  padding:24px 18px;
  border-radius:70px 70px 4px 4px;
  transition:background .3s
}
.family:hover {
  background:#ebd8b8
}
.family img {
  margin:0 auto 15px;
  height:235px
}
.family h3 {
  font-size:1.55rem
}
.family span {
  display:block;
  margin:auto;
  font-size:.78rem
}
.families {
  gap:22px
}
.product button {
  text-align:center
}
.product h3 {
  text-align:center;
  font-size:1.4rem
}
.product small {
  display:block;
  text-align:center
}
.product img {
  margin:auto
}
.product {
  border-top-color:#d9c19d
}
.catalog-section h2 {
  text-align:center;
  font-size:2.6rem
}
.search-label {
  margin-bottom:35px
}
.filters {
  justify-content:center
}
.product-grid {
  gap:35px 24px
}
.temperature {
  font-size:clamp(4rem,8vw,7rem)
}
.media-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#463729;
  color:var(--paper);
  min-height:590px;
  height:calc(100svh - 82px)
}
.image-hero {
  height:70svh;
  min-height:500px;
  max-height:780px
}
.video-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
  z-index:-3;
  background:#463729
}
.video-slide.active {
  opacity:1
}
.video-slide video,.hero-background {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.video-slide video {
  filter:saturate(.92)
}
.hero-background {
  z-index:-3
}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,#20170f45,#2c1b12a1 45%,#20140dcc)
}
.media-hero-copy {
  max-width:1100px;
  padding:70px 30px 100px
}
.media-hero-copy .eyebrow {
  color:#fff1d5;
  text-shadow:0 1px 5px #20170f;
  font-size:.78rem
}
.media-hero h1 {
  font-size:clamp(2.8rem,5.5vw,5.2rem);
  line-height:1.1;
  letter-spacing:-.035em;
  text-shadow:0 2px 15px #1e110a5c;
  margin-bottom:25px
}
.media-hero h1 em {
  font-weight:400;
  color:#f6dba9
}
.media-hero .lead {
  max-width:670px;
  margin:0 auto 30px;
  color:#fff9ef;
  font-size:1.07rem
}
.media-hero .button {
  background:#e1251b;
  border-color:#bd5e43
}
.media-hero .button:hover {
  background:#83271e
}
.hero-scroll {
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  text-decoration:none;
  font-size:.73rem;
  letter-spacing:.05em;
  display:flex;
  gap:15px;
  align-items:center;
  white-space:nowrap
}
.hero-scroll span {
  font-size:1.3rem
}
.video-controls {
  position:absolute;
  bottom:25px;
  right:30px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:2
}
.video-controls button {
  color:var(--paper);
  background:#29190c55;
  border:1px solid #f9e8ca77;
  height:42px;
  border-radius:50%;
  min-width:42px
}
.video-toggle {
  border-radius:30px!important;
  padding:0 18px;
  font-size:.72rem;
  min-width:115px!important
}
.video-controls button:hover {
  background:#29190cbb
}
.slide-dots {
  display:flex;
  gap:0
}
.slide-dots button {
  border:0;
  background:none!important;
  min-width:32px;
  width:32px
}
.slide-dots span {
  display:block;
  height:6px;
  width:6px;
  border:1px solid #fff;
  border-radius:50%;
  margin:auto
}
.slide-dots button[aria-pressed=true] span {
  background:white;
  width:9px;
  height:9px
}
.table-video {
  position:relative;
  overflow:hidden;
  border-radius:90px 4px 4px 4px;
  background:#493926;
  aspect-ratio:4/3
}
.table-video video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.inline-video-toggle {
  position:absolute;
  right:18px;
  bottom:18px;
  background:#fbf2e2eb;
  color:var(--ink);
  border:0;
  padding:10px 16px;
  border-radius:30px;
  font-size:.8rem
}
.drying-highlight {
  background:#efe1c7;
  position:relative;
  padding:85px 6vw;
  margin-top:20px;
  border-block:1px solid #d5bd96;
  overflow:hidden
}
.drying-highlight:before {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid #cba875;
  pointer-events:none
}
.drying-inner {
  position:relative;
  max-width:1150px;
  margin:auto;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:center
}
.drying-seal {
  width:320px;
  height:320px;
  border-radius:50%;
  border:1px solid var(--red);
  outline:8px double #bb8663;
  background:#fff5e0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:auto;
  color:var(--red);
  transform:rotate(-5deg)
}
.drying-seal span {
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.15em
}
.drying-seal strong {
  display:block;
  font:4.8rem/1.6 var(--serif);
  letter-spacing:-.07em
}
.drying-seal small {
  font-size:2.6rem
}
.drying-highlight h2 em {
  color:var(--red);
  font-weight:400
}
.drying-highlight .lead {
  font-size:1.04rem
}
.process h2 {
  font-size:clamp(2.05rem,3.1vw,3rem)
}
.timeline h2 {
  font-size:clamp(2.05rem,3.1vw,3.1rem)
}
.timeline figure {
  box-shadow:0 10px 22px #7e542520
}
.timeline {
  border-left-color:#b95c42
}
.year {
  font-size:2.2rem
}
.quote {
  font-size:clamp(2rem,3.2vw,3rem)
}
.recipe-heading {
  max-width:750px;
  margin:0 auto 50px
}
.recipe-heading h2 {
  color:var(--red);
  font-size:clamp(2.4rem,4vw,3.6rem)
}
.recipe-heading em {
  font-weight:400
}
.recipe-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px 30px;
  margin-bottom:45px
}
.recipe-card button {
  width:100%;
  padding:0;
  background:none;
  border:0;
  color:var(--ink);
  text-align:center
}
.recipe-photo {
  position:relative;
  overflow:hidden;
  border-radius:3px 50px 3px 3px;
  aspect-ratio:4/3;
  background:#eadbc1
}
.recipe-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s
}
.recipe-card button:hover img {
  transform:scale(1.045)
}
.recipe-card h3 {
  font-size:1.65rem;
  color:var(--red);
  margin:20px 0 7px;
  letter-spacing:-.025em
}
.recipe-pending {
  font-size:.7rem;
  color:var(--olive)
}
.recipe-badge {
  position:absolute;
  right:0;
  top:0;
  width:48px;
  height:48px;
  background:var(--red);
  color:var(--paper);
  border-radius:0 0 0 20px;
  font:italic 1.25rem/48px var(--serif)
}
.recipe-open {
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translate(-50%,8px);
  background:#fff6eae8;
  color:var(--ink);
  border-radius:30px;
  padding:7px 18px;
  opacity:0;
  transition:opacity .3s,transform .3s;
  font-size:.75rem;
  white-space:nowrap
}
.recipe-card button:hover .recipe-open,.recipe-card button:focus-visible .recipe-open {
  opacity:1;
  transform:translate(-50%,0)
}
#recipe-dialog {
  padding:0;
  max-width:850px;
  overflow:auto;
  border-radius:5px
}
.recipe-dialog-layout>img {
  width:100%;
  height:290px;
  object-fit:cover
}
.recipe-dialog-copy {
  padding:32px 40px
}
.recipe-dialog-copy h2 {
  font-size:2.5rem
}
.recipe-close {
  background:var(--cream);
  width:40px;
  height:40px;
  border-radius:50%;
  line-height:1
}
.recipe-meta {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  border-block:1px solid var(--line);
  padding:15px 0;
  margin:20px 0
}
.recipe-meta:empty {
  display:none
}
.recipe-meta span {
  font-size:.8rem
}
.recipe-dialog-copy li {
  margin-bottom:8px
}
.recipe-dialog-copy h3 {
  font-size:1.6rem
}
.recipes-section>.note {
  max-width:800px;
  margin:auto
}
.contact-details dd {
  font-size:1.03rem
}
.contact-layout h2 {
  font-size:3rem
}
@media(max-width:1100px) {
  .video-controls {
    right:18px;
    bottom:20px;
    gap:3px
  }
  .hero-scroll {
    left:30px;
    transform:none
  }
  .drying-inner {
    gap:45px
  }
  .drying-seal {
    width:280px;
    height:280px
  }
  .drying-seal strong {
    font-size:4rem
  }
}
@media(max-width:800px) {
  .media-hero {
    height:calc(100svh - 74px);
    min-height:590px
  }
  .image-hero {
    height:65svh;
    min-height:490px
  }
  .media-hero h1 {
    font-size:clamp(2.7rem,8vw,4rem)
  }
  .media-hero-copy {
    padding:55px 25px 120px
  }
  .media-hero .lead {
    font-size:.98rem;
    max-width:550px
  }
  .video-controls {
    right:16px;
    bottom:62px;
    left:16px;
    justify-content:center
  }
  .hero-scroll {
    left:50%;
    transform:translateX(-50%);
    bottom:18px
  }
  .family {
    padding:20px 10px
  }
  .family img {
    height:200px
  }
  .family h3 {
    font-size:1.4rem
  }
  .drying-inner {
    grid-template-columns:1fr;
    gap:45px
  }
  .drying-highlight {
    padding:65px 8vw
  }
  .drying-inner>div:last-child {
    text-align:center
  }
  .drying-seal {
    width:255px;
    height:255px
  }
  .drying-highlight h2 {
    font-size:2.6rem
  }
  .drying-highlight .lead {
    margin-inline:auto
  }
  .recipe-grid {
    grid-template-columns:repeat(2,1fr);
    gap:35px 22px
  }
  .recipe-card h3 {
    font-size:1.45rem
  }
  .timeline h2 {
    font-size:2.15rem
  }
  .catalog-section h2 {
    font-size:2.3rem
  }
  .wrap {
    padding-top:60px;
    padding-bottom:60px
  }
  .contact-layout h2 {
    font-size:2.5rem
  }
}
@media(max-width:500px) {
  .recipe-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .recipe-card {
    max-width:420px;
    margin:auto;
    width:100%
  }
  .recipe-photo {
    aspect-ratio:1.4
  }
  .recipe-card h3 {
    font-size:1.65rem
  }
  .media-hero h1 {
    font-size:2.8rem
  }
  .media-hero h1 br {
    display:none
  }
  .media-hero .eyebrow {
    font-size:.68rem
  }
  .media-hero .lead br {
    display:none
  }
  .media-hero-copy {
    padding-inline:25px
  }
  .media-hero {
    min-height:570px
  }
  .image-hero {
    min-height:460px
  }
  .family img {
    height:175px
  }
  .family h3 {
    font-size:1.25rem
  }
  .family span {
    font-size:.72rem
  }
  .family {
    border-radius:50px 50px 4px 4px
  }
  .product h3 {
    font-size:1.2rem
  }
  .recipe-dialog-copy {
    padding:25px
  }
  .recipe-dialog-copy h2 {
    font-size:2rem
  }
  .recipe-dialog-layout>img {
    height:210px
  }
  .drying-highlight:before {
    inset:8px
  }
  .drying-seal strong {
    font-size:4rem
  }
  .table-video {
    border-radius:65px 4px 4px 4px
  }
  .origin-strip {
    gap:10px;
    text-align:center
  }
  .origin-strip>span:nth-child(2) {
    flex-basis:100%;
    order:3
  }
}
.product-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.product,.product button {
  min-width:0
}
.no-photo {
  font-size:1.2rem;
  padding:14px;
  overflow-wrap:anywhere
}
@media(max-width:1100px) {
  .product-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:800px) {
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:420px) {
  .no-photo {
    font-size:1rem;
    padding:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  .video-slide {
    transition:none
  }
  .recipe-photo img {
    transition:none
  }
}