/* =========================================================
   Mizunara Studio Design System
   Map Component
   css/components/map.css
   Version 2.1

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


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

   El Builder genera:
   .ms-component.ms-map

   Dentro se carga:
   section.ms-map

   Este bloque evita aplicar doble padding o altura.
========================================================= */

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

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
}


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


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

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

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

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

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

  --map-surface:
    rgba(255, 255, 255, 0.58);

  --map-surface-strong:
    rgba(255, 255, 255, 0.78);

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

  --map-shadow:
    0 32px 90px
      rgba(48, 36, 28, 0.14),
    0 10px 30px
      rgba(48, 36, 28, 0.06);

  --map-radius:
    var(
      --ms-radius-xl,
      28px
    );
}


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

.ms-component[data-component="map"]
.ms-map {
  position: relative;

  isolation: isolate;

  width: 100%;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 14%,
      rgba(200, 164, 107, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 84%,
      rgba(221, 193, 168, 0.13),
      transparent 34%
    );
}


/* =========================================================
   DECORACIONES AMBIENTALES

   Ya no usamos filter: blur().
   El propio radial-gradient crea
   suficiente suavidad visual.
========================================================= */

.ms-component[data-component="map"]
.ms-map::before {
  content: "";

  position: absolute;

  top: 8%;
  left: -120px;

  z-index: -1;

  width: 310px;
  height: 310px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(200, 164, 107, 0.1) 0%,
      rgba(200, 164, 107, 0.045) 42%,
      transparent 72%
    );

  pointer-events: none;
}


.ms-component[data-component="map"]
.ms-map::after {
  content: "";

  position: absolute;

  right: -140px;
  bottom: 5%;

  z-index: -1;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(220, 190, 171, 0.13) 0%,
      rgba(220, 190, 171, 0.05) 44%,
      transparent 72%
    );

  pointer-events: none;
}


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

.ms-component[data-component="map"]
.ms-map-header {
  width:
    min(
      92%,
      760px
    );

  margin:
    0
    auto
    var(
      --ms-space-2xl,
      3.5rem
    );

  text-align:
    center;
}


.ms-component[data-component="map"]
.ms-map-header
.ms-section-description {
  max-width: 680px;

  margin-inline: auto;

  color:
    var(--map-muted);

  line-height: 1.8;

  text-wrap: balance;
}


/* =========================================================
   LISTA DE UBICACIONES
========================================================= */

.ms-component[data-component="map"]
.ms-map-list {
  display: grid;

  width:
    min(
      92%,
      1180px
    );

  margin-inline: auto;

  gap:
    clamp(
      1.5rem,
      4vw,
      2.5rem
    );

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


.ms-component[data-component="map"]
.ms-map-list[hidden] {
  display:
    none !important;
}


.ms-component[data-component="map"]
.ms-map-list.is-single {
  grid-template-columns:
    1fr;

  max-width:
    920px;
}


.ms-component[data-component="map"]
.ms-map-list.is-multiple {
  align-items:
    stretch;
}


/* =========================================================
   TARJETA
   LIGHT GLASS

   IMPORTANTE:
   Ya NO utiliza backdrop-filter.

   Las tarjetas de Map son superficies grandes y
   además pueden contener iframes. Mantener blur
   sobre ellas genera un costo gráfico innecesario.
========================================================= */

.ms-component[data-component="map"]
.ms-map-card {
  position: relative;

  isolation: isolate;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

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

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

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

  box-shadow:
    var(--map-shadow),
    inset 0 1px 0
      rgba(255, 255, 255, 0.68);

  opacity: 0;

  transform:
    translateY(26px)
    scale(0.985);

  transition:
    opacity
      0.8s ease,
    transform
      0.9s
      var(
        --ms-ease-luxury,
        ease
      ),
    box-shadow
      280ms ease;
}


.ms-component[data-component="map"]
.ms-map-visible
.ms-map-card {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  transition-delay:
    calc(
      var(--map-card-index, 0) *
      120ms
    );
}


.ms-component[data-component="map"]
.ms-map-card:hover {
  box-shadow:
    0 38px 100px
      rgba(48, 36, 28, 0.17),
    0 12px 34px
      rgba(48, 36, 28, 0.08),
    inset 0 1px 0
      rgba(255, 255, 255, 0.72);
}


/* =========================================================
   BRILLO INTERIOR
========================================================= */

.ms-component[data-component="map"]
.ms-map-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(255, 255, 255, 0.46),
      transparent 34%
    ),
    linear-gradient(
      125deg,
      transparent 18%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 76%
    );

  pointer-events:
    none;
}


/* =========================================================
   LÍNEA DORADA INFERIOR
========================================================= */

.ms-component[data-component="map"]
.ms-map-card::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 40%;
  height: 1px;

  transform:
    translateX(-50%);

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

  pointer-events:
    none;
}


/* =========================================================
   MAPA EMBEBIDO
========================================================= */

