:root {
    --bg: #f5f7fb;
    --surface: #fff;
    --ink: #18202f;
    --muted: #667085;
    --line: #dde3ee;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --accent: #eab308;
    --danger: #dc2626;
    --warn: #d97706;
    --ok: #15803d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f6f8;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

.promo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 9px 16px;
    background: #101828;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
}

.promo-strip a {
    color: #facc15;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.brand-logo {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.brand strong,
.brand small,
td strong,
td small { display: block; }

.brand strong {
    font-size: 1.04rem;
    letter-spacing: -.01em;
}

.brand small {
    font-size: .78rem;
    font-weight: 700;
}

.brand small,
td small,
.muted { color: var(--muted); }

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav a {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.nav a:hover {
    background: #ecfdf5;
    color: var(--primary-dark);
}

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

.store-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 24px;
    align-items: stretch;
    min-height: 430px;
    padding: clamp(28px, 6vw, 68px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(15, 118, 110, .72)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.store-hero h1 {
    margin: 0;
    max-width: 900px;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
    line-height: 1;
}

.store-hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .88);
    font-size: 1.08rem;
    line-height: 1.6;
}

.hero-feature {
    align-self: end;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.hero-feature strong {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.deal {
    display: inline-grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border-radius: 50%;
    background: #facc15;
    color: #111827;
    font-weight: 900;
    font-size: 1.35rem;
}

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

.store-benefits article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.store-benefits strong,
.store-benefits span {
    display: block;
}

.store-benefits span {
    margin-top: 6px;
    color: var(--muted);
}

.shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.shop-sidebar h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.shop-sidebar > a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    color: #344054;
    font-weight: 700;
}

.shop-sidebar > a.active,
.shop-sidebar > a:hover {
    background: #ecfdf5;
    color: var(--primary-dark);
}

.shop-sidebar b {
    color: var(--muted);
}

.support-box {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid var(--line);
}

.support-box p {
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

.shop-content {
    min-width: 0;
}

.shop-titlebar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.shop-titlebar h2 {
    margin: 4px 0;
    font-size: 2rem;
}

.shop-titlebar span,
.breadcrumb {
    margin: 0;
    color: var(--muted);
}

.store-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 220px) auto;
    gap: 10px;
    width: min(100%, 620px);
}

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

.product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

.product-media {
    position: relative;
    display: grid;
    min-height: 190px;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, #101828, #0f766e);
    color: #fff;
}

.product-card.herramienta_disenio .product-media { background: linear-gradient(145deg, #7c2d12, #f97316); }
.product-card.herramienta_ia .product-media { background: linear-gradient(145deg, #1e1b4b, #14b8a6); }
.product-card.productividad .product-media { background: linear-gradient(145deg, #0f172a, #2563eb); }
.product-card.educacion .product-media { background: linear-gradient(145deg, #14532d, #84cc16); }
.product-card.streaming_video .product-media { background: linear-gradient(145deg, #7f1d1d, #ef4444); }
.product-card.streaming_musica .product-media { background: linear-gradient(145deg, #064e3b, #22c55e); }
.product-card.entretenimiento .product-media { background: linear-gradient(145deg, #312e81, #a855f7); }

.product-initial {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
    font-size: 3rem;
    font-weight: 900;
}

.discount {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-weight: 900;
}

.media-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 800;
}

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

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.product-meta a {
    color: var(--primary-dark);
}

.product-card h3 {
    margin: 0;
    min-height: 48px;
    font-size: 1.18rem;
    line-height: 1.25;
}

.rating {
    color: #b45309;
    font-size: .9rem;
    font-weight: 700;
}

.product-card p {
    min-height: 46px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.product-price {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
}

.product-actions {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.btn.whatsapp {
    background: #16a34a;
    color: #fff;
}

.featured-band {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    margin-top: 26px;
    padding: 26px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.featured-band h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
}

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

.mini-cats a {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    font-weight: 800;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 28px;
    align-items: stretch;
    padding: clamp(28px, 6vw, 64px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .94), rgba(24, 32, 47, .95)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.hero h1,
.section-head h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.02;
}

.hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
    line-height: 1.6;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-actions,
.form-actions,
.panel-head,
.section-head,
.card-foot,
.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
}

.btn.primary { background: var(--accent); color: #1f2937; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.dark,
.btn.small { background: var(--primary); color: #fff; }
.btn.small { min-height: 36px; padding: 0 12px; }

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

.metrics article {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.metrics strong {
    display: block;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.metrics span { color: rgba(255, 255, 255, .76); }

.dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0;
}

.dashboard article {
    background: var(--surface);
    border-color: var(--line);
}

.dashboard span { color: var(--muted); }

.toolbar,
.section-head,
.panel,
.form-panel,
.empty,
.notice {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.filters {
    display: grid;
    grid-template-columns: 1fr 240px auto;
    gap: 12px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

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

.tool-card {
    display: flex;
    min-height: 292px;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.tool-card h2 {
    margin: 0;
    font-size: 1.35rem;
}

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

.badge,
.cycle,
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.badge { background: #ccfbf1; color: #115e59; }
.cycle { background: #fef3c7; color: #92400e; }
.price { margin-top: auto; }
.price span,
.price strong { display: block; }
.price span { color: var(--muted); }
.price strong { font-size: 1.8rem; }

.form-panel fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.form-panel legend {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    font-size: 1.2rem;
    font-weight: 800;
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-weight: 700;
}

.wide { grid-column: 1 / -1; }
.notice.ok,
.pill.ok { background: #dcfce7; color: var(--ok); }
.notice.danger,
.pill.danger { background: #fee2e2; color: var(--danger); }
.pill.warn { background: #fef3c7; color: var(--warn); }
.pill.muted { background: #eef2f7; color: var(--muted); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 18px;
}

.panel h2 { margin: 0; }
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

th,
td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.profit-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.profit-list article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.profit-list span {
    display: block;
    color: var(--muted);
}

.footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .hero,
    .store-hero,
    .shop-layout,
    .shop-titlebar,
    .store-benefits,
    .product-grid,
    .featured-band,
    .split,
    .filters,
    .grid.catalog,
    .form-panel fieldset { grid-template-columns: 1fr; }
    .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-sidebar { position: static; }
    .store-filters { width: 100%; }
}

@media (max-width: 620px) {
    .topbar,
    .section-head,
    .promo-strip,
    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard,
    .metrics,
    .store-filters,
    .mini-cats { grid-template-columns: 1fr; }
    .store-hero { min-height: 0; }
    .product-actions .btn { width: 100%; }
}

/* Tienda mas llamativa y panel editable */
body {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .16), transparent 32rem),
        radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 34rem),
        #f4f7fb;
}

.promo-strip {
    background: linear-gradient(90deg, #111827, #1d4ed8, #f97316);
}

.topbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .07);
}

.brand-mark {
    background: linear-gradient(135deg, #2563eb, #f97316);
}

.store-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .22);
}

.store-hero::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -22%;
    width: 330px;
    height: 330px;
    border: 44px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content,
.hero-feature {
    position: relative;
    z-index: 1;
}

.hero-feature,
.store-benefits article,
.shop-sidebar,
.shop-titlebar,
.product-card,
.featured-band {
    border-radius: 18px;
}

.deal {
    background: linear-gradient(135deg, #facc15, #fb923c);
}

.store-benefits article {
    box-shadow: 0 10px 30px rgba(16, 24, 40, .05);
}

.product-card {
    box-shadow: 0 14px 36px rgba(16, 24, 40, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(16, 24, 40, .14);
}

.product-card.is-featured {
    border-color: rgba(249, 115, 22, .5);
}

.product-media {
    background-size: cover;
    background-position: center;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.product-price del {
    color: #98a2b3;
    font-weight: 700;
}

.product-price strong {
    color: #f97316;
    font-size: 1.35rem;
}

.featured-band {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(37, 99, 235, .86)),
        url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=80") center/cover;
}

.admin-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .94), rgba(37, 99, 235, .72)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1500&q=80") center/cover;
    color: #fff;
    border: 0;
}

.admin-hero span {
    color: rgba(255, 255, 255, .78);
}

.admin-products {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.admin-product-card {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .06);
}

.admin-product-preview {
    display: grid;
    min-height: 260px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #111827, #2563eb);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.admin-product-preview span {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .18);
    font-size: 3rem;
    font-weight: 900;
}

.admin-product-fields {
    display: grid;
    gap: 14px;
}

.admin-product-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-product-title strong,
.admin-product-title small {
    display: block;
}

.admin-product-title small {
    margin-top: 4px;
    color: var(--muted);
}

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

.check {
    display: inline-flex;
    align-items: center;
    width: auto;
    grid-auto-flow: column;
    color: var(--ink);
}

.check input {
    width: auto;
    min-height: 0;
}

.login-shell {
    display: grid;
    min-height: 68vh;
    place-items: center;
}

.login-card {
    width: min(460px, 100%);
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16, 24, 40, .14);
}

.login-card h1 {
    margin: 0;
    font-size: 2rem;
}

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

/* Login administrador profesional */
.admin-area:not(.adminlte-area) {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .94), rgba(6, 78, 92, .88)),
        radial-gradient(circle at 20% 18%, rgba(94, 234, 212, .26), transparent 24rem),
        radial-gradient(circle at 82% 78%, rgba(56, 189, 248, .22), transparent 22rem),
        #020817;
}

.admin-area:not(.adminlte-area) .admin-page {
    width: 100%;
    max-width: none;
    padding: 0;
}

.admin-login-screen {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(360px, 440px);
    gap: clamp(28px, 5vw, 74px);
    align-items: center;
    width: min(1180px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) 0;
}

.login-brand-panel {
    display: grid;
    gap: 28px;
    color: #ffffff;
}

.login-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.login-brand span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #031827;
    font-weight: 950;
    box-shadow: 0 18px 42px rgba(45, 212, 191, .22);
}

.login-brand strong {
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.18rem;
    font-weight: 900;
}

.login-brand-panel h1 {
    max-width: 720px;
    margin: 8px 0 14px;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
}

.login-brand-panel p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: rgba(226, 232, 240, .82);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.7;
}

.login-benefits {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(241, 245, 249, .9);
    font-weight: 850;
}

.login-benefits li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #5eead4;
    box-shadow: 0 0 18px rgba(94, 234, 212, .75);
}

.admin-login-card {
    position: relative;
    width: 100%;
    gap: 18px;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 34px 90px rgba(2, 8, 23, .36);
}

.admin-login-card::before {
    content: "";
    position: absolute;
    inset: 12px 12px auto;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #22c55e);
}

.login-card-head {
    display: grid;
    gap: 6px;
    padding-top: 8px;
}

.login-card-head span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.7rem, 2vw, 2.2rem);
    font-weight: 900;
}

.login-card-head p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.admin-login-card label {
    color: #334155;
    font-size: .9rem;
    font-weight: 900;
}

.login-input-wrap {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}

.login-input-wrap b {
    display: grid;
    width: 42px;
    height: 100%;
    place-items: center;
    color: #0f766e;
    background: #ecfeff;
    font-size: .88rem;
    font-weight: 950;
}

.login-input-wrap input {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.login-input-wrap:focus-within {
    border-color: #38bdf8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.login-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e, #0ea5e9) !important;
    box-shadow: 0 18px 34px rgba(14, 165, 233, .22);
}

.login-back-link {
    color: #64748b;
    font-size: .9rem;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 900px) {
    .admin-login-screen {
        grid-template-columns: 1fr;
        width: min(560px, calc(100% - 28px));
    }

    .login-brand-panel {
        gap: 18px;
        text-align: center;
    }

    .login-brand {
        margin: 0 auto;
    }

    .login-benefits {
        margin: 0 auto;
        text-align: left;
    }
}

/* Login administrador definitivo */
.admin-login-v2 {
    display: grid !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(18px, 3vw, 36px) !important;
    place-items: center !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .96), rgba(15, 23, 42, .94)),
        radial-gradient(circle at 18% 18%, rgba(45, 212, 191, .16), transparent 22rem),
        radial-gradient(circle at 84% 82%, rgba(56, 189, 248, .16), transparent 24rem) !important;
}

.admin-login-frame {
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(360px, 460px);
    width: min(1040px, 100%);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 38px 100px rgba(0, 0, 0, .38);
}

.admin-login-showcase {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 100%;
    padding: clamp(28px, 4vw, 48px);
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(15, 118, 110, .96), rgba(2, 8, 23, .96)),
        linear-gradient(120deg, rgba(255,255,255,.14), transparent 38%);
    isolation: isolate;
}

.admin-login-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .38;
}

.admin-login-logo {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.admin-login-logo img,
.admin-login-logo span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    object-fit: contain;
    padding: 6px;
    color: #ffffff;
    font-weight: 950;
}

.admin-login-logo strong {
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
}

.admin-login-copy {
    display: grid;
    gap: 12px;
    max-width: 500px;
}

.admin-login-copy span {
    width: fit-content;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #ccfbf1;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-login-copy h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 900;
    line-height: 1.06;
}

.admin-login-copy p {
    margin: 0;
    color: rgba(226, 232, 240, .84);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.7;
}

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

.admin-login-status article {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
}

.admin-login-status strong {
    display: block;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.admin-login-status span {
    color: rgba(226, 232, 240, .72);
    font-size: .82rem;
    font-weight: 800;
}

.admin-login-v2 .admin-login-card {
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    gap: 18px;
    padding: clamp(30px, 4vw, 48px);
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.admin-login-v2 .admin-login-card::before {
    content: none;
}

.admin-login-v2 .login-card-head span {
    background: #ecfeff;
    color: #0f766e;
}

.admin-login-v2 .login-card-head h2 {
    font-size: clamp(1.8rem, 2.4vw, 2.45rem);
}

.admin-login-v2 .login-input-wrap {
    min-height: 56px;
    border-radius: 14px;
    background: #f8fafc;
}

.admin-login-v2 .login-input-wrap b {
    width: 46px;
    color: #0f766e;
}

.admin-login-v2 .login-input-wrap input {
    min-height: 56px;
    padding: 0 14px;
    font-size: .96rem;
}

.admin-login-v2 .login-submit {
    min-height: 54px;
    border-radius: 14px;
    font-size: .98rem;
}

.admin-login-foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    color: #94a3b8;
    font-size: .86rem;
    font-weight: 800;
}

.admin-login-v2 .login-back-link {
    color: #0f766e;
    text-align: right;
}

@media (max-width: 860px) {
    .admin-login-frame {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .admin-login-showcase {
        min-height: 320px;
    }

    .admin-login-status {
        display: none;
    }
}

@media (max-width: 520px) {
    .admin-login-v2 {
        padding: 12px !important;
    }

    .admin-login-frame {
        border-radius: 22px;
    }

    .admin-login-showcase,
    .admin-login-v2 .admin-login-card {
        padding: 24px;
    }

    .admin-login-copy h1 {
        font-size: 1.8rem;
    }

    .admin-login-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Login centrado sin panel lateral */
.admin-login-v3 {
    display: grid !important;
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .18), transparent 26rem),
        linear-gradient(135deg, #020817 0%, #0f172a 58%, #052e33 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    display: block !important;
    width: min(440px, 100%) !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    gap: 18px;
    padding: clamp(28px, 5vw, 42px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .36);
}

.admin-login-v3 .admin-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.admin-login-v3 .admin-login-logo {
    display: grid;
    width: 96px;
    height: 96px;
    margin: -78px auto 4px;
    place-items: center;
    overflow: hidden;
    border: 8px solid rgba(255,255,255,.98);
    border-radius: 28px;
    background: #0f172a;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .26);
}

.admin-login-v3 .admin-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.admin-login-v3 .admin-login-logo span {
    color: #5eead4;
    font-weight: 950;
}

.admin-login-v3 .login-card-head {
    text-align: center;
}

.admin-login-v3 .login-card-head span {
    margin: 0 auto;
}

.admin-login-v3 .login-card-head h2 {
    color: #0f172a;
    font-size: clamp(1.7rem, 4vw, 2.15rem);
}

.admin-login-v3 .login-card-head p {
    color: #64748b;
}

.admin-login-v3 .login-input-wrap {
    border-radius: 14px;
}

.admin-login-v3 .login-submit {
    border-radius: 14px;
}

.admin-login-v3 .admin-login-foot {
    justify-content: center;
    text-align: center;
}

.admin-login-v3 .admin-login-foot span {
    display: none;
}

@media (max-width: 520px) {
    .admin-login-v3 {
        padding: 18px !important;
    }

    .admin-login-v3 .admin-login-card {
        padding: 28px 22px;
    }

    .admin-login-v3 .admin-login-logo {
        width: 84px;
        height: 84px;
        margin-top: -66px;
        border-radius: 22px;
    }
}

/* Login final premium centrado */
.admin-login-v3 {
    background:
        radial-gradient(circle at 50% 18%, rgba(45, 212, 191, .14), transparent 18rem),
        linear-gradient(145deg, #08111f 0%, #0f172a 54%, #092f35 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    width: min(410px, 100%) !important;
}

.admin-login-v3 .admin-login-card {
    gap: 16px;
    padding: 38px 34px 30px;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 22px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 255, 255, .18);
}

.admin-login-v3 .admin-login-card::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 0;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #0f766e, #0ea5e9);
}

.admin-login-v3 .admin-login-logo {
    width: 82px;
    height: 82px;
    margin: -72px auto 6px;
    border: 6px solid #ffffff;
    border-radius: 24px;
    background:
        linear-gradient(135deg, #071827, #0f172a);
    box-shadow:
        0 20px 38px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(94, 234, 212, .18);
}

.admin-login-v3 .admin-login-logo img {
    padding: 7px;
}

.admin-login-v3 .login-card-head {
    gap: 7px;
    margin-bottom: 2px;
}

.admin-login-v3 .login-card-head span {
    padding: 5px 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: .68rem;
}

.admin-login-v3 .login-card-head h2 {
    font-size: 1.9rem;
    line-height: 1.1;
}

.admin-login-v3 .login-card-head p {
    font-size: .94rem;
    font-weight: 750;
}

.admin-login-v3 .admin-login-card label {
    gap: 8px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 950;
}

.admin-login-v3 .login-input-wrap {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 52px;
    border: 1px solid #d8e0ea;
    border-radius: 12px;
    background: #ffffff;
}

.admin-login-v3 .login-input-wrap b {
    width: 44px;
    color: #0f766e;
    background: #f0fdfa;
}

.admin-login-v3 .login-input-wrap input {
    min-height: 52px;
    color: #0f172a;
    font-weight: 750;
}

.admin-login-v3 .login-input-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.admin-login-v3 .login-input-wrap:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.admin-login-v3 .login-submit {
    min-height: 52px;
    margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f766e, #0284c7) !important;
    box-shadow: 0 16px 28px rgba(2, 132, 199, .22);
}

.admin-login-v3 .login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(2, 132, 199, .28);
}

.admin-login-v3 .login-back-link {
    color: #64748b;
    font-size: .86rem;
}

@media (max-width: 520px) {
    .admin-login-v3 .admin-login-card {
        padding: 34px 22px 26px;
    }
}

/* Login con imagen izquierda y formulario derecha */
.admin-login-v3 .admin-login-frame {
    display: grid !important;
    grid-template-columns: minmax(300px, .95fr) minmax(360px, 430px) !important;
    width: min(980px, 100%) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34) !important;
}

.admin-login-v3 .admin-login-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card::after {
    content: none !important;
}

.admin-login-image-panel {
    position: relative;
    display: grid;
    min-height: 560px;
    margin: 0;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .92), rgba(2, 8, 23, .94)),
        radial-gradient(circle at 28% 18%, rgba(94, 234, 212, .24), transparent 20rem);
}

.admin-login-image-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    pointer-events: none;
}

.admin-login-image-panel img,
.admin-login-image-panel figcaption {
    position: relative;
    z-index: 1;
}

.admin-login-image-panel img {
    width: min(76%, 360px);
    height: min(76%, 360px);
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .34));
}

.admin-login-image-panel figcaption {
    display: grid;
    width: 140px;
    height: 140px;
    place-items: center;
    border-radius: 34px;
    background: rgba(255,255,255,.12);
    color: #ccfbf1;
    font-size: 2.3rem;
    font-weight: 950;
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
    }

    .admin-login-image-panel {
        min-height: 220px;
    }

    .admin-login-image-panel img {
        width: min(54%, 220px);
        height: min(54%, 220px);
    }
}

/* Login presentable: acabado visual superior */
.admin-login-v3 {
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .22), transparent 23rem),
        radial-gradient(circle at 82% 72%, rgba(14, 165, 233, .18), transparent 24rem),
        linear-gradient(135deg, #020817 0%, #0f172a 58%, #042f2e 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    grid-template-columns: minmax(360px, 1.05fr) minmax(390px, .95fr) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.98)) !important;
    box-shadow:
        0 42px 110px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.14) !important;
}

.admin-login-image-panel {
    min-height: 600px;
    background:
        linear-gradient(145deg, rgba(8, 47, 73, .96) 0%, rgba(15, 118, 110, .94) 58%, rgba(2, 8, 23, .96) 100%) !important;
}

.admin-login-image-panel::before {
    inset: 22px;
    border-color: rgba(255,255,255,.18);
    border-radius: 26px;
}

.admin-login-image-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.07) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(94,234,212,.24), transparent 18rem);
    background-size: 44px 44px, 44px 44px, auto;
    opacity: .42;
    pointer-events: none;
}

.admin-login-image-panel img {
    width: min(72%, 390px);
    height: min(72%, 390px);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 34px;
    background: rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 30px 58px rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
}

.admin-login-v3 .admin-login-card {
    justify-content: center;
    padding: clamp(38px, 5vw, 56px);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.admin-login-v3 .admin-login-logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 2px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    background: #0f172a;
    box-shadow: 0 18px 36px rgba(15,23,42,.16);
}

.admin-login-v3 .login-card-head {
    margin-bottom: 8px;
}

.admin-login-v3 .login-card-head span {
    background: linear-gradient(135deg, rgba(15, 118, 110, .12), rgba(14, 165, 233, .1));
}

.admin-login-v3 .login-card-head h2 {
    font-size: 2.05rem;
}

.admin-login-v3 .admin-login-card label {
    gap: 9px;
}

.admin-login-v3 .login-input-wrap {
    min-height: 56px;
    border-color: #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.admin-login-v3 .login-password-wrap {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-login-v3 .login-input-wrap b {
    width: 48px;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
}

.admin-login-v3 .login-input-wrap input {
    min-height: 56px;
}

.admin-login-v3 .login-password-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 36px;
    margin-right: 8px;
    border: 1px solid #dbe4ef;
    border-radius: 50%;
    background: #f8fafc;
    color: #0f766e;
    cursor: pointer;
    font: inherit;
}

.admin-login-v3 .login-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-login-v3 .login-password-toggle:hover {
    border-color: #0ea5e9;
    background: #ecfeff;
}

.admin-login-v3 .login-password-toggle.is-visible {
    border-color: rgba(15, 118, 110, .34);
    background: #ccfbf1;
}

.admin-login-v3 .login-submit {
    min-height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%) !important;
    box-shadow: 0 18px 36px rgba(14, 165, 233, .24);
}

.admin-login-v3 .admin-login-foot {
    margin-top: 2px;
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
    }

    .admin-login-image-panel {
        min-height: 260px;
    }

    .admin-login-image-panel img {
        width: min(44%, 220px);
        height: min(44%, 220px);
        padding: 14px;
        border-radius: 24px;
    }
}

/* Presencia profesional para cliente */
.store-hero {
    min-height: 520px;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
}

.store-hero h1 {
    max-width: 820px;
    text-wrap: balance;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-proof span {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.92);
    font-weight: 800;
}

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

.feature-stats span {
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.84);
}

.feature-stats b {
    display: block;
    color: #fff;
    font-size: 1.35rem;
}

.brand-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--line);
}

.brand-strip span {
    display: grid;
    min-height: 62px;
    place-items: center;
    background: rgba(255,255,255,.86);
    color: #344054;
    font-weight: 900;
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(260px, .55fr);
    gap: 18px;
    align-items: end;
    margin-top: 34px;
}

.section-intro.compact {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0;
    margin-bottom: 16px;
}

.section-intro h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(1.8rem, 3.8vw, 3.3rem);
    line-height: 1.05;
    text-wrap: balance;
}

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

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

.category-tile {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 230px;
    align-content: end;
    gap: 10px;
    padding: 22px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #111827, #2563eb);
    box-shadow: 0 16px 38px rgba(16,24,40,.1);
}

.category-tile::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 34px solid rgba(255,255,255,.12);
}

.category-tile.herramienta_disenio { background: linear-gradient(145deg, #7c2d12, #f97316); }
.category-tile.herramienta_ia { background: linear-gradient(145deg, #1e1b4b, #14b8a6); }
.category-tile.productividad { background: linear-gradient(145deg, #0f172a, #2563eb); }
.category-tile.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }

.category-tile span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    font-weight: 900;
}

.category-tile strong {
    font-size: 1.25rem;
}

.category-tile p {
    margin: 0;
    color: rgba(255,255,255,.84);
    line-height: 1.45;
}

.featured-products {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 40px rgba(16,24,40,.06);
}

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

.featured-product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.featured-thumb {
    display: grid;
    min-height: 150px;
    place-items: center;
    background: linear-gradient(145deg, #111827, #2563eb);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.featured-thumb span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.2);
    font-size: 2rem;
    font-weight: 900;
}

.featured-product-card > div:last-child {
    display: grid;
    gap: 7px;
    padding: 14px;
}

.featured-product-card small {
    color: var(--primary-dark);
    font-weight: 800;
}

.featured-product-card h3 {
    min-height: 44px;
    margin: 0;
    line-height: 1.2;
}

.featured-product-card b {
    color: #f97316;
    font-size: 1.25rem;
}

.featured-product-card a {
    color: #16a34a;
    font-weight: 900;
}

.buy-process {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .65fr));
    gap: 16px;
    margin-top: 30px;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16,24,40,.06);
}

.buy-process h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1.08;
}

.buy-process article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.buy-process b {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
}

.buy-process span {
    color: var(--muted);
    line-height: 1.45;
}

.final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    padding: clamp(24px, 5vw, 42px);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(249,115,22,.95), rgba(37,99,235,.92)),
        url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1500&q=80") center/cover;
    color: #fff;
}

.final-cta h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.05;
}

.final-cta p:not(.eyebrow) {
    max-width: 640px;
    color: rgba(255,255,255,.86);
}

.final-cta .btn.primary {
    background: #fff;
    color: #111827;
}

@media (max-width: 1050px) {
    .brand-strip,
    .category-showcase,
    .featured-row,
    .buy-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buy-process > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .brand-strip,
    .category-showcase,
    .featured-row,
    .section-intro,
    .section-intro.compact,
    .buy-process {
        grid-template-columns: 1fr;
    }

    .store-hero {
        min-height: 0;
    }

    .final-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Administrador de tienda por categorias */
.admin-store-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.admin-store-dashboard article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}

.admin-store-dashboard strong {
    display: block;
    font-size: 2rem;
}

.admin-store-dashboard span,
.admin-category-filter span {
    color: var(--muted);
}

.admin-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 22px;
}

.admin-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.admin-sidebar span {
    padding: 2px 4px 8px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-sidebar button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.admin-sidebar button::after {
    content: ">";
    color: #94a3b8;
    font-weight: 900;
}

.admin-sidebar button:hover,
.admin-sidebar button.active {
    border-color: rgba(14, 165, 233, .2);
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(20, 184, 166, .1));
    color: #0f172a;
    transform: translateX(2px);
}

.admin-sidebar button.active::after {
    color: #0ea5e9;
}

.admin-workspace-content {
    min-width: 0;
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
}

.admin-tab-panel > .admin-config-panel,
.admin-tab-panel > .admin-category-filter:first-child {
    margin-top: 0;
}

.admin-config-panel {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.admin-config-panel > summary,
.admin-product-card-wrap > summary {
    cursor: pointer;
    list-style: none;
}

.admin-config-panel > summary::-webkit-details-marker,
.admin-product-card-wrap > summary::-webkit-details-marker {
    display: none;
}

.admin-config-panel > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.admin-config-panel > summary span {
    font-size: 1.15rem;
    font-weight: 900;
}

.admin-config-panel > summary b {
    color: var(--muted);
}

.admin-config-panel .form-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.admin-crud-overview {
    padding: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.admin-crud-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.admin-crud-table th,
.admin-crud-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    color: #475569;
    font-size: .9rem;
    font-weight: 750;
    text-align: left;
    vertical-align: middle;
}

.admin-crud-table th {
    background: #f1f5f9;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-crud-table tr:last-child td {
    border-bottom: 0;
}

.admin-crud-table td:nth-child(2) {
    max-width: 320px;
    overflow: hidden;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-crud-table td:last-child {
    width: 170px;
}

.admin-crud-name {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 180px;
}

.admin-crud-name strong {
    color: #0f172a;
    font-size: .94rem;
    font-weight: 950;
}

.admin-crud-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(20, 184, 166, .12));
    color: #0f766e;
    font-weight: 950;
}

.admin-crud-preview.logo {
    background: #0f172a;
}

.admin-crud-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.admin-crud-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.admin-crud-actions button,
.admin-crud-actions a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 950;
    text-decoration: none;
}

.admin-crud-actions .crud-add {
    color: #065f46;
    background: #dcfce7;
}

.admin-crud-actions .crud-edit {
    color: #075985;
    background: #e0f2fe;
}

.admin-crud-actions .crud-delete {
    color: #991b1b;
    background: #fee2e2;
}

.admin-crud-actions .crud-view {
    color: #4338ca;
    background: #eef2ff;
}

.admin-crud-actions button:hover,
.admin-crud-actions a:hover {
    border-color: rgba(14, 165, 233, .35);
    background: rgba(14, 165, 233, .1);
}

.admin-category-filter {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(360px, 1fr);
    gap: 18px;
    align-items: end;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.admin-category-filter h2 {
    margin: 4px 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.admin-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto auto;
    gap: 10px;
}

.admin-category-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 2px 4px;
    margin-top: 10px;
}

.admin-category-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 900;
}

.admin-category-tabs a.active,
.admin-category-tabs a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.admin-category-tabs b {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
}

.admin-category-tabs a.active b,
.admin-category-tabs a:hover b {
    background: rgba(255,255,255,.2);
}

.admin-products {
    grid-template-columns: 1fr;
}

.admin-product-card-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .05);
}

.admin-product-card-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
}

.admin-product-card-wrap[open] > summary {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.admin-product-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-width: 0;
}

.admin-product-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-product-summary small {
    grid-column: 2;
    color: var(--muted);
}

.admin-dot {
    grid-row: 1 / span 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
}

.admin-dot.on {
    background: #16a34a;
}

.admin-summary-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-summary-badges span,
.admin-summary-badges b {
    padding: 8px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .86rem;
}

.admin-summary-badges b {
    background: #fef3c7;
    color: #92400e;
}

.admin-product-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-product-preview {
    position: relative;
}

.admin-product-preview em {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #111827;
    font-style: normal;
    font-weight: 900;
}

.admin-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.image-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 700;
}

.image-current a {
    overflow: hidden;
    max-width: 100%;
    color: #0f766e;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-admin-box {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 700;
}

