/* ============================================================
   MARES UI Kit · scoped to ui_kits/web/index.html
   These styles are a deduplicated, cleaned distillation of the
   live site's CSS (styles.css, index.css, tienda-styles.css,
   product-details.css, carrito-styles.css, faq-styles.css) so
   designers can reuse the visual language without pulling the
   ~30k-line legacy bundle.
   ============================================================ */

* { box-sizing: border-box; }

html, body, #app {
    margin: 0; padding: 0;
    background: var(--mares-cream);
    color: var(--mares-ink);
    font-family: var(--font-sans);
    line-height: var(--lh-body);
    letter-spacing: .01em;
    min-height: 100%;
}

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

/* ---------- Header ---------- */
.mk-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--mares-teal); color: var(--mares-cream);
    height: 88px; padding: 12px 4vw;
    display: flex; align-items: center; gap: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.mk-header__logo { height: 64px; cursor: pointer; }
.mk-header__logo img { height: 100%; width: auto; }
.mk-header nav { margin-left: auto; }
.mk-header nav ul { display: flex; gap: 28px; list-style: none; margin:0; padding:0; align-items:center; }
.mk-header nav a {
    color: var(--mares-cream); text-decoration:none; cursor:pointer;
    font-size: .92rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    position: relative; padding-bottom: 5px;
}
.mk-header nav a::after {
    content:""; position:absolute; left:0; bottom:0;
    width: 0; height: 2px; background: var(--mares-gold);
    transition: width .3s ease;
}
.mk-header nav a:hover::after,
.mk-header nav a.is-active::after { width: 100%; }
.mk-cart { position: relative; }
.mk-cart i { font-size: 1.3rem; }
.mk-cart__count {
    position: absolute; top:-8px; right:-10px;
    background: var(--mares-gold); color:#fff;
    font-size: .72rem; padding: 2px 6px; border-radius: 999px; font-weight:700;
}

/* ---------- Buttons ----------
   MARES button system — derived entirely from the brand palette.
   No pinks, no system greens/yellows/reds. Destructive is a low-opacity
   teal, not a bright red. The single exception is WhatsApp green, which
   stays #25d366 because it's a universal channel convention. */
.mk-btn {
    display:inline-flex; align-items:center; justify-content:center; gap: 10px;
    padding: 12px 20px; border-radius: 14px; border: 1px solid transparent;
    font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
    cursor:pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    text-decoration:none;
}
/* Universal hover lift — gives every button kind the same tactile feedback,
   independent of which background/text colour it uses. */
.mk-btn:hover { transform: translateY(-2px); }
.mk-btn:active { transform: translateY(0); }

.mk-btn--primary {
    background: var(--color-teal); color: var(--color-cream);
    box-shadow: var(--shadow-teal);
}
.mk-btn--primary:hover { background: var(--color-teal-dark); color: var(--color-cream); box-shadow: var(--shadow-lg); }

.mk-btn--secondary {
    background: var(--color-gold); color: var(--color-cream);
    box-shadow: var(--shadow-gold);
}
.mk-btn--secondary:hover { background: var(--color-gold-dark); color: var(--color-cream); box-shadow: var(--shadow-lg); }

.mk-btn--ghost {
    background: transparent; color: var(--color-teal);
    border-color: var(--color-teal);
}
.mk-btn--ghost:hover { background: var(--color-teal-a08); color: var(--color-teal); border-color: var(--color-teal-dark); }

