/* ==========================================================
   MARCHENA ÁVILA & ABOGADOS ASOCIADOS
   CONTACTO
   ========================================================== */


/* ==========================================================
   01. PORTADA
   ========================================================== */

.contact-hero {
  position: relative;

  display: flex;

  min-height: 420px;

  overflow: hidden;

  align-items: center;

  background:
    var(--navy-2);
}


/* ==========================================================
   IMAGEN PORTADA
   ========================================================== */

.contact-hero-media,
.contact-hero-overlay {
  position: absolute;

  inset: 0;
}


.contact-hero-media {
  z-index: 0;
}


.contact-hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center 48%;

  filter:
    saturate(0.76) contrast(1.04);
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.contact-hero-overlay {
  z-index: 1;

  background:
    linear-gradient(90deg,
      rgba(5, 20, 36, 0.96) 0%,
      rgba(5, 20, 36, 0.88) 34%,
      rgba(5, 20, 36, 0.65) 61%,
      rgba(5, 20, 36, 0.27) 100%);
}


/* ==========================================================
   DECORACIÓN HERO
   ========================================================== */

.contact-hero-decoration {
  position: absolute;

  top: 50%;
  right: -100px;

  z-index: 2;

  width: 300px;
  height: 300px;

  border:
    1px solid rgba(216, 181, 107, 0.16);

  transform:
    translateY(-50%) rotate(45deg);

  pointer-events: none;
}


.contact-hero-decoration::before {
  content: "";

  position: absolute;

  inset: 36px;

  border:
    1px solid rgba(216, 181, 107, 0.08);
}


.contact-hero-decoration::after {
  content: "";

  position: absolute;

  inset: 72px;

  border:
    1px solid rgba(216, 181, 107, 0.045);
}


/* ==========================================================
   CONTENEDOR PORTADA
   ========================================================== */

.contact-hero-container {
  position: relative;

  z-index: 3;

  width: 100%;
}


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

.contact-hero-content {
  max-width: 590px;

  /*
    CORRECCIÓN:
    vuelve a tener margen interno como las
    otras páginas, pero sin exagerarlo.
  */

  margin-left:
    clamp(30px, 4vw, 70px);

  padding:
    50px 0;
}


/* ==========================================================
   ETIQUETA
   ========================================================== */

.contact-hero-label {
  display: block;

  margin-bottom: 11px;

  color:
    var(--gold);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.59rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


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

.contact-hero h1 {
  max-width: 590px;

  margin: 0;

  color:
    #ffffff;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(2.35rem, 3.5vw, 3.55rem);

  font-weight: 600;

  line-height:
    1.05;

  letter-spacing:
    -0.025em;
}


.contact-hero h1 span {
  display: block;

  font-weight: 600;
}


/* ==========================================================
   LÍNEA DORADA
   ========================================================== */

.contact-hero-rule {
  width: 52px;
  height: 2px;

  margin:
    18px 0 15px;

  background:
    var(--gold);
}


/* ==========================================================
   TEXTO PORTADA
   ========================================================== */

.contact-hero-content p {
  max-width: 450px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.74);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* ==========================================================
   02. CONTACTO
   ========================================================== */

.contact-wrap {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr) minmax(0, 1.15fr);

  gap:
    70px;

  align-items:
    start;
}


/* ==========================================================
   INFORMACIÓN DE CONTACTO
   ========================================================== */

.contact-info {
  position: sticky;

  top:
    calc(var(--header-h) + 32px);
}


.contact-info h2 {
  margin:
    12px 0 20px;
}


.contact-list {
  display: grid;

  gap:
    14px;

  margin-top:
    34px;
}


.contact-item {
  padding:
    20px 0;

  border-bottom:
    1px solid var(--line);
}


