:root {
    color-scheme: light;
    --ink: #0f0a1f;
    --ink-soft: #2a2342;
    --muted: #6b6786;
    --line: #ece8f5;
    --paper: #ffffff;
    --soft: #faf7ff;
    --header-bg: rgba(255, 255, 255, 0.78);
    --header-text: #0f0a1f;
    --header-hover-text: #8b5cf6;
    --header-active-bg: #faf7ff;
    --header-active-text: #0f0a1f;
    --mobile-menu-text: #0f0a1f;
    --footer-bg: #0f0a1f;
    --footer-text: #ffffff;
    --cart-bg: #0f0a1f;
    --cart-count-bg: #ec4899;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --purple: #8b5cf6;
    --purple-soft: #ede9fe;
    --orange: #fb923c;
    --orange-soft: #ffedd5;
    --yellow: #fbbf24;
    --yellow-soft: #fef3c7;
    --cyan: #06b6d4;
    --cyan-soft: #cffafe;
    --green: #10b981;
    --red: #ef4444;
    --grad-party: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);
    --grad-warm: linear-gradient(135deg, #fbbf24 0%, #fb923c 50%, #ec4899 100%);
    --grad-dream: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
    --shadow-sm: 0 2px 8px rgba(15, 10, 31, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 10, 31, 0.08);
    --shadow-lg: 0 24px 60px rgba(139, 92, 246, 0.18);
    --shadow-glow: 0 0 0 4px rgba(236, 72, 153, 0.12);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-color: #e5e7eb #2a2342;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #2a2342;
}

::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border: 3px solid #2a2342;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--ink);
    background: var(--soft);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body[data-page="home"] main {
    display: flex;
    flex-direction: column;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

img {
    display: block;
    max-width: 100%;
}

/* =================================================================
   TOPBAR
   ================================================================= */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px clamp(16px, 4vw, 56px);
    background: var(--header-bg);
    border-bottom: 1px solid rgba(236, 232, 245, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--header-text);
    text-decoration: none;
    min-width: max-content;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--grad-party);
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35);
}

.brand strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand small {
    display: block;
    color: color-mix(in srgb, var(--header-text) 64%, transparent);
    font-size: 0.78rem;
    font-weight: 500;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.topnav a {
    color: var(--header-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.84rem;
    padding: 7px 10px;
    border-radius: 10px;
}

.topnav a:hover {
    background: var(--purple-soft);
    color: var(--header-hover-text);
}

.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    color: #fff;
    background: var(--cart-bg);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.92rem;
    box-shadow: 0 8px 20px rgba(15, 10, 31, 0.2);
}

.cart-button:hover {
    transform: translateY(-1px);
    background: var(--purple);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.35);
}

.cart-button span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cart-count-bg);
    font-size: 0.78rem;
    font-weight: 800;
}

.mobile-menu-button,
.mobile-menu {
    display: none;
}

/* =================================================================
   HERO CARRUSEL
   ================================================================= */

.hero {
    position: relative;
    min-height: clamp(540px, 78vh, 840px);
    padding: 0;
    overflow: hidden;
    background: var(--soft);
}

/* Fallback decorativo (cuando NO hay slides configurados) */
.hero-default-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(236, 72, 153, 0.18), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.22), transparent 55%),
        radial-gradient(ellipse at 90% 10%, rgba(251, 191, 36, 0.18), transparent 45%),
        var(--soft);
}

.hero-default-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 30%, rgba(236, 72, 153, 0.08) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(251, 191, 36, 0.10) 3px, transparent 4px),
        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.08) 2px, transparent 3px);
    background-size: 80px 80px, 120px 120px, 100px 100px;
    pointer-events: none;
}

.hero-bg-default {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.hero-bg-default svg {
    width: min(60%, 540px);
    height: auto;
    overflow: visible;
}

/* Carrusel: ocupa todo el hero */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-carousel[hidden] {
    display: none;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    background: linear-gradient(135deg, var(--pink-soft) 0%, var(--purple-soft) 50%, var(--cyan-soft) 100%);
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-slide picture {
    position: absolute;
    inset: 0;
    display: block;
}

/* Botones del slide: centrados abajo */
.hero-slide-buttons {
    position: absolute;
    left: 50%;
    bottom: clamp(56px, 9vh, 92px);
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 2;
    padding: 0 16px;
    max-width: 92%;
}

.hero-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    border: 0;
}

.hero-slide-btn.primary {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(236, 72, 153, 0.40);
}

.hero-slide-btn.primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
    box-shadow: 0 14px 36px rgba(139, 92, 246, 0.50);
}

.hero-slide-btn.secondary {
    background: rgba(255, 255, 255, 0.96);
    color: #0f0a1f;
    box-shadow: 0 8px 22px rgba(15, 10, 31, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-slide-btn.secondary:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 10, 31, 0.35);
}

/* Flechas prev/next */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 10, 31, 0.45);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    display: grid;
    place-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease;
}

.hero-arrow:hover {
    background: rgba(15, 10, 31, 0.72);
}

.hero-prev { left: clamp(8px, 2vw, 20px); }
.hero-next { right: clamp(8px, 2vw, 20px); }

/* Dots: indicadores en la parte inferior */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.hero-dot.is-active {
    background: #fff;
    width: 28px;
    border-radius: 5px;
}

/* Cuando solo hay un slide, oculta flechas y dots */
.hero-carousel.is-single .hero-arrow,
.hero-carousel.is-single .hero-dots {
    display: none;
}

/* Responsive: telefonos */
@media (max-width: 768px) {
    .hero {
        min-height: 0;
        height: min(112.5vw, var(--hero-mobile-max-height, 810px));
        aspect-ratio: auto;
    }

    .hero-slide-buttons {
        bottom: clamp(20px, 5vh, 44px);
        gap: 10px;
    }

    .hero-slide-btn {
        padding: 11px 18px;
        font-size: 0.86rem;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
    }

    .hero-dot.is-active {
        width: 22px;
    }

    .hero-dots {
        bottom: 12px;
    }
}

.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(2.4rem, 6.5vw, 5.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 900;
    color: var(--ink);
}

.hero h1 em {
    font-style: normal;
    background: var(--grad-party);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.hero p.hero-lead {
    margin: 0 0 28px;
    max-width: 540px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.primary-link,
.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
    cursor: pointer;
    border: 0;
}

.primary-link {
    color: #fff;
    background: var(--ink);
    box-shadow: 0 12px 28px rgba(15, 10, 31, 0.25);
}

.primary-link:hover {
    transform: translateY(-2px);
    background: var(--purple);
    box-shadow: 0 16px 36px rgba(139, 92, 246, 0.4);
}

.secondary-link {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
}

.secondary-link:hover {
    transform: translateY(-2px);
    border-color: var(--purple);
    color: var(--purple);
    box-shadow: var(--shadow-md);
}

.hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hero-stat strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.hero-stat span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.hero-stage {
    position: relative;
    z-index: 1;
    min-height: 480px;
    display: grid;
    place-items: center;
}

.hero-illust {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
}

.hero-illust svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.float-anim {
    animation: floaty 6s ease-in-out infinite;
}

.float-anim-2 {
    animation: floaty 7.5s ease-in-out infinite;
    animation-delay: -2s;
}

.float-anim-3 {
    animation: floaty 9s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(2deg); }
}

/* =================================================================
   TRUST BAR / QUICK LINKS
   ================================================================= */

.trust-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 22px clamp(16px, 4vw, 56px);
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
}

.trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.trust-icon svg {
    width: 24px;
    height: 24px;
}

.trust-icon.color-pink { background: var(--pink-soft); color: var(--pink); }
.trust-icon.color-purple { background: var(--purple-soft); color: var(--purple); }
.trust-icon.color-orange { background: var(--orange-soft); color: var(--orange); }
.trust-icon.color-cyan { background: var(--cyan-soft); color: var(--cyan); }
.trust-icon.color-yellow { background: var(--yellow-soft); color: #b45309; }

/* Cuando el beneficio usa un icono-imagen propio (PNG transparente): sin fondo, flotante. */
.trust-icon.has-custom-image {
    background: transparent !important;
    border-radius: 0;
    width: 54px;
    height: 54px;
}
.trust-icon .web-config-img { width: 100%; height: 100%; object-fit: contain; }

.trust-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.trust-item small {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    opacity: 0.8;
}

.quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px clamp(16px, 4vw, 56px);
    background: transparent;
}

