/* =========================================================
   Mizunara Studio
   Component / Configurator
   Version 1.3

   Desktop Sticky Summary
   Responsive Floating Quote Bar
========================================================= */


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

.configurator-section {
  text-align: center;
}


/* =========================================================
   INVITACIÓN BASE
========================================================= */

.base-invitation-card {
  width: min(900px, 100%);

  margin: 10px auto 60px;

  padding:
    clamp(
      26px,
      4vw,
      38px
    );

  border-radius: 30px;

  text-align: left;
}


/* =========================================================
   BASE HEADER
========================================================= */

.base-invitation-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 30px;
}


.base-invitation-label {
  display: block;

  margin-bottom: 7px;

  color: var(--gold);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.base-invitation-header h3 {
  margin: 0;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.2rem
    );
}


.base-invitation-price {
  flex-shrink: 0;

  color: var(--gold);

  font-size:
    clamp(
      1.1rem,
      2vw,
      1.35rem
    );

  white-space: nowrap;
}


/* =========================================================
   BASE DESCRIPTION
========================================================= */

.base-invitation-description {
  max-width: 720px;

  margin: 22px 0;

  line-height: 1.75;

  opacity: 0.82;
}


/* =========================================================
   BASE FEATURES
========================================================= */

.base-invitation-features {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.base-invitation-features span {
  padding: 9px 14px;

  border:
    1px solid
    rgba(
      212,
      180,
      131,
      0.25
    );

  border-radius: 999px;

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

  font-size: 0.82rem;

  font-weight: 600;

  line-height: 1.35;
}


/* =========================================================
   BASE NOTE
========================================================= */

.base-invitation-note {
  margin-top: 22px;

  color: var(--gold);

  font-size: 0.88rem;

  font-weight: 600;

  line-height: 1.6;
}


/* =========================================================
   CONFIGURATOR LAYOUT
========================================================= */

.configurator-layout {
  display: grid;

  grid-template-columns:
    1fr
    340px;

  align-items: start;

  gap: 32px;

  margin-top: 55px;
}


.configurator-options {
  min-width: 0;

  text-align: left;
}


/* =========================================================
   SELECTED MODEL
========================================================= */

.selected-model-card {
  margin-bottom: 32px;

  padding: 26px;

  border-radius: 28px;
}


.selected-model-card span {
  color: var(--gold);

  font-size: 0.9rem;

  font-weight: 700;
}


.selected-model-card h3 {
  margin: 8px 0;

  font-size: 1.8rem;
}


.selected-model-card a {
  color: var(--gold);

  font-weight: 600;
}


/* =========================================================
   FEATURE GROUPS
========================================================= */

.feature-group {
  margin-bottom: 36px;
}


.feature-group h3 {
  margin-bottom: 18px;

  font-size: 1.6rem;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.feature-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 14px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.feature-card {
  position: relative;

  min-width: 0;

  padding: 18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.28
    );

  border-radius: 22px;

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

  color: var(--dark);

  font-family: inherit;

  text-align: left;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

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


.feature-card:hover {
  transform: translateY(-4px);
}


.feature-card.active {
  border-color:
    rgba(
      212,
      180,
      131,
      0.48
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        216,
        180,
        254,
        0.55
      ),
      rgba(
        212,
        180,
        131,
        0.35
      )
    );

  box-shadow:
    0 18px 45px
    rgba(
      0,
      0,
      0,
      0.1
    );
}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-card > img {
  width: 24px;

  height: 24px;

  margin-bottom: 12px;
}


/* =========================================================
   FEATURE TITLE
========================================================= */

.feature-card > strong {
  display: block;

  margin-bottom: 6px;

  line-height: 1.35;
}


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

.feature-card-price {
  display: block;

  margin-top: 8px;

  color: var(--gold);

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.35;
}


/* =========================================================
   PACKAGE CARD
========================================================= */

.feature-card--package {
  grid-column: span 2;

  padding: 22px;
}


/* =========================================================
   PACKAGE DETAILS
========================================================= */

.feature-card-details {
  margin: 12px 0 14px;
}


.feature-card-description {
  margin-bottom: 12px;

  font-size: 0.82rem;

  line-height: 1.6;

  opacity: 0.75;
}


/* =========================================================
   PACKAGE INCLUDES
========================================================= */

.feature-card-includes {
  display: grid;

  gap: 7px;

  list-style: none;
}


.feature-card-includes li {
  position: relative;

  padding-left: 17px;

  font-size: 0.8rem;

  line-height: 1.45;
}


.feature-card-includes li::before {
  content: "✓";

  position: absolute;

  top: 0;

  left: 0;

  color: var(--gold);

  font-weight: 700;
}


/* =========================================================
   SUMMARY
   DESKTOP
========================================================= */

.configurator-summary {
  position: sticky;

  top: 115px;

  padding: 28px;

  border-radius: 30px;

  text-align: left;
}


.summary-label {
  color: var(--gold);

  font-size: 0.9rem;

  font-weight: 700;
}


.configurator-summary h3 {
  margin: 10px 0 22px;

  font-size: 1.7rem;
}


/* =========================================================
   SUMMARY LINE
========================================================= */

.summary-line {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding: 14px 0;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    );
}


