* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    color: #172033;
    background: #f7f7fb;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img,
svg,
canvas {
    max-width: 100%;
}

.public-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 44px 0;
}

.home-page {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 0;
}

.catalog-page {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 0;
}

.public-hero,
.empty-state {
    display: grid;
    align-items: center;
    min-height: 58vh;
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid rgba(45, 19, 118, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f3f0ff 100%);
}

.public-hero h1,
.empty-state h1 {
    margin: 0 0 14px;
    font-size: clamp(2.4rem, 7vw, 5.6rem);
    line-height: 0.95;
    letter-spacing: 0;
    color: var(--color-primary-dark);
}

.public-hero p,
.empty-state p {
    max-width: 640px;
    color: #475569;
    font-size: 1.04rem;
    line-height: 1.7;
}

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

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    min-height: clamp(520px, 68vh, 680px);
    padding: clamp(34px, 5vw, 68px);
    border: 1px solid rgba(45, 19, 118, 0.1);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 83% 18%, rgba(110, 86, 201, 0.18), transparent 18rem),
        linear-gradient(135deg, #ffffff 0%, #f6f4ff 58%, #ffffff 100%);
    overflow: hidden;
}

.home-hero-copy h1 {
    max-width: 780px;
    margin: 0 0 18px;
    color: #111827;
    font-size: clamp(2.6rem, 6vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: 0;
}

.home-hero-copy > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: #4b5563;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.75;
}

.hero-showcase {
    position: relative;
    min-height: 390px;
    border: 1px solid rgba(45, 19, 118, 0.12);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(45, 19, 118, 0.96), rgba(74, 42, 163, 0.92)),
        var(--color-primary);
    box-shadow: 0 24px 70px rgba(45, 19, 118, 0.24);
}

.hero-showcase::before {
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    content: "";
}

.kit-card {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
}

.kit-card-main {
    top: 54px;
    right: 42px;
    left: 42px;
    min-height: 250px;
    padding: 18px;
}

.kit-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #111827;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 900;
}

.jersey-preview {
    position: relative;
    width: min(210px, 70%);
    height: 190px;
    margin: 18px auto 0;
    border-radius: 18px 18px 34px 34px;
    background:
        linear-gradient(120deg, transparent 0 18%, rgba(255, 255, 255, 0.26) 18% 28%, transparent 28% 100%),
        linear-gradient(145deg, #0f172a, #ffffff 48%, #6e56c9 49%, #2d1376);
    clip-path: polygon(18% 0, 36% 0, 44% 12%, 56% 12%, 64% 0, 82% 0, 100% 24%, 84% 38%, 84% 100%, 16% 100%, 16% 38%, 0 24%);
}

.jersey-preview span {
    position: absolute;
    inset: 68px 28px auto;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}

.kit-card-small {
    right: 24px;
    bottom: 26px;
    display: grid;
    gap: 3px;
    width: 176px;
    padding: 16px;
}

.kit-card-small svg {
    width: 24px;
    height: 24px;
    color: var(--color-cyan);
}

.kit-card-small small {
    color: rgba(255, 255, 255, 0.72);
}

.kit-ribbon {
    position: absolute;
    bottom: 38px;
    left: -18px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background: #fff;
    font-weight: 900;
    letter-spacing: 0.06em;
    transform: rotate(-4deg);
}

.home-section,
.membership-band,
.final-cta {
    margin-top: clamp(54px, 8vw, 96px);
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.section-heading h2,
.membership-band h2,
.final-cta h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.section-heading p:not(.eyebrow),
.membership-band p,
.final-cta p {
    max-width: 680px;
    margin: 10px 0 0;
    color: #64748b;
    line-height: 1.65;
}

.section-link {
    color: var(--color-primary);
    font-weight: 900;
}

.category-grid,
.product-grid,
.benefit-grid {
    display: grid;
    gap: 16px;
}

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

.category-card,
.product-card,
.benefit-card {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.category-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 158px;
    padding: 18px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.category-card:hover,
.product-card:hover,
.benefit-card:hover {
    border-color: rgba(45, 19, 118, 0.26);
    transform: translateY(-2px);
}

.category-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    color: var(--category-icon-color);
    background: var(--category-icon-bg);
    border: 1px solid var(--category-icon-border);
}
.category-icon svg,
.card-arrow {
    width: 20px;
    height: 20px;
}

.category-card strong,
.product-info h3,
.benefit-card h3 {
    color: #111827;
}


.card-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    color: var(--color-primary);
}

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

.product-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card {
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.product-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    background: #f3f4f6;
}

.product-preview span {
    width: 42%;
    height: 132px;
    border-radius: 14px 14px 24px 24px;
    clip-path: polygon(18% 0, 36% 0, 44% 12%, 56% 12%, 64% 0, 82% 0, 100% 24%, 84% 38%, 84% 100%, 16% 100%, 16% 38%, 0 24%);
    background: linear-gradient(145deg, #111827, #ffffff 48%, #6e56c9 49%, #2d1376);
}

.preview-violet { background: linear-gradient(135deg, #f6f3ff, #e9e3ff); }
.preview-purple { background: linear-gradient(135deg, #f8f7ff, #ece7ff); }
.preview-cyan { background: linear-gradient(135deg, #f0fdff, #e6f7ff); }
.preview-dark { background: linear-gradient(135deg, #f8fafc, #e5e7eb); }

.product-info {
    padding: 16px;
}

.product-info small {
    color: var(--color-primary);
    font-weight: 900;
}

.product-info h3 {
    min-height: 52px;
    margin: 8px 0 16px;
    font-size: 1.02rem;
    line-height: 1.35;
}

.product-info div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-info strong {
    color: #111827;
    font-size: 1.05rem;
}

.product-info a {
    color: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 900;
}

.membership-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(28px, 5vw, 54px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at right top, rgba(34, 211, 238, 0.2), transparent 18rem),
        linear-gradient(135deg, var(--color-primary), var(--color-primary-soft));
}

.membership-band .eyebrow,
.membership-band h2,
.membership-band p {
    color: #fff;
}

.membership-band p {
    color: rgba(255, 255, 255, 0.78);
}

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

.benefit-card {
    padding: 20px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.benefit-card svg {
    width: 30px;
    height: 30px;
    color: var(--color-primary);
}

.benefit-card h3 {
    margin: 16px 0 8px;
    font-size: 1rem;
    text-transform: uppercase;
}

.benefit-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

.final-cta {
    display: grid;
    place-items: center;
    padding: clamp(32px, 6vw, 64px);
    border: 1px solid rgba(45, 19, 118, 0.12);
    border-radius: var(--radius-lg);
    background: #fff;
    text-align: center;
}

.final-cta p:not(.eyebrow) {
    margin-bottom: 24px;
}

.catalog-hero {
    padding: clamp(30px, 5vw, 58px);
    border: 1px solid rgba(45, 19, 118, 0.1);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at right top, rgba(110, 86, 201, 0.16), transparent 20rem),
        #fff;
}

.catalog-hero h1 {
    margin: 0 0 12px;
    color: #111827;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.catalog-hero > p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 1.08rem;
    line-height: 1.7;
}

.catalog-search {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    min-height: 58px;
    margin-top: 28px;
    padding: 0 18px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--radius-md);
    background: #f7f7fb;
}

.catalog-search svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.catalog-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #111827;
    background: transparent;
    font-size: 1rem;
}

.catalog-layout {
    margin-top: 28px;
}

.catalog-controls,
.catalog-summary,
.catalog-empty,
.catalog-pagination {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.catalog-controls {
    padding: 18px;
}

.catalog-controls-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.catalog-controls-head h2 {
    margin: 0;
    color: #111827;
    font-size: 1.18rem;
}

.filter-mobile-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(45, 19, 118, 0.16);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background: #fff;
    font-weight: 900;
}

.filter-mobile-toggle svg {
    width: 18px;
    height: 18px;
}

.catalog-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 18px;
    margin-top: 16px;
}

.filter-group > span,
.filter-selects span {
    display: block;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-chips button,
.filter-chips a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    color: #111827;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 900;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.filter-chips button:hover,
.filter-chips button.is-active,
.filter-chips a:hover,
.filter-chips a.is-active {
    color: #fff;
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.filter-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.filter-selects select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--radius-sm);
    color: #111827;
    background: #fff;
    font-weight: 700;
}

.catalog-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 18px;
}

.catalog-summary strong {
    color: #111827;
}

.catalog-summary span:last-child {
    color: #64748b;
}

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

.catalog-card {
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.catalog-card:hover {
    border-color: rgba(45, 19, 118, 0.28);
    transform: translateY(-3px);
}

.catalog-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 236px;
    overflow: hidden;
}

.catalog-jersey {
    width: 44%;
    height: 142px;
    border-radius: 14px 14px 24px 24px;
    clip-path: polygon(18% 0, 36% 0, 44% 12%, 56% 12%, 64% 0, 82% 0, 100% 24%, 84% 38%, 84% 100%, 16% 100%, 16% 38%, 0 24%);
    background:
        linear-gradient(120deg, transparent 0 18%, rgba(255, 255, 255, 0.3) 18% 29%, transparent 29% 100%),
        linear-gradient(145deg, #111827, #ffffff 48%, #6e56c9 49%, #2d1376);
    transition: transform 0.2s ease;
}

.catalog-card:hover .catalog-jersey {
    transform: scale(1.05) rotate(-1deg);
}

.catalog-image {
    width: 100%;
    height: 236px;
    object-fit: contain;
    padding: 28px;
    transition: transform 0.2s ease;
}

.catalog-card:hover .catalog-image {
    transform: scale(1.04);
}

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.badge-nuevo { background: var(--color-primary); }
.badge-popular { background: var(--color-cyan); color: #0f172a; }
.badge-premium { background: var(--color-primary-soft); }
.badge-oferta { background: var(--color-yellow); color: #111827; }

.catalog-card-body {
    padding: 16px;
}

.catalog-card-body small{
    color:var(--catalog-category-color);
    font-weight:900;
}

.catalog-card-body h2 {
    min-height: 52px;
    margin: 8px 0 16px;
    color: #111827;
    font-size: 1.02rem;
    line-height: 1.35;
}

.catalog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.catalog-card-foot strong {
    color: #111827;
    font-size: 1.05rem;
}

.design-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(45, 19, 118, 0.16);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 900;
    transition: color 0.18s ease, background 0.18s ease;
}

.catalog-card:hover .design-link,
.design-link:hover {
    color: #fff;
    background: var(--color-primary);
}

.catalog-empty {
    display: grid;
    place-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 42px 18px;
    text-align: center;
}

.catalog-empty[hidden] {
    display: none;
}

.catalog-empty svg {
    width: 34px;
    height: 34px;
    color: var(--color-primary);
}

.catalog-empty h2 {
    margin: 0;
    color: #111827;
    font-size: 1.25rem;
}

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

.catalog-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    color: #111827;
    font-weight: 800;
}

.catalog-pagination a.is-active {
    color: #fff;
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.catalog-pagination a[aria-disabled="true"] {
    color: #94a3b8;
    pointer-events: none;
}

.site-footer {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
}

.site-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: min(1280px, calc(100% - 32px));
    min-height: 78px;
    margin: 0 auto;
}

.public-nav,
.public-nav-links {
    display: flex;
    align-items: center;
}

.public-nav {
    flex: 1;
    justify-content: flex-end;
    gap: clamp(18px, 3vw, 42px);
}

.public-nav-links {
    gap: clamp(16px, 2vw, 30px);
}

.public-nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 78px;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    transition: color 0.18s ease;
}

.public-nav-links a::after {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary);
    content: "";
    opacity: 0;
    transform: scaleX(0.55);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.public-nav-links a:hover,
.public-nav-links a.is-active {
    color: var(--color-primary);
}

.public-nav-links a:hover::after,
.public-nav-links a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--color-primary);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: background 0.18s ease, transform 0.18s ease;
}

.login-button:hover {
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-icon-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    color: #111827;
    background: #fff;
}

.navbar-icon-button svg {
    width: 19px;
    height: 19px;
}

.cart-link span {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 900;
}

.account-menu {
    position: relative;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px 0 6px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    color: #111827;
    background: #fff;
    font-weight: 800;
}

.account-trigger span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--color-primary);
}

.account-trigger svg {
    width: 16px;
    height: 16px;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: none;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
}

.account-dropdown.is-open {
    display: block;
}

.account-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #111827;
    font-weight: 700;
}