.quick-links a {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.quick-links a:hover {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
    transform: translateY(-1px);
}

/* =================================================================
   CATEGORIES SHOWCASE
   ================================================================= */

.categories-showcase {
    padding: 24px clamp(16px, 4vw, 56px) 8px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.section-head .eyebrow {
    color: var(--pink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.section-head p {
    margin: 8px 0 0;
    color: var(--muted);
    max-width: 520px;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.cat-card {
    position: relative;
    padding: 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent;
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.cat-card.cat-pink { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.cat-card.cat-purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.cat-card.cat-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
.cat-card.cat-cyan { background: linear-gradient(135deg, #cffafe, #a5f3fc); }

.cat-card strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cat-card small {
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 500;
}

.cat-card-illust {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 110px;
    height: 110px;
    opacity: 0.85;
}

.cat-card-illust svg {
    width: 100%;
    height: 100%;
}

/* =================================================================
   CATALOG SHELL (TIENDA)
   ================================================================= */

.catalog-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    padding: 36px clamp(16px, 4vw, 56px) 56px;
}

.filters,
.products-area {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.filters {
    align-self: start;
    position: sticky;
    top: 92px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.filter-heading > span {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.filter-heading button {
    border: 0;
    background: transparent;
    color: var(--purple);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}

.filter-heading button:hover {
    background: var(--purple-soft);
}

.field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.field span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.field input,
.field select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--soft);
    color: var(--ink);
    font-size: 0.92rem;
    outline: none;
}

.field input:focus,
.field select:focus {
    border-color: var(--purple);
    background: #fff;
    box-shadow: var(--shadow-glow);
}

.products-area {
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.products-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.products-toolbar h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.products-toolbar .eyebrow {
    color: var(--pink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.products-toolbar > span {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.status {
    border: 1px dashed var(--purple);
    background: var(--purple-soft);
    color: var(--purple);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 600;
}

.status.is-hidden {
    display: none;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.product-card {
    display: grid;
    grid-template-rows: 230px 1fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--purple-soft);
}

.product-media {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(252,231,243,0.68), rgba(237,233,254,0.68)),
        #fff;
    display: grid;
    place-items: center;
    padding: 0;
}

.product-card > div:first-child {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(252,231,243,0.68), rgba(237,233,254,0.68)),
        #fff;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
    background: #fff;
}

.product-card:hover .product-image {
    transform: scale(1.06);
}

.product-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    color: var(--purple);
    font-weight: 800;
    background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
    font-size: 0.9rem;
    border-radius: 12px;
}

.product-body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.product-ref {
    color: var(--pink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-title {
    min-height: 42px;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.product-meta {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.price {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.add-button {
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    padding: 9px 16px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mayoristas-login-shell {
    padding: 46px clamp(18px, 5vw, 72px);
}

.mayoristas-login-card {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 34px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(26px, 4vw, 48px);
    box-shadow: var(--shadow-lg);
}

.mayoristas-login-copy h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    font-weight: 900;
    color: var(--ink);
}

.mayoristas-login-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.mayoristas-auth-form {
    display: grid;
    gap: 16px;
}

.mayoristas-auth-form .field input {
    width: 100%;
}

.mayoristas-auth-form .primary-link {
    width: 100%;
    justify-content: center;
}

.mayoristas-error {
    display: none;
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.9rem;
}

.mayoristas-error.is-visible {
    display: block;
}

.mayoristas-catalog-shell {
    padding: 36px clamp(18px, 5vw, 72px) 60px;
}

.mayoristas-session {
    max-width: 1440px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--muted);
    font-weight: 700;
}

.mayoristas-session button {
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
}

.mayoristas-price-list {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.mayoristas-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    background: var(--soft);
    padding: 7px 9px;
    font-size: 0.78rem;
    font-weight: 800;
}

.mayoristas-price-row strong {
    color: var(--purple);
}

.mayoristas-frame-session {
    position: fixed;
    top: 10px;
    right: 14px;
    z-index: 1000;
    width: auto;
    max-width: min(420px, calc(100% - 28px));
    margin: 0;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(15, 10, 31, 0.16);
}

.mayoristas-frame-session span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mayoristas-frame-session button {
    padding: 8px 12px;
}

.mayoristas-catalog-frame {
    display: block;
    width: 100%;
    height: 100vh;
    border: 0;
    background: #fff8ec;
}

body:has(.mayoristas-catalog-frame[src]) .topbar,
body:has(.mayoristas-catalog-frame[src]) .site-footer {
    display: none;
}

.mayoristas-catalog-public {
    --may-cat-btn-bg: var(--ink);
    --may-cat-btn-text: #ffffff;
    min-height: 100vh;
    padding: 36px clamp(16px, 4vw, 56px) 80px;
    background:
        radial-gradient(circle at 6% 2%, rgba(236, 72, 153, 0.10), transparent 30rem),
        radial-gradient(circle at 96% 0%, rgba(139, 92, 246, 0.12), transparent 32rem),
        linear-gradient(180deg, #ffffff 0%, var(--soft) 46%, #fff 100%);
}

.mayoristas-public-top {
    max-width: 1240px;
    margin: 0 auto 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mayoristas-public-top .eyebrow {
    margin: 0 0 6px;
    color: var(--pink);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mayoristas-public-top h1 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.mayoristas-public-top #sessionText {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: var(--may-cat-client-bg, var(--purple-soft));
    color: var(--may-cat-client-text, var(--purple));
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--purple) 18%, transparent);
}

.mayoristas-public-top #sessionText::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.mayoristas-public-top button {
    position: fixed;
    top: 92px;
    right: clamp(16px, 4vw, 56px);
    z-index: 29;
    border: 0;
    border-radius: 999px;
    background: var(--may-cat-logout-bg, var(--ink));
    color: var(--may-cat-logout-text, #fff);
    padding: 11px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    align-self: center;
}

.mayoristas-public-top button:hover {
    background: var(--may-cat-logout-bg, var(--pink));
    transform: translateY(-1px);
}

.mayoristas-public-toolbar {
    max-width: 1240px;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.mayoristas-public-toolbar .field {
    margin: 0;
}

.mayoristas-public-toolbar .primary-link {
    justify-content: center;
    background: var(--may-cat-search-bg, var(--ink));
    color: var(--may-cat-search-text, #fff);
}
.mayoristas-public-toolbar .primary-link:hover {
    background: var(--may-cat-search-bg, var(--purple));
    color: var(--may-cat-search-text, #fff);
}

.mayoristas-public-count {
    max-width: 1240px;
    margin: 0 auto 16px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.92rem;
}

.mayoristas-public-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.mayoristas-public-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 34px rgba(15, 10, 31, 0.07);
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mayoristas-public-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--purple-soft);
}

.mayoristas-product-media {
    aspect-ratio: 1 / 1;
    margin: 16px 16px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, rgba(252, 231, 243, 0.55), rgba(237, 233, 254, 0.55)),
        #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mayoristas-product-media img {
    width: 100%;
    height: 100%;
    /* "cover" llena todo el marco (sin espacios en blanco a los lados). La foto
       completa se ve al hacer clic (lightbox). */
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: zoom-in;
    transition: transform 0.4s ease;
}

.mayoristas-public-card:hover .mayoristas-product-media img {
    transform: scale(1.05);
}

/* Lightbox: al hacer clic en una foto de producto se muestra completa.
   Se cierra solo con el boton (X), igual que el resto de modales del sistema. */
.kiltex-img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 10, 31, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.kiltex-img-lightbox.is-open {
    display: flex;
}

.kiltex-img-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.kiltex-img-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.kiltex-img-lightbox-close:hover {
    background: var(--pink);
    color: #fff;
}

.mayoristas-product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.mayoristas-product-body h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-height: 2.6em;
}

.mayoristas-product-body .product-price-guide {
    margin: 4px 0 2px;
    display: grid;
    gap: 6px;
}

.mayoristas-product-body .product-price-guide span {
    display: block;
    background: var(--may-cat-precio-bg, var(--soft));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: var(--may-cat-precio-size, 0.82rem);
    color: var(--may-cat-precio-text, var(--ink-soft));
    line-height: 1.35;
    text-align: center;
}

.mayoristas-product-body .product-price-guide strong {
    color: var(--may-cat-precio-strong, var(--purple));
    font-weight: 800;
}

.mayoristas-product-body .product-variation-select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    font-size: 0.88rem;
    outline: none;
}

.mayoristas-product-body .product-variation-select:focus {
    border-color: var(--purple);
    box-shadow: var(--shadow-glow);
}

.mayoristas-product-body .btn-add {
    margin-top: auto;
    width: 100%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    background: var(--may-cat-btn-bg, var(--ink));
    color: var(--may-cat-btn-text, #fff);
    box-shadow: 0 8px 20px rgba(15, 10, 31, 0.16);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mayoristas-product-body .btn-add:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 26px rgba(139, 92, 246, 0.35);
}

.mayoristas-product-body .btn-add:active {
    transform: translateY(0);
}

@media (max-width: 1080px) {
    .mayoristas-public-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .mayoristas-public-toolbar,
    .mayoristas-public-grid {
        grid-template-columns: 1fr;
    }

    .mayoristas-public-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mayoristas-public-top {
        flex-direction: column;
    }
}

@media (max-width: 460px) {
    .mayoristas-public-grid {
        grid-template-columns: 1fr;
    }
}

[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .mayoristas-login-card {
        grid-template-columns: 1fr;
    }
}

.add-button:hover {
    background: var(--pink);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.pagination button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
}

.pagination button:hover:not(:disabled) {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination span {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
}

/* =================================================================
   FEATURE / SECTION GRID
   ================================================================= */

.section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 0 clamp(16px, 4vw, 56px) 28px;
}

.section-grid-single {
    grid-template-columns: 1fr;
}

#mayoristas .feature-panel:not(.feature-panel-strong) {
    display: none;
}

.wholesale-section {
    --wholesale-overlay-opacity: 0.45;
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 34vw, 520px);
    margin: 0;
    padding: clamp(38px, 6vw, 72px);
    border-radius: 0;
    color: #fff;
    background: linear-gradient(135deg, #111827 0%, #4c1d95 100%);
    box-shadow: var(--shadow-md);
    display: grid;
    align-items: center;
}

.wholesale-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--wholesale-overlay-opacity);
    pointer-events: none;
    z-index: 1;
}

.wholesale-media {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 24%, rgba(236, 72, 153, 0.32), transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(6, 182, 212, 0.26), transparent 30%);
    z-index: 0;
}

.wholesale-media .web-config-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.wholesale-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    display: grid;
    gap: 16px;
}

.wholesale-eyebrow {
    color: rgba(255,255,255,0.82);
}

.wholesale-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 4.4rem);
    line-height: 1;
    font-weight: 900;
}

.wholesale-text {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: clamp(1rem, 1.7vw, 1.28rem);
    line-height: 1.55;
    max-width: 560px;
}

.wholesale-link {
    justify-self: start;
    margin-top: 8px;
    background: #fff;
    color: var(--ink);
}

.wholesale-link:hover {
    background: var(--pink);
    color: #fff;
}

.feature-panel,
.page-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}

.feature-panel {
    min-height: 220px;
    display: grid;
    align-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.feature-panel-strong {
    color: #fff;
    background: var(--grad-party);
    border: 0;
}

.feature-panel-strong::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
    pointer-events: none;
}

.feature-panel-strong .eyebrow {
    color: rgba(255,255,255,0.85);
}

.feature-panel-strong h2 {
    color: #fff;
}

.feature-panel-strong .primary-link {
    background: #fff;
    color: var(--ink);
    align-self: start;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.feature-panel-strong .primary-link:hover {
    background: var(--ink);
    color: #fff;
}

.feature-panel h2,
.page-section h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.feature-panel .eyebrow,
.page-section .eyebrow,
.contact-band .eyebrow {
    margin: 0 0 4px;
    color: var(--pink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.page-section {
    min-height: 160px;
    margin: 0 clamp(16px, 4vw, 56px) 22px;
    display: grid;
    align-content: center;
    gap: 8px;
}

.page-section p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.page-section-small {
    margin: 0;
    min-height: 140px;
}

.policy-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.policy-links a {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}

.policy-links a:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* =================================================================
   REVIEWS
   ================================================================= */

.reviews-section {
    padding: 32px clamp(16px, 4vw, 56px);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.review-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-stars {
    display: flex;
    gap: 2px;
    color: var(--yellow);
}

.review-stars svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.review-card p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
}

.review-avatar.av-1 { background: var(--grad-party); }
.review-avatar.av-2 { background: var(--grad-warm); }
.review-avatar.av-3 { background: var(--grad-dream); }

.review-author strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.review-author small {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}

.google-reviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.google-reviews-summary strong {
    display: block;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 900;
}

.google-label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.google-avatar {
    overflow: hidden;
    background: var(--grad-party);
}

.google-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =================================================================
   ABOUT
   ================================================================= */

.about-section {
    padding: 32px clamp(16px, 4vw, 56px);
}

.about-shell {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
    align-items: center;
}

.about-shell h2 {
    margin: 8px 0 14px;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.about-shell p {
    margin: 0 0 14px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.about-points {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 12px;
}

.about-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.95rem;
}

.about-points li::before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--grad-party) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
    flex-shrink: 0;
}

.about-illust {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin-left: auto;
}

.about-illust svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* =================================================================
   PAYMENTS
   ================================================================= */

.payments-section {
    padding: 32px clamp(16px, 4vw, 56px);
}

.payments-shell {
    background: linear-gradient(135deg, var(--ink) 0%, #1f1840 100%);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.payments-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(236, 72, 153, 0.3), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(139, 92, 246, 0.3), transparent 40%);
    pointer-events: none;
}

.payments-shell .eyebrow {
    color: var(--yellow);
}

.payments-shell h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}

.payments-shell p {
    color: rgba(255,255,255,0.78);
    margin: 0 0 22px;
    max-width: 540px;
}

.payments-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    z-index: 1;
}

.payment-method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 12px 18px;
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    backdrop-filter: blur(10px);
}

.payment-method svg {
    width: 22px;
    height: 22px;
}

/* =================================================================
   CONTACT BAND
   ================================================================= */

.contact-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 32px clamp(16px, 4vw, 56px) 56px;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--grad-warm);
    color: #fff;
    box-shadow: var(--shadow-lg);
    flex-wrap: wrap;
}

.contact-band h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}

.contact-band .eyebrow {
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
}

.contact-band .primary-link {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

.contact-band .primary-link:hover {
    background: var(--ink);
    color: #fff;
}

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

.site-footer {
    padding: 44px clamp(16px, 4vw, 56px) 28px;
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: 2px solid #fff;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 40px);
    align-items: center;
    margin-bottom: 36px;
}

/* En pantallas grandes el footer usa 7 columnas: 1=vacia, 2=contacto,
   3=vacia, 4=logo, 5=vacia, 6=legal, 7=vacia. Las columnas vacias dan
   aire a cada seccion para que no queden pegadas a las orillas. */
.footer-contact-col {
    grid-column: 2;
}

.footer-logo-col {
    grid-column: 4;
}

.footer-legal-col {
    grid-column: 6;
}

.footer-logo-col {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.footer-logo-mark {
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--grad-party);
    border-radius: 18px;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15, 10, 31, 0.18);
}

.footer-logo-col strong,
.footer-brand strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 8px;
    color: var(--footer-text);
}

.footer-brand p {
    margin: 0 auto 16px;
    color: color-mix(in srgb, var(--footer-text) 65%, transparent);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 320px;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: var(--footer-text);
    display: grid;
    place-items: center;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--pink);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}

