.recipes-hero {
    display: grid;
    height: 335px;
    place-items: center;
    color: #fff;
    background: url("../images/bannerrecetas.png") center / cover no-repeat;
}

.recipes-hero-copy {
    width: min(90%, 760px);
    text-align: center;
}

.recipes-hero-copy img {
    width: 43px;
    height: 29px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.recipes-hero-copy h1 {
    margin: 0;
    color: var(--orange);
    font-size: var(--type-page-title);
}

.recipes-hero-copy p {
    max-width: 740px;
    margin: 16px auto 0;
    font-size: var(--type-body);
    line-height: 1.5;
}

.recipe-catalog {
    width: min(73%, 1400px);
    padding-block: 32px 70px;
}

.recipe-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.recipe-search {
    display: flex;
    align-items: center;
    width: min(26.5%, 370px);
    height: 42px;
    overflow: hidden;
    background: #f1f1f1;
    border-radius: 24px;
}

.recipe-search > svg {
    width: 18px;
    margin-left: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.recipe-search input {
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    background: transparent;
    border: 0;
    font-size: var(--type-note);
    outline: 0;
}

.recipe-search button {
    display: grid;
    width: 52px;
    height: 100%;
    padding: 0;
    place-items: center;
    background: transparent;
    border: 0;
    border-left: 1px solid #ccc;
}

.recipe-search button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.recipe-category-controls {
    display: flex;
    gap: 10px;
}

.recipe-category-controls button {
    position: relative;
    width: clamp(26px, 2.1vw, 40px);
    height: clamp(26px, 2.1vw, 40px);
    padding: 0;
    color: var(--blue);
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
}

.recipe-category-controls button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    content: "";
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
}

.recipe-category-controls button[data-scroll="prev"]::before {
    transform: translate(-40%, -50%) rotate(-135deg);
}

.recipe-category-controls button[data-scroll="next"]::before {
    transform: translate(-60%, -50%) rotate(45deg);
}

.recipe-category-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    margin-bottom: 32px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.recipe-category-track.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.recipe-category-track::-webkit-scrollbar {
    display: none;
}

.recipe-category {
    position: relative;
    flex: 0 0 calc((100% - 66px) / 4);
    height: 80px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #222;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 180ms ease;
}

.recipe-category.active::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: rgb(7 61 125 / 50%);
    border: 3px solid var(--orange);
    border-radius: inherit;
    pointer-events: none;
}

