/* =========================================================
   Mizunara Studio
   Component / Catalog
   Premium Carousel
   Version 1.2
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.categories-showcase {
  text-align: center;
}


/* =========================================================
   CATEGORY TABS
========================================================= */

.category-tabs {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin:
    38px
    auto
    55px;
}


.category-tab {
  padding:
    12px
    22px;

  border: none;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.6
    );

  color:
    var(--dark);

  font-family:
    inherit;

  font-weight:
    600;

  cursor:
    pointer;

  -webkit-tap-highlight-color:
    transparent;

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


.category-tab:hover,
.category-tab.active,
.category-tab[aria-selected="true"] {
  background:
    var(--gold);

  color:
    white;

  transform:
    translateY(-3px);
}


.category-tab:focus-visible {
  outline:
    2px solid
    var(--gold);

  outline-offset:
    4px;

  box-shadow:
    0 0 0 4px
    rgba(
      212,
      180,
      131,
      0.14
    );
}


/* =========================================================
   PREMIUM CAROUSEL
========================================================= */

.premium-carousel {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 640px;

  padding:
    60px
    0;

  overflow: hidden;

  user-select: none;

  -webkit-user-select: none;
}


/* =========================================================
   STAGE
========================================================= */

.premium-carousel-stage {
  position: relative;

  width:
    min(
      760px,
      100%
    );

  height: 560px;

  margin:
    0 auto;

  perspective:
    1400px;

  touch-action:
    pan-y;

  opacity: 1;

  transition:
    opacity 0.18s ease;
}


.premium-carousel-stage.is-changing {
  opacity: 0;
}


/* =========================================================
   PHONE CARD
========================================================= */

.premium-card {
  position: absolute;

  top: 50%;

  left: 50%;

  width: 240px;

  height: 500px;

  padding: 10px;

  border-radius: 42px;

  background:
    linear-gradient(
      145deg,
      #1d1d1d,
      #3b3b3b
    );

  box-shadow:
    0 32px 70px
    rgba(
      0,
      0,
      0,
      0.22
    );

  cursor:
    pointer;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(0.7);

  transition:
    transform
      0.9s
      cubic-bezier(
        0.16,
        1,
        0.3,
        1
      ),
    opacity
      0.55s ease,
    filter
      0.55s ease,
    box-shadow
      0.55s ease;
}


/* =========================================================
   PHONE NOTCH
========================================================= */

.premium-card::before {
  content: "";

  position: absolute;

  top: 10px;

  left: 50%;

  z-index: 5;

  width: 86px;

  height: 20px;

  transform:
    translateX(-50%);

  border-radius:
    0 0 14px 14px;

  background:
    #000;
}


/* =========================================================
   PHONE SCREEN
========================================================= */

.premium-screen {
  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: 32px;

  background:
    white;
}


/* =========================================================
   SCREEN IMAGE
   Optimizada para conservar nitidez
========================================================= */

.premium-screen img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 1;

  filter: none;

  transform: none;

  image-rendering: auto;

  backface-visibility: hidden;

  -webkit-backface-visibility:
    hidden;
}


/* =========================================================
   ACTIVE CARD
   Se renderiza plana para evitar rasterizado 3D
========================================================= */

.premium-card.is-active {
  z-index: 6;

  opacity: 1;

  pointer-events: auto;

  filter: none;

  /*
    La tarjeta central queda completamente
    en plano 2D.

    Evitamos:
    - translateZ
    - scale
    - rotateY

    Esto ayuda a que Chrome / Brave no
    rastericen nuevamente la captura.
  */

  transform:
    translate(
      -50%,
      -50%
    );

  box-shadow:
    0 35px 90px
      rgba(
        0,
        0,
        0,
        0.28
      ),
    0 0 45px
      rgba(
        212,
        180,
        131,
        0.22
      );
}


/* =========================================================
   ACTIVE CARD OVERLAY
   Desactivado para conservar detalle
========================================================= */

.premium-card.is-active::after {
  content: none;
}


/* =========================================================
   LEFT CARD
========================================================= */

.premium-card.is-left {
  z-index: 4;

  opacity: 0.72;

  pointer-events: auto;

  filter:
    blur(0.4px);

  transform:
    translate(
      -50%,
      -50%
    )
    translateX(-210px)
    rotateY(22deg)
    scale(0.82);
}


/* =========================================================
   RIGHT CARD
========================================================= */

.premium-card.is-right {
  z-index: 4;

  opacity: 0.72;

  pointer-events: auto;

  filter:
    blur(0.4px);

  transform:
    translate(
      -50%,
      -50%
    )
    translateX(210px)
    rotateY(-22deg)
    scale(0.82);
}


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

