:root,
html[data-tema="celeste"] {
    --ps-purple: #1a8fd0;
    --ps-purple-dark: #1276b0;
    --ps-purple-deep: #0d4f78;
    --ps-gold: #ffc857;
    --ps-coral: #e85d4c;
    --ps-bg: #f3f8fc;
    --ps-ink: #143044;
    --ps-muted: #5c7386;
    --ps-card: #ffffff;
    --ps-soft: #e7f4fb;
    --ps-line: #d5e6f2;
    --ps-hover: #e8f5fc;
    --ps-radius: 18px;
}

html[data-tema="actual"] {
    --ps-purple: #6b1e8c;
    --ps-purple-dark: #4a1463;
    --ps-purple-deep: #2a1238;
    --ps-gold: #ffc857;
    --ps-coral: #e85d4c;
    --ps-bg: #f6f1ea;
    --ps-ink: #24152c;
    --ps-muted: #6c5a75;
    --ps-card: #ffffff;
    --ps-soft: #f3e7fa;
    --ps-line: #eadff3;
    --ps-hover: #f6eefe;
}

html[data-tema="oscuro"] {
    color-scheme: dark;
    --ps-purple: #243044;
    --ps-purple-dark: #1a2330;
    --ps-purple-deep: #10151d;
    --ps-gold: #7ec8ff;
    --ps-coral: #ff8b7a;
    --ps-bg: #12161d;
    --ps-ink: #e8edf4;
    --ps-muted: #a8b3c2;
    --ps-card: #1c2430;
    --ps-soft: #243044;
    --ps-line: #2c3848;
    --ps-hover: #2a3648;
}

html[data-tema="azul"] {
    --ps-purple: #0d6efd;
    --ps-purple-dark: #0a58ca;
    --ps-purple-deep: #052c65;
    --ps-gold: #ffc107;
    --ps-coral: #dc3545;
    --ps-bg: #f8f9fa;
    --ps-ink: #212529;
    --ps-muted: #6c757d;
    --ps-card: #ffffff;
    --ps-soft: #e7f1ff;
    --ps-line: #dee2e6;
    --ps-hover: #e7f1ff;
}

html[data-tema="verde"] {
    --ps-purple: #198754;
    --ps-purple-dark: #146c43;
    --ps-purple-deep: #0f5132;
    --ps-gold: #ffc107;
    --ps-coral: #dc3545;
    --ps-bg: #f8f9fa;
    --ps-ink: #212529;
    --ps-muted: #6c757d;
    --ps-card: #ffffff;
    --ps-soft: #d1e7dd;
    --ps-line: #dee2e6;
    --ps-hover: #e8f6ef;
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--ps-bg);
    color: var(--ps-ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: inherit; }

.store-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.store-main {
    flex: 1;
    min-width: 0;
}

.topbar {
    background: var(--ps-purple-dark);
    color: #f3e9fb;
    font-size: .82rem;
    padding: .45rem 0;
}

.topbar a { color: #f3e9fb; text-decoration: none; }
.topbar a:hover { color: var(--ps-gold); }

.topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
}

.topbar__dir {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.topbar__tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
}

.topbar__cart {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    font-size: 1.05rem;
}

.topbar__cart:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff !important;
}

.cart-badge--topbar {
    top: -0.2rem;
    right: -0.25rem;
}

.store-header {
    background: var(--ps-purple);
    color: #fff;
    padding: 1rem 0 .85rem;
}

.store-header__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: #fff;
    min-width: 190px;
}

.brand strong { display: block; font-size: 1.1rem; line-height: 1.1; }
.brand small { display: block; opacity: .8; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

.search-box {
    flex: 1;
    display: flex;
    background: var(--ps-card);
    border-radius: 999px;
    overflow: hidden;
    min-width: 0;
}

.search-box .form-control {
    border: 0;
    box-shadow: none;
    padding: .7rem 1rem;
}

.search-box__btn,
.search-box .search-box__btn {
    --dxbl-btn-bg: var(--ps-gold);
    --dxbl-btn-hover-bg: #ffd67a;
    background: var(--ps-gold) !important;
    color: var(--ps-purple-deep) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    padding-inline: 1.2rem !important;
}

.search-box--mobile { border-radius: 12px; }

.header-actions { display: flex; gap: .4rem; align-items: flex-start; }
.header-action {
    background: transparent;
    border: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: .72rem;
    min-width: 72px;
}
.header-action i { font-size: 1.35rem; }

.header-action--update {
    border: 0;
    background: transparent;
    cursor: pointer;
    gap: .35rem;
}
.header-action--update span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.header-action--update strong {
    font-size: .78rem;
    font-weight: 700;
}
.header-action--update small {
    font-size: .68rem;
    opacity: .85;
    font-weight: 600;
}
.header-action--update:disabled {
    opacity: .55;
    cursor: wait;
}
.header-action--update:hover:not(:disabled) {
    color: #ffe08a;
}

.mobile-info__icon--update {
    background: #1a8fd0;
    color: #fff;
}

.header-action--cart {
    position: relative;
    text-decoration: none;
}
.cart-badge {
    position: absolute;
    top: -0.15rem;
    right: 0.1rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #ffc107;
    color: #1a1a1a;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}
.carro-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--ps-soft);
}
.carro-tabla th { white-space: nowrap; }
.producto-qty { max-width: 110px; }

