/* ============================================================
   PALMAS WEB
   TIENDA PUBLICA
   PREMIUM 2026

   IDENTIDAD:
   ROJO + NARANJA + VERDE
   SIN ABUSAR DEL NEGRO
============================================================ */


/* ============================================================
   PALETA LOS PALMAS
============================================================ */

:root {
    --palma-red: #f04444;
    --palma-red-dark: #d9363e;
    --palma-red-soft: #fff0f0;
    --palma-orange: #f47b20;
    --palma-orange-soft: #fff3e8;
    --palma-green: #169b62;
    --palma-green-soft: #eaf8f1;
    --palma-cream: #fff9f5;
    --palma-background: #f8f7f6;
    --palma-card: #ffffff;
    --palma-text: #302a27;
    --palma-text-soft: #746e69;
    --palma-muted: #9a9591;
    --palma-border: #ece8e5;
    --palma-shadow: rgba(86, 61, 47, .08);
}


/* ============================================================
   BODY - AJUSTE VISUAL SUAVE
============================================================ */

body {
    background: linear-gradient( 180deg, #ffffff 0%, #faf9f8 40%, #f8f7f6 100% );
    color: var(--palma-text);
}


/* ============================================================
   NAVBAR
============================================================ */

.navbar-pro {
    border-bottom: 1px solid rgba(240, 68, 68, .08);
    box-shadow: 0 5px 20px rgba(91, 54, 36, .045);
}


/* ============================================================
   BOTON CARRITO
============================================================ */

.btn-cart {
    background: linear-gradient( 135deg, var(--palma-red), #f34c45 ) !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(240, 68, 68, .27);
    transition: transform .18s ease, box-shadow .18s ease;
}


    .btn-cart:hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 23px rgba(240, 68, 68, .34);
    }


/* ============================================================
   CONEXION
============================================================ */

.conexion-banner {
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 50%;
    max-width: calc(100vw - 24px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient( 135deg, var(--palma-orange), #e96a12 );
    color: #ffffff;
    font-size: .72rem;
    font-weight: 750;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -120%);
    transition: transform .25s ease, opacity .25s ease;
    box-shadow: 0 10px 28px rgba(105, 55, 22, .18);
}


    .conexion-banner.visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }


/* ============================================================
   ERROR GENERAL
============================================================ */

.tienda-error-principal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #f1d6d7;
    border-radius: 18px;
    background: #fff7f7;
}


.tienda-error-principal-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--palma-red-soft);
    color: var(--palma-red);
    font-size: 1.08rem;
}


.tienda-error-principal strong,
.tienda-error-principal span {
    display: block;
}


.tienda-error-principal strong {
    color: var(--palma-text);
    font-size: .8rem;
}


.tienda-error-principal span {
    margin-top: 3px;
    color: var(--palma-text-soft);
    font-size: .68rem;
}


.tienda-error-principal button {
    grid-column: 1 / -1;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--palma-red);
    color: #ffffff;
    font-size: .71rem;
    font-weight: 850;
}


/* ============================================================
   BANNERS
============================================================ */

.tienda-banner-section {
    margin-bottom: 25px;
}


.tienda-carousel {
    overflow: hidden;
    border-radius: 21px;
    background: #eeeeee;
    box-shadow: 0 10px 30px rgba(75, 49, 36, .08);
}


.tienda-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 175px;
    overflow: hidden;
    background: #f3f1ef;
}


.tienda-banner-imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   GRADIENTE BANNER
   MUCHO MAS SUAVE QUE LA VERSION NEGRA
============================================================ */

.tienda-banner-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient( 0deg, rgba(85, 31, 23, .48) 0%, rgba(85, 31, 23, .10) 45%, rgba(85, 31, 23, 0) 68% );
}


/* ============================================================
   ACCION BANNER
============================================================ */