.mk-btn--wa {
    background: var(--color-whatsapp); color: #ffffff;
    font-family: var(--font-sans);
}
.mk-btn--wa:hover { background: var(--color-whatsapp-dark); color: #ffffff; box-shadow: var(--shadow-lg); }

.mk-btn--destructive {
    background: var(--color-destructive); color: var(--color-cream);
    box-shadow: none;
}
.mk-btn--destructive:hover { background: var(--color-destructive-dark); color: var(--color-cream); box-shadow: var(--shadow-lg); }

/* Outline kept as an alias of ghost — same look, kept for back-compat. */
.mk-btn--outline {
    background: transparent; color: var(--color-teal);
    border-color: var(--color-teal);
}
.mk-btn--outline:hover { background: var(--color-teal-a08); color: var(--color-teal); border-color: var(--color-teal-dark); }

.mk-btn--block { width: 100%; }
.mk-btn--sm { padding: 9px 14px; font-size: .85rem; border-radius: 12px; gap: 6px; }

/* Disabled — single rule for every kind. Flat teal-alpha, no filter tricks,
   and no hover lift (disabled buttons shouldn't look interactive). */
.mk-btn:disabled,
.mk-btn[disabled] {
    background: var(--color-teal-a20) !important;
    color: var(--color-teal-a40) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* ---------- Eyebrow / chips ---------- */
.mk-eyebrow {
    display:inline-block; text-transform: uppercase; letter-spacing: .12em;
    font-size: .85rem; font-weight: 700; color: var(--mares-gold); margin-bottom: 12px;
}
.mk-pill {
    padding: 10px 14px; border-radius: 999px; background: rgba(30,77,89,0.08);
    color: var(--mares-ink); font-size: .92rem; font-weight: 600;
    border: 1px solid rgba(30,77,89,0.12);
}
.mk-pill--beige {
    background: var(--mares-beige); color: var(--mares-teal);
    border-color: var(--mares-beige); padding: 4px 12px; font-size:.9rem;
}
.mk-badge {
    display:inline-block; padding: 8px 14px; background: var(--mares-gold-soft);
    color: var(--mares-gold); border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Sections + container ---------- */
/* --container-* tokens are defined once in styles.css (loaded on every page) and reused here. */
.mk-section { padding: 90px var(--container-pad, 24px); }
.mk-container { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 0 var(--container-pad, 24px); }
.mk-section__head { text-align:center; max-width: 760px; margin: 0 auto 44px; }
.mk-section__head h2 { margin: 4px 0 12px; }
.mk-section__head .mk-eyebrow { margin-bottom: 8px; }

/* ---------- Hero ---------- */
.mk-hero {
    padding: 40px 5vw 80px;
    background: var(--grad-hero);
}
.mk-hero__inner {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px;
    align-items: center; width: min(1200px, 92%); margin: 0 auto;
}
.mk-hero h1 { color: var(--mares-teal); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.15; }
.mk-hero p.lede { margin: 12px 0 22px; max-width: 540px; font-size: 1.1rem; line-height: 1.7; color: var(--fg-2); }
.mk-hero__cta { display:flex; flex-wrap:wrap; gap: 12px; margin-bottom: 18px; }
.mk-hero__pills { display:flex; flex-wrap:wrap; gap: 10px; }

.mk-hero__visual { position: relative; min-height: 360px; display:grid; place-items:center; }
.mk-hero__image {
    position: relative; overflow: hidden;
    width: 100%; aspect-ratio: 4/5; border-radius: 24px;
    background:
        linear-gradient(180deg, transparent 55%, rgba(30,77,89,0.32) 100%),
        linear-gradient(145deg, rgba(30,77,89,0.35), rgba(138,112,63,0.25)),
        url("../../assets/images/fondo-hero.webp") center 30%/cover no-repeat;
    box-shadow: 0 20px 45px rgba(0,0,0,0.1);
}
.mk-hero__bottle {
    position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
    width: 62%; max-height: 58%; object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.3));
}
.mk-hero__card {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 8%;
    width: 78%; background: rgba(247,239,234,0.95);
    border: 1px solid rgba(30,77,89,0.08); border-radius: 24px;
    padding: 18px; box-shadow: var(--shadow-xl); backdrop-filter: blur(4px);
}
.mk-hero__card h3 { margin: 0 0 6px; color: var(--mares-teal); font-size: 1.25rem; }
.mk-hero__card p  { margin: 0 0 8px; color: var(--fg-2); font-size: .98rem; }
.mk-hero__card .price { font-weight: 700; color: var(--mares-gold); margin: 4px 0; font-family: var(--font-sans); }
.mk-hero__floating { position:absolute; top: 8%; right: 6%; display:flex; flex-direction:column; gap: 8px; }
.mk-hero__floating span {
    background: rgba(30,77,89,0.92); color: var(--mares-cream);
    padding: 8px 14px; border-radius: 14px; font-size: .9rem;
    box-shadow: 0 10px 30px rgba(30,77,89,0.25);
}

/* ---------- Category cards ----------
   No photographs — each category is its sand texture, full-bleed, with
   serif title + ghost CTA over it. The teal wash keeps type readable. */
.mk-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mk-cat-card {
    border-radius: 18px; overflow:hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    min-height: 360px;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding: 28px 24px 26px;
    color: var(--mares-cream);
    background-size: cover; background-position: center;
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.mk-cat-card::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(30,77,89,0.45) 0%, rgba(30,77,89,0.72) 60%, rgba(30,77,89,0.88) 100%);
    pointer-events: none;
}
.mk-cat-card > * { position: relative; z-index: 1; }
.mk-cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.mk-cat-card[data-sand="masculino"] { background-image: url("../../assets/sands/arena-masculino.jpg"); }
.mk-cat-card[data-sand="femenino"]  { background-image: url("../../assets/sands/arena-femenino.jpg"); }
.mk-cat-card[data-sand="unisex"]    { background-image: url("../../assets/sands/arena-unisex.jpg"); }
/* Heavier wash on the lighter sands so the white type holds contrast equally
   across all three cards — masculino is almost white, so it needs the most. */
.mk-cat-card[data-sand="masculino"]::before {
    background: linear-gradient(180deg, rgba(30,77,89,0.60) 0%, rgba(30,77,89,0.82) 60%, rgba(30,77,89,0.92) 100%);
}
.mk-cat-card[data-sand="femenino"]::before {
    background: linear-gradient(180deg, rgba(30,77,89,0.50) 0%, rgba(30,77,89,0.75) 60%, rgba(30,77,89,0.90) 100%);
}
.mk-cat-card[data-sand="unisex"]::before {
    background: linear-gradient(180deg, rgba(30,77,89,0.35) 0%, rgba(30,77,89,0.65) 60%, rgba(30,77,89,0.85) 100%);
}
.mk-cat-card h3 { margin: 0 0 8px; color: var(--mares-cream); font-size: 1.9rem; letter-spacing: .02em; }
.mk-cat-card p { color: rgba(247,239,234,0.92); margin: 0 0 16px; font-size: .98rem; line-height: 1.5; }
.mk-cat-card__cta {
    display:inline-flex; align-items:center; gap: 8px;
    color: var(--mares-cream); font-weight: 600; font-size: .92rem;
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 2px solid var(--mares-gold); padding-bottom: 4px; align-self: flex-start;
}
.mk-cat-card__eyebrow {
    color: var(--mares-gold-light); text-transform: uppercase;
    letter-spacing: .14em; font-size: .78rem; font-weight: 700;
    margin-bottom: 10px;
}

/* ---------- Intensity wave (1-3 dots) ----------
   Tiny indicator that lives on every product card and PDP. Visually
   echoes the "wave" glyph in the wordmark. */
.mk-wave {
    display:inline-flex; align-items:center; gap: 5px;
    font-family: var(--font-sans); font-size: .72rem;
    color: var(--mares-teal); letter-spacing: .06em;
    text-transform: uppercase; font-weight: 600;
}
.mk-wave__dots { display:inline-flex; gap: 3px; }
.mk-wave__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mares-gold); opacity: .25;
}
.mk-wave__dot.is-on { opacity: 1; }

/* ---------- Product cards ---------- */
.mk-product-grid {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
}
.mk-product-card {
    background:#fff; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--border-card); box-shadow: var(--shadow-md);
    display:flex; flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}
