.recipe-page .recipe-brand { color: var(--brand); }
.recipe-page #navBackdrop { z-index: 998; }

.recipe-page .recipe-hero {
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: clamp(24px, 4vw, 52px);
  padding: clamp(24px, 4vw, 48px);
}

.recipe-page .recipe-hero h1 { max-width: 14ch; font-size: clamp(3rem, 5.8vw, 5.6rem); }
.recipe-page.lunch-page .recipe-hero h1 { max-width: 16ch; font-size: clamp(2.8rem, 5vw, 5.1rem); }
.lunch-page .recipe-hero h1 span { display: block; }
.recipe-page .recipe-hero .k-lead { max-width: 39ch; }
.recipe-page .recipe-hero-actions { align-items: center; gap: 6px 20px; }
.recipe-hero-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  color: #e2d2fb;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
}
.recipe-hero-plan span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.recipe-hero-plan:hover { color: #fff; }
.recipe-page .recipe-author {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 24px;
  font-size: .8rem;
  font-weight: 800;
  text-underline-offset: 4px;
}
.recipe-author span { color: #bcb5cd; font-weight: 600; }

.recipe-hero-photo { margin: 0; }
.recipe-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.3;
  object-fit: cover;
  border-radius: 22px;
  background: #29202c;
}
.recipe-hero-photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: #d0c7e1;
  font-size: .78rem;
}
.recipe-hero-photo figcaption > span { white-space: nowrap; }
.recipe-hero-photo a { text-decoration: underline; text-underline-offset: 4px; }
.recipe-hero-photo a:hover { color: #fff; }

.recipe-page .recipe-section { padding-block: clamp(38px, 6vw, 78px); }
.recipe-page #recetas, .recipe-card { scroll-margin-top: 105px; }
.recipe-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
  border: 1px solid #342b47;
  border-radius: 18px;
  background: #15121d;
  color-scheme: dark;
}
.recipe-filters label { display: grid; gap: 7px; color: #f1ecf7; font-size: .84rem; font-weight: 800; }
.recipe-filters select, .recipe-reset {
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid #806e9c;
  border-radius: 10px;
  background: #221a30;
  color: #f2eaff;
  font: inherit;
}
.recipe-reset { cursor: pointer; font-size: .84rem; font-weight: 800; }
.recipe-reset:hover { background: #322344; }
.recipe-filters--overnight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.recipe-filters .recipe-overnight {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 7px 10px;
  border: 1px solid #806e9c;
  border-radius: 10px;
  cursor: pointer;
}
.recipe-overnight input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #d4baff; }
.recipe-count { margin: 15px 0 18px; color: #c7bbdb; font-size: .85rem; }
.recipe-page [hidden] { display: none !important; }

.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
.recipe-card {
  overflow: hidden;
  border: 1px solid #342b47;
  border-radius: 20px;
  background: #14111b;
}
.recipe-card:target, .recipe-card:focus-within { border-color: var(--brand-300); }
.recipe-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1.58; object-fit: cover; background: #29202c; }
.recipe-card-body { padding: 18px; }
.recipe-time { color: #c8a8ff; font-size: .78rem; font-weight: 800; }
.recipe-time-note { display: inline-block; margin-inline-start: 8px; color: #ccc3d8; font-size: .76rem; }
.lunch-menu-group:not([hidden]) + .lunch-menu-group { margin-top: 32px; }
.lunch-menu-title { margin: 0 0 12px; color: #f3e8ff; font-size: 1.05rem; font-weight: 800; }
.recipe-card .lunch-card-tips p + p { margin-top: 9px; }
.recipe-card .lunch-card-tips strong { color: #f3e8ff; }
.lunch-filter-note { grid-column: 1 / -1; margin: 0; color: #ccc3d8; font-size: .82rem; line-height: 1.5; }
.lunch-recipe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: #ccc3d8;
  font-size: .76rem;
  line-height: 1.35;
}
.lunch-recipe-meta strong { color: #d6baff; }
.lunch-recipe-meta span {
  padding: 4px 8px;
  border: 1px solid #514364;
  border-radius: 999px;
  color: #e2d2fb;
}
.recipe-page .recipe-card h3, .recipe-page .recipe-question h3 {
  margin: 7px 0 8px;
  color: #faf6ff;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.13rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.recipe-card p, .recipe-card li { color: #dbd4e6; font-size: .9rem; line-height: 1.6; }
.recipe-card p { margin: 0; }
.recipe-card details { margin-top: 14px; border-top: 1px solid #342b47; }
.recipe-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  color: #e2ccff;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 800;
  list-style: none;
}
.recipe-card summary::-webkit-details-marker { display: none; }
.recipe-card summary::after { content: ''; width: .45em; height: .45em; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); margin: 0 4px 3px 0; }
.recipe-card details[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }
.recipe-card h4 { margin: 12px 0 6px; color: #f6efff; font-size: .9rem; }
.recipe-card ul, .recipe-card ol { padding-inline-start: 22px; margin: 0 0 14px; }
.recipe-card li + li { margin-top: 4px; }
.recipe-card .recipe-swap { padding: 11px; border-radius: 10px; background: #21182e; }
.recipe-page .recipe-next { padding-bottom: clamp(24px, 4vw, 48px); }
.recipe-page .recipe-plan { padding: clamp(22px, 4vw, 46px); }
.recipe-page .recipe-plan h2 { max-width: 19ch; margin-top: 0; }
.recipe-page .recipe-plan .k-copy { max-width: 48ch; margin-bottom: 0; }
.recipe-page .recipe-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #d4baff;
  color: #211433;
}
.recipe-page .recipe-plan-button:hover { background: #e6d6ff; }
.recipe-plan-photo { display: none; }
.recipe-question { margin: 28px 0 0; padding-inline: 4px; }

.recipe-guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.recipe-guide-list li { display: flex; }
.recipe-guide-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 5px 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #342b47;
  border-radius: 15px;
  background: #14111b;
  text-decoration: none;
}
.recipe-guide-list a:hover { border-color: #896eb6; background: #1d1728; }
.recipe-guide-list strong { color: #f3e8ff; font-size: .94rem; }
.recipe-guide-list span { grid-column: 1; color: #ccc3d8; font-size: .83rem; line-height: 1.5; }
.recipe-guide-list a::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 7px;
  height: 7px;
  border-top: 2px solid #d2b6ff;
  border-right: 2px solid #d2b6ff;
  transform: rotate(45deg);
}
.recipe-footer-links { list-style: none; padding: 0; margin: .6rem 0 0; }
.recipe-footer-links li + li { margin-top: 6px; }
.recipe-cookie-policy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 10px;
  color: #e2d2fb;
  font-size: .86rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 581px) {
  .lunch-page .recipe-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .lunch-page .recipe-grid > .recipe-card { flex: 0 0 calc((100% - 20px) / 2); min-width: 0; }
}
@media (min-width: 901px) {
  .lunch-page .recipe-grid > .recipe-card { flex-basis: calc((100% - 40px) / 3); }
}

@media (min-width: 841px) {
  .recipe-page .recipe-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, .55fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }
  .recipe-plan-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.32;
    object-fit: cover;
    object-position: center 32%;
    border-radius: 19px;
  }
}
@media (max-width: 900px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-filters--overnight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .recipe-page #primaryNav {
    position: absolute;
    inset: calc(100% + 8px) 10px auto auto !important;
    width: min(calc(100% - 20px), 340px);
    height: auto !important;
    max-height: min(68dvh, 420px) !important;
    overflow-y: auto;
    padding: 14px !important;
    border-radius: 18px;
  }
}
@media (max-width: 760px) {
  .recipe-page .recipe-hero {
    grid-template-columns: 1fr;
    padding: 23px 18px 18px !important;
  }
  .recipe-page .recipe-hero h1 { max-width: none; margin-top: 0; font-size: clamp(2.6rem, 9.3vw, 4.6rem); }
  .recipe-page.lunch-page .recipe-hero h1 { max-width: none; font-size: clamp(2.5rem, 9vw, 4.5rem); }
  .recipe-page .recipe-hero .k-lead { font-size: 1rem; }
  .recipe-page .recipe-author { margin-top: 10px; }
  .recipe-hero-photo img { aspect-ratio: 1.65; border-radius: 16px; }
  .recipe-filters select { font-size: 1rem; }
}
@media (max-width: 580px) {
  .recipe-grid, .recipe-filters, .recipe-guide-list { grid-template-columns: minmax(0, 1fr); }
  .recipe-reset { justify-self: start; }
}
@media (max-width: 560px) {
  .recipe-page #cn-cookie p { font-size: .9rem; line-height: 1.5; }
  .recipe-page #cn-cookie .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recipe-page #cn-cookie .actions .btn { min-width: 0; min-height: 44px; padding-inline: 10px; }
  .recipe-cookie-policy { grid-column: 1 / -1; justify-self: center; }
}