/* ==========================================================================
   MAC ARENA — PREPRODUCCIÓN 2 (ESTILO EXACTO BUSCA TU FOTO / MOBILE-FIRST)
   ========================================================================== */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --text: #151515;
  --ink-catalog: #171714;
  --muted: #686868;
  --line: #e6e6e2;
  --soft: #efefec;
  --accent-yellow: #fac823;
  --accent-hover: #ffb31a;
  --focus-ring: #975b00;
  --green-savings: #18834e;
  --green-action: #128c4a;
  --mp-blue: #009ee3;

  /* Compatibilidad con funciones JS existentes de Mac Arena */
  --espresso: #151515;
  --terracota: #151515;
  --terracota-dark: #20201b;
  --terracota-light: #fac823;
  --arena: #686868;
  --arena-light: #e6e6e2;
  --arena-soft: #efefec;
  --oro-oliva: #686868;
  --border-sand: #e6e6e2;
  --bg-card: #ffffff;
  --bg-dark: #151515;
  --sand-light: #fff8ec;

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-playfair: var(--font-inter);
  --font-cormorant: var(--font-inter);
  --font-dm-serif: var(--font-inter);
  --font-montserrat: var(--font-inter);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-inter);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s, background-color 0.12s;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* ==========================================================================
   1. HEADER STICKY (.site-header) — DESKTOP & MOBILE
   ========================================================================== */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: 64px;
  display: flex;
  align-items: center;
  background: #f3f2ee !important;
  border-bottom: 1px solid #e5e3dc !important;
  box-shadow: 0 3px 12px #2721180a !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  color: #151515 !important;
}

.header-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.04em;
  color: #151515;
  white-space: nowrap;
}