.mk-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mk-product-card__img {
    height: 240px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background-color: var(--mares-cream);
    background-size: cover; background-position: center;
    cursor: pointer; position: relative;
}
/* Textura de arena en una capa aparte (::before) con opacidad reducida, para que
   no compita visualmente con la foto del producto ni con el resto de la card. */
.mk-product-card__img::before {
    content: "";
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .22; z-index: 0;
}
.mk-product-card[data-sand="masculino"] .mk-product-card__img::before { background-image: url("../../assets/sands/arena-masculino.jpg"); }
.mk-product-card[data-sand="femenino"]  .mk-product-card__img::before { background-image: url("../../assets/sands/arena-femenino.jpg"); }
.mk-product-card[data-sand="unisex"]    .mk-product-card__img::before { background-image: url("../../assets/sands/arena-unisex.jpg"); }
.mk-product-card__img img {
    position: relative; z-index: 1;
    height: 88%; object-fit: contain; transition: transform .5s ease;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.15));
}
.mk-product-card:hover .mk-product-card__img img { transform: scale(1.07); }

/* Personality phrase — revealed on hover as a teal scrim over the photo. */
.mk-product-card__personality {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 30px 14px 12px; text-align: center;
    font-family: var(--font-sans); font-size: .84rem; font-weight: 500;
    letter-spacing: .02em; text-transform: capitalize;
    color: var(--mares-cream);
    background: linear-gradient(to top, rgba(29,77,89,.92) 0%, rgba(29,77,89,.55) 55%, rgba(29,77,89,0) 100%);
    transform: translateY(100%); opacity: 0;
    transition: transform .35s var(--ease-out), opacity .3s ease;
    pointer-events: none;
}
.mk-product-card:hover .mk-product-card__personality { transform: translateY(0); opacity: 1; }

.mk-product-card__body { padding: 16px 18px 18px; display:flex; flex-direction:column; gap: 6px; }
.mk-product-card__head { display:flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mk-product-card__name { margin: 0; font-family: var(--font-display); font-size: 1.25rem; color: var(--mares-teal); line-height: 1.15; }
.mk-product-card__brand { color: var(--mares-gold); font-style: italic; font-size: .85rem; margin: 2px 0 0; }

/* Olfactory accord — beige pill (#E6CFBE), Space Grotesk, teal text. */
.mk-product-card__accords { display:flex; flex-wrap:wrap; gap: 6px; margin: 8px 0 2px; }
.mk-product-card__accord-pill {
    display:inline-flex; align-items:center;
    background: var(--mares-beige); color: var(--mares-teal);
    border: 1px solid var(--mares-beige);
    font-family: var(--font-sans); font-size: .76rem; font-weight: 500;
    line-height: 1; padding: 5px 11px; border-radius: 999px;
}
.mk-product-card__row {
    display:flex; justify-content:space-between; align-items:center;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(30,77,89,0.08);
}
.mk-product-card__price { font-weight: 700; color: var(--mares-teal); font-size: 1.05rem; font-family: var(--font-sans); }
.mk-product-card__price small { font-weight: 400; font-size: .75rem; color: var(--fg-3); margin-left: 4px; }

/* Dual CTA — "Ver fragancia" (teal) + "Pedir ahora" (WhatsApp green). */
.mk-product-card__cta { display:flex; gap: 8px; margin-top: 12px; }
.mk-product-card__cta .mk-btn { flex: 1; box-shadow: none; }

/* 2-up grid on phones — auto-fill's 260px minimum collapses to 1 column at
   this width, so force 2 explicit columns and shrink the card densely.
   minmax(0,1fr) (not plain 1fr) keeps long CTA labels from blowing the
   track width out and triggering page-level horizontal scroll. */
@media (max-width: 600px) {
    .mk-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mk-product-card__img { height: 150px; }
    .mk-product-card__body { padding: 10px 10px 12px; gap: 4px; }
    .mk-product-card__name { font-size: .92rem; }
    .mk-product-card__brand { font-size: .72rem; }
    .mk-product-card__accords { gap: 4px; margin: 4px 0 2px; }
    .mk-product-card__accord-pill { font-size: .68rem; padding: 3px 8px; }
    .mk-product-card__row { margin-top: 4px; padding-top: 6px; }
    .mk-product-card__price { font-size: .92rem; }
    .mk-product-card__price small { font-size: .68rem; }
    /* Side-by-side CTAs don't fit a half-width card without overflowing —
       stack them instead of shrinking text past legibility. */
    .mk-product-card__cta { flex-direction: column; gap: 6px; margin-top: 8px; }
}

/* ---------- Filter tabs ---------- */
.mk-filters {
    background:#fff; border-bottom: 1px solid var(--mares-cream-dark);
    padding: 14px 5vw; display:flex; justify-content:center; gap: 26px;
}
.mk-filter {
    cursor: pointer; padding: 6px 4px;
    text-transform: uppercase; letter-spacing: .08em;
    font-size: .92rem; font-weight: 600;
    color: var(--mares-teal); border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
}
.mk-filter:hover, .mk-filter.is-active { color: var(--mares-gold); border-bottom-color: var(--mares-gold); }

/* ---------- Store filters: sidebar + grid layout (tienda.html) ----------
   Desktop/tablet: .tienda-sidebar is a sticky 260px column to the left of
   the product grid. Mobile (<=768px): the same sidebar element becomes a
   fixed bottom sheet, toggled by .tienda-filtertoggle + a backdrop. JS
   logic (filter state, render()) never changes between breakpoints —
   only this CSS repositions the shared markup. */
.tienda-layout {
    display: flex; gap: 32px; align-items: flex-start;
    max-width: var(--container-max, 1280px); margin: 0 auto;
    padding: 0 var(--container-pad, 24px);
}
.tienda-grid { flex: 1; min-width: 0; }

.tienda-sidebar {
    width: 260px; flex-shrink: 0;
    position: sticky; top: calc(var(--header-h, 60px) + var(--marquee-h, 40px));
    transition: top 0.25s ease;
    display: flex; flex-direction: column; gap: 16px;
    background: transparent; border: none; box-shadow: none;
}
.tienda-sidebar__sheet-head { display: none; }
.tienda-sidebar__sep { border: none; height: 1px; background: var(--mares-line); margin: 0; }
.tienda-sidebar__apply { display: none; }

.tienda-filtertoggle {
    display: none;
    width: 100%; align-items:center; justify-content:center; gap: 8px;
    background: var(--mares-cream); color: var(--mares-teal);
    border: none; border-bottom: 2px solid transparent;
    padding: 12px 16px; font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
    cursor: pointer; min-height: 44px;
    position: sticky; top: 0; z-index: 70;
}
.tienda-filtertoggle i { font-size: .82rem; }
.tienda-filtertoggle.is-open { border-bottom-color: var(--mares-gold); color: var(--mares-gold); }
/* Pin background+color: the global button:hover rule (styles.css) defaults
   any unstyled-on-hover button to a gold bg/white text — override explicitly
   on every custom <button> below so none of them flash gold on hover. */
.tienda-filtertoggle:hover { background: var(--mares-cream); color: var(--mares-teal); }
.tienda-filtertoggle__badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--mares-gold); color: #fff;
    border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1;
}
.tienda-filtertoggle__badge[hidden] { display: none; }