.ms-component[data-component="map"]
.ms-map-frame {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(238, 229, 217, 0.92),
      rgba(220, 206, 190, 0.88)
    );
}


.ms-component[data-component="map"]
.ms-map-frame[hidden] {
  display:
    none !important;
}


.ms-component[data-component="map"]
.ms-map-frame::after {
  content: "";

  position: absolute;

  inset: 0;

  box-shadow:
    inset
    0
    -30px
    40px
    rgba(45, 36, 29, 0.08);

  pointer-events:
    none;
}


.ms-component[data-component="map"]
.ms-map-frame iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  filter:
    saturate(0.85)
    contrast(0.96);

  transition:
    filter
      300ms ease,
    transform
      500ms ease;
}


.ms-component[data-component="map"]
.ms-map-card:hover
.ms-map-frame iframe {
  filter:
    saturate(1)
    contrast(1);

  transform:
    scale(1.015);
}


/* =========================================================
   CONTENIDO
========================================================= */

.ms-component[data-component="map"]
.ms-map-content {
  display: flex;

  flex: 1;

  flex-direction:
    column;

  align-items:
    center;

  width: 100%;

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

  text-align:
    center;
}


/* =========================================================
   TIPO DE UBICACIÓN
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="map"]
.ms-map-type {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    0.85rem;

  padding:
    0.42rem
    0.9rem;

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

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

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

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

  box-shadow:
    0 6px 18px
      rgba(49, 37, 29, 0.045),
    inset 0 1px 0
      rgba(255, 255, 255, 0.62);

  font-size:
    0.68rem;

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.ms-component[data-component="map"]
.ms-map-type[hidden] {
  display:
    none !important;
}


/* =========================================================
   NOMBRE DEL LUGAR
========================================================= */

.ms-component[data-component="map"]
.ms-map-content h3 {
  margin:
    0
    0
    0.75rem;

  color:
    var(--map-text);

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

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

  font-weight:
    500;

  line-height:
    1.1;

  text-wrap:
    balance;
}


/* =========================================================
   DIRECCIÓN
========================================================= */

.ms-component[data-component="map"]
.ms-map-address {
  max-width:
    600px;

  margin:
    0
    auto
    0.8rem;

  color:
    var(--map-muted);

  font-size:
    clamp(
      0.92rem,
      1.5vw,
      1rem
    );

  line-height:
    1.75;

  text-wrap:
    balance;
}


.ms-component[data-component="map"]
.ms-map-address[hidden] {
  display:
    none !important;
}


/* =========================================================
   HORARIO
========================================================= */

.ms-component[data-component="map"]
.ms-map-schedule {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0
    auto
    0.9rem;

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

  font-size:
    0.78rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.ms-component[data-component="map"]
.ms-map-schedule::before,

.ms-component[data-component="map"]
.ms-map-schedule::after {
  content: "";

  width: 30px;
  height: 1px;

  margin-inline:
    0.7rem;

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


.ms-component[data-component="map"]
.ms-map-schedule::after {
  transform:
    scaleX(-1);
}


.ms-component[data-component="map"]
.ms-map-schedule[hidden] {
  display:
    none !important;
}


/* =========================================================
   NOTA
========================================================= */

.ms-component[data-component="map"]
.ms-map-note {
  display:
    inline-block;

  max-width:
    620px;

  margin:
    1rem
    auto
    1.8rem;

  padding:
    0.85rem
    1.2rem;

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

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

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

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

  font-size:
    0.86rem;

  font-weight:
    500;

  line-height:
    1.6;

  text-wrap:
    balance;
}


.ms-component[data-component="map"]
.ms-map-note[hidden] {
  display:
    none !important;
}


/* =========================================================
   ESTACIONAMIENTO
========================================================= */

.ms-component[data-component="map"]
.ms-map-parking {
  display: flex;

  align-items:
    flex-start;

  width:
    min(
      100%,
      560px
    );

  gap:
    1rem;

  margin:
    0
    auto
    1.8rem;

  padding:
    1rem
    1.1rem;

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

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

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

  text-align:
    left;
}


.ms-component[data-component="map"]
.ms-map-parking[hidden] {
  display:
    none !important;
}


.ms-component[data-component="map"]
.ms-map-parking-icon {
  display: grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width: 42px;
  height: 42px;

  border-radius:
    50%;

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

  background:
    rgba(
      200,
      164,
      107,
      0.11
    );
}


.ms-component[data-component="map"]
.ms-map-parking-icon svg {
  width: 21px;
  height: 21px;
}


.ms-component[data-component="map"]
.ms-map-parking-content {
  min-width:
    0;
}


.ms-component[data-component="map"]
.ms-map-parking-content h4 {
  margin:
    0
    0
    0.25rem;

  color:
    var(--map-text);

  font-size:
    0.85rem;

  font-weight:
    700;
}


.ms-component[data-component="map"]
.ms-map-parking-content p {
  margin: 0;

  color:
    var(--map-muted);

  font-size:
    0.8rem;

  line-height:
    1.55;
}


.ms-component[data-component="map"]
.ms-map-parking-price {
  display:
    inline-block;

  margin-top:
    0.45rem;

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

  font-size:
    0.76rem;

  font-weight:
    650;
}


.ms-component[data-component="map"]
.ms-map-parking-price[hidden] {
  display:
    none !important;
}


/* =========================================================
   BOTONES
========================================================= */

.ms-component[data-component="map"]
.ms-map-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content:
    center;

  width: 100%;

  gap:
    var(
      --ms-space-md,
      1rem
    );

  margin-top:
    auto;
}


.ms-component[data-component="map"]
.ms-map-actions[hidden] {
  display:
    none !important;
}


.ms-component[data-component="map"]
.ms-map-actions
.ms-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    190px;

  min-height:
    52px;

  gap:
    0.65rem;

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

  font-size:
    0.73rem;

  font-weight:
    650;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

  text-decoration:
    none;

  transition:
    transform
      220ms ease,
    box-shadow
      220ms ease,
    background-color
      220ms ease,
    border-color
      220ms ease;
}