.brand-badge {
  background: #fac823;
  color: #151515;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.site-header .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.nav .customer-nav-link {
  white-space: nowrap;
  color: #151515;
  border-radius: 999px;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  font-weight: 600;
  transition: color 0.18s, background-color 0.18s;
  display: inline-flex;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav .customer-nav-link:hover,
.nav .customer-nav-link:focus-visible,
.nav .customer-nav-link.active {
  color: #f7a600;
}

.cart-pill {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 64px;
  height: 42px;
  padding: 0 14px !important;
  color: #ffffff !important;
  background: #151515 !important;
  border: 1px solid #151515 !important;
  display: flex;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s !important;
}

.cart-pill svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.cart-pill strong {
  color: #ffffff !important;
  min-width: 1ch;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cart-pill-total {
  white-space: nowrap;
  color: inherit;
  border-left: 1px solid #ffffff42;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 2px;
  padding-left: 10px;
  line-height: 1;
  display: flex;
}

.cart-pill-total b {
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cart-pill-total em {
  color: #ffd43b;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.cart-pill:hover,
.cart-pill:focus-visible {
  transform: translateY(-1px);
  color: #151515 !important;
  background: #ffb31a !important;
  border-color: #ffb31a !important;
}

.cart-pill:hover strong,
.cart-pill:focus-visible strong {
  color: #151515 !important;
}

.cart-pill:hover .cart-pill-total,
.cart-pill:focus-visible .cart-pill-total {
  border-left-color: #15151538;
}

.cart-pill:hover .cart-pill-total em,
.cart-pill:focus-visible .cart-pill-total em {
  color: #126b3a;
}

@media (max-width: 1023px) {
  .site-header {
    height: 64px;
    min-height: 64px;
  }
  .site-header .header-inner {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 8px;
    height: 100%;
    padding: 0 16px;
    display: grid;
    position: relative;
  }
  .site-header .mobile-menu-button {
    color: #151515;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 10px;
    flex-direction: column;
    grid-area: 1 / 1;
    justify-content: center;
    justify-self: start;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    display: flex;
  }
  .site-header .mobile-menu-button span {
    background: currentColor;
    border-radius: 2px;
    width: 22px;
    height: 2px;
    transition: transform 0.16s, opacity 0.16s;
    display: block;
  }
  .site-header.menu-open .mobile-menu-button span:first-child {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.menu-open .mobile-menu-button span:nth-child(2) {
    opacity: 0;
  }
  .site-header.menu-open .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .site-header .brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
  }
  .site-header .brand-badge {
    display: none;
  }
  .site-header .cart-pill {
    grid-area: 1 / 3;
    justify-self: end;
  }
  .site-header .cart-pill-total {
    display: none !important;
  }
  .site-header .nav {
    background: #f3f2ee;
    border-bottom: 1px solid #e5e3dc;
    width: auto;
    margin: 0;
    padding: 12px 16px 16px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 12px 22px #00000014;
    gap: 4px !important;
  }
  .site-header.menu-open .nav {
    display: grid;
  }
  .site-header .nav .customer-nav-link {
    text-align: left;
    border-radius: 10px;
    min-height: 44px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.3;
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .site-header {
    height: 56px;
    min-height: 56px;
  }
  .cart-pill {
    gap: 6px !important;
    min-width: 54px !important;
    height: 38px;
    padding: 0 11px !important;
  }
  .cart-pill svg {
    width: 17px;
    height: 17px;
  }
  .cart-pill strong {
    font-size: 13px;
  }
}

/* ==========================================================================
   2. HERO ANIMADO MARQUEE (.animated-marquee-hero)
   ========================================================================== */
.animated-marquee-hero {
  isolation: isolate;
  color: #ffffff;
  background: #080808;
  place-items: center;
  min-height: calc(82svh - 64px);
  display: grid;
  position: relative;
  overflow: hidden;
}

.animated-marquee-bg {
  z-index: 0;
  opacity: 0.72;
  align-content: center;
  gap: 22px;
  display: grid;
  position: absolute;
  inset: -8vh -4vw;
  transform: rotate(-8deg) scale(1.08);
}

.animated-marquee-track {
  will-change: transform;
  gap: 22px;
  width: max-content;
  display: flex;
}

.animated-marquee-track-a {
  animation: 48s linear infinite hero3-marquee-left;
}

.animated-marquee-track-b {
  margin-left: -180px;
  animation: 54s linear infinite hero3-marquee-right;
}

.animated-marquee-card {
  aspect-ratio: 4 / 5;
  background: #222222;
  border: 1px solid #ffffff29;
  border-radius: 28px;
  width: clamp(160px, 18vw, 280px);
  overflow: hidden;
  box-shadow: 0 26px 70px #00000057;
}

.animated-marquee-card img {
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
  width: 100%;
  height: 100%;
  display: block;
}

.animated-marquee-overlay {
  z-index: 1;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  background: radial-gradient(circle at 50% 42%, #0000002e, #000000b8 54%, #000000eb 100%),
              linear-gradient(#0000008f, #00000052 42%, #000000d1);
  position: absolute;
  inset: 0;
}

.animated-marquee-glow {
  z-index: 2;
  filter: blur(62px);
  opacity: 0.42;
  pointer-events: none;
  border-radius: 999px;
  width: 34vw;
  min-width: 260px;
  height: 34vw;
  min-height: 260px;
  position: absolute;
}

.animated-marquee-glow-left {
  background: #ffb545b3;
  top: 8%;
  left: -12vw;
}

.animated-marquee-glow-right {
  background: #ae233f7a;
  bottom: 2%;
  right: -14vw;
}

.animated-marquee-content {
  z-index: 3;
  text-align: center;
  justify-items: center;
  width: min(980px, 100% - 32px);
  padding: 72px 20px 140px;
  display: grid;
  position: relative;
}

.animated-marquee-content h1 {
  isolation: isolate;
  color: #ffffff;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 18px 46px #000000ad;
  filter: drop-shadow(0 18px 34px #00000094);
  max-width: min(1120px, 100vw - 32px);
  margin: 0;
  padding: 0.12em 0.04em 0.16em;
  font-size: clamp(44px, 8.8vw, 118px);
  font-weight: 950;
  line-height: 0.88;
  position: relative;
}

.animated-marquee-description {
  color: #ffffffd6;
  text-shadow: 0 10px 34px #00000094;
  max-width: 650px;
  margin: 22px 0 0;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
}

.animated-marquee-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  display: flex;
}

.animated-marquee-primary {
  isolation: isolate;
  color: #ffffff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  font-weight: 900;
  display: inline-flex;
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
  text-shadow: 0 1px 10px #00000057;
  background: linear-gradient(135deg, #ffffff57, #ffffff1c 42%, #ffffff3d), #ffffff1f;
  border: 1px solid #ffffff6b;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff8c, inset 0 -18px 34px #ffffff14, 0 18px 52px #00000057, 0 0 34px #ffffff1a;
  transition: transform 0.18s;
}

.animated-marquee-primary:hover {
  transform: translateY(-2px);
}

.animated-marquee-footer {
  z-index: 3;
  bottom: 24px;
  color: inherit;
  position: absolute;
  inset-inline: 16px;
}

.home-sales-milestones-inner {
  justify-content: center;
  align-items: center;
  gap: 32px;
  max-width: 1264px;
  margin: 0 auto;
  display: flex;
}

.home-sales-milestones-metrics {
  align-items: center;
  gap: 28px;
  margin: 0;
  display: flex;
}

.home-sales-milestones-metric {
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.home-sales-milestones-metric + .home-sales-milestones-metric {
  border-left: 1px solid #ffffff30;
  padding-left: 28px;
}

.home-sales-milestones-metric dt {
  color: inherit;
  opacity: 0.8;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.home-sales-milestones-metric dd {
  color: inherit;
  letter-spacing: -0.035em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}

@keyframes hero3-marquee-left {
  0% { transform: translate(0); }
  100% { transform: translate(-50%); }
}

@keyframes hero3-marquee-right {
  0% { transform: translate(-50%); }
  100% { transform: translate(0); }
}

@media (max-width: 700px) {
  .animated-marquee-hero {
    min-height: calc(76svh - 56px);
  }
  .animated-marquee-bg {
    opacity: 0.58;
    gap: 14px;
    transform: rotate(-10deg) scale(1.18);
  }
  .animated-marquee-track {
    gap: 14px;
  }
  .animated-marquee-card {
    border-radius: 20px;
    width: 145px;
  }
  .animated-marquee-content {
    width: min(100%, 100% - 24px);
    padding: 54px 12px 130px;
  }
  .animated-marquee-content h1 {
    letter-spacing: -0.06em;
    font-size: clamp(46px, 15vw, 82px);
    line-height: 0.9;
  }
  .animated-marquee-description {
    margin-top: 16px;
    font-size: 15px;
  }
  .animated-marquee-actions {
    width: 100%;
    margin-top: 22px;
  }
  .animated-marquee-actions a {
    width: min(78vw, 250px);
  }
  .home-sales-milestones-metric {
    flex-direction: column-reverse;
    gap: 4px;
  }
  .home-sales-milestones-metric dd {
    font-size: 24px;
  }
}

/* ==========================================================================
   3. SECCIÓN GALERÍAS (#albumes) Y BUSCADOR EN TIEMPO REAL
   ========================================================================== */
.album-catalog-section {
  color: #171714;
  background: radial-gradient(at 88% 0, #ecb4441f, #0000 42%), #f7f7f5;
  padding: 72px 28px 88px;
  scroll-margin-top: 64px;
}

.album-catalog-inner {
  max-width: 1264px;
  margin: 0 auto;
}

.album-catalog-header {
  border-bottom: 1px solid #deded6;
  grid-template-columns: 1fr minmax(320px, 480px);
  align-items: end;
  gap: 32px 64px;
  margin-bottom: 36px;
  padding-bottom: 32px;
  display: grid;
}

.album-catalog-heading {
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: clamp(44px, 5.6vw, 76px);
  font-weight: 850;
  line-height: 0.98;
  color: #171714;
}

.album-catalog-sub {
  margin: 10px 0 0;
  color: #636357;
  font-size: 15px;
  font-weight: 500;
}

.album-catalog-tools {
  gap: 14px;
  display: grid;
}

.album-catalog-search {
  background: #ffffff;
  border: 1px solid #ddddd4;
  border-radius: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px;
  display: flex;
  box-shadow: 0 5px 20px #251f1108;
}

.album-catalog-search-icon {
  color: #8b8b7d;
  flex: none;
  width: 19px;
  height: 19px;
  margin-left: 10px;
}

.album-catalog-search input {
  color: #171714;
  background: transparent;
  border: 0;
  outline: none;
  flex: 1;
  width: 0;
  min-width: 90px;
  padding: 10px 4px;
  font-size: 15px;
}

.album-catalog-search input::placeholder {
  color: #85857a;
}

.album-catalog-search button {
  color: #ffffff;
  cursor: pointer;
  background: #20201b;
  border: 0;
  border-radius: 12px;
  flex: none;
  padding: 12px 17px;
  font-size: 13px;
  font-weight: 700;
}

.album-catalog-search button:hover {
  background: #39392f;
}

.album-catalog-socials {
  color: #77776b;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.album-catalog-socials a {
  background: #ffffff99;
  border: 1px solid #deded6;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  transition: background-color 0.16s, transform 0.16s;
}

.album-catalog-socials a:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.album-catalog-socials svg {
  width: 17px;
  height: 17px;
  color: #20201b;
}

/* Quick filter chips debajo del header si existen */
.search-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.search-quick-chip {
  background: #ffffff;
  border: 1px solid #e3e3da;
  color: #20201b;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.16s;
}

.search-quick-chip:hover {
  border-color: #20201b;
}

.search-quick-chip.active {
  background: #20201b;
  color: #ffffff;
  border-color: #20201b;
}

.search-quick-chip .chip-count {
  opacity: 0.65;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Grilla de Álbumes (3 Desktop -> 2 Tablet -> 1 Mobile) */
.album-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  display: grid;
}

.album-catalog-card {
  color: #171714;
  background: #ffffff;
  border: 1px solid #e3e3da;
  border-radius: 24px;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  overflow: hidden;
  box-shadow: 0 6px 22px #201d130a;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.album-catalog-cover {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #dfdfd6, #bdbfb3);
  flex: none;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.album-catalog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.album-catalog-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(21, 21, 21, 0.85);
  color: #ffffff;
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
}

.album-catalog-meta {
  flex-direction: column;
  flex: 1;
  padding: 22px;
  display: flex;
}

.album-catalog-title {
  color: #20201b;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 750;
  line-height: 1.18;
}

.album-catalog-date {
  color: #48483f;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.album-catalog-details {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  line-height: 1.5;
  display: flex;
  margin-top: auto;
}

.album-catalog-additional {
  color: #636357;
  font-size: 13px;
  font-weight: 500;
}

.album-catalog-separator {
  color: #b0b0a5;
}

.album-catalog-media {
  color: #69695f;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}

.album-catalog-empty {
  text-align: center;
  background: #ffffff8c;
  border: 1px dashed #d6d6ca;
  border-radius: 24px;
  padding: 48px 24px;
  grid-column: 1 / -1;
}

.album-catalog-empty h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.album-catalog-empty p {
  color: #747469;
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .album-catalog-card:hover {
    border-color: #d2ccb9;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px #201d1317;
  }
  .album-catalog-card:hover .album-catalog-cover img {
    transform: scale(1.035);
  }
}

@media (max-width: 1000px) {
  .album-catalog-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .album-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 620px) {
  .album-catalog-section {
    padding: 44px 16px 56px;
    scroll-margin-top: 56px;
  }
  .album-catalog-header {
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
  }
  .album-catalog-heading {
    font-size: clamp(40px, 12vw, 56px);
  }
  .album-catalog-tools {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* EVITAR AUTO-ZOOM EN MOBILE (MÍNIMO 16PX) */
  .album-catalog-search input,
  input, select, textarea {
    font-size: 16px !important;
  }
  .album-catalog-search button {
    padding: 12px 14px;
  }
  .album-catalog-socials {
    justify-content: flex-start;
  }
  .album-catalog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .album-catalog-card {
    border-radius: 22px;
  }
  .album-catalog-meta {
    padding: 20px;
  }
  .album-catalog-title {
    font-size: 23px;
  }
}

/* ==========================================================================
   4. VISTA INTERNA DE ÁLBUM (.album-page, .album-hero, .AlbumPriceNotice)
   ========================================================================== */
.album-page {
  padding: 0 0 90px;
  background: var(--bg);
  color: var(--text);
}

.album-hero {
  color: #ffffff;
  background: #222222;
  width: 100%;
  height: clamp(460px, 70vh, 780px);
  min-height: 460px;
  position: relative;
  overflow: hidden;
}

.album-hero > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.album-hero-shade {
  background: linear-gradient(#00000038, #0000001f 35%, #00000096);
  position: absolute;
  inset: 0;
}

.album-hero-content {
  text-align: center;
  text-shadow: 0 2px 24px #0000006b;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 28px;
  display: flex;
  position: absolute;
  inset: 0;
}

.album-hero-back {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 4;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s;
}

.album-hero-back:hover {
  background: #ffffff;
  color: #151515;
}

.album-hero-content h1 {
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 0;
  font-size: clamp(38px, 6.5vw, 88px);
  font-weight: 900;
  line-height: 0.95;
}

.album-hero-date {
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 18px 0 26px;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;
}

.album-hero-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  display: flex;
}

.album-hero-actions a,
.album-hero-actions button {
  color: #ffffffe6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #00000029;
  border: 1px solid #ffffffe6;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 12px;
  font-weight: 750;
  transition: background-color 0.18s, color 0.18s, transform 0.12s;
}

.album-hero-actions a:hover,
.album-hero-actions button:hover {
  color: #171717;
  text-shadow: none;
  background: #ffffffe6;
}

/* Aviso de Precios y Packs (AlbumPriceNotice — Resaltado) */
.album-price-notice {
  z-index: 2;
  color: #1f1a10;
  width: calc(100% - 32px);
  max-width: 820px;
  background: linear-gradient(180deg, #fffdf7 0%, #fff7e2 100%);
  border: 2px solid #ebd089;
  border-radius: 18px;
  margin: 22px auto 18px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 14px 34px rgba(115, 80, 33, 0.10);
  scroll-margin-top: 78px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.album-price-notice.is-highlighted {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(250, 200, 35, 0.38), 0 18px 40px rgba(115, 80, 33, 0.18);
  transform: scale(1.01);
}

.album-price-notice h2 {
  color: #151515 !important;
  margin: 0 0 12px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.album-price-notice h2::before {
  content: "🏷️";
  font-size: 16px;
}

.album-price-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 16px;
  display: grid;
}

.album-price-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.album-price-lines li {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 13px;
  background: #ffffff;
  border: 1px solid #ecd9a8;
  border-radius: 11px;
  display: flex;
  color: #2b2315;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.album-price-lines li strong {
  font-weight: 900;
  font-size: 15.5px;
  color: #151515;
  background: #fac82347;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.album-price-note-foot {
  border-top: 1px solid #e8d5a5;
  margin-top: 12px;
  padding-top: 10px;
  color: #5c431c;
  font-size: 12.5px;
  font-weight: 600;
}

.album-price-note-foot p {
  margin: 0;
}

.album-price-note-foot p + p {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .album-price-notice {
    width: calc(100% - 24px);
    margin: 16px auto 14px;
    padding: 15px 14px;
    border-radius: 16px;
  }
  .album-price-columns {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .album-price-lines li {
    padding: 9px 12px;
    font-size: 13.5px;
  }
  .album-price-lines li strong {
    font-size: 15px;
  }
}

/* ==========================================================================
   5. GRILLA MASONRY DE FOTOS (.mosaic-gallery) Y BOTÓN DIRECTO (.select-dot)
   ========================================================================== */
.album-gallery-section {
  width: min(1800px, 100%);
  margin: 0 auto;
  padding: 12px;
  scroll-margin-top: 74px;
}

.photo-section-head {
  color: #111827;
  text-align: left;
  max-width: min(1180px, 100vw - 28px);
  margin: 0 auto 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}

.photo-section-head h2 {
  color: #111827;
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 850;
  line-height: 0.95;
}

.photo-section-head p {
  color: #475569;
  margin: 8px 0 0;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
}

.mosaic-gallery {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.mosaic-column {
  flex-direction: column;
  flex: 1 1 0;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.mosaic-photo {
  background: #dededb;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.mosaic-photo .photo-open {
  width: 100%;
  height: auto;
  line-height: 0;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  cursor: zoom-in;
}

.mosaic-photo .real-photo {
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
}

.mosaic-photo.is-selected {
  outline: 3px solid #fac823;
  outline-offset: -3px;
}

/* Marca de agua sobre foto en grilla */
.mosaic-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mosaic-watermark::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image: var(--wm-pattern-bg, none);
  background-repeat: repeat;
  pointer-events: none;
}

.mosaic-watermark img {
  width: 38%;
  max-width: 130px;
  opacity: var(--wm-opacity, 0.35);
  filter: var(--wm-logo-filter, drop-shadow(0 2px 4px rgba(0,0,0,0.35)));
  pointer-events: none;
  user-select: none;
}

/* Marca de agua XL exclusiva para el reproductor de video (blindaje anti-robo en pantalla) */
.mosaic-watermark-video img {
  width: 72% !important;
  max-width: 360px !important;
  opacity: calc(var(--wm-opacity, 0.35) * 1.35) !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.75)) !important;
}

/* Botón directo 1-Click para Móvil y Desktop (.select-dot) */
.mosaic-photo .select-dot {
  z-index: 4;
  color: #ffffff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #111111b8;
  border: 1px solid #ffffffc7;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transition: background-color 0.16s, color 0.16s, transform 0.12s;
  display: grid;
  position: absolute;
  bottom: 9px;
  right: 9px;
  box-shadow: 0 3px 14px #0000003d;
}

.mosaic-photo .select-dot:active {
  transform: scale(1.08) !important;
}

.mosaic-photo .select-dot svg,
.viewer-action svg,
.video-cart-button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  display: block;
}

.mosaic-photo.is-selected .select-dot {
  color: #151515e6;
  background: #fac823d1;
  border-color: #fac823e6;
}

@media (hover: hover) {
  .mosaic-photo .select-dot:hover,
  .viewer-action:hover,
  .video-cart-button:hover {
    color: #151515e6;
    background: #fac823eb;
    border-color: #fac823f2;
  }
}

/* Feedback instantáneo al tocar el carrito en la foto */
.cart-added-feedback {
  z-index: 5;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  background: #111111e6;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  animation: 1.1s both cartAddedPop;
  position: absolute;
  bottom: 50px;
  right: 9px;
  box-shadow: 0 8px 24px #00000038;
}

@keyframes cartAddedPop {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@media (max-width: 620px) {
  .album-hero {
    height: calc(84dvh - 56px);
    min-height: 440px;
  }
  .album-hero-back {
    top: 14px;
    left: 14px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .album-hero-content {
    padding: 22px;
  }
  .album-hero-content h1 {
    font-size: clamp(36px, 12vw, 64px);
  }
  .album-gallery-section {
    padding: 7px;
    scroll-margin-top: 64px;
  }
  .mosaic-gallery,
  .mosaic-column {
    gap: 7px;
  }
  .mosaic-photo .select-dot {
    width: 31px;
    height: 31px;
    bottom: 7px;
    right: 7px;
  }
  .mosaic-photo .select-dot svg {
    width: 15px;
    height: 15px;
  }
  .cart-added-feedback {
    padding: 6px 9px;
    font-size: 10px;
    bottom: 44px;
    right: 7px;
  }
}

/* ==========================================================================
   6. SECCIÓN DE VIDEOS INDIVIDUALES (.individual-video-section)
   ========================================================================== */
.individual-video-section {
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  max-width: min(1180px, 100vw - 28px);
  margin: 28px auto;
  padding: 24px;
  box-shadow: 0 22px 58px #00000018;
  scroll-margin-top: 74px;
}

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

.individual-video-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
  overflow: hidden;
}

.individual-video-card.is-selected {
  border-color: #facc15;
  box-shadow: 0 0 0 3px #facc1538;
}

.individual-video-stage {
  background: #020617;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.individual-video-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-preview-start {
  color: #ffffff;
  cursor: pointer;
  background: #000000a6;
  border: 1px solid #ffffffa6;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  padding: 0;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.individual-video-meta {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.individual-video-meta strong {
  color: #111827;
  font-size: 14px;
  display: block;
}

.individual-video-meta span {
  color: #64748b;
  margin-top: 2px;
  font-size: 12px;
  display: block;
}

.video-cart-button {
  color: #ffffff;
  background: #111111b8;
  border: 1px solid #ffffffc7;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  box-shadow: 0 3px 14px #0000003d;
}

.individual-video-card.is-selected .video-cart-button {
  color: #151515e6;
  background: #fac823d1;
  border-color: #fac823e6;
}

@media (max-width: 920px) {
  .individual-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .individual-video-section {
    border-radius: 22px;
    padding: 16px;
  }
  .individual-video-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. VISOR FULLSCREEN (.viewer) CON SWIPE, PINCH-ZOOM Y ACCIÓN DIRECTA
   ========================================================================== */
.viewer {
  z-index: 90;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
  background: #000000eb;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: none;
  position: fixed;
  inset: 0;
}

.viewer.is-open {
  display: flex;
}

.viewer-card {
  will-change: transform, opacity;
  background: transparent;
  flex-direction: column;
  align-items: center;
  width: min(1100px, 100%);
  height: auto;
  max-height: 92vh;
  display: flex;
  position: relative;
}

.viewer-image-frame {
  place-items: center;
  width: min(1100px, 100%);
  max-width: 100%;
  min-height: 0;
  display: grid;
  position: relative;
}

.viewer-real-image {
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #111111;
  border-radius: 10px;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(80vh - 60px);
  display: block;
}

.viewer-filename {
  color: #ffffffe0;
  text-align: center;
  margin: 0;
  padding: 10px 8px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.viewer-close,
.viewer-nav {
  z-index: 5;
  color: #ffffffe6;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #0000004d;
  border: 1px solid #ffffffe6;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  line-height: 1;
  transition: background-color 0.16s, color 0.16s;
  display: grid;
  position: absolute;
  box-shadow: 0 2px 10px #00000029;
}

.viewer-close svg,
.viewer-nav svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}

.viewer-close {
  top: 12px;
  right: 12px;
}

.viewer-nav {
  top: 50%;
  transform: translateY(-50%);
}

.viewer-nav.left {
  left: 12px;
}

.viewer-nav.right {
  right: 12px;
}

.viewer-action {
  z-index: 5;
  color: #ffffff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #111111b8;
  border: 1px solid #ffffffc7;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  transition: background-color 0.16s, color 0.16s, transform 0.12s;
  display: grid;
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3px 14px #0000003d;
}

.viewer-action:active {
  transform: translateX(-50%) scale(1.08) !important;
}

.viewer-action.is-remove {
  color: #151515e6;
  background: #fac823d1;
  border-color: #fac823e6;
}

.viewer-added-feedback {
  z-index: 6;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  background: #111111eb;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 850;
  animation: 1.1s both viewerAddedPop;
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 28px #00000047;
}

@keyframes viewerAddedPop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(0.98); }
}

@media (max-width: 620px) {
  .viewer {
    padding: 12px;
  }
  .viewer-close,
  .viewer-nav {
    width: 34px;
    height: 34px;
  }
  .viewer-close {
    top: 9px;
    right: 9px;
  }
  .viewer-nav.left {
    left: 9px;
  }
  .viewer-nav.right {
    right: 9px;
  }
  .viewer-real-image {
    border-radius: 8px;
    max-height: calc(75dvh - 55px);
  }
  .viewer-action {
    width: 38px;
    height: 38px;
    bottom: 10px;
  }
}

/* ==========================================================================
   8. STICKY BAR MÓVIL (.mobile-cart-bar) Y DRAWER (.cart-drawer.cart-refresh)
   ========================================================================== */
.mobile-cart-bar {
  z-index: 45;
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #1118272e !important;
  border-radius: 999px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: min(92vw, 420px);
  padding: 12px 18px;
  display: none;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 16px 42px #00000047 !important;
  cursor: pointer;
}

.mobile-cart-bar.is-visible {
  display: flex;
}

.mobile-cart-bar span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 800;
  color: #64748b !important;
}

.mobile-cart-bar strong {
  color: #111827 !important;
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.mobile-cart-bar em {
  color: #128c4a !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.cart-open .mobile-cart-bar {
  display: none !important;
}

/* Cart Drawer Backdrop & Aside */
.cart-drawer-backdrop {
  opacity: 0;
  pointer-events: none;
  z-index: 95 !important;
  position: fixed !important;
  inset: 0 !important;
  background: #00000070 !important;
  border: 0;
  transition: opacity 0.2s;
}

.cart-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer.cart-refresh {
  z-index: 96 !important;
  width: min(430px, 94vw) !important;
  height: 100dvh !important;
  position: fixed !important;
  inset: 0 0 auto auto !important;
  background: #ffffff !important;
  color: #151515 !important;
  padding: 0 !important;
  flex-direction: column;
  display: flex;
  transform: translate(105%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -18px 0 50px #00000029 !important;
}

.cart-drawer.cart-refresh.is-open {
  transform: translate(0) !important;
}

.cart-drawer.cart-refresh .cart-drawer-head {
  border-bottom: 1px solid #e9ecef;
  justify-content: space-between;
  align-items: center;
  margin: 0 !important;
  padding: 20px 20px 16px !important;
  display: flex;
}

.cart-drawer-head > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.cart-drawer-head span {
  color: #777777 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
}

.cart-drawer-head strong {
  font-size: 21px;
  font-weight: 800;
  color: #151515;
  font-variant-numeric: tabular-nums;
}

.cart-drawer-head > button {
  background: #f3f4f5 !important;
  border: 0;
  border-radius: 50%;
  width: 34px !important;
  height: 34px !important;
  font-size: 22px;
  color: #151515;
  display: grid;
  place-items: center;
}

.cart-drawer-items {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 20px;
  display: flex;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.cart-drawer-empty {
  color: #777777 !important;
  padding: 36px 20px;
  text-align: center;
  font-size: 14px;
}

.cart-section-card {
  background: #ffffff !important;
  border: 0 !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  display: grid;
}

.cart-section-card + .cart-section-card {
  border-top: 1px solid #e5e7eb !important;
}

.cart-section-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 6px;
  display: flex;
}

.cart-section-head span {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10px;
  font-weight: 700;
  color: #81858b !important;
  display: block;
}

.cart-section-head strong {
  font-size: 14px;
  font-weight: 700;
  color: #232629 !important;
}

.cart-drawer-item {
  border-top: 1px solid #f0f1f3;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  grid-template-columns: 50px minmax(0, 1fr) 30px;
  display: grid;
}

.cart-drawer-item:first-of-type {
  border-top: 0;
}

.cart-drawer-thumb {
  object-fit: cover;
  background: #efefec;
  border-radius: 9px;
  width: 50px;
  height: 50px;
  display: block;
  cursor: zoom-in;
}

.cart-item-main {
  text-align: left;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.cart-item-main strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: #111827 !important;
}

.cart-item-main span {
  color: #8b9096 !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

.cart-row-remove {
  color: #777777 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: grid !important;
}

.cart-row-remove:hover {
  color: #111827 !important;
  background: #f3f4f6 !important;
}

/* Resumen financiero inferior del Drawer */
.cart-financial-summary {
  background: #f8f9fa;
  border-top: 1px solid #e2e5e8;
  flex-shrink: 0;
  padding: 16px 20px;
  box-shadow: 0 -6px 18px #1d293907;
}

.cart-applied-promos {
  background: #eef0f2;
  border: 1px solid #e7e9ec;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
}

.cart-applied-promos h3 {
  text-transform: uppercase;
  letter-spacing: 0.055em;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 750;
  color: #2f3438 !important;
}

.cart-applied-promos p {
  margin: 0;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
}

.cart-accounting-row {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
  font-size: 13px;
  display: flex;
  font-variant-numeric: tabular-nums;
}

.cart-base-subtotal {
  color: #8b9096;
}

.cart-savings {
  color: #18834e !important;
  font-weight: 700;
}

.cart-final-total {
  border-top: 1px solid #dadee2;
  margin-top: 8px;
  padding-top: 10px;
}

.cart-final-total span {
  font-size: 15px;
  font-weight: 700;
  color: #141414 !important;
}

.cart-final-total strong {
  letter-spacing: -0.04em;
  font-size: 26px;
  font-weight: 850;
  color: #141414 !important;
  font-variant-numeric: tabular-nums;
}

.cart-retouch-check {
  background: #ffffff;
  border: 1px solid #e2e5e8;
  border-radius: 11px;
  padding: 10px 12px;
  margin: 10px 0;
}

.cart-retouch-check label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: #151515;
  cursor: pointer;
}

.cart-retouch-check small {
  display: block;
  margin: 4px 0 0 22px;
  font-size: 11px;
  color: #686868;
}

.cart-email-input {
  width: 100%;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}

.cart-email-input:focus {
  border-color: #151515;
}

.primary-button {
  background: #151515 !important;
  color: #ffffff !important;
  border: 0;
  border-radius: 11px;
  padding: 13px 18px;
  font-weight: 750;
  font-size: 14px;
  width: 100%;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.primary-button:hover {
  background: #2b2b2b !important;
}

.secondary-button {
  border: 1px solid #d0d5dd;
  color: #151515 !important;
  background: #ffffff !important;
  border-radius: 11px;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 13px;
  width: 100%;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.cart-clear-button {
  color: #7f1d1d !important;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .cart-drawer.cart-refresh {
    width: 100vw !important;
  }
  .cart-drawer.cart-refresh .cart-drawer-head {
    padding: 16px !important;
  }
  .cart-drawer.cart-refresh .cart-drawer-items {
    padding: 0 16px;
  }
  .cart-drawer.cart-refresh .cart-financial-summary {
    padding: 14px 16px;
  }
}

/* ==========================================================================
   9. FOOTER ESTILO BUSCA TU FOTO (.site-footer)
   ========================================================================== */
.site-footer {
  color: #555555 !important;
  background: #deded8 !important;
  border-top: 1px solid #d0d0ca !important;
  padding: 22px 0 16px;
  font-size: 13px;
}

.site-footer-inner {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 24px;
  display: grid;
}

.site-footer-brand {
  color: #252922;
  letter-spacing: -0.04em;
  align-items: baseline;
  gap: 4px;
  font-size: 22px;
  font-weight: 850;
  display: inline-flex;
}

.site-footer-brand span {
  font-size: 12px;
}

.site-footer-links {
  justify-content: flex-end;
  gap: 24px;
  display: flex;
}

.site-footer-links a,
.site-footer-links button {
  color: #343b30;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  background: transparent;
  border: 0;
  padding: 0;
}

.site-footer-links a:hover,
.site-footer-links button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-bottom {
  border-top: 1px solid #c5c8be;
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  margin-top: 6px;
  display: flex;
}

.site-footer-bottom p {
  color: #555b50;
  margin: 0;
  font-size: 12px;
}

.site-footer-controls {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #42483c;
}

@media (max-width: 760px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .site-footer-links {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================================================
   10. MODALES DE APOYO (ANTI-DUPLICADOS, PROCESANDO PAGO, PORTAFOLIO/CUADROS)
   ========================================================================== */
.quick-buy-overlay {
  z-index: 120;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #0000006b;
  place-items: center;
  padding: 22px;
  display: none;
  position: fixed;
  inset: 0;
}

.quick-buy-overlay.active {
  display: grid;
}

.quick-buy-card {
  color: #151515;
  background: #ffffff;
  border: 1px solid #e6e6e2;
  border-radius: 24px;
  width: min(430px, 100%);
  padding: 24px;
  position: relative;
  box-shadow: 0 24px 80px #0000003d;
}

.quick-buy-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #efefec;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.select-dot-icon {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
}

.badge-purchased-shield {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  background: #18834e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.secondary-view-section {
  max-width: 1264px;
  margin: 0 auto;
  padding: 48px 28px 80px;
}

.secondary-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #deded6;
}

.secondary-view-header h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

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

.secondary-card {
  background: #ffffff;
  border: 1px solid #e3e3da;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 22px #201d130a;
}

.secondary-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.secondary-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.secondary-card-body h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 750;
}

.secondary-card-body p {
  margin: 0;
  font-size: 14px;
  color: #636357;
}

@media (max-width: 960px) {
  .secondary-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .secondary-view-section {
    padding: 28px 16px 64px;
  }
  .secondary-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Botón Flotante Oficial de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 46;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42), 0 4px 10px rgba(0, 0, 0, 0.18);
  border: 2px solid #ffffff;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.22s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55), 0 6px 14px rgba(0, 0, 0, 0.22);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

body.has-mobile-cart-bar .whatsapp-float {
  bottom: 92px;
}

body.cart-open .whatsapp-float {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 620px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 16px;
  }
  .whatsapp-float svg {
    width: 25px;
    height: 25px;
  }
}

/* FASE A: BADGES E INDICADORES DE RÁFAGA (SMART BURSTS) */
.badge-burst-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  background: linear-gradient(135deg, #151515eb 0%, #2a200beb 100%);
  color: #ffde59;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #ffde5966;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-quick-chip.chip-burst {
  background: #fff8e1;
  color: #8c5b05;
  border-color: #f6c867;
  font-weight: 750;
}

.search-quick-chip.chip-burst:hover {
  background: #ffebaa;
  color: #5d3b00;
}

.search-quick-chip.chip-burst.active {
  background: #f59e0b;
  color: #1a1403;
  border-color: #d97706;
}

.viewer-burst-bar {
  margin: 12px auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  width: 94%;
}

.viewer-burst-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #ebd089;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.viewer-burst-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 6px 4px;
  scrollbar-width: thin;
}

.viewer-burst-strip::-webkit-scrollbar {
  height: 4px;
}

.viewer-burst-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.viewer-burst-thumb {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  background: #000;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.viewer-burst-thumb:hover {
  transform: scale(1.05);
  border-color: #ffde59;
}

.viewer-burst-thumb.is-current {
  border-color: #ffde59;
  box-shadow: 0 0 0 2px rgba(255, 222, 89, 0.6);
  transform: scale(1.06);
}

.viewer-burst-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewer-burst-thumb .thumb-idx {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffde59;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
}

.viewer-burst-btn {
  background: linear-gradient(135deg, #ffde59 0%, #f59e0b 100%);
  color: #171717;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewer-burst-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.5);
}

/* FASE B: CARRITO COMPARTIDO (SOCIAL CARTS) */
.cart-share-button {
  background: #f4f4f2;
  color: #2b2b28;
  border: 1px solid #dcdcd6;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}

.cart-share-button:hover {
  background: #e8e8e2;
  border-color: #bebeb2;
}

.cart-share-button.is-copied {
  background: #e6f4ea;
  color: #137333;
  border-color: #ceead6;
}

/* ==========================================================================
   BOTÓN WHATSAPP DESTACADO EN CARRITO (#btnCartWhatsApp)
   ========================================================================== */
#btnCartWhatsApp {
  background: #25D366;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%);
  color: #ffffff !important;
  border: none !important;
  font-weight: 800;
  font-size: 13.5px;
  padding: 13px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  margin-top: 8px;
}

#btnCartWhatsApp:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

#btnCartWhatsApp:active {
  transform: scale(0.98);
}

/* ==========================================================================
   AVISO BOOK (+10 FOTOS) EN BARRA MÓVIL Y CARRITO
   ========================================================================== */
.mobile-cart-container {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(420px, calc(100% - 32px));
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.mobile-cart-container.is-visible {
  display: flex;
}

.mobile-cart-container .mobile-cart-bar {
  pointer-events: auto;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.mobile-cart-book-prompt {
  pointer-events: auto;
  background: #111111;
  color: #f7faf8;
  border: 1px solid #25D366;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 11.5px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
  animation: 0.3s ease-out bookPromptSlide;
}

@keyframes bookPromptSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-cart-book-prompt .prompt-spark {
  font-size: 14px;
  flex-shrink: 0;
}

.mobile-cart-book-prompt strong {
  color: #25D366;
  font-weight: 800;
}

.mobile-cart-book-prompt .prompt-arrow {
  margin-left: auto;
  color: #25D366;
  font-weight: 900;
  font-size: 12px;
}

.cart-book-alert-card {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 6px;
  animation: 0.25s ease-out bookCardFade;
}

@keyframes bookCardFade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.book-alert-badge {
  display: inline-block;
  background: #15803d;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.cart-book-alert-card p {
  margin: 0;
  font-size: 12px;
  color: #166534;
  line-height: 1.45;
}

/* ==========================================================================
   BARRA INFERIOR DESPEJADA Y TOAST SUPERIOR DERECHO EN EL VISOR
   ========================================================================== */
.viewer-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 10px;
  pointer-events: auto;
}

.viewer-action-dock {
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 94%;
  pointer-events: auto;
}

.viewer-dock-main-btn {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  user-select: none;
  white-space: nowrap;
}

.viewer-dock-main-btn:hover {
  transform: scale(1.03);
}

.viewer-dock-main-btn:active {
  transform: scale(0.96);
}

.viewer-dock-main-btn.is-in-cart {
  background: #18834e;
  color: #ffffff;
  border-color: #22c55e;
}

.viewer-dock-quick-cart {
  background: rgba(22, 22, 26, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}

.viewer-dock-quick-cart:hover {
  background: #2a2a30;
  transform: scale(1.03);
}

.viewer-dock-quick-cart:active {
  transform: scale(0.96);
}

/* Toast discreto en esquina superior derecha de la foto */
.viewer-toast-feedback {
  z-index: 25;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(17, 24, 39, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: 1.25s cubic-bezier(0.16, 1, 0.3, 1) both viewerToastTopRight;
}

.viewer-toast-feedback.is-removing {
  background: rgba(45, 18, 18, 0.94);
  border-color: rgba(239, 68, 68, 0.35);
}

.viewer-toast-feedback.is-removing .toast-icon {
  background: #ef4444;
}

.viewer-toast-feedback .toast-icon {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

@keyframes viewerToastTopRight {
  0% { opacity: 0; transform: translateY(-8px) scale(0.94); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

@media (max-width: 620px) {
  .viewer-bottom-bar {
    gap: 6px;
    padding-top: 6px;
  }
  .viewer-toast-feedback {
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    font-size: 11.5px;
  }
  .viewer-dock-main-btn {
    padding: 7px 14px;
    font-size: 12px;
  }
  .viewer-dock-quick-cart {
    padding: 7px 12px;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   MODAL COMPARTIR SELECCIÓN CON UN AMIGO (#shareSelectionModal)
   ========================================================================== */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.share-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.share-modal-card {
  background: #ffffff;
  color: #171717;
  width: min(440px, 100%);
  border-radius: 20px;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  position: relative;
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-modal-overlay.is-open .share-modal-card {
  transform: translateY(0) scale(1);
}

.share-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f4f4f5;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #71717a;
  transition: background 0.15s, color 0.15s;
}

.share-modal-close:hover {
  background: #e4e4e7;
  color: #09090b;
}

.share-modal-icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #f0fdf4;
  color: #16a34a;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 14px;
}

.share-modal-card h3 {
  font-size: 19px;
  font-weight: 850;
  margin: 0 0 10px;
  color: #09090b;
}

.share-modal-card p {
  font-size: 13.5px;
  color: #52525b;
  line-height: 1.5;
  margin: 0 0 18px;
}

.share-link-input-group {
  display: flex;
  gap: 6px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  padding: 4px 6px;
  margin-bottom: 16px;
}

.share-link-input-group input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: #3f3f46;
  padding: 6px 8px;
  font-family: inherit;
  text-overflow: ellipsis;
}

.share-copy-btn {
  background: #18181b;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.share-copy-btn:hover {
  background: #27272a;
}

.share-copy-btn.is-copied {
  background: #16a34a;
}

.share-whatsapp-btn {
  background: #25D366;
  background: linear-gradient(135deg, #25D366 0%, #1ea952 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 850;
  width: 100%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.share-whatsapp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

.share-whatsapp-btn:active {
  transform: scale(0.98);
}