.tienda-banner-action {
    position: absolute;
    z-index: 2;
    left: 16px;
    right: 16px;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


    .tienda-banner-action > strong {
        max-width: 60%;
        color: #ffffff;
        font-size: .87rem;
        font-weight: 900;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    }


.tienda-banner-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: var(--palma-red-dark);
    font-size: .62rem;
    font-weight: 900;
    box-shadow: 0 6px 17px rgba(0, 0, 0, .13);
    transition: transform .18s ease, box-shadow .18s ease;
}


    .tienda-banner-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .17);
    }


/* ============================================================
   CAROUSEL CONTROLS
============================================================ */

.tienda-carousel
.carousel-control-prev,
.tienda-carousel
.carousel-control-next {
    width: 11%;
    opacity: .85;
}


.tienda-carousel
.carousel-control-prev-icon,
.tienda-carousel
.carousel-control-next-icon {
    width: 28px;
    height: 28px;
    background-size: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
}


/* ============================================================
   SECTION HEADERS
============================================================ */

.tienda-categorias-section,
.tienda-productos-section {
    margin-bottom: 27px;
}


.tienda-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}


.tienda-section-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--palma-red);
    font-size: .59rem;
    font-weight: 950;
    letter-spacing: .1em;
}


.tienda-section-header h2 {
    margin: 0;
    color: var(--palma-text);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.025em;
}


.tienda-product-count {
    padding-bottom: 2px;
    color: var(--palma-muted);
    font-size: .61rem;
}


/* ============================================================
   CATEGORIAS
============================================================ */

.scroll-categorias {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    overflow-x: auto;
    padding: 3px 3px 13px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}


    .scroll-categorias::-webkit-scrollbar {
        display: none;
    }


/* ============================================================
   CATEGORIA
   IMPORTANTE:
   YA NO ES UNA TARJETA NEGRA
============================================================ */

.tienda-categorias-section
.categoria-item {
    min-width: 69px;
    width: 69px;
    flex: 0 0 69px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--palma-text-soft);
    box-shadow: none !important;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .18s ease;
}


    .tienda-categorias-section
    .categoria-item:hover {
        transform: translateY(-2px);
    }


/* ============================================================
   CONTENEDOR CIRCULAR
============================================================ */

.categoria-imagen-container {
    position: relative;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(78, 56, 44, .11);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}


    /* ============================================================
   IMAGEN CATEGORIA
============================================================ */

    .categoria-imagen-container img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        border-radius: 50% !important;
        object-fit: cover;
        opacity: 1 !important;
    }


/* ============================================================
   TODOS
============================================================ */

.categoria-todos {
    background: linear-gradient( 145deg, #fff6ef, #ffffff );
    color: var(--palma-orange);
    font-size: 1.18rem;
}


/* ============================================================
   CATEGORIA ACTIVA
============================================================ */

.tienda-categorias-section
.categoria-item.categoria-activa {
    border: 0 !important;
    background: transparent !important;
    color: var(--palma-text) !important;
    box-shadow: none !important;
}


.categoria-item.categoria-activa
.categoria-imagen-container {
    border-color: var(--palma-red);
    transform: scale(1.035);
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(240, 68, 68, .20), 0 7px 19px rgba(240, 68, 68, .16);
}


.categoria-item.categoria-activa
.categoria-todos {
    background: linear-gradient( 145deg, var(--palma-red-soft), #ffffff );
    color: var(--palma-red);
}


/* ============================================================
   NOMBRE CATEGORIA
============================================================ */

.categoria-nombre {
    width: 100%;
    min-height: 29px;
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: .61rem;
    font-weight: 600;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.categoria-item.categoria-activa
.categoria-nombre {
    color: var(--palma-text);
    font-weight: 900;
}


/* ============================================================
   PRODUCT GRID
============================================================ */

#productosGrid {
    --bs-gutter-x: .85rem;
    --bs-gutter-y: .9rem;
}


/* ============================================================
   PRODUCT CARD
============================================================ */

.tienda-product-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--palma-border);
    border-radius: 18px;
    background: var(--palma-card);
    box-shadow: 0 7px 21px var(--palma-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}


    .tienda-product-card:hover {
        transform: translateY(-3px);
        border-color: rgba(240, 68, 68, .18);
        box-shadow: 0 13px 31px rgba(83, 57, 44, .105);
    }


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.tienda-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / .88;
    overflow: hidden;
    background: linear-gradient( 145deg, #faf9f8, #f3f1ef );
}


    .tienda-product-image > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .32s ease;
    }