.logo-admin-preview {
    display: grid;
    width: 180px;
    height: 128px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.logo-admin-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.logo-admin-preview b {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 14px;
    background: #0f766e;
    color: #fff;
    font-size: 1.5rem;
}

.logo-admin-box small {
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 980px) {
    .admin-store-dashboard,
    .admin-workspace,
    .admin-category-filter,
    .admin-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-sidebar span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .admin-store-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-product-card-wrap > summary,
    .admin-summary-badges {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-sidebar {
        grid-template-columns: 1fr;
    }
}

/* Rediseño limpio de tienda publica */
:root {
    --clean-bg: #f6f7fb;
    --clean-surface: #ffffff;
    --clean-ink: #111827;
    --clean-muted: #667085;
    --clean-line: #e4e7ec;
    --clean-brand: #0f766e;
    --clean-brand-dark: #0f4f49;
    --clean-accent: #f59e0b;
}

body {
    background: var(--clean-bg);
    color: var(--clean-ink);
}

.promo-strip {
    background: #0f172a;
    color: #fff;
}

.topbar {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--clean-line);
    box-shadow: none;
}

.brand-mark {
    border-radius: 12px;
    background: #0f766e;
}

.nav a:hover {
    background: #f0fdfa;
    color: var(--clean-brand-dark);
}

.clean-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .7fr);
    gap: 28px;
    align-items: stretch;
    min-height: 520px;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(15, 118, 110, .8)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.clean-hero-copy {
    display: grid;
    align-content: center;
    gap: 18px;
}

.clean-kicker {
    color: #fbbf24;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clean-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    line-height: .96;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.clean-hero p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.65;
}

.clean-actions,
.clean-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clean-trust span {
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-weight: 800;
}

.clean-hero-panel {
    align-self: center;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.panel-top,
.hero-product-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.panel-top {
    padding-bottom: 8px;
    color: rgba(255,255,255,.84);
}

.hero-product-line {
    padding: 13px;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    color: var(--clean-ink);
}

.hero-product-line > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: #ecfdf5;
    color: var(--clean-brand);
    font-weight: 900;
}

.hero-product-line div {
    min-width: 0;
    flex: 1;
}

.hero-product-line strong,
.hero-product-line small {
    display: block;
}

.hero-product-line strong {
    letter-spacing: -.02em;
}

.hero-product-line small {
    color: var(--clean-muted);
}

.hero-product-line b {
    color: var(--clean-brand-dark);
    white-space: nowrap;
}

.clean-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.tools-marquee-section {
    margin-top: 26px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.88)),
        #fff;
    box-shadow: 0 18px 42px rgba(15,23,42,.07);
}

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

.marquee-heading h2 {
    max-width: 620px;
    margin: 4px 0 0;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.tools-marquee {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
}

.tools-marquee::before,
.tools-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(90px, 12vw);
    pointer-events: none;
}

.tools-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}

.tools-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

.tools-marquee-track {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: toolsMarquee 34s linear infinite;
    will-change: transform;
}

.tools-marquee:hover .tools-marquee-track {
    animation-play-state: paused;
}

.marquee-tool {
    display: grid;
    width: clamp(150px, 17vw, 210px);
    flex: 0 0 auto;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.marquee-tool.image-only {
    padding: 0;
    overflow: hidden;
}

.marquee-tool.image-only .marquee-image {
    width: 100%;
    height: 100%;
    border-radius: 22px;
}

.marquee-tool:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(15,23,42,.12);
}

.marquee-image {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a, #0f766e);
}

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

.marquee-image b {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
}

.marquee-tool strong {
    overflow: hidden;
    color: #101828;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marquee-tool small {
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
}

@keyframes toolsMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 8px));
    }
}

@media (max-width: 760px) {
    .tools-marquee-section {
        padding: 16px;
        border-radius: 22px;
    }

    .marquee-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tools-marquee-track {
        gap: 12px;
        animation-duration: 28s;
    }

    .marquee-tool {
        width: 150px;
        border-radius: 18px;
    }
}

.promo-carousel {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    border-radius: 22px;
    background: #0f172a;
    color: #fff;
}

.carousel-track {
    position: relative;
    min-height: clamp(300px, 34vw, 420px);
}

.promo-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    padding: clamp(22px, 5vw, 52px);
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.promo-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.promo-slide:nth-child(1) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,118,110,.76)),
        url("https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide:nth-child(2) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.94), rgba(249,115,22,.72)),
        url("https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide:nth-child(3) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.95), rgba(37,99,235,.72)),
        url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide div {
    max-width: min(680px, 100%);
}

.promo-slide h2 {
    margin: 8px 0 12px;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.promo-slide p {
    max-width: 560px;
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    font-size: 1.04rem;
    font-weight: 500;
}

.carousel-controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-controls button,
.mini-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 900;
}

.carousel-dots {
    display: flex;
    gap: 6px;
}

.carousel-dots button {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
}

.carousel-dots button.active {
    width: 28px;
    background: #fbbf24;
}

.featured-carousel-block {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--clean-line);
    border-radius: 22px;
    background: #fff;
}

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

.carousel-heading h2 {
    margin: 4px 0 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.mini-controls {
    display: flex;
    gap: 8px;
}

.mini-controls button {
    border-color: var(--clean-line);
    background: #f8fafc;
    color: var(--clean-ink);
}

.featured-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 28vw, 320px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.featured-rail::-webkit-scrollbar {
    height: 8px;
}

.featured-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.rail-card {
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--clean-line);
    border-radius: 18px;
    background: #fff;
}

.rail-media {
    position: relative;
    display: grid;
    min-height: 210px;
    aspect-ratio: 16 / 11;
    place-items: center;
    padding: 0;
    background: linear-gradient(145deg, #0f172a, #0f766e);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.rail-media.herramienta_disenio { background: linear-gradient(145deg, #334155, #f97316); }
.rail-media.herramienta_ia { background: linear-gradient(145deg, #172554, #14b8a6); }
.rail-media.productividad { background: linear-gradient(145deg, #1e293b, #2563eb); }
.rail-media.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }

.rail-media b {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    font-size: 2.2rem;
}

.rail-media img,
.clean-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.rail-media span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-weight: 900;
}

.rail-info {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.rail-info small {
    color: var(--clean-brand);
    font-weight: 900;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rail-info h3 {
    min-height: 44px;
    margin: 0;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.rail-info div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rail-info del {
    color: #98a2b3;
}

.rail-info strong {
    color: var(--clean-brand-dark);
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.rail-info a {
    color: #16a34a;
    font-weight: 900;
}

.stock-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 900;
}

.stock-pill.in {
    background: #dcfce7;
    color: #15803d;
}

.stock-pill.out {
    background: #fee2e2;
    color: #b91c1c;
}

.btn.disabled {
    background: #64748b;
}

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

.help-strip article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--clean-line);
    border-radius: 16px;
    background: #fff;
}

.help-strip b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
}

.help-strip span {
    font-weight: 900;
    letter-spacing: -.015em;
}

.promo-strip {
    font-size: .88rem;
    letter-spacing: -.01em;
}

input,
select,
textarea {
    font-size: .95rem;
}

label {
    font-size: .9rem;
}

.clean-categories a {
    padding: 11px 15px;
    border: 1px solid var(--clean-line);
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.clean-categories a.active,
.clean-categories a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.clean-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.clean-benefits article {
    padding: 20px;
    border: 1px solid var(--clean-line);
    border-radius: 18px;
    background: #fff;
}

.clean-benefits strong,
.clean-benefits span {
    display: block;
}

.clean-benefits strong {
    font-size: 1.04rem;
    letter-spacing: -.02em;
}

.clean-benefits span {
    margin-top: 8px;
    color: var(--clean-muted);
    line-height: 1.5;
}

.catalog-head {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: end;
    margin-top: 38px;
}

.catalog-head h2 {
    margin: 6px 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.catalog-head p {
    margin: 0;
    color: var(--clean-muted);
}

.clean-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px auto;
    gap: 10px;
}

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

.clean-product-card {
    overflow: hidden;
    border: 1px solid var(--clean-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .06);
}

.clean-product-media {
    position: relative;
    display: grid;
    min-height: 260px;
    aspect-ratio: 16 / 11;
    place-items: center;
    padding: 0;
    background: linear-gradient(145deg, #0f172a, #0f766e);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    border-bottom: 1px solid var(--clean-line);
}

.clean-product-media.herramienta_disenio { background: linear-gradient(145deg, #334155, #f97316); }
.clean-product-media.herramienta_ia { background: linear-gradient(145deg, #172554, #14b8a6); }
.clean-product-media.productividad { background: linear-gradient(145deg, #1e293b, #2563eb); }
.clean-product-media.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }
.clean-product-media.streaming_video { background: linear-gradient(145deg, #7f1d1d, #ef4444); }
.clean-product-media.streaming_musica { background: linear-gradient(145deg, #064e3b, #22c55e); }
.clean-product-media.entretenimiento { background: linear-gradient(145deg, #312e81, #a855f7); }

.rail-media:has(img),
.clean-product-media:has(img) {
    background: transparent;
}

.clean-product-media > span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-weight: 900;
}

.clean-product-media > b {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    font-size: 2.4rem;
}

.clean-product-info {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.clean-product-info small {
    color: var(--clean-brand);
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clean-product-info h3 {
    min-height: 48px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.tool-name {
    position: relative;
    min-height: 54px;
    padding-bottom: 10px;
}

.tool-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #f59e0b);
}

.product-commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(245,158,11,.16), transparent 8rem),
        linear-gradient(135deg, rgba(15,118,110,.08), rgba(20,184,166,.06)),
        #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.price-box {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3px;
}

.price-box > span {
    color: #667085;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.price-box div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.price-box del {
    color: #98a2b3;
    font-size: .92rem;
    font-weight: 700;
}

.price-box strong {
    color: #0f766e;
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.service-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service-note span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: -.01em;
    text-align: center;
}

.buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    font-weight: 950;
    letter-spacing: -.01em;
    box-shadow: 0 12px 24px rgba(22, 163, 74, .22);
    transition: transform .16s ease, box-shadow .16s ease;
}

.buy-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(22, 163, 74, .3);
}

.buy-button span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.buy-button span::after {
    content: "→";
    font-size: 1.1rem;
    line-height: 1;
}

.buy-button.disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    box-shadow: none;
}

.clean-product-info p {
    min-height: 64px;
    margin: 0;
    color: var(--clean-muted);
    line-height: 1.45;
    font-size: .94rem;
}

.clean-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.clean-price del {
    color: #98a2b3;
}

.clean-price strong {
    color: var(--clean-brand-dark);
    font-size: 1.4rem;
    letter-spacing: -.035em;
}

.btn.whatsapp {
    background: #16a34a;
    color: #fff;
}

.clean-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 34px;
    padding: 30px;
    border-radius: 22px;
    background: #0f172a;
    color: #fff;
}

.clean-cta h2 {
    margin: 6px 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.clean-cta p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

@media (max-width: 1120px) {
    .clean-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .clean-hero,
    .catalog-head,
    .clean-benefits {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .promo-carousel {
        border-radius: 18px;
    }

    .carousel-track {
        min-height: 430px;
    }

    .promo-slide {
        align-items: start;
        padding: 28px 20px 86px;
    }

    .promo-slide h2 {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
    }

    .promo-slide p {
        font-size: .98rem;
    }

    .featured-carousel-block {
        padding: 16px;
    }

    .carousel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .featured-rail {
        grid-auto-columns: minmax(78%, 1fr);
        gap: 12px;
        margin-inline: -4px;
        padding-inline: 4px;
    }
}

@media (max-width: 620px) {
    .clean-search,
    .clean-product-grid {
        grid-template-columns: 1fr;
    }

    .clean-hero {
        min-height: 0;
    }

    .clean-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .carousel-controls {
        right: 14px;
        bottom: 14px;
        left: 14px;
        justify-content: space-between;
    }

    .carousel-dots {
        order: 2;
    }

    .carousel-controls button {
        width: 40px;
        height: 40px;
    }

    .help-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .carousel-track {
        min-height: 470px;
    }

    .promo-slide {
        padding: 24px 16px 90px;
    }

    .promo-slide .btn {
        width: 100%;
    }

    .featured-rail {
        grid-auto-columns: 88%;
    }
}

.public-site .cart-page {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 5vw, 54px) 0 40px;
}

.public-site .cart-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.public-site .cart-page-heading h1 {
    margin: 8px 0 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
}

.public-site .cart-page-heading p {
    margin: 12px 0 0;
    color: rgba(226, 232, 240, .72);
}

.public-site .cart-continue-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(125, 211, 252, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #dff9ff;
    font-weight: 850;
}

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

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

.public-site .cart-item,
.public-site .cart-summary {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(7, 17, 31, .72);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

.public-site .cart-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
}

.public-site .cart-item-image {
    display: grid;
    width: 86px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 950;
}

.public-site .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-site .cart-item-info small,
.public-site .cart-item-info span {
    color: rgba(226, 232, 240, .58);
    font-size: .78rem;
}

.public-site .cart-item-info h2 {
    margin: 4px 0;
    color: #ffffff;
    font-size: 1rem;
}

.public-site .cart-item-quantity {
    display: grid;
    gap: 5px;
    color: rgba(226, 232, 240, .68);
    font-size: .72rem;
    font-weight: 800;
}

.public-site .cart-item-quantity select {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(125, 211, 252, .25);
    border-radius: 9px;
    background: #0b1627;
    color: #ffffff;
    font: inherit;
    font-weight: 850;
}

.public-site .cart-item-subtotal {
    min-width: 86px;
    color: #ffffff;
    font-size: .92rem;
    text-align: right;
}

.public-site .cart-item-actions {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.public-site .cart-item-actions a,
.public-site .cart-item-actions button {
    border: 0;
    background: transparent;
    color: #7dd3fc;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
}

.public-site .cart-item-actions button:hover,
.public-site .cart-item-actions a:hover {
    color: #facc15;
}

.public-site .cart-summary {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 12px;
    padding: 22px;
}

.public-site .cart-summary > span {
    color: #7dd3fc;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.public-site .cart-summary > strong {
    color: #ffffff;
    font-size: 1.15rem;
}

.public-site .cart-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.public-site .cart-summary-total small,
.public-site .cart-summary p {
    color: rgba(226, 232, 240, .62);
    font-size: .8rem;
}

.public-site .cart-summary-total b {
    color: #ffffff;
    font-size: 1.2rem;
}

.public-site .cart-summary p {
    margin: 0;
    line-height: 1.5;
}

.public-site .cart-summary-button,
.public-site .cart-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    background: #1fd8ff;
    color: #07111f;
    font-weight: 950;
}

.public-site .cart-summary-button {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.public-site .cart-checkout {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    padding: 26px;
    border: 1px solid rgba(31, 216, 255, .24);
    border-radius: 18px;
    background: rgba(7, 17, 31, .84);
}

.public-site .cart-checkout[hidden] {
    display: none;
}

.public-site .cart-checkout h2 {
    margin: 8px 0 0;
    color: #ffffff;
}

.public-site .cart-checkout p {
    margin: 8px 0 0;
    color: rgba(226, 232, 240, .68);
}

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

.public-site .cart-checkout-form label {
    display: grid;
    gap: 6px;
    color: rgba(226, 232, 240, .76);
    font-size: .8rem;
    font-weight: 850;
}

.public-site .cart-checkout-form input {
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font: inherit;
}

.public-site .cart-checkout-form input:focus {
    outline: 3px solid rgba(31, 216, 255, .16);
    border-color: #1fd8ff;
}

.public-site .cart-checkout-submit {
    grid-column: 1 / -1;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #1fd8ff, #22c55e);
    color: #07111f;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.public-site .cart-checkout-message {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 800;
}

.public-site .cart-checkout-message.is-error {
    background: rgba(248, 113, 113, .14);
    color: #fecaca;
}

.public-site .cart-checkout-message.is-success {
    background: rgba(74, 222, 128, .14);
    color: #bbf7d0;
}

.public-site .cart-loading,
.public-site .cart-empty {
    padding: 48px 24px;
    border: 1px dashed rgba(125, 211, 252, .3);
    border-radius: 18px;
    color: rgba(226, 232, 240, .72);
    text-align: center;
}

.public-site .cart-empty i {
    color: #1fd8ff;
    font-size: 2rem;
}

.public-site .cart-empty h2 {
    margin: 12px 0 6px;
    color: #ffffff;
}

.public-site .cart-empty p {
    margin: 0 0 18px;
}

.public-site .cart-empty a {
    width: fit-content;
    padding: 0 16px;
}

@media (max-width: 900px) {
    .public-site .cart-layout {
        grid-template-columns: 1fr;
    }

    .public-site .cart-summary {
        position: static;
    }
}

@media (max-width: 620px) {
    .public-site .cart-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .cart-item {
        grid-template-columns: 70px minmax(0, 1fr) auto;
    }

    .public-site .cart-item-image {
        width: 70px;
        height: 58px;
    }

    .public-site .cart-item-quantity {
        grid-column: 2;
    }

    .public-site .cart-item-subtotal {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
    }

    .public-site .cart-item-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .public-site .cart-checkout {
        padding: 20px;
    }

    .public-site .cart-checkout-form {
        grid-template-columns: 1fr;
    }

    .public-site .cart-checkout-submit {
        grid-column: auto;
    }
}

/* Capa final: imagenes estables para cualquier proporcion */
.rail-media,
.clean-product-media,
.admin-product-preview {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.rail-media {
    display: block !important;
    min-height: 220px !important;
    aspect-ratio: 16 / 11 !important;
    padding: 0 !important;
}

.clean-product-media {
    display: block !important;
    min-height: 270px !important;
    aspect-ratio: 16 / 11 !important;
    padding: 0 !important;
}

.rail-media img,
.clean-product-media img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    image-rendering: auto;
    transform: translateZ(0);
}

.rail-media::after,
.clean-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 58%, rgba(15, 23, 42, .24));
    pointer-events: none;
}

.rail-media > span,
.clean-product-media > span,
.rail-media > b,
.clean-product-media > b {
    position: relative;
    z-index: 2;
}

.rail-media.image-error,
.clean-product-media.image-error {
    background: linear-gradient(145deg, #0f172a, #0f766e);
}

.rail-media.image-error::before,
.clean-product-media.image-error::before {
    content: "Sin imagen";
    position: relative;
    z-index: 2;
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 900;
}

@media (max-width: 620px) {
    .rail-media {
        min-height: 200px;
    }

    .clean-product-media {
        min-height: 240px;
    }
}

/* Imagenes de producto definitivas: componente aislado */
.store-image-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
    isolation: isolate;
}

.store-image-frame--rail {
    aspect-ratio: 16 / 10 !important;
    min-height: 210px !important;
}

.store-image-frame--product {
    aspect-ratio: 16 / 10 !important;
    min-height: 260px !important;
}

.store-image-frame img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.store-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,23,42,0) 62%, rgba(15,23,42,.24));
    pointer-events: none;
}

.store-image-frame > span {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #fbbf24 !important;
    color: #111827 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.store-image-frame figcaption {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

.store-image-frame.image-error::before {
    content: "Sin imagen";
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 110px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 900;
}

@media (max-width: 620px) {
    .store-image-frame--rail {
        min-height: 190px !important;
    }

    .store-image-frame--product {
        min-height: 230px !important;
    }
}

/* Carrusel Productos populares: imagen estable al actualizar */
.popular-image-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 210px !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
    border-radius: 0 !important;
    isolation: isolate;
}

.popular-image-frame img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.popular-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,23,42,0) 62%, rgba(15,23,42,.24));
    pointer-events: none;
}

.popular-image-frame > span {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #fbbf24 !important;
    color: #111827 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.popular-image-frame figcaption,
.popular-image-frame.image-error::before {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

.popular-image-frame.image-error::before {
    content: "Sin imagen";
    width: 110px;
    font-size: .92rem;
}

@media (max-width: 760px) {
    .popular-image-frame {
        min-height: 190px !important;
    }
}

/* Capa visual final: diseño mas llamativo y profesional */
body {
    background:
        radial-gradient(circle at top left, rgba(20,184,166,.12), transparent 30rem),
        radial-gradient(circle at top right, rgba(245,158,11,.13), transparent 28rem),
        #f6f7fb;
}

.topbar {
    background: rgba(255,255,255,.9) !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(18px);
}

.brand-logo {
    border: 1px solid rgba(15,118,110,.12) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

.clean-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 76% 24%, rgba(251,191,36,.32), transparent 22rem),
        linear-gradient(135deg, rgba(15,23,42,.94), rgba(15,118,110,.82)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1600&q=80") center/cover !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.18);
}

.clean-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 42px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.clean-hero-copy,
.clean-hero-panel {
    position: relative;
    z-index: 1;
}

.clean-hero-panel {
    border-radius: 24px !important;
    background: rgba(255,255,255,.15) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.18);
}

.hero-product-line,
.clean-benefits article,
.help-strip article,
.rail-card,
.clean-product-card {
    box-shadow: 0 14px 32px rgba(15,23,42,.07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.hero-product-line:hover,
.rail-card:hover,
.clean-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(15,23,42,.13);
}

.clean-categories a.active,
.clean-categories a:hover {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(15,118,110,.22);
}

.promo-carousel {
    border-radius: 28px !important;
    box-shadow: 0 20px 48px rgba(15,23,42,.14);
}

.featured-carousel-block {
    border-radius: 26px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.rail-card,
.clean-product-card {
    border-radius: 24px !important;
}

.clean-cta {
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.22), transparent 20rem),
        linear-gradient(135deg, #0f172a, #0f766e) !important;
    box-shadow: 0 22px 50px rgba(15,23,42,.16);
}

/* Capa premium final para datos de producto */
.clean-product-info {
    gap: 14px !important;
    padding: 18px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fbfcfe 100%) !important;
}

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

.product-card-head span,
.product-card-head b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.product-card-head span {
    background: #ecfdf5;
    color: #0f766e;
}

.product-card-head b {
    background: #fff7ed;
    color: #c2410c;
}

.tool-name {
    min-height: 58px !important;
    margin-top: -2px !important;
    color: #0f172a !important;
    font-size: 1.22rem !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

.tool-name::after {
    width: 62px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0f766e, #14b8a6, #f59e0b) !important;
}

.clean-product-info p {
    min-height: 58px !important;
    color: #667085 !important;
    font-size: .93rem !important;
    line-height: 1.45 !important;
}

.product-commerce {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 118, 110, .12) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.95)),
        #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 24px rgba(15,23,42,.05);
}

.price-box {
    display: grid !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}

.price-box > span {
    color: #0f766e !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
}

.price-box div {
    justify-content: flex-start !important;
}

.price-box strong {
    color: #0b3b36 !important;
    font-size: 1.86rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}

.stock-status > span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(22,163,74,.12);
}

.stock-status.in > span {
    background: #16a34a;
}

.stock-status.out > span {
    background: #dc2626;
    box-shadow: 0 0 0 5px rgba(220,38,38,.12);
}

.stock-status small,
.stock-status strong {
    display: block;
}

.stock-status small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stock-status strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.service-note,
.product-assurance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-assurance span,
.service-note span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
    text-align: center;
}

.service-note span {
    border: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #475467;
}

.product-assurance span {
    border: 1px solid rgba(15,118,110,.14);
    background: rgba(15,118,110,.06);
    color: #0f766e;
}

.buy-button {
    min-height: 54px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, #128c7e, #25d366) !important;
    color: #fff !important;
    font-size: .98rem !important;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .26) !important;
}

.buy-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 38px rgba(37, 211, 102, .34) !important;
}

.buy-button.disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
    box-shadow: none !important;
}

@media (max-width: 520px) {
    .product-commerce,
    .service-note,
    .product-assurance {
        grid-template-columns: 1fr !important;
    }

    .stock-pill {
        width: 100% !important;
        justify-content: center !important;
    }

    .stock-status {
        justify-content: center;
    }
}

/* Tarjetas de producto premium: capa limpia y aislada */
.clean-product-grid {
    align-items: stretch;
}

.premium-product-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.premium-product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 118, 110, .22);
    box-shadow: 0 26px 56px rgba(15, 23, 42, .14);
}

.premium-product-card .store-image-frame {
    flex: 0 0 auto;
    min-height: 250px !important;
    aspect-ratio: 16 / 10 !important;
}

.premium-product-body {
    display: flex;
    min-height: 430px;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.premium-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.premium-product-meta span,
.premium-product-meta b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.premium-product-meta span {
    background: #ecfdf5;
    color: #0f766e;
}

.premium-product-meta b {
    background: #fff7ed;
    color: #c2410c;
}

.premium-product-title {
    min-height: 58px;
    margin: 0;
    color: #101828;
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.premium-product-desc {
    min-height: 62px;
    margin: 0;
    color: #667085;
    font-size: .94rem;
    line-height: 1.48;
}

.premium-purchase-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(138px, .58fr);
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .08), rgba(255, 255, 255, .96)),
        #fff;
}

.premium-price,
.premium-stock {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.premium-price > span,
.premium-stock small {
    display: block;
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-price div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.premium-price del {
    color: #98a2b3;
    font-size: .9rem;
    font-weight: 750;
}

.premium-price strong {
    color: #0b3b36;
    font-size: 1.78rem;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.045em;
}

.premium-stock {
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-stock > span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
}

.premium-stock.in > span {
    background: #16a34a;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, .12);
}

.premium-stock.out > span {
    background: #dc2626;
    box-shadow: 0 0 0 5px rgba(220, 38, 38, .12);
}

.premium-stock strong {
    display: block;
    overflow: hidden;
    color: #101828;
    font-size: .88rem;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.premium-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.premium-perks span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: .76rem;
    font-weight: 850;
    text-align: center;
}

.premium-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: -.01em;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .26);
    transition: transform .16s ease, box-shadow .16s ease;
}

.premium-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(37, 211, 102, .34);
}

.premium-buy span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.premium-buy span::after {
    content: "→";
    font-size: 1.1rem;
    line-height: 1;
}

.premium-buy.is-disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    box-shadow: none;
}

.public-site .premium-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 12px;
}

.public-site .product-quantity-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: #475467;
    font-size: .82rem;
    font-weight: 850;
}

.public-site .product-quantity-field select {
    min-width: 72px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.public-site .product-quantity-field small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 750;
}

.public-site .product-quantity-control {
    display: grid;
    grid-template-columns: 34px 48px 34px;
    gap: 4px;
    align-items: center;
}

.public-site .product-quantity-control button,
.public-site .product-quantity-control input {
    height: 36px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-weight: 900;
    text-align: center;
}

.public-site .product-quantity-control button {
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.public-site .product-quantity-control button:hover,
.public-site .product-quantity-control button:focus-visible {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
}

.public-site .product-quantity-control input {
    width: 48px;
    border-radius: 9px;
}

.public-site .product-quantity-control input::-webkit-inner-spin-button,
.public-site .product-quantity-control input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.public-site .product-quantity-control input:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .2);
    border-color: #0284c7;
}

.public-site .product-quantity-field select:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .2);
    border-color: #0284c7;
}

.public-site .premium-product-actions .premium-buy,
.public-site .add-cart-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    font-size: .82rem;
}

.public-site .premium-product-actions .premium-buy {
    padding: 0 10px;
}

.public-site .add-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(14, 165, 233, .34);
    background: #e0f2fe;
    color: #0369a1;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.public-site .add-cart-button:hover,
.public-site .add-cart-button:focus-visible,
.public-site .add-cart-button.is-added {
    border-color: #0284c7;
    background: #0284c7;
    color: #ffffff;
    transform: translateY(-2px);
}

.public-site .add-cart-button.is-added i::before {
    content: "\f00c";
}

@media (max-width: 430px) {
    .public-site .premium-product-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .premium-product-body {
        min-height: 450px;
    }
}

@media (max-width: 620px) {
    .premium-product-card .store-image-frame {
        min-height: 220px !important;
    }

    .premium-product-body {
        min-height: auto;
    }

    .premium-purchase-panel,
    .premium-perks {
        grid-template-columns: 1fr;
    }
}

/* Identidad tipografica publica */
body {
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #101828;
}

h1,
h2,
h3,
.brand strong,
.clean-hero h1,
.catalog-head h2,
.carousel-heading h2,
.promo-slide h2,
.premium-product-title,
.price-box strong,
.premium-price strong {
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

.brand strong {
    font-size: 1.14rem !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
}

.brand small {
    color: #667085 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
}

.nav a {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
}

.clean-kicker {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    color: #fbbf24 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.clean-hero h1 {
    max-width: 880px !important;
    font-size: clamp(2.65rem, 5.6vw, 5.35rem) !important;
    font-weight: 900 !important;
    line-height: .94 !important;
    letter-spacing: -.07em !important;
}

.clean-hero p,
.promo-slide p {
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    line-height: 1.72 !important;
    letter-spacing: -.018em !important;
}

.promo-slide h2,
.catalog-head h2,
.carousel-heading h2 {
    font-weight: 900 !important;
    letter-spacing: -.065em !important;
}

.clean-categories a,
.hero-product-line strong,
.premium-product-meta span,
.premium-product-meta b,
.premium-perks span,
.premium-buy {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

.premium-product-title {
    color: #0b1220 !important;
    font-size: 1.32rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.055em !important;
}

.premium-product-desc {
    color: #5f6b7a !important;
    font-size: .96rem !important;
    font-weight: 600 !important;
    line-height: 1.58 !important;
    letter-spacing: -.015em !important;
}

.premium-product-meta span,
.premium-product-meta b {
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
}

.premium-price > span,
.premium-stock small {
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

.premium-price strong {
    color: #0f4f49 !important;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
}

.premium-stock strong {
    font-size: .92rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

.premium-buy {
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

.stock-pill,
.price-box,
.buy-button,
.btn {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

@media (max-width: 620px) {
    .clean-hero h1 {
        font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
        letter-spacing: -.06em !important;
    }

    .premium-product-title {
        font-size: 1.2rem !important;
    }
}

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

/* Hero comercial premium */
.clean-hero {
    isolation: isolate;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .72fr) !important;
    gap: clamp(22px, 4vw, 42px) !important;
    min-height: 590px !important;
    padding: clamp(30px, 5vw, 70px) !important;
    border: 0 !important;
    border-radius: 34px !important;
    background:
        linear-gradient(120deg, rgba(4, 12, 24, .96) 0%, rgba(9, 36, 45, .91) 47%, rgba(15, 118, 110, .82) 100%),
        url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=82") center/cover !important;
    box-shadow: 0 34px 78px rgba(15, 23, 42, .24) !important;
}

.clean-hero::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 26px;
    pointer-events: none;
}

.clean-hero::after {
    right: -70px !important;
    bottom: -135px !important;
    width: 390px !important;
    height: 390px !important;
    border-color: rgba(45, 212, 191, .14) !important;
}

.clean-hero-copy {
    max-width: 920px;
    gap: 20px !important;
}

.hero-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hero-live-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px 0 30px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .01em;
    backdrop-filter: blur(12px);
}

.hero-live-dot::before {
    content: "";
    position: absolute;
    left: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .15);
}

.hero-main-title {
    max-width: 900px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.75rem, 5.25vw, 5.55rem) !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    letter-spacing: -.064em !important;
}

.hero-main-title span {
    background: linear-gradient(90deg, #ffffff 0%, #ecfeff 52%, #fde68a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.hero-lead {
    max-width: 720px !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: clamp(1rem, 1.55vw, 1.18rem) !important;
    font-weight: 650 !important;
    line-height: 1.7 !important;
}

.clean-actions {
    margin-top: 2px;
}

.clean-actions .btn {
    min-height: 50px;
    padding-inline: 18px;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.clean-actions .btn.primary {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #111827 !important;
    box-shadow: 0 18px 34px rgba(245, 158, 11, .28) !important;
}

.clean-actions .btn.ghost {
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 660px;
}

.hero-metrics article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
}

.hero-metrics strong,
.hero-metrics span {
    display: block;
}

.hero-metrics strong {
    color: #fef3c7;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.hero-metrics span {
    margin-top: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    font-weight: 800;
}

.clean-trust {
    gap: 9px !important;
}

.clean-trust span {
    min-height: 36px;
    padding: 0 13px !important;
    border-color: rgba(45, 212, 191, .22) !important;
    background: rgba(15, 118, 110, .28) !important;
    color: rgba(255, 255, 255, .92);
    font-size: .84rem;
    letter-spacing: -.01em;
}

.clean-hero-panel {
    align-self: center !important;
    gap: 11px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .11)) !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(22px);
}

