:root {
      --yellow: #f6c21a;
      --orange: #ff8a3d;
      --pink: #ff6a63;
      --purple: #8b5cf6;
      --ink: #122033;
      --cream: #fff8d9;
      --shadow: 0 22px 52px rgba(0, 0, 0, .24);
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      color: #fff;
      overflow: hidden;
    }

body{
  min-height:100dvh;
  position:relative;
  background:url('../../css/img/fondonew5.png') center center / cover no-repeat;

}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(10,8,30,.18);
  pointer-events:none;
}
 

    .kids-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden
    }

.planet-img{
  position:absolute;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.28));
}

.planet-one{
  width:220px;
  left:7%;
  top:18%;
  animation:planetFloatOne 11s ease-in-out infinite;
}

.planet-two{
  width:170px;
  right:8%;
  bottom:15%;
  animation:planetFloatTwo 9s ease-in-out infinite;
}

@keyframes planetFloatOne{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(-20px) rotate(5deg);
  }
}

@keyframes planetFloatTwo{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(16px) rotate(-6deg);
  }
}

    .orbit {
      position: absolute;
      width: min(880px, 70vw);
      height: 220px;
      right: -12vw;
      top: 8vh;
      border: 3px dashed rgba(255, 255, 255, .34);
      border-left-color: transparent;
      border-bottom-color: rgba(255, 255, 255, .18);
      border-radius: 50%;
      transform: rotate(-18deg);
    }

    .rocket {
      position: absolute;
      right: 9vw;
      top: 18vh;
      width: 150px;
      height: 150px;
      transform: rotate(18deg);
      animation: rocketFloat 5.8s ease-in-out infinite;
      filter: drop-shadow(0 18px 26px rgba(82, 38, 123, .24))
    }

    .rocket::before {
      content: "🚀";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 112px
    }

    .star-shape {
      position: absolute;
      color: rgba(255, 255, 255, .78);
      font-size: 28px;
      text-shadow: 0 8px 18px rgba(63, 33, 120, .18);
      animation: twinkle 2.8s ease-in-out infinite
    }

    .s1 {
      left: 13vw;
      top: 20vh
    }

    .s2 {
      right: 28vw;
      top: 22vh;
      animation-delay: -.9s
    }

    .s3 {
      right: 18vw;
      bottom: 18vh;
      animation-delay: -1.6s
    }

    .s4 {
      left: 36vw;
      bottom: 12vh;
      animation-delay: -2.2s
    }

    .blob {
      position: absolute;
      border-radius: 38% 62% 55% 45%;
      opacity: .30;
      filter: blur(.2px);
      animation: floaty 7s ease-in-out infinite
    }

    .blob.b1 {
      width: 130px;
      height: 130px;
      left: 8%;
      top: 34%;
      background: #ffec6e
    }

    .blob.b2 {
      width: 92px;
      height: 92px;
      right: 6%;
      top: 44%;
      background: #ffb347;
      animation-delay: -2s
    }

    .blob.b3 {
      width: 120px;
      height: 120px;
      left: 24%;
      bottom: 18%;
      background: #ffe66d;
      animation-delay: -4s
    }

    .blob.b4 {
      width: 86px;
      height: 86px;
      right: 28%;
      bottom: 16%;
      background: #ff7043;
      animation-delay: -1s
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0) rotate(0deg)
      }

      50% {
        transform: translateY(-18px) rotate(8deg)
      }
    }

    @keyframes rocketFloat {

      0%,
      100% {
        transform: translateY(0) rotate(18deg)
      }

      50% {
        transform: translateY(-18px) rotate(24deg)
      }
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: .42;
        transform: scale(.9) rotate(0deg)
      }

      50% {
        opacity: 1;
        transform: scale(1.12) rotate(12deg)
      }
    }

    /* Header */
    .header {
      position: fixed;
      z-index: 30;
      top: 22px;
      left: 28px;
      right: 28px;
      height: 66px;
      padding: 0 18px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, .23);
      border: 1px solid rgba(255, 255, 255, .62);
      box-shadow: 0 18px 45px rgba(95, 68, 0, .18);
      backdrop-filter: blur(14px);
    }

    .brand {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      text-decoration: none
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      padding: 3px;
      background: linear-gradient(135deg, #fff, #f6c21a);
      box-shadow: 0 8px 18px rgba(91, 65, 0, .24)
    }

    .avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block
    }

    .brand-title {
      font-size: 21px;
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 6px 16px rgba(70, 45, 0, .26)
    }

    .header-actions {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .icon-btn,
    .back,
    .cartBtn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(246, 194, 26, .58);
      border: 1px solid rgba(255, 255, 255, .48);
      box-shadow: 0 10px 22px rgba(78, 54, 0, .24);
      text-decoration: none;
    }

    .back {
      color: #744b00;
      background: rgba(255, 255, 255, .78);
      font-size: 34px;
      font-weight: 900
    }

    .icon-btn img {
      width: 28px;
      height: 28px;
      object-fit: contain;
      display: block
    }

    .cartBtn {
      position: relative;
      border: 0;
      font-size: 21px;
      cursor: pointer
    }

    .cartBtn .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #ff4d49;
      font-size: 10px;
      font-weight: 900;
      border: 2px solid rgba(255, 255, 255, .9);
    }

    /* Layout */
    .market-page {
      position: relative;
      z-index: 2;
      height: 100dvh;
      padding: 116px 28px 112px;
      /* display: grid; */
      grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
      gap: 34px;
      align-items: center;
    }

    .copy {
      position: relative;
      z-index: 8;
      max-width: 410px;
      padding-left: 2vw
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 36px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(246, 194, 26, .86);
      color: #432b00;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
    }

    .copy h1 {
      margin: 18px 0 14px;
      font-size: clamp(48px, 5.8vw, 84px);
      line-height: .88;
      letter-spacing: -.065em;
      font-weight: 900;
      text-shadow: 0 18px 36px rgba(80, 40, 120, .22);
    }

    .copy p {
      margin: 0;
      max-width: 360px;
      color: rgba(255, 255, 255, .90);
      font-size: clamp(15px, 1.2vw, 19px);
      line-height: 1.32;
      font-weight: 900;
      text-shadow: 0 8px 20px rgba(80, 40, 120, .18);
    }

    .market-shell {
      min-width: 0;
      height: min(620px, calc(100dvh - 230px));
      min-height: 500px;
      border-radius: 38px;
      padding: 18px;
      color: var(--ink);
      /* background: rgba(255, 255, 255, .70); */
      border: 1px solid rgba(255, 255, 255, .72);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 14px;
      overflow: hidden;
    }