.tienda-product-card:hover
.tienda-product-image > img {
    transform: scale(1.025);
}


/* ============================================================
   BADGES
============================================================ */

.tienda-product-badges {
    position: absolute;
    z-index: 2;
    top: 9px;
    left: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


.tienda-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--palma-text-soft);
    font-size: .51rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 11px rgba(0, 0, 0, .06);
}


.tienda-badge-combo {
    background: rgba(255, 244, 234, .96);
    color: #c96415;
}


.tienda-badge-opciones {
    background: rgba(255, 245, 245, .96);
    color: var(--palma-red-dark);
}


/* ============================================================
   PRODUCT BODY
============================================================ */

.tienda-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 11px 11px;
}


    .tienda-product-body h3 {
        margin: 0;
        display: -webkit-box;
        overflow: hidden;
        color: var(--palma-text);
        font-size: .79rem;
        font-weight: 950;
        line-height: 1.22;
        text-transform: uppercase;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


    .tienda-product-body > p {
        min-height: 34px;
        margin: 6px 0 11px;
        display: -webkit-box;
        overflow: hidden;
        color: var(--palma-text-soft);
        font-size: .59rem;
        font-weight: 500;
        line-height: 1.4;
        text-transform: uppercase;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


/* ============================================================
   PRICE
============================================================ */

.tienda-product-price {
    margin-top: auto;
    margin-bottom: 8px;
}


    .tienda-product-price small,
    .tienda-product-price strong {
        display: block;
    }


    .tienda-product-price small {
        margin-bottom: 1px;
        color: var(--palma-muted);
        font-size: .49rem;
    }


    .tienda-product-price strong {
        color: var(--palma-red);
        font-size: .92rem;
        font-weight: 950;
    }


/* ============================================================
   ADD BUTTON
   VOLVEMOS A LA IDENTIDAD DE LA UI ANTERIOR
============================================================ */

.tienda-add-button {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 11px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient( 135deg, var(--palma-red), #f24843 );
    color: #ffffff;
    font-size: .64rem;
    font-weight: 900;
    box-shadow: 0 6px 15px rgba(240, 68, 68, .20);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}


    .tienda-add-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 19px rgba(240, 68, 68, .29);
    }


    .tienda-add-button:active {
        transform: scale(.985);
    }


    .tienda-add-button:disabled,
    .tienda-add-button.loading {
        opacity: .6;
        pointer-events: none;
    }


        .tienda-add-button.loading i {
            animation: tienda-spin .8s linear infinite;
        }


/* ============================================================
   VACIO
============================================================ */

.tienda-productos-vacio {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border: 1px dashed #e7ded8;
    border-radius: 19px;
    background: var(--palma-cream);
    text-align: center;
}


    .tienda-productos-vacio > div {
        width: 50px;
        height: 50px;
        margin-bottom: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        background: var(--palma-red-soft);
        color: var(--palma-red);
        font-size: 1.15rem;
    }


    .tienda-productos-vacio strong {
        color: var(--palma-text);
        font-size: .76rem;
    }


    .tienda-productos-vacio span {
        margin-top: 3px;
        color: var(--palma-muted);
        font-size: .64rem;
    }


/* ============================================================
   PRODUCT CONFIGURATOR BACKDROP
============================================================ */

.producto-sheet-backdrop {
    position: fixed;
    z-index: 6000;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(53, 37, 31, .56);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .23s ease, visibility .23s ease;
}


    .producto-sheet-backdrop.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


/* ============================================================
   PRODUCT SHEET
============================================================ */

.producto-sheet {
    width: 100%;
    max-height: min(92dvh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 25px 25px 0 0;
    background: #ffffff;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -22px 70px rgba(54, 36, 28, .24);
}


.producto-sheet-backdrop.visible
.producto-sheet {
    transform: translateY(0);
}


/* ============================================================
   HANDLE
============================================================ */

.producto-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 9px 0 2px;
}


    .producto-sheet-handle span {
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #ddd5d1;
    }


/* ============================================================
   SHEET HEADER
============================================================ */

.producto-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 13px;
    border-bottom: 1px solid var(--palma-border);
}


.producto-sheet-eyebrow {
    display: block;
    color: var(--palma-red);
    font-size: .55rem;
    font-weight: 950;
    letter-spacing: .09em;
}


.producto-sheet-header h2 {
    margin: 2px 0 0;
    color: var(--palma-text);
    font-size: .97rem;
    font-weight: 950;
}


.producto-sheet-close {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--palma-border);
    border-radius: 12px;
    background: var(--palma-cream);
    color: var(--palma-red-dark);
}