/* =========================================================
   SELECTED FUNCTIONS
========================================================= */

.selected-functions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 20px 0;
}


.selected-functions span {
  padding: 7px 11px;

  border-radius: 999px;

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

  font-size: 0.8rem;
}


/* =========================================================
   TOTAL
========================================================= */

.summary-total {
  margin: 24px 0;

  padding: 22px;

  border-radius: 22px;

  background: white;
}


.summary-total span {
  display: block;

  margin-bottom: 6px;

  font-size: 0.85rem;

  opacity: 0.75;
}


.summary-total strong {
  color: var(--gold);

  font-size: 2rem;
}


/* =========================================================
   CTA
========================================================= */

.configurator-summary
.btn-primary {
  width: 100%;
}


/* =========================================================
   TABLET / RESPONSIVE SUMMARY
   <= 1000px

   El resumen deja de ocupar espacio dentro del layout
   y se convierte en una barra flotante inferior.

   La barra permanece oculta hasta que JS agrega:
   .is-floating-visible
========================================================= */

@media (max-width: 1000px) {

  .configurator-layout {
    grid-template-columns: 1fr;
  }


  .feature-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .feature-card--package {
    grid-column: 1 / -1;
  }


  /* =======================================================
     FLOATING QUOTE BAR
  ======================================================== */

  .configurator-summary {
    position: fixed;

    top: auto;

    right: auto;

    bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      );

    left: 50%;

    z-index: 9500;

    display: grid;

    grid-template-columns:
      minmax(140px, 1.2fr)
      auto
      auto
      minmax(150px, auto);

    align-items: center;

    gap: 14px;

    width:
      min(
        calc(100% - 32px),
        920px
      );

    padding:
      13px
      15px;

    border:
      1px solid
      rgba(
        255,
        255,
        255,
        0.72
      );

    border-radius:
      24px;

    background:
      linear-gradient(
        135deg,
        rgba(
          247,
          232,
          255,
          0.96
        ),
        rgba(
          246,
          231,
          211,
          0.96
        )
      );

    box-shadow:
      0 20px 55px
      rgba(
        72,
        54,
        74,
        0.2
      ),
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.8
      );

    text-align: left;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
      translate(
        -50%,
        calc(100% + 35px)
      );

    /*
      Evitamos agregar otra capa costosa de blur
      sobre toda la pantalla.
    */

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    transition:
      opacity 0.3s ease,
      transform 0.38s
      cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
      ),
      visibility 0.3s ease;
  }


  /* =======================================================
     FLOATING BAR VISIBLE
  ======================================================== */

  .configurator-summary.is-floating-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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


  /* =======================================================
     LABEL GENERAL
  ======================================================== */

  .configurator-summary
  .summary-label {
    display: none;
  }


  /* =======================================================
     MODELO
  ======================================================== */

  .configurator-summary h3 {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    font-size: 1.05rem;

    line-height: 1.2;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  /* =======================================================
     BASE / EXTRAS
  ======================================================== */

  .configurator-summary
  .summary-line {
    min-width: 82px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 3px;

    padding: 0;

    border: none;
  }


  .configurator-summary
  .summary-line span {
    color:
      rgba(
        48,
        44,
        50,
        0.66
      );

    font-size: 0.68rem;

    line-height: 1.15;

    white-space: nowrap;
  }


  .configurator-summary
  .summary-line strong {
    font-size: 0.9rem;

    line-height: 1.15;

    white-space: nowrap;
  }


  /* =======================================================
     FUNCIONES SELECCIONADAS

     Continúan existiendo en el DOM para el resumen
     de escritorio, pero no se muestran dentro del nav.
  ======================================================== */

  .configurator-summary
  .selected-functions {
    display: none;
  }


  /* =======================================================
     TOTAL
  ======================================================== */

  .configurator-summary
  .summary-total {
    min-width: 105px;

    margin: 0;

    padding: 0;

    border-radius: 0;

    background: transparent;
  }


  .configurator-summary
  .summary-total span {
    margin-bottom: 3px;

    font-size: 0.68rem;

    line-height: 1.15;
  }


  .configurator-summary
  .summary-total strong {
    display: block;

    color: var(--gold);

    font-size: 1.18rem;

    line-height: 1.1;

    white-space: nowrap;
  }


  /* =======================================================
     CTA
  ======================================================== */

  .configurator-summary
  .btn-primary {
    width: auto;

    min-width: 150px;

    min-height: 44px;

    padding:
      0.75rem
      1rem;

    font-size: 0.78rem;

    white-space: nowrap;
  }


  /* =======================================================
     ESPACIO PARA QUE LA BARRA NO CUBRA
     EL FINAL DEL CONFIGURADOR
  ======================================================== */

  body.ms-configurator-summary-visible
  .configurator-layout {
    padding-bottom: 105px;
  }


  /* =======================================================
     WHATSAPP

     Cuando aparece el cotizador inferior,
     WhatsApp sube para no quedar encima.
  ======================================================== */

  body.ms-configurator-summary-visible
  .whatsapp-btn {
    bottom:
      calc(
        100px +
        env(safe-area-inset-bottom)
      )
      !important;
  }

}