/* Fondo visual marketplace */
.market-shell{
  position:relative;
  overflow:hidden;
}

.market-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)),
    url('https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?q=80&w=1600&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  opacity:.32;
  z-index:0;
}

/* Todo arriba del fondo */
.market-shell > *{
  position:relative;
  z-index:2;
}

    /* Banner */
    .banner {
      position: relative;
      height: 150px;
      border-radius: 30px;
      overflow: hidden;
      background: #111;
      box-shadow: 0 16px 32px rgba(0, 0, 0, .18)
    }

    .banner .img {
      position: absolute;
      inset: 0;
      background: center/cover no-repeat;
      transform: scale(1.02)
    }

    .banner .veil {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .12)), radial-gradient(circle at 80% 20%, rgba(246, 194, 26, .36), transparent 28%);
    }

    .banner .txt {
      position: absolute;
      left: 20px;
      right: 160px;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      text-shadow: 0 6px 16px rgba(0, 0, 0, .45)
    }

    .banner .title {
      font-size: clamp(30px, 3.4vw, 48px);
      line-height: .9;
      font-weight: 900;
      letter-spacing: -.045em
    }

    .banner .sub {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 900;
      opacity: .92
    }

    .banner .ribbon {
      position: absolute;
      right: 18px;
      bottom: 18px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #342500;
      background: linear-gradient(135deg, #fff5b1, #f6c21a);
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
    }

    /* Chips */
    .chips {
      display: flex;
      gap: 10px;
      /* overflow-x: auto; */
      padding: 2px 2px 4px;
      scroll-snap-type: x proximity;
      scrollbar-width: none
    }

    .chips::-webkit-scrollbar {
      display: none
    }

    .chip {
      flex: 0 0 auto;
      scroll-snap-align: start;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .65);
      color: #342500;
      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(8px);
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    }

    .chip.active {
      background: linear-gradient(135deg, #fff5b1, #f6c21a);
      box-shadow: 0 12px 26px rgba(142, 99, 0, .18)
    }

    /* Grid */
    .market-scroll {
      min-height: 0;
      overflow: auto;
      padding-right: 4px;
      -webkit-overflow-scrolling: touch
    }

    .market-scroll::-webkit-scrollbar {
      width: 8px
    }

    .market-scroll::-webkit-scrollbar-thumb {
      background: #f6c21a;
      border-radius: 999px
    }

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

    .card {
      position: relative;
      min-height: 260px;
      border-radius: 24px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
      border: 1px solid rgba(255, 255, 255, .76);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
    }

    .card .img {
      height: 164px;
      background: center/cover no-repeat
    }

    .card .badge {
      position: absolute;
      left: 10px;
      top: 10px;
      height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, .54);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      backdrop-filter: blur(6px);
    }

    .card .heart {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 38px;
      height: 38px;
      border-radius: 15px;
      border: 0;
      display: grid;
      place-items: center;
      background: #fff;
      color: #ff3b30;
      font-weight: 900;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
      cursor: pointer;
    }

    .card .body {
      padding: 12px;
      background: rgba(255, 255, 255, .88);
      min-height: 96px
    }

    .card .name {
      color: #122033;
      font-weight: 900;
      font-size: 14px;
      line-height: 1.18
    }

    .card .price {
      font-weight: 900;
      color: #16a34a;
      margin-top: 6px
    }

    .card .buy {
      margin-top: 9px;
      width: 100%;
      height: 38px;
      border-radius: 999px;
      border: 0;
      color: #fff;
      font-weight: 900;
      background: linear-gradient(135deg, #ff6a63, #8b5cf6);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
      cursor: pointer;
    }

    /* Modal detalle */
    .modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 80
    }

    .modal.on {
      display: block
    }

    .modal .scrim {
      position: absolute;
      inset: 0;
      background: rgba(21, 18, 34, .42);
      backdrop-filter: blur(10px)
    }

    .sheet {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(680px, 92vw);
      border-radius: 34px;
      background: linear-gradient(135deg, #fff, #fff8d9);
      color: #122033;
      box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
      padding: 18px;
    }

    .sheet .bar {
      width: 56px;
      height: 6px;
      border-radius: 999px;
      background: #e5e7eb;
      margin: 0 auto 14px
    }

    .sheet .row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 18px;
      align-items: center
    }

    .sheet .ph {
      width: 180px;
      height: 180px;
      border-radius: 24px;
      background: #eee center/cover no-repeat;
      box-shadow: 0 12px 26px rgba(0, 0, 0, .12)
    }

    .sheet h3 {
      margin: 0 0 4px;
      font-size: 30px;
      line-height: 1;
      letter-spacing: -.04em;
      font-weight: 900
    }

    .sheet p {
      margin: 8px 0 0;
      color: #475569;
      font-weight: 800;
      line-height: 1.35
    }

    .sheet .price {
      font-size: 22px;
      color: #16a34a
    }

    .sheet .cta {
      display: flex;
      gap: 10px;
      margin-top: 18px
    }

    .sheet .cta button {
      flex: 1;
      height: 50px;
      border-radius: 999px;
      border: 0;
      font-weight: 900;
      cursor: pointer
    }

    .sheet .cta .add {
      background: #f6c21a;
      color: #342500
    }

    .sheet .cta .go {
      background: linear-gradient(135deg, #ff6a63, #8b5cf6);
      color: #fff
    }

    /* Footer */
    .footer {
      position: fixed;
      z-index: 30;
      left: 28px;
      right: 28px;
      bottom: 18px;
      height: 78px;
      padding: 0 34px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* background: rgba(255, 253, 240, .78); */
      border: 1px solid rgba(255, 255, 255, .72);
      box-shadow: 0 -10px 34px rgba(90, 61, 0, .16);
      backdrop-filter: blur(14px);
    }
    .tab{
  width:70px;
  height:62px;
  border-radius:22px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
}

.tab-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  background:rgba(255,255,255,.82);
  color:#5f4a20;
}