.tienda-backdrop { display: none; }

.mk-storefilters__search { position: relative; }
.mk-storefilters__search .mk-input { padding-right: 36px; }
.mk-storefilters__clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: var(--mares-cream-dark); color: var(--mares-teal);
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    display:flex; align-items:center; justify-content:center;
}
.mk-storefilters__clear:hover { background: var(--color-teal-a20); color: var(--mares-teal); }
.mk-storefilters__clear[hidden] { display: none; }

.mk-storefilters__active {
    display:inline-flex; align-items:center; gap: 8px; align-self: flex-start;
    background: transparent; border: none; cursor: pointer; padding: 0;
    font-family: var(--font-sans); font-size: .85rem; color: var(--fg-3);
}
.mk-storefilters__active-link { text-decoration: underline; color: var(--fg-3); }
.mk-storefilters__active:hover { background: transparent; }
.mk-storefilters__active:hover .mk-storefilters__active-link,
.mk-storefilters__active:hover { color: var(--mares-teal); }
.mk-storefilters__active[hidden] { display: none; }

.mk-storefilters__group { display:flex; flex-direction:column; gap: 8px; }
.mk-storefilters__pills { display:flex; flex-wrap:wrap; gap: 8px; }

.mk-storefilters__pill {
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--mares-beige); color: var(--mares-teal);
    border: 1px solid var(--mares-beige);
    font-family: var(--font-sans); font-size: .85rem; font-weight: 500;
    padding: 8px 16px; min-height: 40px; border-radius: var(--radius-pill);
    cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mk-storefilters__pill:hover { border-color: var(--mares-teal); background: var(--mares-beige); color: var(--mares-teal); }
.mk-storefilters__pill.is-active {
    background: var(--mares-teal); color: var(--mares-cream); border-color: var(--mares-teal);
}
.mk-storefilters__pill.is-active:hover {
    background: var(--mares-teal); color: var(--mares-cream); border-color: var(--mares-teal);
}

.mk-storefilters__count {
    font-family: var(--font-sans); font-size: .9rem; color: var(--fg-3);
    margin: 0;
}

.store-empty {
    grid-column: 1 / -1; display:flex; flex-direction:column; align-items:center; gap: 16px;
    text-align:center; padding: 70px 20px;
}
.store-empty p { color: var(--fg-2); font-size: 1.05rem; max-width: 420px; margin: 0; }

@media (max-width: 768px) {
    .tienda-layout { flex-direction: column; padding: 0 var(--container-pad-mobile, 16px); }
    .tienda-filtertoggle { display: flex; }

    .tienda-backdrop.is-open {
        display: block; position: fixed; inset: 0;
        background: rgba(29,77,89,.45); z-index: 1100;
    }

    .tienda-sidebar {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto;
        max-height: 80vh; overflow-y: auto;
        background: var(--mares-cream);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
        padding: 20px;
        transform: translateY(110%);
        transition: transform .3s ease;
        z-index: 1200;
    }
    .tienda-sidebar.is-open { transform: translateY(0); }

    .tienda-sidebar__sheet-head {
        display:flex; align-items:center; justify-content:space-between;
        padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--mares-line);
    }
    .tienda-sidebar__sheet-title { margin: 0; }
    .tienda-sidebar__close {
        background: none; border: none; font-size: 1.5rem; line-height: 1;
        color: var(--mares-teal); cursor: pointer; padding: 4px;
    }
    .tienda-sidebar__close:hover { background: none; color: var(--mares-teal); }
    /* Stays pinned to the bottom of the scrollable sheet so it's always
       reachable without scrolling past every filter group first. */
    .tienda-sidebar__apply { display: flex; margin-top: 16px; position: sticky; bottom: 0; }
}

@media (max-width: 600px) {
    /* Near-edge-to-edge grid on phones — the sidebar is a fixed bottom
       sheet at this width, so this padding only affects .tienda-grid. */
    .tienda-layout { padding: 0 8px; }
    .mk-filters { flex-wrap: wrap; gap: 14px 18px; padding: 12px 5vw; }
    .mk-storefilters__active { padding: 6px 0; }
    .mk-category-divider:not(:first-of-type) { margin-top: 40px; }
    .store-empty { padding: 48px 16px; }
}

/* ---------- Banner ----------
   Shared title-banner used at the top of secondary pages. Height comes
   from --mk-banner-height (colors_and_type.css) so it can't drift
   per-page — every page using .mk-banner renders at the same height. */