/* ============================================================
   CONTENT
============================================================ */

.producto-sheet-content {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 15px 14px 23px;
    overscroll-behavior: contain;
}


/* ============================================================
   PRODUCT HEADER
============================================================ */

.config-product-header {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}


.config-product-image {
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 1px solid var(--palma-border);
    border-radius: 17px;
    background: #f4f2f0;
}


    .config-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.config-product-info {
    min-width: 0;
}


    .config-product-info h3 {
        margin: 1px 0 3px;
        color: var(--palma-text);
        font-size: .91rem;
        font-weight: 950;
    }


    .config-product-info p {
        margin: 0;
        color: var(--palma-text-soft);
        font-size: .64rem;
        line-height: 1.42;
    }


.config-product-price {
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--palma-red-soft);
    color: var(--palma-red-dark);
    font-size: .63rem;
    font-weight: 900;
}


/* ============================================================
   CONFIG SECTION
============================================================ */

.config-section {
    margin-top: 19px;
}


.config-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
    margin-bottom: 10px;
}


    .config-section-header > div > span {
        display: block;
        color: var(--palma-orange);
        font-size: .54rem;
        font-weight: 950;
        letter-spacing: .08em;
    }


    .config-section-header h4 {
        margin: 2px 0 0;
        color: var(--palma-text);
        font-size: .76rem;
        font-weight: 900;
    }


/* ============================================================
   GROUP STATUS
============================================================ */

.config-group-status {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f4f2f0;
    color: var(--palma-text-soft);
    font-size: .55rem;
    font-weight: 850;
}


    .config-group-status.complete {
        background: var(--palma-green-soft);
        color: var(--palma-green);
    }


    .config-group-status.invalid {
        background: var(--palma-red-soft);
        color: var(--palma-red-dark);
    }


/* ============================================================
   PRESENTACIONES
============================================================ */

.config-presentations {
    display: grid;
    gap: 8px;
}


.config-presentation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--palma-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--palma-text);
    text-align: left;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}


    .config-presentation.active {
        border-color: var(--palma-orange);
        background: var(--palma-orange-soft);
    }


    .config-presentation strong {
        font-size: .69rem;
    }


.config-presentation-check {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd4ce;
    border-radius: 50%;
    color: transparent;
}


.config-presentation.active
.config-presentation-check {
    border-color: var(--palma-orange);
    background: var(--palma-orange);
    color: #ffffff;
}


/* ============================================================
   INCLUIDOS
============================================================ */

.config-included-list {
    display: grid;
    gap: 7px;
}


.config-included-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid #e4f2e9;
    border-radius: 13px;
    background: #f4fbf7;
}


    .config-included-item > i {
        color: var(--palma-green);
    }


    .config-included-item strong {
        color: var(--palma-text);
        font-size: .64rem;
    }


    .config-included-item span {
        margin-left: auto;
        color: var(--palma-green);
        font-size: .58rem;
        font-weight: 800;
    }