.ms-component[data-component="map"]
.ms-map-actions
.ms-btn svg {
  width: 19px;
  height: 19px;

  flex:
    0 0 auto;
}


.ms-component[data-component="map"]
.ms-map-actions
.ms-btn:hover {
  transform:
    translateY(-2px);
}


.ms-component[data-component="map"]
.ms-map-actions
.ms-btn:active {
  transform:
    translateY(0)
    scale(0.97);
}


/* =========================================================
   WAZE / APPLE MAPS
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="map"]
.ms-map-actions
.ms-btn-glass {
  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.28
    );

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

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

  box-shadow:
    0 10px 28px
      rgba(
        49,
        37,
        29,
        0.07
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.58
      );
}


.ms-component[data-component="map"]
.ms-map-actions
.ms-btn-glass:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.78
    );
}


/* =========================================================
   FOCUS ACCESIBLE
========================================================= */

.ms-component[data-component="map"]
.ms-map-actions
.ms-btn:focus-visible {
  outline:
    none;

  box-shadow:
    0 0 0 4px
      rgba(
        200,
        164,
        107,
        0.18
      ),
    0 14px 34px
      rgba(
        143,
        109,
        53,
        0.2
      );
}


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

.ms-component[data-component="map"]
.ms-map-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,
      16px
    );

  color:
    var(--map-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="map"]
.ms-map-status[hidden] {
  display:
    none !important;
}


.ms-component[data-component="map"]
.ms-map-status.is-error {
  border-color:
    rgba(
      163,
      75,
      75,
      0.24
    );

  color:
    #a34b4b;

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


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

  color:
    #55745d;

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


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

@media (max-width: 900px) {

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


  .ms-component[data-component="map"]
  .ms-map-list {
    width:
      94%;
  }


  .ms-component[data-component="map"]
  .ms-map-content {
    padding:
      clamp(
        1.5rem,
        4vw,
        2rem
      );
  }

}


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

@media (max-width: 600px) {

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


  .ms-component[data-component="map"]
  .ms-map-header {
    width:
      90%;

    margin-bottom:
      2rem;
  }


  .ms-component[data-component="map"]
  .ms-map-list {
    width:
      92%;

    grid-template-columns:
      1fr;
  }


  .ms-component[data-component="map"]
  .ms-map-card {
    border-radius:
      1.5rem;
  }


  .ms-component[data-component="map"]
  .ms-map-frame {
    aspect-ratio:
      4 / 3;
  }


  .ms-component[data-component="map"]
  .ms-map-content {
    padding:
      1.35rem;
  }


  .ms-component[data-component="map"]
  .ms-map-note {
    border-radius:
      var(
        --ms-radius-lg,
        16px
      );
  }


  .ms-component[data-component="map"]
  .ms-map-parking {
    width:
      100%;
  }


  .ms-component[data-component="map"]
  .ms-map-actions {
    flex-direction:
      column;
  }


  .ms-component[data-component="map"]
  .ms-map-actions
  .ms-btn {
    width:
      100%;

    min-width:
      0;
  }

}


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

@media (max-width: 380px) {

  .ms-component[data-component="map"]
  .ms-map-list {
    width:
      94%;
  }


  .ms-component[data-component="map"]
  .ms-map-content {
    padding:
      1.1rem;
  }


  .ms-component[data-component="map"]
  .ms-map-parking {
    padding:
      0.9rem;
  }

}


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

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

  .ms-component[data-component="map"]
  .ms-map-card,

  .ms-component[data-component="map"]
  .ms-map-frame iframe,

  .ms-component[data-component="map"]
  .ms-map-actions
  .ms-btn {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }


  .ms-component[data-component="map"]
  .ms-map-card {
    opacity:
      1;
  }

}


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

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


@media (max-width: 600px) {

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

}