.account-dropdown a:hover {
    color: var(--color-primary);
    background: #f7f7fb;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: start center;
    padding: 96px 16px 16px;
    background: rgba(7, 17, 31, 0.52);
}

.search-overlay[hidden] {
    display: none;
}

.search-box {
    position: relative;
    width: min(760px, 100%);
    padding: 20px;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 28px 70px rgba(7, 17, 31, 0.28);
}

.search-close {
    position: absolute;
    top: -52px;
    right: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #111827;
    background: #fff;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 10px 0 16px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    background: #f7f7fb;
}

.search-form input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
}

.search-form button {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--color-primary);
    font-weight: 800;
}

.search-results {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.search-results a,
.search-results p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    color: #111827;
    background: #f8fafc;
}

.public-menu-toggle {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    color: #111827;
    background: #fff;
}

.public-menu-toggle svg {
    width: 21px;
    height: 21px;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 36px;
    color: #64748b;
}

.site-footer-full {
    display: block;
    width: 100%;
    margin-top: 84px;
    padding: 0;
    color: #cbd5e1;
    background: #07111f;
}

.footer-grid,
.footer-bottom {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(140px, 0.55fr));
    gap: clamp(24px, 5vw, 70px);
    padding: 54px 0 36px;
}

.footer-grid p {
    max-width: 370px;
    color: #94a3b8;
    line-height: 1.7;
}

.footer-grid h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.footer-grid a,
.footer-grid span {
    display: block;
    margin: 10px 0;
    color: #cbd5e1;
}

.footer-brand span {
    background: #fff;
    color: var(--color-primary);
}

.footer-brand strong {
    color: #fff;
}

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
}

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

.footer-bottom {
    padding: 18px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.auth-page,
.cart-page,
.product-detail-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0;
}

.auth-card,
.checkout-panel,
.order-summary,
.client-panel,
.plan-card {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.auth-card {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 42px);
}

.auth-card h1,
.cart-header h1,
.product-detail-info h1 {
    margin: 0 0 18px;
    color: #111827;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
}

.form-stack,
.form-grid {
    display: grid;
    gap: 14px;
}

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

.form-stack label,
.form-grid label,
.coupon-form label {
    display: grid;
    gap: 7px;
    color: #111827;
    font-weight: 800;
}

.form-stack input,
.form-stack textarea,
.form-stack select,
.form-grid input,
.coupon-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}

.form-stack textarea {
    min-height: 130px;
    resize: vertical;
}

.form-error {
    margin: 10px 0;
    color: #b91c1c;
    font-weight: 800;
}

.auth-note {
    color: #64748b;
    line-height: 1.6;
}

.auth-note a {
    color: var(--color-primary);
    font-weight: 900;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(45, 19, 118, 0.18);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 85% 14%, rgba(74, 42, 163, 0.22), transparent 22rem),
        linear-gradient(135deg, #050915 0%, #0b1220 56%, #130a2d 100%);
}

.product-gallery {
    display: grid;
    gap: 16px;
}

.product-main-image {
    display: grid;
    place-items: center;
    min-height: 350px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(243, 240, 255, 0.08), rgba(34, 211, 238, 0.04)),
        #050915;
}

.product-main-image img {
    width: 100%;
    max-height: 430px;
    object-fit: contain;
    padding: clamp(14px, 3vw, 28px);
}

.product-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.product-thumbs button {
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
}