.recipe-category.active::after {
    position: absolute;
    z-index: 3;
    top: 7px;
    right: 7px;
    display: grid;
    width: 18px;
    height: 18px;
    content: "✓";
    place-items: center;
    color: #fff;
    background: var(--orange);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.recipe-category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.recipe-category span {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    transition: opacity 150ms ease;
}

.recipes-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.recipe-catalog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recipe-catalog-card[hidden],
.recipe-load-more[hidden] {
    display: none;
}

.recipe-catalog-card .recipe-image {
    aspect-ratio: 1;
}

.recipe-catalog-card .recipe-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.recipe-catalog-card .recipe-body h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.recipe-catalog-card .recipe-button {
    margin-top: auto;
    border: 2px solid var(--orange);
    cursor: pointer;
}

.recipe-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.recipe-load-more {
    min-height: 40px;
    padding: 9px 24px;
    color: #fff;
    background: var(--orange);
    border: 2px solid var(--orange);
    border-radius: 24px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.recipe-load-more:hover {
    color: var(--orange);
    background: #fff;
}

.recipe-empty {
    color: var(--blue);
    font-size: var(--type-body);
    text-align: center;
}

.recipe-dialog {
    width: min(1090px, calc(100% - 24px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: visible;
    color: #fff;
    background: #083984;
    border: 0;
}

.recipe-dialog::backdrop {
    background: rgb(0 20 55 / 68%);
}

.recipe-dialog::before {
    position: absolute;
    top: -12px;
    left: 50%;
    content: "";
    border-right: 14px solid transparent;
    border-bottom: 12px solid #083984;
    border-left: 14px solid transparent;
    transform: translateX(-50%);
}

.recipe-dialog-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 350px) minmax(0, 390px);
    justify-content: center;
    gap: clamp(28px, 5vw, 55px);
    min-height: 0;
    /* Top padding must clear the close button (top:55px + 28px tall, see
       .recipe-dialog-close below). The two columns are align-self: center,
       so their top edge can drift up toward the button as the title wraps
       to more lines and the content block grows taller than the image —
       reserving this much top padding keeps it below the button no matter
       how long the title gets. */
    padding: 96px clamp(24px, 4vw, 50px) 50px;
}

.recipe-dialog-close {
    position: absolute;
    top: 55px;
    right: clamp(30px, 13%, 145px);
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: var(--blue);
    background: #fff;
    border: 1.5px solid var(--orange);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
}

.recipe-dialog-close::before,
.recipe-dialog-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1.5px;
    content: "";
    background: var(--blue);
    border-radius: 2px;
}

.recipe-dialog-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.recipe-dialog-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.recipe-dialog-media {
    align-self: center;
}

.recipe-dialog-image {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
}

.recipe-dialog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-video-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.recipe-video-link[hidden] {
    display: none;
}

.recipe-video-link img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.recipe-video-link:hover,
.recipe-video-link:focus-visible {
    color: var(--orange);
}

.recipe-dialog-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.recipe-dialog-share > span {
    color: rgb(255 255 255 / 60%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recipe-dialog-share-links {
    display: flex;
    gap: 8px;
}

.recipe-dialog-share-links a {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    border-radius: 50%;
    transition: color 180ms ease, background 180ms ease;
}

.recipe-dialog-share-links svg {
    width: 15px;
    height: 15px;
}

.recipe-dialog-share-links a:hover,
.recipe-dialog-share-links a:focus-visible {
    color: var(--blue);
    background: var(--orange);
}

.recipe-dialog-content {
    align-self: center;
    min-width: 0;
}

.recipe-dialog-content h2 {
    margin: 0;
    color: var(--orange);
    font-size: 26px;
    line-height: 1.05;
}

.recipe-dialog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 14px;
    padding: 0 10px 0 0;
    list-style: none;
}

.recipe-dialog-meta li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.recipe-dialog-meta img,
.recipe-dialog-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    object-fit: contain;
}

.recipe-dialog-meta svg {
    fill: none;
    stroke: var(--orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.recipe-dialog-meta span {
    color: #fff;
    font-size: 11px;
}

.recipe-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 10px;
    padding: 3px;
    background: #f5f5f5;
    border-radius: 7px;
}

.recipe-tabs button {
    min-height: 28px;
    color: #777;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: var(--type-body);
    cursor: pointer;
}

.recipe-tabs button.active {
    color: #fff;
    background: var(--orange);
}

.recipe-tab-panel[hidden] {
    display: none;
}

.recipe-tab-panel {
    max-height: 230px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--orange) rgb(255 255 255 / 20%);
    scrollbar-width: thin;
}

.recipe-tab-panel::-webkit-scrollbar {
    width: 6px;
}

.recipe-tab-panel::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 20%);
    border-radius: 8px;
}

.recipe-tab-panel::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 8px;
}

.ingredients-panel {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
}

.ingredient-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    min-height: 39px;
    gap: 8px;
    padding: 4px 9px;
    color: #222;
    background: #f7f7f7;
    border-radius: 8px;
}

.ingredient-item > img,
.ingredient-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.ingredient-icon {
    display: grid;
    place-items: center;
    color: #888;
    font-size: 19px;
}

.ingredient-item small {
    display: block;
}

.ingredient-item strong {
    display: block;
    overflow-wrap: break-word;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.ingredient-item small {
    color: #aaa;
    font-size: 7px;
}

.ingredient-item small:empty {
    display: none;
}

.ingredient-item > span:last-child {
    color: #ccc;
}

.ingredient-item > span.checked {
    color: var(--orange);
}

.procedure-panel ol {
    position: relative;
    margin: 0 0 0 8px;
    padding: 0 0 0 18px;
    border-left: 1px dashed #fff;
    list-style: none;
}

.procedure-panel li {
    position: relative;
    min-height: 46px;
    padding: 0 0 12px 14px;
    font-size: 11px;
    line-height: 1.35;
}

.procedure-panel li::before {
    position: absolute;
    top: 2px;
    left: -23px;
    width: 9px;
    height: 9px;
    content: "";
    background: var(--blue);
    border: 2px solid var(--orange);
    border-radius: 50%;
}

.recipe-dialog-products-section {
    margin-top: 14px;
}

.recipe-dialog-products-section[hidden] {
    display: none;
}

.recipe-dialog-products-title {
    margin: 0 0 8px;
    color: rgb(255 255 255 / 60%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Fila con scroll horizontal, no grilla que envuelve: .recipe-dialog es
   overflow:visible en desktop (linea ~295) y solo .recipe-tab-panel acota su
   propio alto con scroll interno -- una sola fila mantiene el alto de esta
   seccion fijo sin importar cuantos productos tenga la receta, en vez de
   arriesgar que el dialog se estire mas alla del viewport. Mismo patron que
   .recipe-category-track / .protein-categories en otras paginas. */
.recipe-dialog-products {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--orange) rgb(255 255 255 / 20%);
    scrollbar-width: thin;
}

.recipe-dialog-products:empty {
    display: none;
}

.recipe-dialog-products::-webkit-scrollbar {
    height: 6px;
}

.recipe-dialog-products::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 20%);
    border-radius: 8px;
}