/* Solo /carro: altura según contenido + scroll del documento (evita main=0px / solape con footer) */
html.ps-carro,
html.ps-carro body,
html.ps-carro #app {
    height: auto !important;
    min-height: 100%;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html.ps-carro .store-shell {
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    display: block;
    overflow: visible !important;
}

html.ps-carro .store-main {
    display: block;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
    flex: none;
}

html.ps-carro .store-footer {
    display: block;
}

@media (max-width: 767.98px) {
    html.ps-carro .cat-bar {
        display: none;
    }

    html.ps-carro .search-box--mobile {
        display: none !important;
    }
}

.page-carro {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

.carro-aviso {
    padding: .75rem .9rem;
}

.carro-aviso__detalle {
    margin-top: .45rem;
}

@media (max-width: 767.98px) {
    .carro-aviso__detalle {
        display: none;
    }
}

.carro-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.carro-cards {
    display: grid;
    gap: .85rem;
}

.carro-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: .75rem;
    padding: .85rem;
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    border-radius: 14px;
}

.carro-card__media {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ps-soft);
}

.carro-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carro-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}

.carro-card__head strong {
    font-size: .95rem;
    line-height: 1.25;
}

.carro-card__meta {
    color: var(--ps-muted);
    font-size: .82rem;
    margin-top: .15rem;
}

.carro-card__qty {
    margin-top: .55rem;
}

.carro-card__qty label {
    display: block;
    font-size: .78rem;
    color: var(--ps-muted);
    margin-bottom: .2rem;
}

.carro-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ps-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ps-card);
    max-width: 160px;
}

.carro-qty__btn {
    width: 2.4rem;
    border: 0;
    background: var(--ps-soft);
    color: var(--ps-ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.carro-qty__input {
    width: 3.2rem;
    border: 0;
    border-left: 1px solid var(--ps-line);
    border-right: 1px solid var(--ps-line);
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
}

.carro-qty__input::-webkit-outer-spin-button,
.carro-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.carro-card__total {
    margin-top: .55rem;
    font-weight: 800;
    font-size: 1.05rem;
}

.carro-contacto {
    margin-bottom: 1.5rem;
}

.portal-user {
    position: relative;
}
.portal-user__btn {
    cursor: pointer;
    list-style: none;
}
.portal-user__btn::-webkit-details-marker { display: none; }
.portal-user--off .portal-user__btn i {
    color: rgba(255, 255, 255, .72);
    filter: grayscale(.35);
}
.portal-user--on .portal-user__btn i {
    color: #7dffb2;
    text-shadow: 0 0 10px rgba(46, 204, 113, .45);
}
html[data-tema="oscuro"] .portal-user--on .portal-user__btn i { color: #7ec8ff; text-shadow: 0 0 10px rgba(126, 200, 255, .45); }
html[data-tema="actual"] .portal-user--on .portal-user__btn i { color: #ffe08a; text-shadow: 0 0 10px rgba(255, 200, 80, .4); }
html[data-tema="azul"] .portal-user--on .portal-user__btn i,
html[data-tema="celeste"] .portal-user--on .portal-user__btn i { color: #9ef0ff; }
html[data-tema="verde"] .portal-user--on .portal-user__btn i { color: #b8ffce; }

.portal-user__menu {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    min-width: 210px;
    background: var(--ps-card);
    color: var(--ps-ink);
    border: 1px solid var(--ps-line);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(20, 48, 68, .18);
    padding: .4rem;
    z-index: 40;
}
.portal-user__nombre {
    padding: .55rem .7rem .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ps-muted);
    border-bottom: 1px solid var(--ps-line);
    margin-bottom: .25rem;
}
.portal-user__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ps-ink);
    text-decoration: none;
    text-align: left;
    border-radius: 10px;
    padding: .55rem .7rem;
    font-size: .9rem;
    cursor: pointer;
}
.portal-user__item:hover { background: var(--ps-hover); }

.portal-beneficios {
    color: var(--ps-muted);
    margin: 0 0 1.1rem;
    line-height: 1.45;
}
.portal-link {
    color: var(--ps-purple);
    font-weight: 700;
    text-decoration: none;
}
.portal-link:hover { text-decoration: underline; }
.portal-auth-card h1 { margin-bottom: .5rem; font-size: 1.6rem; }

.mobile-info__btn {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.mobile-info__link--static { cursor: default; }
.mobile-info__icon--on {
    background: #1faa4b;
    color: #fff;
}

.btn-icon {
    color: #fff;
    font-size: 1.6rem;
    padding: .2rem .4rem;
}

.cat-bar {
    background: var(--ps-card);
    border-bottom: 1px solid var(--ps-line);
    position: relative;
    z-index: 20;
}

.cat-bar__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 52px;
}

.cat-bar__all {
    background: var(--ps-gold);
    color: var(--ps-purple-deep);
    border: 0;
    font-weight: 700;
    padding: .55rem 1rem;
    border-radius: 8px;
}

.cat-bar__quick {
    gap: 1.1rem;
    overflow: auto;
    white-space: nowrap;
    flex: 1;
}

.cat-bar__quick a {
    text-decoration: none;
    color: var(--ps-ink);
    font-weight: 600;
    font-size: .92rem;
}

.cat-bar__quick a.active, .cat-bar__quick a:hover { color: var(--ps-purple); }

.cat-bar__trigger { position: relative; }

.mega {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: min(920px, 90vw);
    background: var(--ps-card);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 40px rgba(42, 18, 56, .18);
    padding: 1rem;
}

.mega.is-open { display: block; }

.mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem 1rem;
}

.mega__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    padding: .5rem .4rem;
    border-radius: 8px;
    color: var(--ps-ink);
}

.mega__item:hover { background: var(--ps-hover); color: var(--ps-purple); }
.mega__icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--ps-soft);
    display: grid; place-items: center;
    color: var(--ps-purple);
}