/* =========================================================
   MOBILE
   Optimizado para 390px
========================================================= */

@media (max-width: 650px) {

  /* =======================================================
     INVITACIÓN BASE
  ======================================================== */

  .base-invitation-card {
    margin:
      5px
      auto
      42px;

    padding:
      22px
      18px;

    border-radius:
      26px;
  }


  .base-invitation-header {
    flex-direction: column;

    gap: 7px;
  }


  .base-invitation-label {
    margin-bottom: 5px;

    font-size: 0.7rem;

    letter-spacing: 0.035em;
  }


  .base-invitation-header h3 {
    font-size: 1.65rem;

    line-height: 1.15;
  }


  .base-invitation-price {
    font-size: 1rem;

    white-space: normal;
  }


  .base-invitation-description {
    margin:
      16px
      0
      18px;

    font-size: 0.86rem;

    line-height: 1.6;
  }


  /* =======================================================
     FUNCIONES DE LA INVITACIÓN BASE
  ======================================================== */

  .base-invitation-features {
    display: grid;

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

    gap: 8px;
  }


  .base-invitation-features span {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding:
      7px
      9px;

    border-radius: 18px;

    font-size: 0.74rem;

    line-height: 1.25;

    text-align: center;
  }


  .base-invitation-note {
    margin-top: 16px;

    font-size: 0.78rem;

    line-height: 1.5;
  }


  /* =======================================================
     CONFIGURATOR
  ======================================================== */

  .configurator-layout {
    gap: 26px;

    margin-top: 38px;
  }


  .selected-model-card {
    margin-bottom: 28px;

    padding: 20px;

    border-radius: 24px;
  }


  .selected-model-card span {
    font-size: 0.78rem;
  }


  .selected-model-card h3 {
    margin:
      6px
      0;

    font-size: 1.55rem;

    line-height: 1.2;
  }


  /* =======================================================
     FEATURE GROUP
  ======================================================== */

  .feature-group {
    margin-bottom: 30px;
  }


  .feature-group h3 {
    margin-bottom: 14px;

    font-size: 1.45rem;
  }


  /* =======================================================
     2 COLUMNAS EN MÓVIL
  ======================================================== */

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

    gap: 10px;
  }


  /* =======================================================
     FUNCTION CARD
  ======================================================== */

  .feature-card {
    min-height: 132px;

    padding:
      14px
      12px;

    border-radius: 19px;
  }


  .feature-card:hover {
    transform: none;
  }


  .feature-card > img {
    width: 21px;

    height: 21px;

    margin-bottom: 9px;
  }


  .feature-card > strong {
    margin-bottom: 5px;

    font-size: 0.78rem;

    line-height: 1.3;
  }


  .feature-card-price {
    margin-top: 6px;

    font-size: 0.77rem;
  }


  /* =======================================================
     PAQUETE AVANZADO
  ======================================================== */

  .feature-card--package {
    grid-column: 1 / -1;

    min-height: 0;

    padding: 18px;

    border-radius: 22px;
  }


  .feature-card--package
  > strong {
    font-size: 0.92rem;
  }


  .feature-card-details {
    margin:
      10px
      0
      12px;
  }


  .feature-card-description {
    margin-bottom: 10px;

    font-size: 0.77rem;

    line-height: 1.5;
  }


  .feature-card-includes {
    gap: 6px;
  }


  .feature-card-includes li {
    font-size: 0.76rem;

    line-height: 1.4;
  }


  /* =======================================================
     FLOATING QUOTE BAR — MOBILE
  ======================================================== */

  .configurator-summary {
    bottom:
      max(
        9px,
        env(safe-area-inset-bottom)
      );

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

    gap: 8px;

    width:
      calc(
        100% - 18px
      );

    padding:
      9px
      9px
      9px
      12px;

    border-radius: 20px;
  }


  /* =======================================================
     MODELO
  ======================================================== */

  .configurator-summary h3 {
    font-size: 0.8rem;

    line-height: 1.15;
  }


  /* =======================================================
     PRECIO BASE

     En teléfono lo ocultamos porque el total es
     la información económica prioritaria.
  ======================================================== */

  .configurator-summary
  > .summary-line:first-of-type {
    display: none;
  }


  /* =======================================================
     EXTRAS
  ======================================================== */

  .configurator-summary
  > .summary-line
  + .summary-line {
    min-width: 38px;

    align-items: center;

    text-align: center;
  }


  .configurator-summary
  > .summary-line
  + .summary-line
  span {
    display: none;
  }


  .configurator-summary
  > .summary-line
  + .summary-line::before {
    content: "Extras";

    display: block;

    color:
      rgba(
        48,
        44,
        50,
        0.58
      );

    font-size: 0.56rem;

    line-height: 1;
  }


  .configurator-summary
  > .summary-line
  + .summary-line
  strong {
    font-size: 0.78rem;
  }


  /* =======================================================
     TOTAL
  ======================================================== */

  .configurator-summary
  .summary-total {
    min-width: 72px;

    text-align: right;
  }


  .configurator-summary
  .summary-total span {
    display: none;
  }


  .configurator-summary
  .summary-total strong {
    font-size: 0.94rem;
  }


  /* =======================================================
     CTA
  ======================================================== */

  .configurator-summary
  .btn-primary {
    min-width: 116px;

    min-height: 42px;

    padding:
      0.68rem
      0.8rem;

    font-size: 0.68rem;

    line-height: 1.1;

    white-space: nowrap;
  }


  body.ms-configurator-summary-visible
  .configurator-layout {
    padding-bottom: 92px;
  }


  body.ms-configurator-summary-visible
  .whatsapp-btn {
    bottom:
      calc(
        88px +
        env(safe-area-inset-bottom)
      )
      !important;
  }

}


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