.panel-top {
    padding: 2px 4px 8px !important;
}

.panel-top span {
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.panel-top b {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: #fde68a;
    font-size: .74rem;
    font-weight: 900;
}

.hero-product-line {
    min-height: 74px;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 16px 32px rgba(4, 12, 24, .12) !important;
}

.hero-product-line:hover {
    transform: translateY(-3px) scale(1.01) !important;
}

.hero-product-line .hero-product-thumb {
    position: relative;
    overflow: hidden;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #ecfeff, #fef3c7) !important;
    color: #0f766e !important;
    font-size: 1.1rem;
    font-weight: 900;
}

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

.hero-product-line strong {
    color: #101828;
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: -.035em;
}

.hero-product-line small {
    margin-top: 2px;
    color: #667085 !important;
    font-size: .78rem;
    font-weight: 800;
}

.hero-product-line b {
    padding: 8px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e !important;
    font-size: .86rem;
    font-weight: 950;
}

@media (max-width: 980px) {
    .clean-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .clean-hero-panel {
        width: 100%;
    }

    .hero-metrics {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .clean-hero {
        padding: 24px !important;
        border-radius: 26px !important;
    }

    .clean-hero::before {
        inset: 10px;
        border-radius: 20px;
    }

    .hero-main-title {
        font-size: clamp(2.25rem, 11vw, 3.2rem) !important;
        line-height: .98 !important;
        letter-spacing: -.055em !important;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
    }

    .hero-metrics article {
        padding: 12px 14px;
    }

    .hero-product-line {
        align-items: center;
        gap: 10px !important;
    }

    .hero-product-line b {
        font-size: .78rem;
        padding-inline: 8px;
    }
}

/* Encabezado profesional */
.promo-strip {
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: 8px clamp(16px, 4vw, 52px) !important;
    justify-content: space-between !important;
    overflow: hidden;
    background:
        linear-gradient(90deg, #07111f 0%, #0f766e 52%, #f59e0b 100%) !important;
    color: #fff;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

.promo-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(110deg, transparent 0%, rgba(255,255,255,.14) 46%, transparent 56%);
    transform: translateX(-70%);
    animation: headerShine 7s linear infinite;
}

.promo-message,
.promo-action {
    position: relative;
    z-index: 1;
}

.promo-message {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: -.015em;
}

.promo-message::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 6px rgba(52, 211, 153, .16);
}

.promo-action {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    backdrop-filter: blur(12px);
}

.topbar {
    top: 0;
    z-index: 30 !important;
    width: min(1240px, calc(100% - 28px));
    margin: 14px auto 0;
    padding: 12px 14px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(20px);
}

.brand {
    min-width: 0;
    gap: 13px !important;
}

.brand-logo,
.brand-mark {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px;
    border-radius: 22px !important;
}

.brand-logo {
    padding: 7px;
    border: 1px solid rgba(15, 118, 110, .16) !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 12px 28px rgba(15, 23, 42, .1) !important;
}

.brand-logo img {
    padding: 0 !important;
    border-radius: 16px;
    object-fit: contain !important;
}

.brand-mark {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 32%),
        linear-gradient(135deg, #0f766e, #14b8a6 54%, #f59e0b) !important;
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .26);
}

.brand-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.brand strong {
    color: #0b1220 !important;
    font-size: clamp(1.05rem, 1.6vw, 1.28rem) !important;
    font-weight: 950 !important;
    line-height: 1.05;
    letter-spacing: -.045em !important;
}

.brand small {
    color: #667085 !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    line-height: 1.2;
    letter-spacing: -.02em !important;
}

.nav {
    align-items: center;
    justify-content: flex-end;
    gap: 7px !important;
}

.nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
    color: #475467 !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.nav a:hover,
.nav a.active {
    border-color: rgba(15, 118, 110, .16);
    background: #ecfdf5 !important;
    color: #0f766e !important;
    transform: translateY(-1px);
}

.nav a.active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 7px;
    left: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #14b8a6, #f59e0b);
}

.nav .nav-cta {
    min-height: 46px;
    margin-left: 4px;
    padding: 0 18px !important;
    border: 0;
    background: linear-gradient(135deg, #128c7e, #25d366) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(37, 211, 102, .28);
}

.nav .nav-cta::after {
    content: none;
}

.nav .nav-cta:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(37, 211, 102, .34);
}

@keyframes headerShine {
    0% { transform: translateX(-78%); }
    48%, 100% { transform: translateX(78%); }
}

@media (max-width: 900px) {
    .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px !important;
        width: min(100% - 20px, 1240px);
        margin-top: 10px;
    }

    .nav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding: 2px 2px 6px;
        scrollbar-width: thin;
    }

    .nav a {
        flex: 0 0 auto;
    }
}

@media (max-width: 620px) {
    .promo-strip {
        align-items: stretch !important;
        gap: 8px !important;
        min-height: 0;
    }

    .promo-message {
        font-size: .82rem;
    }

    .promo-action {
        justify-content: center;
        width: 100%;
    }

    .brand-logo,
    .brand-mark {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px;
    }

    .brand small {
        font-size: .73rem !important;
    }

    .nav .nav-cta {
        margin-left: 0;
    }
}

/* Encabezado con paleta del logo */
.promo-strip {
    background:
        radial-gradient(circle at 18% 50%, rgba(31, 216, 255, .28), transparent 22rem),
        radial-gradient(circle at 72% 50%, rgba(255, 62, 181, .28), transparent 20rem),
        linear-gradient(90deg, #030817 0%, #061432 45%, #121038 72%, #ffb703 120%) !important;
}

.promo-action {
    border-color: rgba(31, 216, 255, .36);
    background: rgba(7, 20, 50, .54);
    box-shadow: 0 0 22px rgba(31, 216, 255, .18);
}

.promo-message::before {
    background: #1fd8ff;
    box-shadow: 0 0 0 6px rgba(31, 216, 255, .16), 0 0 18px rgba(31, 216, 255, .65);
}

.topbar {
    border-color: rgba(31, 216, 255, .16) !important;
    background:
        linear-gradient(135deg, rgba(3, 8, 23, .92), rgba(6, 20, 50, .88) 48%, rgba(18, 16, 56, .9)) !important;
    box-shadow:
        0 24px 56px rgba(3, 8, 23, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.brand-logo {
    border-color: rgba(31, 216, 255, .28) !important;
    background:
        radial-gradient(circle at 28% 18%, rgba(31, 216, 255, .2), transparent 36%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .2), transparent 38%),
        #050b1d !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 16px 34px rgba(31, 216, 255, .13) !important;
}

.brand-mark {
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.4), transparent 26%),
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 48%, #ff3eb5 74%, #ffb703 100%) !important;
    box-shadow: 0 16px 32px rgba(255, 62, 181, .24);
}

.brand strong {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(31, 216, 255, .2);
}

.brand small {
    color: rgba(226, 232, 240, .78) !important;
}

.nav a {
    color: rgba(226, 232, 240, .78) !important;
}

.nav a:hover,
.nav a.active {
    border-color: rgba(31, 216, 255, .26);
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .14), rgba(255, 62, 181, .1)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(31, 216, 255, .1);
}

.nav a.active::after {
    background: linear-gradient(90deg, #1fd8ff, #ff3eb5, #ffb703);
    box-shadow: 0 0 12px rgba(31, 216, 255, .55);
}

.nav .nav-cta {
    background:
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 48%, #ff3eb5 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 16px 32px rgba(255, 62, 181, .24),
        0 0 28px rgba(31, 216, 255, .16);
}

.nav .nav-cta:hover {
    box-shadow:
        0 20px 38px rgba(255, 62, 181, .32),
        0 0 34px rgba(31, 216, 255, .22);
}

/* Fondo global llamativo y contrastado */
html {
    background: #030817;
}

body {
    min-height: 100vh;
    background-color: #030817 !important;
    background-image:
        linear-gradient(118deg, rgba(31, 216, 255, .2) 0%, transparent 24%, transparent 68%, rgba(255, 62, 181, .18) 100%),
        linear-gradient(160deg, transparent 0 42%, rgba(255, 183, 3, .13) 42% 43%, transparent 43% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 76px),
        linear-gradient(135deg, #030817 0%, #061432 38%, #120d36 68%, #18081f 100%) !important;
    background-attachment: fixed;
}

.page {
    position: relative;
    z-index: 1;
}

.page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 0 18%, rgba(31, 216, 255, .08) 18% 18.35%, transparent 18.35% 100%),
        linear-gradient(72deg, transparent 0 58%, rgba(255, 62, 181, .07) 58% 58.4%, transparent 58.4% 100%),
        linear-gradient(140deg, transparent 0 78%, rgba(255, 183, 3, .08) 78% 78.35%, transparent 78.35% 100%);
}

.clean-hero,
.promo-carousel,
.tools-marquee-section,
.featured-carousel-block,
.clean-benefits article,
.help-strip article,
.premium-product-card {
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .26),
        0 0 0 1px rgba(31, 216, 255, .07) !important;
}

.tools-marquee-section,
.featured-carousel-block {
    border-color: rgba(31, 216, 255, .12) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 249, 255, .9)) !important;
}

.clean-benefits article,
.help-strip article {
    border-color: rgba(31, 216, 255, .12) !important;
    background: rgba(255, 255, 255, .96) !important;
}

.catalog-head {
    padding: 26px 0 4px;
}

.catalog-head h2 {
    color: #ffffff !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.catalog-head p {
    color: rgba(226, 232, 240, .76) !important;
    font-weight: 700;
}

.catalog-head .clean-kicker {
    color: #1fd8ff !important;
    text-shadow: 0 0 20px rgba(31, 216, 255, .28);
}

.clean-categories a {
    border-color: rgba(31, 216, 255, .15) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.clean-categories a.active,
.clean-categories a:hover {
    border-color: transparent !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(31, 216, 255, .18);
}

.clean-search input,
.clean-search select {
    border-color: rgba(31, 216, 255, .2) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16);
}

.footer {
    margin-top: 34px;
    border-top-color: rgba(31, 216, 255, .14) !important;
    color: rgba(226, 232, 240, .72) !important;
}

.about-store {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(280px, .8fr);
    gap: 22px;
    align-items: center;
    margin-top: 26px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 20%, rgba(31, 216, 255, .16), transparent 22rem),
        radial-gradient(circle at 88% 70%, rgba(255, 62, 181, .13), transparent 20rem),
        rgba(255, 255, 255, .94);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(31, 216, 255, .06);
}

.about-store h2 {
    max-width: 760px;
    margin: 8px 0 0;
    color: #101828;
    font-size: clamp(1.8rem, 3.3vw, 3rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.06em;
}

.about-store h1 {
    max-width: 860px;
    margin: 8px 0 0;
    color: #101828;
    font-size: clamp(2rem, 4.8vw, 4.4rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.07em;
}

.about-store p {
    margin: 0;
    color: #475467;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.7;
}

.about-points {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.about-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(31, 216, 255, .16);
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.about-store-page {
    margin-top: 0;
    min-height: 420px;
}

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

.about-detail-grid article {
    padding: 22px;
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.about-detail-grid strong,
.about-detail-grid span {
    display: block;
}

.about-detail-grid strong {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -.055em;
}

.about-detail-grid span {
    margin-top: 6px;
    color: #5f6b7a;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 620px) {
    body {
        background-size: auto;
    }

    .catalog-head {
        padding-top: 20px;
    }

    .about-store,
    .about-points,
    .about-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Inicio: carrusel promocional principal */
.legacy-promo-carousel {
    display: none !important;
}

.home-promo-carousel {
    min-height: 0;
    margin-top: 0 !important;
    border: 1px solid rgba(31, 216, 255, .18);
    border-radius: 30px !important;
    background:
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(6, 20, 50, .9) 52%, rgba(18, 16, 56, .92)) !important;
    box-shadow:
        0 28px 68px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.home-promo-carousel .carousel-track {
    min-height: clamp(330px, 34vw, 455px) !important;
}

.home-promo-carousel .promo-slide {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .46fr);
    gap: clamp(20px, 4vw, 42px);
    padding: clamp(24px, 4vw, 48px) !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(31, 216, 255, .24), transparent 24rem),
        radial-gradient(circle at 78% 35%, rgba(255, 62, 181, .2), transparent 22rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(8, 18, 46, .9)) !important;
}

.home-promo-carousel .promo-slide:nth-child(2) {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 62, 181, .22), transparent 24rem),
        radial-gradient(circle at 80% 50%, rgba(255, 183, 3, .18), transparent 20rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(18, 16, 56, .9)) !important;
}

.home-promo-carousel .promo-slide:nth-child(3) {
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 183, 3, .17), transparent 22rem),
        radial-gradient(circle at 78% 46%, rgba(31, 216, 255, .24), transparent 24rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(6, 20, 50, .9)) !important;
}

.promo-slide-copy {
    max-width: 720px !important;
}

.home-promo-carousel .promo-slide h2 {
    max-width: 760px;
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(2rem, 4.2vw, 4.15rem) !important;
    font-weight: 900;
    line-height: .98 !important;
    letter-spacing: -.065em !important;
}

.home-promo-carousel .promo-slide p {
    max-width: 620px;
    color: rgba(226, 232, 240, .82) !important;
    font-size: clamp(.98rem, 1.35vw, 1.12rem) !important;
    font-weight: 650 !important;
    line-height: 1.65 !important;
}

.home-promo-carousel .promo-slide .btn {
    min-height: 48px;
    margin-top: 4px;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(31, 216, 255, .18);
}

.promo-slide-media {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 250px;
    margin: 0;
    overflow: hidden;
    padding: clamp(12px, 2vw, 18px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at center, rgba(31, 216, 255, .18), transparent 52%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .14), transparent 46%),
        #050b1d;
    box-shadow:
        0 22px 46px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.promo-slide-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    border-radius: 18px;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}

.promo-slide-media::after {
    content: none;
}

.promo-slide-media figcaption {
    display: grid;
    height: 100%;
    min-height: 250px;
    place-items: center;
    color: #1fd8ff;
    font-size: 3rem;
    font-weight: 900;
}

.promo-slide-media span,
.promo-slide-media b {
    display: none !important;
}

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

.home-essentials article {
    padding: 18px;
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.home-essentials b,
.home-essentials span {
    display: block;
}

.home-essentials b {
    color: #101828;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.035em;
}

.home-essentials span {
    margin-top: 6px;
    color: #5f6b7a;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.5;
}

.home-essentials + .clean-hero {
    margin-top: 24px;
}

@media (max-width: 820px) {
    .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr;
    }

    .promo-slide-media {
        min-height: 220px;
    }

    .promo-slide-media img,
    .promo-slide-media figcaption {
        min-height: 220px;
    }

    .home-essentials {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .home-promo-carousel {
        border-radius: 24px !important;
    }

    .home-promo-carousel .carousel-track {
        min-height: 590px !important;
    }

    .home-promo-carousel .promo-slide {
        padding: 22px !important;
    }

    .home-promo-carousel .promo-slide h2 {
        font-size: clamp(2rem, 10vw, 2.85rem) !important;
    }
}

/* Acabado final del primer carrusel */
.home-promo-carousel {
    border-radius: 32px !important;
}

.home-promo-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(110deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.06)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 54px);
    pointer-events: none;
}

.home-promo-carousel .carousel-track {
    height: clamp(390px, 35vw, 485px) !important;
    min-height: 0 !important;
}

.home-promo-carousel .promo-slide {
    z-index: 1;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 440px) !important;
    align-items: center !important;
    min-height: 100%;
    padding: clamp(28px, 4vw, 54px) clamp(28px, 4.4vw, 60px) !important;
}

.home-promo-carousel .promo-slide-copy {
    display: grid;
    gap: 12px;
    align-content: center;
}

.home-promo-carousel .promo-slide h2 {
    max-width: 720px;
    margin: 0 !important;
}

.home-promo-carousel .promo-slide p {
    margin: 0 0 4px !important;
}

.promo-slide-media {
    align-self: center !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    padding: clamp(14px, 2vw, 22px) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)),
        radial-gradient(circle at 50% 42%, rgba(31, 216, 255, .2), transparent 50%),
        #050b1d !important;
}

.promo-slide-media::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    pointer-events: none;
}

.promo-slide-media img {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
    object-fit: contain !important;
    object-position: center center !important;
}

.home-promo-carousel .carousel-controls {
    z-index: 3;
    right: 24px;
    bottom: 20px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(3, 8, 23, .42);
    backdrop-filter: blur(14px);
}

.home-promo-carousel .carousel-controls button {
    width: 36px;
    height: 36px;
    border-color: rgba(31,216,255,.28);
}

.home-promo-carousel .carousel-dots button.active {
    background: linear-gradient(90deg, #1fd8ff, #ff3eb5);
}

@media (max-width: 820px) {
    .home-promo-carousel .carousel-track {
        height: 640px !important;
    }

    .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr !important;
        align-content: center;
        gap: 20px;
        padding-bottom: 76px !important;
    }

    .promo-slide-media {
        max-width: 520px;
        justify-self: center;
    }
}

@media (max-width: 620px) {
    .home-promo-carousel .carousel-track {
        height: 675px !important;
    }

    .home-promo-carousel .promo-slide {
        padding: 22px 20px 76px !important;
    }

    .home-promo-carousel .carousel-controls {
        right: 50%;
        transform: translateX(50%);
    }
}

/* Footer llamativo */
.site-footer {
    position: relative;
    width: min(1240px, calc(100% - 28px));
    margin: 34px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(31, 216, 255, .16) !important;
    border-radius: 30px 30px 0 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(31, 216, 255, .24), transparent 24rem),
        radial-gradient(circle at 82% 26%, rgba(255, 62, 181, .2), transparent 22rem),
        linear-gradient(135deg, rgba(3, 8, 23, .98), rgba(6, 20, 50, .96) 52%, rgba(18, 16, 56, .98)) !important;
    color: #e2e8f0 !important;
    box-shadow:
        0 -18px 54px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 58px),
        linear-gradient(110deg, transparent 0 72%, rgba(255,183,3,.1) 72% 72.4%, transparent 72.4% 100%);
    pointer-events: none;
}

.footer-main,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(160px, .55fr));
    gap: clamp(18px, 3vw, 34px);
    padding: clamp(28px, 4vw, 44px);
}

.footer-brand {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    max-width: 100%;
}

.footer-logo,
.footer-mark {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(31, 216, 255, .28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 28% 18%, rgba(31, 216, 255, .2), transparent 36%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .2), transparent 38%),
        #050b1d;
    box-shadow: 0 14px 32px rgba(31, 216, 255, .12);
}

.footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.footer-mark {
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 52%, #ff3eb5);
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
}

.footer-brand strong,
.footer-brand small {
    display: block;
}

.footer-brand strong {
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -.045em;
}

.footer-brand small {
    margin-top: 2px;
    color: rgba(226,232,240,.72);
    font-size: .84rem;
    font-weight: 800;
}

.footer-brand p {
    max-width: 460px;
    margin: 0;
    color: rgba(226,232,240,.76);
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.65;
}

.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5);
    color: #fff;
    font-size: .92rem;
    font-weight: 950;
    box-shadow: 0 16px 32px rgba(31, 216, 255, .16);
}

.footer-column {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-column h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: .92rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-column a,
.footer-column span,
.footer-column small {
    color: rgba(226,232,240,.72);
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.45;
}

.footer-column a {
    transition: color .16s ease, transform .16s ease;
}

.footer-column a:hover {
    color: #1fd8ff;
    transform: translateX(3px);
}

.footer-contact b {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.footer-contact small {
    max-width: 220px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px clamp(24px, 4vw, 44px);
    border-top: 1px solid rgba(31, 216, 255, .13);
    background: rgba(3, 8, 23, .44);
}

.footer-bottom span {
    color: rgba(226,232,240,.62);
    font-size: .84rem;
    font-weight: 750;
}

@media (max-width: 980px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .site-footer {
        width: min(100% - 20px, 1240px);
        border-radius: 24px 24px 0 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }

    .footer-logo-link,
    .footer-whatsapp {
        width: 100%;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 22px;
    }
}

/* Footer profesional refinado */
.site-footer {
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, rgba(8, 18, 46, .96), rgba(3, 8, 23, .98)) !important;
}

.site-footer::before {
    opacity: .72;
    background:
        linear-gradient(120deg, rgba(31, 216, 255, .1), transparent 32%, transparent 70%, rgba(255, 62, 181, .08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
}

.footer-cta-panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) 0;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(31, 216, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 20%, rgba(31, 216, 255, .18), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.footer-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: #1fd8ff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-cta-panel h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.45rem, 3vw, 2.55rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.06em;
}

.footer-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    color: #07111f;
    font-size: .92rem;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.footer-main {
    grid-template-columns: minmax(320px, 1.35fr) repeat(3, minmax(170px, .58fr)) !important;
    padding-top: clamp(24px, 3vw, 34px) !important;
}

.footer-column {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.footer-brand {
    padding-right: clamp(10px, 2vw, 24px);
}

.footer-brand p {
    max-width: 520px;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-trust span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(31,216,255,.16);
    border-radius: 999px;
    background: rgba(31,216,255,.07);
    color: rgba(226,232,240,.82);
    font-size: .78rem;
    font-weight: 850;
}

.footer-column h3 {
    color: #e0faff !important;
}

.footer-column a,
.footer-column span,
.footer-column small {
    font-weight: 700 !important;
}

.footer-whatsapp {
    width: max-content;
    min-height: 40px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px solid rgba(37, 211, 102, .22);
    background: rgba(37, 211, 102, .12) !important;
    color: #d9ffe8 !important;
    box-shadow: none !important;
}

.footer-bottom {
    background: rgba(0,0,0,.18) !important;
}

@media (max-width: 980px) {
    .footer-main {
        grid-template-columns: 1fr 1fr !important;
    }

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

@media (max-width: 700px) {
    .footer-cta-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .footer-cta-button {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .footer-main {
        grid-template-columns: 1fr !important;
    }

    .footer-column {
        padding: 15px;
    }
}

/* Footer profesional final */
.professional-footer {
    width: min(1240px, calc(100% - 28px)) !important;
    margin: 42px auto 0 !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #08111f 0%, #030817 100%) !important;
    color: #e5e7eb !important;
    box-shadow:
        0 -18px 48px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.professional-footer::before {
    background:
        linear-gradient(90deg, rgba(31, 216, 255, .16), transparent 34%, transparent 66%, rgba(255, 62, 181, .12)),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 32%) !important;
    opacity: 1;
}

.professional-footer .footer-cta-panel {
    margin: 0 !important;
    padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 44px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .09), rgba(255, 62, 181, .055)) !important;
    box-shadow: none !important;
}

.professional-footer .footer-eyebrow {
    color: #7dd3fc !important;
    font-size: .74rem !important;
    letter-spacing: .14em !important;
}

.professional-footer .footer-cta-panel h2 {
    max-width: 760px;
    color: #ffffff !important;
    font-size: clamp(1.45rem, 2.6vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
}

.professional-footer .footer-cta-button {
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(125, 211, 252, .24);
    background: #ffffff !important;
    color: #07111f !important;
    font-size: .9rem !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22) !important;
}

.professional-footer .footer-main {
    grid-template-columns: minmax(320px, 1.45fr) repeat(3, minmax(160px, .55fr)) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    padding: clamp(28px, 4vw, 44px) !important;
}

.professional-footer .footer-brand {
    gap: 15px !important;
    padding: 0 !important;
}

.professional-footer .footer-logo,
.professional-footer .footer-mark {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    border-radius: 18px !important;
    border-color: rgba(125, 211, 252, .18) !important;
    background: rgba(15, 23, 42, .8) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
}

.professional-footer .footer-logo img {
    padding: 6px !important;
}

.professional-footer .footer-brand strong {
    color: #ffffff !important;
    font-size: 1.18rem !important;
}

.professional-footer .footer-brand small,
.professional-footer .footer-brand p {
    color: rgba(226, 232, 240, .68) !important;
}

.professional-footer .footer-brand p {
    max-width: 500px !important;
    font-size: .94rem !important;
}

.professional-footer .footer-trust {
    gap: 7px !important;
}

.professional-footer .footer-trust span {
    min-height: 30px !important;
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(226, 232, 240, .74) !important;
}

.professional-footer .footer-column {
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.professional-footer .footer-column h3 {
    margin-bottom: 9px !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
}

.professional-footer .footer-column a,
.professional-footer .footer-column span,
.professional-footer .footer-column small {
    color: rgba(226, 232, 240, .66) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
}

.professional-footer .footer-column a,
.professional-footer .footer-contact > span,
.professional-footer .footer-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-link-icon,
.footer-mini-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.footer-link-icon {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(125, 211, 252, .16);
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc;
    font-size: .68rem;
}

.footer-mini-icon {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.08);
    color: #e0faff;
    font-size: .62rem;
}

.professional-footer .footer-column a:hover {
    color: #7dd3fc !important;
    transform: translateX(2px) !important;
}

.professional-footer .footer-contact b {
    color: #ffffff !important;
    font-size: 1.02rem !important;
}

.professional-footer .footer-whatsapp {
    min-height: 38px !important;
    margin-top: 8px !important;
    border-color: rgba(34, 197, 94, .22) !important;
    background: rgba(34, 197, 94, .1) !important;
    color: #bbf7d0 !important;
    font-size: .86rem !important;
}

.professional-footer .footer-payments {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 0 clamp(24px, 4vw, 44px) clamp(22px, 3vw, 30px);
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.professional-footer .footer-payments h3 {
    max-width: 380px;
    margin: 5px 0 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.08rem, 1.8vw, 1.45rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.045em;
}

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

.payment-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.payment-card b {
    display: inline-grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.payment-card.yape b {
    background: #742384;
    color: #ffffff;
}

.payment-card.plin b {
    background: linear-gradient(135deg, #00a0df, #00c48c);
    color: #ffffff;
}

.payment-card.binance b {
    background: #f3ba2f;
    color: #111827;
}

.payment-card.bcp b {
    background: #0b3b8c;
    color: #ffffff;
}

.payment-card.interbank b {
    background: #00a650;
    color: #ffffff;
}

.professional-footer .footer-bottom {
    padding: 16px clamp(24px, 4vw, 44px) !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(0, 0, 0, .18) !important;
}

.professional-footer .footer-bottom span {
    color: rgba(226, 232, 240, .52) !important;
    font-size: .82rem !important;
}

@media (max-width: 980px) {
    .professional-footer .footer-main {
        grid-template-columns: 1fr 1fr !important;
    }

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

@media (max-width: 720px) {
    .professional-footer .footer-cta-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .professional-footer .footer-cta-button {
        width: 100%;
    }

    .professional-footer .footer-payments {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .professional-footer {
        width: min(100% - 20px, 1240px) !important;
    }

    .professional-footer .footer-main {
        grid-template-columns: 1fr !important;
    }

    .professional-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .professional-footer .footer-payments {
        margin-right: 20px;
        margin-left: 20px;
        padding: 16px;
    }

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

    .payment-card {
        justify-content: flex-start;
    }
}

/* Separacion visual: admin no hereda el acabado comercial publico */
.admin-area {
    background: #f6f7fb !important;
    background-image: none !important;
    color: #101828 !important;
}

.admin-area .topbar {
    width: auto !important;
    margin: 0 !important;
    padding: 12px clamp(16px, 4vw, 40px) !important;
    border: 0 !important;
    border-bottom: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
    color: #101828 !important;
}

.admin-area .brand-logo,
.admin-area .brand-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #e4e7ec !important;
}

.admin-area .brand strong {
    color: #101828 !important;
    text-shadow: none !important;
}

.admin-area .brand small {
    color: #667085 !important;
}

.admin-area .nav a {
    min-height: 38px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #475467 !important;
    box-shadow: none !important;
}

.admin-area .nav a:hover,
.admin-area .nav a.active {
    border-color: #d0d5dd !important;
    background: #f2f4f7 !important;
    color: #101828 !important;
    transform: none !important;
}

.admin-area .nav a.active::after {
    content: none !important;
}

.admin-area .nav .nav-cta {
    border-color: transparent !important;
    background: #101828 !important;
    color: #ffffff !important;
}

.admin-area .page {
    width: min(1280px, calc(100% - 32px));
    padding-top: 28px;
}

.admin-area .admin-footer {
    width: min(1280px, calc(100% - 32px));
    margin: 36px auto 0;
    padding: 18px 0;
    border-top: 1px solid #e4e7ec !important;
    color: #667085 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Footer ecommerce final */
.deluxe-footer {
    width: min(1240px, calc(100% - 28px)) !important;
    margin: 46px auto 0 !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #0a1220 0%, #050814 100%) !important;
    color: #e5e7eb !important;
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .22) !important;
}

.deluxe-footer::before {
    background:
        linear-gradient(90deg, rgba(31,216,255,.11), transparent 32%, transparent 70%, rgba(255,62,181,.09)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 44%) !important;
}

.footer-service-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 22px clamp(22px, 4vw, 42px);
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.footer-service-row article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
}

.footer-service-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(31,216,255,.18), rgba(255,62,181,.12));
    color: #7dd3fc;
}

.footer-service-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-service-row b,
.footer-service-row small {
    display: block;
}

.footer-service-row b {
    color: #ffffff;
    font-size: .94rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.footer-service-row small {
    margin-top: 2px;
    color: rgba(226,232,240,.58);
    font-size: .8rem;
    font-weight: 700;
}

.deluxe-footer .footer-main {
    grid-template-columns: minmax(320px, 1.35fr) repeat(2, minmax(150px, .5fr)) minmax(220px, .72fr) !important;
    gap: clamp(20px, 3vw, 38px) !important;
    padding: clamp(28px, 4vw, 44px) !important;
}

.deluxe-footer .footer-brand-panel {
    padding: 22px !important;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
}

.deluxe-footer .footer-logo,
.deluxe-footer .footer-mark {
    width: 70px !important;
    height: 70px !important;
    flex-basis: 70px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.06) !important;
}

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

.footer-primary-action,
.footer-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 950;
}

.footer-primary-action {
    background: #ffffff;
    color: #07111f;
}

.footer-secondary-action {
    border: 1px solid rgba(125, 211, 252, .22);
    background: rgba(125, 211, 252, .08);
    color: #dff8ff;
}

.deluxe-footer .footer-column {
    padding-top: 8px !important;
}

.deluxe-footer .footer-column h3 {
    color: #f8fafc !important;
    font-size: .8rem !important;
    letter-spacing: .15em !important;
}

.deluxe-footer .footer-column a {
    width: max-content;
    max-width: 100%;
    padding: 3px 0;
}

.deluxe-footer .footer-contact-card {
    padding: 18px !important;
    border: 1px solid rgba(34, 197, 94, .16) !important;
    border-radius: 20px !important;
    background: rgba(34, 197, 94, .055) !important;
}

.deluxe-footer .footer-whatsapp {
    background: #22c55e !important;
    color: #052e16 !important;
    border-color: transparent !important;
    font-weight: 950 !important;
}

.deluxe-payments {
    margin: 0 clamp(22px, 4vw, 42px) 26px !important;
    padding: 20px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.04) !important;
}

.deluxe-payments .payment-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.deluxe-payments .payment-card {
    display: grid !important;
    justify-items: start;
    align-content: center;
    gap: 3px;
    min-height: 68px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.065) !important;
}

.deluxe-payments .payment-card b {
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
}

.deluxe-payments .payment-card small {
    color: rgba(226,232,240,.56);
    font-size: .74rem;
    font-weight: 800;
}

.deluxe-payments .payment-card.yape {
    border-color: rgba(116, 35, 132, .45);
}

.deluxe-payments .payment-card.plin {
    border-color: rgba(0, 196, 140, .38);
}

.deluxe-payments .payment-card.binance {
    border-color: rgba(243, 186, 47, .42);
}

.deluxe-payments .payment-card.bcp {
    border-color: rgba(59, 130, 246, .38);
}

.deluxe-payments .payment-card.interbank {
    border-color: rgba(34, 197, 94, .38);
}

@media (max-width: 980px) {
    .footer-service-row,
    .deluxe-footer .footer-main {
        grid-template-columns: 1fr 1fr !important;
    }

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

    .deluxe-payments .payment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .footer-service-row,
    .deluxe-footer .footer-main,
    .deluxe-payments,
    .deluxe-payments .payment-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-service-row {
        padding: 20px;
    }

    .deluxe-footer .footer-main {
        padding: 24px 20px !important;
    }

    .deluxe-payments {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }

    .footer-actions,
    .footer-primary-action,
    .footer-secondary-action {
        width: 100%;
    }
}

/* Footer estilo ecommerce tipo SuperTec */
.supertec-style-footer {
    width: min(1240px, calc(100% - 28px));
    margin: 46px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 24px 24px 0 0;
    background: #08111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .22) !important;
}

.supertec-footer-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(148, 163, 184, .16);
}