.mobile-cats { display: flex; flex-direction: column; }
.mobile-cats a {
    display: flex; gap: .7rem; align-items: center;
    padding: .7rem 0;
    text-decoration: none;
    border-bottom: 1px solid var(--ps-line);
}

.mobile-info {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.mobile-info__wa,
.mobile-info__link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem .9rem;
    border-radius: 14px;
    background: var(--ps-soft);
    text-decoration: none;
    color: inherit;
}
.mobile-info__wa:hover,
.mobile-info__link:hover {
    background: var(--ps-hover);
}
.mobile-info__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ps-card);
    color: var(--ps-purple);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.mobile-info__icon--wa {
    background: #25d366;
    color: #fff;
}
.mobile-info__wa span:last-child,
.mobile-info__link span:last-child {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.mobile-info strong { font-size: .95rem; }
.mobile-info small {
    color: var(--ps-muted);
    font-size: .82rem;
}

.hero {
    background: var(--ps-purple-deep);
}

.hero-carousel, .hero .dxbl-carousel {
    max-width: 1280px;
    margin: 0 auto;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.section-head h1, .section-head h2 { margin: 0 0 .2rem; }

.cat-grid, .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cat-card, .product-card {
    background: var(--ps-card);
    border-radius: var(--ps-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(42, 18, 56, .06);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cat-card:hover, .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(42, 18, 56, .12);
}

.product-card__media {
    aspect-ratio: 1 / 1;
    background: var(--ps-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.product-card__empty {
    color: var(--ps-purple);
    font-size: 2rem;
    opacity: .55;
}

.cat-card__media {
    aspect-ratio: 16 / 10;
    background: var(--ps-soft);
    overflow: hidden;
    display: block;
}

.cat-card__media img,
.product-card__media img,
.category-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cat-card__fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: var(--ps-purple);
    opacity: .55;
    background: linear-gradient(145deg, #fff7f0, #f3e9ff);
}

.product-card__media img {
    height: 100%;
}

.product-gallery {
    background: var(--ps-card);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(42, 18, 56, .06);
}

.product-gallery__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ps-bg);
    display: grid;
    place-items: center;
}

.product-gallery__stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--ps-card);
}

.product-gallery__empty {
    color: var(--ps-muted);
    font-size: 3rem;
}

.product-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--ps-card);
    color: var(--ps-purple);
    box-shadow: 0 4px 14px rgba(42, 18, 56, .18);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.product-gallery__nav--prev { left: .7rem; }
.product-gallery__nav--next { right: .7rem; }

.product-thumbs {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    overflow-x: auto;
}