@media (max-width: 370px) {

  .base-invitation-card {
    padding:
      20px
      16px;
  }


  .base-invitation-features {
    gap: 7px;
  }


  .base-invitation-features span {
    padding:
      7px
      6px;

    font-size: 0.7rem;
  }


  .feature-grid {
    gap: 8px;
  }


  .feature-card {
    min-height: 128px;

    padding:
      13px
      10px;
  }


  .feature-card > strong {
    font-size: 0.74rem;
  }


  .feature-card-price {
    font-size: 0.72rem;
  }


  /* =======================================================
     FLOATING BAR COMPACTA
  ======================================================== */

  .configurator-summary {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      auto
      82px;

    gap: 6px;

    padding:
      8px
      8px
      8px
      10px;
  }


  .configurator-summary h3 {
    font-size: 0.72rem;
  }


  .configurator-summary
  .summary-total {
    min-width: 66px;
  }


  .configurator-summary
  .summary-total strong {
    font-size: 0.84rem;
  }


  /*
    Conservamos el texto original para lectores
    de pantalla, pero visualmente utilizamos una
    etiqueta más corta.
  */

  .configurator-summary
  .btn-primary {
    min-width: 82px;

    width: 82px;

    padding:
      0.65rem
      0.5rem;

    font-size: 0;
  }


  .configurator-summary
  .btn-primary::after {
    content: "Cotizar";

    font-size: 0.68rem;

    font-weight: 700;
  }

}


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

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

  .configurator-summary {
    transition:
      none !important;
  }


  .feature-card {
    transition:
      none !important;
  }

}