.mk-banner {
    background-image: linear-gradient(rgba(30,77,89,0.6), rgba(30,77,89,0.6)), url("../../assets/images/fondo-hero.webp");
    background-size: cover; background-position: center;
    color: #fff; text-align: center; padding: 56px 5vw;
    min-height: var(--mk-banner-height);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-sizing: border-box;
    transition: background-image .35s ease;
}
.mk-banner h1 { color: #fff; margin-bottom: 10px; }
.mk-banner p { color: #f6ede5; margin: 0; font-size: 1.05rem; }

/* Banner variants by category — the sand textures swap in under a teal wash
   so the editorial reads but the type stays crisp. The wash is lighter on
   the darker sand (unisex) so the colour still telegraphs. */
.mk-banner[data-sand="masculino"] {
    background-image:
        linear-gradient(rgba(30,77,89,0.42), rgba(30,77,89,0.42)),
        url("../../assets/sands/arena-masculino.jpg");
}
.mk-banner[data-sand="femenino"] {
    background-image:
        linear-gradient(rgba(30,77,89,0.40), rgba(30,77,89,0.40)),
        url("../../assets/sands/arena-femenino.jpg");
}
.mk-banner[data-sand="unisex"] {
    background-image:
        linear-gradient(rgba(30,77,89,0.36), rgba(30,77,89,0.36)),
        url("../../assets/sands/arena-unisex.jpg");
}

/* ---------- Category section divider (tienda.html, filtro "Todos") ----------
   Separa Masculino / Femenino / Unisex con un eyebrow + título y una franja de
   arena tenue a juego con el dato de la categoría, igual que en .mk-banner. */
.mk-category-divider { max-width: 1200px; margin: 0 auto 28px; text-align: center; }
.mk-category-divider:not(:first-of-type) { margin-top: 64px; }
.mk-category-divider__rule {
    height: 3px; width: 64px; margin: 0 auto 18px; border-radius: 999px;
    background-size: cover; background-position: center; opacity: .55;
}
.mk-category-divider[data-sand="masculino"] .mk-category-divider__rule { background-image: url("../../assets/sands/arena-masculino.jpg"); }
.mk-category-divider[data-sand="femenino"]  .mk-category-divider__rule { background-image: url("../../assets/sands/arena-femenino.jpg"); }
.mk-category-divider[data-sand="unisex"]    .mk-category-divider__rule { background-image: url("../../assets/sands/arena-unisex.jpg"); }
.mk-category-divider h2 { margin: 4px 0 0; color: var(--mares-teal); }

/* ---------- Story panel ---------- */
.mk-story { background: var(--mares-cream); padding: 80px 5vw; }
.mk-story__grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; max-width: 1200px; margin: 0 auto; }
.mk-bullets { display:grid; gap: 10px; margin-top: 8px; }
.mk-bullets span {
    background: rgba(30,77,89,0.08); border-radius: 12px;
    padding: 12px 14px; font-weight: 600; color: var(--mares-ink);
}
.mk-story__panel {
    background: var(--grad-panel); color: var(--mares-cream);
    border-radius: 18px; padding: 26px; box-shadow: 0 18px 44px rgba(0,0,0,0.12);
}
.mk-story__panel h3 { color: var(--mares-cream); margin-bottom: 6px; }
.mk-story__panel p { color: rgba(247,239,234,0.92); }

/* ---------- Highlights ---------- */
.mk-highlights {
    background: var(--grad-soft);
    padding: 80px 5vw;
}
.mk-highlight-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.mk-highlight {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border-card); border-radius: 16px;
    padding: 22px; box-shadow: var(--shadow-md);
}
.mk-highlight h3 { margin: 0 0 8px; }

/* ---------- Final CTA strip ---------- */
.mk-cta {
    background: var(--grad-cta); color: var(--mares-cream); padding: 70px 5vw;
}
.mk-cta__inner {
    width: min(1100px, 92%); margin: 0 auto;
    display:flex; justify-content:space-between; gap: 24px; align-items:center; flex-wrap: wrap;
}
.mk-cta h2 { color: #fefcf9; margin-bottom: 4px; }
.mk-cta .mk-eyebrow { color: var(--mares-gold-light); }
.mk-cta p { color: #f4ece4; margin: 0; }
.mk-cta__actions { display:flex; flex-wrap:wrap; gap: 12px; }

/* ---------- Footer ---------- */
.mk-footer {
    background: var(--grad-footer); color: var(--mares-cream);
}
.mk-footer__inner {
    width: min(1200px, 92%); margin: 0 auto;
    padding: 56px 0 24px;
    display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 26px;
    align-items: flex-start;
}
.mk-footer img { height: 68px; margin-bottom: 14px; }
.mk-footer h4 { font-family: var(--font-display); color: var(--mares-cream); margin-bottom: 10px; font-size: 1.05rem; }
.mk-footer p { color: rgba(247,239,234,0.85); margin-bottom: 14px; font-size: .92rem; }
.mk-footer a { display:block; color: rgba(247,239,234,0.9); margin-bottom: 8px; font-weight: 600; font-size: .92rem; }
/* :not(.mk-btn) — plain footer text links go gold on hover, but buttons
   (mk-btn) keep their own variant's hover color/contrast (set in the
   button rules above); otherwise this descendant selector's specificity
   would beat .mk-btn--*:hover and wash every footer button gold again. */
.mk-footer a:not(.mk-btn):hover { color: var(--mares-gold); }
.mk-footer a.mk-btn { display: inline-flex; }
.mk-footer__social { display:flex; gap: 14px; margin-top: 8px; }
.mk-footer__social a { display: inline-block; font-size: 1.25rem; margin: 0; }
.mk-footer__bottom {
    width: min(1200px, 92%); margin: 0 auto;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display:flex; justify-content:space-between; font-size: .92rem;
}

/* Footer collapse — shared by every page that uses .mk-footer (index,
   carrito, tienda, product-details) so the fix can't drift per page. */
@media (max-width: 900px) {
    .mk-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
    .mk-footer__inner {
        grid-template-columns: 1fr;
        padding: 40px var(--container-pad-mobile, 16px) 24px;
        gap: 32px;
    }
    .mk-footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 16px var(--container-pad-mobile, 16px) 24px;
    }
    .mk-footer a:not(.mk-btn) {
        display: flex; align-items: center; min-height: 44px; margin-bottom: 0;
    }
    .mk-footer a.mk-btn { width: 100%; }
}

/* ---------- Form ---------- */
.mk-form { display:grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mk-field { display:flex; flex-direction:column; gap:6px; }
.mk-field--full { grid-column: span 2; }
.mk-field label { font-size: .9rem; font-weight: 600; color: var(--mares-teal); }
.mk-input-group { position: relative; }
.mk-input-group i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--fg-3); font-size: .95rem; }
.mk-input, .mk-select, .mk-textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--border-input);
    background:#fff; border-radius: 10px; font-size: 1rem; font-family: var(--font-sans);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-input-group .mk-input { padding-left: 36px; }