.supertec-footer-features article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 22px 18px;
    background: #0d1728;
}

.feature-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 14px;
    background: rgba(31, 216, 255, .1);
    color: #7dd3fc;
}

.feature-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.supertec-footer-features b,
.supertec-footer-features small {
    display: block;
}

.supertec-footer-features b {
    color: #ffffff;
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.supertec-footer-features small {
    margin-top: 3px;
    color: rgba(226, 232, 240, .6);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.supertec-footer-main {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(0, 1.45fr);
    gap: clamp(28px, 4vw, 52px);
    padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 54px);
    background:
        radial-gradient(circle at 10% 20%, rgba(31, 216, 255, .12), transparent 26rem),
        radial-gradient(circle at 90% 80%, rgba(255, 62, 181, .09), transparent 24rem),
        #08111f;
}

.supertec-footer-brand {
    display: grid;
    align-content: start;
    gap: 14px;
}

.supertec-footer-logo {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 24px;
    background: rgba(255,255,255,.055);
}

.supertec-footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.supertec-footer-logo span {
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.supertec-footer-brand h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.055em;
}

.supertec-footer-brand p {
    max-width: 450px;
    margin: 0;
    color: rgba(226, 232, 240, .68);
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.65;
}

.supertec-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
}

.supertec-footer-links section {
    display: grid;
    align-content: start;
    gap: 9px;
}

.supertec-footer-links h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.supertec-footer-links a {
    width: max-content;
    max-width: 100%;
    color: rgba(226, 232, 240, .68);
    font-size: .92rem;
    font-weight: 750;
    transition: color .16s ease, transform .16s ease;
}

.supertec-footer-links a:hover {
    color: #7dd3fc;
    transform: translateX(3px);
}

.supertec-payments {
    display: grid;
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px clamp(24px, 5vw, 54px);
    border-top: 1px solid rgba(148, 163, 184, .14);
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    background: #0b1424;
}

.supertec-payments h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.supertec-payments p {
    margin: 4px 0 0;
    color: rgba(226, 232, 240, .58);
    font-size: .86rem;
    font-weight: 700;
}

.supertec-payment-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.supertec-payment-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    min-width: 104px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 950;
}

.supertec-payment-list span:nth-child(1) { border-color: rgba(116, 35, 132, .5); }
.supertec-payment-list span:nth-child(2) { border-color: rgba(0, 196, 140, .44); }
.supertec-payment-list span:nth-child(3) { border-color: rgba(243, 186, 47, .5); }
.supertec-payment-list span:nth-child(4) { border-color: rgba(59, 130, 246, .46); }
.supertec-payment-list span:nth-child(5) { border-color: rgba(34, 197, 94, .46); }

.supertec-footer-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(24px, 5vw, 54px);
    background: #050814;
}

.supertec-footer-company strong,
.supertec-footer-company span {
    display: block;
}

.supertec-footer-company strong {
    color: #ffffff;
    font-size: .95rem;
    font-weight: 950;
}

.supertec-footer-company span,
.supertec-footer-company p {
    margin: 0;
    color: rgba(226,232,240,.55);
    font-size: .84rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    .supertec-footer-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supertec-footer-main,
    .supertec-payments {
        grid-template-columns: 1fr;
    }

    .supertec-payment-list {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .supertec-style-footer {
        width: min(100% - 20px, 1240px);
    }

    .supertec-footer-features,
    .supertec-footer-links {
        grid-template-columns: 1fr;
    }

    .supertec-footer-main,
    .supertec-payments,
    .supertec-footer-company {
        padding-right: 20px;
        padding-left: 20px;
    }

    .supertec-payment-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .supertec-footer-company {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Footer final limpio y profesional */
.clean-commerce-footer {
    width: min(1240px, calc(100% - 28px));
    margin: 46px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .14) !important;
    border-radius: 22px 22px 0 0;
    background: #07111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -16px 44px rgba(0, 0, 0, .22) !important;
}

.footer-assurance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(226, 232, 240, .12);
    background: #0b1627;
}

.footer-assurance span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 14px;
    border-right: 1px solid rgba(226, 232, 240, .1);
    color: rgba(255,255,255,.86);
    font-size: .86rem;
    font-weight: 850;
    text-align: center;
}

.footer-assurance span:last-child {
    border-right: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.35fr) minmax(230px, .72fr);
    gap: clamp(24px, 4vw, 46px);
    padding: clamp(30px, 5vw, 54px);
}

.footer-company {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-company-logo {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.footer-company-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.footer-company-logo span {
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.footer-company h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
}

.footer-company p {
    max-width: 390px;
    margin: 8px 0 0;
    color: rgba(226, 232, 240, .64);
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.65;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 30px);
}

.footer-links div {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.footer-links a {
    width: max-content;
    max-width: 100%;
    color: rgba(226, 232, 240, .64);
    font-size: .9rem;
    font-weight: 750;
    transition: color .16s ease, transform .16s ease;
}

.footer-links a:hover {
    color: #7dd3fc;
    transform: translateX(3px);
}

.footer-contact-panel {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 20px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 18px;
    background: rgba(34, 197, 94, .07);
}

.footer-contact-panel span {
    color: rgba(187, 247, 208, .82);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-contact-panel strong {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.footer-contact-panel p {
    margin: 0;
    color: rgba(226, 232, 240, .66);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
}

.footer-contact-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border-radius: 999px;
    background: #22c55e;
    color: #052e16;
    font-size: .88rem;
    font-weight: 950;
}

.footer-payment-row {
    display: grid;
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px clamp(30px, 5vw, 54px);
    border-top: 1px solid rgba(226, 232, 240, .12);
    background: #0b1627;
}

.footer-payment-row strong,
.footer-payment-row span {
    display: block;
}

.footer-payment-row strong {
    color: #ffffff;
    font-size: .95rem;
    font-weight: 950;
}

.footer-payment-row > div:first-child span {
    margin-top: 3px;
    color: rgba(226, 232, 240, .56);
    font-size: .84rem;
    font-weight: 700;
}

.footer-payment-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.footer-payment-methods span {
    min-width: 98px;
    padding: 10px 14px;
    border: 1px solid rgba(226, 232, 240, .12);
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 900;
    text-align: center;
}

.footer-payment-methods span:nth-child(1) { border-color: rgba(116, 35, 132, .5); }
.footer-payment-methods span:nth-child(2) { border-color: rgba(0, 196, 140, .44); }
.footer-payment-methods span:nth-child(3) { border-color: rgba(243, 186, 47, .5); }
.footer-payment-methods span:nth-child(4) { border-color: rgba(59, 130, 246, .46); }
.footer-payment-methods span:nth-child(5) { border-color: rgba(34, 197, 94, .46); }

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 17px clamp(30px, 5vw, 54px);
    border-top: 1px solid rgba(226, 232, 240, .1);
    background: #050814;
}

.footer-legal span {
    color: rgba(226, 232, 240, .5);
    font-size: .82rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .clean-commerce-footer {
        width: min(100% - 20px, 1240px);
    }

    .footer-assurance,
    .footer-links,
    .footer-payment-row {
        grid-template-columns: 1fr;
    }

    .footer-assurance span {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, .1);
    }

    .footer-content,
    .footer-payment-row,
    .footer-legal {
        padding-right: 20px;
        padding-left: 20px;
    }

    .footer-payment-methods {
        justify-content: flex-start;
    }

    .footer-legal {
        flex-direction: column;
    }
}

/* Footer: formato final mejorado */
.clean-commerce-footer {
    position: relative;
    isolation: isolate;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #0b1424 0%, #07111f 56%, #050814 100%) !important;
}

.clean-commerce-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 22%, rgba(31, 216, 255, .14), transparent 24rem),
        radial-gradient(circle at 88% 64%, rgba(255, 62, 181, .1), transparent 22rem);
    pointer-events: none;
}

.footer-assurance {
    gap: 12px;
    padding: 16px clamp(20px, 4vw, 38px);
    border-bottom: 1px solid rgba(226, 232, 240, .1);
    background: rgba(255,255,255,.025);
}

.footer-assurance span {
    position: relative;
    justify-content: flex-start;
    min-height: 50px;
    padding: 0 14px 0 42px;
    border: 1px solid rgba(226, 232, 240, .1) !important;
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    text-align: left;
}

.footer-assurance span::before {
    content: "";
    position: absolute;
    left: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7dd3fc;
    box-shadow: 0 0 0 5px rgba(125, 211, 252, .1);
}

.footer-content {
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.25fr) minmax(260px, .78fr);
    align-items: stretch;
    padding-top: clamp(34px, 5vw, 48px);
    padding-bottom: clamp(34px, 5vw, 48px);
}

.footer-company,
.footer-contact-panel {
    min-height: 100%;
    padding: 22px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.04);
}

.footer-company {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
}

.footer-company-logo {
    width: 78px;
    height: 78px;
    border-radius: 20px;
}

.footer-company > div {
    align-self: center;
}

.footer-links {
    gap: 14px;
}

.footer-links div {
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.035);
}

.footer-links a {
    position: relative;
    width: 100%;
    padding: 5px 0 5px 14px;
}

.footer-links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(125, 211, 252, .7);
    transform: translateY(-50%);
}

.footer-contact-panel {
    border-color: rgba(34, 197, 94, .2);
    background:
        linear-gradient(180deg, rgba(34, 197, 94, .09), rgba(255,255,255,.035));
}

.footer-contact-panel strong {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.footer-contact-panel a {
    width: 100%;
}

.footer-payment-row {
    margin: 0 clamp(20px, 4vw, 38px) 22px;
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.045);
}

.footer-payment-methods {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.footer-payment-methods span {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
}

.footer-legal {
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
}

@media (max-width: 980px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

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

    .footer-payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .footer-assurance,
    .footer-links,
    .footer-payment-row,
    .footer-payment-methods {
        grid-template-columns: 1fr;
    }

    .footer-company {
        grid-template-columns: 1fr;
    }

    .footer-payment-row {
        margin-right: 20px;
        margin-left: 20px;
    }
}

/* Correccion definitiva del footer publico */
.public-site .clean-commerce-footer {
    display: block !important;
    width: min(1280px, calc(100% - 32px)) !important;
    max-width: 1280px !important;
    margin: 48px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border: 1px solid rgba(31, 216, 255, .16) !important;
    border-top: 2px solid #1fd8ff !important;
    border-radius: 8px 8px 0 0 !important;
    background: #07111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .18) !important;
}

.public-site .clean-commerce-footer *,
.public-site .clean-commerce-footer *::before,
.public-site .clean-commerce-footer *::after {
    box-sizing: border-box;
}

.public-site .clean-commerce-footer > section {
    width: 100% !important;
}

.public-site .footer-assurance {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    background: transparent !important;
}

.public-site .footer-assurance span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .86) !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.public-site .footer-assurance span::before {
    content: none !important;
}

.public-site .footer-assurance span:last-child {
    border-right: 0 !important;
}

.public-site .footer-content {
    display: grid !important;
    grid-template-columns: minmax(230px, .85fr) minmax(390px, 1.35fr) minmax(245px, .8fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 42px 36px 38px !important;
    background:
        radial-gradient(circle at 8% 14%, rgba(31, 216, 255, .12), transparent 22rem),
        radial-gradient(circle at 94% 82%, rgba(255, 62, 181, .09), transparent 22rem),
        #07111f !important;
}

.public-site .footer-company,
.public-site .footer-contact-panel,
.public-site .footer-links div {
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .footer-company {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-content: start !important;
    padding: 8px 24px 8px 0 !important;
    border-right: 1px solid rgba(148, 163, 184, .16) !important;
}

.public-site .footer-company-logo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
}

.public-site .footer-company h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

.public-site .footer-company p {
    max-width: none !important;
    margin: 8px 0 0 !important;
    color: rgba(226, 232, 240, .68) !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
}

.public-site .footer-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.public-site .footer-links div {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 8px 0 !important;
}

.public-site .footer-links h3 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.public-site .footer-links a {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    color: rgba(226, 232, 240, .68) !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    transition: color .2s ease, transform .2s ease !important;
}

.public-site .footer-links a::before {
    content: none !important;
}

.public-site .footer-links a:hover {
    color: #1fd8ff !important;
    transform: translateX(4px);
}

.public-site .footer-links a:focus-visible,
.public-site .footer-contact-panel a:focus-visible,
.public-site .footer-company-logo:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 4px;
}

.public-site .footer-contact-panel {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 8px 0 8px 24px !important;
    border-left: 1px solid rgba(34, 197, 94, .28) !important;
    border-color: rgba(34, 197, 94, .2) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, .08), transparent) !important;
}

.public-site .footer-contact-panel span {
    color: #86efac !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.public-site .footer-contact-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.public-site .footer-contact-label i {
    color: #4ade80 !important;
    font-size: .85rem !important;
}

.public-site .footer-contact-panel strong {
    color: #ffffff !important;
    font-size: 1.28rem !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
}

.public-site .footer-contact-number {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
}

.public-site .footer-contact-number:hover {
    color: #86efac !important;
}

.public-site .footer-contact-panel p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .7) !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
}

.public-site .footer-contact-panel a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    color: #052e16 !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.public-site .footer-contact-panel a:hover {
    background: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, .18) !important;
    transform: translateY(-2px);
}

.public-site .footer-chatbot {
    position: relative !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(31, 216, 255, .34) !important;
    border-radius: 20px !important;
    background: linear-gradient(155deg, rgba(31, 216, 255, .16), rgba(255, 255, 255, .045) 58%, rgba(255, 62, 181, .08)) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .footer-chatbot-heading {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
}

.public-site .footer-chatbot-avatar {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #1fd8ff !important;
    color: #07111f !important;
    font-size: 1.1rem !important;
}

.public-site .footer-chatbot-heading strong,
.public-site .footer-chatbot-heading span {
    display: block !important;
}

.public-site .footer-chatbot-heading > .footer-chatbot-avatar {
    display: grid !important;
    flex: 0 0 42px !important;
}

.public-site .footer-chatbot-heading strong {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.public-site .footer-chatbot-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin-left: auto !important;
    padding: 0 8px !important;
    border: 1px solid rgba(134, 239, 172, .25) !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, .12) !important;
    color: #86efac !important;
    font-size: .65rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .footer-chatbot-heading div > span {
    margin-top: 2px !important;
    color: rgba(226, 232, 240, .66) !important;
    font-size: .75rem !important;
}

.public-site .footer-chatbot-heading div > span i {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 4px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
}

.public-site .footer-chatbot-messages {
    display: grid !important;
    gap: 8px !important;
    min-height: 66px !important;
    max-height: 132px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    background: rgba(3, 8, 23, .3) !important;
}

.public-site .footer-chatbot-message {
    width: fit-content !important;
    max-width: 92% !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 12px 12px 12px 3px !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
}

.public-site .footer-chatbot-message.is-bot {
    background: rgba(255, 255, 255, .1) !important;
}

.public-site .footer-chatbot-prompt {
    display: block !important;
    color: rgba(226, 232, 240, .52) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
}

.public-site .footer-chatbot-message.is-user {
    justify-self: end !important;
    border-radius: 12px 12px 3px 12px !important;
    background: rgba(31, 216, 255, .18) !important;
    color: #dff9ff !important;
}

.public-site .footer-chatbot-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.public-site .footer-chatbot-options button {
    flex: 1 1 calc(50% - 7px) !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(31, 216, 255, .3) !important;
    border-radius: 10px !important;
    background: rgba(7, 17, 31, .35) !important;
    color: #b9f3ff !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}

.public-site .footer-chatbot-options button:hover,
.public-site .footer-chatbot-options button:focus-visible {
    border-color: #1fd8ff !important;
    background: rgba(31, 216, 255, .16) !important;
    transform: translateY(-1px);
}

.public-site .footer-chatbot-options button:disabled {
    cursor: default !important;
    opacity: .42 !important;
}

.public-site .footer-chatbot .footer-whatsapp-button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    justify-self: center !important;
    width: min(100%, 270px) !important;
    min-height: 46px !important;
    margin: 2px auto 0 !important;
    padding: 7px 12px 7px 8px !important;
    border: 1px solid rgba(187, 247, 208, .35) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #25d366, #16a34a) !important;
    color: #052e16 !important;
    font-size: .84rem !important;
    letter-spacing: .01em !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, .2) !important;
}

.public-site .footer-whatsapp-icon {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #16a34a !important;
    font-size: 1.35rem !important;
}

.public-site .footer-whatsapp-copy {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    text-align: center !important;
}

.public-site .footer-whatsapp-copy strong,
.public-site .footer-whatsapp-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.public-site .footer-whatsapp-copy strong {
    color: #052e16 !important;
    font-size: .8rem !important;
    font-weight: 950 !important;
}

.public-site .footer-whatsapp-copy small {
    color: rgba(5, 46, 22, .7) !important;
    font-size: .63rem !important;
    font-weight: 800 !important;
}

.public-site .footer-whatsapp-arrow {
    justify-self: end !important;
    color: rgba(5, 46, 22, .72) !important;
    font-size: .78rem !important;
}

.public-site .footer-chatbot .footer-whatsapp-button:hover,
.public-site .footer-chatbot .footer-whatsapp-button:focus-visible {
    background: linear-gradient(135deg, #86efac, #22c55e) !important;
    box-shadow: 0 14px 28px rgba(34, 197, 94, .3) !important;
    transform: translateY(-2px) !important;
}

.public-site .footer-payment-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    justify-items: center !important;
    margin: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 36px !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 0 !important;
    background: #0b1627 !important;
}

.public-site .footer-payment-row strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.public-site .footer-payment-row > div:first-child span {
    margin-top: 4px !important;
    color: rgba(226, 232, 240, .58) !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
}

.public-site .footer-payment-methods {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(100%, 680px) !important;
    gap: 10px !important;
    justify-content: initial !important;
}

.public-site .footer-payment-methods span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px !important;
    border: 1px solid rgba(226, 232, 240, .13) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #ffffff !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.public-site .footer-payment-methods img {
    display: block !important;
    width: 72px !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
}

.public-site .footer-payment-methods span:nth-child(1) { border-color: rgba(116, 35, 132, .5) !important; }
.public-site .footer-payment-methods span:nth-child(2) { border-color: rgba(0, 196, 140, .44) !important; }
.public-site .footer-payment-methods span:nth-child(3) { border-color: rgba(243, 186, 47, .5) !important; }
.public-site .footer-payment-methods span:nth-child(4) { border-color: rgba(59, 130, 246, .46) !important; }
.public-site .footer-payment-methods span:nth-child(5) { border-color: rgba(34, 197, 94, .46) !important; }

.public-site .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 16px max(24px, calc((100% - 1180px) / 2)) !important;
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
    background: #050814 !important;
}

.public-site .footer-legal span {
    display: block !important;
    color: rgba(226, 232, 240, .54) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}

@media (max-width: 1080px) {
    .public-site .footer-content {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-links {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .public-site .clean-commerce-footer {
        width: calc(100% - 20px) !important;
        margin-top: 36px !important;
    }

    .public-site .footer-assurance,
    .public-site .footer-payment-row {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-assurance {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .public-site .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .public-site .footer-payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .public-site .footer-content,
    .public-site .footer-payment-row,
    .public-site .footer-legal {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .public-site .footer-assurance {
        width: 100% !important;
    }

    .public-site .footer-company {
        grid-template-columns: 1fr !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
        padding-bottom: 24px !important;
    }

    .public-site .footer-contact-panel {
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(34, 197, 94, .28) !important;
        padding-top: 24px !important;
    }

    .public-site .footer-legal {
        flex-direction: column !important;
    }
}

@media (max-width: 460px) {
    .public-site .footer-assurance,
    .public-site .footer-links,
    .public-site .footer-payment-methods {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-assurance span {
        min-height: 48px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    }

    .public-site .footer-assurance span:last-child {
        border-bottom: 0 !important;
    }

    .public-site .footer-links {
        gap: 22px !important;
    }

    .public-site .footer-payment-methods span {
        justify-content: flex-start !important;
    }
}

/* Caja profesional para Herramientas disponibles */
.public-site .catalog-head {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(360px, .9fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: center !important;
    margin-top: 42px !important;
    padding: clamp(24px, 4vw, 36px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 10% 22%, rgba(31, 216, 255, .16), transparent 22rem),
        radial-gradient(circle at 92% 82%, rgba(255, 62, 181, .12), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.public-site .catalog-head::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .catalog-head > div,
.public-site .catalog-head .clean-search {
    position: relative;
    z-index: 1;
}

.public-site .catalog-head .clean-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
}

.public-site .catalog-head h2 {
    max-width: 700px;
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.065em !important;
}

.public-site .catalog-head p {
    max-width: 560px;
    color: rgba(226, 232, 240, .72) !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

.public-site .clean-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 165px 110px !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
}

.public-site .clean-search input,
.public-site .clean-search select {
    min-height: 46px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #101828 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.public-site .clean-search input::placeholder {
    color: #667085;
}

.public-site .clean-search .btn,
.public-site .clean-search button {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 55%, #ff3eb5) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(31, 216, 255, .16) !important;
}

@media (max-width: 980px) {
    .public-site .catalog-head {
        grid-template-columns: 1fr !important;
    }

    .public-site .clean-search {
        grid-template-columns: 1fr 160px 110px !important;
    }
}

@media (max-width: 640px) {
    .public-site .catalog-head {
        padding: 22px !important;
        border-radius: 24px !important;
    }

    .public-site .catalog-head::before {
        inset: 10px;
        border-radius: 18px;
    }

    .public-site .clean-search {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
}

/* Productos en carrusel desplegable */
.public-site .product-showcase {
    margin-top: 20px;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
    box-shadow: 0 22px 52px rgba(0, 0, 0, .18);
}

.public-site .product-showcase-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.public-site .product-showcase-toolbar h2 {
    margin: 5px 0 0;
    color: #101828;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.055em;
}

.public-site .product-showcase-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-site .product-showcase-actions button {
    display: inline-grid;
    min-width: 42px;
    min-height: 42px;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #101828;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.public-site .product-showcase-actions .toggle-products {
    padding: 0 16px;
    background: #101828;
    color: #ffffff;
    font-size: .9rem;
}

.public-site .product-carousel-track {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: clamp(280px, 31vw, 350px);
    grid-template-columns: none !important;
    gap: 18px;
    margin-top: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 16px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.public-site .product-carousel-track::-webkit-scrollbar {
    height: 9px;
}

.public-site .product-carousel-track::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef2f7;
}

.public-site .product-carousel-track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .product-carousel-track .premium-product-card {
    min-width: 0;
    scroll-snap-align: start;
}

.public-site .product-showcase.is-expanded .product-carousel-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: initial;
    overflow: visible;
    padding-bottom: 4px;
    scroll-snap-type: none;
}

.public-site .product-showcase.is-expanded [data-scroll-prev],
.public-site .product-showcase.is-expanded [data-scroll-next] {
    display: none;
}

@media (max-width: 1180px) {
    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .public-site .product-showcase-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-site .product-showcase-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .public-site .product-carousel-track {
        grid-auto-columns: minmax(270px, 88vw);
    }

    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: 1fr !important;
    }
}

/* Catalogo unificado */
.public-site .catalog-section {
    position: relative;
    overflow: hidden;
    margin-top: 42px !important;
    padding: clamp(22px, 4vw, 34px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 10% 18%, rgba(31, 216, 255, .14), transparent 22rem),
        radial-gradient(circle at 92% 86%, rgba(255, 62, 181, .11), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.public-site .catalog-section::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    pointer-events: none;
}

.public-site .catalog-section > * {
    position: relative;
    z-index: 1;
}

.public-site .catalog-section .product-showcase-toolbar {
    margin-bottom: 16px !important;
}

.public-site .catalog-section .clean-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
}

.public-site .catalog-section .product-showcase-toolbar h2 {
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    line-height: 1 !important;
    letter-spacing: -.065em !important;
}

.public-site .catalog-section .product-showcase-toolbar p {
    max-width: 560px;
    margin: 0;
    color: rgba(226,232,240,.72);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.55;
}

.public-site .catalog-section .product-showcase-actions button {
    border-color: rgba(226, 232, 240, .16) !important;
    background: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
}

.public-site .catalog-section .product-showcase-actions .toggle-products {
    background: #ffffff !important;
    color: #07111f !important;
}

.public-site .catalog-search {
    margin-bottom: 18px;
}

.public-site .catalog-section .product-carousel-track {
    background: transparent;
}

.public-site .catalog-section .premium-product-card {
    box-shadow: 0 20px 42px rgba(0,0,0,.16);
}

@media (max-width: 860px) {
    .public-site .catalog-section .product-showcase-toolbar {
        align-items: stretch;
    }

    .public-site .catalog-section .product-showcase-actions {
        justify-content: flex-start;
    }
}

/* Catalogo: formato premium final */
.public-site .catalog-section {
    padding: clamp(24px, 4vw, 38px) !important;
}

.public-site .catalog-section .product-showcase-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 20px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(226, 232, 240, .11);
}

.public-site .catalog-section .product-showcase-toolbar h2 {
    max-width: 760px;
}

.public-site .catalog-section .product-showcase-actions {
    display: grid !important;
    grid-template-columns: auto 44px 44px auto;
    gap: 9px !important;
    align-items: center;
    justify-content: end;
}

.public-site .catalog-count {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: rgba(226, 232, 240, .86);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.public-site .catalog-section .product-showcase-actions button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.public-site .catalog-section .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .product-showcase-actions [data-scroll-next] {
    font-size: 1.45rem !important;
}

.public-site .catalog-section .product-showcase-actions .toggle-products {
    min-width: 112px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
}

.public-site .catalog-search {
    grid-template-columns: minmax(0, 1fr) 190px 122px !important;
    gap: 12px !important;
    margin: 18px 0 20px !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.075) !important;
}

.public-site .catalog-search input,
.public-site .catalog-search select,
.public-site .catalog-search button {
    min-height: 48px !important;
}

.public-site .catalog-section .product-carousel-track {
    padding: 6px 6px 18px !important;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .08);
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    border-color: rgba(15, 23, 42, .08) !important;
}

.public-site .catalog-section.is-expanded,
.public-site .product-showcase.is-expanded.catalog-section {
    background:
        radial-gradient(circle at 10% 18%, rgba(31, 216, 255, .12), transparent 22rem),
        radial-gradient(circle at 92% 86%, rgba(255, 62, 181, .1), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
}

@media (max-width: 980px) {
    .public-site .catalog-section .product-showcase-toolbar {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .public-site .catalog-section .product-showcase-actions {
        justify-content: start;
    }

    .public-site .catalog-search {
        grid-template-columns: 1fr 180px 120px !important;
    }
}

@media (max-width: 680px) {
    .public-site .catalog-section {
        padding: 20px !important;
    }

    .public-site .catalog-section .product-showcase-actions {
        grid-template-columns: 1fr 44px 44px;
        width: 100%;
    }

    .public-site .catalog-count,
    .public-site .catalog-section .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }
}

/* Buscador y carrusel del catalogo refinados */
.public-site .catalog-search {
    position: relative;
    align-items: center;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px) 118px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 38px rgba(0,0,0,.16);
}

.public-site .catalog-search::before {
    content: "Buscar";
    position: absolute;
    top: -11px;
    left: 18px;
    z-index: 2;
    padding: 3px 9px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 999px;
    background: #08122a;
    color: #7dd3fc;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-site .catalog-search input,
.public-site .catalog-search select {
    height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    color: #111827 !important;
    font-size: .94rem !important;
    font-weight: 800 !important;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.public-site .catalog-search input {
    padding-left: 42px !important;
    background:
        linear-gradient(90deg, transparent 0 38px, rgba(15,23,42,.06) 38px 39px, transparent 39px),
        rgba(255,255,255,.96) !important;
}

.public-site .catalog-search input:focus,
.public-site .catalog-search select:focus {
    border-color: rgba(31,216,255,.5) !important;
    box-shadow: 0 0 0 4px rgba(31,216,255,.12) !important;
}

.public-site .catalog-search button {
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 58%, #ff3eb5) !important;
    font-size: .92rem !important;
}

.public-site .catalog-section.is-loading {
    pointer-events: none;
}

.public-site .catalog-section.is-loading::after {
    content: "Actualizando catalogo...";
    position: absolute;
    inset: auto 24px 24px auto;
    z-index: 5;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 999px;
    background: rgba(8, 18, 46, .92);
    color: #e0faff;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.public-site .catalog-section .product-carousel-track {
    position: relative;
    gap: 20px !important;
    grid-auto-columns: clamp(300px, 30vw, 365px) !important;
    padding: 12px 12px 20px !important;
    scroll-padding-left: 12px;
}

.public-site .catalog-section .product-carousel-track::before,
.public-site .catalog-section .product-carousel-track::after {
    content: "";
    position: sticky;
    z-index: 2;
    width: 34px;
    pointer-events: none;
}

.public-site .catalog-section .product-carousel-track::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8,18,46,.55), transparent);
}

.public-site .catalog-section .product-carousel-track::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8,18,46,.55), transparent);
}

.public-site .catalog-section .premium-product-card {
    transform: translateZ(0);
}

.public-site .catalog-section .premium-product-card:hover {
    transform: translateY(-4px) !important;
}

.public-site .product-showcase.is-expanded .product-carousel-track::before,
.public-site .product-showcase.is-expanded .product-carousel-track::after {
    content: none;
}

@media (max-width: 980px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 190px 118px !important;
    }
}

@media (max-width: 700px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .public-site .catalog-search::before {
        position: static;
        width: max-content;
        margin-bottom: -2px;
    }

    .public-site .catalog-section .product-carousel-track {
        grid-auto-columns: minmax(280px, 88vw) !important;
    }
}

/* Carrusel de productos: acabado superior */
.public-site .catalog-carousel-shell {
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.public-site .catalog-carousel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, .35fr);
    gap: 18px;
    align-items: end;
    margin-bottom: 14px;
}

.public-site .catalog-carousel-top span,
.public-site .catalog-carousel-top strong {
    display: block;
}

.public-site .catalog-carousel-top span {
    color: #7dd3fc;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.public-site .catalog-carousel-top strong {
    margin-top: 4px;
    color: rgba(255,255,255,.94);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.public-site .catalog-progress-line {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
}

.public-site .catalog-progress-line::before {
    content: "";
    display: block;
    width: 46%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .catalog-carousel-shell > .product-showcase-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px !important;
    margin-bottom: 14px;
}

.public-site .catalog-carousel-shell > .product-showcase-actions button {
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(226,232,240,.16) !important;
    background: rgba(255,255,255,.09) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    min-width: 116px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #07111f !important;
}

.public-site .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    margin-right: auto;
    background: rgba(255,255,255,.08);
}