.tab-label{
  font-size:10px;
  font-weight:900;
  line-height:1;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}

.tab.active{
  background:rgba(246,194,26,.95);
}

.tab.active{
  background:#f6c21a;
  box-shadow:0 12px 24px rgba(142,99,0,.18);
}

    /* .tab {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-decoration: none;
      font-size: 22px;
      color: #5f4a20;
      background: rgba(255, 255, 255, .68)
    }

    .tab.active {
      background: #f6c21a;
      box-shadow: 0 12px 24px rgba(142, 99, 0, .18)
    } */

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

    @media(max-width:860px) {

      html,
      body {
        overflow: auto
      }

      .header {
        top: 12px;
        left: 14px;
        right: 14px;
        height: 58px
      }

      .brand-title {
        font-size: 18px
      }

      .avatar {
        width: 42px;
        height: 42px
      }

      .icon-btn,
      .back,
      .cartBtn {
        width: 40px;
        height: 40px
      }

      .icon-btn img {
        width: 24px;
        height: 24px
      }

      .market-page {
        height: auto;
        min-height: 100dvh;
        display: block;
        padding: 92px 14px 110px
      }

      .copy {
        padding-left: 0;
        max-width: none;
        margin-bottom: 16px
      }

      .kicker {
        height: 32px;
        font-size: 12px
      }

      .copy h1 {
        font-size: 42px;
        margin: 12px 0 8px
      }

      .copy p {
        font-size: 14px
      }

      .market-shell {
        height: auto;
        min-height: auto;
        padding: 14px;
        border-radius: 30px
      }

      .banner {
        height: 145px;
        border-radius: 24px
      }

      .banner .txt {
        right: 20px
      }

      .banner .title {
        font-size: 34px
      }

      .banner .ribbon {
        display: none
      }

      .market-scroll {
        max-height: none;
        overflow: visible
      }

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

      .card {
        min-height: 238px;
        border-radius: 20px
      }

      .card .img {
        height: 146px
      }

      .sheet {
        top: auto;
        left: 0;
        right: 0;
        bottom: 88px;
        transform: none;
        width: auto;
        border-radius: 28px 28px 0 0
      }

      .sheet .row {
        grid-template-columns: 120px 1fr
      }

      .sheet .ph {
        width: 120px;
        height: 120px
      }

      .sheet h3 {
        font-size: 24px
      }

      .footer {
        left: 12px;
        right: 12px;
        bottom: 10px;
        height: 72px;
        padding: 0 14px
      }

      .tab {
        width: 50px;
        height: 50px
      }
    }
  