.mk-input:focus, .mk-select:focus, .mk-textarea:focus {
    outline:none; border-color: var(--mares-teal);
    box-shadow: 0 0 0 3px rgba(29,77,89,.12);
}
.mk-select:disabled { background:#f1f5f9; color: #6b7280; cursor: not-allowed; }
.mk-textarea { min-height: 90px; resize: vertical; }
.mk-checkbox { display:flex; align-items:center; gap:8px; font-size:.95rem; }
.mk-checkbox input { width:18px; height:18px; accent-color: var(--mares-teal); }

/* ---------- Cart ---------- */
.mk-cart-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 30px 5vw 70px; max-width: 1200px; margin: 0 auto; }
.mk-cart-line {
    display:flex; gap:16px; padding: 14px;
    background:#fff; border: 1px solid var(--border-card); border-radius: 12px;
    box-shadow: var(--shadow-xs); margin-bottom: 14px;
}
.mk-cart-line img { width: 96px; height: 110px; object-fit: cover; border-radius: 8px; border: 2px solid var(--mares-teal); background:#fff; }
.mk-cart-line h4 { margin: 0 0 6px; font-family: var(--font-sans); color: var(--mares-teal); font-size: 1.05rem; }
.mk-cart-line p { margin: 0; color: var(--fg-2); font-size: .92rem; }
.mk-cart-line .remove {
    margin-top: 10px; background: var(--color-destructive); color: var(--color-cream);
    border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .85rem;
    transition: background-color .2s ease;
}
.mk-cart-line .remove:hover { background: var(--color-destructive-dark); }

.mk-cart-card {
    background:#fff; border: 1px solid var(--border-card); border-radius: 14px;
    padding: 18px; box-shadow: var(--shadow-md); margin-bottom: 14px;
}
.mk-cart-card h3 { margin: 0 0 10px; color: var(--mares-teal); }
.mk-line { display:flex; justify-content:space-between; margin: 8px 0; font-size: .98rem; }
.mk-line--total { font-weight: 700; font-size: 1.1rem; padding-top: 10px; border-top: 1px solid var(--mares-line); }

.mk-trust {
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    background:#fff; border: 1px solid var(--mares-line); border-radius: 12px;
    padding: 12px; margin-top: 12px;
}
.mk-trust div { display:flex; align-items:center; gap:8px; color: var(--mares-ink); font-weight:600; font-size: .92rem; }
.mk-trust i { color: var(--mares-teal); }

/* ---------- Product detail ---------- */
.mk-pdp { padding: 40px 5vw; max-width: 1200px; margin: 0 auto; }
.mk-pdp__grid {
    background:#fff; border: 1px solid var(--border-card);
    box-shadow: var(--shadow-md); border-radius: 14px;
    padding: 28px; display:grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.mk-pdp__images { display:flex; gap: 18px; flex-wrap: wrap; }
.mk-pdp__images .main { flex: 1 1 220px; box-shadow: 0 6px 14px rgba(0,0,0,0.12); border-radius: 10px; padding: 14px; background:#fff; display:flex; align-items:center; justify-content:center; }
.mk-pdp__images .main img { max-height: 260px; object-fit: contain; }
.mk-pdp__images .frasco { flex: 1 1 180px; box-shadow: var(--shadow-sm); border-radius: 10px; overflow: hidden; }
.mk-pdp__images .frasco img { width: 100%; height: 100%; object-fit: cover; }
.mk-pdp__title { color: var(--mares-teal); margin-bottom: 8px; }
.mk-pdp__brand { color: var(--mares-gold); font-style: italic; margin-bottom: 8px; }
.mk-pdp__price { color: var(--color-teal); font-weight: 700; font-size: 1.6rem; margin: 6px 0 16px; font-family: var(--font-sans); }
.mk-pdp__meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mares-beige); }
.mk-pdp__meta .row { display:flex; align-items:center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.mk-pdp__meta .lbl { color: var(--mares-teal); font-weight: 600; }
.mk-pdp__meta .pills { display:flex; gap: 8px; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.mk-faq { display:flex; flex-direction:column; gap: 14px; max-width: 800px; margin: 0 auto; }
.mk-faq-item { background:#fff; border-radius: 8px; box-shadow: var(--shadow-xs); overflow: hidden; }
.mk-faq-q { display:flex; justify-content:space-between; align-items:center; padding: 18px 20px; cursor: pointer; background: var(--mares-cream); }
.mk-faq-q:hover { background: var(--mares-cream-dark); }
.mk-faq-q h3 { margin: 0; font-size: 1.1rem; color: var(--mares-teal); font-weight: 500; }
.mk-faq-q i { color: var(--mares-gold); transition: transform .3s ease; }
.mk-faq-item.is-open .mk-faq-q i { transform: rotate(45deg); }
.mk-faq-a {
    max-height: 0; overflow: hidden; padding: 0 20px;
    transition: max-height .5s ease, padding .5s ease;
    color: var(--mares-ink); font-size: .98rem;
}
.mk-faq-item.is-open .mk-faq-a { max-height: 400px; padding: 18px 20px 22px; }

/* ---------- Toast ---------- */
.mk-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--mares-teal); color: var(--mares-cream);
    padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-xl);
    font-weight: 600; font-size: .95rem; z-index: 1000;
    display:flex; align-items:center; gap: 10px;
    animation: mk-toast-in .3s ease-out;
}
@keyframes mk-toast-in {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* ---------- Responsive ---------- */
/* ---------- Floating WhatsApp button ----------
   Present on every page. Bottom-right. Tiny pulse to draw eye but never
   nags. Message changes by page context. */
.mk-wafloat {
    position: fixed; bottom: 22px; right: 22px; z-index: 80;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--mares-whatsapp); color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 1.7rem; text-decoration: none;
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.35), 0 4px 10px rgba(0,0,0,0.12);
    transition: transform .2s ease, background .2s ease;
}
.mk-wafloat:hover { background: var(--mares-whatsapp-dk); transform: scale(1.08); color:#fff; }
.mk-wafloat::after {
    content:""; position:absolute; inset:-6px; border-radius: 50%;
    border: 2px solid rgba(37,211,102,0.4); animation: mk-wapulse 2.4s ease-out infinite;
}
@keyframes mk-wapulse {
    0%   { transform: scale(.85); opacity: .8; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- Reviews ---------- */
.mk-reviews-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.mk-review {
    background:#fff; border-radius: 16px; padding: 22px 20px;
    border: 1px solid var(--border-card); box-shadow: var(--shadow-md);
    display:flex; flex-direction:column; gap: 10px;
}
.mk-review__stars { color: var(--mares-gold); display:inline-flex; gap: 2px; font-size: .92rem; }
.mk-review__text { color: var(--fg-2); font-size: .95rem; line-height: 1.55; margin: 0; }
.mk-review__who { font-family: var(--font-sans); font-size: .85rem; color: var(--mares-teal); font-weight: 600; }
.mk-review__who span { color: var(--fg-3); font-weight: 400; margin-left: 4px; }

/* ---------- How it works ---------- */
.mk-how-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.mk-how-step { text-align: center; padding: 0 14px; }
.mk-how-step__num {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--mares-cream); color: var(--mares-teal);
    display:inline-flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
    border: 1px solid var(--border-card); margin-bottom: 18px;
}
.mk-how-step h3 { margin: 0 0 6px; font-size: 1.3rem; }
.mk-how-step p { margin: 0; color: var(--fg-2); font-size: .98rem; }

/* ---------- Combo block ---------- */
.mk-combo {
    background: var(--grad-cta); color: var(--mares-cream);
    border-radius: 24px; padding: 40px 44px;
    max-width: 1100px; margin: 0 auto;
    display:grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
}
.mk-combo h2 { color: var(--mares-cream); margin-bottom: 8px; }
.mk-combo .lede { color: rgba(247,239,234,0.92); margin-bottom: 0; }
.mk-combo__price { display:flex; flex-direction:column; gap: 6px; text-align: right; }
.mk-combo__price .old { text-decoration: line-through; color: rgba(247,239,234,0.6); font-size: 1rem; }
.mk-combo__price .new { font-family: var(--font-display); font-size: 2.6rem; color: var(--mares-gold-light); line-height: 1; }
.mk-combo__price .save { font-size: .82rem; color: var(--mares-gold-light); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- PDP rebuild ---------- */
.mk-pdp { padding: 0; max-width: none; margin: 0; }
/* Hero is sized to fill the viewport remaining after the marquee (40px) +
   header (76px desktop / 54px mobile, see styles.css) so the whole hero
   is visible on load with no scroll; see mobile override below for the
   94px offset. */
.mk-pdp__hero {
    background-color: var(--mares-teal);
    padding: 32px 5vw; position: relative; overflow: hidden;
    min-height: calc(100vh - 116px);
    min-height: calc(100dvh - 116px);
    display: flex; align-items: center;
}
/* Textura de arena en capa aparte (::before) con opacidad reducida, igual que en
   las product cards, para que la foto del producto domine sobre la textura. */
.mk-pdp__hero::before {
    content:""; position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .22; pointer-events: none;
}
.mk-pdp__hero::after {
    content:""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,77,89,0.05) 0%, rgba(30,77,89,0.4) 100%);
    pointer-events: none;
}
.mk-pdp__hero[data-sand="masculino"]::before { background-image: url("../../assets/sands/arena-masculino.jpg"); }
.mk-pdp__hero[data-sand="femenino"]::before  { background-image: url("../../assets/sands/arena-femenino.jpg"); }
.mk-pdp__hero[data-sand="unisex"]::before    { background-image: url("../../assets/sands/arena-unisex.jpg"); }
.mk-pdp__hero-inner {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
.mk-pdp__image {
    aspect-ratio: 4/5;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    display:flex; align-items:center; justify-content:center;
}
.mk-pdp__image img {
    max-height: 100%; max-width: 100%; object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.25));
}
.mk-pdp__info { color: var(--mares-cream); }
.mk-pdp__info .mk-eyebrow { color: var(--mares-gold-light); }
.mk-pdp__info h1 { color: var(--mares-cream); margin: 8px 0 6px; font-size: clamp(2.4rem, 4vw, 3.4rem); }
.mk-pdp__brand-line { color: rgba(247,239,234,0.85); font-style: italic; margin: 0 0 16px; font-size: 1.05rem; }
.mk-pdp__personality { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; color: var(--mares-gold-light); margin: 0 0 22px; }
.mk-pdp__meta-row { display:flex; gap: 28px; flex-wrap: wrap; margin: 0 0 22px; }
.mk-pdp__meta-row .mk-wave { color: var(--mares-cream); }
.mk-pdp__meta-row .mk-wave__dot { background: var(--mares-gold-light); }
.mk-pdp__chip {
    background: rgba(247,239,234,0.14); color: var(--mares-cream);
    padding: 6px 12px; border-radius: 999px; font-size: .85rem;
    border: 1px solid rgba(247,239,234,0.2);
}
.mk-pdp__price-row { display:flex; align-items: baseline; gap: 16px; margin: 0 0 22px; }
.mk-pdp__price { font-family: var(--font-display); font-size: 3rem; color: var(--mares-gold-light); line-height: 1; }
.mk-pdp__price small { font-family: var(--font-sans); font-size: .9rem; color: rgba(247,239,234,0.7); margin-left: 8px; }