/* ============================================================
   OPCIONES
============================================================ */

.config-options {
    display: grid;
    gap: 8px;
}


.config-option {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--palma-border);
    border-radius: 15px;
    background: #ffffff;
}


.config-option-image {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 12px;
    background: #f4f2f0;
}


    .config-option-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.config-option-info {
    min-width: 0;
}


    .config-option-info strong {
        display: block;
        overflow: hidden;
        color: var(--palma-text);
        font-size: .66rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .config-option-info small {
        display: block;
        margin-top: 2px;
        color: var(--palma-muted);
        font-size: .54rem;
    }


.config-option-extra {
    display: inline-block;
    margin-top: 4px;
    color: var(--palma-orange);
    font-size: .58rem;
    font-weight: 900;
}


/* ============================================================
   QUANTITY
============================================================ */

.config-quantity {
    display: grid;
    grid-template-columns: 32px 30px 32px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e5dfdb;
    border-radius: 11px;
    background: #ffffff;
}


    .config-quantity button {
        width: 32px;
        height: 35px;
        border: 0;
        background: var(--palma-red-soft);
        color: var(--palma-red);
        font-size: .76rem;
        font-weight: 950;
    }


        .config-quantity button:hover {
            background: #ffe4e4;
        }


        .config-quantity button:disabled {
            background: #f6f4f2;
            color: #bcb6b2;
            opacity: .7;
        }


    .config-quantity span {
        color: var(--palma-text);
        text-align: center;
        font-size: .67rem;
        font-weight: 900;
    }


/* ============================================================
   SHEET FOOTER
============================================================ */

.producto-sheet-footer {
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr);
    align-items: center;
    gap: 13px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--palma-border);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 28px rgba(70, 46, 35, .045);
}


.producto-sheet-total span,
.producto-sheet-total strong {
    display: block;
}


.producto-sheet-total span {
    color: var(--palma-muted);
    font-size: .56rem;
}


.producto-sheet-total strong {
    color: var(--palma-red);
    font-size: 1.05rem;
    font-weight: 950;
}


.producto-sheet-add {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient( 135deg, var(--palma-red), #f24b43 );
    color: #ffffff;
    font-size: .71rem;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(240, 68, 68, .22);
}


    .producto-sheet-add:disabled {
        background: #e1dcd9;
        color: #9b9591;
        box-shadow: none;
        opacity: 1;
    }


/* ============================================================
   MODAL GENERAL
============================================================ */

.palmas-modal-backdrop {
    position: fixed;
    z-index: 7000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(60, 39, 31, .58);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}


    .palmas-modal-backdrop.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


.palmas-modal {
    width: min(390px, 100%);
    padding: 23px 20px 18px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 28px 80px rgba(55, 34, 26, .26);
    transform: translateY(14px) scale(.98);
    transition: transform .22s ease;
}


.palmas-modal-backdrop.visible
.palmas-modal {
    transform: translateY(0) scale(1);
}


.palmas-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--palma-orange-soft);
    color: var(--palma-orange);
    font-size: 1.25rem;
}


    .palmas-modal-icon.success {
        background: var(--palma-green-soft);
        color: var(--palma-green);
    }


    .palmas-modal-icon.warning {
        background: var(--palma-orange-soft);
        color: var(--palma-orange);
    }


    .palmas-modal-icon.error {
        background: var(--palma-red-soft);
        color: var(--palma-red);
    }


.palmas-modal h2 {
    margin: 0;
    color: var(--palma-text);
    font-size: 1rem;
    font-weight: 950;
}


.palmas-modal p {
    max-width: 310px;
    margin: 7px auto 0;
    color: var(--palma-text-soft);
    font-size: .7rem;
    line-height: 1.55;
}


.palmas-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 18px;
}


    .palmas-modal-actions.has-secondary {
        grid-template-columns: 1fr 1fr;
    }