.premium-card.is-far-left {
  z-index: 1;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(
      -50%,
      -50%
    )
    translateX(-330px)
    rotateY(30deg)
    scale(0.68);
}


.premium-card.is-far-right {
  z-index: 1;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(
      -50%,
      -50%
    )
    translateX(330px)
    rotateY(-30deg)
    scale(0.68);
}


/* =========================================================
   CUSTOM / BLANK CARD
========================================================= */

.premium-card[
  data-model-id*="personaliz"
] {
  background:
    linear-gradient(
      145deg,
      #a98756,
      #d4b483
    );
}


.premium-card[
  data-model-id*="personaliz"
]::before {
  background:
    rgba(
      42,
      35,
      29,
      0.92
    );
}


.premium-blank {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  padding:
    34px
    22px;

  overflow: hidden;

  border-radius: 32px;

  background:
    linear-gradient(
      160deg,
      #fffdf9,
      #f7f0e6
    );

  text-align: center;
}


.premium-blank::before {
  content: "";

  position: absolute;

  inset: 16px;

  border:
    1px dashed
    rgba(
      169,
      135,
      86,
      0.35
    );

  border-radius: 24px;

  pointer-events: none;
}


.premium-blank > * {
  position: relative;

  z-index: 1;
}


.premium-blank span {
  margin-bottom: 18px;

  font-size: 2.4rem;
}


.premium-blank h3 {
  margin-bottom: 12px;

  color:
    var(--dark);

  font-size: 1.75rem;
}


.premium-blank p {
  max-width: 185px;

  margin:
    0 auto;

  color:
    var(--dark);

  font-size: 0.92rem;

  line-height: 1.65;

  opacity: 0.76;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.carousel-control {
  position: absolute;

  top: 45%;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 54px;

  height: 54px;

  transform:
    translateY(-50%);

  border: none;

  border-radius: 50%;

  background: white;

  color:
    var(--gold);

  box-shadow:
    0 14px 35px
    rgba(
      0,
      0,
      0,
      0.12
    );

  font-family:
    inherit;

  font-size: 2.2rem;

  cursor:
    pointer;

  opacity: 1;

  visibility: visible;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;
}


.carousel-control:hover {
  background:
    var(--gold);

  color:
    white;
}


.carousel-control:focus-visible {
  outline:
    2px solid
    var(--gold);

  outline-offset:
    4px;
}


.carousel-control:disabled {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  cursor:
    default;
}


.carousel-prev {
  left: 4%;
}


.carousel-next {
  right: 4%;
}


.carousel-prev:not(:disabled):hover {
  animation:
    premiumArrowLeft
    0.9s
    ease
    infinite;
}


.carousel-next:not(:disabled):hover {
  animation:
    premiumArrowRight
    0.9s
    ease
    infinite;
}


/* =========================================================
   ARROW ANIMATIONS
========================================================= */

@keyframes premiumArrowLeft {

  0%,
  100% {
    transform:
      translateY(-50%)
      translateX(0)
      scale(1.08);
  }

  50% {
    transform:
      translateY(-50%)
      translateX(-6px)
      scale(1.12);
  }

}


@keyframes premiumArrowRight {

  0%,
  100% {
    transform:
      translateY(-50%)
      translateX(0)
      scale(1.08);
  }

  50% {
    transform:
      translateY(-50%)
      translateX(6px)
      scale(1.12);
  }

}


/* =========================================================
   MODEL INFORMATION
========================================================= */

.premium-carousel-info {
  max-width: 620px;

  margin:
    20px
    auto
    0;

  text-align: center;
}


.premium-carousel-info > span {
  display: inline-block;

  margin-bottom: 8px;

  color:
    var(--gold);

  font-size: 0.9rem;

  font-weight: 700;
}


.premium-carousel-info h3 {
  margin-bottom: 8px;

  font-size: 2rem;
}


.premium-carousel-info p {
  max-width: 580px;

  margin:
    0 auto;

  line-height: 1.7;

  opacity: 0.8;
}


/* =========================================================
   PRICE
========================================================= */

.model-mini-info {
  margin-top: 18px;
}


.model-mini-info strong {
  display: block;

  margin-bottom: 12px;

  color:
    var(--gold);

  font-size: 1.1rem;
}


/* =========================================================
   ACTIONS
========================================================= */

.carousel-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 34px;
}