.mk-pdp__body {
    background: var(--mares-cream); padding: 70px 5vw 90px;
}
.mk-pdp__body-inner { max-width: 1100px; margin: 0 auto; display:grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: start; }
.mk-pdp__notes h3 { margin: 0 0 14px; font-size: 1.6rem; }
.mk-pdp__notes p { margin: 0 0 14px; color: var(--fg-2); }
.mk-pdp__notes-pills { display:flex; flex-wrap:wrap; gap: 8px; }
.mk-pdp__buy-card {
    background:#fff; border: 1px solid var(--border-card);
    border-radius: 18px; padding: 26px; box-shadow: var(--shadow-md);
    position: sticky; top: calc(var(--header-h, 60px) + var(--marquee-h, 40px));
    transition: top 0.25s ease;
}
.mk-pdp__buy-card h4 {
    font-family: var(--font-sans); font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--mares-gold);
    margin: 0 0 14px;
}
.mk-pdp__qty {
    display:flex; align-items: center; gap: 14px; margin: 14px 0;
    background: var(--mares-cream); border-radius: 12px; padding: 8px 12px;
}
.mk-pdp__qty button {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background:#fff; color: var(--mares-teal); cursor: pointer;
    font-size: 1.1rem; box-shadow: var(--shadow-xs);
}
.mk-pdp__qty span { flex: 1; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--mares-teal); }