.public-site .catalog-section .product-carousel-track {
    grid-auto-columns: clamp(310px, 27vw, 345px) !important;
    gap: 18px !important;
    padding: 4px 4px 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x mandatory;
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    scroll-snap-align: start;
    border-radius: 22px !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    min-height: 220px !important;
    aspect-ratio: 16 / 11 !important;
}

.public-site .catalog-section .premium-product-body {
    min-height: 400px !important;
    padding: 16px !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 48px !important;
    font-size: 1.18rem !important;
}

.public-site .catalog-section .premium-product-desc {
    min-height: 54px !important;
    font-size: .91rem !important;
}

.public-site .catalog-section .premium-purchase-panel {
    grid-template-columns: 1fr !important;
}

.public-site .catalog-section .premium-stock {
    min-height: 58px;
}

.public-site .catalog-section .premium-perks {
    grid-template-columns: 1fr 1fr !important;
}

.public-site .product-showcase.is-expanded .catalog-carousel-top {
    grid-template-columns: 1fr;
}

.public-site .product-showcase.is-expanded .catalog-progress-line {
    display: none;
}

@media (max-width: 760px) {
    .public-site .catalog-carousel-top {
        grid-template-columns: 1fr;
    }

    .public-site .catalog-carousel-shell > .product-showcase-actions {
        justify-content: flex-start;
    }

    .public-site .catalog-carousel-shell > .product-showcase-actions .catalog-count {
        width: 100%;
        justify-content: center;
    }
}

/* Filtro del catalogo: accesible y llamativo */
.public-site .catalog-search {
    grid-template-columns: minmax(280px, 1fr) minmax(210px, 250px) 132px !important;
    gap: 14px !important;
    align-items: end !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
}

.public-site .catalog-field {
    gap: 8px !important;
}

.public-site .catalog-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, .82) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
}

.public-site .catalog-field label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1fd8ff;
    box-shadow: 0 0 0 5px rgba(31, 216, 255, .1);
}

.public-site .catalog-field input,
.public-site .catalog-field select {
    height: 54px !important;
    border-radius: 16px !important;
    font-size: .96rem !important;
}

.public-site .catalog-field-search::after {
    bottom: 18px !important;
}

.public-site .catalog-filter-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 54px !important;
    min-height: 54px !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 55%, #ff3eb5 100%) !important;
    color: #ffffff !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(31,216,255,.18) !important;
}

.public-site .catalog-filter-button::after {
    content: ">";
    font-size: 1.05rem;
    line-height: 1;
}

.public-site .catalog-filter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(255,62,181,.22) !important;
}

@media (max-width: 860px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 1fr !important;
    }

    .public-site .catalog-filter-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }
}

/* Catalogo avanzado: buscador y carrusel */
.public-site .catalog-search {
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px) 118px !important;
    align-items: stretch !important;
    padding: 12px !important;
}

.public-site .catalog-search::before {
    content: none !important;
}

.public-site .catalog-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.public-site .catalog-field label {
    color: rgba(226, 232, 240, .72);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-site .catalog-field input,
.public-site .catalog-field select {
    width: 100%;
}

.public-site .catalog-field-search {
    position: relative;
}

.public-site .catalog-field-search::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid #667085;
    border-radius: 50%;
    box-shadow: 6px 6px 0 -4px #667085;
    transform: rotate(45deg);
    pointer-events: none;
}

.public-site .catalog-search input {
    padding-left: 44px !important;
}

.public-site .catalog-carousel-shell {
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(226, 232, 240, .09);
}

.public-site .catalog-carousel-hint {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 10px 6px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: rgba(226, 232, 240, .78);
    font-size: .78rem;
    font-weight: 850;
}

.public-site .catalog-carousel-shell::before,
.public-site .catalog-carousel-shell::after {
    content: "";
    position: absolute;
    top: 56px;
    bottom: 18px;
    z-index: 3;
    width: 42px;
    pointer-events: none;
}

.public-site .catalog-carousel-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8,18,46,.88), transparent);
}

.public-site .catalog-carousel-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8,18,46,.88), transparent);
}

.public-site .product-showcase.is-expanded .catalog-carousel-hint,
.public-site .product-showcase.is-expanded .catalog-carousel-shell::before,
.public-site .product-showcase.is-expanded .catalog-carousel-shell::after {
    display: none;
}

.public-site .catalog-section .product-carousel-track {
    min-height: 0;
    grid-auto-columns: clamp(310px, 29vw, 360px) !important;
    gap: 22px !important;
    padding: 10px 14px 20px !important;
    border-radius: 24px !important;
}

.public-site .catalog-section .product-showcase-actions button:hover {
    transform: translateY(-2px);
}

@media (max-width: 980px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 210px !important;
    }

    .public-site .catalog-search button {
        align-items: center;
        padding-bottom: 0;
    }
}

@media (max-width: 700px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }

    .public-site .catalog-carousel-shell::before,
    .public-site .catalog-carousel-shell::after {
        width: 22px;
    }
}

/* Ajuste de titulo del catalogo */
.public-site .catalog-section .product-showcase-toolbar h2 {
    font-size: clamp(1.55rem, 2.7vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
}

/* Carrusel de catalogo: barra limpia y profesional */
.public-site .catalog-section .catalog-carousel-shell {
    margin-top: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(6, 18, 38, .68) !important;
    box-shadow: 0 22px 56px rgba(2, 8, 23, .28) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) 48px 48px auto;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .075) !important;
    backdrop-filter: blur(16px);
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    width: fit-content;
    min-height: 38px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 999px !important;
    background: rgba(125, 211, 252, .1) !important;
    color: rgba(240, 249, 255, .92) !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px rgba(2, 8, 23, .2) !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-next] {
    font-size: 1.55rem !important;
    line-height: 1 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    width: auto !important;
    min-width: 128px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #07111f !important;
    font-size: .86rem !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 211, 252, .36) !important;
    background: rgba(125, 211, 252, .16) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products:hover {
    background: #e0f2fe !important;
}

.public-site .catalog-section .product-carousel-track {
    padding-top: 2px !important;
}

@media (max-width: 720px) {
    .public-site .catalog-section .catalog-carousel-shell {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
        grid-template-columns: 1fr 46px 46px;
        border-radius: 18px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count,
    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100% !important;
        justify-content: center;
    }
}

/* Carrusel de catalogo: version refinada */
.public-site .catalog-section .catalog-carousel-shell {
    isolation: isolate;
    overflow: hidden !important;
    margin-top: 22px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 211, 238, .16), transparent 24rem),
        linear-gradient(145deg, rgba(8, 21, 45, .94), rgba(16, 24, 45, .88) 52%, rgba(28, 18, 48, .92)) !important;
    box-shadow:
        0 28px 78px rgba(2, 8, 23, .42),
        inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

.public-site .catalog-section .catalog-carousel-shell::before,
.public-site .catalog-section .catalog-carousel-shell::after {
    top: 98px !important;
    bottom: 38px !important;
    z-index: 4 !important;
    width: 58px !important;
}

.public-site .catalog-section .catalog-carousel-shell::before {
    background: linear-gradient(90deg, rgba(8, 21, 45, .98), rgba(8, 21, 45, .48), transparent) !important;
}

.public-site .catalog-section .catalog-carousel-shell::after {
    background: linear-gradient(270deg, rgba(24, 18, 48, .98), rgba(24, 18, 48, .48), transparent) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) 46px 46px auto;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 233, .12) !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, .14);
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button {
    position: relative;
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(2, 8, 23, .24), inset 0 1px 0 rgba(255,255,255,.15) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-next] {
    font-size: 1.55rem !important;
    font-weight: 750 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    width: auto !important;
    min-width: 126px !important;
    padding: 0 18px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #ffffff, #dff7ff) !important;
    color: #07111f !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(34, 211, 238, .46) !important;
    background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(255,255,255,.08)) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products:hover {
    background: linear-gradient(135deg, #f8fafc, #bae6fd) !important;
}

.public-site .catalog-carousel-meter {
    position: relative;
    z-index: 5;
    height: 6px;
    margin: 0 8px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.public-site .catalog-carousel-meter span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
    box-shadow: 0 0 24px rgba(34, 211, 238, .36);
    transition: width .2s ease, transform .2s ease;
}

.public-site .catalog-section .product-carousel-track {
    grid-auto-columns: clamp(300px, 28vw, 352px) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 8px 8px 18px !important;
    overflow-x: auto !important;
    scroll-padding-left: 8px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .catalog-section .product-carousel-track::-webkit-scrollbar {
    display: none;
}

.public-site .catalog-section .product-carousel-track::before,
.public-site .catalog-section .product-carousel-track::after {
    content: none !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    overflow: hidden !important;
    scroll-snap-align: start !important;
    border: 1px solid rgba(226, 232, 240, .18) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 48px rgba(2, 8, 23, .22) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 62px rgba(2, 8, 23, .3) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    min-height: 238px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 0 !important;
    background: #eef2f7 !important;
}

.public-site .catalog-section .premium-product-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.public-site .catalog-section .product-availability {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(187, 247, 208, .4) !important;
    border-radius: 999px !important;
    background: rgba(5, 46, 22, .84) !important;
    color: #bbf7d0 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .product-availability i {
    color: #4ade80 !important;
}

.public-site .catalog-section .product-quantity-label {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.public-site .catalog-section .premium-product-card .premium-purchase-panel {
    gap: 10px !important;
    margin: 18px 0 0 !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    position: relative !important;
    min-height: 86px !important;
    padding: 14px !important;
    border: 1px solid rgba(14, 165, 233, .18) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.public-site .catalog-section .premium-price > span i {
    color: #0284c7 !important;
}

.public-site .catalog-section .premium-price > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    margin-top: 5px !important;
}

.public-site .catalog-section .premium-price strong {
    color: #075985 !important;
    font-size: 1.28rem !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    line-height: 1.25 !important;
}

.public-site .catalog-section .premium-price del {
    color: #94a3b8 !important;
    font-size: .72rem !important;
}

.public-site .catalog-section .premium-price > small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
}

.public-site .catalog-section .premium-stock {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-color: rgba(34, 197, 94, .2) !important;
    background: linear-gradient(145deg, #f5fff8, #ecfdf3) !important;
}

.public-site .catalog-section .premium-stock-dot {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .12) !important;
    animation: productStockPulse 2s ease-in-out infinite !important;
}

.public-site .catalog-section .premium-stock strong {
    display: block !important;
    margin-top: 4px !important;
    color: #15803d !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
}

.public-site .catalog-section .product-quantity-field output {
    display: block !important;
    margin-top: 2px !important;
    color: #075985 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-align: right !important;
}

@keyframes productStockPulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(34, 197, 94, .12); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, .04); }
}

.public-site .catalog-section .premium-product-body {
    min-height: 390px !important;
    padding: 18px !important;
}

.public-site .product-image-trigger {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer !important;
    font: inherit !important;
}

.public-site .product-image-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    border-radius: 999px !important;
    background: rgba(3, 8, 23, .74) !important;
    color: #ffffff !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity .2s ease, transform .2s ease, background .2s ease !important;
}

.public-site .product-image-hint i {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7dd3fc !important;
    opacity: 1 !important;
    transform: none !important;
}

.public-site .product-image-trigger:hover .product-image-hint,
.public-site .product-image-trigger:focus-visible .product-image-hint {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.public-site .product-image-trigger:hover .product-image-hint {
    background: #0284c7 !important;
}

.public-site .product-image-trigger:hover .product-image-hint,
.public-site .product-image-trigger:focus-visible .product-image-hint {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: rgba(2, 132, 199, .9) !important;
}

.public-site .product-details-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: rgba(2, 8, 23, .78) !important;
    backdrop-filter: blur(8px) !important;
}

.public-site .product-details-modal[hidden] {
    display: none !important;
}

.public-site .product-details-dialog {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1fr) !important;
    width: min(760px, 100%) !important;
    max-height: min(620px, calc(100vh - 40px)) !important;
    overflow: auto !important;
    border: 1px solid rgba(125, 211, 252, .28) !important;
    border-radius: 22px !important;
    background: #07111f !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45) !important;
}

.public-site .product-details-visual {
    min-height: 290px !important;
    background: #0b1627 !important;
}

.public-site .product-details-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    object-fit: cover !important;
}

.public-site .product-details-visual span {
    display: grid !important;
    height: 100% !important;
    min-height: 290px !important;
    place-items: center !important;
    color: #1fd8ff !important;
    font-size: 4rem !important;
    font-weight: 950 !important;
}

.public-site .product-details-copy {
    display: grid !important;
    align-content: center !important;
    gap: 14px !important;
    padding: 32px !important;
}

.public-site .product-details-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    line-height: 1.05 !important;
}

.public-site .product-details-copy p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .72) !important;
    line-height: 1.65 !important;
}

.public-site .product-details-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.public-site .product-details-facts span {
    display: grid !important;
    gap: 4px !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .05) !important;
}

.public-site .product-details-facts small {
    color: rgba(226, 232, 240, .5) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.public-site .product-details-facts strong {
    color: #ffffff !important;
    font-size: .82rem !important;
}

.public-site .product-details-note {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 4px !important;
    color: rgba(226, 232, 240, .54) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.public-site .product-details-note i {
    color: #1fd8ff !important;
}

.public-site .product-details-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 50% !important;
    background: rgba(3, 8, 23, .7) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
}

.product-modal-open {
    overflow: hidden !important;
}

@media (max-width: 620px) {
    .public-site .product-details-dialog {
        grid-template-columns: 1fr !important;
    }

    .public-site .product-details-visual,
    .public-site .product-details-visual img,
    .public-site .product-details-visual span {
        min-height: 190px !important;
        height: 190px !important;
    }

    .public-site .product-details-copy {
        padding: 24px 20px !important;
    }

    .public-site .product-details-facts {
        grid-template-columns: 1fr !important;
    }
}

/* Tarjetas de producto: jerarquia comercial limpia */
.public-site .catalog-section .product-carousel-track .premium-product-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 650px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(2, 8, 23, .16) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-4px) !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 20px 38px rgba(2, 8, 23, .22) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    position: relative !important;
    flex: 0 0 210px !important;
    min-height: 210px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 18px 18px 0 0 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    transition: transform .35s ease !important;
}

.public-site .catalog-section .premium-product-card:hover .store-image-frame img {
    transform: scale(1.04) !important;
}

.public-site .catalog-section .product-image-hint {
    min-height: 34px !important;
    padding: 0 12px !important;
    background: rgba(15, 23, 42, .82) !important;
    font-size: .72rem !important;
}

.public-site .catalog-section .premium-product-body {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 20px !important;
}

.public-site .catalog-section .premium-product-meta {
    min-height: 24px !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 44px !important;
    margin: 10px 0 6px !important;
    color: #0f172a !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.public-site .catalog-section .premium-product-desc {
    display: -webkit-box !important;
    min-height: 45px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
}

.public-site .catalog-section .premium-purchase-panel {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 14px 0 0 !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    min-height: 78px !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.public-site .catalog-section .premium-price {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    font-size: .62rem !important;
    letter-spacing: .06em !important;
}

.public-site .catalog-section .premium-price strong {
    font-size: 1.18rem !important;
}

.public-site .catalog-section .premium-stock strong {
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

.public-site .catalog-section .product-quantity-field {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
    margin: 14px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.public-site .catalog-section .product-quantity-label {
    font-size: .78rem !important;
}

.public-site .catalog-section .product-quantity-field small {
    grid-column: 1 / -1 !important;
    font-size: .65rem !important;
}

.public-site .catalog-section .product-quantity-field output {
    grid-column: 1 / -1 !important;
    padding-top: 7px !important;
    border-top: 1px solid #eef2f7 !important;
    font-size: .76rem !important;
    text-align: left !important;
}

.public-site .catalog-section .premium-product-actions {
    margin-top: 12px !important;
}

.public-site .catalog-section .add-cart-button {
    min-height: 46px !important;
    border-radius: 12px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: .82rem !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .2) !important;
}

.public-site .catalog-section .add-cart-button:hover,
.public-site .catalog-section .add-cart-button:focus-visible,
.public-site .catalog-section .add-cart-button.is-added {
    background: #115e59 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 430px) {
    .public-site .catalog-section .product-carousel-track .premium-product-card {
        min-height: 0 !important;
    }

    .public-site .catalog-section .premium-purchase-panel {
        grid-template-columns: 1fr !important;
    }
}

/* Presentacion refinada de las tarjetas del catalogo */
.public-site .catalog-section .product-carousel-track .premium-product-card {
    position: relative !important;
    min-height: 660px !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, .16) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 4px !important;
    z-index: 4 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(90deg, #0f766e, #22d3ee, #f59e0b) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(14, 165, 233, .35) !important;
    box-shadow: 0 24px 48px rgba(2, 8, 23, .23) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    flex-basis: 222px !important;
    min-height: 222px !important;
    border-radius: 18px 18px 0 0 !important;
    background: #e8f1f5 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    filter: saturate(1.04) contrast(1.02) !important;
}

.public-site .catalog-section .premium-product-body {
    padding: 22px !important;
}

.public-site .catalog-section .premium-product-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.public-site .catalog-section .premium-product-meta span {
    color: #0f766e !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .catalog-section .premium-product-meta b {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 0 !important;
    margin: 12px 0 8px !important;
    font-size: 1.32rem !important;
    letter-spacing: -.025em !important;
}

.public-site .catalog-section .premium-product-desc {
    min-height: 47px !important;
    color: #64748b !important;
    font-size: .84rem !important;
}

.public-site .catalog-section .premium-purchase-panel {
    grid-template-columns: 1.08fr .92fr !important;
    gap: 9px !important;
    padding-top: 18px !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 13px !important;
}

.public-site .catalog-section .premium-price {
    border-color: #bfdbfe !important;
    background: linear-gradient(145deg, #eff6ff, #f8fbff) !important;
}

.public-site .catalog-section .premium-stock {
    border-color: #bbf7d0 !important;
    background: linear-gradient(145deg, #f0fdf4, #f8fff9) !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    font-size: .64rem !important;
    letter-spacing: .045em !important;
}

.public-site .catalog-section .premium-price strong {
    font-size: 1.34rem !important;
}

.public-site .catalog-section .premium-stock-dot {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
}

.public-site .catalog-section .product-quantity-field {
    grid-template-columns: 1fr auto !important;
    gap: 7px 12px !important;
    margin-top: 16px !important;
    padding: 12px 13px !important;
    border-color: #dbe4ef !important;
    background: #f8fafc !important;
}

.public-site .catalog-section .product-quantity-label {
    color: #334155 !important;
    font-size: .8rem !important;
}

.public-site .catalog-section .product-quantity-control {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.public-site .catalog-section .product-quantity-field small {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    color: #64748b !important;
}

.public-site .catalog-section .product-quantity-field output {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #075985 !important;
    font-size: .74rem !important;
    text-align: right !important;
}

.public-site .catalog-section .add-cart-button {
    min-height: 50px !important;
    border: 1px solid #0f766e !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #0f766e, #0d9488) !important;
    box-shadow: 0 10px 20px rgba(15, 118, 110, .2) !important;
    font-size: .86rem !important;
}

.public-site .catalog-section .add-cart-button:hover,
.public-site .catalog-section .add-cart-button:focus-visible,
.public-site .catalog-section .add-cart-button.is-added {
    background: linear-gradient(135deg, #115e59, #0f766e) !important;
    box-shadow: 0 14px 26px rgba(15, 118, 110, .28) !important;
}

@media (max-width: 430px) {
    .public-site .catalog-section .product-carousel-track .premium-product-card {
        min-height: 0 !important;
    }

    .public-site .catalog-section .premium-purchase-panel {
        grid-template-columns: 1fr !important;
    }

    .public-site .catalog-section .product-quantity-control,
    .public-site .catalog-section .product-quantity-field small,
    .public-site .catalog-section .product-quantity-field output {
        grid-column: 1 !important;
    }

    .public-site .catalog-section .product-quantity-control {
        grid-row: 2 !important;
    }

    .public-site .catalog-section .product-quantity-field small {
        grid-row: 3 !important;
    }

    .public-site .catalog-section .product-quantity-field output {
        grid-row: 4 !important;
        text-align: left !important;
    }
}

.public-site .product-showcase.is-expanded .catalog-carousel-meter {
    display: none;
}

@media (max-width: 780px) {
    .public-site .catalog-section .catalog-carousel-shell {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell::before,
    .public-site .catalog-section .catalog-carousel-shell::after {
        top: 144px !important;
        width: 26px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
        grid-template-columns: 1fr 46px 46px !important;
        border-radius: 18px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count,
    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100% !important;
        justify-content: center !important;
    }

    .public-site .catalog-section .product-carousel-track {
        grid-auto-columns: minmax(282px, 88vw) !important;
        gap: 14px !important;
        padding-inline: 2px !important;
    }

    .public-site .catalog-section .premium-product-card .store-image-frame {
        min-height: 215px !important;
    }
}

/* Inicio: carrusel principal premium */
.public-site .home-promo-carousel {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 10% 16%, rgba(34, 211, 238, .18), transparent 25rem),
        radial-gradient(circle at 86% 18%, rgba(244, 114, 182, .14), transparent 24rem),
        linear-gradient(135deg, rgba(3, 9, 24, .97), rgba(9, 24, 51, .95) 52%, rgba(22, 18, 44, .96)) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .42),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.public-site .home-promo-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 24%, transparent 76%, rgba(255,255,255,.06)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 62px);
    opacity: .75;
    pointer-events: none;
}

.public-site .home-promo-carousel::after {
    content: "";
    position: absolute;
    inset: auto 32px 16px 32px;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    pointer-events: none;
}

.public-site .home-promo-carousel .carousel-track {
    height: clamp(430px, 38vw, 540px) !important;
    min-height: 0 !important;
}

.public-site .home-promo-carousel .promo-slide {
    z-index: 1;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 455px) !important;
    gap: clamp(24px, 4vw, 56px) !important;
    align-items: center !important;
    padding: clamp(34px, 4.6vw, 66px) clamp(30px, 5vw, 72px) clamp(52px, 5vw, 70px) !important;
    background: transparent !important;
    transform: translateX(18px) scale(.985);
    transition: opacity .42s ease, transform .42s ease !important;
}

.public-site .home-promo-carousel .promo-slide.active {
    transform: translateX(0) scale(1);
}

.public-site .home-promo-carousel .promo-slide-copy {
    display: grid !important;
    max-width: 740px !important;
    gap: 14px !important;
    align-content: center;
}

.public-site .home-promo-carousel .clean-kicker {
    width: fit-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px !important;
    border: 1px solid rgba(125, 211, 252, .26);
    border-radius: 999px;
    background: rgba(14, 165, 233, .11);
    color: #bae6fd !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-carousel .promo-slide h2 {
    max-width: 760px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.15rem, 4.15vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

.public-site .home-promo-carousel .promo-slide p {
    max-width: 610px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.25vw, 1.12rem) !important;
    font-weight: 600 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-features {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 4px 0 2px;
}

.public-site .home-promo-features span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(248, 250, 252, .88);
    font-size: .8rem;
    font-weight: 800;
}

.public-site .home-promo-features span::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

.public-site .home-promo-carousel .promo-slide .btn {
    width: fit-content;
    min-height: 50px !important;
    margin-top: 4px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #22d3ee, #6366f1 52%, #f472b6) !important;
    color: #ffffff !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    box-shadow: 0 18px 38px rgba(34, 211, 238, .22) !important;
}

.public-site .home-promo-carousel .promo-slide-media {
    position: relative !important;
    align-self: center !important;
    justify-self: stretch;
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 16 / 11;
    padding: clamp(16px, 2.2vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.045)),
        rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 28px 62px rgba(2, 8, 23, .36),
        inset 0 1px 0 rgba(255, 255, 255, .15) !important;
    transform: perspective(900px) rotateY(-4deg);
}

.public-site .home-promo-carousel .promo-slide-media::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .home-promo-carousel .promo-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.16) 46%, transparent 64%);
    transform: translateX(-68%);
    pointer-events: none;
}

.public-site .home-promo-carousel .promo-slide.active .promo-slide-media::after {
    animation: homeHeroShine 5.8s ease-in-out infinite;
}

.public-site .home-promo-carousel .promo-slide-media img {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 22px !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    filter: drop-shadow(0 18px 24px rgba(2, 8, 23, .28));
}

.public-site .home-promo-carousel .promo-slide-media figcaption {
    position: relative;
    z-index: 1;
    min-height: 100% !important;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
}

.public-site .home-promo-carousel .carousel-controls {
    z-index: 5 !important;
    right: 28px !important;
    bottom: 28px !important;
    gap: 9px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 999px !important;
    background: rgba(3, 8, 23, .5) !important;
    box-shadow: 0 18px 38px rgba(2, 8, 23, .24) !important;
    backdrop-filter: blur(16px);
}

.public-site .home-promo-carousel .carousel-controls button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
}

.public-site .home-promo-carousel .carousel-controls button:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, .45) !important;
    background: rgba(34, 211, 238, .16) !important;
}

.public-site .home-promo-carousel .carousel-dots {
    align-items: center;
    gap: 7px !important;
    padding: 0 2px;
}

.public-site .home-promo-carousel .carousel-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .38) !important;
}

.public-site .home-promo-carousel .carousel-dots button.active {
    width: 28px !important;
    background: linear-gradient(90deg, #22d3ee, #f472b6) !important;
}

.public-site .home-carousel-progress {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 18px;
    z-index: 4;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
}

.public-site .home-carousel-progress span {
    display: block;
    width: var(--slide-progress, 33.333%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
    box-shadow: 0 0 24px rgba(34, 211, 238, .34);
    transition: width .42s ease;
}

@keyframes homeHeroShine {
    0%, 45% { transform: translateX(-68%); }
    75%, 100% { transform: translateX(68%); }
}

@media (max-width: 900px) {
    .public-site .home-promo-carousel .carousel-track {
        height: 720px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 24px !important;
        padding: 30px 24px 92px !important;
    }

    .public-site .home-promo-carousel .promo-slide-copy {
        max-width: 100% !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        width: min(100%, 560px);
        justify-self: center;
        transform: none;
    }
}

@media (max-width: 620px) {
    .public-site .home-promo-carousel {
        margin-top: 8px !important;
        border-radius: 24px !important;
    }

    .public-site .home-promo-carousel .carousel-track {
        height: 760px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        padding: 24px 18px 94px !important;
    }

    .public-site .home-promo-carousel .promo-slide h2 {
        font-size: clamp(1.95rem, 9vw, 2.75rem) !important;
        line-height: 1.06 !important;
    }

    .public-site .home-promo-features {
        gap: 7px;
    }

    .public-site .home-promo-features span {
        min-height: 30px;
        font-size: .76rem;
    }

    .public-site .home-promo-carousel .promo-slide .btn {
        width: 100%;
        justify-content: center;
    }

    .public-site .home-promo-carousel .carousel-controls {
        right: 50% !important;
        bottom: 28px !important;
        transform: translateX(50%);
    }

    .public-site .home-carousel-progress {
        left: 22px;
        right: 22px;
        bottom: 16px;
    }
}

/* Correccion visual: carrusel de inicio limpio y presentable */
.public-site .home-promo-carousel {
    margin-top: 14px !important;
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(115deg, rgba(5, 18, 34, .97) 0%, rgba(7, 38, 55, .96) 52%, rgba(9, 31, 46, .97) 100%) !important;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .24),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.public-site .home-promo-carousel::before {
    background:
        linear-gradient(90deg, rgba(20, 184, 166, .08), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%) !important;
    opacity: 1 !important;
}

.public-site .home-promo-carousel::after {
    content: none !important;
}

.public-site .home-promo-carousel .carousel-track {
    height: clamp(390px, 34vw, 475px) !important;
}

.public-site .home-promo-carousel .promo-slide {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 410px) !important;
    gap: clamp(22px, 3.6vw, 46px) !important;
    padding: clamp(28px, 4vw, 54px) clamp(26px, 4.4vw, 60px) 66px !important;
    transform: translateX(14px) !important;
}

.public-site .home-promo-carousel .promo-slide.active {
    transform: translateX(0) !important;
}

.public-site .home-promo-carousel .promo-slide-copy {
    gap: 13px !important;
}

.public-site .home-promo-carousel .clean-kicker {
    min-height: 31px !important;
    padding: 0 12px !important;
    border-color: rgba(94, 234, 212, .28) !important;
    background: rgba(20, 184, 166, .12) !important;
    color: #99f6e4 !important;
    font-size: .73rem !important;
}

.public-site .home-promo-carousel .promo-slide h2 {
    max-width: 690px !important;
    font-size: clamp(2rem, 3.55vw, 3.35rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-carousel .promo-slide p {
    max-width: 570px !important;
    color: rgba(226, 232, 240, .82) !important;
    font-size: clamp(.96rem, 1.15vw, 1.06rem) !important;
    line-height: 1.65 !important;
    font-weight: 550 !important;
}

.public-site .home-promo-features {
    gap: 8px !important;
    margin: 2px 0 2px !important;
}

.public-site .home-promo-features span {
    min-height: 29px !important;
    padding: 0 10px !important;
    border-color: rgba(226, 232, 240, .11) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: rgba(241, 245, 249, .82) !important;
    font-size: .76rem !important;
    font-weight: 760 !important;
}

.public-site .home-promo-features span::before {
    width: 6px !important;
    height: 6px !important;
    margin-right: 7px !important;
    background: #5eead4 !important;
    box-shadow: none !important;
}

.public-site .home-promo-carousel .promo-slide .btn {
    min-height: 46px !important;
    padding: 0 20px !important;
    border-color: rgba(94, 234, 212, .26) !important;
    background: #14b8a6 !important;
    color: #052e2b !important;
    font-size: .92rem !important;
    box-shadow: 0 14px 28px rgba(20, 184, 166, .2) !important;
}

.public-site .home-promo-carousel .promo-slide .btn:hover {
    background: #5eead4 !important;
    transform: translateY(-1px);
}

.public-site .home-promo-carousel .promo-slide-media {
    aspect-ratio: 4 / 3 !important;
    padding: 16px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow:
        0 22px 42px rgba(2, 8, 23, .26),
        inset 0 0 0 1px rgba(255,255,255,.5) !important;
    transform: none !important;
}

.public-site .home-promo-carousel .promo-slide-media::before,
.public-site .home-promo-carousel .promo-slide-media::after {
    content: none !important;
    animation: none !important;
}

.public-site .home-promo-carousel .promo-slide-media img {
    border-radius: 16px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

.public-site .home-promo-carousel .promo-slide-media figcaption {
    color: #0f766e !important;
    background: #f8fafc !important;
}

.public-site .home-promo-carousel .carousel-controls {
    right: 24px !important;
    bottom: 22px !important;
    padding: 7px !important;
    border-color: rgba(226, 232, 240, .14) !important;
    background: rgba(2, 8, 23, .42) !important;
    box-shadow: 0 14px 28px rgba(2, 8, 23, .22) !important;
}

.public-site .home-promo-carousel .carousel-controls button {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, .08) !important;
}

.public-site .home-promo-carousel .carousel-controls button:hover {
    border-color: rgba(94, 234, 212, .45) !important;
    background: rgba(20, 184, 166, .16) !important;
}

.public-site .home-promo-carousel .carousel-dots button.active {
    width: 26px !important;
    background: #5eead4 !important;
}

.public-site .home-carousel-progress {
    left: 30px !important;
    right: 30px !important;
    bottom: 15px !important;
    height: 3px !important;
    background: rgba(255, 255, 255, .12) !important;
}

.public-site .home-carousel-progress span {
    background: #5eead4 !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .public-site .home-promo-carousel .carousel-track {
        height: 650px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        gap: 18px !important;
        padding: 26px 22px 86px !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        width: min(100%, 500px) !important;
    }
}

@media (max-width: 620px) {
    .public-site .home-promo-carousel {
        border-radius: 20px !important;
    }

    .public-site .home-promo-carousel .carousel-track {
        height: 690px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        padding: 22px 16px 88px !important;
    }

    .public-site .home-promo-carousel .promo-slide h2 {
        font-size: clamp(1.82rem, 8.4vw, 2.45rem) !important;
    }

    .public-site .home-promo-carousel .promo-slide p {
        font-size: .94rem !important;
    }

    .public-site .home-promo-features span {
        font-size: .72rem !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        aspect-ratio: 16 / 11 !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .public-site .home-promo-carousel .carousel-controls {
        bottom: 24px !important;
    }

    .public-site .home-carousel-progress {
        left: 20px !important;
        right: 20px !important;
        bottom: 13px !important;
    }
}

/* Inicio: carrusel corredizo solo de productos */
.public-site .home-products-carousel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 14px;
    padding: clamp(14px, 2.4vw, 24px);
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(4, 18, 32, .96), rgba(8, 34, 50, .94)),
        #07111f;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .26),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.public-site .home-products-carousel::before,
.public-site .home-products-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: clamp(42px, 8vw, 110px);
    pointer-events: none;
}

.public-site .home-products-carousel::before {
    left: 0;
    background: linear-gradient(90deg, #07111f, rgba(7, 17, 31, .72), transparent);
}

.public-site .home-products-carousel::after {
    right: 0;
    background: linear-gradient(270deg, #07111f, rgba(7, 17, 31, .72), transparent);
}

.public-site .home-products-viewport {
    overflow: hidden;
    border-radius: 22px;
}

.public-site .home-products-track {
    display: flex;
    width: max-content;
    gap: clamp(14px, 2vw, 24px);
    animation: homeProductsFlow 34s linear infinite;
    will-change: transform;
}

.public-site .home-products-carousel:hover .home-products-track {
    animation-play-state: paused;
}

.public-site .home-product-slide {
    display: block;
    flex: 0 0 clamp(230px, 24vw, 360px);
    min-width: 0;
    border-radius: 22px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.public-site .home-product-slide:hover {
    transform: translateY(-4px);
}

.public-site .home-product-slide figure {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    padding: clamp(8px, 1vw, 14px);
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(2, 8, 23, .22);
}

.public-site .home-product-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}

.public-site .home-product-slide figcaption {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 16px;
    background: #f8fafc;
    color: #0f766e;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
}

.public-site .home-product-slide .image-error::before {
    content: "";
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #14b8a6, #38bdf8);
}

@keyframes homeProductsFlow {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - clamp(7px, 1vw, 12px))); }
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 12px;
        border-radius: 22px;
    }

    .public-site .home-products-viewport {
        border-radius: 18px;
    }

    .public-site .home-products-track {
        gap: 12px;
        animation-duration: 26s;
    }

    .public-site .home-product-slide {
        flex-basis: min(78vw, 320px);
        border-radius: 18px;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 16 / 11;
        padding: 8px;
    }

    .public-site .home-product-slide img {
        border-radius: 13px;
    }
}