.contact-item small {
  display: block;

  color:
    var(--gold);

  font-size:
    0.68rem;

  font-weight:
    700;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.contact-item a,
.contact-item span {
  display: inline-block;

  margin-top:
    5px;

  color:
    var(--navy);

  font-weight:
    600;
}


/* ==========================================================
   03. FORMULARIO
   ========================================================== */

.form-card {
  padding:
    38px;

  border:
    1px solid var(--line);

  border-radius:
    30px;

  background:
    #ffffff;

  box-shadow:
    var(--shadow);
}


/* ==========================================================
   ENCABEZADO FORMULARIO
   ========================================================== */

.form-heading {
  margin-bottom:
    28px;

  padding-bottom:
    25px;

  border-bottom:
    1px solid var(--line);
}


.form-eyebrow {
  display: block;

  margin-bottom:
    8px;

  color:
    var(--gold);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.59rem;

  font-weight:
    700;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.form-heading h2 {
  max-width:
    500px;

  margin: 0;

  color:
    var(--navy);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(1.65rem, 2.2vw, 2.15rem);

  font-weight:
    600;

  line-height:
    1.15;
}


.form-heading p {
  max-width:
    540px;

  margin-top:
    9px;

  color:
    var(--muted);

  font-size:
    0.79rem;

  line-height:
    1.7;
}


/* ==========================================================
   HONEYPOT
   ========================================================== */

.form-honey {
  position: absolute !important;

  left: -9999px !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events:
    none !important;
}


/* ==========================================================
   GRID FORMULARIO
   ========================================================== */

.form-grid {
  display: grid;

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

  gap:
    18px;
}


.field {
  display: grid;

  gap:
    8px;
}


.field.full {
  grid-column:
    1 / -1;
}


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

.field label {
  color:
    var(--navy);

  font-size:
    0.78rem;

  font-weight:
    700;
}


.field label span {
  color:
    var(--gold);
}


/* ==========================================================
   INPUTS
   ========================================================== */

.field input,
.field select,
.field textarea {
  width:
    100%;

  min-width:
    0;

  padding:
    14px 16px;

  border:
    1px solid var(--line);

  border-radius:
    14px;

  outline:
    none;

  background:
    #fbfbfa;

  color:
    var(--ink);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.84rem;

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


.field input::placeholder,
.field textarea::placeholder {
  color:
    #9a9da3;
}


/* ==========================================================
   TEXTAREA
   ========================================================== */

.field textarea {
  min-height:
    150px;

  resize:
    vertical;
}


/* ==========================================================
   FOCUS
   ========================================================== */

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    var(--gold);

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px rgba(216, 181, 107, 0.12);
}


/* ==========================================================
   ERROR DE VALIDACIÓN
   ========================================================== */

.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid {
  border-color:
    #a95454;

  box-shadow:
    0 0 0 3px rgba(169, 84, 84, 0.08);
}


/* ==========================================================
   ÁREA DE ENVÍO
   ========================================================== */

.form-submit-area {
  margin-top:
    4px;
}


.submit-button {
  position: relative;

  display: inline-flex;

  width:
    fit-content;

  min-width:
    190px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;
}


/* ==========================================================
   LOADER
   ========================================================== */

.submit-loader {
  display:
    none;

  width:
    15px;

  height:
    15px;

  border:
    2px solid rgba(255, 255, 255, 0.35);

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    form-spin 0.7s linear infinite;
}


.submit-button.loading .submit-loader {
  display:
    block;
}


.submit-button.loading {
  cursor:
    wait;

  opacity:
    0.85;
}


@keyframes form-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* ==========================================================
   ESTADO DEL FORMULARIO
   ========================================================== */

.form-status {
  display:
    none;

  margin-top:
    16px;

  padding:
    13px 15px;

  border-radius:
    10px;

  font-size:
    0.8rem;

  line-height:
    1.55;
}


.form-status.show {
  display:
    block;
}


.form-status.success {
  border-left:
    3px solid var(--gold);

  background:
    rgba(216, 181, 107, 0.12);

  color:
    var(--navy);
}


.form-status.error {
  border-left:
    3px solid #a95454;

  background:
    rgba(169, 84, 84, 0.09);

  color:
    #7c3535;
}


/* ==========================================================
   PRIVACIDAD
   ========================================================== */

.privacy {
  max-width:
    560px;

  margin-top:
    14px;

  color:
    var(--muted);

  font-size:
    0.72rem;

  line-height:
    1.6;
}


/* ==========================================================
   04. PANTALLAS GRANDES
   ========================================================== */

/*
   Como Equipo y Nosotros:
   solo aumenta la portada en monitores grandes.

   Laptop conserva 420px.
*/

@media (min-width: 1500px) {

  .contact-hero {
    min-height:
      clamp(480px, 29vw, 560px);
  }

}


/* ==========================================================
   05. RESPONSIVE - 920PX
   ========================================================== */

@media (max-width: 920px) {

  /* PORTADA */

  .contact-hero {
    min-height:
      340px;
  }


  .contact-hero-media img {
    object-position:
      58% center;
  }


  .contact-hero-content {
    max-width:
      540px;

    margin-left:
      clamp(15px, 3vw, 30px);

    padding:
      44px 0;
  }


  .contact-hero h1 {
    font-size:
      clamp(2.2rem, 5vw, 3rem);
  }


  /* CONTACTO */

  .contact-wrap {
    grid-template-columns:
      1fr;

    gap:
      46px;
  }


  .contact-info {
    position:
      static;
  }

}


/* ==========================================================
   06. RESPONSIVE - 720PX
   ========================================================== */

@media (max-width: 720px) {

  .contact-hero {
    min-height:
      330px;
  }


  .contact-hero-media img {
    object-position:
      60% center;
  }


  .contact-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(5, 20, 36, 0.45) 0%,
        rgba(5, 20, 36, 0.70) 40%,
        rgba(5, 20, 36, 0.95) 100%);
  }


  .contact-hero-content {
    margin-left:
      0;

    padding:
      48px 0 42px;
  }


  .contact-hero h1 {
    max-width:
      500px;

    font-size:
      clamp(2.05rem, 8vw, 2.65rem);
  }


  .contact-hero-decoration {
    right:
      -210px;

    opacity:
      0.5;
  }

}


/* ==========================================================
   07. RESPONSIVE - 640PX
   ========================================================== */

@media (max-width: 640px) {

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


  .field.full {
    grid-column:
      auto;
  }


  .form-card {
    padding:
      26px 20px;

    border-radius:
      24px;
  }


  .submit-button {
    width:
      100%;
  }

}


/* ==========================================================
   08. RESPONSIVE - 520PX
   ========================================================== */

@media (max-width: 520px) {

  .contact-hero {
    min-height:
      320px;
  }


  .contact-hero-content {
    padding:
      45px 0 40px;
  }


  .contact-hero h1 {
    font-size:
      clamp(2rem, 9vw, 2.5rem);
  }


  .contact-hero-content p {
    max-width:
      94%;

    font-size:
      0.78rem;
  }


  .form-heading h2 {
    font-size:
      1.7rem;
  }

}


/* ==========================================================
   09. RESPONSIVE - 380PX
   ========================================================== */

@media (max-width: 380px) {

  .contact-hero {
    min-height:
      310px;
  }


  .contact-hero h1 {
    font-size:
      1.9rem;
  }

}