.modal-contacto {
  width: min(calc(100% - 32px), 760px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--color-blanco);
  background: transparent;
  border: 0;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-profunda)
}
body.modal-contacto-abierto {
  position: fixed;
  width: 100%;
  overflow: hidden
}
.modal-contacto::backdrop {
  background: rgba(11,11,13,.86)
}
.modal-contacto__contenido {
  position: relative;
  isolation: isolate;
  contain: paint;
  padding: clamp(24px, 4vw, 40px);
  overflow: hidden;
  background: radial-gradient(circle at 88% 8%, rgba(243,107,33,.25), transparent 24%),radial-gradient(circle at 8% 100%, rgba(217,26,44,.25), transparent 30%),var(--color-negro-suave);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio-md)
}
.modal-contacto__escamas {
  position: absolute;
  z-index: 0;
  right: -20px;
  bottom: -38px;
  left: -20px;
  height: 290px;
  opacity: .48;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300' shape-rendering='geometricPrecision'%3E%3Cg fill='none' stroke='white' stroke-opacity='.18' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 50)'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50'/%3E%3Cpath d='M-75 100A50 50 0 0 1 25 100M75 100A50 50 0 0 1 175 100'/%3E%3C/g%3E%3Cg transform='translate(0 150)'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50'/%3E%3Cpath d='M-75 100A50 50 0 0 1 25 100M75 100A50 50 0 0 1 175 100'/%3E%3C/g%3E%3Cg transform='translate(0 250)'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50'/%3E%3Cpath d='M-75 100A50 50 0 0 1 25 100M75 100A50 50 0 0 1 175 100'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 300px;
  background-position: 0 0;
  background-repeat: repeat-x
}
.modal-contacto__cabecera,.modal-contacto form {
  position: relative;
  z-index: 1
}
.modal-contacto__cerrar {
  position: sticky;
  z-index: 2;
  top: 12px;
  display: grid !important;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  align-items: center;
  justify-content: center;
  margin-bottom: -48px;
  margin-left: calc(100% - 48px);
  padding: 0;
  font-family: var(--fuente-japonesa);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0
}
.modal-contacto__cabecera h2 {
  max-width: 550px;
  margin: 0;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.065em
}
.modal-contacto__cabecera {
  padding-right: 60px
}
.modal-contacto__cabecera > p:last-child {
  max-width: 510px;
  margin: 14px 0 0;
  color: rgba(247,245,240,.68);
  line-height: 1.55
}
.modal-contacto form {
  margin-top: 24px
}
.modal-contacto__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}
.campo-formulario {
  position: relative;
  display: grid;
  gap: 6px
}
.campo-formulario--completo {
  grid-column: 1 / -1
}
.campo-formulario label {
  font-size: 13px;
  font-weight: 700
}
.campo-formulario input,.campo-formulario textarea {
  width: 100%;
  padding: 12px 16px;
  color: var(--color-blanco);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--linea-oscura);
  border-radius: 14px;
  outline: none;
  touch-action: manipulation;
  transition: border-color .2s,background-color .2s
}
.campo-formulario textarea {
  resize: none;
  min-height: 104px;
  height: 104px;
  overflow-y: auto
}
.campo-formulario input:focus,.campo-formulario textarea:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--color-dorado-claro)
}
.campo-formulario input[aria-invalid=true],.campo-formulario textarea[aria-invalid=true] {
  border-color: var(--color-rojo)
}
.contador-mensaje {
  justify-self: end;
  color: rgba(247,245,240,.56);
  font-size: 12px;
  font-weight: 600
}
.campo-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap
}
.turnstile-contacto {
  display: flex;
  min-height: 65px;
  justify-content: center;
  margin-top: 14px
}
.modal-contacto__estado {
  min-height: 1.5em;
  margin: 10px 0 0;
  color: var(--color-dorado-claro);
  font-size: 14px;
  font-weight: 600
}
.modal-contacto__estado.error {
  color: #ff8792
}
.modal-contacto__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px
}
.modal-contacto__acciones .boton-primario {
  margin-left: auto
}
.modal-contacto__acciones .boton {
  min-height: 50px
}
.boton-enviar-formulario__cargador {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(11,11,13,.28);
  border-top-color: var(--color-negro);
  border-radius: 50%;
  animation: girar-cargador-formulario .7s linear infinite
}
.boton-enviar-formulario.enviando .boton-enviar-formulario__cargador {
  display: block
}
.boton-enviar-formulario.enviado {
  color: var(--color-negro);
  background: var(--color-dorado-claro)
}
.boton-enviar-formulario.enviado:disabled {
  cursor: not-allowed;
  opacity: 1
}
.modal-contacto button:disabled {
  cursor: wait;
  opacity: .65
}
@keyframes girar-cargador-formulario {
  to {
    transform: rotate(360deg)
  }
}
@media (max-width: 600px) {
  .modal-contacto {
    width: min(calc(100% - 16px), 760px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden
  }
  .modal-contacto__contenido {
    height: 100%;
    padding: 20px;
    contain: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch
  }
  .modal-contacto__cabecera {
    padding-right: 60px
  }
  .modal-contacto__cerrar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin-bottom: -40px;
    margin-left: calc(100% - 40px);
    font-size: 16px
  }
  .modal-contacto__cabecera h2 {
    font-size: clamp(36px, 10vw, 46px)
  }
  .turnstile-contacto {
    min-height: 58px
  }
  .turnstile-contacto > div {
    transform: scale(.86);
    transform-origin: top center
  }
  .modal-contacto__campos {
    grid-template-columns: 1fr
  }
  .campo-formulario--completo {
    grid-column: auto
  }
  .modal-contacto__acciones {
    align-items: stretch;
    flex-direction: column
  }
  .boton-cerrar-formulario {
    display: none !important
  }
  .modal-contacto__acciones .boton-primario {
    margin-left: 0
  }
}
@media (max-height: 720px) {
  .modal-contacto__contenido {
    padding: 18px 20px
  }
  .modal-contacto__cabecera .etiqueta {
    margin-bottom: 12px
  }
  .modal-contacto__cabecera h2 {
    font-size: clamp(32px, 7vh, 46px)
  }
  .modal-contacto__cabecera > p:last-child {
    margin-top: 8px;
    font-size: 14px
  }
  .modal-contacto form {
    margin-top: 14px
  }
  .modal-contacto__campos {
    gap: 8px
  }
  .campo-formulario input {
    padding-block: 9px
  }
  .campo-formulario textarea {
    min-height: 78px;
    height: 78px;
    padding-block: 9px
  }
  .turnstile-contacto {
    margin-top: 8px
  }
  .modal-contacto__estado {
    margin-top: 6px
  }
  .modal-contacto__acciones {
    margin-top: 8px
  }
  .modal-contacto__acciones .boton {
    min-height: 46px
  }
}