.az-servicio-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .28s ease,
    visibility .28s ease;

}


/* =========================================
   MODAL ACTIVO
========================================= */

.az-servicio-modal.is-open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


/* =========================================
   FONDO
========================================= */

.az-servicio-modal__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(10, 42, 94, .30);

  backdrop-filter: blur(8px);

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

}


/* =========================================
   VENTANA
========================================= */

.az-servicio-modal__window {

  position: relative;

  z-index: 2;

  width: min(100%, 600px);

  max-height: calc(100vh - 48px);

  overflow: auto;

  background: #ffffff;

  border: 1px solid #dce3ef;

  border-radius: 22px;

  box-shadow:
    0 30px 80px rgba(10, 42, 94, .18);

  transform:
    translateY(20px);

  transition:
    transform .3s ease;

}


/* =========================================
   ANIMACIÓN
========================================= */

.az-servicio-modal.is-open
.az-servicio-modal__window {

  transform:
    translateY(0);

}


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

.az-servicio-modal__header {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  min-height: 64px;

  padding: 20px 28px;

  border-bottom: 1px solid #e3e8f0;

}


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

.az-servicio-modal__label {

  color: #0A2A5E;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: .16em;

}


/* =========================================
   BOTÓN CERRAR
========================================= */

.az-servicio-modal__close {

  position: absolute;

  top: 17px;

  right: 18px;

  z-index: 3;

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: transparent;

  color: #0A2A5E;


  font-size: 25px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    background .2s ease,
    opacity .2s ease,
    transform .2s ease;

}


.az-servicio-modal__close:hover {

  background: #f3f6fa;

  opacity: .65;

  transform: rotate(90deg);

}


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

.az-servicio-modal__content {

  padding:
    42px 44px 44px;

}


/* =========================================
   EYEBROW
========================================= */

.az-servicio-modal__eyebrow {

  display: block;

  margin-bottom: 12px;

  color: #7d899a;


  font-size: 10px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


/* =========================================
   TÍTULO
========================================= */

.az-servicio-modal__content h2 {

  margin:
    0 0 18px;

  color: #0A2A5E;


  font-size:
    clamp(32px, 5vw, 44px);

  font-weight: 500;

  line-height: 1.1;

}


/* =========================================
   DESCRIPCIÓN
========================================= */

.az-servicio-modal__content > p {

  max-width: 490px;

  margin: 0;

  color: #5f6c7d;


  font-size: 15px;

  line-height: 1.75;

}


/* =========================================
   SEPARADOR
========================================= */

.az-servicio-modal__line {

  width: 100%;

  height: 1px;

  margin:
    32px 0 28px;

  background: #dce3ef;

}


/* =========================================
   VALOR AGREGADO
========================================= */

.az-servicio-modal__value > span {

  display: block;

  margin-bottom: 16px;

  color: #0A2A5E;


  font-size: 12px;

  font-weight: 600;

}


/* =========================================
   LISTA
========================================= */

.az-servicio-modal__value ul {

  display: grid;

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

  gap:
    11px 28px;

  margin: 0;

  padding: 0;

  list-style: none;

}


.az-servicio-modal__value li {

  position: relative;

  padding-left: 16px;

  color: #687587;


  font-size: 13px;

  line-height: 1.5;

}


.az-servicio-modal__value li::before {

  content: "·";

  position: absolute;

  left: 0;

  top: -1px;

  color: #0A2A5E;

  font-size: 18px;

}


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

.az-servicio-modal__action {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 34px;

  padding:
    16px 0;

  border-top:
    1px solid #dce3ef;

  border-bottom:
    1px solid #dce3ef;

  color: #0A2A5E;


  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  transition:
    opacity .2s ease,
    padding .2s ease;

}


.az-servicio-modal__action span {

  font-size: 17px;

  transition:
    transform .2s ease;

}


.az-servicio-modal__action:hover {

  opacity: .65;

  padding-left: 4px;

}


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

@media (max-width: 600px) {

  .az-servicio-modal {

    padding: 16px;

  }


  /* VENTANA */

  .az-servicio-modal__window {

    width: 100%;

    max-height:
      calc(100vh - 32px);

    border-radius: 18px;

  }


  /* HEADER */

  .az-servicio-modal__header {

    min-height: 60px;

    padding:
      18px 22px;

  }


  /* CERRAR */

  .az-servicio-modal__close {

    top: 14px;

    right: 14px;

  }


  /* CONTENIDO */

  .az-servicio-modal__content {

    padding:
      34px 24px 30px;

  }


  /* TÍTULO */

  .az-servicio-modal__content h2 {

    margin-bottom: 16px;

    font-size: 34px;

  }


  /* DESCRIPCIÓN */

  .az-servicio-modal__content > p {

    font-size: 14px;

    line-height: 1.7;

  }


  /* SEPARADOR */

  .az-servicio-modal__line {

    margin:
      28px 0 24px;

  }


  /* LISTA */

  .az-servicio-modal__value ul {

    grid-template-columns: 1fr;

    gap: 10px;

  }


  /* CTA */

  .az-servicio-modal__action {

    margin-top: 28px;

  }

}