.product-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-detail-info {
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: #dbeafe;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
        rgba(7, 17, 31, 0.78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.product-detail-info .eyebrow,
.product-protection-card .eyebrow {
    color: var(--color-cyan);
}

.product-detail-info h1 {
    color: #fff;
}

.product-detail-info > p:not(.eyebrow) {
    color: #cbd5e1;
    font-size: 1.04rem;
    line-height: 1.7;
}

.product-protection-card {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: #fff;
    background: rgba(15, 23, 42, 0.82);
}

.product-protection-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.product-protection-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

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

.product-protection-grid div {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    min-height: 78px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.product-protection-grid svg {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 1px solid rgba(74, 42, 163, 0.6);
    border-radius: 50%;
    color: var(--color-cyan);
    background: rgba(45, 19, 118, 0.45);
}

.product-protection-grid strong {
    color: #fff;
    font-size: 0.94rem;
}

.product-protection-grid span {
    color: #cbd5e1;
    font-size: 0.84rem;
    line-height: 1.35;
}

.product-important-note {
    display: grid;
    gap: 8px;
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid rgba(234, 179, 8, 0.42);
    border-radius: var(--radius-sm);
    color: #fde68a;
    background: rgba(120, 53, 15, 0.22);
}

.product-important-note strong {
    color: #fef3c7;
    font-size: 1.02rem;
}

.product-important-note p {
    margin: 0;
    color: #fde68a;
    line-height: 1.55;
}

.product-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.product-price-line strong {
    color: #fff;
    font-size: 1.8rem;
}

.product-price-line del {
    color: #94a3b8;
}

.product-badge-inline,
.format-list span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--color-primary);
    background: #f3f0ff;
    font-weight: 900;
}

.format-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.file-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.file-info div,
.radio-card {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
}

.file-info dt {
    color: #9fb0c9;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.file-info dd {
    margin: 4px 0 0;
    color: #fff;
    font-weight: 800;
}

.membership-note {
    padding: 12px;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    background: #f3f0ff;
    font-weight: 800;
}

.product-actions {
    padding: 6px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.product-actions .button {
    min-width: 190px;
}

.product-favorite-action {
    min-width: 0;
}

.product-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.product-share-row span {
    margin-right: auto;
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-share-row a,
.product-share-row button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(74, 42, 163, 0.7);
    border-radius: var(--radius-sm);
    color: #fff;
    background: rgba(45, 19, 118, 0.34);
    transition: background 0.18s ease, transform 0.18s ease;
}

.product-share-row a:hover,
.product-share-row button:hover {
    background: var(--color-primary);
    transform: translateY(-1px);
}

.product-share-row svg {
    width: 18px;
    height: 18px;
}
/* ========================================
   CABECERA DEL PRODUCTO
======================================== */

.product-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.product-detail-heading {
    flex: 1;
    min-width: 0;
}

.product-detail-heading .eyebrow {
    margin-bottom: 10px;
}

.product-detail-heading h1 {
    margin-top: 0;
}

.product-description {
    margin-bottom: 0;
}


/* ========================================
   FAVORITO SUPERIOR
======================================== */

.product-favorite-form {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.product-favorite-top {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 12px;

    border: 1px solid rgba(124, 58, 237, 0.6);

    background:
        linear-gradient(
            145deg,
            rgba(91, 33, 182, 0.25),
            rgba(49, 20, 105, 0.25)
        );

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.product-favorite-top svg {
    width: 23px;
    height: 23px;

    stroke-width: 2;
}


/* Hover */

.product-favorite-top:hover {
    transform: translateY(-2px);

    border-color: #8b5cf6;

    background:
        linear-gradient(
            145deg,
            rgba(124, 58, 237, 0.38),
            rgba(76, 29, 149, 0.38)
        );

    box-shadow:
        0 8px 22px rgba(76, 29, 149, 0.25);
}
/* ========================================
   CONTENEDOR PRINCIPAL DE COMPARTIR
   Separa la zona, agrega línea superior y
   distribuye título + botones
======================================== */
.product-share-row {
    margin-top: 25px;
    padding-top: 20px;

    /* Línea divisoria superior */
    border-top: 1px solid rgba(255, 255, 255, 0.10);

    /* Distribución horizontal */
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* ========================================
   TEXTO "COMPARTIR"
======================================== */
.product-share-title {
    font-size: 13px;
    font-weight: 800;

    /* Texto en mayúsculas */
    text-transform: uppercase;

    /* Separación entre letras */
    letter-spacing: 0.6px;

    color: #dbe4ff;
}


/* ========================================
   CONTENEDOR DE LOS BOTONES SOCIALES
======================================== */
.product-share-buttons {
    display: flex;
    align-items: center;

    /* Alinea los botones hacia la derecha */
    justify-content: flex-end;

    /* Separación entre botones */
    gap: 9px;

    /* Permite bajar a otra fila si no caben */
    flex-wrap: wrap;
}


/* ========================================
   BOTONES DE REDES SOCIALES
======================================== */
.share-button {
    /* Tamaño cuadrado */
    width: 40px;
    height: 40px;

    /* Centra el icono */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    /* Bordes redondeados */
    border-radius: 9px;

    /* Borde rojo */
    border: 1px solid rgba(255, 50, 65, 0.55);

    /* Fondo rojo oscuro transparente */
    background: rgba(100, 0, 10, 0.10);

    /* Color de iconos */
    color: #ffffff;

    /* Quita subrayado de enlaces */
    text-decoration: none;

    cursor: pointer;

    /* Animaciones suaves */
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ========================================
   TAMAÑO DE LOS ICONOS LUCIDE
======================================== */
.share-button svg {
    width: 19px;
    height: 19px;

    /* Grosor del icono */
    stroke-width: 2;
}


/* ========================================
   EFECTO AL PASAR EL MOUSE
======================================== */
.share-button:hover {
    /* Eleva ligeramente el botón */
    transform: translateY(-2px);

    /* Fondo más visible */
    background: rgba(180, 15, 30, 0.20);

    /* Borde más intenso */
    border-color: rgba(255, 50, 65, 0.95);

    /* Sombra suave */
    box-shadow:
        0 6px 18px rgba(180, 15, 30, 0.18);
}


/* ========================================
   EFECTO AL HACER CLIC
======================================== */
.share-button:active {
    transform: scale(0.94);
}


/* ========================================
   ICONO DE FACEBOOK
======================================== */
.social-letter {
    font-size: 22px;
    font-family: Arial, sans-serif;
    line-height: 1;
}


/* ========================================
   ICONO DE X / TWITTER
======================================== */
.social-x {
    font-size: 16px;
    font-family: Arial, sans-serif;
}


/* ========================================
   ICONO DE LINKEDIN
======================================== */
.social-linkedin {
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: 900;
}

/* Favorito activo */

.product-favorite-top.is-active {
    background:
        linear-gradient(
            145deg,
            #6d28d9,
            #4c1d95
        );

    border-color: #8b5cf6;

    color: #ffffff;

    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.25);
}


/* Rellenar corazón cuando está activo */

.product-favorite-top.is-active svg {
    fill: currentColor;
}


/* Click */

.product-favorite-top:active {
    transform: scale(0.95);
}


/* Accesibilidad */

.product-favorite-top:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 3px;
}

.cart-header {
    margin-bottom: 22px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 22px;
    align-items: start;
}

.cart-items {
    display: grid;
    gap: 12px;
}

.cart-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.cart-item img {
    width: 110px;
    height: 88px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #f8fafc;
}

.cart-item h2 {
    margin: 4px 0;
    color: #111827;
    font-size: 1.05rem;
}

.order-summary,
.checkout-panel {
    padding: 20px;
}

.order-summary h2,
.checkout-panel h2 {
    margin-top: 0;
    color: #111827;
}

.order-summary > div,
.summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.summary-total {
    border-bottom: 0;
    color: #111827;
    font-size: 1.2rem;
}

.coupon-form {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.checkout-method-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 26px 0 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.checkout-method-head h2 {
    margin: 4px 0 0;
}

.checkout-method-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(45, 19, 118, 0.16);
    border-radius: 999px;
    color: var(--color-primary);
    background: #f5f2ff;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.payment-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.payment-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 16px;
    border: 1px solid rgba(45, 19, 118, 0.14);
    border-radius: var(--radius-md);
    color: #111827;
    background: #fff;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.payment-choice-card:hover,
.payment-choice-card.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 18px 42px rgba(45, 19, 118, 0.14);
    transform: translateY(-1px);
}

.payment-choice-card svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

.payment-choice-card strong,
.payment-choice-card small {
    display: block;
}

.payment-choice-card strong {
    color: #111827;
    font-size: 1rem;
}

.payment-choice-card small {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.payment-choice-check {
    width: 18px;
    height: 18px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
}

.payment-choice-card.is-selected .payment-choice-check {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 4px #fff;
    background: var(--color-primary);
}

.payment-brand-stack {
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-brand-stack em,
.payment-brand-paypal,
.payment-brand-culqi {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 38px;
    padding: 0 9px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.payment-brand-stack em:first-child {
    background: #7e22ce;
}

.payment-brand-stack em:last-child {
    background: #0ea5e9;
}

.payment-brand-paypal {
    color: #1d4ed8;
    background: #eff6ff;
}

.payment-brand-culqi {
    color: #fff;
    background: linear-gradient(135deg, #2d1376, #22d3ee);
}

.manual-payment-modal[hidden] {
    display: none;
}

.manual-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
}

.payment-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(10px);
}

.manual-payment-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(100%, 560px);
    max-height: min(88vh, 760px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgba(74, 42, 163, 0.48);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background:
        radial-gradient(circle at top right, rgba(74, 42, 163, 0.2), transparent 18rem),
        #07111f;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.manual-payment-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.manual-payment-close svg {
    width: 20px;
    height: 20px;
}

.manual-payment-panel h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.55rem, 4vw, 2.1rem);
}

.manual-payment-panel > p:not(.eyebrow),
.manual-payment-panel .auth-note {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.55;
}

.manual-payment-details {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(74, 42, 163, 0.42);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.manual-payment-details strong {
    color: #fff;
    font-size: 1rem;
}

.manual-payment-details small {
    color: #cbd5e1;
    line-height: 1.45;
}

.payment-qr,
.payment-qr-placeholder {
    width: 132px;
    height: 132px;
    margin-top: 8px;
    border-radius: var(--radius-sm);
    background: #fff;
}

.payment-qr {
    object-fit: contain;
    padding: 6px;
}

.payment-qr-placeholder {
    display: grid;
    place-items: center;
    color: var(--color-primary);
    border: 8px solid #fff;
    outline: 1px solid rgba(74, 42, 163, 0.4);
    background:
        linear-gradient(90deg, rgba(45, 19, 118, 0.15) 50%, transparent 50%) 0 0 / 16px 16px,
        linear-gradient(rgba(45, 19, 118, 0.15) 50%, transparent 50%) 0 0 / 16px 16px,
        #fff;
    font-weight: 900;
}

.manual-proof-field {
    display: grid;
    gap: 10px;
    color: #fff;
    font-weight: 900;
}

.manual-proof-field input {
    min-height: 46px;
    padding: 10px;
    border: 1px solid rgba(74, 42, 163, 0.5);
    border-radius: var(--radius-sm);
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.03);
}

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

.plan-card {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.plan-card.is-featured {
    border-color: rgba(45, 19, 118, 0.3);
    box-shadow: 0 18px 50px rgba(45, 19, 118, 0.14);
}

.plan-card h2,
.plan-card h3 {
    margin: 0;
    color: #111827;
}

.plan-card > strong {
    color: var(--color-primary);
    font-size: 2rem;
}

.plan-card span {
    color: #64748b;
}

.membership-page {
    padding-bottom: 56px;
}

.membership-hero {
    text-align: center;
}

.membership-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.membership-pills span,
.plan-head em {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(45, 19, 118, 0.14);
    border-radius: 999px;
    color: var(--color-primary);
    background: #f5f2ff;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.membership-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(980px, calc(100% - 32px));
    margin: 22px auto 0;
    padding: 24px;
    border: 1px solid rgba(45, 19, 118, 0.12);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fff 0%, #f6f3ff 100%);
    box-shadow: 0 18px 50px rgba(45, 19, 118, 0.1);
}

.membership-status-card.compact {
    width: 100%;
    margin: 0 0 18px;
}

.membership-status-card h2 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 1.4rem;
}

.membership-status-card p {
    margin: 0;
    color: #64748b;
}

.membership-status-card > svg {
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 14px 28px rgba(45, 19, 118, 0.22);
}

.membership-plans .plan-card {
    position: relative;
    align-content: start;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(45, 19, 118, 0.12);
    background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}

.membership-plans.compact .plan-card {
    min-height: 0;
}

.plan-card.is-disabled-plan {
    opacity: 0.72;
}

.plan-card.is-disabled-plan .button:disabled {
    cursor: not-allowed;
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.24);
    background: #e5e7eb;
    transform: none;
}

.plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.plan-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--color-primary);
    background: #f3f0ff;
    border: 1px solid rgba(45, 19, 118, 0.16);
}

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

.plan-benefits {
    display: grid;
    gap: 10px;
}

.plan-benefits span {
    position: relative;
    padding-left: 22px;
}

.plan-benefits span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.membership-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.client-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 22px;
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
}