/* Inicio: carrusel de productos en formato grande */
.public-site .home-products-carousel {
    padding: clamp(18px, 3vw, 34px) !important;
    border-radius: 32px !important;
}

.public-site .home-products-viewport {
    border-radius: 26px !important;
}

.public-site .home-products-track {
    gap: clamp(20px, 2.4vw, 32px) !important;
    animation-duration: 40s !important;
}

.public-site .home-product-slide {
    flex-basis: clamp(340px, 34vw, 540px) !important;
    border-radius: 28px !important;
}

.public-site .home-product-slide figure {
    aspect-ratio: 16 / 9 !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
    border-radius: inherit !important;
    box-shadow: 0 24px 52px rgba(2, 8, 23, .28) !important;
}

.public-site .home-product-slide img {
    border-radius: 22px !important;
}

@media (max-width: 900px) {
    .public-site .home-product-slide {
        flex-basis: min(82vw, 480px) !important;
    }
}

@media (max-width: 620px) {
    .public-site .home-products-carousel {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-track {
        gap: 16px !important;
        animation-duration: 30s !important;
    }

    .public-site .home-product-slide {
        flex-basis: 88vw !important;
        border-radius: 22px !important;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 16 / 10 !important;
        padding: 10px !important;
    }

    .public-site .home-product-slide img {
        border-radius: 16px !important;
    }
}

/* Inicio: carrusel una imagen por vez */
.public-site .home-products-carousel {
    padding: clamp(14px, 2.2vw, 24px) !important;
    border-radius: 30px !important;
}

.public-site .home-products-viewport {
    overflow: hidden !important;
    border-radius: 24px !important;
}

.public-site .home-products-track {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
    animation: none !important;
    transform: translateX(calc(var(--home-product-index, 0) * -100%));
    transition: transform 1.05s cubic-bezier(.22, .72, .18, 1);
}

.public-site .home-products-carousel:hover .home-products-track {
    animation: none !important;
}

.public-site .home-product-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: clamp(6px, 1vw, 10px);
    border-radius: 26px !important;
    opacity: .68;
    transform: scale(.985);
    transition: opacity .85s ease, transform .85s ease;
}

.public-site .home-product-slide.active {
    opacity: 1;
    transform: scale(1);
}

.public-site .home-product-slide:hover {
    transform: scale(1) !important;
}

.public-site .home-product-slide figure {
    aspect-ratio: 16 / 7 !important;
    min-height: clamp(310px, 38vw, 520px);
    padding: clamp(18px, 2vw, 34px) !important;
    border-radius: inherit !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .28),
        inset 0 0 0 1px rgba(15, 23, 42, .04) !important;
}

.public-site .home-product-slide img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 22px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.public-site .home-products-dots {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.public-site .home-products-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.public-site .home-products-dots button.active {
    width: 34px;
    background: #5eead4;
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 10px !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-viewport {
        border-radius: 18px !important;
    }

    .public-site .home-product-slide {
        padding: 4px;
        border-radius: 18px !important;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 4 / 3 !important;
        min-height: clamp(260px, 72vw, 430px);
        padding: 12px !important;
    }

    .public-site .home-product-slide img {
        border-radius: 14px !important;
    }
}

/* Admin: editor del carrusel de marketing */
.admin-area .admin-carousel-panel {
    margin-top: 18px;
}

.admin-area .admin-carousel-form {
    margin-bottom: 18px;
}

.admin-area .admin-carousel-form small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.admin-area .admin-carousel-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.admin-area .admin-carousel-item {
    display: grid;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.admin-area .admin-carousel-item figure {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 180px;
    margin: 0;
    overflow: hidden;
    padding: 10px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
}

.admin-area .admin-carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: contain;
    object-position: center;
}

.admin-area .admin-carousel-item figcaption {
    color: #64748b;
    font-weight: 900;
}

.admin-area .admin-carousel-item form {
    display: grid;
    align-content: space-between;
    gap: 14px;
}

@media (max-width: 900px) {
    .admin-area .admin-carousel-item {
        grid-template-columns: 1fr;
    }
}

/* Inicio: carrusel dividido imagen + frase de marketing */
.public-site .home-products-carousel {
    padding: clamp(14px, 2vw, 22px) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 82% 20%, rgba(20, 184, 166, .16), transparent 24rem),
        linear-gradient(135deg, #07111f 0%, #0a2638 54%, #071827 100%) !important;
}

.public-site .home-products-viewport {
    border-radius: 24px !important;
}

.public-site .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr);
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
    min-height: clamp(430px, 42vw, 610px);
    padding: clamp(24px, 4vw, 56px) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)) !important;
}

.public-site .home-product-slide.marketing-slide::before {
    opacity: .28 !important;
    filter: blur(30px) saturate(1.05) !important;
}

.public-site .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .marketing-slide-copy {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 16px;
    max-width: 560px;
}

.public-site .marketing-slide-copy span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(94, 234, 212, .28);
    border-radius: 999px;
    background: rgba(20, 184, 166, .12);
    color: #99f6e4;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 0;
}

.public-site .marketing-slide-copy h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 3.45vw, 3.85rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.public-site .marketing-slide-copy p {
    max-width: 500px;
    margin: 0;
    color: rgba(226, 232, 240, .86);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    font-weight: 600;
    line-height: 1.68;
}

.public-site .marketing-slide-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid rgba(94, 234, 212, .28);
    border-radius: 999px;
    background: #5eead4;
    color: #052e2b;
    font-size: .92rem;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(20, 184, 166, .22);
}

.public-site .marketing-slide-button:hover {
    transform: translateY(-1px);
    background: #99f6e4;
}

.public-site .home-product-slide.marketing-slide figure {
    z-index: 3;
    width: 100% !important;
    height: clamp(330px, 34vw, 500px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 24px 58px rgba(2, 8, 23, .3) !important;
}

.public-site .home-product-slide.marketing-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

.public-site .home-products-dots {
    margin-top: 12px !important;
}

@media (max-width: 900px) {
    .public-site .home-product-slide.marketing-slide {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px !important;
    }

    .public-site .marketing-slide-copy {
        max-width: 100%;
    }

    .public-site .marketing-slide-copy h2 {
        font-size: clamp(1.8rem, 7vw, 2.8rem);
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(300px, 74vw, 520px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 22px !important;
    }

    .public-site .home-product-slide.marketing-slide {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .public-site .marketing-slide-copy {
        gap: 12px;
    }

    .public-site .marketing-slide-button {
        width: 100%;
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(260px, 82vw, 420px) !important;
        border-radius: 18px !important;
    }
}

/* Inicio: banners de marketing bien redimensionados */
.public-site .home-products-carousel {
    padding: clamp(10px, 1.5vw, 16px) !important;
}

.public-site .home-products-viewport {
    background: #07111f;
}

.public-site .home-product-slide.marketing-slide {
    padding: 0 !important;
}

.public-site .home-product-slide.marketing-slide figure {
    aspect-ratio: 16 / 7 !important;
    min-height: clamp(300px, 34vw, 500px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #07111f !important;
    box-shadow: none !important;
}

.public-site .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 760px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 10 !important;
        min-height: clamp(250px, 68vw, 390px) !important;
    }
}

/* Inicio: mostrar imagen de marketing completa, sin recortes */
.public-site .home-product-slide.marketing-slide figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 7 !important;
    padding: 4px !important;
    background: #07111f !important;
}

.public-site .home-product-slide.marketing-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 20px !important;
}

@media (max-width: 760px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 9 !important;
        padding: 3px !important;
    }

    .public-site .home-product-slide.marketing-slide img {
        border-radius: 14px !important;
    }
}

/* Inicio: imagen de marketing con mayor presencia */
.public-site .home-products-carousel {
    padding: 8px !important;
}

.public-site .home-products-viewport,
.public-site .home-product-slide.marketing-slide,
.public-site .home-product-slide.marketing-slide figure {
    border-radius: 24px !important;
}

@media (min-width: 1200px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 6.6 !important;
    }
}

/* Inicio: carrusel marketing profesional para imagenes verticales/cuadradas */
.public-site .home-products-carousel {
    padding: clamp(12px, 2vw, 22px) !important;
    background:
        linear-gradient(135deg, rgba(3, 12, 25, .98), rgba(8, 32, 45, .96)) !important;
}

.public-site .home-products-viewport {
    border-radius: 30px !important;
}

.public-site .home-product-slide.marketing-slide {
    position: relative;
    overflow: hidden;
    border-radius: 30px !important;
    background: #07111f;
}

.public-site .home-product-slide.marketing-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .74), rgba(7, 17, 31, .2), rgba(7, 17, 31, .74)),
        var(--marketing-image);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.08);
    transform: scale(1.12);
    opacity: .58;
}

.public-site .home-product-slide.marketing-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(7, 17, 31, .44) 100%);
    pointer-events: none;
}

.public-site .home-product-slide.marketing-slide figure {
    position: relative;
    z-index: 2;
    height: clamp(520px, 58vw, 780px) !important;
    max-height: 78vh;
    padding: clamp(12px, 1.6vw, 22px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 30px 70px rgba(2, 8, 23, .28) !important;
}

.public-site .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 22px !important;
    filter: drop-shadow(0 24px 36px rgba(2, 8, 23, .28));
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-viewport,
    .public-site .home-product-slide.marketing-slide {
        border-radius: 20px !important;
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(430px, 118vw, 650px) !important;
        padding: 8px !important;
    }

    .public-site .home-product-slide.marketing-slide img {
        border-radius: 16px !important;
    }
}

/* FINAL Inicio: carrusel con frase editable + imagen */
.public-site .home-products-carousel .home-products-track {
    transform: translateX(calc(var(--home-product-index, 0) * -100%)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(300px, .85fr) minmax(380px, 1.15fr) !important;
    gap: clamp(24px, 3.5vw, 54px) !important;
    align-items: center !important;
    min-height: clamp(440px, 42vw, 620px) !important;
    padding: clamp(28px, 4.2vw, 60px) !important;
    background:
        radial-gradient(circle at 85% 28%, rgba(94, 234, 212, .18), transparent 22rem),
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    opacity: .22 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    gap: 16px !important;
    max-width: 560px !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.05rem, 3.45vw, 3.8rem) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.18vw, 1.12rem) !important;
    font-weight: 600 !important;
    line-height: 1.68 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    position: relative !important;
    z-index: 5 !important;
    height: clamp(330px, 34vw, 500px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(10px, 1.2vw, 16px) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .055) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 18px !important;
    filter: none !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure {
        height: clamp(300px, 72vw, 500px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-button {
        width: 100% !important;
    }
}

/* FINAL Inicio: ajuste real segun proporcion de imagen */
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait {
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 430px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square {
    grid-template-columns: minmax(300px, .95fr) minmax(340px, 520px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide {
    grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 430px) !important;
    height: clamp(430px, 45vw, 610px) !important;
    justify-self: center !important;
    padding: 8px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 520px) !important;
    height: clamp(380px, 38vw, 540px) !important;
    justify-self: center !important;
    padding: 8px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    width: 100% !important;
    height: clamp(320px, 32vw, 480px) !important;
    padding: 6px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Inicio: imagen del carrusel sin fondo blanco */
.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: none !important;
}

/* FINAL PRO: carrusel de marketing con presencia premium */
.public-site .home-products-carousel {
    margin-top: 18px !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(135deg, #06111f 0%, #08253a 48%, #081522 100%) !important;
    box-shadow:
        0 30px 72px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .home-products-viewport {
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    min-height: 34rem !important;
    padding: 3rem !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 54%, rgba(94,234,212,.07)) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    gap: 1rem !important;
    max-width: 34rem !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    min-height: 2.25rem !important;
    padding: 0 .9rem !important;
    border: 1px solid rgba(94, 234, 212, .32) !important;
    border-radius: 999px !important;
    background: rgba(20, 184, 166, .13) !important;
    color: #a7f3d0 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 33rem !important;
    color: #f8fafc !important;
    font-size: 3.1rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 18px 38px rgba(2, 8, 23, .36);
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 31rem !important;
    color: rgba(226, 232, 240, .9) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    font-weight: 650 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    min-height: 3rem !important;
    padding: 0 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    font-size: .94rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 36px rgba(45, 212, 191, .22) !important;
}

.public-site .home-products-carousel .marketing-slide-button:hover {
    background: linear-gradient(135deg, #99f6e4, #7dd3fc) !important;
    transform: translateY(-2px);
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    display: grid !important;
    place-items: center !important;
    height: 28rem !important;
    padding: .75rem !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 26px 56px rgba(2, 8, 23, .26) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: "";
    position: absolute;
    inset: .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    pointer-events: none;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 20px !important;
    filter: drop-shadow(0 22px 34px rgba(2, 8, 23, .28)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 28rem) !important;
    height: 32rem !important;
    justify-self: center !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 32rem) !important;
    height: 32rem !important;
    justify-self: center !important;
}

.public-site .home-products-carousel .home-products-dots button.active {
    background: #5eead4 !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .34);
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 1.5rem !important;
        min-height: 0 !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: 2.35rem !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
        width: 100% !important;
        height: 28rem !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: .5rem !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: 1.9rem !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy p {
        font-size: .95rem !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
        height: 24rem !important;
        border-radius: 18px !important;
    }
}

/* FINAL PRO: caja elegante para texto del carrusel */
.public-site .home-products-carousel .marketing-slide-copy {
    padding: clamp(1.25rem, 2.4vw, 2rem) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 22px 48px rgba(2, 8, 23, .18) !important;
    backdrop-filter: blur(14px);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    padding-bottom: .15rem;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    padding-left: .9rem;
    border-left: 3px solid rgba(94, 234, 212, .62);
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-copy {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy p {
        padding-left: .75rem;
    }
}

/* FINAL PRO: ritmo lento y cajas niveladas en el carrusel */
.public-site .home-products-carousel {
    --marketing-panel-height: clamp(28rem, 34vw, 34rem);
}

.public-site .home-products-carousel .home-products-track {
    transition: transform 1.45s cubic-bezier(.2, .72, .18, 1) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    align-items: stretch !important;
}

.public-site .home-products-carousel .marketing-slide-copy,
.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    height: var(--marketing-panel-height) !important;
    min-height: var(--marketing-panel-height) !important;
    max-height: var(--marketing-panel-height) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    align-self: stretch !important;
    align-content: center !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    align-self: stretch !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel {
        --marketing-panel-height: auto;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        height: clamp(25rem, 72vw, 33rem) !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* FINAL DELUXE: carrusel marketing mas llamativo y profesional */
.public-site .home-products-carousel {
    position: relative !important;
    margin-top: 22px !important;
    padding: clamp(14px, 2vw, 24px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(135deg, #06111f 0%, #08283d 48%, #061827 100%) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .38),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .home-products-carousel::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 33px;
    background:
        linear-gradient(120deg, rgba(94, 234, 212, .16), transparent 34%, rgba(125, 211, 252, .12));
    pointer-events: none;
}

.public-site .home-products-viewport {
    position: relative !important;
    z-index: 1 !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(2, 8, 23, .16) !important;
}

.public-site .home-products-carousel .home-products-track {
    transition: transform 1.7s cubic-bezier(.2, .72, .18, 1) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    grid-template-columns: minmax(310px, .9fr) minmax(390px, 1.1fr) !important;
    gap: clamp(26px, 4vw, 60px) !important;
    padding: clamp(30px, 4.8vw, 68px) !important;
    min-height: clamp(500px, 45vw, 680px) !important;
    align-items: stretch !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 54%, rgba(94, 234, 212, .075)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    opacity: .18 !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    align-self: stretch !important;
    display: grid !important;
    align-content: center !important;
    gap: 18px !important;
    min-height: 100% !important;
    padding: clamp(24px, 3vw, 38px) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .56), rgba(15, 23, 42, .22)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 26px 54px rgba(2, 8, 23, .22) !important;
    backdrop-filter: blur(18px);
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #5eead4, #38bdf8, #a78bfa);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-color: rgba(94, 234, 212, .32) !important;
    background: rgba(20, 184, 166, .14) !important;
    color: #ccfbf1 !important;
    font-size: .78rem !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 560px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.2rem, 3.7vw, 4.05rem) !important;
    line-height: 1.03 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 520px !important;
    margin: 0 !important;
    padding-left: 16px !important;
    border-left: 3px solid rgba(94, 234, 212, .7) !important;
    color: rgba(241, 245, 249, .88) !important;
    font-size: clamp(1rem, 1.16vw, 1.14rem) !important;
    line-height: 1.72 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    box-shadow:
        0 18px 36px rgba(45, 212, 191, .22),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(14px, 1.8vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 26px 58px rgba(2, 8, 23, .28) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    inset: 12px !important;
    border-radius: 22px !important;
    border-color: rgba(255,255,255,.12) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    object-fit: contain !important;
    border-radius: 20px !important;
    filter: drop-shadow(0 24px 38px rgba(2, 8, 23, .3)) !important;
}

.public-site .home-products-controlbar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px minmax(140px, 1fr) 44px;
    align-items: center;
    gap: 12px;
    width: min(520px, calc(100% - 24px));
    margin: 14px auto 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(2, 8, 23, .36);
    backdrop-filter: blur(14px);
}

.public-site .home-products-controlbar button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: 1.45rem;
    cursor: pointer;
}

.public-site .home-products-controlbar button:hover {
    border-color: rgba(94, 234, 212, .46);
    background: rgba(20, 184, 166, .18);
}

.public-site .home-products-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.public-site .home-products-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #a78bfa);
    transition: width .6s ease;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        min-height: auto !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        min-height: 400px !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        min-height: 330px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .public-site .home-products-controlbar {
        grid-template-columns: 40px 1fr 40px;
        width: 100%;
    }

    .public-site .home-products-controlbar button {
        width: 40px;
        height: 40px;
    }
}

/* Ajuste: titulo del carrusel mas elegante */
.public-site .home-products-carousel .marketing-slide-copy h2 {
    font-size: clamp(1.75rem, 2.55vw, 2.85rem) !important;
    line-height: 1.12 !important;
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.55rem, 7vw, 2.05rem) !important;
    }
}

/* FINAL limpio: un solo contenedor para el carrusel */
.public-site .home-products-carousel {
    padding: clamp(18px, 2.4vw, 30px) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 80% 22%, rgba(94, 234, 212, .16), transparent 24rem),
        radial-gradient(circle at 18% 82%, rgba(56, 189, 248, .1), transparent 22rem),
        linear-gradient(135deg, #06111f 0%, #08263a 52%, #061827 100%) !important;
    box-shadow: 0 30px 76px rgba(2, 8, 23, .34) !important;
}

.public-site .home-products-viewport {
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    grid-template-columns: minmax(300px, .86fr) minmax(360px, 1.14fr) !important;
    gap: clamp(28px, 4vw, 64px) !important;
    min-height: clamp(430px, 38vw, 560px) !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before,
.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    background: rgba(94, 234, 212, .13) !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 34rem !important;
    font-size: clamp(1.85rem, 2.65vw, 3rem) !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 32rem !important;
    padding-left: 1rem !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    height: clamp(320px, 32vw, 470px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    border-radius: 18px !important;
    filter: drop-shadow(0 22px 34px rgba(2, 8, 23, .34)) !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        height: clamp(280px, 72vw, 460px) !important;
    }
}

/* FINAL VISTA: carrusel principal profesional y limpio */
.public-site .home-products-carousel {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 22px !important;
    padding: clamp(22px, 3vw, 42px) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 86% 24%, rgba(20, 184, 166, .16), transparent 24rem),
        radial-gradient(circle at 12% 88%, rgba(56, 189, 248, .1), transparent 22rem),
        linear-gradient(135deg, #07111f 0%, #092438 48%, #071827 100%) !important;
    box-shadow:
        0 34px 82px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

.public-site .home-products-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.04));
    pointer-events: none;
}

.public-site .home-products-viewport {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(300px, .78fr) minmax(380px, 1.22fr) !important;
    gap: clamp(32px, 5vw, 76px) !important;
    align-items: center !important;
    min-height: clamp(430px, 39vw, 590px) !important;
    padding: clamp(10px, 1vw, 16px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before,
.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    align-content: center !important;
    gap: 15px !important;
    max-width: 36rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "";
    width: 4.5rem;
    height: 4px;
    order: -1;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(94, 234, 212, .24) !important;
    border-radius: 999px !important;
    background: rgba(15, 118, 110, .22) !important;
    color: #ccfbf1 !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 35rem !important;
    margin: 0 !important;
    color: #f8fafc !important;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.85rem, 2.65vw, 3.05rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 33rem !important;
    margin: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.08vw, 1.08rem) !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
    min-height: 48px !important;
    margin-top: 4px;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    font-size: .93rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(45, 212, 191, .18) !important;
}

.public-site .home-products-carousel .marketing-slide-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #99f6e4, #7dd3fc) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: clamp(330px, 34vw, 510px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 430px) !important;
    justify-self: center !important;
    height: clamp(390px, 39vw, 560px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 500px) !important;
    justify-self: center !important;
    height: clamp(360px, 36vw, 510px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 18px !important;
    filter: drop-shadow(0 24px 38px rgba(2, 8, 23, .38)) !important;
}

.public-site .home-products-controlbar {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(140px, 1fr) 42px !important;
    width: min(480px, 100%) !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-controlbar button {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .08) !important;
}

.public-site .home-products-progress {
    height: 5px !important;
    background: rgba(255, 255, 255, .13) !important;
}

.public-site .home-products-dots {
    margin-top: 10px !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(300px, 72vw, 480px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    }

    .public-site .home-products-carousel .marketing-slide-button {
        width: 100% !important;
    }
}

/* FINAL UNSM style: hero carousel amplio y profesional */
.public-site .home-products-carousel {
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #07111f !important;
    box-shadow: 0 30px 78px rgba(2, 8, 23, .34) !important;
}

.public-site .home-products-carousel::before {
    content: none !important;
}

.public-site .home-products-viewport {
    border-radius: inherit !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(320px, .78fr) minmax(380px, 1.22fr) !important;
    min-height: clamp(500px, 45vw, 690px) !important;
    gap: clamp(26px, 4vw, 68px) !important;
    align-items: center !important;
    padding: clamp(34px, 5vw, 74px) !important;
    background: #07111f !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .96) 0%, rgba(7, 17, 31, .82) 38%, rgba(7, 17, 31, .4) 72%, rgba(7, 17, 31, .84) 100%),
        var(--marketing-image);
    background-size: cover;
    background-position: center;
    filter: saturate(1.04);
    opacity: .95 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 82% 30%, rgba(94, 234, 212, .16), transparent 22rem);
    pointer-events: none;
}

.public-site .home-products-carousel .marketing-slide-copy {
    max-width: 36rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    width: 5rem !important;
    height: 5px !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8) !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    min-height: 34px !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    color: #dffdf7 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 35rem !important;
    font-size: clamp(1.9rem, 2.8vw, 3.15rem) !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 33rem !important;
    color: rgba(241, 245, 249, .9) !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    background: #ffffff !important;
    color: #07111f !important;
    box-shadow: 0 18px 40px rgba(2, 8, 23, .26) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    justify-self: center !important;
    width: min(100%, 620px) !important;
    height: clamp(360px, 36vw, 560px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 460px) !important;
    height: clamp(430px, 42vw, 620px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 540px) !important;
    height: clamp(390px, 38vw, 560px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    object-fit: contain !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .42)) !important;
}

.public-site .home-products-controlbar {
    position: absolute !important;
    right: clamp(18px, 3vw, 42px) !important;
    bottom: clamp(18px, 3vw, 36px) !important;
    z-index: 5 !important;
    width: min(360px, calc(100% - 36px)) !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    background: rgba(2, 8, 23, .5) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .home-products-controlbar button {
    background: rgba(255,255,255,.1) !important;
}

.public-site .home-products-dots {
    position: absolute !important;
    left: clamp(18px, 3vw, 42px);
    bottom: clamp(28px, 4vw, 48px);
    z-index: 5;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        padding: 28px 22px 92px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(290px, 70vw, 480px) !important;
    }

    .public-site .home-products-controlbar {
        right: 14px !important;
        bottom: 14px !important;
    }

    .public-site .home-products-dots {
        left: 18px;
        bottom: 28px;
    }
}

/* FINAL REAL: carrusel hero comercial, imagen protagonista */
.public-site .home-products-carousel {
    height: clamp(520px, 48vw, 720px) !important;
    margin-top: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #06111f !important;
    box-shadow: 0 34px 86px rgba(2, 8, 23, .38) !important;
}

.public-site .home-products-viewport,
.public-site .home-products-track {
    height: 100% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(6,17,31,.98) 0%, rgba(6,17,31,.9) 38%, rgba(6,17,31,.18) 70%, rgba(6,17,31,.58) 100%) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--marketing-image) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(18px) saturate(1.08) brightness(.72) !important;
    transform: scale(1.08) !important;
    opacity: .34 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(90deg, rgba(6,17,31,.98) 0%, rgba(6,17,31,.82) 40%, rgba(6,17,31,.18) 68%, rgba(6,17,31,.68) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.18), transparent 26rem) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: absolute !important;
    z-index: 4 !important;
    left: clamp(28px, 5vw, 72px) !important;
    top: 50% !important;
    width: min(42rem, 46%) !important;
    max-width: 42rem !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "" !important;
    width: 5.5rem !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8) !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.1) !important;
    color: #ccfbf1 !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 3vw, 3.35rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 34rem !important;
    margin: 0 !important;
    color: rgba(241,245,249,.88) !important;
    font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
    line-height: 1.72 !important;
    font-weight: 600 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #06111f !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 38px rgba(2,8,23,.32) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    position: absolute !important;
    z-index: 3 !important;
    right: clamp(24px, 5vw, 76px) !important;
    top: 50% !important;
    width: min(48%, 650px) !important;
    height: 82% !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(34%, 460px) !important;
    height: 88% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(42%, 540px) !important;
    height: 76% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 34px 44px rgba(0,0,0,.46)) !important;
}

.public-site .home-products-controlbar {
    position: absolute !important;
    z-index: 6 !important;
    left: clamp(28px, 5vw, 72px) !important;
    right: auto !important;
    bottom: clamp(24px, 4vw, 46px) !important;
    width: min(390px, 48%) !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    background: rgba(2,8,23,.48) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .home-products-dots {
    position: absolute !important;
    z-index: 6 !important;
    right: clamp(24px, 5vw, 76px) !important;
    left: auto !important;
    bottom: clamp(30px, 4vw, 52px) !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel {
        height: auto !important;
        min-height: 0 !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        min-height: 0 !important;
        padding: 28px 20px 96px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        height: clamp(300px, 72vw, 500px) !important;
        transform: none !important;
    }

    .public-site .home-products-controlbar {
        left: 18px !important;
        bottom: 18px !important;
        width: calc(100% - 36px) !important;
    }

    .public-site .home-products-dots {
        display: none !important;
    }
}

/* NUEVO CARRUSEL PROFESIONAL: componente aislado */
.public-site .marketing-hero-carousel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(520px, 46vw, 720px);
    margin-top: 22px;
    border-radius: 30px;
    background: #07111f;
    box-shadow: 0 34px 86px rgba(2, 8, 23, .36);
}

.public-site .marketing-hero-track {
    display: flex;
    width: 100%;
    min-height: inherit;
    transform: translateX(calc(var(--hero-index, 0) * -100%));
    transition: transform 1.6s cubic-bezier(.2, .72, .18, 1);
}

.public-site .marketing-hero-slide {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.22fr);
    flex: 0 0 100%;
    gap: clamp(28px, 5vw, 78px);
    align-items: center;
    min-height: inherit;
    padding: clamp(34px, 5vw, 76px);
    color: #ffffff;
}

.public-site .marketing-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.86) 42%, rgba(7,17,31,.36) 72%, rgba(7,17,31,.78) 100%),
        var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) brightness(.9);
}

.public-site .marketing-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.18), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 36%);
    pointer-events: none;
}

.public-site .marketing-hero-copy {
    display: grid;
    max-width: 38rem;
    gap: 15px;
    align-content: center;
}

.public-site .marketing-hero-copy::before {
    content: "";
    width: 5.5rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
}

.public-site .marketing-hero-copy span {
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #ccfbf1;
    font-size: .75rem;
    font-weight: 900;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.95rem, 2.85vw, 3.25rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.public-site .marketing-hero-copy p {
    max-width: 34rem;
    margin: 0;
    color: rgba(241,245,249,.88);
    font-size: clamp(.98rem, 1.12vw, 1.12rem);
    font-weight: 600;
    line-height: 1.72;
}

.public-site .marketing-hero-button {
    display: inline-flex;
    width: fit-content;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #06111f;
    font-size: .93rem;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(2,8,23,.32);
}

.public-site .marketing-hero-button:hover {
    transform: translateY(-2px);
    background: #ccfbf1;
}

.public-site .marketing-hero-media {
    display: grid;
    width: 100%;
    height: clamp(360px, 36vw, 580px);
    place-items: center;
    justify-self: center;
    margin: 0;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 460px);
    height: clamp(430px, 42vw, 640px);
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 560px);
    height: clamp(390px, 38vw, 580px);
}