.recipe-dialog-products::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 8px;
}

.recipe-product-thumb {
    display: grid;
    width: 108px;
    flex: 0 0 108px;
    justify-items: center;
    gap: 6px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.recipe-product-thumb img {
    width: 108px;
    height: 108px;
    object-fit: contain;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color 150ms ease, transform 150ms ease;
}

.recipe-product-thumb:hover img,
.recipe-product-thumb:focus-visible img {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.recipe-product-thumb span {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recipe-product-zoom {
    width: min(560px, calc(100% - 32px));
    max-width: none;
    padding: 26px;
    color: #fff;
    background: #083984;
    border: 0;
    border-radius: 10px;
}

.recipe-product-zoom::backdrop {
    background: rgb(0 20 55 / 68%);
}

.recipe-product-zoom-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: var(--blue);
    background: #fff;
    border: 1.5px solid var(--orange);
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
}

.recipe-product-zoom-close::before,
.recipe-product-zoom-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1.5px;
    content: "";
    background: var(--blue);
    border-radius: 2px;
}

.recipe-product-zoom-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.recipe-product-zoom-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.recipe-product-zoom img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60dvh;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.recipe-product-zoom p {
    margin: 14px 0 0;
    color: #fff;
    font-size: var(--type-body);
    text-align: center;
}

@media (max-width: 900px) {
    .recipes-hero {
        height: 305px;
    }

    .recipes-hero-copy {
        width: calc(100% - 40px);
    }

    .recipe-catalog {
        width: 100%;
        padding: 56px 0 70px var(--page-gutter);
    }

    .recipe-tools {
        padding-right: var(--page-gutter);
    }

    .recipe-search {
        width: calc(100% - 98px);
    }

    .recipe-category-controls {
        gap: 6px;
    }

    .recipe-category-controls button {
        width: 38px;
        height: 38px;
    }

    .recipe-category-track {
        gap: 10px;
        margin-bottom: 48px;
        padding-right: var(--page-gutter);
    }

    .recipe-category {
        flex-basis: min(76vw, 300px);
        height: 90px;
    }

    .recipes-grid {
        display: block;
        padding-right: var(--page-gutter);
    }

    .recipe-catalog-card {
        width: 100%;
        margin-bottom: 24px;
    }

    .recipe-catalog-card .recipe-image {
        aspect-ratio: 1.12;
    }

    .recipe-catalog-card .recipe-body h3 {
        font-size: 13px;
    }

    .recipe-dialog {
        width: calc(100% - 28px);
        max-height: calc(100dvh - 28px);
        overflow-y: auto;
    }

    .recipe-dialog-inner {
        display: block;
        min-height: 0;
        padding: 58px 20px 34px;
    }

    .recipe-dialog-close {
        top: 14px;
        right: 14px;
    }

    .recipe-dialog-media {
        width: 100%;
        margin-bottom: 28px;
    }

    .recipe-dialog-content h2 {
        max-width: 270px;
        margin-inline: auto;
        text-align: center;
    }

    .recipe-dialog-meta {
        justify-content: center;
        gap: 18px;
    }

    .recipe-video-link {
        justify-content: center;
    }

    .recipe-dialog-share {
        justify-content: center;
    }

    .ingredients-panel {
        display: block;
    }

    .recipe-tab-panel {
        max-height: min(52dvh, 430px);
        padding-right: 6px;
    }

    .ingredient-item {
        min-height: 64px;
        margin-bottom: 12px;
    }

    .ingredient-item > img,
    .ingredient-icon {
        width: 40px;
        height: 40px;
    }

    .ingredient-item strong {
        font-size: 14px;
    }

    .ingredient-item small {
        font-size: 9px;
    }

    .recipe-dialog-products-title {
        text-align: center;
    }

    .recipe-product-thumb {
        width: 120px;
        flex-basis: 120px;
    }

    .recipe-product-thumb img {
        width: 120px;
        height: 120px;
    }

    .recipe-product-thumb span {
        font-size: 12px;
    }

    /* A diferencia de home.html (que tiene la seccion .chef-cta como respaldo),
       /recetas/ no tiene ningun otro enlace a Chef Virtual -- se sobreescribe
       el `display: none` de home.css para que el FAB siga siendo la unica
       entrada en mobile. */
    .chef-fab {
        display: block;
    }
}