.footer-col h4 {
    margin: 0 0 14px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in srgb, var(--footer-text) 50%, transparent);
    font-weight: 700;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.footer-contact-list span,
.footer-col a {
    color: color-mix(in srgb, var(--footer-text) 78%, transparent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.footer-contact-col {
    text-align: left;
}

.footer-legal-col {
    text-align: right;
}

.footer-legal-col ul {
    justify-items: end;
}

.footer-col a:hover {
    color: var(--pink);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: color-mix(in srgb, var(--footer-text) 50%, transparent);
    font-size: 0.85rem;
    text-align: center;
}

/* =================================================================
   CART DRAWER
   ================================================================= */

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    justify-content: flex-end;
    background: rgba(15, 10, 31, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cart-drawer.is-open {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cart-panel {
    width: min(440px, 100%);
    /* Se limita el panel al alto visible (100dvh respeta la barra del navegador
       en movil) para que la lista de productos sea la que haga scroll y el pie
       con los botones de pago quede siempre visible. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #fff;
    overflow: hidden;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cart-header,
.cart-footer {
    padding: 22px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.cart-header .eyebrow {
    color: var(--pink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.cart-header h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    display: grid;
    place-items: center;
}

.icon-button:hover {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
}

.cart-items {
    overflow-y: auto;
    min-height: 0;
    padding: 14px 22px;
}

.cart-empty {
    color: var(--muted);
    text-align: center;
    padding: 40px 0;
    font-weight: 600;
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.cart-item small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
    font-size: 0.82rem;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: start;
}

.qty-controls button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
}

.qty-controls button:hover {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.qty-controls span {
    min-width: 22px;
    text-align: center;
    font-weight: 700;
}

.cart-footer {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cart-total span {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.cart-total strong {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.checkout-button {
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    padding: 14px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}

.checkout-button:hover {
    background: var(--pink);
    transform: translateY(-1px);
}

.cart-footer small {
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1080px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-stats { justify-content: center; }
    .hero-actions { justify-content: center; }
    .hero-stage { min-height: 320px; max-width: 380px; margin: 0 auto; }

    /* En movil ocultamos el SVG decorativo para no chocar con el texto centrado */
    .hero-bg-default { display: none; }
    /* Si hay foto, el overlay se vuelve vertical para legibilidad del texto centrado */
    .hero:has(.hero-bg.has-custom-image) .hero-overlay {
        background: linear-gradient(180deg, rgba(15,10,31,0.55) 0%, rgba(15,10,31,0.30) 50%, rgba(15,10,31,0.55) 100%);
    }

    .catalog-shell {
        grid-template-columns: 1fr;
    }

    .filters {
        position: static;
    }

    .trust-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .about-shell {
        grid-template-columns: 1fr;
    }

    .about-illust {
        max-width: 320px;
        margin: 0 auto;
    }

    .footer-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(18px, 4vw, 56px);
    }

    /* Por debajo de 1080px se vuelve al layout de 3 columnas, asi que se
       anula la colocacion en columnas especificas de pantallas grandes. */
    .footer-contact-col,
    .footer-logo-col,
    .footer-legal-col {
        grid-column: auto;
    }

    .section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .topnav {
        gap: 8px;
        position: relative;
    }

    .topnav a {
        display: none;
    }

    .topnav .cart-button {
        display: inline-flex;
    }

    .mobile-menu-button {
        width: 42px;
        height: 42px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--cart-bg);
        color: #fff;
        display: inline-grid;
        place-items: center;
        gap: 3px;
        padding: 10px;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
    }

    .mobile-menu-button span {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        display: block;
    }

    .mobile-menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        z-index: 40;
        min-width: 210px;
        display: none;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 44px rgba(15, 10, 31, 0.18);
    }

    .mobile-menu.is-open {
        display: grid;
    }

    .mobile-menu a {
        display: block;
        color: var(--mobile-menu-text);
        text-decoration: none;
        font-weight: 800;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 0.92rem;
    }

    .mobile-menu a:hover {
        color: var(--header-hover-text);
        background: var(--purple-soft);
    }

    .mobile-menu a.is-current {
        color: var(--header-active-text);
        background: var(--header-active-bg);
    }

    .trust-bar {
        grid-template-columns: 1fr;
    }

    .cat-grid {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-card {
        grid-template-rows: minmax(260px, 74vw) 1fr;
    }

    .product-body {
        padding: 12px;
        gap: 8px;
    }

    .product-title {
        font-size: 0.88rem;
        min-height: 38px;
    }

    .price {
        font-size: 1rem;
    }

    .add-button {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .contact-band {
        text-align: center;
        justify-content: center;
    }

    .contact-band .primary-link {
        margin: 0 auto;
    }
}

/* =================================================================
   IMAGEN PERSONALIZABLE (slot del admin WEB)
   Reemplaza el SVG por una imagen subida desde el panel admin.
   ================================================================= */

.hero-illust.has-custom-image,
.about-illust.has-custom-image {
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(139,92,246,0.08));
}

.hero-illust.has-custom-image .web-config-img,
.about-illust.has-custom-image .web-config-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.about-illust.has-custom-image .web-config-img {
    max-height: 400px;
}

/* Estado activo del topnav */
.topnav a.is-current {
    color: var(--header-active-text);
    font-weight: 800;
    background: var(--header-active-bg);
    border-radius: 999px;
}

.topnav a[href="index.html"].is-current {
    background: var(--header-active-bg);
    border-radius: 999px;
}

/* =================================================================
   PAGE HERO (encabezado de páginas interiores)
   ================================================================= */

.page-hero {
    padding: 60px clamp(16px, 4vw, 56px) 32px;
    max-width: 980px;
    margin: 0 auto;
}

.page-hero .eyebrow {
    color: var(--pink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.page-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}

.page-hero .lead {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 720px;
    margin: 0;
    line-height: 1.55;
}

/* =================================================================
   PRODUCTOS DESTACADOS (home)
   ================================================================= */

.featured-section {
    padding: 42px clamp(16px, 4vw, 56px) 58px;
    width: 100%;
    margin: 0;
}

.featured-section .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.featured-section .section-head p {
    margin-left: auto;
    margin-right: auto;
}

.featured-section .secondary-link {
    align-self: center;
}

.featured-link {
    margin: 18px auto 0;
}

.featured-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(260px, 44vw, 520px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
    box-shadow: var(--shadow-md);
}

.featured-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.featured-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.featured-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.featured-slider.is-single .featured-slide {
    transition: none;
}

.featured-slider-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
    padding: 24px;
}

.featured-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.featured-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,0.58);
    padding: 0;
}