.public-site .marketing-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 34px 44px rgba(0,0,0,.46));
}

.public-site .marketing-hero-media figcaption {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #5eead4;
    font-size: 4rem;
    font-weight: 900;
}

.public-site .marketing-hero-controls {
    position: absolute;
    z-index: 5;
    left: clamp(28px, 5vw, 76px);
    bottom: clamp(22px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: 42px minmax(130px, 1fr) 42px;
    align-items: center;
    gap: 10px;
    width: min(390px, 46%);
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(2,8,23,.48);
    backdrop-filter: blur(14px);
}

.public-site .marketing-hero-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #ffffff;
    font-size: 1.45rem;
    cursor: pointer;
}

.public-site .marketing-hero-controls button:hover {
    border-color: rgba(94,234,212,.48);
    background: rgba(20,184,166,.2);
}

.public-site .marketing-hero-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
}

.public-site .marketing-hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #a78bfa);
    transition: width .55s ease;
}

.public-site .marketing-hero-dots {
    position: absolute;
    z-index: 5;
    right: clamp(28px, 5vw, 76px);
    bottom: clamp(34px, 4.5vw, 58px);
    display: flex;
    gap: 8px;
}

.public-site .marketing-hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.public-site .marketing-hero-dots button.active {
    width: 34px;
    background: #5eead4;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-carousel {
        min-height: 0;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 20px 96px;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100%;
        height: clamp(300px, 72vw, 500px);
    }

    .public-site .marketing-hero-controls {
        left: 18px;
        bottom: 18px;
        width: calc(100% - 36px);
    }

    .public-site .marketing-hero-dots {
        display: none;
    }
}

@media (max-width: 560px) {
    .public-site .marketing-hero-carousel {
        border-radius: 22px;
    }

    .public-site .marketing-hero-slide {
        padding: 22px 16px 92px;
    }

    .public-site .marketing-hero-copy h2 {
        font-size: clamp(1.62rem, 7.4vw, 2.1rem);
    }

    .public-site .marketing-hero-button {
        width: 100%;
    }
}

/* Ajuste: carrusel sin fondo de cajon */
.public-site .marketing-hero-carousel {
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide {
    background: transparent !important;
}

.public-site .marketing-hero-slide::before {
    opacity: .22 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, .82) 0%, rgba(7, 17, 31, .62) 42%, rgba(7, 17, 31, .08) 72%, rgba(7, 17, 31, .28) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.12), transparent 24rem) !important;
}

/* Contorno elegante para texto e imagen del primer carrusel */
.public-site .marketing-hero-copy {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.8rem) !important;
    border-left: 4px solid rgba(94, 234, 212, .82) !important;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, rgba(7,17,31,.42), rgba(7,17,31,.06));
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 0;
    pointer-events: none;
}

.public-site .marketing-hero-media {
    position: relative;
    padding: clamp(.55rem, 1vw, .85rem);
    border-radius: 28px;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(94,234,212,.78), rgba(56,189,248,.24), rgba(255,255,255,.1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    border-radius: 22px !important;
}

/* Pulido premium: marcos con esquinas y profundidad visual */
.public-site .marketing-hero-copy {
    overflow: visible !important;
    padding: clamp(1.35rem, 2.4vw, 2.1rem) !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .marketing-hero-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5.25rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
    box-shadow: 0 0 24px rgba(94, 234, 212, .28);
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(94,234,212,.72), transparent 34%) top left / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(94,234,212,.72), transparent 44%) top left / 1px 100% no-repeat,
        linear-gradient(270deg, rgba(255,255,255,.18), transparent 32%) bottom right / 100% 1px no-repeat,
        linear-gradient(0deg, rgba(255,255,255,.18), transparent 42%) bottom right / 1px 100% no-repeat;
    pointer-events: none;
}

.public-site .marketing-hero-copy h2 {
    position: relative;
}

.public-site .marketing-hero-copy p {
    position: relative;
    padding-left: 1rem !important;
    border-left: 3px solid rgba(94, 234, 212, .68) !important;
}

.public-site .marketing-hero-media {
    isolation: isolate;
    overflow: visible;
    padding: clamp(.75rem, 1.2vw, 1.15rem) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(94,234,212,.13), transparent 62%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 28px 64px rgba(2, 8, 23, .26) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(94,234,212,.58), rgba(56,189,248,.16), rgba(255,255,255,.1));
    opacity: .9;
    pointer-events: none;
}

.public-site .marketing-hero-media::after {
    content: "";
    position: absolute;
    inset: .65rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 1;
    border-radius: 22px !important;
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.44)) !important;
}

@media (max-width: 560px) {
    .public-site .marketing-hero-copy {
        padding: 1rem !important;
    }

    .public-site .marketing-hero-media {
        padding: .55rem !important;
        border-radius: 22px !important;
    }

    .public-site .marketing-hero-media::after {
        inset: .45rem;
        border-radius: 16px;
    }
}

/* Acabado final refinado del carrusel principal */
.public-site .marketing-hero-carousel {
    margin-top: 24px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(5, 18, 34, .96), rgba(7, 36, 52, .94)) !important;
    box-shadow:
        0 28px 70px rgba(2, 8, 23, .3),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(310px, .82fr) minmax(380px, 1.18fr) !important;
    gap: clamp(34px, 5vw, 78px) !important;
    padding: clamp(38px, 5vw, 72px) !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(8px) saturate(1.02) brightness(.68) !important;
    opacity: .3 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(5,18,34,.94) 0%, rgba(5,18,34,.76) 42%, rgba(5,18,34,.16) 72%, rgba(5,18,34,.48) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.13), transparent 25rem) !important;
}

.public-site .marketing-hero-copy {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 38rem !important;
    gap: 14px !important;
}

.public-site .marketing-hero-copy::before {
    position: static !important;
    width: 4.75rem !important;
    height: 4px !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    background: rgba(94, 234, 212, .12) !important;
    border-color: rgba(94, 234, 212, .22) !important;
    color: #ccfbf1 !important;
    font-size: .73rem !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem !important;
    font-size: clamp(1.9rem, 2.7vw, 3rem) !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
}

.public-site .marketing-hero-copy p {
    max-width: 33rem !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.08vw, 1.08rem) !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    margin-top: 8px !important;
    padding: 0 22px !important;
    background: #ffffff !important;
    color: #06111f !important;
    box-shadow: 0 16px 32px rgba(2, 8, 23, .26) !important;
}

.public-site .marketing-hero-media {
    padding: clamp(.65rem, 1vw, .9rem) !important;
    border-radius: 26px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-media::before {
    inset: 0 !important;
    border-radius: inherit !important;
    background:
        linear-gradient(135deg, rgba(94,234,212,.72), rgba(56,189,248,.22), rgba(255,255,255,.12)) !important;
    opacity: .75 !important;
}

.public-site .marketing-hero-media::after {
    inset: .7rem !important;
    border-radius: 18px !important;
    border-color: rgba(255,255,255,.14) !important;
}

.public-site .marketing-hero-media img {
    border-radius: 18px !important;
    filter: drop-shadow(0 26px 38px rgba(0,0,0,.4)) !important;
}

.public-site .marketing-hero-controls {
    padding: 7px !important;
    background: rgba(2, 8, 23, .42) !important;
}

.public-site .marketing-hero-dots button.active {
    background: #5eead4 !important;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-slide {
        padding: 26px 20px 92px !important;
        gap: 24px !important;
    }

    .public-site .marketing-hero-media {
        padding: .5rem !important;
    }
}

/* ULTIMO ACABADO: showcase interactivo profesional */
.public-site .marketing-hero-carousel {
    --hero-accent: #5eead4;
    --hero-accent-2: #38bdf8;
    position: relative !important;
    isolation: isolate;
    min-height: clamp(540px, 48vw, 730px) !important;
    margin-top: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(135deg, rgba(5, 18, 34, .98), rgba(7, 32, 48, .96) 56%, rgba(5, 16, 30, .98)) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08), transparent 26%, transparent 74%, rgba(255,255,255,.04)),
        radial-gradient(circle at 78% 28%, rgba(94, 234, 212, .14), transparent 26rem);
    pointer-events: none;
}

.public-site .marketing-hero-track {
    position: relative !important;
    z-index: 1 !important;
    transition: transform 3.6s cubic-bezier(.18, .76, .16, 1) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(310px, .72fr) minmax(420px, 1.28fr) !important;
    gap: clamp(32px, 5vw, 82px) !important;
    padding: clamp(42px, 5.5vw, 82px) clamp(34px, 5vw, 80px) clamp(76px, 7vw, 104px) !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(20px) saturate(1.08) brightness(.72) !important;
    opacity: .32 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(5,18,34,.98) 0%, rgba(5,18,34,.82) 38%, rgba(5,18,34,.2) 72%, rgba(5,18,34,.52) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.15), transparent 25rem) !important;
}

.public-site .marketing-hero-copy {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    gap: 16px !important;
    max-width: 38rem !important;
    padding: 0 !important;
}

.public-site .marketing-hero-copy::before {
    position: static !important;
    width: 72px !important;
    height: 5px !important;
    background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2)) !important;
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(94,234,212,.58), transparent);
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(94, 234, 212, .28) !important;
    background: rgba(20, 184, 166, .14) !important;
    color: #ccfbf1 !important;
    font-size: .73rem !important;
    letter-spacing: 0 !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem !important;
    font-size: clamp(1.9rem, 2.75vw, 3.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
}

.public-site .marketing-hero-copy p {
    max-width: 34rem !important;
    color: rgba(226, 232, 240, .88) !important;
    font-size: clamp(.98rem, 1.08vw, 1.1rem) !important;
    line-height: 1.72 !important;
    font-weight: 600 !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #ffffff, #ccfbf1) !important;
    color: #06111f !important;
    box-shadow:
        0 18px 36px rgba(2,8,23,.28),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.public-site .marketing-hero-media {
    position: relative !important;
    width: 100% !important;
    height: clamp(380px, 38vw, 590px) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 480px) !important;
    height: clamp(440px, 43vw, 640px) !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 560px) !important;
    height: clamp(400px, 39vw, 580px) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 4% 2%;
    z-index: 0;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(94,234,212,.32), rgba(56,189,248,.1)),
        rgba(255,255,255,.045);
    transform: rotate(-2deg);
}

.public-site .marketing-hero-media::after {
    content: "";
    position: absolute;
    inset: 8% 7%;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 26px;
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 22px !important;
    filter: drop-shadow(0 32px 46px rgba(0,0,0,.44)) !important;
}

.public-site .marketing-hero-controls {
    left: clamp(34px, 5vw, 80px) !important;
    bottom: clamp(22px, 3.2vw, 38px) !important;
    width: min(430px, 48%) !important;
    padding: 8px !important;
}

.public-site .marketing-hero-counter {
    position: absolute;
    z-index: 5;
    right: clamp(34px, 5vw, 80px);
    top: clamp(28px, 4vw, 54px);
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
}

.public-site .marketing-hero-counter span:first-child {
    font-size: clamp(2rem, 3vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.public-site .marketing-hero-counter b,
.public-site .marketing-hero-counter span:last-child {
    color: rgba(226, 232, 240, .58);
    font-size: 1rem;
    font-weight: 900;
}

.public-site .marketing-hero-thumbs {
    position: absolute;
    z-index: 5;
    right: clamp(34px, 5vw, 80px);
    bottom: clamp(22px, 3.2vw, 38px);
    display: flex;
    gap: 10px;
}

.public-site .marketing-hero-thumbs button {
    width: 70px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background-color: rgba(255,255,255,.08);
    background-position: center;
    background-size: cover;
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.public-site .marketing-hero-thumbs button.active,
.public-site .marketing-hero-thumbs button:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(94,234,212,.72);
}

.public-site .marketing-hero-dots {
    display: none !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 30px 22px 120px !important;
    }

    .public-site .marketing-hero-copy::after {
        content: none;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100% !important;
        height: clamp(300px, 72vw, 500px) !important;
    }

    .public-site .marketing-hero-counter {
        display: none;
    }

    .public-site .marketing-hero-thumbs {
        display: none;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        width: calc(100% - 36px) !important;
    }
}

/* PRESENTACION FINAL: carrusel premium sobrio */
.public-site .marketing-hero-carousel {
    min-height: clamp(520px, 44vw, 680px) !important;
    margin-top: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 72% 32%, rgba(20, 184, 166, .2), transparent 24rem),
        linear-gradient(135deg, #07111f 0%, #092338 52%, #071827 100%) !important;
    box-shadow:
        0 32px 78px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr) !important;
    gap: clamp(28px, 4.6vw, 70px) !important;
    align-items: center !important;
    padding: clamp(38px, 5vw, 72px) !important;
}

.public-site .marketing-hero-slide::before {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .94), rgba(7, 17, 31, .78), rgba(7, 17, 31, .34)),
        var(--hero-bg) !important;
    filter: blur(18px) saturate(1.05) brightness(.72) !important;
    transform: scale(1.08) !important;
    opacity: .32 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, .96) 0%, rgba(7, 17, 31, .76) 48%, rgba(7, 17, 31, .16) 100%),
        radial-gradient(circle at 80% 38%, rgba(94,234,212,.18), transparent 22rem) !important;
}

.public-site .marketing-hero-copy {
    max-width: 36rem !important;
    gap: 14px !important;
}

.public-site .marketing-hero-copy::before {
    width: 5rem !important;
    height: 4px !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    background: rgba(94, 234, 212, .13) !important;
    border: 1px solid rgba(94, 234, 212, .28) !important;
    color: #ccfbf1 !important;
    font-size: .72rem !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 34rem !important;
    font-size: clamp(1.9rem, 2.55vw, 2.9rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

.public-site .marketing-hero-copy p {
    max-width: 32rem !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.06vw, 1.08rem) !important;
    line-height: 1.72 !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    padding: 0 22px !important;
    background: #ffffff !important;
    color: #07111f !important;
    box-shadow: 0 18px 36px rgba(2, 8, 23, .28) !important;
}

.public-site .marketing-hero-media {
    position: relative !important;
    width: min(100%, 620px) !important;
    height: clamp(350px, 34vw, 540px) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 440px) !important;
    height: clamp(420px, 42vw, 620px) !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 520px) !important;
    height: clamp(380px, 38vw, 560px) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 8% 0 2%;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(94, 234, 212, .18), transparent 64%);
    transform: none !important;
}

.public-site .marketing-hero-media::after {
    content: none !important;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .46)) !important;
}

.public-site .marketing-hero-counter,
.public-site .marketing-hero-thumbs,
.public-site .marketing-hero-dots {
    display: none !important;
}

.public-site .marketing-hero-controls {
    left: clamp(38px, 5vw, 72px) !important;
    bottom: clamp(24px, 3.5vw, 42px) !important;
    width: min(390px, 44%) !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(2,8,23,.42) !important;
}

.public-site .marketing-hero-controls button {
    width: 40px !important;
    height: 40px !important;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 26px 18px 92px !important;
        gap: 22px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100% !important;
        height: clamp(300px, 76vw, 500px) !important;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        bottom: 18px !important;
        width: calc(100% - 36px) !important;
    }
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide {
        grid-template-columns: 1fr !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(300px, 82vw, 560px) !important;
    }
}

/* CARRUSEL PRINCIPAL PRO: escaparate visual editable */
.public-site .marketing-hero-carousel {
    position: relative !important;
    min-height: clamp(560px, 44vw, 700px) !important;
    margin: clamp(20px, 3vw, 34px) 0 clamp(30px, 4vw, 54px) !important;
    border: 0 !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .98) 0%, rgba(5, 35, 52, .96) 45%, rgba(4, 16, 34, .99) 100%) !important;
    box-shadow:
        0 34px 90px rgba(2, 8, 23, .34),
        0 0 0 1px rgba(125, 211, 252, .12) !important;
    isolation: isolate !important;
    cursor: grab !important;
    user-select: none !important;
    touch-action: pan-y !important;
}

.public-site .marketing-hero-carousel.is-dragging {
    cursor: grabbing !important;
}

.public-site .marketing-hero-carousel.is-swiping .marketing-hero-button {
    pointer-events: none !important;
}

.public-site .marketing-hero-carousel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background:
        linear-gradient(120deg, rgba(45, 212, 191, .18), transparent 24%),
        linear-gradient(300deg, rgba(56, 189, 248, .16), transparent 30%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 96px) !important;
    opacity: .78 !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-carousel::after {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    z-index: 0 !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 24px !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-track {
    position: relative !important;
    z-index: 1 !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(390px, 1.12fr) minmax(320px, .88fr) !important;
    gap: clamp(28px, 5vw, 76px) !important;
    align-items: center !important;
    min-height: inherit !important;
    padding: clamp(42px, 5vw, 76px) clamp(34px, 5.6vw, 86px) clamp(88px, 6vw, 102px) !important;
}

.public-site .marketing-hero-slide::before {
    background-image:
        linear-gradient(90deg, rgba(2, 8, 23, .9), rgba(2, 8, 23, .74)),
        var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(28px) saturate(1.18) brightness(.72) !important;
    transform: scale(1.14) !important;
    opacity: .35 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        radial-gradient(circle at 28% 50%, rgba(45, 212, 191, .2), transparent 22rem),
        radial-gradient(circle at 78% 22%, rgba(59, 130, 246, .2), transparent 18rem),
        linear-gradient(90deg, rgba(2,8,23,.14), rgba(2,8,23,.62)) !important;
}

.public-site .marketing-hero-media {
    order: 2 !important;
    justify-self: center !important;
    width: min(100%, 680px) !important;
    height: clamp(390px, 36vw, 560px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 580px) !important;
    height: clamp(420px, 38vw, 590px) !important;
}

.public-site .marketing-hero-media::before {
    content: none !important;
}

.public-site .marketing-hero-media::after {
    content: none !important;
    position: absolute !important;
    inset: auto 24px 20px 24px !important;
    z-index: 0 !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(45, 212, 191, .28) !important;
    filter: blur(28px) !important;
}

.public-site .marketing-hero-media img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, .9))
        drop-shadow(0 0 8px rgba(94, 234, 212, .62))
        drop-shadow(0 18px 32px rgba(0, 0, 0, .42)) !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-copy {
    order: 1 !important;
    position: relative !important;
    max-width: 35rem !important;
    gap: 15px !important;
    padding: clamp(24px, 2.6vw, 34px) !important;
    border: 1.5px solid rgba(94, 234, 212, .56) !important;
    border-left: 0 !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .58), rgba(8, 47, 73, .28)) !important;
    box-shadow:
        0 24px 54px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 6px rgba(94, 234, 212, .045) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .marketing-hero-copy::before {
    content: "" !important;
    position: absolute !important;
    inset: -1.5px !important;
    z-index: -1 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(94, 234, 212, .75), rgba(56, 189, 248, .28), rgba(34, 197, 94, .52)) !important;
    box-shadow: 0 0 24px rgba(45, 212, 191, .2) !important;
    transform: none !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
    position: absolute !important;
    inset: -20px -14px -20px 10px !important;
    z-index: -1 !important;
    border-radius: 24px !important;
    background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    opacity: .55 !important;
}

.public-site .marketing-hero-copy span {
    min-height: 31px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(94, 234, 212, .42) !important;
    border-radius: 999px !important;
    background: rgba(13, 148, 136, .16) !important;
    color: #a7f3d0 !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 33rem !important;
    color: #ffffff !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.7rem, 2.25vw, 2.55rem) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    text-shadow: 0 16px 36px rgba(0,0,0,.3) !important;
}

.public-site .marketing-hero-copy p {
    max-width: 31rem !important;
    color: rgba(226, 232, 240, .88) !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(.96rem, 1.02vw, 1.08rem) !important;
    font-weight: 650 !important;
    line-height: 1.72 !important;
}

.public-site .marketing-hero-button {
    width: fit-content !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #22c55e) !important;
    color: #03221f !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(34, 197, 94, .22) !important;
}

.public-site .marketing-hero-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 44px rgba(34, 197, 94, .3) !important;
}

.public-site .marketing-hero-controls {
    z-index: 6 !important;
    left: clamp(34px, 5.6vw, 86px) !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    bottom: clamp(26px, 3vw, 38px) !important;
    width: auto !important;
    max-width: 520px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(120px, 1fr) 46px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.public-site .marketing-hero-controls button {
    width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #ecfeff !important;
    font-size: 1.55rem !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.26) !important;
}

.public-site .marketing-hero-progress {
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
    overflow: hidden !important;
}

.public-site .marketing-hero-progress span {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #22c55e) !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .62) !important;
}

.public-site .marketing-hero-counter {
    display: flex !important;
    z-index: 6 !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    bottom: clamp(29px, 3.1vw, 42px) !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.public-site .marketing-hero-counter span:first-child {
    color: #ffffff !important;
    font-size: 1.08rem !important;
}

.public-site .marketing-hero-counter b,
.public-site .marketing-hero-counter span:last-child {
    color: rgba(226, 232, 240, .52) !important;
    font-size: .9rem !important;
}

.public-site .marketing-hero-dots {
    display: flex !important;
    position: absolute !important;
    z-index: 6 !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    top: clamp(28px, 3.2vw, 44px) !important;
    gap: 9px !important;
}

.public-site .marketing-hero-dots button {
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.38) !important;
    cursor: pointer !important;
    transition: width .24s ease, background .24s ease, transform .24s ease !important;
}

.public-site .marketing-hero-dots button.active {
    width: 34px !important;
    background: #5eead4 !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .55) !important;
}

.public-site .marketing-hero-thumbs {
    display: none !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
        border-radius: 26px !important;
    }

    .public-site .marketing-hero-carousel::after {
        inset: 10px !important;
        border-radius: 18px !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 28px 18px 98px !important;
        gap: 24px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        order: 2 !important;
        width: 100% !important;
        height: clamp(300px, 74vw, 500px) !important;
        border-radius: 22px !important;
    }

    .public-site .marketing-hero-copy {
        order: 1 !important;
        max-width: none !important;
        padding: 22px !important;
        border-left: 0 !important;
    }

    .public-site .marketing-hero-copy::before {
        inset: -1.5px !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }

    .public-site .marketing-hero-copy h2 {
        font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        max-width: none !important;
        grid-template-columns: 42px minmax(90px, 1fr) 42px !important;
    }

    .public-site .marketing-hero-controls button {
        width: 42px !important;
        height: 42px !important;
    }

    .public-site .marketing-hero-counter {
        display: none !important;
    }

    .public-site .marketing-hero-dots {
        top: 22px !important;
        right: 22px !important;
    }
}

@media (max-width: 560px) {
    .public-site .marketing-hero-slide {
        padding: 22px 14px 92px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        height: clamp(270px, 82vw, 410px) !important;
        padding: 10px !important;
    }

    .public-site .marketing-hero-copy {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .public-site .marketing-hero-copy::before {
        width: auto !important;
        height: auto !important;
    }

    .public-site .marketing-hero-copy p {
        font-size: .94rem !important;
        line-height: 1.58 !important;
    }
}

/* Carrusel automatico sin controles visibles */
.public-site .marketing-hero-controls,
.public-site .marketing-hero-counter,
.public-site .marketing-hero-dots,
.public-site .marketing-hero-thumbs {
    display: none !important;
}

.public-site .marketing-hero-slide {
    padding-bottom: clamp(42px, 5vw, 76px) !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        padding-bottom: 28px !important;
    }
}

/* Optimizacion de rendimiento del carrusel principal */
.public-site .marketing-hero-carousel {
    contain: layout paint !important;
}

.public-site .marketing-hero-track {
    transform: translateX(calc(var(--hero-index, 0) * -100%)) translateZ(0) !important;
    transition: transform 1.15s cubic-bezier(.22, .72, .22, 1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

.public-site .marketing-hero-slide {
    backface-visibility: hidden !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(10px) saturate(1.04) brightness(.78) !important;
    transform: scale(1.03) !important;
    opacity: .22 !important;
}

.public-site .marketing-hero-copy {
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 4px rgba(94, 234, 212, .035) !important;
    backdrop-filter: blur(5px) !important;
}

.public-site .marketing-hero-copy::before {
    box-shadow: 0 0 12px rgba(45, 212, 191, .14) !important;
}

.public-site .marketing-hero-media::after {
    filter: blur(12px) !important;
}

.public-site .marketing-hero-media img {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, .82))
        drop-shadow(0 0 4px rgba(94, 234, 212, .42))
        drop-shadow(0 12px 22px rgba(0, 0, 0, .32)) !important;
}

/* Formato final del slider principal */
.public-site .marketing-hero-carousel {
    min-height: clamp(500px, 38vw, 620px) !important;
    border-radius: 30px !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .76fr) minmax(500px, 1.24fr) !important;
    gap: clamp(30px, 4.4vw, 70px) !important;
    padding: clamp(34px, 4vw, 58px) clamp(46px, 5.8vw, 86px) !important;
    overflow: visible !important;
}

.public-site .marketing-hero-copy {
    align-self: center !important;
    max-width: 34rem !important;
    padding: clamp(22px, 2.6vw, 32px) !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 30rem !important;
    font-size: clamp(1.55rem, 2vw, 2.25rem) !important;
}

.public-site .marketing-hero-copy p {
    max-width: 29rem !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    align-self: center !important;
    justify-self: end !important;
    width: min(100%, 760px) !important;
    height: clamp(430px, 38vw, 620px) !important;
    overflow: visible !important;
}

.public-site .marketing-hero-media img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 24px 18px 34px !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    .public-site .marketing-hero-copy {
        max-width: none !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        justify-self: center !important;
        width: 100% !important;
        height: clamp(350px, 84vw, 560px) !important;
        overflow: visible !important;
    }
}

/* Correccion: las imagenes del slider siempre por encima del fondo */
.public-site .marketing-hero-slide {
    isolation: isolate !important;
}

.public-site .marketing-hero-slide::before,
.public-site .marketing-hero-slide::after {
    z-index: 0 !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-copy {
    position: relative !important;
    z-index: 3 !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media,
.public-site .marketing-hero-slide.is-wide .marketing-hero-media {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.public-site .marketing-hero-media::before,
.public-site .marketing-hero-media::after {
    content: none !important;
    display: none !important;
}

.public-site .marketing-hero-media img {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Slider limpio: ningun fondo interno debe tapar las imagenes */
.public-site .marketing-hero-slide::before,
.public-site .marketing-hero-slide::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.public-site .marketing-hero-carousel::after {
    content: none !important;
    display: none !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr) !important;
    align-items: center !important;
    overflow: hidden !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-wide .marketing-hero-media {
    width: min(100%, 760px) !important;
    height: clamp(430px, 38vw, 620px) !important;
    justify-self: end !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 640px) !important;
    height: clamp(420px, 36vw, 580px) !important;
    justify-self: end !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 500px) !important;
    height: clamp(470px, 42vw, 680px) !important;
    justify-self: center !important;
}

.public-site .marketing-hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        overflow: visible !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-wide .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
        width: 100% !important;
        height: clamp(330px, 82vw, 560px) !important;
        justify-self: center !important;
    }
}

/* Adaptacion AdminLTE para el administrable */
.adminlte-area {
    --lte-sidebar-width: 270px;
    background: #f4f6f9 !important;
}

.adminlte-area .app-wrapper {
    min-height: 100vh;
}

.adminlte-area .app-header {
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.adminlte-area .app-sidebar {
    background: #111827 !important;
}

.adminlte-area .sidebar-brand {
    min-height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.adminlte-area .brand-link {
    color: #fff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 900;
    text-decoration: none;
}

.adminlte-area .sidebar-menu .nav-link {
    min-height: 44px;
    margin: 4px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .75);
    font-weight: 800;
}

.adminlte-area .sidebar-menu .nav-link:hover,
.adminlte-area .sidebar-menu .nav-link.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(20, 184, 166, .2));
    color: #fff;
}

.adminlte-area .nav-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #a7f3d0;
    font-size: .78rem;
    font-weight: 950;
}

.adminlte-area .adminlte-menu-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 950;
}

.adminlte-area .app-content {
    padding: 22px;
}

.adminlte-area .admin-page {
    max-width: 1600px;
}

