/* Paleta propia de esta página. Los valores se editan en colors/*mode.json.
   Estas bases evitan un destello blanco mientras llega el JSON. */
html[data-page="postres"]{
    --postreMainBg: #faf6f9;
    --postreText: #382432;
    --postreMuted: #70576a;
    --postreAccent: #611754;
    background: var(--postreMainBg);
}
html[data-page="postres"][data-theme="dark"]{
    --postreMainBg: #191318;
    --postreText: #fff2fa;
    --postreMuted: #cfb8cb;
    --postreAccent: #efabd9;
}
@media (prefers-color-scheme: dark){
    html[data-page="postres"]:not([data-theme]){
        --postreMainBg: #191318;
        --postreText: #fff2fa;
        --postreMuted: #cfb8cb;
        --postreAccent: #efabd9;
    }
}

/* Los componentes comunes heredan estos alias, incluido el modal de compartir.
   La página de pizzas sigue usando sus colores originales. */
.pagePostres{
    --mainBg: var(--postreMainBg);
    --text: var(--postreText);
    --textBn: var(--postreText);
    --textNb: var(--postreText);
    --mainText: var(--postreText);
    --secondText: var(--postreMuted);
    --accent1: var(--postreAccent);
    --accent2: var(--postreAccent);
    --border: var(--postreBorder, var(--postreMuted));
    --softBorder: 1px solid var(--border);
    --bgCristal: var(--postreGlass, var(--postreMainBg));
    --btns: var(--postreImageBg, var(--postreMainBg));
    --btnsHover: var(--postreProductBg, var(--postreMainBg));
    --btnActive: 2px solid var(--postreAccent);
    --footerBg: var(--postreImageBg, var(--postreMainBg));
    --footerText: var(--postreText);
    --productBg: var(--postreProductBg, var(--postreMainBg));
    --productImageBg: var(--postreImageBg, var(--postreMainBg));
    --productText: var(--postreText);
    --productMuted: var(--postreMuted);
    --productBorder: var(--postreBorder, var(--postreMuted));
    --productAccent: var(--postreAccent);
    --productSelectedBg: var(--postreSelectedBg, var(--postreAccent));
    --productSelectedBorder: var(--postreAccent);
    --productOnAccent: var(--postreOnAccent, var(--postreMainBg));
    --shareBackdrop: var(--postreShareBackdrop, rgba(15, 8, 14, .80));
    background: var(--mainBg);
    color: var(--text);
}

.introPostres{
    min-height: clamp(320px, 29vw, 440px);
    isolation: isolate;
    justify-content: center;
    overflow: hidden;
    color: var(--productText);
}
.introPostres::after{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--postreHeroVeil, transparent);
    pointer-events: none;
    z-index: 1;
}
.introPostres .quickLinks{
    margin-top: 3.5rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    border: 0;
}
.introPostres .textIntro{
    max-width: 54%;
    gap: 1rem;
}
.introPostres .introPizza001{
    color: var(--productAccent);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.introPostres .textIntro .introPizza002{
    width: 100%;
    max-width: 440px;
    padding: .8rem 1rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--productText);
}
.pagePostres .sectionProducts .formSearch .formularySearch .buttonsCont .searchBtn{
    background: var(--productSelectedBg);
    color: var(--productOnAccent);
}
.pagePostres .sectionProducts .formSearch .formularySearch .buttonsCont .btnClean{
    background: var(--productImageBg);
    color: var(--productText);
    border: 1px solid var(--productBorder);
}

@media (max-width: 650px){
    .introPostres{
        padding: 245px 5% 1.6rem;
        min-height: 0;
    }
    .introPostres img{
        height: 230px;
        object-position: 85% center;
    }
    .introPostres::after{ display: none; }
    .introPostres .quickLinks{ margin: 0 0 .3rem; }
    .introPostres .textIntro{ max-width: 100%; }
    .introPostres .textIntro .introPizza002{
        max-width: none;
        padding: 0;
        background: none;
        border: 0;
        backdrop-filter: none;
    }
}

/* Un único precio, sin las tres tallas de las pizzas. */
.sectionPostres .singlePrice,
.pagePostres .sharePrices{
    grid-template-columns: minmax(0, 1fr);
}
.sectionPostres .singlePrice p,
.pagePostres .sharePrices p{
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    font-size: .85rem;
}
.sectionPostres .singlePrice .priceProduct,
.pagePostres .sharePrices .priceProduct{
    font-size: 1.2rem;
}

/* Seis postres: tres columnas en escritorio, dos en tablet y una en móvil. */
.sectionPostres .containerProducts{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px){
    .sectionPostres .containerProducts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px){
    .sectionPostres .containerProducts{ grid-template-columns: minmax(0, 1fr); }
}