.featured-slider-dot.is-active {
    background: #fff;
    width: 24px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.featured-grid .product-card {
    grid-template-rows: auto 1fr;
}

.featured-grid .product-media {
    aspect-ratio: 1 / 1;
    min-height: 240px;
    padding: 14px;
}

.featured-grid .product-image {
    object-fit: contain;
}

.featured-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 40px 16px;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
}

/* =================================================================
   POLÍTICAS (tabs)
   ================================================================= */

.policy-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 clamp(16px, 4vw, 56px);
    max-width: 1280px;
    margin: clamp(32px, 5vw, 56px) auto 24px;
}

.policy-tabs a {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    border: 1px solid var(--line);
}

.policy-tabs a:hover {
    border-color: var(--pink);
    color: var(--pink);
}

/* =================================================================
   MI CUENTA
   ================================================================= */

.account-shell {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    padding: 0 clamp(16px, 4vw, 56px) 56px;
    max-width: 1100px;
    margin: 0 auto;
}

.account-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.account-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
    color: var(--purple);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.account-icon svg {
    width: 28px;
    height: 28px;
}

.account-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 10px;
}

.account-card p {
    color: var(--muted);
    margin: 0 0 18px;
    line-height: 1.5;
}

.account-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =================================================================
   FORM (PQRS)
   ================================================================= */