.client-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.client-sidebar nav {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

.client-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: #334155;
    font-weight: 800;
}

.client-sidebar nav a.is-active,
.client-sidebar nav a:hover {
    color: var(--color-primary);
    background: #f3f0ff;
}

.client-sidebar svg {
    width: 18px;
    height: 18px;
}

.client-main {
    display: grid;
    gap: 18px;
}

.client-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.client-topbar h1 {
    margin: 0;
    color: #111827;
}

.client-bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: #f3f0ff;
    color: var(--color-primary);
}

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

.client-stats article {
    padding: 18px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-md);
    background: #fff;
}

.client-stats span {
    color: #64748b;
    font-weight: 800;
}

.client-stats strong {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 1.7rem;
}

.client-panel {
    padding: 20px;
}

.client-panel h2 {
    margin-top: 0;
    color: #111827;
}

.client-payment-status {
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    background: #f8fafc;
}

.client-payment-status div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.client-payment-status span {
    color: #64748b;
    font-weight: 800;
}

.client-payment-status strong {
    color: #111827;
    text-transform: uppercase;
}

.client-payment-status p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.client-payment-aprobado {
    border-color: rgba(34, 197, 94, 0.22);
    background: #f0fdf4;
}

.client-payment-rechazado {
    border-color: rgba(239, 68, 68, 0.22);
    background: #fef2f2;
}

.client-payment-pendiente {
    border-color: rgba(234, 179, 8, 0.28);
    background: #fffbeb;
}

.client-order-history {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.client-order-history h3 {
    margin: 0;
    color: #111827;
}

.client-order-history div {
    padding: 12px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: var(--radius-sm);
    background: #fff;
}

.client-order-history strong {
    color: var(--color-primary);
    text-transform: uppercase;
}

.client-order-history span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 800;
}

.client-order-history p {
    margin: 8px 0 0;
    color: #475569;
    line-height: 1.55;
}

.client-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    color: #111827;
}

.client-row em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: 900;
}

.inline-form {
    padding: 0 16px 16px;
}
/* =====================================================
   TEMA OSCURO GLOBAL - CHAMOY SPORT
   Agregado al final para no romper la estructura actual
===================================================== */
:root{
    --dark-bg:#07090e;
    --dark-bg-soft:#0b0f17;
    --dark-surface:#10151f;
    --dark-surface-2:#151b27;
    --dark-surface-3:#1a2231;
    --dark-border:rgba(255,255,255,.09);
    --dark-border-hover:rgba(124,92,246,.42);
    --dark-text:#f5f7fb;
    --dark-text-soft:#aab3c2;
    --dark-text-muted:#788397;
    --dark-shadow:0 18px 50px rgba(0,0,0,.32);
}

html{background:var(--dark-bg);color-scheme:dark}
body{color:var(--dark-text);background:var(--dark-bg)}

