/* =========================================================
   Mizunara Studio Design System
   Gift Table Component
   css/components/gift-table.css
   Version 1.1

   Glass Performance Pass
========================================================= */


/* =========================================================
   WRAPPER DEL BUILDER
========================================================= */

.ms-component[data-component="giftTable"] {
  display: block;

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
}


.ms-component[data-component="giftTable"] > .ms-gift-table {
  width: 100%;
}


/* =========================================================
   VARIABLES
========================================================= */

.ms-component[data-component="giftTable"] {
  --gift-primary:
    var(
      --ms-color-primary,
      #c8a46b
    );

  --gift-primary-dark:
    var(
      --ms-color-primary-dark,
      #8f6d35
    );

  --gift-text:
    var(
      --ms-color-text,
      #342b25
    );

  --gift-muted:
    var(
      --ms-color-muted,
      rgba(52, 43, 37, 0.68)
    );

  --gift-surface:
    rgba(255, 255, 255, 0.64);

  --gift-surface-strong:
    rgba(255, 255, 255, 0.8);

  --gift-border:
    rgba(255, 255, 255, 0.56);

  --gift-gold-border:
    rgba(200, 164, 107, 0.28);

  --gift-shadow:
    0 30px 90px
      rgba(48, 36, 28, 0.13),
    0 10px 30px
      rgba(48, 36, 28, 0.07);

  --gift-radius:
    var(
      --ms-radius-xl,
      30px
    );

  --gift-transition:
    300ms ease;
}