/* ===== MARKETPLACE AJUSTE FINAL: más fotos, menos texto ===== */

.market-page{
  padding-top:116px;
}

.market-shell{
  height:min(660px, calc(100dvh - 215px));
  min-height:540px;
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
}

/* Ocultamos el bloque superior dinámico: AMY / subtítulo / merchandising */
.market-shell > section:first-child{
  display:none !important;
}

/* Los chips quedan como cabecera principal */
.chips{
  padding:4px 4px 10px;
  justify-content:flex-start;
  gap:12px;
}

.chip{
  min-height:48px;
  padding:0 20px;
  font-size:14px;
  background:rgba(255,255,255,.86);
}

.chip.active{
  transform:translateY(-1px);
}

/* 4 productos por fila en desktop */
.grid{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:12px;
}

/* Card más baja y más visual */
.card{
  min-height:245px;
  border-radius:24px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
}

/* Más espacio para la foto y sin cortar tanto el producto */
.card .img{
  height:170px;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:rgba(255,255,255,.72);
}

/* Cuerpo más compacto para que gane la imagen */
.card .body{
  min-height:74px;
  padding:10px 12px 12px;
}

.card .name{
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card .price{
  margin-top:4px;
  font-size:15px;
}

.card .buy{
  height:34px;
  margin-top:7px;
  font-size:13px;
}

.card .badge{
  height:26px;
  font-size:10px;
  padding:0 9px;
}

.card .heart{
  width:36px;
  height:36px;
}

/* El scroll interno empieza más arriba y muestra más cards */
.market-scroll{
  margin-top: 44px;
  min-height:0;
  padding-bottom:4px;
}

/* En pantallas medianas, 3 por fila */
@media(max-width:1180px){
  .grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

/* En mobile queda 2 por fila */
@media(max-width:860px){
  .market-shell{
    grid-template-rows:auto minmax(0,1fr);
  }

  .grid{
    grid-template-columns:1fr 1fr !important;
  }

  .card .img{
    height:150px;
  }
}
.market-top{
  padding:4px 4px 10px;
}

.market-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(246,194,26,.88);
  color:#432b00;
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
}

.market-top h2{
  margin:0;
  color:#122033;
  font-size:34px;
  line-height:.95;
  letter-spacing:-.04em;
  font-weight:900;
}

.market-top p{
  margin:8px 0 0;
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  max-width:520px;
}