/* HERO / INICIO */
.public-hero,.empty-state,.home-hero{
    border-color:var(--dark-border);
    background:radial-gradient(circle at 83% 18%,rgba(110,86,201,.16),transparent 18rem),linear-gradient(135deg,#0a0d14 0%,#0e1320 58%,#090c13 100%);
    box-shadow:var(--dark-shadow);
}
.public-hero h1,.empty-state h1,.home-hero-copy h1,.section-heading h2,.final-cta h2{color:var(--dark-text)}
.public-hero p,.empty-state p,.home-hero-copy>p:not(.eyebrow),.section-heading p:not(.eyebrow),.final-cta p{color:var(--dark-text-soft)}
.section-link{color:#a78bfa}

/* TARJETAS DEL INICIO */
.category-card,.product-card,.benefit-card,.final-cta{
    border-color:var(--dark-border);
    background:var(--dark-surface);
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.category-card:hover,.product-card:hover,.benefit-card:hover{border-color:var(--dark-border-hover)}
.category-icon{color:#a78bfa;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.18)}
.category-card strong,.product-info h3,.benefit-card h3,.product-info strong{color:var(--dark-text)}
.category-card small,.benefit-card p{color:var(--dark-text-soft)}
.product-preview{background:#0c111a}
.preview-violet{background:linear-gradient(135deg,#17132a,#21183b)}
.preview-purple{background:linear-gradient(135deg,#151225,#241b3d)}
.preview-cyan{background:linear-gradient(135deg,#0e1820,#102733)}
.preview-dark{background:linear-gradient(135deg,#0b0f16,#171d28)}

/* CTA FINAL */
.final-cta{background:radial-gradient(circle at top right,rgba(124,58,237,.12),transparent 18rem),var(--dark-surface)}

/* CATÁLOGO */
.catalog-hero{
    border-color:var(--dark-border);
    background:radial-gradient(circle at right top,rgba(110,86,201,.16),transparent 20rem),var(--dark-surface);
}
.catalog-hero h1,.catalog-controls-head h2,.catalog-summary strong,.catalog-card-body h2,.catalog-card-foot strong,.catalog-empty h2{color:var(--dark-text)}
.catalog-hero>p:not(.eyebrow),.catalog-summary span:last-child,.filter-group>span,.filter-selects span{color:var(--dark-text-soft)}
.catalog-search,.catalog-controls,.catalog-summary,.catalog-empty,.catalog-pagination,.catalog-card{
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
.catalog-search input{color:var(--dark-text)}
.catalog-search input::placeholder{color:var(--dark-text-muted)}
.filter-mobile-toggle{border-color:var(--dark-border-hover);background:var(--dark-surface-2);color:#a78bfa}
.filter-chips button,.filter-chips a,.filter-selects select{
    border-color:var(--dark-border);
    color:var(--dark-text);
    background:var(--dark-surface-2);
}
.filter-chips button:hover,.filter-chips button.is-active,.filter-chips a:hover,.filter-chips a.is-active{color:#fff;border-color:var(--color-primary);background:var(--color-primary)}
.catalog-card:hover{border-color:var(--dark-border-hover)}
.catalog-pagination a{border-color:var(--dark-border);color:var(--dark-text);background:var(--dark-surface-2)}
.catalog-pagination a[aria-disabled="true"]{color:var(--dark-text-muted)}
.design-link{border-color:rgba(124,58,237,.32);color:#a78bfa}

/* NAVBAR */
.site-navbar{border-bottom-color:var(--dark-border);background:rgba(7,9,14,.94);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.public-nav-links a{color:#d8deea}
.public-nav-links a:hover,.public-nav-links a.is-active{color:#a78bfa}
.navbar-icon-button,.account-trigger,.public-menu-toggle{
    border-color:var(--dark-border);
    color:var(--dark-text);
    background:var(--dark-surface-2);
}
.account-dropdown{border-color:var(--dark-border);background:var(--dark-surface-2);box-shadow:0 18px 40px rgba(0,0,0,.38)}
.account-dropdown a{color:var(--dark-text)}
.account-dropdown a:hover{color:#a78bfa;background:rgba(124,58,237,.12)}

/* BUSCADOR */
.search-overlay{background:rgba(2,5,10,.72)}
.search-box{border:1px solid var(--dark-border);background:var(--dark-surface);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.search-close{color:var(--dark-text);background:var(--dark-surface-2);border:1px solid var(--dark-border)}
.search-form{border-color:var(--dark-border);background:var(--dark-bg-soft)}
.search-form input{color:var(--dark-text)}
.search-form input::placeholder{color:var(--dark-text-muted)}
.search-results a,.search-results p{color:var(--dark-text);background:var(--dark-surface-2)}

/* LOGIN / FORMULARIOS / PANELES */
.auth-card,.checkout-panel,.order-summary,.client-panel,.plan-card{
    border-color:var(--dark-border);
    background:var(--dark-surface);
    box-shadow:0 12px 34px rgba(0,0,0,.16);
}
.auth-card h1,.cart-header h1,.form-stack label,.form-grid label,.coupon-form label{color:var(--dark-text)}
.form-stack input,.form-stack textarea,.form-stack select,.form-grid input,.coupon-form input{
    border-color:var(--dark-border);
    color:var(--dark-text);
    background:var(--dark-bg-soft);
}
.form-stack input::placeholder,.form-stack textarea::placeholder,.form-grid input::placeholder,.coupon-form input::placeholder{color:var(--dark-text-muted)}
.auth-note{color:var(--dark-text-soft)}

/* DETALLE DE PRODUCTO: ya era oscuro, solo armonizamos piezas claras */
.product-badge-inline,.format-list span,.membership-note{
    color:#c4b5fd;
    background:rgba(124,58,237,.14);
    border:1px solid rgba(124,58,237,.22);
}

/* CARRITO / CHECKOUT */
.cart-item{border-color:var(--dark-border);background:var(--dark-surface)}
.cart-item img{background:var(--dark-bg-soft)}
.cart-item h2,.order-summary h2,.checkout-panel h2,.summary-total{color:var(--dark-text)}
.order-summary>div,.summary-total,.checkout-method-head{border-color:var(--dark-border)}
.checkout-method-head>span{border-color:rgba(124,58,237,.28);color:#c4b5fd;background:rgba(124,58,237,.12)}
.payment-choice-card{border-color:var(--dark-border);color:var(--dark-text);background:var(--dark-surface-2)}
.payment-choice-card:hover,.payment-choice-card.is-selected{border-color:#8b5cf6;box-shadow:0 18px 42px rgba(0,0,0,.25)}
.payment-choice-card strong{color:var(--dark-text)}
.payment-choice-card small{color:var(--dark-text-soft)}
.payment-choice-check{border-color:#68758a}
.payment-choice-card.is-selected .payment-choice-check{box-shadow:inset 0 0 0 4px var(--dark-surface-2)}

/* PLANES / MEMBRESÍAS */
.plan-card h2,.plan-card h3{color:var(--dark-text)}
.plan-card span{color:var(--dark-text-soft)}
.membership-pills span,.plan-head em{border-color:rgba(124,58,237,.25);color:#c4b5fd;background:rgba(124,58,237,.12)}
.membership-status-card{
    border-color:var(--dark-border);
    background:linear-gradient(135deg,var(--dark-surface) 0%,#151127 100%);
    box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.membership-status-card h2{color:var(--dark-text)}
.membership-status-card p{color:var(--dark-text-soft)}
.membership-plans .plan-card{border-color:var(--dark-border);background:linear-gradient(180deg,var(--dark-surface) 0%,#0d111a 100%)}
.plan-icon{color:#c4b5fd;background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.26)}
.plan-card.is-disabled-plan .button:disabled{color:var(--dark-text-muted);border-color:var(--dark-border);background:#202735}

/* ÁREA DEL CLIENTE */
.client-sidebar,.client-topbar,.client-stats article,.client-order-history div{
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
.client-sidebar nav a{color:#cbd3df}
.client-sidebar nav a.is-active,.client-sidebar nav a:hover{color:#c4b5fd;background:rgba(124,58,237,.12)}
.client-topbar h1,.client-stats strong,.client-panel h2,.client-payment-status strong,.client-order-history h3,.client-row{color:var(--dark-text)}
.client-bell{color:#c4b5fd;background:rgba(124,58,237,.13)}
.client-stats span,.client-payment-status span,.client-order-history span{color:var(--dark-text-soft)}
.client-payment-status{border-color:var(--dark-border);background:var(--dark-bg-soft)}
.client-payment-status p,.client-order-history p{color:var(--dark-text-soft)}
.client-payment-aprobado{border-color:rgba(34,197,94,.32);background:rgba(34,197,94,.08)}
.client-payment-rechazado{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.08)}
.client-payment-pendiente{border-color:rgba(234,179,8,.34);background:rgba(234,179,8,.08)}
.client-row{border-bottom-color:var(--dark-border)}

/* FOOTER */
.site-footer{color:var(--dark-text-soft)}
.site-footer-full{background:#05080d}

/* SELECCIÓN / SCROLLBAR */
::selection{color:#fff;background:#6d28d9}
*{scrollbar-color:#4c1d95 #090c12}
/* =====================================================
   SISTEMA DE TEMA - CHAMOY SPORT
   OSCURO POR DEFECTO
===================================================== */

:root{
    color-scheme:dark;

    --theme-bg:#07090e;
    --theme-bg-soft:#0b1018;
    --theme-card:#10151f;
    --theme-card-soft:#151b27;

    --theme-text:#f8fafc;
    --theme-text-soft:#a8b0bf;
    --theme-text-muted:#7c8798;

    --theme-border:rgba(255,255,255,.09);
    --theme-border-hover:rgba(255,255,255,.17);

    --theme-navbar:rgba(7,9,14,.94);
    --theme-input:#0c1119;

    --theme-accent-soft:rgba(110,86,201,.16);
    --theme-hover:rgba(110,86,201,.12);

    --theme-shadow:0 18px 50px rgba(0,0,0,.30);

    --theme-hero:
        radial-gradient(circle at 83% 18%,rgba(110,86,201,.15),transparent 18rem),
        linear-gradient(135deg,#090c13 0%,#0c1018 58%,#090c13 100%);

    --theme-product:
        radial-gradient(circle at 85% 14%,rgba(74,42,163,.22),transparent 22rem),
        linear-gradient(135deg,#050915 0%,#0b1220 56%,#130a2d 100%);
}


/* =====================================================
   TEMA CLARO
===================================================== */

html[data-theme="light"]{
    color-scheme:light;

    --theme-bg:#f7f7fb;
    --theme-bg-soft:#f1f3f8;
    --theme-card:#ffffff;
    --theme-card-soft:#f8fafc;

    --theme-text:#111827;
    --theme-text-soft:#64748b;
    --theme-text-muted:#94a3b8;

    --theme-border:rgba(17,24,39,.08);
    --theme-border-hover:rgba(45,19,118,.22);

    --theme-navbar:rgba(255,255,255,.96);
    --theme-input:#f8fafc;

    --theme-accent-soft:#f3f0ff;
    --theme-hover:#f3f0ff;

    --theme-shadow:0 18px 50px rgba(17,24,39,.08);

    --theme-hero:
        radial-gradient(circle at 83% 18%,rgba(110,86,201,.18),transparent 18rem),
        linear-gradient(135deg,#ffffff 0%,#f6f4ff 58%,#ffffff 100%);

    --theme-product:
        radial-gradient(circle at 85% 14%,rgba(110,86,201,.10),transparent 22rem),
        linear-gradient(135deg,#ffffff 0%,#f8f7ff 56%,#f3f0ff 100%);
}


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

body{
    color:var(--theme-text);
    background:var(--theme-bg);
    transition:background .2s ease,color .2s ease;
}

.home-page,
.catalog-page,
.auth-page,
.cart-page,
.product-detail-page,
.membership-page,
.client-shell{
    color:var(--theme-text);
}


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

.public-hero,
.empty-state,
.home-hero,
.catalog-hero,
.final-cta{
    border-color:var(--theme-border);
    background:var(--theme-hero);
}

.public-hero h1,
.empty-state h1,
.home-hero-copy h1,
.section-heading h2,
.final-cta h2,
.catalog-hero h1{
    color:var(--theme-text);
}

.public-hero p,
.empty-state p,
.home-hero-copy>p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.final-cta p,
.catalog-hero>p:not(.eyebrow){
    color:var(--theme-text-soft);
}


/* =====================================================
   CARDS
===================================================== */

.category-card,
.product-card,
.benefit-card,
.catalog-card,
.catalog-controls,
.catalog-summary,
.catalog-empty,
.catalog-pagination,
.auth-card,
.checkout-panel,
.order-summary,
.client-panel,
.plan-card,
.cart-item,
.client-sidebar,
.client-topbar,
.client-order-history div,
.membership-status-card{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card);
}

.category-card:hover,
.product-card:hover,
.benefit-card:hover,
.catalog-card:hover{
    border-color:var(--theme-border-hover);
}

.category-card strong,
.product-info h3,
.product-info strong,
.benefit-card h3,
.catalog-card-body h2,
.catalog-card-foot strong,
.catalog-summary strong,
.catalog-empty h2,
.cart-item h2,
.order-summary h2,
.checkout-panel h2,
.plan-card h2,
.plan-card h3,
.membership-status-card h2,
.client-topbar h1,
.client-order-history h3,
.client-row{
    color:var(--theme-text);
}

.category-card small,
.benefit-card p,
.catalog-summary span:last-child,
.auth-note,
.plan-card span,
.membership-status-card p,
.client-order-history span,
.client-order-history p{
    color:var(--theme-text-soft);
}


/* =====================================================
   PREVIEWS
===================================================== */

.product-preview,
.preview-violet,
.preview-purple,
.preview-cyan,
.preview-dark{
    background:var(--theme-card-soft);
}


/* =====================================================
   ICONOS
===================================================== */

.category-icon,
.plan-icon,
.client-bell{
    color:var(--color-primary);
    background:var(--theme-accent-soft);
}


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

.site-navbar{
    border-bottom-color:var(--theme-border);
    background:var(--theme-navbar);
}

.public-nav-links a{
    color:var(--theme-text);
}

.navbar-icon-button,
.account-trigger,
.public-menu-toggle{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card);
}

.account-dropdown{
    border-color:var(--theme-border);
    background:var(--theme-card);
    box-shadow:var(--theme-shadow);
}

.account-dropdown a{
    color:var(--theme-text);
}

.account-dropdown a:hover{
    color:var(--color-primary);
    background:var(--theme-hover);
}


/* =====================================================
   BUSCADOR
===================================================== */

.search-box{
    background:var(--theme-card);
    box-shadow:var(--theme-shadow);
}

.search-close{
    color:var(--theme-text);
    background:var(--theme-card);
}

.search-form,
.catalog-search{
    border-color:var(--theme-border);
    background:var(--theme-input);
}

.search-form input,
.catalog-search input{
    color:var(--theme-text);
}

.search-results a,
.search-results p{
    color:var(--theme-text);
    background:var(--theme-card-soft);
}


/* =====================================================
   FILTROS
===================================================== */

.filter-mobile-toggle{
    color:var(--color-primary);
    border-color:var(--theme-border);
    background:var(--theme-card);
}

.filter-group>span,
.filter-selects span{
    color:var(--theme-text-soft);
}

.filter-chips button,
.filter-chips a{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card-soft);
}

.filter-selects select{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card);
}


/* =====================================================
   FORMULARIOS
===================================================== */

.form-stack label,
.form-grid label,
.coupon-form label{
    color:var(--theme-text);
}

.form-stack input,
.form-stack textarea,
.form-stack select,
.form-grid input,
.coupon-form input{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-input);
}

input::placeholder,
textarea::placeholder{
    color:var(--theme-text-muted);
}


/* =====================================================
   PRODUCTO
===================================================== */

.product-detail{
    border-color:var(--theme-border);
    background:var(--theme-product);
}

.product-main-image{
    border-color:var(--theme-border);
    background:var(--theme-card-soft);
}

.product-detail-info,
.product-protection-card{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card);
    box-shadow:var(--theme-shadow);
}

.product-detail-info h1,
.product-protection-head h2,
.product-protection-grid strong,
.product-price-line strong,
.file-info dd{
    color:var(--theme-text);
}

.product-description,
.product-detail-info>p:not(.eyebrow),
.product-protection-grid span{
    color:var(--theme-text-soft);
}

.product-protection-grid div,
.file-info div,
.radio-card{
    border-color:var(--theme-border);
    background:var(--theme-card-soft);
}

.product-badge-inline,
.format-list span,
.membership-note{
    color:var(--color-primary);
    background:var(--theme-accent-soft);
}


/* =====================================================
   CARRITO / CHECKOUT
===================================================== */

.cart-item img{
    background:var(--theme-card-soft);
}

.order-summary>div,
.summary-total,
.checkout-method-head{
    border-color:var(--theme-border);
}

.summary-total{
    color:var(--theme-text);
}

.checkout-method-head>span{
    color:var(--color-primary);
    border-color:var(--theme-border);
    background:var(--theme-accent-soft);
}

.payment-choice-card{
    color:var(--theme-text);
    border-color:var(--theme-border);
    background:var(--theme-card);
}

.payment-choice-card strong{
    color:var(--theme-text);
}

.payment-choice-card small{
    color:var(--theme-text-soft);
}


/* =====================================================
   MEMBRESÍAS
===================================================== */

.membership-pills span,
.plan-head em{
    color:var(--color-primary);
    border-color:var(--theme-border);
    background:var(--theme-accent-soft);
}

.membership-status-card{
    background:var(--theme-card);
}

.membership-plans .plan-card{
    border-color:var(--theme-border);
    background:var(--theme-card);
}

.plan-card.is-disabled-plan .button:disabled{
    color:var(--theme-text-muted);
    border-color:var(--theme-border);
    background:var(--theme-card-soft);
}


/* =====================================================
   PANEL CLIENTE
===================================================== */

.client-sidebar{
    background:var(--theme-card);
}

.client-sidebar nav a{
    color:var(--theme-text-soft);
}

.client-sidebar nav a.is-active,
.client-sidebar nav a:hover{
    color:var(--color-primary);
    background:var(--theme-hover);
}

.client-topbar{
    background:var(--theme-card);
}

.client-payment-status,
.client-order-history div{
    border-color:var(--theme-border);
    background:var(--theme-card-soft);
}

.client-payment-status span,
.client-order-history span{
    color:var(--theme-text-soft);
}

.client-payment-status strong{
    color:var(--theme-text);
}

.client-payment-status p,
.client-order-history p{
    color:var(--theme-text-soft);
}

.client-row{
    border-color:var(--theme-border);
}


/* =====================================================
   BOTÓN CAMBIO DE TEMA
===================================================== */

.theme-toggle{
    position:relative;
    overflow:hidden;
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.theme-toggle:hover{
    transform:translateY(-1px);
    border-color:var(--color-primary);
    background:var(--theme-hover);
}

.theme-icon{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
}

.theme-icon svg{
    width:19px;
    height:19px;
}


/* OSCURO = MOSTRAR SOL */

html[data-theme="dark"] .theme-icon-sun{
    display:grid;
}

html[data-theme="dark"] .theme-icon-moon{
    display:none;
}


/* CLARO = MOSTRAR LUNA */

html[data-theme="light"] .theme-icon-sun{
    display:none;
}

html[data-theme="light"] .theme-icon-moon{
    display:grid;
}

.category-card small{
    color:var(--color-muted-light);
}
/* ICONOS DE CATEGORÍAS - MODO OSCURO */
.category-icon{
    color:#c4b5fd;
    background:rgba(139,92,246,.22);
    border:1px solid rgba(167,139,250,.45);
}

.category-icon svg{
    color:#c4b5fd;
    stroke:#c4b5fd;
    opacity:1;
}

/* MODO CLARO */
html[data-theme="light"] .category-icon{
    color:#4a2aa3;
    background:#f3f0ff;
    border-color:rgba(74,42,163,.20);
}

html[data-theme="light"] .category-icon svg{
    color:#4a2aa3;
    stroke:#4a2aa3;
}

/* =====================================================
   INDEX MODERNO - HERO + BUSQUEDA + CATEGORIAS + CATALOGO
===================================================== */
.home-page-modern{
    width:min(1580px,calc(100% - 40px));
    padding:22px 0 0;
}

.home-hero-modern{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(460px,.95fr);
    align-items:center;
    gap:clamp(28px,5vw,78px);
    min-height:60vh;
    max-height:720px;
    padding:clamp(34px,4.5vw,70px);
    overflow:hidden;
    border:1px solid var(--theme-border);
    border-radius:var(--radius-lg);
    background:
        radial-gradient(circle at 76% 45%,rgba(110,86,201,.22),transparent 25rem),
        var(--theme-hero);
}

.home-hero-modern::after{
    position:absolute;
    inset:auto -8% -46% auto;
    width:520px;
    height:520px;
    border-radius:50%;
    background:rgba(110,86,201,.08);
    filter:blur(10px);
    content:"";
    pointer-events:none;
}

.home-hero-copy-modern{
    position:relative;
    z-index:2;
    max-width:700px;
}

.home-hero-copy-modern h1{
    max-width:760px;
    margin:0 0 18px;
    color:var(--theme-text);
    font-size:clamp(2.8rem,5.2vw,5.3rem);
    line-height:.95;
    letter-spacing:-.035em;
}

.home-hero-copy-modern>p:not(.eyebrow){
    max-width:630px;
    margin:0;
    color:var(--theme-text-soft);
    font-size:clamp(1rem,1.25vw,1.12rem);
    line-height:1.7;
}

.hero-actions-modern{
    display:flex;
    gap:12px;
    margin-top:28px;
}

.hero-product-carousel{
    position:relative;
    z-index:2;
    min-height:360px;
}

.hero-carousel-stage{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-product-slide{
    position:absolute;
    top:50%;
    left:50%;
    width:clamp(210px,18vw,300px);
    aspect-ratio:1.38/1;
    overflow:hidden;
    border:2px solid rgba(139,92,246,.36);
    border-radius:14px;
    background:var(--theme-card);
    box-shadow:0 18px 44px rgba(0,0,0,.26);
    opacity:0;
    transform:translate(-50%,-50%) scale(.62);
    transition:transform .55s cubic-bezier(.2,.75,.25,1),opacity .45s ease,filter .45s ease;
    pointer-events:none;
}

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

.hero-product-slide.is-center{
    z-index:5;
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    pointer-events:auto;
}

.hero-product-slide.is-left-1{
    z-index:4;
    opacity:.72;
    transform:translate(-102%,-50%) scale(.82);
    filter:saturate(.82) brightness(.88);
    pointer-events:auto;
}

.hero-product-slide.is-right-1{
    z-index:4;
    opacity:.72;
    transform:translate(2%,-50%) scale(.82);
    filter:saturate(.82) brightness(.88);
    pointer-events:auto;
}

.hero-product-slide.is-left-2{
    z-index:3;
    opacity:.34;
    transform:translate(-142%,-50%) scale(.66);
    filter:saturate(.7) brightness(.72);
}

.hero-product-slide.is-right-2{
    z-index:3;
    opacity:.34;
    transform:translate(42%,-50%) scale(.66);
    filter:saturate(.7) brightness(.72);
}

.hero-carousel-arrow{
    position:absolute;
    top:50%;
    z-index:10;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--theme-border-hover);
    border-radius:50%;
    color:var(--theme-text);
    background:rgba(7,9,14,.72);
    backdrop-filter:blur(10px);
    font-size:1.75rem;
    line-height:1;
    transform:translateY(-50%);
    transition:background .18s ease,transform .18s ease;
}

.hero-carousel-arrow:hover{
    background:var(--color-primary);
    transform:translateY(-50%) scale(1.05);
}

.hero-carousel-prev{left:4px}
.hero-carousel-next{right:4px}

.hero-carousel-dots{
    position:absolute;
    right:0;
    bottom:12px;
    left:0;
    z-index:10;
    display:flex;
    justify-content:center;
    gap:7px;
}

.hero-carousel-dot{
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    transition:width .22s ease,background .22s ease;
}

.hero-carousel-dot.is-active{
    width:22px;
    background:#a78bfa;
}

.home-search-section{
    margin-top:24px;
}

.home-search-box{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:58px;
    padding:0 18px;
    border:1px solid var(--theme-border);
    border-radius:var(--radius-md);
    background:var(--theme-card);
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.home-search-box:focus-within{
    border-color:rgba(139,92,246,.62);
    box-shadow:0 0 0 3px rgba(139,92,246,.10);
}

.home-search-box svg{
    width:21px;
    height:21px;
    color:#a78bfa;
    flex:0 0 auto;
}

.home-search-box input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:var(--theme-text);
    background:transparent;
    font-size:1rem;
}

.home-search-box input::placeholder{color:var(--theme-text-muted)}

.home-search-box button{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border:0;
    border-radius:8px;
    color:var(--theme-text-soft);
    background:var(--theme-hover);
    font-size:1.25rem;
}

.home-categories-section{
    margin-top:16px;
}

.home-category-chips{
    display:flex;
    align-items:center;
    gap:9px;
    overflow-x:auto;
    padding:2px 0 6px;
    scrollbar-width:thin;
}

.home-category-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:0 14px;
    flex:0 0 auto;
    border:1px solid var(--theme-border);
    border-radius:9px;
    color:var(--theme-text-soft);
    background:var(--theme-card);
    font-size:.84rem;
    font-weight:800;
    transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease;
}

.home-category-chip small{
    display:grid;
    place-items:center;
    min-width:24px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    color:#c4b5fd;
    background:rgba(139,92,246,.15);
    font-size:.7rem;
    font-weight:900;
}

.home-category-chip:hover{
    border-color:rgba(139,92,246,.55);
    color:var(--theme-text);
    transform:translateY(-1px);
}

.home-category-chip.is-active{
    color:#fff;
    border-color:#7c3aed;
    background:linear-gradient(135deg,#5b21b6,#7c3aed);
}

.home-category-chip.is-active small{
    color:#fff;
    background:rgba(255,255,255,.16);
}

html[data-theme="light"] .home-category-chip small{
    color:#4a2aa3;
    background:#f3f0ff;
}

html[data-theme="light"] .home-category-chip.is-active small{
    color:#fff;
    background:rgba(255,255,255,.18);
}

.home-catalog-section{
    margin-top:28px;
}

.home-catalog-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.home-catalog-heading h2{
    margin:0;
    color:var(--theme-text);
    font-size:clamp(1.8rem,2.5vw,2.6rem);
    line-height:1;
}

.home-results-count{
    color:var(--theme-text-soft);
    font-size:.92rem;
    white-space:nowrap;
}

.home-results-count strong{color:#a78bfa}

.home-catalog-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
}

.home-product-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--theme-border);
    border-radius:12px;
    background:var(--theme-card);
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

.home-product-card:hover{
    border-color:rgba(139,92,246,.52);
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(0,0,0,.18);
}

.home-product-card[hidden]{display:none}

.home-product-image{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1.34/1;
    overflow:hidden;
    background:var(--theme-card-soft);
}

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

.home-product-card:hover .home-product-image img{transform:scale(1.035)}

.home-product-body{
    padding:13px 14px 14px;
}

.home-product-body>small{
    display:block;
    overflow:hidden;
    color:var(--catalog-category-color);
    font-size:.74rem;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.home-product-body h3{
    min-height:42px;
    margin:7px 0 12px;
    color:var(--theme-text);
    font-size:.95rem;
    line-height:1.35;
}

.home-product-body h3 a{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.home-product-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:11px;
    border-top:1px solid var(--theme-border);
}

.home-product-foot strong{
    color:var(--theme-text);
    font-size:.96rem;
}

.home-product-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(139,92,246,.35);
    border-radius:8px;
    color:#c4b5fd;
    font-size:.74rem;
    font-weight:900;
    white-space:nowrap;
    transition:color .18s ease,background .18s ease,border-color .18s ease;
}

.home-product-link:hover{
    color:#fff;
    border-color:#7c3aed;
    background:#6d28d9;
}

html[data-theme="light"] .home-product-link{color:#4a2aa3}
html[data-theme="light"] .home-product-link:hover{color:#fff}

.home-no-results{
    display:grid;
    place-items:center;
    gap:14px;
    min-height:240px;
    padding:30px;
    border:1px dashed var(--theme-border-hover);
    border-radius:var(--radius-md);
    color:var(--theme-text-soft);
    text-align:center;
}

.home-no-results[hidden]{display:none}
.home-no-results svg{width:32px;height:32px;color:#a78bfa}

.home-page-modern~.site-footer-full{
    margin-top:38px;
}
.price-dual{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:0;
    line-height:1.08;
}
.price-dual-end{align-items:flex-end;text-align:right}
.price-pen-reference{
    display:block;
    margin-top:2px;
    color:var(--color-text-soft,#8fa1b6);
    font-size:.68rem;
    font-weight:750;
    letter-spacing:.01em;
    line-height:1.2;
    white-space:nowrap;
}
.checkout-summary-total .price-pen-reference,
.summary-total .price-pen-reference{font-size:.72rem}
.manual-payment-details small.exchange-note{color:#9fb0c4}

/* =====================================================
   AJUSTE PUBLICO - ANCHO UNIFICADO + 4 CARDS
   Inicio / Catalogo / Membresias / Contacto
===================================================== */

/* Mismo ancho visual para las principales paginas publicas. */
body .home-page-modern,
body .catalog-page,
body .membership-page,
body .contact-page {
    width: min(1580px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* Cuatro productos por fila en Inicio. */
body .home-page-modern .home-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Cuatro productos por fila en Catalogo. */
body .catalog-page .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Las cards del Catalogo usan el mismo lenguaje visual que las del Inicio. */
body .catalog-page .catalog-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-card);
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body .catalog-page .catalog-card:hover {
    border-color: rgba(139, 92, 246, .52);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

body .catalog-page .catalog-preview {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1.34 / 1;
    overflow: hidden;
    background: var(--theme-card-soft);
}

body .catalog-page .catalog-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    transition: transform .3s ease;
}

body .catalog-page .catalog-card:hover .catalog-image {
    transform: scale(1.035);
}

body .catalog-page .catalog-card-body {
    padding: 13px 14px 14px;
}

body .catalog-page .catalog-card-body > small {
    display: block;
    overflow: hidden;
    color: var(--catalog-category-color);
    font-size: .74rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .catalog-page .catalog-card-body h2 {
    display: -webkit-box;
    min-height: 42px;
    margin: 7px 0 12px;
    overflow: hidden;
    color: var(--theme-text);
    font-size: .95rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body .catalog-page .catalog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--theme-border);
}

body .catalog-page .catalog-card-foot strong {
    color: var(--theme-text);
    font-size: .96rem;
}

body .catalog-page .design-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 8px;
    color: #c4b5fd;
    background: transparent;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

body .catalog-page .design-link:hover {
    color: #fff;
    border-color: #7c3aed;
    background: #6d28d9;
}

html[data-theme="light"] body .catalog-page .design-link {
    color: #4a2aa3;
}

html[data-theme="light"] body .catalog-page .design-link:hover {
    color: #fff;
}

/* Mantener la misma separacion superior entre paginas. */
body .catalog-page,
body .membership-page {
    padding-top: 22px;
}

/* Responsive: 3 / 2 / 1 cards, conservando el mismo ancho exterior. */
@media (max-width: 1200px) {
    body .home-page-modern .home-catalog-grid,
    body .catalog-page .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    body .home-page-modern,
    body .catalog-page,
    body .membership-page,
    body .contact-page {
        width: min(1580px, calc(100% - 24px));
    }

    body .home-page-modern .home-catalog-grid,
    body .catalog-page .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    body .home-page-modern,
    body .catalog-page,
    body .membership-page,
    body .contact-page {
        width: min(1580px, calc(100% - 20px));
    }

    body .home-page-modern .home-catalog-grid,
    body .catalog-page .catalog-grid {
        grid-template-columns: 1fr;
    }
}