:root{
  --blue:#011077;
  --black:#000000;
  --white:#FFFFFF;
}

/* =========================
   CONTACTO (1440 x 568 fijo)
========================= */
.contact{
  width:100%;
  height:568px;
  overflow:hidden;
  background:var(--black);
  box-sizing:border-box;
}

.contact-container{
  max-width:1440px;
  width:100%;
  height:568px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
}

/* =========================
   IZQUIERDA: FORMULARIO
   (degradado más claro, no tan oscuro)
========================= */
.contact-form{
  height:568px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 64px;
  box-sizing:border-box;

  /* ✅ Azul dominante + sombra negra suave (sin “negrear” todo) */
  background:
    #011077;
}

.cform{
  width:100%;
  max-width:620px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:18px;
  row-gap:16px;
}

.span-2{ grid-column:1 / -1; }

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  color:var(--white);
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}

/* inputs / select */
.form-group input,
.form-group select{
  height:54px;
  border-radius:18px;
  padding:0 18px;
  font-size:16px;
  font-weight:700;
  outline:none;
  box-sizing:border-box;

  background:linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
  border:1px solid rgba(0,0,0,.14);
  color:var(--black);

  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.form-group input::placeholder{
  color:rgba(0,0,0,.45);
}

/* select estilizado */
.form-group select{
  appearance:none;
  padding-right:52px;
  cursor:pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.60) 50%),
    linear-gradient(135deg, rgba(0,0,0,.60) 50%, transparent 50%),
    linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:8px 8px, 8px 8px, 100% 100%;
  background-repeat:no-repeat;
}

/* focus */
.form-group input:focus,
.form-group select:focus{
  border-color:var(--blue);
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    0 0 0 4px rgba(1,16,119,.25);
}

/* =========================
   BOTÓN ENVIAR (líquido)
========================= */
.form-actions{
  display:flex;
  justify-content:flex-start;
  margin-top:6px;
}

.contact .btn-submit{
  width:220px;
  height:56px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:var(--white);
  color:var(--black);

  font-size:22px;
  font-weight:700;
  text-decoration:none;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 12px 22px rgba(0,0,0,0.25);

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

  position:relative;
  overflow:hidden;
  isolation:isolate;
  z-index:0;

  --flow:var(--black);
  cursor:pointer;
}

.contact .btn-submit::before,
.contact .btn-submit::after{
  content:"";
  position:absolute;
  bottom:0;
  width:50%;
  height:120%;
  background:var(--flow);
  border-radius:50%;
  transform:translateY(120%) scale(1);
  transition:transform .45s ease;
  z-index:-1;
}

.contact .btn-submit::before{
  left:0;
  transition-delay:0s;
}

.contact .btn-submit::after{
  left:50%;
  transition-delay:.12s;
}

.contact .btn-submit:hover{
  transform:translateY(-2px);
  color:var(--white);
  border-color:var(--black);
}

.contact .btn-submit:hover::before,
.contact .btn-submit:hover::after{
  transform:translateY(0) scale(1.6);
}

.contact .btn-submit:active{
  transform:translateY(2px);
}

/* =========================
   DERECHA: IMAGEN
   (overlay menos “negro pesado”)
========================= */
.contact-image{
  height:568px;
  position:relative;
  background:url("../img/contact/contact.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-image::before{
  content:"";
  position:absolute;
  inset:0;

  /* ✅ Negro suave para no apagar la foto */
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 50%,
    rgba(0,0,0,.18) 100%
  );
}

.contact-image h2{
  position:relative;
  z-index:1;
  color:var(--white);
  font-size:68px;
  font-weight:900;
}

/* =========================
   EFECTOS DE ENTRADA
========================= */
.contact .contact-form,
.contact .contact-image h2,
.contact .form-group,
.contact .form-actions{
  opacity:0;
  transform:translateY(20px);
  filter:blur(6px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.9,.2,1),
    filter .9s ease;
}

.contact.is-visible .contact-form,
.contact.is-visible .contact-image h2,
.contact.is-visible .form-group,
.contact.is-visible .form-actions{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.contact.is-visible .form-group:nth-child(1){ transition-delay:.05s; }
.contact.is-visible .form-group:nth-child(2){ transition-delay:.10s; }
.contact.is-visible .form-group:nth-child(3){ transition-delay:.15s; }
.contact.is-visible .form-group:nth-child(4){ transition-delay:.20s; }
.contact.is-visible .form-group:nth-child(5){ transition-delay:.25s; }
.contact.is-visible .form-actions{ transition-delay:.35s; }

/* =========================
   RESPONSIVE (ORDEN CORREGIDO)
========================= */
@media (max-width:950px){
  .contact,
  .contact-container{
    height:auto;
  }

  .contact-container{
    grid-template-columns:1fr;
  }

  .contact-image{
    order:1;
    height:320px;
  }

  .contact-form{
    order:2;
    height:auto;
    padding:54px 18px;
  }

  .cform{
    grid-template-columns:1fr;
  }

  .form-actions{
    justify-content:stretch;
  }

  .btn-submit{
    width:100%;
    height:64px;
    font-size:24px;
    border-radius:18px;
  }

  .contact-image h2{
    font-size:44px;
    text-align:center;
  }
}