/* =========================================================
   NECORA Landing — 14-forms.css
   EXTRAÍDO DESDE landing.css v30.5
   Scope:
   - forms
   - fields
   - select custom
   - error states
   - checkboxes
   - loading state
   - drawer + fab
   - success panel
   - contact success UX
   ========================================================= */

/* =========================================================
   @forms
   15) FORMS
   ========================================================= */
.nl-form{
  position: relative;
  padding: 18px;
  border-radius: calc(var(--nl-radius) + 12px);
  border: 1px solid var(--nl-bd2);
  overflow: hidden;
}

.nl-form .nl-grid{ gap: 14px; }

@media (max-width: 740px){
  .nl-grid--2{ grid-template-columns: 1fr; }
}

.nl-field{ display:grid; gap: 8px; }

.nl-field > span{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--nl-ink-72);
}

.nl-field input,
.nl-field select,
.nl-field textarea{
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--nl-bd2);
  background: var(--nl-glass-86);
  color: var(--nl-text);
  outline: none;
  font-size:16px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease;
}

.nl-field input::placeholder,
.nl-field textarea::placeholder{
  color: rgba(12,18,28,.40);
}

.nl-field input:focus,
.nl-field select:focus,
.nl-field textarea:focus{
  border-color: var(--nl-focus-border);
  background: var(--nl-glass-95);
  box-shadow: var(--nl-focus-ring);
  transform: translateY(-1px);
}

.nl-field textarea{
  min-height: 110px;
  resize: vertical;
}

.nl-field select{
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(12,18,28,.72) 50%),
    linear-gradient(135deg, rgba(12,18,28,.72) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.nl-field.is-error input,
.nl-field.is-error select,
.nl-field.is-error textarea{
  border-color: rgba(255,92,120,.55);
  background: rgba(255,92,120,.08);
  box-shadow: 0 0 0 4px rgba(255,92,120,.14);
}

.nl-error{
  font-size: 12px;
  color: rgba(180,20,50,.80);
  font-weight: 900;
}

.nl-check{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--nl-bd2);
  background: var(--nl-glass-72);
}

.nl-check input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: rgba(0,161,223,1);
}

.nl-form.is-loading .nl-btn--primary{
  pointer-events: none;
  opacity: .86;
  filter: saturate(.92);
}

.nl-form.is-loading .nl-btn--primary::after{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.80);
  border-top-color: transparent;
  margin-left: 10px;
  vertical-align: -3px;
  animation: nlspin .85s linear infinite;
}

@keyframes nlspin{
  to{ transform: rotate(360deg); }
}

.nl-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* =========================================================
   16) DRAWER + FAB
   ========================================================= */
.nl-drawer__panel{
  background: var(--nl-glass-92);
  box-shadow:-24px 0 60px rgba(10,20,35,.16);
}

.nl-drawer__links a{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border-color: var(--nl-bd2);
}

@media (hover:hover){
  .nl-drawer__links a:hover{
    border-color: rgba(0,161,223,.18);
  }
}

.nl-fab{
  background: var(--nl-glass-92);
  border-color: var(--nl-bd2);
  box-shadow:
    0 22px 54px rgba(10,20,35,.16),
    inset 0 1px 0 rgba(255,255,255,.65);
}

@media (hover:hover){
  .nl-fab:hover{
    border-color:rgba(0,161,223,.22);
  }
}

/* =========================================================
   17) SUCCESS PANEL
   ========================================================= */
.nl-success{ margin:0 0 18px 0; }

.nl-success__card{
  border:1px solid var(--nl-bd2);
  border-radius: calc(var(--nl-radius) + 6px);
  padding:18px;
}

.nl-success__badge{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(0,161,223,.10);
  border:1px solid rgba(0,161,223,.18);
  margin-bottom:10px;
}

.nl-success__title{
  margin:0 0 6px 0;
  font-size:18px;
  letter-spacing:-.01em;
  color: var(--nl-text);
}

.nl-success__text{
  margin:0 0 12px 0;
  color: var(--nl-muted);
}

.nl-success__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 12px 0;
}

.nl-success__msg{
  width:100%;
  border-radius:14px;
  border:1px solid var(--nl-bd2);
  background: var(--nl-glass-86);
  color: var(--nl-text);
  padding:12px;
  resize:none;
}

.nl-sentinel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   17.1) CONTACTO — Success UX (PRO)
   Integrado aquí para no abrir otro módulo
   ========================================================= */

/* Anchor para scroll */
#contacto .nl-formTop{
  position: relative;
  top: -16px;
}

/* Banner de éxito (oculto) */
#contacto .nl-formSuccess{
  display:none;
  margin: 14px 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,161,223,.22);
  background:
    radial-gradient(700px 220px at 12% 0%, rgba(0,161,223,.16), transparent 60%),
    linear-gradient(180deg, rgba(12,18,28,.72), rgba(12,18,28,.46));
  box-shadow:
    0 24px 70px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#contacto.is-sent .nl-formSuccess{
  display:block;
  animation: nlPop .26s ease both;
}

#contacto .nl-formSuccess__in{
  padding: 14px 14px;
}

#contacto .nl-formSuccess__title{
  font-weight: 1000;
  font-size: 18px;
  line-height: 1.1;
  color: rgba(255,255,255,.96);
  letter-spacing: -.02em;
}

#contacto .nl-formSuccess__text{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
}

/* En móvil: aún más grande */
@media (max-width: 520px){
  #contacto .nl-formSuccess__title{ font-size: 19px; }
  #contacto .nl-formSuccess__text{ font-size: 14.5px; }
}

@keyframes nlPop{
  from{
    transform: translateY(6px);
    opacity:0;
  }
  to{
    transform: translateY(0);
    opacity:1;
  }
}