.form-shell {
    padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 56px) 56px;
    max-width: 760px;
    margin: 0 auto;
}

.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(236,72,153,0.12);
}

.form-field textarea {
    resize: vertical;
    min-height: 110px;
}

.form-card .primary-link {
    align-self: flex-start;
}

.form-help {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

/* =================================================================
   CONTACTO
   ================================================================= */

.contact-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 0 clamp(16px, 4vw, 56px) 56px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.contact-card-strong {
    background: var(--grad-party);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-lg);
}

.contact-card-strong .eyebrow {
    color: rgba(255,255,255,0.85) !important;
}

.contact-card-strong h2 {
    color: #fff;
    font-size: 1.85rem;
    font-weight: 900;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.contact-card-strong p {
    color: rgba(255,255,255,0.9);
    margin: 0 0 22px;
}

.contact-card-strong .primary-link {
    background: #fff;
    color: var(--ink);
}

.contact-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.contact-icon svg {
    width: 30px;
    height: 30px;
    color: #fff;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.contact-info-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pink-soft), var(--purple-soft));
    color: var(--purple);
    display: grid;
    place-items: center;
}

.contact-info-icon svg {
    width: 22px;
    height: 22px;
}

.contact-info-item strong {
    display: block;
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.contact-info-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

@media (max-width: 880px) {
    .contact-shell { grid-template-columns: 1fr; }
}

.hero {
    background:
        radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 48%),
        radial-gradient(ellipse at 86% 18%, color-mix(in srgb, var(--yellow) 24%, transparent), transparent 42%),
        radial-gradient(ellipse at 82% 100%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 52%),
        linear-gradient(135deg, #fff 0%, var(--soft) 54%, #fff7ed 100%);
}

.topbar {
    box-shadow: 0 12px 34px rgba(15, 10, 31, 0.06);
}

.cat-card,
.feature-panel,
.review-card,
.product-card {
    box-shadow: 0 16px 34px rgba(15, 10, 31, 0.07);
}

.feature-panel-strong {
    background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 52%, var(--cyan) 100%);
}

@media (max-width: 640px) {
    .topbar {
        align-items: center;
        padding: 10px 14px;
        gap: 10px;
    }

    .brand {
        min-width: 0;
        flex: 1;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 0.92rem;
    }

    .brand strong {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 46vw;
    }

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

    .cart-button {
        width: 42px;
        height: 42px;
        padding: 0;
        gap: 6px;
        font-size: 0;
        justify-content: center;
        white-space: nowrap;
    }

    .cart-button svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .cart-button span {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.68rem;
        position: absolute;
        top: -4px;
        right: -4px;
    }

    .hero-copy {
        width: 100%;
    }

    .hero h1 {
        font-size: 2.35rem;
        line-height: 1.03;
        overflow-wrap: anywhere;
    }

    .hero p.hero-lead {
        font-size: 0.98rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .primary-link,
    .secondary-link {
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
        text-align: center;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
    }

    .hero-stat {
        background: rgba(255,255,255,0.72);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .hero-stat strong {
        font-size: 1rem;
    }

    .hero-stat span {
        display: block;
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .hero-stage {
        min-height: 220px;
        max-width: 270px;
    }

    .trust-bar {
        padding: 12px 16px;
        gap: 10px;
    }

    .trust-item {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px;
    }

    .categories-showcase,
    .featured-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wholesale-section {
        margin-left: 0;
        margin-right: 0;
        padding: 30px 22px;
        min-height: 360px;
    }

    .featured-slider {
        min-height: 320px;
    }

    .section-head {
        align-items: start;
        gap: 12px;
    }

    .section-head h2 {
        font-size: 1.65rem;
        line-height: 1.12;
    }

    .cat-card {
        min-height: 150px;
        padding: 18px;
    }

    .product-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .add-button {
        width: 100%;
        justify-content: center;
    }

    .section-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .feature-panel,
    .page-section {
        padding: 20px;
    }

    .footer-bottom {
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-logo-col,
    .footer-legal-col {
        display: none;
    }

    .footer-contact-col {
        text-align: center;
    }

    .footer-contact-col ul {
        justify-items: center;
    }

    .footer-col h4 {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .footer-col a {
        font-size: 0.82rem;
    }
}

@media (max-width: 380px) {
    .hero-stats {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .featured-grid {
        grid-template-columns: 1fr;
    }

    .product-card {
        grid-template-rows: minmax(250px, 82vw) 1fr;
    }
}

/* =================================================================
   HOME — CÍRCULOS DE CATEGORÍAS + TARJETAS DE OCASIÓN (Etapa 1)
   ================================================================= */
.cat-circles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 20px 12px;
}
.cat-circles-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    padding: 24px 0;
}
.cat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.cat-circle-ball {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(15,10,31,.10);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cat-circle:hover .cat-circle-ball {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 14px 28px rgba(15,10,31,.18);
}
.cat-circle-ball svg { width: 42px; height: 42px; }
.cat-circle-name {
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    color: var(--ink-soft);
}
.cat-circle.c-pink   .cat-circle-ball { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); color: #db2777; }
.cat-circle.c-purple .cat-circle-ball { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #7c3aed; }
.cat-circle.c-cyan   .cat-circle-ball { background: linear-gradient(135deg, #a5f3fc, #67e8f9); color: #0891b2; }
.cat-circle.c-orange .cat-circle-ball { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #ea580c; }
.cat-circle.c-green  .cat-circle-ball { background: linear-gradient(135deg, #bbf7d0, #86efac); color: #16a34a; }

.occasions-section { padding: 40px clamp(16px, 4vw, 56px); }
.occasion-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.occasion-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    min-height: 300px;
    color: #fff;
}
.occasion-card.has-custom-image {
    background: #111827;
}
.occasion-card.has-custom-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, var(--occasion-overlay-opacity, 0.45));
    pointer-events: none;
}
.occasion-card.occ-pink   { background: linear-gradient(150deg, #ec4899, #be185d); }
.occasion-card.occ-purple { background: linear-gradient(150deg, #8b5cf6, #6d28d9); }
.occasion-card.occ-cyan   { background: linear-gradient(150deg, #06b6d4, #0e7490); }
.occasion-card.occ-orange { background: linear-gradient(150deg, #fb923c, #ea580c); }
.occasion-card h3 {
    margin: 0 0 12px;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 2;
}
.occasion-card h3 a { color: #fff; text-decoration: none; }
.occasion-card ul { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.occasion-card li { margin: 0 0 7px; }
.occasion-card li:has(a:empty) { display: none; }
.occasion-card li a {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    transition: padding-left .15s ease;
}
.occasion-card li a:hover { padding-left: 5px; text-decoration: underline; }
.occasion-illust {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 132px;
    height: 132px;
    opacity: .45;
    z-index: 0;
}
.occasion-illust svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
    .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .occasion-grid { grid-template-columns: 1fr; }
    .cat-circles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
    .cat-circle-ball { width: 72px; height: 72px; }
    .cat-circle-ball svg { width: 34px; height: 34px; }
}

/* Categorías destacadas del home (5 configurables, fila horizontal) */
.cat-feat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}
.cat-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}
.cat-feat-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.cat-feat:hover .cat-feat-img {
    transform: translateY(-5px) scale(1.03);
}
/* La imagen es PNG/transparente y "flota" sin tarjeta ni fondo. */
.cat-feat-img img { width: 100%; height: 100%; object-fit: contain; }
/* Solo el respaldo (sin imagen) lleva fondo suave en círculo. */
.cat-feat-img-ph { border-radius: 50%; }
.cat-feat-img-ph svg { width: 42%; height: 42%; }
.cat-feat-img-ph.c-pink   { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }
.cat-feat-img-ph.c-purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
.cat-feat-img-ph.c-cyan   { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #0891b2; }
.cat-feat-img-ph.c-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }
.cat-feat-img-ph.c-green  { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.cat-feat-name {
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    color: var(--ink);
}
@media (max-width: 900px) {
    .cat-feat-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .cat-feat-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .cat-feat-name { font-size: .9rem; }
}

/* Beneficios en MÓVIL: icono arriba, título y descripción debajo (vertical),
   en slider horizontal si no caben. Texto en varias líneas, descripción más tenue. */
@media (max-width: 760px) {
    .trust-bar {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 12px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .trust-bar::-webkit-scrollbar { display: none; }
    .trust-item {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        flex: 0 0 auto;
        width: 150px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        scroll-snap-align: start;
    }
    .trust-item strong { font-size: .9rem; line-height: 1.25; }
    .trust-item small { font-size: .76rem; line-height: 1.3; opacity: .78; }
}

/* Encabezado de la sección "Categorías" centrado */
.categories-showcase .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.categories-showcase .section-head p {
    margin-left: auto;
    margin-right: auto;
}

/* Encabezado "Para cada celebración" centrado */
.occasions-section .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.occasions-section .section-head p {
    margin-left: auto;
    margin-right: auto;
}
/* Imagen propia por card de ocasion (fondo con capa oscura para resaltar texto) */
.occasion-illust.has-custom-image {
    opacity: 1;
    inset: 0;
    width: 100%;
    height: 100%;
}
.occasion-card.has-custom-image .occasion-illust { z-index: 0; }
.occasion-illust .web-config-img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Pagina ACERCA — Hero banner (imagen de fondo + capa oscura) ===== */
.about-hero {
    position: relative;
    overflow: hidden;
    max-width: none;
    margin: 0;
    min-height: var(--about-hero-height, 520px);
    padding: 40px clamp(16px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.about-hero-bg { position: absolute; inset: 0; z-index: 0; }
.about-hero-bg picture,
.about-hero-bg .web-config-img { width: 100%; height: 100%; display: block; }
.about-hero-bg .web-config-img { object-fit: cover; }
.about-hero-bg.has-custom-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 31, var(--about-hero-overlay, .55));
}
.about-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    transform: translateY(var(--about-hero-text-offset, 0px));
}
.about-hero-inner h1 { margin: 0 0 12px; font-size: var(--about-hero-title-size, clamp(2rem, 4.5vw, 3rem)); }
.about-hero-inner .lead { margin: 0 auto; }
/* Si hay imagen de fondo, el texto resalta en blanco (salvo que se elija color en el editor) */
.about-hero-bg.has-custom-image ~ .about-hero-inner .eyebrow,
.about-hero-bg.has-custom-image ~ .about-hero-inner h1,
.about-hero-bg.has-custom-image ~ .about-hero-inner .lead { color: #fff; }

/* ===== Pagina ACERCA — bloques de contenido (Historia, Equipo, Mision/Vision) ===== */
.about-row .about-shell {
    display: flow-root;
}
.about-row .about-photo {
    float: left;
    width: min(42%, 560px);
    margin: 0 34px 22px 0;
}
.about-shell-reverse .about-photo {
    float: left;
    margin: 0 34px 22px 0;
}
.about-col-text .about-eyebrow {
    color: var(--pink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.about-richtext p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.7; }
.about-richtext p:last-child { margin-bottom: 0; }
.about-subtitle { margin: 18px 0 8px; font-size: 1.08rem; font-weight: 800; color: var(--ink); }
.about-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(139,92,246,0.10));
}
.about-photo .web-config-img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
    .about-row .about-photo,
    .about-shell-reverse .about-photo {
        float: none;
        width: 100%;
        margin: 0 0 22px;
    }
}

/* ===== Secuencia tipo carrusel: 2 imagenes en pantallas grandes, 1 en movil (Sabias Que e Historia) ===== */
.seq-slide { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }
.seq-slide img { width: 100%; display: block; }
@media (max-width: 760px) { .seq-slide { flex-basis: 100%; max-width: 100%; } }

/* Historia: la foto se vuelve un carrusel de 2 dentro del mismo marco 4/3 */
.about-photo-seq .about-seq-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
    will-change: transform;
}
.about-photo-seq .seq-slide { height: 100%; }
.about-photo-seq .seq-slide img { height: 100%; object-fit: cover; }

/* Sabias Que: carrusel de 2 imagenes cuadradas (1 en movil) */
.sabias-section { padding: 32px clamp(16px, 4vw, 56px) 56px; }
.sabias-head { justify-content: center; text-align: center; }
.sabias-slider {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    overflow: hidden;
}
.sabias-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}
.sabias-slider .seq-slide { padding: 8px; }
.sabias-slider .seq-slide img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.sabias-empty { width: 100%; padding: 40px 16px; text-align: center; color: var(--muted); }

/* ===== Pagina CONTACTO — tarjetas (Visitanos / Redes / Como llegar) ===== */
.contacto-card-title {
    margin: 0 0 14px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.contacto-redes-col { text-align: center; }
.contacto-wa-icon { width: 72px; height: 72px; margin: 8px auto 16px; color: #25d366; }
.contacto-wa-icon svg { width: 100%; height: 100%; }
.contacto-phones { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.contacto-phones a { color: inherit; text-decoration: none; font-size: 1.15rem; font-weight: 700; }
.contacto-phones a:hover { text-decoration: underline; }
.contacto-email { margin: 0; font-weight: 600; }
.contacto-email a { color: var(--purple); text-decoration: none; }
.contacto-email a:hover { text-decoration: underline; }
.contacto-social-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.contacto-card-subtitle { margin: 0; font-size: 1.2rem; font-weight: 800; text-align: center; color: var(--ink); }
.contacto-social { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.contacto-social-link {
    width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--ink); color: #fff; text-decoration: none;
    transition: transform .15s ease, background .2s ease;
}
.contacto-social-link:hover { transform: translateY(-2px); background: var(--purple); }
.contacto-social-link[style*="background"]:hover { background: inherit; }
.contacto-social-link svg { width: 24px; height: 24px; }

#contactoVisitanos .about-col-text {
    text-align: center;
}

#contactoVisitanos .about-richtext {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Card 3: Como llegar (ancho completo, mapa + texto) */
.contacto-llegar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 44px);
}
.contacto-llegar-title { text-align: center; }
.contacto-map {
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 6px 0 22px;
    background: var(--soft);
}
.contacto-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contacto-llegar-text p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.7; }
.contacto-llegar-text p:last-child { margin-bottom: 0; }

/* ===== Pagina MI CUENTA ===== */
.cuenta-wrap { padding: clamp(32px,5vw,64px) clamp(16px,4vw,56px) 56px; max-width: 1100px; margin: 0 auto; }
.cuenta-app { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(20px,3vw,32px); }
.cuenta-auth { max-width: 440px; margin: 0 auto; }
.cuenta-tabs { display:flex; gap:8px; margin-bottom: 20px; border-bottom:1px solid var(--line); }
.cuenta-tab { flex:1; background:none; border:0; padding:12px; font-weight:800; color:var(--ink); cursor:pointer; border-bottom:3px solid transparent; }
.cuenta-tab.is-active { color:var(--ink); border-bottom-color: var(--pink); }
.cuenta-form { display:grid; gap:14px; }
.cuenta-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cuenta-field { display:grid; gap:6px; }
.cuenta-field span { font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.cuenta-field input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:.92rem; font-family:inherit; color:var(--ink); background:#fff; box-sizing:border-box; }
.cuenta-field input:focus { outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(236,72,153,.12); }
.cuenta-submit { justify-content:center; margin-top:6px; }
.cuenta-error { display:none; color:#dc2626; font-size:.85rem; font-weight:600; }
.cuenta-ok { display:none; color:#16a34a; font-size:.85rem; font-weight:600; }
.cuenta-or { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:.85rem; }
.cuenta-or::before, .cuenta-or::after { content:""; flex:1; height:1px; background:var(--line); }
.cuenta-google-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; cursor:pointer; }
.cuenta-google-btn:hover { background:#ff4081; color:#fff; border-color:#ff4081; }
.cuenta-google-btn:hover svg path { fill:#fff; }
.cuenta-submit:hover { background:#ff4081; color:#fff; border-color:#ff4081; }
.cuenta-nota { margin:16px 0 0; text-align:center; color:var(--muted); font-size:.78rem; }
.cuenta-panel { display:grid; grid-template-columns: 240px minmax(0,1fr); gap:24px; }
.cuenta-side { display:grid; gap:4px; align-content:start; border:1px solid var(--line); border-radius: var(--radius-md); padding:8px; height:fit-content; }
.cuenta-side-link { text-align:left; background:none; border:0; padding:13px 14px; border-radius:10px; font-weight:700; color:var(--ink-soft); cursor:pointer; }
.cuenta-side-link:hover { background:var(--soft); }
.cuenta-side-link.is-active { background:var(--purple-soft); color:var(--purple); }
.cuenta-content { min-width:0; }
.cuenta-content p { color:var(--ink-soft); line-height:1.7; }
.cuenta-content a { color:var(--purple); }
.cuenta-h2 { margin:0 0 14px; font-size:1.4rem; font-weight:900; letter-spacing:-0.01em; }
.cuenta-h3 { margin:18px 0 4px; font-size:1rem; font-weight:800; }
.cuenta-muted { color:var(--muted); }
/* Escritorio: tarjetas de acceso rapido (colores propios, legibles con cualquier tema). */
.cuenta-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:18px; }
.cuenta-card { display:flex; flex-direction:column; gap:6px; text-align:left; padding:18px; border:1px solid #e7e3f3; border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.cuenta-card:hover { border-color:#c9bdf0; box-shadow:0 12px 26px rgba(76,53,140,0.12); transform:translateY(-2px); }
.cuenta-card-title { font-size:1.05rem; font-weight:800; color:#2a2150; }
.cuenta-card-text { font-size:0.9rem; color:#6b6385; line-height:1.5; }
/* Mi cuenta del MAYORISTA (boton en el catalogo + perfil dentro del modal). */
.may-cuenta-btn { margin-top:10px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--purple); background:var(--purple-soft); color:var(--purple); padding:8px 16px; border-radius:999px; font-weight:800; font-size:0.85rem; cursor:pointer; }
.may-cuenta-btn:hover { background:var(--purple); color:#fff; transform:translateY(-1px); }
.may-cuenta-perfil { display:grid; gap:8px; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; background:var(--soft); }
.may-cuenta-row { display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:baseline; }
.may-cuenta-label { font-size:0.74rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.may-cuenta-value { color:var(--ink); font-weight:600; font-size:0.92rem; word-break:break-word; }
@media (max-width:520px) { .may-cuenta-row { grid-template-columns:1fr; gap:2px; } }
/* Icono "muñequito" de Mi cuenta en el nav (solo pagina mayoristas). */
.topnav-account { display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:999px; background:transparent; color:var(--header-text); cursor:pointer; padding:0; }
.topnav-account svg { width:22px; height:22px; }
.topnav-account:hover { background:var(--purple-soft); color:var(--header-hover-text); transform:translateY(-1px); }
@media (max-width:640px) { .topnav-account { display:none; } }
/* Login mayorista: enlace para alternar correo / contraseña. */
.maylogin-toggle { justify-self:start; background:none; border:0; padding:0; margin:-6px 0 0; color:var(--purple); font-weight:700; font-size:0.84rem; cursor:pointer; text-decoration:underline; }
.maylogin-toggle:hover { color:var(--pink); }
/* Mi cuenta mayorista: modal mas ancho + pestañas. */
.may-cuenta-card { width:min(680px, 100%); }
.may-tabs { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.may-tab { background:none; border:0; padding:10px 12px; font-weight:800; font-size:0.88rem; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; }
.may-tab:hover { color:var(--purple); }
.may-tab.is-active { color:var(--ink); border-bottom-color:var(--pink); }
.cuenta-tabla-wrap { overflow-x:auto; }
.cuenta-tabla { width:100%; border-collapse:collapse; }
.cuenta-tabla th, .cuenta-tabla td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:.9rem; }
.cuenta-tabla th { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width: 760px) {
  .cuenta-panel { grid-template-columns: 1fr; }
  .cuenta-grid2 { grid-template-columns: 1fr; }
}

/* ===== Redes sociales flotantes (globales) ===== */
/* Facebook / Instagram / TikTok: pegadas al borde derecho, centradas verticalmente. */
.kiltex-floating-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 35;
}
.kiltex-fs-link {
    width: 48px;
    height: 48px;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: 0 8px 20px rgba(15, 10, 31, 0.22);
    transition: transform 0.15s ease;
}
.kiltex-fs-link:hover { transform: translateX(-4px); }
.kiltex-fs-glyph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #ff4081;
    color: #fff;
}
.kiltex-fs-glyph svg { width: 24px; height: 24px; }
.kiltex-fs-img,
.kiltex-fs-img img { width: 100%; height: 100%; display: block; }
.kiltex-fs-img img { object-fit: cover; }

/* WhatsApp: boton inferior derecho, separado del borde. */
.kiltex-floating-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 96px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(15, 10, 31, 0.28);
    transition: transform 0.15s ease;
    z-index: 35;
}
.kiltex-floating-whatsapp:hover { transform: scale(1.06); }
.kiltex-floating-whatsapp .kiltex-fs-glyph {
    background: #25d366;
    border-radius: 50%;
}
.kiltex-floating-whatsapp .kiltex-fs-glyph svg { width: 30px; height: 30px; }

@media (max-width: 760px) {
    .kiltex-floating-social { display: none !important; }
    .kiltex-fs-link { width: 42px; height: 42px; }
    .kiltex-fs-glyph svg { width: 21px; height: 21px; }
    .kiltex-floating-whatsapp { width: 52px; height: 52px; right: 16px; bottom: 84px; }
    .kiltex-floating-whatsapp .kiltex-fs-glyph svg { width: 27px; height: 27px; }
}

/* En el visor del editor (iframe angosto) mostramos las redes flotantes aunque el ancho
   simule movil; en el sitio real se mantienen ocultas en movil. :empty evita mostrar la
   barra vacia cuando no hay enlaces configurados. */
body.kiltex-editor-preview .kiltex-floating-social { display: flex !important; }
body.kiltex-editor-preview .kiltex-floating-social:empty { display: none !important; }

/* =================================================================
   LOGIN MAYORISTAS — panel exclusivo (solo diseño visual)
   ================================================================= */
.maylogin {
    padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px) clamp(40px, 6vw, 80px);
    display: flex;
    justify-content: center;
}
.maylogin-card {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(15, 10, 31, 0.22);
    border: 1px solid var(--line);
}

/* ---- Panel de marca / exclusividad ---- */
.maylogin-aside {
    --maylogin-overlay: 0.62;
    position: relative;
    isolation: isolate;
    padding: clamp(30px, 4vw, 52px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(236, 72, 153, 0.42), transparent 46%),
        radial-gradient(circle at 92% 88%, rgba(139, 92, 246, 0.45), transparent 48%),
        linear-gradient(150deg, #1a1033 0%, #2b1b52 52%, #0f0a1f 100%);
    display: flex;
    align-items: center;
    min-height: 540px;
    overflow: hidden;
}
.maylogin-aside-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.maylogin-aside-bg .web-config-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.maylogin-aside-bg.has-custom-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 8, 26, var(--maylogin-overlay, 0.62));
}
.maylogin-aside-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
}
.maylogin-logo {
    display: none;
}
.maylogin-logo.has-custom-image {
    display: block;
    height: 58px;
    margin-bottom: 4px;
}
.maylogin-logo .web-config-img {
    height: 100%;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.maylogin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24 0%, #ec4899 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(236, 72, 153, 0.34);
}
.maylogin-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.maylogin-eyebrow {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.maylogin-title {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
}
.maylogin-text {
    margin: 2px 0 0;
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    font-size: 0.98rem;
}
.maylogin-benefits {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
    justify-self: stretch;
    text-align: left;
}
.maylogin-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
}
.maylogin-benefit::before {
    content: "";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/15px no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ---- Panel del formulario ---- */
.maylogin-form-side {
    padding: clamp(30px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: #fff;
}
.maylogin-form-head {
    display: grid;
    gap: 6px;
}
.maylogin-lock {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--pink);
    box-shadow: none !important;
    filter: none;
    margin-bottom: 6px;
}
.maylogin-lock::before,
.maylogin-lock::after {
    content: none;
}
.maylogin-lock svg {
    width: 26px;
    height: 26px;
}
.maylogin-form-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.maylogin-form-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}
.maylogin-form {
    display: grid;
    gap: 16px;
    margin: 0;
}
.maylogin-form .field span {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
}
.maylogin-submit {
    width: 100%;
    justify-content: center;
    margin-top: 2px;
    background: var(--ink);
    color: #fff;
}
.maylogin-submit:hover {
    background: var(--pink);
    color: #fff;
    transform: translateY(-1px);
}
.maylogin-secure {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}
.maylogin-secure::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><polyline points='9 12 11 14 15 10'/></svg>") center/contain no-repeat;
}
.maylogin-secure[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .maylogin-card {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
    .maylogin-aside {
        min-height: 0;
        padding: clamp(28px, 7vw, 40px);
    }
    .maylogin-aside-inner {
        gap: 12px;
    }
}

/* =================================================================
   COTIZACION MAYORISTA — carrito (solo diseño visual)
   ================================================================= */
.mayquote-panel { width: min(460px, 100%); box-shadow: none; }
.mayquote-header h2 { letter-spacing: -0.02em; }

.mayquote-items {
    padding: 16px 22px;
    display: grid;
    gap: 12px;
    align-content: start;
    grid-auto-rows: min-content;
    overflow-y: auto;
    min-height: 0;
}
/* La tienda online envuelve la lista en .mayquote-body; este wrapper debe ocupar
   la fila 1fr del grid del panel y dejar que .mayquote-items haga el scroll, para
   que el pie con los botones de pago quede siempre visible (igual que mayoristas). */
.mayquote-body {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mayquote-body > .mayquote-items {
    flex: 1 1 auto;
    min-height: 0;
}
/* La nota va pegada al card del producto (mismo bloque), con fondo blanco. */
.mayquote-item-wrap { display: grid; gap: 0; }
.mayquote-item-wrap .mayquote-item {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 0;
    box-shadow: none;
}
.mayquote-item-nota {
    width: 100%;
    border: 1px solid var(--line);
    border-top: 1px dashed var(--line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 9px 12px;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.mayquote-item-nota::placeholder { color: var(--muted); }
.mayquote-item-nota:focus { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(236,72,153,0.12); position: relative; z-index: 1; }
/* La sombra del card la lleva ahora el contenedor completo (card + nota). */
.mayquote-item-wrap { box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); }
.mayquote-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    min-height: 92px;
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--mayq-item-bg, #fff);
    box-shadow: var(--shadow-sm);
}
.mayquote-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background:
        linear-gradient(135deg, rgba(252,231,243,0.6), rgba(237,233,254,0.6)), #fff;
    border: 1px solid var(--line);
}
.mayquote-thumb-ph {
    display: grid;
    place-items: center;
    color: var(--purple);
    font-weight: 900;
    font-size: 0.8rem;
}
.mayquote-item-info { min-width: 0; display: grid; gap: 2px; }
.mayquote-item-info strong {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mayquote-item-info small { color: var(--muted); font-size: 0.76rem; }
.mayquote-item-price { color: var(--purple); font-weight: 800; font-size: 0.84rem; }
.mayquote-item-subtotal { color: var(--ink); font-weight: 900; font-size: 0.86rem; }

/* Botones +/- del carrito: hover visible y configurable (no debe "desaparecer") */
.mayquote-item .qty-controls button {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
}
.mayquote-item .qty-controls button:hover {
    background: var(--mayq-qty-hover-bg, var(--purple));
    color: var(--mayq-qty-hover-text, #fff);
    border-color: var(--mayq-qty-hover-bg, var(--purple));
}

.mayquote-footer { display: grid; gap: 10px; }
.mayquote-total strong { font-size: 1.5rem; }

.mayquote-fields { display: grid; gap: 10px; }
.mayquote-fields .field,
.mayquote-fields textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    background: var(--soft);
    color: var(--ink);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
}
.mayquote-fields textarea { min-height: 64px; resize: vertical; }
.mayquote-fields .field:focus,
.mayquote-fields textarea:focus { border-color: var(--purple); background: #fff; box-shadow: var(--shadow-glow); }

/* Selector de envio */
.mayquote-shipping {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--soft);
}
.mayquote-block-title {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.mayquote-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--ink-soft);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mayquote-radio input { margin-top: 2px; accent-color: var(--pink); flex-shrink: 0; }
.mayquote-radio:has(input:checked) {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(236,72,153,0.10);
    color: var(--ink);
    font-weight: 600;
}

/* Botones de pago */
.mayquote-btn {
    width: 100%;
    min-height: 46px;
    padding: 11px 16px;
    font-size: 0.92rem;
}
.mayquote-wa {
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mayquote-wa:hover { background: #1ebe5d; transform: translateY(-1px); }
.mayquote-pay {
    background: var(--pink);
    color: #fff;
}
.mayquote-pay:hover { filter: brightness(1.05); transform: translateY(-1px); }

.mayquote-note {
    display: none;
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.mayquote-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.mayquote-sep::before,
.mayquote-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.mayquote-methods {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 7px;
    justify-content: center;
    margin: 0;
}
.mayquote-method {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-soft);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
}
.mayquote-pay-note { color: var(--green); font-weight: 600; }
.mayquote-pay-msg {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    background: var(--purple-soft);
    border-radius: 10px;
    padding: 10px 12px;
}
.mayquote-pay-msg[hidden] { display: none; }

.mayquote-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}
.mayquote-payment-modal.is-open { display: flex; }
.mayquote-payment-card {
    width: min(480px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 22px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: grid;
    gap: 14px;
}
.mayquote-payment-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mayquote-payment-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}
.mayquote-payment-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}
.mayquote-wompi-logo {
    margin-left: auto;
    display: inline-block;
    height: 40px;
    border-radius: 6px;
    vertical-align: middle;
}
.mayquote-payment-total {
    display: block;
    color: var(--ink);
    font-size: 1.1rem;
}
.mayquote-payment-actions {
    display: flex;
    gap: 10px;
}
.mayquote-payment-actions button {
    min-height: 46px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}
.mayquote-payment-cancel {
    flex: 1;
    border: 1px solid #d1d5db;
    background: #fff;
    color: var(--ink);
}
.mayquote-payment-confirm {
    flex: 2;
    border: 0;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}
.mayquote-payment-confirm .mayquote-wompi-logo {
    margin-left: 0;
    height: 36px;
}
.mayquote-wompi-fields { display: grid; gap: 10px; }
.mayquote-wompi-fields[hidden] { display: none; }
.mayquote-fac-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer; }
.mayquote-fac-toggle input { width: 16px; height: 16px; accent-color: var(--pink); }
#quoteFacturacion[hidden] { display: none; }

/* Aceptacion de terminos y condiciones en el checkout (ambos carritos). */
.mayquote-terms { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer; margin: 4px 0 2px; }
.mayquote-terms input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--pink); flex: 0 0 auto; }
.mayquote-terms a { color: var(--pink); font-weight: 700; text-decoration: underline; }
/* Filas de 2 columnas del modal de pago (igual disposicion que el modal de la web) */
.mayquote-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mayquote-modal-nota {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    resize: vertical;
    margin: 4px 0 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    background: var(--soft);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
}
.mayquote-modal-nota:focus { border-color: var(--purple); background: #fff; box-shadow: var(--shadow-glow); }
.mayquote-payment-confirm.is-whatsapp {
    background: #25d366;
}
.mayquote-payment-confirm:disabled {
    opacity: 0.6;
    cursor: progress;
}