.product-thumbs button {
    border: 2px solid transparent;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    width: 72px;
    height: 72px;
    cursor: pointer;
    background: var(--ps-bg);
    flex: 0 0 auto;
}

.product-thumbs button.is-active {
    border-color: var(--ps-coral);
}

.product-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-card strong {
    padding: .8rem 1rem 1rem;
}

.cat-card__icon {
    display: none;
}

.product-card__body { padding: .9rem 1rem 1.1rem; }
.product-card__body h3 { font-size: 1rem; margin: .15rem 0 .4rem; }
.product-card__cat {
    color: var(--ps-purple);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.product-card__code { margin: 0 0 .15rem; color: var(--ps-muted, #6c757d); font-size: .85rem; }
.product-card__price { color: var(--ps-coral); font-weight: 800; margin: 0; }
.product-card__price--lg { font-size: 1.8rem; }

.promo-band {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1.5rem;
    background: var(--ps-purple);
    color: #fff;
    border-radius: 24px;
    overflow: hidden;
    padding: 1.5rem;
    align-items: center;
}

.promo-band img { width: 100%; border-radius: 16px; }

.store-footer {
    background: var(--ps-purple-deep);
    color: #f4eafb;
    margin-top: 2rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.store-footer__grid {
    display: grid;
    gap: 1.5rem;
    padding: 2.2rem 0 1.5rem;
}

.store-footer h2 { font-size: 1rem; }
.store-footer ul { list-style: none; padding: 0; margin: 0; }
.store-footer a { color: #f4eafb; text-decoration: none; }
.store-footer a:hover { color: var(--ps-gold); }
.brand--footer { margin-bottom: .6rem; }

.store-footer__copy {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: .8rem 0 1.1rem;
    font-size: .85rem;
    opacity: .85;
}

.ps-breadcrumb { display: flex; gap: .4rem; color: var(--ps-muted); margin-bottom: 1rem; font-size: .9rem; }
.ps-breadcrumb a { color: var(--ps-purple); text-decoration: none; }

.category-hero, .product-detail {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.category-hero img, .product-detail__media img { border-radius: 18px; }

.badge-ps {
    display: inline-block;
    background: var(--ps-soft);
    color: var(--ps-purple);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-weight: 700;
    font-size: .8rem;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sort-combo { min-width: 240px; }
.pager-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }

.btn-ps-primary, .btn-ps-outline {
    border-radius: 999px;
    font-weight: 700;
    padding: .55rem 1.1rem;
}

.btn-ps-primary { background: var(--ps-gold); color: var(--ps-purple-deep); border: 0; }
.btn-ps-outline { border: 2px solid var(--ps-purple); color: var(--ps-purple); background: transparent; }

.info-card {
    background: var(--ps-card);
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 8px 24px rgba(42, 18, 56, .06);
}

.info-card ul { padding-left: 1.1rem; }

.institucional .lead { color: var(--ps-muted); }

@media (min-width: 768px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .category-hero, .product-detail, .store-footer__grid { grid-template-columns: 1fr 1.2fr; }
}

@media (min-width: 1100px) {
    .cat-grid, .cat-grid--large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .promo-band, .category-hero, .product-detail, .store-footer__grid { grid-template-columns: 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .mega { display: none !important; }
}

.section-foot {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.tema-selector {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: .75rem;
    margin: 0;
}

.tema-selector select {
    border: 0;
    border-radius: 999px;
    padding: .28rem .55rem;
    font-size: .75rem;
    background: rgba(255, 255, 255, .92);
    color: #143044;
    max-width: 8.5rem;
}

.tema-selector--topbar {
    flex: 0 0 auto;
    max-width: none;
}

.tema-selector--topbar select {
    max-width: 6.75rem;
    padding: .22rem .45rem;
    font-size: .72rem;
    background: rgba(255, 255, 255, .96);
}

@media (max-width: 767.98px) {
    .topbar {
        padding: .4rem 0;
        font-size: .78rem;
    }

    .store-header {
        padding: .75rem 0 .65rem;
    }

    .store-header__row {
        gap: .45rem;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
        gap: .45rem;
    }

    .brand img {
        width: 40px;
        height: 40px;
    }

    .brand strong {
        font-size: 1rem;
    }

    .brand small {
        font-size: .68rem;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: .15rem;
    }

    .header-action {
        min-width: 2.6rem;
    }

    .portal-user__label {
        max-width: 4.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.hero .carousel-item {
    position: relative;
}

.hero .carousel-item img {
    width: 100%;
    height: min(42vw, 440px);
    min-height: 220px;
    object-fit: cover;
}

.hero .carousel-item a {
    display: block;
    position: relative;
    text-decoration: none;
}

.hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 2.2rem 1.4rem 1.1rem;
    background: linear-gradient(transparent, rgba(12, 24, 36, .72));
    color: #fff;
}

.hero-caption strong { font-size: 1.45rem; }
.hero-caption span { font-size: .95rem; }

html[data-tema="oscuro"] .search-box .form-control,
html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] textarea.form-control {
    background: var(--ps-card);
    color: var(--ps-ink);
    border-color: var(--ps-line);
}

.correo-box { position: relative; z-index: 30; }
.correo-input { position: relative; z-index: 2; }

.correo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.correo-sugerencias {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 100%;
    list-style: none;
    margin: .25rem 0 0;
    padding: .3rem;
    background: var(--ps-card);
    color: var(--ps-ink);
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(20, 48, 68, .12);
}

.correo-sugerencias button {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--ps-ink);
    border-radius: 8px;
    padding: .45rem .65rem;
    cursor: pointer;
}

.correo-sugerencias button:hover { background: var(--ps-hover); }

html[data-tema="oscuro"] .text-secondary { color: var(--ps-muted) !important; }
html[data-tema="oscuro"] .validation-message { color: #ff8b7a; }

.topbar__wa {
    color: #f3e9fb;
    text-decoration: none;
    font-weight: 600;
}
.topbar__wa:hover { color: #fff; }

.contacto-home {
    display: grid;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--ps-card) 0%, var(--ps-soft) 100%);
    border: 1px solid var(--ps-line);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 10px 28px rgba(20, 48, 68, .06);
}

.contacto-home__intro h2 {
    margin: 0 0 .35rem;
    font-size: 1.45rem;
}
.contacto-home__intro p {
    margin: 0 0 1rem;
    color: var(--ps-muted);
}

.contacto-home__datos {
    display: grid;
    gap: .75rem;
}

.contacto-chip {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contacto-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 48, 68, .1);
    border-color: var(--ps-purple);
}
.contacto-chip--static { cursor: default; }
.contacto-chip--static:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--ps-line);
}
.contacto-chip i {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ps-soft);
    color: var(--ps-purple);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.contacto-chip--wa i {
    background: #e8f8ef;
    color: #1faa4b;
}
.contacto-chip span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.contacto-chip strong { font-size: .95rem; }
.contacto-chip small {
    color: var(--ps-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.info-card--contacto { padding: 1.1rem 1.15rem; }

.contacto-panel__head h2 { margin: 0 0 .25rem; }
.contacto-panel__head p {
    margin: 0 0 1rem;
    color: var(--ps-muted);
    font-size: .95rem;
}

.contacto-panel__lista {
    display: grid;
    gap: .65rem;
    margin-bottom: 1.1rem;
}

.contacto-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .8rem;
    border-radius: 14px;
    background: var(--ps-soft);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, transform .15s ease;
}
.contacto-item:hover {
    background: var(--ps-hover);
    transform: translateX(2px);
}
.contacto-item--static { cursor: default; }
.contacto-item--static:hover {
    background: var(--ps-soft);
    transform: none;
}
.contacto-item__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ps-card);
    color: var(--ps-purple);
    flex-shrink: 0;
}
.contacto-item__icon--wa {
    background: #1faa4b;
    color: #fff;
}
.contacto-item span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.contacto-item strong { font-size: .92rem; }
.contacto-item small {
    color: var(--ps-muted);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.contacto-form-hint {
    margin: 0 0 1rem;
    color: var(--ps-muted);
    font-size: .92rem;
}
.contacto-form-hint a {
    color: #1faa4b;
    font-weight: 700;
    text-decoration: none;
}
.contacto-form-hint a:hover { text-decoration: underline; }

.redes-sociales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}
.redes-sociales__label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--ps-muted);
}
.redes-sociales__links {
    display: flex;
    gap: .55rem;
}
.redes-sociales--home { padding-top: .25rem; }
.redes-sociales--footer { margin-top: .35rem; }

.red-social {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.red-social:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 16px rgba(20, 48, 68, .18);
    color: #fff;
}
.red-social--ig {
    background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}
.red-social--tk {
    background: #111;
}
.red-social--wa {
    background: #25d366;
}

.store-footer__contacto a {
    display: inline-flex;
    align-items: center;
}

@media (min-width: 768px) {
    .contacto-home {
        grid-template-columns: 1fr 1.35fr;
        align-items: center;
    }
    .contacto-home__datos {
        grid-template-columns: 1fr 1fr;
    }
    .redes-sociales--home {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}