/* =========================================================
   SECCIÓN
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table {
  position: relative;

  isolation: isolate;

  width: 100%;

  padding:
    var(
      --ms-section-padding,
      clamp(5rem, 10vw, 8rem)
    )
    0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(200, 164, 107, 0.1),
      transparent 31%
    ),
    radial-gradient(
      circle at 94% 85%,
      rgba(220, 191, 170, 0.15),
      transparent 35%
    );
}


/* =========================================================
   ORBES DECORATIVOS

   Sin filter: blur().
   El radial-gradient genera la suavidad.
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-orb {
  position: absolute;

  z-index: -1;

  border-radius: 50%;

  pointer-events: none;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-orb--left {
  top: 8%;

  left: -165px;

  width: 370px;

  height: 370px;

  background:
    radial-gradient(
      circle,
      rgba(200, 164, 107, 0.14) 0%,
      rgba(200, 164, 107, 0.065) 38%,
      rgba(200, 164, 107, 0.02) 58%,
      transparent 74%
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-orb--right {
  right: -190px;

  bottom: 4%;

  width: 430px;

  height: 430px;

  background:
    radial-gradient(
      circle,
      rgba(219, 188, 167, 0.17) 0%,
      rgba(219, 188, 167, 0.075) 40%,
      rgba(219, 188, 167, 0.02) 60%,
      transparent 74%
    );
}


/* =========================================================
   CONTENEDOR
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table
.ms-container {
  position: relative;

  z-index: 1;

  width:
    min(
      92%,
      1120px
    );

  margin-inline:
    auto;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-header {
  width:
    min(
      100%,
      780px
    );

  margin:
    0
    auto
    clamp(
      3rem,
      7vw,
      5rem
    );

  text-align:
    center;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-header
.ms-section-kicker {
  display:
    inline-block;

  margin-bottom:
    1rem;

  color:
    var(--gift-primary-dark);

  font-size:
    0.72rem;

  font-weight:
    700;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-header
.ms-section-title {
  margin:
    0
    0
    1.25rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      2.3rem,
      6vw,
      4rem
    );

  font-weight:
    500;

  line-height:
    1.08;

  text-wrap:
    balance;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-header
.ms-section-description {
  max-width:
    700px;

  margin-inline:
    auto;

  color:
    var(--gift-muted);

  font-size:
    clamp(
      0.95rem,
      1.7vw,
      1.06rem
    );

  line-height:
    1.85;

  text-wrap:
    balance;
}


/* =========================================================
   INTRODUCCIÓN
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-intro {
  position: relative;

  isolation: isolate;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    clamp(
      1.4rem,
      4vw,
      2.3rem
    );

  width:
    min(
      100%,
      860px
    );

  margin-inline:
    auto;

  padding:
    clamp(
      1.8rem,
      5vw,
      3rem
    );

  overflow: hidden;

  border:
    1px solid
    var(--gift-border);

  border-radius:
    var(--gift-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.5)
    );

  box-shadow:
    var(--gift-shadow),
    inset 0 1px 0
      rgba(255, 255, 255, 0.72);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  opacity:
    0;

  transform:
    translateY(30px)
    scale(0.988);

  transition:
    opacity
      0.85s
      var(
        --ms-ease-luxury,
        ease
      ),
    transform
      0.9s
      var(
        --ms-ease-luxury,
        ease
      ),
    border-color
      var(--gift-transition),
    box-shadow
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-visible
.ms-gift-table-intro {
  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro:hover {
  border-color:
    rgba(
      200,
      164,
      107,
      0.36
    );

  box-shadow:
    0 36px 100px
      rgba(48, 36, 28, 0.16),
    0 13px 36px
      rgba(48, 36, 28, 0.08),
    inset 0 1px 0
      rgba(255, 255, 255, 0.76);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255, 255, 255, 0.54),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 75%
    );

  pointer-events:
    none;
}


/* =========================================================
   ICONO DE INTRODUCCIÓN
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-intro-icon {
  display: grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    96px;

  height:
    96px;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.34
    );

  border-radius:
    50%;

  color:
    var(--gift-primary-dark);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.82),
      rgba(200, 164, 107, 0.08)
    );

  box-shadow:
    0 18px 42px
      rgba(48, 36, 28, 0.1),
    0 0 0 9px
      rgba(200, 164, 107, 0.055);

  transition:
    transform
    var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro:hover
.ms-gift-table-intro-icon {
  transform:
    translateY(-3px)
    rotate(-3deg);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-icon svg {
  display:
    block;

  width:
    50px;

  height:
    50px;
}


/* =========================================================
   CONTENIDO DE INTRODUCCIÓN
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-intro-content {
  min-width:
    0;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-title {
  margin:
    0
    0
    0.8rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  font-weight:
    500;

  line-height:
    1.15;

  text-wrap:
    balance;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-title[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-text {
  margin:
    0;

  color:
    var(--gift-muted);

  font-size:
    clamp(
      0.94rem,
      1.6vw,
      1.02rem
    );

  line-height:
    1.8;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-text[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-note {
  margin:
    1rem
    0
    0;

  color:
    var(--gift-primary-dark);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      0.95rem,
      1.8vw,
      1.08rem
    );

  font-style:
    italic;

  line-height:
    1.65;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-intro-note[hidden] {
  display:
    none !important;
}


/* =========================================================
   GRUPOS
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-registries {
  width:
    100%;

  margin-top:
    clamp(
      3.5rem,
      8vw,
      5.5rem
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-registries[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-group-title {
  margin:
    0
    0
    2rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  font-weight:
    500;

  line-height:
    1.2;

  text-align:
    center;
}


/* =========================================================
   GRID DE MESAS
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 300px),
        1fr
      )
    );

  gap:
    clamp(
      1.3rem,
      3vw,
      2rem
    );

  width:
    100%;
}


/* =========================================================
   TARJETA DE MESA
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-card {
  position: relative;

  isolation: isolate;

  display: flex;

  flex-direction:
    column;

  min-width: 0;

  min-height: 100%;

  padding:
    clamp(
      1.6rem,
      4vw,
      2.4rem
    );

  overflow: hidden;

  border:
    1px solid
    var(--gift-border);

  border-radius:
    var(--gift-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.48)
    );

  box-shadow:
    0 24px 70px
      rgba(48, 36, 28, 0.11),
    0 8px 24px
      rgba(48, 36, 28, 0.06),
    inset 0 1px 0
      rgba(255, 255, 255, 0.7);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity
      0.65s ease,
    transform
      0.75s
      var(
        --ms-ease-luxury,
        ease
      ),
    border-color
      var(--gift-transition),
    box-shadow
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card.is-visible {
  opacity:
    1;

  transform:
    translateY(0);

  transition-delay:
    calc(
      var(--gift-table-item-index, 0) *
      100ms
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(
      200,
      164,
      107,
      0.38
    );

  box-shadow:
    0 32px 88px
      rgba(48, 36, 28, 0.16),
    0 12px 32px
      rgba(48, 36, 28, 0.08),
    inset 0 1px 0
      rgba(255, 255, 255, 0.74);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 14% 9%,
      rgba(255, 255, 255, 0.5),
      transparent 34%
    );

  pointer-events:
    none;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width:
    42%;

  height:
    1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 164, 107, 0.8),
      transparent
    );

  pointer-events:
    none;
}


/* =========================================================
   LOGOTIPO DE TIENDA
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-card-logo {
  display: grid;

  place-items:
    center;

  width:
    100%;

  height:
    96px;

  margin-bottom:
    1.5rem;

  padding:
    1rem;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.16
    );

  border-radius:
    var(
      --ms-radius-lg,
      18px
    );

  background:
    rgba(
      255,
      255,
      255,
      0.52
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-logo[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-logo img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  opacity:
    0;

  transform:
    scale(0.96);

  transition:
    opacity
      0.5s ease,
    transform
      0.6s ease;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-logo.is-loaded
img {
  opacity:
    1;

  transform:
    scale(1);
}


/* =========================================================
   CONTENIDO DE TARJETA
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-card-content {
  flex:
    1;

  min-width:
    0;

  text-align:
    center;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-label {
  display:
    inline-flex;

  margin-bottom:
    0.8rem;

  padding:
    0.4rem
    0.85rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    var(
      --ms-radius-full,
      999px
    );

  color:
    var(--gift-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-label[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-title {
  margin:
    0
    0
    0.85rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      1.65rem,
      3vw,
      2.25rem
    );

  font-weight:
    500;

  line-height:
    1.15;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-description {
  margin:
    0;

  color:
    var(--gift-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-description[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-number {
  width:
    fit-content;

  margin:
    1.2rem
    auto
    0;

  padding:
    0.65rem
    1rem;

  border:
    1px dashed
    rgba(
      200,
      164,
      107,
      0.38
    );

  border-radius:
    var(
      --ms-radius-md,
      14px
    );

  color:
    var(--gift-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.07
    );

  font-size:
    0.82rem;

  font-weight:
    650;

  letter-spacing:
    0.04em;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-number[hidden] {
  display:
    none !important;
}


/* =========================================================
   BOTÓN DE MESA
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-card-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.6rem;

  width:
    100%;

  margin-top:
    1.7rem;

  padding:
    0.85rem
    1.25rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.3
    );

  border-radius:
    var(
      --ms-radius-full,
      999px
    );

  color:
    var(--gift-primary-dark);

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

  box-shadow:
    0 10px 26px
      rgba(48, 36, 28, 0.07);

  font-family:
    inherit;

  font-size:
    0.85rem;

  font-weight:
    650;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    color
      var(--gift-transition),
    background-color
      var(--gift-transition),
    border-color
      var(--gift-transition),
    transform
      var(--gift-transition),
    box-shadow
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-button:hover {
  color:
    #fff;

  background:
    var(--gift-primary);

  border-color:
    var(--gift-primary);

  transform:
    translateY(-3px);

  box-shadow:
    0 15px 32px
    rgba(
      200,
      164,
      107,
      0.28
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-card-button svg {
  display:
    block;

  width:
    18px;

  height:
    18px;

  flex:
    0 0 auto;
}


/* =========================================================
   TRANSFERENCIA BANCARIA
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-transfer {
  position: relative;

  isolation: isolate;

  width:
    min(
      100%,
      860px
    );

  margin:
    clamp(
      3.5rem,
      8vw,
      5.5rem
    )
    auto
    0;

  padding:
    clamp(
      1.8rem,
      5vw,
      3.2rem
    );

  overflow:
    hidden;

  border:
    1px solid
    var(--gift-border);

  border-radius:
    var(--gift-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.5)
    );

  box-shadow:
    var(--gift-shadow),
    inset 0 1px 0
      rgba(255, 255, 255, 0.72);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  opacity:
    0;

  transform:
    translateY(32px);

  transition:
    opacity
      0.8s ease,
    transform
      0.9s
      var(
        --ms-ease-luxury,
        ease
      ),
    border-color
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-visible
.ms-gift-table-transfer {
  opacity:
    1;

  transform:
    translateY(0);

  transition-delay:
    160ms;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer:hover {
  border-color:
    rgba(
      200,
      164,
      107,
      0.38
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 8% 7%,
      rgba(255, 255, 255, 0.52),
      transparent 35%
    );

  pointer-events:
    none;
}


/* =========================================================
   CABECERA DE TRANSFERENCIA
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-header {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    clamp(
      1.2rem,
      3vw,
      1.8rem
    );

  margin-bottom:
    2rem;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-icon {
  display: grid;

  place-items:
    center;

  width:
    78px;

  height:
    78px;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.32
    );

  border-radius:
    50%;

  color:
    var(--gift-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

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


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-icon svg {
  display:
    block;

  width:
    42px;

  height:
    42px;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-label {
  display:
    inline-block;

  margin-bottom:
    0.55rem;

  color:
    var(--gift-primary-dark);

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-label[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-title {
  margin:
    0
    0
    0.6rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );

  font-weight:
    500;

  line-height:
    1.15;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-description {
  margin:
    0;

  color:
    var(--gift-muted);

  font-size:
    0.92rem;

  line-height:
    1.7;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-description[hidden] {
  display:
    none !important;
}


/* =========================================================
   DATOS BANCARIOS
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-bank-details {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    0.9rem;

  margin:
    0
    0
    1.8rem;

  padding:
    0;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-details[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-row {
  display: flex;

  flex-direction:
    column;

  min-width:
    0;

  padding:
    1rem
    1.1rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.18
    );

  border-radius:
    var(
      --ms-radius-lg,
      18px
    );

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

  opacity:
    0;

  transform:
    translateY(16px);

  transition:
    opacity
      0.5s ease,
    transform
      0.6s ease,
    border-color
      var(--gift-transition),
    background-color
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-row.is-visible {
  opacity:
    1;

  transform:
    translateY(0);

  transition-delay:
    calc(
      var(--gift-table-bank-index, 0) *
      80ms
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-row:hover {
  border-color:
    rgba(
      200,
      164,
      107,
      0.32
    );

  background:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-label {
  margin-bottom:
    0.35rem;

  color:
    var(--gift-primary-dark);

  font-size:
    0.67rem;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-bank-value {
  margin:
    0;

  overflow-wrap:
    anywhere;

  color:
    var(--gift-text);

  font-size:
    0.92rem;

  font-weight:
    600;

  line-height:
    1.55;
}


/* =========================================================
   ACCIONES DE TRANSFERENCIA
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-transfer-actions {
  display: flex;

  justify-content:
    center;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.65rem;

  min-width:
    190px;

  padding:
    0.9rem
    1.5rem;

  border:
    1px solid
    var(--gift-primary);

  border-radius:
    var(
      --ms-radius-full,
      999px
    );

  color:
    #fff;

  background:
    var(--gift-primary);

  box-shadow:
    0 13px 32px
    rgba(
      200,
      164,
      107,
      0.28
    );

  font-family:
    inherit;

  font-size:
    0.86rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform
      var(--gift-transition),
    background-color
      var(--gift-transition),
    box-shadow
      var(--gift-transition),
    opacity
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button:hover {
  transform:
    translateY(-3px);

  background:
    var(--gift-primary-dark);

  box-shadow:
    0 17px 38px
    rgba(
      143,
      109,
      53,
      0.3
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button:active {
  transform:
    translateY(0)
    scale(0.97);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button:disabled {
  opacity:
    0.65;

  cursor:
    wait;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button.is-copied {
  background:
    #55745d;

  border-color:
    #55745d;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-button svg {
  display:
    block;

  width:
    19px;

  height:
    19px;

  flex:
    0 0 auto;
}


/* =========================================================
   MENSAJE DE COPIADO
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-copy-feedback {
  width:
    fit-content;

  margin:
    1rem
    auto
    0;

  padding:
    0.75rem
    1rem;

  border-radius:
    var(
      --ms-radius-md,
      14px
    );

  font-size:
    0.82rem;

  font-weight:
    600;

  line-height:
    1.5;

  text-align:
    center;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-feedback[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-feedback.is-success {
  border:
    1px solid
    rgba(
      85,
      116,
      93,
      0.25
    );

  color:
    #55745d;

  background:
    rgba(
      85,
      116,
      93,
      0.09
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-copy-feedback.is-error {
  border:
    1px solid
    rgba(
      163,
      75,
      75,
      0.25
    );

  color:
    #a34b4b;

  background:
    rgba(
      163,
      75,
      75,
      0.08
    );
}


/* =========================================================
   LLUVIA DE SOBRES
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-envelope {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    clamp(
      1.2rem,
      3vw,
      1.8rem
    );

  width:
    min(
      100%,
      760px
    );

  margin:
    clamp(
      2rem,
      5vw,
      3rem
    )
    auto
    0;

  padding:
    clamp(
      1.5rem,
      4vw,
      2.2rem
    );

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    var(--gift-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(255, 255, 255, 0.46)
    );

  box-shadow:
    0 22px 64px
      rgba(48, 36, 28, 0.1),
    inset 0 1px 0
      rgba(255, 255, 255, 0.68);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  opacity:
    0;

  transform:
    translateY(22px);

  transition:
    opacity
      0.65s ease,
    transform
      0.75s ease,
    border-color
      var(--gift-transition);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope.is-visible,

.ms-component[data-component="giftTable"]
.ms-gift-table-visible
.ms-gift-table-envelope {
  opacity:
    1;

  transform:
    translateY(0);
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope:hover {
  border-color:
    rgba(
      200,
      164,
      107,
      0.38
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope-icon {
  display: grid;

  place-items:
    center;

  width:
    72px;

  height:
    72px;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.3
    );

  border-radius:
    50%;

  color:
    var(--gift-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

  pointer-events:
    none;

  cursor:
    default;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope-icon svg {
  display:
    block;

  width:
    40px;

  height:
    40px;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope-title {
  margin:
    0
    0
    0.55rem;

  color:
    var(--gift-text);

  font-family:
    var(
      --ms-font-title,
      "Playfair Display",
      serif
    );

  font-size:
    clamp(
      1.5rem,
      3vw,
      2rem
    );

  font-weight:
    500;

  line-height:
    1.2;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-envelope-text {
  margin:
    0;

  color:
    var(--gift-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   VARIANTE PREMIUM

   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table--premium
.ms-gift-table-intro,

.ms-component[data-component="giftTable"]
.ms-gift-table--premium
.ms-gift-table-card,

.ms-component[data-component="giftTable"]
.ms-gift-table--premium
.ms-gift-table-transfer {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.5)
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   VARIANTE GLASS

   Simulación visual de vidrio,
   sin blur real.
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table--glass
.ms-gift-table-intro,

.ms-component[data-component="giftTable"]
.ms-gift-table--glass
.ms-gift-table-card,

.ms-component[data-component="giftTable"]
.ms-gift-table--glass
.ms-gift-table-transfer,

.ms-component[data-component="giftTable"]
.ms-gift-table--glass
.ms-gift-table-envelope {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.4)
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  box-shadow:
    0 28px 82px
      rgba(48, 36, 28, 0.12),
    0 8px 26px
      rgba(48, 36, 28, 0.06),
    inset 0 1px 0
      rgba(255, 255, 255, 0.74);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   VARIANTE MINIMAL
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table--minimal
.ms-gift-table-intro,

.ms-component[data-component="giftTable"]
.ms-gift-table--minimal
.ms-gift-table-card,

.ms-component[data-component="giftTable"]
.ms-gift-table--minimal
.ms-gift-table-transfer,

.ms-component[data-component="giftTable"]
.ms-gift-table--minimal
.ms-gift-table-envelope {
  border-color:
    rgba(
      200,
      164,
      107,
      0.18
    );

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

  box-shadow:
    0 20px 56px
      rgba(48, 36, 28, 0.08),
    inset 0 1px 0
      rgba(255, 255, 255, 0.56);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


/* =========================================================
   ESTADO GENERAL
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table-status {
  width:
    min(
      90%,
      720px
    );

  margin:
    2rem
    auto
    0;

  padding:
    1rem
    1.2rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    var(
      --ms-radius-lg,
      18px
    );

  color:
    var(--gift-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

  font-size:
    0.86rem;

  font-weight:
    550;

  line-height:
    1.55;

  text-align:
    center;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-status[hidden] {
  display:
    none !important;
}


.ms-component[data-component="giftTable"]
.ms-gift-table-status.is-error {
  border-color:
    rgba(
      163,
      75,
      75,
      0.25
    );

  color:
    #a34b4b;

  background:
    rgba(
      163,
      75,
      75,
      0.08
    );
}


.ms-component[data-component="giftTable"]
.ms-gift-table-status.is-success {
  border-color:
    rgba(
      85,
      116,
      93,
      0.25
    );

  color:
    #55745d;

  background:
    rgba(
      85,
      116,
      93,
      0.09
    );
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

  .ms-component[data-component="giftTable"]
  .ms-gift-table {
    padding:
      clamp(
        4.5rem,
        9vw,
        6rem
      )
      0;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table
  .ms-container {
    width:
      94%;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-bank-details {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 700px) {

  .ms-component[data-component="giftTable"]
  .ms-gift-table {
    padding:
      4.5rem
      0;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table
  .ms-container {
    width:
      90%;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-header {
    margin-bottom:
      2.8rem;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro {
    grid-template-columns:
      1fr;

    padding:
      2rem
      1.3rem;

    border-radius:
      1.6rem;

    text-align:
      center;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro-icon {
    width:
      80px;

    height:
      80px;

    margin-inline:
      auto;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro-icon svg {
    width:
      43px;

    height:
      43px;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-grid {
    grid-template-columns:
      1fr;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-card {
    padding:
      1.8rem
      1.3rem;

    border-radius:
      1.6rem;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer {
    padding:
      2rem
      1.3rem;

    border-radius:
      1.6rem;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer-header {
    grid-template-columns:
      1fr;

    text-align:
      center;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer-icon {
    width:
      72px;

    height:
      72px;

    margin-inline:
      auto;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-bank-details {
    grid-template-columns:
      1fr;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-copy-button {
    width:
      100%;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-envelope {
    grid-template-columns:
      1fr;

    padding:
      1.7rem
      1.3rem;

    border-radius:
      1.6rem;

    text-align:
      center;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-envelope-icon {
    margin-inline:
      auto;
  }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 380px) {

  .ms-component[data-component="giftTable"]
  .ms-gift-table
  .ms-container {
    width:
      92%;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-card,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-envelope {
    padding:
      1.6rem
      1rem;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-card-button {
    padding:
      0.8rem
      1rem;

    font-size:
      0.8rem;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-bank-row {
    padding:
      0.9rem
      0.85rem;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-card,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-bank-row,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-envelope,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro-icon,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-card-button,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-copy-button {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }


  .ms-component[data-component="giftTable"]
  .ms-gift-table-intro,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-card,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-transfer,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-bank-row,

  .ms-component[data-component="giftTable"]
  .ms-gift-table-envelope {
    opacity:
      1;
  }

}


/* =========================================================
   BODA LUXURY 01
   AJUSTE DE TRANSICIÓN DESDE DRESS CODE
========================================================= */

.ms-component[data-component="giftTable"]
.ms-gift-table {
  padding-top:
    clamp(
      3rem,
      5vw,
      4.5rem
    );
}


@media (max-width: 700px) {

  .ms-component[data-component="giftTable"]
  .ms-gift-table {
    padding-top:
      3rem;
  }

}