.palmas-modal-primary,
.palmas-modal-secondary {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 900;
}


.palmas-modal-primary {
    background: var(--palma-red);
    color: #ffffff;
}


.palmas-modal-secondary {
    background: var(--palma-cream);
    color: var(--palma-text);
}


/* ============================================================
   CARRITO - EXTENSION
============================================================ */

.carrito-item-configuracion {
    display: block;
    margin-top: 3px;
    color: var(--palma-text-soft);
    font-size: .57rem;
    line-height: 1.32;
}


.carrito-item-quantity {
    display: inline-grid;
    grid-template-columns: 28px 29px 28px;
    align-items: center;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid var(--palma-border);
    border-radius: 9px;
}


    .carrito-item-quantity button {
        width: 28px;
        height: 28px;
        border: 0;
        background: var(--palma-red-soft);
        color: var(--palma-red);
        font-size: .7rem;
    }


    .carrito-item-quantity span {
        color: var(--palma-text);
        text-align: center;
        font-size: .63rem;
        font-weight: 850;
    }


/* ============================================================
   SCROLL LOCK
============================================================ */

body.palmas-scroll-lock {
    overflow: hidden;
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) {

    .tienda-banner {
        min-height: 275px;
    }


    .categoria-imagen-container {
        width: 67px;
        height: 67px;
        flex-basis: 67px;
    }


    .tienda-categorias-section
    .categoria-item {
        width: 76px;
        min-width: 76px;
        flex-basis: 76px;
    }


    .producto-sheet-backdrop {
        align-items: center;
        padding: 24px;
    }


    .producto-sheet {
        width: min(760px, 100%);
        max-height: min(88vh, 850px);
        border-radius: 25px;
        transform: translateY(20px) scale(.98);
    }


    .producto-sheet-backdrop.visible
    .producto-sheet {
        transform: translateY(0) scale(1);
    }


    .producto-sheet-handle {
        display: none;
    }


    .producto-sheet-header {
        padding: 18px 20px;
    }


    .producto-sheet-content {
        padding: 18px 20px 25px;
    }


    .producto-sheet-footer {
        padding: 14px 20px;
    }


    .config-product-header {
        grid-template-columns: 100px minmax(0, 1fr);
    }


    .config-product-image {
        width: 100px;
        height: 100px;
    }
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .tienda-product-body h3 {
        font-size: .82rem;
    }


    .tienda-product-body > p {
        font-size: .61rem;
    }
}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (max-width: 390px) {

    .scroll-categorias {
        gap: 10px;
    }


    .tienda-categorias-section
    .categoria-item {
        min-width: 65px;
        width: 65px;
        flex-basis: 65px;
    }


    .categoria-imagen-container {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }


    .tienda-product-body {
        padding: 10px;
    }


        .tienda-product-body h3 {
            font-size: .75rem;
        }


        .tienda-product-body > p {
            font-size: .56rem;
        }


    /*
       IMPORTANTE:
       NO ocultamos "Agregar".
       El botón completo es más amigable en móvil.
    */

    .tienda-add-button {
        min-height: 40px;
        font-size: .61rem;
    }


    .config-option {
        grid-template-columns: 45px minmax(0, 1fr) auto;
    }


    .config-option-image {
        width: 45px;
        height: 45px;
    }


    .config-quantity {
        grid-template-columns: 29px 27px 29px;
    }


        .config-quantity button {
            width: 29px;
        }
}


/* ============================================================
   ANIMACIONES
============================================================ */

@keyframes tienda-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ============================================================
   ACCESIBILIDAD
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .conexion-banner,
    .btn-cart,
    .tienda-banner-cta,
    .categoria-item,
    .categoria-imagen-container,
    .tienda-product-card,
    .tienda-product-image > img,
    .tienda-add-button,
    .producto-sheet-backdrop,
    .producto-sheet,
    .config-presentation,
    .palmas-modal-backdrop,
    .palmas-modal {
        transition: none !important;
    }
}