.carousel-actions
.btn-primary,
.carousel-actions
.btn-secondary {
  min-width: 220px;

  min-height: 52px;

  -webkit-tap-highlight-color:
    transparent;

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


/* =========================================================
   PREVIEW BUTTON
========================================================= */

.carousel-actions
.model-preview-btn {
  border:
    1px solid
    rgba(
      212,
      180,
      131,
      0.42
    );

  background:
    rgba(
      255,
      255,
      255,
      0.46
    );

  color:
    var(--dark);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 10px 28px
    rgba(
      0,
      0,
      0,
      0.06
    );
}


.carousel-actions
.model-preview-btn:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(
      212,
      180,
      131,
      0.7
    );

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );

  box-shadow:
    0 14px 34px
    rgba(
      0,
      0,
      0,
      0.09
    );
}


.model-preview-btn[hidden] {
  display:
    none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

  .premium-carousel {
    min-height: 540px;

    padding:
      50px
      0;
  }


  .premium-carousel-stage {
    width:
      min(
        680px,
        100%
      );

    height: 500px;
  }


  .premium-card {
    width: 215px;

    height: 450px;
  }


  /*
    También en tablet mantenemos
    la tarjeta principal completamente plana.
  */

  .premium-card.is-active {
    transform:
      translate(
        -50%,
        -50%
      );
  }


  .premium-card.is-left {
    transform:
      translate(
        -50%,
        -50%
      )
      translateX(-175px)
      rotateY(18deg)
      scale(0.78);
  }


  .premium-card.is-right {
    transform:
      translate(
        -50%,
        -50%
      )
      translateX(175px)
      rotateY(-18deg)
      scale(0.78);
  }


  .premium-card.is-far-left,
  .premium-card.is-far-right {
    opacity: 0;

    pointer-events: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  /* =======================================================
     CATEGORY TABS
  ======================================================== */

  .category-tabs {
    justify-content:
      flex-start;

    flex-wrap:
      nowrap;

    overflow-x:
      auto;

    gap:
      10px;

    margin:
      32px
      -16px
      44px;

    padding:
      0
      16px
      10px;

    scroll-snap-type:
      x proximity;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }


  .category-tabs::-webkit-scrollbar {
    display:
      none;
  }


  .category-tab {
    flex:
      0 0 auto;

    padding:
      10px
      18px;

    font-size:
      0.85rem;

    scroll-snap-align:
      start;
  }


  /* =======================================================
     CAROUSEL
  ======================================================== */

  .premium-carousel {
    min-height:
      540px;

    padding:
      42px
      0;
  }


  .premium-carousel-stage {
    width:
      100%;

    height:
      460px;
  }


  /* =======================================================
     PHONE
  ======================================================== */

  .premium-card {
    width:
      215px;

    height:
      450px;
  }


  /*
    Igual que en escritorio:
    sin translateZ y sin scale.
  */

  .premium-card.is-active {
    transform:
      translate(
        -50%,
        -50%
      );
  }


  /* =======================================================
     SIDE CARDS
     Conservan profundidad 3D
  ======================================================== */

  .premium-card.is-left {
    opacity:
      0.3;

    transform:
      translate(
        -50%,
        -50%
      )
      translateX(-108px)
      rotateY(12deg)
      scale(0.66);
  }


  .premium-card.is-right {
    opacity:
      0.3;

    transform:
      translate(
        -50%,
        -50%
      )
      translateX(108px)
      rotateY(-12deg)
      scale(0.66);
  }


  /* =======================================================
     CONTROLS
  ======================================================== */

  .carousel-control {
    width:
      42px;

    height:
      42px;

    font-size:
      1.7rem;
  }


  .carousel-prev {
    left:
      0;
  }


  .carousel-next {
    right:
      0;
  }


  /* =======================================================
     MODEL INFO
  ======================================================== */

  .premium-carousel-info {
    padding:
      0
      8px;
  }


  .premium-carousel-info h3 {
    font-size:
      1.65rem;
  }


  .premium-carousel-info p {
    font-size:
      0.95rem;

    line-height:
      1.65;
  }


  /* =======================================================
     ACTIONS
  ======================================================== */

  .carousel-actions {
    flex-direction:
      column;

    width:
      100%;
  }


  .carousel-actions
  .btn-primary,
  .carousel-actions
  .btn-secondary {
    width:
      100%;

    min-width:
      0;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .premium-card,
  .premium-carousel-stage,
  .category-tab,
  .carousel-control,
  .carousel-actions
  .btn-primary,
  .carousel-actions
  .btn-secondary {
    transition:
      none;
  }


  .carousel-prev:hover,
  .carousel-next:hover {
    animation:
      none;
  }

}