.contacto-page {
    padding-top: 5rem;
    background: var(--cantera);
  }

  .contacto-section {
    padding: 6rem var(--px) 5rem;
  }

  .contacto-inner {
    /* Angosto cuando hay una sola columna (celular); mas ancho en
       escritorio para que las dos tarjetas quepan lado a lado. */
    max-width: 560px;
    margin: 0 auto;
  }

  @media (min-width: 860px) {
    .contacto-inner {
      max-width: 1040px;
    }
  }

  .contacto-header {
    margin-bottom: 3.5rem;
  }

  .contacto-header__label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--warm-400);
    margin-bottom: 0.75rem;
  }

  .contacto-header__title {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #E07B39;
    line-height: 1;
    margin-bottom: 1.25rem;
  }

  .contacto-header__desc {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--warm-500);
  }

  .contacto-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .form-field__label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warm-700);
  }

  .form-field__input,
  .form-field__textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--warm-200);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--warm-900);
    padding: 0.65rem 0;
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }

  .form-field__input::placeholder,
  .form-field__textarea::placeholder {
    color: var(--warm-400);
  }

  .form-field__input:focus,
  .form-field__textarea:focus {
    border-bottom-color: var(--accent);
  }

  .form-submit {
    align-self: flex-start;
    background: var(--warm-900);
    color: var(--cantera);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    transition: background 0.2s;
    margin-top: 0.5rem;
    cursor: pointer;
    border: none;
  }

  .form-submit:hover {
    background: var(--terracota);
  }

  @media (max-width: 1119px) {
    .contacto-page {
      padding-top: var(--mad-topbar-h, 5rem);
    }

    .contacto-section {
      padding-top: 0;
    }
  }

/* ---------- Campos nativos de fecha y hora (contacto) ----------
   Reemplazan a los plugins jQuery viejos. Se ajustan para que
   compartan la linea inferior del resto de campos y para que el
   icono del calendario/reloj tome el color de marca. */
.form-field__input--date,
.form-field__input--time {
  min-height: 2.6rem;               /* alto consistente con los demas */
  color: var(--warm-900);
  font-family: var(--font-sans);
}

/* Cuando aun no hay valor, el texto guia se ve como un placeholder */
.form-field__input--date:not(:focus):invalid,
.form-field__input--time:not(:focus):invalid {
  color: var(--warm-400);
}

/* El icono nativo (calendario / reloj) en terracota */
.form-field__input--date::-webkit-calendar-picker-indicator,
.form-field__input--time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease;
  /* tinte hacia el terracota de marca */
  filter: invert(48%) sepia(58%) saturate(700%) hue-rotate(340deg) brightness(95%);
}
.form-field__input--date:hover::-webkit-calendar-picker-indicator,
.form-field__input--time:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Quita el spinner de las flechas del campo de hora en WebKit */
.form-field__input--time::-webkit-inner-spin-button {
  display: none;
}

/* ---------- Contacto: dos tarjetas lado a lado ----------
   "Si eres cliente" (formulario) y "Si eres artista" en dos
   columnas en escritorio; apiladas en celular. */
.contacto-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 860px) {
  .contacto-cols {
    /* El formulario, mas alto, ocupa algo mas de ancho que la tarjeta de artista */
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
  }
}

/* Dentro de la rejilla las tarjetas ya no llevan el margen inferior
   que tenian cuando iban apiladas. Cada una toma su altura natural
   (el grid las alinea arriba), asi la de artista no queda estirada. */
.contacto-cols .contacto-card {
  margin-bottom: 0;
}

/* ---------- Datos de contacto a la vista (telefono, correo, WhatsApp) ---------- */
.contacto-medios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .contacto-medios {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.contacto-medio {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.contacto-medio:hover,
.contacto-medio:focus-visible {
  border-color: var(--terracota);
  background: var(--cantera);
}

.contacto-medio__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-400);
}

.contacto-medio__valor {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--terracota);
  word-break: break-word;
}