.mk-pdp__color-grid { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 8px; }
.mk-pdp__color {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-card);
    background:#fff; font-size: .85rem; cursor: pointer; font-family: var(--font-sans);
    color: var(--fg-2);
}
.mk-pdp__color.is-active { background: var(--mares-teal); color: var(--mares-cream); border-color: var(--mares-teal); }

/* ---------- Wompi card (mock) ---------- */
.mk-wompi {
    background:#fff; border: 1px solid var(--border-card);
    border-radius: 14px; padding: 18px; box-shadow: var(--shadow-md);
    margin-top: 14px;
}
.mk-wompi__head { display:flex; align-items: center; justify-content:space-between; margin-bottom: 12px; }
.mk-wompi__logo { font-family: var(--font-display); font-weight: 600; color: #1B6CFF; font-size: 1.25rem; }
.mk-wompi__methods { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mk-wompi__method {
    padding: 10px 8px; border-radius: 10px; border: 1px solid var(--border-card);
    text-align: center; font-size: .78rem; color: var(--mares-teal);
    background:#f8fafc; cursor: pointer;
}
.mk-wompi__method.is-active { background: var(--mares-teal); color: var(--mares-cream); border-color: var(--mares-teal); }
.mk-wompi__method i { display:block; font-size: 1.1rem; margin-bottom: 4px; }

/* ---------- Sticky-sand banners on FAQ / Contacto ---------- */
.mk-banner[data-sand="femenino-soft"] {
    background-image:
        linear-gradient(rgba(30,77,89,0.62), rgba(30,77,89,0.55)),
        url("../../assets/sands/arena-femenino.jpg");
}
.mk-banner[data-sand="unisex-soft"] {
    background-image:
        linear-gradient(rgba(30,77,89,0.62), rgba(30,77,89,0.55)),
        url("../../assets/sands/arena-unisex.jpg");
}

/* ---------- FAQ groups ---------- */
.mk-faq-group {
    text-align: center; margin-top: 36px; margin-bottom: 12px;
    color: var(--mares-gold); text-transform: uppercase;
    letter-spacing: .14em; font-size: .85rem; font-weight: 700;
}
.mk-faq-group:first-child { margin-top: 0; }

/* ---------- Responsive overrides ---------- */
@media (max-width: 900px) {
    .mk-reviews-grid { grid-template-columns: 1fr 1fr; }
    .mk-pdp__hero {
        padding: 20px 5vw 24px;
        min-height: calc(100vh - 94px);
        min-height: calc(100dvh - 94px);
    }
    .mk-pdp__hero-inner { grid-template-columns: 1fr; gap: 14px; }
    .mk-pdp__image { max-height: 300px; }
    .mk-pdp__personality { display: none; }
    .mk-pdp__info .mk-eyebrow { margin-bottom: 6px; }
    .mk-pdp__info h1 { font-size: 1.7rem; margin: 6px 0 4px; }
    .mk-pdp__brand-line { font-size: .85rem; margin: 0 0 10px; }
    .mk-pdp__meta-row { gap: 10px; margin: 0 0 10px; }
    .mk-pdp__price-row { margin: 0 0 10px; }
    .mk-pdp__price { font-size: 1.8rem; }
    .mk-pdp__body-inner { grid-template-columns: 1fr; gap: 28px; }
    .mk-pdp__buy-card { position: static; }
    .mk-combo { grid-template-columns: 1fr; text-align: center; }
    .mk-combo__price { text-align: center; }
    .mk-how-grid { grid-template-columns: 1fr; }
    .mk-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .mk-hero__visual { min-height: 320px; }
}
@media (max-width: 600px) {
    .mk-reviews-grid { grid-template-columns: 1fr; }
    .mk-wafloat { width: 54px; height: 54px; font-size: 1.5rem; bottom: 16px; right: 16px; }
    .mk-section, .mk-container {
        padding-left: var(--container-pad-mobile, 16px);
        padding-right: var(--container-pad-mobile, 16px);
    }
    .mk-hero__card { width: 90%; }
}