.adminlte-area .section-head,
.adminlte-area .admin-store-dashboard article,
.adminlte-area .admin-config-panel,
.adminlte-area .admin-category-filter,
.adminlte-area .admin-product-card-wrap,
.adminlte-area .panel,
.adminlte-area .form-panel,
.adminlte-area .notice {
    border-color: rgba(15, 23, 42, .08);
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.adminlte-area .section-head {
    margin-top: 0;
    border-radius: 18px;
}

.adminlte-area .admin-store-dashboard {
    margin-bottom: 4px;
}

.adminlte-area .admin-config-panel > summary {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.adminlte-area .admin-workspace {
    grid-template-columns: 270px minmax(0, 1fr);
}

.adminlte-area .admin-sidebar {
    top: 86px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.adminlte-area .admin-crud-table {
    box-shadow: none;
}

@media (max-width: 991px) {
    .adminlte-area .app-content {
        padding: 16px;
    }

    .adminlte-area .admin-workspace {
        grid-template-columns: 1fr;
    }
}

/* AdminLTE acabado profesional */
.adminlte-area {
    color: #1f2937;
    font-family: "Manrope", "Inter", system-ui, sans-serif;
}

.adminlte-area .app-main {
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.adminlte-area .app-header {
    min-height: 62px;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(12px);
}

.adminlte-area .navbar-nav .nav-link {
    color: #475569;
    font-weight: 850;
}

.adminlte-area .admin-top-title {
    color: #0f172a !important;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 900 !important;
}

.adminlte-area .admin-top-link,
.adminlte-area .admin-logout-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 14px !important;
    border-radius: 999px;
    background: #f1f5f9;
}

.adminlte-area .admin-logout-link {
    background: #fee2e2;
    color: #991b1b !important;
}

.adminlte-area .app-sidebar {
    background:
        linear-gradient(180deg, #06111f 0%, #0f172a 52%, #08111f 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 18px 0 38px rgba(15, 23, 42, .16) !important;
}

.adminlte-area .sidebar-brand {
    min-height: 74px;
    padding: 0 18px;
}

.adminlte-area .brand-link {
    display: flex !important;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.adminlte-area .admin-brand-mark,
.adminlte-area .admin-user-panel > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #031827;
    font-size: .86rem;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(45, 212, 191, .2);
}

.adminlte-area .brand-text {
    color: #f8fafc;
    font-size: 1.02rem;
    font-weight: 950 !important;
    letter-spacing: 0;
}

.adminlte-area .admin-user-panel {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 16px 14px 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
}

.adminlte-area .admin-user-panel > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: none;
}

.adminlte-area .admin-user-panel div {
    display: grid;
    min-width: 0;
}

.adminlte-area .admin-user-panel strong {
    overflow: hidden;
    color: #ffffff;
    font-size: .9rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminlte-area .admin-user-panel small {
    color: rgba(226,232,240,.68);
    font-size: .78rem;
    font-weight: 800;
}

.adminlte-area .nav-header {
    margin: 12px 18px 6px;
    color: rgba(226, 232, 240, .44);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.adminlte-area .sidebar-menu .nav-link {
    min-height: 46px;
    margin: 5px 12px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.adminlte-area .sidebar-menu .nav-link p {
    margin: 0;
    font-size: .91rem;
    letter-spacing: 0;
}

.adminlte-area .sidebar-menu .nav-link.active {
    border-color: rgba(94, 234, 212, .2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.adminlte-area .nav-icon {
    background: rgba(255,255,255,.09);
}

.adminlte-area .nav-icon svg,
.adminlte-area .adminlte-menu-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.adminlte-area .nav-icon svg path:first-child:last-child {
    fill: currentColor;
    stroke: none;
}

.adminlte-area .section-head {
    padding: 22px 24px;
    border: 0;
    background:
        linear-gradient(135deg, #ffffff, #f8fafc) !important;
}

.adminlte-area .section-head h1 {
    margin: 2px 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 900;
}

.adminlte-area .eyebrow {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.adminlte-area .admin-store-dashboard article {
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.adminlte-area .admin-store-dashboard strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
}

.adminlte-area .admin-sidebar {
    border: 0;
    border-radius: 22px;
}

.adminlte-area .admin-sidebar button {
    min-height: 48px;
    background: #ffffff;
}

.adminlte-area .admin-config-panel,
.adminlte-area .admin-product-card-wrap,
.adminlte-area .admin-category-filter {
    border: 0;
    border-radius: 22px;
}

.adminlte-area .admin-config-panel > summary {
    padding: 20px 22px;
}

.adminlte-area .admin-config-panel > summary span {
    color: #0f172a;
}

.adminlte-area .admin-crud-overview,
.adminlte-area .form-panel {
    background: #ffffff;
}

.adminlte-area input,
.adminlte-area textarea,
.adminlte-area select {
    border-color: #dbe3ef;
    border-radius: 12px;
    background: #f8fafc;
}

.adminlte-area input:focus,
.adminlte-area textarea:focus,
.adminlte-area select:focus {
    outline: 3px solid rgba(14, 165, 233, .14);
    border-color: #38bdf8;
    background: #fff;
}

.adminlte-area .btn {
    border-radius: 999px;
    font-weight: 950;
}

.adminlte-area .btn.primary,
.adminlte-area .btn.dark {
    border: 0;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #fff;
    box-shadow: 0 14px 26px rgba(14, 165, 233, .16);
}

.adminlte-area .admin-crud-table {
    border: 0;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.adminlte-area .admin-crud-table th {
    background: #eef6ff;
}

.adminlte-area .app-footer {
    border-top: 1px solid rgba(15, 23, 42, .08);
    color: #64748b;
    font-weight: 800;
}

.adminlte-area .sidebar-overlay,
.adminlte-area .skip-links,
.adminlte-area .live-region {
    display: none !important;
}

.adminlte-area.sidebar-collapse .app-sidebar {
    transform: translateX(-100%);
}

.adminlte-area.sidebar-collapse .app-main,
.adminlte-area.sidebar-collapse .app-header,
.adminlte-area.sidebar-collapse .app-footer {
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .adminlte-area .app-main,
    .adminlte-area .app-header,
    .adminlte-area .app-footer {
        transition: margin-left .2s ease;
    }

    .adminlte-area .app-sidebar {
        transition: transform .2s ease;
    }
}

/* Login interactivo tipo marketplace */
body.admin-area.admin-only:not(.adminlte-area) {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 17% 18%, rgba(56, 189, 248, .16), transparent 20rem),
        radial-gradient(circle at 82% 76%, rgba(45, 212, 191, .18), transparent 23rem),
        linear-gradient(135deg, #07111f 0%, #0f172a 52%, #052f33 100%) !important;
}

.admin-login-v3 {
    min-height: 100vh !important;
    padding: clamp(18px, 3vw, 36px) !important;
    place-items: center !important;
    background: transparent !important;
}

.admin-login-v3 .admin-login-frame {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(330px, .94fr) minmax(380px, 430px) !important;
    width: min(1060px, 100%) !important;
    min-height: clamp(560px, 72vh, 660px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 30px !important;
    background: rgba(15, 23, 42, .72) !important;
    box-shadow: 0 34px 90px rgba(2, 6, 23, .52) !important;
    backdrop-filter: blur(18px);
}

.admin-login-v3 .admin-login-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(94, 234, 212, .2), transparent 25%, transparent 75%, rgba(14, 165, 233, .18)),
        linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 34%);
    opacity: .75;
}

.admin-login-v3 .admin-login-image-panel {
    position: relative;
    display: grid;
    min-height: 100%;
    margin: 0;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(8, 47, 73, .96), rgba(15, 118, 110, .92) 56%, rgba(2, 8, 23, .96)) !important;
}

.admin-login-v3 .admin-login-image-panel::before {
    content: "";
    position: absolute;
    inset: 28px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .14), transparent 13rem),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.admin-login-v3 .admin-login-image-panel::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(94, 234, 212, .15);
    filter: blur(26px);
    transform: translate(40px, 38px);
}

.admin-login-v3 .admin-login-image-panel img,
.admin-login-v3 .admin-login-image-panel figcaption {
    position: relative;
    z-index: 2;
}

.admin-login-v3 .admin-login-image-panel img {
    width: min(72%, 390px);
    height: min(72%, 390px);
    max-height: 430px;
    padding: 24px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background: rgba(2, 8, 23, .22);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
    transition: transform .28s ease, box-shadow .28s ease;
}

.admin-login-v3 .admin-login-image-panel:hover img {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
}

.admin-login-v3 .admin-login-image-panel figcaption {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    border-radius: 30px;
    background: #ffffff;
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 950;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}

.admin-login-v3 .admin-login-card {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 18px;
    height: 100%;
    padding: clamp(36px, 5vw, 58px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card::before,
.admin-login-v3 .admin-login-card::after {
    content: none !important;
}

.admin-login-v3 .admin-login-logo {
    display: grid !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 auto 4px !important;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .11) !important;
}

.admin-login-v3 .admin-login-logo img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.admin-login-v3 .admin-login-logo span {
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 950;
}

.admin-login-v3 .login-card-head {
    gap: 7px;
    margin: 0 0 8px;
    text-align: center;
}

.admin-login-v3 .login-card-head span {
    margin: 0 auto;
    padding: 6px 12px;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-login-v3 .login-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.7rem, 2.2vw, 2.05rem);
    font-weight: 900;
    letter-spacing: 0;
}

.admin-login-v3 .admin-login-card label {
    display: grid;
    gap: 9px;
    color: #1e293b;
    font-size: .88rem;
    font-weight: 900;
}

.admin-login-v3 .login-input-wrap {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .055);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.admin-login-v3 .login-user-wrap,
.admin-login-v3 .login-password-wrap {
    grid-template-columns: 50px minmax(0, 1fr) 46px;
}

.admin-login-v3 .login-input-wrap.is-focused,
.admin-login-v3 .login-input-wrap:focus-within {
    border-color: #0ea5e9;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 18px 36px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.admin-login-v3 .login-input-wrap b {
    display: grid;
    width: 50px;
    height: 100%;
    place-items: center;
    color: #0f766e;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
}

.admin-login-v3 .login-input-wrap b svg,
.admin-login-v3 .login-clear-toggle svg,
.admin-login-v3 .login-password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.admin-login-v3 .login-input-wrap input {
    width: 100%;
    min-height: 58px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: .98rem;
    font-weight: 750;
}

.admin-login-v3 .login-input-wrap input:focus {
    outline: 0;
}

.admin-login-v3 .login-input-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.admin-login-v3 .login-clear-toggle,
.admin-login-v3 .login-password-toggle {
    display: grid;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.admin-login-v3 .login-clear-toggle {
    opacity: 0;
    pointer-events: none;
}

.admin-login-v3 .login-input-wrap.has-value .login-clear-toggle {
    opacity: 1;
    pointer-events: auto;
}

.admin-login-v3 .login-clear-toggle:hover,
.admin-login-v3 .login-password-toggle:hover,
.admin-login-v3 .login-password-toggle.is-visible {
    border-color: rgba(15, 118, 110, .2);
    background: #ecfeff;
    color: #0f766e;
    transform: scale(1.04);
}

.admin-login-v3 .notice.danger {
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 14px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 850;
}

.admin-login-v3 .login-submit {
    position: relative;
    display: inline-grid;
    min-height: 58px;
    margin-top: 2px;
    place-items: center;
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 48%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 20px 38px rgba(14, 165, 233, .25);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.admin-login-v3 .login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
    transform: translateX(-115%);
    transition: transform .55s ease;
}

.admin-login-v3 .login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 46px rgba(14, 165, 233, .31);
    filter: saturate(1.07);
}

.admin-login-v3 .login-submit:hover::before {
    transform: translateX(115%);
}

.admin-login-v3 .login-submit.is-loading {
    cursor: wait;
    opacity: .88;
}

.admin-login-v3 .login-submit.is-loading::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .44);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: loginSpin .7s linear infinite;
}

.admin-login-v3 .admin-login-foot {
    justify-content: center;
    margin-top: 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
    text-align: center;
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    .admin-login-v3 .admin-login-image-panel {
        min-height: 230px;
    }

    .admin-login-v3 .admin-login-image-panel::before {
        inset: 18px;
        border-radius: 20px;
    }

    .admin-login-v3 .admin-login-image-panel img {
        width: min(54%, 240px);
        height: min(54%, 240px);
        padding: 14px;
        border-radius: 22px;
    }

    .admin-login-v3 .admin-login-card {
        padding: 32px 24px 28px !important;
    }
}

@media (max-width: 520px) {
    .admin-login-v3 {
        padding: 12px !important;
    }

    .admin-login-v3 .admin-login-image-panel {
        min-height: 190px;
    }

    .admin-login-v3 .admin-login-image-panel img {
        width: min(58%, 190px);
        height: min(58%, 190px);
    }

    .admin-login-v3 .admin-login-logo {
        width: 64px !important;
        height: 64px !important;
        border-radius: 18px !important;
    }

    .admin-login-v3 .login-card-head h2 {
        font-size: 1.55rem;
    }

    .admin-login-v3 .login-user-wrap,
    .admin-login-v3 .login-password-wrap {
        grid-template-columns: 46px minmax(0, 1fr) 42px;
    }

    .admin-login-v3 .login-input-wrap b {
        width: 46px;
    }
}

/* Modulo publico de compra */
.public-site .purchase-module {
    display: grid;
    gap: 20px;
    width: min(1180px, calc(100% - 32px));
    margin: clamp(18px, 3vw, 34px) auto clamp(42px, 6vw, 84px);
}

.public-site .purchase-back {
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.public-site .purchase-back:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

.public-site .purchase-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: stretch;
}

.public-site .purchase-product,
.public-site .purchase-checkout,
.public-site .purchase-success-card {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .93));
    box-shadow: 0 24px 70px rgba(2, 6, 23, .22);
}

.public-site .purchase-product {
    display: grid;
    grid-template-rows: minmax(320px, 430px) auto;
    overflow: hidden;
}

.public-site .purchase-image {
    position: relative;
    display: grid;
    min-height: 320px;
    margin: 0;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(94, 234, 212, .24), transparent 17rem),
        linear-gradient(135deg, #082f49, #0f766e 54%, #020817);
}

.public-site .purchase-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .purchase-image img {
    position: relative;
    z-index: 1;
    width: min(76%, 460px);
    height: min(76%, 360px);
    object-fit: contain;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .36));
}

.public-site .purchase-image > span {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 999px;
    background: #22c55e;
    color: #052e16;
    font-size: .78rem;
    font-weight: 950;
}

.public-site .purchase-image figcaption {
    position: relative;
    z-index: 1;
    display: grid;
    width: 130px;
    height: 130px;
    place-items: center;
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 950;
}

.public-site .purchase-product-info {
    display: grid;
    gap: 15px;
    padding: clamp(22px, 3vw, 34px);
}

.public-site .purchase-product-info h1 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
}

.public-site .purchase-product-info p {
    max-width: 720px;
    margin: 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.65;
}

.public-site .purchase-product-metrics,
.public-site .purchase-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.public-site .purchase-product-metrics article,
.public-site .purchase-summary-grid article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.public-site .purchase-product-metrics small,
.public-site .purchase-summary-grid small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-site .purchase-product-metrics strong,
.public-site .purchase-summary-grid strong {
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: .98rem;
    font-weight: 950;
}

.public-site .purchase-product-metrics del {
    color: #94a3b8;
    font-size: .86rem;
    font-weight: 800;
}

.public-site .purchase-checkout {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: clamp(22px, 3vw, 34px);
}

.public-site .purchase-checkout-head {
    display: grid;
    gap: 7px;
}

.public-site .purchase-checkout-head span,
.public-site .purchase-success-card > span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .purchase-checkout-head h2,
.public-site .purchase-success-card h1 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.public-site .purchase-checkout-head p,
.public-site .purchase-success-card p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
    line-height: 1.55;
}

.public-site .purchase-form {
    display: grid;
    gap: 14px;
}

.public-site .purchase-form label {
    display: grid;
    gap: 7px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 900;
}

.public-site .purchase-form input,
.public-site .purchase-form select,
.public-site .purchase-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.public-site .purchase-form textarea {
    min-height: 92px;
    padding-top: 12px;
    resize: vertical;
}

.public-site .purchase-form input:focus,
.public-site .purchase-form select:focus,
.public-site .purchase-form textarea:focus {
    outline: 0;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
}

.public-site .purchase-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
}

.public-site .purchase-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, #f0fdfa, #eff6ff);
}

.public-site .purchase-total span {
    color: #0f766e;
    font-size: .88rem;
    font-weight: 950;
}

.public-site .purchase-total strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.public-site .purchase-submit {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
}

.public-site .purchase-submit:disabled {
    cursor: wait;
    opacity: .75;
}

.public-site .purchase-unavailable {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 18px;
    background: #fffbeb;
}

.public-site .purchase-unavailable strong {
    color: #92400e;
    font-family: "Poppins", "Manrope", sans-serif;
}

.public-site .purchase-unavailable p {
    margin: 0;
    color: #78350f;
    font-weight: 700;
}

.public-site .purchase-success {
    display: grid;
    min-height: 520px;
    place-items: center;
}

.public-site .purchase-success-card {
    display: grid;
    gap: 18px;
    width: min(760px, 100%);
    padding: clamp(26px, 4vw, 42px);
    text-align: left;
}

.public-site .purchase-success-card h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.public-site .purchase-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.public-site .purchase-success-actions .btn {
    min-height: 48px;
    border-radius: 999px;
}

@media (max-width: 900px) {
    .public-site .purchase-layout {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-product {
        grid-template-rows: minmax(240px, 320px) auto;
    }
}

@media (max-width: 620px) {
    .public-site .purchase-module {
        width: min(100% - 20px, 1180px);
        margin-top: 12px;
    }

    .public-site .purchase-product,
    .public-site .purchase-checkout,
    .public-site .purchase-success-card {
        border-radius: 20px;
    }

    .public-site .purchase-product-metrics,
    .public-site .purchase-summary-grid,
    .public-site .purchase-form-row {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-image img {
        width: min(82%, 320px);
        height: min(74%, 250px);
    }

    .public-site .purchase-success-actions .btn {
        width: 100%;
    }
}

/* Compra premium: pasos, pagos y resumen */
.public-site .purchase-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.public-site .purchase-safe-note {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(94, 234, 212, .26);
    border-radius: 999px;
    background: rgba(8, 47, 73, .46);
    color: #dffcf7;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.public-site .purchase-safe-note span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
}

.public-site .purchase-steps,
.public-site .purchase-status-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.public-site .purchase-steps article,
.public-site .purchase-status-line article {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    color: #64748b;
    font-size: .8rem;
    font-weight: 900;
}

.public-site .purchase-steps b,
.public-site .purchase-status-line b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .78rem;
}

.public-site .purchase-steps .active,
.public-site .purchase-status-line .active {
    border-color: rgba(14, 165, 233, .2);
    background: #eff6ff;
    color: #075985;
}

.public-site .purchase-status-line .done {
    border-color: rgba(34, 197, 94, .22);
    background: #f0fdf4;
    color: #166534;
}

.public-site .purchase-steps .active b,
.public-site .purchase-status-line .active b {
    background: #0ea5e9;
    color: #ffffff;
}

.public-site .purchase-status-line .done b {
    background: #22c55e;
    color: #ffffff;
}

.public-site .purchase-fieldset,
.public-site .purchase-payment-box {
    display: grid;
    gap: 12px;
}

.public-site .purchase-fieldset > strong,
.public-site .purchase-payment-box > strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .98rem;
    font-weight: 900;
}

.public-site .purchase-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.public-site .purchase-payment-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px !important;
    align-items: center;
    min-height: 78px;
    padding: 12px !important;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.public-site .purchase-payment-option:hover,
.public-site .purchase-payment-option.is-selected {
    border-color: rgba(15, 118, 110, .32);
    background: linear-gradient(135deg, #ffffff, #f0fdfa);
    box-shadow: 0 18px 34px rgba(15, 118, 110, .1);
    transform: translateY(-1px);
}

.public-site .purchase-payment-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
}

.public-site .purchase-payment-option .payment-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
}

.public-site .purchase-payment-option.is-selected .payment-icon {
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #ffffff;
}

.public-site .purchase-payment-option span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-site .purchase-payment-option span:last-child strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-payment-option span:last-child small {
    color: #64748b;
    font-size: .73rem;
    font-weight: 750;
    line-height: 1.25;
}

.public-site .purchase-order-summary {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.public-site .purchase-order-summary > div {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
}

.public-site .purchase-order-summary > div:last-child {
    border-bottom: 0;
}

.public-site .purchase-order-summary span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
}

.public-site .purchase-order-summary strong {
    max-width: 58%;
    overflow: hidden;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-total {
    border-color: rgba(14, 165, 233, .2);
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .1), rgba(14, 165, 233, .12)),
        #ffffff;
}

.public-site .purchase-security {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.public-site .purchase-security span {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 850;
}

.public-site .purchase-success-icon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(34, 197, 94, .22);
}

.public-site .purchase-success-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.public-site .purchase-next-step {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 16px;
    background: #eff6ff;
}

.public-site .purchase-next-step strong {
    color: #075985;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .92rem;
}

.public-site .purchase-next-step span {
    color: #334155;
    font-size: .88rem;
    font-weight: 750;
}

@media (max-width: 700px) {
    .public-site .purchase-topline {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .purchase-safe-note,
    .public-site .purchase-back {
        justify-content: center;
        width: 100%;
    }

    .public-site .purchase-payment-grid,
    .public-site .purchase-steps,
    .public-site .purchase-status-line {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-order-summary > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .public-site .purchase-order-summary strong {
        max-width: 100%;
        text-align: left;
        white-space: normal;
    }
}

/* Login y cuenta de cliente */
.public-site .customer-auth-page,
.public-site .customer-account-page {
    width: min(1180px, calc(100% - 32px));
    margin: clamp(20px, 4vw, 46px) auto clamp(46px, 7vw, 90px);
}

.public-site .customer-auth-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .86fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 30px;
    background: rgba(15, 23, 42, .76);
    box-shadow: 0 34px 90px rgba(2, 6, 23, .42);
}

.public-site .customer-auth-visual {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height: 620px;
    padding: clamp(34px, 5vw, 64px);
    background:
        radial-gradient(circle at 28% 20%, rgba(94, 234, 212, .24), transparent 18rem),
        linear-gradient(135deg, #082f49 0%, #0f766e 55%, #020817 100%);
    color: #ffffff;
}

.public-site .customer-auth-visual > span {
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #ccfbf1;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .customer-auth-visual h1 {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
}

.public-site .customer-auth-visual p {
    max-width: 560px;
    margin: 0;
    color: rgba(241, 245, 249, .82);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}

.public-site .customer-auth-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.public-site .customer-auth-benefits article {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
}

.public-site .customer-auth-benefits b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 950;
}

.public-site .customer-auth-benefits strong {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 950;
}

.public-site .customer-auth-benefits small {
    color: rgba(226, 232, 240, .72);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}

.public-site .customer-auth-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(28px, 4vw, 48px);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.public-site .customer-auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f1f5f9;
}

.public-site .customer-auth-tabs a {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #64748b;
    font-size: .88rem;
    font-weight: 950;
    text-decoration: none;
}

.public-site .customer-auth-tabs a.active {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.public-site .customer-auth-form {
    display: grid;
    gap: 14px;
}

.public-site .customer-auth-form label {
    display: grid;
    gap: 7px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 900;
}

.public-site .customer-auth-form input,
.public-site .customer-auth-form select,
.public-site .customer-password-field {
    width: 100%;
    min-height: 52px;
    border: 1px solid #dbe4ef;
    border-radius: 15px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-weight: 750;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}

.public-site .customer-auth-form input {
    padding: 0 14px;
}

.public-site .customer-auth-form select {
    padding: 0 10px;
    appearance: none;
}

.public-site .customer-password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
}

.public-site .customer-password-field input {
    min-height: 50px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.public-site .customer-password-field button {
    height: 36px;
    margin-right: 8px;
    padding: 0 12px;
    border: 1px solid #dbe4ef;
    border-radius: 11px;
    background: #f8fafc;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer;
}

.public-site .customer-auth-form input:focus,
.public-site .customer-password-field:focus-within {
    outline: 0;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
}

.public-site .customer-auth-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 12px;
}

.public-site .customer-auth-form .btn {
    min-height: 54px;
    border-radius: 16px;
}

.public-site .purchase-login-nudge,
.public-site .purchase-customer-session {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 18px;
}

.public-site .purchase-login-nudge {
    border: 1px solid rgba(14, 165, 233, .18);
    background: #eff6ff;
}

.public-site .purchase-login-nudge div,
.public-site .purchase-customer-session {
    min-width: 0;
}

.public-site .purchase-login-nudge strong,
.public-site .purchase-customer-session strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-login-nudge span,
.public-site .purchase-customer-session small {
    color: #475569;
    font-size: .8rem;
    font-weight: 750;
}

.public-site .purchase-login-nudge a {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    font-size: .8rem;
    font-weight: 950;
    text-decoration: none;
}

.public-site .purchase-customer-session {
    display: grid;
    justify-content: stretch;
    border: 1px solid rgba(34, 197, 94, .2);
    background: #f0fdf4;
}

.public-site .purchase-customer-session > span {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.public-site .customer-account-head {
    display: flex;
    gap: 18px;
    align-items: end;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(94, 234, 212, .16), transparent 18rem),
        linear-gradient(135deg, rgba(8, 47, 73, .92), rgba(15, 23, 42, .96));
    color: #ffffff;
    box-shadow: 0 26px 70px rgba(2, 6, 23, .32);
}

.public-site .customer-account-head span {
    color: #99f6e4;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .customer-account-head h1 {
    margin: 6px 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 900;
}

.public-site .customer-account-head p {
    margin: 0;
    color: rgba(226, 232, 240, .78);
    font-weight: 700;
}

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

.public-site .customer-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.public-site .customer-account-grid article,
.public-site .customer-orders-panel,
.public-site .customer-empty-orders {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94));
    box-shadow: 0 18px 48px rgba(2, 6, 23, .16);
}

.public-site .customer-account-grid article {
    display: grid;
    gap: 6px;
    padding: 18px;
}

.public-site .customer-account-grid small,
.public-site .customer-order-card small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-site .customer-account-grid strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .customer-orders-panel {
    padding: clamp(18px, 3vw, 26px);
}

.public-site .customer-orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.public-site .customer-orders-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.public-site .customer-orders-head span {
    color: #64748b;
    font-weight: 850;
}

.public-site .customer-orders-list {
    display: grid;
    gap: 12px;
}

.public-site .customer-order-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, .7fr));
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.public-site .customer-order-card h3 {
    margin: 4px 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1rem;
}

.public-site .customer-order-card span {
    color: #0f766e;
    font-size: .82rem;
    font-weight: 900;
}

.public-site .customer-order-card strong {
    color: #0f172a;
    font-size: .9rem;
    font-weight: 950;
    text-transform: capitalize;
}

.public-site .customer-empty-orders {
    display: grid;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

.public-site .customer-empty-orders strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.1rem;
}

.public-site .customer-empty-orders p {
    margin: 0;
    color: #64748b;
    font-weight: 750;
}

@media (max-width: 900px) {
    .public-site .customer-auth-panel,
    .public-site .customer-account-grid,
    .public-site .customer-order-card {
        grid-template-columns: 1fr;
    }

    .public-site .customer-auth-visual {
        min-height: 420px;
    }

    .public-site .customer-account-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .public-site .customer-auth-page,
    .public-site .customer-account-page {
        width: min(100% - 20px, 1180px);
    }

    .public-site .customer-auth-benefits,
    .public-site .customer-auth-row {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-login-nudge {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .purchase-login-nudge a {
        text-align: center;
    }
}

/* Iconos del encabezado publico */
.public-site .nav .nav-icon-link {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.public-site .nav .nav-icon-link i {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: currentColor;
    font-size: .88rem;
}

.public-site .nav .nav-icon-link.cart-action {
    position: relative;
}

.public-site .nav .nav-icon-link .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 2px solid #07111f;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: .64rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
}

.public-site .nav .nav-icon-link .cart-count.has-items {
    opacity: 1;
    transform: scale(1);
}

.public-site .nav .nav-icon-link:hover i {
    background: rgba(94, 234, 212, .18);
    color: #5eead4;
}

@media (max-width: 720px) {
    .public-site .nav .nav-icon-link span {
        display: none;
    }

    .public-site .nav .nav-icon-link i {
        width: 34px;
        height: 34px;
    }
}

/* Acciones finales del encabezado */
.public-site .nav .nav-action-icons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-left: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 10px 24px rgba(2, 8, 23, .16);
}

.public-site .nav .nav-action-icons::before {
    content: "";
    width: 1px;
    height: 22px;
    margin: 0 3px 0 -9px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .26), transparent);
}

.public-site .nav .nav-action-icons .nav-icon-link {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.public-site .nav .nav-action-icons .nav-icon-link::after {
    content: none !important;
}

.public-site .nav .nav-action-icons .nav-icon-link i {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: .98rem;
}

.public-site .nav .nav-action-icons .cart-action {
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .22), rgba(124, 58, 237, .16)) !important;
}

.public-site .nav .nav-action-icons .login-action {
    background:
        linear-gradient(135deg, rgba(255, 62, 181, .2), rgba(255, 183, 3, .13)) !important;
}

.public-site .nav .nav-action-icons .logout-action {
    background:
        linear-gradient(135deg, rgba(248, 113, 113, .22), rgba(244, 63, 94, .15)) !important;
}

.public-site .nav .nav-action-icons .nav-icon-link:hover {
    border-color: rgba(255, 255, 255, .32) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 24px rgba(31, 216, 255, .16) !important;
}

@media (max-width: 900px) {
    .public-site .nav .nav-action-icons {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .public-site .nav .nav-action-icons::before {
        content: none;
    }
}

/* Campo celular integrado: codigo de pais + numero */
.public-site .customer-auth-form .customer-phone-field {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    min-height: 56px;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.public-site .customer-auth-form .customer-phone-field:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 16px 34px rgba(15, 23, 42, .08);
}

.public-site .customer-dni-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.public-site .customer-dni-field input {
    min-width: 0;
}

.public-site .customer-dni-validate {
    min-width: 82px;
    padding: 0 14px;
    border: 1px solid #0ea5e9;
    border-radius: 16px;
    background: #e0f2fe;
    color: #0369a1;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.public-site .customer-dni-validate:hover,
.public-site .customer-dni-validate:focus-visible {
    background: #0ea5e9;
    color: #ffffff;
    transform: translateY(-1px);
}

.public-site .customer-dni-validate:disabled {
    cursor: wait;
    opacity: .65;
}

.public-site .customer-dni-status {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    font-size: .78rem;
    font-weight: 700;
}

.public-site .customer-dni-status.is-loading { color: #0369a1; }
.public-site .customer-dni-status.is-valid { color: #15803d; }
.public-site .customer-dni-status.is-invalid { color: #b91c1c; }

.public-site .customer-auth-form .customer-phone-field select,
.public-site .customer-auth-form .customer-phone-field input {
    width: 100%;
    min-height: 56px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

.public-site .customer-auth-form .customer-phone-field select {
    padding: 0 10px;
    border-right: 1px solid #e2e8f0 !important;
    background: #f8fafc;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 950;
}

@media (max-width: 420px) {
    .public-site .customer-auth-form .customer-phone-field {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

.public-site .customer-auth-alert {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px !important;
    border: 1px solid rgba(225, 29, 72, .22) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(255, 241, 242, .98), rgba(255, 247, 237, .96)) !important;
    color: #9f1239 !important;
    box-shadow: 0 16px 34px rgba(225, 29, 72, .1);
}

.public-site .customer-auth-alert > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    background: #ffe4e6;
    color: #e11d48;
    font-size: 1rem;
}

.public-site .customer-auth-alert div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.public-site .customer-auth-alert strong {
    color: #9f1239;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.35;
}

.public-site .customer-auth-alert small {
    color: #be123c;
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.35;
}

.public-site .customer-auth-alert a {
    display: inline-grid;
    min-height: 34px;
    padding: 0 12px;
    place-items: center;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    font-size: .8rem;
    font-weight: 950;
    text-decoration: none;
}

@media (max-width: 520px) {
    .public-site .customer-auth-alert {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .public-site .customer-auth-alert a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Login de cliente interactivo sin panel izquierdo */
.public-site .customer-auth-page {
    display: grid;
    width: min(100%, calc(100% - 28px));
    min-height: calc(100vh - 150px);
    margin: 18px auto 58px;
    place-items: center;
}

.public-site .customer-auth-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(470px, 100%) !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .customer-auth-visual {
    display: none !important;
}

.public-site .customer-auth-card {
    position: relative;
    align-content: start;
    gap: 18px;
    padding: clamp(28px, 5vw, 42px) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)) !important;
    box-shadow:
        0 34px 80px rgba(2, 6, 23, .32),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}

.public-site .customer-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .customer-auth-brand {
    display: flex;
    gap: 13px;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.public-site .customer-auth-brand > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 19px;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.28rem;
    font-weight: 950;
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.public-site .customer-auth-brand div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.public-site .customer-auth-brand strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.public-site .customer-auth-brand small {
    color: #64748b;
    font-size: .84rem;
    font-weight: 850;
}

.public-site .customer-auth-tabs {
    border-radius: 18px;
    background: #eaf1f7;
}

.public-site .customer-auth-tabs a {
    min-height: 46px;
    border-radius: 14px;
}

.public-site .customer-auth-tabs a.active {
    color: #0f766e;
    box-shadow: 0 13px 28px rgba(15, 23, 42, .09);
}

.public-site .customer-auth-form {
    gap: 15px;
}

.public-site .customer-auth-form label {
    transition: transform .18s ease;
}

.public-site .customer-auth-form label.is-focused {
    transform: translateY(-1px);
}

.public-site .customer-auth-form label.is-focused,
.public-site .customer-auth-form label.has-value {
    color: #0f766e;
}

.public-site .customer-auth-form input,
.public-site .customer-password-field {
    min-height: 56px;
    border-radius: 16px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.public-site .customer-auth-form input:focus,
.public-site .customer-password-field:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 16px 34px rgba(15, 23, 42, .08);
}

.public-site .customer-password-field button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    background: #f8fafc;
    color: #64748b;
}

.public-site .customer-password-field button:hover,
.public-site .customer-password-field button.is-visible {
    border-color: rgba(15, 118, 110, .22);
    background: #ecfeff;
    color: #0f766e;
}

.public-site .customer-auth-form .btn {
    position: relative;
    min-height: 56px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(14, 165, 233, .22);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.public-site .customer-auth-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(14, 165, 233, .28);
}

.public-site .customer-auth-form .btn.is-loading {
    cursor: wait;
    opacity: .82;
}

.public-site .customer-auth-form .btn.is-loading::after {
    content: "";
    position: absolute;
    right: 18px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: loginSpin .7s linear infinite;
}

@media (max-width: 560px) {
    .public-site .customer-auth-page {
        width: min(100% - 18px, 470px);
        min-height: auto;
        margin-top: 12px;
    }

    .public-site .customer-auth-card {
        padding: 26px 20px !important;
        border-radius: 22px;
    }

    .public-site .customer-auth-brand {
        justify-content: flex-start;
    }
}